/* ========================================================================== Theotokos.ai — shared stylesheet Palette: lapis + gold, the two pigments of a Marian icon. Dark = gold leaf on a night sky. Light = gold leaf on pale gesso. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens :root holds the DARK set, so a no-JS visitor still gets the intended look. assets/js/theme.js writes data-theme="light|dark" on before paint. -------------------------------------------------------------------------- */ :root { color-scheme: dark; --ink: #e9e6dd; --ink-soft: #c6c9d6; --muted: #8b92a6; --gold: #e0b23c; --gold-soft: #c99a3a; --gold-strong: #f2cf6d; /* hover / emphasis: brighter in dark */ --rose: #cd4979; --cyan: #4bb6c8; --cyan-soft: #7fd0dd; --cyan-strong: #8fdcea; --page-bg: radial-gradient(1200px 820px at 50% -12%, #141b32 0%, #0b1020 46%, #080b16 100%); --star-opacity: 1; --panel: rgba(255, 255, 255, 0.025); --panel-2: rgba(146, 166, 206, 0.06); --panel-3: rgba(146, 166, 206, 0.10); --border: rgba(150, 170, 210, 0.14); --border-strong: rgba(150, 170, 210, 0.24); --tag-bg: rgba(150, 110, 40, 0.16); --tag-border: rgba(224, 178, 60, 0.30); --shadow-card: 0 26px 64px rgba(0, 0, 0, 0.45); --halo-glow: radial-gradient(circle, rgba(224, 178, 60, .16) 0%, rgba(205, 73, 121, .06) 42%, transparent 68%); --focus-ring: var(--gold); } :root[data-theme="light"] { color-scheme: light; --ink: #14343c; /* deep teal-ink, warm cousin of the dark navy */ --ink-soft: #2c5158; --muted: #857d6d; /* warm grey so body copy sits on stucco, not on blue */ --gold: #b4881f; /* AA on stucco; same hue family as dark-mode gold */ --gold-soft: #d9a52c; --gold-strong: #8a6510; /* hover / emphasis: darker in light */ --rose: #a33257; --cyan: #0d6f80; /* primary action + the user's own voice */ --cyan-soft: #5aa8b3; --cyan-strong: #0a5865; --page-bg: radial-gradient(1200px 820px at 50% -12%, #fdfaf3 0%, #f3ecdf 46%, #e9e2d6 100%); --star-opacity: 0; --panel: rgba(255, 253, 248, 0.72); --panel-2: rgba(255, 253, 248, 0.92); --panel-3: rgba(13, 111, 128, 0.10); /* user bubble: cyan wash */ --border: rgba(93, 78, 48, 0.16); --border-strong: rgba(93, 78, 48, 0.28); --tag-bg: rgba(217, 165, 44, 0.18); --tag-border: rgba(180, 136, 31, 0.38); --shadow-card: 0 18px 44px rgba(40, 60, 66, 0.10); --halo-glow: radial-gradient(circle, rgba(217, 165, 44, .34) 0%, rgba(13, 111, 128, .10) 42%, transparent 68%); --focus-ring: var(--cyan); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: Georgia, 'Times New Roman', serif; background: var(--page-bg); background-attachment: fixed; min-height: 100vh; color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color .4s ease, color .4s ease; } /* Ambient starfield — faded out entirely in light mode via --star-opacity */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--star-opacity); transition: opacity .4s ease; background-image: radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.55), transparent), radial-gradient(1.2px 1.2px at 78% 12%, rgba(255,255,255,.40), transparent), radial-gradient(1px 1px at 32% 42%, rgba(255,255,255,.30), transparent), radial-gradient(1.3px 1.3px at 88% 55%, rgba(224,178,60,.40), transparent), radial-gradient(1px 1px at 22% 72%, rgba(255,255,255,.28), transparent), radial-gradient(1.1px 1.1px at 62% 84%, rgba(255,255,255,.32), transparent), radial-gradient(1px 1px at 48% 8%, rgba(255,255,255,.24), transparent), radial-gradient(1.2px 1.2px at 92% 30%, rgba(205,73,121,.30), transparent), radial-gradient(1px 1px at 6% 52%, rgba(255,255,255,.22), transparent), radial-gradient(1.1px 1.1px at 70% 66%, rgba(255,255,255,.26), transparent), radial-gradient(1px 1px at 40% 92%, rgba(255,255,255,.20), transparent), radial-gradient(1.2px 1.2px at 84% 78%, rgba(255,255,255,.26), transparent); } .container { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 0 22px 24px; } .container--narrow { max-width: 820px; } button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } /* -------------------------------------------------------------------------- 3. Top bar -------------------------------------------------------------------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 26px 2px 30px; } .brand { display: flex; align-items: center; gap: 14px; } .brand-mark { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--halo-glow); } .brand-mark img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; } .brand-name { font-size: 1.55rem; color: var(--gold); letter-spacing: .3px; line-height: 1.1; } .brand-sub { display: block; font-size: .82rem; color: var(--muted); font-style: italic; margin-top: 1px; } .topbar-actions { display: flex; align-items: center; gap: 10px; } .ghost-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--ink-soft); font-family: inherit; font-size: .98rem; text-decoration: none; cursor: pointer; transition: border-color .25s ease, color .25s ease, transform .25s ease; } .ghost-btn:hover { border-color: var(--gold); color: var(--gold-strong); transform: translateY(-1px); } .ghost-btn i { color: var(--muted); font-size: .9rem; } .ghost-btn:hover i { color: var(--gold); } /* Theme toggle — icon only, same pill language as the other controls */ .theme-toggle { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; } .theme-toggle i { font-size: 1rem; } /* Icon swap is driven purely by the data-theme attribute */ .theme-toggle .icon-light { display: none; } .theme-toggle .icon-dark { display: inline-block; } :root[data-theme="light"] .theme-toggle .icon-light { display: inline-block; } :root[data-theme="light"] .theme-toggle .icon-dark { display: none; } /* -------------------------------------------------------------------------- 4. Signed-in user chip -------------------------------------------------------------------------- */ .user-info { display: none; align-items: center; gap: 12px; } .user-info.show { display: flex; } .user-details { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); } .user-avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--tag-border); object-fit: cover; } .user-name { color: var(--ink-soft); font-size: .95rem; } .sign-out-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--muted); font-family: inherit; font-size: .92rem; cursor: pointer; transition: border-color .25s ease, color .25s ease; } .sign-out-btn:hover { border-color: var(--rose); color: var(--rose); } /* -------------------------------------------------------------------------- 5. Auth panel -------------------------------------------------------------------------- */ .auth-container { display: none; text-align: center; background: var(--panel); border: 1px solid var(--border); border-radius: 24px; padding: 46px 38px; margin-bottom: 30px; box-shadow: var(--shadow-card); } .auth-container.show { display: block; } .auth-welcome { font-size: 1.6rem; color: var(--gold); margin-bottom: 10px; } .auth-description { color: var(--ink-soft); font-style: italic; margin-bottom: 28px; } #clerk-signin { display: flex; justify-content: center; } .sign-in-link { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--tag-border); padding-bottom: 1px; transition: color .25s ease, border-color .25s ease; } .sign-in-link:hover { color: var(--gold-strong); border-color: var(--gold); } /* -------------------------------------------------------------------------- 6. Hero -------------------------------------------------------------------------- */ .main-app { display: none; } .main-app.show { display: block; } .hero { text-align: center; padding: 26px 0 42px; } .hero.collapsed { display: none; } .halo { width: 300px; height: 300px; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center; background: var(--halo-glow); animation: breathe 7s ease-in-out infinite; } .halo img { width: 268px; height: 268px; border-radius: 50%; object-fit: contain; } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } .hero h1 { font-size: 4rem; font-weight: normal; letter-spacing: 1px; background: linear-gradient(180deg, var(--gold-strong) 0%, var(--gold) 55%, var(--gold-soft) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero .subtitle { margin-top: 10px; font-size: 1.5rem; font-style: italic; color: var(--ink-soft); } .auth-status { margin-top: 18px; font-size: .95rem; color: var(--muted); } /* Compact variant used on the legal pages */ .hero--compact { padding: 6px 0 34px; } .hero--compact .halo { width: 148px; height: 148px; margin-bottom: 20px; animation: none; } .hero--compact .halo img { width: 116px; height: 116px; object-fit: cover; } .hero--compact h1 { font-size: 2.9rem; } .hero--compact .subtitle { font-size: 1.25rem; margin-top: 8px; } /* -------------------------------------------------------------------------- 7. Wisdom sources -------------------------------------------------------------------------- */ .wisdom-sources { max-width: 620px; margin: 38px auto 0; padding: 20px 26px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); text-align: left; } .wisdom-sources h2 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: normal; color: var(--gold); margin-bottom: 14px; } .source-list { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; } .source { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .95rem; } .swatch { width: 42px; height: 9px; border-radius: 999px; display: inline-block; } .swatch.christian { background: linear-gradient(90deg, #b4862c, #8a6520); } .swatch.buddhist { background: linear-gradient(90deg, #e0b23c, #c08f28); } .swatch.stoic { background: linear-gradient(90deg, #7d879f, #5d6780); } .swatch.taoist { background: linear-gradient(90deg, #4fb08a, #328a68); } /* -------------------------------------------------------------------------- 8. Chat -------------------------------------------------------------------------- */ .messages { padding: 6px 0 4px; } .message { margin-bottom: 22px; display: flex; animation: fadeIn .5s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .bot-message { justify-content: flex-start; } .user-message { justify-content: flex-end; } .message-bubble { max-width: 76%; padding: 22px 26px; border-radius: 16px; border: 1px solid var(--border); font-size: 1.12rem; } .bot-message .message-bubble { background: var(--panel-2); color: var(--ink); } .user-message .message-bubble { background: var(--panel-3); color: var(--ink); text-align: right; } .wisdom-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--tag-bg); border: 1px solid var(--tag-border); color: var(--gold); padding: 5px 14px; border-radius: 999px; font-size: .82rem; margin-bottom: 14px; } .wisdom-tag::before { content: "\2726"; color: var(--gold-soft); } .stamp { display: block; margin-top: 14px; font-size: .82rem; color: var(--muted); } .message-bubble.error-message { border-color: var(--rose); background: color-mix(in srgb, var(--rose) 8%, transparent); } .typing-indicator { display: none; align-items: center; gap: 12px; padding: 6px 4px 18px; color: var(--muted); font-style: italic; } .typing-dots { animation: typing 1.6s infinite; } @keyframes typing { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } } /* -------------------------------------------------------------------------- 9. Input -------------------------------------------------------------------------- */ .input-area { padding: 12px 0 6px; } .input-container { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 8px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); transition: border-color .25s ease, box-shadow .25s ease; } .input-container:focus-within { border-color: var(--tag-border); box-shadow: 0 0 26px rgba(224, 178, 60, 0.10); } #userInput { flex: 1; padding: 16px 18px; border: none; outline: none; background: transparent; color: var(--ink); font-family: inherit; font-size: 1.15rem; } #userInput::placeholder { color: var(--muted); } #sendButton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 128px; padding: 16px 26px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel-2); color: var(--ink-soft); font-family: inherit; font-size: 1.05rem; cursor: pointer; transition: border-color .25s ease, color .25s ease, background .25s ease; } #sendButton:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-strong); background: var(--tag-bg); } #sendButton:disabled { opacity: .55; cursor: not-allowed; } .loading { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--tag-border); border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 10. Prompt chips -------------------------------------------------------------------------- */ .examples { padding: 20px 2px 6px; } .examples h3 { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: normal; font-style: italic; color: var(--muted); margin-bottom: 14px; } .examples h3 i { color: var(--gold-soft); } .example-buttons { display: flex; flex-wrap: wrap; gap: 10px; } .example-button { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--ink-soft); font-family: inherit; font-size: .92rem; cursor: pointer; transition: border-color .25s ease, color .25s ease, transform .25s ease; } .example-button:hover { border-color: var(--gold); color: var(--gold-strong); transform: translateY(-2px); } /* -------------------------------------------------------------------------- 11. Legal pages — content card -------------------------------------------------------------------------- */ .content { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 22px; padding: 46px 44px; box-shadow: var(--shadow-card); overflow: hidden; } .content::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .tag { display: inline-flex; align-items: center; gap: 8px; background: var(--tag-bg); border: 1px solid var(--tag-border); color: var(--gold); padding: 7px 16px; border-radius: 999px; font-size: .82rem; letter-spacing: .4px; margin-bottom: 18px; } .tag::before { content: "\2726"; color: var(--gold-soft); } .last-updated { color: var(--muted); font-style: italic; text-align: center; font-size: .95rem; margin-bottom: 34px; } .content h2 { color: var(--gold); font-size: 1.45rem; font-weight: normal; margin: 34px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--tag-border); } .content h3 { color: var(--gold-soft); font-size: 1.15rem; font-weight: normal; margin: 24px 0 10px; } .content p { color: var(--ink-soft); margin-bottom: 15px; } .content ul, .content ol { margin: 14px 0 16px 26px; color: var(--ink-soft); } .content li { margin-bottom: 9px; line-height: 1.6; } .content li::marker { color: var(--gold-soft); } .content strong { color: var(--gold); font-weight: normal; } .back-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; padding: 15px 28px; border-radius: 999px; border: 1px solid var(--tag-border); background: var(--tag-bg); color: var(--gold); text-decoration: none; font-size: 1rem; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .back-link:hover { border-color: var(--gold); color: var(--gold-strong); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(224, 178, 60, 0.14); } /* -------------------------------------------------------------------------- 12. Footer -------------------------------------------------------------------------- */ .footer { text-align: center; color: var(--muted); font-style: italic; font-size: .9rem; padding: 26px 10px 36px; } .footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border); } .footer a:hover { color: var(--gold); border-color: var(--tag-border); } .footer .sep { padding: 0 10px; opacity: .5; } /* -------------------------------------------------------------------------- 13. Motion & responsive -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } @media (max-width: 640px) { .container { padding: 0 16px 16px; } .topbar { padding: 18px 0 22px; } .brand-name { font-size: 1.25rem; } .brand-sub { font-size: .74rem; } .ghost-btn { padding: 10px 16px; font-size: .9rem; } .theme-toggle { width: 42px; height: 42px; padding: 0; } .hero { padding: 10px 0 30px; } .halo { width: 200px; height: 200px; } .halo img { width: 180px; height: 180px; } .hero h1 { font-size: 2.5rem; } .hero .subtitle { font-size: 1.1rem; } .hero--compact .halo { width: 124px; height: 124px; } .hero--compact .halo img { width: 98px; height: 98px; } .hero--compact h1 { font-size: 2.2rem; } .wisdom-sources { padding: 16px 18px; } .source-list { gap: 10px 16px; } .message-bubble { max-width: 92%; font-size: 1.02rem; padding: 18px 20px; } .input-container { flex-direction: column; align-items: stretch; gap: 10px; } #sendButton { width: 100%; } .user-info.show { flex-direction: column; align-items: flex-end; gap: 8px; } .auth-container { padding: 30px 20px; } .content { padding: 30px 22px; } .content h2 { font-size: 1.25rem; } .back-link { width: 100%; justify-content: center; } } /* -------------------------------------------------------------------------- LIGHT MODE — cyan / gold / stucco refinements Cyan carries actions and the user's voice; gold stays reserved for the brand, the wisdom tag and divine moments, mirroring the dark mode. -------------------------------------------------------------------------- */ :root[data-theme="light"] .user-message .message-bubble { border-color: rgba(13, 111, 128, 0.22); color: var(--ink); } :root[data-theme="light"] .bot-message .message-bubble { border-left: 3px solid var(--gold-soft); } :root[data-theme="light"] .message-bubble.error-message { border-color: var(--gold-soft); background: color-mix(in srgb, var(--gold-soft) 14%, transparent); color: var(--gold-strong); } :root[data-theme="light"] #sendButton { background: var(--cyan); border-color: var(--cyan); color: #fbf7ef; } :root[data-theme="light"] #sendButton:hover:not(:disabled) { background: var(--cyan-strong); border-color: var(--cyan-strong); color: #fbf7ef; } :root[data-theme="light"] .input-container:focus-within { border-color: var(--cyan-soft); box-shadow: 0 0 26px rgba(13, 111, 128, 0.14); } :root[data-theme="light"] .example-button { background: rgba(13, 111, 128, 0.05); border-color: rgba(13, 111, 128, 0.18); } :root[data-theme="light"] .example-button:hover { border-color: var(--cyan); color: var(--cyan-strong); background: rgba(13, 111, 128, 0.10); } :root[data-theme="light"] .ghost-btn:hover, :root[data-theme="light"] .sign-in-link:hover { border-color: var(--cyan); color: var(--cyan-strong); } :root[data-theme="light"] .ghost-btn:hover i, :root[data-theme="light"] .theme-toggle i { color: var(--cyan); } :root[data-theme="light"] .sign-in-link { color: var(--cyan); } :root[data-theme="light"] .swatch.christian { background: linear-gradient(90deg, #d9a52c, #b4881f); } :root[data-theme="light"] .swatch.buddhist { background: linear-gradient(90deg, #e8c05f, #d9a52c); } :root[data-theme="light"] .swatch.stoic { background: linear-gradient(90deg, #2c8496, #0d6f80); } :root[data-theme="light"] .swatch.taoist { background: linear-gradient(90deg, #7fc9c2, #4aa89f); }