/* ========================================================================== NELLIE MAKONDI — PORTFOLIO STYLESHEET -------------------------------------------------------------------------- You rarely need to touch this file. If you want to change the look: • COLOURS → edit the values in the ":root" block just below. • FONTS → the two fonts are loaded in index.html () and named in --font-display and --font-body below. Everything else is layout and should work on its own. ========================================================================== */ :root { /* ---- Palette (EDIT colours here) ---- */ --ivory: #F4F0E9; /* page background — warm ivory */ --paper: #FAF8F4; /* case-study pages & raised surfaces */ --ink: #121110; /* headlines and primary text */ --graphite: #3E3A36; /* body text */ --muted: #6E665E; /* captions, secondary text */ --taupe: #8C7B6B; /* quiet accent: labels, numbers, rules */ --sand: #DDD3C5; /* hairlines and placeholder panels */ --sand-soft: #E9E2D7; /* image backgrounds while loading */ --noir: #161514; /* closing contact section */ /* ---- Type ---- */ --font-display: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif; --font-body: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif; /* ---- Rhythm ---- */ --gutter: clamp(20px, 4.5vw, 72px); /* page side margin */ --col-gap: clamp(16px, 2vw, 32px); --section: clamp(88px, 12vw, 180px); /* space between sections */ --max: 1440px; --ease: cubic-bezier(.2, .7, .2, 1); color-scheme: light; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ivory); color: var(--graphite); font-family: var(--font-body); font-weight: 400; font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.is-locked { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink); text-wrap: balance; } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; list-style: none; } dl, dd { margin: 0; } ::selection { background: var(--ink); color: var(--ivory); } :focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--ivory); padding: 10px 16px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; } .skip-link:focus { top: 16px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Shared type ---------- */ .label { font-family: var(--font-body); font-size: .72rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); } .display { font-family: var(--font-display); color: var(--ink); line-height: 1.02; letter-spacing: -.01em; } .italic { font-style: italic; } .lede { font-size: clamp(1.125rem, 1.4vw, 1.3rem); line-height: 1.6; color: var(--graphite); max-width: 36em; } .prose p + p { margin-top: 1.1em; } .prose { max-width: 38em; } /* Placeholders you still need to fill in, e.g. [ADD VERIFIED RESULT] */ .tbc { font-style: italic; color: var(--taupe); border-bottom: 1px dotted var(--taupe); font-family: var(--font-body); font-size: .92em; letter-spacing: .02em; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section) 0; scroll-margin-top: 72px; } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .rule { border: 0; border-top: 1px solid var(--sand); margin: 0; } .section-head { display: grid; gap: 28px; align-items: end; margin-bottom: clamp(48px, 7vw, 96px); } .section-head .display { font-size: clamp(2.6rem, 6vw, 5.4rem); } @media (min-width: 900px) { .section-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .section-head > :first-child { grid-column: 1 / 8; } .section-head > :last-child { grid-column: 8 / 13; } } .section-head .label { display: block; margin-bottom: 22px; } /* ---------- Buttons & links ---------- */ .btn { display: inline-flex; align-items: center; gap: .9em; padding: 1.05em 1.9em; border: 1px solid var(--ink); font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; transition: background-color .5s var(--ease), color .5s var(--ease); } .btn--solid { background: var(--ink); color: var(--ivory); } .btn--solid:hover { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--ivory); } .link-line { position: relative; display: inline-flex; align-items: center; gap: .7em; font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); padding-block: .5em; } .link-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1em; height: 1px; background: currentColor; transform-origin: right; transform: scaleX(1); transition: transform .6s var(--ease); } .link-line:hover::after { transform: scaleX(0); } .arrow { display: inline-block; transition: transform .5s var(--ease); font-family: var(--font-body); letter-spacing: 0; } a:hover .arrow, button:hover .arrow { transform: translateX(5px); } /* ========================================================================== NAVIGATION ========================================================================== */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); border-bottom: 1px solid transparent; } .nav.is-scrolled { background: rgba(244, 240, 233, .92); border-bottom-color: var(--sand); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .nav__brand { font-size: .78rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--ink); } .nav__links { display: flex; gap: clamp(20px, 3vw, 44px); } .nav__links a { position: relative; font-size: .72rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); padding-block: 6px; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); } .nav__toggle { display: none; font-size: .72rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); padding: 10px 0; } @media (max-width: 860px) { .nav__toggle { display: inline-block; } .nav__inner > nav { position: absolute; } .nav__links { position: fixed; inset: 72px 0 auto 0; flex-direction: column; gap: 0; background: var(--ivory); border-bottom: 1px solid var(--sand); padding: 8px var(--gutter) 28px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s; } .nav.is-open { background: var(--ivory); border-bottom-color: var(--sand); } .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; } .nav__links a { display: block; font-family: var(--font-display); font-size: 1.9rem; letter-spacing: 0; text-transform: none; padding-block: 12px; border-bottom: 1px solid var(--sand); } .nav__links a::after { display: none; } } /* ========================================================================== HERO ========================================================================== */ .hero { padding-top: clamp(112px, 13vw, 168px); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; } .hero__eyebrow { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: clamp(28px, 4vw, 48px); } .hero__name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(3.4rem, 10.4vw, 10.6rem); line-height: .86; letter-spacing: -.02em; color: var(--ink); font-variation-settings: "opsz" 96; } .hero__name span { display: block; } .hero__role { margin-top: clamp(22px, 2.6vw, 34px); font-family: var(--font-display); font-style: italic; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.1; color: var(--ink); } .hero__sectors { margin-top: 14px; font-size: .76rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); } .hero__sectors span { white-space: nowrap; } .hero__sectors i { font-style: normal; color: var(--sand); margin-inline: .15em; } .hero__statement { margin-top: clamp(28px, 3vw, 40px); max-width: 30em; font-size: clamp(1.06rem, 1.3vw, 1.2rem); line-height: 1.65; color: var(--graphite); } .hero__ctas { margin-top: clamp(32px, 3.5vw, 48px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; } .hero__portrait { position: relative; margin: 0; } .hero__portrait .frame { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand-soft); } .hero__portrait img { width: 100%; height: calc(100% + 60px); object-fit: cover; object-position: 30% 20%; will-change: translate; } .hero__portrait figcaption { margin-top: 14px; display: flex; justify-content: space-between; gap: 16px; } @media (min-width: 1000px) { .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; } .hero__intro { grid-column: 1 / 8; grid-row: 1; position: relative; z-index: 2; } .hero__portrait { grid-column: 8 / 13; grid-row: 1; margin-top: clamp(40px, 5vw, 76px); } /* The surname deliberately runs into the portrait frame — a magazine-cover move. */ .hero__name span:last-child { margin-right: -12vw; white-space: nowrap; } } /* Brand roster */ .roster { margin-top: clamp(72px, 9vw, 128px); border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand); padding-block: 26px; display: grid; gap: 14px; } .roster__list { display: flex; flex-wrap: wrap; column-gap: 0; row-gap: 6px; font-family: var(--font-display); font-size: clamp(1.02rem, 1.35vw, 1.28rem); color: var(--ink); } .roster__list li:not(:last-child)::after { content: "·"; color: var(--taupe); margin-inline: .7em; } @media (min-width: 900px) { .roster { grid-template-columns: 180px 1fr; align-items: baseline; } } /* Snapshot */ .snapshot { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px var(--col-gap); margin-top: clamp(48px, 6vw, 80px); } .snapshot__item { border-top: 1px solid var(--ink); padding-top: 20px; } .snapshot__big { font-family: var(--font-display); font-size: clamp(1.9rem, 2.7vw, 2.5rem); line-height: 1.05; color: var(--ink); } .snapshot__small { margin-top: 10px; font-size: .95rem; color: var(--muted); max-width: 22em; } /* ========================================================================== ABOUT ========================================================================== */ .about__grid { display: grid; gap: 48px; } .about__quote { font-family: var(--font-display); font-size: clamp(2rem, 3.8vw, 3.5rem); line-height: 1.1; color: var(--ink); letter-spacing: -.01em; } .about__quote em { font-style: italic; } .facts { margin-top: 44px; border-top: 1px solid var(--sand); } .facts > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--sand); } .facts dt { font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); padding-top: .25em; } .facts dd { color: var(--ink); font-size: 1rem; } @media (min-width: 900px) { .about__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .about__lead { grid-column: 1 / 7; } .about__body { grid-column: 8 / 13; } } @media (max-width: 480px) { .facts > div { grid-template-columns: 1fr; gap: 4px; } } /* ========================================================================== SELECTED WORK — case rows on the homepage ========================================================================== */ .cases { display: grid; } .case-row { display: grid; gap: 32px; padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--sand); scroll-margin-top: 72px; } .case-row:last-child { border-bottom: 1px solid var(--sand); } .case-row__media { display: block; position: relative; overflow: hidden; background: var(--sand-soft); cursor: pointer; } .case-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter 1.4s var(--ease); } .case-row__media:hover img { transform: scale(1.035); } .case-row--portrait .case-row__media { aspect-ratio: 4 / 5; } .case-row--landscape .case-row__media { aspect-ratio: 3 / 2; } .case-row__media .media-tag { position: absolute; left: 16px; bottom: 16px; background: var(--ivory); color: var(--ink); padding: 8px 12px; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .case-row__media:hover .media-tag, .case-row__media:focus-visible .media-tag { opacity: 1; transform: none; } /* Triptych used for Campaigns row */ .case-row__media.triptych { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; background: transparent; aspect-ratio: 3 / 2; } .triptych > span { overflow: hidden; background: var(--sand-soft); } .triptych img { height: 100%; } .case-row__num { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--taupe); } .case-row__title { margin-top: 10px; font-family: var(--font-display); font-size: clamp(2.2rem, 4.2vw, 3.8rem); line-height: 1.02; letter-spacing: -.01em; } .case-row__kicker { margin-top: 14px; } .case-row__summary { margin-top: 24px; max-width: 32em; font-size: 1.08rem; } .case-row__meta { margin-top: 28px; border-top: 1px solid var(--sand); } .case-row__meta > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 14px; padding-block: 11px; border-bottom: 1px solid var(--sand); font-size: .95rem; } .case-row__meta dt { font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); padding-top: .3em; } .case-row__meta dd { color: var(--ink); } .case-row__cta { margin-top: 30px; } @media (min-width: 900px) { .case-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; } .case-row--portrait .case-row__media { grid-column: 1 / 6; } .case-row--portrait .case-row__body { grid-column: 7 / 13; } .case-row--landscape .case-row__media { grid-column: 1 / 8; } .case-row--landscape .case-row__body { grid-column: 9 / 13; } /* every second row flips: image on the right */ .case-row.is-flipped .case-row__media { grid-row: 1; } .case-row--portrait.is-flipped .case-row__media { grid-column: 8 / 13; } .case-row--portrait.is-flipped .case-row__body { grid-column: 1 / 7; grid-row: 1; } .case-row--landscape.is-flipped .case-row__media { grid-column: 6 / 13; } .case-row--landscape.is-flipped .case-row__body { grid-column: 1 / 5; grid-row: 1; } } @media (max-width: 480px) { .case-row__meta > div { grid-template-columns: 1fr; gap: 2px; } } /* ========================================================================== CASE STUDY — full-screen reading view (the ) ========================================================================== */ dialog { padding: 0; border: 0; color: inherit; } .case { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: var(--paper); color: var(--graphite); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(28px); transition: opacity .55s var(--ease), transform .55s var(--ease); } .case.is-open { opacity: 1; transform: none; } .case::backdrop { background: rgba(22, 21, 20, .35); } .case__bar { position: sticky; top: 0; z-index: 5; background: rgba(250, 248, 244, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--sand); } .case__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; } .case__bar-title { font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .case__bar-title em { font-family: var(--font-display); font-style: italic; letter-spacing: 0; text-transform: none; font-size: 1.1rem; color: var(--taupe); margin-right: .6em; font-weight: 400; } .case__close { font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); display: inline-flex; gap: .8em; align-items: center; padding: 10px 0; } .case__close span[aria-hidden] { font-size: 1.1rem; letter-spacing: 0; } .case__head { padding-block: clamp(48px, 7vw, 104px) clamp(40px, 5vw, 64px); display: grid; gap: 24px; } .case__title { font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 6.4rem); line-height: .98; letter-spacing: -.015em; } .case__hero { margin: 0; background: var(--sand-soft); overflow: hidden; } .case__hero img { width: 100%; max-height: 78vh; object-fit: cover; } .case__body { display: grid; gap: 48px; padding-block: clamp(56px, 7vw, 112px); } .case__aside dl { border-top: 1px solid var(--ink); } .case__aside dl > div { padding-block: 14px; border-bottom: 1px solid var(--sand); } .case__aside dt { font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); } .case__aside dd { margin-top: 4px; color: var(--ink); font-size: .98rem; line-height: 1.5; } @media (min-width: 1000px) { .case__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; } .case__aside { grid-column: 1 / 4; position: sticky; top: 96px; } .case__main { grid-column: 5 / 13; } } .case-sec { display: grid; gap: 18px; padding-block: 0 clamp(48px, 5vw, 72px); } .case-sec + .case-sec { padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--sand); } .case-sec h3 { font-family: var(--font-body); font-size: .74rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); } .case-sec h4 { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.2; color: var(--ink); } .case-sec .prose { font-size: 1.08rem; } /* Strategy pillars */ .pillars { display: grid; gap: 28px; } @media (min-width: 700px) { .pillars { grid-template-columns: 1fr 1fr; gap: 36px 40px; } } .pillars p { margin-top: 8px; font-size: 1rem; } /* Execution list */ .exec { border-top: 1px solid var(--sand); } .exec li { display: grid; gap: 4px 24px; padding-block: 14px; border-bottom: 1px solid var(--sand); font-size: 1rem; } .exec strong { font-weight: 500; color: var(--ink); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; padding-top: .2em; } @media (min-width: 700px) { .exec li { grid-template-columns: 13em 1fr; } } /* Journey / lifecycle steps (a true sequence, so numbered) */ .steps { display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--ink); } .steps li { counter-increment: step; display: grid; grid-template-columns: 3.2em 1fr; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--sand); } .steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-style: italic; color: var(--taupe); font-size: 1.2rem; line-height: 1.3; } .steps b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--ink); line-height: 1.25; } .steps span { display: block; margin-top: 4px; font-size: .98rem; } @media (min-width: 900px) { .steps--row { grid-template-columns: repeat(4, 1fr); border-top: 0; column-gap: 20px; } .steps--row li { grid-template-columns: 1fr; border-bottom: 0; border-top: 1px solid var(--ink); gap: 10px; } } /* Playbook table */ .table-scroll { overflow-x: auto; } .playbook { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; } .playbook th { text-align: left; font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); padding: 0 16px 12px 0; border-bottom: 1px solid var(--ink); } .playbook td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--sand); vertical-align: top; } .playbook td:first-child { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); white-space: nowrap; } /* KPI slots */ .kpis { display: grid; grid-template-columns: 1fr; gap: 0 28px; } @media (min-width: 640px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpis:has(> .kpi:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kpi { border-top: 1px solid var(--ink); padding-block: 18px 24px; } .kpi dt { font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); } .kpi dd { margin-top: 10px; font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; color: var(--ink); } .kpi dd .tbc { font-size: .95rem; } .kpi .kpi__note { display: block; margin-top: 8px; font-family: var(--font-body); font-size: .9rem; color: var(--muted); line-height: 1.5; } /* Visuals gallery inside a case */ .gallery { columns: 3 200px; column-gap: 16px; } .gallery figure { break-inside: avoid; margin: 0 0 16px; cursor: zoom-in; } .gallery img { width: 100%; background: var(--sand-soft); transition: opacity .4s var(--ease); } .gallery figure:hover img { opacity: .88; } .gallery figcaption { margin-top: 8px; font-size: .82rem; color: var(--muted); line-height: 1.45; } .case__next { border-top: 1px solid var(--sand); padding-block: clamp(48px, 6vw, 88px) clamp(64px, 8vw, 120px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; } .case__next-link { text-align: left; } .case__next-link .display { display: block; margin-top: 10px; font-size: clamp(2rem, 4.5vw, 3.8rem); } .case__next-link:hover .display { font-style: italic; } /* ---------- Campaign gallery (Case 05) ---------- */ .campaigns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 40px 20px; } .campaign { text-align: left; display: block; width: 100%; align-self: start; } .campaign__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand-soft); } .campaign__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .campaign:hover .campaign__img img { transform: scale(1.04); } .campaign__type { display: block; margin-top: 14px; } .campaign__title { display: block; margin-top: 6px; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; color: var(--ink); } .campaign__more { display: inline-block; margin-top: 10px; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; } .campaign-details { display: none; } /* ---------- Lightbox ---------- */ .lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: rgba(22, 21, 20, .96); color: var(--ivory); opacity: 0; transition: opacity .4s var(--ease); } .lightbox.is-open { opacity: 1; } .lightbox::backdrop { background: transparent; } .lightbox__inner { height: 100%; display: grid; grid-template-rows: auto 1fr; } .lightbox__bar { display: flex; justify-content: flex-end; padding: 16px var(--gutter); } .lightbox__close { color: var(--ivory); font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; padding: 10px 0; } .lightbox__stage { display: grid; align-content: start; gap: 28px; padding: 0 var(--gutter) 40px; min-height: 0; overflow-y: auto; } .lightbox__stage figure { margin: 0; display: grid; place-items: center; } .lightbox__stage img { max-height: 70dvh; width: auto; object-fit: contain; } .lightbox__text { max-width: 30em; align-self: center; } .lightbox__text .label { color: #B9AA9A; } .lightbox__text h3 { color: var(--ivory); font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.08; margin-top: 12px; } .lightbox__text .lb-desc { margin-top: 18px; color: #D9D1C6; font-size: 1rem; } .lightbox__text .lb-desc p + p { margin-top: .9em; } .lightbox__text .lb-desc strong { color: var(--ivory); font-weight: 500; } .lightbox__text .tbc { color: #C9B8A6; border-color: #C9B8A6; } @media (min-width: 900px) { .lightbox__stage { align-content: center; } .lightbox__stage img { max-height: 80dvh; } .lightbox__stage.has-text { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; } } /* ---------- Missing-image placeholders (only shown in edit mode) ---------- */ .is-missing { display: none !important; } body.edit-mode .is-missing { display: grid !important; place-items: center; min-height: 220px; background: var(--sand-soft); border: 1px dashed var(--taupe); color: var(--taupe); text-align: center; padding: 24px; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; } body.edit-mode .is-missing img { display: none; } body.edit-mode .is-missing::before { content: "Add image: " attr(data-missing); } body.edit-mode .is-missing figcaption { display: none; } .edit-banner { display: none; } body.edit-mode .edit-banner { display: block; position: fixed; left: 16px; bottom: 16px; z-index: 200; max-width: 340px; background: var(--ink); color: var(--ivory); padding: 14px 16px; font-size: .8rem; line-height: 1.5; } /* ========================================================================== EXPERTISE ========================================================================== */ .expertise { display: grid; gap: 44px var(--col-gap); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .expertise__group h3 { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15; padding-bottom: 16px; border-bottom: 1px solid var(--ink); } .expertise__group li { padding-block: 10px; border-bottom: 1px solid var(--sand); font-size: 1rem; color: var(--graphite); } .toolkit { margin-top: clamp(56px, 6vw, 88px); display: grid; gap: 14px; border-top: 1px solid var(--sand); padding-top: 26px; } .toolkit p { color: var(--muted); font-size: .98rem; } @media (min-width: 900px) { .toolkit { grid-template-columns: 180px 1fr; } } /* ========================================================================== EXPERIENCE ========================================================================== */ .timeline { border-top: 1px solid var(--ink); } .job { display: grid; gap: 14px; padding-block: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--sand); } .job__dates { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--taupe); font-variant-numeric: lining-nums tabular-nums; } .job__company { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.12; color: var(--ink); } .job__role { margin-top: 6px; font-size: .95rem; color: var(--ink); } .job__role span { color: var(--muted); } .job__desc { max-width: 34em; } .job__wins { margin-top: 14px; } .job__wins li { position: relative; padding-left: 22px; margin-top: 6px; font-size: .98rem; } .job__wins li::before { content: ""; position: absolute; left: 0; top: .82em; width: 10px; height: 1px; background: var(--taupe); } @media (min-width: 900px) { .job { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .job__dates { grid-column: 1 / 3; } .job__head { grid-column: 3 / 7; } .job__detail { grid-column: 7 / 13; } } /* ========================================================================== PERSONAL LENS ========================================================================== */ .personal__grid { display: grid; gap: 36px; } @media (min-width: 900px) { .personal__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; } .personal__text { grid-column: 1 / 6; } .personal__note { grid-column: 8 / 13; } } .personal__text .display { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-top: 18px; } .strip { margin-top: clamp(40px, 5vw, 64px); display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; } .strip figure { margin: 0; flex: 0 0 auto; scroll-snap-align: start; } .strip img { height: clamp(240px, 30vw, 380px); width: auto; max-width: none; background: var(--sand-soft); } .strip figcaption { margin-top: 10px; font-size: .8rem; color: var(--muted); } @media (max-width: 600px) { .strip img { height: 260px; } } /* ========================================================================== CONTACT (closing page) ========================================================================== */ .contact { margin-top: var(--section); background: var(--noir); color: #CFC7BC; padding-block: clamp(96px, 12vw, 176px) 40px; } .contact .label { color: #A39483; } .contact__headline { margin-top: 26px; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.8rem, 8vw, 8rem); line-height: .95; letter-spacing: -.02em; color: var(--ivory); text-transform: uppercase; } .contact__headline em { text-transform: none; font-style: italic; letter-spacing: -.01em; } .contact__grid { display: grid; gap: 48px; margin-top: clamp(64px, 8vw, 112px); } .contact__id p:first-child { font-size: .8rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--ivory); } .contact__id p + p { margin-top: 8px; } .contact__id .contact__open { margin-top: 24px; max-width: 26em; } .contact__links { border-top: 1px solid #3A3733; } .contact__links a { display: grid; grid-template-columns: 8em 1fr auto; gap: 16px; align-items: baseline; padding-block: 20px; border-bottom: 1px solid #3A3733; transition: color .4s var(--ease), padding .5s var(--ease); } .contact__links a:hover { color: var(--ivory); padding-left: 10px; } .contact__links .k { font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: #A39483; } .contact__links .v { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--ivory); overflow-wrap: anywhere; } @media (min-width: 900px) { .contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .contact__id { grid-column: 1 / 5; } .contact__links { grid-column: 6 / 13; } } @media (max-width: 520px) { .contact__links a { grid-template-columns: 1fr auto; } .contact__links .k { grid-column: 1 / -1; } } .footer { margin-top: clamp(80px, 10vw, 140px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .78rem; letter-spacing: .12em; color: #8E857B; } .footer a:hover { color: var(--ivory); } /* ---------- Hero load sequence (motion is optional, content is visible by default) ---------- */ @media (prefers-reduced-motion: no-preference) { .hero .intro-anim { animation: rise 1.1s var(--ease) both; } .hero .intro-anim:nth-child(2) { animation-delay: .08s; } .hero .intro-anim:nth-child(3) { animation-delay: .16s; } .hero .intro-anim:nth-child(4) { animation-delay: .24s; } .hero .intro-anim:nth-child(5) { animation-delay: .32s; } .hero .intro-anim:nth-child(6) { animation-delay: .40s; } .hero__portrait .frame img { animation: settle 1.8s var(--ease) both; } } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes settle { from { scale: 1.08; } to { scale: 1; } } /* ---------- Print: a clean one-column version ---------- */ @media print { .nav, .hero__ctas, .case-row__cta, dialog, .skip-link { display: none !important; } body { background: #fff; } .contact { background: #fff; color: #000; } .contact__headline, .contact__links .v { color: #000; } } /* Case head with the hero image beside the title (used for portrait images) */ .case__head-text { display: grid; gap: 24px; align-content: end; } .case__head--split .case__hero { aspect-ratio: 4 / 5; max-height: 72vh; } .case__head--split .case__hero img { width: 100%; height: 100%; max-height: none; object-fit: cover; } @media (min-width: 1000px) { .case__head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; } .case__head--split .case__head-text { grid-column: 1 / 8; padding-bottom: 8px; } .case__head--split .case__hero { grid-column: 8 / 13; max-height: none; } } .case__intro-note { font-size: .95rem; color: var(--muted); max-width: 40em; } /* ========================================================================== MOVEMENT LAYER — ticker, reel, work index, dark bands, progress line (all motion switches off automatically for visitors who prefer less motion) ========================================================================== */ /* Scroll progress hairline under the menu */ .nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform-origin: left; transform: scaleX(0); } /* Brand ticker */ .ticker { margin-top: clamp(72px, 9vw, 128px); border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand); padding-block: 20px 26px; display: grid; gap: 14px; } .ticker__viewport { overflow: hidden; } .ticker__track { display: flex; flex-wrap: wrap; } .ticker__track li { display: flex; align-items: center; gap: 1.1em; padding-right: 1.1em; white-space: nowrap; font-family: var(--font-display); font-size: clamp(1.5rem, 2.9vw, 2.7rem); line-height: 1.3; color: var(--ink); } .ticker__track li:nth-child(even) { font-style: italic; } .ticker__track li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--taupe); flex: none; } .ticker.is-ready .ticker__viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .ticker.is-ready .ticker__track { flex-wrap: nowrap; width: max-content; animation: marquee 75s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } /* Moving image reel (dark band) */ .reel { margin-top: var(--section); background: var(--noir); padding-block: clamp(48px, 6vw, 88px); overflow: hidden; } .reel__head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: clamp(28px, 3vw, 44px); } .reel__head .label { color: #A39483; } .reel__viewport { overflow-x: auto; scrollbar-width: none; } .reel__viewport::-webkit-scrollbar { display: none; } .reel__track { display: flex; width: max-content; padding-left: var(--gutter); } .reel figure { margin: 0 14px 0 0; flex: none; cursor: zoom-in; } .reel img { height: clamp(260px, 30vw, 440px); width: auto; max-width: none; background: #24221F; transition: opacity .5s var(--ease); } .reel figure:hover img { opacity: .8; } .reel figcaption { margin-top: 12px; font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #8E857B; } .reel.is-ready .reel__viewport { overflow: hidden; } .reel.is-ready .reel__track { padding-left: 0; animation: marquee 110s linear infinite; } .reel:hover .reel__track, .reel:focus-within .reel__track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Work index — contents list with a photo that follows the cursor */ .index { border-top: 1px solid var(--ink); margin-bottom: clamp(72px, 9vw, 128px); } .index li { border-bottom: 1px solid var(--sand); } .index a { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; align-items: baseline; gap: 8px 20px; padding-block: clamp(16px, 1.9vw, 28px); transition: opacity .5s var(--ease); } .index__num { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--taupe); } .index__name { font-family: var(--font-display); font-size: clamp(1.9rem, 4.6vw, 4.3rem); line-height: 1.04; letter-spacing: -.01em; color: var(--ink); transition: transform .8s var(--ease); } .index__cat { font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); text-align: right; } .index:hover a { opacity: .3; } .index a:hover, .index a:focus-visible { opacity: 1; } .index a:hover .index__name, .index a:focus-visible .index__name { transform: translateX(18px); font-style: italic; } @media (max-width: 700px) { .index a { grid-template-columns: 2.4em minmax(0, 1fr); } .index__cat { grid-column: 2; text-align: left; } } .index__preview { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; width: clamp(220px, 19vw, 300px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand-soft); opacity: 0; scale: .86; transition: opacity .45s var(--ease), scale .7s var(--ease); will-change: transform; } .index__preview.is-active { opacity: 1; scale: 1; } .index__preview img { width: 100%; height: 100%; object-fit: cover; } @media (hover: none), (max-width: 900px) { .index__preview { display: none; } } .cases__label { padding-bottom: 20px; } /* Dark band (used for Expertise) */ .section--dark { background: var(--noir); color: #CFC7BC; margin-top: var(--section); padding-block: var(--section); } .section--dark .display, .section--dark .italic { color: var(--ivory); } .section--dark .label { color: #A39483; } .section--dark .lede { color: #CFC7BC; } .section--dark .expertise__group h3 { color: var(--ivory); border-bottom-color: #8E857B; } .section--dark .expertise__group li { color: #CFC7BC; border-bottom-color: #34312D; transition: color .4s var(--ease), padding .5s var(--ease); } .section--dark .expertise__group li:hover { color: var(--ivory); padding-left: 8px; } .section--dark .toolkit { border-top-color: #34312D; } .section--dark .toolkit p { color: #A39E96; } @media (prefers-reduced-motion: reduce) { .ticker.is-ready .ticker__track, .reel.is-ready .reel__track { animation: none; } .ticker.is-ready .ticker__track { flex-wrap: wrap; width: auto; } .ticker.is-ready .ticker__viewport { -webkit-mask-image: none; mask-image: none; } .reel.is-ready .reel__viewport { overflow-x: auto; } .index__preview { display: none; } } /* Headline results row */ .snapshot--numbers .snapshot__big { font-size: clamp(2.7rem, 4.6vw, 4.4rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums; white-space: nowrap; } .snapshot--numbers .unit { font-family: var(--font-body); font-size: .3em; font-weight: 500; letter-spacing: .2em; vertical-align: .95em; margin-right: .45em; color: var(--taupe); } .snapshot--numbers .snapshot__small { margin-top: 14px; } /* Typographic result panel (used where a number says more than a photo) */ .stat-panel { background: var(--noir); color: var(--ivory); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: clamp(24px, 3.2vw, 48px); } .case-row__media.stat-panel, .case__hero.stat-panel { display: flex; background: var(--noir); } .stat-panel__label { font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: #A39483; } .stat-panel__big { font-family: var(--font-display); font-weight: 400; font-size: clamp(4.6rem, 11vw, 10.5rem); line-height: .85; letter-spacing: -.03em; color: var(--ivory); font-variant-numeric: lining-nums; } .stat-panel__note { max-width: 22em; font-size: .95rem; line-height: 1.55; color: #CFC7BC; } .case-row__media.stat-panel:hover .stat-panel__big, .case-row__media.stat-panel:focus-visible .stat-panel__big { font-style: italic; } /* Featured campaigns: two large tiles */ @media (min-width: 640px) { .campaigns--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* "More campaigns" — a quiet, expandable list */ .more__group { margin-top: 6px; margin-bottom: 14px; } .more-list { border-top: 1px solid var(--ink); margin-bottom: 40px; } .more { border-bottom: 1px solid var(--sand); } .more summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 1.2em; gap: 6px 20px; align-items: baseline; padding-block: 18px; } .more summary::-webkit-details-marker { display: none; } .more__title { font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.25; color: var(--ink); transition: transform .6s var(--ease); } .more summary:hover .more__title { transform: translateX(8px); } .more__type { font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); text-align: right; } .more__type i { text-transform: none; letter-spacing: .02em; font-family: var(--font-display); font-size: 1.1em; } .more__icon { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; color: var(--ink); text-align: right; } .more__icon::before { content: "+"; } .more[open] .more__icon::before { content: "−"; } .more__body { padding: 0 0 24px; max-width: 42em; font-size: 1rem; } .more__body p + p { margin-top: .7em; } .more__body strong { font-weight: 500; color: var(--ink); } @media (max-width: 640px) { .more summary { grid-template-columns: minmax(0, 1fr) 1.2em; } .more__type { grid-row: 2; grid-column: 1; text-align: left; } } .case__title[tabindex="-1"]:focus { outline: none; }