/* ========================================================================== accounts.css Account detail pages (Standard / Raw / Elite), the account comparison page, the two client documents (Swap-Free Policy, Contract Specifications) and 404. Uses the shared tokens from style.css so these pages theme with the rest of the site in both light and dark. Phase 3 re-tokenizes sitewide; nothing here hard-codes a colour that is not already a variable. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Top band This began as a fix for a navbar that was transparent at rest: it needed something dark behind it or its near-white links washed out. The bar paints its own surface now and flips with the theme, so the band follows it — a navy strip under an ivory bar in light theme read as a seam, which is what this set fixes. What the band still does structurally is reserve the fixed bar's height in flow, which the sticky account selector below needs anyway. Surface and ink are one set because they have to move together: every value below is measured against --acct-band, not against the page. light theme, over #f8f8f8 --acct-ink 17.9:1 --acct-ink-muted 6.9:1 --acct-ink-quiet 4.6:1 --acct-gold 4.8:1 dark theme, over #080f1c — the values this file already shipped. TWO NOTES ON THE LIGHT VALUES --acct-light is Ivory White #f8f8f8 from BRD §9.1, not the #f3eee3 the three reference account mockups use. That mockup palette is explicitly unapproved (see CLAUDE.md, "Design system"), and it had already leaked into this file as the tab and hero-copy colours; those are now tokens and the raw value is gone. If #f3eee3 has since been signed off, changing --acct-light is the only edit. --acct-gold is NOT --brand-gold in light theme. #e6b328 measures 1.82:1 on ivory as text and misses the 3:1 non-text floor for the active tab's underline, so light resolves to the deep gold #8a6a0f — the same value the hero engraving uses in css/style.css. It is outside the §9.1 table and wants design sign-off; Editorial Grey #2e3137 is the in-palette fallback if that sign-off does not come. Gated on [data-bs-theme='light'] to match css/style.css. funding.css and markets.css gate their light shells on :not([data-bs-theme='dark']) instead; the two agree because all 52 pages hardcode data-bs-theme="dark" on . -------------------------------------------------------------------------- */ :root { --acct-dark: #080f1c; --acct-light: #f8f8f8; --acct-band: var(--acct-dark); --acct-ink: #ffffff; --acct-ink-muted: rgba(248, 248, 248, 0.78); --acct-ink-quiet: rgba(248, 248, 248, 0.65); --acct-edge: rgba(255, 255, 255, 0.12); --acct-gold: var(--brand-gold); } html[data-bs-theme='light'] { --acct-band: var(--acct-light); --acct-ink: #111111; --acct-ink-muted: rgba(46, 49, 55, 0.82); --acct-ink-quiet: rgba(46, 49, 55, 0.68); --acct-edge: rgba(17, 17, 17, 0.12); --acct-gold: #8a6a0f; } /* -------------------------------------------------------------------------- 1. Sticky account selector (FR-20) Pure links — the active tab is hardcoded per page, no JavaScript. --nav-h is published on :root by layout.js and re-measured on resize and after translation. The border-top is the flow spacer that clears the fixed navbar. Because it belongs to the sticky element it travels with it, which is why this sticks at top: 0 rather than at --nav-h, and why it has no margin-top: the border holds the tabs clear of the bar at every scroll position, with no JavaScript. It used to double as the dark strip painted behind a transparent navbar. The bar is opaque now and covers this stretch outright, so that job is retired — but see the note in section 0 on why the fill stays dark anyway. -------------------------------------------------------------------------- */ .account-tabs { position: sticky; top: 0; z-index: 50; background: var(--acct-band); border-top: var(--nav-h, 78px) solid var(--acct-band); border-bottom: 1px solid var(--acct-edge); } .account-tabs .container-xl { display: flex; justify-content: center; gap: 0; } .account-tabs a { padding: 16px 34px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; /* Measured against the band, not the page surface — see section 0. */ color: var(--acct-ink-quiet); border-bottom: 2px solid transparent; transition: color 0.2s ease; } .account-tabs a:hover, .account-tabs a:focus { color: var(--acct-gold); } .account-tabs a.active { color: var(--acct-gold); border-bottom-color: var(--acct-gold); } /* Four destinations since Compare Accounts joined the strip. On a narrow viewport they scroll rather than wrap into a second row and shove the page down — the same treatment .ab-tabs uses. justify-content flips to flex-start while scrolling, because centred flex content that overflows is unreachable at its leading edge. */ .account-tabs .container-xl { overflow-x: auto; scrollbar-width: none; } .account-tabs .container-xl::-webkit-scrollbar { display: none; } .account-tabs a { flex: 0 0 auto; white-space: nowrap; } @media (max-width: 767.98px) { .account-tabs .container-xl { justify-content: flex-start; } .account-tabs a { padding: 16px 20px; font-size: 0.74rem; } } /* -------------------------------------------------------------------------- 3. Hero (FR-19 section 2) Continues the band that starts behind the navbar, so the top of the page reads as one surface from the header down to the end of the hero. It follows the theme with the rest of the band — these two rules override the themed --text-primary / --paragraph-color that .acct-hero-title and .acct-hero-desc carry off the band, because on the band the surface is --acct-band and not the page. -------------------------------------------------------------------------- */ .acct-hero { padding: 80px 0 72px; background: var(--acct-band); color: var(--acct-ink-muted); } .acct-hero .acct-hero-title { color: var(--acct-ink); } .acct-hero .acct-hero-desc { color: var(--acct-ink-muted); } .acct-eyebrow { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acct-gold); margin-bottom: 14px; } .acct-hero-title { font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--text-primary); margin-bottom: 18px; } .acct-hero-desc { max-width: 62ch; font-size: 1rem; line-height: 1.7; color: var(--paragraph-color); margin-bottom: 26px; } .acct-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } /* Swap-free badge — typographic only. BRD 8.3: never religious imagery, never green theming. Mounted both on the hero band and, on /swap-free-policy, on the plain page surface. --acct-gold clears 4.5:1 on either in both themes, which --brand-gold did not do on a light surface. */ .swapfree-badge { display: inline-block; padding: 7px 16px; margin-bottom: 22px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acct-gold); border: 1px solid var(--acct-gold); border-radius: 999px; } /* -------------------------------------------------------------------------- 4. Section scaffolding -------------------------------------------------------------------------- */ .acct-section { padding: 56px 0; border-top: 1px solid var(--footer-border); } /* The dark hero already ends the band; a hairline on top of it would read as a seam. */ .acct-hero + .acct-section { border-top: none; } .acct-section-eyebrow { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-gold); margin-bottom: 10px; } .acct-h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); color: var(--text-primary); margin-bottom: 24px; } .acct-p { max-width: 72ch; font-size: 0.95rem; line-height: 1.75; color: var(--paragraph-color); } /* -------------------------------------------------------------------------- 5. Specifications grid (FR-21) Two columns; auto-flow puts rows 1-6 left and 7-12 right. dt and dd are siblings — never nest them inside one [data-lang] element, because lang.js assigns textContent and would erase the child. -------------------------------------------------------------------------- */ .specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; margin: 0; border-top: 1px solid var(--footer-border); } .spec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 17px 0; border-bottom: 1px solid var(--footer-border); } .spec-row dt { font-size: 0.88rem; font-weight: 400; color: var(--footer-color1); } .spec-row dd { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); text-align: end; } /* -------------------------------------------------------------------------- 6. Benefit cards -------------------------------------------------------------------------- */ .benefit-card { height: 100%; padding: 26px; border: 1px solid var(--footer-border); border-radius: 12px; } .benefit-card h3 { font-size: 1.02rem; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; } .benefit-card p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--paragraph-color); } .suitable-note { margin-top: 26px; font-size: 0.9rem; line-height: 1.7; color: var(--footer-color1); } /* -------------------------------------------------------------------------- 7. Market tiles -------------------------------------------------------------------------- */ /* Each tile links to that market's page, where its contract specifications live. It is an , so it needs the block box and the reset that the former
got for free. */ .market-tile { display: block; height: 100%; padding: 20px; text-align: center; border: 1px solid var(--footer-border); border-radius: 12px; text-decoration: none; transition: border-color 0.2s ease; } /* Gold on the edge only — no fill (BRD §9.1). */ .market-tile:hover { border-color: var(--brand-gold); } .market-tile:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; } .market-tile:hover .market-tile-name { color: var(--brand-gold); } .market-tile-name { display: block; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; transition: color 0.2s ease; } /* The providing entity is named on every market — FR-14, and the two-entity distinction the BRD calls the single most important structural fact. */ .market-tile-entity { display: block; font-size: 0.76rem; line-height: 1.5; color: var(--footer-color1); } .markets-note { margin-top: 22px; font-size: 0.85rem; color: var(--footer-color1); } /* -------------------------------------------------------------------------- 8. Important Conditions panel (FR-23) Plain visible text. Never an accordion, never a tooltip. -------------------------------------------------------------------------- */ .conditions-panel { max-width: 860px; margin: 0 auto; padding: 36px 36px 30px; border: 1px solid var(--footer-border); border-top: 2px solid var(--brand-gold); border-radius: 4px; } .conditions-panel ul { list-style: none; margin: 0; padding: 0; } .conditions-panel li { position: relative; padding-inline-start: 24px; margin-bottom: 14px; font-size: 0.9rem; line-height: 1.7; color: var(--paragraph-color); } .conditions-panel li::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.72em; width: 11px; height: 1px; background: var(--brand-gold); } /* -------------------------------------------------------------------------- 9. Other accounts + final CTA -------------------------------------------------------------------------- */ .other-card { height: 100%; padding: 26px; border: 1px solid var(--footer-border); border-radius: 12px; } .other-card h3 { font-size: 1.02rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; } .other-card p { font-size: 0.9rem; line-height: 1.7; color: var(--paragraph-color); margin-bottom: 16px; } .other-card-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .acct-link { color: var(--brand-gold); text-decoration: none; font-size: 0.9rem; font-weight: 500; } .acct-link:hover, .acct-link:focus { text-decoration: underline; } .final-cta { padding: 64px 0; text-align: center; border-top: 1px solid var(--footer-border); } .final-cta .acct-p { margin-inline: auto; margin-bottom: 26px; } .final-cta-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } /* -------------------------------------------------------------------------- 10. Comparison page The table scrolls inside its own container rather than forcing the page to scroll sideways. Direction is handled by dir="rtl" on , set by lang.js. -------------------------------------------------------------------------- */ .compare-card { height: 100%; display: flex; flex-direction: column; padding: 40px 34px 34px; background: var(--section-box-color); border: 1px solid var(--footer-border); border-top: 3px solid var(--brand-gold); border-radius: 0; } .compare-card.is-featured { border-color: var(--brand-gold); border-top-width: 3px; } /* Set by js/account-cards.js when the card points at the page you are on. */ .compare-card.is-current { border-color: var(--brand-gold); } .compare-card.is-current .compare-card-details { pointer-events: none; text-decoration: none; color: var(--footer-color1); } /* The badge sits at the top of the card and is rectangular here — the pill variant is used in the hero and section headers. */ .compare-card .swapfree-badge { align-self: flex-start; border-radius: 0; padding: 9px 18px; margin-bottom: 30px; } .compare-card-name { font-size: 2rem; font-weight: 400; line-height: 1.15; color: var(--text-primary); margin-bottom: 12px; } /* BRD §7 positioning line — set in gold, immediately under the account name. */ .compare-card-position { font-size: 0.95rem; font-weight: 500; line-height: 1.5; color: var(--brand-gold); margin-bottom: 16px; } .compare-card-desc { font-size: 0.95rem; line-height: 1.7; color: var(--paragraph-color); margin-bottom: 26px; } .compare-card ul { list-style: none; margin: 0 0 30px; padding: 0; flex: 1 1 auto; } .compare-card li { position: relative; padding-inline-start: 28px; margin-bottom: 16px; font-size: 0.95rem; line-height: 1.5; color: var(--text-primary); } .compare-card li::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.7em; width: 14px; height: 1px; background: var(--brand-gold); } /* Primary card action. Inverts against the card surface so it reads the same way in both themes. Full width and square come from css/buttons.css, which also holds the box — this rule is colour and motion. border-color is declared, not the `border` shorthand: the shared rule owns the width and style, and only defers the colour. */ .btn-acct-primary { border-color: var(--text-primary); background: var(--text-primary); color: var(--section-box-color); transition: background-color 0.2s ease, color 0.2s ease; } .btn-acct-primary:hover, .btn-acct-primary:focus { background: transparent; color: var(--text-primary); } /* Secondary action — centred and underlined, never a second filled button. */ .compare-card-details { display: block; margin-top: 18px; text-align: center; font-size: 0.95rem; color: var(--text-primary); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; } .compare-card-details:hover, .compare-card-details:focus { color: var(--brand-gold); } .compare-card-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .compare-table-scroll, .specs-table-scroll { overflow-x: auto; margin-top: 12px; } .compare-table, .specs-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.9rem; } .compare-table th, .compare-table td, .specs-table th, .specs-table td { padding: 14px 16px; text-align: start; border-bottom: 1px solid var(--footer-border); vertical-align: top; } .compare-table thead th, .specs-table thead th { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--footer-color1); border-bottom: 1px solid var(--brand-gold); } .compare-table tbody th, .specs-table tbody th { font-weight: 400; color: var(--footer-color1); } .compare-table tbody td, .specs-table tbody td { color: var(--text-primary); } /* -------------------------------------------------------------------------- 11. Document pages (Swap-Free Policy, Contract Specifications) -------------------------------------------------------------------------- */ /* First element on the document pages, so it carries the navbar offset. This used to read `border-top: var(--nav-h, 78px)` — a width with no style, which resolves border-top-style to `none` and therefore the used width to 0. Neither the clearance nor the dark fill it was meant to paint ever existed, so the page ran straight under the bar. That was survivable while the bar was transparent; now that it paints an opaque surface the clearance is the whole job, and the dark fill is the bar's own business. Plain padding. */ .doc-section { padding: calc(var(--nav-h, 78px) + 48px) 0 72px; } .doc-title { font-size: clamp(1.7rem, 3.4vw, 2.3rem); color: var(--text-primary); margin-bottom: 16px; } .doc-lead { max-width: 72ch; font-size: 1rem; line-height: 1.75; color: var(--paragraph-color); margin-bottom: 34px; } .doc-h2 { font-size: 1.15rem; font-weight: 600; color: var(--text-primary); margin: 34px 0 12px; } .doc-p { max-width: 72ch; font-size: 0.95rem; line-height: 1.75; color: var(--paragraph-color); } .doc-list { max-width: 72ch; padding-inline-start: 20px; } .doc-list li { font-size: 0.95rem; line-height: 1.75; color: var(--paragraph-color); margin-bottom: 10px; } .doc-link { color: var(--brand-gold); text-decoration: none; } .doc-link:hover, .doc-link:focus { text-decoration: underline; } .doc-callout { margin: 34px 0; padding: 26px 28px 20px; border: 1px solid var(--footer-border); border-inline-start: 2px solid var(--brand-gold); border-radius: 4px; } .doc-callout .doc-h2 { margin-top: 0; } .doc-note { max-width: 72ch; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--footer-border); font-size: 0.85rem; line-height: 1.7; color: var(--footer-color1); } /* -------------------------------------------------------------------------- 12. 404 -------------------------------------------------------------------------- */ /* The border is the flow spacer that clears the fixed navbar, and it sits directly behind it — so it follows the band rather than pinning to navy, or 404 shows a navy strip under an ivory bar in light theme. */ .notfound-section { padding: 96px 0; border-top: var(--nav-h, 78px) solid var(--acct-band); text-align: center; } .notfound-code { font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 600; line-height: 1; color: var(--brand-gold); margin-bottom: 10px; } .notfound-title { font-size: clamp(1.4rem, 3vw, 2rem); color: var(--text-primary); margin-bottom: 14px; } .notfound-lead { max-width: 56ch; margin: 0 auto 30px; font-size: 0.95rem; line-height: 1.75; color: var(--paragraph-color); } .notfound-links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: center; } .notfound-link { color: var(--brand-gold); text-decoration: none; font-size: 0.92rem; } .notfound-link:hover, .notfound-link:focus { text-decoration: underline; } /* -------------------------------------------------------------------------- 13. Responsive -------------------------------------------------------------------------- */ @media (max-width: 960px) { .specs-grid { grid-template-columns: 1fr; gap: 0; } .conditions-panel { padding: 26px 22px 20px; } .account-tabs a { padding: 14px 18px; letter-spacing: 0.1em; } } @media (max-width: 575.98px) { .account-tabs a { padding: 12px 12px; font-size: 0.72rem; letter-spacing: 0.06em; } .acct-hero { padding: 48px 0 40px; } .acct-section { padding: 40px 0; } } /* Motion is limited to hover and entrance transitions; disable under prefers-reduced-motion (BRD 9.2 / NFR-03). */ @media (prefers-reduced-motion: reduce) { .account-tabs a, .market-tile, .market-tile-name { transition: none; } } /* -------------------------------------------------------------------------- Homepage account trio (#home-accounts in index.html) Mounts the same partials/account-cards.html as the comparison and market pages, so the cards need no styling of their own here — every token they use is already theme-aware. Only the section head differs: the homepage centres it to match the Markets and Funding sections above and below it. -------------------------------------------------------------------------- */ /* Not scoped to #home-accounts any more: the accounts section on all six market pages uses the same head, so the two read as one component. */ .acct-home-head { max-width: 660px; margin: 0 auto 40px; text-align: center; } .acct-home-head .acct-p { margin-left: auto; margin-right: auto; } .acct-section .markets-note { margin-top: 28px; text-align: center; } /* The market pages follow the FR-13 qualification with a link to the account comparison; the second note sits tight under the first. */ .acct-section .markets-note + .markets-note { margin-top: 10px; } .rtl #home-accounts .acct-section-eyebrow { letter-spacing: normal; }