/* ===== THEME VARS ===== - Uses system theme by default (prefers-color-scheme) - If is set by your script, that wins -------------------------------------------------------------- */ /* Light defaults */ :root{ color-scheme: light dark; --bg:#ffffff; --ink:#0f172a; --muted:#475569; --card:#f7f9fc; --line:#e6ebf2; --accent:#111827; --accent-2:#1f2937; --radius:18px; --pad:20px; --maxw:980px; } /* Dark via system preference (only when no manual data-theme is set) */ @media (prefers-color-scheme: dark){ :root:not([data-theme]){ --bg:#0b1020; --ink:#e8ecff; --muted:#aab3d9; --card:#121932; --line:#233055; --accent:#6ea8fe; --accent-2:#90c2ff; } } /* Dark via explicit attribute (wins over media query) */ :root[data-theme="dark"]{ --bg:#0b1020; --ink:#e8ecff; --muted:#aab3d9; --card:#121932; --line:#233055; --accent:#6ea8fe; --accent-2:#90c2ff; } /* ===== BASE ===== */ *{box-sizing:border-box} html,body{ margin:0;padding:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6 } a{color:inherit} /* Container */ .container{ max-width:var(--maxw); margin:0 auto; padding-left:clamp(16px, 5vw, 32px); padding-right:clamp(16px, 5vw, 32px); } /* Header */ .site { border-bottom: 1px solid var(--line); } .hero { padding-top: 12px; padding-bottom: 12px; } h1{font-size:36px;line-height:1.1;margin:0 0 8px} h2{margin:0 0 8px} h3{margin:0 0 6px} .tagline{margin:0 0 6px;color:var(--muted)} .muted{color:var(--muted)} /* Profile */ .profile { display:flex; align-items:flex-start; gap:12px } .avatar { width:160px; height:160px; border-radius:50%; object-fit:cover; border:2px solid var(--line); margin-top:0 } /* CTA */ .cta{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; align-items:stretch } .btn{ background:var(--accent); color:#fff; border:1px solid var(--accent-2); padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:700; display:inline-block; line-height:1.2 } .btn.alt{ background:#fff; color:#111; border:1px solid var(--line) } .pill{ display:inline-block; background:#eef2f7; border:1px solid var(--line); border-radius:999px; padding:2px 8px; font-size:12px; color:#445; margin:0 8px } /* Cards */ main .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:var(--pad); margin:16px 0 } .bullets{ padding-left:18px; margin:0 } .bullets li{ margin:4px 0 } /* Flex heading row */ .flexhead{ display:flex; justify-content:space-between; align-items:center; gap:10px } .note{ color:var(--muted); font-size:14px } /* Grids */ .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:8px } /* Case studies */ .case-grid .case{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px } .case-grid .case .link{ text-decoration:none; border-bottom:1px solid #d5dbe6; padding-bottom:2px } /* KPIs */ .kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:8px } .kpi{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px } .kpi strong{ font-size:20px } /* Chips */ .chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px } .chip{ display:inline-block; background:#fff; border:1px solid var(--line); padding:8px 12px; border-radius:999px; text-decoration:none } /* Footer */ .footer{ border-top:1px solid var(--line); margin-top:18px; padding-top:10px; padding-bottom:20px } .footwrap{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap } .footnav a{ text-decoration:none; opacity:.85; margin-right:12px } .footnav a:hover{ opacity:1 } .sig{ font-family:'Brush Script MT','Comic Sans MS',cursive; opacity:.85 } /* NAV (from nav.html) */ .site-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0 } .site-nav .brand{ font-weight:800; text-decoration:none } .site-nav .links{ display:flex; gap:14px; list-style:none; margin:0; padding:0 } .site-nav .links a{ text-decoration:none } .site-nav .links a.active{ font-weight:700; text-decoration:underline } /* Mobile nav */ @media (max-width: 768px){ .site-nav{ position:relative } .site-nav .burger{ display:inline-block; border:1px solid var(--line); background:transparent; border-radius:10px; padding:8px 10px; cursor:pointer; font-size:18px } .site-nav .links{ position:absolute; top:100%; right:0; left:0; display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px; margin-top:8px; } .site-nav .links[hidden]{ display:none } .site-nav .links li{ padding:6px 2px } } /* Phone hero layout */ @media (max-width: 560px){ .profile{ flex-direction:column; align-items:center; text-align:center } .avatar{ width:120px; height:120px } .cta{ flex-direction:column; align-items:stretch } .btn, .btn.alt{ width:100%; text-align:center } } /* ===== DARK COMPONENT TWEAKS ===== */ :root[data-theme="dark"] .btn.alt{ background:transparent; color:var(--ink); } :root[data-theme="dark"] .chip, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .case-grid .case{ background:#0e1430; border-color:var(--line) } /* Also make chips/kpis/cases follow system dark when no data-theme attr */ @media (prefers-color-scheme: dark){ :root:not([data-theme]) .btn.alt{ background:transparent; color:var(--ink); } :root:not([data-theme]) .chip, :root:not([data-theme]) .kpi, :root:not([data-theme]) .case-grid .case{ background:#0e1430; border-color:var(--line) } } /* --- Chips used in hero + highlights --- */ .inline-chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0 0; padding:0; } .inline-chips li{ list-style:none; padding:.25rem .6rem; border:1px solid var(--line); border-radius:999px; font-size:.9rem; color:var(--muted); background:transparent; } /* --- 3-up “What I do” cards --- */ .tri-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:8px; } .mini-card{ padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--card); } .mini-card h3{ margin:0 0 6px } /* --- Selected Projects grid --- */ .proj-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:8px; } .proj{ padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--card); } .proj h3{ margin:0 0 4px } .proj .link{ text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; } /* --- Visually hidden heading for a11y --- */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Inline chips in hero + minimal highlights */ .inline-chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0 0; padding:0; } .inline-chips li{ list-style:none; padding:.25rem .6rem; border:1px solid var(--line); border-radius:999px; font-size:.9rem; color:var(--muted); background:transparent; } /* Slightly tighter hero for the one-screen look */ .hero.solo{ padding-top:28px; padding-bottom:28px; } /* Tiny helper text size */ .tiny{ font-size:.9rem; } /* (Optional) reduced motion a11y */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important; } }