/*
* Theme Name: Vasco Theme
* Theme URI: https://tuttacolpadivasco.it
* Description: Tema custom per Tutta Colpa di Vasco - Tribute band Vasco Rossi. Dark rock aesthetic con Tailwind CSS.
* Author: Tutta Colpa di Vasco
* Author URI: https://tuttacolpadivasco.it
* Version: 1.0.0
* Text Domain: vasco-theme
* Tags: music, band, dark, custom-theme
*/
/* ==========================================================================
CSS CUSTOM PROPERTIES (Design Tokens)
Questi valori rispecchiano il design system definito in context_project.md
========================================================================== */
:root {
/* Palette Colori */
--color-primary: #D1BA44; /* Oro Vasco — titoli, accenti, hover, bordi attivi */
--color-primary-dark: #b09a2e; /* Oro scuro — pressed state */
--color-bg: #000000; /* Nero puro — sfondo base body */
--color-bg-card: rgba(112, 52, 140, 0.5); /* Viola trasparente — card band */
--color-bg-overlay: rgba(0, 0, 0, 0.59); /* Overlay scuro — box content */
--color-bg-nav: rgba(0, 0, 0, 0.85); /* Sfondo navbar scrolled */
--color-text: #FFFFFF; /* Bianco — testo body */
--color-text-muted: rgba(255, 255, 255, 0.7); /* Bianco attenuato — testo secondario */
--color-border: rgba(255, 255, 255, 0.15); /* Bordi sottili su dark bg */
--color-border-gold: rgba(209, 186, 68, 0.4); /* Bordi oro trasparenti */
/* Tipografia */
--font-primary: 'Anton', sans-serif; /* Titoli, nav, bottoni */
--font-body: 'Inter', sans-serif; /* Testo generico */
--font-secondary: 'Nunito', sans-serif; /* Descrizioni, paragrafi narrativi */
/* Spaziatura */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 40px;
--spacing-2xl: 64px;
--spacing-3xl: 96px;
/* Bordi */
--radius-sm: 5px;
--radius-md: 10px;
--radius-lg: 15px;
--radius-full: 9999px;
/* Transizioni */
--transition-fast: 0.2s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
/* Z-index */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-social: 50;
/* Navbar */
--nav-height: 70px;
--nav-height-sm: 56px;
/* Hero */
--hero-height-full: 100vh;
--hero-height-inner: 60vh;
}
/* ==========================================================================
RESET & BASE
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
}
/* smooth scroll solo su desktop — su mobile causa jank e penalizza TBT */
@media (min-width: 1024px) {
html {
scroll-behavior: smooth;
}
}
body {
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
position: relative; /* ancora position:absolute dei figli diretti (scritta desktop) */
}
/* Scrollbar personalizzata */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
background: var(--color-primary);
border-radius: var(--radius-full);
}
/* ==========================================================================
TIPOGRAFIA BASE
========================================================================== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-primary);
line-height: 1.2;
color: var(--color-primary);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1rem, 2vw, 1.5rem); }
p {
font-family: var(--font-secondary);
color: var(--color-text);
font-size: 1rem;
line-height: 1.8;
margin-bottom: var(--spacing-md);
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-base);
}
a:hover {
color: #fff;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* ==========================================================================
LAYOUT BASE
========================================================================== */
.site-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
flex: 1;
}
.container-vasco {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
@media (min-width: 768px) {
.container-vasco {
padding: 0 var(--spacing-xl);
}
}
/* ==========================================================================
HERO SECTIONS
========================================================================== */
.hero-section {
position: relative;
width: 100%;
height: var(--hero-height-full);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: scroll; /* scroll su mobile per performance */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
@media (min-width: 1024px) {
.hero-section {
background-attachment: fixed; /* parallax solo su desktop */
}
.hero-section--inner {
height: var(--hero-height-inner);
}
}
.hero-section--inner {
height: var(--hero-height-inner);
}
/* Overlay gradiente su hero */
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.25) 0%,
rgba(0, 0, 0, 0.55) 60%,
rgba(0, 0, 0, 0.80) 100%
);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
width: 100%;
padding: 0 var(--spacing-md);
}
/* ==========================================================================
BOX CONTENT (glassmorphism vasco-style)
========================================================================== */
.vasco-box {
background: var(--color-bg-overlay);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
}
/* backdrop-filter solo su desktop — su mobile è troppo costoso per la GPU */
@media (min-width: 1024px) {
.vasco-box {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
}
.vasco-box--gold-border {
border-color: var(--color-border-gold);
}
/* ==========================================================================
BOTTONI
========================================================================== */
.btn-vasco {
display: inline-block;
font-family: var(--font-primary);
font-size: 1rem;
letter-spacing: 0.05em;
padding: var(--spacing-sm) var(--spacing-lg);
border: 1px solid var(--color-primary);
color: var(--color-primary);
background: transparent;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
text-decoration: none;
white-space: nowrap;
}
.btn-vasco:hover,
.btn-vasco:focus {
background-color: var(--color-primary);
color: #000;
outline: none;
}
.btn-vasco--active,
.btn-vasco.active {
background-color: var(--color-primary);
color: #000;
}
.btn-vasco--lg {
padding: var(--spacing-md) var(--spacing-xl);
font-size: 1.125rem;
}
.btn-vasco--ghost {
border-color: rgba(255, 255, 255, 0.4);
color: #fff;
}
.btn-vasco--ghost:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
border-color: #fff;
}
/* Bottone pieno oro — CTA principale (es. SCOPRI LA BAND) */
.btn-vasco--filled {
background-color: var(--color-primary);
color: #000;
border-color: var(--color-primary);
}
.btn-vasco--filled:hover,
.btn-vasco--filled:focus {
background-color: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: #000;
}
/* ==========================================================================
GALLERY MOSAIC GRID (membro singolo)
Classi usate dal sito originale mantenute + migliorate
========================================================================== */
.vasco-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 6px;
width: 100%;
}
.vasco-gallery .item-vasco-grid {
overflow: hidden;
border-radius: 4px;
cursor: pointer;
transition: transform var(--transition-base), filter var(--transition-base);
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.vasco-gallery .item-vasco-grid:hover {
transform: scale(1.02);
filter: brightness(1.1);
z-index: 2;
}
.vasco-gallery .item--tall {
grid-row: span 2;
}
.vasco-gallery .item--wide {
grid-column: span 2;
}
/* Gallery 3 col per locandine */
.vasco-gallery-2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 350px;
gap: 8px;
width: 100%;
}
.vasco-gallery-2 .item-vasco-grid {
overflow: hidden;
border-radius: 6px;
cursor: pointer;
background-size: cover !important;
background-position: center !important;
transition: transform var(--transition-base);
}
.vasco-gallery-2 .item-vasco-grid:hover {
transform: scale(1.02);
}
@media (max-width: 1023px) {
.vasco-gallery {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 160px;
}
.vasco-gallery .item--wide {
grid-column: span 1;
}
}
@media (max-width: 639px) {
.vasco-gallery {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 140px;
}
.vasco-gallery-2 {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 220px;
}
}
/* ==========================================================================
CARD BAND MEMBRI
========================================================================== */
.band-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border-gold);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
color: var(--color-text);
transition: transform var(--transition-base), box-shadow var(--transition-base);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.band-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(209, 186, 68, 0.15);
}
.band-card__name {
font-family: var(--font-primary);
font-size: 1.25rem;
color: var(--color-text);
margin-bottom: var(--spacing-xs);
}
.band-card__role {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--color-primary);
margin-bottom: var(--spacing-md);
}
.band-card__image {
width: 100%;
max-width: 280px;
height: 280px;
object-fit: cover;
border-radius: var(--radius-md);
margin-bottom: var(--spacing-md);
}
/* ==========================================================================
SIDEBAR SOCIAL (desktop fixed left)
========================================================================== */
.social-sidebar {
position: fixed;
left: var(--spacing-md);
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: var(--spacing-md);
z-index: var(--z-social);
}
.social-sidebar__link {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-full);
background: rgba(0, 0, 0, 0.5);
border: 1px solid var(--color-border);
transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.social-sidebar__link:hover {
background: var(--color-primary);
border-color: var(--color-primary);
transform: scale(1.15);
}
.social-sidebar__link img,
.social-sidebar__link svg {
width: 22px;
height: 22px;
}
/* Nasconde la sidebar sui breakpoint piccoli */
@media (max-width: 1023px) {
.social-sidebar {
display: none;
}
}
/* ==========================================================================
ANIMAZIONI SCROLL (Intersection Observer)
========================================================================== */
/* Stato iniziale elementi da animare */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger delays per gruppi di card */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }
/* Hero text entrance */
@keyframes heroFadeUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-animate {
animation: heroFadeUp 0.8s ease forwards;
}
.hero-animate--delay-1 { animation-delay: 0.2s; opacity: 0; }
.hero-animate--delay-2 { animation-delay: 0.45s; opacity: 0; }
.hero-animate--delay-3 { animation-delay: 0.7s; opacity: 0; }
.hero-animate--delay-4 { animation-delay: 0.95s; opacity: 0; }
.hero-animate--delay-5 { animation-delay: 1.2s; opacity: 0; }
/* Pulse per elementi decorativi */
@keyframes pulse-gold {
0%, 100% { box-shadow: 0 0 0 0 rgba(209, 186, 68, 0.4); }
50% { box-shadow: 0 0 0 8px rgba(209, 186, 68, 0); }
}
/* ==========================================================================
FORM CONTATTI
========================================================================== */
.vasco-form {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.vasco-form__group {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.vasco-form__label {
font-family: var(--font-primary);
font-size: 0.9rem;
color: var(--color-primary);
letter-spacing: 0.05em;
}
.vasco-form__input,
.vasco-form__textarea {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
font-size: 1rem;
padding: var(--spacing-sm) var(--spacing-md);
transition: border-color var(--transition-base);
outline: none;
}
.vasco-form__input:focus,
.vasco-form__textarea:focus {
border-color: var(--color-primary);
background: rgba(255, 255, 255, 0.08);
}
.vasco-form__textarea {
min-height: 120px;
resize: vertical;
}
/* Honeypot (anti-spam, deve essere hidden) */
.vasco-form__honeypot {
display: none !important;
visibility: hidden;
height: 0;
overflow: hidden;
}
/* Feedback messages */
.vasco-form__feedback {
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 0.95rem;
display: none;
}
.vasco-form__feedback--success {
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.4);
color: #86efac;
}
.vasco-form__feedback--error {
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #fca5a5;
}
/* ==========================================================================
LIGHTBOX (gallery foto)
========================================================================== */
.vasco-lightbox {
display: none;
position: fixed;
inset: 0;
z-index: var(--z-modal);
background: rgba(0, 0, 0, 0.92);
align-items: center;
justify-content: center;
padding: var(--spacing-xl);
}
.vasco-lightbox.is-open {
display: flex;
}
.vasco-lightbox__img {
max-width: 90vw;
max-height: 85vh;
object-fit: contain;
border-radius: var(--radius-md);
box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
}
.vasco-lightbox__close {
position: absolute;
top: var(--spacing-lg);
right: var(--spacing-lg);
background: rgba(255, 255, 255, 0.1);
border: none;
color: #fff;
font-size: 1.5rem;
width: 44px;
height: 44px;
border-radius: var(--radius-full);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition-base);
}
.vasco-lightbox__close:hover {
background: var(--color-primary);
color: #000;
}
.vasco-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.1);
border: none;
color: #fff;
font-size: 1.5rem;
width: 48px;
height: 48px;
border-radius: var(--radius-full);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition-base);
}
.vasco-lightbox__nav:hover {
background: var(--color-primary);
color: #000;
}
.vasco-lightbox__prev { left: var(--spacing-md); }
.vasco-lightbox__next { right: var(--spacing-md); }
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer {
background: rgba(0, 0, 0, 0.95);
border-top: 1px solid var(--color-border-gold);
padding: var(--spacing-xl) 0 var(--spacing-lg);
margin-top: auto;
}
.site-footer__credits {
text-align: center;
font-family: var(--font-secondary);
font-size: 0.85rem;
color: var(--color-text-muted);
margin-top: var(--spacing-lg);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--color-border);
}
/* ==========================================================================
SEZIONE CONCERTI/EVENTI
========================================================================== */
.evento-card {
background: var(--color-bg-overlay);
border: 1px solid var(--color-border-gold);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
transition: transform var(--transition-base), box-shadow var(--transition-base);
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.evento-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(209, 186, 68, 0.12);
}
.evento-card__data {
font-family: var(--font-primary);
font-size: 1.5rem;
color: var(--color-primary);
}
.evento-card__luogo {
font-family: var(--font-body);
font-size: 1rem;
color: var(--color-text);
}
.evento-card__citta {
font-family: var(--font-secondary);
font-size: 0.9rem;
color: var(--color-text-muted);
}
.evento-card--annullato {
opacity: 0.5;
position: relative;
}
.evento-card--annullato::after {
content: 'ANNULLATO';
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
background: rgba(239, 68, 68, 0.8);
color: #fff;
font-family: var(--font-primary);
font-size: 0.75rem;
padding: 2px 8px;
border-radius: var(--radius-sm);
}
/* ==========================================================================
UTILITIES
========================================================================== */
.text-gold { color: var(--color-primary); }
.text-white { color: var(--color-text); }
.text-muted { color: var(--color-text-muted); }
.font-anton { font-family: var(--font-primary); }
.font-nunito { font-family: var(--font-secondary); }
.font-inter { font-family: var(--font-body); }
.hr-gold { border-color: var(--color-primary); opacity: 0.4; }
/* Separator decorativo */
.vasco-separator {
width: 60px;
height: 3px;
background: var(--color-primary);
border-radius: var(--radius-full);
margin: var(--spacing-md) auto;
}
/* Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
RESPONSIVE HELPERS
========================================================================== */
/* Mostra solo su mobile (< 1024px) */
.mobile-only { display: block; }
@media (min-width: 1024px) { .mobile-only { display: none !important; } }
/* Mostra solo su desktop (>= 1024px) */
.desktop-only { display: none; }
@media (min-width: 1024px) {
.desktop-only { display: block !important; }
/* Override per elementi flex: social-sidebar ha bisogno di display:flex */
.social-sidebar.desktop-only { display: flex !important; }
}
/* ==========================================================================
NAVBAR — LOGO
the_custom_logo() genera ![]()
Senza questi stili il logo 400x400 occupa tutto l'header
========================================================================== */
.site-header__logo {
display: flex;
align-items: center;
flex-shrink: 0;
}
.custom-logo-link {
display: flex;
align-items: center;
line-height: 0;
}
/* Logo nella navbar: max 140px larghezza, altezza proporzionale */
.custom-logo-link img.custom-logo,
.site-header__logo img {
max-height: 52px;
width: auto;
max-width: 140px;
object-fit: contain;
display: block;
}
/* Logo più piccolo quando navbar è scrolled/compatta */
.site-header.scrolled .custom-logo-link img.custom-logo,
.site-header.scrolled .site-header__logo img {
max-height: 40px;
}
.container-vasco {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
/* ==========================================================================
WORDPRESS SPECIFICO
Classi richieste da WP per compatibilità
========================================================================== */
.wp-block-image { margin: 0; }
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 0 auto var(--spacing-md); }
.alignright { float: right; margin: 0 0 var(--spacing-md) var(--spacing-md); }
.alignleft { float: left; margin: 0 var(--spacing-md) var(--spacing-md) 0; }
/* Barra admin WP — compensa altezza */
body.admin-bar .site-header--sticky {
top: 32px;
}
@media (max-width: 782px) {
body.admin-bar .site-header--sticky {
top: 46px;
}
}
/* ==========================================================================
HOMEPAGE — fp- classes (front-page.php BEM components)
Aggiunte in sessione 3: le classi fp- non avevano CSS definito.
Questo causava: hero altezza 0, logo unstyled, scritta malposizionata.
========================================================================== */
/* Previeni scroll orizzontale globalmente */
html,
body {
overflow-x: hidden;
max-width: 100%;
}
/* Hero full-viewport */
.fp-hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: scroll; /* scroll su mobile per performance */
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.fp-hero {
background-attachment: fixed; /* parallax leggero su desktop */
}
}
/* Overlay scuro sul background */
.fp-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.30) 50%,
rgba(0, 0, 0, 0.55) 100%
);
z-index: 1;
pointer-events: none;
}
/* scritta.png: assoluta in cima alla hero, sinistra, grande come nell'originale */
.fp-hero__scritta-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
padding-top: var(--nav-height, 70px); /* non si sovrappone alla navbar */
z-index: 2;
pointer-events: none;
}
.fp-hero__scritta {
display: block;
width: 72%;
max-width: 950px;
height: auto;
}
/* Contenuto centrale: titolo + CTA — in basso nella hero */
.fp-hero__content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
/* CENTER: contenuto centrato verticalmente come su sito originale.
Era flex-end → spingeva titolo e bottoni sul fondo, sovrapponendosi al footer fixed. */
justify-content: center;
text-align: center;
flex: 1;
/* padding-bottom compensa il footer fixed (~55px) + margine estetico */
padding: 0 1.5rem 80px;
padding-top: 80px; /* bilancia visivamente verso il centro */
}
.fp-hero__title {
font-family: var(--font-primary);
color: #ffffff;
font-size: clamp(1.4rem, 3.5vw, 2.8rem);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 2rem;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.85);
}
.fp-hero__cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
/* STORIA / GALLERIA — destra, solo desktop, position:fixed */
.fp-side-nav {
position: fixed;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
z-index: 50;
display: none; /* nascosto su mobile */
flex-direction: column;
gap: 1rem;
align-items: flex-end;
}
@media (min-width: 1024px) {
.fp-side-nav {
display: flex;
}
}
.fp-side-nav__link {
font-family: var(--font-primary);
color: #ffffff;
font-size: 1.1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);
transition: color 0.3s ease;
line-height: 1;
}
.fp-side-nav__link:hover {
color: var(--color-primary);
}
/* Social sidebar — sinistra, solo desktop, position:fixed */
.fp-social {
position: fixed;
left: 1rem;
top: 50%;
transform: translateY(-50%);
z-index: 50;
display: none; /* nascosto su mobile */
flex-direction: column;
gap: 0.75rem;
}
@media (min-width: 1024px) {
.fp-social {
display: flex;
}
}
.fp-social__link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.50);
border: 1px solid rgba(255, 255, 255, 0.25);
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
text-decoration: none;
flex-shrink: 0;
}
.fp-social__link:hover {
transform: scale(1.15);
}
.fp-social__link--fb:hover { background: #1877f2; border-color: #1877f2; }
.fp-social__link--ig:hover { background: #e1306c; border-color: #e1306c; }
.fp-social__link--yt:hover { background: #ff0000; border-color: #ff0000; }
/* ==========================================================================
MOBILE — Responsive homepage
========================================================================== */
@media (max-width: 1023px) {
/* Scritta full-width su mobile */
.fp-hero__scritta {
width: 100%;
max-width: 100%;
}
/* Mobile: spazio sotto per non coprire con footer fixed (~55px) */
.fp-hero__content {
padding: 0 1rem 70px;
padding-top: 60px;
}
.fp-hero__title {
font-size: clamp(1.1rem, 5.5vw, 1.6rem);
}
.fp-hero__cta .btn-vasco {
padding: 0.55rem 1.2rem;
font-size: 0.875rem;
}
/* fp-main senza margini laterali: no scroll orizzontale */
.fp-main {
width: 100%;
overflow-x: hidden;
}
}
/* ==========================================================================
COOKIE BANNER — GDPR
========================================================================== */
#vasco-cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background: rgba(10, 10, 10, 0.97);
border-top: 1px solid rgba(209, 186, 68, 0.4);
padding: 1rem 1.5rem;
transform: translateY(100%);
transition: transform 0.4s ease;
/* backdrop-filter rimosso: con opacity 0.97 il blur è invisibile */
}
#vasco-cookie-banner.is-visible {
transform: translateY(0);
}
.cookie-banner__inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.cookie-banner__text {
flex: 1;
min-width: 200px;
font-family: var(--font-secondary);
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
}
.cookie-banner__text a {
color: var(--color-primary);
text-decoration: underline;
}
.cookie-banner__actions {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
flex-wrap: wrap;
}
.cookie-btn-accept {
background: var(--color-primary);
color: #000;
border: 1px solid var(--color-primary);
font-family: var(--font-primary);
font-size: 0.875rem;
padding: 0.5rem 1.25rem;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
white-space: nowrap;
}
.cookie-btn-accept:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
}
.cookie-btn-refuse {
background: transparent;
color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.3);
font-family: var(--font-primary);
font-size: 0.875rem;
padding: 0.5rem 1.25rem;
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
white-space: nowrap;
}
.cookie-btn-refuse:hover {
border-color: rgba(255, 255, 255, 0.6);
color: #fff;
}
@media (max-width: 640px) {
.cookie-banner__inner {
flex-direction: column;
gap: 1rem;
}
.cookie-banner__actions {
width: 100%;
justify-content: center;
}
}
/* ==========================================================================
SH — SITE HEADER v2.0.0 (puro CSS, nessuna dipendenza Tailwind)
Tutte le classi .sh-* e .sh-mobile-* sono auto-contenute qui.
La transizione background è gestita da navigation.js su scroll.
PERCHÉ nuovo prefisso .sh invece di .site-header:
Le vecchie classi .site-header, .site-header__logo ecc. erano miste
con classi Tailwind nel template → conflitti + layout rotto su mobile.
Riscrittura pulita con BEM + CSS nativo.
========================================================================== */
/* ---------- HEADER BASE ---------- */
.sh {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: var(--nav-height, 70px);
z-index: var(--z-sticky, 200);
/* Background iniziale: navigation.js imposta rgba(0,0,0,0.5) on load */
background: rgba(0, 0, 0, 0.5);
transition: background 0.4s ease, height 0.3s ease;
/* Previeni overflow orizzontale dalla navbar */
overflow: visible;
}
/* backdrop-filter solo su desktop — su mobile è troppo costoso durante scroll */
@media (min-width: 1024px) {
.sh {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background 0.4s ease, height 0.3s ease, backdrop-filter 0.4s ease;
}
}
/* Quando navbar è in modalità admin bar WP */
.admin-bar .sh {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar .sh {
top: 46px;
}
}
/* ---------- INNER CONTAINER ---------- */
.sh__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
/* ---------- LOGO ---------- */
.sh__logo {
display: flex;
align-items: center;
flex-shrink: 0;
/* Limite esplicito: il logo 400×400 viene ridotto qui */
max-height: 56px;
overflow: hidden;
}
/* Logo WP custom (the_custom_logo genera .custom-logo-link > img.custom-logo) */
.sh__logo .custom-logo-link {
display: flex;
align-items: center;
line-height: 0;
text-decoration: none;
}
.sh__logo .custom-logo-link img,
.sh__logo .custom-logo-link img.custom-logo {
height: 54px !important;
max-height: 54px !important;
width: auto !important;
max-width: 140px !important;
object-fit: contain !important;
display: block !important;
}
/* Testo fallback quando nessun logo caricato */
.sh__logo-text {
font-family: var(--font-primary, 'Anton', sans-serif);
color: var(--color-primary, #D1BA44);
font-size: 1.1rem;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
/* ---------- MENU DESKTOP ---------- */
.sh__nav {
display: none; /* nascosto su mobile */
flex-shrink: 0; /* non si restringe — occcupa solo lo spazio dei link */
}
@media (min-width: 1024px) {
.sh__nav {
display: flex;
align-items: center;
flex-shrink: 0;
}
}
/* UL generato da wp_nav_menu / Vasco_Nav_Walker */
.sh__nav > ul,
.sh__menu {
display: flex !important;
align-items: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
/* Ogni LI del menu */
.sh__nav > ul > li,
.sh__menu > li,
.sh__nav-item {
position: relative;
list-style: none;
}
/* Mostra dropdown al hover su desktop quando li ha .has-dropdown */
@media (min-width: 1024px) {
.sh__nav-item.has-dropdown:hover > .dropdown-menu {
display: block;
}
}
/* Link primo livello — Walker genera .nav-link */
.sh__nav .nav-link {
font-family: 'Anton', Anton, sans-serif !important;
color: #ffffff !important;
font-size: 0.95rem !important;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none !important;
padding: 8px 12px;
display: flex !important;
align-items: center;
gap: 4px;
transition: color 0.25s ease;
white-space: nowrap;
opacity: 1 !important;
visibility: visible !important;
}
.sh__nav .nav-link:hover,
.sh__nav li.is-active > .nav-link {
color: var(--color-primary, #D1BA44);
}
/* ---------- DROPDOWN ---------- */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background: rgba(0, 0, 0, 0.95);
border: 1px solid rgba(209, 186, 68, 0.25);
border-radius: var(--radius-sm, 5px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
z-index: var(--z-dropdown, 100);
/* Nascosto di default — .is-open lo mostra */
display: none;
padding: 6px 0;
}
/* Link attivo nel menu */
.sh__nav .nav-link.is-active {
color: var(--color-primary, #D1BA44) !important;
}
/* Link dropdown secondo livello */
.sh__nav .nav-link--sub {
display: block;
padding: 8px 16px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.875rem;
color: #ffffff;
text-decoration: none;
text-transform: none;
letter-spacing: 0;
transition: color 0.2s ease, background 0.2s ease;
white-space: nowrap;
}
.sh__nav .nav-link--sub:hover {
color: var(--color-primary, #D1BA44);
background: rgba(255,255,255,0.05);
}
/* Aperto via JS con .is-open */
.dropdown-menu.is-open {
display: block;
}
/* Su desktop: hover CSS (no JS necessario per mouse) */
@media (min-width: 1024px) {
.sh__nav li:hover > .dropdown-menu {
display: block;
}
}
/* Link secondo livello (dentro dropdown) */
.dropdown-menu li a {
display: block;
padding: 9px 18px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.875rem;
color: #ffffff;
text-decoration: none;
white-space: nowrap;
transition: color 0.2s ease, background 0.2s ease;
}
.dropdown-menu li a:hover {
color: var(--color-primary, #D1BA44);
background: rgba(255, 255, 255, 0.04);
}
/* Freccia dropdown */
.dropdown-arrow {
width: 14px;
height: 14px;
transition: transform 0.25s ease;
flex-shrink: 0;
}
/* ---------- HAMBURGER BUTTON ---------- */
.sh__hamburger {
display: flex; /* visibile su mobile */
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
background: transparent;
border: none;
cursor: pointer;
padding: 4px;
position: relative;
z-index: calc(var(--z-sticky, 200) + 10);
flex-shrink: 0;
}
@media (min-width: 1024px) {
.sh__hamburger {
display: none; /* nascosto su desktop */
}
}
.hamburger-line {
display: block;
width: 24px;
height: 2px;
background: #ffffff;
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: center;
}
/* ==========================================================================
SH-MOBILE — Menu mobile overlay
========================================================================== */
.sh-mobile {
position: fixed;
inset: 0;
z-index: var(--z-overlay, 300);
background: rgba(0, 0, 0, 0.96);
/* backdrop-filter rimosso: con opacity 0.96 il blur è invisibile,
ma costa ~50ms di compositing su mobile di fascia media */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* Transizione opacity */
opacity: 1;
transition: opacity 0.3s ease;
}
/* Stato nascosto (default) */
.sh-mobile.is-hidden {
opacity: 0;
pointer-events: none;
}
/* Stato aperto */
.sh-mobile.is-open {
opacity: 1;
pointer-events: auto;
}
/* Pulsante chiudi */
.sh-mobile__close {
position: absolute;
top: 20px;
right: 20px;
background: transparent;
border: none;
color: #ffffff;
cursor: pointer;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s ease;
}
.sh-mobile__close:hover {
color: var(--color-primary, #D1BA44);
}
/* Logo nel mobile menu */
.sh-mobile__brand {
margin-bottom: 2.5rem;
text-align: center;
}
.sh-mobile__brand a {
text-decoration: none;
}
.sh-mobile__logo-img {
height: 70px;
width: auto;
object-fit: contain;
}
.sh-mobile__logo-text {
font-family: var(--font-primary, 'Anton', sans-serif);
color: var(--color-primary, #D1BA44);
font-size: 1.4rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Voci menu mobile */
.sh-mobile__nav {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.sh-mobile__link {
font-family: var(--font-primary, 'Anton', sans-serif);
color: #ffffff;
font-size: 1.6rem;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
transition: color 0.25s ease;
line-height: 1;
}
.sh-mobile__link:hover {
color: var(--color-primary, #D1BA44);
}
/* Social nel mobile menu */
.sh-mobile__social {
display: flex;
gap: 1.5rem;
margin-top: 3rem;
}
.sh-mobile__social-link {
color: #ffffff;
text-decoration: none;
transition: color 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.sh-mobile__social-link:hover {
color: var(--color-primary, #D1BA44);
}
/* ==========================================================================
HOMEPAGE — Assicura che il body NON abbia padding-top aggiunto da JS
Il JS v1 aggiungeva document.body.style.paddingTop = '70px'
che causava overflow + scrollbar.
Qui resettiamo esplicitamente (nel caso di cache vecchia del JS).
========================================================================== */
body {
padding-top: 0 !important;
}
/* .sh__nav-list alias — generato da vasco_nav_menu() */
.sh__nav-list {
display: flex !important;
align-items: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
/* ==========================================================================
HOMEPAGE — FOOTER FIXED (come originale Bootstrap fixed-bottom)
Il footer NON deve essere in-flow sulla homepage: causerebbe
altezza pagina = 100vh (hero) + footer-height = scrollbar verticale.
Su pagine interne il footer torna in-flow normale.
========================================================================== */
body.home .site-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 50;
padding: 12px 0;
background: rgba(0, 0, 0, 0.50) !important;
border-top: none;
margin: 0;
}
/* Footer homepage: layout a 3 col compatto come originale */
body.home .site-footer .sf-grid {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
gap: 16px;
}
/* Pagine interne: padding-top per compensare navbar fixed */
body:not(.home) .page-hero,
body:not(.home) .fp-hero,
body:not(.home) main.site-main,
body:not(.home) .page-wrapper {
padding-top: var(--nav-height, 70px);
}
/* Homepage: body senza padding-top — hero overlay la navbar */
body.home {
padding-top: 0 !important;
}
/* Previeni che il footer fixed copra contenuto scrollabile su pagine interne */
body:not(.home) .site-footer {
position: relative;
bottom: auto;
}
/* 404 full-page: footer fixed come homepage — hero 100vh + footer in-flow = scrollbar */
body.error404 .site-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 50;
padding: 12px 0;
background: rgba(0, 0, 0, 0.50) !important;
border-top: none;
margin: 0;
}
/* Contatti: footer fixed SOLO desktop — mobile può scorrere liberamente */
@media (min-width: 1024px) {
body.page-template-template-contatti .site-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 50;
padding: 12px 0;
background: rgba(0, 0, 0, 0.50) !important;
border-top: none;
margin: 0;
}
}
/* ==========================================================================
SF — SITE FOOTER (puro CSS, no Tailwind)
Replica esatta del footer originale tuttacolpadivasco.it
========================================================================== */
.site-footer {
background: rgba(0, 0, 0, 0.50);
color: #ffffff;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 13px;
padding: 10px 0;
border-top: none;
margin-top: auto;
}
/* Override interno: su homepage style.css già ha body.home .site-footer { position:fixed } */
/* Grid a 3 colonne */
.sf-grid {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
gap: 12px;
}
.sf-col {
display: flex;
align-items: center;
gap: 10px;
}
.sf-col--center {
justify-content: center;
flex: 1;
}
.sf-col--right {
justify-content: flex-end;
flex-direction: column;
gap: 4px;
text-align: center;
}
.sf-year {
color: #ffffff;
font-size: 13px;
white-space: nowrap;
}
.sf-link {
color: #ffffff;
text-decoration: none;
font-size: 13px;
transition: color 0.2s ease;
white-space: nowrap;
}
.sf-link:hover {
color: var(--color-primary, #D1BA44);
}
.sf-powered {
color: #ffffff;
font-size: 10px;
display: block;
text-align: center;
}
.sf-col--right img {
display: block;
height: 35px;
width: auto;
object-fit: contain;
}
/* Social nel footer: nascosta sempre.
Su mobile i social sono nella fp-social sidebar (front-page)
o nel menu mobile overlay. Il footer originale NON ha social icons. */
.sf-social-mobile {
display: none !important;
}
.sf-social-link {
color: #ffffff;
text-decoration: none;
transition: color 0.2s ease;
display: flex;
align-items: center;
}
.sf-social-link:hover {
color: var(--color-primary, #D1BA44);
}
/* Mobile: footer compatto su schermi piccoli */
@media (max-width: 576px) {
.sf-grid {
flex-direction: column;
text-align: center;
gap: 8px;
padding: 8px 16px;
}
.sf-col--left,
.sf-col--right {
justify-content: center;
}
body.home .site-footer {
padding: 8px 0;
}
}
/* ==========================================================================
BC — BAND CARDS (template-band.php)
Replica esatta dell'originale: card viola rgba(112,52,140,0.5)
Grid 3 col desktop / 2 col tablet / 1 col mobile
========================================================================== */
.bc-section {
/* Mobile: navbar only (scritta è inline nella navbar, non occupa spazio extra)
Desktop: navbar(70px) + scritta(~90px stima 100vw aspect-ratio) + 15px gap */
padding: calc(var(--nav-height, 70px) + 20px) 20px 60px;
}
@media (min-width: 1024px) {
.bc-section {
padding-top: calc(var(--nav-height, 70px) + 20px);
}
}
.bc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 991px) {
.bc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
.bc-section { padding: 10px 12px 40px; } /* quasi zero gap hero→card */
.bc-grid {
grid-template-columns: 1fr;
max-width: 100%;
gap: 16px;
}
.bc-card__img {
max-width: 100%; /* immagine piena larghezza card */
}
}
.bc-card {
background-color: rgba(112, 52, 140, 0.5);
color: #ffffff;
border-radius: 15px;
border: 1px solid rgba(0, 0, 0, 0.22);
box-shadow: 0 4px 8px rgba(137, 14, 209, 0.34);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bc-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(137, 14, 209, 0.45);
}
.bc-card__body {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center; /* centra immagine e contenuto orizzontalmente */
text-align: left; /* testo nome/ruolo allineato a sinistra */
}
.bc-card__name {
font-family: 'Anton', sans-serif;
font-size: 1.2rem;
color: #ffffff;
margin-bottom: 6px;
text-transform: uppercase;
}
.bc-card__role {
font-family: 'Nunito', sans-serif;
font-size: 1rem;
color: #ffffff;
margin-bottom: 14px;
}
.bc-card__img {
width: 100%; /* piena larghezza del body */
max-width: 100%;
height: auto;
display: block;
margin-bottom: 16px;
border-radius: 6px;
}
.bc-card__btn {
margin-top: 4px;
font-family: 'Anton', sans-serif;
font-size: 0.9rem;
}
/* Inner pages: scritta png decorativa sopra hero */
.inner-scritta-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
padding-top: var(--nav-height, 70px);
z-index: 2;
pointer-events: none;
}
.inner-scritta {
display: block;
width: 60%;
max-width: 700px;
height: auto;
}
@media (max-width: 768px) {
.inner-scritta-wrap { display: none; } /* mai nell'hero su mobile */
.inner-scritta { width: 90%; }
}
/* sh__scritta rimossa — scritta ora in .site-scritta sotto navbar */
/* ==========================================================================
FP-RIGHT-NAV — link STORIA / GALLERIA a destra nell'hero (come originale)
Posizione: absolute right, verticale, solo desktop
========================================================================== */
.fp-right-nav {
display: none; /* nascosta su mobile */
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
flex-direction: column;
align-items: flex-end;
gap: 16px;
}
@media (min-width: 1024px) {
.fp-right-nav {
display: flex;
}
}
.fp-right-nav__link {
font-family: 'Anton', sans-serif !important;
font-size: 1.1rem !important;
color: #D1BA44 !important;
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: color 0.25s ease, letter-spacing 0.25s ease;
cursor: pointer;
display: block;
}
.fp-right-nav__link:hover {
color: #ffffff !important;
letter-spacing: 0.15em;
}
/* Mobile: nessuna scritta nell'hero delle pagine interne */
@media (max-width: 1023px) {
.inner-scritta-wrap { display: none !important; }
}
/* ==========================================================================
SCRITTA PNG — MOBILE: dentro la navbar tra logo e hamburger
DESKTOP: sotto la navbar, larghezza piena, 15px di gap prima delle card
REGOLA PERMANENTE: visibile su ogni pagina.
========================================================================== */
/* --- MOBILE: dentro la navbar --- */
.sh__scritta-mobile {
display: flex; /* visibile su mobile */
flex: 1;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 0 8px;
}
.sh__scritta-mobile__img {
height: 42px; /* si adatta all'altezza navbar mobile */
width: auto;
max-width: 100%;
object-fit: contain;
display: block;
}
@media (min-width: 1024px) {
.sh__scritta-mobile {
display: none; /* nascosta su desktop */
}
}
/* --- DESKTOP: sovrapposta al contenuto, non aggiunge altezza alla pagina ---
position:absolute → fuori dal flusso, non spinge il contenuto sotto.
Scorre con la pagina: allo scroll sale e scompare sotto la navbar fixed.
------------------------------------------------------------------- */
.site-scritta-desktop {
display: none;
}
@media (min-width: 1024px) {
.site-scritta-desktop {
display: flex;
position: absolute; /* fuori dal flusso — non aggiunge altezza */
top: var(--nav-height, 70px);/* parte dove finisce la navbar */
left: 0;
right: 0;
justify-content: center;
align-items: flex-start;
pointer-events: none;
z-index: 5; /* sopra l'overlay hero, sotto la navbar */
padding: 0;
line-height: 0;
}
}
.site-scritta-desktop__img {
width: 75%;
max-width: 100%;
height: auto;
display: block;
}
/* Pagina Band: scritta desktop nel flusso normale (non absolute) così non sovrappone le card */
.page-template-template-band .site-scritta-desktop {
position: static !important;
margin-top: var(--nav-height, 70px); /* compensa navbar fixed */
}
/* Sulla band page le card non hanno bisogno di padding extra (la scritta è già nel flusso) */
.page-template-template-band .bc-section {
padding-top: 15px;
}
/* ==========================================================================
STORIA — Layout pagina storia (.st-*)
Fedele al layout originale tuttacolpadivasco.it/storia (Bootstrap 5.3 reference).
Tutti i testi dinamici da WP Admin. Font e allineamento controllati via meta fields.
========================================================================== */
.st-content-wrap {
position: relative;
z-index: 10;
display: flex;
align-items: flex-start; /* top-aligned: il testo è lungo, non centrare verticalmente */
justify-content: center;
padding: 100px 20px 80px; /* top: 70px navbar + 30px respiro visivo */
width: 100%;
min-height: 100vh;
box-sizing: border-box;
}
/* Box: larghezza fedele all'originale.
Bootstrap col-lg-8 in container-lg (1140px) = ~760px.
Aggiungiamo padding interno come il vasco-box standard (padding: 20px). */
.st-box {
max-width: 900px;
width: 100%;
text-align: center; /* H1 e sottotitolo centrati; corpo testo override a left */
}
/* H1: identico all'originale. font-family e text-align → inline via PHP meta field.
L'originale usa Anton, uppercase, oro, grande. */
.st-title {
color: var(--color-primary); /* #D1BA44 oro */
font-size: clamp(2rem, 5vw, 2.8rem); /* bootstrap h1 ≈ 2.5rem */
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.1;
margin: 0 0 6px;
}
/* Sottotitolo h5: fedele all'originale Tutta colpa di Vasco
.
Bootstrap h5 = 1.25rem, NON uppercase, gold. font-family → inline PHP meta. */
.st-subtitle {
color: var(--color-primary); /* #D1BA44 oro */
font-size: 1.25rem; /* bootstrap h5 esatto */
font-weight: normal;
text-transform: none; /* originale: "Tutta colpa di Vasco" mixed case */
letter-spacing: 0.03em;
margin: 0 0 12px;
opacity: 1;
}
/* HR: identica a Bootstrap 5.3
su sfondo scuro con testo bianco.
Bootstrap: border:0; border-top: 1px solid; color:inherit; opacity:.25
Su dark bg color:inherit = white → 1px solid white opacity 0.25 */
.st-hr {
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.25);
margin: 16px 0 20px;
width: 100%;
opacity: 1; /* opacity già nella rgba, non duplicare */
}
/* Corpo testo: sempre a sinistra come nell'originale. font-family → inline PHP. */
.st-content-body {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
line-height: 1.8;
text-align: left;
}
.st-content-body p {
margin: 0 0 1rem;
}
.st-content-body p:last-child {
margin-bottom: 0;
}
@media (min-width: 768px) {
.st-content-body {
font-size: 1.05rem;
}
}
/* STORIA PAGE — override hero per contenuto lungo.
hero-section ha height:100vh fisso + overflow:hidden: con molto testo
il flexbox centra verticalmente spingendo il titolo sopra il fold.
Fix: hero si espande col contenuto, overflow visibile. */
.page-template-template-storia .hero-section {
height: auto;
min-height: 100vh;
overflow: visible;
align-items: flex-start;
}
/* Mobile: padding ridotto */
@media (max-width: 767px) {
.st-content-wrap {
padding: 90px 12px 60px;
}
.st-title {
font-size: 2rem;
}
.st-subtitle {
font-size: 1.1rem;
}
}
/* ==========================================================================
SINGLE MEMBER — Spaziatura mobile per sezione Gallery e Torna alla Band
Su mobile pb-16/py-12 Tailwind non garantisce spazio sufficiente tra sezioni.
Aggiunto margin-top: 4px esplicitamente per separare visivamente le sezioni.
========================================================================== */
@media (max-width: 1023px) {
.member-gallery-section {
margin-top: 10px;
}
/* Spazio sopra e sotto il titolo GALLERY */
.member-gallery-title {
margin-top: 24px;
margin-bottom: 20px;
}
.member-back-nav {
margin-top: 10px;
padding-top: 28px; /* spazio tra ultima foto e bottone */
}
}
/* ==========================================================================
SCROLL INDICATOR — icona mouse animata, fixed bottom center
Visibile su ogni pagina con scroll. Si nasconde dopo lo scroll via JS.
Ispirata al pattern di edicolacustica.it.
========================================================================== */
.scroll-indicator {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
z-index: 40; /* sotto navbar (z-index 100) ma sopra tutto */
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
opacity: 1;
transition: opacity 0.6s ease, visibility 0.6s ease;
pointer-events: none; /* non intercetta click */
visibility: visible;
}
/* Stato nascosto — attivato da JS quando l'utente scrolla */
.scroll-indicator.is-hidden {
opacity: 0;
visibility: hidden;
}
/* Stato non-scrollable — nascosto se la pagina non ha scroll */
.scroll-indicator.no-scroll {
display: none;
}
/* --- MOUSE ICON --- */
.scroll-indicator__mouse {
width: 24px;
height: 38px;
border: 2px solid rgba(255, 255, 255, 0.65);
border-radius: 12px;
position: relative;
box-shadow: 0 0 8px rgba(209, 186, 68, 0.25); /* lieve glow oro */
}
/* Rotella che scorre verso il basso */
.scroll-indicator__wheel {
width: 3px;
height: 7px;
background: rgba(255, 255, 255, 0.85);
border-radius: 2px;
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
animation: vasco-scroll-wheel 2s ease-in-out infinite;
}
@keyframes vasco-scroll-wheel {
0% { opacity: 1; transform: translateX(-50%) translateY(0); }
60% { opacity: 0.2; transform: translateX(-50%) translateY(13px); }
100% { opacity: 0; transform: translateX(-50%) translateY(13px); }
}
/* --- CHEVRONS (due frecce verso il basso) --- */
.scroll-indicator__chevrons {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.scroll-indicator__chevrons span {
display: block;
width: 10px;
height: 10px;
border-right: 2px solid rgba(255, 255, 255, 0.5);
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
transform: rotate(45deg);
animation: vasco-scroll-chevron 2s ease-in-out infinite;
}
.scroll-indicator__chevrons span:nth-child(1) {
animation-delay: 0s;
}
.scroll-indicator__chevrons span:nth-child(2) {
animation-delay: 0.25s;
border-color: rgba(209, 186, 68, 0.5); /* secondo chevron oro */
}
@keyframes vasco-scroll-chevron {
0% { opacity: 0; transform: rotate(45deg) translate(-2px, -2px); }
50% { opacity: 1; transform: rotate(45deg) translate(0, 0); }
100% { opacity: 0; transform: rotate(45deg) translate(2px, 2px); }
}
/* Mobile: leggermente più piccolo e più in alto del footer */
@media (max-width: 767px) {
.scroll-indicator {
bottom: 50px;
}
.scroll-indicator__mouse {
width: 20px;
height: 32px;
border-radius: 10px;
}
}
/* ================================================================
S-11 FOTO — gallery-breadcrumb, gallery-section
================================================================ */
.gallery-breadcrumb {
margin-bottom: 1rem;
}
.gallery-breadcrumb__link {
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color 0.3s ease;
}
.gallery-breadcrumb__link:hover {
color: #D1BA44;
}
.gallery-section {
padding: 3rem 1rem;
}
/* ================================================================
S-12 LOCANDINE — locandine-section, locandine-grid (4col BEM)
================================================================ */
.locandine-section {
padding: 3rem 1rem;
}
/* Grid 4 col desktop / 2 tablet / 1 mobile — CSS nativo, no Tailwind */
.locandine-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
@media (max-width: 1023px) {
.locandine-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}
@media (max-width: 639px) {
.locandine-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
.locandine-grid__item {
cursor: pointer;
transition: transform 0.3s ease;
}
.locandine-grid__item:hover {
transform: translateY(-4px);
}
.locandine-grid__img-wrap {
overflow: hidden;
border-radius: 6px;
border: 1px solid rgba(209, 186, 68, 0.2);
transition: border-color 0.3s ease;
}
.locandine-grid__item:hover .locandine-grid__img-wrap {
border-color: #D1BA44;
}
.locandine-grid__img {
width: 100%;
height: 360px;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.locandine-grid__item:hover .locandine-grid__img {
transform: scale(1.04);
}
@media (max-width: 639px) {
.locandine-grid__img {
height: 280px;
}
}
.locandine-grid__placeholder {
width: 100%;
height: 360px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
color: rgba(255, 255, 255, 0.3);
font-family: 'Anton', sans-serif;
font-size: 1.125rem;
}
.locandine-grid__meta {
margin-top: 0.75rem;
text-align: center;
}
.locandine-grid__data {
font-family: 'Anton', sans-serif;
color: #D1BA44;
font-size: 0.875rem;
margin: 0;
}
.locandine-grid__luogo {
font-family: 'Nunito', sans-serif;
color: rgba(255, 255, 255, 0.7);
font-size: 0.75rem;
margin: 0.25rem 0 0;
}
/* ================================================================
S-13 CONCERTI — concerti-section, evento-card, concerti-passati
================================================================ */
.concerti-section {
padding: 4rem 1rem;
}
.concerti-container {
max-width: 56rem; /* 896px — equivalente a max-w-4xl */
}
.concerti-section__titolo {
font-family: 'Anton', sans-serif;
color: #D1BA44;
font-size: clamp(1.5rem, 3vw, 2rem);
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: center;
margin-bottom: 2.5rem;
}
/* Lista eventi — colonna verticale */
.concerti-lista {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Card singolo evento */
.evento-card {
background: rgba(0, 0, 0, 0.59);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 768px) {
.evento-card {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
}
.evento-card--annullato {
opacity: 0.55;
}
.evento-card__info {
flex: 1;
}
.evento-card__data {
font-family: 'Anton', sans-serif;
color: #D1BA44;
font-size: 1rem;
margin: 0 0 0.25rem;
text-transform: capitalize;
}
.evento-card__ora {
font-family: 'Inter', sans-serif;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
margin-left: 0.5rem;
}
.evento-card__luogo {
font-family: 'Anton', sans-serif;
color: #ffffff;
font-size: 1.25rem;
margin: 0.25rem 0;
}
.evento-card__citta {
font-family: 'Nunito', sans-serif;
color: rgba(255, 255, 255, 0.7);
font-size: 0.875rem;
margin: 0.25rem 0 0;
}
.evento-card__sep {
color: rgba(255, 255, 255, 0.4);
margin: 0 0.25rem;
}
.evento-card__note {
font-family: 'Nunito', sans-serif;
color: rgba(255, 255, 255, 0.5);
font-size: 0.875rem;
margin: 0.5rem 0 0;
}
.evento-card__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
flex-shrink: 0;
}
@media (min-width: 768px) {
.evento-card__actions {
align-items: flex-end;
}
}
/* Badge stato evento */
.evento-card__badge {
font-family: 'Anton', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.2rem 0.75rem;
border-radius: 999px;
}
.evento-card__badge--confermato {
background: rgba(34, 197, 94, 0.15);
color: #86efac;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.evento-card__badge--annullato {
background: rgba(239, 68, 68, 0.2);
color: #fca5a5;
border: 1px solid rgba(239, 68, 68, 0.4);
}
.evento-card__badge--rinviato {
background: rgba(234, 179, 8, 0.2);
color: #fde047;
border: 1px solid rgba(234, 179, 8, 0.4);
}
.evento-card__ticket {
font-size: 0.875rem;
}
/* Stay Tuned box */
.concerti-stay-tuned__titolo {
font-family: 'Anton', sans-serif;
color: #D1BA44;
font-size: 2rem;
margin: 0 0 0.75rem;
}
.concerti-stay-tuned__testo {
font-family: 'Nunito', sans-serif;
color: rgba(255, 255, 255, 0.7);
line-height: 1.7;
margin: 0 0 1.5rem;
}
.concerti-stay-tuned__social {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
/* Sezione concerti passati */
.concerti-passati {
padding: 2rem 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.concerti-passati__toggle {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 auto;
background: transparent;
border: none;
cursor: pointer;
font-family: 'Anton', sans-serif;
color: rgba(255, 255, 255, 0.5);
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: color 0.3s ease;
}
.concerti-passati__toggle:hover {
color: rgba(255, 255, 255, 0.8);
}
.concerti-passati__icon {
transition: transform 0.3s ease;
flex-shrink: 0;
}
.concerti-passati__lista {
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 0;
}
/* hidden attribute override — accessibilità */
.concerti-passati__lista[hidden] {
display: none;
}
.concerti-passati__row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-wrap: wrap;
}
.concerti-passati__data {
font-family: 'Anton', sans-serif;
color: rgba(255, 255, 255, 0.4);
font-size: 0.875rem;
min-width: 80px;
}
.concerti-passati__luogo {
font-family: 'Anton', sans-serif;
color: rgba(255, 255, 255, 0.7);
font-size: 1rem;
}
.concerti-passati__citta {
font-family: 'Nunito', sans-serif;
color: rgba(255, 255, 255, 0.4);
font-size: 0.875rem;
}
/* hero-content__subtitle — usato in Concerti */
.hero-content__subtitle {
font-family: 'Nunito', sans-serif;
color: rgba(255, 255, 255, 0.7);
font-size: 1.125rem;
margin: 1rem 0 0;
}
/* ================================================================
S-10 GALLERIA HUB — BEM completo, z-index espliciti
v1.2.0: rimosso Tailwind strutturale — fix link non cliccabili
================================================================ */
/* Wrapper contenuto: z-index 3 garantisce che stia SOPRA
hero-overlay (z:1) e social-sidebar (z:2).
NO min-height:100vh — il flex parent .hero-section (height:100vh) già
gestisce l'altezza; min-height causerebbe scrollbar orizzontale. */
.galleria-hub {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 5rem 1rem;
text-align: center;
}
.galleria-hub__titolo {
font-family: 'Anton', sans-serif;
color: #D1BA44;
font-size: clamp(2.5rem, 6vw, 4rem);
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 0.5rem;
}
/* Grid 2 colonne desktop / 1 colonna mobile */
.galleria-hub__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
width: 100%;
max-width: 48rem;
margin-top: 2.5rem;
}
@media (max-width: 639px) {
.galleria-hub__grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
/* Box cliccabile — con position relative per contenere overlay */
.galleria-hub__box {
position: relative;
display: block; /* deve essere block per avere height */
height: 280px;
border-radius: 6px;
border: 1px solid rgba(209, 186, 68, 0.3);
overflow: hidden;
text-decoration: none;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.galleria-hub__box:hover {
border-color: #D1BA44;
transform: translateY(-3px);
}
/* Overlay scuro del box — z-index 1 dentro il box.
pointer-events:none è CRITICO: senza di esso l'overlay intercetta i
click e il link non risponde. */
.galleria-hub__box-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.60);
transition: background 0.3s ease;
z-index: 1;
pointer-events: none;
}
.galleria-hub__box:hover .galleria-hub__box-overlay {
background: rgba(0, 0, 0, 0.40);
}
/* Contenuto testo/icona — z-index 2, SOPRA l'overlay del box.
pointer-events:none: il testo è decorativo, i click vanno all' parent. */
.galleria-hub__box-content {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
pointer-events: none;
}
.galleria-hub__icon {
margin-bottom: 1rem;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.galleria-hub__box:hover .galleria-hub__icon {
transform: scale(1.1);
}
.galleria-hub__box-titolo {
font-family: 'Anton', sans-serif;
color: #ffffff;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 0.5rem;
transition: color 0.3s ease;
}
.galleria-hub__box:hover .galleria-hub__box-titolo {
color: #D1BA44;
}
.galleria-hub__box-desc {
font-family: 'Nunito', sans-serif;
color: rgba(255, 255, 255, 0.6);
font-size: 0.875rem;
margin: 0;
}
/* ================================================================
S-14 CONTATTI — layout BEM a due colonne + form + info + social
================================================================ */
.contatti-section {
padding: 4rem 1rem;
}
/* Layout 2 colonne: form (60%) + info (40%) */
.contatti-layout {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 3rem;
max-width: 64rem;
margin: 0 auto;
}
@media (max-width: 1023px) {
.contatti-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.contatti-layout__form,
.contatti-layout__info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Titolo form */
.contatti-form__titolo {
font-family: 'Anton', sans-serif;
color: #D1BA44;
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 1.5rem;
}
/* Submit button — full width */
.contatti-form__submit {
width: 100%;
margin-top: 0.5rem;
}
/* Privacy note */
.contatti-form__privacy {
font-family: 'Nunito', sans-serif;
color: rgba(255, 255, 255, 0.4);
font-size: 0.75rem;
text-align: center;
margin: 0.75rem 0 0;
}
/* Label campo obbligatorio */
.vasco-form__required {
color: #f87171;
margin-left: 4px;
}
/* Label campo opzionale */
.vasco-form__optional {
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.4);
font-weight: 400;
text-transform: none;
margin-left: 8px;
}
/* Titolo card info */
.contatti-info__titolo {
font-family: 'Anton', sans-serif;
color: #D1BA44;
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 1rem;
}
/* Lista voci info */
.contatti-info__list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contatti-info__item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.contatti-info__icon {
flex-shrink: 0;
margin-top: 2px;
}
.contatti-info__testo {
font-family: 'Inter', sans-serif;
color: #ffffff;
font-size: 0.875rem;
margin: 0;
}
.contatti-info__sub {
font-family: 'Nunito', sans-serif;
color: rgba(255, 255, 255, 0.5);
font-size: 0.75rem;
margin: 2px 0 0;
}
.contatti-info__link {
font-family: 'Inter', sans-serif;
color: rgba(255, 255, 255, 0.8);
font-size: 0.875rem;
text-decoration: none;
transition: color 0.3s ease;
word-break: break-all;
}
.contatti-info__link:hover {
color: #D1BA44;
}
/* Lista link social nella card info */
.contatti-social__list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.contatti-social__link {
display: flex;
align-items: center;
gap: 0.75rem;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
font-family: 'Inter', sans-serif;
font-size: 0.875rem;
}
.contatti-social__link:hover {
color: #D1BA44;
}
.contatti-social__icon {
flex-shrink: 0;
transition: transform 0.3s ease;
}
.contatti-social__link:hover .contatti-social__icon {
transform: scale(1.1);
}
/* ================================================================
S-14 v1.2 CONTATTI — Full-page layout glassmorphism (come originale)
================================================================ */
/* Sezione full-viewport con bg image */
.contatti-page {
position: relative;
min-height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--nav-height, 70px) + 2rem) 1.5rem 3rem;
}
@media (max-width: 1023px) {
.contatti-page { background-attachment: scroll; }
}
/* Layout interno 2 colonne */
.contatti-inner {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
width: 100%;
max-width: 62rem;
}
@media (max-width: 900px) {
.contatti-inner {
grid-template-columns: 1fr;
gap: 2rem;
max-width: 480px;
}
}
/* Box glassmorphism — come originale rgba(0,0,0,0.59) */
.contatti-glass {
background: rgba(0, 0, 0, 0.59);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 2rem 1.75rem;
}
/* Glassmorphism blur solo su desktop — su mobile con 0.59 opacity
l'effetto è comunque forte e il blur aggiunge costo GPU */
@media (min-width: 1024px) {
.contatti-glass {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
}
.contatti-glass--info {
height: fit-content;
}
.contatti-glass__titolo {
font-family: 'Anton', sans-serif;
color: #D1BA44;
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 0.4rem;
}
.contatti-glass__subtitle {
font-family: 'Nunito', sans-serif;
color: rgba(255, 255, 255, 0.65);
font-size: 0.9rem;
margin: 0 0 1.5rem;
}
.contatti-glass__submit {
width: 100%;
margin-top: 0.5rem;
}
/* Righe info contatti */
.contatti-info-row {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.9rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contatti-info-row:last-child { border-bottom: none; }
.contatti-info-row__icon {
width: 36px;
height: 36px;
object-fit: contain;
flex-shrink: 0;
/* Nessun filter: le PNG social sono già colorate correttamente */
opacity: 0.9;
}
.contatti-info-row__icon--text {
width: 36px;
height: 36px;
background: rgba(209,186,68,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Anton', sans-serif;
font-size: 0.7rem;
color: #D1BA44;
flex-shrink: 0;
}
.contatti-info-row__label {
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
color: rgba(255,255,255,0.5);
display: block;
margin-bottom: 2px;
}
.contatti-info-row__value {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease;
}
.contatti-info-row__value:hover { color: #D1BA44; }
/* ================================================================
BOTTONI — categorie conformi all'originale
Nav button (STORIA/GALLERIA): dark bg + border + Anton
================================================================ */
/* Bottone NAV — come screenshot originale (dark + border + rounded) */
.btn-nav-vasco,
.fp-hero__link {
display: inline-block;
font-family: 'Anton', sans-serif;
font-size: 1rem;
letter-spacing: 0.08em;
padding: 10px 24px;
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.35);
color: #ffffff;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
text-decoration: none;
white-space: nowrap;
}
.btn-nav-vasco:hover, .fp-hero__link:hover {
background: rgba(209, 186, 68, 0.15);
border-color: #D1BA44;
color: #D1BA44;
}
/* Bottone EVENTO/TICKET — filled gold */
.btn-event-vasco,
.evento-card__ticket {
display: inline-block;
font-family: 'Anton', sans-serif;
font-size: 0.95rem;
letter-spacing: 0.05em;
padding: 8px 20px;
background: #D1BA44;
border: 1px solid #D1BA44;
color: #000;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s ease;
text-decoration: none;
}
.btn-event-vasco:hover, .evento-card__ticket:hover {
background: #b8a230;
border-color: #b8a230;
}
/* Bottone primario (già .btn-vasco) — mantieni alias */
.btn-primary-vasco {
display: inline-block;
font-family: 'Anton', sans-serif;
font-size: 1rem;
letter-spacing: 0.05em;
padding: var(--spacing-sm, 8px) var(--spacing-lg, 20px);
border: 1px solid #D1BA44;
color: #D1BA44;
background: transparent;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease;
text-decoration: none;
white-space: nowrap;
}
.btn-primary-vasco:hover, .btn-primary-vasco:focus {
background: #D1BA44;
color: #000;
}
.btn-primary-vasco--sm { padding: 5px 14px; font-size: 0.85rem; }
/* ================================================================
PAGINA MODULARE — moduli render
================================================================ */
.vasco-module {
padding: 3rem 1rem;
}
.vasco-module--dark {
background: rgba(0,0,0,0.4);
}
.vasco-module--card .container-vasco {
background: rgba(0,0,0,0.59);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
padding: 2rem;
}
.vasco-module__title {
font-family: 'Anton', sans-serif;
color: #D1BA44;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 1.5rem;
}
.vasco-module__content {
font-family: 'Nunito', sans-serif;
color: rgba(255,255,255,0.85);
line-height: 1.8;
font-size: 1rem;
}
.vasco-module--cta {
text-align: center;
border-radius: 8px;
margin: 0 1rem;
}
.vasco-module__btn { margin-top: 1.5rem; }
/* Card grid */
.vasco-module__cards-grid {
display: grid;
gap: 1.5rem;
margin-top: 1.5rem;
}
.vasco-module__cards-grid--2 { grid-template-columns: repeat(2,1fr); }
.vasco-module__cards-grid--3 { grid-template-columns: repeat(3,1fr); }
.vasco-module__cards-grid--4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 768px) {
.vasco-module__cards-grid--2,
.vasco-module__cards-grid--3,
.vasco-module__cards-grid--4 { grid-template-columns: 1fr; }
}
.vasco-module__card {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.vasco-module__card-title {
font-family: 'Anton', sans-serif;
color: #D1BA44;
font-size: 1.1rem;
margin: 0;
}
.vasco-module__card-text {
font-family: 'Nunito', sans-serif;
color: rgba(255,255,255,0.75);
font-size: 0.9rem;
margin: 0;
}
/* Download list */
.vasco-download__list {
list-style: none;
padding: 0;
margin: 1rem 0 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.vasco-download__item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
color: rgba(255,255,255,0.85);
transition: background 0.3s;
}
.vasco-download__item:hover { background: rgba(255,255,255,0.09); }
.vasco-download__name { flex: 1; font-family: 'Inter', sans-serif; font-size: 0.9rem; }
.vasco-download__size { font-family: 'Nunito', sans-serif; font-size: 0.78rem; color: rgba(255,255,255,0.4); }
/* Gallery grid */
.vasco-module__gallery-grid {
margin-top: 1.5rem;
}
.vasco-module__gallery-item {
display: block;
overflow: hidden;
border-radius: 4px;
aspect-ratio: 4/3;
}
.vasco-module__gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.vasco-module__gallery-item:hover .vasco-module__gallery-img {
transform: scale(1.05);
}
/* ==========================================================================
404 — NOT FOUND PAGE (.nf__)
Template: 404.php
Layout: hero full-screen + box glassmorphism centrato.
Il numero 404 è il fulcro visivo: grande, oro, con glow effect.
========================================================================== */
/* Hero: stessa altezza delle pagine interne (60vh) */
.nf__hero {
min-height: 100vh; /* Full-screen: l'unico contenuto della pagina */
display: flex;
align-items: center;
justify-content: center;
}
/* Wrap centrato sul contenuto */
.nf__content-wrap {
position: relative;
z-index: 3; /* sopra .hero-overlay (z:2) — altrimenti l'overlay blocca i click sui bottoni */
width: 100%;
max-width: 600px;
padding: var(--spacing-lg);
margin: 0 auto;
text-align: center;
}
/* Box glassmorphism — eredita .vasco-box, aggiunge specifici 404 */
.nf__box {
padding: var(--spacing-2xl) var(--spacing-xl);
}
/* Numero 404 — elemento visivo principale, effetto glow oro */
.nf__number {
font-family: var(--font-primary);
font-size: clamp(6rem, 20vw, 10rem);
line-height: 1;
color: var(--color-primary);
/* Glow oro leggero: evocativo del rock dark */
text-shadow:
0 0 30px rgba(209, 186, 68, 0.5),
0 0 60px rgba(209, 186, 68, 0.2);
letter-spacing: -2px;
margin-bottom: var(--spacing-md);
/* Animate in: leggero pulse per richiamare attenzione */
animation: nf-pulse 3s ease-in-out infinite;
}
@keyframes nf-pulse {
0%, 100% { text-shadow: 0 0 30px rgba(209,186,68,0.5), 0 0 60px rgba(209,186,68,0.2); }
50% { text-shadow: 0 0 50px rgba(209,186,68,0.8), 0 0 100px rgba(209,186,68,0.4); }
}
/* Separatore gold — coerente con il design system */
.nf__separator {
width: 60px;
height: 2px;
background: var(--color-primary);
margin: 0 auto var(--spacing-lg);
border-radius: var(--radius-full);
}
/* Titolo H1 — Anton, oro, uppercase */
.nf__title {
font-family: var(--font-primary);
font-size: clamp(1.25rem, 4vw, 1.75rem);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: var(--spacing-md);
}
/* Messaggio — Nunito, bianco attenuato */
.nf__message {
font-family: var(--font-secondary);
font-size: 1rem;
line-height: 1.7;
color: var(--color-text-muted);
margin-bottom: var(--spacing-xl);
}
/* CTA wrapper — flex row centrato con gap */
.nf__actions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
justify-content: center;
align-items: center;
}
/* Pulsanti: le varianti btn-vasco esistono già, aggiustiamo solo il sizing */
.nf__btn {
min-width: 130px;
}
/* Mobile: box più compatto */
@media (max-width: 640px) {
.nf__box {
padding: var(--spacing-xl) var(--spacing-lg);
}
.nf__actions {
flex-direction: column;
align-items: stretch;
}
.nf__btn {
text-align: center;
}
}