/* ============================================================ DO.G.MA. SERVICE SAS — Technical Inspection & Anticorrosion style.css — v3 "Rapporto di campo" ------------------------------------------------------------ Concept: la grammatica del documento di controllo (campi, registri, tabelle, spunte, numeri di sezione) applicata a una fotografia di cantiere in grande formato. Testi e font invariati. ------------------------------------------------------------ 00 Font 06 Frontespizio 12 Certificazioni 01 Tokens 07 Registro 13 Why 02 Base 08 Sezioni 14 Metodo 03 Tipografia 09 Servizi 15 Richiesta 04 Bottoni 10 Technical 16 Footer 05 Header control 17 Legali 11 Settori 18 Responsive ============================================================ */ /* ------------------------------------------------------------ 00 FONT LOCALI ------------------------------------------------------------ */ @font-face{ font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800; src:url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/manrope-latin-wght-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212, U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800; src:url("fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"), url("fonts/manrope-latin-ext-wght-normal.woff2") format("woff2"); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020, U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap; src:url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap; src:url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");} /* ------------------------------------------------------------ 01 TOKENS ------------------------------------------------------------ */ :root{ --paper:#F2F0EB; /* carta: fondo con reticolo tecnico */ --surface:#F2F0EB; /* colore della superficie corrente (tendine rv-wipe) */ --sheet:#FBFAF7; /* foglio: sezioni appoggiate sulla carta */ --paper-2:#FFFFFF; --paper-3:#E9E6DF; --card:#FFFFFF; /* schede e riquadri — cambia sulle sezioni foglio */ --field-bg:var(--paper);/* maschera della guida punteggiata nei campi */ --ink:#101C26; /* inchiostro navy: fondi scuri e testo */ --ink-2:#18303E; --ink-soft:#44545F; --ink-dim:#5A6873; --stamp:#A82F23; /* accento su carta */ --stamp-lt:#E0705F; /* accento su fondo scuro */ --navy:#1C2E4A; /* superficie navy (indigo profondo) */ --navy-card:#16253C; --navy-key:#A9BED4; /* codici e micro-etichette sul navy */ --line:rgba(16,28,38,.20); --line-2:rgba(16,28,38,.12); --line-3:rgba(16,28,38,.07); --dline:rgba(242,240,235,.22); --dline-2:rgba(242,240,235,.12); --on-dark:#F2F0EB; --on-dark-soft:#B9C1C4; --on-dark-dim:#95A0A5; --font:"Manrope","Inter","Helvetica Neue",Arial,sans-serif; --mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace; --wrap:1420px; --gutter:clamp(18px,4vw,64px); --sect-y:clamp(56px,6.4vw,110px); --ease:cubic-bezier(.22,.61,.36,1); } /* ------------------------------------------------------------ 02 BASE ------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper);} body{ margin:0;color:var(--ink); background-color:var(--paper); /* reticolo tecnico appena percettibile */ background-image: linear-gradient(rgba(20,25,28,.030) 1px, transparent 1px), linear-gradient(90deg, rgba(20,25,28,.030) 1px, transparent 1px); background-size:64px 64px; font-family:var(--font); font-size:clamp(15px,.5vw + 13.6px,16.5px); line-height:1.62;letter-spacing:-.005em; overflow-x:hidden; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } img{max-width:100%;height:auto;display:block;} button{font:inherit;color:inherit;} h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.06;} p{margin:0 0 1.05em;} p:last-child{margin-bottom:0;} ul,ol{margin:0;padding:0;list-style:none;} a{color:inherit;text-decoration:none;} address{font-style:normal;} dl,dd{margin:0;} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);} .section{padding-block:var(--sect-y);} .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--ink);color:var(--paper);padding:14px 20px;font-size:14px; } .skip-link:focus{left:12px;top:12px;} :focus-visible{outline:2px solid var(--stamp);outline-offset:3px;} ::selection{background:var(--ink);color:var(--paper);} /* ------------------------------------------------------------ SUPERFICI — carta (fondo con reticolo) / foglio / inchiostro Regola: mai più di due sezioni consecutive sulla stessa superficie. ------------------------------------------------------------ */ .surface-sheet{ background:var(--sheet); border-block:1px solid var(--line-3); --card:var(--paper); /* sul foglio le schede tornano color carta */ --field-bg:var(--sheet); --surface:var(--sheet); } /* dentro schede e riquadri la maschera segue il colore della scheda, su qualunque superficie */ .cert-card, .sector-specs{--field-bg:var(--card);} /* ------------------------------------------------------------ 03 TIPOGRAFIA ------------------------------------------------------------ */ /* etichetta di sezione: targhetta rossa con testo bianco */ .eyebrow{ display:inline-block; font-family:var(--mono); font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase; color:#fff;background:var(--stamp); padding:7px 12px 6px; margin:0 0 16px; } .mono-label{ font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-dim);display:inline-block; } .h-display{ font-size:clamp(27px,3.5vw,50px); font-weight:600;line-height:1.08;letter-spacing:-.033em;margin:0; } .h-display .line{display:block;} .lead{font-size:clamp(17px,1.25vw,21px);line-height:1.5;font-weight:500;letter-spacing:-.02em;} /* intestazione di sezione — numero, titolo, nota */ .sec-head{ display:grid; grid-template-columns:clamp(64px,7vw,110px) minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(16px,2.4vw,44px); align-items:start; padding-top:16px; border-top:2px solid var(--ink); margin-bottom:clamp(30px,3.4vw,54px); } .sec-n{ font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--stamp);padding-top:4px; } .sec-note{ color:var(--ink-soft);font-size:14px;line-height:1.62;max-width:46ch;padding-top:4px; } .sec-rev{padding-top:4px;justify-self:end;} /* campi con guida punteggiata */ .fields{display:flex;flex-direction:column;} .field-row{ position:relative;display:flex;align-items:baseline;gap:8px; padding-block:11px; } .field-row::before{ content:"";position:absolute;left:0;right:0;bottom:1.05em; border-bottom:1px dotted var(--line); } .field-row dt{ position:relative;background:var(--field-bg);padding-right:10px; font-family:var(--mono);font-size:10px;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-dim);white-space:nowrap; } .field-row dd{ position:relative;background:var(--field-bg);padding-left:10px;margin-left:auto; font-size:14.5px;font-weight:600;letter-spacing:-.012em;text-align:right; } .fields-tight .field-row{padding-block:9px;} /* ------------------------------------------------------------ 04 BOTTONI ------------------------------------------------------------ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:50px;padding:14px 26px; font-size:13px;font-weight:700;letter-spacing:.03em; border:1px solid var(--ink);border-radius:0;cursor:pointer;text-align:center; transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease); } .btn-primary{background:var(--ink);color:var(--paper);} .btn-primary:hover{background:var(--stamp);border-color:var(--stamp);color:#fff;} .btn-accent{background:var(--stamp);border-color:var(--stamp);color:#fff;} .btn-accent:hover{background:var(--paper);border-color:var(--paper);color:var(--ink);} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);} .btn-ghost:hover{border-color:var(--ink);} .btn-ghost .arrow{transition:transform .4s var(--ease);} .btn-ghost:hover .arrow{transform:translateX(4px);} .btn-block{width:100%;} .btn:disabled{cursor:progress;opacity:.65;} .link-inline{ display:inline-flex;align-items:center;gap:7px; font-size:13px;font-weight:600;padding-block:8px; border-bottom:1px solid var(--line); transition:border-color .4s var(--ease),color .4s var(--ease); } .link-inline:hover{border-color:var(--stamp);color:var(--stamp);} .ext{font-size:.85em;} /* ------------------------------------------------------------ 05 HEADER ------------------------------------------------------------ */ .site-header{ position:fixed;inset:0 0 auto 0;z-index:100; transition:background .4s var(--ease); } .site-header.is-solid{ background:rgba(242,240,235,.94); backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px); } .header-inner{ max-width:var(--wrap);margin-inline:auto; padding:clamp(12px,1.3vw,18px) var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:22px; } .header-rule{height:1px;background:var(--line);opacity:0;transition:opacity .4s var(--ease);} /* in cima alla home la barra è sopra la fotografia: velo + testi in chiaro */ body.page-home .site-header:not(.is-solid){ background:linear-gradient(180deg, rgba(12,17,20,.62) 0%, rgba(12,17,20,.28) 60%, rgba(12,17,20,0) 100%); } body.page-home .site-header:not(.is-solid) .wordmark-a{color:#fff;} body.page-home .site-header:not(.is-solid) .wordmark-b{color:var(--stamp-lt);} body.page-home .site-header:not(.is-solid) .nav-link{color:rgba(255,255,255,.82);} body.page-home .site-header:not(.is-solid) .nav-link:hover, body.page-home .site-header:not(.is-solid) .nav-link.is-active{color:#fff;} body.page-home .site-header:not(.is-solid) .lang{color:rgba(255,255,255,.6);} body.page-home .site-header:not(.is-solid) .lang.is-active{color:#fff;} body.page-home .site-header:not(.is-solid) .lang-sep{color:rgba(255,255,255,.35);} body.page-home .site-header:not(.is-solid) .burger{border-color:rgba(255,255,255,.45);} body.page-home .site-header:not(.is-solid) .burger span{background:#fff;} body.page-home .site-header:not(.is-solid) .btn-header{ background:#fff;border-color:#fff;color:var(--ink); } body.page-home .site-header:not(.is-solid) .btn-header:hover{ background:var(--stamp);border-color:var(--stamp);color:#fff; } .site-header.is-solid .header-rule{opacity:1;} /* --- PROVA LOGO: marchio a immagine accanto al wordmark --------- Provvisorio: PNG, non vettoriale. Da sostituire con l'SVG definitivo quando il marchio è approvato. */ .wordmark{ display:flex;align-items:center;gap:clamp(9px,1vw,14px); line-height:1;flex:none; } .wordmark-txt{display:flex;flex-direction:column;line-height:1;} .wordmark-mark{display:block;flex:none;} .wordmark-mark img{display:block;width:auto;height:clamp(34px,3.2vw,44px);} .wordmark-mark .mk-b{display:none;} /* sui fondi scuri si scambia la versione chiara */ body.page-home .site-header:not(.is-solid) .wordmark-mark .mk-a, .wordmark-foot .mk-a, .mobile-nav .wordmark .mk-a{display:none;} body.page-home .site-header:not(.is-solid) .wordmark-mark .mk-b, .wordmark-foot .mk-b, .mobile-nav .wordmark .mk-b{display:block;} .wordmark-foot .wordmark-mark img{height:56px;} body.page-home .site-header:not(.is-solid) .wordmark{ filter:drop-shadow(0 1px 3px rgba(8,12,15,.55)) drop-shadow(0 2px 14px rgba(8,12,15,.45)); } @media (max-width:680px){ .wordmark-mark img{height:36px;} } .wordmark-a{font-size:clamp(15px,1.15vw,18px);font-weight:800;letter-spacing:.005em;} .wordmark-a i{font-style:normal;color:var(--stamp);} /* i tre punti in rosso */ .wordmark-b{ font-family:var(--mono);font-size:9px;letter-spacing:.34em;text-transform:uppercase; color:var(--ink-dim);margin-top:5px;padding-left:2px; } .nav-desktop ul{display:flex;align-items:center;gap:clamp(14px,1.7vw,28px);} .nav-link{ position:relative;display:inline-flex;align-items:baseline;gap:6px; font-size:13px;font-weight:500;padding-block:8px;color:var(--ink-soft); transition:color .3s var(--ease); } .nav-n{font-family:var(--mono);font-size:9px;color:var(--ink-dim);letter-spacing:.1em;} .nav-link::after{ content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;background:var(--stamp); transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease); } .nav-link:hover,.nav-link.is-active{color:var(--ink);} .nav-link:hover .nav-n,.nav-link.is-active .nav-n{color:var(--stamp);} .nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1);} .header-actions{display:flex;align-items:center;gap:clamp(10px,1.2vw,20px);} .lang-switch{display:flex;align-items:center;gap:5px;} .lang{ background:none;border:0;padding:6px 2px;cursor:pointer; font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-dim); transition:color .3s var(--ease); } .lang.is-active{color:var(--ink);} .lang[aria-disabled="true"]{cursor:not-allowed;opacity:.5;} .lang-sep{color:var(--line);font-size:10.5px;} .btn-header{min-height:42px;padding:11px 20px;font-size:12px;} .burger{ display:none;width:44px;height:44px;background:none;border:1px solid var(--line); cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:6px; } .burger span{display:block;width:19px;height:1.4px;background:var(--ink);} .burger:hover{border-color:var(--ink);} .mobile-nav{ position:fixed;inset:0;z-index:110; background:var(--ink);color:var(--on-dark); display:flex;flex-direction:column; padding:18px var(--gutter) calc(26px + env(safe-area-inset-bottom)); opacity:0;transform:translateY(-8px); transition:opacity .35s var(--ease),transform .45s var(--ease); overflow-y:auto; } .mobile-nav[hidden]{display:none;} .mobile-nav.is-open{opacity:1;transform:none;} .mobile-nav-top{ display:flex;align-items:center;justify-content:space-between; padding-bottom:18px;border-bottom:1px solid var(--dline); } .mobile-nav-top .mono-label{color:var(--on-dark-dim);} .mobile-close{ width:44px;height:44px;background:none;border:1px solid var(--dline); display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--on-dark); } .mobile-links{margin-block:auto;padding-block:28px;} .mobile-links li{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--dline-2);} .mono-idx{font-family:var(--mono);font-size:10px;color:var(--stamp-lt);width:22px;flex:none;} .mobile-links a{ flex:1;padding:17px 0;font-size:clamp(25px,7vw,34px);font-weight:600;letter-spacing:-.03em; transition:color .3s var(--ease),padding-left .3s var(--ease); } /* pagina corrente: barra rossa a sinistra, come una voce spuntata su un indice */ .mobile-links a.is-active{ color:var(--stamp-lt); padding-left:17px; box-shadow:inset 3px 0 0 var(--stamp-lt); } .mobile-links a.is-active::after{ content:"Sei qui"; margin-left:auto;padding-left:14px;align-self:center; font-family:var(--mono);font-size:11px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-dim); } .mobile-nav-foot{display:grid;gap:18px;} .mobile-nav-foot .btn-primary{background:var(--stamp);border-color:var(--stamp);color:#fff;} .mobile-contacts{ display:flex;flex-direction:column;gap:7px; font-family:var(--mono);font-size:11.5px;color:var(--on-dark-dim); } body.nav-open{overflow:hidden;} /* ------------------------------------------------------------ LASTRE FOTOGRAFICHE ------------------------------------------------------------ */ .plate{margin:0;position:relative;} .plate img{width:100%;object-fit:cover;background:var(--paper-3);display:block;} .plate-cap{ display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; padding-top:10px;margin-top:10px;border-top:1px solid var(--line); } .plate-code{ font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-dim);flex:none; } .plate-txt{font-size:12.5px;color:var(--ink-soft);line-height:1.45;} .plate-dark .plate-cap{border-top-color:var(--dline);} .plate-dark .plate-code{color:var(--on-dark-dim);} .plate-dark .plate-txt{color:var(--on-dark-soft);} .plate-band{ max-width:var(--wrap);margin-inline:auto; padding-inline:var(--gutter); margin-top:clamp(34px,4vw,66px); } .plate-band img{aspect-ratio:16/6.4;object-position:center 46%;} /* ------------------------------------------------------------ 06 FRONTESPIZIO — fotografia a tutto schermo ------------------------------------------------------------ */ .cover{ position:relative; min-height:min(94vh,980px); min-height:min(94dvh,980px); display:flex;flex-direction:column;justify-content:flex-end; padding-top:clamp(120px,16vw,210px); padding-bottom:clamp(20px,2.4vw,34px); overflow:hidden; color:#fff; } .cover-media{position:absolute;inset:0;z-index:0;} .cover-media img{ width:100%;height:100%;object-fit:cover;object-position:center 52%; filter:saturate(.95) contrast(1.02); } /* La fotografia resta a piena luminosità: il buio non è più steso su tutta l'immagine ma concentrato dove serve, in tre strati distinti. 1. fascia alta sottile — stacca le voci del menu dal cielo chiaro 2. base — regge la barra dati e cuce la fotografia alla sezione seguente 3. alone in basso a sinistra — segue la colonna del testo e svanisce prima di arrivare al soggetto */ .cover-veil{ position:absolute;inset:0; background: linear-gradient(180deg, rgba(12,17,20,.56) 0%, rgba(12,17,20,.20) 11%, rgba(12,17,20,0) 22%), linear-gradient(180deg, rgba(12,17,20,0) 56%, rgba(12,17,20,.30) 76%, rgba(12,17,20,.62) 90%, rgba(12,17,20,.88) 100%), radial-gradient(122% 94% at 3% 76%, rgba(12,17,20,.90) 0%, rgba(12,17,20,.80) 26%, rgba(12,17,20,.46) 54%, rgba(12,17,20,.14) 74%, rgba(12,17,20,0) 88%); } /* Sotto i 900 px il testo occupa tutta la larghezza: l'alone laterale non basta più e il velo torna verticale, ma parte più in basso di prima — la parte alta della fotografia resta luminosa. */ @media (max-width:900px){ .cover-veil{ background: linear-gradient(180deg, rgba(12,17,20,.60) 0%, rgba(12,17,20,.18) 9%, rgba(12,17,20,.04) 16%), linear-gradient(180deg, rgba(12,17,20,.04) 14%, rgba(12,17,20,.42) 26%, rgba(12,17,20,.68) 40%, rgba(12,17,20,.80) 62%, rgba(12,17,20,.90) 100%); } } .cover-inner{position:relative;z-index:2;padding-bottom:clamp(26px,3.4vw,54px);} /* etichetta: testo, non targhetta — qui il titolo deve dominare */ .cover .eyebrow{ background:transparent;color:#fff;padding:0; display:flex;align-items:center;gap:12px; margin-bottom:clamp(16px,1.8vw,24px); } .cover .eyebrow::before{ content:"";width:30px;height:2px;background:var(--stamp-lt);flex:none; } .cover-title{ font-size:clamp(38px,6.2vw,92px); font-weight:700;line-height:.96;letter-spacing:-.045em; margin-bottom:clamp(20px,2.4vw,34px); max-width:19ch; text-shadow:0 2px 30px rgba(0,0,0,.35); } .cover-title .line{display:block;} .cover-title em{font-style:normal;color:var(--stamp-lt);} .cover-text{ max-width:56ch;color:rgba(255,255,255,.92); font-size:clamp(14.5px,.95vw,17px); text-shadow:0 1px 18px rgba(0,0,0,.4); } .cover-text p+p{margin-top:.9em;} .cover-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,2.8vw,40px);} .cover .btn-primary{background:#fff;border-color:#fff;color:var(--ink);} .cover .btn-primary:hover{background:var(--stamp);border-color:var(--stamp);color:#fff;} .cover .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45);} .cover .btn-ghost:hover{border-color:#fff;} /* barra dati in fondo alla fotografia */ .cover-foot{ position:relative;z-index:2; display:flex;align-items:flex-end;justify-content:space-between; gap:clamp(18px,2.4vw,44px);flex-wrap:wrap; padding-top:clamp(16px,1.8vw,24px); border-top:1px solid rgba(255,255,255,.28); } .cover-fields{ display:grid;grid-template-columns:repeat(3,auto); gap:clamp(16px,2.4vw,48px); } .cover-fields div{display:flex;flex-direction:column;gap:5px;} .cover-fields dt{ font-family:var(--mono);font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:rgba(255,255,255,.7); } .cover-fields dd{font-size:13.5px;font-weight:600;letter-spacing:-.012em;color:#fff;} .cover-ref{ display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0; font-size:12px;color:rgba(255,255,255,.78); } .cover-code{ font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.55); } /* ------------------------------------------------------------ 07 REGISTRO CREDENZIALI ------------------------------------------------------------ */ .registry{ background:var(--ink);color:var(--on-dark); --surface:var(--ink); } .registry-list{ display:grid;grid-template-columns:repeat(4,1fr); border-left:1px solid var(--dline-2); } .registry-list li{ display:flex;flex-direction:column;gap:7px; padding:clamp(22px,2.4vw,34px) clamp(14px,1.6vw,26px); border-right:1px solid var(--dline-2); } .reg-key{font-size:clamp(18px,1.9vw,27px);font-weight:700;letter-spacing:-.03em;line-height:1;} .reg-val{ font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--on-dark-dim);line-height:1.5; } /* ------------------------------------------------------------ 08 PREMESSA ------------------------------------------------------------ */ .intro-grid{ display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(28px,4vw,80px);align-items:start; } .intro-body{color:var(--ink-soft);max-width:62ch;} .intro-body .lead{color:var(--ink);margin-bottom:1em;} .intro-side{ border:1px solid var(--line);background:var(--card); padding:clamp(20px,2.2vw,30px); } .intro-side .mono-label{display:block;margin-bottom:12px;} .statement{ font-size:clamp(17px,1.35vw,22px);font-weight:600;letter-spacing:-.025em; line-height:1.25;color:var(--ink);margin:0; } /* ------------------------------------------------------------ 09 SERVIZI — elenco di controllo ------------------------------------------------------------ */ .check-list{border-top:1px solid var(--line);} .check{ display:grid; grid-template-columns:auto clamp(38px,4vw,62px) minmax(0,1fr) minmax(0,1.15fr); gap:clamp(12px,1.8vw,30px); align-items:start; padding:clamp(20px,2.2vw,32px) 0 clamp(22px,2.4vw,36px); border-bottom:1px solid var(--line-2); transition:background .4s var(--ease); } .check:hover{background:var(--card);} .check-mark{ width:26px;height:26px;flex:none;margin-top:2px; border:1px solid var(--line); display:flex;align-items:center;justify-content:center; color:transparent;background:var(--paper-2); transition:color .4s var(--ease),border-color .4s var(--ease); } .check-mark svg{width:16px;height:16px;} .check:hover .check-mark{color:var(--stamp);border-color:var(--stamp);} .check-code{ font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--stamp);padding-top:6px; } .check-kicker{ font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase; color:var(--ink-dim);margin:0 0 10px; } .check-title{ font-size:clamp(19px,1.8vw,27px);line-height:1.12;letter-spacing:-.03em;margin:0;max-width:19ch; } .check-text{ color:var(--ink-soft);font-size:14px;line-height:1.68;margin:0;max-width:54ch;padding-top:2px; } /* confronto prima / dopo */ .compare{ margin-top:clamp(34px,4vw,64px); border:1px solid var(--line);background:var(--card); padding:clamp(16px,1.8vw,26px); } .compare-head{ display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line-2); } .compare-head .mono-label:first-child{color:var(--stamp);} .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,22px);} .compare-item{margin:0;} .compare-item img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--paper-3);} .compare-item figcaption{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding-top:12px;font-size:12.5px;color:var(--ink-soft); } .tag-state{ font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; padding:4px 9px;border:1px solid currentColor; } .tag-before{color:var(--stamp);} .tag-after{color:#2C6B4F;} /* lastre a coppia */ .plates-duo{ display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); gap:clamp(14px,1.6vw,26px); margin-top:clamp(30px,3.4vw,56px); } .plates-duo .plate:first-child img{aspect-ratio:16/9.6;object-position:center 48%;} .plates-duo .plate:last-child img{aspect-ratio:1.03;object-position:center 46%;} /* ------------------------------------------------------------ 10 TECHNICAL CONTROL — tabella su fondo scuro ------------------------------------------------------------ */ .techctrl{ background:var(--ink);color:var(--on-dark); padding-bottom:0; --surface:var(--ink); } .techctrl .sec-head{border-top-color:var(--on-dark);} .techctrl .eyebrow{background:var(--stamp);color:#fff;} .techctrl .sec-note{color:var(--on-dark-soft);} .techctrl .mono-label{color:var(--on-dark-dim);} .techctrl .sec-n{color:var(--stamp-lt);} .tc-layout{ display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr); gap:clamp(26px,3.4vw,64px);align-items:start; } .tc-table{display:block;} .tc-thead{ display:grid;grid-template-columns:56px minmax(0,.85fr) minmax(0,1.3fr); gap:clamp(12px,1.8vw,28px); padding-bottom:10px;border-bottom:1px solid var(--dline); } .tc-thead span{ font-family:var(--mono);font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--on-dark-dim); } .tc-row{ display:grid;grid-template-columns:56px minmax(0,.85fr) minmax(0,1.3fr); gap:clamp(12px,1.8vw,28px);align-items:baseline; padding-block:clamp(16px,1.7vw,24px); border-bottom:1px solid var(--dline-2); transition:background .4s var(--ease); } .tc-row:hover{background:rgba(242,240,235,.045);} .tc-ref{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--stamp-lt);} .tc-name{font-size:clamp(14px,1.1vw,17px);font-weight:600;letter-spacing:.01em;text-transform:uppercase;} .tc-desc{color:var(--on-dark-soft);font-size:13.5px;line-height:1.6;} .tc-aside{display:grid;gap:clamp(18px,2vw,28px);} .tc-aside .plate img{aspect-ratio:3/4;object-position:center 45%;} .tc-note{border-left:2px solid var(--stamp-lt);padding-left:16px;} .tc-note p{color:var(--on-dark-soft);font-size:13.5px;margin-top:8px;} .techctrl .plate-band{margin-bottom:0;padding-bottom:clamp(46px,5vw,80px);} /* ------------------------------------------------------------ 11 SETTORI ------------------------------------------------------------ */ .sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,28px);} .sec-card{display:flex;flex-direction:column;} .sec-card .plate{overflow:hidden;} .sec-card .plate img{ width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 45%; transition:transform .9s var(--ease); } .sec-card:hover .plate img{transform:scale(1.035);} .sec-plate{ display:flex;flex-direction:column;gap:6px; padding:14px 0 12px;border-bottom:1px solid var(--line); } .sec-plate .mono-label{color:var(--stamp);} .sec-name{font-size:clamp(19px,1.7vw,26px);letter-spacing:-.032em;line-height:1;} .sec-card>p{padding-top:14px;font-size:13.5px;line-height:1.6;color:var(--ink-soft);} /* ------------------------------------------------------------ 12 TECHNICAL DIRECTOR + REGISTRO + CERTIFICAZIONI ------------------------------------------------------------ */ .dir-grid{ display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,4vw,80px);align-items:start; } .dir-media .plate img{aspect-ratio:4/3.6;object-position:center 28%;} .dir-text{color:var(--ink-soft);max-width:60ch;} .dir-copy .fields{margin-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line);padding-top:6px;} .dir-cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,26px);margin-top:clamp(22px,2.4vw,34px);} /* registro esperienza */ .reg{border-top:2px solid var(--ink);} .reg-group{ display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr); gap:clamp(20px,3vw,56px); padding-block:clamp(24px,2.6vw,40px); border-bottom:1px solid var(--line-2); } .reg-side .mono-label{display:block;margin-bottom:10px;color:var(--stamp);} .reg-title{font-size:clamp(20px,1.9vw,29px);letter-spacing:-.032em;line-height:1.05;} .reg-foot{margin-top:14px;font-size:13px;color:var(--ink-soft);line-height:1.58;max-width:36ch;} .reg-intro{ font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase; color:var(--ink-dim);margin:0 0 14px; } .reg-list{display:flex;flex-wrap:wrap;gap:7px;} .reg-list li{ border:1px solid var(--line-2);background:var(--card); padding:8px 13px;font-size:13px;font-weight:500; transition:border-color .35s var(--ease),color .35s var(--ease); } .reg-list li:hover{border-color:var(--stamp);color:var(--stamp);} .disclaimer{ margin-top:clamp(22px,2.4vw,36px); font-size:12px;line-height:1.62;color:var(--ink-dim);max-width:90ch; } /* certificazioni */ .cert-main{ display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,32px);margin-bottom:clamp(28px,3.2vw,52px); } .cert-card{ background:var(--card);border:1px solid var(--line); padding:clamp(22px,2.4vw,38px); } .cert-top{ display:flex;justify-content:space-between;align-items:center;gap:14px; padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line-2); } .cert-state{ font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:#2C6B4F;border:1px solid currentColor;padding:4px 9px; } .cert-name{font-size:clamp(28px,3vw,46px);font-weight:700;letter-spacing:-.04em;margin-bottom:6px;} .cert-role{font-size:13.5px;font-weight:600;color:var(--ink-soft);margin-bottom:16px;} .cert-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,3.6vw,70px);} .cert-col .mono-label{display:block;margin-bottom:10px;color:var(--stamp);} .cert-col-title{ font-size:clamp(16px,1.3vw,20px);letter-spacing:-.02em; padding-bottom:14px;border-bottom:1px solid var(--line); } .dot-list li{ display:flex;gap:12px;align-items:flex-start; padding-block:9px;border-bottom:1px solid var(--line-3); font-size:14px;color:var(--ink-soft);line-height:1.5; } .dot-list li::before{ content:"";flex:none;margin-top:8px;width:5px;height:5px; border:1px solid var(--stamp); } /* ------------------------------------------------------------ 13 WHY — unica sezione a fondo pieno ------------------------------------------------------------ */ .why{ background:var(--stamp);color:#fff; border-block:1px solid rgba(0,0,0,.14); --surface:var(--stamp); } .why .sec-head{border-top-color:rgba(255,255,255,.9);} .why .sec-n{color:rgba(255,255,255,.72);} .why .eyebrow{background:#fff;color:var(--stamp);} /* targhetta invertita */ .why .sec-note{color:rgba(255,255,255,.9);} .why-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.34);} .why-item{ padding:clamp(22px,2.4vw,36px) clamp(14px,1.6vw,26px) clamp(26px,2.8vw,42px) 0; border-bottom:1px solid rgba(255,255,255,.22); } .why-item+.why-item{border-left:1px solid rgba(255,255,255,.22);padding-left:clamp(16px,1.8vw,30px);} .why-key{ display:block;font-size:clamp(27px,3.1vw,46px);font-weight:700; line-height:.95;letter-spacing:-.045em;min-height:1.9em; color:#fff;margin-bottom:clamp(14px,1.6vw,24px); } .why-title{ font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:10px; } .why-item p{font-size:13.5px;color:rgba(255,255,255,.94);line-height:1.6;max-width:32ch;} /* ------------------------------------------------------------ 14 METODO — flusso ------------------------------------------------------------ */ .flow{ display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); } .flow-step{ position:relative; padding:clamp(22px,2.4vw,34px) clamp(16px,1.8vw,28px) clamp(26px,2.8vw,42px); border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); background:linear-gradient(180deg, var(--card), transparent); } .flow-step:first-child{border-left:1px solid var(--line-2);} .flow-step::after{ content:"";position:absolute;right:-5px;top:clamp(30px,3vw,44px); width:9px;height:9px;background:var(--paper); border-top:1px solid var(--line);border-right:1px solid var(--line); transform:rotate(45deg);z-index:2; } .flow-step:last-child::after{display:none;} .flow-n{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em; color:var(--stamp);margin-bottom:clamp(20px,2.2vw,32px); } .flow-title{ font-size:clamp(17px,1.5vw,23px);letter-spacing:-.03em;margin-bottom:10px; } .flow-title::before{ content:"";display:block;width:20px;height:2px;background:var(--ink);margin-bottom:12px; } .flow-step p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;} /* ------------------------------------------------------------ 15 RICHIESTA ------------------------------------------------------------ */ .request{background:var(--ink);color:var(--on-dark);--surface:var(--ink);} .request .sec-head{border-top-color:var(--on-dark);} .request .eyebrow{background:var(--stamp);color:#fff;} .request .sec-n{color:var(--stamp-lt);} .request .mono-label{color:var(--on-dark-dim);} .req-grid{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,4.4vw,84px);align-items:start; } .req-text{color:var(--on-dark-soft);max-width:46ch;font-size:clamp(14.5px,.9vw,16.5px);} .fields-contact{margin-top:clamp(24px,2.6vw,38px);border-top:1px solid var(--dline);padding-top:6px;} .fields-contact .field-row::before{border-bottom-color:var(--dline);} .fields-contact dt{background:var(--ink);color:var(--on-dark-dim);} .fields-contact dd{background:var(--ink);font-size:clamp(15px,1.15vw,19px);} .fields-contact a{ display:inline-flex;align-items:center;gap:7px;border-bottom:1px solid transparent; transition:color .35s var(--ease),border-color .35s var(--ease); } .fields-contact a:hover{color:var(--stamp-lt);border-bottom-color:var(--stamp-lt);} .req-sectors{ margin-top:clamp(22px,2.4vw,34px); font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--on-dark-dim); } /* ------------------------------------------------------------ IL MODULO — foglio bianco sulla sezione scura Un modulo di richiesta è un foglio da compilare: farlo di carta sul fondo inchiostro lo stacca e lo rende la cosa più visibile della pagina. Risolve anche il riempimento automatico del browser, che impone sempre uno sfondo chiaro ai campi e su un modulo scuro produce caselle illeggibili. ------------------------------------------------------------ */ .req-form-wrap{ background:var(--paper-2); color:var(--ink); border:1px solid rgba(16,28,38,.14); padding:clamp(22px,2.4vw,38px); box-shadow:0 18px 50px rgba(0,0,0,.30); --surface:var(--paper-2); } .form-intro{ font-size:12.5px;color:var(--ink-soft);line-height:1.6; padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line-2); } .form-intro .mono-label{display:block;color:var(--stamp);margin-bottom:7px;} .field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;} .field-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .field label{ font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-dim); } .field label span{color:var(--stamp);} .field input,.field select,.field textarea{ width:100%;min-height:48px;background:var(--paper); border:1px solid rgba(16,28,38,.22);color:var(--ink); padding:12px 13px;font-family:var(--font);font-size:15px;border-radius:0; transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease); } .field input::placeholder,.field textarea::placeholder{color:var(--ink-dim);opacity:1;} .field textarea{min-height:112px;resize:vertical;line-height:1.55;} .field select{ appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6873' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;background-size:11px;padding-right:36px; } .field select option{background:#fff;color:var(--ink);} .field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-dim);} .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--stamp);background:#fff;outline:none; box-shadow:0 0 0 3px rgba(168,47,35,.14); } .field input.has-error,.field textarea.has-error{border-color:var(--stamp);background:#FFF6F4;} /* riempimento automatico: senza questo il browser impone un fondo suo */ .field input:-webkit-autofill, .field textarea:-webkit-autofill, .field select:-webkit-autofill{ -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 60px var(--paper) inset; box-shadow:0 0 0 60px var(--paper) inset; } .form-error{font-size:12.5px;color:var(--stamp);margin-bottom:12px;font-weight:600;} .form-note{margin-top:14px;font-size:11.5px;line-height:1.55;color:var(--ink-dim);} .form-note a{color:var(--ink-soft);border-bottom:1px solid var(--line);} .form-note a:hover{color:var(--stamp);border-bottom-color:var(--stamp);} /* il pulsante di invio resta rosso pieno: è l'azione della pagina */ .req-form-wrap .btn-accent{background:var(--stamp);border-color:var(--stamp);color:#fff;} .req-form-wrap .btn-accent:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);} .hp-field{ position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0; overflow:hidden;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%); } .form-success{ display:flex;flex-direction:column; border-left:3px solid var(--stamp);padding-left:clamp(16px,1.8vw,24px); } .form-success[hidden]{display:none;} /* l'attributo hidden deve avere la meglio */ #contactForm[hidden]{display:none;} .form-success:focus{outline:none;} .form-success .mono-label{color:var(--stamp);margin-bottom:12px;} .form-success-title{font-size:clamp(21px,2vw,28px);letter-spacing:-.03em;margin-bottom:12px;} .form-success p{color:var(--ink-soft);font-size:15px;line-height:1.65;} /* ------------------------------------------------------------ 16 FOOTER ------------------------------------------------------------ */ .site-footer{ background:var(--ink-2);color:var(--on-dark); border-top:1px solid var(--dline-2); padding-block:clamp(40px,4.4vw,72px) clamp(20px,2.2vw,30px); } .foot-grid{ display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,56px); padding-bottom:clamp(30px,3.4vw,54px);border-bottom:1px solid var(--dline-2); } .site-footer .mono-label{color:var(--on-dark-dim);} .wordmark-foot .wordmark-a{font-size:21px;} .wordmark-foot .wordmark-b,.mobile-nav .wordmark-b{color:var(--on-dark-dim);} .wordmark-foot .wordmark-a i,.mobile-nav .wordmark-a i, body.page-home .site-header:not(.is-solid) .wordmark-a i{color:var(--stamp-lt);} body.page-home .site-header:not(.is-solid) .wordmark-b{color:rgba(255,255,255,.72);} .foot-disc{margin-top:18px;font-size:12.5px;line-height:1.7;color:var(--on-dark-soft);} .foot-dir{margin-top:20px;font-size:13.5px;font-weight:600;} .foot-dir .mono-label{margin-bottom:5px;} .foot-col>.mono-label{display:block;margin-bottom:16px;} .foot-col ul{display:flex;flex-direction:column;gap:10px;} .foot-col a{font-size:13.5px;color:var(--on-dark-soft);display:inline-flex;align-items:center;gap:6px; transition:color .3s var(--ease);} .foot-col a:hover{color:var(--stamp-lt);} .foot-col address{font-size:13px;line-height:1.7;color:var(--on-dark-soft);} .foot-fiscal{margin-top:12px;font-family:var(--mono);font-size:10.5px;line-height:1.7;color:var(--on-dark-dim);} .foot-bottom{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px; padding-top:clamp(18px,2vw,26px);font-size:12px;color:var(--on-dark-dim); } .foot-legal{display:flex;gap:20px;} /* credito di realizzazione — in linea nella riga finale */ .foot-credit{ display:inline-flex;align-items:center;gap:11px; opacity:.62;transition:opacity .35s var(--ease); } .foot-credit:hover{opacity:1;} .foot-credit .mono-label{color:var(--on-dark-dim);font-size:9.5px;} .foot-credit img{width:auto;height:16px;display:block;} .legal-link{font-size:12px;color:var(--on-dark-dim);border-bottom:1px solid transparent; transition:color .3s var(--ease),border-color .3s var(--ease);} .legal-link:hover{color:var(--on-dark);border-bottom-color:var(--dline);} /* ------------------------------------------------------------ REVEAL ------------------------------------------------------------ */ .reveal{ opacity:0;transform:translateY(14px); transition:opacity .75s var(--ease),transform .85s var(--ease); } .reveal.is-in{opacity:1;transform:none;} .no-js .reveal{opacity:1;transform:none;} /* --- vocabolario delle entrate --------------------------------- rv-left / rv-right scorrimento orizzontale breve (colonne, media) rv-wipe scopertura da sinistra (fotografie, fasce) rv-none nessun movimento proprio: serve solo a far partire il filetto di sezione Nessuna proprietà fuori da opacity / transform / clip-path: tutto sul compositore, nessun ricalcolo di layout. ----------------------------------------------------------------- */ /* niente will-change: su una pagina con un centinaio di elementi animati creerebbe altrettanti livelli di composizione, e su telefono si paga in memoria. Opacity e transform sono già accelerate da sole. */ .reveal.rv-left{transform:translate3d(-38px,0,0);} .reveal.rv-right{transform:translate3d(38px,0,0);} .reveal.rv-left.is-in,.reveal.rv-right.is-in{transform:none;} /* Scopertura da sinistra, fatta con una TENDINA sovrapposta e non ritagliando l'elemento. Motivo: un box ritagliato a larghezza zero ha area di intersezione nulla, l'IntersectionObserver non lo vede mai e is-in non arriva — la fascia resterebbe invisibile per sempre. Stesso motivo per cui le foto usano rv-zoom. La tendina è del colore della superficie sotto: --surface. */ .reveal.rv-wipe{opacity:1;transform:none;position:relative;} .reveal.rv-wipe::after{ content:"";position:absolute;inset:0;z-index:5;pointer-events:none; background:var(--surface); transform-origin:right center; transition:transform 1.05s var(--ease); } .reveal.rv-wipe.is-in::after{transform:scaleX(0);} .no-js .reveal.rv-wipe::after{display:none;} /* fotografie: la lastra sale in dissolvenza e l'immagine si assesta. NIENTE clip-path qui: un elemento ritagliato a larghezza zero non viene mai considerato visibile e le immagini lazy non si caricano. */ .reveal.rv-zoom{overflow:clip;} .reveal.rv-zoom img{ transform:scale(1.055); transition:transform 1.4s var(--ease); } .reveal.rv-zoom.is-in img{transform:none;} .no-js .reveal.rv-zoom img{transform:none;} .reveal.rv-none{opacity:1;transform:none;} /* il filetto di sezione si traccia da sinistra, come una riga tirata */ .sec-head.rv-none{border-top-color:transparent;position:relative;} .sec-head.rv-none::before{ content:"";position:absolute;left:0;right:0;top:-2px;height:2px; background:currentColor; transform:scaleX(0);transform-origin:left center; transition:transform 1s var(--ease); } .sec-head.rv-none.is-in::before{transform:scaleX(1);} .no-js .sec-head.rv-none::before{transform:scaleX(1);} /* le entrate orizzontali non devono generare barra di scorrimento */ main{overflow-x:clip;} @media (prefers-reduced-motion:reduce){ .reveal.rv-wipe::after{display:none;} .reveal.rv-zoom img{transform:none;} .sec-head.rv-none::before{transform:scaleX(1);} } /* ------------------------------------------------------------ 17 PAGINE LEGALI ------------------------------------------------------------ */ /* pagine interne e legali: barra sempre su fondo chiaro */ body.page-legal .site-header, body.page-inner .site-header{ background:rgba(242,240,235,.94); backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px); } body.page-legal .header-rule, body.page-inner .header-rule{opacity:1;} .legal-hero{padding-top:clamp(104px,11vw,150px);padding-bottom:clamp(26px,3vw,44px);} .legal-hero .h-display{max-width:18ch;} .legal-sub{margin-top:clamp(16px,1.8vw,24px);color:var(--ink-soft);font-size:clamp(15px,1vw,17px);max-width:60ch;} .legal-meta{ display:flex;flex-wrap:wrap;gap:clamp(16px,2.2vw,40px); margin-top:clamp(22px,2.6vw,36px);padding-top:18px;border-top:2px solid var(--ink); } .legal-meta div{display:flex;flex-direction:column;gap:5px;} .legal-meta dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim);} .legal-meta dd{font-size:13.5px;font-weight:600;} .legal-layout{ display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,.7fr); gap:clamp(28px,4vw,80px);align-items:start; padding-bottom:clamp(60px,7vw,120px); } .legal-toc{position:sticky;top:clamp(88px,8vw,112px);border-top:1px solid var(--line);padding-top:18px;} .legal-toc .mono-label{display:block;margin-bottom:14px;} .legal-toc ol{display:flex;flex-direction:column;counter-reset:toc;} .legal-toc li{border-bottom:1px solid var(--line-3);} .legal-toc a{ display:flex;gap:12px;align-items:baseline;padding-block:8px; font-size:13px;color:var(--ink-soft);transition:color .3s var(--ease); } .legal-toc a::before{ counter-increment:toc;content:counter(toc,decimal-leading-zero); font-family:var(--mono);font-size:10px;color:var(--stamp);flex:none; } .legal-toc a:hover{color:var(--ink);} .legal-body{max-width:74ch;} .legal-body>section{ padding-top:clamp(22px,2.4vw,36px);margin-top:clamp(22px,2.4vw,36px); border-top:1px solid var(--line-2); } .legal-body>section:first-child{border-top:0;margin-top:0;padding-top:0;} .legal-body h2{ font-size:clamp(18px,1.5vw,24px);letter-spacing:-.028em;line-height:1.16; margin-bottom:14px;display:flex;gap:14px;align-items:baseline; } .legal-body h2 .sec-n{font-family:var(--mono);font-size:11px;color:var(--stamp);flex:none;padding-top:2px;} .legal-body h3{font-size:15px;font-weight:700;margin:20px 0 10px;} .legal-body p,.legal-body li{color:var(--ink-soft);font-size:15px;line-height:1.72;} .legal-body ul{margin:10px 0 0;} .legal-body ul li{position:relative;padding:6px 0 6px 22px;} .legal-body ul li::before{ content:"";position:absolute;left:0;top:18px;width:9px;height:1px;background:var(--stamp); } .legal-body strong{color:var(--ink);} .legal-body dl.legal-data{margin-top:12px;border-top:1px solid var(--line-3);} .legal-body dl.legal-data>div{ display:flex;justify-content:space-between;gap:18px; padding-block:9px;border-bottom:1px solid var(--line-3); } .legal-body dl.legal-data dt{ font-family:var(--mono);font-size:9.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-dim);padding-top:3px; } .legal-body dl.legal-data dd{font-size:14px;text-align:right;} .legal-body a:not(.btn){color:var(--ink);border-bottom:1px solid var(--line); transition:color .3s var(--ease),border-color .3s var(--ease);} .legal-body a:not(.btn):hover{color:var(--stamp);border-bottom-color:var(--stamp);} .legal-callout{margin-top:16px;padding:16px 20px;background:var(--card);border-left:2px solid var(--stamp);} .legal-callout p{font-size:14px;margin:0;} .legal-back{ display:flex;flex-wrap:wrap;gap:14px; padding-top:clamp(22px,2.6vw,38px);margin-top:clamp(22px,2.6vw,38px);border-top:1px solid var(--line); } /* ------------------------------------------------------------ 18 RESPONSIVE ------------------------------------------------------------ */ @media (max-width:1180px){ .sec-head{grid-template-columns:clamp(56px,7vw,90px) minmax(0,1fr);} .sec-note,.sec-rev{grid-column:2;padding-top:14px;justify-self:start;} .check{grid-template-columns:auto clamp(34px,4vw,52px) minmax(0,1fr);} .check-text{grid-column:3;padding-top:12px;max-width:60ch;} .tc-layout{grid-template-columns:1fr;} .tc-aside{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;} .tc-aside .plate img{aspect-ratio:4/3;} .cover-fields{grid-template-columns:repeat(2,auto);} } @media (max-width:960px){ .nav-desktop,.btn-header{display:none;} .burger{display:flex;} .site-header{background:rgba(242,240,235,.95);backdrop-filter:saturate(150%) blur(12px);} .site-header .header-rule{opacity:1;} .cover{min-height:auto;padding-top:clamp(110px,26vw,160px);} .cover-foot{flex-direction:column;align-items:flex-start;} .registry-list{grid-template-columns:1fr 1fr;} .registry-list li:nth-child(-n+2){border-bottom:1px solid var(--dline-2);} .intro-grid{grid-template-columns:1fr;gap:26px;} .plates-duo{grid-template-columns:1fr;} .plates-duo .plate:last-child img{aspect-ratio:16/9;} .sec-grid{grid-template-columns:1fr 1fr;} .dir-grid{grid-template-columns:1fr;gap:28px;} .dir-media{max-width:520px;} .reg-group{grid-template-columns:1fr;gap:16px;} .reg-foot{max-width:none;} .cert-main,.cert-cols{grid-template-columns:1fr;} .cert-cols{gap:30px;} .why-grid{grid-template-columns:1fr 1fr;} .why-item:nth-child(3){border-left:0;padding-left:0;} .flow{grid-template-columns:1fr 1fr;} .flow-step:nth-child(3){border-left:1px solid var(--line-2);} .flow-step::after{display:none;} .req-grid{grid-template-columns:1fr;gap:34px;} .foot-grid{grid-template-columns:1fr 1fr;} .foot-brand{grid-column:span 2;} .legal-layout{grid-template-columns:1fr;gap:30px;} .legal-toc{position:static;} .legal-toc ol{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;} } @media (max-width:680px){ .sec-head{grid-template-columns:1fr;gap:6px;} .sec-n{padding-top:0;} .sec-note,.sec-rev{grid-column:1;padding-top:12px;} .check{grid-template-columns:auto minmax(0,1fr);row-gap:6px;} .check-code{grid-column:2;padding-top:0;} .check-body,.check-text{grid-column:2;} .check-title{max-width:none;} .compare-grid{grid-template-columns:1fr;} .tc-thead{display:none;} .tc-row{grid-template-columns:40px minmax(0,1fr);row-gap:6px;} .tc-desc{grid-column:2;} .tc-aside{grid-template-columns:1fr;} .sec-grid{grid-template-columns:1fr;} .sec-card .plate img{aspect-ratio:16/10;} .why-grid{grid-template-columns:1fr;} .why-item,.why-item+.why-item{border-left:0;padding-left:0;padding-right:0;} .why-key{min-height:0;} .why-item p{max-width:none;} .flow{grid-template-columns:1fr;} .flow-step,.flow-step:nth-child(3){border-left:1px solid var(--line-2);} .field-2{grid-template-columns:1fr;gap:0;} .foot-grid{grid-template-columns:1fr;} .foot-brand{grid-column:span 1;} .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px;} .legal-toc ol{grid-template-columns:1fr;} .legal-body h2{flex-direction:column;gap:6px;} .legal-body dl.legal-data>div{flex-direction:column;gap:4px;} .legal-body dl.legal-data dd{text-align:left;} .cover-cta{flex-direction:column;align-items:stretch;} .cover-cta .btn{width:100%;} .cover-fields{grid-template-columns:1fr 1fr;gap:16px 22px;} .cover-title{max-width:none;} .field-row{flex-wrap:wrap;gap:2px;} .field-row::before{display:none;} .field-row dd{margin-left:0;text-align:left;padding-left:0;} .field-row dt{padding-right:0;} } /* ------------------------------------------------------------ 22 PAGINE INTERNE — copertina, percorso, ponti ------------------------------------------------------------ */ .page-cover{ padding-top:clamp(104px,11vw,152px); padding-bottom:clamp(26px,3vw,46px); } .page-title{ font-size:clamp(32px,4.6vw,66px);max-width:20ch; font-weight:700;line-height:.98;letter-spacing:-.045em; margin-bottom:clamp(18px,2vw,28px); } .page-lead{ font-size:clamp(16px,1.15vw,20px);line-height:1.5; color:var(--ink-soft);max-width:62ch;font-weight:500;letter-spacing:-.015em; } .page-fields{ display:grid;grid-template-columns:repeat(4,auto);justify-content:start; gap:clamp(16px,2.4vw,52px); margin-top:clamp(24px,2.8vw,40px); padding-top:18px;border-top:2px solid var(--ink); } .page-fields div{display:flex;flex-direction:column;gap:5px;} .page-fields dt{ font-family:var(--mono);font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-dim); } .page-fields dd{font-size:14px;font-weight:600;letter-spacing:-.012em;} .page-fields a{border-bottom:1px solid var(--line);transition:color .3s var(--ease),border-color .3s var(--ease);} .page-fields a:hover{color:var(--stamp);border-bottom-color:var(--stamp);} .page-cover .plate-band{margin-top:clamp(26px,3vw,46px);} .page-cover .plate-band img{aspect-ratio:16/6.2;} /* percorso professionale */ .track{border-top:2px solid var(--ink);} .track-item{ display:grid;grid-template-columns:clamp(110px,13vw,190px) minmax(0,1fr); gap:clamp(16px,2.4vw,44px); padding-block:clamp(20px,2.2vw,32px); border-bottom:1px solid var(--line-2); transition:background .4s var(--ease); } .track-item:hover{background:var(--card);} .track-year{ font-family:var(--mono);font-size:11px;letter-spacing:.1em; color:var(--stamp);padding-top:5px; } .track-body h3{ font-size:clamp(16px,1.35vw,21px);letter-spacing:-.025em;margin-bottom:8px; } .track-body p{font-size:14px;line-height:1.65;color:var(--ink-soft);max-width:70ch;margin:0;} /* registro con date */ .ev-list{display:flex;flex-direction:column;border-top:1px solid var(--line-3);} .ev-list li{ display:grid;grid-template-columns:clamp(84px,9vw,124px) minmax(0,1fr); gap:clamp(12px,1.6vw,26px); padding-block:11px;border-bottom:1px solid var(--line-3); } .ev-year{ font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-dim);padding-top:3px; } .ev-txt{font-size:14px;line-height:1.6;color:var(--ink-soft);} .ev-txt strong{color:var(--ink);font-weight:700;} /* pulsante ponte fra home e pagina dedicata */ .bridge{ display:flex;align-items:center;justify-content:space-between; gap:clamp(18px,2.4vw,40px);flex-wrap:wrap; margin-top:clamp(28px,3.2vw,50px); padding:clamp(18px,2vw,28px) clamp(20px,2.2vw,32px); background:var(--card);border:1px solid var(--line); border-left:3px solid var(--stamp); } .bridge-txt .mono-label{display:block;margin-bottom:7px;color:var(--stamp);} .bridge-txt p{margin:0;font-size:14.5px;color:var(--ink-soft);max-width:60ch;} .req-more{margin-top:clamp(18px,2vw,26px);} .req-more .link-inline{color:var(--on-dark-soft);border-bottom-color:var(--dline);} .req-more .link-inline:hover{color:var(--stamp-lt);border-bottom-color:var(--stamp-lt);} /* CTA compatta nelle pagine interne */ .cta-slim{ display:flex;align-items:center;justify-content:space-between; gap:clamp(20px,3vw,56px);flex-wrap:wrap; } .cta-slim .req-text{margin:0;} .cta-slim-actions{display:flex;gap:10px;flex-wrap:wrap;} .request .btn-ghost{color:var(--on-dark);border-color:var(--dline);} .request .btn-ghost:hover{border-color:var(--stamp-lt);color:var(--stamp-lt);} /* indicazioni nel modulo */ .req-hint{ margin-top:clamp(22px,2.4vw,34px); padding:clamp(16px,1.8vw,24px); border:1px solid var(--dline-2); } .req-hint .mono-label{display:block;margin-bottom:12px;color:var(--stamp-lt);} .hint-list li{ position:relative;padding:6px 0 6px 20px; font-size:13.5px;line-height:1.55;color:var(--on-dark-soft); } .hint-list li::before{ content:"";position:absolute;left:0;top:16px;width:9px;height:1px;background:var(--stamp-lt); } /* passaggi dopo l'invio della richiesta (colonna sinistra, fondo scuro) */ .req-steps-label{ display:block;margin:clamp(24px,2.6vw,36px) 0 12px; color:var(--stamp-lt); } .req-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--dline-2);} .req-steps li{ display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px; padding-block:14px;border-bottom:1px solid var(--dline-2); } .step-n{ font-family:var(--mono);font-size:11px;letter-spacing:.14em; color:var(--on-dark-dim);padding-top:2px; } .step-title{margin:0 0 4px;font-size:14.5px;font-weight:600;letter-spacing:-.012em;color:var(--on-dark);} .step-txt{margin:0;font-size:13px;line-height:1.55;color:var(--on-dark-soft);} /* dati societari */ .data-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,70px);} @media (max-width:960px){ .page-fields{grid-template-columns:repeat(2,auto);} .track-item{grid-template-columns:1fr;gap:8px;} .track-year{padding-top:0;} .data-grid{grid-template-columns:1fr;gap:0;} .bridge{flex-direction:column;align-items:flex-start;} .cta-slim{flex-direction:column;align-items:flex-start;} } @media (max-width:680px){ .page-fields{grid-template-columns:1fr;gap:14px;} .ev-list li{grid-template-columns:1fr;gap:4px;} .ev-year{padding-top:0;} .cta-slim-actions{width:100%;flex-direction:column;} .cta-slim-actions .btn{width:100%;} } /* elenco "per quale attività" (pagina contatti) */ .pick-list{border-top:2px solid var(--ink);} .pick{border-bottom:1px solid var(--line-2);} .pick a{ display:grid;grid-template-columns:clamp(38px,4vw,60px) minmax(0,1fr) auto; gap:clamp(12px,1.8vw,28px);align-items:center; padding:clamp(16px,1.8vw,26px) clamp(10px,1.4vw,20px) clamp(16px,1.8vw,26px) 0; transition:background .35s var(--ease),padding-left .35s var(--ease); } .pick a:hover{background:var(--card);padding-left:14px;} .pick-n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--stamp);} .pick-body{display:flex;flex-direction:column;gap:5px;} .pick-title{font-size:clamp(16px,1.35vw,21px);font-weight:600;letter-spacing:-.025em;} .pick-txt{font-size:13.5px;color:var(--ink-soft);line-height:1.55;max-width:64ch;} .pick-go{ font-size:16px;color:var(--ink-dim); transition:transform .35s var(--ease),color .35s var(--ease); } .pick a:hover .pick-go{transform:translateX(5px);color:var(--stamp);} @media (max-width:680px){ .pick a{grid-template-columns:auto minmax(0,1fr);row-gap:4px;} .pick-go{display:none;} } /* fascia contatti in evidenza (pagina contatti) */ .contact-band{ background:var(--stamp);color:#fff; margin-top:clamp(26px,3vw,46px); padding-block:clamp(26px,3vw,44px); } .contact-band-grid{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,44px); } .contact-band-grid>div{ display:flex;flex-direction:column;gap:9px; padding-left:clamp(14px,1.6vw,26px); border-left:1px solid rgba(255,255,255,.32); } .contact-band-grid>div:first-child{border-left:0;padding-left:0;} .contact-band-grid dt{ font-family:var(--mono);font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:rgba(255,255,255,.78); } .contact-band-grid dd{ font-size:clamp(17px,1.55vw,25px);font-weight:700; letter-spacing:-.028em;line-height:1.1;color:#fff; overflow-wrap:anywhere; } .contact-band-grid a{ display:inline-flex;align-items:baseline;gap:7px; border-bottom:1px solid rgba(255,255,255,.4); transition:border-color .3s var(--ease); } .contact-band-grid a:hover{border-bottom-color:#fff;} @media (max-width:960px){ .contact-band-grid{grid-template-columns:1fr 1fr;gap:22px 26px;} .contact-band-grid>div:nth-child(3){border-left:0;padding-left:0;} } @media (max-width:620px){ .contact-band-grid{grid-template-columns:1fr;gap:20px;} .contact-band-grid>div{border-left:0;padding-left:0;padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.28);} .contact-band-grid>div:last-child{border-bottom:0;padding-bottom:0;} } /* pagina Settori */ .sector-block{padding-block:clamp(46px,5.4vw,92px);} .sector-grid{ display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:clamp(24px,3.4vw,64px);align-items:start; } .sector-block:nth-of-type(even) .sector-media{order:2;} .sector-media .plate img{aspect-ratio:3/4;object-position:center 45%;} .sector-cols{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,44px); } .sector-cols .mono-label,.sector-act .mono-label{display:block;margin-bottom:10px;color:var(--stamp);} .sector-act{ margin-top:clamp(22px,2.4vw,34px);padding-top:clamp(20px,2.2vw,30px); border-top:1px solid var(--line); } .sector-specs{ margin-top:clamp(22px,2.4vw,34px); padding:clamp(16px,1.8vw,24px) clamp(18px,2vw,26px); background:var(--card);border:1px solid var(--line-2);border-left:3px solid var(--stamp); } .sector-specs .mono-label{display:block;margin-bottom:8px;color:var(--stamp);} .sector-note{ margin-top:clamp(20px,2.2vw,30px); font-size:13px;line-height:1.65;color:var(--ink-dim); } .sector-note a{ color:var(--stamp);border-bottom:1px solid transparent;white-space:nowrap; transition:border-color .3s var(--ease); } .sector-note a:hover{border-bottom-color:var(--stamp);} .page-fields a{display:inline-block;} @media (max-width:1080px){ .sector-grid{grid-template-columns:1fr;} .sector-block:nth-of-type(even) .sector-media{order:0;} .sector-media{max-width:420px;} .sector-media .plate img{aspect-ratio:4/3;} } @media (max-width:680px){ .sector-cols{grid-template-columns:1fr;gap:22px;} } /* variante navigazione: fascia rossa con le ancore di settore */ .contact-band-nav .contact-band-grid dd{font-size:clamp(16px,1.45vw,23px);} .contact-band-nav a{ border-bottom-color:transparent; gap:10px; } .contact-band-nav a:hover{border-bottom-color:#fff;} .band-go{ display:inline-block;font-size:.72em; transition:transform .3s var(--ease); } .contact-band-nav a:hover .band-go{transform:translateY(3px);} /* pagina Servizi */ .contact-band-six .contact-band-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(18px,2.2vw,30px);} .contact-band-six .contact-band-grid>div:nth-child(4), .contact-band-six .contact-band-grid>div:nth-child(7){border-left:0;padding-left:0;} .contact-band-six .contact-band-grid dd{font-size:clamp(15px,1.2vw,19px);} .svc-page-block .svc-lead{ font-size:clamp(15.5px,1.1vw,18px);line-height:1.6;color:var(--ink-soft); max-width:74ch;margin-bottom:clamp(24px,2.8vw,40px); } .svc-detail{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(24px,3.4vw,60px);align-items:start; } .svc-detail:only-child,.svc-detail:has(.svc-cols:only-child){grid-template-columns:1fr;} .svc-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,44px);} .svc-cols .mono-label{display:block;margin-bottom:10px;color:var(--stamp);} .svc-media .plate img{aspect-ratio:16/10;object-position:center 48%;} .svc-page-block .sector-specs{margin-top:clamp(22px,2.4vw,34px);} .svc-page-block .sector-note{margin-top:clamp(20px,2.2vw,30px);} @media (max-width:1080px){ .svc-detail{grid-template-columns:1fr;} .svc-media{max-width:560px;} .contact-band-six .contact-band-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .contact-band-six .contact-band-grid>div:nth-child(odd){border-left:0;padding-left:0;} .contact-band-six .contact-band-grid>div:nth-child(odd){border-left:0;padding-left:0;} } @media (max-width:680px){ .svc-cols{grid-template-columns:1fr;gap:22px;} .contact-band-six .contact-band-grid{grid-template-columns:1fr;} } /* fascia fotografica a tutta larghezza fra due sezioni */ .plate-full{ margin-block:0; padding-inline:0; max-width:none; } .plate-full img{aspect-ratio:16/6.4;object-position:center 48%;} .plate-full .plate-cap{ max-width:var(--wrap);margin-inline:auto; padding-inline:var(--gutter); border-top:0;padding-top:12px;margin-top:0; } @media (max-width:680px){ .plate-full img{aspect-ratio:16/9;} } /* riquadro specifiche: niente guida punteggiata, solo etichetta e valore */ .sector-specs .field-row::before{display:none;} .sector-specs .field-row{gap:18px;padding-block:8px;} .sector-specs .field-row dt{padding-right:0;background:transparent;} .sector-specs .field-row dd{padding-left:0;background:transparent;} /* le righe che si evidenziano al passaggio devono avere aria ai lati: padding interno + margine negativo, così il testo resta allineato alla griglia */ .track-item, .check{ padding-inline:clamp(14px,1.6vw,26px); margin-inline:calc(-1 * clamp(14px,1.6vw,26px)); } .check{padding-right:clamp(14px,1.6vw,26px);} .pick a{padding-inline:clamp(14px,1.6vw,26px);margin-inline:calc(-1 * clamp(14px,1.6vw,26px));} .pick a:hover{padding-left:clamp(14px,1.6vw,26px);} /* pulsante di verifica del certificato (nelle schede certificazioni) */ .cert-verify{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);} .cert-verify a{ display:inline-flex;align-items:center;gap:8px; min-height:42px;padding:10px 18px; border:1px solid var(--line); font-size:12.5px;font-weight:700;letter-spacing:.03em; transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease); } .cert-verify a:hover{border-color:var(--stamp);color:var(--stamp);} /* stato provvisorio: il link non c'è ancora — da collegare o togliere prima di pubblicare */ .cert-verify a.is-pending{ border-style:dashed;color:var(--ink-dim);cursor:not-allowed;opacity:.7; } .cert-verify a.is-pending:hover{border-color:var(--line);color:var(--ink-dim);} .cert-verify-note{ display:block;margin-top:9px; font-family:var(--mono);font-size:9.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-dim); } /* ------------------------------------------------------------ 19 SUPERFICIE NAVY (quarta battuta del ritmo di sfondo) Una sola sezione per pagina. Ribalta i token: tutto ciò che consuma --ink / --line / --card / --stamp si adatta da solo. Su questa superficie il rosso NON compare: l'accento è avorio (targhette, pulsanti) e azzurro acciaio (codici, micro-etichette). ------------------------------------------------------------ */ .surface-navy{ background:var(--navy); color:var(--on-dark); border-block:1px solid rgba(242,240,235,.14); --ink:#F2F0EB; --ink-soft:#C6CFDA; --ink-dim:#A6B2C0; --line:rgba(242,240,235,.26); --line-2:rgba(242,240,235,.16); --line-3:rgba(242,240,235,.10); --card:var(--navy-card); --field-bg:var(--navy); --surface:var(--navy); --stamp:var(--navy-key); } .section.surface-navy{background:var(--navy);} .surface-navy .sector-specs, .surface-navy .cert-card, .surface-navy .bridge{--field-bg:var(--navy-card);} /* elementi che non passano dai token */ .surface-navy .eyebrow{background:var(--on-dark);color:#1C2E4A;} .surface-navy .btn-primary{background:var(--on-dark);color:#1C2E4A;border-color:var(--on-dark);} .surface-navy .btn-primary:hover{background:var(--navy-key);border-color:var(--navy-key);color:#16253C;} .surface-navy .btn-accent{background:var(--on-dark);border-color:var(--on-dark);color:#1C2E4A;} .surface-navy .btn-accent:hover{background:var(--navy-key);border-color:var(--navy-key);color:#16253C;} .surface-navy .btn-ghost:hover{border-color:var(--navy-key);color:var(--navy-key);} .surface-navy .sector-media img, .surface-navy .dir-media img, .surface-navy .plate img{filter:saturate(.96);} /* ------------------------------------------------------------ 20 FAQ ------------------------------------------------------------ */ .faq-draft{ display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; margin-top:clamp(24px,2.6vw,38px); padding:12px clamp(14px,1.6vw,20px); border:1px dashed var(--line); background:transparent; } .faq-draft .mono-label{flex:none;color:var(--stamp);} .faq-draft p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-dim);} .faq-list{ list-style:none;margin:clamp(20px,2.4vw,32px) 0 0;padding:0; border-top:1px solid var(--line-2); } .faq-item{ display:grid; grid-template-columns:clamp(58px,6vw,92px) minmax(0,1fr); gap:clamp(12px,1.8vw,28px); padding-block:clamp(18px,2vw,26px); border-bottom:1px solid var(--line-2); } .faq-n{ font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-dim);padding-top:5px; } .faq-q{ margin:0; font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.016em; line-height:1.32;color:var(--ink);max-width:52ch; } .faq-a{ margin-top:14px; font-size:15px;line-height:1.66;color:var(--ink-soft);max-width:70ch; } .faq-a p{margin:0 0 10px;} .faq-a p:last-child{margin-bottom:0;} /* spazio già predisposto per la risposta — solo in bozza */ .faq-a.is-empty{ display:flex;align-items:center; min-height:72px; padding:0 16px; border:1px dashed var(--line); background:transparent; } .faq-a.is-empty .mono-label{color:var(--ink-dim);opacity:.8;} @media (max-width:640px){ .faq-item{grid-template-columns:1fr;gap:6px;} .faq-n{padding-top:0;} .faq-a.is-empty{min-height:60px;} } /* ------------------------------------------------------------ 21 MOBILE — leggibilità, scala tipografica, aree di tocco Riferimenti: WCAG 2.2 AA (1.4.4 ridimensionamento, 1.4.12 spaziatura, 2.5.8 dimensione del target), corpo minimo 16 px per il testo di lettura, 16 px sui campi form per impedire lo zoom automatico di iOS. ------------------------------------------------------------ */ /* — comportamenti di base — */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%;} :where(h1,h2,h3,.h-display,.cover-title,.page-title){text-wrap:balance;} :where(p,li,dd){text-wrap:pretty;} :where(h1,h2,h3,p,li,dd,dt,a){overflow-wrap:break-word;} [id]{scroll-margin-top:88px;} .mobile-nav{overscroll-behavior:contain;} @media (max-width:960px){ a,button,summary,input,select,textarea{-webkit-tap-highlight-color:rgba(168,47,35,.14);} [id]{scroll-margin-top:80px;} .site-header{padding-top:env(safe-area-inset-top);} .site-footer{padding-bottom:calc(env(safe-area-inset-bottom) + 8px);} .wrap{padding-inline:max(var(--gutter),env(safe-area-inset-left));} } @media (max-width:680px){ /* — 1. titoli più grandi — */ .cover-title{font-size:clamp(41px,11.6vw,52px);line-height:1.0;letter-spacing:-.04em;} .page-title{font-size:clamp(37px,10.2vw,46px);line-height:1.02;letter-spacing:-.04em;} .h-display{font-size:clamp(30px,8.2vw,38px);line-height:1.1;letter-spacing:-.03em;} .check-title{font-size:19px;line-height:1.28;} .faq-q{font-size:19px;line-height:1.3;} .sec-card-title,.svc-title,.reg-title,.cert-title{font-size:20px;line-height:1.24;} .statement,.why-key{font-size:22px;line-height:1.2;} .form-success-title{font-size:24px;} /* — 2. soglia di leggibilità: 16 px per il testo che si legge — */ .lead,.page-lead{font-size:18px;line-height:1.55;} .cover-text, .check-text,.sec-note,.svc-lead,.sector-note,.sector-body p, .dot-list li,.hint-list li,.step-txt,.faq-a, .reg-intro,.reg-foot,.ev-txt,.intro-body p,.dir-text p, .req-text,.legal-body p,.legal-body li,.track-item p, .why-item p,.flow-step p,.cert-card p,.tc-desc, .form-success p{font-size:16px;line-height:1.62;} .disclaimer,.foot-disc,.foot-fiscal,.form-note,.faq-draft p{font-size:14px;line-height:1.6;} /* micro-etichette tecniche: mai sotto 11,5 px */ .mono-label,.sec-n,.sec-rev,.plate-code,.faq-n,.step-n, .check-code,.cover-code,.band-go,.ev-year, .track-year,.tc-code,.flow-n,.exp-n{font-size:11.5px;letter-spacing:.12em;} .reg-key{font-size:26px;} .eyebrow{font-size:11.5px;letter-spacing:.14em;padding:8px 13px 7px;} .field-row dt,.contact-band dt,.page-fields dt{font-size:11.5px;letter-spacing:.11em;} .field-row dd,.page-fields dd{font-size:16px;} .contact-band dd{font-size:17px;} .reg-val{font-size:13px;} .plate-txt{font-size:13.5px;line-height:1.5;} .wordmark-b{font-size:9.5px;letter-spacing:.3em;} .lang-sep{font-size:13px;} .cover-fields dt,.registry-list .reg-val{font-size:11.5px;} .legal-link{font-size:14px;} .foot-credit{min-height:44px;} .foot-credit .mono-label{font-size:11px;} .foot-credit img{height:18px;} /* — 3. campi del modulo: 16 px, niente zoom su iOS — */ .field input,.field select,.field textarea{font-size:16px;min-height:50px;} .field textarea{min-height:132px;} .field label{font-size:11.5px;} /* — 4. aree di tocco (WCAG 2.2 · 2.5.8) — */ .lang{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;} .lang-switch{gap:0;} .foot-col a,.foot-legal a,.legal-toc a{ min-height:44px;display:inline-flex;align-items:center;font-size:15px; } .foot-col ul{gap:2px;} .foot-legal{display:flex;gap:20px;} .contact-band a,.cert-verify a,.pick a,.band-item{min-height:44px;} .contact-band-grid>div{padding-block:4px;} .burger{width:48px;height:48px;} .mobile-links a{min-height:52px;display:flex;align-items:center;} .mobile-links a.is-active{padding-left:15px;} .btn{min-height:52px;font-size:14px;} .link-inline{min-height:44px;display:inline-flex;align-items:center;} .fields-contact a{min-height:44px;display:inline-flex;align-items:center;justify-content:flex-end;} .wordmark{min-height:44px;} /* — 5. entrate più contenute: 38 px su 390 px di schermo sono troppi — */ .reveal.rv-left{transform:translate3d(-22px,0,0);} .reveal.rv-right{transform:translate3d(22px,0,0);} .reveal.rv-zoom img{transform:scale(1.04);} /* — 6. respiro verticale — */ :root{--sect-y:clamp(46px,12vw,72px);} .sec-head{gap:10px;} .faq-item{padding-block:20px;} .faq-a.is-empty{min-height:64px;} } /* schermi molto stretti: evita che i titoli sfondino */ @media (max-width:360px){ .cover-title{font-size:38px;letter-spacing:-.035em;} .page-title{font-size:34px;} .h-display{font-size:28px;} } /* ------------------------------------------------------------ 22 TORNA SU — pulsante flottante Compare dopo due schermate. Fisso, quindi utile durante la lettura e non solo a fondo pagina. ------------------------------------------------------------ */ .to-top{ position:fixed;z-index:70; right:max(18px,env(safe-area-inset-right)); bottom:calc(18px + env(safe-area-inset-bottom)); display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; width:56px;height:56px;padding:0; background:var(--stamp);color:#fff; border:1px solid var(--stamp);border-radius:0;cursor:pointer; box-shadow:0 6px 22px rgba(16,28,38,.28); opacity:0;visibility:hidden;transform:translateY(14px); transition:opacity .35s var(--ease),transform .35s var(--ease), visibility .35s var(--ease),background .3s var(--ease); } .to-top.is-in{opacity:1;visibility:visible;transform:none;} .to-top:hover{background:var(--ink);border-color:var(--ink);} .to-top svg{width:19px;height:19px;display:block;} .to-top-txt{ font-family:var(--mono);font-size:8.5px;font-weight:500; letter-spacing:.14em;text-transform:uppercase;line-height:1; } @media (max-width:680px){ .to-top{width:52px;height:52px;right:max(14px,env(safe-area-inset-right)); bottom:calc(14px + env(safe-area-inset-bottom));} .to-top svg{width:17px;height:17px;} } /* col menu mobile aperto sparisce */ body.nav-open .to-top{opacity:0;visibility:hidden;} @media print{.to-top{display:none!important;}} /* ------------------------------------------------------------ STAMPA ------------------------------------------------------------ */ @media print{ .site-header,.mobile-nav,.req-form-wrap,.legal-toc{display:none!important;} body{background:#fff;color:#000;} .reveal{opacity:1!important;transform:none!important;} } /* ------------------------------------------------------------ MOVIMENTO RIDOTTO ------------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important; } .reveal{opacity:1;transform:none;} } /* ------------------------------------------------------------ 23 CERTIFICAZIONI — riepilogo compatto (home e scheda ispettore) Quattro tessere: FROSIO, AMPP, NACE, Collegio Ligure. Il dettaglio completo vive in certificazioni.html. ------------------------------------------------------------ */ .cert-strip{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); margin-bottom:clamp(18px,2vw,28px); } .cert-mini{ background:var(--card);border:1px solid var(--line); padding:clamp(18px,1.8vw,26px); } .cert-mini .mono-label{display:block;color:var(--stamp);margin-bottom:14px;} .cert-mini-name{ font-size:clamp(22px,2.1vw,30px);font-weight:700;letter-spacing:-.035em; margin-bottom:4px;line-height:1.05; } .cert-mini-role{ font-size:12.5px;font-weight:600;color:var(--ink-soft); line-height:1.4;margin-bottom:14px;min-height:2.8em; } @media (max-width:1000px){ .cert-strip{grid-template-columns:repeat(2,minmax(0,1fr));} .cert-mini-role{min-height:0;} } @media (max-width:560px){ .cert-strip{grid-template-columns:1fr;} } .cert-note{ margin-top:16px;padding-top:14px;border-top:1px solid var(--line-3); font-size:13.5px;line-height:1.6;color:var(--ink-soft); } .certs .cert-main+.cert-main{margin-top:0;} /* ------------------------------------------------------------ 24 FAQ A FISARMONICA Ogni domanda è un
nativo: si apre al clic senza una riga di JavaScript, funziona da tastiera e resta leggibile anche a JS disattivato. Il testo della risposta è comunque presente nell'HTML, quindi Google lo indicizza lo stesso. ------------------------------------------------------------ */ .faq-body{min-width:0;} .faq-sum{ display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,26px); cursor:pointer;list-style:none; padding-block:2px; transition:color .18s ease; } .faq-sum::-webkit-details-marker{display:none;} .faq-sum:hover .faq-q{color:var(--stamp);} .faq-sum:focus-visible{outline:2px solid var(--stamp);outline-offset:6px;} /* il segno + / − a destra */ .faq-ico{ flex:none;margin-left:auto;position:relative; width:20px;height:20px;margin-top:4px; border:1px solid var(--line); transition:border-color .18s ease,background .18s ease; } .faq-ico::before,.faq-ico::after{ content:"";position:absolute;left:50%;top:50%; background:var(--stamp);transition:transform .22s var(--ease),background .18s ease; } .faq-ico::before{width:9px;height:1.5px;transform:translate(-50%,-50%);} .faq-ico::after{width:1.5px;height:9px;transform:translate(-50%,-50%);} .faq-sum:hover .faq-ico{border-color:var(--stamp);} .faq-body[open] .faq-ico{background:var(--stamp);border-color:var(--stamp);} .faq-body[open] .faq-ico::before, .faq-body[open] .faq-ico::after{background:#fff;} .faq-body[open] .faq-ico::after{transform:translate(-50%,-50%) scaleY(0);} /* la risposta entra con una piccola apertura */ .faq-body[open] .faq-a{animation:faqOpen .3s var(--ease);} @keyframes faqOpen{ from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:none;} } .faq-a{padding-right:36px;} @media (prefers-reduced-motion:reduce){ .faq-body[open] .faq-a{animation:none;} .faq-ico::before,.faq-ico::after{transition:none;} } @media (max-width:640px){ .faq-ico{width:22px;height:22px;margin-top:2px;} .faq-a{padding-right:0;} } /* superficie navy: il segno diventa avorio, il rosso non compare */ .surface-navy .faq-ico::before, .surface-navy .faq-ico::after{background:var(--paper);} .surface-navy .faq-body[open] .faq-ico{background:var(--paper);border-color:var(--paper);} .surface-navy .faq-body[open] .faq-ico::before, .surface-navy .faq-body[open] .faq-ico::after{background:var(--navy);} /* ------------------------------------------------------------ 25 STEMMI DELLE CERTIFICAZIONI Sono i marchi degli enti che hanno rilasciato i certificati. Hanno proporzioni molto diverse fra loro — FROSIO è largo, AMPP e NACE sono scudi verticali, il Collegio è un tondo — quindi vivono dentro un riquadro di altezza fissa con object-fit:contain: si adattano senza deformarsi. ------------------------------------------------------------ */ .cert-logo{ display:flex;align-items:center;justify-content:flex-start; height:96px;margin:6px 0 18px; } .cert-logo img{ max-height:100%;max-width:190px;width:auto;height:auto; object-fit:contain;display:block; } /* pareggiamento ottico: FROSIO è un logotipo largo, gli altri tre sono scudi o tondi. Se avessero la stessa altezza il primo peserebbe il doppio, quindi lo si tiene più basso. */ .cert-logo img[src$="logo-frosio.png"]{max-height:56%;} /* nelle tessere compatte: sopra il nome, stessa altezza per tutte e quattro così i marchi restano confrontabili anche se hanno forme diverse */ .cert-logo-sm{ height:76px;margin:14px 0 16px; padding-bottom:16px;border-bottom:1px solid var(--line-3); } .cert-logo-sm img{max-width:132px;} .cert-logo-sm img[src$="logo-frosio.png"]{max-height:52%;} @media (max-width:1000px){ .cert-logo{height:80px;} .cert-logo img{max-width:160px;} } @media (max-width:560px){ .cert-logo-sm{height:66px;} .cert-logo-sm img{max-width:120px;} } /* ------------------------------------------------------------ 26 FOTOGRAFIE — nessun trascinamento, nessun menu da pressione prolungata su iOS e Android. Il testo resta selezionabile: qui si agisce solo sulle immagini. ------------------------------------------------------------ */ img{ -webkit-user-drag:none; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; } /* ------------------------------------------------------------ 27 TABELLA NELLE PAGINE LEGALI Serve a dichiarare in modo leggibile la singola voce tecnica memorizzata dal browser: nome, tecnologia, finalita', durata. Su schermo stretto le colonne diventano righe etichettate. ------------------------------------------------------------ */ .legal-table{ width:100%;border-collapse:collapse; margin:18px 0 4px; background:var(--card); border:1px solid var(--line-2); } .legal-table th, .legal-table td{ padding:12px 14px;text-align:left;vertical-align:top; border-bottom:1px solid var(--line-3); } .legal-table thead th{ font-family:var(--mono);font-size:9.5px;font-weight:500; letter-spacing:.14em;text-transform:uppercase; color:var(--ink-dim); border-bottom:1px solid var(--line); } .legal-table tbody td{font-size:13.5px;line-height:1.55;color:var(--ink-soft);} .legal-table tbody tr:last-child td{border-bottom:0;} .legal-table code{white-space:nowrap;} .legal-table code, .legal-body code{ font-family:var(--mono);font-size:12px; color:var(--ink);background:var(--paper-3); padding:2px 6px; } @media (max-width:720px){ .legal-table thead{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } .legal-table, .legal-table tbody, .legal-table tr, .legal-table td{display:block;width:100%;} .legal-table tr{padding:4px 0;} .legal-table td{border-bottom:1px solid var(--line-3);padding:10px 14px;} .legal-table td::before{ content:attr(data-l);display:block;margin-bottom:4px; font-family:var(--mono);font-size:9px;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim); } } /* ------------------------------------------------------------ 28 SEZ. 02.5 — LA FOTOGRAFIA VERTICALE L'elica sotto la poppa non regge il taglio orizzontale: si perderebbe proprio il soggetto. Questo e' l'unico riquadro dei servizi in formato verticale, tenuto piu' stretto degli altri perche' non sovrasti la colonna di testo accanto. ------------------------------------------------------------ */ .svc-media.is-tall{max-width:400px;margin-inline:auto 0;} .svc-media.is-tall .plate img{aspect-ratio:3/4;object-position:center 50%;} @media (max-width:1080px){ .svc-media.is-tall{max-width:360px;margin-inline:0 auto;} }