/* ========================================================================== RentDrive — Design System v3 (v3.css) Premium blue theme layer. Loaded after style.css + enhance.css. Scoped to [data-design="v3"] on . ========================================================================== */ [data-design="v3"] { --v3-glass: color-mix(in srgb, var(--surface) 78%, transparent); --v3-glass-border: color-mix(in srgb, var(--brand) 12%, var(--border-soft)); --v3-gradient: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 55%, var(--brand-700) 100%); --v3-gradient-soft: linear-gradient(135deg, var(--brand-50) 0%, var(--surface) 100%); --v3-section-pad: clamp(3.5rem, 7vw, 6rem); } /* ---- Typography & base polish ---- */ [data-design="v3"] body { background: var(--bg); background-image: radial-gradient(80% 50% at 100% -10%, rgba(var(--brand-rgb), .06), transparent 55%), radial-gradient(60% 40% at 0% 100%, rgba(var(--brand-rgb), .04), transparent 50%); background-attachment: fixed; } [data-design="v3"] .rd-h1, [data-design="v3"] .rd-h2, [data-design="v3"] .rd-h3, [data-design="v3"] .rd-section-head__title { letter-spacing: -0.03em; } [data-design="v3"] .rd-section { padding-block: var(--v3-section-pad); } [data-design="v3"] .rd-section-head__title::after { background: var(--v3-gradient); } /* ---- Cards — elevated glass v3 ---- */ [data-design="v3"] .rd-card, [data-design="v3"] .rd-car-card { border: 1px solid var(--v3-glass-border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); background: var(--surface); transition: transform var(--t), box-shadow var(--t), border-color var(--t); } [data-design="v3"] .rd-car-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md), 0 20px 40px -24px rgba(var(--brand-rgb), .22); border-color: color-mix(in srgb, var(--brand) 28%, var(--border-soft)); } [data-design="v3"] .rd-car-card__media { border-radius: calc(var(--r-xl) - 4px) calc(var(--r-xl) - 4px) 0 0; } /* ---- Buttons ---- */ [data-design="v3"] .rd-btn--primary { background: var(--v3-gradient); border: none; box-shadow: var(--shadow-brand-sm); } [data-design="v3"] .rd-btn--primary:hover { box-shadow: var(--shadow-brand); } [data-design="v3"] .rd-btn--ghost:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: rgba(var(--brand-rgb), .06); } /* ---- Header glass v3 ---- */ [data-design="v3"] #rd-header { background: var(--v3-glass); border-bottom-color: var(--v3-glass-border); } [data-design="v3"] #rd-header.is-scrolled { box-shadow: 0 12px 40px -20px rgba(var(--brand-rgb), .18); } [data-design="v3"] .hx-announce { background: var(--v3-gradient); } [data-design="v3"] .hx-logo__mark, [data-design="v3"] .hx-cta { background: var(--v3-gradient); box-shadow: 0 10px 28px -10px rgba(var(--brand-rgb), .55); } [data-design="v3"] .hx-link:hover, [data-design="v3"] .hx-link.is-active { background: rgba(var(--brand-rgb), .08); } [data-design="v3"] .hx-search:hover, [data-design="v3"] .hx-icon-btn:hover { background: rgba(var(--brand-rgb), .08); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); } /* ---- Hero / home v3 ---- */ [data-design="v3"] .hv-btn--primary { background: var(--v3-gradient); box-shadow: var(--shadow-brand); } [data-design="v3"] .rd-cattab.is-active { background: var(--v3-gradient); box-shadow: var(--shadow-brand-sm); } [data-design="v3"] .rd-trust-card:hover, [data-design="v3"] .rd-cat:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--border-soft)); box-shadow: 0 28px 56px -24px rgba(var(--brand-rgb), .28); } [data-design="v3"] .rd-trust-card__ico { background: var(--v3-gradient); } /* ---- Reservation widget v3 ---- */ [data-design="v3"] .rwv2__btn, [data-design="v3"] .rwv2__tab.is-active { background: var(--v3-gradient); box-shadow: var(--shadow-brand-sm); } [data-design="v3"] .rwv2__bar-fill { background: var(--v3-gradient); } /* ---- Footer v3 ---- */ [data-design="v3"] .rd-footer { background: linear-gradient(180deg, var(--ink-800) 0%, var(--ink) 100%); border-top: 1px solid rgba(var(--brand-rgb), .15); } [data-design="v3"] .rd-footer a:hover { color: color-mix(in srgb, var(--brand) 70%, #fff); } /* ---- Forms ---- */ [data-design="v3"] .rd-input:focus, [data-design="v3"] .rd-select:focus, [data-design="v3"] .rd-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18); } /* ---- Floating call v3 ---- */ [data-design="v3"] .rd-call-float { background: var(--v3-gradient); } [data-design="v3"] .rd-call-float__tip { background: var(--brand-700); } [data-design="v3"] .rd-call-float__tip::after { border-left-color: var(--brand-700); } /* ---- Chips & badges ---- */ [data-design="v3"] .rd-chip--active, [data-design="v3"] .rd-chip[aria-pressed="true"] { background: var(--v3-gradient); } [data-design="v3"] .rd-badge--brand { background: rgba(var(--brand-rgb), .12); color: var(--brand-700); } /* ---- Preloader ---- */ [data-design="v3"] .rd-preloader__bar { background: var(--v3-gradient); } /* ---- Dark theme v3 ---- */ [data-design="v3"][data-theme="dark"] body, [data-design="v3"].dark body { background-image: radial-gradient(70% 45% at 100% 0%, rgba(var(--brand-rgb), .12), transparent 55%), radial-gradient(50% 35% at 0% 100%, rgba(var(--brand-rgb), .08), transparent 50%); } [data-design="v3"][data-theme="dark"] .rd-card, [data-design="v3"].dark .rd-card, [data-design="v3"][data-theme="dark"] .rd-car-card, [data-design="v3"].dark .rd-car-card { background: var(--surface); border-color: color-mix(in srgb, var(--brand) 14%, var(--border)); } /* ---- Page shells (about, contact, services, blog) ---- */ [data-design="v3"] .rd-page-hero { background: var(--v3-gradient-soft); border-bottom: 1px solid var(--v3-glass-border); } [data-design="v3"] .rd-page-hero__title { letter-spacing: -0.03em; } [data-design="v3"] .rd-stat { border: 1px solid var(--v3-glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); } [data-design="v3"] .rd-stat__num { background: var(--v3-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- Swiper / carousel v3 ---- */ [data-design="v3"] .swiper-pagination-bullet-active { background: var(--brand); } [data-design="v3"] .swiper-button-next, [data-design="v3"] .swiper-button-prev { color: var(--brand); } /* ---- WhatsApp float (unchanged green, refined shadow) ---- */ [data-design="v3"] .rd-wa-float { box-shadow: 0 14px 36px -12px rgba(37, 211, 102, .45); } /* ---- Back to top v3 ---- */ [data-design="v3"] .rd-btt { background: var(--surface); border-color: var(--v3-glass-border); color: var(--brand); } [data-design="v3"] .rd-btt:hover { background: var(--v3-gradient); color: #fff; border-color: transparent; } /* ---- Cookie banner v3 ---- */ [data-design="v3"] .rd-cookie { background: var(--v3-glass); border-color: var(--v3-glass-border); backdrop-filter: saturate(180%) blur(18px); } [data-design="v3"] .rd-cookie__btn--accept { background: var(--v3-gradient); } /* ---- Command palette v3 ---- */ [data-design="v3"] .cmdk-item[data-selected="true"], [data-design="v3"] .cmdk-item:hover { background: rgba(var(--brand-rgb), .08); } [data-design="v3"] .cmdk-kbd { border-color: color-mix(in srgb, var(--brand) 20%, var(--border)); } /* ---- Compare bar v3 ---- */ [data-design="v3"] .rd-compare { background: var(--v3-glass); border-top-color: var(--v3-glass-border); } [data-design="v3"] .rd-compare__go { background: var(--v3-gradient); } /* ---- Hero cinematic v3 ---- */ [data-design="v3"] .hv-grade { background: linear-gradient(90deg, rgba(10, 10, 14, .94) 0%, rgba(var(--brand-rgb), .55) 42%, rgba(10, 10, 14, .30) 72%, rgba(10, 10, 14, .10) 100%), linear-gradient(0deg, rgba(10, 10, 14, .92) 0%, rgba(10, 10, 14, 0) 42%); } [data-design="v3"] .rd-cat::after { background: linear-gradient(180deg, rgba(11, 11, 15, .15) 0%, rgba(11, 11, 15, .55) 48%, rgba(var(--brand-rgb), .85) 100%); } [data-design="v3"] .rd-cta-band { background: var(--v3-gradient); border-radius: var(--r-2xl); } [data-design="v3"] .rd-iller { background: linear-gradient(135deg, var(--ink-800) 0%, var(--ink) 100%); border: 1px solid rgba(var(--brand-rgb), .12); } [data-design="v3"] .rd-il:hover { border-color: rgba(var(--brand-rgb), .45); } [data-design="v3"] .rd-testimonial::before { color: rgba(var(--brand-rgb), .12); } [data-design="v3"] .rd-campaign-hero, [data-design="v3"] .ab-hero { background: var(--v3-gradient-soft); border-bottom: 1px solid var(--v3-glass-border); } [data-design="v3"] .rd-contact-hero, [data-design="v3"] .rd-page-hero { background: var(--v3-gradient-soft); } [data-design="v3"] .rd-service-card:hover { border-color: color-mix(in srgb, var(--brand) 28%, var(--border-soft)); box-shadow: var(--shadow-md), 0 20px 40px -24px rgba(var(--brand-rgb), .18); } [data-design="v3"] .rd-service-card__ico { background: linear-gradient(135deg, var(--brand-50), var(--brand-100)); color: var(--brand); } [data-design="v3"] .rd-breadcrumb a:hover { color: var(--brand); } [data-design="v3"] .rd-accordion__trigger[aria-expanded="true"] { color: var(--brand); } [data-design="v3"] .rd-accordion__trigger[aria-expanded="true"] .rd-accordion__icon { color: var(--brand); } [data-design="v3"] .rd-marquee__track img { filter: grayscale(1) opacity(.65); transition: filter var(--t), opacity var(--t); } [data-design="v3"] .rd-marquee__track img:hover { filter: grayscale(0) opacity(1); } [data-design="v3"] .rd-newsletter { background: var(--v3-gradient); } [data-design="v3"] .rd-status-card { border: 1px solid var(--v3-glass-border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); } [data-design="v3"] .rd-status-card__badge { background: var(--v3-gradient); } [data-design="v3"] .rd-not-found { background: var(--v3-gradient-soft); } [data-design="v3"] .rd-not-found__code { background: var(--v3-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }