/* ============================================================ CrewBoard — site.css Static marketing site. Shared across all pages. Slice 1: static skeleton, no animations yet. ============================================================ */ /* ---- Design tokens ---------------------------------------- */ :root { /* Brand colours (from the app's token set) */ --navy: #142f43; /* dark sections = "the sea", primary text, buttons */ --brass: #c39a3f; /* accents, badges, details */ --brass-soft: #f6eccf; --brass-ink: #7d5f1a; --paper: #f4efe4; /* light background = "the beach" */ --paper-warm: #efe6d3; /* slightly warmer paper for pricing */ --hairline: rgba(20, 47, 67, 0.08); /* Derived / utility */ --navy-90: #0f2536; /* darker navy for phone frame */ --ink: var(--navy); --ink-muted: rgba(20, 47, 67, 0.78); --on-navy: #f4efe4; --on-navy-mut: rgba(244, 239, 228, 0.72); --danger: #e2564b; --danger-on-dark: #ec786e; /* AA-compliant red for text on navy-90 (5.59:1) */ /* Radii */ --r-card: 15px; --r-pill: 9px; /* Type */ --serif: "Lora", Georgia, "Times New Roman", serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Layout */ --wrap: 1120px; --wrap-narrow: 760px; --gutter: 24px; --nav-h: 66px; /* nav bar height — shared with the hero scroller offset so they can't desync */ } /* ---- Reset / base ----------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Lenis smooth scroll (recommended companion styles). When Lenis is running it adds .lenis/.lenis-smooth to ; native CSS smooth-scrolling must yield to it. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ---- Layout helpers --------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: var(--wrap-narrow); } .center { text-align: center; } .section { padding-block: clamp(56px, 9vw, 104px); } .section--navy { background: var(--navy); color: var(--on-navy); } .section--paper { background: var(--paper); color: var(--ink); } .section--paper-warm { background: var(--paper-warm); color: var(--ink); } /* ---- Shared type pieces ----------------------------------- */ .label { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: 18px; } .section__title { font-size: clamp(1.9rem, 4vw, 2.85rem); color: var(--ink); max-width: 18ch; margin-inline: auto; } .section--navy .section__title { color: var(--on-navy); } .lede { font-size: 1.12rem; color: var(--ink-muted); max-width: 60ch; margin: 22px auto 0; } .lede--tight { max-width: 52ch; } /* ---- Pills ------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 7px 14px; border-radius: var(--r-pill); line-height: 1; } .pill--outline { border: 1px solid rgba(195, 154, 63, 0.55); color: var(--brass); } .pill--warn { color: var(--brass); } .pill--brass { background: var(--brass); color: var(--navy); font-weight: 700; } /* ---- Buttons ---------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 600; font-size: 0.95rem; padding: 11px 20px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .btn--navy { background: var(--navy); color: var(--on-navy); } .btn--navy:hover { background: var(--navy-90); } /* ============================================================ 1. NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--hairline); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--nav-h); } .wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--navy); } .wordmark__anchor { color: var(--brass); flex: none; } .wordmark__text { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: 0.22em; } .wordmark--light { color: var(--on-navy); } .nav__links { display: flex; align-items: center; gap: 30px; margin-left: auto; font-size: 0.97rem; color: var(--ink-muted); } .nav__links a { transition: color 0.12s ease; } .nav__links a:hover { color: var(--navy); } .nav__cta { flex: none; } /* ============================================================ 2. HERO ============================================================ */ /* Generous but bounded vertical padding — content sizes the section, not a full-viewport min-height, so the store badges stay above the fold. */ .hero { padding-block: clamp(56px, 7vw, 92px); } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 72px); align-items: center; } .hero__title { font-size: clamp(2.4rem, 5.4vw, 4rem); color: var(--on-navy); margin-top: 22px; letter-spacing: -0.01em; } .hero__sub { font-size: 1.15rem; color: var(--on-navy-mut); max-width: 52ch; margin-top: 22px; } /* store badges */ .stores { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .store { display: inline-flex; flex-direction: column; gap: 3px; padding: 12px 22px; border: 1px solid rgba(244, 239, 228, 0.28); border-radius: var(--r-pill); transition: border-color 0.12s ease, background 0.12s ease; } .store:hover { border-color: rgba(195, 154, 63, 0.6); background: rgba(244, 239, 228, 0.04); } .store__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--brass); } .store__name { font-weight: 600; font-size: 1.05rem; color: var(--on-navy); } /* phone mockup */ .hero__media { display: flex; justify-content: center; } .phone { position: relative; width: min(268px, 74%); /* Slightly shorter frame so the phone doesn't out-tower the text column and inflate the hero's height. */ aspect-ratio: 9 / 17.5; max-height: 480px; background: var(--navy-90); border: 2px solid #091825; border-radius: 26px; /* Bezel PROPORZIONALE: la % si risolve sulla larghezza, quindi la cornice resta sottile anche quando il telefono rimpicciolisce su mobile. Con 12px fissi su un frame da ~150px il bordo mangiava il 20% della larghezza. */ padding: 3.2%; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55); } .phone__notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 42%; height: 20px; background: #091825; border-radius: 0 0 12px 12px; z-index: 2; } .phone__screen { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: var(--paper); display: flex; align-items: center; justify-content: center; } .phone__shot { width: 100%; height: 100%; object-fit: cover; /* placeholder styling so the alt text reads nicely if the image is missing */ color: var(--ink-muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-align: center; } /* ============================================================ 2b. HERO PHONE SCROLLER Sticky stage; the phone stays pinned while text panels cycle and the screen crossfades through the 4 app screens. ============================================================ */ .hero-scroller { /* KNOB HERO_VH — total scroll run: 1 viewport of intro + the rest as pinned showcase (400svh → 300vh of showcase). */ height: 400vh; height: 400svh; background: var(--navy); /* tucks under the in-flow nav so the section starts at y=0: the sticky stage is PINNED from the very first frame — no vertical drift of the (statically centered) fan during the first nav-height of scroll */ margin-top: calc(-1 * var(--nav-h)); } .hs__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; /* compensate the tuck: the centered content stays below the bar */ padding-top: var(--nav-h); } .hs__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 72px); align-items: center; width: 100%; } /* panel stack: intro stays in flow (it sets the column height and is the no-JS fallback); showcase panels sit absolute over it */ .hs__panels { position: relative; } .hs__panel { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .hs__panel--intro { position: relative; } .hs__panel:not(.hs__panel--intro) { position: absolute; inset: 0; opacity: 0; /* JS animates autoAlpha; hidden without JS */ visibility: hidden; } .hs__panel .label { color: var(--brass); } /* mono label on navy */ .hs__title { font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.12; color: var(--on-navy); max-width: 16ch; } /* phone fan stack: the container takes the single-phone sizing, the frames fill it absolutely and get fanned by JS transforms. Screens bring their own dynamic island, so the fake notch is off. */ .hs__media { display: flex; justify-content: center; } .hs__stack { position: relative; width: min(300px, 78%); /* 9/17.2 NON e' l'aspetto di un iPhone: e' l'aspetto che, tolto il bezel proporzionale del 3,2%, lascia un'area schermo allineata a quella degli screenshot (900x1795 = 0.5014). Con 9/19 object-fit: cover tagliava ~18% della LARGHEZZA e i pill ON DUTY / ON BOARD sparivano oltre il bordo destro. Se cambi il ritaglio degli screenshot, ricalcola qui. */ aspect-ratio: 9 / 17.2; max-height: min(620px, 78vh); } .hs__stack .phone--scroller { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; will-change: transform; } /* pre-JS / no-JS: only the front phone shows (JS re-parks the rest) */ .hs__stack .phone + .phone { opacity: 0; } .phone--scroller .phone__notch { display: none; } .phone--scroller .phone__screen { position: relative; } .hs-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* sources are bare screens, ~same aspect */ object-position: top; opacity: 0; /* JS reveals; first screen on by default */ } .hs-screen:first-child { opacity: 1; } /* static fallbacks: reduced motion / no GSAP → the intro + screen-1 behave like the old static hero */ @media (prefers-reduced-motion: reduce) { .hero-scroller { height: auto; } .hs__stage { position: static; height: auto; padding-block: clamp(56px, 7vw, 92px); } .hs__stack .phone + .phone { display: none; } } html.tide-static .hero-scroller { height: auto; } html.tide-static .hs__stage { position: static; height: auto; padding-block: clamp(56px, 7vw, 92px); } html.tide-static .hs__stack .phone + .phone { display: none; } /* ============================================================ 3. PROBLEM — content now lives inside the tide (see TIDE below) ============================================================ */ /* ============================================================ 4. ALERT — emotional / safety, given extra emphasis ============================================================ */ .alert { padding-block: clamp(64px, 10vw, 120px); } .alert__title { font-size: clamp(2.1rem, 4.6vw, 3.25rem); color: var(--on-navy); max-width: 18ch; margin: 22px auto 0; } .alert__title .hl { color: var(--brass); font-style: italic; } .alert__sub { margin-inline: auto; } .alert-card { margin: 40px auto 0; max-width: 440px; text-align: left; background: var(--navy-90); border: 1px solid rgba(226, 86, 75, 0.35); border-radius: var(--r-card); padding: 16px 18px; box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7); } .alert-card__head { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--danger-on-dark); margin-bottom: 14px; } .alert-card__row { display: flex; align-items: center; gap: 14px; } .avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--brass); color: var(--navy); display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; } .alert-card__who { display: flex; flex-direction: column; margin-right: auto; } .alert-card__name { font-weight: 600; color: var(--on-navy); } .alert-card__meta { font-size: 0.85rem; color: var(--on-navy-mut); } .chip-btn { flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--danger-on-dark); background: transparent; border: 1px solid rgba(226, 86, 75, 0.5); border-radius: var(--r-pill); padding: 7px 12px; cursor: pointer; } /* ============================================================ 5. FEATURES — app Board replica in a phone frame The board uses the APP's token set (not the site's) for fidelity: warm cream deck, crew cards with status rails, Archivo type. Scoped under .appboard. ============================================================ */ /* .card stays: shared with the pricing section */ .card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 26px 22px; } /* ---- lead layout: copy ~40% · phone ~60% -------------------- */ .appboard-lead { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .appboard-lead__title { font-size: clamp(1.5rem, 2.6vw, 1.9rem); color: var(--ink); } .appboard-lead__text { margin-top: 14px; color: var(--ink-muted); max-width: 46ch; } .appboard-lead__media { display: flex; justify-content: center; } /* ---- phone frame: sober dark, the site's phone shadow ------- */ .boardphone { width: min(370px, 100%); background: var(--navy-90); border: 3px solid #091825; border-radius: 40px; padding: 12px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55); } .boardphone__screen { border-radius: 30px; overflow: hidden; } /* ---- the Board screen (app tokens) --------------------------- */ .appboard { font-family: "Archivo", var(--sans); background: #f1ece1; /* warm cream deck */ padding: 16px 12px 18px; } .appboard__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 12px; } .appboard__ship { font-weight: 700; font-size: 14px; color: #16303f; } .appboard__live { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.9px; color: #1f6e50; background: #e4f1ea; border: 1px solid rgba(47, 143, 107, 0.22); border-radius: 999px; padding: 3px 8px; } .appboard__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2f8f6b; } .appboard__dept { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 6px 8px; } .appboard__dept-name { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #142f43; } .appboard__dept-name svg { flex: none; } .appboard__dept-count { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; color: #6c7a82; } /* crew card: colored status rail on the left (key app element) */ .crew { position: relative; display: flex; align-items: center; gap: 12px; background: #fbf8f1; border-radius: 16px; box-shadow: 0 1px 2px rgba(17, 44, 61, 0.04); padding: 10px 12px 10px 17px; /* 5px rail + 12px */ } .crew + .crew { margin-top: 8px; } .crew__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 16px 0 0 16px; background: #2f8f6b; /* ON BOARD green */ } .crew--ashore .crew__rail { background: #142f43; } .crew__avatar { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 20px; letter-spacing: 0.5px; background: var(--tint, #2f5d70); box-shadow: inset 0 0 0 1px rgba(20, 47, 67, 0.12); } .crew--ashore .crew__avatar { filter: saturate(0.4) opacity(0.62); } .crew__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; } .crew__name { font-weight: 700; font-size: 17px; letter-spacing: -0.2px; color: #16303f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crew__role { font-weight: 500; font-size: 13.5px; color: #6c7a82; } .crew__pills { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } .pillx { display: inline-block; font-weight: 700; line-height: 1; border-radius: 10px; } .pillx--onboard { font-size: 12px; letter-spacing: 0.6px; color: #1f6e50; background: #e4f1ea; border: 1px solid rgba(47, 143, 107, 0.22); padding: 6px 10px; } .pillx--ashore { font-size: 12px; letter-spacing: 0.6px; color: #8a8676; background: #ece8de; border: 1px solid rgba(20, 47, 67, 0.10); padding: 6px 10px; } .pillx--duty { font-size: 10px; letter-spacing: 0.9px; color: #9a7724; background: #f6eccf; border: 1px solid rgba(195, 154, 63, 0.4); padding: 4px 8px; } /* overlap stack for the scroll-driven swaps (pill, dept count) */ .swap { display: grid; } .swap > * { grid-area: 1 / 1; justify-self: end; white-space: nowrap; } .swap__b { opacity: 0; } /* initial state: ASHORE / 1/2 */ /* ---- swipe-to-action (Sofia): the row slides right over a green ON BOARD action layer, then settles back with the new state. Wrapper clips the travelling card (the row exits its own bounds on the right, like the app's list swipe). ------------------- */ .crew-swipe { position: relative; margin-top: 8px; /* stands in for .crew + .crew */ border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(17, 44, 61, 0.04); } .crew-swipe .crew { margin-top: 0; box-shadow: none; } .crew-swipe__action { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; padding-left: 12px; background: #2f8f6b; /* the app's swipe action */ color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 0.6px; white-space: nowrap; } #crew-sofia { position: relative; will-change: transform; } /* Sofia's INITIAL state: ashore (the scrubbed swipe marks her aboard) */ #crew-sofia .crew__rail { background: #142f43; } #crew-sofia .crew__avatar { filter: saturate(0.4) opacity(0.62); } /* static fallbacks: Sofia shown directly ON BOARD (final state), no swipe. Mirrors the tide pattern: reduced-motion media query AND the html.tide-static class site.js sets when GSAP fails. */ @media (prefers-reduced-motion: reduce) { #crew-sofia .crew__rail { background: #2f8f6b; } #crew-sofia .crew__avatar { filter: none; } #crew-sofia .swap__a, #deck-count .swap__a { opacity: 0; visibility: hidden; } #crew-sofia .swap__b, #deck-count .swap__b { opacity: 1; visibility: visible; } } html.tide-static #crew-sofia .crew__rail { background: #2f8f6b; } html.tide-static #crew-sofia .crew__avatar { filter: none; } html.tide-static #crew-sofia .swap__a, html.tide-static #deck-count .swap__a { opacity: 0; visibility: hidden; } html.tide-static #crew-sofia .swap__b, html.tide-static #deck-count .swap__b { opacity: 1; visibility: visible; } /* ---- sticky corridor (DESKTOP ONLY) — same architecture as the tides: tall section, sticky 100svh stage, no ScrollTrigger pin. Run: read pause → Sofia's swipe → tail → natural release. Mobile (≤900px) stays unpinned: .features-stage is a plain div. */ @media (min-width: 901px) { #features { height: 260vh; height: 260svh; /* stable on address-bar resize */ padding-block: 0; /* the stage centers; no section padding */ } .features-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; } } /* static fallbacks: corridor collapses, board unpinned, page flows normally (mirror of the tide pattern). Sofia's static ON BOARD state is handled by the rules above. */ @media (prefers-reduced-motion: reduce) { #features { height: auto; padding-block: clamp(56px, 9vw, 104px); } .features-stage { position: static; height: auto; overflow: visible; } } html.tide-static #features { height: auto; padding-block: clamp(56px, 9vw, 104px); } html.tide-static .features-stage { position: static; height: auto; overflow: visible; } /* ============================================================ 6. PRICING TEASER ============================================================ */ .pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; align-items: stretch; } .price { position: relative; display: flex; flex-direction: column; gap: 6px; } .price__name { font-size: 1.3rem; color: var(--ink); } .price__seats { font-size: 0.95rem; color: var(--ink-muted); } .price__amount { font-family: var(--serif); font-size: 2rem; color: var(--ink); margin-top: 10px; } .price__per { font-family: var(--sans); font-size: 1rem; color: var(--ink-muted); } /* featured (navy) plan */ .price--featured { background: var(--navy); border-color: var(--navy); color: var(--on-navy); transform: translateY(-6px); box-shadow: 0 26px 52px -30px rgba(20, 47, 67, 0.7); } .price--featured .price__name, .price--featured .price__amount { color: var(--on-navy); } .price--featured .price__seats, .price--featured .price__per { color: var(--on-navy-mut); } .price__badge { position: absolute; top: -13px; left: 22px; } .link-arrow { display: inline-block; margin-top: 36px; font-weight: 600; color: var(--brass-ink); border-bottom: 1px solid rgba(154, 119, 36, 0.4); padding-bottom: 2px; } .link-arrow:hover { color: var(--navy); border-color: var(--navy); } .fineprint { margin-top: 18px; font-size: 0.85rem; color: var(--ink-muted); } /* ============================================================ 7. FOOTER ============================================================ */ .footer { padding-top: 70px; padding-bottom: 46px; } /* extra top room for the incoming shoreline */ .footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; } .footer__links { display: flex; align-items: center; gap: 12px; color: var(--on-navy-mut); font-size: 0.95rem; } .footer__links a:hover { color: var(--on-navy); } .footer__dot { color: rgba(244, 239, 228, 0.4); } .footer__copy { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--on-navy-mut); } /* ============================================================ RESPONSIVE ============================================================ */ /* Tablet */ @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero__media { order: -1; } .phone { width: min(260px, 62%); border-radius: 20px; } .phone__screen { border-radius: 12px; } /* scroller: phone stack on top, panel text beneath. ANTI-CLIP: content is anchored to the TOP of the stage (below the nav) instead of centered — the phone can never be cut above; its height is svh-driven so stack + text always fit the stage. */ .hs__stage { align-items: flex-start; padding-top: calc(var(--nav-h) + 26px); } .hs__grid { grid-template-columns: 1fr; gap: 18px; } .hs__media { order: -1; } .hs__stack { width: auto; height: min(46svh, 360px); /* height-driven: whole phone always in view */ aspect-ratio: 9 / 17.2; max-height: none; } .hs__panels { text-align: center; min-height: 200px; } .hs__panel { align-items: center; } .hs__title { max-width: 20ch; font-size: clamp(1.4rem, 5.4vw, 1.9rem); } /* compact intro so phone + intro fit small viewports together */ .hs__panel--intro .hero__title { font-size: clamp(1.7rem, 6.5vw, 2.2rem); margin-top: 14px; } .hs__panel--intro .hero__sub { font-size: 1rem; margin-top: 12px; } .hs__panel--intro .stores { margin-top: 18px; } .hs__panel--intro .store { padding: 8px 16px; } /* features: copy stacks above the board phone */ .appboard-lead { grid-template-columns: 1fr; gap: 30px; } .appboard-lead__text { max-width: 56ch; } .appboard-lead__media { order: 1; } .pricing__grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } .price--featured { transform: none; } } /* ============================================================ TIDE (full-screen scroll-driven transition between sections) A 200vh strip whose sticky stage holds the viewport for one screen of scroll while the navy "sea" sheet slides up (GPU transforms only), foam fringe lagging behind on the sand. ============================================================ */ .tide { /* CORRIDOR = phase 1 (240vh, validated, DON'T TOUCH) + READING PAUSE + phase 2 (PHASE2_VH in site.js, currently 150vh). KNOBS: pause = height − 240vh − PHASE2_VH. 395svh → 240 + 5 (pause) + 150 (phase 2). To retune: change this height and/or PHASE2_VH in site.js. */ height: 395vh; height: 395svh; /* stable on mobile address-bar resize */ background: var(--paper); /* the sand revealed beneath */ margin-top: -1px; /* tucks under the hero: no paper hairline */ } .tide__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; /* clips the wave edges hanging below */ background: var(--paper); } /* the beach layer: PROBLEM copy sits here, under the water */ .tide__beach { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: var(--paper); } .tide__beach .section__title { max-width: 22ch; } /* Stacked water bands (reference: flat layered waves) — from the deep sea down to the sand: navy → medium blue → light blue → foam. Each band is a single svg: solid fill from the top of the screen plus the wavy tongues, one element, one raster — seamless by construction. preserveAspectRatio="none" stretches it over any window width; the wave zone (bottom ~17% of the svg) scales with the viewport, so waves stay full-bodied on large desktops. */ .tide__water { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 260px); /* wave tongues hang below the stage */ display: block; will-change: transform; } .tide__sheet { z-index: 5; } .tide__mid { z-index: 4; } .tide__mid2 { z-index: 3; } /* foam fringe — the outermost white band, left lingering on the sand */ .tide__foam { position: absolute; top: 100%; left: 0; width: 100%; height: clamp(110px, 18vh, 210px); /* scales with the screen too */ margin-top: -30px; z-index: 2; /* beneath the blues: emerges as they lift */ pointer-events: none; will-change: transform; } .tide__foam svg { width: 100%; height: 100%; display: block; } .tide__foam-main { fill: #fbf8f0; opacity: 0.9; } .tide__foam-streak { fill: #fbf8f0; opacity: 0.45; } .tide__brass { fill: none; stroke: var(--brass); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.55; } /* ---- PHASE 2 — rising sea (.tide__rise wrapper) --------------- Vertical mirror of phase 1, inside the SAME pinned stage: the water is anchored to the BOTTOM (tongues at the top, flipped paths), starts displaced below the screen and rises to cover the whiteboard on the beach. Phase 2 runs entirely pinned, so both straight clip edges (stage top and bottom) coincide with the screen edges throughout — neither seam can ever show. */ .tide__rise { position: absolute; inset: 0; z-index: 5; /* over the beach and the (exited) phase-1 water; below the alert layer (z6) */ pointer-events: none; } .tide__rise .tide__water { top: auto; bottom: 0; /* natural state = covering; JS starts it displaced +y below the screen */ } /* foam parks mirrored: 30px peeking below the stage top at rest (mirror of phase 1's 30px above the stage bottom). KNOB — foam band THICKNESS in the rise: taller ribbon = more white showing above the light-blue crest, especially early in the climb. (Phase-1 foam keeps the base clamp(110px, 18vh, 210px).) */ .tide__rise .tide__foam { top: auto; bottom: calc(100% - 30px); margin-top: 0; height: clamp(150px, 24vh, 260px); } /* ALERT content layer — above the water (sheet is z5) */ .tide__alert { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; } .tide__alert .alert__title { margin-inline: auto; } /* ---- TIDE 2 — alert → features (mono-phase retreat) ----------- Same validated recede choreography as the corridor's phase 1. KNOB: the run length IS this height (trigger spans the element, PIN is computed from it in site.js — they can't desync). */ #tide-2 { height: 240vh; height: 240svh; } /* features heading lives in tide-2's beach: the grid section starts closer to the top so the flow off the sand feels continuous */ #features { padding-top: clamp(24px, 4vw, 48px); } /* Static fallbacks: reduced motion, or GSAP failed to load. The water layers are removed and the beach content becomes a normal static section — the copy is never lost. */ @media (prefers-reduced-motion: reduce) { .tide { height: auto; } .tide__stage { position: static; height: auto; overflow: visible; } .tide__beach { position: static; padding-block: clamp(56px, 9vw, 104px); } .tide__alert { position: static; padding-block: clamp(56px, 9vw, 104px); background: var(--navy); } .tide__rise, .tide__water, .tide__foam { display: none; } } html.tide-static .tide { height: auto; } html.tide-static .tide__stage { position: static; height: auto; overflow: visible; } html.tide-static .tide__beach { position: static; padding-block: clamp(56px, 9vw, 104px); } html.tide-static .tide__alert { position: static; padding-block: clamp(56px, 9vw, 104px); background: var(--navy); } html.tide-static .tide__rise, html.tide-static .tide__water, html.tide-static .tide__foam { display: none; } /* ============================================================ SHORELINE (wave dividers between navy ↔ paper sections) The SVG straddles the boundary: its top is filled with the "from" section colour (seamless), and wavy tongues dip into the section below, where transparent areas reveal it. ============================================================ */ .has-shore { position: relative; } .shore { position: absolute; left: 0; right: 0; bottom: -54px; /* straddle the boundary: ~half above, half below */ height: 110px; pointer-events: none; /* never intercept clicks */ z-index: 1; } .shore__svg { display: block; width: 100%; height: 100%; } /* the water body — filled with the "from" section colour */ .shore__water path { fill: var(--water); } /* foam crests — white/off-white ribbons riding the water edge */ .shore .foam { fill: none; stroke: #fbf8f0; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; /* constant thickness despite stretch */ opacity: 0.7; } .shore__foam2 .foam { stroke-width: 1.8; opacity: 0.5; } /* a whisper of brass on the very edge */ .shore__crest { fill: none; stroke: var(--brass); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.45; } /* GPU hint for the scroll-driven drift */ .shore__water, .shore__foam1, .shore__foam2 { will-change: transform; } /* water colour per boundary */ .shore--navy { --water: var(--navy); } .shore--paper { --water: var(--paper); } .shore--paperwarm { --water: var(--paper-warm); } /* Mobile — compact nav (wordmark + button only) */ @media (max-width: 620px) { body { font-size: 16px; } .nav__links { display: none; } .nav__inner { justify-content: space-between; } /* features: the board replica tightens but stays readable */ .boardphone { width: min(340px, 100%); border-radius: 34px; padding: 10px; } .boardphone__screen { border-radius: 26px; } .appboard { padding: 14px 10px 16px; } .crew { gap: 10px; padding: 9px 10px 9px 15px; } .crew__avatar { width: 48px; height: 48px; font-size: 18px; border-radius: 14px; } .crew__name { font-size: 15.5px; } .crew__role { font-size: 12.5px; } .stores { gap: 10px; } .store { flex: 1 1 auto; } .footer__inner { flex-direction: column; text-align: center; } }