/* ========================================================================== Captain RJ Aerial — site styles Tokens are verbatim from the design handoff (assets/tokens.css). Theme is driven by [data-theme] on : absent = dark, "light" = light. ========================================================================== */ /* ---- Tokens: neutrals + atmosphere (DARK default) ----------------------- */ :root { --bg: #0C1116; --sf: #11181F; --sf2: #0E141A; --ln: rgba(255,255,255,0.08); --lnh: rgba(255,255,255,0.18); /* hover-strength hairline */ --ink: #F4F1EA; --in2: #9DAAB6; --in3: #6F7E8C; --navbg: rgba(12,17,22,0.82); --slot: #161E27; /* gradients resolve their last stop to var(--bg) so the hero melts into the page with no seam */ --hbg: radial-gradient(120% 95% at 80% 120%, #F56A34 0%, #C2401E 15%, #3A2230 36%, #16222E 62%, var(--bg) 100%); --hbg-about: radial-gradient(120% 120% at 80% -10%, #F56A34 0%, #C2401E 14%, #3A2230 34%, #16222E 60%, var(--bg) 100%); --rg1: #0A1016; --rg2: #070C11; --cnt: #9FD8FF; --hud: rgba(245,241,234,0.55); --drn: #EDEFF2; --trl: #FF8A4D; } :root[data-theme="light"] { --bg: #ECE5D7; --sf: #FFFFFF; --sf2: #F6F1E7; --ln: rgba(22,33,44,0.13); --lnh: rgba(22,33,44,0.26); --ink: #1B2530; --in2: #59697A; --in3: #8A97A3; --navbg: rgba(236,229,215,0.82); --slot: #E6DECF; --hbg: radial-gradient(120% 95% at 80% 120%, #FFC27A 0%, #F2823C 16%, #7FB0CE 46%, #C8E4F1 72%, var(--bg) 100%); --hbg-about: radial-gradient(120% 120% at 80% -10%, #FFC27A 0%, #F2823C 16%, #7FB0CE 46%, #C8E4F1 72%, var(--bg) 100%); --rg1: #6E93AC; --rg2: #4F7188; --cnt: #2E7AA0; --hud: rgba(18,40,55,0.62); --drn: #21323F; --trl: #E2551E; } /* ---- Tokens: brand accents (constant in both themes) -------------------- */ :root { --svc: var(--accent); /* per-service accent; overridden on service pages */ --accent: #F56A34; --accent-2: #C2401E; --slate: #3D6A8F; --evergreen: #1E8A5A; --sky: #2FA8E0; --tan: #D8B987; --steel: #8A97A3; --r-sm: 8px; --r-md: 14px; --r-lg: 18px; --r-xl: 20px; --shadow-drone: drop-shadow(0 10px 14px rgba(0,0,0,0.4)); --ease-theme: .45s ease; --ease-knob: .35s cubic-bezier(.5,0,.2,1); --ease-out: cubic-bezier(.2,.65,.25,1); --font-display: 'Archivo', sans-serif; --font-body: 'Hanken Grotesk', sans-serif; --font-mono: 'Space Mono', monospace; } /* ---- Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--bg); transition: background var(--ease-theme); } body { font-family: var(--font-body); color: var(--ink); transition: color var(--ease-theme); -webkit-font-smoothing: antialiased; cursor: crosshair; } /* the crosshair is part of the brand — keep it consistent everywhere */ a, button { cursor: crosshair; } ::selection { background: #F56A34; color: #0C1116; } a { color: inherit; } p, h1, h2, h3, blockquote, figure { margin: 0; } img { display: block; max-width: 100%; } svg { display: block; } .page { position: relative; z-index: 0; /* contains the z-index:-1 elevation rail */ min-height: 100vh; overflow-x: clip; } .wrap { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; position: relative; z-index: 4; /* content rides above the elevation rail + topo flow */ } .section { padding-top: 72px; } .section--lg { padding-top: 78px; } .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; } .h2 { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -0.5px; margin: 10px 0 0; } /* ========================================================================== Full-page elevation rail — one continuous altimeter tape, built by JS. Same look as the hero tape: long tick + value, short tick between. Values descend from 420 at the top of the page to 0 at the footer. z-index 3 keeps it above the hero atmosphere (layers ≤2) and below hero copy/HUD (5) and all .wrap content (4). ========================================================================== */ .elev-rail { position: absolute; left: 22px; top: 0; bottom: 0; width: 80px; z-index: 4; pointer-events: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--hud); } .elev-rail .et { position: absolute; left: 0; display: flex; align-items: center; gap: 8px; height: 1px; white-space: nowrap; } .elev-rail .tk { width: 18px; height: 1px; background: currentColor; opacity: 0.7; flex-shrink: 0; } .elev-rail .et--s .tk { width: 10px; opacity: 0.5; } .elev-rail .agl { color: var(--accent); } /* ========================================================================== Nav ========================================================================== */ .nav { position: sticky; top: 0; z-index: 50; background: var(--navbg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--ln); transition: background var(--ease-theme); } .nav-inner { max-width: 1180px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; } .brand-name { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.5px; white-space: nowrap; } .nav-right { display: flex; align-items: center; gap: 26px; } .nav-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; color: var(--in2); text-decoration: none; transition: color .25s ease; } .nav-link:hover { color: var(--ink); } .nav-link--accent { color: var(--accent); } .nav-link--accent:hover { color: var(--accent); opacity: .85; } /* Theme toggle pill: knob right = dark (default), left = light */ .toggle { display: flex; align-items: center; width: 60px; height: 28px; border-radius: 28px; border: 1px solid var(--ln); background: var(--sf); position: relative; cursor: pointer; padding: 3px; transition: background .4s ease, border-color .25s ease; flex-shrink: 0; } .toggle:hover { border-color: var(--lnh); } .toggle .t-sun, .toggle .t-moon { position: absolute; top: 50%; transform: translateY(-50%); color: var(--in3); display: flex; } .toggle .t-sun { left: 8px; } .toggle .t-moon { right: 8px; } .toggle .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); transform: translateX(30px); transition: transform var(--ease-knob); } :root[data-theme="light"] .toggle .knob { transform: translateX(0); } .toggle:active .knob { width: 24px; } /* Mobile menu */ .burger { display: none; width: 38px; height: 32px; border: 1px solid var(--ln); border-radius: 8px; background: var(--sf); cursor: pointer; padding: 7px 8px; flex-direction: column; justify-content: space-between; } .burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease-out), opacity .3s ease; } .nav.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav.open .burger span:nth-child(2) { opacity: 0; } .nav.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-menu { display: contents; } /* ========================================================================== Hero (home) ========================================================================== */ .hero { position: relative; height: 620px; overflow: hidden; cursor: crosshair; background: var(--hbg); transition: background var(--ease-theme); } /* Stacking tells the story: contour chart (air, z2) behind the mountain silhouettes (land, z3) — the lines disappear behind the ridges. */ .hero-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; } .hero-topo { opacity: 0.5; } .hero-topo path { stroke: var(--cnt); } .hero-ridge { z-index: 3; } .hero-ridge .r1 { fill: var(--rg1); } .hero-ridge .r2 { fill: var(--rg2); } .plx { will-change: transform; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(8,12,17,0.84) 0%, rgba(8,12,17,0.38) 36%, rgba(8,12,17,0) 60%); z-index: 3; pointer-events: none; } :root[data-theme="light"] .hero-scrim { background: linear-gradient(105deg, rgba(40,58,72,0.45) 0%, rgba(40,58,72,0.18) 36%, rgba(40,58,72,0) 60%); } .hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; /* reach full page color well before the hero's edge so nothing bleeds through */ background: linear-gradient(to bottom, transparent 0%, var(--bg) 72%, var(--bg) 100%); z-index: 3; pointer-events: none; transition: background var(--ease-theme); } /* Full-page contour field: a real topographic chart (marching-squares contours over a procedural height field, drawn to canvas by site.js) — nested loops around peaks and basins, meandering index contours, and a faint graticule grid. A repeating vertical mask makes the chart fade in and out between sections. */ .topo-field { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.17; overflow: hidden; -webkit-mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0.35) 0px, #000 240px, #000 620px, rgba(0,0,0,0.35) 880px); mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0.35) 0px, #000 240px, #000 620px, rgba(0,0,0,0.35) 880px); } .topo-field canvas { display: block; width: calc(100% + 32px); /* bleed for the ambient drift */ height: 100%; margin-left: -16px; } /* slow ambient drift on contour groups */ .drift { animation: topo-drift 28s ease-in-out infinite alternate; } @keyframes topo-drift { from { transform: translateX(-10px); } to { transform: translateX(12px); } } /* dashed flight route between waypoints */ .hero-route .rt { stroke-dasharray: 7 6; animation: route-dash 9s linear infinite; } @keyframes route-dash { to { stroke-dashoffset: -130; } } .hero-topo text { font-family: var(--font-mono); letter-spacing: 1px; fill: var(--cnt); stroke: none; } /* HUD readout (top right) */ .hud { position: absolute; right: 22px; top: 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--hud); text-align: right; line-height: 1.9; z-index: 5; pointer-events: none; } .hud .track { color: #FF9E6B; } .hud .dot { display: inline-block; animation: hud-pulse 2.2s ease-in-out infinite; } @keyframes hud-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Hero copy */ .hero-copy { position: absolute; left: 0; bottom: 0; padding: 0 32px 60px 112px; z-index: 5; pointer-events: none; max-width: 800px; } .hero-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; color: #FF9E6B; text-transform: uppercase; margin-bottom: 16px; } .hero-h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(36px, 9vw, 66px); line-height: 0.96; letter-spacing: -1.5px; color: #F8F4EC; text-wrap: balance; margin: 0; } .hero-sub { font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: rgba(245,241,234,0.82); margin-top: 20px; max-width: 560px; } :root[data-theme="light"] .hero-h1 { color: #FFFFFF; text-shadow: 0 2px 24px rgba(31,54,70,0.25); } :root[data-theme="light"] .hero-sub { color: rgba(255,255,255,0.92); text-shadow: 0 1px 12px rgba(31,54,70,0.25); } .hero-cta { display: flex; align-items: center; gap: 14px; margin-top: 30px; pointer-events: auto; /* CTAs stay clickable inside pointer-events:none copy block */ flex-wrap: wrap; } /* Buttons */ .btn { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.3px; padding: 15px 26px; border-radius: 10px; text-decoration: none; display: inline-block; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s ease, border-color .25s ease; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(0.98); } .btn--solid { background: var(--accent); color: #0C1116; } .btn--solid:hover { box-shadow: 0 12px 28px rgba(245,106,52,0.35); } .btn--ghost { background: rgba(245,241,234,0.08); color: #F4F1EA; border: 1px solid rgba(245,241,234,0.25); } .btn--ghost:hover { background: rgba(245,241,234,0.14); border-color: rgba(245,241,234,0.45); } :root[data-theme="light"] .btn--ghost { background: rgba(255,255,255,0.30); color: #1B2530; border-color: rgba(27,37,48,0.35); } :root[data-theme="light"] .btn--ghost:hover { background: rgba(255,255,255,0.5); border-color: rgba(27,37,48,0.55); } .btn--dark { background: #0C1116; color: #F4F1EA; } .btn--dark:hover { box-shadow: 0 12px 28px rgba(12,17,22,0.45); } /* ========================================================================== Trust strip ========================================================================== */ .trust { padding-top: 54px; } .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .trust-card { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-md); padding: 26px 28px; display: flex; gap: 16px; align-items: flex-start; transition: background var(--ease-theme), border-color .3s ease, transform .35s var(--ease-out); } .trust-card:hover { border-color: var(--lnh); transform: translateY(-3px); } .trust-ic { flex-shrink: 0; } .trust-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; } .trust-body { font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; color: var(--in2); margin-top: 6px; } /* ========================================================================== Section headers ========================================================================== */ .sec-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; } .sec-aside { font-family: var(--font-body); font-size: 14px; color: var(--in2); max-width: 380px; text-align: right; } .sec-sub { font-family: var(--font-body); font-size: 15px; color: var(--in2); max-width: 640px; margin-top: 6px; } /* ========================================================================== Image placeholder slots — swap by replacing the slot's children with ========================================================================== */ .img-slot { background: var(--slot); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--in3); overflow: hidden; transition: background var(--ease-theme); flex-shrink: 0; } .img-slot .slot-cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-align: center; padding: 0 12px; } .img-slot svg { opacity: .8; } .img-slot img, .img-slot video { width: 100%; height: 100%; object-fit: cover; } .img-slot--contain img { object-fit: contain; padding: 8px; } /* ========================================================================== Services grid ========================================================================== */ .svc-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .svc-card { background: var(--sf); border: 1px solid var(--ln); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: background var(--ease-theme), border-color .3s ease, transform .35s var(--ease-out), box-shadow .35s var(--ease-out); } .svc-card:hover { border-color: var(--lnh); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.22); } .svc-media { width: 100%; height: 150px; } .svc-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .svc-top { display: flex; justify-content: space-between; align-items: center; } .svc-idx { font-family: var(--font-mono); font-size: 11px; color: var(--in3); } .svc-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; } .svc-desc { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--in2); } .svc-more { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--accent); margin-top: auto; padding-top: 8px; } .svc-more .arr { display: inline-block; transition: transform .3s var(--ease-out); } .svc-card:hover .svc-more .arr { transform: translateX(5px); } /* ========================================================================== About teaser (home) ========================================================================== */ .teaser { background: var(--sf2); border: 1px solid var(--ln); border-radius: var(--r-lg); padding: 40px; display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; transition: background var(--ease-theme); } .teaser .img-slot { width: 300px; height: 340px; border: 1px solid var(--ln); border-radius: 16px; } .teaser-h { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.06; letter-spacing: -0.5px; margin: 12px 0 16px; } .teaser-body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--in2); max-width: 560px; } .link-more { display: inline-block; margin-top: 22px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 3px; text-decoration: none; transition: color .25s ease; } .link-more:hover { color: var(--accent); } /* ========================================================================== Testimonials + client logos ========================================================================== */ .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } .quote-card { background: var(--sf); border: 1px solid var(--ln); border-radius: 16px; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 16px; transition: background var(--ease-theme), border-color .3s ease, transform .35s var(--ease-out); } .quote-card:hover { border-color: var(--lnh); transform: translateY(-3px); } .quote-glyph { font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 0.5; height: 20px; } .quote-text { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink); flex: 1; } .quote-who { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--in3); } .logo-strip { margin-top: 32px; padding-top: 30px; border-top: 1px solid var(--ln); display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .logo-strip-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--in3); flex-shrink: 0; max-width: 160px; line-height: 1.7; } .logo-row { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; } .logo-row .img-slot { width: 128px; height: 50px; border-radius: 8px; } /* ========================================================================== Contact band (constant sunset, both themes, both pages) ========================================================================== */ .contact-band { background: radial-gradient(120% 200% at 90% 0%, #F56A34 0%, #C2401E 18%, #2A2330 48%, #11181F 100%); border-radius: var(--r-xl); padding: 60px 52px; position: relative; overflow: hidden; } .contact-topo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.12; } .contact-inner { position: relative; z-index: 2; max-width: 680px; } .contact-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; color: #FFD9C2; text-transform: uppercase; } .contact-h { font-family: var(--font-display); font-weight: 900; font-size: 42px; line-height: 1.02; letter-spacing: -1px; margin: 14px 0 18px; color: #F8F4EC; } .contact-body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: rgba(248,244,236,0.82); } .contact-cta { display: flex; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; } .contact-detail { font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px; color: #F8F4EC; } .contact-detail a { color: inherit; text-decoration: none; } .contact-detail a:hover { text-decoration: underline; } /* ========================================================================== Footer ========================================================================== */ .footer { margin-top: 54px; padding-top: 24px; padding-bottom: 56px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; } .footer-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); } .footer-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--in3); } .footer-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--accent); text-decoration: none; } .footer-link:hover { text-decoration: underline; } /* ========================================================================== About page ========================================================================== */ .about-hero { position: relative; overflow: hidden; background: var(--hbg-about); transition: background var(--ease-theme); } .about-hero .hero-topo { opacity: 0.14; } .about-hero .hero-topo path { stroke: #9FD8FF; } :root[data-theme="light"] .about-hero .hero-topo path { stroke: #2E7AA0; } .about-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, var(--bg) 0%, rgba(12,17,22,0.4) 40%, rgba(12,17,22,0) 64%); transition: background var(--ease-theme); z-index: 3; } :root[data-theme="light"] .about-scrim { background: linear-gradient(100deg, var(--bg) 0%, rgba(236,229,215,0.4) 40%, rgba(236,229,215,0) 64%); } .about-hero-inner { position: relative; z-index: 4; max-width: 1180px; margin: 0 auto; padding: 78px 32px 84px; display: grid; grid-template-columns: 1.25fr 0.95fr; gap: 54px; align-items: center; } .about-h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 7vw, 52px); line-height: 1.0; letter-spacing: -1px; margin-top: 18px; color: var(--ink); text-wrap: balance; } .about-intro { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--in2); margin-top: 20px; max-width: 520px; } .about-callsign { display: flex; align-items: center; gap: 18px; margin-top: 26px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--in3); } .about-callsign .pip { color: var(--accent); } .portrait-wrap { justify-self: center; position: relative; } .portrait-wrap .img-slot { width: 360px; height: 450px; border: 1px solid var(--ln); border-radius: 18px; } .portrait-tab { position: absolute; left: -14px; bottom: 22px; background: var(--accent); color: #0C1116; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; padding: 8px 14px; border-radius: 8px; } /* Why I fly */ .why-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 50px; align-items: center; } .why-grid .img-slot { width: 100%; height: 360px; border: 1px solid var(--ln); border-radius: 16px; } .why-h { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -0.5px; margin: 12px 0 18px; } .prose { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--in2); } .prose + .prose { margin-top: 16px; } /* The honest part */ .story-panel { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-lg); padding: 48px 52px; transition: background var(--ease-theme); } .story-h { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -0.4px; margin: 12px 0 18px; } .story-panel .prose { font-size: 17px; line-height: 1.75; max-width: 760px; } /* Gear */ .gear-panel { background: var(--sf2); border: 1px solid var(--ln); border-radius: var(--r-lg); padding: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-top: 24px; transition: background var(--ease-theme); } .gear-fig { display: flex; align-items: center; justify-content: center; color: var(--ink); } .spec-list { display: flex; flex-direction: column; gap: 2px; } .spec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--ln); } .spec-row:last-child { border-bottom: none; } .spec-key { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--in3); } .spec-val { font-family: var(--font-display); font-weight: 700; font-size: 18px; text-align: right; } .spec-val--accent { color: var(--accent); } /* ========================================================================== Service detail pages ========================================================================== */ .svc-hero { position: relative; overflow: hidden; background: var(--bg); transition: background var(--ease-theme); } .svc-hero::before { /* service-accent glow in place of the sunset radial; fades to page bg */ content: ""; position: absolute; inset: 0; background: radial-gradient(95% 130% at 82% -14%, var(--svc) 0%, transparent 62%); opacity: 0.34; pointer-events: none; } :root[data-theme="light"] .svc-hero::before { opacity: 0.26; } .svc-hero-inner { position: relative; z-index: 4; max-width: 1180px; margin: 0 auto; padding: 64px 32px 70px; } .crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--in3); text-decoration: none; } .crumb:hover { color: var(--ink); } .svc-hero-badge { width: 62px; height: 62px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--svc); background: color-mix(in srgb, var(--svc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--svc) 32%, transparent); margin: 26px 0 18px; } .svc-h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 6vw, 54px); line-height: 1.0; letter-spacing: -1px; margin: 14px 0 0; color: var(--ink); text-wrap: balance; max-width: 760px; } .svc-lede { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--in2); margin-top: 18px; max-width: 600px; } .svc-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--in3); } .svc-meta .pip { color: var(--svc); } /* description + deliverables */ .svc-detail { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: start; } .deliver-panel { background: var(--sf2); border: 1px solid var(--ln); border-radius: var(--r-lg); padding: 14px 30px; transition: background var(--ease-theme); } /* video montage slot */ .video-slot { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--slot); border: 1px solid var(--ln); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--in3); margin-top: 26px; transition: background var(--ease-theme); } .video-slot .play { width: 64px; height: 64px; border-radius: 50%; background: var(--svc); color: #0C1116; display: flex; align-items: center; justify-content: center; transition: transform .3s var(--ease-out); } .video-slot:hover .play { transform: scale(1.08); } .video-slot .slot-cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-align: center; padding: 0 16px; } .video-slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* reference shots */ .shots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; } .shots-grid .img-slot { height: 220px; border: 1px solid var(--ln); border-radius: 16px; } /* pricing */ .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; } .price-card { position: relative; background: var(--sf); border: 1px solid var(--ln); border-radius: 16px; padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 14px; transition: background var(--ease-theme), border-color .3s ease, transform .35s var(--ease-out), box-shadow .35s var(--ease-out); } .price-card:hover { border-color: var(--lnh); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.22); } .price-card--hot { border-color: color-mix(in srgb, var(--svc) 55%, transparent); } .price-card--hot:hover { border-color: var(--svc); } .price-flag { position: absolute; top: -11px; left: 24px; background: var(--svc); color: #0C1116; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; padding: 4px 10px; border-radius: 6px; } .price-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; } .price-amt { font-family: var(--font-display); font-weight: 800; font-size: 36px; letter-spacing: -0.5px; line-height: 1; } .price-amt .price-from { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 2px; color: var(--in3); margin-bottom: 7px; } .price-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; } .price-list li { position: relative; padding-left: 18px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--in2); } .price-list li::before { content: "+"; position: absolute; left: 0; font-family: var(--font-mono); color: var(--svc); } .price-book { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--svc); text-decoration: none; padding-top: 6px; } .price-book .arr { display: inline-block; transition: transform .3s var(--ease-out); } .price-book:hover .arr { transform: translateX(5px); } .price-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; line-height: 1.8; color: var(--in3); margin-top: 22px; max-width: 640px; } /* how a flight goes */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; } .step-card { background: var(--sf2); border: 1px solid var(--ln); border-radius: 16px; padding: 26px 28px; transition: background var(--ease-theme); } .step-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--svc); } .step-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; margin: 10px 0 8px; } .step-body { font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; color: var(--in2); } /* cross-links to the other services */ .also-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; } .also-card { display: flex; align-items: center; gap: 14px; background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-md); padding: 18px 20px; text-decoration: none; color: inherit; transition: background var(--ease-theme), border-color .3s ease, transform .35s var(--ease-out); } .also-card:hover { border-color: var(--lnh); transform: translateY(-3px); } .also-name { font-family: var(--font-display); font-weight: 800; font-size: 15px; } .also-idx { font-family: var(--font-mono); font-size: 11px; color: var(--in3); margin-left: auto; } @media (max-width: 1024px) { .shots-grid { grid-template-columns: repeat(2, 1fr); } .shots-grid .img-slot:last-child { grid-column: span 2; } } @media (max-width: 960px) { .svc-detail { grid-template-columns: 1fr; gap: 30px; } .price-grid { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr; } .also-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .shots-grid { grid-template-columns: 1fr; } .shots-grid .img-slot:last-child { grid-column: auto; } .svc-hero-inner { padding: 48px 32px 56px; } } /* ========================================================================== Scroll-reveal choreography (JS adds html.js; .in = revealed) ========================================================================== */ html.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0s); } html.js .rv.in { opacity: 1; transform: none; } /* ========================================================================== Responsive ========================================================================== */ /* Hide the left elevation rail once the side gutter is too narrow to hold it clear of the centered content column (prevents label/text overlap). */ @media (max-width: 1279px) { .elev-rail { display: none; } } @media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 960px) { .about-hero-inner { grid-template-columns: 1fr; gap: 40px; } .portrait-wrap { justify-self: start; } .portrait-wrap .img-slot { width: min(360px, 100%); } .why-grid { grid-template-columns: 1fr; gap: 28px; } .trust-grid { grid-template-columns: 1fr; } .quote-grid { grid-template-columns: 1fr; } .gear-panel { grid-template-columns: 1fr; padding: 32px; } .spec-val { font-size: 16px; } .elev-rail { display: none; } .hero-copy { padding-left: 32px; } } @media (max-width: 860px) { .teaser { grid-template-columns: 1fr; padding: 28px; } .teaser .img-slot { width: 100%; max-width: 340px; } .sec-aside { text-align: left; } .story-panel { padding: 32px 28px; } .contact-band { padding: 44px 30px; } .contact-h { font-size: 34px; } } @media (max-width: 760px) { .burger { display: flex; } .nav-menu { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--navbg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--ln); padding: 8px 32px 20px; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s; } .nav.open .nav-menu { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); } .nav-menu .nav-link { display: block; padding: 13px 0; border-bottom: 1px solid var(--ln); } .nav-menu .nav-link:last-child { border-bottom: none; } .hero { height: 560px; } .hero-copy { padding: 0 24px 48px 24px; } .hud { right: 16px; top: 14px; } .svc-grid { grid-template-columns: 1fr; } .section, .section--lg { padding-top: 56px; } .about-hero-inner { padding: 56px 32px 64px; } } /* ========================================================================== Reduced motion — calm everything down gracefully ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .rv { opacity: 1; transform: none; transition: none; } .hud .dot { animation: none; } .drift, .hero-route .rt { animation: none; } .btn, .svc-card, .trust-card, .quote-card { transition: background var(--ease-theme); } .btn:hover, .svc-card:hover, .trust-card:hover, .quote-card:hover { transform: none; box-shadow: none; } .svc-card:hover .svc-more .arr { transform: none; } .plx { transform: none !important; } }