/* Shared “rental” hero band — same diagonal gradient as area-guide.css `.hero` (rental showcase home, area guide). Applied anywhere `hero--rental-art` / `header--rental-art` is used. */ .hero.hero--rental-art, .header.header--rental-art { background: linear-gradient(135deg, #1a2835 0%, #1a1c22 50%, #2c3e50 100%); } /* Circular cabin illustration — upper-right hero decoration (shared across templates). Layout box is always reserved to prevent CLS; the SVG itself is only attached after first paint by the inline `partials/_hero_decoration_loader.html` script, which adds `.hero-decoration-loaded` to . That keeps the 443 KB / 997-path SVG off the critical render path so LCP fires sooner. */ .hero.hero--rental-art::before, .header.header--rental-art::before { content: ""; position: absolute; border-radius: 50%; background: transparent no-repeat center / cover; background-position: 82% 42%; opacity: 0.14; width: min(400px, 76vw); height: min(400px, 76vw); top: -48px; right: -56px; z-index: 0; overflow: hidden; pointer-events: none; } .hero-decoration-loaded .hero.hero--rental-art::before, .hero-decoration-loaded .header.header--rental-art::before { background-image: url("../img/cfe7eb81-bbb2-4f65-b1d3-e9334ccb68df.svg"); } /* Trip planner header normally has a second glow orb — keep one treatment to match other heroes. */ .header.header--rental-art::after { display: none; } .hero.hero--rental-art > *, .header.header--rental-art > * { position: relative; z-index: 1; }