/* --------------------------------------------------------------------------- GATEWAY ? Santuario immersivo (fullscreen lock + dock vetro T1 + Library) Solo token locali; palette da theme_globals (:root) senza modificarlo. Evoluzione 13/05/2026: ponte cockpit (ametista), stati profilo = token Vault, fascia vetro dietro Technical Deck, deck keys pi? lastra vetro. ADR 005 (19/05/2026): Glass Language ? token --gw-glass-*, Wave A cinema, Wave B vetro pannelli, Wave C deck 5/5. --------------------------------------------------------------------------- */ :root { --gw-bg-deep: var(--t1-deep-black-elevated); --gw-cyan: var(--t1-cyan-gateway); --gw-cyan-glow: color-mix(in srgb, var(--t1-cyan-gateway) 45%, transparent); --gw-cyan-faint: color-mix(in srgb, var(--t1-cyan-gateway) 12%, transparent); --gw-text: #f0f4f8; --gw-text-dim: #8a95a8; --gw-card-overlay: rgba(4, 6, 10, 0.72); --gw-status-ready: color-mix(in srgb, var(--t1-state-ready) 100%, transparent); --gw-status-ready-glow: var(--t1-state-ready-glow); --gw-status-pending: var(--t1-state-pending); --gw-status-pending-glow: var(--t1-state-pending-glow); --gw-status-active: var(--t1-state-active); --gw-status-active-glow: var(--t1-state-active-glow); --gw-deck-key: rgba(18, 20, 26, 0.96); --gw-deck-border: rgba(0, 242, 255, 0.18); --gw-font-tech: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; --gw-font-ui: 'Inter', system-ui, sans-serif; --gw-ease: 0.28s cubic-bezier(0.32, 0.72, 0, 1); --gw-glass-blur: 18px; --gw-dock-glass-blur: 25px; --gw-ice-border: color-mix(in srgb, rgba(214, 242, 252, 0.55) 55%, var(--gw-cyan) 45%); /* Ponte cockpit ? Agent / insight (manifesto) ? derivato da token globale */ --gw-amethyst: var(--t1-amethyst); --gw-amethyst-soft: color-mix(in srgb, var(--gw-amethyst) 32%, transparent); --gw-amethyst-glow: color-mix(in srgb, var(--gw-amethyst) 22%, transparent); /* Stati profilo: gateway-boost (+8-12% brightness) per leggibilit? sul nero #08080a */ --gw-state-ready: color-mix(in srgb, var(--t1-state-ready) 90%, white 10%); --gw-state-pending: color-mix(in srgb, var(--t1-state-pending) 92%, white 8%); --gw-state-active: color-mix(in srgb, var(--t1-state-active) 78%, #a78bfa 22%); /* -- ADR 005 ? Glass Language Tokens ------------------------------------- */ --gw-glass-bg: linear-gradient( 160deg, color-mix(in srgb, rgba(6, 10, 18, 0.94) 90%, rgba(255, 255, 255, 0.02)) 0%, rgba(4, 6, 14, 0.97) 100% ); --gw-glass-backdrop: blur(22px) saturate(1.15); --gw-glass-border: color-mix(in srgb, var(--gw-cyan) 12%, rgba(255, 255, 255, 0.07)); --gw-glass-border-top: rgba(255, 255, 255, 0.11); --gw-glass-shadow: 0 8px 48px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.04); /* Testi fosforo (ADR 005 Wave B) */ --gw-text-glow-primary: 0 0 10px color-mix(in srgb, var(--gw-cyan) 55%, transparent); --gw-text-glow-secondary: 0 0 10px color-mix(in srgb, var(--gw-amethyst) 38%, transparent); --gw-text-hint-cold: color-mix(in srgb, #8a95a8 80%, #6080a8 20%); /* ADR 005.1 ? Superficie stratificata (velo localizzato, incavo chip) */ --gw-glass-surface-bg: rgba(10, 15, 24, 0.65); --gw-glass-surface-blur: blur(12px) saturate(1.12); --gw-glass-recessed: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -10px 28px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.03); /* Prova atmosfera Gateway ? macchie inchiostro soft (revert: git checkout gateway_styles.css) */ --gw-ambience-base: #0e0e10; --gw-ambience-mist: #121214; /* Nero palco cinematografo (ref 2061 ? rgb 13,14,16) */ --gw-film-stage: #0f1014; /* Palco film ? alone per modulo (sovrascritto su body[data-gateway-film]) */ --gw-film-halo: var(--gw-cyan); /* Mondi (Indice + plancia WORLD_ACTIVE) ? smeraldo non saturo (ADR 004 v1) */ --gw-world-accent: var(--t1-clinical-dossier, #3dcc9a); --gw-world-accent-soft: color-mix(in srgb, var(--gw-world-accent) 28%, transparent); --gw-world-glow: color-mix(in srgb, var(--gw-world-accent) 22%, rgba(18, 42, 34, 0.14)); --gst-world-glow: color-mix(in srgb, var(--gw-world-accent) 28%, rgba(24, 56, 44, 0.12)); /* System deck / film ? grigio-blu (non ciano mondi, non smeraldo) */ --gw-system-accent: rgba(185, 198, 218, 1); --gw-system-glow: color-mix(in srgb, var(--gw-system-accent) 16%, transparent); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html:has(body.gateway-app) { height: 100%; overflow-x: clip; overflow-y: hidden; } body.gateway-app { position: relative; isolation: isolate; height: 100vh; max-height: 100vh; margin: 0; /* Base scura + macchie soft (2 chiare, 2 scure vs base; no alone ciano) */ background-color: var(--gw-ambience-base); background-image: radial-gradient(ellipse 95% 75% at 15% 20%, #121214 0%, transparent 85%), radial-gradient(ellipse 90% 80% at 85% 75%, #131315 0%, transparent 85%), radial-gradient(ellipse 75% 62% at 60% 10%, #0b0c0e 0%, transparent 85%), radial-gradient(ellipse 82% 70% at 8% 88%, #0c0d0f 0%, transparent 87%); color: var(--gw-text); font-family: var(--gw-font-ui); line-height: 1.5; /* clip (non hidden): guarda lo scroll orizzontale senza creare scroll container; permette al deck 100vw di uscire dallo shell senza generare scrollbar */ overflow-x: clip; overflow-y: hidden; text-rendering: optimizeLegibility; } /* Grana morbida ? pattern Cockpit, tile grande, opacity ~1.3% */ body.gateway-app::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.013; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 384px 384px; } .gateway-shell { position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 1280px; height: 100vh; max-height: 100vh; margin: 0 auto; /* Allinea bleed carosello Delta / deck allo stesso padding orizzontale */ --gw-shell-pad-x: clamp(28px, 5vw, 60px); /* padding orizzontale pi? largo: le card Delta (stessa max-width) non "sbattono" sul bordo finestra */ padding: clamp(6px, 1.2vh, 16px) var(--gw-shell-pad-x) 60px; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(6px, 1.2vh, 14px); /* visible: il body (overflow: hidden) ? il vero guard; qui non vogliamo clip per il deck 100vw */ overflow-x: visible; overflow-y: visible; } /* Sigillo Torri ? ancora visiva fissa */ .gateway-sigillo { position: fixed; top: 25px; left: 25px; z-index: 10002; line-height: 0; pointer-events: none; } .gateway-sigillo__img { width: 50px; height: auto; display: block; clip-path: inset(0 0 20% 0); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--t1-cyan-gateway) 58%, transparent)) drop-shadow(0 0 38px color-mix(in srgb, var(--t1-cyan-gateway) 30%, transparent)) drop-shadow(0 0 28px var(--gw-amethyst-glow)); } /* -- Identit? T1 ? payoff (torri solo nel sigillo) ------------------------ */ .gateway-brand-lockup { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .gateway-brand-lockup--hero { margin: 0 auto 2px; padding-top: clamp(4px, 0.9vh, 12px); gap: 6px; } .gateway-brand-lockup--hero .gateway-brand-title { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 600; letter-spacing: 0.6rem; text-transform: uppercase; text-shadow: 0 0 22px var(--gw-cyan-glow), 0 0 44px rgba(0, 242, 255, 0.12); } .gateway-brand-lockup--hero .gateway-brand-tagline { font-size: clamp(0.58rem, 1.35vw, 0.72rem); letter-spacing: 0.2em; opacity: 0.82; text-shadow: 0 0 24px var(--gw-amethyst-soft), 0 0 48px rgba(124, 58, 237, 0.08); } .gateway-brand-mark { line-height: 0; } .gateway-towers-img { width: 76px; height: auto; display: block; clip-path: inset(0 0 20% 0); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--t1-cyan-gateway) 55%, transparent)) drop-shadow(0 0 32px color-mix(in srgb, var(--t1-cyan-gateway) 30%, transparent)); } .gateway-brand-title { font-family: var(--gw-font-ui); font-size: clamp(2.35rem, 8vw, 4.1rem); font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gw-text); text-shadow: 0 0 36px var(--gw-cyan-glow), 0 0 72px rgba(0, 242, 255, 0.14); margin: 0; } .gateway-brand-tagline { font-family: 'Plus Jakarta Sans', var(--gw-font-ui); font-size: clamp(1.08rem, 2.9vw, 1.48rem); font-weight: 300; letter-spacing: 0.14em; color: rgba(218, 224, 232, 0.78); margin: 0; opacity: 1; text-transform: none; } .gateway-login-stack { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; max-width: 440px; } .gateway-login-hero { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; margin-bottom: clamp(18px, 3.2vh, 28px); } .gateway-login-stack .gateway-brand-title--login-product { font-size: clamp(1.9rem, 5.6vw, 2.65rem); font-weight: 600; letter-spacing: 0.05em; line-height: 1.15; text-transform: none; } .gateway-brand-tagline--login { font-size: clamp(1rem, 2.5vw, 1.18rem); letter-spacing: 0.12em; margin: 0; } .gateway-login-pilot-badge { margin: clamp(6px, 1vh, 10px) 0 0; font-family: 'Inter', var(--gw-font-ui); font-size: clamp(0.62rem, 1.55vw, 0.72rem); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--gw-cyan, #00e5ff) 58%, rgba(248, 252, 255, 0.72)); } /* Desktop login — marca assoluta in alto, stack centrato */ @media (min-width: 768px) and (min-height: 501px) { .gateway-login-stack .gateway-brand-lockup--login { position: absolute; top: clamp(40px, 8vh, 80px); left: 50%; transform: translateX(-50%); gap: clamp(10px, 1.6vh, 14px); width: max-content; max-width: calc(100vw - 48px); } .gateway-login-stack .gateway-brand-title--login-product { font-size: clamp(2.2rem, 3.8vw, 3.05rem); letter-spacing: 0.045em; } .gateway-brand-tagline--login { font-size: clamp(1.08rem, 1.65vw, 1.32rem); letter-spacing: 0.14em; } } /* Mobile portrait + landscape basso — colonna unica */ @media (max-width: 767px), (max-height: 500px) { .gateway-login-stack { flex-shrink: 0; margin: 0 auto; } .gateway-login-stack .gateway-brand-lockup--login { position: static; top: auto; left: auto; transform: none; width: 100%; max-width: none; gap: 8px; margin-bottom: clamp(18px, 3.2vh, 26px); } .gateway-login-stack .gateway-brand-title--login-product { font-size: clamp(1.42rem, 5.2vw, 1.58rem); letter-spacing: 0.04em; } .gateway-brand-tagline--login { font-size: clamp(0.82rem, 2.2vw, 0.92rem); letter-spacing: 0.1em; } .gateway-login-hero { margin-bottom: clamp(14px, 2.5vh, 22px); } } /* Landscape smartphone — font ancora più compatti */ @media (orientation: landscape) and (max-height: 500px) { .gateway-login-stack .gateway-brand-lockup--login { gap: 4px; margin-bottom: 10px; } .gateway-login-stack .gateway-brand-title--login-product { font-size: 1.12rem; line-height: 1.2; } .gateway-brand-tagline--login { font-size: 0.7rem; letter-spacing: 0.08em; } .gateway-login-hero { margin-bottom: 10px; } .gateway-login-card { padding: 20px 18px; gap: 16px; } .gateway-login-form { gap: 10px; } } /* -- Hero / Brand --------------------------------------------------------- */ .gateway-hero { flex: 0 0 auto; text-align: center; padding: 0 0 clamp(6px, 1vh, 10px); position: relative; } /* Scansione ametista: picco al centro, sfuma ai bordi ? richiamo LUCE / Agent Mode */ .gateway-hero::after { content: ''; display: block; width: min(92%, 640px); height: 1px; margin: clamp(10px, 1.6vh, 18px) auto 0; background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--gw-amethyst) 22%, transparent) 12%, color-mix(in srgb, var(--gw-amethyst) 82%, transparent) 42%, color-mix(in srgb, var(--gw-amethyst) 95%, white 5%) 50%, color-mix(in srgb, var(--gw-amethyst) 82%, transparent) 58%, color-mix(in srgb, var(--gw-amethyst) 22%, transparent) 88%, transparent 100% ); opacity: 0.92; pointer-events: none; } .gateway-hero__title { font-family: var(--gw-font-tech); font-weight: 300; font-size: clamp(1.75rem, 4.5vw, 2.65rem); letter-spacing: 0.42em; text-transform: uppercase; color: var(--gw-text); text-shadow: 0 0 40px var(--gw-cyan-glow), 0 1px 0 rgba(0, 242, 255, 0.15); } .gateway-hero__subtitle { margin-top: 14px; font-family: var(--gw-font-tech); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gw-text-dim); } /* -- Visual Row ? banda centrale ?impera?, respiro verso il dock ----------- */ .gateway-cinema-stack { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; position: relative; overflow: visible; } /* Plancia sacra ADR 3.3 ? Visual Delta in alto, vuoto nero fino al Technical Deck */ .gateway-cinema-stack--sacred { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; position: relative; width: calc(100% + 2 * var(--gw-shell-pad-x, clamp(28px, 5vw, 60px))); margin-left: calc(-1 * var(--gw-shell-pad-x, clamp(28px, 5vw, 60px))); margin-right: calc(-1 * var(--gw-shell-pad-x, clamp(28px, 5vw, 60px))); padding: 0 var(--gw-shell-pad-x, clamp(28px, 5vw, 60px)); overflow: visible; } .gateway-cinema-stack--sacred > .gateway-visual-row { flex: 1 1 0; min-height: 0; width: 100%; margin: 0; } /* Label dev-only: nascosta in plancia sacra (resta per screen reader / aria-labelledby) */ .gateway-cinema-stack--sacred .gateway-row__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .gateway-cinema-stack--sacred > .gateway-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .gateway-cinema-stack--sacred > .gateway-hologram-slot { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .gateway-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .gateway-visual-row { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; overflow: visible; padding-top: clamp(8px, 1.2vh, 16px); padding-bottom: clamp(20px, 3.5vh, 48px); position: relative; z-index: 1; --gw-card-accent: var(--gw-cyan); } /* Velo laterale: dissolve i bordi del deck nel background ? effetto vetro senza cornice netta */ .gateway-cinema-stack--sacred > .gateway-visual-row::before { content: ''; position: absolute; inset: 0; z-index: 150; pointer-events: none; border-radius: inherit; background: linear-gradient(to right, #08080a 0%, color-mix(in srgb, #08080a 55%, transparent) 6%, transparent 13%, transparent 87%, color-mix(in srgb, #08080a 55%, transparent) 94%, #08080a 100% ); } /* Vein: glow morbido che sanguina dal basso del deck verso la plancia */ .gateway-cinema-stack--sacred::after { content: ''; position: absolute; bottom: -24px; left: 15%; right: 15%; height: 56px; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255, 255, 255, 0.025) 0%, transparent 100% ); filter: blur(10px); } /* -- Hologram Slot ? overlay sul cinema-stack: ologramma nel vuoto del triangolo - */ .gateway-hologram-slot { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; } /* -- Hologram Projection ? hover profili (ovale legacy) ------------------- */ .gateway-hologram-projection { position: absolute; left: 50%; top: 74%; transform: translate(-50%, -50%); width: 100%; max-width: 410px; aspect-ratio: 16 / 9; border-radius: 0; overflow: visible; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; -webkit-mask-image: radial-gradient(ellipse 88% 80% at 50% 50%, black 5%, transparent 58%); mask-image: radial-gradient(ellipse 88% 80% at 50% 50%, black 5%, transparent 58%); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; filter: drop-shadow(0 0 32px var(--gw-amethyst-glow)); } .gateway-hologram-projection.is-open { opacity: 1; } /* Hover Vertex: preview 16:9 (solo fallback, quando non ancorata alla card) */ .gateway-hologram-projection.is-vertex-hover-preview:not(.is-vertex-hover-in-card) { top: 50% !important; bottom: auto !important; left: 50% !important; width: min(72vw, 520px) !important; max-width: calc(100% - 2 * var(--gw-shell-pad-x, 28px)) !important; max-height: none !important; aspect-ratio: 16 / 9 !important; height: auto !important; border-radius: 10px !important; transform: translate(-50%, -50%) !important; -webkit-mask-image: none !important; mask-image: none !important; filter: none !important; pointer-events: none !important; z-index: 6 !important; transition: opacity 0.28s ease !important; border: 1px solid color-mix(in srgb, var(--gw-cyan) 14%, transparent); overflow: hidden; } /* Vertex hover: preview dentro la card (JS appendChild su .gateway-visual-card) */ .gateway-visual-card.is-vertex-hover-host { overflow: hidden; } .gateway-visual-card.is-vertex-hover-host > .gateway-hologram-projection.is-vertex-hover-preview.is-vertex-hover-in-card { position: absolute !important; inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; aspect-ratio: unset !important; transform: none !important; border-radius: 10px !important; border: none !important; z-index: 3 !important; opacity: 1 !important; pointer-events: none !important; filter: none !important; } .gateway-visual-card.is-vertex-hover-host .gateway-visual-card__thumb { opacity: 0; pointer-events: none; transition: opacity var(--t1-palco-inertia, 280ms cubic-bezier(0.16, 1, 0.3, 1)); } .gateway-visual-card.is-vertex-hover-host .gateway-visual-card__overlay { z-index: 4; pointer-events: none; } .gateway-visual-card.is-vertex-hover-host > .gateway-hologram-projection.is-vertex-hover-in-card .gateway-hologram-projection__inner::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0.28; background: repeating-linear-gradient( -14deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px ); mix-blend-mode: overlay; z-index: 1; } .gateway-visual-card.is-vertex-hover-host > .gateway-hologram-projection.is-vertex-hover-in-card .gateway-hologram-projection__inner, .gateway-visual-card.is-vertex-hover-host > .gateway-hologram-projection.is-vertex-hover-in-card .gateway-hologram-projection__video { width: 100%; height: 100%; object-fit: cover; opacity: 1 !important; border-radius: 10px; } .gateway-hologram-projection.is-vertex-hover-preview .gateway-hologram-projection__inner { border-radius: 0 !important; overflow: hidden !important; background: #000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; } .gateway-cinema-stack--sacred .gateway-hologram-projection.is-vertex-hover-preview .gateway-hologram-projection__video, .gateway-hologram-projection.is-vertex-hover-preview .gateway-hologram-projection__video { filter: grayscale(0.15) brightness(1.12) contrast(1.06); border-radius: 0; } /* Hover Vertex: glow solo quando resta in fallback (mai in-card). */ .gateway-cinema-stack--sacred .gateway-hologram-projection.is-vertex-hover-preview.is-open:not(.is-vertex-hover-in-card), .gateway-cinema-stack--sacred .gateway-hologram-projection.is-vertex-hover-preview.is-open.is-ready:not(.is-vertex-hover-in-card) { opacity: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; filter: none !important; } .gateway-cinema-stack--sacred.is-project-active .gateway-hologram-projection.is-vertex-hover-preview.is-open.is-ready { opacity: 1 !important; } #hologram-projection[hidden] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* -- Holo-cinema mondiale (M1/M2) ? schermo panoramico sopra Technical Deck - */ .gateway-cinema-stack--sacred .gateway-hologram-slot { z-index: 1; } .gateway-cinema-stack--sacred .gateway-hologram-projection { top: auto; bottom: clamp(14px, 2.2vh, 28px); width: min(78vw, 760px); max-width: calc(100% - 2 * var(--gw-shell-pad-x, clamp(28px, 5vw, 60px))); max-height: clamp(148px, 22vh, 248px); aspect-ratio: 2.35 / 1; height: auto; border-radius: 16px; transform: translate(-50%, -15px); opacity: 0; -webkit-mask-image: none; mask-image: none; filter: none; transition: none; } .gateway-cinema-stack--sacred .gateway-hologram-projection.is-project-active, .gateway-cinema-stack--sacred.is-project-active .gateway-hologram-projection.is-open { opacity: 1; transform: translate(-50%, 0); transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); } /* Profondit? di campo ? Vertex e Visual row sfocati quando il cinema ? attivo */ .gateway-cinema-stack--sacred .gateway-row__label, .gateway-cinema-stack--sacred .gateway-carousel__vertex, .gateway-cinema-stack--sacred .gateway-carousel__base--left, .gateway-cinema-stack--sacred .gateway-carousel__base--right, .gateway-cinema-stack--sacred .gateway-carousel__core { transition: filter 0.4s ease, opacity 0.4s ease; } /* PALCO-ATRIO-A: corridoio leggero; focal (create ? vertex in_corso) esclusi */ .gateway-cinema-stack--sacred.is-project-active .gateway-row__label, .gateway-cinema-stack--sacred.is-project-active .gateway-carousel__base--left, .gateway-cinema-stack--sacred.is-project-active .gateway-carousel__base--right { filter: blur(2px); opacity: 0.78; } .gateway-cinema-stack--sacred.is-project-active .gateway-carousel__core:not(:has(.gateway-visual-card--create)) { filter: blur(2px); opacity: 0.78; } .gateway-cinema-stack--sacred.is-project-active .gateway-carousel__core:has(.gateway-visual-card--create) { filter: none; opacity: 1; } .gateway-cinema-stack--sacred.is-project-active .gateway-carousel__vertex:not(:has(.gateway-visual-card--pulse)) { filter: blur(2px); opacity: 0.78; transform: translateY(clamp(-14px, -1.15vh, -18px)); pointer-events: auto; } .gateway-cinema-stack--sacred.is-project-active .gateway-carousel__vertex:has(.gateway-visual-card--pulse) { filter: none; opacity: 1; transform: translateY(clamp(-14px, -1.15vh, -18px)); pointer-events: auto; } /* Void Palco: mondo in memoria ma film chiuso ? Delta nitido (no DOF legacy) */ body[data-gateway-film="void"] .gateway-cinema-stack--sacred.is-project-active .gateway-row__label, body[data-gateway-film="void"] .gateway-cinema-stack--sacred.is-project-active .gateway-carousel__base--left, body[data-gateway-film="void"] .gateway-cinema-stack--sacred.is-project-active .gateway-carousel__base--right, body[data-gateway-film="void"] .gateway-cinema-stack--sacred.is-project-active .gateway-carousel__core, body[data-gateway-film="void"] .gateway-cinema-stack--sacred.is-project-active .gateway-carousel__vertex { filter: none; opacity: 1; } .gateway-cinema-stack--sacred.is-project-active .gateway-carousel__vertex:hover, .gateway-cinema-stack--sacred.is-project-active .gateway-carousel__vertex:focus-within { filter: blur(0); opacity: 1; z-index: 120; } /* Cinema attivo: hit-test solo sullo schermo holo (no click-through su basi/vertex sfocati) */ .gateway-cinema-stack--sacred.is-project-active > .gateway-hologram-slot { z-index: 3; } .gateway-cinema-stack--sacred.is-project-active .gateway-visual-row .gateway-carousel > li { pointer-events: none; } .gateway-cinema-stack--sacred.is-project-active .gateway-visual-row .gateway-carousel > li.gateway-carousel__vertex { pointer-events: auto; } .gateway-cinema-stack--sacred.is-project-active .gateway-hologram-projection.is-project-active:not(.is-vertex-hover-preview), .gateway-cinema-stack--sacred.is-project-active .gateway-hologram-projection.is-open:not(.is-vertex-hover-preview) { pointer-events: auto; z-index: 4; } .gateway-cinema-stack--sacred.is-project-active .gateway-hologram-slot > .gateway-hologram-projection.is-vertex-hover-preview:not(.is-vertex-hover-in-card) { /* Preview vertex deve vivere nella card: fallback neutro per evitare flash orizzontali. */ opacity: 0 !important; filter: none !important; -webkit-mask-image: none !important; mask-image: none !important; } .gateway-cinema-stack--sacred .gateway-hologram-projection__inner { border-radius: 16px; overflow: hidden; background: rgba(0, 0, 0, 0); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--gw-glass-border); border-top: 1px solid var(--gw-glass-border-top); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 48px rgba(0, 0, 0, 0.55); transition: none; } .gateway-cinema-stack--sacred .gateway-hologram-projection.is-project-active .gateway-hologram-projection__inner, .gateway-cinema-stack--sacred.is-project-active .gateway-hologram-projection.is-open .gateway-hologram-projection__inner { background: rgba(0, 0, 0, 0.82); transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1); } .gateway-cinema-stack--sacred .gateway-hologram-projection[data-world-slot='m1'] .gateway-hologram-projection__inner { border-color: color-mix(in srgb, var(--gw-cyan) 26%, rgba(255, 255, 255, 0.06)); box-shadow: 0 0 36px rgba(0, 242, 255, 0.11), 0 10px 36px rgba(0, 0, 0, 0.42), inset 0 0 32px rgba(0, 242, 255, 0.05); } .gateway-cinema-stack--sacred .gateway-hologram-projection[data-world-slot='m2'] .gateway-hologram-projection__inner { border-color: color-mix(in srgb, var(--gw-amethyst) 28%, rgba(255, 255, 255, 0.06)); box-shadow: 0 0 36px rgba(124, 58, 237, 0.14), 0 10px 36px rgba(0, 0, 0, 0.42), inset 0 0 32px rgba(124, 58, 237, 0.06); } /* Mondo attivo ? bordo holo unificato smeraldo (sovrascrive m1/m2) */ .gateway-cinema-stack--sacred.is-project-active .gateway-hologram-projection__inner, .gateway-cinema-stack--sacred.is-project-active .gateway-hologram-projection.is-project-active .gateway-hologram-projection__inner, .gateway-cinema-stack--sacred.is-project-active .gateway-hologram-projection.is-open .gateway-hologram-projection__inner, .gateway-cinema-stack--sacred.is-project-active .gateway-hologram-projection[data-world-slot] .gateway-hologram-projection__inner { border-color: color-mix(in srgb, var(--gw-world-accent) 30%, rgba(255, 255, 255, 0.06)); box-shadow: 0 0 40px color-mix(in srgb, var(--gw-world-accent) 14%, transparent), 0 10px 36px rgba(0, 0, 0, 0.42), inset 0 0 32px color-mix(in srgb, var(--gw-world-accent) 7%, transparent); } .gateway-cinema-stack--sacred .gateway-hologram-projection__video { border-radius: 16px; } /* Overlay navigazione interna holo-cinema */ .gateway-holo-cinema-ui { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: clamp(6px, 0.9vh, 10px); padding: clamp(10px, 1.4vh, 16px) clamp(14px, 2vw, 20px); pointer-events: none; background: linear-gradient( 180deg, transparent 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.78) 100% ); } .gateway-holo-cinema-ui[hidden] { display: none !important; } .gateway-holo-cinema-ui__meta { position: relative; z-index: 11; margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.58rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(248, 252, 255, 0.72); opacity: 0.65; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gateway-holo-cinema-ui__enter { position: relative; z-index: 12; pointer-events: auto; margin-top: clamp(4px, 0.6vh, 8px); font-family: var(--gw-font-ui); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; text-transform: none; opacity: 0.48; transition: opacity 0.28s ease, color 0.28s ease, text-shadow 0.28s ease; } .gateway-holo-cinema-ui[data-world-slot='m1'] .gateway-holo-cinema-ui__enter { color: var(--gw-cyan); } .gateway-holo-cinema-ui[data-world-slot='m2'] .gateway-holo-cinema-ui__enter { color: color-mix(in srgb, var(--gw-amethyst) 82%, var(--gw-cyan)); } .gateway-holo-cinema-ui[data-world-slot='m1'] .gateway-holo-cinema-ui__enter:hover { opacity: 0.95; text-shadow: 0 0 14px rgba(0, 242, 255, 0.35); } .gateway-holo-cinema-ui[data-world-slot='m2'] .gateway-holo-cinema-ui__enter:hover { opacity: 0.95; text-shadow: 0 0 14px rgba(124, 58, 237, 0.35); } .gateway-holo-cinema-ui__enter.is-nav-locked { pointer-events: none; opacity: 0.22; cursor: default; } /* Holo profile rail v0 ? ruota nel frame cinema; ADR 005.1 velo sotto le card */ .gateway-holo-profiles-rail-wrap { position: relative; z-index: 4; display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 1vw, 12px); width: 100%; max-width: 100%; min-height: 52px; padding: clamp(6px, 0.8vh, 10px) clamp(4px, 0.6vw, 8px); pointer-events: auto; isolation: isolate; } /* Velo orizzontale ? stesso materiale del deck; le card scorrono sopra */ .gateway-holo-profiles-rail-wrap::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 10px; background: var(--gw-glass-surface-bg); border: 1px solid var(--gw-glass-border); border-top: 1px solid var(--gw-glass-border-top); backdrop-filter: var(--gw-glass-surface-blur); -webkit-backdrop-filter: var(--gw-glass-surface-blur); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 28px rgba(0, 0, 0, 0.32); pointer-events: none; } /* Vignette laterali sul velo ? non mask sul DOM delle card */ .gateway-holo-profiles-rail-wrap::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 10px; pointer-events: none; background: linear-gradient( to right, rgba(4, 6, 10, 0.72) 0%, transparent 16%, transparent 84%, rgba(4, 6, 10, 0.72) 100% ); } .gateway-holo-profiles-rail-wrap[hidden] { display: none !important; } .gateway-holo-profiles-rail-wrap.is-loading .gateway-holo-rail-nav { visibility: hidden; pointer-events: none; } .gateway-holo-profiles-rail { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 1.2vw, 14px); flex: 1 1 auto; min-width: 0; min-height: 36px; outline: none; } .gateway-holo-profiles-rail.is-loading { align-items: center; justify-content: center; } .gateway-holo-profiles-rail__loading { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.35em; color: rgba(248, 252, 255, 0.45); animation: gateway-holo-rail-pulse 1.1s ease-in-out infinite; } @keyframes gateway-holo-rail-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } } .gateway-holo-rail-nav { position: relative; z-index: 2; flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border-radius: 6px; border: 1px solid var(--gw-glass-border); border-top: 1px solid var(--gw-glass-border-top); background: color-mix(in srgb, var(--gw-glass-surface-bg) 88%, rgba(0, 0, 0, 0.4)); color: rgba(248, 252, 255, 0.55); font-size: 1.1rem; line-height: 1; cursor: pointer; pointer-events: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .gateway-holo-rail-nav:hover { color: rgba(248, 252, 255, 0.92); border-color: rgba(255, 255, 255, 0.22); } .gateway-holo-cinema-ui[data-world-slot='m1'] .gateway-holo-rail-nav:hover { border-color: color-mix(in srgb, var(--gw-cyan) 45%, rgba(255, 255, 255, 0.15)); } .gateway-holo-cinema-ui[data-world-slot='m2'] .gateway-holo-rail-nav:hover { border-color: color-mix(in srgb, var(--gw-amethyst) 45%, rgba(255, 255, 255, 0.15)); } .holo-profile-card { position: relative; z-index: 2; flex: 0 1 min(28%, 120px); min-width: 0; padding: clamp(6px, 0.8vh, 8px) clamp(8px, 1vw, 10px); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.45); color: rgba(248, 252, 255, 0.5); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; pointer-events: auto; opacity: 0.35; transform: scale(0.85) translateY(10px); filter: blur(2px); transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .holo-profile-card__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .holo-profile-card.is-center { flex: 0 1 min(36%, 160px); opacity: 1; transform: scale(1) translateY(-12px); filter: blur(0); cursor: default; pointer-events: none; border-color: rgba(255, 255, 255, 0.14); } .gateway-holo-cinema-ui[data-world-slot='m1'] .holo-profile-card.is-center { color: var(--gw-cyan); box-shadow: inset 0 0 15px rgba(0, 242, 255, 0.12); border-color: color-mix(in srgb, var(--gw-cyan) 35%, rgba(255, 255, 255, 0.1)); } .gateway-holo-cinema-ui[data-world-slot='m2'] .holo-profile-card.is-center { color: color-mix(in srgb, var(--gw-amethyst) 88%, #fff); box-shadow: inset 0 0 15px rgba(124, 58, 237, 0.14); border-color: color-mix(in srgb, var(--gw-amethyst) 38%, rgba(255, 255, 255, 0.1)); } .gateway-cinema-stack--sacred.is-project-active .holo-profile-card.is-center, .gateway-cinema-stack--sacred.is-project-active .gateway-holo-cinema-ui .holo-profile-card.is-center { color: color-mix(in srgb, var(--gw-world-accent) 76%, #fff); box-shadow: inset 0 0 15px color-mix(in srgb, var(--gw-world-accent) 11%, transparent); border-color: color-mix(in srgb, var(--gw-world-accent) 30%, rgba(255, 255, 255, 0.1)); } .gateway-cinema-stack--sacred.is-project-active .gateway-holo-cinema-ui__enter, .gateway-cinema-stack--sacred.is-project-active .gateway-holo-cinema-ui[data-world-slot] .gateway-holo-cinema-ui__enter { color: color-mix(in srgb, var(--gw-world-accent) 70%, var(--gw-text)); } .gateway-cinema-stack--sacred.is-project-active .gateway-holo-cinema-ui__enter:hover, .gateway-cinema-stack--sacred.is-project-active .gateway-holo-cinema-ui[data-world-slot] .gateway-holo-cinema-ui__enter:hover { opacity: 0.95; text-shadow: 0 0 14px color-mix(in srgb, var(--gw-world-accent) 28%, transparent); } .gateway-cinema-stack--sacred.is-project-active .gateway-holo-rail-nav:hover, .gateway-cinema-stack--sacred.is-project-active .gateway-holo-cinema-ui[data-world-slot] .gateway-holo-rail-nav:hover { border-color: color-mix(in srgb, var(--gw-world-accent) 36%, rgba(255, 255, 255, 0.15)); } .holo-profile-card.is-adjacent:hover { opacity: 0.55; filter: blur(1px); } .gateway-hologram-projection__inner { position: relative; width: 100%; height: 100%; border-radius: 0; overflow: hidden; background: #000; } .gateway-hologram-projection__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15) brightness(1.12) contrast(1.06); opacity: 0; border-radius: 0; transition: opacity 0.45s ease, filter 0.35s ease; } .gateway-hologram-projection.is-ready .gateway-hologram-projection__video { opacity: 0.72; } .gateway-hologram-projection__tint { position: absolute; inset: 0; border-radius: 0; mix-blend-mode: overlay; pointer-events: none; } /* (Niente placeholder/shimmer: nero OLED se il video non ? pronto ? vedi JS) */ .gateway-hologram-projection[data-accent="active"] .gateway-hologram-projection__tint { background: color-mix(in srgb, var(--t1-state-active) 6%, transparent); } .gateway-hologram-projection[data-accent="ready"] .gateway-hologram-projection__tint { background: color-mix(in srgb, var(--t1-state-ready) 5%, transparent); } .gateway-hologram-projection[data-accent="pending"] .gateway-hologram-projection__tint { background: color-mix(in srgb, var(--t1-state-pending) 5%, transparent); } /* prefers-reduced-motion ? ologramma: consolidato nel blocco unico pi? sotto */ /* Accenti card: stato operativo ? token globale boosted per il nero gateway */ .gateway-visual-card.gateway-visual-card--sofia { --gw-card-accent: var(--gw-state-ready); } .gateway-visual-card.gateway-visual-card--marco { --gw-card-accent: var(--gw-state-pending); } .gateway-visual-card.gateway-visual-card--elena { --gw-card-accent: var(--gw-state-active); } /* Gradient thumb: derivati da token stato ? boosted per leggibilit? sul nero gateway */ .gateway-visual-card--sofia .gateway-visual-card__thumb { background-image: linear-gradient( 135deg, color-mix(in srgb, var(--gw-state-ready) 28%, #060c0a) 0%, color-mix(in srgb, var(--gw-state-ready) 16%, #040d0b) 42%, #040808 100% ); } .gateway-visual-card--marco .gateway-visual-card__thumb { background-image: linear-gradient( 135deg, #100e08 0%, color-mix(in srgb, var(--gw-state-pending) 48%, #1e1406) 42%, #0a0804 100% ); } .gateway-visual-card--elena .gateway-visual-card__thumb { background-image: linear-gradient( 135deg, #0e0c16 0%, color-mix(in srgb, var(--gw-state-active) 32%, #140e28) 48%, color-mix(in srgb, var(--gw-state-active) 14%, #06040c) 100% ); } .gateway-row__label { font-family: var(--gw-font-tech); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gw-cyan); flex: 0 0 auto; margin: clamp(10px, 1.35vh, 16px) 0 clamp(10px, 1.35vh, 16px); opacity: 0.9; } /* ????????????????????????????????????????????????????????????????????????? */ /* -- LAYOUT AGNOSTICO ? cambia classe sul
parent per swappare */ /* .gw-layout--delta ? triangolo Delta con vuoto centrale */ /* .gw-layout--row ? fila orizzontale (definita sotto, pronta all'uso) */ /* ????????????????????????????????????????????????????????????????????????? */ /* -- Layout Delta ----------------------------------------------------------- Vertice in riga propria full-span ? stesso width delle basi (mai schiacciato da colonne strette). Colonna centrale riga 2 = vuoto intenzionale ("diamante"). -------------------------------------------------------------------------- */ .gw-layout--delta .gateway-carousel { flex: 1 1 auto; min-height: 0; /* Bleed orizzontale: stesso offset del Technical Deck ? Sofia/Marco verso i bordi schermo */ width: calc(100% + 2 * var(--gw-shell-pad-x, clamp(28px, 5vw, 60px))); margin-left: calc(-1 * var(--gw-shell-pad-x, clamp(28px, 5vw, 60px))); margin-right: calc(-1 * var(--gw-shell-pad-x, clamp(28px, 5vw, 60px))); display: grid; /* Colonne laterali = esatto spessore della card ? la base tocca il bordo esterno. Colonna centrale = tutto lo spazio residuo = il grande vuoto del diamante. */ grid-template-columns: min(32vw, 340px) 1fr min(32vw, 340px); grid-template-rows: auto auto; grid-template-areas: "vertex vertex vertex" "left . right"; column-gap: 0; row-gap: clamp(22px, 4vh, 48px); list-style: none; overflow: visible; align-content: start; margin-top: 0; margin-bottom: clamp(20px, 3.5vh, 40px); } /* Simmetria dimensionale assoluta: tutte e tre le card con lo stesso width */ .gw-layout--delta .gateway-carousel__vertex, .gw-layout--delta .gateway-carousel__base--left, .gw-layout--delta .gateway-carousel__base--right { width: min(32vw, 340px); flex-shrink: 0; } /* Vertice: micro-innalzamento ? equidistante tra neon hero e label Visual row */ .gw-layout--delta .gateway-carousel__vertex { grid-area: vertex; justify-self: center; transform: translateY(clamp(-14px, -1.15vh, -18px)); } /* Basi: le colonne laterali sono esattamente la larghezza della card. justify-self: stretch le fa riempire la colonna ? bordo esterno = bordo schermo */ .gw-layout--delta .gateway-carousel__base--left { grid-area: left; justify-self: stretch; /* ~20px pi? in alto rispetto al precedente: pilastri staccati dal Technical Deck */ transform: translateY(calc(clamp(14px, 2.2vh, 28px) - 20px)); } .gw-layout--delta .gateway-carousel__base--right { grid-area: right; justify-self: stretch; transform: translateY(calc(clamp(14px, 2.2vh, 28px) - 20px)); } /* -- Layout Riga ? swap alternativo: metti .gw-layout--row sul
--- */ .gw-layout--winged .gateway-carousel { flex: 1 1 auto; min-height: 0; /* Bleed: triade con ali pi? esterne verso i bordi */ width: calc(100% + 2 * var(--gw-shell-pad-x, clamp(28px, 5vw, 60px))); margin-left: calc(-1 * var(--gw-shell-pad-x, clamp(28px, 5vw, 60px))); margin-right: calc(-1 * var(--gw-shell-pad-x, clamp(28px, 5vw, 60px))); max-width: none; display: grid; grid-template-columns: minmax(280px, min(32vw, 340px)) 1fr minmax(280px, min(32vw, 340px)); grid-template-rows: auto auto; grid-template-areas: "create create create" "gallery vertex space"; column-gap: clamp(18px, 2.2vw, 34px); row-gap: clamp(14px, 2.2vh, 24px); list-style: none; overflow: visible; align-content: start; margin-top: 0; margin-bottom: clamp(20px, 3.5vh, 40px); } .gw-layout--winged .gateway-carousel__base--gallery { grid-area: gallery; justify-self: start; width: min(32vw, 340px); transform: translateY(calc(clamp(14px, 2.2vh, 28px) - 18px)); } .gw-layout--winged .gateway-carousel__base--right { grid-area: space; justify-self: end; width: min(32vw, 340px); transform: translateY(calc(clamp(14px, 2.2vh, 28px) - 18px)); } .gw-layout--winged .gateway-carousel__core { grid-area: create; display: flex; align-items: center; justify-content: center; width: min(32vw, 340px); justify-self: center; transform: translateY(clamp(-24px, -2.1vh, -32px)); } .gw-layout--winged .gateway-carousel__vertex { grid-area: vertex; justify-self: center; width: min(32vw, 340px); transform: translateY(calc(clamp(14px, 2.2vh, 28px) - 18px)); } .gw-layout--row .gateway-carousel { flex: 1 1 auto; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 2vw, 24px); list-style: none; overflow: visible; margin-top: clamp(4px, 0.8vh, 12px); margin-bottom: clamp(32px, 5vh, 64px); } .gw-layout--row .gateway-carousel > li { flex: 0 0 auto; width: min(32vw, 340px); } /* -- Fallback sicuro: senza classe layout il carosello resta in fila orizzontale */ .gateway-carousel { list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 2vw, 24px); overflow: visible; margin: 0; padding: 0; } /* -- Propriet? comuni a
  • in qualsiasi layout -------------------------- */ .gateway-carousel > li { position: relative; z-index: 1; min-width: 0; min-height: 0; } .gateway-carousel > li:hover { z-index: 100; } /* -- Mobile = 900px: colonna singola, trasform reset (touch only; PC finestra stretta → scroll) */ @media (max-width: 900px) and not ((hover: hover) and (pointer: fine)) { .gw-layout--delta .gateway-carousel { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "vertex" "left" "right"; row-gap: clamp(16px, 3vh, 28px); margin-bottom: clamp(28px, 5vh, 56px); } .gw-layout--delta .gateway-carousel__vertex { justify-self: center; width: min(92vw, 340px); transform: none; } .gw-layout--delta .gateway-carousel__base--left { justify-self: center; width: min(92vw, 340px); transform: none; } .gw-layout--delta .gateway-carousel__base--right { justify-self: center; width: min(92vw, 340px); transform: none; } .gw-layout--winged .gateway-carousel { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "create" "vertex" "gallery" "space"; row-gap: clamp(16px, 3vh, 28px); margin-bottom: clamp(28px, 5vh, 56px); } .gw-layout--winged .gateway-carousel__core, .gw-layout--winged .gateway-carousel__vertex, .gw-layout--winged .gateway-carousel__base--gallery, .gw-layout--winged .gateway-carousel__base--right { justify-self: center; width: min(92vw, 340px); transform: none; } } /* Link = contenitore 16:9 della cella griglia; card riempie il link */ .gateway-visual-row a.gateway-visual-cardlink { display: block; width: 100%; min-height: 0; aspect-ratio: 16 / 9; text-decoration: none; text-underline-offset: 0; color: inherit; border-radius: 10px; overflow: visible; position: relative; z-index: 0; } .gateway-visual-row a.gateway-visual-cardlink:visited, .gateway-visual-row a.gateway-visual-cardlink:active { text-decoration: none; color: inherit; } .gateway-visual-cardlink:focus-visible { outline: 2px solid var(--gw-cyan); outline-offset: 4px; } /* Console Delta: evita doppio alone (outline su link + box-shadow su card) dopo Esc ? * focus-within sul
  • gi? solleva e illumina .gateway-visual-card; :focus-visible * sul wrapper resterebbe offset rispetto al bordo interno. */ .gw-layout--delta .gateway-carousel .gateway-visual-cardlink:focus-visible { outline: none; } .gateway-visual-card { position: relative; display: block; width: 100%; height: 100%; min-height: 100%; border-radius: 10px; overflow: visible; border: 0.5px solid rgba(255, 255, 255, 0.06); background: linear-gradient(145deg, #12151c 0%, #0c0d12 100%); cursor: pointer; transform: translateZ(0) scale(1); transform-origin: center center; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 0.5px color-mix(in srgb, var(--gw-card-accent) 16%, transparent), 0 4px 28px rgba(0, 0, 0, 0.45), 0 0 22px color-mix(in srgb, var(--gw-card-accent) 10%, transparent); } /* Compat: se si usa .profile-card come alias della card nel markup */ .gateway-visual-row a.gateway-visual-cardlink > .profile-card { width: 100%; height: 100%; min-height: 100%; transform: translateZ(0) scale(1); transform-origin: center center; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } /* Hover/Focus ? nessuno scale: solo lift verticale + glow (tutte e tre simmetriche) */ @media (hover: hover) and (pointer: fine) { .gateway-carousel > li:hover > a.gateway-visual-cardlink { z-index: 100; } .gw-layout--delta .gateway-carousel > li:hover .gateway-visual-card, .gw-layout--delta .gateway-carousel > li:hover .profile-card { transform: translateZ(0) translateY(-8px); border-color: rgba(255, 255, 255, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 18px color-mix(in srgb, var(--gw-card-accent), transparent 46%), 0 0 36px color-mix(in srgb, var(--gw-card-accent), transparent 72%), 0 12px 28px rgba(0, 0, 0, 0.5); } .gw-layout--delta .gateway-carousel__base--left:hover .gateway-visual-card.gateway-visual-card--sofia { box-shadow: 0 0 14px color-mix(in srgb, var(--gw-card-accent), transparent 54%), 0 0 30px color-mix(in srgb, var(--gw-card-accent), transparent 84%), 0 12px 28px rgba(0, 0, 0, 0.5); } } @keyframes t1-inviti-signal-pulse { 0%, 100% { opacity: 0.78; transform: scale(1); } 50% { opacity: 0.96; transform: scale(1.06); } } @keyframes t1-plancia-inviti-signal-pulse { 0%, 100% { opacity: 0.82; transform: scale(1); box-shadow: 0 0 4px color-mix(in srgb, var(--t1-cyan-gateway, #00f2ff) 42%, transparent), 0 0 10px color-mix(in srgb, var(--t1-cyan-gateway, #00f2ff) 22%, transparent); } 50% { opacity: 1; transform: scale(1.12); box-shadow: 0 0 8px color-mix(in srgb, var(--t1-cyan-gateway, #00f2ff) 72%, transparent), 0 0 18px color-mix(in srgb, var(--t1-cyan-gateway, #00f2ff) 38%, transparent); } } .gateway-coach-toast-host { position: fixed; top: clamp(74px, 9vh, 110px); right: clamp(14px, 2vw, 28px); z-index: 120; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .gateway-coach-toast-host--notices { pointer-events: auto; z-index: 125; } .gateway-coach-toast { min-width: min(320px, calc(100vw - 28px)); max-width: min(420px, calc(100vw - 28px)); padding: 11px 14px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--gw-cyan) 46%, rgba(255, 255, 255, 0.16)); background: radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--gw-cyan) 18%, transparent), transparent 56%), color-mix(in srgb, rgba(7, 12, 24, 0.94) 84%, var(--gw-cyan) 16%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 30px rgba(0, 0, 0, 0.44); color: rgba(239, 248, 255, 0.96); font-family: var(--gw-font-mono); font-size: clamp(0.74rem, 0.68rem + 0.22vw, 0.82rem); letter-spacing: 0.013em; line-height: 1.42; opacity: 0; transform: translateY(-7px); transition: opacity 180ms ease, transform 180ms ease; } .gateway-coach-toast.is-visible { opacity: 1; transform: translateY(0); } .gateway-coach-notice { min-width: min(320px, calc(100vw - 28px)); max-width: min(420px, calc(100vw - 28px)); padding: 12px 12px 11px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--t1-palco-sessions-frost-bright, #c8daf0) 42%, rgba(255, 255, 255, 0.14)); background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--t1-palco-sessions-frost, #a8b8c8) 22%, transparent), transparent 58%), color-mix(in srgb, rgba(8, 12, 20, 0.94) 82%, var(--t1-palco-sessions-frost, #a8b8c8) 18%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--t1-palco-sessions-frost-bright, #d8e8ff) 14%, transparent), 0 14px 34px rgba(0, 0, 0, 0.48); color: color-mix(in srgb, #f0f6fc 94%, var(--t1-palco-sessions-frost-bright, #c8daf0)); font-family: var(--gw-font-ui, 'Inter', sans-serif); font-size: clamp(0.78rem, 0.72rem + 0.22vw, 0.86rem); line-height: 1.45; opacity: 0; transform: translateY(-8px); transition: opacity 200ms ease, transform 200ms ease; } .gateway-coach-notice.is-visible { opacity: 1; transform: translateY(0); } .gateway-coach-notice__msg { margin: 0; padding-right: 4px; } .gateway-coach-notice__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; } .gateway-coach-notice__cta { font: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; border-radius: 8px; padding: 0.38rem 0.72rem; border: 1px solid color-mix(in srgb, var(--t1-palco-sessions-frost-bright, #c8daf0) 38%, transparent); background: color-mix(in srgb, var(--t1-palco-sessions-frost, #a8b8c8) 16%, rgba(0, 0, 0, 0.35)); color: color-mix(in srgb, #f4f8fc 92%, var(--t1-palco-sessions-frost-bright, #c8daf0)); transition: border-color 0.16s ease, box-shadow 0.16s ease; } .gateway-coach-notice__cta:hover, .gateway-coach-notice__cta:focus-visible { border-color: color-mix(in srgb, var(--t1-palco-sessions-frost-bright, #d8e8ff) 52%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--t1-palco-sessions-frost, #a8b8c8) 32%, transparent); } .gateway-coach-notice__close { font: inherit; font-size: 1rem; line-height: 1; width: 28px; height: 28px; flex-shrink: 0; cursor: pointer; border-radius: 8px; border: 1px solid color-mix(in srgb, #fff 10%, transparent); background: color-mix(in srgb, #fff 4%, transparent); color: rgba(220, 228, 238, 0.82); transition: border-color 0.16s ease, color 0.16s ease; } .gateway-coach-notice__close:hover, .gateway-coach-notice__close:focus-visible { border-color: color-mix(in srgb, #fff 22%, transparent); color: rgba(248, 252, 255, 0.96); } .gateway-carousel > li:focus-within > a.gateway-visual-cardlink { z-index: 100; } .gw-layout--delta .gateway-carousel > li:focus-within .gateway-visual-card, .gw-layout--delta .gateway-carousel > li:focus-within .profile-card { transform: translateZ(0) translateY(-8px); border-color: color-mix(in srgb, var(--gw-card-accent) 54%, rgba(255, 255, 255, 0.1)); box-shadow: 0 0 18px color-mix(in srgb, var(--gw-card-accent), transparent 46%), 0 0 36px color-mix(in srgb, var(--gw-card-accent), transparent 72%), 0 12px 28px rgba(0, 0, 0, 0.5); } .gw-layout--delta .gateway-carousel__base--left:focus-within .gateway-visual-card.gateway-visual-card--sofia { box-shadow: 0 0 14px color-mix(in srgb, var(--gw-card-accent), transparent 54%), 0 0 30px color-mix(in srgb, var(--gw-card-accent), transparent 84%), 0 12px 28px rgba(0, 0, 0, 0.5); } .gateway-visual-card__thumb { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background-size: cover; background-position: center; filter: saturate(0.92) contrast(1.02); transform: translateZ(0) scale(1); backface-visibility: hidden; -ms-interpolation-mode: bicubic; image-rendering: auto; transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } @media (hover: hover) and (pointer: fine) { .gateway-carousel > li:hover .gateway-visual-card__thumb { transform: translateZ(0) scale(1); } } .gateway-carousel > li:focus-within .gateway-visual-card__thumb { transform: translateZ(0) scale(1); } .gateway-visual-card__overlay { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: linear-gradient( to top, var(--gw-card-overlay) 0%, rgba(4, 6, 10, 0.25) 45%, transparent 72% ); display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px 16px; gap: 8px; } .gateway-visual-card__name { font-family: var(--gw-font-ui); font-size: calc(1.05rem * (var(--t1-font-scale, 1) * 1.2)); font-weight: 600; letter-spacing: 0.02em; color: var(--gw-text); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); } /* Play icon su vertex card */ .gateway-visual-card__play-cta { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.16); opacity: 0.55; transition: opacity 200ms ease; pointer-events: none; } .gateway-visual-card__play-icon { width: 14px; height: 14px; fill: rgba(255, 255, 255, 0.88); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6)); margin-left: 2px; } /* Su hover la preview holo prende il posto ? il play scompare */ .gateway-carousel > li:hover .gateway-visual-card__play-cta, .gateway-carousel > li:focus-within .gateway-visual-card__play-cta { opacity: 0; } /* Fase 3.0.7 ? slot segnaposto (profili < 3) */ .gateway-carousel > li:has(.gateway-visual-card--ghost) { pointer-events: none; } /* Ghost: stesse dimensioni del link reale (a.gateway-visual-cardlink) ma non cliccabile */ .gateway-visual-cardlink--ghost { display: block; width: 100%; min-height: 0; aspect-ratio: 16 / 9; position: relative; z-index: 0; border-radius: 10px; overflow: visible; pointer-events: none; cursor: default; } .gateway-visual-card.gateway-visual-card--ghost { opacity: 0.42; filter: saturate(0.75); } .gateway-glow-pill--ghost { color: rgba(200, 220, 230, 0.55); border-color: rgba(120, 160, 180, 0.25); background: rgba(10, 20, 30, 0.45); } .gateway-glow-pill { align-self: flex-start; font-family: var(--gw-font-tech); font-size: calc(0.58rem * var(--t1-font-scale) * 1.08); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 12px; border-radius: 4px; border: 1px solid transparent; } .gateway-glow-pill--ready { color: color-mix(in srgb, var(--t1-state-ready) 75%, white 25%); background: color-mix(in srgb, var(--t1-state-ready) 14%, transparent); border-color: color-mix(in srgb, var(--t1-state-ready) 58%, transparent); box-shadow: 0 0 24px var(--gw-status-ready-glow), 0 0 46px color-mix(in srgb, var(--t1-state-ready) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--t1-state-ready) 10%, transparent); text-shadow: 0 0 14px color-mix(in srgb, var(--t1-state-ready) 65%, white 35%); } .gateway-glow-pill--pending { color: color-mix(in srgb, var(--t1-state-pending) 72%, white 28%); background: color-mix(in srgb, var(--t1-state-pending) 14%, transparent); border-color: color-mix(in srgb, var(--t1-state-pending) 55%, transparent); box-shadow: 0 0 26px var(--gw-status-pending-glow), 0 0 48px color-mix(in srgb, var(--t1-state-pending) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--t1-state-pending) 10%, transparent); text-shadow: 0 0 16px color-mix(in srgb, var(--t1-state-pending) 62%, white 38%); } .gateway-glow-pill--active { color: color-mix(in srgb, var(--t1-state-active) 68%, white 32%); background: color-mix(in srgb, var(--t1-state-active) 14%, transparent); border-color: color-mix(in srgb, var(--t1-state-active) 52%, transparent); box-shadow: 0 0 24px var(--gw-status-active-glow), 0 0 44px color-mix(in srgb, var(--t1-state-active) 20%, transparent), inset 0 0 16px color-mix(in srgb, var(--t1-state-active) 10%, transparent); text-shadow: 0 0 14px color-mix(in srgb, var(--t1-state-active) 60%, white 40%); } /* ?? Battito clinico (3.0.8) ? classe autonoma --pulse, indipendente da --elena ?? */ /* * Il glow non sparisce mai: va da "riposo" (30%) a "battito" (100%). * Ciclo 3.8s: inspire lenta ? plateau ? expire ? pausa ? repeat. * Nessun transform animato: evita nausea e conflitti con hover. * Applicato via JS solo su Vertex con workflow_status === 'in_corso'. */ @keyframes gw-heartbeat { 0% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gw-card-accent) 22%, transparent), 0 0 12px color-mix(in srgb, var(--gw-card-accent), transparent 72%), 0 4px 28px rgba(0, 0, 0, 0.45); } 38% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gw-card-accent) 52%, transparent), 0 0 28px color-mix(in srgb, var(--gw-card-accent), transparent 32%), 0 0 52px color-mix(in srgb, var(--gw-card-accent), transparent 65%), 0 4px 28px rgba(0, 0, 0, 0.42); } 55% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gw-card-accent) 44%, transparent), 0 0 20px color-mix(in srgb, var(--gw-card-accent), transparent 44%), 0 0 38px color-mix(in srgb, var(--gw-card-accent), transparent 72%), 0 4px 28px rgba(0, 0, 0, 0.44); } 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gw-card-accent) 22%, transparent), 0 0 12px color-mix(in srgb, var(--gw-card-accent), transparent 72%), 0 4px 28px rgba(0, 0, 0, 0.45); } } @keyframes gw-pulse-sustain { to { box-shadow: 0 0 26px color-mix(in srgb, var(--gw-card-accent), transparent 34%), 0 0 52px color-mix(in srgb, var(--gw-card-accent), transparent 62%), 0 12px 28px rgba(0, 0, 0, 0.5); } } /* Variante "tight": pre-preview Vertex void ??? blocco VERTEX-PREVIEW-STATE (ADR-010). */ @keyframes gw-pulse-sustain-tight { to { box-shadow: 0 0 16px color-mix(in srgb, var(--gw-card-accent), transparent 46%), 0 0 30px color-mix(in srgb, var(--gw-card-accent), transparent 76%), 0 10px 24px rgba(0, 0, 0, 0.46); } } /* Battito attivo: qualsiasi card con --pulse (JS la aggiunge solo su vertex in_corso) */ .gateway-visual-card.gateway-visual-card--pulse { animation: gw-heartbeat 3.8s ease-in-out infinite; } /* Al hover: battito "sale" verso massima luminosit? anzich? interrompersi di scatto */ .gateway-carousel > li:hover .gateway-visual-card.gateway-visual-card--pulse, .gateway-carousel > li:focus-within .gateway-visual-card.gateway-visual-card--pulse { animation: gw-pulse-sustain 0.5s ease-out forwards; } /* -- Vertex idle ? nessun in_corso ----------------------------------------- */ .gateway-carousel > li:has(.gateway-visual-card--idle) { pointer-events: none; } .gateway-visual-cardlink--idle { display: block; width: 100%; min-height: 0; aspect-ratio: 16 / 9; position: relative; z-index: 0; border-radius: 10px; overflow: visible; pointer-events: none; } .gateway-visual-card.gateway-visual-card--idle { --gw-card-accent: var(--gw-text-dim); opacity: 0.55; background: linear-gradient(160deg, rgba(16, 18, 28, 0.55) 0%, rgba(8, 10, 16, 0.72) 100% ); border-color: color-mix(in srgb, var(--gw-text-dim) 22%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .gateway-visual-card--idle .gateway-visual-card__thumb { background-image: linear-gradient(135deg, #0c0e14 0%, #111820 100%); opacity: 0.85; } .gateway-glow-pill--idle { color: rgba(180, 190, 210, 0.5); border-color: rgba(100, 110, 130, 0.25); background: rgba(8, 12, 20, 0.45); } /* -- Card "Galleria" (Base sinistra winged) -------------------------------- */ a.gateway-visual-cardlink--gallery, button.gateway-visual-cardlink--gallery { display: block; width: 100%; min-height: 0; aspect-ratio: 16 / 9; position: relative; z-index: 0; border-radius: 10px; overflow: visible; text-decoration: none; color: inherit; background: none; border: none; padding: 0; cursor: pointer; text-align: left; } .gateway-visual-card.gateway-visual-card--gallery { --gw-card-accent: var(--t1-palco-gallery-warm, #e0d8cc); opacity: 0.94; background: radial-gradient( ellipse 46% 38% at 20% 16%, color-mix(in srgb, var(--t1-palco-gallery-pearl, #f8f4ee) 52%, transparent) 0%, transparent 54% ), linear-gradient( 168deg, color-mix(in srgb, var(--t1-palco-gallery-pearl, #f8f4ee) 26%, #2a2a30) 0%, color-mix(in srgb, var(--t1-palco-gallery-warm, #e0d8cc) 22%, #1e1e22) 52%, color-mix(in srgb, var(--t1-palco-gallery-warm, #e0d8cc) 16%, #1a1a1e) 100% ); border-color: color-mix(in srgb, var(--t1-palco-gallery-rim, #e0d8cc) 36%, rgba(255, 255, 255, 0.06)); backdrop-filter: blur(10px) saturate(1.02); -webkit-backdrop-filter: blur(10px) saturate(1.02); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--t1-palco-gallery-pearl, #f8f4ee) 54%, transparent), inset 0 -16px 32px color-mix(in srgb, var(--t1-palco-gallery-warm, #d0c8bc) 12%, transparent), 0 12px 28px rgba(0, 0, 0, 0.42); transition: opacity 0.3s ease, box-shadow 0.3s ease; } .gateway-visual-card--gallery .gateway-visual-card__thumb { background-image: linear-gradient( 135deg, color-mix(in srgb, var(--t1-palco-gallery-pearl, #f8f4ee) 38%, #3a3834) 0%, color-mix(in srgb, var(--t1-palco-gallery-warm, #e0d8cc) 20%, #1e1e22) 52%, #141418 100% ); opacity: 0.76; } .gateway-console-icon--gallery svg { width: clamp(28px, 5vw, 40px); height: clamp(28px, 5vw, 40px); color: color-mix(in srgb, var(--t1-palco-gallery-pearl, #f4efe6) 42%, var(--t1-palco-gallery-warm, #d0c8bc)); opacity: 0.9; transition: opacity 0.3s ease, color 0.3s ease; } .gateway-glow-pill--gallery { color: color-mix(in srgb, var(--t1-palco-gallery-pearl, #f4efe6) 32%, var(--t1-palco-gallery-warm, #d0c8bc)); background: color-mix(in srgb, var(--t1-palco-gallery-warm, #d0c8bc) 10%, transparent); border-color: color-mix(in srgb, var(--t1-palco-gallery-rim, #d0c8bc) 40%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--t1-palco-gallery-pearl, #f4efe6) 22%, transparent), inset 0 0 6px color-mix(in srgb, var(--t1-palco-gallery-warm, #d0c8bc) 6%, transparent); } @media (hover: hover) and (pointer: fine) { .gateway-carousel > li:hover .gateway-visual-card.gateway-visual-card--gallery { opacity: 1; box-shadow: inset 0 2px 0 color-mix(in srgb, var(--t1-palco-gallery-pearl, #f8f4ee) 64%, transparent), inset 0 -14px 30px color-mix(in srgb, var(--t1-palco-gallery-warm, #e0d8cc) 12%, transparent), 0 12px 28px rgba(0, 0, 0, 0.46); } .gateway-carousel > li:hover .gateway-console-icon--gallery svg { opacity: 1; color: color-mix(in srgb, var(--t1-palco-gallery-pearl, #f4efe6) 32%, var(--t1-palco-gallery-warm, #d0c8bc)); } } .gateway-carousel > li:focus-within .gateway-visual-card.gateway-visual-card--gallery { opacity: 1; } /* -- Card vetro "Nuovo profilo" (riga 1 winged) ---------------------------- */ button.gateway-visual-cardlink--create { display: block; width: 100%; min-height: 0; aspect-ratio: 16 / 9; position: relative; z-index: 0; border-radius: 10px; overflow: visible; background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: inherit; } .gateway-visual-card.gateway-visual-card--create { --gw-card-accent: var(--t1-palco-delta-entry-ice, #b0d8fc); --t1-palco-create-pill-chroma: color-mix(in srgb, var(--t1-palco-peak-ice, #c4e8ff) 88%, #ffffff); border: 0.5px solid color-mix(in srgb, var(--t1-palco-peak-ice, #c4e8ff) var(--t1-palco-create-idle-rim, 15%), transparent); opacity: 0.94; filter: brightness(1); background: linear-gradient( 154deg, color-mix(in srgb, var(--t1-palco-delta-entry-ice, #b0d8fc) 62%, rgba(2, 16, 32, 0.05)) 0%, color-mix(in srgb, #9cc0e8 54%, rgba(2, 12, 28, 0.08)) 100% ), radial-gradient( ellipse 100% 82% at 50% 0%, color-mix(in srgb, var(--t1-palco-delta-entry-ice, #b0d8fc) 56%, transparent) 0%, transparent 62% ), radial-gradient( ellipse 95% 70% at 50% 48%, color-mix(in srgb, #9cc0e8 33%, transparent) 0%, transparent 58% ), radial-gradient( ellipse 88% 62% at 10% 40%, color-mix(in srgb, #9cc0e8 40%, transparent) 0%, transparent 54% ), radial-gradient( ellipse 72% 50% at 90% 12%, color-mix(in srgb, #b0d8fc 38%, transparent) 0%, transparent 52% ), linear-gradient( 128deg, color-mix(in srgb, #9cc0e8 22%, transparent) 0%, color-mix(in srgb, var(--t1-palco-delta-entry-ice, #b0d8fc) 16%, transparent) 40%, transparent 70% ) border-box; background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, border-box; backdrop-filter: blur(16px) saturate(1.08); -webkit-backdrop-filter: blur(16px) saturate(1.08); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--t1-palco-delta-entry-ice, #b0d8fc) 14%, transparent), inset 0 -6px 18px color-mix(in srgb, #9cc0e8 10%, transparent), 0 0 8px color-mix(in srgb, var(--t1-palco-delta-entry-ice, #b0d8fc) 8%, transparent), 0 12px 28px rgba(0, 0, 0, 0.34); transition: opacity 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, filter 0.3s ease; } .gateway-visual-card--create .gateway-visual-card__thumb { background-image: linear-gradient( 135deg, color-mix(in srgb, var(--t1-palco-delta-entry-ice, #b0d8fc) 44%, #a4c4e8) 0%, color-mix(in srgb, #9cc0e8 36%, #88b0d8) 52%, color-mix(in srgb, #7ca0cc 24%, #70a0c4) 100% ); opacity: 0.52; } .gateway-console-icon--create svg { width: clamp(28px, 5vw, 40px); height: clamp(28px, 5vw, 40px); color: color-mix(in srgb, var(--t1-palco-delta-entry-ice, #b0d8fc) 82%, #ffffff); opacity: 0.9; transition: opacity 0.3s ease, color 0.3s ease; } .gateway-glow-pill--create { color: var(--t1-palco-create-pill-chroma); background: color-mix(in srgb, var(--t1-palco-peak-ice, #c4e8ff) 18%, rgba(8, 20, 36, 0.42)); border-color: color-mix(in srgb, var(--t1-palco-peak-ice, #c4e8ff) 52%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--t1-palco-peak-ice, #c4e8ff) 24%, transparent), 0 0 14px color-mix(in srgb, var(--t1-palco-peak-ice, #c4e8ff) 16%, transparent); } .gateway-visual-card__sub--create { display: block; font-size: 0.52rem; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--t1-palco-delta-entry-ice, #b0d8fc) 62%, #98b4d0); margin-top: 0.14rem; } @media (hover: hover) and (pointer: fine) { .gateway-carousel > li:hover .gateway-visual-card.gateway-visual-card--create { opacity: 0.98; filter: brightness(1.03); border-color: color-mix(in srgb, var(--t1-palco-peak-ice, #c4e8ff) 52%, rgba(255, 255, 255, 0.08)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--t1-palco-peak-ice, #c4e8ff) 38%, transparent), inset 0 -10px 26px color-mix(in srgb, var(--t1-palco-delta-entry-ice, #b0d8fc) 12%, transparent), 0 0 28px color-mix(in srgb, var(--t1-palco-peak-ice, #c4e8ff) 27%, transparent), 0 16px 34px rgba(0, 0, 0, 0.44); } .gateway-carousel > li:hover .gateway-console-icon--create svg { opacity: 1; color: color-mix(in srgb, var(--t1-palco-delta-entry-ice-fill, #e4eef8) 76%, #ffffff); } } .gateway-carousel > li:focus-within .gateway-visual-card.gateway-visual-card--create { opacity: 1; } button.gateway-visual-cardlink--create:focus-visible { outline: 2px solid color-mix(in srgb, var(--t1-palco-trigger-ice, #e7f2ff) 84%, #fff); outline-offset: 3px; } /* -- Card "Nuovo Invito" (Base sinistra ? strumento fisso) ----------------- */ button.gateway-visual-cardlink--invite { display: block; width: 100%; min-height: 0; aspect-ratio: 16 / 9; position: relative; z-index: 0; border-radius: 10px; overflow: visible; background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: inherit; } /* Gradiente standby (Marco) ? opacit? ~0.8 */ .gateway-visual-card.gateway-visual-card--invite { --gw-card-accent: var(--gw-state-pending); opacity: 0.8; background: linear-gradient(145deg, rgba(20, 18, 12, 0.72) 0%, rgba(12, 10, 6, 0.82) 100% ); border-color: color-mix(in srgb, var(--gw-state-pending) 32%, rgba(255,255,255,0.06)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity 0.3s ease, box-shadow 0.3s ease; } .gateway-visual-card--invite .gateway-visual-card__thumb { background-image: linear-gradient( 135deg, #100e08 0%, color-mix(in srgb, var(--gw-state-pending) 28%, #1a1206) 48%, #0a0804 100% ); opacity: 0.7; } /* Icone console (invito + progetti) ? centratura assoluta */ .gateway-console-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; } .gateway-console-icon--invite svg { width: clamp(28px, 5vw, 40px); height: clamp(28px, 5vw, 40px); color: color-mix(in srgb, var(--gw-state-pending) 72%, white 28%); opacity: 0.85; transition: opacity 0.3s ease, color 0.3s ease; } .gateway-glow-pill--invite { color: color-mix(in srgb, var(--gw-state-pending) 68%, white 32%); background: color-mix(in srgb, var(--gw-state-pending) 10%, transparent); border-color: color-mix(in srgb, var(--gw-state-pending) 36%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--gw-state-pending) 24%, transparent), inset 0 0 8px color-mix(in srgb, var(--gw-state-pending) 8%, transparent); } @media (hover: hover) and (pointer: fine) { .gateway-carousel > li:hover .gateway-visual-card.gateway-visual-card--invite { opacity: 1; box-shadow: 0 0 18px color-mix(in srgb, var(--gw-state-pending), transparent 54%), 0 0 36px color-mix(in srgb, var(--gw-state-pending), transparent 76%), 0 12px 28px rgba(0, 0, 0, 0.5); } .gateway-carousel > li:hover .gateway-console-icon--invite svg { opacity: 1; color: color-mix(in srgb, var(--gw-state-pending) 88%, white 12%); } } .gateway-carousel > li:focus-within .gateway-visual-card.gateway-visual-card--invite { opacity: 1; } /* -- Card Vault/Roster (Base destra) ? vetro cyan, apre overlay Vault ------- */ /* Accetta sia che