/* ========================================================================== ICON AGENCY — passata 2 --------------------------------------------------------------------------- Direzione: bianco e nero puro. Due soli font, presi dal sito live: Bebas Neue (display, condensato, mai mai serif) + Mulish (corpo). Linguaggio: IL CASTING BOOK. Ogni indice del sito e' un foglio bianco diviso da filetti da 1px: board, schede, lavori, clienti. I nomi stanno sotto le foto, in Bebas uppercase, come nel board di Select. Un indice alfabetico sticky chiude il sistema, in fondo. La fotografia e' in bianco e nero per default: il colore torna al passaggio del mouse. Un solo momento di verita', senza rompere la palette. ========================================================================== */ @import url("./site-fonts.css"); /* --- 1. TOKEN ----------------------------------------------------------- */ :root { /* colore: nessuna tinta. solo bianco, nero e opacita'. */ --paper: #FFFFFF; --paper-2: #F5F5F5; --ink: #000000; --ink-80: rgba(0,0,0,.80); --ink-58: rgba(0,0,0,.58); --ink-42: rgba(0,0,0,.42); --rule: rgba(0,0,0,.14); --rule-2: rgba(0,0,0,.32); --rule-inv: rgba(255,255,255,.20); /* tipografia */ --f-disp: "Bebas Neue", "Arial Narrow", "Helvetica Neue", sans-serif; --f-body: "Mulish", -apple-system, "Helvetica Neue", Arial, sans-serif; /* scala: volutamente contenuta. niente poster, niente manifesto. il display piu' grande del sito e' 78px, in condensato. */ --t-h1: clamp(2.45rem, 5.4vw, 4.85rem); /* 39 - 78 px */ --t-h2: clamp(1.42rem, 2.65vw, 2.3rem); /* 23 - 37 px */ --t-h3: clamp(1.02rem, 1.3vw, 1.22rem); --t-lead: clamp(1rem, 1.12vw, 1.1rem); --t-body: clamp(.92rem, .96vw, .96rem); --t-lbl: .655rem; --t-nm: 1.06rem; /* ritmo */ --gut: clamp(18px, 2.15vw, 34px); --sec: clamp(62px, 8.6vh, 118px); --maxw: 1680px; --hdr: 66px; /* movimento */ --e: cubic-bezier(.22, 1, .36, 1); } /* --- 2. RESET ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: var(--t-body); line-height: 1.62; font-weight: 400; overflow-x: hidden; padding-top: var(--hdr); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } ::selection { background: var(--ink); color: var(--paper); } :focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 999; background: var(--ink); color: var(--paper); padding: 10px 16px; } /* --- 3. TIPOGRAFIA ------------------------------------------------------ */ .d1, .d2, .d3, .nm, .num, .az button, .ftr__big { font-family: var(--f-disp); font-weight: 400; } .d1 { font-size: var(--t-h1); line-height: .95; letter-spacing: .005em; text-transform: uppercase; } .d2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: .012em; text-transform: uppercase; } .d3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; } .nm { font-size: var(--t-nm); line-height: 1.1; letter-spacing: .045em; text-transform: uppercase; } .num { font-size: clamp(2.3rem, 4vw, 3.4rem); line-height: 1; letter-spacing: .01em; } .lbl { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-42); } .lbl--ink { color: var(--ink); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .lead { font-size: var(--t-lead); font-weight: 300; line-height: 1.6; color: var(--ink-80); max-width: 44ch; } .body { color: var(--ink-58); } em { font-style: italic; } /* --- 4. LAYOUT ---------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .sec { padding-block: var(--sec); } .rule { height: 1px; background: var(--rule); border: 0; } /* intestazione di sezione: titolo a sinistra, dato a destra, filetto sotto. il device e' quello di Select, ma in filetto e non in riquadro. */ .sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 14px; margin-bottom: 30px; border-bottom: 1px solid var(--rule); } .sechead__r { display: flex; align-items: baseline; gap: 22px; } /* --- 5. HEADER ---------------------------------------------------------- */ .hdr { position: fixed; inset: 0 0 auto 0; z-index: 500; height: var(--hdr); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: var(--gut); background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .4s var(--e); } .hdr.stuck { border-bottom-color: var(--rule); } .hdr__mark { display: block; width: clamp(66px, 5.4vw, 86px); flex: none; } .hdr__mark img { width: 100%; height: auto; } .hdr__nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); } .hdr__nav a { font-family: var(--f-disp); font-size: .92rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-58); position: relative; padding-block: 5px; transition: color .3s var(--e); } .hdr__nav a:hover, .hdr__nav a.on { color: var(--ink); } .hdr__nav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); } .hdr__right { display: flex; align-items: center; gap: 20px; } .hdr__lang { font-family: var(--f-disp); font-size: .84rem; letter-spacing: .14em; color: var(--ink-42); } /* lo switch di lingua in testata: la lingua corrente e' spenta, l'altra e' un link. Ha lo stesso peso del testo spento, e si accende al passaggio. */ a.hdr__lang { color: var(--ink-42); text-decoration: none; } a.hdr__lang:hover { color: var(--ink); } /* la porta di iscrizione: piccola, in testata, presente su ogni pagina. "iscriversi subito" vuol dire che il link non va cercato. */ .hdr__cta { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); padding-bottom: 4px; border-bottom: 1px solid var(--rule-2); transition: opacity .3s var(--e), border-color .3s var(--e); white-space: nowrap; } .hdr__cta:hover { opacity: .5; border-bottom-color: var(--ink); } .burger { width: 34px; height: 34px; position: relative; flex: none; } .burger span { position: absolute; left: 4px; width: 26px; height: 1px; background: var(--ink); transition: transform .38s var(--e), opacity .25s; } .burger span:nth-child(1) { top: 13px } .burger span:nth-child(2) { top: 20px } .burger.open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg) } .burger.open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg) } /* --- 6. MENU ------------------------------------------------------------ */ .menu { position: fixed; inset: 0; z-index: 400; background: var(--ink); color: var(--paper); display: grid; align-content: center; padding-inline: var(--gut); opacity: 0; visibility: hidden; transition: opacity .45s var(--e), visibility .45s; } .menu.open { opacity: 1; visibility: visible; } .menu__list { border-top: 1px solid var(--rule-inv); } .menu__list a { display: flex; align-items: baseline; gap: 20px; padding-block: 12px; border-bottom: 1px solid var(--rule-inv); font-family: var(--f-disp); font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1; letter-spacing: .02em; text-transform: uppercase; opacity: 0; transform: translateY(18px); transition: opacity .5s var(--e), transform .5s var(--e); } .menu.open .menu__list a { opacity: 1; transform: none; } .menu__list a i { font-family: var(--f-body); font-style: normal; font-size: .66rem; font-weight: 600; letter-spacing: .2em; color: rgba(255,255,255,.4); } .menu__list a:hover { color: rgba(255,255,255,.55); } /* --- 7. HERO: LA BANDA A TUTTO SCHERMO ------------------------------- */ /* L'hero e' una banda: il video la occupa interamente, da bordo a bordo, come la prima versione full-bleed. Sopra il nero restano tre cose e non di piu': la ciappa, il foglio bianco del claim — la carta sopra la fotografia — e UNA faccia che gira, appuntata sul footage. */ .hero { padding: 0; } /* L'ESPLOSIONE: il video NON riparte. Quando arriva in fondo, nella stessa banda — sotto il logo — compare la foto a colori dell'agenzia (le cinque modelle dell'hero del live). Il footage si ferma sul suo ultimo frame e la foto prende il posto con una dissolvenza. */ /* LA BANDA E' UNA SEQUENZA, dentro la stessa cornice: 1. il video in bianco e nero, con la scritta a sinistra; 2. a video finito la foto a colori dell'agenzia prende il posto e la scritta SCORRE IN CENTRO (`.hvid.is-center`); 3. dopo qualche secondo lo slider prende il posto della foto (`.hvid.is-reel`): le dieci immagini passano dentro la banda. Niente loop: il video non riparte mai da solo. */ .hvid__photo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; opacity: 0; transition: opacity 1.8s var(--e); } .hvid.is-photo .hvid__photo { opacity: 1; } .hvid { position: relative; width: 100%; height: clamp(420px, 74vh, 780px); background: var(--ink); overflow: hidden; } /* velatura funzionale: la ciappa e il timecode sono bianchi e il footage cambia di luminosita' frame per frame. Questa tinta scura all'angolo in alto a sinistra e' li' perche' restino leggibili su tutto — e' uno strumento di stampa sul video, non un gradiente di brand. */ .hvid::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom right, rgba(0,0,0,.58) 0%, rgba(0,0,0,.24) 30%, rgba(0,0,0,0) 58%); } /* il footage e' gia' monocromo nel file: il filtro non deve piu' togliere il colore, altrimenti si annulla anche l'ultimo segmento, che e' a colori (fondale rosso). Qui si corregge solo il contrasto. */ .hvid__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: contrast(1.08) brightness(1.02); } .hvid__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.18); z-index: 3; transition: opacity .8s var(--e); } .hvid__prog i { display: block; height: 100%; width: 0; background: rgba(255,255,255,.85); } /* LO SLIDER dentro la banda: la terza fase. Le immagini occupano tutta la cornice, e il contatore sta sul fondo, dentro la banda. */ .hvid__reel { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 1.4s var(--e); } .hvid.is-reel .hvid__reel { opacity: 1; pointer-events: auto; } .hvid__reel .slider__stage { position: absolute; inset: 0; background: var(--ink); } .hvid__reel .slider__track { height: 100%; } .hvid__reel .slide { height: 100%; aspect-ratio: auto; } .hvid__reel .slide img { object-position: center 38%; } /* sullo slider la velatura copre tutta la banda: gli scatti vanno dal nero (33/255) al bianco (195/255) e la scritta bianca si legge su tutti. */ .hvid.is-reel::before { background: rgba(0,0,0,.34); } /* la ciappa, il timecode e il progresso sono cose del video: quando la foto prende il posto spariscono, e con loro la pellicola. */ .hvid__slate, .hvid__time { transition: opacity .8s var(--e); } .hvid.is-photo .hvid__slate, .hvid.is-photo .hvid__time, .hvid.is-reel .hvid__slate, .hvid.is-reel .hvid__time { opacity: 0; } .hvid.is-photo .hvid__prog, .hvid.is-reel .hvid__prog { opacity: 0; } /* il contatore e i segni di posizione stanno sul fondo della banda, in bianco sulla velatura scura: e' la grammatica del casting book portata dentro la pellicola. */ .hvid__reel .slider__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 12px clamp(18px, 3vw, 34px) 16px; } .hvid__reel .slider__count { color: var(--paper); } .hvid__reel .slider__dots button { background: rgba(255,255,255,.3); } .hvid__reel .slider__dots button.on { background: var(--paper); } .hvid__reel .slider__bar .lbl { color: rgba(255,255,255,.72); } /* l'identita': il logo ufficiale dell'agenzia — "ICON." con "AGENCY" sotto, l'asset vero — scritto direttamente sulla pellicola, senza foglio bianco sotto, spinto a sinistra. Sotto il logo il claim, in un font molto sottile (Mulish 200): e' anche l'h1 della pagina. Il footage sotto e' quasi tutto su fondali chiari: e' la condizione perche' il nero resti nero. */ .hvid__id { position: absolute; top: 0; bottom: 0; z-index: 4; width: min(clamp(220px, 30vw, 480px), 92%); left: clamp(22px, 4vw, 62px); transform: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; pointer-events: none; transition: left 1.5s var(--e), transform 1.5s var(--e), width 1.5s var(--e); } /* NELLA FASE FOTO E SLIDER la scritta va al CENTRO della banda: si sposta con left + transform, perche' lo spostamento sia continuo e non un salto. */ .hvid.is-center .hvid__id { left: 50%; transform: translateX(-50%); width: min(clamp(190px, 23vw, 340px), 92%); align-items: center; } .hvid__logo { display: block; width: 100%; height: auto; } /* Niente alone bianco: la scritta sta sul nero e sul fondo chiaro della fotografia, si legge da se'. */ .hvid__h1 { margin: clamp(12px, 1.5vw, 20px) 0 0; font-family: var(--f-body); font-weight: 200; font-size: clamp(.78rem, 1.12vw, 1.02rem); line-height: 1.5; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--ink); } /* sullo slider la scritta e' bianca: la velatura scura la tiene leggibile su uno scatto chiaro come su uno scatto scuro. Il logo, che e' un asset nero, si inverte con lo stesso filtro della claim. */ .hvid.is-reel .hvid__h1 { color: var(--paper); } .hvid.is-reel .hvid__logo { filter: invert(1); } .hvid__toggle { position: absolute; right: 22px; top: 20px; z-index: 5; width: 34px; height: 34px; display: grid; place-items: center; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.42); border-radius: 50%; cursor: pointer; padding: 0; transition: border-color .3s, background .3s; } .hvid__toggle:hover { background: rgba(0,0,0,.62); border-color: rgba(255,255,255,.85); } .hvid__toggle:focus-visible { outline: 1px solid #fff; outline-offset: 3px; } .hvid__ico { position: relative; width: 8px; height: 10px; } .hvid__ico::before, .hvid__ico::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; transition: all .18s var(--e); } .hvid__ico::before { left: 0; } .hvid__ico::after { right: 0; } .hvid.is-paused .hvid__ico::before { left: 0; top: 0; bottom: 0; width: 0; height: 0; background: none; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .hvid.is-paused .hvid__ico::after { display: none; } /* la ciappa di apertura e il timecode, in alto a sinistra: la banda e' una pellicola */ .hvid__slate { position: absolute; left: 24px; top: 20px; z-index: 4; font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.78); text-shadow: 0 1px 4px rgba(0,0,0,.55); } .hvid__time { position: absolute; left: 24px; top: 40px; z-index: 4; font-size: .6rem; font-weight: 600; letter-spacing: .16em; color: rgba(255,255,255,.78); font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0,0,0,.55); } /* la promessa e l'uscita, in testa al blocco della dichiarazione */ .statement__top { padding-bottom: clamp(26px, 3.4vh, 46px); margin-bottom: clamp(32px, 4.4vh, 60px); border-bottom: 1px solid var(--rule); } .statement__top .lead { margin-top: 0; max-width: 46ch; } .statement__top .hero__cta { margin-top: 20px; } /* --- 7b. LE BANDE NERE -------------------------------------------------- */ /* Il separatore di sezione, come sul sito live: una fascia nera piena, da bordo a bordo, con il titolo in Bebas bianco e centrato. */ .band { background: var(--ink); color: var(--paper); text-align: center; padding-block: clamp(15px, 1.75vw, 25px); } .band__t { font-family: var(--f-disp); font-weight: 400; font-size: clamp(1.42rem, 2.15vw, 2.15rem); line-height: 1; letter-spacing: .1em; text-transform: uppercase; } /* la stessa fascia, dentro una colonna: fa da testata al blocco di contatto */ .band--inset { padding-block: clamp(9px, 1vw, 13px); } .band--inset .band__t { font-size: clamp(1.14rem, 1.55vw, 1.5rem); letter-spacing: .12em; } /* la sezione che segue una banda ha il suo respiro, ma non tutto */ .sec--band { padding-top: clamp(38px, 5vh, 68px); } /* --- 7c. LO SLIDER DELL'HERO -------------------------------------------- */ /* Le immagini che passano una dopo l'altra: dieci scatti del corpus dell'agenzia, a tutta pagina. Il mouse li trascina, da soli cambiano ogni 4,2 secondi, e sotto c'e' il contatore e la riga dei segni di posizione — la grammatica del casting book. */ .slider { border-bottom: 1px solid var(--rule); } .slider__stage { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--rule); } .slider__stage::-webkit-scrollbar { display: none; } .slider__track { display: flex; width: 100%; gap: 1px; } .slider__track.drag { cursor: grabbing; } .slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); } .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } .slider__bar { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); padding-block: 14px 16px; } .slider__count { font-family: var(--f-disp); font-size: .88rem; letter-spacing: .14em; color: var(--ink); white-space: nowrap; } .slider__count b { font-weight: 400; } .slider__dots { display: flex; gap: 6px; flex: 1 1 auto; } .slider__dots button { flex: 1 1 0; height: 1px; background: var(--rule); padding: 0; transition: background .35s var(--e); } .slider__dots button.on { background: var(--ink); } /* la dichiarazione: due colonne, filetto, respiro */ .statement { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; } .statement__l { grid-column: span 6; } .statement__r { grid-column: 8 / 13; } .statement__l .hero__cta { margin-top: 34px; } /* il titolo della dichiarazione e l'azione di iscrizione sulla stessa riga: e' la grammatica del casting book (titolo a sinistra, comando a destra), come nelle intestazioni di sezione. "Become a model" sta accanto a "From the first glance": la porta si apre li'. */ .statement__hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .statement__hd .hero__cta { margin-top: 0; margin-bottom: 6px; white-space: nowrap; } .hero__rule { width: 54px; height: 1px; background: var(--ink); margin-block: 26px 26px; } .hero__lead { margin-top: 0; } .hero__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 32px; font-size: var(--t-lbl); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--ink); transition: opacity .3s; } .hero__cta:hover { opacity: .55; } .hero__cta span { transition: transform .4s var(--e); } .hero__cta:hover span { transform: translateX(6px); } /* la banda dei clienti: i loghi reali dell'agenzia, in corsa. Non sono nomi: sono i quattro marchi del carousel "BRANDS" del sito live, ritagliati in trasparente. L'etichetta a sinistra resta ferma, i loghi scorrono a destra: e' la firma tipografica di un casting book. */ .strip { display: flex; align-items: stretch; border-block: 1px solid var(--rule); overflow: hidden; padding-block: clamp(13px, 1.5vw, 20px); } .strip__label { flex: 0 0 auto; display: flex; align-items: center; padding-inline: var(--gut) clamp(20px, 3vw, 46px); border-right: 1px solid var(--rule); background: var(--paper); position: relative; z-index: 2; font-family: var(--f-disp); font-size: .96rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } /* il ritaglio: i loghi escono da dietro l'etichetta e spariscono a destra */ .strip__viewport { flex: 1 1 auto; overflow: hidden; } .strip__track { display: flex; align-items: center; gap: clamp(30px, 4.4vw, 76px); width: max-content; padding-left: clamp(30px, 4.4vw, 76px); animation: slide var(--dur, 40s) linear infinite; } .strip:hover .strip__track { animation-play-state: paused; } .strip__track img { display: block; height: clamp(26px, 2.9vw, 40px); width: auto; max-width: calc(clamp(26px, 2.9vw, 40px) * 2.9); object-fit: contain; opacity: .72; transition: opacity .35s var(--e); } .strip__track img:hover { opacity: 1; } @keyframes slide { to { transform: translateX(-50%); } } /* --- 8. CTA ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 13px; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: 14px 24px; border: 1px solid var(--ink); transition: background .35s var(--e), color .35s var(--e); } .btn:hover { background: var(--ink); color: var(--paper); } .btn--solid { background: var(--ink); color: var(--paper); } .btn--solid:hover { background: var(--paper); color: var(--ink); } .btn__arrow { transition: transform .4s var(--e); } .btn:hover .btn__arrow { transform: translateX(5px); } /* --- 9. BOARD (il casting book) ---------------------------------------- */ /* griglia a 5 colonne come Select, ma le celle sono separate da un filetto da 1px e non da un vuoto: e' un foglio, non un mosaico. */ .board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .cell { position: relative; background: var(--paper); } .cell__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); } .cell__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; filter: grayscale(1) contrast(1.03); transition: filter .7s var(--e), transform 1.1s var(--e); } .cell:hover .cell__media img { filter: grayscale(0) saturate(.75) contrast(1); transform: scale(1.025); } .cell__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 13px 16px; } .cell__idx { font-family: var(--f-disp); font-size: .8rem; letter-spacing: .1em; color: var(--ink-42); } .cell__name { font-family: var(--f-disp); font-size: var(--t-nm); letter-spacing: .045em; text-transform: uppercase; line-height: 1.12; } .cell:hover .cell__name { text-decoration: underline; text-underline-offset: 4px; } /* indice alfabetico sticky, in fondo: il device di Select */ .az { position: sticky; bottom: 0; z-index: 200; display: flex; justify-content: center; align-items: center; gap: clamp(7px, 1.15vw, 19px); padding: 13px var(--gut); background: var(--paper); border-top: 1px solid var(--rule); } .az button { font-size: .95rem; letter-spacing: .04em; color: var(--ink); padding: 2px 1px; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; } .az button.off { color: rgba(0,0,0,.17); cursor: default; } .az button:not(.off):hover { border-bottom-color: var(--ink); } .az button.on { border-bottom-color: var(--ink); } /* --- 10. SCHEDE UFFICIALI ---------------------------------------------- */ /* le 18 schede sono l'opera originale dell'agenzia: si mostrano come documenti, non come immagini in griglia. */ .cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .card { background: var(--paper); padding: 14px; } .card img { width: 100%; height: auto; aspect-ratio: 900 / 1268; filter: grayscale(1); transition: filter .7s var(--e); } .card:hover img { filter: grayscale(0) saturate(.75); } /* --- 11. COVERS (striscia orizzontale dei lavori) ---------------------- */ .covers { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .covers::-webkit-scrollbar { display: none; } .covers__track { display: flex; gap: 1px; background: var(--rule); width: max-content; } .covers__track.drag { cursor: grabbing; } .cover { width: clamp(230px, 25vw, 330px); flex: none; background: var(--paper); padding: 12px; } .cover__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); } .cover__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); transition: filter .7s var(--e), transform 1.1s var(--e); } .cover:hover .cover__media img { filter: grayscale(0) saturate(.75) contrast(1); transform: scale(1.03); } .cover__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 11px; margin-top: 11px; border-top: 1px solid var(--rule); } .cover__client { font-family: var(--f-disp); font-size: 1rem; letter-spacing: .045em; text-transform: uppercase; } .cover__type { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-42); } .covers__mark { display: inline-flex; align-items: center; gap: 8px; } /* --- 12. LAVORI (indice a schede) -------------------------------------- */ .works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .work { background: var(--paper); padding: 16px 16px 22px; display: block; } .work:hover .work__client { text-decoration: underline; text-underline-offset: 4px; } .work__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); margin-bottom: 13px; } .work__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); transition: filter .7s var(--e), transform 1.1s var(--e); } .work:hover .work__media img { filter: grayscale(0) saturate(.75) contrast(1); transform: scale(1.03); } /* progetti senza materiale fotografico pubblicato: cella solo tipografica. niente immagini inventate. */ .work__media--type, .cover__media--type { display: flex; align-items: center; justify-content: center; padding: 22px; background: var(--paper-2); } .work__media--type span, .cover__media--type span { font-family: var(--f-disp); font-size: clamp(1.5rem, 2.8vw, 2.3rem); letter-spacing: .05em; text-transform: uppercase; text-align: center; color: var(--ink-58); } .work__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .work__client { font-family: var(--f-disp); font-size: 1.08rem; letter-spacing: .045em; text-transform: uppercase; } .work__type { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-42); text-align: right; white-space: nowrap; } /* --- 13. MOOD ------------------------------------------------------------ */ /* Una sola riga orizzontale che scorre da sinistra a destra. Era una griglia a 12 colonne: le foto si impilavano e la home diventava lunghissima. Ora e' una pista: celle di larghezza fissa, filetto 1px fra una foto e l'altra (come nel board), e si trascina col mouse. */ .mood { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: var(--rule); border: 1px solid var(--rule); } .mood::-webkit-scrollbar { display: none; } .mood__track { display: flex; gap: 1px; width: max-content; } .mood__track.drag { cursor: grabbing; } .mood__c { position: relative; flex: 0 0 auto; background: var(--paper); width: clamp(205px, 21vw, 310px); aspect-ratio: 4 / 5; overflow: hidden; } .mood__c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); transition: transform 1.1s var(--e), filter .7s var(--e); } .mood__c:hover img { transform: scale(1.03); filter: grayscale(0) saturate(.75) contrast(1); } /* --- 14. CHI SIAMO ------------------------------------------------------- */ .about { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 4vw, 72px); } .about__text { grid-column: span 6; } .about__side { grid-column: 8 / 13; } .about__lockup { margin-bottom: 26px; } .about__lockup img { width: min(62%, 330px); height: auto; } .about__line { display: flex; gap: 22px; padding-block: 13px; border-top: 1px solid var(--rule); font-size: .88rem; } .about__line b { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-42); min-width: 96px; padding-top: 3px; } .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .pillar { background: var(--paper); padding: 26px 22px 30px; } .pillar h3 { font-family: var(--f-disp); font-weight: 400; font-size: 1.32rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 9px; } .pillar p { font-size: .87rem; color: var(--ink-58); } /* --- 15. NUMERI --------------------------------------------------------- */ /* il numero dei talent sta sotto "Selected work" (vedi .talentcount): qui restano i numeri di quadro. */ .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .numcell { background: var(--paper); padding: 26px 22px 30px; } .numcell .num { display: block; } .numcell .lbl { display: block; margin-top: 10px; } /* il 39 sotto "Selected work": numero grande, come una testata di classifica. Non e' un contatore animato: e' un dato, si legge subito. */ .talentcount { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 30px); margin: 4px 0 clamp(18px, 2.4vw, 32px); padding-block: clamp(14px, 2vw, 26px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .talentcount__n { font-family: var(--f-disp); font-weight: 400; font-size: clamp(58px, 9.5vw, 132px); line-height: .82; letter-spacing: .01em; } .talentcount__l { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-42); } /* --- 16. CONTATTO ------------------------------------------------------- */ /* L'impaginato e' quello del sito live: la fascia nera con il titolo, i tab centrati, il paragrafo centrato, e sotto il modulo. */ .tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--rule); margin-bottom: 38px; } .tab { font-family: var(--f-disp); font-size: 1.12rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-42); padding-bottom: 11px; border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color .3s, border-color .3s; } .tab.on { color: var(--ink); border-bottom-color: var(--ink); } /* i tab centrati del live: senza filetto sotto, la barra resta un fermo segnale e il tab attivo si stacca con la sottolineatura. */ .tabs--center { justify-content: center; border-bottom: 0; gap: clamp(22px, 3.2vw, 44px); } .tabs--center .tab { font-size: clamp(1.05rem, 1.5vw, 1.42rem); letter-spacing: .07em; padding-bottom: 9px; } /* il blocco di contatto, a TUTTA PAGINA sotto l'hero: la fascia nera fa da testata (come sul live) e sotto tutto e' centrato — tab, paragrafo, modulo. */ .wwu { display: flex; flex-direction: column; align-items: center; } .wwu__note { margin-top: 0; text-align: center; } .wwu .tabs--center { margin-top: 26px; margin-bottom: 26px; } .wwu__lead { text-align: center; max-width: 52ch; margin: 0 auto 30px; font-size: var(--t-lead); font-weight: 300; line-height: 1.6; color: var(--ink-80); } .wwu .form { max-width: 920px; margin-inline: auto; } .form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; max-width: 820px; } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-42); } .field input, .field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--rule-2); color: var(--ink); font-family: var(--f-body); font-size: 1rem; font-weight: 300; padding: 9px 2px; outline: none; transition: border-color .3s; } .field input:focus, .field textarea:focus { border-bottom-color: var(--ink); } .field--full { grid-column: 1 / -1; } .form .field--full > .btn { align-self: flex-start; } .consent { display: flex; gap: 12px; align-items: flex-start; font-size: .8rem; color: var(--ink-58); } .consent input { accent-color: var(--ink); width: 15px; height: 15px; margin-top: 3px; flex: none; } /* il modulo come sul live: i campi hanno la SCATOLA (bordo 1px) e dentro il testo di esempio, l'etichetta sta sopra in lettere normali con l'asterisco, e il bottone SEND e' nero e centrato. */ .form--live { gap: 20px 22px; } .form--live .field { gap: 6px; } .form--live .field > label { font-size: .95rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); } .form--live .field > label:not(.consent)::after { content: " *"; color: var(--ink); } .form--live .consent::after { content: none; } .form--live input[type="text"], .form--live input[type="tel"], .form--live input[type="email"] { width: 100%; background: var(--paper); border: 1px solid var(--ink); border-radius: 0; color: var(--ink); font-family: var(--f-body); font-size: 1rem; font-weight: 300; padding: 11px 14px; outline: none; transition: box-shadow .3s var(--e), border-color .3s var(--e); } .form--live input::placeholder { color: var(--ink-42); opacity: 1; } .form--live input:focus { box-shadow: inset 0 0 0 1px var(--ink); } /* IL CAMPO FOTO del modulo casting ("Your Photo"): la stessa scatola degli altri campi. Il pulsante nativo del browser dice "SCEGLI FILE" o "CHOOSE FILE" secondo la lingua del visitatore: qui il campo e' costruito a mano (input invisibile sopra la scatola + bottone nero + didascalia), cosi' il sito resta in inglese ovunque. */ .form--live .upload { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 9px 12px; } .form--live .upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; padding: 0; border: 0; } .form--live .upload:focus-within { box-shadow: inset 0 0 0 1px var(--ink); } .form--live .upload__btn { font-family: var(--f-disp); font-size: .88rem; letter-spacing: .12em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 7px 14px; white-space: nowrap; } .form--live .upload__txt { font-family: var(--f-body); font-size: .88rem; font-weight: 300; color: var(--ink-42); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .form--live .consent { font-size: .88rem; color: var(--ink); line-height: 1.5; } .form__send { display: flex; justify-content: center; } .form .field--full.form__send > .btn { align-self: center; } .btn--send { font-family: var(--f-disp); font-size: 1.08rem; letter-spacing: .14em; text-transform: uppercase; min-width: 220px; justify-content: center; padding: 12px 40px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); } .btn--send:hover { background: var(--paper); color: var(--ink); } /* --- 16b. LA TABELLA DEI CLIENTI ----------------------------------------- */ /* Il foglio: quattro colonne, filetto 1px fra una cella e l'altra. Le celle respirano (il nome non tocca il filetto) e il nome e' nero. Il bordo lo disegna ogni cella a destra e in basso: cosi' l'angolo vuoto dell'ultima riga resta bianco, senza lo zeta grigio di una griglia aperta. */ .cltable { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--paper); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); } .cltable__c { background: var(--paper); padding: 15px 18px 17px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .cltable__c .nm { color: var(--ink); font-size: var(--t-nm); letter-spacing: .05em; } /* --- 17. FOOTER (invertito: l'unico momento di nero pieno) ------------ */ /* Il filetto bianco in alto separa il footer dal blocco nero che lo precede (il "come arrivare" in fondo alla home): due neri che si toccano sarebbero un unico blocco informe. Il filetto e' bianco, non grigio: e' la linea di taglio fra un foglio e l'altro. */ .ftr { background: var(--ink); color: var(--paper); padding-block: 54px 30px; border-top: 1px solid var(--paper); } .ftr__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 48px); } .ftr__mark { grid-column: span 4; } .ftr__mark img { width: clamp(150px, 21vw, 290px); height: auto; } .ftr__col { grid-column: span 2; } .ftr__col h4 { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 12px; } .ftr__col a, .ftr__col p { display: block; font-size: .86rem; font-weight: 300; color: rgba(255,255,255,.82); padding-block: 3px; } .ftr__col a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; } .ftr__bottom { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--rule-inv); font-size: var(--t-lbl); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.42); } /* --- 18. PAGINA INTERNA ------------------------------------------------- */ .ph { padding-top: clamp(38px, 6vh, 76px); } .ph__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); margin-bottom: 34px; } .crumb { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-42); } .crumb a:hover { color: var(--ink); } .crumb span { color: var(--ink); } .gal { columns: 3; column-gap: var(--gut); } .gal img { width: 100%; margin-bottom: var(--gut); break-inside: avoid; filter: grayscale(1); transition: filter .7s var(--e); } .gal img:hover { filter: grayscale(0) saturate(.75); } .back { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-lbl); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--ink); } .back:hover { opacity: .55; } /* --- 19. REVEAL --------------------------------------------------------- */ .rv { opacity: 0; transform: translateY(18px); transition: opacity .85s var(--e), transform .85s var(--e); } .rv.in { opacity: 1; transform: none; } .rv-d1 { transition-delay: .07s } .rv-d2 { transition-delay: .14s } .rv-d3 { transition-delay: .21s } .rv-d4 { transition-delay: .28s } /* --- 20. HOW TO REACH US ------------------------------------------------- */ /* La sezione che risponde a "come si arriva qui". Quattro tavole: dove siamo, i mezzi pubblici, il percorso da calcolare, l'auto. Il linguaggio e' quello del casting book: il foglio bianco diviso da filetti da 1px, i numeri grandi, niente colore. La mappa e' un'istruzione OpenStreetMap (nessuna API key) e sta in GRIGIO come tutta la fotografia del sito: torna a colori al passaggio del mouse. */ /* 1 — DOVE SIAMO */ .reach { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; } .reach__a { grid-column: span 5; } .reach__b { grid-column: 7 / 13; } .reach__cx { font-family: var(--f-disp); font-size: 1.04rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-58); margin-top: 10px; } .reach__lines { margin-top: 26px; border-top: 1px solid var(--rule); } .reach__line { display: flex; gap: 22px; padding-block: 12px; border-bottom: 1px solid var(--rule); font-size: .88rem; } .reach__line b { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-42); min-width: 96px; padding-top: 3px; } .reach__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* la mappa: grigia come le fotografie, a colori al passaggio del mouse */ .reach__map { margin: 0; border: 1px solid var(--rule); } .reach__map iframe { display: block; width: 100%; height: clamp(280px, 42vh, 420px); border: 0; filter: grayscale(1) contrast(1.05); transition: filter .7s var(--e); } .reach__map:hover iframe { filter: grayscale(0) saturate(.75) contrast(1); } .reach__keys { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 12px 14px; border-top: 1px solid var(--rule); background: var(--paper); } .reach__keys span { display: flex; align-items: baseline; gap: 9px; font-size: .78rem; color: var(--ink-58); } .reach__keys b { font-family: var(--f-disp); font-size: .92rem; color: var(--ink); } /* lo slot della foto dell'ingresso al civico 36. La foto non e' disponibile: al suo posto sta un segnaposto tipografico — non si inventa una fotografia. */ .reach__shot { margin: 18px 0 0; } .reach__shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1); border: 1px solid var(--rule); } .reach__shot figcaption { padding-top: 11px; font-size: var(--t-lbl); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-42); } .reach__slot { display: flex; flex-direction: column; justify-content: center; gap: 7px; aspect-ratio: 4 / 3; padding: clamp(18px, 2.4vw, 30px); background: var(--paper-2); border: 1px dashed var(--rule-2); } .reach__slotn { font-family: var(--f-disp); font-size: .82rem; letter-spacing: .16em; color: var(--ink-42); } .reach__slott { font-family: var(--f-disp); font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: .04em; text-transform: uppercase; line-height: 1; } .reach__slots { font-size: .9rem; font-weight: 300; color: var(--ink-58); } .reach__slotp { margin-top: 8px; font-size: var(--t-lbl); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-42); } /* 2 — MEZZI PUBBLICI: il tram 2 in evidenza, la banda nera */ .reach__tram { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(18px, 3vw, 44px); align-items: center; background: var(--ink); color: var(--paper); padding: clamp(20px, 2.6vw, 34px) clamp(18px, 2.6vw, 38px); } .lbl--inv { color: rgba(255,255,255,.5); } .reach__tramL { display: flex; flex-direction: column; align-items: center; gap: 8px; } .reach__num { font-family: var(--f-disp); font-weight: 400; font-size: clamp(3rem, 6.4vw, 5.2rem); line-height: 1; letter-spacing: .02em; color: var(--paper); } .reach__tramR h3 { margin-bottom: 9px; } .reach__tramR p { font-size: .95rem; font-weight: 300; color: rgba(255,255,255,.82); max-width: 62ch; } .reach__tramR b { color: var(--paper); font-weight: 600; } .reach__tramW { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-left: clamp(16px, 2.2vw, 32px); border-left: 1px solid var(--rule-inv); } .reach__walk { font-family: var(--f-disp); font-weight: 400; font-size: clamp(2.1rem, 3.8vw, 3.1rem); line-height: 1; color: var(--paper); } /* la metro piu' vicina */ .reach__metro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 30px; margin-top: clamp(18px, 2.2vw, 28px); padding-block: 14px; border-block: 1px solid var(--rule); } .reach__metros { display: flex; flex-wrap: wrap; gap: 8px 34px; } .reach__metros li { display: flex; align-items: baseline; gap: 10px; } .reach__metros b { font-family: var(--f-disp); font-size: 1rem; letter-spacing: .04em; word-spacing: .16em; text-transform: uppercase; } .reach__metros li > span:not(.lbl) { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); padding: 1px 7px; } /* la tabella dei percorsi */ .reach__tbl { margin-top: clamp(26px, 3vw, 42px); } .rt__tr { display: grid; grid-template-columns: minmax(132px, 1fr) 2.5fr minmax(92px, .7fr); gap: 0 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .rt__tr--h { border-bottom: 1px solid var(--ink); padding-bottom: 9px; } .rt__tr--h span { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-42); } .rt__from { font-family: var(--f-disp); font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase; } .rt__route { font-size: .9rem; color: var(--ink-58); } .rt__time { font-family: var(--f-disp); font-size: .98rem; letter-spacing: .06em; text-align: right; } /* 3 — CALCOLA IL PERCORSO */ .reach__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .reach__navb { display: flex; flex-direction: column; gap: 10px; background: var(--paper); padding: clamp(20px, 2.2vw, 28px) clamp(18px, 2vw, 24px) clamp(18px, 2vw, 22px); transition: background .35s var(--e); } .reach__navb:hover { background: var(--ink); } .reach__navb:hover .lbl { color: rgba(255,255,255,.55); } .reach__navb:hover .reach__navt { color: var(--paper); } .reach__navb:hover .reach__navf { color: rgba(255,255,255,.72); } .reach__navb:hover .btn__arrow { color: var(--paper); transform: translateX(6px); } .reach__navt { font-family: var(--f-disp); font-size: 1.14rem; letter-spacing: .04em; text-transform: uppercase; } .reach__navf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; font-size: var(--t-lbl); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-42); } .reach__lnk { border-bottom: 1px solid var(--rule-2); } .reach__lnk:hover { border-bottom-color: var(--ink); } /* 4 — IN AUTO */ .reach__car { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; } .reach__carT { grid-column: span 5; } .reach__park { grid-column: 7 / 13; } .reach__parks { margin-top: 14px; border-top: 1px solid var(--rule); } .pk { display: grid; grid-template-columns: 1.25fr 1.35fr .95fr .55fr; gap: 5px 18px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: baseline; font-size: .86rem; } .pk__w { font-family: var(--f-disp); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; } .pk__k { color: var(--ink-58); } .pk__f { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .pk__d { font-family: var(--f-disp); font-size: .92rem; letter-spacing: .06em; text-align: right; } .pk__n { grid-column: 1 / -1; font-size: .8rem; color: var(--ink-42); } .reach__note { margin-top: 16px; font-size: .8rem; color: var(--ink-42); } /* i dati societari, in fondo al footer */ .ftr__legal { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rule-inv); font-size: var(--t-lbl); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); } /* --- 21. CASE STUDY ------------------------------------------------------ */ /* Il case study e' un foglio di casting: dati in alto, descrizione, film, galleria. Un filetto da 1px separa ogni casella, come nel board. */ .cs__hero { background: var(--paper-2); border-bottom: 1px solid var(--rule); } .cs__hero img { display: block; width: 100%; height: clamp(320px, 62vh, 720px); object-fit: cover; filter: grayscale(1) contrast(1.04); transition: filter .9s var(--e); } .cs__hero:hover img { filter: grayscale(0) saturate(.75) contrast(1); } /* un ritratto verticale dentro una cornice larga si taglia: si tiene la parte alta, cosi' la faccia resta dentro. */ .cs__hero--portrait img { object-position: center 20%; } /* il foglio dati: quattro caselle divise da filetti */ .cs__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 42px; } .cs__fact { background: var(--paper); padding: 16px 18px 20px; } .cs__k { font-size: var(--t-lbl); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-42); margin-bottom: 9px; } .cs__k--inv { color: rgba(255,255,255,.45); } .cs__v { font-size: .92rem; line-height: 1.45; } .cs__v a { border-bottom: 1px solid var(--rule-2); } .cs__v a:hover { border-bottom-color: var(--ink); } .cs__lead { margin-bottom: 0; } /* il film: banda nera, come le altre fasce del sito */ .cs__filmwrap { background: var(--ink); color: var(--paper); } .cs__filmhead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 22px; } .cs__filmtitle { font-family: var(--f-disp); font-size: var(--t-h2); letter-spacing: .03em; text-transform: uppercase; } .cs__filmfoot { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-top: 18px; flex-wrap: wrap; } .cs__filmopen { font-size: var(--t-lbl); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--paper); border-bottom: 1px solid rgba(255,255,255,.4); } .cs__filmopen:hover { border-bottom-color: var(--paper); } .cs__note { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45); } /* il player: la copertina del lavoro con il play in mezzo. Il video parte al clic (niente embed che si carica da solo, niente cookie prima del play). */ .cs__player { position: relative; aspect-ratio: 16 / 9; background: #101010; overflow: hidden; border: 1px solid rgba(255,255,255,.16); } .cs__player img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); opacity: .72; transition: filter .8s var(--e), opacity .8s var(--e); } .cs__player:hover img { filter: grayscale(0) saturate(.75) contrast(1); opacity: .9; } /* la copertina del film e' verticale (4:5): dentro il player 16:9 si tiene la parte alta, dove c'e' la faccia. */ .cs__player--portrait img { object-position: center 20%; } .cs__player iframe { display: block; width: 100%; height: 100%; border: 0; } .cs__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 26px); background: none; border: 0; padding: 0; cursor: pointer; color: var(--paper); font: inherit; } .cs__playicon { width: clamp(58px, 7vw, 84px); height: clamp(58px, 7vw, 84px); border: 1px solid rgba(255,255,255,.65); border-radius: 50%; display: grid; place-items: center; flex: none; transition: background .35s var(--e), border-color .35s var(--e); } .cs__playicon::after { content: ""; width: 0; height: 0; margin-left: 6px; border-left: 17px solid var(--paper); border-top: 11px solid transparent; border-bottom: 11px solid transparent; transition: border-color .35s var(--e); } .cs__play:hover .cs__playicon { background: var(--paper); border-color: var(--paper); } .cs__play:hover .cs__playicon::after { border-left-color: var(--ink); } .cs__playlabel { font-size: var(--t-lbl); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } .cs__play:focus-visible { outline: 2px solid var(--paper); outline-offset: -6px; } /* la navigazione fra un caso e l'altro */ .cs__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-top: none; padding: 0; } .cs__navlink { background: var(--paper); padding: 18px 20px 22px; display: block; } .cs__navlink:hover .cs__navt { text-decoration: underline; text-underline-offset: 4px; } .cs__navlink--next { text-align: right; } .cs__navk { font-size: var(--t-lbl); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-42); display: block; margin-bottom: 6px; } .cs__navt { font-family: var(--f-disp); font-size: 1.12rem; letter-spacing: .04em; text-transform: uppercase; } /* la scheda del case study nell'indice lavori: sotto la foto, i modelli */ .work__models { margin-top: 8px; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-42); } .work--case:hover .work__models { color: var(--ink-80); } /* l'indice di quello che resta: nomi in filetto, senza foto */ .aindex { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gut); } .aindex li a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rule); } .aindex li a:hover .aindex__c { text-decoration: underline; text-underline-offset: 4px; } .aindex__c { font-family: var(--f-disp); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; } .aindex__t { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-42); text-align: right; white-space: nowrap; } /* --- 22. LA LANDING DELLE CAMPAGNE -------------------------------------- */ /* La pagina /campaigns/ prende l'architettura della landing di Mood Management (l'ero a tutta pagina con il cursore delle campagne, i clienti, l'agenzia, la banda nera dei due reparti, la campagna in evidenza, il casting, i contatti) e la porta nel sistema del sito: bianco e nero, Bebas Neue, filetti da 1px. Nove sezioni, nell'ordine in cui uno arriva al casting. */ .cmp-kicker { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-42); } /* l'ero: la banda a tutta pagina, con le campagne che passano ---------- */ .cmp-hero { position: relative; height: clamp(460px, 82vh, 820px); background: var(--ink); color: var(--paper); overflow: hidden; } .cmp-hero__stage { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; } .cmp-hero__stage::-webkit-scrollbar { display: none; } .cmp-hero__track { display: flex; width: 100%; height: 100%; } .cmp-hero__track.drag { cursor: grabbing; } .cmp-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; overflow: hidden; } .cmp-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .9s var(--e); } /* la fotografia e' in bianco e nero al riposo: al passaggio del mouse torna a colori, come in tutto il sito. Il colore torna solo con un puntatore vero (hover: hover): su un telefono il "hover" resta appiccicato dopo il tocco e la foto rimarrebbe a colori per sempre. */ @media (hover: hover) { .cmp-hero:hover .cmp-slide img { filter: grayscale(0) saturate(.75) contrast(1); } .cmp-cat:hover .cmp-cat__ph img { filter: grayscale(0) saturate(.75) contrast(1); transform: scale(1.02); } .cmp-feature:hover .cmp-feature__media img { filter: grayscale(0) saturate(.75) contrast(1); } .cmp-strip__cell:hover .cmp-strip__media img { filter: grayscale(0) saturate(.75) contrast(1); transform: scale(1.03); } } /* la velatura: il testo bianco sta sopra la foto */ .cmp-hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.46) 46%, rgba(0,0,0,.10) 100%), linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 38%); } .cmp-hero__copy { position: absolute; z-index: 3; left: 0; right: 0; bottom: 96px; } .cmp-hero__copy .cmp-kicker { color: rgba(255,255,255,.72); } .cmp-hero__h1 { font-family: var(--f-disp); font-weight: 400; font-size: clamp(2.9rem, 7.4vw, 6.2rem); line-height: .9; letter-spacing: .01em; text-transform: uppercase; margin-top: 16px; } .cmp-hero__claim { font-size: var(--t-lead); font-weight: 300; margin-top: 18px; max-width: 44ch; color: rgba(255,255,255,.92); } .cmp-hero__sub { font-size: var(--t-body); margin-top: 6px; max-width: 44ch; color: rgba(255,255,255,.72); } /* il bottone dell'ero e' bianco: nero su nero sparirebbe */ .cmp-hero__cta { margin-top: 26px; background: var(--paper); color: var(--ink); border-color: var(--paper); } .cmp-hero__cta:hover { background: transparent; color: var(--paper); } /* la barra: il bottone di pausa, il contatore e i segni di posizione */ .cmp-hero__bar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); padding: 16px var(--gut); } .cmp-hero__count { font-family: var(--f-disp); font-size: .88rem; letter-spacing: .14em; white-space: nowrap; } .cmp-hero__count b { font-weight: 400; } .cmp-hero__dots { display: flex; gap: 6px; flex: 1 1 auto; } .cmp-hero__dots button { flex: 1 1 0; height: 1px; background: rgba(255,255,255,.28); padding: 0; transition: background .35s var(--e); } .cmp-hero__dots button.on { background: var(--paper); } .cmp-hero__pause { font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--paper); white-space: nowrap; border: 1px solid rgba(255,255,255,.35); padding: 8px 12px; transition: border-color .3s var(--e), opacity .3s var(--e); } .cmp-hero__pause:hover { border-color: var(--paper); } .cmp-hero__pause[aria-pressed="true"] { opacity: .6; } /* i clienti: quattro loghi veri dell'agenzia ---------------------------- */ .cmp-clients { border-bottom: 1px solid var(--rule); padding-block: clamp(28px, 3.6vw, 52px); } .cmp-clients .cmp-kicker { text-align: center; margin-bottom: 26px; } .cmp-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 56px); align-items: center; } .cmp-logos img { display: block; width: 100%; height: clamp(34px, 4.4vw, 62px); object-fit: contain; justify-self: center; filter: grayscale(1); mix-blend-mode: multiply; opacity: .8; } /* l'agenzia: due colonne e la parola gigante a fondopagina ------------- */ .cmp-agency { position: relative; overflow: hidden; background: var(--paper); padding-block: clamp(58px, 7vw, 104px); } .cmp-ghost { position: absolute; left: -.04em; bottom: -.10em; z-index: 0; font-family: var(--f-disp); font-size: clamp(130px, 27vw, 400px); line-height: .8; letter-spacing: -.02em; color: rgba(0,0,0,.035); pointer-events: none; user-select: none; } .cmp-agency > .wrap { position: relative; z-index: 1; } .cmp-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 84px); align-items: start; } .cmp-agency__h2 { font-family: var(--f-disp); font-weight: 400; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; margin-top: 14px; } .cmp-intro__body { color: var(--ink-58); padding-top: 6px; } .cmp-intro__body p + p { margin-top: 18px; } /* la banda nera: i due reparti ------------------------------------------ */ .cmp-cats { background: var(--ink); color: var(--paper); padding-block: clamp(46px, 6vw, 86px); } .cmp-cats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); } .cmp-cat { border-top: 1px solid var(--rule-inv); padding-top: 22px; } .cmp-cat__num { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .26em; color: rgba(255,255,255,.5); } .cmp-cat__ph { margin: 20px 0 22px; aspect-ratio: 3 / 2; overflow: hidden; background: rgba(255,255,255,.06); } .cmp-cat__ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: grayscale(1) contrast(1.04); transition: filter .8s var(--e), transform 1.2s var(--e); } .cmp-cat__h3 { font-family: var(--f-disp); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1; letter-spacing: .02em; text-transform: uppercase; } .cmp-cat__p { margin-top: 12px; max-width: 44ch; color: rgba(255,255,255,.68); } .cmp-cat__link { display: inline-block; margin-top: 16px; font-size: var(--t-lbl); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.4); transition: opacity .3s var(--e); } .cmp-cat__link:hover { opacity: .6; } /* la campagna in evidenza ------------------------------------------------ */ .cmp-feature { padding-block: clamp(58px, 7vw, 104px); } .cmp-feature__kicker { margin-bottom: 2px; } .cmp-feature__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4.4vw, 76px); align-items: center; margin-top: 26px; } .cmp-feature__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); } .cmp-feature__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); transition: filter .8s var(--e); } .cmp-feature__title { font-family: var(--f-disp); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: .95; letter-spacing: .01em; text-transform: uppercase; } .cmp-feature__facts { margin-top: 10px; font-size: var(--t-lbl); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-42); } .cmp-feature__desc { margin-top: 20px; } .cmp-feature__models { margin-top: 18px; font-size: var(--t-body); color: var(--ink-58); } .cmp-feature__models b { font-weight: 600; color: var(--ink); letter-spacing: .04em; } .cmp-feature__film { margin-top: 26px; } .cmp-feature__film .cs__player { border-color: var(--rule); } .cmp-feature .btn { margin-top: 28px; } /* la striscia delle altre campagne --------------------------------------- */ .cmp-strip-sec { padding-bottom: clamp(58px, 7vw, 104px); } .cmp-strip { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .cmp-strip::-webkit-scrollbar { display: none; } .cmp-strip__track { display: flex; gap: 1px; background: var(--rule); width: max-content; } .cmp-strip__track.drag { cursor: grabbing; } .cmp-strip__cell { width: clamp(190px, 21vw, 270px); flex: none; background: var(--paper); padding: 12px; } .cmp-strip__cell:hover .cmp-strip__client { text-decoration: underline; text-underline-offset: 4px; } .cmp-strip__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); } .cmp-strip__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); transition: filter .7s var(--e), transform 1.1s var(--e); } .cmp-strip__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--rule); } .cmp-strip__client { font-family: var(--f-disp); font-size: .98rem; letter-spacing: .045em; text-transform: uppercase; } .cmp-strip__type { font-size: var(--t-lbl); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-42); white-space: nowrap; } /* il casting: fondo chiaro, il modulo ----------------------------------- */ .cmp-join { background: var(--paper-2); text-align: center; padding-block: clamp(58px, 7vw, 104px); } .cmp-join__h2 { font-family: var(--f-disp); font-weight: 400; font-size: clamp(2.3rem, 5.4vw, 4.6rem); line-height: .95; letter-spacing: .01em; text-transform: uppercase; margin-top: 14px; } .cmp-join__p { margin: 20px auto 0; max-width: 62ch; color: var(--ink-58); } .cmp-join .btn { margin-top: 28px; } /* i contatti: la testata e il riquadro nero ------------------------------ */ .cmp-contact { padding-block: clamp(58px, 7vw, 104px); } .cmp-contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 4.4vw, 76px); align-items: start; } .cmp-contact__h2 { font-family: var(--f-disp); font-weight: 400; font-size: clamp(2.3rem, 5.4vw, 4.6rem); line-height: .95; letter-spacing: .01em; text-transform: uppercase; margin-top: 14px; } .cmp-contact__claim { margin-top: 26px; max-width: 34ch; color: var(--ink-58); } .cmp-contact__card { background: var(--ink); color: var(--paper); padding: clamp(26px, 3vw, 40px); } .cmp-contact__card .cmp-kicker { color: rgba(255,255,255,.55); } .cmp-contact__name { font-family: var(--f-disp); font-weight: 400; font-size: 1.5rem; line-height: 1; letter-spacing: .03em; text-transform: uppercase; margin-top: 10px; } .cmp-contact__addr { margin-top: 14px; font-size: 1.02rem; line-height: 1.55; color: rgba(255,255,255,.86); } .cmp-contact__row { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); } .cmp-contact__row a { display: inline-block; margin-top: 6px; font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: .01em; overflow-wrap: anywhere; } .cmp-contact__row a:hover { text-decoration: underline; text-underline-offset: 5px; } .cmp-contact__card .btn { margin-top: 26px; width: 100%; justify-content: center; background: var(--paper); color: var(--ink); border-color: var(--paper); } .cmp-contact__card .btn:hover { background: var(--ink); color: var(--paper); } /* --- 23. LA LANDING IN STILE MOOD ---------------------------------------- */ /* Una seconda pagina, gemella della landing di Mood Management nell'architettura e nei testi, portata nel sistema ICON: Bebas Neue + Mulish, bianco e nero. Le foto sono in scala di grigi e il colore torna al passaggio del mouse, come in tutto il resto del sito. */ .lh { --lh-max: 1240px; } .lh-wrap { width: 100%; max-width: var(--lh-max); margin-inline: auto; padding-inline: 48px; } /* --- la testata: il logo a sinistra, quattro link a destra --------------- */ .lh-header { background: var(--paper); border-bottom: 1px solid var(--rule); } .lh-nav { display: flex; justify-content: flex-start; align-items: center; gap: 24px; padding-block: 24px; } .lh-mark img { display: block; width: 150px; height: auto; } .lh-links { display: flex; gap: 28px; align-items: center; margin-left: auto; } .lh-links a { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-decoration: none; } .lh-links a:hover { text-decoration: underline; text-underline-offset: 5px; } /* --- lo switch IT | EN: la lingua corrente spenta, l'altra un link ------- */ .lh-lang { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-disp); font-size: .84rem; letter-spacing: .14em; } .lh-lang__cur { color: var(--ink-42); } .lh-lang__sep { color: var(--ink-42); } .lh-lang__link { color: var(--ink); text-decoration: none; } .lh-lang__link:hover { text-decoration: underline; text-underline-offset: 5px; } /* --- l'ero: il cursore a tutta pagina ------------------------------------ */ .lh-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: 620px; background: var(--paper-2); } .lh-hero:before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.16)); } .lh-slider { position: absolute; inset: 0; display: flex; width: 100%; height: 100%; transform: translateX(-500%); animation: lh-slide 10s infinite cubic-bezier(.4,0,.2,1); will-change: transform; } .lh-slider img { display: block; flex: 0 0 100%; width: 100%; min-width: 100%; height: 100%; object-fit: cover; object-position: center 35%; max-width: none; filter: grayscale(1) contrast(1.04); transition: filter .8s var(--e); } .lh-hero:hover .lh-slider img { filter: grayscale(0) saturate(.75) contrast(1); } @keyframes lh-slide { 0%, 14% { transform: translateX(-500%); } 20%, 34% { transform: translateX(-400%); } 40%, 54% { transform: translateX(-300%); } 60%, 74% { transform: translateX(-200%); } 80%, 94% { transform: translateX(-100%); } 100% { transform: translateX(0); } } .lh-hero__copy { position: relative; z-index: 2; width: 100%; color: var(--paper); padding-block: 75px; } .lh-kicker { font-size: .72rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; } /* la scritta dell'ero NON e' display condensato: e' Mulish 200 sottile, come la claim del sito ("WE MAKE TALENT BECOME ICONS."). Mulish e' molto piu' largo di Bebas, quindi il corpo scende e le spaziature si aprono: le tre parole restano una per riga, ma con aria. */ .lh-h1 { font-family: var(--f-body); font-weight: 200; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.08; letter-spacing: .17em; text-transform: uppercase; margin-top: 18px; } .lh-h1__l { display: block; } /* l'ultima parola e' il punto: in Mood e' la piu' pesante. Qui, che c'e' un solo peso di Bebas, e' un blocco nero — il timbro del casting book. */ .lh-h1__l--strong { display: inline-block; margin-top: .2em; padding: .02em .22em .08em; background: var(--ink); color: var(--paper); } .lh-hero__p { max-width: 460px; margin-top: 24px; font-size: var(--t-body); font-weight: 300; line-height: 1.65; } .lh-hero__cta { margin-top: 30px; background: var(--paper); color: var(--ink); border-color: var(--paper); } .lh-hero__cta:hover { background: var(--ink); color: var(--paper); } .lh-pause { position: absolute; right: 28px; bottom: 20px; z-index: 3; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 12px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.35); color: var(--paper); font-size: .72rem; cursor: pointer; } .lh-pause input { width: 15px; height: 15px; margin: 0; accent-color: #fff; } .lh-pause:focus-within { outline: 2px solid var(--paper); outline-offset: 3px; } .lh-hero:has(.lh-pause input:checked) .lh-slider { animation-play-state: paused; } /* --- i clienti ------------------------------------------------------------ */ .lh-clients { padding: 38px 0 44px; border-bottom: 1px solid var(--rule); } .lh-clients__kicker { text-align: center; color: var(--ink-42); font-size: .62rem; margin-bottom: 28px; } /* la griglia e' come nel riferimento: sei loghi per riga, e gli ultimi due restano centrati sulla riga di sotto invece di allinearsi a sinistra. */ .lh-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 32px; } .lh-logo { display: block; width: calc((100% - 160px) / 6); height: 66px; object-fit: contain; filter: grayscale(1); mix-blend-mode: multiply; } .lh-logo--tall { height: 82px; } .lh-logo--official { filter: none; mix-blend-mode: normal; padding: 9px 0; } .lh-brand--text { display: flex; align-items: center; justify-content: center; width: calc((100% - 160px) / 6); height: 78px; font-family: var(--f-disp); font-size: 1.7rem; letter-spacing: .22em; color: var(--ink); white-space: nowrap; } /* --- l'agenzia: la parola gigante a fondopagina -------------------------- */ .lh-sec { position: relative; padding: 90px 0; } .lh-sec--agency { overflow: hidden; } .lh-sec--agency:before { content: 'ICON'; position: absolute; top: 10px; left: -14px; z-index: 0; pointer-events: none; font-family: var(--f-disp); font-size: clamp(120px, 28vw, 390px); line-height: 1; color: rgba(0,0,0,.045); } .lh-sec--agency .lh-wrap { position: relative; z-index: 1; } .lh-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .lh-h2 { font-family: var(--f-disp); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.04; letter-spacing: .012em; text-transform: uppercase; margin-top: 14px; } .lh-intro__body { color: var(--ink-58); font-size: var(--t-body); } .lh-intro__body p + p { margin-top: 20px; } /* --- la banda nera dei due reparti ---------------------------------------- */ .lh-band { background: var(--ink); color: var(--paper); padding: 64px 0; } .lh-band__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; } .lh-cat__num { font-size: .72rem; letter-spacing: .2em; color: rgba(255,255,255,.55); margin-bottom: 18px; } .lh-cat__ph { margin: 0 0 26px; aspect-ratio: 3 / 2; overflow: hidden; background: #111; } .lh-cat__ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: grayscale(1) contrast(1.04); transition: filter .7s var(--e); } .lh-cat:hover .lh-cat__ph img { filter: grayscale(0) saturate(.75) contrast(1); } .lh-cat__h3 { font-family: var(--f-disp); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: .02em; text-transform: uppercase; } .lh-cat__p { color: rgba(255,255,255,.74); font-size: var(--t-body); margin-top: 12px; } .lh-cat__link { display: inline-block; margin-top: 22px; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--paper); text-decoration: underline; text-underline-offset: 6px; } /* --- il portfolio: la foto a sinistra, il testo a destra ----------------- */ .lh-story { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .lh-story__ph { margin: 0; } .lh-story__ph img { display: block; width: 100%; aspect-ratio: 1.05; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: filter .7s var(--e); } .lh-story:hover .lh-story__ph img { filter: grayscale(0) saturate(.75) contrast(1); } .lh-story__p { color: var(--ink-58); font-size: var(--t-body); max-width: 44ch; margin: 18px 0 28px; } /* --- il casting aperto ---------------------------------------------------- */ .lh-join { background: var(--paper-2); text-align: center; } .lh-join__p { max-width: 640px; margin: 18px auto 30px; color: var(--ink-58); font-size: var(--t-body); } /* --- i contatti: il riquadro nero ---------------------------------------- */ .lh-contact { padding: 96px 0; background: var(--paper); scroll-margin-top: 48px; } .lh-contact > .lh-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .lh-contact__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; } .lh-contact__claim { max-width: 290px; color: var(--ink-58); font-size: var(--t-body); } .lh-card { max-width: 340px; padding: 38px; background: var(--ink); color: var(--paper); } .lh-card__kicker { color: rgba(255,255,255,.5); font-size: .62rem; letter-spacing: .22em; } .lh-card__name { font-family: var(--f-disp); font-weight: 400; font-size: 1.55rem; letter-spacing: .02em; text-transform: uppercase; margin: 10px 0 8px; } .lh-card__role { color: rgba(255,255,255,.72); font-size: .88rem; } .lh-card__addr { font-size: 1.05rem; line-height: 1.6; margin: 20px 0 24px; } .lh-card__row { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.22); } .lh-card__row a { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--paper); text-decoration: none; overflow-wrap: anywhere; } .lh-card__row a:hover { text-decoration: underline; text-underline-offset: 5px; } .lh-card__btn { margin-top: 24px; width: 100%; justify-content: center; background: var(--paper); color: var(--ink); border-color: var(--paper); } .lh-card__btn:hover { background: var(--ink); color: var(--paper); } /* --- 24. RESPONSIVE ----------------------------------------------------- */ @media (max-width: 1180px) { .board { grid-template-columns: repeat(4, 1fr); } .cards { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 980px) { .hdr__nav { display: none; } .hdr__cta { display: none; } /* su mobile la CTA sta nel menu a tendina */ .burger { display: block; } .hvid { height: clamp(380px, 62vh, 560px); } .works { grid-template-columns: repeat(2, 1fr); } .pillars { grid-template-columns: repeat(2, 1fr); } .cltable { grid-template-columns: repeat(3, 1fr); } .nums { grid-template-columns: repeat(2, 1fr); } .form { grid-template-columns: 1fr; } .gal { columns: 2; } .statement__l, .statement__r { grid-column: span 12; } .statement__r { margin-top: 10px; } .about__text { grid-column: span 12; } .about__side { grid-column: span 12; } .ftr__mark { grid-column: span 6; } .ftr__col { grid-column: span 3; } /* come arrivare: due colonne diventano una */ .reach__a, .reach__b { grid-column: span 12; } .reach__b { margin-top: 6px; } .reach__tram { grid-template-columns: auto 1fr; } .reach__tramW { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 12px; padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--rule-inv); } .reach__nav { grid-template-columns: 1fr; } .reach__carT, .reach__park { grid-column: span 12; } /* la landing delle campagne: due colonne diventano una */ .cmp-intro { grid-template-columns: 1fr; gap: 26px; } .cmp-feature__grid { grid-template-columns: 1fr; } .cmp-contact__grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { /* --- la landing in stile Mood: una sola colonna, come nel riferimento --- */ .lh-wrap { padding-inline: 22px; } .lh-nav { padding-block: 18px; gap: 15px; flex-wrap: wrap; } .lh-mark img { width: 108px; } /* lo switch sale sulla riga del logo, i quattro link scendono sotto */ .lh-lang { order: 1; margin-left: auto; } .lh-links { order: 2; width: 100%; margin-left: 0; justify-content: space-between; gap: 10px; } .lh-links a { font-size: .6rem; letter-spacing: .08em; } .lh-hero { min-height: 560px; } .lh-slider img { object-position: 60% center; } .lh-hero__copy { padding-block: 65px; } .lh-h1 { font-size: clamp(1.45rem, 6.6vw, 2.1rem); } .lh-pause { right: 22px; bottom: 14px; } .lh-logos { gap: 18px 22px; } .lh-logo { width: calc((100% - 44px) / 3); height: 52px; } .lh-logo--tall { height: 64px; } .lh-brand--text { width: calc((100% - 44px) / 3); height: 60px; font-size: 1.25rem; letter-spacing: .16em; } .lh-sec { padding: 60px 0; } .lh-intro, .lh-story { grid-template-columns: 1fr; gap: 28px; } .lh-band { padding: 44px 0; } .lh-band__grid { grid-template-columns: 1fr; gap: 40px; } .lh-contact { padding: 60px 0; } .lh-contact > .lh-wrap { grid-template-columns: 1fr; gap: 32px; } .lh-contact__head { display: block; } .lh-contact__claim { margin-top: 22px; max-width: none; } .lh-card { max-width: none; padding: 28px 24px; } /* il foglio dati del case study: due colonne invece di quattro */ .cs__facts { grid-template-columns: 1fr 1fr; } .cs__film { flex-direction: column; align-items: flex-start; gap: 26px; } .aindex { grid-template-columns: 1fr; } /* nell'indice dei lavori il tipo va a capo: una riga sola taglierebbe le voci lunghe ("Spot vincitore di un leone...") fuori dallo schermo. */ .aindex li a { flex-wrap: wrap; row-gap: 4px; } .aindex__t { white-space: normal; } :root { --hdr: 56px; } /* il titolo e la CTA non ci stanno sulla stessa riga: la CTA scende sotto */ .statement__hd { display: block; } .statement__hd .hero__cta { margin-top: 22px; margin-bottom: 0; } .hvid { height: clamp(300px, 46vh, 420px); } /* su mobile la scritta e' gia' al centro della banda, in ogni fase */ .hvid__id { left: 50%; transform: translateX(-50%); align-items: center; width: min(clamp(170px, 52vw, 280px), 72%); } .hvid.is-center .hvid__id { width: min(clamp(170px, 52vw, 280px), 72%); } .hvid__h1 { letter-spacing: .26em; text-indent: .26em; } .hvid__slate { left: 14px; top: 14px; font-size: .55rem; } .hvid__time { left: 14px; top: 32px; font-size: .55rem; } .hvid__toggle { right: 14px; top: 14px; width: 30px; height: 30px; } .board { grid-template-columns: repeat(3, 1fr); } .cards { grid-template-columns: repeat(3, 1fr); } .cltable { grid-template-columns: repeat(2, 1fr); } .mood__c--3 { grid-column: span 6 } .mood__c--4 { grid-column: span 6 } .mood__c--8 { grid-column: span 12 } .mood__c--4::before { padding-top: 66.6%; } .slide { aspect-ratio: 4 / 3; } .slide img { object-position: center 40%; } /* la landing delle campagne su mobile */ .cmp-cats__grid { grid-template-columns: 1fr; } .cmp-logos { grid-template-columns: repeat(2, 1fr); } .cmp-hero__copy { bottom: 88px; } .cmp-hero__count { display: none; } /* su mobile la barra dello slider tiene contatore e segni: l'etichetta sarebbe troppo lunga e farebbe andare a capo */ .slider__bar .lbl { display: none; } .az { gap: 6px; overflow-x: auto; justify-content: flex-start; } .az button { font-size: .82rem; } /* la tabella dei percorsi: la rotta scende sotto l'origine */ .rt__tr { grid-template-columns: 1fr auto; } .rt__route { grid-column: 1 / -1; grid-row: 2; margin-top: 3px; } .rt__time { grid-column: 2; grid-row: 1; } /* l'intestazione su mobile: la colonna "Route" sparisce, resta da dove si parte e quanto si impiega */ .rt__tr--h span:nth-child(2) { display: none; } .rt__tr--h span:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; } /* la metro: sotto, in colonna */ .reach__metro { flex-direction: column; align-items: flex-start; gap: 12px; } .reach__metros { flex-direction: column; gap: 14px; } .reach__metros li { flex-wrap: wrap; gap: 8px 10px; } .reach__metros li .lbl { flex-basis: 100%; } /* i parcheggi: nome e distanza sopra, tipo e tariffa sotto */ .pk { grid-template-columns: 1fr auto; } .pk__k { grid-column: 1; grid-row: 2; } .pk__f { grid-column: 2; grid-row: 2; text-align: right; } .pk__d { grid-column: 2; grid-row: 1; } .reach__tram { grid-template-columns: 1fr; } /* niente allineamento alla linea base: con un numero cosi' grande la spinta verso l'alto lo farebbe uscire dalla banda nera (e diventerebbe bianco su bianco). */ .reach__tramL { flex-direction: row; align-items: center; gap: 16px; } .reach__tramW { grid-column: auto; } } @media (max-width: 520px) { /* la landing in stile Mood: il titolo scende ancora */ .lh-h1 { font-size: clamp(1.3rem, 6.2vw, 1.8rem); } .lh-logos { gap: 16px 18px; } .lh-logo { width: calc((100% - 18px) / 2); } .lh-brand--text { width: calc((100% - 18px) / 2); } .cs__facts { grid-template-columns: 1fr; } .cs__nav { grid-template-columns: 1fr; } .cs__navlink--next { text-align: left; } .board { grid-template-columns: repeat(2, 1fr); } .cards { grid-template-columns: repeat(2, 1fr); } .works { grid-template-columns: 1fr; } .pillars { grid-template-columns: 1fr; } .nums { grid-template-columns: 1fr 1fr; } .gal { columns: 1; } .ftr__col { grid-column: span 6; } /* la landing delle campagne: la banda e' piu' bassa, il bottone piu' piccolo */ .cmp-hero { height: clamp(420px, 74vh, 560px); } .cmp-hero__pause { font-size: .55rem; padding: 7px 9px; } } /* ======================================================================== 25. LA PAGINA DEL CASTING: /casting/ Prende l'architettura della pagina casting di Mood Management e la porta nel sistema ICON. La scrittura dell'ero e' Mulish 200 sottile, come la claim del sito: niente display condensato. ======================================================================== */ /* --- l'ero: il roster che passa ----------------------------------------- */ .ct-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: 640px; background: #111; } .ct-hero:before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.2)); } .ct-hero__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; } /* il cursore e' CSS puro, come quello della landing: la traccia parte dall'ultima immagine e torna indietro, una passo per foto. Il numero delle foto e' --ct-n, e i passi si calcolano da li'. */ .ct-slider { display: flex; width: 100%; height: 100%; transform: translateX(calc(var(--ct-n) * -100%)); animation: ct-slide 14s infinite cubic-bezier(.4,0,.2,1); will-change: transform; } .ct-slider img { display: block; flex: 0 0 100%; width: 100%; min-width: 100%; height: 100%; object-fit: cover; object-position: center 22%; max-width: none; filter: grayscale(1) contrast(1.04); transition: filter .8s var(--e); } .ct-hero:hover .ct-slider img { filter: grayscale(0) saturate(.75) contrast(1); } @keyframes ct-slide { 0%, 11% { transform: translateX(calc(var(--ct-n) * -100%)); } 17%, 28% { transform: translateX(calc((var(--ct-n) - 1) * -100%)); } 34%, 45% { transform: translateX(calc((var(--ct-n) - 2) * -100%)); } 51%, 62% { transform: translateX(calc((var(--ct-n) - 3) * -100%)); } 68%, 79% { transform: translateX(calc((var(--ct-n) - 4) * -100%)); } 85%, 96% { transform: translateX(calc((var(--ct-n) - 5) * -100%)); } 100% { transform: translateX(0); } } .ct-hero__copy { position: relative; z-index: 2; width: 100%; color: var(--paper); padding-block: 80px; } .ct-kicker { font-size: .72rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; } /* la scritta: Mulish 200, come la claim del sito */ .ct-h1 { font-family: var(--f-body); font-weight: 200; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.08; letter-spacing: .17em; text-transform: uppercase; margin-top: 18px; } .ct-hero__p { max-width: 470px; margin-top: 24px; font-size: var(--t-body); font-weight: 300; line-height: 1.65; } .ct-hero__cta { margin-top: 30px; background: var(--paper); color: var(--ink); border-color: var(--paper); } .ct-hero__cta:hover { background: var(--ink); color: var(--paper); } .ct-pause { position: absolute; right: 28px; bottom: 20px; z-index: 3; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 12px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.35); color: var(--paper); font-size: .72rem; cursor: pointer; } .ct-pause input { width: 15px; height: 15px; margin: 0; accent-color: #fff; } .ct-pause:focus-within { outline: 2px solid var(--paper); outline-offset: 3px; } .ct-hero:has(.ct-pause input:checked) .ct-slider { animation-play-state: paused; } /* --- la griglia a due colonne: testo a sinistra, corpo a destra --------- */ .ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; } .ct-h2 { font-family: var(--f-disp); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.04; letter-spacing: .012em; text-transform: uppercase; margin-top: 14px; } .ct-body { color: var(--ink-58); font-size: var(--t-body); } .ct-body p + p { margin-top: 18px; } .ct-lead { color: var(--ink); font-size: clamp(1.02rem, 1.5vw, 1.22rem); font-weight: 300; line-height: 1.55; } .ct-cta { margin-top: 28px; } /* --- l'agenzia: la parola gigante a fondopagina + le foto -------------- */ .ct-agency { position: relative; overflow: hidden; background: var(--paper-2); padding: 92px 0; } .ct-ghost { position: absolute; top: 10px; left: -14px; z-index: 0; pointer-events: none; font-family: var(--f-disp); font-size: clamp(120px, 28vw, 390px); line-height: 1; color: rgba(0,0,0,.045); } .ct-agency .wrap { position: relative; z-index: 1; } .ct-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 58px; } .ct-strip figure { margin: 0; overflow: hidden; background: #111; } .ct-strip img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; filter: grayscale(1) contrast(1.04); transition: filter .7s var(--e); } .ct-strip figure:hover img { filter: grayscale(0) saturate(.75) contrast(1); } /* --- il muro dei clienti: i 49 nomi, uno dopo l'altro ------------------- */ .ct-clients { padding: 84px 0; border-top: 1px solid var(--rule); } .ct-clients__kicker { text-align: center; color: var(--ink-42); font-size: .62rem; margin-bottom: 34px; } .ct-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; } .ct-wall span { font-family: var(--f-disp); font-size: clamp(.95rem, 1.45vw, 1.2rem); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } /* --- i contatti: il riquadro nero (lo stesso componente della landing) --- */ .ct-contact { padding: 92px 0; background: var(--paper); } .ct-contact > .wrap { display: grid; grid-template-columns: 1fr 340px; gap: 64px; align-items: center; } .ct-contact__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; } .ct-contact__claim { max-width: 290px; color: var(--ink-58); font-size: var(--t-body); } @media (max-width: 980px) { .ct-grid { grid-template-columns: 1fr; gap: 30px; } .ct-strip { grid-template-columns: repeat(2, 1fr); } .ct-contact > .wrap { grid-template-columns: 1fr; gap: 36px; } .ct-contact__head { display: block; } .ct-contact__claim { margin-top: 20px; max-width: none; } } @media (max-width: 720px) { .ct-hero { min-height: 560px; } .ct-hero__copy { padding-block: 64px; } .ct-h1 { font-size: clamp(1.45rem, 6.6vw, 2.1rem); } .ct-pause { right: 22px; bottom: 14px; } .ct-strip { gap: 10px; margin-top: 40px; } .ct-agency, .ct-look { padding: 60px 0; } .ct-clients { padding: 60px 0; } .ct-wall { gap: 10px 20px; } } @media (max-width: 520px) { .ct-h1 { font-size: clamp(1.3rem, 6.2vw, 1.8rem); } .ct-strip { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { .ct-slider { animation: none; } .ct-pause { display: none; } } @media (prefers-reduced-motion: reduce) { .lh-slider { animation: none; } .lh-pause { display: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .rv { opacity: 1; transform: none; } /* senza moto non c'e' niente da fermare: il bottone di pausa sparisce */ .cmp-hero__pause { display: none; } } /* ======================================================================== 26. LA REPLICA DEL CASTING: /casting-modelli/ La pagina casting di Mood Management replicata fedelmente: fondo nero, Josefin Sans, l'ero a due colonne, il modulo a tre campi, la composizione delle quattro foto, il carosello delle testimonianze e dei brand. Logo e dati societari: di ICON. Foto, testimonianze e brand: di Mood. Le misure sono quelle misurate sulla pagina originale a 1440 px. ======================================================================== */ body:has(.cm) { background: #000; color: #fff; font-family: 'Josefin Sans', var(--f-body), sans-serif; font-weight: 400; } .cm { background: #000; color: #fff; } .cm ::selection { background: #fff; color: #000; } /* --- l'ero: le foto girano a tutta pagina, la scritta ci passa sopra ---- */ /* Le cinque foto non stanno in una colonna a destra: sono una pista a tutta pagina che scorre sotto il testo, come la banda dell'ero del sito ICON. Le foto sono quadrate (1000x1000 anche sull'originale) e NON vengono ritagliate: entrano intere nella banda e ci passano sotto. */ .cm-hero { position: relative; overflow: hidden; background: #000; padding: 40px 20px 0; min-height: 760px; } /* la velatura: il testo sta a sinistra e la foto gira sotto, quindi a sinistra serve una tinta scura, poi la foto esce libera verso destra. */ .cm-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.80) 30%, rgba(0,0,0,.42) 52%, rgba(0,0,0,.10) 72%, rgba(0,0,0,0) 88%); } .cm-hero__cols { position: relative; z-index: 2; display: flex; gap: 32px; max-width: 1400px; margin-inline: auto; } .cm-hero__left { flex: 1 1 auto; min-width: 0; max-width: 664px; padding-top: 40px; } .cm-logo { display: block; width: 225px; height: auto; margin-bottom: 62px; } .cm-h1 { font-family: 'Josefin Sans', sans-serif; font-weight: 100; font-size: clamp(2.6rem, 4.89vw, 4.4rem); line-height: 1.12; text-transform: uppercase; color: #fff; letter-spacing: normal; } .cm-h1 strong { font-weight: 700; } .cm-h4 { font-family: 'Josefin Sans', sans-serif; font-weight: 500; font-size: clamp(1.2rem, 1.67vw, 1.5rem); color: #fff; margin: 22px 0 14px; } .cm-hero__p { font-size: 1rem; line-height: 1.5; color: #fff; max-width: 660px; } .cm-hero__p strong { font-weight: 700; } .cm-btn { display: inline-block; margin-top: 30px; background: #fff; color: #000; border: 2px solid #fff; padding: 13px 25px 10px; font-family: 'Josefin Sans', sans-serif; font-size: 1.125rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; } .cm-btn:hover { background: #000; color: #fff; } /* la pista: la larghezza e' quella dei contenuti (sei quadretti, l'ultimo ripete il primo), e la corsa e' di cinque quadretti: si richiude. */ .cm-slider { position: absolute; left: 0; top: 0; z-index: 0; display: flex; height: 100%; width: max-content; animation: cm-slide 24s infinite cubic-bezier(.4,0,.2,1); will-change: transform; } .cm-slider img { display: block; flex: 0 0 auto; height: 100%; width: auto; max-width: none; object-fit: contain; filter: grayscale(1) contrast(1.05) brightness(.78); } @keyframes cm-slide { from { transform: translateX(0); } to { transform: translateX(-83.3333%); } } /* --- le sezioni: il nero e il grigio scuro si alternano ------------------ */ .cm-sec { background: #000; padding: 80px 20px; } .cm-sec--dark { background: #19191B; } .cm-two { display: flex; gap: 32px; max-width: 1400px; margin-inline: auto; } .cm-two--wide { gap: 40px; } .cm-two__left { flex: 1 1 0; min-width: 0; } .cm-two__right { flex: 1 1 0; min-width: 0; } .cm-h2 { font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 2.39vw, 2.15rem); line-height: 1.15; color: #fff; margin-bottom: 24px; } .cm-h2--mid { text-align: center; margin-bottom: 28px; } .cm-sec p { font-size: 1rem; line-height: 1.5; color: #fff; margin-bottom: 16px; } .cm-sec p strong { font-weight: 700; } .cm-lead { font-weight: 700; } /* --- il modulo: tre campi per riga, campi bianchi al 20% ---------------- */ .cm-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .cm-field label { display: block; font-size: .9rem; color: #fff; margin-bottom: 6px; } .cm-req { color: #c02b0a; } .cm-field input, .cm-field select { width: 100%; height: 50px; padding: 5px 15px; border: none; background: rgba(255,255,255,.2); color: #fff; font-family: 'Josefin Sans', sans-serif; font-size: .875rem; } .cm-field select { appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .cm-field select option { background: #19191B; color: #fff; } .cm-field__hint { display: block; font-size: .8rem; color: rgba(255,255,255,.7); margin-top: 6px; } .cm-note { font-size: .875rem; margin-top: 22px; } .cm-privacy { margin-top: 18px; } .cm-privacy__lab { display: block; font-size: .9rem; margin-bottom: 8px; } .cm-privacy__txt { background: rgba(255,255,255,.2); padding: 14px 16px; font-size: .875rem; line-height: 1.45; } .cm-consent { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 1rem; font-weight: 700; } .cm-consent input { width: 20px; height: 20px; accent-color: #fff; } .cm-btn--send { margin-top: 22px; width: 225px; text-align: center; font-size: 1rem; } /* --- la sezione agenzia: quattro foto in rettangoli sfalsati -------------- */ .cm-compo { position: relative; height: 380px; } .cm-compo__f { position: absolute; border: 1px solid #fff; overflow: hidden; margin: 0; } .cm-compo__f img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); } .cm-compo__f--1 { left: 0; top: 0; width: 55%; height: 74%; } .cm-compo__f--2 { right: 0; top: 60px; width: 33%; height: 55%; } .cm-compo__f--3 { left: 22%; bottom: 0; width: 55%; height: 62%; } .cm-compo__f--4 { right: 18%; bottom: 0; width: 25%; height: 40%; } /* --- il carosello: testimonianze e brand -------------------------------- */ .cm-car { position: relative; max-width: 1400px; margin-inline: auto; } .cm-car__track { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .cm-car__track::-webkit-scrollbar { display: none; } .cm-rev__item { flex: 0 0 100%; scroll-snap-align: center; text-align: center; padding: 0 40px; } .cm-rev__item p, .cm-rev__item cite { max-width: 720px; margin-inline: auto; } .cm-stars { display: flex; justify-content: center; gap: 3px; margin-bottom: 18px; } .cm-star { color: #ffcd1c; font-size: 1.125rem; line-height: 1; } .cm-rev__item p { font-size: 1.125rem; line-height: 1.5; font-weight: 400; margin-bottom: 14px; } .cm-rev__item cite { display: block; font-style: normal; font-size: 1rem; font-weight: 700; } .cm-car__track--brand { gap: 8px; } .cm-brand { flex: 0 0 calc((100% - 24px) / 4); margin: 0; overflow: hidden; scroll-snap-align: start; } .cm-brand img { display: block; width: 100%; height: auto; aspect-ratio: 460 / 300; } .cm-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: none; border: none; color: #fff; font-family: 'Josefin Sans', sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 1; padding: 8px; cursor: pointer; } .cm-arrow--prev { left: -8px; } .cm-arrow--next { right: -8px; } .cm-arrow:hover { opacity: .6; } .cm-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; } .cm-dot { width: 30px; height: 3px; border: none; background: rgba(255,255,255,.35); padding: 0; cursor: pointer; } .cm-dot.on { background: #fff; } /* --- il footer: i dati di ICON ------------------------------------------ */ .cm-foot { background: #19191B; padding: 56px 20px; } .cm-foot__cols { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; max-width: 1400px; margin-inline: auto; } .cm-foot__logo { display: block; width: 150px; height: auto; margin-bottom: 22px; } .cm-foot__lines { display: flex; flex-direction: column; gap: 3px; font-size: .875rem; line-height: 1.4; color: #fff; } .cm-foot__links { display: flex; gap: 10px; font-size: .875rem; color: #fff; white-space: nowrap; } /* --- sotto i 980 px: due colonne diventano una --------------------------- */ @media (max-width: 980px) { .cm-hero__cols, .cm-two { flex-direction: column; gap: 32px; } /* in colonna il flex-basis: 0 delle colonne collasserebbe l'altezza a zero: le colonne devono prendere la loro altezza naturale. */ .cm-hero__left, .cm-two__left, .cm-two__right { flex: 0 0 auto; } .cm-hero__left { max-width: none; } .cm-hero { min-height: 620px; } .cm-logo { margin-bottom: 40px; } .cm-rev__item { flex: 0 0 100%; max-width: 100%; padding: 0 8px; } .cm-brand { flex: 0 0 calc((100% - 8px) / 2); } .cm-fields { grid-template-columns: repeat(2, 1fr); } .cm-compo { height: 320px; } .cm-foot__cols { flex-direction: column; align-items: flex-start; gap: 28px; } } @media (max-width: 560px) { .cm-hero { padding: 24px 16px 0; min-height: 540px; } .cm-sec { padding: 52px 16px; } .cm-fields { grid-template-columns: 1fr; } .cm-compo { height: 240px; } .cm-btn--send { width: 100%; } } /* --- senza moto: niente cursore che scorre da solo ---------------------- */ @media (prefers-reduced-motion: reduce) { .cm-slider { animation: none; transform: none; } .cm-slider img { display: none; } .cm-slider img:first-child { display: block; } } /* ======================================================================== 27. LA GEMELLA NEI FONT DI ICON: /casting-modelli-icon/ Stessa pagina della sezione 26 — stesso testo, stesse foto, stessa struttura, stesse misure: cambia SOLO il font. Josefin Sans esce, entrano i due font del sistema ICON, gia' serviti in locale da site-fonts.css: Mulish per il corpo (la claim e i testi del sito) e Bebas Neue per i titoli di sezione e i pulsanti (il display condensato). Il titolo dell'ero resta sottile/pesante come sull'originale: in Mulish il peso 200 fa il sottile e il 700 il peso forte. Nessuna misura cambia: stessi clamp, stessi paddings, stesse griglie. ======================================================================== */ body:has(.cm--icon) { font-family: var(--f-body); font-weight: 400; } .cm--icon { font-family: var(--f-body); } /* --- il titolo dell'ero: Mulish 200 sottile, "CASTING" a 700 ------------ */ /* Su Josefin il titolo andava a capo per caso: "PARTECIPA AI" e poi "CASTING". Mulish e' piu' largo, quindi la spezzatura non e' piu' un effetto della misura: qui viene imposta. "CASTING" va a capo da solo, come sull'originale. */ .cm--icon .cm-h1 { font-family: var(--f-body); font-weight: 200; } .cm--icon .cm-h1 strong { display: block; font-weight: 700; } /* --- "Diventa modella!" ------------------------------------------------ */ .cm--icon .cm-h4 { font-family: var(--f-body); font-weight: 600; } /* --- i titoli di sezione: Bebas Neue, il display del sistema ----------- */ .cm--icon .cm-h2 { font-family: var(--f-disp); font-weight: 400; letter-spacing: .045em; text-transform: uppercase; } /* --- il corpo ----------------------------------------------------------- */ .cm--icon .cm-sec p { font-family: var(--f-body); font-weight: 300; } .cm--icon .cm-sec p strong { font-weight: 700; } .cm--icon .cm-lead { font-weight: 700; } .cm--icon .cm-hero__p { font-family: var(--f-body); font-weight: 300; } .cm--icon .cm-hero__p strong { font-weight: 700; } /* --- il pulsante: Bebas, maiuscolo e spaziato --------------------------- */ .cm--icon .cm-btn { font-family: var(--f-disp); font-weight: 400; letter-spacing: .12em; } /* --- il modulo ---------------------------------------------------------- */ .cm--icon .cm-field label { font-family: var(--f-body); font-weight: 400; } .cm--icon .cm-field input, .cm--icon .cm-field select { font-family: var(--f-body); font-weight: 300; } .cm--icon .cm-note, .cm--icon .cm-privacy__lab, .cm--icon .cm-privacy__txt { font-family: var(--f-body); } .cm--icon .cm-consent { font-family: var(--f-body); font-weight: 700; } /* --- il carosello ------------------------------------------------------- */ .cm--icon .cm-rev__item p { font-family: var(--f-body); font-weight: 300; } .cm--icon .cm-rev__item cite { font-family: var(--f-body); font-weight: 700; } .cm--icon .cm-arrow { font-family: var(--f-disp); font-weight: 400; } /* --- il footer ---------------------------------------------------------- */ .cm--icon .cm-foot__lines, .cm--icon .cm-foot__links { font-family: var(--f-body); font-weight: 300; } /* ======================================================================== 30. LA SEZIONE NEWS L'indice degli articoli e la pagina di ciascuno: un testo che introduce, un blocco di fotografie, un testo che chiude. Il ritmo di una rivista. ======================================================================== */ /* --- l'indice ---------------------------------------------------------- */ .ngrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .ncard { background: var(--paper); padding: 18px 18px 26px; display: block; } .ncard__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); margin-bottom: 16px; } .ncard__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); transition: filter .7s var(--e), transform 1.1s var(--e); } .ncard:hover .ncard__media img { filter: grayscale(0) saturate(.75) contrast(1); transform: scale(1.03); } .ncard__meta { display: flex; align-items: baseline; gap: 16px; font-size: var(--t-lbl); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-42); margin-bottom: 12px; } .ncard__meta span + span::before { content: "·"; margin-right: 16px; } .ncard__title { font-family: var(--f-disp); font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.06; letter-spacing: .03em; text-transform: uppercase; } .ncard:hover .ncard__title { text-decoration: underline; text-underline-offset: 5px; } .ncard__ex { margin-top: 14px; color: var(--ink-58); max-width: 58ch; } .ncard__more { display: inline-block; margin-top: 18px; font-size: var(--t-lbl); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); } /* --- l'articolo -------------------------------------------------------- */ .nart__meta { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; font-size: var(--t-lbl); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-42); padding-bottom: 18px; margin-bottom: 34px; border-bottom: 1px solid var(--rule); } .nart__lead { max-width: 62ch; } .nart__lead p + p { margin-top: 22px; } .nart__body { max-width: 62ch; } .nart__body p + p { margin-top: 20px; } /* le fotografie: griglia a due colonne, la prima a tutta larghezza */ .nfigs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gut); } .nfig { margin: 0; } .nfig:nth-child(1) { grid-column: 1 / -1; } /* la foto di apertura e' ritagliata in 3/2: uno scatto verticale a tutta larghezza diventa una torre e stacca il ritmo dell'articolo */ .nfig:nth-child(1) img { aspect-ratio: 3 / 2; object-fit: cover; } .nfig img { width: 100%; height: auto; display: block; filter: grayscale(1); transition: filter .7s var(--e); } .nfig:hover img { filter: grayscale(0) saturate(.75); } .nfig figcaption { margin-top: 9px; font-size: .78rem; color: var(--ink-42); } @media (max-width: 980px) { .ngrid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .nfigs { grid-template-columns: 1fr; } .nfig:nth-child(1) { grid-column: auto; } }