/* * JOY Automart homepage LIGHT MODE parity lock — 2026-08-23 rev 2. * * Owner direction: * - Follow the approved dark-mode desktop proportions. * - Make the top-left JOY logo visibly smaller inside its existing baked plate. * - Match the VELLOX/menu/theme control footprint to dark mode. * - Fit the current Auto ecosystem navigation on one line. * - Keep the baked Experience Centre signage as a protected no-text zone. * * Light mode only. Dark mode and portrait/mobile contracts remain untouched. */ /* -------------------------------------------------------------------------- DESKTOP LIGHT — visible correction for the baked top-left logo -------------------------------------------------------------------------- */ @media (min-width: 1024px) { /* The light hero artwork contains the old oversized JOY logo inside the top-left dark plate. Cover only that plate interior and redraw the official JOY wordmark at the restrained dark-mode scale. */ html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-production-home__hero::before { content: "" !important; display: block !important; position: absolute !important; z-index: 18 !important; pointer-events: none !important; border: 1px solid rgba(128, 139, 148, .20) !important; border-radius: clamp(14px, 1.4vw, 22px) !important; background-image: url('/joy-automart-wordmark.png'), linear-gradient(155deg, rgba(31, 37, 42, .99) 0%, rgba(19, 26, 31, .985) 55%, rgba(28, 37, 43, .99) 100%) !important; background-repeat: no-repeat, no-repeat !important; background-position: center center, center center !important; background-size: 58% auto, 100% 100% !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px -24px rgba(0,0,0,.34) !important; filter: none !important; } /* Current secondary rail is VELLOX / ECOSYSTEM / INVESTOR / JOURNAL. Keep it below the Experience Centre sign instead of in the sign band. */ html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-nav__secondary { top: 46% !important; right: clamp(18px, 2.6vw, 42px) !important; bottom: auto !important; left: auto !important; width: min(23vw, 320px) !important; max-width: 320px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(6px, .58vw, 10px) !important; justify-content: stretch !important; overflow: visible !important; transform: translateY(-50%) !important; } html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-nav__secondary .joy-home-nav__right-link { width: 100% !important; min-width: 0 !important; min-height: clamp(36px, 3vw, 46px) !important; justify-content: flex-start !important; gap: clamp(6px, .55vw, 9px) !important; padding: clamp(6px, .48vw, 8px) clamp(8px, .7vw, 12px) !important; font-size: clamp(8px, .62vw, 10px) !important; letter-spacing: .07em !important; } } /* -------------------------------------------------------------------------- LAPTOP / 16:10 BROWSER SURFACE -------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1439px) { /* Light hero PLATE geometry moved to homepage-hero-plate-geometry-unified-20260827.css. */ html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-production-home__hero::before { top: 5.6% !important; left: 2.6% !important; width: 22.8% !important; height: 13.1% !important; background-size: 55% auto, 100% 100% !important; } /* Exact dark-mode laptop footprint. */ html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-production-home__menu-card { top: 5.3% !important; right: 2.6% !important; bottom: auto !important; left: auto !important; width: 16.5% !important; height: 8.2% !important; aspect-ratio: auto !important; min-width: 0 !important; min-height: 44px !important; } /* Seven current top entries: AUTO EXCHANGE, AUTORETAIL, AUTOCOMMERCE, AUTOSERVICE, AUTO EXPERIENCE, BOOK, ASK ONI. */ html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-nav__primary { top: 2.35% !important; left: 51% !important; width: min(55vw, 760px) !important; min-height: clamp(39px, 3.35vw, 48px) !important; gap: clamp(0px, .18vw, 3px) !important; padding: clamp(4px, .38vw, 6px) clamp(7px, .55vw, 10px) !important; transform: translateX(-50%) !important; } html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-nav__primary li { flex: 0 1 auto !important; min-width: 0 !important; } html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-nav__primary a, html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-nav__primary .joy-home-nav__ask-oni { min-height: 32px !important; gap: 4px !important; padding: 5px clamp(5px, .48vw, 8px) !important; font-size: clamp(7.8px, .62vw, 9.6px) !important; letter-spacing: .045em !important; white-space: nowrap !important; } html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-nav__primary .joy-home-nav__ask-oni svg { width: 12px !important; height: 12px !important; } } /* -------------------------------------------------------------------------- DESKTOP / TV — native 16:9 dark-reference geometry -------------------------------------------------------------------------- */ @media (min-width: 1440px) { html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-production-home__hero { aspect-ratio: 16 / 9 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-production-home__hero::before { top: 5.4% !important; left: 2.35% !important; width: 22.2% !important; height: 13.2% !important; background-size: 54% auto, 100% 100% !important; } /* Exact dark-mode desktop footprint. */ html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-production-home__menu-card { top: 5.4% !important; right: 2.2% !important; bottom: auto !important; left: auto !important; width: 15.3% !important; height: 8.8% !important; aspect-ratio: auto !important; min-width: 0 !important; min-height: 44px !important; } html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-nav__primary { top: 2.3% !important; left: 50.5% !important; width: min(58vw, 920px) !important; min-height: clamp(42px, 3.5vw, 52px) !important; gap: clamp(1px, .25vw, 4px) !important; padding: clamp(5px, .4vw, 7px) clamp(8px, .7vw, 12px) !important; transform: translateX(-50%) !important; } html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-nav__primary li { flex: 0 1 auto !important; min-width: 0 !important; } html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-nav__primary a, html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-nav__primary .joy-home-nav__ask-oni { min-height: 34px !important; gap: 5px !important; padding: 6px clamp(6px, .58vw, 10px) !important; font-size: clamp(8.7px, .62vw, 10.5px) !important; letter-spacing: .055em !important; white-space: nowrap !important; } html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-nav__primary .joy-home-nav__ask-oni svg { width: 13px !important; height: 13px !important; } } /* Portrait/mobile intentionally stays on the existing responsive contract. */ /* -------------------------------------------------------------------------- OWNER COLOR RESTORATION — LIGHT + DARK, 2026-08-23 Restore the original rich metallic-gold platform typography. Keep JOY VELLOX on its approved ruby/crimson face with the continuous red neon line, but return all VELLOX typography and action marks to gold. -------------------------------------------------------------------------- */ html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card:not(.joy-infra-card--vellox) .joy-infra-card__copy strong { background: linear-gradient(180deg, #fff3bb 0%, #f2cf72 27%, #d7a631 56%, #f7da82 79%, #bd8521 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: #e7b94d !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 1px 0 rgba(255,248,214,.28), 0 0 8px rgba(224,185,87,.22) !important; } html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card:not(.joy-infra-card--vellox) .joy-infra-card__icon, html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card:not(.joy-infra-card--vellox) .joy-infra-card__arrow, html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card:not(.joy-infra-card--vellox) .joy-infra-card__badge { color: #e3b650 !important; text-shadow: 0 0 7px rgba(224,185,87,.24) !important; } html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox { border-color: #ff3f66 !important; color: #e0b957 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 28px rgba(255,23,79,.12), 0 0 0 1px rgba(255,129,151,.34), 0 0 14px rgba(255,36,82,.92), 0 0 34px rgba(255,23,79,.60), 0 18px 42px rgba(83,0,22,.28) !important; } html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__copy strong { background: linear-gradient(180deg, #fff0ad 0%, #f5cf69 28%, #d6a12b 56%, #f5d77e 78%, #b77b1b 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: #e0b957 !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 1px 0 rgba(255,248,214,.26), 0 0 8px rgba(240,198,92,.28), 0 0 18px rgba(224,185,87,.16) !important; } html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__copy small, html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__badge, html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__arrow { color: #f0cf78 !important; -webkit-text-fill-color: #f0cf78 !important; text-shadow: 0 0 7px rgba(224,185,87,.25) !important; } html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-infra-card.joy-infra-card--vellox, html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-infra-card.joy-infra-card--vellox { border-color: #ff3f66 !important; }