/* ============================================================================= MAGI MACHINA — Design tokens One number governs the system: φ (the golden ratio, 1.618). Type scale, spacing, proportions and rhythm all derive from it. Colours: since v12.15 the site wears MAGI only — black, orange, phosphor green — set statically on every page (), with no switch. The day palette (:root) and the night palette ([data-theme="dark"]) below stay dormant, for a possible comeback. ========================================================================== */ :root { /* --- The golden ratio --------------------------------------------------- */ --phi: 1.618; /* --- Type scale (base 1rem, each step ×/÷ φ) ---------------------------- */ --fs-xs: 0.618rem; --fs-sm: 0.764rem; --fs-base: 1rem; --fs-md: 1.618rem; --fs-lg: 2.618rem; --fs-xl: 4.236rem; --fs-2xl: 6.854rem; /* --- Spacing scale (progression φ) ------------------------------------- */ --sp-0: 0.236rem; --sp-1: 0.382rem; --sp-2: 0.618rem; --sp-3: 1rem; --sp-4: 1.618rem; --sp-5: 2.618rem; --sp-6: 4.236rem; --sp-7: 6.854rem; --sp-8: 11.089rem; /* --- Golden proportions ------------------------------------------------ */ --golden-major: 61.8%; --golden-minor: 38.2%; /* --- Measure & rhythm -------------------------------------------------- */ --measure: 38rem; --lh-tight: 1.05; --lh-snug: 1.272; --lh-body: 1.618; --content-max: 76rem; --radius: 16px; /* soft cards, quiet and rounded */ --radius-sm: 8px; /* buttons, inputs, chips */ --hair: 1px; /* --- Palette: washi white, sumi ink, one ultramarine. Everything is calm paper; the BLUE is reserved for the ASCII creatures, accents and readouts. Variable NAMES kept from earlier versions so the whole site recolours from this one file. Roles: sky-* = light text on dark, teal-* = accent on dark, ocean-* = dark. */ --sky-1: #f1f1f7; /* light text on the rare dark band */ --sky-2: #c7c7d6; --teal-1: #7d84ff; /* ultramarine, lifted for dark bg */ --teal-2: #3b41e3; --ocean-1: #1a1a2c; /* mid dark surface */ --ocean-2: #0e0e1a; /* deep indigo-black (footer, bands) */ /* --- Paper & ink --------------------------------------------------------- */ --paper: #f4f2ec; /* warm washi white (page background) */ --paper-2: #ebe9e2; /* recessed panels, footer */ --paper-3: #fbfaf7; /* cards — almost pure white */ --ink: #17171c; /* sumi ink */ --ink-soft: #565660; /* secondary text */ --ink-faint:#6a6973; /* tertiary / meta (AA on all papers) */ --line: rgba(23, 23, 28, 0.14); --line-2: rgba(23, 23, 28, 0.07); /* --- Accent — one ultramarine ------------------------------------------- */ --accent: #3b41e3; /* the blue: creatures, links, numerals */ --accent-deep: #232896; --phosphor: #3b41e3; /* legacy alias — folds into the blue */ /* --- Glow — whisper in the light, neon in the dark ----------------------- */ --glow-soft: 0 0 14px color-mix(in srgb, var(--accent) 18%, transparent); --glow-strong: 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 12%, transparent); --glow-box: 0 0 22px -8px color-mix(in srgb, var(--accent) 35%, transparent); /* --- Depth — layered, ink- and ultramarine-tinted shadows (v12) ---------- Many thin layers read as soft light instead of one grey smudge. Cards rest on --shadow-card and lift onto --shadow-lift. */ --shadow-card: 0 1px 1px -0.5px rgba(23, 23, 28, 0.04), 0 3px 3px -1.5px rgba(23, 23, 28, 0.03), 0 10px 14px -8px rgba(35, 40, 150, 0.04); --shadow-lift: 0 1px 1px -0.5px rgba(23, 23, 28, 0.05), 0 3px 3px -1.5px rgba(23, 23, 28, 0.05), 0 6px 6px -3px rgba(35, 40, 150, 0.05), 0 12px 12px -6px rgba(35, 40, 150, 0.05), 0 24px 24px -12px rgba(35, 40, 150, 0.05), 0 44px 44px -22px rgba(35, 40, 150, 0.04), 0 64px 64px -32px rgba(35, 40, 150, 0.03); /* --- Header glass over paper --------------------------------------------- */ --glass: rgba(244, 242, 236, 0.86); --glass-line: rgba(23, 23, 28, 0.4); --glass-line-2: rgba(23, 23, 28, 0.18); --glass-text: #17171c; /* --- Fonts ----------------------------------------------------------------- */ /* Quiet grotesque for everything; serif for rare display moments; mono = the machine. */ --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Inter", "Segoe UI", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Courier New", monospace; /* --- Motion — one grammar (v12) ------------------------------------------------- One signature curve for everything that arrives or answers: quick off the mark, long silky landing. Pop = the small overshoot for pills and icons; fade = pure opacity; in = exits, which always leave faster than things arrive. Four durations, one stagger. Nothing else is hard-coded. */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: var(--ease); /* legacy alias */ --ease-pop: cubic-bezier(0.34, 1.35, 0.64, 1); --ease-fade: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.5, 0, 0.75, 0); --dur-xs: 0.2s; --dur-s: 0.45s; --dur-m: 0.6s; --dur-l: 0.8s; --dur-exit: 0.3s; /* ≈ 0.65 × --dur-s */ --stagger: 45ms; /* the reveal: things rise a little and come into focus (noise → signal) */ --reveal-y: 18px; --reveal-blur: 6px; /* --- Glyph masks — the mono subset has no arrow/check, so they are drawn --- */ --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10.5M8.75 3.75 13 8l-4.25 4.25' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.25 3.25L13 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --radius-pill: 999px; /* --- Gutter & panels (v12.13) ----------------------------------------------------- --gutter: the shell's side margin, shared by the header, the sections and the footer, so logo, content and footer text sit on one vertical (it widens from 480 px, see below). Sections are panels: set off the viewport edge by --panel-m, one --panel-gap apart, rounded, a tone lifted off the page, a hairline; a faint top light at night. */ --gutter: var(--sp-4); --panel-m: clamp(6px, 1.4vw, 22px); --panel-gap: clamp(10px, 1.2vw, 18px); --radius-panel: clamp(18px, 2.2vw, 30px); --panel-bg: #f9f8f3; /* a breath lighter than the washi page */ --panel-line: rgba(23, 23, 28, 0.07); --panel-glow: none; /* --- Layering ------------------------------------------------------------------ */ --z-hero-bg: 0; --z-hero-content: 3; --z-header: 50; } /* ============================================================================= MAGI theme — THE site's palette (v12.15): a terminal. Pure black, white text, amber accents, phosphor-green ASCII. ========================================================================== */ :root[data-theme="magi"] { color-scheme: dark; /* native controls, scrollbars, blank canvas */ --sky-1: #ffffff; --sky-2: #d9d9cf; --teal-1: #ffb000; /* amber on the black bands */ --teal-2: #ff7f27; --ocean-1: #0d0d0a; --ocean-2: #050505; --paper: #000000; /* terminal black */ --paper-2: #070707; --paper-3: #0d0d0d; --ink: #ffffff; --ink-soft: #c8c8ba; --ink-faint:#7d7d6e; --line: rgba(255, 255, 255, 0.22); --line-2: rgba(255, 255, 255, 0.1); --accent: #ffa028; /* MAGI amber */ --accent-deep: #c46a00; --phosphor: #3dff73; /* terminal green */ --glow-soft: 0 0 12px rgba(255, 160, 40, 0.55); --glow-strong: 0 0 7px rgba(255, 160, 40, 0.7), 0 0 26px rgba(255, 160, 40, 0.35); --glow-box: 0 0 28px -6px rgba(255, 160, 40, 0.6); --shadow-card: 0 18px 40px -28px rgba(0, 0, 0, 0.9); --shadow-lift: 0 0 0 1px rgba(255, 160, 40, 0.22), 0 24px 50px -28px rgba(0, 0, 0, 0.95), 0 0 34px -14px rgba(255, 160, 40, 0.45); --glass: rgba(0, 0, 0, 0.85); --glass-line: rgba(255, 255, 255, 0.4); --glass-line-2: rgba(255, 255, 255, 0.18); --glass-text: #ffffff; --panel-bg: #0b0b0b; /* lifted off the terminal black */ --panel-line: rgba(255, 255, 255, 0.08); --panel-glow: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.03), transparent 70%); } /* Dark theme — deep indigo night (dormant since v12.15). */ :root[data-theme="dark"] { --sky-1: #f1f1f7; --sky-2: #c7c7d6; --teal-1: #9aa0ff; /* accent on the (now even darker) bands */ --teal-2: #7d84ff; --ocean-1: #14141f; --ocean-2: #07070f; /* bands stay darker than the page */ --paper: #0d0d18; /* deep indigo night (page background) */ --paper-2: #10101c; --paper-3: #15151f; /* cards */ --ink: #ecebf4; --ink-soft: #a7a6b8; --ink-faint:#6b6a7e; --line: rgba(236, 235, 244, 0.16); --line-2: rgba(236, 235, 244, 0.08); --accent: #7d84ff; /* lifted ultramarine — reads + glows */ --accent-deep: #3b41e3; --phosphor: #7d84ff; --glow-soft: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent); --glow-strong: 0 0 7px color-mix(in srgb, var(--accent) 65%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 35%, transparent); --glow-box: 0 0 30px -6px color-mix(in srgb, var(--accent) 60%, transparent); --shadow-card: 0 18px 40px -28px rgba(0, 0, 0, 0.7); --shadow-lift: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 24px 50px -28px rgba(0, 0, 0, 0.8), 0 0 36px -14px color-mix(in srgb, var(--accent) 45%, transparent); --glass: rgba(13, 13, 24, 0.82); --glass-line: rgba(236, 235, 244, 0.4); --glass-line-2: rgba(236, 235, 244, 0.18); --glass-text: #ecebf4; --panel-bg: #12121f; /* lifted off the indigo night */ --panel-line: rgba(236, 235, 244, 0.07); --panel-glow: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.03), transparent 70%); } /* Real gutters as soon as there is room — cards must never hug the viewport. */ @media (min-width: 480px) { :root { --gutter: clamp(var(--sp-5), 6vw, var(--sp-7)); } } /* Small screens: the reveal keeps its rise but drops the blur — cheaper on phones, and big blocks never smear while the page is being thumbed. */ @media (max-width: 860px) { :root { --reveal-blur: 0px; } }