/* ========================================================================== RentEMZ — "Isola Aperta" · Redesign 2026 Mediterranean editorial · mobile-first · sunlight-proof contrast Themes via [data-theme="light|dark"] on — same variable API as v1. ========================================================================== */ /* Smooth cross-page fade transition (supported browsers; ignored elsewhere) */ @view-transition { navigation: auto; } /* -------------------------------------------------------------------------- 1. DESIGN TOKENS -------------------------------------------------------------------------- */ :root { --font-display: 'Montserrat', 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Brand green — kept in the EMZ family, tuned darker for sunlight AA */ --primary: #059669; --primary-hover: #047857; --primary-deep: #065f46; --primary-light: #e6f5ee; --primary-ring: rgba(5, 150, 105, 0.25); /* Mediterranean accent — terracotta replaces mustard gold */ --accent: #c2542f; --accent-hover: #a8431f; --accent-light: #faeee6; /* Brand gold — primary action color (matches the lightning logo) */ --gold: #e8b73a; --gold-hover: #f2c757; --gold-ink: #182430; /* Sea + sand support tones */ --cyan-primary: #0e7fa8; --cyan-light: #e8f5fa; --sand: #f3ead9; --sand-deep: #e7dcc4; /* Surfaces & ink (warm sand-white / sea-ink) */ --bg-color: #faf7f1; --card-bg: #ffffff; --text-main: #182430; --text-muted: #52616d; --border-color: #e9e2d4; --card-border: #e9e2d4; /* Elevation — soft, warm-tinted */ --shadow-sm: 0 1px 2px rgba(48, 39, 28, 0.05), 0 2px 10px rgba(48, 39, 28, 0.06); --shadow-md: 0 6px 16px rgba(48, 39, 28, 0.07), 0 16px 40px rgba(48, 39, 28, 0.10); --shadow-lg: 0 12px 32px rgba(48, 39, 28, 0.10), 0 32px 72px rgba(48, 39, 28, 0.14); --radius-sm: 12px; --radius-md: 18px; --radius-lg: 28px; --radius-full: 9999px; --transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: all 0.15s ease; --header-h: 96px; /* top bar + header (desktop) */ --header-h-mobile: 64px; --cta-h: 52px; /* min touch height for primary actions */ } [data-theme="dark"] { /* Night-harbor palette */ --primary: #10b981; --primary-hover: #34d399; --primary-deep: #6ee7b7; --primary-light: rgba(16, 185, 129, 0.10); --primary-ring: rgba(52, 211, 153, 0.30); --accent: #ef9868; --accent-hover: #f4b189; --accent-light: rgba(239, 152, 104, 0.10); --cyan-primary: #4cc3e8; --cyan-light: rgba(76, 195, 232, 0.10); --sand: rgba(243, 234, 217, 0.06); --sand-deep: rgba(243, 234, 217, 0.12); --bg-color: #0b1220; --card-bg: #131c2c; --text-main: #f2f6f9; --text-muted: #9fb0be; --border-color: #24334a; --card-border: #24334a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.38), 0 16px 40px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45), 0 32px 72px rgba(0, 0, 0, 0.55); } /* -------------------------------------------------------------------------- 2. RESET & GLOBAL -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { background-image: linear-gradient(rgba(250, 247, 241, 0.95), rgba(250, 247, 241, 0.95)), url('assets/procida_landscape.png'); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--bg-color); color: var(--text-main); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-image 0.3s ease, background-color 0.3s ease, color 0.3s ease; padding-top: var(--header-h); /* clearance for fixed desktop header */ padding-bottom: 72px; /* clearance for floating mobile CTA */ } [data-theme="dark"] body { background-image: linear-gradient(rgba(11, 18, 32, 0.95), rgba(11, 18, 32, 0.95)), url('assets/procida_landscape.png'); } ::selection { background: var(--primary); color: #ffffff; } a { color: inherit; text-decoration: none; transition: var(--transition-fast); } button, select, input, textarea { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; outline: none; } /* Visible focus for keyboard users — never for mouse clicks */ :focus-visible { outline: 3px solid var(--primary-ring); outline-offset: 2px; border-radius: 6px; } img { max-width: 100%; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Utility helpers (JS-load-bearing: .hidden) */ .text-center { text-align: center; } .w-full { width: 100%; } .hidden { display: none !important; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .text-green { color: var(--primary) !important; } .font-bold { font-weight: 700; } .text-accent { color: var(--accent); } /* Section eyebrow badge */ .badge-accent { display: inline-block; background-color: var(--sand); color: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 16px; border-radius: var(--radius-full); margin-bottom: 18px; } [data-theme="dark"] .badge-accent { background-color: var(--sand-deep); } /* -------------------------------------------------------------------------- 3. BUTTONS -------------------------------------------------------------------------- */ .primary-btn { background-color: var(--gold); color: var(--gold-ink) !important; font-family: var(--font-display); font-weight: 900; font-size: 0.95rem; letter-spacing: 0.03em; min-height: var(--cta-h); padding: 14px 30px; border-radius: 99px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 22px rgba(232, 183, 58, 0.35); transition: var(--transition); } .primary-btn:hover { background-color: var(--gold-hover); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(232, 183, 58, 0.45); } .primary-btn:active { transform: translateY(0) scale(0.98); box-shadow: 0 3px 10px rgba(232, 183, 58, 0.3); } [data-theme="dark"] .primary-btn { color: var(--gold-ink) !important; box-shadow: 0 8px 22px rgba(232, 183, 58, 0.28); } .icon-btn { background-color: var(--card-bg); border: 1px solid var(--border-color); width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition); } .icon-btn:hover { background-color: var(--primary-light); border-color: var(--primary); color: var(--primary); } .icon-btn:active { transform: scale(0.94); } .icon { width: 20px; height: 20px; } .icon-small { width: 16px; height: 16px; } button:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(70%); transform: none !important; } /* -------------------------------------------------------------------------- 4. TOP CONTACT BAR + STICKY HEADER -------------------------------------------------------------------------- */ .top-contact-bar { background-color: #0e1826; color: #a9bccb; font-size: 0.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 8px 0; } .contact-container { max-width: 1300px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; } .contact-left, .contact-right { display: flex; align-items: center; gap: 22px; } .contact-link { font-weight: 500; } .contact-link:hover { color: #6ee7b7; } .contact-social-icon { font-weight: 600; } .contact-social-icon:hover { color: #f4b189; } @media (max-width: 768px) { .top-contact-bar { display: none; } } .main-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: rgba(250, 247, 241, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-sm); } [data-theme="dark"] .main-header { background-color: rgba(11, 18, 32, 0.85); } .header-container { max-width: 1300px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .logo-area { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .brand-logo-img { height: 40px; width: auto; display: block; transition: var(--transition); background: #ffffff; border-radius: 10px; padding: 5px 11px; box-sizing: content-box; /* White pill: logo has dark text — readable on both themes */ } @media (max-width: 480px) { .brand-logo-img { height: 28px; } } .logo-svg { width: 28px; height: 28px; color: var(--primary); } .logo-text { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; color: var(--text-main); letter-spacing: -0.02em; } .logo-text span { color: var(--accent); } .desktop-nav { display: flex; align-items: center; gap: 26px; } .desktop-nav a { font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; color: var(--text-muted); position: relative; padding: 4px 0; } .desktop-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; border-radius: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease; } .desktop-nav a:hover { color: var(--text-main); } .desktop-nav a:hover::after { transform: scaleX(1); } .header-actions { display: flex; align-items: center; gap: 14px; } .header-cta-btn { padding: 10px 22px; min-height: 44px; font-size: 0.82rem; border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(5, 150, 105, 0.20); } /* Floating mobile CTA — always thumb-reachable */ .mobile-floating-cta { position: fixed; bottom: 0; left: 0; width: 100%; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg-color) 72%, rgba(255, 255, 255, 0)); z-index: 1000; display: none; } .floating-cta-inner { width: 100%; background-color: var(--gold); color: var(--gold-ink); font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; min-height: var(--cta-h); padding: 15px; border-radius: 16px; cursor: pointer; box-shadow: 0 8px 24px rgba(5, 150, 105, 0.35); text-align: center; transition: var(--transition); } .floating-cta-inner:active { transform: scale(0.98); } @keyframes floatingPulse { 0% { transform: scale(1); box-shadow: 0 8px 20px rgba(5, 150, 105, 0.28); } 100% { transform: scale(1.015); box-shadow: 0 10px 28px rgba(5, 150, 105, 0.4); } } /* -------------------------------------------------------------------------- 5. LANGUAGE SWITCHER + THEME TOGGLE -------------------------------------------------------------------------- */ .lang-switcher { position: relative; display: inline-block; margin-right: 4px; } .lang-btn { display: flex; align-items: center; gap: 6px; background-color: var(--card-bg); border: 1px solid var(--border-color); padding: 9px 14px; min-height: 44px; border-radius: var(--radius-full); font-weight: 700; color: var(--text-main); font-size: 0.85rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition); } .lang-btn:hover { border-color: var(--primary); background-color: var(--primary-light); } .dropdown-chevron { color: var(--text-muted); transition: transform 0.2s; } .lang-switcher.active .dropdown-chevron { transform: rotate(180deg); } .lang-dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: none; flex-direction: column; min-width: 150px; z-index: 1000; overflow: hidden; } .lang-switcher.active .lang-dropdown-menu { display: flex; } .lang-dropdown-item { background: none; border: none; padding: 12px 16px; text-align: left; font-size: 0.88rem; font-weight: 600; color: var(--text-main); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: var(--transition-fast); width: 100%; } .lang-dropdown-item:hover { background-color: var(--primary-light); color: var(--primary); } /* -------------------------------------------------------------------------- 6. FULL-SCREEN HERO + WELCOME PANEL -------------------------------------------------------------------------- */ .hero-fullscreen { position: relative; height: 100vh; height: 100svh; /* stable on mobile browser chrome */ min-height: 600px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-top: calc(-1 * var(--header-h)); /* photo runs under fixed header */ } /* Legacy banner wrapper — kept for img styles */ .moped-hero-banner { margin-top: 0; position: relative; z-index: 1; height: 45vh; min-height: 300px; max-height: 500px; overflow: hidden; background-color: var(--bg-color); } .moped-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; opacity: 0; /* prevents CLS while loading */ animation: heroReveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes heroReveal { from { transform: scale(1.06); opacity: 0; } to { transform: scale(1); opacity: 1; } } .moped-hero-overlay { display: none; } .hero-fullscreen-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11, 18, 32, 0.18) 0%, rgba(11, 18, 32, 0.10) 40%, rgba(11, 18, 32, 0.72) 100%); pointer-events: none; z-index: 2; } .hero-fullscreen-panel { position: relative; z-index: 3; width: 100%; max-width: 470px; padding: 0 20px; margin-top: -12vh; } /* Welcome card panel — the two entry doors + main CTA */ .welcome-screen-section { padding-top: 0; padding-bottom: 30px; background-color: #0b1220; border-bottom: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; position: relative; z-index: 2; } .welcome-card-panel { background-color: rgba(14, 22, 36, 0.62); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; max-width: 480px; margin: 0 auto; transition: background-color 0.3s ease; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .welcome-card-panel:hover { background-color: rgba(14, 22, 36, 0.82); } .lang-selector-panel { display: flex; justify-content: center; gap: 12px; margin-bottom: 8px; } .lang-toggle-btn { background-color: rgba(255, 255, 255, 0.07); border: 1.5px solid transparent; border-radius: var(--radius-full); padding: 8px 24px; font-family: var(--font-display); font-weight: 700; color: #a9bccb; cursor: pointer; transition: var(--transition); font-size: 0.85rem; display: flex; align-items: center; gap: 6px; } .lang-toggle-btn.active { background-color: var(--primary); color: #ffffff; border-color: var(--primary); box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4); } .lang-toggle-btn:not(.active):hover { background-color: rgba(255, 255, 255, 0.14); color: #ffffff; } .welcome-category-card { display: flex; align-items: center; gap: 18px; padding: 20px 22px; background-color: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.08); border-radius: 20px; transition: var(--transition); cursor: pointer; } .welcome-category-card:hover { transform: translateY(-3px); border-color: var(--gold); background-color: rgba(232, 183, 58, 0.08); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); } .welcome-card-icon-wrap { width: 56px; height: 56px; border-radius: 50%; background-color: rgba(232, 183, 58, 0.13); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition); } .welcome-category-card:hover .welcome-card-icon-wrap { background-color: var(--gold); } .welcome-card-icon { width: 28px; height: 28px; stroke: var(--gold); transition: var(--transition); } .welcome-category-card:hover .welcome-card-icon { stroke: var(--gold-ink); } .welcome-card-info { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .welcome-card-info h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 800; color: #ffffff; margin-bottom: 4px; line-height: 1.25; } .welcome-card-info p { font-size: 0.8rem; color: #a9bccb; margin-bottom: 8px; line-height: 1.4; } .cat-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full); margin-bottom: 8px; letter-spacing: 0.02em; } .cat-badge.cat-online { background: rgba(52, 211, 153, 0.16); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.4); } .cat-badge.cat-wa { background: rgba(37, 211, 102, 0.12); color: #25D366; border: 1px solid rgba(37, 211, 102, 0.35); } .welcome-card-link { font-family: var(--font-display); font-size: 0.85rem; font-weight: 800; color: var(--gold); display: inline-flex; align-items: center; transition: var(--transition-fast); } .welcome-category-card:hover .welcome-card-link { color: #ffffff; } .welcome-cta-btn { background-color: var(--gold); border: none; border-radius: 99px; padding: 17px 28px; min-height: 56px; color: var(--gold-ink); font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; letter-spacing: 0.04em; width: 100%; cursor: pointer; transition: var(--transition); box-shadow: 0 10px 26px rgba(232, 183, 58, 0.4); display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; } .welcome-cta-btn:hover { background-color: var(--gold-hover); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(232, 183, 58, 0.5); } .welcome-cta-btn:active { transform: scale(0.98); } /* Trust signals under the main CTA */ .hero-trust-strip { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; } .trust-chip { font-size: 0.8rem; font-weight: 600; line-height: 1.4; color: #dfe8ef; text-align: center; } /* Hero "Moto Rental" card — unavailable state */ .welcome-category-card.moto-unavailable { opacity: 0.6; cursor: default; pointer-events: none; } .moto-unavailable-label { display: inline-block; margin-top: 6px; font-size: 1rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #ff6b5e; border: 2px solid #ff6b5e; border-radius: 8px; padding: 3px 10px; } /* -------------------------------------------------------------------------- 7. SECONDARY HERO (editorial intro) -------------------------------------------------------------------------- */ .hero-section { position: relative; z-index: 5; padding-top: 72px; padding-bottom: 88px; background: linear-gradient(to right, rgba(11, 18, 32, 0.90) 30%, rgba(11, 18, 32, 0.45) 100%), url('assets/procida_landscape.png') no-repeat center / cover; color: #ffffff; } .hero-container { display: grid; grid-template-columns: 1fr 450px; align-items: center; gap: 40px; } .hero-text-content h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.12; margin-bottom: 22px; letter-spacing: -0.03em; color: #ffffff; } .hero-text-content p { font-size: 1.12rem; line-height: 1.7; color: rgba(255, 255, 255, 0.88); margin-bottom: 30px; max-width: 560px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .hero-text-content .badge-accent { background: rgba(243, 234, 217, 0.14); color: #f3ead9; } .trust-flags { display: flex; flex-direction: column; gap: 12px; } .flag { display: flex; align-items: flex-start; gap: 8px; font-weight: 700; font-size: 0.95rem; line-height: 1.45; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .flag-icon { width: 20px; height: 20px; color: #34d399; } .hero-cta-btn { font-size: 1.05rem; padding: 16px 40px; } /* Legacy search widget (kept for compatibility) */ .search-widget { background-color: rgba(255, 255, 255, 0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.4); padding: 28px; box-shadow: var(--shadow-lg); color: var(--text-main); } [data-theme="dark"] .search-widget { background-color: rgba(19, 28, 44, 0.88); border: 1px solid rgba(255, 255, 255, 0.08); } .search-widget h3 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; margin-bottom: 20px; } /* -------------------------------------------------------------------------- 8. SECTION HEADERS (shared) -------------------------------------------------------------------------- */ .section-header h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.35rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 12px; } .section-header p { color: var(--text-muted); font-size: 1.05rem; max-width: 620px; margin: 0 auto 28px; } /* -------------------------------------------------------------------------- 9. FLEET SECTION — filter tabs, date filter, vehicle cards -------------------------------------------------------------------------- */ .fleet-section { padding: 88px 0; background-color: transparent; } .filter-tabs { display: inline-flex; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: 5px; gap: 4px; box-shadow: var(--shadow-sm); } .tab-btn { padding: 10px 22px; min-height: 42px; border-radius: var(--radius-full); font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; color: var(--text-muted); cursor: pointer; transition: var(--transition); } .tab-btn.active { background-color: var(--gold); color: var(--gold-ink); box-shadow: 0 4px 12px rgba(232, 183, 58, 0.35); } .tab-btn:hover:not(.active) { background-color: var(--primary-light); color: var(--primary); } /* Date range availability filter */ .catalog-date-filter { background: var(--card-bg); border: 1.5px solid var(--border-color); border-radius: 20px; padding: 20px 24px; margin-bottom: 32px; box-shadow: var(--shadow-sm); } .catalog-date-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .catalog-date-label { font-size: 0.92rem; font-weight: 700; color: var(--text-main); white-space: nowrap; } .catalog-date-inputs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1; } .catalog-date-group { display: flex; flex-direction: column; gap: 4px; } .catalog-date-group label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); } .catalog-date-input { background: var(--bg-color); border: 1.5px solid var(--border-color); border-radius: 12px; color: var(--text-main); font-size: 0.95rem; font-family: inherit; padding: 10px 14px; min-height: 46px; cursor: pointer; transition: var(--transition-fast); } .catalog-date-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } .catalog-date-sep { font-size: 1.1rem; color: var(--text-muted); font-weight: 700; padding-top: 18px; } .catalog-clear-btn { background: transparent; border: 1.5px solid var(--border-color); border-radius: 12px; color: var(--text-muted); font-size: 0.82rem; font-weight: 700; padding: 10px 14px; min-height: 46px; cursor: pointer; transition: var(--transition-fast); margin-top: 18px; } .catalog-clear-btn:hover { border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.06); } .catalog-avail-status { margin-top: 10px; font-size: 0.85rem; color: var(--text-muted); min-height: 18px; } @media (max-width: 700px) { .catalog-date-inner { flex-direction: column; align-items: stretch; } .catalog-date-inputs { flex-direction: column; align-items: stretch; } .catalog-date-group { width: 100%; } .catalog-date-input { width: 100%; } .catalog-date-sep { display: none; } .catalog-clear-btn { margin-top: 0; } } /* Vehicle cards grid */ .fleet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 40px; } .vehicle-card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: var(--transition); } [data-theme="dark"] .vehicle-card { background-color: rgba(19, 28, 44, 0.88); border: 1px solid var(--border-color); } .vehicle-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(5, 150, 105, 0.45); } .card-image-wrap { /* warm studio sweep — matches the vehicle photos' built-in cream background */ background: radial-gradient(circle at 50% 40%, #faf4ea, #f4ebdc); height: 280px; position: relative; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-color); padding: 0; overflow: hidden; } .vehicle-img { width: 100%; height: 100%; object-fit: contain; /* whole vehicle, correct 3:2 proportions, big; cream blends into card */ transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1); } .vehicle-card:hover .vehicle-img { transform: scale(1.05); } /* Category tag — a chip in the card body (above the title), so it never overlaps the vehicle photo */ .card-tag { position: static; align-self: flex-start; display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-full); margin-bottom: 12px; white-space: nowrap; } .card-tag svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 5px; } .tag-popular { background: var(--primary-light); color: var(--primary); } .tag-luxury { background: var(--accent-light); color: var(--accent); } .tag-practical { background: var(--cyan-light); color: var(--cyan-primary); } .tag-eco { background: var(--primary-light); color: var(--primary); } .tag-power { background: var(--primary-light); color: var(--primary); } .card-body { padding: 26px 26px 24px; display: flex; flex-direction: column; flex-grow: 1; background-color: transparent; } .card-body h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; } .card-body .description { font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 18px; min-height: 40px; } .specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 20px; } .specs-grid span { display: flex; align-items: center; line-height: 1.35; font-size: 0.8rem; font-weight: 600; color: var(--text-main); } .specs-grid svg { width: 15px; height: 15px; margin-right: 7px; color: var(--primary); flex-shrink: 0; } .spec { font-size: 0.78rem; font-weight: 600; color: var(--text-main); background-color: var(--bg-color); border: 1px solid var(--border-color); padding: 5px 10px; border-radius: var(--radius-sm); } .inclusions-check-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; border-top: 1px solid var(--border-color); padding-top: 16px; } .check-item { font-size: 0.78rem; font-weight: 700; color: var(--primary); } /* Price — the decision driver: big, always visible */ .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; border-top: 1px solid var(--border-color); padding-top: 20px; } .price-box { display: flex; flex-direction: column; } .price-val { font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--text-main); line-height: 1; letter-spacing: -0.02em; } .price-lbl { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin-top: 4px; } /* Per-card availability badge */ .availability-badge { min-height: 24px; margin: 4px 0 10px 0; font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; gap: 6px; } .availability-badge .avail-hint { color: var(--text-muted); font-size: 0.76rem; font-weight: 500; font-style: italic; } .availability-badge .avail-ok { color: var(--primary); display: flex; align-items: center; gap: 6px; } .availability-badge .avail-ok::before { content: '\25CF'; font-size: 0.6rem; animation: pulse-green 2s infinite; } @keyframes pulse-green { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .availability-badge .avail-soldout { color: #ef4444; display: flex; align-items: center; gap: 6px; } .availability-badge .avail-soldout::before { content: '\2715'; font-size: 0.7rem; } .availability-badge .avail-checking { color: var(--text-muted); font-style: italic; font-size: 0.78rem; } /* Sold-out card state (toggled by JS: .card-soldout) */ .vehicle-card.card-soldout { opacity: 0.45; pointer-events: none; position: relative; } .vehicle-card.card-soldout::after { content: 'ESAURITO'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); background: rgba(239, 68, 68, 0.9); color: #fff; font-family: var(--font-display); font-size: 1.4rem; font-weight: 900; letter-spacing: 0.15em; padding: 10px 28px; border-radius: 10px; pointer-events: none; z-index: 10; border: 3px solid #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } /* Unavailable vehicles (long-term closed) */ .vehicle-card.vehicle-unavailable { position: relative; } .vehicle-card.vehicle-unavailable:hover { transform: none; border-color: var(--border-color); box-shadow: var(--shadow-sm); } .vehicle-card.vehicle-unavailable .vehicle-img { filter: grayscale(100%); opacity: 0.45; } .unavailable-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(10, 14, 22, 0.55); backdrop-filter: blur(2px); pointer-events: none; border-radius: 22px; } .unavailable-text { font-size: 1.9rem; font-weight: 900; letter-spacing: 1px; text-align: center; line-height: 1.15; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); transform: rotate(-8deg); border: 3px solid #ff5252; color: #ff5252; padding: 14px 22px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); } .unavailable-text small { display: block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px; margin-top: 4px; color: #fff; } .book-now-btn:disabled { opacity: 0.5; cursor: not-allowed; background: #8a8a8a !important; border-color: #8a8a8a !important; } /* ES2 app banner in catalog */ .es2-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding: 16px 22px; background: var(--primary-light); border: 1px solid rgba(5, 150, 105, 0.3); border-radius: 16px; text-decoration: none; color: inherit; transition: var(--transition-fast); } .es2-banner:hover { background: rgba(5, 150, 105, 0.14); } .es2-banner-text { font-size: 0.95rem; } .es2-banner-cta { color: var(--primary); font-weight: 800; white-space: nowrap; } /* -------------------------------------------------------------------------- 10. MAP SECTION -------------------------------------------------------------------------- */ .emzgo-map-section { padding: 16px 16px 40px; background-color: transparent; display: flex; justify-content: center; align-items: center; } .map-wrap { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 10px; } .map-toggle { display: inline-flex; align-self: center; gap: 4px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: 4px; box-shadow: var(--shadow-sm); } .map-tog-btn { padding: 8px 18px; min-height: 40px; border-radius: var(--radius-full); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; transition: var(--transition-fast); } .map-tog-btn.active { background: var(--gold); color: var(--gold-ink); box-shadow: 0 4px 12px rgba(232, 183, 58, 0.32); } .map-tog-btn:hover:not(.active) { color: var(--text-main); } .map-container { width: 100%; height: 320px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border-color); } .map-container iframe { width: 100%; height: 100%; display: block; } /* Legacy full-width map wrapper (other pages) */ .map-section { width: 100%; height: 380px; background-color: var(--card-bg); overflow: hidden; line-height: 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .map-section iframe { display: block; width: 100%; height: 100%; } @media (max-width: 768px) { .emzgo-map-section { padding: 12px 15px 28px; } } @media (max-width: 480px) { .map-container { height: 280px; } } /* -------------------------------------------------------------------------- 11. "COME FUNZIONA" — STEPS -------------------------------------------------------------------------- */ .steps-section { padding: 72px 0; } .steps-container-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; } .step-card { border-radius: 22px; padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); background-color: var(--card-bg); transition: var(--transition); } .step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .step-number { position: absolute; top: -14px; right: -6px; font-size: 6rem; font-family: var(--font-display); font-weight: 900; line-height: 1; opacity: 0.10; } .step-info h4 { font-family: var(--font-display); font-size: 1.22rem; font-weight: 800; margin-bottom: 8px; } .step-info p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; } /* Warm Mediterranean tints per step */ .step-green { background-color: var(--primary-light); border-color: rgba(5, 150, 105, 0.22); } .step-green .step-number { color: var(--primary); } .step-cyan { background-color: var(--cyan-light); border-color: rgba(14, 127, 168, 0.22); } .step-cyan .step-number { color: var(--cyan-primary); } .step-orange { background-color: var(--accent-light); border-color: rgba(194, 84, 47, 0.22); } .step-orange .step-number { color: var(--accent); } /* -------------------------------------------------------------------------- 12. BENEFITS — "TUTTO INCLUSO" (trust section) -------------------------------------------------------------------------- */ .benefits-section { padding: 88px 0; background-color: var(--card-bg); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } [data-theme="dark"] .benefits-section { background-color: rgba(19, 28, 44, 0.6); } .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; } .benefit-card { background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 22px; padding: 34px 30px; display: flex; flex-direction: column; gap: 16px; transition: var(--transition); } .benefit-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(5, 150, 105, 0.4); } .benefit-icon-wrapper { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; } .benefit-green { background-color: var(--primary-light); color: var(--primary); } .benefit-cyan { background-color: var(--cyan-light); color: var(--cyan-primary); } .benefit-orange { background-color: var(--accent-light); color: var(--accent); } .benefit-svg { width: 27px; height: 27px; } .benefit-card h4 { font-family: var(--font-display); font-size: 1.18rem; font-weight: 800; color: var(--text-main); } .benefit-card p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; } @media (max-width: 992px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .benefits-grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 13. WHY CHOOSE RENTEMZ -------------------------------------------------------------------------- */ .why-choose-section { padding: 80px 0; } .choose-container-grid { display: grid; grid-template-columns: 1fr; max-width: 760px; } .why-choose-info h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.35rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; line-height: 1.2; } .why-choose-info p { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 34px; } .why-items-list { display: flex; flex-direction: column; gap: 20px; } .why-item { display: flex; gap: 18px; align-items: flex-start; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow-sm); transition: var(--transition); } .why-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .why-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background-color: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; } .why-icon svg { width: 26px; height: 26px; } .why-text h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; margin-bottom: 4px; } .why-text p, .why-item p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0; line-height: 1.55; } /* -------------------------------------------------------------------------- 14. FAQ ACCORDION -------------------------------------------------------------------------- */ .faq-section { padding: 88px 0; } .faq-container-inner { max-width: 800px; } .faq-accordion-list { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; } .faq-item { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; transition: var(--transition); } .faq-trigger { width: 100%; text-align: left; padding: 20px 24px; min-height: var(--cta-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; line-height: 1.35; cursor: pointer; transition: var(--transition-fast); } .faq-trigger:hover { color: var(--primary); } .faq-arrow { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); transition: transform 0.3s ease; } .faq-item.active { border-color: var(--primary); box-shadow: var(--shadow-sm); background-color: var(--primary-light); } .faq-item.active .faq-arrow { transform: rotate(180deg); color: var(--primary); } .faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 24px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.65; } .faq-item.active .faq-content { padding-bottom: 20px; } /* -------------------------------------------------------------------------- 15. GOOGLE REVIEWS -------------------------------------------------------------------------- */ .reviews-section { padding: 72px 0; background-color: transparent; } .gr-head { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 36px; text-align: center; } .gr-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.35rem); font-weight: 800; letter-spacing: -0.02em; } .gr-rating { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .gr-score { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; line-height: 1; } .gr-stars { display: inline-flex; gap: 2px; } .gr-stars svg { width: 20px; height: 20px; fill: #f0a400; } .gr-g { width: 22px; height: 22px; flex-shrink: 0; } .section-sub { color: var(--text-muted); margin: 4px 0 0; } .gr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1120px; margin: 0 auto; } .gr-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; transition: var(--transition); } .gr-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .gr-top { display: flex; align-items: center; gap: 12px; } .gr-av { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1rem; flex-shrink: 0; letter-spacing: 0.5px; } .gr-meta { flex: 1; min-width: 0; } .gr-name { font-weight: 700; font-size: 0.98rem; line-height: 1.2; } .gr-when { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } .gr-card .gr-stars svg { width: 17px; height: 17px; } .gr-text { font-size: 0.93rem; line-height: 1.6; color: var(--text-muted); margin: 0; } .gr-more { font-size: 0.85rem; font-weight: 600; color: var(--primary); text-decoration: none; align-self: flex-start; margin-top: auto; } .gr-more:hover { text-decoration: underline; } .gr-cta { display: flex; justify-content: center; margin-top: 34px; } .gr-cta a { display: inline-flex; align-items: center; gap: 10px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-full); padding: 14px 28px; min-height: var(--cta-h); font-weight: 700; color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: var(--transition); } .gr-cta a:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--primary); } @media (max-width: 880px) { .gr-grid { grid-template-columns: 1fr; max-width: 480px; } .reviews-section { padding: 52px 0; } } /* -------------------------------------------------------------------------- 16. FOOTER -------------------------------------------------------------------------- */ .main-footer { background-color: #0b1220; color: #94a5b4; padding: 80px 0 20px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .footer-grid { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr; gap: 48px; padding-bottom: 60px; } .footer-brand-area p { margin-top: 16px; font-size: 0.9rem; line-height: 1.65; } .footer-logo-img { height: 36px; } .text-white { color: #ffffff !important; } .main-footer h4 { color: #ffffff; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin-bottom: 20px; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 0.88rem; line-height: 1.55; } .footer-links a:hover { color: #6ee7b7; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 30px; font-size: 0.8rem; color: #5f7183; } /* -------------------------------------------------------------------------- 17. BOOKING DRAWER — THE MONEY PATH (Veicolo → Dati → Pagamento) -------------------------------------------------------------------------- */ .drawer-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(11, 18, 32, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; } .drawer-content { background-color: rgba(250, 247, 241, 0.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); width: 100vw; height: 100vh; height: 100dvh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0; overflow: hidden; } [data-theme="dark"] .drawer-content { background-color: rgba(11, 18, 32, 0.92); } .drawer-overlay.active .drawer-content { transform: translateY(0); } .drawer-header { background-color: transparent; border-bottom: 1px solid var(--border-color); padding: 18px 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .drawer-header, .step-progress-bar, .drawer-body { width: 100%; } .title-wrap h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.01em; } .drawer-tag { background-color: var(--primary-light); color: var(--primary); font-size: 0.8rem; font-weight: 700; padding: 4px 14px; border-radius: var(--radius-full); } .close-btn { font-size: 2rem; line-height: 1; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: var(--transition-fast); } .close-btn:hover { color: var(--text-main); background-color: var(--sand); } /* Step progress — obvious 1-2-3 */ .step-progress-bar { display: flex; align-items: center; justify-content: center; gap: 12px; background-color: transparent; padding: 14px 48px; border-bottom: 1px solid var(--border-color); } .progress-node { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--text-muted); padding: 8px 16px; border-radius: var(--radius-full); border: 1.5px solid transparent; white-space: nowrap; transition: var(--transition); } .progress-node.active { color: var(--gold-ink); background-color: var(--gold); box-shadow: 0 4px 12px rgba(232, 183, 58, 0.35); } .progress-line { width: 36px; height: 2px; border-radius: 2px; background-color: var(--border-color); } .drawer-body { padding: 36px 48px; overflow-y: auto; flex-grow: 1; display: flex; justify-content: center; -webkit-overflow-scrolling: touch; } .drawer-layout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; width: 100%; max-width: 1100px; } /* Let grid/flex children shrink below content width so nothing overflows on mobile */ .drawer-layout-grid, .drawer-layout-grid > *, .drawer-form-panel, .drawer-summary-panel, .grid-2-col, .grid-2-col > * { min-width: 0; } .drawer-content, .drawer-body { overflow-x: hidden; } .drawer-form-panel h4 { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; margin-bottom: 14px; } .back-text-btn { font-weight: 700; font-size: 0.88rem; color: var(--primary); cursor: pointer; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; } .back-text-btn:hover { color: var(--primary-hover); } .payment-intro-text { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 18px; } /* Form primitives — big, calm, obvious focus */ .grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; /* keep inputs aligned even when one label wraps to 2 lines */ } .input-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; } .input-group label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .input-group select, .input-group input, .input-group textarea { width: 100%; background-color: var(--card-bg); border: 1.5px solid var(--border-color); padding: 13px 15px; min-height: 50px; border-radius: 12px; color: var(--text-main); font-size: 1rem; /* ≥16px — no iOS zoom-on-focus */ transition: var(--transition-fast); } .input-group textarea { min-height: 64px; } .input-group select:focus, .input-group input:focus, .input-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } .input-group input::placeholder, .input-group textarea::placeholder { color: var(--text-muted); opacity: 0.6; } .locked-select { cursor: not-allowed; background-color: var(--border-color) !important; font-weight: 600; } .input-desc-note { font-size: 0.725rem; color: var(--primary); font-weight: 600; } .info-rule-box { background-color: var(--primary-light); color: var(--text-muted); border: 1px dashed var(--primary); border-radius: var(--radius-sm); padding: 10px 14px; display: flex; gap: 10px; margin-bottom: 20px; font-size: 0.75rem; line-height: 1.4; } .info-icon { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; } /* Dates section */ .drawer-date-check-section { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-sm); } .date-check-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; margin-bottom: 14px; } .optional-tag { font-size: 0.75rem; font-weight: 700; color: var(--accent); } .drawer-booking-inputs { display: flex; flex-direction: column; gap: 2px; } /* Tariff 24h toggle + explainer */ .tariff-toggle-btn { width: 100%; padding: 13px 14px; min-height: 50px; border: 1.5px solid var(--primary); background: var(--card-bg); color: var(--primary); border-radius: 12px; font-weight: 700; font-size: 0.92rem; cursor: pointer; transition: var(--transition-fast); } .tariff-toggle-btn:hover { background: var(--primary-light); box-shadow: var(--shadow-sm); } .tariff-toggle-btn.active { background: var(--primary); border-color: var(--primary); color: #ffffff; } [data-theme="dark"] .tariff-toggle-btn.active { color: #06281c; } .tariff-24h-info { background: var(--primary-light); border: 1px solid rgba(5, 150, 105, 0.35); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; color: var(--text-main); } .tariff-24h-info strong { display: block; margin-bottom: 4px; color: var(--primary); } .tariff-24h-info span { font-size: 0.88rem; line-height: 1.5; color: var(--text-muted); } .tariff-24h-note { padding: 10px 14px; background: var(--sand); border-radius: 10px; color: var(--text-muted); font-size: 0.85rem; text-align: center; margin-top: 4px; } /* Locked "return time" pill (injected by app.js in daily mode) — override the hardcoded dark inline style so it matches the light form fields in both themes */ #fixed-return-lbl { background: var(--card-bg) !important; color: var(--text-muted) !important; border: 1.5px solid var(--border-color); border-radius: 12px !important; padding: 13px 14px !important; min-height: 50px; display: flex !important; align-items: center; justify-content: center; gap: 7px; font-weight: 700; font-size: 0.92rem !important; } /* Vehicle switcher + image carousel */ .summary-model-switcher-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; } .summary-switcher-select { width: 100%; background-color: var(--card-bg); border: 1.5px solid var(--border-color); padding: 12px 14px; min-height: 50px; border-radius: 12px; font-weight: 700; color: var(--primary) !important; font-size: 0.95rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition-fast); } .summary-switcher-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } .summary-vehicle-img-wrap { width: 100%; max-width: 420px; aspect-ratio: 3 / 2; /* як фото 1200×800 */ display: flex; align-items: center; justify-content: center; background: #f6efe1; /* сховане під фото; лише fallback */ border: 1px solid var(--border-color); border-radius: 18px; overflow: hidden; padding: 0; margin: 0 auto 16px; position: relative; } .summary-vehicle-slide-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .vehicle-slide-img { width: 100%; height: 100%; object-fit: cover; /* фото 3:2 = бокс 3:2 → заповнює без обрізання */ transition: all 0.25s ease-in-out; } .nav-arrow-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 700; color: var(--primary); cursor: pointer; box-shadow: var(--shadow-sm); z-index: 10; transition: var(--transition-fast); } .nav-arrow-btn:hover { background-color: var(--primary); color: #ffffff; border-color: var(--primary); } .nav-arrow-btn.left { left: 12px; } .nav-arrow-btn.right { right: 12px; } /* Quantity selector (was unstyled in v1) */ .quantity-selector-wrap { margin-top: 14px; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px 16px; } .quantity-label { display: block; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 10px; } .quantity-input-row { display: flex; align-items: center; gap: 10px; } .qty-btn { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background-color: var(--primary-light); color: var(--primary); font-size: 1.3rem; font-weight: 800; cursor: pointer; transition: var(--transition-fast); } .qty-btn:hover { background-color: var(--primary); color: #ffffff; } .qty-btn:active { transform: scale(0.92); } .qty-input { width: 70px; height: 46px; text-align: center; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; background-color: var(--bg-color); border: 1.5px solid var(--border-color); border-radius: 12px; color: var(--text-main); -moz-appearance: textfield; } .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity-hint { font-size: 0.8rem; color: var(--text-muted); } /* Validation / error boxes */ .availability-error-box { background: #fff3e6; border: 1.5px solid var(--accent); border-radius: 12px; padding: 12px 16px; color: #8a3a1c; font-size: 0.88rem; line-height: 1.5; margin-top: 12px; } .availability-error-box strong { color: #6e2c12; } [data-theme="dark"] .availability-error-box { background: rgba(239, 152, 104, 0.12); color: #f4b189; } [data-theme="dark"] .availability-error-box strong { color: #f8cbae; } /* Add-ons checklist */ .add-ons-panel { margin-top: 24px; border-top: 1px solid var(--border-color); padding-top: 24px; } .addon-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; background-color: var(--card-bg); border: 1.5px solid var(--border-color); border-radius: 14px; padding: 16px; margin-bottom: 12px; transition: var(--transition-fast); } .addon-row:has(input:checked) { border-color: var(--primary); background-color: var(--primary-light); } .addon-checkbox-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; position: relative; flex-grow: 1; } .addon-checkbox-label input { position: absolute; opacity: 0; width: 0; height: 0; } .checkbox-custom { position: relative; height: 22px; width: 22px; background-color: var(--bg-color); border: 1.5px solid var(--border-color); border-radius: 6px; flex-shrink: 0; margin-top: 2px; transition: var(--transition-fast); } .addon-checkbox-label input:checked ~ .checkbox-custom { background-color: var(--primary); border-color: var(--primary); } .checkbox-custom::after { content: ""; position: absolute; display: none; left: 7px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .addon-checkbox-label input:checked ~ .checkbox-custom::after { display: block; } .addon-details { display: flex; flex-direction: column; } .addon-title { font-size: 0.9rem; font-weight: 700; } .addon-desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; line-height: 1.4; } .addon-price { font-size: 0.9rem; font-weight: 800; color: var(--accent); white-space: nowrap; } /* Per-vehicle add-ons (qty > 1), injected by app.js */ #addons-per-bike { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; } .pb-block { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-sm); } .pb-block-header { display: flex; align-items: center; gap: 9px; font-size: 0.95rem; font-weight: 800; color: var(--text-main); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); } .pb-block-emoji { font-size: 1.05rem; } .pb-num { margin-left: auto; min-width: 24px; height: 24px; padding: 0 8px; border-radius: var(--radius-full); background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; } .pb-row { align-items: center; gap: 12px; padding: 10px 11px; border-radius: 10px; border: 1px solid transparent; transition: var(--transition-fast); } .pb-row:not(:last-child) { margin-bottom: 2px; } .pb-row .checkbox-custom { margin-top: 0; } .pb-row .addon-title { flex: 1; } .pb-row .addon-price { color: var(--accent); font-weight: 800; white-space: nowrap; } .pb-row:hover { background: var(--bg-color); } .pb-row:has(input:checked) { background: var(--primary-light); border-color: var(--primary); } /* Step 3 — final confirm box */ .confirm-booking-box { background: var(--card-bg); border: 1.5px solid var(--primary); border-radius: 18px; padding: 20px 22px; margin-top: 16px; box-shadow: var(--shadow-sm); } .confirm-icon-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); } .confirm-icon-badge { font-size: 2rem; line-height: 1; } .confirm-title { margin: 0 0 2px; font-size: 1.05rem; font-weight: 800; color: var(--text-main); } .confirm-subtitle { margin: 0; font-size: 0.82rem; color: var(--text-muted); } .confirm-details-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .confirm-detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .confirm-label { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; } .confirm-value { font-size: 0.9rem; font-weight: 700; color: var(--text-main); text-align: right; overflow-wrap: anywhere; } .confirm-price { color: var(--primary); font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; } .confirm-payment-badge { background: var(--primary-light); border-radius: 10px; padding: 12px 14px; font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; border: 1px solid rgba(5, 150, 105, 0.2); } .confirm-note-text { text-align: center; font-size: 0.78rem; color: var(--text-muted); margin-top: 12px; line-height: 1.5; } /* Legal checkboxes (double opt-in) */ .legal-checkboxes { margin: 20px 0; padding: 16px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; } .custom-checkbox { display: flex; align-items: flex-start; margin-bottom: 12px; cursor: pointer; font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; user-select: none; } .custom-checkbox:last-child { margin-bottom: 0; } .custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { position: relative; top: 2px; height: 20px; width: 20px; min-width: 20px; background-color: var(--bg-color); border: 1.5px solid var(--border-color); border-radius: 6px; margin-right: 12px; transition: var(--transition-fast); } .custom-checkbox:hover input ~ .checkmark { border-color: var(--primary); } .custom-checkbox input:checked ~ .checkmark { background-color: var(--primary); border-color: var(--primary); } .checkmark:after { content: ""; position: absolute; display: none; left: 6px; top: 2px; width: 4px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .custom-checkbox input:checked ~ .checkmark:after { display: block; } .cb-text a, .cb-text span[id] { color: var(--primary); text-decoration: underline; } .cb-text a:hover { color: var(--primary-hover); } /* -------------------------------------------------------------------------- 18. SUMMARY CARD — price recap (sticky on desktop) -------------------------------------------------------------------------- */ .summary-card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-md); position: sticky; top: 4px; } .summary-title { border-bottom: 1px solid var(--border-color); padding-bottom: 12px; } .summary-item-vehicle { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; } .summary-item-vehicle .v-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--primary); } .summary-item-vehicle .v-base-price { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); text-align: right; } hr { border: none; border-top: 1px solid var(--border-color); margin: 16px 0; } .recap-info-grid { display: flex; flex-direction: column; gap: 12px; font-size: 0.85rem; } .recap-label { font-weight: 700; color: var(--text-muted); display: block; } .recap-value { color: var(--text-main); } .recap-rule-note { background-color: var(--accent-light); border: 1px solid rgba(194, 84, 47, 0.3); color: var(--accent); padding: 10px 12px; border-radius: 10px; font-size: 0.75rem; line-height: 1.45; margin-top: 12px; } .pricing-breakdown { display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; } .price-row { display: flex; justify-content: space-between; gap: 10px; } .price-row span:last-child { font-weight: 700; } /* Caparra = the hero number */ .total-row { font-size: 1.1rem; font-weight: 800 !important; color: var(--text-main); border-top: 1px dashed var(--border-color); padding-top: 12px; margin-top: 8px; align-items: baseline; } .total-row span:last-child { font-family: var(--font-display); font-weight: 900; color: var(--primary) !important; font-size: 1.6rem; letter-spacing: -0.02em; } .quick-assurance-badges { display: flex; flex-direction: column; gap: 6px; font-size: 0.75rem; color: var(--text-muted); margin-top: 16px; } /* Drawer language switch */ .drawer-lang-switch { display: flex; gap: 4px; } .drawer-lang-btn { background: transparent; border: 1.5px solid var(--border-color); border-radius: 10px; padding: 6px 8px; min-width: 38px; min-height: 38px; font-size: 1rem; line-height: 1; cursor: pointer; opacity: 0.5; transition: var(--transition-fast); } .drawer-lang-btn:hover { opacity: 1; } .drawer-lang-btn.active { opacity: 1; border-color: var(--primary); background: var(--primary-light); } /* ========================================================================== ORDER-MENU LAYOUT COMPARE (temporary) — "Attuale ⇄ Nuovo" toggle + .v2 tweaks ========================================================================== */ .drawer-v2-switch { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); flex-wrap: wrap; } .drawer-v2-opt { padding: 6px 14px; min-height: 36px; border-radius: var(--radius-full); border: 1.5px solid var(--border-color); background: var(--card-bg); color: var(--text-muted); font-weight: 800; font-size: 0.8rem; cursor: pointer; transition: var(--transition-fast); } .drawer-v2-opt.active { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); } /* Price + includes strip — hidden in the current layout, shown in "Nuovo" */ .drawer-veh-price { display: none; } #booking-drawer.v2 .drawer-veh-price { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; margin-top: 12px; } .drawer-veh-price b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; color: var(--primary); letter-spacing: -0.02em; } .drawer-veh-price span { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); } /* --- "Nuovo": harmonize colours (neutral/gold instead of bright green) --- */ #booking-drawer.v2 .nav-arrow-btn { background: var(--card-bg); color: var(--accent); border-color: var(--border-color); } #booking-drawer.v2 .nav-arrow-btn:hover { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); } #booking-drawer.v2 .summary-switcher-select { color: var(--text-main) !important; } #booking-drawer.v2 .tariff-toggle-btn { border-color: var(--gold); color: var(--text-main); } #booking-drawer.v2 .tariff-toggle-btn:hover { background: rgba(232, 183, 58, 0.1); } #booking-drawer.v2 .tariff-toggle-btn.active { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); } /* --- "Nuovo": tighten the vertical rhythm — less scrolling to the CTA --- */ #booking-drawer.v2 .drawer-date-check-section { padding: 16px; } #booking-drawer.v2 .summary-model-switcher-group.mt-16 { margin-top: 10px; } #booking-drawer.v2 .summary-vehicle-img-wrap { margin-bottom: 8px; } #booking-drawer.v2 #inventory-status-bar { margin-top: 6px !important; } #booking-drawer.v2 .quantity-selector-wrap { margin-top: 10px; } #booking-drawer.v2 .tariff-24h-info { margin-bottom: 8px; } #booking-drawer.v2 #next-to-dati-btn.mt-24 { margin-top: 14px; } /* -------------------------------------------------------------------------- 19. MODALS — success + terms -------------------------------------------------------------------------- */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(11, 18, 32, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-box { background-color: var(--card-bg); border: 1px solid var(--border-color); padding: 36px; border-radius: 22px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: scaleUp 0.25s ease; } @keyframes scaleUp { 0% { transform: scale(0.94); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .success-icon { font-size: 3.5rem; margin-bottom: 16px; } .modal-box h2 { font-family: var(--font-display); font-size: 1.65rem; font-weight: 800; margin-bottom: 10px; } .modal-box p { font-size: 0.925rem; color: var(--text-muted); margin-bottom: 20px; line-height: 1.6; } .success-recap { background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px; margin-bottom: 24px; text-align: left; font-size: 0.9rem; display: flex; flex-direction: column; gap: 8px; } .success-recap p { margin-bottom: 0; display: flex; justify-content: space-between; gap: 10px; } .success-recap p strong { color: var(--text-main); text-align: right; } .whatsapp-success-note { background-color: var(--primary-light); color: var(--primary-deep); border: 1px solid rgba(5, 150, 105, 0.25); padding: 12px 14px; border-radius: 12px; font-size: 0.8rem; text-align: left; margin-bottom: 24px; line-height: 1.5; } [data-theme="dark"] .whatsapp-success-note { color: #a7f3d0; } .modal-success-actions { display: flex; flex-direction: column; gap: 8px; } .whatsapp-btn { background-color: #25d366; color: #ffffff; font-family: var(--font-display); font-weight: 800; min-height: var(--cta-h); padding: 14px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25); transition: var(--transition); } .whatsapp-btn:hover { background-color: #1ebd56; transform: translateY(-2px); } /* Terms & Conditions modal (was unstyled in v1) */ .modal-card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 22px; padding: 28px; max-width: 620px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: scaleUp 0.25s ease; } .modal-card .modal-header h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; margin-bottom: 12px; } .modal-card .modal-body { overflow-y: auto; color: var(--text-muted) !important; line-height: 1.65; } .modal-card .modal-body h4 { color: var(--accent) !important; } .modal-card .modal-body hr { border-color: var(--border-color) !important; } /* -------------------------------------------------------------------------- 20. MOBILE NAVIGATION OVERLAY -------------------------------------------------------------------------- */ .mobile-menu-btn { display: none; } .mobile-nav-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background-image: linear-gradient(rgba(11, 18, 32, 0.90), rgba(11, 18, 32, 0.97)), url('assets/procida_landscape.png'); background-size: cover; background-position: center; z-index: 2500; display: flex; flex-direction: column; padding: 24px 32px; opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-nav-overlay.active { opacity: 1; pointer-events: auto; } .mobile-nav-content { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; max-width: 500px; margin: 0 auto; } .mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .mobile-nav-header .close-btn { color: #ffffff; } .mobile-nav-header .close-btn:hover { background: rgba(255, 255, 255, 0.1); } .mobile-nav-logo-img { height: 32px; } .mobile-nav-links { display: flex; flex-direction: column; gap: 20px; margin: auto 0; } .mobile-nav-link { font-family: var(--font-display); font-weight: 700; font-size: 1.65rem; color: #ffffff; letter-spacing: -0.01em; transition: var(--transition-fast); text-align: center; padding: 4px 0; } .mobile-nav-link:hover, .mobile-nav-link:active { color: #6ee7b7; } .mobile-nav-footer { text-align: center; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 24px; display: flex; flex-direction: column; gap: 8px; } /* -------------------------------------------------------------------------- 21. BACK-TO-TOP + SMALL UTILITIES -------------------------------------------------------------------------- */ .back-to-top { position: fixed; bottom: 25px; right: 25px; width: 46px; height: 46px; background-color: var(--gold); color: var(--gold-ink); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35); z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .back-to-top.show { opacity: 1; visibility: visible; } .back-to-top:hover { background-color: var(--gold-hover); transform: translateY(-3px); } @media (max-width: 768px) { .back-to-top { bottom: 96px; right: 16px; width: 42px; height: 42px; } } .map-link-inline { color: var(--primary); text-decoration: underline; font-weight: 600; margin-left: 4px; transition: var(--transition-fast); } .map-link-inline:hover { color: var(--primary-hover); } /* Live price preview (legacy widget) */ .widget-price-preview { margin: 15px 0; padding: 14px 18px; background-color: var(--primary-light); border: 1px solid rgba(5, 150, 105, 0.25); border-radius: 12px; display: flex; flex-direction: column; gap: 4px; } .widget-price-preview.hidden { display: none !important; } .preview-price-row { display: flex; justify-content: space-between; align-items: center; } .preview-price-label { font-size: 0.95rem; font-weight: 600; color: var(--text-main); } .preview-price-amount { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--primary); } .preview-price-details { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--text-muted); } .preview-vehicle-name { font-weight: 500; } .preview-duration { font-weight: 600; } /* -------------------------------------------------------------------------- 22. RESPONSIVE — consolidated breakpoints -------------------------------------------------------------------------- */ @media (max-width: 1100px) { .hero-container { grid-template-columns: 1fr; gap: 32px; } .hero-text-content { text-align: center; display: flex; flex-direction: column; align-items: center; } .search-widget { max-width: 580px; margin: 0 auto; width: 100%; } .fleet-grid { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; } .footer-grid { grid-template-columns: 1fr 1fr; } .steps-container-grid { grid-template-columns: 1fr; } .drawer-layout-grid { grid-template-columns: minmax(0, 1fr); } .drawer-body { padding: 24px; } .drawer-header { padding: 16px 24px; } .step-progress-bar { padding: 12px 24px; } } @media (max-width: 850px) { .summary-card { position: static; } } @media (max-width: 768px) { body { padding-top: var(--header-h-mobile); } .desktop-nav { display: none; } .mobile-floating-cta { display: block; } .mobile-menu-btn { display: flex; } /* Burger + floating CTA cover booking on mobile — free up the crowded header */ .header-cta-btn { display: none !important; } /* Full-bleed hero under the compact mobile header. Auto height + top-aligned content so nothing gets clipped when the hero is a little taller than the viewport (it just scrolls). */ .hero-fullscreen { height: auto; min-height: 100svh; margin-top: calc(-1 * var(--header-h-mobile)); flex-direction: column; justify-content: flex-start; align-items: center; } .hero-fullscreen-inner { min-height: 100svh; align-content: start; padding-top: calc(var(--header-h-mobile) + 14px); padding-bottom: 26px; } .moped-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; } .hero-fullscreen-overlay { display: block; } .hero-fullscreen-panel { position: relative; z-index: 3; width: 100%; max-width: 100%; margin: 0; padding: 0 14px; background: transparent; } .welcome-card-panel { background-color: rgba(14, 22, 36, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 22px; gap: 14px; } .hero-section { padding-top: 40px; padding-bottom: 48px; } .fleet-section { padding: 56px 0; } .benefits-section { padding: 56px 0; } .faq-section { padding: 56px 0; } .steps-section { padding: 48px 0; } .why-choose-section { padding: 48px 0; } } /* Compact welcome panel on narrow/tall phones — cards were too bulky, badges wrapped ugly */ @media (max-width: 560px) { .welcome-card-panel { padding: 15px; gap: 11px; } .welcome-category-card { padding: 13px 15px; gap: 13px; border-radius: 16px; } .welcome-card-icon-wrap { width: 44px; height: 44px; } .welcome-card-icon { width: 22px; height: 22px; } .welcome-card-info h3 { font-size: 0.96rem; line-height: 1.22; margin-bottom: 4px; } .cat-badge { font-size: 0.63rem; padding: 3px 9px; margin-bottom: 5px; letter-spacing: 0; } .welcome-card-link { font-size: 0.8rem; } .welcome-cta-btn { padding: 14px 22px; font-size: 0.98rem; min-height: 52px; } .hero-trust-strip { gap: 5px; margin-top: 4px; } .trust-chip { font-size: 0.74rem; } } @media (max-width: 480px) { /* Stack date/time fields full-width on phones — native date inputs won't shrink below their intrinsic width */ .grid-2-col { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .search-widget { padding: 20px; } .drawer-header { padding: 14px 16px; } .drawer-body { padding: 16px; } .step-progress-bar { padding: 10px 12px; gap: 6px; } .progress-node { padding: 7px 11px; font-size: 0.78rem; } .progress-line { width: 14px; } .title-wrap h3 { font-size: 1.15rem; } .drawer-tag { display: none; } /* Compact header elements to prevent wrapping */ .header-container { padding: 10px 12px; } .logo-text { font-size: 1.1rem; } .logo-svg { width: 22px; height: 22px; } .header-actions { gap: 8px; } .lang-switcher { margin-right: 0; } .lang-btn { padding: 6px 10px; min-height: 40px; font-size: 0.75rem; } .icon-btn { width: 40px; height: 40px; } .icon { width: 16px; height: 16px; } /* Burger + floating CTA cover booking on small phones — hide the cramped header button */ .header-cta-btn { display: none; } .card-image-wrap { height: 220px; } .card-body { padding: 20px; } .price-val { font-size: 1.75rem; } .modal-box { padding: 24px; } .modal-card { padding: 20px; } } /* -------------------------------------------------------------------------- 23. CINEMA HERO — editorial text side + glass panel side -------------------------------------------------------------------------- */ .hero-fullscreen-overlay { background: linear-gradient(to top, rgba(9, 20, 32, 0.9) 0%, rgba(9, 20, 32, 0.42) 45%, rgba(9, 20, 32, 0.22) 75%, rgba(9, 20, 32, 0.5) 100%); } .hero-fullscreen-inner { position: relative; z-index: 3; width: 100%; max-width: 1220px; margin: 0 auto; min-height: 100svh; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; padding: 130px 24px 60px; } .hero-text-side { color: #ffffff; min-width: 0; } .hero-text-side h1, .hero-text-side p { overflow-wrap: break-word; } .hero-panel-side { min-width: 0; } .hero-text-side .kick { display: inline-flex; align-items: center; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .hero-text-side h1 { font-family: var(--font-display); font-size: clamp(2.3rem, 5.4vw, 4.3rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 900; color: #ffffff; margin-bottom: 18px; } .hero-text-side h1 em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; color: #f7dc9e; letter-spacing: -0.02em; } .hero-text-side p { font-size: 1.08rem; line-height: 1.6; color: rgba(255, 255, 255, 0.86); max-width: 44ch; } .hero-text-side p b { color: #ffffff; } .hero-text-side .chips { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 20px; font-size: 0.82rem; font-weight: 700; color: rgba(255, 255, 255, 0.92); } .hero-text-side .chips span::before { content: "✓ "; color: var(--gold); font-weight: 900; } .hero-panel-side { display: flex; justify-content: flex-end; } .hero-panel-side .welcome-card-panel { width: 100%; } /* -------------------------------------------------------------------------- 24. MARQUEE — selling points ticker -------------------------------------------------------------------------- */ .emz-marquee { background: #101b2c; color: #faf3e7; overflow: hidden; padding: 14px 0; position: relative; z-index: 6; } .emz-marquee-track { display: flex; width: max-content; animation: emzSlide 32s linear infinite; } .emz-marquee:hover .emz-marquee-track { animation-play-state: paused; } @keyframes emzSlide { to { transform: translateX(-50%); } } .emz-marquee span { font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.13em; text-transform: uppercase; padding: 0 24px; white-space: nowrap; } .emz-marquee span::after { content: "✺"; margin-left: 48px; color: var(--gold); } /* -------------------------------------------------------------------------- 25. BENEFITS — night-harbor trust band (theme-independent) -------------------------------------------------------------------------- */ .benefits-section, [data-theme="dark"] .benefits-section { background-color: #101b2c; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .benefits-section .section-header h2 { color: #f2f6f9; } .benefits-section .section-header p { color: #9fb0be; } .benefits-section .badge-accent { background: rgba(232, 183, 58, 0.14); color: var(--gold); } .benefit-card { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } .benefit-card:hover { border-color: var(--gold); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35); } .benefit-card h4 { color: #f2f6f9; } .benefit-card p { color: #9fb0be; } .benefit-green { background-color: rgba(16, 185, 129, 0.15); color: #34d399; } .benefit-cyan { background-color: rgba(76, 195, 232, 0.15); color: #4cc3e8; } .benefit-orange { background-color: rgba(232, 183, 58, 0.16); color: var(--gold); } /* -------------------------------------------------------------------------- 26. CINEMA HERO — responsive -------------------------------------------------------------------------- */ @media (max-width: 960px) { .hero-fullscreen-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; align-content: center; padding-top: 100px; padding-bottom: 40px; } .hero-panel-side { justify-content: center; } .hero-text-side { text-align: left; } .hero-text-side p { font-size: 1rem; } } @media (max-width: 560px) { .hero-fullscreen-inner { padding-top: 84px; } .hero-text-side .chips { display: none; } .hero-text-side h1 { font-size: 2.1rem; margin-bottom: 12px; } .hero-text-side p { font-size: 0.96rem; } } /* Respect users who prefer no motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .moped-hero-img { opacity: 1; } }