/* ========================================================================== 100-whitelabel.css Media Site Gen 2: Customer branding overrides Purpose: - Override design tokens from 00-core.css for customer-specific branding - Keep changes limited to variables so the platform remains upgradeable Loading: - Load AFTER 00-core.css and before component CSS where possible - Or load last if you want it to win over everything ========================================================================== */ /* ========================================================================== 1) Global brand overrides (default customer theme) Notes: - Prefer overriding the smallest set of tokens needed: primary/link, focus, surfaces, text, border, semantic colours (optional) ========================================================================== */ .card__img { object-fit: cover; } :root { /* ------------------------------------------------------------------------ Brand identity ------------------------------------------------------------------------ */ /* Primary brand colour */ --link: rgb(0 163 224 / 1); /* TODO customer */ --link-hover: rgba(51, 181, 230, 1); /* TODO customer */ /* Primary aliases */ --primary: var(--link); --primary-hover: var(--link-hover); /* Text on primary (usually white for strong brand colours) */ --on-primary: rgb(1 2 3 / 1);; /* TODO customer */ /* Focus ring should remain visible on both light surfaces and brand elements */ --focus: rgba(0, 163, 224, 0.66); /* TODO customer */ /* Optional: if the customer has a branded info colour that differs from link */ /* --info: #0a66c2; */ /* TODO customer */ /* ------------------------------------------------------------------------ Surfaces and content colours Use these if the customer needs a different neutral palette. If not, leave the platform defaults. ------------------------------------------------------------------------ */ /* Base surfaces */ --surface: rgba(14, 15, 16, 1); /* TODO customer (optional) */ --surface-1: rgba(24, 26, 27, 1); /* TODO customer (optional) */ --surface-2: rgba(35, 37, 40, 1); /* TODO customer (optional) */ /* Tinted surfaces (selection and chips) */ --surface-tint: rgba(0, 163, 224, .5); /* TODO customer (optional) */ --surface-tint-hover: rgba(0, 163, 224, .25); /* TODO customer (optional) */ --surface-tint-strong: rgba(0, 163, 224, 1); /* TODO customer (optional) */ /* Text */ --text: rgba(255, 255, 255, 1); /* TODO customer (optional) */ --text-muted: rgba(220, 220, 220, 1); /* TODO customer (optional) */ --text-strong: rgba(255, 255, 255, 1); /* Element Radii */ --radius-button: var(--radius-md); --radius-search: var(--radius-pill); --radius-hero: var(--radius-lg); --radius-card: var(--radius-md); --radius-badge: var(--radius-sm); --radius-image: var(--radius-lg); /* Borders */ --border: rgb(45, 45, 45, 1); /* TODO customer (optional) */ --border-strong: color-mix(in srgb, var(--text) 25%, var(--border)); /* Avatar fallback (optional) */ --avatar-fallback-bg: rgba(0, 163, 224, 1); /* TODO customer (optional) */ /* ------------------------------------------------------------------------ Semantic colours (optional) If a customer has strict semantics, override these too. ------------------------------------------------------------------------ */ --info: rgb(0 163 224 / 1); /* TODO customer (optional) */ --danger: rgb(232, 80, 52, 1); /* TODO customer (optional) */ --warning: #b25b00; /* TODO customer (optional) */ --success: #1b7f3a; /* TODO customer (optional) */ /* ------------------------------------------------------------------------ Overlays and scrims Usually you will not change these per customer, but you can. ------------------------------------------------------------------------ */ /* Shadows */ --shadow-xs: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.65); --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 3px 8px rgba(0, 0, 0, 0.75); --shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px rgba(0, 0, 0, 0.8); --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 48px rgba(0, 0, 0, 0.85); --overlay-backdrop: rgba(255, 255, 255, 0.45); --scrim-0: rgba(0, 0, 0, 0); --scrim-10: rgba(0, 0, 0, 0.1); --scrim-20: rgba(0, 0, 0, 0.2); --scrim-35: rgba(0, 0, 0, 0.35); --scrim-40: rgba(0, 0, 0, 0.4); --scrim-55: rgba(0, 0, 0, 0.55); --scrim-60: rgba(0, 0, 0, 0.6); --scrim-65: rgba(0, 0, 0, 0.65); /* Media lock */ --media-lock-scrim: rgba(255, 255, 255, 0.3); /* ------------------------------------------------------------------------ Track colours (optional) Only override if tracks are customer-branded. ------------------------------------------------------------------------ */ --track-professional-development: #7b3fa1; /* TODO customer (optional) */ --track-research: #1b6fdc; /* TODO customer (optional) */ --track-education: #1f9d55; /* TODO customer (optional) */ /* Hero (customer overrides) */ --hero-ink: rgb(35 37 40 / 1); /* TODO customer */ --hero-ink-soft: rgba(20, 6, 6, 0.5); /* TODO customer */ /* Hero text colour*/ --hero-title-color: rgb(255, 255, 255, 1); --hero-summary-color: rgb(255, 255, 255, 1); --hero-accent: var(--primary); /* TODO customer */ /* Hero button colours */ --hero-link-primary-bg: var(--primary); --hero-link-primary-color: var(--on-primary); --hero-link-primary-hover-bg: var(--primary-hover); --hero-link-primary-hover-color: rgb(10 3 3 / 1); /* Optional: if their hero needs different contrast/shadows */ --hero-title-shadow: 0 4px 24px var(--hero-ink); --hero-text-shadow: 0 2px 8px var(--hero-ink); --hero-slide-bg: var(--hero-ink); --hero-overlay-bottom-from: rgb(35 37 40 / 0); --hero-overlay-bottom-to: rgb(35 37 40 / 1); --hero-overlay-side-from: rgb(35 37 40 / 0); --hero-overlay-side-mid: rgb(35 37 40 / 0.5); --hero-overlay-side-to: rgb(35 37 40 / 1); /* Avatar theme swatches (customer overrides) */ --theme-1: rgb(38, 170, 170); /* TODO customer */ --theme-2: rgb(64, 176, 142); /* TODO customer */ --theme-3: rgb(92, 170, 108); /* TODO customer */ --theme-4: rgb(63, 132, 201); /* TODO customer */ --theme-5: rgb(108, 112, 196); /* TODO customer */ --theme-6: rgb(148, 108, 176); /* TODO customer */ --theme-color: var(--surface); } /* ========================================================================== Customer typography (self-hosted static files) Replace font-family name and file paths per customer. Only include weights you actually use. ========================================================================== */ /* montserrat-regular*/ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-regular.woff2') format('woff2'), url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-regular.ttf') format('truetype'); } /* montserrat-italic*/ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 400; src: url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-italic.woff2') format('woff2'), url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-italic.ttf') format('truetype'); } /* montserrat-500*/ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-500.woff2') format('woff2'), url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-500.ttf') format('truetype'); } /* montserrat-500italic*/ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 500; src: url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-500italic.woff2') format('woff2'), url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-500italic.ttf') format('truetype'); } /* montserrat-600*/ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-600.woff2') format('woff2'), url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-600.ttf') format('truetype'); } /* montserrat-600italic*/ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 600; src: url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-600italic.woff2') format('woff2'), url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-600italic.ttf') format('truetype'); } /* montserrat-700*/ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-700.woff2') format('woff2'), url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-700.ttf') format('truetype'); } /* montserrat-700italic*/ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 700; src: url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-700italic.woff2') format('woff2'), url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-700italic.ttf') format('truetype'); } /* montserrat-800*/ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 800; src: url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-800.woff2') format('woff2'), url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-800.ttf') format('truetype'); } /* montserrat-800italic*/ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 800; src: url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-800italic.woff2') format('woff2'), url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-800italic.ttf') format('truetype'); } /* montserrat-900*/ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 900; src: url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-900.woff2') format('woff2'), url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-900.ttf') format('truetype'); } /* montserrat-900italic*/ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 900; src: url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-900italic.woff2') format('woff2'), url('https://der-mediasite-dev.cadmore.media/Content?applicationId=b1ad655d-b6b1-4380-9ba9-fdc6c3e53b6b&fileName=body-900italic.ttf') format('truetype'); } :root { --font-body: "Montserrat", var(--font-sans); --font-heading: var(--font-body); } /* ========================================================================== 2) Notes for implementers - Do not add component selectors here. Keep it token-only. - Prefer overriding: --link, --link-hover, --focus, then neutrals if needed. - Ensure contrast: --link against --surface-1, and --on-primary against --primary. ========================================================================== */