/* Eternity Project theme — portable core styles. Usage: to activate the wasteland variant, or toggle the attribute at runtime and persist the choice yourself. */ :root { --ink:#11212b; --paper:#f1f1e9; --acid:#c7ef4b; --orange:#ff6b35; --line:#b9c5bc; --muted:#59706b; --panel:rgba(241,241,233,.8); --field:#fbfbf6; --backdrop:rgba(17,33,43,.85); --flash-error:#ffe3d9; --grid:17,33,43; --grid-a1:.05; --grid-a2:.04; } [data-theme="dark"] { --ink:#e7e2d3; --paper:#161210; --acid:#8fae3d; --orange:#e4632c; --line:#4a3f33; --muted:#a89a86; --panel:rgba(22,18,16,.82); --field:#211b17; --backdrop:rgba(8,6,5,.9); --flash-error:#3a1c14; --grid:228,98,44; --grid-a1:.07; --grid-a2:.05; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"Space Grotesk", sans-serif; transition:background .2s, color .2s; } body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.4; background-image: linear-gradient(90deg, transparent 49.5%, rgba(var(--grid),var(--grid-a1)) 50%, transparent 50.5%), linear-gradient(rgba(var(--grid),var(--grid-a2)) 1px, transparent 1px); background-size:70px 70px, 7px 7px; } [data-theme="dark"] body::after { content:""; position:fixed; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay; background-image: radial-gradient(circle at 12% 20%, rgba(143,174,61,.12), transparent 35%), radial-gradient(circle at 85% 75%, rgba(228,98,44,.14), transparent 40%); } a { color:inherit; text-decoration:none; } /* header / nav */ .site-header { min-height:76px; padding:16px max(5vw, 24px); border-bottom:1px solid var(--ink); display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; z-index:1; } nav { display:flex; align-items:center; gap:22px; font-family:"DM Mono", monospace; font-size:12px; } nav a:hover { color:var(--orange); } /* buttons */ .button { display:inline-flex; align-items:center; justify-content:center; gap:18px; background:var(--ink); color:var(--paper); padding:13px 17px; border:1px solid var(--ink); font:500 13px "DM Mono", monospace; cursor:pointer; } .button:hover { background:var(--acid); color:var(--ink); } .button.compact { padding:9px 12px; } .theme-toggle { border:1px solid var(--ink); background:transparent; color:inherit; padding:6px 9px; font:11px "DM Mono", monospace; cursor:pointer; letter-spacing:.5px; } .theme-toggle:hover { background:var(--acid); color:var(--paper); } /* hero */ .hero { min-height:420px; padding:clamp(70px, 12vw, 150px) max(5vw, 24px) 75px; border-bottom:1px solid var(--ink); position:relative; overflow:hidden; z-index:1; } .signal-label { color:var(--orange); font:11px "DM Mono", monospace; letter-spacing:.7px; } .hero h1 { max-width:820px; margin:20px 0; font-size:clamp(40px, 9vw, 110px); line-height:.88; font-weight:600; } .hero h1 em { font-family:Georgia, serif; font-weight:400; } .hero p { max-width:510px; color:var(--muted); font-size:18px; line-height:1.45; margin:28px 0; } /* cards / grid */ .card-grid { display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--ink); border-left:1px solid var(--ink); } .card { min-height:260px; padding:21px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); display:flex; flex-direction:column; transition:background .2s; } .card:hover { background:var(--acid); } .card h2 { font-size:26px; line-height:1; margin:22px 0 12px; } .card p { line-height:1.45; margin:0; color:var(--muted); } /* forms */ .panel { padding:27px; border:1px solid var(--ink); background:var(--panel); display:grid; gap:19px; } label { display:grid; gap:7px; font:11px "DM Mono", monospace; } input, textarea { width:100%; resize:vertical; background:var(--field); border:1px solid var(--ink); border-radius:0; padding:12px; color:var(--ink); font:15px "Space Grotesk", sans-serif; } input:focus, textarea:focus { outline:3px solid var(--acid); outline-offset:1px; } /* code blocks */ .code-block { margin:28px 0; border:1px solid var(--ink); background:var(--ink); } .code-block-head { display:flex; align-items:center; justify-content:space-between; min-height:38px; padding:7px 10px 7px 14px; color:var(--paper); font:11px "DM Mono", monospace; letter-spacing:.7px; text-transform:uppercase; } .code-block pre { margin:0; padding:18px; overflow:auto; background:var(--field); color:var(--ink); font:14px/1.55 "DM Mono", monospace; white-space:pre; } /* flash / alerts */ .flash { margin:16px 0; padding:11px 14px; font:12px "DM Mono", monospace; border:1px solid var(--ink); } .flash.error { border-color:var(--orange); background:var(--flash-error); } .flash.success { background:var(--acid); } footer { border-top:1px solid var(--ink); padding:23px max(5vw, 24px); display:flex; justify-content:space-between; font:10px "DM Mono", monospace; color:var(--muted); position:relative; z-index:1; } @media (max-width:720px) { .card-grid { grid-template-columns:1fr; } .site-header { flex-wrap:wrap; } }