/* ========= Retro CSS (no-JS, CSP-safe) ========= Palettes: .theme-amber (default), .theme-green, .theme-cga, .theme-paper Optional CRT effect: add .crt to Typography leans mono; pure system fonts (no webfonts) */ /* Base tokens */ :root{ --bg: #0d0b07; /* background */ --ink: #F4C06A; /* text */ --muted: #B08C54; --accent: #FFCC66; /* links/buttons */ --accent-2: #6B4E16; /* hovers/borders */ --maxw: 72ch; --space: clamp(.8rem, 1.6vw, 1.2rem); --border: 2px; --line: repeating-linear-gradient(0deg, transparent 0 2px, color-mix(in srgb, var(--ink) 6%, transparent) 2px 3px); } @media (prefers-color-scheme: light){ :root{ --bg:#F7F2E6; --ink:#2a1d08; --muted:#7a6a55; --accent:#8C5A0B; --accent-2:#C99B5A; } } /* Themes */ body.theme-green{ --bg:#071107; --ink:#5CFF6B; --muted:#2EA23A; --accent:#7CFF8A; --accent-2:#154B17; } body.theme-cga{ --bg:#000014; --ink:#FF00AA; --muted:#00FFFF; --accent:#00FFFF; --accent-2:#7A0070; } body.theme-paper{ --bg:#FBF7EF; --ink:#1E1B16; --muted:#6D665A; --accent:#0A4B5F; --accent-2:#A3937B; } /* CRT scanlines + slight glow */ body.crt{ background-image: var(--line); text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 40%, transparent); } @media (prefers-reduced-motion: reduce){ body.crt{ text-shadow:none; } } /* Global */ *{box-sizing:border-box} html{font-size:16px} body{ margin:0; background:var(--bg); color:var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono","Courier New", monospace; line-height:1.6; text-rendering:optimizeLegibility; } main{max-width:var(--maxw); margin-inline:auto; padding:calc(var(--space)*2) var(--space)} /* Frame */ header, footer{ border-block-end: var(--border) solid var(--accent-2); background: color-mix(in srgb, var(--bg) 88%, var(--accent-2) 12%); } footer{ border-block-start: var(--border) solid var(--accent-2); border-block-end:0; } /* Nav */ nav{max-width:var(--maxw); margin-inline:auto; padding:var(--space)} nav ul{display:flex; gap:1rem; list-style:none; padding:0; margin:0; flex-wrap:wrap} nav a{ color:var(--ink); text-decoration:none; padding:.25rem .5rem; border: var(--border) solid var(--accent-2); background:transparent; } nav a:hover, nav a[aria-current="page"]{ background: var(--accent-2); color: var(--bg); } /* Type */ h1,h2,h3{margin:1.2em 0 .4em; line-height:1.2; text-transform:none; letter-spacing:.02em} h1{font-size:clamp(2rem,4vw,2.8rem)} h2{font-size:clamp(1.4rem,2.6vw,2rem)} h3{font-size:clamp(1.2rem,2vw,1.4rem)} p,li{font-size:1rem} small{color:var(--muted)} a{color:var(--accent); text-decoration:underline; text-underline-offset:2px} a:hover{color:var(--bg); background:var(--accent); text-decoration:none;} /* Retro rules & separators */ hr{border:0; height:var(--border); background:var(--accent-2); margin:2rem 0} .rule-dotted{border:0; border-top:var(--border) dotted var(--accent-2); height:0} /* Cards / panels (1980s box vibe) */ .card{ border: var(--border) solid var(--accent-2); box-shadow: inset 0 0 0 var(--border) color-mix(in srgb, var(--bg) 70%, var(--accent-2) 30%); padding: var(--space); margin: var(--space) 0; background: color-mix(in srgb, var(--bg) 92%, var(--ink) 8%); } .card-title{ margin-top:0; } /* Buttons */ .btn{ display:inline-block; padding:.55rem .9rem; border: var(--border) solid var(--accent-2); color:var(--ink); background:transparent; text-decoration:none; font-weight:700; } .btn:hover{ background:var(--accent); color:var(--bg); border-color:var(--accent); } .btn-ghost{ border-style:dashed; color:var(--accent); } .btn-ghost:hover{ background:transparent; color:var(--bg); border-color:var(--accent); } /* Lists */ ul.square{ list-style:square; padding-left:1.1rem } ol.dec{ list-style:decimal-leading-zero; padding-left:1.4rem } /* Code / kbd / blockquote */ pre, code, kbd{ font-family: inherit; font-size:.95rem; background: color-mix(in srgb, var(--bg) 85%, var(--ink) 15%); color: var(--ink); border: var(--border) solid var(--accent-2); } code, kbd{ padding:.1rem .3rem } pre{ padding:.8rem; overflow:auto } blockquote{ margin:1rem 0; padding:.8rem 1rem; border-left: var(--border) solid var(--accent-2); background: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%); } /* Tables */ table{ border-collapse:separate; border-spacing:0; width:100%; margin:1rem 0; } th, td{ padding:.6rem .7rem; border: var(--border) solid var(--accent-2); } th{ background: color-mix(in srgb, var(--bg) 80%, var(--accent-2) 20%); text-align:left } /* Forms */ input, textarea, select{ width:100%; padding:.6rem .7rem; color:var(--ink); background: color-mix(in srgb, var(--bg) 92%, var(--ink) 8%); border: var(--border) solid var(--accent-2); } label{ display:block; margin:.5rem 0 .2rem } /* Details (native disclosure = no JS) */ details{ border: var(--border) solid var(--accent-2); padding:.6rem .7rem; background: color-mix(in srgb, var(--bg) 95%, var(--ink) 5%); } summary{ cursor:pointer; font-weight:700 } /* Images */ img{ max-width:100%; height:auto; border: var(--border) solid var(--accent-2); } /* Focus & accessibility */ :focus-visible{ outline:3px solid var(--accent); outline-offset:2px } /* Utility */ .container{ max-width:var(--maxw); margin-inline:auto; padding:0 var(--space) } .grid{ display:grid; gap:var(--space) } .grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); } @media (max-width: 720px){ .grid.two{ grid-template-columns:1fr } } /* Visually hidden utility for a11y */ .visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* Make nav links larger tap targets */ nav a{ padding:.4rem .6rem; }