/* ============================================================ BRAND.CSS — I Colori della Pescara Palette, tipografia e componenti visivi specifici del brand. Caricare DOPO grid.css. ============================================================ */ /* ---------- FONT ---------- Il sito usa Montserrat, lo stesso font usato nel logo, caricato via Google Fonts CDN (link nell' di ogni pagina HTML). Se preferisci ospitarlo in locale invece che da CDN, scarica i file .woff2 da https://fonts.google.com/specimen/Montserrat, metti i file in /assets/fonts/ e usa @font-face come da esempio commentato in fondo a questo blocco. Istruzioni complete nella guida-pubblicazione.md. */ @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } /* ---------- PALETTE ---------- */ :root { --navy: #1c324a; --navy-soft: #2b4561; --olive: #7c8c3e; --olive-soft: #9aab5c; --azure: #8aa9c4; --azure-soft: #c3d4e3; --sand: #e7dcc9; --sand-light: #f6f1e7; --white: #ffffff; --ink: #233143; --muted: #5b6878; --radius: 14px; --shadow: 0 10px 30px rgba(28, 50, 74, 0.1); --shadow-soft: 0 4px 16px rgba(28, 50, 74, 0.08); /* Montserrat per titoli e testo, coerente con il logo. Se il CDN non carica (es. sito offline o blocco rete), il browser usa automaticamente i font di fallback elencati qui. */ --font-head: "Montserrat", Georgia, "Times New Roman", serif; --font-body: "Montserrat", -apple-system, "Segoe UI", Arial, sans-serif; } /* ---------- BASE TIPOGRAFICA ---------- */ body { font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); font-weight: 700; margin: 0 0 0.45em 0; letter-spacing: 0.01em; } p { margin: 0 0 1em 0; color: var(--ink); } a { color: inherit; text-decoration: none; } /* ---------- SEZIONI ---------- */ .section { padding: 6rem 0; } .section--sm { padding: 3.5rem 0; } .section--navy { background: var(--navy); color: var(--white); } .section--navy h2, .section--navy h3 { color: var(--white); } .section--navy p { color: var(--azure-soft); } .section--sand { background: var(--sand-light); } .eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive); margin-bottom: 1rem; } .eyebrow::before, .eyebrow::after { content: ""; display: block; width: 34px; height: 1px; background: var(--azure); } .section--navy .eyebrow { color: var(--azure-soft); } .section-title { text-align: center; font-size: clamp(1.75rem, 4vw, 2.6rem); margin-bottom: 0.5rem; } .section-subtitle { text-align: center; max-width: 640px; margin: 0 auto 3rem auto; color: var(--muted); font-size: 1.05rem; } .section--navy .section-subtitle { color: var(--azure-soft); } /* ---------- BOTTONI BRAND ---------- */ .btn-primary { background: var(--navy); color: var(--white); } .btn-primary:hover { background: var(--navy-soft); transform: translateY(-2px); box-shadow: var(--shadow); } .btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); } .btn-outline:hover { background: var(--navy); color: var(--white); } .btn-outline-light { background: transparent; border-color: #fff; color: #fff; } .btn-outline-light:hover { background: #fff; color: var(--navy); } .btn-whatsapp { background: #3c8a5c; color: #fff; } .btn-whatsapp svg { display: block; } .btn-whatsapp:hover { background: #2f7048; transform: translateY(-2px); } /*.btn-cta{ background: var(--olive); color: #fff; } .btn-cta:hover{ background:#6a7833; transform: translateY(-2px); }*/ .btn-cta { background: var(--azure); color: #fff; } .btn-cta:hover { background: #6f8ba0; transform: translateY(-2px); } .btn-booking { background: #003b95; color: #fff; } .btn-booking svg { display: block; } .btn-booking:hover { background: #012e72; transform: translateY(-2px); } /* ---------- NAVBAR BRAND ---------- */ .site-navbar { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(28, 50, 74, 0.08); padding: 0.9rem 0; } .navbar-logo img { height: 44px; width: auto; display: block; } .navbar-logo { display: flex; align-items: center; } .navbar-nav { display: flex; align-items: center; gap: 2.1rem; list-style: none; margin: 0; padding: 0; } .navbar-nav li { display: flex; align-items: center; } .navbar-nav a:not(.btn) { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); position: relative; padding-bottom: 4px; line-height: 1; } .navbar-nav a:not(.btn)::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--olive); transition: width 0.25s ease; } .navbar-nav a:not(.btn):hover::after { width: 100%; } .navbar-nav li .btn { margin: 0; } /* il bottone non deve avere margini residui dentro la navbar */ .navbar-actions { display: flex; align-items: center; gap: 1rem; } .lang-switch { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 500; color: var(--navy); } .lang-switch button { background: none; border: none; cursor: pointer; color: var(--navy); opacity: 0.4; font-size: 0.78rem; font-weight: 500; padding: 4px 6px; font-family: var(--font-body); } .lang-switch button.is-active { opacity: 1; text-decoration: underline; text-underline-offset: 4px; } .lang-switch .sep { opacity: 0.3; } .navbar-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .navbar-burger span { width: 24px; height: 2px; background: var(--navy); display: block; } @media (max-width: 900px) { .navbar-nav { position: fixed; top: 0; right: -100%; height: 100vh; width: 78%; max-width: 340px; background: var(--white); flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 2.5rem; gap: 1.8rem; transition: right 0.35s ease; box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12); } .navbar-nav.is-open { right: 0; } .navbar-nav li { width: 100%; } .navbar-nav a { font-size: 1rem; } .navbar-nav li .btn { width: 100%; } .navbar-burger { display: flex; } } .navbar-spacer { height: 76px; } /* ---------- HERO / SLIDESHOW ---------- */ .hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; margin-top: -76px; } .hero-slides { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; } .hero-slide.is-active { opacity: 1; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(28, 50, 74, 0.55) 0%, rgba(28, 50, 74, 0.35) 50%, rgba(28, 50, 74, 0.72) 100% ); } .hero-content { position: relative; z-index: 2; color: #fff; padding: 0 1.5rem; max-width: 800px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); } .hero-title { font-family: var(--font-head); color: #fff; margin-bottom: 1.1rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7), 0 0 60px rgba(0, 0, 0, 0.4); } .hero-title__line { display: flex; align-items: center; gap: 0.6rem; line-height: 1.1; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); } .hero-title__line--big { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); } .hero-title__line--small { font-size: clamp(0.95rem, 1.6vw, 1.3rem); font-weight: 400; letter-spacing: 0.25em; text-transform: uppercase; color: var(--azure-soft); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); } .hero-title__line--tiny { font-size: clamp(0.85rem, 1.4vw, 1.1rem); font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--azure-soft); margin-top: 0.2rem; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); } .hero-title__dash { display: block; width: 34px; height: 1px; background: var(--azure-soft); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); } .hero-title__dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--olive-soft); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); } .hero-title__dot_olive { background: var(--olive-soft); } .hero-title__dot_azure { background: var(--azure); } .hero-subtitle { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--azure-soft); margin-bottom: 2.2rem; font-weight: 400; color: rgba(255, 255, 255, 0.88); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); } .hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .hero-dots { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 2; } .hero-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: all 0.2s ease; } .hero-dots span.is-active { background: #fff; width: 24px; border-radius: 4px; } /* ---------- ROOM CARD (Pineta / Adriatico) ---------- */ .room-card { background: #fff; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; } .room-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .room-card__body { padding: 1.8rem; } .room-card__tag { display: inline-block; color: #fff; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; margin-bottom: 0.75rem; } .room-card__tag--pineta { background: var(--olive-soft); } .room-card__tag--adriatico { background: var(--azure); } .room-card h3 { font-size: 1.65rem; margin-bottom: 0.6rem; } .room-card p { color: var(--muted); font-size: 0.95rem; } /* ---------- SERVIZI ---------- */ .service { text-align: center; padding: 1.25rem 0.6rem; } .service__icon { width: 58px; height: 58px; border-radius: 50%; background: var(--sand-light); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto; color: var(--navy); } .service__icon svg { width: 26px; height: 26px; } .service h4 { font-size: 1rem; margin-bottom: 0.35rem; } .service p { font-size: 0.85rem; color: var(--muted); } /* ---------- PLACEHOLDER IMMAGINI ---------- */ .ph { background: linear-gradient(135deg, var(--sand) 0%, var(--azure-soft) 100%); display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; padding: 1.25rem; border-radius: var(--radius); } .ph--pineta { background: linear-gradient(135deg, #9aab5c, #7c8c3e); color: #fff; } .ph--adriatico { background: linear-gradient(135deg, #c3d4e3, #8aa9c4); color: var(--navy); } .ph--navy { background: linear-gradient(135deg, #2b4561, #1c324a); color: var(--azure-soft); } /* ---------- PAGE HERO (per pagine interne: Camere, Contatti) ---------- */ .page-hero { background: var(--navy); padding: 7.5rem 0 4.5rem 0; background-image: radial-gradient( circle at 80% 0%, rgba(138, 169, 196, 0.18), transparent 60% ); } .page-hero h1 { color: #fff; font-size: clamp(2.1rem, 5vw, 3.2rem); } .page-hero p { color: var(--azure-soft); } /* ---------- ROOM DETAIL (pagina Camere) ---------- */ .room-gallery__main { aspect-ratio: 4/3; margin-bottom: 0.9rem; } .room-gallery__thumb { aspect-ratio: 1/1; font-size: 0.7rem; } .room-features { list-style: none; padding: 0; margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.75rem; } .room-features li { font-size: 0.95rem; color: var(--ink); line-height: 1.5; padding-left: 1.75rem; position: relative; min-height: 22px; display: flex; align-items: center; } .room-features li::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--olive-soft); } .room-features li::after { content: ""; position: absolute; left: 6px; top: 50%; margin-top: -5px; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .tags-row { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; } .tags-row span { background: var(--sand-light); color: var(--navy); font-size: 0.82rem; padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid var(--sand); } /* ---------- CONTATTI ---------- */ .contact-card { background: #fff; border: 1px solid var(--sand); border-radius: var(--radius); padding: 2rem 1.25rem; text-align: center; transition: all 0.25s ease; box-shadow: var(--shadow-soft); display: block; } .contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--azure); } .contact-card__icon { width: 54px; height: 54px; border-radius: 50%; background: var(--sand-light); color: var(--navy); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto; } .contact-card__icon svg { width: 24px; height: 24px; } .contact-card h4 { font-size: 1rem; margin-bottom: 0.35rem; } .contact-card p { font-size: 0.9rem; color: var(--muted); margin: 0; word-break: break-word; } .contact-card--whatsapp .contact-card__icon { background: #e3f3ea; color: #3c8a5c; } .contact-card--telegram .contact-card__icon { background: #e3edf8; color: #2b8bd1; } .contact-address { display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; background: var(--sand-light); border-radius: var(--radius); padding: 2.75rem; } .contact-address > * { flex: 1 1 320px; } /* ---------- FOOTER ---------- */ .site-footer { background: var(--navy); color: var(--azure-soft); padding: 4.5rem 0 0 0; } .site-footer a { color: var(--azure-soft); } .site-footer a:hover { color: var(--white); } .footer-grid { display: flex; flex-wrap: wrap; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .footer-col { flex: 1 1 220px; } .footer-col--brand { flex: 1.4 1 260px; } .footer-col h4 { color: #fff; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; margin-bottom: 1.1rem; } .footer-col p, .footer-col li { font-size: 0.9rem; color: var(--azure-soft); } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .footer-logo-wrap { display: inline-block; background: var(--sand-light); border-radius: 10px; padding: 0.65rem 1rem; margin-bottom: 1.1rem; } .footer-logo { height: 70px; width: auto; display: block; } .footer-map { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); } .footer-map iframe { width: 100%; height: 190px; border: 0; display: block; filter: grayscale(0.3) contrast(1.1); } .footer-social { display: flex; gap: 0.85rem; margin-top: 1.1rem; } .footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .footer-social a:hover { background: var(--olive); border-color: var(--olive); } .footer-social svg { width: 16px; height: 16px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 1.5rem 0; font-size: 0.78rem; color: rgba(195, 212, 227, 0.6); } /* ---------- WHATSAPP FLOAT ---------- */ .wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; width: 56px; height: 56px; border-radius: 50%; background: #3c8a5c; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; } .wa-float:hover { transform: scale(1.08); } .wa-float svg { width: 28px; height: 28px; fill: #fff; } /* ---------- BILINGUA: switch IT / EN ---------- Regola generale: di default è visibile l'italiano, l'inglese è nascosto. Quando , si inverte. Le versioni ".is-inline" usano !important per avere sempre priorità sulle regole generali, indipendentemente dall'ordine con cui le classi appaiono nell'HTML. */ [data-lang-it] { display: block; } [data-lang-en] { display: none; } html[data-active-lang="en"] [data-lang-it] { display: none; } html[data-active-lang="en"] [data-lang-en] { display: block; } [data-lang-it].is-inline { display: inline !important; } [data-lang-en].is-inline { display: none !important; } html[data-active-lang="en"] [data-lang-it].is-inline { display: none !important; } html[data-active-lang="en"] [data-lang-en].is-inline { display: inline !important; } /* ---------- RESPONSIVE TWEAKS ---------- */ @media (max-width: 900px) { .footer-grid { flex-direction: column; } .contact-address { flex-direction: column; padding: 1.75rem; } } @media (max-width: 560px) { .section { padding: 3.75rem 0; } } /* ---------- MAPPA STATICA COOKIE-FREE ---------- */ .static-map-wrap { position: relative; overflow: hidden; } .static-map-btn { position: absolute; bottom: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; background: var(--white); color: var(--navy); font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); text-decoration: none; transition: background .2s ease, color .2s ease; white-space: nowrap; } .static-map-btn:hover { background: var(--navy); color: var(--white); } .privacy-wrap { max-width: 800px; margin: 0 auto; padding: 60px 24px 80px; } .privacy-wrap h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: .3em; } .privacy-wrap h2 { font-size: 1.15rem; margin-top: 2.2em; margin-bottom: .5em; padding-bottom: .4em; border-bottom: 1px solid var(--sand); } .privacy-wrap h3 { font-size: 1rem; margin-top: 1.4em; margin-bottom: .3em; color: var(--olive); } .privacy-wrap p, .privacy-wrap li { font-size: .97rem; line-height: 1.75; color: var(--muted); } .privacy-wrap ul { padding-left: 1.4em; margin: .5em 0 1em; } .privacy-wrap li { margin-bottom: .3em; } .privacy-wrap a { color: var(--olive); text-decoration: underline; } .privacy-wrap .meta { font-size: .82rem; color: #aaa; margin-bottom: 2.5em; } .privacy-wrap .highlight-box { background: var(--sand-light); border-left: 3px solid var(--olive); padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5em 0; } .privacy-wrap .highlight-box p { margin: 0; } .lang-note { background: var(--azure-soft); padding: .6rem 1rem; border-radius: var(--radius); font-size: .82rem; color: var(--navy); margin-bottom: 2em; display: inline-block; }