/* ============================================================ SYSTMS design tokens — systms_timeslice Locked from Website 2.0 (systms_website/styles.css) and FLDS v2 (systms_flds/app/flds.css). Both ship the SAME system; these values are verified against both (June 2026 audit). NOTE: accent red is #FF2D1E (current), NOT the older #FE0000. ============================================================ */ :root { /* ── Color ── */ --bg: #0A0A0A; /* page background */ --panel: #101010; /* cards / raised surfaces */ --panel-2: #141414; /* insets, media wells, inputs (slider track wells) */ --line: #1F1F1F; /* hairline dividers */ --line-2: #2A2A2A; /* stronger borders, control outlines */ --text: #F2F0EB; /* primary text — warm off-white, NEVER pure #FFF */ --muted: #8A8A88; /* secondary labels, captions */ --muted-2: #5A5A58; /* tertiary / disabled / fine print */ --accent: #FF2D1E; /* THE red — CTAs, active states, scan line, dot */ --accent-ink: #FFFFFF; /* text/content on red fills */ --accent-soft: rgba(255, 45, 30, 0.06); /* selected / active surface tint */ --accent-chip: rgba(255, 45, 30, 0.12); /* chip / tag accent */ /* ── Type ── */ --display: 'Archivo', 'Helvetica Neue', 'Arial Black', sans-serif; /* 900 wght, condensed */ --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* ── Layout ── */ --gutter: 28px; --maxw: 1440px; --section-pad: 88px; /* ── Radius ── */ --radius: 6px; /* media frames; glass tags use 4px */ } /* Font loading — put in : */ /* ── Display headline ── Archivo, always 900, condensed. Tight negative tracking. */ .display { font-family: var(--display); font-weight: 900; font-variation-settings: 'wght' 900, 'wdth' 68; font-stretch: 68%; letter-spacing: -0.03em; /* -0.03em … -0.045em */ line-height: 0.92; /* 0.86 for big numerals */ } /* ── Eyebrow (section label) ── */ .eyebrow { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); } .eyebrow .line { width: 60px; height: 1px; background: var(--accent); flex: none; } /* ── Signature dot suffix (ONE headline per view max) ── */ .u-dot::after { content: ""; display: inline-block; width: 0.20em; height: 0.20em; border-radius: 50%; background: var(--accent); margin-left: 0.06em; vertical-align: baseline; } /* ── Glass tag (technical label over media / on controls) ── */ .glass-tag { background: rgba(10,10,10,0.7); border: 1px solid var(--line); border-radius: 4px; backdrop-filter: blur(4px); padding: 5px 8px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .glass-tag.accent { background: var(--accent); color: #fff; border-color: var(--accent); } /* Nav / full-screen scrim */ .glass-scrim { backdrop-filter: blur(10px); background: rgba(10,10,10,0.82); } /* ── Mono body / labels ── */ body { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--text); background: var(--bg); } .label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 500; color: var(--muted); } /* ── Motion conventions ── colors/borders: .2s ease | press: translateY(1px) over .12s reveal: opacity+translateY(18px) over .7s ease primary hover: filter brightness(1.08) ALWAYS gate infinite animations behind prefers-reduced-motion. */ /* ::selection */ ::selection { background: var(--accent); color: #fff; }