/* ============================================================================ ULF — SHARED FOUNDATION ---------------------------------------------------------------------------- The same palette, type and rhythm as the Personnel Security console, so the two read as one organisation's work. What is shared: the black-and-white discipline, the type stack, the tracking scale, the motion timing, the sun. What is NOT shared, deliberately: the console's apparatus. No handling banners, no classification strips, no hatched "sealed compartment" states. Those exist to tell an investigator what they are holding and what may be done with it. On a public site that visitors read to learn about the party and to join it, the same furniture would announce RESTRICTED ACCESS to someone who came to volunteer — which is both wrong and unwelcoming. The site's original variable names are aliased at the bottom rather than renamed throughout, so the whole existing stylesheet adopts this foundation without a thousand edits, each of which would be a chance to break something. ============================================================================ */ :root { /* ---- Surfaces ---------------------------------------------------------- */ /* Pure black, from the flag. Not "nearly black": the console is #000000 and a public page at #0A0A0A beside it looks like a mistake rather than a choice, especially on an OLED screen where the difference is a visible grey wash. */ --c-canvas: #000000; --c-panel: #0A0A0A; --c-card: #0F0F0F; --c-raised: #161616; --c-overlay: rgba(0, 0, 0, 0.88); /* ---- Division ---------------------------------------------------------- */ --c-line: #242424; --c-line-soft: #171717; --c-line-strong: #3D3D3D; --c-line-hard: #FFFFFF; /* ---- Ink --------------------------------------------------------------- */ --c-ink: #FFFFFF; --c-ink-2: #B8B8B8; --c-ink-3: #7A7A7A; --c-ink-4: #4D4D4D; --c-ink-5: #2E2E2E; --c-ink-invert: #000000; --c-accent: #FFFFFF; --c-accent-wash: rgba(255, 255, 255, 0.07); --c-accent-line: rgba(255, 255, 255, 0.34); /* ---- State, without hue ------------------------------------------------ There is no red, green or amber anywhere in this system, and that is not an aesthetic preference. State is carried by weight, inversion and rule thickness, which survive a monochrome screen, a photocopy, a projector with a dead channel, and the roughly one man in twelve who cannot reliably separate red from green. Colour on top of those signals is decoration; colour instead of them is a single point of failure. */ --c-ok: #FFFFFF; --c-ok-wash: rgba(255, 255, 255, 0.09); --c-warn: #B8B8B8; --c-warn-wash: rgba(255, 255, 255, 0.05); --c-alert: #FFFFFF; --c-alert-wash: rgba(255, 255, 255, 0.11); --hatch: repeating-linear-gradient( 45deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 6px); /* ---- Type -------------------------------------------------------------- */ /* One family, worked hard. The console's monumentality comes from weight and tracking rather than from a display face, and a second face here would be the most visible way for the two to stop matching. Tajawal stays for Arabic, where the Latin stack has nothing to offer. */ --f-ui: "Helvetica Neue", Helvetica, Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --f-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; --f-doc: "Times New Roman", Times, ui-serif, Georgia, serif; --f-ar: "Tajawal", "Cairo", "Amiri", var(--f-ui); --t-micro: 10px; --t-tiny: 11px; --t-small: 12px; --t-base: 13px; --t-body: 14px; --t-lg: 17px; --t-xl: 22px; --t-2xl: 30px; --t-3xl: 46px; --t-4xl: 72px; --lh-tight: 1.15; --lh-base: 1.5; --lh-read: 1.7; --ls-caps: 0.14em; --ls-wide: 0.26em; --ls-vast: 0.42em; --ls-mono: 0.02em; --w-normal: 400; --w-medium: 500; --w-bold: 700; --w-black: 800; /* ---- Rhythm ------------------------------------------------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---- Motion ------------------------------------------------------------ */ /* Mechanical, not playful: things arrive squarely and stop. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 420ms; /* ========================================================================== Aliases for the names this site already uses. Every rule below in theme.css, admin.css, animations.css and rtl.css keeps working and inherits the foundation above. ========================================================================== */ --bg: var(--c-canvas); --bg-2: var(--c-panel); --bg-3: var(--c-card); --panel: var(--c-panel); --panel-2: var(--c-card); --text: var(--c-ink); --muted: var(--c-ink-2); --dim: var(--c-ink-3); --border: var(--c-line-soft); --border-2: var(--c-line); --accent: var(--c-accent); /* The three state colours the site used. Kept as names so nothing breaks, pointed at the monochrome values so nothing is coloured. */ --error: var(--c-alert); --success: var(--c-ok); --warn: var(--c-warn); --serif: var(--f-ui); --sans: var(--f-ui); --arabic: var(--f-ar); --container: 1240px; --gap: var(--s-5); --t-fast: var(--dur-fast) var(--ease); --t-slow: var(--dur-slow) var(--ease); } /* Arabic and any other RTL script gets the face that can render it. */ [lang="ar"], [dir="rtl"] { --f-ui: var(--f-ar); } /* Someone who has asked their system to reduce motion has asked for it here too. The entry animations are ornament; the content is the point. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }