/* ============================================================
SHARED · Portfolio Iryna Nechytailo
Tokens · reset · layout · curtain scroll · topbar base
reveal animation · tweaks panel · keyframes
============================================================ */
/* ── GOOGLE FONTS ─────────────────────────────────────────────
Loaded via in each page's .
Public Sans (300–700) · JetBrains Mono (400–500) · Fraunces (300–400)
──────────────────────────────────────────────────────────── */
/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
/* Palette — warm default */
--bg: #F2EDE4;
--bg-2: #ECE6DA;
--bg-card: #ffffff;
--ink: #15110C;
--muted: #706860;
--rule: rgba(21, 17, 12, 0.12);
--rule-soft: rgba(21, 17, 12, 0.06);
--hot: #C0612F;
--black: #0A0908;
/* Case accent — overridden per project page via data-case attribute */
--case-accent: #0E6B5A;
--case-accent-deep: #094B3E;
--case-accent-light: rgba(14, 107, 90, 0.18);
/* Typography */
--f-ui: 'Public Sans', system-ui, sans-serif;
--f-display: 'Public Sans', system-ui, sans-serif;
--f-mono: 'JetBrains Mono', ui-monospace, monospace;
/* Layout */
--width: 1280px;
--pad-x: 40px;
--pad-x-mobile: 24px;
/* Motion */
--anim: 1;
--d-fast: calc(0.32s * var(--anim));
--d-med: calc(0.60s * var(--anim));
--d-slow: calc(1.00s * var(--anim));
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-curtain: cubic-bezier(0.65, 0, 0.05, 1);
}
/* ── PALETTE THEMES ─────────────────────────────────────────── */
:root[data-palette="warm"] {
--bg: #F2EDE4; --bg-2: #ECE6DA; --ink: #15110C; --muted: #706860;
--rule: rgba(21, 17, 12, 0.12); --rule-soft: rgba(21, 17, 12, 0.06);
}
:root[data-palette="paper"] {
--bg: #F6F3EC; --bg-2: #EFEAE0; --ink: #1A1814; --muted: #6A6358;
--rule: rgba(26, 24, 20, 0.12); --rule-soft: rgba(26, 24, 20, 0.06);
}
:root[data-palette="cool"] {
--bg: #ECEDEE; --bg-2: #E2E4E7; --ink: #0E1116; --muted: #5C6470;
--rule: rgba(14, 17, 22, 0.12); --rule-soft: rgba(14, 17, 22, 0.06);
}
:root[data-palette="ink"] {
--bg: #F1ECE3; --bg-2: #E9E2D4; --ink: #11151B; --muted: #686870;
--rule: rgba(17, 21, 27, 0.14); --rule-soft: rgba(17, 21, 27, 0.06);
}
/* ── TYPE THEMES ────────────────────────────────────────────── */
:root[data-type="grotesk"] { --f-display: 'Public Sans', system-ui, sans-serif; }
:root[data-type="serif-display"] { --f-display: 'Fraunces', 'Public Sans', serif; }
:root[data-type="mono-meta"] { --f-display: 'Public Sans', system-ui, sans-serif; }
/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html,
body {
background: var(--black);
color: var(--ink);
font-family: var(--f-ui);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body { font-feature-settings: "ss01", "ss02"; overflow-x: hidden; }
::selection { background: var(--ink); color: var(--bg); }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
/* ── MONO LABEL BASE ─────────────────────────────────────────
All small monospace uppercase labels across both pages.
Only `color` is overridden per element.
─────────────────────────────────────────────────────────── */
.eyebrow,
.project__thumb-cover,
.project__eyebrow,
.exp-case__aside-label,
.exp-case__media .media-caption,
.exp-case__meta,
.approach__item-label,
.scroll-hint__label,
.case-hero__eyebrow,
.gallery__shot-cap,
.gallery__controls,
.about__dt,
.about__block-label,
.sec__eyebrow,
.decision__aside-label,
.decision__card-head-label,
.impact-card__label,
.case-next__label {
font-family: var(--f-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ── LAYOUT PRIMITIVE ───────────────────────────────────────── */
.wrap {
width: min(var(--width), 100% - var(--pad-x) * 2);
margin: 0 auto;
}
@media (max-width: 700px) {
.wrap {
width: min(var(--width), 100% - var(--pad-x-mobile) * 2);
}
/* Disable scroll-reveal on mobile — show content immediately */
[data-reveal] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
section { position: relative; }
/* ── SCROLL CURTAIN ─────────────────────────────────────────── */
/*
Cream layer (.curtain) scrolls up, revealing the fixed
dark section underneath — via margin-bottom: 100vh.
Two stacked levels:
curtain z-index 3 — always on top of both beneath layers
.beneath--experience z-index 2 — mid-page dark section
.beneath z-index 1 — footer, lowest layer
*/
.curtain {
position: relative;
z-index: 3;
background: var(--bg);
margin-bottom: 100vh;
margin-bottom: 100dvh;
transition: background var(--d-fast) var(--ease);
}
/* ── MID-PAGE DARK BENEATH (experience section) ─────────── */
.beneath--experience {
position: fixed;
inset: auto 0 0 0;
height: 100vh;
height: 100dvh;
z-index: 1;
background: var(--black);
overflow: hidden;
}
.beneath {
position: fixed;
inset: auto 0 0 0;
height: 100vh;
z-index: 1;
background: var(--black);
color: #BFBAB0;
overflow: hidden;
}
.beneath::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(1100px 600px at 18% 70%, rgba(184, 90, 46, 0.10), transparent 60%),
radial-gradient(900px 500px at 82% 30%, rgba(255, 255, 255, 0.04), transparent 60%);
pointer-events: none;
}
.beneath__inner {
position: relative;
height: 100%;
width: min(var(--width), 100% - var(--pad-x) * 2);
margin: 0 auto;
display: grid;
grid-template-rows: 1fr auto;
padding: 80px 0 56px;
}
.beneath__heading {
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(40px, 4.6vw, 64px);
letter-spacing: -0.025em;
line-height: 1.05;
color: #F5EFE2;
max-width: 18ch;
align-self: end;
}
:root[data-type="serif-display"] .beneath__heading { font-family: var(--f-display); }
.beneath__heading em { font-style: normal; color: #C8B8A0; }
.beneath__foot {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 56px;
color: rgba(245, 239, 226, 0.55);
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: 0.08em;
}
.beneath__links { display: flex; gap: 28px; }
.beneath__links a { color: rgba(245, 239, 226, 0.55); transition: color var(--d-fast) var(--ease); }
.beneath__links a:hover { color: #F5EFE2; }
/* ── TOPBAR (base) ──────────────────────────────────────────── */
.topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
background: color-mix(in srgb, var(--bg) 75%, transparent);
border-bottom: 1px solid transparent;
transition:
border-color var(--d-fast) var(--ease),
background var(--d-fast) var(--ease);
}
.topbar--scrolled { border-bottom-color: var(--rule-soft); }
/* Dark variant — active when topbar overlaps a dark section */
.topbar--dark {
background: color-mix(in srgb, var(--black) 85%, transparent);
}
.topbar--dark.topbar--scrolled { border-bottom-color: rgba(245, 239, 226, 0.10); }
.topbar--dark .brand { color: #F5EFE2; }
.topbar--dark .topbar__back { color: #F5EFE2; }
.topbar--dark .topbar__anchors { color: #BFBAB0; }
.topbar--dark .topbar__anchors a:hover { color: #F5EFE2; }
.topbar--dark .topbar__anchors a.is-active {
color: #F5EFE2;
background: rgba(245, 239, 226, 0.10);
}
.topbar__inner {
width: min(var(--width), 100% - var(--pad-x) * 2);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
font-size: 14px;
}
@media (max-width: 700px) {
.topbar__inner {
width: min(var(--width), 100% - var(--pad-x-mobile) * 2);
gap: 10px;
}
/* Brand / back link: shrink and truncate with ellipsis */
/* padding-top/bottom matches link padding so topbar height stays fixed when dropdown opens */
.brand, .topbar__back {
min-width: 0;
flex-shrink: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 6px 0;
}
/* Nav stays at natural size — never shrinks */
.topbar__anchors { flex-shrink: 0; }
}
/* ── TOPBAR: ANCHOR PILL NAV ────────────────────────────────── */
/* Shared by both home and case pages */
.topbar__anchors {
display: flex;
gap: 2px;
color: var(--muted);
overflow-x: auto;
scrollbar-width: none;
}
.topbar__anchors::-webkit-scrollbar { display: none; }
.topbar__anchors a {
padding: 6px 14px;
border-radius: 999px;
white-space: nowrap;
transition:
color var(--d-fast) var(--ease),
background var(--d-fast) var(--ease);
}
.topbar__anchors a:hover { color: var(--ink); }
.topbar__anchors a.is-active { color: var(--ink); background: var(--bg-2); }
/* ── MEDIA SLOT ─────────────────────────────────────────────── */
/*
Universal container for image / gif / video.
Replace .media-slot__placeholder with actual ![]()
or