/* ============================================================================= Pulse Design Tokens Load this stylesheet FIRST in every layout . Namespace: --pulse-* only. Never redefines --auth-*, --admin-*, --pulse-profile-*. ============================================================================= */ /* --------------------------------------------------------------------------- Country flags for the language switcher. Flags are Unicode regional-indicator pairs, not icons — the app ships no icon font, only the inline SVG paths in pulse-icons.js. Windows has no flag glyphs in Segoe UI Emoji, so a browser there draws the two letters ("DE") instead; this self-hosted subset (Twemoji, flags only, 76 KB) is what makes them render. Listed first in the family so it wins for those code points, with the system emoji fonts after it for anything else that lands in a .pulse-flag span. --------------------------------------------------------------------------- */ @font-face { font-family: 'Twemoji Country Flags'; src: url('../fonts/TwemojiCountryFlags.woff2') format('woff2'); font-display: swap; /* Regional-indicator letters only. The globe fallback is left to the system emoji font, so a page showing nothing but globes never downloads this file. */ unicode-range: U+1F1E6-1F1FF; } .pulse-flag { font-family: 'Twemoji Country Flags', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: 1.1em; line-height: 1; } /* --------------------------------------------------------------------------- Light mode (default) --------------------------------------------------------------------------- */ :root { /* Surfaces */ --pulse-surface-base: #f1f5f8; --pulse-surface-card: #ffffff; --pulse-surface-raised: #ffffff; --pulse-surface-overlay: rgba(255, 255, 255, 0.92); /* Text */ --pulse-text-primary: #1c2b33; --pulse-text-secondary: #67788a; --pulse-text-muted: #9ca3af; --pulse-text-inverse: #ffffff; /* Borders */ --pulse-border-default: #e5e7eb; --pulse-border-strong: #d1d5db; --pulse-border-subtle: rgba(15, 23, 42, 0.07); /* Sidebar (stays dark in both modes — brand identity element) */ --pulse-sidebar-bg-from: #182741; --pulse-sidebar-bg-to: #223350; --pulse-sidebar-text: rgba(248, 250, 252, 0.88); --pulse-sidebar-text-dim: rgba(248, 250, 252, 0.55); --pulse-sidebar-hover-bg: rgba(255, 255, 255, 0.12); --pulse-sidebar-active-text: #ffffff; /* Brand */ --pulse-brand-primary: #2563eb; --pulse-brand-accent: #ff6900; --pulse-brand-primary-muted: rgba(37, 99, 235, 0.12); /* State colours (semantic) */ --pulse-success-bg: #dcfce7; --pulse-success-text: #166534; --pulse-error-bg: #fee2e2; --pulse-error-text: #991b1b; --pulse-warning-bg: #fef3c7; --pulse-warning-text: #92400e; --pulse-info-bg: #dbeafe; --pulse-info-text: #1d4ed8; /* Input */ --pulse-input-bg: #ffffff; --pulse-input-border: #cbd5e1; --pulse-input-text: #1f2937; /* Shadows */ --pulse-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --pulse-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08); --pulse-shadow-lg: 0 25px 80px rgba(15, 23, 42, 0.14); /* Font scale */ --pulse-font-size-base: 14px; /* Image accessibility */ --pulse-img-opacity: 1; /* Smooth transitions on theme switch */ --pulse-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* --------------------------------------------------------------------------- Dark mode --------------------------------------------------------------------------- */ :root[data-theme="dark"] { /* Surfaces */ --pulse-surface-base: #0f1117; --pulse-surface-card: #1a1f2e; --pulse-surface-raised: #252b3b; --pulse-surface-overlay: rgba(26, 31, 46, 0.95); /* Text */ --pulse-text-primary: #f1f5f9; --pulse-text-secondary: #94a3b8; --pulse-text-muted: #64748b; /* Borders */ --pulse-border-default: #2d3748; --pulse-border-strong: #4a5568; --pulse-border-subtle: rgba(255, 255, 255, 0.07); /* Sidebar (slightly deeper in dark mode) */ --pulse-sidebar-bg-from: #090d18; --pulse-sidebar-bg-to: #0e1525; /* Brand (lighter blue for dark backgrounds) */ --pulse-brand-primary: #3b82f6; --pulse-brand-primary-muted: rgba(59, 130, 246, 0.15); /* State colours — dark-mode adjusted */ --pulse-success-bg: rgba(22, 101, 52, 0.25); --pulse-success-text: #86efac; --pulse-error-bg: rgba(153, 27, 27, 0.25); --pulse-error-text: #fca5a5; --pulse-warning-bg: rgba(146, 64, 14, 0.25); --pulse-warning-text: #fcd34d; --pulse-info-bg: rgba(29, 78, 216, 0.2); --pulse-info-text: #93c5fd; /* Input */ --pulse-input-bg: #1e2536; --pulse-input-border: #374151; --pulse-input-text: #f1f5f9; /* Shadows (subtler on dark backgrounds) */ --pulse-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --pulse-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35); --pulse-shadow-lg: 0 25px 80px rgba(0, 0, 0, 0.5); } /* --------------------------------------------------------------------------- Font size scale --------------------------------------------------------------------------- */ :root[data-font-size="sm"] { --pulse-font-size-base: 12px; } /* default (md) = 14px — no attribute set */ :root[data-font-size="lg"] { --pulse-font-size-base: 16px; } :root[data-font-size="xl"] { --pulse-font-size-base: 18px; } /* --------------------------------------------------------------------------- Color contrast modes --------------------------------------------------------------------------- */ :root[data-contrast="high"] { --pulse-text-primary: #000000; --pulse-text-secondary: #1f2937; --pulse-border-default: #6b7280; --pulse-border-strong: #374151; } :root[data-theme="dark"][data-contrast="high"] { --pulse-text-primary: #ffffff; --pulse-text-secondary: #e2e8f0; --pulse-border-default: #94a3b8; --pulse-border-strong: #cbd5e1; } :root[data-contrast="warm"] { --pulse-surface-base: #fdf8f0; --pulse-surface-card: #fffdf8; --pulse-surface-raised: #fffdf8; --pulse-text-primary: #2d1f0e; --pulse-text-secondary: #6b5344; --pulse-border-default: #e8d5c0; } :root[data-theme="dark"][data-contrast="warm"] { --pulse-surface-base: #1a1308; --pulse-surface-card: #231a0d; --pulse-surface-raised: #2d2210; --pulse-text-primary: #f5e6d0; --pulse-text-secondary: #c9a87a; } /* --------------------------------------------------------------------------- Image accessibility --------------------------------------------------------------------------- */ :root[data-images="dim"] { --pulse-img-opacity: 0.35; } /* All images respect the opacity token */ img { opacity: var(--pulse-img-opacity); transition: opacity 0.3s ease; } /* Brand logos and protected images always show at full opacity */ img.pulse-keep-visible, .pulse-keep-visible img { opacity: 1 !important; } /* Background-image sections also dim */ [data-images="dim"] .meta-auth-visual, [data-images="dim"] .public-auth-panel, [data-images="dim"] [style*="background-image"] { opacity: 0.55; } /* Hide images (visibility so layout is preserved) */ [data-images="hide"] img:not(.pulse-keep-visible) { visibility: hidden; } [data-images="hide"] .meta-auth-visual, [data-images="hide"] [style*="background-image"]:not(.pulse-keep-visible) { visibility: hidden; }