/* ========================================================================== charlesheroux.ca — public site Hand-written, no build step. A dark, cinematic theme: a deep navy-black ground that matches the portrait backdrop, one warm amber accent, and soft blue glows. Every colour and size comes from the tokens below, so the look can be retuned in one place. ========================================================================== */ :root { /* Swap this line to move to a licensed typeface. */ --font-sans: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif; --bg: #070a12; --bg-raised: #0c1120; --surface: rgba(255, 255, 255, 0.035); --surface-hover: rgba(255, 255, 255, 0.065); --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16); --ink: #eef1f7; --ink-soft: #c3c9d6; --ink-muted: #8b94a8; --accent: #f5a524; --accent-light: #ffd88a; --accent-ink: #1b1103; --accent-gradient: linear-gradient(120deg, #ffd88a 0%, #f5a524 45%, #ff7a3d 100%); /* RGB triplets, so glows can be tinted at any opacity with rgba(). */ --amber-rgb: 245, 165, 36; --blue-rgb: 47, 85, 212; --danger: #ff7b7b; --success: #4ade80; --radius-lg: 22px; --radius: 14px; --radius-sm: 10px; --container: 1200px; --gutter: clamp(20px, 4vw, 40px); --header-height: 76px; --section-space: clamp(80px, 11vw, 140px); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* The ground is painted on rather than so the fixed ambient glow below, which sits at z-index -1 inside body, shows above it. */ html { -webkit-text-size-adjust: 100%; color-scheme: dark; background: var(--bg); scroll-behavior: smooth; scroll-padding-top: var(--header-height); } body { margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 600px at 90% -10%, rgba(var(--blue-rgb), 0.16), transparent 60%), radial-gradient(700px 500px at -10% 40%, rgba(var(--amber-rgb), 0.05), transparent 60%); } img { max-width: 100%; height: auto; display: block; border: 0; } a { color: inherit; } ::selection { background: rgba(var(--amber-rgb), 0.35); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } main { padding-top: var(--header-height); } .container { width: 100%; max-width: calc(var(--container) + (2 * var(--gutter))); margin: 0 auto; padding: 0 var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; top: -60px; left: 12px; z-index: 200; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: 12px; } .text-gradient { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.7; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: translate 0.25s var(--ease-out), box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } .button svg { width: 18px; height: 18px; flex: none; transition: translate 0.25s var(--ease-out); } .button:hover svg { translate: 3px 0; } .button--primary { background: var(--accent-gradient); color: var(--accent-ink); box-shadow: 0 10px 30px -10px rgba(var(--amber-rgb), 0.6); } .button--primary:hover { translate: 0 -2px; box-shadow: 0 16px 40px -12px rgba(var(--amber-rgb), 0.75); } .button--ghost { border-color: var(--line-strong); background: var(--surface); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .button--ghost:hover { border-color: rgba(255, 255, 255, 0.3); background: var(--surface-hover); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color 0.3s ease, border-color 0.3s ease; } /* Frosted once the page scrolls (set by site.js), or while the mobile menu is open. */ .site-header[data-scrolled='true'], .site-header:has(.site-nav[data-open='true']) { border-bottom-color: var(--line); background: rgba(7, 10, 18, 0.78); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-height); max-width: calc(var(--container) + (2 * var(--gutter))); margin: 0 auto; padding: 0 var(--gutter); } .logo { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; white-space: nowrap; } .logo__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-gradient); color: var(--accent-ink); font-size: 13px; letter-spacing: 0.02em; box-shadow: 0 6px 20px -6px rgba(var(--amber-rgb), 0.7); } .site-nav { display: flex; align-items: center; gap: 22px; } .site-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; } .site-nav ul a { display: block; padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink-muted); text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease; } .site-nav ul a:hover { color: var(--ink); } .site-nav ul a[aria-current='page'] { background: var(--surface-hover); color: var(--ink); } .lang-switch { display: grid; place-items: center; min-width: 44px; height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-soft); text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .lang-switch:hover { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); } /* Hidden until the menu collapses on narrow screens. */ .nav-toggle { display: none; padding: 6px; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; } .nav-toggle svg { display: block; } /* -------------------------------------------------------------------------- Scroll reveal -------------------------------------------------------------------------- Elements marked data-reveal fade up when they enter the viewport (site.js adds .is-visible). An animation is used rather than a transition so each element keeps its own hover transitions; hover lifts use the independent `translate` property for the same reason. --delay staggers siblings. */ .js [data-reveal] { opacity: 0; } .js [data-reveal].is-visible { animation: reveal 0.9s var(--ease-out) both; animation-delay: calc(var(--delay, 0) * 90ms); } @keyframes reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- Home — hero -------------------------------------------------------------------------- */ .hero { position: relative; display: flex; align-items: center; min-height: calc(100vh - var(--header-height)); min-height: calc(100svh - var(--header-height)); padding: 40px 0 80px; overflow: hidden; isolation: isolate; } .hero__backdrop { position: absolute; inset: 0; z-index: -1; background: radial-gradient(620px 440px at 74% 46%, rgba(var(--blue-rgb), 0.3), transparent 70%), radial-gradient(420px 320px at 82% 75%, rgba(var(--amber-rgb), 0.1), transparent 70%); } /* A faint blueprint grid, faded out toward the edges. */ .hero__backdrop::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; opacity: 0.5; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 45% 40%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at 45% 40%, #000 15%, transparent 75%); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(32px, 5vw, 72px); } .status-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 30px; padding: 8px 16px 8px 14px; border: 1px solid rgba(74, 222, 128, 0.25); border-radius: 999px; background: rgba(74, 222, 128, 0.08); color: #bbf7d0; font-size: 14px; font-weight: 600; } .status-pill__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--success); } .status-pill__dot::after { content: ''; position: absolute; inset: -4px; border: 2px solid var(--success); border-radius: 50%; animation: pulse 2s ease-out infinite; } @keyframes pulse { from { opacity: 0.9; transform: scale(0.6); } to { opacity: 0; transform: scale(2); } } .hero__greeting { margin: 0 0 8px; font-size: clamp(18px, 2vw, 22px); color: var(--ink-muted); } .hero__name { margin: 0; font-size: clamp(56px, 9vw, 124px); font-weight: 800; line-height: 0.95; letter-spacing: -0.045em; } .hero__name span { display: block; /* Room for descenders and the accent, which background-clip would crop. */ padding-bottom: 0.06em; } .hero__role { margin: 26px 0 0; font-size: clamp(19px, 2.1vw, 24px); font-weight: 600; letter-spacing: -0.01em; } .hero__amp { margin: 0 0.1em; color: var(--accent); font-weight: 400; } .hero__lead { max-width: 56ch; margin: 18px 0 0; font-size: clamp(16px, 1.5vw, 18px); color: var(--ink-muted); } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; } .hero__portrait { position: relative; margin: 0; aspect-ratio: 4 / 5; } /* The photo's navy backdrop is feathered into the page, so the portrait reads as lit on the same stage rather than pasted in a box. */ .hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000 55%, transparent 100%); } .hero__halo { position: absolute; inset: 10% 8% 14%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--blue-rgb), 0.5), transparent 65%); filter: blur(40px); } .hero__orbit { position: absolute; inset: 3% -2% 7%; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 50%; animation: orbit 48s linear infinite; } .hero__orbit::before { content: ''; position: absolute; top: 14%; left: 12%; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px 4px rgba(var(--amber-rgb), 0.6); } @keyframes orbit { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- Home — stats band -------------------------------------------------------------------------- */ .stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent); } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { padding: 36px 24px; border-left: 1px solid var(--line); } .stat:first-child { padding-left: 0; border-left: 0; } .stat__value { display: inline-block; font-size: clamp(34px, 4vw, 48px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; } .stat__label { display: block; margin-top: 6px; font-size: 14px; color: var(--ink-muted); } /* -------------------------------------------------------------------------- Sections -------------------------------------------------------------------------- */ .section { position: relative; padding: var(--section-space) 0; } .section--flush-top { padding-top: 0; } .section-head { max-width: 780px; margin-bottom: 56px; } .section-title { margin: 0; font-size: clamp(32px, 4.4vw, 54px); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; } .section-intro { max-width: 62ch; margin: 20px 0 0; font-size: 18px; color: var(--ink-muted); } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .expertise-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .card { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3.5vw, 44px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); overflow: hidden; isolation: isolate; transition: border-color 0.3s ease, translate 0.4s var(--ease-out); } /* A soft light that follows the pointer (coordinates set by site.js). */ .card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(var(--amber-rgb), 0.1), transparent 60%); opacity: 0; transition: opacity 0.3s ease; } .card:hover { border-color: var(--line-strong); translate: 0 -4px; } .card:hover::before { opacity: 1; } .card__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 28px; border: 1px solid rgba(var(--amber-rgb), 0.25); border-radius: 14px; background: rgba(var(--amber-rgb), 0.1); color: var(--accent); } .card--training .card__icon { border-color: rgba(var(--blue-rgb), 0.45); background: rgba(var(--blue-rgb), 0.15); color: #93aaff; } .card__icon svg { width: 26px; height: 26px; } .card__kicker { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); } .card__title { margin: 0; font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } .card__text { margin: 16px 0 0; color: var(--ink-muted); } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; } .tags li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.03); font-size: 13px; font-weight: 600; color: var(--ink-soft); } .card__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: auto; padding-top: 30px; } .card__link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; } .card__link--muted { color: var(--ink-soft); } .card__link svg { width: 18px; height: 18px; transition: translate 0.25s var(--ease-out); } .card__link:hover { color: var(--accent-light); } .card__link:hover svg { translate: 3px 0; } /* -------------------------------------------------------------------------- Home — photography teaser -------------------------------------------------------------------------- */ .photo-teaser { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(32px, 6vw, 80px); } .photo-teaser__text .button { margin-top: 32px; } .mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding-bottom: 48px; } .mosaic__item { position: relative; display: block; overflow: hidden; aspect-ratio: 422 / 330; border-radius: var(--radius); background: var(--bg-raised); text-decoration: none; } /* Every other tile drops down for a staggered, editorial rhythm. */ .mosaic__item:nth-child(2n) { margin-top: 48px; margin-bottom: -48px; } .mosaic__item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) brightness(0.8); transition: transform 0.8s var(--ease-out), filter 0.5s ease; } .mosaic__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(7, 10, 18, 0.75)); } .mosaic__item:hover img, .mosaic__item:focus-visible img { filter: none; transform: scale(1.06); } .mosaic__label { position: absolute; left: 16px; bottom: 12px; z-index: 1; font-size: 15px; font-weight: 600; color: #fff; } /* -------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------- */ .testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; } .testimonial { position: relative; display: flex; flex-direction: column; margin: 0; padding: clamp(28px, 4vw, 52px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(520px 260px at 0% 0%, rgba(var(--blue-rgb), 0.18), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); } .testimonial__mark { width: 44px; height: auto; margin-bottom: 24px; color: var(--accent); } .testimonial__quote { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ink-soft); } .testimonial__quote p { margin: 0 0 1em; } .testimonial__quote p:last-child { margin-bottom: 0; } /* A lone testimonial spans the row, so it speaks in a larger voice. */ .testimonial:only-child .testimonial__quote { max-width: 64ch; font-size: clamp(19px, 2vw, 24px); color: var(--ink); } .testimonial__author { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 32px; } .testimonial__avatar { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-gradient); color: var(--accent-ink); font-weight: 700; } .testimonial__name { display: block; font-weight: 700; } .testimonial__role { display: block; font-size: 14px; color: var(--ink-muted); } .testimonial__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; font-size: 13px; color: var(--ink-muted); } .testimonial__meta a { color: var(--accent); text-decoration: none; } .testimonial__meta a:hover { color: var(--accent-light); } /* -------------------------------------------------------------------------- Call to action band -------------------------------------------------------------------------- */ .cta { position: relative; padding: clamp(40px, 7vw, 88px) clamp(24px, 5vw, 64px); border: 1px solid var(--line-strong); border-radius: 28px; overflow: hidden; text-align: center; background: radial-gradient(600px 300px at 50% 0%, rgba(var(--amber-rgb), 0.16), transparent 70%), radial-gradient(520px 320px at 50% 120%, rgba(var(--blue-rgb), 0.35), transparent 70%), var(--bg-raised); } .cta__title { max-width: 24ch; margin: 0 auto; font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; } .cta__text { margin: 18px auto 0; font-size: 18px; color: var(--ink-muted); } .cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; } /* -------------------------------------------------------------------------- Inner page heading -------------------------------------------------------------------------- */ .page-hero { padding: clamp(60px, 10vw, 120px) 0 clamp(40px, 6vw, 70px); } .page-hero__title { margin: 0; font-size: clamp(44px, 7vw, 88px); font-weight: 800; line-height: 1; letter-spacing: -0.045em; } .page-hero__intro { max-width: 60ch; margin: 22px 0 0; font-size: 18px; color: var(--ink-muted); } /* On a line of its own, so an eyebrow below it never sits beside it. */ .back-link { display: block; width: fit-content; margin-bottom: 26px; font-size: 14px; font-weight: 600; color: var(--ink-muted); text-decoration: none; transition: color 0.2s ease; } .back-link:hover { color: var(--accent); } .empty-state { margin: 0 0 var(--section-space); padding: 40px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--ink-muted); text-align: center; } /* -------------------------------------------------------------------------- Photography — gallery index -------------------------------------------------------------------------- */ .cover-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: var(--section-space); } /* The 422:330 frame matches the cover crops imported from Adobe Portfolio. */ .cover { position: relative; display: block; overflow: hidden; aspect-ratio: 422 / 330; border-radius: var(--radius); background: var(--bg-raised); text-decoration: none; isolation: isolate; } .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); } .cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(7, 10, 18, 0.85)); } .cover:hover img, .cover:focus-visible img { transform: scale(1.06); } .cover__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 22px 24px; } .cover__title { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #fff; } .cover__cta { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; opacity: 0; translate: -6px 0; transition: opacity 0.3s ease, translate 0.3s var(--ease-out); } .cover:hover .cover__cta, .cover:focus-visible .cover__cta { opacity: 1; translate: 0 0; } /* Touch devices have no hover state, so keep the prompt visible. */ @media (hover: none) { .cover__cta { opacity: 1; translate: 0 0; } } /* -------------------------------------------------------------------------- Photography — gallery page: one centred column at natural widths -------------------------------------------------------------------------- */ .photo-stack { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 0 var(--gutter) var(--section-space); } .photo-stack figure { max-width: 100%; margin: 0; text-align: center; } .photo-stack img { /* Never upscale: a 662px original stays 662px. */ margin: 0 auto; border-radius: 6px; background: var(--bg-raised); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); cursor: zoom-in; } .photo-stack figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-muted); } /* -------------------------------------------------------------------------- Contact -------------------------------------------------------------------------- */ .contact-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(28px, 5vw, 64px); padding-bottom: var(--section-space); } .contact-details { display: grid; gap: 14px; } .contact-detail { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; transition: border-color 0.2s ease, background-color 0.2s ease; } a.contact-detail:hover { border-color: var(--line-strong); background: var(--surface-hover); } .contact-detail__icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--amber-rgb), 0.1); color: var(--accent); } .contact-detail__icon svg { width: 22px; height: 22px; } .contact-detail__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .contact-detail__value { display: block; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .contact-card { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.8); } .field { margin-bottom: 22px; } .field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink-soft); } .field .required { color: var(--accent); } .field .optional { font-weight: 400; color: var(--ink-muted); } fieldset.field { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; } .field legend { margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 600; color: var(--ink-soft); } /* Radio buttons drawn as pills. The input stays in place, transparent, over its pill, so it keeps native keyboard and screen-reader behaviour. */ .choices { display: flex; flex-wrap: wrap; gap: 10px; } .choice { position: relative; } .choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .choice span { display: block; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink-soft); transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .choice:hover span { border-color: rgba(255, 255, 255, 0.3); } .choice input:checked + span { border-color: var(--accent); background: rgba(var(--amber-rgb), 0.12); color: var(--ink); } .choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; } .field input:not([type='radio']), .field textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: rgba(7, 10, 18, 0.6); color: var(--ink); font: inherit; font-size: 16px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field ::placeholder { color: #5d6579; } .field textarea { min-height: 170px; resize: vertical; } .field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px rgba(var(--amber-rgb), 0.15); } .field .error { margin: 8px 0 0; font-size: 14px; color: var(--danger); } .field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: var(--danger); } .alert-success { margin: 0 0 24px; padding: 14px 18px; border: 1px solid rgba(74, 222, 128, 0.3); border-radius: var(--radius-sm); background: rgba(74, 222, 128, 0.08); color: #bbf7d0; } /* Hidden field used to catch bots; never shown to a real visitor. */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { padding: 64px 0 32px; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(var(--blue-rgb), 0.07)); } .site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; } .site-footer__brand p { max-width: 32ch; margin: 16px 0 0; font-size: 15px; color: var(--ink-muted); } .site-footer__heading { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); } .site-footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .site-footer ul a { font-size: 15px; color: var(--ink-soft); text-decoration: none; transition: color 0.2s ease; } .site-footer ul a:hover { color: var(--accent); } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-muted); } .site-footer__bottom p { margin: 0; } .back-to-top { color: var(--ink-muted); text-decoration: none; } .back-to-top:hover { color: var(--ink); } /* -------------------------------------------------------------------------- Lightbox -------------------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(5, 7, 12, 0.96); opacity: 0; visibility: hidden; /* Hiding is delayed until the fade finishes. Do not give visibility a duration: mid-transition it still computes to hidden, and a hidden element cannot receive focus, which breaks keyboard access. */ transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .lightbox[data-open='true'] { opacity: 1; visibility: visible; /* Becomes visible on the same tick, so focus() lands immediately. */ transition: opacity 0.2s ease, visibility 0s linear 0s; } .lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; } .lightbox__close, .lightbox__nav { position: absolute; padding: 12px; border: 0; background: none; color: var(--ink); font-size: 34px; line-height: 1; cursor: pointer; } .lightbox__close { top: 10px; right: 16px; } .lightbox__nav[data-dir='prev'] { top: 50%; left: 8px; transform: translateY(-50%); } .lightbox__nav[data-dir='next'] { top: 50%; right: 8px; transform: translateY(-50%); } .lightbox__counter { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; font-size: 13px; color: var(--ink-muted); text-align: center; } body.lightbox-open { overflow: hidden; } /* -------------------------------------------------------------------------- Career pages (programming, training, music) -------------------------------------------------------------------------- */ /* A sentence-long page title, set smaller than a one-word one. */ .page-hero__title--statement { max-width: 22ch; font-size: clamp(36px, 5.4vw, 68px); line-height: 1.05; letter-spacing: -0.035em; } .page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .subsection-title { margin: 56px 0 22px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .subsection-title:first-child { margin-top: 0; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; } .feature { padding: 30px 28px 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)); transition: border-color 0.3s ease, translate 0.4s var(--ease-out); } .feature:hover { border-color: var(--line-strong); translate: 0 -3px; } .feature__index { display: block; margin-bottom: 18px; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); } .feature__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } .feature__text { margin: 10px 0 0; font-size: 15px; color: var(--ink-muted); } .stack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; } .stack-group { padding: 26px 26px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .stack-group__name { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); } .stack-group .tags { margin-top: 16px; } .tags--small li { padding: 4px 10px; font-size: 12px; } .tags--large li { padding: 10px 16px; font-size: 15px; } /* The heading stays in view beside a long timeline. */ .career-split { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr); align-items: start; gap: clamp(32px, 6vw, 88px); } .career-split__head { position: sticky; top: calc(var(--header-height) + 32px); margin-bottom: 0; } .timeline { position: relative; margin: 0; padding: 0; list-style: none; } .timeline::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 7px; width: 1px; background: linear-gradient(180deg, var(--accent), var(--line) 30%, var(--line)); } .timeline__item { position: relative; padding: 0 0 44px 40px; } .timeline__item:last-child { padding-bottom: 0; } .timeline__item::before { content: ''; position: absolute; top: 5px; left: 0; width: 15px; height: 15px; border: 2px solid var(--accent); border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 4px rgba(var(--amber-rgb), 0.12); } .timeline__period { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); } .timeline__title { margin: 6px 0 0; font-size: clamp(20px, 2vw, 24px); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; } .timeline__org { margin: 4px 0 0; font-weight: 600; color: var(--ink-soft); } .timeline__summary { margin: 14px 0 0; color: var(--ink-muted); } .timeline__highlights { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } .timeline__highlights li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink-muted); } .timeline__highlights li::before { content: ''; position: absolute; top: 0.75em; left: 2px; width: 8px; height: 2px; border-radius: 2px; background: var(--accent); } .timeline .tags { margin-top: 16px; } .compact-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .compact-list__item { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .compact-list__year { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); } .compact-list__title { font-weight: 700; line-height: 1.3; } .compact-list__org { font-size: 14px; color: var(--ink-muted); } .compact-list__summary { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-muted); } .subjects-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: start; gap: clamp(32px, 5vw, 64px); } .format-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .format-list li { padding: 18px 20px; border-left: 2px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); } .format-list strong { display: block; font-weight: 700; } .format-list span { font-size: 15px; color: var(--ink-muted); } /* -------------------------------------------------------------------------- Projects -------------------------------------------------------------------------- */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; } .project-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-raised); text-decoration: none; transition: border-color 0.3s ease, translate 0.4s var(--ease-out), box-shadow 0.4s ease; } .project-card:hover, .project-card:focus-visible { border-color: var(--line-strong); translate: 0 -4px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); } .project-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 30% 20%, rgba(var(--blue-rgb), 0.5), transparent 60%), radial-gradient(circle at 80% 90%, rgba(var(--amber-rgb), 0.25), transparent 55%), var(--bg); } /* Anchored top-left: a screenshot wider or taller than the card keeps its logo and page title, which sit in that corner on most sites. */ .project-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform 0.8s var(--ease-out); } .project-card:hover .project-card__media img { transform: scale(1.04); } .project-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; font-size: 88px; font-weight: 800; color: rgba(255, 255, 255, 0.14); } .project-card__badge { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 999px; background: var(--accent-gradient); color: var(--accent-ink); font-size: 12px; font-weight: 700; } .project-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 24px 26px 26px; } .project-card__name { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; } .project-card__tagline { font-size: 15px; color: var(--ink-muted); } .project-card__stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .project-card__stack span { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink-soft); } .project-card__more { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 700; color: var(--accent); } /* The screenshot sits in a minimal browser window. */ .browser-frame { margin: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg-raised); box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.9); } .browser-frame__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); } .browser-frame__bar > span:not(.browser-frame__url) { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); } .browser-frame__url { margin-left: 14px; padding: 3px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 12px; color: var(--ink-muted); } .browser-frame img { width: 100%; } .project-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); align-items: start; gap: clamp(32px, 6vw, 80px); } .project-body__lead { margin: 0; font-size: 19px; line-height: 1.65; color: var(--ink-soft); } .check-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .check-list li { position: relative; padding-left: 34px; color: var(--ink-soft); } .check-list li::before { content: ''; position: absolute; top: 0.2em; left: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(var(--amber-rgb), 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23f5a524' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; } .project-facts { position: sticky; top: calc(var(--header-height) + 32px); padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .project-facts dl { display: grid; gap: 22px; margin: 0; } .project-facts dt { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .project-facts dd { margin: 0; font-weight: 600; } .project-facts dd a { color: var(--accent); text-decoration: none; } .project-facts .tags { margin: 0; } /* -------------------------------------------------------------------------- Music -------------------------------------------------------------------------- */ .music-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: end; gap: clamp(32px, 6vw, 80px); } .equalizer { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 240px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 110%, rgba(var(--amber-rgb), 0.22), transparent 60%), var(--bg-raised); } .equalizer span { flex: 1; max-width: 12px; height: calc(var(--h) * 1%); border-radius: 6px 6px 2px 2px; background: var(--accent-gradient); transform-origin: bottom; animation: equalize 1.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.13s); } @keyframes equalize { from { transform: scaleY(0.3); } to { transform: scaleY(1); } } .music-app { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(32px, 6vw, 80px); } .music-app__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } /* -------------------------------------------------------------------------- Error pages -------------------------------------------------------------------------- */ .error-page { min-height: calc(70vh - var(--header-height)); } .error-page__code { display: inline-block; margin: 0 0 12px; font-size: clamp(72px, 12vw, 140px); font-weight: 800; line-height: 1; letter-spacing: -0.05em; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 960px) { .hero { min-height: 0; padding-top: 16px; } .hero__grid, .expertise-grid, .photo-teaser, .contact-layout, .career-split, .subjects-split, .project-body, .music-hero, .music-app { grid-template-columns: 1fr; } .career-split__head, .project-facts { position: static; } .hero__portrait { order: -1; width: min(70%, 360px); margin: 0 auto -24px; } .stats__grid { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(3) { padding-left: 0; border-left: 0; } .stat:nth-child(n + 3) { border-top: 1px solid var(--line); } .cover-grid { grid-template-columns: repeat(2, 1fr); } .site-footer__grid { grid-template-columns: repeat(3, 1fr); } .site-footer__brand { grid-column: 1 / -1; } } /* The menu collapses behind a toggle before its five links would crowd the logo. */ @media (max-width: 1024px) { .nav-toggle { display: block; } .site-nav { position: absolute; top: var(--header-height); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 16px; padding: 12px var(--gutter) 24px; border-bottom: 1px solid var(--line); background: rgba(7, 10, 18, 0.96); } .site-nav[data-open='true'] { display: flex; } .site-nav ul { flex-direction: column; } .site-nav ul a { padding: 12px 14px; font-size: 17px; } .lang-switch { align-self: flex-start; } } @media (max-width: 600px) { body { font-size: 16px; } .cover-grid, .site-footer__grid { grid-template-columns: 1fr; } .stat { padding: 24px 16px; } .mosaic { gap: 10px; padding-bottom: 24px; } .mosaic__item:nth-child(2n) { margin-top: 24px; margin-bottom: -24px; } .lightbox { padding: 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }