/* ================================================================ ADVL Theme CSS — Adventure Lifestyle Sites Mobile-first. Breakpoints: 769px (tablet), 1025px (desktop), 1200px (wide) Loaded via Theme cssBinary — loads AFTER adv-header.css and footer.css in the , so same-specificity rules win by source order. SRP styles: adventure-inventory-search.css (on Adventure Inventory V2) VDP styles: adventure-inventory-detail.css (on Inventory Detail) ================================================================ */ /* ================================================================ 0. GLOBAL DEFAULTS & GENERIC HELPERS (Merged from homepage-styles.css) ================================================================ */ /* --- Z-index layers (centralized) --- 1 = site-content (base page content) 5 = text-us widget (floats above content) 10 = site-header (nav, fixed/sticky) 15 = mobile header (sticky on mobile) 20 = nav dropdowns (desktop) 30 = modals (quote, price alert, calculator) 40 = mobile filter overlay (full-screen sheet) */ body { margin: 0; background-color: var(--background); } button, input, select, textarea { font-family: inherit; } .site-header { position: relative; z-index: 10; } .hover-cursor { cursor: pointer; } .toplink.yellow-link { color: yellow; } /* Text-us widget — floats above content, below header */ #revvable-revtext { z-index: 5; } #revvable-revmodal { z-index: 30; } /* ── dotCMS Form Styling ( web component) ── */ /* Form pages — light background, centered narrow content */ body:has(dot-form) { background-color: #f5f5f5; } .site-content:has(dot-form) { max-width: 700px; } .site-content:has(dot-form) h1 { margin-top: 32px; } .site-content:has(dot-form) .content-block p { margin-top: 4px; } /* Form card — white container */ dot-form.hydrated { display: block; background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); padding: 24px; color: #000; } /* Reset inner form padding */ dot-form form { padding: 0; } /* Field wrappers */ dot-form .dot-pristine, dot-form .dot-dirty { margin-bottom: 16px; } /* Labels */ dot-form label { display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 6px; } /* Text inputs */ dot-form input[type="text"], dot-form input[type="email"], dot-form input[type="tel"], dot-form input:not([type="submit"]):not([type="reset"]):not([type="button"]), .dot-pristine input { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; color: #000; background: #fff; box-sizing: border-box; transition: border-color 0.2s; } dot-form input:focus, .dot-pristine input:focus { outline: none; border-color: var(--accent, #0096d7); box-shadow: 0 0 0 2px rgba(0, 150, 215, 0.15); } /* Textareas */ dot-form textarea { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; color: #000; background: #fff; box-sizing: border-box; min-height: 100px; resize: vertical; font-family: inherit; transition: border-color 0.2s; } dot-form textarea:focus { outline: none; border-color: var(--accent, #0096d7); box-shadow: 0 0 0 2px rgba(0, 150, 215, 0.15); } /* Section dividers (line divider fields) */ dot-form hr { border: none; border-top: 1px solid #e5e7eb; margin: 24px 0 16px; } /* Buttons */ .dot-form__buttons { display: flex; gap: 12px; margin-top: 24px; justify-content: flex-start; } .dot-form__buttons button { padding: 10px 24px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; } .dot-form__buttons button[type="reset"], .dot-form__buttons button:first-child { background: #fff; border: 1px solid #d1d5db; color: #333; } .dot-form__buttons button[type="reset"]:hover, .dot-form__buttons button:first-child:hover { background: #f5f5f5; } .dot-form__buttons button[type="submit"], .dot-form__buttons button:last-child { background: var(--accent, #0096d7); border: 1px solid var(--accent, #0096d7); color: #fff; } .dot-form__buttons button[type="submit"]:hover, .dot-form__buttons button:last-child:hover { opacity: 0.9; } /* Generic button */ .button { background-color: var(--foreground); color: var(--background); padding: 10px; border-radius: 15px; border: 2px solid var(--background); } .button:hover { color: var(--accent); } /* Edit mode (dotAdmin) */ .widget-help { height: 20px; max-height: 20px; width: 20px; max-width: 20px; display: inline-block; overflow: hidden; } .help-question { height: 20px; width: auto; } .right-edit { float: right; max-width: 200px; background-color: #ddffff; } .widget-help:hover { width: 100%; max-width: max-content; display: block; background-color: #fff; color: #000; border-radius: 35px; border: 2px solid #000; padding: 10px; font-size: 16px; max-height: max-content; height: auto; } /* Brand carousel text */ .brand-carousel-text { display: none; } /* --- Focus styles (accessibility) --- */ :focus-visible { outline: 2px solid var(--accent, #0096d7); outline-offset: 2px; } .skip-link { position: absolute; top: -100%; left: 16px; z-index: 100; padding: 8px 16px; background: var(--accent, #0096d7); color: #fff; font-weight: 700; text-decoration: none; border-radius: 0 0 4px 4px; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ================================================================ 1. MOBILE HEADER COMPONENT ================================================================ */ .als-mobile-header { background-color: #111; position: sticky; top: 0; z-index: 15; } .als-mobile-top { text-align: center; padding: 8px 16px; } .als-mobile-logo { height: 40px; width: auto; } .als-mobile-bar { display: flex; align-items: center; padding: 8px 16px; gap: 12px; border-top: 1px solid #333; } .als-mobile-menu-btn { display: flex; align-items: center; gap: 8px; background: none; border: none; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; padding: 8px 0; min-height: 44px; } .als-hamburger-icon { display: flex; flex-direction: column; gap: 4px; width: 20px; } .als-hamburger-icon span { display: block; height: 2px; background: #fff; border-radius: 1px; transition: transform 0.3s, opacity 0.3s; } .als-menu-label { font-size: 14px; } .als-mobile-phone, .als-mobile-location { color: #fff; font-size: 13px; text-decoration: none; padding: 8px 12px; min-height: 44px; display: flex; align-items: center; gap: 6px; } .als-mobile-phone i, .als-mobile-location i { color: var(--accent, #0096d7); } .als-mobile-phone { margin-left: auto; } /* Mobile Nav Panel */ .als-mobile-nav { background: #111; max-height: 80vh; overflow-y: auto; } .als-mobile-nav-list { list-style: none; margin: 0; padding: 0; } .als-mobile-nav-item { border-bottom: 1px solid #222; padding: 14px 16px; color: #fff; cursor: pointer; } .als-mobile-nav-link { font-size: 16px; font-weight: 600; } .als-mobile-chevron { float: right; font-size: 12px; color: var(--accent, #0096d7); transition: transform 0.3s; } .mcselect .als-mobile-chevron { transform: rotate(180deg); } .mcselect { border-left: 3px solid var(--accent, #0096d7); } .als-mobile-subnav { list-style: none; padding: 0; margin: 0; } .als-mobile-subnav.mclosed { height: 0; overflow: hidden; } .als-mobile-subnav-item { padding: 0; } .als-mobile-subnav-link { display: block; padding: 10px 16px; color: #ccc; text-decoration: none; font-size: 15px; } .als-mobile-subnav-link:hover { background: #222; color: var(--accent, #0096d7); } /* ================================================================ 2. BASE STYLES (Mobile-first — no media query = mobile default) ================================================================ */ /* --- Visibility: base = mobile nav shown, desktop nav hidden --- */ .als-desktop-header { display: none; } .mobile-show { display: block; } /* --- Page content containment --- */ .site-content { max-width: 1250px; margin-left: auto; margin-right: auto; padding: 16px 16px 24px; position: relative; z-index: 1; } /* Full-width pages (set via Page allowFullWidth field) */ .allowFull > .site-content { max-width: none; padding: 0; } .allowFull .content-block { max-width: 1250px; margin-left: auto; margin-right: auto; padding: 0 16px; } .allowFull .content-columns { max-width: none; padding: 0 16px; } .allowFull .carry-handle.container { max-width: none; } /* --- Accent colors & global --- */ .als-search-button, .nals-search-button, .als-payment { background-color: var(--accent, #0096d7); } .navdown { color: var(--accent, #0096d7); } .bg-black-important-really { background-color: #000; } .backgroundNeeded { background-color: rgba(0,0,0,0.85); } /* --- Hero & Search --- */ .hero video, .hero-no-overlay img { width: 100%; height: auto; } .als-blacker { height: auto; background-color: #000; display: flow-root; } .als-holder { max-width: 100%; margin: 0 auto; border: none; border-radius: 0; padding: 16px; padding-bottom: 20px; background-color: #000; } .als-holder > img { width: 220px; display: block; margin: 0 auto 12px; } .als-select-holder { display: block; } .als-select-wrapper, .nals-select-wrapper { width: 100%; max-width: 100%; margin-bottom: 8px; display: flex; align-items: stretch; } .nals-text { flex: 1; min-width: 0; border-radius: 4px 0 0 4px; border: 1px solid #555; border-right: none; padding: 10px 14px; font-size: 14px; } .nals-search-button { border-radius: 0 4px 4px 0; padding: 10px 16px; min-width: 48px; border: none; cursor: pointer; color: #fff; font-size: 16px; } .als-payment { width: 100%; padding: 12px 16px; border: none; border-radius: 4px; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 1px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; } /* --- Content area --- */ .page-wrapper { padding: 0; margin-top: 0; } /* --- Category tiles --- */ .box-link-holder { display: block; padding: 0; margin-bottom: 32px; } .box-link-box { border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #f5f5f5; width: 100%; min-height: 180px; margin-bottom: 12px; } .box-link-box:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } .box-text-holder { background: rgba(30,30,30,0.8); padding: 10px 12px; text-align: center; } .box-headline { font-weight: 700; font-size: 16px; color: #fff; } .box-text { font-size: 13px; color: #ccc; } .text-bsizer-5 { margin-top: 0; margin-bottom: 0; } /* --- Overhang tiles — restore graphic-links.css defaults --- */ /* .site-content > * resets margin-top; use higher specificity to preserve overlap */ .box-link-holder.overhang { display: flex; flex-wrap: wrap; justify-content: space-evenly; margin-top: 0; } .overhang .box-link-box { background-color: transparent; border-radius: 0; overflow: visible; border: none; background-size: auto 200px; background-position: top; min-height: 200px; margin-bottom: 16px; width: auto; flex-basis: 100%; } .overhang .box-link-box:hover { transform: translateX(-15px); box-shadow: none; } .overhang .box-text-holder { background: none; padding: 8px 4px; text-align: center; } .overhang .box-headline { color: var(--foreground, #000); font-size: 18px; font-weight: 700; } .overhang .box-text { color: #666; font-size: 14px; } .box-link-holder + .content-block { margin-top: 64px; } .content-block { margin-bottom: 32px; margin-top: 0; } /* --- CTA tiles --- */ .box-link-box.fullsize { background-size: cover; background-position: center; background-color: #333; position: relative; min-height: 100px; margin-bottom: 8px; } .box-link-box.fullsize .box-text-holder { background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 100%); position: absolute; bottom: 0; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .box-link-box.fullsize .box-headline { color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 3px; text-shadow: 0 2px 12px rgba(0,0,0,0.6); } .box-link-box.fullsize:hover .box-text-holder { background: linear-gradient(135deg, rgba(0,150,215,0.7) 0%, rgba(0,100,170,0.5) 100%); } /* --- Brand carousel --- */ .carry-handle { display: flex; align-items: center; padding: 32px 16px; margin: 32px auto; } .carry-handle > .flex.justify-center { display: contents; } #prevBtn { order: -1; } #nextBtn { order: 1; } #brandCarousel { flex: 1; order: 0; width: auto; min-width: auto; } #brandCarouselInner { flex-wrap: nowrap; } #brandCarousel .flex-shrink-0 { min-width: 100%; width: 100%; } /* --- Welcome / text sections --- */ .content-columns { display: block; padding: 0; margin: 24px 0; } /* --- Global heading styles (mobile-first) --- */ h1 { color: var(--accent, #0096d7); font-size: 20px; line-height: 1.3; margin-top: 12px; } h2 { font-size: 18px; font-weight: 700; color: #222; margin-top: 20px; margin-bottom: 8px; } h2 a { color: var(--accent, #0096d7); text-decoration: none; } h2 a:hover { text-decoration: underline; } h3 { font-size: 17px; font-weight: 700; color: #222; margin-top: 24px; margin-bottom: 8px; } /* Block Editor nests

