/* ========================================================================= THE BOMBER BOYS — landing page Design: WWII WPA / recruitment-poster ========================================================================= */ /* ------------------------------------------------------------------------- FONTS — Verlag, served by Cloud.typography (Hoefler&Co). The project CSS is linked from in index.html; it defines the "Verlag A" / "Verlag B" pair. In use: 400 Book (+ italic) for body, 800 Bold for headings and buttons. The project also serves Verlag 700, Verlag Compressed 700/800, Chronicle SSm, and Ideal Sans SSm if any of those are ever wanted. Acie and Falaise are self-hosted from assets/fonts/. Both ship a single Regular weight — always set font-weight: 400 on them, or the browser fakes a bold by smearing the outlines. ------------------------------------------------------------------------- */ @font-face { font-family: "Acie"; src: url("../assets/fonts/AcieWF.woff2") format("woff2"), url("../assets/fonts/AcieWF.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Falaise"; src: url("../assets/fonts/FalaiseWF.woff2") format("woff2"), url("../assets/fonts/FalaiseWF.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Type */ --font-display: "Verlag A", "Verlag B", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Verlag A", "Verlag B", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-heading: "Acie", "Verlag A", "Verlag B", Georgia, serif; --font-script: "Falaise", "Verlag A", "Verlag B", cursive; --fw-display: 800; /* Verlag Bold — UI labels, buttons, nav */ --fw-body: 400; /* Verlag Book — body copy */ /* Bomber palette */ --navy: #16212e; --navy-deep: #0d1620; --olive: #3e4527; --olive-deep: #2b3019; --brown: #46311f; --brown-deep: #2f2115; /* Ink */ --gold: #f2c14e; /* orchid yellow — headings */ --gold-deep: #d29f27; --orange: #f2681b; /* bright orange — accents */ --orange-deep: #c94f0c; --paper: #f4efe1; --text: #dbe3ec; /* light gray-blue — body */ --text-dim: #9aa8b6; /* Metrics */ --wrap: 1140px; --wrap-narrow: 760px; --wrap-prose: 1040px; --nav-h: 68px; --sec-pad: clamp(4rem, 9vw, 7.5rem); --radius: 12px; /* cards, media */ --pill: 999px; /* buttons, inputs */ } /* ------------------------------------------------------------------------- RESET ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); font-weight: var(--fw-body); line-height: 1.7; color: var(--text); background: var(--navy-deep); overflow-x: clip; /* not `hidden` — that would break position: sticky below */ -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } img { height: auto; } button, input { font: inherit; color: inherit; } /* Film-grain overlay — the printed-poster tooth */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------------------- HELPERS ------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); } .wrap--narrow { max-width: var(--wrap-narrow); } .wrap--prose { max-width: var(--wrap-prose); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; top: -100px; transform: translateX(-50%); z-index: 10000; padding: 0.75rem 1.25rem; background: var(--gold); color: var(--navy-deep); font-weight: var(--fw-display); text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 0.5rem; } :where(a, button, input, [tabindex]):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } .accent { color: var(--orange); } /* ------------------------------------------------------------------------- NAV ------------------------------------------------------------------------- */ /* Sticky, not fixed. A fixed bar anchors to iOS Safari's layout viewport, which drifts out of step with the visual viewport as the URL chrome collapses — page content then shows in the gap above the bar. A sticky bar rides the normal scroll, so nothing can get above it. Always solid, too: the old scroll-driven transparent state lagged on iOS. */ .nav { position: sticky; top: 0; z-index: 500; background: var(--navy-deep); border-bottom: 2px solid rgba(219, 227, 236, 0.12); } /* Full-bleed: brand hugs the left edge, links the right — no centred wrap */ .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--nav-h); padding-inline: clamp(1.25rem, 3vw, 2.75rem); } .nav__brand { font-family: var(--font-heading); font-size: clamp(1.0625rem, 2.8vw, 1.375rem); font-weight: 400; /* Acie is single-weight */ letter-spacing: 0.06em; /* it already carries wide sidebearings */ text-transform: uppercase; color: var(--gold); text-decoration: none; white-space: nowrap; transition: color 0.2s ease; } .nav__brand:hover { color: var(--orange); } .nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); margin: 0; padding: 0; list-style: none; } .nav__link { font-family: var(--font-display); font-size: 0.9375rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); text-decoration: none; padding-block: 0.35rem; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .nav__link:hover, .nav__link:focus-visible { color: var(--gold); border-bottom-color: var(--gold); } .nav__link--cta { color: var(--orange); } .nav__link--cta:hover { color: var(--orange); border-bottom-color: var(--orange); } /* Hamburger */ .nav__toggle { display: none; width: 44px; height: 44px; place-items: center; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.3); cursor: pointer; } .nav__bars, .nav__bars::before, .nav__bars::after { display: block; width: 20px; height: 2px; background: var(--gold); transition: transform 0.25s ease, opacity 0.2s ease; } .nav__bars { position: relative; } .nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; } .nav__bars::before { top: -6px; } .nav__bars::after { top: 6px; } .nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; } .nav__toggle[aria-expanded="true"] .nav__bars::before { transform: translateY(6px) rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__bars::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 47.99rem) { .nav__toggle { display: grid; } .nav__menu { position: absolute; top: 100%; left: 0; right: 0; background: rgba(13, 22, 32, 0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(219, 227, 236, 0.12); clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; transition: clip-path 0.35s ease, opacity 0.25s ease; } .nav__menu.is-open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem clamp(1.25rem, 5vw, 2.5rem) 1.25rem; } .nav__link { display: block; padding-block: 0.9rem; font-size: 1.0625rem; border-bottom: 1px solid rgba(242, 193, 78, 0.2); } .nav__link:hover, .nav__link:focus-visible { border-bottom-color: rgba(242, 193, 78, 0.2); } } /* ------------------------------------------------------------------------- SECTIONS ------------------------------------------------------------------------- */ .section { position: relative; padding-block: var(--sec-pad); overflow: hidden; scroll-margin-top: var(--nav-h); } .section--olive { background: var(--olive); } .section--olive-deep { background: var(--olive-deep); } .section--brown { background: var(--brown); } .section--brown-deep { background: var(--brown-deep); } .section--navy { background: var(--navy); } .section > * { position: relative; z-index: 1; } /* ------------------------------------------------------------------------- TYPE ------------------------------------------------------------------------- */ .h2, .h3 { font-family: var(--font-heading); color: var(--gold); font-weight: 400; /* Acie is single-weight — see the note up top */ line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; } .h2 { font-size: clamp(1.875rem, 4.5vw, 2.375rem); text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .h3 { font-size: clamp(1.375rem, 3vw, 1.875rem); } /* Gold rule with a center diamond — poster furniture */ .prose { font-size: 1.0625em; } .prose p + p { margin-top: 1.35rem; } .prose p { text-wrap: pretty; } /* Drop cap, three lines deep. Fallback path: a float sized so its box is just under 3 line boxes. The arithmetic only holds at one measure, so it drifts on narrow screens. */ .prose > p:first-of-type::first-letter { float: left; font-size: 7em; line-height: 0.72; font-weight: var(--fw-display); color: var(--orange); padding-right: 0.18em; padding-top: 0.02em; } /* Preferred path: the browser sinks the letter exactly three lines and sits it on the third baseline, at any width. */ @supports (initial-letter: 3) or (-webkit-initial-letter: 3) { .prose > p:first-of-type::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; /* NB: font-size is inherited here, so this em is a BODY em, not a cap em. The L's foot reaches nearly as far right as its widest point, so the third line gets exactly this much clearance and no more. */ margin-right: 0.78em; -webkit-initial-letter: 3; initial-letter: 3; } } /* ------------------------------------------------------------------------- HERO ------------------------------------------------------------------------- */ .hero { position: relative; scroll-margin-top: var(--nav-h); padding-block: clamp(0.75rem, 2.5vw, 1.75rem) var(--sec-pad); background: var(--olive); overflow: hidden; text-align: center; } /* Spotlight vignette. This is the one deliberate gradient left in the design — a vignette cannot be a flat fill. It sits above the texture and below the content (z-index 1), so the type and the video stay untouched while the edges fall away to a very dark olive, never to black. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( ellipse 69% 65% at 50% 48%, rgba(19, 21, 12, 0) 28%, rgba(19, 21, 12, 0.48) 60%, rgba(19, 21, 12, 0.72) 80%, rgba(19, 21, 12, 0.91) 100% ); } .hero__inner { position: relative; z-index: 1; } /* Logotype mockup, set in Verlag. The `img` rule is kept so dropping the real artwork back in needs no CSS change. */ .logotype { /* One source of truth for the name's size — the script's offset is expressed as a ratio of it, so the lockup holds at every width. */ --name-fs: clamp(2.5rem, 10.5vw, 6.5rem); max-width: min(880px, 100%); margin: 0 auto; } .logotype img { width: 100%; } .logotype__the, .logotype__name { display: block; font-weight: 400; } .logotype__the { position: relative; font-family: var(--font-script); font-size: clamp(2rem, 6.5vw, 4rem); line-height: 1; letter-spacing: 0; color: var(--orange); /* Sit "The" over the MB of BOMBER, not over the whole lockup. Measured: the centre of MB falls 1.161 name-font-sizes left of centre. Re-measure this if the name's letter-spacing or word-spacing ever changes. */ left: calc(var(--name-fs) * -1.161); margin-bottom: calc(var(--name-fs) * -0.08); } .logotype__name { font-family: var(--font-heading); font-size: var(--name-fs); line-height: 0.88; letter-spacing: -0.045em; word-spacing: -0.14em; /* Acie carries wide sidebearings already */ text-transform: uppercase; color: #fff; } /* Script face: no caps, no tracking — both wreck a connecting script */ .hero__credit { margin-top: 1.25rem; font-family: var(--font-script); font-weight: 400; font-size: clamp(1.3rem, 3.2vw, 1.725rem); letter-spacing: 0; color: var(--text); } .hero__credit-sep { color: var(--gold); margin-inline: 0.6em; } /* Names set in Acie caps against the script "By" / "Illustrated by". Acie's caps read larger than the script at the same size, so step it down to keep the two on an even optical footing. */ .hero__credit .accent { font-family: var(--font-heading); font-weight: 400; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; /* a name never breaks across lines */ } /* Too narrow for one line: stack the two credits and drop the star */ @media (max-width: 47.99rem) { .hero__credit-part { display: block; } .hero__credit-part + .hero__credit-part { margin-top: 0.3em; } .hero__credit-sep { display: none; } } /* --- Video thumbnail --------------------------------------------------- */ .video { display: block; position: relative; width: min(1040px, 100%); margin: clamp(2rem, 5vw, 3rem) auto 0; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--navy-deep); text-decoration: none; } .video__thumb { width: 100%; height: 100%; object-fit: cover; /* Animate `scale`, NOT `transform`. Transitioning `transform` here promotes the image to its own compositor layer and it escapes the parent's rounded overflow clip — the art then fails to paint at all. The independent `scale` property gives the same motion and renders. */ transition: scale 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* The frame stays put and the art grows inside it — overflow does the crop */ .video:hover .video__thumb, .video:focus-visible .video__thumb { scale: 1.05; } .video::after { content: ""; position: absolute; inset: 0; background: rgba(13, 22, 32, 0.3); /* keeps the white play control legible over busy art */ } .video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: clamp(76px, 17%, 184px); aspect-ratio: 1.82; display: grid; place-items: center; border: 4px solid #fff; border-radius: 6px; background: rgba(0, 0, 0, 0.12); transition: background 0.25s ease; } .video__play svg { width: 44%; fill: #fff; } @media (min-width: 48rem) { .video__play { border-width: 5px; border-radius: 8px; } } .video:hover .video__play { background: rgba(0, 0, 0, 0.3); } .video__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1rem; font-family: var(--font-display); font-size: clamp(0.8rem, 2.2vw, 1rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); /* Flat scrim, not a fade — keeps the label legible over any still */ background: rgba(13, 22, 32, 0.72); } /* ------------------------------------------------------------------------- EMAIL CAPTURE ------------------------------------------------------------------------- */ .signup { width: min(620px, 100%); margin: clamp(2.5rem, 6vw, 3.5rem) auto 0; text-align: center; } .signup--band { margin-top: 0; } .signup__title { font-family: var(--font-heading); font-size: clamp(1.625rem, 4.5vw, 2.5rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; color: var(--gold); } .signup__sub { margin-top: 0.75rem; color: var(--text); font-size: 1rem; text-wrap: pretty; } .signup__form { margin-top: 1.75rem; display: grid; gap: 0.75rem; } .signup__input { width: 100%; padding: 0.95rem 1.35rem; background: rgba(0, 0, 0, 0.35); border: 2px solid rgba(219, 227, 236, 0.28); border-radius: var(--pill); color: var(--paper); transition: border-color 0.2s ease, background 0.2s ease; } .signup__input::placeholder { color: var(--text-dim); } .signup__input:hover { border-color: rgba(219, 227, 236, 0.55); } .signup__input:focus { border-color: var(--gold); background: rgba(0, 0, 0, 0.5); outline: none; } .signup__input[aria-invalid="true"] { border-color: var(--orange); } .btn { width: 100%; padding: 1rem 1.75rem; border: none; border-radius: var(--pill); background: var(--orange); color: #fff; font-family: var(--font-display); font-size: clamp(1rem, 2.6vw, 1.25rem); font-weight: var(--fw-display); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease; } .btn:hover { background: #ff7a2e; } .btn:active { background: var(--orange-deep); } .btn[disabled] { opacity: 0.65; cursor: progress; } .signup__msg { min-height: 1.5em; font-size: 0.9375rem; color: var(--gold); } .signup__msg[data-state="error"] { color: var(--orange); } @media (min-width: 34rem) { .signup__form { grid-template-columns: 1fr auto; align-items: start; } .btn { width: auto; } .signup__msg { grid-column: 1 / -1; } } /* ------------------------------------------------------------------------- CAROUSEL ------------------------------------------------------------------------- */ /* The band is the artwork — trim the padding so the plates carry it */ #artwork { padding-block: clamp(2.5rem, 5vw, 4rem); } .carousel { position: relative; } .carousel__track { display: flex; gap: clamp(1rem, 3vw, 1.75rem); margin: 0; padding: 0.5rem clamp(1.25rem, 5vw, 2.5rem) 1.5rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; /* Snap respects scroll-padding, not padding — keep the two in step or the first slide snaps flush to the edge and loses its inset. */ scroll-padding-inline: clamp(1.25rem, 5vw, 2.5rem); scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; } .carousel__track::-webkit-scrollbar { display: none; } @media (prefers-reduced-motion: reduce) { .carousel__track { scroll-behavior: auto; } } .carousel__slide { flex: 0 0 min(720px, 88%); scroll-snap-align: start; } @media (min-width: 48rem) { /* Room for the arrows to sit clear of the artwork */ .carousel__track { padding-inline: clamp(3.5rem, 5vw, 4.5rem); scroll-padding-inline: clamp(3.5rem, 5vw, 4.5rem); } } @media (min-width: 60rem) { .carousel__slide { /* Near-square art: also cap by viewport height so a whole page fits on screen */ flex-basis: min(1080px, 78%, 79vh); } } .art { margin: 0; border-radius: var(--radius); background: var(--navy-deep); overflow: hidden; } .art img { width: 100%; aspect-ratio: 10.5 / 9.5; object-fit: cover; } .carousel__arrow { position: absolute; top: calc(50% - 1.5rem); transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; display: none; place-items: center; border: none; border-radius: 50%; background: rgba(13, 22, 32, 0.8); cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease; } .carousel__arrow svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .carousel__arrow:hover { background: var(--orange); } .carousel__arrow:hover svg { stroke: #fff; } .carousel__arrow[disabled] { opacity: 0.25; cursor: default; } .carousel__arrow[disabled]:hover { background: rgba(13, 22, 32, 0.8); } .carousel__arrow[disabled]:hover svg { stroke: var(--gold); } .carousel__arrow--prev { left: clamp(0.5rem, 2vw, 1.25rem); } .carousel__arrow--next { right: clamp(0.5rem, 2vw, 1.25rem); } @media (min-width: 48rem) { .carousel__arrow { display: grid; } } .carousel__dots { display: flex; justify-content: center; gap: 0.625rem; margin-top: 0.5rem; } .carousel__dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: rgba(242, 193, 78, 0.35); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .carousel__dot[aria-selected="true"] { background: var(--orange); transform: scale(1.3); } /* ------------------------------------------------------------------------- KICKSTARTER ------------------------------------------------------------------------- */ .ks { text-align: center; padding-block: clamp(3.25rem, 7vw, 5rem); } .ks__mark { width: clamp(48px, 9vw, 64px); height: auto; margin: 0 auto; fill: var(--gold); } .ks__title { margin-top: 1.25rem; font-family: var(--font-heading); font-size: clamp(1.75rem, 5.5vw, 3rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; color: var(--gold); text-wrap: balance; } .ks__copy { max-width: 46ch; margin: 1rem auto 0; text-wrap: pretty; } .ks .btn { margin-top: 2rem; } .btn--wide { display: inline-block; width: auto; padding-inline: clamp(2rem, 6vw, 3.25rem); text-decoration: none; text-align: center; } /* ------------------------------------------------------------------------- AUTHOR / ILLUSTRATOR ------------------------------------------------------------------------- */ .creators { display: grid; gap: clamp(3rem, 7vw, 4.5rem); } @media (min-width: 48rem) { .creators { grid-template-columns: 1fr 1fr; gap: clamp(3.5rem, 8vw, 7.5rem); } } .creator { text-align: center; } .creator__portrait { width: clamp(160px, 34vw, 210px); aspect-ratio: 1; margin: 0 auto 1.75rem; border-radius: 50%; overflow: hidden; background: var(--navy-deep); } .creator__portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); } /* Names are bolded in the bio copy rather than set on their own line. Verlag 700 is the text bold — 800 is too heavy inside a paragraph. */ .creator__bio strong { font-weight: 700; } .creator__bio { margin-top: 1.125rem; text-wrap: pretty; /* balances the ragged edge that centring exposes */ } .creator__bio + .creator__bio { margin-top: 1rem; } .socials { display: flex; justify-content: center; gap: 0.875rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } .social { display: grid; place-items: center; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.28); color: var(--gold); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .social:hover, .social:focus-visible { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-2px); } .social__icon { width: 19px; height: 19px; fill: currentColor; } .social__icon--stroke { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* ------------------------------------------------------------------------- FOOTER ------------------------------------------------------------------------- */ .footer { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: var(--navy-deep); text-align: center; } .footer__title { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .footer__legal { margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-dim); } /* ------------------------------------------------------------------------- CINEMATIC INTRO The page opens from black, then the hero rises in staged beats. ------------------------------------------------------------------------- */ body::before { content: ""; position: fixed; inset: 0; z-index: 9998; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.1s ease; } body.is-loading::before { opacity: 1; } body.is-loading { overflow: hidden; } /* The rays hold a slow drift once the curtain is up */ [data-intro] { opacity: 0; transform: translateY(28px) scale(0.985); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } body.is-ready [data-intro] { opacity: 1; transform: none; } body.is-ready [data-intro="1"] { transition-delay: 0.15s; } body.is-ready [data-intro="2"] { transition-delay: 0.35s; } body.is-ready [data-intro="3"] { transition-delay: 0.55s; } body.is-ready [data-intro="4"] { transition-delay: 0.75s; } .nav { opacity: 0; transform: translateY(-100%); transition: opacity 0.8s ease 0.9s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s; } body.is-ready .nav { opacity: 1; transform: none; } /* ------------------------------------------------------------------------- TEXTURE Riveted aircraft skin, held far back. Inset negatively so the parallax drift never walks an edge into view; the section's overflow clips it. ------------------------------------------------------------------------- */ .texture { position: absolute; /* Overhang has to exceed the maximum drift or an edge walks into view. Both terms are negative, so min() picks the larger overhang. 110px clears MAX_DRIFT (80) in main.js with room to spare. */ top: min(-18%, -110px); bottom: min(-18%, -110px); left: -10%; right: -10%; z-index: 0; pointer-events: none; opacity: 0.07; background-image: url("../assets/images/texture-skin.webp"); background-size: cover; background-position: center; will-change: transform; } /* Wood carries the two brown bands; the riveted plate carries the rest */ .texture--wood { background-image: url("../assets/images/texture-wood.webp"); opacity: 0.11; } /* `.section > *` promotes every child to z-index 1 — keep this one behind */ .section > .texture { z-index: 0; } /* ------------------------------------------------------------------------- PARALLAX + REVEAL ------------------------------------------------------------------------- */ [data-parallax] { will-change: transform; } [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-parallax] { translate: none !important; } [data-reveal] { opacity: 1; transform: none; transition: none; } [data-intro] { opacity: 1; transform: none; transition: none; } .nav { opacity: 1; transform: none; transition: none; } body::before { transition: none; } .video__thumb, .art, .btn, .carousel__dot { transition: none; } .video:hover .video__thumb { scale: none; } }