/* ========================================================================== SK Active Boutique Hotel — Colors & Typography Tokens Source of truth for the design system. Imported by every preview card, UI kit, and slide template. ========================================================================== */ /* -------- Font del sito --------------------------------------------------- Tutti serviti da qui. Nessuna chiamata a domini esterni. Urbanist arrivava da Google con un @import, e non arrivava affatto: un @import va scritto PRIMA di ogni altra regola, quello stava dopo due @font-face ed era quindi invalido. I browser lo ignoravano in silenzio, e il testo del sito cadeva sul carattere di sistema. Verificato sul sito online il 25 agosto 2026: zero richieste verso fonts.googleapis.com. Sul mio computer sembrava giusto perche' Urbanist e' installato — e' cosi' che questo genere di cose non si nota per mesi. Ora e' servito da fonts/, e non solo per rimetterlo al suo posto: un font preso da Google manda a Google l'indirizzo di rete di chi visita, prima di qualunque consenso. Il resto del sito e' scrupoloso su questo — Tag Manager non parte finche' l'ospite non accetta — e il carattere del testo non poteva essere l'eccezione. Vale doppio per un pubblico che in larga parte naviga dalla Germania, dove su questo punto ci sono state condanne. Sono i file variabili: un solo file copre tutti i pesi da 100 a 900. Quattro file, 100 kB in tutto, divisi per alfabeto — chi legge in italiano scarica solo il latino di base. --------------------------------------------------------------------------- */ @font-face { font-family: 'Urbanist'; src: url('fonts/Urbanist-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Urbanist'; src: url('fonts/Urbanist-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Urbanist'; src: url('fonts/Urbanist-latin-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Urbanist'; src: url('fonts/Urbanist-latin-ext-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* PLAYFAIR — la famiglia del sito, ricavata dai file consegnati da Sandra il 28 agosto 2026 (« Playfair copia »), non scaricata da nessuna parte. ATTENZIONE AL NOME. « Playfair » e « Playfair Display » sono due famiglie diverse: la seconda e' del 2011, la prima del 2023, con assi ottici e un corsivo diverso. Il brand book scrive « Playfair Display », ma il disegno approvato del sito — quello ancora visibile su skactivehotel.flowence.it — usa Playfair, e i file consegnati sono di quella. Comanda il disegno approvato. Il 27 agosto avevo montato Playfair Display seguendo il brand book: era una regressione, e si vedeva sui titoli degli articoli. ASSI. Il file di partenza ne ha tre: opsz 5-1200, wdth 87.5-112.5, wght 300-900. La larghezza e' stata FISSATA a 100 perche' il sito non la usa — il CSS chiedeva 75%-125%, valori fuori scala che il browser troncava — e toglierla dimezza il peso: 171 kB invece di 285. L'asse ottico resta variabile: e' quello che assottiglia le grazie nei titoli grandi, ed e' esattamente l'eleganza per cui questo carattere e' stato scelto. NIENTE TTF DI RISERVA. C'erano due file da 1,6 MB come seconda sorgente, che nessun browser ha mai scaricato: woff2 e' sostenuto ovunque da otto anni. Erano 3,3 MB fermi sul server. */ @font-face { font-family: 'Playfair'; src: url('fonts/Playfair-latin.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair'; src: url('fonts/Playfair-latin-ext.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair'; src: url('fonts/Playfair-latin-italic.woff2') format('woff2'); font-weight: 300 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair'; src: url('fonts/Playfair-latin-ext-italic.woff2') format('woff2'); font-weight: 300 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ============ COLOR — RAW PALETTE ====================================== */ /* Brand-led: every name is taken straight from the SK Active brand book and matches the elemental story (Aria, Acqua, Terra, Fuoco, Luce). */ --sk-deep-mineral: #1a2a44; /* primary brand — sky-at-night blue */ --sk-deep-mineral-2: #2a3f5f; /* lifted variant for hero gradients */ --sk-raw-oak: #c4a878; /* signature accent — warm oak/brass */ --sk-raw-oak-soft: #d4b888; /* hover lift for raw-oak */ --sk-textural-white: #f1f0ec; /* paper / "Cloud Dancer" — page bg */ --sk-cloud-dancer: #f1f0ec; /* alias */ --sk-paper: #ebe7df; /* warmer paper for gradient bottoms */ /* Elemental accents — paired 1:1 with the 5 Concept Room elements */ --sk-botanical-green: #747748; /* Aria — quiet courtyard / olive */ --sk-tech-noir: #347176; /* Acqua — teal water */ --sk-earthy-rust: #803a27; /* Terra — argilla / rust */ --sk-brick-red: #973b2e; /* Fuoco strong */ --sk-sunset-coral: #e87f68; /* Fuoco soft / sunset over the lake */ /* Neutral working scale (extrapolated from textural-white → deep-mineral) */ --sk-stone-100: #f8f7f3; --sk-stone-200: #ebe7df; --sk-stone-300: #d6d2c8; --sk-stone-400: #a9a59c; /* Portato da #6f6c66 a #5f5c56 il 25 agosto 2026. Sul beige del modulo contatti — rgb(235,231,223) — il vecchio valore dava 4,24 di rapporto di contrasto, sotto la soglia di 4,5 che rende un testo leggibile a chi ha la vista stanca o guarda il telefono in pieno sole. Ora fa 5,40 sul beige e 6,22 sul crema. E' un grigio appena piu' fondo, non un nero: il tono smorzato che il disegno voleva resta. */ --sk-stone-500: #5f5c56; --sk-stone-600: #3f3d3a; --sk-stone-700: #1a2a44; /* === deep-mineral */ /* Overlays */ --sk-overlay-dark: rgba(26, 42, 68, 0.85); --sk-overlay-darker: rgba(26, 42, 68, 0.95); --sk-overlay-light: rgba(241, 240, 236, 0.08); --sk-overlay-line: rgba(241, 240, 236, 0.12); /* ============ COLOR — SEMANTIC ROLES =================================== */ --bg: var(--sk-textural-white); --bg-inverse: var(--sk-deep-mineral); --bg-elevated: #ffffff; --bg-paper: var(--sk-paper); --fg: var(--sk-deep-mineral); --fg-muted: rgba(26, 42, 68, 0.65); --fg-subtle: rgba(26, 42, 68, 0.45); --fg-on-dark: var(--sk-textural-white); --fg-on-dark-muted: rgba(241, 240, 236, 0.7); --fg-on-dark-subtle: rgba(241, 240, 236, 0.45); --accent: var(--sk-raw-oak); --accent-strong: var(--sk-deep-mineral); --accent-warm: var(--sk-earthy-rust); --border: rgba(26, 42, 68, 0.10); --border-strong: rgba(26, 42, 68, 0.20); --border-on-dark: rgba(241, 240, 236, 0.08); --link: var(--sk-deep-mineral); --link-hover: var(--sk-earthy-rust); /* ============ TYPOGRAPHY =============================================== */ /* I DUE CARATTERI DEL BRAND, e nient'altro. Dietro c'e' solo il generico di sistema, che entra in gioco unicamente se il woff2 non arriva: prima c'erano 'Playfair Display', 'Cormorant Garamond' e 'Inter' come ripieghi, cioe' tre modi diversi di non essere il sito. Meglio un serif qualunque, che si riconosce come guasto, di un serif elegante che assomiglia al nostro e nasconde il problema. */ --font-display: 'Playfair', serif; --font-body: 'Urbanist', system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Sizes — fluid friendly. Intended in REM. Page rem = 16px. */ --fs-xs: 0.65rem; /* 10.4px — eyebrow / micro labels */ --fs-sm: 0.75rem; /* 12px — small caps / nav links */ --fs-base: 0.95rem; /* 15.2px — body */ --fs-md: 1.05rem; /* 16.8px — lead body */ --fs-lg: 1.3rem; /* 20.8px — h4 */ --fs-xl: 1.6rem; /* 25.6px — h3 */ --fs-2xl: 2rem; /* 32px — h2 small */ --fs-3xl: 2.6rem; /* 41.6px — section title */ --fs-4xl: 3.2rem; /* 51.2px — section title large */ --fs-5xl: 4.5rem; /* 72px — hero */ --fs-display:5.6rem; /* 89.6px — extreme display */ /* Weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* Line heights */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.6; --lh-relaxed: 1.8; /* Letter spacing (tracking) — UPPERCASE labels are TRACKED FAR */ --tr-tight: -0.01em; --tr-normal: 0; --tr-wide: 0.1em; --tr-wider: 0.15em; --tr-widest: 0.2em; --tr-display: 0.35em; /* monogram + brand wordmark spacing */ --tr-eyebrow: 0.4em; /* hero section tags */ /* ============ SPACING ================================================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-28: 7rem; --space-32: 8rem; /* ============ RADII ==================================================== */ /* SK Active is "spigolo vivo" — sharp corners. Use 0–2px almost always. */ --radius-none: 0; --radius-xs: 2px; /* default for cards / images */ --radius-sm: 4px; --radius-pill: 999px; /* used only on language switcher + pill CTA */ /* ============ SHADOWS / ELEVATION ====================================== */ /* Restrained. Heavy elevation is unbranded. */ --shadow-sm: 0 1px 2px rgba(26, 42, 68, 0.06); --shadow-md: 0 4px 12px rgba(26, 42, 68, 0.08); --shadow-lg: 0 12px 32px rgba(26, 42, 68, 0.12); --shadow-xl: 0 20px 48px rgba(26, 42, 68, 0.16); --shadow-up: 0 -8px 32px rgba(26, 42, 68, 0.18); /* sticky bottom bar */ /* ============ MOTION =================================================== */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-cinema: cubic-bezier(0.7, 0.05, 0.2, 1); /* sticky bar reveal */ --dur-fast: 0.2s; --dur-base: 0.3s; --dur-slow: 0.45s; --dur-cinema: 0.8s; /* fade-up entrances */ /* ============ Z-INDEX ================================================== */ --z-floating: 90; /* whatsapp + a11y */ --z-booking: 100; /* sticky booking bar */ --z-nav: 200; --z-modal: 1000; } /* ========================================================================== SEMANTIC TYPE PRESETS Apply by adding the class — or the corresponding tag will inherit defaults. ========================================================================== */ body { font-family: var(--font-body); font-weight: var(--fw-light); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg); background: var(--bg); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .t-display, .t-h1, .t-h2, .t-h3, .t-h4, h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-regular); line-height: var(--lh-tight); color: var(--fg); letter-spacing: var(--tr-tight); } .t-display, h1 { font-size: clamp(2.6rem, 5vw + 1rem, var(--fs-5xl)); font-weight: var(--fw-regular); } .t-h1 { font-size: var(--fs-4xl); } .t-h2, h2 { font-size: var(--fs-3xl); line-height: 1.1; } .t-h3, h3 { font-size: var(--fs-xl); line-height: 1.2; } .t-h4, h4 { font-size: var(--fs-lg); line-height: 1.3; } .t-display em, h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); } .t-eyebrow { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-xs); letter-spacing: var(--tr-display); text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 1rem; } .t-eyebrow::before { content: ''; display: inline-block; width: 30px; height: 1.5px; background: var(--accent); } .t-lead { font-family: var(--font-body); font-weight: var(--fw-light); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--fg-muted); max-width: 60ch; } .t-body, p { font-family: var(--font-body); font-weight: var(--fw-light); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-muted); text-wrap: pretty; } .t-label { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-xs); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--fg-subtle); } .t-link-cta { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-sm); letter-spacing: var(--tr-widest); text-transform: uppercase; } .t-stat { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 2.2rem; line-height: 1; color: var(--fg); } .t-quote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl); line-height: 1.4; color: var(--accent); } /* On-dark variants — use inside .surface-dark wrapper */ .surface-dark { background: var(--bg-inverse); color: var(--fg-on-dark); } .surface-dark p, .surface-dark .t-body { color: var(--fg-on-dark-muted); } .surface-dark .t-label { color: var(--fg-on-dark-subtle); } .surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4 { color: var(--fg-on-dark); } .surface-dark .t-eyebrow { color: var(--accent); } /* Paper variant — slightly warmer than textural-white */ .surface-paper { background: var(--bg-paper); color: var(--fg); }