/* NeedGod.com — design system. Four themes, swapped by [data-theme] on (set before paint in index.html to avoid a flash). "auto" follows the device. Every colour is a token; components never hard-code one. RTL-safe (logical properties throughout). */ /* ---------- Dawn (default): warm cream, morning light ---------- */ :root, [data-theme='dawn'] { --canvas: #FDFAF5; --canvas-shade: #F7F1E8; --surface: #FFFFFF; --surface-soft: #FFFDFA; --navy: #1B2C45; --ink: #262320; --ink-muted: #6B675F; --ink-quiet: #97918A; --border: #E4DBCE; --divider: #EFE8DD; --accent: #2F6CC3; --accent-hover: #275CA9; --accent-ink: #1B3E70; --accent-bg: #F0F4FB; --on-accent: #FFFFFF; --warm-bg: #FCF3E6; --warm-ink: #6B4416; --glow-a: rgba(240, 190, 130, 0.32); --glow-b: rgba(150, 185, 235, 0.26); --shadow-sm: 0 1px 2px rgba(60, 45, 25, 0.05); --shadow-card: 0 8px 24px rgba(70, 55, 35, 0.06), 0 1px 2px rgba(70, 55, 35, 0.04); --shadow-btn: 0 6px 16px rgba(47, 108, 195, 0.22); --shadow-floating: 0 -8px 40px rgba(50, 40, 25, 0.16); } /* ---------- Calm: cool paper, quiet blue ---------- */ [data-theme='calm'] { --canvas: #F7F9FC; --canvas-shade: #EFF3F9; --surface: #FFFFFF; --surface-soft: #FCFDFF; --navy: #17273D; --ink: #1F2733; --ink-muted: #5F6875; --ink-quiet: #8C94A1; --border: #DCE3EC; --divider: #E9EEF5; --accent: #3566B8; --accent-hover: #2B559C; --accent-ink: #1C3B6E; --accent-bg: #EDF2FB; --on-accent: #FFFFFF; --warm-bg: #F1F4F9; --warm-ink: #3C4757; --glow-a: rgba(150, 180, 230, 0.30); --glow-b: rgba(180, 165, 220, 0.22); --shadow-sm: 0 1px 2px rgba(30, 45, 70, 0.05); --shadow-card: 0 8px 24px rgba(30, 45, 70, 0.06), 0 1px 2px rgba(30, 45, 70, 0.04); --shadow-btn: 0 6px 16px rgba(53, 102, 184, 0.22); --shadow-floating: 0 -8px 40px rgba(25, 40, 65, 0.18); } /* ---------- Night: deep navy ---------- */ [data-theme='night'] { --canvas: #10151D; --canvas-shade: #0C1119; --surface: #19212C; --surface-soft: #1D2632; --navy: #E9EEF6; --ink: #E6E3DE; --ink-muted: #A3A69E; --ink-quiet: #7C8089; --border: #2E3846; --divider: #242D39; --accent: #6FA3E8; --accent-hover: #86B4EF; --accent-ink: #C9DDF8; --accent-bg: #1B2635; --on-accent: #0E1620; --warm-bg: #2A2216; --warm-ink: #E5C79C; --glow-a: rgba(60, 110, 190, 0.26); --glow-b: rgba(120, 85, 170, 0.20); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.34); --shadow-btn: 0 6px 16px rgba(0, 0, 0, 0.4); --shadow-floating: 0 -8px 40px rgba(0, 0, 0, 0.55); } /* Auto follows the device; the dark half reuses Night's palette. */ @media (prefers-color-scheme: dark) { [data-theme='auto'] { --canvas: #10151D; --canvas-shade: #0C1119; --surface: #19212C; --surface-soft: #1D2632; --navy: #E9EEF6; --ink: #E6E3DE; --ink-muted: #A3A69E; --ink-quiet: #7C8089; --border: #2E3846; --divider: #242D39; --accent: #6FA3E8; --accent-hover: #86B4EF; --accent-ink: #C9DDF8; --accent-bg: #1B2635; --on-accent: #0E1620; --warm-bg: #2A2216; --warm-ink: #E5C79C; --glow-a: rgba(60, 110, 190, 0.26); --glow-b: rgba(120, 85, 170, 0.20); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.34); --shadow-btn: 0 6px 16px rgba(0, 0, 0, 0.4); --shadow-floating: 0 -8px 40px rgba(0, 0, 0, 0.55); } } :root { --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; --font-editorial: Georgia, "Iowan Old Style", "Times New Roman", serif; --radius-card: 20px; --radius-btn: 14px; --measure: 34rem; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-ui); background: var(--canvas); color: var(--ink); line-height: 1.6; min-height: 100svh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } /* Two soft light sources, fixed behind everything. Subtle by design — they should read as light in the room, not as decoration. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90ch 60ch at 12% -8%, var(--glow-a), transparent 60%), radial-gradient(80ch 55ch at 92% 4%, var(--glow-b), transparent 62%); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); /* Transparent over the page's light, so no seam across the gradient; the frosted panel only appears once content scrolls under it. */ background: transparent; border-block-end: 1px solid transparent; transition: background 0.2s, border-color 0.2s, backdrop-filter 0.2s; } .site-header.scrolled { background: color-mix(in srgb, var(--canvas) 78%, transparent); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); border-block-end-color: color-mix(in srgb, var(--border) 60%, transparent); } .wordmark { font-weight: 800; font-size: 1.1rem; color: var(--navy); text-decoration: none; letter-spacing: -0.025em; } .wordmark-dot { color: var(--ink-quiet); font-weight: 600; } .header-actions { display: flex; gap: 6px; } .icon-btn { border: 1px solid transparent; background: transparent; color: var(--ink-muted); border-radius: 11px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .icon-btn svg { width: 19px; height: 19px; } .icon-btn:hover { background: var(--surface); border-color: var(--border); color: var(--navy); } .icon-btn:active { transform: scale(0.94); } main { flex: 1; width: 100%; max-width: var(--measure); margin-inline: auto; padding: 20px 20px 48px; display: flex; flex-direction: column; } h1, h2, h3 { color: var(--navy); line-height: 1.25; letter-spacing: -0.02em; } a { color: var(--accent); } ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* ---------- Buttons ---------- */ .btn { display: block; width: 100%; border: 1px solid transparent; border-radius: var(--radius-btn); background: var(--navy); color: var(--canvas); font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.35; padding: 15px 20px; cursor: pointer; text-align: center; text-decoration: none; margin-block-start: 10px; transition: transform 0.12s, box-shadow 0.18s, background 0.18s, border-color 0.18s; } .btn:active { transform: translateY(1px) scale(0.995); } .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff) 0%, var(--accent) 100%); color: var(--on-accent); box-shadow: var(--shadow-btn); font-weight: 700; } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--surface); color: var(--navy); border-color: var(--border); box-shadow: var(--shadow-sm); font-weight: 600; } .btn-secondary:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--surface-soft); box-shadow: var(--shadow-card); } .btn-huge { font-size: 1.12rem; padding: 19px 20px; border-radius: 16px; } .btn-quiet { background: none; border: none; color: var(--ink-muted); font-weight: 600; box-shadow: none; } .card { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 22px; } /* ---------- Home ---------- */ .home { justify-content: center; text-align: center; min-height: 58svh; display: flex; flex-direction: column; padding-block: 24px; } .home .tagline { font-size: 1.8rem; font-weight: 750; margin: 0 0 30px; text-wrap: balance; } .home .secondary-nav { margin-block-start: 20px; display: flex; flex-direction: column; gap: 2px; } .site-footer { margin-block-start: auto; padding-block-start: 44px; text-align: center; font-size: 0.85rem; color: var(--ink-quiet); } .site-footer a { color: var(--ink-muted); text-decoration: none; margin-inline: 8px; } .site-footer a:hover { color: var(--accent); } .footer-lang { background: none; border: none; font: inherit; font-weight: 650; color: var(--ink-muted); cursor: pointer; padding: 4px 8px; } .footer-lang:hover { color: var(--accent); } .footer-lang::after { content: " ⌄"; color: var(--ink-quiet); } /* ---------- Test ---------- */ .back-link { background: none; border: none; padding: 4px 0; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink-quiet); cursor: pointer; align-self: flex-start; transition: color 0.15s; } .back-link:hover { color: var(--accent); } .progress { display: flex; gap: 5px; margin-block: 10px 22px; } .progress span { flex: 1; height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--ink-quiet) 24%, transparent); transition: background 0.3s; } .progress span.done { background: var(--accent); } .progress span.active { background: color-mix(in srgb, var(--accent) 55%, transparent); } .screen { animation: rise 0.28s cubic-bezier(0.2, 0.7, 0.3, 1); } @keyframes rise { from { opacity: 0; transform: translateY(8px); } } .screen h1 { font-size: 1.4rem; margin: 4px 0 16px; text-wrap: balance; } .screen p { margin: 0 0 15px; font-size: 1.03rem; } .screen .options { margin-block-start: 24px; } .verse-card { background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 14px; padding: 14px 18px; margin-block: 16px; font-family: var(--font-editorial); color: var(--accent-ink); } .scripture-link { background: none; border: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); cursor: pointer; } .scripture-link:hover { text-decoration-style: solid; } /* Discipleship steps on the closing screen */ .growth { margin-block-start: 30px; } .growth h2 { font-size: 1.25rem; margin: 0 0 4px; padding-block-start: 26px; border-block-start: 1px solid var(--divider); } .growth-intro { color: var(--ink-muted); margin: 0 0 20px; } .growth-steps { list-style: none; counter-reset: step; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .growth-steps li { counter-increment: step; position: relative; background: var(--surface); border: 1px solid var(--divider); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 16px 18px 16px 58px; } .growth-steps li::before { content: counter(step); position: absolute; inset-inline-start: 16px; inset-block-start: 16px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-bg); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); font-size: 0.85rem; font-weight: 800; } .growth-steps h3 { font-size: 1.02rem; margin: 0 0 6px; } .growth-steps p { margin: 0; font-size: 0.97rem; color: var(--ink); } .growth-source { text-align: center; margin: 18px 0 0; font-size: 0.9rem; } .growth-source a { text-decoration: none; font-weight: 650; } .growth-source a:hover { text-decoration: underline; } /* RTL: the number sits on the other side. */ [dir='rtl'] .growth-steps li { padding: 16px 58px 16px 18px; } /* ---------- Sheets & overlays ---------- */ .popup-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(12, 16, 24, 0.42); backdrop-filter: blur(2px); display: flex; align-items: flex-end; justify-content: center; animation: fadein 0.16s ease; } @keyframes fadein { from { opacity: 0; } } .sheet { background: var(--surface); color: var(--ink); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-floating); border: 1px solid var(--divider); border-block-end: none; width: 100%; max-width: var(--measure); max-height: 82svh; overflow-y: auto; padding: 22px 22px calc(22px + env(safe-area-inset-bottom)); animation: slideup 0.22s cubic-bezier(0.2, 0.7, 0.3, 1); } @keyframes slideup { from { transform: translateY(36px); opacity: 0.4; } } .sheet h2 { margin: 0 0 12px; font-size: 1.08rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .badge { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; background: var(--accent-bg); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); padding: 2px 8px; border-radius: 999px; } .verse-text { font-family: var(--font-editorial); font-size: 1.06rem; line-height: 1.65; } .verse-text.large { font-size: 1.5rem; line-height: 1.5; } .sheet-actions { display: flex; gap: 8px; margin-block-start: 16px; flex-wrap: wrap; } .sheet-actions .btn { margin: 0; padding: 11px 14px; font-size: 0.92rem; flex: 1; min-width: 84px; } /* Language & theme lists */ .lang-list { list-style: none; margin: 0; padding: 0; } .lang-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 4px; border-block-end: 1px solid var(--divider); font-weight: 600; } .lang-list li:last-child { border-block-end: none; } .lang-list li.current { color: var(--accent); } .lang-list li.soon { color: var(--ink-quiet); font-weight: 500; } .lang-soon-badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; background: var(--canvas-shade); color: var(--ink-quiet); border: 1px solid var(--divider); padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .theme-option { display: flex; align-items: center; gap: 14px; width: 100%; font: inherit; font-weight: 650; text-align: start; cursor: pointer; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-block-end: 8px; transition: border-color 0.15s, box-shadow 0.15s; } .theme-option:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .theme-option.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .theme-swatch { width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto; border: 1px solid rgba(0, 0, 0, 0.10); box-shadow: var(--shadow-sm); } .theme-option small { display: block; font-weight: 500; color: var(--ink-quiet); font-size: 0.82rem; } /* QR overlay */ .qr-overlay { position: fixed; inset: 0; z-index: 70; background: #fff; color: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; } .qr-overlay svg { width: min(78vw, 60vh); height: auto; } .qr-url { font-size: 0.9rem; word-break: break-all; color: #333; max-width: 80vw; } .qr-overlay .btn { max-width: 320px; } /* ---------- Lists & sections ---------- */ .section-title { font-size: 1.55rem; margin: 6px 0 6px; text-wrap: balance; } .section-sub { color: var(--ink-muted); margin: 0 0 20px; } .item-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .item-list a { display: block; background: var(--surface); border: 1px solid var(--divider); border-radius: 14px; padding: 14px 16px; color: var(--ink); text-decoration: none; font-weight: 600; box-shadow: var(--shadow-sm); transition: border-color 0.15s, transform 0.12s, box-shadow 0.18s; } .item-list a:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-card); } .group-heading { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-quiet); font-weight: 700; margin: 24px 0 10px; } .search-box { width: 100%; font: inherit; padding: 13px 16px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); margin-block-end: 6px; box-shadow: var(--shadow-sm); } .search-box::placeholder { color: var(--ink-quiet); } .tabs { display: flex; gap: 8px; margin-block: 14px; } .tabs button { flex: 1; font: inherit; font-weight: 650; padding: 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted); cursor: pointer; transition: background 0.15s, color 0.15s; } .tabs button.active { background: var(--navy); color: var(--canvas); border-color: var(--navy); } .answer-body p { margin: 0 0 13px; } .answer-body h2 { font-size: 1rem; margin: 26px 0 10px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.07em; } .answer-body ul { padding-inline-start: 20px; margin: 0 0 14px; } .answer-body li { margin-block-end: 9px; } .cta-box { background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: var(--radius-card); padding: 20px; margin-block-start: 30px; text-align: center; } .cta-box p { margin: 0 0 4px; color: var(--accent-ink); } /* ---------- Watch ---------- */ .video-facade { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; cursor: pointer; border: none; padding: 0; width: 100%; box-shadow: var(--shadow-card); } .video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.88; transition: opacity 0.2s, transform 0.3s; } .video-facade:hover img { opacity: 1; transform: scale(1.02); } .video-facade .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .video-facade .play span { width: 66px; height: 46px; background: rgba(15, 15, 20, 0.78); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; backdrop-filter: blur(4px); } .video-embed { border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--shadow-card); } .video-embed iframe { width: 100%; height: 100%; border: 0; } .film-meta { color: var(--ink-quiet); font-size: 0.85rem; } .film-note { color: var(--ink-quiet); font-size: 0.82rem; margin: 10px 0 18px; } .film-note a { color: var(--ink-muted); } /* ---------- Bible ---------- */ .bible-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block: 14px; } .bible-nav .btn { width: auto; flex: 0 0 auto; margin: 0; padding: 9px 15px; font-size: 0.88rem; } .bible-text p { font-family: var(--font-editorial); font-size: 1.08rem; line-height: 1.7; margin: 0 0 11px; } .vnum { color: var(--ink-quiet); font-size: 0.68em; vertical-align: super; margin-inline-end: 4px; font-family: var(--font-ui); font-weight: 600; } .book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; } .book-grid a, .chapter-grid a { background: var(--surface); border: 1px solid var(--divider); border-radius: 12px; padding: 11px; text-align: center; text-decoration: none; color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); transition: border-color 0.15s; } .book-grid a:hover, .chapter-grid a:hover { border-color: var(--accent); color: var(--accent); } /* ---------- Prose ---------- */ .prose p { margin: 0 0 14px; } .prose-heading { font-size: 1.05rem; margin: 28px 0 8px; } .notice { background: var(--warm-bg); color: var(--warm-ink); border: 1px solid color-mix(in srgb, var(--warm-ink) 16%, transparent); border-radius: 13px; padding: 12px 16px; font-size: 0.92rem; } @media (min-width: 700px) { .home .tagline { font-size: 2.3rem; } .screen h1 { font-size: 1.65rem; } main { padding-block-start: 28px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }