/* ============================================ TEMPLATE PRESETS Per-template design-system overrides activated via [data-tpl="..."] attribute on . This file is the differentiation layer — it ensures no two templates feel the same. ============================================ */ /* ============================================ ROSATI — Pizzeria/Trattoria ============================================ */ [data-tpl="rosati-a"] { --btn-radius: 6px; --btn-hover-transform: translateY(-2px); --btn-hover-shadow: 0 8px 32px rgba(232, 113, 42, 0.35); --card-radius: 8px; --card-hover-transform: translateY(-4px) rotate(-0.5deg); --card-hover-shadow: 0 12px 40px rgba(232, 113, 42, 0.18); --nav-link-underline: var(--accent-ember, #D4723C); --footer-social-hover-bg: var(--accent-warm, #C8A96E); --selection-bg: rgba(232, 113, 42, 0.3); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } [data-tpl="rosati-a"] .card:hover { filter: brightness(1.04); } [data-tpl="rosati-b"] { --btn-radius: 2px; --btn-hover-transform: translateY(-1px); --btn-hover-shadow: 0 4px 18px rgba(181, 68, 42, 0.25); --card-radius: 4px; --card-hover-transform: translateY(-3px); --card-hover-shadow: 0 8px 24px rgba(26, 18, 16, 0.08); --nav-link-underline: #B5442A; --selection-bg: rgba(181, 68, 42, 0.2); } /* ============================================ BALZAN — HVAC & Plumbing (Professional Trust) ============================================ */ [data-tpl="balzan-a"] { --btn-radius: 4px; --btn-hover-transform: translateY(-1px); --btn-hover-shadow: 0 6px 18px rgba(21, 101, 192, 0.3); --card-radius: 8px; --card-hover-transform: translateY(-2px); --card-hover-shadow: 0 6px 24px rgba(10, 25, 41, 0.08); --nav-link-underline: #1565C0; --selection-bg: rgba(21, 101, 192, 0.2); } [data-tpl="balzan-a"] .card { border-left: 3px solid transparent; transition: border-left-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } [data-tpl="balzan-a"] .card:hover { border-left-color: #1565C0; } [data-tpl="balzan-b"] { --btn-radius: 4px; --btn-hover-transform: translateY(-1px); --card-radius: 6px; --card-hover-transform: translateY(-2px); --nav-link-underline: #2D6A8F; --selection-bg: rgba(45, 106, 143, 0.2); } [data-tpl="balzan-b"] .card { border-left: 3px solid transparent; } [data-tpl="balzan-b"] .card:hover { border-left-color: #2D6A8F; } [data-tpl="balzan-c"] { --btn-radius: 4px; --btn-hover-transform: translateY(-1px); --btn-hover-shadow: 0 0 24px rgba(79, 195, 247, 0.4); --card-radius: 8px; --card-hover-transform: translateY(-3px); --card-hover-shadow: 0 10px 32px rgba(79, 195, 247, 0.15); --nav-link-underline: #4FC3F7; --selection-bg: rgba(79, 195, 247, 0.25); } /* ============================================ GIRASOLE — Erboristeria (Botanical Apothecary) ============================================ */ [data-tpl="girasole-a"] { --btn-radius: 8px; --btn-hover-transform: scale(1.02); --btn-hover-shadow: 0 8px 24px rgba(139, 176, 94, 0.25); --card-radius: 12px; --card-hover-transform: translateY(-3px) scale(1.01); --card-hover-shadow: 0 12px 30px rgba(14, 26, 14, 0.4); --nav-link-underline: #8BB05E; --selection-bg: rgba(139, 176, 94, 0.3); } [data-tpl="girasole-b"] { --btn-radius: 50px; --btn-hover-transform: scale(1.03); --btn-hover-shadow: 0 6px 22px rgba(74, 122, 74, 0.25); --card-radius: 16px; --card-hover-transform: translateY(-4px); --card-hover-shadow: 0 14px 36px rgba(74, 122, 74, 0.12); --nav-link-underline: #4A7A4A; --selection-bg: rgba(74, 122, 74, 0.2); } [data-tpl="girasole-c"] { --btn-radius: 6px; --btn-hover-transform: translateY(-2px); --card-radius: 8px; --card-hover-transform: translateY(-3px); --card-hover-shadow: 0 8px 28px rgba(61, 122, 92, 0.12); --nav-link-underline: #3D7A5C; --selection-bg: rgba(61, 122, 92, 0.2); } /* ============================================ FARMACIA — Pharmacy (Clinical Clarity) ============================================ */ [data-tpl="farmacia-a"], [data-tpl="farmacia-b"], [data-tpl="farmacia-c"] { --btn-radius: 4px; --btn-hover-transform: none; --btn-hover-shadow: none; --card-radius: 6px; --card-hover-transform: none; } [data-tpl="farmacia-a"] { --nav-link-underline: #2D8C4E; --selection-bg: rgba(45, 140, 78, 0.2); } [data-tpl="farmacia-a"] .card { border-left: 3px solid transparent; transition: border-left-color 0.25s ease, background-color 0.25s ease; } [data-tpl="farmacia-a"] .card:hover { border-left-color: #2D8C4E; background-color: rgba(45, 140, 78, 0.04); } [data-tpl="farmacia-a"] .btn--primary:hover { background: #1B6B35; filter: none; } [data-tpl="farmacia-b"] { --nav-link-underline: #1A7A7A; --selection-bg: rgba(26, 122, 122, 0.2); } [data-tpl="farmacia-b"] .card:hover { background-color: rgba(26, 122, 122, 0.04); } [data-tpl="farmacia-c"] { --nav-link-underline: #38D67A; --selection-bg: rgba(56, 214, 122, 0.25); } /* ============================================ EFFEBI — Salumificio (Luxury Artisanal) ============================================ */ [data-tpl="effebi-a"] { --btn-radius: 0; --btn-hover-transform: scale(1.02); --btn-hover-shadow: 0 8px 32px rgba(139, 26, 43, 0.4); --card-radius: 0; --card-hover-transform: scale(1.02); --card-hover-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); --nav-link-underline: #C8A050; --selection-bg: rgba(139, 26, 43, 0.35); } [data-tpl="effebi-b"] { --btn-radius: 0; --btn-hover-transform: translateY(-2px); --card-radius: 2px; --card-hover-transform: translateY(-4px); --nav-link-underline: #6B1E2E; --selection-bg: rgba(107, 30, 46, 0.25); } [data-tpl="effebi-c"] { --btn-radius: 0; --btn-hover-transform: scale(1.02); --card-radius: 0; --card-hover-transform: scale(1.01); --nav-link-underline: #D4382D; --selection-bg: rgba(212, 56, 45, 0.3); } /* ============================================ ARMONIA — Beauty Salon (Luxury Simplicity) ============================================ */ [data-tpl="armonia-a"] { --btn-radius: 50px; --btn-hover-transform: translateY(-2px) scale(1.02); --btn-hover-shadow: 0 10px 32px rgba(184, 128, 108, 0.3); --card-radius: 16px; --card-hover-transform: translateY(-4px); --card-hover-shadow: 0 16px 40px rgba(184, 128, 108, 0.15); --nav-link-underline: #B8806C; --selection-bg: rgba(184, 128, 108, 0.25); } [data-tpl="armonia-b"] { --btn-radius: 50px; --btn-hover-transform: translateY(-2px); --btn-hover-shadow: 0 0 32px rgba(200, 154, 106, 0.4); --card-radius: 12px; --card-hover-transform: translateY(-3px); --card-hover-shadow: 0 14px 36px rgba(0, 0, 0, 0.4); --nav-link-underline: #C89A6A; --selection-bg: rgba(200, 154, 106, 0.3); } [data-tpl="armonia-c"] { --btn-radius: 50px; --btn-hover-transform: scale(1.02); --card-radius: 16px; --card-hover-transform: translateY(-3px); --card-hover-shadow: 0 14px 36px rgba(90, 138, 106, 0.15); --nav-link-underline: #5A8A6A; --selection-bg: rgba(90, 138, 106, 0.2); } /* ============================================ CLIMA WORLD — HVAC (Tech Comfort) ============================================ */ [data-tpl="climaworld-a"] { --btn-radius: 8px; --btn-hover-transform: translateY(-2px); --btn-hover-shadow: 0 8px 24px rgba(13, 122, 95, 0.3); --card-radius: 12px; --card-hover-transform: translateY(-3px); --card-hover-shadow: 0 12px 32px rgba(13, 122, 95, 0.12); --nav-link-underline: #0D7A5F; --selection-bg: rgba(13, 122, 95, 0.2); } [data-tpl="climaworld-b"] { --btn-radius: 8px; --btn-hover-transform: translateY(-2px); --btn-hover-shadow: 0 0 28px rgba(0, 212, 170, 0.5); --card-radius: 12px; --card-hover-transform: translateY(-3px); --card-hover-shadow: 0 12px 36px rgba(0, 212, 170, 0.18); --nav-link-underline: #00D4AA; --selection-bg: rgba(0, 212, 170, 0.3); } /* ============================================ RB DESIGN — Furniture (Gallery Minimalism) ============================================ */ [data-tpl="rbdesign-a"] { --btn-radius: 0; --btn-hover-transform: none; --btn-hover-shadow: none; --card-radius: 4px; --card-hover-transform: none; --nav-link-underline: #A68B6A; --selection-bg: rgba(166, 139, 106, 0.25); } [data-tpl="rbdesign-a"] .btn--primary:hover { background: var(--text-primary, #1A1A18); color: var(--surface-primary, #F7F6F3); filter: none; } [data-tpl="rbdesign-a"] .card { overflow: hidden; background: transparent; padding: 0; } [data-tpl="rbdesign-a"] .card img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } [data-tpl="rbdesign-a"] .card:hover img { transform: scale(1.05); } [data-tpl="rbdesign-b"] { --btn-radius: 0; --btn-hover-transform: none; --card-radius: 0; --card-hover-transform: none; --nav-link-underline: #0A0A0A; --selection-bg: rgba(10, 10, 10, 0.2); } [data-tpl="rbdesign-c"] { --btn-radius: 2px; --btn-hover-transform: none; --btn-hover-shadow: 0 0 24px rgba(200, 168, 120, 0.3); --card-radius: 4px; --card-hover-transform: scale(1.02); --nav-link-underline: #C8A878; --selection-bg: rgba(200, 168, 120, 0.25); } /* ============================================ 3D SERVICE — Pest Control (Professional Shield) ============================================ */ [data-tpl="3dservice-a"] { --btn-radius: 6px; --btn-hover-transform: translateY(-1px); --btn-hover-shadow: 0 6px 18px rgba(45, 122, 61, 0.25); --card-radius: 8px; --card-hover-transform: translateY(-2px); --card-hover-shadow: 0 8px 24px rgba(45, 122, 61, 0.1); --nav-link-underline: #2D7A3D; --selection-bg: rgba(45, 122, 61, 0.2); } [data-tpl="3dservice-a"] .card { border-left: 3px solid transparent; } [data-tpl="3dservice-a"] .card:hover { border-left-color: #2D7A3D; } [data-tpl="3dservice-b"] { --btn-radius: 6px; --btn-hover-transform: translateY(-1px); --btn-hover-shadow: 0 0 20px rgba(76, 175, 80, 0.4); --card-radius: 10px; --card-hover-transform: translateY(-2px); --nav-link-underline: #4CAF50; --selection-bg: rgba(76, 175, 80, 0.25); } [data-tpl="3dservice-c"] { --btn-radius: 8px; --btn-hover-transform: translateY(-2px); --card-radius: 12px; --card-hover-transform: translateY(-3px); --nav-link-underline: #558B2F; --selection-bg: rgba(85, 139, 47, 0.2); } /* ============================================ LA BOTTEGA — Takeaway Pizza ============================================ */ [data-tpl="bottega-a"] { --btn-radius: 8px; --btn-hover-transform: translateY(-3px) scale(1.02); --btn-hover-shadow: 0 12px 28px rgba(196, 53, 26, 0.35); --card-radius: 12px; --card-hover-transform: translateY(-3px); --card-hover-shadow: 0 12px 32px rgba(196, 53, 26, 0.15); --nav-link-underline: #C4351A; --selection-bg: rgba(196, 53, 26, 0.25); } [data-tpl="bottega-b"] { --btn-radius: 10px; --btn-hover-transform: translateY(-3px) scale(1.03); --btn-hover-shadow: 0 0 28px rgba(255, 107, 53, 0.5); --card-radius: 14px; --card-hover-transform: translateY(-4px) scale(1.02); --nav-link-underline: #FF6B35; --selection-bg: rgba(255, 107, 53, 0.3); } [data-tpl="bottega-c"] { --btn-radius: 6px; --btn-hover-transform: translateY(-2px); --btn-hover-shadow: 0 8px 22px rgba(227, 28, 37, 0.3); --card-radius: 8px; --card-hover-transform: translateY(-3px); --nav-link-underline: #E31C25; --selection-bg: rgba(227, 28, 37, 0.25); } /* ============================================ BAR MARACAIBO — Bar/Aperitivi ============================================ */ [data-tpl="maracaibo-a"] { --btn-radius: 2px; --btn-hover-transform: scale(1.02); --btn-hover-shadow: 0 0 32px rgba(212, 146, 60, 0.4); --card-radius: 4px; --card-hover-transform: translateY(-2px); --card-hover-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); --nav-link-underline: #D4923C; --selection-bg: rgba(212, 146, 60, 0.3); } [data-tpl="maracaibo-a"] .btn--outline:hover { background: rgba(212, 146, 60, 0.1); color: #D4923C; border-color: #D4923C; } [data-tpl="maracaibo-b"] { --btn-radius: 2px; --btn-hover-transform: scale(1.02); --btn-hover-shadow: 0 0 28px rgba(200, 160, 80, 0.4); --card-radius: 4px; --card-hover-transform: translateY(-2px); --nav-link-underline: #C8A050; --selection-bg: rgba(200, 160, 80, 0.3); } [data-tpl="maracaibo-c"] { --btn-radius: 4px; --btn-hover-transform: translateY(-2px); --btn-hover-shadow: 0 8px 24px rgba(200, 90, 40, 0.25); --card-radius: 8px; --card-hover-transform: translateY(-3px); --nav-link-underline: #C85A28; --selection-bg: rgba(200, 90, 40, 0.25); } /* ============================================ LO SFIZIO — Pizza al Taglio (Playful Fast) ============================================ */ [data-tpl="sfizio-a"] { --btn-radius: 12px; --btn-hover-transform: translateY(-3px) scale(1.04) rotate(-1deg); --btn-hover-shadow: 0 10px 28px rgba(255, 87, 34, 0.4); --card-radius: 16px; --card-hover-transform: translateY(-3px) rotate(0.5deg); --card-hover-shadow: 0 14px 36px rgba(255, 87, 34, 0.18); --nav-link-underline: #FF5722; --selection-bg: rgba(255, 87, 34, 0.3); } [data-tpl="sfizio-b"] { --btn-radius: 12px; --btn-hover-transform: translateY(-3px) scale(1.04); --btn-hover-shadow: 0 0 32px rgba(255, 214, 0, 0.6); --card-radius: 14px; --card-hover-transform: translateY(-4px); --nav-link-underline: #FFD600; --selection-bg: rgba(255, 214, 0, 0.35); } [data-tpl="sfizio-c"] { --btn-radius: 10px; --btn-hover-transform: translateY(-2px) scale(1.02); --btn-hover-shadow: 0 8px 22px rgba(230, 74, 25, 0.3); --card-radius: 12px; --card-hover-transform: translateY(-3px); --nav-link-underline: #E64A19; --selection-bg: rgba(230, 74, 25, 0.25); } /* ============================================ SAMBENINI — Auto Repair (Industrial Tech) ============================================ */ [data-tpl="sambenini-a"] { --btn-radius: 2px; --btn-hover-transform: translateY(-2px); --btn-hover-shadow: 0 0 28px rgba(61, 122, 219, 0.4); --card-radius: 4px; --card-hover-transform: translateY(-2px); --card-hover-shadow: 0 12px 32px rgba(61, 122, 219, 0.18); --nav-link-underline: #3D7ADB; --selection-bg: rgba(61, 122, 219, 0.25); } [data-tpl="sambenini-a"] .card { border: 1px solid transparent; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } [data-tpl="sambenini-a"] .card:hover { border-color: rgba(61, 122, 219, 0.3); } [data-tpl="sambenini-b"] { --btn-radius: 2px; --btn-hover-transform: translateY(-2px); --btn-hover-shadow: 0 8px 24px rgba(26, 93, 181, 0.3); --card-radius: 4px; --card-hover-transform: translateY(-2px); --nav-link-underline: #1A5DB5; --selection-bg: rgba(26, 93, 181, 0.2); } /* ============================================ GLOBAL UTILITIES — Grain Texture (atmospheric) ============================================ */ .grain-overlay { position: relative; } .grain-overlay::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; z-index: 1; mix-blend-mode: overlay; } /* Apply grain automatically to atmospheric templates */ [data-tpl="rosati-a"] .hero, [data-tpl="maracaibo-a"] .hero, [data-tpl="maracaibo-b"] .hero, [data-tpl="effebi-a"] .hero, [data-tpl="effebi-c"] .hero { position: relative; } [data-tpl="rosati-a"] .hero::after, [data-tpl="maracaibo-a"] .hero::after, [data-tpl="maracaibo-b"] .hero::after, [data-tpl="effebi-a"] .hero::after, [data-tpl="effebi-c"] .hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; z-index: 5; mix-blend-mode: overlay; } /* ============================================ PLAYFUL TILT — for Lo Sfizio cards ============================================ */ @media (hover: hover) and (pointer: fine) { [data-tpl="sfizio-a"] .card, [data-tpl="sfizio-b"] .card, [data-tpl="sfizio-c"] .card { transform-style: preserve-3d; perspective: 1000px; } [data-tpl="sfizio-a"] .card:hover, [data-tpl="sfizio-b"] .card:hover, [data-tpl="sfizio-c"] .card:hover { transform: translateY(-4px) rotateZ(-0.5deg) rotateX(2deg); } } /* ============================================ LUXURY MAGNETIC BUTTONS — for premium templates (Tier 3: Armonia, RB Design, Effebi, Maracaibo) Enhanced via JS animation, this is the CSS base. ============================================ */ .btn--magnetic { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } /* ============================================ FILLED FOR EMERGENCY (Balzan, Sambenini) ============================================ */ .emergency-pulse { position: relative; } .emergency-pulse::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.6); animation: emergencyPulse 2s cubic-bezier(0.66, 0, 0, 1) infinite; pointer-events: none; } @keyframes emergencyPulse { to { box-shadow: 0 0 0 18px rgba(198, 40, 40, 0); } } @media (prefers-reduced-motion: reduce) { .emergency-pulse::before { animation: none; } } /* ============================================ FOCUS STATES — Per-template accent color ============================================ */ [data-tpl] :focus-visible { outline: 2px solid var(--nav-link-underline, var(--accent-primary, #1E6BA5)); outline-offset: 3px; border-radius: 2px; } /* ============================================ SCROLL PROGRESS BAR — show on long pages ============================================ */ @supports (animation-timeline: scroll()) { [data-tpl="effebi-a"] .scroll-progress, [data-tpl="effebi-b"] .scroll-progress, [data-tpl="effebi-c"] .scroll-progress, [data-tpl="rbdesign-a"] .scroll-progress, [data-tpl="rbdesign-c"] .scroll-progress { display: block; } } /* ============================================ ELEGANT TEXT BALANCING for hero headings ============================================ */ .hero__title, .hero h1 { text-wrap: balance; } /* ============================================ PRELOADER — Tier 3 atmospheric templates ============================================ */ .preloader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: var(--bg-primary, var(--surface-primary, #0a0a0a)); pointer-events: none; } .preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .preloader__logo { font-size: 1.4rem; font-weight: 700; color: var(--text-primary, #fff); letter-spacing: 0.1em; text-transform: uppercase; animation: preloaderPulse 1.6s ease-in-out infinite alternate; } .preloader__bar { width: 60px; height: 1px; background: var(--text-muted, rgba(255, 255, 255, 0.3)); position: relative; overflow: hidden; } .preloader__bar::after { content: ''; position: absolute; inset: 0; background: var(--accent-primary, var(--accent, #d4a050)); transform-origin: left; animation: preloaderProgress 1.6s ease-in-out infinite alternate; } @keyframes preloaderPulse { from { opacity: 0.5; } to { opacity: 1; } } @keyframes preloaderProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .preloader { display: none !important; } } /* ============================================ SCROLL PROGRESS BAR (Tier 3) ============================================ */ .scroll-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: transparent; z-index: 9999; pointer-events: none; } .scroll-progress-bar__fill { height: 100%; width: 0; background: var(--accent-primary, var(--nav-link-underline, #1E6BA5)); transition: width 0.05s linear; } @supports (animation-timeline: scroll()) { .scroll-progress-bar__fill { width: 100%; transform-origin: left; transform: scaleX(0); animation: scrollProgressFill linear; animation-timeline: scroll(); transition: none; } @keyframes scrollProgressFill { from { transform: scaleX(0); } to { transform: scaleX(1); } } } /* ============================================ WEBGL BACKGROUND CANVAS Renders behind hero content but ABOVE the template's own decorative pseudo-elements (radial gradients, grain, etc) so the shader is the dominant visual. ============================================ */ canvas.webgl-bg { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: block !important; z-index: 1 !important; pointer-events: none !important; opacity: 1 !important; visibility: visible !important; } .hero { position: relative; isolation: isolate; } /* Make sure hero content sits above the WebGL canvas */ .hero > *:not(canvas):not(script) { position: relative; z-index: 3; } /* Push existing pseudo-element decorations behind the canvas so the WebGL shader is the dominant background visual */ .hero:has(> canvas.webgl-bg)::before, .hero:has(> canvas.webgl-bg)::after { z-index: 0 !important; opacity: 0.4 !important; } /* Decorative inner elements (smoke, embers, particles divs) stay above the canvas but below content */ [data-tpl] .hero__smoke, [data-tpl] .hero__embers, [data-tpl] .hero__diagonal, [data-tpl] .hero__bg, [data-tpl] .hero__overlay, [data-tpl] .hero__particles, [data-tpl] .hero__glow { z-index: 2 !important; opacity: 0.5 !important; mix-blend-mode: screen; } /* Default palettes per template (override in template style.css if needed) */ [data-tpl="effebi-a"] .webgl-bg { --webgl-c1: #0A0507; --webgl-c2: #2A1520; --webgl-c3: #C8A050; } [data-tpl="effebi-b"] .webgl-bg { --webgl-c1: #FBF6EE; --webgl-c2: #E8D8C8; --webgl-c3: #6B1E2E; } [data-tpl="effebi-c"] .webgl-bg { --webgl-c1: #0F0F0F; --webgl-c2: #1A1A1A; --webgl-c3: #D4382D; } [data-tpl="armonia-a"] .webgl-bg { --webgl-c1: #FBF8F6; --webgl-c2: #E8D8CC; --webgl-c3: #B8806C; } [data-tpl="armonia-b"] .webgl-bg { --webgl-c1: #0A0908; --webgl-c2: #2A2420; --webgl-c3: #C89A6A; } [data-tpl="armonia-c"] .webgl-bg { --webgl-c1: #F8FAF6; --webgl-c2: #E0EFE0; --webgl-c3: #5A8A6A; } [data-tpl="rbdesign-a"] .webgl-bg { --webgl-c1: #F7F6F3; --webgl-c2: #E8E2D8; --webgl-c3: #A68B6A; } [data-tpl="rbdesign-b"] .webgl-bg { --webgl-c1: #FFFFFF; --webgl-c2: #E8E8E8; --webgl-c3: #1A1A1A; } [data-tpl="rbdesign-c"] .webgl-bg { --webgl-c1: #0C0B0A; --webgl-c2: #1A1918; --webgl-c3: #C8A878; } [data-tpl="maracaibo-a"] .webgl-bg { --webgl-c1: #0D0A08; --webgl-c2: #2A1A10; --webgl-c3: #D4923C; } [data-tpl="maracaibo-b"] .webgl-bg { --webgl-c1: #08080E; --webgl-c2: #1E1E2A; --webgl-c3: #C8A050; } [data-tpl="maracaibo-c"] .webgl-bg { --webgl-c1: #FBF5EE; --webgl-c2: #F0E0C8; --webgl-c3: #C85A28; } [data-tpl="rosati-a"] .webgl-bg { --webgl-c1: #0F0A07; --webgl-c2: #261C16; --webgl-c3: #E8712A; } [data-tpl="rosati-b"] .webgl-bg { --webgl-c1: #FDFAF5; --webgl-c2: #F5EDE0; --webgl-c3: #B5442A; } [data-tpl="girasole-a"] .webgl-bg { --webgl-c1: #0E1A0E; --webgl-c2: #152015; --webgl-c3: #8BB05E; } [data-tpl="girasole-b"] .webgl-bg { --webgl-c1: #FAFDF7; --webgl-c2: #E0EFD8; --webgl-c3: #4A7A4A; } [data-tpl="girasole-c"] .webgl-bg { --webgl-c1: #F7F6F3; --webgl-c2: #E0EDDC; --webgl-c3: #3D7A5C; } [data-tpl="bottega-a"] .webgl-bg { --webgl-c1: #FFF8F0; --webgl-c2: #F5E8D8; --webgl-c3: #C4351A; } [data-tpl="bottega-b"] .webgl-bg { --webgl-c1: #0F0A07; --webgl-c2: #1A1410; --webgl-c3: #FF6B35; } [data-tpl="bottega-c"] .webgl-bg { --webgl-c1: #FFFFFF; --webgl-c2: #F5F5F5; --webgl-c3: #E31C25; } [data-tpl="sfizio-a"] .webgl-bg { --webgl-c1: #FFFAF0; --webgl-c2: #FFF0D4; --webgl-c3: #FF5722; } [data-tpl="sfizio-b"] .webgl-bg { --webgl-c1: #0F0F0F; --webgl-c2: #1A1A1A; --webgl-c3: #FFD600; } [data-tpl="sfizio-c"] .webgl-bg { --webgl-c1: #FFFFFF; --webgl-c2: #F8F4EE; --webgl-c3: #E64A19; } [data-tpl="sambenini-a"] .webgl-bg { --webgl-c1: #0A0C14; --webgl-c2: #141828; --webgl-c3: #3D7ADB; } [data-tpl="sambenini-b"] .webgl-bg { --webgl-c1: #F4F6F8; --webgl-c2: #E8ECF0; --webgl-c3: #1A5DB5; } [data-tpl="balzan-a"] .webgl-bg { --webgl-c1: #F8FAFB; --webgl-c2: #E3F2FD; --webgl-c3: #1565C0; } [data-tpl="balzan-b"] .webgl-bg { --webgl-c1: #FAF9F7; --webgl-c2: #EAEDF2; --webgl-c3: #2D6A8F; } [data-tpl="balzan-c"] .webgl-bg { --webgl-c1: #0F1419; --webgl-c2: #1A2332; --webgl-c3: #4FC3F7; } [data-tpl="climaworld-a"] .webgl-bg { --webgl-c1: #F5F9F7; --webgl-c2: #E0F2EC; --webgl-c3: #0D7A5F; } [data-tpl="climaworld-b"] .webgl-bg { --webgl-c1: #0A0F14; --webgl-c2: #141E28; --webgl-c3: #00D4AA; } [data-tpl="3dservice-a"] .webgl-bg { --webgl-c1: #F5F8F5; --webgl-c2: #E0F0E0; --webgl-c3: #2D7A3D; } [data-tpl="3dservice-b"] .webgl-bg { --webgl-c1: #0A1410; --webgl-c2: #141E18; --webgl-c3: #4CAF50; } [data-tpl="3dservice-c"] .webgl-bg { --webgl-c1: #FAFBF8; --webgl-c2: #F0F2EC; --webgl-c3: #558B2F; } [data-tpl="farmacia-a"] .webgl-bg { --webgl-c1: #FAFCFA; --webgl-c2: #F0F5F0; --webgl-c3: #2D8C4E; } [data-tpl="farmacia-b"] .webgl-bg { --webgl-c1: #F9F7F4; --webgl-c2: #EFECEA; --webgl-c3: #1A7A7A; } [data-tpl="farmacia-c"] .webgl-bg { --webgl-c1: #0A1A12; --webgl-c2: #122A1E; --webgl-c3: #38D67A; } /* ============================================ SCROLL-LINKED COLOR SHIFT (gethapply pattern) Body[data-color] swaps drive nav + accent + bg Each business has a palette set ============================================ */ body { transition: background-color 0.8s cubic-bezier(0.65, 0, 0.35, 1), color 0.6s ease; } /* Apply data-color BACKGROUND to the whole page, not just nav. This is the dramatic gethapply-style scroll color shift. */ body[data-color="warm"] { background-color: #F5EDE0; color: #1A1210; } body[data-color="cool"] { background-color: #E8F0F5; color: #0A1929; } body[data-color="dark"] { background-color: #0F0A07; color: #F5EDE4; } body[data-color="light"] { background-color: #FAFBFA; color: #1A1A1A; } body[data-color="gold"] { background-color: #2A1520; color: #F0E8E0; } body[data-color="rose"] { background-color: #FBF8F6; color: #2A2320; } body[data-color="forest"] { background-color: #0E1A0E; color: #E8EDE4; } body[data-color="copper"] { background-color: #1A0F08; color: #F0E8D8; } body[data-color="ember"] { background-color: #1A1410; color: #F5EDE0; } body[data-color="cream"] { background-color: #FBF5EE; color: #1A1008; } /* Per-template scoping: only apply if the template opts in via data-tpl AND the page has at least one data-c section. Some templates have their own opinionated body bg via style.css — we don't override unless this body[data-color] is actually set. */ .nav { transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Generic color palettes activated by [data-color="..."] Templates assign data-c="palette-name" to sections */ body[data-color="warm"] { --color-shift-bg: #F5EDE0; --color-shift-fg: #1A1210; --color-shift-accent: #E8712A; } body[data-color="cool"] { --color-shift-bg: #E8F0F5; --color-shift-fg: #0A1929; --color-shift-accent: #1565C0; } body[data-color="dark"] { --color-shift-bg: #0F0A07; --color-shift-fg: #F5EDE4; --color-shift-accent: #C8A050; } body[data-color="light"] { --color-shift-bg: #FAFBFA; --color-shift-fg: #1A1A1A; --color-shift-accent: #3D7A5C; } body[data-color="gold"] { --color-shift-bg: #2A1520; --color-shift-fg: #F0E8E0; --color-shift-accent: #C8A050; } body[data-color="rose"] { --color-shift-bg: #FBF8F6; --color-shift-fg: #2A2320; --color-shift-accent: #B8806C; } body[data-color="forest"] { --color-shift-bg: #0E1A0E; --color-shift-fg: #E8EDE4; --color-shift-accent: #8BB05E; } body[data-color="copper"] { --color-shift-bg: #1A0F08; --color-shift-fg: #F0E8D8; --color-shift-accent: #D4923C; } body[data-color="ember"] { --color-shift-bg: #1A1410; --color-shift-fg: #F5EDE0; --color-shift-accent: #FF6B35; } body[data-color="cream"] { --color-shift-bg: #FBF5EE; --color-shift-fg: #1A1008; --color-shift-accent: #C85A28; } /* When data-color is set, the nav shifts subtly */ body[data-color] .nav { background-color: color-mix(in srgb, var(--color-shift-bg, transparent) 92%, transparent); color: var(--color-shift-fg, inherit); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } body[data-color] .nav__logo, body[data-color] .nav__links a { color: var(--color-shift-fg, inherit); transition: color 0.4s ease; } body[data-color] .nav__links a::after { background: var(--color-shift-accent, currentColor); } body[data-color] .nav__hamburger span { background: var(--color-shift-fg, currentColor); } /* Override only when nav doesn't have its own opaque bg */ @media (max-width: 767px) { body[data-color] .nav__links { background: var(--color-shift-bg, var(--bg-primary, #fff)); color: var(--color-shift-fg, inherit); } } /* ============================================ IMAGE REVEAL (floema pattern) — two-layer clip-path animation ============================================ */ .image-reveal { position: relative; display: block; overflow: hidden; } .image-reveal__bg { position: absolute; inset: 0; background-color: var(--reveal-bg, var(--accent-primary, currentColor)); clip-path: inset(0 0 100% 0); z-index: 1; } .image-reveal__img, .image-reveal img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 100% 0); z-index: 2; } /* Per-template reveal background colors */ [data-tpl="rosati-a"] .image-reveal__bg { background-color: #E8712A; } [data-tpl="effebi-a"] .image-reveal__bg { background-color: #C8A050; } [data-tpl="armonia-a"] .image-reveal__bg { background-color: #B8806C; } [data-tpl="rbdesign-a"] .image-reveal__bg { background-color: #A68B6A; } [data-tpl="maracaibo-a"] .image-reveal__bg { background-color: #D4923C; } [data-tpl="girasole-a"] .image-reveal__bg { background-color: #8BB05E; } /* ============================================ CURSOR BLOB — soft glow follower ============================================ */ .cursor-blob { position: fixed; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%; pointer-events: none; z-index: 9998; mix-blend-mode: difference; background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.5) 35%, rgba(255,255,255,0) 70%); transition: opacity 0.25s ease; will-change: transform; filter: blur(0.5px); } .cursor-blob--hover { mix-blend-mode: difference; } .cursor-dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 9999; will-change: transform; transition: opacity 0.25s ease; } /* Hide native cursor on premium templates only */ [data-tpl="effebi-a"], [data-tpl="effebi-b"], [data-tpl="effebi-c"], [data-tpl="rbdesign-a"], [data-tpl="rbdesign-b"], [data-tpl="rbdesign-c"], [data-tpl="maracaibo-a"], [data-tpl="maracaibo-b"], [data-tpl="armonia-a"], [data-tpl="armonia-b"], [data-tpl="armonia-c"] { /* don't hide cursor — blob is additive */ } @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor-blob, .cursor-dot { display: none; } } /* ============================================ 3D CARD TILT (antigravity-inspired) Adds shadow + glow that responds to pointer ============================================ */ .card-tilt { position: relative; transform-style: preserve-3d; perspective: 1000px; } .card-tilt__inner { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); transform-style: preserve-3d; position: relative; width: 100%; height: 100%; } .card-tilt__glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; mix-blend-mode: overlay; border-radius: inherit; } .card-tilt:hover .card-tilt__glow { opacity: 1; } /* Float decoration: layer that visually pops forward on hover */ .card-tilt__layer { transform: translateZ(20px); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .card-tilt:hover .card-tilt__layer { transform: translateZ(40px); } /* ============================================ PER-TEMPLATE LAYOUT DIFFERENTIATION Within each business, A/B/C templates must feel structurally different. These overrides change hero alignment, container width, card grid density, and section flow so the same business looks like 3 separate websites. ============================================ */ /* --- Hero alignment variations --- */ [data-tpl$="-b"] .hero, [data-tpl$="-b"] .hero__content, [data-tpl$="-b"] .hero__inner { text-align: left; } [data-tpl$="-c"] .hero, [data-tpl$="-c"] .hero__content, [data-tpl$="-c"] .hero__inner { text-align: center; } /* --- Container width per variant --- */ [data-tpl$="-a"] .container { max-width: 1200px; } [data-tpl$="-b"] .container { max-width: 1280px; } [data-tpl$="-c"] .container { max-width: 1100px; } /* --- Section spacing rhythm per variant --- */ [data-tpl$="-a"] .section { padding-block: clamp(3rem, 7vw, 6rem); } [data-tpl$="-b"] .section { padding-block: clamp(4rem, 9vw, 8rem); } [data-tpl$="-c"] .section { padding-block: clamp(2.5rem, 6vw, 5rem); } /* --- Card grid density per variant --- */ [data-tpl$="-a"] .info-grid, [data-tpl$="-a"] .cards-grid, [data-tpl$="-a"] .servizi__grid, [data-tpl$="-a"] .menu__grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } [data-tpl$="-b"] .info-grid, [data-tpl$="-b"] .cards-grid, [data-tpl$="-b"] .servizi__grid, [data-tpl$="-b"] .menu__grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; } [data-tpl$="-c"] .info-grid, [data-tpl$="-c"] .cards-grid, [data-tpl$="-c"] .servizi__grid, [data-tpl$="-c"] .menu__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2.5rem; } /* --- Nav letter-spacing variations --- */ [data-tpl$="-a"] .nav__logo { letter-spacing: -0.01em; } [data-tpl$="-b"] .nav__logo { letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.95rem; } [data-tpl$="-c"] .nav__logo { letter-spacing: 0.04em; font-weight: 800; } /* --- Section header variation --- */ [data-tpl$="-b"] .section-header { text-align: left; max-width: 720px; } [data-tpl$="-b"] .section-header__title { font-size: clamp(2.4rem, 5vw, 3.5rem); line-height: 1.05; } [data-tpl$="-c"] .section-header { text-align: center; max-width: 600px; margin-inline: auto; } [data-tpl$="-c"] .section-header__title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); } /* --- Card border style per variant --- */ [data-tpl$="-a"] .card { box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06)); } [data-tpl$="-b"] .card { border: 1px solid var(--border, rgba(0,0,0,0.08)); box-shadow: none; } [data-tpl$="-c"] .card { background: transparent; border: 1px solid var(--border, rgba(0,0,0,0.08)); } /* --- Footer variation --- */ [data-tpl$="-b"] .footer__inner { flex-direction: column; text-align: center; gap: 1.5rem; } [data-tpl$="-c"] .footer__inner { flex-direction: row-reverse; } /* --- Per-business unique flourishes --- */ /* Rosati: B is editorial light — uses serif italic accents */ [data-tpl="rosati-b"] .section-header__label { font-style: italic; text-transform: none; letter-spacing: 0.02em; } /* Balzan: C is industrial dark — uses uppercase mono labels */ [data-tpl="balzan-c"] .section-header__label, [data-tpl="sambenini-a"] .section-header__label { font-family: 'JetBrains Mono', 'Space Grotesk', monospace; font-size: 0.75rem; letter-spacing: 0.2em; } /* Effebi: each variant has unique heading scale */ [data-tpl="effebi-a"] .section-header__title { font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: -0.03em; } [data-tpl="effebi-b"] .section-header__title { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 400; } [data-tpl="effebi-c"] .section-header__title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } /* Armonia: B is dark hammam — center-aligned with extra wide spacing */ [data-tpl="armonia-b"] .hero__title { letter-spacing: 0.18em; font-weight: 300; } [data-tpl="armonia-b"] .section-header { text-align: center; } /* RB Design: variants differ by margin philosophy */ [data-tpl="rbdesign-a"] { --content-side-padding: clamp(2rem, 6vw, 6rem); } [data-tpl="rbdesign-b"] .container { max-width: 100%; padding-inline: clamp(1.5rem, 5vw, 5rem); } [data-tpl="rbdesign-c"] .section-header__title { font-style: italic; font-weight: 400; } /* Maracaibo: B has copper border accents on cards */ [data-tpl="maracaibo-b"] .card { border: 1px solid rgba(200, 160, 80, 0.25); border-radius: 4px; } /* Girasole: A is dark herbal — has rounded pill section labels */ [data-tpl="girasole-a"] .section-header__label { display: inline-block; padding: 0.35rem 1rem; background: rgba(139, 176, 94, 0.12); border-radius: 50px; border: 1px solid rgba(139, 176, 94, 0.3); } /* Farmacia: C is dark digital — uses tech-grid pattern overlay */ [data-tpl="farmacia-c"] .section { position: relative; } [data-tpl="farmacia-c"] .section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(56, 214, 122, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 214, 122, 0.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } /* Clima World: B has gradient nav accent line */ [data-tpl="climaworld-b"] .nav::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, #00D4AA, #0080FF); opacity: 0.6; } /* Sambenini: A has industrial racing-stripe accent */ [data-tpl="sambenini-a"] .hero { background-image: linear-gradient(135deg, transparent 45%, rgba(61, 122, 219, 0.04) 45%, rgba(61, 122, 219, 0.04) 55%, transparent 55%); } /* Sfizio: B has neon glow on buttons */ [data-tpl="sfizio-b"] .btn--primary { text-shadow: 0 0 12px rgba(255, 214, 0, 0.6); } [data-tpl="sfizio-b"] .btn--primary:hover { text-shadow: 0 0 20px rgba(255, 214, 0, 0.9); } /* Bottega: B has gradient mask overlay on hero */ [data-tpl="bottega-b"] .hero { background-image: radial-gradient(ellipse at top, rgba(255, 107, 53, 0.15), transparent 60%); } /* 3D Service: B is dark tech — has subtle scan-line effect */ [data-tpl="3dservice-b"] .hero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 180deg, transparent 0px, transparent 3px, rgba(76, 175, 80, 0.03) 3px, rgba(76, 175, 80, 0.03) 4px ); pointer-events: none; z-index: 3; } /* ============================================ IMAGE PLACEHOLDER STYLING for templates without real images yet ============================================ */ .img-placeholder { background: var(--bg-secondary, var(--surface-secondary, #f4f5f7)); display: flex; align-items: center; justify-content: center; color: var(--text-muted, #888); font-size: 0.85rem; text-align: center; padding: 1rem; min-height: 200px; border-radius: var(--card-radius, 8px); }