/* ============================================================= Zeeri Labs — Shared Stylesheet (v3, light + dark themes) Engineering ideas into scalable software ------------------------------------------------------------- 1. Design tokens + THEMES (light default, dark override) 2. Base / reset 3. Layout helpers 4. Typography + gradient text 5. Buttons 6. Header / navigation (glass) + theme toggle 7. Footer 8. Reusable components 9. Page sections (hero, aurora, CTA, forms…) 10. Animations / micro-interactions + page transitions 11. Responsive breakpoints ------------------------------------------------------------- Theming: components reference *semantic* tokens (--bg, --surface, --text, --heading, --border …). Only those tokens are redefined for dark mode, so the whole site flips by toggling . Brand colors + gradients stay constant. The hero, page-hero, CTA banner, info card and footer are intentionally dark in BOTH themes (they carry the aurora look). ============================================================= */ /* ------------------------------------------------------------- 1. Design tokens + themes ------------------------------------------------------------- */ :root { /* ---- Brand neutral (dark heading tone, constant) ---- */ --navy: #0F2E5C; /* ---- BRAND ACCENT (derived from the Zeeri Labs logo). Every gradient, glow, tint, link and button flows from these tokens, so the whole palette is retuned by editing just this group. ---- */ --accent: #1B3B6F; /* logo gradient start — dark steel navy */ --accent-2: #2563A8; /* logo gradient mid — rich blue */ --accent-3: #38BDF8; /* logo gradient end — sky cyan */ --accent-rgb: 27, 59, 111; --accent2-rgb: 37, 99, 168; --accent3-rgb: 56, 189, 248; --accent-dot: #7DD3FC; /* logo accent dot — light cyan */ --grad-text: linear-gradient(100deg, #7DD3FC 0%, #4FC3F7 45%, #38BDF8 100%); /* Logo wordmark colors */ --logo-ink: #0F2E5C; /* "Zee" + "Labs" — navy in light, white in dark */ --logo-sky: #38BDF8; /* "ri" + underline accent (constant across themes) */ /* ---- Derived from the accent (do NOT edit per-palette) ---- */ --blue: var(--accent); --blue-bright: var(--accent-2); --blue-600: var(--accent); --indigo: var(--accent-2); --violet: var(--accent-3); --cyan: var(--accent-2); --grad: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent-3) 100%); --grad-soft: linear-gradient(120deg, var(--accent), var(--accent-2)); --grad-cyan: linear-gradient(120deg, var(--accent-2), var(--accent)); --ink: #070B1A; /* always-dark panels in dark theme */ --ink-800: #0C1226; --ink-700: #121a33; --success: #16a34a; --error: #e11d48; /* ---- Semantic surface/text tokens — LIGHT (default) ---- */ --bg: #ffffff; /* page background */ --surface: #ffffff; /* cards & elevated surfaces */ --surface-muted: #f4f7fb; /* subtle section background */ --surface-2: #eaf0f9; --text: #131a2e; /* body text */ --text-muted: #5a6684; /* secondary text */ --heading: #0F2E5C; /* headings on light surfaces */ --border: #e2e8f3; /* Opaque header — glass/blur repaints on every navigation and causes chrome flicker */ --header-bg: #ffffff; --nav-mobile-bg: #ffffff; --toggle-bg: #ffffff; /* Hero + hero dashboard mockup (theme-aware) */ --hero-bg: radial-gradient(125% 130% at 50% 0%, rgba(var(--accent-rgb), .13) 0%, rgba(var(--accent2-rgb), .05) 46%, var(--bg) 100%); --hero-heading: var(--heading); --hero-fg: #46527a; --hero-hairline: rgba(15, 46, 92, .12); --hero-grid: rgba(27, 59, 111, .06); --hero-aurora-op: .55; --badge-bg: rgba(var(--accent-rgb), .08); --badge-border: rgba(var(--accent-rgb), .18); --badge-fg: #33436b; --win-bg: linear-gradient(160deg, #ffffff, #e9f1fe); --win-border: var(--border); --win-heading: var(--heading); --win-hairline: var(--border); /* Accent panels — CTA banner, contact info card, footer (theme-aware) */ --panel-bg: linear-gradient(135deg, rgba(var(--accent-rgb), .10) 0%, rgba(var(--accent2-rgb), .06) 55%, rgba(var(--accent3-rgb), .10) 100%), linear-gradient(var(--bg), var(--bg)); --panel-chip-bg: rgba(var(--accent-rgb), .1); --panel-chip-fg: var(--indigo); --footer-bg: #e6ecf5; --footer-surface: #ffffff; --footer-border: var(--border); color-scheme: light; /* ---- Typography ---- */ --font-head: "Space Grotesk", "Poppins", system-ui, sans-serif; --font-body: "Inter", "Roboto", system-ui, -apple-system, sans-serif; /* ---- Radii ---- */ --radius-sm: 12px; --radius: 18px; --radius-lg: 28px; --radius-xl: 36px; /* ---- Shadows ---- */ --shadow-sm: 0 1px 2px rgba(16, 30, 66, .06), 0 2px 6px rgba(16, 30, 66, .06); --shadow: 0 12px 30px rgba(16, 30, 66, .10); --shadow-lg: 0 30px 70px rgba(16, 30, 66, .16); --glow: 0 18px 40px rgba(var(--accent-rgb), .35); /* ---- Layout ---- */ --container: 1200px; --header-h: 76px; /* ---- Motion ---- */ --ease: cubic-bezier(.4, 0, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --transition: 260ms var(--ease); } /* ---- DARK theme: explicit choice ---- */ :root[data-theme="dark"] { --bg: #080d1c; --surface: #10182e; --surface-muted: #0b1122; --surface-2: #172035; --text: #dfe6f5; --text-muted: #97a3c2; --heading: #f3f6fd; --border: #222c46; --header-bg: #0b1220; --nav-mobile-bg: #0b1220; --toggle-bg: #131c34; --hero-bg: var(--ink); --hero-heading: #ffffff; --hero-fg: #c3cfec; --logo-ink: #ffffff; /* wordmark goes white on dark surfaces */ --hero-hairline: rgba(255, 255, 255, .1); --hero-grid: rgba(255, 255, 255, .045); --hero-aurora-op: 1; --badge-bg: rgba(255, 255, 255, .07); --badge-border: rgba(255, 255, 255, .16); --badge-fg: #dbe4fb; --win-bg: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); --win-border: rgba(255, 255, 255, .18); --win-heading: #ffffff; --win-hairline: rgba(255, 255, 255, .1); --panel-bg: var(--ink); --panel-chip-bg: rgba(255, 255, 255, .1); --panel-chip-fg: #a5b4fc; --footer-bg: var(--ink); --footer-surface: rgba(255, 255, 255, .06); --footer-border: rgba(255, 255, 255, .1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .35); --shadow: 0 14px 34px rgba(0, 0, 0, .5); --shadow-lg: 0 34px 76px rgba(0, 0, 0, .6); color-scheme: dark; } /* Light is the default theme; dark is applied only via [data-theme="dark"] (the tiny inline script defaults new visitors to light). */ /* ------------------------------------------------------------- 2. Base / reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); -webkit-text-size-adjust: 100%; background-color: var(--bg); } /* Cross-document view transitions (Chromium). Header is a separate named layer that does not fade or morph — only page content (root) soft-crossfades. Without naming the header, root animation fades the whole document and the bar flickers. */ @view-transition { navigation: auto; } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.65; font-size: 1.02rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--blue); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--indigo); } :root[data-theme="dark"] a:hover { color: #a5b4fc; } ul { margin: 0; padding: 0; list-style: none; } ::selection { background: rgba(var(--accent2-rgb), .28); } :focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 10px 18px; z-index: 200; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; color: #fff; } /* ------------------------------------------------------------- 3. Layout helpers ------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; position: relative; } .section { padding-block: 92px; position: relative; } .section--tight { padding-block: 54px; } .section--light { background: radial-gradient(60% 60% at 100% 0%, rgba(var(--accent2-rgb),.06), transparent 60%), radial-gradient(50% 50% at 0% 100%, rgba(var(--accent-rgb),.05), transparent 60%), var(--surface-muted); transition: background-color .4s var(--ease); } .section--navy { background: var(--panel-bg); color: var(--hero-fg); overflow: hidden; transition: background-color .4s var(--ease), color .4s var(--ease); } .section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; } .section-head--left { margin-inline: 0; text-align: left; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--indigo); background: rgba(var(--accent2-rgb), .09); border: 1px solid rgba(var(--accent2-rgb), .18); padding: 7px 15px; border-radius: 999px; margin-bottom: 20px; } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 3px rgba(var(--accent2-rgb),.18); } :root[data-theme="dark"] .eyebrow { color: #a5b4fc; background: rgba(var(--accent2-rgb),.14); border-color: rgba(var(--accent2-rgb),.3); } .section--navy .eyebrow { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #a5b4fc; } .grid { display: grid; gap: 26px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } /* ------------------------------------------------------------- 4. Typography ------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-head); color: var(--heading); line-height: 1.08; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.03em; } .section--navy h1, .section--navy h2, .section--navy h3 { color: var(--hero-heading); } h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); } h2 { font-size: clamp(2rem, 4vw, 3rem); } h3 { font-size: 1.32rem; } p { margin: 0 0 1rem; } .lead { font-size: 1.18rem; color: var(--text-muted); line-height: 1.7; } .section--navy .lead { color: var(--hero-fg); } .muted { color: var(--text-muted); } .text-center { text-align: center; } .grad-text, .hero h1 .grad-text, .page-hero h1 { display: inline-block; /* tight clip box — prevents gradient fringe past glyphs */ background-image: var(--grad-text); background-size: 100% 100%; background-repeat: no-repeat; background-color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* ------------------------------------------------------------- 5. Buttons ------------------------------------------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-head); font-weight: 600; font-size: .98rem; padding: 14px 28px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; overflow: hidden; isolation: isolate; /* keep gradient/shine layers clipped inside the pill */ /* Avoid transitioning the `background` shorthand — solid↔gradient blends cause edge leaks */ transition: transform var(--transition), box-shadow var(--transition), color var(--transition), border-color var(--transition), background-color var(--transition), filter var(--transition); white-space: nowrap; } .btn:hover { transform: translateY(-3px); } .btn:active { transform: translateY(-1px); } /* Gradient fill lives on a full-bleed ::before so hover never morphs solid→gradient */ .btn-primary { color: #fff; background-color: var(--accent-2); /* solid underlay kills any transparent fringe */ background-image: none; border-color: transparent; box-shadow: var(--glow); z-index: 0; } .btn-primary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--grad); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; z-index: -1; pointer-events: none; transition: filter var(--transition); } .btn-primary:hover { color: #fff; background-color: var(--accent-2); border-color: transparent; box-shadow: 0 22px 48px rgba(var(--accent2-rgb), .45); } .btn-primary:hover::before { filter: brightness(1.08) saturate(1.06); } .btn-primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; border-radius: inherit; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.28) 48%, transparent 100%); transform: skewX(-18deg); transition: left 650ms var(--ease); pointer-events: none; z-index: 1; } .btn-primary:hover::after { left: 130%; } /* Keep label above the shine sweep */ .btn-primary > * { position: relative; z-index: 2; } .btn-outline { background-color: var(--surface); background-image: none; color: var(--heading); border-color: var(--border); } .btn-outline:hover { border-color: var(--indigo); color: var(--indigo); box-shadow: var(--shadow-sm); } .btn-ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); backdrop-filter: blur(8px); } .btn-ghost-light:hover { background: rgba(255,255,255,.16); color: #fff; } /* On a LIGHT hero the white-glass ghost button would be invisible — give it a light treatment. Scoped to the hero so the always-dark CTA banner keeps the white-glass version. */ :root[data-theme="light"] .hero .btn-ghost-light, :root[data-theme="light"] .page-hero .btn-ghost-light, :root[data-theme="light"] .cta-banner .btn-ghost-light, :root:not([data-theme]) .hero .btn-ghost-light, :root:not([data-theme]) .page-hero .btn-ghost-light, :root:not([data-theme]) .cta-banner .btn-ghost-light { background: rgba(255,255,255,.65); color: var(--heading); border-color: var(--border); } :root[data-theme="light"] .hero .btn-ghost-light:hover, :root[data-theme="light"] .page-hero .btn-ghost-light:hover, :root[data-theme="light"] .cta-banner .btn-ghost-light:hover, :root:not([data-theme]) .hero .btn-ghost-light:hover, :root:not([data-theme]) .page-hero .btn-ghost-light:hover, :root:not([data-theme]) .cta-banner .btn-ghost-light:hover { background: #fff; color: var(--indigo); border-color: var(--indigo); } .btn-lg { padding: 17px 34px; font-size: 1.05rem; } .btn-block { width: 100%; } /* ------------------------------------------------------------- 6. Header / navigation + theme toggle ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); min-height: var(--header-h); max-height: var(--header-h); box-sizing: border-box; /* Fully opaque — no backdrop-filter (that was a major flicker source) */ background-color: var(--header-bg); border-bottom: 1px solid var(--border); /* Lifted out of the root crossfade so the bar never fades with page content */ view-transition-name: site-header; } /* Desktop: brand | centered tabs | actions — fixed geometry on every page */ .nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--header-h); min-height: var(--header-h); max-height: var(--header-h); box-sizing: border-box; } /* Wordmark — system-ui first so metrics never depend on webfont load timing */ .brand { display: inline-flex; align-items: baseline; gap: 7px; flex: 0 0 auto; white-space: nowrap; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-weight: 700; font-size: 24px; /* px lock — same on every page */ line-height: 28px; letter-spacing: -.02em; color: var(--logo-ink); height: 28px; box-sizing: border-box; text-decoration: none; } .brand:hover { color: var(--logo-ink); } .brand__word { position: relative; color: var(--logo-ink); padding-bottom: 4px; line-height: 24px; } .brand__word::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--logo-sky); } .brand__accent { color: var(--logo-sky); } .brand__labs { color: var(--logo-ink); font-weight: 600; line-height: 24px; } .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 2px; white-space: nowrap; margin: 0; padding: 0; height: 40px; box-sizing: border-box; } .nav-links > li { position: relative; z-index: 1; list-style: none; display: flex; align-items: center; height: 40px; margin: 0; padding: 0; } .nav-links a { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border-radius: 999px; color: var(--text); /* System stack in chrome — no FOUT/size jump while Inter loads for page body */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: 0; white-space: nowrap; background-color: transparent; box-sizing: border-box; text-decoration: none; /* Color only — avoid background transitions that flash during page swaps */ transition: color 160ms var(--ease); } .nav-links a:hover { color: var(--indigo); background-color: rgba(var(--accent2-rgb), .1); } .nav-links a.active { color: var(--indigo); background-color: rgba(var(--accent2-rgb), .12); font-weight: 500; } :root[data-theme="dark"] .nav-links a:hover { color: #a5b4fc; background-color: rgba(165, 180, 252, .1); } :root[data-theme="dark"] .nav-links a.active { color: #a5b4fc; background-color: rgba(165, 180, 252, .16); } .nav-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; height: 44px; } .nav-links .nav-cta { display: none; } /* "Get a Quote" — soft fill by default; gradient fades in on hover (no solid↔gradient blend). */ .nav-quote, .nav-cta .btn { color: var(--accent); background-color: rgba(var(--accent-rgb), .1); background-image: none; border-color: rgba(var(--accent-rgb), .24); box-shadow: none; z-index: 0; /* Fixed chrome size — matches theme toggle, identical on every page */ height: 44px; min-height: 44px; max-height: 44px; padding: 0 18px; font-size: 14px; line-height: 1; box-sizing: border-box; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-weight: 600; } /* Full-bleed gradient layer — opacity fade avoids edge color leakage on hover */ .nav-quote::before, .nav-cta .btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: var(--accent-2); background-image: var(--grad); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity var(--transition), filter var(--transition); z-index: -1; pointer-events: none; } .nav-quote::after, .nav-cta .btn::after { content: none; } /* no shine sweep on the soft header CTA */ .nav-quote:hover, .nav-cta .btn:hover { color: #fff; background-color: var(--accent-2); /* matches gradient mid so no fringe shows through */ border-color: transparent; box-shadow: var(--glow); } .nav-quote:hover::before, .nav-cta .btn:hover::before { opacity: 1; } :root[data-theme="dark"] .nav-quote, :root[data-theme="dark"] .nav-cta .btn { color: #93c5fd; /* readable light blue — no muddy color-mix fringe */ background-color: rgba(var(--accent2-rgb), .18); border-color: rgba(var(--accent3-rgb), .28); } :root[data-theme="dark"] .nav-quote:hover, :root[data-theme="dark"] .nav-cta .btn:hover { color: #fff; background-color: var(--accent-2); border-color: transparent; } /* On the Contact page the CTA is the current page — show gradient filled. */ .nav-quote.active { color: #fff; background-color: var(--accent-2); border-color: transparent; box-shadow: var(--glow); } .nav-quote.active::before { opacity: 1; } .nav-quote.active:hover { color: #fff; } .nav-quote.active:hover::before { filter: brightness(1.08) saturate(1.06); } /* Theme toggle button */ .theme-toggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex-shrink: 0; display: grid; place-items: center; background: var(--toggle-bg); border: 1px solid var(--border); border-radius: 12px; color: var(--heading); cursor: pointer; box-sizing: border-box; transition: border-color 160ms var(--ease), color 160ms var(--ease); } .theme-toggle:hover { border-color: var(--indigo); color: var(--indigo); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; flex-shrink: 0; background: var(--toggle-bg); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; } .nav-toggle span { display: block; width: 20px; height: 2px; margin-inline: auto; background: var(--heading); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-backdrop { position: fixed; inset: 0; background: rgba(7, 11, 26, .5); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--transition); z-index: 90; } .nav-backdrop.open { opacity: 1; visibility: visible; } /* ------------------------------------------------------------- 7. Footer (always dark) ------------------------------------------------------------- */ .site-footer { background: var(--footer-bg); color: var(--hero-fg); padding-top: 72px; position: relative; overflow: hidden; transition: background-color .4s var(--ease), color .4s var(--ease); } .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent2-rgb),.6), rgba(var(--accent2-rgb),.5), transparent); } .site-footer::after { content: ""; position: absolute; bottom: -160px; left: 50%; transform: translateX(-50%); width: 680px; height: 320px; background: radial-gradient(circle, rgba(var(--accent-rgb),.20), transparent 70%); pointer-events: none; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 44px; padding-bottom: 52px; position: relative; } .site-footer h4 { color: var(--hero-heading); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; } .site-footer .brand { color: var(--hero-heading); margin-bottom: 16px; } .site-footer .brand:hover { color: var(--hero-heading); } .site-footer p { color: var(--hero-fg); } .footer-links a { display: block; color: var(--hero-fg); padding: 6px 0; } .footer-links a:hover { color: var(--hero-heading); padding-left: 4px; } .footer-contact li { display: flex; gap: 10px; margin-bottom: 12px; color: var(--hero-fg); } .footer-contact a { color: var(--hero-fg); } .footer-contact a:hover { color: var(--hero-heading); } .newsletter { display: flex; gap: 8px; margin-top: 16px; } .newsletter input { flex: 1; min-width: 0; padding: 13px 15px; border-radius: 999px; border: 1px solid var(--footer-border); background: var(--footer-surface); color: var(--text); font-family: var(--font-body); } .newsletter input::placeholder { color: var(--text-muted); } .newsletter input:focus { outline-color: var(--blue-bright); } .social { display: flex; gap: 10px; margin-top: 20px; } .social a { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background-color: var(--footer-surface); border: 1px solid var(--footer-border); color: var(--hero-fg); overflow: hidden; isolation: isolate; transition: color var(--transition), transform var(--transition), border-color var(--transition), background-color var(--transition); } .social a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: var(--accent-2); background-image: var(--grad); background-size: 100% 100%; opacity: 0; transition: opacity var(--transition); z-index: -1; pointer-events: none; } .social a:hover { color: #fff; transform: translateY(-3px); border-color: transparent; background-color: var(--accent-2); } .social a:hover::before { opacity: 1; } .social svg { width: 18px; height: 18px; position: relative; z-index: 1; } .footer-bottom { border-top: 1px solid var(--footer-border); padding-block: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .9rem; color: var(--hero-fg); position: relative; } /* ------------------------------------------------------------- 8. Reusable components ------------------------------------------------------------- */ .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color .4s var(--ease); height: 100%; overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--transition); pointer-events: none; } .card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; } .card:hover::before { opacity: 1; } .card h3 { margin-bottom: 10px; } .card p { color: var(--text-muted); margin-bottom: 0; } /* Service / feature icon chips — soft tint + brand icon (clean product style) */ .icon-chip { position: relative; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 20px; flex-shrink: 0; color: var(--accent-2); background: rgba(var(--accent2-rgb), .1); border: 1px solid rgba(var(--accent2-rgb), .12); box-shadow: none; transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition); } .icon-chip svg { width: 24px; height: 24px; stroke-width: 1.75; } .card:hover .icon-chip { color: #fff; background: var(--accent-2); border-color: transparent; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--accent2-rgb), .28); } :root[data-theme="dark"] .icon-chip { color: #93c5fd; background: rgba(var(--accent2-rgb), .16); border-color: rgba(var(--accent3-rgb), .18); } :root[data-theme="dark"] .card:hover .icon-chip { color: #fff; background: var(--accent-2); border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, .4); } .check-list li { position: relative; padding-left: 30px; margin-bottom: 11px; color: var(--text-muted); } .check-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 19px; height: 19px; border-radius: 50%; background: var(--grad); } .check-list li::after { content: ""; position: absolute; left: 5px; top: 9px; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .tag { display: inline-block; font-size: .78rem; font-weight: 600; padding: 5px 13px; border-radius: 999px; background: rgba(var(--accent2-rgb),.1); color: var(--indigo); border: 1px solid rgba(var(--accent2-rgb),.16); } :root[data-theme="dark"] .tag { color: #a5b4fc; background: rgba(var(--accent2-rgb),.16); border-color: rgba(var(--accent2-rgb),.3); } .tag-row { display: flex; flex-wrap: wrap; gap: 8px; } .badge-pill { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 500; padding: 8px 16px; border-radius: 999px; background: var(--badge-bg); border: 1px solid var(--badge-border); color: var(--badge-fg); backdrop-filter: blur(8px); margin-bottom: 22px; } .badge-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.25); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .stat { text-align: center; } .stat__num { font-family: var(--font-head); font-size: clamp(2.4rem, 4.5vw, 3.4rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .stat__label { margin-top: 10px; color: var(--text-muted); font-size: .96rem; } .section--navy .stat__label { color: var(--hero-fg); } .logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 44px; } .logo-strip img { height: 32px; width: auto; opacity: .5; filter: grayscale(1); transition: opacity var(--transition), filter var(--transition), transform var(--transition); } .logo-strip img:hover { opacity: 1; filter: grayscale(0); transform: translateY(-2px); } :root[data-theme="dark"] .logo-strip img { filter: grayscale(1) invert(1) brightness(1.6); opacity: .45; } :root[data-theme="dark"] .logo-strip img:hover { filter: grayscale(0) invert(0); opacity: 1; } .media-round { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border); position: relative; } .media-round img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); } .media-round:hover img { transform: scale(1.04); } /* ------------------------------------------------------------- 9. Page sections ------------------------------------------------------------- */ .hero, .page-hero { position: relative; background: var(--hero-bg); color: var(--hero-fg); overflow: hidden; isolation: isolate; transition: color .4s var(--ease); } .hero::before, .page-hero::before { content: ""; position: absolute; inset: -25%; z-index: -2; background: radial-gradient(38% 46% at 18% 22%, rgba(var(--accent-rgb),.60), transparent 62%), radial-gradient(34% 42% at 82% 14%, rgba(var(--accent3-rgb),.50), transparent 62%), radial-gradient(42% 52% at 72% 82%, rgba(var(--accent2-rgb),.34), transparent 60%); opacity: var(--hero-aurora-op); filter: blur(36px); animation: aurora 20s ease-in-out infinite alternate; } .hero::after, .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 35%, transparent 78%); mask-image: radial-gradient(circle at 50% 35%, #000 35%, transparent 78%); } @keyframes aurora { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(3%, 2%, 0) scale(1.08); } 100% { transform: translate3d(-3%, -2%, 0) scale(1.04); } } .hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-block: clamp(72px, 11vw, 130px); } .hero__inner { position: relative; z-index: 1; } .hero h1 { color: var(--hero-heading); margin-bottom: 22px; } .hero .lead { color: var(--hero-fg); margin-bottom: 34px; max-width: 560px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; } .hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--hero-hairline); } .hero__meta .stat__num { font-size: 1.7rem; } .hero__meta div span { display: block; font-size: .82rem; color: var(--hero-fg); } .hero__visual { position: relative; z-index: 1; height: 100%; min-height: 380px; } .window { position: relative; background: var(--win-bg); border: 1px solid var(--win-border); border-radius: 20px; box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); overflow: hidden; animation: floaty 7s ease-in-out infinite; } .window__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--win-hairline); } .window__bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.25); flex-shrink: 0; } .window__bar i:nth-child(1) { background: #ff5f57; } .window__bar i:nth-child(2) { background: #febc2e; } .window__bar i:nth-child(3) { background: #28c840; } .window__tabs { display: flex; gap: 4px; margin-left: 12px; min-width: 0; } .window__tab { font-size: .72rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: var(--text-muted); padding: 4px 10px; border-radius: 7px; white-space: nowrap; background: transparent; } .window__tab.is-active { color: var(--win-heading); background: rgba(var(--accent-rgb), .1); } .window__body { padding: 22px; } .window__body--code { padding: 0; } .window__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .window__row h4 { color: var(--win-heading); font-size: 1rem; margin: 0; } .window__pill { font-size: .72rem; color: #a7f3d0; background: rgba(16,185,129,.16); padding: 4px 10px; border-radius: 999px; } /* Hero code-editor mockup */ .code-mock { padding: 16px 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .82rem; line-height: 1.7; animation: code-in .8s var(--spring) both; } .code-line { display: flex; gap: 14px; padding: 0 18px; color: var(--win-heading); white-space: nowrap; overflow: hidden; } .code-line .ln { flex-shrink: 0; width: 1.2em; text-align: right; color: var(--text-muted); opacity: .55; user-select: none; } .code-line .kw { color: #7c3aed; } .code-line .fn { color: #2563eb; } .code-line .nm { color: #0891b2; } .code-line .str { color: #059669; } .code-line .num { color: #d97706; } .code-line .cm { color: var(--text-muted); opacity: .75; font-style: italic; } .code-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 11px 18px; border-top: 1px solid var(--win-hairline); font-size: .72rem; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .code-status__ok { color: #059669; font-weight: 600; } @keyframes code-in { from { opacity: 0; transform: translateY(8px); } } :root[data-theme="dark"] .code-line .kw { color: #c4b5fd; } :root[data-theme="dark"] .code-line .fn { color: #93c5fd; } :root[data-theme="dark"] .code-line .nm { color: #67e8f9; } :root[data-theme="dark"] .code-line .str { color: #6ee7b7; } :root[data-theme="dark"] .code-line .num { color: #fbbf24; } :root[data-theme="dark"] .code-status__ok { color: #6ee7b7; } .float-card { position: absolute; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.5); border-radius: 16px; padding: 13px 17px; box-shadow: 0 22px 46px rgba(0,0,0,.3); animation: floaty 6s ease-in-out infinite; } .float-card .fc-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex-shrink: 0; } .float-card strong { display: block; font-family: var(--font-head); color: var(--navy); font-size: 1.05rem; line-height: 1.1; } .float-card small { color: #5a6684; font-size: .78rem; } .float-card--tl { top: -22px; left: -26px; animation-delay: .4s; } .float-card--br { bottom: -20px; right: -22px; animation-delay: 1.2s; } @keyframes floaty { 50% { transform: translateY(-14px); } } .page-hero__inner { position: relative; z-index: 1; max-width: 780px; padding-block: clamp(60px, 9vw, 104px); } .page-hero h1 { margin-bottom: 18px; } .page-hero .lead { color: var(--hero-fg); } .breadcrumb { font-size: .88rem; color: var(--hero-fg); margin-bottom: 18px; letter-spacing: .02em; } .breadcrumb a { color: var(--hero-heading); } .cta-banner { position: relative; background: var(--panel-bg); color: var(--hero-fg); border-radius: var(--radius-xl); padding: clamp(44px, 7vw, 76px); text-align: center; overflow: hidden; isolation: isolate; box-shadow: var(--shadow-lg); transition: color .4s var(--ease); } .cta-banner::before { content: ""; position: absolute; inset: -30%; z-index: -1; background: radial-gradient(40% 50% at 20% 20%, rgba(var(--accent-rgb),.7), transparent 60%), radial-gradient(40% 50% at 85% 30%, rgba(var(--accent3-rgb),.6), transparent 60%), radial-gradient(50% 60% at 60% 100%, rgba(var(--accent2-rgb),.4), transparent 60%); opacity: var(--hero-aurora-op); filter: blur(30px); animation: aurora 16s ease-in-out infinite alternate; } .cta-banner h2 { color: var(--hero-heading); } .cta-banner p { color: var(--hero-fg); max-width: 580px; margin-inline: auto; } .cta-banner .hero__cta { justify-content: center; margin-top: 30px; } .stack-group { margin-bottom: 54px; } .stack-group h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .stack-group h3 .tag { font-size: .72rem; } .stack-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; } .stack-item { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 12px; text-align: center; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color .4s var(--ease); } .stack-item:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(var(--accent2-rgb),.35); } .stack-item img { height: 42px; margin: 0 auto 14px; width: auto; transition: transform var(--transition); } .stack-item:hover img { transform: scale(1.12); } .stack-item span { font-size: .86rem; font-weight: 500; color: var(--text); } .team-card { text-align: left; padding: 0; overflow: hidden; } .team-card__photo { aspect-ratio: 1 / 1; overflow: hidden; position: relative; } .team-card__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,11,26,.5), transparent 45%); opacity: 0; transition: opacity var(--transition); } .team-card:hover .team-card__photo::after { opacity: 1; } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); } .team-card:hover .team-card__photo img { transform: scale(1.06); } .team-card__body { padding: 24px 26px 28px; } .team-card h3 { margin-bottom: 3px; } .team-card .role { color: var(--indigo); font-weight: 600; font-size: .9rem; margin-bottom: 12px; } :root[data-theme="dark"] .team-card .role { color: #a5b4fc; } .team-card p { font-size: .92rem; } .work-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .work-card__thumb { aspect-ratio: 16 / 10; overflow: hidden; position: relative; } .work-card__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(var(--accent-rgb),.25), rgba(var(--accent3-rgb),.25)); opacity: 0; transition: opacity var(--transition); } .work-card:hover .work-card__thumb::after { opacity: 1; } .work-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); } .work-card:hover .work-card__thumb img { transform: scale(1.07); } .work-card__body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; } .work-card h3 { margin-bottom: 8px; } .work-card p { flex: 1; font-size: .94rem; } .work-card .tag-row { margin-top: 18px; } .value-item { display: flex; gap: 18px; align-items: flex-start; } .value-item .icon-chip { flex-shrink: 0; margin-bottom: 0; width: 52px; height: 52px; } .value-item .icon-chip svg { width: 22px; height: 22px; } .value-item h3 { font-size: 1.14rem; margin-bottom: 5px; } .value-item p { font-size: .95rem; margin-bottom: 0; color: var(--text-muted); } .job { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 30px; margin-bottom: 16px; transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition), background-color .4s var(--ease); } .job:hover { box-shadow: var(--shadow); border-color: rgba(var(--accent2-rgb),.35); transform: translateX(6px); } .job__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--text-muted); font-size: .9rem; margin-top: 8px; } .job__meta span { display: inline-flex; align-items: center; gap: 6px; } .job h3 { margin-bottom: 0; font-size: 1.16rem; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; } .form-field { margin-bottom: 22px; } .form-field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 8px; color: var(--heading); } .form-field input, .form-field textarea { width: 100%; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition), background-color .4s var(--ease); } .form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.14); } .form-field textarea { resize: vertical; min-height: 150px; } .form-field.invalid input, .form-field.invalid textarea { border-color: var(--error); } .field-error { display: none; color: var(--error); font-size: .84rem; margin-top: 7px; } .form-field.invalid .field-error { display: block; } .form-success { display: none; align-items: center; gap: 12px; background: rgba(22,163,74,.12); border: 1px solid rgba(22,163,74,.4); color: #16a34a; padding: 15px 18px; border-radius: var(--radius-sm); margin-bottom: 22px; font-weight: 500; } .form-success.show { display: flex; } .info-card { position: relative; background: var(--panel-bg); color: var(--hero-fg); border-radius: var(--radius-lg); padding: 40px; overflow: hidden; isolation: isolate; transition: color .4s var(--ease); } .info-card::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: radial-gradient(40% 50% at 15% 10%, rgba(var(--accent-rgb),.5), transparent 60%), radial-gradient(40% 50% at 90% 90%, rgba(var(--accent3-rgb),.45), transparent 60%); opacity: var(--hero-aurora-op); filter: blur(30px); } .info-card h3 { color: var(--hero-heading); } .info-card .contact-line { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 24px; } .info-card .contact-line .icon-chip { margin-bottom: 0; width: 46px; height: 46px; border-radius: 13px; background: var(--panel-chip-bg); color: var(--panel-chip-fg); border-color: transparent; box-shadow: none; flex-shrink: 0; } .info-card .contact-line .icon-chip svg { width: 20px; height: 20px; } .info-card .contact-line a { color: var(--hero-fg); } .info-card .contact-line a:hover { color: var(--hero-heading); } .info-card strong { color: var(--hero-heading); display: block; font-family: var(--font-head); } .map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border); line-height: 0; } .map-embed iframe { width: 100%; height: 360px; border: 0; } :root[data-theme="dark"] .map-embed iframe { filter: invert(.92) hue-rotate(180deg) brightness(.95) contrast(.9); } /* ------------------------------------------------------------- 10. Animations / micro-interactions + page transitions ------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); will-change: opacity, transform; } .reveal.visible { opacity: 1; transform: none; } .reveal-group.visible > * { animation: fade-up 700ms var(--ease) both; } .reveal-group.visible > *:nth-child(2) { animation-delay: 90ms; } .reveal-group.visible > *:nth-child(3) { animation-delay: 180ms; } .reveal-group.visible > *:nth-child(4) { animation-delay: 270ms; } .reveal-group.visible > *:nth-child(5) { animation-delay: 360ms; } .reveal-group.visible > *:nth-child(6) { animation-delay: 450ms; } .reveal-group.visible > *:nth-child(7) { animation-delay: 540ms; } .reveal-group.visible > *:nth-child(8) { animation-delay: 630ms; } @keyframes fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } main { display: block; } /* --- View-transition recipes (production) --- root: short content crossfade site-header: no fade, no morph — only the new snapshot, instantly */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; animation-timing-function: ease-out; } ::view-transition-group(site-header) { animation: none; /* Prevent size morph between pages when active tab differs */ overflow: hidden; } ::view-transition-old(site-header) { /* Drop the outgoing header — keeps bar continuous without double-image flicker */ display: none; } ::view-transition-new(site-header) { animation: none; height: 100%; width: 100%; object-fit: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } @view-transition { navigation: none; } } /* Browsers without view transitions: hard navigation is fine with opaque header + html bg */ /* ------------------------------------------------------------- 11. Responsive breakpoints ------------------------------------------------------------- */ @media (max-width: 1024px) { .hero__grid { grid-template-columns: 1fr; gap: 60px; } .hero__visual { min-height: 320px; max-width: 520px; } .hero .lead { max-width: none; } } @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .stack-grid { grid-template-columns: repeat(4, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .section { padding-block: 72px; } /* Nav collapses to a hamburger here (before the dense desktop nav can crowd). Header row: brand (left) · theme + hamburger (right); tabs live in the drawer. */ .nav { display: flex; justify-content: space-between; } .brand { margin-right: auto; } .theme-toggle { order: 0; } .nav-toggle { display: flex; } .nav-actions .nav-quote { display: none; } /* desktop CTA hidden here */ .nav-links .nav-cta { display: block; } /* CTA shown inside the drawer */ .nav-links { position: fixed; top: 0; right: 0; left: auto; height: 100dvh; /* overrides desktop locked 2.5rem row height */ max-height: none; width: min(340px, 86vw); transform: translateX(100%); /* overrides the desktop centering transform */ flex-direction: column; align-items: stretch; gap: 4px; background: var(--nav-mobile-bg); backdrop-filter: blur(20px); padding: calc(var(--header-h) + 20px) 22px 28px; box-shadow: var(--shadow-lg); transition: transform 300ms var(--spring); z-index: 95; overflow-y: auto; } .nav-links.open { transform: translateX(0); } .nav-links > li { height: auto; } .nav-links a { height: auto; min-height: 2.75rem; padding: 13px 16px; font-size: 1.05rem; border-radius: 12px; justify-content: flex-start; } .nav-cta { margin-left: 0; margin-top: 10px; } .nav-cta .btn { width: 100%; height: 48px; min-height: 48px; max-height: none; } } @media (max-width: 768px) { :root { --header-h: 66px; } .split, .contact-grid { grid-template-columns: 1fr; gap: 40px; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .stack-grid { grid-template-columns: repeat(3, 1fr); } .stats { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; } .job { flex-direction: column; align-items: flex-start; } .job .btn { width: 100%; } .float-card--tl { left: 0; top: -14px; } .float-card--br { right: 0; bottom: -14px; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } .stack-grid { grid-template-columns: repeat(2, 1fr); } .logo-strip { gap: 28px; } .hero__cta .btn { width: 100%; } .newsletter { flex-direction: column; } .newsletter .btn { width: 100%; } .hero__meta { gap: 16px; } .float-card { padding: 10px 13px; } .float-card strong { font-size: .92rem; } } @media (min-width: 1400px) { :root { --container: 1240px; } }