/* ========================================================================== Panoton — site stylesheet Palette + type ported from the published panoton.com (Salient theme tokens) captured in Webiste/Panoton_Mirror/. Replaces the purple Brand-Playbook treatment, which did not match the live site. Fonts are imported here rather than per-page, so this one file restyles all 54 pages with no HTML edits. The old Plus Jakarta Sans + Inter in each page's is now unused and can be deleted at your leisure. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Roboto:wght@400;500;700&display=swap'); :root { /* live-site tokens */ --blue-deep: #1e43a6; /* nectar extra-color-1 */ --cyan: #32dbf2; /* nectar extra-color-2 */ --blue: #2c8cdf; /* nectar extra-color-3 */ --orange: #fe4c10; /* nectar accent-color */ --navy: #00054c; /* hero video overlay */ --navy-deep: #00042e; /* footer */ /* platform tile ramp, exact from the live homepage */ --tile-1: #260043; --tile-2: #160089; --tile-3: #6300af; --tile-4: #008de5; --tile-5: #6e00ed; --tile-6: #b96bff; --ink: #10131a; --ink-soft: #666666; --ink-mute: #8a8f9a; --surface: #ffffff; --surface-2: #f3f7fd; --surface-3: #f2f2f2; --border: #e2e8f2; --font-head: Cabin, Helvetica, Arial, sans-serif; --font-body: Roboto, Helvetica, Arial, sans-serif; --r-card: 20px; --r-pill: 100px; --shadow-soft: 0 1px 2px rgba(0, 5, 76, .04), 0 4px 16px rgba(0, 5, 76, .06); --shadow-card: 0 10px 40px rgba(0, 5, 76, .10); --shadow-lift: 0 30px 70px rgba(30, 67, 166, .22); --gradient: linear-gradient(125deg, #32dbf2, #1e43a6); --gradient-text: linear-gradient(to right, #32dbf2, #1e43a6); --wrap: 1245px; } /* ---------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.75; color: var(--ink-soft); background: var(--surface); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--orange); text-decoration: none; } a:hover { color: var(--blue-deep); text-decoration: underline; } ::selection { background: var(--orange); color: #fff; } h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; margin: 0 0 .6em; font-weight: 700; } h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.1; } h2 { font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: 1.25; margin-top: 2em; } h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); margin-top: 1.8em; } h4 { font-size: 1.35rem; margin-top: 1.6em; } h5 { font-size: .875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-deep); margin-top: 1.4em; } p { margin: 0 0 1.15em; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 12px 18px; z-index: 100; border-radius: 0 0 8px 0; } .skip:focus { left: 0; } /* ---------------------------------------------------------------- header */ .site-header { position: sticky; top: 0; z-index: 90; background: rgba(0, 5, 76, .96); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .08); } /* Header transition is gated on motion for the same reason the reveals are: a frozen or throttled animation clock must never leave the bar stuck at its start value. */ [data-motion="on"] .site-header { transition: background .4s cubic-bezier(.25, 1, .5, 1), padding .4s cubic-bezier(.25, 1, .5, 1), box-shadow .4s ease; } .header-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; } .brand { flex: 0 0 auto; display: block; } .brand img { width: 150px; height: auto; } .site-nav { margin-left: auto; } .site-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .site-nav a { display: block; padding: 9px 14px; border-radius: var(--r-pill); color: rgba(255, 255, 255, .85); font-size: .875rem; font-weight: 600; font-family: var(--font-head); letter-spacing: .02em; white-space: nowrap; transition: background .18s ease, color .18s ease; } .site-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; } .site-nav a.is-active { background: rgba(50, 219, 242, .18); color: #fff; } /* homepage only: transparent over the video hero, solid once scrolled */ .site-header.transparent { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; } .site-header.transparent.is-solid { background: rgba(0, 5, 76, .94); box-shadow: 0 10px 40px rgba(0, 5, 76, .35); } /* homepage only: centered logo with the menu split either side */ .site-header.split .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; } .site-header.split .nav-left { justify-self: end; } .site-header.split .nav-right { justify-self: start; } .site-header.split .nav-left ul, .site-header.split .nav-right ul { gap: 16px; } /* "Join the Waitlist" is pinned to the header's right edge and taken OUT of the grid flow. Leaving it in flow widened the right column, which shoved the centred logo ~100px off centre. Out of flow, the two nav columns stay balanced and the CTA can never crowd Connections / Academy / Insights / About. `right: 0` resolves to the padding box, i.e. the .wrap gutter. */ /* "Join the Waitlist" sits hard against the header's right edge, clear of Connections / Academy / Insights / About. Both side columns stretch; the CTA is pushed right by margin-left:auto, which only ever consumes free space — so it can never overlap the links, at any width. The two 1fr columns are sized by their min-content, so the right column carrying an extra ~190px button would otherwise drag the centred logo off centre; nav-left gets a matching reserve on its dead side to keep the columns equal. That padding is invisible: nav-left is right-aligned against the logo, so it only extends into empty space. --cta-reserve should track the button's rendered width. */ /* The split header spans the full viewport rather than the 1245px .wrap. That was the real constraint: nav + logo + CTA already exceeded 1245px, so the grid overflowed and "Join the Waitlist" could never reach the right edge no matter how it was aligned. minmax(0,1fr) lets the side columns shrink below min-content, which keeps them equal so the centred logo stays centred; the CTA is pushed to the far right by margin-left: auto, which only consumes free space and so can never overlap the links. */ .site-header.split .header-inner { max-width: none; padding-inline: clamp(24px, 3vw, 56px); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .site-header.split .nav-left, .site-header.split .nav-right { justify-self: stretch; margin-left: 0; min-width: 0; } .site-header.split .nav-left ul, .site-header.split .nav-right ul { width: 100%; flex-wrap: nowrap; align-items: center; } .site-header.split .nav-left ul { justify-content: flex-end; } .site-header.split .nav-right li:last-child { margin-left: auto; padding-left: 28px; } .site-header.split .brand img { width: auto; height: 74px; object-fit: contain; } .site-header.split .btn-nav { font-family: var(--font-head); font-size: .875rem; font-weight: 700; color: #fff; background: var(--gradient); padding: 12px 24px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: 0 10px 24px rgba(30, 67, 166, .35); } .site-header.split .btn-nav:hover { color: #fff; text-decoration: none; box-shadow: 0 14px 30px rgba(30, 67, 166, .5); } /* Between the burger breakpoint and ~1600px the row is genuinely full: a centred logo fixes each nav column at half the free space. Tightening link padding and gaps buys back the ~60px per column needed for the CTA to reach the right gutter. */ @media (max-width: 1599px) { .site-header.split .nav-left ul, .site-header.split .nav-right ul { gap: 6px; } .site-header.split .site-nav a { padding: 9px 10px; } } /* Burger: sized unconditionally so ANY breakpoint that reveals it gets a real 44px target. Only `display` is breakpoint-controlled. */ .navtoggle { display: none; } .burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; cursor: pointer; margin-left: auto; } .burger span { display: block; height: 2px; background: #fff; border-radius: 2px; } /* homepage mobile menu — appears exactly where the split nav disappears */ .mobile-nav { display: none; grid-column: 1 / -1; background: rgba(0, 5, 76, .98); /* paints its own surface — never relies on the header */ margin: 14px -24px -22px; /* bleed past .wrap's 24px gutters, full-width panel */ padding: 14px 24px 22px; border-top: 1px solid rgba(255, 255, 255, .12); max-height: calc(100vh - 76px); overflow-y: auto; } .mobile-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .mobile-nav a { display: block; padding: 13px 4px; font-family: var(--font-head); font-size: 1.0625rem; font-weight: 600; color: rgba(255, 255, 255, .85); } .mobile-nav a:hover { color: #fff; text-decoration: none; } .mobile-nav .btn-nav { text-align: center; margin-top: 12px; padding: 15px 24px; } @media (max-width: 1199px) { .site-header.split .header-inner { grid-template-columns: auto 1fr; row-gap: 0; } .site-header.split .nav-left, .site-header.split .nav-right { display: none; } .site-header.split .brand { order: -1; justify-self: start; } .site-header.split .brand img { height: 58px; } .site-header.split .burger { display: flex; justify-self: end; margin-left: 0; } .site-header.split .navtoggle:checked ~ .mobile-nav { display: block; } } @media (max-width: 900px) { .burger { display: flex; } /* :not(.split) so the homepage's split navs are never revealed alongside .mobile-nav */ .site-header:not(.split) .site-nav { display: none; width: 100%; margin: 0; order: 3; padding-bottom: 16px; } .site-header:not(.split) .navtoggle:checked ~ .site-nav { display: block; } .site-header:not(.split) .site-nav ul { flex-direction: column; gap: 2px; } .site-header:not(.split) .site-nav a { padding: 12px 14px; font-size: 1rem; } .header-inner { flex-wrap: wrap; } } /* ---------------------------------------------------------------- hero (interior pages) */ .hero { background: var(--navy); color: #fff; padding: clamp(84px, 11vw, 140px) 0 clamp(72px, 9vw, 112px); position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; inset: auto -10% -60% 40%; height: 480px; background: radial-gradient(closest-side, rgba(50, 219, 242, .28), transparent); pointer-events: none; } .hero .wrap { position: relative; z-index: 1; max-width: 900px; } .hero h1 { color: #fff; margin-bottom: .35em; } .eyebrow { font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--cyan); display: inline-block; margin-bottom: 1.1em; } .hero .lede { color: rgba(255, 255, 255, .85); font-size: clamp(1.05rem, 1.9vw, 1.28rem); max-width: 44em; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2em; } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; border-radius: var(--r-pill); font-family: var(--font-head); font-weight: 700; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-primary { background: var(--gradient); color: #fff; box-shadow: 0 14px 34px rgba(30, 67, 166, .45); } .btn-primary:hover { color: #fff; box-shadow: 0 18px 42px rgba(30, 67, 166, .6); } .btn-ghost { border: 2px solid rgba(255, 255, 255, .45); color: #fff; padding: 14px 30px; } .btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; } .prose .btn-primary { color: #fff; } /* ---------------------------------------------------------------- page head */ .page-head { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: clamp(112px, 9vw, 140px) 0 clamp(40px, 5vw, 60px); } .page-head .wrap { max-width: 880px; } .page-head h1 { margin-bottom: .3em; } .page-head .lede { font-size: 1.14rem; color: var(--ink-mute); margin-bottom: 0; } .post-head .wrap { max-width: 780px; } .crumb { font-family: var(--font-head); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1em; font-weight: 600; } .crumb a { color: var(--blue-deep); } .post-meta { color: var(--ink-mute); font-size: .92rem; margin: 0; } /* ---------------------------------------------------------------- prose */ .prose { padding: clamp(52px, 6vw, 84px) 24px clamp(60px, 7vw, 92px); } .prose.narrow { max-width: 800px; } .prose > *:first-child { margin-top: 0; } .prose .lede { font-size: 1.16rem; color: var(--ink); } .prose h2 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.25; padding-top: .2em; position: relative; } .prose h2::before { content: ""; display: block; width: 46px; height: 3px; border-radius: 3px; background: var(--gradient); margin-bottom: .7rem; } .prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.35em; } .prose li { margin-bottom: .5em; } .prose li::marker { color: var(--cyan); } .prose figure { margin: 2.4em 0; } .prose figure img { width: 100%; border-radius: var(--r-card); box-shadow: var(--shadow-card); } .prose blockquote { margin: 2em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--cyan); color: var(--ink); font-size: 1.08rem; font-style: italic; } .prose strong { color: var(--ink); font-weight: 500; } .learn-more { margin-top: -.4em; } .learn-more a { font-family: var(--font-head); font-weight: 700; font-size: .93rem; color: var(--blue-deep); display: inline-flex; align-items: center; gap: 6px; } .learn-more a:hover { text-decoration: none; color: var(--cyan); } .learn-more a span { transition: transform .16s ease; } .learn-more a:hover span { transform: translateX(3px); } .backlink { padding-bottom: 64px; font-family: var(--font-head); font-weight: 700; } /* ---------------------------------------------------------------- cards */ .card-grid { display: grid; gap: 28px; padding: clamp(52px, 6vw, 80px) 0 clamp(64px, 8vw, 100px); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #c9d8ef; } .card a { color: inherit; text-decoration: none; display: block; height: 100%; } .card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); } .card-img img { width: 100%; height: 100%; object-fit: cover; } .card-img-fallback { background: var(--gradient); opacity: .9; } .card-body { padding: 24px 24px 28px; } .card-date { font-family: var(--font-head); font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--blue-deep); margin: 0 0 .6em; font-weight: 700; } .card h3 { font-size: 1.15rem; margin: 0 0 .55em; line-height: 1.35; } .card p { font-size: .93rem; color: var(--ink-mute); margin: 0; } /* ========================================================================== Homepage components ========================================================================== */ /* ---- video hero ---- */ .home-hero { position: relative; background: var(--navy); overflow: hidden; } .home-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .home-hero .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 5, 76, .82) 0%, rgba(0, 5, 76, .6) 45%, rgba(0, 5, 76, .95) 100%); } .home-hero .hero-title { position: relative; z-index: 2; max-width: 1425px; margin: 0 auto; padding: 200px 10% 0; text-align: center; } .home-hero h1 { font-size: 4vw; line-height: 1.1; color: #fff; margin: 0; } .home-hero h1 em { position: relative; display: inline-block; font-style: italic; } .scribble { position: absolute; left: 0; bottom: -30%; width: 100%; height: 50%; z-index: -1; overflow: visible; } .scribble path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; } [data-motion="on"] .scribble.draw path { animation: scribble 1.3s cubic-bezier(.65, 0, .35, 1) forwards; } html:not([data-motion="on"]) .scribble path { stroke-dashoffset: 0; opacity: 1; } @keyframes scribble { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } @media (max-width: 999px) { .home-hero .hero-title { padding: 150px 8% 0; } .home-hero h1 { font-size: 7vw; } } @media (max-width: 690px) { .home-hero h1 { font-size: 8vw; } } /* ---- hero slider ---- */ .slider { position: relative; z-index: 2; max-width: 1425px; margin: 0 auto; padding: 0 max(10%, 100px); height: 44vw; max-height: 620px; } .slide { position: absolute; inset: 0; padding: 0 max(10%, 100px); display: flex; align-items: center; gap: 5vw; opacity: 0; pointer-events: none; transition: opacity .8s cubic-bezier(.25, 1, .5, 1); } .slide.is-active { opacity: 1; pointer-events: auto; } .slide > div { flex: 1 1 50%; } .slide h3 { font-size: min(50px, 3vw); line-height: 1.2; color: #fff; margin: 0 0 20px; } .slide p { font-size: min(20px, max(16px, 1.1vw)); line-height: 1.6; color: rgba(255, 255, 255, .85); margin: 0; } .slider-dots { position: absolute; left: max(3.45%, 27px); bottom: max(3.45%, 27px); display: flex; gap: 4px; z-index: 5; } .slider-dots button { width: 36px; height: 36px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; } .slider-dots span { width: 8px; height: 8px; border-radius: 50px; background: #fff; opacity: .4; transition: opacity .3s ease; display: block; } .slider-dots button.is-active span { opacity: 1; } @media (max-width: 999px) { .slider { height: auto; max-height: none; padding: 40px max(6%, 24px) 60px; } .slide { position: relative; inset: auto; padding: 0; display: none; } .slide.is-active { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .slider-dots { position: static; margin-top: 24px; } } /* ---- platform tiles ---- */ .tiles-section { background: var(--surface-2); padding: calc(100vw * .05) 0; } .tiles-lede { font-size: min(30px, 2.1vw); line-height: 1.45; font-weight: 600; max-width: 1100px; margin: 0 0 60px; font-family: var(--font-head); color: var(--ink); } .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .tile { display: block; border-radius: var(--r-card); padding: 40px 36px; color: #fff; text-decoration: none; transition: box-shadow .4s ease, transform .3s ease; } .tile:hover { color: #fff; text-decoration: none; transform: translateY(-3px); } .tile i, .tile .tile-icon { font-size: 40px; line-height: 40px; color: var(--orange); display: block; margin-bottom: 26px; } .tile .tile-icon { width: 40px; height: 40px; } .tile h4 { font-size: 1.4rem; color: #fff; margin: 0 0 14px; } .tile p { font-size: .95rem; line-height: 1.7; color: rgba(255, 255, 255, .85); margin: 0 0 22px; } .tile span { font-family: var(--font-head); font-size: .875rem; font-weight: 700; color: #fff; } .tile-1 { background: var(--tile-1); } .tile-1:hover { box-shadow: 0 30px 70px rgba(38, 0, 67, .35); } .tile-2 { background: var(--tile-2); } .tile-2:hover { box-shadow: 0 30px 70px rgba(22, 0, 137, .35); } .tile-3 { background: var(--tile-3); } .tile-3:hover { box-shadow: 0 30px 70px rgba(99, 0, 175, .35); } .tile-4 { background: var(--tile-4); } .tile-4:hover { box-shadow: 0 30px 70px rgba(0, 141, 229, .35); } .tile-5 { background: var(--tile-5); } .tile-5:hover { box-shadow: 0 30px 70px rgba(110, 0, 237, .35); } .tile-6 { background: var(--tile-6); } .tile-6 p { color: #fff; } .tile-6:hover { box-shadow: 0 30px 70px rgba(185, 107, 255, .35); } @media (max-width: 999px) { .tiles { grid-template-columns: 1fr 1fr; } } @media (max-width: 690px) { .tiles { grid-template-columns: 1fr; } } /* ---- how it works carousel ---- */ .works-section { padding: calc(100vw * .05) 0; } .works-section > h2 { text-align: center; margin: 0 0 55px; } .works-outer { position: relative; max-width: 1425px; margin: 0 auto; padding: 0 45px; } .works { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 3); gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 6px; } .works::-webkit-scrollbar { display: none; } .work { scroll-snap-align: start; display: block; text-decoration: none; color: #fff; } .work:hover { color: #fff; text-decoration: none; } .work-inner { position: relative; width: 100%; padding-bottom: 125%; border-radius: var(--r-card); overflow: hidden; background-size: cover; background-position: center; } .work-inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 5, 76, .1) 30%, rgba(0, 5, 76, .92) 100%); } .work-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 30px; z-index: 2; } .work-text h4 { font-size: 1.5rem; color: #fff; margin: 0 0 12px; display: inline; box-shadow: inset 0 -2px 0 #fff; } .work-text p { font-size: .95rem; line-height: 1.65; color: rgba(255, 255, 255, .85); margin: 16px 0 0; } .works-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border: 0; border-radius: var(--r-pill); background: #fff; box-shadow: 0 10px 30px rgba(0, 5, 76, .2); cursor: pointer; font-size: 20px; color: var(--navy); display: grid; place-items: center; z-index: 5; } .works-prev { left: max(3.5%, 32px); } .works-next { right: max(3.5%, 32px); } @media (max-width: 999px) { .works { grid-auto-columns: calc((100% - 30px) / 2); } } @media (max-width: 690px) { .works { grid-auto-columns: 84%; } .works-nav { display: none; } } /* ---- split feature band ---- */ .split-band { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--surface-3); } .split-band .split-text { padding: calc(100vw * .06); } .split-band .split-text h2 { font-size: 3vw; line-height: 1.1; color: #000; margin: 0 0 30px; } .split-band .split-text h5 { margin: 0 0 16px; } .split-band .split-text p { font-size: min(20px, max(16px, 1.1vw)); line-height: 1.7; } /* Right side of "Why Panoton?" — two layers, as on the live site: a tinted photo panel, plus an illustration overlapping its left edge. */ .split-band .split-img { position: relative; align-self: stretch; min-height: 90vh; background-size: cover; background-position: center; } .split-band .split-img::after { /* #1e43a6 @ .3, the live tint */ content: ""; position: absolute; inset: 0; background: #1e43a6; opacity: .3; } .split-band .split-float { position: absolute; z-index: 50; top: 50%; left: 0; transform: translate(-18%, -50%); /* laps the panel edge without reaching the text */ width: min(46%, 420px); filter: drop-shadow(0 40px 80px rgba(0, 5, 76, .45)); pointer-events: none; } /* Single column below 900px: there is no text column to lap onto, so the overhang is dropped entirely and the illustration centres inside the panel. */ @media (max-width: 900px) { .split-band { grid-template-columns: 1fr; } .split-band .split-text h2 { font-size: 2rem; } .split-band .split-img { min-height: 62vh; } .split-band .split-float { left: 50%; transform: translate(-50%, -50%); width: min(60%, 340px); } } @media (max-width: 690px) { .split-band .split-img { min-height: 54vh; } .split-band .split-float { width: 70%; } } /* ---- dark editorial band ---- */ .dark-band { background: var(--navy); padding: calc(100vw * .06) 0; } .dark-band h2 { font-size: 3vw; line-height: 1.15; color: #fff; max-width: 900px; margin: 0 0 70px; } .dark-band .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .dark-band img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--r-card); margin-bottom: 28px; } .dark-band h4 { color: #fff; margin: 0 0 14px; } .dark-band p { color: rgba(255, 255, 255, .75); margin: 0; } @media (max-width: 900px) { .dark-band h2 { font-size: 2rem; } .dark-band .pair { grid-template-columns: 1fr; gap: 40px; } } /* ---- waitlist CTA ---- */ .cta-band { position: relative; background: #0a0f3d; padding: calc(100vw * .06) 0; overflow: hidden; } .cta-band::before { content: ""; position: absolute; inset: -30% -10% auto 40%; height: 120%; background: radial-gradient(closest-side, rgba(50, 219, 242, .28), transparent 70%); pointer-events: none; } .cta-band .wrap { position: relative; } .cta-band h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; color: #fff; max-width: 800px; margin: 0 0 22px; } .cta-band > .wrap > p { color: rgba(255, 255, 255, .7); font-size: 1.125rem; max-width: 640px; margin-bottom: 34px; } .waitlist { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; max-width: 640px; } .waitlist input { flex: 1 1 300px; min-width: 240px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-pill); padding: 18px 26px; color: #fff; font-family: var(--font-body); font-size: 1rem; outline: none; } .waitlist input::placeholder { color: rgba(255, 255, 255, .5); } .waitlist input:focus { border-color: var(--cyan); } .cta-note { margin: 16px 0 0; font-size: .8125rem; color: rgba(255, 255, 255, .45); } /* ---------------------------------------------------------------- footer */ .site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, .65); padding: clamp(60px, 7vw, 88px) 0 32px; font-size: .9375rem; } .foot-grid { display: grid; gap: 40px; grid-template-columns: 1.6fr repeat(4, 1fr); } @media (max-width: 1000px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 640px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 440px) { .foot-grid { grid-template-columns: 1fr; } } .foot-brand { max-width: 320px; } .foot-brand img { width: 160px; margin-bottom: 18px; } .foot-brand p { margin-bottom: 1em; } .foot-contact a { color: #fff; font-weight: 500; } .site-footer h4 { color: #fff; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1.2em; font-weight: 700; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: .7em; line-height: 1.5; } .site-footer a { color: rgba(255, 255, 255, .65); } .site-footer a:hover { color: var(--cyan); text-decoration: none; } .foot-bar { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .875rem; color: rgba(255, 255, 255, .45); } /* ---------------------------------------------------------------- reveals Opt-in: content is visible unless JS is alive AND the page is being viewed. Dropping [data-motion] (no JS, reduced motion, hidden tab, print) restores everything instantly — an animation must never be able to hide content. */ [data-motion="on"] [data-reveal] { transition: opacity 1s cubic-bezier(.25, 1, .5, 1), transform 1s cubic-bezier(.25, 1, .5, 1); } [data-motion="on"] [data-reveal]:not([data-revealed]) { opacity: 0; transform: translateY(40px); } [data-motion="on"] [data-reveal][data-delay="1"] { transition-delay: .1s; } [data-motion="on"] [data-reveal][data-delay="2"] { transition-delay: .2s; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .scribble path { stroke-dashoffset: 0; opacity: 1; } } /* ---------------------------------------------------------------- header parity The homepage split header now matches the product pages (.pp-header) exactly: same utility bar, same 62px logo, same 20px/10px vertical rhythm, same fixed position. Metrics live here rather than in product.css because the homepage does not load product.css. */ .site-util { background: rgba(0, 0, 0, .35); border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 18px; } .site-util > div { max-width: 1425px; margin-inline: auto; padding: 8px clamp(24px, 3vw, 56px); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 28px; } .site-util a { font-size: .82rem; color: rgba(255, 255, 255, .8); } .site-util a:hover { color: var(--cyan, #32dbf2); text-decoration: none; } .site-header.split { padding: 0 0 20px; } .site-header.split.is-solid { padding: 0 0 10px; } .site-header.split.is-solid .site-util { margin-bottom: 10px; } /* .site-header carries backdrop-filter for the interior pages; over the video hero it painted a visible saturated band with a hard bottom edge. The product pages have no such filter, so drop it while the bar is transparent. */ .site-header.split.transparent:not(.is-solid) { backdrop-filter: none; -webkit-backdrop-filter: none; } .site-header.split.transparent:not(.is-solid) .site-util { background: rgba(0, 0, 0, .35); } .site-header.split .header-inner { min-height: 62px; } .site-header.split .brand img { height: 62px; } @media (max-width: 1199px) { /* the product pages keep the logo at 62px all the way down — match that */ .site-header.split .brand img { height: 62px; } } @media (max-width: 620px) { .site-util > div { justify-content: center; gap: 4px 16px; } .site-util a { font-size: .76rem; } }