/* ============================================================ AILERON SHIFT — "Approach Plate" homepage (WordPress port) Scoped: every selector lives under .as-home so nothing leaks into the Beaver Builder theme or any other page. html/body hooks use the as-home-html / as-home-page classes added by functions.php filters, gated on the Aileron templates. Generated from redesign/final/styles.css — edit both or regenerate when the design changes. ============================================================ */ html.as-home-html, body.as-home-page, .as-home { --night: #06070d; --panel: #0b0d16; --bone: #f3efe6; --bone-dim: rgba(243, 239, 230, 0.55); --bone-faint: rgba(243, 239, 230, 0.16); --route: #f02070; /* route deepened for solid fills behind white text — 4.95:1 (WCAG AA); hover shade 5.87:1. #f02070 itself is only 4.08:1 against #fff. */ --route-cta: #d81b60; --route-cta-hover: #c2185b; --display: "Space Grotesk", "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; --content: 1400px; /* left position of the dashed route spine */ --spine-x: clamp(1.9rem, 4.4vw, 4.4rem); } .as-home, .as-home *, .as-home *::before, .as-home *::after { margin: 0; padding: 0; box-sizing: border-box; } /* overflow-x lives on , NEVER on — body overflow makes body the scroll container, scroll events stop reaching window, and the whole case-study engine dies (learned the hard way; see HOMEPAGE.md §6) */ html.as-home-html { scroll-behavior: smooth; overflow-x: hidden; } body.as-home-page { background: var(--night); color: var(--bone); font-family: var(--display); font-weight: 400; font-size: 1.05rem; line-height: 1.6; } .as-home ::selection { background: var(--route); color: #fff; } /* screen-reader-only text — visually hidden, still announced */ .as-home .as-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .as-home .wrap { max-width: var(--content); margin-inline: auto; padding-inline: clamp(1.5rem, 4vw, 4rem); } /* chart label — the connective tissue of the whole system */ .as-home .chart { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); } .as-home .chart .r, .as-home .r { color: var(--route); } @media (max-width: 720px) { .hide-s { display: none; } } /* ---------- asset error banner (no silent failures) ---------- */ .as-home .asset-error { position: fixed; bottom: 0; left: 0; right: 0; z-index: 300; background: #7a1010; color: #fff; font-family: monospace; font-size: 0.85rem; padding: 0.75rem 1.25rem; white-space: pre-wrap; } /* ============================================================ HERO — plotted route over the drifting night city ============================================================ */ .as-home .hero { position: relative; min-height: 92vh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; } .as-home .hero-bg { position: absolute; inset: 0; } .as-home .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.75) saturate(0.9); } .as-home .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,7,13,0.6) 0%, rgba(6,7,13,0.3) 45%, rgba(6,7,13,0.88) 92%, var(--night) 100%); } .as-home .hero-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } /* the route draws itself on load — a solid reveal stroke inside a mask sweeps along the path, so the dashed pattern is preserved throughout */ .as-home .as-routeReveal { stroke-dasharray: 1800; stroke-dashoffset: 1800; animation: route-draw 2.6s ease-out 0.4s forwards; } @keyframes route-draw { to { stroke-dashoffset: 0; } } /* waypoints + labels ping in as the route reaches them */ .as-home .wp, .as-home .wp-lbl { opacity: 0; animation: wp-ping 0.5s ease-out both; } .as-home .wp-1 { animation-delay: 1.0s; } .as-home .wp-2 { animation-delay: 1.7s; } .as-home .wp-3 { animation-delay: 2.5s; } @keyframes wp-ping { 0% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 1; } } .as-home .wp-labels text, .as-home .wp-alts text { font-family: var(--mono); } /* dark halo behind the waypoint labels so the bone text always reads against #06070d (≈17:1) no matter what the city footage is doing */ .as-home .hero-svg text { paint-order: stroke; stroke: #06070d; /* solid, not 0.9 alpha — halo contrast holds even over a white frame */ stroke-width: 4px; stroke-linejoin: round; } .as-home .hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: 6vh; } .as-home .hero-bar { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--bone-faint); margin-bottom: 2.4rem; flex-wrap: wrap; } .as-home .hero-title { font-weight: 700; text-transform: uppercase; font-size: min(8.6vw, 122px); line-height: 0.96; letter-spacing: -0.03em; max-width: 12ch; } .as-home .hero-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; margin-top: 2.2rem; } .as-home .hero-lede { font-family: var(--mono); font-weight: 400; font-size: clamp(0.85rem, 1.3vw, 1.05rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); min-height: 1.6em; } .as-home .caret { display: inline-block; width: 0.55em; height: 2px; background: var(--route); margin-left: 4px; vertical-align: 0.1em; animation: caret-blink 1s steps(1) infinite; } @keyframes caret-blink { 50% { opacity: 0; } } /* blinking must stop once typing lands (WCAG 2.2.2 — blinking > 5s) */ .as-home .caret.is-done { display: none; } /* pause/resume control for autoplaying footage (WCAG 2.2.2). Visually hidden by request, but kept in the DOM and operable by keyboard / screen readers so the pause mechanism still exists. It reappears (styled) whenever it receives keyboard focus. */ .as-home .media-toggle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .as-home .media-toggle:focus, .as-home .media-toggle:focus-visible { z-index: 5; top: 1rem; right: 1rem; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); /* fully opaque — contrast is then provable regardless of the footage behind it (bone on night ≈ 16.9:1), so scanners can verify it */ background: var(--panel); border: 1px solid var(--bone); padding: 0.5rem 0.9rem; cursor: pointer; border-radius: 0; box-shadow: none; outline: 2px solid var(--route); outline-offset: 3px; } /* ============================================================ THE ROUTE SPINE — dashed line joining every leg ============================================================ */ .as-home .legs { position: relative; } .as-home .legs::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--spine-x); border-left: 1px dashed rgba(240, 32, 112, 0.5); } .as-home .leg { position: relative; } .as-home .leg-pad { padding-top: clamp(3.5rem, 9vh, 6.5rem); padding-bottom: clamp(3.5rem, 9vh, 6.5rem); padding-left: clamp(3.4rem, 7.5vw, 7.5rem); } /* waypoint diamond at each leg */ .as-home .leg-tag { display: block; margin-bottom: 1.6rem; position: relative; } .as-home .leg-tag::before { content: ""; position: absolute; top: 0.1em; left: calc(-1 * clamp(3.4rem, 7.5vw, 7.5rem) + var(--spine-x) - clamp(1.5rem, 4vw, 4rem) - 6px); width: 12px; height: 12px; background: var(--night); border: 2px solid var(--route); transform: rotate(45deg); } .as-home .sec-title { font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem, 4.4vw, 4.2rem); line-height: 0.98; letter-spacing: -0.025em; margin-bottom: clamp(1.6rem, 4vh, 2.8rem); } /* ============================================================ LEG 01 — SCAN ============================================================ */ .as-home .scan-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 4rem); align-items: end; } .as-home .scan-title { font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem, 4.4vw, 4.2rem); line-height: 0.98; letter-spacing: -0.025em; margin-bottom: 1.2rem; max-width: 16ch; } .as-home .scan-lede { color: var(--bone-dim); max-width: 46ch; } .as-home .scan-panel { border: 1px solid var(--bone-faint); background: var(--panel); padding: clamp(1.4rem, 2.4vw, 2rem); } .as-home .scan-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .as-home .scan-row { display: flex; border-bottom: 1px solid var(--bone-dim); transition: border-color 0.25s ease; } .as-home .scan-row:focus-within { border-color: var(--route); } .as-home .scan-input { flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none; font-family: var(--mono); font-size: 1rem; color: var(--bone); padding: 0.9rem 0.2rem; } .as-home .scan-input::placeholder { color: var(--bone-faint); } /* ACCENT — the scan CTA */ .as-home .scan-btn { flex: none; border: none; background: var(--route-cta); color: #fff; font-family: var(--display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0 1.6rem; transition: background-color 0.2s ease, transform 0.2s ease; } /* hover darkens instead of dropping opacity — translucency would blend the white label toward the panel and erode its contrast below 4.5:1 */ .as-home .scan-btn:hover, .as-home .scan-btn:focus-visible { background: var(--route-cta-hover); } .as-home .scan-btn:active { transform: translateY(1px); } .as-home .scan-note { margin-top: 0.8rem; font-size: 0.86rem; color: var(--bone-dim); } .as-home .scan-note.is-error { color: #ff8ba7; } @media (max-width: 620px) { .as-home .scan-row { flex-direction: column; } .as-home .scan-btn { width: 100%; padding: 1rem; } } /* ============================================================ LEGS 02–07 — CASE STUDIES (scroll-scrubbed destinations) Per band: themed clip scrubs with scroll inside the shot frame, then dissolves into the client's live screenshot; stats slam in one per scroll step and latch. ============================================================ */ .as-home .impact { position: relative; height: 1200vh; /* JS keeps this at slides × 200vh */ } .as-home .impact-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } .as-home .impact-head { width: 100%; display: flex; justify-content: space-between; gap: 2rem; padding-top: clamp(1.6rem, 4vh, 3rem); padding-left: calc(clamp(1.5rem, 4vw, 4rem) + clamp(1.9rem, 3.5vw, 3.5rem)); position: relative; z-index: 4; } .as-home .impact-slides { position: absolute; inset: 0; } .as-home .impact-slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.7s ease, visibility 0s linear 0.7s; } .as-home .impact-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.7s ease; } .as-home .dest { width: 100%; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: center; padding-left: calc(clamp(1.5rem, 4vw, 4rem) + clamp(1.9rem, 3.5vw, 3.5rem)); } .as-home .dest-client { font-weight: 700; text-transform: uppercase; font-size: clamp(1.7rem, 3vw, 2.9rem); letter-spacing: -0.02em; line-height: 1; margin-bottom: clamp(1.2rem, 3vh, 2rem); } /* stats slam in one per scroll step, then latch */ .as-home .impact-stats { position: relative; max-width: 640px; } .as-home .impact-slam { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: clamp(0.55rem, 1.6vh, 1.2rem); opacity: 0; transform: translateX(-42px) scale(1.04); filter: blur(6px); pointer-events: none; } .as-home .impact-slam.is-in { animation: statslam 0.5s cubic-bezier(0.16, 1.2, 0.3, 1) forwards; } @keyframes statslam { 0% { opacity: 0; transform: translateX(-42px) scale(1.04); filter: blur(6px); } 100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } } .as-home .impact-slam-num { font-family: var(--mono); font-weight: 700; font-size: clamp(1.5rem, 4.6vh, 3.3rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--bone); } .as-home .impact-slam-num.r { color: var(--route); } .as-home .impact-slam-sub { font-family: var(--display); font-weight: 400; font-size: clamp(0.9rem, 1.8vh, 1.2rem); line-height: 1.25; color: var(--bone-dim); margin-top: 0.3rem; max-width: 34ch; } .as-home .impact-stats.is-shaking { animation: statshake 0.3s linear; } @keyframes statshake { 0% { transform: translate(0, 0); } 20% { transform: translate(-6px, 4px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0, 0); } } /* the shot frame — clip scrubs above the screenshot, then dissolves */ .as-home .dest-shot { position: relative; overflow: hidden; border: 1px solid var(--bone-faint); aspect-ratio: 16 / 10; max-height: 62vh; background: var(--panel); } .as-home .impact-bg { position: absolute; inset: -6%; background-size: cover; background-position: center top; filter: saturate(0.85) contrast(1.02); transform: scale(1.06); will-change: transform; } .as-home .impact-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: opacity; } .as-home .shot-tag { position: absolute; left: 1rem; bottom: 0.9rem; z-index: 2; background: rgba(6, 7, 13, 0.8); padding: 0.45rem 0.8rem; opacity: 0; transition: opacity 0.5s ease; } .as-home .impact-slide.is-arrived .shot-tag { opacity: 1; } /* waypoint progress dots */ .as-home .impact-controls { position: relative; z-index: 3; width: 100%; display: flex; align-items: center; gap: 1.4rem; padding-bottom: clamp(1.4rem, 4vh, 2.6rem); padding-left: calc(clamp(1.5rem, 4vw, 4rem) + clamp(1.9rem, 3.5vw, 3.5rem)); margin-top: auto; } .as-home .impact-arrow { background: transparent; border: 1px solid var(--bone-faint); color: var(--bone); font-family: var(--mono); font-size: 1rem; line-height: 1; width: 46px; height: 46px; transition: border-color 0.25s ease, background 0.25s ease; } .as-home .impact-arrow:hover, .as-home .impact-arrow:focus-visible { border-color: var(--route); background: rgba(240,32,112,0.08); } .as-home .impact-dots { display: flex; gap: 1rem; } .as-home .impact-dot { width: 10px; height: 10px; border: 1px solid var(--bone-dim); background: transparent; padding: 0; transform: rotate(45deg); transition: background 0.25s ease, border-color 0.25s ease, scale 0.25s ease; } .as-home .impact-dot[aria-selected="true"] { background: var(--route); border-color: var(--route); scale: 1.25; } /* ============================================================ LEG 08 — SERVICES ============================================================ */ .as-home .svc-list { border-top: 1px solid var(--bone-faint); } .as-home .svc { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(1rem, 3vw, 3rem); padding: clamp(1.6rem, 3.5vh, 2.4rem) 0; border-bottom: 1px solid var(--bone-faint); align-items: baseline; transition: background 0.3s ease, padding-left 0.3s ease; } .as-home .svc:hover { background: rgba(243, 239, 230, 0.03); padding-left: 1rem; } .as-home .svc-name { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2.3rem); line-height: 1.05; letter-spacing: -0.015em; display: flex; gap: 1.2rem; align-items: baseline; } .as-home .svc-ix { font-size: 0.72rem; } .as-home .svc-desc { font-weight: 400; font-size: clamp(0.98rem, 1.3vw, 1.12rem); color: var(--bone-dim); max-width: 58ch; } /* ============================================================ LEG 09 — THE PEOPLE ============================================================ */ .as-home .people-frame { position: relative; overflow: hidden; border: 1px solid var(--bone-faint); min-height: 68vh; display: flex; align-items: flex-end; } .as-home .people-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .as-home .people-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,7,13,0.9) 0%, rgba(6,7,13,0.25) 55%, rgba(6,7,13,0.4) 100%); } .as-home .people-copy { position: relative; z-index: 2; padding: clamp(1.8rem, 4vw, 3.5rem); max-width: 820px; } .as-home .people-body { font-weight: 400; font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--bone); max-width: 58ch; } /* ============================================================ LEG 10 — WORD OF MOUTH ============================================================ */ .as-home .quote { max-width: 56rem; margin-bottom: clamp(3rem, 8vh, 6rem); } .as-home .quote-text { font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 2.1rem); line-height: 1.45; color: var(--bone); } .as-home .quote-attr { display: block; margin-top: 1.6rem; } .as-home .quote--metric { margin-bottom: 0; } .as-home .quote-metric { font-family: var(--mono); font-weight: 700; font-size: min(22vw, 300px); line-height: 0.85; letter-spacing: -0.05em; color: var(--route); font-variant-numeric: tabular-nums; } .as-home .quote-metric small { font-size: 0.3em; vertical-align: 1em; letter-spacing: 0; } /* ============================================================ FINAL — CLOSING CTA ============================================================ */ .as-home .leg--close .leg-pad { padding-bottom: clamp(5rem, 12vh, 9rem); } .as-home .close-title { font-weight: 700; text-transform: uppercase; font-size: min(7.8vw, 104px); line-height: 0.96; letter-spacing: -0.03em; max-width: 14ch; } /* ACCENT — the email link */ .as-home .close-mail { display: inline-block; margin-top: 2.6rem; font-family: var(--mono); font-size: clamp(1.05rem, 1.9vw, 1.6rem); color: var(--bone); text-decoration: none; border-bottom: 2px solid var(--route); padding-bottom: 0.25em; transition: color 0.25s ease; } .as-home .close-mail:hover, .as-home .close-mail:focus-visible { color: var(--route); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 920px) { .as-home .scan-grid, .as-home .dest, .as-home .svc { grid-template-columns: 1fr; } .as-home .dest { gap: 1.2rem; align-content: center; } .as-home .dest-shot { aspect-ratio: 16 / 9; max-height: 38vh; } .as-home .impact-slam-num { font-size: clamp(1.3rem, 3.4vh, 2.2rem); } .as-home .legs::before { left: 1.1rem; } .as-home .leg-pad { padding-left: 2.6rem; } .as-home .leg-tag::before { left: calc(-2.6rem + 1.1rem - clamp(1.5rem, 4vw, 4rem) - 6px); } } /* On phones the section rhythm (leg-pad top + bottom) stacks into ~150px of empty band between every leg — dead space that just pushes content down. Tighten the vertical padding so sections breathe without wasting a screen of scroll; the closing CTA keeps a little extra room at the bottom of the page. */ @media (max-width: 720px) { .as-home .leg-pad { padding-top: clamp(2.2rem, 5.5vh, 3.4rem); padding-bottom: clamp(2.2rem, 5.5vh, 3.4rem); } .as-home .leg--close .leg-pad { padding-bottom: clamp(3rem, 8vh, 4.5rem); } } /* ============================================================ REDUCED MOTION — animations off, content intact ============================================================ */ @media (prefers-reduced-motion: reduce) { html.as-home-html { scroll-behavior: auto; } .as-home .caret { animation: none; } .as-home .as-routeReveal { animation: none; stroke-dashoffset: 0; } .as-home .wp, .as-home .wp-lbl { animation: none; opacity: 1; } .as-home .hero-video { display: none; } .as-home .media-toggle { display: none; } /* nothing plays, nothing to pause */ .as-home .impact-slide { transition: none; } .as-home .impact-video { display: none; } .as-home .impact-slide .shot-tag { opacity: 1; } .as-home .impact-stats { min-height: 0 !important; } .as-home .impact-slam { position: static; opacity: 1; transform: none; filter: none; animation: none; } .as-home .impact-slam + .impact-slam { margin-top: 0.4em; } .as-home .people-video { display: none; } } /* ============================================================ INNER PAGES — shared page scaffold ============================================================ */ .as-home .page-hero { position: relative; padding: clamp(4rem, 10vh, 7rem) 0 clamp(2.5rem, 6vh, 4rem); border-bottom: 1px solid var(--bone-faint); } .as-home .page-hero .chart { display: block; margin-bottom: 1.4rem; } .as-home .page-title { font-weight: 700; text-transform: uppercase; font-size: min(8vw, 104px); line-height: 0.96; letter-spacing: -0.03em; max-width: 14ch; } .as-home .page-lede { margin-top: 1.8rem; color: var(--bone-dim); max-width: 52ch; font-size: clamp(1rem, 1.5vw, 1.25rem); } /* services page — expanded discipline rows */ .as-home .disc { display: grid; grid-template-columns: minmax(4rem, 8rem) 1fr 1.1fr; gap: clamp(1.2rem, 3vw, 3rem); padding: clamp(2rem, 5vh, 3.4rem) 0; border-bottom: 1px solid var(--bone-faint); align-items: start; } .as-home .disc-ix { font-family: var(--mono); font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--route); } .as-home .disc-name { font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1; letter-spacing: -0.02em; } .as-home .disc-desc { color: var(--bone-dim); max-width: 56ch; } .as-home .disc-desc .r { color: var(--route); } @media (max-width: 880px) { .disc { grid-template-columns: 1fr; gap: 0.8rem; } } /* work index page — destination cards */ .as-home .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(2.5rem, 6vh, 4rem) 0; } .as-home .dcard { border: 1px solid var(--bone-faint); background: var(--panel); display: flex; flex-direction: column; text-decoration: none; color: var(--bone); transition: border-color 0.3s ease, transform 0.3s ease; } .as-home .dcard:hover { border-color: var(--route); transform: translateY(-4px); } .as-home .dcard-shot { position: relative; aspect-ratio: 16/9; overflow: hidden; border-bottom: 1px solid var(--bone-faint); } .as-home .dcard-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(0.85) brightness(0.85); transition: filter 0.4s ease, transform 0.4s ease; } .as-home .dcard:hover .dcard-shot img { filter: saturate(1) brightness(0.95); transform: scale(1.03); } .as-home .dcard-body { padding: clamp(1.2rem, 2.2vw, 1.8rem); display: flex; flex-direction: column; gap: 0.9rem; flex: 1; } .as-home .dcard-client { font-weight: 700; text-transform: uppercase; font-size: clamp(1.2rem, 2vw, 1.7rem); letter-spacing: -0.015em; line-height: 1.05; } .as-home .dcard-stat { margin-top: auto; display: flex; align-items: baseline; gap: 0.9rem; } .as-home .dcard-stat b { font-family: var(--mono); font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.4rem); letter-spacing: -0.03em; color: var(--route); font-variant-numeric: tabular-nums; } .as-home .dcard-stat span { color: var(--bone-dim); font-size: 0.9rem; } @media (max-width: 880px) { .card-grid { grid-template-columns: 1fr; } } /* contact page */ .as-home .contact-coords { display: flex; gap: clamp(2rem, 6vw, 6rem); flex-wrap: wrap; padding: clamp(2.5rem, 6vh, 4rem) 0; } .as-home .contact-block .chart { display: block; margin-bottom: 0.8rem; } .as-home .contact-line { font-family: var(--mono); font-size: clamp(1rem, 1.6vw, 1.3rem); color: var(--bone); } .as-home a.contact-line { text-decoration: none; border-bottom: 1px solid var(--route); padding-bottom: 0.15em; } .as-home a.contact-line:hover { color: var(--route); } /* ============================================================ WP THEME INTEROP — bb-theme sets explicit colors/fonts on headings, dt and form fields, which BEATS the color that our headings inherit from body. Inheritance is not enough inside WordPress: every display element states its color explicitly. ============================================================ */ .as-home h1, .as-home h2, .as-home h3, .as-home h4, .as-home h5, .as-home h6, .as-home dt, .as-home dd, .as-home figure, .as-home blockquote { color: var(--bone); font-family: var(--display); margin: 0; padding: 0; } .as-home .hero-title, .as-home .scan-title, .as-home .sec-title, .as-home .dest-client, .as-home .close-title, .as-home .page-title, .as-home .disc-name, .as-home .dcard-client, .as-home .svc-name { color: var(--bone); font-family: var(--display); } /* the route accent must survive any heading color above */ .as-home .r, .as-home .chart .r, .as-home h1 .r, .as-home h2 .r, .as-home h3 .r { color: var(--route); } /* theme link colors must not leak into component links */ .as-home a.dcard, .as-home a.dcard:hover { color: var(--bone); text-decoration: none; box-shadow: none; } .as-home a.close-mail, .as-home a.contact-line { text-decoration: none; box-shadow: none; } /* theme form resets — keep our transparent field */ .as-home .scan-input, .as-home .scan-input:focus { background: transparent; border: none; outline: none; box-shadow: none; color: var(--bone); } .as-home .scan-btn, .as-home .scan-btn:hover, .as-home .scan-btn:focus { background: var(--route-cta); color: #fff; border: none; border-radius: 0; box-shadow: none; } /* restated after the theme reset so the darker hover shade wins the cascade */ .as-home .scan-btn:hover, .as-home .scan-btn:focus-visible { background: var(--route-cta-hover); } .as-home .impact-arrow, .as-home .impact-dot { border-radius: 0; box-shadow: none; } .as-home .impact-arrow { background: transparent; } /* bb-theme paints .fl-page / .fl-page-content white OVER the body background — the night field must be restated on the wrappers. The Themer header/footer layouts paint their own backgrounds and are unaffected. */ body.as-home-page, body.as-home-page .fl-page, body.as-home-page .fl-page-content { background: #06070d; } /* ============================================================ HOSTING — "flight plans" (pricing), telemetry band, checklists and mission reports ============================================================ */ .as-home .stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bone-faint); border: 1px solid var(--bone-faint); } .as-home .stat-band-cell { background: var(--panel); padding: clamp(1.4rem, 3vh, 2.2rem) clamp(1rem, 2vw, 1.8rem); } .as-home .stat-band-cell b { display: block; font-family: var(--mono); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 3rem); letter-spacing: -0.03em; line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; } .as-home .stat-band-cell b.r { color: var(--route); } .as-home .stat-band-cell span { display: block; margin-top: 0.55rem; color: var(--bone-dim); font-size: 0.85rem; line-height: 1.4; } .as-home .plan-class { margin-top: clamp(2.5rem, 6vh, 4rem); } .as-home .plan-class-head { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; border-bottom: 1px solid var(--bone-faint); padding-bottom: 1rem; margin-bottom: 1.8rem; flex-wrap: wrap; } .as-home .plan-class-name { font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -0.02em; line-height: 1; color: var(--bone); font-family: var(--display); } .as-home .plan-class-note { color: var(--bone-dim); font-size: 0.95rem; max-width: 52ch; } .as-home .check-list { columns: 2; column-gap: clamp(2rem, 4vw, 4rem); margin: 0 0 2rem; padding: 0; list-style: none; } .as-home .check-list li { break-inside: avoid; position: relative; padding: 0.45rem 0 0.45rem 1.6rem; color: var(--bone-dim); font-size: 0.98rem; } .as-home .check-list li::before { content: ""; position: absolute; left: 0.2rem; top: 0.95em; width: 7px; height: 7px; background: var(--route); transform: rotate(45deg); } .as-home .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); } .as-home .plan { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--bone-faint); padding: clamp(1.4rem, 2.4vw, 2rem); transition: border-color 0.3s ease, transform 0.3s ease; } .as-home .plan:hover { border-color: var(--route); transform: translateY(-4px); } .as-home .plan.is-hot { border-color: var(--route); } .as-home .plan-tag { position: absolute; top: -0.75em; left: 1.2rem; background: var(--route); color: #fff; font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.35em 0.8em; } .as-home .plan-name { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 1.1rem; } .as-home .plan-price { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 1.4rem; color: var(--bone); } .as-home .plan-price b { font-family: var(--mono); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.04em; line-height: 0.9; font-variant-numeric: tabular-nums; } .as-home .plan-price .cur { font-family: var(--mono); font-size: 1.1rem; color: var(--bone-dim); } .as-home .plan-price .per { font-family: var(--mono); font-size: 0.8rem; color: var(--bone-dim); letter-spacing: 0.08em; } .as-home .plan-specs { margin: 0 0 1.6rem; padding: 0; list-style: none; border-top: 1px solid var(--bone-faint); } .as-home .plan-specs li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px solid var(--bone-faint); font-size: 0.85rem; color: var(--bone-dim); } .as-home .plan-specs li b { font-family: var(--mono); font-weight: 500; color: var(--bone); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .as-home .plan-cta { margin-top: auto; display: block; text-align: center; font-family: var(--display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone); text-decoration: none; border: 1px solid var(--bone-dim); padding: 0.9em 1em; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .as-home .plan-cta:hover, .as-home .plan-cta:focus-visible { border-color: var(--route); color: var(--route); } .as-home .plan.is-hot .plan-cta { background: var(--route); border-color: var(--route); color: #fff; } .as-home .plan.is-hot .plan-cta:hover { opacity: 0.9; color: #fff; } .as-home .mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); } .as-home .mission-card { border: 1px solid var(--bone-faint); background: var(--panel); display: flex; flex-direction: column; } .as-home .mission-shot { position: relative; aspect-ratio: 16/8; overflow: hidden; border-bottom: 1px solid var(--bone-faint); } .as-home .mission-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(0.85) brightness(0.85); } .as-home .mission-body { padding: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: 1rem; flex: 1; } .as-home .mission-title { font-weight: 700; text-transform: uppercase; font-size: clamp(1.2rem, 2vw, 1.7rem); letter-spacing: -0.015em; line-height: 1.1; color: var(--bone); font-family: var(--display); } .as-home .mission-copy { color: var(--bone-dim); font-size: 0.95rem; } .as-home .mission-stats { display: flex; flex-wrap: wrap; gap: 1.6rem 2.2rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--bone-faint); } .as-home .mission-stats b { display: block; font-family: var(--mono); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.9rem); letter-spacing: -0.03em; line-height: 1; color: var(--route); font-variant-numeric: tabular-nums; } .as-home .mission-stats span { display: block; margin-top: 0.3rem; color: var(--bone-dim); font-size: 0.78rem; } .as-home .order-cta { display: inline-block; margin-top: 2.4rem; /* --route-cta, not --route: raw #f02070 is only 4.08:1 behind white text */ background: var(--route-cta); color: #fff; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 1.1em 2.2em; transition: background-color 0.2s ease, transform 0.2s ease; } /* hover darkens instead of dropping opacity — translucency erodes contrast */ .as-home .order-cta:hover, .as-home .order-cta:focus-visible { background: var(--route-cta-hover); color: #fff; } .as-home .order-cta:active { transform: translateY(1px); } .as-home .hero-cta-row { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .as-home .hero-cta-row .order-cta { margin-top: 0; } @media (max-width: 920px) { .as-home .stat-band { grid-template-columns: 1fr 1fr; } .as-home .check-list { columns: 1; } .as-home .mission-grid { grid-template-columns: 1fr; } } /* ============================================================ CONTACT — transmission console (Gravity Forms), channels, radar sweep ============================================================ */ .as-home .console { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start; } @media (max-width: 920px) { .as-home .console { grid-template-columns: 1fr; } } .as-home .console-form { border: 1px solid var(--bone-faint); background: var(--panel); padding: clamp(1.6rem, 3vw, 2.8rem); } .as-home .console-form-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-bottom: 1px solid var(--bone-faint); padding-bottom: 1rem; margin-bottom: 1.6rem; } /* Gravity Forms inside the console */ .as-home .gform_wrapper .gform-field-label, .as-home .gform_wrapper .gfield_label { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); } .as-home .gform_wrapper .gfield_required, .as-home .gform_wrapper .gfield_required_text { color: var(--route); font-style: normal; } .as-home .gform_wrapper input[type="text"], .as-home .gform_wrapper input[type="email"], .as-home .gform_wrapper input[type="tel"], .as-home .gform_wrapper input[type="url"], .as-home .gform_wrapper input[type="number"], .as-home .gform_wrapper select, .as-home .gform_wrapper textarea { background: transparent !important; border: 1px solid var(--bone-dim) !important; border-radius: 0 !important; color: var(--bone) !important; font-family: var(--mono) !important; font-size: 0.95rem !important; padding: 0.75em 0.9em !important; box-shadow: none !important; width: 100%; } .as-home .gform_wrapper input:focus, .as-home .gform_wrapper select:focus, .as-home .gform_wrapper textarea:focus { border-color: var(--route) !important; outline: none !important; } .as-home .gform_wrapper textarea { min-height: 9em; } .as-home .gform_wrapper .gfield_description { color: var(--bone-dim); font-family: var(--display); } .as-home .gform_wrapper .gfield_validation_message, .as-home .gform_wrapper .validation_message { color: #ff8ba7; background: transparent; border: 1px solid rgba(240, 32, 112, 0.4); font-family: var(--display); } .as-home .gform_wrapper .gform_validation_errors { background: transparent; border: 1px solid rgba(240, 32, 112, 0.4); box-shadow: none; border-radius: 0; } .as-home .gform_wrapper .gform_validation_errors h2 { color: #ff8ba7; font-family: var(--display); font-size: 1rem; } /* the unused "Custom question" fields stay in the form config but off the page */ .as-home .gform_wrapper #field_1_4, .as-home .gform_wrapper #field_1_5, .as-home .gform_wrapper #field_1_6 { display: none; } /* submit → transmit */ .as-home .gform_wrapper .gform_footer { margin-top: 0.6rem; padding: 0; } .as-home .gform_wrapper .gform_footer input[type="submit"], .as-home .gform_wrapper .gform_footer button { background: var(--route) !important; color: #fff !important; border: none !important; border-radius: 0 !important; font-family: var(--display) !important; font-weight: 700 !important; font-size: 0.88rem !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; padding: 1.05em 2.4em !important; cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease !important; } .as-home .gform_wrapper .gform_footer input[type="submit"]:hover { opacity: 0.9 !important; } .as-home .gform_wrapper .gform_footer input[type="submit"]:active { transform: translateY(1px); } .as-home .gform_confirmation_message { font-family: var(--mono); color: var(--bone); border: 1px solid var(--route); padding: 1.4rem 1.6rem; letter-spacing: 0.06em; } /* channels column */ .as-home .channel { border: 1px solid var(--bone-faint); background: var(--panel); padding: clamp(1.2rem, 2.2vw, 1.8rem); margin-bottom: clamp(1rem, 2vh, 1.4rem); } .as-home .channel .chart { display: block; margin-bottom: 0.6rem; } .as-home .channel-line { font-family: var(--mono); font-size: clamp(0.95rem, 1.4vw, 1.15rem); color: var(--bone); word-break: break-word; } .as-home a.channel-line { text-decoration: none; border-bottom: 1px solid var(--route); padding-bottom: 0.12em; } .as-home a.channel-line:hover { color: var(--route); } .as-home .channel-sub { display: block; margin-top: 0.5rem; color: var(--bone-dim); font-size: 0.85rem; } /* radar sweep — pure CSS eye candy */ .as-home .radar { position: relative; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--bone-faint); background: radial-gradient(circle, transparent 0 32%, var(--bone-faint) 32% calc(32% + 1px), transparent calc(32% + 1px) 65%, var(--bone-faint) 65% calc(65% + 1px), transparent calc(65% + 1px)), linear-gradient(var(--bone-faint), var(--bone-faint)) center / 100% 1px no-repeat, linear-gradient(var(--bone-faint), var(--bone-faint)) center / 1px 100% no-repeat; overflow: hidden; margin: 0 auto; max-width: 260px; } .as-home .radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(240, 32, 112, 0.5), transparent 70deg); animation: radar-sweep 4.5s linear infinite; } .as-home .radar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--route); transform: rotate(45deg); } .as-home .radar .blip { position: absolute; width: 5px; height: 5px; background: var(--bone); transform: rotate(45deg); opacity: 0.7; animation: blip-fade 4.5s linear infinite; } @keyframes radar-sweep { to { transform: rotate(360deg); } } @keyframes blip-fade { 0%, 12% { opacity: 0.9; } 55% { opacity: 0.15; } 100% { opacity: 0.9; } } @media (prefers-reduced-motion: reduce) { .as-home .radar::before { animation: none; } .as-home .radar .blip { animation: none; } } /* ============================================================ SERVICES — discipline blocks, proof chips, process, FAQ ============================================================ */ .as-home .svc-intro { font-size: clamp(1.1rem, 1.8vw, 1.45rem); line-height: 1.6; color: var(--bone); max-width: 64ch; } .as-home .svc-intro a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--route); } .as-home .svc-intro a:hover { color: var(--route); } .as-home .svc-block { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; } .as-home .svc-h { font-weight: 700; text-transform: uppercase; font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -0.025em; color: var(--bone); font-family: var(--display); margin-bottom: clamp(1.2rem, 3vh, 1.8rem); } .as-home .svc-copy p { color: var(--bone-dim); font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.7; max-width: 62ch; margin-bottom: 1.1rem; } .as-home .proof-chip { display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; border: 1px solid var(--bone-faint); border-left: 3px solid var(--route); background: var(--panel); padding: 1rem 1.3rem; margin-top: 1.4rem; } .as-home .proof-chip b { font-family: var(--mono); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; line-height: 1; color: var(--route); font-variant-numeric: tabular-nums; } .as-home .proof-chip > span { color: var(--bone-dim); font-size: 0.95rem; } .as-home .proof-chip a { text-decoration: none; margin-left: auto; } .as-home .proof-chip a:hover { color: var(--route); } .as-home .svc-gets { border: 1px solid var(--bone-faint); background: var(--panel); padding: clamp(1.3rem, 2.4vw, 2rem); position: sticky; top: 90px; } .as-home .svc-gets .chart { display: block; margin-bottom: 0.9rem; } .as-home .check-list--single { columns: 1; margin-bottom: 1.4rem; } .as-home .svc-gets .plan-cta { display: block; } .as-home .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bone-faint); border: 1px solid var(--bone-faint); margin-top: clamp(1.6rem, 4vh, 2.6rem); } .as-home .process-step { background: var(--panel); padding: clamp(1.3rem, 2.4vw, 2rem); } .as-home .process-step h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.05rem, 1.7vw, 1.4rem); letter-spacing: -0.01em; color: var(--bone); margin: 0.7rem 0 0.6rem; } .as-home .process-step p { color: var(--bone-dim); font-size: 0.92rem; line-height: 1.6; } .as-home .process-step a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--route); } .as-home .process-step a:hover { color: var(--route); } .as-home .faq-list { max-width: 860px; margin-top: clamp(1.2rem, 3vh, 2rem); } .as-home .faq-item { border: 1px solid var(--bone-faint); background: var(--panel); margin-bottom: 0.7rem; } .as-home .faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 1rem; font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--bone); padding: 1.1rem 1.4rem; } .as-home .faq-item summary::-webkit-details-marker { display: none; } .as-home .faq-item summary::before { content: ""; flex: none; width: 8px; height: 8px; border: 1.5px solid var(--route); transform: rotate(45deg); transition: background 0.2s ease; } .as-home .faq-item[open] summary::before { background: var(--route); } .as-home .faq-item summary:focus-visible { outline: 2px solid var(--route); outline-offset: 2px; } .as-home .faq-item p { color: var(--bone-dim); font-size: 0.98rem; line-height: 1.65; padding: 0 1.4rem 1.2rem 3.1rem; } @media (max-width: 920px) { .as-home .svc-block { grid-template-columns: 1fr; } .as-home .svc-gets { position: static; } .as-home .process-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .as-home .process-grid { grid-template-columns: 1fr; } } /* ============================================================ SCAN CONSOLE — the homepage scanner, given the flight-deck treatment: corner brackets, sweeping scanline, radar backdrop, grade chips and a pulsing CTA ============================================================ */ .as-home .scan-console { position: relative; border: 1px solid var(--bone-faint); background: var(--panel); overflow: hidden; } .as-home .scan-corner { position: absolute; width: 22px; height: 22px; z-index: 4; pointer-events: none; } .as-home .scan-corner--tl { top: -1px; left: -1px; border-top: 2px solid var(--route); border-left: 2px solid var(--route); } .as-home .scan-corner--br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--route); border-right: 2px solid var(--route); } /* the sweep — a thin magenta line scanning down the console */ .as-home .scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(240, 32, 112, 0.55) 20%, rgba(240, 32, 112, 0.55) 80%, transparent); animation: scanline-sweep 5.5s ease-in-out infinite; z-index: 1; pointer-events: none; } @keyframes scanline-sweep { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 46% { top: calc(100% - 2px); opacity: 1; } 54% { opacity: 0; } 100% { top: 0; opacity: 0; } } /* radar ghost behind the form column */ .as-home .scan-radar-bg { position: absolute; right: clamp(1rem, 4vw, 4rem); top: 50%; transform: translateY(-50%); width: clamp(180px, 22vw, 300px); opacity: 0.22; z-index: 0; pointer-events: none; } .as-home .scan-radar-bg .radar { max-width: none; } .as-home .scan-console-head { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 0.85rem clamp(1.4rem, 3vw, 2.6rem); border-bottom: 1px solid var(--bone-faint); } .as-home .scan-console-body { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; padding: clamp(2rem, 4.5vw, 3.6rem) clamp(1.4rem, 3vw, 2.6rem); } /* grade chips — the four report-card categories */ .as-home .scan-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.4rem 0 0; padding: 0; list-style: none; } .as-home .scan-chips li { display: flex; align-items: center; gap: 0.55rem; border: 1px solid var(--bone-faint); padding: 0.45em 0.9em; font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); } .as-home .scan-chips li::before { content: ""; width: 6px; height: 6px; background: var(--route); transform: rotate(45deg); } /* the console form — larger, louder */ .as-home .scan-io { position: relative; } .as-home .scan-row--console { border: 1px solid var(--bone-dim); background: rgba(6, 7, 13, 0.65); padding: 0.45rem 0.45rem 0.45rem 1.1rem; display: flex; align-items: center; gap: 0.6rem; } .as-home .scan-row--console:focus-within { border-color: var(--route); } .as-home .scan-row--console:focus-within::before { content: ""; position: absolute; left: -5px; top: 1.35em; width: 9px; height: 9px; background: var(--route); transform: rotate(45deg); } .as-home .scan-row--console .scan-input { font-size: clamp(1.05rem, 1.6vw, 1.3rem); padding: 0.85rem 0.2rem; border-bottom: none; } .as-home .scan-row--console .scan-btn { padding: 1em 1.7em; font-size: 0.85rem; } /* CTA pulse — a slow magenta breath, off under reduced motion */ .as-home .scan-btn--pulse { animation: scan-pulse 2.6s ease-in-out infinite; } @keyframes scan-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 32, 112, 0.45); } 50% { box-shadow: 0 0 0 10px rgba(240, 32, 112, 0); } } @media (max-width: 920px) { .as-home .scan-console-body { grid-template-columns: 1fr; } .as-home .scan-radar-bg { display: none; } .as-home .scan-row--console { flex-direction: column; align-items: stretch; padding: 0.7rem; } .as-home .scan-row--console .scan-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .as-home .scanline { animation: none; opacity: 0; } .as-home .scan-btn--pulse { animation: none; } } /* ============================================================ HOMEPAGE HIGHLIGHTS — the flight-log teaser that replaced the scroll carousel ============================================================ */ .as-home .hl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin-bottom: clamp(1rem, 2vh, 1.6rem); } .as-home .hl-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--bone-faint); text-decoration: none; color: var(--bone); transition: border-color 0.3s ease, transform 0.3s ease; } .as-home .hl-card:hover { border-color: var(--route); transform: translateY(-4px); } .as-home .hl-thumb { aspect-ratio: 16/9; overflow: hidden; border-bottom: 1px solid var(--bone-faint); } .as-home .hl-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(0.85) brightness(0.85); transition: filter 0.4s ease, transform 0.4s ease; } .as-home .hl-card:hover .hl-thumb img { filter: saturate(1) brightness(0.95); transform: scale(1.03); } .as-home .hl-body { padding: clamp(1.1rem, 2vw, 1.6rem); display: flex; flex-direction: column; gap: 0.45rem; } .as-home .hl-stat { font-family: var(--mono); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3.2rem); letter-spacing: -0.04em; line-height: 0.95; color: var(--route); font-variant-numeric: tabular-nums; } .as-home .hl-lbl { color: var(--bone-dim); font-size: 0.95rem; } .as-home .hl-rows { border-top: 1px solid var(--bone-faint); } .as-home .hl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1.05rem 0.2rem; border-bottom: 1px solid var(--bone-faint); text-decoration: none; color: var(--bone); transition: padding-left 0.25s ease; } .as-home .hl-row:hover { padding-left: 1rem; } .as-home .hl-row-client { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.05rem, 1.8vw, 1.5rem); letter-spacing: -0.01em; } .as-home .hl-row b { font-family: var(--mono); font-weight: 700; color: var(--route); font-variant-numeric: tabular-nums; font-size: clamp(1rem, 1.7vw, 1.4rem); letter-spacing: -0.02em; white-space: nowrap; } /* ============================================================ CASE-STUDY BANDS — the detailed flight log ============================================================ */ .as-home .cs-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; margin-bottom: clamp(1.6rem, 3.5vh, 2.6rem); } .as-home .cs-band--flip .cs-media { order: 2; } .as-home .cs-band--flip .cs-story { order: 1; } .as-home .cs-media { display: flex; flex-direction: column; gap: clamp(0.9rem, 1.8vh, 1.4rem); position: sticky; top: 90px; } .as-home .cs-film { border: 1px solid var(--bone-faint); background: var(--panel); overflow: hidden; } .as-home .cs-film video { display: block; width: 100%; height: auto; } .as-home .cs-shot { position: relative; border: 1px solid var(--bone-faint); background: var(--panel); overflow: hidden; } .as-home .cs-shot img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; object-position: center top; filter: saturate(0.85) brightness(0.88); } .as-home .cs-client { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -0.025em; color: var(--bone); margin-bottom: clamp(1.4rem, 3vh, 2.2rem); } .as-home .cs-chapter { border-left: 2px solid var(--bone-faint); padding-left: clamp(1rem, 2vw, 1.6rem); margin-bottom: clamp(1.3rem, 2.8vh, 2rem); } .as-home .cs-chapter:last-child { border-left-color: var(--route); } .as-home .cs-chapter .chart { display: block; margin-bottom: 0.5rem; } .as-home .cs-chapter p { color: var(--bone-dim); font-size: clamp(0.98rem, 1.35vw, 1.12rem); line-height: 1.7; max-width: 58ch; } @media (max-width: 920px) { .as-home .hl-grid { grid-template-columns: 1fr; } .as-home .cs-band { grid-template-columns: 1fr; } .as-home .cs-band--flip .cs-media { order: 1; } .as-home .cs-band--flip .cs-story { order: 2; } .as-home .cs-media { position: static; } } /* ============================================================ BRAND DEFINITION — "why we're called Aileron Shift" Copy beside an approach-plate diagram: the aircraft banks off the held heading (dashed) onto the new course (magenta). Reuses the palette + mono/route idioms; no new assets. ============================================================ */ .as-home .def-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center; margin-top: clamp(1.4rem, 3vh, 2.4rem); } .as-home .def-copy .people-body { margin-top: 1.1rem; max-width: 52ch; } .as-home .def-fig { position: relative; margin: 0; padding: clamp(0.9rem, 2.4vw, 1.5rem); aspect-ratio: 62 / 50; border: 1px solid var(--bone-faint); background: radial-gradient(120% 90% at 74% 16%, rgba(240, 32, 112, 0.12), transparent 58%), var(--panel); } /* corner brackets, echoing the scan console */ .as-home .def-fig::before, .as-home .def-fig::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--route); } .as-home .def-fig::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .as-home .def-fig::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .as-home .def-fig svg { display: block; width: 100%; height: 100%; } .as-home .def-ring { fill: none; stroke: var(--bone-faint); stroke-width: 1.5; } .as-home .def-tick { stroke: var(--bone-faint); stroke-width: 1.5; } .as-home .def-old { fill: none; stroke: var(--bone-dim); stroke-width: 2; stroke-dasharray: 5 9; } .as-home .def-new { fill: none; stroke: var(--route); stroke-width: 3; stroke-linecap: round; } .as-home .def-arc { fill: none; stroke: var(--bone-dim); stroke-width: 1.5; stroke-dasharray: 3 5; } .as-home .def-dep { fill: var(--bone); } .as-home .def-wp { fill: var(--route); } .as-home .def-plane { fill: var(--route); } .as-home .def-north { fill: var(--route); } .as-home .def-lbl { fill: var(--bone-dim); font-family: var(--mono); letter-spacing: 0.12em; text-transform: uppercase; } .as-home .def-lbl--r { fill: var(--route); } @media (prefers-reduced-motion: no-preference) { /* draw the new course on, then settle the aircraft in */ .as-home .def-new { stroke-dasharray: 1; stroke-dashoffset: 1; animation: def-draw 1.9s ease 0.25s forwards; } .as-home .def-plane { opacity: 0; animation: def-fade 0.7s ease 1.95s forwards; } .as-home .def-wp { animation: def-ping 2.8s ease-in-out infinite; } } @keyframes def-draw { to { stroke-dashoffset: 0; } } @keyframes def-fade { to { opacity: 1; } } @keyframes def-ping { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @media (max-width: 820px) { .as-home .def-grid { grid-template-columns: 1fr; } .as-home .def-fig { order: 2; width: min(100%, 460px); } .as-home .def-copy { order: 1; } } /* ============================================================ LOGO FARM — "who we've flown with" A mixed set of client marks (black, colour, reversed, full badges) can't share one filter, so each sits on a white chip in its own brand colour — legible on the night background. ============================================================ */ .as-home .logo-farm { list-style: none; margin: clamp(1.4rem, 3vh, 2.4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(0.75rem, 1.4vw, 1.15rem); } .as-home .logo-farm li { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid rgba(6, 7, 13, 0.08); border-radius: 14px; padding: clamp(0.9rem, 1.8vw, 1.4rem); min-height: clamp(78px, 8.4vw, 104px); box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.7); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .as-home .logo-farm li:hover { transform: translateY(-3px); border-color: var(--route); box-shadow: 0 0 0 1px var(--route), 0 16px 30px -14px rgba(240, 32, 112, 0.55); } .as-home .logo-farm img { display: block; width: auto; height: auto; max-width: 100%; /* wide, horizontal marks — width is the limiting dimension */ max-height: clamp(26px, 3vw, 40px); object-fit: contain; } /* square / badge marks use little width at a shared height cap, so let them grow taller to carry equal visual weight in the row */ .as-home .logo-farm img.logo--square { max-height: clamp(48px, 5.6vw, 72px); } @media (max-width: 960px) { .as-home .logo-farm { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 620px) { .as-home .logo-farm { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 400px) { .as-home .logo-farm { grid-template-columns: repeat(2, 1fr); } }