/* * La pelle «Tutor» del sito pubblico (2026-10-11): palette e forme delle specifiche del titolare * (magenta #c13584, ambra #e5a04e, rosa #e1306c, neutri violacei, raggi 16/24/36, ombre sm e xl, * transizioni da 160 ms) su TUTTE le pagine di `site/`. La home aggiunge il suo layout in * `home-tutor.css`, caricato dopo questo. * * ─── COME FUNZIONA, E PERCHÉ NON TOCCA IL BUNDLE ─── * * `frontend.css` è un bundle che non si rigenera (perde ~320 classi). Le sue utilità leggono i * colori da variabili (`var(--color-wa-green)`…), e anche le varianti con opacità * (`bg-wa-green/20`) hanno la loro forma `color-mix(… var(--color-wa-green) …)`: qui si * rimappano le variabili dentro `body[data-page^="frontend-"]` — il marcatore che ogni pagina * del sito porta e nessuna pagina del pannello — e il sito cambia pelle senza toccare il markup. * Restano le poche classi decorative che il bundle ha scritto in esadecimale (`glow-green`, * `dot-pattern`, `auth-art`, `lift`, `feat-card`, `brand-tile`, `chat-grid`, * `hover:bg-[#3362A6]`): si ridefiniscono qui sotto, una per una. * * ─── I CONTRASTI, MISURATI ─── * * Testo normale ≥ 4,5:1: primario #c13584 su bianco 5,11 e su crema 4,89; #a82c72 (testo * accentato) su bianco 6,43; bianco su primario 5,11; ink-400 #7a6d83 su crema 4,63. Il primario * su nero NON passa (3,55): sui fondi scuri il testo accentato è #ff8fc2 (8,60). Per questo * `text-wa-green` è magenta sui fondi chiari e rosa su quelli scuri. */ body[data-page^="frontend-"] { /* Marchio */ --color-wa-green: #c13584; /* Il teal era il blu medio delle sfumature scure (`from-wa-deep via-wa-teal to-ink-950`): qui è un prugna scuro, perché un magenta in mezzo a quei riquadri toglierebbe contrasto al testo chiaro. */ --color-wa-teal: #5c1a45; --color-wa-deep: #1a1320; --color-wa-mint: #fbe4f0; --color-wa-bubble: #fdf1f7; /* Neutri violacei delle specifiche, nello stesso ordine della scala di prima */ --color-ink-950: #120d17; --color-ink-900: #1a1320; --color-ink-800: #2b2133; --color-ink-700: #46394f; --color-ink-600: #5a4d63; --color-ink-500: #6b5e74; --color-ink-400: #7a6d83; --color-ink-300: #b7aebe; /* Attrezzi della pelle, usati anche da home-tutor.css */ --t-primario: #c13584; --t-primario-forte: #a82c72; --t-accento: #e1306c; --t-rosa-su-scuro: #ff8fc2; --t-banda: #efebe0; --t-ombra-sm: 0 0 0 1px rgb(225 48 108 / 0.4), 0 0 24px -4px rgb(193 53 132 / 0.5); --t-ombra-xl: 0 40px 90px -40px rgb(193 53 132 / 0.45); --t-ombra-card: 0 18px 40px -26px rgb(26 19 32 / 0.35); /* Il testo base del bundle è un blu-nero scritto in esadecimale. */ color: var(--color-ink-900); } /* ─── Testo accentato ───────────────────────────────────────────────────────────────────── */ body[data-page^="frontend-"] .text-wa-deep { color: var(--t-primario-forte); } body[data-page^="frontend-"] .hover\:text-wa-teal:hover { color: var(--t-primario); } body[data-page^="frontend-"] .text-wa-green { color: var(--t-primario-forte); } body[data-page^="frontend-"] .hover\:text-wa-green:hover { color: var(--t-primario); } /* Sui fondi scuri il magenta non regge (3,55:1): lì l'accento è rosa. */ body[data-page^="frontend-"] :is(.bg-ink-950, .bg-ink-900, .bg-wa-deep, .auth-art, [class*="from-wa-deep"], [class*="from-ink-9"]) :is(.text-wa-green, .text-wa-deep), body[data-page^="frontend-"] :is(.bg-ink-950, .bg-ink-900, .bg-wa-deep, .auth-art, [class*="from-wa-deep"], [class*="from-ink-9"]) .hover\:text-wa-green:hover, body[data-page^="frontend-"] :is(.bg-ink-950, .bg-ink-900, .bg-wa-deep, .auth-art, [class*="from-wa-deep"], [class*="from-ink-9"]) .hover\:text-wa-teal:hover { color: var(--t-rosa-su-scuro); } /* Sulle etichette a fondo rosa (`bg-wa-green/20`, `bg-wa-mint`) il magenta forte fa 4,37: serve più scuro. */ body[data-page^="frontend-"] :is([class*="bg-wa-green/"], .bg-wa-mint).text-wa-deep, body[data-page^="frontend-"] :is([class*="bg-wa-green/"], .bg-wa-mint) .text-wa-deep { color: #7d1f55; } /* I puntini che separano le frasi del ticker: decorativi, ma letti come testo. */ body[data-page^="frontend-"] .text-paper-0\/40 { color: rgb(251 250 246 / 0.66); } /* ─── Bottoni ───────────────────────────────────────────────────────────────────────────── */ /* Il bundle metteva testo scuro sul blu; sul magenta il testo è bianco (5,11:1). */ body[data-page^="frontend-"] .bg-wa-green { color: #fff; } body[data-page^="frontend-"] .hover\:bg-\[\#3362A6\]:hover { background-color: var(--t-primario-forte); } body[data-page^="frontend-"] .glow-green { box-shadow: var(--t-ombra-sm); } body[data-page^="frontend-"] :is(a, button).bg-wa-green { transition: background-color 160ms ease-out, transform 160ms ease-out; } /* La porta delle agenzie in testata: pillola scura piena, come il «Start free» del Tutor. `:not(nav a)` è essenziale: su nove pagine lo stesso indirizzo è anche una voce del menu centrale («Il prodotto»), e senza l'esclusione diventava una pillola scura che andava a capo su due righe (visto dal titolare il 2026-10-11, e non da me nel foglio dei provini). */ body[data-page^="frontend-"] header a[href="/per-agenti-e-agenzie.html"]:not(nav a) { background: var(--color-ink-900); border-color: var(--color-ink-900); color: #fff; transition: background-color 160ms ease-out; } body[data-page^="frontend-"] header a[href="/per-agenti-e-agenzie.html"]:not(nav a):hover { background: var(--t-primario); border-color: var(--t-primario); color: #fff; } /* ─── La testata tra 1024 e 1199 px ─────────────────────────────────────────────────────── */ /* Il menu centrale non sta tra il logo e i pulsanti: ha fino a 9 voci (il server aggiunge «Aste private» a sbarra aperta) e il contenitore gli concede metà larghezza. Misurato il 2026-10-11 su 8 pagine, con e senza la pelle: sotto ~1180 px andava a capo («Il prodotto» su due righe, voci su tre) e finiva sopra «Accedi». Qui lo spazio c'è per il menu a hamburger che il sito usa già sotto i 1024 px, quindi lo si tiene fino a 1199; da 1200 il menu centrale sta in una riga. */ body[data-page^="frontend-"] header nav a { white-space: nowrap; } @media (min-width: 1024px) and (max-width: 1199px) { body[data-page^="frontend-"] header nav, body[data-page^="frontend-"] header div.hidden.lg\:flex { display: none !important; } body[data-page^="frontend-"] #fc-mobile-menu-toggle, body[data-page^="frontend-"] #fc-mobile-menu { display: block !important; } } /* Da 1200 a 1439 px il menu sta in una riga solo stringendolo: nove voci a 13px, spazi da 14px. */ @media (min-width: 1200px) and (max-width: 1439px) { body[data-page^="frontend-"] header nav { gap: 14px !important; font-size: 13px !important; } body[data-page^="frontend-"] header div.hidden.lg\:flex { gap: 4px !important; } } /* Il focus da tastiera si vede: i moduli tolgono l'outline di default (`focus:outline-none`). */ body[data-page^="frontend-"] :is(input, select, textarea, button, a):focus-visible { outline: 2px solid var(--t-primario); outline-offset: 3px; } /* ─── Fondi e decorazioni scritti in esadecimale nel bundle ─────────────────────────────── */ body[data-page^="frontend-"] .dot-pattern { background-image: radial-gradient(circle at 1px 1px, rgb(255 143 194 / 0.22) 1px, transparent 0); } body[data-page^="frontend-"] .auth-art { background: radial-gradient(70% 120% at 100% 0%, rgb(193 53 132 / 0.38), transparent 62%), linear-gradient(135deg, #1a1320, #120d17); } body[data-page^="frontend-"] .chat-grid { background-image: radial-gradient(rgb(26 19 32 / 0.08) 1px, transparent 1px); } body[data-page^="frontend-"] .brand-tile { box-shadow: 0 4px 12px -6px rgb(26 19 32 / 0.25); } body[data-page^="frontend-"] .lift:hover { border-color: var(--t-primario); box-shadow: 0 22px 50px -25px rgb(193 53 132 / 0.4); } body[data-page^="frontend-"] .feat-card:hover { border-color: var(--t-primario); box-shadow: var(--t-ombra-xl); } body[data-page^="frontend-"] .feat-card:hover .feat-arrow { color: var(--t-primario); } /* ─── I riquadri scuri (manifesti, chiusure): l'alone magenta del Tutor ─────────────────── */ body[data-page^="frontend-"] .rounded-3xl.bg-wa-deep { background-color: var(--color-ink-900); background-image: radial-gradient(70% 140% at 100% 0%, rgb(193 53 132 / 0.38), transparent 62%); } body[data-page^="frontend-"] .bg-wa-deep .hairline-t { border-color: rgb(255 255 255 / 0.2); } body[data-page^="frontend-"] .bg-wa-deep .mono { color: var(--t-rosa-su-scuro); } /* ─── Chi non vuole movimento ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body[data-page^="frontend-"] .lift:hover, body[data-page^="frontend-"] .feat-card:hover { transform: none; } }