/** * Faina Muzyka portfolio — stylesheet. * * Plain CSS, no preprocessor or build step. Structure, top to bottom: * Reset & tokens — CSS custom properties for colour/type reused * throughout (--black, --mono, --display, etc.) * Fixed video canvas — #stage (js/main.js draws into it), plus the * grain/vignette overlays layered on top * Header — fixed compact header: brand, primary nav, * language toggle, scroll-progress bar * Layout — .section flex scaffolding shared by every * page section * About, Projects, — content-specific rules, in the same top-to- * CV, Contact bottom order they appear in index.html * Reveal-on-scroll — the .reveal / .is-visible fade-in pair * Responsive — one mobile breakpoint at 720px * Reduced motion — @media (prefers-reduced-motion: reduce) */ /* ===== Reset & tokens ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --black: #000000; --off-white: #f2f0ea; --white: #ffffff; --line: rgba(242, 240, 234, 0.16); --line-strong: rgba(242, 240, 234, 0.32); /* Global type swap to Cabinet Grotesk (see index.html ). The two custom-property names are historical — .osd-bio is the one deliberate holdout, hardcoded directly to the old JetBrains Mono / VT323 cassette stack so it's unaffected by changes here. */ --mono: 'CabinetGrotesk', 'Archivo', 'Helvetica Neue', Arial, sans-serif; --display: 'CabinetGrotesk', 'Archivo', 'Helvetica Neue', Arial, sans-serif; --header-h: 5rem; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } html, body { background: var(--black); color: var(--off-white); font-family: var(--mono); /* `clip`, not `hidden` — either clips horizontal overflow without also forcing overflow-y's computed value to `auto`, which is what `hidden` does per spec whenever the other axis isn't `visible`. That forced `auto` turns html/body into a scroll container in their own right, which breaks every `position: sticky` descendant (the archive preview panes) since their nearest scrolling ancestor is no longer the real viewport. */ overflow-x: clip; scrollbar-width: thin; scrollbar-color: rgba(242,240,234,0.3) transparent; } /* Burnt-in optical title look: a tight dark fringe instead of any panel/box, so type stays legible over the raw video at any brightness. Inherits to every text node by default (text-shadow is an inherited property). */ body { text-shadow: 0 0 2px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.9); } ::selection { background: var(--off-white); color: var(--black); } /* ===== Fixed video canvas ===== */ #stage { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; background: var(--black); filter: grayscale(0.08) contrast(1.08) brightness(0.92); /* Fully opaque through the top third or so, then a slow, gradual ease all the way down to true transparent (not just a very dark residue) by 80% of the viewport's height. The panel's own source frames carry a real seam of their own — most visible where two adjacent frames crossfade during scroll, since each one's lit "window" sits at a slightly different spot — and that seam always falls well below the panel's entrance point, never right at the very top. Fading the canvas out to nothing before reaching that depth means there's nothing left on screen for the seam to show up on, without having to chase its exact position. */ -webkit-mask-image: linear-gradient( to bottom, black 0%, black 32%, rgba(0, 0, 0, 0.85) 45%, rgba(0, 0, 0, 0.55) 58%, rgba(0, 0, 0, 0.25) 70%, transparent 80% ); mask-image: linear-gradient( to bottom, black 0%, black 32%, rgba(0, 0, 0, 0.85) 45%, rgba(0, 0, 0, 0.55) 58%, rgba(0, 0, 0, 0.25) 70%, transparent 80% ); /* This mask isn't trying to track the panel's own moving edge — a mask tied to the viewport's position can't chase content that sweeps to a different screen position at every scroll depth. drawContain (in js/main.js) separately fades the panel's own opacity in over a short stretch of scroll progress right as it enters. */ } /* Analog grain overlay */ .grain { position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 1; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain-shift 1.1s steps(4) infinite; } @keyframes grain-shift { 0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1%); } 50% { transform: translate(1%, -2%); } 75% { transform: translate(-1%, -1%); } 100% { transform: translate(0, 0); } } /* Vignette blending canvas edges into black */ .vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.85) 100%), linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,0.75) 100%); } /* Laboratory Archive concept: a deep, flat scrim over the whole canvas (on top of the grain/vignette, which stay untouched) so the site reads darker and more restrained throughout — the canvas draw logic in js/main.js is never touched, this is a pure compositing layer. */ .scrim { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: rgba(0, 0, 0, 0.28); } /* ===== Header ===== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 5; /* Solid backing behind the nav, not just the border below it — without it the header is fully transparent, so anything scrolling underneath (the hero's own OSD bio list, in particular) shows straight through and visually collides with the nav text: both sets of glyphs and their shadows blend into a muddy dark smear as the OSD list's lines pass behind the brand/menu. A partial-opacity tint still let enough of that text bleed through to read as a faint ghost, so this needs to be fully opaque, not just darkened. */ background: var(--black); border-bottom: 1px solid var(--line); } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.9rem 1.75rem; min-height: var(--header-h); } .brand { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.2; } .brand-name, .brand-role { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242,240,234,0.6); } .site-menu { display: flex; align-items: center; gap: 1.6rem; font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; } .site-menu a { color: rgba(242,240,234,0.6); text-decoration: none; transition: color 0.2s ease; /* "À propos" (the FR label for About) has a space in it and was wrapping onto two lines whenever the nav ran short on room — nowrap keeps every label on one line, same as .archive-year elsewhere on the site for the same reason. */ white-space: nowrap; } /* A thin "/" between every link but the first, same dimmed tone as the "|" between EN/FR — without it the nav read as one run-on line of words, only the .site-menu gap (not visible on its own) telling them apart. */ .site-menu a:not(:first-child) { position: relative; } .site-menu a:not(:first-child)::before { content: "/"; position: absolute; right: 100%; margin-right: 0.65rem; color: rgba(242,240,234,0.3); } .site-menu a:hover { color: var(--off-white); } .lang-toggle { display: flex; align-items: center; gap: 0.4rem; border: 1px solid var(--line-strong); padding: 0.3rem 0.55rem; flex-shrink: 0; } .lang-btn { background: none; border: none; color: rgba(242,240,234,0.5); font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.1em; padding: 0.1rem 0.15rem; cursor: pointer; transition: color 0.2s ease; } .lang-btn:hover { color: rgba(242,240,234,0.85); } .lang-btn.active { color: var(--white); font-weight: 700; } .lang-sep { color: rgba(242,240,234,0.3); font-size: 0.85rem; } .nav-progress { display: block; width: 100%; height: 2px; background: var(--line); position: relative; overflow: hidden; } .nav-progress span { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--off-white); } /* ===== Layout ===== */ main { position: relative; z-index: 3; } /* ===== Hero ===== */ /* Full-bleed opener: a real, independently-looping