/* ============================================================ CATT Bid Connect — page skin A single-page, CATT-branded landing that reuses the shared Bedrok scroll-hero + components but replaces the Bedrok teal / dark-navy scheme entirely with CATT branding, whose primary color is green (#22845a, the exact green in the logo mark). The 2022 guide's other swatches (teal #15626b, Gold #f19d3f, Presidential Blue #7395ca) are reserved for occasional accents. All re-branding is scoped to `.brand-catt` on , so the Bedrok pages are untouched. Note the raw-token overrides below (`--raw-navy-900`, etc.) — the shared scroll-hero.css references those directly, so re-pointing them here recolors the hero chrome without editing the shared file. ============================================================ */ .brand-catt { /* ---- CATT palette ---- Primary green matches the LIVE CATT Bid Connect forms (the opt-in / bid pages at bedroklabs.com) so the landing page and the real product read as one experience: form green #1a661a with its #e8f7e8 tint. */ --raw-catt-600: #1a661a; /* CATT Bid Connect green (rgb 26,102,26) */ --raw-catt-700: #145214; /* darker green — hover/strong */ --raw-catt-800: #0f3d0f; /* deep green — bands */ --raw-catt-300: #4fb84f; /* light green — accents on dark */ --raw-catt-050: #e8f7e8; /* soft green tint — matches the forms */ --raw-catt-ink: #0c1c14; /* near-black forest — dark surfaces */ /* Guideline accent swatches — sparing use only, never as primary */ --raw-catt-gold: #f19d3f; /* Gold */ --raw-catt-blue: #7395ca; /* Presidential Blue */ --raw-catt-teal: #15626b; /* guide "CATT Green" (teal) — accent only */ /* Re-point the shared "navy" raw token (used by scroll-hero.css) to dark forest so no blue survives anywhere on the page. */ --raw-navy-900: var(--raw-catt-ink); /* ---- Semantic tokens → CATT green ---- */ --color-primary: var(--raw-catt-600); --color-primary-strong: var(--raw-catt-700); --color-primary-soft: var(--raw-catt-050); --color-on-primary: #ffffff; --focus-ring: 0 0 0 3px rgb(26 102 26 / 0.35); } /* Dark bands inside the CATT page: deep forest green. Solid buttons use the true CATT green (#1a661a) with white text so they match the header and footer exactly; the light green stays only for the hero accents. */ .brand-catt .theme-dark { --color-primary: var(--raw-catt-600); --color-primary-strong: var(--raw-catt-700); --color-primary-soft: rgb(79 184 79 / 0.16); --color-on-primary: #ffffff; --color-canvas: var(--raw-catt-ink); --color-surface: #12271c; --color-surface-elevated: #173224; --focus-ring: 0 0 0 3px rgb(79 184 79 / 0.45); } /* Keep the final CTA heading to its two authored lines — line 2 ("Let the right pros come to you.") was ~10px wider than the shared 640px cap and spilled to a third line. The band has ample room. */ .brand-catt .cta-band h2 { max-width: 720px; } /* ============ Header — solid CATT green, no menu, two CTAs ============ The header overlays the timelapse hero (scroll-hero.css fixes it to the top). We replace the Bedrok dark-navy palette with CATT green and show both CTAs at every width (there is no nav menu on this page). */ .brand-catt .site-header { --color-canvas: var(--raw-catt-600); --color-text-primary: #ffffff; --color-text-secondary: rgb(255 255 255 / 0.9); --color-surface: rgb(255 255 255 / 0.16); --color-primary: #ffffff; /* solid CTA = white on green */ --color-primary-strong: #f1faf5; --color-on-primary: var(--raw-catt-700); --color-border: rgb(255 255 255 / 0.28); --color-border-strong: rgb(255 255 255 / 0.5); background: var(--raw-catt-600); /* solid, fully branded */ -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid rgb(0 0 0 / 0.12); } /* Undo the shared `content: url(bedrok-labs-logo-teal.png)` swap so the authored

renders (header + footer). */ .brand-catt .site-header .logo img, .brand-catt .site-footer .logo img { content: normal; } /* ============ Footer — CATT green with the white logo ============ Replaces the shared dark-navy footer palette with CATT green and white text/logos (see the white catt-logo + white Bedrok mark in the markup). */ .brand-catt .site-footer { --color-canvas: var(--raw-catt-600); --color-text-primary: #ffffff; --color-text-secondary: rgb(255 255 255 / 0.9); --color-text-meta: rgb(255 255 255 / 0.78); --color-border: rgb(255 255 255 / 0.24); --color-border-strong: rgb(255 255 255 / 0.4); background: var(--raw-catt-600); } .brand-catt .site-footer .logo img { height: 46px; } /* This page's footer has a brand block + three link columns; the shared grid reserves four link columns (leaving the right half empty). Fit the columns to the content so the footer reads full and balanced. */ @media (min-width: 1024px) { .brand-catt .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } } /* The logo links to ca-tt.com now — give it a clear pointer + hover. */ .brand-catt .site-footer .logo { transition: opacity var(--dur-fast) var(--ease-out); } .brand-catt .site-footer .logo:hover { opacity: 0.85; } .brand-catt .site-header .logo img { height: 42px; } /* Both CTAs always visible; no hamburger / mobile drawer on this page. */ .brand-catt .header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; } .brand-catt .nav-toggle { display: none; } /* The outline CTA (get bid alerts) reversed for the green bar. */ .brand-catt .site-header .btn-secondary { background: transparent; border-color: rgb(255 255 255 / 0.7); color: #ffffff; } .brand-catt .site-header .btn-secondary:hover { background: rgb(255 255 255 / 0.14); border-color: #ffffff; color: #ffffff; } /* Tertiary ghost CTA (join CATT) — softer than btn-secondary on the green bar. */ .brand-catt .site-header .btn-outline { background: transparent; border-color: rgb(255 255 255 / 0.45); color: rgb(255 255 255 / 0.85); } .brand-catt .site-header .btn-outline:hover { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.75); color: #ffffff; } /* Header CTAs need clearer hover feedback — the white primary button going to near-white on hover was imperceptible on the green bar. Add a lift + shadow on hover and a press-down on click. */ .brand-catt .site-header .btn { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .brand-catt .site-header .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 0 0 / 0.28); } .brand-catt .site-header .btn-secondary:hover, .brand-catt .site-header .btn-outline:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 0 0 / 0.2); } .brand-catt .site-header .btn-primary:active, .brand-catt .site-header .btn-secondary:active, .brand-catt .site-header .btn-outline:active { transform: translateY(0); box-shadow: 0 2px 8px rgb(0 0 0 / 0.22); } @media (prefers-reduced-motion: reduce) { .brand-catt .site-header .btn-primary:hover, .brand-catt .site-header .btn-secondary:hover, .brand-catt .site-header .btn-outline:hover { transform: none; } } @media (max-width: 520px) { .brand-catt .site-header .container { gap: var(--space-3); } .brand-catt .header-actions { gap: var(--space-2); } .brand-catt .site-header .btn { padding-inline: var(--space-4); } } /* ============ Hero — centered title that fades out on scroll ============ Driven by scroll-hero.js (data-scroll-hero-title); JS sets inline opacity as the timelapse scrubs. The transition here only smooths the reduced-motion / initial state. */ .brand-catt .scroll-hero-title { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); text-align: center; padding-inline: var(--inset); pointer-events: none; } /* Fade the heading + bubble individually (via --hero-fade set by scroll-hero.js). Fading the container instead would put opacity < 1 on an ancestor of the bubble, which disables its backdrop-filter blur. */ .brand-catt .scroll-hero-title h1, .brand-catt .scroll-hero-title .hero-sub { opacity: var(--hero-fade, 1); transition: opacity 0.25s ease; } /* Soft dark scrim behind the hero title so the logo (white + green) reads over any frame of the timelapse. Fades out with the title on scroll. */ .brand-catt .scroll-hero-title::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 46% at 50% 47%, rgb(6 16 20 / 0.62) 0%, rgb(6 16 20 / 0.4) 44%, rgb(6 16 20 / 0) 72%); opacity: var(--hero-fade, 1); transition: opacity 0.25s ease; pointer-events: none; } /* Official CATT Bid Connect lockup as the hero title. */ .brand-catt .scroll-hero-logo { margin: 0; line-height: 0; } .brand-catt .scroll-hero-logo img { display: block; width: min(92vw, 780px); height: auto; /* Tight shadow for depth + a dark halo so edges separate from the video. */ filter: drop-shadow(0 2px 5px rgb(0 0 0 / 0.6)) drop-shadow(0 0 22px rgb(0 0 0 / 0.55)); } .brand-catt .scroll-hero-title .hero-sub { margin: 0; display: inline-flex; align-items: baseline; gap: 0.4ch; flex-wrap: wrap; justify-content: center; color: #ffffff; font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 600; letter-spacing: -0.01em; padding: 0.5em 1em; border-radius: var(--radius-pill); background: rgb(12 28 20 / 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: 0 1px 3px rgb(0 0 0 / 0.5); } .brand-catt .scroll-hero-title .hero-sub strong { color: var(--raw-catt-300); font-weight: 800; } /* Hero chrome + narration accents → CATT green (shared CSS hardcodes teal). */ .brand-catt .scroll-hero-caption .accent { color: var(--raw-catt-300); } .brand-catt .scroll-hero-cue span::after { background: var(--raw-catt-300); } .brand-catt .scroll-hero-spinner { border-top-color: var(--raw-catt-300); } /* ============ Value / hook rows ============ */ .bc-hook .lead strong { color: var(--color-primary-strong); } /* Hook shown over a scenic Tahoe photo band (photo-bg.is-warm): keep the copy on the readable warm-washed left while the homes/forest breathe on the right. */ .bc-hook-copy { max-width: 33rem; } @media (min-width: 768px) { .brand-catt .bc-hook { display: grid; align-items: center; min-height: 460px; } } /* Benefit chips (the "worry-free" reassurance row) */ .bc-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; } @media (min-width: 640px) { .bc-benefits { grid-template-columns: repeat(2, 1fr); } } .bc-benefits li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .bc-benefits li .icon-tile { flex: none; } .bc-benefits li strong { display: block; margin-bottom: 2px; } .bc-benefits li span.b-copy { color: var(--color-text-secondary); font-size: var(--text-small); } /* ============ Project scope / scale spectrum ============ A linear "small job → new build" track: four nodes on a gradient line, with the icon fills deepening left→right to signal increasing scale. */ .scale-track { list-style: none; margin: var(--space-16) auto 0; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); position: relative; } /* Connecting gradient line through the icon centers (desktop only). */ @media (min-width: 720px) { .scale-track::before { content: ""; position: absolute; top: 44px; /* icon center (88px tall) */ left: 12%; right: 12%; height: 4px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--raw-catt-050) 0%, var(--color-primary) 100%); z-index: 0; } } .scale-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); } .scale-icon { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface-elevated); border: 2px solid var(--color-primary-soft); color: var(--color-primary-strong); box-shadow: var(--shadow-card); } .scale-icon .icon { width: 34px; height: 34px; } /* Progressive fill: white → green, reinforcing "small → large". */ .scale-node:nth-child(2) .scale-icon { background: var(--raw-catt-050); } .scale-node:nth-child(3) .scale-icon { background: color-mix(in srgb, var(--color-primary) 20%, #ffffff); } .scale-node:nth-child(4) .scale-icon { background: var(--color-primary); border-color: var(--color-primary); color: #ffffff; } .scale-label { font-weight: 700; line-height: 1.2; } .scale-eg { font-size: var(--text-small); color: var(--color-text-secondary); max-width: 18ch; } @media (max-width: 719.98px) { .scale-track { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-4); max-width: 460px; } .scale-icon { width: 72px; height: 72px; } .scale-icon .icon { width: 30px; height: 30px; } } /* ============ Submit methods (Call / Text / Web form) ============ */ .submit-methods .method { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); text-decoration: none; color: inherit; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); } .submit-methods .method:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--color-primary); } .submit-methods .method:focus-visible { outline: none; box-shadow: var(--focus-ring); } .submit-methods .method h3 { margin: 0; } .submit-methods .method .method-value { font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.01em; color: var(--color-primary-strong); } .submit-methods .method p { margin: 0; color: var(--color-text-secondary); } .submit-methods .method .method-go { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; color: var(--color-primary-strong); } .submit-methods .method .method-go .icon { width: 18px; height: 18px; transition: transform var(--dur-med) var(--ease-out); } .submit-methods .method:hover .method-go .icon { transform: translateX(4px); } /* ============ How it works — numbered steps ============ */ .bc-steps { counter-reset: bc-step; } .bc-steps .bc-step { position: relative; padding-left: 4.25rem; } .bc-steps .bc-step::before { counter-increment: bc-step; content: counter(bc-step); position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--color-primary); color: #ffffff; font-size: 1.35rem; font-weight: 800; } .bc-steps .bc-step h3 { margin: 0 0 var(--space-2); } .bc-steps .bc-step p { margin: 0; color: var(--color-text-secondary); } /* Vertical variant used beside an image in a .split */ .bc-steps.is-stacked { display: grid; gap: var(--space-6); margin-top: var(--space-6); } /* Copy column inside the image splits: comfortable vertical rhythm */ .bc-copy { display: flex; flex-direction: column; gap: var(--space-5); align-self: center; } /* Photos inside splits fill their column height cleanly on desktop. */ @media (min-width: 768px) { .brand-catt .split > .figure-photo { align-self: stretch; } .brand-catt .split > .figure-photo img { height: 100%; object-fit: cover; } } /* ============ Audience cards (homeowners / contractors) ============ */ .audience-card ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); } .audience-card ul li { position: relative; padding-left: 1.9rem; color: var(--color-text-secondary); } .audience-card ul li .icon { position: absolute; left: 0; top: 0.15em; width: 1.15rem; height: 1.15rem; color: var(--color-primary); } /* ============ "Powered by Bedrok" nod ============ */ .powered-by { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--text-small); color: var(--color-text-secondary); } .powered-by img { height: 20px; width: auto; display: block; } .footer-brand .powered-by { margin-top: var(--space-4); }