/** * Digicel design tokens — adopted from the design handoff * (design_handoff_digicel_international/design-reference/design-system/colors_and_type.css). * * Two deliberate changes from the source sheet: * 1. The `@import` of fonts.css is dropped — fonts are attached as a Drupal * library instead (a CSS @import would block rendering). * 2. The semantic text styles (.h1, .body, .caption, …) and the `html` base * rule are scoped under `.dc-homepage` in typography.css, so they cannot * leak into the rest of the site (admin pages, the topup flow still in * production) through bootstrap_barrio's cascade. * * The brand sanctions exactly FOUR colours (+ white/black). Never introduce a * new hex here: UI states come from opacity of the brand colours. */ :root { /* ---------- BRAND COLOURS (the entire palette) ---------- */ /* Master — Digicel Red RGB 228 / 0 / 43 CMYK 0 / 100 / 90 / 0 Pantone 185C */ --digicel-red: #E4002B; /* Alt 1 — Digicel Light Grey (light backgrounds) RGB 250 / 250 / 250 CMYK 1 / 1 / 1 / 0 Pantone 663C */ --digicel-light-grey: #FAFAFA; /* Alt 2 — Digicel Dark Grey (sub-text where red doesn't work) RGB 109 / 110 / 112 CMYK 0 / 0 / 0 / 70 Pantone 424C */ --digicel-dark-grey: #6D6E70; /* Alt 3 — Digicel Blue (accent colour pop) RGB 44 / 45 / 103 CMYK 98 / 95 / 29 / 19 Pantone 534C */ --digicel-blue: #2C2D67; /* Monochrome — logo reproduction only (brand guidelines p. 12) */ --digicel-white: #FFFFFF; --digicel-black: #000000; /* ---------- SEMANTIC ROLE TOKENS ---------- Every role token resolves to one of the four brand colours. UI states use the alpha helpers below, not new hex values. */ --fg-primary: var(--digicel-dark-grey); /* Body copy. Brand uses Dark Grey for "sub text where red does not work" — i.e. anywhere the hero red is too loud. */ --fg-on-red: var(--digicel-white); --fg-on-blue: var(--digicel-white); --fg-on-dark: var(--digicel-white); --fg-accent: var(--digicel-red); /* Headlines, key callouts */ --fg-secondary: var(--digicel-blue); /* Sparing accent pops */ --bg-canvas: var(--digicel-white); /* Primary canvas */ --bg-surface: var(--digicel-light-grey); /* Subtle surface */ /* Brand strokes - The only explicit stroke the brand defines is the 2px Digicel Red stroke around white offer boxes (p. 29). All other separators are intentional uses of Dark Grey at reduced opacity. */ --stroke-offer: 2px solid var(--digicel-red); --border-subtle: #E8E8E9; /* Dark Grey 16% — dividers */ --border-default: #C5C6C7; /* Dark Grey 40% — input rest */ --border-strong: var(--digicel-dark-grey); /* Dark Grey 100% — focus rings */ /* ---------- PHOTOGRAPHY PROTECTION GRADIENTS ---------- Per brand p. 33–34: when offers / lockups sit over complex photography, apply a 100% → 0% black or white gradient overlay to restore contrast. Always at full strength at the anchored edge, fading completely to transparent. */ --overlay-dark: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); --overlay-light: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* ---------- TYPOGRAPHY FAMILIES ---------- */ --font-brand: "Hurme Geometric Sans 2", "Arial", "Helvetica", system-ui, -apple-system, sans-serif; --font-display: "Hurme Geometric Sans 2", "Arial Black", "Arial", sans-serif; --font-fallback: "Arial", "Helvetica", system-ui, sans-serif; /* PowerPoint, Word, email — brand p. 19 */ --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---------- WEIGHTS (brand p. 17) ---------- Headlines → Black (900) Subheads / Body / CTA → Bold (700) Fine detail → SemiBold (600) */ --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* ---------- TYPE SCALE ---------- */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 40px; --text-4xl: 56px; --text-5xl: 72px; --text-6xl: 96px; --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.45; --leading-loose: 1.6; /* ---------- TRACKING (brand p. 18) ---------- Hurme tracking values are in 1/1000 em. Headlines → tracking 30 ≈ 0.030em Subhead / Body / CTA → tracking 20 ≈ 0.020em Numbers (headline) → tracking 0 ≈ 0em Numbers (subhead/body) → tracking 00 ≈ -0.010em (very slightly tighter) Numbers tighten back so price / value figures don't develop visible gaps. The brand book draws a small distinction between tracking 0 and tracking 00; keep them as two tokens so the difference is preserved at the type system level. */ --tracking-headline: 0.030em; --tracking-body: 0.020em; --tracking-numbers-display: 0em; /* Headline numbers — brand "tracking 0" */ --tracking-numbers-body: -0.010em; /* Body / subhead numbers — brand "tracking 00" */ /* Back-compat alias. New code should prefer the two split tokens above. */ --tracking-numbers: var(--tracking-numbers-display); /* ---------- SPACING (4px base) ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---------- RADII (rounded rectangle is the brand shape language, p. 28) ---------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; /* default for buttons / inputs */ --radius-lg: 20px; /* offer boxes, cards */ --radius-xl: 28px; /* hero offer tiles */ --radius-2xl: 40px; --radius-pill: 999px; /* ---------- SHADOWS ---------- Brand prefers flat surfaces. Shadows here are minimal, neutral-grey, used sparingly for elevation hints only. */ --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-red: none; /* ---------- STROKES ---------- */ --stroke-thin: 1px; --stroke-default: 1.5px; --stroke-offer-w: 2px; /* Red stroke on white offer boxes */ /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 360ms; /* ---------- LAYOUT ---------- */ --container-narrow: 720px; --container: 1120px; --container-wide: 1320px; }