@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ═══════════════════════════════════════════════════════════════ OneScreen TAP — design tokens Values taken from the OneScreen design system (v2) token files. ═══════════════════════════════════════════════════════════════ */ :root { --purple: rgb(111, 51, 147); --purple-deep: rgb(78, 15, 137); --purple-bright: rgb(139, 63, 242); --purple-vivid: rgb(125, 1, 169); --lime: rgb(130, 195, 65); --charcoal: rgb(51, 51, 51); --muted: rgb(99, 110, 114); --lilac: rgb(244, 235, 255); --lilac-deep: rgb(214, 195, 249); --slate: rgb(229, 229, 229); --hairline: rgb(244, 244, 244); --white: #fff; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --shell: 1640px; --pad-x: 40px; --header-h: 79px; --scroll-offset: 110px; --r-hero: 40px; --r-card: 16px; --r-field: 10px; --r-pill: 30px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 160ms; --shadow-header: 0 8px 32px 6px rgba(0, 0, 0, 0.05); --shadow-modal: 0 8px 32px 6px rgba(0, 0, 0, 0.18); } /* ═══ Reset ══════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { /* No `scroll-behavior: smooth` here on purpose — goTo() animates scrolling itself, and having both fight each other is what made touch scrolling feel like it was being yanked around. */ -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--white); color: var(--charcoal); font: 400 16px/1.28 var(--font); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; /* `clip`, not `hidden` — hidden would turn into a scroll container and break the sticky header and section nav. */ overflow-x: clip; -webkit-tap-highlight-color: rgba(111, 51, 147, 0.12); } img, svg { display: block; max-width: 100%; } button { font: inherit; } input, textarea, select { font: inherit; } a { color: var(--purple); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--lime); } :where(a, button, input, textarea, [tabindex]):focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 2px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 300; padding: 12px 20px; border-radius: var(--r-pill); background: var(--purple); color: var(--white); font-weight: 700; transition: top var(--dur) var(--ease); } .skip-link:focus { top: 16px; color: var(--white); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ═══ Shared primitives ══════════════════════════════════════ */ .shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad-x); } .eyebrow { font-weight: 700; font-size: 16px; line-height: 19.5px; color: var(--lime); } .h2 { margin: 0; padding: 8px 0; font-weight: 700; font-size: 36px; line-height: 37.5px; color: var(--charcoal); text-wrap: balance; } .body-text { margin: 0; font-size: 16px; line-height: 20.5px; color: var(--muted); text-wrap: pretty; } /* Standfirst line under a section heading. */ .section-desc { margin: 0; max-width: 640px; font-size: 16px; line-height: 22px; color: var(--muted); text-wrap: pretty; } .rule { border: 0; border-top: 1px solid var(--lilac); margin: 0; } .card { border-radius: var(--r-card); background: var(--lilac); border: 1px solid var(--hairline); padding: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .card--plain { background: var(--white); border-color: var(--slate); } .stat { font-weight: 700; font-size: 24px; line-height: 27.5px; color: var(--purple); } .card__title { font-weight: 700; font-size: 16px; line-height: 19.5px; color: var(--charcoal); } .card__text { font-size: 16px; line-height: 20.5px; color: var(--muted); } .tag { display: inline-flex; align-items: center; align-self: flex-start; padding: 4px 14px; border-radius: var(--r-pill); background: var(--lilac); font-weight: 700; font-size: 13px; line-height: 19.5px; color: var(--purple); white-space: nowrap; } .tag--white { background: var(--white); } .tag--purple { background: var(--purple); color: var(--white); } .tag--lime { background: var(--lime); color: var(--white); } .grid { display: grid; gap: 12px; padding-top: 32px; } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ═══ Buttons ════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 7px 25px; border: none; border-radius: var(--r-pill); background: var(--purple); color: var(--white); font-weight: 700; font-size: 16px; line-height: 19.5px; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .btn:hover { background: var(--lime); color: var(--white); } .btn[disabled] { opacity: 0.6; cursor: progress; } .btn--lg { height: 50px; padding: 15px 35px; } /* Two labels for the header CTA; the media query picks one. */ .btn__short { display: none; } .btn--outline { align-self: flex-start; background: var(--white); color: var(--purple); border: 2px solid var(--purple); } .btn--outline:hover { background: var(--white); border-color: var(--lime); color: var(--lime); } .btn--link { position: relative; align-self: flex-start; margin-top: auto; height: auto; padding: 0; border: none; background: none; color: var(--purple); font-weight: 700; font-size: 16px; line-height: 19.5px; cursor: pointer; } /* Text-only links sit ~20px tall. Grow the hit area to a comfortable touch target without adding padding that would shift the card layout. */ .btn--link::after { content: ''; position: absolute; inset: -12px -10px; } .btn--link:hover { background: none; color: var(--lime); } /* ═══ Header ═════════════════════════════════════════════════ */ .header { position: sticky; top: 0; z-index: 60; background: var(--white); box-shadow: var(--shadow-header); } .header__inner { max-width: var(--shell); margin-inline: auto; height: var(--header-h); padding: 14px var(--pad-x); display: flex; align-items: center; gap: 24px; } .brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .brand__mark { display: flex; align-items: flex-start; gap: 2px; color: var(--purple); } .brand__mark svg { width: 140px; height: 20px; } .brand__tm { font-weight: 700; font-size: 9px; line-height: 1; color: var(--purple); } .brand__divider { width: 1px; height: 26px; background: var(--slate); } .brand__tap { font-weight: 700; font-size: 14px; line-height: 19.5px; color: var(--purple); } .header__center { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; } .header__eyebrow { font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .header__issue { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .header__issue b { font-weight: 700; font-size: 16px; line-height: 19.5px; color: var(--charcoal); } .header__issue i { width: 4px; height: 4px; border-radius: 50%; background: var(--slate); } .header__issue em { font-style: normal; font-weight: 700; font-size: 16px; line-height: 19.5px; color: var(--purple); } .header__actions { flex-shrink: 0; display: flex; align-items: center; gap: 16px; } .guru { position: relative; flex-shrink: 0; width: 50.5px; height: 50.5px; display: block; } /* The badge is an ; let it fill the box so resizing .guru keeps it round. */ .guru img { width: 100%; height: 100%; display: block; } .guru:hover { filter: brightness(1.06); } .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lilac); } .progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--purple) 0%, var(--purple-bright) 100%); transition: width 120ms linear; } /* ═══ Hero ═══════════════════════════════════════════════════ */ .hero-wrap { max-width: var(--shell); margin-inline: auto; padding: 20px var(--pad-x) 0; } .hero { position: relative; min-height: 385px; display: flex; align-items: center; justify-content: center; padding: 96px 65px; border-radius: var(--r-hero); overflow: hidden; background-color: var(--purple-deep); background-size: cover; background-position: center; background-repeat: no-repeat; /* District-logo collage under the brand-purple wash, as in the source design. Plain url() first so browsers without image-set() still get it. */ background-image: linear-gradient(rgba(125, 1, 169, 0.76), rgba(78, 15, 137, 0.84)), url('assets/tap-districts.png'); background-image: linear-gradient(rgba(125, 1, 169, 0.76), rgba(78, 15, 137, 0.84)), image-set( url('assets/tap-districts.webp') type('image/webp'), url('assets/tap-districts.png') type('image/png') ); } .hero__content { width: 100%; max-width: 850px; display: flex; flex-direction: column; gap: 20px; align-items: center; } .hero__chip { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 15px 35px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(2px); } .hero__chip span { font-weight: 700; font-size: 16px; line-height: 19.5px; color: var(--white); white-space: nowrap; } .hero__title { margin: 0; font-weight: 700; font-size: 44px; line-height: 47.5px; text-align: center; color: var(--white); text-wrap: balance; } .hero__sub { margin: 0; font-weight: 400; font-size: 20px; line-height: 27.5px; text-align: center; color: var(--white); text-wrap: pretty; } /* ═══ Body layout ════════════════════════════════════════════ */ .layout { max-width: var(--shell); margin-inline: auto; padding: 30px var(--pad-x) 56px; display: flex; flex-direction: row; gap: 56px; align-items: flex-start; } .rail { position: sticky; top: calc(var(--header-h) + 24px); width: 240px; flex-shrink: 0; } .rail__list { position: relative; padding: 8px 0; } .rail__line { position: absolute; left: 19px; top: 16px; bottom: 22px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--purple) 0%, var(--purple-bright) 100%); } .rail__item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 52px; padding: 0; border: none; cursor: pointer; border-radius: var(--r-field); text-align: left; background: transparent; transition: background var(--dur) var(--ease); } .rail__item:hover { background: var(--lilac); } .rail__item[aria-current='true'] { background: var(--lilac); } .rail__dot-slot { width: 40px; flex-shrink: 0; display: flex; justify-content: center; } .rail__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--white); border: 1.6px solid var(--lilac); transition: all var(--dur) var(--ease); } /* The lime accent marks "you are here". On desktop it also lifts the dot off the purple gradient rail line, which a purple dot sat invisibly against. */ .rail__item[aria-current='true'] .rail__dot { width: 12.5px; height: 12.5px; background: var(--lime); border: 2px solid var(--lime); } .rail__label { font-weight: 400; font-size: 16px; line-height: 20.5px; color: var(--muted); transition: all var(--dur) var(--ease); } .rail__item[aria-current='true'] .rail__label { font-weight: 700; font-size: 20px; line-height: 27.5px; color: var(--purple); } .content { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 50px; } section[id] { scroll-margin-top: var(--scroll-offset); } /* ═══ Spotlight ══════════════════════════════════════════════ */ .spotlight { display: flex; flex-direction: column; gap: 24px; padding-top: 32px; } .video { position: relative; display: block; width: 100%; height: 280px; padding: 0; border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; cursor: pointer; background: var(--purple-deep); } .video__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video__scrim { position: absolute; inset: 0; background: linear-gradient(rgba(111, 51, 147, 0.35), rgba(111, 51, 147, 0.55)); } .video__cta { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; } .video__play { width: 48px; height: 48px; border-radius: 50%; background: var(--purple); display: flex; align-items: center; justify-content: center; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .video__play svg { width: 12px; height: 15px; margin-left: 3px; fill: var(--white); } .video:hover .video__play { background: var(--lime); transform: scale(1.08); } .video__label { font-size: 16px; line-height: 20.5px; color: var(--white); } .spotlight__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .spotlight__name { font-weight: 700; font-size: 24px; line-height: 27.5px; color: var(--charcoal); } /* ═══ Tabs ═══════════════════════════════════════════════════ */ .section-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 8px 0; } .tabs { display: flex; gap: 6px; padding: 5px; border-radius: var(--r-pill); background: var(--lilac); } .tab { padding: 9px 22px; border-radius: var(--r-pill); border: none; cursor: pointer; font-weight: 700; font-size: 16px; line-height: 19.5px; background: transparent; color: var(--muted); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .tab:hover { color: var(--purple); } .tab[aria-selected='true'] { background: var(--purple); color: var(--white); } .card__icon { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; } .card--dashed { background: var(--white); border: 1px dashed var(--purple); justify-content: center; } .card--dashed .card__title { color: var(--purple); } .card--dashed:hover { border-color: var(--lime); } /* ═══ Release notes ══════════════════════════════════════════ */ .release { padding-top: 32px; display: flex; flex-direction: column; gap: 12px; } .release__summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: var(--r-card); background: var(--lilac); border: 1px solid var(--hairline); padding: 20px 24px; } .release__summary b { font-weight: 700; font-size: 16px; line-height: 19.5px; color: var(--charcoal); } .release__summary span { font-size: 16px; line-height: 20.5px; color: var(--muted); } .release__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } .group { gap: 12px; } .group__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .group__name { font-weight: 700; font-size: 16px; line-height: 19.5px; color: var(--charcoal); } .group__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .group__list li { display: flex; gap: 8px; align-items: flex-start; } .group__check { flex-shrink: 0; padding: 2px 0; font-weight: 700; font-size: 13px; line-height: 19.5px; color: var(--lime); } .group__list span { font-size: 16px; line-height: 20.5px; color: var(--charcoal); } /* ═══ Announcements ══════════════════════════════════════════ */ .feature-card { grid-column: 1 / -1; background: linear-gradient(90deg, var(--lilac-deep) 0%, var(--white) 100%); border-color: var(--hairline); padding: 24px; } .feature-card .card__title { font-size: 24px; line-height: 27.5px; } .feature-card .card__text { max-width: 760px; } /* ═══ Forms ══════════════════════════════════════════════════ */ .form-shell { margin-top: 32px; border-radius: var(--r-card); background: var(--white); border: 1px solid var(--slate); padding: 28px; } .form { display: flex; flex-direction: column; gap: 18px; } .form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .field { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .field label { font-weight: 700; font-size: 14px; line-height: 19.5px; color: var(--charcoal); } .field input, .field textarea { width: 100%; padding: 0 16px; height: 44px; border-radius: var(--r-field); border: 1px solid var(--slate); font-size: 16px; color: var(--charcoal); background: var(--white); outline: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field textarea { height: auto; min-height: 112px; padding: 12px 16px; line-height: 20.5px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: rgb(160, 168, 172); } .field input:focus, .field textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(111, 51, 147, 0.14); outline: none; } .field[data-invalid='true'] input, .field[data-invalid='true'] textarea { border-color: #d64545; } .field__error { min-height: 0; font-size: 13px; line-height: 18px; color: #c0392b; } .field__error:empty { display: none; } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .form__note { font-size: 14px; line-height: 19.5px; color: var(--muted); } .form__status { font-size: 14px; line-height: 20px; color: #c0392b; font-weight: 600; } .form__status:empty { display: none; } .success { display: flex; gap: 12px; align-items: flex-start; } .success__tick { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--lime); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; } .success__title { font-weight: 700; font-size: 24px; line-height: 27.5px; color: var(--charcoal); } .success p { margin: 8px 0 12px; font-size: 16px; line-height: 20.5px; color: var(--muted); } [hidden] { display: none !important; } /* ═══ Merch banner ═══════════════════════════════════════════ */ .merch { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 36px; align-items: center; border-radius: var(--r-card); border: 1px solid var(--hairline); background: linear-gradient(90deg, var(--lilac-deep) 0%, var(--white) 100%); padding: 32px; } .merch__copy { min-width: 0; display: flex; flex-direction: column; gap: 14px; } .merch__copy > p { margin: 0; font-size: 16px; line-height: 20.5px; color: var(--charcoal); } .merch__tags { display: flex; flex-wrap: wrap; gap: 8px; } .merch__tags .tag { padding: 6px 16px; background: var(--white); } .merch__cta { min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } /* ═══ Modals ═════════════════════════════════════════════════ */ .modal { position: fixed; inset: 0; z-index: 200; background: rgba(20, 8, 30, 0.7); display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow: auto; overscroll-behavior: contain; } .modal--video { align-items: center; background: rgba(20, 8, 30, 0.86); padding: 40px; } .modal__panel { width: 100%; max-width: 520px; border-radius: var(--r-card); background: var(--white); padding: 28px; box-shadow: var(--shadow-modal); } .modal__panel--sm { max-width: 480px; } .modal__panel--video { max-width: 900px; background: none; box-shadow: none; padding: 0; position: relative; } .modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .modal__title { padding-top: 6px; font-weight: 700; font-size: 24px; line-height: 27.5px; color: var(--charcoal); } .modal__close { flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--lilac); color: var(--purple); font-size: 16px; line-height: 1; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .modal__close:hover { background: var(--lime); color: var(--white); } .modal__close--video { position: absolute; top: -44px; right: 0; background: none; color: var(--white); font-size: 24px; width: auto; height: auto; } .modal__close--video:hover { background: none; color: var(--lime); } .modal__body { padding-top: 20px; display: flex; flex-direction: column; gap: 16px; } .video-frame { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: #000; } .video-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .modal__fallback { padding-top: 12px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.8); } .modal__fallback a { color: var(--white); text-decoration: underline; } .modal__fallback a:hover { color: var(--lime); } /* Pinned rather than `overflow: hidden`, which iOS ignores for touch scroll. */ body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } /* ═══ Footer ═════════════════════════════════════════════════ */ .footer { background: linear-gradient(180deg, rgba(111, 51, 147, 0.25) 0%, rgba(229, 229, 229, 0.15) 100%), var(--white); padding: 48px 0; } .footer__inner { max-width: var(--shell); margin-inline: auto; padding: 0 var(--pad-x); display: flex; flex-direction: column; gap: 32px; } .footer__grid { display: grid; /* Four equal tracks: a fixed first column made the gaps between headings read as uneven across the row. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; align-items: flex-start; } .footer__col { display: flex; flex-direction: column; gap: 8px; } .footer__col h2 { margin: 0; font-weight: 700; font-size: 20px; line-height: 27.5px; color: var(--charcoal); } .footer__col a, .footer__col p { margin: 0; font-size: 16px; line-height: 20.5px; color: var(--muted); } .footer__col a:hover { color: var(--lime); } .footer__col--support > div { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; } .footer__col--support a { font-size: 15px; } .footer__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 32px; padding-top: 8px; } .footer__logo { display: flex; align-items: flex-start; gap: 3px; color: var(--purple); } .footer__logo svg { width: 230px; height: 34px; } .footer__logo span { font-weight: 700; font-size: 13px; line-height: 1; color: var(--purple); } .social { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-width: 216px; } .social h2 { margin: 0; font-weight: 700; font-size: 16px; line-height: 19.5px; color: var(--purple); } .social__row { display: flex; align-items: center; justify-content: center; gap: 11px; flex-wrap: wrap; row-gap: 10px; } /* Plain dark glyphs, no chips — the box stays 38px so it remains a comfortable tap target even though nothing is drawn behind the icon. */ .social__row a { width: 38px; height: 38px; border-radius: 50%; background: transparent; color: var(--charcoal); display: flex; align-items: center; justify-content: center; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); } .social__row a:hover { color: var(--purple); transform: translateY(-1px); } .social__row svg { width: 21px; height: 21px; } .footer__address { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; width: 210px; justify-self: end; } .footer__address h2 { margin: 0; font-weight: 700; font-size: 16px; line-height: 19.5px; color: var(--purple); } .footer__address p { margin: 0; font-weight: 300; font-size: 14px; line-height: 18px; color: var(--charcoal); } /* ═══════════════════════════════════════════════════════════════ Responsive — breakpoints carried over from the source design ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1360px) { :root { --pad-x: 32px; } .layout { gap: 40px; } } @media (max-width: 1200px) { .header__eyebrow { display: none; } } @media (max-width: 1024px) { .hero { padding: 72px 48px; min-height: 340px; } .hero__title { font-size: 38px; line-height: 42px; } .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { /* Header shrinks and the section nav sticks beneath it, so the offset a jump needs to clear is the sum of the two. */ :root { --pad-x: 16px; --header-h: 62px; --rail-h: 56px; --scroll-offset: 126px; } /* With the centre column hidden, space-between restores the desktop rhythm: brand hard left, actions hard right, instead of both packing left. */ .header__center { display: none; } .header__inner { padding: 9px 16px; gap: 16px; justify-content: space-between; } .header__actions { gap: 12px; } .guru { width: 46px; height: 46px; } .hero-wrap { padding: 16px var(--pad-x) 0; } .hero { min-height: 0; padding: 40px 24px; border-radius: 24px; } .hero__title { font-size: 30px; line-height: 34px; } .hero__sub { font-size: 17px; line-height: 24px; } .layout { flex-direction: column; gap: 24px; padding: 20px var(--pad-x) 40px; } /* Rail becomes a horizontal chip row that sticks under the header, so the section nav stays reachable on a page this long instead of scrolling away. Negative insets let its background run edge to edge inside .layout. */ .rail { position: sticky; top: calc(var(--header-h) - 1px); z-index: 50; width: auto; /* .layout sets align-items: flex-start, so without this the rail would shrink-wrap to the full width of its chip row instead of the viewport. */ align-self: stretch; margin-inline: calc(var(--pad-x) * -1); padding: 4px var(--pad-x) 6px; background: var(--white); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.22); } .rail__list { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-padding-inline: 4px; } .rail__list::-webkit-scrollbar { display: none; } /* Fade the edge that has more chips beyond it, so a half-visible chip reads as "scroll for more" rather than as a clipped, broken layout. The classes are toggled from JS as the row scrolls. */ .rail__list.can-scroll-end { mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%); } .rail__list.can-scroll-start { mask-image: linear-gradient(to right, transparent 0, #000 40px); } .rail__list.can-scroll-start.can-scroll-end { mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); } .rail__line { display: none; } .rail__item { width: auto; height: 44px; padding: 0 16px 0 4px; background: var(--lilac); flex-shrink: 0; } .rail__item[aria-current='true'] { background: var(--purple); } .rail__item[aria-current='true'] .rail__label { color: var(--white); font-size: 16px; line-height: 20.5px; } .rail__item[aria-current='true'] .rail__dot { background: var(--lime); border-color: var(--lime); } .rail__dot-slot { width: 32px; } .content { gap: 40px; } .h2 { font-size: 28px; line-height: 32px; } .grid--4, .grid--3, .grid--2, .release__groups, .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form__grid, .merch { grid-template-columns: minmax(0, 1fr); } .merch { gap: 24px; padding: 24px; } .merch__cta { align-items: stretch; } .merch__cta .btn { width: 100%; } .video { height: 220px; } /* Touch targets: stacked footer links are only ~21px tall on their own, and the icon chips ~38px. Give both a comfortable 44px without changing how the type sits. */ .footer__col a { min-height: 44px; display: flex; align-items: center; } .footer__col { gap: 0; } .footer__col--support > div { gap: 0; } .social__row a { width: 44px; height: 44px; } .brand { min-height: 44px; } .footer { padding: 40px 0; } .footer__bottom { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 24px; } .footer__bottom > * { justify-self: center; align-items: center; text-align: center; } .footer__address { width: auto; } .footer__logo svg { width: 190px; height: 28px; } .modal { padding: 20px 12px; } .modal--video { padding: 20px 12px; align-items: center; } .modal__panel { padding: 22px; } .modal__close--video { top: -38px; } } @media (max-width: 700px) { .release__groups { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .grid--4, .grid--3, .grid--2, .footer__grid { grid-template-columns: minmax(0, 1fr); } /* The header has to survive 320px: tighten it and shorten the CTA label. */ .header__inner { padding: 12px 16px; gap: 12px; } .header__actions { gap: 10px; } .guru { width: 44px; height: 44px; } .btn__long { display: none; } .btn__short { display: inline; } .hero { padding: 32px 18px; } .hero__chip { height: auto; padding: 12px 20px; } .hero__chip span { white-space: normal; text-align: center; } .hero__title { font-size: 27px; line-height: 31px; } .brand__mark svg { width: 112px; height: 16px; } .brand__tap { font-size: 13px; } .header__actions .btn { padding: 7px 18px; font-size: 15px; } .section-head { gap: 12px; } /* Hug the pills instead of stretching to full width, which left a wide band of empty lilac after the last tab. Wrapping is a safety net for long labels. */ .tabs { width: fit-content; max-width: 100%; flex-wrap: wrap; row-gap: 6px; } /* 44px minimum touch target. */ .tab { padding: 9px 18px; min-height: 44px; } .video { height: 180px; } .form-shell { padding: 20px; } .form__actions .btn { width: 100%; } .spotlight__name { font-size: 21px; line-height: 25px; } } /* Genuinely small handsets only. Common phones are 390–430px wide, so this last-resort tightening must not reach them — at 393px it was dropping the brand divider and squeezing the header on an ordinary iPhone. */ @media (max-width: 360px) { .header__actions .btn { padding: 7px 14px; font-size: 14px; } .brand { gap: 8px; } .brand__mark svg { width: 92px; height: 13px; } .brand__divider { display: none; } .header__inner { padding: 12px 12px; gap: 10px; } .header__actions { gap: 10px; } .guru { width: 42px; height: 42px; } }