/* ========================================================================== FONT: GOTHAM (file .otf reali forniti dall'utente, licenza propria) ========================================================================== */ @font-face { font-family: 'Gotham'; src: url('../fonts/gotham/Gotham-Book.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('../fonts/gotham/Gotham-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('../fonts/gotham/Gotham-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('../fonts/gotham/Gotham-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; } /* ========================================================================== DESIGN SYSTEM & VARIABLES (APPLE GRAPHIC STYLE ARCHITECTURE) ========================================================================== */ :root { /* Color Palette (Premium Apple Light Theme) */ --bg-darker: #ffffff; /* Pure white background */ --bg-dark: #f5f5f7; /* Apple's signature light gray */ --bg-light-dark: #e8e8ed; /* Silver gray for controls */ --border-color: rgba(0, 0, 0, 0.08); --border-hover: rgba(0, 0, 0, 0.15); /* Text Colors - Apple Typography */ --text-white: #1d1d1f; /* Primary deep charcoal black */ --text-gray: #515154; /* Secondary slate gray */ --text-muted: #86868b; /* Tertiary muted gray */ /* Font Families */ --font-heading: 'Gotham', 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: 'Gotham', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Alias per il refuso "--font-headings" (con la "s") usato in ~25 regole: prima non era mai definito, quindi quei titoli ignoravano silenziosamente il font previsto e usavano il default del browser. */ --font-headings: var(--font-heading); /* Brand Accent: Exenia Gold/Bronze */ --kelvin-color: 255, 235, 200; --accent-color: #baa16b; /* Exenia Brand Gold */ --accent-glow: rgba(186, 161, 107, 0.1); --light-opacity: 0.55; /* Layout Constants */ --max-width: 1240px; /* Slightly wider for modern look */ --navbar-height: 52px; /* Apple's extremely sleek compact navbar */ --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Custom Apple ease-out */ --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* Kelvin Specific overrides managed via JS */ .warm-light { --kelvin-color: 255, 160, 60; --accent-color: #d97706; --accent-glow: rgba(217, 119, 6, 0.1); --light-opacity: 0.65; } .neutral-light { --kelvin-color: 255, 235, 200; --accent-color: #baa16b; --accent-glow: rgba(186, 161, 107, 0.1); --light-opacity: 0.55; } .cool-light { --kelvin-color: 200, 225, 255; --accent-color: #0071e3; /* Apple Blue for cool light accent */ --accent-glow: rgba(0, 113, 227, 0.1); --light-opacity: 0.5; } /* Tema Scuro: prima esistevano solo ~89 override puntuali su singoli componenti (card prodotto, configuratore, modali...), ma le variabili di base (sfondo pagina, testo, bordi) non erano mai state ridefinite qui, quindi restava bianco e le sezioni non toccate da un override specifico restavano chiare col testo scuro sopra. Ridefinendo qui le stesse variabili già usate ovunque nel sito, tutto ciò che non ha già un override dedicato eredita automaticamente colori scuri coerenti, allineati ai toni già scelti a mano negli override esistenti (#111112/#1c1c1f per le superfici, rgba(255,255,255,0.08) per i bordi). */ .dark-theme { --bg-darker: #000000; --bg-dark: #1c1c1e; --bg-light-dark: #2c2c2e; --border-color: rgba(255, 255, 255, 0.08); --border-hover: rgba(255, 255, 255, 0.15); --text-white: #f5f5f7; --text-gray: #a1a1a6; --text-muted: #8e8e93; } /* ========================================================================== RESET & BASE STYLES ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; background-color: var(--bg-darker); } body { font-family: var(--font-body); background-color: var(--bg-darker); color: var(--text-gray); line-height: 1.6; overflow-x: hidden; position: relative; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-white); font-weight: 700; line-height: 1.25; } a { color: inherit; text-decoration: none; transition: var(--transition-fast); } /* ========================================================================== LAYOUT & CONTAINER ========================================================================== */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } /* Decorative Background Glows */ .bg-glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(150px); z-index: -1; opacity: 0.08; /* Softened for light background */ pointer-events: none; transition: var(--transition-smooth); } .bg-glow-1 { top: 5%; right: -100px; background: var(--accent-color); } .bg-glow-2 { top: 50%; left: -200px; background: #baa16b; } /* ========================================================================== BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); /* More clean body font */ font-weight: 500; /* Apple uses medium weight */ border-radius: 980px; /* Fully rounded pill shape */ cursor: pointer; transition: var(--transition-fast); border: 1px solid transparent; letter-spacing: -0.01em; } .btn-primary { background: var(--text-white); /* Pure Apple deep black #1d1d1f */ color: #ffffff; } .btn-primary:hover { background: #333336; /* Dark gray hover */ transform: scale(1.02); } .btn-secondary { background: rgba(0, 0, 0, 0.04); color: #0071e3; /* Apple interactive blue */ } .btn-secondary:hover { background: rgba(0, 0, 0, 0.08); transform: scale(1.02); } .btn-sm { padding: 0.45rem 1rem; font-size: 0.85rem; } .btn-lg { padding: 0.65rem 1.5rem; font-size: 0.95rem; } .btn-full { width: 100%; padding: 0.65rem 1.5rem; } /* ========================================================================== NAVBAR & DROPDOWN MENU ========================================================================== */ .navbar { position: fixed; top: 0; left: 0; width: 100%; height: var(--navbar-height); background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-color); z-index: 100; display: flex; align-items: center; transition: var(--transition-smooth); /* Layer di compositing indipendente: su Safari, il video di sfondo della home in riproduzione continua può monopolizzare il ridisegno della pagina, ritardando l'aggiornamento visivo di :hover sulla navbar finché non arriva un altro evento (es. un tasto premuto) a "sbloccarlo". Promuovendo la navbar a layer GPU separato i suoi ridisegni (incluso il menu a tendina) non restano in coda dietro il video. */ transform: translateZ(0); will-change: transform; } .navbar.scrolled { height: 70px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); } /* Home: header trasparente (senza il "rettangolino" bianco) finché si è sopra allo slideshow hero; appena si scrolla, .scrolled riporta il navbar normale bianco già esistente sopra. Logo monocromatico bianco e voci del menu più marcate per restare leggibili sopra le foto dell'hero, che non hanno più lo sfondo bianco della navbar a fare da contrasto. */ body[data-page="home"] .navbar:not(.scrolled) { height: calc(var(--navbar-height) + 28px); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } body[data-page="home"] .navbar:not(.scrolled) .logo-img { filter: brightness(0) invert(1); } body[data-page="home"] .navbar:not(.scrolled) .nav-link { color: #ffffff; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } body[data-page="home"] .navbar:not(.scrolled) .nav-link:hover, body[data-page="home"] .navbar:not(.scrolled) .nav-link.active { color: #ffffff; opacity: 0.8; } body[data-page="home"] .navbar:not(.scrolled) .nav-icon-link, body[data-page="home"] .navbar:not(.scrolled) .theme-toggle-btn, body[data-page="home"] .navbar:not(.scrolled) .lang-toggle, body[data-page="home"] .navbar:not(.scrolled) .mobile-menu-toggle { color: #ffffff; } .nav-container { display: flex; align-items: center; justify-content: space-between; width: 100%; } .logo { display: flex; align-items: center; } .logo-img { height: 38px; width: auto; display: block; transition: var(--transition-smooth); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.02)); } .navbar.scrolled .logo-img { height: 32px; } .nav-menu { display: flex; align-items: center; gap: 2rem; } .nav-link { font-size: 0.9rem; font-weight: 500; color: var(--text-gray); position: relative; padding: 0.5rem 0; display: inline-flex; align-items: center; gap: 0.25rem; } .nav-link:hover, .nav-link.active { color: var(--text-white); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--accent-color); transition: var(--transition-fast); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } /* Desktop Dropdown Menu */ .nav-dropdown { position: relative; } .dropdown-toggle { cursor: pointer; } .dropdown-chevron { width: 12px; height: 12px; transition: transform var(--transition-fast); } .nav-dropdown:hover .dropdown-chevron, .nav-dropdown.hover-intent-open .dropdown-chevron { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px; padding: 0.75rem 0; min-width: 180px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 110; will-change: opacity, transform; } .nav-dropdown:hover .dropdown-menu, .nav-dropdown.hover-intent-open .dropdown-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .dropdown-item { display: flex; align-items: center; justify-content: flex-start; padding: 0.6rem 1.5rem; font-size: 0.85rem; font-weight: 500; color: var(--text-gray); transition: var(--transition-fast); text-align: left; width: 100%; } .dropdown-item:hover { color: var(--text-white); background: rgba(0, 0, 0, 0.02); padding-left: 1.8rem; } .dropdown-item.submenu-toggle:hover { background-color: var(--accent-glow) !important; color: var(--accent-color) !important; } /* Flyout Desktop Submenu styles */ .dropdown-submenu { position: relative; width: 100%; } .submenu-chevron { width: 12px; height: 12px; margin-left: auto; transition: transform var(--transition-fast); } .dropdown-submenu:hover .submenu-chevron, .dropdown-submenu.hover-intent-open .submenu-chevron { transform: translateX(3px); } .submenu-menu { position: absolute; top: -12px; left: 100%; transform: translateX(10px); background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px; padding: 0.75rem 0; min-width: 260px; box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.08); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 120; will-change: opacity, transform; } .dropdown-submenu:hover .submenu-menu, .dropdown-submenu.hover-intent-open .submenu-menu { opacity: 1; pointer-events: auto; transform: translateX(2px); } .submenu-item { display: block; padding: 0.5rem 1.5rem; font-size: 0.8rem; font-weight: 500; color: var(--text-gray); transition: var(--transition-fast); text-align: left; } .submenu-item:hover { color: var(--text-white); background: rgba(0, 0, 0, 0.02); padding-left: 1.8rem; } .submenu-item::before, .dropdown-item::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-color); margin-right: 8px; vertical-align: middle; opacity: 0; transition: var(--transition-fast); } .submenu-item:hover::before, .dropdown-item:hover::before { opacity: 1; } .nav-actions { display: flex; align-items: center; gap: 1rem; } .mobile-menu-toggle { display: none; background: none; border: none; color: var(--text-white); cursor: pointer; } /* Mobile Drawer & Accordion Dropdown */ .mobile-drawer { position: fixed; top: 0; right: -100%; width: 300px; height: 100%; background: #ffffff; z-index: 1000; padding: 2rem; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05); transition: var(--transition-smooth); display: flex; flex-direction: column; gap: 2.5rem; overflow-y: auto; border-left: 1px solid var(--border-color); } .mobile-drawer.active { right: 0; } .drawer-header { display: flex; align-items: center; justify-content: space-between; } .mobile-menu-close { background: none; border: none; color: var(--text-white); cursor: pointer; } .drawer-menu { display: flex; flex-direction: column; gap: 1.25rem; } .drawer-link { font-size: 1.15rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; color: inherit; text-align: left; font-family: inherit; cursor: pointer; padding: 0.5rem 0; } .drawer-link:hover { color: var(--accent-color); } .drawer-dropdown { width: 100%; } .dropdown-chevron-mobile { width: 16px; height: 16px; transition: transform 0.3s ease; } .drawer-dropdown.open .dropdown-chevron-mobile { transform: rotate(180deg); } .drawer-dropdown-menu { max-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1rem; border-left: 1px solid var(--border-color); transition: max-height 0.3s cubic-bezier(0.25, 1, 0.5, 1), padding 0.3s ease; } .drawer-dropdown.open .drawer-dropdown-menu { max-height: 600px; padding-top: 0.5rem; padding-bottom: 0.5rem; } .drawer-dropdown-link { font-size: 0.95rem; color: var(--text-gray); padding: 0.4rem 0; display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; text-align: left; font-family: inherit; cursor: pointer; } .drawer-dropdown-link:hover { color: var(--accent-color); } /* Mobile nested submenu */ .drawer-submenu { width: 100%; } .submenu-toggle-mobile { color: var(--text-gray); } .submenu-chevron-mobile { width: 14px; height: 14px; transition: transform 0.3s ease; } .drawer-submenu.open .submenu-chevron-mobile { transform: rotate(180deg); } .drawer-submenu-menu { max-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.4rem; padding-left: 1rem; border-left: 1px dashed var(--border-color); transition: max-height 0.3s ease, padding 0.3s ease; } .drawer-submenu.open .drawer-submenu-menu { max-height: 400px; padding-top: 0.25rem; padding-bottom: 0.25rem; } .drawer-submenu-link { font-size: 0.85rem; color: var(--text-gray); padding: 0.3rem 0; display: block; } .drawer-submenu-link:hover { color: var(--accent-color); } /* ========================================================================== HERO SECTION ========================================================================== */ .hero { min-height: 90vh; display: flex; align-items: center; justify-content: center; padding-top: calc(var(--navbar-height) + 5rem); padding-bottom: 5rem; position: relative; text-align: center; background: #ffffff; } .hero-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem; max-width: 900px; margin: 0 auto; } .hero-content { display: flex; flex-direction: column; align-items: center; } .hero-content h1 { font-size: 5rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: var(--text-white); margin-bottom: 1rem; } .text-gradient { background: linear-gradient(135deg, var(--accent-color), #515154); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-subtitle { font-size: 1.35rem; font-weight: 400; color: var(--text-gray); letter-spacing: -0.015em; margin-bottom: 2rem; max-width: 680px; line-height: 1.4; } .hero-buttons { display: flex; gap: 1.5rem; justify-content: center; } /* Hero Visual Apple Style */ .hero-visual { width: 100%; display: flex; justify-content: center; margin-top: 1rem; } .product-showcase-apple { position: relative; width: 100%; max-width: 480px; background: #f5f5f7; border-radius: 8px; padding: 3rem; display: flex; justify-content: center; align-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02); overflow: hidden; aspect-ratio: 1.25/1; transition: var(--transition-smooth); } .product-showcase-apple:hover { transform: scale(1.02); } .hero-apple-img { max-width: 80%; max-height: 80%; object-fit: contain; filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.06)); } .light-beam-apple { position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 160px; height: 350px; background: radial-gradient(ellipse at top, rgba(var(--kelvin-color), var(--light-opacity)), transparent 60%); pointer-events: none; z-index: 2; mix-blend-mode: multiply; } /* ========================================================================== FEATURES / VALUE PROP ========================================================================== */ .features { padding: 8rem 0; background: radial-gradient(100% 50% at 50% 100%, rgba(0, 0, 0, 0.01) 0%, transparent 100%); } .section-header { max-width: 600px; margin-bottom: 4rem; } .section-header.text-center { margin-left: auto; margin-right: auto; } .section-header h2 { font-size: 2.5rem; margin-top: 0.5rem; margin-bottom: 1rem; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .feature-card { background: rgba(0, 0, 0, 0.01); border: 1px solid var(--border-color); padding: 2.5rem; border-radius: 8px; transition: var(--transition-smooth); position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 100%); opacity: 0; transition: var(--transition-smooth); } .feature-card:hover { transform: translateY(-5px); border-color: var(--accent-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 0 20px var(--accent-glow); } .feature-card:hover::before { opacity: 1; } .feature-icon-wrapper { width: 50px; height: 50px; border-radius: 6px; background: rgba(0, 0, 0, 0.03); display: flex; align-items: center; justify-content: center; color: var(--accent-color); margin-bottom: 1.5rem; position: relative; z-index: 1; } .feature-icon-wrapper i { width: 24px; height: 24px; } .feature-card h3 { font-size: 1.25rem; margin-bottom: 0.8rem; position: relative; z-index: 1; } .feature-card p { font-size: 0.95rem; position: relative; z-index: 1; } /* ========================================================================== PRODUCTS SHOWCASE & FILTERS ========================================================================== */ .products-section { padding: 8rem 0; } .section-header-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4rem; width: 100%; } .section-header-row .section-header { margin-bottom: 0; } /* Filter controls style */ .filter-controls { display: flex; gap: 0.5rem; background: rgba(0, 0, 0, 0.02); border: 1px solid var(--border-color); padding: 4px; border-radius: 9999px; height: fit-content; } .filter-btn { background: transparent; border: none; color: var(--text-gray); padding: 0.6rem 1.5rem; border-radius: 9999px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: var(--transition-smooth); font-family: var(--font-heading); } .filter-btn:hover { color: var(--text-white); } .filter-btn.active { background: var(--accent-color); color: #ffffff; box-shadow: 0 4px 15px var(--accent-glow); } /* Dynamic Product Category Banner (static, no animation, no text overlay) */ .product-banner { position: relative; width: 100%; height: 240px; border-radius: 8px; overflow: hidden; margin-bottom: 3.5rem; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); display: flex; } .banner-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; transition: var(--transition-smooth); } .product-card { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.22); border-radius: 8px; /* Softer rounded corners */ overflow: hidden; transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; opacity: 1; transform: scale(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .product-card.fade-out { opacity: 0; transform: scale(0.95); } .product-card.hidden-product { display: none; } .product-card:hover { transform: scale(1.02); /* Apple style elegant scaling */ border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.04); } .product-image-wrapper { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-dark); /* Uses #f5f5f7 */ display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .product-image-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; transition: var(--transition-smooth); } .product-card:hover .product-image-wrapper img { transform: scale(1.04); } .product-info { padding: 1.5rem 1.5rem; } .product-category { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent-color); display: block; margin-bottom: 0.5rem; } .product-info h3 { font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.015em; margin-bottom: 0.75rem; } .product-info p { font-size: 0.9rem; color: var(--text-gray); line-height: 1.5; margin-bottom: 1.5rem; } .product-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.95rem; font-weight: 500; color: #0071e3; /* Apple Interactive Blue */ text-decoration: none; transition: var(--transition-fast); } .product-link i { width: 16px; height: 16px; transition: var(--transition-fast); } .product-link:hover { text-decoration: underline; } .product-link:hover i { transform: translate(2px, -2px); } /* Empty State Message CSS */ .no-products-message { text-align: center; padding: 4rem 2rem; background: rgba(0, 0, 0, 0.01); border: 1px dashed var(--border-color); border-radius: 8px; max-width: 500px; margin: 2rem auto; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; transition: var(--transition-smooth); } .no-products-icon { width: 48px; height: 48px; color: var(--accent-color); opacity: 0.7; } .no-products-message h3 { font-size: 1.5rem; } .no-products-message p { font-size: 0.95rem; color: var(--text-muted); max-width: 400px; margin-bottom: 0.5rem; } /* ========================================================================== LIGHTING LAB (INTERACTIVE SIMULATION) ========================================================================== */ .lab-section { padding: 8rem 0; background: rgba(0, 0, 0, 0.01); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .lab-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; } .lab-control-panel { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 8px; padding: 3rem; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.02); } .lab-control-panel h3 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.5rem; } .panel-desc { margin-bottom: 2rem; font-size: 0.95rem; color: var(--text-gray); } .control-group { margin-bottom: 2.5rem; } .control-group label { display: flex; justify-content: space-between; align-items: center; color: var(--text-white); font-weight: 500; margin-bottom: 1rem; } #temp-display { color: var(--text-white); font-weight: 700; transition: var(--transition-fast); } /* Slider Custom Styling Apple Style */ .slider { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 99px; background: rgba(0, 0, 0, 0.08); /* Unified gray track */ outline: none; transition: background 0.3s; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #ffffff; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.4); /* Apple native thumb shadow */ border: 0.5px solid rgba(0, 0, 0, 0.04); transition: var(--transition-fast); } .slider::-webkit-slider-thumb:active { transform: scale(1.1); } .slider-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; } .preset-buttons { display: flex; gap: 0.75rem; margin-bottom: 2.5rem; } .btn-preset { flex: 1; padding: 0.6rem 1rem; font-size: 0.85rem; background: rgba(0, 0, 0, 0.04); border: none; color: var(--text-white); border-radius: 6px; font-weight: 500; transition: var(--transition-fast); cursor: pointer; } .btn-preset:hover { background: rgba(0, 0, 0, 0.08); } .btn-preset.active { background: var(--text-white); /* Active state matches text black */ color: #ffffff; box-shadow: none; } .lab-stats { border-top: 1px solid var(--border-color); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .stat-item { display: flex; justify-content: space-between; font-size: 0.9rem; } .stat-label { color: var(--text-muted); } .stat-value { font-weight: 500; color: var(--text-white); } .stat-value.text-accent { color: var(--accent-color); } /* Room Viewer & Virtual Room Simulation */ .lab-viewer { display: flex; justify-content: center; } .room-simulation { position: relative; width: 100%; aspect-ratio: 16/11; background: #0f111a; /* Dark box interior remains dark to see lamp glow */ border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden; box-shadow: inset 0 0 80px rgba(0,0,0,0.8); } .room-overlay { position: absolute; inset: 0; background-color: rgb(var(--kelvin-color)); opacity: calc(var(--light-opacity) * 0.45); mix-blend-mode: soft-light; z-index: 3; pointer-events: none; transition: var(--transition-smooth); } /* SVG-like/CSS Room Furniture Drawing */ .virtual-lamp { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 120px; z-index: 5; display: flex; flex-direction: column; align-items: center; } .lamp-body { width: 40px; height: 25px; background: #475569; border-radius: 4px 4px 6px 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .lamp-body::before { content: ''; display: block; width: 2px; height: 30px; background: #64748b; margin: -30px auto 0; } .lamp-glow { position: absolute; top: 25px; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 300px solid rgba(var(--kelvin-color), 0.28); transform-origin: top center; filter: blur(20px); mix-blend-mode: screen; pointer-events: none; transition: var(--transition-smooth); } /* 2.5D schematic furniture */ .room-content { position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; padding: 0 2rem; display: flex; justify-content: space-between; align-items: flex-end; z-index: 2; } .sofa { width: 150px; height: 80px; background: #1e293b; border-radius: 6px 6px 0 0; box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.5); position: relative; border: 1px solid rgba(255,255,255,0.05); } .sofa::before { content: ''; position: absolute; bottom: 0; left: -10px; width: 170px; height: 35px; background: #0f172a; border-radius: 4px; } .table { width: 120px; height: 50px; background: #27272a; border-radius: 4px; position: relative; display: flex; justify-content: center; margin-bottom: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); border-top: 2px solid #52525b; } .table::before, .table::after { content: ''; position: absolute; bottom: -40px; width: 6px; height: 40px; background: #1e1b4b; } .table::before { left: 15px; } .table::after { right: 15px; } .laptop { width: 32px; height: 4px; background: #e2e8f0; position: absolute; top: -4px; border-radius: 2px; } .laptop::after { content: ''; position: absolute; bottom: 4px; left: 2px; width: 28px; height: 18px; background: rgba(var(--kelvin-color), 0.7); border-radius: 2px; transform: perspective(40px) rotateX(15deg); box-shadow: 0 0 15px rgba(var(--kelvin-color), 0.8); transition: var(--transition-smooth); } .wall-frame { width: 70px; height: 90px; border: 3px solid #3f3f46; background: #18181b; position: absolute; bottom: 120px; right: 60px; border-radius: 4px; box-shadow: 0 10px 20px rgba(0,0,0,0.4); } .wall-frame::after { content: ''; position: absolute; inset: 4px; background: linear-gradient(135deg, #09090b, #27272a); } /* ========================================================================== TECHNOLOGY SECTION ========================================================================== */ .tech-section { padding: 8rem 0; } .tech-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; } .tech-content h2 { font-size: 2.5rem; margin-top: 0.5rem; margin-bottom: 1.5rem; } .tech-list { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; } .tech-list li { display: flex; gap: 1rem; align-items: flex-start; } .tech-list-icon { color: var(--accent-color); flex-shrink: 0; margin-top: 3px; transition: var(--transition-smooth); } .tech-list-icon i { width: 20px; height: 20px; } .tech-list strong { color: var(--text-white); display: block; margin-bottom: 0.25rem; } /* Central CPU visual */ .tech-visual { display: flex; justify-content: center; } .tech-glow-card { position: relative; width: 320px; height: 320px; background: #ffffff; border: 1px solid var(--border-color); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); } .tech-central-icon { width: 64px; height: 64px; color: var(--accent-color); z-index: 2; filter: drop-shadow(0 0 10px var(--accent-glow)); transition: var(--transition-smooth); } .protocol-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; padding: 2.5rem; z-index: 3; } .protocol-node { display: flex; align-items: center; justify-content: center; } .protocol-node:nth-child(1) { align-items: flex-start; justify-content: flex-start; } .protocol-node:nth-child(2) { align-items: flex-start; justify-content: flex-end; } .protocol-node:nth-child(3) { align-items: flex-end; justify-content: flex-start; } .protocol-node:nth-child(4) { align-items: flex-end; justify-content: flex-end; } .tech-waves { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .wave { position: absolute; border: 1px solid var(--accent-color); border-radius: 50%; opacity: 0; animation: wave-pulse 4s infinite linear; } .wave-1 { width: 100px; height: 100px; animation-delay: 0s; } .wave-2 { width: 100px; height: 100px; animation-delay: 1.3s; } .wave-3 { width: 100px; height: 100px; animation-delay: 2.6s; } @keyframes wave-pulse { 0% { width: 100px; height: 100px; opacity: 0.3; } 100% { width: 320px; height: 320px; opacity: 0; } } /* ========================================================================== CONTACT SECTION (LEAD FORM) ========================================================================== */ .contact-section { padding: 8rem 0; background: radial-gradient(100% 50% at 50% 0%, rgba(0, 0, 0, 0.01) 0%, transparent 100%); } .contact-card { display: grid; grid-template-columns: 0.9fr 1.1fr; background: #ffffff; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04); } .contact-info-panel { background: linear-gradient(135deg, #f9fafb, #ffffff); padding: 4rem; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; justify-content: center; } .contact-info-panel h2 { font-size: 2.25rem; margin-bottom: 1.5rem; } .contact-info-panel p { font-size: 1rem; margin-bottom: 3rem; } .contact-details { display: flex; flex-direction: column; gap: 1.5rem; } .contact-detail-item { display: flex; align-items: center; gap: 1rem; font-size: 0.95rem; color: var(--text-white); } .contact-detail-item i { width: 20px; height: 20px; color: var(--accent-color); transition: var(--transition-smooth); } .contact-form-panel { padding: 4rem; background: #ffffff; } .contact-form { display: flex; flex-direction: column; gap: 1.5rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-white); letter-spacing: 0.5px; } .form-group input, .form-group select, .form-group textarea { background: #ffffff; border: 1px solid var(--border-color); color: var(--text-white); padding: 0.85rem 1rem; border-radius: 6px; font-family: var(--font-body); font-size: 0.95rem; outline: none; transition: var(--transition-fast); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent-color); background: #ffffff; box-shadow: 0 0 10px var(--accent-glow); } .form-feedback { padding: 1rem; border-radius: 6px; font-size: 0.9rem; margin-top: 1rem; text-align: center; } .form-feedback.success { background: rgba(16, 185, 129, 0.05); border: 1px solid rgb(16, 185, 129); color: rgb(5, 150, 105); } .form-feedback.error { background: rgba(239, 68, 68, 0.05); border: 1px solid rgb(239, 68, 68); color: rgb(220, 38, 38); } .hidden { display: none; } /* ========================================================================== FOOTER ========================================================================== */ footer { background: #f9fafb; border-top: 1px solid var(--border-color); padding: 6rem 0 2rem; } .footer-container { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 4rem; margin-bottom: 4rem; } .footer-brand p { font-size: 0.9rem; margin-top: 1rem; max-width: 250px; } .footer-links h4 { font-size: 1rem; margin-bottom: 1.5rem; letter-spacing: 0.5px; } .footer-links ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .footer-links ul a { font-size: 0.9rem; color: var(--text-gray); } .footer-links ul a:hover { color: var(--accent-color); padding-left: 3px; } .footer-bottom { border-top: 1px solid var(--border-color); padding-top: 2rem; } .footer-bottom-container { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--text-muted); } .socials { display: flex; gap: 1rem; } .socials a { width: 36px; height: 36px; border-radius: 50%; background: #ffffff; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; color: var(--text-white); } .socials a:hover { background: var(--accent-color); color: #ffffff; box-shadow: 0 0 10px var(--accent-glow); transform: translateY(-2px); } .socials i { width: 16px; height: 16px; } /* ========================================================================== CATALOG PAGE LAYOUT & SIDEBAR STYLES ========================================================================== */ .products-page-body { background-color: var(--bg-darker); } .catalog-main-layout { padding-top: calc(var(--navbar-height) + 3rem); padding-bottom: 8rem; min-height: calc(100vh - var(--navbar-height) - 300px); } .catalog-container { display: grid; grid-template-columns: 280px 1fr; gap: 3.5rem; align-items: start; } /* Catalog Sidebar */ .catalog-sidebar { position: sticky; top: calc(var(--navbar-height) + 2rem); background: #ffffff; border: 1px solid var(--border-color); border-radius: 8px; padding: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02); } .sidebar-block h3 { font-size: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; letter-spacing: 0.5px; } .sidebar-category-group { margin-bottom: 1.5rem; } .sidebar-category-header { font-size: 1rem; color: var(--text-white); display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 0.5rem 0; font-weight: 600; user-select: none; } .sidebar-chevron { width: 16px; height: 16px; transition: transform var(--transition-fast); } .sidebar-category-list { max-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.4rem; padding-left: 0.75rem; border-left: 1px solid var(--border-color); transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .sidebar-category-list.open { max-height: 500px; margin-top: 0.5rem; margin-bottom: 0.5rem; } .sidebar-item { font-size: 0.85rem; color: var(--text-gray); padding: 0.35rem 0; display: block; transition: var(--transition-fast); } .sidebar-item:hover, .sidebar-item.active { color: var(--accent-color); padding-left: 4px; } .sidebar-root-link { font-size: 0.95rem; font-weight: 600; border-top: 1px solid var(--border-color); margin-top: 1rem; padding-top: 1rem; } /* Catalog Area & Breadcrumbs */ .catalog-content-area { width: 100%; } .catalog-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; } .breadcrumbs { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 500; color: var(--text-muted); } .breadcrumb-separator { width: 12px; height: 12px; } .text-accent { color: var(--accent-color); font-weight: 600; } /* ========================================================================== CMS PRODUCT CARDS MODAL ========================================================================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(8, 9, 12, 0.4); /* Lighter shadow overlay for light theme */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.3s ease; } .modal-overlay.hidden { opacity: 0; pointer-events: none; display: flex !important; /* Keep display flex but hide visually so transition works */ } .modal-card { background: #ffffff; border: 1px solid var(--border-color); border-radius: 10px; width: 100%; max-width: 640px; padding: 3rem; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1), 0 0 30px var(--accent-glow); position: relative; transform: translateY(0); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .modal-overlay.hidden .modal-card { transform: translateY(30px); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .modal-header h2 { font-size: 1.75rem; } .modal-close-btn { background: none; border: none; color: var(--text-gray); cursor: pointer; transition: var(--transition-fast); } .modal-close-btn:hover { color: var(--text-white); transform: scale(1.1); } .modal-form { gap: 1.25rem !important; /* tighten form gaps for layout spacing */ } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .form-helper { font-size: 0.75rem; color: var(--text-muted); margin-top: -0.25rem; } .modal-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem; } /* ========================================================================== RESPONSIVE DESIGN (MEDIA QUERIES) ========================================================================== */ @media (max-width: 1024px) { .hero-content h1 { font-size: 3rem; } .hero-container { gap: 2rem; } .features-grid, .products-grid { grid-template-columns: repeat(2, 1fr); } .lab-grid { grid-template-columns: 1fr; gap: 3rem; } .tech-grid { grid-template-columns: 1fr; gap: 3rem; } .tech-visual { order: -1; } .contact-card { grid-template-columns: 1fr; } .contact-info-panel { border-right: none; border-bottom: 1px solid var(--border-color); padding: 3rem; } .contact-form-panel { padding: 3rem; } /* Catalog Responsive */ .catalog-container { grid-template-columns: 1fr; gap: 3rem; } .catalog-sidebar { position: static; width: 100%; } } @media (max-width: 768px) { .navbar { height: 70px; } .nav-menu { display: none; } .mobile-menu-toggle { display: block; } .hero { padding-top: calc(var(--navbar-height) + 1rem); } .hero-container { grid-template-columns: 1fr; gap: 3rem; text-align: center; } .badge { margin-left: auto; margin-right: auto; } .hero-subtitle { margin-left: auto; margin-right: auto; } .hero-buttons { justify-content: center; } .features-grid, .products-grid { grid-template-columns: 1fr; } .section-header-row { flex-direction: column; align-items: flex-start; gap: 1.5rem; } .footer-container { grid-template-columns: 1fr; gap: 2.5rem; } .footer-bottom-container { flex-direction: column; gap: 1rem; text-align: center; } } @media (max-width: 640px) { .form-row-2 { grid-template-columns: 1fr; } .modal-card { padding: 2rem; border-radius: 8px; margin: 1rem; } .modal-header h2 { font-size: 1.35rem; } } /* ========================================================================== PRODUCT DETAIL PAGE STYLES ========================================================================== */ .detail-breadcrumbs { margin-top: 3.5rem; margin-bottom: 2rem; } .product-detail-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; margin-bottom: 6rem; } .product-detail-media { display: flex; flex-direction: column; gap: 2rem; } .product-main-image-box { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 8px; padding: 1.2rem !important; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 4/3; transition: var(--transition-smooth); } .product-main-image-box img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; } .product-gallery-container { background: #ffffff; border: 1px solid var(--border-color); border-radius: 8px; padding: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01); } .product-gallery-container h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1.25rem; } .product-gallery-grid { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .gallery-thumb { width: 80px; height: 80px; border-radius: 6px; border: 2px solid transparent; overflow: hidden; cursor: pointer; background: #f5f5f7; transition: var(--transition-fast); } .gallery-thumb:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.03); } .gallery-thumb.active { border-color: var(--text-white); /* Pure black active border */ box-shadow: none; } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } .add-gallery-form { display: flex; gap: 0.75rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem; } .add-gallery-form input { flex-grow: 1; background: rgba(0, 0, 0, 0.01); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.6rem 1rem; font-size: 0.85rem; outline: none; transition: var(--transition-fast); } .add-gallery-form input:focus { border-color: var(--accent-color); background: #ffffff; } /* Right Column Detail Info */ .product-detail-info { display: flex; flex-direction: column; } .detail-header-tags { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .product-detail-info h1 { font-size: 3rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.1; } .detail-description { font-size: 1.05rem; color: var(--text-gray); line-height: 1.6; margin-bottom: 2.5rem; } .product-info-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 1rem; margin-bottom: 3rem; } @media (max-width: 992px) { .product-info-columns { grid-template-columns: 1fr; gap: 2rem; } } .product-specs-section { margin-bottom: 3rem; } .product-specs-section h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.25rem; } .specs-table { width: 100%; border-collapse: collapse; } .specs-table tr { border-bottom: 1px solid var(--border-color); } .specs-table tr:last-child { border-bottom: none; } .specs-table td { padding: 1rem 0; font-size: 0.95rem; } .spec-label { font-weight: 600; color: #0f111a; width: 40%; } .product-advantages-section { margin-bottom: 3rem; } .product-advantages-section h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.25rem; } .advantages-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem 2rem; } .advantages-list li { position: relative; padding-left: 1.5rem; font-size: 0.95rem; color: var(--text-gray); line-height: 1.5; } .advantages-list li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); } .spec-value { color: var(--text-gray); } .detail-actions { display: flex; gap: 1rem; margin-top: auto; } /* Specs Editor inside CMS Modal */ .specs-editor-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; max-height: 250px; overflow-y: auto; padding-right: 0.5rem; } .spec-editor-row { display: flex; gap: 0.75rem; align-items: center; } .spec-editor-row input { flex: 1; background: rgba(0, 0, 0, 0.01); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.6rem 1rem; font-size: 0.85rem; outline: none; } .spec-editor-row input:focus { border-color: var(--accent-color); background: #ffffff; } .delete-spec-line-btn { flex-shrink: 0; width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; color: #ef4444 !important; border-color: rgba(239, 68, 68, 0.2) !important; } .delete-spec-line-btn:hover { background: rgba(239, 68, 68, 0.05) !important; } .add-spec-row { display: flex; gap: 0.75rem; border-top: 1px dashed var(--border-color); padding-top: 1.25rem; } .add-spec-row input { flex: 1; background: rgba(0, 0, 0, 0.01); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.6rem 1rem; font-size: 0.85rem; outline: none; } .add-spec-row input:focus { border-color: var(--accent-color); background: #ffffff; } .no-specs-text { font-size: 0.85rem; color: var(--text-muted); font-style: italic; text-align: center; padding: 1rem 0; } /* Responsiveness for Detail Page */ @media (max-width: 992px) { .product-detail-grid { grid-template-columns: 1fr; gap: 3rem; } } /* ========================================================================== LOGIN PAGE STYLES (APPLE ID STYLE) ========================================================================== */ .login-page { background-color: #f5f5f7; min-height: 100vh; display: flex; flex-direction: column; } .login-main { flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 6rem 1.5rem; } .login-wrapper { width: 100%; max-width: 440px; display: flex; justify-content: center; } .login-card { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 8px; padding: 3.5rem 2.5rem; width: 100%; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.02); text-align: center; transition: var(--transition-smooth); } .login-header { margin-bottom: 2.5rem; } .login-logo-container { width: 56px; height: 56px; border-radius: 50%; background: #f5f5f7; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; border: 1px solid rgba(0, 0, 0, 0.04); } .login-avatar-icon { width: 22px; height: 22px; color: #1d1d1f; } .login-header h2 { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-white); margin-bottom: 0.5rem; } .login-header p { font-size: 0.95rem; color: var(--text-gray); line-height: 1.4; } .auth-form { display: flex; flex-direction: column; gap: 1.25rem; } .input-wrapper { position: relative; width: 100%; } .input-wrapper input { width: 100%; padding: 0.85rem 1rem 0.85rem 2.75rem; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; font-size: 0.95rem; background: #ffffff; outline: none; transition: var(--transition-fast); color: var(--text-white); font-family: var(--font-body); } .input-wrapper input:focus { border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1); } .input-wrapper .input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); } .btn-arrow { width: 16px; height: 16px; transition: var(--transition-fast); } .btn-primary:hover .btn-arrow { transform: translateX(3px); } .login-footer { margin-top: 2rem; font-size: 0.9rem; color: var(--text-muted); } .text-link { color: #0071e3; text-decoration: none; font-weight: 500; transition: var(--transition-fast); } .text-link:hover { text-decoration: underline; } /* Alert Boxes */ .alert-box { padding: 0.85rem 1.25rem; border-radius: 6px; font-size: 0.9rem; margin-bottom: 1.5rem; text-align: left; line-height: 1.4; } .alert-error { background: #fff2f2; color: #df2020; border: 1px solid #ffd1d1; } .alert-success { background: #f2fff2; color: #1ea01e; border: 1px solid #d1ffd1; } /* Dynamic Auth Tooltip Bubble (Apple Style Onboarding) */ .nav-auth-link { position: relative; } .auth-tooltip { position: absolute; top: calc(100% + 15px); right: 50%; transform: translateX(50%); background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; padding: 1.25rem 1.25rem 1rem 1.25rem; width: 260px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1); z-index: 999; text-align: left; cursor: default; animation: tooltip-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .auth-tooltip::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 8px; border-style: solid; border-color: transparent transparent #ffffff transparent; } .auth-tooltip-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .auth-tooltip-title { font-size: 0.9rem; font-weight: 600; color: var(--text-white); } .auth-tooltip-close { border: none; background: transparent; cursor: pointer; color: var(--text-muted); display: inline-flex; padding: 2px; border-radius: 50%; transition: var(--transition-fast); } .auth-tooltip-close:hover { background: rgba(0, 0, 0, 0.04); color: var(--text-white); } .auth-tooltip-text { font-size: 0.825rem; color: var(--text-gray); line-height: 1.35; margin-bottom: 0.75rem; } .auth-tooltip-action { display: inline-flex; font-size: 0.825rem; font-weight: 500; color: #0071e3; text-decoration: none; transition: var(--transition-fast); cursor: pointer; } .auth-tooltip-action:hover { text-decoration: underline; } @keyframes tooltip-fade-in { from { opacity: 0; transform: translate(50%, 10px); } to { opacity: 1; transform: translate(50%, 0); } } /* Flagship Scroll Reveal Banner (Apple Style Stacked) */ .flagship-section { padding: 6rem 0; background: #ffffff; overflow: hidden; } .flagship-fullscreen-media { position: relative; width: 100%; height: 540px; /* Large fullscreen widescreen aspect */ background: #f5f5f7; border-radius: 10px; display: flex; justify-content: center; align-items: center; box-shadow: 0 10px 45px rgba(0, 0, 0, 0.015); overflow: hidden; margin-bottom: 4rem; /* Generous gap before text */ opacity: 0; transform: scale(0.96) translateY(20px); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s ease; } .flagship-reveal-img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; transition: transform 10s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease; z-index: 3; } /* Dynamic Light Beam on Flagship */ .flagship-light-beam { position: absolute; bottom: -15%; left: 50%; transform: translateX(-50%); width: 80%; height: 140px; background: radial-gradient(ellipse at bottom, rgba(var(--kelvin-color), var(--light-opacity)), transparent 70%); pointer-events: none; z-index: 2; mix-blend-mode: multiply; transition: var(--transition-smooth); } /* Centered content immediately below */ .flagship-fullscreen-content { max-width: 800px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } /* Staggered text reveals */ .flagship-reveal-badge, .flagship-reveal-title, .flagship-reveal-desc, .flagship-color-selector, .flagship-reveal-specs, .flagship-reveal-btn { opacity: 0; transform: translateY(25px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .flagship-reveal-badge { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent-color); margin-bottom: 0.75rem; display: block; } .flagship-reveal-title { font-size: 3.5rem; font-weight: 700; letter-spacing: -0.025em; color: var(--text-white); margin-bottom: 1.5rem; line-height: 1.1; } .flagship-reveal-desc { font-size: 1.15rem; color: var(--text-gray); line-height: 1.6; margin-bottom: 2.5rem; max-width: 700px; } /* Color Selector Centered */ .flagship-color-selector { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 2rem; } .color-selector-label { font-size: 0.85rem; font-weight: 500; color: var(--text-gray); } .color-selector-label strong { color: var(--text-white); } .color-swatches { display: flex; gap: 0.75rem; } .color-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #ffffff; outline: 1px solid rgba(0, 0, 0, 0.15); cursor: pointer; transition: var(--transition-fast); padding: 0; } .color-swatch:hover { outline-color: rgba(0, 0, 0, 0.4); } .color-swatch.active { outline: 2px solid var(--text-white); } .swatch-black { background-color: #242426; } .swatch-gold { background-color: #d1b884; } .swatch-bronze { background-color: #8c7355; } /* Specs Grid - 4 Columns */ .flagship-reveal-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.06); border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding: 2.25rem 0; margin-bottom: 2.5rem; } .flagship-spec-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .flagship-spec-item .spec-label { font-size: 0.725rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .flagship-spec-item .spec-val { font-size: 0.95rem; font-weight: 600; color: var(--text-white); white-space: nowrap; } /* Staggered Delays on reveal */ .flagship-section.revealed .flagship-fullscreen-media { opacity: 1; transform: scale(1) translateY(0); } .flagship-section.revealed .flagship-reveal-badge { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } .flagship-section.revealed .flagship-reveal-title { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } .flagship-section.revealed .flagship-reveal-desc { opacity: 1; transform: translateY(0); transition-delay: 0.3s; } .flagship-section.revealed .flagship-color-selector { opacity: 1; transform: translateY(0); transition-delay: 0.4s; } .flagship-section.revealed .flagship-reveal-specs { opacity: 1; transform: translateY(0); transition-delay: 0.5s; } .flagship-section.revealed .flagship-reveal-btn { opacity: 1; transform: translateY(0); transition-delay: 0.6s; } /* Very subtle hover zoom for image */ .flagship-section.revealed:hover .flagship-reveal-img { transform: scale(1.02); } /* Adaptive mobile layout */ @media (max-width: 992px) { .flagship-fullscreen-media { height: 380px; margin-bottom: 2.5rem; } .flagship-reveal-title { font-size: 2.5rem; } .flagship-reveal-specs { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 1.5rem 0; } } /* Catalog Families & Items Grid Styles */ .families-section { margin-bottom: 4rem; padding: 2rem; background: linear-gradient(180deg, rgba(186, 161, 107, 0.1), rgba(186, 161, 107, 0.02)); border: 1px solid var(--accent-glow); border-radius: 12px; } .section-subtitle-apple { font-size: 1.6rem; font-weight: 700; color: var(--text-white); margin-bottom: 2rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); letter-spacing: -0.015em; width: 100%; } .families-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .voltage-selector-section { margin-bottom: 3rem; } .voltage-selector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .voltage-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 3rem 1.5rem; border: 1px solid rgba(0, 0, 0, 0.22); background: #ffffff; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); text-decoration: none; transition: transform 0.25s ease, border-color 0.25s ease; } .voltage-tile:hover { border-color: #0071e3; transform: translateY(-5px) scale(1.01); } .voltage-tile-label { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: var(--text-color); text-transform: uppercase; letter-spacing: 0.03em; } @media (max-width: 768px) { .voltage-selector-grid { grid-template-columns: 1fr; } } .family-card { border: 1px solid rgba(186, 161, 107, 0.4) !important; background: linear-gradient(160deg, #fbf7ee, #f3ecdb) !important; /* Tenue oro/crema: distingue le card famiglia da quelle dei singoli articoli (bianche) */ box-shadow: 0 10px 30px rgba(186, 161, 107, 0.12) !important; } .family-card .product-image-wrapper { background: transparent; /* Lascia trasparire lo sfondo oro/crema della card invece del grigio neutro */ } .family-card:hover { border-color: var(--accent-color) !important; transform: translateY(-5px) scale(1.01); } .family-badge-highlight { position: absolute; top: 1.25rem; left: 1.25rem; background: rgba(29, 29, 31, 0.85); color: #ffffff; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; padding: 0.35rem 0.75rem; border-radius: 980px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 5; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.1); } .badge-icon-mini { width: 12px; height: 12px; } .catalog-divider { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.08); margin: 4rem 0; } .filter-family-btn.active { background-color: #1d1d1f !important; color: #ffffff !important; border-color: #1d1d1f !important; } /* Adaptive mobile catalog */ @media (max-width: 992px) { .families-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .families-grid { grid-template-columns: 1fr; } .catalog-divider { margin: 2.5rem 0; } } /* ========================================================================== 14. PANNELLO DI AMMINISTRAZIONE (ADMIN DASHBOARD) ========================================================================== */ .admin-main { padding-top: 120px; padding-bottom: 80px; min-height: 80vh; } .admin-dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; gap: 1.5rem; } .admin-dashboard-header h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 0.25rem; margin-bottom: 0.5rem; color: var(--text-white); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; } .stats-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: 1.5rem; display: flex; align-items: center; gap: 1.25rem; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); transition: transform 0.3s var(--ease-apple), box-shadow 0.3s var(--ease-apple); } .stats-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .stats-icon-wrapper { width: 52px; height: 52px; border-radius: 6px; display: flex; align-items: center; justify-content: center; } .stats-icon-wrapper i { width: 24px; height: 24px; } .stats-icon-wrapper.blue { background: rgba(0, 102, 204, 0.1); color: #0066cc; } .stats-icon-wrapper.green { background: rgba(52, 199, 89, 0.1); color: #34c759; } .stats-icon-wrapper.orange { background: rgba(255, 149, 0, 0.1); color: #ff9500; } .stats-info h3 { font-size: 1.75rem; font-weight: 700; margin: 0; color: var(--text-white); } .stats-info p { color: var(--text-muted); font-size: 0.875rem; margin: 0; } .admin-table-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 2rem; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); margin-bottom: 2rem; } .table-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1.5rem; } .table-card-header h2 { font-size: 1.5rem; font-weight: 600; margin: 0; color: var(--text-white); } .search-filter-wrapper { display: flex; gap: 1rem; width: 100%; max-width: 400px; } .search-wrapper { width: 100%; } .admin-table { width: 100%; border-collapse: collapse; text-align: left; } .admin-table th { padding: 1.25rem 1rem; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border-color); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; } .admin-table td { padding: 1.25rem 1rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; color: var(--text-white); } .admin-table tr:last-child td { border-bottom: none; } .table-thumbnail-wrapper { width: 50px; height: 50px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); background: #ffffff; display: flex; align-items: center; justify-content: center; } .table-thumbnail { max-width: 100%; max-height: 100%; object-fit: contain; } .table-p-name { font-weight: 600; font-size: 1.05rem; color: var(--text-white); } .table-p-id { font-size: 0.75rem; background: rgba(0,0,0,0.05); padding: 0.2rem 0.4rem; border-radius: 4px; font-family: monospace; color: var(--text-muted); } .table-p-sub { font-size: 0.8rem; color: var(--text-muted); } .table-desc { font-size: 0.9rem; max-width: 320px; color: var(--text-muted); } .table-actions { display: flex; gap: 0.5rem; } .btn-danger { background: #ff3b30; color: #ffffff; } .btn-danger:hover { background: #e02e24; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 59, 48, 0.2); } .badge-family { background: rgba(0, 102, 204, 0.08); color: #0066cc; border: 1px solid rgba(0, 102, 204, 0.15); } .badge-variant { background: rgba(142, 142, 147, 0.08); color: #8e8e93; border: 1px solid rgba(142, 142, 147, 0.15); } .table-loader, .table-empty { text-align: center; padding: 3rem !important; color: var(--text-muted); font-size: 1.1rem; } .spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top-color: var(--text-accent); animation: spin 1s ease-in-out infinite; margin-right: 0.5rem; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* Modali Amministrazione */ .modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 2rem; opacity: 1; transition: opacity 0.3s ease; } .modal-backdrop.hidden { display: none; opacity: 0; pointer-events: none; } .modal-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; width: 100%; max-width: 650px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalSlide 0.4s var(--ease-apple); } @keyframes modalSlide { from { transform: scale(0.95) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .modal-header { padding: 1.5rem 2rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .modal-header h3 { margin: 0; font-size: 1.35rem; font-weight: 600; color: var(--text-white); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.03); transition: background 0.2s; } .modal-close:hover { background: rgba(0,0,0,0.08); color: var(--text-color); } .modal-body { padding: 2rem; } .admin-form { display: flex; flex-direction: column; gap: 1.25rem; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 580px) { .form-grid-2 { grid-template-columns: 1fr; gap: 1.25rem; } .admin-dashboard-header { flex-direction: column; align-items: flex-start; } } .admin-form label { font-size: 0.85rem; font-weight: 600; color: var(--text-white); } .admin-form input, .admin-form select, .admin-form textarea { width: 100%; padding: 0.75rem 1rem; border-radius: 10px; border: 1px solid var(--border-color); background: rgba(0,0,0,0.02); color: var(--text-color); font-family: inherit; font-size: 0.95rem; transition: border-color 0.2s, box-shadow 0.2s; } .admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { border-color: var(--text-accent); box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15); background: var(--bg-color); outline: none; } .specs-builder-section { border: 1px dashed var(--border-color); border-radius: 6px; padding: 1.25rem; margin-top: 0.5rem; } .specs-builder-section h4 { margin-top: 0; margin-bottom: 1rem; font-size: 0.95rem; font-weight: 600; color: var(--text-white); } .specs-list { display: flex; flex-direction: column; gap: 0.75rem; } .spec-row { display: flex; gap: 0.75rem; align-items: center; } .spec-row input { padding: 0.5rem 0.75rem; } .spec-remove-btn { background: none; border: none; color: #ff3b30; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; opacity: 0.8; transition: opacity 0.2s; } .spec-remove-btn:hover { opacity: 1; } .modal-footer { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); } .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Product Hover Overlay (Glassmorphic) */ .product-image-wrapper { position: relative; overflow: hidden; } .product-hover-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; justify-content: center; padding: 1.5rem; color: var(--text-white); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 5; pointer-events: none; } .product-image-wrapper:hover .product-hover-overlay { transform: translateY(0); } .overlay-specs-title { font-family: var(--font-headings); font-size: 0.85rem; font-weight: 600; margin-bottom: 0.6rem; color: var(--accent-color); border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.05em; } .overlay-specs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; } .overlay-specs-list li { font-size: 0.75rem; color: rgba(255, 255, 255, 0.85); line-height: 1.35; text-align: left; } .overlay-specs-list li strong { color: var(--text-white); font-weight: 500; } /* ========================================================================== HOMEPAGE FULLSCREEN SLIDESHOW (VIABIZZUNO STYLE) ========================================================================== */ .homepage-theme .navbar { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; position: absolute; width: 100%; z-index: 1000; transition: background 0.4s ease, border-bottom 0.4s ease, backdrop-filter 0.4s ease; } .homepage-theme .navbar.scrolled { background: rgba(0, 0, 0, 0.8) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .homepage-theme .nav-link { color: rgba(255, 255, 255, 0.8) !important; font-weight: 500; } .homepage-theme .nav-link:hover, .homepage-theme .nav-link.active { color: var(--text-white) !important; } .homepage-theme .logo-img { filter: brightness(0) invert(1); } .homepage-theme .mobile-menu-toggle { color: var(--text-white) !important; } /* Fullscreen Slideshow */ .hero-slideshow { position: relative; width: 100%; height: 100vh; overflow: hidden; background: #000; } .slides-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; visibility: hidden; transform: scale(1.05); transition: transform 6s ease-out; } .hero-slide.active { opacity: 1; visibility: visible; transform: scale(1); } /* Slide video (es. slide 1 "Naboo"): object-fit sostituisce background-size/position, che non si applicano a un tag