/* ============================================================ BRIGHT WEALTH — inner-page theme ------------------------------------------------------------ Merged from the former theme-v2.css and apple-refresh.css. Those two files were adjacent on every page, so concatenating them in the same order reproduces the cascade byte-for-byte. Loaded AFTER story.css so it overrides it. REBUILT 18 Aug 2026 from the clean originals after an automated dead-rule pass corrupted comment terminators in this file. ============================================================ */ /* ---------- part 1: base theme (was theme-v2.css) ---------- */ /* ============================================================ BRIGHT WEALTH — 2026 visual system Loaded AFTER story.css and assets/home.css so it overrides both. Adapted from the ChatGPT build's theme, with one significant change: that version styled only the inner pages, leaving the homepage on a separate stylesheet and a different typeface. Every rule below is written to cover BOTH class vocabularies, so the whole site moves together: inner pages : .page-prologue .story-section .tile .btn-glow homepage : .hero .sec .card .btn-primary ============================================================ */ :root { /* Deeper ink and a richer magenta than the original palette */ --ink-deep: #17152c; --ink: #242047; --ink-soft: #302a5c; --paper: #ffffff; --paper-warm: #ffffff; --paper-dim: rgba(255,255,255, 0.80); --paper-faint:rgba(255,255,255, 0.74); --glow: #c72f63; --glow-deep: #a92452; --glow-soft: #ec779e; --serif: "Newsreader", Georgia, "Times New Roman", serif; --grot: "DM Sans", "Segoe UI", system-ui, sans-serif; --sans: var(--grot); } body { background: var(--ink-deep); font-family: var(--grot); } h1, h2, h3, blockquote { font-family: var(--serif); letter-spacing: -0.025em; }/* ---------- Top bar ---------- The ChatGPT theme made this a near-solid 84px band (rgba(23, 21, 44, that band sat exactly where the heads are in the homepage photo and cut them off. Restored to the original fade — solid enough to keep the nav legible, transparent by the bottom edge so the photograph reads through. */ .bar { min-height: 84px; padding: 12px clamp(22px, 5vw, 74px); background: linear-gradient(to bottom, rgba(23,21,44,0.92) 0%, rgba(23,21,44,0.72) 55%, rgba(23,21,44,0) 100%); border-bottom: none; backdrop-filter: blur(3px); } .bar .logo-img { height: auto; width: 104px; border-radius: 10px; } .foot .logo-img { height: auto; width: 118px; border-radius: 10px; } .bar-right { gap: clamp(15px, 2vw, 28px); font-size: 0.75rem; letter-spacing: 0.08em; } /* ---------- Square-edged, editorial buttons ---------- */ .bar-cta, .btn-glow, .ch-cta, .btn, .btn-primary, .btn-ghost, .btn-ghost-alt, .mobile-cta { border-radius: 0 !important; } .bar-cta, .btn-glow, .btn-primary { background: var(--glow); border-color: var(--glow); box-shadow: none; } .btn-primary:hover, .btn-glow:hover { background: var(--glow-soft); color: var(--ink-deep); } /* ---------- Heroes (both vocabularies) ---------- min-height is a floor, not a cap. The ChatGPT theme set a flat 600px, which on a wide desktop made the hero SHORTER than the original 92vh — a wider, shorter box crops more off a "cover" background, which is what cut the top off the photo. A viewport-relative height with a sane floor and ceiling keeps the framing intact on laptops and very large monitors alike. */ .page-prologue, .hero { min-height: clamp(600px, 88vh, 900px); padding-top: 150px; }/* Heading scale. The ChatGPT theme set h1 to 6.6rem, which rendered at 111-118px on a desktop against 18px body copy — a ratio of about 6.5:1. Display type that large reads as a consumer brand shouting; professional-services convention sits nearer 3-4:1, which is only comfortable at very large sizes and looks cramped at these. */ .page-prologue h1, .hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.06; letter-spacing: -0.02em; } .page-prologue .kicker, .head-kicker, .eyebrow { letter-spacing: 0.19em; font-size: 0.75rem; } .page-prologue .sub, .hero .sub { max-width: 55ch; color: rgba(255,255,255,0.74); font-size: 1.06rem; } /* ---------- Section rhythm ---------- */ .story-section, .sec { padding-top: clamp(80px, 9vw, 136px); padding-bottom: clamp(80px, 9vw, 136px); } /* h2 kept a clear step below h1 without competing with it */ .story-section h2, .sec h2 { font-size: clamp(1.75rem, 3.1vw, 2.6rem); line-height: 1.14; letter-spacing: -0.015em; } .epilogue-cta h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.1; } /* ---------- Cards and panels: square, editorial ---------- */ .tile, .author, .support, .ledger-row, .chapter-block, .calc-note, .calc-result, .inp, .card, .step, .vow, .keypoints, .ask-box, .map-box, .review, .rev-slide, .f-field input, .f-field textarea, .f-field select { border-radius: 0 !important; } .tile, .card { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.035); } .tile:hover, .card:hover { transform: translateY(-4px); border-color: var(--glow); } .chapter-block { border-top: 1px solid rgba(255,255,255,0.18); } .cb-no { color: var(--glow-soft); } .moment .dot, .step .no::before { background: var(--glow); } /* Monograms stay circular — squaring them looks like a rendering fault */ .author .initials { border-radius: 50% !important; border-color: rgba(199,47,99,0.55); } /* ---------- Calculators ---------- */ .tabs { gap: 8px !important; } .tab-btn { border-radius: 0 !important; } .calc-result { background: var(--paper-warm) !important; color: var(--ink-deep) !important; } .calc-result .res span { color: rgba(23,21,44,0.62) !important; } /* ---------- Testimonials (kept from the Claude build) ---------- */ .trust-stats b { color: var(--glow-soft); } .review .stars { color: var(--glow-soft); letter-spacing: 0.08em; } .rev-slide .review { border-color: rgba(255,255,255,0.16); } /* ---------- Closing CTA and footer ---------- */ .epilogue-cta { background: var(--glow); } .epilogue-cta h2 em { color: var(--ink-deep); } .epilogue-cta p { color: rgba(23,21,44,0.78); } .epilogue-cta .btn-glow { background: var(--ink-deep); border-color: var(--ink-deep); } .foot { background: #100e1f; } /* ---------- Mobile ---------- */ @media (max-width: 820px) { .bar { min-height: 74px; } .bar-right { top: 74px; right: 16px; background: var(--ink); border-radius: 0; } .page-prologue, .hero { min-height: clamp(480px, 74vh, 640px); padding-top: 124px; } /* On a narrow screen "cover" scales the photo up hard and the subject rides high, so nudge it down a touch to clear the mobile nav. */ .hero { background-position: center, center 12%, center bottom, center; } } /* ============================================================ READABILITY — tuned for clients approaching or in retirement. The audience skews 55+, so body text sizes up, contrast goes up, and tap targets meet the 44px WCAG 2.5.5 minimum. ============================================================ */ /* Base type up from 16px. Everything using rem scales with it. */ html { font-size: 17.5px; } @media (min-width: 1100px) { html { font-size: 18px; } } body { line-height: 1.75; } /* Dim greys were the weakest point for contrast. These now clear WCAG AA (4.5:1) against the deep ink background. */ :root { --paper-dim: rgba(255,255,255, 0.90); --paper-faint: rgba(255,255,255, 0.74); } .tile p, .vow p, .support p, .author p, .ledger-row p, .cb-body > p, .story-section .intro, .muted { color: var(--paper-dim); } .smallprint, .reg, .map-note, .disclaimer { color: rgba(255,255,255,0.72); } .reg { font-size: 0.84rem; } /* Body copy is easier to track when lines are shorter */ .article-body > p, .article-body li { font-size: 1.06rem; } /* Tap targets: WCAG 2.5.5 asks for 44x44 minimum */ .bar-right a, .foot nav a, .faq-q, .tab-btn, .btn, .btn-glow, .btn-ghost, .ch-cta { min-height: 44px; display: inline-flex; align-items: center; } .foot nav a { padding: 4px 0; } .faq-q { padding-top: 22px; padding-bottom: 22px; font-size: 1.08rem; } /* Form fields large enough to read and to stop iOS zooming on focus */ .f-field input, .f-field textarea, .f-field select { font-size: 1rem; min-height: 50px; } .f-field label { font-size: 0.75rem; } .consent { font-size: 0.9rem; } .consent input { width: 22px; height: 22px; } /* Obvious keyboard focus, and underlined links in body copy so colour is not the only thing distinguishing them (WCAG 1.4.1) */ :focus-visible { outline: 3px solid var(--glow-soft); outline-offset: 3px; } .article-body a, .legal-body a, .faq-a a { text-decoration: underline; } /* Respect a reduced-motion preference — the carousel and reveals can be uncomfortable for some readers */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .fade { opacity: 1 !important; transform: none !important; } } /* ---------- Print: older clients print pages to read properly ---------- */ @media print { .bar, .mobile-cta, .bar-cta, .map-box, .epilogue-cta a, .btn, .btn-glow, .btn-ghost, .menu-toggle, .reviews-carousel { display: none !important; } html { font-size: 12pt; } body { background: #fff !important; color: #000 !important; } .page-prologue, .hero, .story-section, .sec, .foot, .has-bg::before { background: none !important; min-height: auto !important; padding: 12pt 0 !important; color: #000 !important; } h1, h2, h3, p, li, .intro, .muted, .reg { color: #000 !important; } a { color: #000 !important; text-decoration: underline; } /* Print the destination of links, since a printed page has no hover */ .article-body a::after, .legal-body a::after { content: " (" attr(href) ")"; font-size: 9pt; } .fade { opacity: 1 !important; transform: none !important; } .faq-a { max-height: none !important; overflow: visible !important; } section, .chapter-block, .faq-item { page-break-inside: avoid; } } /* The cream and the warm cream are now both white, so light sections no longer alternate. A hairline keeps adjacent white blocks visually separate. */ .sec-light, .sec-warm { background: #ffffff; color: var(--ink-deep); } .sec-light + .sec-warm, .sec-warm + .sec-light, .sec-light + .sec-light, .sec-warm + .sec-warm { border-top: 1px solid rgba(23,21,44,0.10); } /* Text on white must be blue, never grey-on-grey */ .sec-light, .sec-warm, .sec-light p, .sec-warm p, .sec-light h2, .sec-warm h2, .sec-light h3, .sec-warm h3 { color: var(--ink-deep); } .sec-light .muted, .sec-warm .muted { color: rgba(23,21,44,0.76); } .sec-light .eyebrow, .sec-warm .eyebrow { color: var(--glow-deep); } /* 5.9:1 on white */ .sec-light .card, .sec-warm .card { background: rgba(23,21,44,0.03); border-color: rgba(23,21,44,0.14); } .sec-light .card p, .sec-warm .card p { color: rgba(23,21,44,0.78); } .sec-light .card .go, .sec-warm .card .go { color: var(--glow-deep); } .sec-light .review, .sec-warm .review { border-color: rgba(23,21,44,0.14); } .sec-light .review p, .sec-warm .review p { color: rgba(23,21,44,0.82); } .sec-light cite, .sec-warm cite { color: rgba(23,21,44,0.62); } .sec-light .stars, .sec-warm .stars { color: var(--glow); } .sec-light .trust-stats b, .sec-warm .trust-stats b { color: var(--glow-deep); } .sec-light .trust-stats span, .sec-warm .trust-stats span { color: rgba(23,21,44,0.68); } /* Closing CTA sits on magenta. Deep blue on magenta is only 3.4:1 — fine for the big heading, but it fails for body text, so that goes white (5.2:1). */ .epilogue-cta { background: var(--glow); color: #ffffff; } .epilogue-cta h2, .epilogue-cta h2 em { color: #ffffff; } .epilogue-cta p { color: rgba(255,255,255,0.94); } .epilogue-cta .btn-glow { background: var(--ink-deep); border-color: var(--ink-deep); color: #ffffff; } .epilogue-cta .btn-glow:hover { background: #ffffff; color: var(--ink-deep); } /* Four-vows panel also sits on magenta; the numerals and dividers are white at reduced opacity rather than a second colour, which keeps WCAG AA. NOTE: this background rule was previously lost inside a malformed comment, so the panel rendered dark instead of magenta. Restored. */ .vows-panel { background: var(--glow); } .vows-panel .head-kicker { color: rgba(255,255,255,0.88); } .vows-panel h2, .vows-panel h2 em { color: #ffffff; } .vows-panel .vow { border-top: 1px solid rgba(255,255,255,0.38); } .vows-panel .vow .v-no { color: rgba(255,255,255,0.80); } .vows-panel .vow h3 { color: #ffffff; } .vows-panel .vow p { color: rgba(255,255,255,0.94); } /* ============================================================ LIGHT READING PANELS ------------------------------------------------------------ Why: roughly 1 in 3 to 1 in 2 adults have some astigmatism, and in dark mode the dilated pupil scatters light around bright text ("halation"), making it fuzzy. The effect worsens with age — and this firm's clients are mostly 55+. The advantage of dark-text-on-light also accumulates over long reading sessions, which is exactly what the services, FAQ, privacy and article pages ask of people. So: blue stays the brand anchor for heroes, short emotive sections and the footer, where it does its trust job. Anywhere someone has to READ for more than a few seconds now sits on white. ============================================================ */ .panel-light { background: #ffffff; color: var(--ink-deep); } .panel-light h1, .panel-light h2, .panel-light h3, .panel-light h4, .panel-light b, .panel-light strong, .panel-light cite { color: var(--ink-deep); } .panel-light h2 em, .panel-light h1 em { color: var(--glow-deep); } .panel-light p, .panel-light li, .panel-light span, .panel-light div { color: rgba(23,21,44,0.84); } .panel-light .head-kicker, .panel-light .eyebrow, .panel-light .kicker { color: var(--glow-deep); } .panel-light .intro, .panel-light .muted { color: rgba(23,21,44,0.80); } .panel-light .smallprint, .panel-light .assump, .panel-light .disclaimer { color: rgba(23,21,44,0.66); } .panel-light .assump { border-left-color: rgba(23,21,44,0.18); } /* Cards, tiles and panels on white */ .panel-light .tile, .panel-light .card, .panel-light .author, .panel-light .support, .panel-light .vow, .panel-light .keypoints { background: rgba(23,21,44,0.025); border-color: rgba(23,21,44,0.14); } .panel-light .tile { border-top-color: rgba(23,21,44,0.16); } .panel-light .tile p, .panel-light .card p, .panel-light .author p, .panel-light .support p, .panel-light .vow p { color: rgba(23,21,44,0.78); } .panel-light .tile:hover, .panel-light .card:hover { background: rgba(199,47,99,0.05); border-color: var(--glow); } .panel-light .t-kicker, .panel-light .t-foot, .panel-light .go, .panel-light .cb-age, .panel-light .role, .panel-light .cred-label, .panel-light .v-no, .panel-light .l-no, .panel-light .cb-no { color: var(--glow-deep); } .panel-light .cb-no { -webkit-text-stroke: 1px rgba(23,21,44,0.30); color: transparent; } .panel-light .cb-quote, .panel-light .tenure { color: rgba(23,21,44,0.72); } .panel-light .quals { color: rgba(23,21,44,0.62); } /* Structural lines */ .panel-light .chapter-block, .panel-light .ledger, .panel-light .ledger-row, .panel-light .faq-item, .panel-light .reg, .panel-light hr { border-color: rgba(23,21,44,0.16); } .panel-light .moments { border-left-color: rgba(23,21,44,0.16); } .panel-light .moment:hover { background: rgba(199,47,99,0.06); } .panel-light .moment span { color: rgba(23,21,44,0.72); } .panel-light .author .cred { border-top-color: rgba(23,21,44,0.16); } .panel-light .author .initials { border-color: rgba(199,47,99,0.55); color: var(--glow-deep); } .panel-light .tags span { background: rgba(23,21,44,0.05); border-color: rgba(23,21,44,0.16); color: rgba(23,21,44,0.82); } .panel-light .support h4::before { background: var(--glow); } /* FAQ on white */ .panel-light .faq-q { color: var(--ink-deep); } .panel-light .faq-q .chev { color: var(--glow-deep); } .panel-light .faq-a p { color: rgba(23,21,44,0.82); } /* Ticks and crosses */ .panel-light .next-list .n { color: rgba(23,21,44,0.84); } .panel-light .tick { color: var(--glow-deep); } /* Links must stay obvious on white */ .panel-light a { color: var(--glow-deep); } .panel-light a:hover { color: var(--ink-deep); } /* Forms on white — light backgrounds measurably help form completion */ .panel-light .f-field label { color: rgba(23,21,44,0.62); } .panel-light .f-field input, .panel-light .f-field textarea, .panel-light .f-field select { background: #ffffff; border-color: rgba(23,21,44,0.28); color: var(--ink-deep); } .panel-light .f-field input:focus, .panel-light .f-field textarea:focus, .panel-light .f-field select:focus { border-color: var(--glow); } .panel-light .consent { color: rgba(23,21,44,0.78); } .panel-light .c-details { border-left-color: rgba(23,21,44,0.16); } .panel-light .c-details p { color: rgba(23,21,44,0.82); } .panel-light .c-details a { color: var(--ink-deep); border-bottom-color: rgba(199,47,99,0.55); } .panel-light .d-label { color: var(--glow-deep); } /* Article body on white */ .panel-light .article-body > p, .panel-light .article-body li { color: rgba(23,21,44,0.86); } .panel-light .article-lede { color: var(--ink-deep) !important; } .panel-light .article-note { color: rgba(23,21,44,0.68); border-left-color: var(--glow); } .panel-light .back-link { color: rgba(23,21,44,0.62); } /* Map placeholder on white */ .panel-light .map-box { background: rgba(23,21,44,0.04); border-color: rgba(23,21,44,0.16); } .panel-light .map-addr { color: var(--ink-deep); } .panel-light .map-note { color: rgba(23,21,44,0.66); } /* Ghost buttons need a visible edge on white */ .panel-light .btn-ghost, .panel-light .btn-ghost-alt { border-color: rgba(23,21,44,0.32); color: var(--ink-deep); } /* Solid-fill buttons inside a light panel: `.panel-light a` (0,2,0) outranks `.btn-glow` (0,1,0), which painted magenta text onto the magenta fill. These rules restore white-on-magenta and must stay at this specificity. */ .panel-light .btn-glow, .panel-light .btn-primary, .panel-light .bar-cta { color: #ffffff; } .panel-light .btn-glow:hover, .panel-light .btn-primary:hover { color: var(--ink-deep); } .panel-light .btn-ghost:hover, .panel-light .btn-ghost-alt:hover { border-color: var(--glow); background: rgba(199,47,99,0.07); } .panel-light .ch-cta { color: var(--glow-deep); border-bottom-color: var(--glow); } /* Two light panels in a row need a hairline between them */ .panel-light + .panel-light { border-top: 1px solid rgba(23,21,44,0.12); } /* A light band wrapping a max-width
needs its own vertical padding, otherwise the first and last chapters butt against the colour change. */ div.panel-light > main.wrap { padding-top: clamp(50px, 6vw, 90px); padding-bottom: clamp(50px, 6vw, 90px); } /* ---------- Calculator components on a light panel ---------- The calculator's own styles assume a dark background — translucent white fills and pale text, both of which disappear on white. Research on form-filling specifically found dark mode had a negative effect on older users, and this is the page where clients concentrate hardest, so the panel goes light and these components follow it. */ .panel-light .calc-note { background: rgba(199,47,99,0.06); border-color: rgba(199,47,99,0.45); color: rgba(23,21,44,0.84); } .panel-light .calc-note strong { color: var(--ink-deep); } .panel-light .tab-btn { background: rgba(23,21,44,0.05); border-color: rgba(23,21,44,0.22); color: rgba(23,21,44,0.78); } .panel-light .tab-btn:hover { border-color: var(--glow); color: var(--ink-deep); } .panel-light .tab-btn.active { background: var(--glow); border-color: var(--glow); color: #ffffff; } .panel-light .calc-panel h2 { color: var(--ink-deep); } .panel-light .calc-panel .lede { color: rgba(23,21,44,0.80); } .panel-light .calc-field label { color: rgba(23,21,44,0.62); } .panel-light .calc-field .inp { background: #ffffff; border-color: rgba(23,21,44,0.28); } .panel-light .calc-field .inp:focus-within { border-color: var(--glow); } .panel-light .calc-field input, .panel-light .calc-field select { color: var(--ink-deep); } .panel-light .calc-field .inp .pre { color: rgba(23,21,44,0.60); } .panel-light .calc-check { background: rgba(23,21,44,0.04); border-color: rgba(23,21,44,0.16); color: rgba(23,21,44,0.82); } /* The results bar was cream on dark; on white it needs to be the dark block so the answer still reads as the loudest thing on the page. */ .panel-light .calc-result { background: var(--ink-deep) !important; color: #ffffff !important; border-top-color: var(--glow); padding: 26px 28px; } .panel-light .calc-result .res b { color: var(--glow-soft); } .panel-light .calc-result .res span { color: rgba(255,255,255,0.74) !important; } .panel-light .assump { color: rgba(23,21,44,0.66); border-left-color: rgba(23,21,44,0.20); } .panel-light .assump strong { color: var(--ink-deep); } /* ---------- Light-panel fixes: specificity ---------- Several rules in story.css are more specific than the generic .panel-light overrides above, so they were still painting near-white text onto the white panels — invisible. Reported on the About team block (qualifications and memberships). These match or exceed the original specificity. */ .panel-light .author h3 .quals { color: rgba(23,21,44,0.62); } .panel-light .author .cred li { color: rgba(23,21,44,0.84); } .panel-light .author .cred-label { color: var(--glow-deep); } .panel-light .author .role { color: var(--glow-deep); } .panel-light .author .tenure { color: var(--glow-deep); } .panel-light .author p { color: rgba(23,21,44,0.80); } .panel-light .next-list .n { color: rgba(23,21,44,0.84); } .panel-light .tile .t-foot { color: var(--glow-deep); } .panel-light .f-field label { color: rgba(23,21,44,0.62); } .panel-light .faq-q { color: var(--ink-deep); } .panel-light .support h4 { color: var(--ink-deep); } .panel-light .support p { color: rgba(23,21,44,0.80); } .panel-light .ch-cta:hover { color: var(--ink-deep); } /* ---------- Contact hero ---------- That photograph is 2.5:1 — far wider than the other heroes. Matching the section height to the image's own proportions means almost nothing is cropped, and it avoids scaling a 1920px file up on tall screens. */ .page-prologue.bg-hero-contact { min-height: clamp(460px, 62vh, 640px); } /* ---------- Form validation feedback ---------- Colour alone is not enough (WCAG 1.4.1) and red-on-white is hard for some readers, so an invalid field gets a thick red edge, a tinted fill AND a written message above the button. */ .f-field.field-error .inp, .f-field.field-error input, .f-field.field-error textarea, .f-field.field-error select { border-color: #b3261e !important; border-width: 2px !important; background: rgba(179,38,30,0.05) !important; } .f-field.field-error label { color: #b3261e !important; font-weight: 700; } .f-field.field-error label::after { content: " — required"; font-weight: 400; letter-spacing: 0; text-transform: none; } .consent.field-error { outline: 2px solid #b3261e; outline-offset: 6px; background: rgba(179,38,30,0.05); } .consent.field-error span { color: #b3261e !important; } .consent input[type="checkbox"] { accent-color: var(--glow); } /* The consent line is a label wrapping a checkbox and text — keep them aligned now that the text is in its own span. */ .consent { display: flex; gap: 12px; align-items: flex-start; } .consent input[type="checkbox"] { flex: none; margin-top: 3px; } /* Consent links must be obvious against the white panel */ .consent a { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .panel-light .consent a { color: var(--glow-deep); } .panel-light .form-note { color: rgba(23,21,44,0.62); } /* ---------- Homepage closing CTA ---------- Every other page ends on a solid magenta block, so the homepage matches it. NOTE: this background rule was previously lost inside an unterminated comment, which left the section showing the base stylesheet's radial-gradient glow — the "mixed" look. Restored to one flat colour. */ .sec.booking { background: var(--glow); color: #ffffff; } .sec.booking h2, .sec.booking h2 em { color: #ffffff; } .sec.booking .lead { color: rgba(255,255,255,0.94); } .sec.booking .alt { color: rgba(255,255,255,0.86); } .sec.booking .alt a { color: #ffffff; border-bottom-color: rgba(255,255,255,0.6); } .sec.booking .btn-primary { background: var(--ink-deep); border-color: var(--ink-deep); color: #ffffff; } .sec.booking .btn-primary:hover { background: #ffffff; color: var(--ink-deep); } .sec.booking .btn-ghost { border-color: rgba(255,255,255,0.7); color: #ffffff; } .sec.booking .btn-ghost:hover { background: #ffffff; color: var(--ink-deep); border-color: #ffffff; } /* ---------- Mobile: the enquiry form ---------- .story-form is a two-column grid with no breakpoint, so on a phone the name/email fields were ~170px wide. Single column below 700px — and the contact page's own two-column layout stacks at 860px, so this keeps the form from being squeezed in the gap between those two widths. */ @media (max-width: 700px) { .story-form { grid-template-columns: 1fr; gap: 18px; margin-top: 34px; } } /* ---------- Retirement Living Standards table (article) ---------- */ .rls-table { margin: 28px 0; border-top: 1px solid rgba(23,21,44,0.14); } .rls-row { display: grid; grid-template-columns: 150px 210px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid rgba(23,21,44,0.10); align-items: start; } .rls-band { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--glow-deep); } .rls-fig { font-family: var(--grot); font-size: 0.95rem; line-height: 1.7; color: var(--ink-deep); } .rls-fig b { font-weight: 700; } .rls-what { font-family: var(--grot); font-size: 0.92rem; line-height: 1.65; color: rgba(23,21,44,0.78); } @media (max-width: 700px) { .rls-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; } .rls-band { font-size: 1.15rem; } } /* ══════════════════════════════════════════════════════════════ ARTICLE FURNITURE — one structure for all 15 insight articles ══════════════════════════════════════════════════════════════ */ /* Meta row under the headline: reading time + review date. */ .art-meta { margin-top: 16px; font-family: var(--grot); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.68); display: flex; gap: 12px; align-items: center; } .art-meta .sep { color: var(--glow-soft); } /* 'In short' now sits directly under the lede rather than at the foot. */ .keypoints.kp-top { margin: 0 0 34px; border-left: 3px solid var(--glow); } .panel-light .keypoints.kp-top { background: rgba(199,47,99,0.05); border: 1px solid rgba(199,47,99,0.20); border-left: 3px solid var(--glow); } .panel-light .keypoints.kp-top li { color: rgba(23,21,44,0.86); } /* Consistent rhythm so every article reads the same regardless of length. */ .article-body h2 { margin-top: 38px; } .article-body > p:last-of-type { margin-bottom: 0; } /* Related reading */ .read-next { margin-top: 52px; padding-top: 30px; border-top: 1px solid rgba(23,21,44,0.14); } .rn-title { font-family: var(--grot); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--glow-deep); margin-bottom: 18px; } .rr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .rr-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid rgba(23,21,44,0.16); background: rgba(23,21,44,0.02); text-decoration: none !important; transition: border-color .2s, transform .2s, background .2s; } .rr-card:hover, .rr-card:focus { border-color: var(--glow); background: rgba(199,47,99,0.04); transform: translateY(-2px); } .rr-k { font-family: var(--grot); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--glow-deep); } .rr-t { font-family: var(--serif); font-size: 1rem; line-height: 1.32; color: var(--ink-deep); } .rn-foot { margin-top: 20px; font-family: var(--grot); font-size: 0.9rem; color: rgba(23,21,44,0.78); } /* Reading progress — a hairline under the nav bar. Decorative only. */ #readProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--glow); z-index: 9999; transition: width .08s linear; pointer-events: none; } @media (max-width: 760px) { .rr-grid { grid-template-columns: 1fr; } .art-meta { font-size: 0.75rem; gap: 9px; } } @media (prefers-reduced-motion: reduce) { .rr-card { transition: none; } .rr-card:hover, .rr-card:focus { transform: none; } #readProgress { transition: none; } } /* ============================================================ COLOUR MOCKUP — blue / white / magenta rhythm (2026-08-01) ------------------------------------------------------------ Self-contained trial. To revert, delete everything BELOW this banner and change the one section in index.html back from `sec-payoff` to `sec-warm`. ============================================================ */ /* 1 — Dark surfaces read as NAVY BLUE, not near-black. The deepest ink (#17152c) is retained for the photographic heroes — their own gradients bottom out there — so the heroes still feel the deepest, while the flat sections and footer lift to a legible blue and "blue" finally reads as a colour. */ body { background: #242047; } /* was #17152c */ .foot { background: #1c1a3c; } /* was #100e1f */ /* 2 — Homepage "Peace of mind" section becomes a MAGENTA band. Gives magenta a second moment mid-page and breaks the run of white sections. Text goes white (clears WCAG AA on this magenta). */ .sec.sec-payoff { background: var(--glow); color: #ffffff; } .sec-payoff .sec-head .eyebrow { color: rgba(255,255,255,0.90); } .sec-payoff .sec-head h2, .sec-payoff .sec-head h2 em { color: #ffffff; } .sec-payoff .outcome { border-top-color: rgba(255,255,255,0.55); } .sec-payoff .outcome b { color: #ffffff; } .sec-payoff .outcome span { color: rgba(255,255,255,0.92); } /* ============================================================ NAV MOCKUP — tighter top-bar links + phone stacked under the "Book a free call" button (top-right). (2026-08-01) Revert: delete this block and restore the .bar-right markup in index.html. ============================================================ */ /* Right side = a compact link row + a stacked action group */ .bar-right { gap: clamp(14px, 1.6vw, 22px); } .bar-nav { display: flex; align-items: center; gap: clamp(9px, 1.1vw, 18px); flex-wrap: wrap; } .bar-nav a { letter-spacing: 0.03em; } /* was 0.08em — tighter, same size */ /* Magenta "|" divider between nav items (centred in the gap) */ .bar-nav a:not(:last-child)::after { content: "|"; color: var(--glow); margin-left: clamp(9px, 1.1vw, 18px); font-weight: 400; } /* "Book a free call" with the phone number directly beneath it */ .bar-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } .bar-actions .bar-cta { white-space: nowrap; } .bar-actions .bar-phone { min-height: 0; /* keeps the bar at its normal height */ font-size: 0.75rem; letter-spacing: 0.04em; text-transform: none; color: var(--paper-dim); white-space: nowrap; } .bar-actions .bar-phone:hover { color: var(--glow-soft); } /* Mobile dropdown: links and actions stack full-width as before */ @media (max-width: 820px) { .bar-nav { flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; } .bar-nav a::after { display: none; } /* no dividers when links stack vertically */ .bar-actions { align-items: stretch; width: 100%; gap: 10px; margin-top: 4px; } .bar-actions .bar-phone { text-align: center; } } /* ============================================================ MAGENTA STORY PANELS — reusable flat-magenta band for a .story-section. Used on Contact's "Before you send". (About's "Four promises" uses .vows-panel, fixed separately.) ============================================================ */ .story-section.panel-magenta { background: var(--glow); color: #ffffff; } .panel-magenta .head-kicker { color: rgba(255,255,255,0.88); } .panel-magenta h2, .panel-magenta h2 em, .panel-magenta h3 { color: #ffffff; } .panel-magenta p, .panel-magenta .intro { color: rgba(255,255,255,0.94); } .panel-magenta .next-list .n { color: rgba(255,255,255,0.94); } .panel-magenta .tick { color: #ffffff; } /* Hero signature line — styled to match the page kicker ("About Bright Wealth"): small, uppercase and letter-spaced rather than the serif italic. */ .hero .signature { font-family: var(--grot); font-style: normal; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.19em; text-transform: uppercase; } /* Hero — more breathing room so the stacked lines don't feel crowded */ .hero .signature { margin-bottom: 34px; } .hero h1 { line-height: 1.16; } .hero .sub { margin-top: 40px; line-height: 1.65; } .hero .cta-row { margin-top: 54px; } .hero-call { margin-top: 30px; } /* ---------- part 2: apple refresh (was apple-refresh.css) ---------- */ /* Bright Wealth — colour-led 2026 web refresh */ :root { --bw-ink:#171436; --bw-pink:#ed176f; --bw-blue:#155cbf; --bw-blue-bright:#1875f0; --bw-sky:#ccecff; --bw-lilac:#dcd4ff; --bw-peach:#ffcfb7; --bw-mint:#c9efdf; --bw-yellow:#ffe995; --bw-paper:#f5f5f7; --bw-line:rgba(23,20,54,.14); --glow:var(--bw-pink); --glow-deep:#bd0e55; --glow-soft:#ffa8ca; --ink-deep:var(--bw-ink); --ink:#25204d; --ink-soft:#342e66; --grot:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; --serif:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif; } html{font-size:16px;scroll-padding-top:58px} body{background:var(--bw-paper);font-family:var(--grot);color:var(--bw-ink);line-height:1.55} h1,h2,h3,blockquote{font-family:var(--serif);font-style:normal;letter-spacing:-.045em} h1 em,h2 em,h3 em{font-style:normal!important} ::selection{background:var(--bw-pink);color:#fff} /* Compact Apple-style glass navigation. */ .bar{ position:sticky!important;top:0;left:0;right:0;z-index:100;min-height:52px!important;height:52px; display:flex!important;align-items:center!important;gap:18px!important; padding:0 max(22px,calc((100vw - 1340px)/2))!important;background:rgba(255,255,255,.84)!important; border-bottom:1px solid rgba(0,0,0,.06)!important;backdrop-filter:saturate(180%) blur(22px)!important; transition:background .35s ease,box-shadow .35s ease,transform .35s ease; } .bar.apple-scrolled{background:rgba(255,255,255,.94)!important;box-shadow:0 8px 28px rgba(21,17,58,.08)} .bar .wordmark{width:96px!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:flex-start;overflow:hidden;flex:none;border-radius:0!important} .bar .logo-img{width:88px!important;height:34px!important;max-width:88px!important;object-fit:contain!important;object-position:center!important;border-radius:0!important;margin:0!important} .bar-right{display:none!important} .bar-nav{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.7vw,25px);flex-wrap:nowrap;font-size:12px!important;letter-spacing:0!important;text-transform:none!important} .bar-nav-desktop{flex:1} .bar-right a,.bar-nav a{color:#26252b!important;min-height:44px;display:inline-flex;align-items:center;font-weight:450;position:relative} .bar-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:7px;height:2px;background:var(--bw-pink);transition:right .3s ease} .bar-nav a:hover:after,.bar-nav a.here:after{right:0} .bar-cta{min-height:34px!important;padding:0 16px!important;border:0!important;border-radius:999px!important;background:var(--glow-deep)!important;color:#fff!important;font-size:12px!important;font-weight:600!important;box-shadow:none!important} .bar-cta:hover{background:#991044!important;transform:translateY(-1px)} .menu-toggle{display:none!important;width:24px;height:22px;padding:0!important;border:0!important;background:none!important;position:relative;color:var(--bw-ink)!important} .menu-toggle i{position:absolute;left:2px;width:20px;height:1px;background:#000;transition:transform .2s,top .2s}.menu-toggle i:first-child{top:7px}.menu-toggle i:last-child{top:14px}.menu-toggle[aria-expanded="true"] i:first-child{top:11px;transform:rotate(45deg)}.menu-toggle[aria-expanded="true"] i:last-child{top:11px;transform:rotate(-45deg)} /* The exact homepage header, shared by every inner page. */ .site-header{position:sticky;top:0;z-index:100;height:52px;background:rgba(255,255,255,.84);backdrop-filter:saturate(180%) blur(24px);border-bottom:1px solid rgba(0,0,0,.07)} .nav-shell{width:min(1340px,100%);height:52px;margin:auto;padding:0 22px;display:flex;align-items:center;gap:18px} .site-header .wordmark{width:88px;height:34px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;background:transparent} .site-header .logo-img{width:88px!important;height:34px!important;max-width:88px!important;object-fit:contain;transform:none;margin:0!important} .nav-links{display:flex;justify-content:center;align-items:center;gap:clamp(12px,1.7vw,25px);flex:1} .nav-links a{min-height:0!important;font-size:12px;font-weight:500;color:#29292b!important;transition:opacity .2s}.nav-links a:hover{opacity:.5} .nav-cta{min-height:34px;display:inline-flex;align-items:center;justify-content:center;background:var(--glow-deep);color:#fff!important;border-radius:999px;padding:0 16px;font-size:12px;line-height:1.5;font-weight:600} .menu-button{display:none;border-radius:8px} .promo-bar{min-height:48px;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 20px;text-align:center;font-size:13px;line-height:1.4;color:#3f3f46;background:#fff} .promo-bar a{color:var(--bw-blue)!important}.promo-bar a span{font-size:18px;vertical-align:-1px} /* Full-colour, image-led hero panels. */ .page-prologue,.hero{ min-height:clamp(620px,90vh,900px)!important;padding:130px 6vw 90px!important; border-bottom:12px solid #fff;isolation:isolate;overflow:hidden;color:#fff!important; } .page-prologue:after,.hero:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 12%,rgba(255,255,255,.2),transparent 42%)} .page-prologue>div,.hero>div{position:relative;z-index:2} .page-prologue .kicker,.hero .signature{font-family:var(--grot)!important;font-style:normal!important;font-weight:650!important;letter-spacing:0!important;text-transform:none!important;font-size:17px!important;color:#fff!important;margin-bottom:14px!important} .page-prologue h1,.hero h1{font-size:clamp(46px,7vw,92px)!important;line-height:.94!important;font-weight:700!important;letter-spacing:-.065em!important;max-width:16ch!important;text-wrap:balance;color:#fff!important} .page-prologue h1 em,.hero h1 em{color:#ffd6e6!important} .page-prologue .sub,.hero .sub{font-size:clamp(17px,2vw,23px)!important;line-height:1.35!important;max-width:62ch!important;color:rgba(255,255,255,.92)!important} .hero-call{color:rgba(255,255,255,.86)!important}.hero-call a{color:#fff!important} .btn,.btn-glow,.btn-primary,.btn-ghost,.ch-cta,.mobile-cta{border-radius:999px!important;letter-spacing:0!important;text-transform:none!important;font-family:var(--grot)!important;font-weight:600!important} .btn-primary,.btn-glow,.ch-cta{background:#fff!important;border-color:#fff!important;color:var(--bw-ink)!important;box-shadow:none!important;padding:13px 22px!important} .btn-primary:hover,.btn-glow:hover,.ch-cta:hover{background:#f1f1f3!important;color:#000!important;transform:translateY(-2px)} .btn-ghost{border-color:rgba(255,255,255,.78)!important;color:#fff!important;padding:12px 21px!important} .hero{background:linear-gradient(180deg,rgba(65,16,73,.1),rgba(33,15,59,.42)),image-set(url('images/hero-home.webp') type('image/webp'),url('images/hero-home.jpg') type('image/jpeg')) center calc(48% + var(--hero-shift,0px))/cover no-repeat,linear-gradient(135deg,#6f1d63,#bd0e55)!important} .bg-hero-about{background:linear-gradient(180deg,rgba(18,22,70,.48),rgba(36,14,68,.76)),image-set(url('images/hero-about.webp') type('image/webp'),url('images/hero-about.jpg') type('image/jpeg')) center calc(50% + var(--hero-shift,0px))/cover no-repeat,linear-gradient(135deg,#386ce0,#9357f3)!important} .bg-hero-services{background:linear-gradient(180deg,rgba(8,29,76,.42),rgba(18,19,58,.72)),image-set(url('images/hero-services.webp') type('image/webp'),url('images/hero-services.jpg') type('image/jpeg')) center calc(50% + var(--hero-shift,0px))/cover no-repeat,linear-gradient(135deg,#168ae4,#6dc9f4)!important} .bg-hero-retirement{background:linear-gradient(180deg,rgba(48,18,75,.4),rgba(28,12,58,.76)),image-set(url('images/bg-markets.webp') type('image/webp'),url('images/bg-markets.jpg') type('image/jpeg')) center calc(50% + var(--hero-shift,0px))/cover no-repeat,linear-gradient(135deg,#5e36c7,#bd0e55)!important} .bg-hero-calculators{background:linear-gradient(180deg,rgba(42,18,78,.42),rgba(65,18,54,.76)),image-set(url('images/hero-calculators.webp') type('image/webp'),url('images/hero-calculators.jpg') type('image/jpeg')) center calc(50% + var(--hero-shift,0px))/cover no-repeat,linear-gradient(135deg,#6d37df,#bd0e55)!important} .bg-hero-insights{background:linear-gradient(180deg,rgba(8,34,75,.36),rgba(18,15,58,.76)),image-set(url('images/hero-insights.webp') type('image/webp'),url('images/hero-insights.jpg') type('image/jpeg')) center calc(50% + var(--hero-shift,0px))/cover no-repeat,linear-gradient(135deg,#0b92df,#682ad3)!important} .bg-hero-contact{background:linear-gradient(180deg,rgba(35,13,70,.38),rgba(62,10,55,.76)),image-set(url('images/hero-contact.webp') type('image/webp'),url('images/hero-contact.jpg') type('image/jpeg')) center calc(50% + var(--hero-shift,0px))/cover no-repeat,linear-gradient(135deg,#6d37df,#bd0e55)!important} .bg-hero-privacy{background:linear-gradient(145deg,#191643 0,#5034ad 48%,#208be5 100%)!important} .page-prologue:not([class*="bg-hero-"]){background:linear-gradient(145deg,#171436 0,#6433c8 48%,#bd0e55 100%)!important} /* Large colour panels and cards. */ .panel-light,.sec-light,.sec-warm{background:#fff!important;color:var(--bw-ink)!important} .panel-light .btn-ghost-alt,.panel-light a.btn-ghost-alt{color:var(--bw-ink)!important;border:1px solid rgba(23,20,54,.3)!important;background:transparent!important} .story-section,.sec{padding-top:clamp(80px,9vw,135px)!important;padding-bottom:clamp(80px,9vw,135px)!important} .story-section h2,.sec h2{font-size:clamp(38px,5.5vw,72px)!important;line-height:.98!important;font-weight:680!important;letter-spacing:-.055em!important} .story-section h2 em,.sec h2 em{color:var(--bw-pink)!important} .head-kicker,.eyebrow{font-family:var(--grot)!important;letter-spacing:0!important;text-transform:none!important;font-size:14px!important;font-weight:650!important;color:var(--glow-deep)!important} .intro,.muted{font-size:clamp(17px,1.7vw,21px)!important;line-height:1.5!important} .story-section:not(.vows-panel) p,.story-section:not(.vows-panel) li,.story-section:not(.vows-panel) .intro,.panel-light p,.panel-light li,.sec-light p,.sec-light li,.sec-warm p,.sec-warm li,.chapter-block p,.chapter-block li,.faq-a p{color:rgba(23,20,54,.82)!important} .cards,.tile-grid,.authors,.support-grid{gap:14px!important} .card,.tile,.author,.support,.review,.rev-slide .review,.ask-box,.map-box,.calc-result,.calc-note{ border:0!important;border-radius:28px!important;background:linear-gradient(145deg,#ffd9e8,#fff5f9)!important; box-shadow:none!important;overflow:hidden;transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease!important; } .card:nth-child(3n+2),.tile:nth-child(3n+2),.author:nth-child(2n){background:linear-gradient(145deg,#d5eaff,#f5faff)!important} .card:nth-child(3n),.tile:nth-child(3n){background:linear-gradient(145deg,#ddd6ff,#f7f5ff)!important} .card:hover,.tile:hover,.author:hover,.review:hover{transform:translateY(-8px) scale(1.01)!important;box-shadow:0 24px 55px rgba(29,23,70,.13)!important} .card p,.tile p,.author p,.support p,.muted{color:rgba(23,20,54,.75)!important} .card .ic{background:#fff!important;color:var(--bw-pink)!important;border-radius:50%!important} .card .go,.tile .t-foot{color:var(--bw-blue)!important;text-transform:none!important;letter-spacing:0!important;font-weight:600!important} .vows-panel{margin:12px;background:linear-gradient(145deg,#bd0e55,#6c278c)!important;border-radius:34px;color:#fff!important} .vows-panel *{color:#fff!important}.vows-panel h2,.vows-panel h2 em{color:#fff!important;-webkit-text-fill-color:#fff!important}.vows-panel .vow{border-color:rgba(255,255,255,.35)!important} .fit,.calc-sec,.booking,.epilogue-cta{margin:12px;border-radius:34px;overflow:hidden} .fit{background:linear-gradient(145deg,rgba(32,35,98,.88),rgba(227,22,112,.8)),image-set(url('images/bg-meeting.webp') type('image/webp'),url('images/bg-meeting.jpg') type('image/jpeg')) center/cover!important}.fit,.fit h2,.fit h2 em,.fit p,.fit li,.fit .eyebrow{color:#fff!important} .calc-sec{background:linear-gradient(145deg,rgba(25,20,70,.9),rgba(93,41,211,.8)),image-set(url('images/bg-coins.webp') type('image/webp'),url('images/bg-coins.jpg') type('image/jpeg')) center/cover!important}.calc-sec,.calc-sec h2,.calc-sec h2 em,.calc-sec p,.calc-sec label,.calc-sec output{color:#fff!important} .booking,.epilogue-cta{background:linear-gradient(145deg,#bd0e55,#6c278c)!important;color:#fff!important} .epilogue-cta h2,.epilogue-cta h2 em,.epilogue-cta p,.booking h2,.booking h2 em,.booking p{color:#fff!important} .chapter-block{margin:14px 0;padding:clamp(45px,7vw,90px)!important;border:0!important;border-radius:32px!important;background:linear-gradient(145deg,#fff,#f7f6fb)!important} .chapter-block:nth-child(4n+1){background:linear-gradient(145deg,#ffd9e8,#fff7fa)!important}.chapter-block:nth-child(4n+2){background:linear-gradient(145deg,#d7ebff,#f7fbff)!important}.chapter-block:nth-child(4n+3){background:linear-gradient(145deg,#e0d9ff,#faf8ff)!important}.chapter-block:nth-child(4n){background:linear-gradient(145deg,#ffdfcd,#fff8f3)!important} .cb-no{color:var(--bw-pink)!important;-webkit-text-stroke:0!important;font-style:normal!important;font-weight:750!important}.cb-age,.cb-flag{color:var(--bw-pink)!important}.moment{border-radius:14px!important}.moment:hover{background:rgba(255,255,255,.72)!important;transform:translateX(6px)!important}.moment span{color:rgba(23,20,54,.72)!important}.moments{border-color:rgba(23,20,54,.14)!important} .ch-cta{display:inline-flex!important;margin-top:28px!important;background:var(--bw-ink)!important;color:#fff!important;border:0!important}.ch-cta:hover{background:#302a65!important;color:#fff!important} .tabs{padding:8px!important;border-radius:999px!important;background:#ececf1!important}.tab-btn{border:0!important;border-radius:999px!important}.tab-btn.active{background:var(--bw-ink)!important;color:#fff!important} .calculator-shell,.faq-list,.legal-body,.article-body,.contact-grid{color:var(--bw-ink)} .faq-item{margin:0 0 12px!important;padding:0 24px!important;border:1px solid var(--bw-line)!important;border-radius:20px!important;background:#fff!important;color:var(--bw-ink)!important;box-shadow:0 10px 30px rgba(23,20,54,.045)} .faq-item:nth-child(even){background:#faf8ff!important}.faq-q,.faq-q span{color:var(--bw-ink)!important}.faq-q{background:transparent!important}.faq-q .chev{color:var(--bw-pink)!important}.faq-a,.faq-a p{color:rgba(23,20,54,.82)!important}.faq-a a{color:var(--bw-blue)!important} .network-logos{gap:18px!important}.network-logos a{min-width:220px;min-height:112px;padding:22px 30px;display:grid;place-items:center;background:#fff!important;border:1px solid var(--bw-line);border-radius:24px;box-shadow:0 16px 45px rgba(23,20,54,.08)}.network-logos img{height:64px!important;width:auto!important;filter:brightness(0)!important;opacity:1!important} .article-body{max-width:760px!important;margin:0 auto;padding:95px 24px!important}.article-body h2,.legal-body h2{color:var(--bw-ink)!important;font-size:clamp(28px,4vw,46px)!important}.article-body p,.article-body li,.legal-body p,.legal-body li{color:rgba(23,20,54,.82)!important} .keypoints{background:linear-gradient(145deg,#d9edff,#f4faff)!important;border:0!important;border-radius:24px!important} .bar .logo-img,.site-header .logo-img{border-radius:0!important} .logo-img{border-radius:10px!important} .foot{background:var(--bw-ink)!important;color:#bcb9ce!important;border:0!important;padding:75px max(24px,calc((100vw - 1100px)/2)) 32px!important;font-size:12px!important;line-height:1.5!important} .foot .footer-main{display:grid;grid-template-columns:1fr 1fr;padding-bottom:60px} .foot .footer-brand .logo-img{width:150px!important;height:auto!important;filter:none!important;margin-bottom:20px;border-radius:12px!important} .foot .footer-brand p{max-width:350px;line-height:1.5;margin:0!important;color:#bcb9ce!important}.foot .footer-brand>a{color:#fff!important;font-size:17px} .foot .footer-links{display:grid;grid-template-columns:1fr 1fr}.foot .footer-links b,.foot .footer-links a{display:block;margin-bottom:12px}.foot .footer-links b{color:#fff}.foot .footer-links a{color:#bcb9ce!important}.foot .footer-links a:hover{color:#fff!important} .foot .regulatory{border-top:1px solid #4a4667;padding-top:22px;line-height:1.5}.foot .regulatory p{color:#bcb9ce!important;margin:0!important}.foot .regulatory>div{display:flex;justify-content:space-between;border-top:1px solid #4a4667;margin-top:18px;padding-top:18px}.foot .regulatory a{color:#fff!important} /* Apple-like scroll and image motion. JS adds the state classes. */ .apple-panel{opacity:.72;transform:translateY(42px) scale(.99);transition:opacity .72s cubic-bezier(.2,.8,.2,1),transform .72s cubic-bezier(.2,.8,.2,1)} .apple-panel.apple-visible{opacity:1;transform:none} .apple-panel img{transform:scale(1.035);transition:transform 1.25s cubic-bezier(.2,.8,.2,1)} .apple-panel.apple-visible img{transform:scale(1)} .page-prologue h1,.hero h1{animation:appleHeroIn 1s .12s cubic-bezier(.2,.8,.2,1) both}.page-prologue .sub,.hero .sub,.page-prologue .kicker,.hero .signature{animation:appleHeroIn .9s .24s cubic-bezier(.2,.8,.2,1) both} @keyframes appleHeroIn{from{opacity:0;transform:translateY(28px) scale(.985)}to{opacity:1;transform:none}} .card:after,.tile:after,.chapter-block:after{content:"";position:absolute;inset:-70% -100%;background:linear-gradient(105deg,transparent 43%,rgba(255,255,255,.55) 50%,transparent 57%);transform:translateX(-38%) rotate(8deg);transition:transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}.card:hover:after,.tile:hover:after,.chapter-block:hover:after{transform:translateX(38%) rotate(8deg)} .card,.tile,.chapter-block{position:relative!important;isolation:isolate;overflow:hidden!important}.card>*,.tile>*,.chapter-block>*{position:relative;z-index:1} @media(max-width:980px){ .bar-nav{gap:13px}.bar-nav a{font-size:12px!important}.chapter-block{grid-template-columns:1fr!important} } @media(max-width:900px){ .bar{height:52px!important;min-height:52px!important;padding:0 16px!important}.bar .wordmark{width:96px!important}.bar .logo-img{width:88px!important;height:34px!important}.bar-nav-desktop{display:none!important}.bar>.bar-cta{width:auto!important;min-height:34px!important;justify-content:center;margin:0 0 0 auto;font-size:12px!important;padding:0 12px!important}.menu-toggle{display:block!important} .bar-right{position:absolute!important;top:52px!important;left:0!important;right:0!important;width:100%!important;background:rgba(255,255,255,.98)!important;border:0!important;border-radius:0!important;padding:25px 28px 35px!important;box-shadow:none!important}.bar-right.open{display:flex!important} .bar-right .bar-nav{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:0}.bar-right .bar-nav a{font-size:27px!important;font-weight:600!important;min-height:0!important;padding:8px 0;color:var(--bw-ink)!important}.bar-right .bar-nav a:after{display:none} .page-prologue,.hero{min-height:680px!important;padding:115px 24px 80px!important}.page-prologue h1,.hero h1{font-size:clamp(43px,12vw,66px)!important} .chapter-block{padding:45px 24px!important}.vows-panel,.fit,.calc-sec,.booking,.epilogue-cta{margin:8px;border-radius:25px} } @media(max-width:560px){ .page-prologue,.hero{min-height:620px!important}.story-section,.sec{padding-left:24px!important;padding-right:24px!important}.story-section h2,.sec h2{font-size:42px!important} .card,.tile,.author,.support,.review{border-radius:22px!important}.article-body{padding:70px 22px!important}.foot .footer-main{grid-template-columns:1fr;gap:50px}.foot .regulatory>div{flex-direction:column;gap:10px} } @media(max-width:600px){.foot .footer-main{grid-template-columns:1fr;gap:50px}.foot .regulatory>div{flex-direction:column;gap:10px}} @media(max-width:900px){ .nav-links{display:none}.nav-cta{margin-left:auto;font-size:12px;padding:0 12px}.menu-button{display:block;width:24px;height:22px;padding:0;border:0;background:none;position:relative}.menu-button i{position:absolute;left:2px;width:20px;height:1px;background:#000}.menu-button i:first-child{top:7px}.menu-button i:last-child{top:14px} .nav-links.open{position:absolute;top:52px;left:0;right:0;display:flex;flex-direction:column;align-items:flex-start;background:rgba(255,255,255,.98);padding:25px 28px 35px;gap:0;box-shadow:none}.nav-links.open a{font-size:27px;font-weight:600;padding:8px 0} } @media(max-width:600px){.nav-shell{padding:0 16px}.site-header .wordmark{width:96px}.nav-cta{font-size:12px;padding:0 12px}} @media(max-width:390px){.story-section h2,.sec h2{font-size:38px!important;overflow-wrap:anywhere}.bar>.bar-cta,.site-header .nav-cta{display:none!important}.menu-toggle,.menu-button{margin-left:auto!important}} @media(prefers-reduced-motion:reduce){.apple-panel{opacity:1!important;transform:none!important}.apple-panel img{transform:none!important}.page-prologue h1,.hero h1,.page-prologue .sub,.hero .sub,.page-prologue .kicker,.hero .signature{animation:none!important}} /* Shared navigation and accessibility safeguards. The homepage has no promo band, so inner pages do not either; this keeps each journey in the same visual system. */ .promo-bar{display:none!important} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} .site-header .wordmark:focus-visible,.nav-links a:focus-visible,.nav-cta:focus-visible,.menu-button:focus-visible,.foot a:focus-visible{outline:3px solid var(--glow-deep);outline-offset:3px} @media(max-width:480px){ .nav-links.open{max-height:calc(100vh - 52px);overflow:auto} .nav-links.open a{min-height:44px;display:flex;align-items:center} .story-section h2,.sec h2,.page-prologue h1,.article-body h2,.legal-body h2{overflow-wrap:anywhere} .story-form{grid-template-columns:1fr} .f-field input,.f-field textarea,.f-field select{font-size:16px!important} } /* --------------------------------------------------------------- Button fill — corrected .btn-glow was filled white for every context. Most of this site is light (body is #f5f5f7, .panel-light is #fff), so the contact form's submit button rendered white-on-white at 1.09:1 — invisible. The default is now the brand fill, and white is applied only inside the genuinely dark bands where it belongs. --------------------------------------------------------------- */ .btn-glow, .ch-cta { background: var(--glow-deep) !important; border-color: var(--glow-deep) !important; color: #fff !important; } .btn-glow:hover, .ch-cta:hover { background: var(--glow) !important; border-color: var(--glow) !important; color: #fff !important; } /* Dark bands: a white button reads better against the gradient. */ .epilogue-cta .btn-glow, .epilogue-cta .ch-cta, .panel-magenta .btn-glow, .panel-magenta .ch-cta, .page-prologue .btn-glow, .page-prologue .ch-cta, .hero .btn-glow, .hero .ch-cta { background: #fff !important; border-color: #fff !important; color: var(--bw-ink) !important; } .epilogue-cta .btn-glow:hover, .epilogue-cta .ch-cta:hover, .panel-magenta .btn-glow:hover, .panel-magenta .ch-cta:hover, .page-prologue .btn-glow:hover, .page-prologue .ch-cta:hover, .hero .btn-glow:hover, .hero .ch-cta:hover { background: #f1f1f3 !important; color: #000 !important; } /* The submit button needs visible sending and disabled states. */ .story-form button[type="submit"], form button[type="submit"] { min-height: 52px; font-size: 1rem; cursor: pointer; } .story-form button[type="submit"]:disabled, form button[type="submit"]:disabled { opacity: .55; cursor: default; transform: none !important; } /* --------------------------------------------------------------- "A full support team, on every plan" — the four function cards. They were flat rows separated by a hairline. Now proper cards that reveal in sequence and respond to the cursor, matching the tile treatment used elsewhere on the site. --------------------------------------------------------------- */ .support-grid { gap: 14px !important; } .support { position: relative; overflow: hidden; padding: 30px 26px !important; border: 1px solid rgba(23,20,54,.10) !important; border-radius: 22px !important; background: #fff !important; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease; } /* A magenta rule that draws across the top on hover. */ .support::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--glow-deep), var(--glow)); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.8,.2,1); } .support:hover::before, .support:focus-within::before { transform: scaleX(1); } .support:hover, .support:focus-within { transform: translateY(-6px); border-color: rgba(199,47,99,.28) !important; box-shadow: 0 22px 48px rgba(23,20,54,.12) !important; background: #fff !important; } .support:hover h4 { color: var(--glow-deep); } .support h4 { transition: color .35s ease; } /* Hover must still work once the reveal has finished. */ @media (prefers-reduced-motion: reduce) { .support::before { transition: none; } } @media (max-width: 900px) { .support-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { .support-grid { grid-template-columns: 1fr !important; } } /* ---------- Square-edged buttons, applied consistently ---------- The site reads as editorial and architectural; pill buttons pull it toward consumer-app. An early rule in this file was already commented "Square-edged, editorial buttons" but was being overridden later, so the intent existed and got lost. This restores it in one place. Squared: every button, CTA, tab and chip. Left circular on purpose: avatar initials, bullet dots and icon circles — those are shapes, not controls, and a circle is correct for them. */ .nav-cta, .mobile-cta, .btn, .btn-glow, .btn-primary, .btn-ghost-alt, .ch-cta, .tabs, .tab-btn, .author .tags span, .pill, .pill-black, .pill-white, .hero-image-actions, .hero-image-actions a, .review-nav .review-pause{border-radius:0!important} /* ---------- WCAG 2.2 target size (2.5.8) ---------- Interactive controls must present at least 24x24 CSS px, and 44x44 is the AAA/mobile-comfortable figure the rest of this site already uses. .bar-cta was 34px and .hero-trust 28px. */ .bar-cta{min-height:44px} /* ---------- .btn-ghost-alt on light backgrounds ---------- The class was written for the original dark site: white text on a 30%-white border. The apple refresh made the page body #f5f5f7, so outside a dark panel it renders white-on-light-grey and is effectively invisible. It was patched for .panel-light only; the "Where to find us" phone button on Contact sits on a plain .story-section and was missed. Default is now ink-on-light (13.8:1 against #f5f5f7). White is restored explicitly for the dark contexts that genuinely need it. */ .btn-ghost-alt, a.btn-ghost-alt{ color:var(--bw-ink)!important; border:1px solid rgba(23,20,54,.34)!important; background:transparent!important; border-radius:999px!important; padding:13px 22px!important; min-height:44px;display:inline-flex;align-items:center;justify-content:center; font-family:var(--grot)!important;font-weight:600!important; letter-spacing:0!important;text-transform:none!important; transition:background .2s,border-color .2s,transform .2s; } .btn-ghost-alt:hover, a.btn-ghost-alt:hover{ border-color:var(--glow-deep)!important; background:rgba(189,14,85,.07)!important; color:var(--glow-deep)!important; transform:translateY(-2px); } /* Dark surfaces keep the original white treatment. */ .page-prologue .btn-ghost-alt, .hero .btn-ghost-alt, .panel-magenta .btn-ghost-alt, .epilogue-cta .btn-ghost-alt, .foot .btn-ghost-alt, .panel-dark .btn-ghost-alt{ color:#fff!important;border-color:rgba(255,255,255,.55)!important; } .page-prologue .btn-ghost-alt:hover, .hero .btn-ghost-alt:hover, .panel-magenta .btn-ghost-alt:hover, .epilogue-cta .btn-ghost-alt:hover, .foot .btn-ghost-alt:hover, .panel-dark .btn-ghost-alt:hover{ color:#fff!important;border-color:#fff!important;background:rgba(255,255,255,.12)!important; } /* ---------- Network logo cards ---------- The card treatment was written for only. ASHL has no link supplied yet, so a non-linked .logo-card gets the identical box. */ .network-logos .logo-card{ min-width:220px;min-height:112px;padding:22px 30px;display:grid;place-items:center; background:#fff!important;border:1px solid var(--bw-line);border-radius:24px; box-shadow:0 16px 45px rgba(23,20,54,.08); } .network-logos .logo-card img{height:64px!important;width:auto!important;filter:brightness(0)!important;opacity:1!important} /* ---------- FAQ and Fees hero backgrounds ---------- BUG: faq.html has always carried class="page-prologue bg-hero-faq", but .bg-hero-faq was never defined in any stylesheet — so the page fell back to no background at all while images/hero-faq.webp sat unused on disk. Every other page's hero lives here; these two now do as well. .bg-hero-fees was defined only inside fees.html's own . That inline