/* varek-site.css — shared stylesheet for varek-lang.org Linked by all four pages; each surface is scoped under a class: index.html -> roadmap.html -> spec.html -> data-room.html -> Fonts are still loaded per-page in each (each surface uses a different family). spec.html keeps a tiny inline block for @page print rules, which cannot be scoped to one page from a shared file. */ /* ============================================================= RESET */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ===================================== CANONICAL TOKENS (source of truth) The verdict trichotomy and brand teal are defined once here. The doc surfaces consume these; the home surface keeps its own neon palette. */ :root { --vk-sat: #1f7a46; /* SATISFIED */ --vk-unsat: #a82c25; /* UNSATISFIED */ --vk-unk: #b07d12; /* UNKNOWN */ --brand-teal: #0d7a6d; --brand-teal-deep: #0a5b51; } /* ============================================================== HOME index.html — dark marketing homepage. */ body.home { --bg:#030712; --surface:#0d1117; --border:#1e293b; --accent:#00ffe0; --accent2:#7c3aed; --accent3:#f59e0b; --text:#e2e8f0; --muted:#64748b; --code-bg:#0f1923; background: var(--bg); color: var(--text); font-family: 'Syne', sans-serif; overflow-x: hidden; cursor: none; } body.home::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(0,255,224,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,224,0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } body.home .cursor { width:12px; height:12px; background:var(--accent); border-radius:50%; position:fixed; pointer-events:none; z-index:9999; transition:transform .1s ease; mix-blend-mode:difference; } body.home .cursor-ring { width:36px; height:36px; border:1px solid var(--accent); border-radius:50%; position:fixed; pointer-events:none; z-index:9998; transition:all .15s ease; opacity:.5; } body.home .orb { position:fixed; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; opacity:.15; } body.home .orb1 { width:600px; height:600px; background:var(--accent2); top:-200px; right:-150px; } body.home .orb2 { width:500px; height:500px; background:var(--accent); bottom:-200px; left:-100px; } body.home .orb3 { width:300px; height:300px; background:var(--accent3); top:50%; left:50%; transform:translate(-50%,-50%); } body.home nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:20px 60px; backdrop-filter:blur(20px); background:rgba(3,7,18,.8); border-bottom:1px solid var(--border); } body.home .nav-logo { font-size:1.2rem; font-weight:800; letter-spacing:.15em; color:var(--accent); } body.home .nav-logo span { color:var(--text); opacity:.4; font-weight:300; font-size:.75rem; margin-left:12px; } body.home .nav-links { display:flex; gap:36px; } body.home .nav-links a { color:var(--muted); text-decoration:none; font-size:.85rem; letter-spacing:.1em; transition:color .2s; } body.home .nav-links a:hover { color:var(--accent); } body.home .nav-cta { background:var(--accent); color:var(--bg); padding:10px 22px; font-family:'Syne',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.12em; border:none; cursor:none; transition:all .2s; } body.home .nav-cta:hover { background:white; transform:translateY(-1px); } body.home .hero { position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px 40px 80px; z-index:1; } body.home .hero-badge { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(0,255,224,.3); padding:6px 16px; font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--accent); letter-spacing:.1em; margin-bottom:32px; animation:fadeUp .8s ease both; } body.home .hero-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1.5s infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} } body.home .hero-title { font-size:clamp(4rem,12vw,10rem); font-weight:800; line-height:.9; letter-spacing:-.02em; animation:fadeUp .8s .1s ease both; } body.home .hero-title .accent { color:var(--accent); } body.home .hero-title .dim { opacity:.15; } body.home .hero-sub { font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--muted); letter-spacing:.2em; margin-top:16px; animation:fadeUp .8s .2s ease both; } body.home .hero-desc { max-width:560px; font-size:1.1rem; line-height:1.7; color:rgba(226,232,240,.7); margin-top:28px; font-weight:400; animation:fadeUp .8s .3s ease both; } body.home .hero-verify { margin-top:.5rem; font-size:.95rem; letter-spacing:.04em; color:var(--accent); font-weight:600; animation:fadeUp .8s .35s ease both; } body.home .hero-actions { display:flex; gap:16px; margin-top:44px; animation:fadeUp .8s .4s ease both; } body.home .btn-primary { background:var(--accent); color:var(--bg); padding:14px 32px; font-family:'Syne',sans-serif; font-weight:700; font-size:.9rem; letter-spacing:.1em; border:none; cursor:none; transition:all .2s; text-decoration:none; display:inline-block; } body.home .btn-primary:hover { background:white; transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,255,224,.3); } body.home .btn-secondary { background:transparent; color:var(--text); padding:14px 32px; font-family:'Syne',sans-serif; font-weight:700; font-size:.9rem; letter-spacing:.1em; border:1px solid var(--border); cursor:none; transition:all .2s; text-decoration:none; display:inline-block; } body.home .btn-secondary:hover { border-color:var(--accent); color:var(--accent); } body.home .stats { display:flex; gap:0; margin-top:80px; border:1px solid var(--border); animation:fadeUp .8s .5s ease both; } body.home .stat { padding:24px 48px; border-right:1px solid var(--border); text-align:center; } body.home .stat:last-child { border-right:none; } body.home .stat-num { font-size:2rem; font-weight:800; color:var(--accent); } body.home .stat-label { font-size:.75rem; color:var(--muted); letter-spacing:.15em; margin-top:4px; } @keyframes fadeUp { from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} } body.home .code-section { position:relative; z-index:1; padding:80px 60px; max-width:1200px; margin:0 auto; } body.home .section-label { font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--accent); letter-spacing:.2em; margin-bottom:12px; } body.home .section-title { font-size:clamp(1.8rem,4vw,3rem); font-weight:800; line-height:1.1; margin-bottom:20px; } body.home .section-desc { color:var(--muted); max-width:480px; line-height:1.7; margin-bottom:48px; } body.home .code-compare { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--border); } body.home .code-panel { background:var(--code-bg); overflow:hidden; } body.home .code-header { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.02); } body.home .code-lang { font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.1em; } body.home .code-lang.syn { color:var(--accent); } body.home .code-lang.py { color:#3b82f6; } body.home .code-dots { display:flex; gap:6px; } body.home .code-dots span { width:10px; height:10px; border-radius:50%; background:var(--border); } body.home pre { padding:24px; font-family:'JetBrains Mono',monospace; font-size:.8rem; line-height:1.8; overflow-x:auto; } body.home .kw{color:#c084fc} body.home .fn-name{color:#60a5fa} body.home .type{color:#34d399} body.home .str{color:#fb923c} body.home .num{color:#f59e0b} body.home .comment{color:#475569} body.home .op{color:var(--accent)} body.home .py-kw{color:#818cf8} body.home .py-fn{color:#60a5fa} body.home .py-str{color:#fb923c} body.home .py-comment{color:#475569} body.home .features { position:relative; z-index:1; padding:80px 60px; max-width:1200px; margin:0 auto; } body.home .features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--border); margin-top:48px; } body.home .feature-card { background:var(--surface); padding:40px 32px; position:relative; overflow:hidden; transition:background .3s; } body.home .feature-card:hover { background:#111827; } body.home .feature-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--accent),transparent); opacity:0; transition:opacity .3s; } body.home .feature-card:hover::before { opacity:1; } body.home .feature-icon { font-size:2rem; margin-bottom:20px; display:block; } body.home .feature-title { font-size:1.1rem; font-weight:700; margin-bottom:12px; } body.home .feature-desc { font-size:.875rem; color:var(--muted); line-height:1.7; } body.home .feature-tag { display:inline-block; margin-top:16px; padding:4px 10px; font-family:'JetBrains Mono',monospace; font-size:.65rem; letter-spacing:.1em; border:1px solid var(--border); color:var(--muted); } body.home .roadmap { position:relative; z-index:1; padding:80px 60px; max-width:1200px; margin:0 auto; } body.home .roadmap-list { margin-top:48px; } body.home .roadmap-item { display:grid; grid-template-columns:120px 1fr; gap:32px; padding:28px 0; border-bottom:1px solid var(--border); align-items:start; } body.home .roadmap-version { font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--accent); padding-top:2px; } body.home .roadmap-version.dim { color:var(--muted); } body.home .roadmap-title { font-weight:700; margin-bottom:6px; } body.home .roadmap-desc { font-size:.875rem; color:var(--muted); line-height:1.6; } body.home .roadmap-status { display:inline-block; padding:3px 10px; font-size:.65rem; font-family:'JetBrains Mono',monospace; letter-spacing:.1em; margin-top:10px; } body.home .status-active { background:rgba(0,255,224,.1); color:var(--accent); border:1px solid rgba(0,255,224,.3); } body.home .status-complete { background:rgba(0,255,224,.08); color:var(--accent); border:1px solid rgba(0,255,224,.25); } /* planned / candidate — matched to the pill style + amber UNKNOWN motif */ body.home .status-planned { background:rgba(245,158,11,.10); color:var(--accent3); border:1px solid rgba(245,158,11,.30); } body.home .status-candidate { background:rgba(100,116,139,.10); color:var(--muted); border:1px solid var(--border); } body.home footer { position:relative; z-index:1; border-top:1px solid var(--border); padding:48px 60px; display:flex; align-items:center; justify-content:space-between; } body.home .footer-logo { font-size:1rem; font-weight:800; color:var(--accent); letter-spacing:.15em; } body.home .footer-copy { font-size:.8rem; color:var(--muted); } body.home .footer-links { display:flex; gap:28px; } body.home .footer-links a { color:var(--muted); text-decoration:none; font-size:.8rem; transition:color .2s; } body.home .footer-links a:hover { color:var(--accent); } body.home::-webkit-scrollbar { width:4px; } body.home::-webkit-scrollbar-track { background:var(--bg); } body.home::-webkit-scrollbar-thumb { background:var(--border); } /* ====================================================== DOC: ROADMAP roadmap.html — light editorial. */ body.doc-roadmap { --paper:#f3efe6; --card:#fbf9f3; --ink:#17150f; --ink2:#544f44; --line:#ddd5c4; --line2:#cbc2ad; --teal:var(--brand-teal); --teal2:var(--brand-teal-deep); --sat:var(--vk-sat); --unsat:var(--vk-unsat); --unk:var(--vk-unk); --disp:"Fraunces",Georgia,serif; --body:"Hanken Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",monospace; background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.6; background-image:radial-gradient(var(--line) .5px,transparent .5px); background-size:24px 24px; background-position:-12px -12px; } body.doc-roadmap .wrap { max-width:880px; margin:0 auto; padding:3rem 1.4rem 5rem; } body.doc-roadmap nav.bar { display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--ink); padding-bottom:.9rem; margin-bottom:2.4rem; } body.doc-roadmap .brand { font-family:var(--disp); font-weight:800; font-size:1.4rem; letter-spacing:-.02em; } body.doc-roadmap .brand b { color:var(--teal); } body.doc-roadmap nav.bar a { color:var(--ink2); text-decoration:none; font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; margin-left:1.2rem; } body.doc-roadmap nav.bar a:hover { color:var(--teal2); } body.doc-roadmap .kick { font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal2); margin-bottom:.8rem; } body.doc-roadmap h1 { font-family:var(--disp); font-weight:600; font-size:clamp(2.4rem,6vw,3.6rem); line-height:1.02; letter-spacing:-.025em; margin-bottom:.7rem; } body.doc-roadmap h1 em { font-style:italic; color:var(--teal); } body.doc-roadmap .lede { font-size:1.15rem; color:var(--ink2); max-width:62ch; margin-bottom:2.6rem; } body.doc-roadmap h2 { font-family:var(--disp); font-weight:600; font-size:1.7rem; letter-spacing:-.02em; margin:2.6rem 0 1rem; padding-top:1.4rem; border-top:1px solid var(--line); } body.doc-roadmap h3 { font-size:1.12rem; font-weight:700; margin:1.4rem 0 .4rem; } body.doc-roadmap p { margin:.7rem 0; max-width:64ch; } body.doc-roadmap .now { display:inline-block; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; background:var(--teal); color:#eafff9; padding:.12rem .5rem; border-radius:999px; font-weight:600; vertical-align:middle; margin-left:.5rem; } body.doc-roadmap .planned { background:transparent; color:var(--teal2); border:1px solid var(--teal2); } body.doc-roadmap .cand { background:transparent; color:var(--ink2); border:1px solid var(--line2); } body.doc-roadmap .invariant { font-family:var(--mono); font-size:.86rem; background:var(--card); border:1px dashed var(--teal2); border-radius:10px; padding:1.1rem 1.3rem; margin:1.4rem 0; line-height:1.7; color:var(--ink); } body.doc-roadmap .invariant b { color:var(--teal2); } body.doc-roadmap table { width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.92rem; } body.doc-roadmap th, body.doc-roadmap td { text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); } body.doc-roadmap th { font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2); font-weight:600; } body.doc-roadmap td.mono, body.doc-roadmap .mono { font-family:var(--mono); font-size:.85rem; } body.doc-roadmap .step { display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start; background:var(--card); border:1px solid var(--line2); border-radius:10px; padding:1.1rem 1.3rem; margin:.9rem 0; box-shadow:0 12px 30px -26px rgba(20,16,8,.5); } body.doc-roadmap .step .n { font-family:var(--disp); font-weight:800; font-size:1.8rem; color:var(--teal); line-height:1; } body.doc-roadmap .step h3 { margin:0 0 .25rem; } body.doc-roadmap .step p { margin:.3rem 0; color:var(--ink2); font-size:.95rem; } body.doc-roadmap .verdicts { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0; } body.doc-roadmap .vchip { font-family:var(--mono); font-size:.72rem; font-weight:600; padding:.3rem .7rem; border-radius:6px; border:1.5px solid; } body.doc-roadmap .vs { color:var(--sat); border-color:var(--sat); } body.doc-roadmap .vu { color:var(--unsat); border-color:var(--unsat); } body.doc-roadmap .vk { color:var(--unk); border-color:var(--unk); } body.doc-roadmap ul { margin:.5rem 0 .5rem 1.1rem; } body.doc-roadmap li { margin:.3rem 0; max-width:62ch; } body.doc-roadmap footer { margin-top:3.2rem; border-top:2px solid var(--ink); padding-top:1.1rem; font-size:.82rem; color:var(--ink2); } body.doc-roadmap footer a { color:var(--teal2); } body.doc-roadmap .disclaim { font-size:.82rem; color:var(--ink2); font-style:italic; margin-top:.6rem; } /* ========================================================= DOC: SPEC spec.html — light document. NOTE: @page / @media print rules stay in a small inline block in spec.html (they cannot be scoped to one page). */ body.doc-spec { --paper:#fbf9f3; --ink:#17150f; --ink2:#4d4940; --line:#ddd5c4; --line2:#cbc2ad; --teal:var(--brand-teal); --teal2:var(--brand-teal-deep); --sat:var(--vk-sat); --unsat:var(--vk-unsat); --unk:var(--vk-unk); --disp:"Fraunces",Georgia,serif; --body:"Hanken Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",monospace; background:#efe9dc; color:var(--ink); font-family:var(--body); line-height:1.62; } body.doc-spec .page { max-width:760px; margin:2rem auto; background:var(--paper); padding:3.4rem 3.2rem; box-shadow:0 30px 60px -40px rgba(20,16,8,.5); border:1px solid var(--line2); } body.doc-spec .titleblock { border-bottom:3px solid var(--ink); padding-bottom:1.4rem; margin-bottom:1.8rem; } body.doc-spec .doctype { font-family:var(--mono); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--teal2); } body.doc-spec h1 { font-family:var(--disp); font-weight:800; font-size:2.5rem; line-height:1.02; letter-spacing:-.025em; margin:.5rem 0 .3rem; } body.doc-spec .ver { font-family:var(--mono); font-size:.9rem; color:var(--ink2); } body.doc-spec .sub { font-size:1.05rem; color:var(--ink2); margin:.5rem 0 1rem; max-width:54ch; } body.doc-spec .meta { font-family:var(--mono); font-size:.78rem; color:var(--ink2); line-height:1.8; } body.doc-spec .meta a { color:var(--teal2); text-decoration:none; } body.doc-spec h2 { font-family:var(--disp); font-weight:600; font-size:1.55rem; letter-spacing:-.015em; margin:2.2rem 0 .7rem; padding-top:1.2rem; border-top:1px solid var(--line); } body.doc-spec h2 .num { color:var(--teal); font-family:var(--mono); font-size:1rem; font-weight:600; margin-right:.6rem; vertical-align:middle; } body.doc-spec h3 { font-size:1.08rem; font-weight:700; margin:1.3rem 0 .3rem; } body.doc-spec p { margin:.7rem 0; } body.doc-spec .abstract { font-size:1.02rem; color:var(--ink2); background:#f4eee0; border-left:3px solid var(--teal); padding:1rem 1.3rem; border-radius:0 8px 8px 0; } body.doc-spec .principle { font-weight:600; color:var(--ink); } body.doc-spec blockquote { margin:1rem 0; padding:.8rem 1.2rem; border-left:3px solid var(--teal2); background:#f4eee0; font-family:var(--disp); font-style:italic; font-size:1.05rem; color:var(--ink); } body.doc-spec table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.93rem; } body.doc-spec th, body.doc-spec td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; } body.doc-spec th { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2); font-weight:600; } body.doc-spec .mono { font-family:var(--mono); font-size:.85rem; } body.doc-spec .vS { color:var(--sat); font-weight:700; } body.doc-spec .vU { color:var(--unsat); font-weight:700; } body.doc-spec .vK { color:var(--unk); font-weight:700; } body.doc-spec pre { background:#11100b; color:#e7e2d4; font-family:var(--mono); font-size:.82rem; padding:.9rem 1.1rem; border-radius:8px; overflow-x:auto; } body.doc-spec ul, body.doc-spec ol { margin:.5rem 0 .5rem 1.2rem; } body.doc-spec li { margin:.3rem 0; } body.doc-spec .foot { margin-top:2.6rem; border-top:1px solid var(--line); padding-top:1rem; font-size:.8rem; color:var(--ink2); font-style:italic; }