/* ---------- Color tokens ---------- */ :root { --bg:#F3EFD2; --fg:#393B16; --link:#0755d1; --muted:#6b6b4f; --card:#ffffff; color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --bg:#393B16; --fg:#F3EFD2; --link:#9bb6ff; --muted:#c9c7a6; --card:#2e2f18; color-scheme: dark; } } /* Manual override: */ html[data-theme="light"] { --bg:#F3EFD2; --fg:#393B16; --link:#0755d1; --muted:#6b6b4f; --card:#ffffff; color-scheme: light; } html[data-theme="dark"] { --bg:#393B16; --fg:#F3EFD2; --link:#9bb6ff; --muted:#c9c7a6; --card:#2e2f18; color-scheme: dark; } /* ---------- Base & layout ---------- */ html, body { height:100%; } body { margin:0; background:var(--bg); color:var(--fg); min-height:100svh; display:flex; flex-direction:column; transition: background-color .2s ease, color .2s ease; /* font-family etc optional */ } a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; } .muted { color:var(--muted); } .card { background:var(--card); border:1px solid color-mix(in oklab, var(--fg) 12%, transparent); border-radius:10px; padding:16px; } /* ---------- Header ---------- */ .site-header { position:sticky; top:0; z-index:1000; padding:10px; } .header-inner { display:flex; align-items:center; justify-content:space-between; } /* ---------- Logo (inline SVG uses currentColor) ---------- */ .logo { color:var(--fg); display:inline-flex; align-items:center; text-decoration:none; } .logo:hover { text-decoration:none; } .logo svg { display:block; width:36px; height:36px; } /* Only keep this nudge if you really need it; better fix the SVG viewBox */ .logo svg { transform: translateX(-8px); } .logo-vertical { display:inline-flex; flex-direction:column; transition:color .2s ease; } .logo-vertical .logo-caption { color:currentColor; } .logo-vertical:hover { color:#BDC232; } .logo-caption { margin-top:4px; display:flex; flex-direction:column; gap:1px; font-size:12px; line-height:1.05; } .logo-caption p { margin:0; } /* ---------- Hamburger (placeholder) ---------- */ .hamburger { appearance:none; cursor:pointer; background:var(--card); color:var(--fg); border:1px solid color-mix(in oklab, var(--fg) 12%, transparent); border-radius:10px; padding:8px 10px; display:inline-flex; flex-direction:column; justify-content:center; gap:4px; } .hamburger span { display:block; width:22px; height:2px; background:currentColor; border-radius:1px; } .hamburger:hover { background:color-mix(in oklab, var(--fg) 6%, var(--bg)); } /* ---------- Main / search layout ---------- */ /*
... */ .page-main { flex:1 0 auto; } /* Center the search block when idle (no query yet) */ .page-main.is-idle { display:grid; place-items:center; } .container { width:min(900px, 92vw); margin:0 auto; padding:24px; } .container { transform: translateY(-80px); } .container h1 { margin:0 0 12px; } :root { /* Border radius scale */ --radius: 40px; /* default */ } /* (Optional) tweak by breakpoint */ @media (min-width: 768px) { :root { --radius: 12px; --radius-lg: 20px; } } /* Tidy form + results */ .hint { color:var(--muted); font-size:14px; margin-top:8px; } .error { background:#fee; border:1px solid #f99; color:#900; padding:10px 12px; border-radius:8px; margin:10px 0; } .result { border:1px solid #eee; border-radius:10px; padding:14px 16px; margin:10px 0; } .result h3 { margin:.1rem 0 .2rem; font-size:18px; } .result p { margin:.1rem 0; color:#555; }