@charset "UTF-8"; /* ============================================================ Servicebook.ph — marketing site styles Builds on colors_and_type.css (design-system tokens; load it first). Sibling of Orderbook.ph's site: same section grammar, green family instead of navy. Sentence case everywhere; CTAs are mustard only; the hero carries the single allowed green→green-deep gradient. ============================================================ */ /* ----------- Base ----------- colors_and_type.css supplies :root tokens and @font-face only; its `.sb`-scoped element skin is intentionally not activated (no .sb class on ) so the marketing layout owns element styling. */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-x: hidden; font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-body); color: var(--fg-1); background: var(--bg-screen); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } button { font: inherit; } p { margin: 0; } ul, ol { list-style: none; padding: 0; margin: 0; } h1, h2, h3, h4 { margin: 0; text-wrap: balance; } .eyebrow { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-mustard); } .container { width: 100%; max-width: var(--screen-web); margin: 0 auto; padding: 0 20px; } @media (min-width: 768px) { .container { padding: 0 32px; } } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--sb-mustard); outline-offset: 3px; border-radius: var(--r-xs); } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; background: var(--sb-green-dark); color: var(--sb-white); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); padding: 10px 16px; border-radius: var(--r-sm); transform: translateY(-64px); opacity: 0; pointer-events: none; } .skip-link:focus-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } /* ----------- Type helpers on top of tokens ----------- */ .section-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 5vw, 40px); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--sb-green); margin: 0; } .section-sub { font-size: 17px; color: var(--fg-2); margin: var(--sp-3) 0 0; max-width: 56ch; line-height: 1.6; } .section-head { margin-bottom: var(--sp-8); } .section-head--center { text-align: center; } .section-head--center .section-sub { margin-left: auto; margin-right: auto; } .eyebrow { display: block; margin: 0 0 var(--sp-3); } .eyebrow--on-dark { color: var(--sb-mustard-light); } /* ----------- Buttons (mustard owns CTA) ----------- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-md); line-height: 1.2; min-height: var(--tap-target); padding: 12px 24px; border-radius: var(--r-md); text-align: center; transition: transform var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-med) var(--ease-std); } .btn:active { transform: scale(0.98); } .btn--primary { background: var(--sb-mustard); color: var(--sb-white); box-shadow: var(--shadow-fab); } .btn--primary:hover { background: #B8850A; color: var(--sb-white); text-decoration: none; } .btn--light { border: 1px solid rgba(255, 255, 255, 0.55); color: var(--sb-white); background: transparent; } .btn--light:hover { border-color: var(--sb-mustard-light); color: var(--sb-mustard-light); text-decoration: none; } .btn--sm { min-height: 38px; padding: 8px 16px; font-size: var(--fs-sm); } .btn--lg { padding: 14px 32px; font-size: var(--fs-lg); } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); } .btn-row--center { justify-content: center; } /* ----------- Store badges (Google Play + App Store) ----------- Ported from Orderbook.ph: transparent wrapper, alpha-following drop-shadow, mustard glow on hover. Badges always travel in pairs. */ .gp-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0; background: transparent; transition: transform var(--dur-fast) var(--ease-std); } .gp-btn img { height: 46px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(13, 64, 38, 0.10)) drop-shadow(0 4px 12px rgba(13, 64, 38, 0.14)); transition: filter 0.3s var(--ease-std); } .gp-btn:hover { transform: translateY(-2px); } .gp-btn:hover img { filter: drop-shadow(0 0 8px rgba(245, 200, 66, 0.95)) drop-shadow(0 0 22px rgba(245, 200, 66, 0.7)) drop-shadow(0 0 40px rgba(245, 200, 66, 0.40)); } .gp-btn:active { transform: translateY(0); } .gp-btn--sm { height: 34px; } .gp-btn--sm img { height: 34px; } .gp-btn--lg { height: 54px; } .gp-btn--lg img { height: 54px; } .store-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hero-copy .store-btns { margin-top: var(--sp-6); } .final-cta-copy .store-btns { margin-top: var(--sp-6); } .footer-brand .store-btns { margin-top: var(--sp-2); } .mobile-nav .store-btns { padding: 12px 0 4px; margin: 5px 0 0 4px; } .mobile-nav .store-btns .gp-btn { border-bottom: 0; padding: 0; margin: 0; } /* ----------- Header ----------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(253, 248, 239, 0.92); border-bottom: 1px solid var(--sb-border-soft); transition: box-shadow var(--dur-med) var(--ease-std); } .site-header.is-scrolled { box-shadow: var(--shadow-2); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: var(--sp-4); } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; color: var(--sb-green); font-size: 18px; letter-spacing: -0.01em; } .brand:hover { text-decoration: none; color: var(--sb-green); } .brand-logo { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; } .brand-wordmark { line-height: 1; } .brand-dot { color: var(--sb-mustard); } .primary-nav { display: none; gap: var(--sp-6); } .primary-nav a { font-weight: 600; font-size: 15px; color: var(--sb-green-dark); opacity: 0.82; transition: opacity var(--dur-fast) var(--ease-std); } .primary-nav a:hover { opacity: 1; text-decoration: none; color: var(--sb-green-dark); } /* Use Cases dropdown (desktop nav). Reveal on hover + focus-within (keyboard); an invisible ::before bridge spans the trigger-to-menu gap so the pointer can cross without the menu closing. */ .nav-dropdown { position: relative; display: flex; align-items: center; } .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-weight: 600; font-size: 15px; color: var(--sb-green-dark); opacity: 0.82; background: none; border: 0; padding: 0; cursor: pointer; transition: opacity var(--dur-fast) var(--ease-std); } .nav-dropdown:hover .nav-dropdown-trigger, .nav-dropdown:focus-within .nav-dropdown-trigger { opacity: 1; } .nav-dropdown-chevron { width: 11px; height: 11px; transition: transform var(--dur-fast) var(--ease-std); } .nav-dropdown:hover .nav-dropdown-chevron, .nav-dropdown:focus-within .nav-dropdown-chevron { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 210px; background: var(--sb-white); border: 1px solid var(--sb-border-soft); border-radius: var(--r-md); box-shadow: var(--shadow-3); padding: 6px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std); z-index: 120; } .nav-dropdown-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown-menu a { display: block; padding: 9px 12px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--sb-green-dark); opacity: 1; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-std); } .nav-dropdown-menu a:hover { background: var(--sb-cream-2); text-decoration: none; } .header-cta { display: flex; align-items: center; gap: var(--sp-3); } .header-cta .gp-btn { display: none; } .nav-toggle { width: 40px; height: 40px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: var(--r-sm); background: rgba(26, 92, 58, 0.08); cursor: pointer; } .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--sb-green-dark); border-radius: 2px; transition: transform var(--dur-med) var(--ease-std), opacity var(--dur-med) var(--ease-std); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav[hidden] { display: none; } .mobile-nav { background: var(--sb-cream); border-bottom: 1px solid var(--sb-border-soft); padding: var(--sp-4) 20px var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-1); } .mobile-nav a { font-weight: 600; font-size: 17px; padding: 12px 4px; border-bottom: 1px solid var(--sb-border-soft); color: var(--sb-green-dark); } .mobile-nav a:hover { text-decoration: none; } /* Use Cases group in the mobile nav (no hover on touch — shown as a labeled list). */ .mobile-nav-heading { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sb-mustard); padding: 16px 4px 6px; } .mobile-nav a.mobile-nav-sub { font-size: 15px; font-weight: 500; padding-left: 16px; } @media (min-width: 900px) { .primary-nav { display: flex; } .nav-toggle { display: none; } .header-cta .gp-btn { display: inline-flex; } .mobile-nav { display: none !important; } } main { padding-top: 64px; } /* ----------- Hero (the one allowed gradient) ----------- */ .hero { position: relative; background: linear-gradient(180deg, var(--sb-green) 0%, var(--sb-green-deep) 100%); color: var(--sb-white); padding: 64px 0 72px; overflow: hidden; } /* Film-grain dither across the hero. Chrome doesn't dither CSS gradients, so the long dark-green ramp (and the blurred glow washes over it) quantizes into visible horizontal bands — "two shades of green" seams. Fine noise breaks the bands up. Overlay blend is identity on white and black, so the flow cards stay clean; only the green midtones get the dither. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; opacity: 0.06; mix-blend-mode: overlay; } .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: var(--sp-10); align-items: center; } .hero-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 6.5vw, 56px); line-height: 1.05; letter-spacing: -0.02em; color: var(--sb-white); margin: 0; } .hero-sub { font-size: 18px; color: rgba(255, 255, 255, 0.85); margin: var(--sp-5) 0 0; line-height: 1.6; max-width: 54ch; } .hero-fineprint { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.65); margin: var(--sp-4) 0 0; } @media (min-width: 900px) { .hero { padding: 96px 0 104px; } .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-16); } } /* Hero booking-flow vignette */ .hero-flow { position: relative; isolation: isolate; width: 100%; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); font-size: 15px; line-height: var(--lh-body); } .flow-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22); color: var(--sb-white); font-family: var(--font-mono); font-size: 13px; padding: 8px 12px; border-radius: var(--r-full); margin: 0; } .flow-chip img { border-radius: 4px; } .flow-chip-copy { font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--sb-green-deep); background: var(--sb-mustard-light); padding: 3px 10px; border-radius: var(--r-full); } .flow-chip--notify { align-self: flex-end; font-family: var(--font-body); font-weight: 600; font-size: 13px; background: var(--sb-teal-light); border: 1px solid rgba(15, 110, 86, 0.25); color: var(--sb-teal); } .flow-row { display: flex; } .flow-row--out { justify-content: flex-end; } .flow-bubble { max-width: 85%; padding: 10px 14px; border-radius: 18px; margin: 0; } .flow-bubble--out { background: var(--sb-teal); color: var(--sb-white); border-bottom-right-radius: 6px; } .flow-card { background: var(--sb-white); border-radius: var(--r-lg); border-left: 4px solid var(--status-request); box-shadow: var(--shadow-3); padding: var(--sp-4); color: var(--sb-dark); } .flow-card--done { border-left-color: var(--status-scheduled); } .flow-status { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: 0 0 var(--sp-2); } .flow-time { font-size: 12px; color: var(--fg-3); } .flow-service { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--sb-green-dark); margin: 0 0 2px; } .flow-meta { font-size: 13px; color: var(--fg-2); margin: 0; } .flow-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); } .flow-btn { font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: var(--r-md); } .flow-btn--confirm { background: var(--sb-mustard); color: var(--sb-white); } .flow-btn--ghost { border: 1px solid var(--sb-border); color: var(--fg-2); } /* Status pills (booking pipeline colors from tokens) */ .pill { display: inline-flex; align-items: center; font-family: var(--font-body); font-weight: 600; font-size: 12px; padding: 3px 10px; border-radius: var(--r-full); } .pill--request { background: var(--status-request-bg); color: var(--status-request); } .pill--scheduled { background: var(--status-scheduled-bg); color: var(--status-scheduled); } .pill--done { background: var(--status-done-bg); color: var(--status-done); } /* Technician backdrop: bottom edge flush with the hero's end (the thin line above the stat strip). Sits behind .hero-inner (z-index 2). */ .hero-tech { position: absolute; z-index: 1; pointer-events: none; bottom: 0; right: -2%; height: 88%; width: auto; /* NO drop-shadow here: filter output that spills above the border box gets sliced by the mask below at exactly the box's top edge, painting a hard horizontal line above the head (verified pixel-level — shadow+mask spikes 4x over either alone). The glow wash does the seating instead. */ /* Soft dissolve at the lower edge so the figure doesn't end abruptly at the stat-strip line. */ -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0.55) 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0.55) 86%, transparent 100%); } /* Multi-colored wash over the technician — same layered-radial treatment as Orderbook's .hero-shot-glow, so the figure sits in the scene with depth instead of reading as a flat cutout. Same z-layer as .hero-tech but later in the DOM, so it paints above him and below .hero-inner (z-index 2). */ .hero-tech-glow { position: absolute; z-index: 1; pointer-events: none; right: -14%; bottom: -12%; width: 62%; /* Extends past the hero's top so the box edge never falls inside the visible area (.hero { overflow: hidden } clips it at the section boundary) — a top edge at head height painted a hard seam. */ height: 118%; background: /* Mustard sits at chest height, below the face — keep his skin tone true. */ radial-gradient(ellipse at 58% 52%, rgba(245, 200, 66, 0.26), transparent 50%), radial-gradient(ellipse at 26% 78%, rgba(15, 110, 86, 0.55), transparent 55%), radial-gradient(ellipse at 80% 66%, rgba(253, 248, 239, 0.12), transparent 48%); filter: blur(48px); /* Belt-and-suspenders: fade the wash out well before any box edge. */ -webkit-mask-image: radial-gradient(ellipse at 52% 62%, #000 46%, transparent 78%); mask-image: radial-gradient(ellipse at 52% 62%, #000 46%, transparent 78%); } @media (max-width: 899px) { .hero-tech { right: -14%; height: min(48%, 540px); } .hero-tech-glow { right: -18%; width: 70%; height: 64%; } } /* Contrast cushion behind the flow cards so they read over the technician. The box is oversized and its edges mask-fade to zero — a clipped gradient at the box boundary paints a visible horizontal seam over the hero green (the "hard line above the technician's head" bug). */ .hero-flow-glow { position: absolute; inset: -24% -20%; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgba(7, 40, 26, 0.60) 0%, rgba(7, 40, 26, 0.28) 40%, transparent 65%), radial-gradient(ellipse at 68% 22%, rgba(245, 200, 66, 0.16), transparent 55%); filter: blur(34px); pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 68%); mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 68%); } /* Hero booking-flow loop (15s cycle): share the link → request arrives → one-tap I-confirm → naka-iskedyul → customer notified, then a ~5s hold with everything visible before the reset. Compositor-only. */ .fl { opacity: 0; } .fl-1 { animation: flIn1 15s var(--ease-std) infinite; } .fl-2 { animation: flIn2 15s var(--ease-std) infinite; } .fl-3 { animation: flIn3 15s var(--ease-std) infinite; } .fl-4 { animation: flIn4 15s var(--ease-std) infinite; } .fl-5 { animation: flIn5 15s var(--ease-std) infinite; } @keyframes flIn1 { 0%, 1.5% { opacity: 0; transform: translateY(14px); } 5%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } } @keyframes flIn2 { 0%, 10% { opacity: 0; transform: translateY(14px) scale(0.98); } 14%, 94% { opacity: 1; transform: translateY(0) scale(1); } 98%, 100% { opacity: 0; transform: translateY(0); } } @keyframes flIn3 { 0%, 38% { opacity: 0; transform: translateY(12px); } 43%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } } @keyframes flIn4 { 0%, 48% { opacity: 0; transform: translateY(12px); } 53%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } } @keyframes flIn5 { 0%, 57% { opacity: 0; transform: translateY(8px) scale(0.95); } 62%, 94% { opacity: 1; transform: translateY(0) scale(1); } 98%, 100% { opacity: 0; transform: translateY(0); } } /* The I-confirm press moment (~33% of the cycle ≈ 5s in) */ .flow-btn--confirm { animation: flPress 15s var(--ease-std) infinite; } @keyframes flPress { 0%, 32% { transform: scale(1); } 34%, 36% { transform: scale(0.93); } 38%, 100% { transform: scale(1); } } /* ----------- Stat strip ----------- */ .stat-strip { background: var(--sb-green-deep); color: var(--sb-white); border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 2px solid var(--sb-mustard-light); } .stat-strip-inner { display: grid; grid-template-columns: 1fr 1fr; padding: var(--sp-6) 20px; } .stat-item { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-4); border-right: 1px solid rgba(255, 255, 255, 0.10); } .stat-item:nth-child(2n) { border-right: 0; } .stat-item strong { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--sb-mustard-light); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .stat-item span { font-size: 13px; color: rgba(255, 255, 255, 0.78); } @media (min-width: 768px) { .stat-strip-inner { grid-template-columns: repeat(4, 1fr); padding: var(--sp-8) 32px; } .stat-item { border-right: 1px solid rgba(255, 255, 255, 0.10); } /* The mobile 2-col rule (nth-child(2n) -> no border) outspecifies the plain .stat-item rule; restate it here so all three dividers render. */ .stat-item:nth-child(2n) { border-right: 1px solid rgba(255, 255, 255, 0.10); } .stat-item:last-child { border-right: 0; } .stat-item strong { font-size: 30px; } } /* ----------- Problem ----------- */ .problem { background: var(--sb-cream); padding: 72px 0; } .problem-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } .problem-card { background: var(--bg-card); border: var(--border-card); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--sp-5); } .problem-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--sb-danger-bg); color: var(--sb-danger); font-weight: 700; font-size: 14px; margin-bottom: var(--sp-3); } .problem-card strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--sb-green-dark); margin-bottom: 4px; } .problem-card span:last-child { font-size: 14.5px; color: var(--fg-2); line-height: 1.55; } @media (min-width: 640px) { .problem-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .problem-grid { grid-template-columns: repeat(4, 1fr); } } /* ----------- How it works ----------- */ .how { background: var(--sb-cream-2); padding: 72px 0; } .step-list { counter-reset: step; display: grid; gap: var(--sp-4); max-width: 720px; margin: 0 auto; } .step-list li { counter-increment: step; position: relative; background: var(--bg-card); border: var(--border-card); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 18px 20px 18px 74px; font-size: 16px; line-height: 1.55; color: var(--fg-1); } .step-list li::before { content: counter(step); position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--sb-mustard-light), var(--sb-mustard)); color: var(--sb-green-deep); font-family: var(--font-display); font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; } .step-list strong { color: var(--sb-green-dark); } /* ----------- Feature sections ----------- */ .feature { padding: 72px 0; overflow: hidden; } .feature--cream { background: var(--sb-cream); } .feature--alt { background: var(--sb-mustard-bg); } .feature--deep { background: var(--sb-green-deep); color: var(--sb-white); } .feature--deep .section-title { color: var(--sb-white); } .feature--deep .section-sub { color: rgba(255, 255, 255, 0.82); } .feature-copy--on-dark { color: var(--sb-white); } .feature-note { margin-top: var(--sp-5); font-size: var(--fs-sm); font-weight: 600; color: var(--sb-mustard-light); } .feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); align-items: center; } .feature-copy { max-width: 540px; } @media (min-width: 900px) { .feature { padding: 104px 0; } .feature-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-16); } .feature-grid--reverse > .feature-shot { order: -1; } } .mini-list { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); } .mini-list li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; color: var(--fg-2); } .mini-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--sb-mustard-light), var(--sb-mustard)); } .mini-list li::after { content: ''; position: absolute; left: 4px; top: 11px; width: 8px; height: 4px; border-left: 2px solid var(--sb-white); border-bottom: 2px solid var(--sb-white); transform: rotate(-45deg); } .mini-list--on-dark li { color: rgba(255, 255, 255, 0.86); } /* ----------- Vignettes (product concept art, not screenshots) ----------- */ .vignette { width: 100%; max-width: 420px; margin: 0 auto; background: var(--bg-card); border: var(--border-card); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: var(--sp-5); } /* Public page */ .vg-biz { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--sb-green); margin: 0; } .vg-rating { color: var(--sb-mustard); font-size: 14px; margin: 2px 0 var(--sp-4); } .vg-rating span { color: var(--fg-2); } .vg-service-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); background: var(--sb-cream); border: var(--border-card-soft); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: var(--sp-2); } .vg-service-info { display: flex; flex-direction: column; min-width: 0; } .vg-service-info strong { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--sb-green-dark); } .vg-service-info span { font-size: 12.5px; color: var(--fg-3); } .vg-price { font-weight: 700; color: var(--sb-green); font-variant-numeric: tabular-nums; white-space: nowrap; } .vg-slots-label { font-weight: 600; font-size: 13px; color: var(--fg-2); margin: var(--sp-4) 0 var(--sp-2); } .vg-slots { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .vg-slot { font-weight: 600; font-size: 13.5px; padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid var(--sb-border); color: var(--fg-2); font-variant-numeric: tabular-nums; } .vg-slot--active { background: var(--sb-mustard); border-color: var(--sb-mustard); color: var(--sb-white); } /* Calendar */ .vg-cal-head { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--sb-green-dark); margin: 0 0 var(--sp-3); } .vg-book { display: flex; flex-direction: column; gap: 3px; background: var(--sb-cream); border: var(--border-card-soft); border-left-width: 4px; border-left-style: solid; border-radius: var(--r-md); padding: 12px 14px; margin-bottom: var(--sp-2); font-size: 13px; color: var(--fg-2); } .vg-book .pill { align-self: flex-start; margin-bottom: 2px; } .vg-book strong { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--sb-dark); } .vg-book--request { border-left-color: var(--status-request); } .vg-book--scheduled { border-left-color: var(--status-scheduled); } .vg-book--done { border-left-color: var(--status-done); } .vg-paid { color: var(--pay-paid); font-weight: 600; } /* Team */ .vg-team-head { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--sb-green-dark); margin: 0 0 var(--sp-3); } .vg-staff { display: flex; flex-direction: column; gap: var(--sp-2); } .vg-staff-chip { display: flex; align-items: center; gap: 10px; background: var(--sb-cream); border: var(--border-card-soft); border-radius: var(--r-md); padding: 10px 14px; font-weight: 600; font-size: 14px; color: var(--fg-1); } .vg-staff-chip em { font-style: normal; font-size: 12px; color: var(--fg-3); margin-left: auto; } .vg-staff-chip b { font-size: 12px; color: var(--sb-teal); background: var(--sb-teal-light); padding: 2px 8px; border-radius: var(--r-full); white-space: nowrap; } .vg-staff-chip--pick { border-color: var(--sb-teal); background: var(--sb-teal-light); } .vg-ava { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--sb-green-dim), var(--sb-green)); color: var(--sb-white); font-family: var(--font-display); font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .vg-team-note { font-size: 12.5px; color: var(--fg-3); margin: var(--sp-3) 0 0; } /* Payments + nudges */ .vg-pay-head { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--sb-green-dark); margin: 0 0 var(--sp-3); } .vg-pay-row { display: flex; align-items: center; gap: 10px; background: var(--sb-cream); border: var(--border-card-soft); border-radius: var(--r-md); padding: 10px 14px; font-family: var(--font-mono); font-size: 13.5px; color: var(--fg-1); margin-bottom: var(--sp-2); } .vg-pay-logo { width: 26px; height: 26px; border-radius: var(--r-sm); background: #1A3A5C; color: var(--sb-white); font-family: var(--font-display); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .vg-pay-logo--maya { background: var(--sb-green-dark); } .vg-pay-copy { margin-left: auto; font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--sb-green-deep); background: var(--sb-mustard-light); padding: 3px 10px; border-radius: var(--r-full); } .vg-qr { width: 84px; height: 84px; margin: var(--sp-3) auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; background: var(--sb-white); border: var(--border-card); border-radius: var(--r-md); } .vg-qr span { background: var(--sb-green-dark); border-radius: 3px; } .vg-qr span:nth-child(2n) { background: var(--sb-green-dim); } .vg-nudges { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; } .vg-nudge { font-weight: 600; font-size: 13px; color: var(--sb-green-dark); background: var(--sb-mustard-bg); border: 1px solid var(--sb-border-soft); padding: 7px 14px; border-radius: var(--r-full); } .vg-nudge--sms { background: var(--sb-mustard); border-color: var(--sb-mustard); color: var(--sb-white); } .vg-nudge-bubble { background: var(--sb-cream); border: var(--border-card-soft); border-radius: var(--r-md); border-bottom-right-radius: 4px; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--fg-2); margin: 0 0 var(--sp-3); } /* ============================================================ Looping vignette animations — grounded in ad frames F-SB-01…06. Each loop plays the feature's real usage; all compositor-friendly; complete static states under prefers-reduced-motion. ============================================================ */ /* Public page (F-SB-03/04): slot gets picked, selection line appears. 10s. */ .vg-loc { font-size: 12.5px; color: var(--fg-3); margin: 0; } .vg-slot--pick { animation: slotPick 10s var(--ease-std) infinite; } @keyframes slotPick { 0%, 32% { background: var(--bg-card); border-color: var(--sb-border); color: var(--fg-2); transform: scale(1); } 36%, 38% { transform: scale(0.94); } 40%, 88% { background: var(--sb-mustard); border-color: var(--sb-mustard); color: var(--sb-white); transform: scale(1); } 94%, 100% { background: var(--bg-card); border-color: var(--sb-border); color: var(--fg-2); } } .vg-picked { font-weight: 600; font-size: 13px; color: var(--sb-green-dark); background: var(--sb-teal-light); border-radius: var(--r-sm); padding: 8px 12px; margin: var(--sp-3) 0 0; opacity: 0; animation: pickedIn 10s var(--ease-std) infinite; } @keyframes pickedIn { 0%, 44% { opacity: 0; transform: translateY(6px); } 50%, 88% { opacity: 1; transform: translateY(0); } 94%, 100% { opacity: 0; transform: translateY(0); } } /* Calendar (F-SB-01): the request's status flips to naka-iskedyul. 9s. */ .vg-pill-stack { display: grid; align-self: flex-start; } .vg-pill-stack .pill { grid-area: 1 / 1; align-self: start; justify-self: start; } .vg-flip-a { animation: flipA 9s var(--ease-std) infinite; } .vg-flip-b { animation: flipB 9s var(--ease-std) infinite; } @keyframes flipA { 0%, 38% { opacity: 1; } 44%, 88% { opacity: 0; } 94%, 100% { opacity: 1; } } @keyframes flipB { 0%, 38% { opacity: 0; } 44%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } } .vg-book--flip { animation: flipEdge 9s var(--ease-std) infinite; } @keyframes flipEdge { 0%, 38% { border-left-color: var(--status-request); } 44%, 88% { border-left-color: var(--status-scheduled); } 94%, 100% { border-left-color: var(--status-request); } } /* Team calendar (F-SB-06): the day's jobs slide in per staff. 12s. */ .vg-staff-chips { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; } .vg-chip { font-weight: 600; font-size: 12.5px; color: var(--fg-2); border: 1px solid var(--sb-border); padding: 5px 12px; border-radius: var(--r-full); } .vg-chip--on { background: var(--sb-green); border-color: var(--sb-green); color: var(--sb-white); } .tm-1, .tm-2, .tm-3 { opacity: 0; } .tm-1 { animation: tmIn1 12s var(--ease-std) infinite; } .tm-2 { animation: tmIn2 12s var(--ease-std) infinite; } .tm-3 { animation: tmIn3 12s var(--ease-std) infinite; } @keyframes tmIn1 { 0%, 4% { opacity: 0; transform: translateX(-10px); } 9%, 90% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; transform: translateX(0); } } @keyframes tmIn2 { 0%, 12% { opacity: 0; transform: translateX(-10px); } 17%, 90% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; transform: translateX(0); } } @keyframes tmIn3 { 0%, 34% { opacity: 0; transform: translateY(10px) scale(0.97); } 40%, 90% { opacity: 1; transform: translateY(0) scale(1); } 96%, 100% { opacity: 0; transform: translateY(0); } } /* Reminder nudge (F-SB-02): template appears, then the send buttons. 11s. */ .nd-1 { opacity: 0; animation: ndIn1 11s var(--ease-std) infinite; } .nd-2 { opacity: 0; animation: ndIn2 11s var(--ease-std) infinite; } .nd-2 .vg-nudge--sms { animation: ndPress 11s var(--ease-std) infinite; } @keyframes ndIn1 { 0%, 16% { opacity: 0; transform: translateY(8px); } 22%, 90% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; transform: translateY(0); } } @keyframes ndIn2 { 0%, 30% { opacity: 0; transform: translateY(8px); } 36%, 90% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; transform: translateY(0); } } @keyframes ndPress { 0%, 52% { transform: scale(1); } 54%, 56% { transform: scale(0.93); } 58%, 100% { transform: scale(1); } } /* ----------- Pillars ----------- */ .pillars { background: var(--sb-cream); padding: 72px 0; } .pillar-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } .pillar { background: var(--bg-card); border: var(--border-card); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--sp-6); text-align: center; } .pillar-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--sb-teal-light); color: var(--sb-green); margin-bottom: var(--sp-3); } .pillar-icon svg { width: 26px; height: 26px; } .pillar strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--sb-green); margin-bottom: var(--sp-2); } .pillar span:last-child { font-size: 14.5px; color: var(--fg-2); line-height: 1.6; } @media (min-width: 768px) { .pillar-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } } /* ----------- Pricing ----------- */ .pricing { background: var(--sb-cream-2); padding: 80px 0; } .pricing-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); max-width: 880px; margin: 0 auto; } .price-card { background: var(--bg-card); border: var(--border-card); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: var(--sp-8) var(--sp-6); display: flex; flex-direction: column; } .price-card--team { background: linear-gradient(170deg, var(--sb-green) 0%, var(--sb-green-dark) 100%); border-color: var(--sb-green); color: var(--sb-white); box-shadow: var(--shadow-3); } .price-eyebrow { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 var(--sp-6); } .price-eyebrow--team { color: var(--sb-mustard-light); } .price-pill { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.01em; text-transform: none; background: var(--sb-mustard); color: var(--sb-white); padding: 4px 12px; border-radius: var(--r-full); } .price-amount { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1; color: var(--sb-green); letter-spacing: -0.02em; margin: 0; font-variant-numeric: tabular-nums; } .price-card--team .price-amount { color: var(--sb-white); } .price-amount span { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--fg-3); margin-left: 6px; letter-spacing: 0; } .price-card--team .price-amount span { color: rgba(255, 255, 255, 0.72); } .price-tagline { font-size: 15px; color: var(--fg-2); margin: var(--sp-2) 0 var(--sp-6); } .price-card--team .price-tagline { color: rgba(255, 255, 255, 0.80); } .price-list { display: grid; gap: var(--sp-3); flex-grow: 1; } .price-list li { font-size: 15px; line-height: 1.5; color: var(--fg-2); position: relative; padding-left: 26px; } .price-list li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--sb-teal-light); color: var(--sb-teal); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .price-list--team li { color: rgba(255, 255, 255, 0.88); } .price-list--team li::before { background: var(--sb-mustard); color: var(--sb-white); } .price-fineprint { font-size: 13px; color: rgba(255, 255, 255, 0.68); margin: var(--sp-5) 0 0; } .pricing-referral { text-align: center; font-size: 15px; color: var(--fg-2); margin: var(--sp-8) auto 0; max-width: 60ch; } .pricing-referral strong { color: var(--sb-green-dark); } @media (min-width: 768px) { .pricing-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } } /* ----------- FAQ ----------- */ .faq { background: var(--sb-cream); padding: 80px 0; } .faq-inner { max-width: 820px; margin: 0 auto; } .faq-list { display: grid; gap: var(--sp-3); } .faq-item { background: var(--bg-card); border: var(--border-card); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow var(--dur-med) var(--ease-std); } .faq-item[open] { box-shadow: var(--shadow-2); } .faq-item summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--sb-green-dark); user-select: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--sb-mustard-bg); position: relative; flex-shrink: 0; transition: background var(--dur-med) var(--ease-std); } .faq-icon::before, .faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: var(--sb-mustard); border-radius: 2px; transform: translate(-50%, -50%); transition: transform var(--dur-med) var(--ease-std), background var(--dur-med) var(--ease-std); } .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-item[open] .faq-icon { background: var(--sb-mustard); } .faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background: var(--sb-white); } .faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); } .faq-body { padding: 0 24px 22px; color: var(--fg-2); line-height: 1.65; font-size: 16px; } .faq-body strong { color: var(--sb-green-dark); } .faq-body p { margin: 0; color: var(--fg-2); } /* ----------- Final CTA ----------- */ .final-cta { background: var(--sb-cream); padding: 64px 0 96px; } .final-cta-card { position: relative; background: linear-gradient(135deg, var(--sb-green) 0%, var(--sb-green-dark) 60%, var(--sb-green-deep) 100%); color: var(--sb-white); border-radius: var(--r-2xl); box-shadow: var(--shadow-3); padding: 56px 28px 340px; overflow: visible; } .final-cta-card::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-2xl); background: radial-gradient(circle at 88% 25%, rgba(245, 200, 66, 0.22), transparent 50%), radial-gradient(circle at 12% 85%, rgba(15, 110, 86, 0.30), transparent 45%); pointer-events: none; } .final-cta-copy { position: relative; max-width: 540px; } .final-cta-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 5vw, 42px); line-height: 1.1; letter-spacing: -0.02em; color: var(--sb-white); margin: 0 0 var(--sp-4); } .final-cta-sub { font-size: 17px; color: rgba(255, 255, 255, 0.82); max-width: 52ch; margin: 0; line-height: 1.6; } .final-cta-note { font-size: 13px; color: rgba(255, 255, 255, 0.62); margin: var(--sp-4) 0 0; } /* Cleaner figure: anchored to the card's bottom edge (mobile: centered below the copy; desktop: right column, contained within the card). */ .final-cta-figure { position: absolute; left: 0; right: 0; bottom: 0; height: 320px; margin: 0; pointer-events: none; } .final-cta-figure img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: auto; height: 328px; filter: drop-shadow(-6px 8px 16px rgba(0, 0, 0, 0.32)); } @media (min-width: 768px) { .final-cta-card { padding: 80px 44% 80px 64px; min-height: 380px; } .final-cta-figure { inset: auto 0 0 auto; width: 50%; height: 100%; } .final-cta-figure img { left: auto; right: 5%; transform: none; height: 102%; /* head just crests the card edge, hand stays clear */ max-height: 475px; } } /* Use-case CTA figures (HVAC / rentals / beauty): bottom-aligned like the home cleaner, but sized shorter than the card so the character's head has clear room below the card's top edge. Scoped so the home page keeps its crest-at-top cleaner. Sized by height for a consistent character scale. */ .final-cta-figure--uc img { height: 330px; } @media (min-width: 768px) { .final-cta-figure--uc img { height: 92%; max-height: 472px; } .final-cta-figure--beauty img { right: 9%; } /* nudged left vs the shared right: 5% */ } /* ----------- Footer ----------- */ .site-footer { background: var(--sb-green-deep); color: rgba(255, 255, 255, 0.72); padding: 64px 0 24px; } .footer-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); } .footer-brand { max-width: 360px; } .brand--footer { color: var(--sb-white); } .brand--footer:hover { color: var(--sb-white); } .footer-tagline { margin: var(--sp-4) 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.62); line-height: 1.55; } .footer-cols { display: grid; /* Column widths tuned so trailing whitespace is even across all four (links are left-aligned, so a narrow-link column like Product floats away from the next unless its track is trimmed): Product trimmed, Use cases widened. */ grid-template-columns: 0.8fr 1.3fr 1.4fr 0.9fr; gap: var(--sp-8) var(--sp-6); } .footer-col h3 { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-mustard-light); margin: 0 0 var(--sp-4); } .footer-col ul { display: grid; gap: 10px; } .footer-col a { color: rgba(255, 255, 255, 0.78); font-size: 15px; font-weight: 400; transition: color var(--dur-fast) var(--ease-std); } .footer-col a:hover { color: var(--sb-white); text-decoration: none; } .footer-email { font-weight: 600; } .footer-sibling { margin: var(--sp-2) 0 20px; /* 20px above the badge pair, matching Orderbook */ font-size: 14px; color: rgba(255, 255, 255, 0.55); } .footer-sibling a { color: rgba(255, 255, 255, 0.85); font-weight: 600; } .footer-sibling a:hover { color: var(--sb-white); } .footer-social { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); transition: background-color var(--dur-fast) var(--ease-std); } .footer-social:hover { background: rgba(255, 255, 255, 0.18); } .footer-social img { width: 20px; height: 20px; display: block; filter: invert(100%); opacity: 0.85; } .footer-bottom { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid rgba(255, 255, 255, 0.10); display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, 0.55); } .footer-bottom p { margin: 0; color: inherit; } @media (max-width: 767px) { .footer-cols { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .footer-inner { grid-template-columns: 1fr 1.9fr; gap: var(--sp-16); } .footer-bottom { flex-direction: row; justify-content: space-between; } } /* ----------- Scroll reveal ----------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-std), transform var(--dur-slow) var(--ease-std); } .reveal.is-revealed { opacity: 1; transform: translateY(0); } .reveal-stagger > .reveal:nth-child(2) { transition-delay: 70ms; } .reveal-stagger > .reveal:nth-child(3) { transition-delay: 140ms; } .reveal-stagger > .reveal:nth-child(4) { transition-delay: 210ms; } /* ----------- Legal article (terms / privacy) ----------- */ .legal-main { background: var(--sb-cream); } .legal-article { max-width: 760px; padding-top: 56px; padding-bottom: 64px; font-size: 17px; line-height: 1.65; color: var(--fg-1); } .legal-article h1 { font-weight: 800; font-size: clamp(32px, 5vw, 42px); letter-spacing: -0.02em; color: var(--sb-green); line-height: var(--lh-tight); margin: 0 0 var(--sp-3); } .legal-article h2 { font-weight: 700; font-size: clamp(22px, 3vw, 27px); color: var(--sb-green); margin: 56px 0 14px; scroll-margin-top: 80px; } .legal-article h3 { font-weight: 700; font-size: 19px; color: var(--sb-green-dark); margin: 32px 0 8px; } .legal-article p { margin: 0 0 16px; max-width: 72ch; color: var(--fg-1); } .legal-article p:first-of-type { color: var(--fg-2); font-size: 15px; margin-bottom: 32px; } .legal-article a { color: var(--sb-teal); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; } .legal-article a:hover { color: var(--sb-green-dark); } .legal-article strong { color: var(--sb-green-dark); } .legal-article ul, .legal-article ol { margin: 0 0 20px; padding-left: 22px; max-width: 72ch; } .legal-article ul { list-style: disc; } .legal-article ol { list-style: decimal; } .legal-article li { margin-bottom: 8px; line-height: 1.6; } .legal-article table { width: 100%; margin: 24px 0 28px; border-collapse: collapse; font-size: 15px; background: var(--bg-card); border: var(--border-card); border-radius: var(--r-lg); overflow: hidden; } .legal-article thead { background: var(--sb-mustard-bg); } .legal-article th, .legal-article td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: var(--border-card); } .legal-article th { font-family: var(--font-display); font-weight: 700; color: var(--sb-green-dark); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; } .legal-article tbody tr:last-child td { border-bottom: 0; } @media (max-width: 767px) { .legal-article { padding-top: 40px; padding-bottom: 48px; font-size: 16px; } .legal-article table { font-size: 14px; } .legal-article th, .legal-article td { padding: 10px 12px; } } /* ----------- Reduced motion ----------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } /* Freeze every loop in its complete state. */ .fl, .tm-1, .tm-2, .tm-3, .nd-1, .nd-2, .vg-picked { animation: none; opacity: 1; transform: none; } .flow-btn--confirm, .vg-nudge--sms, .vg-book--flip { animation: none; } .vg-slot--pick { animation: none; background: var(--sb-mustard); border-color: var(--sb-mustard); color: var(--sb-white); } .vg-flip-a { animation: none; opacity: 0; } .vg-flip-b { animation: none; opacity: 1; } .vg-book--flip { border-left-color: var(--status-scheduled); } } /* ----------- Use-case pages (/use-cases/*) ----------- */ /* Cream page hero for subpages — sibling of Orderbook's .page-hero. The site hero's .hero-title/.hero-sub are white (dark-green band), so colors are re-declared here for the light background. */ .page-hero { position: relative; background: radial-gradient(ellipse at top right, rgba(245, 200, 66, 0.16), transparent 55%), radial-gradient(ellipse at bottom left, rgba(26, 92, 58, 0.10), transparent 50%), var(--sb-cream); padding: 56px 0 64px; text-align: center; } .page-hero .hero-title { color: var(--sb-green-dark); font-size: clamp(30px, 5.5vw, 50px); max-width: 22ch; margin: 0 auto; } .page-hero .hero-sub { color: var(--fg-1); margin-left: auto; margin-right: auto; } .page-hero .btn-row { justify-content: center; } @media (min-width: 900px) { .page-hero { padding: 88px 0 96px; } } .btn--outline { border: 2px solid var(--sb-green); color: var(--sb-green); background: transparent; } .btn--outline:hover { border-color: var(--sb-mustard); color: var(--sb-green-dark); text-decoration: none; } /* Problems band: flat deep green (flat on purpose — a gradient this tall would band; see the .hero grain note). White problem-cards pop on it. */ .uc-problems { background: var(--sb-green-dark); padding: 72px 0; } .uc-problems .section-title { color: var(--sb-white); } .uc-problems .section-sub { color: rgba(255, 255, 255, 0.78); } /* Field-study callout (HVAC page) */ .study-note { max-width: 720px; margin: 0 auto var(--sp-8); background: var(--sb-mustard-bg); border: 1px solid rgba(201, 146, 10, 0.4); border-radius: var(--r-lg); padding: 18px 22px; font-size: 15px; color: var(--fg-1); line-height: 1.6; } .study-note strong { color: var(--sb-green-dark); } /* Six problem cards read better as 2x3 than 4+2 */ @media (min-width: 1024px) { .problem-grid--three { grid-template-columns: repeat(3, 1fr); } } /* Solutions band + benefit grid — Servicebook skin of Orderbook's .benefit */ .uc-benefits { background: var(--sb-cream); padding: 72px 0; } .benefit-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-8); } @media (min-width: 640px) { .benefit-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .benefit-grid { grid-template-columns: repeat(3, 1fr); } } .benefit { background: var(--bg-card); border: var(--border-card); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--sp-5); } .benefit strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--sb-green-dark); margin-bottom: 4px; } .benefit span { font-size: 14.5px; color: var(--fg-2); line-height: 1.55; } .benefit--featured { border: 2px solid var(--sb-mustard); background: var(--sb-mustard-bg); } .benefit-chip { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-green-dark); background: var(--sb-mustard-light); border-radius: 999px; padding: 3px 10px; margin: 0 0 10px; }