/* ============================================================================ KIT "BACHECA" — portale3d.it Lavagna in acciaio con calamite e scotch: oggetti di carta (polaroid, biglietti, timbri, post-it, adesivi) attaccati sopra. Riusato da home, chi-sono e pagine dettaglio. Font a mano: Caveat (caricato con gli altri Google Fonts in ). Immagini: assets/img/bacheca/ (webp generati con Imagen, vedi .claude/piano-bacheca.md). ========================================================================== */ :root{ --bk-ink:#0c0c0c; --bk-paper:#f7f3ea; --bk-paper2:#efe9db; --bk-red:#ff2e2e; --bk-blue:#7fa8d8; --bk-lime:#c8f04b; --bk-mag:#ff2bd6; --bk-frame:#3a3c41; --bk-tape:rgba(255,232,140,.62); --bk-tape-edge:rgba(120,90,10,.18); --bk-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --bk-grunge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* ---------- superfici ---------- */ /* Lavagna in acciaio spazzolato: texture reale (tile 512px) + riflesso anisotropo + graffi + viti. */ .bk-steel{position:relative;background-color:#85888e; background-image: linear-gradient(115deg, rgba(0,0,0,.34) 0%, rgba(255,255,255,.10) 22%, rgba(0,0,0,.22) 38%, rgba(255,255,255,.08) 55%, rgba(0,0,0,.36) 72%, rgba(255,255,255,.07) 88%, rgba(0,0,0,.34) 100%), linear-gradient(rgba(70,72,78,.42), rgba(70,72,78,.42)), url("../img/bacheca/tex-acciaio.webp"); background-size:100% 100%, 100% 100%, 512px 512px; box-shadow:inset 0 0 90px rgba(0,0,0,.38)} .bk-steel::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background: linear-gradient(112deg, transparent 39.6%, rgba(255,255,255,.26) 39.8%, transparent 40.3%), linear-gradient(98deg, transparent 63.2%, rgba(255,255,255,.16) 63.4%, transparent 63.7%), linear-gradient(105deg, transparent 18.1%, rgba(0,0,0,.22) 18.3%, transparent 18.6%)} .bk-steel::after{content:"";position:absolute;inset:0;background:var(--bk-noise);opacity:.42;pointer-events:none;mix-blend-mode:overlay;z-index:0} .bk-steel > *{position:relative;z-index:1} .bk-frame{border:12px solid var(--bk-frame);border-image:linear-gradient(135deg,#5a5d63,#2a2c30 40%,#4b4e54 70%,#212327) 1;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 18px 40px rgba(0,0,0,.5)} .bk-screw{position:absolute;width:16px;height:16px;border-radius:50%;z-index:2; background:radial-gradient(circle at 35% 30%,#d8dadd,#8a8d93 55%,#4c4f55 100%);box-shadow:0 1px 2px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.35)} .bk-screw::before,.bk-screw::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;background:#2a2c30;transform:translate(-50%,-50%) rotate(var(--sr,20deg))} .bk-screw::after{transform:translate(-50%,-50%) rotate(calc(var(--sr,20deg) + 90deg))} .bk-screw.tl{top:8px;left:8px}.bk-screw.tr{top:8px;right:8px;--sr:-35deg}.bk-screw.bl{bottom:8px;left:8px;--sr:60deg}.bk-screw.br{bottom:8px;right:8px;--sr:5deg} /* Carta kraft (footer cartolina) e grana carta */ .bk-kraft{position:relative;background-color:#cbb086;background-image:linear-gradient(120deg,rgba(255,255,255,.14),transparent 40%,rgba(90,60,20,.12)),url("../img/bacheca/tex-kraft.webp");background-size:100% 100%,512px 512px} .bk-kraft::after{content:"";position:absolute;inset:0;background:var(--bk-noise);opacity:.3;pointer-events:none;mix-blend-mode:multiply} .bk-kraft > *{position:relative;z-index:1} .bk-grain::before{content:"";position:absolute;inset:0;background:var(--bk-noise);opacity:.16;pointer-events:none;mix-blend-mode:multiply} /* ---------- attacchi: scotch, calamite ---------- */ .bk-tape{position:absolute;width:92px;height:26px;z-index:4;pointer-events:none;background:var(--bk-tape); background-image:repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,255,255,.14) 6px 7px); box-shadow:0 1px 2px rgba(0,0,0,.18),inset 0 0 0 1px var(--bk-tape-edge);opacity:.95; clip-path:polygon(2% 0,98% 3%,100% 20%,97% 40%,100% 60%,98% 80%,100% 100%,3% 97%,0 80%,3% 60%,0 40%,2% 20%)} .bk-tape.tl{top:-10px;left:-24px;transform:rotate(-38deg)} .bk-tape.tr{top:-10px;right:-24px;transform:rotate(38deg)} .bk-tape.bl{bottom:-10px;left:-24px;transform:rotate(38deg)} .bk-tape.br{bottom:-10px;right:-24px;transform:rotate(-38deg)} .bk-tape.top{top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg);width:110px} .washi-blue{--bk-tape:rgba(127,168,216,.72)} .washi-lime{--bk-tape:rgba(200,240,75,.78)} .washi-mag{--bk-tape:rgba(255,43,214,.62)} .washi-red{--bk-tape:rgba(255,46,46,.66)} .washi-cloth{--bk-tape:rgba(60,60,70,.92);--bk-tape-edge:rgba(0,0,0,.4)} .bk-pin{position:absolute;width:26px;height:26px;border-radius:50%;z-index:5;--mc:var(--bk-red);--md:#8d0f0f; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 3px,rgba(255,255,255,.35) 9px,transparent 12px),radial-gradient(circle at 50% 50%,var(--mc) 0 58%,var(--md) 60% 100%); box-shadow:0 3px 5px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.25),inset 0 -3px 5px rgba(0,0,0,.35)} .bk-pin.blue{--mc:#3d5aff;--md:#1a2a99} .bk-pin.lime{--mc:#b8e02c;--md:#5d7a00} .bk-pin.mag{--mc:var(--bk-mag);--md:#8a0f70} .bk-pin.black{--mc:#2c2c31;--md:#0c0c0c} .bk-bar{position:absolute;width:74px;height:16px;border-radius:3px;z-index:5;background:linear-gradient(180deg,#f36a6a,#c8121a 55%,#8d0f0f);box-shadow:0 3px 5px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5)} .bk-bar.blue{background:linear-gradient(180deg,#8fa6ff,#3d5aff 55%,#1a2a99)} /* ---------- oggetti di carta ---------- */ .bk-polaroid{background:#fff;padding:10px 10px 34px;box-shadow:0 8px 18px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.2);position:relative;transform:rotate(var(--r,0deg));color:var(--bk-ink)} .bk-polaroid>img,.bk-polaroid .bk-ph{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#22252b} /* height:auto: altrimenti l'attributo height="480" vince su aspect-ratio; >img: solo la foto diretta, non i loghi/sticker annidati (hanno vero alpha) */ .bk-polaroid .bk-ph{display:grid} .bk-polaroid .cap{font-family:'Caveat',cursive;font-size:clamp(16px,1.55vw,21px);font-weight:500;line-height:1;position:absolute;left:12px;right:12px;bottom:7px;color:#2a2a2a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bk-polaroid.dark{background:#f1efe8} .bk-ph{display:grid;place-items:center;text-align:center;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8e94a0;background:linear-gradient(160deg,#3a3f47,#1d2027)} .bk-stamp{display:inline-block;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:13px;line-height:1; padding:6px 10px;border:3px double currentColor;border-radius:4px;transform:rotate(var(--r,-8deg));color:var(--bk-red);white-space:nowrap; -webkit-mask-image:var(--bk-grunge);mask-image:var(--bk-grunge);-webkit-mask-size:160px;mask-size:160px;opacity:.92} .bk-stamp.blue{color:#2447c9} .bk-stamp.green{color:#1f8f4d} .bk-stamp.amber{color:#c77a00} .bk-note{font-family:'Caveat',cursive;font-weight:500;line-height:1.05;color:#1d1d1d} .bk-postit{position:absolute;background:#fff59a;padding:14px 16px 18px;width:180px;font-family:'Caveat',cursive;font-size:22px;line-height:1.05;color:#2a2200;transform:rotate(var(--r,3deg));box-shadow:2px 6px 14px rgba(0,0,0,.28);background-image:linear-gradient(180deg,rgba(255,255,255,.35),transparent 30%)} .bk-postit.pink{background:#ffb8d4} /* Adesivo: png/webp su bianco → multiply su carta chiara (sparisce il fondo), cerchio bianco su fondi scuri. */ .bk-sticker{position:absolute;display:block;transform:rotate(var(--r,0deg));pointer-events:none;z-index:4} .bk-sticker img{display:block;width:100%;height:auto;mix-blend-mode:multiply;filter:drop-shadow(0 3px 4px rgba(0,0,0,.28))} .bk-sticker.round{border-radius:50%;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.3);overflow:hidden;padding:6%} .bk-sticker.round img{mix-blend-mode:normal;filter:none;border-radius:50%} /* Logo reale come calamita "nuda": niente cornice/cartoncino — il fondo bianco del file sparisce con multiply (bianco = trasparente), resta solo il disegno con un'ombra sotto. */ /* Logo con vero alpha (ritagliati dallo sfondo bianco): niente multiply, il vetro è già trasparente — solo un'ombra sotto per farlo "staccare" dalla lavagna come un adesivo vero. */ .bk-sticker.badge{background:none;box-shadow:none;padding:0} .bk-sticker.badge img{mix-blend-mode:normal;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));border-radius:0;aspect-ratio:3/2;object-fit:contain} /* ============================================================================ HERO / NEWS — la lavagna in cima alla home ========================================================================== */ .news{background:var(--bk-frame);color:#fff;padding-top:58px} .news .bk-board{padding:40px 0 44px;overflow:hidden} .bk-mast{position:relative;margin:0 auto 30px;max-width:760px;background:var(--bk-paper);color:var(--bk-ink);text-align:center;padding:28px 28px 24px;transform:rotate(-.6deg);box-shadow:0 10px 24px rgba(0,0,0,.4)} .bk-mast::before{content:"";position:absolute;inset:0;background:var(--bk-noise);opacity:.18;pointer-events:none;mix-blend-mode:multiply} .bk-mast .bk-bar{top:-8px;left:50%;transform:translateX(-50%) rotate(-1deg)} .bk-mast .eyebrow{font-family:'Oswald';font-size:12px;letter-spacing:.4em;color:var(--bk-red);font-weight:700} .bk-mast h1{font-family:'Oswald';font-weight:700;font-size:clamp(52px,9vw,112px);line-height:.9;letter-spacing:-.01em;margin:6px 0 8px;text-wrap:balance} .bk-mast .sub{font-family:'Bodoni Moda';font-style:italic;font-size:clamp(15px,2vw,21px);color:#333;max-width:52ch;margin:0 auto} .bk-mast .under{position:absolute;right:34px;bottom:14px;font-family:'Caveat',cursive;font-size:22px;font-weight:700;color:var(--bk-red);transform:rotate(-4deg);white-space:nowrap} .bk-collage{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px;padding:14px 8px 10px;align-items:start} .bk-collage .bk-polaroid{margin-top:var(--mt,0)} .bk-collage .bk-pin{top:-11px;left:50%;margin-left:-13px} .bk-collage .tag{position:absolute;top:18px;left:18px;background:var(--bk-ink);color:#fff;font-family:'Oswald';font-size:10px;letter-spacing:.16em;padding:3px 7px;z-index:2} .bk-collage .tag.c{background:#3d5aff}.bk-collage .tag.g{background:#ff5da2}.bk-collage .tag.m{background:#c026d3}.bk-collage .tag.s{background:var(--bk-red)} .bk-collage .bk-sticker{width:96px;height:96px;right:-14px;top:-30px;--r:12deg} .bk-collage .bk-sticker.alt{right:auto;left:-16px;top:auto;bottom:-6px;width:86px;height:86px;--r:-9deg} .bk-collage .bk-sticker.badge{width:124px;height:auto;right:-18px;top:-26px;--r:9deg} /* Novità = biglietti tenuti da calamite (il carosello .nov-* resta quello di index.php) */ .news .nov{padding:30px 8px 0} .news .nov-h{color:#14151a;text-shadow:0 1px 0 rgba(255,255,255,.25);font-weight:700} .news .nov-h em{font-family:'Caveat',cursive;font-size:20px;letter-spacing:0;font-weight:500;text-transform:none;color:#1e1f24} .news .nov-track{padding:14px 4px 10px;gap:14px} .news .ncard{position:relative;display:grid;grid-template-columns:34px 1fr;padding:0;background:var(--bk-paper);color:var(--bk-ink);border:0;transform:rotate(var(--r,0deg));box-shadow:0 6px 14px rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s; -webkit-mask-image:radial-gradient(circle at 34px 0,transparent 8px,#000 8.5px),radial-gradient(circle at 34px 100%,transparent 8px,#000 8.5px); mask-image:radial-gradient(circle at 34px 0,transparent 8px,#000 8.5px),radial-gradient(circle at 34px 100%,transparent 8px,#000 8.5px); -webkit-mask-composite:source-in;mask-composite:intersect} .news .ncard:hover{background:#fff;color:var(--bk-ink);transform:rotate(0deg) translateY(-3px);box-shadow:0 12px 22px rgba(0,0,0,.4)} .news .ncard .stub{writing-mode:vertical-rl;transform:rotate(180deg);font-family:'Oswald';font-size:11px;letter-spacing:.2em;font-weight:700;color:#fff;display:grid;place-items:center;border-right:2px dashed rgba(0,0,0,.35);background:var(--bk-ink)} .news .ncard.t-code .stub{background:#3d5aff}.news .ncard.t-game .stub{background:#ff5da2}.news .ncard.t-music .stub{background:#c026d3}.news .ncard.t-live .stub{background:var(--bk-red)} .news .ncard .bd{padding:12px 14px 12px} .news .ncard .when{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.08em;color:#666;margin-bottom:4px} .news .ncard:hover .when{color:#666} .news .ncard h3{font-family:'Oswald';font-weight:600;font-size:15px;line-height:1.15} .news .ncard .bk-pin{width:16px;height:16px;top:-7px;right:12px} .news .nov-ar{background:var(--bk-paper);border-color:var(--bk-ink);box-shadow:0 3px 8px rgba(0,0,0,.35)} /* Logo in nav come etichetta di carta */ nav .lg.bk-tag{background:var(--bk-paper);color:var(--bk-ink);padding:3px 12px;transform:rotate(-1.5deg);box-shadow:1px 2px 0 rgba(0,0,0,.35)} nav .lg.bk-tag b{color:var(--bk-red)} /* ---------- responsive ---------- */ @media(max-width:900px){ .bk-collage{grid-template-columns:repeat(2,1fr)} } @media(max-width:760px){ .news .bk-board{padding:26px 0 30px} .bk-mast{padding:22px 16px 20px} .bk-mast .under{position:static;display:block;margin-top:10px;transform:rotate(-2deg);font-size:21px} .bk-collage{gap:22px 14px;padding:10px 0 0} .bk-collage .bk-polaroid{margin-top:0} .bk-polaroid,.news .ncard,.bk-mast{transform:rotate(calc(var(--r,0deg) / 2))} .bk-tape{width:70px;height:20px} .bk-collage .bk-sticker{width:70px;height:70px;right:-8px;top:-22px} .bk-collage .bk-sticker.alt{width:64px;height:64px} .bk-collage .bk-sticker.badge{width:92px;right:-10px;top:-18px} .bk-polaroid{padding:7px 7px 40px} .bk-polaroid .cap{font-size:16px;line-height:.95;left:9px;right:9px;bottom:6px;white-space:normal;overflow:visible;text-overflow:clip;max-height:2em} .bk-collage .bk-sticker.alt{left:auto;right:-8px;top:-18px;bottom:auto} .bk-collage .tag{top:12px;left:12px} .news .ncard h3{font-size:16px} .news .ncard .bd{padding:14px 14px} } /* ============================================================================ FIUMI — via lo "shine" in loop, resta l'acqua canvas ========================================================================== */ .river .shine{display:none} /* ============================================================================ 2. CODE — thumb come polaroid con washi blu, stato come timbro ========================================================================== */ .ed .lede .ed-note{display:inline-block;margin-left:12px;color:var(--bk-blue);font-size:22px;transform:rotate(-4deg);white-space:nowrap;vertical-align:middle} .ed-card{overflow:visible} .ed-card .thumbwrap{padding:22px 22px 6px;position:relative} .ed-card .bk-polaroid{padding:9px 9px 32px} .ed-card .bk-polaroid .thumb{border:0;background:#0e1119} .ed-card .bk-polaroid .cap{font-size:19px;color:#3b3b3b;right:112px} /* spazio a destra per il timbro */ .ed-card .stampwrap{position:absolute;right:30px;bottom:12px;z-index:6} .ed-card .thumb .sdots{bottom:8px} .ed-card .gifbadge{top:8px;left:8px} .ed-card:hover .bk-polaroid{transform:rotate(0deg)} .ed-card .bk-polaroid{transition:transform .3s} /* ============================================================================ 3. GAMES — screenshot in polaroid con washi lime, GIOCA ORA come biglietto da strappare ========================================================================== */ .gbig{overflow:visible} .gbig .shots{padding:34px 30px 30px;display:grid;place-items:center;min-height:0} .gbig .shots .bk-polaroid.gpol{width:min(100%,520px)} .gbig .shots .frames{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0f0f0f} .gbig .shots .frames .f{position:absolute;inset:0} .gbig .shots .bk-polaroid .cap{font-size:20px;color:#3b3b3b} .gbig .shots .gm-mascot{width:104px;height:104px;right:14px;bottom:10px;--r:-10deg} .gbig .shots > .stampwrap{position:absolute;top:14px;right:14px;z-index:6} .gbig .ginfo{position:relative} .gbig .ginfo .playtix{display:grid;grid-template-columns:1fr 54px;padding:0; -webkit-mask-image:radial-gradient(circle at calc(100% - 54px) 0,transparent 7px,#000 7.5px),radial-gradient(circle at calc(100% - 54px) 100%,transparent 7px,#000 7.5px); mask-image:radial-gradient(circle at calc(100% - 54px) 0,transparent 7px,#000 7.5px),radial-gradient(circle at calc(100% - 54px) 100%,transparent 7px,#000 7.5px); -webkit-mask-composite:source-in;mask-composite:intersect} .gbig .ginfo .playtix span{padding:12px 20px;letter-spacing:.04em} .gbig .ginfo .playtix small{border-left:2px dashed #0f0f0f;display:grid;place-items:center;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;writing-mode:vertical-rl;transform:rotate(180deg);background:#ffd0e6;font-weight:500} .gsoon{position:relative;border:0;background:#fff59a;color:#2a2200;font-family:'Caveat',cursive;font-weight:700;font-size:26px;line-height:1.1;padding:26px 30px;transform:rotate(-.8deg);box-shadow:2px 6px 14px rgba(0,0,0,.25);text-transform:none;max-width:720px;margin-inline:auto} .gsoon::before{content:"";position:absolute;top:-10px;left:50%;width:90px;height:24px;transform:translateX(-50%) rotate(-2deg);background:var(--bk-tape);opacity:.95; clip-path:polygon(2% 0,98% 3%,100% 20%,97% 40%,100% 60%,98% 80%,100% 100%,3% 97%,0 80%,3% 60%,0 40%,2% 20%)} /* ============================================================================ 4. MUSIC — video come flyer spillati, playlist come scaletta a mano ========================================================================== */ .mu .mc.flyer{position:relative;background:#f1ecff;color:#140a22;border:0;padding:12px 12px 16px;transform:rotate(var(--r,0deg));box-shadow:0 14px 30px rgba(0,0,0,.5);transition:transform .25s,box-shadow .25s} .mu .mc.flyer::before{content:"";position:absolute;inset:0;background:var(--bk-noise);opacity:.2;pointer-events:none;mix-blend-mode:multiply} .mu .mc.flyer:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 18px 36px rgba(0,0,0,.55);border-color:transparent} .mu .mc.flyer .staple{position:absolute;width:22px;height:6px;border:2px solid #8a8a99;border-radius:2px;background:linear-gradient(#e6e6ee,#a9a9b8);left:18px;top:-3px;transform:rotate(-6deg);z-index:5} .mu .mc.flyer .staple.r{left:auto;right:18px;transform:rotate(5deg)} .mu .mc.flyer .mhd{padding:12px 4px 8px;order:2} .mu .mc.flyer .mhd .g{color:#7a1f8f} .mu .mc.flyer .mhd h3{color:#140a22} .mu .mc.flyer .vid{order:1;border:0} .mu .mc.flyer .vid .poster::after{display:none} .mu .mc.flyer .bd{order:3;padding:4px 4px 6px} .mu .mc.flyer .bd p{color:#4b3f6b} .mu .mc.flyer .tags .tag{border-color:rgba(122,31,143,.45);color:#7a1f8f} .mu .mc.flyer .tags .tag:hover{background:rgba(122,31,143,.1);box-shadow:none} .mu .mc.flyer .storylink{color:#c0128f;border-color:rgba(192,18,143,.5)} .mu .mc.flyer .storylink:hover{color:#7a1f8f;border-color:#7a1f8f} .mu .pltitle{font-family:'Caveat',cursive;font-size:26px;letter-spacing:0;text-transform:none;color:#efe9ff;font-weight:700} .mu .plist{background:#171226;border:1px solid rgba(22,242,255,.25);padding:14px 22px 18px;transform:rotate(.6deg);box-shadow:0 10px 26px rgba(0,0,0,.5);gap:0;position:relative} .mu .plist::before{content:"";position:absolute;inset:0;background:var(--bk-noise);opacity:.12;pointer-events:none} .mu .plrow{border:0;background:transparent;border-bottom:1px dashed rgba(255,255,255,.16);padding:10px 4px;transition:transform .2s,background .2s} .mu .plrow:hover{box-shadow:none;transform:translateX(4px);background:rgba(255,255,255,.03)} .mu .plrow .nm{font-family:'Caveat',cursive;font-size:24px;font-weight:500} .mu .plrow .nm small{font-family:'DM Mono',monospace;font-size:11px} /* ============================================================================ 5. SOCIAL — seconda lavagna: badge attaccati con washi rosso, polaroid, adesivo, post-it ========================================================================== */ .cc{background:var(--bk-frame);color:#fff;padding:0} .cc .bk-board{padding:54px 0 70px;overflow:hidden} .cc .mh{position:relative;margin:0 auto 22px;max-width:620px;background:var(--bk-paper);color:var(--bk-ink);text-align:center;padding:24px 26px 18px;transform:rotate(.7deg);box-shadow:0 10px 24px rgba(0,0,0,.4)} .cc .mh::before{content:"";position:absolute;inset:0;background:var(--bk-noise);opacity:.18;pointer-events:none;mix-blend-mode:multiply} .cc .mh .bk-bar{top:-8px;left:50%;transform:translateX(-50%) rotate(1deg)} .cc .mh .eyebrow{font-family:'Oswald';font-size:12px;letter-spacing:.4em;color:var(--bk-red);font-weight:700} .cc .mh h2{font-family:'Oswald';font-weight:700;font-size:clamp(34px,6vw,70px);line-height:.95;letter-spacing:-.01em;margin:6px 0 4px} .cc .mh .sub{font-family:'Bodoni Moda';font-style:italic;font-size:clamp(15px,2vw,19px);color:#333;margin:0 auto;max-width:44ch} .cc .stripe{width:fit-content;margin:0 auto 40px;padding:8px 18px;transform:rotate(-.8deg);box-shadow:0 4px 10px rgba(0,0,0,.35)} .cc-items{position:relative;display:grid;grid-template-columns:1.2fr 1.2fr .9fr;gap:34px 30px;align-items:start;padding:10px 20px 20px} .bk-badge{position:relative;background:#fff;padding:14px;transform:rotate(var(--r,0deg));box-shadow:0 10px 22px rgba(0,0,0,.35);transition:transform .25s,box-shadow .25s} .bk-badge:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 16px 30px rgba(0,0,0,.4)} .bk-badge:nth-child(2){margin-top:26px} .bk-badge .p3d-badge{display:block} .cc-side{position:relative;min-height:330px} .cc-side .bk-polaroid{width:min(190px,100%);position:absolute;left:0;top:0} .cc-side .cc-mic{width:84px;height:84px;left:170px;top:-24px;--r:14deg} .cc-side .bk-postit{left:120px;top:215px;--r:-4deg} /* ============================================================================ FOOTER — retro di cartolina su carta kraft ========================================================================== */ .ft.bk-kraft{color:var(--bk-ink);padding:70px 0 40px} .postcard{position:relative;background:#f9f5ea;display:grid;grid-template-columns:1.15fr 1fr;box-shadow:0 14px 34px rgba(0,0,0,.35);transform:rotate(-.5deg);border:1px solid rgba(0,0,0,.12)} .postcard::before{content:"";position:absolute;inset:0;background:var(--bk-noise);opacity:.14;pointer-events:none;mix-blend-mode:multiply} .postcard .msg{padding:36px 34px 34px;border-right:2px solid rgba(0,0,0,.35);position:relative} .ft .postcard .msg h2{font-family:'Oswald';font-weight:700;font-size:clamp(30px,5vw,54px);letter-spacing:-.01em;line-height:1;margin-bottom:14px;color:var(--bk-ink)} .ft .postcard .msg p.hand{font-family:'Caveat',cursive;font-size:25px;line-height:1.1;color:#26221b;max-width:34ch;margin-bottom:22px} .ft .postcard .lk{margin-bottom:0} .ft .postcard .lk a{border:2px solid var(--bk-ink);color:var(--bk-ink);font-size:13px;padding:11px 18px} .ft .postcard .lk a:hover{background:var(--bk-ink);color:#fff} .postcard .msg .bk-stamp{position:absolute;right:26px;top:26px;font-size:11px;--r:-6deg} .postcard .addr{padding:200px 30px 34px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;min-height:360px} /* padding-top: spazio per francobollo + annullo sopra le righe */ .postcard .addr .line{border-bottom:1.5px solid rgba(0,0,0,.45);height:34px;font-family:'Caveat',cursive;font-size:23px;padding-left:6px;color:#26221b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .postcard .stampbox{position:absolute;top:24px;right:26px;width:96px;height:112px;background:#fff;padding:6px; -webkit-mask:radial-gradient(circle,transparent 4px,#000 4.5px) -6px -6px/16px 16px;mask:radial-gradient(circle,transparent 4px,#000 4.5px) -6px -6px/16px 16px} .postcard .stampbox img{display:block;width:100%;height:100%;object-fit:cover} .postcard .postmark{position:absolute;top:44px;right:96px;width:120px;height:120px;border:2px solid rgba(20,20,60,.6);border-radius:50%;display:grid;place-items:center;font-family:'Oswald';font-size:11px;letter-spacing:.18em;color:rgba(20,20,60,.7);text-align:center;transform:rotate(-14deg);line-height:1.4; -webkit-mask-image:var(--bk-grunge);mask-image:var(--bk-grunge);-webkit-mask-size:120px;mask-size:120px} .postcard .postmark::before{content:"";position:absolute;inset:6px;border:1.5px solid rgba(20,20,60,.6);border-radius:50%} .postcard .postmark b{display:block;font-size:15px} .ft.bk-kraft .sitemap{margin-top:50px;border-top:1px solid rgba(0,0,0,.25)} .ft.bk-kraft .sitemap h3{color:#5a4a33} .ft.bk-kraft .sitemap a{color:#2e2518} .ft.bk-kraft .sitemap a:hover{color:var(--bk-ink);border-color:var(--bk-ink)} .ft.bk-kraft .bot{border-top:1px solid rgba(0,0,0,.25);color:#5a4a33} .ft.bk-kraft .bot a:hover{color:var(--bk-ink);border-color:var(--bk-ink)} @media(max-width:900px){ .cc-items,.postcard{grid-template-columns:1fr} .cc-side{min-height:300px;margin-top:20px} .postcard .msg{border-right:none;border-bottom:2px solid rgba(0,0,0,.35)} } @media(max-width:760px){ .cc .bk-board{padding:34px 0 40px} .cc .mh{padding:20px 16px 16px} .cc .stripe{font-size:10px;letter-spacing:.14em} .cc-items{padding:10px 0 0;gap:26px 16px} .bk-badge{width:fit-content;max-width:100%;margin-inline:auto} .bk-badge:nth-child(2){margin-top:0} .cc-side{min-height:280px} .cc-side .bk-polaroid{width:160px} .cc-side .cc-mic{left:140px;top:-18px;width:70px;height:70px} .cc-side .bk-postit{left:110px;top:190px;width:170px;font-size:20px} .postcard .msg{padding:26px 20px 24px} .postcard .msg .bk-stamp{position:static;display:inline-block;margin-top:16px} .postcard .addr{padding:190px 20px 26px;min-height:300px} .postcard .addr .line{font-size:20px} .postcard .postmark{right:20px;top:150px;width:100px;height:100px;font-size:10px} .ed .lede .ed-note{display:block;margin:10px 0 0;transform:rotate(-2deg)} .ed-card .thumbwrap{padding:16px 16px 4px} .ed-card .stampwrap{right:22px;bottom:10px} .gbig .shots{padding:26px 18px 22px} .gbig .shots .gm-mascot{width:76px;height:76px;right:6px;bottom:4px} .gbig .shots > .stampwrap{top:10px;right:10px} .gbig .shots > .stampwrap .bk-stamp{font-size:11px;padding:4px 7px} .gsoon{font-size:22px;padding:22px 20px} .mu .plrow .nm{font-size:21px} } @media(prefers-reduced-motion:reduce){ .bk-polaroid,.news .ncard,.mu .mc.flyer,.mu .plrow{transition:none} }