/* ═══════════════════════════════════════════════ IDELUX Poland — Main Stylesheet Premium LED Display Solutions ═══════════════════════════════════════════════ */ /* ─── VARIABLES ─── * Apple-inspired in deep black with a tech accent (cyan + monospace). Aliases (--bg2/3/4, --grey2/3, --text-light, --accent2/3, --accent-bright) are kept for backwards compatibility with existing selectors. */ :root { /* Deep-black surface ladder */ --bg: #050608; --bg1: #050608; --bg2: #0b0d10; --bg3: #101317; --bg4: #161a1f; /* Cyan accent (kept as brand signature) */ --accent: #1cb8b8; --accent-bright: #3dd5d5; --accent-dim: #149797; --accent2: #ff3d71; --accent3: #7b61ff; /* Type tokens — refined for high-contrast on black */ --white: #f5f5f7; --text-light: #e6e8eb; --text: #c4c7cc; --grey: #8b8f96; --grey2: #4a4d52; --grey3: #2a2d33; /* Fonts — Inter (Apple SF Pro analogue) for display + body; JetBrains Mono for technical specs. Loaded via Google Fonts. */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Borders / dividers — neutral rather than tinted */ --border-subtle: rgba(255,255,255,0.06); --border-accent: rgba(28,184,184,0.18); /* Subtle glow — used sparingly (CTA, accent text) */ --glow-sm: 0 0 16px rgba(28,184,184,0.18); --glow-md: 0 0 32px rgba(28,184,184,0.22); --glow-lg: 0 0 60px rgba(28,184,184,0.25); /* Motion */ --transition-fast: 0.2s cubic-bezier(0.4,0,0.2,1); --transition-smooth: 0.4s cubic-bezier(0.4,0,0.2,1); /* Layout */ --radius-pill: 9999px; --radius-md: 8px; /* Horizontal page gutter — every section content block aligns to it. Was used in 9 places via var(--gutter) but never defined, so those paddings silently collapsed to 0 (text hit the screen edge). */ --gutter: 48px; } /* Light theme — activated by [data-theme="light"] on . Toggled from the nav. Keeps the cyan brand accent; flips surfaces and text. */ :root[data-theme="light"] { /* Surface ladder — Apple-style light canvas */ --bg: #fafafa; --bg1: #fafafa; --bg2: #ffffff; --bg3: #f3f3f5; --bg4: #e9e9ec; /* Accent — darken slightly so cyan reads on white */ --accent: #129494; --accent-bright: #1cb8b8; --accent-dim: #0d7575; /* Type — invert: was light-on-dark, now dark-on-light */ --white: #1d1d1f; /* primary text (legacy alias) */ --text-light: #2d2d33; --text: #3a3a40; --grey: #6e6e73; --grey2: #86868b; --grey3: #c8c8cd; /* Borders — neutral darks on light */ --border-subtle: rgba(0,0,0,0.10); --border-accent: rgba(18,148,148,0.30); /* Glows are mostly invisible on white — neutralise */ --glow-sm: 0 0 0 rgba(0,0,0,0); --glow-md: 0 0 0 rgba(0,0,0,0); --glow-lg: 0 0 24px rgba(18,148,148,0.18); } /* Theme-aware overrides for places that hardcode rgba whites/blacks (nav glass, button hovers, card hovers, hero overlay). */ :root[data-theme="light"] nav { background: rgba(255,255,255,0.85); border-bottom-color: rgba(0,0,0,0.08); } :root[data-theme="light"] nav.scrolled { background: rgba(255,255,255,0.95); } :root[data-theme="light"] .btn-secondary { color: var(--white); border-color: rgba(0,0,0,0.18); } :root[data-theme="light"] .btn-secondary:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.32); } :root[data-theme="light"] .spec-chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: var(--text); } :root[data-theme="light"] .hero-stats { border-top-color: rgba(0,0,0,0.10); } :root[data-theme="light"] .lang-switch, :root[data-theme="light"] .theme-toggle { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); } :root[data-theme="light"] .lang-btn { color: var(--text); } :root[data-theme="light"] .lang-btn.active { background: var(--accent); color: #ffffff; } /* In light mode the right side of the hero stays mostly clear so the slideshow photo reads through; the white wash is concentrated on the left under the headline only, then fades out fast. */ :root[data-theme="light"] .hero-video-overlay { background: /* Bottom-only fade into the page canvas — keeps the top clean. */ linear-gradient(180deg, transparent 0%, transparent 62%, rgba(250,250,250,0.55) 85%, var(--bg) 100%), /* Strong white wash on the left for headline legibility, transparent past the centre so the right photo shows. */ linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 18%, rgba(255,255,255,0.45) 38%, rgba(255,255,255,0.10) 55%, transparent 70%); } :root[data-theme="light"] .showcase-overlay { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.78) 100%); } /* Text that sits ON TOP of photos (always dark behind) must stay light in light mode — otherwise the dark title disappears against the dark gradient. */ :root[data-theme="light"] .showcase-name, :root[data-theme="light"] .env-name, :root[data-theme="light"] .cat-card-overlay-text { color: #ffffff; } :root[data-theme="light"] .showcase-desc { color: rgba(255,255,255,0.78); } :root[data-theme="light"] .product-img-wrap.has-scene::before, :root[data-theme="light"] .has-scene::before { background: linear-gradient(180deg, rgba(250,250,250,0.0) 0%, rgba(0,0,0,0.45) 100%); } :root[data-theme="light"] .catalogue-hero-overlay { background: linear-gradient(180deg, rgba(250,250,250,0.22) 0%, rgba(250,250,250,0.05) 35%, rgba(250,250,250,0.42) 85%, var(--bg) 100%), linear-gradient(90deg, rgba(250,250,250,0.58) 0%, rgba(250,250,250,0.18) 40%, transparent 75%); } :root[data-theme="light"] .product-hero-warranty, :root[data-theme="light"] .cat-warranty, :root[data-theme="light"] .product-advantage, :root[data-theme="light"] .cat-advantage, :root[data-theme="light"] .cat-advantages-list { background: rgba(18,148,148,0.04); border-color: rgba(18,148,148,0.18); } :root[data-theme="light"] .variant-block { background: rgba(18,148,148,0.05); border-color: rgba(18,148,148,0.28); } :root[data-theme="light"] .variant-opt { background: #ffffff; border-color: rgba(0,0,0,0.10); } :root[data-theme="light"] .variant-opt:hover { border-color: rgba(18,148,148,0.55); } :root[data-theme="light"] .variant-opt.active { border-color: var(--accent); background: rgba(18,148,148,0.08); } :root[data-theme="light"] .gallery-thumb img, :root[data-theme="light"] .gallery-main, :root[data-theme="light"] .product-photo, :root[data-theme="light"] .cat-img, :root[data-theme="light"] .teaser-img-wrap, :root[data-theme="light"] .teaser-img-wrap.product, :root[data-theme="light"] .fleet-img-wrap { background: linear-gradient(135deg, #f5f5f7 0%, #ebebee 100%) !important; } /* Teaser/fleet card body sits on the light surface ladder so its borders read against the canvas. */ :root[data-theme="light"] .teaser-card, :root[data-theme="light"] .fleet-card { background: #ffffff; border-color: rgba(0,0,0,0.10); } :root[data-theme="light"] .teaser-card:hover, :root[data-theme="light"] .fleet-card:hover { border-color: rgba(18,148,148,0.45); box-shadow: 0 10px 32px rgba(0,0,0,0.08); } :root[data-theme="light"] .marquee-wrap { background: var(--accent); } :root[data-theme="light"] .marquee-item { color: #ffffff; } :root[data-theme="light"] .hero-grid-lines { background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); } :root[data-theme="light"] .form-group input, :root[data-theme="light"] .form-group select, :root[data-theme="light"] .form-group textarea { background: #ffffff; border-color: rgba(0,0,0,0.15); color: var(--white); } /* Theme toggle button (sits next to the lang switch) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); border-radius: 6px; cursor: pointer; color: var(--text-light); transition: all var(--transition-fast); padding: 0; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ═══════════════════════════════════════════════ EVENTS PAGE (eventos.html) Standalone landing for IDELUX Events — the rental side of the business. Reuses .section-label, .section-title, .btn-*, .reveal. ═══════════════════════════════════════════════ */ .events-hero { padding: 180px var(--gutter) 80px; position: relative; overflow: hidden; background: var(--bg1); border-bottom: 1px solid var(--border-subtle); } .events-hero .hero-slideshow, .events-hero .hero-video-overlay { z-index: 0; } .events-hero .hero-video-overlay { z-index: 1; } .events-hero-inner { position: relative; z-index: 2; max-width: 1400px; } /* Rotating product spotlights — 5 content slides cross-fade in sync with the background slideshow (40 s loop, 8 s per slide). Position absolute so they all stack and cross-fade cleanly. */ .events-hero-stack { position: relative; min-height: 420px; margin: 0 0 32px; } .events-hero-slide { position: absolute; top: 0; left: 0; right: auto; bottom: auto; opacity: 0; animation: events-hero-content-fade 40s infinite; will-change: opacity, transform; } .events-hero-slide:nth-child(1) { animation-delay: 0s; } .events-hero-slide:nth-child(2) { animation-delay: 8s; } .events-hero-slide:nth-child(3) { animation-delay: 16s; } .events-hero-slide:nth-child(4) { animation-delay: 24s; } .events-hero-slide:nth-child(5) { animation-delay: 32s; } @keyframes events-hero-content-fade { 0% { opacity: 0; transform: translateY(12px); } 3% { opacity: 1; transform: translateY(0); } 20% { opacity: 1; transform: translateY(0); } 23% { opacity: 0; transform: translateY(-12px); } 100% { opacity: 0; transform: translateY(-12px); } } /* Match the background slideshow timing on this page (5 slides × 8 s). Only applied when the slideshow has the .hero-slideshow-5 class. */ .hero-slideshow-5 .hero-slide { animation: hero-fade-5 40s infinite; /* Bias the crop toward the upper-middle area — that's where the screen / product sits in most event photos. No Ken-Burns scale so the product never gets cropped out of frame. Slight darken to match the landing hero's brightness(0.55) cinematic feel. */ background-position: center 35%; background-size: cover; filter: brightness(0.6) saturate(1.1); } :root[data-theme="light"] .hero-slideshow-5 .hero-slide { filter: brightness(0.92) saturate(1.05); } .hero-slideshow-5 .hero-slide:nth-child(1) { animation-delay: 0s; } .hero-slideshow-5 .hero-slide:nth-child(2) { animation-delay: 8s; } .hero-slideshow-5 .hero-slide:nth-child(3) { animation-delay: 16s; } .hero-slideshow-5 .hero-slide:nth-child(4) { animation-delay: 24s; } .hero-slideshow-5 .hero-slide:nth-child(5) { animation-delay: 32s; } @keyframes hero-fade-5 { 0% { opacity: 0; transform: scale(1.015); } 3% { opacity: 0.85; } 20% { opacity: 0.85; transform: scale(1.0); } 23% { opacity: 0; } 100% { opacity: 0; transform: scale(1.0); } } /* Events-hero overlay — vertical-only soft wash. Top band darkens so the nav reads; middle is barely touched so the product stays bright; lower-middle darkens so the title sits on a readable tone; bottom band fades into the page. No horizontal/side gradients — they were creating visible 'lines'. */ /* Two-axis wash mirroring the landing hero: a vertical wash for nav + bottom legibility, plus a horizontal wash that anchors the title on the left and lets the product photo breathe on the right. */ .events-hero .hero-video-overlay { background: linear-gradient(180deg, rgba(5,7,9,0.55) 0%, rgba(5,7,9,0.32) 35%, rgba(5,7,9,0.68) 78%, var(--bg) 100%), linear-gradient(90deg, rgba(5,7,9,0.82) 0%, rgba(5,7,9,0.45) 35%, transparent 72%); } :root[data-theme="light"] .events-hero .hero-video-overlay { background: linear-gradient(180deg, rgba(250,250,250,0.35) 0%, rgba(250,250,250,0.15) 35%, rgba(250,250,250,0.55) 78%, var(--bg) 100%), linear-gradient(90deg, rgba(250,250,250,0.78) 0%, rgba(250,250,250,0.40) 35%, transparent 72%); } /* Per-slide content sits directly on the hero overlay (no box, no visible edges). The global vertical overlay alone provides legibility — text sits on the darkened bottom band of the photo. */ /* Match landing hero-content width (1180) so the title gets the same generous canvas and never feels cramped or oversized. */ .events-hero-slide { max-width: 760px; } .events-hero-slide.align-left { left: 0; right: auto; text-align: left; } .events-hero-slide.align-right { left: 0; right: auto; text-align: left; } /* Static brand badge styled exactly like the landing hero badge — margin-bottom keeps spacing from the rotating stack below. */ /* Events badge — purple version of the landing's translucent cyan chip. Same shape, same low-alpha translucent background and thin border treatment as the original .hero-badge — just re-coloured in the rental purple palette so the background reads as a soft tint over the hero, NOT a solid filled chip. Text + dot are full purple and carry the brand signal. Compound selector raises specificity above the bare .hero-badge so this wins regardless of stylesheet order. */ .hero-badge.events-hero-badge { margin-bottom: 28px; background: rgba(123,97,255,0.06); border-color: rgba(123,97,255,0.22); color: var(--accent3, #7b61ff); box-shadow: none; } .hero-badge.events-hero-badge .hero-badge-dot { background: var(--accent3, #7b61ff); box-shadow: 0 0 8px rgba(123,97,255,0.45); animation: pulse-dot-purple 2s infinite; } @keyframes pulse-dot-purple { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(123,97,255,0.45); } 50% { opacity: 0.85; transform: scale(1.3); box-shadow: 0 0 0 8px rgba(123,97,255,0); } } :root[data-theme="light"] .hero-badge.events-hero-badge { background: rgba(91,70,214,0.07); border-color: rgba(91,70,214,0.25); color: #5b46d6; } :root[data-theme="light"] .hero-badge.events-hero-badge .hero-badge-dot { background: #5b46d6; box-shadow: 0 0 8px rgba(91,70,214,0.45); } /* Title spans take the SAME outline / accent / plain treatment as the landing hero's rotating title. Match font size and weight too so the events hero has the same dramatic feel. */ .events-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 5.5vw, 76px); line-height: 1.02; letter-spacing: -2px; color: var(--white); margin-bottom: 22px; } .events-title > span { display: block; } .events-title .accent-line { background: linear-gradient(135deg, var(--accent), var(--accent-bright), #00b0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 40px rgba(28,184,184,0.35)); } /* .events-title .outline-text neon rule lives in the combined block alongside .hero-title / .hero-title-rotator further down. */ @media (prefers-reduced-motion: reduce) { .events-hero-slide { animation: none; opacity: 0; } .events-hero-slide:first-child { opacity: 1; } } .events-hero-slide .section-label { margin-bottom: 16px; } .events-hero-slide .events-title { margin-bottom: 18px; } .events-hero-slide .events-sub { margin-bottom: 28px; } .events-hero-slide .events-title .accent { display: inline; background: linear-gradient(135deg, var(--accent), var(--accent-bright)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .events-hero .breadcrumb { padding: 0 !important; margin: 0 0 28px; } .events-hero .section-label { margin-bottom: 18px; } .events-sub { font-size: 17px; line-height: 1.65; color: var(--text); max-width: 660px; margin-bottom: 36px; } .events-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; } .events-meta { display: flex; gap: 36px; padding-top: 24px; border-top: 1px solid var(--border-subtle); flex-wrap: wrap; font-size: 14px; color: var(--text); } .events-meta strong { font-family: var(--font-mono); font-weight: 600; font-size: 22px; color: var(--accent); margin-right: 6px; } /* Section heads — shared across the events sub-sections */ .events-section-head { max-width: 820px; margin-bottom: 48px; } .events-sub2 { font-size: 16px; line-height: 1.6; color: var(--grey); margin-top: 14px; max-width: 620px; } /* RENTAL FLEET */ .events-fleet-section { padding: 90px var(--gutter) 100px; background: var(--bg1); } .events-fleet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1400px; } .fleet-card { background: var(--bg3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: all var(--transition-smooth); opacity: 0; transform: translateY(20px); } .fleet-card.visible { opacity: 1; transform: translateY(0); } .fleet-card:hover { transform: translateY(-3px); border-color: rgba(28,184,184,0.4); box-shadow: 0 12px 40px rgba(0,0,0,0.3); } .fleet-card.new { border-style: dashed; border-color: rgba(123,97,255,0.32); } .fleet-img-wrap { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #0a1018 0%, #0e1520 100%); display: flex; align-items: center; justify-content: center; } .fleet-img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 18px; } /* Scene photo (full event context, not a transparent product PNG) — fill the frame instead of letterboxing inside it. */ .fleet-img-wrap.fleet-img-scene { background: var(--bg2); position: relative; } .fleet-img-wrap.fleet-img-scene img { object-fit: cover; padding: 0; } .fleet-img-wrap.fleet-img-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,8,0) 55%, rgba(5,6,8,0.55) 100%); pointer-events: none; } /* On a light page the bottom fade is too dark — soften it. */ :root[data-theme="light"] .fleet-img-wrap.fleet-img-scene::after { background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.18) 100%); } .fleet-placeholder { flex-direction: column; gap: 10px; color: var(--grey); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; } .fleet-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; } .fleet-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); } .fleet-tag.purple { color: var(--accent3); } .fleet-tag.pink { color: var(--accent2); } .fleet-tag.amber { color: #ffb800; } .fleet-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.3px; color: var(--white); line-height: 1.2; } .fleet-body p { font-size: 13.5px; line-height: 1.55; color: var(--text); } /* WHY IDELUX EVENTS */ .events-why-section { padding: 90px var(--gutter) 100px; background: var(--bg2); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .events-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1180px; } .why-card { background: var(--bg3); border: 1px solid var(--border-subtle); padding: 32px 28px; border-radius: var(--radius-md); transition: all var(--transition-fast); } .why-card:hover { border-color: rgba(28,184,184,0.32); transform: translateY(-2px); } .why-num { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 1px; color: var(--accent); margin-bottom: 10px; } .why-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.3px; color: var(--white); margin-bottom: 10px; line-height: 1.2; } .why-card p { font-size: 14.5px; line-height: 1.6; color: var(--text); } /* HOW IT WORKS — 4 steps */ .events-how-section { padding: 90px var(--gutter) 100px; background: var(--bg1); } .events-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1400px; } .event-step { background: var(--bg3); border: 1px solid var(--border-subtle); padding: 28px 26px; border-radius: var(--radius-md); } .event-step .step-num { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 1px; color: var(--accent); margin-bottom: 12px; } .event-step h4 { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--white); margin-bottom: 8px; } .event-step p { font-size: 13.5px; line-height: 1.55; color: var(--text); } /* CONTACT — events-focused form */ .events-contact-section { padding: 90px var(--gutter) 110px; background: var(--bg2); border-top: 1px solid var(--border-subtle); } .contact-form-events { max-width: 820px; margin: 40px 0 0; } /* Active nav state */ .nav-links a.active { color: var(--accent); } /* Responsive */ @media (max-width: 1024px) { .events-fleet-grid { grid-template-columns: repeat(2, 1fr); } .events-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .events-hero { padding: 150px 20px 60px; } .events-fleet-section, .events-why-section, .events-how-section, .events-contact-section { padding: 70px 20px 80px; } .events-fleet-grid { grid-template-columns: 1fr; } .events-why-grid { grid-template-columns: 1fr; } .events-steps { grid-template-columns: 1fr; } .events-meta { gap: 18px; } .events-meta strong { font-size: 18px; } } /* Smaller gutter on phones — keeps var(--gutter) blocks consistent with the hard-coded 20px paddings in the mobile breakpoints. */ @media (max-width: 768px) { :root { --gutter: 20px; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* overflow-x: clip clips horizontal overflow WITHOUT creating a scroll container, so position:sticky on descendants keeps working (unlike overflow:hidden). overflow-x:hidden on body alone wasn't containing decorative glow / scaled-slide bleed. */ overflow-x: clip; max-width: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); overflow-x: clip; max-width: 100%; cursor: default; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* NOISE TEXTURE OVERLAY */ body::before { content: ''; position: fixed; inset: 0; 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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; opacity: 0.35; } ::selection { background: rgba(28,184,184,0.25); color: var(--white); } /* ═══════════════════════════════════════════════ NAVIGATION ═══════════════════════════════════════════════ */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; height: 76px; background: rgba(5,7,9,0.88); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border-bottom: 1px solid var(--border-subtle); transition: all var(--transition-smooth); /* IMPORTANT: keep overflow visible so dropdowns opened from nav items (Baltic popover, mobile menu, etc.) can extend downward past the nav bottom edge. The scanner beam below uses an animated background-position — backgrounds are auto-clipped to the element box, so no overflow:hidden needed here. */ } /* ─── NAV SCANNER BEAM ─── Thin light bar that sweeps left → right along the nav bottom border every time the page (re)loads. Cyan by default (Home / Products / landing logo brand colour). Purple variant on Events / Equipment pages — added via body.page-events on /eventos and on the product detail when reached via ?from=events. Implementation: the ::after element is stretched full-width across the nav and STAYS PUT. The gradient painted inside it (a small ~32% wide bright band) travels via background-position animation. Since CSS backgrounds are always clipped to the element box, the beam is automatically constrained to the nav without needing overflow:hidden on the nav (which would clip dropdowns). */ nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; /* sits on the border-bottom line */ height: 2px; pointer-events: none; background-image: linear-gradient(90deg, transparent 0%, rgba(28,184,184,0.35) 20%, var(--accent) 50%, rgba(28,184,184,0.35) 80%, transparent 100%); background-size: 32% 100%; /* bright band = ~1/3 of nav width */ background-repeat: no-repeat; background-position: -50% 0; /* start just off-screen left */ filter: drop-shadow(0 0 8px var(--accent)); opacity: 0; animation: nav-light-sweep 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.35s 1 forwards; } @keyframes nav-light-sweep { 0% { background-position: -50% 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { background-position: 150% 0; opacity: 0; } } /* Purple variant — events / equipment context. */ body.page-events nav::after { background-image: linear-gradient(90deg, transparent 0%, rgba(123,97,255,0.35) 20%, var(--accent3, #7b61ff) 50%, rgba(123,97,255,0.35) 80%, transparent 100%); filter: drop-shadow(0 0 10px var(--accent3, #7b61ff)); } @media (prefers-reduced-motion: reduce) { nav::after { animation: none; opacity: 0; } } nav.scrolled { height: 64px; background: rgba(5,7,9,0.95); border-bottom-color: var(--border-accent); } .nav-left, .nav-right { flex: 1; display: flex; align-items: center; } .nav-left { justify-content: flex-start; } .nav-right { justify-content: flex-end; gap: 16px; } .nav-center { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .nav-logo { display: flex; align-items: center; text-decoration: none; } .nav-logo img { height: 56px; width: auto; transition: all var(--transition-smooth); filter: drop-shadow(0 0 12px rgba(28,184,184,0.3)); } nav.scrolled .nav-logo img { height: 44px; } .nav-logo:hover img { filter: drop-shadow(0 0 20px rgba(28,184,184,0.5)); transform: scale(1.02); } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--text); text-decoration: none; position: relative; padding: 4px 0; transition: color var(--transition-fast); } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); transition: width 0.3s cubic-bezier(0.4,0,0.2,1); } .nav-links a:hover { color: var(--accent); } .nav-links a:hover::after { width: 100%; } .lang-switch { display: flex; align-items: center; gap: 2px; background: rgba(28,184,184,0.04); border: 1px solid rgba(28,184,184,0.12); border-radius: 6px; padding: 3px; } .lang-btn { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 1px; padding: 5px 12px; border: none; border-radius: 4px; cursor: pointer; background: transparent; color: var(--text); transition: all var(--transition-fast); } .lang-btn.active { background: var(--accent); color: var(--bg); } .lang-btn:hover:not(.active) { color: var(--accent); } /* ═══════════════════════════════════════════════ BALTIC LANGUAGE CHOOSER Sits next to the PL/EN pills. Trigger looks like a sister pill so it feels native; opens a small popover with the 3 Baltic locales (LT · LV · ET). ═══════════════════════════════════════════════ */ .baltic-switch { position: relative; display: flex; align-items: center; } .baltic-trigger { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 1px; padding: 6px 10px; border: 1px solid rgba(28,184,184,0.12); border-radius: 6px; background: rgba(28,184,184,0.04); color: var(--text); cursor: pointer; transition: all var(--transition-fast); line-height: 1; } .baltic-trigger:hover, .baltic-trigger[aria-expanded="true"] { color: var(--accent); border-color: rgba(28,184,184,0.30); background: rgba(28,184,184,0.08); } .baltic-trigger.active { background: var(--accent); color: var(--bg); border-color: var(--accent); } .baltic-trigger-flag { /* Mini-cluster of the 3 flags when no Baltic lang is active; single flag when one is selected. */ font-size: 13px; letter-spacing: -3px; line-height: 1; filter: saturate(1.05); } .baltic-trigger.active .baltic-trigger-flag { letter-spacing: 0; } .baltic-trigger-label { line-height: 1; } .baltic-trigger-caret { opacity: 0.7; transition: transform 0.2s; } .baltic-trigger[aria-expanded="true"] .baltic-trigger-caret { transform: rotate(180deg); } .baltic-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; min-width: 220px; background: var(--bg2); border: 1px solid var(--border-accent); border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,229,195,0.05); animation: baltic-pop-in 0.18s ease-out; } .baltic-popover[hidden] { display: none; } @keyframes baltic-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .baltic-popover-head { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); padding: 8px 10px 6px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; } .baltic-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: none; border-radius: 6px; background: transparent; color: var(--text); font-family: var(--font-body); font-size: 13px; cursor: pointer; text-align: left; transition: background 0.15s, color 0.15s; } .baltic-option:hover { background: rgba(28,184,184,0.10); color: var(--white); } .baltic-option.active { background: rgba(28,184,184,0.16); color: var(--accent); } .baltic-flag { font-size: 18px; line-height: 1; flex: 0 0 auto; } .baltic-name { flex: 1; font-weight: 500; } .baltic-code { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--grey); opacity: 0.85; } .baltic-option.active .baltic-code { color: var(--accent); } /* Light theme — soften surfaces + invert text contrasts. */ :root[data-theme="light"] .baltic-trigger { border-color: var(--border-subtle); background: rgba(18,148,148,0.04); } :root[data-theme="light"] .baltic-trigger.active { background: var(--accent); color: #fff; border-color: var(--accent); } :root[data-theme="light"] .baltic-popover { background: var(--bg2); box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(18,148,148,0.06); } /* Mobile — keep the trigger compact; popover anchors to viewport right edge instead of the trigger to avoid overflow. */ @media (max-width: 640px) { .baltic-trigger { padding: 6px 8px; gap: 4px; } .baltic-trigger-flag { font-size: 12px; } .baltic-popover { right: -12px; min-width: 200px; } } /* Mobile menu toggle */ .nav-mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .nav-mobile-toggle span { display: block; width: 22px; height: 2px; background: var(--text); transition: all 0.3s; } /* ═══════════════════════════════════════════════ HERO ═══════════════════════════════════════════════ */ #hero { min-height: 86vh; position: relative; display: flex; align-items: center; padding: 110px 48px 60px; overflow: hidden; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.35; filter: brightness(0.6) saturate(1.2); } /* ─── HERO SLIDESHOW ─── 4 background images cross-fade on a 32s loop (8s each, with 1.5s overlap). Each slide animates: fade-in → hold → fade-out, staggered by 8s. Subtle Ken Burns zoom on each slide for cinematic feel. */ .hero-slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; filter: brightness(0.55) saturate(1.1); /* 3 slides × 8s each = 24s loop. Keyframes recalculated to keep the same per-slide visible window and the 1s overlap. */ animation: hero-fade 24s infinite; will-change: opacity, transform; } .hero-slide:nth-child(1) { animation-delay: 0s; } .hero-slide:nth-child(2) { animation-delay: 8s; } .hero-slide:nth-child(3) { animation-delay: 16s; } @keyframes hero-fade { 0% { opacity: 0; transform: scale(1.05); } 5% { opacity: 0.55; } 29% { opacity: 0.55; transform: scale(1.0); } 33% { opacity: 0; } 100% { opacity: 0; transform: scale(1.0); } } @media (prefers-reduced-motion: reduce) { .hero-slide { animation: none; opacity: 0.5; } .hero-slide:not(:first-child) { display: none; } } .hero-video-overlay { position: absolute; inset: 0; z-index: 1; background: /* Vertical wash: softer at the top so the right-side image stays readable; stronger lower-down so the CTAs and stats stay legible. */ linear-gradient(180deg, rgba(5,7,9,0.55) 0%, rgba(5,7,9,0.32) 35%, rgba(5,7,9,0.68) 78%, var(--bg) 100%), /* Horizontal wash anchors the headline on the left and fades out further to the right so the slideshow stays visible there. */ linear-gradient(90deg, rgba(5,7,9,0.82) 0%, rgba(5,7,9,0.45) 35%, transparent 72%); } .hero-grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(28,184,184,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(28,184,184,0.025) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, black, transparent); -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, black, transparent); } .hero-glow-1 { position: absolute; width: 800px; height: 800px; background: radial-gradient(circle, rgba(28,184,184,0.1) 0%, transparent 65%); top: -250px; right: -150px; pointer-events: none; animation: glow-float 8s ease-in-out infinite alternate; } .hero-glow-2 { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(123,97,255,0.06) 0%, transparent 65%); bottom: -150px; left: 150px; pointer-events: none; animation: glow-float 10s ease-in-out infinite alternate-reverse; } .hero-glow-3 { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(28,184,184,0.05) 0%, transparent 70%); top: 40%; left: 15%; pointer-events: none; animation: glow-float 12s ease-in-out infinite alternate; } @keyframes glow-float { 0% { transform: translate(0, 0); } 100% { transform: translate(30px, -20px); } } .hero-content { position: relative; z-index: 2; width: 100%; max-width: 1180px; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(28,184,184,0.06); border: 1px solid rgba(28,184,184,0.18); border-radius: 50px; padding: 8px 20px; margin-bottom: 36px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); animation: fadeInDown 0.6s ease both; } .hero-badge-dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; animation: pulse-dot 2s infinite; box-shadow: 0 0 8px rgba(28,184,184,0.4); } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(28,184,184,0.4); } 50% { opacity: 0.8; transform: scale(1.3); box-shadow: 0 0 0 8px rgba(28,184,184,0); } } .hero-title, .hero-title-rotator { font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 5.5vw, 76px); line-height: 1.02; letter-spacing: -2px; color: var(--white); margin-bottom: 20px; } .hero-title { animation: fadeInUp 0.7s 0.1s ease both; } .hero-title .accent-line, .hero-title-rotator .accent-line { display: block; background: linear-gradient(135deg, var(--accent), var(--accent-bright), #00b0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 40px rgba(28,184,184,0.35)); } /* Outline / neon-stroke title text. The transparent fill + text-stroke combo was too pale against bright/colourful hero photos and on the white canvas in light mode, so the line read as ghosted. Boosted stroke saturation/width and added a layered cyan glow so the letters always feel illuminated. Applies to the landing hero rotator and to the events hero. */ .hero-title .outline-text, .hero-title-rotator .outline-text, .events-title .outline-text { -webkit-text-stroke: 2px var(--accent); color: transparent; text-shadow: 0 0 8px rgba(28,184,184,0.55), 0 0 22px rgba(28,184,184,0.32), 0 0 44px rgba(28,184,184,0.18); filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25)); } /* Light theme — push the stroke and glow harder so the cyan still reads on the near-white canvas without disappearing. */ :root[data-theme="light"] .hero-title .outline-text, :root[data-theme="light"] .hero-title-rotator .outline-text, :root[data-theme="light"] .events-title .outline-text { -webkit-text-stroke: 2.2px var(--accent); text-shadow: 0 0 10px rgba(18,148,148,0.65), 0 0 28px rgba(18,148,148,0.32), 0 0 48px rgba(18,148,148,0.18); filter: none; } /* ─── ROTATING HERO TITLE ─── 4 H1 variants cross-fade in sync with the 4 background slides. Same 32s / 8s timing as .hero-slideshow and reduced motion respected. */ .hero-title-rotator { position: relative; display: block; min-height: 3.1em; } .hero-title-slide { position: absolute; inset: 0; display: block; opacity: 0; /* 3 slides × 8s each = 24s loop. Same recalc as .hero-slide. */ animation: hero-title-fade 24s infinite; will-change: opacity, transform; } .hero-title-slide > span { display: block; } .hero-title-slide:nth-child(1) { animation-delay: 0s; } .hero-title-slide:nth-child(2) { animation-delay: 8s; } .hero-title-slide:nth-child(3) { animation-delay: 16s; } @keyframes hero-title-fade { 0% { opacity: 0; transform: translateY(12px); } 5% { opacity: 1; transform: translateY(0); } 29% { opacity: 1; transform: translateY(0); } 33% { opacity: 0; transform: translateY(-12px); } 100% { opacity: 0; transform: translateY(-12px); } } @media (prefers-reduced-motion: reduce) { .hero-title-slide { animation: none; opacity: 0; } .hero-title-slide:first-child { opacity: 1; } } /* ─── ROTATING HERO MESSAGES ─── 4 commercial messages cross-fade in sync with the 4 background slides. Same 32s loop, 8s per message, 1.5s overlap on fade. */ .hero-rotator { position: relative; min-height: 132px; max-width: 580px; margin-bottom: 32px; } .hero-rot-slide { position: absolute; inset: 0; opacity: 0; font-size: 18px; line-height: 1.55; color: var(--text); animation: hero-rot-fade 32s infinite; will-change: opacity, transform; } .hero-rot-slide:nth-child(1) { animation-delay: 0s; } .hero-rot-slide:nth-child(2) { animation-delay: 8s; } .hero-rot-slide:nth-child(3) { animation-delay: 16s; } .hero-rot-slide:nth-child(4) { animation-delay: 24s; } .hero-rot-slide strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--white); letter-spacing: -0.3px; margin-bottom: 10px; } .hero-rot-slide em { font-style: normal; background: linear-gradient(135deg, var(--accent), var(--accent-bright)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 600; } .hero-rot-source { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--grey); } @keyframes hero-rot-fade { 0% { opacity: 0; transform: translateY(8px); } 4% { opacity: 1; transform: translateY(0); } 25% { opacity: 1; transform: translateY(0); } 29% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 0; transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .hero-rot-slide { animation: none; } .hero-rot-slide:first-child { opacity: 1; } } /* ─── HERO META STRIP ─── */ .hero-meta { margin-top: 24px; display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--grey); } .hero-meta-dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px var(--accent); animation: meta-pulse 2.5s ease-in-out infinite; } @keyframes meta-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .hero-sub { font-family: var(--font-body); font-weight: 300; font-size: 18px; line-height: 1.8; color: var(--text); max-width: 540px; margin-bottom: 48px; animation: fadeInUp 0.7s 0.25s ease both; } .hero-sub strong { color: var(--white); font-weight: 500; } /* ─── ROTATING HERO SUBTITLES ─── 3 sub-copy slides cross-fade in sync with the title rotator (24s loop, 8s each). Container keeps the existing .hero-sub typography and width; each slide is absolutely positioned and inherits the font from the parent. Reuses @keyframes hero-title-fade. */ .hero-sub-rotator { position: relative; min-height: 7.2em; } .hero-sub-slide { position: absolute; inset: 0; opacity: 0; animation: hero-title-fade 24s infinite; will-change: opacity, transform; } .hero-sub-slide:nth-child(1) { animation-delay: 0s; } .hero-sub-slide:nth-child(2) { animation-delay: 8s; } .hero-sub-slide:nth-child(3) { animation-delay: 16s; } @media (prefers-reduced-motion: reduce) { .hero-sub-slide { animation: none; opacity: 0; } .hero-sub-slide:first-child { opacity: 1; } } .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; animation: fadeInUp 0.7s 0.35s ease both; } /* ─── BUTTONS — Apple-style pill, with tech-accent fill on primary ─── */ .btn-primary { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: -0.1px; text-transform: none; padding: 14px 28px; background: var(--accent); color: #0a0d12; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; position: relative; overflow: hidden; transition: all var(--transition-fast); border-radius: var(--radius-pill); clip-path: none; } .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 60%); opacity: 0; transition: opacity 0.25s ease; } .btn-primary:hover::before { opacity: 1; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(28,184,184,0.28); background: var(--accent-bright); } .btn-secondary { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: -0.1px; text-transform: none; padding: 14px 28px; background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.18); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all var(--transition-fast); border-radius: var(--radius-pill); clip-path: none; } .btn-secondary:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.32); transform: translateY(-1px); } /* Hero stats — inline horizontal row, sits below CTAs / above meta-strip */ .hero-stats { display: flex; gap: 36px; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); animation: fadeInUp 0.7s 0.5s ease both; } /* ─── ROTATING HERO STATS ─── 3 sets of stats fade-flip in sync with the title/sub rotator (24s loop, 8s each). CSS grid stacking — all slides share one grid cell so the container auto-sizes to the tallest slide without manual min-height math. Slightly stronger translateY than the title to evoke the "digital chronometer" vertical-flip feel. */ .hero-stats-rotator { display: grid; width: 100%; } .hero-stats-slide { grid-area: 1 / 1; display: flex; gap: 36px; opacity: 0; animation: hero-stats-fade 24s infinite; will-change: opacity, transform; } .hero-stats-slide:nth-child(1) { animation-delay: 0s; } .hero-stats-slide:nth-child(2) { animation-delay: 8s; } .hero-stats-slide:nth-child(3) { animation-delay: 16s; } @keyframes hero-stats-fade { 0% { opacity: 0; transform: translateY(24px); } 5% { opacity: 1; transform: translateY(0); } 29% { opacity: 1; transform: translateY(0); } 33% { opacity: 0; transform: translateY(-24px); } 100% { opacity: 0; transform: translateY(-24px); } } @media (prefers-reduced-motion: reduce) { .hero-stats-slide { animation: none; opacity: 0; } .hero-stats-slide:first-child { opacity: 1; } } .stat-item { text-align: left; border-left: 2px solid var(--accent); padding-left: 16px; transition: all 0.3s; } .stat-item:hover { border-left-color: var(--accent-bright); transform: translateX(2px); } .stat-number { font-family: var(--font-mono); font-weight: 600; font-size: 30px; line-height: 1; color: var(--white); letter-spacing: -0.5px; } .stat-number span { background: linear-gradient(135deg, var(--accent), var(--accent-bright)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 0.7em; } .stat-label { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.2px; text-transform: none; color: var(--grey); margin-top: 6px; } /* ═══════════════════════════════════════════════ MARQUEE ═══════════════════════════════════════════════ */ .marquee-wrap { background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-bright), var(--accent)); padding: 14px 0; overflow: hidden; white-space: nowrap; position: relative; } .marquee-track { display: inline-flex; animation: marquee 25s linear infinite; } .marquee-item { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--bg); padding: 0 40px; display: inline-flex; align-items: center; gap: 16px; } .marquee-item::after { content: '◆'; font-size: 6px; opacity: 0.6; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ═══════════════════════════════════════════════ SECTION COMMON ═══════════════════════════════════════════════ */ section { padding: 120px 48px; } .section-label { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .section-label::before { content: ''; width: 24px; height: 1px; background: var(--accent); opacity: 0.5; } .section-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4.8vw, 56px); line-height: 1.05; color: var(--white); letter-spacing: -1px; margin-bottom: 24px; } .section-title .accent { background: linear-gradient(135deg, var(--accent), var(--accent-bright)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ═══════════════════════════════════════════════ SHOWCASE — IN ACTION ═══════════════════════════════════════════════ */ #showcase { background: var(--bg1); padding: 100px 0 0 0; position: relative; } .showcase-intro { max-width: 1400px; padding: 0 var(--gutter); margin: 0 0 60px 0; } /* Title + FOR RENT button on the same baseline, both flush to the content edges. Mirrors the .catalogue-header layout used by the 'View Full Catalogue' row below — same width, same anchoring. */ .showcase-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .showcase-sub { font-size: 17px; line-height: 1.6; color: var(--grey); max-width: 620px; margin-top: 12px; } /* Rental CTA — purple pill, visually distinct from the cyan primary so it reads as a separate (rental) commercial path. */ .btn-rental { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.2px; padding: 13px 24px; background: var(--accent3); /* #7b61ff */ color: #ffffff; border: 1px solid transparent; border-radius: var(--radius-pill); text-decoration: none; cursor: pointer; white-space: nowrap; transition: all var(--transition-fast); box-shadow: 0 6px 22px rgba(123,97,255,0.28); } .btn-rental:hover { transform: translateY(-1px); background: #8d76ff; box-shadow: 0 10px 32px rgba(123,97,255,0.45); } .btn-rental:active { transform: translateY(0); } :root[data-theme="light"] .btn-rental { color: #ffffff; box-shadow: 0 6px 22px rgba(123,97,255,0.32); } @media (max-width: 768px) { .showcase-title-row { flex-direction: column; align-items: flex-start; gap: 18px; } .btn-rental { padding: 12px 22px; font-size: 13.5px; } } .showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .showcase-card { position: relative; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer; text-decoration: none; display: block; background: var(--bg3); } /* Stack holds 1..N images per card; only one is opacity 1 at a time. Auto-cycled by main.js when the card has > 1 image inside. */ .showcase-stack { position: absolute; inset: 0; overflow: hidden; } .showcase-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease, transform 0.8s var(--transition-smooth); } /* First image is active by default; JS toggles .active among siblings. */ .showcase-stack img:first-child, .showcase-stack img.active { opacity: 1; } .showcase-card:hover .showcase-stack img.active, .showcase-card:hover .showcase-stack img:only-child { transform: scale(1.08); } .showcase-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,12,18,0) 0%, rgba(6,12,18,0.2) 40%, rgba(6,12,18,0.92) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; transition: background 0.4s ease; } .showcase-card:hover .showcase-overlay { background: linear-gradient(180deg, rgba(6,12,18,0.1) 0%, rgba(6,12,18,0.4) 40%, rgba(6,12,18,0.95) 100%); } .showcase-tag { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: inline-block; } .showcase-name { font-family: var(--font-display); font-weight: 900; font-size: 24px; color: var(--white); letter-spacing: -0.3px; margin-bottom: 8px; line-height: 1.1; } .showcase-desc { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.75); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease; } .showcase-card:hover .showcase-desc { max-height: 80px; opacity: 1; margin-top: 4px; } /* ═══════════════════════════════════════════════ VALUE PROPS ═══════════════════════════════════════════════ */ #value { background: var(--bg2); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); position: relative; } #value::before { content: ''; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(28,184,184,0.04) 0%, transparent 70%); top: -100px; left: -100px; pointer-events: none; } .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 60px; } .value-card { background: var(--bg3); padding: 44px; position: relative; overflow: hidden; transition: all var(--transition-smooth); } .value-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: translateX(-100%); transition: transform 0.5s; } .value-card::after { content: ''; position: absolute; top: 0; right: 0; width: 120px; height: 120px; background: radial-gradient(circle, rgba(28,184,184,0.04) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s; } .value-card:hover::before { transform: translateX(0); } .value-card:hover::after { opacity: 1; } .value-card:hover { background: var(--bg4); } .value-icon { font-size: 32px; margin-bottom: 20px; display: block; } .value-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 1px; text-transform: uppercase; color: var(--white); margin-bottom: 12px; } .value-card p { font-size: 14px; line-height: 1.75; color: var(--text); } .value-card .tag { display: inline-block; margin-top: 20px; font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(28,184,184,0.2); padding: 5px 14px; border-radius: 2px; transition: all 0.3s; } .value-card:hover .tag { background: rgba(28,184,184,0.06); border-color: rgba(28,184,184,0.35); } /* ═══════════════════════════════════════════════ CATALOGUE ═══════════════════════════════════════════════ */ #catalogue { background: var(--bg); position: relative; } .catalogue-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; flex-wrap: wrap; gap: 24px; } .filter-tabs { display: flex; gap: 2px; } .filter-btn { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 10px 24px; background: var(--bg3); color: var(--text); border: 1px solid var(--bg3); cursor: pointer; transition: all var(--transition-fast); } .filter-btn:first-child { border-radius: 4px 0 0 4px; } .filter-btn:last-child { border-radius: 0 4px 4px 0; } .filter-btn.active, .filter-btn:hover { background: rgba(28,184,184,0.08); border-color: var(--accent); color: var(--accent); } .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .product-card { background: var(--bg3); position: relative; overflow: hidden; cursor: pointer; transition: all var(--transition-smooth); display: flex; flex-direction: column; } .product-card:hover { background: var(--bg4); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); } .product-card:hover .product-img-wrap::after { opacity: 1; } .product-img-wrap { height: 280px; background: linear-gradient(135deg, #0a1018 0%, #0e1520 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .product-img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(28,184,184,0.06) 100%); opacity: 0; transition: opacity var(--transition-smooth); z-index: 1; } .product-photo { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 20px; transition: transform var(--transition-smooth); } /* Scene photos show product IN CONTEXT (events, malls, stages) — fill frame */ .product-photo.scene { object-fit: cover; padding: 0; } .product-card:hover .product-photo { transform: scale(1.05); } /* Subtle overlay on scene photos to keep brand palette */ .product-img-wrap.has-scene::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,12,18,0.15) 0%, rgba(6,12,18,0.55) 100%); z-index: 1; pointer-events: none; } .product-visual { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; } /* ─── LED SCREEN VISUALS ─── */ .led-totem { width: 80px; height: 200px; background: linear-gradient(180deg, #0a1628 0%, #061020 100%); border: 1px solid rgba(28,184,184,0.3); border-radius: 4px; position: relative; box-shadow: 0 0 40px rgba(28,184,184,0.15), inset 0 0 30px rgba(28,184,184,0.05); display: flex; flex-direction: column; overflow: hidden; } .led-totem::before { content: ''; position: absolute; inset: 3px; background: linear-gradient(180deg, rgba(28,184,184,0.2) 0%, rgba(0,100,255,0.3) 30%, rgba(123,97,255,0.2) 60%, rgba(28,184,184,0.1) 100% ); animation: led-flicker 3s ease infinite; } .led-totem-screen { position: absolute; inset: 6px; background: linear-gradient(135deg, rgba(28,184,184,0.15) 0%, rgba(0,102,255,0.2) 50%, rgba(123,97,255,0.15) 100% ); animation: screen-shift 4s ease infinite alternate; } .led-foldable { width: 160px; height: 180px; display: flex; gap: 3px; align-items: center; } .led-panel { flex: 1; height: 180px; background: linear-gradient(180deg, #0a1628 0%, #061020 100%); border: 1px solid rgba(28,184,184,0.3); border-radius: 3px; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(28,184,184,0.1); } .led-panel::before { content: ''; position: absolute; inset: 2px; background: linear-gradient(180deg, rgba(28,184,184,0.15) 0%, rgba(0,100,255,0.2) 100% ); animation: led-flicker 4s ease infinite; } .led-wall { width: 220px; height: 140px; background: linear-gradient(135deg, #0a1628 0%, #061020 100%); border: 1px solid rgba(28,184,184,0.3); border-radius: 3px; position: relative; overflow: hidden; box-shadow: 0 0 40px rgba(28,184,184,0.12); } .led-wall::before { content: ''; position: absolute; inset: 3px; background: linear-gradient(135deg, rgba(28,184,184,0.2) 0%, rgba(123,97,255,0.25) 50%, rgba(28,184,184,0.1) 100% ); animation: screen-shift 5s ease infinite alternate; } .led-double { width: 60px; height: 180px; background: linear-gradient(180deg, #0a1628, #061020); border: 1px solid rgba(28,184,184,0.3); border-radius: 3px; position: relative; overflow: hidden; box-shadow: 0 0 30px rgba(28,184,184,0.2); margin: 0 auto; } .led-double::before, .led-double::after { content: ''; position: absolute; left: 0; right: 0; height: 47%; background: linear-gradient(180deg, rgba(28,184,184,0.2), rgba(0,100,255,0.15)); } .led-double::before { top: 3px; animation: led-flicker 3s infinite; } .led-double::after { bottom: 3px; transform: scaleY(-1); animation: led-flicker 3s 1.5s infinite; } .led-podium { width: 120px; height: 160px; position: relative; } .led-podium-screen { width: 80px; height: 100px; background: linear-gradient(135deg, #0a1628, #061020); border: 1px solid rgba(28,184,184,0.3); border-radius: 50% 50% 0 0 / 30% 30% 0 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); box-shadow: 0 0 30px rgba(28,184,184,0.15); overflow: hidden; } .led-podium-screen::before { content: ''; position: absolute; inset: 3px; background: linear-gradient(180deg, rgba(28,184,184,0.25), rgba(123,97,255,0.2)); border-radius: inherit; animation: screen-shift 3s infinite alternate; } .led-podium-base { width: 120px; height: 50px; background: linear-gradient(180deg, #1a1f2e, #0d1017); border: 1px solid rgba(255,255,255,0.06); border-radius: 0 0 6px 6px; position: absolute; bottom: 0; } .led-strip-h { width: 220px; height: 40px; background: linear-gradient(90deg, #0a1628, #061020); border: 1px solid rgba(28,184,184,0.3); border-radius: 3px; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(28,184,184,0.1); } .led-strip-h::before { content: ''; position: absolute; inset: 2px; background: linear-gradient(90deg, rgba(28,184,184,0.3) 0%, rgba(255,61,113,0.2) 50%, rgba(28,184,184,0.3) 100% ); animation: strip-move 3s linear infinite; } @keyframes led-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes screen-shift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } @keyframes strip-move { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .pixel-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(28,184,184,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(28,184,184,0.04) 1px, transparent 1px); background-size: 4px 4px; pointer-events: none; } /* Product info */ .product-info { padding: 28px 28px 32px; flex: 1; display: flex; flex-direction: column; } .product-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .product-tag.rent { color: var(--accent2); } .product-tag.both { color: var(--accent3); } .product-tag-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .product-name { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--white); margin-bottom: 8px; line-height: 1.1; } .product-desc { font-size: 13px; line-height: 1.7; color: var(--text); margin-bottom: 20px; flex: 1; } .product-specs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; } /* Spec chips use monospace — Apple-meets-tech feel for technical values */ .spec-chip { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: -0.1px; text-transform: none; padding: 5px 11px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--text-light); border-radius: var(--radius-pill); } .product-action { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--bg2); } .product-price-label { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--grey); } .btn-quote { font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: -0.05px; text-transform: none; padding: 10px 22px; background: transparent; color: var(--accent); border: 1px solid rgba(28,184,184,0.32); cursor: pointer; transition: all var(--transition-fast); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-pill); } .btn-quote:hover { background: rgba(28,184,184,0.08); border-color: var(--accent); } /* ─── RENTAL CROSS-LINK BUTTON ─── Soft purple sister of .btn-quote. Used inside catalogue cards on products that are ALSO available for rent (type=both / rental) — clicking it jumps to /eventos. Visually subordinate to the primary cyan "View Details" so the sale flow stays dominant. */ .btn-rental-soft { font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: -0.05px; text-transform: none; padding: 10px 18px; background: rgba(123,97,255,0.06); color: var(--accent3, #7b61ff); border: 1px solid rgba(123,97,255,0.30); cursor: pointer; transition: all var(--transition-fast); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-pill); } .btn-rental-soft:hover { background: rgba(123,97,255,0.14); border-color: var(--accent3, #7b61ff); transform: translateY(-1px); } .btn-rental-soft svg { opacity: 0.85; } :root[data-theme="light"] .btn-rental-soft { background: rgba(123,97,255,0.05); color: #5b46d6; border-color: rgba(123,97,255,0.35); } :root[data-theme="light"] .btn-rental-soft:hover { background: rgba(123,97,255,0.12); border-color: #5b46d6; color: #4a37c2; } /* The "Events →" filter pill in /products is actually an link to /eventos.html — style it like a sibling filter-btn but with a hint that it leaves the page. */ .filter-btn-link { text-decoration: none !important; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; } /* ═══════════════════════════════════════════════ QUOTE CART — icon button (in nav) + slide-in drawer Light client-only cart for sale flows. ═══════════════════════════════════════════════ */ .cart-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(28,184,184,0.04); border: 1px solid rgba(28,184,184,0.12); border-radius: 8px; color: var(--text); cursor: pointer; transition: all var(--transition-fast); } .cart-icon-btn:hover { background: rgba(28,184,184,0.10); border-color: rgba(28,184,184,0.30); color: var(--accent); transform: translateY(-1px); } .cart-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--accent3, #7b61ff); color: #fff; border-radius: 9px; font-family: var(--font-display); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(123,97,255,0.40); pointer-events: none; } .cart-badge[hidden] { display: none; } :root[data-theme="light"] .cart-icon-btn { background: rgba(18,148,148,0.04); border-color: var(--border-subtle); } :root[data-theme="light"] .cart-icon-btn:hover { background: rgba(18,148,148,0.10); color: #0e7777; } /* ─── DRAWER ─── */ .cart-drawer { position: fixed; inset: 0; z-index: 9998; animation: lb-fade-in 0.18s ease; } .cart-drawer[hidden] { display: none; } .cart-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); } .cart-drawer-panel { position: absolute; top: 0; right: 0; height: 100vh; width: min(420px, 92vw); background: var(--bg2); border-left: 1px solid var(--border-accent); display: flex; flex-direction: column; box-shadow: -16px 0 40px rgba(0,0,0,0.45); animation: cart-slide-in 0.28s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes cart-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } .cart-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--border-subtle); } .cart-drawer-header h3 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--white); } .cart-drawer-close { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.20); color: var(--white); border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; transition: all 0.2s; } .cart-drawer-close:hover { background: rgba(255,255,255,0.10); transform: scale(1.05); } .cart-drawer-body { flex: 1; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; } .cart-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 60px 20px; color: var(--text); } .cart-empty svg { color: var(--text); } .cart-empty p { font-family: var(--font-body); font-size: 15px; margin: 0; color: var(--text-light); } .cart-empty small { font-family: var(--font-body); font-size: 12px; color: var(--grey); max-width: 240px; line-height: 1.5; } .cart-item { display: flex; gap: 14px; padding: 14px; background: var(--bg3); border: 1px solid var(--border-subtle); border-radius: 10px; } .cart-item-img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--bg4); } .cart-item-img img { width: 100%; height: 100%; object-fit: cover; } .cart-item-img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--bg4), var(--bg3)); } .cart-item-info { flex: 1; display: flex; flex-direction: column; gap: 6px; } .cart-item-name { margin: 0; font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--white); } .cart-item-variant { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--accent); letter-spacing: 0.5px; } .cart-item-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; } .cart-qty { display: inline-flex; align-items: center; gap: 0; background: var(--bg2); border: 1px solid var(--border-subtle); border-radius: 6px; overflow: hidden; } .cart-qty button { width: 26px; height: 26px; border: none; background: transparent; color: var(--text-light); font-size: 15px; cursor: pointer; transition: background 0.15s; } .cart-qty button:hover { background: rgba(28,184,184,0.10); color: var(--accent); } .cart-qty span { min-width: 28px; text-align: center; font-family: var(--font-mono, monospace); font-size: 13px; color: var(--white); font-weight: 600; } .cart-item-remove { background: transparent; border: none; color: var(--grey); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; padding: 4px 6px; transition: color 0.15s; } .cart-item-remove:hover { color: #ff5a7a; } .cart-drawer-footer { border-top: 1px solid var(--border-subtle); padding: 18px 22px 24px; background: var(--bg2); } .cart-quote-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; background: linear-gradient(135deg, var(--accent), var(--accent-bright, var(--accent))); color: var(--bg); border: none; border-radius: 6px; cursor: pointer; box-shadow: 0 6px 18px rgba(28,184,184,0.32); transition: transform 0.2s, box-shadow 0.2s, filter 0.2s; } .cart-quote-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 24px rgba(28,184,184,0.45); } .cart-promise { margin: 10px 0 0; text-align: center; font-family: var(--font-body); font-size: 11px; color: var(--grey); letter-spacing: 0.3px; } /* Light theme — soften surfaces and lift contrast. */ :root[data-theme="light"] .cart-drawer-panel { background: var(--bg2); } :root[data-theme="light"] .cart-drawer-header h3 { color: var(--white); } :root[data-theme="light"] .cart-drawer-close { background: rgba(0,0,0,0.05); border-color: var(--border-subtle); color: var(--white); } :root[data-theme="light"] .cart-item { background: var(--bg3); } :root[data-theme="light"] .cart-quote-btn { color: #fff; } @media (max-width: 480px) { .cart-drawer-panel { width: 100vw; border-left: none; } } /* ═══════════════════════════════════════════════ EVENTOS — RENTAL CATALOGUE (ec-* prefix) Mirror of the sales catalogue on /products but with INVERTED button hierarchy: Rent is the primary purple action, Buy is the secondary cyan-outline soft action. Card chrome is also slightly differentiated to avoid confusion. ═══════════════════════════════════════════════ */ .events-catalogue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; max-width: 1280px; margin: 0 auto; } @media (max-width: 768px) { .events-catalogue-grid { grid-template-columns: 1fr; gap: 20px; } } .ec-card { position: relative; display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .ec-card:hover { transform: translateY(-4px); border-color: rgba(123,97,255,0.40); box-shadow: 0 12px 32px rgba(123,97,255,0.18); } .ec-card.premium { border-color: rgba(123,97,255,0.28); } .ec-card.pre-sale { border-color: rgba(255,170,60,0.30); } /* Media — slightly different from /products: full-bleed top with the tag chip bottom-left instead of overlaid centred. */ .ec-card-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg3); text-decoration: none; } .ec-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .ec-card:hover .ec-card-media img { transform: scale(1.04); } .ec-card-tag { position: absolute; bottom: 12px; left: 12px; background: rgba(123,97,255,0.85); color: #fff; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; backdrop-filter: blur(8px); } .ec-tier { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 4px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; } .ec-tier-premium { background: linear-gradient(135deg, #7b61ff, #a78bff); color: #fff; } .ec-tier-presale { background: linear-gradient(135deg, #ffaa3c, #ffc66b); color: #1a1206; } /* Body */ .ec-card-body { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 20px; flex: 1; } .ec-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .ec-card-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.15; letter-spacing: -0.3px; color: var(--white); margin: 0; } /* Mini chips that signal availability mode. The "Sale & Rental" one is the cyan-tinted dual-availability hint the user specifically asked for. */ .ec-dual-badge, .ec-rent-badge { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 8px; border-radius: 3px; white-space: nowrap; flex: 0 0 auto; } .ec-dual-badge { background: rgba(28,184,184,0.10); color: var(--accent); border: 1px solid rgba(28,184,184,0.30); } .ec-rent-badge { background: rgba(123,97,255,0.10); color: var(--accent3, #7b61ff); border: 1px solid rgba(123,97,255,0.30); } .ec-card-tagline { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--text); margin: 0; } .ec-ideal { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .ec-chip { display: inline-flex; align-items: center; background: rgba(123,97,255,0.06); color: var(--text-light); border: 1px solid rgba(123,97,255,0.15); font-family: var(--font-body); font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 99px; letter-spacing: 0.1px; } /* Actions — Rent primary purple, Buy secondary cyan outline, Details tertiary text-link. */ .ec-card-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border-subtle); } .ec-btn-rent { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.1px; padding: 10px 16px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; text-decoration: none; background: linear-gradient(135deg, var(--accent3, #7b61ff), #9a82ff); color: #fff; box-shadow: 0 6px 18px rgba(123,97,255,0.32); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .ec-btn-rent:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(123,97,255,0.45); filter: brightness(1.05); } .ec-btn-rent svg { opacity: 0.95; } .ec-btn-buy { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-weight: 500; font-size: 13px; padding: 9px 14px; background: rgba(28,184,184,0.05); color: var(--accent); border: 1px solid rgba(28,184,184,0.30); border-radius: 999px; cursor: pointer; text-decoration: none; transition: all var(--transition-fast); } .ec-btn-buy:hover { background: rgba(28,184,184,0.12); border-color: var(--accent); transform: translateY(-1px); } .ec-btn-buy svg { opacity: 0.8; } .ec-btn-details { display: inline-flex; align-items: center; font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--grey); text-decoration: none; padding: 4px 0; transition: color 0.2s ease; } .ec-btn-details:hover { color: var(--accent3, #7b61ff); } /* Light theme — soften the dark-bg styling. */ :root[data-theme="light"] .ec-card { background: var(--bg2); border-color: var(--border-subtle); } :root[data-theme="light"] .ec-card:hover { box-shadow: 0 12px 32px rgba(123,97,255,0.12); } :root[data-theme="light"] .ec-btn-rent { background: linear-gradient(135deg, #6649e6, #8a72f5); box-shadow: 0 6px 18px rgba(102,73,230,0.30); } :root[data-theme="light"] .ec-btn-buy { background: rgba(18,148,148,0.05); color: #0e7777; border-color: rgba(18,148,148,0.35); } :root[data-theme="light"] .ec-card-name { color: var(--white); } /* ═══════════════════════════════════════════════ RENTAL MODEL ═══════════════════════════════════════════════ */ #rental { background: var(--bg2); position: relative; overflow: hidden; } #rental::before { content: ''; position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,61,113,0.04) 0%, transparent 70%); top: -200px; right: -200px; } .rental-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-top: 60px; } .rental-steps { display: flex; flex-direction: column; gap: 0; } .step-item { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--border-subtle); position: relative; transition: all 0.3s; } .step-item:hover { padding-left: 8px; } .step-num { font-family: var(--font-display); font-weight: 900; font-size: 48px; line-height: 1; color: rgba(28,184,184,0.08); min-width: 60px; position: relative; top: -4px; transition: color 0.4s; } .step-item:hover .step-num { color: var(--accent); text-shadow: 0 0 30px rgba(28,184,184,0.3); } .step-content h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--white); margin-bottom: 8px; } .step-content p { font-size: 14px; line-height: 1.7; color: var(--text); } .rental-packages { display: flex; flex-direction: column; gap: 12px; } .package-card { background: var(--bg3); padding: 28px 32px; border: 1px solid var(--border-subtle); position: relative; transition: all 0.3s; cursor: default; border-radius: 4px; } .package-card.featured { border-color: var(--accent); background: rgba(28,184,184,0.03); } .package-card.featured::before { content: data-attr; position: absolute; top: -1px; right: 24px; } .package-badge { position: absolute; top: -1px; right: 24px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); color: var(--bg); padding: 4px 14px; border-radius: 0 0 4px 4px; } .package-card:hover { border-color: rgba(28,184,184,0.25); } .package-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .package-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--white); } .package-price { text-align: right; } .package-price .amount { font-family: var(--font-display); font-weight: 900; font-size: 28px; background: linear-gradient(135deg, var(--accent), var(--accent-bright)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .package-price .period { font-family: var(--font-display); font-size: 11px; letter-spacing: 1px; color: var(--grey); text-transform: uppercase; } .package-includes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .include-tag { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; background: rgba(255,255,255,0.03); color: var(--text); border-radius: 3px; border: 1px solid rgba(255,255,255,0.04); } /* ═══════════════════════════════════════════════ CONTACT ═══════════════════════════════════════════════ */ #contact { background: var(--bg); position: relative; } #contact::before { content: ''; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(28,184,184,0.03) 0%, transparent 70%); bottom: -100px; right: -100px; pointer-events: none; } .contact-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; margin-top: 60px; } .contact-info { display: flex; flex-direction: column; gap: 32px; } .contact-item { display: flex; align-items: flex-start; gap: 20px; } .contact-icon { width: 48px; height: 48px; background: rgba(28,184,184,0.05); border: 1px solid rgba(28,184,184,0.12); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; transition: all 0.3s; } .contact-item:hover .contact-icon { border-color: var(--accent); box-shadow: 0 0 16px rgba(28,184,184,0.1); } .contact-item h4 { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .contact-item p { font-size: 15px; color: var(--white); } .contact-item span { font-size: 13px; color: var(--text); display: block; margin-top: 2px; } /* ─── FORM ─── */ .contact-form { display: flex; flex-direction: column; gap: 14px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text); } .form-group input, .form-group select, .form-group textarea { background: var(--bg3); border: 1px solid rgba(28,184,184,0.08); color: var(--white); font-family: var(--font-body); font-size: 14px; padding: 13px 16px; outline: none; transition: all var(--transition-fast); -webkit-appearance: none; appearance: none; border-radius: 4px; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); background: rgba(28,184,184,0.02); box-shadow: 0 0 0 3px rgba(28,184,184,0.06); } .form-group select option { background: var(--bg); } .form-group textarea { resize: vertical; min-height: 120px; } .intent-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; } .intent-btn { padding: 14px; background: var(--bg3); border: 1px solid rgba(28,184,184,0.08); color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; gap: 8px; justify-content: center; border-radius: 4px; } .intent-btn.selected { border-color: var(--accent); background: rgba(28,184,184,0.06); color: var(--accent); } .intent-btn.selected.rent-btn { border-color: var(--accent2); background: rgba(255,61,113,0.06); color: var(--accent2); } .form-submit { display: flex; align-items: center; gap: 16px; margin-top: 8px; } .form-submit .btn-primary { width: 100%; justify-content: center; } .form-promise { font-size: 12px; color: var(--grey); display: flex; align-items: center; gap: 6px; } /* Promise box */ .promise-box { padding: 24px; background: var(--bg3); border: 1px solid rgba(28,184,184,0.08); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; } .promise-box-label { font-family: var(--font-display); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .promise-box-text { font-size: 14px; line-height: 1.7; color: var(--text); } /* ═══════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════ */ footer { background: var(--bg); border-top: 1px solid var(--border-subtle); padding: 56px 48px 32px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.03); margin-bottom: 32px; } .footer-brand .nav-logo img { height: 28px; } .footer-brand p { font-size: 13px; line-height: 1.7; color: var(--text); margin-top: 16px; max-width: 300px; } .footer-col h5 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col ul li a { font-size: 13px; color: var(--text); text-decoration: none; transition: all var(--transition-fast); } .footer-col ul li a:hover { color: var(--accent); padding-left: 4px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; } .footer-bottom p { font-size: 12px; color: var(--grey); } .footer-bottom span { background: linear-gradient(135deg, var(--accent), var(--accent-bright)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ═══════════════════════════════════════════════ ANIMATIONS ═══════════════════════════════════════════════ */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* ─── SCROLL REVEAL ─── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ─── PRODUCT CARD EXTRAS (callouts, advantage box, premium badge) ─── */ .spec-chip.accent { color: var(--accent); border-color: rgba(28,184,184,0.3); background: rgba(28,184,184,0.05); } .spec-chip.purple { color: var(--accent3); border-color: rgba(123,97,255,0.3); background: rgba(123,97,255,0.05); } .spec-chip.pink { color: var(--accent2); border-color: rgba(255,61,113,0.3); background: rgba(255,61,113,0.05); } .product-callout { margin: 4px 0 16px; } .product-callout-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .product-callout-label.purple { color: var(--accent3); } .product-callout-chips { display: flex; flex-wrap: wrap; gap: 4px; } .product-advantage { margin: 8px 0 16px; padding: 12px 14px; background: rgba(255,61,113,0.05); border: 1px solid rgba(255,61,113,0.15); border-left: 3px solid var(--accent2); } .product-advantage-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent2); margin-bottom: 6px; } .product-advantage-text { font-size: 12px; line-height: 1.6; color: var(--text); } .product-card.premium .product-img-wrap { border-top: 2px solid var(--accent2); } .product-badge-premium { position: absolute; top: 12px; right: 12px; z-index: 2; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 5px 12px; background: var(--accent2); color: var(--white); box-shadow: 0 4px 16px rgba(255,61,113,0.3); } /* On 3-column grid the 3rd card spans only its column; this just keeps premium card aligned at any breakpoint. */ @media (max-width: 1024px) { .product-card.premium { grid-column: span 2; } } @media (max-width: 768px) { .product-card.premium { grid-column: auto; } } /* ═══════════════════════════════════════════════ OWN A SCREEN — Sales emphasis ═══════════════════════════════════════════════ */ #own { background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%); border-top: 1px solid var(--border-subtle); position: relative; overflow: hidden; } #own::before { content: ''; position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(28,184,184,0.05) 0%, transparent 70%); top: -200px; right: -200px; pointer-events: none; } .own-wrap { position: relative; z-index: 1; } .own-intro { max-width: 720px; margin-bottom: 56px; } .own-sub { font-size: 17px; line-height: 1.6; color: var(--grey); max-width: 580px; margin-top: 12px; } .own-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; } .own-card { background: var(--bg3); border: 1px solid var(--border-subtle); padding: 36px 32px; position: relative; transition: all var(--transition-smooth); } .own-card:hover { background: var(--bg4); border-color: rgba(28,184,184,0.3); transform: translateY(-3px); } .own-num { font-family: var(--font-display); font-weight: 900; font-size: 14px; letter-spacing: 3px; color: var(--accent); margin-bottom: 20px; } .own-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--white); letter-spacing: -0.3px; margin-bottom: 12px; } .own-card p { font-size: 14px; line-height: 1.6; color: var(--text); } .own-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-top: 32px; border-top: 1px solid var(--border-subtle); } .own-rent-link { display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; font-size: 13px; color: var(--grey); transition: color 0.3s; } .own-rent-link:hover { color: var(--accent); } .own-rent-arrow { font-family: var(--font-display); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4px; color: var(--white); } .rental-sub { font-size: 16px; line-height: 1.6; color: var(--grey); max-width: 580px; margin-top: 12px; margin-bottom: 32px; } /* ─── HOME CATALOGUE TEASER ─── */ .catalogue-teaser-sub { font-size: 15px; color: var(--grey); margin-top: 8px; } .teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; } .teaser-card { background: var(--bg3); border: 1px solid var(--border-subtle); text-decoration: none; display: flex; flex-direction: column; transition: all var(--transition-smooth); overflow: hidden; } .teaser-card:hover { border-color: rgba(28,184,184,0.35); transform: translateY(-3px); box-shadow: 0 16px 50px rgba(0,0,0,0.35); } .teaser-card.premium { border-color: rgba(255,61,113,0.25); } .teaser-card.premium:hover { border-color: var(--accent2); box-shadow: 0 16px 50px rgba(255,61,113,0.15); } /* Uniform product image frame — same aspect-ratio, same dark backdrop, same fit treatment for every product regardless of source image type (transparent PNG product shots or full-bleed scene photos). */ .teaser-img-wrap { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #0a1018 0%, #0e1520 100%); overflow: hidden; } .teaser-img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 24px; transition: transform 0.6s ease; } /* Legacy modifier — kept harmless if any markup still uses it */ .teaser-img-wrap.product { background: linear-gradient(135deg, #0a1018 0%, #0e1520 100%); } .teaser-img-wrap.product img { object-fit: contain; padding: 24px; } .teaser-card:hover img { transform: scale(1.04); } .teaser-body { padding: 22px 24px 24px; } .teaser-tag { display: inline-block; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 10px; } .teaser-tag.accent { color: var(--accent); } .teaser-tag.purple { color: var(--accent3); } .teaser-tag.pink { color: var(--accent2); } .teaser-tag.amber { color: #ffb800; } .teaser-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.2px; color: var(--white); line-height: 1.1; margin-bottom: 6px; } .teaser-body p { font-size: 13px; line-height: 1.55; color: var(--grey); } .catalogue-teaser-cta { text-align: center; margin-top: 36px; } @media (max-width: 1024px) { .teaser-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .teaser-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════ CATALOGUE PAGE (products.html) ═══════════════════════════════════════════════ */ .catalogue-hero { padding: 200px var(--gutter) 60px; position: relative; overflow: hidden; background: var(--bg1); border-bottom: 1px solid var(--border-subtle); /* No min-height — let the hero be exactly as tall as its content. That avoids an empty bottom band that made the title look 'high'. */ } /* Inside the catalogue hero the page-level padding already gives the nav clearance — neutralise the product-detail breadcrumb's own 100 px top padding so it doesn't double-up and push everything behind the fixed nav. */ .catalogue-hero .breadcrumb { padding: 0 !important; margin: 0 0 28px; } .catalogue-hero .section-label { margin-bottom: 18px; } .catalogue-hero .catalogue-title { margin-bottom: 24px; } /* Dark overlay sitting between slideshow and text so the title is legible regardless of which slide is showing. */ /* Transparent-LED overlay — simulates looking through a transparent LED panel: a fine pixel grid + horizontal scan lines + a sutle cyan glow behind the title area, plus a very light vertical wash for nav and bottom legibility. The slideshow photo reads through the "panel" like real LED transparente content. */ .catalogue-hero-overlay { position: absolute; inset: 0; z-index: 1; background: /* 1. Subtle cyan glow behind the title (top-left area) */ radial-gradient(ellipse 60% 50% at 18% 38%, rgba(28,184,184,0.14) 0%, transparent 65%), /* 2. Vertical wash — minimal up top so nav reads, fade to page bg at bottom */ linear-gradient(180deg, rgba(5,7,9,0.28) 0%, rgba(5,7,9,0.05) 35%, rgba(5,7,9,0.45) 85%, var(--bg) 100%), /* 3. Horizontal anchor for title legibility */ linear-gradient(90deg, rgba(5,7,9,0.45) 0%, rgba(5,7,9,0.12) 40%, transparent 75%), /* 4. Scan lines — horizontal, 3px stride, very faint */ repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px, transparent 1px, transparent 3px), /* 5. LED pixel grid — dot every 10px */ radial-gradient(circle, rgba(0,0,0,0.22) 0.8px, transparent 1.4px) 0 0 / 10px 10px; pointer-events: none; } /* Light mode — invert the grid and scan lines to white dots/lines so they read on bright backgrounds without becoming "dirty". */ :root[data-theme="light"] .catalogue-hero-overlay { background: radial-gradient(ellipse 60% 50% at 18% 38%, rgba(18,148,148,0.16) 0%, transparent 65%), linear-gradient(180deg, rgba(250,250,250,0.18) 0%, rgba(250,250,250,0.02) 35%, rgba(250,250,250,0.35) 85%, var(--bg) 100%), linear-gradient(90deg, rgba(250,250,250,0.42) 0%, rgba(250,250,250,0.10) 40%, transparent 75%), repeating-linear-gradient(0deg, rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 1px, transparent 1px, transparent 3px), radial-gradient(circle, rgba(255,255,255,0.32) 0.8px, transparent 1.4px) 0 0 / 10px 10px; } /* Mobile: drop the grid + scan lines (they get too dense at small widths and start to feel like noise). Keep the washes + glow. */ @media (max-width: 768px) { .catalogue-hero-overlay, :root[data-theme="light"] .catalogue-hero-overlay { background: radial-gradient(ellipse 80% 55% at 30% 35%, rgba(28,184,184,0.14) 0%, transparent 70%), linear-gradient(180deg, rgba(5,7,9,0.45) 0%, rgba(5,7,9,0.18) 40%, rgba(5,7,9,0.55) 90%, var(--bg) 100%), linear-gradient(90deg, rgba(5,7,9,0.55) 0%, rgba(5,7,9,0.18) 50%, transparent 85%); } } .catalogue-hero-inner { position: relative; z-index: 2; max-width: 1180px; width: 100%; } .catalogue-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 5.5vw, 76px); line-height: 1.02; letter-spacing: -2px; color: var(--white); margin-bottom: 20px; } .catalogue-title .accent { display: block; background: linear-gradient(135deg, var(--accent), var(--accent-bright)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .catalogue-sub { font-size: 17px; line-height: 1.6; color: var(--grey); max-width: 700px; margin-bottom: 32px; } .catalogue-filters { margin-top: 8px; } .catalogue-grid-section { padding: 28px var(--gutter) 90px; background: var(--bg1); } /* ─── Inline warranty strip on catalogue cards + product detail hero ─── */ .cat-warranty { margin-top: 4px; padding: 12px 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-left: 3px solid var(--accent); border-radius: var(--radius-md); } .cat-warranty-label { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .cat-warranty-text { font-size: 13px; line-height: 1.6; color: var(--text); } /* Container for the per-product callouts injected under the hero description by product-detail.js. Each child callout already has its own border/background — this is just vertical rhythm. */ .product-hero-extras { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; max-width: 540px; } .product-hero-extras > * { margin: 0; } .product-hero-warranty { margin-top: 0; padding: 14px 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-left: 3px solid var(--accent); border-radius: var(--radius-md); max-width: 540px; } .product-hero-warranty-label { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .product-hero-warranty-text { font-size: 13.5px; line-height: 1.6; color: var(--text); } /* ─── How it works (catalogue page — deployment story) ─── */ .how-section { padding: 80px var(--gutter) 90px; background: var(--bg1); border-top: 1px solid var(--border-subtle); } .how-inner { max-width: 1180px; margin: 0 auto; } .how-header { max-width: 820px; margin-bottom: 56px; } .how-sub { font-size: 17px; line-height: 1.65; color: var(--grey); margin-top: 14px; } .how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .how-card { background: var(--bg3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; transition: all var(--transition-fast); } .how-card:hover { border-color: rgba(28,184,184,0.32); transform: translateY(-2px); } .how-num { font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: 0.5px; color: var(--accent); margin-bottom: 8px; } .how-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.2; letter-spacing: -0.3px; color: var(--white); } .how-card p { font-size: 14.5px; line-height: 1.6; color: var(--text); } @media (max-width: 1024px) { .how-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .how-section { padding: 60px 20px 70px; } .how-grid { grid-template-columns: 1fr; gap: 16px; } .how-card { padding: 26px 22px; } } /* ─── Warranty & Support full section (products.html) ─── */ .warranty-section { padding: 80px var(--gutter) 100px; background: var(--bg2); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .warranty-inner { max-width: 1180px; margin: 0 auto; } .warranty-header { margin-bottom: 56px; max-width: 820px; } .warranty-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); margin-bottom: 48px; } .warranty-card { background: var(--bg3); padding: 36px 32px; display: flex; flex-direction: column; gap: 12px; transition: background var(--transition-fast); } .warranty-card:hover { background: var(--bg4); } .warranty-icon { font-size: 28px; margin-bottom: 4px; } .warranty-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.2; letter-spacing: -0.3px; color: var(--white); } .warranty-card p { font-size: 14.5px; line-height: 1.65; color: var(--text); } .warranty-sla { display: flex; align-items: baseline; gap: 16px; padding: 28px 32px; background: rgba(28,184,184,0.04); border: 1px solid rgba(28,184,184,0.18); border-left: 3px solid var(--accent); border-radius: var(--radius-md); } .warranty-sla-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: var(--grey); } .warranty-sla-value { font-family: var(--font-mono); font-weight: 600; font-size: 30px; color: var(--accent); letter-spacing: -0.5px; } .warranty-sla-note { font-size: 13px; color: var(--text); } @media (max-width: 768px) { .warranty-section { padding: 60px 20px 70px; } .warranty-grid { grid-template-columns: 1fr; } .warranty-card { padding: 28px 24px; } .warranty-sla { flex-direction: column; align-items: flex-start; gap: 6px; } .warranty-sla-value { font-size: 26px; } } /* Catalogue grid — density-aware. Default (data-cols="2") shows 2 cards per row with the internal layout stacked (image on top, body below). data-cols="1" goes back to the original full-width horizontal card. data-cols="4" packs 4 narrower stacked cards per row. Mobile is capped to 1–2 below. */ .catalogue-grid { display: grid; gap: 32px; max-width: 1400px; margin: 0 auto; grid-template-columns: repeat(2, 1fr); } .catalogue-grid[data-cols="1"] { grid-template-columns: 1fr; gap: 48px; } .catalogue-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); gap: 32px; } .catalogue-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); gap: 22px; } /* When density > 1, each .cat-card stacks internally (image top, body below) and drops the alternating-side flip. */ .catalogue-grid[data-cols="2"] .cat-card, .catalogue-grid[data-cols="4"] .cat-card { grid-template-columns: 1fr; grid-template-rows: auto auto; } .catalogue-grid[data-cols="2"] .cat-card:nth-child(even) .cat-card-media, .catalogue-grid[data-cols="4"] .cat-card:nth-child(even) .cat-card-media { order: 0; } .catalogue-grid[data-cols="2"] .cat-card:nth-child(even) .cat-card-body, .catalogue-grid[data-cols="4"] .cat-card:nth-child(even) .cat-card-body { order: 1; } /* Compact dense mode — trim down inner spacing + typography. */ .catalogue-grid[data-cols="4"] .cat-card-body { padding: 16px; gap: 8px; } .catalogue-grid[data-cols="4"] .cat-card-name { font-size: 16px; } .catalogue-grid[data-cols="4"] .cat-card-tagline { font-size: 12px; } .catalogue-grid[data-cols="4"] .cat-card-desc { display: none; } .catalogue-grid[data-cols="4"] .cat-callout, .catalogue-grid[data-cols="4"] .cat-advantage, .catalogue-grid[data-cols="4"] .cat-warranty, .catalogue-grid[data-cols="4"] .cat-advantages-list { display: none; } .catalogue-grid[data-cols="4"] .cat-card-actions { flex-direction: column; gap: 6px; align-items: stretch; } .catalogue-grid[data-cols="4"] .cat-card-actions a { font-size: 12px; padding: 8px 10px; text-align: center; justify-content: center; } /* Tablet — cap 4-col to 2-col, keep 1- and 2-col as chosen. */ @media (max-width: 1024px) { .catalogue-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); } } /* Mobile — cap to max 2 columns regardless of preference (kept at 1 for the explicit 1-col choice). */ @media (max-width: 640px) { .catalogue-grid, .catalogue-grid[data-cols="2"], .catalogue-grid[data-cols="4"] { grid-template-columns: 1fr; gap: 24px; } .catalogue-grid[data-cols="1"] { gap: 28px; } } /* ─── VIEW DENSITY SWITCH ─── */ .view-switch { display: inline-flex; align-items: center; gap: 0; margin-left: 12px; padding: 3px; background: rgba(28,184,184,0.04); border: 1px solid rgba(28,184,184,0.12); border-radius: 6px; } .view-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border: none; background: transparent; color: var(--grey); cursor: pointer; border-radius: 4px; transition: all 0.15s; } .view-btn:hover { color: var(--accent); background: rgba(28,184,184,0.08); } .view-btn.active { background: var(--accent); color: var(--bg); } :root[data-theme="light"] .view-switch { background: rgba(18,148,148,0.04); border-color: var(--border-subtle); } :root[data-theme="light"] .view-btn { color: var(--grey); } :root[data-theme="light"] .view-btn:hover { color: #0e7777; background: rgba(18,148,148,0.10); } :root[data-theme="light"] .view-btn.active { background: var(--accent); color: #fff; } @media (max-width: 640px) { .view-switch { display: none; } /* mobile = forced single layout */ } /* ─── CATALOGUE PAGE BADGE ─── */ /* Same hero-badge pill as the landing, but tuned for the catalogue hero (which sits over a darker hero overlay). */ .catalogue-badge { margin-bottom: 22px; } .cat-card { background: var(--bg3); border: 1px solid var(--border-subtle); display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; overflow: hidden; transition: all var(--transition-smooth); opacity: 0; transform: translateY(20px); } /* Alternate every second card: image on the right, info on the left. */ .cat-card:nth-child(even) .cat-card-media { order: 2; } .cat-card:nth-child(even) .cat-card-body { order: 1; } .cat-card.visible { opacity: 1; transform: translateY(0); } .cat-card:hover { border-color: rgba(28,184,184,0.3); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .cat-card.premium { border-color: rgba(255,61,113,0.25); } .cat-card.premium:hover { border-color: var(--accent2); box-shadow: 0 20px 60px rgba(255,61,113,0.15); } .cat-card.pre-sale { border-color: rgba(255,184,0,0.3); } .cat-card.pre-sale:hover { border-color: #ffb800; box-shadow: 0 20px 60px rgba(255,184,0,0.15); } .product-badge-presale { position: absolute; top: 14px; left: 14px; z-index: 3; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; padding: 6px 12px; background: linear-gradient(135deg, #ffb800, #ff8a00); color: var(--bg1); border-radius: 2px; box-shadow: 0 4px 20px rgba(255,184,0,0.4); } /* Advantages list (Infinity Glass) */ .cat-advantages-list { padding: 12px 14px; background: rgba(28,184,184,0.04); border-left: 2px solid rgba(28,184,184,0.4); } .cat-advantages-list ul { list-style: none; display: flex; flex-direction: column; gap: 6px; } .cat-advantages-list li { font-size: 13px; line-height: 1.55; color: var(--text); padding-left: 18px; position: relative; } .cat-advantages-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; } /* MEDIA AREA — cycling images; fills full height of the row (no fixed aspect-ratio in horizontal layout, the body column dictates height). */ .cat-card-media { position: relative; display: block; min-height: 380px; background: var(--bg2); overflow: hidden; text-decoration: none; } .cat-card-images { position: absolute; inset: 0; } /* Uniform image treatment for ALL catalogue cards — same aspect-ratio (set on .cat-card-media) + contain + dark gradient backdrop. */ .cat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 30px; opacity: 0; background: linear-gradient(135deg, #0a1018 0%, #0e1520 100%); transition: opacity 0.6s ease, transform 1.4s ease; } .cat-img.active { opacity: 1; } .cat-card-media:hover .cat-img.active { transform: scale(1.04); } .cat-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(180deg, transparent 0%, rgba(6,12,18,0.92) 100%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .cat-card-media:hover .cat-card-overlay { opacity: 1; } .cat-card-overlay-text { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); } .cat-card-dots { position: absolute; bottom: 14px; right: 14px; display: flex; gap: 6px; z-index: 2; } .cat-dot { width: 6px; height: 6px; background: rgba(255,255,255,0.3); border-radius: 50%; transition: all 0.3s ease; } .cat-dot.active { background: var(--accent); width: 18px; border-radius: 3px; } /* BODY — now lives in the right (or left, alternating) column of a horizontal card, with generous padding to balance the image side. */ .cat-card-body { padding: 48px 56px; display: flex; flex-direction: column; justify-content: center; gap: 18px; } .cat-card-body .product-tag { margin-bottom: 2px; } .cat-card-name { font-family: var(--font-display); font-weight: 900; font-size: 36px; line-height: 1; letter-spacing: -0.5px; color: var(--white); margin: 0; } .cat-card-tagline { font-size: 15px; color: var(--accent); font-style: italic; line-height: 1.4; } .cat-card-desc { font-size: 15px; line-height: 1.7; color: var(--text); } .cat-card-body .product-specs { margin-bottom: 4px; } /* Callouts (configurations, ideal-for) */ .cat-callout { padding: 12px 14px; background: rgba(28,184,184,0.04); border-left: 2px solid rgba(28,184,184,0.4); } .cat-callout-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .cat-callout-label.purple { color: var(--accent3); } .cat-callout-chips { display: flex; flex-wrap: wrap; gap: 4px; } .cat-advantage { padding: 14px; background: rgba(255,61,113,0.06); border: 1px solid rgba(255,61,113,0.18); border-left: 3px solid var(--accent2); } .cat-advantage-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent2); margin-bottom: 6px; } .cat-advantage-text { font-size: 13px; line-height: 1.65; color: var(--text); } .cat-card-actions { display: flex; gap: 12px; margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--border-subtle); } .cat-card-actions .btn-primary { flex: 1; padding: 12px 22px; font-size: 12px; justify-content: center; } .cat-card-actions .btn-quote { white-space: nowrap; } /* CONTACT TEASER */ .catalogue-contact-teaser { padding: 80px var(--gutter); background: linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%); text-align: center; border-top: 1px solid var(--border-subtle); } .teaser-inner { max-width: 640px; margin: 0 auto; } .teaser-inner h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 4vw, 44px); color: var(--white); letter-spacing: -0.5px; margin-bottom: 16px; } .teaser-inner p { font-size: 16px; line-height: 1.6; color: var(--grey); margin-bottom: 28px; } /* Tablet — flatten horizontal cards into stacked rows once the info column would get too narrow. */ @media (max-width: 1024px) { .cat-card { grid-template-columns: 1fr; } .cat-card:nth-child(even) .cat-card-media { order: 0; } .cat-card:nth-child(even) .cat-card-body { order: 0; } .cat-card-media { min-height: 360px; } .cat-card-body { padding: 32px 36px; } } @media (max-width: 768px) { .catalogue-hero { padding: 150px 20px 44px; } .catalogue-hero .breadcrumb { margin: 0 0 20px; } .catalogue-grid-section { padding: 24px 20px 60px; } .catalogue-grid-section { padding: 40px 20px 60px; } .catalogue-grid { gap: 32px; } .cat-card-media { min-height: 280px; } .cat-card-body { padding: 24px 22px 26px; } .cat-card-actions { flex-direction: column; } .cat-card-actions .btn-quote { text-align: center; } } /* ═══════════════════════════════════════════════ PRODUCT DETAIL PAGE ═══════════════════════════════════════════════ */ .breadcrumb { padding: 160px var(--gutter) 0; margin-bottom: 32px; font-family: var(--font-display); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--grey); display: flex; align-items: center; gap: 10px; } .breadcrumb a { color: var(--grey); text-decoration: none; transition: color 0.3s; } .breadcrumb a:hover { color: var(--accent); } .bc-sep { color: var(--border-subtle); } #bc-current { color: var(--white); } .product-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; padding: 0 var(--gutter) 100px; align-items: start; } /* Sticky gallery clears the fixed 76 px nav with a 24 px buffer. */ .product-hero-gallery { position: sticky; top: 100px; } .gallery-main { width: 100%; aspect-ratio: 4 / 3; background: var(--bg2); border: 1px solid var(--border-subtle); overflow: hidden; display: flex; align-items: center; justify-content: center; } .gallery-main { background: linear-gradient(135deg, #0a1018 0%, #0e1520 100%); } .gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 32px; display: block; } .gallery-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .gallery-thumb { width: 80px; height: 80px; border: 1px solid var(--border-subtle); background: var(--bg3); cursor: pointer; padding: 0; overflow: hidden; transition: all 0.3s; } .gallery-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; background: linear-gradient(135deg, #0a1018 0%, #0e1520 100%); } .gallery-thumb:hover { border-color: var(--accent); } .gallery-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(28,184,184,0.25); } /* Video thumb — same square footprint as image thumbs, with a play icon overlaid centre. Image stays as the static poster. */ .gallery-thumb.video { position: relative; } .gallery-thumb.video img { filter: brightness(0.55); } .gallery-thumb.video:hover img { filter: brightness(0.7); } .gallery-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .gallery-thumb-play svg { color: var(--white); background: rgba(28,184,184,0.85); border-radius: 50%; padding: 8px; width: 30px; height: 30px; box-shadow: 0 4px 16px rgba(28,184,184,0.4); } .product-hero-info { padding-top: 8px; } .product-hero-info .product-tag { margin-bottom: 24px; } .product-hero-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(36px, 4.5vw, 56px); line-height: 1; letter-spacing: -1px; color: var(--white); margin-bottom: 12px; } .product-hero-tagline { font-size: 18px; line-height: 1.5; color: var(--grey); margin-bottom: 32px; max-width: 480px; } /* ─── Pixel-pitch variant selector ─── */ .variant-block { margin: 24px 0 4px; padding: 18px 20px; background: rgba(28,184,184,0.05); border: 1px solid rgba(28,184,184,0.22); border-radius: var(--radius-md); } .variant-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .variant-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--accent); } .variant-info-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: var(--grey); font-family: var(--font-body); font-size: 12px; padding: 2px 4px; transition: color var(--transition-fast); } .variant-info-btn:hover { color: var(--accent); } .variant-options { display: flex; gap: 10px; flex-wrap: wrap; } .variant-opt { flex: 1 1 0; min-width: 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 16px; background: var(--bg3); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .variant-opt:hover { border-color: rgba(28,184,184,0.45); } .variant-opt.active { border-color: var(--accent); background: rgba(28,184,184,0.1); box-shadow: 0 0 0 1px var(--accent) inset; } .variant-opt-pitch { font-family: var(--font-mono); font-weight: 600; font-size: 19px; color: var(--white); letter-spacing: -0.3px; } .variant-opt-tier { font-family: var(--font-body); font-size: 12px; color: var(--grey); } .variant-opt.active .variant-opt-tier { color: var(--accent); } /* Sold-out variant — visible but not selectable. */ .variant-opt.sold-out { cursor: not-allowed; opacity: 0.5; border-style: dashed; } .variant-opt.sold-out:hover { border-color: var(--border-subtle); } .variant-opt.sold-out .variant-opt-pitch { text-decoration: line-through; } .variant-opt.sold-out .variant-opt-tier { color: var(--accent2); text-transform: uppercase; font-size: 10px; letter-spacing: 1px; font-family: var(--font-mono); } /* Pre-order variant — selectable, flagged in amber. */ .variant-opt.pre-order { border-style: dashed; border-color: rgba(255,184,0,0.4); } .variant-opt.pre-order:hover { border-color: #ffb800; } .variant-opt.pre-order.active { border-color: #ffb800; background: rgba(255,184,0,0.1); box-shadow: 0 0 0 1px #ffb800 inset; } .variant-opt.pre-order .variant-opt-tier { color: #ffb800; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; font-family: var(--font-mono); } .variant-explainer { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(28,184,184,0.18); font-size: 13px; line-height: 1.6; color: var(--text); } .product-hero-price { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); margin-bottom: 28px; } .ph-price-label { font-family: var(--font-display); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--grey); } .ph-price-value { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--accent); } .product-hero-ctas { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; } /* ─── PRODUCT DETAIL DUAL CTAs ─── Two role-coloured buttons that share the visual language but flip their fill/outline state depending on how the user arrived: - Sale context (default) → .cta-buy.active (cyan filled) + .cta-rent (purple outline) - Rental context (?from=events) → .cta-rent.active (purple filled) + .cta-buy (cyan outline) Both stay clickable in either context so the user can cross-flow. */ .cta-buy, .cta-rent { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; padding: 12px 22px; border-radius: 3px; cursor: pointer; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .cta-buy { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); } .cta-buy:hover { background: rgba(28,184,184,0.10); border-color: var(--accent-bright, var(--accent)); } .cta-buy.active { background: var(--accent); color: var(--bg); border-color: var(--accent); box-shadow: 0 6px 18px rgba(28,184,184,0.30); } .cta-buy.active:hover { background: var(--accent-bright, var(--accent)); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(28,184,184,0.42); } .cta-rent { background: transparent; color: var(--accent3, #7b61ff); border: 1.5px solid var(--accent3, #7b61ff); } .cta-rent:hover { background: rgba(123,97,255,0.10); border-color: #9a82ff; } .cta-rent.active { background: linear-gradient(135deg, var(--accent3, #7b61ff), #9a82ff); color: #fff; border-color: var(--accent3, #7b61ff); box-shadow: 0 6px 18px rgba(123,97,255,0.32); } .cta-rent.active:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(123,97,255,0.45); filter: brightness(1.05); } /* Light theme — darken the purple gradient a touch so the contrast on white surfaces stays readable. */ :root[data-theme="light"] .cta-rent { color: #5b46d6; border-color: rgba(123,97,255,0.45); } :root[data-theme="light"] .cta-rent.active { background: linear-gradient(135deg, #6649e6, #8a72f5); border-color: #6649e6; color: #fff; } :root[data-theme="light"] .cta-buy { color: #0e7777; border-color: rgba(18,148,148,0.45); } :root[data-theme="light"] .cta-buy.active { background: var(--accent); color: #fff; border-color: var(--accent); } .product-hero-desc { font-size: 15px; line-height: 1.7; color: var(--text); max-width: 520px; } /* SPECS */ .product-specs-section { background: var(--bg2); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); margin-top: 40px; } .spec-item { background: var(--bg2); padding: 28px 24px; display: flex; flex-direction: column; gap: 8px; transition: background 0.3s; } .spec-item:hover { background: var(--bg3); } .spec-label { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--grey); } .spec-value { font-family: var(--font-mono); font-weight: 500; font-size: 18px; color: var(--white); letter-spacing: -0.3px; } /* ENVIRONMENTS */ .env-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 40px; } .env-card { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } /* When .env-card is rendered as a