/* ========================================================================== Beats 360 — FR landing page base.css — reset, design tokens, typography primitives, utilities No JavaScript. No build step. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Paints the canvas outside the capped . Without a background here, body's would propagate to the canvas and the page column could not be distinguished from its surround. */ background: var(--c-page); } body, h1, h2, h3, p, figure, figcaption, ul, li { margin: 0; padding: 0; } ul { list-style: none; } img, picture, svg { display: block; max-width: 100%; } /* Every carries width/height attributes to reserve layout space. Without this, a width-constrained image keeps the attribute's pixel height and renders stretched. */ img { height: auto; } table { border-collapse: collapse; border-spacing: 0; } a { color: inherit; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* -------------------------------------------------------------------------- 2. Design tokens Colour values eyedropped from wires/desktop_wires.jpg. -------------------------------------------------------------------------- */ :root { /* Surfaces */ --c-page: #ffffff; --c-band: #ecebe9; /* warm light grey section band */ --c-tile: #ddDAD5; /* product tile in the performance grid */ --c-band-tint: #d6e4e7; /* cool tint, top of the listening-mode gradient */ --c-line: #d2d2d7; /* Ink */ --c-ink: #1d1d1f; --c-ink-muted: #6e6e73; --c-ink-inverse: #ffffff; --c-ink-inverse-muted: rgba(255, 255, 255, 0.82); /* Listening-mode labels. --c-eq and --c-spatial are darkened from the comp (#7E878F, #A0AA73), which measured 3.07:1 and 2.08:1 on --c-band. 3:1 is the WCAG AA floor for large text; the olive failed outright. Hue preserved. */ --c-anc: #6262a2; --c-transparency: #a761a3; --c-eq: #67707a; --c-spatial: #77813f; /* Type */ --font-stack: Avenir, "Century Gothic", AppleGothic, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; --fs-display: clamp(2rem, 1.15rem + 3.6vw, 3.25rem); --fs-h2: clamp(1.625rem, 1.1rem + 2.2vw, 2.5rem); --fs-h3: clamp(1.375rem, 1.15rem + 0.85vw, 1.75rem); /* Body-copy floor is 20px (1.25rem) everywhere outside the footnote block. --fs-small carries most of the page's prose (.cushions__body, .comfort__body, .sound__cols, .water__body, .perf__tile-body, .compare__cell), so it takes the same floor as --fs-body and the two converge below the desktop breakpoint. --fs-legal is deliberately exempt: it is the Mentions légales fine print. */ --fs-lead: clamp(1.25rem, 1.19rem + 0.3vw, 1.5rem); --fs-body: clamp(1.25rem, 1.21rem + 0.18vw, 1.375rem); --fs-small: clamp(1.25rem, 1.23rem + 0.11vw, 1.3125rem); --fs-legal: 0.6875rem; /* River type scale — §2 to §6, everything between the compare chart and the footer. Set by the channel redline rather than measured off the comps, so these are flat values, not clamps: 54px headings at every width, and an eyebrow that runs *larger* on mobile than on desktop. --fs-eyebrow is only ever used by .eyebrow, which appears solely in §2, §3 and §5, so the token is already scoped to the river. The 20px value lands at the desktop breakpoint; tablet carries the 24px mobile value, since the redline names only the two viewports. */ --fs-river-title: 3.375rem; /* 54px */ --fs-eyebrow: 1.5rem; /* 24px — mobile and tablet */ --lh-tight: 1.08; --lh-snug: 1.22; --lh-body: 1.5; --lh-copy: 1.35; /* river body copy, §2–§6 */ /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 5.5rem; --sp-10: 7rem; /* Layout — two nested caps: --page-max , the parent container. Sections are not capped below this, so section bands and their full-bleed background media run the full page width. --container-max the copy column inside a section. --container is a percentage so it resolves against the capped page and keeps a side gutter below --container-max. */ --page-max: 1400px; --container: 87.5%; --container-max: 1140px; --section-y: var(--sp-8); --radius: 12px; --radius-lg: 18px; } /* Tablet */ @media (min-width: 735px) { :root { --container: 692px; --section-y: var(--sp-9); --radius: 14px; --radius-lg: 22px; } } /* Desktop */ @media (min-width: 1069px) { :root { /* Percentage, not a fixed width: below ~1303px viewport the page is still narrower than --page-max, and a fixed 1140px would leave no side gutter there. Above that, --container-max pins the copy column at 1140px. */ --container: 87.5%; --section-y: var(--sp-10); --fs-eyebrow: 1.25rem; /* 20px */ } } /* -------------------------------------------------------------------------- 3. Base typography -------------------------------------------------------------------------- */ body { /* The parent container. Sections fill this width; only the copy columns inside them are capped. position: relative keeps the absolutely-positioned .skip-link aligned to the page, not the viewport. */ position: relative; max-width: var(--page-max); margin-inline: auto; background: var(--c-page); color: var(--c-ink); font-family: var(--font-stack); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3 { font-weight: 600; letter-spacing: -0.015em; line-height: var(--lh-tight); text-wrap: balance; } p { text-wrap: pretty; } p + p { margin-top: 1em; } strong { font-weight: 600; } /* -------------------------------------------------------------------------- 4. Shared primitives -------------------------------------------------------------------------- */ /* Every section runs the full width of the parent container — that is what lets the section bands and the full-bleed media inside them fill the page. The copy column is what gets capped; see .container below. */ .container { width: var(--container); max-width: var(--container-max); margin-inline: auto; } .section { padding-block: var(--section-y); } .section--band { background: var(--c-band); } .eyebrow { margin-bottom: var(--sp-3); color: var(--c-ink-muted); font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: 0.01em; line-height: 1.3; } .title { font-size: var(--fs-h2); } .title--display { font-size: var(--fs-display); } .centered { text-align: center; } /* Footnote marker — an in-page anchor to the legal block. No JS. */ .fn { font-size: 0.72em; text-decoration: none; vertical-align: 0.42em; line-height: 0; } .fn:hover { text-decoration: underline; } /* Full-bleed media that sits behind overlaid copy */ .media-fill { position: absolute; inset: 0; } /* Note: