/* ================================================================== * * Chicago Bankruptcy Help — production site CSS (warm_site, steel-led) * Translates the v2 warm_site kit (SiteKit/Chrome/Home JSX + ds-runtime * primitives) into a plain class system layered on tokens/*.css. * * Load order (each page ): * tokens/fonts.css, tokens/colors.css, tokens/typography.css, * tokens/spacing.css, tokens/base.css, then THIS file. * * Conventions for page agents: * - Components are .cl-* (Button .cl-btn, Card .cl-card, ...). * - Page-specific layout classes are -* (home-*, c7-*, ...). * - Icons are inline copied from * assets/icons-reference.html; size via width/height attrs. * - Editorial markers live in .draft-only (revealed via ?draft). * ================================================================== */ /* ------------------------------------------------------------------ * * 0. Fluid type + document defaults * ------------------------------------------------------------------ */ :root { /* fluid overrides of the fixed kit scale — 60px H1 must survive 320px */ --text-4xl: clamp(2.1rem, 1.2rem + 4.2vw, 3.75rem); --text-3xl: clamp(1.8rem, 1.2rem + 2.6vw, 2.875rem); --text-2xl: clamp(1.55rem, 1.15rem + 1.7vw, 2.25rem); --pad-x: clamp(20px, 4vw, 28px); } html, body { overflow-x: clip; } /* hard stop: zero horizontal overflow */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } :where([id]) { scroll-margin-top: 90px; } body { margin: 0; background: var(--surface-page); padding-bottom: 62px; /* clearance for the fixed sticky book bar */ } img, svg { display: block; max-width: 100%; } img { height: auto; } svg.cl-ico { display: inline-block; flex: none; max-width: none; } *:focus-visible { outline: 2px solid var(--steel-600); outline-offset: 2px; } p, li { overflow-wrap: break-word; } /* grid/flex children may shrink below their intrinsic min-content width — prevents nowrap buttons/kickers from blowing out narrow viewports */ .home-hero__grid > *, .home-empathy__grid > *, .home-meet__grid > *, .home-practice__grid > *, .home-steps__grid > *, .home-reviews__grid > *, .cl-footer__grid > *, .home-hero__media, .home-hero__card, .cl-bookbar__left, .cl-bookbar__right { min-width: 0; } .cl-skip { position: absolute; left: -9999px; top: 0; background: var(--surface-card); color: var(--text-link); padding: 10px 16px; border-radius: var(--radius-sm); z-index: 3000; } .cl-skip:focus { left: 12px; top: 12px; } /* ------------------------------------------------------------------ * * 1. Draft-mode marker system * Clean render hides all editorial markers; ?draft reveals them * (inline head script adds html.draft). * ------------------------------------------------------------------ */ .draft-only { display: none !important; } html.draft .draft-only { display: revert !important; } html.draft .draft-only.draft-block { display: block !important; } /* visible marker styling once revealed */ html.draft .draft-only { background: var(--warning-tint); color: var(--warning); border: 1px dashed var(--warning); border-radius: var(--radius-xs); font: 600 11px/1.5 ui-monospace, Menlo, monospace; letter-spacing: 0; text-transform: none; padding: 1px 6px; } /* ------------------------------------------------------------------ * * 2. Container * ------------------------------------------------------------------ */ .cl-container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } .cl-container--lg { max-width: var(--container-lg); } .cl-container--md { max-width: var(--container-md); } /* ------------------------------------------------------------------ * * 3. Kicker variants (base .cl-kicker lives in tokens/base.css) * ------------------------------------------------------------------ */ .cl-kicker { gap: 12px; white-space: nowrap; } .cl-kicker::before { flex: none; } .cl-kicker--light { color: var(--steel-200); } .cl-kicker--light::before { background: var(--steel-300); } .cl-kicker-row { display: flex; } .cl-kicker-row--center { justify-content: center; } /* ------------------------------------------------------------------ * * 4. Stars (filled lucide stars, steel by default) * ------------------------------------------------------------------ */ .cl-stars { display: inline-flex; gap: 2px; color: var(--steel-600); } .cl-stars svg { fill: currentColor; } .cl-stars--light { color: var(--steel-200); } /* ------------------------------------------------------------------ * * 5. BUTTON — mirrors ds-runtime Button.jsx * ------------------------------------------------------------------ */ .cl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-base); line-height: 1; letter-spacing: 0.01em; padding: 11px 20px; border-radius: var(--radius-sm); border: 1px solid var(--steel-600); background: var(--steel-600); color: var(--text-on-brand); box-shadow: var(--shadow-sm); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .cl-btn:hover { text-decoration: none; transform: translateY(-1px); } .cl-btn--sm { gap: 6px; font-size: var(--text-sm); padding: 8px 14px; border-radius: var(--radius-sm); } .cl-btn--lg { gap: 10px; font-size: var(--text-md); padding: 15px 28px; border-radius: var(--radius-md); } .cl-btn--full { width: 100%; } .cl-btn--primary { background: var(--steel-600); border-color: var(--steel-600); color: var(--text-on-brand); } .cl-btn--primary:hover { background: var(--steel-700); } .cl-btn--secondary { background: #fff; border-color: #fff; color: var(--brand-strong); } .cl-btn--secondary:hover { background: var(--steel-50); border-color: var(--steel-50); } .cl-btn--outline { background: transparent; border-color: var(--steel-600); color: var(--steel-700); box-shadow: none; } .cl-btn--outline:hover { background: var(--steel-50); } .cl-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-700); box-shadow: none; } .cl-btn--ghost:hover { background: var(--ink-50); } /* ------------------------------------------------------------------ * * 6. BADGE — mirrors ds-runtime Badge.jsx * ------------------------------------------------------------------ */ .cl-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-xs); letter-spacing: 0.02em; padding: 3px 10px; border-radius: var(--radius-pill); line-height: 1.4; white-space: nowrap; background: var(--ink-100); color: var(--ink-700); border: 1px solid var(--ink-200); } .cl-badge--sm { font-size: var(--text-2xs); padding: 2px 8px; } .cl-badge--neutral { background: var(--ink-100); color: var(--ink-700); border-color: var(--ink-200); } .cl-badge--brand { background: var(--steel-50); color: var(--steel-700); border-color: var(--steel-100); } .cl-badge--accent { background: var(--crimson-50); color: var(--crimson-700); border-color: var(--crimson-100); } .cl-badge--success { background: var(--success-tint); color: var(--success); border-color: transparent; } .cl-badge--warning { background: var(--warning-tint); color: var(--warning); border-color: transparent; } .cl-badge--danger { background: var(--danger-tint); color: var(--danger); border-color: transparent; } .cl-badge--solid { background: var(--steel-600); color: #fff; border-color: transparent; } /* ------------------------------------------------------------------ * * 7. CARD — mirrors ds-runtime Card.jsx * ------------------------------------------------------------------ */ .cl-card { position: relative; border-radius: var(--radius-lg); padding: var(--space-6); overflow: hidden; background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); } .cl-card--pad-none { padding: 0; } .cl-card--pad-sm { padding: var(--space-4); } .cl-card--pad-md { padding: var(--space-5); } .cl-card--raised { box-shadow: var(--shadow-lg); } .cl-card--flat { border-color: var(--border-default); box-shadow: none; } .cl-card--sunken { background: var(--surface-sunken); box-shadow: none; } .cl-card--brand { background: var(--steel-900); border-color: var(--steel-900); box-shadow: var(--shadow-brand); color: #fff; } .cl-card--accent-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--rule-accent-width); background: var(--brand); z-index: 1; } /* ------------------------------------------------------------------ * * 8. FORM FIELDS — mirror Input/Select + textarea * ------------------------------------------------------------------ */ .cl-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); } .cl-field--full { grid-column: 1 / -1; } .cl-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); } .cl-label .cl-req { color: var(--brand); margin-left: 3px; } .cl-input-wrap { position: relative; display: flex; align-items: center; } .cl-input-wrap .cl-input-icon { position: absolute; left: 12px; display: inline-flex; color: var(--text-subtle); pointer-events: none; } .cl-input, .cl-select, .cl-textarea { width: 100%; font-family: var(--font-body); font-size: var(--text-base); color: var(--text-strong); background: var(--surface-card); padding: 11px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); outline: none; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .cl-input--icon { padding-left: 38px; } .cl-textarea { resize: vertical; line-height: var(--leading-normal); } .cl-input:focus, .cl-select:focus, .cl-textarea:focus { border-color: var(--steel-600); box-shadow: 0 0 0 3px var(--focus-ring); } .cl-input::placeholder, .cl-textarea::placeholder { color: var(--text-subtle); } .cl-select-wrap { position: relative; } .cl-select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; } .cl-select-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); font-size: 12px; line-height: 1; } .cl-field-hint { font-size: var(--text-xs); color: var(--text-muted); } /* form success / error states (toggled by app.js) */ .cl-form-success { text-align: center; padding: 30px 8px; } .cl-form-success__icon { width: 60px; height: 60px; border-radius: 50%; background: var(--success-tint); color: var(--success); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; } .cl-form-success h3 { font-size: var(--text-lg); margin: 0 0 10px; } .cl-form-success p { font-size: var(--text-sm); color: var(--text-body); line-height: 1.6; margin: 0 0 22px; } .cl-form-error { display: flex; gap: 10px; align-items: flex-start; background: var(--danger-tint); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-radius: var(--radius-sm); padding: 12px 14px; font-size: var(--text-sm); line-height: 1.5; } .cl-form-error a { color: var(--danger); font-weight: 700; text-decoration: underline; } [hidden] { display: none !important; } /* ------------------------------------------------------------------ * * 9. SECTION HEAD + helper blocks * ------------------------------------------------------------------ */ .cl-section-head { text-align: center; max-width: 640px; margin: 0 auto; } .cl-section-head--narrow { max-width: 620px; } .cl-section-head h2 { font-size: var(--text-3xl); margin: 16px 0 0; } .cl-section-head p { font-size: var(--text-md); color: var(--text-body); margin: 14px 0 0; line-height: 1.6; } .cl-section-head--light h2 { color: #fff; } .cl-section-head--light p { color: rgba(255,255,255,.85); } .cl-band-sunken { background: var(--ink-50); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .cl-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--text-link); } .cl-link-arrow--base { font-size: var(--text-base); gap: 7px; } /* ------------------------------------------------------------------ * * 10. CHROME — TopBar * ------------------------------------------------------------------ */ .cl-topbar { background: var(--steel-900); color: rgba(255,255,255,.82); font-size: var(--text-sm); } .cl-topbar .cl-container { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 8px; padding-bottom: 8px; } .cl-topbar__item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .cl-topbar__right { display: flex; align-items: center; gap: 18px; } .cl-topbar a { color: #fff; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .cl-topbar a:hover { text-decoration: none; color: var(--steel-200); } /* ------------------------------------------------------------------ * * 11. CHROME — Header / nav * ------------------------------------------------------------------ */ .cl-header { background: rgba(251,250,249,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; z-index: 50; transition: box-shadow var(--dur-base) var(--ease-standard); } .cl-header--scrolled { box-shadow: var(--shadow-sm); } .cl-header .cl-container { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 13px; padding-bottom: 13px; } .cl-logo { display: inline-flex; flex: none; } .cl-logo img { height: 42px; width: auto; } .cl-nav { display: flex; align-items: center; gap: 2px; } .cl-nav__link { padding: 8px 12px; font-size: var(--text-base); font-weight: 600; color: var(--text-body); text-decoration: none; border-radius: var(--radius-sm); white-space: nowrap; transition: color var(--dur-fast) var(--ease-standard); } .cl-nav__link:hover { color: var(--brand); text-decoration: none; } .cl-nav__link[aria-current="page"] { color: var(--brand); } .cl-nav__cta { margin-left: 12px; } .cl-nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-strong); cursor: pointer; } .cl-nav-toggle:hover { background: var(--ink-50); } .cl-nav-toggle .ico-close { display: none; } .cl-nav-toggle[aria-expanded="true"] .ico-open { display: none; } .cl-nav-toggle[aria-expanded="true"] .ico-close { display: inline-block; } /* ------------------------------------------------------------------ * * 12. CHROME — Trust strip (dark band under hero) * ------------------------------------------------------------------ */ .cl-trust { background: var(--steel-900); } .cl-trust .cl-container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 18px; padding-bottom: 18px; } .cl-trust__item { display: flex; align-items: center; gap: 10px; color: #fff; font-size: var(--text-sm); font-weight: 600; } .cl-trust__item .cl-ico { color: var(--steel-200); } /* ------------------------------------------------------------------ * * 13. CHROME — Footer * ------------------------------------------------------------------ */ .cl-footer { background: var(--steel-900); color: rgba(255,255,255,.78); } .cl-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-top: 56px; padding-bottom: 28px; } .cl-footer__logo { height: 46px; width: auto; margin-bottom: 16px; } .cl-footer__about { font-size: var(--text-sm); line-height: 1.6; max-width: 300px; margin: 0 0 18px; } .cl-footer__rating { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: #fff; font-weight: 600; } .cl-footer h2 { color: #fff; font-family: var(--font-display); font-size: var(--text-md); margin: 0 0 14px; } .cl-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; font-size: var(--text-sm); } .cl-footer__list li { display: flex; gap: 8px; align-items: flex-start; } .cl-footer__list .cl-ico { color: var(--steel-300); margin-top: 3px; } .cl-footer__list a { color: rgba(255,255,255,.78); } .cl-footer__list a:hover { color: #fff; text-decoration: none; } .cl-footer__list li.is-strong, .cl-footer__list li.is-strong a { color: #fff; font-weight: 600; } .cl-footer__bar { border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; padding-bottom: 18px; font-size: var(--text-xs); color: rgba(255,255,255,.55); } .cl-footer__bar .cl-container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .cl-footer__legal { flex-basis: 100%; order: -1; display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 4px; } .cl-footer__legal a { color: rgba(255,255,255,.70); text-decoration: none; } .cl-footer__legal a:hover { color: #fff; text-decoration: underline; } /* ------------------------------------------------------------------ * * 14. CHROME — Sticky book bar (fixed bottom) * ------------------------------------------------------------------ */ .cl-bookbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--surface-card); border-top: 1px solid var(--border-default); box-shadow: 0 -6px 24px rgba(26,23,20,.10); } .cl-bookbar .cl-container { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 11px; padding-bottom: 11px; } .cl-bookbar__left { display: flex; align-items: center; gap: 20px; min-width: 0; } .cl-bookbar__rating { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-strong); font-size: var(--text-sm); white-space: nowrap; } .cl-bookbar__note { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; } .cl-bookbar__note .cl-ico { color: var(--brand); } .cl-bookbar__right { display: flex; align-items: center; gap: 12px; } .cl-bookbar__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-strong); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; } .cl-bookbar__phone .cl-ico { color: var(--brand); } .cl-bookbar__phone:hover { text-decoration: none; color: var(--brand); } /* ------------------------------------------------------------------ * * 15. CHROME — Booking drawer (slide-in panel + overlay) * ------------------------------------------------------------------ */ .cl-drawer-root { position: fixed; inset: 0; z-index: 2000; pointer-events: none; visibility: hidden; } .cl-drawer-root.is-open { pointer-events: auto; visibility: visible; } .cl-drawer-overlay { position: absolute; inset: 0; background: rgba(26,23,20,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity var(--dur-base) var(--ease-standard), visibility 0s linear var(--dur-base); } .cl-drawer-root.is-open .cl-drawer-overlay { opacity: 1; transition-delay: 0s; } .cl-drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(460px, 100%); background: var(--surface-card); box-shadow: var(--shadow-xl); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); display: flex; flex-direction: column; overflow-y: auto; } .cl-drawer-root.is-open .cl-drawer { transform: translateX(0); } .cl-drawer__head { background: var(--steel-900); color: #fff; padding: 22px 26px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .cl-drawer__head h3 { color: #fff; font-size: var(--text-lg); margin: 12px 0 4px; } .cl-drawer__head p { color: rgba(255,255,255,.78); font-size: var(--text-sm); margin: 0; } .cl-drawer__close { background: rgba(255,255,255,.12); border: none; color: #fff; width: 34px; height: 34px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; } .cl-drawer__close:hover { background: rgba(255,255,255,.22); } .cl-drawer__body { padding: 26px; flex: 1; } .cl-drawer__form { display: grid; gap: 16px; } .cl-drawer__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cl-drawer__assure { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: var(--text-xs); color: var(--text-muted); margin: 0; } /* ------------------------------------------------------------------ * * 16. ACCORDION (CSS-toggled; all content stays in the DOM) * ------------------------------------------------------------------ */ .cl-acc { border-top: 1px solid var(--border-default); } .cl-acc__item { border-bottom: 1px solid var(--border-default); } .cl-acc__q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 22px 6px; display: flex; justify-content: space-between; align-items: center; gap: 18px; } .cl-acc__q span { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; color: var(--text-strong); } .cl-acc__q .cl-ico { color: var(--brand); } .cl-acc__q .ico-minus { display: none; } .cl-acc__item.is-open .ico-plus { display: none; } .cl-acc__item.is-open .ico-minus { display: inline-block; } .cl-acc__a { display: none; padding: 0 6px 24px; margin: 0; font-size: var(--text-base); color: var(--text-body); line-height: 1.65; max-width: 780px; } .cl-acc__item.is-open .cl-acc__a { display: block; } .cl-acc__a a { text-decoration: underline; text-underline-offset: 2px; } /* ------------------------------------------------------------------ * * 17. SHARED SECTION PATTERNS (used by Home + every interior page) * ------------------------------------------------------------------ */ /* portrait frame (attorney) */ .cl-portrait { position: relative; overflow: hidden; border-radius: var(--radius-xl); aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg); background: repeating-linear-gradient(135deg, var(--ink-50), var(--ink-50) 14px, var(--ink-100) 14px, var(--ink-100) 28px); } .cl-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 11%; } .cl-photo-chip { position: absolute; top: 16px; left: 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; background: var(--steel-900); color: #fff; padding: 7px 14px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; box-shadow: var(--shadow-md); } .cl-photo-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); } /* landscape photo frame (practice cards etc.) */ .cl-photo { position: relative; overflow: hidden; background: var(--ink-100); } .cl-photo img { width: 100%; height: 100%; object-fit: cover; } /* process step card */ .cl-step { display: flex; flex-direction: column; } .cl-step__icon { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--steel-50); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .cl-step__n { font-family: var(--font-display); font-size: var(--text-md); color: var(--steel-500); } .cl-step h3 { font-size: var(--text-md); margin: 4px 0 7px; } .cl-step p { font-size: var(--text-sm); color: var(--text-body); line-height: 1.55; margin: 0; } /* review card */ .cl-review { display: flex; flex-direction: column; gap: 12px; } .cl-review > p { font-size: var(--text-base); color: var(--text-strong); line-height: 1.6; margin: 0; flex: 1; } .cl-review__who { display: flex; align-items: center; gap: 11px; padding-top: 4px; } .cl-review__avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--steel-50); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-sm); } .cl-review__name { font-size: var(--text-sm); font-weight: 700; color: var(--text-strong); } .cl-review__meta { font-size: var(--text-xs); color: var(--text-muted); } .cl-review__source { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; } /* closing CTA band */ .cl-cta { padding-top: 76px; padding-bottom: 76px; } .cl-cta .cl-card { padding: 52px 56px; text-align: center; } .cl-cta h2 { color: #fff; font-size: var(--text-2xl); margin: 16px auto 12px; max-width: 620px; } .cl-cta p { color: rgba(255,255,255,.85); font-size: var(--text-md); margin: 0 auto 28px; max-width: 540px; line-height: 1.6; } .cl-cta__actions { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; } .cl-cta__phone { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; font-size: var(--text-md); text-decoration: none; } .cl-cta__phone .cl-ico { color: var(--steel-200); } .cl-cta__phone:hover { text-decoration: none; color: var(--steel-200); } /* ------------------------------------------------------------------ * * 18. HOME PAGE * ------------------------------------------------------------------ */ .home-hero__grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; padding-top: 60px; padding-bottom: 68px; } .home-hero h1 { font-size: var(--text-4xl); line-height: 1.04; letter-spacing: -0.015em; margin: 20px 0 0; } .home-hero h1 .accent { color: var(--brand); } .home-hero__lede { font-size: var(--text-md); line-height: 1.65; color: var(--text-body); margin: 22px 0 0; max-width: 500px; } .home-hero__card { margin-top: 30px; max-width: 520px; } .home-hero__card-title { font-weight: 700; color: var(--text-strong); font-size: var(--text-md); margin-bottom: 4px; } .home-hero__card-sub { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 16px; } .home-mini-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .home-mini-form .cl-input { padding: 13px 15px; border-radius: var(--radius-md); } .home-mini-form .cl-btn { grid-column: 1 / -1; } .home-hero__assure { display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap; } .home-hero__assure span { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--text-muted); } .home-hero__assure .cl-ico { color: var(--success); } .home-hero__media { display: flex; flex-direction: column; align-items: center; } .home-hero__media-frame { position: relative; width: min(440px, 100%); } .home-hero__nameplate { margin-top: -34px; width: 82%; text-align: center; position: relative; z-index: 1; } .home-hero__nameplate h2 { font-size: var(--text-xl); margin: 0; } .home-hero__nameplate-title { font-size: var(--text-sm); color: var(--text-muted); margin-top: 4px; } .home-hero__nameplate-quote { font-family: var(--font-display); font-style: italic; font-size: var(--text-md); color: var(--text-strong); line-height: 1.45; margin: 16px 0 0; } .home-hero__nameplate-rule { height: 1px; background: var(--border-subtle); margin: 16px 0; } .home-hero__nameplate-foot { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: var(--text-sm); color: var(--text-body); } /* empathy band */ .home-empathy { background: var(--steel-50); border-top: 1px solid var(--steel-100); border-bottom: 1px solid var(--steel-100); } .home-empathy__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 52px; align-items: center; padding-top: 60px; padding-bottom: 60px; } .home-empathy h2 { font-size: var(--text-2xl); margin: 0; line-height: 1.15; } .home-empathy__lede { font-size: var(--text-md); color: var(--text-body); line-height: 1.65; margin: 18px 0 0; } .home-empathy__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; } .home-empathy__list li { display: flex; gap: 11px; align-items: center; font-size: var(--text-md); color: var(--text-strong); font-weight: 500; } .home-empathy__check { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #fff; color: var(--success); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-xs); } /* practice areas */ .home-practice { padding-top: 76px; padding-bottom: 40px; } .home-practice__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 860px; margin: 44px auto 0; } .home-practice__grid .cl-card { display: flex; flex-direction: column; } .home-practice__grid .cl-photo { aspect-ratio: 3 / 2; } .home-practice__body { position: relative; padding: 34px 26px 26px; display: flex; flex-direction: column; flex: 1; } .home-practice__body .cl-badge { align-self: flex-start; margin-bottom: 10px; } .home-practice__body h3 { font-size: var(--text-lg); margin: 0 0 8px; } .home-practice__body p { font-size: var(--text-sm); color: var(--text-body); line-height: 1.55; margin: 0 0 18px; flex: 1; } /* how it works */ .home-steps { padding-top: 48px; padding-bottom: 76px; } .home-steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 46px; } /* meet sam teaser */ .home-meet__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 52px; align-items: center; padding-top: 72px; padding-bottom: 72px; } .home-meet .cl-portrait { width: 100%; max-width: 320px; justify-self: center; margin: 0 auto; } .home-meet h2 { font-size: var(--text-2xl); margin: 16px 0 0; } .home-meet__lede { font-size: var(--text-md); color: var(--text-body); line-height: 1.65; margin: 18px 0 0; } .home-meet__stats { display: flex; gap: 28px; margin: 24px 0 26px; flex-wrap: wrap; } .home-meet__stat-v { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-strong); } .home-meet__stat-l { font-size: var(--text-sm); color: var(--text-muted); } /* reviews preview */ .home-reviews { padding-top: 76px; padding-bottom: 76px; } .home-reviews__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 36px; } .home-reviews__head h2 { font-size: var(--text-2xl); margin: 14px 0 0; } .home-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .home-reviews__google { grid-column: 1 / -1; } .home-reviews__google .cl-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .home-reviews__google-copy { display: flex; align-items: center; gap: 14px; font-weight: 700; color: var(--text-strong); font-size: var(--text-md); } /* ------------------------------------------------------------------ * * 19. UTILITIES * ------------------------------------------------------------------ */ @media (max-width: 760px) { .hide-sm { display: none !important; } } /* ------------------------------------------------------------------ * * 20. RESPONSIVE COLLAPSE — fluid 320 -> 2560, zero overflow * ------------------------------------------------------------------ */ @media (max-width: 1024px) { .home-hero__grid, .home-empathy__grid, .home-meet__grid { gap: 40px; } } @media (max-width: 880px) { /* header -> hamburger */ .cl-nav { display: none; } .cl-nav-toggle { display: inline-flex; } .cl-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); padding: 12px var(--pad-x) 18px; } .cl-nav.is-open .cl-nav__link { padding: 12px 8px; font-size: var(--text-md); } .cl-nav.is-open .cl-nav__cta { margin-left: 0; margin-top: 8px; } .cl-nav.is-open .cl-nav__cta .cl-btn { width: 100%; } /* 2-col grids -> 1 col */ .home-hero__grid, .home-empathy__grid, .home-meet__grid, .home-practice__grid { grid-template-columns: 1fr; } .home-hero__grid { padding-top: 44px; padding-bottom: 52px; gap: 44px; } .home-empathy__grid { padding-top: 48px; padding-bottom: 48px; gap: 32px; } .home-meet__grid { padding-top: 52px; padding-bottom: 52px; gap: 36px; } .home-practice { padding-top: 56px; padding-bottom: 28px; } .home-steps { padding-top: 36px; padding-bottom: 56px; } .home-reviews { padding-top: 56px; padding-bottom: 56px; } .cl-cta { padding-top: 56px; padding-bottom: 56px; } /* 4-col / 3-col -> 2-col / 1-col */ .home-steps__grid { grid-template-columns: repeat(2, 1fr); } .home-reviews__grid { grid-template-columns: 1fr; } .cl-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 44px; } } @media (max-width: 520px) { /* buttons may wrap instead of forcing horizontal overflow */ .cl-btn { white-space: normal; line-height: 1.25; text-align: center; } .home-steps__grid { grid-template-columns: 1fr; } .home-empathy__list { grid-template-columns: 1fr; } .home-mini-form { grid-template-columns: 1fr; } .cl-drawer__row2 { grid-template-columns: 1fr; } .cl-footer__grid { grid-template-columns: 1fr; } .cl-footer__bar .cl-container { flex-direction: column; } .cl-cta .cl-card { padding: 32px 22px; } .cl-cta__actions .cl-btn { width: 100%; } .home-hero__nameplate { width: 94%; } .cl-trust .cl-container { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cl-trust__item { font-size: var(--text-xs); } .cl-bookbar__rating { font-size: var(--text-xs); } .cl-bookbar .cl-btn { font-size: var(--text-sm); padding: 9px 14px; } } @media (max-width: 360px) { .cl-logo img { height: 36px; } .cl-trust .cl-container { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ * * 21. MOTION SAFETY * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .cl-btn:hover { transform: none; } .cl-drawer { transition: none; } }