/* =================================== Watchum design system — tokens (CCTV Brutalism) =================================== */ /* ── Fonts: Archivo Black (display) + JetBrains Mono (body/UI) ── */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@300;400;500;700&display=swap'); :root { /* ===== Core palette — CCTV Brutalism ===== */ --core-black: #000000; --core-bg: #0a0a0f; /* page background — near black */ --core-card: #161620; /* card / surface */ --core-elevated: #1c1c2a; /* elevated card */ --core-border: #2a2a38; /* hairlines, dividers */ --core-primary: #2244cc; /* electric ultramarine — CTAs, accents, glows */ --core-primary-hi: #3355dd; /* primary hover */ --core-primary-lo: #1a36a8; /* primary pressed */ --core-foreground: #f5f5f8; /* primary text */ --core-muted: #888898; /* secondary text */ --core-ember: #d05530; /* destructive / thermal accent */ --white: #ffffff; --white-80: rgba(245, 245, 248, 0.80); --white-60: rgba(245, 245, 248, 0.60); /* ===== Severity (functional metadata only) ===== */ --severity-high: #ef4444; --severity-med: #f59e0b; --severity-low: #22c55e; /* ===== Semantic aliases (variable NAMES preserved so existing components inherit) ===== */ --bg-app: var(--core-bg); --bg-card: var(--core-card); --bg-elevated: var(--core-elevated); --bg-hover: var(--core-elevated); --interactive-primary: var(--core-primary); --interactive-primary-hover: var(--core-primary-hi); --interactive-primary-pressed: var(--core-primary-lo); --accent: var(--core-primary); --accent-soft: rgba(34, 68, 204, 0.45); --border-default: var(--core-border); --text-primary: var(--core-foreground); --text-secondary: var(--white-80); --text-muted: var(--core-muted); /* ===== Spacing — 4pt grid (unchanged) ===== */ --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; /* ===== Radius — 0px everywhere (CCTV Brutalism) ===== */ --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; /* ===== Shadows ===== */ --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-glow: 0 0 24px rgba(34, 68, 204, 0.35); /* ===== Type ===== */ --font-display: "Archivo Black", "Arial Black", system-ui, sans-serif; --font-body: "JetBrains Mono", ui-monospace, monospace; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* ===== Layout ===== */ --container-max: 1200px; --container-margin-d: 24px; --container-margin-t: 20px; --container-margin-m: 16px; } /* ===== Global base ===== */ html { background: var(--core-black); min-height: 100%; } body { margin: 0; padding: 0; background: var(--core-bg); color: var(--text-primary); font-family: var(--font-body); font-size: 15px; line-height: 1.55; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: border-box; } /* ===== Type scale ===== */ .t-display { font-family: var(--font-display); font-weight: 400; font-size: 64px; letter-spacing: -0.02em; line-height: 0.95; text-transform: uppercase; } .t-h1 { font-family: var(--font-display); font-weight: 400; font-size: 44px; letter-spacing: -0.01em; line-height: 1.05; text-transform: uppercase; } .t-h2 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.1; text-transform: uppercase; } .t-h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.2; text-transform: uppercase; } .t-body-l { font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.55; } .t-body { font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.55; } .t-caption { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 1.4; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; } .t-cap-uc { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } /* ===== CCTV Brutalism utility classes ===== */ /* Repeating CRT scanline overlay — pair on a position:relative parent */ .scanlines { position: relative; } .scanlines::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 180deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.18) 2px, rgba(0, 0, 0, 0.18) 3px ); mix-blend-mode: multiply; z-index: 1; } /* 48px grid background — page-wide ambient pattern */ .grid-bg { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 48px 48px; } /* Primary-colored text shadow */ .text-glow { text-shadow: 0 0 12px rgba(34, 68, 204, 0.55), 0 0 32px rgba(34, 68, 204, 0.35); } /* Subtle CRT flicker animation */ @keyframes flicker { 0%, 100% { opacity: 1; } 9% { opacity: 0.94; } 10% { opacity: 1; } 63% { opacity: 0.97; } 64% { opacity: 1; } 72% { opacity: 0.92; } 73% { opacity: 1; } } .flicker { animation: flicker 4.6s infinite; } /* Horizontal scan line sweeping 8s loop */ @keyframes scan-sweep { 0% { transform: translateY(-100%); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } .scan-sweep { animation: scan-sweep 8s linear infinite; } /* Blinking caret appended via ::after */ @keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .caret::after { content: "_"; margin-left: 0.05em; color: var(--accent); animation: caret-blink 1s steps(1) infinite; } /* Convenience: switch to display font */ .font-display { font-family: var(--font-display); text-transform: uppercase; } .font-mono { font-family: var(--font-mono); }