/* SMCLRD / Culture subdomain - International standard minimal style White + gray, high readability, accessible, print-friendly. */ /* ============================================================ Theme tokens (Light default + Dark via system or forced) - default: light - auto dark: prefers-color-scheme: dark (unless forced light) - forced: ============================================================ */ :root{ /* light */ --bg:#ffffff; --fg:#111827; /* near-black */ --muted:#6b7280; /* gray */ --muted-2:#9ca3af; /* light gray */ --card:#ffffff; --border:#e5e7eb; --shadow:0 1px 2px rgba(0,0,0,.06); --radius:14px; --max:980px; --link:#111827; --link-hover:#374151; --accent:#111827; /* let browser render native controls well */ color-scheme: light dark; } /* auto dark (system) unless forced light */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0b0f14; --fg:#e5e7eb; --muted:#a1a1aa; --muted-2:#71717a; --card:#0f1620; --border:rgba(255,255,255,.12); --shadow:0 1px 2px rgba(0,0,0,.40); --link:#e5e7eb; --link-hover:#ffffff; --accent:#e5e7eb; } } /* forced dark */ :root[data-theme="dark"]{ --bg:#0b0f14; --fg:#e5e7eb; --muted:#a1a1aa; --muted-2:#71717a; --card:#0f1620; --border:rgba(255,255,255,.12); --shadow:0 1px 2px rgba(0,0,0,.40); --link:#e5e7eb; --link-hover:#ffffff; --accent:#e5e7eb; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--fg); font:16px/1.65 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; } a{color:var(--link); text-decoration:underline; text-underline-offset:3px} a:hover{color:var(--link-hover)} a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:8px} header, main, footer{ width:100%; } header{ border-bottom:1px solid var(--border); background:var(--bg); } header > *{ max-width:var(--max); margin:0 auto; padding:22px 18px; } h1{ margin:0; font-size:36px; letter-spacing:-.02em; } .subtitle{ margin:.35rem 0 0 0; color:var(--muted); font-size:16px; } .muted{color:var(--muted)} .updated{ color:var(--muted); font-size:13px; margin:18px 0 0 0; } .topnav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; } .topnav a{ display:inline-block; padding:8px 12px; border:1px solid var(--border); border-radius:999px; text-decoration:none; color:var(--fg); background:var(--card); } .topnav a:hover{ background:rgba(127,127,127,.10); } .topnav a.muted{ color:var(--muted); } main{ max-width:var(--max); margin:0 auto; padding:22px 18px 42px; } .card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 18px; margin:14px 0; } .card h2{ margin:0 0 8px 0; font-size:20px; letter-spacing:-.01em; } .card h3{ margin:14px 0 6px 0; font-size:16px; } .card-title{ margin-top:14px; font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); } .section-lead{ margin:10px 0 12px; font-size:16px; color:var(--fg); opacity:.92; } ul{padding-left:18px; margin:10px 0} li{margin:6px 0} hr{ border:0; border-top:1px solid var(--border); margin:0; } footer{ border-top:1px solid var(--border); background:var(--bg); } footer > *{ max-width:var(--max); margin:0 auto; padding:20px 18px; color:var(--muted); font-size:14px; } footer a{color:var(--muted); text-decoration:underline} footer a:hover{color:var(--fg)} .btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:12px} .btn-primary, .btn-ghost{ display:inline-flex; align-items:center; gap:.5rem; padding:.62rem 1rem; border-radius:12px; border:1px solid var(--border); text-decoration:none; font-weight:600; background:var(--card); color:var(--fg); } .btn-primary{ border-color:var(--accent); } .btn-primary:hover{ background:rgba(127,127,127,.10); } .btn-ghost{ color:var(--muted); } .btn-ghost:hover{ background:rgba(127,127,127,.10); color:var(--fg); } .grid{ display:grid; gap:14px; } @media (min-width: 900px){ .grid{grid-template-columns:1fr 1fr} } /* Print-friendly */ @media print{ header, footer, .topnav{display:none !important} main{max-width:none; padding:0} .card{box-shadow:none} } /* ============================================================ Updates: permalinks ============================================================ */ .permalink{ text-decoration:none; margin-left:.4rem; opacity:.55; font-weight:600; } .permalink:hover{ opacity:1; } /* ============================================================ Updates: archive block ============================================================ */ details.archive{ margin-top:1rem; } details.archive summary{ cursor:pointer; user-select:none; padding:.6rem .8rem; border:1px solid var(--border); border-radius:.6rem; background:rgba(127,127,127,.08); } details.archive summary strong{ margin-right:.4rem; } .archive-list article{ margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--border); } /* ============================================================ Updates: tags ============================================================ */ .tag{ display:inline-block; padding:.12rem .45rem; margin-right:.35rem; border:1px solid var(--border); border-radius:.5rem; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; background:rgba(127,127,127,.08); } /* Tag bar */ .tagbar .tag-links{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0 .4rem; } .tagbar .taglink{ display:inline-block; padding:.38rem .7rem; border:1px solid var(--border); border-radius:.7rem; text-decoration:none; color:inherit; background:rgba(127,127,127,.08); } .tagbar .taglink:hover{ background:rgba(127,127,127,.14); } .tagbar .rss-by-tag{ margin-top:.35rem; } .tag-section{ margin-top:.9rem; } /* Tag grouped lists */ .tag-list article{ margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--border); } .tag-list .muted{ margin:.4rem 0; } /* Active tag link */ .taglink.active, .tagbar .taglink[aria-current="page"]{ background: rgba(127,127,127,.18); border-color: rgba(127,127,127,.35); font-weight: 600; } /* ============================================================ Theme toggle button (in nav) ============================================================ */ .theme-toggle{ padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--fg); cursor:pointer; font-weight:600; } .theme-toggle:hover{ background:rgba(127,127,127,.10); }