/* ========================================================================== Highline Payments 2.0 — layout Containers, section rhythm, header, navigation, footer, overlays. ========================================================================== */ /* --- Container ------------------------------------------------------------- */ .hl-container { width: 100%; max-width: var(--hl-container-width, 1280px); margin-inline: auto; padding-inline: var(--hl-gutter, clamp(1.25rem, 0.75rem + 2vw, 2.5rem)); } .hl-container--narrow { max-width: var(--hl-container-narrow, 52rem); } .hl-container--wide { max-width: var(--hl-container-wide, 95rem); } /* --- Section rhythm -------------------------------------------------------- One place decides vertical spacing, so stacked blocks always feel related rather than each inventing its own padding. The presets are named once, here, as custom properties. Section O of highline-system.css re-applies these same properties to the approved compositions that used to hard-code their padding, so "Roomy" means one value on the whole site instead of one value on the plain blocks and nothing at all on the sixteen that painted their own. The scale is the approved prototype's `--hl-sec-pad` family rather than the one this file invented: Standard was 97px here and 107px in every approved composition, which is why a plain block stacked above a designed one never quite lined up. Standard is now the composition value, Compact is the prototype's small step, and Roomy and Extra roomy extend the same ramp. */ :root { --hl-sec-pad-none: 0px; --hl-sec-pad-compact: var(--hl-sec-pad-sm, clamp(56px, 5vw, 84px)); --hl-sec-pad-normal: var(--hl-sec-pad, clamp(76px, 7.4vw, 124px)); --hl-sec-pad-roomy: clamp(96px, 9.4vw, 156px); --hl-sec-pad-spacious: clamp(116px, 11.4vw, 190px); /* The opening space a DESIGNED composition keeps when it follows a section of the same band. Not a full band step — the two grounds are meant to read as one environment — but not zero either, because a composition that draws a chapter head needs room for it and clips it without one. See the collapse/restore pair below. */ --hl-sec-pad-joined: clamp(44px, 4.4vw, 68px); } .hl-section { position: relative; } .hl-section--none { padding-block: var(--hl-sec-pad-none); } .hl-section--compact { padding-block: var(--hl-sec-pad-compact); } .hl-section--normal { padding-block: var(--hl-sec-pad-normal); } .hl-section--roomy { padding-block: var(--hl-sec-pad-roomy); } .hl-section--spacious { padding-block: var(--hl-sec-pad-spacious); } .hl-section--light { background: var(--hl-bg, #fff); } .hl-section--alt { background: var(--hl-bg-alt, #f6f7fc); } .hl-section--dark { background: var(--hl-bg-dark, #0a0b1f); } .hl-section--brand { background: var(--hl-gradient-brand); } /* The fifth band: Highline navy rather than the near-black deep navy. It is a MODIFIER of --dark, not a theme of its own, so every dark-environment rule in the approved stylesheet — and there are around sixty of them — applies to it without being written twice. Only the background differs. */ .hl-section--dark.hl-section--navy { background: linear-gradient(178deg, var(--hl-primary-dark, #1b1e45) 0%, var(--hl-primary, #2a2d7c) 100%); } /* Dark and brand sections inherit the full dark-environment token flip rather than patching individual child selectors — see .hl-on-dark in base.css. */ .hl-section--dark, .hl-section--brand { color: var(--hl-text-on-dark, #f5f6fb); --hl-text: var(--hl-text-on-dark, #f5f6fb); --hl-text-muted: var(--hl-text-on-dark-muted, rgba(245, 246, 251, 0.66)); --hl-border: var(--hl-hairline-on-dark, rgba(245, 246, 251, 0.12)); --hl-surface: var(--hl-surface-dark, #12142e); --hl-eyebrow-color: var(--hl-accent-light, #e24543); /* The approved eyebrow resolves through `--hl-eb-ink`, whose default is brand red — right on paper, 3.7:1 on a deep-navy band. Views were meant to add `.hl-eyebrow--light` on a dark chapter and several did not, so the band sets the safe ink itself and a missing modifier stops mattering. It lives HERE, in layout.css, deliberately: highline-system.css loads afterwards, so the J2 accent classes an administrator picks (`.hl-eb--red`, `.hl-eb--white`, …) still outrank this and the control keeps working. Same values J6.4 uses when it re-bands a section. */ --hl-eb-ink: var(--hl-navy-300, #9096e4); --hl-eb-bar: linear-gradient(180deg, var(--hl-navy-300, #9096e4), var(--hl-navy-500, #5a61cc)); --hl-eb-glow: 0 0 12px rgba(144, 150, 228, 0.45); } /* The dark chrome islands are not sections, so the rule above never reached them: the promotional modal is a dark card that can open over a light page, and its eyebrow was brand red at 3.16:1. Same tokens, same reason. */ .hl-promo-modal__card, .hl-footer, .hl-drawer { --hl-eb-ink: var(--hl-navy-300, #9096e4); --hl-eb-bar: linear-gradient(180deg, var(--hl-navy-300, #9096e4), var(--hl-navy-500, #5a61cc)); --hl-eb-glow: 0 0 12px rgba(144, 150, 228, 0.45); } /* Prose links on a dark band. `:not(.hl-btn)` is load-bearing: this selector is more specific than any `.hl-btn:hover` rule, so without the exclusion it repainted every BUTTON label on every dark section in --hl-accent-light — including the primary CTA, whose background is that same red. A button owns its own five states; this rule is for running text. */ .hl-section--dark a:not(.hl-btn), .hl-section--brand a:not(.hl-btn) { color: var(--hl-text-on-dark, #f5f6fb); } /* The hover ink is one ramp step lighter than it used to be. `--hl-accent-light` (#E24543) measures 3.4–4.2:1 against the navy bands this rule applies to, so every breadcrumb, offer flag and prose link on a dark chapter FAILED AA the moment a pointer touched it — a state no static screenshot shows. #F79A95 is the dark-band member of the same red ramp and clears 6.5:1 on the darkest and the lightest navy in the set. The specificity here (0,3,1) outranks component rules like `.hl-crumb a:hover` (0,2,1), which is why fixing it at the ramp rather than at the call sites is the only fix that holds. */ .hl-section--dark a:not(.hl-btn):hover, .hl-section--brand a:not(.hl-btn):hover { color: var(--hl-red-300, #f79a95); } /* Content sits above any decorative network canvas in the same section. */ .hl-section > .hl-container { position: relative; z-index: var(--hl-z-base, 1); } .hl-section__header { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .hl-section__header .hl-lead { margin-bottom: 0; } .hl-section__header--center { max-width: 42rem; margin-inline: auto; text-align: center; } /* Two adjacent sections with the same background read as one — collapse the doubled padding so the rhythm stays intentional. Deep navy and Highline navy are two different backgrounds, so they must NOT collapse into each other even though both carry `--dark`. ── ONE EXCLUSION: A HERO IS NOT A BAND IN A RUN ────────────────────────── A hero is the top of the page, not the first of two matching stripes, and the section under it always needs its own opening space. Without this exclusion a dark hero followed by a dark section produced a section whose content began ELEVEN PIXELS below the hero's last ink — measured on the home page, where the second section's red eyebrow read as part of the hero form. It was never a home-page bug. Every service page opens `hero service` (dark) over a dark chapter, so the same collapse was happening site-wide; the home page is simply where the hero ends in a form rather than in a diagram, which is what made it obvious. `:not()` on the PREVIOUS sibling is not expressible in this direction, so the exclusion is written as a second rule that restores the padding rather than as a condition on the first. Same result, and it keeps the original selector readable. ── THE SECOND EXCLUSION: A COMPOSITION'S OWN PADDING IS NOT DECORATION ─── The note that used to sit here said `--none` sections need no restore because "the composition's own value takes over". That was wrong, and it shipped a clipped page. The collapse selector is (0,4,0). `.hl-price{padding-block:var(--hl-sec-pad)}` is (0,1,0). The composition loses, gets `padding-top:0`, and — because most of these compositions also carry `overflow:hidden` for their ambient artwork — anything the chapter head draws ABOVE its first line box is cut off by the band edge. On `/services/chargeback-dispute-support` chapters 03 and 04 that meant the top third of the chapter numeral was sliced away and the first step card lost its corner radius, on a published page. The hero exclusion below proves the shape of the fix: name the compositions and give them a value back. This one does the same for a same-band predecessor, with `--hl-sec-pad-joined` rather than a full band step, so the two grounds still read as one environment while the chapter head keeps the room it needs. `.hl-why-sec` is deliberately absent — it is the one composition that declares `padding-block: 0 …` on purpose and hands off to the band above with a white-to-paper gradient. */ .hl-section--alt + .hl-section--alt, .hl-section--dark:not(.hl-section--navy) + .hl-section--dark:not(.hl-section--navy), .hl-section--navy + .hl-section--navy { padding-top: 0; } /* The same-band restore. Same (0,4,0) arithmetic as the hero restore below — `.hl-section` is repeated on both sides so this wins on source order rather than by accident. Do not "tidy" the doubled class away. */ .hl-section.hl-section--alt + .hl-section.hl-section--alt:is(.hl-acc,.hl-ben, .hl-binds,.hl-calc,.hl-cd,.hl-faq-sec,.hl-final,.hl-floor,.hl-flow,.hl-fund, .hl-hw,.hl-hw2,.hl-ind,.hl-ioffer,.hl-net-sec,.hl-price,.hl-revs,.hl-rfund, .hl-rhw,.hl-rwhy,.hl-story,.hl-sys,.hl-why2), .hl-section.hl-section--dark:not(.hl-section--navy) + .hl-section.hl-section--dark:not(.hl-section--navy):is(.hl-acc,.hl-ben, .hl-binds,.hl-calc,.hl-cd,.hl-faq-sec,.hl-final,.hl-floor,.hl-flow,.hl-fund, .hl-hw,.hl-hw2,.hl-ind,.hl-ioffer,.hl-net-sec,.hl-price,.hl-revs,.hl-rfund, .hl-rhw,.hl-rwhy,.hl-story,.hl-sys,.hl-why2), .hl-section.hl-section--navy + .hl-section.hl-section--navy:is(.hl-acc,.hl-ben, .hl-binds,.hl-calc,.hl-cd,.hl-faq-sec,.hl-final,.hl-floor,.hl-flow,.hl-fund, .hl-hw,.hl-hw2,.hl-ind,.hl-ioffer,.hl-net-sec,.hl-price,.hl-revs,.hl-rfund, .hl-rhw,.hl-rwhy,.hl-story,.hl-sys,.hl-why2){ padding-top: var(--hl-sec-pad-joined); } /* The hero restore. Specificity matters more than usual here and it is worth writing down why the selectors look redundant. The collapse rule above is (0,4,0): two classes and two `:not()`s, and a `:not()` contributes the specificity of its argument. A natural-looking exclusion — `.hl-block-hero + .hl-section--dark` — is only (0,2,0) and loses silently, which is exactly what happened on the first attempt at this fix. The same-band restore added above reaches (0,7,0), and a hero over a matching band satisfies BOTH restores — so these have to outrank it or a dark hero over a dark chapter would silently drop from a full opening step to the joined one. `.hl-section` is therefore repeated three times, which lands these at (0,7,0) as well and lets source order decide, exactly as the original pair intended. The repeated class is load-bearing; do not "tidy" it away. A hero is the top of the page and always pays full opening space. */ .hl-section.hl-section.hl-section.hl-block-hero + .hl-section.hl-section.hl-section--compact { padding-top: var(--hl-sec-pad-compact); } .hl-section.hl-section.hl-section.hl-block-hero + .hl-section.hl-section.hl-section--normal { padding-top: var(--hl-sec-pad-normal); } .hl-section.hl-section.hl-section.hl-block-hero + .hl-section.hl-section.hl-section--roomy { padding-top: var(--hl-sec-pad-roomy); } .hl-section.hl-section.hl-section.hl-block-hero + .hl-section.hl-section.hl-section--spacious { padding-top: var(--hl-sec-pad-spacious); } /* `none` means "the composition sets its own", so the ones that do are named and given theirs back. A plain block carrying `none` keeps zero, which is what `none` means there. `.hl-why-sec` stays in THIS list — under a hero it does want an opening step; it is only the same-band restore that must leave its deliberate `padding-block:0 …` gradient handoff alone. */ .hl-section.hl-section.hl-section.hl-block-hero + .hl-section.hl-section.hl-section--none:is(.hl-acc,.hl-ben,.hl-binds, .hl-calc,.hl-cd,.hl-faq-sec,.hl-final,.hl-floor,.hl-flow,.hl-fund,.hl-hw,.hl-hw2, .hl-ind,.hl-ioffer,.hl-net-sec,.hl-price,.hl-revs,.hl-rfund,.hl-rhw,.hl-rwhy, .hl-story,.hl-sys,.hl-why-sec,.hl-why2){ padding-top: var(--hl-sec-pad); } .hl-main { min-height: 40vh; } .hl-empty-page { padding-block: clamp(3rem, 8vw, 6rem); } /* --- Announcement bar ------------------------------------------------------ A promotional bar for a payments company, not an ecommerce discount strip (§9). What keeps it out of that territory: a deep brand ground rather than a saturated red slab, a small live indicator that ties it to the payment-signal language, uppercase tracked type at a restrained size, and a CTA that is a real control with an arrow instead of an underlined shout. */ .hl-announce { position: relative; z-index: var(--hl-z-sticky, 100); font-size: var(--hl-size-small, 0.875rem); background: var(--hl-primary-dark, #1b1e45); color: var(--hl-text-on-dark, #f5f6fb); border-bottom: 1px solid rgba(var(--hl-text-on-dark-rgb, 245, 246, 251), 0.08); } /* A hairline of brand light along the top edge: the same "signal travelling through infrastructure" idea at the smallest possible scale. */ .hl-announce::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--hl-accent-rgb, 207, 41, 39), 0.55) 35%, rgba(var(--hl-accent-rgb, 207, 41, 39), 0.55) 65%, transparent); opacity: 0.8; } .hl-announce--accent { background: var(--hl-accent-dark, #a31f1d); } .hl-announce--dark { background: var(--hl-bg-dark, #0a0b1f); } .hl-announce--gradient { background: var(--hl-gradient-brand); } .hl-announce--light { background: var(--hl-bg-alt, #f6f7fc); color: var(--hl-text, #12142e); border-bottom-color: var(--hl-border, #e3e5f0); } .hl-announce__inner { display: flex; align-items: center; justify-content: center; gap: var(--hl-space-sm, 1rem); min-height: 2.75rem; /* A fixed block padding on top of a min-height made the bar's height NON-MONOTONIC with width — 118px at 390, 71 at 768, then back up to 82 at 1024 where the message wraps to two lines but the compact padding no longer applied (audit CH-02). One padding at every width, with the min-height still setting the floor for a single line. */ padding-block: 0.625rem; /* Room for the absolutely-positioned close button so a long message never runs underneath it. */ padding-right: 2.75rem; text-align: center; flex-wrap: wrap; } .hl-announce:not([data-dismissible]) .hl-announce__inner { padding-right: var(--hl-gutter, 1.5rem); } .hl-announce__message { margin: 0; font-weight: var(--hl-weight-medium, 500); letter-spacing: 0.005em; } /* The live dot. Two rings: a solid core and a slow expanding halo. */ .hl-announce__signal { position: relative; flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--hl-accent-light, #e24543); } .hl-announce__signal::after { content: ""; position: absolute; inset: -0.3rem; border-radius: 50%; border: 1px solid currentColor; color: var(--hl-accent-light, #e24543); animation: hl-announce-ping 2.8s var(--hl-ease-out, ease-out) infinite; } .hl-announce--light .hl-announce__signal, .hl-announce--light .hl-announce__signal::after { color: var(--hl-accent, #cf2927); background-color: var(--hl-accent, #cf2927); } .hl-announce--light .hl-announce__signal::after { background-color: transparent; } @keyframes hl-announce-ping { 0% { transform: scale(0.7); opacity: 0.9; } 70%,100% { transform: scale(1.6); opacity: 0; } } .hl-announce__cta { display: inline-flex; align-items: center; gap: 0.35rem; color: inherit; font-weight: var(--hl-weight-semibold, 600); text-decoration: none; white-space: nowrap; border-bottom: 1px solid rgba(var(--hl-text-on-dark-rgb, 245, 246, 251), 0.35); transition: var(--hl-transition); } .hl-announce__cta:hover { color: inherit; border-bottom-color: currentColor; } .hl-announce__cta-icon { width: 0.9em; height: 0.9em; transition: transform var(--hl-duration-base, 300ms) var(--hl-ease-out, ease); } .hl-announce__cta:hover .hl-announce__cta-icon { transform: translateX(0.2em); } .hl-announce--light .hl-announce__cta { border-bottom-color: rgba(var(--hl-text-rgb, 18, 20, 46), 0.25); } .hl-announce__close { position: absolute; top: 50%; right: clamp(0.35rem, 1.5vw, 1rem); transform: translateY(-50%); display: grid; place-items: center; width: 2rem; height: 2rem; background: none; border: 0; color: inherit; opacity: 0.6; border-radius: 50%; transition: var(--hl-transition); } .hl-announce__close:hover { opacity: 1; background: rgba(var(--hl-text-on-dark-rgb, 245, 246, 251), 0.14); } .hl-announce--light .hl-announce__close:hover { background: rgba(var(--hl-text-rgb, 18, 20, 46), 0.08); } .hl-announce[hidden] { display: none; } @media (max-width: 30rem) { /* On a phone the bar earns its space only if it stays one tight line of type; the signal dot is dropped rather than wrapping. */ .hl-announce { font-size: 0.8125rem; } .hl-announce__signal { display: none; } .hl-announce__inner { gap: var(--hl-space-2xs, 0.5rem); } } /* --- Header --------------------------------------------------------------- Two states. Over a dark hero the header is transparent and its own type goes light, so the hero reads as full-bleed rather than starting under a white bar. Once scrolled (.is-stuck) it becomes a solid surface with a blur so content passing beneath stays legible. The is-over-hero class is set server-side by the layout — not by JS on scroll — so the first paint is already correct and there is no flash of the wrong header (§7: no CLS). */ .hl-header { position: sticky; top: 0; z-index: var(--hl-z-header, 200); background: var(--hl-surface, #fff); border-bottom: 1px solid var(--hl-border, #e3e5f0); transition: background-color var(--hl-duration-base, 300ms) var(--hl-ease-out, ease), border-color var(--hl-duration-base, 300ms) var(--hl-ease-out, ease), box-shadow var(--hl-duration-base, 300ms) var(--hl-ease-out, ease); } .hl-header.is-stuck { background: rgba(var(--hl-surface-rgb, 255, 255, 255), 0.88); backdrop-filter: blur(14px) saturate(1.4); box-shadow: var(--hl-shadow-md); } /* Transparent over a dark hero. Only `color` is flipped here, deliberately. The header contains LIGHT islands — the dropdown and mega panels — and reassigning --hl-text / --hl-surface / --hl-border on the header would hand those panels light-on-light type and an invisible border, which then needs undoing again inside each one. Setting the inherited colour covers the nav links, the phone and the burger glyph (all `color: inherit`); the two elements that genuinely need a dark-environment treatment ask for it below. */ .hl-header--over-hero { background: transparent; border-bottom-color: transparent; color: var(--hl-text-on-dark, #f5f6fb); } .hl-header--over-hero.is-stuck { background: rgba(var(--hl-bg-dark-rgb, 10, 11, 31), 0.82); border-bottom-color: var(--hl-hairline-on-dark, rgba(245, 246, 251, 0.12)); } .hl-header--over-hero .hl-burger { border-color: var(--hl-hairline-on-dark-strong, rgba(245, 246, 251, 0.22)); } /* An outline button must brighten rather than fill with navy, which would disappear into the hero. Same treatment as .hl-on-dark in components.css — scoped rather than inherited, for the reason given above. */ .hl-header--over-hero .hl-btn--outline { --hl-btn-fg: var(--hl-text-on-dark, #f5f6fb); --hl-btn-border: var(--hl-hairline-on-dark-strong, rgba(245, 246, 251, 0.22)); } .hl-header--over-hero .hl-btn--outline:hover { --hl-btn-bg: rgba(var(--hl-text-on-dark-rgb, 245, 246, 251), 0.1); --hl-btn-fg: var(--hl-text-on-dark, #f5f6fb); --hl-btn-border: var(--hl-text-on-dark, #f5f6fb); } /* The accent focus ring alone can sit too close to a dark hero; the light outer ring guarantees the contrast (matches the .hl-on-dark rule in base.css). */ .hl-header--over-hero :where(a, button):focus-visible { outline-color: var(--hl-text-on-dark, #f5f6fb); box-shadow: 0 0 0 6px rgba(var(--hl-accent-rgb, 207, 41, 39), 0.45); } /* …but not inside a panel, which is a light surface again. */ .hl-header--over-hero :where(.hl-dropdown, .hl-mega) :where(a, button):focus-visible { outline-color: var(--hl-accent, #cf2927); box-shadow: none; } .hl-header__inner { /* The positioning context for mega panels — see .hl-mega below. */ position: relative; display: flex; align-items: center; gap: clamp(0.75rem, 2.5vw, 2rem); min-height: var(--hl-header-height, 4.5rem); } .hl-logo { display: inline-flex; flex: 0 0 auto; } .hl-logo__img { width: clamp(132px, 13vw, 178px); height: auto; } .hl-logo--footer .hl-logo__img { width: clamp(150px, 16vw, 200px); } .hl-header__actions { display: flex; align-items: center; gap: var(--hl-space-2xs, 0.5rem); margin-left: auto; } /* The Login control. Its SHAPE comes from the data (one destination = a button, two or more = a menu), so this only has to position the panel. */ .hl-login { position: relative; } .hl-login__toggle { gap: 0.4rem; } .hl-header__phone { display: none; align-items: center; gap: 0.4rem; font-weight: var(--hl-weight-semibold, 600); font-size: var(--hl-size-body-sm, 0.9375rem); text-decoration: none; white-space: nowrap; color: inherit; } .hl-header__phone:hover { color: var(--hl-accent, #cf2927); } .hl-header__phone-icon { width: 1rem; height: 1rem; opacity: 0.7; } @media (min-width: 75rem) { .hl-header__phone { display: inline-flex; } } /* --- Primary navigation --------------------------------------------------- */ .hl-nav { display: none; } .hl-nav__list { display: flex; align-items: center; gap: 0.1rem; margin: 0; padding: 0; list-style: none; } .hl-nav__item { position: relative; } .hl-nav__item--mobile-only { display: none; } /* A mega panel is much wider than its trigger, so it is positioned against the header row rather than the item — otherwise a menu near the left edge would centre itself off-screen. `position: static` here hands the panel's containing block to .hl-header__inner. */ .hl-nav__item--mega { position: static; } .hl-nav__link, .hl-nav__toggle { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.55rem 0.8rem; background: none; border: 0; border-radius: var(--hl-radius-sm, 6px); color: inherit; font-size: var(--hl-size-body-sm, 0.9375rem); font-weight: var(--hl-weight-semibold, 600); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; transition: color var(--hl-duration-fast, 180ms) var(--hl-ease-out, ease); } /* The active indicator is a short rule that draws in from the centre — the signal language again, and it avoids the grey pill-on-hover look that reads as a CMS admin bar. */ .hl-nav__link::after, .hl-nav__toggle::after { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.15rem; height: 2px; border-radius: var(--hl-radius-pill, 999px); background: var(--hl-accent, #cf2927); transform: scaleX(0); transform-origin: center; transition: transform var(--hl-duration-base, 300ms) var(--hl-ease-out, ease); } .hl-nav__link:hover, .hl-nav__toggle:hover, .hl-nav__link:focus-visible, .hl-nav__toggle:focus-visible { color: var(--hl-accent, #cf2927); } /* Brand red is the hover/focus ink on a LIGHT header. On the dark header it is 2.75:1 — the same defect the hover rule below already corrects, which was written for `:hover` only and left a keyboard user with an unreadable label on every page. States are fixed as a set or not at all. */ .hl-nav__link:hover::after, .hl-nav__toggle:hover::after, [aria-expanded="true"].hl-nav__toggle::after { transform: scaleX(1); } .hl-header--over-hero .hl-nav__link:hover, .hl-header--over-hero .hl-nav__toggle:hover, .hl-header--over-hero .hl-nav__link:focus-visible, .hl-header--over-hero .hl-nav__toggle:focus-visible { color: var(--hl-text-on-dark, #f5f6fb); } .hl-nav__link.is-current, .hl-nav__toggle.is-current { color: var(--hl-primary, #2a2d7c); } .hl-nav__link.is-current::after, .hl-nav__toggle.is-current::after { transform: scaleX(1); } .hl-header--over-hero .hl-nav__link.is-current, .hl-header--over-hero .hl-nav__toggle.is-current { color: var(--hl-text-on-dark, #f5f6fb); } .hl-nav__chevron { width: 0.65rem; height: 0.65rem; opacity: 0.55; transition: transform var(--hl-duration-fast, 180ms) var(--hl-ease-out, ease), opacity var(--hl-duration-fast, 180ms) var(--hl-ease-out, ease); } [aria-expanded="true"] .hl-nav__chevron { transform: rotate(180deg); opacity: 1; } /* --- Dropdown ------------------------------------------------------------ Opens with a small, quick movement: 6px of travel and a slight scale. Enough to read as "this opened", short enough never to delay a click. THE MEGA PANEL IS NOT STYLED HERE ANY MORE. The approved mega menu is a full-bleed band under the header (highline-system.css, block 06) and it was inheriting this panel's geometry — a 24px radius, 24px of padding, a light border and `width: min(68rem, …)` — which cropped it to 1088px and rounded its corners. One mega implementation, in one file; this block now describes the Login dropdown only. */ .hl-dropdown { position: absolute; top: calc(100% + 0.35rem); left: 0; z-index: var(--hl-z-dropdown, 300); background: var(--hl-surface, #fff); color: var(--hl-text, #12142e); border: 1px solid var(--hl-border, #e3e5f0); border-radius: var(--hl-radius-lg, 24px); box-shadow: var(--hl-shadow-lg); padding: var(--hl-space-2xs, 0.5rem); transform-origin: top center; animation: hl-menu-in var(--hl-duration-base, 300ms) var(--hl-ease-out, ease) both; } @keyframes hl-menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.99); } to { opacity: 1; transform: none; } } .hl-dropdown { min-width: 17rem; } .hl-dropdown--right { left: auto; right: 0; } .hl-mega__inner { display: grid; grid-template-columns: 1fr; gap: var(--hl-space-md, 1.5rem); } /* Two shapes, both admin-driven: flat — children are links; they flow into `mega_columns` columns grouped — a child that has children of its own becomes a titled column The grouped shape is what turns a mega menu into an organised panel rather than a long list (§12), and it is chosen by how the admin nests the items, not by a template flag. */ .hl-mega__columns, .hl-mega__groups { display: grid; grid-template-columns: repeat(var(--hl-mega-columns, 3), minmax(0, 1fr)); gap: 0.15rem var(--hl-space-md, 1.5rem); margin: 0; padding: 0; list-style: none; align-content: start; } .hl-mega__groups { gap: var(--hl-space-md, 1.5rem); } .hl-mega__group-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; } .hl-dropdown__list { margin: 0; padding: 0; list-style: none; } /* A menu entry is a small composed row — icon, label, description — not a line in a list of links (§12). */ .hl-dropdown__link, .hl-mega__link { display: flex; align-items: flex-start; gap: var(--hl-space-xs, 0.75rem); padding: 0.6rem 0.7rem; border-radius: var(--hl-radius-md, 12px); color: inherit; text-decoration: none; transition: background-color var(--hl-duration-fast, 180ms) var(--hl-ease-out, ease); } .hl-dropdown__link:hover, .hl-mega__link:hover { background: var(--hl-bg-alt, #f6f7fc); color: var(--hl-primary, #2a2d7c); } .hl-dropdown__link.is-current, .hl-mega__link.is-current { color: var(--hl-primary, #2a2d7c); } .hl-mega__link-body { min-width: 0; } /* Icon plate. Fills with brand colour on hover, so the row activates as a unit rather than only the text changing. */ .hl-mega__link-icon { flex: 0 0 auto; display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: var(--hl-radius-sm, 6px); background: rgba(var(--hl-primary-rgb, 42, 45, 124), 0.07); color: var(--hl-primary, #2a2d7c); transition: var(--hl-transition); } .hl-mega__link-icon svg, .hl-mega__link-icon img { width: 1.15rem; height: 1.15rem; } .hl-mega__link:hover .hl-mega__link-icon, .hl-dropdown__link:hover .hl-mega__link-icon { background: var(--hl-primary, #2a2d7c); color: var(--hl-text-on-dark, #fff); } .hl-mega__link-label { display: flex; align-items: center; gap: var(--hl-space-2xs, 0.5rem); font-weight: var(--hl-weight-semibold, 600); line-height: 1.3; } .hl-mega__link-desc { display: block; margin-top: 0.15rem; font-size: var(--hl-size-small, 0.875rem); line-height: 1.45; color: var(--hl-text-muted, #5a5f7a); } .hl-mega__heading { display: flex; align-items: center; gap: var(--hl-space-2xs, 0.5rem); padding: var(--hl-space-xs, 0.75rem) 0.7rem 0.35rem; font-size: 0.6875rem; font-weight: var(--hl-weight-bold, 700); letter-spacing: var(--hl-tracking-eyebrow, 0.16em); text-transform: uppercase; text-decoration: none; color: var(--hl-text-muted, #5a5f7a); } .hl-mega__heading::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hl-border, #e3e5f0); transition: background-color var(--hl-duration-base, 300ms) var(--hl-ease-out, ease); } /* A column title that links somewhere says so on hover — the rule it already carries lights up rather than an underline appearing. */ a.hl-mega__heading:hover { color: var(--hl-accent, #cf2927); } a.hl-mega__heading:hover::after { background: var(--hl-accent, #cf2927); } /* A heading that is not the column's first child needs air above it. */ .hl-mega__columns > li:not(:first-child) .hl-mega__heading { padding-top: var(--hl-space-md, 1.5rem); } /* In the grouped shape every column starts with its own title, so the first one must not be pushed down out of alignment with the others. */ .hl-mega__groups > li > .hl-mega__heading { padding-top: 0.35rem; } /* The featured panel. A dark inset that carries the same environment gradient as the hero, so the menu belongs to the same visual world. */ .hl-mega__promo { position: relative; overflow: hidden; padding: var(--hl-space-md, 1.5rem); background: var(--hl-gradient-dark, #12142e); border-radius: var(--hl-radius-lg, 24px); color: var(--hl-text-on-dark, #f5f6fb); --hl-text: var(--hl-text-on-dark, #f5f6fb); --hl-text-muted: var(--hl-text-on-dark-muted, rgba(245, 246, 251, 0.66)); } .hl-mega__promo-image { width: 100%; border-radius: var(--hl-radius-md, 12px); margin-bottom: var(--hl-space-sm, 1rem); } .hl-mega__promo-eyebrow { margin: 0 0 var(--hl-space-2xs, 0.5rem); font-size: 0.6875rem; font-weight: var(--hl-weight-bold, 700); letter-spacing: var(--hl-tracking-eyebrow, 0.16em); text-transform: uppercase; color: var(--hl-accent-light, #e24543); } .hl-mega__promo-heading { font-weight: var(--hl-weight-bold, 700); font-size: var(--hl-size-h4, 1.15rem); line-height: 1.3; margin: 0 0 0.35rem; } .hl-mega__promo-text { font-size: var(--hl-size-small, 0.875rem); line-height: 1.5; color: var(--hl-text-on-dark-muted, rgba(245, 246, 251, 0.66)); margin: 0; } .hl-mega__promo-cta { margin-top: var(--hl-space-sm, 1rem); } /* --- Mobile navigation --------------------------------------------------- A real drawer, not the desktop menu stacked (§27). It is a full-height panel with its own composition: large tappable rows, nested sections that expand in place, and the CTAs pinned at the end where a thumb is. */ .hl-burger { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; background: none; border: 1px solid var(--hl-border, #e3e5f0); border-radius: var(--hl-radius-md, 12px); color: inherit; transition: var(--hl-transition); } .hl-burger:hover { background: rgba(var(--hl-text-rgb, 18, 20, 46), 0.05); } .hl-header--over-hero .hl-burger:hover { background: rgba(var(--hl-text-on-dark-rgb, 245, 246, 251), 0.12); } .hl-burger__bars { display: grid; gap: 4px; } .hl-burger__bars span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--hl-duration-base, 300ms) var(--hl-ease-out, ease), opacity var(--hl-duration-fast, 180ms) var(--hl-ease-out, ease); } .hl-burger[aria-expanded="true"] .hl-burger__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hl-burger[aria-expanded="true"] .hl-burger__bars span:nth-child(2) { opacity: 0; } .hl-burger[aria-expanded="true"] .hl-burger__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .hl-mobile-nav { position: fixed; inset: 0; z-index: var(--hl-z-drawer, 400); display: flex; flex-direction: column; background: var(--hl-bg-dark, #0a0b1f); background-image: var(--hl-gradient-environment); color: var(--hl-text-on-dark, #f5f6fb); --hl-text: var(--hl-text-on-dark, #f5f6fb); --hl-text-muted: var(--hl-text-on-dark-muted, rgba(245, 246, 251, 0.66)); --hl-border: var(--hl-hairline-on-dark, rgba(245, 246, 251, 0.12)); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--hl-gutter, 1.5rem) max(var(--hl-space-lg, 2rem), env(safe-area-inset-bottom)); animation: hl-drawer-in var(--hl-duration-base, 300ms) var(--hl-ease-out, ease) both; } .hl-mobile-nav[hidden] { display: none; } @keyframes hl-drawer-in { from { opacity: 0; transform: translateY(-1.5rem); } to { opacity: 1; transform: none; } } /* The drawer's own header row, so the logo and close control stay put while the list scrolls. */ .hl-mobile-nav__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--hl-space-sm, 1rem); min-height: var(--hl-header-height, 4.5rem); margin-inline: calc(var(--hl-gutter, 1.5rem) * -1); padding-inline: var(--hl-gutter, 1.5rem); background: inherit; border-bottom: 1px solid var(--hl-border); } .hl-mobile-nav__close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: none; border: 1px solid var(--hl-border); border-radius: var(--hl-radius-md, 12px); color: inherit; } .hl-mobile-nav__close:hover { background: rgba(var(--hl-text-on-dark-rgb, 245, 246, 251), 0.1); } .hl-mobile-nav__list { margin: 0; padding: 0; list-style: none; } .hl-mobile-nav__item { border-bottom: 1px solid var(--hl-border); } .hl-mobile-nav__item > a, .hl-mobile-nav__toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--hl-space-sm, 1rem); width: 100%; /* A 3.5rem row is comfortably above the 44px minimum target (§26). */ min-height: 3.5rem; padding: var(--hl-space-sm, 1rem) 0; background: none; border: 0; color: inherit; font-size: var(--hl-size-body-lg, 1.125rem); font-weight: var(--hl-weight-semibold, 600); letter-spacing: var(--hl-tracking-snug, -0.012em); text-align: left; text-decoration: none; } .hl-mobile-nav__toggle .hl-nav__chevron { width: 0.8rem; height: 0.8rem; } .hl-mobile-nav__sub { margin: 0; padding: 0 0 var(--hl-space-sm, 1rem); list-style: none; display: grid; gap: 0.15rem; } .hl-mobile-nav__sub[hidden] { display: none; } .hl-mobile-nav__sub a { display: block; min-height: 2.75rem; padding: 0.6rem var(--hl-space-sm, 1rem); /* A left rule instead of an indent: the child rows read as branching off the parent, which is the network language applied to navigation. */ border-left: 1px solid var(--hl-border); color: var(--hl-text-muted); font-size: var(--hl-size-body-sm, 0.9375rem); text-decoration: none; } .hl-mobile-nav__sub a:hover, .hl-mobile-nav__sub a:focus-visible { color: var(--hl-text-on-dark, #f5f6fb); border-left-color: var(--hl-accent, #cf2927); } .hl-mobile-nav__sub-heading { padding: var(--hl-space-sm, 1rem) 0 0.35rem; font-size: 0.6875rem; font-weight: var(--hl-weight-bold, 700); letter-spacing: var(--hl-tracking-eyebrow, 0.16em); text-transform: uppercase; color: var(--hl-text-on-dark-faint, rgba(245, 246, 251, 0.42)); } .hl-mobile-nav__actions { display: grid; gap: var(--hl-space-2xs, 0.5rem); margin-top: var(--hl-space-lg, 2rem); } .hl-mobile-nav__login { display: grid; gap: var(--hl-space-2xs, 0.5rem); margin-top: var(--hl-space-md, 1.5rem); } .hl-mobile-nav__login-label { font-size: 0.6875rem; font-weight: var(--hl-weight-bold, 700); letter-spacing: var(--hl-tracking-eyebrow, 0.16em); text-transform: uppercase; color: var(--hl-text-on-dark-faint, rgba(245, 246, 251, 0.42)); margin: 0 0 0.25rem; } .hl-mobile-nav__phone { display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.75rem; margin-top: var(--hl-space-sm, 1rem); color: inherit; font-weight: var(--hl-weight-semibold, 600); text-decoration: none; } @media (min-width: 62rem) { .hl-nav { display: block; } .hl-burger { display: none; } .hl-mobile-nav { display: none !important; } .hl-mega__inner:has(.hl-mega__promo) { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); } } /* --- Breadcrumbs ----------------------------------------------------------- */ .hl-breadcrumbs { padding-block: var(--hl-space-sm, 1rem); border-bottom: 1px solid var(--hl-border, #e3e5f0); } .hl-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hl-space-2xs, 0.5rem); margin: 0; padding: 0; list-style: none; font-size: var(--hl-size-small, 0.875rem); color: var(--hl-text-muted, #5a5f7a); } .hl-breadcrumbs__item { display: flex; align-items: center; gap: var(--hl-space-2xs, 0.5rem); } .hl-breadcrumbs__sep { opacity: 0.5; } .hl-breadcrumbs a { color: inherit; text-decoration: none; } .hl-breadcrumbs a:hover { color: var(--hl-primary, #2a2d7c); text-decoration: underline; } /* --- Footer ---------------------------------------------------------------- The footer is a dark environment, so it adopts the same token flip the dark sections use instead of hand-writing white-with-alpha at every rule. */ .hl-footer { position: relative; background: var(--hl-bg-dark, #0a0b1f); color: var(--hl-text-on-dark, #f5f6fb); --hl-text: var(--hl-text-on-dark, #f5f6fb); --hl-text-muted: var(--hl-text-on-dark-muted, rgba(245, 246, 251, 0.66)); --hl-border: var(--hl-hairline-on-dark, rgba(245, 246, 251, 0.12)); padding-block: var(--hl-section-y, clamp(3.5rem, 2rem + 4.5vw, 6.5rem)) var(--hl-space-lg, 2rem); } .hl-footer__top { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; padding-bottom: var(--hl-space-xl, 3rem); border-bottom: 1px solid var(--hl-border); } .hl-footer__description { color: var(--hl-text-muted); max-width: 34ch; margin-top: var(--hl-space-md, 1.5rem); } .hl-footer__columns { display: grid; gap: var(--hl-space-lg, 2rem); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } .hl-footer__heading { font-size: 0.6875rem; font-weight: var(--hl-weight-bold, 700); letter-spacing: var(--hl-tracking-eyebrow, 0.16em); text-transform: uppercase; color: var(--hl-text-on-dark-faint, rgba(245, 246, 251, 0.42)); margin-bottom: var(--hl-space-sm, 1rem); } .hl-footer__links { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; } .hl-footer__links a { color: var(--hl-text-muted); text-decoration: none; font-size: var(--hl-size-body-sm, 0.9375rem); } .hl-footer__links a:hover { color: var(--hl-text-on-dark, #f5f6fb); } .hl-footer__address { display: grid; gap: 0.2rem; margin-top: var(--hl-space-sm, 1rem); font-style: normal; color: var(--hl-text-muted); } .hl-footer__trustpilot { display: inline-block; margin-top: var(--hl-space-sm, 1rem); font-weight: var(--hl-weight-semibold, 600); } .hl-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--hl-space-sm, 1rem); padding-top: var(--hl-space-md, 1.5rem); font-size: var(--hl-size-legal, 0.8125rem); color: var(--hl-text-on-dark-faint, rgba(245, 246, 251, 0.42)); } .hl-footer__bottom p { margin: 0; } .hl-footer__disclaimer { max-width: var(--hl-measure-body, 68ch); } .hl-social { display: flex; gap: var(--hl-space-2xs, 0.5rem); margin: var(--hl-space-md, 1.5rem) 0 0; padding: 0; list-style: none; } .hl-social__link { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--hl-hairline-on-dark-strong, rgba(245, 246, 251, 0.22)); border-radius: 50%; color: var(--hl-text-on-dark, #f5f6fb); transition: var(--hl-transition); } .hl-social__link:hover { background: var(--hl-accent, #cf2927); border-color: var(--hl-accent, #cf2927); color: var(--hl-text-on-dark, #fff); transform: translateY(-2px); } @media (min-width: 62rem) { .hl-footer__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr); } } /* --- Landing-page chrome --------------------------------------------------- */ .hl-landing-header { position: sticky; top: 0; z-index: var(--hl-z-header, 200); background: var(--hl-surface, #fff); border-bottom: 1px solid var(--hl-border, #e3e5f0); } .hl-landing-header__inner { display: flex; align-items: center; gap: var(--hl-space-md, 1.5rem); min-height: 4.25rem; } .hl-landing-nav { margin-left: auto; display: none; } .hl-landing-nav__list { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; } .hl-landing-nav__link { display: inline-block; padding: 0.55rem 0.85rem; border-radius: var(--hl-radius-sm, 6px); font-weight: var(--hl-weight-semibold, 600); text-decoration: none; color: inherit; } .hl-landing-nav__link:hover, .hl-landing-nav__link.is-current { background: var(--hl-bg-alt, #f6f7fc); color: var(--hl-primary, #2a2d7c); } .hl-landing-footer { background: var(--hl-bg-dark, #0a0b1f); color: var(--hl-text-on-dark-muted, rgba(245, 246, 251, 0.66)); padding-block: var(--hl-space-lg, 2rem); font-size: var(--hl-size-legal, 0.8125rem); } .hl-landing-footer__inner { display: grid; gap: var(--hl-space-2xs, 0.5rem); } .hl-landing-footer__copy { margin: 0; } .hl-landing-footer__disclaimer { margin: 0; max-width: 72ch; } @media (min-width: 48rem) { .hl-landing-nav { display: block; } } /* --- Status pages (error / maintenance) ------------------------------------ These render WITHOUT the ThemeService