/* ================================================================= Steven van der Wel — Portfolio Architecture ---------------------------------------------------------------- - ← global switch (one binary per session) - [data-pair="…"] ← a section's brand pair (dpg, tmobile, rotterdam, site). Tokens are scoped. - State + pair → one set of design tokens (color). - Type is Google Sans Flex universally — body and display alike (JetBrains Mono only for small mono labels). - Each section paints itself with its own --bg/--text. ================================================================= */ /* ─── BASE TOKENS (fallbacks) ─────────────────────────────────── */ :root { --bg: #ffffff; --bg-soft: #f4f4f4; --bg-tile: #f0eeec; --text: #111111; --text-soft: #555555; --text-faint: #aaaaaa; --accent: #111111; --accent-soft: rgba(0,0,0,.08); --rule: #e5e5e5; /* Type — Google Sans Flex for display + body, JetBrains Mono for labels. */ --font-body: "Google Sans Flex", "Inter", system-ui, sans-serif; --font-display: "Google Sans Flex", "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --display-weight: 400; --display-tracking: -0.04em; --display-leading: 0.97; /* was 0.92, +5% breathing room */ } /* ================================================================= PAIR × STATE COLOUR TOKENS ================================================================= */ /* ─── SITE (hero / header / footer / toggle default) ──────────── */ /* State A = Light · State B = Dark */ :root[data-state="a"] [data-pair="site"] { --bg: #ffffff; --bg-soft: #f4f4f4; --bg-tile: #ececec; --text: #0a0a0a; --text-soft: #555555; --text-faint: #7c7c7c; --accent: #0a0a0a; --accent-soft: rgba(0,0,0,.06); --rule: #e8e8e8; } :root[data-state="b"] [data-pair="site"] { --bg: #0a0a0a; --bg-soft: #161616; --bg-tile: #1d1d1d; --text: #f6f6f6; --text-soft: #a8a8a8; --text-faint: #8e8e8e; --accent: #f6f6f6; --accent-soft: rgba(255,255,255,.08); --rule: #2a2a2a; } /* ─── DPG ─── State A = AD · State B = Volkskrant ─────────────── */ :root[data-state="a"] [data-pair="dpg"] { --bg: #FFF5EB; /* AD warm cream */ --bg-soft: #F5E8D8; --bg-tile: #ECDFC9; --text: #121212; --text-soft: #555555; --text-faint: #856e62; --accent: #D10A10; /* AD red */ --accent-soft: rgba(209,10,16,.08); --rule: #EAD9C0; } :root[data-state="b"] [data-pair="dpg"] { --bg: #113A4B; /* Volkskrant deep teal */ --bg-soft: #1A4759; --bg-tile: #234E62; --text: #F0EDE0; /* warm cream */ --text-soft: #B5BFC8; --text-faint: #93a3af; --accent: #0097D8; /* Volkskrant blue */ --accent-soft: rgba(0,151,216,.18); --rule: #1F4A5D; } /* ─── T-MOBILE ─── State A = T-Mobile · State B = Tele2 ───────── */ :root[data-state="a"] [data-pair="tmobile"] { --bg: #FFFFFF; /* T-Mobile pure white */ --bg-soft: #FAF3F7; --bg-tile: #F4E6EE; --text: #1a1a1a; --text-soft: #4a4a4a; --text-faint: #7c7c7c; --accent: #E20074; /* T-Mobile magenta */ --accent-soft: rgba(226,0,116,.08); --rule: #ECD9E3; } :root[data-state="b"] [data-pair="tmobile"] { --bg: #702083; /* Tele2 deep purple */ --bg-soft: #7E2492; --bg-tile: #5A1A6E; --text: #ffffff; --text-soft: #E2D0EA; --text-faint: #B79BC4; --accent: #FFE600; /* Tele2 lemon — kept for case accents */ --accent-soft: rgba(255,230,0,.20); --rule: #8B3199; } /* ─── ROTTERDAM ─── State A = Light · State B = Dark ──────────── */ :root[data-state="a"] [data-pair="rotterdam"] { --bg: #EDFAF5; /* Rotterdam mint light */ --bg-soft: #DCF1E8; --bg-tile: #CCE7DA; --text: #0a1f17; --text-soft: #3d5447; --text-faint: #6a8576; --accent: #00811F; /* Rotterdam municipality green — light */ --accent-soft: rgba(0,129,31,.10); --rule: #C8E2D6; } :root[data-state="b"] [data-pair="rotterdam"] { --bg: #171717; /* Rotterdam dark */ --bg-soft: #1f1f1f; --bg-tile: #2a2a2a; --text: #f6f6f6; --text-soft: #a8a8a8; --text-faint: #8e8e8e; --accent: #7ACCA0; /* Rotterdam municipality green — dark */ --accent-soft: rgba(122,204,160,.14); --rule: #2e2e2e; } /* ================================================================= GLOBAL RESET / BASE ================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; /* Adapts to current state. Sections paint themselves; body fills any gap. */ background: #ffffff; color: var(--text); font-family: var(--font-body); font-size: clamp(16px, 1.05vw, 18px); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .55s ease; } :root[data-state="a"] body { background: #ffffff; } :root[data-state="b"] body { background: #0a0a0a; } img, svg, video { max-width: 100%; display: block; } button { font: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } em { font-style: italic; color: var(--accent); } /* ─── Section base ─────────────────────────────────────────────── */ .section { background: var(--bg); color: var(--text); font-family: var(--font-body); transition: background-color .55s ease, color .55s ease; } .section *, .section *::before, .section *::after { transition: background-color .55s ease, color .55s ease, border-color .55s ease, fill .55s ease, stroke .55s ease; } /* ─── Display headings — universal sizing rules ──────────────── These tokens (--font-display, --display-weight, --display-leading, --display-tracking) come from the STATE block at the top, so all headings stay perfectly aligned in line-height between A ↔ B. ─────────────────────────────────────────────────────────────── */ .hero__headline, .case__title, .footer__headline { font-family: var(--font-display); font-weight: var(--display-weight); font-style: normal; letter-spacing: var(--display-tracking); line-height: var(--display-leading); margin: 0; } /* ─── Layout helpers ───────────────────────────────────────────── */ .site-header, .section { padding-inline: clamp(24px, 5vw, 80px); } /* ================================================================= HEADER ================================================================= */ .site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: clamp(16px, 4vw, 48px); height: 72px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--rule); color: var(--text); transition: background-color .55s ease, color .55s ease, border-color .55s ease; } .wordmark { font-family: var(--font-body); font-weight: 400; letter-spacing: -.02em; font-size: clamp(15px, 2.2vw, 18px); color: var(--text); flex-shrink: 0; white-space: nowrap; } .site-nav { display: flex; gap: clamp(20px, 6vw, 32px); font-size: clamp(12px, 1.4vw, 13px); font-family: var(--font-mono); color: var(--text-soft); margin-inline-start: auto; } .site-nav a { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; } .site-nav a { color: var(--text-soft); transition: color .25s ease; } .site-nav a:hover { color: var(--accent); } .site-nav__num { color: var(--text-faint); transition: color .25s ease; } .site-nav__label { display: none; } @media (min-width: 720px) { .site-nav__label { display: inline; } } /* Active state — current section in the viewport */ .site-nav a.is-active { color: var(--text); } .site-nav a.is-active .site-nav__num { color: var(--text); } .site-nav a.is-active .site-nav__label { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } /* Mobile (< 720px): labels are hidden, so: - Keep Contact's label visible (it has no number) - Apply the active underline to the number instead */ @media (max-width: 719px) { .site-nav a:not(:has(.site-nav__num)) .site-nav__label { display: inline; } .site-nav a.is-active .site-nav__num { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } } /* ================================================================= HERO ================================================================= */ .hero { padding-block: clamp(32px, 5vh, 56px) clamp(80px, 12vh, 140px); } .hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(40px, 8vh, 80px); padding: 6px 14px 6px 12px; border: 1px solid var(--rule); border-radius: 999px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--text-soft); background: var(--bg-soft); } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #19c37d; box-shadow: 0 0 0 4px color-mix(in srgb, #19c37d 25%, transparent); } .hero__headline { font-size: clamp(44px, 9vw, 148px); margin: 0 0 clamp(24px, 4vh, 48px); max-width: 14ch; } .hero__lede { font-family: var(--font-body); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.45; max-width: 38ch; margin: 0 0 clamp(40px, 6vh, 64px); color: var(--text-soft); } .hero__meta { display: flex; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--text-faint); } /* ================================================================= CASE ================================================================= */ .case { padding-block: clamp(56px, 8vh, 80px); } @media (max-width: 719px) { .case { padding-block: 72px; } } .case__header { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(16px, 2vw, 28px); row-gap: 8px; align-items: end; margin-bottom: clamp(48px, 8vh, 88px); } .case__number { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; color: var(--accent); align-self: start; margin-top: 0.6em; } .case__title { font-size: clamp(40px, 7vw, 104px); } .case__tagline { grid-column: 2; font-family: var(--font-body); font-size: clamp(16px, 1.3vw, 20px); color: var(--text-soft); margin: 0; max-width: 50ch; } /* ─── Case body: prose left, meta right ────────────────────────── */ .case__body { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); margin-bottom: clamp(72px, 10vh, 120px); align-items: start; } @media (min-width: 880px) { .case__body { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } } .case__prose { display: flex; flex-direction: column; gap: clamp(28px, 4vh, 44px); max-width: 60ch; } .case__lead { font-family: var(--font-body); font-size: clamp(20px, 1.75vw, 26px); line-height: 1.4; margin: 0; color: var(--text); } .case__chapter { display: flex; flex-direction: column; gap: 14px; } .case__chapter-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 500; color: var(--accent); margin: 0; padding-top: 14px; border-top: 1px solid var(--rule); } .case__chapter p { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; margin: 0; color: var(--text); } .case__chapter p + p { margin-top: 1em; } /* ─── Meta sidebar ─────────────────────────────────────────────── */ .case__meta-wrap { position: sticky; top: calc(72px + 24px); } .case__meta { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: 13px; display: grid; gap: 0; } .case__meta li { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding-block: 14px; border-top: 1px solid var(--rule); color: var(--text-soft); align-items: baseline; } .case__meta li:last-child { border-bottom: 1px solid var(--rule); } .case__meta strong { color: var(--text-faint); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 10px; padding-top: 3px; } /* ================================================================= VISUALS GRID Rules - Wide visuals (landscape) span the full row, never paired. - Default visuals are SQUARE (1:1) and pair side-by-side. - Visuals are non-interactive presentation only. ================================================================= */ .case__visuals { display: grid; /* Mobile: every visual fills the row — no pairing. */ grid-template-columns: 1fr; gap: clamp(12px, 1.5vw, 20px); } @media (min-width: 720px) { .case__visuals { grid-template-columns: repeat(6, 1fr); } .visual { grid-column: span 3; } .visual--wide { grid-column: span 6; } .visual--portrait{ grid-column: span 2; } } .visual { margin: 0; } .visual__placeholder, .visual__media { position: relative; aspect-ratio: 1 / 1; /* square — paired side-by-side */ background: var(--bg-tile); border: 1px solid var(--rule); border-radius: 16px; display: grid; place-items: center; overflow: hidden; transition: background-color .55s ease, border-color .55s ease; } .visual--wide .visual__placeholder, .visual--wide .visual__media { aspect-ratio: 16 / 9; } .visual--portrait .visual__placeholder, .visual--portrait .visual__media { aspect-ratio: 3 / 4; } /* ─── Image-based visuals: two stacked s, cross-fade per state ─── */ .visual__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .55s ease; } :root[data-state="a"] .visual__img--b { opacity: 0; } :root[data-state="b"] .visual__img--a { opacity: 0; } /* ─── Mixed pane: placeholder on one side, real image on the other. Used when only one of the two brands has visuals supplied yet. ─── */ .visual__media > .visual__placeholder { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; transition: opacity .55s ease, background-color .55s ease; } :root[data-state="b"] .visual__media > .visual__placeholder--a { opacity: 0; } :root[data-state="a"] .visual__media > .visual__placeholder--b { opacity: 0; } .visual__placeholder::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(135deg, transparent 49.5%, var(--rule) 49.5%, var(--rule) 50.5%, transparent 50.5%); background-size: 44px 44px; opacity: .35; pointer-events: none; } .visual__placeholder::after { content: ""; position: absolute; inset: auto auto 12px 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); opacity: .9; } .visual__placeholder span { position: relative; z-index: 1; font-family: var(--font-mono); font-weight: 500; font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.02em; color: var(--text); background: var(--bg); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); } /* ================================================================= FOOTER ================================================================= */ .footer { padding-block: clamp(120px, 18vh, 220px) clamp(40px, 6vh, 80px); } .footer__headline { font-size: clamp(44px, 8vw, 128px); margin: 0 0 clamp(48px, 8vh, 96px); max-width: 12ch; } .footer__contact { list-style: none; margin: 0 0 clamp(48px, 8vh, 96px); padding: 0; display: grid; gap: 0; max-width: 720px; } .footer__contact li { display: grid; grid-template-columns: 100px 1fr; gap: clamp(16px, 3vw, 32px); padding-block: 18px; border-top: 1px solid var(--rule); align-items: baseline; } .footer__contact li:last-child { border-bottom: 1px solid var(--rule); } .footer__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } .footer__contact a { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.6vw, 22px); color: var(--text); border-bottom: 1px solid transparent; transition: border-color .25s ease, color .25s ease; } .footer__contact a:hover { color: var(--accent); border-color: var(--accent); } .footer__small { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.04em; margin: 0; } /* ================================================================= FLOATING THEME SWITCH ================================================================= */ .theme-switch { position: fixed; z-index: 80; left: 50%; bottom: clamp(16px, 3vh, 32px); transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding: 5px; min-width: 280px; max-width: calc(100vw - 24px); /* Toggle stays white in both light and dark mode. */ background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 999px; backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 30px -12px rgba(0,0,0,.22), 0 4px 12px -4px rgba(0,0,0,.14); color: #0a0a0a; transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, opacity .25s ease; } @media (min-width: 720px) { .theme-switch { min-width: 320px; } } .theme-switch__option { position: relative; z-index: 2; border: 0; background: transparent; padding: 12px 16px; font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: -0.005em; color: #0a0a0a; /* inactive label always black */ border-radius: 999px; text-align: center; transition: color .25s ease; } .theme-switch__option[aria-pressed="true"] { color: #ffffff; /* active label always white */ } .theme-switch__option:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .theme-switch__label { display: inline-block; transition: opacity .18s ease; } .theme-switch__indicator { position: absolute; z-index: 1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--accent); /* active pill = current brand colour */ border-radius: 999px; transition: transform .35s cubic-bezier(.5,0,.25,1), background-color .55s ease; } /* Toggle order is now: [b] [a] — so state "a" lives on the right. */ :root[data-state="a"] .theme-switch__indicator { transform: translateX(100%); } /* Site context (hero/header/footer) in Dark state → the site has no "brand colour", so the active pill paints itself black instead of the default light --accent. Brand sections keep their brand colour as the active pill. */ :root[data-state="b"] .theme-switch[data-pair="site"] .theme-switch__indicator { background: #0a0a0a; } /* Tele2 in Dark state → active pill takes the deep purple brand bg so the toggle reads as part of the Tele2 identity, not the lemon accent that's reserved for case-level emphasis. */ :root[data-state="b"] .theme-switch[data-pair="tmobile"] .theme-switch__indicator { background: #702083; } /* Rotterdam in Dark state → the light-green active pill (#7ACCA0) needs dark text on top for legible contrast; the default white active label would wash out. */ :root[data-state="b"] .theme-switch[data-pair="rotterdam"] .theme-switch__option[aria-pressed="true"] { color: #0a0a0a; } /* ─── Reduced motion ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }