/* ============================================================================= theme.css — TUTTE le scelte estetiche di Sardegna Spiagge stanno qui dentro. Nessuna logica, nessun layout: solo token. Cambia i valori in questo file e l'intera app cambia aspetto, senza toccare app.css ne' app.js. IDENTITA': mare d'estate. Verde smeraldo come colore guida, azzurro marino per l'acqua, blu notte come tono piu' scuro ammesso, testo nero sempre. COME PERSONALIZZARE (in ordine di impatto): 1. COLORE GUIDA → --accent-h / --accent-s / --accent-l Tinta, saturazione e luminosita' in HSL. Tutto cio' che e' attivo o selezionato deriva da qui. Cambia solo --accent-h (0-360) per virare: 165 = smeraldo (attuale) · 190 = turchese · 205 = azzurro mare Se la abbassi sotto 150 perdi il verde e l'app diventa un'altra cosa. 2. ACQUA → --azure L'azzurro delle barre orarie e della scheda del vento. Va tenuto distinto dallo smeraldo: uno e' l'interfaccia, l'altro e' il mare. 3. SFONDO E SUPERFICI → --bg, --bg-grad, --surface, --surface-2, --line 4. FORMA → --r-sm ... --r-xl (raggi degli angoli) Tutti a 0 per un look spigoloso, piu' alti per uno morbido. 5. RESPIRO → --sp-base, da cui discende tutta la scala Alzalo a 5px per un'app piu' ariosa. NOTA SUL TEMA SCURO: non c'e', ed e' voluto. Il testo deve restare nero, e un'app che si usa in spiaggia con il sole in faccia guadagna dal massimo contrasto. Se un giorno ne servisse uno, il posto giusto e' un blocco @media (prefers-color-scheme: dark) che ridefinisce solo i colori. ============================================================================= */ :root{ /* ---------- 1. COLORE GUIDA: verde smeraldo ----------------------------- */ --accent-h: 165; --accent-s: 88%; --accent-l: 27%; /* scuro quanto basta per stare nero su bianco */ --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l)); --accent-dim: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / .55); --accent-bg: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / .10); --accent-bg-2: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / .05); --accent-line: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / .38); /* ---------- 2. ACQUA: azzurro marino ------------------------------------ */ --azure: #0a7ea4; --azure-bg: rgba(10,126,164,.10); --azure-line: rgba(10,126,164,.32); /* ---------- 3. SFONDO E SUPERFICI --------------------------------------- */ --bg: #f4fbfb; /* azzurrino pallido, sabbia bagnata */ --bg-grad: #dcefea; /* verso lo smeraldo, come l'acqua bassa */ --surface: #ffffff; --surface-2: #eff8f7; --surface-bar: rgba(255,255,255,.84); /* barre traslucide */ --line: #ccE2df; --line-soft: rgba(4,60,52,.045); /* ---------- TESTO: nero, sempre ----------------------------------------- */ --txt: #000f12; /* nero, con un'ombra di verdemare */ --txt-dim: #1f4a4d; --txt-faint: #55787a; /* ---------- SEMANTICA: riparata / laterale / esposta --------------------- */ /* Il verde della semantica e' lo stesso smeraldo del colore guida: qui una spiaggia riparata e' letteralmente "il colore dell'app che va bene". */ /* Su fondo chiaro le tinte vanno tenute piu' cariche che su fondo scuro: con l'8% le tre condizioni diventavano indistinguibili a colpo d'occhio. */ --ok: #07694a; --ok-bg: rgba(7,105,74,.15); --ok-line: rgba(7,105,74,.42); --warn: #8a5b00; --warn-bg:rgba(138,91,0,.15); --warn-line:rgba(138,91,0,.40); --bad: #a32b28; --bad-bg: rgba(163,43,40,.13); --bad-line: rgba(163,43,40,.36); /* ---------- BLU NOTTE: il tono piu' scuro ammesso ------------------------ */ --navy: #06283d; /* ---------- 4. FORMA ----------------------------------------------------- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* ---------- 5. RESPIRO --------------------------------------------------- */ --sp-base: 4px; --sp-1: var(--sp-base); --sp-2: calc(var(--sp-base) * 2); --sp-3: calc(var(--sp-base) * 3); --sp-4: calc(var(--sp-base) * 4); --sp-5: calc(var(--sp-base) * 5); --sp-6: calc(var(--sp-base) * 7); --sp-7: calc(var(--sp-base) * 10); /* ---------- TIPOGRAFIA --------------------------------------------------- */ --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-num: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; --fs-title: 34px; --fs-nav: 17px; --fs-xl: 21px; --fs-lg: 17px; --fs-md: 15px; --fs-sm: 13.5px; --fs-xs: 12px; --fs-2xs: 10.5px; --fs-input: 16px; /* MAI sotto 16px: iOS zooma sui campi piu' piccoli */ --fw-normal: 400; --fw-medium: 530; --fw-semi: 620; --fw-bold: 700; --lh-tight: 1.2; --lh-body: 1.5; /* ---------- PROFONDITA' E MOVIMENTO ------------------------------------- */ /* Ombre tinte di verdemare invece che grigie: su fondo chiaro il grigio sporca, una tinta affine allo sfondo resta pulita. */ --shadow-card: 0 1px 2px rgba(6,60,55,.06), 0 1px 3px rgba(6,60,55,.05); --shadow-bar: 0 -1px 0 var(--line); --blur-bar: saturate(180%) blur(20px); --ease: cubic-bezier(.32,.72,0,1); --ease-spring: cubic-bezier(.4,1.4,.5,1); --dur-fast: .18s; --dur: .28s; /* ---------- SAFE AREA (Dynamic Island e indicatore home) ----------------- */ --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); /* ---------- MISURE DI SISTEMA ------------------------------------------- */ --tap-min: 44px; /* minimo tocco raccomandato da Apple */ --navbar-h: 44px; --tabbar-h: 50px; --content-max: 720px; } /* Rispetta chi ha ridotto le animazioni nelle impostazioni di accessibilita' */ @media (prefers-reduced-motion: reduce){ :root{ --dur-fast: 0s; --dur: 0s; } }