/* ============================================================ TOKENS ============================================================ */ :root{ --paper: #F3F3F0; --paper-raised: #EAEAE4; --ink: #17181A; --muted: #6E6F6B; --line: #D6D5CF; --line-strong: #B9B8B0; --accent: #F2A900; --accent-ink: #17181A; --sans: 'Space Grotesk', system-ui, -apple-system, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace; --max: 1080px; --gutter: clamp(20px, 5vw, 64px); } /* Dark theme — same structure and accent, inverted surfaces. Applied via [data-theme="dark"] on , set by js/render.js (initTheme) based on saved preference or the OS setting. */ :root[data-theme="dark"]{ --paper: #121214; --paper-raised: #1B1B1E; --ink: #ECECE8; --muted: #97978F; --line: #2B2B2D; --line-strong: #40403E; --accent: #F2A900; --accent-ink: #17181A; } body, .titlebar, .card, .modal, .modal-overlay, .filter-chip, .tag, .skill, .btn, .theme-toggle, .timeline-item, .sub-card, .media-wrap, .about-portrait, .card-thumb{ transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } } img{ max-width:100%; display:block; } a{ color:inherit; } button{ font-family:inherit; } h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-0.01em; } p{ margin:0; } .wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); } .mono{ font-family:var(--mono); } .field-label{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); } /* sheet-border corner registration marks — drafting-sheet motif, page edges */ .reg{ position:fixed; width:16px; height:16px; border-color:var(--line-strong); pointer-events:none; z-index:5; opacity:0.9; } .reg--tl{ top:12px; left:12px; border-top:1px solid var(--line-strong); border-left:1px solid var(--line-strong); } .reg--tr{ top:12px; right:12px; border-top:1px solid var(--line-strong); border-right:1px solid var(--line-strong); } .reg--bl{ bottom:12px; left:12px; border-bottom:1px solid var(--line-strong); border-left:1px solid var(--line-strong); } .reg--br{ bottom:12px; right:12px; border-bottom:1px solid var(--line-strong); border-right:1px solid var(--line-strong); } @media (max-width:640px){ .reg{ display:none; } } /* ============================================================ TITLE BAR / NAV (shared across every page) ============================================================ */ .titlebar{ position:sticky; top:0; z-index:10; background:var(--paper); border-bottom:1px solid var(--line); } .titlebar .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:24px; } .titlebar-name{ font-weight:600; font-size:16px; text-decoration:none; } .titlebar-meta{ display:flex; gap:14px; align-items:center; } .nav{ display:flex; gap:22px; flex-wrap:wrap; } .nav a{ text-decoration:none; font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--muted); padding:4px 0; border-bottom:1px solid transparent; white-space:nowrap; } .nav a:hover, .nav a:focus-visible, .nav a.current{ color:var(--ink); border-bottom-color:var(--accent); } .nav-toggle{ display:none; background:none; border:1px solid var(--line-strong); padding:6px 10px; cursor:pointer; } .theme-toggle{ font-family:var(--mono); font-size:11px; letter-spacing:0.04em; padding:7px 11px; border:1px solid var(--line-strong); background:transparent; color:var(--muted); cursor:pointer; white-space:nowrap; } .theme-toggle:hover{ border-color:var(--ink); color:var(--ink); } @media (max-width: 860px){ .nav{ position:absolute; top:64px; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; padding:12px var(--gutter) 20px; gap:14px; display:none; } .nav.open{ display:flex; } .nav-toggle{ display:inline-block; } } /* ============================================================ PAGE HEADER (small title-block used at the top of every page) ============================================================ */ .page-header{ padding:56px 0 40px; border-bottom:1px solid var(--line); } .page-kicker{ margin-bottom:14px; } .page-header h1{ font-size:clamp(28px, 5vw, 42px); max-width:20ch; } .page-header p{ margin-top:14px; max-width:56ch; color:var(--muted); font-size:16px; } /* ============================================================ HERO (homepage only) ============================================================ */ .hero{ padding:88px 0 64px; border-bottom:1px solid var(--line); } .hero-kicker{ margin-bottom:18px; } .hero h1{ font-size:clamp(34px, 6vw, 58px); line-height:1.05; max-width:14ch; } .hero-sub{ margin-top:20px; max-width:52ch; font-size:18px; color:var(--muted); } .hero-actions{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; letter-spacing:0.03em; padding:12px 18px; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; text-decoration:none; transition:background 0.15s ease, color 0.15s ease; } .btn:hover{ background:var(--ink); color:var(--paper); } .btn--primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .btn--primary:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); } .spec-row{ margin-top:56px; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); border-top:1px solid var(--line); } .spec{ padding:18px 20px 0 0; border-right:1px solid var(--line); } .spec:last-child{ border-right:none; } .spec-value{ font-family:var(--mono); font-size:28px; font-weight:500; } .spec-label{ margin-top:4px; } @media (max-width:640px){ .spec-row{ grid-template-columns:repeat(2,1fr); row-gap:20px; } .spec:nth-child(2){ border-right:none; } } /* ============================================================ SECTIONS ============================================================ */ .section{ padding:72px 0; border-bottom:1px solid var(--line); } .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:36px; } .section-head h2{ font-size:28px; } .section-number{ color:var(--muted); } .section-foot{ margin-top:32px; } /* ============================================================ FILTERS ============================================================ */ .filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; } .filter-chip{ font-family:var(--mono); font-size:12px; letter-spacing:0.03em; padding:8px 14px; border:1px solid var(--line-strong); background:transparent; color:var(--muted); cursor:pointer; } .filter-chip:hover{ border-color:var(--ink); color:var(--ink); } .filter-chip.active{ background:var(--ink); border-color:var(--ink); color:var(--paper); } /* ============================================================ PROJECT GRID / CARDS (index-card / title-block motif) ============================================================ */ .grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); } @media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .grid{ grid-template-columns:1fr; } } .grid--2{ grid-template-columns:repeat(2, 1fr); } @media (max-width:700px){ .grid--2{ grid-template-columns:1fr; } } .card{ background:var(--paper); padding:22px; cursor:pointer; display:flex; flex-direction:column; gap:14px; transition:background 0.15s ease; } .card:hover, .card:focus-visible{ background:var(--paper-raised); outline:none; } .card.hidden{ display:none; } .card-top{ display:flex; justify-content:space-between; align-items:flex-start; } .card-index{ color:var(--muted); } .card-thumb{ width:100%; aspect-ratio:16/10; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; background:var(--paper); position:relative; } .card-thumb svg{ width:46%; height:46%; } .badge-corner{ position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:4px; align-items:flex-end; } .badge-corner-item{ font-family:var(--mono); font-size:10px; letter-spacing:0.04em; padding:3px 7px; } .badge-3d{ background:var(--accent); color:var(--accent-ink); } .badge-custom.badge-accent{ background:var(--accent); color:var(--accent-ink); } .badge-custom.badge-muted{ background:var(--paper); border:1px solid var(--line-strong); color:var(--muted); } .badge-gallery{ position:absolute; top:8px; left:8px; font-family:var(--mono); font-size:10px; letter-spacing:0.04em; background:var(--paper); border:1px solid var(--line-strong); color:var(--muted); padding:3px 7px; } .card-title{ font-size:19px; } .card-desc{ color:var(--muted); font-size:14.5px; } .card-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; } .tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.03em; border:1px solid var(--line-strong); color:var(--muted); padding:3px 8px; } /* ============================================================ TIMELINE PAGE ============================================================ */ .timeline{ position:relative; padding-left:28px; border-left:1px solid var(--line-strong); } .timeline-year{ position:relative; margin-bottom:44px; } .timeline-year:last-child{ margin-bottom:0; } .timeline-year-label{ font-family:var(--mono); font-size:22px; font-weight:500; margin-bottom:18px; position:relative; } .timeline-year-label::before{ content:""; position:absolute; left:-33.5px; top:8px; width:9px; height:9px; background:var(--accent); border:1px solid var(--ink); } .timeline-items{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); } .timeline-item{ background:var(--paper); padding:16px 20px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; transition:background 0.15s ease; } .timeline-item:hover, .timeline-item:focus-visible{ background:var(--paper-raised); outline:none; } .timeline-item-main{ min-width:0; } .timeline-item-title{ font-size:16px; } .timeline-item-desc{ color:var(--muted); font-size:13.5px; margin-top:3px; } .timeline-item-meta{ display:flex; gap:8px; flex-shrink:0; } @media (max-width:600px){ .timeline-item{ flex-direction:column; align-items:flex-start; } } /* ============================================================ CATEGORIES PAGE ============================================================ */ .cat-jump{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; } .cat-section{ padding:56px 0; border-bottom:1px solid var(--line); scroll-margin-top:80px; } .cat-section:last-child{ border-bottom:none; } .cat-section-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:28px; } .cat-section-head h2{ font-size:24px; } .cat-count{ color:var(--muted); } /* ============================================================ SUBPROJECTS PAGE ============================================================ */ .sub-card{ border:1px solid var(--line); background:var(--paper); padding:20px; display:flex; flex-direction:column; gap:10px; cursor:pointer; transition:background 0.15s ease; } .sub-card:hover, .sub-card:focus-visible{ background:var(--paper-raised); outline:none; } .sub-parent-link{ font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:var(--muted); text-transform:uppercase; } .sub-title{ font-size:17px; } .sub-desc{ color:var(--muted); font-size:14px; } /* ============================================================ MODAL / PROJECT DETAIL (shared across pages via render.js) ============================================================ */ .modal-overlay{ position:fixed; inset:0; background:rgba(23,24,26,0.55); display:none; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; z-index:100; } .modal-overlay.open{ display:flex; } .modal{ background:var(--paper); border:1px solid var(--ink); max-width:720px; width:100%; padding:36px; position:relative; margin:20px 0 40px; } .modal-close{ position:absolute; top:20px; right:20px; width:32px; height:32px; border:1px solid var(--line-strong); background:transparent; cursor:pointer; font-family:var(--mono); font-size:16px; line-height:1; } .modal-close:hover{ border-color:var(--ink); } .modal-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; } .modal h3{ font-size:26px; max-width:24ch; } .modal-desc{ margin-top:10px; color:var(--muted); font-size:15px; max-width:56ch; } .modal-block{ margin-top:26px; } .modal-block h4{ font-family:var(--mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; } .modal-block p{ font-size:15px; max-width:60ch; } .modal-block p + p{ margin-top:12px; } .inline-figure{ margin:20px 0; } .inline-figure img{ width:100%; border:1px solid var(--line-strong); } .inline-figure figcaption{ font-family:var(--mono); font-size:11px; letter-spacing:0.03em; color:var(--muted); margin-top:6px; } .modal-links{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; } .sub-list{ display:flex; flex-direction:column; gap:14px; margin-top:6px; } .sub-list-item{ border-left:2px solid var(--line-strong); padding-left:14px; } .sub-list-item-title{ font-size:14.5px; font-weight:600; } .sub-list-item-desc{ font-size:13.5px; color:var(--muted); margin-top:2px; } .media-wrap{ margin-top:20px; border:1px solid var(--line-strong); background:var(--paper-raised); position:relative; } .media-tabs{ display:flex; gap:1px; background:var(--line-strong); border-bottom:1px solid var(--line-strong); } .media-tab{ flex:1; font-family:var(--mono); font-size:11.5px; letter-spacing:0.03em; padding:10px; border:none; background:var(--paper); color:var(--muted); cursor:pointer; } .media-tab:hover{ color:var(--ink); } .media-tab.active{ background:var(--paper-raised); color:var(--ink); } .media-pane model-viewer{ width:100%; height:340px; --poster-color: transparent; } .model-hint{ position:absolute; bottom:8px; left:10px; font-family:var(--mono); font-size:10.5px; color:var(--muted); background:rgba(243,243,240,0.85); padding:2px 6px; pointer-events:none; } .model-fallback{ height:220px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; text-align:center; padding:20px; font-family:var(--mono); font-size:12.5px; color:var(--muted); } .anim-controls{ display:flex; flex-wrap:wrap; gap:8px; padding:12px; border-top:1px solid var(--line-strong); } .anim-btn{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.02em; padding:7px 12px; border:1px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer; } .anim-btn:hover{ border-color:var(--ink); } .anim-btn.active{ background:var(--ink); border-color:var(--ink); color:var(--paper); } /* Photo gallery */ .gallery-frame{ position:relative; width:100%; aspect-ratio:16/10; background:var(--paper); overflow:hidden; } .gallery-img{ width:100%; height:100%; object-fit:contain; } .gallery-caption{ padding:10px 12px 0; font-size:13px; color:var(--muted); } .gallery-nav{ position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border:1px solid var(--line-strong); background:rgba(243,243,240,0.85); color:var(--ink); font-family:var(--mono); font-size:16px; line-height:1; cursor:pointer; } .gallery-nav:hover{ border-color:var(--ink); background:var(--paper); } .gallery-prev{ left:10px; } .gallery-next{ right:10px; } .gallery-meta{ display:flex; justify-content:flex-end; padding:8px 12px 0; } .gallery-count{ font-size:11px; color:var(--muted); } .gallery-thumbs{ display:flex; gap:6px; flex-wrap:wrap; padding:10px 12px 12px; } .gallery-thumb{ width:52px; height:38px; object-fit:cover; cursor:pointer; border:1px solid var(--line-strong); opacity:0.6; } .gallery-thumb:hover{ opacity:0.85; } .gallery-thumb.active{ opacity:1; border-color:var(--accent); } /* ============================================================ ABOUT (homepage) ============================================================ */ .about-grid{ display:grid; grid-template-columns:220px 1fr; gap:48px; } @media (max-width:700px){ .about-grid{ grid-template-columns:1fr; } } .about-portrait{ width:100%; aspect-ratio:1; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; color:var(--muted); text-align:center; padding:16px; } .about-body p{ max-width:62ch; font-size:16px; color:var(--ink); } .about-body p + p{ margin-top:16px; } .skills{ margin-top:28px; display:flex; flex-wrap:wrap; gap:8px; } .skill{ font-family:var(--mono); font-size:12px; border:1px solid var(--line-strong); padding:6px 12px; color:var(--ink); } /* ============================================================ CONTACT (homepage) ============================================================ */ .contact-row{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; } .contact-links{ display:flex; gap:22px; flex-wrap:wrap; } .contact-links a{ font-family:var(--mono); font-size:13px; text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:2px; } .contact-links a:hover{ border-bottom-color:var(--accent); } /* ============================================================ FOOTER ============================================================ */ .footer{ padding:28px 0 64px; } .footer .wrap{ display:flex; justify-content:space-between; color:var(--muted); font-family:var(--mono); font-size:12px; flex-wrap:wrap; gap:8px; } /* ============================================================ EMPTY STATE (shown while project files are loading, or if a page-specific filter/group produces zero results) ============================================================ */ .empty-state{ font-family:var(--mono); font-size:13px; color:var(--muted); padding:40px 0; }