/* Not Yet — site. Same palette and type as docs/mockup.html: cement, chalk, construction yellow. */ :root{ --muro:#6E6B66; --muro-scuro:#3D3B37; --muro-fondo:#2A2926; --intonaco:#B8B4AC; --gesso:#F0EDE4; --segnale:#FFD400; --segnale-scuro:#C9A800; --ink:#26251F; --display:'Anton','Haettenschweiler','Arial Narrow',sans-serif; --body:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--muro); background-image: radial-gradient(ellipse 900px 600px at 20% -10%, rgba(255,255,255,.10), transparent 60%), radial-gradient(ellipse 700px 500px at 95% 30%, rgba(0,0,0,.16), transparent 65%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); color:var(--gesso); font-family:var(--body); -webkit-font-smoothing:antialiased; line-height:1.5; } a{color:var(--segnale)} a:hover{color:#fff} .wrap{max-width:1100px;margin:0 auto;padding:0 22px} /* language switch: shows only matching [lang] blocks */ html[data-lang="en"] [lang="it"]{display:none !important} html[data-lang="it"] [lang="en"]{display:none !important} /* header */ .top{display:flex;align-items:center;gap:14px;padding:22px 0;border-bottom:1px solid rgba(0,0,0,.22)} .logo{width:44px;height:44px;border-radius:12px;background:var(--segnale);display:grid;place-items:center;flex:none} .logo svg{width:30px;height:18px} .brand{font-family:var(--display);font-size:26px;letter-spacing:.02em;color:var(--gesso);text-decoration:none} .brand span{color:var(--segnale)} .nav{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:14px} .nav a{color:rgba(240,237,228,.8);text-decoration:none;font-weight:500} .nav a:hover{color:#fff} .lang{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase} .lang button{background:transparent;border:1px solid rgba(240,237,228,.28);color:rgba(240,237,228,.75);border-radius:999px;padding:6px 11px;cursor:pointer;font:inherit} .lang button[aria-pressed="true"]{background:var(--segnale);color:var(--ink);border-color:var(--segnale)} /* hero */ .hero{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;padding:64px 0 52px} .hero h1{font-family:var(--display);font-size:clamp(58px,9vw,124px);line-height:.86;letter-spacing:-.01em;margin:0 0 20px;text-shadow:0 2px 0 rgba(0,0,0,.22)} .hero h1 span{color:var(--segnale)} .lead{font-size:clamp(18px,2.2vw,24px);max-width:30ch;line-height:1.32;color:#EDEAE1;margin:0 0 28px} .cta{display:inline-flex;align-items:center;gap:12px;background:var(--segnale);color:var(--ink);text-decoration:none;padding:14px 22px;border-radius:14px;font-weight:600;font-size:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)} .cta:hover{background:#ffe14d;color:var(--ink)} .cta small{display:block;font-size:11px;font-weight:500;opacity:.75;letter-spacing:.06em;text-transform:uppercase} .note{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,237,228,.6);margin-top:16px} .hero-shot{justify-self:center;width:100%;max-width:330px;border-radius:30px;box-shadow:0 26px 56px rgba(0,0,0,.44),inset 0 0 0 1px rgba(255,255,255,.09)} /* sections */ section{padding:56px 0 8px} .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--segnale);display:flex;align-items:center;gap:12px;margin:0 0 10px} .eyebrow::after{content:"";height:1px;flex:1;background:rgba(255,212,0,.32)} h2{font-family:var(--display);font-size:clamp(30px,4.4vw,46px);letter-spacing:.005em;margin:0 0 8px;line-height:1} .nota{font-size:15px;color:rgba(240,237,228,.76);max-width:62ch;margin:0 0 32px;line-height:1.5} /* widgets in progression (live, same generator as the app) */ .progressione{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px} .widget{background:var(--muro-fondo);border-radius:22px;padding:17px 18px 15px;border:1px solid rgba(255,255,255,.07);box-shadow:0 14px 34px rgba(0,0,0,.34);min-height:158px;display:flex;flex-direction:column} .widget-cosa{font-size:15px;font-weight:600;line-height:1.25;color:var(--gesso);margin:0 0 11px} .widget-segni{height:84px;display:flex;align-items:center;overflow:hidden} .widget-segni svg{height:100%;width:auto;max-width:100%} .widget-piede{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:9px;border-top:1px solid rgba(240,237,228,.13)} .conteggio{font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;color:var(--segnale)} .marchio-mini{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:rgba(240,237,228,.38)} .didascalia{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(240,237,228,.58);margin-top:11px} /* steps */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px} .step{background:rgba(0,0,0,.22);border:1px solid rgba(240,237,228,.08);border-radius:20px;padding:22px} .step .n{font-family:var(--display);font-size:40px;color:var(--segnale);line-height:1} .step h3{margin:10px 0 6px;font-size:17px} .step p{margin:0;color:rgba(240,237,228,.74);font-size:15px} /* yellow block */ .angle{background:var(--segnale);color:var(--ink);border-radius:28px;padding:40px;margin-top:44px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center} .angle h2{color:var(--ink)} .angle p{color:rgba(38,37,31,.82);font-size:18px;margin:0;max-width:52ch} .angle img{width:100%;max-width:320px;border-radius:24px;justify-self:center;box-shadow:0 20px 50px rgba(0,0,0,.3)} .disco{width:154px;height:154px;border-radius:50%;background:rgba(0,0,0,.08);box-shadow:inset 0 0 0 2px rgba(38,37,31,.18);display:grid;place-items:center;position:relative;justify-self:center} .disco svg{position:absolute;inset:0;transform:rotate(-90deg)} .disco .anello{stroke:var(--ink);stroke-width:5;fill:none;stroke-linecap:round;stroke-dasharray:452;stroke-dashoffset:150} .disco span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase} @media (prefers-reduced-motion:no-preference){ .disco .anello{animation:carica 3.2s ease-in-out infinite} @keyframes carica{0%,12%{stroke-dashoffset:452}62%,100%{stroke-dashoffset:0}} } /* "doesn't do" list */ .no{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 26px;padding:0;margin:0;list-style:none} .no li{padding:12px 0;border-bottom:1px solid rgba(240,237,228,.12);font-size:15.5px;display:flex;gap:12px;align-items:baseline} .no li::before{content:"—";color:var(--segnale);font-family:var(--mono)} /* postcard */ .cartolina{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center} .cartolina img{width:100%;max-width:420px;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.45)} .cartolina blockquote{margin:0;font-family:var(--display);font-size:clamp(34px,5vw,60px);line-height:.96;letter-spacing:.004em} .cartolina blockquote span{color:var(--segnale)} /* privacy / prose */ .prose{max-width:760px;margin:0 auto;padding:40px 0 20px} .prose h1{font-family:var(--display);font-size:clamp(40px,6vw,68px);line-height:.95;margin:0 0 8px} .prose .meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,237,228,.6);margin:0 0 30px} .prose .tldr{background:var(--segnale);color:var(--ink);border-radius:18px;padding:20px 22px;font-size:17px;font-weight:500;margin:0 0 34px} .prose h2{font-size:24px;margin:34px 0 8px} .prose p,.prose li{font-size:16px;color:#EDEAE1} .prose ul{padding-left:1.2em} .prose table{border-collapse:collapse;width:100%;font-size:15px} .prose td,.prose th{text-align:left;padding:10px 8px;border-bottom:1px solid rgba(240,237,228,.14);vertical-align:top} .prose th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,237,228,.6)} footer{margin-top:76px;padding:26px 0 56px;border-top:2px solid rgba(0,0,0,.28);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,237,228,.5);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap} footer a{color:rgba(240,237,228,.7);text-decoration:none;margin-right:18px} footer a:hover{color:#fff} @media (max-width:820px){ .hero{grid-template-columns:1fr;padding-top:40px} .hero-shot{max-width:270px} .angle{grid-template-columns:1fr;padding:28px} .cartolina{grid-template-columns:1fr} }