/* ================================================================ IONTEK DATA ENGINEERING — MAIN STYLESHEET v4 (yellow.ai system) Industrial yellow · clean white SaaS · video hero · Open Sauce ================================================================ */ /* ─── Fonts — SELF-HOSTED (no external dependency) ───────────────── Bricolage Grotesque (display) · Hanken Grotesk (body) · Space Mono (telemetry/eyebrows). Served from assets/fonts/*.woff2 so a slow or unreachable Google Fonts can never block first paint or the window load event (that external request was the recurring "constantly loading" hang). Bricolage + Hanken are variable fonts → one file each covering a weight range; Space Mono is static (two weights). font-display:swap shows fallback text instantly. */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/BricolageGrotesque.woff2') format('woff2'); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/HankenGrotesk.woff2') format('woff2'); } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/SpaceMono-400.woff2') format('woff2'); } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/SpaceMono-700.woff2') format('woff2'); } /* BLUEPRINT identity fonts (homepage redesign) — same self-hosted pattern */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/SpaceGrotesk.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/InterVar.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../fonts/JetBrainsMono.woff2') format('woff2'); } /* ─── 0. Theme — switched via [data-theme="..."] on ─────── */ /* (default dark is set in :root below; light overrides follow at the end) */ /* ─── 1. CSS Variables ─────────────────────────────────────────── */ :root { /* PRIMARY — industrial yellow */ --primary: #0369A1; /* bright industrial yellow — bgs & accents */ --primary-hover: #0369A1; --primary-deep: #075985; /* dark amber — use for TEXT on white bgs */ --primary-darker: #0C4A6E; --primary-light: #E0F2FE; /* light tint — chip bgs, hover backdrops */ --primary-tint: #F0F9FF; --primary-glow: rgba(3, 105, 161, 0.42); /* SECONDARY — kept for legacy reference */ --yellow: #0369A1; --yellow-soft: #E0F2FE; --yellow-deep: #075985; /* NEUTRAL — text (dark-mode) */ --text-primary: #FFFFFF; --text-secondary: rgba(255, 255, 255, 0.70); --text-muted: rgba(255, 255, 255, 0.50); --text-soft: rgba(255, 255, 255, 0.32); /* Text that must stay dark — used on yellow buttons & badges */ --text-on-yellow: #0F0F17; /* NEUTRAL — backgrounds (near-black gray) */ --bg-page: #0A0B0F; /* base — almost-black gray for the body */ --bg-soft: #0F1117; --bg-section: #0F1117; --bg-tint: #161922; --bg-dark: #06070A; --bg-surface: #14171F; /* Borders (translucent white) */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --border-subtle: rgba(255, 255, 255, 0.04); /* INSTRUMENT — blueprint grid + technical panel surfaces */ --grid-line: rgba(255, 255, 255, 0.038); --grid-line-strong: rgba(3, 105, 161, 0.05); --panel: rgba(255, 255, 255, 0.025); --panel-border: rgba(255, 255, 255, 0.10); /* Shadows */ --shadow-xs: 0 1px 2px rgba(15, 15, 26, 0.04); --shadow-sm: 0 1px 3px rgba(15, 15, 26, 0.06), 0 1px 2px rgba(15, 15, 26, 0.04); --shadow-md: 0 4px 6px rgba(15, 15, 26, 0.04), 0 10px 20px rgba(15, 15, 26, 0.06); --shadow-lg: 0 10px 25px rgba(15, 15, 26, 0.08), 0 20px 50px rgba(3, 105, 161, 0.05); --shadow-xl: 0 20px 40px rgba(15, 15, 26, 0.10), 0 30px 70px rgba(3, 105, 161, 0.10); --shadow-glow: 0 8px 24px rgba(3, 105, 161, 0.30); /* Typography */ --font-base: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', -apple-system, sans-serif; --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.5rem; --leading-tight: 1.10; --leading-snug: 1.25; --leading-normal: 1.50; --leading-relaxed: 1.70; /* Motion tokens — one easing + a small duration scale, used site-wide */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 0.18s; --dur-base: 0.28s; --dur-mid: 0.5s; --dur-slow: 0.68s; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --section-padding-y: clamp(4rem, 8vw, 6.5rem); --container-max: 1240px; --container-padding: clamp(1.25rem, 4vw, 2rem); /* Radius */ --radius-sm: 2px; --radius-md: 3px; --radius-lg: 5px; --radius-xl: 7px; --radius-2xl: 10px; --radius-full: 9999px; } /* ─── 2. Reset & Base ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-base); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: linear-gradient(0deg, var(--grid-line) 1px, transparent 1px) 0 0 / 100% 56px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 56px 100%, radial-gradient(ellipse 1100px 720px at 50% -10%, rgba(3, 105, 161, 0.06) 0%, transparent 60%), radial-gradient(ellipse 900px 640px at 92% 108%, rgba(3, 105, 161, 0.04) 0%, transparent 58%), var(--bg-page); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01" on, "cv01" on, "kern" on; animation: pageFadeIn 0.40s ease forwards; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ul, ol { list-style: none; } /* ─── 3. Layout ────────────────────────────────────────────────── */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } .section-pad { padding-block: var(--section-padding-y); } /* ─── 4. Section Backgrounds — all transparent (body provides) ─── */ .section-problem, .section-services, .section-how-it-works, .section-proof, .section-cta { background: transparent; } .bg-white, .bg-light, .bg-dark { background: transparent; } /* ─── 5. Typography ────────────────────────────────────────────── */ .section-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.10em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-5); background: rgba(3, 105, 161, 0.10); border: 1px solid rgba(3, 105, 161, 0.25); padding: 6px 14px; border-radius: var(--radius-full); } .section-cta .section-label { background: rgba(3, 105, 161, 0.18); color: #FDBA74; border-color: rgba(3, 105, 161, 0.30); } .section-title { font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl)); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); color: var(--text-primary); margin-bottom: var(--space-5); letter-spacing: -0.03em; } .section-cta .section-title { color: #fff; } .section-sub { font-size: clamp(var(--text-base), 1.5vw, var(--text-lg)); color: var(--text-secondary); line-height: var(--leading-relaxed); max-width: 600px; } .section-cta .section-sub { color: rgba(255,255,255,0.70); } .section-header { text-align: center; margin-bottom: clamp(var(--space-12), 6vw, var(--space-20)); } .section-header .section-sub { margin-inline: auto; } /* ─── 6. Buttons ───────────────────────────────────────────────── */ /* Primary — industrial yellow with dark text */ .btn-primary { background: var(--primary); color: var(--text-on-yellow); padding: 14px 28px; border-radius: var(--radius-md); font-weight: var(--font-weight-bold); font-size: var(--text-sm); letter-spacing: 0.01em; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.20s ease, transform 0.20s ease, box-shadow 0.20s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.50), inset 0 -1px 0 rgba(0,0,0,0.10), 0 2px 8px rgba(3, 105, 161, 0.25); white-space: nowrap; line-height: 1; text-decoration: none; } .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.60), inset 0 -1px 0 rgba(0,0,0,0.12), 0 8px 24px rgba(3, 105, 161, 0.40); color: var(--text-on-yellow); } .btn-primary:active { transform: translateY(0); } .btn-primary:focus-visible { outline: 2px solid var(--primary-deep); outline-offset: 3px; } /* Secondary — outline, dark amber text */ .btn-secondary { background: transparent; color: var(--primary); padding: 14px 28px; border-radius: var(--radius-md); border: 1.5px solid var(--primary); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 8px; transition: background 0.20s ease, color 0.20s ease, transform 0.20s ease; white-space: nowrap; line-height: 1; text-decoration: none; } .btn-secondary:hover { background: var(--primary); color: var(--text-on-yellow); transform: translateY(-1px); } .btn-secondary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } /* On dark sections — secondary inverts */ .section-cta .btn-secondary, .bg-dark .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.30); } .section-cta .btn-secondary:hover, .bg-dark .btn-secondary:hover { background: #fff; color: var(--text-primary); border-color: #fff; } /* ─── 7. Animation Keyframes ───────────────────────────────────── */ @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes wordFadeIn { to { opacity: 1; transform: translateY(0); } } @keyframes heroContentIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes orbDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(30px, -20px) scale(1.10); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ─── 8. Scroll Animations ─────────────────────────────────────── */ [data-animate] { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } [data-animate].is-visible { opacity: 1; transform: none; } /* Reveal variants — so sections don't all animate identically */ [data-animate="left"] { transform: translateX(-36px); } [data-animate="right"] { transform: translateX(36px); } [data-animate="scale"] { transform: scale(0.94); } [data-animate="fade"] { transform: none; } [data-animate-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out); } [data-animate-stagger="scale"] > * { transform: scale(0.94); } /* All children reveal (fixes items past the 5th staying invisible); delay is staggered + capped */ [data-animate-stagger].is-visible > * { opacity: 1; transform: none; } [data-animate-stagger].is-visible > *:nth-child(1) { transition-delay: 0.00s; } [data-animate-stagger].is-visible > *:nth-child(2) { transition-delay: 0.06s; } [data-animate-stagger].is-visible > *:nth-child(3) { transition-delay: 0.12s; } [data-animate-stagger].is-visible > *:nth-child(4) { transition-delay: 0.18s; } [data-animate-stagger].is-visible > *:nth-child(5) { transition-delay: 0.24s; } [data-animate-stagger].is-visible > *:nth-child(6) { transition-delay: 0.30s; } [data-animate-stagger].is-visible > *:nth-child(7) { transition-delay: 0.36s; } [data-animate-stagger].is-visible > *:nth-child(8) { transition-delay: 0.42s; } [data-animate-stagger].is-visible > *:nth-child(n+9) { transition-delay: 0.46s; } /* Hero scroll cue */ .hero-scroll { position: absolute; left: 50%; bottom: clamp(18px, 4vh, 36px); transform: translateX(-50%); z-index: 3; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: rgba(255, 255, 255, 0.60); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: var(--font-weight-semibold); opacity: 0; animation: heroContentIn 0.7s ease 1.1s both; transition: color 0.2s ease; } .hero-scroll:hover { color: #fff; } .hero-scroll-track { width: 22px; height: 34px; border: 1.5px solid rgba(255, 255, 255, 0.30); border-radius: 9999px; position: relative; } .hero-scroll-dot { position: absolute; top: 6px; left: 50%; width: 3px; height: 6px; border-radius: 9999px; background: var(--primary); transform: translateX(-50%); animation: heroScrollDot 1.8s ease-in-out infinite; } @keyframes heroScrollDot { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 60% { opacity: 1; transform: translate(-50%, 12px); } 100% { opacity: 0; transform: translate(-50%, 12px); } } /* ─── 9. Card System ───────────────────────────────────────────── */ .card { position: relative; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-xl); padding: var(--space-8); overflow: hidden; transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.25); } /* Top-edge shimmer — the iOS-style upper rim that makes it read as glass */ .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.24) 50%, transparent 100%); pointer-events: none; } .card:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 16px 40px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(3, 105, 161, 0.10); } .card--featured::before { height: 1.5px; background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%); } .card--featured:hover::before { background: linear-gradient(90deg, transparent 0%, var(--primary) 30%, var(--primary) 70%, transparent 100%); } .card--problem { border-left: 2px solid rgba(3, 105, 161, 0.40); } /* Card anatomy */ .card-icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-6); border-radius: var(--radius-lg); background: rgba(3, 105, 161, 0.12); border: 1px solid rgba(3, 105, 161, 0.22); color: var(--primary); flex-shrink: 0; } .card-icon svg { width: 28px; height: 28px; } .card-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); line-height: var(--leading-snug); color: var(--text-primary); margin-bottom: var(--space-3); letter-spacing: -0.015em; } .card-body { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); } .card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-5); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--primary); transition: gap 0.2s ease, color 0.2s ease; } .card-link:hover { gap: 10px; color: var(--primary-hover); } /* ─── 10. Header — yellow.ai floating pill ────────────────────── */ .site-header { position: fixed; top: 20px; left: 0; right: 0; z-index: 1000; display: flex; justify-content: center; pointer-events: none; /* let clicks fall through outside pill */ } .header-inner { display: inline-flex; align-items: center; gap: 12px; pointer-events: auto; max-width: calc(100% - 32px); padding-inline: 16px; } /* THE PILL — translucent dark capsule. 3-column grid: logo (left) | nav (center) | CTA (right). Low opacity + heavy blur lets a hero video show through. */ .nav-pill { display: grid; grid-template-columns: auto 1fr auto; align-items: center; background: rgba(15, 15, 26, 0.32); backdrop-filter: blur(28px) saturate(200%); -webkit-backdrop-filter: blur(28px) saturate(200%); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9999px; padding: 8px; gap: var(--space-6); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); } /* Nav list — CENTER column */ .main-nav { display: flex; justify-self: center; justify-content: center; } .main-nav .nav-list, .main-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; } .main-nav li { list-style: none; position: relative; } .main-nav a, .nav-link { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.90); font-weight: var(--font-weight-medium); font-size: 1rem; text-decoration: none; padding: 11px 18px; border-radius: 9999px; transition: background 0.18s ease, color 0.18s ease; line-height: 1; white-space: nowrap; } .main-nav a:hover, .nav-link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.12); } /* Chevron caret next to items with sub-menus */ .nav-chevron { color: currentColor; opacity: 0.65; transition: transform 0.20s ease, opacity 0.20s ease; } .menu-item-has-children > a:hover .nav-chevron, li.menu-item-has-children:hover > a .nav-chevron { opacity: 1; transform: rotate(180deg); } /* Logo — LEFT column of the pill */ .nav-pill .site-logo { display: inline-flex; align-items: center; gap: 9px; justify-self: start; padding: 0 8px 0 14px; text-decoration: none; white-space: nowrap; transition: opacity 0.18s ease; } .nav-pill .site-logo:hover { opacity: 0.85; } .nav-pill .logo-mark { display: inline-flex; flex-shrink: 0; } .nav-pill .logo-text { font-size: 1.125rem; font-weight: var(--font-weight-black); color: #ffffff; letter-spacing: -0.025em; line-height: 1; display: inline-flex; align-items: baseline; } .nav-pill .logo-text .logo-dot { color: #ffffff; margin: 0 1px; } .nav-pill .logo-text .logo-suffix { color: var(--primary); } /* Desktop dropdown (WordPress sub-menus + .sub-menu) */ .main-nav .sub-menu, .main-nav .dropdown-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 240px; display: flex; flex-direction: column; background: rgba(15, 15, 26, 0.92); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius-lg); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.08); padding: 10px; list-style: none; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease; z-index: 1001; } .main-nav li:hover > .sub-menu, .main-nav li:hover > .dropdown-menu, .main-nav li:focus-within > .sub-menu, .main-nav li:focus-within > .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .main-nav .sub-menu a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 0.875rem; color: rgba(255, 255, 255, 0.78); background: transparent; } .main-nav .sub-menu a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.10); } /* CTA PILL — industrial-yellow button, RIGHT column of the pill */ .nav-pill .cta-pill { display: inline-flex; align-items: center; gap: 7px; justify-self: end; background: var(--primary); color: var(--text-on-yellow); padding: 11px 22px; border-radius: 9999px; font-size: 0.9375rem; font-weight: var(--font-weight-bold); letter-spacing: -0.005em; text-decoration: none; border: none; white-space: nowrap; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 4px 12px rgba(3, 105, 161, 0.30); transition: transform 0.20s ease, box-shadow 0.20s ease, background 0.20s ease; } .nav-pill .cta-pill svg { transition: transform 0.20s ease; } .nav-pill .cta-pill:hover { background: var(--primary-hover); color: var(--text-on-yellow); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 6px 18px rgba(3, 105, 161, 0.45), 0 0 0 4px rgba(3, 105, 161, 0.18); } .nav-pill .cta-pill:hover svg { transform: translateX(2px); } .nav-pill .cta-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } /* Legacy cross-site link styling kept for footer use */ .cross-site-link { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; color: var(--text-muted); padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-full); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; white-space: nowrap; } .cross-site-link:hover { color: var(--primary); border-color: var(--primary-light); background: var(--primary-light); } /* Hamburger — floating dark pill on mobile */ .hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 48px; height: 48px; background: rgba(15, 15, 26, 0.78); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 9999px; padding: 0; flex-shrink: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .hamburger-line { display: block; width: 20px; height: 2px; background: #ffffff; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } .hamburger.open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ─── 11. Mobile Navigation ────────────────────────────────────── */ .mobile-nav { display: flex; flex-direction: column; position: fixed; inset: 0; background: rgba(14, 14, 20, 0.96); backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); padding: 80px var(--container-padding) 48px; transform: translateY(-100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); z-index: 999; overflow-y: auto; } .mobile-nav.open { transform: translateY(0); } .mobile-nav-list, .mobile-nav ul { display: flex; flex-direction: column; gap: var(--space-1); list-style: none; margin-bottom: var(--space-8); } .mobile-nav-list a, .mobile-nav ul a { font-size: clamp(1.5rem, 6vw, 2.25rem); font-weight: var(--font-weight-bold); color: var(--text-primary); letter-spacing: -0.025em; display: block; padding: var(--space-2) 0; transition: color 0.2s ease; } .mobile-nav-list a:hover, .mobile-nav ul a:hover { color: var(--primary); } .mobile-nav-footer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-top: auto; padding-top: var(--space-8); border-top: 1px solid var(--border); } /* ─── 12. Hero Section — background video, curved bottom ─────── */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: 120px; padding-bottom: var(--space-16); background: #0a0a14; /* fallback while video loads */ border-radius: 0 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); } /* The background video itself — covers the hero like background-size:cover */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; } /* Dark gradient overlay — keeps text legible over the moving footage */ .hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,20,0.55) 0%, rgba(10,10,20,0.30) 50%, rgba(10,10,20,0.70) 100%), radial-gradient(ellipse 70% 60% at 30% 50%, rgba(10,10,20,0.45) 0%, transparent 75%); } .hero-inner { position: relative; z-index: 2; } .hero-content { max-width: 880px; } .hero-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.10em; text-transform: uppercase; color: #ffffff; margin-bottom: var(--space-6); background: rgba(255,255,255,0.10); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); border: 1px solid rgba(255,255,255,0.18); padding: 7px 14px; border-radius: var(--radius-full); opacity: 0; animation: heroContentIn 0.5s ease 0.1s both; } .hero-title { font-size: clamp(2.5rem, 6.5vw, 4.75rem); font-weight: var(--font-weight-black); line-height: 1.04; letter-spacing: -0.035em; color: #ffffff; margin-bottom: var(--space-6); text-shadow: 0 2px 30px rgba(0,0,0,0.30); } .hero-title .word { display: inline-block; color: #ffffff; margin-right: 0.28em; opacity: 0; transform: translateY(20px); animation: wordFadeIn 0.65s cubic-bezier(0.16,1,0.3,1) forwards; } .hero-title .word:last-child { margin-right: 0; } .hero-sub { font-size: clamp(var(--text-base), 1.8vw, var(--text-lg)); color: rgba(255,255,255,0.85); line-height: var(--leading-relaxed); max-width: 600px; margin-bottom: var(--space-10); font-weight: var(--font-weight-normal); opacity: 0; animation: heroContentIn 0.65s ease 0.55s both; text-shadow: 0 1px 14px rgba(0,0,0,0.30); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-10); opacity: 0; animation: heroContentIn 0.65s ease 0.72s both; } /* On dark hero video, secondary button inverts to white-on-glass */ .hero-actions .btn-secondary { background: rgba(255,255,255,0.10); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); color: #ffffff; border-color: rgba(255,255,255,0.25); } .hero-actions .btn-secondary:hover { background: rgba(255,255,255,0.18); color: #ffffff; border-color: rgba(255,255,255,0.45); transform: translateY(-1px); } .trust-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: rgba(255,255,255,0.70); letter-spacing: 0.02em; opacity: 0; animation: heroContentIn 0.65s ease 0.92s both; } .trust-sep { color: rgba(255,255,255,0.30); } /* ─── 13. Problem Block ────────────────────────────────────────── */ .section-problem { padding-block: var(--section-padding-y); } .section-services { padding-block: var(--section-padding-y); } /* ─── 13b. Infographic system — Problem + Services ─────────────── */ /* Layout: 3 nodes + 2 connectors in a 5-column grid (1fr auto 1fr auto 1fr) */ .problem-infographic, .services-infographic { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 0; } .info-node { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--space-4); } /* Problem node — broken dashed yellow ring (visualises disconnection) */ .info-icon-ring { position: relative; width: 112px; height: 112px; border-radius: 50%; border: 2px dashed rgba(3, 105, 161, 0.45); background: radial-gradient(circle, rgba(3, 105, 161, 0.10) 0%, rgba(3, 105, 161, 0.02) 70%); display: flex; align-items: center; justify-content: center; color: var(--primary); margin-bottom: var(--space-6); transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .info-icon-ring svg { width: 48px; height: 48px; } .info-node--problem:hover .info-icon-ring { transform: scale(1.05); border-color: rgba(3, 105, 161, 0.75); background: radial-gradient(circle, rgba(3, 105, 161, 0.18) 0%, rgba(3, 105, 161, 0.04) 70%); } /* Number badge on the ring */ .info-number { position: absolute; top: -8px; right: -4px; background: var(--primary); color: var(--text-on-yellow); font-size: 11px; font-weight: var(--font-weight-black); padding: 4px 9px; border-radius: 9999px; letter-spacing: 0.06em; box-shadow: 0 4px 12px rgba(3, 105, 161, 0.35); } /* Service node — solid glowing yellow ring (visualises a foundation node) */ .info-icon-circle { position: relative; width: 112px; height: 112px; border-radius: 50%; border: 2px solid rgba(3, 105, 161, 0.55); background: radial-gradient(circle, rgba(3, 105, 161, 0.22) 0%, rgba(3, 105, 161, 0.06) 70%); box-shadow: 0 0 40px rgba(3, 105, 161, 0.20), inset 0 0 24px rgba(3, 105, 161, 0.08); display: flex; align-items: center; justify-content: center; color: var(--primary); margin-bottom: var(--space-6); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .info-icon-circle svg { width: 50px; height: 50px; } .info-node--service:hover .info-icon-circle { transform: scale(1.06); border-color: var(--primary); box-shadow: 0 0 60px rgba(3, 105, 161, 0.35), inset 0 0 32px rgba(3, 105, 161, 0.12); } /* Node text — no card, just centered content */ .info-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); line-height: var(--leading-snug); color: var(--text-primary); margin-bottom: var(--space-3); letter-spacing: -0.015em; } .info-body { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); max-width: 300px; } .info-link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-4); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--primary); transition: gap 0.2s ease, color 0.2s ease; } .info-link:hover { gap: 10px; color: var(--primary-hover); } /* Connector between Problem nodes — broken dashed line (disconnection) */ .info-gap { align-self: center; margin-top: 56px; width: 64px; height: 2px; background-image: linear-gradient(to right, rgba(3, 105, 161, 0.30) 50%, transparent 50%); background-size: 10px 2px; background-repeat: repeat-x; position: relative; } .info-gap::before, .info-gap::after { content: ''; position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: rgba(3, 105, 161, 0.40); transform: translateY(-50%); } .info-gap::before { left: -3px; } .info-gap::after { right: -3px; } /* Connector between Service nodes — flowing yellow line with chevron */ .info-flow { align-self: center; margin-top: 56px; width: 80px; height: 2px; position: relative; background: linear-gradient(to right, transparent 0%, var(--primary) 20%, var(--primary) 80%, transparent 100%); box-shadow: 0 0 12px rgba(3, 105, 161, 0.45); } .info-flow::after { content: ''; position: absolute; top: 50%; right: 4px; width: 8px; height: 8px; border-top: 2px solid var(--primary); border-right: 2px solid var(--primary); transform: translateY(-50%) rotate(45deg); } /* ─── 14a. What We Do — process rail (6 steps, single horizontal line) ── */ .process-rail { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(var(--space-3), 1.4vw, var(--space-6)); align-items: start; padding-top: var(--space-6); } /* The continuous rail line — sits at the same y as the bottom of each icon */ .process-rail-line { position: absolute; left: 6%; right: 6%; top: calc(var(--space-6) + 1.25rem + 88px + var(--space-6)); /* ↑ rail-top padding + step-num height + icon height + spacing */ height: 1px; background: linear-gradient(to right, transparent 0%, rgba(3, 105, 161, 0.45) 6%, rgba(3, 105, 161, 0.45) 94%, transparent 100%); pointer-events: none; z-index: 0; } /* Illuminated dots at each step position on the line */ .process-rail-dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px var(--bg-page), /* punch-out matches page bg — works in both themes */ 0 0 0 5px rgba(3, 105, 161, 0.35), 0 0 16px rgba(3, 105, 161, 0.55); } /* Each step is just floating content — no containers, no boxes */ .process-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: var(--space-2); } /* Step indicator — small, refined, letter-spaced */ .process-step-num { font-size: 0.6875rem; font-weight: var(--font-weight-bold); color: var(--primary); letter-spacing: 0.20em; text-transform: uppercase; margin-bottom: var(--space-4); line-height: 1; } /* The icon — large, floating, no container */ .process-step-icon { width: 88px; height: 88px; color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-6); filter: drop-shadow(0 6px 20px rgba(3, 105, 161, 0.18)); transition: transform 0.40s cubic-bezier(0.16,1,0.3,1), filter 0.40s ease; } .process-step-icon svg { width: 100%; height: 100%; } .process-step:hover .process-step-icon { transform: translateY(-6px) scale(1.06); filter: drop-shadow(0 12px 28px rgba(3, 105, 161, 0.42)); } /* Spacing reserve for the rail line passing between icon and title */ .process-step-title { font-size: 1.0625rem; font-weight: var(--font-weight-bold); color: var(--text-primary); letter-spacing: -0.014em; margin-top: var(--space-6); margin-bottom: var(--space-3); line-height: 1.30; max-width: 220px; } .process-step-body { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.65; max-width: 220px; font-weight: var(--font-weight-normal); } /* ─── 13c. Industry Challenges — central factory + 4 numbered items ─── */ .challenges-infographic { display: grid; grid-template-columns: 1fr minmax(280px, 380px) 1fr; grid-template-rows: auto auto; gap: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem); align-items: start; position: relative; } /* Position each item around the central illustration */ .challenge-item--01 { grid-column: 1; grid-row: 1; text-align: right; } .challenge-item--03 { grid-column: 3; grid-row: 1; text-align: left; } .challenge-item--02 { grid-column: 1; grid-row: 2; text-align: right; } .challenge-item--04 { grid-column: 3; grid-row: 2; text-align: left; } .challenge-center { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center; width: 100%; position: relative; } .factory-illustration { width: 100%; height: auto; color: var(--primary); filter: drop-shadow(0 0 24px rgba(3, 105, 161, 0.18)); } /* Smoke animation — gentle vertical drift */ .factory-smoke ellipse { transform-origin: center; animation: smokeDrift 6s ease-in-out infinite alternate; } .factory-smoke ellipse:nth-child(2n) { animation-duration: 7s; animation-delay: -1s; } .factory-smoke ellipse:nth-child(3n) { animation-duration: 8s; animation-delay: -2s; } @keyframes smokeDrift { from { transform: translate(0, 0); opacity: 0.85; } to { transform: translate(2px, -4px); opacity: 1; } } /* Individual challenge item — number + pill title + body + icon */ .challenge-item { position: relative; padding: var(--space-3) 0; max-width: 380px; } .challenge-item--01, .challenge-item--02 { margin-left: auto; } .challenge-item--03, .challenge-item--04 { margin-right: auto; } /* Head row: icon + number side-by-side at the top of each item */ .challenge-head { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } /* Big yellow number — reads like the reference's purple numbers */ .challenge-number { font-size: clamp(var(--text-2xl), 2.6vw, var(--text-3xl)); font-weight: var(--font-weight-black); color: var(--primary); line-height: 1; letter-spacing: -0.02em; text-shadow: 0 0 24px rgba(3, 105, 161, 0.30); } /* The solid yellow pill title — matches the reference's purple pills */ .challenge-pill { display: inline-block; background: var(--primary); color: var(--text-on-yellow); font-size: var(--text-sm); font-weight: var(--font-weight-black); letter-spacing: 0.04em; text-transform: uppercase; padding: 12px 22px; border-radius: 9999px; line-height: 1.25; margin-bottom: var(--space-4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 8px 24px rgba(3, 105, 161, 0.22); transition: transform 0.25s ease, box-shadow 0.25s ease; } .challenge-item:hover .challenge-pill { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), 0 12px 32px rgba(3, 105, 161, 0.35); } .challenge-body { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); max-width: 340px; } .challenge-item--01 .challenge-body, .challenge-item--02 .challenge-body { margin-left: auto; } .challenge-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--primary); opacity: 0.95; transition: transform 0.25s ease, opacity 0.25s ease; filter: drop-shadow(0 0 12px rgba(3, 105, 161, 0.25)); } .challenge-icon svg { width: 100%; height: 100%; } .challenge-item:hover .challenge-icon { transform: scale(1.08); opacity: 1; } /* Connection lines — yellow line + dot pointing toward the central factory */ .challenge-item::before, .challenge-item::after { content: ''; position: absolute; top: 22px; pointer-events: none; } /* Line (gradient fading toward outer end) */ .challenge-item::before { height: 1px; width: 56px; } .challenge-item--01::before, .challenge-item--02::before { right: -72px; background: linear-gradient(to left, rgba(3, 105, 161, 0.50) 0%, transparent 100%); } .challenge-item--03::before, .challenge-item--04::before { left: -72px; background: linear-gradient(to right, rgba(3, 105, 161, 0.50) 0%, transparent 100%); } /* Dot at the inner end of each line (closest to the factory) */ .challenge-item::after { top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 12px rgba(3, 105, 161, 0.60); } .challenge-item--01::after, .challenge-item--02::after { right: -75px; } .challenge-item--03::after, .challenge-item--04::after { left: -75px; } /* ─── 14b. Meet Our Team — oval portrait slider ────────────────── */ .section-team { padding-block: var(--section-padding-y); } .team-slider-wrapper { position: relative; margin-inline: calc(-1 * var(--container-padding)); } /* Horizontal scroller — native scroll + snap, JS arrows below */ .team-slider { display: flex; gap: clamp(12px, 1.6vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 56px var(--container-padding) 24px; align-items: center; } .team-slider::-webkit-scrollbar { display: none; } /* Each card — capsule photo + name + role, no container border */ .team-card { flex: 0 0 auto; width: clamp(150px, 14vw, 200px); scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); } /* Zigzag — even cards float up, odd float down (reference look) */ .team-card--up { transform: translateY(-32px); } .team-card--down { transform: translateY(32px); } /* The oval — tall pill, photo cropped to fill */ .team-photo { width: 100%; aspect-ratio: 1 / 2; border-radius: 9999px; overflow: hidden; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 24px rgba(0, 0, 0, 0.30); margin-bottom: var(--space-5); position: relative; transition: transform 0.30s cubic-bezier(0.16,1,0.3,1), box-shadow 0.30s ease, border-color 0.30s ease; } .team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s cubic-bezier(0.16,1,0.3,1); } .team-card:hover .team-photo { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 48px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(3, 105, 161, 0.30), 0 0 32px rgba(3, 105, 161, 0.15); border-color: rgba(3, 105, 161, 0.30); } .team-card:hover .team-photo img { transform: scale(1.05); } .team-name { font-size: var(--text-base); font-weight: var(--font-weight-bold); color: var(--text-primary); letter-spacing: -0.012em; margin-bottom: 4px; white-space: nowrap; } .team-role { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--primary); letter-spacing: 0.005em; } /* Floating navigation arrows — dark glass pills, just like the navbar */ .team-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 9999px; background: rgba(15, 15, 26, 0.65); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.12); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 3; transition: background 0.20s ease, color 0.20s ease, transform 0.20s ease, box-shadow 0.20s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 24px rgba(0, 0, 0, 0.25); } .team-slider-arrow:hover { background: var(--primary); color: var(--text-on-yellow); transform: translateY(-50%) scale(1.06); border-color: var(--primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 12px 28px rgba(3, 105, 161, 0.35); } .team-slider-arrow--prev { left: 8px; } .team-slider-arrow--next { right: 8px; } .team-slider-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } /* ─── 15. How It Works / Timeline ──────────────────────────────── */ .section-how-it-works { padding-block: var(--section-padding-y); } .timeline-section { margin-top: clamp(var(--space-12), 5vw, var(--space-16)); } .timeline { display: grid; grid-template-columns: 1fr 60px 1fr 60px 1fr; align-items: start; gap: var(--space-2); } .timeline-step { opacity: 0.40; transition: opacity 0.5s ease; padding-inline: var(--space-2); } .timeline-step.is-visible { opacity: 1; } .timeline-step:nth-child(1).is-visible { transition-delay: 0.00s; } .timeline-step:nth-child(3).is-visible { transition-delay: 0.18s; } .timeline-step:nth-child(5).is-visible { transition-delay: 0.36s; } .timeline-connector { align-self: start; margin-top: 21px; height: 2px; background: var(--border); position: relative; overflow: hidden; border-radius: 1px; } .timeline-connector::after { content: ''; position: absolute; left: -100%; top: 0; height: 100%; width: 100%; background: var(--primary); transition: left 1.1s ease 0.4s; } .timeline-section.is-visible .timeline-connector::after { left: 0; } .timeline-number { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--primary); color: var(--text-on-yellow); font-size: var(--text-sm); font-weight: var(--font-weight-bold); margin-bottom: var(--space-5); flex-shrink: 0; box-shadow: 0 4px 14px rgba(3, 105, 161,0.30); } .timeline-phase { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.10em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-2); } .timeline-name { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: var(--space-3); line-height: var(--leading-snug); letter-spacing: -0.015em; } .timeline-desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); } .timeline-deliverables { display: flex; flex-direction: column; gap: var(--space-2); } .timeline-deliverables li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-snug); } .timeline-deliverables li::before { content: '\2192'; color: var(--primary); flex-shrink: 0; font-size: 13px; margin-top: 1px; font-weight: var(--font-weight-bold); } .timeline-cta { text-align: center; margin-top: clamp(var(--space-16), 5vw, var(--space-20)); } /* ─── 16. Social Proof ─────────────────────────────────────────── */ .section-proof { padding-block: var(--section-padding-y); } .cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: clamp(var(--space-12), 5vw, var(--space-16)); } .case-study-card { position: relative; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-xl); padding: var(--space-8); overflow: hidden; transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; } .case-study-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.24) 50%, transparent 100%); pointer-events: none; } .case-study-card:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 16px 40px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(3, 105, 161, 0.10); } .cs-tag { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; background: var(--primary-light); color: var(--primary); padding: 5px 10px; border-radius: var(--radius-full); margin-bottom: var(--space-5); align-self: flex-start; } .cs-metric { font-size: clamp(var(--text-4xl), 5vw, var(--text-5xl)); font-weight: var(--font-weight-black); line-height: 1; margin-bottom: var(--space-2); letter-spacing: -0.04em; color: var(--primary); } .cs-client { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-2); } .cs-problem { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); flex: 1; } .cs-link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-5); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--primary); transition: gap 0.2s ease, color 0.2s ease; } .cs-link:hover { gap: 10px; color: var(--primary-hover); } .proof-bottom-link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--primary); transition: gap 0.2s ease; } .proof-bottom-link:hover { gap: 12px; } /* ─── 17. Testimonials ─────────────────────────────────────────── */ .testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-bottom: clamp(var(--space-12), 5vw, var(--space-16)); } .testimonial-card { position: relative; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-xl); padding: var(--space-8); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.25); transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .testimonial-card:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 16px 40px rgba(0, 0, 0, 0.40); } .testimonial-card::before { content: '\201C'; position: absolute; top: -8px; left: 24px; font-size: 80px; color: var(--primary); opacity: 0.15; font-family: Georgia, serif; line-height: 1; pointer-events: none; } .testimonial-quote { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-secondary); margin-bottom: var(--space-6); font-style: italic; position: relative; z-index: 1; } .testimonial-author { display: flex; align-items: center; gap: var(--space-3); } .testimonial-avatar { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--text-on-yellow); flex-shrink: 0; } .testimonial-name { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .testimonial-role { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; } /* ─── 18. Logo Strip ───────────────────────────────────────────── */ .logo-strip-wrapper { margin-block: clamp(var(--space-12), 5vw, var(--space-16)); } .logo-strip-label { text-align: center; font-size: var(--text-xs); letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-6); font-weight: var(--font-weight-semibold); } .logo-strip { overflow: hidden; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .logo-strip-track { display: flex; align-items: center; gap: var(--space-4); width: max-content; animation: marquee 36s linear infinite; } .logo-strip-track:hover { animation-play-state: paused; } .logo-strip-item { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--text-muted); white-space: nowrap; padding: var(--space-3) var(--space-5); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); transition: color 0.20s ease, border-color 0.20s ease, background 0.20s ease; } .logo-strip-item:hover { color: var(--primary); border-color: rgba(3, 105, 161, 0.30); background: rgba(3, 105, 161, 0.08); } /* ─── 19. Diagnostic CTA Section ───────────────────────────────── */ .section-cta { padding-block: var(--section-padding-y); position: relative; overflow: hidden; } .section-cta::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 900px; height: 500px; background: radial-gradient(ellipse, rgba(3, 105, 161,0.22) 0%, transparent 65%); pointer-events: none; } .cta-inner { text-align: center; position: relative; z-index: 1; max-width: 820px; margin-inline: auto; } .cta-title { font-size: clamp(var(--text-3xl), 5.5vw, var(--text-6xl)); font-weight: var(--font-weight-black); line-height: 1.04; letter-spacing: -0.035em; margin-bottom: var(--space-5); color: #fff; } .cta-sub { font-size: var(--text-base); color: rgba(255,255,255,0.70); max-width: 500px; margin-inline: auto; margin-bottom: var(--space-12); line-height: var(--leading-relaxed); } .deliverables-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); max-width: 720px; margin-inline: auto; margin-bottom: var(--space-12); } .deliverable-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .deliverable-item:hover { background: rgba(255,255,255,0.10); border-color: rgba(3, 105, 161,0.40); transform: translateY(-3px); } .deliverable-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(3, 105, 161,0.18); border: 1px solid rgba(3, 105, 161,0.30); display: flex; align-items: center; justify-content: center; color: #FDBA74; flex-shrink: 0; } .deliverable-icon svg { width: 22px; height: 22px; } .deliverable-label { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: rgba(255,255,255,0.85); line-height: var(--leading-snug); letter-spacing: 0.01em; } .cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-5); } .cta-email-or { font-size: var(--text-sm); color: rgba(255,255,255,0.50); } .cta-email-or a { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } .cta-email-or a:hover { color: #fff; } .cta-microcopy { font-size: var(--text-xs); color: rgba(255,255,255,0.40); margin-top: var(--space-4); letter-spacing: 0.02em; } /* ─── 20. Footer ───────────────────────────────────────────────── */ .site-footer { background: var(--bg-dark); color: rgba(255,255,255,0.65); padding-top: clamp(3.5rem, 7vw, 6rem); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr 1.3fr; gap: var(--space-8); padding-bottom: clamp(var(--space-12), 5vw, var(--space-16)); border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-logo { font-size: var(--text-lg); font-weight: var(--font-weight-black); color: #fff; letter-spacing: -0.03em; display: block; margin-bottom: var(--space-3); } .footer-logo .logo-dot { color: var(--primary); } .footer-tagline { font-size: var(--text-sm); color: rgba(255,255,255,0.50); } .footer-heading { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.50); margin-bottom: var(--space-5); } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: var(--space-3); } .footer-col ul a { font-size: var(--text-sm); color: rgba(255,255,255,0.65); transition: color 0.2s ease; } .footer-col ul a:hover { color: #fff; } .footer-email { display: block; font-size: var(--text-sm); color: rgba(255,255,255,0.75); margin-bottom: var(--space-3); transition: color 0.2s ease; } .footer-email:hover { color: #fff; } .footer-linkedin, .footer-instagram { display: flex; width: fit-content; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: rgba(255,255,255,0.55); transition: color 0.2s ease; margin-top: var(--space-2); } .footer-linkedin:hover, .footer-instagram:hover { color: #fff; } .footer-cross-site { text-align: center; padding: var(--space-4) 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: var(--text-sm); color: rgba(255,255,255,0.55); } .footer-cross-site a { color: #FDBA74; font-weight: var(--font-weight-semibold); transition: color 0.2s ease; } .footer-cross-site a:hover { color: #fff; } .footer-bottom { padding: var(--space-5) 0; text-align: center; font-size: var(--text-xs); color: rgba(255,255,255,0.35); letter-spacing: 0.02em; } /* ─── 21. Forms ────────────────────────────────────────────────── */ .form-input, .form-select, .form-textarea { width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius-md); font-family: var(--font-base); font-size: var(--text-sm); color: var(--text-primary); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(3, 105, 161,0.12); } /* ─── 22. FAQ Accordion ────────────────────────────────────────── */ .faq-list { border-top: 1px solid var(--border); } .faq-item { border-bottom: 1px solid var(--border); } .faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--text-primary); cursor: pointer; background: none; border: none; width: 100%; text-align: left; transition: color 0.2s ease; } .faq-question:hover { color: var(--primary); } .faq-toggle-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--primary); transition: transform 0.3s ease; } .faq-item.open .faq-toggle-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding-bottom 0.4s ease; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); } .faq-item.open .faq-answer { max-height: 400px; padding-bottom: var(--space-5); } /* ─── 16a. Experience by the numbers — stats layout (replaces cards) ─── */ .results-numbers { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(var(--space-10), 6vw, var(--space-20)); align-items: center; } .results-heading { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); font-weight: var(--font-weight-black); line-height: 1.05; letter-spacing: -0.035em; color: var(--text-primary); margin-bottom: var(--space-5); } .results-heading-muted { color: var(--text-muted); } .results-sub { font-size: clamp(var(--text-base), 1.4vw, var(--text-lg)); color: var(--text-secondary); line-height: 1.6; max-width: 42ch; margin-bottom: var(--space-8); } .results-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: clamp(var(--space-10), 5vw, var(--space-16)); } /* Stat row — sits under a centered section header */ .results-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(var(--space-8), 4vw, var(--space-12)) clamp(var(--space-6), 3vw, var(--space-10)); } .results-stat { display: flex; flex-direction: column; gap: var(--space-4); } /* Label + number share a thin vertical rule on the left (reference look) */ .results-stat-top { border-left: 1px solid var(--border-strong); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .results-stat-label { font-size: var(--text-sm); color: var(--text-secondary); font-weight: var(--font-weight-medium); } .results-stat-value { font-size: clamp(2.5rem, 5vw, 4.25rem); font-weight: var(--font-weight-black); letter-spacing: -0.045em; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; } .results-stat-desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; padding-left: var(--space-5); max-width: 36ch; } @media (max-width: 900px) { .results-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .results-stats { grid-template-columns: 1fr; gap: var(--space-8); } .results-actions .btn-primary, .results-actions .btn-secondary { flex: 1; justify-content: center; } } /* ─── 16b. Case Studies by Industry — horizontal slider with arrow nav ─── */ .industry-cases-wrapper { margin-block: clamp(var(--space-12), 5vw, var(--space-16)); } .industry-cases-label { text-align: center; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: var(--text-muted); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--space-6); } .industry-cases-track-wrapper { position: relative; margin-inline: calc(-1 * var(--container-padding)); } .industry-cases-slider { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: var(--space-3) var(--container-padding) var(--space-4); } .industry-cases-slider::-webkit-scrollbar { display: none; } /* Each industry card — clean glass, no boxes-on-boxes */ .industry-case-card { flex: 0 0 auto; width: clamp(220px, 18vw, 260px); scroll-snap-align: start; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform 0.30s cubic-bezier(0.16,1,0.3,1), background 0.30s ease, border-color 0.30s ease, box-shadow 0.30s ease; } .industry-case-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.07); border-color: rgba(3, 105, 161, 0.30); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32), 0 0 24px rgba(3, 105, 161, 0.18); } .industry-case-icon { width: 40px; height: 40px; color: var(--primary); display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 14px rgba(3, 105, 161, 0.22)); margin-bottom: var(--space-2); transition: transform 0.30s ease; } .industry-case-card:hover .industry-case-icon { transform: translateY(-2px) scale(1.06); } .industry-case-name { font-size: 1rem; font-weight: var(--font-weight-bold); color: var(--text-primary); letter-spacing: -0.012em; line-height: 1.30; } .industry-case-meta { font-size: 0.8125rem; color: var(--text-secondary); font-weight: var(--font-weight-medium); } .industry-case-arrow { position: absolute; top: var(--space-6); right: var(--space-6); color: var(--primary); opacity: 0; transform: translateX(-6px); transition: opacity 0.25s ease, transform 0.25s ease; } .industry-case-card:hover .industry-case-arrow { opacity: 1; transform: translateX(0); } /* Slider arrows — floating dark-glass pills */ .industry-cases-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 9999px; background: rgba(15, 15, 26, 0.72); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.12); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 3; transition: background 0.20s ease, color 0.20s ease, transform 0.20s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 20px rgba(0, 0, 0, 0.25); } .industry-cases-arrow:hover { background: var(--primary); color: var(--text-on-yellow); border-color: var(--primary); transform: translateY(-50%) scale(1.06); } .industry-cases-arrow--prev { left: 8px; } .industry-cases-arrow--next { right: 8px; } /* Light-theme overrides for industry slider cards + arrows */ [data-theme="light"] .industry-case-card { background: rgba(255, 255, 255, 0.65); border-color: rgba(15, 15, 23, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 24px rgba(15, 15, 23, 0.08); } [data-theme="light"] .industry-case-card:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(3, 105, 161, 0.45); box-shadow: 0 16px 40px rgba(15, 15, 23, 0.12), 0 0 24px rgba(3, 105, 161, 0.20); } [data-theme="light"] .industry-case-arrow { color: var(--primary-deep); } [data-theme="light"] .industry-cases-arrow { background: rgba(255, 255, 255, 0.85); border-color: rgba(15, 15, 23, 0.10); color: #0F0F17; } [data-theme="light"] .industry-cases-arrow:hover { background: var(--primary); color: var(--text-on-yellow); border-color: var(--primary); } /* ─── 22b. Industries We Serve — minimal grid with thin yellow borders ─── */ .section-industries { padding-block: var(--section-padding-y); } .industries-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(3, 105, 161, 0.14); border-left: 1px solid rgba(3, 105, 161, 0.14); max-width: 1100px; margin-inline: auto; } .industry-item { padding: var(--space-10) var(--space-6); border-right: 1px solid rgba(3, 105, 161, 0.14); border-bottom: 1px solid rgba(3, 105, 161, 0.14); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); transition: background 0.30s ease; position: relative; overflow: hidden; } /* Subtle yellow wash on hover — premium grid feel */ .industry-item::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(3, 105, 161, 0.12) 0%, transparent 65%); opacity: 0; transition: opacity 0.30s ease; pointer-events: none; } .industry-item:hover::before { opacity: 1; } .industry-icon { width: 44px; height: 44px; color: var(--primary); display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 14px rgba(3, 105, 161, 0.20)); transition: transform 0.30s cubic-bezier(0.16, 1, 0.3, 1); } .industry-item:hover .industry-icon { transform: translateY(-3px) scale(1.06); } .industry-name { font-size: 0.9375rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); letter-spacing: -0.008em; line-height: 1.30; position: relative; z-index: 1; } /* ─── 22c. We Support the Environment — 4 sustainability pillars ─── */ .section-environment { padding-block: var(--section-padding-y); } .environment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(var(--space-6), 3vw, var(--space-10)); } .env-pillar { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .env-icon { width: 48px; height: 48px; color: var(--primary); margin-bottom: var(--space-6); filter: drop-shadow(0 6px 18px rgba(3, 105, 161, 0.25)); transition: transform 0.30s cubic-bezier(0.16, 1, 0.3, 1); } .env-pillar:hover .env-icon { transform: translateY(-3px) scale(1.04); } .env-stat { font-size: clamp(2.5rem, 4vw, 3.25rem); font-weight: var(--font-weight-black); color: var(--primary); line-height: 1; letter-spacing: -0.04em; margin-bottom: var(--space-3); background: linear-gradient(180deg, var(--primary) 0%, rgba(3, 105, 161, 0.70) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .env-title { font-size: 1.0625rem; font-weight: var(--font-weight-bold); color: var(--text-primary); letter-spacing: -0.014em; margin-bottom: var(--space-3); line-height: 1.30; } .env-body { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; font-weight: var(--font-weight-normal); } /* ─── 22d. Theme Toggle Button (lives inside .nav-pill-actions) ── */ .nav-pill-actions { justify-self: end; display: flex; align-items: center; gap: 8px; } .theme-toggle { width: 38px; height: 38px; border-radius: 9999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.90); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; position: relative; overflow: hidden; flex-shrink: 0; transition: background 0.20s ease, color 0.20s ease, transform 0.20s ease, border-color 0.20s ease; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; border-color: rgba(255, 255, 255, 0.22); } .theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } /* Sun/moon morph — only one visible at a time, animated rotate */ .theme-toggle-icon { position: absolute; transition: opacity 0.32s ease, transform 0.40s cubic-bezier(0.16, 1, 0.3, 1); } .theme-toggle-sun { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } [data-theme="light"] .theme-toggle-sun { opacity: 0; transform: rotate(90deg) scale(0.5); } [data-theme="light"] .theme-toggle-moon { opacity: 1; transform: rotate(0deg) scale(1); } /* ════════════════════════════════════════════════════════════════ LIGHT THEME OVERRIDES — only apply when [data-theme="light"] The hero stays cinematic (dark video + overlay) regardless; everything below the hero adapts. ════════════════════════════════════════════════════════════════ */ [data-theme="light"] { /* Text — flipped */ --text-primary: #0F0F17; --text-secondary: rgba(15, 15, 23, 0.70); --text-muted: rgba(15, 15, 23, 0.55); --text-soft: rgba(15, 15, 23, 0.38); --text-on-yellow: #0F0F17; /* Backgrounds — warm, near-white */ --bg-page: #F8F5F0; --bg-soft: #EAEBE6; --bg-section: #EAEBE6; --bg-tint: #FBF1CE; --bg-dark: #FFFFFF; --bg-surface: #E7E8E2; /* Borders — translucent graphite */ --border: rgba(20, 22, 28, 0.12); --border-strong: rgba(20, 22, 28, 0.18); --border-subtle: rgba(20, 22, 28, 0.06); /* INSTRUMENT — blueprint paper grid + panels */ --grid-line: rgba(20, 22, 28, 0.05); --grid-line-strong: rgba(20, 22, 28, 0.08); --panel: rgba(255, 255, 255, 0.62); --panel-border: rgba(20, 22, 28, 0.12); } /* Body — yellow + soft cool gradients instead of yellow + white */ [data-theme="light"] body { background: linear-gradient(0deg, var(--grid-line) 1px, transparent 1px) 0 0 / 100% 56px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 56px 100%, radial-gradient(ellipse 1100px 720px at 50% -10%, rgba(3, 105, 161, 0.10) 0%, transparent 60%), radial-gradient(ellipse 900px 640px at 92% 108%, rgba(3, 105, 161, 0.07) 0%, transparent 58%), var(--bg-page); background-attachment: fixed; } /* Theme toggle button — invert palette */ [data-theme="light"] .theme-toggle { background: rgba(15, 15, 23, 0.06); border-color: rgba(15, 15, 23, 0.12); color: rgba(15, 15, 23, 0.80); } [data-theme="light"] .theme-toggle:hover { background: rgba(15, 15, 23, 0.12); color: #0F0F17; border-color: rgba(15, 15, 23, 0.22); } /* Navbar pill — light frosted glass */ [data-theme="light"] .nav-pill { background: rgba(255, 255, 255, 0.55); border-color: rgba(15, 15, 23, 0.10); box-shadow: 0 12px 48px rgba(15, 15, 23, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85); } [data-theme="light"] .main-nav a, [data-theme="light"] .nav-link { color: rgba(15, 15, 23, 0.72); } [data-theme="light"] .main-nav a:hover, [data-theme="light"] .nav-link:hover { color: #0F0F17; background: rgba(15, 15, 23, 0.06); } [data-theme="light"] .nav-pill .logo-text { color: #0F0F17; } [data-theme="light"] .nav-pill .logo-text .logo-dot { color: #0F0F17; } /* Sub-menu dropdown */ [data-theme="light"] .main-nav .sub-menu, [data-theme="light"] .main-nav .dropdown-menu { background: rgba(255, 255, 255, 0.95); border-color: rgba(15, 15, 23, 0.08); box-shadow: 0 16px 40px rgba(15, 15, 23, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95); } [data-theme="light"] .main-nav .sub-menu a { color: rgba(15, 15, 23, 0.65); } [data-theme="light"] .main-nav .sub-menu a:hover { color: #0F0F17; background: rgba(15, 15, 23, 0.06); } /* Mobile nav overlay */ [data-theme="light"] .mobile-nav { background: rgba(250, 250, 247, 0.96); } [data-theme="light"] .hamburger { background: rgba(255, 255, 255, 0.65); border-color: rgba(15, 15, 23, 0.12); } [data-theme="light"] .hamburger-line { background: #0F0F17; } /* Glass cards — light frosted instead of dark frosted */ [data-theme="light"] .card, [data-theme="light"] .case-study-card, [data-theme="light"] .testimonial-card { background: rgba(255, 255, 255, 0.65); border-color: rgba(15, 15, 23, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 24px rgba(15, 15, 23, 0.08); } [data-theme="light"] .card::before, [data-theme="light"] .case-study-card::before { background: linear-gradient(90deg, transparent 0%, rgba(15, 15, 23, 0.12) 50%, transparent 100%); } [data-theme="light"] .card:hover, [data-theme="light"] .case-study-card:hover, [data-theme="light"] .testimonial-card:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(15, 15, 23, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 16px 40px rgba(15, 15, 23, 0.12), 0 0 0 1px rgba(3, 105, 161, 0.20); } /* Section labels — darker yellow for contrast on light bg */ [data-theme="light"] .section-label { color: var(--primary-deep); background: rgba(3, 105, 161, 0.18); border-color: rgba(3, 105, 161, 0.40); } /* Yellow text on white needs darker amber for readability */ [data-theme="light"] .card-link, [data-theme="light"] .cs-link, [data-theme="light"] .info-link, [data-theme="light"] .proof-bottom-link, [data-theme="light"] .timeline-phase, [data-theme="light"] .footer-cross-site a, [data-theme="light"] .mobile-nav ul a:hover, [data-theme="light"] .faq-question:hover, [data-theme="light"] .faq-toggle-icon, [data-theme="light"] .logo-strip-item:hover { color: var(--primary-deep); } /* Hero text gradients keep yellow but stat numbers etc. shift darker */ [data-theme="light"] .cs-metric, [data-theme="light"] .env-stat, [data-theme="light"] .process-step-num, [data-theme="light"] .challenge-number { color: var(--primary-deep); } [data-theme="light"] .env-stat { background: linear-gradient(180deg, var(--primary-deep) 0%, rgba(3, 105, 161, 0.65) 100%); -webkit-background-clip: text; background-clip: text; } /* Process rail — line/dots adapt to light page bg punch-out */ [data-theme="light"] .process-rail-line { background: linear-gradient(to right, transparent 0%, rgba(3, 105, 161, 0.45) 6%, rgba(3, 105, 161, 0.45) 94%, transparent 100%); } /* Industries grid — borders + hover wash adapt */ [data-theme="light"] .industries-grid { border-top-color: rgba(15, 15, 23, 0.10); border-left-color: rgba(15, 15, 23, 0.10); } [data-theme="light"] .industry-item { border-right-color: rgba(15, 15, 23, 0.10); border-bottom-color: rgba(15, 15, 23, 0.10); } [data-theme="light"] .industry-item::before { background: radial-gradient(ellipse at 50% 100%, rgba(3, 105, 161, 0.22) 0%, transparent 65%); } /* Logo strip items */ [data-theme="light"] .logo-strip-item { background: rgba(255, 255, 255, 0.65); border-color: rgba(15, 15, 23, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); } /* Form inputs */ [data-theme="light"] .form-input, [data-theme="light"] .form-select, [data-theme="light"] .form-textarea { background: rgba(255, 255, 255, 0.75); border-color: rgba(15, 15, 23, 0.10); color: var(--text-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); } /* Cross-site link (legacy) */ [data-theme="light"] .cross-site-link { background: rgba(15, 15, 23, 0.04); } [data-theme="light"] .cross-site-link:hover { background: rgba(3, 105, 161, 0.16); color: var(--primary-deep); } /* Timeline phase/desc/deliverables — flip to dark text on light */ [data-theme="light"] .timeline-connector { background: rgba(15, 15, 23, 0.12); } /* CTA section — keep it dark in light mode too, so the white text stays readable and the section reads as a final emphatic spotlight on the light page. */ [data-theme="light"] .section-cta { background: #0F0F17; border-radius: 32px; margin: var(--space-12) clamp(var(--space-4), 3vw, var(--space-12)); box-shadow: 0 24px 60px rgba(15, 15, 23, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); overflow: hidden; } [data-theme="light"] .section-cta::before { background: radial-gradient(ellipse, rgba(3, 105, 161, 0.32) 0%, transparent 65%); } /* Footer — was dark; stays slightly darker than page even in light mode. */ [data-theme="light"] .site-footer { background: #1E1E2A; /* still dark, intentionally — footer punctuates */ color: rgba(255,255,255,0.65); } /* Hero stays dark — it's a self-contained video environment. No overrides. */ /* ════════════════════════════════════════════════════════════════ SINGLE CASE STUDY (single-case_study.php) — editorial layout ════════════════════════════════════════════════════════════════ */ .cs-detail { padding-top: 0; } /* ── Hero ── */ .csd-hero { padding-top: 140px; padding-bottom: var(--space-12); } .csd-hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-10); } .csd-eyebrow { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); } .csd-scroll-cue { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .csd-scroll-cue svg { animation: csdBob 1.8s ease-in-out infinite; } @keyframes csdBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .csd-title { font-size: clamp(2.75rem, 7vw, 5.5rem); font-weight: var(--font-weight-black); line-height: 1.02; letter-spacing: -0.04em; color: var(--text-primary); max-width: 16ch; margin-bottom: var(--space-6); } .csd-summary { font-size: clamp(var(--text-lg), 2vw, var(--text-2xl)); line-height: 1.5; color: var(--text-secondary); max-width: 52ch; font-weight: var(--font-weight-normal); } .csd-hero-media { margin-top: var(--space-10); border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.40); aspect-ratio: 16 / 8; background: var(--bg-surface); } .csd-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .csd-hero-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); color: var(--text-soft); background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(3, 105, 161,0.08) 0%, transparent 70%), var(--bg-surface); } .csd-hero-placeholder svg { width: 64px; height: 64px; opacity: 0.55; } .csd-hero-placeholder span { font-size: var(--text-sm); letter-spacing: 0.04em; } /* ── Section + two-column grid ── */ .csd-section { border-top: 1px solid var(--border); } .csd-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(var(--space-8), 6vw, var(--space-20)); align-items: start; } /* Left column label/title sticks while the right column scrolls */ .csd-grid-left { position: sticky; top: 120px; } .csd-label { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-4); } .csd-h2 { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); font-weight: var(--font-weight-bold); line-height: 1.12; letter-spacing: -0.03em; color: var(--text-primary); } .csd-h3 { font-size: clamp(var(--text-xl), 2vw, var(--text-2xl)); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; color: var(--text-primary); margin: var(--space-8) 0 var(--space-4); } .csd-lead { font-size: var(--text-lg); line-height: 1.6; color: var(--text-primary); margin-bottom: var(--space-6); } /* Prose blocks (problem / build narrative) */ .csd-prose p { font-size: var(--text-base); line-height: 1.75; color: var(--text-secondary); margin-bottom: var(--space-5); } .csd-prose p:last-child { margin-bottom: 0; } .csd-prose ul { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); } .csd-prose li { position: relative; padding-left: var(--space-6); font-size: var(--text-base); line-height: 1.65; color: var(--text-secondary); } .csd-prose li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px rgba(3, 105, 161,0.5); } .csd-prose strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); } /* Tags */ .csd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-6); } .csd-tag { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.04em; color: var(--text-secondary); padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); } /* ── Results ── */ .csd-results-head { max-width: 60ch; margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); } .csd-results-head .csd-lead { color: var(--text-secondary); margin-top: var(--space-5); margin-bottom: 0; } .csd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); padding-block: clamp(var(--space-8), 4vw, var(--space-12)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: clamp(var(--space-8), 4vw, var(--space-12)); } .csd-stat { display: flex; flex-direction: column; gap: var(--space-2); } .csd-stat-value { font-size: clamp(var(--text-4xl), 4.5vw, 3.5rem); font-weight: var(--font-weight-black); letter-spacing: -0.04em; line-height: 1; color: var(--primary); } .csd-stat-label { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.4; } .csd-result-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-8); max-width: 960px; } .csd-result-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-base); line-height: 1.5; color: var(--text-secondary); } .csd-result-list svg { color: var(--primary); flex-shrink: 0; margin-top: 3px; } /* ── Quote ── */ .csd-quote { max-width: 24ch; margin: 0; } .csd-quote blockquote { font-size: clamp(var(--text-2xl), 3.4vw, var(--text-4xl)); font-weight: var(--font-weight-medium); line-height: 1.3; letter-spacing: -0.02em; color: var(--text-primary); max-width: 32ch; margin-bottom: var(--space-8); } .csd-quote figcaption { display: flex; align-items: center; gap: var(--space-3); } .csd-quote-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: var(--text-on-yellow); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); flex-shrink: 0; } .csd-quote-author { display: block; font-weight: var(--font-weight-semibold); color: var(--text-primary); font-size: var(--text-sm); } .csd-quote-role { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: 2px; } /* ── Tech pills ── */ .csd-tech-pills { display: flex; flex-wrap: wrap; gap: 10px; } .csd-tech-pill { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary); padding: 8px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .csd-tech-pill:hover { border-color: rgba(3, 105, 161,0.4); color: var(--primary); background: rgba(3, 105, 161,0.06); } /* ── More case studies ── */ .csd-related .csd-label { margin-bottom: var(--space-8); } .csd-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .csd-related-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; text-decoration: none; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease, box-shadow 0.3s ease; } .csd-related-card:hover { transform: translateY(-4px); border-color: rgba(3, 105, 161,0.3); box-shadow: 0 20px 48px rgba(0,0,0,0.35); } .csd-related-media { aspect-ratio: 16 / 10; background: var(--bg-surface); overflow: hidden; } .csd-related-media img { width: 100%; height: 100%; object-fit: cover; } .csd-related-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; } .csd-related-title { font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--text-primary); letter-spacing: -0.015em; } .csd-related-arrow { position: absolute; top: var(--space-6); right: var(--space-6); width: 36px; height: 36px; border-radius: 50%; background: rgba(15,15,26,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; color: #fff; transition: background 0.2s ease, color 0.2s ease; } .csd-related-card:hover .csd-related-arrow { background: var(--primary); color: var(--text-on-yellow); border-color: var(--primary); } /* ── CTA ── */ .csd-cta { border-top: 1px solid var(--border); text-align: center; } .csd-cta-title { font-size: clamp(3rem, 9vw, 7rem); font-weight: var(--font-weight-black); line-height: 0.98; letter-spacing: -0.045em; color: var(--text-primary); margin-bottom: var(--space-10); } .csd-cta-btn { font-size: var(--text-base); padding: 16px 34px; } /* Light-theme nudges for the case study */ [data-theme="light"] .csd-hero-media { box-shadow: 0 32px 80px rgba(15,15,23,0.16); } [data-theme="light"] .csd-related-card:hover { box-shadow: 0 20px 48px rgba(15,15,23,0.14); } [data-theme="light"] .csd-stat-value { color: var(--primary-deep); } [data-theme="light"] .csd-eyebrow, [data-theme="light"] .csd-label { color: var(--primary-deep); } /* Case study responsive */ @media (max-width: 900px) { .csd-grid { grid-template-columns: 1fr; gap: var(--space-8); } .csd-grid-left { position: static; } .csd-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } .csd-result-list { grid-template-columns: 1fr; } .csd-related-grid { grid-template-columns: 1fr; } .csd-hero-media { aspect-ratio: 16 / 10; } } @media (max-width: 480px) { .csd-stats { grid-template-columns: 1fr 1fr; gap: var(--space-6); } .csd-hero-top { flex-direction: column; align-items: flex-start; gap: var(--space-3); } } /* ════════════════════════════════════════════════════════════════ CASE STUDIES ARCHIVE (archive-case_study.php / taxonomy-industry.php) ════════════════════════════════════════════════════════════════ */ .cs-archive-hero { padding-top: 160px; padding-bottom: var(--space-10); text-align: center; } .cs-archive-hero .section-label { margin-bottom: var(--space-5); } .cs-archive-title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: var(--font-weight-black); line-height: 1.04; letter-spacing: -0.04em; color: var(--text-primary); margin-bottom: var(--space-4); } .cs-archive-sub { font-size: clamp(var(--text-base), 1.6vw, var(--text-lg)); color: var(--text-secondary); max-width: 48ch; margin-inline: auto; } /* Filter tabs */ .cs-filter-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: clamp(var(--space-8), 4vw, var(--space-12)); } .cs-filter-tab { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--text-secondary); padding: 9px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .cs-filter-tab:hover { color: var(--text-primary); border-color: rgba(3, 105, 161, 0.45); background: rgba(3, 105, 161, 0.06); } .cs-filter-tab.is-active { background: var(--primary); color: var(--text-on-yellow); border-color: var(--primary); } /* Grid (reuses .csd-related-card styling) */ .cs-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .cs-archive-card { height: 100%; } .cs-archive-excerpt { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; margin-top: 2px; } /* Pagination */ .cs-archive-pagination { display: flex; justify-content: center; margin-top: clamp(var(--space-10), 5vw, var(--space-16)); } .cs-archive-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; margin: 0 4px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--text-secondary); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .cs-archive-pagination a.page-numbers:hover { color: var(--text-primary); border-color: rgba(3, 105, 161, 0.45); background: rgba(3, 105, 161, 0.06); } .cs-archive-pagination .page-numbers.current { background: var(--primary); color: var(--text-on-yellow); border-color: var(--primary); } /* Empty state */ .cs-archive-empty { text-align: center; padding-block: clamp(var(--space-12), 6vw, var(--space-20)); display: flex; flex-direction: column; align-items: center; gap: var(--space-6); } .cs-archive-empty p { font-size: var(--text-lg); color: var(--text-secondary); max-width: 40ch; } @media (max-width: 900px) { .cs-archive-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .cs-archive-grid { grid-template-columns: 1fr; } .cs-filter-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 4px; } .cs-filter-tabs::-webkit-scrollbar { display: none; } } /* ─── 23. Responsive ───────────────────────────────────────────── */ @media (max-width: 1100px) { .timeline { grid-template-columns: 1fr; gap: var(--space-8); } .timeline-connector { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } } @media (max-width: 1100px) { /* Process rail — 3 columns, hide horizontal line (2 rows of 3) */ .process-rail { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-16); } .process-rail-line { display: none; } /* Environment pillars — 2 columns */ .environment-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-12); } } @media (max-width: 1024px) { /* Challenges — drop the central factory, go 2-col grid, drop connection lines */ .challenges-infographic { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: var(--space-10) var(--space-8); } .challenge-center { display: none; } .challenge-item--01 { grid-column: 1; grid-row: 1; text-align: left; } .challenge-item--02 { grid-column: 1; grid-row: 2; text-align: left; } .challenge-item--03 { grid-column: 2; grid-row: 1; text-align: left; } .challenge-item--04 { grid-column: 2; grid-row: 2; text-align: left; } .challenge-item--01, .challenge-item--02 { margin-left: 0; } .challenge-item--01 .challenge-body, .challenge-item--02 .challenge-body { margin-left: 0; } .challenge-item::before, .challenge-item::after { display: none; } } @media (max-width: 900px) { /* Industries — 2 columns */ .industries-grid { grid-template-columns: repeat(2, 1fr); } /* Stack infographic nodes vertically, rotate connector lines to vertical */ .problem-infographic, .services-infographic { grid-template-columns: 1fr; justify-items: center; gap: var(--space-6); } .info-gap, .info-flow { width: 2px; height: 48px; margin-top: 0; background-size: 2px 10px; background-repeat: repeat-y; background-image: linear-gradient(to bottom, rgba(3, 105, 161, 0.30) 50%, transparent 50%); } .info-flow { background: linear-gradient(to bottom, transparent 0%, var(--primary) 20%, var(--primary) 80%, transparent 100%); } .info-gap::before { top: -3px; left: 50%; right: auto; transform: translateX(-50%); } .info-gap::after { top: auto; bottom: -3px; left: 50%; right: auto; transform: translateX(-50%); } .info-flow::after { top: auto; right: 50%; bottom: -2px; transform: translateX(50%) rotate(135deg); } .info-body { max-width: 420px; } .cs-grid { grid-template-columns: repeat(2, 1fr); } .testimonials-grid { grid-template-columns: 1fr; } .deliverables-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .nav-pill, .cta-pill { display: none; } .hamburger { display: flex; } .site-header { justify-content: flex-end; padding-inline: 16px; } .header-inner { padding-inline: 0; } .section-header { text-align: left; } .section-header .section-sub { margin-inline: 0; } .hero-actions { flex-direction: column; align-items: flex-start; } .hero-actions .btn-primary, .hero-actions .btn-secondary { width: 100%; max-width: 300px; justify-content: center; } .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); } } @media (max-width: 640px) { .cs-grid { grid-template-columns: 1fr; } .deliverables-grid { grid-template-columns: 1fr 1fr; } .cta-actions { flex-direction: column; align-items: center; width: 100%; } .cta-actions .btn-primary { width: 100%; justify-content: center; } /* Challenges — single column on phone */ .challenges-infographic { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; } .challenge-item--01 { grid-column: 1; grid-row: 1; } .challenge-item--02 { grid-column: 1; grid-row: 2; } .challenge-item--03 { grid-column: 1; grid-row: 3; } .challenge-item--04 { grid-column: 1; grid-row: 4; } /* Process rail — 2 columns on phone */ .process-rail { grid-template-columns: 1fr 1fr; row-gap: var(--space-12); } /* Environment — single column on phone */ .environment-grid { grid-template-columns: 1fr; } /* Team slider — no zigzag, hide arrows, let users swipe */ .team-card--up, .team-card--down { transform: none; } .team-slider-arrow, .industry-cases-arrow { display: none; } .team-slider { padding-top: 24px; } .team-card { width: 160px; } } @media (max-width: 480px) { .hero-label { font-size: 0.6rem; letter-spacing: 0.07em; padding: 5px 9px; margin-bottom: var(--space-5); } .trust-bar { flex-direction: column; align-items: flex-start; gap: var(--space-2); } .trust-sep { display: none; } .deliverables-grid { grid-template-columns: 1fr; } } /* ─── 24. Reduced Motion ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero-title .word, .hero-sub, .hero-actions, .trust-bar, .hero-label, [data-animate], [data-animate-stagger] > *, .timeline-step { opacity: 1 !important; transform: none !important; } } /* ================================================================ PREMIUM GLASSMORPHISM (reference-matched, tuned) Cards: case-study slider, testimonials, industries, diagnostic. ================================================================ */ .industry-case-card, .testimonial-card, .industry-item, .deliverable-item { position: relative; border: none; border-radius: 26px; background: radial-gradient(120% 120% at 2% -6%, rgba(3, 105, 161, 0.24) 0%, rgba(255, 140, 0, 0.11) 16%, rgba(3, 105, 161, 0) 44%), linear-gradient(150deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.035) 46%, rgba(255, 255, 255, 0.01) 100%); backdrop-filter: blur(24px) saturate(155%); -webkit-backdrop-filter: blur(24px) saturate(155%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10), 0 2px 6px rgba(0, 0, 0, 0.20), 0 24px 60px -12px rgba(0, 0, 0, 0.55); overflow: hidden; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background 0.4s var(--ease-out); } .industry-case-card::after, .testimonial-card::after, .industry-item::after, .deliverable-item::after { content: ''; position: absolute; inset: 0; width: auto; height: auto; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.28) 20%, rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.10) 82%, rgba(255, 255, 255, 0.42) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 3; transition: background 0.4s var(--ease-out); } .industry-case-card:hover, .testimonial-card:hover, .industry-item:hover, .deliverable-item:hover { transform: translateY(-6px); background: radial-gradient(120% 120% at 2% -6%, rgba(3, 105, 161, 0.32) 0%, rgba(255, 140, 0, 0.14) 18%, rgba(3, 105, 161, 0) 48%), linear-gradient(150deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 46%, rgba(255, 255, 255, 0.02) 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.14), 0 4px 10px rgba(0, 0, 0, 0.22), 0 36px 80px -14px rgba(0, 0, 0, 0.62), 0 0 50px rgba(3, 105, 161, 0.13); } .industry-case-card:hover::after, .testimonial-card:hover::after, .industry-item:hover::after, .deliverable-item:hover::after { background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.40) 18%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.18) 80%, rgba(255, 255, 255, 0.55) 100%); } /* Industries: turn the connected hairline grid into separate glass cards */ .industries-grid { border: none; gap: var(--space-5); } .industry-item::before { content: none; } /* Light theme — frosted white glass, same warm refraction (CTA deliverables stay dark) */ [data-theme="light"] .industry-case-card, [data-theme="light"] .testimonial-card, [data-theme="light"] .industry-item { background: radial-gradient(120% 120% at 2% -6%, rgba(3, 105, 161, 0.20) 0%, rgba(3, 105, 161, 0.08) 18%, rgba(3, 105, 161, 0) 48%), linear-gradient(150deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1), 0 2px 6px rgba(20, 26, 45, 0.06), 0 24px 56px -14px rgba(20, 26, 45, 0.20); } [data-theme="light"] .industry-case-card::after, [data-theme="light"] .testimonial-card::after, [data-theme="light"] .industry-item::after { background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.55) 22%, rgba(20, 26, 45, 0.04) 55%, rgba(20, 26, 45, 0.10) 100%); } [data-theme="light"] .industry-case-card:hover, [data-theme="light"] .testimonial-card:hover, [data-theme="light"] .industry-item:hover { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1), 0 34px 72px -16px rgba(20, 26, 45, 0.26), 0 0 44px rgba(3, 105, 161, 0.16); } [data-theme="light"] .industries-grid { border: none; } /* ================================================================ ███ REDESIGN LAYER — "INSTRUMENT" (v1.1) Precision-instrumentation reskin over the existing structure. Three type voices (Bricolage display · Hanken body · Space Mono telemetry), blueprint-grid atmosphere, sharp hairline panels, de-pilled technical tags, notched controls, signal-amber accent. No markup changed — every selector below already exists. ================================================================ */ /* ── 1. Type voices ───────────────────────────────────────────── */ /* Display — characterful grotesque for every headline */ .hero-title, .section-title, .cta-title, .csd-title, .csd-cta-title, .cs-archive-title, .results-heading, .timeline-name, .card-title, .info-title, .process-step-title, .industry-case-name, .industry-name, .env-title, .team-name, .footer-logo, .nav-pill .logo-text, .csd-h2, .csd-h3, .csd-quote blockquote, .mobile-nav-list a { font-family: var(--font-display); font-feature-settings: normal; } .hero-title, .cta-title, .csd-title, .csd-cta-title, .cs-archive-title, .results-heading, .section-title { letter-spacing: -0.025em; } /* Telemetry — monospace, tracked labels read like instrument readouts */ .section-label, .hero-label, .process-step-num, .timeline-phase, .logo-strip-label, .industry-cases-label, .csd-eyebrow, .csd-label, .footer-heading, .cta-microcopy, .results-stat-label, .cs-tag, .cs-filter-tab, .csd-tag, .csd-tech-pill, .trust-bar, .challenge-pill, .process-step-num, .mobile-nav-footer .btn-primary { font-family: var(--font-mono); } .section-label, .hero-label { letter-spacing: 0.13em; font-weight: 400; } .trust-bar { letter-spacing: 0.06em; font-size: 0.72rem; } /* Big numeric readouts — monospace tabular, like a gauge */ .results-stat-value, .cs-metric, .csd-stat-value, .challenge-number, .env-stat, .timeline-number, .cta-pill, .nav-pill .cta-pill { font-variant-numeric: tabular-nums; } .results-stat-value, .cs-metric, .csd-stat-value, .challenge-number { font-family: var(--font-mono); letter-spacing: -0.02em; } /* ── 2. Signature — amber registration tick on every eyebrow ──── */ .section-label::before { content: ''; width: 7px; height: 7px; background: var(--primary); box-shadow: 0 0 9px rgba(3, 105, 161, 0.85); flex: 0 0 auto; } /* ── 3. De-pill the tags — technical chips, not friendly capsules ─ */ .section-label, .hero-label, .cs-tag, .csd-tag, .csd-tech-pill, .cs-filter-tab, .logo-strip-item { border-radius: 2px; } .challenge-pill { border-radius: 3px; letter-spacing: 0.08em; } .section-label { padding: 7px 12px; } /* ── 4. Notched controls — squared with an engineered corner cut ─ */ .btn-primary { border-radius: 2px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); letter-spacing: 0.02em; } .btn-secondary { border-radius: 2px; letter-spacing: 0.02em; } /* Header → a precision control bar instead of a soft pill */ .nav-pill { border-radius: 7px; } .main-nav a, .nav-link { border-radius: 3px; } .nav-pill .cta-pill { border-radius: 2px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); } .theme-toggle { border-radius: 3px; } .hamburger { border-radius: 7px; } .team-slider-arrow, .industry-cases-arrow { border-radius: 5px; } /* ── 5. Hero — terminal "boot" cue after the eyebrow ──────────── */ .hero-label::after { content: '\25AE'; margin-left: 3px; color: var(--primary); animation: instBlink 1.15s steps(1) infinite; } @keyframes instBlink { 50% { opacity: 0; } } .hero-title { letter-spacing: -0.03em; } /* ── 6. Instrument panels — flat hairline surfaces, sharp corners ─ */ .card, .case-study-card, .testimonial-card, .industry-case-card, .industry-item { border-radius: var(--radius-lg); border: 1px solid var(--panel-border); background: var(--panel); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* Strip the heavy glass bezel/ shimmer from the old premium layer */ .industry-case-card::after, .testimonial-card::after, .industry-item::after, .industry-case-card:hover::after, .testimonial-card:hover::after, .industry-item:hover::after, [data-theme="light"] .industry-case-card::after, [data-theme="light"] .testimonial-card::after, [data-theme="light"] .industry-item::after { background: none; padding: 0; } .card::before, .case-study-card::before { background: var(--grid-line-strong); } /* Uniform hover — amber edge + lift + faint signal glow */ .card:hover, .case-study-card:hover, .testimonial-card:hover, .industry-case-card:hover, .industry-item:hover { transform: translateY(-4px); border-color: rgba(3, 105, 161, 0.42); background: var(--panel); box-shadow: inset 0 1px 0 rgba(3, 105, 161, 0.22), 0 18px 42px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(3, 105, 161, 0.12); } [data-theme="light"] .card:hover, [data-theme="light"] .case-study-card:hover, [data-theme="light"] .testimonial-card:hover, [data-theme="light"] .industry-case-card:hover, [data-theme="light"] .industry-item:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 42px rgba(20, 22, 28, 0.14), 0 0 0 1px rgba(3, 105, 161, 0.30); } /* Restyle the testimonial quote glyph to match the mono voice */ .testimonial-card::before { content: '"'; font-family: var(--font-mono); font-size: 46px; top: 6px; left: 20px; opacity: 0.30; } /* Diagnostic deliverable tiles live in the always-dark CTA — keep dark */ .deliverable-item { border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .deliverable-item::after { background: none; padding: 0; } .deliverable-item:hover { transform: translateY(-3px); border-color: rgba(3, 105, 161, 0.45); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 1px rgba(3, 105, 161, 0.16); } .deliverable-icon, .card-icon, .timeline-number, .cta-pill, .nav-pill .cta-pill { border-radius: 2px; } /* ── 7. Industry grid — keep the engineered hairline matrix look ── */ .industries-grid { border-top: 1px solid var(--panel-border); border-left: 1px solid var(--panel-border); gap: 0; } .industry-item { border: none; border-right: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border); border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .industry-item:hover { transform: none; background: var(--grid-line-strong); border-color: rgba(3, 105, 161, 0.30); box-shadow: none; } /* ── 8. Section eyebrow rule — a measured baseline under headers ── */ .results-stat-top { border-left: 2px solid var(--primary); } /* ── 9. Honor reduced-motion for the new blink ────────────────── */ @media (prefers-reduced-motion: reduce) { .hero-label::after { animation: none; } } /* ================================================================ INDUSTRY CHALLENGES - radial constellation, all content always visible (no hover/click). 8 full spokes orbit a central hub on desktop; stacks into full cards on tablet/phone. ================================================================ */ /* Make the section fill the viewport — override .section-pad for this section only */ .section-problem.section-pad { padding-block: 1.5rem; min-height: 100vh; display: flex; flex-direction: column; } .section-problem .container { flex-shrink: 0; } .challenge-orbit { position: relative; flex: 1; width: 100%; max-width: 1440px; min-height: 0; margin: 1rem auto 0; padding-inline: clamp(1rem, 3vw, 2.5rem); } .orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .orbit-svg line { stroke: rgba(3, 105, 161, 0.16); stroke-width: 1; vector-effect: non-scaling-stroke; } .orbit-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(210px, 22vw, 250px); aspect-ratio: 1 / 1; border-radius: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.4rem; border: 1px solid rgba(3, 105, 161, 0.30); background: radial-gradient(circle, rgba(10,11,15,0.94) 0%, rgba(10,11,15,0.85) 60%, transparent 82%), radial-gradient(circle at 50% 50%, rgba(3, 105, 161,0.14) 0%, transparent 72%); box-shadow: 0 0 0 1px rgba(3, 105, 161,0.10), 0 0 64px rgba(3, 105, 161,0.13), inset 0 0 44px rgba(3, 105, 161,0.06); } .orbit-rings { position: absolute; inset: 0; pointer-events: none; } .orbit-rings span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(3, 105, 161, 0.16); } .orbit-rings span:nth-child(1) { width: 122%; height: 122%; } .orbit-rings span:nth-child(2) { width: 150%; height: 150%; border-color: rgba(3, 105, 161, 0.07); } .orbit-eyebrow { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.6rem; } .orbit-q { font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.02em; color: var(--primary); max-width: 13ch; } .orbit-item { position: absolute; width: clamp(175px, 13.5vw, 200px); transform: translate(-50%, -50%); z-index: 3; } .orbit-num { display: block; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; color: var(--primary); opacity: 0.85; margin-bottom: 0.2rem; } .orbit-title { font-family: var(--font-display); font-size: clamp(1.25rem, 1.55vw, 1.4rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; color: var(--text-primary); margin-bottom: 0.35rem; } .orbit-tag { font-size: 0.95rem; font-weight: 600; line-height: 1.35; color: var(--primary); margin-bottom: 0.45rem; } .orbit-body { font-size: 0.875rem; line-height: 1.55; color: var(--text-secondary); } .orbit-item--1 { left: 50%; top: 6%; text-align: center; } .orbit-item--2 { left: 75%; top: 16%; text-align: left; } .orbit-item--3 { left: 92%; top: 50%; text-align: left; } .orbit-item--4 { left: 75%; top: 83%; text-align: left; } .orbit-item--5 { left: 50%; top: 94%; text-align: center; } .orbit-item--6 { left: 25%; top: 83%; text-align: right; } .orbit-item--7 { left: 8%; top: 50%; text-align: right; } .orbit-item--8 { left: 25%; top: 16%; text-align: right; } /* Light mode */ [data-theme="light"] .orbit-svg line { stroke: rgba(3, 105, 161, 0.22); } [data-theme="light"] .orbit-eyebrow, [data-theme="light"] .orbit-num, [data-theme="light"] .orbit-tag { color: var(--primary-deep); } [data-theme="light"] .orbit-q { color: #0F0F17; } [data-theme="light"] .orbit-hub { border-color: rgba(3, 105, 161, 0.30); background: radial-gradient(circle, rgba(243,244,241,0.96) 0%, rgba(243,244,241,0.88) 60%, transparent 82%), radial-gradient(circle at 50% 50%, rgba(3, 105, 161,0.16) 0%, transparent 72%); box-shadow: 0 0 0 1px rgba(3, 105, 161,0.12), 0 0 50px rgba(3, 105, 161,0.18), inset 0 0 40px rgba(3, 105, 161,0.10); } [data-theme="light"] .orbit-rings span { border-color: rgba(3, 105, 161, 0.18); } /* Tablet / phone - drop the radial geometry, stack into full cards */ @media (max-width: 1024px) { .challenge-orbit { min-height: 0; max-width: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 1.5rem); } .orbit-svg, .orbit-rings { display: none; } .orbit-hub { position: static; transform: none; grid-column: 1 / -1; width: auto; aspect-ratio: auto; max-width: 460px; margin: 0 auto 0.5rem; border-radius: var(--radius-xl); padding: 1.6rem; } .orbit-q { max-width: none; } .orbit-item { position: static; transform: none; width: auto; padding: clamp(1rem, 2vw, 1.3rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.022); } .orbit-item--1, .orbit-item--2, .orbit-item--3, .orbit-item--4, .orbit-item--5, .orbit-item--6, .orbit-item--7, .orbit-item--8 { text-align: left; } .orbit-body { font-size: 0.8rem; } [data-theme="light"] .orbit-item { background: rgba(255, 255, 255, 0.55); } } @media (max-width: 560px) { .challenge-orbit { grid-template-columns: 1fr; } } /* ================================================================ WHAT WE DO - glassmorphism cards on .process-step Dark: translucent dark glass, amber top accent, gradient border. Light: frosted white glass, amber-tinted top accent. ================================================================ */ /* Give the rail a little gap so the glass panels breathe */ .process-rail { align-items: stretch; padding-top: 0; } .process-step { padding: clamp(1.25rem, 1.8vw, 1.75rem) clamp(1rem, 1.4vw, 1.4rem); border-radius: var(--radius-xl); background: linear-gradient(150deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.00) 100%); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25); position: relative; overflow: hidden; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out); } /* Amber top-edge accent */ .process-step::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1.5px; background: linear-gradient(90deg, transparent 0%, rgba(3, 105, 161, 0.70) 40%, rgba(3, 105, 161, 0.70) 60%, transparent 100%); border-radius: 1px; } /* Diagonal refraction shimmer — appears at top-left of each pane */ .process-step::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 30%, transparent 55% ); pointer-events: none; } .process-step:hover { transform: translateY(-5px); border-color: rgba(3, 105, 161, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 40px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(3, 105, 161, 0.12), 0 0 32px rgba(3, 105, 161, 0.10); } /* Icon sits above the ::after shimmer layer */ .process-step-icon, .process-step-title, .process-step-body { position: relative; z-index: 1; } /* Light mode — frosted white glass */ [data-theme="light"] .process-step { background: linear-gradient(150deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 100%); border-color: rgba(20, 22, 28, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 20px rgba(20, 22, 28, 0.10), 0 1px 3px rgba(20, 22, 28, 0.06); } [data-theme="light"] .process-step::before { background: linear-gradient(90deg, transparent 0%, rgba(3, 105, 161, 0.65) 40%, rgba(3, 105, 161, 0.65) 60%, transparent 100%); } [data-theme="light"] .process-step::after { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 30%, transparent 55% ); } [data-theme="light"] .process-step:hover { border-color: rgba(3, 105, 161, 0.40); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 14px 40px rgba(20, 22, 28, 0.16), 0 0 0 1px rgba(3, 105, 161, 0.20); } /* ================================================================ TESTIMONIALS — dual marquee (row 1 right, row 2 left) ================================================================ */ .testimonials-marquee { overflow: hidden; display: flex; flex-direction: column; gap: var(--space-5); margin-top: clamp(var(--space-10), 4vw, var(--space-16)); /* Fade-out left and right edges */ mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%); } .tmarquee-row { overflow: hidden; } .tmarquee-track { display: flex; gap: var(--space-5); width: max-content; } /* Row 1 scrolls rightward: starts at -50% (left), ends at 0 */ @keyframes tMarqueeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* Row 2 scrolls leftward: starts at 0, ends at -50% */ @keyframes tMarqueeLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } } .tmarquee-row--right .tmarquee-track { animation: tMarqueeRight 32s linear infinite; } .tmarquee-row--left .tmarquee-track { animation: tMarqueeLeft 28s linear infinite; } /* Pause on hover / focus-within so users can read */ .tmarquee-row:hover .tmarquee-track, .tmarquee-row:focus-within .tmarquee-track { animation-play-state: paused; } /* Card sizing inside the marquee */ .tmarquee-track .testimonial-card { flex: 0 0 clamp(300px, 28vw, 420px); margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .tmarquee-row--right .tmarquee-track, .tmarquee-row--left .tmarquee-track { animation: none; } .testimonials-marquee { mask-image: none; -webkit-mask-image: none; overflow-x: auto; flex-direction: row; flex-wrap: nowrap; } .tmarquee-row { overflow: visible; } .tmarquee-track { width: auto; } } /* ================================================================ UNIFIED GLASS CARD SYSTEM Same design as "What We Do" .process-step applied to: - .industry-case-card (case studies slider) - .testimonial-card (testimonials marquee) - .industry-item (industries grid) Overrides all earlier glass/premium layers. ================================================================ */ .industry-case-card, .testimonial-card, .industry-item { background: linear-gradient(150deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.00) 100%); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius-xl); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25); position: relative; overflow: hidden; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out); } /* Amber top-edge accent — identical to process-step::before */ .industry-case-card::before, .testimonial-card::before, .industry-item::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1.5px; background: linear-gradient(90deg, transparent 0%, rgba(3, 105, 161, 0.70) 40%, rgba(3, 105, 161, 0.70) 60%, transparent 100%); border-radius: 1px; pointer-events: none; z-index: 2; } /* Diagonal refraction shimmer — identical to process-step::after */ .industry-case-card::after, .testimonial-card::after, .industry-item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 30%, transparent 55% ); pointer-events: none; padding: 0; -webkit-mask: none; mask: none; z-index: 1; } /* Hover — identical to process-step:hover */ .industry-case-card:hover, .testimonial-card:hover, .industry-item:hover { transform: translateY(-5px); border-color: rgba(3, 105, 161, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 40px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(3, 105, 161, 0.12), 0 0 32px rgba(3, 105, 161, 0.10); } /* Card content sits above the shimmer */ .industry-case-card > *, .testimonial-card > *, .industry-item > * { position: relative; z-index: 2; } /* Industries grid — gap layout (cards, not hairline matrix) */ .industries-grid { border: none; gap: var(--space-5); } .industry-item { border-right: none; border-bottom: none; border-radius: var(--radius-xl); padding: clamp(1.25rem, 1.8vw, 1.75rem) clamp(1rem, 1.4vw, 1.4rem); } /* Light mode — frosted white glass */ [data-theme="light"] .industry-case-card, [data-theme="light"] .testimonial-card, [data-theme="light"] .industry-item { background: linear-gradient(150deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 100%); border-color: rgba(20, 22, 28, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 20px rgba(20, 22, 28, 0.10), 0 1px 3px rgba(20, 22, 28, 0.06); } [data-theme="light"] .industry-case-card::before, [data-theme="light"] .testimonial-card::before, [data-theme="light"] .industry-item::before { background: linear-gradient(90deg, transparent 0%, rgba(3, 105, 161, 0.65) 40%, rgba(3, 105, 161, 0.65) 60%, transparent 100%); } [data-theme="light"] .industry-case-card::after, [data-theme="light"] .testimonial-card::after, [data-theme="light"] .industry-item::after { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 30%, transparent 55% ); } [data-theme="light"] .industry-case-card:hover, [data-theme="light"] .testimonial-card:hover, [data-theme="light"] .industry-item:hover { border-color: rgba(3, 105, 161, 0.40); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 14px 40px rgba(20, 22, 28, 0.16), 0 0 0 1px rgba(3, 105, 161, 0.20); } [data-theme="light"] .industries-grid { border: none; } /* ================================================================ SERVICES SECTION — All Services + 6 individual service pages Uses existing tokens & Instrument design language. New classes prefixed .svc- to avoid conflicts with homepage components. ================================================================ */ /* ── Service hub: 6-card lifecycle grid ─────────────────────────── */ .svc-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-5); } .svc-card { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-xl); padding: clamp(1.5rem, 2.5vw, 2rem); overflow: hidden; transition: transform 0.25s var(--ease-out), border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 20px rgba(0,0,0,0.20); text-decoration: none; color: inherit; } .svc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%); opacity: 0.45; transition: opacity 0.25s ease; } .svc-card:hover { transform: translateY(-5px); border-color: rgba(3, 105, 161,0.30); background: rgba(255,255,255,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 16px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(3, 105, 161,0.12); } .svc-card:hover::before { opacity: 1; } .svc-card-num { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 400; letter-spacing: 0.14em; color: var(--primary); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); } .svc-card-num::before { content: ''; width: 5px; height: 5px; background: var(--primary); box-shadow: 0 0 7px rgba(3, 105, 161,0.80); flex: 0 0 auto; } .svc-card-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-weight-bold); line-height: var(--leading-snug); letter-spacing: -0.015em; color: var(--text-primary); margin-bottom: var(--space-3); } .svc-card-body { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); flex-grow: 1; } .svc-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-5); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--primary); transition: gap 0.2s ease; } .svc-card:hover .svc-card-link { gap: 10px; } /* ── "More than a dashboard" — single prose panel ────────────────── */ .svc-prose-panel { background: var(--panel); border: 1px solid var(--panel-border); border-left: 3px solid var(--primary); border-radius: var(--radius-xl); padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); max-width: 820px; margin-inline: auto; } .svc-prose-panel p { font-size: clamp(var(--text-base), 1.5vw, var(--text-lg)); color: var(--text-secondary); line-height: var(--leading-relaxed); } .svc-prose-panel p strong { color: var(--text-primary); } /* ── "How we deliver" — editorial two-col ───────────────────────── */ .svc-deliver-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-10), 5vw, var(--space-20)); align-items: center; } .svc-deliver-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-2); } .svc-deliver-label::before { content: ''; width: 5px; height: 5px; background: var(--primary); box-shadow: 0 0 7px rgba(3, 105, 161,0.80); } .svc-deliver-h2 { font-family: var(--font-display); font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); font-weight: var(--font-weight-bold); letter-spacing: -0.025em; line-height: var(--leading-tight); color: var(--text-primary); margin-bottom: var(--space-6); } .svc-deliver-prose p { font-size: clamp(var(--text-base), 1.5vw, var(--text-lg)); color: var(--text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); } .svc-deliver-prose p:last-child { margin-bottom: 0; } /* ── Industries served strip ─────────────────────────────────────── */ .svc-industries-strip { text-align: center; padding-block: var(--section-padding-y); border-top: 1px solid var(--border); } .svc-industries-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-6); display: flex; align-items: center; justify-content: center; gap: var(--space-2); } .svc-industries-label::before { content: ''; width: 5px; height: 5px; background: var(--primary); box-shadow: 0 0 7px rgba(3, 105, 161,0.80); } .svc-industries-heading { font-family: var(--font-display); font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl)); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-8); } .svc-industries-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); max-width: 860px; margin-inline: auto; } .svc-industry-chip { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.08em; color: var(--text-secondary); padding: 8px 16px; border: 1px solid var(--panel-border); border-radius: 2px; background: var(--panel); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .svc-industry-chip:hover { color: var(--primary); border-color: rgba(3, 105, 161,0.30); background: rgba(3, 105, 161,0.06); } /* ── Individual service page — problem block ─────────────────────── */ .svc-problem-block { background: var(--panel); border: 1px solid var(--panel-border); border-left: 3px solid rgba(3, 105, 161,0.55); border-radius: var(--radius-xl); padding: clamp(1.75rem, 3vw, 2.5rem); max-width: 820px; margin-inline: auto; } .svc-problem-block p { font-size: clamp(var(--text-base), 1.5vw, var(--text-lg)); color: var(--text-secondary); line-height: var(--leading-relaxed); } /* ── "What's included" — feature cards ──────────────────────────── */ .svc-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-5); } .svc-feature-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-xl); padding: clamp(1.25rem, 2vw, 1.75rem); transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .svc-feature-card:hover { border-color: rgba(3, 105, 161,0.30); background: rgba(255,255,255,0.05); transform: translateY(-3px); } .svc-feature-title { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: var(--space-2); display: flex; align-items: flex-start; gap: var(--space-3); } .svc-feature-title::before { content: ''; flex: 0 0 auto; width: 5px; height: 5px; margin-top: 0.45em; background: var(--primary); box-shadow: 0 0 7px rgba(3, 105, 161,0.70); } .svc-feature-body { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); padding-left: calc(5px + var(--space-3)); } /* ── "How it works" — numbered steps ────────────────────────────── */ .svc-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-5); counter-reset: svc-step; } .svc-step { position: relative; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-xl); padding: clamp(1.25rem, 2vw, 1.75rem); padding-top: 1.25rem; counter-increment: svc-step; } .svc-step::before { content: '0' counter(svc-step); display: block; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; color: var(--primary); margin-bottom: var(--space-4); } .svc-step-title { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: var(--space-2); line-height: var(--leading-snug); } .svc-step-body { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); } /* ── "What you get" — results checklist ─────────────────────────── */ .svc-results-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-4); list-style: none; } .svc-results-list li { display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-relaxed); background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-xl); padding: clamp(1rem, 1.5vw, 1.25rem); } .svc-results-list li::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 0.45em; background: var(--primary); box-shadow: 0 0 9px rgba(3, 105, 161,0.75); } /* ── Tools/sources tag strip ─────────────────────────────────────── */ .svc-tools-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .svc-tool-tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-secondary); padding: 6px 12px; border: 1px solid var(--panel-border); border-radius: 2px; background: var(--panel); } /* ── "Keep exploring" — prev/next nav ───────────────────────────── */ .svc-explore-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem); background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-xl); } .svc-explore-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-right: auto; } .svc-explore-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--text-secondary); padding: 8px 16px; border: 1px solid var(--panel-border); border-radius: 2px; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; text-decoration: none; } .svc-explore-link:hover { color: var(--primary); border-color: rgba(3, 105, 161,0.30); background: rgba(3, 105, 161,0.05); } .svc-explore-link--all { background: rgba(3, 105, 161,0.08); border-color: rgba(3, 105, 161,0.20); color: var(--primary); font-family: var(--font-mono); letter-spacing: 0.04em; } .svc-explore-link--all:hover { background: rgba(3, 105, 161,0.14); border-color: rgba(3, 105, 161,0.45); } /* ── Service page hero (numbered eyebrow variant) ─────────────────── */ .svc-hero-eyebrow { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-5); display: inline-flex; align-items: center; gap: var(--space-3); background: rgba(3, 105, 161,0.08); border: 1px solid rgba(3, 105, 161,0.20); padding: 7px 16px; border-radius: 2px; } .svc-hero-eyebrow::before { content: ''; width: 5px; height: 5px; background: var(--primary); box-shadow: 0 0 8px rgba(3, 105, 161,0.90); flex: 0 0 auto; } /* ── Section heading (left-aligned variant for service pages) ──────── */ .svc-section-label { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-2); } .svc-section-label::before { content: ''; width: 5px; height: 5px; background: var(--primary); box-shadow: 0 0 7px rgba(3, 105, 161,0.80); flex: 0 0 auto; } .svc-section-title { font-family: var(--font-display); font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); font-weight: var(--font-weight-bold); letter-spacing: -0.025em; line-height: var(--leading-tight); color: var(--text-primary); margin-bottom: var(--space-5); } /* ── cta-microcopy (used in .cta-inner) ─────────────────────────── */ .cta-microcopy { font-size: var(--text-xs); color: rgba(255,255,255,0.40); margin-top: var(--space-5); } /* ── Light mode overrides ───────────────────────────────────────── */ [data-theme="light"] .svc-card, [data-theme="light"] .svc-prose-panel, [data-theme="light"] .svc-problem-block, [data-theme="light"] .svc-feature-card, [data-theme="light"] .svc-step, [data-theme="light"] .svc-results-list li, [data-theme="light"] .svc-explore-nav, [data-theme="light"] .svc-tool-tag { background: rgba(255,255,255,0.70); border-color: rgba(20,22,28,0.10); } [data-theme="light"] .svc-card:hover, [data-theme="light"] .svc-feature-card:hover { background: rgba(255,255,255,0.90); border-color: rgba(3, 105, 161,0.35); } [data-theme="light"] .svc-card-title, [data-theme="light"] .svc-feature-title, [data-theme="light"] .svc-step-title, [data-theme="light"] .svc-deliver-h2, [data-theme="light"] .svc-industries-heading, [data-theme="light"] .svc-section-title { color: #0A0B0F; } [data-theme="light"] .svc-prose-panel p, [data-theme="light"] .svc-problem-block p, [data-theme="light"] .svc-card-body, [data-theme="light"] .svc-feature-body, [data-theme="light"] .svc-step-body, [data-theme="light"] .svc-deliver-prose p, [data-theme="light"] .svc-results-list li { color: rgba(10,11,15,0.70); } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 768px) { .svc-deliver-grid { grid-template-columns: 1fr; gap: var(--space-8); } } @media (max-width: 560px) { .svc-explore-nav { flex-direction: column; align-items: flex-start; } .svc-explore-label { margin-right: 0; } } /* ================================================================ ### INSTRUMENT v2 — Foundation, depth & light-mode rebuild Informed by UI/UX Pro Max: "Industrial grey + safety orange" (cool-slate neutrals + #0369A1/#075985 accent, WCAG-checked), surface-aware tonal ramp, and a consistent elevation scale. Appended last so it wins the cascade. No markup changed. ================================================================ */ /* ── Tokens: luminous-on-dark accent + elevation scale ─────────── */ :root { --accent-ink: #0369A1; /* luminous orange — text/icons on dark */ --accent-bright: #0EA5E9; /* brighter pop for glows/hover on dark */ --on-accent: #1A1206; /* near-black text on orange fills */ --elev-1: 0 1px 2px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.22); --elev-2: 0 6px 18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06); --elev-3: 0 18px 44px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08); } /* ── Dark-theme depth polish (keep the look, add dimension) ─────── */ .svc-card, .svc-feature-card, .svc-step { box-shadow: var(--elev-2); } .svc-card:hover, .svc-feature-card:hover { box-shadow: var(--elev-3), 0 0 0 1px rgba(3, 105, 161,.16), 0 0 40px rgba(3, 105, 161,.10); } /* ================================================================ LIGHT THEME — full rebuild: cool-slate instrument paper. Solid surfaces + real borders + elevation = no more dissolve. ================================================================ */ [data-theme="light"] { /* Ink — slate, high-contrast (AA) */ --text-primary: #0F172A; /* slate-900 */ --text-secondary: #475569; /* slate-600 */ --text-muted: #64748B; /* slate-500 */ --text-soft: #94A3B8; /* slate-400 */ --text-on-yellow: #FFFFFF; /* white on deep-orange fills (5.2:1) */ /* Cool near-white paper */ --bg-page: #F8F5F0; --bg-soft: #EDF1F6; --bg-section: #EDF1F6; --bg-tint: #FFF4EC; /* faint warm wash */ --bg-dark: #FFFFFF; --bg-surface: #FFFFFF; /* Slate borders */ --border: #E2E8F0; /* slate-200 */ --border-strong: #CBD5E1; /* slate-300 */ --border-subtle: #EEF2F7; /* Blueprint paper grid + SOLID panels */ --grid-line: rgba(15,23,42,0.045); --grid-line-strong: rgba(15,23,42,0.07); --panel: #FFFFFF; --panel-border: #E2E8F0; /* Surface-aware accent — DEEP on light (AA as text + button w/ white) */ --primary: #075985; /* orange-700: 5.2:1 on white */ --primary-hover: #0C4A6E; /* orange-800 */ --primary-deep: #075985; --primary-light: #E0F2FE; /* orange-100 tint bg */ --primary-glow: rgba(3, 105, 161,0.20); --accent-ink: #075985; --accent-bright: #0369A1; /* orange-600 for decorative edges (UI 3:1) */ /* Light elevation scale */ --elev-1: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06); --elev-2: 0 2px 4px rgba(15,23,42,.04), 0 12px 28px -10px rgba(15,23,42,.18); --elev-3: 0 10px 20px -6px rgba(15,23,42,.12), 0 28px 56px -14px rgba(15,23,42,.24); } /* Paper background — cool grid + a single warm signal glow up top */ [data-theme="light"] body { background: linear-gradient(0deg, var(--grid-line) 1px, transparent 1px) 0 0 / 100% 56px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 56px 100%, radial-gradient(ellipse 1000px 640px at 50% -8%, rgba(3, 105, 161,0.07) 0%, transparent 60%), radial-gradient(ellipse 820px 560px at 96% 104%, rgba(15,23,42,0.05) 0%, transparent 60%), var(--bg-page); background-attachment: fixed; } /* ── SOLID surfaces — the dissolve fix (kill glass + add elevation) ─ */ [data-theme="light"] .card, [data-theme="light"] .svc-card, [data-theme="light"] .svc-feature-card, [data-theme="light"] .svc-step, [data-theme="light"] .svc-results-list li, [data-theme="light"] .svc-explore-nav, [data-theme="light"] .svc-prose-panel, [data-theme="light"] .svc-problem-block, [data-theme="light"] .industry-item, [data-theme="light"] .industry-case-card, [data-theme="light"] .testimonial-card, [data-theme="light"] .results-stat { background: #FFFFFF; border: 1px solid var(--border); box-shadow: var(--elev-2); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-theme="light"] .card:hover, [data-theme="light"] .svc-card:hover, [data-theme="light"] .svc-feature-card:hover, [data-theme="light"] .industry-item:hover, [data-theme="light"] .industry-case-card:hover, [data-theme="light"] .testimonial-card:hover { background: #FFFFFF; border-color: rgba(3, 105, 161,0.45); box-shadow: var(--elev-3), 0 0 0 1px rgba(3, 105, 161,0.10); transform: translateY(-4px); } /* Accent top-edge on cards reads as a printed signal stripe */ [data-theme="light"] .svc-card::before { background: linear-gradient(90deg, transparent 0%, var(--accent-bright) 50%, transparent 100%); opacity: .9; } /* Left-rule panels — solid with a deep-orange spine */ [data-theme="light"] .svc-prose-panel { border-left: 3px solid var(--accent-bright); } [data-theme="light"] .svc-problem-block { border-left: 3px solid rgba(3, 105, 161,0.6); } /* Tags / chips — solid paper, slate ink, orange on hover */ [data-theme="light"] .svc-tool-tag, [data-theme="light"] .svc-industry-chip, [data-theme="light"] .cs-tag, [data-theme="light"] .cs-filter-tab { background: #FFFFFF; border: 1px solid var(--border); color: var(--text-secondary); } [data-theme="light"] .svc-industry-chip:hover, [data-theme="light"] .cs-filter-tab:hover { color: var(--primary-deep); border-color: rgba(3, 105, 161,0.45); background: var(--bg-tint); } /* Section eyebrow pills — warm wash + deep-orange ink (AA) */ [data-theme="light"] .section-label, [data-theme="light"] .svc-hero-eyebrow { background: rgba(3, 105, 161,0.08); border: 1px solid rgba(3, 105, 161,0.22); color: var(--primary-deep); } /* Icon tiles — warm tint + deep-orange glyph */ [data-theme="light"] .card-icon { background: rgba(3, 105, 161,0.10); border-color: rgba(3, 105, 161,0.22); color: var(--primary-deep); } /* Primary buttons — deep orange + white text (5.2:1), warm shadow */ [data-theme="light"] .btn-primary, [data-theme="light"] .nav-pill .cta-pill, [data-theme="light"] .mobile-nav-footer .btn-primary { background: var(--primary); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(3, 105, 161,.28); } [data-theme="light"] .btn-primary:hover, [data-theme="light"] .nav-pill .cta-pill:hover { background: var(--primary-hover); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 24px rgba(3, 105, 161,.40); } [data-theme="light"] .svc-card-link, [data-theme="light"] .card-link { color: var(--primary-deep); } /* ── BOLD MOMENT: floating dark CTA panel on the light page ─────── */ [data-theme="light"] .section-cta .cta-inner { background: radial-gradient(ellipse 700px 380px at 50% 0%, rgba(3, 105, 161,0.18) 0%, transparent 65%), #0B0E16; border: 1px solid rgba(255,255,255,0.08); border-radius: 22px; padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem); box-shadow: var(--elev-3), 0 0 60px rgba(3, 105, 161,0.12); max-width: 980px; } [data-theme="light"] .section-cta .cta-title { color: #FFFFFF; } [data-theme="light"] .section-cta .cta-sub { color: rgba(255,255,255,0.74); } [data-theme="light"] .section-cta .cta-email-or { color: rgba(255,255,255,0.6); } [data-theme="light"] .section-cta .cta-email-or a { color: var(--accent-bright); } [data-theme="light"] .section-cta .section-label { background: rgba(3, 105, 161,0.18); border-color: rgba(3, 105, 161,0.35); color: #FFD9C2; } [data-theme="light"] .section-cta .btn-primary { background: #0369A1; color: var(--on-accent); } [data-theme="light"] .section-cta .btn-primary:hover { background: #0EA5E9; color: var(--on-accent); } [data-theme="light"] .section-cta::before { opacity: .35; } /* Dividers read as printed rules on paper */ [data-theme="light"] .svc-industries-strip, [data-theme="light"] .csd-section { border-top: 1px solid var(--border); } /* Numeric readouts / stat values — deep orange on paper */ [data-theme="light"] .results-stat-value, [data-theme="light"] .svc-card-num, [data-theme="light"] .cs-metric { color: var(--primary-deep); } /* Footer stays dark in both themes (brand anchor) */ [data-theme="light"] .site-footer { background: #0B0E16; } /* ================================================================ INDUSTRY CHALLENGES — MOBILE RADIAL ORBIT (≤767px) Overrides the ≤1024px grid layout. Re-enables absolute positioning with the same left/top percentages as desktop so the SVG spokes (preserveAspectRatio="none") continue to scale correctly. E/W items adjusted 3% inward (89%/11%) to stay inside 390px screens. Shows only orbit-title + orbit-tag; hides orbit-body + orbit-num. ================================================================ */ @media (max-width: 767px) { /* Section: remove the 100vh min-height and flex so it only wraps the orbit */ .section-problem.section-pad { min-height: 0; display: block; padding-top: var(--space-8); padding-bottom: var(--space-8); } /* Orbit container: fixed height, re-enable relative positioning */ .challenge-orbit { display: block !important; /* kill the grid */ position: relative !important; height: 540px; min-height: 540px; flex: none; width: 100%; max-width: 100%; overflow: hidden; padding-inline: 0; margin-top: 1.25rem; } /* SVG spokes: re-enable (was display:none from ≤1024px rule) */ .orbit-svg { display: block !important; } .orbit-rings { display: block !important; } /* Hub: re-enable absolute centering, scale down for mobile */ .orbit-hub { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; grid-column: unset !important; width: 115px !important; aspect-ratio: 1 / 1 !important; max-width: none !important; border-radius: 50% !important; margin: 0 !important; padding: 0.85rem !important; } .orbit-q { font-size: 0.72rem; max-width: 9ch; } .orbit-eyebrow { font-size: 0.5rem; letter-spacing: 0.18em; margin-bottom: 0.4rem; } /* Items: re-enable absolute positioning, tighten dimensions */ .orbit-item { position: absolute !important; width: 84px !important; transform: translate(-50%, -50%) !important; /* reset card styles from ≤1024px rule */ padding: 0 !important; border: none !important; background: none !important; border-radius: 0 !important; } /* Closed spokes show only title + tag; number hidden, body collapsed (the click-to-reveal block below handles showing the body). */ .orbit-num { display: none !important; } /* Scaled-down fonts */ .orbit-title { font-size: 0.7rem !important; line-height: 1.22 !important; margin-bottom: 0.2rem !important; letter-spacing: -0.005em; } .orbit-tag { font-size: 0.63rem !important; line-height: 1.3 !important; margin-bottom: 0 !important; } /* Reset text-align overrides from ≤1024px rule */ .orbit-item--1, .orbit-item--2, .orbit-item--3, .orbit-item--4, .orbit-item--5, .orbit-item--6, .orbit-item--7, .orbit-item--8 { text-align: unset !important; } /* Clock positions — same percentages as desktop except E (89%) and W (11%) which are pulled 3% inward to prevent overflow on 390px viewports */ .orbit-item--1 { left: 50%; top: 8%; text-align: center !important; } .orbit-item--2 { left: 75%; top: 16%; text-align: left !important; } .orbit-item--3 { left: 89%; top: 50%; text-align: left !important; } .orbit-item--4 { left: 75%; top: 83%; text-align: left !important; } .orbit-item--5 { left: 50%; top: 92%; text-align: center !important; } .orbit-item--6 { left: 25%; top: 83%; text-align: right !important; } .orbit-item--7 { left: 11%; top: 50%; text-align: right !important; } .orbit-item--8 { left: 25%; top: 16%; text-align: right !important; } } /* ================================================================ HOME PAGE — tightened vertical rhythm Skill source: UI/UX Pro Max "Feature-Rich Showcase" specifies --section-padding: 4rem 0 (64px) as the correct uniform value. Original was clamp(4rem,8vw,6.5rem) = up to 104px per side at 1440px (over-stretched). Fix: one uniform override on .section-pad; NO individual section cuts — the constellation and team slider have absolutely-positioned overflow children that need the full safe zone. ================================================================ */ body.home .section-pad { padding-block: clamp(3.5rem, 5vw, 4.5rem); /* 56–72px — matches skill's 4rem floor */ } body.home .section-header { margin-bottom: clamp(var(--space-10), 4vw, var(--space-16)); /* 40–64px (was 80px) */ } /* ================================================================ INDUSTRY CHALLENGES — CLICK-TO-REVEAL (accordion) Default view: number + title + short tag only. Click a spoke and its full body reveals (one open at a time). Identical radial layout and behaviour on desktop AND mobile — never a card stack. ================================================================ */ /* An opened edge-spoke must not create horizontal scroll */ .section-problem.section-pad { overflow-x: clip; } /* Spokes are interactive */ .orbit-item { cursor: pointer; } .orbit-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 6px; } .orbit-title { transition: color 0.2s ease; } .orbit-item:hover .orbit-title { color: var(--primary); } [data-theme="light"] .orbit-item:hover .orbit-title { color: var(--primary-deep); } /* Expand affordance — small chevron trailing the short tag, flips when open */ .orbit-tag::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 7px; vertical-align: middle; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--ease-out); opacity: 0.7; } .orbit-item.is-open .orbit-tag::after { transform: translateY(1px) rotate(-135deg); opacity: 1; } /* Body — collapsed by default, revealed when the spoke is open (all breakpoints) */ .orbit-body { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height 0.4s var(--ease-out), opacity 0.3s ease, margin-top 0.3s ease; } .orbit-item.is-open .orbit-body { max-height: 20rem; opacity: 1; margin-top: 0.5rem; } /* Open spoke → readable floating panel above its neighbours */ .orbit-item.is-open { z-index: 40; padding: 1rem 1.1rem; text-align: left !important; background: rgba(13, 15, 21, 0.94); border: 1px solid rgba(3, 105, 161, 0.32); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(3, 105, 161, 0.08), 0 20px 48px rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); } .orbit-item.is-open .orbit-num, .orbit-item.is-open .orbit-title, .orbit-item.is-open .orbit-tag { text-align: left; } /* Focus the open spoke — dim the rest */ .challenge-orbit.has-open .orbit-item:not(.is-open) { opacity: 0.3; transition: opacity 0.3s ease; } /* Light-mode panel */ [data-theme="light"] .orbit-item.is-open { background: rgba(255, 255, 255, 0.97); border-color: rgba(3, 105, 161, 0.30); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(3, 105, 161, 0.08), 0 20px 48px rgba(20, 23, 30, 0.20); } /* Desktop radial (≥1025px): anchor the open panel so it grows toward the centre — never up into the heading, never down into the next section. */ @media (min-width: 1025px) { .orbit-item.is-open { width: clamp(188px, 14vw, 210px); } .orbit-item--1.is-open, .orbit-item--2.is-open, .orbit-item--8.is-open { transform: translate(-50%, 0) !important; } /* top → grow down */ .orbit-item--4.is-open, .orbit-item--5.is-open, .orbit-item--6.is-open { transform: translate(-50%, -100%) !important; } /* bottom → grow up */ } /* Mobile (≤767px): the open spoke pops to a centred detail card over the orbit (84px in place is too narrow for the body). */ @media (max-width: 767px) { .orbit-item.is-open { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: min(290px, 88%) !important; padding: 1.2rem 1.3rem !important; z-index: 60; background: rgba(13, 15, 21, 0.96) !important; border: 1px solid rgba(3, 105, 161, 0.34) !important; border-radius: var(--radius-lg) !important; } [data-theme="light"] .orbit-item.is-open { background: rgba(255, 255, 255, 0.98) !important; border-color: rgba(3, 105, 161, 0.32) !important; } .orbit-item.is-open .orbit-num { display: block !important; margin-bottom: 0.25rem; } .orbit-item.is-open .orbit-title { font-size: 1rem !important; line-height: 1.2 !important; margin-bottom: 0.3rem !important; } .orbit-item.is-open .orbit-tag { font-size: 0.8rem !important; margin-bottom: 0 !important; } .orbit-item.is-open .orbit-body { font-size: 0.8rem !important; line-height: 1.5 !important; max-height: 24rem; } /* fade the hub + spokes behind the centred card */ .challenge-orbit.has-open .orbit-hub, .challenge-orbit.has-open .orbit-svg { opacity: 0.15; transition: opacity 0.3s ease; } } /* ================================================================ APPLE REDESIGN LAYER — homepage only (scoped to body.home) ---------------------------------------------------------------- Recreates the homepage in the Apple "museum gallery" language from DESIGN-apple.md: a light-dominant canvas of edge-to-edge tiles that alternate white / parchment / near-black, framed by quiet type with negative tracking, ONE accent colour, ONE drop-shadow (on imagery only), pill CTAs, and no decorative gradients or chrome shadows. Two deliberate departures from the source doc, per the brief: • Fonts are UNCHANGED — the theme keeps Bricolage Grotesque / Hanken Grotesk / Space Mono (not SF Pro). Only the type *system* (sizing, weight ladder, negative tracking) is adopted. • The single accent is PINTEREST RED #e60023 (pressed #cc001f), replacing Apple's Action Blue. Scoped to body.home so the other templates keep the Instrument skin. Loaded last → wins the cascade; !important only where it must beat the earlier !important orbit/click-to-reveal layers. ================================================================ */ body.home { /* ============ BLUEPRINT IDENTITY — UI/UX Pro Max pass ============ colors.csv #5 "B2B Service": professional navy + trust-blue CTA, slate neutrals (WCAG-checked). Space Grotesk / Inter / Plex Mono per typography.csv #3 "Tech Startup". Accent on CTAs only (landing.csv #33 "Trust & Authority"). */ --primary: #0369A1; /* Trust Blue — labels, , highlights */ --primary-hover: #075985; --primary-deep: #075985; --primary-darker: #0C4A6E; --primary-light: #E0F2FE; --primary-tint: #F0F9FF; --primary-glow: rgba(3, 105, 161, 0); --red-on-dark: #7DD3FC; /* sky-300 for legibility on navy */ --cta-bg: #0369A1; /* Trust Blue — all CTAs, links, actives */ --cta-hover: #075985; /* Surface + ink palette — slate scale */ --ink: #0F172A; /* navy (headings, primary text) */ --ink-2: #334155; /* secondary slate */ --ink-3: #64748B; /* muted slate */ --canvas: #F8FAFC; /* slate-50 paper */ --parchment: #E8ECF1; /* raised light panel */ --tile-dark: #0F172A; /* dark sections */ --tile-dark2: #020617; --hairline: #E2E8F0; --apple-shadow: 0 1px 2px rgba(2, 6, 23, 0.05); /* Replicate design.md type voices (getdesign.md/replicate): display rb-freigeist-neue → substitute Bricolage Grotesque · body basier-square → substitute Inter · mono JetBrains Mono. */ --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--canvas) !important; background-attachment: initial !important; color: var(--ink); font-family: var(--font-base); } /* ---- Shared type system (light tiles) -------------------------- */ body.home .section-label { background: transparent; border: none; padding: 0; border-radius: 0; color: var(--primary); font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-4); } body.home .section-title { color: #000000 !important; font-weight: 600; font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.025em; line-height: 1.08; } body.home h1, body.home h2, body.home h3, body.home h4 { color: #000000; } body.home .section-sub { color: var(--ink-3); font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); /* 17 → 21px */ font-weight: 400; line-height: 1.4; } /* ---- Buttons: pill grammar, single accent, scale-press ---------- */ body.home .btn-primary, body.home .proof-bottom-link.is-btn { background: var(--cta-bg); color: #fff; border: none; border-radius: 8px; /* Blueprint: squared-off, not pill */ padding: 13px 26px; font-family: var(--font-base); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0; box-shadow: none; transition: background 0.2s ease, transform 0.12s ease; } body.home .btn-primary:hover { background: var(--cta-hover); color: #fff; transform: none; box-shadow: none; } body.home .btn-primary:active { background: var(--cta-hover); transform: scale(0.97); } body.home .btn-primary:focus-visible { outline: 2px solid var(--cta-bg); outline-offset: 3px; } body.home .btn-secondary { background: transparent; color: var(--cta-bg); border: 1.5px solid var(--cta-bg); border-radius: 8px; padding: 13px 26px; font-weight: 600; font-size: 1.0625rem; letter-spacing: 0; } body.home .btn-secondary:hover { background: rgba(3, 105, 161, 0.08); color: var(--cta-hover); transform: none; } body.home .btn-secondary:active { transform: scale(0.97); } /* ---- Header (homepage): white solid pill ------------------------- */ body.home .site-header .nav-pill { position: relative; background: #0F172A !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-radius: var(--radius-full) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22), 0 1px 6px rgba(0, 0, 0, 0.12) !important; } /* Bigger nav bar (taller pill, roomier links). */ body.home .site-header .nav-pill { padding: 11px; gap: var(--space-8); } body.home .main-nav .nav-link { padding: 13px 22px; font-size: 1.0625rem; } body.home .site-header .cta-pill { padding: 13px 26px; font-size: 1.0625rem; } body.home .site-header .site-logo .logo-text { font-size: 1.3rem; } body.home .site-header .theme-toggle { width: 42px; height: 42px; } /* ::after gradient rim removed — solid red pill has no glass rim. */ body.home .site-header .nav-pill::after { display: none; } body.home .site-header .nav-link, body.home .site-header .site-logo, body.home .site-header .nav-chevron { color: #ffffff; } /* ---- Tubelight active-tab indicator (ported from the React NavBar) ---- Active = the current page's menu item (works once rolled out sitewide); on the homepage — where no nav item is the current page — the same indicator appears on hover/keyboard-focus so the effect is visible. Framer Motion's sliding "lamp" becomes a CSS opacity/scale transition. */ body.home .main-nav .nav-link { position: relative; transition: color 0.2s ease, background 0.2s ease; } body.home .main-nav .nav-link:hover, body.home .main-nav .nav-link:focus-visible, body.home .main-nav .current-menu-item > .nav-link, body.home .main-nav .current-menu-ancestor > .nav-link, body.home .main-nav .current-menu-parent > .nav-link, body.home .main-nav .current_page_item > .nav-link { color: #ffffff; background: rgba(255, 255, 255, 0.12); } /* the glowing "lamp" bar mounted at the top of the active tab */ body.home .main-nav .nav-link::before { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) scaleX(0.4); width: 26px; height: 4px; background: var(--primary); border-radius: 0 0 6px 6px; box-shadow: 0 0 12px 2px rgba(3, 105, 161, 0.55), 0 0 22px 8px rgba(3, 105, 161, 0.30); opacity: 0; transition: opacity 0.2s ease, transform 0.25s var(--ease-out); pointer-events: none; } body.home .main-nav .nav-link:hover::before, body.home .main-nav .nav-link:focus-visible::before, body.home .main-nav .current-menu-item > .nav-link::before, body.home .main-nav .current-menu-ancestor > .nav-link::before, body.home .main-nav .current-menu-parent > .nav-link::before, body.home .main-nav .current_page_item > .nav-link::before { opacity: 1; transform: translateX(-50%) scaleX(1); } body.home .site-header .logo-mark svg path:first-child { fill: #ffffff; } body.home .site-header .logo-suffix, body.home .site-header .logo-dot, body.home .site-header .nav-pill .logo-text, body.home .site-header .nav-pill .logo-text .logo-dot { color: #ffffff; } body.home .site-header .nav-pill .cta-pill { background: var(--cta-bg) !important; color: #ffffff !important; border-radius: var(--radius-full) !important; border: none !important; font-weight: 700; } body.home .site-header .nav-pill .cta-pill:hover { background: var(--cta-hover) !important; color: #ffffff !important; } body.home .site-header .theme-toggle { color: #ffffff; border-color: rgba(255,255,255,0.25); } body.home .site-header.scrolled .nav-pill { background: #0F172A !important; } body.home .sub-menu { background: #fff; border: 1px solid var(--hairline); box-shadow: var(--apple-shadow); } body.home .sub-menu a { color: var(--ink); } body.home .sub-menu a:hover { color: var(--primary); background: var(--parchment); } /* ---- HERO (kept dark / video) — all text must be white ---------- body.home sets color:var(--ink) at higher specificity than the base .hero-title rule, so we re-assert white here for every hero element. */ body.home .hero-title, body.home .hero-title .word { color: #ffffff; } body.home .hero-sub { color: rgba(255, 255, 255, 0.88); } body.home .hero-scroll, body.home .hero-scroll-label { color: rgba(255, 255, 255, 0.70); } body.home .hero-label { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; } body.home .hero-label svg { color: var(--red-on-dark); } body.home .hero-scroll-dot { background: var(--red-on-dark); } body.home .hero .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.5); } body.home .hero .btn-secondary:hover { background: rgba(255,255,255,0.12); color:#fff; } /* ================================================================ TILE RHYTHM — assign the alternating canvases hero(dark video) → problem(white) → services(parchment) → team(white) → process(DARK) → proof(white) → testimonials(parchment) → industries(white) → environment(DARK) → cta(DARK) → footer(parchment) ================================================================ */ body.home .hero { background: var(--canvas); } body.home .section-problem { background: var(--canvas); } body.home .section-team, body.home .section-proof, body.home .section-industries { background: var(--canvas); } body.home .section-services, body.home .section-testimonials { background: var(--canvas); } body.home .section-how-it-works, body.home .section-environment, body.home .section-cta { background: var(--tile-dark); } body.home .section-cta { background: var(--tile-dark2); } /* ---- PROBLEM (white tile): light orbit canvas — bezier + scale ---- */ body.home .section-problem { overflow: hidden; } body.home .challenges-stage { position: relative; width: 100%; } body.home .challenges-canvas { position: absolute; top: 0; left: 0; width: 1100px; height: 600px; transform-origin: top left; } body.home .challenges-svg { position: absolute; top: 0; left: 0; width: 1100px; height: 600px; pointer-events: none; overflow: visible; } body.home .ch-line { stroke: rgba(0, 0, 0, 0.14); stroke-width: 1.2; fill: none; transition: stroke 0.28s, stroke-width 0.28s, filter 0.28s; } body.home .ch-dot { fill: rgba(0, 0, 0, 0.18); transition: fill 0.28s, filter 0.28s; } body.home .ch-line.ch-lit { stroke: var(--primary); stroke-width: 1.5; filter: drop-shadow(0 0 4px rgba(3, 105, 161, 0.50)); } body.home .ch-dot.ch-lit { fill: var(--primary); filter: drop-shadow(0 0 4px rgba(3, 105, 161, 0.55)); } body.home .ch-center { position: absolute; left: 380px; top: 233px; width: 340px; height: 100px; border-radius: 9999px; background: var(--tile-dark); border: 1px solid rgba(255, 255, 255, 0.08); animation: chPillGlow 3s ease-in-out infinite; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; z-index: 2; } body.home .ch-center::before { content: ''; position: absolute; inset: -70px -100px; border-radius: 9999px; background: radial-gradient(ellipse, rgba(3, 105, 161, 0.13) 0%, transparent 62%); filter: blur(18px); z-index: -1; pointer-events: none; animation: chAmbient 3s ease-in-out infinite; } @keyframes chPillGlow { 0%, 100% { box-shadow: 0 0 0 1px rgba(3, 105, 161, 0.14), 0 0 40px 14px rgba(3, 105, 161, 0.22), 0 0 100px 45px rgba(3, 105, 161, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.07); } 50% { box-shadow: 0 0 0 1px rgba(3, 105, 161, 0.22), 0 0 72px 32px rgba(3, 105, 161, 0.42), 0 0 170px 90px rgba(3, 105, 161, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10); } } @keyframes chAmbient { 0%, 100% { opacity: 0.7; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.08); } } body.home .ch-center-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); } body.home .ch-center-text { font-size: 19px; font-weight: 700; line-height: 1.25; color: rgba(255, 255, 255, 0.95); letter-spacing: -0.015em; text-align: center; padding: 0 16px; } body.home .ch-center-text em { font-style: normal; color: var(--red-on-dark); } body.home .ch-card { position: absolute; width: 170px; z-index: 2; cursor: default; background: var(--canvas); padding: 4px 6px; } body.home .ch-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--primary); display: block; margin-bottom: 10px; } body.home .ch-title { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 7px; transition: color 0.22s; } body.home .ch-desc { font-size: 11.5px; color: var(--primary); line-height: 1.5; } body.home .ch-card.ch-lit .ch-title, body.home .ch-card:hover .ch-title { color: var(--primary); } /* CTA button centred below the orbit canvas */ body.home .problem-cta { display: flex; justify-content: center; padding: clamp(2rem, 4vw, 3rem) 0 clamp(1rem, 2vw, 1.5rem); } /* h2 red emphasis in the problem heading */ body.home .section-problem .section-title em, body.home .section-services .section-title em, body.home .section-team .section-title em, body.home .section-proof .section-title em { font-style: normal; color: var(--primary); } /* ---- PROBLEM: mobile canvas (same orbit aesthetic, 380px reference) ---- */ /* Desktop: hide mobile canvas */ body.home .challenges-stage--m { display: none; } /* Mobile canvas dimensions */ body.home .challenges-canvas--m { position: absolute; top: 0; left: 0; width: 380px; height: 510px; transform-origin: top left; } /* Override desktop SVG size inside mobile canvas */ body.home .challenges-canvas--m .challenges-svg { width: 380px; height: 510px; } /* Smaller card dimensions scoped to mobile canvas */ body.home .challenges-canvas--m .ch-card { width: 85px; padding: 3px 4px; } body.home .challenges-canvas--m .ch-num { font-size: 8px; margin-bottom: 6px; } body.home .challenges-canvas--m .ch-title { font-size: 10px; margin-bottom: 4px; letter-spacing: -0.005em; } body.home .challenges-canvas--m .ch-desc { font-size: 8.5px; line-height: 1.4; } /* Center pill — smaller for mobile canvas */ body.home .ch-center--m { left: 125px !important; top: 222px !important; width: 130px !important; height: 66px !important; } body.home .challenges-canvas--m .ch-center-label { font-size: 7.5px; letter-spacing: 0.20em; } body.home .challenges-canvas--m .ch-center-text { font-size: 12px; padding: 0 10px; } @media (max-width: 767px) { body.home .challenges-stage { display: none; } /* hide desktop canvas */ body.home .challenges-stage--m { display: block; } /* show mobile canvas */ } /* ---- SERVICES: temple colonnade — capital plates + shaft + base plates + 3-step foundation ---- */ /* Temple wrapper — column flex so foundation sits directly below the colonnade */ body.home .pillar-temple { display: flex; flex-direction: column; overflow: visible; } /* Colonnade — 6 equal columns */ body.home .process-rail { grid-template-columns: repeat(6, 1fr) !important; gap: 10px !important; align-items: stretch !important; overflow: visible !important; background: none !important; } /* Each pillar = vertical stack: cap plates, shaft, base plates (gaps show canvas) */ body.home .pillar-col { display: flex; flex-direction: column; align-items: center; gap: 9px; transition: transform 0.22s ease; } body.home .pillar-col:hover { transform: translateY(-6px); } /* Plates (capital + base) — darker navy, rounded */ body.home .pillar-plate { background: rgba(7, 18, 31, 1); border-radius: 5px; transition: background 0.22s ease; } body.home .pillar-cap-wide { width: 100%; height: 24px; } body.home .pillar-cap-narrow { width: 78%; height: 20px; } body.home .pillar-base-narrow{ width: 78%; height: 20px; } body.home .pillar-base-wide { width: 100%; height: 26px; } /* Tangerine accent line on the top plate when the pillar is hovered */ body.home .pillar-col:hover .pillar-cap-wide { box-shadow: inset 0 4px 0 var(--primary); } /* SHAFT — narrower than the column; holds icon + title + body */ body.home .process-step { background: rgba(11, 27, 43, 0.96) !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 5px !important; overflow: visible !important; width: 72% !important; flex: 1 1 auto !important; margin: 0 !important; min-height: clamp(240px, 26vw, 380px) !important; height: unset !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; padding: 1.75rem 0.85rem 1.5rem !important; position: relative !important; gap: 0.5rem !important; transition: background 0.22s ease !important; } body.home .pillar-col:hover .process-step { background: rgba(20, 44, 68, 0.97) !important; } body.home .process-step::before, body.home .process-step::after { display: none !important; content: none !important; } /* 3-STEP FOUNDATION — stacked stairs, each step wider, all equal height */ body.home .pillar-foundation { display: flex; flex-direction: column; align-items: center; overflow: visible; width: 100%; margin-top: 9px; /* matches the column gap so it reads as one structure */ } body.home .pillar-step { background: rgba(5, 13, 23, 1); height: 20px; } body.home .pillar-step--1 { width: 100%; border-radius: 4px 4px 0 0; } body.home .pillar-step--2 { width: calc(100% + 56px); } body.home .pillar-step--3 { width: calc(100% + 112px); border-radius: 0 0 4px 4px; } body.home .process-step-icon { color: #ffffff; background: transparent; border: none; filter: none; width: 112px !important; height: 112px !important; } body.home .process-step-icon:hover { filter: none; } body.home .process-step-title { color: #ffffff; font-weight: 600; letter-spacing: -0.01em; } body.home .process-step-body { color: rgba(255, 255, 255, 0.80); font-size: 1.0625rem; line-height: 1.47; } body.home .process-rail::before, body.home .process-rail::after { display: none !important; } /* ---- Icon animations (looping, scoped per card) --------------- */ /* Card 1 — magnifying glass bobs left/right */ @keyframes svcGlass { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(5px, -4px); } 65% { transform: translate(-4px, 3px); } } body.home .process-step:nth-child(1) .svc-anim { animation: svcGlass 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } /* Card 2 — data flows through dashed arcs (dashoffset march) */ @keyframes svcFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -20; } } body.home .process-step:nth-child(2) .svc-anim { animation: svcFlow 1.4s linear infinite; } body.home .process-step:nth-child(2) .svc-anim-b { animation: svcFlow 1.4s linear infinite; animation-delay: 0.7s; } /* Card 3 — rain drops fall through dashed lines */ @keyframes svcRain { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -8; } } body.home .process-step:nth-child(3) .svc-anim { animation: svcRain 0.9s linear infinite; } body.home .process-step:nth-child(3) .svc-anim-b { animation: svcRain 0.9s linear infinite; animation-delay: 0.3s; } body.home .process-step:nth-child(3) .svc-anim-c { animation: svcRain 0.9s linear infinite; animation-delay: 0.6s; } /* Card 4 — trend line draws/redraws */ @keyframes svcDraw { 0%, 15% { stroke-dashoffset: 120; opacity: 0.6; } 55%, 75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 120; opacity: 0.6; } } body.home .process-step:nth-child(4) .svc-anim { stroke-dasharray: 120; animation: svcDraw 3.2s ease-in-out infinite; } /* Card 5 — AI rings breathe in/out */ @keyframes svcBreath { 0%, 100% { opacity: 0.35; transform: scale(0.94); } 50% { opacity: 0.80; transform: scale(1.04); } } @keyframes svcBreathB { 0%, 100% { opacity: 0.20; transform: scale(0.96); } 50% { opacity: 0.55; transform: scale(1.03); } } body.home .process-step:nth-child(5) .svc-anim { animation: svcBreath 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } body.home .process-step:nth-child(5) .svc-anim-b { animation: svcBreathB 2.4s ease-in-out infinite; animation-delay: 0.5s; transform-box: fill-box; transform-origin: center; } /* Card 6 — refresh arrow rotates */ @keyframes svcSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } body.home .process-step:nth-child(6) .svc-spin { animation: svcSpin 7s linear infinite; transform-box: fill-box; transform-origin: center; } /* ---- Slider wrapper + arrow buttons -------------------------- */ body.home .svc-slider-wrap { position: relative; } body.home .svc-arrow { display: none; } /* hidden on desktop */ /* ---- Mobile: 1-up card slider with arrows floating over both edges --- */ @media (max-width: 767px) { /* Block layout so the rail is a clean 100%-width scroll container */ body.home .svc-slider-wrap { position: relative; display: block; margin: 0; } /* Temple wrapper collapses to a plain block — no foundation on mobile */ body.home .pillar-temple { display: block; width: 100%; } body.home .pillar-foundation { display: none; } /* Rail = horizontal scroll-snap track at full section width */ body.home .process-rail { display: flex !important; flex-direction: row !important; grid-template-columns: none !important; width: 100%; max-width: 100%; /* !important required: the colonnade rule above sets overflow: visible !important, which otherwise wins and lets the 6 full-width slides blow out the page width on phones */ overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 12px !important; padding: 4px 0 16px !important; scrollbar-width: none; row-gap: unset !important; } body.home .process-rail::-webkit-scrollbar { display: none; } /* Each column = one full-width slide; hide the pillar plates → plain card */ body.home .pillar-col { flex: 0 0 100% !important; width: 100% !important; scroll-snap-align: center; min-width: 0; gap: 0; } body.home .pillar-col:hover { transform: none; } body.home .pillar-plate { display: none !important; } /* Shaft becomes the card */ body.home .process-step { width: 100% !important; border-radius: var(--radius-lg) !important; min-height: 0 !important; padding: 1.5rem 1.25rem !important; } body.home .process-step-icon { width: 88px !important; height: 88px !important; margin-bottom: 0.75rem !important; } body.home .process-step-title { font-size: 1rem !important; margin-bottom: 0.3rem !important; } body.home .process-step-body { font-size: 0.875rem !important; line-height: 1.45 !important; } /* Arrows float over the left/right edges of the card */ body.home .svc-arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 42%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--hairline); border-radius: 50%; padding: 0; cursor: pointer; color: var(--primary); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); z-index: 10; } body.home .svc-arrow--prev { left: 2px; } body.home .svc-arrow--next { right: 2px; } body.home .svc-arrow svg { width: 20px; height: 20px; stroke: var(--primary); } } /* ---- TEAM (white): photo cards w/ the single product shadow ----- */ body.home .team-name { color: var(--ink); font-weight: 600; } body.home .team-role { color: var(--primary); } body.home .team-photo { border-radius: 9999px !important; /* restore pill/oval — Apple layer had overridden to radius-lg */ overflow: hidden; box-shadow: var(--apple-shadow); background: var(--parchment); } /* Prevent name/role being clipped by slider bottom edge */ body.home .team-slider { padding-bottom: 72px !important; } body.home .team-name { white-space: normal; } /* allow wrap on longer names */ body.home .team-slider-arrow { background: #fff; border: 1px solid var(--hairline); color: var(--ink); box-shadow: none; } body.home .team-slider-arrow:hover { background: var(--parchment); color: var(--primary); } /* ---- TEAM: centred CTA + tagline below the slider --------------- */ body.home .team-cta { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding-top: clamp(2rem, 3vw, 2.5rem); } body.home .team-cta-note { font-size: 0.9375rem; color: var(--ink-3); text-align: center; margin: 0; } body.home .team-cta-link { color: var(--primary); font-weight: 600; text-decoration: none; white-space: nowrap; } body.home .team-cta-link:hover { text-decoration: underline; } /* ---- PROCESS (dark tile): timeline ------------------------------ */ /* Process section — light background, ink text */ body.home .section-how-it-works { background: var(--canvas) !important; } body.home .section-how-it-works .section-label { color: var(--primary); } body.home .section-how-it-works .section-title { color: #000000 !important; } body.home .section-how-it-works .section-title em { font-style: normal; color: var(--primary); } body.home .section-how-it-works .section-sub { color: var(--ink-3); } body.home .timeline-number { color: #ffffff; } body.home .timeline-phase { color: var(--primary); } body.home .timeline-name { color: var(--ink); } body.home .timeline-desc { color: var(--ink-3); } body.home .timeline-deliverables li { color: var(--ink-2); border-color: var(--hairline); } body.home .timeline-deliverables li::before { color: var(--primary); } body.home .timeline-connector { background: var(--hairline); } body.home .timeline-connector::after { background: var(--primary); } /* ---- PROCESS: full timeline on desktop, 1-up slider on mobile ---- */ /* Desktop: arrows hidden, original timeline untouched */ body.home .proc-arrow { display: none; } @media (max-width: 767px) { body.home .proc-slider-wrap { position: relative; display: block; } /* Arrows float over the left/right edges */ body.home .proc-arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 42%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--hairline); border-radius: 50%; cursor: pointer; color: var(--primary); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); z-index: 10; } body.home .proc-arrow--prev { left: 2px; } body.home .proc-arrow--next { right: 2px; } body.home .proc-arrow svg { width: 20px; height: 20px; } /* Track = horizontal scroll-snap, one phase per view */ body.home .section-how-it-works .timeline-section { width: 100%; overflow: visible; } body.home .section-how-it-works .timeline { display: flex !important; flex-direction: row !important; grid-template-columns: none !important; width: 100%; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 0 !important; scrollbar-width: none; padding: 8px 0; } body.home .section-how-it-works .timeline::-webkit-scrollbar { display: none; } /* Connectors don't belong in a 1-up slider */ body.home .section-how-it-works .timeline-connector { display: none !important; } /* Each phase fills the track, content centred */ body.home .section-how-it-works .timeline-step { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; scroll-snap-align: center; min-width: 0; margin: 0 !important; padding: 0 clamp(1rem, 6vw, 3rem) !important; display: flex; flex-direction: column; align-items: center; text-align: center; } body.home .section-how-it-works .timeline-deliverables { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; } } /* ---- PROOF (white): stats, logos, industry cards ---------------- */ body.home .results-stat { background: transparent; border: none; box-shadow: none; } body.home .results-stat-label { color: var(--ink-3); } body.home .results-stat-value { color: var(--ink); font-weight: 600; letter-spacing: -0.02em; } body.home .results-stat-desc { color: var(--ink-3); } body.home .logo-strip-label { color: var(--ink-3); } body.home .logo-strip-item { color: var(--ink-2); opacity: 0.6; } body.home .logo-strip-wrapper::before, body.home .logo-strip-wrapper::after { display: none; } /* drop the fade masks */ body.home .industry-case-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: none; } body.home .industry-case-card:hover { border-color: var(--primary); transform: none; box-shadow: var(--apple-shadow); } body.home .industry-case-icon { color: var(--primary); } body.home .industry-case-name { color: var(--ink); font-weight: 600; } body.home .industry-case-meta { color: var(--ink-3); } body.home .industry-case-arrow { color: var(--primary); } body.home .industry-cases-arrow { background: #fff; border: 1px solid var(--hairline); color: var(--ink); } body.home .industry-cases-arrow:hover { color: var(--primary); } body.home .proof-bottom-link { color: var(--primary); } /* ---- TESTIMONIALS: red cards, white text ------------------------ */ body.home .section-testimonials .section-title em { font-style: normal; color: var(--primary); } body.home .testimonial-card { background: rgba(11, 27, 43, 0.92) !important; border: none !important; border-radius: var(--radius-lg); box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.home .testimonial-card:hover { background: rgba(11, 27, 43, 0.92) !important; transform: none !important; box-shadow: none !important; border-color: transparent !important; } body.home .testimonial-quote { color: #ffffff; } body.home .testimonial-avatar { background: rgba(255,255,255,0.18); color: #ffffff; border: 1px solid rgba(255,255,255,0.25); } body.home .testimonial-name { color: #ffffff; font-weight: 600; } body.home .testimonial-role { color: rgba(255,255,255,0.75); } body.home .testimonials-cta { display: flex; justify-content: center; padding-top: clamp(2rem, 3vw, 2.5rem); } /* Remove the edge-fade mask so red cards stay fully opaque at marquee edges */ body.home .testimonials-marquee { mask-image: none !important; -webkit-mask-image: none !important; } /* Kill the glass-border ::after shimmer (white gradient rim, z-index:3) on red cards */ body.home .testimonial-card::after, body.home .industry-case-card::after, body.home .industry-item::after { content: none !important; display: none !important; } /* Kill the large quote-mark ::before on testimonial cards */ body.home .testimonial-card::before { display: none !important; } /* ---- INDUSTRIES: red cards, white icon + name, static (no shadow/hover) ---- */ body.home .industries-grid { border: none; gap: var(--space-4); } body.home .industry-item { background: rgba(11, 27, 43, 0.92) !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: flex; flex-direction: column; align-items: center; text-align: center; } body.home .industry-item::before { display: none !important; } body.home .industry-item:hover { background: rgba(11, 27, 43, 0.92) !important; transform: none !important; box-shadow: none !important; border-color: transparent !important; } body.home .industry-icon { color: #ffffff; } body.home .industry-name { color: #ffffff !important; font-weight: 600; } /* ---- ENVIRONMENT (dark tile): sustainability stats -------------- */ /* Sustainability section — light background, ink text (mirrors The Process) */ body.home .section-environment { background: var(--canvas) !important; } body.home .section-environment .section-label { color: var(--primary); } body.home .section-environment .section-title { color: #000000 !important; } body.home .section-environment .section-title em { font-style: normal; color: var(--primary); } body.home .section-environment .section-sub { color: var(--ink-3); } body.home .section-environment .results-stat-label { color: var(--ink-3); } body.home .section-environment .results-stat-value { color: var(--ink); } body.home .section-environment .results-stat-desc { color: var(--ink-3); } /* ---- DIAGNOSTIC CTA (dark tile) --------------------------------- */ /* ---- LET'S MEET — two-column light section -------------------- */ body.home .section-cta { background: var(--canvas) !important; } body.home .section-cta .section-label { color: var(--primary); background: transparent; border: none; } /* Two-column layout */ .meet-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; } /* LEFT */ .meet-title { color: var(--ink); font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 1.25rem; } .meet-title em { font-style: normal; color: var(--primary); } .meet-desc { color: var(--ink-3); font-size: 1.0625rem; line-height: 1.6; margin-bottom: 1.75rem; } .meet-checklist { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 0.7rem; } .meet-checklist li { display: flex; align-items: flex-start; gap: 0.65rem; color: var(--ink-2); font-size: 1rem; line-height: 1.45; } .meet-checklist li::before { content: ''; flex-shrink: 0; margin-top: 0.3em; width: 16px; height: 16px; background: var(--primary); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8l3 3 6-6'/%3E%3C/svg%3E"); background-size: contain; } .meet-alt { font-size: 0.9375rem; color: var(--ink-3); margin: 0; } .meet-email-link { color: var(--primary); font-weight: 600; text-decoration: none; } .meet-email-link:hover { text-decoration: underline; } /* RIGHT — calendar card */ .meet-cal-wrap { background: #ffffff; border: 1px solid var(--hairline); border-radius: 16px; padding: 1.5rem; box-shadow: var(--apple-shadow); } .meet-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .meet-cal-month { font-size: 1.0625rem; color: var(--ink); font-weight: 500; } .meet-cal-month strong { color: var(--ink); font-weight: 700; } .meet-cal-nav { display: flex; gap: 4px; } .meet-cal-btn { background: none; border: 1px solid var(--hairline); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; color: var(--ink-3); font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, color 0.2s; } .meet-cal-btn:hover { border-color: var(--primary); color: var(--primary); } /* Calendar grid */ .meet-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 1.25rem; } .meet-dow { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 4px 0 8px; } .meet-d { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; color: var(--ink-3); border-radius: 6px; cursor: default; font-weight: 400; } .meet-d.av { color: var(--ink); background: var(--parchment); cursor: pointer; font-weight: 500; transition: background 0.18s, color 0.18s; } .meet-d.av:hover { background: rgba(230,0,35,0.10); color: var(--primary); } .meet-d.today { outline: 2px solid var(--primary); outline-offset: -2px; color: var(--primary); } .meet-d.sel { background: var(--primary) !important; color: #ffffff !important; font-weight: 700; } /* Time slots */ .meet-cal-times-header { font-size: 0.875rem; font-weight: 600; color: var(--ink); margin-bottom: 0.6rem; padding-top: 0.75rem; border-top: 1px solid var(--hairline); } .meet-cal-times { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 1rem; } .meet-slot { background: none; border: 1px solid var(--hairline); border-radius: 8px; padding: 0.5rem 0.25rem; font-size: 0.875rem; color: var(--ink); cursor: pointer; font-family: inherit; transition: border-color 0.18s, background 0.18s, color 0.18s; } .meet-slot:hover { border-color: var(--primary); background: rgba(230,0,35,0.06); color: var(--primary); } /* Embed note */ .meet-cal-note { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--ink-3); border-top: 1px solid var(--hairline); padding-top: 0.9rem; margin: 0; } /* Mobile: stack columns */ @media (max-width: 767px) { .meet-layout { grid-template-columns: 1fr; gap: 2.5rem; } .meet-title { font-size: clamp(1.75rem, 7vw, 2.25rem); } } /* ---- FOOTER (dark charcoal #2a2a2e) ----------------------------- */ body.home .site-footer { background: #0F172A; border-top: none; } body.home .footer-logo { color: #ffffff; } body.home .footer-logo .logo-dot { color: var(--primary); } body.home .footer-tagline { color: rgba(255, 255, 255, 0.50); } body.home .footer-heading { color: #ffffff; } body.home .footer-col a { color: rgba(255, 255, 255, 0.60); line-height: 2.2; } body.home .footer-col a:hover { color: #ffffff; } body.home .footer-email { color: var(--red-on-dark); } body.home .footer-linkedin, body.home .footer-instagram { color: rgba(255, 255, 255, 0.60); } body.home .footer-linkedin:hover, body.home .footer-instagram:hover { color: #ffffff; } body.home .footer-cross-site { color: rgba(255, 255, 255, 0.45); border-color: rgba(255, 255, 255, 0.10); } body.home .footer-cross-site a { color: var(--red-on-dark); } body.home .footer-bottom { color: rgba(255, 255, 255, 0.35); border-color: rgba(255, 255, 255, 0.10); } /* ---- CASE STUDIES (industry cards) — red cards, white content, animated icons ---- */ /* em in section-proof heading → red */ body.home .section-proof .section-title em { font-style: normal; color: var(--primary); } /* Card: red fill, centered layout, no shadow, static */ body.home .industry-case-card { background: rgba(11, 27, 43, 0.92) !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 0.6rem; } body.home .industry-case-card:hover { background: rgba(11, 27, 43, 0.92) !important; transform: none !important; box-shadow: none !important; border-color: transparent !important; } body.home .industry-case-icon { color: #ffffff; } body.home .industry-case-name { color: #ffffff !important; font-weight: 600; } body.home .industry-case-arrow { display: none; } /* Icon animations — applied to the element itself */ @keyframes icBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes icStamp { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(7px); } 60% { transform: translateY(-2px); } } @keyframes icSpinFull { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes icFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.06); } } @keyframes icFly { 0%, 100% { transform: translateX(0) rotate(0deg); } 30% { transform: translateX(4px) rotate(4deg); } 70% { transform: translateX(-4px) rotate(-4deg); } } @keyframes icWiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } } @keyframes icPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } } @keyframes icSlide { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(5px); } 70% { transform: translateX(-5px); } } body.home .industry-case-icon .ic-bob { animation: icBob 2.2s ease-in-out infinite; } body.home .industry-case-icon .ic-stamp { animation: icStamp 1.8s ease-in-out infinite; } body.home .industry-case-icon .ic-spin { animation: icSpinFull 6s linear infinite; transform-origin: center; } body.home .industry-case-icon .ic-float { animation: icFloat 3s ease-in-out infinite; } body.home .industry-case-icon .ic-fly { animation: icFly 3.2s ease-in-out infinite; } body.home .industry-case-icon .ic-wiggle { animation: icWiggle 2.5s ease-in-out infinite; } body.home .industry-case-icon .ic-pulse { animation: icPulse 2s ease-in-out infinite; } body.home .industry-case-icon .ic-slide { animation: icSlide 2.4s ease-in-out infinite; } /* Stagger icon animations so cards don't all pulse together */ body.home .industry-case-card:nth-child(2) .industry-case-icon svg { animation-delay: 0.3s; } body.home .industry-case-card:nth-child(3) .industry-case-icon svg { animation-delay: 0.6s; } body.home .industry-case-card:nth-child(4) .industry-case-icon svg { animation-delay: 0.9s; } body.home .industry-case-card:nth-child(5) .industry-case-icon svg { animation-delay: 1.2s; } body.home .industry-case-card:nth-child(6) .industry-case-icon svg { animation-delay: 1.5s; } /* ---- Reduce-motion + small-screen niceties ---------------------- */ @media (max-width: 640px) { body.home .section-label { font-size: 14px; } } /* ================================================================ BLUEPRINT REDESIGN LAYER — homepage v4 Engineering-paper canvas · steel-navy ink · machine-blue CTAs · machine-blue highlights · Space Grotesk / Inter / IBM Plex Mono. Appended last → wins the cascade over every layer above. ================================================================ */ /* ---- Type system ------------------------------------------------ */ body.home h1, body.home h2, body.home h3, body.home h4 { color: var(--ink); font-family: var(--font-display); } body.home .section-title { font-family: var(--font-display); color: var(--ink) !important; font-weight: 600; letter-spacing: -0.02em; } body.home .section-label { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; } body.home .section-sub { color: var(--ink-3); } /* ---- Kept sections: small Blueprint adjustments ------------------ */ /* Challenge card descriptions: steel grey reads engineering-spec; the blue accent stays on the number + hover title */ body.home .ch-desc { color: var(--ink-3); } /* ---- THE PROCESS: blueprint phase cards -------------------------- */ body.home .section-how-it-works .section-title { color: var(--ink) !important; } body.home .timeline { gap: 12px; } body.home .timeline-step { background: #ffffff; border: 1px solid var(--hairline); border-radius: 14px; padding: 1.75rem 1.5rem !important; } body.home .timeline-connector { background: var(--hairline); margin-top: 52px; } body.home .timeline-connector::after { background: var(--cta-bg); } body.home .timeline-number { background: var(--cta-bg) !important; color: #ffffff !important; width: 42px; height: 42px; border-radius: 9px; font-family: var(--font-mono); font-weight: 600; box-shadow: none !important; } body.home .timeline-phase { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } body.home .timeline-name { color: var(--ink); font-family: var(--font-display); font-weight: 600; } body.home .timeline-desc { color: var(--ink-3); } body.home .timeline-deliverables li { color: var(--ink-2); border-color: var(--hairline); } body.home .timeline-deliverables li::before { color: var(--cta-bg); } body.home .proc-arrow { color: var(--cta-bg); } body.home .proc-arrow:hover { color: var(--cta-hover); border-color: var(--cta-bg); } /* ---- PROOF: stats rules + merged client voices ------------------- */ body.home .results-stat { border-top: 2px solid var(--hairline); padding-top: 1.25rem; } body.home .results-stat-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } body.home .results-stat-value { font-family: var(--font-display); color: var(--ink); font-weight: 600; } body.home .results-stat-desc { color: var(--ink-3); } body.home .logo-strip-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; } /* Client voices: 3 white cards, machine-blue spine */ body.home .proof-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: clamp(2.5rem, 4vw, 3.5rem) 0; } body.home .proof-quote { margin: 0; background: #ffffff; border: 1px solid var(--hairline); border-left: 3px solid var(--cta-bg); border-radius: 12px; padding: 1.5rem 1.4rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.1rem; } body.home .proof-quote blockquote { margin: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.62; } body.home .pq-name { display: block; font-weight: 600; color: var(--ink); font-size: 0.9375rem; } body.home .pq-role { display: block; color: var(--ink-3); font-size: 0.8125rem; margin-top: 3px; } body.home .proof-quotes-cta { display: flex; justify-content: center; margin-bottom: clamp(3rem, 5vw, 4.5rem); } @media (max-width: 860px) { body.home .proof-quotes { grid-template-columns: 1fr; } } /* Browse-by-industry cards: white spec-sheet tiles, blue icons */ body.home .industry-case-card { background: #ffffff !important; border: 1px solid var(--hairline) !important; border-radius: 12px !important; box-shadow: none !important; } body.home .industry-case-card:hover { background: #ffffff !important; border-color: var(--cta-bg) !important; transform: translateY(-3px) !important; box-shadow: 0 10px 28px rgba(11, 27, 43, 0.10) !important; } body.home .industry-case-icon { color: var(--cta-bg); filter: none; } body.home .industry-case-name { color: var(--ink) !important; font-weight: 600; } body.home .industry-cases-arrow { background: #ffffff; border: 1px solid var(--hairline); color: var(--ink); border-radius: 9px; } body.home .industry-cases-arrow:hover { color: var(--cta-bg); border-color: var(--cta-bg); } /* ---- TEAM: engineering roster ------------------------------------ */ body.home .team-name { color: var(--ink); } body.home .team-role { color: var(--cta-bg); font-family: var(--font-mono); font-size: 0.8125rem; } body.home .team-slider-arrow { border-radius: 9px; } body.home .team-slider-arrow:hover { color: var(--cta-bg); border-color: var(--cta-bg); background: #ffffff; } body.home .team-cta-link { color: var(--cta-bg); } /* ---- SUSTAINABILITY: dark steel-navy band ------------------------ */ body.home .section-environment { background: var(--tile-dark) !important; } body.home .section-environment .section-label { color: var(--red-on-dark); } body.home .section-environment .section-title { color: #ffffff !important; } body.home .section-environment .section-title em { color: var(--red-on-dark); } body.home .section-environment .section-sub { color: rgba(255, 255, 255, 0.65); } body.home .section-environment .results-stat { border-top-color: rgba(255, 255, 255, 0.16); } body.home .section-environment .results-stat-label { color: rgba(255, 255, 255, 0.55); } body.home .section-environment .results-stat-value { color: #ffffff; } body.home .section-environment .results-stat-desc { color: rgba(255, 255, 255, 0.60); } /* ---- LET'S MEET: machine-blue booking ---------------------------- */ .meet-cal-wrap { border-radius: 14px; } .meet-checklist li::before { background: var(--cta-bg); border-radius: 6px; /* squared check chips, not circles */ } .meet-email-link { color: var(--cta-bg); } .meet-d.today { outline-color: var(--cta-bg); color: var(--cta-bg); } .meet-d.sel { background: var(--cta-bg) !important; } .meet-d.av:hover { background: rgba(3, 105, 161, 0.10); color: var(--cta-bg); } .meet-slot { border-radius: 8px; } .meet-slot:hover { border-color: var(--cta-bg); background: rgba(3, 105, 161, 0.06); color: var(--cta-bg); } .meet-cal-btn:hover { border-color: var(--cta-bg); color: var(--cta-bg); } /* ================================================================ UI/UX PRO MAX PASS — v4.1 styles.csv #1 "Minimalism & Swiss": flat surfaces, hairline borders, no decorative shadows, 200ms micro-interactions. ux-guidelines: #8 (150-300ms), #9 (reduced motion), #13 (transform/opacity only), #28 (focus rings), #36 (4.5:1 text). Hero / Industry Challenges / What We Do layouts untouched. Appended last → wins the cascade. ================================================================ */ html:has(body.home) { scroll-behavior: smooth; } /* ---- Swiss surfaces: one card grammar everywhere ----------------- */ body.home .timeline-step, body.home .proof-quote, body.home .industry-case-card { border-radius: 10px !important; box-shadow: none !important; transition: border-color 0.2s ease-out, transform 0.2s ease-out; } body.home .timeline-step:hover, body.home .proof-quote:hover { border-color: var(--cta-bg); } body.home .industry-case-card:hover { transform: translateY(-2px) !important; box-shadow: none !important; /* border shift is the feedback */ } /* Buttons: tighter Swiss radius, flat fills, 200ms */ body.home .btn-primary, body.home .btn-secondary { border-radius: 6px !important; box-shadow: none !important; transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out; } /* ---- Trust & Authority: stats read as KPI counters ---------------- */ body.home .results-stat-value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } body.home .results-stat { transition: border-color 0.2s ease-out; } body.home .results-stat:hover { border-top-color: var(--cta-bg); } body.home .section-environment .results-stat:hover { border-top-color: var(--red-on-dark); } /* Quote cards: muted voice, ink attribution (trust pattern) */ body.home .proof-quote blockquote { color: var(--ink-2); } /* ---- Accessibility: visible focus, honored motion prefs ---------- */ body.home a:focus-visible, body.home button:focus-visible, body.home .btn:focus-visible { outline: 2px solid var(--cta-bg); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { body.home *, body.home *::before, body.home *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html:has(body.home) { scroll-behavior: auto; } } /* ================================================================ REPLICATE TYPE PASS — v4.2 Fonts per getdesign.md/replicate DESIGN.md: heavy condensed grotesque display (Bricolage Grotesque standing in for rb-freigeist-neue), Inter for basier-square, JetBrains Mono for all mono. Display = 700, compact leading, negative tracking that scales with size; the display family appears only at 30px+, card-level titles use the body family at 600. ================================================================ */ body.home h1, body.home h2, body.home .section-title { font-weight: 700 !important; letter-spacing: -0.025em; line-height: 1.08; } body.home .hero-title { letter-spacing: -0.03em; } /* bigger type tightens more */ body.home .results-stat-value { font-weight: 700; } /* Card-level titles: body family, 600 (display reserved for 30px+) */ body.home .timeline-name, body.home .industry-case-name, body.home .team-name { font-family: var(--font-base) !important; font-weight: 600; } /* ---- Slider arrows: interactive = machine blue -------------------- */ @media (max-width: 767px) { body.home .svc-arrow { color: var(--cta-bg); } body.home .svc-arrow svg { stroke: var(--cta-bg); } } /* ================================================================ BLUEPRINT SITEWIDE — v5.0 One site, one design system. Every page (services, about, team, contact, case studies, and the 66-page Academy) follows DESIGN.md: slate paper canvas, steel-navy ink, Trust Blue #0369A1 accent, Bricolage Grotesque / Inter / JetBrains Mono type. Light-only: the legacy Instrument dark theme and its toggle are retired. Token-level remap so every Instrument-era component inherits Blueprint automatically. Appended last -> wins the cascade. ================================================================ */ :root, html[data-theme="light"], html[data-theme="dark"] { color-scheme: light; /* Accent: Trust Blue everywhere (no orange, no amber) */ --primary: #0369A1; --primary-hover: #075985; --primary-deep: #075985; --primary-darker: #0C4A6E; --primary-light: #E0F2FE; --primary-tint: #F0F9FF; --primary-glow: rgba(3, 105, 161, 0.16); --accent-ink: #0369A1; --accent-bright: #0369A1; --on-accent: #FFFFFF; --text-on-yellow: #FFFFFF; /* Ink + surfaces: slate scale on engineering paper */ --text-primary: #0F172A; --text-secondary: #334155; --text-muted: #64748B; --text-soft: #94A3B8; --bg-page: #F8FAFC; --bg-surface: #FFFFFF; --bg-tint: #F0F9FF; --border: #E2E8F0; --border-strong: #CBD5E1; --panel: #FFFFFF; --panel-border: #E2E8F0; --grid-line: rgba(15, 23, 42, 0.045); /* Swiss elevation: near-flat */ --elev-1: 0 1px 2px rgba(2, 6, 23, 0.05); --elev-2: 0 1px 3px rgba(2, 6, 23, 0.06); --elev-3: 0 2px 6px rgba(2, 6, 23, 0.08); /* Replicate type voices sitewide */ --font-base: 'Inter', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* Paper canvas: no graphite, no blueprint-grid atmosphere */ body { background-image: none !important; background-color: var(--bg-page) !important; color: var(--text-primary); font-family: var(--font-base); } /* Unified chrome on every page: navy pill header + navy footer. The floating pill shape (DESIGN.md §7) must apply on EVERY page — an older "Instrument" layer squared .nav-pill to 7px and only the homepage restored the pill, leaving inner pages as rectangles. Pin the pill shape here too. */ .site-header .nav-pill { background: #0F172A !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-radius: var(--radius-full) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22), 0 1px 6px rgba(0, 0, 0, 0.12) !important; } .site-footer { background: #0F172A !important; border-top: none; } .theme-toggle { display: none !important; } /* Interactive grammar: squared Trust Blue buttons, 200ms */ .btn-primary, .cta-pill, .btn-cta-primary { background: var(--primary) !important; color: #FFFFFF !important; border-radius: 6px !important; box-shadow: none !important; transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out; } .btn-primary:hover, .cta-pill:hover, .btn-cta-primary:hover { background: var(--primary-hover) !important; color: #FFFFFF !important; transform: none; box-shadow: none !important; } .btn-secondary { border-radius: 6px !important; box-shadow: none !important; } /* Accessibility, sitewide */ a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* SITEWIDE polish pass 2 (v5.0.1): the navy nav pill needs white text on every page, not just body.home; dropdown stays a white panel. */ .site-header .nav-link, .site-header .site-logo, .site-header .nav-chevron { color: #FFFFFF; } .site-header .nav-pill .logo-text, .site-header .nav-pill .logo-text .logo-dot { color: #FFFFFF; } .main-nav .nav-link { transition: color 0.2s ease, background 0.2s ease; } .main-nav .nav-link:hover, .main-nav .nav-link:focus-visible, .main-nav .current-menu-item > .nav-link, .main-nav .current-menu-ancestor > .nav-link, .main-nav .current-menu-parent > .nav-link, .main-nav .current_page_item > .nav-link { color: #FFFFFF; background: rgba(255, 255, 255, 0.12); } .main-nav .sub-menu { background: #FFFFFF !important; border: 1px solid var(--border) !important; box-shadow: 0 8px 24px rgba(2, 6, 23, 0.10) !important; } .main-nav .sub-menu a { color: var(--text-primary) !important; } .main-nav .sub-menu a:hover { color: var(--primary) !important; background: var(--primary-tint); } /* v5.0.2: Instrument light-theme selectors outrank the sitewide white nav text; force it — the pill is always navy now. */ .site-header .nav-link, .site-header .nav-chevron, .site-header .site-logo, .site-header .nav-pill .logo-text, .site-header .nav-pill .logo-text .logo-dot { color: #FFFFFF !important; } /* v5.0.3: phone-width QA. Long CTA labels (e.g. "Start with Phase 1: Book the Diagnostic") are nowrap and wider than a 390px viewport, which forces the whole page to zoom out. Let buttons wrap on phones. */ @media (max-width: 480px) { .btn-primary, .btn-secondary, .cta-pill { white-space: normal; text-align: center; max-width: 100%; } } /* v5.0.4: Results section — mobile layout. Hide the 4th stat (Senior engineers) and show the remaining 3 side-by-side in a compact 3-column row on small screens. */ @media (max-width: 560px) { .section-proof .results-stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-4) var(--space-3); align-items: stretch; } .section-proof .results-stats .results-stat:nth-child(4) { display: none; } .section-proof .results-stat-desc { display: none; } /* Fill the card height so justify-content can anchor value to bottom */ .section-proof .results-stat { height: 100%; } .section-proof .results-stat-top { flex: 1; justify-content: space-between; height: 100%; } .section-proof .results-stat-value { font-size: clamp(1.4rem, 6vw, 2rem); } } /* v5.0.6: Industry case cards — Image + Title card (reference design). Photo fills the top; a white panel floats below with eyebrow, title and a "See more" link. Slider selector outranks earlier !important. */ body.home .industry-cases-slider .industry-case-card { position: relative !important; display: block !important; /* escape forced flex-center layers */ align-items: unset !important; text-align: left !important; gap: 0 !important; padding: 0 0 1.25rem !important; overflow: visible !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 16px !important; } /* Media: rounded photo block */ body.home .industry-cases-slider .industry-case-media { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #0F172A; } body.home .industry-cases-slider .industry-case-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.4s ease-out; } body.home .industry-cases-slider .industry-case-card:hover .industry-case-photo { transform: scale(1.05); } /* fallback icon (no photo) centered in the media block */ body.home .industry-cases-slider .industry-case-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; } /* White panel floating over the bottom of the photo */ body.home .industry-cases-slider .industry-case-panel { position: relative; z-index: 2; margin: -2.75rem 0.85rem 0; padding: 0.9rem 1.1rem 1rem; background: #ffffff; border: 1px solid var(--hairline); border-radius: 14px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08); display: flex; flex-direction: column; gap: 0.35rem; transition: box-shadow 0.2s ease-out, transform 0.2s ease-out; } body.home .industry-cases-slider .industry-case-card:hover .industry-case-panel { box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14); } body.home .industry-cases-slider .industry-case-eyebrow { font-family: var(--font-mono, monospace); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3, #64748B); } body.home .industry-cases-slider .industry-case-card .industry-case-name { position: static !important; margin: 0 !important; padding: 0 !important; color: var(--ink, #0F172A) !important; font-family: var(--font-display) !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; text-transform: none !important; } body.home .industry-cases-slider .industry-case-more { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cta-bg, #0369A1); } body.home .industry-cases-slider .industry-case-more svg { transition: transform 0.2s ease-out; } body.home .industry-cases-slider .industry-case-card:hover .industry-case-more svg { transform: translateX(3px); } /* Card lift on hover — panel + photo move together */ body.home .industry-cases-slider .industry-case-card:hover { transform: translateY(-3px) !important; background: transparent !important; box-shadow: none !important; border-color: transparent !important; } /* Tighten bottom gap after the case-studies slider */ body.home .industry-cases-wrapper { margin-bottom: var(--space-4); } /* v5.0.7: Sustainability section — 2×2 grid on mobile */ @media (max-width: 560px) { .section-environment .results-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); } .section-environment .results-stat-desc { font-size: 0.6875rem; line-height: 1.5; } .section-environment .results-stat-value { font-size: clamp(1.6rem, 8vw, 2.25rem); } } /* ================================================================ v5.0.8: TESTIMONIALS — dark full-bleed band, rating header + dual opposing marquees. Theme tokens only (slate ink, Trust Blue, Bricolage/Inter/JetBrains). Row 1 → right, row 2 → left. ================================================================ */ body.home .testimonials { position: relative; /* full-bleed: break out of the .container */ width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: clamp(3rem, 6vw, 5rem); margin-bottom: clamp(3rem, 6vw, 5rem); padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 6vw, 5.5rem); background: linear-gradient(180deg, #0F172A 0%, #020617 100%); overflow: hidden; } /* Constrained header block */ body.home .testimonials-inner { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); } body.home .tm-header { text-align: center; } body.home .tm-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-on-dark); margin-bottom: 1rem; } body.home .tm-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; color: #ffffff; margin: 0 auto; max-width: 18ch; } body.home .tm-title em { font-style: normal; color: var(--red-on-dark); } /* Rating block */ body.home .tm-rating { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); flex-wrap: wrap; } body.home .tm-rating-main { display: flex; align-items: baseline; gap: 0.75rem; } body.home .tm-rating-label { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 4vw, 3.25rem); letter-spacing: -0.02em; color: #ffffff; } body.home .tm-rating-score { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -0.03em; line-height: 1; color: var(--red-on-dark); } body.home .tm-rating-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; } body.home .tm-rating-sub { color: rgba(255, 255, 255, 0.62); font-size: 0.9375rem; max-width: 14ch; line-height: 1.4; } /* Stars — gold, universal */ body.home .tm-stars { color: #FBBF24; letter-spacing: 0.1em; font-size: 0.875rem; line-height: 1; } body.home .tm-stars--lg { font-size: 1.25rem; } /* Clients / avatar row */ body.home .tm-clients { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); flex-wrap: wrap; } body.home .tm-avatars { display: flex; } body.home .tm-avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #0EA5E9 0%, #0369A1 100%); color: #ffffff; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; flex: 0 0 auto; } body.home .tm-avatar--sm { width: 40px; height: 40px; border: 2px solid #0F172A; margin-left: -10px; } body.home .tm-avatar--sm:first-child { margin-left: 0; } body.home .tm-clients-more { color: rgba(255, 255, 255, 0.7); font-size: 0.9375rem; font-weight: 500; } /* ── Marquees ───────────────────────────────────────────────── */ body.home .tm-marquee { position: relative; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); /* fade edges */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); overflow: hidden; } body.home .tm-track { display: flex; gap: 1.25rem; width: max-content; will-change: transform; } body.home .tm-track--left { animation: tmScrollLeft 46s linear infinite; } body.home .tm-track--right { animation: tmScrollRight 46s linear infinite; } body.home .tm-marquee:hover .tm-track { animation-play-state: paused; } @keyframes tmScrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes tmScrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* ── Cards ──────────────────────────────────────────────────── */ body.home .tm-card { flex: 0 0 auto; width: clamp(300px, 26vw, 360px); margin: 0; padding: 1.6rem 1.5rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; display: flex; flex-direction: column; gap: 1.1rem; } body.home .tm-quote-mark { font-family: var(--font-display); font-size: 2.75rem; line-height: 0.6; color: var(--red-on-dark); height: 1.25rem; } body.home .tm-card-text { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.9375rem; line-height: 1.6; } body.home .tm-card-author { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; } body.home .tm-author-info { display: flex; flex-direction: column; } body.home .tm-author-name { color: #ffffff; font-weight: 600; font-size: 0.9375rem; } body.home .tm-author-role { color: rgba(255, 255, 255, 0.55); font-size: 0.8125rem; margin-top: 2px; } @media (prefers-reduced-motion: reduce) { body.home .tm-track--left, body.home .tm-track--right { animation: none; } } @media (max-width: 560px) { body.home .tm-rating { gap: 1.25rem; } body.home .tm-card { width: clamp(260px, 80vw, 300px); } body.home .tm-title { max-width: 14ch; } } /* ================================================================ v5.0.9: Theme flip — • Sustainability (.section-environment) → LIGHT paper • Meet the Team (.section-team) → DARK steel-navy Appended last → wins the cascade. ================================================================ */ /* ---- SUSTAINABILITY → light ------------------------------------- */ body.home .section-environment { background: var(--canvas) !important; } body.home .section-environment .section-label { color: var(--cta-bg); } body.home .section-environment .section-title { color: var(--ink) !important; } body.home .section-environment .section-title em { font-style: normal; color: var(--cta-bg); } body.home .section-environment .section-sub { color: var(--ink-3); } body.home .section-environment .results-stat { border-top-color: var(--hairline); } body.home .section-environment .results-stat-top { border-left-color: var(--border-strong, #CBD5E1); } body.home .section-environment .results-stat-label { color: var(--ink-3); } body.home .section-environment .results-stat-value { color: var(--ink); } body.home .section-environment .results-stat-desc { color: var(--ink-3); } body.home .section-environment .results-stat:hover { border-top-color: var(--cta-bg); } /* ---- MEET THE TEAM → dark --------------------------------------- */ body.home .section-team { background: var(--tile-dark) !important; } body.home .section-team .section-label { color: var(--red-on-dark); } body.home .section-team .section-title { color: #ffffff !important; } body.home .section-team .section-title em { font-style: normal; color: var(--red-on-dark); } body.home .section-team .section-sub { color: rgba(255, 255, 255, 0.65); } body.home .section-team .team-name { color: #ffffff; } body.home .section-team .team-role { color: var(--red-on-dark); } body.home .section-team .team-photo { background: rgba(255, 255, 255, 0.06); box-shadow: none; } body.home .section-team .team-slider-arrow { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: #ffffff; } body.home .section-team .team-slider-arrow:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--red-on-dark); color: var(--red-on-dark); } body.home .section-team .team-cta-note { color: rgba(255, 255, 255, 0.65); } body.home .section-team .team-cta-link { color: var(--red-on-dark); } /* ================================================================ v5.1.0: Brand logo in hero (top) + footer. Reuses the diamond mark + iontek.io wordmark. Hero scroll indicator removed. ================================================================ */ /* ---- Hero brand logo (above the label chip) --------------------- */ body.home .hero-logo { /* Pinned to the very top of the hero, level with the floating hamburger (header sits at top:20px, 48px tall → vertical centre ~44px). Absolute against .hero so it scrolls away with the hero — never floats white-on- white over the light sections below. Hidden on desktop (header shows it). */ position: absolute; top: 32px; left: var(--container-padding); z-index: 5; display: flex; width: fit-content; align-items: center; gap: 0.55rem; text-decoration: none; opacity: 0; animation: heroContentIn 0.5s ease 0s both; } body.home .hero-logo .logo-mark { display: inline-flex; flex-shrink: 0; } body.home .hero-logo .logo-text { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #ffffff; display: inline-flex; align-items: baseline; } body.home .hero-logo .logo-dot { color: var(--red-on-dark); margin: 0 1px; } body.home .hero-logo .logo-suffix { color: var(--red-on-dark); } /* Desktop already shows the logo in the header nav pill → hide the hero logo there; keep it on mobile where the header is just a burger. */ @media (min-width: 769px) { body.home .hero-logo { display: none; } } @media (max-width: 600px) { body.home .hero-logo .logo-text { font-size: 1.45rem; } body.home .hero-logo .logo-mark svg { width: 26px; height: 26px; } } /* ---- Footer brand logo (mark + wordmark) ------------------------ */ body.home .footer-logo, .footer-logo { display: inline-flex; align-items: center; gap: 0.5rem; } .footer-logo .logo-mark { display: inline-flex; flex-shrink: 0; } .footer-logo .logo-text { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #ffffff; display: inline-flex; align-items: baseline; } .footer-logo .logo-text .logo-dot { color: var(--primary); margin: 0 1px; } .footer-logo .logo-text .logo-suffix { color: var(--primary); } /* ---- v5.2.0: real SVG logo file (assets/images/logo.svg) --------- Transparent, cropped artwork — white "iontek" + blue ".io" + mark. Header floor 40px, footer 56px (intrinsic ratio ~5.32:1). */ .site-logo-img { height: 16px; width: auto; display: block; } .footer-logo-img { height: 18px; width: auto; display: block; } .hero-logo-img { height: 26px; width: auto; display: block; } /* mobile homepage hero — sized to balance the 48px hamburger */ @media (max-width: 600px) { .site-logo-img { height: 11px; } /* fit the compact mobile pill */ .hero-logo-img { height: 24px; } } /* ================================================================ v5.1.1: Dark sections curve at every dark↔light boundary (matching the hero's bottom radius) + a soft drop shadow. z-index lifts each panel so its shadow casts over light neighbours. Radius var keeps every curve identical to the hero. ================================================================ */ :root { --dark-curve: clamp(28px, 4vw, 56px); } /* Hero keeps its existing bottom curve — just add the soft shadow */ .hero { z-index: 1; box-shadow: 0 28px 64px -28px rgba(2, 6, 23, 0.55); } /* Mid-page dark sections (light above AND below) → all four corners */ body.home .section-how-it-works, body.home .section-team, body.home .testimonials { position: relative; z-index: 1; border-radius: var(--dark-curve); box-shadow: 0 28px 64px -28px rgba(2, 6, 23, 0.45), 0 -28px 64px -28px rgba(2, 6, 23, 0.30); } /* CTA: light section above, dark footer below → top corners only, soft shadow cast upward onto the light section it meets. */ body.home .section-cta { position: relative; z-index: 1; border-radius: var(--dark-curve) var(--dark-curve) 0 0; box-shadow: 0 -24px 60px -28px rgba(2, 6, 23, 0.45); } /* ================================================================ v5.3.0: Hero proof row — rating + icon trust signals on the dark hero. Trust-Blue tiles (Blueprint identity) + amber rating stars. Replaces the old plain-text .trust-bar. ================================================================ */ .hero-proof { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(1.25rem, 3.2vw, 2.75rem); margin-top: clamp(1.75rem, 4vw, 2.75rem); } .hero-proof-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; min-width: 0; } .hero-proof-stars { display: inline-flex; align-items: center; gap: 3px; color: #FACC15; /* amber — universal rating convention */ height: 40px; /* align baseline with the icon tiles */ } .hero-proof-stars svg { width: 17px; height: 17px; display: block; } .hero-proof-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(3, 105, 161, 0.16); border: 1px solid rgba(56, 189, 248, 0.28); color: #38BDF8; /* bright sky-blue glyph reads on the dark hero */ flex-shrink: 0; } .hero-proof-icon svg { width: 20px; height: 20px; display: block; } .hero-proof-text { font-size: 0.8125rem; line-height: 1.35; font-weight: 500; color: rgba(255, 255, 255, 0.74); letter-spacing: 0.01em; } .hero-proof-text strong { display: block; color: #ffffff; font-weight: 700; font-size: 0.9375rem; } .hero-proof-sub { display: block; margin-top: 2px; font-size: 0.6875rem; font-weight: 500; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.01em; } /* Mobile: a true 2-column grid so the columns (and therefore the 2nd & 4th icons) line up vertically — flex-wrap couldn't, because the left items have different widths and pushed the right items to different x positions. */ @media (max-width: 768px) { .hero-proof { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; align-items: start; gap: 1.9rem 1.25rem; margin-top: 1.5rem; } } @media (max-width: 600px) { .hero-proof-icon { width: 36px; height: 36px; border-radius: 10px; } .hero-proof-stars { height: 36px; } .hero-proof-text { font-size: 0.75rem; } } /* ================================================================ v5.4.0: Mobile header bar (≤768px) — a full-width sticky navy bar that runs edge-to-edge: ☰ menu (left) · logo (centre) · Book a Discovery Call (right). Replaces the floating desktop pill + the old standalone hamburger / hero logo on phones. ================================================================ */ .mobile-header { display: none; } @media (max-width: 768px) { /* Floating desktop pill + redundant hero logo are off on phones. */ .site-header { display: none !important; } body.home .hero-logo { display: none !important; } .mobile-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; /* menu | logo | CTA */ align-items: center; gap: 6px; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #0F172A; padding: 8px 12px; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28); } /* Menu — left */ .mobile-header .hamburger { display: flex; position: static; width: 38px; height: 38px; justify-self: start; } /* Logo — centre column, centred within it (clips before overlapping) */ .mobile-header-logo { justify-self: center; min-width: 0; max-width: 100%; display: flex; justify-content: center; overflow: hidden; } .mobile-header-logo img { height: 22px; width: auto; max-width: 100%; display: block; } /* CTA — right, small but full text. display override beats the older `.cta-pill { display:none }` mobile rule (it shares the cta-pill class). */ .mobile-header-cta { display: inline-flex !important; align-items: center; justify-self: end; font-size: 0.6875rem !important; font-weight: var(--font-weight-bold); line-height: 1; padding: 7px 10px !important; white-space: nowrap; border-radius: 6px !important; } /* The fixed bar (~58px) sits over content; pages already pad their first section clear of it (hero 120px, academy-body 96px). */ } /* ================================================================ v5.5.0: "Let's Meet" — light variant (contact page). The shared .section-cta panel is dark (#0F0F17); .meet-light flips it to a light slate card with dark ink, keeping the white calendar. ================================================================ */ .meet-light.section-cta, [data-theme="light"] .meet-light.section-cta { background: #EDF1F6 !important; } .meet-light .section-label { color: var(--primary) !important; background: transparent !important; border: none !important; } .meet-light .meet-title, .meet-light .section-title { color: var(--text-primary) !important; } .meet-light .meet-desc, .meet-light .meet-checklist li { color: var(--text-secondary) !important; } .meet-light .meet-alt { color: var(--text-muted) !important; } /* ================================================================ v5.6.0: Unified PILL buttons sitewide (DESIGN.md §5.1). Every primary/secondary action button is fully rounded on every page — the homepage already used pills; this brings the rest in line and removes the old "Instrument" clipped-corner / 6px-squared look. ================================================================ */ .btn-primary, .btn-secondary, .cta-pill, .btn-cta-primary, .btn-ghost, .btn-gloss-secondary, .mobile-header-cta { border-radius: 9999px !important; clip-path: none !important; } /* ================================================================ v5.6.1: Mobile header bar — transparent, unified on every page. The hamburger keeps its own dark pill and the CTA its blue fill, so both stay legible without a solid bar behind them. ================================================================ */ @media (max-width: 768px) { .mobile-header { /* See-through glass rather than a solid navy block: blends with the dark hero on the homepage, yet keeps the white logo legible over the light inner pages (a fully-transparent bar would hide it). */ background: rgba(15, 23, 42, 0.42) !important; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: none !important; } } /* ================================================================ v5.7.0: Legal / policy pages (Privacy, Terms, Cookies) — clean prose layout via the "Legal" page template + footer legal links. ================================================================ */ .legal-main { padding-top: clamp(120px, 14vh, 168px); padding-bottom: clamp(var(--space-12), 8vw, var(--space-16)); } .legal-wrap { max-width: 760px; margin-inline: auto; } .legal-header { margin-bottom: clamp(2rem, 4vw, 3rem); } .legal-title { font-family: var(--font-display); font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); font-weight: var(--font-weight-bold); letter-spacing: -0.025em; line-height: var(--leading-tight); color: var(--text-primary); margin: var(--space-3) 0 var(--space-2); } .legal-updated { font-size: var(--text-sm); color: var(--text-muted); } .legal-content h2 { font-family: var(--font-display); font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl)); font-weight: var(--font-weight-bold); color: var(--text-primary); letter-spacing: -0.015em; margin: clamp(2rem, 4vw, 2.75rem) 0 var(--space-3); } .legal-content h3 { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin: var(--space-6) 0 var(--space-2); } .legal-content p, .legal-content li { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-secondary); } .legal-content p { margin-bottom: var(--space-4); } .legal-content ul { margin: 0 0 var(--space-4) 1.25rem; list-style: disc; } .legal-content li { margin-bottom: var(--space-2); } .legal-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } .legal-content strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); } /* Footer legal links row */ .footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); } .footer-legal a { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.55); transition: color 0.2s ease; } .footer-legal a:hover { color: #ffffff; }