/* ============================================================ Giuliano Store - dark mode Loaded after app.css, custom.css, responsive.css and values-row.css. ============================================================ */ /* Palette dark ufficiale: --gs-blue-dark: #092862 --gs-deep-dark: #051432 La classe viene applicata da app.js su . */ [data-theme="dark"] { color-scheme: dark; background: var(--gs-deep-dark); color: var(--gs-bg); } /* Base surfaces ---------------------------------------------------------- */ [data-theme="dark"] .bg-gs-bg, [data-theme="dark"] .gs-page, [data-theme="dark"] .gs-404 { background: var(--gs-deep-dark) !important; color: var(--gs-bg); } [data-theme="dark"] .bg-gs-blue-light, [data-theme="dark"] .gs-values { background: var(--gs-blue-dark) !important; } [data-theme="dark"] .gs-header, [data-theme="dark"] .gs-footer, [data-theme="dark"] .gs-mobile-menu { background: var(--gs-blue-dark); color: var(--gs-bg); } [data-theme="dark"] .gs-people-section { background: var(--gs-deep-dark) !important; color: var(--gs-bg); } [data-theme="dark"] .gs-cert-strip { background: var(--gs-blue-dark) !important; border-color: rgb(243 245 250 / 28%) !important; } [data-theme="dark"] .gs-cert-strip__panel, [data-theme="dark"] .gs-iso-panel { background: var(--gs-blue-dark); border-color: rgb(243 245 250 / 48%); } /* Text ------------------------------------------------------------------- */ [data-theme="dark"] .text-gs-dark, [data-theme="dark"] .gs-iso-item p, [data-theme="dark"] .gs-cert-strip__item span { color: var(--gs-bg) !important; } [data-theme="dark"] .text-gs-blue, [data-theme="dark"] .gs-cert-strip__item strong, [data-theme="dark"] strong:not(.gs-story-year) { color: var(--gs-blue-light) !important; } [data-theme="dark"] .gs-page-hero, [data-theme="dark"] .gs-404__box h1 { color: var(--gs-bg); } /* Brand / intro ---------------------------------------------------------- */ [data-theme="dark"] #chi-siamo { background: var(--gs-deep-dark) !important; } [data-theme="dark"] [aria-label="Brand distribuiti"] { background: var(--gs-blue-dark) !important; border-color: rgb(243 245 250 / 28%); } [data-theme="dark"] [aria-label="Brand distribuiti"] .gs-container { background: var(--gs-blue-dark); } /* Values ----------------------------------------------------------------- */ [data-theme="dark"] .gs-values-card, [data-theme="dark"] .gs-card { background: var(--gs-blue-dark); color: var(--gs-bg); border-color: rgb(243 245 250 / 48%); } [data-theme="dark"] .gs-values-card { background: var(--gs-blue-dark) !important; } [data-theme="dark"] .gs-marker { border-color: var(--gs-deep-dark); box-shadow: 0 0 0 1px var(--gs-blue-light); } [data-theme="dark"] .gs-dot-row span { background: var(--gs-bg); } /* I pallini multipli simulati via box-shadow in values-row.css usano var(--gs-bg), quindi restano corretti anche in dark. */ /* CTA / buttons ---------------------------------------------------------- */ [data-theme="dark"] .gs-btn { border-color: var(--gs-blue-light); color: var(--gs-blue-light); } [data-theme="dark"] .gs-btn:hover, [data-theme="dark"] .gs-btn--footer, [data-theme="dark"] .gs-people-section .gs-btn { background: var(--gs-blue-light); border-color: var(--gs-blue-light); color: var(--gs-bg); } [data-theme="dark"] .gs-btn--footer:hover { background: var(--gs-bg); color: var(--gs-blue-dark); } /* Forms ------------------------------------------------------------------ */ [data-theme="dark"] .gs-input { background: var(--gs-bg); color: var(--gs-dark); border-color: var(--gs-bg); } [data-theme="dark"] .gs-input::placeholder { color: var(--gs-blue-dark); } [data-theme="dark"] .gs-checkbox, [data-theme="dark"] .gs-contact-form, [data-theme="dark"] .gs-contact-form h2 { color: var(--gs-bg); } /* Social / footer -------------------------------------------------------- */ [data-theme="dark"] .gs-footer__info strong, [data-theme="dark"] .gs-footer__info span, [data-theme="dark"] .gs-footer__info a, [data-theme="dark"] .gs-footer__menus h2, [data-theme="dark"] .gs-footer__menus a, [data-theme="dark"] .gs-footer__legal, [data-theme="dark"] .gs-footer__legal a { color: var(--gs-bg); } [data-theme="dark"] .gs-socials__link { border-color: rgb(243 245 250 / 50%); color: var(--gs-bg); } [data-theme="dark"] .gs-socials__link:hover { background: var(--gs-bg); color: var(--gs-blue-dark); } /* Back top --------------------------------------------------------------- */ [data-theme="dark"] .gs-back-top { color: var(--gs-red); } [data-theme="dark"] .gs-back-top:hover { color: var(--gs-blue-light); } /* Secondary pages -------------------------------------------------------- */ [data-theme="dark"] .gs-page-hero { background: var(--gs-blue-dark); } [data-theme="dark"] .gs-timeline time { -webkit-text-stroke-color: var(--gs-blue-light); } [data-theme="dark"] .gs-timeline p, [data-theme="dark"] .gs-contact-page { color: var(--gs-bg); } [data-theme="dark"] .gs-404__box { border-color: var(--gs-blue-light); } /* Browser autofill ------------------------------------------------------- */ [data-theme="dark"] input:-webkit-autofill, [data-theme="dark"] textarea:-webkit-autofill { -webkit-text-fill-color: var(--gs-dark); box-shadow: 0 0 0 1000px var(--gs-bg) inset; }