/* web/public/styles/archway-theme.css Archway Retirement theme layer, scheme "Deep two-tone blue". Load AFTER styles/style.css and BEFORE a page's own stylesheet, exactly like valoram-theme.css. TWO SCHEMES ARE UNDER REVIEW (Andrew, 2026-09-21): "Deep two-tone blue" (archway-theme.css, the DEFAULT the registry mirrors and the tests pin) and "Pine and light gold" (archway-theme-pine.css). Both are generated from ONE template so their component rules are identical and only the :root tokens differ. build_archway_bundle.sh --theme ships one of them AS styles/archway-theme.css in the bundle, so every surface and the OG cards follow whichever scheme is chosen without any other edit. When a scheme is picked, copy its file over archway-theme.css and delete the other. THIS IS THE ONE FILE for its scheme: every surface reads the :root block below, execution/tools/generate_og_cards.py parses the same block, and clients/archway.yaml mirrors the default scheme under test. PALETTE PROVENANCE: Andrew's logo comparison sheet 2026-09-21, "Deep two-tone blue": #001A3D and #4A8BC9. Fonts are PLACEHOLDERS until the brand kit (Libre Baskerville + Source Sans 3). THE ONE CONTRAST TRAP. The accent is a FILL and it takes --ai-on-accent text, which on this scheme is the primary colour, NOT white: white on #4a8bc9 measures under 4.5:1. Accent-coloured TEXT on paper uses --ai-gold-deep, a darker shade of the accent that clears 4.5:1. Keep the split when swapping values. */ :root { /* Dark ground (the layout sheet calls it navy; on pine it is the pine) */ --ai-navy: #001a3d; --ai-navy-deep: #00122b; --ai-navy-soft: #0d3b72; /* Accent (the layout sheet calls it gold). FILLS take --ai-on-accent text. */ --ai-gold: #4a8bc9; --ai-gold-deep: #2a629a; /* accent TEXT on paper, 4.5:1 or better */ --ai-gold-soft: #d8e7f7; /* tint for focus rings and soft fills */ --ai-on-accent: #001a3d; /* text on an accent fill */ /* Light grounds */ --ai-cream: #f5f8fc; --ai-cream-deep: #e9f0f8; --ai-paper: #ffffff; /* Text */ --ai-text: #0b1f3a; --ai-text-muted: #4a5a70; --ai-text-soft: #7a8798; --ai-text-on-navy: #eaf1fa; /* Lines. Status colours (error, success) inherit from style.css unchanged. */ --ai-border: #d4dde9; --ai-border-soft: #e5ebf3; /* Type. PLACEHOLDER families. */ --ai-font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif; --ai-font-body: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ai-radius-sm: 5px; --ai-radius-md: 9px; --ai-radius-lg: 12px; --ai-shadow-sm: 0 1px 2px rgba(0, 26, 61, 0.07); --ai-shadow-md: 0 4px 16px rgba(0, 26, 61, 0.10); --ai-shadow-lg: 0 12px 32px rgba(0, 26, 61, 0.15); } /* -------------------------------------------------------------------------- Stray literals in landing-page-valoram/styles.css (the shared layout sheet the Archway LP also loads) that predate the token system: warm creams and navy leftovers. Same overrides valoram-theme.css carries, restated here so this layer is complete on its own. -------------------------------------------------------------------------- */ .ai-v2-quiz-card, .ai-v1-quiz-frame, [class*="ai-"][style*="fffaf0"] { background-color: var(--ai-cream); } /* Libre Baskerville has a true italic, so the emphasis span keeps its slant and takes the text-safe blue. */ .ai-h1-italic { font-style: italic; font-weight: 700; color: var(--ai-gold-deep); } /* The lockup already says "Archway Retirement", so the header never pairs it with separate brand-name text. The lockup is a horizontal composition of the supplied square logo (execution/tools/build_archway_logo_variants.py) and carries two lines of wordmark, so it needs more height than Valoram's single-line mark. */ .ai-brand-text { display: none; } /* LIGHT header, COLOUR lockup (Andrew, 2026-09-21: the logo's own colours must show; a white knock-out on a dark banner is not the brand). The layout sheet paints the header --ai-navy-deep, so both the ground and the divider are restated here. */ .ai-header { background: var(--ai-paper); border-bottom: 1px solid var(--ai-border); } /* BANNER VARIANTS under review (2026-09-21). The landing page sets html[data-banner] from ?banner=; /compare/ frames every combination. "tint" is the scheme's soft accent, the only coloured ground the COLOUR lockup stays legible on (on navy or pine it vanishes). */ html[data-banner="tint"] .ai-header { background: var(--ai-gold-soft); border-bottom-color: transparent; } .ai-brand-img { height: 52px; width: auto; max-width: 260px; object-fit: contain; /* style.css adds a drop shadow "for depth on the navy header"; on a light header it reads as a blur around the colour lockup. */ filter: none; } @media (max-width: 380px) { .ai-brand-img { height: 42px; } } /* TCPA consent block, injected by landing-page-valoram/pii-polish.js under the submit button (the brand name inside it is read from AI_SURVEY.BRAND_NAME). 12px floor, 1.5 line height, AA link colour. */ .vs-consent { font-size: 12px; line-height: 1.5; color: var(--ai-text-muted); text-align: left; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ai-border-soft); } .vs-consent a { color: var(--ai-gold-deep); text-decoration: underline; } /* -------------------------------------------------------------------------- DEMO RIBBON. Present on every skeleton surface so nothing on this project can be mistaken for, or forwarded as, a live page. Removed by deleting the element, not by hiding it: a hidden ribbon is a live-looking demo. -------------------------------------------------------------------------- */ .aw-demo-ribbon { background: var(--ai-gold-soft); color: var(--ai-navy); font-family: var(--ai-font-body); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: center; padding: 7px 14px; border-bottom: 1px solid var(--ai-border); }