/* ============================================================================ NIMMERSATT x OTTOLINGER — Berlin Fashion Week Client layer on top of: tokens → pitch → deck → client-cc-tapis → client-sprs → client-otto. This file only holds what the Ottolinger deck needs on top of that stack: 1. a centred hero (the cc-tapis layer splits it into two columns) 2. the "What we delivered" ledger, read as full-width rows 3. the project index tiles used by Fashion Week / Index / Recaps 4. placeholder cards for reference stacks whose stills are still missing ========================================================================== */ body.ol-pitch { --bg: #fafafa; --fg: #0d0d0d; --ink: rgba(13, 13, 13, 0.72); --ink-strong: rgba(13, 13, 13, 0.9); --client: #0d0d0d; --client-brown: #1a1a1a; --client-line: rgba(13, 13, 13, 0.18); /* Plain ground. The cc-tapis layer paints three vertical hairlines at 25 / 50 / 75 % of the page width via a background gradient on ; this deck runs without them. */ background: var(--bg); } /* The intro footage was mastered on pure white. Multiply lets that white matte resolve to the deck's #fafafa ground without re-colouring the moving image. */ .ol-pitch .preloader { background: var(--bg); isolation: isolate; } .ol-pitch .preloader__media { mix-blend-mode: multiply; } /* The full navigation bar is gone. The remaining brand behaves like a small physical sticker: black artwork, off-white fill, crisp white contour. */ .ol-pitch .nav, .ol-pitch .nav.is-stuck { inset: var(--space-4) auto auto var(--space-4); width: auto; padding: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; pointer-events: none; } .ol-pitch .nav__brand { position: relative; display: inline-flex; gap: var(--space-2); padding: var(--space-2) var(--space-3); color: var(--fg); background: var(--bg); border: var(--space-1) solid #fff; pointer-events: auto; } .ol-pitch .nav__mark { width: var(--space-5); color: var(--fg); } .ol-pitch .nav__name { color: var(--fg); font-family: var(--font-client-mono); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); } @media (max-width: 767px) { .ol-pitch .nav, .ol-pitch .nav.is-stuck { inset: var(--space-3) auto auto var(--space-3); } .ol-pitch .nav__brand { padding: var(--space-2); } .ol-pitch .nav__name { display: inline; } } /* The short dotted tick above the intro belonged to that same grid. With the grid gone it floats on its own, so it goes too. */ .ol-pitch .about .shell::after { content: none; } /* --- 1 / Hero: centred column, GIF between the tagline and the disciplines -- The cc-tapis layer puts the wordmark left and the mark right. Otto asked for the centred sprs composition, so the grid placements are reset here. */ .ol-pitch .hero { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: clamp(1.4rem, 3.2vw, 2.5rem); } .ol-pitch .hero__title, .ol-pitch .hero__sub, .ol-pitch .hero__mark, .ol-pitch .hero__meta { grid-column: auto; grid-row: auto; justify-self: center; } .ol-pitch .hero__title { width: fit-content; max-width: 92vw; white-space: nowrap; margin-inline: auto; text-align: center; font-size: clamp(2rem, 9vw, 8rem); line-height: 0.9; letter-spacing: -0.035em; } .ol-pitch .hero__sub { max-width: 46ch; margin-inline: auto; text-align: center; } .ol-pitch .hero__mark { width: clamp(150px, 26vw, 320px); max-width: min(80vw, 320px); margin-inline: auto; aspect-ratio: auto; justify-self: center; } /* Fashion films are revealed through the animated Nimmersatt caterpillar. */ .ol-pitch .hero__mark.hero-montage { position: relative; width: min(72vw, 760px); max-width: 760px; aspect-ratio: 16 / 9; overflow: hidden; background: transparent; } .hero-montage__films { position: absolute; inset: 0; z-index: 1; overflow: hidden; -webkit-mask-image: url("../assets/raupe-walk-hd.gif?v=3"); mask-image: url("../assets/raupe-walk-hd.gif?v=3"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-mode: alpha; mask-mode: alpha; } .ol-pitch .hero__mark.hero-montage::after { content: none; } .hero-montage__films > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: ol-hero-cut 11s steps(1, end) infinite; } .hero-montage__films > video:nth-child(2) { animation-delay: -8.25s; } .hero-montage__films > video:nth-child(3) { animation-delay: -5.5s; } .hero-montage__films > video:nth-child(4) { animation-delay: -2.75s; } @keyframes ol-hero-cut { 0%, 24.99% { opacity: 1; } 25%, 100% { opacity: 0; } } @media (max-width: 767px) { .ol-pitch .hero__title { max-width: calc(100vw - (2 * var(--space-4))); font-size: clamp(2.25rem, 10.5vw, 2.75rem); } .ol-pitch .hero__mark.hero-montage { width: min(88vw, 520px); } } @media (prefers-reduced-motion: reduce) { .hero-montage__films { -webkit-mask-image: url("../assets/raupe-walk-hd-static.png"); mask-image: url("../assets/raupe-walk-hd-static.png"); } .ol-pitch .hero__mark.hero-montage::after { display: none; } .hero-montage__films > video { animation: none; opacity: 0; } .hero-montage__films > video:first-child { opacity: 1; } } .ol-pitch .hero__meta { justify-content: center; } /* --- 2 / "What we delivered": one number per row, read across the page ------ Otto: "make it sound bigger or list horizontally." Each line is a full-width row: oversized figure, the deliverable, and the detail that qualifies it. */ .ol-delivered { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px dotted var(--client-line); } .ol-delivered__row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, 0.9fr); align-items: baseline; column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: 0.35rem; padding: clamp(1.1rem, 2.4vw, 1.9rem) 0; border-bottom: 1px dotted var(--client-line); } .ol-delivered__num { font-family: var(--font-client-display); font-weight: 700; font-size: clamp(2.6rem, 7.5vw, 6.5rem); line-height: 0.82; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; } .ol-delivered__name { font-family: var(--font-client-display); font-weight: 700; font-size: clamp(1.1rem, 2.4vw, 2rem); line-height: 1.05; letter-spacing: -0.02em; } .ol-delivered__note { max-width: 40ch; color: var(--ink); font-size: clamp(0.72rem, 0.95vw, 0.86rem); font-weight: var(--w-read); line-height: 1.6; } @media (max-width: 860px) { .ol-delivered__row { grid-template-columns: minmax(0, auto) minmax(0, 1fr); } .ol-delivered__note { grid-column: 2; max-width: none; } } /* --- 3 / Project index tiles ------------------------------------------------ Used three times: the other Fashion Week work, the index® references, and the event recaps. One tile per project, image on top, metadata underneath. */ .ol-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1px; margin-top: clamp(1.6rem, 3vw, 2.4rem); border: 1px dotted var(--client-line); background: var(--client-line); } .ol-project { display: flex; flex-direction: column; min-width: 0; background: var(--bg); } .ol-project__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ededea; } .ol-project__media :is(img, video) { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-ui) var(--ease-spring); } .ol-project:hover .ol-project__media :is(img, video) { transform: scale(1.03); } /* Recap tiles that open a full-video lightbox signal it with the zoom cursor. */ .ol-project__media video[data-zoom] { cursor: zoom-in; } .ol-project__body { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--client-row-pad); } .ol-project__num { font-family: var(--font-client-mono); font-size: 0.55rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .ol-project__name { font-family: var(--font-client-display); font-size: clamp(1.05rem, 1.9vw, 1.5rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; } .ol-project__meta { font-family: var(--font-client-mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } /* --- 6 / Concept table -------------------------------------------------- client-otto.css forces every .conceptbody into single full-width rows. The Case section wants exactly that, but Index and Recaps keep the cc-tapis five-column table, so it is restored per section. */ @media (min-width: 980px) { .ol-pitch .conceptbody--table { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } } /* --- 7 / Type: cc-tapis only, never the SPRS pitch's ----------------------- client-otto.css (the layer behind nimmersatt-x-sprs.surge.sh) forces every heading to Poynter OS Display. That face does not belong here; headings run on the cc-tapis display face, Nimbus Sans Round. The HERO WORDMARK is the deliberate exception: it keeps Rock 3D, the hand-drawn Nimmersatt face, which is what Otto annotated. That comes from `.otto-pitch .hero__title`, so this file leaves the hero alone. */ body.ol-pitch h2, body.ol-pitch h3, body.ol-pitch .otto-cubebox__label strong { font-family: var(--font-client-display) !important; } /* The ASCII closing inherits its font from the h2 above, and any proportional face collapses the block. It needs a real monospace. */ .ol-pitch .closing__line--ascii, .ol-pitch .closing__line--ascii .ascii-art { font-family: "Apercu Mono", "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; } /* --- 9 / Offered services: two equal rows ---------------------------------- Eight services, four per row on desktop, so the two rows are the same length. */ @media (min-width: 900px) { .ol-pitch .about__services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: initial; } } /* --- 10 / Case body: one column, sub-blocks stacked ------------------------ client-otto.css splits each block into "tag | text | text" on wide screens, so Setup and Progression sit side by side. Otto wants them under each other. */ @media (min-width: 980px) { .ol-pitch .otto-main-film .conceptblock { grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr); } .ol-pitch .otto-main-film .conceptblock p { grid-column: 2; } } /* --- 11 / Flipped season block: media right, copy left --------------------- */ .ol-pitch .otto-direction-head--flip .otto-cubebox { order: 2; } .ol-pitch .otto-direction-head--flip .concept__brief { order: 1; } /* --- 12 / Client / studio credits inside a season brief -------------------- */ .ol-creditblock { margin-top: clamp(1rem, 2vw, 1.5rem); } .ol-creditblock + .ol-creditblock { margin-top: clamp(0.9rem, 1.8vw, 1.3rem); } .ol-creditblock__label { display: block; margin-bottom: 0.45rem; font-family: var(--font-client-mono); font-size: 0.55rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .ol-creditblock__names { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; list-style: none; } .ol-creditblock__names li { font-family: var(--font-client-mono); font-size: clamp(0.62rem, 0.85vw, 0.74rem); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } /* --- 13 / Client wall: one uniform black silhouette ------------------------ Several marks (lululemon, GmbH, index, assembly, ROVO, Jaded) ship as white on transparent and vanished on this white ground. brightness(0) flattens every logo to the same black, which is also how the live site does it. */ .ol-pitch .clientlist img { filter: brightness(0); opacity: 0.78; } /* Otto asked for the marks to sit bigger. Roughly +55 % over the cc-tapis default, with a taller cell so nothing collides. */ .ol-pitch .clientlist li { min-height: clamp(110px, 12vw, 165px); } .ol-pitch .clientlist img { max-width: min(84%, 240px); max-height: clamp(44px, 6.4vw, 82px); } /* Otto, 04.09.26: "6 logos side by side, 3 rows". The cc-tapis base is an auto-fit grid, which reflowed to 5 or 7 across depending on the viewport, so this pins the count instead of letting the track width decide it. 18 marks divide into 6 x 3 exactly. Six across a phone is 65px per cell, unreadable, so it steps to 3 then 2 — the row of six is the desktop instruction. */ .ol-pitch .clientlist { grid-template-columns: repeat(6, 1fr); } @media (max-width: 899px) { .ol-pitch .clientlist { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 559px) { .ol-pitch .clientlist { grid-template-columns: repeat(2, 1fr); } } /* Clients we hold no mark for run as a plain name row under the wall. */ .ol-clientnames { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: clamp(1.1rem, 2.2vw, 1.8rem); padding-top: clamp(1rem, 2vw, 1.5rem); border-top: 1px dotted var(--client-line); list-style: none; } .ol-clientnames li { font-family: var(--font-client-mono); font-size: clamp(0.62rem, 0.85vw, 0.74rem); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } /* --- 12b / The crown, inverted, with the crawl lane -------------------------- The panel goes black with white type, and the bracket row is replaced by a column of Nimmersatt marks crawling across it. Colour is re-pointed rather than restyled, the same way §16 flips a section: --fg carries the meta row's two bold cells and the wordmark, --cc-blue is the upstream hover accent (a near-black blue, unreadable here). Only the three values cc-tapis hard-codes need overriding by hand. */ .ol-pitch .client-crown { --fg: #fafafa; --cc-blue: rgba(250, 250, 250, 0.62); background: #0d0d0d; border-color: rgba(250, 250, 250, 0.16); box-shadow: 0 18px 42px rgba(13, 13, 13, 0.42); width: min(320px, calc(100vw - (var(--client-edge-pad) * 2))); } .ol-pitch .client-crown__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; padding: 0.45rem 0.65rem 0.35rem; border-bottom-color: rgba(250, 250, 250, 0.16); color: rgba(250, 250, 250, 0.45); } .ol-pitch .client-crown__choice { color: rgba(250, 250, 250, 0.58); font-weight: 600; text-align: center; transition: color var(--dur-ui) var(--ease-spring); } .ol-pitch .client-crown__choice:first-child { text-align: left; } .ol-pitch .client-crown__choice:last-child { text-align: right; } .ol-pitch .client-crown__choice:hover, .ol-pitch .client-crown__choice:focus-visible { color: var(--fg); outline: none; } /* The brackets are gone from the markup; this keeps the rule from applying if a sibling deck's markup is ever pasted back in. */ .ol-pitch .client-crown__brackets { display: none; } /* The crawl lane takes over the row the brackets used to hold, so the panel does not grow and this works on the capped mobile crown too. */ .ol-pitch .client-crown__crawl { position: relative; height: 1.35rem; overflow: hidden; border-bottom: 1px solid rgba(250, 250, 250, 0.16); } @media (max-width: 640px) { body.ol-pitch { --client-crown-mobile-height: 4rem; } .ol-pitch .client-crown { right: max(1rem, env(safe-area-inset-right)); left: max(1rem, env(safe-area-inset-left)); width: auto; } .ol-pitch .client-crown__meta { gap: 0.5rem; padding: 0.5rem 0.75rem 0.4rem; } .ol-pitch .client-crown__crawl { height: 1.6rem; } } /* Each runner spans the lane, so `translateX(100%)` is exactly one lane width: travel is lane + mark, with no hard-coded panel width to keep in sync. The `from` value is the mark's own width, so it enters off-frame instead of popping in. ONE duration for all twelve, and the only difference is the start offset. That is what keeps the column honest: identical speed means the spacing set by the delays never changes, so no mark ever overtakes or overlaps another. Giving them individual speeds looks livelier for about five seconds and then they bunch into white clumps with empty bar between — the relative drift is roughly 10px per second even for speeds only 2s apart. */ .ol-pitch .client-crown__runner { position: absolute; inset: 0; display: block; animation: olRaupeCrawl 12s linear infinite; will-change: transform; } .ol-pitch .client-crown__raupe { position: absolute; left: 0; top: 50%; height: 0.92rem; width: auto; transform: translateY(-50%); } @keyframes olRaupeCrawl { from { transform: translateX(-2.4rem); } /* mark width */ to { transform: translateX(100%); } /* one lane width */ } /* Twelve marks, one second apart on a 12s cycle: an even 1/12 of the lane between each. Travel is lane + mark, so the pitch is 555/12 ≈ 46px against a 37px mark — a ~9px gap that stays constant, at every breakpoint (checked: the narrowest panel still leaves ~6px). Nothing here to keep in sync by hand: with the count and the duration matching, `-1s` per child is exactly one twelfth. */ .ol-pitch .client-crown__runner:nth-child(1) { animation-delay: 0s; } .ol-pitch .client-crown__runner:nth-child(2) { animation-delay: -1s; } .ol-pitch .client-crown__runner:nth-child(3) { animation-delay: -2s; } .ol-pitch .client-crown__runner:nth-child(4) { animation-delay: -3s; } .ol-pitch .client-crown__runner:nth-child(5) { animation-delay: -4s; } .ol-pitch .client-crown__runner:nth-child(6) { animation-delay: -5s; } .ol-pitch .client-crown__runner:nth-child(7) { animation-delay: -6s; } .ol-pitch .client-crown__runner:nth-child(8) { animation-delay: -7s; } .ol-pitch .client-crown__runner:nth-child(9) { animation-delay: -8s; } .ol-pitch .client-crown__runner:nth-child(10) { animation-delay: -9s; } .ol-pitch .client-crown__runner:nth-child(11) { animation-delay: -10s; } .ol-pitch .client-crown__runner:nth-child(12) { animation-delay: -11s; } /* --- 12c / The panel on narrow screens -------------------------------------- 760px is where client-otto.css turns the crown into a full-width fixed bar, so the compact treatment starts there rather than at cc-tapis's 640px — otherwise the lane keeps its desktop height inside an already-cramped panel. The wordmark row is dropped here. It was being clipped anyway: the panel is capped at 4.45rem (71px) while meta + lane + bar need 80px, so the bottom of "nimmersatt" was cut off on every phone. It is also redundant — the header carries the mark and name, and .backtotop keeps the scroll-to-top affordance. With it gone the panel is two clean rows and the height below matches them. */ @media (max-width: 760px) { body.ol-pitch { --client-crown-mobile-height: 3.1rem; --client-crown-mobile-space: calc( var(--client-crown-mobile-height) + var(--client-crown-mobile-offset) + 0.5rem ); } .ol-pitch .client-crown__bar { display: none; } .ol-pitch .client-crown__crawl { height: 1.65rem; border-bottom: 0; /* it is the panel's last row now */ } .ol-pitch .client-crown__raupe { height: 0.95rem; } } @media (max-width: 640px) and (max-height: 650px) { .ol-pitch .client-crown__crawl { height: 1.3rem; } .ol-pitch .client-crown__raupe { height: 0.8rem; } } /* An animated GIF cannot be paused, so the lane goes rather than sit there twitching for someone who asked for less motion. */ @media (prefers-reduced-motion: reduce) { .ol-pitch .client-crown__crawl { display: none; } } /* --- 13b / Partner studios: three across ------------------------------------ client-otto.css forces this grid to two columns, which left the third studio (poly) orphaned on its own row. The cc-tapis default of three is right here. */ @media (min-width: 720px) { .ol-pitch .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- 14 / Network note under the partner studios --------------------------- */ .ol-network { max-width: 56ch; margin-top: clamp(1.1rem, 2.2vw, 1.6rem); color: var(--ink); font-size: clamp(0.78rem, 1vw, 0.9rem); font-weight: var(--w-read); line-height: 1.6; } /* The Charli XCX block used to sit between the section lead and this label. With it gone the two collided, so the label carries its own top space. */ .ol-pitch #recaps .section__index { margin-top: clamp(2rem, 4vw, 3.25rem); } .ol-pitch #recaps { min-height: min(100svh, 960px); padding-block: clamp(8rem, 12vw, 12rem); } .ol-pitch .visual-frontload__music { margin-top: clamp(5rem, 10vw, 10rem); padding-top: clamp(4rem, 8vw, 8rem); } .ol-pitch .visual-frontload__music .manifesto__line { max-width: 12ch; } .ol-pitch .visual-frontload__fashion { margin-bottom: clamp(5rem, 10vw, 10rem); } /* --- 14b / Crew: one row, however many people ------------------------------ client-otto.css pins #exchange to five columns, so the sixth person (Finnian joined as Director) wrapped onto a second row. Column auto-flow puts every entry in a single row regardless of headcount, so adding a seventh will not break it either. Phones still stack — six across 390px is not a row. */ @media (min-width: 761px) { .ol-pitch #exchange .projectteam__crew { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } /* Names have to survive the narrower cell. */ .ol-pitch #exchange .artist__name { font-size: clamp(0.82rem, 1.25vw, 1.15rem); hyphens: none; } .ol-pitch #exchange .artist__role { font-size: clamp(0.5rem, 0.68vw, 0.62rem); } .ol-pitch #exchange .projectperson { padding-inline: clamp(0.7rem, 1.2vw, 1.35rem); } } /* Phones: client-otto.css puts the crew in two columns, which clips the longest label ("Photographer") at 390px. Five short rows stack instead. */ @media (max-width: 760px) { .ol-pitch #exchange .projectteam__crew { grid-template-columns: minmax(0, 1fr); } } /* --- 15 / External reference links (Vimeo / YouTube / Instagram) ------------ */ .ol-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .ol-links a { padding: 0.4rem 0.75rem; border: 1px dotted var(--client-line); font-family: var(--font-client-mono); font-size: 0.55rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; transition: color var(--dur-ui) var(--ease-spring), border-color var(--dur-ui) var(--ease-spring); } .ol-links a:hover, .ol-links a:focus-visible { color: var(--bg); background: var(--fg); border-color: var(--fg); } /* A project tile that links out rather than playing inline. */ .ol-project__link { display: flex; flex-direction: column; height: 100%; } /* --- 16 / Stack cards that carry a film ------------------------------------- Eight of the thirteen index® stills have a cut behind them. The badge is the only thing that separates them from a still-only card, so it has to be readable over any frame — hence the plate, not just white type. */ .ol-pitch .conceptstack__card.has-film { cursor: pointer; } /* The tick sits in the very first pixels of the card, so it stays visible even when the card is contracted to an 8px sliver — that is how you can tell which of the thirteen stills carry a cut before hovering anything. */ .ol-pitch .conceptstack__filmtick { position: absolute; left: 0; bottom: 0; z-index: 2; width: 8px; height: 8px; background: #fafafa; pointer-events: none; } /* --- 16b / Cube tile that holds a linked film ------------------------------- The cube is a 2x2 grid whose media are direct children, so client-otto.css targets them by nth-child. A YouTube film has no