/* ========================================================================== bperrine.dev — design system Warm-editorial-craft. Cream + gold, DM Serif Display + DM Sans. Light theme is the default; dark theme via [data-theme="dark"] on . ========================================================================== */ /* ---------- Tokens ---------- */ :root { /* Color — warm light (default) */ --bg: #F8F5F0; --bg-2: #F0EDE6; --surface: #FFFFFF; --text: #2C2825; --text-2: #7A7168; --text-3: #786F65; /* ≥4.5:1 on cream bg and white card surfaces (WCAG AA) */ --border: #E2DDD5; --border-light: #EBE7E0; --accent: #B8863E; --accent-hover: #A07535; --accent-text: #8B6424; --accent-tint: rgba(184, 134, 62, 0.12); /* Warm-tinted shadows */ --shadow-sm: 0 1px 3px rgba(44, 40, 37, 0.06), 0 1px 2px rgba(44, 40, 37, 0.04); --shadow-md: 0 4px 12px rgba(44, 40, 37, 0.08), 0 2px 4px rgba(44, 40, 37, 0.04); --shadow-lg: 0 8px 24px rgba(44, 40, 37, 0.1), 0 4px 8px rgba(44, 40, 37, 0.06); /* Radii */ --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-pill: 24px; /* Type */ --serif: "DM Serif Display", "Iowan Old Style", Georgia, serif; --sans: "DM Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* Layout */ --measure: 720px; --gutter: 24px; color-scheme: light; } [data-theme="dark"] { --bg: #1A1714; --bg-2: #221F1B; --surface: #242019; --text: #E8E2D9; --text-2: #9C9488; --text-3: #8F867B; /* ≥4.5:1 on dark bg and card surfaces (WCAG AA) */ --border: #3A3530; --border-light: #2E2A26; --accent: #D4A853; --accent-hover: #E2BB6B; --accent-text: #D4A853; --accent-tint: rgba(212, 168, 83, 0.14); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.25); color-scheme: dark; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Paired with body's overflow-x below: iOS Safari ignores body-only overflow-x for horizontal touch panning, and clip keeps the bleeding hero initial from inflating scrollWidth on narrow viewports. */ overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.65; overflow-x: hidden; /* the hero initial intentionally bleeds off-canvas */ transition: background-color 200ms ease, color 200ms ease; } ::selection { background: var(--accent-tint); color: var(--text); } img, svg { display: block; max-width: 100%; } h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.3; margin: 0; } p { margin: 0 0 1em; } a { color: var(--accent-text); text-decoration: none; transition: color 200ms ease; } a:hover { color: var(--accent-hover); } :focus-visible { /* --accent-hover clears the 3:1 non-text contrast minimum in both themes (raw --accent measures 2.96:1 on the cream bg) */ outline: 2px solid var(--accent-hover); outline-offset: 3px; border-radius: var(--r-1); } /* ---------- Skip link (visible on focus only) ---------- */ .skip-link { position: absolute; top: -100px; left: 16px; z-index: 100; padding: 10px 18px; /* --accent-text (#8B6424) gives ≥4.5:1 with white text (WCAG AA); raw --accent (#B8863E) measures only ~3.2:1 */ background: var(--accent-text); color: #FFFFFF; font-family: var(--sans); font-size: 15px; font-weight: 500; border-radius: var(--r-2); box-shadow: var(--shadow-md); } .skip-link:focus { top: 16px; } /* Dark mode: gold bg (--accent-text is #D4A853 there) needs dark text — ~8:1 vs white's ~2.2:1 */ [data-theme="dark"] .skip-link { color: #1A1714; } /* ---------- Layout ---------- */ .container { max-width: var(--measure); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* ---------- Nav ---------- */ .site-nav { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; padding-bottom: 28px; } .wordmark { font-family: var(--serif); font-size: 21px; color: var(--text); letter-spacing: 0.01em; } .wordmark:hover { color: var(--accent-text); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: var(--r-2); color: var(--text-2); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } .theme-toggle:hover { background: var(--bg-2); color: var(--accent-text); border-color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; } /* Icon swap: moon shown in light mode (invitation to dark), sun in dark mode */ .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---------- Hero ---------- */ .hero { position: relative; padding-top: 88px; padding-bottom: 96px; } .hero-inner { position: relative; z-index: 1; animation: fade-up 400ms ease-out both; } .hero-name { font-size: clamp(42px, 9vw, 64px); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 20px; } .hero-tagline { font-size: clamp(18px, 3.2vw, 21px); color: var(--text-2); line-height: 1.5; margin-bottom: 28px; max-width: 34em; } .hero-bio { font-size: 17px; line-height: 1.7; max-width: 40em; margin-bottom: 36px; } @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Status row ---------- */ .status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15.5px; color: var(--text-2); margin: 0; } .status-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); } .status-row a { border-bottom: 1px solid var(--accent-tint); padding-bottom: 1px; transition: color 200ms ease, border-color 200ms ease; } .status-row a:hover { border-bottom-color: var(--accent); } .status-sep { color: var(--text-3); } /* ---------- Section label (small caps) ---------- */ .section-label { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 56px; } /* ---------- Project cards ---------- */ .work { padding-bottom: 110px; } .card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--r-3); padding: 40px 44px; box-shadow: var(--shadow-sm); transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease; } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border); } .card + .card { margin-top: 90px; } .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-2); background: var(--accent-tint); color: var(--accent); margin-bottom: 22px; } .card-icon svg { width: 24px; height: 24px; } .card-name { font-size: 30px; margin-bottom: 14px; } .card-hard { font-size: 17px; line-height: 1.65; margin-bottom: 18px; } .card-scale { font-size: 14px; color: var(--text-3); margin-bottom: 8px; } .card-tags { font-size: 13.5px; color: var(--text-2); letter-spacing: 0.01em; margin-bottom: 22px; } .card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 500; } .card-link .arrow { display: inline-block; transition: transform 200ms ease; } .card-link:hover .arrow { transform: translateX(4px); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border-light); padding-top: 40px; padding-bottom: 56px; text-align: center; } .footer-line { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--text-3); margin: 0; } /* ========================================================================== Project pages ========================================================================== */ .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 500; margin: 40px 0 0; } .project-hero { padding-top: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--border-light); margin-bottom: 56px; } .project-hero .card-icon { margin-bottom: 26px; } .project-title { font-size: clamp(32px, 6.5vw, 44px); line-height: 1.15; margin-bottom: 16px; } .project-tagline { font-size: 19px; color: var(--text-2); line-height: 1.55; margin-bottom: 26px; max-width: 36em; } /* Long-form prose */ .project-body { padding-bottom: 40px; } .project-body h2 { font-size: 24px; margin: 48px 0 16px; } .project-body h2:first-child { margin-top: 0; } .project-body p { font-size: 17.5px; line-height: 1.7; margin: 0 0 1.2em; max-width: 42em; } .project-body blockquote { margin: 36px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--text-2); } .project-body code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.88em; background: var(--bg-2); border: 1px solid var(--border-light); border-radius: var(--r-1); padding: 1px 6px; } /* "Built with" chips — pills allowed here (unlike landing cards) */ .meta-section { padding: 36px 0; border-top: 1px solid var(--border-light); } .meta-label { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 18px; } .chip-row { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-block; padding: 6px 14px; background: var(--accent-tint); color: var(--accent-text); border-radius: var(--r-pill); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; } /* Links section — icon + text rows */ .link-list { display: flex; flex-direction: column; gap: 14px; } .link-row { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; align-self: flex-start; } .link-row svg { width: 18px; height: 18px; flex: none; } .project-footer { padding-top: 8px; padding-bottom: 72px; } /* ---------- Screenshots / figures ---------- */ .shots { padding: 8px 0 4px; } /* Labeled secondary gallery (after the writeup) borrows the meta divider */ .shots--gallery { border-top: 1px solid var(--border-light); padding-top: 36px; margin-top: 8px; } .shots__label { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 24px; } .shot { margin: 0 0 32px; } .shot:last-child { margin-bottom: 0; } .shot-frame { border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow-sm); transition: box-shadow 200ms ease, border-color 200ms ease; } .shot-frame:hover { box-shadow: var(--shadow-md); border-color: var(--accent); } .shot-frame img { width: 100%; height: auto; display: block; } .shot figcaption { margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--text-3); max-width: 42em; } /* ========================================================================== Lightbox — click a screenshot to enlarge, zoom, and pan ========================================================================== */ /* Affordance on the in-page thumbnails */ .shot-frame__img--zoomable { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; /* Warm near-black so both themes read the same when the viewer is open */ background: rgba(20, 17, 14, 0.9); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease, visibility 0s linear 200ms; } .lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 200ms ease; } .lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; max-width: 100%; max-height: 100%; } .lightbox__stage { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--r-2); } .lightbox__img { display: block; max-width: 92vw; max-height: 82vh; width: auto; height: auto; border-radius: var(--r-2); box-shadow: var(--shadow-lg); transform-origin: center center; cursor: zoom-in; touch-action: none; user-select: none; -webkit-user-drag: none; will-change: transform; } .lightbox__img.is-zoomed { cursor: grab; } .lightbox__img.is-panning { cursor: grabbing; } .lightbox__caption { max-width: min(60ch, 92vw); margin: 0; text-align: center; font-size: 14.5px; line-height: 1.55; color: rgba(232, 226, 217, 0.82); } .lightbox__caption[hidden] { display: none; } .lightbox__close { position: absolute; top: 18px; right: 18px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: #f4efe7; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--r-2); cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; } .lightbox__close:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); color: #ffffff; } .lightbox__close:focus-visible { outline: 2px solid #f4efe7; outline-offset: 3px; } .lightbox__close svg { width: 22px; height: 22px; } @media (max-width: 640px) { .lightbox { padding: 12px; } .lightbox__close { top: 10px; right: 10px; } } /* ========================================================================== Responsive — down to 360px ========================================================================== */ @media (max-width: 640px) { :root { --gutter: 20px; } .hero { padding-top: 56px; padding-bottom: 72px; } .card { padding: 28px 24px; } .card + .card { margin-top: 64px; } .card-name { font-size: 26px; } .section-label { margin-bottom: 40px; } .work { padding-bottom: 80px; } .project-hero { padding-top: 40px; padding-bottom: 40px; margin-bottom: 40px; } } @media (max-width: 400px) { :root { --gutter: 16px; } body { font-size: 16px; } .card { padding: 24px 20px; } } /* ========================================================================== Reduced motion — kill transitions, transforms, and entrance animation ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; } .hero-inner { animation: none; } .card:hover { transform: none; } .card-link:hover .arrow { transform: none; } }