/* * sidebar.css — DJ Nash * Stili per il layout content+sidebar delle pagine single * e per tutti i widget interni alla sidebar. * * Paradigma mobile-first: * – Base (mobile): colonna singola, sidebar in coda * – ≥ 1024px (desktop): griglia 2 colonne, sidebar a destra sticky * * Variabili Customizer applicate tramite inline style nel * da customizer.php (djnash_sidebar_output_css). */ /* ============================================================ LAYOUT WRAPPER .single-layout si trova dentro .container ============================================================ */ .single-layout { display: flex; flex-direction: column; /* mobile: contenuto → sidebar in coda */ gap: 0; padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(48px, 8vw, 80px); } /* Layout full-width (sidebar disabilitata dal Customizer) */ .single-layout--full { max-width: var(--content-w); margin: 0 auto; } /* ── COLONNA PRINCIPALE ── */ .single-main { width: 100%; min-width: 0; /* evita overflow in grid/flex */ } .single-body { /* padding: clamp(20px, 4vw, 36px) 0; */ padding: clamp(0px, 1vw, 6px) 0; border-bottom: 1px solid var(--color-grey-2); } .single-body:last-child { border-bottom: none; } /* ============================================================ SIDEBAR — base mobile In mobile appare dopo .single-main (ordine DOM naturale) ============================================================ */ .single-sidebar { width: 100%; margin-top: clamp(32px, 6vw, 56px); padding-top: clamp(24px, 4vw, 36px); border-top: 2px solid var(--color-grey-2); padding: 20px; } /* ============================================================ DESKTOP ≥ 1024px — griglia a 2 colonne ============================================================ */ @media (min-width: 1024px) { .single-layout--with-sidebar { display: grid; grid-template-columns: 1fr var(--sb-width, 300px); gap: clamp(32px, 4vw, 56px); align-items: start; padding-top: 0; } .single-sidebar { margin-top: 0; padding-top: 0; border-top: none; border-left: 1px solid var(--color-grey-2); padding: 10px 10px 10px 10px; width: auto; /* la width è gestita dalla griglia */ } /* Sticky: la sidebar scorre con la pagina ma rimane visibile */ .single-sidebar--sticky { position: sticky; top: calc(var(--nav-h) + 20px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--color-grey-3) transparent; } .single-sidebar--sticky::-webkit-scrollbar { width: 3px; } .single-sidebar--sticky::-webkit-scrollbar-thumb { background: var(--color-grey-3); border-radius: 2px; } /* Immagini più grandi su desktop */ .sb-related-thumb, .sb-set-thumb { width: 64px; height: 64px; } } /* ============================================================ SIDEBAR WIDGET — struttura comune ============================================================ */ .sb-widget { padding-bottom: clamp(18px, 3vw, 26px); margin-bottom: clamp(18px, 3vw, 26px); border-bottom: 1px solid var(--color-grey-2); } .sb-widget:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } /* Widget header */ .sb-widget-hd { font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--color-acid); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; } .sb-widget-icon { font-size: 12px; opacity: .8; } /* ============================================================ WIDGET: TOC (Indice articolo) ============================================================ */ .sb-toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: toc; } .sb-toc-item { counter-increment: toc; } .sb-toc-link { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--color-muted); padding: 5px 0; border-bottom: 1px dashed var(--color-grey); transition: color var(--tr); line-height: 1.4; } .sb-toc-link::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 9px; color: var(--color-acid); flex-shrink: 0; } .sb-toc-link:hover { color: var(--color-white); } .sb-toc-item--sub .sb-toc-link { padding-left: 16px; font-size: 11px; } .sb-toc-item--sub .sb-toc-link::before { content: '–'; color: var(--color-grey-3); } .sb-toc-item:last-child .sb-toc-link { border-bottom: none; } /* ============================================================ WIDGET: About DJ Nash ============================================================ */ .sb-about-inner { display: flex; flex-direction: column; gap: 12px; } .sb-about-photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--color-grey-3); } .sb-about-photo img { width: 100%; height: 100%; object-fit: cover; } .sb-about-photo--placeholder { background: var(--color-grey-3); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 24px; color: var(--color-acid); } .sb-about-name { font-family: var(--font-display); font-size: 20px; letter-spacing: .05em; color: var(--color-acid); display: block; margin-bottom: 4px; } .sb-about-text p { font-size: 12px; color: #888; line-height: 1.7; margin-bottom: 12px; } /* ============================================================ WIDGET: Meta list (dettagli djset, venue, artista, evento, esperienza) ============================================================ */ .sb-meta-list { display: grid; grid-template-columns: auto 1fr; gap: 0; font-size: 12px; } .sb-meta-list dt { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); padding: 7px 12px 7px 0; border-bottom: 1px solid var(--color-grey); align-self: start; white-space: nowrap; } .sb-meta-list dd { color: var(--color-white); padding: 7px 0; border-bottom: 1px solid var(--color-grey); line-height: 1.5; } .sb-meta-list dd a { color: var(--color-acid); transition: color var(--tr); } .sb-meta-list dd a:hover { color: var(--color-white); } .sb-meta-list dt:last-of-type, .sb-meta-list dd:last-child { border-bottom: none; } /* ============================================================ WIDGET: Social links artista ============================================================ */ .sb-social-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .sb-social-link { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border: 1px solid; transition: all var(--tr); text-decoration: none; } .sb-social-link:hover { opacity: .7; } /* ============================================================ WIDGET: Lineup evento e esperienza ============================================================ */ .sb-lineup { margin-top: 14px; } .sb-lineup-hd { font-family: var(--font-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 8px; } .sb-lineup-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--color-grey); text-decoration: none; transition: background var(--tr); } .sb-lineup-item:last-child { border-bottom: none; } .sb-lineup-item:hover .sb-lineup-name { color: var(--color-acid); } .sb-lineup-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .sb-lineup-avatar--ph { background: var(--color-grey-3); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 10px; color: var(--color-acid); } .sb-lineup-name { font-size: 12px; font-weight: 500; color: var(--color-white); transition: color var(--tr); } /* ============================================================ WIDGET: Ultimi DJ Set (mini lista post) ============================================================ */ .sb-post-list { list-style: none; display: flex; flex-direction: column; gap: 0; } .sb-post-item { border-bottom: 1px solid var(--color-grey); } .sb-post-item:last-child { border-bottom: none; } .sb-post-link { display: flex; gap: 10px; align-items: center; padding: 9px 0; text-decoration: none; transition: background var(--tr); } .sb-post-link:hover .sb-post-title { color: var(--color-acid); } .sb-post-thumb { width: 56px; height: 56px; flex-shrink: 0; background: var(--color-grey-2); overflow: hidden; } .sb-post-thumb img { width: 100%; height: 100%; object-fit: cover; } .sb-post-thumb--ph { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--color-grey-3); } .sb-post-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sb-post-title { font-size: 12px; font-weight: 500; color: var(--color-white); line-height: 1.35; transition: color var(--tr); display: -webkit-box; line-clamp:2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sb-post-meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--color-muted); text-transform: uppercase; } /* ============================================================ WIDGET: Post correlati ============================================================ */ .sb-related-list { list-style: none; display: flex; flex-direction: column; gap: 0; } .sb-related-item { border-bottom: 1px solid var(--color-grey); } .sb-related-item:last-child { border-bottom: none; } .sb-related-link { display: flex; gap: 10px; align-items: center; padding: 9px 0; text-decoration: none; transition: background var(--tr); } .sb-related-link:hover .sb-related-title { color: var(--color-acid); } .sb-related-thumb { width: 56px; height: 56px; flex-shrink: 0; background: var(--color-grey-2); overflow: hidden; border-radius: 4px; } .sb-related-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; background: var(--color-grey-2); } .sb-related-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sb-related-title { font-size: 12px; font-weight: 500; color: var(--color-white); line-height: 1.35; transition: color var(--tr); display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sb-related-meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--color-muted); text-transform: uppercase; } /* ============================================================ WIDGET: Ultimi DJ Set ============================================================ */ .sb-sets-list { list-style: none; display: flex; flex-direction: column; gap: 0; } .sb-set-item { border-bottom: 1px solid var(--color-grey); } .sb-set-item:last-child { border-bottom: none; } .sb-set-link { display: flex; gap: 10px; align-items: center; padding: 9px 0; text-decoration: none; transition: background var(--tr); } .sb-related-link:hover, .sb-set-link:hover { background: rgba(255, 255, 255, 0.02); } .sb-set-thumb { width: 56px; height: 56px; flex-shrink: 0; background: var(--color-grey-2); overflow: hidden; border-radius: 4px; } .sb-set-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; background: var(--color-grey-2); } .sb-set-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sb-set-title { font-size: 12px; font-weight: 500; color: var(--color-white); line-height: 1.35; transition: color var(--tr); display: -webkit-box; line-clamp:2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sb-set-date { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--color-muted); text-transform: uppercase; } /* ============================================================ WIDGET: Tag cloud ============================================================ */ .sb-tags-cloud { display: flex; flex-wrap: wrap; gap: 5px; } .sb-tag { font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border: 1px solid var(--color-grey-3); color: var(--color-muted); text-decoration: none; transition: all var(--tr); } .sb-tag:hover { border-color: var(--color-acid); color: var(--color-acid); } /* ============================================================ WIDGET: Social row (follow DJ Nash) ============================================================ */ .sb-social-row { display: flex; flex-wrap: wrap; gap: 6px; } .sb-social-pill { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; background: var(--color-grey); border: 1px solid var(--color-grey-3); color: var(--color-muted); text-decoration: none; display: flex; align-items: center; gap: 5px; transition: all var(--tr); } .sb-social-pill:hover { border-color: var(--color-acid); color: var(--color-acid); } /* ============================================================ WIDGET: CTA Prenotazione ============================================================ */ .sb-widget--cta { background: var(--color-grey); border: 1px solid var(--color-grey-3) !important; /* override sb-widget border-bottom */ border-radius: var(--radius); padding: 0 !important; margin-bottom: 0 !important; } .sb-cta-inner { padding: clamp(16px, 3vw, 22px); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .sb-cta-icon { font-size: 24px; color: var(--color-acid); line-height: 1; } .sb-cta-title { font-family: var(--font-display); font-size: clamp(20px, 4vw, 26px); letter-spacing: .05em; color: var(--color-white); line-height: 1; } .sb-cta-text { font-size: 12px; color: #888; line-height: 1.6; margin: 0; } .btn--sb { font-size: 9px; padding: 10px 18px; width: auto; } .btn--full { width: 100%; justify-content: center; } .sb-whatsapp-link { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #25D366; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: opacity var(--tr); } .sb-whatsapp-link:hover { opacity: .75; } /* ============================================================ COLORI PERSONALIZZABILI VIA CUSTOMIZER Le proprietà custom vengono iniettate inline nel da customizer.php tramite djnash_sidebar_output_css(). Qui definiamo i valori di fallback. ============================================================ */ :root { --sb-width: 300px; /* larghezza sidebar desktop */ --sb-bg: var(--color-black); --sb-border: var(--color-grey-2); --sb-accent: var(--color-acid); --sb-text: #888; --sb-hd-color: var(--color-acid); } .single-sidebar { background: var(--sb-bg); } .sb-widget-hd { color: var(--sb-hd-color); } .sb-widget { border-bottom-color: var(--sb-border); } /* ============================================================ SINGOLE SEZIONI HERO — padding corretto con navbar ============================================================ */ .artista-hero, .single-hero { padding-top: calc(var(--nav-h) + clamp(28px, 5vw, 52px)); padding-bottom: clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--color-grey-2); } .venue-hero { /* Il padding-top è già gestito via venue-hero-inner */ border-bottom: 1px solid var(--color-grey-2); } /* ============================================================ RESPONSIVE — fine-tuning tablet 768px ============================================================ */ @media (min-width: 768px) { .sb-about-inner { flex-direction: row; align-items: flex-start; } .sb-meta-list dt { font-size: 9px; } } /* ============================================================ LARGE ≥ 1280px — sidebar più larga ============================================================ */ @media (min-width: 1280px) { .single-layout--with-sidebar { grid-template-columns: 1fr 320px; } } @media (min-width: 1440px) { .single-layout--with-sidebar { grid-template-columns: 1fr 340px; } }