/* ============================================================= BBI - Design Tokens assets/css/tokens.css Single source of truth for every colour, font, spacing, radius and motion value used in the theme. NO other CSS file may declare a hex code or a raw font-family name. To re-brand: edit tokens in this file only (colours + typography). Brand fonts only — no system or substitute fallbacks in our stacks. Loaded via: - Adobe Typekit kit buo1ygz (header.php): neue-haas-grotesk-display, neue-haas-grotesk-text, eroika-slab - Google Fonts (enqueue.php): Azeret Mono; Zalando when not self-hosted. - Ticker Anek ExtraBold: self-hosted in assets/fonts/ (Theme Options ticker lang); Google Fonts fallback only when a script file is missing. One Anek family per ticker `lang`; no sans-serif fallback on ticker text. Use Typekit CSS family slugs exactly (e.g. eroika-slab, not "Eroika Slab"). ============================================================= */ :root { /* ------------------------------------------------------------ Typography - font families ------------------------------------------------------------ */ /* Display = headline / hero / section heading (Figma: Neue Haas Grotesk Display Pro). */ --font-display: "neue-haas-grotesk-display"; /* Display Pro 65 Medium — Typekit kit buo1ygz maps this cut to font-weight 600 (fvd=n6). */ --font-display-medium: "neue-haas-grotesk-display"; /* Body / paragraph copy (general UI). Figma Zalando Sans uses --font-zalando. */ --font-body: "neue-haas-grotesk-text"; /* Zalando Sans — WoMI, author bio, article excerpt (self-hosted woff2 + Google fallback). */ --font-zalando: "Zalando Sans"; /* Slab eyebrow — TOP STORY / category pills (Figma: Eroika Slab Regular). */ --font-slab: "eroika-slab"; /* Monospace — bylines, ticker chrome (Figma: Azeret Mono). */ --font-mono: "Azeret Mono"; /* MENU / CHARTS header buttons. */ --font-chrome: "neue-haas-grotesk-display"; /* Multilingual ticker — Anek ExtraBold @ 800 (self-hosted or Google fallback). */ --font-anek-devanagari: "Anek Devanagari"; --font-anek-bangla: "Anek Bangla"; --font-anek-gujarati: "Anek Gujarati"; --font-anek-tamil: "Anek Tamil"; --font-anek-odia: "Anek Odia"; --font-anek-malayalam: "Anek Malayalam"; --font-anek-kannada: "Anek Kannada"; /* Legacy aliases (kept so older selectors still resolve). */ --font-primary: var(--font-display); --font-secondary: var(--font-body); --font-ui: var(--font-body); /* generic UI / form text */ /* ------------------------------------------------------------ Typography - sizes Anchored to the Figma artboard (1728px wide). ------------------------------------------------------------ */ --font-size-xxs: 0.625rem; /* 10px - footer legal */ --font-size-xs: 0.75rem; /* 12px - meta / eyebrow */ --font-size-sm: 0.875rem; /* 14px - WoMI body, CHECK OUT WOMI */ --font-size-base: 1rem; /* 16px - global news byline */ --font-size-md: 1.125rem; /* 18px - MENU / CHARTS, Sign Up */ --font-size-lg: 1.25rem; /* 20px - global news title, footer column headers */ --font-size-xl: 1.5rem; /* 24px - latest news title */ --font-size-2xl: 1.875rem; /* 30px - THE DAILY newsletter heading + ticker text (see --ticker-font-size) */ --font-size-3xl: 3.125rem; /* 50px - section headings + hero title */ --font-size-4xl: 4rem; /* 64px - reserved */ --font-size-hero: 22vw; /* big "billboard" logo on intro state */ --font-size-section: var(--font-size-3xl); --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800; --line-height-tight: 1.05; --line-height-snug: 1.2; --line-height-normal: 1.4; --line-height-loose: 1.6; --letter-spacing-tighter: -0.02em; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; --letter-spacing-wider: 0.1em; --letter-spacing-widest: 0.2em; /* TOP STORY (2.4px @ 12px) */ --letter-spacing-mono: 0.5em; /* author byline (6px @ 12px) */ /* Home — Latest News layout (Figma Desktop_ArtcileV1). */ --latest-news-text-image-gap: 92px; /* Home — Latest News article title (Figma: NHG Display Pro 65 Medium, 24px). Figma lists 100% leading for a single line; use 1.3 so wrapped titles stay readable. */ --type-latest-news-title-font: var(--font-display-medium); --type-latest-news-title-size: var(--font-size-xl); --type-latest-news-title-weight: 600; --type-latest-news-title-line-height: 1.3; /* Home — Global News article title (Figma: NHG Display Pro Bold, 20px, 2-line clamp). */ --type-global-news-title-line-height: var(--type-latest-news-title-line-height); /* * Category + author archive cards — 2-line title track + gap to byline (px, no margin collapse). * Category: 20px × 1.3 × 2 lines; author grid: 18px × 1.2 × 2 lines. */ --bbi-category-card-title-size: var(--font-size-lg); --bbi-category-card-title-leading: var(--type-latest-news-title-line-height); --bbi-category-card-title-track: calc( 2 * var(--bbi-category-card-title-size) * var(--bbi-category-card-title-leading) ); --bbi-category-card-title-author-gap: 10px; --bbi-author-card-title-size: 18px; --bbi-author-card-title-leading: var(--line-height-snug); --bbi-author-card-title-track: calc( 2 * var(--bbi-author-card-title-size) * var(--bbi-author-card-title-leading) ); --bbi-author-card-title-author-gap: 12px; /* Article cards — author/byline (hero, latest, global, category, author, similar). */ --bbi-card-author-size: 12px; /* Home — WOMI description (Figma: Zalando Sans Regular). */ --type-womi-body-font: var(--font-zalando); --type-womi-body-size: var(--font-size-sm); --type-womi-body-weight: 400; --type-womi-body-line-height: 1.4; /* Author — bio label + description (Figma: Zalando Sans Regular; no fallbacks). */ --type-author-bio-font: var(--font-zalando); /* Single — article header short description (Figma: Zalando Sans Light Italic; no fallbacks). */ --type-article-excerpt-font: var(--font-zalando); --type-article-excerpt-size: var(--font-size-lg); --type-article-excerpt-weight: 300; --type-article-excerpt-style: italic; --type-article-excerpt-line-height: 1.4; /* Single — article header title, mobile (Figma: NHG Display Pro 65 Medium, 30px / 110%). Typekit kit buo1ygz maps 65 Medium to font-weight 600 — not 500. */ --type-article-detail-title-font: var(--font-display-medium); --type-article-detail-title-weight: 600; --type-article-detail-title-size-mobile: 30px; --type-article-detail-title-line-height-mobile: 1.1; /* Single — sidebar / inline trending eyebrow (Figma: NHG Display Pro 95 Black, 20px / 100%, -5%). */ --type-trending-heading-font: var(--font-display); --type-trending-heading-size: 20px; --type-trending-heading-weight: 900; --type-trending-heading-line-height: 1; --type-trending-heading-letter-spacing: -0.05em; /* Single — trending panel inset (Figma: 20px on all sides; 20px between rows). */ --trending-panel-padding: 20px; --trending-panel-gap: 20px; /* Social icon glyphs (24×24 viewBox); compact = article byline on mobile. */ --bbi-social-icon-size: 20px; --bbi-social-icon-size-compact: 18px; /* Masthead: keep in sync with youtube scale in inc/helpers.php. */ --bbi-header-youtube-scale: 1.25; --bbi-header-social-track-size: calc(var(--bbi-social-icon-size) * var(--bbi-header-youtube-scale)); /* Single — trending list item title (Figma: NHG Display Pro 75 Bold, 16px / 120%). */ --type-trending-item-title-font: var(--font-display); --type-trending-item-title-size: 16px; --type-trending-item-title-weight: 700; --type-trending-item-title-line-height: 1.2; --type-trending-item-title-letter-spacing: 0; /* Single — article body (Georgia Regular, 18px / 180%, no fallbacks). */ --type-article-body-font: Georgia; --type-article-body-size: var(--font-size-md); --type-article-body-weight: var(--font-weight-regular); --type-article-body-line-height: 1.8; /* ------------------------------------------------------------ Brand palette - LOCKED ------------------------------------------------------------ */ --color-text: #000000; --color-background: #FFFFFF; --color-accent-green: #00FF99; /* Newsletter CTA, ticker diamonds */ --color-accent-blue: #0042FA; /* ------------------------------------------------------------ Neutrals (derived monochrome scale) ------------------------------------------------------------ */ --color-white: #FFFFFF; --color-gray-50: #FAFAFA; --color-gray-100: #F4F4F4; --color-gray-200: #E8E8E8; --color-gray-300: #D4D4D4; --color-gray-400: #A3A3A3; --color-gray-500: #737373; --color-gray-600: #525252; --color-gray-700: #404040; --color-gray-800: #262626; --color-gray-900: #171717; --color-black: #000000; /* Specific Figma values that don't fit the neutral scale. */ --color-footer-bg: #D9D9D9; /* Footer canvas */ --color-byline: #6B6B6B; /* Article byline + DAILY subline */ --color-byline-soft: rgba(107, 107, 107, 0.73); /* RSS byline */ --color-body-soft: #1E1E1E; /* footer link items */ --color-surface-panel: #EDEDED; /* sidebar / muted panels */ /* ------------------------------------------------------------ Semantic colours ------------------------------------------------------------ */ --color-surface: var(--color-background); --color-surface-muted: var(--color-gray-50); --color-border: var(--color-gray-200); --color-border-strong: var(--color-text); --color-text-muted: var(--color-byline); --color-text-inverse: var(--color-background); --color-link: var(--color-text); --color-link-hover: var(--color-link); --color-link-visited: var(--color-text); --color-category: var(--color-text); /* TOP STORY pill = solid black */ --color-category-text: var(--color-background); /* Home hero TOP STORY pill (Figma fill #0B0B0B, distinct from pure black text). */ --color-hero-tag-bg: #0B0B0B; /* Category pill chamfers — 45° diamond cuts (not border-radius). */ --bbi-chamfer-size: 5px; --bbi-clip-path-chamfer-4: polygon( var(--bbi-chamfer-size) 0, calc(100% - var(--bbi-chamfer-size)) 0, 100% var(--bbi-chamfer-size), 100% calc(100% - var(--bbi-chamfer-size)), calc(100% - var(--bbi-chamfer-size)) 100%, var(--bbi-chamfer-size) 100%, 0 calc(100% - var(--bbi-chamfer-size)), 0 var(--bbi-chamfer-size) ); --bbi-clip-path-chamfer-top: polygon( var(--bbi-chamfer-size) 0, calc(100% - var(--bbi-chamfer-size)) 0, 100% var(--bbi-chamfer-size), 100% 100%, 0 100%, 0 var(--bbi-chamfer-size) ); --bbi-chamfer-floating-shadow: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.14)); --color-cta: var(--color-accent-green); --color-cta-hover: var(--color-cta); --color-cta-text: var(--color-text); --color-trending: var(--color-accent-blue); --color-dropdown-hover: var(--color-link); --color-ticker-bg: var(--color-text); --color-ticker-fg: var(--color-background); --color-ticker-divider: var(--color-accent-green); /* Full-width hairline under YT Shorts / Videos rows (::after in yt-sections.css). */ --color-youtube-section-divider: #6B6B6B; /* Horizontal space between ticker headline cell and divider (flex `gap` on .bbi-ticker__track). */ --ticker-item-divider-gap: 25px; /* Live ticker — multilingual Anek: 25px, ExtraBold (800), width axis 100. */ --ticker-font-size: 25px; /* Fixed row box so every script + diamond shares one vertical center (not metric-dependent). */ --ticker-row-height: var(--ticker-font-size); --ticker-line-height: var(--ticker-row-height); --ticker-letter-spacing: 0; --ticker-font-weight: 800; --ticker-anek-wdth: 100; /* font-variation-settings "wdth" */ --color-overlay-scrim: rgba(0, 0, 0, 0.35); /* ------------------------------------------------------------ Spacing scale (4px base) ------------------------------------------------------------ */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ------------------------------------------------------------ Layout Figma artboard = 1728 wide, 40px side gutter -> 1648px content. ------------------------------------------------------------ */ --container-max: 1648px; --container-narrow: 920px; --container-padding: 40px; --grid-gap: var(--space-6); --grid-gap-tight: var(--space-4); --card-radius: 0px; --button-radius: 0px; --image-radius: 0px; --thumb-radius: 30px; /* YouTube short thumbnails */ --border-width: 1px; /* Header chrome — sized for billboard INDIA wordmark asset (1200×273, ~4.396:1). height = top inset + logo height + bottom inset (keeps bar tight, not oversized). */ --header-chrome-bottom: 12px; --header-logo-height: 46px; --header-logo-width: calc(var(--header-logo-height) * 1200 / 273); --site-chrome-top: var(--header-chrome-bottom); --header-height: calc(2 * var(--header-chrome-bottom) + var(--header-logo-height)); --header-logo-matte-scale: 1; --header-logo-max-inline: 8.75rem; /* reserve for MENU + CHARTS beside centred logo */ --ticker-height: 70px; /* Figma `BBI_Homepage_Desktop` (5:118) — hero rhythm below chrome. */ --site-chrome-inline: 40px; /* MENU from left, CHARTS from right (Figma 1728) */ --hero-gap-after-header: 25px; /* header bottom → hero image top */ --hero-gap-before-ticker: 35px; /* hero image bottom → ticker top */ /* Home splash: gap between scroll hero logo and pinned article image. */ --bbi-home-logo-hero-gap: 40px; /* Home scroll hero: compensate logo asset side padding during morph. */ --bbi-home-hero-logo-extra-gutter: 0px; --bbi-home-hero-logo-bleed-left: 0px; --bbi-home-hero-logo-bleed-right: 0px; --bbi-home-hero-logo-fill-x: 1; /* Article, category, author: chrome divider → main content (desktop). */ --article-gap-after-divider: 50px; --category-gap-after-divider: var(--article-gap-after-divider); --author-gap-after-divider: var(--article-gap-after-divider); /* Edge padding shared by header, hero image and every section. */ --chrome-inline-padding: var(--site-chrome-inline); --hero-gutter: 40px; /* Intro ticker bleeds past 1728 artboard (1805 wide, −38px each side). */ --intro-ticker-bleed: 38px; /* ------------------------------------------------------------ Motion ------------------------------------------------------------ */ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 600ms ease; --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --easing-emphasised: cubic-bezier(0.2, 0.0, 0, 1); /* Intro animation timings - consumed by intro-animation.js. */ --intro-duration: 1800ms; --intro-zoom-speed: 1200ms; /* ------------------------------------------------------------ Elevation / z-index ------------------------------------------------------------ */ --z-base: 1; --z-above: 10; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 350; --z-top: 400; --shadow-card: 0 0 0 1px var(--color-border); --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.08); /* ------------------------------------------------------------ Breakpoints (for JS read-out via getComputedStyle) ------------------------------------------------------------ */ --bp-mobile: 768px; --bp-tablet: 1024px; --bp-desktop: 1280px; /* Content width between fixed 40px side gutters (matches home .bbi-hero). */ --bbi-content-rail: calc(100vw - (2 * var(--site-chrome-inline))); } /* Desktop: one gutter inset (see chrome-gutters.css) — not centering + padding. */ @media (min-width: 1200px) { :root { --container-max: var(--bbi-content-rail); --container-padding: 0; --hero-gutter: var(--site-chrome-inline); } } /* ============================================================= Responsive token overrides ============================================================= */ /* Desktop — pull home hero wordmark ink to the 40px gutter rail. */ @media (min-width: 1200px) { :root { --bbi-home-hero-logo-extra-gutter: 31.5px; --bbi-home-hero-logo-bleed-left: 8px; --bbi-home-hero-logo-bleed-right: 5px; --bbi-home-hero-logo-fill-x: calc( (100vw - (2 * var(--site-chrome-inline))) / (100vw - (2 * var(--site-chrome-inline) + 2 * var(--bbi-home-hero-logo-extra-gutter))) ); } } /* Tablet — Figma BBI_Homepage_Tab (1024×7561, 40px gutter, 90px header, 30px chrome inset, 30px section headings). The 1199px query covers the 1024-1199px range where the Figma tablet design applies. */ @media (max-width: 1199px) { :root { --font-size-3xl: 1.875rem; /* 30px section + hero title (Figma tablet) */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-xl: 1.125rem; /* 18px card titles (Figma tablet) */ --container-padding: 40px; --site-chrome-inline: 40px; --chrome-inline-padding: var(--site-chrome-inline); --hero-gutter: var(--site-chrome-inline); --header-logo-height: 38px; --header-chrome-bottom: 10px; --header-height: calc(2 * var(--header-chrome-bottom) + var(--header-logo-height)); --header-logo-max-inline: 8.25rem; --ticker-height: 79px; --hero-gap-after-header: 10px; --hero-gap-before-ticker: 20px; --bbi-home-logo-hero-gap: 30px; } } /* Small tablet / iPad portrait (≤1023px). Same 30px scale but tighter gutters so the design breathes on narrower tablets. */ @media (max-width: 1023px) { :root { --font-size-3xl: 1.875rem; --font-size-2xl: 1.5rem; --font-size-xl: 1.125rem; --container-padding: 32px; --site-chrome-inline: 32px; --chrome-inline-padding: var(--site-chrome-inline); --hero-gutter: var(--site-chrome-inline); --header-logo-height: 36px; --header-chrome-bottom: 10px; --header-height: calc(2 * var(--header-chrome-bottom) + var(--header-logo-height)); --header-logo-max-inline: 7.75rem; --ticker-height: 67px; --ticker-font-size: 17px; --ticker-row-height: var(--ticker-font-size); --ticker-line-height: var(--ticker-row-height); --thumb-radius: 20px; } } /* Mobile — Figma BBI_Homepage_Mobile (402×7561, 20px gutter, 30px section headings, 22px hero title, 20px card titles). */ @media (max-width: 767px) { :root { --font-size-3xl: 1.875rem; /* 30px section headings (Figma mobile) */ --font-size-2xl: 1.375rem; /* 22px hero title (Figma mobile) */ --font-size-xl: 1.25rem; /* 20px card titles (Figma mobile) */ --font-size-md: 1rem; --container-padding: 20px; --site-chrome-inline: 20px; --chrome-inline-padding: var(--site-chrome-inline); --hero-gutter: var(--site-chrome-inline); --header-logo-height: 40px; --header-chrome-bottom: 10px; --header-height: calc(2 * var(--header-chrome-bottom) + var(--header-logo-height)); --header-logo-max-inline: 7.25rem; --ticker-height: 49px; --ticker-font-size: 15px; --ticker-row-height: var(--ticker-font-size); --ticker-line-height: var(--ticker-row-height); --thumb-radius: 18px; --grid-gap: var(--space-4); --hero-gap-after-header: 6px; --hero-gap-before-ticker: 16px; --bbi-home-logo-hero-gap: 8px; /* Match desktop gutter-to-gutter ink coverage without changing the matte width that home-hero.js measures for the scroll morph. */ --bbi-home-hero-logo-extra-gutter: clamp(6px, 2vw, 8px); --bbi-home-hero-logo-fill-x: calc( (100vw - (2 * var(--site-chrome-inline))) / (100vw - (2 * var(--site-chrome-inline) + 2 * var(--bbi-home-hero-logo-extra-gutter))) ); --article-gap-after-divider: 40px; --author-gap-after-divider: 30px; } } @media (max-width: 479px) { :root { --container-padding: 16px; --site-chrome-inline: 16px; --chrome-inline-padding: var(--site-chrome-inline); --hero-gutter: var(--site-chrome-inline); --header-logo-height: 32px; --header-chrome-bottom: 8px; --header-height: calc(2 * var(--header-chrome-bottom) + var(--header-logo-height)); --header-logo-max-inline: 6.75rem; --font-size-3xl: 1.625rem; /* 26px section headings on small phones */ --font-size-2xl: 1.25rem; /* 20px hero on small phones */ } } /* Tiny phones (≤359px, e.g. iPhone SE 1st gen / Galaxy Fold cover). Tightens chrome and ticker to avoid horizontal overflow. */ @media (max-width: 359px) { :root { --container-padding: 12px; --site-chrome-inline: 12px; --chrome-inline-padding: var(--site-chrome-inline); --hero-gutter: var(--site-chrome-inline); --header-logo-height: 30px; --header-chrome-bottom: 8px; --header-height: calc(2 * var(--header-chrome-bottom) + var(--header-logo-height)); --header-logo-max-inline: 6.25rem; --ticker-height: 43px; --grid-gap: var(--space-3); } } /* ============================================================= Reduced-motion override ============================================================= */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --intro-duration: 0ms; --intro-zoom-speed: 0ms; } }