inside

  • — reset the extra spacing */ li p { margin: 0; padding-bottom: 0; } h4 { font-size: 16px; margin-top: 4px; } p { font-size: 16px; line-height: 1.6; color: #444; } /* --- Secondary page elements (iframes, forms, standalone headings) --- */ /* Constrain content + iframe width on text-heavy pages */ .site-content > .content-block, .site-content > iframe { max-width: 900px; } /* Columns layout needs full width */ .site-content > .content-block:has(.content-columns) { max-width: none; } .site-content > iframe { display: block; width: 100%; border: none; border-radius: 8px; min-height: 70vh; } .site-content > h1 { color: var(--accent, #0096d7); font-size: 22px; font-weight: 700; margin-bottom: 16px; } .site-content > div[style*="float"] { float: none !important; width: 100% !important; padding: 0 !important; margin-bottom: 16px; } .site-content > div[style*="float"] iframe { width: 100% !important; height: 300px !important; border-radius: 8px; } .content-col.image-text-second { margin-top: 16px; } .content-col-img { width: 100%; border-radius: 8px; } /* --- Maps & Hours page --- */ .site-content .footer-hour-line { display: flex; align-items: center; height: 32px; } .site-content .footer-day { width: 100px; font-size: 16px; color: #000; } .site-content .footer-hour-closing { font-size: 16px; color: #000; padding-left: 16px; } /* Remove inline padding-left on hours column */ div[style*="padding-left"]:has(.footer-hour-line) { padding-left: 0 !important; } /* Map iframe inside the hours widget */ .site-content iframe[src*="google.com/maps"] { border-radius: 10px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); } /* --- Map section --- */ .content-block--centered { max-width: 100%; padding: 0; } .content-block--centered h2 { font-size: 22px; } .content-block--centered img { max-width: 100%; height: auto; display: block; margin: 0 auto; } .site-content > * { margin-top: 0; } /* --- Footer --- */ .footer-wrapper { margin-top: 32px; } .footer-holder { padding: 0; } .footer-parts { flex-wrap: wrap; } .footer-part { flex-basis: 100%; margin-bottom: 20px; border-left: none; padding-left: 0; text-align: left; } .footer-part-header { font-size: 18px; font-weight: 700; margin-bottom: 4px; color: #fff; } .footer-link a { color: #ccc; text-decoration: none; font-size: 14px; line-height: 2; } .footer-link a:hover { color: var(--accent, #0096d7); } .footer-contact-line { color: #ccc; font-size: 14px; line-height: 2; } .footer-contact-line a { color: #ccc; text-decoration: none; } .footer-contact-line a:hover { color: var(--accent, #0096d7); } .footer-bottom-line { border-top: 1px solid #333; padding: 16px; display: flex; flex-direction: column; text-align: center; gap: 8px; font-size: 13px; color: #888; } .footer-bottom-line a { color: #888; text-decoration: none; } .footer-powered a { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .social a { color: #fff; font-size: 24px; margin-right: 12px; } .social a:hover { color: var(--accent, #0096d7); } .footer-logo-holder { text-align: left; margin-bottom: 16px; } .footer-map iframe { height: 200px; } .footer-socials { text-align: left; } .foot-hours, .foot-contact, .foot-links { border: none; } /* --- Other mobile defaults --- */ .bsizer-1, .bsizer-2 { min-height: 200px; } .push-left { margin-left: 0; } .callout { display: none; } .featured-inventory-holder { display: block; } .w-1\/5 { width: 150px; } /* ================================================================ 3. MOBILE + TABLET (max-width: 1024px) Mobile nav stays visible. Hero overlap disabled. !important needed only for inline style overrides. ================================================================ */ @media (max-width: 1024px) { .page-hero { margin-top: 0 !important; padding: 0 !important; margin-bottom: 0 !important; position: relative; } #page-hero { margin-top: 0 !important; padding: 0 !important; margin-bottom: 0 !important; } /* Ensure hero video is visible at all tablet sizes */ .hero, .hero video, .hero-no-overlay { display: block; width: 100%; } /* Eliminate inline-element gap below video/image */ .hero, .hero-no-overlay { line-height: 0; font-size: 0; margin: 0; } .hero video, .hero-no-overlay img { vertical-align: bottom; } /* Close gap between hero and search */ .als-blacker { margin-top: 0; margin-bottom: 16px; } .hero-title, .hero-subtitle { position: relative !important; top: auto !important; left: auto !important; padding: 0; margin: 0; white-space: normal; text-align: center; } .hero-title { font-size: 24px; line-height: 32px; } .hero-subtitle { font-size: 16px; line-height: 24px; } } /* ================================================================ 4. TABLET+ LAYOUT (min-width: 769px) Grid tiles, CTA, footer columns, carousel. Nav and hero overlay stay mobile until 1025px. ================================================================ */ @media (min-width: 769px) { /* Form card — more padding on tablet+ */ dot-form.hydrated { padding: 40px; } .site-content:has(dot-form) { max-width: 760px; } /* Category tiles — flex grid */ .box-link-holder { display: flex; padding: 0; } .box-link-box { width: 95%; min-height: auto; margin-bottom: 0; background-size: 50%; background-position: right; background-color: transparent; box-sizing: border-box; } /* Overhang tiles — back to row, all items fit in one line */ .overhang .box-link-box { flex: 1 1 0; min-width: 0; margin: 0; padding: 8px; } /* CTA tiles */ .box-link-box.fullsize { min-height: 160px; margin-bottom: 0; } .box-link-box.fullsize .box-headline { font-size: 24px; } /* Brand carousel */ #brandCarousel .flex-shrink-0 { min-width: 20%; width: auto; } #brandCarousel { overflow: hidden; } /* Headings — tablet+ */ h1 { font-size: 28px; margin-top: 20px; line-height: 1.2; } h2 { font-size: 24px; } p { font-size: 16px; line-height: 1.7; } /* Maps & Hours — wider day column on tablet+ */ .footer-day { width: 112px; } /* Map */ .content-block--centered { max-width: none; } .content-block--centered h2 { font-size: 32px; } /* Secondary page — maps/hours restore side-by-side */ .site-content > div[style*="float"] { float: left !important; width: 49% !important; } .site-content > div[style*="float"] iframe { height: 50vh !important; } /* Footer — multi-column */ .footer-parts { flex-wrap: nowrap; } .footer-part { flex-basis: 25%; margin-bottom: 0; border-left: 1px solid #fff; padding-left: 20px; } .foot-links { border-left: none; padding-left: 0; } .footer-bottom-line { flex-direction: row; text-align: left; justify-content: space-between; } .footer-map iframe { height: auto; } /* Other layout resets */ .bsizer-1, .bsizer-2 { min-height: auto; } .callout { display: block; } .featured-inventory-holder { display: flex; } .w-1\/5 { width: auto; } .site-content > * { margin-top: auto; } } /* ================================================================ 5. TABLET ONLY (769px – 1024px) ================================================================ */ @media (min-width: 769px) and (max-width: 1024px) { /* Category tiles — 3 per row at tablet */ .box-link-box.bsizer-5 { flex-basis: 31%; min-height: 200px; } #brandCarousel .flex-shrink-0 { min-width: 25%; } } /* ================================================================ 6. FULL DESKTOP (min-width: 1025px) Desktop nav, hero overlay, search overlay, columnar layout. ================================================================ */ @media (min-width: 1025px) { /* Switch to desktop nav */ .als-desktop-header { display: block; } .mobile-show { display: none; } /* Desktop header — absolute position over hero, no fixed-px margin hack */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; } .als-desktop-header { background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 100%); } /* Override adv-header.css hardcoded -125px — no longer needed with absolute header */ #page-hero { margin-top: 0; } .mobile-hidden { min-height: 0; } .als-desktop-header.bg-black-important-really { background: #000; } .als-desktop-header.backgroundNeeded { background: rgba(0,0,0,0.9); } /* No-hero pages — header flows normally so content isn't hidden behind it */ .site-header:has(.bg-black-important-really), .site-header:has(.backgroundNeeded) { position: relative; } /* Logo — constrain to container, prevent overflow into nav */ .header-logo { max-width: 250px; flex-shrink: 0; } .toplogo { width: 100%; height: auto; display: block; } /* Compact nav for lower desktop range */ .header-nav { gap: 10px; } .toplink { color: #fff; font-size: 13px; text-decoration: none; } .toplink:hover { color: var(--accent, #0096d7); } .navtopper:hover .nav-sublists { display: block; } .nav-sublists { background-color: #333; z-index: 20; padding: 0; width: max-content; } .sub-menu { padding: 0; margin: 0; } .secnav { color: #fff; font-size: 14px; padding: 8px 15px; margin: 0; max-width: none; display: block; white-space: nowrap; text-decoration: none; box-sizing: border-box; } .secnav:hover { background-color: #555; color: #fff; } .header-address { font-size: 12px; } .header-address a { color: #fff; text-decoration: none; } .header-address a:hover { color: var(--accent, #0096d7); } /* Hero & Search — restore desktop overlay */ .hero, .hero-no-overlay { line-height: 0; font-size: 0; } .hero video, .hero-no-overlay img { display: block; } .als-blacker { margin-top: 0; margin-bottom: 0; background-color: transparent; } .als-holder { max-width: 80%; margin: max(-35vw, -50vh) auto calc(min(35vw, 50vh) - 200px) auto; padding: 25px 10px; border: 1px solid white; border-radius: 10px; background-color: transparent; } .als-holder > img { width: 400px; display: block; margin: 0 auto; } .als-select-holder { display: flex; justify-content: space-evenly; margin-top: 25px; } .als-select-wrapper, .nals-select-wrapper { width: auto; max-width: 270px; margin-bottom: 0; } /* Overhang overlap — only at desktop where hero overlay is active */ .box-link-holder.overhang { margin-top: -100px; } /* Content area */ .page-wrapper { padding: 0; margin-top: 0; } /* Welcome section — side by side */ .content-columns { display: flex; gap: 32px; padding: 0; align-items: flex-start; margin-top: 64px; } .content-col h1 { margin-top: 0; } .content-col.image-text-first { flex: 1; order: 2; } .content-col.image-text-second { flex: 0 0 40%; margin-top: 0; order: 1; } } /* Mobile Filter Overlay — moved to adventure-inventory-search.css so any site using the SRP widget gets it automatically. */ /* ================================================================ 7. WIDE DESKTOP (min-width: 1200px) Restore nav sizing once there's room. ================================================================ */ @media (min-width: 1200px) { .header-nav { gap: 20px; } .toplink { font-size: 15px; } .header-address { font-size: 14px; } }