/* Checkpoint Motors — hand-written stylesheet. Loaded in every page AFTER dist/output.css. WHY THIS FILE EXISTS -------------------- dist/output.css is a prebuilt Tailwind v4 artifact. There is no tailwind.config, no source CSS and no package.json anywhere in this project, so the utility set is FROZEN: only classes that happened to be compiled in that one build actually work. An audit on 10 Aug 2026 found 50 classes used across the pages that are defined nowhere. The worst offender is text-[#fbbc05], used 240 times — it is the colour of the Google review stars, which have therefore been rendering in the inherited text colour, not gold, on every page since launch. dist/output.css declares `@layer theme, base, components, utilities`. Rules in a stylesheet with NO layer always beat layered rules, whatever the specificity. So everything here wins cleanly without an !important arms race. Brand tokens already ship in dist/output.css :root and are reused here, never hardcoded: --color-primary #E31F26 · --color-cpm-blue #0058A9 · --color-safety-green #32CD32 · --color-background-light/dark · --font-impact · --font-display SECTIONS A. Utility shim — the missing Tailwind classes, so existing pages render as authored B. Chrome — nav dropdown, mobile overlay, scrolled header C. Components — the .cpm-* blocks used by the service and suburb pages RULE FOR NEW MARKUP: use a class verified present in dist/output.css, or a .cpm-* class defined here. Nothing else. verify.py fails the build on anything undefined. */ /* ========================================================================== */ /* A. UTILITY SHIM — missing Tailwind classes */ /* ========================================================================== */ /* Colour ------------------------------------------------------------------ */ /* The Google review stars. 240 uses, defined nowhere until now. */ .text-\[\#fbbc05\] { color: #fbbc05; } .text-\[\#7db8ff\] { color: #7db8ff; } .text-white\/85 { color: rgb(255 255 255 / 0.85); } .text-white\/80 { color: rgb(255 255 255 / 0.80); } .text-white\/70 { color: rgb(255 255 255 / 0.70); } .text-white\/50 { color: rgb(255 255 255 / 0.50); } .bg-white\/5 { background-color: rgb(255 255 255 / 0.05); } .hover\:bg-white\/20:hover { background-color: rgb(255 255 255 / 0.20); } .opacity-30 { opacity: 0.30; } /* Shadow ------------------------------------------------------------------ */ .shadow-gray-200\/40 { --tw-shadow-color: rgb(229 231 235 / 0.40); box-shadow: 0 10px 15px -3px rgb(229 231 235 / 0.40), 0 4px 6px -4px rgb(229 231 235 / 0.40); } .shadow-black\/20 { --tw-shadow-color: rgb(0 0 0 / 0.20); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.20), 0 4px 6px -4px rgb(0 0 0 / 0.20); } .drop-shadow-lg { filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.10)); } /* Type -------------------------------------------------------------------- */ .\!text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; } .\!text-6xl { font-size: 3.75rem !important; line-height: 1 !important; } .text-\[11px\] { font-size: 11px; line-height: 1.45; } .text-\[13px\] { font-size: 13px; line-height: 1.5; } /* Spacing ----------------------------------------------------------------- */ .mb-5 { margin-bottom: 1.25rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-14 { margin-bottom: 3.5rem; } .mt-8 { margin-top: 2rem; } .px-9 { padding-left: 2.25rem; padding-right: 2.25rem; } .pt-36 { padding-top: 9rem; } .pb-20 { padding-bottom: 5rem; } .pb-28 { padding-bottom: 7rem; } .gap-x-8 { column-gap: 2rem; } .gap-y-3 { row-gap: 0.75rem; } /* Used by the new service-page sections; absent from the frozen build. */ .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .mt-0\.5 { margin-top: 0.125rem; } /* Sizing ------------------------------------------------------------------ */ .max-w-\[760px\] { max-width: 760px; } .max-w-\[900px\] { max-width: 900px; } .max-w-\[1100px\] { max-width: 1100px; } .w-\[700px\] { width: 700px; } .h-\[700px\] { height: 700px; } .h-\[420px\] { height: 420px; } /* Carried in from the pristine WordPress export, unstyleable at source ----- */ .layout-content-container { display: flex; flex-direction: column; width: 100%; } .brand-logo { display: block; max-height: 100%; width: auto; object-fit: contain; } .mask-fade-sides { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } /* Responsive -------------------------------------------------------------- */ @media (min-width: 768px) { .md\:p-8 { padding: 2rem; } .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; } .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; } .md\:pt-40 { padding-top: 10rem; } .md\:pt-44 { padding-top: 11rem; } .md\:pb-28 { padding-bottom: 7rem; } .md\:pb-36 { padding-bottom: 9rem; } .md\:items-center { align-items: center; } .md\:justify-between { justify-content: space-between; } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:gap-16 { gap: 4rem; } .lg\:pt-6 { padding-top: 1.5rem; } } /* ========================================================================== */ /* B. CHROME — nav dropdown, mobile overlay, scrolled header */ /* ========================================================================== */ /* Moved out of build.py's DROP_CSS so all site CSS lives in one cache-busted file. */ .cpm-drop-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .6rem; background: #fff; border-radius: 16px; box-shadow: 0 24px 48px -12px rgba(0,88,169,.28); border: 1px solid rgba(0,88,169,.08); padding: .5rem; min-width: 240px; opacity: 0; visibility: hidden; translate: 0 6px; transition: all .18s ease; z-index: 10001; } .cpm-drop:hover .cpm-drop-panel, .cpm-drop:focus-within .cpm-drop-panel { opacity: 1; visibility: visible; translate: 0 0; } .cpm-drop-panel a { display: block; padding: .62rem .9rem; border-radius: 10px; font-weight: 700; font-size: .92rem; color: #181111; white-space: nowrap; transition: all .15s; } .cpm-drop-panel a:hover { background: rgba(0,88,169,.08); color: var(--color-cpm-blue, #0058A9); padding-left: 1.15rem; } .dark .cpm-drop-panel { background: #211112; border-color: rgba(255,255,255,.08); } .dark .cpm-drop-panel a { color: #fff; } /* Ten services do not fit one column. Two columns keeps the panel ~280px tall. */ .cpm-drop-panel--2col { min-width: 460px; display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; } .lead-hero { background: linear-gradient(135deg,#0058A9 0%,#003d75 55%,#00284d 100%); } /* The fullscreen overlay is used on mobile AND on scrolled desktop. With ten services plus the hub and Contact it overflows a centred flex column, and the pristine export gives it no scroll container. */ #mobile-menu { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; padding: 4.5rem 1rem 2rem; gap: 1.25rem; } #mobile-menu > nav { gap: .6rem; width: 100%; max-width: 640px; } .cpm-mnav-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .55; font-weight: 800; margin-top: .4rem; } @media (min-width: 480px) { .cpm-mnav-services { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; width: 100%; } } /* ========================================================================== */ /* C. COMPONENTS — service and suburb page sections */ /* ========================================================================== */ /* How it works. The numbered steps deliberately are NOT four identical icon-top cards (a banned AI-slop tell); the number is a hanging marker in the margin. */ .cpm-steps { display: grid; gap: 1.75rem; } @media (min-width: 768px) { .cpm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 3rem; } } .cpm-step { position: relative; padding-left: 3.25rem; } .cpm-step-n { position: absolute; left: 0; top: -.15rem; font-family: var(--font-impact, "Archivo Black"), sans-serif; font-size: 2rem; line-height: 1; color: var(--color-primary, #E31F26); opacity: .85; } /* FAQ. Tailwind preflight strips the default
marker, so without this the accordion has no affordance at all. */ .cpm-faq { border-bottom: 1px solid rgba(0, 88, 169, .14); padding: .2rem 0; } .cpm-faq summary { cursor: pointer; list-style: none; padding: 1.05rem 2.5rem 1.05rem 0; font-weight: 800; font-size: 1.02rem; color: var(--color-cpm-blue, #0058A9); position: relative; transition: color .15s ease; } .cpm-faq summary::-webkit-details-marker { display: none; } .cpm-faq summary::after { content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--color-primary, #E31F26); transition: transform .2s ease; } .cpm-faq[open] summary::after { transform: translateY(-50%) rotate(45deg); } .cpm-faq summary:hover { color: var(--color-primary, #E31F26); } .cpm-faq p { margin: 0 0 1.15rem; color: #4b5563; line-height: 1.7; max-width: 68ch; } .dark .cpm-faq { border-bottom-color: rgba(255, 255, 255, .1); } .dark .cpm-faq summary { color: #fff; } .dark .cpm-faq p { color: #d1d5db; } /* Related services */ .cpm-rel { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.15rem; border: 1px solid rgba(0, 88, 169, .14); border-radius: 12px; background: #fff; transition: border-color .2s ease, transform .2s ease; } .cpm-rel:hover { border-color: var(--color-cpm-blue, #0058A9); transform: translateX(3px); } .dark .cpm-rel { background: #211112; border-color: rgba(255, 255, 255, .1); } /* Areas we serve, link grid. Ported from the King Cooling .arealist pattern. */ .cpm-arealist { display: grid; gap: .55rem; list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .cpm-arealist a { display: block; padding: .6rem .85rem; border-radius: 8px; border: 1px solid rgba(0, 88, 169, .16); background: #fff; font-size: .9rem; font-weight: 700; color: var(--color-cpm-blue, #0058A9); transition: border-color .2s ease, background .2s ease, transform .2s ease; } .cpm-arealist a:hover { border-color: var(--color-cpm-blue, #0058A9); background: var(--color-background-light, #f8f6f6); transform: translateX(3px); } .dark .cpm-arealist a { background: #211112; border-color: rgba(255, 255, 255, .1); color: #fff; } /* ========================================================================== */ /* D. TEMPLATE-1 SECTIONS (workshop gallery, find us, closing form) */ /* Added 26 Aug 2026 for the four landers the live ad groups point at. */ /* */ /* SIGNATURE DEVICE: .cpm-rule is the angled blue-and-red stripe pair off */ /* the CPM logo. It replaces the flat red divider in these sections and is */ /* reused as the gallery caption marker and the map hover state, so the */ /* same shape recurs instead of being decoration used once. Not a chequer */ /* flag on purpose, RPM already owns that device. */ /* ========================================================================== */ .cpm-rule { display: block; width: 74px; height: 10px; margin: .9rem 0 1.35rem; background: linear-gradient(105deg, transparent 0 6px, var(--color-cpm-blue, #0058A9) 6px 30px, transparent 30px), linear-gradient(105deg, transparent 0 34px, var(--color-primary, #E31F26) 34px 58px, transparent 58px); } .cpm-sechead { max-width: 60ch; margin-bottom: 2.25rem; } .cpm-sechead-sub { color: #4b5563; font-size: 1.05rem; line-height: 1.65; margin: 0; } .dark .cpm-sechead-sub { color: #9ca3af; } /* ---- Workshop gallery ---------------------------------------------------- */ /* Asymmetric by design: one tall lead shot beside a 2x2. A row of equal cards */ /* is banned tell #10 in the web-design standard. */ .cpm-gallery { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 900px) { .cpm-gallery { grid-template-columns: 1.08fr 1fr; align-items: stretch; } } .cpm-gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); } .cpm-shot { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #eceff3; box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .55); } .cpm-shot img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .45s cubic-bezier(.22, .61, .36, 1); } .cpm-shot--lead img { aspect-ratio: 4 / 5; } @media (max-width: 899px) { .cpm-shot--lead img { aspect-ratio: 4 / 3; } } .cpm-shot:hover img { transform: scale(1.035); } /* ---- Find us ------------------------------------------------------------- */ .cpm-findus { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 940px) { .cpm-findus { grid-template-columns: 1fr 1.15fr; gap: 3rem; } } .cpm-addr { display: flex; gap: .7rem; align-items: flex-start; font-style: normal; font-size: 1.25rem; font-weight: 800; line-height: 1.45; color: #181111; margin: 0 0 1.4rem; } .dark .cpm-addr { color: #fff; } .cpm-addr .material-symbols-outlined { color: var(--color-primary, #E31F26); font-size: 1.6rem; } .cpm-hours { margin: 0 0 1.6rem; padding: 0; max-width: 24rem; } .cpm-hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid rgba(0, 88, 169, .14); } .cpm-hours-row dt { margin: 0; font-weight: 700; color: #374151; } .cpm-hours-row dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 800; color: #181111; } .cpm-hours-row.is-closed dd { color: #9ca3af; font-weight: 700; } .dark .cpm-hours-row { border-bottom-color: rgba(255, 255, 255, .1); } .dark .cpm-hours-row dt { color: #d1d5db; } .dark .cpm-hours-row dd { color: #fff; } /* Proof as oversized numerals, NOT a four-up stat banner (banned tell #12). */ .cpm-proof { display: flex; flex-wrap: wrap; gap: 2.25rem; margin: 0 0 1.75rem; } .cpm-proof-item { margin: 0; display: flex; flex-direction: column; } .cpm-proof-item b { font-family: var(--font-impact, "Archivo Black"), system-ui, sans-serif; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: .92; color: var(--color-cpm-blue, #0058A9); } .cpm-proof-item span { font-size: .82rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin-top: .4rem; max-width: 12rem; } .dark .cpm-proof-item span { color: #9ca3af; } .cpm-findus-cta { display: flex; flex-wrap: wrap; gap: .75rem; } .cpm-btn { display: inline-flex; align-items: center; gap: .55rem; padding: .95rem 1.5rem; border-radius: 999px; font-weight: 800; text-transform: uppercase; letter-spacing: .045em; font-size: .9rem; transition: transform .2s ease, background .2s ease, border-color .2s ease; } .cpm-btn:hover { transform: translateY(-2px); } .cpm-btn--primary { background: var(--color-primary, #E31F26); color: #fff; } .cpm-btn--primary:hover { filter: brightness(1.08); } .cpm-btn--ghost { background: transparent; color: var(--color-cpm-blue, #0058A9); border: 2px solid rgba(0, 88, 169, .3); } .cpm-btn--ghost:hover { border-color: var(--color-cpm-blue, #0058A9); } .dark .cpm-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .25); } /* Static map image, not a Google iframe: no third-party JS, no cookie. The signature */ /* stripe rides in on hover so the device recurs rather than sitting still. */ .cpm-map { display: block; position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 18px 44px -24px rgba(0, 0, 0, .6); } .cpm-map img { display: block; width: 100%; height: auto; } .cpm-map::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: linear-gradient(105deg, transparent 0 8px, var(--color-cpm-blue, #0058A9) 8px 46px, transparent 46px), linear-gradient(105deg, transparent 0 52px, var(--color-primary, #E31F26) 52px 90px, transparent 90px); background-size: 120px 100%; transform: translateY(100%); transition: transform .3s cubic-bezier(.22, .61, .36, 1); } .cpm-map:hover::after { transform: translateY(0); } /* ---- Closing form -------------------------------------------------------- */ .cpm-closer { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 940px) { /* Top aligned, not centred: the form is much taller than the copy, and centring the copy against it leaves a dead band of white space above the heading. */ .cpm-closer { grid-template-columns: 1fr 1fr; gap: 3.25rem; align-items: start; } .cpm-closer-body { padding-top: .35rem; } } .cpm-closer-lead { color: #4b5563; font-size: 1.08rem; line-height: 1.7; margin: 0 0 1.35rem; max-width: 46ch; } .dark .cpm-closer-lead { color: #9ca3af; } .cpm-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; } .cpm-ticks li { position: relative; padding-left: 1.9rem; font-weight: 700; color: #181111; line-height: 1.5; } .dark .cpm-ticks li { color: #fff; } .cpm-ticks li::before { content: ""; position: absolute; left: 0; top: .35rem; width: 18px; height: 8px; background: linear-gradient(105deg, transparent 0 1px, var(--color-cpm-blue, #0058A9) 1px 8px, transparent 8px), linear-gradient(105deg, transparent 0 9px, var(--color-primary, #E31F26) 9px 16px, transparent 16px); } /* Grid children of .cpm-findus / .cpm-closer. They carry no visual styling of their own, they exist so the two columns can be ordered independently on small screens (form and map first is worse: the visitor loses the context that motivates them). */ .cpm-findus-body, .cpm-closer-body { min-width: 0; } .cpm-closer-form { min-width: 0; } @media (max-width: 939px) { /* Explicit order on BOTH children. Setting it on only one leaves the other at the default 0, which floated the map above its own heading. */ .cpm-findus-body, .cpm-closer-body { order: 1; } .cpm-map, .cpm-closer-form { order: 2; } } /* ~35% of adults report motion sensitivity. Nothing here hides content, but the */ /* hover motion still stops when the visitor has asked for less of it. */ @media (prefers-reduced-motion: reduce) { .cpm-shot img, .cpm-map::after, .cpm-btn { transition: none; } .cpm-shot:hover img { transform: none; } .cpm-btn:hover { transform: none; } .cpm-map:hover::after { transform: translateY(100%); } }