/* ========================================================================== DDK — BASE I mattoni comuni a TUTTE le pagine del sito: colori, tipografia, spaziature, contenitore, bottoni, animazioni, elementi ricorrenti. Una pagina nuova carica questo file e ha gia' tutto. Qui non entra mai nulla che riguardi una sezione specifica: quella roba sta in ddk-sezioni.css. IL COLORE NON E' SCRITTO QUI. Arriva da wp-content/mu-plugins/ddk-colori.php, che lo pubblica come --ddk-primario su ogni pagina del sito, presa da un'opzione nel database. Vedi DECISIONI.md, 31/07/2026. ========================================================================== */ /* ============================================================ DDK — DESIGN SYSTEM Colori, tipografia e spaziature stanno tutti qui. ============================================================ */ :root{ --ink:#101820; /* Alias verso la centrale colori. Il valore dopo la virgola e' solo una rete: se il mu-plugin mancasse, il sito resterebbe bordeaux invece di perdere il colore. La fonte vera e' l'opzione nel database. */ --bordeaux: var(--ddk-primario, #8a1c2b); --bordeaux-scuro: var(--ddk-primario-scuro, #6e1622); --bordeaux-tenue: var(--ddk-primario-tenue, #f3e8ea); --g700:#344054; --g500:#667085; --g300:#d0d5dd; --g200:#eaecf0; --g100:#f2f4f7; --white:#fff; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --fs-display:clamp(2.6rem,6.4vw,5.6rem); --fs-h2:clamp(1.85rem,3.4vw,3.2rem); --fs-h3:clamp(1.1rem,1.5vw,1.4rem); --fs-lead:clamp(1.05rem,1.3vw,1.28rem); --fs-sm:.875rem; --fs-eyebrow:.72rem; --gutter:clamp(1.25rem,4vw,4rem); --section:clamp(5rem,9vw,9rem); --maxw:1340px; --ease:cubic-bezier(.16,1,.3,1); --dur:.9s; /* testi e elementi piccoli */ --dur-img:1.4s; /* immagini grandi: piu' massa, piu' lentezza */ } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* ⚠️ L'ECCEDENZA ORIZZONTALE SI TAGLIA QUI, SU , E NON SUL BODY. Difetto trovato in arabo su telefono l'1/08, misurato dal vivo sul sito. LA CAUSA. Le fasce a tutta larghezza — .band, .qualita, la foto dell'apertura — sono larghe 100vw. **100vw conta anche la barra di scorrimento, la pagina no:** sul sito valeva 2029 contro 2014, cioe' quindici pixel di troppo, esattamente lo spessore della barra. PERCHE' LA REGOLA SUL BODY NON BASTAVA (c'era, ed era inutile). Quando l'overflow e' dichiarato sul body e su non c'e' niente, il browser **sposta la regola su ** e lascia il body a visible. Risultato: non taglia nessuno. Sembra un difetto del browser, e invece e' quello che dice la specifica. PERCHE' SOLO IN ARABO. Il difetto c'e' identico in italiano, ma li' la pagina si apre allineata a sinistra e i quindici pixel avanzano dal lato dove la lettura finisce: invisibili. In arabo la pagina si apre allineata a destra e l'eccedenza si mette dal lato da cui si comincia a leggere, quindi tutto sembra spinto e tagliato. Stesso schema dei quattro difetti RTL del 31/07: **una proprieta' che sembra solo estetica sposta la geometria.** PERCHE' clip E NON hidden. hidden trasformerebbe in un contenitore di scorrimento, e questo puo' far impazzire gli elementi con position:fixed — cioe' la nostra testata. clip taglia e basta, senza creare niente. Provato dal vivo prima di scriverlo: eccedenza da 15px a 0, testata ancora in cima scorrendo, scorrimento verticale intatto. */ html{overflow-x:clip} body{margin:0;font-family:var(--font);line-height:1.62;color:var(--g700); background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:clip} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{color:var(--ink);font-weight:600;margin:0;line-height:1.06;letter-spacing:-.03em} p{margin:0} ::selection{background:var(--bordeaux);color:#fff} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} section{padding-block:var(--section)} /* ============================================================ DUOTONE BORDEAUX MORBIDO Filtro SVG. Le foto sul server restano a colori: basta togliere la classe .duotone dal e tornano com'erano. ============================================================ */ .duotone .ph img{filter:url(#ddk-duotone)} /* ============================================================ ANIMAZIONI — IntersectionObserver, nessuna libreria ============================================================ */ [data-r]{opacity:0;will-change:transform,opacity} [data-r="up"]{transform:translateY(30px)} [data-r="fade"]{transform:none} [data-r="scale"]{transform:scale(.95)} [data-r="right"]{transform:translateX(34px)} /* translateX e' fisica: in arabo l'elemento deve arrivare dall'altro lato, altrimenti entra dalla parte sbagliata rispetto al verso di lettura. */ [dir="rtl"] [data-r="right"]{transform:translateX(-34px)} [data-r].is-in{opacity:1;transform:none; transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease); transition-delay:var(--d,0ms)} /* Le immagini grandi entrano piu' lente: una massa grande che si muove alla stessa velocita' di una riga di testo sembra sempre sbrigativa. */ .ph[data-r].is-in, .hero__ph.is-in, .storia__ph.is-in, .mondo__ph.is-in{ transition:opacity var(--dur-img) var(--ease),transform var(--dur-img) var(--ease)} .lines .line{display:block;overflow:hidden;padding-block-end:.14em;margin-block-end:-.14em} .lines .line>span{display:block;transform:translateY(105%); transition:transform 1.05s var(--ease);transition-delay:var(--d,0ms)} .lines.is-in .line>span{transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} [data-r],.lines .line>span{opacity:1!important;transform:none!important;transition:none!important} .marquee__track{animation:none!important} } .no-js [data-r]{opacity:1;transform:none} .no-js .lines .line>span{transform:none} /* ============================================================ ELEMENTI RICORRENTI ============================================================ */ .eyebrow{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.19em; text-transform:uppercase;color:var(--bordeaux);margin:0 0 1.2rem; display:flex;align-items:center;gap:.7rem} .eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none} .eyebrow--l{color:rgba(255,255,255,.62)} /* Il motto latino: firma ricorrente, sempre lo stesso trattamento */ .motto{font-size:clamp(.95rem,1.15vw,1.15rem);font-style:italic; color:var(--bordeaux);line-height:1.5;margin:0} .motto--l{color:rgba(255,255,255,.75)} .motto::before{content:"«"} .motto::after{content:"»"} .lead{font-size:var(--fs-lead);color:var(--g500);line-height:1.58} .btn{display:inline-flex;align-items:center;gap:.6rem;padding:1rem 1.7rem; border-radius:999px;font-size:var(--fs-sm);font-weight:600;border:1px solid transparent; transition:background .35s var(--ease),color .35s var(--ease), border-color .35s var(--ease),transform .35s var(--ease)} .btn:hover{transform:translateY(-2px)} .btn--solid{background:var(--ink);color:#fff} .btn--solid:hover{background:var(--bordeaux)} .btn--ghost{border-color:var(--g300);color:var(--ink)} .btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff} .btn--light{background:#fff;color:var(--ink)} .btn--light:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .btn--outline-l{border-color:rgba(255,255,255,.45);color:#fff} .btn--outline-l:hover{background:#fff;color:var(--bordeaux)} .arw{transition:transform .35s var(--ease)} .btn:hover .arw{transform:translateX(4px)} [dir="rtl"] .arw{transform:scaleX(-1)} [dir="rtl"] .btn:hover .arw{transform:scaleX(-1) translateX(4px)} /* Rete di sicurezza per : la specifica HTML raccomanda di scriverla nel foglio di stile, perche' un browser che non conoscesse quell'elemento lo tratterebbe come un normale e l'isolamento non avverrebbe. Serve ai pezzi in caratteri latini dentro le pagine in arabo e persiano — ragione sociale, indirizzo, anni del copyright. Vedi templates/parti/chiusura.php. */ bdi{unicode-bidi:isolate} .ph{overflow:hidden;background:var(--g100)} .ph img{width:100%;height:100%;object-fit:cover} /* -------------------------------------------------------------------------- BARRA DI AVANZAMENTO -------------------------------------------------------------------------- */ .progress{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:120; height:2px;width:100%;transform:scaleX(0);transform-origin:left center;background:var(--bordeaux)} [dir="rtl"] .progress{transform-origin:right center} /* -------------------------------------------------------------------------- FASCE A TUTTA LARGHEZZA -------------------------------------------------------------------------- */ /* Fascia a tutta larghezza che esce dal contenitore. NIENTE transform: translateX e' una proprieta' FISICA, non si specchia in arabo e persiano, e l'immagine finiva fuori schermo. I margini negativi calcolati funzionano nei due versi senza bisogno di eccezioni. */ .band{width:100vw;margin-inline:calc(50% - 50vw)} .band .ph{aspect-ratio:24/7} @media (max-width:760px){.band .ph{aspect-ratio:16/9}} /* -------------------------------------------------------------------------- TESTATA DI SEZIONE — titolo a sinistra, testo a destra -------------------------------------------------------------------------- */ .shead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem); align-items:end;margin-block-end:clamp(2.5rem,5vw,4rem)} .shead h2{font-size:var(--fs-h2)} @media (max-width:860px){.shead{grid-template-columns:1fr;align-items:start}} /* ============================================================ TORNA SU — compare dopo la prima schermata ============================================================ */ .totop{position:fixed;inset-block-end:1.5rem;inset-inline-end:1.5rem;z-index:150; width:46px;height:46px;border-radius:50%;border:1px solid var(--g300); background:rgba(255,255,255,.9);backdrop-filter:blur(10px);color:var(--ink); display:grid;place-items:center;cursor:pointer;padding:0; opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .4s var(--ease),transform .4s var(--ease), visibility .4s,background .3s var(--ease), border-color .3s var(--ease),color .3s var(--ease)} .totop.is-on{opacity:1;visibility:visible;transform:none} .totop:hover{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff} .totop svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round}