/* mattswart.co.za — Carrd-matched aesthetic: Heebo, grey on white, minimalist. Mobile-first. Heebo is loaded via in each page . */ :root{ --bg:#ffffff; --fg:#545454; --muted:#8b9099; --line:#e8eaef; --accent:#00d1ff; --accent-ink:#009dbf; --max:960px; --home:800px; --pad:1.25rem; font-size:17px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--fg); font-family:'Heebo',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-weight:400;line-height:1.875;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:underline;transition:color .2s} a:hover{text-decoration:none;color:var(--accent-ink)} h1,h2,h3{line-height:1.2;letter-spacing:-.015em;font-weight:400;margin:0;color:var(--fg)} h1{font-size:clamp(2rem,5.2vw,2.7rem);letter-spacing:-.035em;margin:0 0 .4rem} h2{font-size:1.5rem;margin:2.6rem 0 .7rem} h3{font-size:1.05rem;font-weight:700;margin:1.5rem 0 .35rem} p{margin:0 0 1rem} strong,b{font-weight:700} em{font-style:italic} .muted{color:var(--muted);font-weight:300} .eyebrow{color:var(--muted);font-weight:300;font-size:.95rem;margin:0 0 .35rem} .tag{color:var(--muted);font-weight:300;font-size:1.15rem;margin:0} /* nav — cross-page navigation (Carrd has none; we add it) */ .nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line)} .nav-inner{max-width:var(--max);margin:0 auto;padding:.6rem var(--pad); display:flex;align-items:center;gap:1rem;flex-wrap:wrap} .brand{font-weight:700;letter-spacing:.02em;color:var(--fg);font-size:1.05rem; padding:.45rem .1rem;text-decoration:none} .brand span{color:var(--fg)} .nav-links{display:flex;gap:.2rem;margin-left:auto} .nav-links a{display:inline-flex;align-items:center;color:var(--muted);font-size:1rem; padding:.55rem .7rem;min-height:44px;text-decoration:none;border-radius:6px} .nav-links a:hover{color:var(--fg);background:rgba(0,0,0,.04)} .nav-links a[aria-current]{color:var(--fg);font-weight:700} /* layout */ .wrap{max-width:var(--max);margin:0 auto;padding:2.4rem var(--pad) 3rem} .home{max-width:var(--home)} /* hero (home) — 50/50 split, text left, image right */ .hero{display:flex;flex-direction:row-reverse;gap:1rem;align-items:center} .hero picture, .hero > div{flex:1;min-width:0} .hero picture img{width:100%;max-width:none;height:auto;object-fit:cover;border-radius:0} .hero .tag{font-size:1.2rem;margin:.2rem 0 0} /* figures (home section images) — inline, no rounded card */ .fig{margin:1.5rem 0 0;border:0;border-radius:0;overflow:hidden;max-width:100%} .fig picture img{width:100%} /* media row (home sections) — 50/50 split, text left, image right */ .media{display:flex;flex-direction:row-reverse;gap:1rem;align-items:center;margin:2.6rem 0 0} .media .fig, .media .body{flex:1;min-width:0} .media .fig{margin:0} .media .fig img{width:100%;height:auto} .media h2{margin:0 0 .7rem} @media(min-width:640px){ .hero{gap:1.8rem} .media{gap:1.8rem} } /* gallery — one image per row, natural aspect ratio, no rounded corners */ .gallery{display:grid;grid-template-columns:1fr; gap:.6rem;margin:1.5rem 0 0} .gallery a.g{display:block;overflow:hidden;background:var(--line)} .gallery a.g img{width:100%;height:auto;object-fit:cover;transition:transform .3s} .gallery a.g:hover img{transform:scale(1.03)} /* results (windsurf) — clean lines, no cards */ .results{list-style:none;padding:0;margin:1rem 0} .results li{padding:.65rem 0;border-bottom:1px solid var(--line);font-weight:300} .results li:last-child{border-bottom:0} .results b{font-weight:700} /* contact section (home) */ .contact{border-top:1px solid var(--line);padding-top:1.5rem;margin-top:2.5rem} .contact-links{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;align-items:center} .contact-links a{display:inline-flex;align-items:center;justify-content:center;padding:.55rem .6rem; min-width:44px;min-height:44px;text-decoration:none;color:var(--fg)} .contact-links a:hover{color:var(--accent-ink);text-decoration:underline} /* cv */ .cv{border-top:1px solid var(--line);padding-top:1.5rem;margin-top:2.5rem} .cv ul{margin:.4rem 0 1.1rem;padding-left:1.1rem} .cv ul li{margin:.25rem 0;font-weight:300} .cv .role{color:var(--muted);font-weight:400;font-size:.9rem} .comp-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:.4rem} .comp-grid p{margin:.1rem 0} /* footer */ .foot{border-top:1px solid var(--line);margin:3rem auto 0;padding:2rem var(--pad);max-width:var(--max)} .foot .links{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;align-items:center} .foot .links a{display:inline-flex;align-items:center;justify-content:center;padding:.55rem .6rem; min-width:44px;min-height:44px;text-decoration:none;color:var(--fg)} .foot .links a:hover{color:var(--accent-ink);text-decoration:underline} .foot .copy{color:var(--muted);font-size:.85rem;font-weight:300;margin:1rem 0 0} /* 2-column split (yoga, windsurf): text | gallery, like the Carrd pages */ .split{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start} .split-gallery{display:flex;flex-direction:column} .split-gallery .gallery{margin:0} /* lightbox (driven by assets/js/gallery.js — keeps a.g / #lb / data-webp contract) */ .lb{position:fixed;inset:0;z-index:60;background:rgba(10,10,10,.86);display:none; align-items:center;justify-content:center;padding:1rem} .lb.open{display:flex} .lb img{max-width:94vw;max-height:88vh;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.5)} .lb button{position:absolute;color:#fff;background:rgba(255,255,255,.12);border:0;cursor:pointer; font-size:1.5rem;width:44px;height:44px;border-radius:50%; display:flex;align-items:center;justify-content:center} .lb button:hover{background:rgba(255,255,255,.2)} .lb .lb-close{top:1rem;right:1rem} .lb .lb-prev{left:1rem;top:50%;transform:translateY(-50%)} .lb .lb-next{right:1rem;top:50%;transform:translateY(-50%)} /* breakpoints (mirror Carrd: 980 = 2-col, 736 = mobile tuning) */ @media(min-width:640px){ :root{font-size:18px} .gallery{gap:1rem} .comp-grid{grid-template-columns:1fr 1fr} } @media(min-width:980px){ .split{grid-template-columns:1fr 1fr;gap:4rem} .gallery{gap:1.5rem} .comp-grid{grid-template-columns:1fr 1fr 1fr} } @media(max-width:736px){ :root{font-size:16px} .wrap{padding:1.8rem var(--pad) 2.4rem} .gallery{gap:.5rem} h2{margin:2rem 0 .6rem} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .gallery a.g img{transition:none} }