/* * kyun.si design tokens: "GRID" * * Layer 1 of the framework. Every visual decision lives here as a custom * property; components only ever read tokens. Product sites on *.kyun.si can * import this file on its own to inherit the family look. * * The world is a lit grid at night: near-black void, cyan light, ice-white * type, one orange counter-accent. Dark only, by design. */ @font-face { font-family: "Orbitron"; src: url("../fonts/orbitron.woff2") format("woff2"); font-weight: 400 900; font-display: swap; } @font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; } :root { color-scheme: dark; /* ---- Colour ------------------------------------------------------- */ --void: oklch(0.11 0.014 235); /* page */ --bg-1: oklch(0.15 0.02 230 / 0.78); /* panels (glass) */ --bg-1-solid: oklch(0.15 0.02 230); --bg-2: oklch(0.21 0.03 225 / 0.85); /* hover, selection */ --bg-overlay: oklch(0.06 0.01 235 / 0.8); /* Lines are tinted with the signal: the grid is made of light. */ --line-1: oklch(0.88 0.13 205 / 0.09); --line-2: oklch(0.88 0.13 205 / 0.22); --line-3: oklch(0.88 0.13 205 / 0.5); --fg-1: oklch(0.97 0.02 210); /* ice */ --fg-2: oklch(0.83 0.035 215); --fg-3: oklch(0.7 0.045 220); /* Brand signal: cyan light. Owned by kyun.si, never given to a project. */ --signal: oklch(0.88 0.13 205); --signal-dim: oklch(0.88 0.13 205 / 0.12); --on-signal: oklch(0.14 0.03 230); /* Counter-accent: used rarely (featured marker, alpha state, alerts). */ --flare: oklch(0.76 0.17 55); --flare-dim: oklch(0.76 0.17 55 / 0.14); /* Project accent formula: projects supply only --hue (0-360). */ --accent-l: 0.84; --accent-c: 0.13; --status-live: oklch(0.88 0.17 160); --status-beta: var(--signal); --status-alpha: var(--flare); --status-soon: var(--fg-3); --status-archived: var(--fg-3); --focus: var(--signal); /* ---- Light -------------------------------------------------------- */ /* Glows are layered: a tight core plus a soft halo. Use on text/lines. */ --glow-text: 0 0 6px oklch(0.88 0.13 205 / 0.55), 0 0 22px oklch(0.88 0.13 205 / 0.25); --glow-text-strong: 0 0 4px oklch(0.95 0.08 205 / 0.9), 0 0 14px oklch(0.88 0.13 205 / 0.7), 0 0 42px oklch(0.88 0.13 205 / 0.35); --scanlines: repeating-linear-gradient(180deg, oklch(1 0 0 / 0.028) 0 1px, transparent 1px 3px); /* ---- Type --------------------------------------------------------- */ --font-display: "Orbitron", "Geist", ui-sans-serif, system-ui, sans-serif; --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* System CJK faces (below, per lang). The self-hosted families are Latin subsets, so Chinese glyphs fall through to PingFang / Noto / YaHei. */ --text-2xs: 0.6875rem; /* 11px HUD labels */ --text-xs: 0.75rem; /* 12px data */ --text-sm: 0.875rem; /* 14px */ --text-md: 1rem; /* 16px body */ --text-lg: 1.125rem; /* 18px node title */ --text-xl: clamp(1.25rem, 1rem + 1vw, 1.75rem); /* section titles */ --text-mark: clamp(3rem, 1rem + 6.6vw, 7.25rem); /* hero wordmark */ --leading-tight: 1.05; --leading-snug: 1.3; --leading-body: 1.55; --tracking-display: 0.08em; /* Orbitron caps */ --tracking-mark: 0.14em; --tracking-label: 0.18em; /* mono caps */ /* ---- Space (4px base) -------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; /* ---- Layout ------------------------------------------------------- */ --page-max: 80rem; --page-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); --tile-min: 18rem; --bar-height: 4rem; /* ---- Shape -------------------------------------------------------- */ /* Chamfers instead of radii: cut corners read as machined, not soft. */ --cut: 14px; --cut-sm: 7px; --hairline: 1px; /* ---- Motion ------------------------------------------------------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-1: 120ms; --dur-2: 240ms; --dur-3: 600ms; --stagger: 50ms; /* ---- Layers ------------------------------------------------------- */ --z-raised: 1; --z-hud: 10; --z-bar: 50; --z-overlay: 100; } :root[lang="zh-Hans"] { --font-sans: "Geist", "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang TC", sans-serif; --font-display: "Orbitron", "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; --font-mono: "JetBrains Mono", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", ui-monospace, monospace; --tracking-display: 0.02em; --tracking-label: 0.08em; --leading-tight: 1.25; --leading-snug: 1.45; } :root[lang="zh-Hant"] { --font-sans: "Geist", "PingFang TC", "PingFang HK", "Noto Sans TC", "Source Han Sans TC", "Microsoft JhengHei", "PingFang SC", sans-serif; --font-display: "Orbitron", "PingFang TC", "PingFang HK", "Noto Sans TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif; --font-mono: "JetBrains Mono", "PingFang TC", "PingFang HK", "Noto Sans TC", "Microsoft JhengHei", ui-monospace, monospace; --tracking-display: 0.02em; --tracking-label: 0.08em; --leading-tight: 1.25; --leading-snug: 1.45; } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --stagger: 0ms; } }