15 lines
1.4 KiB
CSS
15 lines
1.4 KiB
CSS
:root { color-scheme: light; --ink:#111; --muted:#4f4c45; --panel:#faf8f2; --accent:#111; --paper:#f4f1e8; }
|
|
* { box-sizing:border-box; }
|
|
body { margin:0; padding:2rem; background:var(--paper); color:var(--ink); font:16px/1.5 system-ui,sans-serif; }
|
|
header { max-width:1000px; 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(--muted); text-transform:uppercase; letter-spacing:.15em; font-size:.75rem; }
|
|
nav { display:flex; padding:.3rem; border:1px solid #bdb7aa; border-radius:999px; background:#e9e5db; }
|
|
button { border:0; border-radius:999px; padding:.65rem 1rem; color:var(--muted); background:transparent; cursor:pointer; }
|
|
button.active { color:#f8f5ed; background:var(--accent); }
|
|
main { max-width:1000px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
|
|
.card { overflow:hidden; padding:1rem; border:1px solid #c9c3b7; border-radius:1rem; background:var(--panel); box-shadow:0 12px 30px #3d382b18; }
|
|
h2 { margin:0 0 .75rem; font-size:1rem; color:var(--muted); font-weight:600; }
|
|
img { display:block; width:100%; height:auto; object-fit:contain; background:#faf8f2; border-radius:.45rem; }
|
|
@media (max-width:700px) { body{padding:1rem} header{align-items:start;flex-direction:column} nav{width:100%} button{flex:1} }
|