/* ============================================================ AUTOMART V46.0 GLOBAL PREMIUM MODULE / SECTION HEADING SYSTEM Design language: - Existing AutoMart typography - White / ash surfaces - Restrained green accent - Strong readable hierarchy - Desktop + tablet + mobile ============================================================ */ :root { --am-v46-ink: #111827; --am-v46-muted: #718096; --am-v46-accent: #06965a; --am-v46-accent-dark: #087448; --am-v46-accent-soft: #eaf7f0; --am-v46-line: #e5ebe8; --am-v46-line-soft: #edf2ef; --am-v46-ash: #f7f9f8; --am-v46-white: #ffffff; } /* ============================================================ PAGE TITLES H1 authority on public content pages ============================================================ */ .am-v46-page-title { position:relative !important; margin-top:0 !important; margin-bottom: 18px !important; padding-bottom: 11px !important; color: var(--am-v46-ink) !important; font-family: inherit !important; font-size: clamp( 24px, 2.35vw, 34px ) !important; line-height: 1.1 !important; font-weight: 850 !important; letter-spacing: -.035em !important; } .am-v46-page-title::after { content:""; position:absolute; left:0; bottom:0; width:46px; height:3px; border-radius: 99px; background: linear-gradient( 90deg, var(--am-v46-accent) 0%, #20bd7a 100% ); } /* ============================================================ MODULE / SECTION TITLE ============================================================ */ .am-v46-module-title { position:relative !important; display:block !important; width:auto; margin-top: 0 !important; margin-bottom: 16px !important; padding: 1px 0 10px 15px !important; color: var(--am-v46-ink) !important; font-family: inherit !important; font-size: clamp( 16px, 1.35vw, 19px ) !important; line-height: 1.24 !important; font-weight: 820 !important; letter-spacing: -.02em !important; border-bottom: 1px solid var(--am-v46-line-soft) !important; } /* * Premium vertical accent. */ .am-v46-module-title::before { content:""; position:absolute; left:0; top:2px; width:3px; height:21px; border-radius: 99px; background: linear-gradient( 180deg, #16b66f 0%, var(--am-v46-accent-dark) 100% ); } /* * Short secondary underline. */ .am-v46-module-title::after { content:""; position:absolute; left:15px; bottom:-1px; width:38px; height:1px; background: var(--am-v46-accent); } /* ============================================================ MODULE WITH EXISTING KICKER / EYEBROW Compare, Market Insight, Similar Vehicles etc. already have a premium kicker, so do not duplicate the vertical green bar. ============================================================ */ .am-v46-module-title.am-v46-title-has-kicker { padding-left: 0 !important; } .am-v46-module-title.am-v46-title-has-kicker::before { display:none !important; } .am-v46-module-title.am-v46-title-has-kicker::after { left:0; } /* ============================================================ SMALL EYEBROW / KICKER TEXT Examples: COMPARE MARKET INSIGHT YOU MAY ALSO LIKE ============================================================ */ .am-v46-kicker { color: var(--am-v46-accent-dark) !important; font-family: inherit !important; font-size: 10px !important; line-height: 1.2 !important; font-weight: 850 !important; letter-spacing: .15em !important; text-transform: uppercase !important; } /* ============================================================ EXISTING HEADER ROWS / HEADER BLOCKS When a page already has: section-header module-header card-header panel-header widget-header title-row give the whole heading row a premium ash/white treatment. ============================================================ */ .am-v46-module-head { position:relative; display:flex !important; align-items:center; justify-content: space-between; gap: 14px; margin-bottom: 16px !important; padding: 12px 14px !important; border: 1px solid var(--am-v46-line) !important; border-radius: 13px !important; background: linear-gradient( 135deg, #ffffff 0%, #f8faf9 100% ) !important; box-shadow: 0 5px 18px rgba( 17, 39, 28, .035 ); } /* * Heading inside an already premium header row: * remove extra divider/margin. */ .am-v46-module-head .am-v46-module-title { flex: 1 1 auto; min-width: 0; margin: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; } .am-v46-module-head .am-v46-module-title::after { display:none !important; } /* ============================================================ ACTIONS BESIDE SECTION HEADERS "View all", sort, filter, etc. ============================================================ */ .am-v46-module-head a, .am-v46-module-head button { flex: 0 0 auto; } /* ============================================================ VEHICLE DETAIL PAGE Give the plain blocks in the supplied screenshot one system. ============================================================ */ .vehicle-detail-page .detail-copy > h2, .vehicle-detail-page .detail-copy > h3, .vehicle-detail-page .am-v428-normal-heading { scroll-margin-top: 120px; } /* * Slight additional breathing room between vehicle modules. */ .vehicle-detail-page .am-v46-module-title { margin-top: 4px !important; } /* ============================================================ CONTENT MODULE SPACING Only headings; does not alter card/grid geometry. ============================================================ */ .am-v46-module-title + p, .am-v46-module-title + .description, .am-v46-module-title + [class*="content"] { margin-top: 0 !important; } /* ============================================================ HOVER FOR CLICKABLE HEADER ROWS ONLY ============================================================ */ a.am-v46-module-head:hover { border-color: #d5e5dc !important; box-shadow: 0 8px 22px rgba( 17, 39, 28, .055 ); } /* ============================================================ TABLET ============================================================ */ @media screen and (max-width:1024px) { .am-v46-page-title { font-size: clamp( 23px, 3.2vw, 30px ) !important; } .am-v46-module-title { font-size: 17px !important; margin-bottom: 14px !important; } } /* ============================================================ MOBILE ============================================================ */ @media screen and (max-width:767px) { .am-v46-page-title { margin-bottom: 15px !important; padding-bottom: 9px !important; font-size: 23px !important; line-height: 1.13 !important; letter-spacing: -.025em !important; } .am-v46-page-title::after { width: 38px; height: 3px; } .am-v46-module-title { margin-bottom: 13px !important; padding: 0 0 9px 13px !important; font-size: 16px !important; line-height: 1.25 !important; } .am-v46-module-title::before { width: 3px; height: 18px; top: 1px; } .am-v46-module-title::after { left: 13px; width: 31px; } .am-v46-module-title.am-v46-title-has-kicker { padding-left: 0 !important; } .am-v46-module-title.am-v46-title-has-kicker::after { left: 0; } .am-v46-module-head { gap: 9px; margin-bottom: 13px !important; padding: 10px 11px !important; border-radius: 11px !important; } .am-v46-kicker { font-size: 9px !important; letter-spacing: .13em !important; } } /* ============================================================ VERY SMALL MOBILE ============================================================ */ @media screen and (max-width:390px) { .am-v46-page-title { font-size: 21px !important; } .am-v46-module-title { font-size: 15px !important; } }