/* ============================================ KITELOOP — Light Theme: Parchment & Ink The daytime companion to the terminal dark. Warm cream broadsheet, burnt ochre accent, ink-dark serif headlines on paper. ============================================ */ /* --- Activate with or via media query --- */ .theme-light { /* Surface — warm paper tones, not clinical white */ --bg-deep: #f2ede4; --bg-surface: #faf7f1; --bg-card: #ffffff; --bg-card-hover: #fdfcf9; --bg-elevated: #f0ebe1; /* Text — warm ink */ --text-primary: #1c1917; --text-secondary: #57534e; --text-muted: #a8a29e; --text-accent: #b45309; /* Decay bar — subtler on light */ --decay-glow: 0.15; /* Borders — visible hairlines, like column rules */ --border-subtle: rgba(28, 25, 23, 0.06); --border-visible: rgba(28, 25, 23, 0.12); } /* --- Kill the noise texture on light --- */ .theme-light body::before { display: none; } /* --- Paper texture: very subtle grain --- */ .theme-light body::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(180, 83, 9, 0.008) 2px, rgba(180, 83, 9, 0.008) 4px ); pointer-events: none; z-index: 9999; } /* --- Masthead --- */ .theme-light .masthead { border-bottom-color: rgba(28, 25, 23, 0.08); } .theme-light .masthead-kite svg [stroke] { stroke: var(--text-accent); } .theme-light .masthead-kite svg { filter: drop-shadow(0 4px 20px rgba(180, 83, 9, 0.08)); } /* --- Category Bar --- */ .theme-light .category-bar { background: rgba(242, 237, 228, 0.95); border-bottom-color: rgba(28, 25, 23, 0.08); } .theme-light .cat-pill { color: var(--text-muted); border-color: rgba(28, 25, 23, 0.12); } .theme-light .cat-pill:hover { color: var(--text-secondary); border-color: rgba(28, 25, 23, 0.2); background: rgba(28, 25, 23, 0.03); } .theme-light .cat-pill.active { color: var(--text-accent); border-color: rgba(180, 83, 9, 0.35); background: rgba(180, 83, 9, 0.06); } .theme-light .cat-search { border-color: rgba(28, 25, 23, 0.12); color: var(--text-secondary); } .theme-light .cat-search:focus { border-color: rgba(180, 83, 9, 0.5); } /* --- Cards --- */ .theme-light .view-card { background: var(--bg-card); border: none; box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06), 0 4px 16px rgba(28, 25, 23, 0.04); border-radius: 3px; } .theme-light .view-card:hover { background: var(--bg-card); box-shadow: 0 2px 8px rgba(28, 25, 23, 0.08), 0 8px 24px rgba(28, 25, 23, 0.06); transform: translateY(-2px); } /* Card hero image — warmer treatment */ .theme-light .card-hero { border-bottom: 1px solid rgba(28, 25, 23, 0.06); } /* Image-forward card gradient — fade to dark tint of the card's accent hue so white text stays legible */ .theme-light .view-card.card-image-forward .card-hero-wrap::after { background: linear-gradient( to bottom, transparent 20%, hsla(var(--community-hue), 30%, 15%, 0.85) 100% ); } .theme-light .view-card.card-image-forward .card-overlay h2 { color: #f5f0e8; } .theme-light .view-card.card-image-forward .card-overlay .card-meta { color: rgba(245, 240, 232, 0.7); } /* --- Decay Bar — warm ochre on light --- */ .theme-light .decay-bar { box-shadow: 0 0 calc(var(--decay, 1) * 6px) hsla(var(--community-hue), 60%, 45%, calc(var(--decay, 1) * var(--decay-glow))), 0 1px 0 rgba(28, 25, 23, 0.04); } /* --- Signal Dots --- */ .theme-light .dot-live { background: #dc2626; box-shadow: 0 0 4px rgba(220, 38, 38, 0.35); } .theme-light .dot-fresh { background: #16a34a; box-shadow: 0 0 4px rgba(22, 163, 74, 0.3); } .theme-light .dot-warm { background: #78716c; opacity: 0.5; } .theme-light .dot-muted { background: #d6d3d1; opacity: 0.6; } .theme-light .card-recency .tempo-live { background: #dc2626; box-shadow: 0 0 5px rgba(220, 38, 38, 0.35); } .theme-light .card-recency .tempo-fresh { background: #16a34a; box-shadow: 0 0 5px rgba(22, 163, 74, 0.3); } /* --- Card Actions --- */ .theme-light .card-actions button { border-color: rgba(28, 25, 23, 0.1); color: var(--text-muted); } .theme-light .card-actions button:hover { background: rgba(28, 25, 23, 0.03); color: var(--text-secondary); border-color: rgba(28, 25, 23, 0.2); } .theme-light .card-actions button.tracked { background: hsla(var(--community-hue), 45%, 50%, 0.08); border-color: hsla(var(--community-hue), 45%, 50%, 0.25); color: hsla(var(--community-hue), 55%, 35%, 1); } /* --- Links --- */ .theme-light a { color: var(--text-accent); } /* --- Modal --- */ .theme-light .modal-overlay.open { background: rgba(242, 237, 228, 0.8); backdrop-filter: blur(12px); } .theme-light .modal-container { background: #ffffff; border: 1px solid rgba(28, 25, 23, 0.08); box-shadow: 0 8px 32px rgba(28, 25, 23, 0.1), 0 24px 64px rgba(28, 25, 23, 0.06); } .theme-light .modal-close { color: var(--text-muted); } .theme-light .modal-close:hover { color: var(--text-primary); } /* --- TTS Button --- */ .theme-light .tts-play-btn { border-color: rgba(28, 25, 23, 0.12); color: var(--text-muted); } .theme-light .tts-play-btn:hover { color: var(--text-accent); border-color: rgba(180, 83, 9, 0.4); background: rgba(180, 83, 9, 0.04); } .theme-light .tts-play-btn.tts-playing { color: var(--text-accent); border-color: rgba(180, 83, 9, 0.5); background: rgba(180, 83, 9, 0.06); box-shadow: 0 0 8px rgba(180, 83, 9, 0.1); } .theme-light .tts-spinner { border-color: rgba(180, 83, 9, 0.12); border-top-color: var(--text-accent); } /* --- TTS Mini Player (light) --- */ .theme-light .tts-mini-player { background: rgba(255, 255, 255, 0.95); border-color: rgba(28, 25, 23, 0.1); box-shadow: 0 4px 20px rgba(28, 25, 23, 0.08), 0 1px 3px rgba(28, 25, 23, 0.06); } .theme-light .mini-tts-progress-bar { background: rgba(180, 83, 9, 0.06); } .theme-light .mini-tts-controls button:hover { background: rgba(0, 0, 0, 0.04); } /* --- Source Links & Pills --- */ .theme-light .source-links .source-link { color: var(--text-accent); border-color: rgba(180, 83, 9, 0.15); } .theme-light .source-links .source-link:hover { border-color: rgba(180, 83, 9, 0.35); } .theme-light .topic-pill { color: var(--text-accent); border-color: rgba(180, 83, 9, 0.2); } .theme-light .topic-pill:hover { background: rgba(180, 83, 9, 0.05); border-color: rgba(180, 83, 9, 0.35); } .theme-light .source-pill { color: var(--text-secondary); border-color: rgba(28, 25, 23, 0.1); } .theme-light .source-pill:hover { color: var(--text-accent); border-color: rgba(180, 83, 9, 0.3); } /* --- Contribute Button --- */ .theme-light .contribute-btn { background: rgba(180, 83, 9, 0.04); border-color: rgba(180, 83, 9, 0.2); color: var(--text-accent); } .theme-light .contribute-btn:hover { background: rgba(180, 83, 9, 0.08); border-color: rgba(180, 83, 9, 0.35); } /* --- Step Numbers --- */ .theme-light .step-number { color: var(--text-accent); border-color: rgba(180, 83, 9, 0.3); } /* --- Code Block --- */ .theme-light .code-block-header { background: var(--bg-elevated); border-bottom-color: rgba(28, 25, 23, 0.06); } .theme-light .add-story-code-block pre { background: #1c1917; } .theme-light .add-story-code-block code { color: #e7e5e4; } .theme-light .copy-btn { border-color: rgba(180, 83, 9, 0.2); color: var(--text-accent); } .theme-light .copy-btn:hover { background: rgba(180, 83, 9, 0.06); border-color: rgba(180, 83, 9, 0.4); } /* --- Auth Modal --- */ .theme-light .auth-overlay.open { background: rgba(242, 237, 228, 0.7); } .theme-light .auth-dialog { background: #ffffff; border-color: rgba(28, 25, 23, 0.1); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12), 0 0 60px rgba(212, 120, 58, 0.06); } .theme-light .auth-dialog input[type="email"], .theme-light .auth-dialog input[type="text"] { background: #faf8f5; border-color: rgba(28, 25, 23, 0.15); color: var(--text-primary); } .theme-light .auth-dialog button[type="submit"] { color: #ffffff; } .theme-light .token-name-input { background: #faf8f5; border-color: rgba(28, 25, 23, 0.15); color: var(--text-primary); } .theme-light .token-revealed { background: #faf8f5; border-color: var(--text-accent); } .theme-light .token-copy-btn { background: #faf8f5; } .theme-light .page-login-btn { color: var(--text-secondary); } .theme-light .page-login-btn:hover { color: var(--text-accent); } .theme-light .header-login { border-color: rgba(28, 25, 23, 0.12); color: var(--text-secondary); } .theme-light .header-login:hover { color: var(--text-accent); border-color: var(--text-accent); } /* --- Auth Pages --- */ .theme-light .auth-page h1 { color: var(--text-accent); } .theme-light .auth-page input[type="email"] { background: #ffffff; border-color: rgba(28, 25, 23, 0.15); color: var(--text-primary); } .theme-light .auth-page input[type="email"]:focus { border-color: var(--text-accent); } .theme-light .auth-page button { background: var(--text-accent); color: #ffffff; } /* --- Scrollbar --- */ .theme-light::-webkit-scrollbar-track { background: var(--bg-deep); } .theme-light::-webkit-scrollbar-thumb { background: rgba(28, 25, 23, 0.12); } .theme-light::-webkit-scrollbar-thumb:hover { background: rgba(28, 25, 23, 0.25); } .theme-light .modal-container::-webkit-scrollbar-track { background: transparent; } .theme-light .modal-container::-webkit-scrollbar-thumb { background: rgba(28, 25, 23, 0.1); } /* --- Inline View --- */ .theme-light .inline-view { background: var(--bg-surface); border-bottom-color: rgba(28, 25, 23, 0.08); } /* --- Focus --- */ .theme-light :focus-visible { outline-color: var(--text-accent); } /* --- Expanded View borders --- */ .theme-light .view-expanded .summary { border-left-color: rgba(180, 83, 9, 0.25); } .theme-light .source-excerpt { border-left-color: rgba(28, 25, 23, 0.1); } /* --- Development Timeline --- */ .theme-light .development-item::before { background: hsla(var(--community-hue), 50%, 45%, 0.5); box-shadow: 0 0 4px hsla(var(--community-hue), 50%, 45%, 0.15); } .theme-light .development-item::after { background: rgba(28, 25, 23, 0.08); } /* --- Auto-detect system preference (applies .theme-light vars when OS is light and user hasn't chosen dark) --- */ @media (prefers-color-scheme: light) { :root:not(.theme-dark) { --bg-deep: #f2ede4; --bg-surface: #faf7f1; --bg-card: #ffffff; --bg-card-hover: #fdfcf9; --bg-elevated: #f0ebe1; --text-primary: #1c1917; --text-secondary: #57534e; --text-muted: #a8a29e; --text-accent: #b45309; --decay-glow: 0.15; --border-subtle: rgba(28, 25, 23, 0.06); --border-visible: rgba(28, 25, 23, 0.12); } :root:not(.theme-dark) body::before { display: none; } :root:not(.theme-dark) body::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(180, 83, 9, 0.008) 2px, rgba(180, 83, 9, 0.008) 4px ); pointer-events: none; z-index: 9999; } :root:not(.theme-dark) .view-card.card-image-forward .card-hero-wrap::after { background: linear-gradient(to bottom, transparent 20%, hsla(var(--community-hue), 30%, 15%, 0.85) 100%); } :root:not(.theme-dark) .view-card.card-image-forward .card-overlay h2 { color: #f5f0e8; } :root:not(.theme-dark) .view-card.card-image-forward .card-overlay .card-meta { color: rgba(245, 240, 232, 0.7); } }