:root{ --bg:#070b14; --panel:#0a1222; --panel2:#0b172f; --text:#eaf0ff; --muted:#9bb0d1; --line:rgba(255,255,255,.08); --accent:#ff7a2f; --accent2:#ffb36b; --chip:rgba(255,255,255,.05); --shadow:0 16px 60px rgba(0,0,0,.45); --focus:rgba(255,122,47,.35); --g1: rgba(255,122,47,.10); --g2: rgba(111,210,255,.09); --g3a: rgba(7,11,20,0); --g3b: rgba(7,11,20,.35); --g3c: rgba(7,11,20,.75); } /* Theme switching. JS toggles `data-theme` on . */ html[data-theme="dark"]{ --bg:#070b14; --panel:#0a1222; --panel2:#0b172f; --text:#eaf0ff; --muted:#9bb0d1; --line:rgba(255,255,255,.08); --chip:rgba(255,255,255,.05); --shadow:0 16px 60px rgba(0,0,0,.45); --focus:rgba(255,122,47,.35); --g1: rgba(255,122,47,.10); --g2: rgba(111,210,255,.09); --g3a: rgba(7,11,20,0); --g3b: rgba(7,11,20,.35); --g3c: rgba(7,11,20,.75); } html[data-theme="light"]{ --bg:#f6f7fb; --panel:#ffffff; --panel2:#eef2f8; --text:#0b1220; --muted:#4c5b77; --line:rgba(0,0,0,.10); --chip:rgba(0,0,0,.04); --shadow:0 18px 60px rgba(13,20,35,.12); --focus:rgba(255,122,47,.25); --g1: rgba(255,122,47,.12); --g2: rgba(0,110,255,.10); --g3a: rgba(246,247,251,0); --g3b: rgba(246,247,251,.55); --g3c: rgba(246,247,251,1); } @media (prefers-color-scheme: light){ html[data-theme="system"]{ --bg:#f6f7fb; --panel:#ffffff; --panel2:#eef2f8; --text:#0b1220; --muted:#4c5b77; --line:rgba(0,0,0,.10); --chip:rgba(0,0,0,.04); --shadow:0 18px 60px rgba(13,20,35,.12); --focus:rgba(255,122,47,.25); --g1: rgba(255,122,47,.12); --g2: rgba(0,110,255,.10); --g3a: rgba(246,247,251,0); --g3b: rgba(246,247,251,.55); --g3c: rgba(246,247,251,1); } } html,body{height:100%} body{ margin:0; background: radial-gradient(1100px 700px at 18% 12%, var(--g1), transparent 60%), radial-gradient(900px 700px at 78% 18%, var(--g2), transparent 62%), linear-gradient(180deg, var(--g3a) 0%, var(--g3b) 55%, var(--g3c) 100%), var(--bg); background-repeat:no-repeat; background-size:cover; background-position:center; color:var(--text); font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas, Liberation Mono,Courier New,monospace; letter-spacing:.004em; } a{color:inherit} /* Make components readable in light mode (keep same shapes). */ html[data-theme="light"] .hdr{ background:linear-gradient(180deg, rgba(246,247,251,.92), rgba(246,247,251,.70)); } @media (prefers-color-scheme: light){ html[data-theme="system"] .hdr{ background:linear-gradient(180deg, rgba(246,247,251,.92), rgba(246,247,251,.70)); } } h1,h2,h3{letter-spacing:-.01em} .muted{color:var(--muted)} .title{font-weight:900} .meta{color:var(--muted); font-size:12px; margin-top:6px} /* Layout */ .wrap{min-height:100vh} .hdr{ position:sticky; top:0; z-index:100; background:linear-gradient(180deg, rgba(7,11,20,.92), rgba(7,11,20,.70)); backdrop-filter: blur(12px); border-bottom:1px solid var(--line); } .hdr-inner{ max-width:1400px; margin:0 auto; padding:14px 18px; display:flex; align-items:center; gap:14px; } .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:900; letter-spacing:.14em; text-transform:uppercase; } .brand-badge{ width:10px; height:10px; border-radius:4px; background:linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:0 0 0 4px rgba(255,122,47,.12); } .nav{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; } .navlink{ text-decoration:none; color:var(--muted); font-weight:900; padding:6px 8px; border-radius:9px; white-space:nowrap; } .navlink:hover{color:var(--text)} .navlink.active{ color:var(--text); box-shadow:inset 0 -2px 0 rgba(255,122,47,.85); } .navgroup{position:relative; flex:0 0 auto} .navgroup > button{ border:0; background:transparent; color:var(--muted); font:inherit; font-weight:900; padding:8px 10px; border-radius:9px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; } .navgroup > button:hover{color:var(--text)} .navgroup.is-active > button{ color:var(--text); box-shadow:inset 0 -2px 0 rgba(255,122,47,.85); } .caret{opacity:.75} .mega{ display:none; position:absolute; left:0; top:100%; z-index:220; width:min(720px, 92vw); padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--text); box-shadow:var(--shadow); overflow:hidden; } .mega::before{ /* Extend hover area so the dropdown doesn't "drop" while moving cursor */ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; } .navgroup:hover .mega, .navgroup:focus-within .mega{display:block} .navgroup.is-open .mega{display:block} .mega-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; } .mega a{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:12px; text-decoration:none; background:var(--panel2); border:1px solid var(--line); } .mega a:hover{filter:brightness(1.02)} .mega a.active{border-color:rgba(255,122,47,.55); background:rgba(255,122,47,.10)} .mega .lbl{font-weight:900} .mega .hint{color:var(--muted); font-size:12px; margin-top:2px} .actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; } .search{ display:flex; align-items:center; gap:8px; } .search input{ width:clamp(160px, 18vw, 260px); padding:9px 10px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--text); outline:none; } .search input:focus{border-color:rgba(255,122,47,.55); box-shadow:0 0 0 3px var(--focus)} .btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:12px; padding:9px 12px; background:rgba(255,255,255,.02); color:var(--text); text-decoration:none; cursor:pointer; white-space:nowrap; } .btn:hover{background:rgba(255,255,255,.03)} .btn.ghost{background:transparent} .btn.primary{background:var(--accent); border-color:var(--accent); color:#120a04; font-weight:900} .burger{display:none} /* Content */ .main{max-width:1400px; margin:0 auto; padding:20px 18px} .card + .card{margin-top:14px} .card{box-shadow:0 12px 40px rgba(0,0,0,.20)} .cardlink.card:hover{border-color:rgba(255,122,47,.35)} /* Content typography (builder output) */ .prose{max-width:920px} .prose h1{font-size:30px; margin:0 0 10px} .prose h2{font-size:20px; margin:18px 0 8px} .prose h3{font-size:16px; margin:16px 0 6px} .prose p{margin:0 0 10px} .prose ul{margin:0 0 10px; padding-left:18px} .prose a{color:var(--text); text-decoration:underline; text-decoration-color:rgba(255,122,47,.55)} .prose a:hover{text-decoration-color:rgba(255,122,47,.95)} .prose code{background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); padding:1px 6px; border-radius:8px} .prose pre{background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.08); padding:12px; border-radius:12px; overflow:auto} .hero-home{ margin-top:8px; padding:18px; border:1px solid var(--line); border-radius:18px; background: radial-gradient(900px 420px at 12% 22%, rgba(255,122,47,.14), transparent 62%), radial-gradient(700px 380px at 86% 28%, rgba(111,210,255,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); box-shadow:0 18px 70px rgba(0,0,0,.35); } .hero-grid{display:grid; grid-template-columns:1.2fr .9fr; gap:14px; align-items:stretch} .hero-copy h1{margin:6px 0 0; font-size:34px; line-height:1.05; letter-spacing:-.02em} .hero-kicker{color:var(--muted); font-weight:900; letter-spacing:.14em; text-transform:uppercase; font-size:12px} .hero-ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px} .hero-bullets{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; color:var(--muted)} .hero-bullet{display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); border-radius:999px; padding:6px 10px} .dot{width:8px; height:8px; border-radius:3px; background:linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:0 0 0 4px rgba(255,122,47,.12)} .hero-panel{display:flex; flex-direction:column} .stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px} .stat{border:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.18); border-radius:14px; padding:10px} .stat .k{color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase} .stat .v{font-weight:900; margin-top:6px} .mini{display:block; text-decoration:none; padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02)} .mini:hover{background:rgba(255,255,255,.04)} .mini .k{color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase} .mini .t{font-weight:900; margin-top:6px} .mini .d{color:var(--muted); font-size:12px; margin-top:4px} .card{ border:1px solid var(--line); border-radius:16px; padding:16px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); } .hero{padding:20px 18px} .hero h1{margin:0; font-size:26px; letter-spacing:-.01em} .hero .meta{color:var(--muted); margin-top:8px} .section{margin-top:14px} .section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px} .section-title{font-weight:900; letter-spacing:.10em; text-transform:uppercase; font-size:12px; color:var(--muted)} .grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; margin-top:12px} .cardlink{text-decoration:none; display:block} .cardlink .title{font-weight:900} .cardlink .meta{color:var(--muted); font-size:12px; margin-top:6px} .pill{ display:inline-block; padding:4px 10px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted); } /* Drawer (mobile) */ .drawer{ position:fixed; inset:0; z-index:200; display:none; } .drawer.on{display:block} .drawer-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); } .drawer-panel{ position:absolute; top:0; right:0; height:100%; width:min(420px, 92vw); background:linear-gradient(180deg, var(--panel2), rgba(7,11,20,.96)); border-left:1px solid var(--line); box-shadow:var(--shadow); padding:14px; overflow:auto; } .drawer-head{display:flex; align-items:center; justify-content:space-between; gap:12px} .drawer-title{font-weight:900; letter-spacing:.12em; text-transform:uppercase} .drawer-nav{margin-top:12px; display:flex; flex-direction:column; gap:6px} .drawer-nav a{ text-decoration:none; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); color:var(--text); } .drawer-nav a:hover{background:rgba(255,255,255,.04)} .footer{ margin-top:22px; border:1px solid var(--line); border-radius:16px; padding:16px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)); color:var(--muted); } .footer-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px} .footer-note{margin-top:12px; font-size:12px; color:rgba(234,240,255,.55)} .footer-split{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px} .footer-split h5{margin-top:0} .footer h5{margin:0 0 8px 0; color:var(--text); font-weight:900; font-size:12px; letter-spacing:.12em; text-transform:uppercase} .footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px} .footer a{text-decoration:none; color:var(--muted)} .footer a:hover{color:var(--text); text-decoration:underline} @media (max-width: 980px){ .nav{display:none} .burger{display:inline-flex} .actions .search{display:none} .main{padding:18px 14px} .hero-grid{grid-template-columns:1fr} .hero-copy h1{font-size:30px} .footer-split{grid-template-columns:1fr; gap:12px} } /* Prevent nav from being hidden behind actions on "in-between" widths. */ @media (max-width: 1180px){ .hdr-inner{flex-wrap:wrap} .actions{margin-left:auto} .nav{flex:0 0 100%; order:3} .actions{order:2} } @media (max-width: 720px){ .actions .btn{padding:9px 10px} .footer-grid{grid-template-columns:1fr} }