/* ════════════════════════════════════════════════════════════════════ DEALER THEMES — 4 RADICAL VISUAL IDENTITIES Every theme completely transforms colors, fonts, layout, and structure Applied via: ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ THEME 1 — MOTORS CLASSICS Identity: Art-déco noir, 1950s luxury, champagne gold, italic serif Use for: Classic cars, sedans, vintage automobiles Fonts: Cormorant Garamond (display) + DM Sans (body) Palette: Near-black background, champagne gold accent ════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=DM+Sans:wght@300;400;500;600&display=swap'); [data-theme="motors"] { --gold: #C8A96E; --gold-l: #DBC48A; --gold-d: #A68840; --gold-bg: rgba(200,169,110,.08); --gold-bg2: rgba(200,169,110,.16); --gold-glow: 0 0 30px rgba(200,169,110,.35); --bg: #0A0805; --bg2: #100D09; --bg3: #18140F; --card: #1E1910; --card2: #252017; --border: #2A2318; --border2: #3A3224; --t1: #F8F3EA; --t2: #D8CEBC; --t3: #9C9282; --t4: #6A6052; --red: #C43A3A; --green: #3A8850; --blue: #3060A0; --ff-d: 'Cormorant Garamond', Georgia, serif; --ff-h: 'Cormorant Garamond', serif; --ff-b: 'DM Sans', sans-serif; --ease: cubic-bezier(.25,.46,.45,.94); } [data-theme="motors"] body { font-family: 'DM Sans', sans-serif; } /* MOTORS: Nav */ [data-theme="motors"] .nav { background: rgba(10,8,5,.90) !important; border-bottom: 1px solid rgba(200,169,110,.2) !important; } [data-theme="motors"] .nav.solid { background: rgba(10,8,5,.97) !important; border-bottom-color: rgba(200,169,110,.35) !important; } [data-theme="motors"] .nav-inner { height: 62px !important; } [data-theme="motors"] .nav-logo-mark { background: transparent !important; border: 1px solid var(--gold) !important; border-radius: 0 !important; font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; font-size: 26px !important; font-weight: 700 !important; color: var(--gold) !important; width: 44px !important; height: 44px !important; box-shadow: none !important; } [data-theme="motors"] .nav-logo-mark:hover { box-shadow: 0 0 16px rgba(200,169,110,.3) !important; } [data-theme="motors"] .nav-logo-name { font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; font-size: 22px !important; letter-spacing: 5px !important; font-weight: 600 !important; } [data-theme="motors"] .nav-links a { font-family: 'DM Sans', sans-serif !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 3px !important; } [data-theme="motors"] .nav-cta { border-radius: 0 !important; background: transparent !important; color: var(--gold) !important; border: 1px solid var(--gold) !important; font-family: 'DM Sans', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 3px !important; } [data-theme="motors"] .nav-cta:hover { background: var(--gold) !important; color: var(--bg) !important; } /* MOTORS: Hero */ [data-theme="motors"] .hero-bg { filter: sepia(.45) contrast(1.1) !important; opacity: .20 !important; } [data-theme="motors"] .hero-grad { background: linear-gradient(135deg,rgba(10,8,5,.98) 0%,rgba(10,8,5,.70) 45%,rgba(10,8,5,.90) 100%) !important; } [data-theme="motors"] .hero-grid { background-image: linear-gradient(rgba(200,169,110,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(200,169,110,.03) 1px,transparent 1px) !important; background-size: 48px 48px !important; } [data-theme="motors"] .hero-badge { border-radius: 0 !important; border: 1px solid rgba(200,169,110,.4) !important; background: rgba(200,169,110,.05) !important; font-family: 'DM Sans', sans-serif !important; font-size: 10px !important; font-weight: 400 !important; letter-spacing: 7px !important; } [data-theme="motors"] .hero-h { font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; font-size: clamp(52px,7.5vw,108px) !important; letter-spacing: -1px !important; font-weight: 700 !important; line-height: .88 !important; } [data-theme="motors"] .hero-h::after { content: ''; display: block; width: 80px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin-top: 22px; } /* MOTORS: Buttons */ [data-theme="motors"] .btn { border-radius: 0 !important; letter-spacing: 4px !important; font-size: 11px !important; font-weight: 600 !important; } /* MOTORS: Cards with corner ornaments */ [data-theme="motors"] .pcard { border-radius: 0 !important; border-width: 1px !important; position: relative !important; } [data-theme="motors"] .pcard::before { content: '' !important; position: absolute !important; top: -1px !important; left: -1px !important; width: 20px !important; height: 20px !important; border-top: 2px solid var(--gold) !important; border-left: 2px solid var(--gold) !important; z-index: 3 !important; pointer-events: none !important; } [data-theme="motors"] .pcard::after { content: '' !important; position: absolute !important; bottom: -1px !important; right: -1px !important; width: 20px !important; height: 20px !important; border-bottom: 2px solid var(--gold) !important; border-right: 2px solid var(--gold) !important; z-index: 3 !important; pointer-events: none !important; } [data-theme="motors"] .pcard-img { border-radius: 0 !important; } [data-theme="motors"] .pcard-price { font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; font-size: 30px !important; font-weight: 700 !important; } /* MOTORS: Sections */ [data-theme="motors"] .sec-t { font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; font-size: clamp(30px,4vw,52px) !important; letter-spacing: 0 !important; font-weight: 700 !important; } [data-theme="motors"] .sec-tag { font-family: 'DM Sans', sans-serif !important; font-size: 10px !important; font-weight: 300 !important; letter-spacing: 7px !important; } /* MOTORS: Footer */ [data-theme="motors"] .foot { border-top: 1px solid rgba(200,169,110,.2) !important; } [data-theme="motors"] .foot-logo { font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; letter-spacing: 4px !important; } /* ════════════════════════════════════════════════════════════════════ THEME 2 — TITAN AUTO (DEFAULT — industrial dark gold) Identity: Bold industrial, Bebas Neue, premium trucks & SUVs ════════════════════════════════════════════════════════════════════ */ [data-theme="titan"], :root:not([data-theme]) { --gold: #C9A84C; --gold-l: #DABB6A; --gold-d: #A6882A; --gold-bg: rgba(201,168,76,.07); --gold-bg2: rgba(201,168,76,.14); --gold-glow: 0 0 30px rgba(201,168,76,.25); --bg: #09090B; --bg2: #0F0F12; --bg3: #16161A; --card: #1A1A1F; --card2: #202027; --border: #28282F; --border2: #35353D; --t1: #FAFAF9; --t2: #D4D4D0; --t3: #A1A19A; --t4: #6E6E68; --red: #DC2626; --green: #16A34A; --blue: #2563EB; --ff-d: 'Bebas Neue', sans-serif; --ff-h: 'Barlow Condensed', sans-serif; --ff-b: 'Barlow', sans-serif; --ease: cubic-bezier(.25,.46,.45,.94); } /* TITAN uses the base style.css defaults — no overrides needed */ /* ════════════════════════════════════════════════════════════════════ THEME 3 — IRON HAUL Identity: Brutal heavy transport, warning stripes, blaze orange Use for: Dump trucks, semis, heavy fleet vehicles Fonts: Bebas Neue (display) + Rajdhani (all text) Palette: Near-black + blaze orange + concrete ════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap'); [data-theme="ironhaul"] { --gold: #E86010; --gold-l: #FF7828; --gold-d: #C04A00; --gold-bg: rgba(232,96,16,.08); --gold-bg2: rgba(232,96,16,.18); --gold-glow: 0 0 32px rgba(232,96,16,.45); --bg: #080808; --bg2: #0E0E0E; --bg3: #141414; --card: #1A1A1A; --card2: #212121; --border: #2A2A2A; --border2: #373737; --t1: #F0F0EE; --t2: #C8C8C4; --t3: #8A8A86; --t4: #5C5C58; --red: #E02020; --green: #18A040; --blue: #2060D0; --ff-d: 'Bebas Neue', sans-serif; --ff-h: 'Rajdhani', sans-serif; --ff-b: 'Rajdhani', sans-serif; --ease: cubic-bezier(.25,.46,.45,.94); } [data-theme="ironhaul"] body { font-family: 'Rajdhani', sans-serif; font-size: 16px; } /* IRONHAUL: Loader */ [data-theme="ironhaul"] .loader-brand { font-family: 'Bebas Neue', sans-serif !important; font-size: 80px !important; letter-spacing: 16px !important; font-style: normal !important; } [data-theme="ironhaul"] .loader-sub { font-family: 'Rajdhani', sans-serif !important; letter-spacing: 10px !important; font-weight: 700 !important; } /* IRONHAUL: Nav — thick orange bottom border */ [data-theme="ironhaul"] .nav { background: rgba(8,8,8,.92) !important; border-bottom: 4px solid var(--gold) !important; } [data-theme="ironhaul"] .nav.solid { background: rgba(8,8,8,.99) !important; } [data-theme="ironhaul"] .nav-inner { height: 70px !important; } [data-theme="ironhaul"] .nav-logo-mark { border-radius: 0 !important; background: var(--gold) !important; font-family: 'Bebas Neue', sans-serif !important; font-size: 28px !important; color: #000 !important; letter-spacing: 0 !important; width: 50px !important; height: 50px !important; box-shadow: none !important; } [data-theme="ironhaul"] .nav-logo-mark:hover { box-shadow: 0 0 20px rgba(232,96,16,.6) !important; } [data-theme="ironhaul"] .nav-logo-name { font-family: 'Bebas Neue', sans-serif !important; font-size: 30px !important; letter-spacing: 7px !important; font-weight: 400 !important; } [data-theme="ironhaul"] .nav-links a { font-family: 'Rajdhani', sans-serif !important; font-weight: 700 !important; letter-spacing: 3px !important; font-size: 13px !important; } [data-theme="ironhaul"] .nav-cta { border-radius: 0 !important; background: var(--gold) !important; color: #000 !important; font-family: 'Rajdhani', sans-serif !important; font-weight: 800 !important; letter-spacing: 3px !important; border: none !important; clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%) !important; } /* IRONHAUL: Hero */ [data-theme="ironhaul"] .hero::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 8px !important; background: repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 20px,#000 20px,#000 28px) !important; z-index: 10 !important; } [data-theme="ironhaul"] .hero-bg { filter: contrast(1.25) saturate(.45) !important; opacity: .18 !important; } [data-theme="ironhaul"] .hero-grad { background: linear-gradient(135deg,rgba(8,8,8,.98) 0%,rgba(8,8,8,.70) 40%,rgba(8,8,8,.88) 100%) !important; } [data-theme="ironhaul"] .hero-grid { background-image: linear-gradient(rgba(232,96,16,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(232,96,16,.07) 1px,transparent 1px) !important; background-size: 30px 30px !important; } [data-theme="ironhaul"] .hero-badge { border-radius: 0 !important; border: 2px solid var(--gold) !important; background: rgba(232,96,16,.06) !important; font-family: 'Rajdhani', sans-serif !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 7px !important; } [data-theme="ironhaul"] .hero-h { font-family: 'Bebas Neue', sans-serif !important; font-size: clamp(72px,10.5vw,135px) !important; letter-spacing: 8px !important; line-height: .84 !important; font-style: normal !important; font-weight: 400 !important; text-shadow: 4px 4px 0 rgba(232,96,16,.15) !important; } /* IRONHAUL: Buttons */ [data-theme="ironhaul"] .btn { border-radius: 0 !important; font-family: 'Rajdhani', sans-serif !important; font-weight: 800 !important; letter-spacing: 5px !important; font-size: 12px !important; } [data-theme="ironhaul"] .btn-g { background: var(--gold) !important; color: #000 !important; } /* IRONHAUL: Sections */ [data-theme="ironhaul"] .sec-t { font-family: 'Bebas Neue', sans-serif !important; letter-spacing: 8px !important; font-size: clamp(38px,5vw,72px) !important; line-height: .9 !important; font-weight: 400 !important; } [data-theme="ironhaul"] .sec-tag { font-family: 'Rajdhani', sans-serif !important; font-weight: 800 !important; letter-spacing: 8px !important; font-size: 12px !important; } /* IRONHAUL: Cards */ [data-theme="ironhaul"] .pcard { border-radius: 0 !important; border-width: 2px !important; } [data-theme="ironhaul"] .pcard:hover { border-color: var(--gold) !important; transform: translate(-4px,-4px) !important; box-shadow: 5px 5px 0 var(--gold-d) !important; } [data-theme="ironhaul"] .pcard-img { border-radius: 0 !important; } [data-theme="ironhaul"] .pcard-img-bar { height: 6px !important; background: repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 14px,#1A1A1A 14px,#1A1A1A 18px) !important; } [data-theme="ironhaul"] .pcard-price { font-family: 'Bebas Neue', sans-serif !important; font-size: 38px !important; letter-spacing: 2px !important; font-weight: 400 !important; } [data-theme="ironhaul"] .pcard-title { font-family: 'Rajdhani', sans-serif !important; font-weight: 700 !important; letter-spacing: 1px !important; } /* IRONHAUL: CTA — diagonal stripes */ [data-theme="ironhaul"] .cta { background: repeating-linear-gradient(-45deg,#111,#111 12px,#0D0D0D 12px,#0D0D0D 24px) !important; border-top: 5px solid var(--gold) !important; border-bottom: 5px solid var(--gold) !important; } [data-theme="ironhaul"] .cta-t { color: var(--gold) !important; text-shadow: 0 0 30px rgba(232,96,16,.5) !important; } /* IRONHAUL: Footer */ [data-theme="ironhaul"] .foot { border-top: 5px solid var(--gold) !important; } [data-theme="ironhaul"] .foot-logo { font-family: 'Bebas Neue', sans-serif !important; letter-spacing: 8px !important; } [data-theme="ironhaul"] .cat, [data-theme="ironhaul"] .adv { border-radius: 0 !important; } /* IRONHAUL: Categories hover effect */ [data-theme="ironhaul"] .cat:hover { transform: none !important; border-color: var(--gold) !important; box-shadow: 4px 4px 0 var(--gold-d) !important; } /* ════════════════════════════════════════════════════════════════════ THEME 4 — APEX MACHINERY (CLASSIC AMERICAN AUTOMOBILES) Identity: Vintage Americana, chrome & leather, classic muscle cars Use for: Classic cars, muscle cars, vintage automobiles Fonts: Alfa Slab One (display) + Libre Baskerville (body) Palette: Aged paper/cream background + rust/brown + gold accents ════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Bebas+Neue&family=Special+Elite&family=Libre+Baskerville:wght@400;700&display=swap'); [data-theme="apex"] { --gold: #c9a84c; --gold-l: #ddbf6a; --gold-d: #a6882a; --gold-bg: rgba(201,168,76,.08); --gold-bg2: rgba(201,168,76,.16); --gold-glow: 0 0 28px rgba(201,168,76,.35); --rust: #b8420e; --rust-l: #d05a22; --rust-d: #8a2e06; --bg: #faf3e3; --bg2: #f5e6c8; --bg3: #e8d4a8; --card: #f5e6c8; --card2: #faf3e3; --border: #d4c5a0; --border2: #c9b890; --t1: #3e2723; --t2: #5d4037; --t3: #795548; --t4: #8d6e63; --red: #b8420e; --green: #2a6b5e; --blue: #1b2838; --ff-d: 'Alfa Slab One', cursive; --ff-h: 'Bebas Neue', sans-serif; --ff-b: 'Libre Baskerville', Georgia, serif; --ease: cubic-bezier(.25,.46,.45,.94); } [data-theme="apex"] body { font-family: 'Libre Baskerville', Georgia, serif; background: #faf3e3; color: #3e2723; } /* APEX: Loader — hidden by theme-specific loader */ [data-theme="apex"] .loader-brand { font-family: 'Alfa Slab One', cursive !important; font-size: 52px !important; letter-spacing: 3px !important; font-style: normal !important; color: var(--gold) !important; text-shadow: 3px 3px 0 rgba(184,66,14,.3) !important; } [data-theme="apex"] .loader-sub { font-family: 'Special Elite', cursive !important; letter-spacing: 4px !important; font-size: 12px !important; font-weight: 400 !important; color: var(--t4) !important; } [data-theme="apex"] .loader-fill { background: linear-gradient(90deg, var(--rust-d), var(--rust), var(--gold)) !important; box-shadow: 0 0 8px rgba(184,66,14,.5) !important; } [data-theme="apex"] #loader { background: var(--bg) !important; } /* APEX: Nav — warm brown leather-like */ [data-theme="apex"] .nav { background: rgba(62,39,35,.94) !important; border-bottom: 3px solid var(--rust) !important; backdrop-filter: blur(16px) !important; } [data-theme="apex"] .nav.solid { background: rgba(62,39,35,.99) !important; border-bottom-color: var(--rust) !important; box-shadow: 0 4px 20px rgba(0,0,0,.4) !important; } [data-theme="apex"] .nav-inner { height: 60px !important; } [data-theme="apex"] .nav-logo-mark { background: var(--rust) !important; border: 2px solid var(--gold) !important; border-radius: 0 !important; font-family: 'Alfa Slab One', cursive !important; font-size: 20px !important; color: #faf3e3 !important; width: 42px !important; height: 42px !important; box-shadow: none !important; } [data-theme="apex"] .nav-logo-mark:hover { box-shadow: 0 0 16px rgba(201,168,76,.4) !important; } [data-theme="apex"] .nav-logo-name { font-family: 'Alfa Slab One', cursive !important; font-size: 20px !important; letter-spacing: 2px !important; font-weight: 400 !important; color: #faf3e3 !important; text-shadow: none !important; } [data-theme="apex"] .nav-links a { font-family: 'Bebas Neue', sans-serif !important; font-weight: 400 !important; letter-spacing: 2px !important; font-size: 14px !important; color: #e8d4a8 !important; } [data-theme="apex"] .nav-links a:hover, [data-theme="apex"] .nav-links a.on { color: var(--gold) !important; background: rgba(201,168,76,.1) !important; text-shadow: 0 0 10px rgba(201,168,76,.3) !important; } [data-theme="apex"] .nav-cta { border-radius: 0 !important; background: var(--rust) !important; color: #faf3e3 !important; font-family: 'Bebas Neue', sans-serif !important; font-weight: 400 !important; letter-spacing: 2px !important; font-size: 14px !important; border: 2px solid var(--gold) !important; } [data-theme="apex"] .nav-cta:hover { background: var(--gold) !important; color: #3e2723 !important; } /* APEX: Hero — vintage warm tones */ [data-theme="apex"] .hero { background: #1b2838 !important; } [data-theme="apex"] .hero-bg { filter: blur(2px) brightness(.5) saturate(1.3) sepia(.2) !important; opacity: .28 !important; } [data-theme="apex"] .hero-grad { background: radial-gradient(ellipse at center, transparent 30%, rgba(27,40,56,.7) 100%), linear-gradient(135deg,rgba(27,40,56,.95) 0%,rgba(27,40,56,.6) 45%,rgba(27,40,56,.85) 100%) !important; } [data-theme="apex"] .hero-grid { background-image: none !important; } [data-theme="apex"] .hero-badge { border-radius: 0 !important; border: 2px solid var(--gold) !important; background: rgba(201,168,76,.08) !important; font-family: 'Special Elite', cursive !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 3px !important; color: var(--gold) !important; } [data-theme="apex"] .hero-badge::before { background: var(--gold) !important; box-shadow: 0 0 10px rgba(201,168,76,.9) !important; } [data-theme="apex"] .hero-h { font-family: 'Alfa Slab One', cursive !important; font-size: clamp(42px,6.5vw,90px) !important; letter-spacing: 2px !important; line-height: .95 !important; font-style: normal !important; font-weight: 400 !important; text-shadow: 3px 3px 6px rgba(0,0,0,.5) !important; color: #faf3e3 !important; } [data-theme="apex"] .hero-h em { color: var(--gold) !important; } [data-theme="apex"] .hero-p { font-family: 'Special Elite', cursive !important; color: #d4c5a0 !important; letter-spacing: .5px !important; } /* APEX: Buttons — vintage style */ [data-theme="apex"] .btn { border-radius: 0 !important; font-family: 'Bebas Neue', sans-serif !important; font-weight: 400 !important; letter-spacing: 2px !important; font-size: 15px !important; border-width: 2px !important; } [data-theme="apex"] .btn-g { background: var(--rust) !important; color: #faf3e3 !important; border-color: var(--gold) !important; } [data-theme="apex"] .btn-g:hover { background: var(--gold) !important; color: #3e2723 !important; box-shadow: none !important; } [data-theme="apex"] .btn-o { background: transparent !important; color: var(--gold) !important; border-color: var(--gold) !important; } [data-theme="apex"] .btn-o:hover { background: var(--gold) !important; color: #3e2723 !important; } /* APEX: Sections */ [data-theme="apex"] .sec-t { font-family: 'Alfa Slab One', cursive !important; letter-spacing: 1px !important; font-size: clamp(24px,3.5vw,42px) !important; font-weight: 400 !important; text-transform: none !important; color: #3e2723 !important; text-shadow: none !important; } [data-theme="apex"] .sec-tag { font-family: 'Special Elite', cursive !important; font-weight: 400 !important; letter-spacing: 3px !important; font-size: 12px !important; color: var(--rust) !important; } [data-theme="apex"] .sec-d { font-family: 'Libre Baskerville', serif !important; color: #795548 !important; } [data-theme="apex"] .sec-hdr { border-bottom: 3px double var(--gold) !important; padding-bottom: 12px !important; } [data-theme="apex"] .sec { background: transparent !important; } [data-theme="apex"] .sec-full { background: transparent !important; } [data-theme="apex"] .sec-dark { background: transparent !important; } /* APEX: Cards — vintage card style */ [data-theme="apex"] .pcard { border-radius: 0 !important; background: var(--card) !important; border: 2px solid var(--border) !important; } [data-theme="apex"] .pcard:hover { border-color: var(--gold) !important; box-shadow: 0 4px 15px rgba(0,0,0,.2) !important; transform: translateY(-3px) !important; } [data-theme="apex"] .pcard::before, [data-theme="apex"] .pcard::after { display: none !important; } [data-theme="apex"] .pcard-img { border-radius: 0 !important; } [data-theme="apex"] .pcard-img-bar { height: 2px !important; background: var(--gold) !important; } [data-theme="apex"] .pcard-price { font-family: 'Bebas Neue', sans-serif !important; font-size: 22px !important; letter-spacing: 1px !important; font-weight: 400 !important; color: var(--rust) !important; text-shadow: none !important; } [data-theme="apex"] .pcard-title { font-family: 'Alfa Slab One', cursive !important; font-weight: 400 !important; font-size: 13px !important; color: #3e2723 !important; } [data-theme="apex"] .pcard-cat { font-family: 'Special Elite', cursive !important; font-weight: 400 !important; letter-spacing: 1px !important; color: #795548 !important; } [data-theme="apex"] .pcard-badge { background: var(--rust) !important; color: #faf3e3 !important; font-family: 'Bebas Neue', sans-serif !important; border-radius: 0 !important; } [data-theme="apex"] .pcard-body { border-top: 2px solid var(--gold) !important; } /* APEX: Categories */ [data-theme="apex"] .cat { background: var(--card) !important; border: 2px solid var(--border) !important; border-radius: 0 !important; } [data-theme="apex"] .cat:hover { border-color: var(--gold) !important; transform: translateY(-3px) !important; box-shadow: 0 4px 15px rgba(0,0,0,.15) !important; } [data-theme="apex"] .cat-name { font-family: 'Alfa Slab One', cursive !important; color: #3e2723 !important; } [data-theme="apex"] .cat-cnt { font-family: 'Special Elite', cursive !important; color: #795548 !important; } /* APEX: Advantages */ [data-theme="apex"] .adv { background: var(--card) !important; border: 2px solid var(--border) !important; border-radius: 0 !important; } [data-theme="apex"] .adv-t { font-family: 'Alfa Slab One', cursive !important; color: #3e2723 !important; } [data-theme="apex"] .adv-d { font-family: 'Libre Baskerville', serif !important; color: #795548 !important; } /* APEX: CTA */ [data-theme="apex"] .cta { background: linear-gradient(135deg,#3e2723,#5d4037) !important; border-top: 3px solid var(--gold) !important; border-bottom: 3px solid var(--gold) !important; position: relative !important; } [data-theme="apex"] .cta::before { content: '' !important; position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse at center,rgba(201,168,76,.08) 0%,transparent 70%) !important; pointer-events: none !important; } [data-theme="apex"] .cta-t { font-family: 'Alfa Slab One', cursive !important; color: var(--gold) !important; text-shadow: none !important; } /* APEX: Footer — dark brown vintage */ [data-theme="apex"] .foot { background: linear-gradient(180deg,#3e2723,#2a1a12) !important; border-top: 3px solid var(--gold) !important; color: #d4c5a0 !important; } [data-theme="apex"] .foot-logo { font-family: 'Alfa Slab One', cursive !important; letter-spacing: 2px !important; color: var(--gold) !important; } [data-theme="apex"] .foot-col-t { font-family: 'Bebas Neue', sans-serif !important; color: var(--gold) !important; } [data-theme="apex"] .foot-links a { color: #d4c5a0 !important; } [data-theme="apex"] .foot-links a:hover { color: var(--gold) !important; } [data-theme="apex"] .foot-bot { color: #8d6e63 !important; border-top-color: rgba(201,168,76,.25) !important; } /* APEX: Page headers, detail, forms */ [data-theme="apex"] .phdr { background: var(--card) !important; border-bottom: 2px solid var(--border) !important; } [data-theme="apex"] .phdr-t { font-family: 'Alfa Slab One', cursive !important; color: #3e2723 !important; } [data-theme="apex"] .fbar, [data-theme="apex"] .detail-gallery, [data-theme="apex"] .detail-info, [data-theme="apex"] .detail-description, [data-theme="apex"] .sbox, [data-theme="apex"] .contact-grid, [data-theme="apex"] .trk-card, [data-theme="apex"] .trk-box, [data-theme="apex"] .modal-box { background: var(--card) !important; border: 2px solid var(--border) !important; border-radius: 0 !important; } /* APEX: Mobile nav */ [data-theme="apex"] .nav-links.mob { background: #3e2723 !important; border-bottom: 3px solid var(--gold) !important; } [data-theme="apex"] .nav-links.mob a { color: #e8d4a8 !important; border-top: 1px solid #5d4037 !important; } [data-theme="apex"] .nav-links.mob a:hover, [data-theme="apex"] .nav-links.mob a.on { background: var(--rust) !important; color: #faf3e3 !important; } /* APEX: Checker strip decoration */ [data-theme="apex"] .hero::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 12px !important; background: repeating-linear-gradient(90deg,#3e2723 0,#3e2723 12px,#f5e6c8 12px,#f5e6c8 24px) !important; z-index: 5 !important; } /* ═══ RESPONSIVE NAV — All themes ═══════════════════════════════════ At screen widths where nav starts to crowd, reduce sizes gracefully. Hamburger appears at 1024px (set in style.css). Between 1024-1280px: shrink fonts/spacing slightly for all themes. ════════════════════════════════════════════════════════════════════ */ @media(max-width:1280px) { .nav-inner { padding:0 16px !important; gap:4px !important; } .nav-logo-name { font-size:16px !important; letter-spacing:2px !important; } .nav-logo-mark { width:32px !important; height:32px !important; font-size:18px !important; } .nav-links a { padding:6px 8px !important; font-size:11px !important; letter-spacing:1px !important; } .nav-cta { padding:8px 12px !important; font-size:11px !important; letter-spacing:1px !important; } /* IRONHAUL — biggest offender */ [data-theme="ironhaul"] .nav-logo-name { font-size:22px !important; letter-spacing:3px !important; } [data-theme="ironhaul"] .nav-logo-mark { width:38px !important; height:38px !important; font-size:22px !important; } [data-theme="ironhaul"] .nav-inner { height:64px !important; } /* MOTORS */ [data-theme="motors"] .nav-logo-name { font-size:17px !important; letter-spacing:3px !important; } /* APEX */ [data-theme="apex"] .nav-inner { height:58px !important; } [data-theme="apex"] .nav-logo-name { font-size:17px !important; letter-spacing:1px !important; } } @media(max-width:1024px) { /* Hamburger is shown — hide links and phone button */ .nav-links { top:64px !important; } .nav-inner { height:64px !important; } [data-theme="ironhaul"] .nav-inner { height:64px !important; } [data-theme="motors"] .nav-inner { height:64px !important; } [data-theme="apex"] .nav-inner { height:64px !important; } }