that subsequent phases fill. * ======================================================================== */ .page-shell { min-block-size: calc(100svh - var(--nav-height)); padding-block: var(--space-9); padding-inline: var(--gutter-mobile); max-inline-size: var(--container-max); margin-inline: auto; } @media (min-width: 768px) { .page-shell { padding-inline: var(--gutter-desktop); } } .page-shell__meta { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-5); } .page-shell__meta-dot { inline-size: 8px; block-size: 8px; background-color: var(--color-accent); display: inline-block; } /* ======================================================================== * CONSENT BANNER — site-wide GDPR notice (NEO-92). * Ships with `hidden` attribute; consent.js removes it on first visit only. * Non-modal by design: user can keep browsing, but the banner stays visible * until they choose. Bottom-anchored, stacks above footer. * ======================================================================== */ .consent-banner[hidden] { display: none; } .consent-banner { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: calc(var(--z-nav) + 5); background-color: var(--color-bg-elev); border-block-start: 1px solid var(--color-accent-line); color: var(--color-text); font-family: var(--font-body); box-shadow: 0 -20px 48px rgba(0, 0, 0, 0.4); } .consent-banner__inner { max-inline-size: var(--container-max); margin-inline: auto; padding: var(--space-5) var(--gutter-mobile); display: grid; gap: var(--space-4); } @media (min-width: 768px) { .consent-banner__inner { padding: var(--space-5) var(--gutter-desktop); grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-7); } } .consent-banner__kicker { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-mono-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-text-muted); margin-block-end: var(--space-2); } .consent-banner__kicker::before { content: ''; inline-size: 6px; block-size: 6px; background-color: var(--color-accent); } .consent-banner__heading { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: var(--tracking-display); margin-block-end: var(--space-2); } .consent-banner__body { font-size: var(--text-body-sm); line-height: var(--leading-normal); color: var(--color-text-muted); max-inline-size: 68ch; } .consent-banner__body a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-accent-line); text-underline-offset: 3px; } .consent-banner__body a:hover, .consent-banner__body a:focus-visible { text-decoration-color: var(--color-accent); } .consent-banner__toggles { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-4); font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } .consent-banner__toggle { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; } .consent-banner__toggle[data-locked="true"] { cursor: not-allowed; color: var(--color-text); } .consent-banner__toggle input { accent-color: var(--color-accent); inline-size: 16px; block-size: 16px; } .consent-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } @media (min-width: 768px) { .consent-banner__actions { justify-content: flex-end; } } .consent-banner__btn { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: var(--tracking-mono); text-transform: uppercase; padding: var(--space-3) var(--space-5); border: 1px solid var(--color-border); background-color: transparent; color: var(--color-text); cursor: pointer; transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); } .consent-banner__btn:hover, .consent-banner__btn:focus-visible { border-color: var(--color-text); } .consent-banner__btn--primary { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); } .consent-banner__btn--primary:hover, .consent-banner__btn--primary:focus-visible { background-color: var(--color-text); border-color: var(--color-text); color: var(--color-bg); } .consent-banner__btn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } /* ======================================================================== * SITE-WIDE HOVER TREATMENT (NEO-102 item 7) * Universal card/cluster lift — accent-border, subtle translate, accent * glow. Applied via the `.hover-lift` hook OR automatically to any of the * canonical card selectors below so hub + service pages stay consistent. * Reduced-motion: translate is neutralised; border/colour still shift. * ======================================================================== */ .hover-lift, .service-card, .intervene__body, .protocol-step, .related-card, .service-practice__card, .dontdo__item, .proof__tile, .service-proof__tile { transition: border-color var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out); } .hover-lift:hover, .intervene__body:hover, .protocol-step:hover, .dontdo__item:hover { border-color: var(--color-accent); background-color: rgba(255, 107, 0, 0.04); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); } /* Non-bordered items (proof tiles, dontdo) still get a subtle shift. */ .proof__tile:hover, .service-proof__tile:hover { background-color: rgba(255, 107, 0, 0.04); } .proof__tile--accent:hover, .service-proof__tile--accent:hover { background-color: rgba(255, 107, 0, 0.09); } @media (prefers-reduced-motion: reduce) { .hover-lift, .service-card, .intervene__body, .protocol-step, .related-card, .service-practice__card, .dontdo__item, .proof__tile, .service-proof__tile { transition: none; } .hover-lift:hover, .intervene__body:hover, .protocol-step:hover, .dontdo__item:hover { transform: none; } } /* ======================================================================== * SECTION BACKGROUND ALTERNATION (NEO-102 item 6) * Two-step pattern: `obsidian` (page default) ↔ `alt` (soft elevated band). * The alt shade is a computed blend of surface over the obsidian bg so no * new token is required, while still being visibly distinct between * adjacent sections (board flagged that sections read as a single flat * dark before this change). * ======================================================================== */ .section--alt, .section-alt { background-color: var(--color-bg-elev); position: relative; /* Round 7 (NEO-113 item 4): inset wash bumped from 0.022 → 0.045 to reinforce the tier shift the board asked for. */ box-shadow: inset 0 0 0 9999px rgba(244, 244, 245, 0.045); } .section--obsidian, .section-obsidian { background-color: var(--color-bg); } /* ======================================================================== * SECTION SCROLL LIGHT-UP (NEO-108 item 12) * One-shot accent pulse when a section enters the viewport. Used on the * hub hero status strip, "How I intervene" wrapper, and the "Industries * crossed" engagement band. NOT applied to individual logos or cards. * ======================================================================== */ .section-lightup { position: relative; transition: box-shadow 600ms var(--ease-out); } .section-lightup.is-lit { animation: section-lightup-pulse 1400ms var(--ease-out) 1; } @keyframes section-lightup-pulse { 0% { box-shadow: inset 0 0 0 0 rgba(255, 107, 0, 0); } 35% { box-shadow: inset 0 0 0 1px rgba(255, 107, 0, 0.55); background-color: rgba(255, 107, 0, 0.04); } 100% { box-shadow: inset 0 0 0 0 rgba(255, 107, 0, 0); } } @media (prefers-reduced-motion: reduce) { .section-lightup.is-lit { animation: none; } }