/* ========================================================= BIG BRAND REPORT — LOCKED GLOBAL DESIGN RULES Loaded LAST on every page so it governs page-level CSS. ========================================================= */ :root { --bbr-raspberry: #C2185B; --bbr-page-margin: clamp(24px, 5vw, 80px); --bbr-h1-size: clamp(2.8rem, 5vw, 5.2rem); --bbr-h2-size: clamp(2rem, 3.5vw, 3.6rem); --bbr-h3-size: clamp(1.4rem, 2vw, 1.85rem); --bbr-body-size: clamp(1rem, 1.15vw, 1.125rem); --bbr-small-size: .875rem; } /* ========================================================= TYPEFACE LOCK — SECTION 6 Page stylesheets each declare --serif/--sans in their own :root. These declarations sit on , so they win for every descendant whichever page stylesheet loaded first. ========================================================= */ body { --serif: "Playfair Display", Georgia, "Times New Roman", serif; --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif; font-family: var(--sans); } /* LUXURY IS THE ONLY DELIBERATE EXCEPTION — SECTION 6 / 29 */ body.bbr-luxury { --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: "Manrope", "DM Sans", "Helvetica Neue", Arial, sans-serif; } main h1, main h2, main h3, main h4, main h5, main h6 { font-family: var(--serif); } main p, main li, main dd, main dt, main label, main input, main textarea, main select, main button, .bbr-primary-nav, .bbr-menu-panel, .site-footer, footer { font-family: var(--sans); } /* BLACK SITE HEADER — identical on every page */ .bbr-header { background: #0A0A0A !important; color: #FFFFFF !important; border-bottom: 1px solid rgba(255,255,255,.14) !important; } .bbr-header .brand img { display: block; } .bbr-header .bbr-primary-nav a { color: #FFFFFF !important; } .bbr-header .bbr-primary-nav a:hover, .bbr-header .bbr-primary-nav a:focus-visible { color: var(--bbr-raspberry) !important; } .bbr-header .bbr-menu-toggle { color: #FFFFFF !important; border-color: rgba(255,255,255,.28) !important; } .bbr-header .bbr-menu-toggle span { background: #FFFFFF !important; } @media (max-width: 820px) { .bbr-header .bbr-primary-nav { background: #0A0A0A !important; border-top-color: rgba(255,255,255,.14) !important; } .bbr-header .bbr-primary-nav a { color: #FFFFFF !important; text-align: left !important; } } /* ========================================================= SAME PAGE MARGIN ON EVERY PAGE — SECTION 9 ========================================================= */ main > section, main > .profile-back, main > nav.chapter-nav { box-sizing: border-box; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--bbr-page-margin) !important; padding-right: var(--bbr-page-margin) !important; } /* Deliberate full-bleed elements are the only approved exception. */ main > section.bbr-full-bleed { padding-left: 0 !important; padding-right: 0 !important; } /* Some legacy page templates added a second horizontal inset inside an already-padded top-level section. Remove only that duplicate inset. */ main > section > .hero-copy, main > section > .feature-copy, main > section > .spotlight-copy, main > section > .consumer-copy, main > section > .poll-copy, main > section > .mark-copy, main > section > .drops-copy, main > section > .intro-copy { padding-left: 0 !important; padding-right: 0 !important; } /* Legacy editorial wrappers were centred inside the page section, creating a different left edge from the rest of the site. */ main .copy, main .editorial-copy, main .compact-copy { margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================= SAME TYPOGRAPHY SCALE ON EVERY PAGE — SECTION 6 ========================================================= */ main h1 { font-size: var(--bbr-h1-size) !important; line-height: 1.05 !important; } main h2 { font-size: var(--bbr-h2-size) !important; line-height: 1.1 !important; } main h3 { font-size: var(--bbr-h3-size) !important; line-height: 1.2 !important; } main h4, main h5, main h6 { font-size: 1.15rem !important; line-height: 1.25 !important; } main p, main li, main dd, main dt, main label, main input, main textarea, main select { font-size: var(--bbr-body-size) !important; line-height: 1.6 !important; } main .eyebrow, main .kicker, main .issue, main .edition, main .section-number, main .category, main .brand-sectors { font-size: var(--bbr-small-size) !important; } /* The subscription block keeps the shared scale but never competes with the page's own headline. */ main .bbr-subscribe h2 { font-size: clamp(1.75rem, 2.8vw, 2.6rem) !important; } /* ========================================================= ALIGNMENT — SECTION 10 Scoped to text elements so it cannot flatten legitimate layout (flex/grid centring, table cells, form controls). ========================================================= */ main h1, main h2, main h3, main h4, main h5, main h6, main p, main ul, main ol, main li, main dl, main dt, main dd, main label, main blockquote, main figcaption, main .eyebrow, main .kicker, main .issue, main .edition, main .standfirst, main .lead, main .intro, main .copy, main .heading, main .section-heading, main .editorial-copy, .site-footer, .site-footer p, .site-footer a, .site-footer nav, footer, footer p, footer a, footer nav { text-align: left !important; } /* ========================================================= TITLE CASE — SECTION 7 Applied in the source copy, not by text-transform. A CSS transform would render the locked feature name "Brand vs Superfan" as "Brand Vs Superfan". ========================================================= */ /* LOCK RASPBERRY FOR ACCENTS */ :where(.pink, .eyebrow, .kicker, .issue, .edition, .section-number) { color: var(--bbr-raspberry); } button, .btn, .button, .button-primary, .primary { --accent: var(--bbr-raspberry); } /* DIRECTORY NAME IS PLAIN — NEVER TRADEMARKED — SECTION 24 */ .bbr-directory-name::after { content: none !important; } /* ========================================================= NO HORIZONTAL OVERFLOW ANYWHERE — SECTION 8 / 33 ========================================================= */ html, body { max-width: 100%; overflow-x: hidden; } main img, main video, main iframe, main table { max-width: 100%; } main img { height: auto; } /* Long unbroken strings (URLs, brand names) wrap instead of overflowing. */ main h1, main h2, main h3, main p, main li, main a { overflow-wrap: break-word; } /* ========================================================= FOOTER — ONE TREATMENT ON EVERY PAGE — SECTION 37 ========================================================= */ footer, .site-footer { box-sizing: border-box !important; padding: 60px var(--bbr-page-margin) !important; display: grid !important; grid-template-columns: 1.4fr 1fr 1fr 1.2fr !important; gap: 45px !important; background: #090909 !important; color: #FFFFFF !important; align-items: start; } footer img, .site-footer img { width: 105px; height: auto; filter: invert(1) grayscale(1) brightness(10); } footer nav, footer .contact, footer .footer-contact, .site-footer nav, .site-footer .contact, .site-footer .footer-contact { display: grid; gap: 10px; align-content: start; } footer p, .site-footer p { color: #AAAAAA !important; margin-top: 0; font-size: .92rem; line-height: 1.55; } footer a, .site-footer a { color: #FFFFFF !important; } footer a:hover, footer a:focus-visible, .site-footer a:hover, .site-footer a:focus-visible { color: var(--bbr-raspberry) !important; } .site-footer .footer-heading, footer .footer-heading { color: #7A7A7A !important; font-size: .72rem !important; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 2px !important; } @media (max-width: 1050px) { footer, .site-footer { grid-template-columns: 1fr 1fr !important; gap: 38px !important; } } @media (max-width: 640px) { footer, .site-footer { grid-template-columns: 1fr !important; gap: 32px !important; } } /* ========================================================= ACCESSIBILITY HELPERS Needed on every page, including pages that do not load the base /styles.css. ========================================================= */ .skip-link { position: absolute; left: -9999px; top: 0; background: #090909; color: #FFFFFF; padding: .8rem 1rem; z-index: 2000; text-decoration: none; } .skip-link:focus { left: 1rem; top: 1rem; } .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; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--bbr-raspberry); outline-offset: 3px; } /* ========================================================= RESPONSIVE TYPOGRAPHY — SECTION 8 ========================================================= */ @media (max-width: 760px) { :root { --bbr-page-margin: 24px; --bbr-h1-size: clamp(2.35rem, 11vw, 3.4rem); --bbr-h2-size: clamp(1.8rem, 8vw, 2.5rem); --bbr-h3-size: 1.35rem; --bbr-body-size: 1rem; } } /* ========================================================= COOKIE CONSENT NOTICE Rendered by /assets/site.js only when analytics is configured. ========================================================= */ .bbr-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; background: #0A0A0A; color: #fff; padding: 20px var(--bbr-page-margin); display: flex; gap: 22px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 3px solid var(--bbr-raspberry); } .bbr-consent p { margin: 0; max-width: 760px; font-size: .9rem !important; line-height: 1.55 !important; color: #d8d8d8 !important; } .bbr-consent a { color: #fff; text-decoration: underline; } .bbr-consent-actions { display: flex; gap: 10px; flex-shrink: 0; } .bbr-consent button { padding: .8rem 1.4rem; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; font-family: var(--sans); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } .bbr-consent button.bbr-consent-accept { background: var(--bbr-raspberry); border-color: var(--bbr-raspberry); } .bbr-consent button:hover { opacity: .88; } @media (max-width: 620px) { .bbr-consent { flex-direction: column; align-items: stretch; } .bbr-consent-actions button { flex: 1; } } /* ========================================================= BREADCRUMBS Visible on every page below the homepage, and mirrored in BreadcrumbList structured data on the same page. ========================================================= */ .bbr-breadcrumb { padding-top: 24px !important; padding-bottom: 0 !important; } .bbr-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .bbr-breadcrumb li { font-size: .78rem !important; line-height: 1.4 !important; color: #777 !important; } .bbr-breadcrumb a { color: #777; text-decoration: none; } .bbr-breadcrumb a:hover, .bbr-breadcrumb a:focus-visible { color: var(--bbr-raspberry); } .bbr-breadcrumb [aria-current] { color: #111 !important; }