/* ========================================================= Jacob Goldberg — Portfolio Design system: "engineering drawing sheet" ========================================================= */ /* Fonts loaded via in HTML for better performance */ :root{ --bg: #07101e; --bg-alt: #0b1628; --surface: #0f1e35; --surface-2: #152540; --line: #1c2e4a; --line-soft: rgba(80,140,255,0.07); --ink: #e6eeff; --ink-dim: #8899bb; --ink-faint: #48587a; --accent: #FF5A1F; --accent-dim:#3d1808; --accent-ink:#1A0B04; --nav-bg: rgba(7,16,30,0.92); --haze1: rgba(255,90,31,0.28); --haze2: rgba(122,150,210,0.26); --glow1: rgba(40,100,230,0.10); --glow2: rgba(100,30,210,0.07); --f-display: 'Big Shoulders', sans-serif; --f-body: 'IBM Plex Sans', -apple-system, sans-serif; --f-mono: 'IBM Plex Mono', monospace; --maxw: 1400px; --pad: clamp(20px, 4vw, 72px); } /* Light theme: same drawing-sheet language on drafting paper — cool white ground, navy ink, accent deepened to hold contrast on white. Stamped on by the head script (localStorage) before first paint. */ html[data-theme="light"]{ --bg: #eef1f7; --bg-alt: #e6eaf3; --surface: #f8fafd; --surface-2: #e7ecf5; --line: #c3cede; --line-soft: rgba(25,55,115,0.10); --ink: #101c31; --ink-dim: #4a5a7e; --ink-faint: #7e8ca9; --accent: #d64a12; --accent-dim:#f6d6c5; --nav-bg: rgba(238,241,247,0.92); --haze1: rgba(214,74,18,0.13); --haze2: rgba(90,120,190,0.13); --glow1: rgba(40,100,230,0.07); --glow2: rgba(100,30,210,0.05); } html{ color-scheme: dark; } html[data-theme="light"]{ color-scheme: light; } /* Stars belong to the dark sheet only */ html[data-theme="light"] #star-canvas{ display:none; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; background: var(--bg); position: relative; } body{ margin:0; overflow-x:clip; background: transparent; color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img{ max-width:100%; display:block; } /* Ambient haze at the bottom of the document (anchored to html, which is position:relative) — sits between the page background and content (sections are z-index:1), so it appears as you scroll to the end of a page */ body::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:50vh; pointer-events:none; z-index:0; background: radial-gradient(80% 90% at 62% 104%, var(--haze1), transparent 62%), radial-gradient(130% 95% at 50% 112%, var(--haze2), transparent 68%); } #star-canvas{ position:absolute; top:0; left:0; z-index:0; pointer-events:none; } .site-nav, .hero, .section, .site-footer, .proj-hero, .proj-overview, .proj-section{ position:relative; z-index:1; } a{ color: inherit; text-decoration: none; } h1,h2,h3,h4{ margin:0; font-family: var(--f-display); font-weight:800; letter-spacing:0.01em; } p{ margin:0 0 1em; color: var(--ink-dim); } ul{ margin:0; padding:0; list-style:none; } button{ font-family: inherit; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } /* ---------- utility ---------- */ .wrap{ max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .eyebrow{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display:flex; align-items:center; gap:10px; } .eyebrow::before{ content:""; width:16px; height:1px; background: var(--accent); display:inline-block; } .section{ padding: 96px 0; border-bottom:1px solid var(--line-soft); } .section:last-of-type{ border-bottom:none; } .section-head{ margin-bottom: 48px; max-width: 640px; } .section-head h2{ font-size: clamp(28px,4vw,42px); margin-top:10px; text-transform:uppercase; } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- title block (signature element) ---------- */ .title-block{ display:grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); font-family: var(--f-mono); font-size: 11px; background: var(--surface); } .title-block div{ padding: 10px 14px; border-right: 1px solid var(--line); } .title-block div:last-child{ border-right:none; } .title-block span{ display:block; color: var(--ink-faint); text-transform:uppercase; letter-spacing:0.08em; font-size:9px; margin-bottom:4px; } .title-block strong{ color: var(--ink); font-weight:500; } @media (max-width: 640px){ .title-block{ grid-template-columns: repeat(2,1fr); } .title-block div:nth-child(2){ border-right:none; } } /* ---------- nav ---------- */ .site-nav{ position: sticky; top:0; z-index:50; background: var(--nav-bg); backdrop-filter: blur(8px); border-bottom:1px solid var(--line); } .site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; max-width:none; padding:0 28px; } .brand{ font-family: var(--f-display); font-weight:900; font-size:28px; letter-spacing:0.03em; display:flex; align-items:center; gap:10px; } .nav-links{ display:flex; gap:32px; align-items:center; } .nav-links a{ font-family: var(--f-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-dim); position:relative; padding: 6px 0; } .nav-links a{ transition: color .2s ease; } .nav-links a:hover, .nav-links a.active{ color: var(--ink); } .nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); } .nav-toggle{ display:none; background:none; border:1px solid var(--line); color:var(--ink); width:40px; height:40px; cursor:pointer; border-radius:4px; align-items:center; justify-content:center; flex-shrink:0; transition: border-color .2s ease, color .2s ease; } .nav-toggle .icon-close{ display:none; } .nav-toggle.open .icon-menu{ display:none; } .nav-toggle.open .icon-close{ display:block; } .nav-links .nav-linkedin{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0; border:1px solid var(--line); border-radius:3px; font-family:var(--f-display); font-size:13px; font-weight:700; color:var(--ink-dim); letter-spacing:0; text-transform:none; padding:0; transition:color .2s, border-color .2s; } .nav-links .nav-linkedin:hover{ color:var(--ink); border-color:var(--ink-dim); } .nav-links .nav-linkedin::after{ display:none !important; } /* ---------- nav dropdown ---------- */ .nav-item{ position:relative; display:flex; align-items:center; } .nav-item > a{ display:flex; align-items:center; gap:4px; } .nav-item .caret{ font-size:9px; opacity:0.5; transition:transform 0.2s; line-height:1; } .nav-item:hover .caret, .nav-item.open .caret{ transform:rotate(180deg); } .nav-dropdown-menu{ position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-6px); min-width:210px; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:4px 0; opacity:0; pointer-events:none; transition:opacity 0.15s, transform 0.15s; z-index:200; } /* Bridge the 8px gap so slow mouse movement doesn't close the dropdown */ .nav-dropdown-menu::before{ content:''; position:absolute; top:-9px; left:0; right:0; height:9px; } .nav-item:hover .nav-dropdown-menu, .nav-item.open .nav-dropdown-menu{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); } .nav-dropdown-menu a{ display:block; padding:9px 16px; font-size:12px; color:var(--ink-dim); white-space:nowrap; position:static; } .nav-dropdown-menu a{ transition: color .2s ease, background .2s ease; } .nav-dropdown-menu a:hover{ color:var(--ink); background:var(--surface-2); } .nav-dropdown-menu a::after{ display:none !important; } .nav-dropdown-menu .see-all{ color:var(--accent) !important; border-top:1px solid var(--line); margin-top:4px; padding-top:9px; } @media (max-width: 800px){ .nav-links{ position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background: var(--bg-alt); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height .25s ease; } .nav-links.open{ max-height:600px; } .nav-links a{ width:100%; padding:16px var(--pad); border-bottom:1px solid var(--line-soft); } .nav-toggle{ display:block; } .nav-item{ flex-direction:column; align-items:flex-start; width:100%; } .nav-item > a{ width:100%; } .nav-dropdown-menu{ position:static; transform:none; opacity:1; pointer-events:auto; background:var(--bg); border:none; border-radius:0; max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0; min-width:0; width:100%; } .nav-item.open .nav-dropdown-menu{ max-height:300px; padding:4px 0; transform:none; } .nav-dropdown-menu a{ padding-left:calc(var(--pad) + 20px) !important; border-bottom:1px solid var(--line-soft); } .nav-dropdown-menu .see-all{ border-top:none; margin-top:0; padding-top:9px; } .nav-links .nav-linkedin{ width:100%; height:auto; border:none; border-radius:0; border-bottom:1px solid var(--line-soft); justify-content:flex-start; padding:16px var(--pad) !important; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; } .nav-links .nav-linkedin::before{ content:'LinkedIn'; } .nav-links .nav-linkedin{ font-size:0; } .nav-links .nav-linkedin::before{ font-size:12px; font-family:var(--f-mono); } } /* ---------- hero ---------- */ .hero{ padding: 72px 0 64px; overflow:hidden; min-height:calc(100dvh - 64px); display:flex; align-items:center; } .hero::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background: radial-gradient(ellipse 70% 90% at 85% 40%, var(--glow1) 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 8% 85%, var(--glow2) 0%, transparent 55%); } .hero .wrap{ position:relative; z-index:1; width:100%; max-width:none; } .hero-grid{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap:56px; align-items:center; } @media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } } .hero h1{ font-size: clamp(48px, 9vw, 96px); line-height:0.95; text-transform:uppercase; margin: 16px 0 20px; } .hero h1 em{ font-style:normal; } .hero .role{ font-family:var(--f-mono); font-size:14px; color:var(--ink-dim); letter-spacing:0.04em; margin-bottom:28px; max-width:520px; } .hero-photo-frame{ position:relative; border:1px solid var(--line); padding:14px; background:var(--surface); } .hero-photo-frame img{ width:100%; height:auto; filter:grayscale(0.15) contrast(1.05); } .hero-slides{ position:relative; aspect-ratio:2/3; overflow:hidden; } .hero-slides img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s cubic-bezier(0.16,1,0.3,1); } .hero-slides img.active{ opacity:1; } .hero-dots{ display:flex; justify-content:center; gap:8px; padding-top:12px; } .hero-dots:empty{ display:none; } .hero-dots button{ width:22px; height:3px; padding:0; border:none; cursor:pointer; background:var(--line); transition:background .25s ease; } .hero-dots button:hover{ background:var(--ink-dim); } .hero-dots button.active{ background:var(--accent); } .crop-tick{ position:absolute; width:16px; height:16px; } .crop-tick.tl{ top:6px; left:6px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); } .crop-tick.tr{ top:6px; right:6px; border-top:2px solid var(--accent); border-right:2px solid var(--accent); } .crop-tick.bl{ bottom:6px; left:6px; border-bottom:2px solid var(--accent); border-left:2px solid var(--accent); } .crop-tick.br{ bottom:6px; right:6px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); } /* ---------- about ---------- */ .about-grid{ display:grid; grid-template-columns: 1.3fr 0.7fr; gap:64px; } @media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } } .about-grid p{ font-size:16px; color:var(--ink-dim); } .about-grid p strong{ color:var(--ink); font-weight:600; } .spec-list{ border-top:1px solid var(--line); } .spec-list li{ display:flex; justify-content:space-between; gap:16px; padding: 14px 0; border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:13px; } .spec-list li span:first-child{ color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.06em; } .spec-list li span:last-child{ color:var(--ink); text-align:right; } /* ---------- project cards / grid ---------- */ .project-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; } @media (max-width: 620px){ .project-grid{ grid-template-columns: 1fr; } } .p-card{ background:var(--surface); display:flex; flex-direction:column; transition: background .2s ease; } .p-card:hover{ background:var(--surface-2); } .p-card .thumb{ aspect-ratio: 3/2; overflow:hidden; background:var(--surface); } .p-card .thumb img{ width:100%; height:100%; object-fit:contain; filter:grayscale(0.2) contrast(1.05); transition:filter .3s ease; } .p-card:hover .thumb img{ filter:grayscale(0) contrast(1.05); } .p-card .body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; } .p-card .tag{ font-family:var(--f-mono); font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:0.1em; } .p-card h3{ font-size:22px; text-transform:uppercase; } .p-card p{ font-size:14px; flex:1; } .p-card .go{ font-family:var(--f-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); padding-top:12px; margin-top:auto; display:flex; justify-content:space-between; align-items:center; } .p-card .go .arrow{ transition:transform .2s ease; color:var(--accent); } .p-card:hover .go .arrow{ transform:translateX(4px); } .p-card.disabled{ opacity:0.55; } .p-card.disabled .go{ color:var(--ink-faint); } .p-card.disabled .go .arrow{ color:var(--ink-faint); } /* ---------- project detail page ---------- */ /* Projects page — photo behind text */ .projects-photo-hero{ overflow:hidden; min-height:min(520px,55vw); align-items:flex-end !important; padding:80px 0 56px !important; } .projects-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; filter:brightness(0.4); z-index:0; } .projects-photo-hero > .wrap{ position:relative; z-index:1; } /* Text sits on a darkened photo in both themes — keep it light explicitly */ .projects-photo-hero h1{ color:#f2f6ff; } .projects-photo-hero .role{ color:rgba(235,242,255,0.78); } @media(max-width:640px){ .projects-photo-hero{ min-height:420px; padding:48px 0 40px !important; } } .proj-hero{ position:relative; border-bottom:1px solid var(--line); background:#adb5a8; } .proj-hero-img{ width:100%; max-height:520px; object-fit:contain; } .proj-hero-caption{ position:absolute; bottom:0; left:0; right:0; z-index:1; background:linear-gradient(180deg, transparent, rgba(0,0,0,0.75)); padding: 60px var(--pad) 24px; } .proj-hero-caption .wrap{ padding:0; } .proj-hero-caption h1{ font-size:clamp(36px,6vw,64px); text-transform:uppercase; color:#fff; } .proj-overview{ padding: 48px 0 0; } .proj-overview p{ font-size:18px; max-width:760px; } .proj-section{ padding: 56px 0; border-top:1px solid var(--line-soft); } .proj-section .num{ font-family:var(--f-mono); font-size:13px; color:var(--accent); letter-spacing:0.1em; } .proj-section h2{ font-size:28px; text-transform:uppercase; margin:8px 0 20px; } .proj-section .cols{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:40px; align-items:start; } .proj-section .cols.reverse{ direction:rtl; } .proj-section .cols.reverse > *{ direction:ltr; } @media (max-width:860px){ .proj-section .cols{ grid-template-columns:1fr; } .proj-section .cols.reverse{ direction:ltr; } } .proj-imgs{ display:grid; gap:4px; } .proj-imgs.g2{ grid-template-columns:1fr 1fr; } .proj-imgs.g3{ grid-template-columns:1fr 1fr 1fr; } .proj-imgs img{ width:100%; height:auto; display:block; object-fit:cover; border:1px solid var(--line); } .proj-imgs.g2, .proj-imgs.g3{ overflow:hidden; border:1px solid var(--line); gap:1px; background:var(--line); } .proj-imgs.g2 img, .proj-imgs.g3 img{ aspect-ratio:4/3; border:none; } .proj-imgs.wide img{ aspect-ratio:auto; max-height:480px; object-fit:cover; } .proj-imgs + .proj-imgs{ margin-top:20px; } .img-placeholder{ display:flex; align-items:center; justify-content:center; min-height:220px; background:var(--surface); border:1px solid var(--line); font-family:var(--f-mono); font-size:12px; color:var(--ink-faint); letter-spacing:0.06em; } .proj-imgs .cap{ grid-column:1/-1; font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); margin-top:2px; } .proj-nav{ display:flex; justify-content:space-between; padding:40px 0 0; } .proj-nav a{ font-family:var(--f-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); } .proj-nav a{ transition: color .2s ease; } .proj-nav a:hover{ color:var(--accent); } /* ---------- 3D model viewer ---------- */ .model-viewer-wrap{ position:relative; width:100%; height:520px; background:#0f1c30; border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-top:16px; } .model-viewer-wrap canvas{ display:block; } .viewer-idle{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; } .viewer-idle p{ font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); letter-spacing:0.04em; text-align:center; margin:0; max-width:320px; } .viewer-loading{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; font-family:var(--f-mono); font-size:12px; letter-spacing:0.06em; color:var(--ink-faint); } .viewer-loading span{ animation:viewer-pulse 1.6s ease-in-out infinite; } @keyframes viewer-pulse{ 0%,100%{opacity:0.4} 50%{opacity:0.9} } .viewer-progress{ width:min(260px, 60%); height:2px; background:var(--line); border-radius:1px; overflow:hidden; } .viewer-progress i{ display:block; height:100%; width:0; background:var(--accent); transition:width .15s linear; } .viewer-hint{ position:absolute; bottom:56px; left:12px; font-family:var(--f-mono); font-size:10px; letter-spacing:0.04em; color:rgba(200,220,255,0.22); pointer-events:none; white-space:nowrap; } /* Toolbar */ .viewer-toolbar{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:5; pointer-events:auto; } .viewer-tools-row{ display:flex; align-items:center; gap:2px; padding:5px 8px; background:rgba(7,16,30,0.82); backdrop-filter:blur(14px); border:1px solid rgba(200,220,255,0.1); border-radius:100px; } .vtool{ background:none; border:none; font-family:var(--f-mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:rgba(200,220,255,0.45); padding:5px 11px; border-radius:100px; cursor:pointer; transition:background 0.15s, color 0.15s; } .vtool:hover{ color:rgba(200,220,255,0.85); background:rgba(255,255,255,0.06); } .vtool.active{ background:rgba(91,156,246,0.18); color:#88aaff; } .vtool-sep{ width:1px; height:14px; background:rgba(200,220,255,0.12); margin:0 3px; flex-shrink:0; } @media (max-width:600px){ .model-viewer-wrap{ height:340px; } .vtool{ padding:5px 8px; font-size:10px; } } /* ---------- contact ---------- */ .contact-grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap:56px; } @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } } .contact-info dl{ font-family:var(--f-mono); font-size:14px; } .contact-info dt{ color:var(--ink-faint); text-transform:uppercase; font-size:11px; letter-spacing:0.08em; margin-top:20px; } .contact-info dd{ margin:4px 0 0; color:var(--ink); } .social-row{ display:flex; gap:14px; margin-top:28px; } .social-row a{ width:38px; height:38px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:11px; } .social-row a{ transition: border-color .2s ease, color .2s ease; } .social-row a:hover{ border-color:var(--accent); color:var(--accent); } form.contact-form{ display:grid; gap:16px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:600px){ .form-row{ grid-template-columns:1fr; } } .contact-form label{ font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint); display:block; margin-bottom:6px; } .contact-form input, .contact-form textarea{ width:100%; background:var(--surface); border:1px solid var(--line); color:var(--ink); padding:12px 14px; font-family:var(--f-body); font-size:14px; border-radius:0; -webkit-appearance:none; appearance:none; } .contact-form input, .contact-form textarea{ transition: border-color .2s ease; } .contact-form input:focus, .contact-form textarea:focus{ border-color:var(--accent); outline:none; } .contact-form textarea{ resize:vertical; min-height:120px; } .btn{ font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.1em; background:var(--accent); color:var(--accent-ink); border:none; padding:14px 26px; cursor:pointer; width:fit-content; transition:opacity .2s ease; } .btn:hover{ opacity:0.85; } .btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); transition: border-color .2s ease, color .2s ease; } .btn.ghost:hover{ border-color:var(--accent); color:var(--accent); opacity:1; } .form-note{ font-family:var(--f-mono); font-size:12px; color:var(--accent); min-height:18px; } /* ---------- resume / CV ---------- */ .resume-actions{ display:flex; gap:16px; flex-wrap:wrap; margin: 28px 0 48px; } .cv{ max-width:820px; } .cv-header{ padding-bottom:24px; border-bottom:2px solid var(--line); margin-bottom:36px; } .cv-header h2{ font-family:var(--f-display); font-size:clamp(30px,5vw,46px); text-transform:uppercase; font-weight:900; letter-spacing:0.02em; margin-bottom:10px; } .cv-contact{ font-family:var(--f-mono); font-size:13px; color:var(--ink-dim); letter-spacing:0.05em; } .cv-section{ margin-bottom:40px; } .cv-section > h3{ font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:var(--accent); margin-bottom:20px; display:flex; align-items:center; gap:12px; } .cv-section > h3::after{ content:''; flex:1; height:1px; background:var(--line); } .cv-entry{ margin-bottom:28px; } .cv-entry:last-child{ margin-bottom:0; } .cv-entry-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; font-size:15px; font-weight:700; color:var(--ink); margin-bottom:4px; } .cv-loc{ font-family:var(--f-mono); font-size:12px; color:var(--ink-faint); white-space:nowrap; } .cv-entry-sub{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; font-family:var(--f-mono); font-size:12px; margin-bottom:10px; } .cv-role{ color:var(--accent); font-weight:600; } .cv-date{ color:var(--ink-faint); white-space:nowrap; } .cv-note{ font-family:var(--f-mono); font-size:12px; color:var(--ink-dim); margin:0 0 8px; } .cv-list{ padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; } .cv-list li{ font-size:14px; color:var(--ink-dim); line-height:1.6; padding-left:18px; position:relative; } .cv-list li::before{ content:'▸'; position:absolute; left:0; color:var(--accent); font-size:10px; top:4px; } .cv-subrole{ padding-left:18px; border-left:2px solid var(--line); margin-top:18px; } .cv-subrole .cv-entry-sub{ margin-bottom:8px; } .cv-skills{ display:grid; grid-template-columns:max-content 1fr; gap:8px 28px; } .cv-skills dt{ font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint); white-space:nowrap; padding-top:1px; } .cv-skills dd{ font-size:14px; color:var(--ink-dim); margin:0; } @media (max-width:600px){ .cv-skills{ grid-template-columns:1fr; } } /* ---------- photography ---------- */ .collection-head{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom:28px; flex-wrap:wrap; } .collection-head h2{ font-size:clamp(26px,4vw,36px); text-transform:uppercase; margin-top:6px; } .filmstrip{ columns:3; column-gap:6px; } .filmstrip.four{ columns:4; } @media (max-width:900px){ .filmstrip{ columns:2; } .filmstrip.four{ columns:2; } } @media (max-width:500px){ .filmstrip{ columns:1; } .filmstrip.four{ columns:2; } } .frame{ position:relative; overflow:hidden; background:var(--surface); cursor:pointer; break-inside:avoid; margin-bottom:6px; display:block; } .frame::after{ content:''; position:absolute; inset:0; pointer-events:none; background:rgba(0,0,0,0); transition:background .35s ease; } .frame:hover::after{ background:rgba(0,0,0,0.22); } .frame img{ width:100%; height:auto; display:block; transition:transform .55s cubic-bezier(0.16,1,0.3,1); } .frame:hover img{ transform:scale(1.04); } .frame .fnum{ position:absolute; bottom:10px; left:10px; font-family:var(--f-mono); font-size:10px; color:#fff; letter-spacing:0.08em; padding:3px 7px; background:rgba(0,0,0,0.5); opacity:0; transition:opacity .3s ease; } .frame:hover .fnum{ opacity:1; } /* ---------- footer ---------- */ .site-footer{ padding: 56px 0 40px; border-top:1px solid var(--line); } .footer-grid{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-end; } .footer-grid .brand{ margin-bottom:8px; } .footer-links{ display:flex; gap:24px; flex-wrap:wrap; } .footer-links a{ font-family:var(--f-mono); font-size:12px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.08em; } .footer-links a{ transition: color .2s ease; } .footer-links a:hover{ color:var(--accent); } .footer-legal{ font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); margin-top:32px; display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; } /* Theme toggle — quiet text button in the footer; label names the mode you'd switch to */ .theme-toggle{ background:none; border:none; padding:0; cursor:pointer; font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); letter-spacing:0.08em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); transition:color .2s ease; } .theme-toggle:hover, .theme-toggle:focus-visible{ color:var(--accent); } .theme-toggle .tt-dark{ display:none; } html[data-theme="light"] .theme-toggle .tt-light{ display:none; } html[data-theme="light"] .theme-toggle .tt-dark{ display:inline; } /* ---------- reveal-on-scroll ---------- */ .reveal{ opacity:0; transform: translateY(16px); transition: opacity .55s cubic-bezier(0.16,1,0.3,1), transform .55s cubic-bezier(0.16,1,0.3,1); transition-delay: var(--delay, 0ms); } .reveal.in{ opacity:1; transform:none; } /* ---------- scroll hint ---------- */ .scroll-hint{ position:absolute; bottom:28px; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink-faint); font-family:var(--f-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; pointer-events:none; animation:scroll-bob 2.4s ease-in-out infinite; } @keyframes scroll-bob{ 0%,100%{ opacity:0.45; transform:translateY(0); } 50%{ opacity:0.2; transform:translateY(7px); } } @media(max-width:640px){ .scroll-hint{ display:none; } } /* ================================================================ Mobile responsive — fills gaps left by per-component breakpoints ================================================================ */ /* Vertical spacing: 96px sections are too much on a phone */ @media (max-width: 640px){ .hero{ padding: 48px 0 36px; } .section{ padding: 60px 0; } .proj-section{ padding: 40px 0; } .proj-overview{ padding: 32px 0 0; } .proj-overview p{ font-size: 16px; } .section-head{ margin-bottom: 32px; } } /* Image grids: 3-col and 2-col become unreadable on narrow screens */ @media (max-width: 600px){ .proj-imgs.g3{ grid-template-columns: 1fr; } .proj-imgs.g3 img{ aspect-ratio: auto; } /* stack-sm: custom inline-styled grids opt into single-column stacking (!important needed to beat the inline grid-template-columns) */ .proj-imgs.stack-sm{ grid-template-columns: 1fr !important; } } @media (max-width: 460px){ .proj-imgs.g2{ grid-template-columns: 1fr; } .proj-imgs.g2 img{ aspect-ratio: auto; } } /* Spec list: "label value" side-by-side breaks below ~520px */ @media (max-width: 520px){ .spec-list li{ flex-direction: column; gap: 3px; } .spec-list li span:last-child{ text-align: left; } } /* Hero photo: cap size so it doesn't swamp a phone screen */ @media (max-width: 640px){ .hero-photo-frame{ max-width: 320px; } } /* Project nav: 3 items across can clip on very narrow screens */ @media (max-width: 480px){ .proj-nav{ flex-direction: column; align-items: flex-start; gap: 14px; } } /* Project hero caption text */ @media (max-width: 480px){ .proj-hero-caption h1{ font-size: clamp(28px, 8vw, 48px); } } /* CV: breathing room adjustments */ @media (max-width: 600px){ .cv-contact{ font-size: 12px; line-height: 1.9; } .cv-subrole{ padding-left: 10px; } .cv-entry-head{ font-size: 14px; } } /* Viewer hint text doesn't apply to touch */ @media (max-width: 600px){ .viewer-hint{ display: none; } } /* Footer title-block: 4 cells → 2×2 already at 640px; squeeze padding on very small screens */ @media (max-width: 400px){ .title-block div{ padding: 8px 10px; } .footer-links{ gap: 16px; } } /* ---------- photography lightbox ---------- */ .lightbox{ position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(4,9,17,0.94); padding: 48px 64px 64px; } .lightbox.open{ display: flex; } .lightbox img{ max-width: min(1200px, 100%); max-height: 100%; width: auto; height: auto; border: 1px solid rgba(200,215,240,0.2); box-shadow: 0 24px 80px rgba(0,0,0,0.6); } /* Overlay is always dark regardless of theme — chrome colors are hardcoded */ .lightbox-meta{ position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; color: rgba(200,215,240,0.75); } .lightbox-meta .fno{ color: var(--accent); margin-right: 14px; } .lightbox button{ position: absolute; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid rgba(200,215,240,0.28); color: rgba(200,215,240,0.85); cursor: pointer; font-family: var(--f-mono); font-size: 16px; line-height: 1; width: 40px; height: 40px; transition: color .15s, border-color .15s; } .lightbox button:hover, .lightbox button:focus-visible{ color: var(--accent); border-color: var(--accent); } .lightbox .lb-close{ top: 16px; right: 16px; } .lightbox .lb-prev{ left: 12px; top: 50%; transform: translateY(-50%); } .lightbox .lb-next{ right: 12px; top: 50%; transform: translateY(-50%); } body.lightbox-lock{ overflow: hidden; } .filmstrip .frame{ cursor: zoom-in; } @media (max-width: 640px){ .lightbox{ padding: 56px 8px 56px; } .lightbox .lb-prev{ left: 6px; } .lightbox .lb-next{ right: 6px; } } /* ---------- print (tuned for the resume page) ---------- */ @media print{ @page{ margin:0.55in; } *{ box-shadow:none !important; text-shadow:none !important; } html, body{ background:#fff !important; color:#111 !important; } body::after{ display:none !important; } .site-nav, .site-footer, .scroll-hint, .resume-actions, .hero-dots, .nav-toggle{ display:none !important; } .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .page-resume .hero{ display:none !important; } .section{ padding:16px 0 0 !important; } .wrap{ max-width:100% !important; padding:0 !important; } a{ color:#000 !important; text-decoration:none !important; } h1,h2,h3,h4, .cv-entry-head, .cv-header h2{ color:#000 !important; } .cv{ max-width:100% !important; } .cv-header{ border-color:#000 !important; padding-bottom:16px !important; margin-bottom:24px !important; } .cv-section{ margin-bottom:28px !important; } .cv-section > h3{ color:#000 !important; } .cv-section > h3::after{ background:#999 !important; } .cv-entry{ break-inside:avoid; } .cv-role{ color:#000 !important; font-weight:700 !important; } .cv-contact, .cv-loc, .cv-date, .cv-note, .cv-skills dt{ color:#444 !important; } .cv-list li, .cv-skills dd{ color:#111 !important; } .cv-list li::before{ color:#000 !important; } .cv-subrole{ border-color:#bbb !important; } }