/* Theme Name: Spicy Audio — A little heat. A lot of character. Theme Theme URI: https://themelab.app Author: Themelab Author URI: https://themelab.app Description: Tema generato automaticamente con Themelab + Claude AI Version: 1.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: spicy-audio-a-little-heat-a-lot-of-character-theme Tags: custom, ai-generated, full-site-editing */ /* Tutto il CSS "di base" del tema è dentro @layer base: senza layer batterebbe SEMPRE le utility Tailwind (es. .p-8, .mt-3) indipendentemente dalla specificità — un `* { margin: 0; padding: 0; }` non a layer, ad esempio, azzera ogni utility di spaziatura su ogni elemento del tema, a prescindere da quante classi p-*/m-* vengano aggiunte. Vedi anche wrap_in_base_layer. */ @layer base { /* --color-primary/--color-secondary NON si ridichiarano qui: vivono già nel blocco @theme compilato da compile_tailwind_css, che ora legge la STESSA @brand_manifest usata per costruire questo file (stesso valore di `primary`/`secondary` sopra) — una seconda dichiarazione qui sarebbe sempre stata ridondante, e prima di questa consolidazione rischiava di diventare un valore DIVERSO da quello nel blocco @theme (due calcoli indipendenti), con questo qui dentro (@layer base) che vinceva sempre su @layer theme nell'ordine fisso di Tailwind v4 — bug di disallineamento silenzioso, mai una differenza visibile ovvia da notare. */ :root { --font-main: 'Barlow Condensed', sans-serif; } /* Esclude #wpadminbar (la admin bar nativa di WordPress, visibile a qualunque utente loggato con permessi di editing anche sul front-end) — senza questa esclusione il reset globale rompe il suo layout interno (dropdown, icone, spaziature), che si basa su un proprio box model non azzerato. :where() mantiene specificità 0 come * da solo, quindi non altera nient'altro nella cascata. */ :where(*:not(#wpadminbar, #wpadminbar *)) { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-main); /* colori del sorgente (--paper/--ink): nessun override */ line-height: 1.6; } /* Safety net: caps any unclassed/oversized image (e.g. an embedded base64 logo with no sizing utility) so it can never blow out the layout width — mirrors Tailwind's own preflight reset, but applies even if the Tailwind CDN script fails to load. */ img, svg { max-width: 100%; height: auto; } .elz-btn { display: inline-block; padding: .75rem 1.75rem; border-radius: 8px; text-decoration: none; font-weight: 700; background: var(--color-primary); color: #fff; transition: opacity .2s; } .elz-btn:hover { opacity: .85; color: #fff; } .elz-btn--outline { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); } .elz-btn--sm { padding: .45rem 1rem; font-size: .85rem; } .elz-btn--lg { padding: 1rem 2.25rem; font-size: 1.1rem; } /* ── CSS estratto dal layout HTML originale ─────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap'); :root{--paper:#e9e1cc;--ink:#252520;--red:#ac3f2c;--muted:#6f6b5f;--line:#c6bea9}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}header{height:106px;display:flex;align-items:center;justify-content:space-between;max-width:1440px;margin:auto;padding:0 6%;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;flex-shrink:0;isolation:isolate}.brand img{width:172px;height:auto;display:block;filter:brightness(1.18) contrast(1.12);mix-blend-mode:multiply}nav{display:flex;align-items:center;gap:36px;font-size:14px;font-weight:600}.nav-cta{border:1px solid var(--ink);padding:13px 18px}nav a:hover{color:var(--red)}.hero{max-width:1440px;margin:auto;display:grid;grid-template-columns:1.15fr 1fr;min-height:635px;padding:66px 6% 70px;gap:60px}.eyebrow{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:1.8px;line-height:1.6}.eyebrow span{display:inline-block;width:7px;height:7px;background:var(--red);margin-right:8px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-weight:700;letter-spacing:-1px;line-height:.98}h1{font-size:clamp(70px,7.1vw,102px);margin:26px 0}em{font-family:Georgia,serif;font-weight:normal;font-style:italic;color:var(--red);letter-spacing:-4px}.intro{font-size:18px;max-width:420px;line-height:1.65;color:var(--muted);margin:28px 0 30px}.button{background:var(--red);border:1px solid var(--red);color:var(--paper);display:inline-block;padding:17px 27px;font-size:14px;font-weight:700;transition:background .2s}.button:hover{background:#843020}.micro{font-size:11px;letter-spacing:1.4px;color:var(--muted);margin:22px 0 0}.hero-art{background:var(--ink);color:var(--paper);padding:30px 35px;position:relative;border:7px double #6c6757;box-shadow:12px 12px 0 #cec5ad;transform:rotate(-2deg);display:flex;flex-direction:column;justify-content:space-between;background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,#ffffff03 3px,#ffffff03 4px)}.edition{display:flex;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:1.5px}.edition span{color:#9e9888;font-size:10px}.seventy{font-family:'Barlow Condensed',Impact,sans-serif;font-size:238px;font-weight:800;line-height:.92;letter-spacing:-10px;color:#c25035;padding-top:12px}.seventy span{display:block;font:10px 'DM Sans',sans-serif;letter-spacing:4px;color:var(--paper);margin:17px 0 20px}.hero-rule{height:3px;background:var(--paper);width:100%}.hero-art>p{font-family:'Barlow Condensed',Impact,sans-serif;font-size:43px;line-height:.95;margin:20px 0}.serial{font-size:10px;line-height:1.7;letter-spacing:1.4px;color:#b4ad9c}.ticker{display:flex;justify-content:space-around;gap:15px;background:var(--red);color:var(--paper);padding:19px 5%;font-size:12px;letter-spacing:2px;font-weight:700}.ticker b{font-size:16px}.collection,.philosophy{max-width:1440px;margin:auto;padding:83px 6% 90px}.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px;gap:30px}h2{font-size:60px;margin:15px 0 0}.section-top>p{max-width:400px;color:var(--muted);line-height:1.7;margin-bottom:5px;font-size:15px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid #b5ad98}.card-visual{height:260px;padding:23px;position:relative;overflow:hidden}.card-index{display:block;font-size:10px;letter-spacing:1.5px;font-weight:700;margin-bottom:16px}.card-visual strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:52px;line-height:1;letter-spacing:-1px;display:block;position:relative;z-index:1}.card-visual i{font-style:normal;color:var(--red)}.filter{background:#2c2d27;color:var(--paper)}.filter i{color:#d1764d}.type-lines{font-family:'Barlow Condensed',Impact,sans-serif;display:flex;flex-direction:column;font-size:25px;font-weight:600;line-height:1.05;color:#bcb49c;margin-top:15px}.type-lines span{border-bottom:1px solid #5b5a4e;padding-bottom:4px;width:100%}.visual-footer{position:absolute;bottom:15px;left:23px;right:23px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;gap:8px}.fill{background:#d1c7ac}.screenshot-mini{margin-top:17px;transform:rotate(-4deg);width:85%;margin-left:23px;box-shadow:5px 5px 0 #0002}.screenshot-mini img{width:100%;display:block}.roller{background:#9c392b;color:var(--paper)}.roller i{color:#e9c59a}.roll-rates{font-family:'Barlow Condensed',Impact,sans-serif;font-size:30px;margin:20px 0 12px}.roll-rates span{color:#c47d64}.abstract-bars{height:38px;background:repeating-linear-gradient(90deg,var(--paper) 0 3px,transparent 3px 12px);opacity:.6;border-top:1px solid #e9e1cc66;border-bottom:1px solid #e9e1cc66}.card-body{padding:26px}.card-body .eyebrow{font-size:10px;letter-spacing:1.3px;color:var(--red)}h3{font-family:'Barlow Condensed',Impact,sans-serif;font-size:35px;margin-bottom:14px}.card-body>p:not(.eyebrow){font-size:14px;line-height:1.8;color:var(--muted);min-height:102px}.tags{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 24px}.tags span{border:1px solid var(--line);padding:5px 8px;font-size:10px}.card-body button{width:100%;display:flex;justify-content:space-between;padding:15px 0 0;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;font-size:14px;font-weight:700}.card-body button:hover{color:var(--red)}.card-body button span{font-size:20px}.studio{background:var(--ink);color:var(--paper);padding:70px 6%;display:grid;grid-template-columns:.75fr 1.25fr;gap:55px;align-items:center}.studio-copy{max-width:400px;margin-left:auto}.studio .eyebrow{color:#b7ac94}.studio h2{font-size:64px}.studio em{color:#ce7354;letter-spacing:-2px}. /* ── CSS personalizzato generato da Claude ───────────────────── */ /* ── Nav menu WordPress ──────────────────────────────────────── */ .nav-menu { list-style: none; display: flex; align-items: center; gap: 1.5rem; margin: 0; padding: 0; } .nav-menu li { margin: 0; } .nav-menu a { text-decoration: none; font-weight: 500; font-size: .95rem; color: inherit; transition: opacity .2s; white-space: nowrap; } .nav-menu a:hover { opacity: .7; } @media (max-width: 768px) { .nav-menu { display: none; } .main-navigation.open .nav-menu { display: flex; flex-direction: column; gap: .75rem; } } /* ── Collasso responsive delle sezioni custom a colonne ─────────── render_custom_section (ThemelabBuilderPhp) fissa grid-template-columns con uno style INLINE (necessario per rispettare width_percent per- colonna quando non c'è wrap, vedi tlColWidthUpdate) — un inline style non è sormontabile da un @media query su un'altra regola con la stessa specificità, serve !important qui. Senza questa regola qualunque sezione custom multi-colonna (footer, booking, blocchi futuri) resta affiancata anche su mobile: nessuna ne aveva mai una, bug generico scoperto lavorando sulla sezione rooms dell'hotel. */ @media (max-width: 768px) { .tl-custom-grid { grid-template-columns: 1fr !important; } } /* ── Page header banner — page.php / single.php / archive.php ── Stessa identità visiva (colori/font) dell'header/hero generato, ma generica: usata per contenuti WP "reali" (pagine statiche, articoli, archivi) che non hanno un design AI dedicato come front-page.php. */ .tl-page-header { background: var(--color-surface, #f8f9fb); border-bottom: 1px solid var(--color-border, #ececec); padding: 72px 24px 56px; text-align: center; } .tl-page-header-inner { max-width: 820px; margin: 0 auto; } .tl-page-header-eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-primary); margin-bottom: .75rem; } .tl-page-header-title { font-family: var(--font-main); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.15; margin: 0 0 .5rem; } .tl-page-header-desc { font-size: 1.05rem; color: var(--color-muted, #666); margin-top: .5rem; } .tl-page-header-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; font-size: .9rem; color: var(--color-muted, #777); } /* ── Contenuto pagina/articolo (output di the_content(), non AI-generated: va tipografato a parte perché non passa dallo scan Tailwind statico) ── */ .tl-prose { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; line-height: 1.75; font-size: 1.05rem; } .tl-prose h1, .tl-prose h2, .tl-prose h3, .tl-prose h4 { font-weight: 700; line-height: 1.3; margin: 2em 0 .6em; } .tl-prose > *:first-child { margin-top: 0; } .tl-prose h2 { font-size: 1.6rem; } .tl-prose h3 { font-size: 1.3rem; } .tl-prose p { margin: 0 0 1.25em; } .tl-prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } .tl-prose ul, .tl-prose ol { margin: 0 0 1.25em 1.4em; } .tl-prose li { margin-bottom: .4em; } .tl-prose img { border-radius: var(--r-lg, 12px); margin: 1.5em 0; height: auto; max-width: 100%; } .tl-prose blockquote { border-left: 3px solid var(--color-primary); margin: 1.5em 0; padding: .5em 0 .5em 1.25em; font-style: italic; color: var(--color-muted, #555); } .tl-prose figcaption { font-size: .85rem; color: var(--color-muted, #888); text-align: center; margin-top: .5em; } .tl-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; } .tl-prose table th, .tl-prose table td { border: 1px solid var(--color-border, #eee); padding: .6em .8em; text-align: left; } .tl-page-links { margin-top: 2em; font-size: .9rem; } .tl-archive-empty { text-align: center; padding: 60px 20px; color: var(--color-muted, #888); } /* ── Paginazione archivi (paginate_links()) ── */ .tl-pagination { display: flex; justify-content: center; gap: .5rem; padding: 40px 24px 80px; flex-wrap: wrap; } .tl-pagination a, .tl-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .75rem; border-radius: var(--r-md, 8px); border: 1px solid var(--color-border, #eee); text-decoration: none; color: inherit; font-size: .9rem; } .tl-pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); } .tl-pagination .current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; } /* ── Single post: tag + navigazione articolo precedente/successivo ── */ .tl-single-footer { max-width: 760px; margin: 0 auto; padding: 0 24px 40px; } .tl-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; } .tl-tags a { font-size: .8rem; padding: .3rem .75rem; border-radius: 999px; background: var(--color-surface, #f4f4f5); color: inherit; text-decoration: none; border: 1px solid var(--color-border, #eee); } .tl-tags a:hover { border-color: var(--color-primary); color: var(--color-primary); } .tl-post-nav { display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border, #eee); } .tl-post-nav > div { flex: 1 1 0; } .tl-post-nav .next { text-align: right; } .tl-post-nav a { color: inherit; text-decoration: none; } .tl-post-nav a:hover .tl-post-nav-title { color: var(--color-primary); } .tl-post-nav-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted, #999); margin-bottom: .25rem; } .tl-post-nav-title { font-weight: 600; } /* ── Commenti (markup di default WP — html5 support già dichiarato in functions.php, quindi
/
    reali, non le