/* ============================================================ KEVIN MACKIN SITE — STYLES.CSS Shared stylesheet for all pages: index, about, areas-of-practice, contact-us, and 404. Linked via in each page's . ============================================================ */ :root{ --ink:#14181C; --navy:#1B2A3C; --navy-2:#26394E; --blueprint:#3D5A73; --vellum:#E7EAE8; --vellum-2:#DCE1DD; --paper:#F3F5F3; --accent:#BE8A3B; --accent-soft:#E7D3AC; --line: rgba(27,42,60,0.16); --line-strong: rgba(27,42,60,0.35); --font-display:'Roboto Slab', serif; --font-body:'IBM Plex Sans', sans-serif; --font-mono:'IBM Plex Mono', monospace; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased; } a{color:inherit;} /* ---------- Shared site navigation ---------- */ .site-nav{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:22px 0 18px; border-bottom:1px solid rgba(255,255,255,0.18); position:relative; z-index:1; } .brand{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#EDEFEC; text-decoration:none; font-weight:600; white-space:nowrap; } .nav-links{ display:flex; gap:26px; flex-wrap:wrap; align-items:center; } .nav-links a{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:#B9C4CE; text-decoration:none; padding-bottom:4px; border-bottom:2px solid transparent; transition:color 0.2s ease, border-color 0.2s ease; } .nav-links a:hover{ color:#EDEFEC; } .nav-links a.active{ color:var(--accent); border-bottom-color:var(--accent); } .status-chip{ display:inline-flex; align-items:center; gap:8px; color:var(--accent-soft); font-family:var(--font-mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap; } .status-dot{ width:8px;height:8px;border-radius:50%; background:var(--accent); } /* ---------- Full hero (Home only) ---------- */ .masthead{ background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); color:#EDEFEC; padding:0 6vw 64px; position:relative; overflow:hidden; } .masthead::after{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size:38px 38px; pointer-events:none; } .hero-body{ position:relative; z-index:1; max-width:900px; padding-top:56px; } .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-soft); margin:0 0 18px; } h1.thesis{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px, 5vw, 58px); line-height:1.08; margin:0 0 22px; letter-spacing:-0.01em; } .thesis em{ font-style:normal; color:var(--accent); } .subhead{ font-size:18px; max-width:640px; color:#CBD3D8; margin:0 0 32px; } .tag-row{ display:flex; flex-wrap:wrap; gap:10px; } .tag{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; padding:7px 14px; border:1px solid rgba(255,255,255,0.28); border-radius:3px; color:#DCE3E7; } /* ---------- Compact page hero (About / Areas / Contact) ---------- */ .page-hero{ background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); color:#EDEFEC; padding:0 6vw 44px; position:relative; overflow:hidden; } .page-hero::after{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size:38px 38px; pointer-events:none; } .page-hero-body{ position:relative; z-index:1; max-width:800px; padding-top:40px; } .page-hero-body h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px, 4.2vw, 46px); line-height:1.12; margin:0 0 14px; letter-spacing:-0.01em; } .page-hero-body .dek{ font-size:17px; color:#CBD3D8; max-width:600px; margin:0; } /* ---------- Program spine layout ---------- */ .program{ max-width:1080px; margin:0 auto; padding:0 6vw; display:grid; grid-template-columns:64px 1fr; } .spine{ position:relative; } .spine::before{ content:""; position:absolute; top:8px; bottom:8px; left:50%; width:2px; background:var(--line-strong); transform:translateX(-50%); } .node{ position:sticky; top:24px; width:38px;height:38px; margin:0 auto; border-radius:50%; background:var(--paper); border:2px solid var(--blueprint); display:flex;align-items:center;justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--navy); } .milestone{ padding:64px 0 0; scroll-margin-top:20px; } .milestone:first-of-type{padding-top:56px;} .m-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--blueprint); margin:0 0 8px; } .m-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(24px, 3vw, 32px); margin:0 0 20px; color:var(--navy); } .lede{ max-width:680px; color:#2B3238; font-size:16px; } .lede + .lede{ margin-top:14px; } .inline-link{ display:inline-block; margin-top:16px; font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em; color:var(--blueprint); text-decoration:none; border-bottom:1px solid var(--blueprint); padding-bottom:2px; } .inline-link:hover{ color:var(--accent); border-color:var(--accent); } /* ---------- Workstream cards ---------- */ .cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:28px; } .card{ background:var(--vellum); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:4px; padding:24px 22px; } .card .code{ font-family:var(--font-mono); font-size:11px; color:var(--blueprint); letter-spacing:0.08em; } .card h3{ font-family:var(--font-display); font-size:19px; margin:8px 0 10px; color:var(--navy); } .card p{ font-size:14.5px; color:#39424A; margin:0; } /* ---------- Stat strip ---------- */ .stat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:30px; border-radius:4px; overflow:hidden; } .stat{ background:var(--paper); padding:22px 20px; } .stat .num{ font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--navy); } .stat .cap{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.05em; color:var(--blueprint); text-transform:uppercase; margin-top:4px; } /* ---------- Kudos ---------- */ .kudos-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:28px; } .kudo{ background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:22px 22px 18px; position:relative; } .kudo::before{ content:"\201C"; font-family:var(--font-display); font-size:44px; color:var(--accent-soft); position:absolute; top:2px; left:14px; line-height:1; } .kudo blockquote{ margin:14px 0 14px 4px; font-size:15px; color:#22282D; font-style:normal; } .kudo cite{ font-family:var(--font-mono); font-size:12px; color:var(--blueprint); font-style:normal; } /* ---------- Contact cards ---------- */ .contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; } .contact-card{ background:var(--vellum); border:1px solid var(--line); border-radius:4px; padding:24px 22px; text-align:left; } .contact-card .code{ font-family:var(--font-mono); font-size:11px; color:var(--blueprint); letter-spacing:0.08em; } .contact-card h3{ font-family:var(--font-display); font-size:18px; margin:8px 0 10px; color:var(--navy); } .contact-card a{ font-family:var(--font-mono); font-size:14px; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--accent); } .contact-card a:hover{ color:var(--accent); } .form-note{ margin-top:36px; padding:16px 18px; background:var(--vellum-2); border:1px dashed var(--line-strong); border-radius:4px; font-family:var(--font-mono); font-size:12.5px; color:var(--blueprint); max-width:680px; } /* ---------- Contact form ---------- */ .contact-form{ margin-top:36px; max-width:560px; background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:28px 26px; } .contact-form label{ display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--blueprint); margin-bottom:18px; } .contact-form input, .contact-form textarea{ display:block; width:100%; margin-top:8px; padding:11px 12px; font-family:var(--font-body); font-size:15px; color:var(--ink); background:#fff; border:1px solid var(--line-strong); border-radius:3px; resize:vertical; } .contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--accent); } .contact-form button{ border:none; cursor:pointer; margin-top:4px; } /* ---------- Contact / footer ---------- */ .footer-band{ background:var(--navy); color:#E9ECEE; margin-top:80px; padding:64px 6vw 40px; } .footer-inner{ max-width:1080px; margin:0 auto; } .footer-inner h2{ font-family:var(--font-display); font-size:clamp(26px,3.4vw,36px); margin:0 0 14px; } .footer-inner p{ color:#B9C4CE; max-width:520px; margin:0 0 28px; } .cta{ display:inline-block; font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; background:var(--accent); color:#221805; padding:14px 26px; border-radius:3px; text-decoration:none; font-weight:600; } .footer-meta{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:56px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.16); font-family:var(--font-mono); font-size:11.5px; color:#8C99A3; } @media (max-width: 760px){ .program{grid-template-columns:32px 1fr;} .node{width:28px;height:28px;font-size:9px;} .cards{grid-template-columns:1fr;} .kudos-grid{grid-template-columns:1fr;} .stat-strip{grid-template-columns:1fr;} .contact-grid{grid-template-columns:1fr;} .site-nav{ justify-content:flex-start; } .nav-links{ gap:16px; order:3; width:100%; } .status-chip{ order:2; } }