/* ============================================================ case.css — project case studies only. The accent comes from two custom properties set on : --proj side field, hover states, placeholder tint --proj-word the big vertical word inside the field ============================================================ */ /* ---------- top bar ---------- */ .bar { display: flex; align-items: center; justify-content: space-between; padding: 22px var(--pad); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .bar a { color: var(--ink); text-decoration: none; } .bar .back::before { content: "\2190\00a0"; color: var(--muted); } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 46%; align-items: center; gap: 40px; min-height: 80vh; padding: 20px var(--pad) 44px 40px; /* shared title size so the horizontal + vertical word always match */ --tsize: clamp(56px, 7.5vw, 108px); } /* The title lockup + intro copy are one grid so they can never drift apart: the second word runs horizontally across the top, the first word vertical below it (reading bottom-to-top, left edges aligned — one phrase), and the intro copy nests into the angle they form — to the right of the vertical word, under the horizontal one. Because it is a grid, the copy stays tucked in that corner at every title size, instead of two separately-centred blocks that collide as the viewport narrows. ┌ title title ┐ DISTRICT DISTRICT │ vert main │ → G een huisstijl… └─────────────┘ R Opdrachtgever… A Rol… P lead designer… E */ .field { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "title title" "vert main"; align-content: center; column-gap: 30px; } .vert { /* sideways-lr reads bottom-to-top natively — no transform for the .reveal entrance animation to override. */ grid-area: vert; align-self: start; writing-mode: sideways-lr; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: var(--tsize); line-height: 0.68; letter-spacing: .02em; text-transform: uppercase; color: var(--proj); } .main { grid-area: main; align-self: start; margin-top: 6px; } .title { grid-area: title; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: var(--tsize); line-height: .82; letter-spacing: .02em; text-transform: uppercase; color: var(--proj); } .pay { margin-top: 4px; font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(22px, 2.6vw, 30px); color: var(--cherry); } .meta { margin-top: 20px; font-size: 13px; line-height: 1.75; color: var(--body-ink); } .meta b { font-weight: 700; color: var(--ink); } .disciplines { margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--pink-ink); } .hero-wrap { position: relative; z-index: 2; height: 82%; min-height: 420px; transform: translate3d(0, var(--py, 0), 0); will-change: transform; } /* ---------- images ---------- */ .img { position: relative; overflow: hidden; border-radius: 8px; } /* Skip the photo frame on placeholders — .ph-img brings its own tint and dashed border from base.css, and case.css would otherwise overwrite it. */ .img:not(.ph-img) { background: #E9E5DD; border: 1px solid rgba(0, 0, 0, .07); } .img img { width: 100%; height: 100%; object-fit: cover; } /* transparent PNGs — patterns, payoff lockups — sit ON the tint, not under it */ .img.contain { background: color-mix(in srgb, var(--proj) 8%, var(--cream)); border-style: solid; } .img.contain img { object-fit: contain; padding: 22px; } .hero-wrap .img { height: 100%; } .full { height: 440px; } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .two .cell { height: 280px; } .grid { display: grid; gap: 16px; } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid .cell { height: 300px; } .grid .tall { height: 420px; } .caption { margin-top: 10px; font-size: 12px; letter-spacing: .04em; color: var(--muted); } /* ---------- sections ---------- */ .sec { position: relative; overflow: hidden; max-width: 1120px; margin: 0 auto; padding: 40px var(--pad); } .wide { max-width: 1280px; } .h { position: relative; isolation: isolate; display: inline-block; margin-bottom: 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; } .h::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 7px; z-index: -1; background: var(--cherry); opacity: .85; } .body { max-width: 560px; font-weight: 300; font-size: 16px; line-height: 1.75; color: var(--body-ink); } .body + .body { margin-top: 16px; } .body em { font-family: 'Playfair Display', serif; font-style: italic; color: var(--cherry); } /* ---------- collage echo ---------- */ .echo { position: relative; max-width: 1120px; height: 440px; margin: 0 auto; } .echo .par { position: absolute; transform: translate3d(0, var(--py, 0), 0); will-change: transform; } .echo .par > * { height: 100%; } .e1 { left: 2%; top: 8%; width: 40%; height: 78%; } .e2 { left: 34%; top: 24%; width: 34%; height: 70%; z-index: 2; } .e3 { left: 66%; top: 4%; width: 30%; height: 60%; } /* ---------- palette ---------- */ /* Fixed-width columns, not auto-fit fractions: a six-swatch palette should wrap to a second row rather than squeeze, and a four-swatch one should not stretch each chip to fill the section. */ .palette { display: grid; grid-template-columns: repeat(auto-fill, 110px); justify-content: start; gap: 14px 12px; margin: 0; padding: 0; list-style: none; } .sw { height: 64px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .08); } .swl { margin-top: 6px; font-size: 11px; letter-spacing: .04em; text-align: center; color: var(--muted); } .swl code { display: block; font-size: 10px; opacity: .8; } /* ---------- review on cherry ---------- */ .review { position: relative; overflow: hidden; margin-top: 24px; padding: 72px var(--pad); background: var(--cherry); color: var(--cream); text-align: center; } .review .rvb { position: absolute; top: -28px; left: -36px; width: 150px; height: 110px; background: rgba(244, 156, 192, .2); transform: translate3d(0, var(--py, 0), 0); will-change: transform; } .review .lbl { position: relative; z-index: 1; margin-bottom: 22px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--pink-lt); } .review q { position: relative; z-index: 1; display: block; max-width: 640px; margin: 0 auto; font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(22px, 3vw, 30px); line-height: 1.35; color: #F6DCE4; quotes: none; } .review q::before { content: "\201C"; } .review q::after { content: "\201D"; } .review .who { position: relative; z-index: 1; margin-top: 18px; font-size: 12px; letter-spacing: .05em; color: rgba(255, 254, 249, .78); } /* ---------- payoff + next ---------- */ .payoff { position: relative; overflow: hidden; padding: 64px var(--pad); text-align: center; } .payoff .hblock { width: 150px; height: 110px; } /* transparent payoff lockup above the closing line */ .payoff-mark { position: relative; z-index: 1; width: clamp(110px, 13vw, 160px); margin: 0 auto 26px; } .payoff-mark img { width: 100%; height: auto; } .payoff .q { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(24px, 3.4vw, 32px); line-height: 1.3; } .payoff .q em { font-style: italic; color: var(--proj); } .next { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1120px; margin: 0 auto; padding: 24px var(--pad) 44px; border-top: 2px solid var(--ink); } .next .lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .next a { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: clamp(30px, 4vw, 44px); text-transform: uppercase; text-decoration: none; color: var(--ink); transition: color .35s ease, padding-right .35s ease; } .next a:hover, .next a:focus-visible { color: var(--proj); padding-right: 8px; } /* ---------- mobile ---------- */ @media (max-width: 899px) { .hero { display: block; min-height: auto; padding: 14px var(--pad) 34px; } .field { display: block; width: auto; height: auto; margin-bottom: 6px; background: transparent; } .vert { margin-top: 0; writing-mode: horizontal-tb; font-size: 56px; color: var(--proj); } .title { font-size: 56px; } .main { margin-top: 12px; } .hero-wrap { height: auto; min-height: 260px; margin-top: 8px; } .hero-wrap .img { height: 300px; } .sec { padding: 28px var(--pad); } .full { height: 240px; } .two, .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } .two .cell, .grid .cell, .grid .tall { height: 220px; } .echo { height: auto; } .echo .par { position: static; width: auto !important; height: 220px; margin-bottom: 12px; } .review, .payoff { padding: 48px var(--pad); } .next { padding: 22px var(--pad) 34px; } }