/* ============================================================ Little Cloud — Design Tokens ------------------------------------------------------------ A brand token layer that sits ON TOP of the Silicon theme (the --si-* custom properties in theme.css). It is loaded site-wide AFTER theme.min.css so it can both define new brand tokens (--lc-*) and re-point selected --si-* theme variables at them, letting the whole template inherit brand intent without editing the compiled theme. Hierarchy: Layer 1 Primitives — raw brand values (no meaning) Layer 2 Semantic — purpose ("brand", "surface", "text") Layer 3 Component — specific usage ("wordmark", "btn") Naming: --lc---, kebab-case. Dark mode: the theme toggle adds `.dark-mode` to ; semantic surface/text tokens reference --si-* vars, which the theme already flips, so they follow automatically. ============================================================ */ /* ---------- Layer 1: Primitive tokens (raw values) ---------- */ :root { /* Accent blue ramp — aligned with the littlecloud-portal palette */ --lc-blue-50: #eff8ff; --lc-blue-100: #dff0ff; --lc-blue-200: #b8e3ff; --lc-blue-300: #78cfff; --lc-blue-400: #30b5ff; --lc-blue-500: #1e90ff; /* core brand */ --lc-blue-600: #0077e6; --lc-blue-700: #005eb8; /* white text ~5.3:1 — WCAG AA */ --lc-blue-800: #005096; --lc-blue-900: #00437c; --lc-blue-950: #002a52; --lc-cyan-400: #30b8e2; /* secondary accent */ /* Deep-navy ramp — brand dark surfaces (portal #080032) */ --lc-navy-500: #3f357a; --lc-navy-700: #1c174a; --lc-navy-800: #0f0c32; --lc-navy-900: #080032; --lc-navy-950: #04001a; /* Slate-purple ramp — neutral (portal primary; 500 == --si-body-color) */ --lc-slate-300: #a9abbe; --lc-slate-500: #565973; --lc-slate-700: #3a3c4e; --lc-slate-900: #2c2e3a; /* Brand neutrals */ --lc-ink-900: #0b0f19; --lc-white: #ffffff; /* Typography */ --lc-font-display: "Black Echo", var(--si-font-sans-serif); --lc-font-sans: var(--si-font-sans-serif); --lc-font-size-wordmark-primary: 1.75rem; --lc-font-size-wordmark-secondary: 1.25rem; --lc-tracking-wordmark: 0.02em; --lc-tracking-wordmark-tt: -0.04em; /* Spacing scale (brand rhythm) */ --lc-space-1: 0.25rem; --lc-space-2: 0.5rem; --lc-space-3: 1rem; --lc-space-4: 1.5rem; --lc-space-5: 3rem; --lc-space-6: 5rem; /* Layout primitives */ --lc-navbar-height: 4.5rem; /* Radius / shadow — alias the theme's scale so we stay consistent */ --lc-radius-sm: var(--si-border-radius-sm); --lc-radius-md: var(--si-border-radius); --lc-radius-lg: var(--si-border-radius-lg); --lc-shadow-lg: var(--si-box-shadow-lg); } /* ---------- Layer 2: Semantic tokens (purpose) ---------- */ :root { /* Brand intent */ --lc-color-brand: var(--lc-blue-500); --lc-color-brand-hover: var(--lc-blue-600); --lc-color-brand-active: var(--lc-blue-700); --lc-color-accent: var(--lc-cyan-400); --lc-color-on-brand: var(--lc-white); /* Surfaces & text — reference --si-* so dark mode flows through */ --lc-color-surface: var(--si-body-bg); --lc-color-surface-elevated: var(--si-secondary-bg); --lc-color-text: var(--si-body-color); --lc-color-text-muted: var(--si-secondary-color); --lc-color-heading: var(--si-heading-color); --lc-color-border: var(--si-border-color); /* On-dark (content over hero imagery) */ --lc-color-on-dark: var(--lc-white); --lc-color-overlay: rgba(11, 15, 25, 0.5); /* --lc-ink-900 @ 50% */ /* Wire the Silicon theme to brand intent so components cascade */ --si-primary: var(--lc-color-brand); --si-link-color: var(--lc-color-brand); --si-focus-ring-color: rgba(30, 144, 255, 0.25); } /* ---------- Layer 3: Component tokens (specific usage) ---------- */ :root { /* Primary button — AA-safe on-ramp blue (white text ≥5:1) */ --lc-btn-primary-bg: var(--lc-blue-700); --lc-btn-primary-bg-hover: var(--lc-blue-800); --lc-btn-primary-text: var(--lc-color-on-brand); /* Wordmark ("Little Cloud") */ --lc-wordmark-gap: var(--lc-space-1); --lc-wordmark-little-font: var(--lc-font-display); --lc-wordmark-little-size: var(--lc-font-size-wordmark-primary); --lc-wordmark-little-tracking: var(--lc-tracking-wordmark); --lc-wordmark-cloud-color: var(--lc-color-brand); --lc-wordmark-cloud-size: var(--lc-font-size-wordmark-secondary); --lc-wordmark-cloud-weight: 700; /* Brand link ("a Little group company") */ --lc-brandlink-color: inherit; --lc-brandlink-color-hover: var(--lc-color-accent); /* Section offset to clear the fixed navbar */ --lc-section-top-offset: var(--lc-space-6); } /* ---------- Dark mode: semantic overrides ---------- */ /* Surface/text tokens already follow --si-* (flipped by the theme). Only tokens that need a *different* value in dark mode live here. */ .dark-mode, [data-bs-theme="dark"] { --lc-color-overlay: rgba(0, 0, 0, 0.6); } /* ============================================================ Component implementations (token-driven) ============================================================ */ /* ---------- Brand display font ---------- Declared here (in ) so the wordmark renders with the brand face on every page, independent of footer load order. */ @font-face { font-family: "Black Echo"; src: url("/assets/fonts/BlackEcho.woff") format("woff"), url("/assets/fonts/BlackEcho.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } /* ---------- Wordmark component ---------- Markup: Little Cloud */ .lc-wordmark { display: flex; align-items: center; gap: var(--lc-wordmark-gap); } .lc-wordmark__little { font-family: var(--lc-wordmark-little-font); font-weight: normal; font-size: var(--lc-wordmark-little-size); letter-spacing: var(--lc-wordmark-little-tracking); line-height: 1; } .lc-wordmark__tt { letter-spacing: var(--lc-tracking-wordmark-tt); } .lc-wordmark__cloud { color: var(--lc-wordmark-cloud-color); font-weight: var(--lc-wordmark-cloud-weight); font-size: var(--lc-wordmark-cloud-size); line-height: 1; } /* ---------- Primary button (brand, WCAG AA on white) ---------- */ .btn-primary { background-color: var(--lc-btn-primary-bg) !important; border-color: var(--lc-btn-primary-bg) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:focus-visible { background-color: var(--lc-btn-primary-bg-hover) !important; border-color: var(--lc-btn-primary-bg-hover) !important; } .btn-primary, .btn-primary .btn-text { color: var(--lc-btn-primary-text) !important; } /* ---------- Outline button (AA-contrast brand text on white) ---------- */ .btn-outline-primary { color: var(--lc-blue-700) !important; border-color: var(--lc-blue-700) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary:focus-visible { background-color: var(--lc-blue-700) !important; border-color: var(--lc-blue-700) !important; color: #fff !important; } /* ---------- Brand link ---------- */ .little-group-link { font-family: var(--lc-font-display), sans-serif; font-size: 1.6em; line-height: 1; color: var(--lc-brandlink-color); text-decoration: none; transition: color 0.2s ease; } .little-group-link:hover { color: var(--lc-brandlink-color-hover); } /* ---------- Section offset utility (clears the fixed navbar) ---------- */ .lc-section-top { margin-top: var(--lc-section-top-offset); }