:root{ --bg:#0f1115; --card:#171923; --text:#e6e6e6; --muted:#9aa3b2; --accent:#a7f3d0; --accent-2:#60a5fa; --gap:12px; } *{box-sizing:border-box;} html,body{height:100%;} body{ margin:0; font-family:"Onest",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.5; } /* Header: brand left, nav right (desktop flex) */ .site-header{ display:flex; align-items:center; justify-content:space-between; padding:16px clamp(16px,4vw,48px); border-bottom:1px solid #232632; background:#0b0d12; position:sticky; top:0; z-index:10; } .brand{font-weight:800; letter-spacing:.5px; font-size:clamp(20px,2vw,26px);} .main-nav{display:flex; gap:16px;} .main-nav a{color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:8px;} .main-nav a:hover{color:var(--text); background:#1f2330;} .container{max-width:1100px; margin:0 auto; padding:20px clamp(16px,4vw,48px);} .hint{color:var(--muted); margin:0 0 14px;} /* Accessibility helper */ .visually-hidden{position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;} /* Search form inline (desktop) */ .search-form{ display:flex; gap:var(--gap); margin-bottom:10px; } .search-form input[type="search"]{ flex:1; min-width:0; padding:12px 14px; border-radius:10px; border:1px solid #2a2f3c; background:#0e121a; color:var(--text); } .search-form button{ padding:12px 16px; border:none; border-radius:10px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#0b0d12; font-weight:700; cursor:pointer; } /* Custom flex grid */ .row.grid{ display:flex; flex-wrap:wrap; gap:var(--gap); } .col{ flex:1 1 calc(33.333% - var(--gap)); min-width:240px; } /* Card styles */ .card{ background:var(--card); border:1px solid #232632; border-radius:14px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.25); } .card img{ width:100%; height:220px; object-fit:cover; display:block; background:#0e121a; } .meta{ padding:10px 12px; color:var(--muted); font-size:12px; display:flex; align-items:center; justify-content:space-between; } /* Footer */ .site-footer{ padding:28px clamp(16px,4vw,48px); color:var(--muted); border-top:1px solid #232632; } /* Mobile (<=320px) stacks */ @media (max-width: 320px){ .site-header{ flex-direction:column; align-items:stretch; gap:8px; } .main-nav{ flex-direction:column; gap:8px; } .search-form{ flex-direction:column; } .col{ flex:1 1 100%; min-width:0; } /* single-column images */ } /* Button hover */ .search-form button:hover{ filter:brightness(1.05); } /* Focus ring */ .search-form input[type="search"]:focus, .search-form button:focus{ outline:2px solid var(--accent-2); outline-offset:2px; } /* Theme toggle button */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; height:36px; min-width:36px; padding:0 10px; border:1px solid #2a2f3c; border-radius:10px; background:transparent; color:var(--text); cursor:pointer; font-size:16px; } .theme-toggle:hover{ background:rgba(255,255,255,.06); } [data-theme="light"] .theme-toggle{ border-color:#d1d5db; } [data-theme="light"] .theme-toggle:hover{ background:#eef2ff; } /* Smoothen theme swaps */ body, .site-header, .site-footer, .card, .main-nav a, .search-form input[type="search"], .theme-toggle{ transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } /* Make sure form controls look right per theme */ :root{ color-scheme: dark; } [data-theme="light"]{ color-scheme: light; } /* === THEME: force tokens + body repaint === */ :root{ --bg:#0f1115; /* dark defaults */ --card:#171923; --text:#e6e6e6; --muted:#9aa3b2; --accent:#a7f3d0; --accent-2:#60a5fa; } /* Light tokens applied when */ html[data-theme="light"]{ --bg:#f7f7fb; --card:#ffffff; --text:#111318; --muted:#5a6371; --accent:#2563eb; --accent-2:#22c55e; } /* Make sure body actually repaints with the active --bg */ html[data-theme="light"] body{ background: var(--bg); } html[data-theme="dark"] body{ background: var(--bg); } /* /Override hard-coded dark backgrounds, */ html[data-theme="light"] .site-header{ background:#ffffff; border-bottom:1px solid #e5e7eb; } html[data-theme="light"] .site-footer{ color:#4b5563; border-top:1px solid #e5e7eb; } html[data-theme="light"] .main-nav a:hover{ background:#eef2ff; } html[data-theme="light"] .search-form input[type="search"]{ background:#ffffff; border:1px solid #d1d5db; color:var(--text); } html[data-theme="light"] .card{ border-color:#e5e7eb; box-shadow:0 2px 12px rgba(0,0,0,.08); } html[data-theme="light"] .card img{ background:#f3f4f6; }