/* ============================================================================= Ospity — foglio di stile del brand (condiviso) ----------------------------------------------------------------------------- Sorgente: _Progetto/ospity_brand_kit/ (tokens + guidelines v1.0). Lo usano le pagine di sistema: form /registra e landing (e, in futuro, il super-admin). Servito dal router su /brand/ospity.css. I FONT non si caricano qui: vanno messi nell' di ogni pagina (Quicksand + Mulish). In locale via Google Fonts; al deploy self-hosted (woff2) per evitare il trasferimento dati a Google — vedi TODO deploy nella ROADMAP. Convenzione: token globali con prefisso --ospity-, classi componente con "o-". ============================================================================= */ :root{ /* Brand */ --ospity-navy: #1E2A44; /* primario */ --ospity-coral: #FF6F61; /* accento */ --ospity-cream: #F6F3EC; /* sfondo caldo */ --ospity-white: #FFFFFF; /* Scala Navy */ --ospity-navy-900: #14203A; --ospity-navy-800: #1E2A44; --ospity-navy-600: #34415E; --ospity-navy-400: #6E7A97; --ospity-navy-200: #C3C9D6; --ospity-navy-50: #EEF0F4; /* Scala Corallo */ --ospity-coral-600: #E85B4E; /* hover/active */ --ospity-coral-500: #FF6F61; --ospity-coral-300: #FF9D93; --ospity-coral-100: #FFE7E3; /* tinta sfondo */ /* Tipografia (le famiglie; il caricamento avviene nell'head della pagina) */ --ospity-font-display: 'Quicksand', 'Trebuchet MS', sans-serif; --ospity-font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Raggi / ombre */ --ospity-radius: 14px; --ospity-radius-lg: 22px; --ospity-radius-pill: 999px; --ospity-shadow: 0 12px 40px rgba(20, 32, 58, .12); --ospity-shadow-sm: 0 2px 10px rgba(20, 32, 58, .06); /* Semantici (stati) — non nel kit, scelti coerenti */ --ospity-ok: #047857; --ospity-ok-bg: #ECFDF5; --ospity-ok-border: #A7F3D0; --ospity-err: #DC2626; --ospity-err-bg: #FEF2F2; --ospity-err-border: #FECACA; } /* ---------- Reset minimo ---------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--ospity-cream); color:var(--ospity-navy); font-family:var(--ospity-font-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{ display:block; max-width:100%; } /* ---------- Tipografia (scala dal brand kit) -------------------------------- */ h1,h2,h3,h4{ font-family:var(--ospity-font-display); color:var(--ospity-navy); line-height:1.14; margin:0; font-weight:700; } .o-display{ font-size:clamp(34px, 6vw, 56px); line-height:1.05; letter-spacing:-.01em; } h1, .o-h1{ font-size:clamp(28px, 4.4vw, 40px); } h2, .o-h2{ font-size:clamp(24px, 3.4vw, 28px); font-weight:600; } h3, .o-h3{ font-size:20px; font-weight:600; } p{ margin:0 0 16px; } .o-lead{ font-size:18px; color:var(--ospity-navy-600); } .o-small{ font-size:13px; line-height:1.55; color:var(--ospity-navy-400); } a{ color:var(--ospity-coral-600); text-decoration:none; } a:hover{ text-decoration:underline; } /* Etichetta in corallo, maiuscoletto spaziato (occhiello sopra ai titoli) */ .o-kicker{ font-family:var(--ospity-font-body); font-weight:800; letter-spacing:.22em; text-transform:uppercase; font-size:12px; color:var(--ospity-coral); } /* Lineetta corallo decorativa */ .o-hairline{ height:3px; width:64px; background:var(--ospity-coral); border-radius:3px; } /* ---------- Contenitori ----------------------------------------------------- */ .o-container{ max-width:1080px; margin:0 auto; padding:0 24px; } .o-container--narrow{ max-width:560px; } /* ---------- Bottoni --------------------------------------------------------- */ .o-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--ospity-font-display); font-weight:600; font-size:16px; line-height:1; padding:14px 24px; border:1px solid transparent; border-radius:var(--ospity-radius); background:var(--ospity-coral); color:var(--ospity-white); cursor:pointer; transition:background .15s ease, transform .05s ease, box-shadow .15s ease; text-decoration:none; } .o-btn:hover{ background:var(--ospity-coral-600); text-decoration:none; } .o-btn:active{ transform:translateY(1px); } .o-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ospity-coral-100); } .o-btn--block{ width:100%; } .o-btn--lg{ padding:16px 30px; font-size:17px; } /* Variante secondaria (contorno navy su fondo chiaro) */ .o-btn--ghost{ background:transparent; color:var(--ospity-navy); border-color:var(--ospity-navy-200); } .o-btn--ghost:hover{ background:var(--ospity-navy-50); } /* Variante su fondo scuro (contorno chiaro) */ .o-btn--on-navy{ background:transparent; color:var(--ospity-white); border-color:rgba(255,255,255,.45); } .o-btn--on-navy:hover{ background:rgba(255,255,255,.10); } /* ---------- Card ------------------------------------------------------------ */ .o-card{ background:var(--ospity-white); border:1px solid rgba(30,42,68,.10); border-radius:var(--ospity-radius-lg); box-shadow:var(--ospity-shadow); padding:28px 24px; } /* ---------- Campi form ------------------------------------------------------ */ .o-field{ display:block; margin-top:16px; } .o-field > .o-label{ display:block; font-size:14px; font-weight:700; color:var(--ospity-navy); margin-bottom:6px; } .o-label small, .o-hint{ font-weight:500; color:var(--ospity-navy-400); } .o-input{ width:100%; padding:12px 13px; font-family:var(--ospity-font-body); font-size:15px; color:var(--ospity-navy); background:var(--ospity-white); border:1px solid var(--ospity-navy-200); border-radius:10px; } .o-input::placeholder{ color:var(--ospity-navy-400); } .o-input:focus{ outline:none; border-color:var(--ospity-coral); box-shadow:0 0 0 3px var(--ospity-coral-100); } .o-hint{ display:block; font-size:12.5px; margin-top:5px; color:var(--ospity-navy-400); } /* Prefisso attaccato a un input (es. ospity.io/) */ .o-inputgroup{ display:flex; align-items:stretch; } .o-inputgroup .o-prefix{ display:flex; align-items:center; padding:0 11px; white-space:nowrap; background:var(--ospity-navy-50); color:var(--ospity-navy-600); border:1px solid var(--ospity-navy-200); border-right:none; border-radius:10px 0 0 10px; font-size:14px; } .o-inputgroup .o-input{ border-radius:0 10px 10px 0; } /* ---------- Badge / pill ---------------------------------------------------- */ .o-badge{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ospity-font-display); font-weight:600; font-size:13px; padding:6px 13px; border-radius:var(--ospity-radius-pill); background:var(--ospity-coral-100); color:var(--ospity-coral-600); } .o-badge--navy{ background:var(--ospity-navy-50); color:var(--ospity-navy); } .o-badge--solid{ background:var(--ospity-coral); color:var(--ospity-white); } .o-badge .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; } /* ---------- Avvisi (esiti form) -------------------------------------------- */ .o-alert{ border-radius:11px; padding:11px 14px; font-size:14px; margin-bottom:8px; border:1px solid transparent; } .o-alert--err{ background:var(--ospity-err-bg); color:var(--ospity-err); border-color:var(--ospity-err-border); } .o-alert--ok{ background:var(--ospity-ok-bg); color:var(--ospity-ok); border-color:var(--ospity-ok-border); } /* ---------- Header / nav (landing) ----------------------------------------- */ .o-nav{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 0; } .o-nav .o-brand img{ height:34px; width:auto; } .o-nav .o-navlinks{ display:flex; align-items:center; gap:26px; } .o-nav .o-navlinks a{ color:var(--ospity-navy-600); font-weight:600; font-size:15px; } .o-nav .o-navlinks a:hover{ color:var(--ospity-navy); text-decoration:none; } /* ---------- Footer ---------------------------------------------------------- */ .o-footer{ background:var(--ospity-navy); color:rgba(246,243,236,.66); padding:48px 0; } .o-footer img{ height:30px; width:auto; margin-bottom:16px; } .o-footer a{ color:var(--ospity-cream); } /* ---------- Sezioni su fondo scuro ----------------------------------------- */ .o-on-navy{ background:var(--ospity-navy); color:var(--ospity-cream); } .o-on-navy h1,.o-on-navy h2,.o-on-navy h3{ color:var(--ospity-cream); } .o-on-navy .o-lead{ color:rgba(246,243,236,.72); } /* ---------- Utility minime -------------------------------------------------- */ .o-center{ text-align:center; } .o-mt-0{ margin-top:0; } .o-mb-0{ margin-bottom:0; }