/* * Copyright 2020 Adobe. All rights reserved. * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy * of the License at http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ /* =========================================================================== LAYER 1 — PRIMITIVE COLOR TOKENS =========================================================================== */ :root { /* * Primitive tokens: the raw palette. * Rules: * - NEVER reference these directly in block CSS files. * - Use a semantic (L2) or component (L3) token instead. * - Only tokens that are actually used are declared here. */ /* --- Base --- */ --color-black: #000; --color-white: #FFF; --color-white-alpha-medium: rgb(255 255 255 / 50%); --color-black-alpha-lowest: rgb(0 0 0 / 10%); /* accordion quaternary active-bg overlay */ /* --- Magenta (Vibrant accent, link/action color) --- */ --color-magenta-100: #FFD8E5; /* button secondary hover bg */ --color-magenta-200: #FFB0CE; /* link-list icon hover, accordion hover highlight */ --color-magenta-300: #FF8DC8; --color-magenta-500: #EB3C96; /* primary CTA button, links */ --color-magenta-600: #BE227B; /* primary CTA hover, link-list bg */ --color-magenta-700: #96105B; /* link hover, luminous logout hover */ --color-magenta-800: #6C093F; /* --- Purple (Vibrant theme primary) --- */ --color-purple-10: #FAF7FF; /* table row alt bg (vibrant), shoreline alt bg */ --color-purple-50: #F2ECFD; /* accordion active bg (vibrant) */ --color-purple-100: #EBE4FC; /* button secondary hover bg */ --color-purple-400: #9E7EE0; /* header decorative */ --color-purple-500: #8A68D2; /* video player accent */ --color-purple-700: #503191; /* heading, text primary, button secondary */ --color-purple-800: #3C2274; /* header background (all themes) */ --color-purple-900: #2C1C51; /* video player controls bg (vibrant) */ /* --- Blue (Curious Blue theme primary) --- */ --color-blue-10: #F4FAFF; /* table row alt bg (curious) */ --color-blue-50: #ECF5FC; --color-blue-100: #D8EAF8; --color-blue-200: #ADD2F1; /* login-cta button hover bg (curious) */ --color-blue-300: #81BBE9; /* header border (curious), language selector border */ --color-blue-500: #2B8DD8; /* login-cta accent, video player progress (curious) */ --color-blue-600: #1168AF; /* curious text/link primary, video player btn */ --color-blue-700: #085897; /* curious hover, form focus */ --color-blue-800: #0A3B61; /* curious dark text */ --color-blue-900: #001C38; /* video player controls bg (curious) */ /* --- Green (Sensitive Green theme primary) --- */ --color-green-10: #FFFEF9; /* sensitive overlay bg */ --color-green-50: #DEFBE4; /* accordion active bg (sensitive) */ --color-green-100: #D0E0C2; /* accordion open item bg */ --color-green-200: #BCCEAD; /* accordion border, footer bg (sensitive) */ --color-green-300: #B8D0A9; /* header border (sensitive), language selector border */ --color-green-400: #6C8A73; /* video player progress (sensitive) */ --color-green-500: #527261; /* sensitive text primary, nav color */ --color-green-500-muted: rgb(82 114 97 / 50%); /* nav hover (sensitive) */ --color-green-700: #32443F; /* sensitive dark text, links, headings */ --color-green-800: #22312A; /* sensitive darkest text, mlr-number */ --color-green-900: #111815; /* video player controls bg (sensitive) */ /* --- Cyan (Curious Blue accents) --- */ --color-cyan-50: #DDFCFF; --color-cyan-100: #BFF2F7; /* link-list icon hover (curious) */ --color-cyan-200: #7DE1EC; /* login-cta hover text (curious), language selector hover */ --color-cyan-300: #53D4E1; /* nav underline (curious), language selector tab */ --color-cyan-400: #2DBECD; --color-cyan-500: #08A3B0; /* curious background class variant */ /* --- Yellow (general accent) --- */ --color-yellow-50: #FFF3D9; --color-yellow-100: #FDE5A6; /* accordion icon hover highlight */ --color-yellow-200: #FEC832; --color-yellow-300: #E4B638; /* yellow background class variant — no Figma atom (❌ deprecated in Figma token file) */ /* --- Red (Sensitive action/error color) --- */ --color-red-10: #FFF6F8; --color-red-50: #E8D4C4; --color-red-100: #F9C0BB; /* form error background */ --color-red-200: #FEB6B6; /* link-list icon hover (sensitive) */ --color-red-300: #F06A72; --color-red-400: #F86B71; /* nav underline hover (sensitive) */ --color-red-500: #F66B73; /* language selector trigger open, login hover (sensitive) */ --color-red-600: #E64D51; /* form error color */ --color-red-700: #C43B3F; /* sensitive links, icon color */ --color-red-800: #A22A2C; /* sensitive link/icon hover */ --color-red-900: #801A1A; /* sensitive nav icon hover */ /* --- Grey (UI / disabled states) --- */ --color-grey-50: #FAFAFA; /* disabled field background */ --color-grey-100: #AAA; /* secondary text */ --color-grey-200: #757575; /* disabled text, muted labels */ --color-grey-300: #525150; /* form field border */ --color-grey-500: #494C50; /* footer background (default/curious), login dropdown text */ --color-grey-800: #303336; /* legal-note link hover */ /* --- Luminous Shades palette (own namespace — gradient-heavy dark theme) --- */ --color-ls-blue-50: #eaeef7; /* border, separator (luminous) */ --color-ls-blue-100: #eaeef7; /* secondary CTA hover bg, base + primary section (luminous) */ --color-ls-blue-200: #80a9bd; /* secondary CTA bg, quaternary section (luminous) */ --color-ls-blue-600: #202b59; /* primary text/nav/border (luminous) */ --color-ls-blue-600-muted: rgb(32 43 89 / 50%); /* nav hover (luminous) */ --color-ls-blue-700: #202b59; /* footer-items link hover (luminous) — Figma: LS Blue-700 */ --color-ls-blue-900: #121831; /* secondary CTA hover text, quaternary section (luminous) */ --color-ls-cyan-50: #ddfcff; /* secondary CTA hover bg, tertiary section (luminous) */ --color-ls-grey-50: #f6f6f6; --color-ls-magenta-50: #fee6f1; /* secondary CTA hover bg, secondary + quinary section (luminous) */ --color-ls-magenta-300: #c3307e; /* action accent, nav underline, login CTA (luminous) */ --color-ls-magenta-600: #90237E; /* footnote toggle hover (luminous) */ --color-ls-magenta-800: #5A16AF; --color-ls-magenta-900: #4e1497; /* accordion secondary hover (luminous) */ --color-ls-yellow-50: #fffc99; /* language selector tab underline (luminous) */ --color-ls-yellow-300: #e5db2b; /* language selector list hover (luminous) — no Figma atom (❌ deprecated in Figma token file) */ --color-ls-grey-800: #2b2b2b; /* accordion open body title (luminous) */ /* --- Shoreline palette (new theme, Figma UI-Kit node 6676:123706) --- */ --color-shoreline-purple-200: #e0cef9; --color-shoreline-purple-300: #a98ee8; /* button secondary hover bg */ --color-shoreline-purple-500: #674da0; /* heading default, primary button bg, secondary button text */ --color-shoreline-purple-500-muted: rgb(103 77 160 / 50%); /* #674DA0 @50% — nav dim + ls trigger hover */ --color-shoreline-purple-600: #714ebb; --color-shoreline-purple-700: #483b78; /* link hover, primary button hover bg, section-bg primary */ --color-shoreline-purple-800: #2c1c51; /* heading on green/blue/yellow section bgs */ --color-shoreline-green-50: #fafdfb; /* table row alt bg (shoreline) */ --color-shoreline-green-200: #eef8f4; --color-shoreline-green-300: #c1e4d5; /* section-bg secondary */ --color-shoreline-green-400: #8ecfb8; /* language-selector active country-tab underline */ --color-shoreline-green-500: #598795; --color-shoreline-green-600: #3d6b78; /* section-bg tertiary, table header border (shoreline) */ --color-shoreline-green-700: #2c515c; --color-shoreline-green-800: #1e3a43; --color-shoreline-blue-50: #eff7fd; /* section-bg quaternary */ --color-shoreline-blue-700: #1e3d5c; /* footer secondary link list + section headers */ --color-shoreline-blue-800: #202b59; /* footer primary links */ --color-shoreline-yellow-50: #fef6d6; /* section-bg quinary, heading on tertiary */ --color-shoreline-yellow-100: #fcedb0; /* heading on primary section bg */ --color-shoreline-yellow-200: #eabd55; --color-shoreline-grey-800: #2b2b2b; /* --- Curious Blue background-only primitives --- */ --color-cb-blue-600: #0F69AF; /* background-primary section bg */ --color-cb-green-500: #A5CD50; /* background-senary section bg */ --color-cb-green-400: #BDD871; /* background-septenary headings */ --color-cb-green-300: #CDE294; /* background-septenary body text */ /* =========================================================================== LAYER 2 — GLOBAL SEMANTIC TOKENS (Vibrant Purple defaults) =========================================================================== */ /* * These are the ONLY color tokens blocks should reference for * general typography, backgrounds, and buttons. * They are redefined for each theme in Layer 4. */ /* --- Section / Page Background --- */ --section-background-color: var(--color-white); /* --- Typography --- */ --heading-color: var(--color-purple-700); --over-heading-color: var(--color-purple-700); --text-color: var(--color-black); --link-color: var(--color-magenta-500); --link-hover-color: var(--color-magenta-700); --icon-color: var(--color-black); /* --- Buttons — Primary --- */ --button-primary-background-color: var(--color-magenta-500); --button-primary-text-color: var(--color-white); --button-primary-hover-background-color: var(--color-magenta-600); --button-primary-hover-text-color: var(--color-white); /* --- Buttons — Secondary --- */ --button-secondary-background-color: var(--color-white); --button-secondary-border-color: var(--color-purple-700); --button-secondary-text-color: var(--color-purple-700); --button-secondary-hover-background-color: var(--color-purple-100); --button-secondary-hover-text-color: var(--color-purple-700); --button-secondary-hover-border-color: var(--color-purple-700); /* --- Buttons — Disabled --- */ --button-disabled-background-color: var(--color-grey-50); --button-disabled-text-color: var(--color-grey-200); /* ─────────────────────────────────────────────────────────────────────── * LAYER 3 — COMPONENT SEMANTIC TOKENS (Vibrant Purple defaults) * * Block-specific color tokens, centralized here so that ALL theme * overrides live in one file. Block CSS files reference these vars * but do NOT redefine them per theme. * ─────────────────────────────────────────────────────────────────────── */ /* --- Header --- */ /* Vibrant Purple: dark purple bg, purple-400 border, white icons */ --header-background-color: var(--color-purple-700); /* Vibrant default; SG+LS = white; CB = blue-600 */ --header-hover-bg-color: var(--color-purple-800); /* Desktop nav hover + mobile open; SG=grey-50; CB=blue-800; LS=ls-grey-50 */ --header-border-color: var(--color-purple-400); /* Vibrant default; SG = green-300; CB = blue-300; LS = ls-blue-100 */ --header-menu-icons-color: var(--color-white); /* Vibrant default; SG = green-500; LS = ls-blue-600 */ /* --- Main Navigation --- */ /* Vibrant Purple: white text on dark purple header */ --main-nav-color: var(--color-white); --main-nav-hover-color: var(--color-white-alpha-medium); --main-nav-border-color: var(--color-white); --main-nav-icon-color: var(--color-magenta-500); --main-nav-icon-hover-color: var(--color-magenta-700); --main-nav-underline-color: var(--color-magenta-500); /* Language selector trigger inside nav */ --ls-trigger-color: var(--color-white); /* all themes: trigger sits on dark header */ /* --- Meta Navigation --- */ /* Vibrant Purple: white text on dark purple header */ --meta-nav-color: var(--color-white); --meta-nav-hover-color: var(--color-magenta-300); --meta-nav-icon-color: var(--color-magenta-500); --meta-nav-icon-hover-color: var(--color-magenta-700); --meta-nav-border-separator-color: var(--color-grey-200); /* --- Language Selector --- */ /* Vibrant Purple: white overlay bg, magenta accents */ --ls-overlay-bg: var(--color-white); --ls-border-color: var(--color-magenta-500); --ls-heading-color: var(--color-purple-700); --ls-tab-color: var(--color-magenta-500); --ls-tab-active-color: var(--color-magenta-700); --ls-tab-underline-color: var(--color-magenta-500); --ls-tab-inactive-line: transparent; --ls-trigger-hover-color: var(--color-magenta-300); --ls-trigger-open-color: var(--ls-trigger-color); /* same as trigger; LS overrides to white */ --ls-list-color: var(--color-grey-200); --ls-list-active-color: var(--color-grey-200); --ls-list-hover-color: var(--color-magenta-500); --ls-current-selection-base-color: var(--color-magenta-500); --ls-current-selection-hover-color: var(--color-magenta-500); --ls-overlay-heading-color: var(--ls-heading-color); --ls-overlay-tab-color: var(--ls-tab-color); --ls-overlay-tab-active-color: var(--ls-tab-active-color); --ls-overlay-list-active-color: var(--ls-list-active-color); --ls-overlay-current-selection-color: var(--color-magenta-500); --ls-overlay-tab-hover-color: var(--color-magenta-700); --ls-overlay-hover-color: var(--color-magenta-500); --links-footer-secondary-link-footer-default: var(--ls-list-color); --links-footer-secondary-link-footer-active: var(--color-magenta-500); --backgrounds-container-background-based: var(--color-white); --icons-icon-primary: var(--color-purple-700); --icons-icon-tertiary: var(--color-magenta-500); --border-horizontal-tab-border-horizontal-tab-fix: var(--color-magenta-300); /* --- Login CTA --- */ /* Vibrant Purple: white text on dark header; button uses global primary button tokens */ --login-cta-text-color: var(--color-white); --login-cta-text-hover-color: var(--color-magenta-300); --login-cta-hover-underline-color: transparent; --login-cta-button-bg: var(--button-primary-background-color); --login-cta-button-hover-bg: var(--button-primary-hover-background-color); --login-cta-button-text-color: var(--button-primary-text-color); --login-cta-logout-color: var(--color-magenta-600); --login-cta-logout-hover-color: var(--color-magenta-700); --login-cta-dropdown-text-color: var(--color-black); --login-cta-dropdown-text-hover-color: var(--color-grey-800); --login-cta-dropdown-hover-underline-color: transparent; /* --- Footer --- */ /* Vibrant Purple: dark purple bg */ --footer-background-color: var(--color-purple-700); --footer-text-color: var(--color-purple-700); /* --- Footer Items (links inside footer) --- */ /* Vibrant Purple: magenta links on white footer inner bg */ --footer-accordion-border-color: var(--color-grey-100); --principal-links-color: var(--color-magenta-500); --principal-links-hover-color: var(--color-magenta-700); --secondary-links-color: var(--color-grey-200); --secondary-links-hover-color: var(--color-magenta-500); --secondary-title-color: var(--color-grey-200); /* --- Accordion --- */ /* Vibrant Purple: title/border = heading-color (purple-700); icon circle = magenta-600 */ --accordion-title-color: var(--heading-color); /* purple-700 for Vibrant */ --accordion-title-hover-color: var(--accordion-title-color); /* same as title by default */ --accordion-border-color: var(--heading-color); /* purple-700 for Vibrant */ --accordion-active-bg: var(--color-purple-50); --accordion-body-text-color: inherit; --accordion-open-body-title-color: inherit; --accordion-icon-stroke-color: var(--color-white); --accordion-icon-active-stroke-color: var(--accordion-icon-stroke-color); --accordion-icon-circle-bg: var(--color-magenta-600); --accordion-icon-circle-hover-bg: var(--accordion-icon-circle-bg); /* same as default bg */ --accordion-icon-circle-active-bg: var(--color-magenta-800); --accordion-open-title-color: var(--accordion-title-color); /* resolves from title */ --accordion-open-bullet-color: var(--accordion-border-color); /* resolves from border */ --accordion-open-list-color: inherit; /* --- Footnotes --- */ /* Vibrant Purple: magenta-600 links */ --fn-body-text-color: var(--color-black); --fn-link-color: var(--color-magenta-600); --fn-link-hover-color: var(--color-magenta-800); --fn-toggle-color: var(--color-magenta-600); --fn-toggle-hover-color: var(--color-magenta-800); /* --- Contact Form --- */ --cf-title-font-family: poppins, var(--body-font-family); --cf-mandatory-font-family: poppins, var(--body-font-family); --cf-title-color: var(--heading-color); --cf-field-text-color: var(--text-color); --cf-field-border-hover: var(--color-grey-300); --cf-focus-color: var(--color-purple-700); /* VP default; SG = green-700; CB = blue-700 */ --cf-label-color: var(--color-purple-700); /* VP default; SG = green-800; CB = blue-800 */ --cf-link-color: var(--color-magenta-600); /* VP default; SG = red-700; CB = blue-600 */ --cf-selected-fill: var(--button-primary-background-color); /* VP = magenta-500; SG = green-500; CB = blue-600 */ --cf-border-color: var(--color-grey-100); --cf-error-color: var(--color-red-600); --cf-error-bg: var(--color-red-100); --cf-disabled-bg: var(--color-grey-50); --cf-disabled-text: var(--color-grey-200); --cf-option-color: var(--color-grey-200); --cf-option-checked-color: var(--color-black); --cf-form-submit-background: var(--color-magenta-500); --cf-form-submit-hover-background: var(--color-magenta-600); --cf-verify-title-color: var(--color-purple-700); --cf-verify-timer-color: var(--color-black); --cf-verify-timer-bg: var(--color-magenta-100); --cf-verify-resend-color: var(--color-magenta-600); /* --- Legal Note --- */ /* Vibrant Purple: purple-700 text, grey-200 links */ --legal-note-color: var(--color-purple-700); --legal-note-link-color: var(--color-grey-200); --legal-note-link-hover-color: var(--color-grey-800); --legal-note-separator-color: var(--color-purple-700); /* --- Link List --- */ /* Vibrant Purple: border/link from heading-color (purple-700), hover from global link-hover */ --link-list-border-color: var(--heading-color); --link-list-link-color: var(--color-magenta-600); --link-list-link-hover-color: var(--link-hover-color); --link-list-icon-hover-color: var(--link-list-link-hover-color); --link-list-padding-block: var(--spacing-10); --link-list-padding-block-end: var(--spacing-5); /* --- MLR Number --- */ --mlr-number-footer-color: var(--color-purple-700); /* Gap from footer-items to MLR block (matches Figma footer container gap: 80px) */ --mlr-number-footer-margin-block-start: 80px; /* Gap between MLR code and copyright text (Figma layout gap: 12px) */ --mlr-number-footer-margin-block-end: 12px; /* --- Teaser --- */ --teaser-color: var(--color-black); /* --- Video Player --- */ /* Vibrant Purple: purple-700 play button, purple-900 dark controls bg */ --player-btn-play-bg: var(--color-purple-700); --player-controls-bg: var(--color-purple-900); --player-progress-fill: var(--color-purple-500); /* --- Borders --- */ --border-radius-small: 2px; --border-radius-medium: 4px; --border-radius-large: 8px; --border-radius-extra-large: 24px; --border-radius-circle: 50%; /* --- Wrapper sizes --- */ --wrapper-max-width: 1024px; --wrapper-padding-inline: 20px; --wrapper-padding-block: 40px; --wrapper-margin-inline: auto; --wrapper-margin-padding-block: var(--spacing-10); --wrapper-background-section-padding-block: var(--spacing-15); /* Header content cap — outer 1440 = 12-col span (1224px) + 2×108px side spacing at XL. Below 1440px viewport the container is 100vw; above 1440 it caps + centres. */ --header-content-max-width: 1440px; /* nav height */ --nav-height: 100.78px; /* Header logo slot — a bounding box, not a forced size. The stacked Ogsiveo logo (Figma: 81×52.78, aspect ~1.55) hits the height cap; wide wordmark logos (e.g. Merck) hit the width cap first, so they render at a sensible ~32px tall instead of oversized. */ --logo-height: 52.78px; --logo-max-width: 180px; /* fonts */ --body-font-family: "Verdana", "Geneva", sans-serif; --heading-font-family: "Verdana", "Geneva", sans-serif; --merk-font-family: merck, merck-fallback, sans-serif; --ibm-plex-sans-font-family: "IBM Plex Sans", ibm-plex-sans, sans-serif; --poppins-font-family: poppins, "Verdana", sans-serif; /* heading sizes */ --heading-font-size-xxl: 32px; --heading-font-size-xl: 30px; --heading-font-size-l: 28px; --heading-font-size-m: 24px; --heading-font-size-s: 20px; --heading-font-size-xs: 16px; /* heading line heights */ --heading-line-height-xl: 40px; /* h2 — Figma XS */ --heading-line-height-l: 36px; /* body font sizes */ --body-font-size-m: 16px; --body-font-size-s: 14px; --body-font-size-xs: 12px; /* button font sizes */ --button-font-size: 16px; --button-big-font-size: 20px; /* ------------------------------------------------------------------------- * Grid Configuration * Source: figma.variables.json — grid_and_spacing.breakpoints * Figma: UI Kit node 785:66 (Grid Overview & Details) * * Static per-breakpoint reference vars (use --grid-col-unit-* to calculate * component widths: N cols = calc(N * var(--grid-col-unit-x) - var(--grid-gutter-x))) * ------------------------------------------------------------------------- */ /* XS — 320px viewport · 4 columns · 16px gutter · 20px outer margin */ --grid-columns-xs: 4; --grid-gutter-xs: 16px; --grid-margin-xs: 20px; --grid-col-unit-xs: 74px; /* 1 col (58px) + gutter (16px) */ /* S — 768px viewport · 8 columns · 20px gutter · 20px outer margin */ --grid-columns-s: 8; --grid-gutter-s: 20px; --grid-margin-s: 20px; --grid-col-unit-s: 94px; /* 1 col (74px) + gutter (20px) */ /* M — 1024px viewport · 12 columns · 24px gutter · 146px outer margin */ --grid-columns-m: 12; --grid-gutter-m: 24px; --grid-margin-m: 146px; --grid-col-unit-m: 63px; /* 1 col (39px) + gutter (24px) — ref: 1024px − 2×146px − 11×24px ÷ 12 */ /* L — 1280px viewport · 12 columns · 24px gutter · content-width: 960px */ --grid-columns-l: 12; --grid-gutter-l: 24px; --grid-margin-l: 160px; --grid-col-unit-l: 82px; /* 1 col (58px) + gutter (24px) */ /* XL — 1440px viewport · 12 columns · 24px gutter · content-width: 1224px */ --grid-columns-xl: 12; --grid-gutter-xl: 24px; --grid-margin-xl: 108px; --grid-col-unit-xl: 104px; /* 1 col (80px) + gutter (24px) */ /* Active (responsive) grid vars — default at XS, overridden in @media blocks */ --grid-columns: var(--grid-columns-xs); --grid-gutter: var(--grid-gutter-xs); --grid-margin: var(--grid-margin-xs); --grid-col-unit: var(--grid-col-unit-xs); /* ------------------------------------------------------------------------- * Spacing Scale * Source: figma.variables.json — Grid & Spacing · Spacings (spacing-0…spacing-20) * 4-px step scale. Token name matches Figma numeric key directly. * ------------------------------------------------------------------------- */ --spacing-0: 0px; --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-7: 28px; --spacing-8: 32px; --spacing-9: 36px; --spacing-10: 40px; --spacing-11: 44px; --spacing-12: 48px; --spacing-13: 52px; --spacing-14: 56px; --spacing-15: 60px; --spacing-16: 64px; --spacing-17: 68px; --spacing-18: 72px; --spacing-19: 76px; --spacing-20: 80px; /* Semantic aliases — kept for backward compatibility, point to numeric steps */ --spacing-xs: var(--spacing-3); /* 12px */ --spacing-s: var(--spacing-6); /* 24px */ --spacing-m: var(--spacing-8); /* 32px */ --spacing-l: var(--spacing-12); /* 48px */ --spacing-xl: var(--spacing-15); /* 60px */ /* Content Area */ --content-area-gutter: var(--spacing-4); --content-area-grid: calc(100vw - 2 * var(--wrapper-padding-inline)); /* Full width of the grid */ --content-area: var(--content-area-grid); /* Full width of the content area which can be smaller then the grid */ /* --- Breakpoints --- */ /* XS — 320px–767px · 8 columns · 20px side spacing */ @media (width >= 320px) { --wrapper-padding-inline: 20px; --grid-columns: var(--grid-columns-s); /* 8 columns */ --grid-gutter: var(--grid-gutter-s); --grid-margin: var(--grid-margin-s); --grid-col-unit: var(--grid-col-unit-s); } /* S — 768px–1023px · 20px side spacing · 8-column grid */ @media (width >= 768px) { --wrapper-padding-inline: 20px; /* heading sizes */ --heading-font-size-xxl: 40px; --heading-font-size-xl: 36px; --heading-font-size-l: 32px; --heading-font-size-m: 28px; --heading-font-size-s: 20px; --heading-font-size-xs: 16px; --heading-line-height-xl: 44.8px; /* h2 — Figma S */ --heading-line-height-l: 39.2px; /* grid — 8 columns */ --grid-columns: var(--grid-columns-s); --grid-gutter: var(--grid-gutter-s); --grid-margin: var(--grid-margin-s); --grid-col-unit: var(--grid-col-unit-s); /* content area gutter */ --content-area-gutter: var(--spacing-5); } /* M — 1024px–1279px · 146px side spacing · 12-column grid · 10-col content (606px) */ @media (width >= 1024px) { --wrapper-max-width: 898px; /* 10-col content (606px) + 2×146px margin — centred in viewport */ --wrapper-margin-inline: auto; /* centre wrapper */ --wrapper-margin-padding-block: var(--spacing-16); --wrapper-padding-inline: 146px; /* fixed 146px each side */ --heading-line-height-xl: 46.4px; /* h2 — Figma M */ --heading-line-height-l: 42px; /* content area */ --content-area-grid: 732px; /* 10-col content (606px) + 2 gutters (24px) and columns (39px) */ --content-area: 606px; /* grid — 12 columns */ --grid-columns: var(--grid-columns-m); --grid-gutter: var(--grid-gutter-m); --grid-margin: var(--grid-margin-m); --grid-col-unit: var(--grid-col-unit-m); /* content area gutter */ --content-area-gutter: var(--spacing-6); } /* L — 1280px–1439px · 160px side spacing · 12-column grid · 10-col content (796px) */ @media (width >= 1280px) { --nav-height: 153px; --wrapper-max-width: 1116px; /* 10-col content (796px) + 2×160px margin */ --wrapper-padding-inline: 160px; /* fixed 160px each side */ --wrapper-padding-block: 60px; --header-content-max-width: 1280px; /* 12-col content (960px) + 2×160px — caps header at L grid */ /* content area */ --content-area-grid: 960px; /* 10-col content (796px) + 2 gutters (24px) and columns (58px) */ --content-area: 796px; /* heading sizes */ --heading-font-size-xxl: 56px; --heading-font-size-xl: 40px; --heading-font-size-l: 34px; --heading-font-size-m: 28px; --heading-font-size-s: 20px; --heading-font-size-xs: 16px; --heading-line-height-xl: 52.4px; /* h2 — Figma L */ /* grid — L: 12 columns · col-unit ref: (1280px − 2×160px − 11×24px) ÷12 = 58px + 24px = 82px */ --grid-columns: var(--grid-columns-l); --grid-gutter: var(--grid-gutter-l); --grid-margin: var(--grid-margin-l); --grid-col-unit: var(--grid-col-unit-l); --link-list-padding-block: var(--spacing-15); --link-list-padding-block-end: var(--spacing-10); } /* XL — 1440px+ · fixed 108px side spacing · 12-column grid · 10-col content (1016px) */ @media (width >= 1440px) { --wrapper-max-width: 1232px; /* 10-col content (1016px) + 2×108px margin */ --wrapper-padding-inline: 108px; /* fixed 108px each side — overrides the 160px from L */ --header-content-max-width: 1440px; /* 12-col content (1224px) + 2×108px — re-overrides L cap */ /* content area */ --content-area-grid: 1224px; /* 10-col content (1016px) + 2 gutters (24px) and columns (80px) */ --content-area: 1016px; /* heading sizes */ --heading-font-size-xxl: 72px; --heading-font-size-xl: 52px; --heading-font-size-l: 40px; --heading-font-size-m: 32px; --heading-font-size-s: 24px; --heading-font-size-xs: 16px; --heading-line-height-xl: 62.4px; /* h2 — Figma XL */ --heading-line-height-l: 48px; /* grid — XL: 12 columns · content-width: 1224px */ --grid-columns: var(--grid-columns-xl); --grid-gutter: var(--grid-gutter-xl); --grid-margin: var(--grid-margin-xl); --grid-col-unit: var(--grid-col-unit-xl); } } /* =========================================================================== LAYER 4 — THEME OVERRIDES =========================================================================== */ /* * Each theme class redefines only the tokens that change. * Tokens not listed here inherit the Vibrant Purple default from :root. * Pattern: .{theme-class} { --token: value; } * Future themes: add a new selector block following the same pattern. */ /* ─── Vibrant Purple (heading-font override only) ─────────────────────── * Defaults for VP live in :root. The Figma "V Theme/Headings" style uses * the Merck typeface, so we override --heading-font-family here without * touching the rest of the L2/L3 cascade (which already matches :root). */ .vibrant-purple { --heading-font-family: var(--merk-font-family); } /* ─── Sensitive Green ─────────────────────────────────────────────────── */ .sensitive-green { /* --- L2 — Global Semantics --- */ --heading-color: var(--color-green-700); --over-heading-color: var(--color-green-700); --link-color: var(--color-red-700); --link-hover-color: var(--color-red-800); --icon-color: var(--color-red-700); --button-primary-background-color: var(--color-red-600); --button-primary-hover-background-color: var(--color-red-700); --button-secondary-background-color: var(--color-white); --button-secondary-border-color: var(--color-green-500); --button-secondary-text-color: var(--color-green-500); --button-secondary-hover-background-color: var(--color-green-100); --button-secondary-hover-text-color: var(--color-green-700); --button-secondary-hover-border-color: var(--color-green-700); /* --- L3 — Header --- */ /* SG: white header bg, green-300 border, green icons */ --header-background-color: var(--color-white); --header-hover-bg-color: var(--color-grey-50); --header-border-color: var(--color-green-300); --header-menu-icons-color: var(--color-green-500); /* --- L3 — Main Navigation --- */ --main-nav-color: var(--color-green-500); --main-nav-hover-color: var(--color-green-500-muted); --main-nav-border-color: var(--color-green-300); --main-nav-icon-color: var(--color-red-700); --main-nav-icon-hover-color: var(--color-red-900); --main-nav-underline-color: var(--color-red-400); /* --- L3 — Meta Navigation --- */ --meta-nav-color: var(--color-green-500); --meta-nav-hover-color: var(--color-red-500); --meta-nav-icon-color: var(--color-red-700); --meta-nav-icon-hover-color: var(--color-red-900); /* --- L3 — Language Selector --- */ --ls-overlay-bg: var(--color-green-10); --ls-border-color: var(--color-green-300); --ls-heading-color: var(--color-green-700); --ls-close-color: var(--color-green-500); --ls-overlay-close-color: var(--color-green-500); --ls-tab-color: var(--color-green-500); --ls-tab-active-color: var(--color-green-700); --ls-tab-underline-color: var(--color-red-500); --ls-trigger-color: var(--color-green-500); --ls-trigger-hover-color: var(--color-red-400); --ls-trigger-open-color: var(--color-red-500); --ls-list-color: var(--color-grey-200); --ls-list-active-color: var(--color-green-700); --ls-list-hover-color: var(--color-green-700); --ls-current-selection-base-color: var(--color-red-500); --ls-current-selection-hover-color: var(--color-red-500); --ls-overlay-heading-color: var(--ls-heading-color); --ls-overlay-tab-color: var(--ls-tab-color); --ls-overlay-tab-active-color: var(--ls-tab-active-color); --ls-overlay-list-active-color: var(--ls-list-active-color); --ls-overlay-current-selection-color: var(--ls-current-selection-base-color); --ls-overlay-tab-hover-color: var(--color-green-700); --ls-overlay-hover-color: var(--color-green-700); --links-footer-secondary-link-footer-default: var(--ls-list-color); --links-footer-secondary-link-footer-active: var(--color-green-700); --backgrounds-container-background-based: var(--color-green-10); --icons-icon-primary: var(--color-green-500); --icons-icon-tertiary: var(--color-grey-500); --border-horizontal-tab-border-horizontal-tab-fix: var(--color-red-100); /* --- L3 — Login CTA --- */ --login-cta-text-color: var(--color-green-500); --login-cta-text-hover-color: var(--color-red-500); --login-cta-button-bg: var(--color-red-600); --login-cta-button-hover-bg: var(--color-red-700); --login-cta-button-text-color: var(--color-white); --login-cta-logout-color: var(--color-red-700); --login-cta-logout-hover-color: var(--color-red-800); --login-cta-dropdown-text-color: var(--color-grey-500); --login-cta-dropdown-text-hover-color: var(--color-red-500); /* --- L3 — Footer --- */ --footer-background-color: var(--color-green-200); --footer-text-color: var(--color-green-700); /* --- L3 — Footer Items --- */ --footer-accordion-border-color: var(--color-green-200); --principal-links-color: var(--color-green-500); --principal-links-hover-color: var(--color-green-700); --secondary-links-color: var(--color-green-500); --secondary-links-hover-color: var(--color-green-700); --secondary-title-color: var(--color-green-700); /* --- L3 — Accordion --- */ /* SG accordion: red-700 titles, red circle icons, green open-state content */ --accordion-title-color: var(--color-red-700); --accordion-title-hover-color: var(--color-red-800); --accordion-border-color: var(--color-red-700); --accordion-active-bg: var(--color-green-100); --accordion-body-text-color: var(--color-green-800); --accordion-open-body-title-color: var(--color-grey-800); --accordion-icon-stroke-color: var(--color-white); --accordion-icon-active-stroke-color: var(--color-white); --accordion-icon-circle-bg: var(--color-red-700); --accordion-icon-circle-hover-bg: var(--color-red-800); --accordion-icon-circle-active-bg: var(--color-magenta-700); --accordion-open-title-color: var(--color-red-800); --accordion-open-bullet-color: var(--color-green-500); --accordion-open-list-color: var(--color-green-800); /* --- L3 — Footnotes --- */ --fn-link-color: var(--color-red-700); --fn-link-hover-color: var(--color-red-800); --fn-toggle-color: var(--color-red-700); --fn-toggle-hover-color: var(--color-red-800); /* --- L3 — Contact Form --- */ --cf-focus-color: var(--color-green-700); --cf-label-color: var(--color-green-800); --cf-link-color: var(--color-red-700); --cf-selected-fill: var(--color-green-500); --cf-form-submit-background: var(--color-red-600); --cf-form-submit-hover-background: var(--color-red-700); --cf-verify-title-color: var(--color-green-700); --cf-verify-timer-bg: var(--color-green-100); --cf-verify-resend-color: var(--color-red-600); /* --- L3 — Legal Note --- */ --legal-note-color: var(--color-green-800); --legal-note-link-color: var(--color-grey-200); --legal-note-separator-color: var(--color-red-700); /* --- L3 — Link List --- */ --link-list-icon-hover-color: var(--color-red-200); --link-list-link-hover-color: var(--color-red-200); /* --- L3 — MLR Number --- */ --mlr-number-footer-color: var(--color-green-800); /* --- L3 — Teaser --- */ --teaser-color: var(--color-black); /* --- L3 — Video Player --- */ --player-btn-play-bg: var(--color-green-500); --player-controls-bg: var(--color-green-900); --player-progress-fill: var(--color-green-400); } /* ─── Curious Blue ────────────────────────────────────────────────────── */ .curious-blue { /* --- L2 — Global Semantics --- */ --heading-color: var(--color-purple-700); --over-heading-color: var(--color-blue-700); --link-color: var(--color-blue-600); --link-hover-color: var(--color-blue-800); --icon-color: var(--color-white); --button-primary-background-color: var(--color-blue-700); --button-primary-hover-background-color: var(--color-blue-800); --button-secondary-background-color: var(--color-white); --button-secondary-border-color: var(--color-blue-700); --button-secondary-text-color: var(--color-blue-700); --button-secondary-hover-background-color: var(--color-blue-100); --button-secondary-hover-text-color: var(--color-blue-700); --button-secondary-hover-border-color: var(--color-blue-700); /* --- L3 — Header --- */ /* CB: dark blue header (blue-600), white icons */ --header-background-color: var(--color-blue-600); --header-hover-bg-color: var(--color-blue-800); --header-border-color: var(--color-blue-300); /* --header-menu-icons-color inherits white from :root — correct for dark header */ /* --- L3 — Main Navigation --- */ /* CB: same dark header as Vibrant — white nav text; only underline and border differ */ --main-nav-border-color: var(--color-white); --main-nav-icon-color: var(--color-white); --main-nav-icon-hover-color: var(--color-white); --main-nav-underline-color: var(--color-cyan-300); /* --main-nav-color, --main-nav-hover-color inherit white / white-alpha from :root */ /* --- L3 — Meta Navigation --- */ --meta-nav-hover-color: var(--color-cyan-200); --meta-nav-icon-color: var(--color-white); --meta-nav-icon-hover-color: var(--color-white); /* --- L3 — Language Selector --- */ --ls-border-color: var(--color-blue-300); --ls-heading-color: var(--color-purple-700); --ls-close-color: var(--color-blue-600); --ls-overlay-close-color: var(--color-blue-600); --ls-tab-color: var(--color-blue-600); --ls-tab-active-color: var(--color-blue-800); --ls-tab-underline-color: var(--color-cyan-300); --ls-trigger-hover-color: var(--color-cyan-200); --ls-list-color: var(--color-grey-200); --ls-list-active-color: var(--color-grey-200); --ls-list-hover-color: var(--color-blue-600); --ls-current-selection-base-color: var(--color-blue-600); --ls-current-selection-hover-color: var(--color-blue-800); --ls-overlay-heading-color: var(--ls-heading-color); --ls-overlay-tab-color: var(--ls-tab-color); --ls-overlay-tab-active-color: var(--ls-tab-active-color); --ls-overlay-list-active-color: var(--ls-list-active-color); --ls-overlay-current-selection-color: var(--ls-current-selection-base-color); --ls-overlay-tab-hover-color: var(--color-blue-800); --ls-overlay-hover-color: var(--color-blue-600); --links-footer-secondary-link-footer-default: var(--ls-list-color); --links-footer-secondary-link-footer-active: var(--color-blue-600); --icons-icon-primary: var(--color-blue-600); --icons-icon-tertiary: var(--color-grey-500); --border-horizontal-tab-border-horizontal-tab-fix: var(--color-purple-700); /* --- L3 — Login CTA --- */ --login-cta-text-color: var(--color-white); --login-cta-text-hover-color: var(--color-cyan-200); --login-cta-button-bg: var(--color-white); --login-cta-button-hover-bg: var(--color-blue-200); --login-cta-button-text-color: var(--color-blue-700); --login-cta-logout-color: var(--color-blue-500); --login-cta-logout-hover-color: var(--color-blue-600); --login-cta-dropdown-text-color: var(--color-white); --login-cta-dropdown-text-hover-color: var(--color-cyan-200); /* --- L3 — Footer --- */ --footer-background-color: var(--color-grey-500); --footer-text-color: var(--color-blue-600); /* --- L3 — Footer Items --- */ --footer-accordion-border-color: var(--color-blue-600); --principal-links-color: var(--color-blue-600); --principal-links-hover-color: var(--color-blue-800); --secondary-links-color: var(--color-blue-600); --secondary-links-hover-color: var(--color-blue-600); --secondary-title-color: var(--color-grey-200); /* --- L3 — Accordion --- */ /* CB accordion: only active-bg and border differ from Vibrant */ --accordion-active-bg: var(--color-blue-100); --accordion-border-color: var(--color-purple-700); /* production: purple-700 in CB */ /* All other accordion vars inherit Vibrant defaults — correct for CB */ /* --- L3 — Footnotes --- */ --fn-link-color: var(--color-blue-600); --fn-link-hover-color: var(--color-blue-800); --fn-toggle-color: var(--color-blue-600); --fn-toggle-hover-color: var(--color-blue-800); /* --- L3 — Contact Form --- */ --cf-focus-color: var(--color-blue-700); --cf-label-color: var(--color-blue-800); --cf-link-color: var(--color-blue-600); --cf-selected-fill: var(--color-blue-600); --cf-form-submit-background: var(--color-blue-700); --cf-form-submit-hover-background: var(--color-blue-800); --cf-verify-timer-bg: var(--color-blue-200); --cf-verify-resend-color: #0F69AF; /* --- L3 — Legal Note --- */ --legal-note-color: var(--color-blue-800); --legal-note-link-color: var(--color-grey-200); --legal-note-separator-color: var(--color-blue-600); /* --- L3 — Link List --- */ --link-list-icon-hover-color: var(--color-cyan-100); --link-list-link-hover-color: var(--color-cyan-100); /* --- L3 — MLR Number --- */ --mlr-number-footer-color: var(--color-blue-800); /* --- L3 — Teaser --- */ --teaser-color: var(--color-black); /* --- L3 — Video Player --- */ --player-btn-play-bg: var(--color-blue-600); --player-controls-bg: var(--color-blue-900); --player-progress-fill: var(--color-blue-500); } /* Footer-items icon override: CB global icon-color is white (header icons), but footer-items accordion icons should use blue-700 */ .curious-blue .footer-items { --icon-color: var(--color-blue-700); } /* ─── Luminous Shades ─────────────────────────────────────────────────── */ .luminous-shades { /* --- L2 — Global Semantics --- */ --body-font-family: var(--ibm-plex-sans-font-family); --heading-font-family: var(--ibm-plex-sans-font-family); --cf-title-font-family: var(--ibm-plex-sans-font-family); --cf-mandatory-font-family: var(--ibm-plex-sans-font-family); --section-background-color: var(--color-white); --heading-color: var(--color-ls-blue-600); --over-heading-color: var(--color-ls-blue-600); --text-color: var(--color-black); --link-color: var(--color-ls-magenta-300); --link-hover-color: var(--color-ls-magenta-600); --icon-color: var(--color-ls-blue-600); --button-primary-background-color: var(--color-ls-blue-600); --button-primary-hover-background-color: var(--color-ls-magenta-300); --button-primary-hover-text-color: var(--color-white); --button-secondary-background-color: var(--color-white); --button-secondary-border-color: var(--color-ls-blue-700); --button-secondary-text-color: var(--color-ls-blue-700); --button-secondary-hover-background-color: var(--color-ls-blue-100); --button-secondary-hover-text-color: var(--color-ls-blue-700); --button-secondary-hover-border-color: var(--color-ls-blue-700); --button-disabled-background-color: var(--color-ls-grey-50); --cf-selected-fill: var(--color-ls-blue-600); --cf-form-submit-background: var(--color-ls-blue-600); --cf-form-submit-hover-background: var(--color-ls-magenta-300); --cf-verify-title-color: var(--color-ls-blue-600); --cf-verify-timer-bg: var(--color-ls-magenta-50); --cf-verify-resend-color: var(--color-ls-magenta-300); /* --- L3 — Header (background, border, icons all change for LS) --- */ --header-background-color: var(--color-white); /* LS: white header */ --header-hover-bg-color: var(--color-ls-grey-50); --header-border-color: var(--color-ls-blue-50); --header-menu-icons-color: var(--color-ls-blue-600); /* --- L3 — Main Navigation (LS: dark text on white header) --- */ --main-nav-color: var(--color-ls-blue-600); --main-nav-hover-color: var(--color-ls-blue-600-muted); --main-nav-border-color: var(--color-ls-blue-600); --main-nav-icon-color: var(--color-ls-blue-600); --main-nav-icon-hover-color: var(--color-ls-blue-600-muted); --main-nav-underline-color: var(--color-ls-magenta-300); /* --- L3 — Meta Navigation --- */ --meta-nav-color: var(--color-ls-blue-600); --meta-nav-hover-color: var(--color-ls-magenta-300); --meta-nav-border-separator-color: var(--color-ls-blue-600); --meta-nav-icon-color: var(--color-ls-blue-600); --meta-nav-icon-hover-color: var(--color-ls-blue-600-muted); /* --- L3 — Language Selector --- */ /* * LS language selector has two states: * 1. Trigger (collapsed): dark navy on white header * 2. Overlay (expanded): white text on dark gradient — handled via .language-selector-overlay * descendant element in language-selector.css (retains that selector, not moved to styles.css) */ --ls-trigger-color: var(--color-ls-blue-600); /* dark on white header */ --ls-trigger-hover-color: var(--color-ls-magenta-300); --ls-trigger-open-color: var(--color-white); /* open = inside gradient overlay */ --ls-overlay-bg: linear-gradient(75deg, var(--color-ls-blue-600) 0%, var(--color-ls-magenta-300) 76%); --ls-border-color: var(--color-ls-blue-50); --ls-heading-color: var(--color-ls-blue-600); --ls-tab-color: var(--color-ls-blue-600); --ls-tab-active-color: var(--color-ls-blue-600); --ls-tab-underline-color: var(--color-ls-yellow-50); --ls-list-color: var(--color-grey-300); --ls-list-active-color: var(--color-white); --ls-list-hover-color: var(--color-ls-blue-600); /* non-overlay context */ --ls-current-selection-base-color: var(--color-ls-blue-600); --ls-current-selection-hover-color: var(--color-ls-blue-600); --ls-overlay-heading-color: var(--color-white); --ls-overlay-tab-color: var(--color-white); --ls-overlay-tab-active-color: var(--color-white); --ls-overlay-list-active-color: var(--color-white); --ls-overlay-current-selection-color: var(--color-white); --ls-overlay-tab-hover-color: var(--color-white); --ls-overlay-close-hover-color: var(--color-white); --ls-overlay-hover-color: var(--color-ls-yellow-300); --links-footer-secondary-link-footer-default: var(--color-white-alpha-medium); --links-footer-secondary-link-footer-active: var(--color-ls-yellow-300); --icons-icon-primary: var(--color-ls-blue-600); --icons-icon-tertiary: var(--color-grey-500); --border-horizontal-tab-border-horizontal-tab-fix: var(--color-purple-700); /* --- L3 — Login CTA (LS: dark navy text on white header; gradient button) --- */ --login-cta-text-color: var(--color-ls-blue-600); --login-cta-text-hover-color: var(--color-ls-magenta-300); --login-cta-hover-underline-color: var(--color-ls-magenta-300); --login-cta-button-bg: linear-gradient(75deg, var(--color-ls-blue-600) 0%, var(--color-ls-magenta-300) 100%); --login-cta-button-hover-bg: linear-gradient(75deg, var(--color-ls-magenta-300) 0%, var(--color-ls-magenta-300) 100%); --login-cta-button-text-color: var(--color-white); --login-cta-logout-color: var(--color-ls-magenta-300); --login-cta-logout-hover-color: var(--color-magenta-700); --login-cta-dropdown-text-color: var(--color-ls-blue-600); --login-cta-dropdown-text-hover-color: var(--color-ls-magenta-300); --login-cta-dropdown-hover-underline-color: var(--color-ls-magenta-300); /* --- L3 — Footer --- */ /* Mobile (S-XS): 75deg gradient */ --footer-background-color: linear-gradient(75deg, var(--color-ls-magenta-600) 17%, var(--color-ls-magenta-300) 76%); --footer-text-color: var(--color-ls-blue-600); @media (width >= 1024px) { /* Desktop (M-XL): 75deg gradient */ --footer-background-color: linear-gradient(75deg, var(--color-ls-magenta-600) 0%, var(--color-ls-magenta-300) 76%); } /* --- L3 — Footer Items --- */ --footer-accordion-border-color: var(--color-ls-blue-600); --principal-links-color: var(--color-ls-blue-600); --principal-links-hover-color: var(--color-ls-blue-700); --secondary-links-color: var(--color-ls-blue-600); --secondary-links-hover-color: var(--color-ls-blue-700); --secondary-title-color: var(--color-ls-blue-600); /* --- L3 — Accordion (LS: verified against Figma UI-Kit node 17-27) --- */ --accordion-border-color: var(--color-ls-blue-600); --accordion-title-color: var(--color-ls-magenta-300); --accordion-icon-circle-bg: var(--color-ls-magenta-300); --accordion-icon-stroke-color: var(--color-white); --accordion-title-hover-color: var(--color-ls-magenta-600); --accordion-icon-circle-hover-bg: var(--color-ls-magenta-600); --accordion-active-bg: var(--color-ls-blue-50); --accordion-icon-circle-active-bg: var(--color-ls-magenta-600); --accordion-icon-active-stroke-color: var(--color-white); --accordion-open-title-color: var(--color-ls-magenta-600); --accordion-open-bullet-color: var(--color-ls-magenta-300); --accordion-open-list-color: var(--color-black); /* --- L3 — Footnotes --- */ --fn-link-color: var(--color-ls-magenta-300); --fn-link-hover-color: var(--color-ls-magenta-600); --fn-toggle-color: var(--color-ls-magenta-300); --fn-toggle-hover-color: var(--color-ls-magenta-600); /* --- L3 — Legal Note --- */ --legal-note-color: var(--color-ls-blue-600); --legal-note-link-color: var(--color-ls-blue-600); --legal-note-separator-color: var(--color-ls-blue-600); /* --- L3 — Link List --- */ /* * ⚠️ TODO: No Luminous Shades design for link-list exists yet. * Currently inherits Vibrant Purple values — verify with design. */ /* --- L3 — MLR Number --- */ --mlr-number-footer-color: var(--color-ls-blue-600); /* --- L3 — Teaser --- */ --teaser-color: var(--color-black); } /* ─── Shoreline ─────────────────────────────────────────────────────────── * New theme — Figma UI-Kit node 6676:123706. Only the L2 tokens consumed * by Hero (Flexible) are defined here. Other L3 component tokens (header, * footer, accordion, etc.) intentionally fall back to Vibrant Purple * defaults from :root until per-component design lands in a follow-up. */ .shoreline { --body-font-family: var(--poppins-font-family); --heading-font-family: var(--poppins-font-family); --cf-title-font-family: var(--poppins-font-family); --cf-mandatory-font-family: var(--poppins-font-family); --heading-color: var(--color-shoreline-purple-500); --over-heading-color: var(--color-shoreline-purple-500); --text-color: var(--color-black); --link-color: var(--color-shoreline-green-600); --link-hover-color: var(--color-shoreline-green-800); --icon-color: var(--color-shoreline-purple-500); --button-primary-background-color: var(--color-shoreline-green-500); --button-primary-text-color: var(--color-white); --button-primary-hover-background-color: var(--color-shoreline-green-700); --button-secondary-text-color: var(--color-shoreline-green-700); --button-secondary-border-color: var(--color-shoreline-green-700); --button-secondary-hover-background-color: var(--color-shoreline-green-200); --button-secondary-hover-text-color: var(--color-shoreline-green-700); --button-secondary-hover-border-color: var(--color-shoreline-green-700); /* --- Tabs --- */ --border-horizontal-tab-border-horizontal-tab-fix: var(--color-shoreline-green-600); /* --- Video Player --- */ --player-btn-play-bg: var(--color-shoreline-purple-800); --player-controls-bg: var(--color-shoreline-purple-500); --player-progress-fill: var(--color-shoreline-purple-700); /* --- L3 — Footnotes (MHDP-446, Figma 6673:402137) --- */ --fn-body-text-color: var(--color-black); --fn-link-color: var(--color-shoreline-green-600); --fn-link-hover-color: var(--color-shoreline-green-800); --fn-toggle-color: var(--color-shoreline-green-600); --fn-toggle-hover-color: var(--color-shoreline-green-800); /* --- L3 — Legal Note (MHDP-446, Figma 6659:246090) --- */ --legal-note-color: var(--color-shoreline-purple-500); --legal-note-link-color: var(--color-shoreline-purple-500); --legal-note-separator-color: var(--color-shoreline-green-600); /* --- L3 — MLR Number (MHDP-446, Figma 6659:246122) --- */ --mlr-number-footer-color: var(--color-shoreline-purple-500); /* --- L3 — Footer (MHDP-446, Figma 6659:246105) --- * Desktop footer band = purple-700; footer

text = purple-500. * Footer Items shows the Default state only; no hover swatch — hover = default * until a Shoreline footer hover spec is provided. */ --footer-background-color: var(--color-shoreline-purple-700); --footer-text-color: var(--color-shoreline-purple-500); --footer-accordion-border-color: var(--color-shoreline-green-600); --principal-links-color: var(--color-shoreline-blue-800); --principal-links-hover-color: var(--color-shoreline-blue-800); --secondary-links-color: var(--color-shoreline-blue-700); --secondary-links-hover-color: var(--color-shoreline-blue-700); --secondary-title-color: var(--color-shoreline-blue-700); /* --- L3 — Forms (MHDP-446, Figma 7807:275968) --- * Submit button + checkbox/radio selected fill = navy #202B59 (blue-800), * matching the footer. Section-bg variants still override submit to the * section's primary-button color via the L5 layer. */ --cf-selected-fill: var(--color-shoreline-blue-800); --cf-form-submit-background: var(--color-shoreline-blue-800); /* --- L3 — Header chrome (MHDP-446, Figma 17-29) --- * White header; purple-300 divider lines; purple-500 burger icon. * Mobile-menu-open background = white (Figma Active state). */ --header-background-color: var(--color-white); --header-hover-bg-color: var(--color-white); --header-border-color: var(--color-shoreline-purple-300); --header-menu-icons-color: var(--color-shoreline-purple-500); /* --- L3 — Main Navigation (MHDP-446, Figma 17-29) --- * Default purple-500; hovered link + visible underline purple-700. * Mobile chevron icons match the nav text (default purple-500, hover purple-700). */ --main-nav-color: var(--color-shoreline-purple-500); --main-nav-hover-color: var(--color-shoreline-purple-700); --main-nav-border-color: var(--color-shoreline-purple-300); --main-nav-icon-color: var(--color-shoreline-purple-500); --main-nav-icon-hover-color: var(--color-shoreline-purple-700); --main-nav-underline-color: var(--color-shoreline-purple-700); /* --- L3 — Meta Navigation (MHDP-446, Figma 17-29) --- * Default purple-500; hover shifts to green-600 (#3D6B78), text + icon. */ --meta-nav-color: var(--color-shoreline-purple-500); --meta-nav-hover-color: var(--color-shoreline-green-600); --meta-nav-icon-color: var(--color-shoreline-purple-500); --meta-nav-icon-hover-color: var(--color-shoreline-green-600); --meta-nav-border-separator-color: var(--color-shoreline-purple-300); /* --- L3 — Login CTA (MHDP-446, Figma 17-29) --- * Button = green-500 → hover green-700, white text. Account link = green-600. * Dropdown item text = #000. No authored hover → hovers reuse the resting color. */ --login-cta-text-color: var(--color-shoreline-green-600); --login-cta-text-hover-color: var(--color-shoreline-green-600); --login-cta-hover-underline-color: transparent; --login-cta-button-bg: var(--color-shoreline-green-500); --login-cta-button-hover-bg: var(--color-shoreline-green-700); --login-cta-button-text-color: var(--color-white); --login-cta-logout-color: var(--color-shoreline-green-600); --login-cta-logout-hover-color: var(--color-shoreline-green-600); --login-cta-dropdown-text-color: var(--color-black); --login-cta-dropdown-text-hover-color: var(--color-black); --login-cta-dropdown-hover-underline-color: transparent; /* --- L3 — Language & Country selector (MHDP-446, Figma 6727-304836 trigger / 7807-244600 overlay) --- * Trigger (collapsed, on white header): purple-500 text/icon, purple-300 separator, * hover = purple-500 @50%. Overlay (expanded, purple-700 panel): white text, * active/hover = yellow-200 (list items + country-tab text), active underline = green-400. */ --ls-trigger-color: var(--color-shoreline-purple-500); --ls-trigger-hover-color: var(--color-shoreline-purple-500-muted); --ls-trigger-open-color: var(--color-shoreline-purple-500); --ls-border-color: var(--color-shoreline-purple-300); --ls-heading-color: var(--color-shoreline-purple-500); --ls-tab-color: var(--color-shoreline-purple-500); --ls-tab-active-color: var(--color-shoreline-purple-500); --ls-tab-underline-color: var(--color-shoreline-green-400); --ls-list-color: var(--color-shoreline-purple-500); --ls-list-active-color: var(--color-shoreline-purple-500); --ls-list-hover-color: var(--color-shoreline-purple-500-muted); --ls-current-selection-base-color: var(--color-shoreline-purple-500); --ls-current-selection-hover-color: var(--color-shoreline-purple-500-muted); --ls-overlay-bg: var(--color-shoreline-purple-700); --ls-overlay-heading-color: var(--color-white); --ls-overlay-tab-color: var(--color-white); --ls-overlay-tab-active-color: var(--color-shoreline-yellow-200); --ls-overlay-tab-hover-color: var(--color-shoreline-yellow-200); --ls-overlay-list-active-color: var(--color-shoreline-yellow-200); --ls-overlay-current-selection-color: var(--color-shoreline-yellow-200); --ls-overlay-hover-color: var(--color-shoreline-yellow-200); --ls-overlay-close-color: var(--color-white); --ls-overlay-close-hover-color: var(--color-white); --links-footer-secondary-link-footer-default: var(--color-white); --links-footer-secondary-link-footer-active: var(--color-shoreline-yellow-200); } /* =========================================================================== LAYER 5 — SECTION BACKGROUND CLASS VARIANTS =========================================================================== */ /* * Background classes set alternate color contexts within a page section. * Each class fully redefines L2 global semantic tokens. * All four themes are covered — Luminous Shades gaps are now filled. * * Usage:

* Theme applied via ancestor: * * Note: .background-primary through .background-quinary are named by * usage position, not by color. The actual colour differs per theme. */ .background-primary { /* ── Vibrant Purple (default) ── */ --section-background-color: var(--color-purple-700); --heading-color: var(--color-yellow-200); --over-heading-color: var(--color-yellow-200); --text-color: var(--color-white); --link-color: var(--color-yellow-200); --link-hover-color: var(--color-yellow-300); --icon-color: var(--text-color); --button-primary-background-color: var(--color-cyan-300); --button-primary-text-color: var(--color-purple-700); --button-primary-hover-background-color: var(--color-cyan-400); --button-primary-hover-text-color: var(--color-purple-800); --button-secondary-background-color: var(--color-purple-700); --button-secondary-border-color: var(--color-white); --button-secondary-text-color: var(--color-white); --button-secondary-hover-background-color: var(--color-purple-100); --button-secondary-hover-text-color: var(--color-purple-700); --button-secondary-hover-border-color: var(--color-white); --button-disabled-background-color: var(--color-grey-100); --button-disabled-text-color: var(--color-grey-300); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); .sensitive-green & { --section-background-color: var(--color-green-500); --heading-color: var(--color-red-50); --over-heading-color: var(--color-red-50); --text-color: var(--color-white); --link-color: var(--color-green-50); --link-hover-color: var(--color-magenta-100); --icon-color: var(--text-color); --button-primary-background-color: var(--color-red-600); --button-primary-text-color: var(--color-white); --button-primary-hover-background-color: var(--color-red-700); --button-secondary-background-color: var(--color-green-500); --button-secondary-border-color: var(--color-white); --button-secondary-text-color: var(--color-white); --button-secondary-hover-background-color: var(--color-green-100); --button-secondary-hover-text-color: var(--color-green-700); --button-secondary-hover-border-color: var(--color-white); --button-disabled-background-color: var(--color-grey-100); --button-disabled-text-color: var(--color-grey-300); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); } .curious-blue & { --section-background-color: var(--color-cb-blue-600); /* MHDP-441: was --color-blue-700; #0F69AF */ --heading-color: var(--color-white); --over-heading-color: var(--color-white); --text-color: var(--color-white); --link-color: var(--color-cyan-100); --link-hover-color: var(--color-cyan-200); --icon-color: var(--text-color); --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-blue-700); --button-primary-hover-background-color: var(--color-blue-200); --button-secondary-background-color: var(--color-blue-700); --button-secondary-border-color: var(--color-white); --button-secondary-text-color: var(--color-white); --button-secondary-hover-background-color: var(--color-blue-100); --button-secondary-hover-text-color: var(--color-blue-700); --button-secondary-hover-border-color: var(--color-white); --button-disabled-background-color: var(--color-grey-100); --button-disabled-text-color: var(--color-grey-300); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); } .luminous-shades & { --section-background-color: var(--color-ls-blue-600); --heading-color: var(--color-white); --over-heading-color: var(--color-white); --text-color: var(--color-white); --link-color: var(--color-ls-yellow-50); --link-hover-color: var(--color-ls-yellow-300); --icon-color: var(--color-ls-magenta-300); --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-ls-blue-600); --button-primary-hover-background-color: var(--color-ls-magenta-300); --button-primary-hover-text-color: var(--color-white); --button-secondary-background-color: var(--color-ls-blue-600); --button-secondary-border-color: var(--color-white); --button-secondary-text-color: var(--color-white); --button-secondary-hover-background-color: var(--color-ls-blue-100); --button-secondary-hover-text-color: var(--color-ls-blue-700); --button-secondary-hover-border-color: var(--color-white); } .shoreline & { --section-background-color: var(--color-shoreline-purple-700); --heading-color: var(--color-shoreline-yellow-100); --over-heading-color: var(--color-shoreline-yellow-100); --text-color: var(--color-white); --link-color: var(--color-shoreline-yellow-100); --link-hover-color: var(--color-shoreline-yellow-200); --icon-color: var(--text-color); --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-shoreline-purple-700); --button-primary-hover-background-color: var(--color-shoreline-yellow-200); --button-secondary-background-color: var(--color-shoreline-purple-700); --button-secondary-text-color: var(--color-white); --button-secondary-border-color: var(--color-white); --button-secondary-hover-background-color: var(--color-shoreline-purple-200); --button-secondary-hover-text-color: var(--color-shoreline-purple-700); --button-secondary-hover-border-color: var(--color-white); } } .background-secondary { /* ── Vibrant Purple (default) ── */ --section-background-color: var(--color-cyan-300); --heading-color: var(--color-purple-700); --over-heading-color: var(--color-purple-700); --text-color: var(--color-black); --link-color: var(--color-purple-700); --link-hover-color: var(--color-purple-800); --icon-color: var(--text-color); --button-primary-background-color: var(--color-purple-700); --button-primary-text-color: var(--color-white); --button-primary-hover-background-color: var(--color-purple-900); --button-secondary-background-color: var(--color-cyan-300); --button-secondary-border-color: var(--color-purple-700); --button-secondary-text-color: var(--color-purple-700); --button-secondary-hover-background-color: var(--color-cyan-50); --button-secondary-hover-text-color: var(--color-purple-700); --button-secondary-hover-border-color: var(--color-purple-700); --button-disabled-background-color: var(--color-grey-100); --button-disabled-text-color: var(--color-grey-300); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); .sensitive-green & { --section-background-color: var(--color-green-300); --heading-color: var(--color-green-700); --over-heading-color: var(--color-green-700); --text-color: var(--color-black); --link-color: var(--color-red-900); --link-hover-color: var(--color-red-900); --icon-color: var(--text-color); --button-primary-background-color: var(--color-green-500); --button-primary-text-color: var(--color-white); --button-primary-hover-background-color: var(--color-green-700); --button-secondary-background-color: var(--color-green-300); --button-secondary-border-color: var(--color-green-700); --button-secondary-text-color: var(--color-green-700); --button-secondary-hover-background-color: var(--color-green-100); --button-secondary-hover-text-color: var(--color-green-700); --button-secondary-hover-border-color: var(--color-green-700); --button-disabled-background-color: var(--color-grey-100); --button-disabled-text-color: var(--color-grey-300); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); } .curious-blue & { --section-background-color: var(--color-blue-200); --heading-color: var(--color-purple-700); --over-heading-color: var(--color-purple-700); --text-color: var(--color-blue-800); --link-color: var(--color-purple-700); --link-hover-color: var(--color-purple-500); --icon-color: var(--text-color); --button-primary-background-color: var(--color-blue-700); --button-primary-text-color: var(--color-white); --button-primary-hover-background-color: var(--color-blue-800); --button-secondary-background-color: var(--color-blue-200); --button-secondary-border-color: var(--color-blue-700); --button-secondary-text-color: var(--color-blue-700); --button-secondary-hover-background-color: var(--color-cyan-200); --button-secondary-hover-text-color: var(--color-blue-700); --button-secondary-hover-border-color: var(--color-blue-700); --button-disabled-background-color: var(--color-grey-100); --button-disabled-text-color: var(--color-grey-300); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); } .luminous-shades & { --section-background-color: var(--color-ls-magenta-300); --heading-color: var(--color-white); --over-heading-color: var(--color-white); --text-color: var(--color-white); --link-color: var(--color-ls-yellow-50); --link-hover-color: var(--color-ls-yellow-300); --icon-color: var(--color-white); --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-ls-blue-600); --button-primary-hover-background-color: var(--color-ls-blue-600); --button-primary-hover-text-color: var(--color-white); --button-secondary-background-color: var(--color-ls-magenta-300); --button-secondary-border-color: var(--color-white); --button-secondary-text-color: var(--color-white); --button-secondary-hover-background-color: var(--color-ls-magenta-50); --button-secondary-hover-text-color: var(--color-ls-blue-700); --button-secondary-hover-border-color: var(--color-white); } .shoreline & { --section-background-color: var(--color-shoreline-green-300); --heading-color: var(--color-shoreline-purple-800); --over-heading-color: var(--color-shoreline-purple-800); --text-color: var(--color-shoreline-purple-800); --link-color: var(--color-shoreline-purple-500); --link-hover-color: var(--color-shoreline-purple-700); --icon-color: var(--color-purple-900); --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-shoreline-green-700); --button-primary-hover-background-color: var(--color-shoreline-green-600); --button-secondary-background-color: var(--color-shoreline-green-300); --button-secondary-text-color: var(--color-shoreline-green-700); --button-secondary-border-color: var(--color-shoreline-green-700); --button-secondary-hover-background-color: var(--color-white); --button-secondary-hover-text-color: var(--color-shoreline-green-700); --button-secondary-hover-border-color: var(--color-shoreline-green-700); } } .background-tertiary { /* ── Vibrant Purple (default) ── */ --section-background-color: var(--color-yellow-200); --heading-color: var(--color-purple-700); --over-heading-color: var(--color-purple-700); --text-color: var(--color-black); --link-color: var(--color-purple-700); --link-hover-color: var(--color-purple-800); --icon-color: var(--text-color); --button-primary-background-color: var(--color-purple-700); --button-primary-text-color: var(--color-white); --button-primary-hover-background-color: var(--color-purple-900); --button-secondary-background-color: var(--color-yellow-200); --button-secondary-border-color: var(--color-purple-700); --button-secondary-text-color: var(--color-purple-700); --button-secondary-hover-background-color: var(--color-yellow-50); --button-secondary-hover-text-color: var(--color-purple-700); --button-secondary-hover-border-color: var(--color-purple-700); --button-disabled-background-color: var(--color-grey-100); --button-disabled-text-color: var(--color-grey-300); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); .sensitive-green & { --section-background-color: var(--color-green-100); --heading-color: var(--color-green-700); --over-heading-color: var(--color-green-700); --text-color: var(--color-black); --link-color: var(--color-magenta-700); --link-hover-color: var(--color-magenta-800); --icon-color: var(--text-color); --button-primary-background-color: var(--color-green-500); --button-primary-text-color: var(--color-white); --button-primary-hover-background-color: var(--color-green-700); --button-secondary-background-color: var(--color-green-100); --button-secondary-border-color: var(--color-green-700); --button-secondary-text-color: var(--color-green-700); --button-secondary-hover-background-color: var(--color-green-300); --button-secondary-hover-text-color: var(--color-green-700); --button-secondary-hover-border-color: var(--color-green-700); --button-disabled-background-color: var(--color-grey-100); --button-disabled-text-color: var(--color-grey-300); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); } .curious-blue & { --section-background-color: var(--color-cyan-400); /* MHDP-441: was --color-blue-300; #2DBECD */ --heading-color: var(--color-purple-800); /* MHDP-666: title #3C2274 (was blue-900) */ --over-heading-color: var(--color-blue-900); --text-color: var(--color-black); /* MHDP-666: body #000000 (was blue-900) */ --link-color: var(--color-purple-700); --link-hover-color: var(--color-purple-800); --icon-color: var(--text-color); /* MHDP-667: CTA white bg / blue-800 text, hover blue-800 bg / white text */ --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-blue-800); --button-primary-hover-background-color: var(--color-blue-800); --button-primary-hover-text-color: var(--color-white); --button-secondary-background-color: var(--color-blue-300); --button-secondary-border-color: var(--color-blue-700); --button-secondary-text-color: var(--color-blue-700); --button-secondary-hover-background-color: var(--color-cyan-200); --button-secondary-hover-text-color: var(--color-blue-700); --button-secondary-hover-border-color: var(--color-blue-700); --button-disabled-background-color: var(--color-grey-100); --button-disabled-text-color: var(--color-grey-300); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); } .luminous-shades & { --section-background-color: var(--color-ls-blue-50); --heading-color: var(--color-ls-magenta-600); --over-heading-color: var(--color-ls-magenta-600); --text-color: var(--color-black); --link-color: var(--color-ls-magenta-800); --link-hover-color: var(--color-ls-magenta-900); --icon-color: var(--color-ls-magenta-600); /* Primary CTA: dark button on light section per MHDP-551 ticket (figma.variables.json disagrees — flagged for designer review) */ --button-primary-background-color: var(--color-ls-blue-600); --button-primary-text-color: var(--color-white); --button-primary-hover-background-color: var(--color-ls-magenta-300); --button-primary-hover-text-color: var(--color-white); --button-secondary-background-color: var(--color-ls-blue-100); --button-secondary-border-color: var(--color-ls-blue-600); --button-secondary-text-color: var(--color-ls-blue-600); --button-secondary-hover-background-color: var(--color-ls-magenta-50); --button-secondary-hover-text-color: var(--color-ls-blue-600); --button-secondary-hover-border-color: var(--color-ls-blue-600); } .shoreline & { --section-background-color: var(--color-shoreline-green-600); --heading-color: var(--color-shoreline-yellow-50); --over-heading-color: var(--color-shoreline-yellow-50); --text-color: var(--color-white); --link-color: var(--color-shoreline-yellow-50); --link-hover-color: var(--color-shoreline-yellow-100); --icon-color: var(--color-red-50); --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-shoreline-green-700); --button-primary-hover-background-color: var(--color-shoreline-yellow-100); --button-primary-hover-text-color: var(--color-shoreline-green-700); --button-secondary-background-color: var(--color-shoreline-green-600); --button-secondary-text-color: var(--color-white); --button-secondary-border-color: var(--color-white); --button-secondary-hover-background-color: var(--color-shoreline-green-200); --button-secondary-hover-text-color: var(--color-shoreline-green-700); --button-secondary-hover-border-color: var(--color-white); } } .background-quaternary { /* ── Vibrant Purple (default) ── */ --section-background-color: var(--color-magenta-600); --heading-color: var(--color-cyan-100); --over-heading-color: var(--color-cyan-100); --text-color: var(--color-white); --link-color: var(--color-cyan-50); --link-hover-color: var(--color-cyan-100); --icon-color: var(--text-color); --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-magenta-600); --button-primary-hover-background-color: var(--color-magenta-100); --button-primary-hover-text-color: var(--color-purple-700); --button-secondary-background-color: var(--color-magenta-600); --button-secondary-border-color: var(--color-white); --button-secondary-text-color: var(--color-white); --button-secondary-hover-background-color: var(--color-magenta-100); --button-secondary-hover-text-color: var(--color-magenta-700); --button-secondary-hover-border-color: var(--color-white); --button-disabled-background-color: var(--color-grey-50); --button-disabled-text-color: var(--color-grey-200); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); .sensitive-green & { --section-background-color: var(--color-red-100); --heading-color: var(--color-green-700); --over-heading-color: var(--color-green-700); --text-color: var(--color-black); --link-color: var(--color-magenta-700); --link-hover-color: var(--color-magenta-800); --icon-color: var(--text-color); --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-red-700); --button-primary-hover-background-color: var(--color-red-50); --button-primary-hover-text-color: var(--color-red-800); --button-secondary-background-color: var(--color-red-100); --button-secondary-border-color: var(--color-green-700); --button-secondary-text-color: var(--color-green-700); --button-secondary-hover-background-color: var(--color-green-100); --button-secondary-hover-text-color: var(--color-green-700); --button-secondary-hover-border-color: var(--color-green-700); --button-disabled-background-color: var(--color-grey-50); --button-disabled-text-color: var(--color-grey-200); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); } .curious-blue & { --section-background-color: var(--color-blue-100); --heading-color: var(--color-blue-900); --over-heading-color: var(--color-blue-900); --text-color: var(--color-blue-900); --link-color: var(--color-purple-700); --link-hover-color: var(--color-purple-800); --icon-color: var(--text-color); --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-blue-700); --button-primary-hover-background-color: var(--color-blue-200); --button-secondary-background-color: var(--color-blue-100); --button-secondary-border-color: var(--color-blue-700); --button-secondary-text-color: var(--color-blue-700); --button-secondary-hover-background-color: var(--color-cyan-200); --button-secondary-hover-text-color: var(--color-blue-700); --button-secondary-hover-border-color: var(--color-blue-700); --button-disabled-background-color: var(--color-grey-100); --button-disabled-text-color: var(--color-grey-300); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); } .luminous-shades & { --section-background-color: linear-gradient(75deg, var(--color-ls-blue-600) 0%, var(--color-ls-magenta-300) 100%); --heading-color: var(--color-white); --over-heading-color: var(--color-white); --text-color: var(--color-white); --link-color: var(--color-ls-yellow-50); --link-hover-color: var(--color-ls-yellow-300); --icon-color: var(--color-white); --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-ls-blue-600); --button-primary-hover-background-color: var(--color-ls-magenta-300); --button-primary-hover-text-color: var(--color-white); --button-secondary-background-color: transparent; --button-secondary-border-color: var(--color-white); --button-secondary-text-color: var(--color-white); --button-secondary-hover-background-color: var(--color-ls-magenta-50); --button-secondary-hover-text-color: var(--color-ls-blue-900); --button-secondary-hover-border-color: var(--color-white); } .shoreline & { --section-background-color: var(--color-shoreline-blue-50); --heading-color: var(--color-shoreline-purple-800); --over-heading-color: var(--color-shoreline-purple-800); --text-color: var(--color-shoreline-purple-800); --link-color: var(--color-shoreline-purple-600); --link-hover-color: var(--color-shoreline-purple-700); --icon-color: var(--color-shoreline-purple-800); --button-primary-background-color: var(--color-shoreline-green-500); --button-primary-text-color: var(--color-white); --button-primary-hover-background-color: var(--color-shoreline-green-700); --button-primary-hover-text-color: var(--color-white); --button-secondary-background-color: var(--color-shoreline-blue-50); --button-secondary-text-color: var(--color-shoreline-purple-700); --button-secondary-border-color: var(--color-shoreline-purple-700); --button-secondary-hover-background-color: var(--color-purple-10); --button-secondary-hover-text-color: var(--color-shoreline-purple-700); --button-secondary-hover-border-color: var(--color-shoreline-purple-700); } } .background-quinary { /* ── Vibrant Purple (default) ── */ --section-background-color: var(--color-blue-600); --heading-color: var(--color-yellow-200); --over-heading-color: var(--color-yellow-200); --text-color: var(--color-white); --link-color: var(--color-yellow-50); --link-hover-color: var(--color-yellow-100); --icon-color: var(--text-color); --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-blue-700); --button-primary-hover-background-color: var(--color-blue-100); --button-primary-hover-text-color: var(--color-purple-700); --button-secondary-background-color: var(--color-blue-600); --button-secondary-border-color: var(--color-white); --button-secondary-text-color: var(--color-white); --button-secondary-hover-background-color: var(--color-blue-100); --button-secondary-hover-text-color: var(--color-blue-700); --button-secondary-hover-border-color: var(--color-white); --button-disabled-background-color: var(--color-grey-50); --button-disabled-text-color: var(--color-grey-200); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); .sensitive-green & { --section-background-color: var(--color-green-700); --heading-color: var(--color-red-50); --over-heading-color: var(--color-red-50); --text-color: var(--color-red-50); --link-color: var(--color-white); --link-hover-color: var(--color-red-200); --icon-color: var(--text-color); --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-green-700); --button-primary-hover-background-color: var(--color-green-100); --button-secondary-background-color: var(--color-green-700); --button-secondary-border-color: var(--color-white); --button-secondary-text-color: var(--color-white); --button-secondary-hover-background-color: var(--color-green-100); --button-secondary-hover-text-color: var(--color-green-700); --button-secondary-hover-border-color: var(--color-white); --button-disabled-background-color: var(--color-grey-100); --button-disabled-text-color: var(--color-grey-300); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); } .curious-blue & { --section-background-color: var(--color-blue-800); --heading-color: var(--color-white); --over-heading-color: var(--color-white); --text-color: var(--color-white); --link-color: var(--color-cyan-100); --link-hover-color: var(--color-cyan-200); --icon-color: var(--text-color); --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-blue-700); --button-primary-hover-background-color: var(--color-cyan-100); --button-secondary-background-color: var(--color-blue-800); --button-secondary-border-color: var(--color-white); --button-secondary-text-color: var(--color-white); --button-secondary-hover-background-color: var(--color-cyan-100); --button-secondary-hover-text-color: var(--color-blue-700); --button-secondary-hover-border-color: var(--color-white); --button-disabled-background-color: var(--color-grey-100); --button-disabled-text-color: var(--color-grey-300); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); } .luminous-shades & { --section-background-color: var(--color-ls-blue-50); --heading-color: var(--color-ls-blue-600); --over-heading-color: var(--color-ls-blue-600); --text-color: var(--color-ls-blue-600); --link-color: var(--color-ls-magenta-300); --link-hover-color: var(--color-ls-magenta-600); --icon-color: var(--color-ls-blue-600); --button-primary-background-color: var(--color-ls-blue-600); --button-primary-text-color: var(--color-white); --button-primary-hover-background-color: var(--color-ls-magenta-300); --button-primary-hover-text-color: var(--color-white); --button-secondary-background-color: var(--color-ls-blue-50); --button-secondary-border-color: var(--color-ls-blue-600); --button-secondary-text-color: var(--color-ls-blue-600); --button-secondary-hover-background-color: var(--color-ls-magenta-50); --button-secondary-hover-text-color: var(--color-ls-blue-700); --button-secondary-hover-border-color: var(--color-ls-blue-600); } .shoreline & { --section-background-color: var(--color-shoreline-yellow-50); --heading-color: var(--color-shoreline-purple-800); --over-heading-color: var(--color-shoreline-purple-800); --text-color: var(--color-shoreline-purple-800); --link-color: var(--color-shoreline-purple-600); --link-hover-color: var(--color-shoreline-purple-700); --icon-color: var(--text-color); --button-primary-background-color: var(--color-shoreline-green-500); --button-primary-text-color: var(--color-white); --button-primary-hover-background-color: var(--color-shoreline-green-700); --button-primary-hover-text-color: var(--color-white); --button-secondary-background-color: var(--color-shoreline-yellow-50); --button-secondary-text-color: var(--color-shoreline-purple-700); --button-secondary-border-color: var(--color-shoreline-purple-700); --button-secondary-hover-background-color: var(--color-purple-10); --button-secondary-hover-text-color: var(--color-shoreline-purple-700); --button-secondary-hover-border-color: var(--color-shoreline-purple-700); } } /* * MHDP-441 — NEW background variants, Curious Blue only. * These two classes intentionally have NO Vibrant/base or other-theme branch: under any non-CB * theme the class is a no-op and the section keeps the theme's normal colours. Authoring restricts * them to the Curious Blue site. Do not add invented colours for other themes here. */ .background-senary { .curious-blue & { --section-background-color: var(--color-cb-green-500); /* #A5CD50 */ --heading-color: var(--color-blue-800); --over-heading-color: var(--color-blue-800); --text-color: var(--color-black); /* MHDP-666: body #000000 (was blue-800) */ --link-color: var(--color-blue-800); --link-hover-color: var(--color-blue-900); --icon-color: var(--text-color); /* MHDP-667: CTA white bg / blue-800 text, hover blue-800 bg / white text */ --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-blue-800); --button-primary-hover-background-color: var(--color-blue-800); --button-primary-hover-text-color: var(--color-white); --button-secondary-background-color: transparent; --button-secondary-border-color: var(--color-blue-800); --button-secondary-text-color: var(--color-blue-800); --button-secondary-hover-background-color: var(--color-blue-100); --button-secondary-hover-text-color: var(--color-blue-800); --button-secondary-hover-border-color: var(--color-blue-800); --button-disabled-background-color: var(--color-grey-100); --button-disabled-text-color: var(--color-grey-300); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); } } .background-septenary { .curious-blue & { --section-background-color: var(--color-blue-700); /* #085897 */ --heading-color: var(--color-cb-green-400); /* #BDD871 */ --over-heading-color: var(--color-cb-green-400); --text-color: var(--color-white); /* MHDP-666: body #FFFFFF (was cb-green-300) */ --link-color: var(--color-white); --link-hover-color: var(--color-cb-green-400); --icon-color: var(--color-white); /* MHDP-667: CTA white bg / blue-800 text, hover cb-green-300 bg / blue-800 text */ --button-primary-background-color: var(--color-white); --button-primary-text-color: var(--color-blue-800); --button-primary-hover-background-color: var(--color-cb-green-300); --button-primary-hover-text-color: var(--color-blue-800); --button-secondary-background-color: var(--color-blue-700); --button-secondary-border-color: var(--color-blue-100); --button-secondary-text-color: var(--color-white); --button-secondary-hover-background-color: var(--color-blue-100); --button-secondary-hover-text-color: var(--color-blue-700); --button-secondary-hover-border-color: var(--color-white); --button-disabled-background-color: var(--color-grey-100); --button-disabled-text-color: var(--color-grey-300); --cf-form-submit-background: var(--button-primary-background-color); --cf-form-submit-hover-background: var(--button-primary-hover-background-color); } } /* fallback fonts */ @font-face { font-family: merck-fallback; size-adjust: 149.2700%; src: local("Arial"); } html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { /* Re-substitute --cf-title-color at body so it picks up the theme override of * --heading-color. Declared only at :root it would freeze to the root's purple. */ --cf-title-color: var(--heading-color); display: none; margin: 0; background-color: var(--color-white); color: var(--text-color); font-family: var(--body-font-family); font-size: var(--body-font-size-m); line-height: 1.5; &.appear { display: block; } @media (width >= 1440px) { line-height: 1.75; } } header { &:has(.header-mobile), .header-mobile { --nav-height: 100.78px; /* Mobile header logo runs a bit smaller than desktop (proportion preserved by the max-height/max-width box in logo.css — never distorted). */ --logo-height: 40px; --logo-max-width: 140px; } height: var(--nav-height); } header .header, footer .footer { visibility: hidden; } header .header[data-block-status="loaded"], footer .footer[data-block-status="loaded"] { visibility: visible; } h1 { font-size: var(--heading-font-size-xxl); } h2 { font-size: var(--heading-font-size-xl); line-height: var(--heading-line-height-xl); } h3 { font-size: var(--heading-font-size-l); } h4 { font-size: var(--heading-font-size-m); } h5 { font-size: var(--heading-font-size-s); } h6 { font-size: var(--heading-font-size-xs); } h1, h2, h3, h4, h5, h6 { margin-top: 0.8em; margin-bottom: 0.25em; font-family: var(--heading-font-family); font-weight: 700; font-style: normal; line-height: 1.2; scroll-margin: 40px; color: var(--heading-color); &:is(h2) { line-height: var(--heading-line-height-xl); } &:first-child { margin-top: 0; } em { font-style: normal; } .over-heading + & { margin-top: 0; } &:has(strong) { .luminous-shades & { font-family: var(--ibm-plex-sans-font-family); } body:not(.sensitive-green, .curious-blue, .luminous-shades, .shoreline) & { font-family: var(--merk-font-family); } } } /* Superscript / subscript — keep the shifted glyph from inflating the line box (MHDP-459). The UA default (font-size: smaller) pushes the real line-height above the configured value. font-size 0.6em shrinks the glyph and line-height: 1 stops it contributing extra height, so body text (1.5) and headings (1.2) keep their set line-height. */ sup { vertical-align: super; font-size: 0.5em; line-height: 1; } /* sub uses position-offset rather than vertical-align: sub, which on tight heading line-heights (1.2) shifts the glyph below the line box and inflates it. line-height: 0 + position keep it layout-neutral at any line-height. */ sub { position: relative; bottom: -0.25em; font-size: 0.5em; line-height: 0; vertical-align: baseline; } /* These are for default content wrappers that have titles only */ .default-content-wrapper:has(:only-child:is(h1, h2, h3, h4, h5, h6)), .default-content-wrapper:has(:first-child:is(.over-heading), :last-child:is(h1, h2, h3, h4, h5, h6)) { margin-bottom: var(--spacing-10); :is(h1, h2, h3, h4, h5, h6) { margin-bottom: 0; } } .default-content-wrapper:has(:only-child:is(h1, h2, h3, h4, h5, h6)) + [class$="-wrapper"], .default-content-wrapper:has(:first-child:is(.over-heading), :last-child:is(h1, h2, h3, h4, h5, h6)) + [class$="-wrapper"] { margin-top: 0; } .over-heading { display: block; margin-block-start: 40px; font-weight: bold; text-transform: uppercase; font-size: var(--heading-font-size-xs); color: var(--over-heading-color); } p, dl, ol, ul, pre, blockquote { margin-top: 0.8em; margin-bottom: 0.25em; color: var(--text-color); } code, pre { font-size: var(--body-font-size-s); } pre { padding: 16px; border-radius: 8px; background-color: var(--color-grey-50); overflow-x: auto; white-space: pre; } input, textarea, select, button { font: inherit; } /* links */ a { &:any-link { color: var(--link-color); text-decoration: none; overflow-wrap: break-word; } &:hover { color: var(--link-hover-color); text-decoration: underline; } } /* buttons */ a.button:any-link, button { box-sizing: border-box; display: inline-block; width: 100%; max-width: 100%; margin: 12px 0; border: 2px solid transparent; border-radius: 4px; padding: 8px 20px; font-family: var(--body-font-family); font-size: var(--button-font-size); font-style: normal; font-weight: 700; line-height: 1.5; text-align: center; text-decoration: none; background-color: var(--button-primary-background-color); color: var(--button-primary-text-color); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; &.big { font-size: var(--button-big-font-size); padding: 8px 20px; } @media (width >= 768px) { width: unset; } } a.button, button { &:hover, &:focus { background-color: var(--button-primary-hover-background-color); color: var(--button-primary-hover-text-color); cursor: pointer; } &:disabled, &:disabled:hover { background-color: var(--button-disabled-background-color); color: var(--button-disabled-text-color); cursor: unset; } &.secondary { background-color: var(--button-secondary-background-color); border: 2px solid var(--button-secondary-border-color); color: var(--button-secondary-text-color); &:hover, &:focus { background-color: var(--button-secondary-hover-background-color); color: var(--button-secondary-hover-text-color); border-color: var(--button-secondary-hover-border-color); } } } /* Gradient CTA — bold link in Luminous Shades, base-background sections only. A bolded link decorates to `a.button.primary`; here it renders as a navy→magenta gradient. All other themes (and non-base LS sections) keep the solid primary CTA. */ body.luminous-shades .section:not([class*="background-"]) a.button.primary, body.luminous-shades .section.background-base a.button.primary { border-color: transparent; background-color: transparent; /* 75deg matches the LS gradient convention (--ls-overlay-bg) */ background-image: linear-gradient( 75deg, var(--color-ls-blue-900), var(--color-ls-magenta-300) ); background-origin: border-box; color: var(--color-white); &:hover, &:focus { background-image: none; background-color: var(--color-ls-magenta-300); color: var(--color-white); } &:disabled, &:disabled:hover { background-image: none; } } /* sections */ main { img { max-width: 100%; width: auto; height: auto; } > .section { margin: 0; padding-block: var(--wrapper-margin-padding-block); background: var(--section-background-color); &[class*="background-"]:not(.background-base, .hero-container) { padding-block: var(--wrapper-background-section-padding-block); } &:first-of-type { margin-top: 0; padding-block-start: 40px; /* full page-edge gap — header to first block (mobile) */ } &:last-of-type { padding-block-end: 40px; /* full page-edge gap — last block to footer (mobile) */ } @media (width >= 1024px) { &:first-of-type { padding-block-start: 80px; /* full page-edge gap — header to first block (desktop) */ } &:last-of-type { padding-block-end: 80px; /* full page-edge gap — last block to footer (desktop) */ } } > div { max-width: var(--wrapper-max-width); padding-inline: var(--wrapper-padding-inline); margin: var(--wrapper-margin-padding-block) var(--wrapper-margin-inline) 0; &:first-child { margin-top: 0; } } } } /* icons */ .icon { display: inline-block; height: 24px; width: 24px; svg { height: 100%; width: 100%; color: var(--icon-color); } } /* 1em tracks the current font-size at every breakpoint (12/14/16px body), so the icon reads like a typed glyph instead of a fixed 24px badge. Class name is derived by aem.js from the icon filename, so the underscores are fixed and the selector must match them. */ /* stylelint-disable-next-line selector-class-pattern */ .icon-arrow_down_white_border { width: 1em; height: 1em; vertical-align: -0.125em; } /* ============================================================================= Grid & Layout System Source: Figma UI Kit node 785:66 (Grid Overview & Details) figma.variables.json — grid_and_spacing BREAKPOINTS & SIDE SPACINGS ────────────────────────── XS < 320px · 4 cols · 16px gutter · 20px side spacing S 320–767px · 8 cols · 24px gutter · 18px side spacing M 768–1023px · 12 cols · 24px gutter · 146px side spacing L 1024–1439px · 12 cols · 24px gutter · 160px side spacing (padding-inline fixed) XL 1440px+ · 12 cols · 24px gutter · 108px side spacing (padding-inline fixed) USAGE — .grid utility (for layout sections inside a block) ────────────────────────────────────────────────────────── 1. Add class="grid" to any wrapper to establish a responsive CSS grid. Columns adapt automatically: 4 (XS) → 8 (S) → 12 (M/L/XL). 2. Add .col-{bp}-{n} classes to child elements to define column spans. Classes are mobile-first: smaller-breakpoint classes persist upward unless a larger-breakpoint class overrides them. 3. Add .col-start-{bp}-{n} to offset/position a child at a specific column. USAGE — .block-grid pattern (for block-level column layouts) ───────────────────────────────────────────────────────────── At M/L/XL the block root becomes a 12-column CSS grid whose 1fr columns automatically fill whatever content width remains after the section padding-inline side spacing. Children can then use grid-column for precise column placement: export default function decorate(block) { block.classList.add('block-grid'); block.querySelector('.my-content').style.gridColumn = '1 / span 10'; } Or in the block's @scope CSS: @scope (.my-block) { @media (width >= 768px) { :scope { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gutter); } .content { grid-column: 1 / span 10; } .heading { grid-column: 1 / span 12; } } } COLUMN WIDTH FORMULA (for manual pixel sizing, without CSS grid) ──────────────────────────────────────────────────────────────── N columns = calc(N * var(--grid-col-unit) - var(--grid-gutter)) Reference values at the top of each breakpoint range: · S (767px) 10 cols = calc(10 * var(--grid-col-unit-s) - var(--grid-gutter-s)) = calc(10 * 94px - 24px) = 916px · M (1023px) 10 cols = calc(10 * var(--grid-col-unit-m) - var(--grid-gutter-m)) = calc(10 * 63px - 24px) = 606px · L (1439px) 10 cols = calc(10 * var(--grid-col-unit-l) - var(--grid-gutter-l)) = calc(10 * 82px - 24px) = 796px · XL (1440px) 10 cols = calc(10 * var(--grid-col-unit-xl) - var(--grid-gutter-xl)) = calc(10 * 104px - 24px) = 1016px ============================================================================= */ /* Grid container — responsive column count via --grid-columns active var */ .grid { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); column-gap: var(--grid-gutter); } /* ----------------------------------------------------------------------------- Column Span Utilities — .col-{breakpoint}-{n} ----------------------------------------------------------------------------- */ /* XS: 4-column grid (< 320px — default, applies until overridden) */ .col-xs-1 { grid-column: span 1; } .col-xs-2 { grid-column: span 2; } .col-xs-3 { grid-column: span 3; } .col-xs-4 { grid-column: span 4; } /* S: 8-column grid (320px+) */ @media (width >= 320px) { .col-s-1 { grid-column: span 1; } .col-s-2 { grid-column: span 2; } .col-s-3 { grid-column: span 3; } .col-s-4 { grid-column: span 4; } .col-s-5 { grid-column: span 5; } .col-s-6 { grid-column: span 6; } .col-s-7 { grid-column: span 7; } .col-s-8 { grid-column: span 8; } } /* M: 12-column grid (768px+) */ @media (width >= 768px) { .col-m-1 { grid-column: span 1; } .col-m-2 { grid-column: span 2; } .col-m-3 { grid-column: span 3; } .col-m-4 { grid-column: span 4; } .col-m-5 { grid-column: span 5; } .col-m-6 { grid-column: span 6; } .col-m-7 { grid-column: span 7; } .col-m-8 { grid-column: span 8; } .col-m-9 { grid-column: span 9; } .col-m-10 { grid-column: span 10; } .col-m-11 { grid-column: span 11; } .col-m-12 { grid-column: span 12; } } /* L: 12-column grid (1024px+) */ @media (width >= 1024px) { .col-l-1 { grid-column: span 1; } .col-l-2 { grid-column: span 2; } .col-l-3 { grid-column: span 3; } .col-l-4 { grid-column: span 4; } .col-l-5 { grid-column: span 5; } .col-l-6 { grid-column: span 6; } .col-l-7 { grid-column: span 7; } .col-l-8 { grid-column: span 8; } .col-l-9 { grid-column: span 9; } .col-l-10 { grid-column: span 10; } .col-l-11 { grid-column: span 11; } .col-l-12 { grid-column: span 12; } } /* XL: 12-column grid (1440px+) */ @media (width >= 1440px) { .col-xl-1 { grid-column: span 1; } .col-xl-2 { grid-column: span 2; } .col-xl-3 { grid-column: span 3; } .col-xl-4 { grid-column: span 4; } .col-xl-5 { grid-column: span 5; } .col-xl-6 { grid-column: span 6; } .col-xl-7 { grid-column: span 7; } .col-xl-8 { grid-column: span 8; } .col-xl-9 { grid-column: span 9; } .col-xl-10 { grid-column: span 10; } .col-xl-11 { grid-column: span 11; } .col-xl-12 { grid-column: span 12; } } /* ----------------------------------------------------------------------------- Column Start Offset Utilities — .col-start-{breakpoint}-{n} Position a grid item starting at a specific column track number (1-based). Combine with a .col-{bp}-{n} span class for full placement control. ----------------------------------------------------------------------------- */ /* XS offsets (< 320px default) */ .col-start-xs-1 { grid-column-start: 1; } .col-start-xs-2 { grid-column-start: 2; } .col-start-xs-3 { grid-column-start: 3; } .col-start-xs-4 { grid-column-start: 4; } /* S offsets (320px+) */ @media (width >= 320px) { .col-start-s-1 { grid-column-start: 1; } .col-start-s-2 { grid-column-start: 2; } .col-start-s-3 { grid-column-start: 3; } .col-start-s-4 { grid-column-start: 4; } .col-start-s-5 { grid-column-start: 5; } .col-start-s-6 { grid-column-start: 6; } .col-start-s-7 { grid-column-start: 7; } .col-start-s-8 { grid-column-start: 8; } } /* M offsets (768px+) */ @media (width >= 768px) { .col-start-m-1 { grid-column-start: 1; } .col-start-m-2 { grid-column-start: 2; } .col-start-m-3 { grid-column-start: 3; } .col-start-m-4 { grid-column-start: 4; } .col-start-m-5 { grid-column-start: 5; } .col-start-m-6 { grid-column-start: 6; } .col-start-m-7 { grid-column-start: 7; } .col-start-m-8 { grid-column-start: 8; } .col-start-m-9 { grid-column-start: 9; } .col-start-m-10 { grid-column-start: 10; } .col-start-m-11 { grid-column-start: 11; } .col-start-m-12 { grid-column-start: 12; } } /* L offsets (1024px+) */ @media (width >= 1024px) { .col-start-l-1 { grid-column-start: 1; } .col-start-l-2 { grid-column-start: 2; } .col-start-l-3 { grid-column-start: 3; } .col-start-l-4 { grid-column-start: 4; } .col-start-l-5 { grid-column-start: 5; } .col-start-l-6 { grid-column-start: 6; } .col-start-l-7 { grid-column-start: 7; } .col-start-l-8 { grid-column-start: 8; } .col-start-l-9 { grid-column-start: 9; } .col-start-l-10 { grid-column-start: 10; } .col-start-l-11 { grid-column-start: 11; } .col-start-l-12 { grid-column-start: 12; } } /* XL offsets (1440px+) */ @media (width >= 1440px) { .col-start-xl-1 { grid-column-start: 1; } .col-start-xl-2 { grid-column-start: 2; } .col-start-xl-3 { grid-column-start: 3; } .col-start-xl-4 { grid-column-start: 4; } .col-start-xl-5 { grid-column-start: 5; } .col-start-xl-6 { grid-column-start: 6; } .col-start-xl-7 { grid-column-start: 7; } .col-start-xl-8 { grid-column-start: 8; } .col-start-xl-9 { grid-column-start: 9; } .col-start-xl-10 { grid-column-start: 10; } .col-start-xl-11 { grid-column-start: 11; } .col-start-xl-12 { grid-column-start: 12; } } /* ============================================================================= Block Grid — reusable 12-column layout pattern for blocks at M/L/XL Apply this class to a block's root element (or an inner container) when the block needs column-based layout. The 1fr columns automatically fill the content area left after the section padding-inline side spacing. Usage in a block's decorate(): block.classList.add('block-grid'); block.querySelector('.heading').style.gridColumn = '1 / span 12'; block.querySelector('.content').style.gridColumn = '1 / span 10'; Usage via block @scope CSS (preferred — no JS needed): In the block CSS file, add display:grid + repeat(12, 1fr) to :scope at width >= 768px, then use grid-column for children. ============================================================================= */ .block-grid { --block-grid-gutter: var(--grid-gutter); } @media (width >= 768px) { .block-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--block-grid-gutter); } }