/* ========================================================= RESUME THEME — calmer sibling of the start-page theme. Shares the amber accent + dark/light token model so it stays consistent with the rest of the site, but spends its boldness once (name + a single accent rule) and keeps everything else quiet and typographically driven. Reusable: link this on any document-style page. Switch theme with data-theme="dark" | "light" on . ========================================================= */ @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&display=swap"); :root, :root[data-theme="light"]{ /* Hero amber, deeper for contrast on light paper */ --accent:#c95f00; --accent-soft:rgba(232,118,0,0.12); --accent-line:rgba(232,118,0,0.5); --bg:#fbf6ee; --surface:#ffffff; --text:#211b13; --muted:#6b6258; --faint:#9a9186; --rule:rgba(40,28,12,0.14); --link:#b5560a; --shadow:rgba(120,80,0,0.10); } :root[data-theme="dark"]{ --accent:#ff9e2c; --accent-soft:rgba(255,158,44,0.12); --accent-line:rgba(255,158,44,0.45); --bg:#15130f; --surface:#1d1a15; --text:#f2ede4; --muted:#a59a8b; --faint:#6f665a; --rule:rgba(255,255,255,0.1); --link:#ff9e2c; --shadow:rgba(0,0,0,0.4); } *{box-sizing:border-box;margin:0;padding:0} html{background:var(--bg)} body{ font-family:"Inter","Helvetica Neue",Arial,sans-serif; background:var(--bg); color:var(--text); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .wrapper{ max-width:720px; margin:0 auto; padding:4.5rem 1.5rem 4rem; } /* ---- Header ---- */ .page-header{margin-bottom:3.25rem} .header-name{ font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto; font-weight:600; font-size:clamp(2.6rem,6vw,3.6rem); line-height:1.02; letter-spacing:-0.02em; color:var(--text); margin-bottom:0.5rem; } .header-name .accent{color:var(--accent)} .header-title{ font-family:"Inter",sans-serif; font-weight:500; font-size:1.05rem; letter-spacing:0.01em; color:var(--muted); margin-bottom:1.5rem; } .header-title .at{color:var(--text)} .tagline{ font-family:"Fraunces",Georgia,serif; font-weight:400; font-style:italic; font-size:1.15rem; line-height:1.5; color:var(--text); max-width:38rem; margin-bottom:1.75rem; padding-left:1.1rem; border-left:2px solid var(--accent-line); } .executive-summary{margin-bottom:1.75rem} .executive-summary p{ color:var(--muted); font-size:0.98rem; margin-bottom:0.9rem; max-width:40rem; } .executive-summary p:last-child{margin-bottom:0} /* ---- Contact / actions row ---- */ .header-meta{ display:flex; flex-wrap:wrap; gap:0.6rem 1.5rem; align-items:center; font-size:0.9rem; color:var(--muted); padding-top:1.4rem; border-top:1px solid var(--rule); } .header-meta a{color:var(--link);text-decoration:none} .header-meta a:hover{text-decoration:underline} .header-meta .sep{color:var(--faint)} .contact-button{ display:inline-flex;align-items:center; padding:0.5rem 1.1rem; border:1px solid var(--accent-line); border-radius:8px; background:var(--accent-soft); color:var(--accent); font-weight:500;font-size:0.9rem; text-decoration:none; transition:background .15s ease,color .15s ease,border-color .15s ease; } .contact-button:hover{ background:var(--accent); color:var(--bg); border-color:var(--accent); } .icon-links{display:flex;gap:0.9rem;list-style:none;margin-left:auto} .icon-links a{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:8px; border:1px solid var(--rule);color:var(--muted); transition:color .15s ease,border-color .15s ease,background .15s ease; } .icon-links a:hover{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)} .icon-links svg{width:17px;height:17px;fill:currentColor;display:block} /* ---- Sections ---- */ .content-section{margin-bottom:2.75rem} .section-header{ margin-bottom:1.5rem; } .section-header h2{ font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:0.82rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); display:flex;align-items:center;gap:0.85rem; } .section-header h2::after{ content:"";flex:1;height:1px;background:var(--rule); } /* ---- Resume items ---- */ .resume-item{ position:relative; padding-left:1.25rem; margin-bottom:1.9rem; } .resume-item::before{ content:"";position:absolute;left:0;top:0.35rem;bottom:0.35rem; width:2px;border-radius:2px;background:var(--rule); transition:background .15s ease; } .resume-item:hover::before{background:var(--accent-line)} .resume-item:last-child{margin-bottom:0} .resume-item-title{ font-family:"Inter",sans-serif; font-weight:600; font-size:1.18rem; letter-spacing:-0.01em; line-height:1.25; color:var(--text); margin-bottom:0.2rem; } .resume-item-details{ font-size:0.9rem; font-weight:500; color:var(--muted); margin-bottom:0.7rem; } .resume-item-details .org{color:var(--text)} .resume-item-details .dot{color:var(--accent);margin:0 0.5rem} .resume-item-details.award-title{ font-weight:400;font-style:italic;color:var(--faint); margin-top:-0.4rem;margin-bottom:0.7rem;font-size:0.92rem; } .resume-item-copy{ color:var(--muted); font-size:0.96rem; max-width:40rem; } .resume-item-copy + .resume-item-copy{margin-top:0.6rem} /* Skills as clean two-column list */ .skills-grid{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0.55rem 1.75rem; max-width:42rem; } .skills-grid li{ position:relative; padding-left:1.1rem; font-size:0.94rem; color:var(--muted); line-height:1.45; } .skills-grid li::before{ content:"";position:absolute;left:0;top:0.6rem; width:5px;height:5px;border-radius:50%;background:var(--accent); } /* Link lists */ .resume-item-list{list-style:none} .resume-item-list li{ position:relative;padding-left:1.1rem;margin-bottom:0.45rem;font-size:0.96rem; } .resume-item-list li::before{ content:"\2192";position:absolute;left:0;color:var(--accent);font-weight:600; } .resume-item-list a{color:var(--link);text-decoration:none;border-bottom:1px solid var(--accent-line)} .resume-item-list a:hover{border-bottom-color:transparent} /* Publications */ .profile-links{ display:flex;flex-wrap:wrap;gap:0.5rem 1.25rem; list-style:none;margin-bottom:1.6rem;font-size:0.92rem; } .profile-links a{color:var(--link);text-decoration:none;border-bottom:1px solid var(--accent-line)} .profile-links a:hover{border-bottom-color:transparent} .publication{ position:relative;padding-left:1.25rem;margin-bottom:1.15rem; font-size:0.92rem;line-height:1.5;color:var(--muted);max-width:42rem; } .publication::before{ content:"";position:absolute;left:0;top:0.5rem; width:5px;height:5px;border-radius:50%;background:var(--accent); } .publication .pub-title{color:var(--text);font-weight:500} .publication .me{color:var(--text);font-weight:600} .publication .pub-venue{font-style:italic} .publication a{color:var(--link);text-decoration:none;border-bottom:1px solid var(--accent-line)} .publication a:hover{border-bottom-color:transparent} /* ---- Footer ---- */ .page-footer{ margin-top:3.5rem;padding-top:1.5rem; border-top:1px solid var(--rule); font-size:0.85rem;color:var(--faint); } /* ---- Theme toggle ---- */ #theme-toggle-page{ position:fixed;top:1rem;right:1rem;z-index:20; width:2.4rem;height:2.4rem;display:flex;align-items:center;justify-content:center; padding:0;border:1px solid var(--rule);border-radius:999px; background:var(--surface);box-shadow:0 0.4rem 1.2rem var(--shadow); cursor:pointer;transition:border-color .16s ease,transform .16s ease; } #theme-toggle-page:hover{border-color:var(--accent-line);transform:translateY(-1px)} #theme-toggle-page:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .tt-icon{ width:1.05rem;height:1.05rem;border-radius:50%;border:2px solid var(--accent); background:linear-gradient(90deg,var(--accent) 0 50%,transparent 50% 100%); } /* ---- Responsive ---- */ @media (max-width:560px){ .wrapper{padding:3.5rem 1.25rem 3rem} .skills-grid{grid-template-columns:1fr} .icon-links{margin-left:0;width:100%} } /* ---- Print ---- */ .print-only{display:none !important} @media print{ :root{--accent:#000;--text:#000;--muted:#333;--faint:#555;--rule:#ccc;--link:#000;--bg:#fff;--surface:#fff;--accent-line:#999} .no-print{display:none !important} .print-only{display:block !important} body{font-size:11pt;line-height:1.4;background:#fff;color:#000} .wrapper{max-width:100%;padding:0} .page-header{margin-bottom:1.2rem} .header-name{font-size:22pt} .tagline{border-left-color:#999} .content-section{margin-bottom:1.2rem;break-inside:avoid} .resume-item{margin-bottom:0.9rem;break-inside:avoid;padding-left:0.8rem} .resume-item::before{background:#bbb} .section-header h2{color:#000} #theme-toggle-page{display:none} .contact-button{ border:none;background:none;padding:0;color:#000;font-weight:400; } .contact-button::after{content:" — hello@samfrost.me"} }