@charset "utf-8"; /* ========================================================================= Meganav — modernised public navigation ---------------------------------------------------------------------------- UI3-01 (2026-05-29): single-row design. The previous slim top utility bar was dropped; auth links fold into a user-menu dropdown on the right side of the main row (alongside the Instant quote CTA). Loaded only on public pages (NOT the checkout shell, NOT the admin shell). Uses design-tokens.css custom properties. ========================================================================= */ /* UI3-02: Alpine FOUC prevention — hide x-cloak elements until Alpine hydrates. Must come first so the rule wins over any conflicting `display` defaults on the elements that carry x-cloak. Loaded on every public page (this stylesheet is in `base.html`'s ), so the rule is in effect before any meganav / overlay markup paints. */ [x-cloak] { display: none !important; } /* ----------------------------------------------------------------- Wrapper — sticky, becomes shadowed after 20px scroll ----------------------------------------------------------------- */ .meganav { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--brand-paper-200); transition: box-shadow 180ms ease, border-color 180ms ease; } .meganav.is-scrolled { box-shadow: 0 2px 8px rgba(46, 34, 30, 0.08); border-bottom-color: transparent; } /* ----------------------------------------------------------------- Main bar ----------------------------------------------------------------- */ .meganav__main { max-width: var(--container-wide); margin: 0 auto; padding: 10px var(--sp-5); display: flex; align-items: center; gap: var(--sp-5); } .meganav__brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; } .meganav__brand img { height: 48px; width: auto; display: block; } .meganav__brand:hover { text-decoration: none; opacity: 0.85; } /* ----------------------------------------------------------------- Desktop nav list ----------------------------------------------------------------- */ .meganav__nav { display: none; list-style: none; margin: 0; padding: 0; gap: var(--sp-2); align-items: center; flex: 1; } @media (min-width: 992px) { .meganav__nav { display: flex; } } .meganav__item { position: relative; } .meganav__link { font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; color: var(--brand-ink-900); padding: 10px 14px; border-radius: var(--radius-sm); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: transparent; border: 0; transition: background 120ms ease, color 120ms ease; } .meganav__link:hover, .meganav__link[aria-expanded='true'] { background: var(--brand-green-50); color: var(--color-primary); text-decoration: none; } .meganav__link.is-active { color: var(--color-primary); } .meganav__link.is-active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--color-primary); border-radius: 2px; } .meganav__caret { font-size: 0.7em; transition: transform 160ms ease; } .meganav__link[aria-expanded='true'] .meganav__caret { transform: rotate(180deg); } /* ----------------------------------------------------------------- Right-aligned actions (auth) ----------------------------------------------------------------- */ .meganav__actions { display: none; align-items: center; gap: var(--sp-3); margin-left: auto; } @media (min-width: 992px) { .meganav__actions { display: inline-flex; } } .meganav__actions-link { font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; color: var(--brand-ink-900); text-decoration: none; padding: 8px 12px; } .meganav__actions-link:hover { color: var(--color-primary); text-decoration: none; } /* Sign-in button (P4-03): a lighter-weight pill button, visually distinct from the filled primary "Instant quote" CTA. */ .meganav__btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; padding: 8px 16px; border-radius: var(--radius-btn); text-decoration: none; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .meganav__btn--ghost { color: var(--brand-ink-900); background: transparent; border: 1px solid var(--brand-paper-300, var(--brand-paper-200)); } .meganav__btn--ghost:hover { background: var(--brand-green-50); color: var(--color-primary); border-color: var(--color-primary); text-decoration: none; } /* Persistent conversion CTA in the nav ("Instant quote"). Forest, per the v2.1 single-gold-per-view rule (homepage-masthead-rotating-redesign, 2026-06-29): gold is reserved for the ONE primary conversion CTA in view (the page hero's "Order now"), so a second always-on gold pill in the nav broke that discipline in the hero viewport. The nav CTA stays forest — still the always-on-screen entry to checkout, just not a competing gold field. Forest leads. */ .meganav__cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; color: #fff; background: var(--brand-green-700); padding: 9px 18px; border-radius: var(--radius-btn); text-decoration: none; transition: background 120ms ease, transform 120ms ease; } .meganav__cta:hover { background: var(--brand-green-500); color: #fff; text-decoration: none; transform: translateY(-1px); } /* ----------------------------------------------------------------- User menu (authenticated) — UI3-01 Collapses Dashboard / My jobs / Earnings / Admin / Log out into a single dropdown so the right side of the nav stays compact. ----------------------------------------------------------------- */ .meganav__user { position: relative; } .meganav__user-trigger { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; color: var(--brand-ink-900); background: transparent; border: 0; padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .meganav__user-trigger:hover, .meganav__user-trigger[aria-expanded='true'] { background: var(--brand-green-50); color: var(--color-primary); } .meganav__user-trigger i { font-size: 1.1rem; } .meganav__user-label { font-weight: 600; } .meganav__user-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; background: #fff; border: 1px solid var(--brand-paper-200); border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: 6px; z-index: 1100; } .meganav__user-link { display: block; padding: 8px 12px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; color: var(--brand-ink-900); text-decoration: none; } .meganav__user-link:hover { background: var(--brand-green-50); color: var(--color-primary); text-decoration: none; } .meganav__user-divider { height: 1px; background: var(--brand-paper-200); margin: 4px 0; } /* ----------------------------------------------------------------- Hamburger button (mobile only) ----------------------------------------------------------------- */ .meganav__burger { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; color: var(--brand-ink-900); cursor: pointer; border-radius: var(--radius-sm); } .meganav__burger:hover { background: var(--brand-paper-100); } @media (min-width: 992px) { .meganav__burger { display: none; } } .meganav__burger i { font-size: 1.5rem; } /* ----------------------------------------------------------------- Services mega dropdown panel (desktop) ----------------------------------------------------------------- */ .meganav__panel { position: absolute; top: calc(100% + 10px); left: 0; width: min(760px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--brand-paper-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-4); padding: var(--sp-5); z-index: 1100; } /* P4-01: plain single-column dropdown variant (About). Narrower than the Services mega panel; right-aligned would overflow on small viewports so it stays left-anchored like Services. */ .meganav__panel--menu { width: min(240px, calc(100vw - 32px)); padding: var(--sp-2); } /* Use-cases flyout: a left rail of the five use cases; hovering one reveals its sub-service pages in the right pane (content-ia-service-overhaul). Long sub-service titles ("Humanities & Social Sciences Proofreading") wrap in the two-column pane instead of truncating. WIDTH CLAMP (2026-07-01): the panel is `left: 0`-anchored to the "Use cases" nav item, which sits ~308px in from the left below the 1240px container width — NOT at the viewport edge. So the old `calc(100vw - 32px)` cap ignored that offset and the panel's right edge ran off-screen for ~992–1188px viewports (up to ~190px clipped). Subtract the item's left offset (+ a right margin) so the right edge always stays on-screen, and cap narrower overall. The 360px is the Use-cases item offset (~308) plus a safety margin; tied to the nav layout. */ .meganav__panel--flyout { /* Column: the rail+pane body row, then the full-width catch-all band. */ display: flex; flex-direction: column; width: min(680px, calc(100vw - 360px)); padding: var(--sp-3); } /* The two-column body — rail (left) + pane (right). Was the flyout's own flex row; extracted so the catch-all row can sit below it full-width without being squashed into a nowrap flex row. */ .meganav__flyout-body { display: flex; gap: var(--sp-4); } .meganav__flyout-rail { flex: 0 0 200px; display: flex; flex-direction: column; /* Distribute the five items down the full rail height (which stretches to the pane's min-height) so the bordered left column fills evenly instead of packing at the top and leaving a gap at the bottom. `gap` is the floor. */ justify-content: space-between; gap: 2px; border-right: 1px solid var(--brand-paper-200); padding-right: var(--sp-3); } .meganav__flyout-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--brand-ink-900); text-decoration: none; font-family: var(--font-sans); font-weight: 600; white-space: nowrap; } .meganav__flyout-item:hover, .meganav__flyout-item.is-active { background: var(--brand-green-50); color: var(--color-primary); } .meganav__flyout-item-label { display: inline-flex; align-items: center; gap: var(--sp-2); } /* Per-audience icon chip — a soft wash tile + saturated glyph, mirroring the homepage use-case cards' `.svc-card__icon--` treatment (shared --usecase-* / --usecase-*-wash tokens) so the Use-cases dropdown carries the same wayfinding identity, at nav scale. bpr_icon renders an inline , so the colour hangs off this wrapper chip, not the glyph tag. The chip colour persists on hover/active (the .is-active rule recolours the label text, not the chip). */ .meganav__flyout-item-chip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--brand-green-100); color: var(--brand-green-700); } .meganav__flyout-item-chip svg { width: 1rem; height: 1rem; } .meganav__flyout-item--academic .meganav__flyout-item-chip { background: var(--usecase-academic-wash); color: var(--usecase-academic); } .meganav__flyout-item--authors .meganav__flyout-item-chip { background: var(--usecase-authors-wash); color: var(--usecase-authors); } .meganav__flyout-item--professionals .meganav__flyout-item-chip { background: var(--usecase-professionals-wash); color: var(--usecase-professionals); } .meganav__flyout-item--students .meganav__flyout-item-chip { background: var(--usecase-students-wash); color: var(--usecase-students); } .meganav__flyout-item--technical .meganav__flyout-item-chip { background: var(--usecase-technical-wash); color: var(--usecase-technical); } .meganav__flyout-chevron { color: var(--color-text-muted); font-size: 1.15em; } .meganav__flyout-pane { flex: 1 1 auto; min-width: 0; padding: var(--sp-1) var(--sp-1) var(--sp-2) var(--sp-4); /* Reserve the tallest group's height so the panel doesn't grow/shrink as you hover between use cases. Academic has the most sub-services (9, in a 2-col multicol) and sets the ceiling; the shorter groups fill to it. Tuned in the browser against Academic's laid-out pane height (~277px / 17.3rem). */ min-height: 18rem; } /* Group head reads as the pane's section label: a forest "see all" link with a hairline divider beneath it, separating it from the link list so the pane has structure instead of a flat block of text. */ .meganav__flyout-group-head { display: flex; align-items: center; gap: var(--sp-1); font-family: var(--font-sans); font-weight: 700; font-size: 0.9rem; color: var(--color-primary); text-decoration: none; padding: var(--sp-1) var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-2); border-bottom: 1px solid var(--brand-paper-200); } .meganav__flyout-group-head::after { content: "\2192"; /* → : signals this links to the full overview */ font-size: 1em; opacity: 0; transform: translateX(-2px); transition: opacity 140ms ease, transform 140ms ease; } .meganav__flyout-group-head:hover { color: var(--brand-green-500); } .meganav__flyout-group-head:hover::after { opacity: 1; transform: translateX(0); } /* CSS multicol, NOT a 2-col grid: a grid couples row heights, so a sub-service whose title wraps to two lines makes its single-line neighbour reserve the same tall row — leaving an ugly gap under the short item. Multicol flows each item independently (column-major), so wrapped and unwrapped titles pack with no row coupling. break-inside:avoid keeps a two-line title whole. */ .meganav__flyout-links { column-count: 2; column-gap: var(--sp-4); } .meganav__flyout-sub { display: block; padding: var(--sp-2) var(--sp-2); margin-bottom: var(--sp-1); /* replaces the lost grid row-gap — breathe */ break-inside: avoid; border-radius: var(--radius-sm); color: var(--brand-ink-900); text-decoration: none; font-size: 0.9rem; line-height: 1.35; transition: background 120ms ease, color 120ms ease; /* Wrap long titles to a second line rather than truncate (was nowrap + ellipsis, which cut off the longer sub-service names). */ white-space: normal; } .meganav__flyout-sub:hover { background: var(--brand-green-50); color: var(--color-primary); } @media (max-width: 640px) { /* The flyout is a desktop affordance; the mobile overlay lists profiles directly. Keep it from overflowing narrow viewports if it ever shows. */ .meganav__panel--flyout { flex-direction: column; } .meganav__flyout-rail { flex-basis: auto; border-right: 0; padding-right: 0; } .meganav__flyout-links { column-count: 1; } } .meganav__panel-grid { display: grid; /* Three columns — one per locked category (Proofreading & editing / * Developmental / Careers). The old `repeat(4, ...)` left a permanently * empty 4th column, which read as dead whitespace on the right of the * panel. Three columns + the narrower panel width + the new service icons * fill the panel edge-to-edge. */ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); } .meganav__panel-group-title { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.09em; color: var(--color-text-muted); margin: 0 0 var(--sp-3) 0; padding-bottom: 8px; border-bottom: 1px solid var(--brand-paper-200); } .meganav__panel-card { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 11px 12px; border-radius: var(--radius-md); text-decoration: none; color: var(--brand-ink-900); margin: 0 -6px; box-shadow: inset 2px 0 0 transparent; transition: background 130ms ease, box-shadow 130ms ease; } .meganav__panel-card:hover { background: var(--brand-green-50); box-shadow: inset 2px 0 0 var(--color-primary); text-decoration: none; } /* Service icon tile — forest (primary), on a faint forest wash. Per brand v2 * the vivid accent green is badges/success only, so the icon uses * --color-primary (deep forest). */ .meganav__panel-card-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--brand-green-50); color: var(--color-primary); font-size: 0.95rem; margin-top: 1px; transition: background 120ms ease, color 120ms ease; } .meganav__panel-card:hover .meganav__panel-card-icon { background: var(--color-primary); color: #fff; } .meganav__panel-card-body { display: block; min-width: 0; } .meganav__panel-card-title { font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--brand-ink-900); margin: 0 0 3px 0; } .meganav__panel-card-desc { font-size: var(--fs-xs); color: var(--color-text-muted); margin: 0; line-height: 1.4; } .meganav__panel-card:hover .meganav__panel-card-title { color: var(--color-primary); } /* Catch-all utility row at the foot of a dropdown ("All services →") so a flyout never dead-ends. Mirrors the use-cases group-head treatment: a forest "see all" link with a hairline above it and a → that slides in on hover. */ .meganav__panel-all { display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3); padding: var(--sp-3) 12px 6px; border-top: 1px solid var(--brand-paper-200); font-family: var(--font-sans); font-weight: 700; font-size: 0.9rem; color: var(--color-primary); text-decoration: none; } .meganav__panel-all-arrow { opacity: 0; transform: translateX(-2px); transition: opacity 140ms ease, transform 140ms ease; } .meganav__panel-all:hover { color: var(--brand-green-500); text-decoration: none; } .meganav__panel-all:hover .meganav__panel-all-arrow { opacity: 1; transform: translateX(0); } /* Use-cases variant: a full-width band beneath the rail+pane body (the flyout is flex-column). It's a normal block child, so it spans the panel width. */ .meganav__flyout-all { margin-top: var(--sp-2); } /* ----------------------------------------------------------------- Learn dropdown (nav-learn-about) — two grouped text columns (Company / Resources). Uses the shared .meganav__panel surface; its rows are lighter than the Services icon cards (no icon tile), so the dropdown reads as a wayfinding index, not a service grid. ----------------------------------------------------------------- */ .meganav__panel--learn { /* Learn is the rightmost dropdown, so at full width a left-anchored panel would run off the right edge on narrower desktops (~992-1180px). Rather than right-anchor it — which flips the panel to open leftward, sitting jarringly to the LEFT of its trigger and out of step with the Services / Use-cases panels — keep it left-anchored (inherits `left: 0`, opens rightward like its siblings) and CLAMP the width so its right edge never clips. Mirrors the Use-cases flyout's clamp. The 568px subtrahend is the "Learn" item's left offset (~518px at the 992px min-desktop) plus a right margin: at 992px this yields ~424px (fits with clearance); on wide desktops it caps to the full 560px two-column panel. Tied to the nav layout — if the nav's left cluster changes width, re-measure. */ width: min(560px, calc(100vw - 568px)); } .meganav__panel--learn .meganav__panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-6); } .meganav__panel-link { display: block; padding: 9px 12px; margin: 0 -6px; border-radius: var(--radius-md); text-decoration: none; color: var(--brand-ink-900); box-shadow: inset 2px 0 0 transparent; transition: background 130ms ease, box-shadow 130ms ease; } .meganav__panel-link:hover { background: var(--brand-green-50); box-shadow: inset 2px 0 0 var(--color-primary); text-decoration: none; } .meganav__panel-link-title { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--brand-ink-900); margin-bottom: 2px; } .meganav__panel-link:hover .meganav__panel-link-title { color: var(--color-primary); } .meganav__panel-link-desc { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.4; } @media (max-width: 640px) { /* The desktop Learn panel is a hover affordance; the mobile overlay lists these links in its own accordion. Keep it from overflowing if it shows. */ .meganav__panel--learn { width: min(360px, calc(100vw - 32px)); } .meganav__panel--learn .meganav__panel-grid { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------- Mobile overlay ----------------------------------------------------------------- */ .meganav__overlay { position: fixed; inset: 0; background: #fff; z-index: 1200; overflow-y: auto; display: flex; flex-direction: column; } .meganav__overlay-header { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--sp-5); border-bottom: 1px solid var(--brand-paper-200); background: #fff; } .meganav__overlay-close { width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--brand-ink-900); font-size: 1.5rem; } .meganav__overlay-close:hover { background: var(--brand-paper-100); } .meganav__overlay-body { padding: var(--sp-4) var(--sp-5); flex: 1; } .meganav__overlay-section { margin-bottom: var(--sp-5); } .meganav__overlay-section-title { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 0 0 var(--sp-2) 0; } .meganav__overlay-link { display: block; padding: 12px 0; font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; color: var(--brand-ink-900); text-decoration: none; border-bottom: 1px solid var(--brand-paper-200); } .meganav__overlay-link:hover, .meganav__overlay-link.is-active { color: var(--color-primary); text-decoration: none; } .meganav__overlay-sub { display: block; padding: 10px 0 10px var(--sp-4); font-family: var(--font-sans); font-weight: 500; font-size: 0.95rem; color: var(--brand-charcoal-700); text-decoration: none; border-bottom: 1px solid var(--brand-paper-200); } .meganav__overlay-sub:hover { color: var(--color-primary); text-decoration: none; } .meganav__overlay-footer { padding: var(--sp-5); background: var(--brand-paper-50); border-top: 1px solid var(--brand-paper-200); display: flex; flex-direction: column; gap: var(--sp-3); } /* Mobile-overlay primary CTA — the gold conversion affordance (matches the desktop nav CTA). The --ghost variant below stays quiet for login/logout. */ .meganav__overlay-cta { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 600; font-size: 1rem; color: var(--color-accent-ink); background: var(--color-accent); padding: 12px 18px; border-radius: var(--radius-btn); text-decoration: none; } .meganav__overlay-cta:hover { background: var(--color-accent-strong); color: var(--color-accent-ink); text-decoration: none; } .meganav__overlay-cta--ghost { background: transparent; color: var(--brand-ink-900); border: 1px solid var(--brand-paper-200); } .meganav__overlay-cta--ghost:hover { background: var(--brand-paper-100); color: var(--brand-ink-900); } /* ----------------------------------------------------------------- Mobile overlay — icon-led collapsible accordion (.meganav__m-*) Concern 5: replaces the flat, auto-expanded service list + shouty uppercase category eyebrows with simple rows + tap-to-expand sections, each anchored by a Font Awesome icon. ----------------------------------------------------------------- */ .meganav__m-nav { display: flex; flex-direction: column; } .meganav__m-item { display: flex; flex-direction: column; } /* A row is either a simple link (Home / Prices) or a section toggle button; both share the chrome: icon · label · (optional chevron) + a hairline below. */ .meganav__m-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 15px 4px; background: transparent; border: 0; border-bottom: 1px solid var(--brand-paper-200); font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--brand-ink-900); text-align: left; text-decoration: none; cursor: pointer; } .meganav__m-row:hover { color: var(--color-primary); text-decoration: none; } .meganav__m-ic { flex: 0 0 1.75rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--color-primary); } .meganav__m-label { flex: 1; } .meganav__m-chev { flex: 0 0 auto; font-size: 0.8rem; color: var(--color-text-muted); transition: transform 160ms ease; } .meganav__m-chev.is-open { transform: rotate(180deg); } /* Expanded sub-list — indented to sit under the row label; links only. */ .meganav__m-sub { display: flex; flex-direction: column; padding: var(--sp-1) 0 var(--sp-3) calc(1.75rem + var(--sp-3)); } .meganav__m-sublink { display: flex; align-items: center; gap: var(--sp-2); padding: 9px 0; font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; color: var(--brand-charcoal-700); text-decoration: none; } .meganav__m-sublink:hover { color: var(--color-primary); text-decoration: none; } .meganav__m-sublink > i { flex: 0 0 1.25em; text-align: center; color: var(--color-primary); } /* Per-audience glyph hues — same --usecase-* tokens as the desktop dropdown and the homepage cards, so the mobile Use-cases accordion carries the identity too. */ .meganav__m-sublink--academic > i { color: var(--usecase-academic); } .meganav__m-sublink--authors > i { color: var(--usecase-authors); } .meganav__m-sublink--professionals > i { color: var(--usecase-professionals); } .meganav__m-sublink--students > i { color: var(--usecase-students); } .meganav__m-sublink--technical > i { color: var(--usecase-technical); } /* Lock body scroll when overlay open */ body.meganav-overlay-open { overflow: hidden; } /* ========================================================================= Checkout shell — used by /checkout/, /checkout/success/, /account/welcome/ Minimal chrome: centred logo + slim footer. Marketing nav not present. ========================================================================= */ .checkout-shell { background: var(--brand-paper-50); min-height: 100vh; display: flex; flex-direction: column; } .checkout-shell__header { padding: var(--sp-4) var(--sp-5); background: #fff; border-bottom: 1px solid var(--brand-paper-200); text-align: center; } .checkout-shell__brand { display: inline-flex; align-items: center; text-decoration: none; } .checkout-shell__brand img { height: 48px; width: auto; } .checkout-shell__brand:hover { text-decoration: none; opacity: 0.85; } .checkout-shell__main { flex: 1; } .checkout-shell__footer { padding: var(--sp-4) var(--sp-5); background: #fff; border-top: 1px solid var(--brand-paper-200); text-align: center; font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--color-text-muted); } .checkout-shell__footer-link { color: var(--color-text-muted); text-decoration: none; font-weight: 600; } .checkout-shell__footer-link:hover { color: var(--color-primary); text-decoration: none; } .checkout-shell__footer-sep { margin: 0 8px; opacity: 0.5; } /* =================================================================== Notification bell (in-meganav, authenticated users). Markup: notifications/_bell.html · behaviour: notifications/bell.js. Badge uses --color-error (red) — universal notification convention. =================================================================== */ .notif-bell { position: relative; display: inline-flex; } .notif-bell__trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: transparent; color: var(--color-text); border-radius: var(--radius-pill); font-size: 1.05rem; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .notif-bell__trigger:hover { background: var(--color-border); color: var(--color-ink); } .notif-bell__badge { position: absolute; top: 0.05rem; right: 0; min-width: 1.05rem; height: 1.05rem; padding: 0 0.28rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; line-height: 1; color: #fff; background: var(--color-error); border-radius: var(--radius-pill); } .notif-bell__panel { position: absolute; top: calc(100% + 0.5rem); right: 0; width: 340px; max-width: 92vw; max-height: 26rem; overflow-y: auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-3); z-index: 1200; } .notif-bell__head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); } .notif-bell__heading { font-weight: 700; font-size: 0.95rem; color: var(--color-ink); } .notif-bell__actions { display: inline-flex; align-items: center; gap: 0.5rem; } /* Small green-ghost pill chips — in keeping with the site's .btn-pill family rather than the old bare underline text-links (which read as stray links inside the dropdown header). */ .notif-bell__action { border: 1px solid var(--color-border); background: transparent; padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; color: var(--brand-green-700); cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .notif-bell__action:hover, .notif-bell__action:focus-visible { background: var(--brand-green-50); border-color: var(--brand-green-300); color: var(--brand-green-700); text-decoration: none; } .notif-bell__list { padding: 0.25rem 0; } /* Dropdown rows (also the markup of notifications/_dropdown.html). */ .notif-list { list-style: none; margin: 0; padding: 0; } .notif-item + .notif-item { border-top: 1px solid var(--color-border); } .notif-item--unread { background: rgba(245, 184, 46, 0.07); } .notif-item__link { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem 1rem; color: var(--color-text); text-decoration: none; } .notif-item__link:hover { background: var(--color-paper); } .notif-item__icon { margin-top: 0.15rem; width: 1rem; text-align: center; color: var(--color-accent-hi); } .notif-item__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .notif-item__title { font-weight: 600; font-size: 0.875rem; color: var(--color-ink); } .notif-item__body { font-size: 0.8rem; color: var(--color-text-muted); } .notif-item__time { font-size: 0.72rem; color: var(--color-text-muted); } .notif-empty { padding: 1.25rem 1rem; text-align: center; font-size: 0.85rem; color: var(--color-text-muted); }