/* Skrifttyper — undersat til latin-1 og pakket som woff2 *//* ============================================================ SPREAD — Forside Farver: brand guide s. 46. Display: Grotta Medium. Brødtekst/navigation: Nimbus Sans Novus Regular. Alle mål er kalibreret mod designet ved 1365 px bredde. ============================================================ *//* --- Reset --- *//* ============================================================ HERO ============================================================ *//* ---------- Øverste, grå felt ---------- *//* ------------------------------------------------------------ RINGE Jeres animation, looper konstant. Kilden er kvadratisk med centrum i nederste venstre hjørne. Den forankres derfor med venstre kant på 50 % og bunden i bund, så ringene udgår fra midten af sektionen og breder sig mod højre. ------------------------------------------------------------ *//* ---------- Masthead ---------- *//* Helt i top: ingen baggrund, så ringanimationen kan ses bagved. *//* Kun ved scroll NEDAD: baggrunden forsvinder, menuen fader ud, og alene S'et bliver stående. Opad og i hvile er alt synligt. *//* S'et er sort som udgangspunkt og skifter til hvidt, når det står frit oven på et mørkt afsnit. Aldrig andre farver. *//* Ingen bundpolstring: linjen ligger uden for boksen, så teksten selv bliver centreret lodret i menuen. *//* Sprogvælger — pille med globus på desktop, EN | DK på mobil *//* ---------- Overskrift ---------- *//* ============================================================ VIDEO-STAGE — 10 klip á 5 sekunder ============================================================ *//* Ligger bag videoen og bliver kun synlig, hvis klippet ikke kan hentes *//* Blødt slør i bunden, så tallene kan læses oven på video *//* ---------- Brandnavn, øverst til højre ---------- *//* ---------- Tal-navigation ---------- *//* ============================================================ OM SPREAD — sort sektion med den brede animation ============================================================ *//* Den brede animation dækker hele sektionen *//* "See our work" med pil ned *//* ============================================================ EXPLORE OUR WORK — cases og logovæg ============================================================ *//* Kortrækken: tre cases plus det orange kort. Kolonnebredderne er låst i designets forhold (172 : 102), så kortenes højder følges ad uanset skærmbredde. *//* Det orange "View more"-kort *//* Logovæggen — alle mærker ligger i kvadratiske SVG'er, så hvert logo skaleres med sin egen faktor (--s) i cellen. *//* ============================================================ FOOTER — Curious? Let's talk. ============================================================ *//* kun to linjer på mobil *//* ============================================================ Mobil — følger det godkendte mobil-design ============================================================ */@media (max-width: 767px){ :root{ --page-x: 20px; --logo-w: 78px; --h1-indent: 0px; --top-pad-t: 12px; --top-pad-b: 60px; --title-gap: 60px; --brand-right: 20px; --num-bottom: 22px; --fs-nav: 13px; --fs-h1: 27px; --fs-brand: 34px; --fs-num: 23px; --nav-gap: 1.2em; --num-gap: 1.06em; --fs-lead: 29px; --fs-body: 15px; /* Den længste låste linje er "Spread is a full-service" på 10,37 em. Graden følger derfor bredden, så overskrifterne altid er så store, som de kan være uden at blive beskåret. */ --fs-display: min(calc(9.2vw - 3.7px), 40px); --about-pad-t: 56px; --about-gap-lead: 46px; --about-gap-body: 26px; --about-gap-btn: 30px; --about-gap-more: 56px; --work-pad-t: 52px; --work-pad-b: 48px; --work-head-gap: 20px; --work-cap-gap: 12px; --work-logo-gap: 44px; --work-more-fs: 32px; --logo-cell-h: 52px; --logo-row-gap: 26px; --logo-scale: .9; --fs-footer-mail: 20px; --footer-pad-t: 48px; --footer-pad-b: 60px; --footer-gap: 26px; } .only-desktop{ display:none; } .only-mobile{ display:inline; } .footer__title{ font-size:48px; line-height:1; } /* bevidst større end de øvrige */ .footer__title br{ display:inline; } .footer__cols{ grid-template-columns:1fr; row-gap:30px; } .about__title{ margin-left:0; } .about__col{ margin-left:0; max-width:none; } .about__lead{ line-height:1.05; } .about__text{ line-height:1.5; } .about__text p + p{ margin-top:1.27em; } /* Knappen er et understreget link på mobil */ .about__cta{ align-self:flex-start; min-height:0; padding:0 0 .3em; border:0; border-bottom:1px solid currentColor; border-radius:0; } .about__cta:hover{ background:none; color:var(--white); opacity:.7; } /* Cases: to kort pr. række, logoer tre pr. række */ .work__head{ max-width:55%; } .work__grid{ grid-template-columns:repeat(2, 1fr); gap:1.48%; } .work__more{ aspect-ratio:172 / 253; align-items:flex-end; padding:0 8.4% 8%; } .work__logos{ grid-template-columns:repeat(3, 1fr); } /* Mobil viser 15 mærker i fem rene rækker */ .work__logos li:last-child{ display:none; } .nav{ padding-top:.2em; } .hero__title{ max-width:none; } }/* ============================================================ Reduceret bevægelse — ringene står stille ============================================================ *//* ============================================================ ABOUT — sidespecifik Mål taget i designet ved 891 px indholdsbredde. ============================================================ *//* Headerens baggrund hører til siden *//* Aktivt menupunkt *//* ---------- 1. Intro ---------- *//* Samme ringanimation som på forsiden — her forankret i venstre side *//* ---------- 2. Services ---------- *//* Skjult tekst: rækken går fra 0fr til 1fr, så kassen vokser blødt *//* ---------- 3. Collaboration ---------- *//* Blødt slør, så den hvide tekst kan læses oven på fotoet *//* ============================================================ ABOUT — tablet ============================================================ *//* ============================================================ ABOUT — mobil ============================================================ */@media (max-width: 767px){ :root{ --intro-indent:0px; --intro-gap-top:44px; --intro-pad-b:56px; --col-x:0%; --col-w:none; --svc-indent:0px; --svc-pad-x:20px; --svc-pad-y:26px; --collab-indent:0px; } .intro__title{ max-width:none; } .intro__body{ margin: clamp(40px, 12vw, 70px) 0 0; max-width:none; } .services__intro{ margin-left:0; max-width:none; } .services__head{ margin-left:0; } .services__list{ margin-left:0; gap:6px; } .svc__bar{ grid-template-columns:1fr; } .svc.is-open .svc__text{ display:block; padding-top:1.1em; } .collab{ justify-content:flex-start; } .collab__inner{ margin-left:0; max-width:none; } .collab__title{ max-width:none; } }/* Light-snittet bruges kun til etiketterne Client og Services *//* ============================================================ CASE-SIDER Målt i designbillederne. Desktop er 961 px bred — regnet ud baglæns fra brødteksten, der måler 13,36 px og er 1,39 % af sidebredden. Mobil er 375 px. ============================================================ */:root{ --case-hero-gap: clamp(14px, 2.75vw, 40px); /* header → hero */ --case-sec-gap: clamp(40px, 6vw, 90px); /* mellem sektionerne */ --case-more-gap: clamp(56px, 8.5vw, 118px); /* grid → More cases */ --fs-more: clamp(24px, 2.27vw, 34px); /* Procentafstand i et grid regnes lodret mod grid'ets højde, og med auto-højde bliver rækkeafstanden nul. Derfor regnes den i stedet ud af indholdsbredden, så vandret og lodret bliver ens. */ --gap-pairs: calc((100vw - 2 * var(--page-x)) * .01); --gap-posters: calc((100vw - 2 * var(--page-x)) * .022); --meta-label: 19.3%; /* etiketspalten i venstre side */ }.page-case{ --header-bg: var(--grey); }.case{ background: var(--grey); color: var(--black); padding: calc(var(--top-pad-t) + var(--logo-h) + var(--case-hero-gap)) var(--page-x) var(--work-pad-b); }/* ---------- Medie-placeholders ---------- Erstat
med