/* ============================================================ Joost van Koesveld — personal site Token system: Color — spine (constant): bg #0b0b0c, card #141416, text #e9e9ec, muted #b8bbc7, gold #CDA018 (logo / brand constant) per-page accent set via [data-page] on : work=#CDA018 physics=#5B7FFF finance=#2BA84A ideas=#B5651D Type — display: "Fraunces" (headlines), body: "Inter", utility/mono: "JetBrains Mono" (labels, tab codes, data) Layout — sticky top nav, hero w/ field-tab signature, content sections Signature — small monospace "field tab" (e.g. PHYS.α) in the hero, framing every page as an entry in one running notebook ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); :root{ --bg:#0b0b0c; --card:#141416; --card-2:#17171a; --text:#e9e9ec; --muted:#b8bbc7; --gold:#CDA018; --line:rgba(255,255,255,.08); --shadow:0 10px 30px rgba(0,0,0,.35); --radius:16px; --accent:#CDA018; /* overridden per page */ } /* per-page accent overrides */ body[data-page="work"] { --accent:#CDA018; } body[data-page="physics"] { --accent:#5B7FFF; } body[data-page="finance"] { --accent:#2BA84A; } body[data-page="about"] { --accent:#B5651D; } body[data-page="home"] { --accent:#CDA018; } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; background: radial-gradient(70% 120% at 100% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--bg); color:var(--text); font-family:'Inter', system-ui, sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } ::selection{ background:color-mix(in srgb, var(--accent) 55%, transparent); color:#111; } h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; letter-spacing:-.01em; margin:0 0 .4em; } .mono{ font-family:'JetBrains Mono', monospace; letter-spacing:.02em; } .wrap{ max-width:1080px; margin:0 auto; padding:0 24px; } /* ---------- header / nav ---------- */ header{ position:sticky; top:0; z-index:20; background:rgba(11,11,12,.75); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line); } .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; } .brand{ display:flex; align-items:center; gap:12px; } .brand img{ width:34px; height:34px; } .brand strong{ font-family:'Fraunces', serif; font-size:17px; } .pagelinks{ display:flex; gap:22px; font-size:14.5px; color:var(--muted); } .pagelinks a{ position:relative; padding:4px 0; transition:.2s; } .pagelinks a:hover, .pagelinks a.current{ color:var(--text); } .pagelinks a.current::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); border-radius:2px; } .navcta{ border:1px solid var(--line); background:var(--card-2); padding:9px 14px; border-radius:10px; font-size:14px; white-space:nowrap; transition:.2s; } .navcta:hover{ border-color:color-mix(in srgb, var(--accent) 60%, var(--line)); } .hamburger{ display:none; } /* ---------- hero + field tab signature ---------- */ .hero{ padding:64px 0 40px; position:relative; } .hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; } .portrait{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); aspect-ratio:4/5; } .portrait img{ width:100%; height:100%; object-fit:cover; } @media (max-width:820px){ .hero-grid{ grid-template-columns:1fr; } .portrait{ max-width:320px; margin:0 auto; } } .field-tab{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono', monospace; font-size:12.5px; color:color-mix(in srgb, var(--accent) 80%, var(--muted)); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background:color-mix(in srgb, var(--accent) 10%, var(--card)); padding:5px 10px; border-radius:999px; margin-bottom:18px; } .field-tab .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); } .hero h1{ font-size:clamp(30px,4.4vw,48px); max-width:16ch; } .hero .lede{ color:var(--muted); max-width:56ch; font-size:17px; margin:14px 0 24px; } .hero .cta-row{ display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--card-2); padding:11px 16px; border-radius:12px; font-size:14.5px; transition:.2s; box-shadow:var(--shadow); } .btn:hover{ transform:translateY(-1px); border-color:color-mix(in srgb, var(--accent) 60%, var(--line)); } .btn.primary{ background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, white)); color:#0b0b0c; border:none; font-weight:600; } /* ---------- cards / sections ---------- */ .section{ padding:36px 0; } .section > h2{ font-size:clamp(21px,2.6vw,28px); margin-bottom:16px; } .section > .kicker{ font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; display:block; } .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); } .grid{ display:grid; gap:16px; } .grid.cols-2{ grid-template-columns:1fr 1fr; } .grid.cols-3{ grid-template-columns:repeat(3,1fr); } /* homepage subject index (signature nav element) */ .index-list{ display:grid; gap:12px; } .index-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:var(--card); transition:.2s; } .index-row:hover{ border-color:color-mix(in srgb, var(--row-accent,var(--accent)) 55%, var(--line)); transform:translateX(2px); } .index-row .left{ display:flex; align-items:center; gap:16px; } .index-row .code{ font-family:'JetBrains Mono', monospace; font-size:13px; color:color-mix(in srgb, var(--row-accent,var(--accent)) 85%, var(--muted)); width:64px; flex-shrink:0; } .index-row h3{ font-size:18px; margin:0 0 2px; } .index-row p{ margin:0; color:var(--muted); font-size:14px; } .index-row .arrow{ color:var(--muted); font-size:18px; } /* list styling */ ul.plain{ list-style:none; padding:0; margin:0; display:grid; gap:10px; } ul.plain li{ padding-left:18px; position:relative; color:var(--muted); } ul.plain li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--accent); } ul.plain strong{ color:var(--text); } .tags{ display:flex; flex-wrap:wrap; gap:8px; } .tag{ border:1px solid var(--line); padding:6px 11px; border-radius:999px; font-size:13px; color:var(--muted); background:var(--card-2); } footer{ padding:44px 24px 32px; text-align:center; color:#8d8f99; border-top:1px solid var(--line); margin-top:40px; } footer a{ color:var(--muted); } footer a:hover{ color:var(--text); } @media (max-width:820px){ .grid.cols-2, .grid.cols-3{ grid-template-columns:1fr; } .pagelinks{ display:none; } }