/* ===== Bottoni: rettangolari arrotondati, ombra dura che "si preme" ===== */ .xc-btn { display: inline-block; cursor: pointer; font-family: var(--xc-font-display); font-weight: 800; text-transform: uppercase; font-size: 1rem; letter-spacing: .04em; color: var(--xc-ink); background: var(--xc-orange); border: var(--xc-border-w) solid var(--xc-ink); border-radius: var(--xc-radius-sm); padding: .8em 1.6em; box-shadow: var(--xc-shadow); transition: transform .12s, box-shadow .12s; } .xc-btn:hover { background: var(--xc-orange-hot); text-decoration: none; } .xc-btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--xc-ink); } .xc-btn:focus-visible { outline: 3px solid var(--xc-orange); outline-offset: 3px; } .xc-btn--outline { background: transparent; color: var(--xc-cream); border-color: var(--xc-purple); box-shadow: var(--xc-shadow-purple); } .xc-btn--outline:hover { background: var(--xc-purple); color: var(--xc-ink); } .xc-btn--sm { font-size: .85rem; padding: .55em 1.1em; box-shadow: var(--xc-shadow-sm); } .xc-btn--lg { font-size: 1.15rem; padding: .9em 1.9em; } .xc-btn--block { display: block; width: 100%; text-align: center; } /* ===== Header sticky ===== */ /* Header full-width, figlio diretto di : la nav mobile absolute si estende su tutta la viewport */ .xc-header { position: sticky; top: 0; z-index: 50; background: rgba(22, 16, 31, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: var(--xc-border-w) solid var(--xc-ink); transition: padding .25s; } .xc-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--xc-s3); padding-block: .8rem; } .xc-header.is-compact .xc-header__inner { padding-block: .35rem; } .xc-header__logo img { height: 52px; width: auto; transition: height .25s; } .xc-header.is-compact .xc-header__logo img { height: 40px; } .xc-header__nav { display: flex; align-items: center; gap: var(--xc-s3); } .xc-header__nav a:not(.xc-btn) { color: var(--xc-cream); font-weight: 600; font-size: .95rem; } .xc-header__nav a[aria-current="page"] { color: var(--xc-orange); } .xc-header__burger { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; min-width: 44px; min-height: 44px; } .xc-header__burger span { display: block; width: 26px; height: 3px; background: var(--xc-cream); margin: 5px 0; border-radius: 2px; } @media (max-width: 767px) { .xc-header__burger { display: block; } .xc-header__nav { display: none; position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: flex-start; padding: var(--xc-s3); background: var(--xc-bg-raised); border-bottom: var(--xc-border-w) solid var(--xc-ink); } .xc-header__nav.is-open { display: flex; } } /* ===== Balloon (fumetto con coda) ===== */ .xc-balloon { position: relative; background: var(--xc-cream); color: var(--xc-ink); border: var(--xc-border-w) solid var(--xc-ink); border-radius: var(--xc-radius); padding: var(--xc-s3); box-shadow: var(--xc-shadow); } .xc-balloon::after { content: ""; position: absolute; left: 38px; bottom: -16px; border: 9px solid transparent; border-top-color: var(--xc-ink); border-bottom: 0; } .xc-balloon__title { font-size: 1.05rem; margin-bottom: .4rem; } .xc-balloon--purple { background: var(--xc-purple); color: var(--xc-cream); } /* ===== Carta (63:88) + effetto holo ===== */ /* niente overflow:hidden — l'onomatopea sticker sporge volutamente dal bordo */ .xc-card { position: relative; aspect-ratio: 63 / 88; background: var(--xc-bg-raised); color: var(--xc-text); border: var(--xc-border-w) solid var(--xc-ink); border-radius: var(--xc-radius); box-shadow: var(--xc-shadow-purple); padding: var(--xc-s3); display: flex; flex-direction: column; gap: var(--xc-s1); } /* Da usare sempre insieme a .xc-card (serve il suo position:relative) */ .xc-holo-card { transition: transform .25s ease; transform-style: preserve-3d; will-change: transform; } .xc-holo-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--xc-holo); background-size: 220% 220%; background-position: var(--mx, 50%) var(--my, 50%); mix-blend-mode: color-dodge; opacity: 0; transition: opacity .3s; } .xc-holo-card:hover::after { opacity: .35; } /* ===== Onomatopea sticker ===== */ .xc-onoma { position: absolute; top: -12px; right: -8px; z-index: 2; transform: rotate(8deg); font-family: var(--xc-font-display); font-weight: 800; font-size: .8rem; background: var(--xc-orange); color: var(--xc-ink); border: var(--xc-border-w) solid var(--xc-ink); border-radius: 999px; padding: .3em .8em; box-shadow: var(--xc-shadow-sm); } .xc-onoma--purple { background: var(--xc-purple); color: var(--xc-cream); } /* ===== Anatomia trading card (.xc-tcard, da combinare con .xc-card) ===== Cornice doppia: bordo china esterno (xc-card) + bordo accento interno, barra titolo, art window, type line, gemma rarità, velo foil. */ .xc-tcard { padding: .55rem; gap: 0; } .xc-tcard__inner { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; border: 2px solid color-mix(in srgb, var(--world-accent, var(--xc-purple)) 65%, transparent); border-radius: calc(var(--xc-radius) - 6px); padding: .55rem; background: linear-gradient(172deg, color-mix(in srgb, var(--world-accent, var(--xc-purple)) 14%, var(--xc-bg-raised)), var(--xc-bg-raised) 58%); } .xc-tcard__titlebar { display: flex; align-items: center; justify-content: space-between; gap: .5em; background: var(--world-accent, var(--xc-purple)); color: var(--xc-ink); border: 2px solid var(--xc-ink); border-radius: 7px; padding: .14em .55em; box-shadow: 2px 2px 0 var(--xc-ink); } .xc-tcard__name { font-size: .95rem; line-height: 1.15; letter-spacing: .01em; margin: 0; color: inherit; } .xc-tcard__hp { font-family: var(--xc-font-display); font-weight: 800; font-size: .68rem; white-space: nowrap; } .xc-tcard__art { position: relative; flex: 1; min-height: 0; overflow: hidden; border: 2px solid var(--xc-ink); border-radius: var(--xc-radius-sm); background: radial-gradient(circle at 30% 16%, color-mix(in srgb, var(--world-accent, var(--xc-purple)) 48%, transparent), transparent 62%), radial-gradient(rgba(13, 8, 19, .4) 1px, transparent 1.4px), linear-gradient(165deg, color-mix(in srgb, var(--world-accent, var(--xc-purple)) 30%, var(--xc-bg)), var(--xc-bg) 80%); background-size: auto, 8px 8px, auto; } .xc-tcard__art > svg { position: absolute; inset: 0; width: 100%; height: 100%; } .xc-tcard__art--promo { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(13, 8, 19, 0) 30%, rgba(13, 8, 19, .6) 92%), repeating-conic-gradient(rgba(255, 247, 4, .9) 0deg 11deg, var(--xc-purple-deep) 11deg 22deg); background-size: auto, auto; } .xc-tcard__art--promo img { position: relative; width: 80%; height: auto; filter: drop-shadow(3px 3px 0 var(--xc-ink)); } .xc-tcard__type { display: flex; justify-content: space-between; gap: .6em; font-family: var(--xc-font-display); font-weight: 800; font-size: .6rem; text-transform: uppercase; letter-spacing: .13em; color: color-mix(in srgb, var(--world-accent, var(--xc-purple)) 78%, white); } .xc-tcard__gem { position: absolute; right: 13px; bottom: 13px; z-index: 2; width: 13px; height: 13px; background: var(--world-accent, var(--xc-purple)); border: 2px solid var(--xc-ink); transform: rotate(45deg); box-shadow: inset -2px -2px 0 rgba(13, 8, 19, .45); } .xc-tcard__sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--xc-holo); background-size: 240% 240%; background-position: 20% 30%; mix-blend-mode: screen; opacity: .08; } /* ===== Chip sticker (data e luogo nell'hero) ===== */ .xc-chip { display: inline-block; font-family: var(--xc-font-display); font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; line-height: 1.3; border: 2px solid var(--xc-ink); border-radius: var(--xc-radius-sm); padding: .42em .85em; box-shadow: 3px 3px 0 var(--xc-ink); } .xc-chip--date { background: var(--xc-cream); color: var(--xc-ink); transform: rotate(-2deg); } .xc-chip--venue { background: var(--xc-purple); color: var(--xc-cream); transform: rotate(1.4deg); } /* ===== Mensola sticker (divisorio firma Expo Card) ===== Striscia DRITTA dal bordo strappato con badge inclinati uno a uno e angoli di nastro adesivo: niente fasce ruotate, niente testo che scorre. NIENTE clip-path: i bordi strappati sono SVG inerti (helpers.php), così i tween GSAP sugli sticker non possono mai far "saltare" il clip durante il compositing (flicker dentato/dritto visto al load). */ .xc-shelf { position: relative; z-index: 4; margin-block: -3.2rem -0.6rem; } .xc-shelf__edge { display: block; width: 100%; height: 30px; fill: var(--xc-cream); } /* sovrapposizione di 1px per evitare hairline tra bordo SVG e corpo */ .xc-shelf__edge--top { margin-bottom: -1px; } .xc-shelf__edge--bottom { margin-top: -1px; } .xc-shelf__body { padding: .9rem var(--xc-s3) 1.1rem; background: radial-gradient(rgba(13, 8, 19, .07) 1.3px, transparent 1.6px) 0 0 / 13px 13px, var(--xc-cream); } .xc-shelf__row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.1rem 2.4rem; } .xc-sticker { position: relative; display: inline-flex; align-items: center; gap: .55em; font-family: var(--xc-font-display); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .06em; line-height: 1.2; border: var(--xc-border-w) solid var(--xc-ink); border-radius: var(--xc-radius-sm); padding: .55em 1.05em; box-shadow: 4px 4px 0 rgba(13, 8, 19, .75); } .xc-shelf__row li:nth-child(5n + 1) { transform: rotate(-3.5deg); } .xc-shelf__row li:nth-child(5n + 2) { transform: rotate(2deg); } .xc-shelf__row li:nth-child(5n + 3) { transform: rotate(-1.5deg); } .xc-shelf__row li:nth-child(5n + 4) { transform: rotate(3deg); } .xc-shelf__row li:nth-child(5n + 5) { transform: rotate(-2.5deg); } .xc-sticker--orange { background: var(--xc-orange); color: var(--xc-ink); } .xc-sticker--hot { background: var(--xc-orange-hot); color: var(--xc-ink); } .xc-sticker--purple { background: var(--xc-purple); color: var(--xc-cream); } .xc-sticker--dark { background: var(--xc-bg-raised); color: var(--xc-cream); } .xc-sticker__icon { flex: none; } .xc-sticker__tape { position: absolute; width: 34px; height: 13px; background: rgba(255, 244, 230, .58); border: 1px solid rgba(13, 8, 19, .25); box-shadow: 0 1px 2px rgba(13, 8, 19, .18); } .xc-sticker__tape--tl { left: -13px; top: -7px; transform: rotate(-42deg); } .xc-sticker__tape--br { right: -13px; bottom: -7px; transform: rotate(-42deg); } /* timbro inchiostro con data, come stampigliato sulla striscia */ .xc-shelf__stamp { font-family: var(--xc-font-display); font-weight: 800; text-transform: uppercase; font-size: .8rem; letter-spacing: .1em; color: rgba(13, 8, 19, .82); border: 2px dashed rgba(13, 8, 19, .55); border-radius: var(--xc-radius-sm); padding: .45em .9em; white-space: nowrap; } @media (max-width: 600px) { .xc-shelf__body { padding-inline: var(--xc-s2); } .xc-shelf__edge { height: 20px; } .xc-shelf__row { gap: .9rem 1.3rem; } .xc-sticker { font-size: .88rem; padding: .5em .85em; } .xc-shelf__stamp { order: 9; flex-basis: 100%; text-align: center; border: 0; } } /* ===== Micro-divisorio zigzag con onomatopee sparse ===== */ .xc-zigzag { position: relative; z-index: 5; height: 96px; margin-block: -1.6rem; pointer-events: none; color: var(--xc-purple); } .xc-zigzag__line { position: absolute; left: 4%; top: 50%; width: 92%; height: 24px; transform: translateY(-50%); opacity: .85; } .xc-zigzag__pop { position: absolute; box-shadow: 3px 3px 0 var(--xc-ink); } .xc-zigzag__pop--0 { left: 14%; top: 8px; right: auto; transform: rotate(-7deg); } .xc-zigzag__pop--1 { left: 47%; top: 52px; right: auto; transform: rotate(4deg); } .xc-zigzag__pop--2 { left: 78%; top: 14px; right: auto; transform: rotate(-4deg); } /* ===== FAQ accordion (details/summary in salsa fumetto) ===== */ .xc-faq { max-width: 720px; margin-inline: auto; display: grid; gap: var(--xc-s2); } .xc-faq__item { background: var(--xc-cream); color: var(--xc-ink); border: var(--xc-border-w) solid var(--xc-ink); border-radius: var(--xc-radius); box-shadow: var(--xc-shadow); interpolate-size: allow-keywords; } .xc-faq__item:nth-child(odd) { transform: rotate(-.4deg); } .xc-faq__item:nth-child(even) { transform: rotate(.4deg); } .xc-faq__item[open] { box-shadow: var(--xc-shadow-purple); } .xc-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--xc-s2); cursor: pointer; list-style: none; padding: var(--xc-s2) var(--xc-s3); font-family: var(--xc-font-display); font-weight: 800; font-size: 1.02rem; line-height: 1.3; } .xc-faq__q::-webkit-details-marker { display: none; } .xc-faq__q:focus-visible { outline: 3px solid var(--xc-orange); outline-offset: -3px; border-radius: inherit; } .xc-faq__icon { flex: none; width: 1.65em; height: 1.65em; display: grid; place-items: center; background: var(--xc-orange); color: var(--xc-ink); border: 2px solid var(--xc-ink); border-radius: 7px; box-shadow: 2px 2px 0 var(--xc-ink); font-size: 1.05em; line-height: 1; padding-bottom: .08em; transition: transform .25s ease, background-color .25s ease; } .xc-faq__item[open] .xc-faq__icon { transform: rotate(45deg); background: var(--xc-purple); color: var(--xc-cream); } .xc-faq__a { padding: 0 var(--xc-s3) var(--xc-s3); } .xc-faq__a p { font-size: .95rem; line-height: 1.55; color: rgba(13, 8, 19, .82); max-width: none; } /* apertura fluida solo dove il browser la supporta e il movimento è gradito */ @media (prefers-reduced-motion: no-preference) { .xc-faq__item::details-content { block-size: 0; overflow-y: clip; transition: block-size .3s ease, content-visibility .3s allow-discrete; } .xc-faq__item[open]::details-content { block-size: auto; } } /* ===== Form ===== */ .xc-form input, .xc-form textarea, .xc-form select { width: 100%; background: var(--xc-bg); color: var(--xc-text); border: var(--xc-border-w) solid var(--xc-purple); border-radius: var(--xc-radius-sm); padding: .75em 1em; } .xc-form input:focus-visible, .xc-form textarea:focus-visible, .xc-form select:focus-visible { outline: 3px solid var(--xc-orange); outline-offset: 2px; } .xc-form--inline { display: flex; gap: var(--xc-s2); flex-wrap: wrap; } .xc-form--inline input { flex: 1 1 220px; width: auto; } .xc-form__ok { color: var(--xc-orange); font-weight: 600; width: 100%; } .xc-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ===== Footer ===== */ .xc-footer { border-top: var(--xc-border-w) solid var(--xc-ink); background: var(--xc-bg-raised); padding-block: var(--xc-s5) var(--xc-s3); } .xc-footer__news { max-width: 560px; margin-bottom: var(--xc-s5); } .xc-footer__cols { display: flex; flex-wrap: wrap; gap: var(--xc-s3); justify-content: space-between; color: var(--xc-text-dim); font-size: .9rem; } .xc-footer__cols nav { display: flex; gap: var(--xc-s2); }