/* ========================================================================== Landing page preview — dedicated, narrowly-scoped stylesheet. Reuses brand tokens (--brand, --brand-dark, --bg, --ink, --muted, --border) and shared form/button classes already defined in base.css. Does not touch base.css/home.css so other pages are unaffected. ========================================================================== */ /* ----------------------------- Motion language ----------------------------- Four purposes, four durations, two curves. This file is loaded by the landing page and every service-detail page, so :root here covers both. fast micro-interaction — hover, focus, arrows, the call control ui state + navigation change, and soft media reveals reveal composed section entrance (heading groups, grids) hero the hero composition, and media dissolves One stagger step is used everywhere a group settles in sequence, so the hero, a section heading and the Support grid all share a rhythm rather than each having its own. Anything that does not fit one of these four purposes should not be animating. --ease-premium decelerates hard: content resolves into place rather than flying in. --ease-ui is the flatter curve for interaction feedback. */ :root { --motion-fast: 180ms; --motion-ui: 300ms; --motion-reveal: 480ms; --motion-hero: 540ms; --motion-step: 50ms; /* A tighter step for cascading within a single list, where the full step would stretch six items over a third of a second. */ --motion-step-fine: 35ms; /* Entrance durations, one per role. Named for the job rather than numbered, and deliberately unequal: the four finishing at different times is what makes the sequence read as layered rather than metronomic. Longer than the interaction durations above because entrance travel has to be legible — at the distances used here a 300ms move is a flicker, not a movement. */ --motion-in-label: 500ms; --motion-in-action: 560ms; --motion-in-body: 640ms; --motion-in-card: 680ms; --motion-in-title: 720ms; --ease-ui: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-premium: cubic-bezier(0.22, 1, 0.36, 1); /* A short overshoot for things that should feel like they land: controls and panels. Deliberately mild — it settles, it does not bounce. Never used on type. */ --ease-settle: cubic-bezier(0.34, 1.32, 0.64, 1); } .lp-page { --lp-dark-bg: var(--bg); --lp-dark-ink: var(--ink); --lp-dark-muted: var(--muted); --lp-dark-border: var(--border); /* Off-white editorial surface — same authoritative hexes as base.css's light-mode :root tokens, applied explicitly since forces dark-mode. */ --lp-light-bg: #ecf2f3; --lp-light-ink: #0b1521; --lp-light-muted: #4d5b6b; --lp-light-border: rgba(8, 47, 73, 0.14); /* Accent for *text* on the light surface. The marine blue used everywhere else (--brand / --brand-dark, #38bdf8 / #0ea5e9) measures 2.45:1 here, well under the 4.5:1 WCAG AA needs for normal text — fine as a graphic or on navy, unreadable as small type on off-white. Deliberately not --brand-800: base.css redefines that token inside its .dark-mode block to #0284c7, which still only reaches 3.62:1, so the obvious-looking fix would have silently failed. These two are named for the surface they belong to so they cannot be shadowed. #0369a1 = 5.24:1, #075985 = 6.68:1 against #ecf2f3. */ --lp-light-accent: #0369a1; --lp-light-accent-strong: #075985; /* Editorial mono face — used only for the numbered/spec-sheet labels in the Sectors, Our Work and Feedback sections below. */ --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Single source of truth for "how far below the fixed navbar a jump- navigated section's heading sits" — every section a nav link can jump to (Services/Capabilities, Sectors, Storage, About) reads this same value, instead of each one independently hand-tuning its own top offset and drifting out of sync with the others over time. */ --lp-jump-pad: clamp(32px, 6vw, 72px); overflow-x: clip; } @supports not (overflow-x: clip) { .lp-page { overflow-x: hidden; } } @media (min-width: 900px) and (max-height: 800px) { .lp-page { --lp-jump-pad: clamp(20px, 3vw, 32px); } } .lp-section { min-height: 100vh; min-height: 100svh; padding: clamp(48px, 7vw, 96px) 0; display: flex; flex-direction: column; justify-content: center; } /* .lp-section's min-height:100vh earns its keep where a section is a composition — the hero, the full-bleed carousel. Where it is a column of text it just pads the section out to the window: at 1440x900 it left 170px of empty above and below the reviews, and 388px under the About copy. These three size to their own content and their padding instead. */ #feedback.lp-section, #about.lp-section { min-height: auto; } .lp-light-section { background: var(--lp-light-bg); color: var(--lp-light-ink); } .lp-light-section .cme-section-title { color: var(--lp-light-ink); } .lp-light-section .cme-section-subtitle, .lp-light-section .lp-sectors__lede { color: var(--lp-light-muted); } .lp-light-section .cme-eyebrow { color: var(--lp-light-accent); } .lp-dark-section { background: var(--lp-dark-bg); color: var(--lp-dark-ink); } .lp-dark-section .cme-section-subtitle { color: var(--lp-dark-muted); } /* Without this the enquiry band's eyebrow fell through to base.css's muted grey while every other eyebrow on the page was brand blue. */ .lp-dark-section .cme-eyebrow { color: var(--brand-light, #38bdf8); } /* ----------------------------- Hero ----------------------------- */ .lp-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; color: #f4f7fb; padding-top: var(--nav-h, 90px); } /* .cme-hero__bg is shared with the old homepage, where base.css deliberately offsets it ("right 6%/10% center") to suit that page's own background image. Here the div only ever holds the active clip's poster, painted underneath