/* ============================================================================ STRAFE THEORY SOFTWARE — Studio site layout (HYBRID) Full top-to-bottom light/dark theming for every band BELOW the hero. The hero stays full-bleed cinematic (dark) in BOTH themes — the brand's signature first impression. The nav is forced legible over that dark hero regardless of theme. Every value resolves to a palette token from colors_and_type.css; the blue footer is the single anchor shared by both themes. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font: var(--w-reg) 18px/1.5 var(--font-text); letter-spacing: 0.1px; color: var(--page-fg); background: var(--page-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: var(--strafe-blue); color: var(--on-blue); } /* keep the fade from flashing the default white behind */ html { background-color: var(--page-bg); } /* ============================================================================ PAGE TRANSITIONS — instant feedback + quick cross-fade between pages ============================================================================ */ .pagebar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--strafe-blue); z-index: 9999; pointer-events: none; opacity: 0; box-shadow: 0 0 8px rgba(0,112,209,0.6); } .pagebar.show { opacity: 1; } @keyframes stPageIn { from { opacity: 0; } to { opacity: 1; } } /* centered emblem pulse during the leave hand-off */ .pagepulse { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9998; pointer-events: none; opacity: 0; } .pagepulse img { width: 138px; height: auto; display: block; } .pagepulse.show { animation: stPulse .8s ease-in-out infinite; } @keyframes stPulse { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.82); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 70% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.98); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } } @media (prefers-reduced-motion: no-preference) { html.js body { animation: stPageIn .3s ease both; } html.is-leaving body { opacity: 0; transition: opacity .26s ease; } } /* ============================================================================ THEME ROLE TOKENS — light is default; [data-theme="dark"] flips all. ============================================================================ */ :root { --page-bg: var(--canvas-light); --page-fg: var(--ink); /* nav, solid (scrolled) state */ --nav-fg: var(--ink); --nav-fg-mute: var(--mute-light); --nav-bg: var(--canvas-light); --nav-rule: var(--hairline-light); --eyebrow-mute: var(--mute-light); /* upcoming projects band */ --proj-bg: var(--surface-soft); --proj-fg: var(--ink); --proj-lead: var(--body-light); --pcard-bg: var(--surface-card); --pcard-blurb: var(--body-light); --pcard-tag: var(--mute-light); --pcard-meta: var(--mute-light); /* services + contact "showcase" bands */ --svc-bg: var(--canvas-light); --svc-fg: var(--ink); --svc-lead: var(--body-light); --soft-surface: var(--surface-soft); --soft-fg: var(--ink); --card-surface: var(--surface-card); --card-title: var(--ink-deep); --card-body: var(--body-light); --card-muted: var(--mute-light); --field-label: var(--ink-deep); --note: var(--mute-light); --input-bg: var(--canvas-light); --input-border: var(--ash-light); --input-fg: var(--ink); --inquiry-bg: var(--surface-soft); /* light grey card on the white contact band */ --inquiry-fg: var(--ink-deep); --inquiry-body: var(--body-light); --inquiry-list: var(--mute-light); --inquiry-rule: var(--hairline-light); --link: var(--link-light); /* studio band */ --studio-bg: var(--surface-soft); --studio-fg: var(--ink); --studio-body: var(--body-light); --studio-cell-bg: var(--canvas-light); --studio-cell-num: var(--ink); --studio-cell-label: var(--mute-light); --studio-rule: rgba(0,0,0,0.08); /* ghost button (theme-aware) */ --ghost-fg: var(--ink); --ghost-ring: var(--ash-light); --ghost-hover: var(--surface-soft); --divider-soft: transparent; } [data-theme="dark"] { --page-bg: var(--canvas-dark); --page-fg: var(--on-dark); --nav-fg: var(--on-dark); --nav-fg-mute: var(--on-dark-mute); --nav-bg: var(--canvas-dark); --nav-rule: var(--hairline-dark); --eyebrow-mute: var(--on-dark-mute); --proj-bg: var(--canvas-dark); --proj-fg: var(--on-dark); --proj-lead: var(--body-dark); --pcard-bg: var(--surface-dark-card); --pcard-blurb: var(--body-dark); --pcard-tag: var(--on-dark-mute); --pcard-meta: var(--on-dark-mute); --svc-bg: var(--surface-dark-elevated); --svc-fg: var(--on-dark); --svc-lead: var(--body-dark); --soft-surface: var(--canvas-dark); --soft-fg: var(--on-dark); --card-surface: var(--surface-dark-card); --card-title: var(--on-dark); --card-body: var(--body-dark); --card-muted: var(--on-dark-mute); --field-label: var(--on-dark); --note: var(--on-dark-mute); --input-bg: rgba(255,255,255,0.045); --input-border: rgba(255,255,255,0.18); --input-fg: var(--on-dark); --inquiry-bg: var(--surface-dark-card); --inquiry-fg: var(--on-dark); --inquiry-body: var(--body-dark); --inquiry-list: var(--on-dark-mute); --inquiry-rule: var(--hairline-dark); --link: var(--link-dark); --studio-bg: var(--surface-dark-elevated); --studio-fg: var(--on-dark); --studio-body: var(--body-dark); --studio-cell-bg: var(--canvas-dark); --studio-cell-num: var(--on-dark); --studio-cell-label: var(--on-dark-mute); --studio-rule: var(--hairline-dark); --ghost-fg: var(--on-dark); --ghost-ring: var(--hairline-dark); --ghost-hover: rgba(255,255,255,0.06); --divider-soft: var(--hairline-dark); } /* Cards/chrome animate background smoothly. Band-level canvases (and the studio stat cells) intentionally EXCLUDE background-color from the transition: a var()-driven background-color transition fails to repaint on toggle in some engines, so these flip instantly (still smooth in feel, no white-on-white). */ .step, .feat, .inquiry, .svc-cta, .st-input, .nav, .nav__drawer { transition: background-color .3s ease, color .3s ease, border-color .3s ease; } .band, .studio-stats .cell { transition: color .3s ease, border-color .3s ease; } /* anchor offset for the sticky nav (+ persistent promo bar above Projects) */ section[id] { scroll-margin-top: 88px; } #projects { scroll-margin-top: 124px; } /* ---- Layout primitives ---------------------------------------------------- */ .wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: var(--space-xl); } .band { padding-block: var(--space-section); } .band--projects { background-color: var(--proj-bg); color: var(--proj-fg); border-top: 1px solid var(--divider-soft); } .band--light { background-color: var(--svc-bg); color: var(--svc-fg); border-top: 1px solid var(--divider-soft); } .band--studio { background-color: var(--studio-bg); color: var(--studio-fg); } [data-theme="dark"] .band--studio { background-color: #000; background-image: linear-gradient(180deg, #000 0%, var(--surface-dark-elevated) 100%); } /* ---- Eyebrow / section header -------------------------------------------- */ .eyebrow { font: var(--w-semi) 12px/1.5 var(--font-text); letter-spacing: 2px; text-transform: uppercase; display: inline-flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-md); } .eyebrow--blue { color: var(--strafe-blue); } .eyebrow--mute-dark { color: var(--eyebrow-mute); } .eyebrow--mute-light { color: var(--mute-light); } .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; opacity: 0.55; } .section-head { max-width: 720px; margin-bottom: var(--space-xxl); } .section-head p { margin: var(--space-md) 0 0; max-width: 560px; } .lead-dark { color: var(--proj-lead); } .lead-light { color: var(--svc-lead); } /* ---- Buttons -------------------------------------------------------------- */ .st-btn { text-decoration: none; } .st-btn:hover { opacity: 0.92; } .st-btn--sm { height: 40px; padding: 8px 18px; font: var(--w-bold) 14px/1.25 var(--font-text); letter-spacing: 0.324px; } .st-btn--block { width: 100%; } /* theme-aware ghost */ .st-btn--ghost { background: transparent; color: var(--ghost-fg); box-shadow: inset 0 0 0 1px var(--ghost-ring); } .st-btn--ghost:hover { background: var(--ghost-hover); opacity: 1; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); } /* ============================================================================ NAV — transparent over the (always dark) hero, solid + themeable on scroll ============================================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; background: transparent; color: var(--nav-fg); transition: background-color .25s ease, border-color .25s ease, color .25s ease; border-bottom: 1px solid transparent; } .nav--scrolled { background: var(--nav-bg); border-bottom: 1px solid var(--nav-rule); } .nav__inner { height: 72px; display: flex; align-items: center; gap: var(--space-xl); } .nav__brand { display: inline-flex; align-items: center; gap: 11px; color: var(--nav-fg); flex: none; } .nav__emblem { height: 38px; width: auto; display: block; transition: filter .25s ease; } .nav__wordmark { height: 25px; width: auto; display: block; position: relative; top: 2px; transition: filter .25s ease; } /* white logo flips to dark only when the nav is solid over a light surface */ [data-theme="light"] .nav--scrolled .nav__emblem, [data-theme="light"] .nav--scrolled .nav__wordmark { filter: invert(1); } .nav__links { display: flex; align-items: center; gap: var(--space-xl); margin-left: auto; } .nav__link { font: var(--w-med) 16px/1 var(--font-text); letter-spacing: 0.2px; color: var(--nav-fg-mute); padding: 6px 0; position: relative; transition: color .12s ease; } .nav__link:hover { color: var(--nav-fg); } .nav__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--strafe-blue); transition: right .18s ease; } .nav__link:hover::after { right: 0; } .nav__cta { margin-left: var(--space-sm); } .nav__burger { display: none; background: transparent; border: 0; color: var(--nav-fg); cursor: pointer; padding: 6px; margin-left: auto; } /* over the dark hero (nav transparent): force on-dark legibility in BOTH themes */ .nav:not(.nav--scrolled) .nav__brand, .nav:not(.nav--scrolled) .nav__burger { color: var(--on-dark); } .nav:not(.nav--scrolled) .nav__link { color: var(--on-dark-mute); } .nav:not(.nav--scrolled) .nav__link:hover { color: var(--on-dark); } .nav:not(.nav--scrolled) .theme-toggle { color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--hairline-dark); } .nav:not(.nav--scrolled) .theme-toggle:hover { background: rgba(255,255,255,0.08); } /* theme toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; cursor: pointer; background: transparent; color: inherit; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--nav-rule); transition: background-color .12s ease, box-shadow .12s ease, color .25s ease; } .theme-toggle:hover { background: var(--ghost-hover); } .theme-toggle .i-sun { display: none; } .theme-toggle .i-moon { display: block; } [data-theme="dark"] .theme-toggle .i-sun { display: block; } [data-theme="dark"] .theme-toggle .i-moon { display: none; } .nav__drawer .theme-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: auto; padding: var(--space-md) 0; margin-top: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--nav-rule); cursor: pointer; color: var(--nav-fg); font: var(--w-med) 20px/1 var(--font-text); } .nav__drawer .theme-toggle:hover { background: transparent; } .theme-switch__ctrl { display: inline-flex; align-items: center; gap: var(--space-sm); } .theme-switch__state { font: var(--w-semi) 13px/1 var(--font-text); letter-spacing: 1px; text-transform: uppercase; color: var(--nav-fg-mute); min-width: 26px; text-align: right; } .theme-switch__track { position: relative; width: 52px; height: 30px; border-radius: var(--radius-full); background: var(--nav-rule); transition: background-color .2s ease; flex: none; } .theme-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: var(--radius-full); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .2s ease; } html[data-theme="dark"] .theme-switch__track { background: var(--strafe-blue); } html[data-theme="dark"] .theme-switch__track::after { transform: translateX(22px); } /* mobile drawer */ .nav__drawer { display: none; position: fixed; inset: 72px 0 auto 0; z-index: 99; background: var(--nav-bg); border-bottom: 1px solid var(--nav-rule); padding: var(--space-lg) var(--space-xl) var(--space-xl); flex-direction: column; gap: var(--space-xs); } .nav__drawer.open { display: flex; } .nav__drawer a { padding: var(--space-md) 0; color: var(--nav-fg); font: var(--w-med) 20px/1 var(--font-text); border-bottom: 1px solid var(--nav-rule); } .nav__drawer .st-btn { margin-top: var(--space-md); } .nav__drawer .st-btn--commerce { color: var(--on-orange); } .nav__drawer .st-btn--primary { color: var(--on-blue); } /* ============================================================================ PROMO BAR — thin Strafe-Blue announcement strip at the top of the hero, under the nav. Utility chrome (NOT a full-bleed chapter band), so it doesn't count against the one-blue-band rule. Scrolls away with the hero; dismissible + persisted. White-on-blue with an inverse white CTA pill (orange is reserved strictly for commerce, so backer CTAs use the inverse treatment). ============================================================================ */ .promo { position: fixed; top: 72px; left: 0; right: 0; z-index: 90; background: var(--strafe-blue); color: var(--on-blue); transition: opacity .35s ease, transform .35s ease; } .promo--away { opacity: 0; transform: translateY(-8px); pointer-events: none; } .promo__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-md); min-height: 46px; padding-block: 6px; } .promo__left { justify-self: start; } .promo__badge { display: inline-flex; align-items: center; white-space: nowrap; background: rgba(255,255,255,0.18); color: var(--on-blue); border-radius: var(--radius-full); padding: 5px 12px; font: var(--w-semi) 11px/1 var(--font-text); letter-spacing: 1.5px; text-transform: uppercase; } .promo__center { justify-self: center; text-align: center; min-width: 0; } .promo__msg { font: var(--w-med) 15px/1.35 var(--font-text); letter-spacing: 0.2px; color: var(--on-blue); display: inline-block; } .promo__right { justify-self: end; display: inline-flex; align-items: center; gap: var(--space-sm); } .promo__cta { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: #fff; color: var(--strafe-blue); border-radius: var(--radius-full); padding: 8px 16px; font: var(--w-bold) 13px/1 var(--font-text); letter-spacing: 0.3px; transition: opacity .12s ease, transform .12s ease; } .promo__cta:hover { opacity: 0.92; } .promo__cta:active { transform: translateY(1px); } .promo__close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; cursor: pointer; background: transparent; border: 0; color: var(--on-blue); opacity: 0.8; border-radius: var(--radius-full); transition: opacity .12s ease, background-color .12s ease; } .promo__close:hover { opacity: 1; background: rgba(255,255,255,0.15); } @media (prefers-reduced-motion: no-preference) { .promo__msg { transition: opacity .22s ease; } } .promo-hidden .promo { display: none; } /* ============================================================================ HERO — full-bleed cinematic, ALWAYS dark (signature first impression) ============================================================================ */ .hero { position: relative; overflow: hidden; background: var(--canvas-dark); } .hero__wave { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; } .hero__art { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: 70% 30%; opacity: 0.55; display: none; /* hidden: animated wave is the hero background. set to block + lower opacity to layer the key art back in */ } .hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 44%, rgba(0,0,0,0) 76%), linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 40%), linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 24%); } .hero__inner { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 138px; padding-bottom: var(--space-section); } /* hero text is always on-dark, independent of theme */ .hero .eyebrow--mute-dark { color: var(--on-dark-mute); } .hero__lockup { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); } .hero__emblem { height: clamp(40px, 6vw, 62px); width: auto; display: block; } .hero__wordmark { font-family: var(--font-text); font-weight: 800; text-transform: uppercase; color: rgba(255,255,255,0.95); font-size: clamp(28px, 4.4vw, 54px); line-height: 0.95; letter-spacing: 0.5px; margin: 0; } .hero__tagline { margin: 0; max-width: 880px; font: var(--w-light) clamp(34px, 5.2vw, 64px)/1.08 var(--font-display); letter-spacing: 0.1px; color: var(--on-dark); text-wrap: balance; } .hero__tagline em { font-style: normal; color: var(--strafe-blue); } .hero__sub { margin: var(--space-lg) 0 var(--space-xxl); max-width: 560px; font: var(--w-reg) 20px/1.5 var(--font-text); color: var(--body-dark); } .hero__cta { gap: var(--space-md); } /* hero ghost button stays on-dark regardless of theme (sits on dark hero) */ .hero__cta .st-btn--ghost { color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--hairline-dark); } .hero__cta .st-btn--ghost:hover { background: rgba(255,255,255,0.06); } .hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-xl); margin-top: var(--space-xxl); padding-top: var(--space-lg); border-top: 1px solid var(--hairline-dark); } .hero__stat .n { font: var(--w-light) 35px/1 var(--font-display); color: var(--on-dark); } .hero__stat .l { display: block; margin-top: 6px; font: var(--w-reg) 14px/1.4 var(--font-text); color: var(--on-dark-mute); } /* ============================================================================ UPCOMING PROJECTS (centerpiece) ============================================================================ */ .proj-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-xxl); } .proj-head .section-head { margin-bottom: 0; } /* ---- Carousel: one project at a time, cross-dissolve, 48px paddles -------- */ .pcarousel { position: relative; } .pcarousel__stage { position: relative; transition: height .4s ease; } .fslide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility 0s linear .5s; } .fslide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s ease; position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .fslide { transition: none; } } .feature { display: grid; grid-template-columns: 1.35fr 1fr; background: var(--pcard-bg); color: var(--proj-fg); border-radius: var(--radius-md); overflow: hidden; } .feature__media { position: relative; overflow: hidden; min-height: 100%; } .feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.72) 100%); } .feature__badge { position: absolute; top: var(--space-lg); left: var(--space-lg); z-index: 2; } .feature__overlay { position: absolute; left: var(--space-lg); right: var(--space-lg); bottom: var(--space-lg); z-index: 2; display: flex; flex-direction: column; gap: 6px; } .feature__title { font-family: var(--font-title); font-weight: 800; text-transform: uppercase; color: #fff; font-size: clamp(34px, 4vw, 52px); line-height: 0.95; letter-spacing: 0.5px; } .feature__tag { font: var(--w-semi) 12px/1.4 var(--font-text); letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.82); } /* status badge colors (project rule): in development = blue (default), pre-production = Signal Orange, concept = volt yellow */ .st-badge--commerce { background: var(--signal-orange); color: var(--on-orange); } .st-badge--volt { background: var(--volt); color: #11140a; } .feature__bar { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-lg); justify-content: center; } .feature__blurb { margin: 0; color: var(--pcard-blurb); font: var(--w-reg) 18px/1.55 var(--font-text); } .feature__actions { display: flex; flex-direction: column; gap: var(--space-sm); } .feature__platforms { display: flex; gap: var(--space-sm); } .feature__platforms .st-btn { flex: 1; } /* 48px circular paddles, straddling the card edges at vertical center */ .pcarousel__paddle { position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); width: 48px; height: 48px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; background: var(--pcard-bg); color: var(--proj-fg); cursor: pointer; border: 0; box-shadow: inset 0 0 0 1px var(--divider-soft), var(--shadow-press); transition: background-color .12s ease, transform .12s ease, opacity .12s ease; } .pcarousel__paddle--prev { left: 0; transform: translate(-50%, -50%); } .pcarousel__paddle--next { right: 0; transform: translate(50%, -50%); } .pcarousel__paddle:hover { background: var(--strafe-blue); color: var(--on-blue); } .pcarousel__paddle--prev:active { transform: translate(-50%, -50%) translateY(1px); } .pcarousel__paddle--next:active { transform: translate(50%, -50%) translateY(1px); } /* nav: dots + counter */ .pcarousel__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-lg); } .pcarousel__dots { display: flex; align-items: center; gap: var(--space-sm); } .pcarousel__dot { width: 9px; height: 9px; border-radius: var(--radius-full); padding: 0; cursor: pointer; background: var(--pcard-tag); opacity: 0.45; border: 0; transition: width .2s ease, opacity .2s ease, background-color .2s ease; } .pcarousel__dot.is-active { width: 28px; opacity: 1; background: var(--strafe-blue); } .pcarousel__counter { font: var(--w-med) 14px/1 var(--font-mono); color: var(--pcard-meta); letter-spacing: 1px; } .pcarousel__counter .sep { opacity: 0.5; margin: 0 2px; } @media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature__media { aspect-ratio: 16 / 10; min-height: 0; } .feature__bar { padding: var(--space-lg); } .pcarousel__paddle--prev { left: var(--space-md); transform: translate(0, -50%); } .pcarousel__paddle--next { right: var(--space-md); transform: translate(0, -50%); } .pcarousel__paddle--prev:active, .pcarousel__paddle--next:active { transform: translate(0, -50%) translateY(1px); } /* keep paddles over the media area on stacked layout */ .pcarousel__paddle { top: 28%; } } /* ============================================================================ SERVICES ============================================================================ */ .flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); position: relative; } .step { background: var(--card-surface); color: var(--card-title); border-radius: var(--radius-md); padding: var(--space-xl); position: relative; display: flex; flex-direction: column; gap: var(--space-md); transition: transform .14s ease, box-shadow .14s ease, background-color .3s ease; } .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-press); } .step__num { width: 44px; height: 44px; border-radius: 9999px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--strafe-blue); color: var(--on-blue); font: var(--w-bold) 18px/1 var(--font-text); } .step__arrow { position: absolute; right: calc(var(--space-lg) * -1 - 6px); top: 50%; transform: translateY(-50%); color: var(--card-muted); z-index: 2; } .step h3 { margin: 0; font: var(--w-semi) 22px/1.25 var(--font-display); letter-spacing: 0.1px; color: var(--card-title); } .step p { margin: 0; color: var(--card-body); font: var(--w-reg) 16px/1.5 var(--font-text); } .step ul { margin: var(--space-xs) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); } .step li { display: flex; gap: var(--space-sm); align-items: flex-start; font: var(--w-reg) 15px/1.4 var(--font-text); color: var(--card-muted); } .step li svg { color: var(--strafe-blue); flex: none; margin-top: 1px; } .svc-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl) var(--space-lg); margin-top: var(--space-section); } .feat h4 { margin: 0 0 var(--space-xs); font: var(--w-semi) 18px/1.3 var(--font-text); color: var(--card-title); display: flex; align-items: center; gap: var(--space-sm); } .feat h4 svg { color: var(--strafe-blue); } .feat p { margin: 0; color: var(--card-body); font: var(--w-reg) 16px/1.5 var(--font-text); } .svc-cta { margin-top: var(--space-section); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; background: var(--strafe-blue); border-radius: var(--radius-md); padding: var(--space-xxl); } .svc-cta h3 { margin: 0; font: var(--w-light) 35px/1.15 var(--font-display); color: var(--on-blue); max-width: 620px; text-wrap: balance; } /* ---- ENGINES slot-reel (inside the blue services CTA) -------------------- */ .svc-cta { gap: var(--space-lg) var(--space-xl); } .svc-reel { display: inline-flex; align-items: center; gap: var(--space-md); flex: none; } .svc-reel__label { font: var(--w-semi) 12px/1.5 var(--font-text); letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.7); white-space: nowrap; } .engine-reel { height: 48px; width: 216px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); } .engine-reel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .engine-reel .engine { height: 48px; display: flex; align-items: center; gap: var(--space-sm); color: var(--on-blue); white-space: nowrap; } .engine-reel .engine svg { width: 29px; height: 29px; flex: none; } .engine-reel .engine span { font: var(--w-bold) 23px/1 var(--font-text); letter-spacing: 0.2px; } @media (max-width: 680px) { .svc-reel { width: 100%; justify-content: center; } } /* ============================================================================ STUDIO / ABOUT ============================================================================ */ .studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-section); align-items: start; } .studio-copy p { margin: 0 0 var(--space-md); color: var(--studio-body); font: var(--w-reg) 18px/1.6 var(--font-text); max-width: 520px; } .studio-copy p:last-child { margin-bottom: 0; } .studio-lead { font: var(--w-light) 28px/1.3 var(--font-display) !important; color: var(--studio-fg) !important; letter-spacing: 0.1px; max-width: 560px !important; } .studio-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--studio-rule); border: 1px solid var(--studio-rule); border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-xxl); } .studio-stats .cell { background-color: var(--studio-cell-bg); padding: var(--space-xl); } .studio-stats .n { font: var(--w-light) 44px/1 var(--font-display); color: var(--studio-cell-num); } .studio-stats .n b { font-weight: var(--w-light); color: var(--strafe-blue); } .studio-stats .l { display: block; margin-top: var(--space-sm); font: var(--w-reg) 15px/1.4 var(--font-text); color: var(--studio-cell-label); } /* ============================================================================ CONTACT ============================================================================ */ .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-section); align-items: stretch; } .form { display: flex; flex-direction: column; gap: var(--space-lg); } .field { display: flex; flex-direction: column; gap: var(--space-xs); } .field label { font: var(--w-semi) 14px/1.5 var(--font-text); letter-spacing: 0.3px; color: var(--field-label); } .field .st-input { width: 100%; font-family: var(--font-text); } .st-input { background: var(--input-bg); border-color: var(--input-border); color: var(--input-fg); } .st-input::placeholder { color: var(--card-muted); opacity: 1; } textarea.st-input { height: auto; min-height: 132px; max-height: 300px; padding: var(--space-md); resize: none; line-height: 1.5; overflow-y: auto; transition: border-color .12s ease; } /* slim rounded custom scrollbar on the message box — both themes */ textarea.st-input { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.28) transparent; } textarea.st-input::-webkit-scrollbar { width: 10px; } textarea.st-input::-webkit-scrollbar-track { background: transparent; } textarea.st-input::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.22); border-radius: 9999px; border: 3px solid transparent; background-clip: padding-box; } textarea.st-input::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.34); border-radius: 9999px; border: 3px solid transparent; background-clip: padding-box; } /* dark mode flips the thumb to translucent white on the dark field */ [data-theme="dark"] textarea.st-input { scrollbar-color: rgba(255,255,255,0.28) transparent; } [data-theme="dark"] textarea.st-input::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); } [data-theme="dark"] textarea.st-input::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.34); } .form__note { font: var(--w-reg) 14px/1.5 var(--font-text); color: var(--note); margin: 0; } .form__ok { font: var(--w-med) 16px/1.5 var(--font-text); color: var(--strafe-blue); margin: 0; display: none; } .form__ok.show { display: block; } /* services cards use a Strafe-Blue surface so they pop (project rule); orange CTA on top */ .inquiry { background: var(--strafe-blue); color: var(--on-blue); border: 1px solid transparent; border-radius: var(--radius-md); padding: var(--space-xxl); display: flex; flex-direction: column; gap: var(--space-md); } .inquiry .eyebrow { color: var(--on-blue); } .inquiry h3 { margin: 0; font: var(--w-light) 28px/1.25 var(--font-display); color: var(--on-blue); letter-spacing: 0.1px; } .inquiry p { margin: 0; color: rgba(255,255,255,0.86); font: var(--w-reg) 17px/1.55 var(--font-text); } .inquiry__list { margin: var(--space-xs) 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); } .inquiry__list li { display: flex; gap: var(--space-sm); align-items: center; color: rgba(255,255,255,0.92); font: var(--w-reg) 16px/1.4 var(--font-text); } .inquiry__list svg { color: var(--on-blue); flex: none; } .inquiry .st-btn { margin-top: auto; align-self: flex-start; } /* ============================================================================ FOOTER (the single blue band — anchors both themes) ============================================================================ */ .footer { background: var(--strafe-blue); color: var(--on-blue); } .footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-xl); padding-block: var(--space-xxl); } /* deliberate wider gutter between the brand block and the link columns */ .footer__top > .footer__col:nth-of-type(1) { padding-left: var(--space-xxl); } .footer__brand svg { height: 28px; width: auto; color: var(--on-blue); } .footer__lockup { display: inline-flex; align-items: center; gap: 13px; color: var(--on-blue); } .footer__emblem { height: 38px; width: auto; display: block; } .footer__wordmark { height: 26px; width: auto; display: block; position: relative; top: 3px; } .footer__brand p { margin: var(--space-md) 0 0; max-width: 300px; color: rgba(255,255,255,0.8); font: var(--w-reg) 16px/1.5 var(--font-text); } .footer__col h5 { margin: 0 0 var(--space-md); font: var(--w-semi) 12px/1.5 var(--font-text); letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.7); } .footer__col a { display: block; padding: 6px 0; color: rgba(255,255,255,0.9); font: var(--w-reg) 16px/1.4 var(--font-text); transition: color .12s ease; } .footer__col a:hover { color: var(--on-blue); } /* coming-soon placeholder links — subtly dimmed + tiny outlined "Soon" tag */ .footer__col a.is-soon { display: flex; width: fit-content; align-items: center; gap: 8px; opacity: 0.62; cursor: default; } .footer__col a.is-soon:hover { color: rgba(255,255,255,0.9); opacity: 0.8; } .soon-tag { font: var(--w-semi) 9px/1 var(--font-text); letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.32); border-radius: var(--radius-full); padding: 3px 7px; flex: none; } .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; padding-block: var(--space-lg); border-top: 1px solid rgba(255,255,255,0.2); } .footer__bottom p { margin: 0; color: rgba(255,255,255,0.8); font: var(--w-reg) 14px/1.5 var(--font-text); } .footer__social { display: flex; gap: var(--space-md); } .footer__social a { display: inline-flex; color: rgba(255,255,255,0.9); transition: color .12s ease; } .footer__social a:hover { color: var(--on-blue); } /* ============================================================================ SCROLL REVEAL ============================================================================ */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: .08s; } .reveal-delay-2 { transition-delay: .16s; } .reveal-delay-3 { transition-delay: .24s; } } /* ============================================================================ RESPONSIVE ============================================================================ */ @media (max-width: 920px) { .nav__links { display: none; } .nav__burger { display: inline-flex; } .studio-grid, .contact-grid { grid-template-columns: 1fr; gap: var(--space-xxl); } .studio-stats { margin-top: 0; } .flow { grid-template-columns: 1fr; } .step__arrow { display: none; } .svc-features { grid-template-columns: repeat(2, 1fr); } .footer__top { grid-template-columns: 1fr 1fr; } .footer__top > .footer__col:nth-of-type(1) { padding-left: 0; } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 820px) { .promo__inner { grid-template-columns: 1fr auto; } .promo__left { display: none; } .promo__center { justify-self: start; text-align: left; } .promo__msg { font-size: 14px; } } @media (max-width: 520px) { .promo__cta { display: none; } } @media (max-width: 680px) { .wrap { padding-inline: var(--space-lg); } .band { padding-block: var(--space-xxl); } .svc-features { grid-template-columns: 1fr; } .studio-stats { grid-template-columns: 1fr 1fr; } .svc-cta { padding: var(--space-xl); } .hero__meta { gap: var(--space-lg); } .footer__top { grid-template-columns: 1fr; } }