/* Design system: aero-creative-engine-3 * Source: templates/design-systems/aero-creative-engine-3/preview.html * Tailwind via CDN + custom CSS qui sotto. * Token brand: vedi data/template-meta.json (designSpec colors+fonts). */ /* ---- Unified button radius: all buttons rounded 30px ---- */ button, a[class~="bg-menta"], a[class~="bg-ghiaccio"], a[class~="border-menta"], a[class~="border-ghiaccio/25"], a[class~="border-ghiaccio/20"] { border-radius: 30px !important; } /* ========================================================================= * LIGHT MODE · attivato da (toggle in nav) * Il sito è dark-first (Abisso/Ghiaccio). Qui rimappiamo superfici, testi e * bordi verso un tema chiaro tenendo gli accenti (menta/elettrico) leggibili. * Gli accenti-pulsante restano a contrasto forzato per non perdere il testo. * ========================================================================= */ html { color-scheme: dark; } /* Light mode: sfondo pagina a gradiente bianco-grigino -> azzurrino tenue. * Il gradiente vive sul body (fisso) e le sezioni bg-abisso diventano * trasparenti per lasciarlo trasparire su tutta la pagina. */ html.light { color-scheme: light; background: #F5F7F9; } html.light body { background-image: linear-gradient(180deg, #F5F7F9 0%, #EAF1F6 42%, #D9E8F4 100%); background-attachment: fixed; background-repeat: no-repeat; background-size: 100% 100%; } /* Transizione morbida al cambio tema (solo proprietà di colore) */ html.light .bg-abisso, html.light .bg-abisso-deep, html.light .bg-ghiaccio, html:not(.light) .bg-abisso, html:not(.light) .bg-abisso-deep { transition: background-color .3s ease, border-color .3s ease, color .3s ease; } /* ---- Superfici ---- */ /* bg-abisso trasparente: lascia passare il gradiente del body */ html.light .bg-abisso { background-color: transparent; } /* bg-abisso-deep: superficie chiara semi-trasparente, il gradiente traspare appena */ html.light .bg-abisso-deep { background-color: rgba(255,255,255,0.72); } html.light .bg-abisso-deep\/25 { background-color: rgba(15,34,51,0.03); } html.light .bg-abisso-deep\/40 { background-color: rgba(15,34,51,0.04); } html.light .bg-abisso-deep\/50 { background-color: rgba(15,34,51,0.05); } html.light .bg-abisso-deep\/60 { background-color: rgba(15,34,51,0.06); } /* Footer in light mode: bianco pieno (non semi-trasparente come le altre superfici), * con un bordo superiore appena percettibile per staccarlo dal gradiente della pagina. */ html.light footer.bg-abisso-deep { background-color: #FFFFFF; border-top-color: rgba(15,34,51,0.10); } /* Pill di navigazione: resta bianca su fondo grigio-chiaro, con bordo sottile */ html.light .bg-ghiaccio { background-color: #FFFFFF; box-shadow: 0 0 0 1px rgba(15,34,51,0.08); } html.light .bg-ghiaccio\/10 { background-color: rgba(15,34,51,0.05); } html.light .bg-ghiaccio\/25 { background-color: rgba(15,34,51,0.08); } html.light .bg-inchiostro\/20 { background-color: rgba(15,34,51,0.18); } /* ---- Testi (ghiaccio → inchiostro scuro, con le stesse opacità) ---- */ html.light .text-ghiaccio { color: #0F2233; } html.light .text-ghiaccio\/80 { color: rgba(15,34,51,0.82); } html.light .text-ghiaccio\/75 { color: rgba(15,34,51,0.78); } html.light .text-ghiaccio\/70 { color: rgba(15,34,51,0.72); } html.light .text-ghiaccio\/65 { color: rgba(15,34,51,0.68); } html.light .text-ghiaccio\/60 { color: rgba(15,34,51,0.62); } html.light .text-ghiaccio\/55 { color: rgba(15,34,51,0.58); } html.light .text-ghiaccio\/50 { color: rgba(15,34,51,0.54); } html.light .text-ghiaccio\/45 { color: rgba(15,34,51,0.50); } html.light .text-ghiaccio\/25 { color: rgba(15,34,51,0.40); } /* Muted / acciaio → slate scuro leggibile su chiaro */ html.light .text-acciaio { color: #51697C; } html.light .text-acciaio\/80 { color: rgba(81,105,124,0.88); } html.light .text-acciaio\/70 { color: rgba(81,105,124,0.82); } html.light .text-acciaio\/60 { color: rgba(81,105,124,0.74); } /* Accenti testuali: menta scurita per contrasto su bianco, elettrico più profondo */ html.light .text-menta { color: #0E8F6E; } html.light .text-elettrico { color: #1E6FA8; } /* ---- Bordi (ghiaccio → inchiostro con bassa opacità) ---- */ html.light .border-ghiaccio\/5 { border-color: rgba(15,34,51,0.07); } html.light .border-ghiaccio\/10 { border-color: rgba(15,34,51,0.12); } html.light .border-ghiaccio\/15 { border-color: rgba(15,34,51,0.16); } html.light .border-ghiaccio\/20 { border-color: rgba(15,34,51,0.18); } html.light .border-ghiaccio\/50 { border-color: rgba(15,34,51,0.30); } html.light .border-acciaio\/30 { border-color: rgba(81,105,124,0.35); } /* ---- Pulsanti/badge ad accento: contrasto testo forzato ---- */ html.light .bg-menta { color: #0A2238; } /* menta chiaro → testo scuro */ html.light .bg-elettrico { color: #F4F7F8; } /* blu → testo chiaro */ html.light .bg-ghiaccio { color: #0F2233; } /* pill bianca → testo scuro */ /* ---- Gradienti (heading in bg-clip-text + fondali) ---- */ html.light .from-ghiaccio { --tw-gradient-from: #0F2233 var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 34 51 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html.light .to-abisso-deep { --tw-gradient-to: #EDF1F3 var(--tw-gradient-to-position); } html.light .to-abisso { --tw-gradient-to: #EDF1F3 var(--tw-gradient-to-position); } /* ---- Toggle tema: pulsante nella nav (display gestito da utility Tailwind) ---- */ .theme-toggle { width: 34px; height: 34px; border-radius: 30px; border: 1px solid rgba(244,247,248,0.2); color: #F4F7F8; transition: color .2s ease, border-color .2s ease, background-color .2s ease; cursor: pointer; background: transparent; } .theme-toggle:hover { color: #3FE0B6; border-color: rgba(63,224,182,0.5); } html.light .theme-toggle { border-color: rgba(15,34,51,0.2); color: #0F2233; } html.light .theme-toggle:hover { color: #0E8F6E; border-color: rgba(14,143,110,0.5); }