/* ============================================================================ Buffalo Auto Mobile Steamer — site stylesheet Dark, premium, motion-led. One stylesheet, whole site. No framework. Modelled on the reference sites: dark hero with imagery, numbered process, three-tier packages, testimonial slider, standalone pages. ========================================================================== */ :root { /* ─── Surfaces (near-black, layered) ───────────────────────────────────── */ --bg: #070B11; --surface: #0C121B; --surface-2: #111A25; --surface-3: #17222F; --line: #1E2B3A; --line-soft: rgba(255,255,255,.07); /* ─── Accent ───────────────────────────────────────────────────────────── */ --accent: #35A0FF; --accent-dark: #1B7FD8; --accent-glow: rgba(53,160,255,.35); --gold: #D6A94C; /* ─── Ink ──────────────────────────────────────────────────────────────── */ --text: #E9EFF6; --text-2: #A9BACD; --muted: #7A8DA3; /* ─── Type ─────────────────────────────────────────────────────────────── */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* ─── Rhythm ───────────────────────────────────────────────────────────── */ --wrap: 1200px; --radius: 18px; --radius-sm: 12px; --header-h: 78px; --ease: cubic-bezier(.22,.61,.36,1); } /* ─── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; /* The .reveal animations translate elements ±40px horizontally before they scroll into view, which widens the document and produces a horizontal scrollbar. Clipping must be on , not just , to stop it. `clip` rather than `hidden` because `hidden` creates a scroll container and would break position:sticky descendants. */ overflow-x: hidden; /* fallback for older browsers */ overflow-x: clip; } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.72; color: var(--text-2); background: var(--bg); overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: #6FBEFF; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { color: #fff; line-height: 1.14; margin: 0 0 .55em; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 900; } h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); } h3 { font-size: clamp(1.15rem, 2.1vw, 1.45rem); } p { margin: 0 0 1.15em; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent); color: #fff; } /* ─── Layout ──────────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; } .narrow { max-width: 780px; } section { padding: clamp(64px, 9vw, 130px) 0; position: relative; } .sec-surface { background: var(--surface); } .sec-line { border-top: 1px solid var(--line); } .center { text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); } .eyebrow.center-line::after { content: ""; width: 26px; height: 2px; background: var(--accent); } .lead { font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: var(--text-2); } .sec-head { max-width: 740px; margin: 0 auto clamp(44px, 6vw, 70px); text-align: center; } .sec-head .eyebrow { justify-content: center; } .sec-head p:last-child { margin-bottom: 0; } /* ─── Motion system ───────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity .85s var(--ease), transform .85s var(--ease); transition-delay: var(--d, 0ms); will-change: opacity, transform; } .reveal.left { transform: translateX(-40px); } .reveal.right { transform: translateX(40px); } .reveal.zoom { transform: scale(.94); } .reveal.is-in { opacity: 1; transform: none; } /* ─── Buttons ─────────────────────────────────────────────────────────────── */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 32px; border-radius: 100px; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; border: 1px solid transparent; cursor: pointer; text-align: center; transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .btn:hover { transform: translateY(-3px); } .btn:active { transform: translateY(-1px); } .btn-primary { background: var(--accent); color: #04121F; box-shadow: 0 10px 34px -10px var(--accent-glow); } .btn-primary:hover { background: #55B2FF; color: #04121F; box-shadow: 0 16px 44px -10px var(--accent-glow); } .btn-ghost { border-color: rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.03); } .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.09); color: #fff; } .btn-lg { padding: 19px 40px; font-size: 1.06rem; } .btn-block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } .btn-row.center { justify-content: center; } /* ─── Header ──────────────────────────────────────────────────────────────── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease); border-bottom: 1px solid transparent; } .site-header.stuck { background: rgba(7,11,17,.86); backdrop-filter: saturate(180%) blur(16px); border-bottom-color: var(--line); } .site-header .bar { height: var(--header-h); display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; letter-spacing: -.03em; } .brand:hover { color: #fff; } /* The BAMS crest, sized by HEIGHT so any future aspect ratio still works. drop-shadow follows the alpha shape; box-shadow would draw a rectangle around the transparent bounding box. 54px, not the 42px used for the previous logo: this is a detailed crest with a buffalo, a car and a wordmark inside it, and below about 50px it collapses into a smudge. Compared at 42 / 50 / 56px before settling here. */ .brand-mark { height: 54px; width: auto; flex: 0 0 auto; display: block; filter: drop-shadow(0 5px 14px rgba(12, 124, 249, .3)); } .brand-name { font-weight: 900; font-size: 1.02rem; line-height: 1.15; } .brand-name small { display: block; font-size: .6rem; font-weight: 600; color: var(--muted); letter-spacing: .18em; text-transform: uppercase; margin-top: 2px; } .nav { margin-left: auto; display: flex; align-items: center; gap: 34px; } .nav a { color: var(--text-2); font-weight: 600; font-size: .93rem; position: relative; padding: 4px 0; } .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: width .3s var(--ease); } .nav a:hover { color: #fff; } .nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; } .nav a[aria-current="page"] { color: #fff; } .header-cta { display: flex; align-items: center; gap: 14px; } .tel-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; white-space: nowrap; font-size: .93rem; } .tel-link:hover { color: var(--accent); } .nav-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; align-items: center; justify-content: center; color: #fff; } .nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; position: relative; transition: background .2s; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff; transition: transform .3s var(--ease); } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } /* ─── Hero ────────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 88vh; display: flex; align-items: center; padding: calc(var(--header-h) + 70px) 0 90px; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; transform: scale(1.08); } .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--bg) 12%, rgba(7,11,17,.86) 46%, rgba(7,11,17,.42) 100%), linear-gradient(to top, var(--bg) 2%, transparent 40%); } .hero .wrap { position: relative; z-index: 2; } /* Wide enough that the headline settles on two lines, never three */ .hero-inner { max-width: 920px; } .hero h1 { margin-bottom: .38em; text-wrap: pretty; } .hero h1 .hl { color: var(--accent); } /* ─── Sales-letter hero (quote.html only) ────────────────────────────────── Centred, long-form structure carried over from the sibling funnels (solar_funnel, salesfunnel): eyebrow → "How to" outcome + a "without" clause naming the obstacles → pain, solution, what to expect → open loop. index.html keeps its short left-aligned hero. Do not merge the two. */ .hero-inner.center { margin-inline: auto; } .hero-inner.center .lead { max-width: 60ch; margin-inline: auto; } /* The sales hero carries far more copy than the homepage one, so it needs clear space beneath it or the last paragraph lands on top of the scroll cue (which is absolutely positioned at bottom: 30px). The cue is hidden below 900px, so the extra room is only needed above that. */ .hero-sales { padding-bottom: 170px; } @media (max-width: 900px) { .hero-sales { padding-bottom: 68px; } } /* The "without" clause. Sized with clamp rather than em: at `em` it inherits the h1's own clamp and collapses to ~10px on a phone. */ .h1-without { display: block; margin-top: .62em; font-size: clamp(.78rem, 1.45vw, 1.02rem); font-weight: 800; line-height: 1.55; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-wrap: balance; } /* Open loop — the reason to keep scrolling, in place of a hero button. */ .hero-openloop { max-width: 58ch; margin: 26px auto 0; color: var(--muted); font-style: italic; font-size: .96rem; line-height: 1.75; } .hero-openloop b { color: var(--text-2); font-style: normal; } .hero .lead { max-width: 600px; margin-bottom: 34px; } .pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 100px; margin-bottom: 26px; background: rgba(53,160,255,.1); border: 1px solid rgba(53,160,255,.3); color: #8CCBFF; font-size: .8rem; font-weight: 700; letter-spacing: .04em; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 4px rgba(74,222,128,.18); } .hero-stats { display: flex; flex-wrap: wrap; gap: 44px; margin-top: 56px; } .stat .n { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 900; color: #fff; line-height: 1; letter-spacing: -.04em; } .stat .n .suffix { color: var(--accent); } .stat .l { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; margin-top: 10px; } .scroll-cue { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3; color: var(--muted); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 10px; } .scroll-cue .line { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--accent), transparent); animation: cue 2s ease-in-out infinite; } @keyframes cue { 0%,100% { opacity: .25; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } } /* ─── Page hero (inner pages) ─────────────────────────────────────────────── */ .page-hero { position: relative; padding: calc(var(--header-h) + 84px) 0 76px; overflow: hidden; border-bottom: 1px solid var(--line); } .page-hero-bg { position: absolute; inset: 0; z-index: 0; } .page-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; } .page-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(7,11,17,.72), var(--bg) 92%); } .page-hero .wrap { position: relative; z-index: 2; } .page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); } .page-hero .lead { max-width: 660px; } .crumbs { font-size: .84rem; color: var(--muted); margin-bottom: 18px; letter-spacing: .04em; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--accent); } .crumbs span { margin: 0 8px; opacity: .5; } /* ─── Marquee (trust strip) ───────────────────────────────────────────────── */ .marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); padding: 20px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; gap: 56px; width: max-content; animation: slide 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-item { display: inline-flex; align-items: center; gap: 11px; white-space: nowrap; color: var(--text-2); font-weight: 600; font-size: .94rem; } .marquee-item b { color: #fff; font-weight: 800; } @keyframes slide { to { transform: translateX(-50%); } } /* ─── Cards / grids ───────────────────────────────────────────────────────── */ .grid { display: grid; gap: 26px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { position: relative; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); } .card::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(420px 200px at 50% 0%, rgba(53,160,255,.14), transparent 70%); transition: opacity .4s var(--ease); pointer-events: none; } .card:hover { transform: translateY(-7px); border-color: rgba(53,160,255,.42); } .card:hover::before { opacity: 1; } .card h3 { margin-bottom: .45em; } .card p:last-child { margin-bottom: 0; } .card-icon { width: 56px; height: 56px; border-radius: 15px; margin-bottom: 22px; background: rgba(53,160,255,.1); border: 1px solid rgba(53,160,255,.22); color: var(--accent); display: grid; place-items: center; font-size: 1.5rem; transition: transform .4s var(--ease); } .card:hover .card-icon { transform: scale(1.08) rotate(-4deg); } .card-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 700; font-size: .92rem; color: var(--accent); } .card:hover .card-more { gap: 13px; } .card-more { transition: gap .3s var(--ease); } /* Service card with image */ .svc-card { padding: 0; } .svc-media { position: relative; aspect-ratio: 16/11; overflow: hidden; } .svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .card:hover .svc-media img { transform: scale(1.07); } .svc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--surface-2) 4%, transparent 62%); } .svc-body { padding: 26px 30px 32px; position: relative; z-index: 1; } .svc-tag { position: absolute; top: 16px; left: 16px; z-index: 2; background: rgba(7,11,17,.78); backdrop-filter: blur(8px); border: 1px solid var(--line-soft); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border-radius: 100px; } /* ─── Process steps ───────────────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .step { position: relative; padding-top: 8px; } .step-n { font-size: 3.2rem; font-weight: 900; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(53,160,255,.45); margin-bottom: 18px; transition: color .4s var(--ease); } .step:hover .step-n { color: rgba(53,160,255,.16); } .step h3 { margin-bottom: .5em; } .step p { margin: 0; font-size: .97rem; } .step::after { content: ""; position: absolute; top: 26px; right: -13px; width: 26px; height: 1px; background: linear-gradient(90deg, var(--line), transparent); } .step:last-child::after { display: none; } /* ─── Split / feature rows ────────────────────────────────────────────────── */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 82px); align-items: center; } .split.reverse .split-media { order: 2; } .split-media { position: relative; } .split-media img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/3; object-fit: cover; } .split-media::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-soft), inset 0 -80px 90px -50px rgba(7,11,17,.9); pointer-events: none; } /* Sits inside the image's right edge, never past it — a negative `right` here pushed the document wider than the viewport at 1024px and below. */ .media-badge { position: absolute; bottom: -20px; right: 14px; z-index: 3; background: var(--accent); color: #04121F; border-radius: 16px; padding: 18px 24px; box-shadow: 0 18px 44px -14px var(--accent-glow); } .media-badge .n { font-size: 1.8rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; } .media-badge .l { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-top: 5px; opacity: .82; } .checklist { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 15px; } .checklist li { display: flex; gap: 14px; align-items: flex-start; } .checklist .tick { flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%; margin-top: 3px; background: rgba(53,160,255,.13); color: var(--accent); display: grid; place-items: center; font-size: .8rem; font-weight: 900; border: 1px solid rgba(53,160,255,.26); } .checklist b { color: #fff; } /* ─── Pain list ───────────────────────────────────────────────────────────── */ .painlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; } .painlist li { display: flex; gap: 17px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 22px 26px; transition: transform .35s var(--ease), border-color .35s var(--ease); } .painlist li:hover { transform: translateX(7px); border-left-color: #6FBEFF; } .painlist .ic { flex: 0 0 auto; font-size: 1.3rem; line-height: 1.35; } .painlist p { margin: 0; } .painlist b { color: #fff; } /* ─── Packages ────────────────────────────────────────────────────────────── */ .pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; } .pkg { position: relative; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 38px 32px; transition: transform .4s var(--ease), border-color .4s var(--ease); } .pkg:hover { transform: translateY(-8px); border-color: rgba(53,160,255,.45); } .pkg.featured { border-color: var(--gold); background: linear-gradient(180deg, rgba(214,169,76,.07), var(--surface-2) 40%); } .pkg.featured:hover { border-color: #E8C270; } .pkg-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #1A1206; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; padding: 7px 18px; border-radius: 100px; white-space: nowrap; } .pkg-name { font-size: 1.28rem; font-weight: 800; color: #fff; margin-bottom: 6px; letter-spacing: -.02em; } .pkg-tag { font-size: .88rem; color: var(--muted); margin-bottom: 24px; } .pkg-price { display: flex; align-items: baseline; gap: 8px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); } .pkg-price .from { font-size: .82rem; color: var(--muted); font-weight: 600; } .pkg-price .amt { font-size: 2.4rem; font-weight: 900; color: #fff; letter-spacing: -.04em; line-height: 1; } .pkg-price .per { font-size: .84rem; color: var(--muted); } .pkg ul { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 13px; } .pkg ul li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; } .pkg ul .tick { flex: 0 0 auto; color: var(--accent); font-weight: 900; } .pkg.featured ul .tick { color: var(--gold); } .pkg ul .no { flex: 0 0 auto; color: var(--muted); font-weight: 900; } .pkg ul li.off { color: var(--muted); } /* ─── Testimonial slider ──────────────────────────────────────────────────── */ .slider { position: relative; overflow: hidden; } .slider-track { display: flex; transition: transform .7s var(--ease); } .slide { min-width: 100%; padding: 0 4px; } .quote-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(30px, 4vw, 52px); max-width: 820px; margin-inline: auto; text-align: center; } .quote-card .mark { font-size: 3.4rem; line-height: .6; color: var(--accent); opacity: .45; margin-bottom: 22px; } .quote-card .stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 20px; font-size: 1.05rem; } .quote-card blockquote { margin: 0 0 26px; font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--text); line-height: 1.66; font-weight: 500; } .quote-card figcaption { font-size: .92rem; color: var(--muted); } .quote-card figcaption b { display: block; color: #fff; font-weight: 800; font-size: 1rem; margin-bottom: 3px; } /* ─── Brand punchline ───────────────────────────────────────────────────────── The strapline block on contact.html. Deliberately NOT .quote-card: that one is a customer testimonial (stars, a name, a town) and this is the business speaking, so it needs to read differently or it looks like a fake review. The panel is darker than the page (#04070C against --bg #070B11). A black box on a near-black background reads as a hole rather than an object, so it needs the hairline border, the accent edge and the corner glow to give it a shape. Remove those and the box disappears. */ .punchline { position: relative; overflow: hidden; margin: 0; background: #04070C; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: clamp(30px, 5vw, 56px) clamp(24px, 5vw, 60px); box-shadow: 0 26px 64px -34px #000; } /* Corner glow — lifts the panel off the page without a visible gradient edge. */ .punchline::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(115% 85% at 100% 0%, rgba(53,160,255,.11), transparent 62%); } /* The bull, bled off the bottom-right corner as a watermark. Very low opacity: it should register as texture, never compete with the words. */ .punchline__bull { position: absolute; right: -34px; top: 50%; transform: translateY(-50%); height: 235px; width: auto; opacity: .06; pointer-events: none; user-select: none; } .punchline__mark { position: relative; font-family: Georgia, 'Times New Roman', serif; font-size: 4.2rem; line-height: .5; color: var(--accent); opacity: .55; margin-bottom: 20px; } .punchline blockquote { position: relative; margin: 0; font-size: clamp(1.22rem, 3vw, 1.95rem); font-weight: 800; line-height: 1.42; letter-spacing: -.02em; color: #fff; text-wrap: balance; } .punchline figcaption { position: relative; margin-top: 24px; font-size: .76rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .punchline figcaption::before { content: ""; display: inline-block; vertical-align: middle; width: 22px; height: 2px; background: var(--accent); margin-right: 12px; } @media (max-width: 560px) { .punchline { padding: 28px 22px; } .punchline__mark { font-size: 3.2rem; margin-bottom: 14px; } .punchline__bull { height: 150px; right: -40px; opacity: .05; } } /* Image slide — used by the "what a proper clean looks like" slider on quote.html. A fixed aspect-ratio is what keeps every slide the same height; without it the track jumps as each image loads. */ .media-slide { position: relative; border-radius: var(--radius); overflow: hidden; } .media-slide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); } .media-slide::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-soft), inset 0 -120px 130px -70px rgba(7,11,17,.92); pointer-events: none; } .media-slide-label { position: absolute; left: 16px; bottom: 16px; z-index: 2; max-width: calc(100% - 32px); background: rgba(7,11,17,.74); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px; color: var(--text-2); font-size: .82rem; line-height: 1.45; } .media-slide-label b { display: block; color: #fff; font-size: .96rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 2px; } @media (max-width: 620px) { .media-slide img { aspect-ratio: 4 / 3; } .media-slide-label { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 10px 14px; font-size: .76rem; } .media-slide-label b { font-size: .88rem; } } .slider-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 34px; } .slider-btn { width: 48px; height: 48px; border-radius: 50%; cursor: pointer; background: var(--surface-2); border: 1px solid var(--line); color: #fff; display: grid; place-items: center; font-size: 1.1rem; transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .slider-btn:hover { background: var(--accent); border-color: var(--accent); color: #04121F; transform: scale(1.08); } .slider-dots { display: flex; gap: 9px; } .slider-dots button { width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer; background: var(--line); border: 0; transition: background .3s var(--ease), width .3s var(--ease); } .slider-dots button.on { background: var(--accent); width: 28px; border-radius: 100px; } /* ─── FAQ ─────────────────────────────────────────────────────────────────── */ .faq { max-width: 880px; margin-inline: auto; display: grid; gap: 14px; } .faq details { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .3s var(--ease); } .faq details[open] { border-color: rgba(53,160,255,.4); } .faq summary { cursor: pointer; list-style: none; padding: 24px 60px 24px 26px; font-weight: 700; color: #fff; font-size: 1.03rem; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(53,160,255,.12); color: var(--accent); display: grid; place-items: center; font-size: 1.25rem; line-height: 1; transition: transform .3s var(--ease), background .3s var(--ease); } .faq details[open] summary::after { content: "\2013"; transform: translateY(-50%) rotate(180deg); background: var(--accent); color: #04121F; } .faq .faq-body { padding: 0 26px 26px; } .faq .faq-body p:last-child { margin-bottom: 0; } /* ─── Areas ───────────────────────────────────────────────────────────────── */ .area-tags { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-top: 34px; } .area-tags span { background: var(--surface-2); border: 1px solid var(--line); border-radius: 100px; padding: 11px 22px; font-size: .92rem; font-weight: 600; color: var(--text-2); transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .area-tags span:hover { border-color: var(--accent); color: #fff; transform: translateY(-3px); } /* ─── Form ────────────────────────────────────────────────────────────────── */ .form-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 4vw, 46px); } .form-card h3 { margin-bottom: .35em; } .form-intro { color: var(--muted); font-size: .96rem; margin-bottom: 28px; } .field { margin-bottom: 20px; } .field label { display: block; font-weight: 700; font-size: .86rem; color: var(--text); margin-bottom: 9px; letter-spacing: .01em; } .field .req { color: var(--accent); } .field input, .field select, .field textarea { width: 100%; padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 1rem; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); } .field input::placeholder, .field textarea::placeholder { color: #5A6C80; } .field textarea { min-height: 124px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface-3); box-shadow: 0 0 0 4px rgba(53,160,255,.13); } .field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #F87171; box-shadow: 0 0 0 4px rgba(248,113,113,.12); } .field .err-msg { display: none; color: #FCA5A5; font-size: .84rem; font-weight: 600; margin-top: 7px; } .field .err-msg.show { display: block; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field select { appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8DA3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 19px; padding-right: 44px; } .consent { display: flex; gap: 13px; align-items: flex-start; margin: 24px 0; } .consent input { width: 20px; height: 20px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--accent); } .consent label { font-size: .87rem; color: var(--muted); line-height: 1.6; font-weight: 500; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-foot { font-size: .85rem; color: var(--muted); text-align: center; margin: 16px 0 0; } .form-alert { display: none; margin-bottom: 22px; padding: 15px 18px; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 600; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.34); color: #FCA5A5; } .form-alert.show { display: block; } /* ─── Contact tiles ───────────────────────────────────────────────────────── */ .contact-tile { display: flex; gap: 20px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; transition: transform .35s var(--ease), border-color .35s var(--ease); } .contact-tile:hover { transform: translateX(7px); border-color: rgba(53,160,255,.45); } .contact-tile .ic { width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto; background: rgba(53,160,255,.1); border: 1px solid rgba(53,160,255,.22); color: var(--accent); display: grid; place-items: center; font-size: 1.35rem; } .contact-tile b { display: block; color: #fff; font-size: 1.05rem; font-weight: 800; margin-bottom: 2px; } .contact-tile span { color: var(--muted); font-size: .9rem; } /* ─── CTA band ────────────────────────────────────────────────────────────── */ .cta-band { position: relative; overflow: hidden; text-align: center; } .cta-bg { position: absolute; inset: 0; z-index: 0; } .cta-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; } .cta-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--bg) 5%, rgba(7,11,17,.72) 50%, var(--bg) 95%); } .cta-band .wrap { position: relative; z-index: 2; } .cta-band .lead { max-width: 640px; margin-inline: auto; } /* ─── Footer ──────────────────────────────────────────────────────────────── */ .site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 86px) 0 0; font-size: .94rem; } .site-footer a { color: var(--text-2); } .site-footer a:hover { color: var(--accent); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.25fr; gap: 46px 34px; } .site-footer h4 { color: #fff; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 20px; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .footer-brand .brand { margin-bottom: 18px; } .footer-brand p { max-width: 310px; color: var(--muted); } .footer-bottom { margin-top: clamp(40px, 5vw, 60px); padding: 24px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; font-size: .86rem; color: var(--muted); } .footer-bottom .links { display: flex; flex-wrap: wrap; gap: 22px; } /* ─── Sales page: them vs us comparison ──────────────────────────────────── */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .compare-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; } .compare-col.bad { border-color: rgba(248,113,113,.28); } .compare-col.good { border-color: rgba(53,160,255,.45); background: linear-gradient(180deg, rgba(53,160,255,.06), var(--surface-2) 45%); } .compare-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .compare-head .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 1.2rem; flex: 0 0 auto; } .compare-col.bad .compare-head .ic { background: rgba(248,113,113,.12); color: #F87171; } .compare-col.good .compare-head .ic { background: rgba(53,160,255,.12); color: var(--accent); } .compare-head b { color: #fff; font-size: 1.08rem; font-weight: 800; display: block; } .compare-head span { color: var(--muted); font-size: .84rem; } .compare ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .compare ul li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; } .compare ul li .m { flex: 0 0 auto; font-weight: 900; } .compare-col.bad ul li .m { color: #F87171; } .compare-col.good ul li .m { color: var(--accent); } /* ─── Sales page: guarantee / callout panel ──────────────────────────────── */ .panel { background: linear-gradient(150deg, rgba(53,160,255,.09), var(--surface-2) 55%); border: 1px solid rgba(53,160,255,.32); border-radius: var(--radius); padding: clamp(28px, 4vw, 46px); text-align: center; } .panel .seal { width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%; background: rgba(53,160,255,.14); border: 1px solid rgba(53,160,255,.36); color: var(--accent); display: grid; place-items: center; font-size: 2rem; } .panel h3 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin-bottom: .5em; } .panel p:last-child { margin-bottom: 0; } .notice { display: flex; gap: 14px; align-items: flex-start; background: rgba(214,169,76,.08); border: 1px solid rgba(214,169,76,.3); border-radius: var(--radius-sm); padding: 18px 22px; margin: 0 0 28px; } .notice .ic { flex: 0 0 auto; font-size: 1.2rem; } .notice p { margin: 0; font-size: .95rem; } .notice b { color: var(--gold); } /* ─── Login ───────────────────────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; } .login-card { width: 100%; max-width: 420px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 4vw, 42px); } /* display:flex, not the inherited inline-flex — an inline-level box ignores `margin: auto`, so the lockup sat left of centre. */ .login-card .brand { display: flex; margin: 0 auto 26px; justify-content: center; } .login-card h1 { font-size: 1.5rem; text-align: center; margin-bottom: .4em; } .login-card .sub { text-align: center; color: var(--muted); font-size: .92rem; margin-bottom: 28px; } /* ─── Analytics dashboard ─────────────────────────────────────────────────── */ .dash-bar { position: sticky; top: 0; z-index: 50; background: rgba(7,11,17,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding: 14px 0; } .dash-bar .inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .dash-bar .spacer { flex: 1 1 auto; } .src-tag { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; padding: 7px 14px; border-radius: 100px; white-space: nowrap; } .src-tag.live { background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.34); color: #4ADE80; } .src-tag.local { background: rgba(214,169,76,.12); border: 1px solid rgba(214,169,76,.34); color: var(--gold); } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; } .kpi { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px 24px; } .kpi .v { font-size: 2rem; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -.03em; } .kpi .k { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-top: 10px; } .table-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); overflow-x: auto; -webkit-overflow-scrolling: touch; } table.dash { width: 100%; border-collapse: collapse; font-size: .89rem; min-width: 640px; } table.dash th, table.dash td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } table.dash th { background: var(--surface-3); color: #fff; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; position: sticky; top: 0; } table.dash tbody tr:last-child td { border-bottom: 0; } table.dash tbody tr:hover { background: rgba(53,160,255,.05); } table.dash td.wrap-cell { white-space: normal; min-width: 200px; } .chip { display: inline-block; padding: 4px 11px; border-radius: 100px; font-size: .72rem; font-weight: 800; letter-spacing: .03em; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--line); } .chip.pageview { background: rgba(53,160,255,.12); color: #6FBEFF; border-color: rgba(53,160,255,.3); } .chip.click { background: rgba(214,169,76,.12); color: var(--gold); border-color: rgba(214,169,76,.3); } .chip.call_click, .chip.whatsapp_click { background: rgba(74,222,128,.12); color: #4ADE80; border-color: rgba(74,222,128,.3); } .chip.form_submit { background: rgba(167,139,250,.14); color: #C4B5FD; border-color: rgba(167,139,250,.32); } .chip.scroll_depth { background: rgba(255,255,255,.05); } .bar-row { display: grid; grid-template-columns: 1fr; gap: 12px; } .bar-item { display: grid; grid-template-columns: 190px 1fr 56px; gap: 14px; align-items: center; font-size: .9rem; } .bar-item .lbl { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-item .track { height: 9px; background: var(--surface-3); border-radius: 100px; overflow: hidden; } .bar-item .fill { height: 100%; background: linear-gradient(90deg, var(--accent-dark), var(--accent)); border-radius: 100px; } .bar-item .num { text-align: right; color: #fff; font-weight: 800; } .empty-state { text-align: center; padding: 60px 24px; color: var(--muted); } .empty-state .ic { font-size: 2.6rem; margin-bottom: 16px; } /* ─── Floating WhatsApp widget ────────────────────────────────────────────── */ /* Resting state is a true circle — padding must be 0, or the pill sits wider than it is tall and leaves dead space to the right of the icon. The right padding only appears on hover, to give the label room. */ .wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 95; display: inline-flex; align-items: center; gap: 0; height: 56px; padding: 0; background: #25D366; color: #fff; border-radius: 100px; box-shadow: 0 12px 34px -8px rgba(37,211,102,.5); text-decoration: none; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), padding .35s var(--ease); } .wa-float:hover { color: #fff; text-decoration: none; transform: translateY(-3px); box-shadow: 0 18px 44px -8px rgba(37,211,102,.6); padding-right: 22px; } .wa-float .wa-ic { width: 56px; height: 56px; display: grid; place-items: center; flex: 0 0 auto; } .wa-float .wa-ic svg { width: 27px; height: 27px; fill: #fff; } .wa-float .wa-label { max-width: 0; opacity: 0; white-space: nowrap; font-weight: 700; font-size: .95rem; letter-spacing: -.01em; transition: max-width .35s var(--ease), opacity .25s var(--ease); } .wa-float:hover .wa-label { max-width: 220px; opacity: 1; } /* Gentle attention pulse — stops once hovered */ .wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 100px; box-shadow: 0 0 0 0 rgba(37,211,102,.55); animation: waPulse 2.6s ease-out infinite; pointer-events: none; } .wa-float:hover::after { animation: none; } @keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 18px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } /* ─── Sticky mobile bar ───────────────────────────────────────────────────── */ .mobile-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: rgba(12,18,27,.96); backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 11px 14px calc(11px + env(safe-area-inset-bottom)); gap: 11px; } .mobile-bar .btn { flex: 1 1 0; padding: 15px 10px; font-size: .95rem; } /* ─── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } .step:nth-child(2)::after { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .nav-toggle { display: flex; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 22px 26px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .nav.open { opacity: 1; transform: none; pointer-events: auto; } .nav a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; } .nav a::after { display: none; } .header-cta { display: none; } .split, .grid-3, .grid-2, .pkg-grid, .compare { grid-template-columns: 1fr; } .split.reverse .split-media { order: 0; } .bar-item { grid-template-columns: 130px 1fr 48px; } .hero { min-height: auto; padding-top: calc(var(--header-h) + 56px); } .page-hero { padding: calc(var(--header-h) + 52px) 0 56px; } .hero-stats { gap: 28px 40px; } .scroll-cue { display: none; } .media-badge { right: 14px; bottom: -18px; } /* The header CTA and phone number disappear at this width, so the sticky call bar has to take over here — not at 620px, or tablets are left with no visible phone number and no call to action at all. */ .mobile-bar { display: flex; } .mobile-bar .btn { width: auto; } body.has-mobile-bar { padding-bottom: 84px; } /* The label is hidden here, so the button stays a fixed circle at all times. */ .wa-float { right: 16px; bottom: 96px; height: 50px; padding: 0; } .wa-float .wa-ic { width: 50px; height: 50px; } .wa-float .wa-ic svg { width: 25px; height: 25px; } .wa-float .wa-label { display: none; } } @media (max-width: 620px) { body { font-size: 16px; } .grid-4, .steps { grid-template-columns: 1fr; } .step::after { display: none; } .footer-grid { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .btn-row .btn, .form-card .btn, .pkg .btn { width: 100%; } .btn-row { flex-direction: column; } .hero-stats { gap: 24px 32px; } .stat .n { font-size: 1.7rem; } .quote-card .mark { font-size: 2.6rem; } .slider-nav { gap: 12px; } section { padding: 58px 0; } /* More specific than the base h1 rule, so it has to be restated here or it wins and inner-page headlines run to four lines on a phone. */ .page-hero h1 { font-size: clamp(1.7rem, 6.2vw, 2.3rem); } } /* Small handsets (iPhone SE and similar) — keep the H1 to two lines and stop long words such as "contact@buffaloautomobilesteamer.co.uk" pushing the layout wide. */ @media (max-width: 400px) { :root { --wrap: 100%; } .wrap { padding-inline: 18px; } h1 { font-size: 1.85rem; } .page-hero h1 { font-size: 1.65rem; } h2 { font-size: 1.5rem; } .hero .lead, .page-hero .lead { font-size: 1rem; } .pill { font-size: .74rem; padding: 7px 14px; } .brand-mark { height: 46px; } .brand-name { font-size: .95rem; } .contact-tile { gap: 14px; padding: 18px 18px; } .contact-tile b { font-size: .98rem; } .site-footer, .footer-bottom { word-break: break-word; } .area-tags span { padding: 9px 15px; font-size: .86rem; } } /* Touch devices: :hover sticks after a tap, so lift-on-hover effects leave cards visibly stuck in their hovered state. Neutralise them for coarse pointers and keep the colour/border feedback only. */ @media (hover: none) { .card:hover, .pkg:hover, .painlist li:hover, .contact-tile:hover, .area-tags span:hover, .btn:hover { transform: none; } .card:hover .svc-media img, .card:hover .card-icon { transform: none; } /* padding-right must be 0, not 8px — a sticky :hover after a tap would otherwise leave the circle permanently widened on the right. */ .wa-float:hover { transform: none; padding-right: 0; } .slider-btn:hover { transform: none; } } /* ─── Reduced motion ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .marquee-track { animation: none; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ─── Print ───────────────────────────────────────────────────────────────── */ @media print { .site-header, .mobile-bar, .cta-band, .btn, .scroll-cue { display: none !important; } body { background: #fff; color: #000; } }