/* ============================================================
NNZN DESIGN SYSTEM v2 — "STEEL & WALNUT BAUHAUS"
Brand culture layer. Loaded LAST so it leads the identity.
Materials: brushed steel · dark walnut · black · amber · mint(academy)
Language: Bauhaus — primary geometric forms, modular grid, function
Signature: the NNZN bracket-corners = viewfinder / crop-marks / frame
============================================================ */
:root{
/* — amber accent system (warmer, more iconic than the old bronze) — */
--amber: #c8841f;
--amber-bright: #e0a23d;
--amber-deep: #8a5616;
--amber-dim: rgba(200,132,31,.12);
/* — mint (Academy only) — */
--mint: #2ea080;
--mint-bright: #40b48c;
/* — black ink (the logo) — */
--ink: #0c0b0a;
/* — brushed steel (silver, almost reflective) — */
--steel-1: #d8d5d0;
--steel-2: #b3afa9;
--steel-3: #efeee8;
--steel-edge: #9a958e;
/* — dark walnut wood — */
--walnut-1: #2a1d12;
--walnut-2: #3a2817;
--walnut-3: #1c130b;
--walnut-grain: rgba(0,0,0,.22);
/* — frame geometry — */
--frame-len: clamp(20px, 2.4vw, 34px);
--frame-wt: 2px;
--frame-gap: clamp(14px, 2vw, 26px);
/* — STUDIOS sub-brand system (Audi RS / Mercedes AMG logic):
stesso rombo NNZN, dettaglio-firma + colore + sigla diversi per studio — */
--studio-main: #c8841f; /* NNZN Studios — ambra */
--studio-main-soft: rgba(200,132,31,.12);
--studio-social: #8fae17; /* NNZN Social Hub — wasabi/verde acido */
--studio-social-soft: rgba(143,174,23,.14);
--studio-academy: #b35418; /* NNZN Academy — arancione deep (era blu) */
--studio-academy-soft:rgba(179,84,24,.14);
}
/* Override the legacy bronze accent with the new amber, site-wide */
:root{
--accent: var(--amber);
--accent-dim: var(--amber-dim);
}
[data-theme="light"]{
--accent: #a6691a;
--amber: #a6691a;
--amber-bright: #c8841f;
}
/* ============================================================
1 · BRUSHED STEEL surface
============================================================ */
.steel{
position:relative;
background:
linear-gradient(118deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%),
linear-gradient(135deg,
var(--steel-1) 0%, var(--steel-2) 17%, var(--steel-3) 31%,
var(--steel-2) 47%, var(--steel-3) 63%, var(--steel-edge) 80%, var(--steel-1) 100%);
color:var(--ink);
isolation:isolate;
}
.steel::before{
content:'';
position:absolute; inset:0; z-index:0;
background-image:repeating-linear-gradient(
90deg,
rgba(0,0,0,.020) 0px, rgba(255,255,255,.028) 1px,
rgba(0,0,0,.024) 2px, rgba(255,255,255,.014) 3px);
mix-blend-mode:overlay;
pointer-events:none;
}
.steel > *{ position:relative; z-index:1; }
/* ============================================================
2 · DARK WALNUT surface
============================================================ */
.walnut{
position:relative;
background:
radial-gradient(ellipse at 12% 0%, rgba(200,132,31,.10) 0%, transparent 46%),
linear-gradient(168deg, var(--walnut-2) 0%, var(--walnut-1) 46%, var(--walnut-3) 100%);
color:#efe7dc;
isolation:isolate;
}
.walnut::before{
content:'';
position:absolute; inset:0; z-index:0;
/* vertical wood grain */
background-image:repeating-linear-gradient(
90deg,
var(--walnut-grain) 0px, transparent 2px, transparent 9px,
rgba(255,255,255,.02) 10px, transparent 11px, transparent 22px);
opacity:.5;
pointer-events:none;
}
.walnut > *{ position:relative; z-index:1; }
.walnut a{ color:var(--amber-bright); }
/* ============================================================
3 · VIEWFINDER FRAME · the iconic NNZN device
Four corner brackets = crop-marks = camera viewfinder = logo.
Wrap any block in .nnzn-frame to "shoot" it.
============================================================ */
.nnzn-frame{
position:relative;
padding:var(--frame-gap);
}
.nnzn-frame::before,
.nnzn-frame::after,
.nnzn-frame > .vf-tr,
.nnzn-frame > .vf-br{
content:'';
position:absolute;
width:var(--frame-len);
height:var(--frame-len);
border:0 solid var(--amber);
pointer-events:none;
z-index:3;
}
/* top-left */
.nnzn-frame::before{
top:0; left:0;
border-top-width:var(--frame-wt);
border-left-width:var(--frame-wt);
}
/* bottom-left */
.nnzn-frame::after{
bottom:0; left:0;
border-bottom-width:var(--frame-wt);
border-left-width:var(--frame-wt);
}
/* top-right + bottom-right need helper spans (added in markup) */
.nnzn-frame > .vf-tr{
top:0; right:0;
border-top-width:var(--frame-wt);
border-right-width:var(--frame-wt);
}
.nnzn-frame > .vf-br{
bottom:0; right:0;
border-bottom-width:var(--frame-wt);
border-right-width:var(--frame-wt);
}
/* center reticle dot (the logo's circle eye) — optional via .vf-eye */
.nnzn-frame > .vf-eye{
position:absolute; top:50%; left:50%;
width:14px; height:14px; margin:-7px 0 0 -7px;
border:1.5px solid var(--amber);
border-radius:50%;
opacity:.5;
pointer-events:none;
z-index:3;
}
/* "REC" style indicator (optional) */
.nnzn-frame > .vf-rec{
position:absolute; top:calc(var(--frame-gap) + 4px); right:calc(var(--frame-gap) + 4px);
display:inline-flex; align-items:center; gap:.4rem;
font-size:.58rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
color:var(--amber);
z-index:3; pointer-events:none;
}
.nnzn-frame > .vf-rec::before{
content:''; width:7px; height:7px; border-radius:50%;
background:var(--amber);
animation:vf-blink 1.6s steps(1) infinite;
}
@keyframes vf-blink{ 0%,49%{opacity:1} 50%,100%{opacity:.15} }
@media (prefers-reduced-motion:reduce){ .nnzn-frame > .vf-rec::before{ animation:none } }
/* hover: brackets reach in slightly (camera focusing) */
@media (hover:hover){
.nnzn-frame.is-interactive:hover::before{ transform:translate(3px,3px); }
.nnzn-frame.is-interactive:hover::after{ transform:translate(3px,-3px); }
.nnzn-frame.is-interactive:hover > .vf-tr{ transform:translate(-3px,3px); }
.nnzn-frame.is-interactive:hover > .vf-br{ transform:translate(-3px,-3px); }
.nnzn-frame::before,.nnzn-frame::after,.nnzn-frame>.vf-tr,.nnzn-frame>.vf-br{
transition:transform .5s cubic-bezier(.16,1,.3,1);
}
}
/* ============================================================
4 · BAUHAUS geometric markers (circle / square / triangle)
============================================================ */
.geo{ display:inline-block; flex:0 0 auto; }
.geo--circle{ width:12px; height:12px; border-radius:50%; background:var(--amber); }
.geo--square{ width:11px; height:11px; background:var(--ink); }
.geo--triangle{
width:0; height:0;
border-left:6px solid transparent; border-right:6px solid transparent;
border-bottom:11px solid var(--amber);
}
.geo--ring{ width:12px; height:12px; border-radius:50%; border:2px solid var(--amber); }
.geo--diamond{ width:11px; height:11px; background:var(--amber); transform:rotate(45deg); }
/* Bauhaus oversized section number */
.bauhaus-num{
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-weight:800;
font-size:clamp(3rem, 7vw, 6.5rem);
line-height:.8;
letter-spacing:-.04em;
color:transparent;
-webkit-text-stroke:1.5px var(--amber);
text-stroke:1.5px var(--amber);
display:inline-block;
}
.bauhaus-num.solid{ color:var(--amber); -webkit-text-stroke:0; }
/* ============================================================
5 · CINEMA TICKET · Social Hub
"ORA IN ONDA AL CINEMA" — perforated stub, barcode, NNZN stamp
============================================================ */
.cine-ticket{
position:relative;
display:grid;
grid-template-columns:1fr;
background:#16110a;
color:#f3ece0;
border:1px solid rgba(200,132,31,.28);
border-radius:6px;
overflow:hidden;
isolation:isolate;
}
.cine-ticket::after{
/* paper texture */
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(ellipse at 0% 0%, rgba(200,132,31,.10), transparent 50%),
repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
}
.cine-ticket > *{ position:relative; z-index:1; }
/* header band: ORA IN ONDA */
.cine-head{
display:flex; align-items:center; justify-content:space-between; gap:1rem;
padding:.7rem 1.1rem;
background:var(--amber);
color:var(--ink);
}
.cine-head .cine-now{
font-size:.68rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
display:inline-flex; align-items:center; gap:.5rem;
}
.cine-head .cine-now::before{
content:''; width:8px; height:8px; border-radius:50%; background:var(--ink);
animation:vf-blink 1.6s steps(1) infinite;
}
.cine-head .cine-admit{
font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
border:1.5px solid var(--ink); padding:.12rem .5rem; border-radius:2px;
}
/* body */
.cine-body{ padding:1.5rem 1.3rem 1.1rem; display:flex; flex-direction:column; gap:1.1rem; flex:1; }
.cine-meta-top{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.cine-feature{
font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
color:rgba(243,236,224,.45);
}
.cine-stamp{
width:42px; height:42px; flex:0 0 auto;
border:1.5px solid rgba(200,132,31,.55); border-radius:50%;
display:grid; place-items:center; color:var(--amber);
transform:rotate(-8deg);
}
.cine-stamp svg{ width:22px; height:22px; }
.cine-title{
font-size:clamp(1.6rem, 3vw, 2.3rem); font-weight:800;
letter-spacing:-.03em; line-height:1; color:#f7f1e6;
}
.cine-desc{ font-size:.84rem; line-height:1.6; color:rgba(243,236,224,.6); }
/* data row (seat / row / time) — tabular */
.cine-data{
display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem;
font-variant-numeric:tabular-nums;
padding-top:.4rem;
}
.cine-data dt{ font-size:.55rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(243,236,224,.4); margin-bottom:.18rem; }
.cine-data dd{ font-size:.92rem; font-weight:700; color:#f3ece0; letter-spacing:.01em; }
/* perforated tear edge + barcode foot */
.cine-foot{
position:relative;
margin-top:auto;
padding:1rem 1.3rem 1.2rem;
border-top:2px dashed rgba(243,236,224,.22);
}
/* tear notches */
.cine-foot::before,
.cine-foot::after{
content:''; position:absolute; top:-9px; width:16px; height:16px;
background:var(--bg, #111214); border-radius:50%;
}
.cine-foot::before{ left:-9px; }
.cine-foot::after{ right:-9px; }
.cine-barcode{
height:34px;
background:repeating-linear-gradient(90deg,
#f3ece0 0 2px, transparent 2px 3px,
#f3ece0 3px 4px, transparent 4px 7px,
#f3ece0 7px 9px, transparent 9px 10px);
opacity:.85;
border-radius:1px;
}
.cine-code{
margin-top:.5rem;
font-size:.58rem; font-weight:700; letter-spacing:.28em;
color:rgba(243,236,224,.45);
font-variant-numeric:tabular-nums;
display:flex; justify-content:space-between;
}
.cine-ticket .cine-cta{
display:inline-flex; align-items:center; gap:.5rem;
font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--amber);
transition:gap .3s cubic-bezier(.16,1,.3,1);
}
.cine-ticket:hover .cine-cta{ gap:.85rem; }
/* ============================================================
6 · SECTION CHROME — steel number plates + Bauhaus rules
============================================================ */
.sec-plate{
display:inline-flex; align-items:center; gap:.85rem;
padding:.4rem .4rem .4rem .85rem;
border:1px solid var(--line-strong);
border-radius:4px;
font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--text);
margin-bottom:1.5rem;
}
.sec-plate .num{
display:grid; place-items:center;
width:26px; height:26px;
background:var(--amber); color:var(--ink);
border-radius:3px;
font-size:.72rem; font-weight:800; letter-spacing:0;
}
/* a strong Bauhaus rule: thick + thin double line with a circle node */
.bauhaus-rule{
display:flex; align-items:center; gap:0;
margin:clamp(2rem,4vw,3.5rem) 0;
}
.bauhaus-rule .thick{ height:3px; background:var(--amber); flex:0 0 64px; }
.bauhaus-rule .node{ width:11px; height:11px; border-radius:50%; border:2px solid var(--amber); margin:0 -1px; }
.bauhaus-rule .thin{ height:1px; background:var(--line); flex:1; }
/* ============================================================
7 · Header / brand lockup polish (steel chip behind logo)
============================================================ */
.nnzn-brand-logo{ position:relative; }
/* ============================================================
8 · Reduced motion + light theme coherence
============================================================ */
[data-theme="light"] .cine-ticket{ background:#efe9df; color:#1a140c; border-color:rgba(166,105,26,.4); }
[data-theme="light"] .cine-title{ color:#1a140c; }
[data-theme="light"] .cine-desc{ color:rgba(26,20,12,.7); }
[data-theme="light"] .cine-foot::before,[data-theme="light"] .cine-foot::after{ background:var(--bg); }
[data-theme="light"] .cine-barcode{ background:repeating-linear-gradient(90deg,#1a140c 0 2px,transparent 2px 3px,#1a140c 3px 4px,transparent 4px 7px,#1a140c 7px 9px,transparent 9px 10px); }
@media (prefers-reduced-motion:reduce){
.nnzn-frame.is-interactive:hover::before,
.nnzn-frame.is-interactive:hover::after,
.nnzn-frame.is-interactive:hover > .vf-tr,
.nnzn-frame.is-interactive:hover > .vf-br{ transform:none; }
}
/* ============================================================
9 · HERO VIEWFINDER · the homepage shot
The whole hero reads as a camera viewfinder / film frame.
============================================================ */
.hero{ position:relative; }
.hero-vf{
position:absolute;
inset:clamp(16px,2.2vw,30px);
z-index:2;
pointer-events:none;
}
.hero-vf span{ position:absolute; width:clamp(26px,3vw,44px); height:clamp(26px,3vw,44px); border:0 solid rgba(255,255,255,.9); }
.hero-vf .tl{ top:0; left:0; border-top-width:2px; border-left-width:2px; }
.hero-vf .tr{ top:0; right:0; border-top-width:2px; border-right-width:2px; }
.hero-vf .bl{ bottom:0; left:0; border-bottom-width:2px; border-left-width:2px; }
.hero-vf .br{ bottom:0; right:0; border-bottom-width:2px; border-right-width:2px; }
/* center reticle */
.hero-vf .eye{
top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px;
border:1.5px solid rgba(255,255,255,.5); border-radius:50%;
}
.hero-vf .eye::before,.hero-vf .eye::after{
content:''; position:absolute; background:rgba(255,255,255,.5);
}
.hero-vf .eye::before{ top:50%; left:-10px; right:-10px; height:1px; margin-top:-.5px; }
.hero-vf .eye::after{ left:50%; top:-10px; bottom:-10px; width:1px; margin-left:-.5px; }
/* REC indicator top-right */
.hero-rec{
position:absolute; top:clamp(20px,2.6vw,36px); right:clamp(22px,3vw,42px);
z-index:3;
display:inline-flex; align-items:center; gap:.5rem;
font-size:.6rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
color:#fff;
}
.hero-rec::before{
content:''; width:8px; height:8px; border-radius:50%; background:var(--amber);
box-shadow:0 0 10px var(--amber);
animation:vf-blink 1.4s steps(1) infinite;
}
/* Re-style the hero credit as a film-slate readout, bottom-left */
.hero .hero-credit{
top:auto !important;
bottom:clamp(22px,3vw,40px) !important;
right:auto !important;
left:clamp(22px,3vw,42px) !important;
display:inline-flex; align-items:center; gap:.7rem;
background:rgba(0,0,0,.42) !important;
border:1px solid rgba(255,255,255,.16) !important;
font-variant-numeric:tabular-nums;
}
.hero .hero-credit::before{
content:'SCENE 01 · TAKE 1';
font-size:.55rem; font-weight:700; letter-spacing:.2em; color:rgba(255,255,255,.5);
padding-right:.7rem; border-right:1px solid rgba(255,255,255,.2);
}
@media (prefers-reduced-motion:reduce){ .hero-rec::before{ animation:none } }
@media (max-width:600px){
.hero-vf .eye{ display:none }
.hero .hero-credit::before{ display:none }
}
/* ============================================================
10 · LAYOUT BINDINGS — tickets grid, clients Bauhaus, walnut footer
============================================================ */
/* Cinema tickets: separated cards, equal height */
.sh-tickets{
grid-template-columns:repeat(3,1fr) !important;
gap:clamp(1rem,1.6vw,1.5rem) !important;
background:transparent !important;
align-items:stretch;
}
@media (max-width:860px){ .sh-tickets{ grid-template-columns:1fr !important; } }
.cine-ticket{ display:flex; flex-direction:column; }
/* ABBIAMO LAVORATO CON — Bauhaus modular grid */
.clients-grid{
border:1px solid var(--line) !important;
border-bottom:0 !important;
margin-top:2rem !important;
}
.client-logo{
position:relative;
padding:2.4rem 1.5rem !important;
border-right:1px solid var(--line) !important;
border-bottom:1px solid var(--line) !important;
overflow:hidden;
transition:background-color .4s cubic-bezier(.16,1,.3,1), color .3s ease;
}
/* Bauhaus geo marker top-left of each cell */
.client-logo::before{
content:'';
position:absolute; top:14px; left:14px;
width:9px; height:9px;
background:var(--amber);
transition:transform .45s cubic-bezier(.16,1,.3,1), border-radius .45s ease;
}
.client-logo:nth-child(3n+1)::before{ border-radius:50%; } /* circle */
.client-logo:nth-child(3n+2)::before{ border-radius:0; } /* square */
.client-logo:nth-child(3n+3)::before{ transform:rotate(45deg); } /* diamond */
.client-logo:hover{
background:var(--amber) !important;
color:var(--ink) !important;
}
.client-logo:hover::before{ background:var(--ink); transform:scale(1.5) rotate(0deg); border-radius:0; }
/* WALNUT FOOTER — the dark-wood furniture base */
.footer{
position:relative;
background:
radial-gradient(ellipse at 12% 0%, rgba(200,132,31,.10) 0%, transparent 46%),
linear-gradient(168deg, #3a2817 0%, #2a1d12 46%, #1c130b 100%) !important;
color:#efe7dc !important;
isolation:isolate;
border-top:3px solid var(--amber);
}
.footer::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0px, transparent 2px, transparent 9px, rgba(255,255,255,.02) 10px, transparent 11px, transparent 22px);
opacity:.5;
}
.footer > *{ position:relative; z-index:1; }
.footer h3{ color:rgba(239,231,220,.6) !important; }
.footer a{ color:#e0c9a8 !important; }
.footer a:hover{ color:#fff !important; }
.footer .footer-bottom{ color:rgba(239,231,220,.6) !important; }
/* Newsletter band — subtle steel edge */
.newsletter-band{ border-top:1px solid var(--line); }
/* As-seen-on cards: amber left-rule (Bauhaus accent) */
.aso-card{ border-left:2px solid transparent; transition:border-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1), background-color .3s ease; }
.aso-card:hover{ border-left-color:var(--amber); }
/* ============================================================
11 · STEEL MOMENT — NNZNot newsletter band as brushed metal
Echoes the laminated-steel magazine cover. Site ↔ object link.
============================================================ */
.newsletter-band{
position:relative;
background:
linear-gradient(118deg, transparent 40%, rgba(255,255,255,.30) 50%, transparent 60%),
linear-gradient(135deg, #d8d5d0 0%, #b3afa9 18%, #efeee8 32%, #b3afa9 50%, #efeee8 66%, #9a958e 82%, #d8d5d0 100%) !important;
color:var(--ink) !important;
isolation:isolate;
border-top:1px solid rgba(0,0,0,.12);
border-bottom:1px solid rgba(0,0,0,.12);
}
.newsletter-band::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.020) 0px, rgba(255,255,255,.03) 1px, rgba(0,0,0,.024) 2px, rgba(255,255,255,.014) 3px);
mix-blend-mode:overlay;
}
.newsletter-band > *{ position:relative; z-index:1; }
.newsletter-band .eyebrow{ color:#5a4a2e !important; }
.newsletter-band .title{ color:var(--ink) !important; text-shadow:0 1px 0 rgba(255,255,255,.4); }
.newsletter-band .lead{ color:#2a2620 !important; }
.newsletter-band .newsletter-form input{
background:rgba(255,255,255,.55) !important;
border:1px solid rgba(0,0,0,.28) !important;
color:var(--ink) !important;
}
.newsletter-band .newsletter-form input::placeholder{ color:rgba(0,0,0,.45) !important; }
.newsletter-band .btn-primary{
background:var(--ink) !important; color:#f3ece0 !important; border-color:var(--ink) !important;
}
[data-theme="light"] .newsletter-band{ /* steel works in both themes */ }
/* 11b · steel newsletter — hardened specificity (beats inline second style block) */
html body section.newsletter-band{
background:
linear-gradient(118deg, transparent 40%, rgba(255,255,255,.30) 50%, transparent 60%),
linear-gradient(135deg, #d8d5d0 0%, #b3afa9 18%, #efeee8 32%, #b3afa9 50%, #efeee8 66%, #9a958e 82%, #d8d5d0 100%) !important;
}
html body section.newsletter-band .title{ color:#0c0b0a !important; text-shadow:0 1px 0 rgba(255,255,255,.45); }
html body section.newsletter-band .eyebrow{ color:#5a4a2e !important; }
html body section.newsletter-band .lead{ color:#2a2620 !important; }
/* ============================================================
12 · FIX PASS — clean hero, Bauhaus Social Hub cards, label strip
============================================================ */
/* Hero credit: drop the SCENE/TAKE slate prefix, keep it minimal */
.hero .hero-credit::before{ content:none !important; }
.hero .hero-credit{ gap:0 !important; }
/* Amber label strip above the tickets (writes on the "orange line") */
.sh-strip{
position:relative; z-index:1;
overflow:hidden;
display:flex; gap:0;
background:var(--amber);
color:var(--ink);
white-space:nowrap;
padding:.6rem 0;
margin-top:clamp(2rem,4vw,3.5rem); /* SPACE between CTA button and strip */
border-top:1px solid rgba(0,0,0,.18);
border-bottom:1px solid rgba(0,0,0,.18);
}
.sh-strip span{
display:inline-block; flex:0 0 auto;
padding-left:1.5rem;
font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
animation:sh-marq 30s linear infinite;
}
@keyframes sh-marq{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){ .sh-strip span{ animation:none; } }
/* Tickets grid: balanced, separated, equal height + breathing room */
.sh-tickets{
grid-template-columns:repeat(3,1fr) !important;
gap:clamp(1rem,1.6vw,1.5rem) !important;
background:transparent !important;
align-items:stretch;
max-width:1320px; margin-inline:auto;
padding:clamp(2.5rem,4vw,3.5rem) clamp(1rem,4vw,2rem) !important;
}
@media (max-width:900px){ .sh-tickets{ grid-template-columns:1fr !important; } }
/* Base hub card */
.hub-card{
position:relative; display:flex; flex-direction:column;
background:#16110a;
border:1px solid rgba(200,132,31,.22);
border-radius:10px;
padding:1.7rem 1.5rem 1.5rem;
overflow:hidden;
isolation:isolate;
transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .35s ease;
}
.hub-card > *{ position:relative; z-index:1; }
.hub-card:hover{ transform:translateY(-4px); border-color:var(--amber); }
.hub-card-body{ flex:1; display:flex; flex-direction:column; }
.hub-card-row{ display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.hub-card-kicker{ font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(243,236,224,.5); }
.hub-card-title{ font-size:clamp(1.7rem,2.6vw,2.3rem); font-weight:800; line-height:.98; letter-spacing:-.03em; color:#f7f1e6; margin-bottom:.85rem; }
.hub-card-desc{ font-size:.86rem; line-height:1.6; color:rgba(243,236,224,.6); margin-bottom:1.25rem; }
.hub-card-data{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:auto; padding-top:1rem; border-top:1px solid rgba(243,236,224,.12); font-variant-numeric:tabular-nums; }
.hub-card-data dt{ font-size:.54rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(243,236,224,.4); margin-bottom:.2rem; }
.hub-card-data dd{ font-size:.9rem; font-weight:700; color:#f3ece0; }
.hub-card-perks{ list-style:none; margin:0; padding:0; margin-top:.5rem; }
.hub-card-perks li{ font-size:.82rem; color:rgba(243,236,224,.7); padding:.55rem 0 .55rem 1.2rem; position:relative; border-top:1px solid rgba(243,236,224,.08); }
.hub-card-perks li:first-child{ border-top:0; }
.hub-card-perks li::before{ content:''; position:absolute; left:0; top:.95em; width:7px; height:7px; background:var(--amber); }
.hub-card-cta{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.4rem; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); transition:gap .3s cubic-bezier(.16,1,.3,1); }
.hub-card:hover .hub-card-cta{ gap:.9rem; }
/* Variant 1 — LIVE ticket (only this one says "ora in onda") */
.hub-card--ticket{ background:linear-gradient(165deg,#241608 0%,#140d05 100%); padding-top:2.6rem; }
.hub-ticket-tab{
position:absolute; top:0; left:0; z-index:2;
background:var(--amber); color:var(--ink);
font-size:.6rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
padding:.4rem .95rem; border-radius:0 0 10px 0;
display:inline-flex; align-items:center; gap:.45rem;
}
.hub-ticket-tab::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--ink); animation:vf-blink 1.6s steps(1) infinite; }
@media (prefers-reduced-motion:reduce){ .hub-ticket-tab::before{ animation:none; } }
/* Variant 2 — MEMBERSHIP pass (geometric ring) */
.hub-card--pass{ background:linear-gradient(165deg,#221a11 0%,#14100a 100%); }
.hub-pass-geo{ position:absolute; top:-34px; right:-34px; width:120px; height:120px; border:2px solid rgba(200,132,31,.22); border-radius:50%; z-index:0; }
.hub-pass-geo .geo--ring{ position:absolute; bottom:30px; left:30px; }
/* Variant 3 — CORPORATE blueprint (grid + dashed) */
.hub-card--brief{ background:#0e0b07; border-style:dashed; }
.hub-brief-grid{ position:absolute; inset:0; z-index:0;
background-image:linear-gradient(rgba(200,132,31,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(200,132,31,.06) 1px,transparent 1px);
background-size:22px 22px; opacity:.8; pointer-events:none; }
/* Light theme cards */
[data-theme="light"] .hub-card{ background:#efe9df; border-color:rgba(166,105,26,.4); }
[data-theme="light"] .hub-card-title{ color:#1a140c; }
[data-theme="light"] .hub-card-desc,[data-theme="light"] .hub-card-perks li,[data-theme="light"] .hub-card-data dd{ color:#3a3024; }
[data-theme="light"] .hub-card--brief{ background:#e8e2d6; }
[data-theme="light"] .hub-card--ticket{ background:linear-gradient(165deg,#e8dcc4,#efe9df); }
[data-theme="light"] .hub-card--pass{ background:linear-gradient(165deg,#ece4d6,#efe9df); }
/* ============================================================
13 · COLLAGE — As seen on & NNZNot magazine band
============================================================ */
/* --- AS SEEN ON · collage --- */
.aso-collage{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
gap:1.1rem;
align-items:start;
padding-top:.5rem;
}
.aso-collage .aso-card{
position:relative;
scroll-snap-align:none;
background:var(--panel);
border:1px solid var(--line);
border-left:2px solid transparent;
border-radius:4px;
padding:1.5rem 1.3rem 1.2rem;
transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .35s ease;
box-shadow:0 12px 30px -22px rgba(0,0,0,.7);
}
/* collage character: alternating slight rotations + offsets */
.aso-collage .aso-card:nth-child(3n+1){ transform:rotate(-1.4deg); }
.aso-collage .aso-card:nth-child(3n+2){ transform:rotate(1deg); margin-top:1.4rem; }
.aso-collage .aso-card:nth-child(3n+3){ transform:rotate(-.4deg); margin-top:.6rem; }
.aso-collage .aso-card:hover{ transform:rotate(0deg) translateY(-4px); border-left-color:var(--amber); z-index:2; box-shadow:0 22px 50px -24px rgba(0,0,0,.8); }
/* tape on each clipping */
.aso-collage .aso-card::before{
content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-2deg);
width:54px; height:18px;
background:rgba(200,132,31,.32);
border:1px solid rgba(200,132,31,.25);
}
.aso-collage .aso-card:nth-child(2n)::before{ transform:translateX(-50%) rotate(3deg); left:38%; }
.as-seen-on .aso-head{ margin-bottom:2.25rem; }
/* --- NNZNot · magazine collage band --- */
html body section.newsletter-band.mag-band{
background:linear-gradient(160deg,#181410 0%,#0f0c08 100%) !important;
color:#f3ece0 !important;
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
padding:clamp(3rem,6vw,5.5rem) 0 !important;
overflow:hidden;
}
html body section.newsletter-band.mag-band::before{ content:none !important; }
.mag-wrap{
display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center;
}
@media (max-width:860px){ .mag-wrap{ grid-template-columns:1fr; gap:2.5rem; } }
.mag-signup .title{ color:#f7f1e6 !important; }
.mag-signup .lead{ color:rgba(243,236,224,.62) !important; max-width:46ch; }
.mag-signup .eyebrow{ color:var(--amber) !important; }
/* collage of magazine cover fragments */
.mag-collage{
position:relative;
min-height:300px;
height:clamp(300px, 34vw, 380px);
}
.mag-piece{
position:absolute;
border-radius:3px;
box-shadow:0 26px 50px -26px rgba(0,0,0,.85);
display:flex; flex-direction:column; justify-content:flex-end;
padding:1rem;
overflow:hidden;
}
/* P1 — steel cover with NNZNOT wordmark (echoes the real magazine) */
.mag-piece-1{
left:6%; top:8%; width:46%; height:80%;
background:
linear-gradient(118deg, transparent 38%, rgba(255,255,255,.30) 50%, transparent 62%),
linear-gradient(135deg,#d8d5d0 0%,#b3afa9 20%,#efeee8 38%,#9a958e 72%,#cfc8bd 100%);
color:#0c0b0a;
transform:rotate(-5deg); z-index:2;
align-items:center; justify-content:center; gap:.4rem; text-align:center;
}
.mag-piece-1 .mag-issue{ font-size:.6rem; font-weight:700; letter-spacing:.2em; color:rgba(0,0,0,.5); }
.mag-piece-1 .mag-word{ font-size:clamp(1.4rem,2.6vw,2rem); font-weight:900; letter-spacing:-.02em; line-height:.9; }
.mag-piece-1 .mag-foot{ font-size:.52rem; font-weight:700; letter-spacing:.2em; color:rgba(0,0,0,.45); }
/* P2 — amber clipping with cutout headline */
.mag-piece-2{
right:4%; top:0; width:42%; height:46%;
background:var(--amber); color:var(--ink);
transform:rotate(4deg); z-index:3;
align-items:flex-start;
}
.mag-piece-2 .mag-cut{ font-size:clamp(1rem,1.8vw,1.4rem); font-weight:900; letter-spacing:-.02em; line-height:.95; text-transform:uppercase; }
/* P3 — dark walnut chip */
.mag-piece-3{
right:8%; bottom:4%; width:38%; height:42%;
background:linear-gradient(168deg,#3a2817,#1c130b);
transform:rotate(-3deg); z-index:1;
border:1px solid rgba(200,132,31,.25);
}
/* P4 — small founder-edition tag */
.mag-piece-4{
left:0; bottom:10%; width:30%; height:26%;
background:#0c0b0a; border:1px solid rgba(255,255,255,.14);
transform:rotate(6deg); z-index:4;
align-items:center; justify-content:center;
}
.mag-piece-4 .mag-tag{ font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); }
/* tape strips */
.mag-tape{ position:absolute; background:rgba(243,236,224,.18); z-index:5; }
.mag-tape-a{ width:78px; height:22px; top:4%; left:40%; transform:rotate(-18deg); }
.mag-tape-b{ width:64px; height:20px; bottom:8%; right:22%; transform:rotate(12deg); }
@media (prefers-reduced-motion:reduce){ .mag-piece{ transition:none; } }
@media (max-width:520px){ .mag-collage{ height:280px; } .mag-piece-4{ display:none; } }
/* ============================================================
14 · v3 — CINEMA / SYSTEM / COLLAGE (from reference board)
blue-steel counter color · cream poster sections · duotone ·
film-strip · spec-sheet technical layer
============================================================ */
:root{
--blue: #2e6f8e; /* steel blue counter to amber */
--blue-bright: #4a93b4;
--blue-deep: #14323f;
--cream: #e9e3d6; /* poster paper */
--cream-2: #dcd5c4;
--cream-ink: #1a1712;
--mono: 'Plus Jakarta Sans', ui-monospace, 'SF Mono', Menlo, monospace;
}
/* --- CREAM POSTER SECTION (alternates with dark cinema) --- */
.poster-bg{ background:var(--cream); color:var(--cream-ink); }
.poster-bg .eyebrow,.poster-bg .kicker{ color:var(--blue) !important; }
.poster-bg .title,.poster-bg h2,.poster-bg h3{ color:var(--cream-ink) !important; }
.poster-bg .lead,.poster-bg p{ color:#42392c !important; }
/* --- DUOTONE image util (amber shadows / blue highlights) --- */
.duotone{ position:relative; filter:grayscale(1) contrast(1.05); }
.duotone::after{
content:''; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(135deg, var(--blue-deep) 0%, transparent 55%),
linear-gradient(315deg, rgba(200,132,31,.55) 0%, transparent 55%);
mix-blend-mode:screen;
}
/* --- TECHNICAL TYPE (monospace data rows, reticles) --- */
.tech-data{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.reticle{ position:relative; }
.reticle::before,.reticle::after{ content:''; position:absolute; background:var(--amber); }
.reticle::before{ top:50%; left:-12px; width:9px; height:1px; }
.reticle::after{ top:-12px; left:50%; width:1px; height:9px; }
/* ============================================================
15 · FILM-STRIP POSTER WALL · Social Hub "ORA IN ONDA"
============================================================ */
.filmstrip{
position:relative;
background:transparent;
padding:clamp(1.2rem,2.5vw,2.2rem) 0;
}
/* sprocket holes top + bottom */
.filmstrip::before,.filmstrip::after{
content:''; position:absolute; left:0; right:0; height:22px;
background-image:repeating-linear-gradient(90deg,
transparent 0 14px, #161310 14px 16px,
#d9d4c8 16px 30px, #161310 30px 32px, transparent 32px 46px);
background-size:46px 22px; background-position:center;
/* render the holes as rounded rects via mask */
opacity:0; /* base hidden; we draw holes with the row below */
}
.filmstrip-rail{
position:relative;
display:flex; flex-direction:column;
gap:clamp(.8rem,1.6vw,1.4rem);
padding:34px clamp(1rem,4vw,2.5rem);
}
/* poster-1 (A.N.I.M.A.) shares its row with an intro/CTA panel, same height as the home "video in evidenza" */
.filmstrip-row-1{
display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);
gap:clamp(.8rem,1.6vw,1.4rem);
}
@media (max-width:900px){ .filmstrip-row-1{ grid-template-columns:1fr; } }
.poster-intro{
display:flex; flex-direction:column; justify-content:center;
padding:.5rem 0;
}
.poster-intro-kicker{ font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#a8cc1e; margin-bottom:.8rem; }
.poster-intro-text{ font-size:.92rem; line-height:1.65; color:rgba(243,236,224,.78); margin-bottom:1.2rem; max-width:42ch; }
.poster-intro-cta{ font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#f3ece0; display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; transition:gap .3s ease; }
.poster-intro-cta:hover{ gap:.9rem; }
.filmstrip-rail::-webkit-scrollbar{height:6px}
.filmstrip-rail::-webkit-scrollbar-thumb{background:rgba(200,132,31,.4);border-radius:3px}
/* the perforated black bands top & bottom of the rail */
.filmstrip-rail::before,.filmstrip-rail::after{ display:none; }
.filmstrip-rail::before{ top:0; }
.filmstrip-rail::after{ bottom:0; }
.poster{
position:relative;
border-radius:16px;
overflow:hidden;
display:flex; flex-direction:column; justify-content:flex-end;
padding:1.1rem;
color:#f3ece0;
text-decoration:none;
isolation:isolate;
transition:transform .45s cubic-bezier(.16,1,.3,1);
}
/* altezza coerente con la home page: niente più card portrait giganti su mobile/tablet */
.poster-1{ min-height:clamp(280px,42vw,520px); justify-content:flex-start; }
.poster-2,.poster-3{ min-height:clamp(170px,20vw,240px); }
.poster:hover{ transform:translateY(-5px); }
.poster::after{ content:''; position:absolute; inset:0; z-index:0;
background:linear-gradient(180deg, rgba(10,8,5,0) 0%, rgba(10,8,5,.08) 40%, rgba(10,8,5,.88) 100%); }
.poster > *{ position:relative; z-index:1; }
.poster{ border:1px solid rgba(243,236,224,.14); }
.poster-1{ background:linear-gradient(155deg,#5e7019 0%,#2e3a10 55%,#0e1206 100%); }
.poster-2{ background:linear-gradient(155deg,#46591a 0%,#26300e 55%,#0c1006 100%); }
.poster-3{ background:linear-gradient(155deg,#6a7d20 0%,#343f12 55%,#10140a 100%); }
/* "now showing" amber strip on poster 1 only */
.poster-now{
position:absolute; top:0; left:0; z-index:2;
background:#8fae17; color:#14180a;
font-size:.56rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
padding:.32rem .7rem; display:inline-flex; align-items:center; gap:.4rem;
}
.poster-now::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--ink); animation:vf-blink 1.6s steps(1) infinite; }
.poster-tag{ font-size:.56rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); margin-bottom:.5rem; }
.poster-2 .poster-tag{ color:var(--blue-bright); }
.poster-title{ font-size:clamp(1.4rem,2vw,1.9rem); font-weight:800; line-height:.96; letter-spacing:-.03em; margin-bottom:.5rem; }
.poster-meta{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,236,224,.55); margin-bottom:.85rem; }
.poster-cta{ font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#f3ece0; display:inline-flex; align-items:center; gap:.4rem; transition:gap .3s ease; }
.poster:hover .poster-cta{ gap:.8rem; }
/* poster-1 (A.N.I.M.A.) — real venue photo, testo in alto a sinistra con overlay forte in cima per leggibilità */
.poster-1{ background-image:url('/it/img/lavori/anima-venue.jpg') !important; background-size:cover; background-position:center; }
.poster-1::after{
background:linear-gradient(180deg, rgba(6,5,3,.88) 0%, rgba(6,5,3,.65) 28%, rgba(6,5,3,.18) 52%, transparent 72%) !important;
}
/* ── poster-2 / poster-3: TICKET contemporaneo ─────────────────────────
Corpo a sinistra + talloncino (stub) a destra, separati da una
perforazione tratteggiata. Nel talloncino: logo piccolo in alto (solo
poster-2, dove il mark esiste nell'HTML) e barcode in basso. Nessun
elemento si sovrappone al testo del corpo. */
.poster-2{ background:#8fae17 !important; }
.poster-3{ background:#5e7019 !important; }
.poster-2,.poster-3{ padding-right:calc(92px + 1.2rem); }
/* perforazione */
.poster-2::before,.poster-3::before{
content:''; position:absolute; z-index:1; top:.8rem; bottom:.8rem; right:92px;
width:0; border-left:2px dashed rgba(20,24,10,.32);
}
.poster-3::before{ border-left-color:rgba(243,236,224,.3); }
/* barcode nel talloncino (basso) */
.poster-2::after,.poster-3::after{
content:''; position:absolute; z-index:1; top:auto; left:auto; bottom:1rem; right:20px;
width:52px; height:38px;
background:repeating-linear-gradient(90deg,
currentColor 0 2px, transparent 2px 5px,
currentColor 5px 6px, transparent 6px 10px,
currentColor 10px 13px, transparent 13px 15px,
currentColor 15px 16px, transparent 16px 20px);
color:rgba(20,24,10,.7); opacity:1;
}
.poster-3::after{ color:rgba(243,236,224,.65); }
/* logo piccolo in alto nel talloncino */
.poster-mark{
position:absolute; z-index:1; pointer-events:none;
top:1rem; right:0; left:auto; transform:none;
width:92px; height:26px; display:flex; justify-content:center;
color:#14180a; opacity:.75;
}
.poster-mark svg{ width:auto; height:100%; display:block; }
.poster-2 .poster-code,.poster-2 .poster-tag,.poster-2 .poster-title,.poster-2 .poster-meta,.poster-2 .poster-cta{ color:#14180a !important; text-shadow:none !important; }
.poster-2 .poster-code{ border-color:rgba(20,24,10,.35); }
@media(max-width:680px){
.poster-2,.poster-3{ padding-right:calc(72px + 1rem); }
.poster-2::before,.poster-3::before{ right:72px; }
.poster-2::after,.poster-3::after{ width:44px; right:14px; }
.poster-mark{ width:72px; height:22px; }
}
/* film meta line under the strip */
.filmstrip-meta{
display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
max-width:1320px; margin:1.25rem auto 0; padding:0 clamp(1rem,4vw,2.5rem);
font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
color:rgba(243,236,224,.4);
}
/* ============================================================
17 · v4 — from team photo + directives
newspaper rassegna · torn-paper magazine · trust panel ·
cinema "sale" · academy gradient · footer logo · vertical fix
============================================================ */
/* --- VERTICAL PREVIEW FIX: shorts get 9/16 thumbnail --- */
.video-card.short .thumb-btn{ aspect-ratio:9/16 !important; }
.video-card.short .thumb-btn img{ object-fit:cover; }
/* ============================================================
AS SEEN ON → LA RASSEGNA (newspaper front page, cream)
============================================================ */
.as-seen-on.poster-bg{ background:var(--cream); color:var(--cream-ink); padding:clamp(3rem,5vw,5rem) 0; }
.as-seen-on .aso-head{ display:block; border-bottom:3px solid var(--cream-ink); padding-bottom:.6rem; margin-bottom:.4rem; }
.aso-masthead{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem 1.5rem; }
.aso-masthead .mh-name{ font-size:clamp(2.4rem,6vw,5rem); font-weight:900; letter-spacing:-.04em; line-height:.85; color:var(--cream-ink); }
.aso-masthead .mh-sub{ font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:#5a5246; }
.aso-rule-thin{ height:1px; background:var(--cream-ink); opacity:.5; margin:.35rem 0 1.5rem; }
/* newspaper column grid for clippings */
.aso-collage{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(26,23,18,.25); }
@media (max-width:920px){ .aso-collage{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .aso-collage{ grid-template-columns:1fr; } }
.as-seen-on .aso-card{
background:transparent; border:0; border-right:1px solid rgba(26,23,18,.22); border-bottom:1px solid rgba(26,23,18,.22);
border-radius:0; box-shadow:none; transform:none !important; margin:0 !important;
padding:1.25rem 1.15rem 1.4rem; color:var(--cream-ink);
}
.as-seen-on .aso-card::before{ display:none; } /* kill tape */
.as-seen-on .aso-card:hover{ background:rgba(26,23,18,.04); border-left:0; }
.as-seen-on .aso-outlet{ font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; color:#7a6f5c; border-bottom:1px solid rgba(26,23,18,.3); padding-bottom:.4rem; margin-bottom:.7rem; display:flex; justify-content:space-between; }
.as-seen-on .aso-outlet::after{ content:'●'; color:var(--amber); }
.as-seen-on .aso-quote{ font-size:1.02rem; font-weight:800; letter-spacing:-.015em; line-height:1.18; color:var(--cream-ink); }
.as-seen-on .aso-quote::first-letter{ font-size:2.4em; float:left; line-height:.8; margin:.04em .1em 0 0; font-weight:900; }
.as-seen-on .aso-meta{ font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; color:#7a6f5c; margin-top:.9rem; }
/* ============================================================
NNZNOT → TORN-PAPER MAGAZINE COLLAGE (legible)
============================================================ */
html body section.newsletter-band.mag-band{
background:var(--cream) !important; color:var(--cream-ink) !important;
border-top:3px solid var(--cream-ink); border-bottom:3px solid var(--cream-ink);
}
.mag-signup .title,.mag-signup .eyebrow{ color:var(--cream-ink) !important; }
.mag-signup .eyebrow{ color:var(--blue) !important; }
.mag-signup .lead{ color:#42392c !important; }
.mag-signup .newsletter-form input{ background:#fff !important; border:1px solid rgba(26,23,18,.35) !important; color:var(--cream-ink) !important; }
.mag-signup .newsletter-form .btn-primary{ background:var(--cream-ink) !important; color:var(--cream) !important; }
/* rebuild collage as torn paper pieces */
.mag-collage{ height:clamp(320px,36vw,420px); }
.mag-piece{ box-shadow:0 18px 40px -20px rgba(0,0,0,.55); }
/* torn edges via clip-path */
.mag-piece-1{ background:linear-gradient(135deg,#d8d5d0,#b3afa9 60%,#cfc8bd); color:#0c0b0a;
clip-path:polygon(0 4%,18% 0,42% 5%,68% 1%,100% 6%,98% 94%,72% 100%,38% 96%,12% 100%,2% 90%); }
.mag-piece-2{ background:var(--amber); color:var(--ink);
clip-path:polygon(0 6%,30% 0,60% 4%,100% 0,96% 90%,64% 100%,28% 95%,0 100%); }
.mag-piece-3{ background:#1c130b; color:#efe7dc; border:0;
clip-path:polygon(2% 0,100% 4%,97% 88%,60% 100%,24% 95%,0 100%,3% 10%); }
.mag-piece-4{ background:#0c0b0a; color:var(--amber);
clip-path:polygon(0 8%,40% 0,100% 6%,94% 100%,30% 96%,0 100%); }
/* newspaper-clip strips of real text behind */
.mag-piece-3::after{ content:'NNZNOT · ISSUE 001'; position:absolute; bottom:.6rem; left:.7rem; font-family:var(--mono); font-size:.5rem; letter-spacing:.18em; color:rgba(239,231,220,.6); }
/* ============================================================
ABBIAMO LAVORATO CON → TRUST PANEL (reuse spec-label look)
============================================================ */
.clients-marquee .lead{ max-width:60ch; }
.clients-trustline{ display:flex; flex-wrap:wrap; gap:1rem 2rem; margin:1.25rem 0 0; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.clients-trustline span{ display:inline-flex; align-items:center; gap:.5rem; }
.clients-trustline span::before{ content:''; width:7px;height:7px;border-radius:50%;background:var(--mint); }
.clients-grid{ border:1px solid var(--line) !important; border-bottom:0 !important; }
.client-logo{ font-family:'Plus Jakarta Sans',sans-serif; }
.client-logo::after{ content:'Cliente'; position:absolute; bottom:12px; right:14px; font-family:var(--mono); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); opacity:0; transition:opacity .3s ease; }
.client-logo:hover::after{ opacity:.6; color:var(--ink); }
/* ============================================================
ORA SU → CINEMA "SALE" (screening rooms)
============================================================ */
#workRows{ counter-reset:sala; }
.work-category{ counter-increment:sala; }
.work-row-head h3{ position:relative; }
.work-row-head h3::before{
content:"Sala " counter(sala,decimal-leading-zero);
display:block;
font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
color:var(--amber); margin-bottom:.5rem;
}
.catalog-intro{
display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
margin:.4rem 0 1.5rem; padding:.7rem 1rem;
border:1px solid var(--line-strong); border-radius:6px;
font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2);
}
.catalog-intro .ci-dot{ width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber);animation:vf-blink 1.6s steps(1) infinite; }
@media (prefers-reduced-motion:reduce){ .catalog-intro .ci-dot{ animation:none; } }
/* ============================================================
FOOTER → white NNZN logo lockup under description
============================================================ */
.footer-logo-mark{ width:120px; height:auto; margin-top:1.25rem; color:#f7f4ee; opacity:.92; }
.footer-logo-mark svg{ width:100%; height:auto; display:block; }
.footer-logo-cap{ display:block; margin-top:.6rem; font-family:var(--mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(247,247,245,.45); }
/* ============================================================
18 · v5 — corrections
============================================================ */
/* REVERT vertical previews: uniform 16/9 cards again */
.video-card.short .thumb-btn{ aspect-ratio:16/9 !important; }
/* Remove auto "Sala 0X" counter (names now in row titles) */
.work-row-head h3::before{ content:none !important; }
/* [PURGE] rimosso .sala-label (elemento eliminato dalla home) */
/* category row titles styled as "Sala …" */
.work-row-head h3{ text-transform:none; }
/* NNZN STUDIOS CINEMA intro line */
.catalog-intro strong{ font-family:var(--mono); }
/* ============================================================
AS SEEN ON · 4 colored paper clippings (white/pink/cream/blue)
============================================================ */
.as-seen-on .aso-collage{ grid-template-columns:repeat(4,1fr); gap:1rem; border-top:0; }
@media (max-width:920px){ .as-seen-on .aso-collage{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .as-seen-on .aso-collage{ grid-template-columns:1fr; } }
.as-seen-on .aso-card{
border:1px solid rgba(26,23,18,.14) !important; border-radius:2px;
padding:1.25rem 1.15rem 1.35rem !important;
box-shadow:0 14px 30px -20px rgba(0,0,0,.5);
position:relative; overflow:hidden;
}
.as-seen-on .aso-card::after{ /* paper grain */
content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
background:repeating-linear-gradient(0deg, rgba(0,0,0,.015) 0 1px, transparent 1px 4px);
}
.as-seen-on .aso-card.paper-white{ background:#f6f3ec; }
.as-seen-on .aso-card.paper-pink{ background:#f3dde0; }
.as-seen-on .aso-card.paper-cream{ background:#ece3cf; }
.as-seen-on .aso-card.paper-blue{ background:#dde7ec; }
.as-seen-on .aso-card:nth-child(odd){ transform:rotate(-.6deg); }
.as-seen-on .aso-card:nth-child(even){ transform:rotate(.6deg); }
.as-seen-on .aso-card:hover{ transform:rotate(0) translateY(-3px); box-shadow:0 22px 44px -22px rgba(0,0,0,.6); z-index:2; }
/* tape on each */
.as-seen-on .aso-card::before{
content:''; display:block; position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-2deg);
width:48px; height:16px; background:rgba(200,132,31,.3); border:1px solid rgba(200,132,31,.25); z-index:2;
}
/* ============================================================
NNZNOT · ordered overlapping torn-paper stack (like reference)
============================================================ */
.mag-collage{ height:clamp(320px,34vw,400px); display:block; }
.mag-piece{
position:absolute; box-shadow:0 16px 38px -20px rgba(0,0,0,.6);
clip-path:none; /* tidy rectangles, neatly overlapped */
border-radius:2px;
}
/* layered deck, consistent overlap + gentle rotation */
.mag-piece-1{ left:4%; top:8%; width:50%; height:78%; transform:rotate(-5deg); z-index:1; }
.mag-piece-2{ left:24%; top:2%; width:46%; height:52%; transform:rotate(3deg); z-index:3; }
.mag-piece-3{ left:40%; top:30%; width:46%; height:62%; transform:rotate(-2deg); z-index:2; }
.mag-piece-4{ left:14%; top:54%; width:34%; height:34%; transform:rotate(5deg); z-index:4; }
/* torn top edge as a thin ripped strip on each */
.mag-piece::before{ content:''; position:absolute; top:0; left:0; right:0; height:6px;
background:repeating-linear-gradient(90deg, transparent 0 3px, rgba(0,0,0,.12) 3px 6px); opacity:.5; }
/* ============================================================
FOOTER logo → small official mark
============================================================ */
.footer-logo-mark{ width:58px !important; height:auto; margin-top:1.1rem; color:#f7f4ee; opacity:.9; display:block; }
.footer-logo-mark svg{ width:58px !important; height:auto; display:block; }
/* ============================================================
SOCIAL HUB · more identitario (NNZN bracket frame + manifesto)
============================================================ */
.sh-header-full{ position:relative; }
.sh-manifesto{
font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
color:var(--amber); margin-top:1.25rem; display:flex; gap:1.25rem; flex-wrap:wrap;
}
.sh-manifesto span{ position:relative; padding-left:1.1rem; }
.sh-manifesto span::before{ content:''; position:absolute; left:0; top:.35em; width:7px;height:7px;background:var(--amber);transform:rotate(45deg); }
/* ============================================================
19 · v6 — corrections
rassegna newsprint (no tape/no color) · clients clean ·
social hub identity+spacing · academy contemporary gradient
============================================================ */
/* --- RASSEGNA: uniform newsprint, no tape, no color --- */
.as-seen-on .aso-card::before{ display:none !important; } /* kill tape */
.as-seen-on .aso-card.paper-white,
.as-seen-on .aso-card.paper-pink,
.as-seen-on .aso-card.paper-cream,
.as-seen-on .aso-card.paper-blue{ background:#f4f0e6 !important; } /* single newsprint */
.as-seen-on .aso-card{
transform:none !important;
border:1px solid rgba(26,23,18,.16) !important;
box-shadow:0 1px 0 rgba(26,23,18,.06);
}
.as-seen-on .aso-card:hover{ transform:translateY(-2px) !important; background:#f7f4ec !important; }
.as-seen-on .aso-card::after{ /* newsprint grain only */
opacity:.6;
background:repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px);
}
/* ============================================================
SOCIAL HUB · identity + spacing + readability
============================================================ */
.sh-manifesto{ margin-bottom:2rem !important; } /* space below manifesto */
.sh-header-ctas{ margin-top:.25rem; }
/* mono catalog code per poster */
.poster-code{
position:relative; z-index:2;
display:inline-block; align-self:flex-start;
font-family:var(--mono); font-size:.54rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
color:rgba(243,236,224,.92);
border:1px solid rgba(243,236,224,.28); border-radius:2px;
padding:.28rem .5rem; margin-bottom:.9rem;
}
.poster-2 .poster-code{ color:#cfe6f2; border-color:rgba(207,230,242,.3); }
/* readability boosts */
.poster-meta{ color:rgba(243,236,224,.72) !important; } /* lift contrast */
.poster-title{ text-shadow:0 2px 14px rgba(0,0,0,.45); }
/* header: stronger identity framing */
.sh-header-full{ position:relative; }
/* ============================================================
20 · v7 — corrections
poster tag emphasis · academy burgundy/ebony/grey · legible
chips · footer negative logo
============================================================ */
/* --- POSTER: emphasize the tag (SOLO SU INVITO / MEMBERSHIP CLUB) --- */
.poster-tag{
font-size:.82rem !important; font-weight:900 !important; letter-spacing:.13em !important;
text-transform:uppercase !important; line-height:1.05; margin-bottom:.55rem !important;
display:inline-flex; align-items:center; gap:.45rem;
}
.poster-tag::before{ content:''; width:8px; height:8px; background:currentColor; transform:rotate(45deg); flex:0 0 auto; }
.poster-1 .poster-tag{ color:#a8cc1e; }
.poster-2 .poster-tag{ color:#c3dd3e; }
.poster-3 .poster-tag{ color:#d7e89a; }
/* ============================================================
FOOTER · negative (white) logo
============================================================ */
.footer-logo-mark{ color:#fff !important; opacity:1 !important; }
.footer-logo-mark svg, .footer-logo-mark svg *{ fill:#fff !important; color:#fff !important; }
/* ============================================================
21 · v8 (corrected) — Academy: GREY gradient + amber CTAs only
light-grey in light theme (matches site), graphite in dark
============================================================ */
/* MAIN (light theme / default): light-grey gradient like the site */
html body #academy.academy-magazine{
background:
radial-gradient(62% 62% at 82% 6%, rgba(255,255,255,.55) 0%, transparent 60%),
linear-gradient(158deg, #eceae7 0%, #e1ded8 54%, #d4d1cb 100%) !important;
}
#academy .academy-ttl{ color:#1a1714 !important; }
#academy .academy-ttl em{ color:var(--amber) !important; font-style:italic; }
#academy .academy-lead, #academy .academy-body{ color:#47423b !important; }
#academy .section-num, #academy .eyebrow{ color:#8a5a16 !important; }
/* skill pills — dark text on light grey (legible) */
#academy .apill{ background:rgba(26,23,20,.05) !important; border:1px solid rgba(26,23,20,.22) !important; color:#2a251e !important; font-weight:600 !important; }
/* give-back chips — amber accent */
#academy .academy-give span{ background:rgba(200,132,31,.15) !important; border:1px solid rgba(200,132,31,.6) !important; color:#7a4d12 !important; }
/* CTA button — solid amber */
#academy .academy-btn{ background:var(--amber) !important; border:1px solid var(--amber) !important; color:#17120a !important; }
#academy .academy-btn:hover{ filter:brightness(1.07); transform:translateY(-1px); }
/* identity frame + code — amber */
/* DARK THEME: graphite grey + light text, amber CTAs persist */
html[data-theme="dark"] body #academy.academy-magazine{
background:
radial-gradient(55% 60% at 82% 12%, rgba(234,230,224,.07) 0%, transparent 58%),
linear-gradient(158deg, #27272b 0%, #1a1a1d 52%, #101012 100%) !important;
}
html[data-theme="dark"] #academy .academy-ttl{ color:#f4f2ee !important; }
html[data-theme="dark"] #academy .academy-lead,
html[data-theme="dark"] #academy .academy-body{ color:rgba(236,234,230,.80) !important; }
html[data-theme="dark"] #academy .apill{ background:rgba(235,232,227,.10) !important; border-color:rgba(235,232,227,.42) !important; color:#f1efea !important; }
html[data-theme="dark"] #academy .academy-give span{ background:rgba(200,132,31,.12) !important; color:#f0d6ac !important; }
html[data-theme="dark"] #academy .section-num,
html[data-theme="dark"] #academy .eyebrow{ color:var(--amber) !important; }
/* ============================================================
22 · v9 — featured spec-sheet · sala signage · green fixes
============================================================ */
/* --- FIX green/mint labels (illegible) --- */
#academy .academy-pills .apill:hover{ border-color:rgba(200,132,31,.6) !important; color:var(--text) !important; }
.clients-trustline span::before{ background:var(--amber) !important; }
.academy-pills .apill:hover{ border-color:rgba(200,132,31,.6) !important; }
/* --- FEATURED → SCHEDA TECNICA (only featured / lavoro in evidenza) --- */
.feature-review{ justify-content:flex-start !important; gap:0 !important; }
.fs-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
border-bottom:1px solid var(--line); padding-bottom:.6rem; margin-bottom:.85rem; }
.fs-tag{ font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.fs-code{ font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; color:var(--muted); white-space:nowrap; }
.fs-title{ font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1; letter-spacing:-.03em; font-weight:850; margin:0 0 .95rem; color:var(--text); }
.fs-rows{ display:grid; gap:.45rem; margin:0 0 1rem; }
.fs-rows > div{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
border-bottom:1px dotted var(--line); padding-bottom:.42rem; }
.fs-rows dt{ font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0; }
.fs-rows dd{ margin:0; font-size:.78rem; font-weight:800; color:var(--text); text-align:right; }
.fs-about{ font-size:.85rem; line-height:1.55; color:var(--text-2); margin:0 0 1rem; }
.fs-review{ border-top:1px solid var(--line); padding-top:.85rem; }
.fs-review .review-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:.45rem; }
.fs-review strong{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text); }
.fs-quote{ font-size:.92rem; line-height:1.5; color:var(--text-2); margin:.2rem 0 .55rem; }
.fs-author{ font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:800; margin:0; }
/* --- INTERSTELLAR-POSTER nods on the "sala" works (spec line · regia credit · palette) --- */
/* spec line printed over the featured poster image, like a one-line film credit */
.featured-spec{ font-family:var(--mono); font-size:clamp(.6rem,1vw,.72rem); font-weight:600;
letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.82);
margin-top:.7rem; display:flex; flex-wrap:wrap; gap:.4rem .6rem; }
.featured-spec span{ position:relative; }
.featured-spec span + span::before{ content:"·"; position:absolute; left:-.46rem; opacity:.55; }
/* "un film NNZN Studios" — the director-credit line */
.fs-presents{ font-family:var(--mono); font-size:.56rem; font-weight:700;
letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:0 0 .55rem; }
.fs-presents b{ color:var(--accent); font-weight:700; }
/* the palette swatch strip — the unmistakable poster signature */
.fs-swatch{ display:flex; align-items:center; gap:.6rem; margin-top:.95rem; padding-top:.8rem;
border-top:1px solid var(--line); }
.fs-swatch .sw-label{ font-family:var(--mono); font-size:.52rem; letter-spacing:.2em;
text-transform:uppercase; color:var(--muted); }
.fs-swatch .sw-chips{ display:flex; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.fs-swatch .sw-chips i{ width:clamp(18px,2.2vw,26px); height:13px; display:block; }
/* --- ORA SU → cinema wayfinding SALA SIGNS (different icon per sala) --- */
/* featured = live dot (already on .sala-label); category rows = arrow signs */
#catalog-commercial .work-row-head h3 svg,
#catalog-production .work-row-head h3 svg{ display:none; }
#catalog-commercial .work-row-head h3::before,
#catalog-production .work-row-head h3::before{
font-family:var(--mono); font-weight:800; line-height:.9;
background:var(--amber); color:#17120a;
padding:.34rem .52rem; border-radius:3px; align-self:center;
display:inline-flex; align-items:center; justify-content:center;
box-shadow:0 3px 10px rgba(0,0,0,.16);
}
#catalog-commercial .work-row-head h3::before{ content:"↓" !important; font-size:.85rem; }
#catalog-production .work-row-head h3::before{ content:"↓↓" !important; font-size:.85rem; letter-spacing:-.12em; }
/* [PURGE] rimosso .sala-label plaque (elemento eliminato) */
/* ============================================================
23 · SHARED FOOTER — authoritative styles for the injected
footer on every page. footer.footer beats page-inline .footer.
============================================================ */
footer.footer{
background:#090a0b; color:#f7f7f5;
padding:54px 0 30px; text-align:left;
border-top:0; font-size:1rem; margin-top:0;
}
footer.footer .footer-grid{
display:grid; grid-template-columns:1.3fr .8fr .8fr .8fr .8fr; gap:24px;
}
footer.footer h3{ font-size:.78rem; text-transform:uppercase; letter-spacing:.11em; margin-bottom:12px; }
footer.footer p, footer.footer a{ font-size:.84rem; color:rgba(247,247,245,.64); }
footer.footer a:hover{ color:#fff; }
footer.footer ul{ list-style:none; margin:0; padding:0; }
footer.footer li+li{ margin-top:6px; }
footer.footer .footer-bottom{
display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
border-top:1px solid rgba(255,255,255,.12); margin-top:34px; padding-top:18px;
}
footer.footer .footer-logo-mark{ width:58px; color:#fff; display:block; margin-top:1.1rem; }
footer.footer .footer-logo-mark svg{ width:58px; height:auto; display:block; }
footer.footer .footer-logo-mark svg *{ fill:#fff; }
@media(max-width:1080px){ footer.footer .footer-grid{ grid-template-columns:1fr 1fr 1fr; } }
@media(max-width:680px){ footer.footer .footer-grid{ grid-template-columns:1fr; } }
/* ============================================================
24 · HERO PARALLAX — CSS scroll-driven, zero JS
bg drifts slower than content; copy lifts + fades.
Guarded: only browsers with animation-timeline, only if
the user hasn't asked for reduced motion.
============================================================ */
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.hero{ overflow:hidden; }
.hero-bg{
scale:1.12; /* headroom so the drift never shows edges */
animation:hero-bg-drift linear both;
animation-timeline:scroll(root block);
animation-range:0 100svh; /* completes within first viewport of scroll */
will-change:transform;
}
@keyframes hero-bg-drift{
to{ transform:translateY(14%); }
}
.hero-grid{
animation:hero-copy-lift linear both;
animation-timeline:scroll(root block);
animation-range:0 85svh;
}
@keyframes hero-copy-lift{
to{ transform:translateY(-7%); opacity:.15; }
}
}
}
/* ============================================================
26 · ORA SU — cinema letterboard + ticket tabs (CSS only)
============================================================ */
.catalog-intro{
background:
repeating-linear-gradient(0deg, #1c130b 0 9px, #22180f 9px 10px) !important;
border:6px solid #2a1d12 !important; border-radius:6px !important;
color:#f3ece0 !important;
padding:1.1rem 1.4rem !important;
font-family:var(--mono) !important;
letter-spacing:.3em !important;
box-shadow:inset 0 2px 14px rgba(0,0,0,.55), 0 10px 30px -18px rgba(0,0,0,.4);
text-transform:uppercase;
}
.catalog-intro strong{ color:var(--amber) !important; font-size:.92rem; letter-spacing:.3em !important; }
.catalog-intro .ci-dot{ box-shadow:0 0 12px var(--amber); }
/* tabs as ticket stubs */
.catalog-tabs .tab{
position:relative;
border-radius:4px !important;
font-family:var(--mono);
letter-spacing:.12em !important;
padding:.7rem 1.15rem .7rem 1.45rem !important;
overflow:visible;
}
.catalog-tabs .tab::before{ /* perforation line */
content:''; position:absolute; left:.85rem; top:6px; bottom:6px; width:0;
border-left:1px dashed currentColor; opacity:.45;
}
.catalog-tabs .tab::after{ /* side notch */
content:''; position:absolute; left:-6px; top:50%; transform:translateY(-50%);
width:12px; height:12px; border-radius:50%; background:var(--bg);
border:1px solid var(--line-strong);
}
.catalog-tabs .tab[aria-selected="true"]{
background:var(--amber) !important; color:#17120a !important; border-color:var(--amber) !important;
}
/* ============================================================
27 · ACADEMY BENTO-BAUHAUS
Light-grey ground · black structural grid · vermilion (the Academy
color: never used elsewhere on the site) · geometric primitives.
Theme-proof like the Rassegna.
============================================================ */
:root{ --verm:#cf3f22; --paper:#ebebe9; --ab-ink:#161310; }
.academy-bento{
background:var(--paper); color:var(--ab-ink);
padding:clamp(3.5rem,7vw,6rem) 0;
}
.academy-bento .section-num{ color:var(--ab-ink) !important; opacity:.8; }
/* [PURGE] rimossi .ab-head/.ab-title/.ab-kicker (bento academy eliminato; ora .acad-*) */
/* [rimosso giu 2026] griglia bento + tile/pitch/claim/lead/ctas/btn/link:
sostituiti dal layout .academy-mk (solo video + CTA). Mantengo .ab-video* (riusato). */
/* B · video */
.ab-video{ grid-area:video; padding:0; background:#0e0c0a; border-color:var(--ab-ink); display:flex; flex-direction:column; }
.ab-video-tag{
display:flex; justify-content:space-between; align-items:center; gap:1rem;
padding:.7rem 1.1rem; background:var(--verm); color:#f6efe3;
font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
}
.ab-video-frame{ position:relative; flex:1; min-height:240px; }
.ab-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ab-video-frame .avp{
position:absolute; inset:0; display:grid; place-items:center; text-align:center;
color:rgba(245,242,237,.55); padding:1.5rem;
}
.ab-video-frame .avp p{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; margin-top:.9rem; }
/* [rimosso giu 2026] .ab-mods / .ab-index: l'indice moduli non è più in home. */
/* ============================================================
28 · annotated fixes — logo clip, sidebar, letterboard,
sprockets, read-more, sala icons, clients row
============================================================ */
/* header logo never clipped */
.nnzn-brand-logo{ display:flex; align-items:center; }
.nnzn-brand-logo svg{ overflow:visible !important; display:block; height:42px; width:auto; }
/* sidebar: Area clienti separated from featured box */
.nnzn-side-link-sub{ display:block; margin-bottom:.4rem !important; }
.nnzn-side-featured{ margin-top:1.4rem !important; position:relative; z-index:0; }
/* letterboard: no dot, interactive sala rows */
.catalog-intro .ci-dot{ display:none !important; }
.catalog-intro{ display:block !important; }
/* [PURGE] rimosso .lb-title (elemento eliminato) */
.lb-rows{ display:flex; flex-wrap:wrap; gap:.25rem 1.6rem; }
.lb-row{
background:none; border:0; cursor:pointer; padding:.2rem 0;
font-family:var(--mono); font-size:.66rem; font-weight:700;
letter-spacing:.22em; text-transform:uppercase; color:rgba(243,236,224,.78);
display:inline-flex; align-items:center; gap:.5rem;
transition:color .2s ease;
}
.lb-row::before{ content:'→'; color:rgba(243,236,224,.4); transition:transform .25s ease,color .2s ease; }
.lb-row:hover, .lb-row:focus-visible{ color:var(--amber); }
.lb-row:hover::before{ color:var(--amber); transform:translateX(3px); }
.lb-row[aria-pressed="true"]{ color:var(--amber); text-shadow:0 0 14px rgba(200,132,31,.5); }
/* filmstrip sprockets: actually visible */
.filmstrip::before,.filmstrip::after{
background-image:repeating-linear-gradient(90deg, transparent 0 14px, rgba(243,236,224,.42) 14px 32px, transparent 32px 46px) !important;
-webkit-mask:none !important; mask:none !important;
height:12px !important; opacity:1 !important;
}
/* featured spec-sheet: read more */
.fs-about.clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fs-more{
background:none; border:0; cursor:pointer; padding:0; margin:-.4rem 0 1rem;
font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:var(--accent); border-bottom:1px solid var(--accent);
}
/* sala signs: content-coherent icons (megaphone / clapperboard) */
#catalog-commercial .work-row-head h3::before,
#catalog-production .work-row-head h3::before{
content:'' !important; width:30px; height:30px; padding:0 !important;
background-color:var(--amber); background-repeat:no-repeat; background-position:center; background-size:17px;
}
#catalog-commercial .work-row-head h3::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317120a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h2l4 4V6L6 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M14 7c2.5 2.5 2.5 7.5 0 10M17.5 4.5c4 4 4 11 0 15'/%3E%3C/svg%3E");
}
#catalog-production .work-row-head h3::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317120a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='11' rx='1.5'/%3E%3Cpath d='M3 9l2.5-5 5 1-2.3 4M10.5 5l5 1-2.3 4M15.5 6l5 1-2 3'/%3E%3C/svg%3E");
}
/* clients: single scrollable row, no shape icons */
.clients-grid{
display:flex !important; grid-template-columns:none !important;
overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none;
gap:0; scroll-snap-type:x proximity;
}
.clients-grid::-webkit-scrollbar{ display:none; }
.client-logo{ flex:0 0 auto; min-width:200px; scroll-snap-align:start; }
.client-logo::before{ display:none !important; }
.client-logo::after{ display:none !important; }
.clients-nav{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:.9rem; }
.clients-nav button{
width:40px; height:40px; border-radius:999px; cursor:pointer;
border:1px solid var(--line-strong); background:var(--ghost); color:var(--text);
display:grid; place-items:center; font-size:1rem; transition:.2s;
}
.clients-nav button:hover{ background:var(--amber); border-color:var(--amber); color:#17120a; }
/* ============================================================
29 · round fixes — TV icon · clients logos · no marquee/sprockets
============================================================ */
/* Sala Commercial: TV icon */
#catalog-commercial .work-row-head h3::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317120a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 3l4 4 4-4'/%3E%3C/svg%3E") !important;
}
/* Clients: no borders, real logo images w/ text fallback */
.client-logo{ border:0 !important; background:transparent !important; box-shadow:none !important; }
.client-logo img{ height:44px; width:auto; display:block; margin-inline:auto; filter:grayscale(1) contrast(1.05); opacity:.85; transition:.25s; }
.client-logo:hover img{ filter:none; opacity:1; }
.client-logo .cl-name{ display:block; }
.client-logo img + .cl-name{ display:none; } /* hide text when logo loads */
/* Social Hub: remove marquee bar + filmstrip decorations */
.sh-strip{ display:none !important; }
.filmstrip::before,.filmstrip::after{ display:none !important; }
.filmstrip{ padding-top:0 !important; padding-bottom:0 !important; }
/* ============================================================
30 · ACADEMY BENTO v2 — dark NNZN, true bento (varied tiles)
============================================================ */
.academy-bento{ background:#101013 !important; color:#f2f0ec; }
.academy-bento .section-num{ color:rgba(242,240,236,.65) !important; }
/* [PURGE giu 2026] rimosso bento academy .abx-* + .ab-title/.ab-kicker (markup eliminato, ora .academy-mk) */
/* 31 · sala icons = NNZN reel (la "ruota" del logo) */
#catalog-commercial .work-row-head h3::before,
#catalog-production .work-row-head h3::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%2317120a' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(45 40 40)'%3E%3Cpath d='M16 28V16H28M52 16H64V28M16 52V64H28M64 52V64H52'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3C/g%3E%3C/svg%3E") !important;
background-size:20px !important;
}
/* ============================================================
32 · sale a colori + academy bento LIGHT
Sala principale = ambra · Commercial = blu acciaio · Production = crema
============================================================ */
:root{ --sala-blue:#3d85a8; --sala-cream:#e9e3d6; }
/* plaque icons per sala */
#catalog-commercial .work-row-head h3::before{ background-color:var(--sala-blue) !important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23f3ece0' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(45 40 40)'%3E%3Cpath d='M16 28V16H28M52 16H64V28M16 52V64H28M64 52V64H52'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3C/g%3E%3C/svg%3E") !important; }
#catalog-production .work-row-head h3::before{ background-color:var(--sala-cream) !important; }
/* tabs per sala (1 featured · 2 commercial · 3 production) */
#catalogTabs .tab:nth-child(2)[aria-selected="true"]{ background:var(--sala-blue) !important; border-color:var(--sala-blue) !important; color:#f3ece0 !important; }
#catalogTabs .tab:nth-child(3)[aria-selected="true"]{ background:var(--sala-cream) !important; border-color:#b8ad97 !important; color:#17120a !important; }
/* letterboard rows per sala */
.lb-row:nth-child(2):hover,.lb-row:nth-child(2)[aria-pressed="true"]{ color:var(--sala-blue); text-shadow:0 0 14px rgba(61,133,168,.5); }
.lb-row:nth-child(2):hover::before{ color:var(--sala-blue); }
.lb-row:nth-child(3):hover,.lb-row:nth-child(3)[aria-pressed="true"]{ color:var(--sala-cream); text-shadow:0 0 14px rgba(233,227,214,.4); }
.lb-row:nth-child(3):hover::before{ color:var(--sala-cream); }
/* ACADEMY BENTO → grigio chiarissimo (override del dark) */
.academy-bento{ background:#ebebe9 !important; color:#1a1815; }
.academy-bento .section-num{ color:rgba(26,24,21,.7) !important; }
/* [PURGE] rimossi override light .abx-* (bento academy eliminato) */
/* 33 · rotella ufficiale sulle targhe (negativa su ambra/blu) */
#catalog-commercial .work-row-head h3::before{
background-image:url('/it/img/rotella-nnzn.png') !important; background-size:20px !important; }
.work-row-head h3 .nnzn-card-mark{ display:none; }
/* [PURGE] rimosse regole .sala-label (elemento eliminato dalla home) */
/* 34 · letterboard wheel selector + CTA readability fix */
.lb-wheel-wrap{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,1.8rem); }
.lb-wheel{ width:clamp(56px,7vw,84px); height:auto; flex:0 0 auto;
transition:transform .7s cubic-bezier(.16,1,.3,1); will-change:transform; }
.lb-rows{ flex-direction:column !important; gap:.3rem !important; align-items:flex-start; }
/* [PURGE] rimosse .abx-cta (bento academy eliminato) */
/* ============================================================
35 · STUDIOS SUB-BRAND LOCKUP (Audi RS / Mercedes AMG logic)
Stesso rombo NNZN, dettaglio-firma + colore + sigla per studio.
Markup:
Social Hub
NNZN-SH
============================================================ */
.nnzn-lockup{ display:inline-flex; align-items:center; gap:clamp(11px,1.5vw,18px);
--lk:var(--studio-main); }
.nnzn-lockup.is-studios{ --lk:var(--studio-main); }
.nnzn-lockup.is-social { --lk:var(--studio-social); }
.nnzn-lockup.is-academy { --lk:var(--studio-academy); }
.nnzn-lockup .lk-sigla{ width:clamp(34px,3.6vw,48px); height:clamp(34px,3.6vw,48px);
flex:0 0 auto; color:var(--lk); overflow:visible; }
.nnzn-lockup .lk-sigla .sg-stroke{ fill:none; stroke:currentColor; stroke-width:5;
stroke-linecap:round; stroke-linejoin:round; }
.nnzn-lockup .lk-sigla .sg-fill{ fill:currentColor; }
.nnzn-lockup .lk-sigla .sg-dot{ fill:currentColor; }
/* Social Hub "live" dot — subtle pulse */
.nnzn-lockup.is-social .lk-sigla .sg-dot{ animation:lk-live 2.2s ease-in-out infinite; transform-origin:40px 40px; }
@keyframes lk-live{ 0%,100%{ opacity:.55; transform:scale(.82); } 50%{ opacity:1; transform:scale(1.08); } }
@media (prefers-reduced-motion:reduce){ .nnzn-lockup .lk-sigla .sg-dot{ animation:none; } }
.nnzn-lockup .lk-text{ display:flex; flex-direction:column; line-height:1; }
.nnzn-lockup .lk-name{ font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-weight:850; letter-spacing:-.035em; color:var(--text);
font-size:clamp(1.35rem,2.4vw,2.05rem); }
.nnzn-lockup .lk-name b{ font-weight:850; opacity:.42; } /* "NNZN" prefix, dimmed */
.nnzn-lockup .lk-code{ font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--lk);
margin-top:.5em; font-weight:600; }
/* When sitting on a dark studio panel, keep the name legible */
.sh-section .nnzn-lockup .lk-name,
.nnzn-lockup.on-dark .lk-name{ color:#f4f0e6; }
/* ============================================================
36 · FEEDBACK GIUGNO 2026 — override autorevoli (caricati per ultimi)
Sostituiscono i blocchi precedenti su: titolo catalogo, cornici nere,
tab, ruota, segnaletica sale, gap, clienti, rassegna.
============================================================ */
/* — "Ora su NNZN Studios Cinema": titolo unico testuale, niente logo inline — */
.catalog-title{ font-size:clamp(2.1rem,5.2vw,4.4rem)!important; line-height:.94!important;
letter-spacing:-.045em!important; white-space:normal!important; overflow:visible!important;
text-overflow:clip!important; display:block!important; max-width:16ch; }
.catalog-title-logo{ display:none!important; }
.catalog-title::after,.catalog-title::before{ content:none!important; display:none!important; }
/* — gap ridotto tra Rassegna e "Lavori selezionati" — */
#catalogo{ padding-top:clamp(26px,3vw,46px)!important; }
/* [rimosso] cornice nera/angoli vivi: la card è ora ridefinita PULITA (design editoriale+vetro)
in fondo allo