/* ============================================================ ACCADEMIA HOTEL – themes.css Overrides CSS variables per tema. Il base è Classic (main.css). Basta aggiungere data-theme="X" al per attivare il tema. ============================================================ */ /* ── Mineral ───────────────────────────────────────────────── Ardesia trentina + rame + Cormorant Garamond + Inter ─────────────────────────────────────────────────────────── */ [data-theme="mineral"] { --navy: #3d4a5c; --navy-dark: #2a3344; --navy-light: #4e5e72; --gold: #b87333; --gold-light: #d4956b; --gold-on-dark: #d4956b; --cream: #f0ece6; --white: #ffffff; --text: #2a3344; --gray: #8a8f99; --gray-light: #e8e9eb; --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', system-ui, sans-serif; } /* Cormorant è un carattere sottile — aumenta leggermente il peso */ [data-theme="mineral"] h1, [data-theme="mineral"] h2, [data-theme="mineral"] h3 { font-weight: 500; letter-spacing: .01em; } [data-theme="mineral"] .btn { letter-spacing: .06em; } /* Navbar CTA button: white on slate looks cleaner than copper-on-slate */ [data-theme="mineral"] .navbar .btn--gold, [data-theme="mineral"] .mobile-nav .btn--gold { background: var(--white); border-color: var(--white); color: var(--navy-dark); } [data-theme="mineral"] .navbar .btn--gold:hover, [data-theme="mineral"] .mobile-nav .btn--gold:hover { background: var(--cream); border-color: var(--cream); } /* ── Garden ────────────────────────────────────────────────── Verde foresta + avorio + bronzo + EB Garamond + Nunito ─────────────────────────────────────────────────────────── */ [data-theme="garden"] { --navy: #2d4a3e; --navy-dark: #1e3329; --navy-light: #3d6354; --gold: #8b7355; --gold-light: #a8956e; --gold-on-dark: #c4ad8a; --cream: #f5f0e8; --white: #ffffff; --text: #1e2e1a; --gray: #7a8a76; --gray-light: #e8ede6; --font-serif: 'EB Garamond', Georgia, serif; --font-sans: 'Nunito', system-ui, sans-serif; } [data-theme="garden"] h1, [data-theme="garden"] h2, [data-theme="garden"] h3 { font-weight: 500; } [data-theme="garden"] body { font-weight: 400; } /* ── Atelier (dark mirror) ─────────────────────────────────── Sfondo scuro caldo + crema + oro + Playfair Display + Jost Usato dalla pagina Bar Atelier via atelier.css — qui per eventuale riuso su altre pagine future. ─────────────────────────────────────────────────────────── */ [data-theme="atelier"] { --navy: #f0ebe2; --navy-dark: #faf7f2; --navy-light: #e4ddd1; --gold: #c9a95c; --gold-light: #e4c98a; --gold-on-dark: #e4c98a; --cream: #2e2820; --white: #1a1714; --text: #f0ebe2; --gray: rgba(240,235,226,.65); --gray-light: rgba(240,235,226,.1); --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Jost', system-ui, sans-serif; background: #1a1714; color: #f0ebe2; } [data-theme="atelier"] h1, [data-theme="atelier"] h2, [data-theme="atelier"] h3, [data-theme="atelier"] h4 { color: #f0ebe2; } [data-theme="atelier"] .section--cream { background: #242018; } [data-theme="atelier"] .btn--secondary { color: #f0ebe2; border-color: #f0ebe2; } [data-theme="atelier"] .btn--secondary:hover { background: #f0ebe2; color: #1a1714; }