16 lines
1.4 KiB
CSS
16 lines
1.4 KiB
CSS
:root { color-scheme: dark; --ink:#eef3ec; --muted:#a7b3a8; --panel:#17221e; --accent:#b6e36f; }
|
|
* { box-sizing:border-box; }
|
|
body { margin:0; padding:2rem; background:#0c1411; color:var(--ink); font:16px/1.5 system-ui,sans-serif; }
|
|
header { max-width:1200px; margin:auto auto 2rem; display:flex; align-items:end; justify-content:space-between; gap:1.5rem; }
|
|
h1 { margin:.1rem 0 0; font-size:clamp(2rem,5vw,4rem); letter-spacing:-.05em; }
|
|
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.15em; font-size:.75rem; }
|
|
nav { display:flex; padding:.3rem; border:1px solid #304139; border-radius:999px; background:#111b17; }
|
|
button { border:0; border-radius:999px; padding:.65rem 1rem; color:var(--muted); background:transparent; cursor:pointer; }
|
|
button.active { color:#172012; background:var(--accent); }
|
|
main { max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr)); gap:1rem; }
|
|
.card { overflow:hidden; padding:1rem; border:1px solid #26362f; border-radius:1rem; background:var(--panel); box-shadow:0 18px 45px #0004; }
|
|
h2 { margin:0 0 .75rem; font-size:1rem; color:var(--muted); font-weight:600; }
|
|
img { display:block; width:100%; min-height:180px; object-fit:contain; background:white; border-radius:.45rem; }
|
|
@media (max-width:700px) { body{padding:1rem} header{align-items:start;flex-direction:column} nav{width:100%} button{flex:1} }
|
|
|