/* ============================================================ Christ Community Spiritual Gifts Assessment — front-end styles All scoped under #cccsg-app so the theme can't bleed in. BRAND TOKENS: edit the :root block below per deployment. Palette (WCAG-checked): --primary #1f1f1f near-black — white text OK (16.5:1). Buttons, bars, badges. --accent #e7a538 gold — DARK text only; white-on-gold fails AA (2.13:1). Used purely as a fill/highlight with ink text. --ink #000000 — 20:1 on the FAFAFA surface. --muted #5a5a5a — 6.6:1 on FAFAFA (passes AA). Note: gold is never used as button background with white text, and never as text on the light surface (2.05:1, fails). It only ever appears as a fill behind dark text or as a solid rule/border. Fonts: Quincy CF (display) / Greycliff CF (body), with Fraunces / Nunito Sans as Google-Fonts fallbacks until the licensed Adobe kit is wired up. ============================================================ */ #cccsg-app{ --ink:#000000; --ink-soft:#1f1f1f; --muted:#5a5a5a; --paper:#f1f1f1; --surface:#FAFAFA; --primary:#1f1f1f; --primary-deep:#000000; --primary-tint:#dedede; --accent:#e7a538; --accent-deep:#c98a1f; --accent-tint:#faedd4; --line:#dedede; --display:"Quincy CF", "Fraunces", Georgia, "Times New Roman", serif; --body:"Greycliff CF", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-family:var(--body); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; box-sizing:border-box; /* Flow naturally in the page's content column and align to its left edge — exactly like the surrounding H1/H2. No viewport breakout (which mis-aligns inside constrained/overflow-hidden Beaver Builder columns). */ width:100%; margin:0; background:var(--surface); } #cccsg-app *{ box-sizing:border-box; } /* Screens are simple full-width blocks. NO horizontal padding and NO width cap here — the Beaver Builder row already constrains content to 1240px and centers it, so the assessment must fill 100% of that row, flush to both edges. */ #cccsg-app .cccsg-screen{ display:none; animation:cccsg-rise .35s ease both; background:var(--surface); padding:clamp(1.5rem,3vw,2.5rem) 0; } #cccsg-app .cccsg-screen.cccsg-on{ display:block; } /* Inner wrapper fills the row completely — no max-width, no side margins. */ #cccsg-app .cccsg-inner{ width:100%; max-width:none; margin:0; padding:0; } /* HARD GUARANTEE: the app and its structural wrappers always fill 100% of the row they're placed in, flush to both edges. !important defeats any cached or theme rule that would otherwise indent or center them. Individual content blocks (hero, options, card) keep their own readability caps below — those are left-aligned, so they don't create side padding. */ #cccsg-app, #cccsg-app .cccsg-screen, #cccsg-app .cccsg-inner{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; } /* Within the wide column, keep reading and input widths comfortable so text and form controls don't stretch the full 1240px. */ #cccsg-app .cccsg-hero{ max-width:none; } #cccsg-app .cccsg-qtext{ max-width:820px; } #cccsg-app .cccsg-opts{ max-width:680px; } #cccsg-app #cccsg-s-intro .cccsg-field, #cccsg-app .cccsg-results-head{ max-width:680px; } /* ---- Theme-conflict reset: WordPress themes frequently override heading colors and button/link typography with high-specificity selectors. Pin our typography on BOTH