/* ============================================================= Iaroslav Mezin — AI Security Shared design system. Derived from the Codex "Contents" view: warm near-black canvas, amber heading accent, cyan structural labels, Spectral serif titles, JetBrains Mono metadata. ============================================================= */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600&display=swap'); /* ---------- Tokens: DARK (default) ---------- */ :root { /* accent pair — swappable via Tweaks */ --amber: #e4a23f; --cyan: #5bd1c5; --accent: var(--amber); --accent-2: var(--cyan); /* surfaces */ --bg: #0b0c0f; --bg-1: #0e1014; --bg-2: #111419; --bg-3: #161a20; --panel: rgba(255,255,255,0.018); --panel-2: rgba(255,255,255,0.03); --hair: rgba(255,255,255,0.07); --hair-2: rgba(255,255,255,0.12); --hair-3: rgba(255,255,255,0.18); /* ink */ --ink: #d6d2c8; /* serif reading colour, warm parchment */ --ink-1: #c4c0b6; --ink-2: #948f86; /* muted */ --ink-3: #62606a; /* faint / numbers */ --ink-on-accent: #0a0b0e; /* glow used behind panels (like the screenshot vignette) */ --glow: radial-gradient(120% 90% at 50% -10%, rgba(91,209,197,0.05), transparent 60%); /* type families (swappable) */ --serif: 'Spectral', Georgia, 'Times New Roman', serif; --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --display: var(--serif); /* density (swappable) — multipliers */ --d: 1; /* density scale */ --u: 8px; /* base unit */ --maxw: 1200px; /* matches the playbook's 1200px reading column */ /* radii / motion */ --r-sm: 6px; --r: 12px; --r-lg: 18px; --ease: cubic-bezier(.2,.7,.2,1); color-scheme: dark; } /* Accent palette presets (set data-accent on ) */ :root[data-accent="amber"] { --accent: var(--amber); --accent-2: var(--cyan); } :root[data-accent="cyan"] { --accent: var(--cyan); --accent-2: #8fb9ff; } :root[data-accent="violet"] { --accent: #b38bf0; --accent-2: var(--cyan); } :root[data-accent="amberonly"] { --accent: var(--amber); --accent-2: #d6a35a; } /* Font preset (set data-type on ) */ :root[data-type="newsreader"] { --serif: 'Newsreader', Georgia, serif; } :root[data-type="fraunces"] { --serif: 'Fraunces', Georgia, serif; } /* Density (set data-density on ) */ :root[data-density="compact"] { --d: 0.86; } :root[data-density="comfy"] { --d: 1.16; } /* ---------- Tokens: LIGHT ---------- */ :root[data-theme="light"] { --amber: #b9781a; --cyan: #0e8f86; --accent: var(--amber); --accent-2: var(--cyan); --bg: #f2efe7; --bg-1: #f6f3ec; --bg-2: #fbf9f3; --bg-3: #ffffff; --panel: rgba(20,18,12,0.015); --panel-2: rgba(20,18,12,0.03); --hair: rgba(20,18,12,0.10); --hair-2: rgba(20,18,12,0.16); --hair-3: rgba(20,18,12,0.24); --ink: #24241f; --ink-1: #34332c; --ink-2: #6a675e; --ink-3: #97948b; --ink-on-accent: #fbf9f3; --glow: radial-gradient(120% 90% at 50% -10%, rgba(14,143,134,0.06), transparent 60%); color-scheme: light; } :root[data-theme="light"][data-accent="cyan"] { --accent: var(--cyan); --accent-2: #2f6fd0; } :root[data-theme="light"][data-accent="violet"] { --accent: #7b4fc0; --accent-2: var(--cyan); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); background-image: var(--glow); background-attachment: fixed; color: var(--ink); font-family: var(--serif); font-size: calc(18px * var(--d)); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "liga" 1, "onum" 1; overflow-x: hidden; } h1,h2,h3,h4 { margin: 0; font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: color-mix(in oklab, var(--accent) 36%, transparent); color: var(--ink); } /* scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--hair-3); background-clip: content-box; } /* ---------- Layout helpers ---------- */ .wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; } .wrap-n { width: min(100% - 40px, 1200px); margin-inline: auto; } .section { padding-block: calc(var(--u) * 12 * var(--d)); } .section--tight { padding-block: calc(var(--u) * 7 * var(--d)); } .stack { display: flex; flex-direction: column; } .hairline { height: 1px; background: var(--hair); border: 0; margin: 0; } /* ---------- Mono utility text (the "labels" from the screenshot) ---------- */ .mono { font-family: var(--mono); } .kicker { font-family: var(--mono); font-size: calc(12px * var(--d)); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); } .kicker--amber { color: var(--accent); } .kicker--cyan { color: var(--accent-2); } .dim { color: var(--ink-2); } .faint { color: var(--ink-3); } /* node bullet used in group labels */ .node::before { content: "·"; margin-inline: 0.5em; color: var(--ink-3); } /* ---------- Buttons ---------- */ .btn { --bg-btn: transparent; display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--mono); font-size: calc(13px * var(--d)); letter-spacing: 0.04em; font-weight: 600; padding: calc(11px * var(--d)) calc(18px * var(--d)); border: 1px solid var(--hair-2); border-radius: 999px; color: var(--ink-1); background: var(--bg-btn); cursor: pointer; transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), transform .2s var(--ease); } .btn:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); } .btn--solid { background: var(--accent); color: var(--ink-on-accent); border-color: var(--accent); } .btn--solid:hover { background: color-mix(in oklab, var(--accent) 88%, #fff); color: var(--ink-on-accent); } .btn .arrow { transition: transform .25s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } /* ---------- Top navigation ---------- */ .nav { position: sticky; top: 0; z-index: 60; background: color-mix(in oklab, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--hair); } .nav__in { display: flex; align-items: center; gap: 18px; height: 64px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--mono); font-weight: 700; letter-spacing: 0.06em; font-size: 14px; color: var(--ink); } .brand__mark { width: 24px; height: 24px; border-radius: 6px; flex: none; display: grid; place-items: center; border: 1px solid var(--hair-2); background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, transparent), transparent); color: var(--accent); font-size: 12px; } .brand small { color: var(--ink-3); font-weight: 500; letter-spacing: 0.14em; } .nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav__link { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); padding: 8px 12px; border-radius: 8px; font-weight: 500; transition: color .2s var(--ease), background .2s var(--ease); } .nav__link:hover { color: var(--ink); background: var(--panel-2); } .nav__link[aria-current="page"] { color: var(--accent); } .nav__tools { display: flex; align-items: center; gap: 8px; } .icon-btn { width: 38px; height: 38px; border-radius: 9px; flex: none; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--hair-2); background: var(--panel); color: var(--ink-2); transition: color .2s var(--ease), border-color .2s var(--ease); } .icon-btn:hover { color: var(--ink); border-color: var(--hair-3); } .icon-btn svg { width: 17px; height: 17px; } .cmd-trigger { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); padding: 8px 11px; border-radius: 9px; cursor: pointer; border: 1px solid var(--hair-2); background: var(--panel); transition: color .2s var(--ease), border-color .2s var(--ease); } .cmd-trigger:hover { color: var(--ink); border-color: var(--hair-3); } .cmd-trigger kbd { font-family: var(--mono); font-size: 11px; color: var(--ink-3); border: 1px solid var(--hair-2); border-radius: 5px; padding: 1px 5px; line-height: 1.4; } .nav__burger { display: none; } @media (max-width: 860px) { .nav__links { display: none; } .cmd-trigger kbd { display: none; } .nav__burger { display: grid; } } @media (max-width: 560px) { .brand small { display: none; } } /* mobile menu sheet */ .menu-sheet { position: fixed; inset: 0; z-index: 90; display: none; background: color-mix(in oklab, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 80px 28px 28px; } .menu-sheet.open { display: block; } .menu-sheet a { display: block; font-family: var(--serif); font-size: 30px; color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--hair); } .menu-sheet a .mono { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin-right: 14px; } /* ---------- Hero ---------- */ .hero { position: relative; padding-block: calc(var(--u) * 13 * var(--d)) calc(var(--u) * 9 * var(--d)); } .hero__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(120% 80% at 30% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(120% 80% at 30% 0%, #000 0%, transparent 70%); } .hero__in { position: relative; z-index: 1; } .hero h1 { font-family: var(--display); font-size: clamp(40px, 7.4vw, 92px); font-weight: 500; line-height: 0.98; letter-spacing: -0.02em; margin-top: 22px; } .hero h1 em { font-style: italic; color: var(--accent); font-weight: 500; } .hero__lead { margin-top: 26px; max-width: 60ch; font-size: calc(20px * var(--d)); color: var(--ink-1); line-height: 1.55; text-wrap: pretty; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } /* terminal status line under hero */ .statusline { margin-top: 40px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding-top: 22px; border-top: 1px solid var(--hair); } .statusline b { color: var(--ink); font-weight: 600; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); display: inline-block; box-shadow: 0 0 10px var(--accent-2); } .dot--pulse { animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} } /* ---------- Section headers ---------- */ .shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 38px; } .shead__l { max-width: 62ch; } .shead h2 { font-family: var(--display); font-size: clamp(28px, 4vw, 44px); font-weight: 500; letter-spacing: -0.02em; margin-top: 14px; } .shead p { color: var(--ink-2); margin-top: 12px; font-size: calc(17px * var(--d)); } .shead__link { white-space: nowrap; } /* ---------- Panels / cards ---------- */ .panel { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-lg); position: relative; overflow: hidden; } .card { display: flex; flex-direction: column; gap: 12px; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r); padding: calc(24px * var(--d)); transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); } .card:hover { border-color: var(--hair-3); background: var(--panel-2); transform: translateY(-3px); } .card__meta { display: flex; gap: 12px; align-items: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .card h3 { font-family: var(--display); font-size: calc(23px * var(--d)); font-weight: 500; letter-spacing: -0.01em; } .card p { color: var(--ink-2); font-size: calc(16px * var(--d)); } .card .readmore { margin-top: auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--accent); display: inline-flex; gap: 7px; align-items: center; } .card:hover .readmore .arrow { transform: translateX(3px); } /* tag/badge */ .badge { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--hair-2); color: var(--ink-2); } .badge--wp { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); } .badge--art { color: var(--accent-2); border-color: color-mix(in oklab, var(--accent-2) 45%, transparent); } .badge--talk { color: var(--ink-1); } .grid { display: grid; gap: 18px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 920px) { .grid-3 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } } /* ---------- Codex contents grid (mirrors the screenshot) ---------- */ .codex-panel { padding: clamp(24px, 4vw, 44px); } .codex-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 48px; } @media (max-width: 900px) { .codex-cols { grid-template-columns: repeat(2,1fr); } } @media (max-width: 600px) { .codex-cols { grid-template-columns: 1fr; } } .codex-group { break-inside: avoid; } .codex-group__h { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--accent-2); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--hair); display: flex; gap: 8px; align-items: baseline; } .codex-group__h .g { color: var(--ink-1); } .codex-entry { display: flex; gap: 12px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 7px 8px 7px 0; border-radius: 7px; color: var(--ink); font-family: var(--serif); font-size: calc(18px * var(--d)); line-height: 1.3; transition: color .18s var(--ease), background .18s var(--ease), padding .18s var(--ease); } .codex-entry:hover { color: var(--accent); background: var(--panel-2); padding-left: 8px; } .codex-entry .n { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); min-width: 26px; flex: none; padding-top: 3px; } .codex-entry .n--ref { color: var(--accent-2); } .codex-entry.is-hidden { display: none; } /* ---------- Codex reader drawer ---------- */ .drawer-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); } .drawer-scrim.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: min(560px, 92vw); background: var(--bg-1); border-left: 1px solid var(--hair-2); transform: translateX(100%); transition: transform .4s var(--ease); display: flex; flex-direction: column; box-shadow: -30px 0 80px rgba(0,0,0,.5); } .drawer.open { transform: none; } .drawer__hd { padding: 24px 28px; border-bottom: 1px solid var(--hair); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .drawer__body { padding: 28px; overflow-y: auto; } .drawer__body p { color: var(--ink-1); margin-bottom: 16px; } .drawer__body h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 26px 0 12px; } .drawer__topics { display: flex; flex-wrap: wrap; gap: 8px; } .drawer__num { font-family: var(--mono); font-size: 13px; color: var(--accent); letter-spacing: 0.1em; } /* ---------- Command palette ---------- */ .cmdk { position: fixed; inset: 0; z-index: 200; display: none; } .cmdk.open { display: block; } .cmdk__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .cmdk__box { position: relative; width: min(640px, calc(100% - 32px)); margin: 12vh auto 0; background: var(--bg-2); border: 1px solid var(--hair-2); border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,.6); overflow: hidden; animation: cmdIn .22s var(--ease); } @keyframes cmdIn { from { opacity: 0; transform: translateY(-8px) scale(.98);} to { opacity:1; transform:none; } } .cmdk__input-row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--hair); } .cmdk__input-row .prompt { font-family: var(--mono); color: var(--accent); font-weight: 700; } .cmdk__input { flex: 1; background: none; border: 0; outline: 0; color: var(--ink); font-family: var(--mono); font-size: 16px; } .cmdk__input::placeholder { color: var(--ink-3); } .cmdk__list { max-height: 52vh; overflow-y: auto; padding: 8px; } .cmdk__group { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 12px 12px 6px; } .cmdk__item { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 9px; cursor: pointer; } .cmdk__item .ic { font-family: var(--mono); font-size: 12px; color: var(--ink-3); width: 22px; text-align: center; flex: none; } .cmdk__item .t { font-family: var(--serif); font-size: 16px; color: var(--ink-1); flex: 1; } .cmdk__item .k { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .cmdk__item.active, .cmdk__item:hover { background: var(--panel-2); } .cmdk__item.active .t { color: var(--accent); } .cmdk__empty { padding: 28px 16px; text-align: center; color: var(--ink-3); font-family: var(--mono); font-size: 13px; } .cmdk__foot { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--hair); font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .cmdk__foot kbd { border: 1px solid var(--hair-2); border-radius: 4px; padding: 0 5px; } /* ---------- Filter chips ---------- */ .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; } .chip { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair-2); color: var(--ink-2); cursor: pointer; background: none; transition: all .2s var(--ease); } .chip:hover { color: var(--ink); border-color: var(--hair-3); } .chip[aria-pressed="true"] { color: var(--ink-on-accent); background: var(--accent); border-color: var(--accent); } /* search input (list pages) */ .search { display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid var(--hair-2); border-radius: 12px; padding: 13px 16px; background: var(--panel); margin-bottom: 18px; } .search input { flex: 1; background: none; border: 0; outline: 0; color: var(--ink); font-family: var(--mono); font-size: 14px; } .search input::placeholder { color: var(--ink-3); } .search .prompt { font-family: var(--mono); color: var(--accent); } /* ---------- Empty / coming-soon state ---------- */ .empty { border: 1px solid var(--hair); border-radius: var(--r); background: var(--panel); padding: 26px; max-width: 620px; } .empty__k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .empty p { color: var(--ink-1); font-size: 16px; line-height: 1.6; } .empty a { color: var(--accent); border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); } .empty a:hover { border-color: var(--accent); } /* ---------- Post / article list rows ---------- */ .list { border-top: 1px solid var(--hair); } .row { display: grid; grid-template-columns: 120px 1fr auto; gap: 24px; align-items: baseline; padding: 26px 8px; border-bottom: 1px solid var(--hair); transition: background .25s var(--ease), padding .25s var(--ease); } .row:hover { background: var(--panel-2); padding-inline: 18px 18px; } .row.is-hidden { display: none; } .row__date { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.04em; padding-top: 6px; } .row__main h3 { font-family: var(--display); font-size: calc(25px * var(--d)); font-weight: 500; } .row:hover .row__main h3 { color: var(--accent); } .row__main p { color: var(--ink-2); margin-top: 8px; font-size: calc(16px * var(--d)); max-width: 70ch; } .row__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .row__right { display: flex; align-items: center; gap: 14px; padding-top: 4px; } @media (max-width: 720px) { .row { grid-template-columns: 1fr; gap: 10px; } .row__right { display: none; } } /* ---------- LinkedIn card ---------- */ .li-card { border: 1px solid var(--hair); border-radius: var(--r); background: var(--panel); padding: 26px; display: flex; flex-direction: column; gap: 16px; max-width: 620px; } .li-head { display: flex; align-items: center; gap: 14px; } .li-avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; color: var(--ink-on-accent); background: var(--accent); } .li-head .nm { font-family: var(--serif); font-size: 17px; color: var(--ink); } .li-head .mt { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); } .li-body { color: var(--ink-1); font-size: calc(17px * var(--d)); line-height: 1.62; } .li-body .tag { color: var(--accent-2); } .li-foot { display: flex; gap: 20px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); padding-top: 14px; border-top: 1px solid var(--hair); } /* ---------- GitHub repo cards ---------- */ .repo { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--hair); border-radius: var(--r); padding: 22px; background: var(--panel); transition: border-color .25s var(--ease), transform .25s var(--ease); } .repo:hover { border-color: var(--hair-3); transform: translateY(-3px); } .repo__top { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 14px; color: var(--ink); } .repo__top svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; } .repo p { color: var(--ink-2); font-size: 15px; flex: 1; } .repo__foot { display: flex; gap: 18px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); align-items: center; } .lang-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; } /* ---------- Speaking list ---------- */ .talk { display: grid; grid-template-columns: 130px 1fr auto; gap: 22px; padding: 20px 6px; border-bottom: 1px solid var(--hair); align-items: baseline; } .talk__when { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); } .talk__what h3 { font-family: var(--display); font-size: calc(20px * var(--d)); font-weight: 500; } .talk__what p { color: var(--ink-2); font-size: 15px; margin-top: 5px; } .talk__where { font-family: var(--mono); font-size: 12px; color: var(--accent-2); text-align: right; } @media (max-width: 700px) { .talk { grid-template-columns: 1fr; gap: 6px; } .talk__where { text-align: left; } } /* ---------- Footer ---------- */ .foot { border-top: 1px solid var(--hair); padding-block: 56px 40px; margin-top: 40px; } .foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; } @media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr 1fr; gap: 28px; } } .foot h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; font-weight: 600; } .foot a { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-family: var(--mono); font-size: 13px; padding: 7px 0; transition: color .2s var(--ease); } .foot a:hover { color: var(--accent); } .foot a svg { width: 15px; height: 15px; flex: none; } .foot__big { font-family: var(--display); font-size: 28px; color: var(--ink); } .foot__copy { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); } .foot__disc { margin-top: 16px; max-width: none; font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--ink-3); } /* ---------- Reveal (content always visible; gentle, freeze-safe lift) ---------- Opacity stays 1 at all times so content can never be stuck invisible if the animation timeline is throttled/frozen (preview, print, background tab). */ .reveal { transform: translateY(8px); transition: transform .55s var(--ease); } .reveal.in { transform: none; } .reveal[data-d="1"] { transition-delay: .05s; } .reveal[data-d="2"] { transition-delay: .10s; } .reveal[data-d="3"] { transition-delay: .15s; } .reveal[data-d="4"] { transition-delay: .20s; } @media (prefers-reduced-motion: reduce) { .reveal { transform: none; transition: none; } } /* ---------- Tweaks panel (vanilla) ---------- */ .tweaks { position: fixed; right: 16px; bottom: 16px; z-index: 2147483646; width: 264px; display: none; flex-direction: column; background: color-mix(in oklab, var(--bg-2) 92%, transparent); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--hair-2); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.45); font-family: var(--mono); color: var(--ink-1); } .tweaks.open { display: flex; } .tweaks__hd { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid var(--hair); } .tweaks__hd b { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 700; } .tweaks__x { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 15px; width: 22px; height: 22px; border-radius: 6px; } .tweaks__x:hover { color: var(--ink); background: var(--panel-2); } .tweaks__body { padding: 14px; display: flex; flex-direction: column; gap: 16px; max-height: 70vh; overflow-y: auto; } .twk-sect { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .twk-grp { display: flex; flex-direction: column; gap: 8px; } .twk-seg { display: flex; gap: 4px; padding: 3px; background: var(--panel-2); border: 1px solid var(--hair); border-radius: 9px; } .twk-seg button { flex: 1; border: 0; background: none; color: var(--ink-2); font-family: var(--mono); font-size: 11px; padding: 6px 4px; border-radius: 6px; cursor: pointer; letter-spacing: 0.04em; transition: all .15s var(--ease); } .twk-seg button[aria-pressed="true"] { background: var(--accent); color: var(--ink-on-accent); font-weight: 600; } .twk-swatches { display: flex; gap: 8px; } .twk-sw { width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; position: relative; } .twk-sw[aria-pressed="true"] { border-color: var(--ink); } .twk-reset { font-family: var(--mono); font-size: 11px; color: var(--ink-3); background: none; border: 1px solid var(--hair-2); border-radius: 8px; padding: 8px; cursor: pointer; letter-spacing: 0.06em; } .twk-reset:hover { color: var(--ink); border-color: var(--hair-3); } /* ---------- misc ---------- */ .eyebrow-num { font-family: var(--mono); color: var(--accent); font-size: 13px; letter-spacing: 0.1em; } .lede { font-size: calc(22px * var(--d)); line-height: 1.5; color: var(--ink-1); max-width: 64ch; text-wrap: pretty; } .prose p { margin-bottom: 20px; color: var(--ink-1); } .prose p:first-of-type::first-letter { font-size: 3.4em; float: left; line-height: 0.8; padding: 6px 12px 0 0; color: var(--accent); font-family: var(--display); } .divider-label { display: flex; align-items: center; gap: 18px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0; } .divider-label::before, .divider-label::after { content: ""; height: 1px; background: var(--hair); flex: 1; } /* ============================================================= Cyber FX — ambient, additive (never hides content if throttled) ============================================================= */ /* keep app content above the ambient layers (nav keeps its own z) */ main, .foot { position: relative; z-index: 1; } /* drifting grid behind everything */ .fx-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px); background-size: 46px 46px; opacity: .4; -webkit-mask-image: radial-gradient(135% 95% at 50% 0%, #000, transparent 78%); mask-image: radial-gradient(135% 95% at 50% 0%, #000, transparent 78%); animation: fxGridDrift 26s linear infinite; } @keyframes fxGridDrift { to { background-position: 46px 46px, 46px 46px; } } /* faint vertical-drifting scanlines + a single slow sweep bar */ .fx-scan { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .5; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 4px); animation: fxScanlines 9s linear infinite; } .fx-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 180px; top: -200px; background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--accent-2) 9%, transparent), transparent); animation: fxSweep 7.5s linear infinite; } :root[data-theme="light"] .fx-scan { background: repeating-linear-gradient(to bottom, rgba(20,18,12,.03) 0 1px, transparent 1px 4px); opacity:.4; } @keyframes fxScanlines { to { background-position: 0 8px; } } @keyframes fxSweep { 0% { transform: translateY(0); } 100% { transform: translateY(calc(100vh + 220px)); } } /* blinking terminal caret */ .caret { display: inline-block; width: .55ch; height: .92em; background: var(--accent); margin-left: .14em; transform: translateY(.06em); border-radius: 1px; box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 70%, transparent); animation: fxBlink 1.1s steps(1) infinite; } @keyframes fxBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} } /* light sweep along the Codex feature card's top edge */ .home-feature { position: relative; overflow: hidden; } .home-feature::after { content: ""; position: absolute; top: 0; left: -35%; width: 35%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: fxEdge 4.5s linear infinite; } @keyframes fxEdge { to { left: 135%; } } /* glitch flicker on the brand mark hover */ .brand:hover .brand__mark { animation: fxGlitch .38s steps(2) 1; } @keyframes fxGlitch { 0% { transform: translate(0,0); clip-path: inset(0 0 0 0); } 25% { transform: translate(-1.5px,1px); clip-path: inset(15% 0 55% 0); } 50% { transform: translate(1.5px,-1px); clip-path: inset(55% 0 18% 0); } 75% { transform: translate(-1px,0); clip-path: inset(30% 0 40% 0); } 100% { transform: translate(0,0); clip-path: inset(0 0 0 0); } } /* scramble: while a label is decoding, tint it mono-cyan */ .fx-scrambling { color: var(--accent-2) !important; } @media (prefers-reduced-motion: reduce) { .fx-grid, .fx-scan, .fx-scan::after, .caret, .home-feature::after { animation: none; } .fx-scan { opacity: .25; } } /* ---------- Typewriter (type + delete) ---------- */ .type-wrap { font-style: italic; color: var(--accent); white-space: nowrap; } .type { font-style: italic; } .caret--type { vertical-align: baseline; transform: translateY(.06em); } /* ---------- Boot intro overlay ---------- */ .boot { position: fixed; inset: 0; z-index: 4000; background: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--mono); cursor: pointer; background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px); background-size: 46px 46px; transition: opacity .5s var(--ease); } .boot::after { /* scanlines over the boot */ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 4px); } .boot.fade { opacity: 0; } .boot__in { width: min(90vw, 540px); padding: 0 24px; position: relative; z-index: 1; } .boot__ln { font-size: 13.5px; line-height: 2.05; color: var(--ink-2); white-space: pre-wrap; min-height: 1.6em; } .boot__ln .ok { color: var(--accent-2); } .boot__ln .p { color: var(--accent-2); } .boot__ln .dim { color: var(--ink-3); } .boot__grant { color: var(--accent); font-size: 16px; margin-top: 10px; letter-spacing: 0.02em; } .boot__bar { display: inline-block; } .boot__cur { display: inline-block; width: .55ch; height: 1em; background: var(--accent-2); transform: translateY(.12em); margin-left: 1px; animation: fxBlink 1s steps(1) infinite; } .boot__skip { position: absolute; bottom: 22px; right: 26px; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; } .boot.glitch { animation: bootGlitch .22s steps(2) 2; } @keyframes bootGlitch { 0%{transform:translate(0)} 25%{transform:translate(-3px,1px)} 50%{transform:translate(3px,-1px)} 75%{transform:translate(-2px,0)} 100%{transform:translate(0)} }