/* ============================================================================ LATCHEL-COMPONENT: hand-authored .lchl — the design system the redesigned homepage is built in. The homepage (public/index.html) carries its own copy of these rules inline, split across the Elementor HTML widgets it is assembled from. This file is that system lifted into one place so other pages can be rebuilt in it; the shared rules below are copied from the homepage verbatim so the two cannot drift on appearance, only on location. See CLAUDE.md → "The .lchl design system" for the consolidation follow-up. Two things about this file are load-bearing: - It is linked from the BODY, immediately before the markup it styles, not from . The Elementor kit styles bare elements off a body class (`.elementor-kit-5 h2`, `.elementor-kit-5 a`) at (0,1,1) — the same specificity as this file's own `.lchl h2` / `.lchl a`. Ties go to source order, and the kit's block is inline in . Linked from this file would load first and lose every one of those ties; linked from the body it wins them, which is exactly the position the homepage's inline copies occupy. - The element resets (`.lchl a`, `.lchl img`) are deliberately left at (0,1,1) rather than being qualified with an attribute. A `.lchl a[href]` reset would score (0,2,1) and outrank the (0,2,0) component rules it exists to serve — `.lchl .btn`'s own font-size would lose to it. At (0,1,1) each reset still beats the kit on source order and still loses to every component rule, which is the order we want. Type note: the homepage declares --font as Poppins, which this site never loads, so its body content silently renders in the OS UI font while the shared header and footer render in GT Walsheim. This file uses the GT Walsheim stack the site actually ships so a page built in it matches the header and footer it sits between. Every other token is the homepage's. GT Walsheim has no 600, so the 600s below resolve to Bold. ============================================================================ */ .lchl{ --cream:#FFFDFB; --cream-2:#FAF7F4; --cream-3:#F6F1EA; --coral:#F0A08C; --coral-deep:#E27A5C; --coral-tint:#FBE7DF; --ink:#222222; --ink-soft:#6A635C; --line:#ECE4DC; --gold:#F4C054; --white:#FFFFFF; --font:"GT Walsheim",system-ui,-apple-system,sans-serif; --shadow:0 2px 4px rgba(34,28,24,.04), 0 22px 50px -28px rgba(34,28,24,.28); --shadow-sm:0 1px 2px rgba(34,28,24,.05), 0 10px 26px -16px rgba(34,28,24,.22); --r:22px; --maxw:1180px; } /* ---------- base ---------- */ .lchl, .lchl *{box-sizing:border-box} .lchl{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased} .lchl h1, .lchl h2, .lchl h3, .lchl h4{font-family:var(--font);font-weight:600;line-height:1.04;letter-spacing:-.02em;margin:0;color:var(--ink)} .lchl p{margin:0} /* (0,1,1) on purpose — see the header note. */ .lchl a{color:inherit;text-decoration:none;font-size:inherit;font-weight:inherit;line-height:inherit} .lchl img{display:block;max-width:100%;height:auto} /* ---------- layout ---------- */ .lchl .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px} .lchl section{padding:84px 0} .lchl .section-head{max-width:680px;margin-bottom:46px} .lchl .section-head h2{font-size:clamp(29px,3.8vw,44px);margin-top:14px} .lchl .section-head p{margin-top:16px;font-size:18px;color:var(--ink-soft)} .lchl .center{margin-left:auto;margin-right:auto;text-align:center} /* Tinted section, hairline-ruled top and bottom — the homepage's .tband / .statbar treatment, used here to alternate the vertical rhythm. */ .lchl .band{background:var(--cream-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .lchl .eyebrow{font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--coral-deep);display:block} .lchl .eyebrow.ink{color:var(--ink-soft)} /* ---------- buttons ---------- */ .lchl .btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font);font-weight:600;font-size:15.5px;line-height:1.2;padding:13px 24px;border-radius:12px;border:2px solid transparent;cursor:pointer;transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s} .lchl .btn:focus-visible{outline:3px solid var(--coral-deep);outline-offset:2px} .lchl .btn-primary{background:var(--coral);color:#3a1d12} .lchl .btn-primary:hover{background:var(--coral-deep);color:#fff;transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(226,122,92,.85)} .lchl .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .lchl .btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)} .lchl .btn-arrow svg{transition:transform .16s} .lchl .btn-arrow:hover svg{transform:translateX(3px)} /* Inline "Learn More →" link. Same idiom as the homepage's .mcard .ex, sized up for use as a section-level call to action. */ .lchl .learn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;line-height:1.2;color:var(--coral-deep)} .lchl .learn svg{transition:transform .16s} .lchl .learn:hover svg{transform:translateX(3px)} .lchl .learn:focus-visible{outline:3px solid var(--coral-deep);outline-offset:3px;border-radius:4px} /* ---------- hero ---------- */ .lchl .hero{padding:32px 0 64px} .lchl .hero-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:44px;align-items:center} .lchl .hero h1{font-size:clamp(40px,5.6vw,66px);line-height:1.3} .lchl .hero .lede{margin-top:24px;font-size:19px;color:var(--ink-soft)} .lchl .hero .lede b{color:var(--ink);font-weight:600} .lchl .hero-cta{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap} /* ---------- card row ---------- */ .lchl .mcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .lchl .mcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:0;box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column} .lchl .mcard .art{background:var(--cream-2);border-bottom:1px solid var(--line)} .lchl .mcard .art img{width:100%} .lchl .mcard .body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1} .lchl .mcard h3{font-size:20px;margin:0 0 9px} .lchl .mcard p{color:var(--ink-soft);font-size:15px} .lchl .mcard .learn{margin-top:auto;padding-top:16px} /* ---------- alternating feature rows ---------- */ .lchl .feat{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center} .lchl .feat.flip .copy{order:2} .lchl .feat .copy h2{font-size:clamp(27px,3.4vw,40px);margin:14px 0 16px} .lchl .feat .copy>p{color:var(--ink-soft);font-size:17px} .lchl .feat .copy .learn{margin-top:22px} .lchl .feat .shot img{width:100%;border-radius:var(--r)} /* ---------- FAQ ---------- */ .lchl .faqwrap{max-width:900px;margin:0 auto} .lchl details.faq{border-bottom:1px solid var(--line)} .lchl details.faq summary{cursor:pointer;list-style:none;padding:20px 42px 20px 4px;font-weight:600;font-size:19px;line-height:1.35;position:relative} .lchl details.faq summary::-webkit-details-marker{display:none} .lchl details.faq summary:focus-visible{outline:3px solid var(--coral-deep);outline-offset:-3px;border-radius:6px} .lchl details.faq summary::after{content:"+";position:absolute;right:8px;top:16px;font-size:25px;font-weight:400;color:var(--coral-deep);transition:transform .2s} .lchl details.faq[open] summary::after{content:"–"} .lchl details.faq .ans{padding:0 42px 22px 4px;color:var(--ink-soft);font-size:16px} .lchl details.faq .ans p{margin:0 0 14px} .lchl details.faq .ans p:last-child{margin-bottom:0} .lchl details.faq .ans b{color:var(--ink)} /* Some answers carry a bullet list — the Analytics+ FAQ was written that way. */ .lchl details.faq .ans ul{margin:0 0 14px;padding-left:20px} .lchl details.faq .ans li{margin-bottom:6px} /* ---------- closing CTA band ---------- The maintenance page hand-rolled this with three inline style attributes when it was the only page in the system. Thirteen more pages carry the same band — same heading, same single primary button — so it is a component now. */ .lchl .cta{text-align:center;padding:70px 0} .lchl .cta h2{font-size:clamp(26px,3.4vw,38px)} .lchl .cta .hero-cta{justify-content:center;margin-top:24px} /* ---------- section head, secondary variants ---------- .tight is the FAQ head's spacing (was an inline margin on the maintenance page). h3 is for the mid-page heads several feature pages carry above an icon grid or a second card row — a real h3 so the outline stays ordered. */ .lchl .section-head.tight{margin-bottom:42px} .lchl .section-head h3{font-size:clamp(24px,3vw,34px);margin-top:14px} /* ---------- icon grid ---------- Three-up icon + title + copy, no card and no call to action. Upstream these are 48px icon uploads, so the box is fixed and object-fit keeps a mismatched asset from setting the row height. */ .lchl .igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px} .lchl .icard img{width:48px;height:48px;object-fit:contain;margin-bottom:16px} .lchl .icard h3{font-size:19px;margin:0 0 8px} .lchl .icard p{color:var(--ink-soft);font-size:15px} /* Image-less card row — same card, no .art, so the body carries the top pad. */ .lchl .mcards.noart .mcard .body{padding:28px 24px 26px} /* ---------- pricing plans ---------- The Analytics+ pages' two plan tables. The tick is drawn with a rotated border rather than an inline so the list markup stays plain
  • . */ .lchl .plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto} .lchl .plan{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:32px 28px;display:flex;flex-direction:column} .lchl .plan-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .lchl .plan h3{font-size:22px} .lchl .plan .tag{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--coral-deep);background:var(--coral-tint);border-radius:999px;padding:4px 11px} .lchl .plan .sub{color:var(--ink-soft);font-size:14px;margin-top:6px} .lchl .plan .price{font-size:40px;font-weight:600;letter-spacing:-.02em;margin:18px 0 4px} .lchl .plan .price .per{font-size:15px;font-weight:400;color:var(--ink-soft)} .lchl .plan ul{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:10px} .lchl .plan li{font-size:15px;color:var(--ink-soft);padding-left:26px;position:relative} .lchl .plan li::before{content:"";position:absolute;left:2px;top:.4em;width:13px;height:7px;border-left:2px solid var(--coral-deep);border-bottom:2px solid var(--coral-deep);transform:rotate(-45deg)} .lchl .plan .btn{margin-top:auto;align-self:flex-start} /* ---------- numbered steps ---------- The features overview's "How it Works" walkthrough. Upstream it is a tabbed widget that renders one pane of six without its JavaScript; here every step is in the document and visible, which is the rule this system is built on. The "Step #N" kicker is the page's own text, not a CSS counter — there is no second source of truth for it to drift from. */ .lchl .steps{border-bottom:1px solid var(--line)} .lchl .step{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;padding:26px 0;border-top:1px solid var(--line)} .lchl .step-n{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--coral-deep);white-space:nowrap;padding-top:3px} .lchl .step h3{font-size:21px;margin:0 0 6px} .lchl .step-sub{font-weight:600;margin-bottom:8px} .lchl .step p{color:var(--ink-soft);font-size:16px} .lchl .step .step-sub{color:var(--ink)} /* ---------- wide column beside a narrow image ---------- One image belongs to a whole block rather than to any one row of it — the step list's phone shot, the mission statement's illustration. */ .lchl .split{display:grid;grid-template-columns:1.32fr .68fr;gap:48px;align-items:center} .lchl .split.flip>:first-child{order:2} .lchl .split .shot img{width:100%;border-radius:var(--r)} .lchl .split .igrid{grid-template-columns:1fr;gap:26px} .lchl .split .icard{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start} .lchl .split .icard img{margin-bottom:0} /* ---------- click-to-load video ---------- Hosts the .rll-youtube-player facade from public/js/latchel-youtube.js. The facade's own inner styles come from each page's inline rocket-lazyload CSS; this only sizes and clips the box it sits in. */ .lchl .vidwrap{max-width:900px;margin:0 auto;border-radius:var(--r);overflow:hidden} .lchl .vidwrap .rll-youtube-player{margin:0} /* ---------- no scroll reveal ---------- There is deliberately no .reveal rule here, and pages built in this system must not add one. The homepage's version starts every section at opacity 0 and un-hides on intersection, which means a renderer that never scrolls — which is what a crawler is — sees an empty page. Content on this site has to be legible to crawlers on a cold, non-interacting load, so nothing in this file may make content conditional on scrolling, interaction, or JavaScript running at all. `scraper/unhide_reveal.py` strips the homepage's copy of that pattern back out after every re-scrape for the same reason. */ /* ---------- responsive ---------- */ @media(max-width:1024px){ .lchl .mcards{grid-template-columns:1fr 1fr} .lchl .igrid{grid-template-columns:1fr 1fr;gap:28px} } @media(max-width:880px){ /* No position:sticky lives inside .lchl, so clip is safe and keeps the vertical axis scrollable. Insurance for the no-side-scroll requirement. */ .lchl{overflow-x:clip} .lchl .hero-grid{grid-template-columns:1fr;gap:36px} .lchl .feat{grid-template-columns:1fr;gap:34px} /* Keep the image below the copy on every row once stacked, including the rows that run image-first on desktop. */ .lchl .feat.flip .copy{order:0} .lchl .feat .shot{order:1} .lchl .mcards{grid-template-columns:1fr} .lchl .igrid{grid-template-columns:1fr} .lchl .plans{grid-template-columns:1fr} .lchl .split{grid-template-columns:1fr;gap:36px} /* Keep the image below the copy once stacked, both ways round. */ .lchl .split.flip>:first-child{order:0} .lchl .split .shot{order:1} } @media(max-width:600px){ .lchl section{padding:56px 0} .lchl .hero{padding:24px 0 48px} .lchl .hero h1{font-size:clamp(29px,8.2vw,44px);line-height:1.14} .lchl .hero .lede{font-size:17px;margin-top:18px} .lchl .section-head{margin-bottom:34px} .lchl .section-head.tight{margin-bottom:30px} .lchl details.faq summary{font-size:17px} .lchl .cta{padding:52px 0} .lchl .plan{padding:26px 22px} /* Put the kicker above the copy so neither is squeezed. */ .lchl .step{grid-template-columns:1fr;gap:8px;padding:22px 0} } @media(max-width:380px){ .lchl .wrap{padding:0 18px} } @media(prefers-reduced-motion:reduce){ .lchl, .lchl *{animation:none!important;transition:none!important} }