/* JOY Automart homepage brand/control hotfix — owner-approved 2026-08-11. Scope is intentionally limited to the public production hero. The existing hero, layout, diagnostics, carousel, routes and menu/theme behaviour remain unchanged. */ /* -------------------------------------------------------------------------- OBSOLETE LOGO PLATE + EXPERIENCE CENTER SIGNAGE — REMOVED 2026-08-12. The approved hero artwork carries its own brand marks; these pseudo-element overlays duplicated the logo at double scale and painted a signage box over the hero in both themes. They must never render again. -------------------------------------------------------------------------- */ html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__hero::before, html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__hero::after { content: none !important; display: none !important; border: 0 !important; background: none !important; box-shadow: none !important; text-shadow: none !important; pointer-events: none !important; } /* -------------------------------------------------------------------------- EXACT OWNER-SUPPLIED BURGUNDY / GOLD MENU — BOTH THEMES The image supplies the visible J / hamburger / sun. Existing DOM buttons stay in place as transparent interaction areas, so no behaviour is changed. -------------------------------------------------------------------------- */ html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-production-home__menu-card, html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-production-home__menu-card { position: absolute !important; z-index: 24 !important; top: 5.5% !important; right: 2% !important; bottom: auto !important; left: auto !important; width: 18.5% !important; height: auto !important; aspect-ratio: 2.65 / 1 !important; min-width: 0 !important; min-height: 0 !important; display: flex !important; align-items: stretch !important; overflow: hidden !important; border: 1px solid rgba(241,211,135,.98) !important; border-radius: 999px !important; background-color: #5d0619 !important; background-image: url('/homepage-owner-menu-20260811.jpg') !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; box-shadow: 0 0 4px rgba(255,233,174,.98), 0 0 13px rgba(224,194,122,.86), 0 0 30px rgba(208,168,79,.44), 0 16px 36px -18px rgba(0,0,0,.86) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: brightness(1.11) contrast(1.05) saturate(1.06) drop-shadow(0 0 5px rgba(255,225,149,.62)) drop-shadow(0 0 12px rgba(224,194,122,.42)) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Additional luminous response on the gold lettering / icon artwork. */ html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card:hover { filter: brightness(1.16) contrast(1.06) saturate(1.08) drop-shadow(0 0 7px rgba(255,235,183,.78)) drop-shadow(0 0 16px rgba(224,194,122,.58)) !important; } /* Hide the previously CSS-drawn visible icon layers. The real buttons remain visible to the accessibility tree and remain fully clickable. */ html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__menu-mark, html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__hamburger, html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__theme-button > svg, html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__theme-button > span { opacity: 0 !important; visibility: hidden !important; } html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__menu-button, html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__theme-button { position: relative !important; z-index: 2 !important; height: 100% !important; /* These were min-width/min-height 0, which overrode the 52px floor in homepage-hero.css and left the theme toggle 38.7px wide at 390px (35.7px at 360px) — under the 44px touch-target contract the homepage test enforces. The card keeps its painted geometry; only the split between the two buttons changes, and the menu button has ample room to absorb it. */ min-width: 44px !important; min-height: 44px !important; margin: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; cursor: pointer !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Match the visual split in the supplied menu artwork. */ html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__menu-button { flex: 0 0 72% !important; width: 72% !important; padding: 0 !important; } html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card .joy-production-home__theme-button { flex: 0 0 28% !important; width: 28% !important; padding: 0 !important; } html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-button:focus-visible, html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__theme-button:focus-visible { outline: 3px solid #e0c27a !important; outline-offset: -4px !important; box-shadow: inset 0 0 14px rgba(224,194,122,.26) !important; } /* -------------------------------------------------------------------------- MOBILE / FOLD / PORTRAIT Same design, smaller scale only — no alternate styling. -------------------------------------------------------------------------- */ @media (max-width: 1100px) and (orientation: portrait), (max-width: 915px) { html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-production-home__menu-card, html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-production-home__menu-card { top: 1.6% !important; right: 3.6% !important; width: 35% !important; height: auto !important; aspect-ratio: 2.65 / 1 !important; min-width: 0 !important; min-height: 44px !important; } } @media (prefers-reduced-motion: reduce) { html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__menu-card { transition: none !important; } } /* -------------------------------------------------------------------------- JOY VELLOX CARD — OWNER-APPROVED LIGHT + DARK MODE, 2026-08-11 Light mode follows reference 1; dark mode follows reference 2. The VELLOX card keeps a ruby/crimson face in both themes with a continuous neon border. -------------------------------------------------------------------------- */ html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox { --vellox-neon: #ff3f66; --vellox-neon-hot: #ff174f; --vellox-gold: #e0b957; --vellox-champagne: #f1d48a; border: 2px solid var(--vellox-neon) !important; color: var(--vellox-gold) !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::before { content: ""; position: absolute; inset: 3px; z-index: 0; pointer-events: none; border: 1px solid rgba(255,220,228,.58); border-radius: calc(22px - 3px); box-shadow: inset 0 0 18px rgba(255,43,88,.18); } html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox > * { position: relative; z-index: 1; } html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-infra-card.joy-infra-card--vellox { background: radial-gradient(130% 170% at 20% -10%, rgba(255,58,101,.46) 0%, transparent 45%), radial-gradient(90% 140% at 96% 100%, rgba(255,37,82,.24) 0%, transparent 48%), linear-gradient(115deg, #c4003c 0%, #93002b 24%, #62001b 57%, #36000d 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 0 30px rgba(255,23,79,.14), 0 0 0 1px rgba(255,186,201,.52), 0 0 16px rgba(255,47,88,.96), 0 0 40px rgba(255,23,79,.56), 0 20px 42px rgba(127,13,44,.24) !important; } html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-infra-card.joy-infra-card--vellox { border-color: var(--vellox-neon) !important; background: radial-gradient(120% 160% at 18% 0%, rgba(255,28,77,.24) 0%, transparent 43%), radial-gradient(90% 130% at 94% 100%, rgba(255,23,79,.15) 0%, transparent 48%), linear-gradient(115deg, #820022 0%, #570015 28%, #33000c 60%, #190005 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 28px rgba(255,23,79,.12), 0 0 0 1px rgba(255,100,128,.38), 0 0 15px rgba(255,42,84,.86), 0 0 38px rgba(255,23,79,.50), 0 22px 46px rgba(0,0,0,.48) !important; } html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox:hover, html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox:focus-visible { border-color: #ff6f8e !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 0 34px rgba(255,23,79,.16), 0 0 0 1px rgba(255,193,205,.46), 0 0 20px rgba(255,49,91,1), 0 0 46px rgba(255,23,79,.72), 0 22px 48px rgba(83,0,22,.34) !important; } html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__icon--vellox { border: 1px solid rgba(255,82,113,.72) !important; border-radius: 28% !important; background: linear-gradient(145deg, #18090c, #070506) !important; box-shadow: inset 0 0 0 1px rgba(224,185,87,.22), 0 0 16px rgba(255,39,82,.36) !important; } html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__icon--vellox img { border-radius: 28% !important; } /* VELLOX headline — the card's own glowing crimson neon, distinct from the signal-green headlines on the open platform boxes. */ html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__copy strong { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #ff7d97 !important; -webkit-text-fill-color: #ff7d97 !important; text-shadow: 0 0 8px rgba(255,63,102,.85), 0 0 22px rgba(255,23,79,.55), 0 0 44px rgba(255,23,79,.30); } html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__copy small { color: #e9c56d !important; } html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__badge { border: 1px solid rgba(255,73,109,.88) !important; color: var(--vellox-champagne) !important; background: linear-gradient(180deg, rgba(76,0,17,.96), rgba(32,0,8,.96)) !important; box-shadow: 0 0 12px rgba(255,40,84,.34), inset 0 1px 0 rgba(255,255,255,.08) !important; } html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox .joy-infra-card__arrow { color: var(--vellox-champagne) !important; filter: drop-shadow(0 0 6px rgba(224,185,87,.30)); } @media (max-width: 820px) { html body #root [data-testid="landing-page"] .joy-production-home .joy-infra-card.joy-infra-card--vellox::before { border-radius: calc(18px - 3px); } }