/* ========================================================================== Lookmold theme layer Loaded last from baseof.html so it wins the cascade over theme.min.css, custom.css, lm-laws.css and lm-leadgen.css. Redefines the design tokens those files consume and restyles the shared surfaces (header, heroes, cards, buttons, tables, CTA boxes, footer). Direction: an inspector's report, not a startup landing page. Deep navy for structure, one blue for links, one green for every phone action, neutral greys, a serif for headings so the guides read as authored and reviewed. ========================================================================== */ /* ---------- Tokens ------------------------------------------------------- */ :root { color-scheme: light; --lm-navy-900: #0B1D2E; --lm-navy-800: #10283F; --lm-navy-700: #173654; --lm-primary-700: #123D66; --lm-primary-600: #174C7D; --lm-primary-500: #1D5B94; --lm-primary-200: #BFD5EA; --lm-primary-soft: #E7F0F8; --lm-primary-tint: #F2F7FB; --lm-green-600: #186643; --lm-green-500: #1F7A52; --lm-green-400: #2C8F63; --lm-green-soft: #E6F4EC; --lm-gray-900: #16212C; --lm-gray-700: #374757; --lm-gray-600: #526375; --lm-gray-500: #6B7C8E; --lm-gray-400: #8E9DAD; --lm-gray-300: #B5C1CD; --lm-gray-200: #D3DBE4; --lm-gray-150: #E1E7EE; --lm-gray-100: #ECF0F4; --lm-gray-50: #F5F7F9; --lm-white: #FFFFFF; /* Aliases consumed by custom.css */ --tc-orange: var(--lm-primary-500); --tc-orange-hover: var(--lm-primary-700); --tc-slate-900: var(--lm-navy-900); --tc-slate-800: var(--lm-navy-800); --tc-slate-700: var(--lm-gray-700); --tc-gray-900: var(--lm-gray-900); --tc-gray-500: var(--lm-gray-500); --tc-gray-200: var(--lm-gray-200); --tc-gray-100: var(--lm-gray-100); --tc-gray-50: var(--lm-gray-50); --tc-white: var(--lm-white); --tc-green: var(--lm-green-500); --tc-blue: var(--lm-primary-500); /* Aliases consumed by lm-laws.css and the city layouts */ --lm-accent: var(--lm-primary-500); --lm-accent-dark: var(--lm-primary-700); --lm-accent-soft: var(--lm-primary-soft); --lm-hero-surface: #FFFFFF; --lm-surface: #FFFFFF; --lm-muted: var(--lm-gray-600); --lm-border: var(--lm-gray-200); --lm-card: #FFFFFF; --lm-max: 1100px; --radius-card: 12px; --radius-btn: 8px; --shadow-card: 0 1px 2px rgba(11, 29, 46, 0.05), 0 8px 24px -14px rgba(11, 29, 46, 0.18); --shadow-card-hover: 0 1px 2px rgba(11, 29, 46, 0.06), 0 16px 32px -18px rgba(11, 29, 46, 0.28); --shadow-soft: 0 1px 2px rgba(11, 29, 46, 0.05), 0 6px 16px -12px rgba(11, 29, 46, 0.14); --border-soft: var(--lm-gray-200); --border-strong: var(--lm-gray-300); --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; /* Subtle blueprint grid used behind heroes */ --lm-grid: radial-gradient(rgba(29, 91, 148, 0.13) 1px, transparent 1.2px); } /* ---------- Document ----------------------------------------------------- */ /* theme.min.css sets html{height:100%} and custom.css sets overflow-x:hidden on html, which together turn into the scroll container. That breaks position:sticky, scroll restoration and anchor offsets. clip does not create a scroll container. */ html { height: auto; overflow-x: clip; scroll-padding-top: 88px; } body { overflow-x: clip; background: var(--lm-gray-50); color: var(--lm-gray-900); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.sticky-footer { height: auto; } ::selection { background: rgba(29, 91, 148, 0.16); color: var(--lm-navy-900); } a { color: var(--lm-primary-500); } a:hover, a:focus-visible { color: var(--lm-primary-700); text-decoration-color: rgba(29, 91, 148, 0.45); } a:focus-visible, button:focus-visible { outline: 2px solid var(--lm-primary-500); outline-offset: 3px; box-shadow: none; } /* ---------- Type --------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .content-title .p-name, .lm-article-head h1, .lm-hero-react__title, .lm-laws-hero h1, .home-hero__heading, .hub-hero__header h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.012em; color: var(--lm-navy-900); } h1 { font-size: clamp(2.1rem, 3.4vw, 2.75rem); line-height: 1.12; } h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.2; } h3 { font-size: clamp(1.25rem, 1.8vw, 1.45rem); line-height: 1.3; } h4 { font-size: 1.15rem; } .e-content h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); display: block; padding-bottom: 0; margin-top: 2.75rem; margin-bottom: 0.9rem; } .e-content h2::after, .content-item h2::after, .location-richtext h2::after, .location-section h2::after, .location-section__title::after { display: none; } .e-content h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin-top: 2rem; margin-bottom: 0.6rem; } .e-content h4 { font-size: 1.15rem; } .e-content h5, .e-content h6 { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--lm-gray-600); } .e-content { font-size: clamp(1rem, 0.4vw + 0.95rem, 1.0625rem); line-height: 1.75; color: var(--lm-gray-900); } .e-content p + p { margin-top: 1.05rem; } .e-content a, .e-content a:visited { color: var(--lm-primary-600); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(29, 91, 148, 0.35); text-underline-offset: 0.16em; } .e-content a:hover, .e-content a:focus-visible { color: var(--lm-primary-700); text-decoration-color: currentColor; } .e-content strong { color: var(--lm-navy-900); } .e-content ul li::marker, .e-content ol li::marker { color: var(--lm-primary-500); } blockquote { border-left: 3px solid var(--lm-primary-500); background: var(--lm-primary-tint); border-radius: 0 var(--radius-card) var(--radius-card) 0; box-shadow: none; } hr { border-top-color: var(--lm-gray-200); } .eyebrow, .hub-hero__eyebrow, .home-hero__eyebrow, .author-card__label, .lm-states__eyebrow { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lm-primary-600); } /* ---------- Buttons ------------------------------------------------------ */ button, .btn { border-radius: var(--radius-btn); font-weight: 600; letter-spacing: 0.005em; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast); } .btn-primary, button.btn-primary, input[type="submit"], .site-header__actions .btn-primary, .site-header__mobile-cta .btn-primary { background: var(--lm-green-500); color: #fff; border-color: var(--lm-green-500); box-shadow: 0 1px 2px rgba(11, 29, 46, 0.12); transform: none; } .btn-primary:hover, .btn-primary:focus-visible, .site-header__actions .btn-primary:hover, .site-header__actions .btn-primary:focus-visible, .site-header__mobile-cta .btn-primary:hover, .site-header__mobile-cta .btn-primary:focus-visible { background: var(--lm-green-600); border-color: var(--lm-green-600); color: #fff; box-shadow: 0 2px 6px rgba(11, 29, 46, 0.18); transform: none; text-decoration: none; } .btn-secondary { background: #fff; color: var(--lm-navy-800); border-color: var(--lm-gray-300); box-shadow: 0 1px 2px rgba(11, 29, 46, 0.06); } .btn-secondary:hover, .btn-secondary:focus-visible { background: var(--lm-primary-tint); color: var(--lm-navy-900); border-color: var(--lm-primary-200); box-shadow: 0 1px 2px rgba(11, 29, 46, 0.06); transform: none; text-decoration: none; } .btn-ghost { background: transparent; color: var(--lm-primary-600); border-color: var(--lm-gray-200); } /* Phone glyph on every tel: button that does not already carry an icon */ .btn[href^="tel:"]::before { content: ""; flex: 0 0 auto; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E") center / contain no-repeat; } /* City / state layouts use .lm-btn; phone actions go green, everything else blue */ .lm-btn { border-radius: var(--radius-btn); border-width: 1px; box-shadow: 0 1px 2px rgba(11, 29, 46, 0.12); transition: background var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast); } .lm-btn:hover { filter: none; } .lm-btn--primary, .lm-btn--accent { background: var(--lm-primary-500); border-color: var(--lm-primary-500); color: #fff; } .lm-btn--primary:hover, .lm-btn--accent:hover { background: var(--lm-primary-700); border-color: var(--lm-primary-700); color: #fff; } .lm-btn[href^="tel:"], .lm-btn--accent[href^="tel:"], .lm-inline-cta .lm-btn, .lm-sidebar__cta .lm-btn, .lm-sticky .lm-btn { background: var(--lm-green-500); border-color: var(--lm-green-500); color: #fff; box-shadow: 0 1px 2px rgba(11, 29, 46, 0.12); } .lm-btn[href^="tel:"]:hover, .lm-btn--accent[href^="tel:"]:hover, .lm-inline-cta .lm-btn:hover, .lm-sidebar__cta .lm-btn:hover, .lm-sticky .lm-btn:hover { background: var(--lm-green-600); border-color: var(--lm-green-600); color: #fff; } .lm-btn--ghost, .lm-btn--outline, .lm-btn--outline-light { background: #fff; color: var(--lm-navy-800); border-color: var(--lm-gray-300); } .lm-btn--ghost:hover, .lm-btn--outline:hover, .lm-btn--outline-light:hover { background: var(--lm-primary-tint); border-color: var(--lm-primary-200); } .lm-states__go { background: var(--lm-primary-500); border-radius: var(--radius-btn); } .lm-states__go:hover { background: var(--lm-primary-700); } /* ---------- Top bar + header -------------------------------------------- */ .site-header, .site-header--condensed { background: var(--lm-navy-800); backdrop-filter: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } .site-header__bar { padding-block: 0.8rem; } .site-header--condensed .site-header__bar { padding-block: 0.6rem; } .site-header__brand img { width: clamp(150px, 16vw, 196px); } .site-header__nav .site-nav > li > a { color: rgba(255, 255, 255, 0.82); font-weight: 500; font-size: 0.95rem; } .site-header__nav .site-nav > li > a::after { background: var(--lm-green-400); bottom: -0.55rem; height: 2px; } .site-header__nav .site-nav > li > a:hover, .site-header__nav .site-nav > li > a:focus-visible, .site-header__nav .site-nav > li.active > a { color: #fff; } .site-header__menu-toggle { border-color: rgba(255, 255, 255, 0.22); background: transparent; } .site-header__mobile { background: var(--lm-navy-900); backdrop-filter: none; } .site-header__mobile-nav .site-nav a { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0; padding-inline: 0; } .site-header__mobile-nav .site-nav a:hover, .site-header__mobile-nav .site-nav a:focus-visible { background: transparent; color: #fff; } /* ---------- Hero surfaces (home, hub, city, state) ---------------------- */ .home-hero, .hub-hero, .lm-hero-react, .lm-laws-hero { position: relative; background-color: var(--lm-primary-tint); background-image: var(--lm-grid), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%); background-size: 22px 22px, 100% 100%; border-bottom: 1px solid var(--lm-gray-200); overflow: hidden; } .home-hero::after, .home-hero__background, .lm-hero-react__veil { display: none; } .home-hero { padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2.25rem, 5vw, 3.5rem); text-align: center; } .home-hero__inner { position: relative; width: min(760px, calc(100% - 32px)); margin-inline: auto; display: grid; gap: 1.1rem; justify-items: center; } .home-hero__eyebrow { margin: 0; } .home-hero h1, .home-hero__heading { font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1.08; margin: 0; max-width: 18ch; } .home-hero__subtitle { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; color: var(--lm-gray-600); margin: 0; max-width: 62ch; } .home-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 0.5rem; } .home-hero__cta .btn { min-height: 52px; padding-inline: 1.5rem; font-size: 1rem; } .home-hero__support, .home-hero__tagline { margin: 0; font-size: 0.95rem; color: var(--lm-gray-600); max-width: 60ch; } .home-hero__disclaimer { margin: 0; font-size: 0.82rem; color: var(--lm-gray-500); max-width: 60ch; } .home-hero__credentials { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .home-hero__credentials li { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.4rem 0.8rem; border: 1px solid var(--lm-gray-200); border-radius: 999px; background: #fff; color: var(--lm-navy-800); font-size: 0.85rem; font-weight: 600; } .home-hero__credentials svg { width: 0.95rem; height: 0.95rem; color: var(--lm-green-500); flex: 0 0 auto; } @media (max-width: 640px) { .home-hero { text-align: left; } .home-hero__inner { justify-items: start; } .home-hero__cta { flex-direction: column; align-items: stretch; width: 100%; } .home-hero__credentials { justify-content: flex-start; } } .hub-hero { padding-block: clamp(2.5rem, 5vw, 4rem); } .hub-hero__subtitle { color: var(--lm-gray-700); } .hub-hero__steps { border: 1px solid var(--lm-gray-200); box-shadow: var(--shadow-soft); } .hub-hero__step-count { background: var(--lm-navy-800); } .hub-hero__step-body h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; } /* ---------- Home sections ---------------------------------------------- */ .home-main { background: var(--lm-gray-50); padding-top: 0; } .home-main .section-header { text-align: center; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); } .home-main .section-header h2 { margin: 0 0 0.5rem; } .home-main .section-header p { margin: 0 auto; max-width: 60ch; color: var(--lm-gray-600); } .home-journey, .home-resources { padding-block: clamp(3rem, 6vw, 4.5rem); } .home-journey__grid, .home-resources__grid { display: grid; gap: 1.25rem; } .home-journey__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .home-resources__grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .home-card, .home-resource-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.6rem 1.6rem 1.4rem; background: #fff; border: 1px solid var(--lm-gray-200); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .home-card:hover, .home-resource-card:hover, .home-card:focus-within, .home-resource-card:focus-within { border-color: var(--lm-primary-200); box-shadow: var(--shadow-card-hover); } .home-card h3, .home-resource-card h3 { margin: 0; font-size: 1.3rem; line-height: 1.25; } .home-resource-card h3 { font-size: 1.2rem; } .home-resource-card h3 a { color: var(--lm-navy-900); text-decoration: none; } .home-resource-card h3 a:hover { color: var(--lm-primary-600); } .home-card p, .home-resource-card p { margin: 0; flex: 1 1 auto; color: var(--lm-gray-600); line-height: 1.6; } .home-card__cta, .home-resource-card__cta, .hub-card__cta, .hub-highlight__cta, .hub-topic-card__cta { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; color: var(--lm-primary-600); font-weight: 600; font-size: 0.95rem; text-decoration: none; } .home-card__cta::after, .home-resource-card__cta::after, .hub-card__cta::after, .hub-highlight__cta::after, .hub-topic-card__cta::after { content: "\2192"; transition: transform var(--transition-fast); } .home-card__cta:hover::after, .home-resource-card__cta:hover::after, .hub-card__cta:hover::after { transform: translateX(3px); } /* Credentials band */ .home-highlight { background: var(--lm-navy-800); color: #fff; padding-block: clamp(2.25rem, 4vw, 3rem); border-block: 1px solid rgba(255, 255, 255, 0.08); } .home-highlight__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem 2rem; text-align: left; } .home-highlight__list li { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; align-items: start; color: #fff; } .home-highlight__icon { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); display: grid; place-items: center; color: var(--lm-green-400); } .home-highlight__icon svg { width: 22px; height: 22px; } .home-highlight__list .stat-label { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: #fff; line-height: 1.2; } .home-highlight__list .stat-copy { margin: 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.76); line-height: 1.5; } @media (min-width: 900px) { .home-highlight__list li + li { border-left: 1px solid rgba(255, 255, 255, 0.12); padding-left: 2rem; } } .home-longform { padding-block: clamp(2.5rem, 5vw, 4rem); background: #fff; border-top: 1px solid var(--lm-gray-200); } .home-longform .container { max-width: 820px; } /* ---------- Cards, hubs, misc surfaces ---------------------------------- */ .card, .home-panel, .hub-card, .hub-highlight, .hub-hero__steps, .author-card, .related-links-card, .toc-card, .snapshot, .lm-states { border: 1px solid var(--lm-gray-200); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); background: #fff; } .card:hover { transform: none; box-shadow: var(--shadow-card-hover); } .hub-topic-card { background: #fff; border: 1px solid var(--lm-gray-200); } .hub-topic-card:hover, .hub-topic-card:focus-within { transform: none; border-color: var(--lm-primary-200); box-shadow: var(--shadow-card-hover); } .hub-page { background: var(--lm-gray-50); } .hub-section--article { background: #fff; border: 1px solid var(--lm-gray-200); box-shadow: var(--shadow-soft); } .hub-note { background: var(--lm-primary-tint); border-color: var(--lm-primary-200); box-shadow: none; } .author-card { gap: 1.5rem; padding: 1.5rem; } .author-card__avatar { padding: 0; background: none; box-shadow: none; width: 88px; height: 88px; } .author-card__avatar img { border: 2px solid var(--lm-gray-200); } .author-card__bio { font-size: 0.95rem; color: var(--lm-gray-700); } .tc-badge { background: var(--lm-primary-soft); color: var(--lm-primary-700); border-radius: 6px; } .tc-badge--green { background: var(--lm-green-soft); color: var(--lm-green-600); } .state-grid a { background: #fff; border: 1px solid var(--lm-gray-200); padding: 0.5rem 0.75rem; border-radius: 8px; color: var(--lm-navy-800); } .state-grid a:hover, .state-grid a:focus-visible { background: var(--lm-primary-tint); border-color: var(--lm-primary-200); box-shadow: none; } /* ---------- Article header ---------------------------------------------- */ .content-title .p-name, .lm-article-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.12; text-align: left; } .content-title.lm-article-head, .lm-article-head { width: 100%; max-width: none; margin: 0; } /* Editorial pages: cap the measure so 17px body text stays readable */ .blog-listing .page-layout { max-width: 940px; } .content-title #breadcrumbs, .content-title .post-meta, .hero .post-meta { justify-content: flex-start; text-align: left; } .breadcrumbs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--lm-gray-500); } .breadcrumbs__item { margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; } .breadcrumbs__item::after { color: var(--lm-gray-300); } .breadcrumbs__link { color: var(--lm-primary-600); font-weight: 500; text-decoration: none; } .breadcrumbs__link:hover { text-decoration: underline; } .breadcrumbs__current { color: var(--lm-gray-600); font-weight: 500; } .post-meta, .lm-article-head .post-meta { font-size: 0.9rem; color: var(--lm-gray-500); } .post-meta a { color: var(--lm-primary-600); } .page-toc-content { max-width: none !important; margin: 1rem 0 1.5rem !important; padding: 1rem 1.25rem !important; background: #fff !important; border: 1px solid var(--lm-gray-200) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-soft); } .page-toc-content a { color: var(--lm-primary-600) !important; } .page-toc-content li > ul { border-left-color: var(--lm-gray-200) !important; } /* ---------- Tables ------------------------------------------------------- */ table, .e-content table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.75rem 0; font-size: 0.95rem; background: #fff; border: 1px solid var(--lm-gray-200); border-radius: 10px; overflow: hidden; box-shadow: none; } table thead, .e-content table thead { background: var(--lm-gray-100); } table th, .e-content table th { color: var(--lm-navy-900); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; text-transform: uppercase; border-bottom: 2px solid var(--lm-navy-800); background: var(--lm-gray-100); padding: 0.75rem 1rem; } table td, .e-content table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--lm-gray-150); color: var(--lm-gray-900); } table tbody tr:nth-child(even) { background: var(--lm-gray-50); } table tbody tr:last-child td { border-bottom: 0; } @media (max-width: 640px) { table, .e-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ---------- Call CTA box (editorial pages) ------------------------------ */ .lm-cta { background: #fff; border: 1px solid var(--lm-gray-200); border-left: 4px solid var(--lm-green-500); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 1.5rem 1.5rem 1.15rem; margin: 2.25rem 0; } .lm-cta__headline { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--lm-navy-900); } .lm-cta__copy { color: var(--lm-gray-700); } .lm-cta__steps li span { background: var(--lm-navy-800); font-size: 0.75rem; } .lm-cta__btn { border-radius: var(--radius-btn); background: var(--lm-green-500); font-size: 1.1rem; box-shadow: 0 1px 2px rgba(11, 29, 46, 0.14); transition: background var(--transition-fast); } .lm-cta__btn:hover, .lm-cta__btn:focus-visible { background: var(--lm-green-600); filter: none; transform: none; } .lm-cta__meta { color: var(--lm-gray-600); } .lm-cta__disclosure { color: var(--lm-gray-500); } /* City page inline CTA */ .lm-inline-cta { background: #fff; border: 1px solid var(--lm-gray-200); border-left: 4px solid var(--lm-green-500); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 1.25rem 1.35rem; margin: 1.75rem 0; } .lm-inline-cta__copy { color: var(--lm-navy-900); } .lm-inline-cta__copy strong { font-weight: 600; } .lm-inline-cta__list { color: var(--lm-gray-600); } .lm-inline-cta__list li::before { background: var(--lm-green-500); opacity: 1; } .lm-inline-cta .lm-btn { flex: 0 0 auto; padding: 0.85rem 1.35rem; } @media (max-width: 700px) { .lm-inline-cta { flex-direction: column; align-items: stretch; } .lm-inline-cta .lm-btn { width: 100%; justify-content: center; } } /* Sticky call bars: one look everywhere */ .lm-callbar, .lm-sticky { background: #fff; color: var(--lm-navy-900); border-top: 1px solid var(--lm-gray-200); box-shadow: 0 -6px 20px rgba(11, 29, 46, 0.12); } .lm-sticky__inner { padding: 0.65rem 0.9rem; } .lm-sticky__copy { color: var(--lm-navy-900); font-size: 0.92rem; } .lm-callbar__btn, .lm-sticky .lm-btn--pill { border-radius: 999px; background: var(--lm-green-500); border-color: var(--lm-green-500); } .lm-callbar__btn:hover, .lm-sticky .lm-btn--pill:hover { background: var(--lm-green-600); border-color: var(--lm-green-600); } /* ---------- City remediation hero --------------------------------------- */ .lm-hero-react { padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(2.25rem, 4vw, 3rem); color: var(--lm-navy-900); } .lm-hero-react__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.08; filter: none; } .lm-hero-react .container.grid-md { max-width: var(--lm-max); } .lm-hero-react__wrap { position: relative; max-width: 52rem; margin: 0 auto; text-align: center; } .lm-hero-react__banner { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 1.1rem; padding: 0; background: none; border: 0; border-radius: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lm-primary-600); } .lm-hero-react__banner svg { width: 0.95rem; height: 0.95rem; color: var(--lm-green-500); } .lm-hero-react__title { font-size: clamp(2.1rem, 4.2vw, 3.1rem); font-weight: 600; line-height: 1.1; margin: 0 0 0.9rem; } .lm-hero-react__accent { color: var(--lm-primary-600); } .lm-hero-react__desc { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; color: var(--lm-gray-600); margin: 0 auto 1.5rem; max-width: 62ch; } .lm-hero-react__ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem; margin: 0 0 0.75rem; } .lm-hero-react__ctas .lm-btn.xl { padding: 0.95rem 1.6rem; font-size: 1.05rem; border-radius: var(--radius-btn); } .lm-hero-react__note { margin: 0 0 0.35rem; font-size: 0.92rem; font-weight: 600; color: var(--lm-navy-800); } .lm-hero-react__disclosure { margin: 0 auto 1.6rem; max-width: 60ch; font-size: 0.82rem; line-height: 1.5; color: var(--lm-gray-500); } .lm-hero-react__trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; max-width: 44rem; margin: 0 auto; } .lm-trust__card { display: flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.75rem 0.9rem; background: #fff; border: 1px solid var(--lm-gray-200); border-radius: 10px; font-size: 0.92rem; font-weight: 600; color: var(--lm-navy-800); box-shadow: var(--shadow-soft); } .lm-trust__card svg { width: 1.1rem; height: 1.1rem; color: var(--lm-green-500); flex: 0 0 auto; } .lm-remediation { background: #fff; } .lm-article { max-width: 820px; margin-inline: auto; } .lm-hr { border-top-color: var(--lm-gray-200); margin: 1.75rem 0; } .lm-related__title { color: var(--lm-navy-900); } .lm-related--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem 1rem; list-style: none; padding: 0; margin: 0.5rem 0; } .lm-related--grid li { margin: 0; } .lm-related--grid a { display: block; padding: 0.55rem 0.8rem; border: 1px solid var(--lm-gray-200); border-radius: 8px; background: #fff; color: var(--lm-navy-800); font-weight: 500; text-decoration: none; } .lm-related--grid a:hover { border-color: var(--lm-primary-200); background: var(--lm-primary-tint); } /* State law / silo heroes share the blueprint surface */ .lm-laws-hero { padding: clamp(2.25rem, 4vw, 3.25rem) 0; } .lm-laws-hero h1 { font-weight: 600; } .lm-laws-hero__eyebrow { background: #fff; border-color: var(--lm-gray-200); color: var(--lm-primary-600); } .lm-laws-hero__tldr { border-left-color: var(--lm-primary-500); box-shadow: var(--shadow-soft); } /* ---------- Footer ------------------------------------------------------- */ .site-footer { background: var(--lm-navy-900); color: rgba(255, 255, 255, 0.72); border-top: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; padding: clamp(2.75rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2rem); } .site-footer .footer-inner { gap: clamp(1.75rem, 3vw, 2.5rem); } .footer-brand__mark { width: 168px; } .footer-disclaimer { padding: 1.1rem 1.25rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-card); background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; line-height: 1.55; } .footer-disclaimer p { color: rgba(255, 255, 255, 0.7); } .footer-disclaimer strong { color: rgba(255, 255, 255, 0.92); font-weight: 600; } .footer-disclaimer a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); } .footer-columns { margin-top: 0; gap: 1.5rem 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-col h3 { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.9rem; } .footer-links { gap: 0.45rem; } .footer-links a { color: rgba(255, 255, 255, 0.82); font-weight: 400; font-size: 0.93rem; } .footer-links a:hover, .footer-links a:focus-visible { color: #fff; text-decoration: underline; } .footer-bottom { padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.55); font-size: 0.82rem; } .back-to-top { color: rgba(255, 255, 255, 0.82); } .back-to-top:hover { color: #fff; } /* ---------- Motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ---------- Phone estimate page (/free-estimate/) ----------------------- */ .lm-estimate__steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.75rem; } .lm-estimate__steps li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; margin: 0; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--lm-gray-200); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); } .lm-estimate__steps strong { display: block; margin-bottom: 0.2rem; color: var(--lm-navy-900); font-size: 1.05rem; } .lm-estimate__steps p { margin: 0; color: var(--lm-gray-600); } .lm-estimate__num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--lm-navy-800); color: #fff; font-weight: 700; font-size: 0.9rem; } .lm-estimate__disclosure { font-size: 0.85rem; color: var(--lm-gray-500); line-height: 1.5; } .lm-estimate__checklist { list-style: none; padding: 0; display: grid; gap: 0.5rem; } .lm-estimate__checklist li { position: relative; margin: 0; padding-left: 1.6rem; } .lm-estimate__checklist li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.95rem; height: 0.95rem; background: var(--lm-green-500); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; } .lm-estimate__checklist strong { color: var(--lm-navy-900); } .lm-estimate__signs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.6rem; margin: 0 0 1.25rem; } .lm-estimate__signs > div { padding: 0.75rem 0.9rem 0.75rem 2.4rem; position: relative; background: var(--lm-primary-tint); border: 1px solid var(--lm-primary-200); border-radius: 10px; color: var(--lm-navy-800); font-weight: 500; font-size: 0.95rem; line-height: 1.4; } .lm-estimate__signs > div::before { content: ""; position: absolute; left: 0.9rem; top: 0.95rem; width: 1rem; height: 1rem; background: var(--lm-primary-600); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm0 4 7.5 13h-15L12 6zm-1 5v4h2v-4h-2zm0 5v2h2v-2h-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm0 4 7.5 13h-15L12 6zm-1 5v4h2v-4h-2zm0 5v2h2v-2h-2z'/%3E%3C/svg%3E") center / contain no-repeat; } /* Estimate landing: hero + content lane */ .lm-est-hero { position: relative; padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(2.25rem, 4vw, 3.5rem); background-color: var(--lm-primary-tint); background-image: var(--lm-grid), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%); background-size: 22px 22px, 100% 100%; border-bottom: 1px solid var(--lm-gray-200); } .lm-est-hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } @media (min-width: 900px) { .lm-est-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr); } } .lm-est-hero__eyebrow { margin: 1rem 0 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lm-primary-600); } .lm-est-hero h1 { font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.08; margin: 0 0 0.9rem; max-width: 18ch; } .lm-est-hero__intro { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; color: var(--lm-gray-600); margin: 0 0 1.4rem; max-width: 54ch; } .lm-est-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem; margin: 0 0 0.85rem; } .lm-est-hero__cta .lm-btn.xl { padding: 1rem 1.7rem; font-size: 1.1rem; border-radius: var(--radius-btn); } .lm-est-hero__hours { font-size: 0.92rem; font-weight: 600; color: var(--lm-navy-800); max-width: 26ch; line-height: 1.35; } .lm-est-hero__disclosure { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--lm-gray-500); max-width: 60ch; } .lm-est-hero__card { background: #fff; border: 1px solid var(--lm-gray-200); border-top: 4px solid var(--lm-green-500); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.5rem 1.5rem 1.25rem; } .lm-est-hero__card-title { margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--lm-navy-900); } .lm-est-hero__list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.85rem; } .lm-est-hero__list li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; margin: 0; } .lm-est-hero__list strong { display: block; color: var(--lm-navy-900); font-size: 0.98rem; line-height: 1.3; } .lm-est-hero__list span:not(.lm-est-hero__check) { display: block; color: var(--lm-gray-600); font-size: 0.9rem; line-height: 1.4; } .lm-est-hero__check { width: 1.35rem; height: 1.35rem; margin-top: 0.05rem; border-radius: 50%; background: var(--lm-green-soft); position: relative; } .lm-est-hero__check::after { content: ""; position: absolute; inset: 0.3rem; background: var(--lm-green-600); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; } .lm-est-hero__trust { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 1rem; border-top: 1px solid var(--lm-gray-150); } .lm-est-hero__trust span { font-size: 0.78rem; font-weight: 600; color: var(--lm-navy-800); background: var(--lm-gray-100); border-radius: 999px; padding: 0.3rem 0.7rem; } .lm-est-page { background: var(--lm-gray-50); padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); } .lm-est-content { max-width: 900px; margin: 0 auto; } .lm-est-content h2 { font-size: clamp(1.5rem, 2.2vw, 1.85rem); margin: 2.5rem 0 0.85rem; } .lm-est-content > .lm-estimate > h2:first-child, .lm-estimate__panel h2 { margin-top: 0; } .lm-est-content h3 { font-size: 1.1rem; margin: 1.5rem 0 0.4rem; font-family: var(--font-body); font-weight: 600; } .lm-est-content .lm-estimate__steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 1.5rem; } .lm-est-content .lm-estimate__steps li { grid-template-columns: auto 1fr; } .lm-estimate__two { display: grid; gap: 1.25rem; margin: 2.5rem 0 0.5rem; } @media (min-width: 900px) { .lm-estimate__two { grid-template-columns: 1fr 1fr; align-items: start; } } .lm-estimate__panel { background: #fff; border: 1px solid var(--lm-gray-200); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 1.5rem 1.5rem 1.35rem; } .lm-estimate__panel h2 { font-size: 1.3rem; } .lm-estimate__panel p { color: var(--lm-gray-600); } .lm-estimate__panel .lm-estimate__checklist { margin: 0; font-size: 0.95rem; } .lm-estimate__panel .lm-estimate__signs { grid-template-columns: 1fr; gap: 0.5rem; margin-bottom: 1rem; } .lm-estimate__note { margin: 0; font-size: 0.92rem; } .lm-est-content .lm-cta { margin-top: 2.75rem; }