/* ============================================================================ FlickerFaith — canonical site design system One stylesheet for every page. Tuned for legibility (high-contrast text, comfortable measure and rhythm) and a refined, editorial feel. Contract: this file defines every CSS class used in any page . ========================================================================== */ /* ---- Tokens -------------------------------------------------------------- */ :root { --primary:#7C3AED; --primary-light:#9F7AEA; --primary-dark:#6D28D9; --gold:#B87B1E; --gold-light:#8A5E12; /* legible gold ink on light */ /* Light theme (default / bare :root) */ --bg:#FBFAFE; --surface:#FFFFFF; --surface2:#F4F0FC; --surface3:#EDE7FA; --text:#1B1526; --text-sec:#453B60; --text-mut:#655C7E; --divider:#E7E0F3; --line-gold:rgba(184,123,30,.28); --glass-fill:rgba(124,58,237,.05); --glass-border:rgba(124,58,237,.13); --card-shadow:rgba(60,40,110,.09); --hero-grad:radial-gradient(1000px 560px at 50% -6%, rgba(159,103,245,.13), transparent 60%), var(--bg); --serif:'Playfair Display', Georgia, serif; --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } /* Dark via OS default (no explicit choice) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gold:#EBC275; --gold-light:#F2D79C; --bg:#0B0716; --surface:#151029; --surface2:#1E1740; --surface3:#271D4C; --text:#F4F1FB; --text-sec:#D2CBEB; --text-mut:#A79FC4; --divider:rgba(255,255,255,.09); --line-gold:rgba(235,194,117,.30); --glass-fill:rgba(155,109,255,.09); --glass-border:rgba(155,109,255,.18); --card-shadow:rgba(0,0,0,.38); --hero-grad:radial-gradient(1000px 580px at 50% -6%, rgba(159,103,245,.20), transparent 60%), radial-gradient(760px 460px at 86% 8%, rgba(235,194,117,.10), transparent 55%), #0B0716; } } /* Dark via explicit toggle */ [data-theme="dark"] { --gold:#EBC275; --gold-light:#F2D79C; --bg:#0B0716; --surface:#151029; --surface2:#1E1740; --surface3:#271D4C; --text:#F4F1FB; --text-sec:#D2CBEB; --text-mut:#A79FC4; --divider:rgba(255,255,255,.09); --line-gold:rgba(235,194,117,.30); --glass-fill:rgba(155,109,255,.09); --glass-border:rgba(155,109,255,.18); --card-shadow:rgba(0,0,0,.38); --hero-grad:radial-gradient(1000px 580px at 50% -6%, rgba(159,103,245,.20), transparent 60%), radial-gradient(760px 460px at 86% 8%, rgba(235,194,117,.10), transparent 55%), #0B0716; } /* ---- Base ---------------------------------------------------------------- */ * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-family:var(--sans); background:var(--bg); color:var(--text); line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .3s, color .3s; } a { text-decoration:none; color:inherit; } img { max-width:100%; } ::selection { background:rgba(235,194,117,.28); } :focus-visible { outline:2px solid var(--primary-light); outline-offset:2px; border-radius:4px; } /* ---- Header -------------------------------------------------------------- */ header { padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; background:color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--divider); position:sticky; top:0; z-index:100; } body.has-app-banner header { top:68px; } .logo { display:flex; align-items:center; gap:.75rem; } .logo img { height:36px; border-radius:9px; } .logo-text { font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--text); letter-spacing:.01em; } nav { display:flex; align-items:center; gap:1.5rem; } nav a { font-size:.9rem; font-weight:500; color:var(--text-mut); transition:color .2s; } nav a:hover, nav a.active { color:var(--gold); } .header-actions { display:flex; align-items:center; gap:.75rem; } .theme-toggle { width:40px; height:40px; border-radius:12px; border:1px solid var(--glass-border); background:var(--glass-fill); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--gold); transition:all .2s; } .theme-toggle:hover { background:var(--surface2); } /* ---- Buttons ------------------------------------------------------------- */ .btn { padding:.68rem 1.35rem; border-radius:12px; font-weight:600; font-size:.92rem; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:.5rem; border:none; white-space:nowrap; } .btn-outline { border:1.5px solid var(--glass-border); color:var(--text); background:transparent; } .btn-outline:hover { background:var(--glass-fill); border-color:var(--primary); } .btn-primary { background:var(--primary); color:#fff; } .btn-primary:hover { background:var(--primary-dark); } .btn-gold { background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:#221803; font-weight:700; box-shadow:0 8px 26px rgba(184,123,30,.24); } [data-theme="dark"] .btn-gold, :root:not([data-theme="light"]) .btn-gold { box-shadow:0 8px 26px rgba(235,194,117,.26); } .btn-gold:hover { transform:translateY(-1px); box-shadow:0 12px 30px rgba(235,194,117,.40); } .btn-lg { padding:.85rem 1.7rem; font-size:1rem; } /* ---- Hero ---------------------------------------------------------------- */ .hero { padding:5.5rem 2rem 4rem; display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--hero-grad); position:relative; } .badge-first { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border:1px solid var(--glass-border); background:var(--glass-fill); padding:.42rem .9rem; border-radius:100px; margin-bottom:1.5rem; } .hero h1 { font-family:var(--serif); font-size:clamp(2.3rem,6vw,3.6rem); font-weight:700; margin-bottom:1.25rem; max-width:920px; line-height:1.12; letter-spacing:-.01em; text-wrap:balance; } .highlight { background:linear-gradient(100deg,var(--gold-light),var(--primary-light)); -webkit-background-clip:text; background-clip:text; color:transparent; } [data-theme="dark"] .highlight, :root:not([data-theme="light"]) .highlight { background:linear-gradient(100deg,var(--gold),var(--primary-light)); -webkit-background-clip:text; background-clip:text; } .hero p.sub { font-size:clamp(1.05rem,2.4vw,1.22rem); margin-bottom:2rem; max-width:680px; color:var(--text-sec); line-height:1.7; } .hero-cta { display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; align-items:center; } .store-badges { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:1.4rem; } .store-badges img { height:46px; } .hero-image { margin:3rem 0 0; width:100%; max-width:760px; border-radius:20px; overflow:hidden; border:1px solid var(--glass-border); box-shadow:0 30px 60px var(--card-shadow); position:relative; z-index:1; } .hero-image img { width:100%; height:auto; display:block; } /* ---- Sections ------------------------------------------------------------ */ .section { padding:5rem 2rem; } .section-alt { background:var(--surface); } .kicker { text-align:center; font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.9rem; } .section-title { font-family:var(--serif); text-align:center; font-size:clamp(1.8rem,4vw,2.4rem); font-weight:600; margin-bottom:.75rem; line-height:1.18; text-wrap:balance; } .section-subtitle { text-align:center; font-size:1.05rem; margin:0 auto 3rem; max-width:680px; color:var(--text-mut); line-height:1.7; } /* Page hero (interior pages) */ .page-hero { padding:4.5rem 2rem 1.5rem; text-align:center; background:var(--hero-grad); } .page-hero h1 { font-family:var(--serif); font-size:clamp(2rem,5vw,2.9rem); font-weight:700; margin-bottom:.85rem; line-height:1.15; text-wrap:balance; } .page-hero p { font-size:1.08rem; color:var(--text-sec); max-width:660px; margin:0 auto; line-height:1.7; } .content { max-width:960px; margin:0 auto; padding:2.5rem 2rem 4rem; } /* Scripture blockquote */ .scripture { font-family:var(--serif); font-style:italic; color:var(--gold-light); border-left:3px solid var(--gold); padding:.85rem 1.35rem; margin:2.25rem auto; max-width:720px; font-size:1.08rem; line-height:1.6; } [data-theme="dark"] .scripture, :root:not([data-theme="light"]) .scripture { color:var(--gold); } .scripture.center { border-left:none; text-align:center; } /* ---- Conviction / difference -------------------------------------------- */ .conviction { max-width:900px; margin:0 auto; } .conviction-lead { font-family:var(--serif); font-size:clamp(1.4rem,3.4vw,2rem); font-style:italic; line-height:1.4; text-align:center; color:var(--text); margin-bottom:1.25rem; text-wrap:balance; } .conviction-lead .g { color:var(--gold); font-style:normal; } .conviction p.body { text-align:center; color:var(--text-sec); font-size:1.08rem; max-width:720px; margin:0 auto; line-height:1.7; } .compare { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; max-width:920px; margin:2.75rem auto 0; } .compare-card { border-radius:18px; padding:1.75rem; border:1px solid var(--glass-border); } .compare-card.them { background:var(--surface); } .compare-card.us { background:linear-gradient(180deg,var(--surface2),var(--surface)); border-color:var(--line-gold); } .compare-card h3 { font-family:var(--serif); font-size:1.15rem; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; } .compare-card.them h3 { color:var(--text-mut); } .compare-card.us h3 { color:var(--gold); } .compare-card ul { list-style:none; } .compare-card li { display:flex; gap:.6rem; align-items:flex-start; font-size:.97rem; margin-bottom:.7rem; color:var(--text-sec); line-height:1.55; } .compare-card li .m { flex-shrink:0; font-weight:700; } .them li .m { color:#D9534F; } [data-theme="dark"] .them li .m, :root:not([data-theme="light"]) .them li .m { color:#EF7B7B; } .us li .m { color:var(--gold); } /* ---- Feature grids ------------------------------------------------------- */ .features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.25rem; max-width:1100px; margin:0 auto; } .feature-card { background:var(--surface); padding:1.75rem; border-radius:16px; border:1px solid var(--glass-border); transition:transform .2s, box-shadow .2s; } .feature-card:hover { transform:translateY(-4px); box-shadow:0 14px 34px var(--card-shadow); } .feature-icon { width:48px; height:48px; border-radius:12px; background:var(--glass-fill); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1rem; border:1px solid var(--glass-border); } .feature-card h3 { font-family:var(--serif); font-size:1.2rem; font-weight:600; margin-bottom:.5rem; color:var(--text); } .feature-card p { color:var(--text-mut); font-size:.96rem; line-height:1.65; } /* Legacy features.html layout (kept for compatibility, restyled) */ .feature-section { max-width:960px; margin:0 auto 2.75rem; } .feature-section > h2 { font-family:var(--serif); font-size:clamp(1.4rem,3.2vw,1.9rem); font-weight:600; margin-bottom:1.1rem; color:var(--text); padding-bottom:.6rem; border-bottom:1px solid var(--divider); } .feature-box { background:var(--surface); border-radius:16px; padding:1.5rem; margin-bottom:1rem; border:1px solid var(--glass-border); transition:transform .2s, box-shadow .2s; } .feature-box:hover { transform:translateY(-3px); box-shadow:0 12px 30px var(--card-shadow); } .feature-box h3 { font-family:var(--serif); font-size:1.12rem; font-weight:600; margin-bottom:.5rem; color:var(--text); } .feature-box p { color:var(--text-mut); font-size:.96rem; line-height:1.65; } /* ---- Testimonials -------------------------------------------------------- */ .testimonial-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.25rem; max-width:1100px; margin:2rem auto 0; } .testimonial-card { background:var(--surface); padding:1.75rem; border-radius:16px; border:1px solid var(--glass-border); } .testimonial-content { font-style:italic; margin-bottom:1.25rem; color:var(--text-sec); line-height:1.7; } .testimonial-author { display:flex; align-items:center; gap:.75rem; } .author-avatar { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--primary-light)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; } .author-info h4 { font-size:.95rem; font-weight:600; } .author-info p { font-size:.8rem; color:var(--text-mut); } /* ---- Split / panels (partners, business) -------------------------------- */ .split { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; max-width:1040px; margin:0 auto; } .panel { background:var(--surface); border:1px solid var(--glass-border); border-radius:18px; padding:2rem; transition:transform .2s, box-shadow .2s; } .panel:hover { transform:translateY(-4px); box-shadow:0 16px 38px var(--card-shadow); } .panel .feature-icon { margin-bottom:1.1rem; } .panel h3 { font-family:var(--serif); font-size:1.35rem; margin-bottom:.6rem; color:var(--text); } .panel > p { color:var(--text-sec); line-height:1.7; font-size:1rem; } .panel ul { list-style:none; margin-top:1.1rem; } .panel ul li { padding-left:1.65rem; position:relative; margin-bottom:.6rem; color:var(--text-sec); font-size:.96rem; line-height:1.5; } .panel ul li::before { content:'✓'; position:absolute; left:0; color:var(--gold); font-weight:700; } .panel .btn { margin-top:1.4rem; } /* Numbered process steps */ .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; max-width:1040px; margin:0 auto; } .step { background:var(--surface); border:1px solid var(--glass-border); border-radius:16px; padding:1.6rem; } .step .num { font-family:var(--serif); font-size:1.6rem; font-weight:700; color:var(--gold); line-height:1; margin-bottom:.7rem; } .step h3 { font-size:1.05rem; font-weight:600; margin-bottom:.4rem; color:var(--text); } .step p { color:var(--text-mut); font-size:.94rem; line-height:1.6; } /* Spec / API sample block */ .codeblock { max-width:820px; margin:1.5rem auto 0; background:var(--surface2); border:1px solid var(--glass-border); border-radius:14px; padding:1.35rem 1.5rem; overflow-x:auto; } .codeblock pre { font-family:'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; font-size:.86rem; color:var(--text-sec); line-height:1.7; white-space:pre; } .codeblock .k { color:var(--gold); } /* ---- Pricing ------------------------------------------------------------- */ .pricing-container { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; max-width:920px; margin:0 auto; align-items:stretch; } .pricing-plan { flex:1; min-width:280px; background:var(--surface); border:1px solid var(--glass-border); border-radius:20px; padding:2rem; position:relative; } .pricing-plan.premium { border-color:var(--line-gold); background:linear-gradient(180deg,var(--surface2),var(--surface)); } .plan-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:#221803; font-size:.72rem; font-weight:700; letter-spacing:.06em; padding:.35rem .85rem; border-radius:100px; } .plan-name { font-family:var(--serif); font-size:1.5rem; font-weight:600; } .plan-description { color:var(--text-mut); font-size:.95rem; margin-bottom:1rem; } .plan-price { font-family:var(--serif); font-size:2.6rem; font-weight:700; } .old-price { text-decoration:line-through; color:var(--text-mut); font-size:1.1rem; } .per-month { font-size:.9rem; color:var(--text-mut); } .plan-features { list-style:none; margin:1.4rem 0; } .plan-features li { padding:.5rem 0 .5rem 1.8rem; position:relative; color:var(--text-sec); font-size:.95rem; line-height:1.45; border-top:1px solid var(--divider); } .plan-features li:first-child { border-top:none; } .plan-features li::before { content:'✓'; position:absolute; left:0; color:var(--gold); font-weight:700; } .plan-features li.disabled-feature { color:var(--text-mut); opacity:.72; text-decoration:line-through; text-decoration-color:rgba(150,140,175,.55); } .plan-features li.disabled-feature::before { content:'✕'; color:#C77; text-decoration:none; } .feature-highlight { color:var(--gold); font-weight:700; } .subscribe-btn { display:block; text-align:center; padding:.8rem; border-radius:12px; font-weight:700; margin-top:.5rem; } .subscribe-btn.primary { background:var(--primary); color:#fff; } .subscribe-btn.outline { border:1.5px solid var(--glass-border); color:var(--text); } .subscribe-btn.outline:hover { background:var(--glass-fill); } /* ---- FAQ / accordion ----------------------------------------------------- */ .faq { max-width:820px; margin:0 auto; } .faq details { border:1px solid var(--glass-border); border-radius:14px; background:var(--surface); margin-bottom:.85rem; overflow:hidden; } .faq summary { padding:1.15rem 1.35rem; font-weight:600; font-size:1.02rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; color:var(--text); } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:'+'; color:var(--gold); font-size:1.4rem; font-weight:400; transition:transform .2s; } .faq details[open] summary::after { transform:rotate(45deg); } .faq .answer { padding:0 1.35rem 1.25rem; color:var(--text-mut); font-size:.98rem; line-height:1.75; } .faq-item { border:1px solid var(--glass-border); border-radius:14px; background:var(--surface); margin-bottom:.85rem; padding:1.15rem 1.35rem; } .faq-item h3 { font-size:1.02rem; font-weight:600; margin-bottom:.5rem; color:var(--text); } .faq-item p { color:var(--text-mut); font-size:.97rem; line-height:1.7; } /* ---- Mission band -------------------------------------------------------- */ .mission { max-width:900px; margin:0 auto; padding:2.5rem; border-radius:22px; background:linear-gradient(180deg,var(--surface2),var(--surface)); border:1px solid var(--glass-border); text-align:center; } .mission h2 { font-family:var(--serif); font-size:clamp(1.6rem,3.6vw,2.1rem); margin-bottom:1rem; } .mission p { color:var(--text-sec); font-size:1.08rem; max-width:680px; margin:0 auto; line-height:1.75; } .mission .verse { display:block; margin-top:1.4rem; font-family:var(--serif); font-style:italic; color:var(--gold); font-size:1.15rem; } /* ---- CTA ----------------------------------------------------------------- */ .cta { padding:4.5rem 2rem; text-align:center; background:linear-gradient(135deg,var(--primary-dark),var(--primary)); color:#fff; border-radius:24px; max-width:1100px; margin:0 auto 4rem; } .cta h2 { font-family:var(--serif); font-size:clamp(1.7rem,4vw,2.3rem); margin-bottom:1rem; } .cta p { font-size:1.05rem; margin:0 auto 2rem; max-width:600px; opacity:.94; } .cta .btn-gold { color:#221803; } /* ---- Footer -------------------------------------------------------------- */ footer { padding:3rem 2rem; background:var(--surface); border-top:1px solid var(--divider); } .footer-content { display:flex; flex-wrap:wrap; justify-content:space-between; max-width:1100px; margin:0 auto; gap:2rem; } .footer-logo { flex:1; min-width:220px; } .footer-logo img { height:36px; margin-bottom:.75rem; border-radius:8px; } .footer-logo p { color:var(--text-mut); font-size:.9rem; max-width:300px; line-height:1.6; } .footer-links { display:flex; flex-wrap:wrap; gap:3rem; } .footer-column { min-width:140px; } .footer-column h3 { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem; color:var(--gold); } .footer-column ul { list-style:none; } .footer-column ul li { margin-bottom:.6rem; } .footer-column ul li a { color:var(--text-mut); font-size:.9rem; transition:color .2s; } .footer-column ul li a:hover { color:var(--text); } .copyright { text-align:center; padding-top:2rem; color:var(--text-mut); font-size:.8rem; } .footer-links-inline { display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; margin-top:1rem; } .footer-links-inline a { color:var(--text-mut); font-size:.85rem; transition:color .2s; } .footer-links-inline a:hover { color:var(--text); } /* ---- App banner (mobile) ------------------------------------------------- */ .app-banner { display:none; position:fixed; top:0; left:0; right:0; z-index:200; background:var(--surface); border-bottom:1px solid var(--divider); padding:12px 16px; box-shadow:0 4px 20px rgba(0,0,0,.25); } .app-banner-inner { display:flex; align-items:center; gap:12px; max-width:600px; margin:0 auto; } .app-banner-icon { width:44px; height:44px; border-radius:10px; flex-shrink:0; } .app-banner-text { flex:1; min-width:0; } .app-banner-title { font-weight:700; font-size:.9rem; color:var(--text); } .app-banner-sub { font-size:.75rem; color:var(--text-mut); } .app-banner-btn { padding:8px 16px; border-radius:8px; background:var(--gold); color:#221803; font-weight:700; font-size:.85rem; white-space:nowrap; } .app-banner-close { background:none; border:none; color:var(--text-mut); font-size:1.2rem; cursor:pointer; padding:4px 8px; } /* ---- Responsive ---------------------------------------------------------- */ @media (max-width:768px) { nav { display:none; } .logo-text { display:none; } .btn { padding:.55rem 1.05rem; font-size:.88rem; } .compare { grid-template-columns:1fr; } .cta { margin:0 1rem 2rem; border-radius:18px; padding:3rem 1.5rem; } .mission { padding:1.75rem; } header { padding:1rem 1.25rem; } } @media (max-width:480px) { .hero { padding:3.5rem 1.25rem 2.5rem; } .section { padding:3.5rem 1.25rem; } .features-grid, .testimonial-grid, .split, .steps { grid-template-columns:1fr; } } @media (prefers-reduced-motion: reduce) { * { transition:none !important; scroll-behavior:auto !important; } .feature-card:hover, .feature-box:hover, .panel:hover, .btn-gold:hover { transform:none; } }