/* ============================================================================= RED HAT — Palette & Design Tokens (single source of truth for the Red Hat brand) ============================================================================= Scope : fonts, color palette, semantic tokens and per-product themes. Loaded : by app/templates/products/redhat/_rh_layout.html (head_extra block). Pairs : component styles (.rh-*) live in app/static/css/tailwind-input.css under the "RED HAT — Design System components" section. Source : Red Hat Design System, ux.redhat.com/tokens/color (global color tokens). Every scale value below was cross-checked against that page with Playwright (Oct 2026). Also measured on redhat.com: text #151515 / #4d4d4d (on dark #fff / #c7c7c7), footer #1f1f1f, pill buttons, Red Hat Display headings at weight 400-500. Links are deliberately red (not redhat.com's blue) so the pages never show another hue. HOW TO ADD A NEW RED HAT PRODUCT 1. Add a theme block `.rh-theme-` in section 6 below (accent-2 + hero). 2. Create the template extending products/redhat/_rh_layout.html with `theme: ''` in its `rh` config (see redhat_enterprise_linux.html). 3. No component CSS is needed unless the page introduces a new layout. NEVER hard-code a hex value in .rh-* component rules; use a token from here. ============================================================================= */ /* --------------------------------------------------------------------------- 1. FONTS — Red Hat Display (headings) + Red Hat Text (body). SIL OFL 1.1. Self-hosted variable fonts (latin subset), see app/static/fonts/red-hat/. --------------------------------------------------------------------------- */ @font-face { font-family: 'Red Hat Display'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/red-hat/RedHatDisplay-Variable.woff2') format('woff2'); } @font-face { font-family: 'Red Hat Text'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/red-hat/RedHatText-Variable.woff2') format('woff2'); } :root { /* ------------------------------------------------------------------------- 2. BRAND RED SCALE ------------------------------------------------------------------------- */ --rh-red-10: #fce3e3; --rh-red-20: #fbc5c5; --rh-red-30: #f9a8a8; --rh-red-40: #f56e6e; /* Brand red for SMALL TEXT on dark (7.0:1 on #151515) */ --rh-red-50: #ee0000; /* RED HAT RED — logo, buttons, large text, accents */ --rh-red-60: #a60000; /* Brand red for TEXT on light (8.3:1 on white), hover */ --rh-red-70: #5f0000; /* Deep red — gradient anchor */ /* ------------------------------------------------------------------------- 3. NEUTRAL SCALE (Red Hat "black" is #151515, never pure #000) ------------------------------------------------------------------------- */ --rh-gray-10: #f2f2f2; /* Alt section background */ --rh-gray-20: #e0e0e0; /* Hairlines / card borders on light */ --rh-gray-30: #c7c7c7; --rh-gray-40: #a3a3a3; --rh-gray-50: #707070; --rh-gray-60: #4d4d4d; /* Muted text on light (8.4:1 on white) */ --rh-gray-70: #383838; --rh-gray-80: #292929; --rh-gray-90: #1f1f1f; /* Secondary dark surface */ --rh-gray-95: #151515; /* Primary dark surface / headings on light */ --rh-white: #ffffff; /* ------------------------------------------------------------------------- 4. PALETTE RULE — Red Hat pages use ONLY the red scale + neutrals. No blue/teal/purple/green/orange tokens exist on purpose: other hues belong to other brands (Microsoft pages own the blue palette). Guarded by tests/test_brand_palettes.py. ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- 5a. SEMANTIC TOKENS — what components actually consume ------------------------------------------------------------------------- */ /* Brand */ --rh-brand: var(--rh-red-50); --rh-brand-hover: var(--rh-red-60); --rh-brand-deep: var(--rh-red-70); --rh-brand-tint: var(--rh-red-10); --rh-brand-on-dark: var(--rh-red-40); --rh-brand-text: var(--rh-red-60); /* Links stay in the brand red family (AA on light / on dark) */ --rh-link: var(--rh-red-60); --rh-link-on-dark: var(--rh-red-40); /* Surfaces */ --rh-surface-light: var(--rh-white); --rh-surface-alt: var(--rh-gray-10); --rh-surface-dark: var(--rh-gray-95); --rh-surface-dark-2: var(--rh-gray-90); /* Text */ --rh-text-heading: var(--rh-gray-95); --rh-text-body: var(--rh-gray-70); --rh-text-muted: var(--rh-gray-60); --rh-text-on-dark: var(--rh-white); --rh-text-on-dark-muted: rgba(255, 255, 255, 0.74); /* 9.6:1 on #151515 */ /* Borders */ --rh-border-light: var(--rh-gray-20); --rh-border-strong: var(--rh-gray-30); --rh-border-on-dark: rgba(255, 255, 255, 0.14); /* Gradients */ --rh-gradient-hero: linear-gradient(135deg, #151515 0%, #1f1f1f 55%, #5f0000 100%); --rh-gradient-cta: linear-gradient(110deg, #5f0000 0%, #a60000 55%, #ee0000 100%); --rh-gradient-dark: linear-gradient(180deg, #151515 0%, #1f1f1f 100%); /* Typography */ --rh-font-display: 'Red Hat Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --rh-font-text: 'Red Hat Text', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Shape & motion */ --rh-radius-sm: 4px; --rh-radius-md: 8px; --rh-radius-lg: 16px; /* Cards (redhat.com uses ~16px on dark cards) */ --rh-radius-pill: 999px; --rh-shadow-card: 0 1px 2px rgba(21, 21, 21, 0.06), 0 8px 24px rgba(21, 21, 21, 0.06); --rh-shadow-card-hover: 0 2px 4px rgba(21, 21, 21, 0.08), 0 20px 40px rgba(21, 21, 21, 0.14); --rh-ease: 0.3s ease; /* ------------------------------------------------------------------------- 5b. THEME HOOKS — defaults (overridden by .rh-theme-* below) ------------------------------------------------------------------------- */ --rh-accent: var(--rh-brand); /* Primary highlight (always brand red) */ --rh-accent-2: var(--rh-brand); /* Secondary hue: orbit rings, icons, glow */ --rh-hero-bg: var(--rh-gradient-hero); --rh-hero-glow: rgba(238, 0, 0, 0.28); --rh-hero-glow-2: rgba(238, 0, 0, 0.12); } /* ============================================================================= 6. PRODUCT THEMES — one block per Red Hat product / sub-brand Apply on the page wrapper (`.rh-page.rh-theme-`) or on any element that should adopt the accent (e.g. a layer in the brand portfolio stack). ============================================================================= */ /* Red Hat Enterprise Linux — the red core of the portfolio */ .rh-theme-rhel { --rh-accent-2: var(--rh-red-50); --rh-hero-bg: linear-gradient(135deg, #151515 0%, #1f1f1f 55%, #5f0000 100%); --rh-hero-glow: rgba(238, 0, 0, 0.30); --rh-hero-glow-2: rgba(245, 110, 110, 0.10); } /* Red Hat OpenShift — red family only (lighter red as secondary) */ .rh-theme-ocp { --rh-accent-2: var(--rh-red-40); --rh-hero-bg: linear-gradient(135deg, #151515 0%, #1f1f1f 50%, #7a0000 100%); --rh-hero-glow: rgba(238, 0, 0, 0.26); --rh-hero-glow-2: rgba(245, 110, 110, 0.16); } /* Red Hat Ansible Automation Platform — red family only */ .rh-theme-aap { --rh-accent-2: var(--rh-red-30); --rh-hero-bg: linear-gradient(135deg, #151515 0%, #1f1f1f 50%, #5f0000 100%); --rh-hero-glow: rgba(238, 0, 0, 0.26); --rh-hero-glow-2: rgba(249, 168, 168, 0.14); } /* Red Hat AI — red family only (deeper red hero) */ .rh-theme-rhai { --rh-accent-2: var(--rh-red-20); --rh-hero-bg: linear-gradient(135deg, #151515 0%, #1f1f1f 50%, #a60000 130%); --rh-hero-glow: rgba(238, 0, 0, 0.30); --rh-hero-glow-2: rgba(251, 197, 197, 0.14); } /* Red Hat brand landing page */ .rh-theme-brand { --rh-accent-2: var(--rh-red-40); --rh-hero-bg: linear-gradient(135deg, #151515 0%, #1f1f1f 45%, #a60000 140%); --rh-hero-glow: rgba(238, 0, 0, 0.34); --rh-hero-glow-2: rgba(245, 110, 110, 0.12); }