/* ========================================================================== FLY & RIDE / flyandride.ie "The Atlantic Dossier". Concept build. ========================================================================== */ /* --------------------------------------------------------------- 01. FONTS */ /* Schibsted Grotesk does the work: variable 400..900, clean, sturdy, a little editorial warmth. Instrument Serif italic is the accent voice, used only on the phrase that carries the sentence. Every Irish competitor is running Bebas Neue / Montserrat / Poppins on a WordPress template. Being clean is the differentiator; being weird isn't. */ @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/schibsted-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/schibsted-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Schibsted Grotesk'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('../fonts/schibsted-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrumentserif-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrumentserif-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------------------------- 02. TOKENS */ /* Three Irish palettes. Swap by setting data-theme on : peat, heather, amber wet slate, sea foam, gorse No attribute = "racing" (below), the default. To lock one in for production: paste that block's values over :root, delete the other [data-theme] blocks, and remove the switcher (section 30). */ /* ---- DEFAULT: "Racing Green" ------------------------------------------ Irish racing green, buttermilk, gorse yellow. Gorse is the stuff that turns every hillside on the west coast yellow in spring, and it's the most Irish colour there is that isn't shamrock. */ :root { /* Bottle green, deepening to near-black */ --ink: #08150F; --ink-1: #0C1E15; --ink-2: #12291D; --ink-3: #1B3B29; --ink-4: #2A5238; /* Buttermilk / limestone */ --bone: #F4EFE0; --bone-2: #D3CCB6; --bone-dim: #8F8B76; /* Gorse */ --signal: #FFC233; --signal-2: #FFD873; --signal-dk: #C08F12; /* Sea + land */ --foam: #57C7B4; --lichen: #9DB477; --brass: #C98F3F; --font-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --font-label: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif; --gut: clamp(1.25rem, 4vw, 3.5rem); --maxw: 1680px; --rule: 1px solid color-mix(in srgb, var(--bone) 14%, transparent); --rule-2: 1px solid color-mix(in srgb, var(--bone) 8%, transparent); --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, .05, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --nav-h: 78px; } /* ---- "Bog Oak" --------------------------------------------------------- Cut turf, heather, and the amber of a whiskey held up to a window. Warmest of the three; the least literal about "Ireland = green". */ [data-theme='bog'] { --ink: #120D0A; --ink-1: #1A130E; --ink-2: #241A13; --ink-3: #34261B; --ink-4: #4A3726; --bone: #F2E9D8; --bone-2: #CFC2AB; --bone-dim: #8E8371; --signal: #E08A2B; --signal-2: #F0A855; --signal-dk: #A45D12; --foam: #7FA9A0; --lichen: #8B9A63; --brass: #A98FC4; /* heather */ } /* ---- "Atlantic" -------------------------------------------------------- Wet slate, sea foam, gorse. Coldest and most coastal. This is what the Wild Atlantic Way actually looks like on the days people remember. */ [data-theme='atlantic'] { --ink: #0A1418; --ink-1: #0E1D23; --ink-2: #142932; --ink-3: #1D3B47; --ink-4: #2C5364; --bone: #EEF1F0; --bone-2: #C2CCCC; --bone-dim: #82908F; --signal: #F5C043; --signal-2: #FFD675; --signal-dk: #B98C15; --foam: #4FC3C3; --lichen: #7FA083; --brass: #C9A24A; } /* --------------------------------------------------------------- 03. RESET */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { background: var(--ink); color: var(--bone); font-family: var(--font-body); font-size: clamp(1rem, .95rem + .2vw, 1.075rem); line-height: 1.62; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; text-rendering: optimizeLegibility; } img, video, svg { display: block; max-width: 100%; } img, video { height: auto; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; color: inherit; background: none; border: none; } button { cursor: pointer; } ::selection { background: var(--signal); color: var(--ink); } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; } /* ----------------------------------------------------------- 04. TYPE SCALE */ .display { font-family: var(--font-display); font-weight: 800; line-height: .92; letter-spacing: -.032em; text-wrap: balance; } .display--xl { font-size: clamp(3rem, 9.5vw, 10rem); } .display--lg { font-size: clamp(2.5rem, 6.2vw, 5.75rem); } .display--md { font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.02; } .display--sm { font-size: clamp(1.4rem, 2.2vw, 1.95rem); line-height: 1.1; } /* The accent voice. Instrument Serif is a 400-only display face, so it reads noticeably lighter beside Schibsted 800. That contrast is the point. It runs slightly large to match the sans's x-height. */ .serif-it { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: -.005em; } .label { font-family: var(--font-label); font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; } .label--sm { font-size: .625rem; letter-spacing: .18em; } .label--md { font-size: .8125rem; letter-spacing: .12em; } .dim { color: var(--bone-dim); } .signal { color: var(--signal); } .foam { color: var(--foam); } .lede { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.55; color: var(--bone-2); max-width: 46ch; text-wrap: pretty; } /* Numbered label, e.g. "01 / LAND" */ .tag { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-label); font-size: .5625rem; font-weight: 600; font-stretch: 87.5%; letter-spacing: .26em; text-transform: uppercase; color: var(--bone-dim); } .tag::before { content: ''; width: 22px; height: 1px; background: var(--signal); flex: none; } .tag--foam::before { background: var(--foam); } /* ------------------------------------------------------------- 05. LAYOUT */ .shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .section { position: relative; padding-block: clamp(5rem, 11vh, 9.5rem); } .section--tight { padding-block: clamp(3.5rem, 7vh, 6rem); } .section--flush { padding-block: 0; } .rule-top { border-top: var(--rule); } /* ------------------------------------------------- 06. ATMOSPHERE / TEXTURE */ /* Film grain. The whole site sits under this. Layer stays viewport-sized and shifts the tile, not itself: an overscanned element here is a multi-hundred-megabyte composited surface. */ .grain { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .022; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; animation: grain-drift 5.4s steps(1, end) infinite; } @keyframes grain-drift { 0% { background-position: 0px 0px; } 17% { background-position: -37px 19px; } 34% { background-position: 22px -41px; } 50% { background-position: -13px 33px; } 67% { background-position: 44px 11px; } 84% { background-position: -29px -24px; } 100% { background-position: 0px 0px; } } /* Ordnance-survey contour wash */ .contours { position: absolute; inset: 0; pointer-events: none; opacity: .26; background-image: repeating-radial-gradient(ellipse 900px 380px at 18% 30%, transparent 0 34px, color-mix(in srgb, var(--lichen) 14%, transparent) 34px 35px), repeating-radial-gradient(ellipse 700px 500px at 84% 74%, transparent 0 42px, color-mix(in srgb, var(--foam) 9%, transparent) 42px 43px); mask-image: radial-gradient(ellipse 120% 100% at 50% 50%, #000 20%, transparent 78%); } /* Hairline grid */ .gridlines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, color-mix(in srgb, var(--bone) 3.5%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--bone) 3.5%, transparent) 1px, transparent 1px); background-size: 90px 90px; mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); } /* ------------------------------------------------------------ 07. CURSOR */ @media (hover: hover) and (pointer: fine) { body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; } .cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; mix-blend-mode: difference; transition: opacity .2s linear; /* handoff when the pointer leaves the window */ } /* The children carry the transforms, so the hint belongs on them. */ .cursor__dot, .cursor__ring, .cursor__label { will-change: transform; } /* JS writes .cursor__dot's transform every frame, so nothing here may transition it (the dot would trail the pointer by the transition duration, forever) and nothing here may set it (an inline transform always wins). The hover scale therefore lives on the pseudo-element, which JS never touches. */ .cursor__dot { position: fixed; top: 0; left: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; } .cursor__dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--bone); transition: transform .3s var(--ease), opacity .3s; } .cursor__ring { position: fixed; top: 0; left: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid color-mix(in srgb, var(--bone) 55%, transparent); border-radius: 50%; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .3s, border-color .3s; } .cursor__label { position: fixed; top: 0; left: 0; transform: translate(14px, 14px); font-family: var(--font-label); font-size: .5rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--bone); opacity: 0; transition: opacity .25s; white-space: nowrap; } body.cursor-hot .cursor__ring { width: 68px; height: 68px; margin: -34px 0 0 -34px; border-color: var(--signal); } body.cursor-hot .cursor__dot::before { transform: scale(.35); } body.cursor-hot .cursor__label { opacity: 1; } } .cursor { display: none; } @media (hover: hover) and (pointer: fine) { body.has-cursor .cursor { display: block; } } /* --------------------------------------------------------- 08. PRELOADER */ .preload { position: fixed; inset: 0; z-index: 9997; background: var(--ink); display: grid; place-items: center; transition: opacity .7s var(--ease), visibility .7s; } .preload[data-done] { opacity: 0; visibility: hidden; } .preload__inner { width: min(440px, 78vw); text-align: center; } .preload__mark { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 6vw, 3.2rem); letter-spacing: -.04em; line-height: 1; margin-bottom: 1.6rem; overflow: hidden; } .preload__mark span { display: inline-block; transform: translateY(105%); animation: rise .9s var(--ease-out) forwards; } .preload__mark span:nth-child(2) { animation-delay: .07s; } .preload__mark span:nth-child(3) { animation-delay: .14s; } @keyframes rise { to { transform: translateY(0); } } .preload__bar { height: 1px; background: color-mix(in srgb, var(--bone) 16%, transparent); position: relative; overflow: hidden; } .preload__bar i { position: absolute; inset: 0 100% 0 0; background: var(--signal); transition: right .25s linear; } .preload__meta { display: flex; justify-content: space-between; margin-top: .85rem; color: var(--bone-dim); } /* --------------------------------------------------------------- 09. NAV */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: var(--nav-h); display: flex; align-items: center; transition: background .5s var(--ease), border-color .5s, backdrop-filter .5s; border-bottom: 1px solid transparent; } /* At the top of a hero the nav sits on bare video, and over a bright sky the links vanish. This is a soft scrim that buys contrast without reading as a bar; it fades out once the solid stuck background takes over. */ .nav::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 220%; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 82%, transparent) 0%, color-mix(in srgb, var(--ink) 45%, transparent) 45%, transparent 100%); transition: opacity .5s var(--ease); } .nav[data-stuck]::before { opacity: 0; } .nav[data-stuck] { background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom-color: color-mix(in srgb, var(--bone) 10%, transparent); } .nav[data-hidden] { transform: translateY(-100%); transition: transform .45s var(--ease); } .nav__in { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .brand { display: flex; align-items: baseline; gap: .5rem; font-family: var(--font-display); font-weight: 900; font-size: 1.32rem; letter-spacing: -.035em; line-height: 1; white-space: nowrap; } .brand__amp { color: var(--signal); font-family: var(--font-serif); font-style: italic; font-weight: 400; } .brand__tld { font-family: var(--font-label); font-size: .5rem; font-weight: 600; letter-spacing: .22em; color: var(--bone-dim); transform: translateY(-.35em); } .nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.4rem); } @media (max-width: 1000px) { .nav__links { display: none; } } .nav__link { position: relative; font-family: var(--font-label); font-size: .5625rem; font-weight: 600; font-stretch: 87.5%; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-2); padding-block: .5rem; transition: color .3s; } .nav__link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--signal); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); } .nav__link:hover { color: var(--bone); } .nav__link:hover::after { transform: scaleX(1); transform-origin: left; } .nav__link[aria-current] { color: var(--bone); } .nav__link[aria-current]::after { transform: scaleX(1); } .nav__right { display: flex; align-items: center; gap: 1rem; } /* Burger */ .burger { width: 46px; height: 46px; display: grid; place-content: center; gap: 5px; border: var(--rule); border-radius: 50%; transition: border-color .3s, background .3s; } /* Must follow the rule above, because a media query adds no specificity and source order is all that decides this. The burger exists only to reach the links when they're hidden (≤1000px, see .nav__links). Showing it alongside visible links put a fullscreen menu of duplicates on top of the very nav it was duplicating. */ @media (min-width: 1001px) { .burger { display: none; } } .burger:hover { border-color: var(--signal); } .burger i { display: block; width: 15px; height: 1.5px; background: var(--bone); transition: transform .45s var(--ease), opacity .3s; } body[data-menu] .burger i:first-child { transform: translateY(3.25px) rotate(45deg); } body[data-menu] .burger i:last-child { transform: translateY(-3.25px) rotate(-45deg); } /* --------------------------------------------------------- 10. MENU PANEL */ .menu { position: fixed; inset: 0; z-index: 890; background: var(--ink-1); display: grid; grid-template-rows: 1fr auto; padding: calc(var(--nav-h) + 4vh) 0 3vh; clip-path: inset(0 0 100% 0); transition: clip-path .85s var(--ease-out); pointer-events: none; overflow-y: auto; } body[data-menu] .menu { clip-path: inset(0 0 0 0); pointer-events: auto; } .menu__list { display: grid; align-content: center; gap: .1rem; } .menu__item { overflow: hidden; } .menu__link { display: flex; align-items: baseline; gap: 1.4rem; padding-block: clamp(.4rem, 1.4vh, 1rem); font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 6.4vw, 3.6rem); line-height: .95; letter-spacing: -.04em; color: var(--bone); transform: translateY(110%); transition: transform .8s var(--ease-out), color .35s; } body[data-menu] .menu__link { transform: translateY(0); } .menu__item:nth-child(1) .menu__link { transition-delay: .12s; } .menu__item:nth-child(2) .menu__link { transition-delay: .18s; } .menu__item:nth-child(3) .menu__link { transition-delay: .24s; } .menu__item:nth-child(4) .menu__link { transition-delay: .30s; } .menu__item:nth-child(5) .menu__link { transition-delay: .36s; } .menu__link:hover { color: var(--signal); } .menu__link i { font-family: var(--font-label); font-style: normal; font-size: .5625rem; font-weight: 600; letter-spacing: .2em; color: var(--bone-dim); } .menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 2rem; border-top: var(--rule); color: var(--bone-dim); } /* ------------------------------------------------------------ 11. BUTTONS */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .75rem; padding: 1.05rem 1.9rem; font-family: var(--font-label); font-size: .5625rem; font-weight: 700; font-stretch: 87.5%; letter-spacing: .24em; text-transform: uppercase; border: 1px solid var(--signal); background: var(--signal); color: var(--ink); overflow: hidden; isolation: isolate; transition: color .4s var(--ease), border-color .4s; white-space: nowrap; } .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bone); transform: translateY(101%); transition: transform .5s var(--ease); } .btn:hover::before { transform: translateY(0); } .btn:hover { color: var(--ink); } .btn--ghost { background: transparent; border-color: color-mix(in srgb, var(--bone) 26%, transparent); color: var(--bone); } .btn--ghost::before { background: var(--bone); } .btn--ghost:hover { color: var(--ink); border-color: var(--bone); } .btn--block { width: 100%; } .btn__arrow { transition: transform .4s var(--ease); } .btn:hover .btn__arrow { transform: translateX(4px); } /* Text link with rule */ .tlink { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-label); font-size: .5625rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; padding-bottom: .4rem; border-bottom: 1px solid color-mix(in srgb, var(--bone) 22%, transparent); transition: border-color .35s, color .35s, gap .35s var(--ease); } .tlink:hover { border-color: var(--signal); color: var(--signal); gap: 1rem; } /* --------------------------------------------------------- 12. REVEALS */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .95s var(--ease-out), transform .95s var(--ease-out); transition-delay: var(--d, 0ms); } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal='mask'] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-out); transition-delay: var(--d, 0ms); } [data-reveal='mask'].is-in { clip-path: inset(0 0 0 0); } /* Line-by-line headline rise */ /* overflow:hidden is what makes the line rise from nothing, but it also crops anything that overshoots the line box, and Instrument Serif italic has a long descender. Pad for it, then pull the padding back out of the layout. */ .rise { display: block; overflow: hidden; padding-bottom: .26em; margin-bottom: -.26em; } .rise > * { display: block; transform: translateY(106%); transition: transform 1.15s var(--ease-out); transition-delay: var(--d, 0ms); } .rise.is-in > * { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal], .rise > * { opacity: 1 !important; transform: none !important; clip-path: none !important; } .grain { animation: none; } } /* ------------------------------------------------------------- 13. HERO */ /* The body is centred in the space between the nav and the HUD, rather than bottom-stacked above it. Bottom-stacking left a dead band under the header and read as a mistake instead of as negative space. The HUD comes out of flow so the padding below is the only thing reserving its height. */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: var(--nav-h); padding-bottom: clamp(76px, 10vh, 104px); } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--ink) 2%, color-mix(in srgb, var(--ink) 55%, transparent) 34%, transparent 68%), linear-gradient(to right, color-mix(in srgb, var(--ink) 78%, transparent), transparent 62%), radial-gradient(ellipse 130% 90% at 50% 40%, transparent 30%, color-mix(in srgb, var(--ink) 85%, transparent) 100%); } .hero__body { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gut) clamp(1.5rem, 4vh, 3rem); } .hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; margin-bottom: clamp(1rem, 2.5vh, 1.75rem); color: var(--bone-2); } .hero__eyebrow b { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); animation: pulse-dot 2.4s var(--ease-io) infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 70%, transparent); } 50% { opacity: .5; box-shadow: 0 0 0 7px transparent; } } .hero__h1 { margin-bottom: clamp(1.1rem, 2.6vh, 2rem); } .hero__h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.08em; color: var(--signal); letter-spacing: -.005em; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(1.5rem, 4vw, 4rem); } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; align-items: start; } } .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; } /* Scroll cue */ .hero__cue { display: flex; align-items: center; gap: .8rem; color: var(--bone-dim); writing-mode: vertical-rl; height: 130px; } @media (max-width: 900px) { .hero__cue { display: none; } } .hero__cue i { display: block; width: 1px; flex: 1; background: linear-gradient(to bottom, var(--signal), transparent); animation: cue 2.2s var(--ease-io) infinite; transform-origin: top; } @keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; transform-origin: bottom; } } /* HUD telemetry strip */ .hud { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; border-top: var(--rule); background: color-mix(in srgb, var(--ink) 60%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hud__in { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); display: grid; grid-template-columns: repeat(4, 1fr); } @media (max-width: 820px) { .hud__in { grid-template-columns: repeat(2, 1fr); } .hud__cell:nth-child(-n+2) { border-bottom: var(--rule-2); } /* The strip doubles to two rows here (~146px). The hero's padding-bottom is the only thing holding content clear of it, since the HUD is out of flow. */ .hero { padding-bottom: clamp(156px, 20vh, 180px); } } .hud__cell { padding: .9rem 1.1rem; border-left: var(--rule-2); display: flex; flex-direction: column; gap: .28rem; } .hud__cell:first-child { border-left: none; padding-left: 0; } .hud__k { color: var(--bone-dim); font-size: .5rem; letter-spacing: .24em; } .hud__v { font-family: var(--font-label); font-size: .8rem; font-weight: 600; letter-spacing: .02em; } /* --------------------------------------------------------- 14. MARQUEE */ .marquee { position: relative; overflow: hidden; border-block: var(--rule); padding-block: 1.15rem; background: var(--ink-1); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; width: max-content; animation: slide 44s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes slide { to { transform: translateX(-50%); } } .marquee__item { display: inline-flex; align-items: center; gap: 1.6rem; padding-inline: 1.6rem; font-family: var(--font-display); font-weight: 900; font-size: clamp(1rem, 1.7vw, 1.5rem); letter-spacing: -.02em; color: var(--bone-2); white-space: nowrap; } .marquee__item s { text-decoration: none; color: var(--signal); font-size: .6em; transform: translateY(-.15em); } .marquee--rev .marquee__track { animation-direction: reverse; } /* --------------------------------------------------- 15. PREMISE / STEPS */ .premise { display: grid; gap: clamp(2rem, 5vw, 4rem); } .premise__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; } @media (max-width: 900px) { .premise__head { grid-template-columns: 1fr; } } .steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--rule); } @media (max-width: 900px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 2rem) clamp(2rem, 4vw, 3rem); border-left: var(--rule); border-bottom: var(--rule); overflow: hidden; transition: background .55s var(--ease); } .step:first-child { border-left: none; } @media (max-width: 900px) { .step { border-left: none; } } .step:hover { background: var(--ink-1); } .step__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.5rem, 7vw, 6rem); line-height: .8; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--bone) 26%, transparent); margin-bottom: 1.25rem; transition: color .5s var(--ease), -webkit-text-stroke-color .5s; } .step:hover .step__n { color: var(--signal); -webkit-text-stroke-color: var(--signal); } .step__t { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 2.1vw, 1.85rem); letter-spacing: -.03em; line-height: 1; margin-bottom: .75rem; } .step__d { color: var(--bone-dim); font-size: .95rem; max-width: 34ch; } .step__media { margin-top: 1.75rem; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); position: relative; } .step__media video, .step__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(.75); transform: scale(1.04); transition: filter .8s var(--ease), transform 1.1s var(--ease); } .step:hover .step__media video, .step:hover .step__media img { filter: grayscale(0) contrast(1.05) brightness(.95); transform: scale(1); } /* ------------------------------------------------------------- 16. MAP */ .map { position: relative; overflow: hidden; } .map__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } @media (max-width: 1000px) { .map__grid { grid-template-columns: 1fr; } } .map__stage { position: relative; aspect-ratio: 700 / 920; max-height: 82vh; margin-inline: auto; width: 100%; } .map__svg { width: 100%; height: 100%; overflow: visible; } .map-sea { fill: none; } .map-glow { fill: color-mix(in srgb, var(--ink-3) 78%, var(--foam)); } .map-land { fill: color-mix(in srgb, var(--ink-2) 92%, var(--lichen)); stroke: color-mix(in srgb, var(--bone) 20%, transparent); stroke-width: 1.25; } .map-halo { fill: none; stroke: color-mix(in srgb, var(--foam) 22%, transparent); stroke-width: 1; } .map-graticule { stroke: color-mix(in srgb, var(--bone) 7%, transparent); stroke-width: .75; fill: none; } .map-route { fill: none; stroke-width: 3.25; stroke-linecap: round; stroke-linejoin: round; opacity: .3; transition: opacity .45s var(--ease), stroke-width .45s var(--ease); } .map-route.is-active { opacity: 1; stroke-width: 4.75; filter: drop-shadow(0 0 12px currentColor); } .map-node { cursor: pointer; } .map-node__ring { fill: none; stroke: var(--bone); stroke-width: 1.25; opacity: .45; transform-box: fill-box; transform-origin: center; transition: opacity .35s, stroke .35s; } .map-node__dot { fill: var(--bone); transition: fill .35s, r .35s var(--ease); } .map-node__hit { fill: transparent; } .map-node__label { font-family: var(--font-label); font-size: 13px; font-weight: 600; letter-spacing: .18em; fill: var(--bone-dim); transition: fill .35s; pointer-events: none; } .map-node:hover .map-node__ring, .map-node.is-active .map-node__ring { opacity: 1; stroke: var(--signal); } .map-node:hover .map-node__dot, .map-node.is-active .map-node__dot { fill: var(--signal); } .map-node:hover .map-node__label, .map-node.is-active .map-node__label { fill: var(--bone); } .map-node__pulse { fill: none; stroke: var(--signal); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: node-pulse 3s var(--ease-io) infinite; opacity: 0; } .map-node.is-active .map-node__pulse { opacity: 1; } @keyframes node-pulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } } /* Plane that flies the arrival arc */ .map-arc { fill: none; stroke: var(--foam); stroke-width: 1.5; stroke-dasharray: 5 7; opacity: .55; } .map-plane { fill: var(--foam); } /* Route selector list */ .route-list { display: grid; } .route-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; width: 100%; padding: clamp(1rem, 2vh, 1.4rem) 0; border-bottom: var(--rule); text-align: left; transition: padding-left .5s var(--ease); } .route-item:first-child { border-top: var(--rule); } .route-item:hover, .route-item.is-active { padding-left: 1rem; } .route-item__sw { width: 3px; height: 34px; background: currentColor; opacity: .35; transition: opacity .4s, height .4s var(--ease); } .route-item:hover .route-item__sw, .route-item.is-active .route-item__sw { opacity: 1; height: 48px; } .route-item__t { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.25rem, 2.2vw, 1.9rem); letter-spacing: -.03em; line-height: 1.05; color: var(--bone-2); transition: color .4s; } .route-item:hover .route-item__t, .route-item.is-active .route-item__t { color: var(--bone); } .route-item__m { color: var(--bone-dim); margin-top: .2rem; } .route-item__n { font-family: var(--font-label); font-size: .5625rem; font-weight: 600; letter-spacing: .16em; color: var(--bone-dim); text-align: right; white-space: nowrap; } .route-item__n b { display: block; color: var(--bone); font-size: .95rem; letter-spacing: 0; } /* ------------------------------------------------------- 17. FLEET RAIL */ .fleet { position: relative; } .fleet__pin { height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .fleet__head { max-width: var(--maxw); margin-inline: auto; width: 100%; padding: 0 var(--gut); display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.5rem, 3vh, 2.5rem); } .fleet__track { display: flex; gap: clamp(1rem, 1.5vw, 1.75rem); padding-inline: var(--gut); will-change: transform; } .fleet__prog { max-width: var(--maxw); margin: clamp(1.5rem, 3vh, 2.5rem) auto 0; width: 100%; padding-inline: var(--gut); display: flex; align-items: center; gap: 1.25rem; } .fleet__bar { flex: 1; height: 1px; background: color-mix(in srgb, var(--bone) 14%, transparent); position: relative; } .fleet__bar i { position: absolute; inset: 0 100% 0 0; background: var(--signal); } /* Fallback for touch / no-JS: honest horizontal scroll */ .fleet--scroll .fleet__pin { height: auto; } .fleet--scroll .fleet__track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.25rem; scrollbar-width: thin; } .fleet--scroll .bike { scroll-snap-align: center; } .bike { position: relative; flex: none; width: clamp(240px, 25vw, 340px); aspect-ratio: 3 / 4.15; background: var(--ink-1); border: var(--rule-2); overflow: hidden; isolation: isolate; transition: border-color .5s var(--ease); } .bike:hover { border-color: color-mix(in srgb, var(--signal) 55%, transparent); } .bike__img { position: absolute; inset: 0; z-index: 0; } .bike__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.7); transform: scale(1.06); transition: filter .9s var(--ease), transform 1.2s var(--ease); } .bike:hover .bike__img img { filter: grayscale(0) contrast(1.04) brightness(.92); transform: scale(1.01); } .bike__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--ink) 4%, color-mix(in srgb, var(--ink) 40%, transparent) 44%, transparent 72%); } .bike__body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 1.15rem; } .bike__top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; } .bike__cls { font-family: var(--font-label); font-size: .5rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); background: var(--bone); padding: .3rem .5rem; } .bike__idx { font-family: var(--font-label); font-size: .5rem; letter-spacing: .2em; color: var(--bone-dim); } .bike__name { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: .96; letter-spacing: -.035em; margin-bottom: .3rem; } .bike__alias { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: .95rem; color: var(--signal); margin-bottom: .9rem; } .bike__specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding-top: .9rem; border-top: 1px solid color-mix(in srgb, var(--bone) 16%, transparent); } .bike__spec { display: flex; flex-direction: column; gap: .18rem; } .bike__spec span { font-family: var(--font-label); font-size: .45rem; letter-spacing: .18em; color: var(--bone-dim); text-transform: uppercase; } .bike__spec b { font-family: var(--font-label); font-size: .72rem; font-weight: 600; letter-spacing: .01em; } .bike__price { position: absolute; top: 1.15rem; right: 1.15rem; z-index: 3; } /* --------------------------------------------------------- 18. ROUTES */ .rt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); } .rt { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); isolation: isolate; } .rt--wide { grid-column: span 2; aspect-ratio: 16 / 10; } @media (max-width: 760px) { .rt--wide { grid-column: span 1; aspect-ratio: 4 / 5; } } .rt__img { position: absolute; inset: 0; z-index: 0; } .rt__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: brightness(.62) contrast(1.1) saturate(.75); transition: transform 1.4s var(--ease), filter 1s var(--ease); will-change: transform; } .rt:hover .rt__img img { transform: scale(1.16); filter: brightness(.78) contrast(1.04) saturate(1); } .rt__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--ink) 0%, color-mix(in srgb, var(--ink) 30%, transparent) 48%, transparent 76%); } .rt__body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.15rem, 2vw, 1.85rem); } .rt__t { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 2.9vw, 2.6rem); line-height: .92; letter-spacing: -.04em; margin-block: .5rem .55rem; } .rt__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; padding-top: .85rem; margin-top: .85rem; border-top: 1px solid color-mix(in srgb, var(--bone) 18%, transparent); color: var(--bone-dim); } .rt__meta b { color: var(--bone); font-weight: 600; } .rt__go { position: absolute; top: clamp(1.15rem, 2vw, 1.85rem); right: clamp(1.15rem, 2vw, 1.85rem); width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--bone) 30%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--ink) 40%, transparent); backdrop-filter: blur(6px); transition: background .4s, border-color .4s, transform .5s var(--ease); } .rt:hover .rt__go { background: var(--signal); border-color: var(--signal); transform: rotate(45deg); } .rt:hover .rt__go svg { stroke: var(--ink); } /* ---------------------------------------------------------- 19. STATS */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--rule); border-bottom: var(--rule); } @media (max-width: 820px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stat { padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1rem, 2vw, 2rem); border-left: var(--rule-2); text-align: center; } .stat:first-child { border-left: none; } @media (max-width: 820px) { .stat:nth-child(odd) { border-left: none; } .stat:nth-child(-n+2) { border-bottom: var(--rule-2); } } .stat__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 5.5vw, 4.75rem); line-height: .85; letter-spacing: -.05em; margin-bottom: .55rem; font-variant-numeric: tabular-nums; } .stat__n sub { font-size: .35em; vertical-align: baseline; color: var(--signal); margin-left: .1em; } .stat__l { color: var(--bone-dim); } /* ------------------------------------------------------ 20. TESTIMONIAL */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); } @media (max-width: 960px) { .quotes { grid-template-columns: 1fr; } } .quote { display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.5rem, 2.5vw, 2.25rem); border: var(--rule-2); background: var(--ink-1); transition: border-color .5s, transform .6s var(--ease), background .5s; } .quote:hover { border-color: color-mix(in srgb, var(--signal) 40%, transparent); transform: translateY(-5px); background: var(--ink-2); } .quote__mark { font-family: var(--font-display); font-weight: 900; font-size: 3.5rem; line-height: .5; color: var(--signal); height: 1.1rem; } .quote__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.42; color: var(--bone); flex: 1; text-wrap: pretty; } .quote__by { display: flex; align-items: center; gap: .85rem; padding-top: 1.25rem; border-top: var(--rule-2); } .quote__ava { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; filter: grayscale(1); flex: none; } .quote__n b { display: block; font-size: .85rem; font-weight: 600; } /* ------------------------------------------------------------ 21. CTA */ .cta { position: relative; overflow: hidden; min-height: 88svh; display: grid; place-items: center; } .cta__media { position: absolute; inset: 0; z-index: 0; } .cta__media video { width: 100%; height: 100%; object-fit: cover; } .cta__scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 90% 70% at 50% 50%, color-mix(in srgb, var(--ink) 40%, transparent), var(--ink) 82%), color-mix(in srgb, var(--ink) 45%, transparent); } .cta__body { position: relative; z-index: 2; text-align: center; padding: var(--gut); max-width: 62rem; } .cta__h { margin-block: 1.25rem 1.5rem; } .cta__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -.005em; color: var(--signal); } .cta__cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; } /* --------------------------------------------------------- 22. BOOKING */ .book { position: relative; z-index: 5; margin-top: -1px; background: var(--ink-1); border-block: var(--rule); } .book__in { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: stretch; } @media (max-width: 1100px) { .book__in { grid-template-columns: repeat(2, 1fr); } .book__field:nth-child(-n+2) { border-bottom: var(--rule-2); } .book__go { grid-column: span 2; } } @media (max-width: 560px) { .book__in { grid-template-columns: 1fr; } .book__field { border-bottom: var(--rule-2) !important; } .book__go { grid-column: span 1; } } .book__field { display: flex; flex-direction: column; gap: .4rem; padding: 1.15rem 1.35rem; border-left: var(--rule-2); transition: background .4s; min-width: 0; } .book__field:first-child { border-left: none; padding-left: 0; } .book__field:hover, .book__field:focus-within { background: var(--ink-2); } .book__k { color: var(--bone-dim); font-size: .5rem; letter-spacing: .24em; } .book__field select, .book__field input { font-family: var(--font-label); font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--bone); width: 100%; cursor: pointer; appearance: none; -webkit-appearance: none; } .book__field select option { background: var(--ink-2); color: var(--bone); } .book__field input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .45; cursor: pointer; } .book__go { display: grid; padding: 0; min-width: 200px; } .book__go .btn { height: 100%; border-radius: 0; border-width: 0; } @media (max-width: 1100px) { .book__go { min-width: 0; } .book__go .btn { padding-block: 1.15rem; } } /* ---------------------------------------------------------- 23. FOOTER */ .foot { position: relative; overflow: hidden; border-top: var(--rule); background: var(--ink-1); } .foot__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem); padding-block: clamp(3rem, 6vh, 5rem); } @media (max-width: 900px) { .foot__top { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .foot__top { grid-template-columns: 1fr; } } .foot__col h4 { font-family: var(--font-label); font-size: .5rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 1.15rem; } .foot__col ul { list-style: none; display: grid; gap: .55rem; } .foot__col a { color: var(--bone-2); font-size: .92rem; transition: color .3s, padding-left .35s var(--ease); } .foot__col a:hover { color: var(--signal); padding-left: .35rem; } .foot__word { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.5rem, 17vw, 15rem); line-height: .78; letter-spacing: -.055em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--bone) 16%, transparent); padding-block: clamp(1rem, 3vh, 2.5rem); text-align: center; user-select: none; white-space: nowrap; } .foot__word em { font-family: var(--font-serif); font-style: italic; font-weight: 400; -webkit-text-stroke-color: color-mix(in srgb, var(--signal) 55%, transparent); } .foot__bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-block: 1.5rem; border-top: var(--rule); color: var(--bone-dim); } /* ----------------------------------------------------------- 24. TOAST */ .toast { position: fixed; left: 50%; bottom: 2rem; z-index: 950; transform: translate(-50%, 180%); display: flex; align-items: center; gap: 1rem; padding: 1rem 1.4rem; background: var(--bone); color: var(--ink); max-width: min(560px, calc(100vw - 2rem)); transition: transform .7s var(--ease-out); box-shadow: 0 30px 70px -20px rgba(0,0,0,.75); } .toast[data-on] { transform: translate(-50%, 0); } .toast i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); } .toast p { font-size: .88rem; line-height: 1.4; } .toast p b { font-weight: 600; } /* ----------------------------------------------------- 25. PAGE HEADER */ .phead { position: relative; min-height: 62svh; display: flex; align-items: flex-end; overflow: hidden; padding-top: var(--nav-h); } .phead__media { position: absolute; inset: 0; z-index: 0; } .phead__media img, .phead__media video { width: 100%; height: 100%; object-fit: cover; } .phead__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--ink) 3%, color-mix(in srgb, var(--ink) 50%, transparent) 45%, transparent 80%), color-mix(in srgb, var(--ink) 35%, transparent); } .phead__body { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gut) clamp(2rem, 5vh, 3.5rem); } .phead__h { margin-block: 1rem .9rem; } .phead__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -.005em; color: var(--signal); } .crumb { display: flex; align-items: center; gap: .6rem; color: var(--bone-dim); } .crumb a { transition: color .3s; } .crumb a:hover { color: var(--signal); } /* --------------------------------------------------- 26. FLEET (page) */ .fgrid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); } .frow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-bottom: clamp(2.5rem, 6vw, 5rem); border-bottom: var(--rule); } @media (max-width: 900px) { .frow { grid-template-columns: 1fr; } } .frow:nth-child(even) .frow__media { order: 2; } @media (max-width: 900px) { .frow:nth-child(even) .frow__media { order: 0; } } .frow__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); } .frow__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); filter: contrast(1.06) saturate(.9); transition: transform 1.3s var(--ease); will-change: transform; } .frow:hover .frow__media img { transform: scale(1.11); } .frow__badge { position: absolute; top: 1.1rem; left: 1.1rem; z-index: 2; background: var(--signal); color: var(--ink); padding: .38rem .6rem; font-family: var(--font-label); font-size: .5rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; } .frow__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: .94; letter-spacing: -.04em; margin-block: .65rem .35rem; } .frow__alias { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.25rem; color: var(--signal); margin-bottom: 1.1rem; } .frow__specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-block: 1.75rem; padding-block: 1.35rem; border-block: var(--rule-2); } @media (max-width: 520px) { .frow__specs { grid-template-columns: repeat(2, 1fr); } } .frow__spec span { display: block; font-family: var(--font-label); font-size: .45rem; letter-spacing: .2em; color: var(--bone-dim); text-transform: uppercase; margin-bottom: .3rem; } .frow__spec b { font-family: var(--font-label); font-size: .9rem; font-weight: 600; } .frow__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; justify-content: space-between; } .frow__price b { font-family: var(--font-display); font-weight: 900; font-size: 2.1rem; letter-spacing: -.04em; line-height: 1; } /* ------------------------------------------------------- 27. BASES page */ .bases { display: grid; gap: 1px; background: color-mix(in srgb, var(--bone) 10%, transparent); border: 1px solid color-mix(in srgb, var(--bone) 10%, transparent); grid-template-columns: repeat(2, 1fr); } @media (max-width: 820px) { .bases { grid-template-columns: 1fr; } } .base { position: relative; background: var(--ink); padding: clamp(1.75rem, 3vw, 2.75rem); overflow: hidden; transition: background .5s; } .base:hover { background: var(--ink-1); } .base__bg { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .8s var(--ease); } .base__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.35); } .base:hover .base__bg { opacity: 1; } .base__in { position: relative; z-index: 1; } .base__code { font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 7vw, 5.5rem); line-height: .8; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--bone) 30%, transparent); transition: color .55s var(--ease), -webkit-text-stroke-color .55s; } .base:hover .base__code { color: var(--signal); -webkit-text-stroke-color: var(--signal); } .base__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -.03em; margin-block: 1rem .5rem; } .base__rows { margin-top: 1.75rem; display: grid; gap: .7rem; } .base__row { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; border-bottom: var(--rule-2); } .base__row span { color: var(--bone-dim); } .base__row b { font-family: var(--font-label); font-size: .7rem; font-weight: 600; text-align: right; } /* ------------------------------------------------------ 28. FORM (contact) */ .form { display: grid; gap: 1.5rem; } .form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } @media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: .55rem; } .field label { font-family: var(--font-label); font-size: .5rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--bone-dim); } .field input, .field select, .field textarea { width: 100%; padding: .9rem 0; border-bottom: 1px solid color-mix(in srgb, var(--bone) 20%, transparent); font-size: 1rem; color: var(--bone); transition: border-color .35s; appearance: none; -webkit-appearance: none; border-radius: 0; } .field select { cursor: pointer; } .field select option { background: var(--ink-2); } .field textarea { resize: vertical; min-height: 130px; font-family: var(--font-body); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--signal); } .field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--bone-dim) 65%, transparent); } /* ------------------------------------------------------------ 29. MISC */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } } .sticky-note { position: sticky; top: calc(var(--nav-h) + 2rem); } .parallax { will-change: transform; } .hr { height: 1px; background: color-mix(in srgb, var(--bone) 12%, transparent); border: 0; } .skip { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 1rem 1.5rem; background: var(--signal); color: var(--ink); font-family: var(--font-label); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; } .skip:focus { left: 1rem; top: 1rem; } .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------- 30. THEME SWITCHER (demo) A pitch tool, not a site feature. Once a palette is chosen, delete this block, the .skin markup, and initSkin() in main.js. */ .skin { position: fixed; left: 1rem; bottom: 1rem; z-index: 940; display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; background: color-mix(in srgb, var(--ink) 78%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid color-mix(in srgb, var(--bone) 14%, transparent); border-radius: 100px; transition: opacity .4s var(--ease); } @media (max-width: 620px) { .skin { transform: scale(.88); transform-origin: left bottom; } } body[data-menu] .skin { opacity: 0; pointer-events: none; } .skin__k { font-family: var(--font-label); font-size: .45rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim); padding-inline: .4rem 0; white-space: nowrap; } .skin__opt { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--bone) 22%, transparent); overflow: hidden; transition: transform .35s var(--ease), border-color .35s; } .skin__opt::before, .skin__opt::after { content: ''; position: absolute; inset: 0; } /* left half = base, right half = signal */ .skin__opt::before { background: var(--sw-base); } .skin__opt::after { background: var(--sw-sig); clip-path: polygon(100% 0, 100% 100%, 0 100%); } .skin__opt:hover { transform: scale(1.14); border-color: var(--bone-2); } .skin__opt[aria-pressed='true'] { border-color: var(--bone); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bone) 22%, transparent); } .skin__opt--racing { --sw-base: #08150F; --sw-sig: #FFC233; } .skin__opt--bog { --sw-base: #120D0A; --sw-sig: #E08A2B; } .skin__opt--atlantic { --sw-base: #0A1418; --sw-sig: #F5C043; }