/** * C2 - the LGS visual system (UX-4/UX-5). Modern local editorial utility. * v2.3.0 (2026-08-13): UX-11 (section 20) - verified group organisers: * the claim door and the organiser workspace. A working surface, not a * console: one column, ruled tabs that wrap, labels above fields. * v1.9.2 (2026-08-12): UX-8 r3 - the kit's DOUBLE :not() input rule is * (0,3,1); the query input needs [type="search"] to win at (0,3,2). * v1.9.1 (2026-08-12): UX-8 r2 - the query input out-specifies the * Elementor kit's grey input colour (tie-break via element qualifier). * v1.9.0 (2026-08-12): UX-8 / Phase 4A (section 17) - C2 unified local * search: place + intent, four result families, utility grammar. * v1.8.1 (2026-08-12): UX-7.2 r2 - foot-end keeps the band gutter, the * legal registration line is a block span (a legacy mobile sheet hides * every
under 480px), C2 radius beats the legacy pill on form * submits, /uk/ band spacing, town lower-tail alignment. * v1.8.0 (2026-08-12): UX-7.2 owner visual finish (section 16) - legal * identity last, /uk/ progressive disclosure + inline finder, ONE * claim/provenance component, unfilled Follow variants (homepage wash * kept), market identity pass, bounded group inventories, ruled town * grow actions, accent-orange retired. * v1.7.2 (2026-08-12): UX-7.1 r3 - retire the UX-6 kraft claim card * (its important flags beat the new flat strip from inside our own * sheet); the quiet strip + disclosure is the one claim treatment. * v1.7.1 (2026-08-12): UX-7.1 r2 - root page joins the C2 scope; claim * strip specificity beats the legacy inline card. * v1.7.0 (2026-08-12): UX-7.1 screenshot-led coherence (section 15) - * find-your-town /uk/, one action/form/link system, panels to rules. * v1.6.1 (2026-08-11): UX-7 r2 - hero fills its line, follow band 2-col, * Hearabouts C2 skin extended to the homepage scope. * v1.6.0 (2026-08-11): UX-7 homepage (section 14) - place-first front * door; shell js gains the home hero enhancement. * v1.5.3 (2026-08-11): UX-6.1 - secondary action, in-profile product * expansion (details/summary), owner hint. * v1.5.2 (2026-08-11): r4 explicit colours on remaining profile anchors. * v1.5.1 (2026-08-11): cache-bust rebuild of v1.5.0 — the ver query never * moved across the three UX-6 CSS revisions, so hcdn kept serving the * round-1 sheet. Content: UX-6 profile family (section 13) + UX-5 global shell * control and footer (section 12), loaded site-wide; the directory-era * HFE/theme shells are retired at hook level and hidden as backstop. * Page-body rules stay scoped to .lgs-spine.lgs-c2 (town pages only). * Functional classes are the Phase 3B2 town contract, never renamed here. * Spec: project-control/implementation/2026-08-11-ux4-c2-design-system.md * Version: bump LGS_Spine::C2_VER on every change (hcdn caches per ?ver). */ /* ------------------------------------------------------------------ */ /* 1. Tokens */ /* ------------------------------------------------------------------ */ .lgs-spine.lgs-c2, body.lgs-c2-page, body.lgs-shell-on { --c2-paper: #F3F1EC; --c2-ink: #2A2622; --c2-body: #46413A; --c2-muted: #6B655C; --c2-faint: #6B655C; /* AA 5.1:1 on paper - was #8A8478 (3.3:1, failed); de-emphasis via size/style, never sub-AA colour */ --c2-green: #3A6B3C; --c2-green-deep: #2E5530; --c2-rule-strong: #2A2622; /* editorial statements */ --c2-rule: rgba(42, 38, 34, .22); /* section rules */ --c2-hair: rgba(42, 38, 34, .12); /* row dividers */ --c2-wash: #ECE7DC; --c2-card: #FBF9F4; --c2-kraft: #EFE9DC; --c2-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --c2-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --c2-max: 1120px; --c2-measure: 62ch; /* spacing scale - the only vertical/horizontal values C2 uses */ --s0: 4px; --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 72px; --c2-gutter: 24px; } /* ------------------------------------------------------------------ */ /* 2. Page frame + grid */ /* ------------------------------------------------------------------ */ .lgs-spine.lgs-c2 { font-family: var(--c2-sans); font-size: 16px; line-height: 1.6; color: var(--c2-body); background: var(--c2-paper); max-width: var(--c2-max); margin: 0 auto; padding: 0 var(--c2-gutter) var(--s7); } .lgs-spine.lgs-c2 a { color: var(--c2-green); text-underline-offset: 2px; } .lgs-spine.lgs-c2 a:hover { color: var(--c2-green-deep); } .lgs-spine.lgs-c2 :focus-visible { outline: 2px solid var(--c2-green); outline-offset: 2px; } .lgs-spine.lgs-c2 p { max-width: var(--c2-measure); margin: 0 0 var(--s3); } .lgs-spine.lgs-c2 img { max-width: 100%; height: auto; } .lgs-spine.lgs-c2 section, .lgs-spine.lgs-c2 .lgs-town__hero { border: 0; background: none; box-shadow: none; border-radius: 0; } .lgs-spine.lgs-c2 > section { padding: var(--s6) 0 var(--s4); border-top: 1px solid var(--c2-rule); } .lgs-spine.lgs-c2 > section:first-of-type { border-top: 0; } /* Eyebrow rule: an eyebrow renders ONLY when it adds information the heading doesn't carry ("The money", "Get involved", the market type). Redundant ones (What's on / Buy local / Groups & clubs) were removed from markup in v1.3 - hierarchy is never made by stacking labels. Level-4 editorial label: quiet, clearly intentional, distinct from metadata (caps + tracking + green-deep vs lowercase muted). */ .lgs-spine.lgs-c2 .lgs-town__kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-green-deep); margin: 0 0 var(--s0); } .lgs-spine.lgs-c2 h2 { font-family: var(--c2-serif); font-weight: 600; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.01em; line-height: 1.15; color: var(--c2-ink); margin: 0 0 var(--s2); } /* ------------------------------------------------------------------ */ /* 3. Town-page body scope. The v1.3 header/footer QUIETING rules that */ /* lived here are gone: UX-5 replaces the old shells outright (section */ /* 12), so there is nothing left to quiet. */ /* ------------------------------------------------------------------ */ body.lgs-c2-page { background: var(--c2-paper); } /* ------------------------------------------------------------------ */ /* 4. Hero: the town is the identity. Economical, confident. */ /* ------------------------------------------------------------------ */ .lgs-spine.lgs-c2 .lgs-spine__crumbs { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c2-faint); margin: var(--s4) 0 0; } .lgs-spine.lgs-c2 .lgs-spine__crumbs a { color: var(--c2-faint); text-decoration: none; } .lgs-spine.lgs-c2 .lgs-spine__crumbs a:hover { color: var(--c2-green); text-decoration: underline; } .lgs-spine.lgs-c2 .lgs-town__hero { padding: 0 0 var(--s4); margin: 0; } .lgs-spine.lgs-c2 .lgs-town__hero h1 { font-family: var(--c2-serif); font-weight: 500; font-size: clamp(44px, 7.5vw, 68px); line-height: 1.0; letter-spacing: -.015em; color: var(--c2-ink); margin: var(--s2) 0 var(--s3); } .lgs-spine.lgs-c2 .lgs-town__hero .lgs-spine__summary { border: 0; padding: 0; margin: 0 0 var(--s1); font-family: var(--c2-serif); font-style: italic; font-size: 18px; line-height: 1.45; color: var(--c2-ink); } .lgs-spine.lgs-c2 .lgs-town__hero .lgs-spine__summary strong { font-weight: 600; } .lgs-spine.lgs-c2 .lgs-town__hero p:not(.lgs-spine__summary) { font-size: 15px; color: var(--c2-muted); margin: 0; } .lgs-spine.lgs-c2 .lgs-town__hero::after { content: ""; display: block; height: 2px; background: var(--c2-rule-strong); margin-top: var(--s4); border-radius: 0; } /* ------------------------------------------------------------------ */ /* 5. Happening Soon: rows and rules, never boxes. */ /* ------------------------------------------------------------------ */ .lgs-spine.lgs-c2 .lgs-town__whatson-scope { font-size: 13px; color: var(--c2-muted); margin: calc(-1 * var(--s1)) 0 var(--s2); } /* Level 3: time navigation. More present than v1.3 (size + ink, not decoration) - easy to spot mid-scroll, more space above than below. */ .lgs-spine.lgs-c2 .lgs-town__whatson-day { display: flex; align-items: baseline; gap: var(--s3); font-family: var(--c2-sans); font-size: 16px; font-weight: 650; letter-spacing: .01em; text-transform: none; color: var(--c2-ink); margin: var(--s4) 0 0; padding-bottom: var(--s0); } .lgs-spine.lgs-c2 .lgs-town__whatson-day::after { content: ""; flex: 1; height: 1px; background: var(--c2-rule); transform: translateY(-4px); } .lgs-spine.lgs-c2 .lgs-town__whatson-list { list-style: none; margin: 0; padding: 0; } .lgs-spine.lgs-c2 .lgs-town__whatson-list li { display: grid; grid-template-columns: 72px 1fr; column-gap: var(--s3); row-gap: 1px; align-items: baseline; padding: var(--s2) 0; background: none !important; border: 0; border-bottom: 1px solid var(--c2-hair); border-radius: 0; box-shadow: none; } .lgs-spine.lgs-c2 .lgs-town__whatson-list li:last-child { border-bottom: 0; } .lgs-spine.lgs-c2 .lgs-town__whatson-when { grid-column: 1; grid-row: 1; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--c2-ink); line-height: 1.35; /* ranges ("9:00am to 3:00pm") wrap inside the column - nowrap here overflowed into the title column on market rows */ white-space: normal; } .lgs-spine.lgs-c2 .lgs-town__whatson-list li > a { grid-column: 2; grid-row: 1; font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--c2-ink); text-decoration: none; } .lgs-spine.lgs-c2 .lgs-town__whatson-list li > a:hover { color: var(--c2-green); text-decoration: underline; text-underline-offset: 3px; } .lgs-spine.lgs-c2 .lgs-town__whatson-meta { grid-column: 2; display: block; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--c2-muted); text-align: left; } .lgs-spine.lgs-c2 .lgs-town__whatson-meta > span { display: inline; } .lgs-spine.lgs-c2 .lgs-town__whatson-owner::after, .lgs-spine.lgs-c2 .lgs-town__whatson-venue:not(:last-child)::after { content: "\00A0\00B7\00A0"; color: var(--c2-rule); } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__dist { color: var(--c2-faint); } /* Family/status labels: quiet lowercase text; only Waiting list keeps an outline, and it must never read as a button. */ :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__chip { display: inline; width: auto; background: none; border: 0; border-radius: 0; padding: 0; margin-left: var(--s1); font-size: 12px; font-weight: 400; letter-spacing: .01em; text-transform: none; color: var(--c2-faint); } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__chip--wait { /* UX-7.2: emphasis without the retired accent orange - strong ink */ color: var(--c2-ink); border: 1px solid currentColor; border-radius: 2px; padding: 0 5px; font-size: 12px; font-weight: 600; } .lgs-spine.lgs-c2 .lgs-town__whatson-fresh { font-family: var(--c2-serif); font-style: italic; font-size: 13px; color: var(--c2-muted); margin: var(--s3) 0 0; } .lgs-spine.lgs-c2 .lgs-town__whatson details { border-top: 1px solid var(--c2-rule); margin-top: var(--s3); } .lgs-spine.lgs-c2 .lgs-town__whatson-more { margin: 0; } /* Shared disclosure treatment: deliberate, editorial, native semantics. */ .lgs-spine.lgs-c2 summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; font-size: 16px; font-weight: 600; color: var(--c2-green); /* owner 2026-08-18: these folds are the PRIMARY doors (Explore all / Browse by / See more) - body-size, not footnote-size; the 16px base lift had left them two steps behind. */ } .lgs-spine.lgs-c2 summary::-webkit-details-marker { display: none; } .lgs-spine.lgs-c2 summary::before { content: ""; width: 0; height: 0; flex: none; border-left: 6px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .12s ease; } .lgs-spine.lgs-c2 details[open] > summary::before { transform: rotate(90deg); } .lgs-spine.lgs-c2 summary:hover { color: var(--c2-green-deep); } @media (prefers-reduced-motion: reduce) { .lgs-spine.lgs-c2 summary::before { transition: none; } } /* ------------------------------------------------------------------ */ /* 6. Buy Local: image-led editorial tiles - the image is an image. */ /* ------------------------------------------------------------------ */ /* Level 3: editorial browse headings, one small step below the section H2 - serif title case, not taxonomy admin caps. */ .lgs-spine.lgs-c2 .lgs-town__group { display: flex; align-items: baseline; gap: var(--s3); font-family: var(--c2-serif); font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c2-ink); margin: var(--s5) 0 var(--s2); } .lgs-spine.lgs-c2 .lgs-town__group::after { content: ""; flex: 1; height: 1px; background: var(--c2-hair); transform: translateY(-4px); } .lgs-spine.lgs-c2 .lgs-spine__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4) var(--s3); background: none; border: 0; margin: 0 0 var(--s2); } .lgs-spine.lgs-c2 .lgs-spine__card { background: none !important; background-image: none !important; border: 0; border-radius: 0; box-shadow: none; padding: 0; min-height: 0; } .lgs-spine.lgs-c2 .lgs-spine__card-media { aspect-ratio: 3 / 2; background-size: cover; background-position: center; background-color: var(--c2-wash); margin-bottom: var(--s2); border-radius: 0; } .lgs-spine.lgs-c2 .lgs-spine__card h4 { margin: 0 0 2px; font-size: 15px; font-weight: 600; line-height: 1.3; } .lgs-spine.lgs-c2 .lgs-spine__card h4 a { color: var(--c2-ink); text-decoration: none; } .lgs-spine.lgs-c2 .lgs-spine__card h4 a:hover { color: var(--c2-green); text-decoration: underline; text-underline-offset: 3px; } .lgs-spine.lgs-c2 .lgs-spine__town { margin: 0 0 2px; font-size: 12px; font-weight: 400; letter-spacing: .01em; text-transform: none; color: var(--c2-muted); } .lgs-spine.lgs-c2 .lgs-town__desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--c2-muted); } .lgs-spine.lgs-c2 .lgs-town__who-more, .lgs-spine.lgs-c2 .lgs-town__categories { border-top: 1px solid var(--c2-hair); } .lgs-spine.lgs-c2 .lgs-town__who-more > .lgs-spine__grid { padding-top: var(--s2); } .lgs-spine.lgs-c2 .lgs-town__who-intro { font-size: 14.5px; color: var(--c2-muted); } .lgs-spine.lgs-c2 .lgs-spine__links { font-size: 13.5px; color: var(--c2-muted); line-height: 1.9; } .lgs-spine.lgs-c2 .lgs-spine__seeall { font-weight: 600; } /* ------------------------------------------------------------------ */ /* 7. Groups & clubs: stable organisation rows. */ /* ------------------------------------------------------------------ */ :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__list { list-style: none; margin: 0; padding: 0; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__list > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); padding: var(--s2) 0; margin: 0; background: none !important; border: 0; border-bottom: 1px solid var(--c2-hair); border-radius: 0; box-shadow: none; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__list > li:last-child { border-bottom: 0; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__list a { font-size: 15px; font-weight: 600; color: var(--c2-ink); text-decoration: none; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__list a:hover { color: var(--c2-green); text-decoration: underline; text-underline-offset: 3px; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__rule, :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__when, :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__venue, :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__sub { font-size: 12.5px; color: var(--c2-muted); } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__note { font-family: var(--c2-serif); font-style: italic; font-size: 13px; color: var(--c2-muted); } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__cats { font-size: 13px; color: var(--c2-muted); margin: var(--s1) 0 0; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__cats-more { border-top: 1px solid var(--c2-hair); margin-top: var(--s2); } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__more { font-size: 13.5px; font-weight: 600; } /* ------------------------------------------------------------------ */ /* 8. The market: the one deliberately filled module. Text + image. */ /* ------------------------------------------------------------------ */ .lgs-spine.lgs-c2 .lgs-town__market { display: grid; grid-template-columns: 1fr 38%; background: var(--c2-kraft); border: 1px solid rgba(42,38,34,.14); border-radius: 2px; overflow: hidden; padding: 0; margin-top: var(--s5); align-items: stretch; } .lgs-spine.lgs-c2 .lgs-town__market-body { padding: var(--s4) var(--s4) var(--s3); } .lgs-spine.lgs-c2 .lgs-town__market-media { background-size: cover; background-position: center; min-height: 220px; } .lgs-spine.lgs-c2 .lgs-town__market h2 { margin-bottom: var(--s1); } /* size: base h2 rank (owner 2026-08-18: one H2 rank per page) */ .lgs-spine.lgs-c2 .lgs-town__sched { font-size: 14px; font-weight: 600; color: var(--c2-ink); margin: 0 0 var(--s1); } .lgs-spine.lgs-c2 .lgs-town__market-note { font-size: 14px; color: var(--c2-body); margin: 0 0 var(--s2); } .lgs-spine.lgs-c2 .lgs-town__mbig { font-family: var(--c2-serif); font-size: 18px; line-height: 1.3; } .lgs-spine.lgs-c2 .lgs-town__market-follow { margin: var(--s2) 0 var(--s1); } .lgs-spine.lgs-c2 .lgs-town__market a { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; } .lgs-spine.lgs-c2 .lgs-town__market a:hover { color: var(--c2-green-deep); } .lgs-spine.lgs-c2 .lgs-town__source { font-family: var(--c2-serif); font-style: italic; font-size: 12.5px; color: var(--c2-muted); margin: var(--s2) 0 0; } /* ------------------------------------------------------------------ */ /* 9. Hearabouts: an editorial product, not a capture widget. */ /* ------------------------------------------------------------------ */ :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha { background: none; border: 0; border-top: 3px double var(--c2-rule-strong); border-bottom: 1px solid var(--c2-rule); border-radius: 0; box-shadow: none; padding: var(--s4) 0 var(--s5); margin: var(--s5) 0; } :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__kicker { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c2-green); margin: 0 0 2px; } :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__kicker::after { content: none; } :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__title.lgs-ha__masthead { font-family: var(--c2-serif); font-weight: 600; font-size: clamp(32px, 4.2vw, 44px); letter-spacing: -.01em; line-height: 1.02; color: var(--c2-ink); margin: 0 0 var(--s1); } :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__place { font-size: 14px; font-weight: 600; color: var(--c2-ink); margin: 0 0 var(--s2); } :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha p { max-width: var(--c2-measure); font-size: 14.5px; } :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__good { font-family: var(--c2-serif); font-style: italic; color: var(--c2-muted); font-size: 13.5px; } :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__form input[type="email"], :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__form input[type="text"] { background: #fff; border: 1px solid var(--c2-rule); border-radius: 2px; padding: 10px 12px; font-size: 15px; color: var(--c2-ink); min-height: 44px; } :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__form button { background: var(--c2-green); color: #fff; border: 0; border-radius: 2px; font-size: 14px; font-weight: 600; padding: 10px 18px; min-height: 44px; cursor: pointer; } :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__form button:hover { background: var(--c2-green-deep); } /* ------------------------------------------------------------------ */ /* 10. Lower page: quieter rhythm - supporting notes, not sections. */ /* ------------------------------------------------------------------ */ .lgs-spine.lgs-c2 .lgs-town__money, .lgs-spine.lgs-c2 .lgs-town__doorsblock, .lgs-spine.lgs-c2 .lgs-town__trade, .lgs-spine.lgs-c2 .lgs-town__nearby, .lgs-spine.lgs-c2 .lgs-spine__faq { font-size: 14px; } /* owner 2026-08-18: the 19-22px "quiet tail" H2 rank read as neglect, and the money band now sits mid-page - all town H2s carry the base rank; the tail sections stay quiet via their 14px body copy. */ .lgs-spine.lgs-c2 .lgs-town__statrow { display: flex; flex-wrap: wrap; gap: var(--s4); border-top: 1px solid var(--c2-hair); border-bottom: 1px solid var(--c2-hair); padding: var(--s3) 0; margin: var(--s3) 0; } .lgs-spine.lgs-c2 .lgs-town__statcell { flex: 1 1 150px; background: none; border: 0; padding: 0; box-shadow: none; } .lgs-spine.lgs-c2 .lgs-town__statn { font-family: var(--c2-serif); font-weight: 600; display: block; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.1; color: var(--c2-green-deep); } .lgs-spine.lgs-c2 .lgs-town__statc { font-size: 12px; color: var(--c2-muted); } .lgs-spine.lgs-c2 .lgs-town__figure-block, .lgs-spine.lgs-c2 .lgs-town__facts { margin: var(--s3) 0; } .lgs-spine.lgs-c2 .lgs-town__fact { background: none; border: 0; border-left: 2px solid var(--c2-hair); border-radius: 0; box-shadow: none; padding: 2px 0 2px var(--s3); margin: var(--s2) 0; font-size: 13.5px; } .lgs-spine.lgs-c2 .lgs-town__fact--promise { border-left-color: var(--c2-green); } .lgs-spine.lgs-c2 .lgs-town__figure, .lgs-spine.lgs-c2 .lgs-town__multiplier { font-size: 13.5px; } .lgs-spine.lgs-c2 .lgs-town__vision { background: none !important; border: 0; padding: 0; } .lgs-spine.lgs-c2 .lgs-town__moneyclose, .lgs-spine.lgs-c2 .lgs-town__vision p { font-family: var(--c2-serif); font-style: italic; font-size: 14.5px; color: var(--c2-body); } .lgs-spine.lgs-c2 .lgs-town__gap { font-size: 13.5px; color: var(--c2-muted); } .lgs-spine.lgs-c2 .lgs-town__doors { display: block; } /* Legacy doors-block neutraliser: this rule belongs to the OLD .lgs-town__door cards (2.9.2's blanket rename captured it by mistake and its background:none !important killed the intent-pill fill). */ .lgs-spine.lgs-c2 .lgs-town__door { background: none !important; border: 0; border-top: 1px solid var(--c2-hair); border-radius: 0; box-shadow: none; padding: var(--s3) 0; margin: 0; font-size: 13.5px; } .lgs-spine.lgs-c2 .lgs-town__door:first-child { border-top: 0; } .lgs-spine.lgs-c2 .lgs-town__cta { /* UX-7.2: accent orange retired - remaining pill uses are C2 green */ /* Owner review 2026-08-18: the pre-C2 inline style's min-height:44px leaked through (C2 never set it), so the label sat at the TOP of a 44px box. Flex-centre inside the same 44px tap target, and 13px broke the actions-never-below-14px rule - now 14.5px. Fixes all three CTA uses (trade band, weekend foot, demand line). */ display: inline-flex; align-items: center; justify-content: center; min-height: 44px; line-height: 1; background: var(--c2-green-deep); color: #fff !important; font-size: 14.5px; font-weight: 600; padding: 0 18px; border-radius: 2px; text-decoration: none; border: 0; } .lgs-spine.lgs-c2 .lgs-town__cta:hover { background: var(--c2-green); } .lgs-spine.lgs-c2 .lgs-faq__item { border-top: 1px solid var(--c2-hair); padding: 2px 0; } .lgs-spine.lgs-c2 .lgs-spine__faq summary { color: var(--c2-ink); font-weight: 600; font-size: 14px; } .lgs-spine.lgs-c2 .lgs-spine__cols { columns: 2; column-gap: var(--s5); font-size: 13.5px; } .lgs-spine.lgs-c2 .lgs-spine__demand, .lgs-spine.lgs-c2 .lgs-spine__notify { background: none; border: 1px solid var(--c2-rule); border-radius: 2px; padding: var(--s3); } .lgs-spine.lgs-c2 .lgs-spine__know, .lgs-spine.lgs-c2 .lgs-spine__promise { font-size: 13px; color: var(--c2-muted); } .lgs-spine.lgs-c2 .lgs-town__nearby, .lgs-spine.lgs-c2 .lgs-town__nearby-note { font-size: 13.5px; color: var(--c2-muted); } .lgs-spine.lgs-c2 .lgs-spine__author { font-size: 12.5px; color: var(--c2-faint); } .lgs-spine.lgs-c2 .lgs-spine__claim { font-size: 14px; color: var(--c2-faint); } /* an ACTION (claim/add links) - never below 14px */ /* ------------------------------------------------------------------ */ /* 11. Responsive */ /* ------------------------------------------------------------------ */ @media (min-width: 768px) { .lgs-spine.lgs-c2 { padding-left: 32px; padding-right: 32px; } } @media (max-width: 900px) { .lgs-spine.lgs-c2 .lgs-spine__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .lgs-spine.lgs-c2 { --c2-gutter: 20px; font-size: 15px; } .lgs-spine.lgs-c2 > section { padding: var(--s5) 0 var(--s3); } .lgs-spine.lgs-c2 .lgs-spine__crumbs { margin-top: var(--s3); } .lgs-spine.lgs-c2 .lgs-town__hero h1 { font-size: clamp(40px, 12vw, 50px); margin: var(--s1) 0 var(--s2); } .lgs-spine.lgs-c2 .lgs-town__hero .lgs-spine__summary { font-size: 16.5px; } .lgs-spine.lgs-c2 .lgs-town__hero::after { margin-top: var(--s3); } .lgs-spine.lgs-c2 .lgs-town__whatson-day { font-size: 15px; } .lgs-spine.lgs-c2 .lgs-town__group { font-size: 17px; } .lgs-spine.lgs-c2 .lgs-town__whatson-list li { grid-template-columns: 60px 1fr; column-gap: var(--s2); padding: var(--s2) 0 10px; } .lgs-spine.lgs-c2 .lgs-town__whatson-list li > a { font-size: 15px; } .lgs-spine.lgs-c2 .lgs-spine__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s3) var(--s2); } .lgs-spine.lgs-c2 .lgs-spine__card h4 { font-size: 14px; } .lgs-spine.lgs-c2 .lgs-town__desc { display: none; } .lgs-spine.lgs-c2 .lgs-town__market { grid-template-columns: 1fr; } .lgs-spine.lgs-c2 .lgs-town__market-media { min-height: 150px; order: -1; } .lgs-spine.lgs-c2 .lgs-town__market-body { padding: var(--s3) var(--s3) var(--s2); } :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha { padding: var(--s3) 0 var(--s4); } :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__form input[type="email"], :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__form input[type="text"], :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__form button { width: 100%; } .lgs-spine.lgs-c2 .lgs-spine__cols { columns: 1; } body.lgs-c2-page [data-elementor-type="header"] img { max-height: 30px; } } @media (max-width: 380px) { .lgs-spine.lgs-c2 .lgs-spine__grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ */ /* 12. UX-5 global shell: header, place control, nav, footer. */ /* The old HFE/Elementor + theme shells are retired at the hook level; */ /* this hides whichever one still slips through (display:none also */ /* removes their nav landmarks from AT - no duplicate landmarks). */ /* CASCADE RULE (same lesson as v1.3.1): Elementor kit styles address */ /* bare elements at class+element specificity (.elementor-kit-N a), */ /* so every shell rule is scoped through the compound root */ /* .lgs-shell.lgs-shell__header / __footer (two classes minimum). */ /* ------------------------------------------------------------------ */ body.lgs-shell-on { background: var(--c2-paper); } body.lgs-shell-on [data-elementor-type="header"], body.lgs-shell-on [data-elementor-type="footer"], body.lgs-shell-on .site-header, body.lgs-shell-on .site-footer { display: none !important; } .lgs-shell.lgs-shell__header, .lgs-shell.lgs-shell__footer { font-family: var(--c2-sans); color: var(--c2-body); } .lgs-shell.lgs-shell__header a, .lgs-shell.lgs-shell__footer a { text-decoration: none; font-family: var(--c2-sans); } .lgs-shell.lgs-shell__header button { background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--c2-ink); font-family: var(--c2-sans); text-transform: none; letter-spacing: normal; padding: 0; cursor: pointer; } .lgs-shell.lgs-shell__header :focus-visible, .lgs-shell.lgs-shell__footer :focus-visible { outline: 2px solid var(--c2-green); outline-offset: 2px; } /* Header band */ .lgs-shell.lgs-shell__header { background: var(--c2-paper); border-bottom: 1px solid var(--c2-rule); } .lgs-shell.lgs-shell__header .lgs-shell__band { max-width: var(--c2-max); margin: 0 auto; padding: 0 var(--c2-gutter); min-height: 64px; display: flex; align-items: center; gap: var(--s4); } .lgs-shell.lgs-shell__header .lgs-shell__brand { flex: none; } .lgs-shell.lgs-shell__header .lgs-shell__brand-word { font-family: var(--c2-serif); font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--c2-ink); white-space: nowrap; } .lgs-shell.lgs-shell__header .lgs-shell__brand-word::first-letter { color: var(--c2-green-deep); } /* Place control */ .lgs-shell.lgs-shell__header .lgs-shell__place { position: relative; flex: none; } .lgs-shell.lgs-shell__header .lgs-shell__place-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-bottom: 1px solid var(--c2-rule); border-radius: 0; padding: 4px 2px; min-height: 36px; cursor: pointer; white-space: nowrap; font-family: var(--c2-sans); font-size: 14.5px; font-weight: 600; color: var(--c2-ink); } .lgs-shell.lgs-shell__header .lgs-shell__place-btn:hover { color: var(--c2-green-deep); border-bottom-color: currentColor; background: none; } .lgs-shell.lgs-shell__header .lgs-shell__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; } .lgs-shell.lgs-shell__header .lgs-shell__places { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(320px, calc(100vw - 2 * var(--c2-gutter))); background: var(--c2-card); border: 1px solid var(--c2-rule); border-radius: 2px; box-shadow: 0 10px 26px rgba(42, 38, 34, .14); padding: var(--s3); } .lgs-shell.lgs-shell__header .lgs-shell__places-title { margin: 0 0 var(--s1); font-size: 13px; font-weight: 650; color: var(--c2-ink); } .lgs-shell.lgs-shell__header .lgs-shell__places-filter { margin: 0 0 var(--s2); } .lgs-shell.lgs-shell__header .lgs-shell__places-filter input { width: 100%; min-height: 40px; padding: 6px 10px; font-size: 15px; background: #fff; border: 1px solid var(--c2-rule); border-radius: 2px; color: var(--c2-ink); } .lgs-shell.lgs-shell__header .lgs-shell__places-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; } .lgs-shell.lgs-shell__header .lgs-shell__places-list a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); padding: 9px 4px; border-bottom: 1px solid var(--c2-hair); font-size: 14.5px; font-weight: 600; color: var(--c2-ink); } .lgs-shell.lgs-shell__header .lgs-shell__places-list li:last-child a { border-bottom: 0; } .lgs-shell.lgs-shell__header .lgs-shell__places-list a:hover { color: var(--c2-green-deep); } .lgs-shell.lgs-shell__header .lgs-shell__places-county { font-size: 12px; font-weight: 400; color: var(--c2-faint); } .lgs-shell.lgs-shell__header .lgs-shell__places-all { margin: var(--s2) 0 0; font-size: 13px; } .lgs-shell.lgs-shell__header .lgs-shell__places-all a { color: var(--c2-green); font-weight: 600; } /* Menu button (mobile only) */ .lgs-shell.lgs-shell__header .lgs-shell__menu-btn { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; min-width: 44px; min-height: 44px; padding: 4px 6px; align-items: center; gap: 8px; font-family: var(--c2-sans); font-size: 13px; font-weight: 600; color: var(--c2-ink); } .lgs-shell.lgs-shell__header .lgs-shell__menu-icon, .lgs-shell.lgs-shell__header .lgs-shell__menu-icon::before, .lgs-shell.lgs-shell__header .lgs-shell__menu-icon::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; } .lgs-shell.lgs-shell__header .lgs-shell__menu-icon::before, .lgs-shell.lgs-shell__header .lgs-shell__menu-icon::after { content: ""; position: absolute; left: 0; } .lgs-shell.lgs-shell__header .lgs-shell__menu-icon::before { top: -6px; } .lgs-shell.lgs-shell__header .lgs-shell__menu-icon::after { top: 6px; } /* Navigation (desktop: inline band; mobile: panel) */ .lgs-shell.lgs-shell__header .lgs-shell__nav { display: flex; align-items: center; gap: var(--s4); margin-left: auto; } .lgs-shell.lgs-shell__header .lgs-shell__primary, .lgs-shell.lgs-shell__header .lgs-shell__utility { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; } .lgs-shell.lgs-shell__header .lgs-shell__primary { gap: var(--s4); } .lgs-shell.lgs-shell__header .lgs-shell__utility { gap: var(--s3); } .lgs-shell.lgs-shell__header .lgs-shell__primary a { font-size: 15px; font-weight: 500; color: var(--c2-ink); white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; text-decoration: none; } .lgs-shell.lgs-shell__header .lgs-shell__primary a:hover { color: var(--c2-green-deep); } .lgs-shell.lgs-shell__header .lgs-shell__primary a[aria-current="page"] { border-bottom-color: var(--c2-green); font-weight: 600; } .lgs-shell.lgs-shell__header .lgs-shell__utility a { font-size: 13.5px; font-weight: 500; color: var(--c2-muted); padding: 6px 0; white-space: nowrap; text-decoration: none; } .lgs-shell.lgs-shell__header .lgs-shell__utility a:hover { color: var(--c2-green-deep); } .lgs-shell.lgs-shell__header .lgs-shell__utility a.lgs-shell__add { color: var(--c2-green-deep); font-weight: 600; border: 1px solid currentColor; border-radius: 2px; padding: 6px 10px; } .lgs-shell.lgs-shell__header .lgs-shell__utility a.lgs-shell__add:hover { background: var(--c2-green-deep); color: #fff; } /* Footer */ .lgs-shell.lgs-shell__footer { background: var(--c2-paper); border-top: 1px solid var(--c2-rule); margin-top: var(--s6); } .lgs-shell.lgs-shell__footer .lgs-shell__foot-band { max-width: var(--c2-max); margin: 0 auto; padding: var(--s5) var(--c2-gutter) var(--s3); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4) var(--s5); } .lgs-shell.lgs-shell__footer .lgs-shell__foot-h { font-family: var(--c2-sans); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-green-deep); margin: 0 0 var(--s2); } .lgs-shell.lgs-shell__footer .lgs-shell__foot-group ul { list-style: none; margin: 0; padding: 0; } .lgs-shell.lgs-shell__footer .lgs-shell__foot-group li { margin: 0 0 7px; } .lgs-shell.lgs-shell__footer .lgs-shell__foot-group a { font-size: 13.5px; color: var(--c2-muted); text-decoration: none; } .lgs-shell.lgs-shell__footer .lgs-shell__foot-group a:hover { color: var(--c2-green-deep); text-decoration: underline; text-underline-offset: 2px; } .lgs-shell.lgs-shell__footer .lgs-shell__foot-line { max-width: var(--c2-max); margin: 0 auto; padding: var(--s3) var(--c2-gutter) var(--s5); border-top: 1px solid var(--c2-hair); font-family: var(--c2-serif); font-style: italic; font-size: 13px; color: var(--c2-faint); } /* The legal identity band (lgs-identity.php, mandatory contentinfo) sits between page and shell footer: its CONTENT is untouched, only its presentation joins C2 - paper ground, muted ink, hairline top. */ body.lgs-shell-on .lgs-identity { background: var(--c2-paper) !important; border-top: 1px solid var(--c2-hair); font-size: 12.5px; padding: var(--s3) var(--c2-gutter) 0; } /* the band's own styles paint its text pale-on-olive; every descendant must come back to legible muted ink on the paper ground */ body.lgs-shell-on .lgs-identity, body.lgs-shell-on .lgs-identity p, body.lgs-shell-on .lgs-identity span, body.lgs-shell-on .lgs-identity a { color: var(--c2-muted) !important; } body.lgs-shell-on .lgs-identity strong { color: var(--c2-body) !important; } /* Shell responsive */ @media (max-width: 1200px) { .lgs-shell.lgs-shell__header .lgs-shell__band { gap: var(--s3); } .lgs-shell.lgs-shell__header .lgs-shell__nav { gap: var(--s3); } .lgs-shell.lgs-shell__header .lgs-shell__primary { gap: var(--s3); } .lgs-shell.lgs-shell__header .lgs-shell__primary a { font-size: 14.5px; } } /* 2.13.2 (owner 2026-09-25, cart symbol): the menu-button header now starts below 1100px, not 981px - between 981 and 1079px the full nav was already wider than the band (Sign in clipped), and the cart symbol needs its place beside Sign in. */ @media (max-width: 1099px) { .lgs-shell.lgs-shell__header .lgs-shell__band { min-height: 64px; gap: var(--s3); flex-wrap: wrap; } .lgs-shell.lgs-shell__header .lgs-shell__menu-btn { display: inline-flex; } .lgs-shell.lgs-shell__header .lgs-shell__nav { display: none; flex-basis: 100%; margin: 0; } .lgs-shell.lgs-shell__header .lgs-shell__nav.is-open { display: block; border-top: 1px solid var(--c2-hair); padding: var(--s2) 0 var(--s3); } .lgs-shell.lgs-shell__header .lgs-shell__primary, .lgs-shell.lgs-shell__header .lgs-shell__utility { display: block; } .lgs-shell.lgs-shell__header .lgs-shell__primary a, .lgs-shell.lgs-shell__header .lgs-shell__utility a { display: block; padding: 11px 2px; font-size: 16px; border-bottom: 0; } .lgs-shell.lgs-shell__header .lgs-shell__utility { border-top: 1px solid var(--c2-hair); margin-top: var(--s2); padding-top: var(--s2); } .lgs-shell.lgs-shell__header .lgs-shell__utility a { font-size: 14.5px; } .lgs-shell.lgs-shell__header .lgs-shell__utility a.lgs-shell__add { display: inline-block; margin: 6px 0; } /* the place button sits near the left edge on mobile - an anchored popover clips off-canvas; a full-width sheet under the band fits */ .lgs-shell.lgs-shell__header .lgs-shell__places { position: fixed; left: 16px; right: 16px; top: 72px; width: auto; max-height: min(70vh, 480px); overflow: auto; } } @media (max-width: 640px) { .lgs-shell.lgs-shell__header .lgs-shell__band { padding: 0 20px; } .lgs-shell.lgs-shell__header .lgs-shell__brand-word { font-size: 18px; } .lgs-shell.lgs-shell__footer .lgs-shell__foot-band { grid-template-columns: 1fr; padding-top: var(--s4); } } /* ------------------------------------------------------------------ */ /* 13. UX-6 profile family: shared identity, capability modules. */ /* Scope: body.lgs-c2-profile (business / market / group singles). */ /* The functional blocks underneath belong to their own modules and */ /* keep their class contracts - this section only SKINS them. */ /* ------------------------------------------------------------------ */ body.lgs-c2-profile { background: var(--c2-paper); } body.lgs-c2-profile .site-main, body.lgs-c2-profile .page-content, body.lgs-c2-profile .entry-content { max-width: var(--c2-max); margin: 0 auto; font-family: var(--c2-sans); font-size: 15.5px; line-height: 1.6; color: var(--c2-body); } body.lgs-c2-profile .entry-content { padding: 0 var(--c2-gutter) var(--s6); } /* the theme's .site-main insets only 10px at mobile, 0 at desktop - the C2 gutter is the one horizontal inset for the whole column */ body.lgs-c2-profile .site-main { padding-left: var(--c2-gutter); padding-right: var(--c2-gutter); } body.lgs-c2-profile h1.entry-title, body.lgs-c2-profile .entry-header h1 { max-width: var(--c2-max); margin: var(--s4) auto var(--s0); padding: 0; font-family: var(--c2-serif); font-weight: 600; letter-spacing: -.01em; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; color: var(--c2-ink); background: none; border: 0; } body.lgs-c2-profile .entry-content h2 { font-family: var(--c2-serif); font-weight: 600; letter-spacing: -.01em; font-size: clamp(20px, 2.2vw, 25px); color: var(--c2-ink); margin: var(--s5) 0 var(--s2); } body.lgs-c2-profile .entry-content p { max-width: var(--c2-measure); } body.lgs-c2-profile .entry-content a { color: var(--c2-green); } body.lgs-c2-profile .entry-content a:hover { color: var(--c2-green-deep); } /* Identity hero (module-rendered at the top of the content stack) */ body.lgs-c2-profile .lgs-prof { margin: 0 0 var(--s4); } body.lgs-c2-profile .lgs-prof__kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-green-deep); margin: 0 0 var(--s0); } body.lgs-c2-profile .lgs-prof__place { font-size: 14.5px; color: var(--c2-muted); margin: 0 0 var(--s3); } body.lgs-c2-profile .lgs-prof__townlink { font-weight: 600; text-decoration: none; } body.lgs-c2-profile .lgs-prof__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s2); max-width: none; } body.lgs-c2-profile .lgs-prof__primary { display: inline-block; background: var(--c2-green-deep); color: #fff !important; font-size: 14.5px; font-weight: 600; padding: 10px 16px; min-height: 44px; border-radius: 2px; text-decoration: none; line-height: 1.6; } body.lgs-c2-profile .lgs-prof__primary:hover { background: var(--c2-green); } body.lgs-c2-profile .lgs-prof__follow { display: inline-block; color: var(--c2-green-deep); font-size: 14.5px; font-weight: 600; border: 1px solid currentColor; border-radius: 2px; padding: 9px 14px; min-height: 44px; text-decoration: none; line-height: 1.6; } body.lgs-c2-profile .lgs-prof__follow:hover { background: var(--c2-green-deep); color: #fff; } /* 2.14.3: claim cue in the hero for unclaimed listings (claim journey). */ body.lgs-c2-profile .lgs-prof__claim { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px dashed #2e5530; border-radius: 2px; background: #f7f5ef; color: #2e5530 !important; font-size: 15px; font-weight: 700; text-decoration: none; line-height: 1.3; } body.lgs-c2-profile .lgs-prof__claim:hover { background: #2e5530; color: #fff !important; border-style: solid; } body.lgs-c2-profile .lgs-prof__claim-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b6b66; } body.lgs-c2-profile .lgs-prof__claim:hover .lgs-prof__claim-tag { color: #e8efe6; } .lgs-hf1-social { margin: 6px 0 0; font-size: 13px; } .lgs-hf1-social a { color: inherit; text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 6px 0; } body.lgs-c2-profile .lgs-prof__link { font-size: 14px; font-weight: 600; } body.lgs-c2-profile .lgs-prof::after { content: ""; display: block; height: 2px; background: var(--c2-rule-strong); margin-top: var(--s3); } /* Detail block (prospects display) - definition rows, not a card */ body.lgs-c2-profile .lgs-listing-details { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; } /* Products (Shop capability) - image-led grid, same idiom as Buy Local */ body.lgs-c2-profile .lgs-prof__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4) var(--s3); } body.lgs-c2-profile .lgs-prof__product { text-decoration: none; color: var(--c2-ink); } body.lgs-c2-profile .lgs-prof__product-media { display: block; aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-color: var(--c2-wash); margin-bottom: var(--s1); border-radius: 0; } body.lgs-c2-profile .lgs-prof__product-name { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; } body.lgs-c2-profile .lgs-prof__product-price { display: block; font-size: 13.5px; color: var(--c2-muted); } body.lgs-c2-profile .lgs-prof__allproducts { margin-top: var(--s3); font-weight: 600; } /* Capability sections (capture: maker / events / asks) - unboxed */ body.lgs-c2-profile .lgs-cap { border: 0; background: none; padding: 0; } body.lgs-c2-profile .lgs-cap section { border-top: 1px solid var(--c2-rule); padding: var(--s4) 0 var(--s2); } /* Claim banner: the UX-7.1 quiet strip + disclosure (section 15) is the ONE claim treatment; the old profile kraft-card block is retired here so its important flags cannot beat the flat strip. */ /* Owner zone: everything from the owner heading down reads as one quiet utility area, clearly separate from resident content */ body.lgs-c2-profile .lgs-prof__owner { border-top: 3px double var(--c2-rule-strong); margin-top: var(--s5); padding-top: var(--s3); } body.lgs-c2-profile .lgs-prof__owner h2 { font-family: var(--c2-sans); font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-green-deep); margin: 0; } /* Reviews / commissions / misc module quieting */ body.lgs-c2-profile .lgs-cm { background: none; border: 0; border-top: 1px solid var(--c2-rule); border-radius: 0; padding: var(--s4) 0 0; } body.lgs-c2-profile .lgs-cm__kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-green-deep); } /* Market profile - keep its designed template, align its palette */ body.lgs-c2-profile .lgs-mkt__crumbs { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c2-faint); } @media (max-width: 640px) { body.lgs-c2-profile { --c2-gutter: 20px; } body.lgs-c2-profile h1.entry-title, body.lgs-c2-profile .entry-header h1 { font-size: clamp(26px, 8vw, 32px); } body.lgs-c2-profile .lgs-prof__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s3) var(--s2); } body.lgs-c2-profile .lgs-prof__actions { gap: var(--s2); } body.lgs-c2-profile .lgs-prof__primary, body.lgs-c2-profile .lgs-prof__follow { flex: 1 1 auto; text-align: center; } body.lgs-c2-profile .lgs-prof__claim { flex: 1 1 100%; justify-content: center; } } /* UX-6 r2: the details block used to carry its own identity (kicker + title) - the C2 hero + theme h1 are the ONE identity now; the block's duplicates hide, its breadcrumb + description stay. */ body.lgs-c2-profile .lgs-listing-details__kicker, body.lgs-c2-profile .lgs-listing-details__title { display: none; } /* UX-6 r3 corrections (round-1 screenshots) */ /* the theme entry-title is the ONE h1 - force visible even where the pre-C2 template css suppressed it */ body.lgs-c2-profile h1.entry-title { display: block; } /* kit-cascade: explicit colours on identity links (never inherit pink) */ body.lgs-c2-profile .lgs-prof__townlink { color: var(--c2-green); } body.lgs-c2-profile .lgs-prof__townlink:hover { color: var(--c2-green-deep); } body.lgs-c2-profile .lgs-prof__link { color: var(--c2-green-deep); } /* reviews: compact evidence, not a giant tan panel (outer wrapper only - inner field/badge classes keep their own styling) */ body.lgs-c2-profile section.lgs-reviews { background: none !important; border: 0 !important; border-top: 1px solid var(--c2-rule) !important; border-radius: 0 !important; box-shadow: none !important; padding: var(--s4) 0 0 !important; } /* UX-6 r4 (round-2b screenshots): the last kit-cascade leaks - explicit colours on the remaining bare anchors inside profile modules */ body.lgs-c2-profile .lgs-prof__allproducts a { color: var(--c2-green-deep); } body.lgs-c2-profile .lgs-prof__allproducts a:hover { color: var(--c2-green); } body.lgs-c2-profile .lgs-mkt__facts a { color: var(--c2-green); } body.lgs-c2-profile .lgs-mkt__facts a:hover { color: var(--c2-green-deep); } body.lgs-c2-profile .lgs-group__back a { color: var(--c2-green); } body.lgs-c2-profile .lgs-group__back a:hover { color: var(--c2-green-deep); } /* UX-6.1 - profile correctness close-out */ /* secondary action (hybrid: both journeys visible) - outlined, beside primary */ body.lgs-c2-profile .lgs-prof__secondary { display: inline-block; color: var(--c2-green-deep); font-size: 14.5px; font-weight: 600; border: 1px solid currentColor; border-radius: 2px; padding: 9px 14px; min-height: 44px; text-decoration: none; line-height: 1.6; } body.lgs-c2-profile .lgs-prof__secondary:hover { background: var(--c2-green-deep); color: #fff; } /* "See all their products (N)" - in-profile expansion, no second identity */ body.lgs-c2-profile .lgs-prof__more { margin-top: var(--s3); } body.lgs-c2-profile .lgs-prof__more > summary { cursor: pointer; color: var(--c2-green-deep); font-weight: 600; font-size: 14.5px; list-style-position: inside; padding: var(--s1) 0; } body.lgs-c2-profile .lgs-prof__more > summary:hover { color: var(--c2-green); } body.lgs-c2-profile .lgs-prof__more[open] > summary { margin-bottom: var(--s2); } /* owner-only nudge under "You manage this page" */ body.lgs-c2-profile .lgs-prof__owner-hint { margin: var(--s1) 0 0; } body.lgs-c2-profile .lgs-prof__owner-hint a { color: var(--c2-green-deep); font-weight: 600; } @media (max-width: 640px) { body.lgs-c2-profile .lgs-prof__secondary { flex: 1 1 auto; text-align: center; } } /* ------------------------------------------------------------------ */ /* 14. UX-7 homepage - the place-first front door */ /* All rules scoped body.lgs-c2-home; the shell/footer carry their own */ /* sections. Left-aligned editorial column, rules over boxes. */ /* ------------------------------------------------------------------ */ body.lgs-c2-home .site-main { padding-left: var(--c2-gutter); padding-right: var(--c2-gutter); } body.lgs-c2-home .lgs-home { max-width: var(--c2-max); margin: 0 auto; font-family: var(--c2-sans); font-size: 15.5px; line-height: 1.6; color: var(--c2-body); } body.lgs-c2-home h1, body.lgs-c2-home .lgs-home h2 { font-family: var(--c2-serif); font-weight: 600; letter-spacing: -.01em; color: var(--c2-ink); } body.lgs-c2-home .lgs-home__kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-green-deep); margin: 0 0 var(--s1); } body.lgs-c2-home .lgs-home__measure { max-width: var(--c2-measure); } body.lgs-c2-home .lgs-home__quiet { color: var(--c2-muted); } /* 1. hero: proposition + place action inside the first mobile viewport */ body.lgs-c2-home .lgs-home__hero { padding: var(--s6) 0 var(--s5); border-bottom: 2px solid var(--c2-rule-strong); } body.lgs-c2-home .lgs-home__hero h1 { font-size: clamp(32px, 4.8vw, 58px); line-height: 1.06; margin: 0 0 var(--s3); max-width: 30ch; } body.lgs-c2-home .lgs-home__sub { font-size: clamp(16px, 1.6vw, 19px); max-width: 46ch; margin: 0 0 var(--s4); } body.lgs-c2-home .lgs-home__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0; } body.lgs-c2-home .lgs-home__go { display: inline-block; background: var(--c2-green-deep); color: #fff !important; font-size: 15.5px; font-weight: 600; padding: 12px 22px; min-height: 44px; border-radius: 2px; text-decoration: none; line-height: 1.5; } body.lgs-c2-home .lgs-home__go:hover { background: var(--c2-green); } body.lgs-c2-home .lgs-home__change { color: var(--c2-green-deep); font-weight: 600; font-size: 14.5px; } body.lgs-c2-home .lgs-home__addlink { color: var(--c2-muted); font-size: 14.5px; text-decoration: underline; } body.lgs-c2-home .lgs-home__addlink:hover { color: var(--c2-ink); } /* 2. destinations: strong ruled rows, two columns on desktop */ body.lgs-c2-home .lgs-home__find { padding: var(--s5) 0 var(--s5); } body.lgs-c2-home .lgs-home__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s6); } body.lgs-c2-home .lgs-home__row { border-top: 1px solid var(--c2-rule); padding: var(--s3) 0 var(--s4); } body.lgs-c2-home .lgs-home__row h2 { font-size: clamp(22px, 2.4vw, 27px); margin: 0 0 var(--s1); } body.lgs-c2-home .lgs-home__row p { margin: 0 0 var(--s2); max-width: 44ch; } body.lgs-c2-home .lgs-home__rowgo { color: var(--c2-green-deep); font-weight: 600; font-size: 14.5px; text-decoration: none; } body.lgs-c2-home .lgs-home__rowgo:hover { color: var(--c2-green); text-decoration: underline; } /* 2b. why it matters (MISSION PASS 2026-09-03): the compressed mission argument between discovery and participation. Plain editorial ground (the kraft band directly below keeps its contrast); doors lede rides the same serif register as the row heads. */ body.lgs-c2-home .lgs-home__lede { font-family: var(--c2-serif); font-weight: 600; color: var(--c2-ink); font-size: clamp(18px, 2vw, 22px); margin: 0 0 var(--s3); letter-spacing: -.01em; } body.lgs-c2-home .lgs-home__matters { padding: var(--s5) 0; border-top: 1px solid var(--c2-rule); } body.lgs-c2-home .lgs-home__matters h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 0 0 var(--s2); max-width: 24ch; } body.lgs-c2-home .lgs-home__matters p { margin: 0 0 var(--s2); } body.lgs-c2-home .lgs-home__matters strong { color: var(--c2-ink); } /* 3. follow local life: quiet editorial statement on kraft */ body.lgs-c2-home .lgs-home__follow { background: var(--c2-kraft); margin: 0 calc(-1 * var(--c2-gutter)); padding: var(--s5) var(--c2-gutter); } body.lgs-c2-home .lgs-home__follow h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 0 0 var(--s2); max-width: 26ch; } body.lgs-c2-home .lgs-home__follow p { margin: 0 0 var(--s2); } @media (min-width: 900px) { body.lgs-c2-home .lgs-home__follow { display: grid; grid-template-columns: 1.4fr 1fr; column-gap: var(--s6); align-items: start; } body.lgs-c2-home .lgs-home__follow .lgs-home__kicker, body.lgs-c2-home .lgs-home__follow h2 { grid-column: 1 / -1; } body.lgs-c2-home .lgs-home__follow .lgs-home__quiet { border-left: 2px solid var(--c2-rule-strong); padding-left: var(--s3); margin-top: 0; } } /* 4. hearabouts: the canonical block, given room; its own C2 masthead styles already exist - only the section spacing lives here */ body.lgs-c2-home .lgs-home__paper { padding: var(--s6) 0; border-bottom: 1px solid var(--c2-rule); } /* 5. contributor door: definition rows, never pricing cards */ body.lgs-c2-home .lgs-home__add { padding: var(--s5) 0; border-bottom: 1px solid var(--c2-rule); } body.lgs-c2-home .lgs-home__add h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 0 0 var(--s2); } body.lgs-c2-home .lgs-home__kinds { margin: var(--s4) 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); } body.lgs-c2-home .lgs-home__kinds > div { border-top: 1px solid var(--c2-hair); padding-top: var(--s2); } body.lgs-c2-home .lgs-home__kinds dt { font-weight: 600; color: var(--c2-ink); margin: 0 0 var(--s0); } body.lgs-c2-home .lgs-home__kinds dd { margin: 0; font-size: 14.5px; } /* 6. why: three ruled principles */ body.lgs-c2-home .lgs-home__why { padding: var(--s5) 0 var(--s7); } body.lgs-c2-home .lgs-home__why h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 0 0 var(--s3); } body.lgs-c2-home .lgs-home__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); } body.lgs-c2-home .lgs-home__point { border-top: 1px solid var(--c2-hair); padding-top: var(--s2); } body.lgs-c2-home .lgs-home__point h3 { font-family: var(--c2-serif); font-weight: 600; font-size: 18px; color: var(--c2-ink); margin: 0 0 var(--s1); } body.lgs-c2-home .lgs-home__point p { margin: 0; font-size: 14.5px; } @media (max-width: 700px) { body.lgs-c2-home { --c2-gutter: 20px; } body.lgs-c2-home .lgs-home__hero { padding-top: var(--s5); } body.lgs-c2-home .lgs-home__rows, body.lgs-c2-home .lgs-home__kinds, body.lgs-c2-home .lgs-home__points { grid-template-columns: 1fr; } body.lgs-c2-home .lgs-home__go { flex: 1 1 auto; text-align: center; } } /* ------------------------------------------------------------------ */ /* 15. UX-7.1 - screenshot-led coherence (owner review) */ /* One C2 action/form/link system across every shell page; legacy */ /* orange + pink retired from resident surfaces; panels traded for */ /* rules. Scopes: body.lgs-shell-on = any shell page (tokens live */ /* there); body.lgs-c2-profile = entity profiles. */ /* ------------------------------------------------------------------ */ /* actions: the legacy orange pill becomes the C2 primary everywhere */ body.lgs-shell-on .lgs-follow button, body.lgs-shell-on .lgs-claim-form button, body.lgs-shell-on .lgs-claim-banner button, body.lgs-shell-on .lgs-reviews__form button, body.lgs-shell-on .lgs-review__respond button { background: var(--c2-green-deep); color: #fff; border: 0; border-radius: 2px; padding: 10px 18px; min-height: 44px; font-weight: 600; font-size: 14.5px; cursor: pointer; } body.lgs-shell-on .lgs-follow button:hover, body.lgs-shell-on .lgs-claim-form button:hover, body.lgs-shell-on .lgs-claim-banner button:hover, body.lgs-shell-on .lgs-reviews__form button:hover, body.lgs-shell-on .lgs-review__respond button:hover { background: var(--c2-green); } /* links: no inherited kit pink inside these modules */ body.lgs-shell-on .lgs-follow a, body.lgs-shell-on .lgs-follow-page-wrap a, body.lgs-shell-on .lgs-reviews a, body.lgs-c2-profile .lgs-mkt__block a, body.lgs-c2-profile .lgs-join__list a, body.lgs-c2-profile .lgs-group__src a { color: var(--c2-green-deep); } body.lgs-shell-on .lgs-follow a:hover, body.lgs-shell-on .lgs-follow-page-wrap a:hover, body.lgs-shell-on .lgs-reviews a:hover, body.lgs-c2-profile .lgs-mkt__block a:hover, body.lgs-c2-profile .lgs-join__list a:hover, body.lgs-c2-profile .lgs-group__src a:hover { color: var(--c2-green); } /* forms: GOV-plain inputs, one look everywhere */ body.lgs-shell-on .lgs-follow input[type="email"], body.lgs-shell-on .lgs-follow input[type="text"]:not([name="lgs_fl_website"]), body.lgs-shell-on .lgs-claim-form input[type="email"], body.lgs-shell-on .lgs-reviews__form input[type="text"], body.lgs-shell-on .lgs-reviews__form input[type="email"], body.lgs-shell-on .lgs-reviews__form textarea { border: 1px solid var(--c2-rule); border-radius: 2px; background: #fff; padding: 10px 12px; font-size: 15px; color: var(--c2-ink); } /* the follow box (UX-7.2 variants): ruled and UNFILLED on entity profiles and the standalone page - placement, heading, rule and the green action carry its weight, not a beige fill. The homepage Follow INTRODUCTION (.lgs-home__follow) deliberately keeps its editorial kraft wash - one system, context-specific presentation. */ body.lgs-shell-on .lgs-follow { background: none; border-radius: 0; border-top: 2px solid var(--c2-rule-strong); border-bottom: 1px solid var(--c2-rule); padding: var(--s3) 0 var(--s4); margin: var(--s5) 0; } body.lgs-shell-on .lgs-follow h3 { font-family: var(--c2-serif); font-weight: 600; letter-spacing: -.01em; font-size: clamp(20px, 2.2vw, 24px); color: var(--c2-ink); margin: 0 0 var(--s1); } body.lgs-shell-on .lgs-follow__notice { border-radius: 0; border-left-color: var(--c2-green-deep); } /* claim: quiet strip + disclosure */ body.lgs-shell-on div.lgs-claim-banner { background: none; border: 0; border-top: 1px solid var(--c2-rule); border-radius: 0; box-shadow: none; padding: var(--s3) 0; margin: var(--s4) 0; } body.lgs-shell-on .lgs-claim-banner__disc > summary, body.lgs-shell-on .lgs-reviews__disc > summary, body.lgs-c2-profile .lgs-join__more > summary { cursor: pointer; color: var(--c2-green-deep); font-weight: 600; font-size: 14.5px; list-style-position: inside; padding: var(--s1) 0; } body.lgs-shell-on .lgs-claim-banner__disc > summary:hover, body.lgs-shell-on .lgs-reviews__disc > summary:hover, body.lgs-c2-profile .lgs-join__more > summary:hover { color: var(--c2-green); } body.lgs-shell-on .lgs-claim-banner__disc[open] > summary, body.lgs-shell-on .lgs-reviews__disc[open] > summary { margin-bottom: var(--s2); } body.lgs-shell-on .lgs-claim-form label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 var(--s0); } /* quiet provenance strip (replaces the giant unclaimed identity panel) */ body.lgs-shell-on .lgs-prospect-banner--quiet { background: none; border: 0; border-left: 2px solid var(--c2-rule-strong); border-radius: 0; padding: 2px 0 2px var(--s2); margin: 0 0 var(--s3); font-size: 13.5px; color: var(--c2-muted); } body.lgs-shell-on .lgs-prospect-banner--quiet .lgs-prospect-banner__badge { display: inline; background: none; border: 0; padding: 0; border-radius: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c2-green-deep); } body.lgs-shell-on .lgs-prospect-banner--quiet a { color: var(--c2-green-deep); font-weight: 600; } /* market lower half: information stays, panels go */ body.lgs-c2-profile .lgs-mkt__block, body.lgs-c2-profile .lgs-mkt__block--sage { background: none; border: 0; border-top: 1px solid var(--c2-rule); border-radius: 0; box-shadow: none; padding: var(--s4) 0; margin: var(--s3) 0 0; } /* group rows: the town C2 join grammar, boxes retired */ body.lgs-c2-profile .lgs-join__list { display: block; gap: 0; } body.lgs-c2-profile .lgs-join__list li { background: none; border: 0; border-bottom: 1px solid var(--c2-hair); border-radius: 0; padding: var(--s2) 0; margin: 0; } body.lgs-c2-profile .lgs-join__list li:last-child { border-bottom: 0; } body.lgs-c2-profile .lgs-join__when { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--c2-ink); margin-right: var(--s1); } body.lgs-c2-profile .lgs-join__venue, body.lgs-c2-profile .lgs-join__rule { color: var(--c2-muted); font-size: 13.5px; } body.lgs-c2-profile .lgs-join__chip { background: none; border: 1px solid var(--c2-hair); border-radius: 2px; color: var(--c2-muted); font-size: 12px; padding: 0 5px; white-space: nowrap; } body.lgs-c2-profile .lgs-join__chip--wait { border-color: var(--c2-rule-strong); color: var(--c2-ink); } body.lgs-c2-profile .lgs-group__wait { background: none; border: 0; border-left: 2px solid var(--c2-rule-strong); border-radius: 0; padding: 2px 0 2px var(--s2); } body.lgs-c2-profile .lgs-join__more { margin: var(--s2) 0 var(--s4); } /* /uk/ root: place-first rhythm on the existing spine C2 scope */ .lgs-spine.lgs-c2 .lgs-spine__support { max-width: var(--c2-measure); color: var(--c2-muted); font-size: 14.5px; } .lgs-spine.lgs-c2 .lgs-spine__findrow { margin: var(--s3) 0 var(--s5); } .lgs-spine.lgs-c2 .lgs-spine__choose { display: inline-block; background: var(--c2-green-deep); color: #fff !important; font-size: 15px; font-weight: 600; padding: 11px 20px; min-height: 44px; border-radius: 2px; text-decoration: none; line-height: 1.5; } .lgs-spine.lgs-c2 .lgs-spine__choose:hover { background: var(--c2-green); } .lgs-spine.lgs-c2 .lgs-spine__cols { columns: 3; } .lgs-spine.lgs-c2 .lgs-spine__cols li { padding: 3px 0; break-inside: avoid; } .lgs-spine.lgs-c2 .lgs-spine__count { color: var(--c2-faint); font-size: 12px; } .lgs-spine.lgs-c2 .lgs-spine__h2-quiet { font-size: clamp(18px, 2vw, 21px); color: var(--c2-body); } .lgs-spine.lgs-c2 .lgs-spine__cols--quiet { font-size: 13px; } .lgs-spine.lgs-c2 .lgs-spine__cols--quiet a { color: var(--c2-body); } .lgs-spine.lgs-c2 .lgs-spine__cols--quiet a:hover { color: var(--c2-green-deep); } @media (max-width: 700px) { .lgs-spine.lgs-c2 .lgs-spine__cols { columns: 2; } .lgs-spine.lgs-c2 .lgs-spine__cols--quiet { columns: 1; } } /* legibility: the finest supporting text steps up half a point */ .lgs-spine.lgs-c2 .lgs-town__desc { font-size: 13px; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__sub { font-size: 13px; } /* mobile shell: keep the cold header on one row at 390 */ @media (max-width: 430px) { .lgs-shell.lgs-shell__header .lgs-shell__brand-word { font-size: 16.5px; letter-spacing: 0; } .lgs-shell.lgs-shell__header .lgs-shell__place-btn { font-size: 13.5px; padding: 4px 2px; } .lgs-shell.lgs-shell__header .lgs-shell__band { gap: var(--s2); } /* icon-only menu at phone width: the word stays for screen readers, and the freed ~44px keeps brand + any town name + menu on ONE row */ .lgs-shell.lgs-shell__header .lgs-shell__menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } } /* ------------------------------------------------------------------ */ /* 16. UX-7.2 owner visual finish. RULE: show the useful answer first, */ /* reveal the database when the resident asks for depth. */ /* ------------------------------------------------------------------ */ /* footer: navigation ends the page; the legal identity is the FINAL, quiet layer - tagline left, corporate right on desktop, stacked on mobile. Never between content and navigation. */ body.lgs-shell-on .lgs-shell__foot-end { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); flex-wrap: wrap; max-width: var(--c2-max); margin: var(--s4) auto 0; border-top: 1px solid var(--c2-rule); padding: var(--s3) var(--c2-gutter) var(--s4); } body.lgs-shell-on .lgs-shell__foot-end .lgs-shell__foot-line { border: 0; margin: 0; padding: 0; } body.lgs-shell-on .lgs-shell__legal { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--c2-faint); text-align: right; } body.lgs-shell-on .lgs-shell__legal-reg { display: block; } @media (max-width: 700px) { body.lgs-shell-on .lgs-shell__foot-end { display: block; } body.lgs-shell-on .lgs-shell__legal { text-align: left; margin-top: var(--s1); } } /* the identity module's standalone band never renders inside the shell, but if a cached page still carries it, it must not interrupt */ body.lgs-shell-on .lgs-identity { background: none; padding: 0 var(--s4) var(--s3); } body.lgs-shell-on .lgs-identity p { color: var(--c2-faint); font-size: 12.5px; } /* /uk/: the inline finder is the page's primary utility - same look as the shell chooser, page-scaled */ .lgs-spine.lgs-c2 .lgs-spine__finder { margin: var(--s4) 0 var(--s5); max-width: 560px; } .lgs-spine.lgs-c2 .lgs-spine__finder label { display: block; font-weight: 600; font-size: 14.5px; margin: 0 0 var(--s1); } .lgs-spine.lgs-c2 .lgs-spine__finder input { width: 100%; border: 1px solid var(--c2-rule); border-radius: 2px; background: #fff; padding: 12px 14px; font-size: 16px; color: var(--c2-ink); } .lgs-spine.lgs-c2 .lgs-spine__finder input:focus-visible { outline: 3px solid var(--c2-green-deep); outline-offset: 1px; } .lgs-spine.lgs-c2 .lgs-spine__finder-results { list-style: none; margin: var(--s1) 0 0; padding: 0; } .lgs-spine.lgs-c2 .lgs-spine__finder-results li { border-top: 1px solid var(--c2-hair); } .lgs-spine.lgs-c2 .lgs-spine__finder-results a { display: block; padding: 9px 2px; color: var(--c2-green-deep); font-weight: 600; font-size: 15px; text-decoration: none; } .lgs-spine.lgs-c2 .lgs-spine__finder-results a:hover { color: var(--c2-green); } .lgs-spine.lgs-c2 .lgs-spine__finder-results .lgs-shell__places-county { color: var(--c2-faint); font-weight: 400; font-size: 12.5px; margin-left: var(--s1); } .lgs-spine.lgs-c2 .lgs-spine__finder-status { color: var(--c2-faint); font-size: 12.5px; margin: var(--s1) 0 0; } /* /uk/: the area graph stays complete in server HTML, revealed in deterministic alphabetical bands; the category door collapses to one line. Both are native details - keyboard, crawler and no-JS safe. */ .lgs-spine.lgs-c2 .lgs-spine__areas, .lgs-spine.lgs-c2 .lgs-spine__catdoor { border-top: 1px solid var(--c2-rule); } /* the closing rule under the last band comes from the catdoor's own border-top; the kicker that follows the bands gets breathing room (:last-of-type cannot target "last .lgs-spine__areas" - the category door is also a details element) */ .lgs-spine.lgs-c2 .lgs-spine__areas + .lgs-town__kicker { margin-top: var(--s5); } .lgs-spine.lgs-c2 .lgs-spine__areas > summary, .lgs-spine.lgs-c2 .lgs-spine__catdoor > summary { cursor: pointer; padding: var(--s2) 0; font-weight: 600; font-size: 15.5px; color: var(--c2-ink); list-style-position: outside; } .lgs-spine.lgs-c2 .lgs-spine__areas > summary:hover, .lgs-spine.lgs-c2 .lgs-spine__catdoor > summary:hover { color: var(--c2-green-deep); } .lgs-spine.lgs-c2 .lgs-spine__areas[open] > summary, .lgs-spine.lgs-c2 .lgs-spine__catdoor[open] > summary { border-bottom: 1px solid var(--c2-hair); margin-bottom: var(--s2); } .lgs-spine.lgs-c2 .lgs-spine__areas .lgs-spine__cols { margin: 0 0 var(--s3); } .lgs-spine.lgs-c2 .lgs-spine__catdoor { margin-bottom: var(--s3); } .lgs-spine.lgs-c2 .lgs-spine__catdoor .lgs-spine__cols--quiet { margin: 0 0 var(--s3); } /* form submits: the legacy restyler pins a pill radius with a body:is(...) selector that PRINTS AFTER this sheet - the attribute selector out-specifies it so C2's flat radius wins everywhere */ body.lgs-shell-on .lgs-follow form button[type="submit"], body.lgs-shell-on .lgs-claim-form button[type="submit"], body.lgs-shell-on .lgs-reviews__form button[type="submit"] { border-radius: 2px; } /* ONE claim/provenance component: the summary carries badge, source truth, updated date and the action - a ruled quiet strip */ body.lgs-shell-on .lgs-claim-banner__disc > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } body.lgs-shell-on .lgs-claim-banner__badge { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-green-deep); border-left: 3px solid var(--c2-green-deep); padding-left: 8px; } body.lgs-shell-on .lgs-claim-banner__prov { color: var(--c2-faint); font-weight: 400; font-size: 13px; } body.lgs-shell-on .lgs-claim-banner__go { font-weight: 600; font-size: 14px; } /* follow: two-column composition where width allows - words left, form right; the relationship reads editorial, not plugin */ body.lgs-shell-on .lgs-follow form { max-width: 560px; } body.lgs-shell-on .lgs-follow__label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 3px; } body.lgs-shell-on .lgs-follow__optional { font-weight: 400; color: var(--c2-faint); font-size: 12.5px; } body.lgs-shell-on .lgs-follow input[type="email"], body.lgs-shell-on .lgs-follow input[type="text"]:not([name="lgs_fl_website"]) { max-width: 100%; width: 100%; margin: 0 0 var(--s2); } @media (min-width: 900px) { body.lgs-shell-on .lgs-follow:not(.lgs-follow--page) { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(300px, 560px); column-gap: var(--s5); align-items: start; } body.lgs-shell-on .lgs-follow:not(.lgs-follow--page) > :is(h3, .lgs-follow__count, .lgs-follow__helper) { grid-column: 1; } body.lgs-shell-on .lgs-follow:not(.lgs-follow--page) > :is(form, .lgs-follow__notice) { grid-column: 2; } body.lgs-shell-on .lgs-follow:not(.lgs-follow--page) > form { grid-row: 1 / span 3; } } /* standalone follow: a focused utility page in a form column - no floating card, no centring, no fill */ body.lgs-shell-on .lgs-follow-page-wrap { max-width: 620px; margin: var(--s5) auto; padding: 0 var(--s4); } body.lgs-shell-on .lgs-follow-page__back { margin: 0 0 var(--s4); font-size: 14px; } body.lgs-shell-on .lgs-follow-page__back a { color: var(--c2-green-deep); font-weight: 600; text-decoration: none; } body.lgs-shell-on .lgs-follow-page__back a:hover { color: var(--c2-green); } body.lgs-shell-on .lgs-follow-page__kicker { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--c2-green-deep); margin: 0 0 var(--s1); } body.lgs-shell-on .lgs-follow--page { max-width: none; margin: 0 0 var(--s5); border-bottom: 0; } body.lgs-shell-on .lgs-follow--page h1 { font-family: var(--c2-serif); font-weight: 600; letter-spacing: -.01em; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; color: var(--c2-ink); margin: 0 0 var(--s2); } /* market hero: identity, one-liner, the date, immediate actions - and a real photograph ONLY when the market genuinely has one */ body.lgs-c2-profile .lgs-mkt__hero--photo { display: grid; grid-template-columns: minmax(300px, 1.2fr) minmax(240px, 1fr); gap: var(--s4) var(--s5); align-items: start; } @media (max-width: 820px) { body.lgs-c2-profile .lgs-mkt__hero--photo { display: block; } } body.lgs-c2-profile .lgs-mkt__photo { margin: var(--s3) 0; } body.lgs-c2-profile .lgs-mkt__photo img { width: 100%; height: auto; display: block; border-radius: 2px; } body.lgs-c2-profile .lgs-mkt__next { display: block; background: none; border: 0; border-radius: 0; padding: 0; margin: var(--s2) 0; font-size: clamp(18px, 2.2vw, 22px); font-family: var(--c2-serif); letter-spacing: -.01em; color: var(--c2-ink); } body.lgs-c2-profile .lgs-mkt__oneliner { margin: var(--s1) 0 var(--s2); } body.lgs-c2-profile .lgs-mkt__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; } body.lgs-c2-profile .lgs-mkt__act-primary { display: inline-block; background: var(--c2-green-deep); color: #fff !important; font-weight: 600; font-size: 14.5px; padding: 10px 18px; border-radius: 2px; text-decoration: none; min-height: 44px; } body.lgs-c2-profile .lgs-mkt__act-primary:hover { background: var(--c2-green); } body.lgs-c2-profile .lgs-mkt__act-follow { display: inline-block; color: var(--c2-green-deep) !important; border: 1px solid currentColor; font-weight: 600; font-size: 14.5px; padding: 9px 16px; border-radius: 2px; text-decoration: none; min-height: 44px; background: none; } body.lgs-c2-profile .lgs-mkt__act-follow:hover { color: var(--c2-green) !important; } /* market facts: an editorial utility row - rules and typography, no beige rounded container */ body.lgs-c2-profile .lgs-mkt__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s2) var(--s4); background: none; border: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--c2-rule); border-bottom: 1px solid var(--c2-rule); padding: var(--s3) 0; margin: var(--s3) 0 var(--s4); } body.lgs-c2-profile .lgs-mkt__facts dt { font-family: var(--c2-sans); font-size: 12px; font-weight: 650; letter-spacing: .08em; color: var(--c2-green-deep); } body.lgs-c2-profile .lgs-mkt__facts dd { font-size: 14px; } /* market map: useful, not the identity - plain, ruled, unboxed */ body.lgs-c2-profile .lgs-mkt__where-h { margin: 0 0 var(--s2); } body.lgs-c2-profile .lgs-mkt__map { background: none; border: 1px solid var(--c2-rule); border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 var(--s4); } body.lgs-c2-profile .lgs-mkt__map iframe { border-radius: 0; } /* market lower half: two audiences side by side under one rule, then plain ruled sections - never a card stack */ @media (min-width: 900px) { body.lgs-c2-profile .lgs-mkt__pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s6); } body.lgs-c2-profile .lgs-mkt__pair > .lgs-mkt__block:last-child { border-top: 1px solid var(--c2-rule); /* both columns open with the same rule */ } } body.lgs-c2-profile .lgs-mkt__cta { background: var(--c2-green-deep); color: #fff !important; border-radius: 2px; box-shadow: none; font-weight: 600; font-size: 14.5px; padding: 10px 18px; } body.lgs-c2-profile .lgs-mkt__cta:hover { background: var(--c2-green); } /* town: help-this-page-grow as ruled text actions - no cards, no pills, no icon circles */ .lgs-spine.lgs-c2 .lgs-town__grow { list-style: none; margin: var(--s3) 0 0; padding: 0; } .lgs-spine.lgs-c2 .lgs-town__grow li { border-top: 1px solid var(--c2-hair); padding: var(--s2) 0; font-size: 13.5px; max-width: 70ch; } .lgs-spine.lgs-c2 .lgs-town__grow li:first-child { border-top: 0; } .lgs-spine.lgs-c2 .lgs-town__grow-act { display: inline-block; margin-top: 4px; color: var(--c2-green-deep); font-weight: 600; text-decoration: none; } .lgs-spine.lgs-c2 .lgs-town__grow-act:hover { color: var(--c2-green); } /* town lower tail: supporting content after Hearabouts steps to a slightly tighter rhythm - civic, not padded */ .lgs-spine.lgs-c2 .lgs-town__doorsblock, .lgs-spine.lgs-c2 .lgs-town__trade, .lgs-spine.lgs-c2 .lgs-town__money, .lgs-spine.lgs-c2 .lgs-town__gap, .lgs-spine.lgs-c2 .lgs-town__vision { margin-top: var(--s4); margin-bottom: var(--s4); } .lgs-spine.lgs-c2 .lgs-town__doorsblock { padding-top: var(--s3); } .lgs-spine.lgs-c2 .lgs-town__doorsblock, .lgs-spine.lgs-c2 .lgs-town__trade { padding-left: 0; padding-right: 0; } /* ------------------------------------------------------------------ */ /* 17. UX-8 / Phase 4A - unified local search. 10% editorial, 90% */ /* utility: paper, ink, rules, the family grammars the site already */ /* proved. Never a search-app aesthetic. */ /* ------------------------------------------------------------------ */ body.lgs-c2-search .lgs-srch { max-width: var(--c2-max); margin: 0 auto; } body.lgs-c2-search .lgs-srch__kicker { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--c2-green-deep); margin: var(--s4) 0 var(--s1); } body.lgs-c2-search .lgs-srch__h1 { font-family: var(--c2-serif); font-weight: 600; letter-spacing: -.01em; font-size: clamp(28px, 3.6vw, 38px); line-height: 1.12; color: var(--c2-ink); margin: 0 0 var(--s3); } body.lgs-c2-search .lgs-srch__lead { max-width: 60ch; margin: 0 0 var(--s3); } /* form: GOV-plain, wider than prose but never viewport-wide */ body.lgs-c2-search .lgs-srch__form { max-width: 760px; margin: 0 0 var(--s4); } body.lgs-c2-search .lgs-srch__row { display: flex; gap: var(--s2); align-items: flex-end; flex-wrap: wrap; } body.lgs-c2-search .lgs-srch__qwrap { flex: 1 1 320px; } body.lgs-c2-search .lgs-srch__label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 3px; } body.lgs-c2-search input.lgs-srch__q[type="search"], body.lgs-c2-search .lgs-srch__whenwrap select { width: 100%; border: 1px solid var(--c2-rule); border-radius: 2px; background: #fff; padding: 11px 12px; font-size: 16px; color: var(--c2-ink); min-height: 44px; } body.lgs-c2-search .lgs-srch__whenwrap { flex: 0 1 170px; } body.lgs-c2-search .lgs-srch__go { background: var(--c2-green-deep); color: #fff; border: 0; border-radius: 2px; padding: 11px 22px; min-height: 44px; font-weight: 600; font-size: 14.5px; cursor: pointer; } body.lgs-c2-search .lgs-srch__go:hover { background: var(--c2-green); } body.lgs-c2-search .lgs-srch__placeline { margin: var(--s2) 0 0; font-size: 14px; } body.lgs-c2-search .lgs-srch__place { font-weight: 600; } body.lgs-c2-search .lgs-srch__change { display: inline-block; margin-left: var(--s2); } body.lgs-c2-search .lgs-srch__change > summary { cursor: pointer; color: var(--c2-green-deep); font-weight: 600; display: inline; } body.lgs-c2-search .lgs-srch__change[open] { display: block; margin: var(--s2) 0 0; } body.lgs-c2-search .lgs-srch__remembered a, body.lgs-c2-search .lgs-srch__browse a { color: var(--c2-green-deep); font-weight: 600; text-decoration: none; } body.lgs-c2-search .lgs-srch__remembered a:hover, body.lgs-c2-search .lgs-srch__browse a:hover { color: var(--c2-green); } /* results header + family navigation: restrained text row, ruled */ body.lgs-c2-search .lgs-srch__resline { font-family: var(--c2-serif); font-size: clamp(19px, 2.2vw, 24px); border-top: 2px solid var(--c2-rule-strong); padding-top: var(--s3); margin: var(--s4) 0 var(--s2); } body.lgs-c2-search .lgs-srch__fams ul { list-style: none; margin: 0 0 var(--s3); padding: 0 0 var(--s2); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); border-bottom: 1px solid var(--c2-rule); } body.lgs-c2-search .lgs-srch__fams a { color: var(--c2-body); text-decoration: none; font-size: 14px; font-weight: 600; padding: 4px 0; } body.lgs-c2-search .lgs-srch__fams a:hover { color: var(--c2-green-deep); } body.lgs-c2-search .lgs-srch__fams a[aria-current="true"] { color: var(--c2-ink); box-shadow: 0 2px 0 var(--c2-green-deep); } body.lgs-c2-search .lgs-srch__count { color: var(--c2-faint); font-weight: 400; font-size: 12.5px; } /* family sections: kicker-weight headings, ruled utility lists */ body.lgs-c2-search .lgs-srch__famh { font-family: var(--c2-sans); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-green-deep); margin: var(--s4) 0 var(--s1); } body.lgs-c2-search .lgs-srch__list { list-style: none; margin: 0; padding: 0; } body.lgs-c2-search .lgs-srch__item { display: flex; gap: var(--s3); border-top: 1px solid var(--c2-hair); padding: var(--s2) 0; } body.lgs-c2-search .lgs-srch__item:first-child { border-top: 0; } body.lgs-c2-search .lgs-srch__when { flex: 0 0 118px; font-weight: 600; color: var(--c2-green-deep); font-size: 13.5px; font-variant-numeric: tabular-nums; } body.lgs-c2-search .lgs-srch__img { flex: 0 0 56px; height: 56px; border-radius: 2px; background-size: cover; background-position: center; } body.lgs-c2-search .lgs-srch__body { flex: 1 1 auto; min-width: 0; max-width: 66ch; } body.lgs-c2-search .lgs-srch__body > a { color: var(--c2-ink); font-weight: 650; font-size: 15.5px; text-decoration: none; } body.lgs-c2-search .lgs-srch__body > a:hover { color: var(--c2-green-deep); } body.lgs-c2-search .lgs-srch__meta { display: block; color: var(--c2-faint); font-size: 12.5px; margin-top: 1px; } body.lgs-c2-search .lgs-srch__snip { display: block; font-size: 13.5px; color: var(--c2-body); margin-top: 3px; } body.lgs-c2-search .lgs-srch__more { margin: var(--s2) 0 0; } body.lgs-c2-search .lgs-srch__more a, body.lgs-c2-search .lgs-srch__pages a { color: var(--c2-green-deep); font-weight: 600; text-decoration: none; } body.lgs-c2-search .lgs-srch__more a:hover, body.lgs-c2-search .lgs-srch__pages a:hover { color: var(--c2-green); } body.lgs-c2-search .lgs-srch__pages { margin: var(--s3) 0 0; font-size: 14px; } body.lgs-c2-search .lgs-srch__pageno { color: var(--c2-faint); margin: 0 var(--s2); } /* start / zero states: quiet doors, resident-first */ body.lgs-c2-search .lgs-srch__doors { list-style: none; margin: var(--s2) 0 0; padding: 0; max-width: 60ch; } body.lgs-c2-search .lgs-srch__doors li { border-top: 1px solid var(--c2-hair); padding: var(--s2) 0; font-size: 14.5px; } body.lgs-c2-search .lgs-srch__doors li:first-child { border-top: 0; } body.lgs-c2-search .lgs-srch__doors a { color: var(--c2-green-deep); font-weight: 600; text-decoration: none; } body.lgs-c2-search .lgs-srch__doors a:hover { color: var(--c2-green); } body.lgs-c2-search .lgs-srch__add { margin: var(--s4) 0 0; font-size: 13px; color: var(--c2-faint); } body.lgs-c2-search .lgs-srch__add a { color: var(--c2-green-deep); font-weight: 600; text-decoration: none; } body.lgs-c2-search .lgs-srch__note { margin: var(--s5) 0 var(--s3); padding-top: var(--s2); border-top: 1px solid var(--c2-hair); font-size: 12px; color: var(--c2-faint); max-width: 66ch; } @media (max-width: 700px) { body.lgs-c2-search .lgs-srch__row { display: block; } body.lgs-c2-search .lgs-srch__qwrap, body.lgs-c2-search .lgs-srch__whenwrap { margin: 0 0 var(--s2); } body.lgs-c2-search .lgs-srch__go { width: 100%; } body.lgs-c2-search .lgs-srch__item { flex-wrap: wrap; gap: var(--s1) var(--s2); } body.lgs-c2-search .lgs-srch__when { flex-basis: 100%; } body.lgs-c2-search .lgs-srch__img { flex-basis: 48px; height: 48px; } } /* ------------------------------------------------------------------ */ /* 18. UX-9 - the contributor front door (/join/ + /registration/). */ /* 30% editorial / 70% utility: identity before pricing, ruled rows */ /* never card grids, a compact truth table instead of SaaS pricing. */ /* ------------------------------------------------------------------ */ /* UX-9.1: the journey containers own a real C2 gutter (the owner screenshot showed body copy touching the viewport at 390 - the containers had max-width+auto margins but no horizontal padding). */ body.lgs-c2-join .lgs-joinc2, body.lgs-c2-reg .lgs-regc2 { --c2-gutter: 24px; max-width: var(--c2-max); margin: 0 auto; padding: 0 var(--c2-gutter); font-family: var(--c2-sans); font-size: 15.5px; line-height: 1.6; color: var(--c2-body); } body.lgs-c2-join .lgs-joinc2 p, body.lgs-c2-reg .lgs-regc2 p { max-width: var(--c2-measure); } body.lgs-c2-join .lgs-joinc2 h1, body.lgs-c2-reg .lgs-regc2 h1 { font-family: var(--c2-serif); font-weight: 600; letter-spacing: -.01em; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; color: var(--c2-ink); margin: 0 0 var(--s2); } body.lgs-c2-join .lgs-joinc2 h2 { font-family: var(--c2-serif); font-weight: 600; letter-spacing: -.01em; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; color: var(--c2-ink); margin: 0 0 var(--s2); } body.lgs-c2-join .lgs-joinc2 h3 { font-family: var(--c2-serif); font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--c2-ink); margin: 0 0 var(--s1); } body.lgs-c2-join .lgs-joinc2__kicker, body.lgs-c2-reg .lgs-regc2 .lgs-joinc2__kicker { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--c2-green-deep); margin: 0 0 var(--s1); } /* UX-9.1 hero: two-column editorial composition on desktop - the argument left, three typographic proof figures right. No cards, no icons, no gradient; rules and type carry it. */ body.lgs-c2-join .lgs-joinc2__hero { padding: var(--s5) 0 var(--s4); } body.lgs-c2-join .lgs-joinc2__lede { font-family: var(--c2-serif); font-size: clamp(19px, 2vw, 23px); line-height: 1.35; color: var(--c2-ink); max-width: 30ch; margin: 0 0 var(--s2); } body.lgs-c2-join .lgs-joinc2__sub { font-size: 16.5px; max-width: 52ch; margin: 0 0 var(--s2); } body.lgs-c2-join .lgs-joinc2__subquiet { font-size: 14.5px; color: var(--c2-muted); max-width: 58ch; margin: 0; } body.lgs-c2-join .lgs-joinc2__hero-proof { border-top: 2px solid var(--c2-rule-strong); margin-top: var(--s4); max-width: 420px; } body.lgs-c2-join .lgs-joinc2__proofrow { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: var(--s2); align-items: baseline; border-bottom: 1px solid var(--c2-hair); padding: var(--s2) 0; } body.lgs-c2-join .lgs-joinc2__prooffig { font-family: var(--c2-serif); font-weight: 600; font-size: clamp(30px, 3vw, 38px); line-height: 1; color: var(--c2-green-deep); letter-spacing: -.01em; } body.lgs-c2-join .lgs-joinc2__prooffig--words { font-size: clamp(19px, 2vw, 23px); text-transform: uppercase; letter-spacing: .04em; } body.lgs-c2-join .lgs-joinc2__proofcap { font-size: 14px; color: var(--c2-body); max-width: 24ch; } @media (min-width: 900px) { body.lgs-c2-join .lgs-joinc2__hero { display: grid; grid-template-columns: minmax(0, 62%) minmax(280px, 1fr); gap: var(--s6); align-items: start; } body.lgs-c2-join .lgs-joinc2__hero-proof { margin-top: var(--s3); } } /* the quiet already-listed utility line (was a filled kraft panel) */ body.lgs-c2-join .lgs-joinc2__already { border-top: 1px solid var(--c2-rule); border-bottom: 1px solid var(--c2-hair); padding: var(--s2) 0; margin: 0 0 var(--s4); font-size: 14.5px; color: var(--c2-muted); } body.lgs-c2-join .lgs-joinc2__already a { color: var(--c2-green-deep); font-weight: 600; text-decoration: none; } body.lgs-c2-join .lgs-joinc2__already a:hover { color: var(--c2-green); } /* why this exists: the structural argument, prose only */ body.lgs-c2-join .lgs-joinc2__why { margin: 0 0 var(--s4); } body.lgs-c2-join .lgs-joinc2__why h2 { max-width: 30ch; } body.lgs-c2-join .lgs-joinc2__why p { margin: 0 0 var(--s2); } /* proof of difference: four ruled editorial blocks, laterally composed */ body.lgs-c2-join .lgs-joinc2__diff { display: grid; grid-template-columns: 1fr; gap: 0 var(--s5); border-top: 2px solid var(--c2-rule-strong); margin: 0 0 var(--s5); } body.lgs-c2-join .lgs-joinc2__diffrow { border-top: 1px solid var(--c2-hair); padding: var(--s3) 0; } body.lgs-c2-join .lgs-joinc2__diff .lgs-joinc2__diffrow:first-child { border-top: 0; } body.lgs-c2-join .lgs-joinc2__diffrow h3 { margin: 0 0 var(--s1); } body.lgs-c2-join .lgs-joinc2__diffrow p { margin: 0; max-width: 52ch; } @media (min-width: 900px) { body.lgs-c2-join .lgs-joinc2__diff { grid-template-columns: 1fr 1fr; } body.lgs-c2-join .lgs-joinc2__diff .lgs-joinc2__diffrow:nth-child(2) { border-top: 0; } } /* what-do-you-run: strong ruled rows, the whole row is the action */ body.lgs-c2-join .lgs-joinc2__run { margin: 0 0 var(--s5); } body.lgs-c2-join .lgs-joinc2__run h2 { border-top: 2px solid var(--c2-rule-strong); padding-top: var(--s3); } body.lgs-c2-join a.lgs-joinc2__row { display: grid; grid-template-columns: minmax(160px, 260px) 1fr auto; gap: var(--s1) var(--s3); align-items: baseline; border-top: 1px solid var(--c2-hair); padding: var(--s3) 0; text-decoration: none; color: var(--c2-body); min-height: 44px; } body.lgs-c2-join a.lgs-joinc2__row:first-of-type { border-top: 1px solid var(--c2-hair); } body.lgs-c2-join .lgs-joinc2__row-h { font-family: var(--c2-serif); font-weight: 600; font-size: 19px; color: var(--c2-green-deep); } body.lgs-c2-join a.lgs-joinc2__row:hover .lgs-joinc2__row-h { color: var(--c2-green); } body.lgs-c2-join .lgs-joinc2__row-p { max-width: 60ch; } body.lgs-c2-join .lgs-joinc2__row-go { color: var(--c2-green-deep); font-weight: 600; } /* branch rows carry an explicit action line (UX-9.1: journeys, not accordion affordances) */ body.lgs-c2-join .lgs-joinc2__row-act { color: var(--c2-green-deep); font-weight: 650; } body.lgs-c2-join a.lgs-joinc2__row:hover .lgs-joinc2__row-act { color: var(--c2-green); } body.lgs-c2-join .lgs-joinc2__conviction { font-family: var(--c2-serif); font-size: 17px; color: var(--c2-ink); max-width: 52ch; } /* family sections */ body.lgs-c2-join .lgs-joinc2__fam { border-top: 2px solid var(--c2-rule-strong); padding: var(--s4) 0 var(--s3); margin: 0 0 var(--s4); } body.lgs-c2-join .lgs-joinc2__famlede { max-width: 66ch; } body.lgs-c2-join .lgs-joinc2__modes { margin: var(--s2) 0 var(--s4); } body.lgs-c2-join .lgs-joinc2__free, body.lgs-c2-join .lgs-joinc2__plan { border-top: 1px solid var(--c2-rule); padding: var(--s3) 0 var(--s2); } body.lgs-c2-join .lgs-joinc2__defs { margin: var(--s2) 0; max-width: 70ch; } body.lgs-c2-join .lgs-joinc2__defs > div { border-top: 1px solid var(--c2-hair); padding: var(--s2) 0; } body.lgs-c2-join .lgs-joinc2__defs > div:first-child { border-top: 0; } body.lgs-c2-join .lgs-joinc2__defs dt { font-weight: 650; color: var(--c2-ink); margin: 0 0 2px; } body.lgs-c2-join .lgs-joinc2__defs dd { margin: 0; max-width: 62ch; } body.lgs-c2-join .lgs-joinc2__price { font-family: var(--c2-serif); font-size: 18px; font-weight: 600; color: var(--c2-ink); margin: 0 0 var(--s2); } body.lgs-c2-join .lgs-joinc2__points { list-style: none; margin: 0 0 var(--s3); padding: 0; max-width: 66ch; } body.lgs-c2-join .lgs-joinc2__points li { border-top: 1px solid var(--c2-hair); padding: var(--s2) 0; } body.lgs-c2-join .lgs-joinc2__points li:first-child { border-top: 0; } body.lgs-c2-join .lgs-joinc2__cta { margin: var(--s3) 0 var(--s2); display: flex; gap: var(--s2); flex-wrap: wrap; } body.lgs-c2-join .lgs-joinc2__go { display: inline-block; background: var(--c2-green-deep); color: #fff; border-radius: 2px; padding: 11px 22px; min-height: 44px; font-weight: 600; font-size: 14.5px; text-decoration: none; } body.lgs-c2-join .lgs-joinc2__go:hover { background: var(--c2-green); color: #fff; } body.lgs-c2-join .lgs-joinc2__go--quiet { background: none; color: var(--c2-green-deep); border: 1px solid var(--c2-rule); } body.lgs-c2-join .lgs-joinc2__go--quiet:hover { background: var(--c2-wash); color: var(--c2-green-deep); } /* the truth table: compact, ruled, never a pricing-card wall */ body.lgs-c2-join .lgs-joinc2__compare { border-top: 1px solid var(--c2-rule); padding: var(--s3) 0 var(--s2); } body.lgs-c2-join .lgs-joinc2__tablewrap { overflow-x: auto; max-width: 760px; } body.lgs-c2-join .lgs-joinc2__table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14.5px; } body.lgs-c2-join .lgs-joinc2__table th, body.lgs-c2-join .lgs-joinc2__table td { border-top: 1px solid var(--c2-hair); padding: var(--s1) var(--s2); text-align: left; vertical-align: top; } body.lgs-c2-join .lgs-joinc2__table thead th { border-top: 0; font-family: var(--c2-serif); font-size: 16px; color: var(--c2-ink); } body.lgs-c2-join .lgs-joinc2__table thead th span { display: block; font-family: var(--c2-sans); font-size: 12.5px; font-weight: 600; color: var(--c2-muted); } body.lgs-c2-join .lgs-joinc2__table tbody th { font-weight: 500; color: var(--c2-body); } body.lgs-c2-join .lgs-joinc2__table td { color: var(--c2-green-deep); font-weight: 600; } body.lgs-c2-join .lgs-joinc2__note { font-size: 13px; color: var(--c2-muted); margin-top: var(--s2); } body.lgs-c2-join .lgs-joinc2__truth { background: var(--c2-card); border-top: 1px solid var(--c2-rule); padding: var(--s3); max-width: 70ch; margin-top: var(--s3); } body.lgs-c2-join .lgs-joinc2__truth p { margin: 0 0 var(--s1); } body.lgs-c2-join .lgs-joinc2__free-forever { font-family: var(--c2-serif); font-size: 19px; font-weight: 600; color: var(--c2-green-deep); margin: 0 0 var(--s1); } /* UX-9.1: the market network story + mission line */ body.lgs-c2-join .lgs-joinc2__network { border-top: 1px solid var(--c2-rule); padding: var(--s3) 0 var(--s2); max-width: 72ch; } body.lgs-c2-join .lgs-joinc2__network p { margin: 0 0 var(--s2); } body.lgs-c2-join .lgs-joinc2__mission { font-family: var(--c2-serif); font-size: 17.5px; color: var(--c2-ink); border-top: 1px solid var(--c2-rule); padding-top: var(--s3); margin: var(--s3) 0 var(--s2); max-width: 58ch; } body.lgs-c2-join .lgs-joinc2__hubnote { font-size: 14.5px; color: var(--c2-muted); max-width: 62ch; } /* the mobile plan summaries (generated from the same data as the table) */ body.lgs-c2-join .lgs-joinc2__plansums { display: none; } body.lgs-c2-join .lgs-joinc2__plansum { border-top: 1px solid var(--c2-rule); padding: var(--s2) 0; } body.lgs-c2-join .lgs-joinc2__plansum h4 { font-family: var(--c2-serif); font-size: 18px; font-weight: 600; color: var(--c2-ink); margin: 0 0 var(--s1); } body.lgs-c2-join .lgs-joinc2__plansum h4 span { font-family: var(--c2-sans); font-size: 13px; font-weight: 600; color: var(--c2-muted); margin-left: var(--s1); } body.lgs-c2-join .lgs-joinc2__plansum ul { list-style: none; margin: 0; padding: 0; } body.lgs-c2-join .lgs-joinc2__plansum li { border-top: 1px solid var(--c2-hair); padding: 6px 0; font-size: 14.5px; } body.lgs-c2-join .lgs-joinc2__plansum li:first-child { border-top: 0; } /* the closing thought */ body.lgs-c2-join .lgs-joinc2__close { border-top: 2px solid var(--c2-rule-strong); padding-top: var(--s4); margin-bottom: var(--s3); } body.lgs-c2-join .lgs-joinc2__closethought { font-family: var(--c2-serif); font-size: clamp(18px, 2vw, 21px); line-height: 1.4; color: var(--c2-ink); max-width: 44ch; margin: 0 0 var(--s3); } /* /registration/: the C2 head above the untouched wizard engine */ body.lgs-c2-reg .lgs-regc2__hero { padding: var(--s5) 0 var(--s3); } body.lgs-c2-reg .lgs-regc2__lede { font-size: 16.5px; max-width: 58ch; margin: 0 0 var(--s2); } body.lgs-c2-reg .lgs-regc2__claim { font-size: 14px; color: var(--c2-muted); margin: 0; } body.lgs-c2-reg .lgs-regc2__claim a { color: var(--c2-green-deep); font-weight: 600; } body.lgs-c2-reg .lgs-regc2__form { margin-top: var(--s3); } /* the wizard inherits C2 type instead of plugin defaults; its own layout/behaviour classes are untouched */ body.lgs-c2-reg .lgs-registration-wizard { font-family: var(--c2-sans); color: var(--c2-body); } body.lgs-c2-reg .lgs-registration-wizard h3 { font-family: var(--c2-serif); color: var(--c2-ink); } @media (max-width: 700px) { /* UX-9.1: the same 20px mobile gutter the spine uses */ body.lgs-c2-join .lgs-joinc2, body.lgs-c2-reg .lgs-regc2 { --c2-gutter: 20px; } body.lgs-c2-join a.lgs-joinc2__row { grid-template-columns: 1fr auto; padding: var(--s3) 0; } body.lgs-c2-join .lgs-joinc2__row-p { grid-column: 1 / -1; } body.lgs-c2-join .lgs-joinc2__go { display: block; width: 100%; text-align: center; box-sizing: border-box; } body.lgs-c2-join .lgs-joinc2__cta { display: block; } body.lgs-c2-join .lgs-joinc2__cta .lgs-joinc2__go + .lgs-joinc2__go { margin-top: var(--s2); } /* plan comparison: never a squeezed spreadsheet - the ruled summaries (same data source) replace the table */ body.lgs-c2-join .lgs-joinc2__tablewrap { display: none; } body.lgs-c2-join .lgs-joinc2__plansums { display: block; } body.lgs-c2-join .lgs-joinc2__hero-proof { max-width: none; } } /* 18b. R2: the wizard engine inherits C2 on the C2 page. The toolkit paints itself from its OWN css variables (declared on the form via inline style at (0,1,0)); re-declaring the same variables at higher specificity re-skins every button, card, badge and bar without touching a single toolkit rule. Scoped to the C2 registration page only: the toolkit's shipped palette still applies anywhere else. */ body.lgs-c2-reg .lgs-signup-form, body.lgs-c2-reg .lgs-registration-wizard, body.lgs-c2-reg .lgs-vendor-wizard { --lgs-primary: var(--c2-green-deep, #2E5530); --lgs-button: var(--c2-green-deep, #2E5530); --lgs-button-hover: var(--c2-green, #3A6B3C); --lgs-button-text: #FFFFFF; --lgs-form-bg: var(--c2-card, #FBF9F4); --lgs-card-bg: var(--c2-card, #FBF9F4); --lgs-border: var(--c2-hair, rgba(42, 38, 34, .12)); --lgs-input-bg: #FFFFFF; --lgs-input-text: var(--c2-ink, #2A2622); --lgs-input-border: var(--c2-rule, rgba(42, 38, 34, .22)); --lgs-progress: var(--c2-green, #3A6B3C); --lgs-progress-bg: var(--c2-wash, #ECE7DC); --lgs-text: var(--c2-body, #46413A); --lgs-radius: 2px; --lgs-accent: var(--c2-green-deep, #2E5530); --lgs-accent-2: var(--c2-green, #3A6B3C); --lgs-bg: var(--c2-card, #FBF9F4); --lgs-muted: var(--c2-muted, #6B655C); /* the market/food-hub signup form reads its own variable family */ --lgs-market-primary: var(--c2-green-deep, #2E5530); --lgs-market-primary-hover: var(--c2-green, #3A6B3C); --lgs-market-card-bg: var(--c2-card, #FBF9F4); --lgs-market-panel-bg: var(--c2-paper, #F3F1EC); --lgs-market-border: var(--c2-hair, rgba(42, 38, 34, .12)); --lgs-market-text: var(--c2-body, #46413A); --lgs-market-muted: var(--c2-muted, #6B655C); --lgs-market-radius: 2px; /* the toolkit's 2026-07 store-wide button harmonisation reads the GLOBAL :root tokens (--lgs-cta orange pill, Poppins/Jost faces) directly - re-scoped here so the one action language on C2 pages is the C2 one. Everywhere else the harmonisation stands. */ --lgs-cta: var(--c2-green-deep, #2E5530); --lgs-cta-hover: var(--c2-green, #3A6B3C); --lgs-radius-pill: 2px; --lgs-font-body: var(--c2-sans); --lgs-font-head: var(--c2-serif); } /* One page, one identity: the C2 head owns the H1 and lede, so the form's own shouty uppercase header (a second page title) stands down here. */ body.lgs-c2-reg .lgs-market-form-header { display: none; } body.lgs-c2-reg .lgs-registration-wizard .lgs-plan-card__price { color: var(--c2-ink); } body.lgs-c2-reg .lgs-registration-wizard .lgs-plan-card__title { color: var(--c2-ink); font-family: var(--c2-serif); } body.lgs-c2-reg .lgs-registration-wizard .lgs-step-header h3 { font-family: var(--c2-serif); color: var(--c2-ink); } /* ------------------------------------------------------------------ */ /* 19. UX-10 - the community contribution journey + contributor */ /* router. 40% editorial / 60% utility: civic, useful, warm, */ /* organised - never charity-sentimental, never government-cold. */ /* Paper, serif, ink, green, rules, real gutters. No cards, no icons. */ /* ------------------------------------------------------------------ */ body.lgs-c2-community .lgs-comm { --c2-gutter: 24px; max-width: var(--c2-max); margin: 0 auto; padding: 0 var(--c2-gutter) var(--s6); font-family: var(--c2-sans); font-size: 15.5px; line-height: 1.6; color: var(--c2-body); } body.lgs-c2-community .lgs-comm p { max-width: var(--c2-measure); } body.lgs-c2-community .lgs-comm h1 { font-family: var(--c2-serif); font-weight: 600; letter-spacing: -.01em; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; color: var(--c2-ink); margin: 0 0 var(--s2); } body.lgs-c2-community .lgs-comm h2 { font-family: var(--c2-serif); font-weight: 600; letter-spacing: -.01em; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.18; color: var(--c2-ink); margin: 0 0 var(--s2); max-width: 32ch; } body.lgs-c2-community .lgs-comm h3 { font-family: var(--c2-serif); font-weight: 600; font-size: 19px; line-height: 1.25; color: var(--c2-ink); margin: 0 0 var(--s1); } body.lgs-c2-community .lgs-comm__kicker { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--c2-green-deep); margin: 0 0 var(--s1); } /* the router: one small switchboard */ body.lgs-c2-comm-router .lgs-comm__router { padding: var(--s5) 0 var(--s5); max-width: 720px; } body.lgs-c2-community .lgs-comm__routes { border-top: 2px solid var(--c2-rule-strong); margin-top: var(--s3); } body.lgs-c2-community a.lgs-comm__route { display: grid; grid-template-columns: minmax(150px, 240px) 1fr auto; gap: var(--s1) var(--s3); align-items: baseline; border-bottom: 1px solid var(--c2-hair); padding: var(--s3) 0; text-decoration: none; color: var(--c2-body); min-height: 44px; } body.lgs-c2-community .lgs-comm__route-h { font-family: var(--c2-serif); font-weight: 600; font-size: 19px; color: var(--c2-green-deep); } body.lgs-c2-community a.lgs-comm__route:hover .lgs-comm__route-h { color: var(--c2-green); } body.lgs-c2-community .lgs-comm__route-go { color: var(--c2-green-deep); font-weight: 600; } /* community hero: argument left, three restrained facts right */ body.lgs-c2-community .lgs-comm__hero { padding: var(--s5) 0 var(--s4); } body.lgs-c2-community .lgs-comm__lede { font-family: var(--c2-serif); font-size: clamp(18px, 2vw, 22px); line-height: 1.35; color: var(--c2-ink); max-width: 34ch; margin: 0 0 var(--s2); } body.lgs-c2-community .lgs-comm__sub { font-size: 16px; max-width: 56ch; margin: 0 0 var(--s2); } body.lgs-c2-community .lgs-comm__subquiet { font-size: 14.5px; color: var(--c2-muted); max-width: 56ch; margin: 0; } body.lgs-c2-community .lgs-comm__hero-facts { border-top: 2px solid var(--c2-rule-strong); margin-top: var(--s4); max-width: 420px; } body.lgs-c2-community .lgs-comm__fact { border-bottom: 1px solid var(--c2-hair); padding: var(--s2) 0; } body.lgs-c2-community .lgs-comm__fact-h { display: block; font-family: var(--c2-serif); font-weight: 600; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; color: var(--c2-green-deep); margin: 0 0 2px; } body.lgs-c2-community .lgs-comm__fact-p { font-size: 14px; color: var(--c2-body); } @media (min-width: 900px) { body.lgs-c2-community .lgs-comm__hero { display: grid; grid-template-columns: minmax(0, 62%) minmax(280px, 1fr); gap: var(--s6); align-items: start; } body.lgs-c2-community .lgs-comm__hero-facts { margin-top: var(--s3); } } /* quiet utility + argument + value rows */ body.lgs-c2-community .lgs-comm__already { border-top: 1px solid var(--c2-rule); border-bottom: 1px solid var(--c2-hair); padding: var(--s2) 0; margin: 0 0 var(--s4); font-size: 14.5px; color: var(--c2-muted); max-width: none; } body.lgs-c2-community .lgs-comm__already a { color: var(--c2-green-deep); font-weight: 600; text-decoration: none; } body.lgs-c2-community .lgs-comm__why { margin: 0 0 var(--s4); } body.lgs-c2-community .lgs-comm__why p { margin: 0 0 var(--s2); } body.lgs-c2-community .lgs-comm__value { display: grid; grid-template-columns: 1fr; gap: 0 var(--s5); border-top: 2px solid var(--c2-rule-strong); margin: 0 0 var(--s4); } body.lgs-c2-community .lgs-comm__valuerow { border-bottom: 1px solid var(--c2-hair); padding: var(--s3) 0; } body.lgs-c2-community .lgs-comm__valuerow p { margin: 0; max-width: 52ch; } @media (min-width: 900px) { body.lgs-c2-community .lgs-comm__value { grid-template-columns: 1fr 1fr; } } body.lgs-c2-community .lgs-comm__many { margin: 0 0 var(--s4); } body.lgs-c2-community .lgs-comm__manyeg { color: var(--c2-muted); font-size: 14.5px; } body.lgs-c2-community .lgs-comm__boundary { background: var(--c2-card); border-top: 1px solid var(--c2-rule); padding: var(--s3); margin: 0 0 var(--s5); max-width: 70ch; } body.lgs-c2-community .lgs-comm__boundary a { color: var(--c2-green-deep); font-weight: 600; } /* the form: accessible utility, grouped fieldsets, honest fine print */ body.lgs-c2-community .lgs-comm__formwrap { border-top: 2px solid var(--c2-rule-strong); padding-top: var(--s4); margin: 0 0 var(--s5); } body.lgs-c2-community .lgs-comm__honesty { font-size: 14.5px; color: var(--c2-muted); max-width: 62ch; } body.lgs-c2-community .lgs-comm__error { background: #FBEEEE; border: 1px solid #F1B4B4; color: #B42318; padding: var(--s2) var(--s3); margin: var(--s2) 0; max-width: 62ch; } body.lgs-c2-community .lgs-comm__form { max-width: 680px; } body.lgs-c2-community .lgs-comm__fs { border: 0; border-top: 1px solid var(--c2-rule); padding: var(--s3) 0 var(--s2); margin: 0 0 var(--s2); } body.lgs-c2-community .lgs-comm__fs legend { font-family: var(--c2-serif); font-weight: 600; font-size: 18px; color: var(--c2-ink); padding-right: var(--s2); } body.lgs-c2-community .lgs-comm__fine { font-size: 13.5px; color: var(--c2-muted); max-width: 58ch; } body.lgs-c2-community .lgs-comm__row { margin: 0 0 var(--s2); } body.lgs-c2-community .lgs-comm__row label { display: block; font-weight: 600; color: var(--c2-ink); font-size: 14.5px; margin: 0 0 4px; } body.lgs-c2-community .lgs-comm__req { color: var(--c2-green-deep); } body.lgs-c2-community .lgs-comm__row input[type="text"], body.lgs-c2-community .lgs-comm__row input[type="email"], body.lgs-c2-community .lgs-comm__row input[type="url"], body.lgs-c2-community .lgs-comm__row select, body.lgs-c2-community .lgs-comm__row textarea { width: 100%; box-sizing: border-box; background: #fff; color: var(--c2-ink); border: 1px solid var(--c2-rule); border-radius: 2px; padding: 10px 12px; font: inherit; font-size: 15px; min-height: 44px; } body.lgs-c2-community .lgs-comm__row textarea { min-height: 96px; } body.lgs-c2-community .lgs-comm__row :is(input, select, textarea):focus { outline: 2px solid var(--c2-green); outline-offset: 1px; } body.lgs-c2-community .lgs-comm__radios label { display: block; font-weight: 500; color: var(--c2-body); padding: 8px 0; min-height: 24px; } body.lgs-c2-community .lgs-comm__radios input { margin-right: 8px; } body.lgs-c2-community .lgs-comm__hp { position: absolute; left: -9999px; top: -9999px; } body.lgs-c2-community .lgs-comm__act { border-top: 1px dashed var(--c2-hair); padding-top: var(--s2); margin-top: var(--s2); } body.lgs-c2-community .lgs-comm__addact { background: none; border: 1px solid var(--c2-rule); border-radius: 2px; color: var(--c2-green-deep); font: inherit; font-weight: 600; font-size: 14px; padding: 10px 18px; min-height: 44px; cursor: pointer; } body.lgs-c2-community .lgs-comm__addact:hover { background: var(--c2-wash); } body.lgs-c2-community .lgs-comm__addact:disabled { opacity: .5; cursor: default; } body.lgs-c2-community .lgs-comm__updating { font-weight: 650; color: var(--c2-ink); background: var(--c2-wash); padding: var(--s1) var(--s2); } body.lgs-c2-community .lgs-comm__submit { background: var(--c2-green-deep); color: #fff; border: 0; border-radius: 2px; font: inherit; font-weight: 600; font-size: 15px; padding: 12px 26px; min-height: 44px; cursor: pointer; } body.lgs-c2-community .lgs-comm__submit:hover { background: var(--c2-green); } /* mission close + success */ body.lgs-c2-community .lgs-comm__mission { border-top: 2px solid var(--c2-rule-strong); padding-top: var(--s4); } body.lgs-c2-community .lgs-comm__mission p { font-family: var(--c2-serif); font-size: 17.5px; color: var(--c2-ink); max-width: 54ch; } body.lgs-c2-community .lgs-comm__success { padding: var(--s6) 0; max-width: 720px; } body.lgs-c2-community .lgs-comm__successlinks a { display: inline-block; margin-right: var(--s3); color: var(--c2-green-deep); font-weight: 600; text-decoration: none; min-height: 44px; padding-top: var(--s2); } /* the quiet keep-current line on group profiles */ .lgs-grp__keep { font-size: 14px; color: var(--c2-muted, #6B655C); border-top: 1px solid var(--c2-hair, rgba(42,38,34,.12)); padding-top: 12px; } .lgs-grp__keep a { color: var(--c2-green-deep, #2E5530); font-weight: 600; text-decoration: none; } .lgs-join__add a { color: var(--c2-green-deep, #2E5530); font-weight: 600; text-decoration: none; } @media (max-width: 700px) { body.lgs-c2-community .lgs-comm { --c2-gutter: 20px; } body.lgs-c2-community a.lgs-comm__route { grid-template-columns: 1fr auto; } body.lgs-c2-community .lgs-comm__route-p { grid-column: 1 / -1; } body.lgs-c2-community .lgs-comm__hero-facts { max-width: none; } body.lgs-c2-community .lgs-comm__submit { display: block; width: 100%; } } /* ------------------------------------------------------------------ */ /* 20. UX-11 - verified group organisers: the claim door and the */ /* organiser workspace. 10% editorial / 90% utility. The dashboard is */ /* a working surface, not a marketing page: one column, real rules, */ /* labels above inputs, 44px targets, nothing that looks like a SaaS */ /* console (no cards, no tiles, no charts, no badges, no chrome). */ /* ------------------------------------------------------------------ */ body.lgs-c2-gdash .lgs-gdash { --c2-gutter: 24px; max-width: 780px; margin: 0 auto; padding: var(--s5) var(--c2-gutter) var(--s7); font-family: var(--c2-sans); font-size: 15.5px; line-height: 1.6; color: var(--c2-body); } body.lgs-c2-gdash .lgs-gdash p { max-width: var(--c2-measure); } body.lgs-c2-gdash .lgs-gdash h1 { font-family: var(--c2-serif); font-weight: 600; letter-spacing: -.01em; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.14; color: var(--c2-ink); margin: 0 0 var(--s1); } body.lgs-c2-gdash .lgs-gdash h2 { font-family: var(--c2-serif); font-weight: 600; letter-spacing: -.01em; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.2; color: var(--c2-ink); margin: var(--s5) 0 var(--s2); } body.lgs-c2-gdash .lgs-gdash h3 { font-family: var(--c2-sans); font-weight: 650; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--c2-muted); margin: 0 0 var(--s0); } body.lgs-c2-gdash .lgs-gdash__kicker { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--c2-green-deep); margin: 0 0 var(--s1); } body.lgs-c2-gdash .lgs-gdash__kicker a { color: inherit; text-decoration: none; } body.lgs-c2-gdash .lgs-gdash__view { margin: 0 0 var(--s3); } body.lgs-c2-gdash .lgs-gdash__view a { color: var(--c2-green-deep); font-weight: 600; text-decoration: none; } /* saved / posted confirmation: a ruled line, never a toast */ body.lgs-c2-gdash .lgs-gdash__notice { border-left: 3px solid var(--c2-green); background: var(--c2-wash); padding: var(--s2) var(--s3); margin: 0 0 var(--s3); color: var(--c2-ink); font-weight: 600; } /* the workspace nav: ruled tabs that WRAP - never a horizontal scroller */ body.lgs-c2-gdash .lgs-gdash__nav { display: flex; flex-wrap: wrap; gap: 0 var(--s4); border-top: 2px solid var(--c2-rule-strong); border-bottom: 1px solid var(--c2-rule); margin: var(--s3) 0 var(--s4); } body.lgs-c2-gdash .lgs-gdash__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--c2-body); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } body.lgs-c2-gdash .lgs-gdash__nav a:hover { color: var(--c2-green-deep); } body.lgs-c2-gdash .lgs-gdash__nav a[aria-current="page"] { color: var(--c2-ink); border-bottom-color: var(--c2-green); } /* overview: two plain figures, no dashboard tiles */ body.lgs-c2-gdash .lgs-gdash__stats { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: 0 0 var(--s4); } body.lgs-c2-gdash .lgs-gdash__stat { margin: 0; font-size: 15.5px; color: var(--c2-muted); } body.lgs-c2-gdash .lgs-gdash__stat strong { display: block; font-family: var(--c2-serif); font-weight: 600; font-size: clamp(30px, 4vw, 40px); line-height: 1.05; color: var(--c2-ink); } body.lgs-c2-gdash .lgs-gdash__primary { margin: 0 0 var(--s5); } /* status rows + update history share one ruled list grammar */ body.lgs-c2-gdash .lgs-gdash__rows { border-top: 1px solid var(--c2-rule); } body.lgs-c2-gdash .lgs-gdash__row { border-bottom: 1px solid var(--c2-hair); padding: var(--s3) 0; } body.lgs-c2-gdash .lgs-gdash__row p { margin: 0; } /* groups-you-manage list */ body.lgs-c2-gdash .lgs-gdash__list { border-top: 2px solid var(--c2-rule-strong); margin-top: var(--s3); } body.lgs-c2-gdash a.lgs-gdash__grouprow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3); border-bottom: 1px solid var(--c2-hair); padding: var(--s3) 0; min-height: 44px; text-decoration: none; color: var(--c2-body); } body.lgs-c2-gdash .lgs-gdash__groupname { font-family: var(--c2-serif); font-weight: 600; font-size: 19px; color: var(--c2-ink); } body.lgs-c2-gdash .lgs-gdash__go { color: var(--c2-green-deep); font-weight: 600; } body.lgs-c2-gdash a.lgs-gdash__grouprow:hover .lgs-gdash__groupname { color: var(--c2-green-deep); } /* forms: label above field, full width, honest sizing */ body.lgs-c2-gdash .lgs-gdash__form { max-width: 560px; margin: 0 0 var(--s5); } body.lgs-c2-gdash .lgs-gdash__field { margin: 0 0 var(--s3); } body.lgs-c2-gdash .lgs-gdash__field label { display: block; font-weight: 650; font-size: 14px; color: var(--c2-ink); margin-bottom: var(--s0); } body.lgs-c2-gdash .lgs-gdash__form input[type="text"], body.lgs-c2-gdash .lgs-gdash__form input[type="url"], body.lgs-c2-gdash .lgs-gdash__form input[type="email"], body.lgs-c2-gdash .lgs-gdash__form select, body.lgs-c2-gdash .lgs-gdash__form textarea { display: block; width: 100%; box-sizing: border-box; min-height: 44px; font-family: var(--c2-sans); font-size: 16px; line-height: 1.5; color: var(--c2-ink); background: #fff; border: 1px solid var(--c2-rule); border-radius: 2px; padding: 10px 12px; } body.lgs-c2-gdash .lgs-gdash__form textarea { min-height: 120px; resize: vertical; } body.lgs-c2-gdash .lgs-gdash__form input:focus, body.lgs-c2-gdash .lgs-gdash__form select:focus, body.lgs-c2-gdash .lgs-gdash__form textarea:focus { outline: 2px solid var(--c2-green); outline-offset: 1px; border-color: var(--c2-green); } body.lgs-c2-gdash .lgs-gdash__form input[type="file"] { display: block; max-width: 100%; font-size: 15px; padding: var(--s1) 0; } body.lgs-c2-gdash .lgs-gdash__fine { display: block; font-size: 13.5px; color: var(--c2-muted); margin: var(--s0) 0 0; max-width: 58ch; } body.lgs-c2-gdash .lgs-gdash__consent { margin: 0 0 var(--s3); } body.lgs-c2-gdash .lgs-gdash__consent label { display: flex; gap: var(--s1); align-items: flex-start; font-weight: 600; color: var(--c2-ink); min-height: 44px; } body.lgs-c2-gdash .lgs-gdash__consent input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; } /* actions */ body.lgs-c2-gdash .lgs-gdash__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s4) 0 0; } body.lgs-c2-gdash a.lgs-gdash__btn, body.lgs-c2-gdash .lgs-gdash__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-family: var(--c2-sans); font-size: 16px; font-weight: 650; line-height: 1.2; color: #fff; background: var(--c2-green-deep); border: 1px solid var(--c2-green-deep); border-radius: 2px; padding: 11px 20px; text-decoration: none; cursor: pointer; } body.lgs-c2-gdash a.lgs-gdash__btn:hover, body.lgs-c2-gdash .lgs-gdash__btn:hover { background: var(--c2-green); border-color: var(--c2-green); color: #fff; } body.lgs-c2-gdash a.lgs-gdash__btn--quiet, body.lgs-c2-gdash .lgs-gdash__btn--quiet { color: var(--c2-green-deep); background: transparent; } body.lgs-c2-gdash a.lgs-gdash__btn--quiet:hover, body.lgs-c2-gdash .lgs-gdash__btn--quiet:hover { color: #fff; } body.lgs-c2-gdash .lgs-gdash__cancel { color: var(--c2-muted); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } /* activities list */ body.lgs-c2-gdash .lgs-gdash__acts { border-top: 2px solid var(--c2-rule-strong); } body.lgs-c2-gdash .lgs-gdash__act { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3); border-bottom: 1px solid var(--c2-hair); padding: var(--s3) 0; } body.lgs-c2-gdash .lgs-gdash__actmain { display: flex; flex-direction: column; gap: 2px; } body.lgs-c2-gdash .lgs-gdash__actmain strong { font-family: var(--c2-serif); font-weight: 600; font-size: 18px; color: var(--c2-ink); } body.lgs-c2-gdash .lgs-gdash__actmain span { font-size: 14.5px; color: var(--c2-muted); } body.lgs-c2-gdash .lgs-gdash__actstatus { color: var(--c2-green-deep); font-weight: 600; } body.lgs-c2-gdash .lgs-gdash__actedit { color: var(--c2-green-deep); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } /* photos */ body.lgs-c2-gdash .lgs-gdash__photo { margin: var(--s2) 0 var(--s3); } body.lgs-c2-gdash .lgs-gdash__photo img { max-width: 100%; height: auto; display: block; border: 1px solid var(--c2-hair); } body.lgs-c2-gdash .lgs-gdash__gallery { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s2) 0 var(--s4); } body.lgs-c2-gdash .lgs-gdash__galitem { width: 120px; } body.lgs-c2-gdash .lgs-gdash__galitem img { display: block; width: 100%; height: auto; border: 1px solid var(--c2-hair); } body.lgs-c2-gdash .lgs-gdash__galremove { background: none; border: 0; padding: var(--s1) 0; min-height: 44px; font-family: var(--c2-sans); font-size: 14px; font-weight: 600; color: var(--c2-muted); cursor: pointer; } body.lgs-c2-gdash .lgs-gdash__galremove:hover { color: var(--c2-ink); text-decoration: underline; } /* sign-in / denial: quiet, never alarming */ body.lgs-c2-gdash .lgs-gdash__deny { padding: var(--s5) 0 var(--s7); max-width: 560px; } /* the group photo on public group pages */ .lgs-grp__photo { margin: 0 0 var(--s3, 16px); } .lgs-grp__photo img { display: block; width: 100%; height: auto; max-width: 640px; border: 1px solid rgba(42, 38, 34, .12); } /* the claim invitation on unclaimed group profiles: a quiet ruled strip in the profile grammar - never a promotional banner */ .lgs-grp__claim { border-top: 1px solid rgba(42, 38, 34, .12); padding-top: 12px; margin-top: 12px; font-size: 14px; color: var(--c2-muted, #6B655C); } .lgs-grp__claim strong { display: block; color: var(--c2-ink, #2A2622); font-weight: 650; margin-bottom: 2px; } .lgs-grp__claim a { color: var(--c2-green-deep, #2E5530); font-weight: 600; text-decoration: none; } /* the claim form reuses the community page grammar (section 19); only the evidence block needs its own restraint */ body.lgs-c2-gclaim .lgs-gclaim { margin-top: var(--s4); } body.lgs-c2-gclaim .lgs-gclaim__what { border-top: 2px solid var(--c2-rule-strong); padding-top: var(--s3); margin-top: var(--s4); } body.lgs-c2-gclaim .lgs-gclaim__what li { margin-bottom: var(--s1); } @media (max-width: 700px) { body.lgs-c2-gdash .lgs-gdash { --c2-gutter: 20px; padding-top: var(--s4); } body.lgs-c2-gdash .lgs-gdash__nav { gap: 0 var(--s3); } body.lgs-c2-gdash .lgs-gdash__nav a { font-size: 14.5px; } body.lgs-c2-gdash .lgs-gdash__stats { gap: var(--s3) var(--s5); } body.lgs-c2-gdash .lgs-gdash__btn { width: 100%; } body.lgs-c2-gdash .lgs-gdash__actions { gap: var(--s2); } body.lgs-c2-gdash .lgs-gdash__galitem { width: calc(50% - var(--s2)); } } /* UX-12: the organiser gallery, published (section 20 continues). A bounded thumbnail row on public group pages - photographs, not chrome */ .lgs-grp__gallery { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; } .lgs-grp__galitem { margin: 0; width: 150px; } .lgs-grp__galitem img { display: block; width: 100%; height: 110px; object-fit: cover; border: 1px solid rgba(42, 38, 34, .12); } @media (max-width: 700px) { .lgs-grp__galitem { width: calc(33.4% - 8px); } .lgs-grp__galitem img { height: 92px; } } /* ------------------------------------------------------------------ */ /* 21. UX-13 - Features + the authoring editor + Editorial Assignment */ /* landing. Public feature: more editorial than entity utility, still */ /* C2 - paper, ink, serif identity, rules, real photographs; no */ /* magazine excess. Editor: 20% editorial / 80% utility - a thoughtful */ /* local editor asking useful questions, never a CMS. */ /* ------------------------------------------------------------------ */ .lgs-feature { border-top: 2px solid var(--c2-rule-strong, #2A2622); margin: 32px 0 24px; padding-top: 16px; } .lgs-feature__kicker { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--c2-green-deep, #2E5530); margin: 0 0 8px; } .lgs-feature__headline { font-family: var(--c2-serif, Georgia, serif); font-weight: 600; letter-spacing: -.01em; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--c2-ink, #2A2622); margin: 0 0 10px; } .lgs-feature__intro { font-family: var(--c2-serif, Georgia, serif); font-size: 18px; line-height: 1.5; color: var(--c2-ink, #2A2622); max-width: 58ch; margin: 0 0 16px; } .lgs-feature__lead { margin: 0 0 20px; } .lgs-feature__lead img { display: block; width: 100%; max-width: 760px; height: auto; border: 1px solid rgba(42,38,34,.12); } .lgs-feature__lead figcaption, .lgs-feature__photo figcaption { font-size: 13px; color: var(--c2-muted, #6B655C); padding-top: 6px; max-width: 60ch; } .lgs-feature__q { font-family: var(--c2-serif, Georgia, serif); font-weight: 600; font-size: 19px; color: var(--c2-green-deep, #2E5530); margin: 22px 0 6px; } .lgs-feature p { max-width: 62ch; line-height: 1.65; } .lgs-feature__quote { border-left: 3px solid var(--c2-green, #3A6B3C); margin: 20px 0; padding: 4px 0 4px 16px; } .lgs-feature__quote p { font-family: var(--c2-serif, Georgia, serif); font-size: 19px; color: var(--c2-ink, #2A2622); margin: 0; } .lgs-feature__photos { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; } .lgs-feature__photo { margin: 0; width: 220px; } .lgs-feature__photo img { display: block; width: 100%; height: 150px; object-fit: cover; border: 1px solid rgba(42,38,34,.12); } .lgs-feature__nowblock { background: var(--c2-kraft, #EFE9DC); padding: 14px 18px; margin: 20px 0; max-width: 640px; } .lgs-feature__nowblock h3 { font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-green-deep, #2E5530); margin: 0 0 6px; } .lgs-feature__traders, .lgs-feature__acts { font-size: 14.5px; } .lgs-feature__traders a, .lgs-feature__acts a { color: var(--c2-green-deep, #2E5530); font-weight: 600; text-decoration: none; } .lgs-feature__cta { margin: 18px 0 8px; } .lgs-feature__btn, a.lgs-feature__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; background: var(--c2-green-deep, #2E5530); color: #fff; font-weight: 650; font-size: 15.5px; text-decoration: none; border-radius: 2px; } .lgs-feature__attr { font-size: 13.5px; color: var(--c2-muted, #6B655C); font-style: italic; } /* town card: one item of life, never a feed */ .lgs-town__feature { border-top: 2px solid var(--c2-rule-strong, #2A2622); padding-top: 14px; margin: 28px 0; } .lgs-town__feature-img img { display: block; width: 100%; max-width: 680px; height: auto; border: 1px solid rgba(42,38,34,.12); } .lgs-town__feature-h { font-family: var(--c2-serif, Georgia, serif); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; margin: 12px 0 6px; } .lgs-town__feature-h a { color: var(--c2-ink, #2A2622); text-decoration: none; } .lgs-town__feature-intro { max-width: 60ch; line-height: 1.6; } .lgs-town__feature-attr { font-size: 14px; color: var(--c2-muted, #6B655C); } .lgs-town__feature-attr a { color: var(--c2-green-deep, #2E5530); font-weight: 600; text-decoration: none; } /* the editor + invitation landing */ body.lgs-c2-feated .lgs-feated { max-width: 720px; margin: 0 auto; padding: 32px 24px 72px; font-family: var(--c2-sans, sans-serif); font-size: 15.5px; line-height: 1.6; color: var(--c2-body, #46413A); } body.lgs-c2-feated .lgs-feated h1 { font-family: var(--c2-serif, Georgia, serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.12; color: var(--c2-ink, #2A2622); margin: 0 0 10px; } body.lgs-c2-feated .lgs-feated h2 { font-family: var(--c2-serif, Georgia, serif); font-weight: 600; font-size: 21px; margin: 30px 0 6px; color: var(--c2-ink, #2A2622); } body.lgs-c2-feated .lgs-feated__kicker { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--c2-green-deep, #2E5530); margin: 0 0 8px; } body.lgs-c2-feated .lgs-feated__lede, body.lgs-c2-feated .lgs-feated__why { font-family: var(--c2-serif, Georgia, serif); font-size: 17.5px; color: var(--c2-ink, #2A2622); max-width: 56ch; } body.lgs-c2-feated .lgs-feated__notice { border-left: 3px solid var(--c2-green, #3A6B3C); background: var(--c2-wash, #ECE7DC); padding: 12px 16px; margin: 0 0 16px; font-weight: 600; color: var(--c2-ink, #2A2622); } body.lgs-c2-feated .lgs-feated__field { margin: 0 0 18px; } body.lgs-c2-feated .lgs-feated__field label { display: block; font-weight: 650; font-size: 15px; color: var(--c2-ink, #2A2622); margin-bottom: 4px; } body.lgs-c2-feated .lgs-feated__fine { display: block; font-size: 13.5px; color: var(--c2-muted, #6B655C); margin: 2px 0 6px; max-width: 60ch; } body.lgs-c2-feated .lgs-feated input[type="text"], body.lgs-c2-feated .lgs-feated textarea { display: block; width: 100%; box-sizing: border-box; min-height: 44px; font-family: var(--c2-sans, sans-serif); font-size: 16px; line-height: 1.5; color: var(--c2-ink, #2A2622); background: #fff; border: 1px solid rgba(42,38,34,.22); border-radius: 2px; padding: 10px 12px; } body.lgs-c2-feated .lgs-feated textarea { min-height: 120px; resize: vertical; } body.lgs-c2-feated .lgs-feated input:focus, body.lgs-c2-feated .lgs-feated textarea:focus { outline: 2px solid var(--c2-green, #3A6B3C); outline-offset: 1px; } body.lgs-c2-feated .lgs-feated__checks label { display: flex; gap: 8px; align-items: flex-start; min-height: 36px; } body.lgs-c2-feated .lgs-feated__consent { border-top: 1px solid rgba(42,38,34,.22); margin: 26px 0 0; padding-top: 16px; } body.lgs-c2-feated .lgs-feated__consent label { display: flex; gap: 8px; align-items: flex-start; min-height: 44px; } body.lgs-c2-feated .lgs-feated__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 24px 0 8px; } body.lgs-c2-feated .lgs-feated__btn, body.lgs-c2-feated a.lgs-feated__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 22px; background: var(--c2-green-deep, #2E5530); color: #fff; border: 1px solid var(--c2-green-deep, #2E5530); font-weight: 650; font-size: 16px; border-radius: 2px; cursor: pointer; text-decoration: none; } body.lgs-c2-feated .lgs-feated__btn--quiet { background: transparent; color: var(--c2-green-deep, #2E5530); } body.lgs-c2-feated .lgs-feated__gallery { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; } body.lgs-c2-feated .lgs-feated__galitem { width: 200px; font-size: 13px; } body.lgs-c2-feated .lgs-feated__galitem img { display: block; width: 100%; height: auto; border: 1px solid rgba(42,38,34,.12); } body.lgs-c2-feated .lgs-feated__cap input { min-height: 38px; margin-top: 2px; } body.lgs-c2-feated .lgs-feated__declineform { margin-top: 18px; } body.lgs-c2-feated .lgs-feated__decline { background: none; border: 0; padding: 8px 0; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--c2-muted, #6B655C); cursor: pointer; text-decoration: underline; } body.lgs-c2-feated .lgs-feated__previewbox { border: 1px dashed rgba(42,38,34,.3); padding: 4px 20px 20px; background: #fff; } @media (max-width: 700px) { body.lgs-c2-feated .lgs-feated { padding: 24px 20px 56px; } body.lgs-c2-feated .lgs-feated__btn { width: 100%; } body.lgs-c2-feated .lgs-feated__galitem { width: calc(50% - 8px); } .lgs-feature__photo { width: calc(50% - 8px); } } /* ------------------------------------------------------------------ */ /* 22. UX-14 - account/commerce containment (body.lgs-c2-acct) */ /* */ /* Woo/Dokan/Elementor surfaces the product still needs, brought into */ /* C2's colour, type, button, form and notice language via SCOPED */ /* overrides. No plugin source is modified; anything here loses the */ /* moment a surface gets its own C2 renderer. */ /* ------------------------------------------------------------------ */ /* Dokan's palette ships as CSS custom properties (:root, navy/orange #1B233B / #F05025). Re-declaring them at body level wins for every descendant, so the whole back office recolours in one move. */ body.lgs-c2-acct { --dokan-sidebar-background-color: #2A2622; --dokan-sidebar-hover-background-color: #3A6B3C; --dokan-sidebar-text-color: #F3F1EC; --dokan-link-color: #3A6B3C; --dokan-link-hover-color: #2E5530; --dokan-button-background-color: #3A6B3C; --dokan-button-hover-background-color: #2E5530; --dokan-button-text-color: #FBF9F4; --dokan-button-border-color: #3A6B3C; --dokan-button-hover-border-color: #2E5530; } /* Typography: the content column reads as LGS, not as a plugin. */ body.lgs-c2-acct .dokan-dashboard-wrap, body.lgs-c2-acct .woocommerce, body.lgs-c2-acct .woocommerce-page { font-family: var(--c2-sans); color: var(--c2-body); } body.lgs-c2-acct .dokan-dashboard-wrap h1, body.lgs-c2-acct .dokan-dashboard-wrap h2, body.lgs-c2-acct .dokan-dashboard-wrap h3, body.lgs-c2-acct .woocommerce h2, body.lgs-c2-acct .woocommerce h3 { font-family: var(--c2-serif); color: var(--c2-ink); font-weight: 500; } /* The workspace header (rendered by LGS_C2_Account, the page's H1). */ .lgs-acct__head { margin: 0 0 var(--s4); padding: var(--s4) 0 var(--s3); border-bottom: 1px solid var(--c2-rule); } .lgs-acct__kicker { font-family: var(--c2-sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-muted); margin: 0 0 var(--s0); } .lgs-acct__h1 { font-family: var(--c2-serif); font-size: 28px; line-height: 1.2; color: var(--c2-ink); margin: 0; } .lgs-acct__view { margin: var(--s1) 0 0; font-size: 14px; } .lgs-acct__view a { color: var(--c2-green); text-decoration: none; } .lgs-acct__view a:hover { text-decoration: underline; } /* Buttons: one family (§27). Primary = C2 green; Woo alt included. */ body.lgs-c2-acct .dokan-btn, body.lgs-c2-acct .dokan-btn-theme, body.lgs-c2-acct input[type="submit"].dokan-btn, body.lgs-c2-acct .woocommerce .button, body.lgs-c2-acct .woocommerce button.button, body.lgs-c2-acct .woocommerce a.button, body.lgs-c2-acct .woocommerce input.button, body.lgs-c2-acct .woocommerce #respond input#submit, body.lgs-c2-acct .woocommerce button.button.alt, body.lgs-c2-acct .woocommerce a.button.alt { background: var(--c2-green); border-color: var(--c2-green); color: #FBF9F4; border-radius: 8px; font-family: var(--c2-sans); font-weight: 600; min-height: 44px; line-height: 1.2; padding: 12px 20px; text-shadow: none; box-shadow: none; } body.lgs-c2-acct .dokan-btn:hover, body.lgs-c2-acct .woocommerce .button:hover, body.lgs-c2-acct .woocommerce button.button.alt:hover, body.lgs-c2-acct .woocommerce a.button.alt:hover { background: var(--c2-green-deep); border-color: var(--c2-green-deep); color: #FBF9F4; } body.lgs-c2-acct .dokan-btn:focus-visible, body.lgs-c2-acct .woocommerce .button:focus-visible { outline: 3px solid var(--c2-ink); outline-offset: 2px; } /* Forms (§28): visible labels stay; fields get C2 treatment. */ body.lgs-c2-acct .dokan-form-control, body.lgs-c2-acct .woocommerce .input-text, body.lgs-c2-acct .woocommerce select, body.lgs-c2-acct .woocommerce textarea { border: 1px solid #C9C3B8; border-radius: 8px; background: #FFFFFF; color: var(--c2-ink); font-family: var(--c2-sans); font-size: 16px; padding: 10px 12px; min-height: 44px; box-shadow: none; } body.lgs-c2-acct .dokan-form-control:focus, body.lgs-c2-acct .woocommerce .input-text:focus { outline: 3px solid var(--c2-green); outline-offset: 1px; border-color: var(--c2-green); } /* Notices (§26): one calm family, readable without colour. */ body.lgs-c2-acct .woocommerce-message, body.lgs-c2-acct .woocommerce-info, body.lgs-c2-acct .woocommerce-error, body.lgs-c2-acct .dokan-alert, body.lgs-c2-acct .dokan-message, body.lgs-c2-acct .dokan-error, body.lgs-c2-acct .dokan-info { background: var(--c2-card); border: 0; border-left: 4px solid var(--c2-green); border-radius: 6px; color: var(--c2-body); font-family: var(--c2-sans); padding: 12px 16px; box-shadow: none; } body.lgs-c2-acct .woocommerce-error, body.lgs-c2-acct .dokan-alert-danger, body.lgs-c2-acct .dokan-error { border-left-color: #8C2F2F; } body.lgs-c2-acct .woocommerce-message::before, body.lgs-c2-acct .woocommerce-info::before, body.lgs-c2-acct .woocommerce-error::before { color: var(--c2-muted); } /* My-account navigation: quiet workspace rail, not tabs. */ body.lgs-c2-acct .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-right: 1px solid var(--c2-hair); } body.lgs-c2-acct .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--c2-hair); } body.lgs-c2-acct .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 14px; color: var(--c2-body); font-family: var(--c2-sans); text-decoration: none; } body.lgs-c2-acct .woocommerce-MyAccount-navigation li.is-active a, body.lgs-c2-acct .woocommerce-MyAccount-navigation li a:hover { color: var(--c2-green-deep); background: var(--c2-card); } /* Tables (§41): never squeezed - scroll within their own container. */ body.lgs-c2-acct .dokan-table-wrap, body.lgs-c2-acct .woocommerce-orders-table-wrapper { overflow-x: auto; } body.lgs-c2-acct .dokan-table, body.lgs-c2-acct .woocommerce table.shop_table { border: 0; border-collapse: collapse; font-family: var(--c2-sans); font-size: 14.5px; } body.lgs-c2-acct .woocommerce table.shop_table th, body.lgs-c2-acct .dokan-table th { font-family: var(--c2-sans); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--c2-muted); border-bottom: 1px solid var(--c2-rule); } body.lgs-c2-acct .woocommerce table.shop_table td, body.lgs-c2-acct .dokan-table td { border-bottom: 1px solid var(--c2-hair); } /* Checkout (§15): plain and trustworthy; kill promo/side clutter. */ body.lgs-c2-acct.woocommerce-checkout #order_review_heading, body.lgs-c2-acct.woocommerce-checkout h3 { font-family: var(--c2-serif); color: var(--c2-ink); } body.lgs-c2-acct.woocommerce-checkout .woocommerce { max-width: 860px; margin: 0 auto; } /* Login / registration pages: centre the single job, C2 fields. */ body.lgs-c2-acct .lgs-shell__main .elementor-widget-container form, body.lgs-c2-acct form.dokan-vendor-register { max-width: 480px; } /* 390 (§40): one column, full-width controls, real gutters. */ @media (max-width: 700px) { body.lgs-c2-acct .dokan-dash-sidebar { width: 100%; float: none; } body.lgs-c2-acct .dokan-dashboard-content { width: 100%; float: none; padding: 0 var(--c2-gutter); } body.lgs-c2-acct .woocommerce-MyAccount-navigation, body.lgs-c2-acct .woocommerce-MyAccount-content { width: 100%; float: none; } body.lgs-c2-acct .woocommerce-MyAccount-navigation ul { border-right: 0; border-bottom: 1px solid var(--c2-rule); } body.lgs-c2-acct .dokan-btn, body.lgs-c2-acct .woocommerce .button { width: 100%; text-align: center; } .lgs-acct__h1 { font-size: 24px; } } /* 22b. COMM-2 (2026-08-17) - my-account nav repair (page 411). The Elementor page CSS for 411 ships text-decoration:line-through + font "Jost" on every account-nav link - a runtime-confirmed defect. Neutralised at containment scope with !important because Elementor's generated selector chain outweighs any sane scoped selector; the Elementor mechanism itself stays untouched. */ body.lgs-c2-acct .woocommerce-MyAccount-navigation ul li a { font-family: var(--c2-sans) !important; text-decoration: none !important; } body.lgs-c2-acct .woocommerce-MyAccount-navigation ul li a:hover, body.lgs-c2-acct .woocommerce-MyAccount-navigation ul li.is-active a { text-decoration: underline !important; } /* 22c. COMM-2 - my-account containment finishing. The Elementor-411 page CSS paints the account nav as heavy green pill blocks with an orange active state, and Dokan's own .dokan-btn-theme keeps its orange on the my-account greeting button - both outweigh section 22's quieter intent, hence scoped !important. Reading order and markup untouched. */ body.lgs-c2-acct .woocommerce-MyAccount-navigation ul { border: 0; } body.lgs-c2-acct .woocommerce-MyAccount-navigation ul li { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--c2-rule) !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; } body.lgs-c2-acct .woocommerce-MyAccount-navigation ul li a { display: block; background: transparent !important; color: var(--c2-ink) !important; padding: 10px 2px !important; } body.lgs-c2-acct .woocommerce-MyAccount-navigation ul li.is-active { background: transparent !important; } body.lgs-c2-acct .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--c2-green) !important; font-weight: 700; } body.lgs-c2-acct .dokan-btn-theme, body.lgs-c2-acct a.dokan-btn.vendor-dashboard { background: var(--c2-green) !important; border-color: var(--c2-green) !important; color: #FBF9F4 !important; } body.lgs-c2-acct .woocommerce-MyAccount-content a:not(.button):not(.dokan-btn) { color: var(--c2-green); } /* The floating cart has no place on account/workspace surfaces (it stays on shop, cart and checkout). */ body.lgs-c2-acct.woocommerce-account #fkcart-floating-toggler, body.lgs-c2-acct.dokan-dashboard #fkcart-floating-toggler, body.lgs-c2-gdash #fkcart-floating-toggler { display: none; } /* 22d. COMM-2 - Dokan 5 dashboard shell containment. Computed-style proof (job-131 captures): the new fixed sidebar (.dokan-frontend- sidebar, z-20, 100vh) overlays the static LGS shell header; the dashboard's own top bar button carries a pink border from a theme base style; the LEGACY .dokan-dash-sidebar keeps Dokan navy because its CSS uses literals, not the --dokan-* props section 22 re- declares. All presentation, all scoped; no plugin source touched. */ body.lgs-c2-acct.dokan-dashboard .lgs-shell__header { position: sticky; top: 0; z-index: 40; background: var(--c2-paper, #F3F1EC); } body.lgs-c2-acct.dokan-dashboard .dokan-frontend-sidebar { top: 65px !important; bottom: 0 !important; height: auto !important; z-index: 30 !important; } body.lgs-c2-acct.dokan-dashboard main > header button { border-color: transparent !important; } body.lgs-c2-acct .dokan-dash-sidebar, body.lgs-c2-acct .dokan-dash-sidebar ul.dokan-dashboard-menu { background-color: #2A2622 !important; } /* 24. Owner homepage review (2026-08-18). Three findings: a) The Hearabouts block inside the homepage paper band drew its OWN bottom rule + margin while the band drew ANOTHER - two hairlines with dead space between. One band, one rule. b) The wordmark read too small against the page. */ body.lgs-c2-home .lgs-home__paper .lgs-ha { border-bottom: 0; margin-bottom: 0; padding-bottom: var(--s2); } body.lgs-c2-home .lgs-home__paper { padding-bottom: var(--s4); } .lgs-shell.lgs-shell__header .lgs-shell__brand-word { font-size: 24px; } @media (max-width: 900px) { .lgs-shell.lgs-shell__header .lgs-shell__brand-word { font-size: 21px; } } @media (max-width: 480px) { .lgs-shell.lgs-shell__header .lgs-shell__brand-word { font-size: 19px; } } /* c) (owner, same review) the email/postcode capture read as the biggest thing on the page. Quiet sign-up line: capped row width, slimmer controls, postcode sized to a postcode. */ :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__row { max-width: 540px; } :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__form input[type="email"], :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__form input[type="text"] { min-height: 38px; padding: 7px 10px; font-size: 14px; } :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__form input[type="text"] { max-width: 110px; } :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__form button { min-height: 38px; padding: 7px 14px; } @media (max-width: 700px) { :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__form input[type="text"] { max-width: none; } } /* 24d. Owner review: the STAY CLOSE band's fr-tracks flushed the aside to the far edge with a gulf in the middle. Content-sized columns pull it in beside the copy - one thought, read left to right. */ @media (min-width: 900px) { body.lgs-c2-home .lgs-home__follow { grid-template-columns: minmax(0, 56ch) minmax(0, 42ch); column-gap: var(--s5); justify-content: start; } } /* 24e. Owner review: the section kickers had drifted (12px at weight 600/650, tracking .08/.1em by module). ONE canonical kicker rank, a step more present, still subordinate to the serif headings. */ .lgs-spine.lgs-c2 .lgs-town__kicker, :is(.lgs-spine.lgs-c2, body.lgs-c2-home, body.lgs-c2-profile) .lgs-ha__kicker, body.lgs-c2-profile .lgs-prof__kicker, body.lgs-c2-profile .lgs-cm__kicker, body.lgs-c2-home .lgs-home__kicker, body.lgs-shell-on .lgs-follow-page__kicker, body.lgs-c2-search .lgs-srch__kicker, body.lgs-c2-join .lgs-joinc2__kicker, body.lgs-c2-reg .lgs-regc2 .lgs-joinc2__kicker, body.lgs-c2-community .lgs-comm__kicker, body.lgs-c2-gdash .lgs-gdash__kicker, .lgs-feature__kicker, body.lgs-c2-feated .lgs-feated__kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c2-green-deep); } /* 24f. Owner review (2026-08-18): the money band's furniture - stat row, multiplier panel, facts, source - ran the full 1056px container while its prose held the 62ch measure (518px at this band's 14px body). Full-bleed wash and rules against half-width text read as "copy bunched to the left". One shared ~720px content column gives the band a deliberate right edge; prose keeps its measure inside it. The multiplier panel also still wore the pre-C2 oat card (10px radius, 4px border, container-wide) from the old inline spine styles - restated here in the C2 fact grammar: square, wash that hugs its content, 2px green rule like the promise fact. */ .lgs-spine.lgs-c2 .lgs-town__money .lgs-town__statrow, .lgs-spine.lgs-c2 .lgs-town__money .lgs-town__figure-block, .lgs-spine.lgs-c2 .lgs-town__money .lgs-town__facts, .lgs-spine.lgs-c2 .lgs-town__money .lgs-town__fact, .lgs-spine.lgs-c2 .lgs-town__money .lgs-town__figure, .lgs-spine.lgs-c2 .lgs-town__money .lgs-town__multiplier { max-width: 720px; } .lgs-spine.lgs-c2 .lgs-town__multiplier { background: var(--c2-wash); border-radius: 0; border-left: 2px solid var(--c2-green); padding: var(--s3) var(--s4); margin: var(--s3) 0; } /* mobile: the 150px flex basis wrapped the three stats 2+1, stranding the last figure full-width under the pair - stack them singly. */ @media (max-width: 480px) { .lgs-spine.lgs-c2 .lgs-town__statcell { flex: 1 1 100%; } } /* 24g. Owner review (2026-08-18): "Help this page grow" read as fine print. The quiet-tail rhythm (13.5px supporting notes) was designed for the trade note / nearby / FAQ - but this band is the page's ASK (list / share / follow) and its action links sat at 13.5px, under the round-9 standing rule that actions never render below 14px. Copy steps up to the 14.5px reading rank (Hearabouts' rhythm); actions to 15px. Still one step under the 16px primary doors - lifted, not shouting. */ .lgs-spine.lgs-c2 .lgs-town__grow li { font-size: 14.5px; } .lgs-spine.lgs-c2 .lgs-town__grow-act { font-size: 15px; } /* ------------------------------------------------------------------ */ /* 25. Town identity imagery (owner decision 2026-08-18). */ /* The masthead carries the town's own street plan (V6 of the owner's */ /* variant board: bold ink print, core right-of-centre) whenever a */ /* pre-generated map plate exists; the owner's town photograph sits */ /* behind "This page belongs to {town}" (their picked behind-copy */ /* treatment) whenever a photo file exists. Both seams self-activate */ /* from static files - no file, no change, no live map-service calls. */ /* The SVG plate is pre-composed at 1200x520 slice, so one rule fits */ /* every town with no per-town offsets. */ .lgs-spine.lgs-c2 .lgs-town__hero--map { position: relative; padding: 44px 28px 38px; margin: 0 -24px; background: linear-gradient(to right, rgba(243,241,236,1) 0%, rgba(243,241,236,.97) 38%, rgba(243,241,236,.6) 56%, rgba(243,241,236,.1) 82%, rgba(243,241,236,.05) 100%), linear-gradient(to bottom, rgba(243,241,236,.3) 0%, rgba(243,241,236,.12) 45%, var(--c2-paper) 97%), var(--lgs-town-map) center / cover no-repeat; } .lgs-spine.lgs-c2 .lgs-town__mapcredit { position: absolute; right: 10px; bottom: 5px; font-size: 10.5px; color: var(--c2-faint); } /* vision photo: heavy wash under the 62ch column, photo breathing on the right; !important matches the pre-existing __vision reset. */ .lgs-spine.lgs-c2 .lgs-town__vision--photo { position: relative; padding: 34px 28px !important; margin-left: -24px; margin-right: -24px; background: linear-gradient(to right, rgba(243,241,236,.96) 0%, rgba(243,241,236,.9) 42%, rgba(243,241,236,.45) 68%, rgba(243,241,236,.12) 100%), linear-gradient(to bottom, rgba(243,241,236,.5) 0%, rgba(243,241,236,.25) 40%, var(--c2-paper) 97%), var(--lgs-town-photo) center 40% / cover no-repeat !important; } @media (max-width: 600px) { .lgs-spine.lgs-c2 .lgs-town__hero--map { margin: 0 -20px; padding: 30px 20px 26px; background: linear-gradient(to bottom, rgba(243,241,236,.86) 0%, rgba(243,241,236,.9) 55%, var(--c2-paper) 97%), var(--lgs-town-map) center / cover no-repeat; } .lgs-spine.lgs-c2 .lgs-town__vision--photo { margin-left: -20px; margin-right: -20px; background: linear-gradient(to bottom, rgba(243,241,236,.82) 0%, rgba(243,241,236,.9) 55%, var(--c2-paper) 97%), var(--lgs-town-photo) center / cover no-repeat !important; } } /* 26. Decay-watch (owner re-cut 2026-08-19 step 2): honest provenance on group pages + the quiet one-click correction. Fine-print rank - informative, never competing with the page's identity. */ body.lgs-c2-profile .lgs-prof__provenance { font-size: 12.5px; color: var(--c2-faint); max-width: 62ch; margin: var(--s2) 0 0; } body.lgs-c2-profile .lgs-prof__report { margin: var(--s1) 0 var(--s3); font-size: 13.5px; max-width: 62ch; } body.lgs-c2-profile .lgs-prof__report > summary { cursor: pointer; color: var(--c2-green-deep); font-weight: 600; font-size: 14px; } body.lgs-c2-profile .lgs-prof__report-choices label { display: block; margin: 4px 0; } body.lgs-c2-profile .lgs-prof__report textarea { width: 100%; max-width: 46ch; border: 1px solid var(--c2-rule); border-radius: 2px; padding: 8px 10px; font-size: 14px; } body.lgs-c2-profile .lgs-prof__report-send { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; background: var(--c2-green-deep); color: #fff; border: 0; border-radius: 2px; font-size: 14.5px; font-weight: 600; cursor: pointer; } body.lgs-c2-profile .lgs-prof__report-fine { font-size: 12.5px; color: var(--c2-faint); } /* 27. Venue pages (GRP step 4): where the town's groups actually meet. The list reuses the join-list grammar wholesale; only the venue-page extras live here. Quiet rank throughout - the venue name in the hero is the page's one loud element. */ .lgs-spine.lgs-c2 .lgs-venue__list { margin: var(--s3) 0 0; } .lgs-spine.lgs-c2 .lgs-venue__org { display: inline-block; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--c2-faint); margin-right: 4px; } .lgs-spine.lgs-c2 .lgs-venue__note { margin: var(--s3) 0 0; font-size: 14.5px; color: var(--c2-soft, var(--c2-ink)); max-width: 62ch; } .lgs-spine.lgs-c2 .lgs-venue__note a { color: var(--c2-green-deep); font-weight: 600; text-decoration: none; } .lgs-spine.lgs-c2 .lgs-venue__note a:hover { text-decoration: underline; text-underline-offset: 3px; } .lgs-spine.lgs-c2 .lgs-venue__foot { margin: var(--s3) 0 var(--s4); } /* The org-page sideways route: fine-print rank next to the chips, never competing with the group title. */ :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__list a.lgs-join__venuelink { font-size: 13px; font-weight: 500; color: var(--c2-green-deep); text-decoration: none; white-space: nowrap; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-join__list a.lgs-join__venuelink:hover { text-decoration: underline; text-underline-offset: 3px; } /* 27b. Circulation (GRP step 4b): the around-you block on group and venue surfaces - a separate labelled commercial block, quiet rank, one door out. The Hearabouts block that follows carries its own styles. */ :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-around { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--c2-rule); } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-around h2 { font-size: 19px; margin: 0 0 var(--s2); } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-around__list { list-style: none; margin: 0; padding: 0; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-around__list li { padding: 7px 0; border-bottom: 1px solid var(--c2-rule); } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-around__list li:last-child { border-bottom: 0; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-around__list a { font-size: 15px; font-weight: 600; color: var(--c2-ink); text-decoration: none; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-around__list a:hover { color: var(--c2-green); text-decoration: underline; text-underline-offset: 3px; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-around__cat { display: inline-block; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--c2-faint); margin-left: 6px; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-around__door { margin: var(--s2) 0 0; font-size: 14.5px; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-around__door a { color: var(--c2-green-deep); font-weight: 600; text-decoration: none; } :is(.lgs-spine.lgs-c2, body.lgs-c2-profile) .lgs-around__door a:hover { text-decoration: underline; text-underline-offset: 3px; } /* 27c. Distribution kit + honest figure (GRP step 4c): the Share tab of the group dashboard, and the printable poster. On screen the poster is a bounded preview; the print button scopes the page down to the poster alone. */ body.lgs-c2-gdash .lgs-gdash__sharerows { margin: var(--s3) 0 var(--s4); } body.lgs-c2-gdash .lgs-gdash__sharerow { margin: 0 0 var(--s2); } body.lgs-c2-gdash .lgs-gdash__sharerow label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; } body.lgs-c2-gdash .lgs-gdash__shareline { display: flex; gap: 8px; flex-wrap: wrap; } body.lgs-c2-gdash .lgs-gdash__shareline input { flex: 1 1 280px; min-height: 44px; padding: 0 12px; font-size: 14px; border: 1px solid var(--c2-rule); border-radius: 2px; color: var(--c2-ink); background: #fff; } body.lgs-c2-gdash .lgs-gdash__poster { max-width: 340px; padding: 26px 26px 22px; text-align: center; border: 1px solid var(--c2-rule); border-radius: 2px; background: #fff; margin: var(--s2) 0 var(--s3); } body.lgs-c2-gdash .lgs-gdash__poster-name { font-size: 21px; font-weight: 700; margin: 0 0 14px; } body.lgs-c2-gdash .lgs-gdash__poster-qr svg { width: 200px; height: 200px; display: inline-block; } body.lgs-c2-gdash .lgs-gdash__poster-line { font-size: 14px; margin: 14px 0 4px; } body.lgs-c2-gdash .lgs-gdash__poster-url { font-size: 12.5px; color: var(--c2-faint); margin: 0; overflow-wrap: anywhere; } @media print { body.lgs-print-poster * { visibility: hidden; } body.lgs-print-poster .lgs-gdash__poster, body.lgs-print-poster .lgs-gdash__poster * { visibility: visible; } body.lgs-print-poster .lgs-gdash__poster { position: absolute; left: 0; top: 0; margin: 0 auto; border: 0; width: 100%; max-width: none; } body.lgs-print-poster .lgs-gdash__poster-qr svg { width: 340px; height: 340px; } body.lgs-print-poster .lgs-gdash__poster-name { font-size: 34px; } body.lgs-print-poster .lgs-gdash__poster-line { font-size: 19px; } body.lgs-print-poster .lgs-gdash__poster-url { font-size: 15px; } } /* ------------------------------------------------------------------ */ /* 28. Design pass (2026-08-23): /join/ rebuilt to the approved canvas */ /* board - Understead Route A grammar on this page only. Quiet ledger */ /* rhythm, B-style hero (headline left, three facts as a ruled right */ /* rail), plans as bounded panels, movement case as a column-width */ /* tinted panel. Tokens: ink #17140F on paper #F9F7F2, panel tint */ /* #F4F1EA, ONE #C0442A accent per surface (the 0% figure), Source */ /* Serif 4 display + Archivo UI (enqueued for this page only), radius */ /* 0, no shadows, no animation. Everything here is scoped to */ /* body.lgs-c2-join and deliberately out-cascades section 18; the */ /* registration pages keep the section-18 C2 skin untouched. */ /* ------------------------------------------------------------------ */ body.lgs-c2-join { background: #F9F7F2; } body.lgs-c2-join .lgs-joinc2 { --ud-ink: #17140F; --ud-ink70: rgba(23,20,15,.70); --ud-ink55: rgba(23,20,15,.55); --ud-ink45: rgba(23,20,15,.45); --ud-ink35: rgba(23,20,15,.35); --ud-ink14: rgba(23,20,15,.14); --ud-ink10: rgba(23,20,15,.10); --ud-paper: #F9F7F2; --ud-shade: #F4F1EA; --ud-accent: #C0442A; --ud-serif: 'Source Serif 4', Georgia, serif; --ud-sans: Archivo, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --ud-mono: ui-monospace, Menlo, Consolas, monospace; --c2-gutter: 60px; max-width: 1100px; margin: 0 auto; padding: 0 var(--c2-gutter); font-family: var(--ud-sans); font-size: 15px; line-height: 1.5; color: var(--ud-ink70); background: transparent; } body.lgs-c2-join .lgs-joinc2 p { max-width: none; } body.lgs-c2-join .lgs-joinc2 a { color: var(--ud-ink); } /* the page's own masthead band (site shell retained above it); the 1px rule runs viewport-wide while the wordmark holds the column */ body.lgs-c2-join .lgs-joinc2__masthead { margin: 0 calc(50% - 50vw); padding: 34px calc(50vw - 50%) 26px; border-bottom: 1px solid var(--ud-ink14); } body.lgs-c2-join .lgs-joinc2__wordmark { display: inline-block; font-family: var(--ud-serif); font-weight: 600; font-size: 34px; line-height: 1; letter-spacing: -0.012em; color: var(--ud-ink); } body.lgs-c2-join .lgs-joinc2__wordmark::before { content: ""; display: block; height: 2px; background: var(--ud-ink); margin-bottom: 9px; } /* type ranks */ body.lgs-c2-join .lgs-joinc2 h1 { font-family: var(--ud-serif); font-weight: 600; font-size: clamp(44px, 5.5vw, 76px); line-height: 0.98; letter-spacing: -0.022em; color: var(--ud-ink); margin: 0 0 26px; } body.lgs-c2-join .lgs-joinc2 h2 { font-family: var(--ud-serif); font-weight: 600; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.012em; color: var(--ud-ink); margin: 0 0 24px; } body.lgs-c2-join .lgs-joinc2 h3 { font-family: var(--ud-serif); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--ud-ink); margin: 0 0 18px; } /* kickers: the hero and plan kickers are mono captions; the section kickers (Businesses / Markets and food hubs) are the underline device */ body.lgs-c2-join .lgs-joinc2__kicker { display: inline-block; font-family: var(--ud-sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ud-ink55); border-bottom: 1px solid var(--ud-ink35); padding-bottom: 6px; margin: 0 0 20px; } body.lgs-c2-join .lgs-joinc2__hero .lgs-joinc2__kicker, body.lgs-c2-join .lgs-joinc2__plans .lgs-joinc2__kicker { font-family: var(--ud-mono); font-size: 11px; font-weight: 400; letter-spacing: .16em; color: var(--ud-ink45); border-bottom: 0; padding-bottom: 0; margin: 0 0 18px; } body.lgs-c2-join .lgs-joinc2__plans .lgs-joinc2__kicker { margin: 0; } /* hero: argument left, the three facts as a ruled right rail */ body.lgs-c2-join .lgs-joinc2__hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; padding: 64px 0 0; margin: 0; } body.lgs-c2-join .lgs-joinc2__lede { font-family: var(--ud-serif); font-weight: 400; font-size: clamp(21px, 2vw, 27px); line-height: 1.28; color: var(--ud-ink); max-width: none; margin: 0 0 20px; } body.lgs-c2-join .lgs-joinc2__sub { font-size: 15.5px; color: var(--ud-ink70); max-width: none; margin: 0 0 12px; } body.lgs-c2-join .lgs-joinc2__subquiet { font-size: 14.5px; color: var(--ud-ink55); max-width: none; margin: 0 0 22px; } body.lgs-c2-join .lgs-joinc2__already { margin: 0 0 8px; padding: 0; border: 0; font-size: 14px; color: var(--ud-ink70); } body.lgs-c2-join .lgs-joinc2__already a { color: var(--ud-ink); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ud-ink35); } body.lgs-c2-join .lgs-joinc2__already a:hover { color: var(--ud-ink); text-decoration-color: var(--ud-ink); } body.lgs-c2-join .lgs-joinc2__hero-proof { border-top: 0; border-left: 1px solid var(--ud-ink14); margin: 0; padding-left: 40px; max-width: none; display: flex; flex-direction: column; justify-content: center; gap: 24px; } body.lgs-c2-join .lgs-joinc2__proofrow { display: block; padding: 0 0 20px; border-bottom: 1px solid var(--ud-ink14); } body.lgs-c2-join .lgs-joinc2__proofrow:last-child { border-bottom: 0; padding-bottom: 0; } body.lgs-c2-join .lgs-joinc2__prooffig { font-family: var(--ud-serif); font-weight: 600; font-size: 54px; line-height: 1; letter-spacing: -.01em; color: var(--ud-ink); } /* the surface's one accent: the 0% figure */ body.lgs-c2-join .lgs-joinc2__proofrow:nth-child(2) .lgs-joinc2__prooffig { color: var(--ud-accent); } body.lgs-c2-join .lgs-joinc2__prooffig--words { font-size: 30px; line-height: 1.05; text-transform: none; letter-spacing: -.01em; } body.lgs-c2-join .lgs-joinc2__proofcap { display: block; font-size: 13.5px; color: var(--ud-ink70); margin-top: 6px; max-width: none; } /* what do you run? - ruled door rows */ body.lgs-c2-join .lgs-joinc2__run { margin: 64px 0 0; } body.lgs-c2-join .lgs-joinc2__run h2 { border-top: 0; padding-top: 0; } body.lgs-c2-join a.lgs-joinc2__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 40px; align-items: center; padding: 26px 0; border-bottom: 0; border-top: 1px solid var(--ud-ink14); text-decoration: none; } body.lgs-c2-join a.lgs-joinc2__row:first-of-type { border-top: 1px solid var(--ud-ink14); } body.lgs-c2-join .lgs-joinc2__run a.lgs-joinc2__row:last-of-type, body.lgs-c2-join .lgs-joinc2__modes a.lgs-joinc2__row:last-of-type { border-bottom: 1px solid var(--ud-ink14); } body.lgs-c2-join .lgs-joinc2__row-h { font-family: var(--ud-serif); font-weight: 600; font-size: 23px; color: var(--ud-ink); } body.lgs-c2-join a.lgs-joinc2__row:hover .lgs-joinc2__row-h { color: var(--ud-ink); } body.lgs-c2-join .lgs-joinc2__row-p { max-width: none; font-size: 14.5px; color: var(--ud-ink70); grid-row: 2; } body.lgs-c2-join .lgs-joinc2__row-go { grid-row: 1 / span 2; grid-column: 2; color: var(--ud-ink); font-weight: 400; font-size: 22px; } body.lgs-c2-join .lgs-joinc2__row-act { color: var(--ud-ink); font-weight: 600; } body.lgs-c2-join a.lgs-joinc2__row:hover .lgs-joinc2__row-act { color: var(--ud-ink); } /* the business mode rows carry their action inline (board), titles in bold Archivo rather than serif */ body.lgs-c2-join .lgs-joinc2__modes .lgs-joinc2__row-h { font-family: var(--ud-sans); font-weight: 700; font-size: 17px; } body.lgs-c2-join .lgs-joinc2__modes a.lgs-joinc2__row { padding: 22px 0; } body.lgs-c2-join .lgs-joinc2__modes .lgs-joinc2__row-p br { display: none; } /* the movement case: full-width tinted band (owner call 2026-08-23), copy on the same column as every other section - the band bleeds to the viewport edges while its padding restores the column alignment */ body.lgs-c2-join .lgs-joinc2__movement { background: var(--ud-shade); margin: 64px calc(50% - 50vw) 0; padding: 44px calc(50vw - 50%); } body.lgs-c2-join .lgs-joinc2__why { margin: 0; } body.lgs-c2-join .lgs-joinc2__why h2 { max-width: none; font-size: clamp(27px, 2.8vw, 40px); margin: 0 0 26px; } body.lgs-c2-join .lgs-joinc2__why p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--ud-ink70); } body.lgs-c2-join .lgs-joinc2__why p:last-child { margin-bottom: 0; } body.lgs-c2-join .lgs-joinc2__diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px; margin: 44px 0 0; } body.lgs-c2-join .lgs-joinc2__diffrow, body.lgs-c2-join .lgs-joinc2__diff .lgs-joinc2__diffrow:first-child, body.lgs-c2-join .lgs-joinc2__diff .lgs-joinc2__diffrow:nth-child(2) { border-top: 1px solid var(--ud-ink35); padding: 16px 0 0; } body.lgs-c2-join .lgs-joinc2__diffrow h3 { font-family: var(--ud-sans); font-weight: 700; font-size: 16px; margin: 0 0 6px; } body.lgs-c2-join .lgs-joinc2__diffrow p { margin: 0; max-width: none; font-size: 14.5px; color: var(--ud-ink70); } /* family sections: the kicker underline device replaces the 2px rules */ body.lgs-c2-join .lgs-joinc2__fam { border-top: 0; padding: 72px 0 0; margin: 0; } body.lgs-c2-join .lgs-joinc2__famlede { max-width: 660px; font-size: 15.5px; color: var(--ud-ink70); margin: 0 0 26px; } body.lgs-c2-join .lgs-joinc2__fam h2 { max-width: 760px; margin: 0 0 16px; } body.lgs-c2-join .lgs-joinc2__modes { margin: 0 0 0; } body.lgs-c2-join .lgs-joinc2__conviction { font-family: var(--ud-sans); font-size: 14.5px; color: var(--ud-ink70); max-width: none; } /* the three plans as bounded panels; Free carries the ink top rule */ body.lgs-c2-join .lgs-joinc2__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 64px 0 0; align-items: start; } body.lgs-c2-join .lgs-joinc2__free, body.lgs-c2-join .lgs-joinc2__plan { display: flex; flex-direction: column; gap: 12px; background: var(--ud-shade); border: 1px solid var(--ud-ink14); padding: 26px 28px 28px; margin: 0; box-sizing: border-box; } body.lgs-c2-join .lgs-joinc2__free { border-top: 2px solid var(--ud-ink); } body.lgs-c2-join .lgs-joinc2__plans h3 { font-size: 24px; line-height: 1.15; margin: 0; } body.lgs-c2-join .lgs-joinc2__plans p { margin: 0; } body.lgs-c2-join .lgs-joinc2__free .lgs-joinc2__conviction { font-size: 14.5px; } body.lgs-c2-join .lgs-joinc2__price { font-family: var(--ud-mono); font-size: 13px; font-weight: 400; color: var(--ud-ink); margin: 0; } body.lgs-c2-join .lgs-joinc2__defs { max-width: none; margin: 0; display: flex; flex-direction: column; gap: 10px; } body.lgs-c2-join .lgs-joinc2__defs > div, body.lgs-c2-join .lgs-joinc2__defs > div:first-child { border-top: 1px solid var(--ud-ink10); padding: 10px 0 0; font-size: 14px; color: var(--ud-ink70); } body.lgs-c2-join .lgs-joinc2__defs dt { display: inline; font-weight: 700; color: var(--ud-ink); margin: 0; } body.lgs-c2-join .lgs-joinc2__defs dt::after { content: ". "; } body.lgs-c2-join .lgs-joinc2__defs dd { display: inline; margin: 0; max-width: none; } body.lgs-c2-join .lgs-joinc2__points { max-width: none; margin: 0; display: flex; flex-direction: column; gap: 10px; } body.lgs-c2-join .lgs-joinc2__points li, body.lgs-c2-join .lgs-joinc2__points li:first-child { border-top: 1px solid var(--ud-ink10); padding: 10px 0 0; font-size: 14.5px; color: var(--ud-ink70); } body.lgs-c2-join .lgs-joinc2__lead { font-weight: 700; color: var(--ud-ink); } /* actions: square ink buttons, quiet outlined secondary */ body.lgs-c2-join .lgs-joinc2__cta { margin: 8px 0 0; display: flex; gap: 14px; flex-wrap: wrap; } body.lgs-c2-join .lgs-joinc2__go { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 0; border: 0; background: var(--ud-ink); color: var(--ud-paper); font-family: var(--ud-sans); font-weight: 600; font-size: 14.5px; text-decoration: none; } body.lgs-c2-join .lgs-joinc2__go:hover { background: var(--ud-ink); color: var(--ud-paper); } body.lgs-c2-join .lgs-joinc2__go--quiet { background: none; color: var(--ud-ink); border: 1px solid var(--ud-ink); } body.lgs-c2-join .lgs-joinc2__go--quiet:hover { background: none; color: var(--ud-ink); } /* comparison table */ body.lgs-c2-join .lgs-joinc2__compare { border-top: 0; padding: 56px 0 0; } body.lgs-c2-join .lgs-joinc2__compare h3 { margin: 0 0 18px; } body.lgs-c2-join .lgs-joinc2__tablewrap { max-width: none; } body.lgs-c2-join .lgs-joinc2__table { font-size: 14px; } body.lgs-c2-join .lgs-joinc2__table th, body.lgs-c2-join .lgs-joinc2__table td { border-top: 0; border-bottom: 1px solid var(--ud-ink14); padding: 11px 0; } body.lgs-c2-join .lgs-joinc2__table thead th { font-family: var(--ud-sans); font-weight: 700; font-size: 14px; color: var(--ud-ink); border-bottom: 1px solid var(--ud-ink35); } body.lgs-c2-join .lgs-joinc2__table thead th span { font-size: 12.5px; font-weight: 600; color: var(--ud-ink55); } body.lgs-c2-join .lgs-joinc2__table tbody th { font-weight: 400; color: var(--ud-ink70); } body.lgs-c2-join .lgs-joinc2__table td { color: var(--ud-ink); font-weight: 400; text-align: center; } body.lgs-c2-join .lgs-joinc2__note { font-size: 13.5px; color: var(--ud-ink55); margin-top: 14px; } /* mobile plan summaries as bounded cards (board's card-form list) */ body.lgs-c2-join .lgs-joinc2__plansums { gap: 16px; } body.lgs-c2-join .lgs-joinc2__plansum { border: 1px solid var(--ud-ink14); border-top: 1px solid var(--ud-ink14); padding: 16px 18px; } body.lgs-c2-join .lgs-joinc2__plansum h4 { font-family: var(--ud-sans); font-weight: 700; font-size: 15px; color: var(--ud-ink); margin: 0 0 8px; } body.lgs-c2-join .lgs-joinc2__plansum h4 span { font-family: var(--ud-sans); font-size: 15px; font-weight: 700; color: var(--ud-ink); margin-left: 4px; } body.lgs-c2-join .lgs-joinc2__plansum li, body.lgs-c2-join .lgs-joinc2__plansum li:first-child { border-top: 0; padding: 2.5px 0; font-size: 13.5px; color: var(--ud-ink70); } /* fairness aside */ body.lgs-c2-join .lgs-joinc2__truth { background: var(--ud-shade); border-top: 0; padding: 28px 32px; max-width: 640px; margin-top: 48px; box-sizing: border-box; } body.lgs-c2-join .lgs-joinc2__truth h3 { font-family: var(--ud-sans); font-weight: 700; font-size: 16px; margin: 0 0 8px; } body.lgs-c2-join .lgs-joinc2__truth p { margin: 0 0 8px; font-size: 14.5px; color: var(--ud-ink70); } body.lgs-c2-join .lgs-joinc2__truth p:last-child { margin-bottom: 0; } /* markets: two ruled pillars */ body.lgs-c2-join .lgs-joinc2__free-forever { font-family: var(--ud-serif); font-weight: 600; font-size: 22px; color: var(--ud-ink); margin: 0 0 18px; } body.lgs-c2-join .lgs-joinc2__fam#market .lgs-joinc2__famlede { margin-bottom: 30px; } body.lgs-c2-join .lgs-joinc2__mktgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px; } body.lgs-c2-join .lgs-joinc2__network, body.lgs-c2-join .lgs-joinc2__mktcase { border-top: 1px solid var(--ud-ink35); padding: 16px 0 0; margin: 0; max-width: none; } body.lgs-c2-join .lgs-joinc2__network h3 { font-family: var(--ud-sans); font-weight: 700; font-size: 16px; margin: 0 0 6px; } body.lgs-c2-join .lgs-joinc2__network p { margin: 0 0 8px; font-size: 14.5px; color: var(--ud-ink70); } body.lgs-c2-join .lgs-joinc2__mktcase .lgs-joinc2__conviction { font-family: var(--ud-serif); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--ud-ink); margin: 0 0 10px; } body.lgs-c2-join .lgs-joinc2__mission { font-family: var(--ud-sans); font-size: 14.5px; color: var(--ud-ink70); border: 0; padding: 0; background: none; max-width: none; margin: 0 0 8px; } body.lgs-c2-join .lgs-joinc2__hubnote { font-size: 14.5px; color: var(--ud-ink55); max-width: none; margin: 0; } body.lgs-c2-join .lgs-joinc2__fam#market .lgs-joinc2__cta { margin-top: 30px; } /* close */ body.lgs-c2-join .lgs-joinc2__close { border-top: 1px solid var(--ud-ink14); padding: 44px 0 64px; margin: 72px 0 0; } body.lgs-c2-join .lgs-joinc2__closethought { font-family: var(--ud-serif); font-weight: 600; font-size: 26px; line-height: 1.25; color: var(--ud-ink); max-width: 700px; margin: 0 0 22px; } /* below 1000px: the hero stacks (facts become the ruled strip), the plans and market pillars stack, the movement panel bleeds to the viewport edge at phone widths */ @media (max-width: 999px) { body.lgs-c2-join .lgs-joinc2__hero { display: block; padding-top: 34px; } body.lgs-c2-join .lgs-joinc2__hero-proof { display: block; border-left: 0; border-top: 1px solid var(--ud-ink35); padding-left: 0; margin-top: 30px; } body.lgs-c2-join .lgs-joinc2__proofrow { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--ud-ink14); } body.lgs-c2-join .lgs-joinc2__proofrow:last-child { border-bottom: 1px solid var(--ud-ink14); padding-bottom: 16px; } body.lgs-c2-join .lgs-joinc2__prooffig { font-size: 32px; min-width: 76px; } body.lgs-c2-join .lgs-joinc2__prooffig--words { font-size: 20px; line-height: 1.1; } body.lgs-c2-join .lgs-joinc2__proofcap { margin-top: 0; } body.lgs-c2-join .lgs-joinc2__plans { display: flex; flex-direction: column; gap: 18px; } body.lgs-c2-join .lgs-joinc2__mktgrid { display: block; } body.lgs-c2-join .lgs-joinc2__mktcase { margin-top: 18px; } } @media (max-width: 700px) { body.lgs-c2-join .lgs-joinc2 { --c2-gutter: 22px; } body.lgs-c2-join .lgs-joinc2__masthead { padding-top: 24px; padding-bottom: 18px; } body.lgs-c2-join .lgs-joinc2__wordmark { font-size: 27px; } body.lgs-c2-join .lgs-joinc2__wordmark::before { margin-bottom: 7px; } body.lgs-c2-join .lgs-joinc2__movement { margin-top: 38px; padding-top: 38px; padding-bottom: 38px; } body.lgs-c2-join .lgs-joinc2__diff { grid-template-columns: 1fr; gap: 22px; } body.lgs-c2-join a.lgs-joinc2__row { display: block; padding: 18px 0; } body.lgs-c2-join .lgs-joinc2__row-go { display: none; } body.lgs-c2-join .lgs-joinc2__modes .lgs-joinc2__row-p br { display: inline; } body.lgs-c2-join .lgs-joinc2__fam { padding-top: 38px; } body.lgs-c2-join .lgs-joinc2__run { margin-top: 36px; } body.lgs-c2-join .lgs-joinc2__plans { margin-top: 36px; } body.lgs-c2-join .lgs-joinc2__free, body.lgs-c2-join .lgs-joinc2__plan { padding: 20px; } body.lgs-c2-join .lgs-joinc2__compare { padding-top: 34px; } body.lgs-c2-join .lgs-joinc2__truth { margin-top: 30px; padding: 20px; } body.lgs-c2-join .lgs-joinc2__close { margin-top: 38px; padding: 26px 0 40px; } body.lgs-c2-join .lgs-joinc2__closethought { font-size: 21px; } body.lgs-c2-join .lgs-joinc2__go { display: inline-flex; width: auto; } body.lgs-c2-join .lgs-joinc2__cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; } body.lgs-c2-join .lgs-joinc2__cta .lgs-joinc2__go { width: 100%; margin-top: 0; } } /* ------------------------------------------------------------------ */ /* 29. GRP-ENRICH (2026-08-24): group description + stated-fact chips */ /* on the C2 profile skin. Quiet facts beside the listing: ink-on- */ /* shade tags, no colour shouting, the description reads as body copy.*/ /* ------------------------------------------------------------------ */ body.lgs-c2-profile .lgs-grp__desc{margin:16px 0 4px;} body.lgs-c2-profile .lgs-grp__desc p{font-size:1.02rem;line-height:1.62;margin:0 0 10px;} body.lgs-c2-profile .lgs-grp__chips{list-style:none;margin:10px 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px;} body.lgs-c2-profile .lgs-grp__chipfact{background:var(--c2-shade,#F4F1EA);border:1px solid rgba(23,20,15,.14);border-radius:0;padding:4px 10px;font-size:.85rem;line-height:1.45;color:var(--c2-ink,#17140F);} body.lgs-c2-profile .lgs-grp__chiplabel{font-weight:600;letter-spacing:.01em;margin-right:5px;} /* C1 (2.9.0): intent doors over Buy local - quiet pills, no orange (orange stays for CTAs); the active door fills. Venue links in the pulse and the venue's business line inherit link styling. */ .lgs-spine.lgs-c2 .lgs-town__intent { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; } .lgs-spine.lgs-c2 .lgs-town__idoor { border: 1px solid rgba(23,20,15,.25); border-radius: 0; padding: 6px 12px; font-size: .9rem; line-height: 1.4; color: var(--c2-ink,#17140F); text-decoration: none; } .lgs-spine.lgs-c2 .lgs-town__idoor:hover { border-color: var(--c2-green); color: var(--c2-green); } .lgs-spine.lgs-c2 .lgs-town__idoor.is-active { background: var(--c2-ink,#17140F); border-color: var(--c2-ink,#17140F); color: #FFFDF8; } .lgs-spine.lgs-c2 .lgs-town__idoor--biz { border-style: dashed; } .lgs-spine.lgs-c2 .lgs-venue__biz { margin: 10px 0 0; font-size: .95rem; } /* FACETS-1 (2.9.1): four question rows as chips over the community strip; quiet like the intent doors, pressed state fills. */ .lgs-spine.lgs-c2 .lgs-facets { margin: 12px 0 16px; } .lgs-spine.lgs-c2 .lgs-facet__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; } .lgs-spine.lgs-c2 .lgs-facet__q { font-size: .85rem; font-weight: 600; margin-right: 4px; } .lgs-spine.lgs-c2 .lgs-facet__chip { border: 1px solid rgba(23,20,15,.25); padding: 3px 10px; font-size: .85rem; color: var(--c2-ink,#17140F); text-decoration: none; } .lgs-spine.lgs-c2 .lgs-facet__chip:hover { border-color: var(--c2-green); color: var(--c2-green); } .lgs-spine.lgs-c2 .lgs-facet__chip.is-on { background: var(--c2-ink,#17140F); border-color: var(--c2-ink,#17140F); color: #FFFDF8; } .lgs-spine.lgs-c2 .lgs-facet__more summary { cursor: pointer; font-size: .85rem; } .lgs-spine.lgs-c2 .lgs-cat__community { border-top: 1px solid var(--c2-hair); margin-top: 24px; padding-top: 12px; } .lgs-spine.lgs-c2 .lgs-cat__community-when { font-size: .85rem; font-weight: 600; } /* PULL-1 (2.9.4): open-data schedule on provider profiles. */ .lgs-c2-profile .lgs-prof__sched { border-top: 1px solid var(--c2-hair); margin-top: 20px; padding-top: 12px; } .lgs-c2-profile .lgs-prof__sched-list { list-style: none; margin: 10px 0; padding: 0; } .lgs-c2-profile .lgs-prof__sched-list li { padding: 7px 0; border-bottom: 1px solid var(--c2-hair); font-size: .95rem; } .lgs-c2-profile .lgs-prof__sched-when { font-weight: 600; margin-left: 6px; } .lgs-c2-profile .lgs-prof__sched-place { color: var(--c2-muted); margin-left: 6px; } .lgs-c2-profile .lgs-prof__sched-src { font-size: .8rem; color: var(--c2-muted); } /* C3-DISC (2.9.6): resident category discovery. The house logarithmic radius control on the category find form and the search geo mode; grouped category door on /uk/ with the Classes subgroup headings. */ .lgs-spine.lgs-c2 .lgs-spine__find-radius { max-width: 420px; margin: 10px 0 4px; } .lgs-spine.lgs-c2 .lgs-spine__find-radius label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 4px; } .lgs-spine.lgs-c2 .lgs-spine__find-radius .lgs-log-radius__slider { width: 100%; accent-color: var(--c2-green); } .lgs-c2-search .lgs-srch__locwrap, .lgs-c2-search .lgs-srch__radwrap { flex: 1 1 200px; min-width: 180px; } .lgs-c2-search .lgs-srch__loc { width: 100%; padding: 10px 12px; border: 1px solid rgba(23,20,15,.35); font-size: 1rem; } .lgs-c2-search .lgs-srch__radwrap .lgs-log-radius__slider { width: 100%; accent-color: var(--c2-green); margin-top: 12px; } .lgs-spine.lgs-c2 .lgs-spine__catdoor { margin: 8px 0; } .lgs-spine.lgs-c2 .lgs-spine__catsub { font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c2-muted); margin: 12px 0 4px; } /* C3-NAT + C3-TOWN (2.9.7): the classes discovery layouts. */ .lgs-spine.lgs-c2 .lgs-spine__find--disc { border: 1px solid var(--c2-hair); padding: 16px; margin: 14px 0; max-width: 560px; } .lgs-spine.lgs-c2 .lgs-spine__find--compact { padding: 12px; margin: 8px 0 4px; } .lgs-spine.lgs-c2 .lgs-spine__find-label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 4px; } .lgs-spine.lgs-c2 .lgs-spine__find-count { margin: 10px 0 0; } .lgs-spine.lgs-c2 .lgs-spine__disc-why, .lgs-spine.lgs-c2 .lgs-spine__disc-styles, .lgs-spine.lgs-c2 .lgs-spine__disc-feature, .lgs-spine.lgs-c2 .lgs-spine__disc-beg, .lgs-spine.lgs-c2 .lgs-spine__disc-price, .lgs-spine.lgs-c2 .lgs-spine__disc-rel, .lgs-spine.lgs-c2 .lgs-spine__disc-online, .lgs-spine.lgs-c2 .lgs-spine__disc-claim, .lgs-spine.lgs-c2 .lgs-spine__disc-near, .lgs-spine.lgs-c2 .lgs-spine__disc-times, .lgs-spine.lgs-c2 .lgs-spine__disc-close { border-top: 1px solid var(--c2-hair); margin-top: 24px; padding-top: 12px; } .lgs-spine.lgs-c2 .lgs-spine__disc-provs { list-style: none; margin: 10px 0; padding: 0; } .lgs-spine.lgs-c2 .lgs-spine__disc-provs li { padding: 6px 0; border-bottom: 1px solid var(--c2-hair); font-size: .95rem; } .lgs-spine.lgs-c2 .lgs-spine__disc-cta { display: inline-block; border: 1px solid var(--c2-ink,#17140F); padding: 8px 14px; margin: 4px 8px 4px 0; text-decoration: none; color: var(--c2-ink,#17140F); font-weight: 600; } .lgs-spine.lgs-c2 .lgs-spine__disc-cta:hover { border-color: var(--c2-green); color: var(--c2-green); } .lgs-spine.lgs-c2 .lgs-spine__disc-cta2 { font-size: .9rem; } .lgs-spine.lgs-c2 .lgs-facet__chip.is-static { cursor: default; } /* MISSION LAYER (2.9.8): the hero reason line and the quiet final line on the national discovery pages. */ .lgs-spine.lgs-c2 .lgs-spine__hero-why { font-size: 1rem; max-width: 46em; } .lgs-spine.lgs-c2 .lgs-spine__disc-know { margin-top: 18px; font-size: .95rem; color: var(--c2-muted); } .lgs-spine.lgs-c2 .lgs-spine__disc-know strong { color: var(--c2-ink,#17140F); } /* TOWN 6-30 (2.9.9): community-first framing, the where section, and day subheads in the what's-on block. */ .lgs-spine.lgs-c2 .lgs-spine__disc-comm, .lgs-spine.lgs-c2 .lgs-spine__disc-where { border-top: 1px solid var(--c2-hair); margin-top: 24px; padding-top: 12px; } .lgs-spine.lgs-c2 .lgs-spine__disc-times h3 { margin: 14px 0 2px; font-size: 1rem; } /* ------------------------------------------------------------------ */ /* OWNER-UX-2 (2.9.10): the owner journey pass — register, claim and */ /* edit reading as one Understead experience. */ /* ------------------------------------------------------------------ */ /* registration: collapse the empty Elementor heading widget and the container's top padding that opened a dead band between the page intro and the first step card. */ body.lgs-shell-on .lgs-regc2__form .e-con { padding-top: 0; } body.lgs-shell-on .lgs-regc2__form .elementor-widget-heading { display: none; } /* the floating basket has no business hovering over the add-your- business or manage-your-listing surfaces */ body:has(.lgs-vendor-wizard) #fkcart-floating-toggler, body:has(.lgs-editor) #fkcart-floating-toggler { display: none !important; } /* one heading rhythm in the owner zone: the zone heading ("You manage this page") is the kicker; the editor keeps its h2 and drops its own second kicker. */ .lgs-prof__owner ~ .lgs-editor .lgs-editor__kicker { display: none; } /* one button family in the owner panels: the theme's red outline .button pills (Ask to be listed / Search) join the C2 family as the secondary treatment beside the green primary. */ body.lgs-shell-on .lgs-editor .button, body.lgs-shell-on .lgs-prof__owner ~ div .button { background: transparent; color: var(--c2-green-deep); border: 1px solid var(--c2-green-deep); border-radius: 2px; padding: 9px 16px; min-height: 40px; font-weight: 600; font-size: 14px; cursor: pointer; } body.lgs-shell-on .lgs-editor .button:hover, body.lgs-shell-on .lgs-prof__owner ~ div .button:hover { background: var(--c2-green-deep); color: #fff; } /* ---- TOWN-STRUCT 2.9.11 (owner brief 2026-09-22): the town page as the template for every town. The discovery strip reuses the intent-door grammar at 44px targets and sits tight under the hero; the classes section and the share line inherit the section grammar. ---- */ .lgs-spine.lgs-c2 > section.lgs-town__explore-block { padding: var(--s3) 0 var(--s2); border-top: 0; } .lgs-spine.lgs-c2 .lgs-town__explore { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .lgs-spine.lgs-c2 .lgs-town__explore .lgs-town__idoor { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; font-size: .95rem; } .lgs-spine.lgs-c2 .lgs-town__explore-block + section { border-top: 1px solid var(--c2-rule); } .lgs-spine.lgs-c2 .lgs-town__share-line { font-size: 14.5px; color: var(--c2-muted); margin: var(--s3) 0 0; } .lgs-spine.lgs-c2 .lgs-town__share-line a { color: var(--c2-green); font-weight: 600; text-decoration: none; } .lgs-spine.lgs-c2 .lgs-town__share-line a:hover { color: var(--c2-green-deep); } .lgs-spine.lgs-c2 .lgs-town__classes .lgs-town__whatson-scope { margin-bottom: var(--s2); } @media (max-width: 640px) { .lgs-spine.lgs-c2 .lgs-town__explore .lgs-town__idoor { flex: 1 1 calc(50% - 8px); justify-content: center; } } /* ---- TOWN-STRUCT-2 2.9.12: major-pillar empty states. Compact by rule: the heading, two lines, one door; roughly a third of a populated section's height, and never a grid. ---- */ .lgs-spine.lgs-c2 > section.lgs-town__empty { padding: var(--s4) 0 var(--s3); } .lgs-spine.lgs-c2 .lgs-town__empty h2 { margin-bottom: var(--s1); } .lgs-spine.lgs-c2 .lgs-town__empty .lgs-town__whatson-scope { margin-bottom: var(--s1); } .lgs-spine.lgs-c2 .lgs-town__empty-lead { font-size: 15px; color: var(--c2-muted); max-width: 58ch; margin: 0 0 var(--s2); } .lgs-spine.lgs-c2 .lgs-town__empty-lead strong { color: var(--c2-ink); font-weight: 600; } .lgs-spine.lgs-c2 .lgs-town__empty-cta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); } .lgs-spine.lgs-c2 .lgs-town__empty-owner { font-size: 13.5px; color: var(--c2-muted); text-decoration: none; } .lgs-spine.lgs-c2 .lgs-town__empty-owner:hover { color: var(--c2-green); } body.lgs-c2-comm-recommend .lgs-comm__row textarea { width: 100%; border: 1px solid var(--c2-rule); padding: 10px 12px; font: inherit; background: #FFFDF8; } body.lgs-c2-comm-recommend .lgs-comm__row select { width: 100%; min-height: 44px; border: 1px solid var(--c2-rule); padding: 8px 12px; font: inherit; background: #FFFDF8; } /* ---- TOWN-STRUCT-3 2.9.13: invitations. The composer and landing reuse the community form grammar; the share page adds a quiet button family. ---- */ .lgs-spine.lgs-c2 .lgs-town__empty-invite { margin-left: 0; } body.lgs-c2-community .lgs-inv__msg { width: 100%; border: 1px solid var(--c2-rule); padding: 10px 12px; font: inherit; line-height: 1.5; background: #FFFDF8; } body.lgs-c2-community .lgs-inv__link { width: 100%; min-height: 44px; border: 1px solid var(--c2-rule); padding: 8px 12px; font: inherit; background: #FFFDF8; } body.lgs-c2-community .lgs-inv__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s3) 0; } body.lgs-c2-community .lgs-inv__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; } body.lgs-c2-community .lgs-inv__btn--quiet { background: transparent; color: var(--c2-ink); border: 1px solid rgba(23,20,15,.25); } body.lgs-c2-community .lgs-inv__btn--quiet:hover, body.lgs-c2-community .lgs-inv__btn--quiet:focus-visible { border-color: var(--c2-green); color: var(--c2-green); } body.lgs-c2-community .lgs-inv__btn:focus-visible { outline: 2px solid var(--c2-green); outline-offset: 2px; } body.lgs-c2-community .lgs-inv__qrwrap { margin: var(--s2) 0 var(--s3); } body.lgs-c2-community .lgs-inv__qr { width: 220px; max-width: 100%; background: #FFFFFF; padding: 12px; border: 1px solid var(--c2-rule); } body.lgs-c2-community .lgs-inv__qr svg { display: block; width: 100%; height: auto; } body.lgs-c2-community .lgs-inv__who { font-size: 17px; font-weight: 600; color: var(--c2-ink); margin: 0 0 var(--s2); } body.lgs-c2-community .lgs-inv__note { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-left: 3px solid var(--c2-green); background: rgba(23,20,15,.03); font-style: italic; } body.lgs-c2-community .lgs-inv__principles { margin: 0 0 var(--s3); padding-left: 1.2em; } body.lgs-c2-community .lgs-inv__principles li { margin: 0 0 6px; } body.lgs-c2-community .lgs-inv__cta { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; } body.lgs-c2-community .lgs-inv__after { border-top: 1px solid var(--c2-rule); margin-top: var(--s4); padding-top: var(--s3); } body.lgs-c2-community .lgs-inv__after h2 { font-size: 20px; margin: 0 0 var(--s1); } .lgs-inv__arrival { background: rgba(46,90,56,.08); border-bottom: 1px solid rgba(46,90,56,.25); padding: 10px 16px; font-size: 14.5px; } .lgs-inv__arrival p { margin: 0; max-width: 1100px; margin-left: auto; margin-right: auto; } /* ---- 2.9.14 (owner 2026-09-23): "This page belongs to {town}" is the site's main explanatory copy. Normal body prose (not the old small italic serif), an editorial measure of 46rem (~736px) sharing the page's left edge, generous space kept to the right. The closing line takes the existing serif-italic accent at body size, no panel. ---- */ .lgs-spine.lgs-c2 .lgs-town__vision { --c2-measure-editorial: 46rem; } .lgs-spine.lgs-c2 .lgs-town__vision h2 { max-width: var(--c2-measure-editorial); } .lgs-spine.lgs-c2 .lgs-town__vision-body { max-width: min(var(--c2-measure-editorial), 100%); } .lgs-spine.lgs-c2 .lgs-town__vision .lgs-town__vision-body p { font-family: var(--c2-sans); font-style: normal; font-size: 17px; line-height: 1.65; color: var(--c2-body); max-width: none; margin: 0 0 var(--s3); } .lgs-spine.lgs-c2 .lgs-town__vision .lgs-town__vision-body p.lgs-town__vision-close { font-family: var(--c2-serif); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--c2-ink); margin: var(--s4) 0 0; } .lgs-spine.lgs-c2 .lgs-town__vision p.lgs-town__share-line { font-family: var(--c2-sans); font-style: normal; max-width: var(--c2-measure-editorial); margin-top: var(--s4); } @media (max-width: 640px) { .lgs-spine.lgs-c2 .lgs-town__vision .lgs-town__vision-body p { font-size: 16px; } .lgs-spine.lgs-c2 .lgs-town__vision .lgs-town__vision-body p.lgs-town__vision-close { font-size: 18px; } } /* ---- 2.9.15 BUYLOCAL-1 (owner 2026-09-23): Buy local proves the case. Intro at body size with the two owner-bolded lines; the full goods vocabulary as a compact three-column browse (collapsible groups on a phone); six larger sample cards (3 x 2); a resident-first contribute block with the owner routes underneath. ---- */ .lgs-spine.lgs-c2 :is(.lgs-town__who, .lgs-town__classes, .lgs-town__whatson, .lgs-town__join, .lgs-town__markets) .lgs-town__who-intro { font-size: 16px; line-height: 1.6; color: var(--c2-body); max-width: 46rem; margin: 0 0 var(--s2); } .lgs-spine.lgs-c2 :is(.lgs-town__who, .lgs-town__classes, .lgs-town__whatson, .lgs-town__join, .lgs-town__markets) .lgs-town__who-intro strong { color: var(--c2-ink); font-weight: 600; } .lgs-spine.lgs-c2 :is(.lgs-town__who, .lgs-town__classes, .lgs-town__whatson, .lgs-town__join, .lgs-town__markets) .lgs-town__who-why { margin-bottom: var(--s4); } .lgs-spine.lgs-c2 .lgs-town__browse { border-top: 1px solid var(--c2-hair); border-bottom: 1px solid var(--c2-hair); padding: var(--s3) 0 var(--s2); margin: 0 0 var(--s5); } .lgs-spine.lgs-c2 .lgs-town__browse h3 { font-family: var(--c2-sans); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-muted); margin: 0 0 var(--s2); } .lgs-spine.lgs-c2 .lgs-town__browse-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--s5); } .lgs-spine.lgs-c2 .lgs-town__browse-head { font-family: var(--c2-sans); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--c2-ink); margin: 0 0 var(--s1); } .lgs-spine.lgs-c2 .lgs-town__browse [hidden] { display: none !important; } .lgs-spine.lgs-c2 .lgs-town__browse-toggle { all: unset; box-sizing: border-box; width: 100%; min-height: 44px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font: inherit; color: inherit; } .lgs-spine.lgs-c2 .lgs-town__browse-toggle::after { content: "+"; font-weight: 400; font-size: 20px; line-height: 1; color: var(--c2-muted); } .lgs-spine.lgs-c2 .lgs-town__browse-toggle[aria-expanded="true"]::after { content: "\2212"; } .lgs-spine.lgs-c2 .lgs-town__browse-toggle:focus-visible { outline: 2px solid var(--c2-green); outline-offset: 2px; } .lgs-spine.lgs-c2 .lgs-town__browse-group ul { list-style: none; margin: 0 0 var(--s2); padding: 0; } .lgs-spine.lgs-c2 .lgs-town__browse-group li { font-size: 14px; line-height: 1.45; padding: 3px 0; color: var(--c2-body); } .lgs-spine.lgs-c2 .lgs-town__browse-group li a { color: var(--c2-green); text-decoration: none; } .lgs-spine.lgs-c2 .lgs-town__browse-group li a:hover { text-decoration: underline; text-underline-offset: 3px; } .lgs-spine.lgs-c2 .lgs-town__browse-group li.is-empty { color: var(--c2-muted); } .lgs-spine.lgs-c2 .lgs-town__browse-n { color: var(--c2-muted); } .lgs-spine.lgs-c2 .lgs-town__browse-where { color: var(--c2-muted); font-size: .88em; } .lgs-spine.lgs-c2 .lgs-spine__grid.lgs-town__sample { grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s4); margin-bottom: var(--s4); } /* 2.9.17: 5:2 (was 16:9, ~29% shorter). Own photo, category fallback and paper block all share it; background-size: cover crops, never stretches. */ .lgs-spine.lgs-c2 .lgs-town__sample .lgs-spine__card-media { aspect-ratio: 5 / 2; margin-bottom: var(--s3); } .lgs-spine.lgs-c2 .lgs-town__sample .lgs-spine__card h4 { font-size: 18px; line-height: 1.3; margin-bottom: 4px; } .lgs-spine.lgs-c2 .lgs-town__sample .lgs-spine__town { font-size: 13.5px; margin-bottom: var(--s1); } .lgs-spine.lgs-c2 .lgs-town__sample .lgs-town__desc { font-size: 14.5px; line-height: 1.55; color: var(--c2-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .lgs-spine.lgs-c2 .lgs-town__contribute { margin-top: var(--s5); } .lgs-spine.lgs-c2 .lgs-town__contribute-ask { font-size: 17px; margin: 0 0 4px; } .lgs-spine.lgs-c2 .lgs-town__contribute-ask strong { color: var(--c2-ink); font-weight: 600; } .lgs-spine.lgs-c2 .lgs-town__contribute-lead { font-size: 15px; color: var(--c2-body); max-width: 46rem; margin: 0 0 var(--s3); } /* 2.9.21 BUYLOCAL-3: four equal ways to take part - one outlined button (the former Invite style) for recommend, invite, add and claim. One row on desktop, 2 x 2 up to 900px, one column on a phone. */ .lgs-spine.lgs-c2 .lgs-town__contribute-actions { display: flex; gap: var(--s2); max-width: none; margin: 0 0 var(--s4); } .lgs-spine.lgs-c2 .lgs-town__contribute-btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 8px 10px; border: 1px solid var(--c2-green-deep); border-radius: 2px; background: transparent; color: var(--c2-green-deep); font-size: 14.5px; font-weight: 600; line-height: 1.3; text-decoration: none; } .lgs-spine.lgs-c2 .lgs-town__contribute-btn:hover { background: var(--c2-wash); } .lgs-spine.lgs-c2 .lgs-town__contribute-btn:focus-visible { outline: 2px solid var(--c2-green); outline-offset: 2px; } @media (max-width: 900px) { .lgs-spine.lgs-c2 .lgs-town__contribute-actions { display: grid; grid-template-columns: 1fr 1fr; } /* an odd count (What's on has three) closes on one full-width button */ .lgs-spine.lgs-c2 .lgs-town__contribute-btn:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 520px) { .lgs-spine.lgs-c2 .lgs-town__contribute-actions { grid-template-columns: 1fr; } } .lgs-spine.lgs-c2 .lgs-town__browse-cols { row-gap: var(--s3); } @media (max-width: 900px) { .lgs-spine.lgs-c2 .lgs-spine__grid.lgs-town__sample { grid-template-columns: repeat(2, 1fr); } .lgs-spine.lgs-c2 .lgs-town__browse-cols { gap: 0 var(--s4); } } @media (max-width: 640px) { .lgs-spine.lgs-c2 :is(.lgs-town__who, .lgs-town__classes, .lgs-town__whatson, .lgs-town__join, .lgs-town__markets) .lgs-town__who-intro { font-size: 15.5px; } /* three collapsible groups */ .lgs-spine.lgs-c2 .lgs-town__browse { padding-bottom: 0; } .lgs-spine.lgs-c2 .lgs-town__browse-cols { grid-template-columns: 1fr; } .lgs-spine.lgs-c2 .lgs-town__browse-group { border-top: 1px solid var(--c2-hair); } .lgs-spine.lgs-c2 .lgs-town__browse-head { margin: 0; } .lgs-spine.lgs-c2 .lgs-town__browse-group ul { columns: 2; column-gap: var(--s3); margin-bottom: var(--s2); } .lgs-spine.lgs-c2 .lgs-town__browse-group li { break-inside: avoid; } /* the six cards become readable rows: thumb left, words right */ .lgs-spine.lgs-c2 .lgs-spine__grid.lgs-town__sample { grid-template-columns: 1fr; gap: var(--s3); } .lgs-spine.lgs-c2 .lgs-town__sample .lgs-spine__card { display: grid; grid-template-columns: 104px 1fr; column-gap: var(--s3); align-items: start; } .lgs-spine.lgs-c2 .lgs-town__sample .lgs-spine__card-media { grid-row: 1 / span 3; aspect-ratio: 1 / 1; margin: 0; } .lgs-spine.lgs-c2 .lgs-town__sample .lgs-spine__card h4 { font-size: 16px; margin: 0 0 2px; } .lgs-spine.lgs-c2 .lgs-town__sample .lgs-spine__town { font-size: 13px; margin: 0 0 4px; } .lgs-spine.lgs-c2 .lgs-town__sample .lgs-town__desc { display: -webkit-box; font-size: 13.5px; -webkit-line-clamp: 3; } } /* ---- 2.9.26 MARKETS-1: one Markets section. The single-market feature keeps its kraft panel (the name steps from h2 to h3 under the section heading, at the same size); two or more markets use the Buy local card grammar. ---- */ .lgs-spine.lgs-c2 .lgs-town__markets .lgs-town__market { margin: var(--s2) 0 var(--s4); } .lgs-spine.lgs-c2 .lgs-town__market .lgs-town__market-name { font-family: var(--c2-serif); font-weight: 600; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.01em; line-height: 1.15; color: var(--c2-ink); margin: 0 0 4px; } .lgs-spine.lgs-c2 .lgs-town__market-type { font-size: 13.5px; color: var(--c2-muted); margin: 0 0 var(--s1); } .lgs-spine.lgs-c2 .lgs-town__mgrid .lgs-town__sched { font-size: 13.5px; margin: 0 0 var(--s1); } .lgs-spine.lgs-c2 .lgs-town__mcard-links { font-size: 14px; margin: var(--s2) 0 0; display: flex; flex-wrap: wrap; gap: 4px var(--s3); } .lgs-spine.lgs-c2 .lgs-town__mcard-links a { font-weight: 600; color: var(--c2-green-deep); text-decoration: none; } .lgs-spine.lgs-c2 .lgs-town__mcard-links a:hover { text-decoration: underline; text-underline-offset: 3px; } .lgs-spine.lgs-c2 .lgs-town__markets > .lgs-join__note { margin-top: 0; } @media (max-width: 640px) { /* a market card has more lines than a business card: the thumb spans them all so the description stays in the text column */ .lgs-spine.lgs-c2 .lgs-town__mgrid .lgs-spine__card-media { grid-row: 1 / span 6; } } /* ---- 2.9.28 MONEY-1: the section's closing line - restrained emphasis (body size, semibold ink, the money column's measure), then the source. The food-alone line keeps its italic accent; its words are bold. ---- */ .lgs-spine.lgs-c2 .lgs-town__money .lgs-town__moneyfinal { max-width: 720px; font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--c2-ink); margin: var(--s4) 0 var(--s2); } .lgs-spine.lgs-c2 .lgs-town__moneyclose strong { font-weight: 600; } /* 2.9.29 MONEY-1b: the Totnes example row on other towns carries a small owner tag so the figures read as Totnes's, never the current town's. */ .lgs-spine.lgs-c2 .lgs-town__money .lgs-town__statlabel { max-width: 720px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-muted); margin: var(--s2) 0 calc(-1 * var(--s1)); } /* 2.9.30 MONEY-1d: the Blueprint source now footnotes the figures, so it takes a gap below before the food-alone line (spacing only). */ .lgs-spine.lgs-c2 .lgs-town__money .lgs-town__statrow + .lgs-town__source { margin: var(--s1) 0 var(--s4); } /* 2.9.31 HEARABOUTS-1: the town page's longer show-of-hands box keeps the page's editorial reading measure (the money section only exists on town pages, so this never touches other Hearabouts surfaces). */ .lgs-spine.lgs-c2 .lgs-town__money ~ #lgs-hearabouts .lgs-ha__expl { max-width: 46rem; } /* 2.9.32 NEARBY-1: Nearby = heading, owner intro, the catchment's place links, then the reused postcode + logarithmic radius box (the toolkit's .lgs-search-directory component). Only its skin changes here, and only inside this section: C2 green instead of the legacy orange, no card inside the card, columns that can shrink (the legacy minimums added up to more than this panel's width). Its markup and behaviour are its own. */ .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-town__nearby-intro { font-size: 15px; line-height: 1.55; color: var(--c2-body); max-width: 46rem; margin: 0 0 var(--s3); } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-town__nearby-intro strong { color: var(--c2-ink); font-weight: 600; } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-spine__links { font-size: 14px; margin: 0 0 var(--s4); } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory { --lgs-search-brand: var(--c2-green-deep); --lgs-search-brand-dark: var(--c2-green); border-top: 1px solid var(--c2-hair); padding-top: var(--s4); } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__card { background: none; box-shadow: none; padding: 0; border: 0; } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__heading { font-family: var(--c2-serif); font-size: 19px; font-weight: 600; color: var(--c2-ink); margin: 0 0 var(--s1); } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__intro { font-size: 14px; color: var(--c2-muted); margin: 0 0 var(--s3); } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s3); } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__field label { font-size: 13.5px; font-weight: 600; color: var(--c2-ink); } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__field input[type="text"], .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__field select { border-radius: 2px; border-color: var(--c2-rule); font-size: 15px; color: var(--c2-ink); } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__field input:focus, .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__field select:focus { box-shadow: 0 0 0 3px rgba(47, 82, 51, .18); } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__radius-value { background: var(--c2-hair); } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__field--submit { min-width: 0; } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__field--submit button { min-width: 0; min-height: 44px; border-radius: 2px; padding: 0 22px; font-size: 14.5px; font-weight: 600; } @media (max-width: 900px) { .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 640px) { .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__grid { grid-template-columns: minmax(0, 1fr); } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-search-directory__field--submit button { width: 100%; } } /* 2.9.33 NEARBY-2: nearby places as a compact row of small text pills (no cards, no imagery); the results page's "Filter by category" control and the capped-count note. */ .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-town__places { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-town__places li { margin: 0; padding: 0; } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-town__places a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--c2-rule); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: var(--c2-green-deep); text-decoration: none; } .lgs-spine.lgs-c2 .lgs-town__nearby .lgs-town__places a:hover { border-color: var(--c2-green-deep); } body.lgs-c2-search .lgs-srch__filter { margin: 0 0 var(--s3); max-width: 760px; } body.lgs-c2-search .lgs-srch__filterrow { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; } body.lgs-c2-search .lgs-srch__filter select { flex: 0 1 320px; min-width: 0; max-width: 100%; border: 1px solid var(--c2-rule); border-radius: 2px; background: #fff; padding: 11px 12px; font-size: 16px; color: var(--c2-ink); min-height: 44px; } body.lgs-c2-search .lgs-srch__filtergo { background: none; color: var(--c2-green-deep); border: 1px solid var(--c2-green-deep); border-radius: 2px; padding: 0 18px; min-height: 44px; font-weight: 600; font-size: 14.5px; cursor: pointer; } body.lgs-c2-search .lgs-srch__capnote { font-size: 13.5px; color: var(--c2-muted); margin: 0 0 var(--s2); } /* 2.9.34 MARKETS-2: the Markets section scales by count. 2 = two balanced cards, 3 = a row of three, 4+ = three and Explore all (a link to the town's markets browse). The one-market kraft feature is unchanged. On phones every card is a row (small thumb, name first), so images never dominate; links keep a 44px tap target. */ .lgs-spine.lgs-c2 .lgs-spine__grid.lgs-town__mgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lgs-spine.lgs-c2 .lgs-spine__grid.lgs-town__mgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lgs-spine.lgs-c2 .lgs-town__mgrid--2 .lgs-spine__card-media { aspect-ratio: 2 / 1; } .lgs-spine.lgs-c2 .lgs-town__mgrid--3 .lgs-spine__card-media { aspect-ratio: 16 / 9; } .lgs-spine.lgs-c2 .lgs-town__mgrid--2 .lgs-spine__card h4 { font-size: 21px; } .lgs-spine.lgs-c2 .lgs-town__mgrid .lgs-spine__card h4 { font-family: var(--c2-serif); font-weight: 600; } .lgs-spine.lgs-c2 .lgs-town__mgrid .lgs-spine__card h4 a { color: var(--c2-ink); } .lgs-spine.lgs-c2 .lgs-town__mcard-links { flex-direction: column; gap: 0; } .lgs-spine.lgs-c2 .lgs-town__mcard-links a, .lgs-spine.lgs-c2 .lgs-town__market--feature .lgs-town__market-body p > a, .lgs-spine.lgs-c2 .lgs-town__mexplore a { display: inline-flex; align-items: center; min-height: 44px; } .lgs-spine.lgs-c2 .lgs-town__mexplore { margin: 0 0 var(--s4); } .lgs-spine.lgs-c2 .lgs-town__mexplore a { font-weight: 600; font-size: 15px; color: var(--c2-green-deep); text-decoration: none; } .lgs-spine.lgs-c2 .lgs-town__mexplore a:hover { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 900px) { /* three across gets cramped: the row treatment instead of 2 + 1 */ .lgs-spine.lgs-c2 .lgs-spine__grid.lgs-town__mgrid--3 { grid-template-columns: 1fr; gap: var(--s3); } .lgs-spine.lgs-c2 .lgs-town__mgrid--3 .lgs-spine__card { display: grid; grid-template-columns: 160px 1fr; column-gap: var(--s3); align-items: start; } .lgs-spine.lgs-c2 .lgs-town__mgrid--3 .lgs-spine__card-media { grid-row: 1 / span 6; aspect-ratio: 4 / 3; margin: 0; } } @media (max-width: 640px) { .lgs-spine.lgs-c2 .lgs-spine__grid.lgs-town__mgrid--2 { grid-template-columns: 1fr; } .lgs-spine.lgs-c2 .lgs-town__mgrid .lgs-spine__card { grid-template-columns: 104px 1fr; } .lgs-spine.lgs-c2 .lgs-town__mgrid .lgs-spine__card-media { aspect-ratio: 1 / 1; } .lgs-spine.lgs-c2 .lgs-town__mgrid--2 .lgs-spine__card h4 { font-size: 17px; } } /* The feature's links keep their approved 1px rule under the words: drawn as an underline so the 44px tap area does not push it below the text. */ .lgs-spine.lgs-c2 .lgs-town__market--feature .lgs-town__market-body p > a { border-bottom: 0; padding-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } /* 2.9.36 FAQ-1: town-page Quick answers. Each question is a real button: centred text, one +/− mark at the far right (no caret), the whole row clickable, a visible focus ring. Answers sit left aligned on one shared reading measure. Other pages' Quick answers keep their details markup. */ .lgs-spine.lgs-c2 .lgs-town__faq { font-size: 15px; } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__row { border-top: 1px solid var(--c2-hair); } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__row:last-child { border-bottom: 1px solid var(--c2-hair); } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__q { margin: 0; font-size: inherit; line-height: inherit; } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__q button, .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__q button:hover, .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__q button:focus { position: relative; display: block; width: 100%; min-height: 48px; margin: 0; padding: 12px 44px; background: none; border: 0; border-radius: 0; box-shadow: none; text-align: center; font-family: var(--c2-sans); font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--c2-ink); text-transform: none; letter-spacing: 0; cursor: pointer; white-space: normal; overflow-wrap: anywhere; } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__q button:hover .lgs-faq__qt { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__q button:focus-visible { outline: 2px solid var(--c2-green-deep); outline-offset: -2px; } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__mark { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; line-height: 1; color: var(--c2-green-deep); } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__mark::before { content: "+"; } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__q button[aria-expanded="true"] .lgs-faq__mark::before { content: "\2212"; } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__a { max-width: 42rem; margin: 0 auto; padding: 0 12px 16px; text-align: left; } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__a p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c2-body); text-align: left; } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__a a { color: var(--c2-green-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .lgs-spine.lgs-c2 .lgs-town__faq ~ .lgs-updated { font-size: 13px; color: var(--c2-muted); } @media (max-width: 640px) { .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__q button { padding: 12px 40px; font-size: 15px; } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__a { padding: 0 4px 14px; } } /* 2.9.39 FAQ-1d (owner): the whole section left aligned. Question and answer share the section's content edge; the answer keeps a reading measure from that edge (no centred column); +/− stays far right. */ .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__q button, .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__q button:hover, .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__q button:focus { text-align: left; padding: 12px 44px 12px 0; } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__q button:focus-visible { outline-offset: 2px; } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__mark { right: 4px; } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__a { max-width: 46rem; margin: -2px 0 0; padding: 0 44px 14px 0; } @media (max-width: 640px) { .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__q button { padding: 12px 36px 12px 0; } .lgs-spine.lgs-c2 .lgs-town__faq .lgs-faq__a { padding: 0 0 12px; } } /* ------------------------------------------------------------------ */ /* 32. FRONTPAGE-1 (2026-09-24): the town page as the local paper. */ /* Town pages only (owner ruling R9): body.lgs-fp-page + main.lgs-fp. */ /* The shell header/footer keep the site tokens. Faces self-hosted */ /* (ruling R7): Newsreader + Work Sans, SIL OFL 1.1 (fonts/OFL-*.txt). */ /* ------------------------------------------------------------------ */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/newsreader-latin.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/newsreader-italic-latin.woff2") format("woff2"); } @font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/worksans-latin.woff2") format("woff2"); } body.lgs-fp-page { background: #fbf9f4; } .lgs-spine.lgs-c2.lgs-fp { --fp-ground: #fbf9f4; --fp-tint: #f4f0e8; --fp-ink: #1e2f3c; --fp-navy: #1d3a4d; --fp-steel: #3b6b88; --fp-blue: #dfe9ef; --fp-blush: #f3d9d2; --fp-hair: #cdc7ba; --fp-muted: #4c5b66; --fp-serif: "Newsreader", Georgia, "Times New Roman", serif; --fp-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* the C2 and legacy tokens the reused sections read */ --c2-paper: var(--fp-ground); --c2-ink: var(--fp-ink); --c2-body: var(--fp-ink); --c2-muted: var(--fp-muted); --c2-faint: var(--fp-muted); --c2-green: var(--fp-navy); --c2-green-deep: var(--fp-navy); --c2-rule-strong: var(--fp-ink); --c2-rule: rgba(30, 47, 60, .28); --c2-hair: var(--fp-hair); --c2-wash: var(--fp-tint); --c2-card: var(--fp-tint); --c2-kraft: var(--fp-tint); --c2-serif: var(--fp-serif); --c2-sans: var(--fp-sans); --lgs-green: var(--fp-navy); --lgs-deep: var(--fp-navy); --lgs-cta: var(--fp-navy); --lgs-cta-hover: #122735; --lgs-ink: var(--fp-ink); --lgs-ink-strong: var(--fp-ink); --lgs-muted: var(--fp-muted); --lgs-card: var(--fp-ground); --lgs-oat: var(--fp-tint); --lgs-aside: var(--fp-tint); --lgs-sage-wash: var(--fp-tint); --lgs-card-border: var(--fp-hair); --lgs-sage-border: var(--fp-hair); --lgs-card-shadow: none; --lgs-font-head: var(--fp-serif); --lgs-font-body: var(--fp-serif); --lgs-weight-head: 600; max-width: 1180px; margin: 0 auto; padding: 0 24px 48px; box-sizing: border-box; background: var(--fp-ground); color: var(--fp-ink); font-family: var(--fp-serif); font-size: 17px; line-height: 1.5; } .lgs-spine.lgs-fp a { color: var(--fp-navy); } .lgs-spine.lgs-fp h1, .lgs-spine.lgs-fp h2, .lgs-spine.lgs-fp h3, .lgs-spine.lgs-fp h4 { font-family: var(--fp-serif); color: var(--fp-ink); letter-spacing: -.005em; } .lgs-spine.lgs-fp h2 { font-size: 26px; line-height: 1.15; font-weight: 600; margin: 0 0 10px; } .lgs-spine.lgs-fp h4 { font-size: 19px; font-weight: 600; margin: 6px 0 2px; } .lgs-spine.lgs-fp .lgs-fp__kicker, .lgs-spine.lgs-fp .lgs-town__kicker { font-family: var(--fp-sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fp-ink); margin: 0 0 6px; } /* sections read as newspaper columns, not boxed cards */ .lgs-spine.lgs-fp section, .lgs-spine.lgs-fp .lgs-town__money, .lgs-spine.lgs-fp .lgs-town__trade, .lgs-spine.lgs-fp .lgs-town__who, .lgs-spine.lgs-fp .lgs-town__whatson, .lgs-spine.lgs-fp .lgs-town__nearby, .lgs-spine.lgs-fp .lgs-town__market, .lgs-spine.lgs-fp .lgs-town__gap { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; } .lgs-spine.lgs-fp .lgs-fp__main > *, .lgs-spine.lgs-fp .lgs-fp__side > *, .lgs-spine.lgs-fp .lgs-fp__lower > * { margin-top: 28px; } .lgs-spine.lgs-fp .lgs-fp__main > section, .lgs-spine.lgs-fp .lgs-fp__lower > section, .lgs-spine.lgs-fp .lgs-fp__pair > section, .lgs-spine.lgs-fp .lgs-fp__side > section { border-top: 1px solid var(--fp-ink); padding-top: 14px; } .lgs-spine.lgs-fp .lgs-fp__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--fp-ink); color: var(--fp-ink); font-family: var(--fp-sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-sizing: border-box; } .lgs-spine.lgs-fp .lgs-fp__btn--solid { background: var(--fp-navy); border-color: var(--fp-navy); color: #fff; } .lgs-spine.lgs-fp .lgs-fp__btn:hover { text-decoration: underline; } .lgs-spine.lgs-fp .lgs-town__cta { background: var(--fp-navy); color: #fff; border-radius: 0; font-family: var(--fp-sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; } /* masthead */ .lgs-spine.lgs-fp .lgs-fp__mast { padding: 14px 0 0; text-align: left; } .lgs-spine.lgs-fp .lgs-fp__topline { border-bottom: 1px solid var(--fp-ink); padding-bottom: 8px; } .lgs-spine.lgs-fp .lgs-fp__topline .lgs-spine__crumbs { font-family: var(--fp-sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-muted); margin: 0; } .lgs-spine.lgs-fp .lgs-fp__mastgrid { display: grid; grid-template-columns: 1fr minmax(0, 2fr) 1fr; gap: 20px; align-items: center; padding: 14px 0 12px; } .lgs-spine.lgs-fp .lgs-fp__dateline { margin: 0; font-family: var(--fp-sans); font-size: 12px; line-height: 1.5; color: var(--fp-ink); } .lgs-spine.lgs-fp .lgs-fp__dateline time { display: block; font-family: var(--fp-serif); font-size: 16px; } .lgs-spine.lgs-fp .lgs-fp__dateline span { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; color: var(--fp-muted); } .lgs-spine.lgs-fp .lgs-fp__title { text-align: center; } .lgs-spine.lgs-fp .lgs-fp__title .lgs-fp__kicker { letter-spacing: .22em; font-size: 10px; } .lgs-spine.lgs-fp .lgs-fp__mast h1 { font-family: var(--fp-serif); font-weight: 700; font-size: clamp(60px, 9vw, 112px); line-height: .95; letter-spacing: -.025em; margin: 2px 0 6px; color: var(--fp-ink); } .lgs-spine.lgs-fp .lgs-fp__desc { margin: 0; font-size: 17px; font-style: italic; color: var(--fp-steel); font-weight: 400; } .lgs-spine.lgs-fp .lgs-fp__map { margin: 0; } .lgs-spine.lgs-fp .lgs-fp__plate { display: block; width: 100%; aspect-ratio: 1200 / 520; background: var(--fp-tint) var(--lgs-town-map) center / cover no-repeat; } .lgs-spine.lgs-fp .lgs-fp__map figcaption { font-family: var(--fp-sans); font-size: 9px; color: var(--fp-muted); text-align: right; margin-top: 3px; } .lgs-spine.lgs-fp .lgs-fp__rule { height: 3px; background: var(--fp-ink); } .lgs-spine.lgs-fp .lgs-fp__brandline { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0 0; } .lgs-spine.lgs-fp .lgs-fp__word { font-family: var(--fp-sans); font-size: 12px; letter-spacing: .2em; margin: 0; } .lgs-spine.lgs-fp .lgs-fp__motto { margin: 0; font-style: italic; color: var(--fp-steel); font-size: 15px; text-align: right; } /* section strip */ .lgs-spine.lgs-fp .lgs-fp__strip { display: flex; flex-wrap: wrap; border-top: 1px solid var(--fp-ink); border-bottom: 3px double var(--fp-ink); margin: 14px 0 0; padding: 0; gap: 0; background: none; } .lgs-spine.lgs-fp .lgs-fp__tile { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; min-height: 44px; color: var(--fp-ink); text-decoration: none; border-left: 1px solid var(--fp-hair); box-sizing: border-box; } .lgs-spine.lgs-fp .lgs-fp__tile:first-child { border-left: 0; padding-left: 0; } .lgs-spine.lgs-fp .lgs-fp__tl { font-family: var(--fp-sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .lgs-spine.lgs-fp .lgs-fp__tn { font-size: 20px; font-weight: 700; line-height: 1.1; } .lgs-spine.lgs-fp .lgs-fp__tn small { font-size: 13px; font-weight: 400; color: var(--fp-muted); } .lgs-spine.lgs-fp .lgs-fp__tile:hover .lgs-fp__tl { text-decoration: underline; } /* sponsor line + adverts */ .lgs-spine.lgs-fp .lgs-fp__sponsor { margin: 10px 0 0; padding: 8px 12px; border: 1px solid var(--fp-hair); font-family: var(--fp-sans); font-size: 12px; color: var(--fp-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .lgs-spine.lgs-fp .lgs-fp__adlabel { font-style: normal; font-family: var(--fp-sans); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; padding: 1px 5px; margin-left: auto; } .lgs-spine.lgs-fp .lgs-fp__ad { padding: 16px; } .lgs-spine.lgs-fp .lgs-fp__ad--tile1 { background: var(--fp-blush); } .lgs-spine.lgs-fp .lgs-fp__ad--tile2 { background: var(--fp-navy); color: #fff; } .lgs-spine.lgs-fp .lgs-fp__ad--tile2 a.lgs-fp__btn { border-color: #fff; background: transparent; color: #fff; } .lgs-spine.lgs-fp .lgs-fp__adhead { display: flex; gap: 10px; align-items: baseline; margin: 0 0 8px; font-family: var(--fp-serif); font-size: 22px; font-style: italic; line-height: 1.15; } .lgs-spine.lgs-fp .lgs-fp__ad--tile2 .lgs-fp__adhead { font-style: normal; font-family: var(--fp-sans); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .lgs-spine.lgs-fp .lgs-fp__adtext { margin: 0 0 12px; font-size: 15px; } .lgs-spine.lgs-fp .lgs-fp__adimg { width: 100%; height: auto; margin: 0 0 10px; display: block; } /* the lead */ .lgs-spine.lgs-fp .lgs-fp__lead { background: var(--fp-tint); padding: 22px; border-top: 0 !important; } .lgs-spine.lgs-fp .lgs-fp__lead--photo { background: var(--fp-tint) var(--lgs-fp-lead) center / cover no-repeat; padding: 180px 22px 22px; } .lgs-spine.lgs-fp .lgs-fp__leadpanel { max-width: 560px; } .lgs-spine.lgs-fp .lgs-fp__lead--photo .lgs-fp__leadpanel { background: rgba(251, 249, 244, .95); padding: 18px; } .lgs-spine.lgs-fp .lgs-fp__lead h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.08; } .lgs-spine.lgs-fp .lgs-fp__lead p { font-size: 17px; } .lgs-spine.lgs-fp .lgs-fp__lead blockquote { margin: 0 0 12px; font-style: italic; border-left: 3px solid var(--fp-navy); padding-left: 12px; } .lgs-spine.lgs-fp .lgs-fp__btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; } /* the grid */ .lgs-spine.lgs-fp .lgs-fp__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 36px; margin-top: 18px; } .lgs-spine.lgs-fp .lgs-fp__side { border-left: 1px solid var(--fp-hair); padding-left: 24px; } .lgs-spine.lgs-fp .lgs-fp__main > :first-child, .lgs-spine.lgs-fp .lgs-fp__side > :first-child { margin-top: 0; } .lgs-spine.lgs-fp .lgs-fp__side h2 { font-size: 21px; text-transform: none; } /* In the shops: three across with column rules, photo above */ .lgs-spine.lgs-fp .lgs-town__sample { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .lgs-spine.lgs-fp .lgs-town__sample .lgs-spine__card { border: 0; border-left: 1px solid var(--fp-hair); border-radius: 0; background: none; box-shadow: none; padding: 0 14px; } .lgs-spine.lgs-fp .lgs-town__sample .lgs-spine__card:first-child { border-left: 0; padding-left: 0; } .lgs-spine.lgs-fp .lgs-spine__card { background: none; border-radius: 0; box-shadow: none; } .lgs-spine.lgs-fp .lgs-spine__card .lgs-spine__town { font-family: var(--fp-sans); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fp-muted); margin: 8px 0 0; } .lgs-spine.lgs-fp .lgs-town__desc { font-size: 15px; margin: 4px 0 0; } .lgs-spine.lgs-fp .lgs-fp__claim, .lgs-spine.lgs-fp .lgs-fp__sells { font-family: var(--fp-sans); font-size: 12px; color: var(--fp-muted); margin: 6px 0 0; } .lgs-spine.lgs-fp .lgs-fp__sells { color: var(--fp-navy); font-weight: 600; } .lgs-spine.lgs-fp .lgs-fp__also { font-size: 15px; margin: 14px 0 0; } .lgs-spine.lgs-fp .lgs-town__who-more summary { font-family: var(--fp-sans); font-size: 13px; font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; } /* money, values, why-buy, essay */ .lgs-spine.lgs-fp .lgs-town__multiplier { background: var(--fp-tint); border: 0; border-radius: 0; } .lgs-spine.lgs-fp .lgs-fp__values ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--fp-hair); } .lgs-spine.lgs-fp .lgs-fp__values li { padding: 10px 12px 0; border-left: 1px solid var(--fp-hair); font-size: 14px; } .lgs-spine.lgs-fp .lgs-fp__values li:first-child { border-left: 0; padding-left: 0; } .lgs-spine.lgs-fp .lgs-fp__values strong { display: block; font-size: 15px; margin-bottom: 4px; } .lgs-spine.lgs-fp .lgs-fp__whybuy { background: var(--fp-tint); padding: 20px !important; border: 1px solid var(--fp-hair) !important; } .lgs-spine.lgs-fp .lgs-fp__whybuy h2 { font-style: italic; font-weight: 400; color: var(--fp-steel); font-size: 26px; } .lgs-spine.lgs-fp .lgs-fp__whybuy ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; } .lgs-spine.lgs-fp .lgs-fp__whybuy li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; } .lgs-spine.lgs-fp .lgs-fp__whybuy li svg { flex: 0 0 28px; color: var(--fp-ink); } .lgs-spine.lgs-fp .lgs-fp__whybuy li strong { display: block; } .lgs-spine.lgs-fp .lgs-fp__signoff { text-align: right; font-style: italic; color: var(--fp-steel); margin: 14px 0 0; } .lgs-spine.lgs-fp .lgs-fp__essay .lgs-town__vision-body { max-width: none; } .lgs-spine.lgs-fp .lgs-fp__essay .lgs-town__vision-body p { font-size: 17px; font-style: normal; margin: 0 0 10px; } /* sidebar pieces */ .lgs-spine.lgs-fp .lgs-fp__side .lgs-ha { background: var(--fp-blue); border: 0; border-radius: 0; padding: 16px; box-shadow: none; } .lgs-spine.lgs-fp .lgs-fp__side .lgs-ha * { max-width: 100%; } .lgs-spine.lgs-fp .lgs-fp__side .lgs-ha__row { display: flex; flex-direction: column; gap: 8px; } .lgs-spine.lgs-fp .lgs-fp__side .lgs-ha__expl { font-size: 13px; } .lgs-spine.lgs-fp .lgs-fp__onmap { border: 1px solid var(--fp-ink) !important; padding: 14px !important; } .lgs-spine.lgs-fp .lgs-fp__onmap h2 { font-size: 19px; } .lgs-spine.lgs-fp .lgs-fp__doors { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--fp-sans); font-size: 13px; font-weight: 600; } .lgs-spine.lgs-fp .lgs-fp__doors a, .lgs-spine.lgs-fp .lgs-fp__more a { min-height: 44px; display: inline-flex; align-items: center; } .lgs-spine.lgs-fp .lgs-fp__more { font-family: var(--fp-sans); font-size: 13px; margin: 4px 0 0; } /* lower sections */ .lgs-spine.lgs-fp .lgs-fp__lower { border-top: 3px solid var(--fp-ink); margin-top: 36px; } .lgs-spine.lgs-fp .lgs-fp__shopsgrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 28px; } .lgs-spine.lgs-fp .lgs-fp__shopsgrid .lgs-town__gap { background: var(--fp-tint); padding: 14px; font-size: 14px; } .lgs-spine.lgs-fp .lgs-town__browse h3 { display: none; } .lgs-spine.lgs-fp .lgs-town__browse-where { color: var(--fp-muted); font-size: .85em; } .lgs-spine.lgs-fp .lgs-fp__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; } .lgs-spine.lgs-fp .lgs-fp__nearbygrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; align-items: start; } .lgs-spine.lgs-fp .lgs-fp__colophon { margin-top: 40px; padding: 20px 0 0; border-top: 3px double var(--fp-ink); font-size: 15px; } .lgs-spine.lgs-fp .lgs-fp__colophon .lgs-fp__word { font-size: 14px; margin-bottom: 8px; } /* phone: one column in the brief's reading order, no script */ @media (max-width: 899px) { .lgs-spine.lgs-c2.lgs-fp { display: flex; flex-direction: column; padding: 0 16px 36px; } .lgs-spine.lgs-fp .lgs-fp__grid, .lgs-spine.lgs-fp .lgs-fp__main, .lgs-spine.lgs-fp .lgs-fp__side, .lgs-spine.lgs-fp .lgs-fp__lower, .lgs-spine.lgs-fp .lgs-fp__pair { display: contents; } .lgs-spine.lgs-fp .lgs-fp__mast { order: 1; } .lgs-spine.lgs-fp .lgs-fp__strip { order: 2; } .lgs-spine.lgs-fp .lgs-fp__sponsor { order: 3; } .lgs-spine.lgs-fp #lead { order: 4; } .lgs-spine.lgs-fp #stories { order: 5; } .lgs-spine.lgs-fp #whats-on { order: 6; } .lgs-spine.lgs-fp #lgs-hearabouts { order: 7; } .lgs-spine.lgs-fp #buy-local { order: 8; } .lgs-spine.lgs-fp .lgs-fp__ad--tile1 { order: 9; } .lgs-spine.lgs-fp .lgs-town__money { order: 10; } .lgs-spine.lgs-fp #values { order: 11; } .lgs-spine.lgs-fp #why-buy { order: 12; } .lgs-spine.lgs-fp #why { order: 13; } .lgs-spine.lgs-fp #shops-by-category { order: 14; } .lgs-spine.lgs-fp #classes-activities { order: 15; } .lgs-spine.lgs-fp #market { order: 16; } .lgs-spine.lgs-fp #trade { order: 17; } .lgs-spine.lgs-fp #join { order: 18; } .lgs-spine.lgs-fp #nearby { order: 19; } .lgs-spine.lgs-fp #quick-answers { order: 20; } .lgs-spine.lgs-fp #colophon { order: 21; } .lgs-spine.lgs-fp .lgs-fp__ad--tile2 { order: 22; } .lgs-spine.lgs-fp #put-on-map { order: 23; } .lgs-spine.lgs-fp .lgs-fp__side { border: 0; padding: 0; } .lgs-spine.lgs-fp section, .lgs-spine.lgs-fp .lgs-fp__ad, .lgs-spine.lgs-fp .lgs-fp__stories, .lgs-spine.lgs-fp .lgs-fp__colophon { margin-top: 26px; } .lgs-spine.lgs-fp .lgs-fp__mastgrid { grid-template-columns: 1fr; gap: 6px; text-align: center; padding-top: 12px; } .lgs-spine.lgs-fp .lgs-fp__dateline { order: 2; text-align: center; } .lgs-spine.lgs-fp .lgs-fp__dateline time, .lgs-spine.lgs-fp .lgs-fp__dateline span { display: inline; } .lgs-spine.lgs-fp .lgs-fp__dateline span::before { content: " · "; } .lgs-spine.lgs-fp .lgs-fp__title { order: 1; } .lgs-spine.lgs-fp .lgs-fp__map { order: 3; } .lgs-spine.lgs-fp .lgs-fp__plate { aspect-ratio: auto; height: 84px; } .lgs-spine.lgs-fp .lgs-fp__mast h1 { font-size: 68px; } .lgs-spine.lgs-fp .lgs-fp__brandline { display: block; } .lgs-spine.lgs-fp .lgs-fp__motto { text-align: left; margin-top: 4px; } .lgs-spine.lgs-fp .lgs-fp__strip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; margin-top: 14px; } .lgs-spine.lgs-fp .lgs-fp__tile, .lgs-spine.lgs-fp .lgs-fp__tile:first-child { border: 1px solid var(--fp-ink); padding: 10px 12px; } .lgs-spine.lgs-fp .lgs-fp__tile:last-child:nth-child(odd) { grid-column: 1 / -1; } .lgs-spine.lgs-fp .lgs-fp__tn { font-size: 22px; } .lgs-spine.lgs-fp .lgs-fp__lead { padding: 18px 16px; } .lgs-spine.lgs-fp .lgs-fp__lead--photo { padding-top: 140px; } .lgs-spine.lgs-fp .lgs-town__sample { grid-template-columns: 1fr; } .lgs-spine.lgs-fp .lgs-town__sample .lgs-spine__card, .lgs-spine.lgs-fp .lgs-town__sample .lgs-spine__card:first-child { border-left: 0; padding: 0 0 16px; border-bottom: 1px solid var(--fp-hair); margin-bottom: 14px; } .lgs-spine.lgs-fp .lgs-fp__values ul { grid-template-columns: 1fr; } .lgs-spine.lgs-fp .lgs-fp__values li, .lgs-spine.lgs-fp .lgs-fp__values li:first-child { border-left: 0; padding: 10px 0; border-bottom: 1px solid var(--fp-hair); } .lgs-spine.lgs-fp .lgs-fp__whybuy ul, .lgs-spine.lgs-fp .lgs-fp__shopsgrid, .lgs-spine.lgs-fp .lgs-fp__nearbygrid { grid-template-columns: 1fr; } } /* 32b. FRONTPAGE-1b review fixes */ .lgs-spine.lgs-fp .lgs-fp__title .lgs-fp__kicker { letter-spacing: .14em; white-space: nowrap; } .lgs-spine.lgs-fp .lgs-fp__essay .lgs-town__vision-body p { font-family: var(--fp-serif); } .lgs-spine.lgs-fp .lgs-fp__side .lgs-town__contribute-actions, .lgs-spine.lgs-fp .lgs-fp__pair .lgs-town__contribute-actions { display: grid; grid-template-columns: 1fr; gap: 8px; } .lgs-spine.lgs-fp .lgs-fp__side .lgs-town__contribute-btn, .lgs-spine.lgs-fp .lgs-fp__pair .lgs-town__contribute-btn { width: 100%; max-width: none; box-sizing: border-box; } .lgs-spine.lgs-fp .lgs-fp__shopsgrid { display: flex; gap: 28px; align-items: flex-start; } .lgs-spine.lgs-fp .lgs-fp__shopsgrid > div { flex: 1 1 auto; min-width: 0; } .lgs-spine.lgs-fp .lgs-fp__shopsgrid > .lgs-town__gap { flex: 0 0 260px; } @media (max-width: 899px) { .lgs-spine.lgs-fp .lgs-fp__sponsor { order: 5; } .lgs-spine.lgs-fp #stories { order: 5; } .lgs-spine.lgs-fp .lgs-fp__topline { padding-bottom: 6px; } .lgs-spine.lgs-fp .lgs-fp__mastgrid { padding: 8px 0 8px; gap: 4px; } .lgs-spine.lgs-fp .lgs-fp__title .lgs-fp__kicker { font-size: 9px; letter-spacing: .06em; } .lgs-spine.lgs-fp .lgs-fp__mast h1 { font-size: 60px; margin: 0 0 2px; } .lgs-spine.lgs-fp .lgs-fp__desc { font-size: 15px; line-height: 1.35; } .lgs-spine.lgs-fp .lgs-fp__dateline, .lgs-spine.lgs-fp .lgs-fp__dateline time { font-size: 13px; } .lgs-spine.lgs-fp .lgs-fp__plate { height: 64px; } .lgs-spine.lgs-fp .lgs-fp__motto { font-size: 14px; line-height: 1.35; } .lgs-spine.lgs-fp .lgs-fp__strip { margin-top: 10px; gap: 6px; } .lgs-spine.lgs-fp .lgs-fp__tile, .lgs-spine.lgs-fp .lgs-fp__tile:first-child { padding: 7px 10px; } .lgs-spine.lgs-fp .lgs-fp__tl { font-size: 10px; } .lgs-spine.lgs-fp .lgs-fp__tn { font-size: 19px; } .lgs-spine.lgs-fp .lgs-fp__tn small { font-size: 12px; } .lgs-spine.lgs-fp .lgs-fp__lead { margin-top: 16px; } .lgs-spine.lgs-fp .lgs-fp__shopsgrid { display: block; } /* cards: the photo above the text on a phone too */ .lgs-spine.lgs-fp .lgs-town__sample .lgs-spine__card { display: block; } .lgs-spine.lgs-fp .lgs-town__sample .lgs-spine__card .lgs-spine__card-media { width: 100%; height: auto; aspect-ratio: 5 / 2; margin: 0 0 8px; } } /* 32c. masthead fit */ .lgs-spine.lgs-fp .lgs-fp__mast h1 { margin-top: 10px; } @media (max-width: 899px) { .lgs-spine.lgs-fp .lgs-fp__mastgrid { grid-template-columns: minmax(0, 1fr); } .lgs-spine.lgs-fp .lgs-fp__title .lgs-fp__kicker { white-space: normal; font-size: 9px; letter-spacing: .08em; line-height: 1.5; } .lgs-spine.lgs-fp .lgs-fp__mast h1 { margin-top: 4px; } } /* 32d. FRONTPAGE-1d (owner review): What's on rows with a picture box, Groups & clubs tightened, doors as one line; everything left aligned. */ .lgs-spine.lgs-fp .lgs-fp__whatson h2, .lgs-spine.lgs-fp .lgs-fp__notices h2 { font-size: 20px; text-transform: uppercase; letter-spacing: .02em; font-weight: 700; padding-bottom: 8px; border-bottom: 3px solid var(--fp-ink); margin-bottom: 0; } .lgs-spine.lgs-fp .lgs-fp__side > .lgs-fp__whatson { border-top: 0; padding-top: 0; } .lgs-spine.lgs-fp .lgs-fp__onlist { list-style: none; margin: 0; padding: 0; } .lgs-spine.lgs-fp .lgs-fp__on { display: grid; grid-template-columns: 34px 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--fp-hair); text-align: left; } .lgs-spine.lgs-fp .lgs-fp__ondate { display: flex; flex-direction: column; align-items: center; line-height: 1; } .lgs-spine.lgs-fp .lgs-fp__ondate span { font-family: var(--fp-sans); font-size: 10px; letter-spacing: .1em; color: var(--fp-muted); } .lgs-spine.lgs-fp .lgs-fp__ondate b { font-family: var(--fp-serif); font-size: 22px; font-weight: 700; margin-top: 2px; } .lgs-spine.lgs-fp .lgs-fp__onpic { width: 52px; height: 52px; box-sizing: border-box; border: 1px solid var(--fp-ink); background: var(--fp-tint); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--fp-muted); } .lgs-spine.lgs-fp .lgs-fp__onpic img { width: 100%; height: 100%; object-fit: cover; display: block; } .lgs-spine.lgs-fp .lgs-fp__ontext { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lgs-spine.lgs-fp .lgs-fp__ontitle { font-family: var(--fp-serif); font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--fp-ink); text-decoration: none; } .lgs-spine.lgs-fp .lgs-fp__ontitle:hover { text-decoration: underline; } .lgs-spine.lgs-fp .lgs-fp__onmeta { font-family: var(--fp-sans); font-size: 12px; line-height: 1.4; color: var(--fp-muted); } .lgs-spine.lgs-fp .lgs-fp__onmeta .lgs-join__chip { font-size: 10px; } .lgs-spine.lgs-fp .lgs-fp__onmore { margin-top: 12px; } .lgs-spine.lgs-fp .lgs-fp__onmore > summary { list-style: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; background: var(--fp-navy); color: #fff; font-family: var(--fp-sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } .lgs-spine.lgs-fp .lgs-fp__onmore > summary::-webkit-details-marker { display: none; } .lgs-spine.lgs-fp .lgs-fp__onmore[open] > summary { background: transparent; color: var(--fp-navy); border: 1px solid var(--fp-navy); } .lgs-spine.lgs-fp .lgs-fp__whatson .lgs-join__note, .lgs-spine.lgs-fp .lgs-fp__notices .lgs-join__note { font-size: 12px; margin: 10px 0 0; text-align: left; } .lgs-spine.lgs-fp .lgs-fp__links { font-family: var(--fp-sans); font-size: 13px; line-height: 1.5; margin: 10px 0 0; text-align: left; } .lgs-spine.lgs-fp .lgs-fp__links strong { display: block; font-family: var(--fp-serif); font-size: 15px; margin-bottom: 2px; } .lgs-spine.lgs-fp .lgs-fp__links a { display: inline-block; margin-right: 12px; padding: 4px 0; font-weight: 600; } /* the notices box */ .lgs-spine.lgs-fp .lgs-fp__side > .lgs-fp__notices { border: 1px solid var(--fp-ink); padding: 14px !important; } .lgs-spine.lgs-fp .lgs-fp__notices h2 { text-transform: none; font-size: 22px; letter-spacing: 0; border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; } .lgs-spine.lgs-fp .lgs-fp__notices .lgs-join__list { list-style: none; margin: 0; padding: 0; } .lgs-spine.lgs-fp .lgs-fp__notices .lgs-join__list li { padding: 2px 0; border: 0; font-size: 16px; text-align: left; } .lgs-spine.lgs-fp .lgs-fp__notices .lgs-join__list li a { color: var(--fp-ink); text-decoration: none; } .lgs-spine.lgs-fp .lgs-fp__notices .lgs-join__list li a:hover { text-decoration: underline; } .lgs-spine.lgs-fp .lgs-fp__notices .lgs-join__dist { font-size: 13px; color: var(--fp-muted); } .lgs-spine.lgs-fp .lgs-fp__chips { font-family: var(--fp-sans); font-size: 12px; color: var(--fp-muted); margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .lgs-spine.lgs-fp .lgs-fp__chip { border: 1px solid var(--fp-ink); padding: 2px 8px; color: var(--fp-ink); } /* groups empty state and the What's on empty state stay, left aligned */ .lgs-spine.lgs-fp .lgs-fp__side .lgs-town__empty p { text-align: left; } .lgs-spine.lgs-fp .lgs-fp__notices .lgs-join__list li { padding: 1px 0; } .lgs-spine.lgs-fp .lgs-fp__chipsmore > summary { font-family: var(--fp-sans); font-size: 12px; font-weight: 600; color: var(--fp-navy); cursor: pointer; margin-top: 6px; min-height: 32px; display: flex; align-items: center; } /* 32e. FRONTPAGE-1f: the lower sections to the mock (desktop), and the phone's "Further down this page" folds. Desktop: every fold open, its summary hidden - the page reads straight through. */ .lgs-spine.lgs-fp .lgs-fp__fold > summary, .lgs-spine.lgs-fp .lgs-fp__further { display: none; } .lgs-spine.lgs-fp .lgs-fp__lower { border-top: 3px double var(--fp-ink); padding-top: 4px; } .lgs-spine.lgs-fp .lgs-fp__lower > .lgs-fp__fold, .lgs-spine.lgs-fp .lgs-fp__pair { margin-top: 26px; } .lgs-spine.lgs-fp .lgs-fp__lower section { border-top: 0 !important; padding-top: 0; margin-top: 0; } .lgs-spine.lgs-fp .lgs-fp__sechead, .lgs-spine.lgs-fp .lgs-town__faq { } .lgs-spine.lgs-fp .lgs-fp__sechead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .lgs-spine.lgs-fp .lgs-fp__sechead .lgs-fp__kicker, .lgs-spine.lgs-fp .lgs-fp__sechead h2 { margin: 0; } /* shops and makers */ .lgs-spine.lgs-fp .lgs-fp__shopsgrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 28px; align-items: start; } .lgs-spine.lgs-fp .lgs-fp__shopsgrid > div { min-width: 0; } .lgs-spine.lgs-fp .lgs-fp__catcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .lgs-spine.lgs-fp .lgs-fp__catcol h3 { font-family: var(--fp-sans); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--fp-ink); margin: 0 0 8px; } .lgs-spine.lgs-fp .lgs-fp__catcol ul { list-style: none; margin: 0; padding: 0; } .lgs-spine.lgs-fp .lgs-fp__catcol li { font-size: 15px; line-height: 1.35; padding: 3px 0; } .lgs-spine.lgs-fp .lgs-fp__catcol li a { color: var(--fp-ink); text-decoration: none; } .lgs-spine.lgs-fp .lgs-fp__catcol li a:hover { text-decoration: underline; } .lgs-spine.lgs-fp .lgs-fp__n { color: var(--fp-muted); font-size: 13px; } .lgs-spine.lgs-fp .lgs-fp__catcol .is-empty { color: var(--fp-muted); font-style: italic; } .lgs-spine.lgs-fp .lgs-fp__wanted { background: var(--fp-tint); padding: 14px; font-size: 14px; } .lgs-spine.lgs-fp .lgs-fp__wanted p { margin: 0 0 8px; } .lgs-spine.lgs-fp .lgs-fp__every { margin-top: 12px; } .lgs-spine.lgs-fp .lgs-fp__every > summary { font-family: var(--fp-sans); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; min-height: 32px; display: inline-flex; align-items: center; color: var(--fp-navy); } .lgs-spine.lgs-fp .lgs-fp__every > summary::-webkit-details-marker { display: none; } /* classes, compact */ .lgs-spine.lgs-fp .lgs-fp__classes { border: 1px solid var(--fp-hair) !important; padding: 12px 14px !important; } .lgs-spine.lgs-fp .lgs-fp__classline { margin: 0; font-size: 15px; } .lgs-spine.lgs-fp .lgs-fp__classes .lgs-fp__links, .lgs-spine.lgs-fp .lgs-fp__marketday .lgs-fp__links { margin-top: 6px; } .lgs-spine.lgs-fp .lgs-fp__marketday .lgs-fp__links strong, .lgs-spine.lgs-fp .lgs-fp__classes .lgs-fp__links strong { display: inline; } /* market day + trade counter */ .lgs-spine.lgs-fp .lgs-fp__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } .lgs-spine.lgs-fp .lgs-fp__pair > .lgs-fp__fold { margin: 0; } .lgs-spine.lgs-fp .lgs-fp__pair > .lgs-fp__fold > section { height: 100%; box-sizing: border-box; } .lgs-spine.lgs-fp .lgs-fp__marketday { background: var(--fp-tint) !important; padding: 18px !important; } .lgs-spine.lgs-fp .lgs-fp__marketday h2, .lgs-spine.lgs-fp .lgs-fp__trade h2 { font-size: 26px; margin-bottom: 6px; } .lgs-spine.lgs-fp .lgs-fp__sched { font-family: var(--fp-sans); font-size: 13px; color: var(--fp-muted); margin: 0 0 4px; } .lgs-spine.lgs-fp .lgs-fp__next { margin: 0 0 8px; font-size: 17px; } .lgs-spine.lgs-fp .lgs-fp__mklinks { font-family: var(--fp-sans); font-size: 13px; font-weight: 700; margin: 0; display: flex; gap: 16px; flex-wrap: wrap; } .lgs-spine.lgs-fp .lgs-fp__trade { border: 1px solid var(--fp-ink) !important; padding: 18px !important; } .lgs-spine.lgs-fp .lgs-fp__trade p { font-size: 16px; } .lgs-spine.lgs-fp .lgs-fp__small { font-family: var(--fp-sans); font-size: 11px; color: var(--fp-muted); margin: 8px 0 0; } /* around town */ .lgs-spine.lgs-fp .lgs-fp__around { border: 1px solid var(--fp-ink) !important; padding: 16px 18px !important; } .lgs-spine.lgs-fp .lgs-fp__aroundline { margin: 0 0 10px; font-size: 16px; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-fp__nearbygrid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; align-items: end; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-town__places { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-town__places a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--fp-ink); border-radius: 0; background: none; font-family: var(--fp-sans); font-size: 12px; color: var(--fp-ink); text-decoration: none; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory { margin: 0; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory__card { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory__heading, .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory__intro { display: none; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1.3fr) auto; gap: 10px; align-items: end; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory__field label { font-family: var(--fp-sans); font-size: 11px; font-weight: 400; color: var(--fp-muted); display: block; margin-bottom: 4px; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory select, .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory input[type=text] { width: 100%; min-height: 40px; border: 1px solid var(--fp-ink); border-radius: 0; background: #fff; font-family: var(--fp-sans); font-size: 14px; padding: 0 10px; box-sizing: border-box; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory button { min-height: 40px; border-radius: 0; background: var(--fp-navy); color: #fff; border: 0; font-family: var(--fp-sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 0 16px; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-log-radius__value { background: none; padding: 0; font-weight: 700; color: var(--fp-ink); } /* reader questions */ .lgs-spine.lgs-fp .lgs-town__faq > .lgs-fp__kicker, .lgs-spine.lgs-fp .lgs-town__faq > h2 { display: inline-block; vertical-align: baseline; margin: 0 12px 10px 0; } .lgs-spine.lgs-fp .lgs-faq__qt { font-family: var(--fp-serif); font-size: 17px; font-weight: 500; letter-spacing: 0; } /* the colophon: navy band */ .lgs-spine.lgs-fp .lgs-fp__colophon { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; background: var(--fp-navy); color: #fff; padding: 28px 32px; margin: 0; border: 0; } .lgs-spine.lgs-fp .lgs-fp__colophon a, .lgs-spine.lgs-fp .lgs-fp__colophon h2, .lgs-spine.lgs-fp .lgs-fp__colophon .lgs-updated { color: #fff; } .lgs-spine.lgs-fp .lgs-fp__colophon h2 { font-size: 22px; margin: 4px 0 8px; } .lgs-spine.lgs-fp .lgs-fp__colophon .lgs-fp__word { font-size: 11px; opacity: .8; margin: 0; } .lgs-spine.lgs-fp .lgs-fp__colophon p { font-size: 15px; } .lgs-spine.lgs-fp .lgs-fp__colside { font-family: var(--fp-sans); font-size: 12px; } .lgs-spine.lgs-fp .lgs-fp__colside p, .lgs-spine.lgs-fp .lgs-fp__colside .lgs-updated { font-size: 12px; margin: 0 0 10px; opacity: .92; } .lgs-spine.lgs-fp .lgs-fp__collinks { display: flex; flex-wrap: wrap; gap: 4px 12px; } .lgs-spine.lgs-fp .lgs-fp__collinks a { text-decoration: underline; text-underline-offset: 2px; } /* phone: "Further down this page" */ @media (max-width: 899px) { .lgs-spine.lgs-fp .lgs-fp__further { display: block; order: 14; font-family: var(--fp-sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-top: 3px double var(--fp-ink); padding-top: 12px; margin: 30px 0 0; } .lgs-spine.lgs-fp .lgs-fp__fold--shops { order: 15; } .lgs-spine.lgs-fp .lgs-fp__fold--classes { order: 16; } .lgs-spine.lgs-fp .lgs-fp__fold--market { order: 17; } .lgs-spine.lgs-fp .lgs-fp__fold--join { order: 18; } .lgs-spine.lgs-fp .lgs-fp__fold--trade { order: 19; } .lgs-spine.lgs-fp .lgs-fp__fold--nearby { order: 20; } .lgs-spine.lgs-fp .lgs-fp__fold--faq { order: 21; } .lgs-spine.lgs-fp .lgs-fp__fold--colophon { order: 22; } .lgs-spine.lgs-fp .lgs-fp__ad--tile2 { order: 23; } .lgs-spine.lgs-fp #put-on-map { order: 24; } .lgs-spine.lgs-fp .lgs-fp__fold { margin: 0 !important; border-bottom: 1px solid var(--fp-hair); } .lgs-spine.lgs-fp .lgs-fp__fold > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; font-family: var(--fp-serif); font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; } .lgs-spine.lgs-fp .lgs-fp__fold > summary::-webkit-details-marker { display: none; } .lgs-spine.lgs-fp .lgs-fp__fold > summary::after { content: "+"; font-family: var(--fp-sans); font-weight: 400; font-size: 20px; } .lgs-spine.lgs-fp .lgs-fp__fold[open] > summary::after { content: "\2212"; } .lgs-spine.lgs-fp .lgs-fp__fold[open] { padding-bottom: 16px; } .lgs-spine.lgs-fp .lgs-fp__fold > section, .lgs-spine.lgs-fp .lgs-fp__fold > footer { margin-top: 4px !important; } .lgs-spine.lgs-fp .lgs-fp__fold > section > .lgs-fp__kicker:first-child, .lgs-spine.lgs-fp .lgs-fp__fold .lgs-fp__sechead { display: none; } .lgs-spine.lgs-fp .lgs-fp__shopsgrid, .lgs-spine.lgs-fp .lgs-fp__catcols, .lgs-spine.lgs-fp .lgs-fp__pair, .lgs-spine.lgs-fp .lgs-fp__around .lgs-fp__nearbygrid, .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory__grid, .lgs-spine.lgs-fp .lgs-fp__colophon { grid-template-columns: 1fr; } .lgs-spine.lgs-fp .lgs-fp__colophon { padding: 20px 16px; gap: 14px; } .lgs-spine.lgs-fp .lgs-fp__side > .lgs-fp__fold--join > .lgs-fp__notices { border: 0 !important; padding: 0 !important; } } /* 32f. FRONTPAGE-1f review */ .lgs-spine.lgs-fp .lgs-fp__trade p:not(.lgs-fp__kicker):not(.lgs-fp__small) { font-size: 16px; } .lgs-spine.lgs-fp .lgs-fp__trade .lgs-fp__kicker { font-size: 11px; } .lgs-spine.lgs-fp .lgs-fp__trade .lgs-fp__small { font-size: 11px; line-height: 1.45; } .lgs-spine.lgs-fp .lgs-fp__catcol .lgs-town__browse-where { white-space: nowrap; font-size: 11px; } .lgs-spine.lgs-fp .lgs-fp__colophon .lgs-town__share-line, .lgs-spine.lgs-fp .lgs-fp__colophon .lgs-town__share-line a { color: #fff; opacity: 1; } .lgs-spine.lgs-fp .lgs-fp__fold > summary::before { content: none !important; display: none !important; } @media (max-width: 899px) { .lgs-spine.lgs-fp .lgs-fp__pair { display: contents; } .lgs-spine.lgs-fp .lgs-fp__fold > summary { text-align: left; justify-content: space-between; padding: 0; } } /* 32g. FRONTPAGE-1h: second pass to the mock */ /* shops and makers: even blocks (a long family runs in sub-columns) */ .lgs-spine.lgs-fp .lgs-fp__catcol ul { column-count: var(--fp-sub, 1); column-gap: 24px; } .lgs-spine.lgs-fp .lgs-fp__catcol li { break-inside: avoid; } .lgs-spine.lgs-fp .lgs-fp__catcols { gap: 28px; } .lgs-spine.lgs-fp .lgs-fp__wanted { align-self: start; } .lgs-spine.lgs-fp .lgs-fp__every { margin-top: 14px; } /* the strip: one line on desktop, as the mock */ @media (min-width: 900px) { .lgs-spine.lgs-fp .lgs-fp__tile { flex-direction: row; align-items: baseline; gap: 8px; padding: 11px 14px; justify-content: center; white-space: nowrap; } .lgs-spine.lgs-fp .lgs-fp__tile:first-child { padding-left: 0; justify-content: flex-start; } .lgs-spine.lgs-fp .lgs-fp__tile:last-child { justify-content: flex-end; padding-right: 0; } .lgs-spine.lgs-fp .lgs-fp__tn { font-family: var(--fp-sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; line-height: 1; } .lgs-spine.lgs-fp .lgs-fp__tn small { display: none; } } /* the sponsor line: a full-width tinted bar */ .lgs-spine.lgs-fp .lgs-fp__sponsor { background: var(--fp-tint); border: 0; margin-top: 10px; padding: 8px 12px; justify-content: space-between; } .lgs-spine.lgs-fp .lgs-fp__sponsor a { font-weight: 700; color: var(--fp-ink); } /* In the shops: heading row with the link at the right */ .lgs-spine.lgs-fp .lgs-fp__sechead .lgs-fp__headlink { margin-left: auto; font-family: var(--fp-sans); font-size: 12px; font-weight: 700; color: var(--fp-ink); text-decoration: none; align-self: center; } .lgs-spine.lgs-fp .lgs-fp__sechead .lgs-fp__headlink:hover { text-decoration: underline; } .lgs-spine.lgs-fp .lgs-fp__shopsnow .lgs-fp__sechead h2 { font-size: 24px; } .lgs-spine.lgs-fp .lgs-town__sample .lgs-spine__card .lgs-spine__town { margin: 10px 0 0; } .lgs-spine.lgs-fp .lgs-town__sample .lgs-spine__card h4 { margin-top: 2px; } /* the money, compact */ .lgs-spine.lgs-fp .lgs-fp__mult { display: flex; gap: 22px; align-items: center; background: var(--fp-tint); padding: 16px 20px; margin: 6px 0 16px; } .lgs-spine.lgs-fp .lgs-fp__multn { font-family: var(--fp-serif); font-size: 44px; font-weight: 700; line-height: 1; white-space: nowrap; } .lgs-spine.lgs-fp .lgs-fp__mult p { margin: 0; font-size: 15px; color: var(--fp-muted); max-width: 44ch; } .lgs-spine.lgs-fp .lgs-fp__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .lgs-spine.lgs-fp .lgs-fp__fign { display: block; font-family: var(--fp-serif); font-size: 30px; font-weight: 700; line-height: 1.1; } .lgs-spine.lgs-fp .lgs-fp__figc { display: block; font-size: 13px; color: var(--fp-muted); margin-top: 4px; } .lgs-spine.lgs-fp .lgs-fp__source { font-family: var(--fp-sans); font-size: 11px; color: var(--fp-muted); margin: 14px 0 0; } .lgs-spine.lgs-fp .lgs-fp__source a { color: var(--fp-muted); } /* why buy: a bordered box on the paper */ .lgs-spine.lgs-fp .lgs-fp__whybuy { background: var(--fp-ground) !important; border: 1px solid var(--fp-ink) !important; } /* Hearabouts: postcode and the button on one row, no extra place line */ .lgs-spine.lgs-fp .lgs-fp__side .lgs-ha__place { display: none; } .lgs-spine.lgs-fp .lgs-fp__side .lgs-ha__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .lgs-spine.lgs-fp .lgs-fp__side .lgs-ha__row input[type=email] { grid-column: 1 / -1; } .lgs-spine.lgs-fp .lgs-fp__side .lgs-ha__row button { border-radius: 0; background: var(--fp-navy); font-family: var(--fp-sans); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 0 12px; min-height: 40px; } .lgs-spine.lgs-fp .lgs-fp__side .lgs-ha input[type=email], .lgs-spine.lgs-fp .lgs-fp__side .lgs-ha input[type=text] { border-radius: 0; border: 1px solid var(--fp-ink); min-height: 40px; } @media (max-width: 899px) { .lgs-spine.lgs-fp .lgs-fp__figs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .lgs-spine.lgs-fp .lgs-fp__fign { font-size: 22px; } .lgs-spine.lgs-fp .lgs-fp__mult { flex-direction: row; gap: 14px; padding: 14px; } .lgs-spine.lgs-fp .lgs-fp__multn { font-size: 30px; } .lgs-spine.lgs-fp .lgs-fp__catcol ul { column-count: 1; } .lgs-spine.lgs-fp .lgs-fp__catcols { grid-template-columns: 1fr !important; } .lgs-spine.lgs-fp .lgs-fp__sechead .lgs-fp__headlink { margin-left: 0; } } /* 32h. category list fit; the sponsor bar spans the page */ .lgs-spine.lgs-fp .lgs-fp__catcol li { font-size: 14.5px; } .lgs-spine.lgs-fp .lgs-fp__catcols { gap: 22px; } .lgs-spine.lgs-fp .lgs-fp__sponsor { max-width: none; width: 100%; box-sizing: border-box; } /* 32i. FRONTPAGE-1j: lower boxes closed on all four sides; Around {town} explainer fills the row above the search; the distance slider lines up */ /* ".lgs-fp__lower section { border-top: 0 !important }" (32c) outranked these boxes' own borders and opened their tops */ .lgs-spine.lgs-fp .lgs-fp__lower .lgs-fp__trade, .lgs-spine.lgs-fp .lgs-fp__lower .lgs-fp__around { border-top: 1px solid var(--fp-ink) !important; } .lgs-spine.lgs-fp .lgs-fp__lower .lgs-fp__classes { border-top: 1px solid var(--fp-hair) !important; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-fp__aroundtop { align-items: start; margin-bottom: 16px; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-fp__aroundline { margin: 0; font-size: 17px; line-height: 1.35; } .lgs-spine.lgs-fp .lgs-fp__aroundcopy { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fp-ink); } .lgs-spine.lgs-fp .lgs-fp__aroundlabel { font-family: var(--fp-sans); font-size: 11px; line-height: 16px; color: var(--fp-muted); margin: 0 0 4px; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-fp__nearbygrid--solo { grid-template-columns: 1fr; } /* the old NEARBY-1 skin drew a rule above the search box (the stray line) */ .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory { border-top: 0; padding-top: 0; } /* every field: a 16px label line, then a 40px control, so the labels share one line and the controls another */ .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory__grid { align-items: start; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory__field label { line-height: 16px; min-height: 16px; white-space: nowrap; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory__radius-value { display: inline; min-width: 0; margin-left: 4px; padding: 0; border-radius: 0; line-height: inherit; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory__radius-unit { margin-left: 3px; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-log-radius { margin: 0; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory__field input[type=range] { display: block; height: 40px; min-height: 40px; margin: 0; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory__field--submit { align-self: end; } @media (max-width: 899px) { .lgs-spine.lgs-fp .lgs-fp__fold .lgs-fp__around .lgs-fp__kicker { display: none; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-fp__aroundtop { gap: 8px; margin-bottom: 12px; } .lgs-spine.lgs-fp .lgs-fp__around .lgs-search-directory__grid { gap: 12px; } } /* 1k: the explainer runs the full width of its column (a page measure capped it at 562px) */ .lgs-spine.lgs-fp .lgs-fp__around p.lgs-fp__aroundcopy { max-width: none; } /* 32j. FRONTPAGE-1l owner review: photos and the Explore all button */ /* the lead as one big photo, the words on a panel at its foot */ .lgs-spine.lgs-fp .lgs-fp__lead--photo { min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; box-sizing: border-box; } .lgs-spine.lgs-fp .lgs-fp__lead--photo .lgs-fp__leadpanel { padding: 20px 22px; } .lgs-spine.lgs-fp .lgs-fp__lead--photo .lgs-fp__btns { margin-bottom: 0; } /* What's on: a part of a category photo fills the picture box */ .lgs-spine.lgs-fp .lgs-fp__onpic--crop { background-color: var(--fp-tint); background-size: 280% auto; background-repeat: no-repeat; } /* Why buy: the photo beside the heading and intro */ .lgs-spine.lgs-fp .lgs-fp__whybuy--photo .lgs-fp__whyhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 22px; align-items: stretch; } .lgs-spine.lgs-fp .lgs-fp__whyphoto { min-height: 150px; background: var(--fp-tint) center / cover no-repeat; border: 1px solid var(--fp-ink); } /* "Explore all N" as the page's solid button */ .lgs-spine.lgs-fp .lgs-town__who-more { border-top: 0; } .lgs-spine.lgs-fp .lgs-town__who-more > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; margin: 6px 0 0; background: var(--fp-navy); color: #fff; border: 1px solid var(--fp-navy); font-family: var(--fp-sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; list-style: none; cursor: pointer; box-sizing: border-box; } .lgs-spine.lgs-fp .lgs-town__who-more > summary::-webkit-details-marker { display: none; } .lgs-spine.lgs-fp .lgs-town__who-more > summary::before { content: none !important; display: none !important; } .lgs-spine.lgs-fp .lgs-town__who-more > summary::after { content: "+"; font-size: 16px; font-weight: 400; line-height: 1; } .lgs-spine.lgs-fp .lgs-town__who-more[open] > summary::after { content: "\2212"; } .lgs-spine.lgs-fp .lgs-town__who-more > summary:hover, .lgs-spine.lgs-fp .lgs-town__who-more > summary:focus-visible { background: var(--fp-ink); border-color: var(--fp-ink); } @media (max-width: 899px) { .lgs-spine.lgs-fp .lgs-fp__lead--photo { min-height: 0; padding: 150px 12px 12px; } .lgs-spine.lgs-fp .lgs-fp__lead--photo .lgs-fp__leadpanel { padding: 16px; } .lgs-spine.lgs-fp .lgs-fp__whybuy--photo .lgs-fp__whyhead { grid-template-columns: 1fr; gap: 12px; } .lgs-spine.lgs-fp .lgs-fp__whyphoto { min-height: 140px; } .lgs-spine.lgs-fp .lgs-town__who-more > summary { width: 100%; justify-content: center; } } /* 1m: more of the lead photo shows; the What's on button loses the legacy triangle */ .lgs-spine.lgs-fp .lgs-fp__lead--photo { min-height: 460px; } .lgs-spine.lgs-fp .lgs-fp__lead--photo .lgs-fp__leadpanel { max-width: 500px; } .lgs-spine.lgs-fp .lgs-fp__onmore > summary::before { content: none !important; display: none !important; } @media (max-width: 899px) { .lgs-spine.lgs-fp .lgs-fp__lead--photo { min-height: 0; padding-top: 190px; } } /* 32k. FRONTPAGE-1n owner review */ /* the lead panel lets the photo through; a light blur keeps the words crisp */ .lgs-spine.lgs-fp .lgs-fp__lead--photo .lgs-fp__leadpanel { background: rgba(251, 249, 244, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lgs-spine.lgs-fp .lgs-fp__lead--photo .lgs-fp__leadpanel { background: rgba(251, 249, 244, .9); } } /* Wanted: a coloured notice */ .lgs-spine.lgs-fp .lgs-fp__wanted { background: var(--fp-blush); border-top: 3px solid var(--fp-ink); } /* the town's street plan blends across the masthead, strongest on the right and fading out behind the town name; the credit stays visible */ .lgs-spine.lgs-fp .lgs-fp__mastgrid { position: relative; isolation: isolate; min-height: 170px; } .lgs-spine.lgs-fp .lgs-fp__mastgrid > .lgs-fp__map { position: absolute; inset: 0; z-index: -1; margin: 0; pointer-events: none; } .lgs-spine.lgs-fp .lgs-fp__mastgrid .lgs-fp__plate { width: 100%; height: 100%; aspect-ratio: auto; background-color: transparent; background-position: 70% center; background-size: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 16%, rgba(0, 0, 0, .28) 42%, rgba(0, 0, 0, .75) 68%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, transparent 16%, rgba(0, 0, 0, .28) 42%, rgba(0, 0, 0, .75) 68%, #000 100%); } .lgs-spine.lgs-fp .lgs-fp__mastgrid .lgs-fp__credit { position: absolute; right: 0; bottom: 2px; margin: 0; background: rgba(251, 249, 244, .85); padding: 0 3px; } @media (max-width: 899px) { .lgs-spine.lgs-fp .lgs-fp__mastgrid { min-height: 0; padding-bottom: 16px; } .lgs-spine.lgs-fp .lgs-fp__mastgrid .lgs-fp__plate { height: 100%; opacity: .7; background-position: center; -webkit-mask-image: radial-gradient(ellipse at center, transparent 22%, rgba(0, 0, 0, .5) 58%, #000 100%); mask-image: radial-gradient(ellipse at center, transparent 22%, rgba(0, 0, 0, .5) 58%, #000 100%); } .lgs-spine.lgs-fp .lgs-fp__mastgrid .lgs-fp__credit { font-size: 8px; } } /* 1p: the map clears the town name on desktop (faint behind it, full on the right edge); a paper halo lifts the header words off any line */ @media (min-width: 900px) { .lgs-spine.lgs-fp .lgs-fp__mastgrid .lgs-fp__plate { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .3) 62%, rgba(0, 0, 0, .8) 78%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .3) 62%, rgba(0, 0, 0, .8) 78%, #000 100%); } } .lgs-spine.lgs-fp .lgs-fp__mast h1, .lgs-spine.lgs-fp .lgs-fp__mast .lgs-fp__desc, .lgs-spine.lgs-fp .lgs-fp__mast .lgs-fp__kicker, .lgs-spine.lgs-fp .lgs-fp__dateline { text-shadow: 0 0 6px var(--fp-ground), 0 0 12px var(--fp-ground), 0 0 2px var(--fp-ground); } /* ------------------------------------------------------------------ */ /* 33. HOMEPAGE-1 (2026-09-24): the national front page of the same */ /* paper. First visual gate: zones A-C (.lgs-np) on the town page's */ /* tokens, faces and grammar. Scoped body.lgs-c2-home .lgs-np. */ /* ------------------------------------------------------------------ */ body.lgs-c2-home { background: #fbf9f4; } body.lgs-c2-home .lgs-home { max-width: 1180px; } body.lgs-c2-home .lgs-np { --fp-ground: #fbf9f4; --fp-tint: #f4f0e8; --fp-ink: #1e2f3c; --fp-navy: #1d3a4d; --fp-steel: #3b6b88; --fp-blue: #dfe9ef; --fp-blush: #f3d9d2; --fp-hair: #cdc7ba; --fp-muted: #4c5b66; --fp-serif: "Newsreader", Georgia, "Times New Roman", serif; --fp-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: var(--fp-ink); font-family: var(--fp-serif); font-size: 17px; line-height: 1.5; padding-bottom: 8px; } body.lgs-c2-home .lgs-np h1, body.lgs-c2-home .lgs-np h2, body.lgs-c2-home .lgs-np h3 { font-family: var(--fp-serif); color: var(--fp-ink); letter-spacing: -.005em; font-weight: 600; } body.lgs-c2-home .lgs-np a { color: var(--fp-navy); } body.lgs-c2-home .lgs-np p { margin: 0 0 10px; } body.lgs-c2-home .lgs-np__kicker { font-family: var(--fp-sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fp-ink); margin: 0 0 6px; } body.lgs-c2-home .lgs-np__small { font-family: var(--fp-sans); font-size: 13px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; } body.lgs-c2-home .lgs-np__small a { text-decoration: none; } /* A. masthead */ body.lgs-c2-home .lgs-np__mast { padding: 14px 0 0; border-top: 1px solid var(--fp-ink); margin-top: 8px; } body.lgs-c2-home .lgs-np__mastgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 6px 0 14px; } body.lgs-c2-home .lgs-np__edition { font-family: var(--fp-sans); font-size: 12px; margin: 0; } body.lgs-c2-home .lgs-np__edition b { display: block; font-family: var(--fp-serif); font-size: 17px; font-weight: 600; } body.lgs-c2-home .lgs-np__edition span { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; color: var(--fp-muted); margin-top: 2px; } body.lgs-c2-home .lgs-np__title { text-align: center; } body.lgs-c2-home .lgs-np__mast h1 { font-size: clamp(60px, 8.4vw, 108px); line-height: .95; font-weight: 700; letter-spacing: -.025em; margin: 6px 0 8px; } body.lgs-c2-home .lgs-np__desc { font-style: italic; color: var(--fp-steel); font-size: 17px; margin: 0; } body.lgs-c2-home .lgs-np__inside { border: 1px solid var(--fp-ink); padding: 10px 12px; font-family: var(--fp-sans); } body.lgs-c2-home .lgs-np__inside ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 12px; } body.lgs-c2-home .lgs-np__inside li { font-size: 12px; line-height: 1.35; margin: 0 0 5px; break-inside: avoid; } body.lgs-c2-home .lgs-np__inside a { text-decoration: none; } body.lgs-c2-home .lgs-np__inside a:hover { text-decoration: underline; } body.lgs-c2-home .lgs-np__rule { height: 3px; background: var(--fp-ink); } body.lgs-c2-home .lgs-np__brandline { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--fp-ink); padding: 6px 0; } body.lgs-c2-home .lgs-np__motto { margin: 0; font-style: italic; color: var(--fp-steel); font-size: 15px; } body.lgs-c2-home .lgs-np__terms { margin: 0; font-family: var(--fp-sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; align-self: center; } /* A. the two ways in */ body.lgs-c2-home .lgs-np__entry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; margin: 22px 0 0; } body.lgs-c2-home .lgs-np__box { padding: 20px 22px; box-sizing: border-box; } body.lgs-c2-home .lgs-np__box h2 { font-size: 30px; line-height: 1.1; margin: 0 0 8px; } body.lgs-c2-home .lgs-np__box > p { font-size: 16px; } body.lgs-c2-home .lgs-np__town { border: 2px solid var(--fp-ink); background: #fff; } body.lgs-c2-home .lgs-np__near { background: var(--fp-tint); border-top: 3px solid var(--fp-ink); } body.lgs-c2-home .lgs-np__townform { margin: 6px 0 0; } body.lgs-c2-home .lgs-np__townform label, body.lgs-c2-home .lgs-np__near .lgs-search-directory__field label { font-family: var(--fp-sans); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fp-ink); display: block; margin: 0 0 5px; line-height: 16px; min-height: 16px; white-space: nowrap; } body.lgs-c2-home .lgs-np__townrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } body.lgs-c2-home .lgs-np__townrow input { min-height: 46px; border: 1px solid var(--fp-ink); border-radius: 0; background: #fff; font-family: var(--fp-sans); font-size: 16px; padding: 0 12px; box-sizing: border-box; width: 100%; } body.lgs-c2-home .lgs-np button, body.lgs-c2-home .lgs-np__near .lgs-search-directory button { min-height: 46px; border-radius: 0; background: var(--fp-navy); color: #fff; border: 0; font-family: var(--fp-sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 0 18px; cursor: pointer; box-shadow: none; } body.lgs-c2-home .lgs-np button:hover { background: var(--fp-ink); } body.lgs-c2-home .lgs-np__townlist { list-style: none; margin: 8px 0 0; padding: 0; } body.lgs-c2-home .lgs-np__townlist:empty { display: none; } body.lgs-c2-home .lgs-np__townlist li { border-top: 1px solid var(--fp-hair); } body.lgs-c2-home .lgs-np__townlist a { display: flex; justify-content: space-between; align-items: center; min-height: 40px; font-family: var(--fp-serif); font-size: 17px; text-decoration: none; color: var(--fp-ink); } body.lgs-c2-home .lgs-np__townlist .lgs-shell__places-county { font-family: var(--fp-sans); font-size: 12px; color: var(--fp-muted); } body.lgs-c2-home .lgs-np__townstatus { font-family: var(--fp-sans); font-size: 12px; color: var(--fp-muted); margin: 6px 0 0; min-height: 0; } body.lgs-c2-home .lgs-np__townstatus:empty { display: none; } body.lgs-c2-home .lgs-np__again { font-family: var(--fp-sans); font-size: 14px; font-weight: 700; margin: 10px 0 0; } /* the toolkit search box, as the town page runs it */ body.lgs-c2-home .lgs-np__near .lgs-search-directory { margin: 6px 0 0; border: 0; padding: 0; } body.lgs-c2-home .lgs-np__near .lgs-search-directory__card { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; } body.lgs-c2-home .lgs-np__near .lgs-search-directory__heading, body.lgs-c2-home .lgs-np__near .lgs-search-directory__intro { display: none; } body.lgs-c2-home .lgs-np__near .lgs-search-directory__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 12px; align-items: start; } body.lgs-c2-home .lgs-np__near .lgs-search-directory__field { min-width: 0; } body.lgs-c2-home .lgs-np__near .lgs-search-directory select, body.lgs-c2-home .lgs-np__near .lgs-search-directory input[type=text] { width: 100%; min-height: 46px; border: 1px solid var(--fp-ink); border-radius: 0; background: #fff; font-family: var(--fp-sans); font-size: 15px; padding: 0 12px; box-sizing: border-box; box-shadow: none; } body.lgs-c2-home .lgs-np__near .lgs-search-directory__radius-value { display: inline; min-width: 0; margin-left: 4px; padding: 0; border-radius: 0; background: none; line-height: inherit; color: var(--fp-ink); } body.lgs-c2-home .lgs-np__near .lgs-search-directory__radius-unit { margin-left: 3px; } body.lgs-c2-home .lgs-np__near .lgs-log-radius { margin: 0; } body.lgs-c2-home .lgs-np__near .lgs-search-directory__field input[type=range] { display: block; height: 46px; min-height: 46px; margin: 0; accent-color: var(--fp-navy); } body.lgs-c2-home .lgs-np__near .lgs-search-directory__field input[type=range]::-webkit-slider-thumb { background: var(--fp-navy); } body.lgs-c2-home .lgs-np__near .lgs-search-directory__field input[type=range]::-webkit-slider-runnable-track { background: var(--fp-hair); } body.lgs-c2-home .lgs-np__near .lgs-search-directory__field--submit { align-self: end; } body.lgs-c2-home .lgs-np__near .lgs-search-directory__field--submit button { width: 100%; } /* B. the lead */ body.lgs-c2-home .lgs-np__lead { margin: 30px 0 0; border-top: 3px double var(--fp-ink); padding-top: 14px; } body.lgs-c2-home .lgs-np__lead h2 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.04; margin: 0 0 16px; max-width: 18ch; } body.lgs-c2-home .lgs-np__leadgrid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 26px; align-items: start; } body.lgs-c2-home .lgs-np__leadphoto { margin: 0; } body.lgs-c2-home .lgs-np__leadphoto img { display: block; width: 100%; height: 100%; min-height: 360px; max-height: 440px; object-fit: cover; object-position: 40% 60%; } body.lgs-c2-home .lgs-np__leadtext { border-left: 1px solid var(--fp-hair); padding-left: 24px; } body.lgs-c2-home .lgs-np__standfirst { font-size: 20px; line-height: 1.4; } body.lgs-c2-home .lgs-np__leadtext p { font-size: 16.5px; } body.lgs-c2-home .lgs-np__pull { margin: 16px 0 6px; padding: 14px 0; border-top: 1px solid var(--fp-ink); border-bottom: 1px solid var(--fp-ink); } body.lgs-c2-home .lgs-np__pull p { font-size: 23px; line-height: 1.25; font-style: italic; color: var(--fp-steel); margin: 0; } /* C. what you'll find: departments, not cards */ body.lgs-c2-home .lgs-np__find { margin: 34px 0 0; border-top: 1px solid var(--fp-ink); padding-top: 12px; } body.lgs-c2-home .lgs-np__sechead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 14px; } body.lgs-c2-home .lgs-np__sechead h2 { font-size: 30px; margin: 0; } body.lgs-c2-home .lgs-np__sechead p:not(.lgs-np__kicker) { margin: 0; font-style: italic; color: var(--fp-steel); } body.lgs-c2-home .lgs-np__findgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; } body.lgs-c2-home .lgs-np__dept { box-sizing: border-box; } body.lgs-c2-home .lgs-np__dept h3 { font-size: 23px; line-height: 1.15; margin: 0 0 6px; } body.lgs-c2-home .lgs-np__dept p:not(.lgs-np__kicker) { font-size: 16px; } body.lgs-c2-home .lgs-np__go { font-family: var(--fp-sans); font-size: 13px; font-weight: 700; text-decoration: none; } body.lgs-c2-home .lgs-np__pic { background: var(--fp-tint) center / cover no-repeat; } body.lgs-c2-home .lgs-np__dept--buy { grid-column: span 7; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border: 1px solid var(--fp-ink); } body.lgs-c2-home .lgs-np__dept--buy .lgs-np__pic { min-height: 300px; } body.lgs-c2-home .lgs-np__dept--buy .lgs-np__deptbody { padding: 18px 20px; align-self: end; } body.lgs-c2-home .lgs-np__dept--buy h3 { font-size: 28px; } body.lgs-c2-home .lgs-np__dept--markets { grid-column: span 5; border-top: 3px solid var(--fp-ink); } body.lgs-c2-home .lgs-np__dept--markets .lgs-np__pic { height: 170px; background-position: 8% 60%; margin: 12px 0 12px; } body.lgs-c2-home .lgs-np__dept--on { grid-column: span 4; background: var(--fp-tint); padding: 18px; } body.lgs-c2-home .lgs-np__dept--groups { grid-column: span 4; background: var(--fp-blush); padding: 18px; border-top: 3px solid var(--fp-ink); } body.lgs-c2-home .lgs-np__dept--classes { grid-column: span 4; border: 1px solid var(--fp-ink); padding: 18px; } body.lgs-c2-home .lgs-np__dept--classes h3 { font-style: italic; font-weight: 500; color: var(--fp-steel); } /* the sections below the gate sit on the same ground */ body.lgs-c2-home .lgs-home__matters { margin-top: 36px; } @media (max-width: 899px) { body.lgs-c2-home .lgs-np { font-size: 16.5px; } body.lgs-c2-home .lgs-np__mastgrid { grid-template-columns: 1fr; gap: 6px; text-align: center; padding: 4px 0 10px; } body.lgs-c2-home .lgs-np__mast h1 { font-size: 60px; margin: 2px 0 4px; } body.lgs-c2-home .lgs-np__edition { order: 3; } body.lgs-c2-home .lgs-np__edition b { display: inline; font-size: 14px; } body.lgs-c2-home .lgs-np__edition span { display: inline; margin-left: 6px; } body.lgs-c2-home .lgs-np__inside { display: none; } body.lgs-c2-home .lgs-np__brandline { flex-direction: column; gap: 2px; text-align: center; } body.lgs-c2-home .lgs-np__terms { align-self: center; font-size: 10px; } body.lgs-c2-home .lgs-np__entry { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; } body.lgs-c2-home .lgs-np__box { padding: 16px; } body.lgs-c2-home .lgs-np__box h2 { font-size: 26px; } body.lgs-c2-home .lgs-np__box > p { font-size: 15.5px; } body.lgs-c2-home .lgs-np__near .lgs-search-directory__grid { grid-template-columns: 1fr; gap: 12px; } body.lgs-c2-home .lgs-np__leadgrid { grid-template-columns: 1fr; gap: 14px; } body.lgs-c2-home .lgs-np__leadphoto img { min-height: 0; height: 220px; } body.lgs-c2-home .lgs-np__leadtext { border-left: 0; padding-left: 0; } body.lgs-c2-home .lgs-np__standfirst { font-size: 18.5px; } body.lgs-c2-home .lgs-np__findgrid { grid-template-columns: 1fr 1fr; gap: 14px; } body.lgs-c2-home .lgs-np__dept--buy, body.lgs-c2-home .lgs-np__dept--markets { grid-column: 1 / -1; } body.lgs-c2-home .lgs-np__dept--buy { grid-template-columns: 1fr; } body.lgs-c2-home .lgs-np__dept--buy .lgs-np__pic { min-height: 190px; } body.lgs-c2-home .lgs-np__dept--on, body.lgs-c2-home .lgs-np__dept--groups { grid-column: span 1; padding: 14px; } body.lgs-c2-home .lgs-np__dept--classes { grid-column: 1 / -1; padding: 14px; } body.lgs-c2-home .lgs-np__dept h3 { font-size: 20px; } body.lgs-c2-home .lgs-np__dept--buy h3 { font-size: 24px; } body.lgs-c2-home .lgs-np__dept p:not(.lgs-np__kicker) { font-size: 15px; } } @media (max-width: 420px) { body.lgs-c2-home .lgs-np__findgrid { grid-template-columns: 1fr; } body.lgs-c2-home .lgs-np__dept--on, body.lgs-c2-home .lgs-np__dept--groups { grid-column: 1 / -1; } } /* 33b. HOMEPAGE-1a review: the town box fills its height; the market photo shows its stalls only; phone gutters and a compact phone masthead so both ways in reach the first screen */ body.lgs-c2-home .lgs-np__town { display: flex; flex-direction: column; } body.lgs-c2-home .lgs-np__note { font-size: 15px; color: var(--fp-muted); border-top: 1px solid var(--fp-hair); padding-top: 10px; margin: 14px 0 0; } body.lgs-c2-home .lgs-np__town .lgs-np__small { margin-top: auto; padding-top: 12px; } body.lgs-c2-home .lgs-np__dept--markets .lgs-np__pic { background-size: 200% auto; background-position: 0% 62%; } @media (max-width: 1240px) { body.lgs-c2-home .lgs-np { padding-left: 16px; padding-right: 16px; } } @media (max-width: 899px) { body.lgs-c2-home .lgs-np__mast { padding-top: 8px; } body.lgs-c2-home .lgs-np__title .lgs-np__kicker, body.lgs-c2-home .lgs-np__brandline { display: none; } body.lgs-c2-home .lgs-np__mast h1 { font-size: 54px; } body.lgs-c2-home .lgs-np__desc { font-size: 15.5px; line-height: 1.35; } body.lgs-c2-home .lgs-np__edition { font-size: 11px; } body.lgs-c2-home .lgs-np__edition span { display: none; } body.lgs-c2-home .lgs-np__mastgrid { border-bottom: 3px solid var(--fp-ink); } body.lgs-c2-home .lgs-np__note { display: none; } body.lgs-c2-home .lgs-np__town .lgs-np__small { padding-top: 6px; } } /* 33c. HOMEPAGE-1 full build: zones D to L, counts, trade editorials */ body.lgs-c2-home .lgs-np__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--fp-navy); color: #fff !important; font-family: var(--fp-sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--fp-navy); box-sizing: border-box; } body.lgs-c2-home .lgs-np__btn:hover { background: var(--fp-ink); } body.lgs-c2-home .lgs-np__btn--light { background: #fff; color: var(--fp-navy) !important; border-color: #fff; } body.lgs-c2-home .lgs-np__btn--ghost { background: transparent; color: #fff !important; border-color: #fff; } body.lgs-c2-home .lgs-np section, body.lgs-c2-home .lgs-np aside, body.lgs-c2-home .lgs-np footer { box-sizing: border-box; } body.lgs-c2-home .lgs-np h2 { font-size: 30px; line-height: 1.12; margin: 0 0 10px; } /* the figures strip */ body.lgs-c2-home .lgs-np__numbers { display: flex; align-items: center; gap: 16px; border-bottom: 3px double var(--fp-ink); padding: 8px 0; } body.lgs-c2-home .lgs-np__numbers .lgs-np__kicker { margin: 0; white-space: nowrap; } body.lgs-c2-home .lgs-np__numbers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; flex: 1; } body.lgs-c2-home .lgs-np__numbers li { flex: 1 1 0; min-width: 120px; padding: 2px 12px; border-left: 1px solid var(--fp-hair); font-family: var(--fp-sans); font-size: 11.5px; line-height: 1.3; color: var(--fp-muted); } body.lgs-c2-home .lgs-np__numbers b { display: block; font-family: var(--fp-serif); font-size: 22px; font-weight: 700; color: var(--fp-ink); } /* trade editorials */ body.lgs-c2-home .lgs-np__trade { margin: 34px 0 0; display: grid; gap: 26px; align-items: center; } body.lgs-c2-home .lgs-np__trade h2 { font-size: 28px; } body.lgs-c2-home .lgs-np__trade p { font-size: 16.5px; } body.lgs-c2-home .lgs-np__trade--supply { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border: 2px solid var(--fp-ink); padding: 22px 24px; background: #fff; } body.lgs-c2-home .lgs-np__whyline { font-style: italic; color: var(--fp-steel); } body.lgs-c2-home .lgs-np__steps { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: none; } body.lgs-c2-home .lgs-np__steps li { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--fp-hair); font-size: 17px; } body.lgs-c2-home .lgs-np__steps li:last-child { border-bottom: 1px solid var(--fp-hair); } body.lgs-c2-home .lgs-np__steps b { font-family: var(--fp-sans); font-size: 12px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; background: var(--fp-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; } body.lgs-c2-home .lgs-np__trade--stock { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); background: var(--fp-blush); padding: 0; } body.lgs-c2-home .lgs-np__trade--stock > div { padding: 22px 24px 22px 0; } body.lgs-c2-home .lgs-np__trade--commission { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); background: var(--fp-navy); color: #fff; padding: 0; } body.lgs-c2-home .lgs-np__trade--commission > div { padding: 24px 0 24px 26px; } body.lgs-c2-home .lgs-np__trade--commission h2, body.lgs-c2-home .lgs-np__trade--commission .lgs-np__kicker { color: #fff; } body.lgs-c2-home .lgs-np__pic--trade { height: 100%; min-height: 220px; } /* D. how it works */ body.lgs-c2-home .lgs-np__how { margin: 40px 0 0; border-top: 3px solid var(--fp-ink); padding-top: 14px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px; } body.lgs-c2-home .lgs-np__how h2 { font-size: 36px; } body.lgs-c2-home .lgs-np__pic--how { height: 230px; margin: 14px 0; } body.lgs-c2-home .lgs-np__towns { border-left: 3px solid var(--fp-steel); padding-left: 12px; } body.lgs-c2-home .lgs-np__towns p:not(.lgs-np__kicker) { font-size: 15.5px; } body.lgs-c2-home .lgs-np__howsteps { list-style: none; margin: 0; padding: 0; } body.lgs-c2-home .lgs-np__howsteps li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--fp-ink); } body.lgs-c2-home .lgs-np__howsteps li:first-child { padding-top: 4px; } body.lgs-c2-home .lgs-np__num { font-family: var(--fp-serif); font-size: 68px; line-height: .9; font-weight: 700; color: var(--fp-steel); } body.lgs-c2-home .lgs-np__howsteps h3 { font-size: 23px; margin: 0 0 4px; } body.lgs-c2-home .lgs-np__howsteps p { font-size: 16.5px; margin: 0 0 6px; } /* E. browse by category */ body.lgs-c2-home .lgs-np__browse { margin: 40px 0 0; border-top: 1px solid var(--fp-ink); padding-top: 12px; } body.lgs-c2-home .lgs-np__families { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--fp-hair); } body.lgs-c2-home .lgs-np__family { padding: 14px 16px 16px; border-left: 1px solid var(--fp-hair); } body.lgs-c2-home .lgs-np__family:first-child { border-left: 0; padding-left: 0; } body.lgs-c2-home .lgs-np__family:last-child { padding-right: 0; } body.lgs-c2-home .lgs-np__pic--family { height: 130px; margin: 0 0 10px; } body.lgs-c2-home .lgs-np__family h3 { font-size: 21px; margin: 0 0 6px; } body.lgs-c2-home .lgs-np__family ul { list-style: none; margin: 0; padding: 0; } body.lgs-c2-home .lgs-np__family li { font-size: 15px; line-height: 1.35; padding: 4px 0; border-bottom: 1px dotted var(--fp-hair); } body.lgs-c2-home .lgs-np__family li a { text-decoration: none; color: var(--fp-ink); } body.lgs-c2-home .lgs-np__family li a:hover { text-decoration: underline; } body.lgs-c2-home .lgs-np__family li span { font-family: var(--fp-sans); font-size: 11px; color: var(--fp-muted); } body.lgs-c2-home .lgs-np__more > summary { font-family: var(--fp-sans); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; min-height: 36px; display: flex; align-items: center; color: var(--fp-navy); } body.lgs-c2-home .lgs-np__more > summary::-webkit-details-marker { display: none; } body.lgs-c2-home .lgs-np__more > summary::after { content: " +"; } body.lgs-c2-home .lgs-np__more[open] > summary::after { content: " \2212"; } /* F. independents */ body.lgs-c2-home .lgs-np__indies { margin: 40px 0 0; border-top: 3px double var(--fp-ink); padding-top: 12px; } body.lgs-c2-home .lgs-np__indiegrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; gap: 20px; } body.lgs-c2-home .lgs-np__indie:nth-child(n+6) { display: none; } body.lgs-c2-home .lgs-np__indie { border-top: 1px solid var(--fp-ink); padding-top: 10px; } body.lgs-c2-home .lgs-np__indie:first-child { grid-row: span 2; } body.lgs-c2-home .lgs-np__pic--indie { height: 150px; margin: 0 0 10px; } body.lgs-c2-home .lgs-np__indie:first-child .lgs-np__pic--indie { height: 300px; } body.lgs-c2-home .lgs-np__pic--none { background: var(--fp-tint); } body.lgs-c2-home .lgs-np__indie h3 { font-size: 20px; margin: 0 0 4px; } body.lgs-c2-home .lgs-np__indie:first-child h3 { font-size: 28px; } body.lgs-c2-home .lgs-np__indie h3 a { color: var(--fp-ink); text-decoration: none; } body.lgs-c2-home .lgs-np__indie p:not(.lgs-np__kicker) { font-size: 15px; } body.lgs-c2-home .lgs-np__where { font-family: var(--fp-sans); font-size: 12px !important; color: var(--fp-muted); } /* H. why it matters */ body.lgs-c2-home .lgs-np__why { margin: 40px 0 0; border-top: 3px solid var(--fp-ink); padding-top: 14px; font-style: normal; color: var(--fp-ink); } body.lgs-c2-home .lgs-np__why > h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.05; max-width: 20ch; margin-bottom: 18px; } body.lgs-c2-home .lgs-np__whygrid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 28px; } body.lgs-c2-home .lgs-np__pic--why { height: 280px; margin: 0 0 14px; } body.lgs-c2-home .lgs-np__whycols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 12px 0; } body.lgs-c2-home .lgs-np__whycols h3 { font-size: 20px; margin: 0 0 4px; } body.lgs-c2-home .lgs-np__whycols p { font-size: 16px; } body.lgs-c2-home .lgs-np__shape { background: var(--fp-tint); padding: 18px; align-self: start; } body.lgs-c2-home .lgs-np__shape h3 { font-size: 21px; line-height: 1.2; margin: 0 0 10px; } body.lgs-c2-home .lgs-np__shape ul { list-style: none; margin: 0; padding: 0; } body.lgs-c2-home .lgs-np__shape li { font-size: 15px; padding: 8px 0; border-top: 1px solid var(--fp-hair); } body.lgs-c2-home .lgs-np__shape li b { display: block; font-size: 16px; } body.lgs-c2-home .lgs-np__fig { margin: 12px 0 0; padding: 12px; background: #fff; border-top: 3px solid var(--fp-ink); } body.lgs-c2-home .lgs-np__fign { display: block; font-family: var(--fp-serif); font-size: 34px; font-weight: 700; line-height: 1.05; } body.lgs-c2-home .lgs-np__fig p { font-size: 14px; } body.lgs-c2-home .lgs-np__source { font-family: var(--fp-sans); font-size: 11px !important; color: var(--fp-muted); } /* I. Hearabouts + follow */ body.lgs-c2-home .lgs-np__paper { margin: 40px 0 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; background: var(--fp-blue); } body.lgs-c2-home .lgs-np__follow { padding: 24px; border-right: 1px solid rgba(30, 47, 60, .2); } body.lgs-c2-home .lgs-np__follow p:not(.lgs-np__kicker) { font-size: 16px; } body.lgs-c2-home .lgs-np__ha { padding: 8px 12px; } body.lgs-c2-home .lgs-np__ha .lgs-ha { background: transparent; border: 0; box-shadow: none; margin: 0; } /* J. notices */ body.lgs-c2-home .lgs-np__notices { margin: 40px 0 0; border-top: 1px solid var(--fp-ink); padding-top: 12px; } body.lgs-c2-home .lgs-np__noticegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } body.lgs-c2-home .lgs-np__notice { border: 1px solid var(--fp-ink); padding: 12px 14px; display: flex; flex-direction: column; } body.lgs-c2-home .lgs-np__notice:nth-child(3n+2) { background: var(--fp-tint); } body.lgs-c2-home .lgs-np__notice h3 { font-size: 19px; margin: 0 0 4px; } body.lgs-c2-home .lgs-np__notice p:not(.lgs-np__kicker) { font-size: 14.5px; flex: 1; } /* K. guides */ body.lgs-c2-home .lgs-np__guides { margin: 40px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 26px; border: 1px solid var(--fp-ink); padding: 0; } body.lgs-c2-home .lgs-np__guides > div { padding: 22px 24px 22px 0; } body.lgs-c2-home .lgs-np__pic--guides { min-height: 260px; height: 100%; } body.lgs-c2-home .lgs-np__topics { list-style: none; margin: 6px 0 14px; padding: 0; columns: 2; column-gap: 20px; } body.lgs-c2-home .lgs-np__topics li { font-size: 15px; padding: 3px 0; break-inside: avoid; } body.lgs-c2-home .lgs-np__topics li::before { content: "\2022 "; color: var(--fp-steel); } /* reader questions */ body.lgs-c2-home .lgs-np__faq { margin: 40px 0 0; border-top: 1px solid var(--fp-ink); padding-top: 12px; } body.lgs-c2-home .lgs-np__qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; } body.lgs-c2-home .lgs-np__q { border-bottom: 1px solid var(--fp-hair); } body.lgs-c2-home .lgs-np__q > summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--fp-serif); font-size: 17.5px; font-weight: 500; } body.lgs-c2-home .lgs-np__q > summary::-webkit-details-marker { display: none; } body.lgs-c2-home .lgs-np__q > summary::after { content: "+"; font-family: var(--fp-sans); font-size: 18px; } body.lgs-c2-home .lgs-np__q[open] > summary::after { content: "\2212"; } body.lgs-c2-home .lgs-np__q p { font-size: 15.5px; margin: 0 0 12px; } /* L. colophon */ body.lgs-c2-home .lgs-np__colophon { margin: 44px 0 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; background: var(--fp-navy); color: #fff; padding: 30px 32px; } body.lgs-c2-home .lgs-np__colophon h2, body.lgs-c2-home .lgs-np__colophon .lgs-np__kicker, body.lgs-c2-home .lgs-np__colophon a { color: #fff; } body.lgs-c2-home .lgs-np__colophon p { font-size: 16px; } body.lgs-c2-home .lgs-np__sig { font-style: italic; } body.lgs-c2-home .lgs-np__colcta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px !important; } body.lgs-c2-home .lgs-np__collinks { display: flex; flex-direction: column; gap: 8px; font-family: var(--fp-sans); font-size: 14px; border-left: 1px solid rgba(255, 255, 255, .3); padding-left: 24px; } body.lgs-c2-home .lgs-np__collinks a { text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 899px) { body.lgs-c2-home .lgs-np h2 { font-size: 26px; } body.lgs-c2-home .lgs-np__numbers { flex-direction: column; align-items: flex-start; gap: 6px; } body.lgs-c2-home .lgs-np__numbers ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px 0; } body.lgs-c2-home .lgs-np__numbers li { min-width: 0; padding: 0 8px; font-size: 11px; } body.lgs-c2-home .lgs-np__numbers li:nth-child(3n+1) { border-left: 0; padding-left: 0; } body.lgs-c2-home .lgs-np__numbers b { font-size: 19px; } body.lgs-c2-home .lgs-np__trade, body.lgs-c2-home .lgs-np__how, body.lgs-c2-home .lgs-np__whygrid, body.lgs-c2-home .lgs-np__paper, body.lgs-c2-home .lgs-np__guides, body.lgs-c2-home .lgs-np__colophon, body.lgs-c2-home .lgs-np__qs { grid-template-columns: 1fr; gap: 16px; } body.lgs-c2-home .lgs-np__trade--supply { padding: 16px; } body.lgs-c2-home .lgs-np__trade--stock > div, body.lgs-c2-home .lgs-np__trade--commission > div, body.lgs-c2-home .lgs-np__guides > div { padding: 0 16px 18px; } body.lgs-c2-home .lgs-np__trade--commission > div { padding-top: 18px; } body.lgs-c2-home .lgs-np__pic--trade, body.lgs-c2-home .lgs-np__pic--guides { min-height: 170px; height: 170px; } body.lgs-c2-home .lgs-np__trade--commission .lgs-np__pic--trade { order: -1; } body.lgs-c2-home .lgs-np__how h2 { font-size: 28px; } body.lgs-c2-home .lgs-np__pic--how { height: 180px; } body.lgs-c2-home .lgs-np__howsteps li { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; } body.lgs-c2-home .lgs-np__num { font-size: 46px; } body.lgs-c2-home .lgs-np__howsteps h3 { font-size: 20px; } body.lgs-c2-home .lgs-np__families { grid-template-columns: 1fr 1fr; } body.lgs-c2-home .lgs-np__family { padding: 12px 10px 14px; } body.lgs-c2-home .lgs-np__family:nth-child(odd) { border-left: 0; padding-left: 0; } body.lgs-c2-home .lgs-np__family:nth-child(even) { padding-right: 0; } body.lgs-c2-home .lgs-np__pic--family { height: 100px; } body.lgs-c2-home .lgs-np__indiegrid { grid-template-columns: 1fr 1fr; gap: 14px; } body.lgs-c2-home .lgs-np__indie:first-child { grid-column: 1 / -1; grid-row: auto; } body.lgs-c2-home .lgs-np__indie:first-child .lgs-np__pic--indie { height: 200px; } body.lgs-c2-home .lgs-np__pic--indie { height: 110px; } body.lgs-c2-home .lgs-np__indie h3 { font-size: 17px; } body.lgs-c2-home .lgs-np__indie p:not(.lgs-np__kicker):not(.lgs-np__where) { display: none; } body.lgs-c2-home .lgs-np__indie:first-child p:not(.lgs-np__kicker) { display: block; } body.lgs-c2-home .lgs-np__whycols { grid-template-columns: 1fr; } body.lgs-c2-home .lgs-np__pic--why { height: 200px; } body.lgs-c2-home .lgs-np__follow { border-right: 0; border-bottom: 1px solid rgba(30, 47, 60, .2); padding: 18px 16px; } body.lgs-c2-home .lgs-np__noticegrid { grid-template-columns: 1fr 1fr; gap: 10px; } body.lgs-c2-home .lgs-np__notice p:not(.lgs-np__kicker) { font-size: 14px; } body.lgs-c2-home .lgs-np__topics { columns: 1; } body.lgs-c2-home .lgs-np__colophon { padding: 22px 16px; } body.lgs-c2-home .lgs-np__collinks { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 14px; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; } } @media (max-width: 420px) { body.lgs-c2-home .lgs-np__noticegrid { grid-template-columns: 1fr; } body.lgs-c2-home .lgs-np__notice p:not(.lgs-np__kicker) { font-size: 15px; } } /* 33d. HOMEPAGE-1c review: the lead headline keeps its size over the generic zone h2; Hearabouts in the paper's navy */ body.lgs-c2-home .lgs-np .lgs-np__lead h2 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.04; margin: 0 0 16px; } body.lgs-c2-home .lgs-np .lgs-np__why > h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.05; } body.lgs-c2-home .lgs-np__ha .lgs-ha button, body.lgs-c2-home .lgs-np__ha .lgs-ha input[type=submit] { background: var(--fp-navy); border-color: var(--fp-navy); border-radius: 0; font-family: var(--fp-sans); } body.lgs-c2-home .lgs-np__ha .lgs-ha__kicker { color: var(--fp-ink); font-family: var(--fp-sans); letter-spacing: .14em; font-size: 11px; } body.lgs-c2-home .lgs-np__ha .lgs-ha input[type=email], body.lgs-c2-home .lgs-np__ha .lgs-ha input[type=text] { border-radius: 0; border: 1px solid var(--fp-ink); } body.lgs-c2-home .lgs-np__notices .lgs-np__small { margin-top: 12px; } @media (max-width: 899px) { body.lgs-c2-home .lgs-np .lgs-np__lead h2 { font-size: 34px; } } /* 32l. HOMEPAGE-1 follow-up: the trade editorials on town pages */ .lgs-spine.lgs-fp .lgs-fp__tbox { display: grid; gap: 0; align-items: stretch; margin-top: 28px; } .lgs-spine.lgs-fp .lgs-fp__tbox > div:not(.lgs-fp__tpic) { padding: 18px 20px; } .lgs-spine.lgs-fp .lgs-fp__tbox h3 { font-size: 24px; line-height: 1.15; margin: 0 0 6px; } .lgs-spine.lgs-fp .lgs-fp__tbox p:not(.lgs-fp__kicker) { font-size: 16px; } .lgs-spine.lgs-fp .lgs-fp__tpic { min-height: 190px; background: var(--fp-tint) center / cover no-repeat; } .lgs-spine.lgs-fp .lgs-fp__tbox--stock { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); background: var(--fp-blush); } .lgs-spine.lgs-fp .lgs-fp__tbox--commission { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); background: var(--fp-navy); color: #fff; } .lgs-spine.lgs-fp .lgs-fp__tbox--commission h3, .lgs-spine.lgs-fp .lgs-fp__tbox--commission .lgs-fp__kicker { color: #fff; } .lgs-spine.lgs-fp .lgs-fp__btn--light { background: #fff; color: var(--fp-navy); border-color: #fff; } .lgs-spine.lgs-fp .lgs-fp__tsteps { list-style: none; margin: 4px 0 12px; padding: 0; } .lgs-spine.lgs-fp .lgs-fp__tsteps li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid var(--fp-hair); font-size: 15.5px !important; } .lgs-spine.lgs-fp .lgs-fp__tsteps li:last-child { border-bottom: 1px solid var(--fp-hair); } .lgs-spine.lgs-fp .lgs-fp__tsteps b { font-family: var(--fp-sans); font-size: 11px; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: var(--fp-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 899px) { .lgs-spine.lgs-fp #stock-local-makers { order: 8; } .lgs-spine.lgs-fp #commission { order: 12; } .lgs-spine.lgs-fp .lgs-fp__tbox { grid-template-columns: 1fr; margin-top: 22px; } .lgs-spine.lgs-fp .lgs-fp__tpic { min-height: 150px; } .lgs-spine.lgs-fp .lgs-fp__tbox--commission .lgs-fp__tpic { order: -1; } .lgs-spine.lgs-fp .lgs-fp__tbox > div:not(.lgs-fp__tpic) { padding: 16px; } } /* homepage: the fold label is a label, not a count suffix */ body.lgs-c2-home .lgs-np__more > summary::after { content: " \2193"; } body.lgs-c2-home .lgs-np__more[open] > summary::after { content: " \2191"; } body.lgs-c2-home .lgs-np__more > summary::after { content: "\00a0\2193"; } body.lgs-c2-home .lgs-np__more[open] > summary::after { content: "\00a0\2191"; } /* ------------------------------------------------------------------ */ /* 34. CATPAGE-1 (2026-09-24): category pages as sections of the paper. */ /* Own scope main.lgs-spine.lgs-cp (never the town page's generic C2 */ /* rules); beats print_style_once() and module inline styles. */ /* ------------------------------------------------------------------ */ body.lgs-cp-page { background: #fbf9f4; } .lgs-spine.lgs-cp { --fp-ground: #fbf9f4; --fp-tint: #f4f0e8; --fp-ink: #1e2f3c; --fp-navy: #1d3a4d; --fp-steel: #3b6b88; --fp-blue: #dfe9ef; --fp-blush: #f3d9d2; --fp-hair: #cdc7ba; --fp-muted: #4c5b66; --fp-serif: "Newsreader", Georgia, "Times New Roman", serif; --fp-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --lgs-green: var(--fp-navy); --lgs-deep: var(--fp-navy); --lgs-cta: var(--fp-navy); --lgs-cta-hover: #122735; --lgs-ink: var(--fp-ink); --lgs-ink-strong: var(--fp-ink); --lgs-muted: var(--fp-muted); --lgs-card: var(--fp-ground); --lgs-oat: var(--fp-tint); --lgs-aside: var(--fp-tint); --lgs-sage-wash: var(--fp-tint); --lgs-card-border: var(--fp-hair); --lgs-sage-border: var(--fp-hair); --lgs-card-shadow: none; --lgs-font-head: var(--fp-serif); --lgs-font-body: var(--fp-serif); --lgs-weight-head: 600; max-width: 1180px; margin: 0 auto; padding: 8px 24px 48px; box-sizing: border-box; background: var(--fp-ground); color: var(--fp-ink); font-family: var(--fp-serif); font-size: 17px; line-height: 1.5; } .lgs-spine.lgs-cp h1, .lgs-spine.lgs-cp h2, .lgs-spine.lgs-cp h3 { font-family: var(--fp-serif); color: var(--fp-ink); font-weight: 600; letter-spacing: -.005em; } .lgs-spine.lgs-cp h2 { font-size: 28px; line-height: 1.15; margin: 0 0 10px; } .lgs-spine.lgs-cp h3 { font-size: 20px; line-height: 1.2; } .lgs-spine.lgs-cp a { color: var(--fp-navy); } .lgs-spine.lgs-cp p { margin: 0 0 10px; } .lgs-spine.lgs-cp .lgs-cp__kicker, .lgs-spine.lgs-cp .lgs-town__kicker, .lgs-spine.lgs-cp .lgs-cm__kicker, .lgs-spine.lgs-cp .lgs-cp__section { font-family: var(--fp-sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fp-ink); margin: 0 0 6px; } .lgs-spine.lgs-cp section { box-sizing: border-box; } /* the section masthead */ .lgs-spine.lgs-cp .lgs-cp__hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; background: none; border: 0; border-top: 1px solid var(--fp-ink); border-bottom: 3px double var(--fp-ink); border-radius: 0; box-shadow: none; padding: 14px 0 22px; margin: 0; min-height: 0; color: var(--fp-ink); } .lgs-spine.lgs-cp .lgs-cp__hero::before, .lgs-spine.lgs-cp .lgs-cp__hero::after { content: none; display: none; } .lgs-spine.lgs-cp .lgs-spine__crumbs { font-family: var(--fp-sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-muted); margin: 0 0 12px; } .lgs-spine.lgs-cp .lgs-spine__crumbs a { color: var(--fp-muted); } .lgs-spine.lgs-cp .lgs-cp__section { color: var(--fp-steel); } .lgs-spine.lgs-cp .lgs-cp__hero h1 { font-size: clamp(40px, 5.2vw, 66px); line-height: 1; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 14px; } .lgs-spine.lgs-cp .lgs-spine__lead { font-size: 18.5px; line-height: 1.45; color: var(--fp-ink); max-width: 40em; } .lgs-spine.lgs-cp .lgs-spine__hero-why { font-size: 16px; } .lgs-spine.lgs-cp .lgs-spine__summary { font-family: var(--fp-sans); font-size: 13px; font-weight: 600; color: var(--fp-ink); border-top: 1px solid var(--fp-hair); padding-top: 8px; margin-top: 12px; } .lgs-spine.lgs-cp .lgs-spine__promise { font-style: italic; color: var(--fp-steel); font-size: 16px; } .lgs-spine.lgs-cp .lgs-cp__jump { border: 1px solid var(--fp-ink); padding: 10px 14px; margin: 14px 0 0; max-width: 34em; font-family: var(--fp-sans); } .lgs-spine.lgs-cp .lgs-cp__jump ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 18px; } .lgs-spine.lgs-cp .lgs-cp__jump li { font-size: 13px; margin: 0 0 5px; break-inside: avoid; } .lgs-spine.lgs-cp .lgs-cp__jump a { text-decoration: none; font-weight: 600; } .lgs-spine.lgs-cp .lgs-cp__jump a::after { content: "\00a0\2193"; font-weight: 400; } .lgs-spine.lgs-cp .lgs-cp__herophoto { margin: 0 0 14px; height: 230px; background: var(--fp-tint) center / cover no-repeat; } /* the search boxes (standard and discovery), the town page's field grammar */ .lgs-spine.lgs-cp .lgs-spine__find { background: var(--fp-tint); border: 0; border-top: 3px solid var(--fp-ink); border-radius: 0; box-shadow: none; padding: 16px 18px; margin: 0; } .lgs-spine.lgs-cp .lgs-spine__find h2 { font-size: 22px; margin: 0 0 10px; } .lgs-spine.lgs-cp .lgs-spine__find-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0 0 10px; } .lgs-spine.lgs-cp .lgs-spine__find input[type=text], .lgs-spine.lgs-cp .lgs-spine__find input[type=email], .lgs-spine.lgs-cp .lgs-spine__notify input[type=text], .lgs-spine.lgs-cp .lgs-spine__notify input[type=email] { min-height: 44px; border: 1px solid var(--fp-ink); border-radius: 0; background: #fff; font-family: var(--fp-sans); font-size: 15px; padding: 0 12px; box-sizing: border-box; width: 100%; box-shadow: none; } .lgs-spine.lgs-cp .lgs-spine__find button, .lgs-spine.lgs-cp .lgs-spine__notify button, .lgs-spine.lgs-cp .lgs-spine__trade-form button, .lgs-spine.lgs-cp .lgs-spine__trade-form input[type=submit] { min-height: 44px; border-radius: 0 !important; background: var(--fp-navy) !important; color: #fff !important; border: 0 !important; font-family: var(--fp-sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 0 18px; cursor: pointer; box-shadow: none !important; } .lgs-spine.lgs-cp .lgs-spine__find-label, .lgs-spine.lgs-cp .lgs-spine__find-radius label { font-family: var(--fp-sans); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fp-ink); display: block; margin: 0 0 4px; } .lgs-spine.lgs-cp .lgs-log-radius__value { background: none; padding: 0; min-width: 0; font-weight: 700; color: var(--fp-ink); } .lgs-spine.lgs-cp .lgs-log-radius__slider { accent-color: var(--fp-navy); width: 100%; } .lgs-spine.lgs-cp .lgs-spine__find-hint, .lgs-spine.lgs-cp .lgs-spine__find-count { font-family: var(--fp-sans); font-size: 12px; color: var(--fp-muted); margin: 8px 0 0; } .lgs-spine.lgs-cp .lgs-spine__find--disc { display: block; } .lgs-spine.lgs-cp .lgs-spine__disc-cta, .lgs-spine.lgs-cp a.lgs-cm__pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--fp-navy) !important; color: #fff !important; border: 1px solid var(--fp-navy) !important; border-radius: 0 !important; font-family: var(--fp-sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-sizing: border-box; box-shadow: none !important; } .lgs-spine.lgs-cp .lgs-spine__disc-cta2, .lgs-spine.lgs-cp a.lgs-cm__pill--ghost { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: transparent !important; color: var(--fp-navy) !important; border: 1px solid var(--fp-navy) !important; border-radius: 0 !important; font-family: var(--fp-sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; } /* where to find them: the index box */ .lgs-spine.lgs-cp .lgs-cp__index { display: block; border: 1px solid var(--fp-ink); padding: 14px 16px; margin: 22px 0 0; font-size: inherit; color: var(--fp-ink); } .lgs-spine.lgs-cp .lgs-cp__index > strong, .lgs-spine.lgs-cp .lgs-cp__related > strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .lgs-spine.lgs-cp .lgs-cp__index ul { list-style: none; margin: 4px 0 0; padding: 0; columns: 5; column-gap: 20px; column-rule: 1px solid var(--fp-hair); } .lgs-spine.lgs-cp .lgs-cp__index li { font-size: 15px; line-height: 1.3; padding: 3px 0; break-inside: avoid; } .lgs-spine.lgs-cp .lgs-cp__index li a { text-decoration: none; color: var(--fp-ink); } .lgs-spine.lgs-cp .lgs-cp__index li a:hover { text-decoration: underline; } .lgs-spine.lgs-cp .lgs-cp__index li span { font-family: var(--fp-sans); font-size: 11px; color: var(--fp-muted); } .lgs-spine.lgs-cp p.lgs-spine__links { font-family: var(--fp-sans); font-size: 13px; font-weight: 600; margin: 16px 0 0; } /* the directory and its sidebar */ .lgs-spine.lgs-cp .lgs-cp__body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 30px; margin: 26px 0 0; align-items: start; } .lgs-spine.lgs-cp .lgs-cp__sechead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; border-top: 1px solid var(--fp-ink); padding-top: 10px; margin: 0 0 12px; } .lgs-spine.lgs-cp .lgs-cp__sechead h2 { font-size: 26px; margin: 0; } .lgs-spine.lgs-cp .lgs-cp__listings { margin: 26px 0 0; } .lgs-spine.lgs-cp .lgs-spine__grid--cat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; margin: 0; } .lgs-spine.lgs-cp .lgs-cp__listings .lgs-spine__grid--cat { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lgs-spine.lgs-cp .lgs-spine__card { background: none !important; border: 0; border-top: 1px solid var(--fp-hair); border-radius: 0; box-shadow: none !important; padding: 10px 0 14px; transform: none !important; } .lgs-spine.lgs-cp .lgs-spine__card:hover { box-shadow: none; transform: none; } .lgs-spine.lgs-cp .lgs-spine__card h3 { font-size: 18px; line-height: 1.2; margin: 0 0 2px; } .lgs-spine.lgs-cp .lgs-spine__card h3 a { color: var(--fp-ink); text-decoration: none; } .lgs-spine.lgs-cp .lgs-spine__card h3 a:hover { text-decoration: underline; } .lgs-spine.lgs-cp .lgs-spine__town { font-family: var(--fp-sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fp-steel); margin: 0 0 4px; } .lgs-spine.lgs-cp .lgs-town__desc { font-size: 14.5px; line-height: 1.4; color: var(--fp-ink); margin: 0 0 6px; } .lgs-spine.lgs-cp .lgs-spine__claim { font-family: var(--fp-sans); font-size: 12px; margin: 0; } .lgs-spine.lgs-cp .lgs-spine__claim a { color: var(--fp-muted); } .lgs-spine.lgs-cp .lgs-spine__seeall { font-family: var(--fp-sans); font-size: 12px; color: var(--fp-muted); border-top: 1px solid var(--fp-hair); padding-top: 8px; margin: 6px 0 0; } .lgs-spine.lgs-cp .lgs-cp__side > * { margin: 0 0 18px !important; } .lgs-spine.lgs-cp .lgs-cp__side .lgs-ha { background: var(--fp-blue) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px !important; } .lgs-spine.lgs-cp .lgs-cp__side .lgs-ha button, .lgs-spine.lgs-cp .lgs-cp__side .lgs-ha input[type=submit] { background: var(--fp-navy) !important; border-radius: 0 !important; border-color: var(--fp-navy) !important; font-family: var(--fp-sans); } .lgs-spine.lgs-cp .lgs-cp__side .lgs-ha input[type=email], .lgs-spine.lgs-cp .lgs-cp__side .lgs-ha input[type=text] { border-radius: 0; border: 1px solid var(--fp-ink); } .lgs-spine.lgs-cp .lgs-spine__notify { background: var(--fp-blush); border: 0; border-top: 3px solid var(--fp-ink); border-radius: 0; box-shadow: none; padding: 16px; } .lgs-spine.lgs-cp .lgs-spine__notify h2, .lgs-spine.lgs-cp .lgs-spine__trade-door h2, .lgs-spine.lgs-cp .lgs-cm h2 { font-size: 22px; } .lgs-spine.lgs-cp .lgs-spine__notify p, .lgs-spine.lgs-cp .lgs-spine__trade-door p, .lgs-spine.lgs-cp .lgs-cm p { font-size: 15px; } .lgs-spine.lgs-cp .lgs-spine__notify .lgs-spine__find-row { grid-template-columns: 1fr; } .lgs-spine.lgs-cp .lgs-spine__trade-door { background: #fff; border: 2px solid var(--fp-ink); border-radius: 0; box-shadow: none; padding: 16px; } .lgs-spine.lgs-cp .lgs-spine__trade-details > summary { font-family: var(--fp-sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--fp-navy); color: #fff; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; cursor: pointer; list-style: none; border-radius: 0; } .lgs-spine.lgs-cp .lgs-spine__trade-details > summary::-webkit-details-marker { display: none; } .lgs-spine.lgs-cp .lgs-cm { background: var(--fp-tint) !important; border: 0 !important; border-top: 3px solid var(--fp-ink) !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px !important; } /* Good to know: a feature */ .lgs-spine.lgs-cp .lgs-spine__know { background: none; border: 0; border-top: 3px solid var(--fp-ink); border-radius: 0; box-shadow: none; padding: 14px 0 0; margin: 40px 0 0; } .lgs-spine.lgs-cp .lgs-spine__know > h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; margin: 0 0 16px; } .lgs-spine.lgs-cp .lgs-cp__featphoto { margin: 0 0 18px; height: 320px; background: var(--fp-tint) center / cover no-repeat; } .lgs-spine.lgs-cp .lgs-cp__featbody { columns: 2; column-gap: 34px; column-rule: 1px solid var(--fp-hair); } .lgs-spine.lgs-cp .lgs-cp__featbody h3 { font-size: 21px; margin: 0 0 6px; break-after: avoid; } .lgs-spine.lgs-cp .lgs-cp__featbody p, .lgs-spine.lgs-cp .lgs-cp__featbody li { font-size: 16.5px; line-height: 1.55; } .lgs-spine.lgs-cp .lgs-cp__featbody ul { margin: 0 0 12px; padding-left: 18px; } .lgs-spine.lgs-cp .lgs-cp__featbody > h3:first-child::first-letter { font-size: 1em; } .lgs-spine.lgs-cp .lgs-spine__author { break-inside: avoid; background: var(--fp-tint); border: 0; border-left: 3px solid var(--fp-steel); border-radius: 0; padding: 12px 14px; margin: 16px 0 0; } .lgs-spine.lgs-cp .lgs-spine__author p { font-size: 14px !important; font-style: italic; } /* quick answers beside the producers' door */ .lgs-spine.lgs-cp .lgs-cp__pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 30px; margin: 40px 0 0; align-items: start; } .lgs-spine.lgs-cp .lgs-spine__faq { background: none; border: 0; border-top: 1px solid var(--fp-ink); border-radius: 0; box-shadow: none; padding: 12px 0 0; margin: 0; } .lgs-spine.lgs-cp .lgs-faq__item { border: 0; border-bottom: 1px solid var(--fp-hair); border-radius: 0; background: none; } .lgs-spine.lgs-cp .lgs-faq__item summary, .lgs-spine.lgs-cp .lgs-faq__q { font-family: var(--fp-serif); font-size: 17px; font-weight: 500; color: var(--fp-ink); min-height: 44px; } .lgs-spine.lgs-cp .lgs-faq__item p, .lgs-spine.lgs-cp .lgs-faq__a { font-size: 15.5px; } .lgs-spine.lgs-cp .lgs-spine__guides { background: var(--fp-tint); border: 0; border-top: 3px solid var(--fp-ink); border-radius: 0; box-shadow: none; padding: 16px 18px; margin: 0; } .lgs-spine.lgs-cp .lgs-spine__guides h2 { font-size: 24px; } .lgs-spine.lgs-cp .lgs-spine__guides p { font-size: 15.5px; } .lgs-spine.lgs-cp .lgs-spine__guides .lgs-spine__links { font-family: var(--fp-sans); font-size: 13px; line-height: 1.6; } /* related sections: picture tiles */ .lgs-spine.lgs-cp .lgs-cp__related { display: block; margin: 40px 0 0; border-top: 1px solid var(--fp-ink); padding-top: 12px; } .lgs-spine.lgs-cp .lgs-cp__related ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .lgs-spine.lgs-cp .lgs-cp__related a { display: block; text-decoration: none; color: var(--fp-ink); } .lgs-spine.lgs-cp .lgs-cp__tilepic { display: block; height: 96px; background: var(--fp-tint) center / cover no-repeat; margin: 0 0 6px; } .lgs-spine.lgs-cp .lgs-cp__tilename { font-family: var(--fp-serif); font-size: 15.5px; font-weight: 600; line-height: 1.25; } .lgs-spine.lgs-cp .lgs-updated, .lgs-spine.lgs-cp p.lgs-updated { font-family: var(--fp-sans); font-size: 12px; color: var(--fp-muted); border-top: 3px double var(--fp-ink); padding-top: 10px; margin: 36px 0 0; } /* the discovery layouts: the same departments */ .lgs-spine.lgs-cp .lgs-spine__disc-why, .lgs-spine.lgs-cp .lgs-spine__disc-styles, .lgs-spine.lgs-cp .lgs-spine__disc-rel, .lgs-spine.lgs-cp .lgs-spine__disc-times, .lgs-spine.lgs-cp .lgs-spine__disc-where, .lgs-spine.lgs-cp .lgs-spine__disc-comm, .lgs-spine.lgs-cp .lgs-cat__community { background: none; border: 0; border-top: 1px solid var(--fp-ink); border-radius: 0; box-shadow: none; padding: 12px 0 0; margin: 34px 0 0; } .lgs-spine.lgs-cp .lgs-spine__disc-why:not(.lgs-spine__disc-place) { border-top: 3px solid var(--fp-ink); } .lgs-spine.lgs-cp .lgs-spine__disc-why p { max-width: 44em; font-size: 17px; } .lgs-spine.lgs-cp .lgs-spine__disc-place { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--fp-tint); border-top: 3px solid var(--fp-ink); padding: 18px 20px; } .lgs-spine.lgs-cp .lgs-spine__disc-feature { background: #fff; border: 1px solid var(--fp-ink); border-radius: 0; box-shadow: none; padding: 16px 18px; margin: 26px 0 0; } .lgs-spine.lgs-cp .lgs-spine__disc-beg, .lgs-spine.lgs-cp .lgs-spine__disc-price { background: var(--fp-tint); border: 0; border-radius: 0; box-shadow: none; padding: 16px 18px; margin: 26px 0 0; } .lgs-spine.lgs-cp .lgs-spine__disc-online { border: 0; border-top: 1px solid var(--fp-hair); background: none; padding: 10px 0 0; margin: 26px 0 0; } .lgs-spine.lgs-cp .lgs-spine__disc-online h2 { font-size: 18px; } .lgs-spine.lgs-cp .lgs-spine__disc-online p { font-size: 14.5px; color: var(--fp-muted); } .lgs-spine.lgs-cp .lgs-spine__disc-claim { background: var(--fp-blush); border: 0; border-top: 3px solid var(--fp-ink); border-radius: 0; box-shadow: none; padding: 18px 20px; margin: 30px 0 0; } .lgs-spine.lgs-cp .lgs-spine__disc-ctas { display: flex; flex-wrap: wrap; gap: 10px; } .lgs-spine.lgs-cp .lgs-spine__disc-near { background: var(--fp-tint); border: 0; border-top: 3px solid var(--fp-ink); border-radius: 0; padding: 16px 18px; margin: 30px 0 0; } .lgs-spine.lgs-cp .lgs-spine__disc-near .lgs-spine__find { background: none; border: 0; padding: 0; } .lgs-spine.lgs-cp .lgs-spine__disc-close { background: var(--fp-navy); color: #fff; border: 0; border-radius: 0; box-shadow: none; padding: 26px 28px; margin: 40px 0 0; } .lgs-spine.lgs-cp .lgs-spine__disc-close h2, .lgs-spine.lgs-cp .lgs-spine__disc-close p, .lgs-spine.lgs-cp .lgs-spine__disc-close strong, .lgs-spine.lgs-cp .lgs-spine__disc-close label, .lgs-spine.lgs-cp .lgs-spine__disc-close .lgs-log-radius__value { color: #fff; } .lgs-spine.lgs-cp .lgs-spine__disc-close .lgs-spine__find { background: none; border: 0; padding: 0; margin: 10px 0; } .lgs-spine.lgs-cp .lgs-spine__disc-close .lgs-spine__find button { background: #fff !important; color: var(--fp-navy) !important; } .lgs-spine.lgs-cp .lgs-spine__disc-close .lgs-spine__find-count { color: rgba(255, 255, 255, .8); } .lgs-spine.lgs-cp .lgs-spine__disc-provs { list-style: none; margin: 8px 0 12px; padding: 0; columns: 2; column-gap: 24px; } .lgs-spine.lgs-cp .lgs-spine__disc-provs li { break-inside: avoid; padding: 5px 0; border-bottom: 1px dotted var(--fp-hair); font-size: 15.5px; } .lgs-spine.lgs-cp .lgs-facet__row { display: flex; flex-wrap: wrap; gap: 8px; } .lgs-spine.lgs-cp .lgs-facet__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--fp-ink); border-radius: 0; background: #fff; color: var(--fp-ink); font-family: var(--fp-sans); font-size: 13px; text-decoration: none; } .lgs-spine.lgs-cp .lgs-facet__chip.is-on { background: var(--fp-navy); color: #fff; border-color: var(--fp-navy); } .lgs-spine.lgs-cp .lgs-spine__count { font-family: var(--fp-sans); font-size: 11px; color: inherit; opacity: .75; } .lgs-spine.lgs-cp .lgs-spine__disc-know { font-size: 15px; } /* phone */ @media (max-width: 899px) { .lgs-spine.lgs-cp { padding: 4px 16px 36px; font-size: 16.5px; } .lgs-spine.lgs-cp .lgs-cp__hero, .lgs-spine.lgs-cp .lgs-cp__body, .lgs-spine.lgs-cp .lgs-cp__pair { grid-template-columns: 1fr; gap: 16px; } .lgs-spine.lgs-cp .lgs-cp__hero h1 { font-size: 38px; } .lgs-spine.lgs-cp .lgs-spine__lead { font-size: 17px; } .lgs-spine.lgs-cp .lgs-cp__herophoto { height: 170px; } .lgs-spine.lgs-cp .lgs-cp__jump ul { columns: 2; } .lgs-spine.lgs-cp .lgs-cp__index ul { columns: 2; } .lgs-spine.lgs-cp .lgs-spine__grid--cat, .lgs-spine.lgs-cp .lgs-cp__listings .lgs-spine__grid--cat { grid-template-columns: 1fr 1fr; gap: 0 14px; } .lgs-spine.lgs-cp .lgs-spine__card h3 { font-size: 16.5px; } .lgs-spine.lgs-cp .lgs-town__desc { font-size: 13.5px; } .lgs-spine.lgs-cp .lgs-cp__featphoto { height: 200px; } .lgs-spine.lgs-cp .lgs-cp__featbody { columns: 1; } .lgs-spine.lgs-cp .lgs-cp__related ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .lgs-spine.lgs-cp .lgs-cp__tilepic { height: 72px; } .lgs-spine.lgs-cp .lgs-spine__disc-provs { columns: 1; } .lgs-spine.lgs-cp .lgs-spine__disc-close { padding: 20px 16px; } } @media (max-width: 420px) { .lgs-spine.lgs-cp .lgs-spine__grid--cat, .lgs-spine.lgs-cp .lgs-cp__listings .lgs-spine__grid--cat { grid-template-columns: 1fr; } .lgs-spine.lgs-cp .lgs-cp__related ul { grid-template-columns: 1fr 1fr; } } /* 34b. CATPAGE-1a review: the discovery search box stacks (label, field, distance, button); the close band's slider in white; guide links list */ .lgs-spine.lgs-cp .lgs-spine__find--disc .lgs-spine__find-row { display: block; margin: 0 0 12px; } .lgs-spine.lgs-cp .lgs-spine__find--disc .lgs-spine__find-radius { margin: 0 0 12px; } .lgs-spine.lgs-cp .lgs-spine__find--disc button { margin-top: 2px; } .lgs-spine.lgs-cp .lgs-spine__disc-close .lgs-spine__find { max-width: 520px; } .lgs-spine.lgs-cp .lgs-spine__disc-close .lgs-log-radius__slider { accent-color: #fff; } .lgs-spine.lgs-cp .lgs-spine__disc-close .lgs-spine__find-label, .lgs-spine.lgs-cp .lgs-spine__disc-close .lgs-spine__find-radius label { color: #fff; } .lgs-spine.lgs-cp .lgs-cp__guidelinks { list-style: none; margin: 8px 0 0; padding: 0; font-family: var(--fp-sans); font-size: 13px; font-weight: 600; } .lgs-spine.lgs-cp .lgs-cp__guidelinks li { padding: 6px 0; border-top: 1px solid var(--fp-hair); } .lgs-spine.lgs-cp .lgs-cp__guidelinks li:last-child a::after { content: "\00a0\2192"; } /* ------------------------------------------------------------------ */ /* 35. HEADER-FOOTER-1 (owner brief 2026-09-25): two-row header, the */ /* four-column footer, /claim-your-listing/ and /hearabouts/. Active */ /* only where LGS_HF1 renders the .lgs-hf1 markup (switch or ?hf1=1). */ /* ------------------------------------------------------------------ */ .lgs-shell.lgs-hf1 .lgs-hf1__top { max-width: var(--c2-max); margin: 0 auto; padding: 0 var(--c2-gutter); } .lgs-shell.lgs-hf1 .lgs-hf1__toplist { list-style: none; margin: 0; padding: 7px 0 6px; display: flex; justify-content: flex-end; gap: 22px; border-bottom: 1px solid var(--fp-hair, #cdc7ba); } .lgs-shell.lgs-hf1 .lgs-hf1__toplist a { font-family: var(--fp-sans, "Work Sans", Arial, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fp-ink, #1e2f3c); text-decoration: none; } .lgs-shell.lgs-hf1 .lgs-hf1__toplist a:hover, .lgs-shell.lgs-hf1 .lgs-hf1__toplist a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; } .lgs-shell.lgs-hf1 .lgs-hf1__search { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 40px; padding: 0 !important; color: var(--fp-ink, #1e2f3c) !important; } .lgs-shell.lgs-hf1 .lgs-hf1__search:hover { color: var(--fp-navy, #1d3a4d) !important; } .lgs-shell.lgs-hf1 .lgs-hf1__menuonly { display: none; } .lgs-shell.lgs-hf1 .lgs-hf1__town { margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid var(--fp-hair, #cdc7ba); font-family: var(--fp-sans, "Work Sans", Arial, sans-serif); font-size: 14px; font-weight: 700; } .lgs-shell.lgs-hf1 .lgs-hf1__town[hidden] { display: none; } .lgs-shell.lgs-hf1 .lgs-hf1__town a { color: var(--fp-navy, #1d3a4d); text-decoration: none; margin-right: 14px; } .lgs-shell.lgs-hf1 .lgs-hf1__town a:hover { text-decoration: underline; text-underline-offset: 3px; } .lgs-shell.lgs-hf1 :focus-visible { outline: 2px solid var(--fp-steel, #3b6b88); outline-offset: 2px; } @media (max-width: 1099px) { .lgs-shell.lgs-hf1 .lgs-hf1__top, .lgs-shell.lgs-hf1 .lgs-hf1__searchli { display: none; } .lgs-shell.lgs-hf1 .lgs-hf1__menuonly { display: list-item; } } /* footer: Explore / Take part / For businesses and organisers / About and help */ .lgs-shell.lgs-hf1-foot .lgs-hf1-foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lgs-shell.lgs-hf1-foot .lgs-hf1-foot__legal { max-width: var(--c2-max); margin: 0 auto; padding: 0 var(--c2-gutter) 4px; font-family: var(--fp-sans, "Work Sans", Arial, sans-serif); font-size: 13px; color: var(--c2-muted); } .lgs-shell.lgs-hf1-foot .lgs-hf1-foot__legal a { color: var(--c2-muted); text-decoration: none; } .lgs-shell.lgs-hf1-foot .lgs-hf1-foot__legal a:hover { color: var(--fp-ink, #1e2f3c); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 900px) { .lgs-shell.lgs-hf1-foot .lgs-hf1-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .lgs-shell.lgs-hf1-foot .lgs-hf1-foot__cols { grid-template-columns: 1fr; } } /* the two new pages */ .lgs-hf1p .lgs-hf1p__page { max-width: 880px; margin: 0 auto; padding: 24px 24px 56px; } .lgs-hf1p .lgs-hf1p__head { border-top: 3px solid var(--fp-ink, #1e2f3c); padding-top: 16px; margin-bottom: 24px; } .lgs-hf1p .lgs-hf1p__head h1 { font-family: var(--fp-serif, "Newsreader", Georgia, serif); font-weight: 700; font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: -.02em; color: var(--fp-ink, #1e2f3c); margin: 6px 0 12px; } .lgs-hf1p .lgs-hf1p__lede { font-family: var(--fp-serif, "Newsreader", Georgia, serif); font-size: 20px; line-height: 1.45; color: var(--fp-ink, #1e2f3c); max-width: 60ch; } .lgs-hf1p .lgs-hf1p__find { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; gap: 12px; align-items: end; background: var(--fp-tint, #f4f0e8); border-top: 3px solid var(--fp-ink, #1e2f3c); padding: 18px; margin: 0 0 28px; } .lgs-hf1p .lgs-hf1p__find p { margin: 0; } .lgs-hf1p .lgs-hf1p__find label { display: block; font-family: var(--fp-sans, "Work Sans", Arial, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-ink, #1e2f3c); margin: 0 0 6px; } .lgs-hf1p .lgs-hf1p__find input { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; background: #fff; border: 1px solid var(--fp-ink, #1e2f3c); border-radius: 0; font-family: var(--fp-serif, "Newsreader", Georgia, serif); font-size: 17px; color: var(--fp-ink, #1e2f3c); } .lgs-hf1p .lgs-hf1p__find button, .lgs-hf1p .lgs-hf1p__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; background: var(--fp-navy, #1d3a4d); color: #fff !important; border: 1px solid var(--fp-navy, #1d3a4d); border-radius: 0; font-family: var(--fp-sans, "Work Sans", Arial, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .lgs-hf1p .lgs-hf1p__find button:hover, .lgs-hf1p .lgs-hf1p__btn:hover { background: #122735; } .lgs-hf1p .lgs-hf1p__results h2, .lgs-hf1p .lgs-hf1p__towns > h2, .lgs-hf1p .lgs-hf1p__signup h2 { font-family: var(--fp-serif, "Newsreader", Georgia, serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); color: var(--fp-ink, #1e2f3c); border-top: 1px solid var(--fp-ink, #1e2f3c); padding-top: 12px; margin: 0 0 12px; } .lgs-hf1p .lgs-hf1p__list { list-style: none; margin: 0 0 18px; padding: 0; } .lgs-hf1p .lgs-hf1p__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--fp-hair, #cdc7ba); } .lgs-hf1p .lgs-hf1p__row p { margin: 0; } .lgs-hf1p .lgs-hf1p__name { font-family: var(--fp-serif, "Newsreader", Georgia, serif); font-size: 20px; font-weight: 600; } .lgs-hf1p .lgs-hf1p__name a { color: var(--fp-ink, #1e2f3c); text-decoration: none; } .lgs-hf1p .lgs-hf1p__meta { grid-column: 1; font-family: var(--fp-sans, "Work Sans", Arial, sans-serif); font-size: 13px; color: var(--fp-muted, #4c5b66); } .lgs-hf1p .lgs-hf1p__act { grid-column: 2; grid-row: 1 / span 2; } .lgs-hf1p .lgs-hf1p__claimed { font-family: var(--fp-sans, "Work Sans", Arial, sans-serif); font-size: 13px; color: var(--fp-muted, #4c5b66); } .lgs-hf1p .lgs-hf1p__claimed a, .lgs-hf1p .lgs-hf1p__go a { color: var(--fp-navy, #1d3a4d); font-family: var(--fp-sans, "Work Sans", Arial, sans-serif); font-weight: 700; } .lgs-hf1p .lgs-hf1p__none { font-family: var(--fp-serif, "Newsreader", Georgia, serif); font-size: 19px; } .lgs-hf1p .lgs-hf1p__signup { background: var(--fp-tint, #f4f0e8); padding: 18px 20px 20px; margin: 0 0 32px; } .lgs-hf1p .lgs-hf1p__signup h2 { border-top: 0; padding-top: 0; } .lgs-hf1p .lgs-hf1p__towns { columns: 3 220px; column-gap: 28px; } .lgs-hf1p .lgs-hf1p__towns > h2 { column-span: all; } .lgs-hf1p .lgs-hf1p__county { break-inside: avoid; margin: 0 0 16px; } .lgs-hf1p .lgs-hf1p__county h3 { font-family: var(--fp-sans, "Work Sans", Arial, sans-serif); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fp-ink, #1e2f3c); margin: 0 0 6px; } .lgs-hf1p .lgs-hf1p__county ul { list-style: none; margin: 0; padding: 0; } .lgs-hf1p .lgs-hf1p__county a { font-family: var(--fp-serif, "Newsreader", Georgia, serif); font-size: 16px; line-height: 1.7; color: var(--fp-navy, #1d3a4d); text-decoration: none; } .lgs-hf1p .lgs-hf1p__county a:hover { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 640px) { .lgs-hf1p .lgs-hf1p__page { padding: 16px 16px 40px; } .lgs-hf1p .lgs-hf1p__find { grid-template-columns: 1fr; } .lgs-hf1p .lgs-hf1p__row { grid-template-columns: 1fr; } .lgs-hf1p .lgs-hf1p__act { grid-column: 1; grid-row: auto; margin-top: 8px; } } /* 2.14.1: the Hearabouts form on /hearabouts/ in the paper's style (the module's own CSS loads only with its block), and full-width section rules. */ .lgs-hf1p .lgs-hf1p__results h2 { max-width: none; width: auto; display: block; } .lgs-hf1p .lgs-hf1p__signup .lgs-ha__form { margin: 0; } .lgs-hf1p .lgs-hf1p__signup .lgs-ha__row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 8px; } .lgs-hf1p .lgs-hf1p__signup .lgs-ha__row input[type="email"] { flex: 2 1 240px; } .lgs-hf1p .lgs-hf1p__signup .lgs-ha__row input[type="text"] { flex: 1 1 140px; } .lgs-hf1p .lgs-hf1p__signup .lgs-ha__row input { box-sizing: border-box; min-height: 46px; padding: 10px 12px; background: #fff; border: 1px solid var(--fp-ink, #1e2f3c); border-radius: 0; font-family: var(--fp-serif, "Newsreader", Georgia, serif); font-size: 17px; color: var(--fp-ink, #1e2f3c); } .lgs-hf1p .lgs-hf1p__signup .lgs-ha__row button { flex: 0 0 auto; min-height: 46px; padding: 0 22px; background: var(--fp-navy, #1d3a4d); color: #fff; border: 1px solid var(--fp-navy, #1d3a4d); border-radius: 0; font-family: var(--fp-sans, "Work Sans", Arial, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .lgs-hf1p .lgs-hf1p__signup .lgs-ha__row button:hover { background: #122735; } .lgs-hf1p .lgs-hf1p__signup label { font-family: var(--fp-serif, "Newsreader", Georgia, serif); font-size: 16px; color: var(--fp-ink, #1e2f3c); } .lgs-hf1p .lgs-hf1p__signup input[type="checkbox"] { accent-color: var(--fp-navy, #1d3a4d); width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; } .lgs-hf1p .lgs-hf1p__signup p { font-family: var(--fp-serif, "Newsreader", Georgia, serif); font-size: 16px; line-height: 1.5; color: var(--fp-ink, #1e2f3c); margin: 6px 0; } .lgs-hf1p .lgs-hf1p__signup em, .lgs-hf1p .lgs-hf1p__signup i, .lgs-hf1p .lgs-hf1p__signup small { font-family: var(--fp-sans, "Work Sans", Arial, sans-serif); font-style: normal; font-size: 13px; color: var(--fp-muted, #4c5b66); } .lgs-hf1p .lgs-hf1p__signup .lgs-ha__err { background: var(--fp-blush, #f3d9d2); border-left: 3px solid var(--fp-ink, #1e2f3c); padding: 10px 14px; font-family: var(--fp-sans, "Work Sans", Arial, sans-serif); font-size: 14px; } /* 2.14.2: county headings out-ranked by the community skin; towns rule full width. */ body.lgs-c2-community .lgs-hf1p .lgs-hf1p__county h3 { font-family: var(--fp-sans, "Work Sans", Arial, sans-serif) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .12em !important; line-height: 1.4 !important; text-transform: uppercase; color: var(--fp-ink, #1e2f3c) !important; margin: 0 0 6px !important; } .lgs-hf1p .lgs-hf1p__towns > h2 { max-width: none; width: auto; display: block; } /* ------------------------------------------------------------------ */ /* 36. GUIDES-1 (2.15.0): the guides in the paper's style. */ /* body.lgs-c2-guides: /resource/, /resource/{craft}/{region}/, */ /* /resource/topic/{topic}/ and single guides (lgs-guides-c2.php). */ /* ------------------------------------------------------------------ */ body.lgs-c2-guides { --lgs-orange: var(--c2-green-deep); --lgs-deep: var(--c2-green-deep); --lgs-beige: var(--c2-wash); background: var(--c2-paper); color: var(--c2-body); } body.lgs-c2-guides .site-main { max-width: var(--c2-max) !important; margin: 0 auto !important; padding: 0 var(--c2-gutter) !important; } /* single guide: head */ body.lgs-c2-guides .lgs-gd-head { padding: 28px 0 0; margin: 0 0 28px; border-bottom: 2px solid var(--c2-rule-strong); } body.lgs-c2-guides .lgs-gd-head .lgs-guide-crumbs { font: 13px/1.5 var(--c2-sans) !important; color: var(--c2-muted) !important; margin: 0 0 18px !important; } body.lgs-c2-guides .lgs-gd-head .lgs-guide-crumbs a { color: var(--c2-green-deep) !important; } body.lgs-c2-guides .lgs-gd-kicker { font: 700 12px/1.4 var(--c2-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c2-green-deep); margin: 0 0 10px; } body.lgs-c2-guides h1.lgs-gd-title { font-family: var(--c2-serif) !important; font-weight: 600 !important; font-size: clamp(30px, 4.4vw, 46px) !important; line-height: 1.1 !important; color: var(--c2-ink) !important; margin: 0 0 14px !important; max-width: 22em; } body.lgs-c2-guides .lgs-gd-stand { font: italic 21px/1.45 var(--c2-serif); color: var(--c2-body); margin: 0 0 14px; max-width: 40em; } body.lgs-c2-guides .lgs-gd-meta { font: 14px/1.5 var(--c2-sans); color: var(--c2-muted); margin: 0 0 18px; } /* single guide: body + contents */ body.lgs-c2-guides .lgs-gd-layout { display: grid; grid-template-columns: minmax(0, 66ch) 250px; gap: 0 64px; align-items: start; } body.lgs-c2-guides .lgs-gd-layout--solo { grid-template-columns: minmax(0, 66ch); } body.lgs-c2-guides .lgs-gd-body { grid-column: 1; grid-row: 1; min-width: 0; } body.lgs-c2-guides .lgs-gd-toc { grid-column: 2; grid-row: 1; position: sticky; top: 24px; border-top: 2px solid var(--c2-rule-strong); padding-top: 12px; } body.lgs-c2-guides .lgs-gd-toc summary { font: 700 12px/1.4 var(--c2-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c2-ink); list-style: none; margin-bottom: 8px; } body.lgs-c2-guides .lgs-gd-toc summary::-webkit-details-marker { display: none; } body.lgs-c2-guides .lgs-gd-toc ol { list-style: none; margin: 0; padding: 0; } body.lgs-c2-guides .lgs-gd-toc li { margin: 0; } body.lgs-c2-guides .lgs-gd-toc a { display: block; font: 14px/1.4 var(--c2-sans) !important; padding: 8px 0 !important; color: var(--c2-body) !important; text-decoration: none; border-bottom: 1px solid var(--c2-hair); } body.lgs-c2-guides .lgs-gd-toc a:hover { color: var(--c2-green-deep) !important; text-decoration: underline; } body.lgs-c2-guides .lgs-gd-body p, body.lgs-c2-guides .lgs-gd-body li { font: 18px/1.65 var(--c2-sans); color: var(--c2-body); margin: 0 0 1.05em; } body.lgs-c2-guides .lgs-gd-body ul, body.lgs-c2-guides .lgs-gd-body ol { margin: 0 0 1.2em; padding-left: 1.3em; } body.lgs-c2-guides .lgs-gd-body h2 { font-family: var(--c2-serif) !important; font-weight: 600 !important; font-size: 27px !important; line-height: 1.2 !important; color: var(--c2-ink) !important; margin: 1.9em 0 .55em !important; padding-top: .7em; border-top: 1px solid var(--c2-rule); scroll-margin-top: 20px; } body.lgs-c2-guides .lgs-gd-body > h2:first-child { margin-top: 0 !important; padding-top: 0; border-top: 0; } body.lgs-c2-guides .lgs-gd-body h3 { font: 600 21px/1.3 var(--c2-serif) !important; color: var(--c2-ink) !important; margin: 1.4em 0 .4em !important; } body.lgs-c2-guides .lgs-gd-body a { color: var(--c2-green-deep); text-underline-offset: 3px; } body.lgs-c2-guides .lgs-gd-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font: 15px/1.5 var(--c2-sans); } body.lgs-c2-guides .lgs-gd-body th, body.lgs-c2-guides .lgs-gd-body td { border-bottom: 1px solid var(--c2-hair); padding: 8px 10px 8px 0; text-align: left; vertical-align: top; } body.lgs-c2-guides .lgs-gd-body h2.lgs-gd-refs ~ p, body.lgs-c2-guides .lgs-gd-body h2.lgs-gd-refs ~ ul li { font-size: 15px; color: var(--c2-muted); } /* single guide: related guides, listing box */ body.lgs-c2-guides .lgs-guide-foot { margin-top: 48px !important; padding-top: 16px !important; border-top: 2px solid var(--c2-rule-strong) !important; } body.lgs-c2-guides .lgs-guide-foot__kicker { color: var(--c2-green-deep) !important; } body.lgs-c2-guides .lgs-guide-foot h2, body.lgs-c2-guides .lgs-guide-foot__title { font-family: var(--c2-serif) !important; color: var(--c2-ink) !important; } body.lgs-c2-guides .lgs-guide-foot__grid a { background: var(--c2-card) !important; border: 1px solid var(--c2-hair) !important; border-radius: 2px !important; box-shadow: none !important; color: var(--c2-ink) !important; } body.lgs-c2-guides .lgs-guide-recruit { background: var(--c2-wash) !important; border: 0 !important; border-left: 3px solid var(--c2-green-deep) !important; border-radius: 0 !important; } body.lgs-c2-guides .lgs-guide-recruit__cta { background: var(--c2-green-deep) !important; border-radius: 2px !important; color: #fff !important; } body.lgs-c2-guides .lgs-guide-recruit__more { color: var(--c2-green-deep) !important; } /* 2.15.2: guide bodies as written - wrappers neutral, boxes in the paper's style */ body.lgs-c2-guides .lgs-gd-body .lgs-guide, body.lgs-c2-guides .lgs-gd-body .wrap, body.lgs-c2-guides .lgs-gd-body > article, body.lgs-c2-guides .lgs-gd-body > section { max-width: none !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; font: inherit !important; color: inherit !important; } body.lgs-c2-guides .lgs-gd-body p, body.lgs-c2-guides .lgs-gd-body li { margin: 0 0 1.05em !important; line-height: 1.65 !important; } body.lgs-c2-guides .lgs-gd-body li { margin-bottom: .45em !important; } body.lgs-c2-guides .lgs-gd-body ul, body.lgs-c2-guides .lgs-gd-body ol { margin: 0 0 1.2em !important; padding-left: 1.3em !important; line-height: 1.65 !important; } body.lgs-c2-guides .lgs-gd-body h4, body.lgs-c2-guides .lgs-gd-body h5 { font: 700 17px/1.4 var(--c2-sans) !important; color: var(--c2-ink) !important; margin: 1.3em 0 .35em !important; } body.lgs-c2-guides .lgs-gd-body strong { color: var(--c2-ink); } body.lgs-c2-guides .lgs-gd-body hr { border: 0 !important; border-top: 1px solid var(--c2-hair) !important; height: 0 !important; margin: 1.6em 0 !important; background: none !important; } body.lgs-c2-guides .lgs-gd-body hr:has(+ h2), body.lgs-c2-guides .lgs-gd-body hr:has(+ div > h2:first-child) { display: none !important; } /* the guide's own Category/Region/Topic lines and contents list repeat the page head */ body.lgs-c2-guides .lgs-gd-body .lgs-guide__meta, body.lgs-c2-guides .lgs-gd-body p.meta, body.lgs-c2-guides .lgs-gd-body p.lgs-meta, body.lgs-c2-guides .lgs-gd-body nav[aria-label="Table of contents"] { display: none !important; } body.lgs-c2-guides .lgs-gd-body .lead, body.lgs-c2-guides .lgs-gd-body .lead p, body.lgs-c2-guides .lgs-gd-body .lgs-guide__intro p, body.lgs-c2-guides .lgs-gd-body .lgs-excerpt { font-size: 20px !important; line-height: 1.55 !important; color: var(--c2-ink) !important; } body.lgs-c2-guides .lgs-gd-body .note, body.lgs-c2-guides .lgs-gd-body .lgs-note, body.lgs-c2-guides .lgs-gd-body .callout, body.lgs-c2-guides .lgs-gd-body .lgs-callout, body.lgs-c2-guides .lgs-gd-body .lgs-guide__callout, body.lgs-c2-guides .lgs-gd-body .checklist, body.lgs-c2-guides .lgs-gd-body .lgs-warning { background: var(--c2-wash) !important; border: 0 !important; border-left: 3px solid var(--c2-green-deep) !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 20px !important; margin: 0 0 1.5em !important; color: var(--c2-body) !important; } body.lgs-c2-guides .lgs-gd-body .lgs-warning { border-left-color: var(--c2-ink) !important; background: var(--c2-kraft) !important; } body.lgs-c2-guides .lgs-gd-body .note > :last-child, body.lgs-c2-guides .lgs-gd-body .lgs-note > :last-child, body.lgs-c2-guides .lgs-gd-body .callout > :last-child, body.lgs-c2-guides .lgs-gd-body .lgs-callout > :last-child, body.lgs-c2-guides .lgs-gd-body .lgs-guide__callout > :last-child, body.lgs-c2-guides .lgs-gd-body .checklist > :last-child, body.lgs-c2-guides .lgs-gd-body .lgs-warning > :last-child { margin-bottom: 0 !important; } body.lgs-c2-guides .lgs-gd-body .faq { border-top: 1px solid var(--c2-hair); padding-top: 4px; margin: 0 0 .4em; } body.lgs-c2-guides .lgs-gd-body .faq h3 { font-size: 19px !important; margin-top: .8em !important; } body.lgs-c2-guides .lgs-gd-body .author-box, body.lgs-c2-guides .lgs-gd-body .lgs-author-box { background: var(--c2-card) !important; border: 1px solid var(--c2-hair) !important; border-radius: 2px !important; box-shadow: none !important; padding: 18px 20px !important; margin: 2em 0 1.5em !important; } body.lgs-c2-guides .lgs-gd-body .author-box h2, body.lgs-c2-guides .lgs-gd-body .lgs-author-box h2 { border-top: 0 !important; padding-top: 0 !important; margin: 0 0 .4em !important; font-size: 21px !important; } body.lgs-c2-guides .lgs-gd-body .author-box p, body.lgs-c2-guides .lgs-gd-body .lgs-author-box p, body.lgs-c2-guides .lgs-gd-body .author-meta, body.lgs-c2-guides .lgs-gd-body .small { font-size: 15px !important; } body.lgs-c2-guides .lgs-gd-body table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } body.lgs-c2-guides .lgs-gd-body img { max-width: 100%; height: auto; } body.lgs-c2-guides .lgs-gd-body { overflow-wrap: break-word; } body.lgs-c2-guides .lgs-gd-body p:has(> script:only-child) { margin: 0 !important; } /* craft + topic pages */ body.lgs-c2-guides .lgs-resource-hub.lgs-resource-route-content { max-width: var(--c2-max) !important; margin: 0 auto !important; padding: 0 var(--c2-gutter) !important; background: none !important; } body.lgs-c2-guides .lgs-resource-crumbs { font: 13px/1.5 var(--c2-sans) !important; color: var(--c2-muted) !important; padding: 24px 0 0 !important; margin: 0 !important; } body.lgs-c2-guides .lgs-resource-crumbs a { color: var(--c2-green-deep) !important; } body.lgs-c2-guides .lgs-resource-hub .hero { display: block !important; background: none !important; min-height: 0 !important; height: auto !important; padding: 18px 0 22px !important; margin: 0 0 8px !important; text-align: left !important; border-bottom: 2px solid var(--c2-rule-strong); border-radius: 0 !important; } body.lgs-c2-guides .lgs-resource-hub .hero-overlay, body.lgs-c2-guides .lgs-resource-hub .cta-overlay, body.lgs-c2-guides .lgs-resource-hub .topic-overlay { display: none !important; } body.lgs-c2-guides .lgs-resource-hub .hero-content { max-width: 46em !important; width: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } body.lgs-c2-guides .lgs-resource-hub .hero h1 { font-family: var(--c2-serif) !important; font-weight: 600 !important; font-size: clamp(30px, 4vw, 42px) !important; line-height: 1.12 !important; color: var(--c2-ink) !important; text-align: left !important; margin: 0 0 10px !important; text-shadow: none !important; } body.lgs-c2-guides .lgs-resource-hub .hero p, body.lgs-c2-guides .lgs-resource-hub .hero .business-html-content { color: var(--c2-body) !important; font: 17px/1.55 var(--c2-sans) !important; text-align: left !important; text-shadow: none !important; margin-left: 0 !important; } /* owner 2026-10-03: no monetising until the section has traffic */ body.lgs-c2-guides .lgs-resource-hub .hero-content > span, body.lgs-c2-guides .lgs-resource-hub .hero-content > a.btn, body.lgs-c2-guides .lgs-resource-hub .card--ad { display: none !important; } body.lgs-c2-guides .lgs-resource-hub .triple-cards { background: none !important; padding: 0 !important; } body.lgs-c2-guides .lgs-resource-hub .topic-grid { display: flex !important; flex-wrap: wrap; gap: 8px !important; margin: 16px 0 8px !important; grid-template-columns: none !important; } body.lgs-c2-guides .lgs-resource-hub .topic-card { background: var(--c2-card) !important; border: 1px solid var(--c2-rule) !important; border-radius: 2px !important; min-height: 44px !important; height: auto !important; width: auto !important; padding: 0 14px !important; display: inline-flex !important; align-items: center; box-shadow: none !important; text-decoration: none !important; } body.lgs-c2-guides .lgs-resource-hub .topic-card:hover { border-color: var(--c2-green-deep) !important; } body.lgs-c2-guides .lgs-resource-hub .topic-title { position: static !important; color: var(--c2-green-deep) !important; font: 600 14px/1.2 var(--c2-sans) !important; text-transform: none !important; background: none !important; padding: 0 !important; white-space: normal !important; overflow: visible !important; text-shadow: none !important; } body.lgs-c2-guides .lgs-resource-hub .head h2 { font: 700 12px/1.4 var(--c2-sans) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-ink) !important; margin: 28px 0 0 !important; padding: 0 !important; text-align: left !important; } body.lgs-c2-guides .lgs-resource-hub .cards-wrap { display: block !important; columns: 2 340px; column-gap: 48px; } body.lgs-c2-guides .lgs-resource-hub .card { break-inside: avoid; background: none !important; border: 0 !important; border-top: 1px solid var(--c2-hair) !important; border-radius: 0 !important; box-shadow: none !important; padding: 18px 0 8px !important; margin: 0 !important; width: auto !important; } body.lgs-c2-guides .lgs-resource-hub .card-title, body.lgs-c2-guides .lgs-resource-hub .card-title a { background: none !important; color: var(--c2-ink) !important; font: 600 20px/1.25 var(--c2-serif) !important; text-transform: none !important; letter-spacing: 0 !important; padding: 0 !important; border-radius: 0 !important; margin: 0 0 6px !important; display: block; text-decoration: none; text-align: left !important; } body.lgs-c2-guides .lgs-resource-hub .card-title a:hover { color: var(--c2-green-deep) !important; text-decoration: underline; } body.lgs-c2-guides .lgs-resource-hub .card-list, body.lgs-c2-guides .lgs-resource-hub .card-list p { color: var(--c2-body) !important; font: 15px/1.55 var(--c2-sans) !important; margin: 0 0 4px !important; padding: 0 !important; } body.lgs-c2-guides .lgs-resource-hub .card > a:last-child { background: none !important; color: var(--c2-green-deep) !important; margin: 0 !important; padding: 10px 0 !important; border-radius: 0 !important; font: 600 14px/1.2 var(--c2-sans) !important; box-shadow: none !important; min-height: 44px; display: inline-flex !important; align-items: center; } body.lgs-c2-guides .lgs-resource-hub .cta-hero { background: var(--c2-wash) !important; min-height: 0 !important; height: auto !important; padding: 28px !important; margin: 36px 0 48px !important; text-align: left !important; border-left: 3px solid var(--c2-green-deep); border-radius: 0 !important; display: block !important; } body.lgs-c2-guides .lgs-resource-hub .cta-content { text-align: left !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } body.lgs-c2-guides .lgs-resource-hub .cta-hero h2 { font: 600 26px/1.2 var(--c2-serif) !important; color: var(--c2-ink) !important; text-align: left !important; margin: 0 0 14px !important; text-shadow: none !important; } body.lgs-c2-guides .lgs-resource-hub .cta-btn { background: var(--c2-green-deep) !important; color: #fff !important; border: 0 !important; border-radius: 2px !important; box-shadow: none !important; font: 600 15px/1 var(--c2-sans) !important; padding: 0 18px !important; min-height: 44px; display: inline-flex !important; align-items: center; } body.lgs-c2-guides .lgs-topic-archive h2 a, body.lgs-c2-guides .lgs-topic-archive h2 { text-transform: none !important; } body.lgs-c2-guides .lgs-topic-archive__head { padding: 14px 0 18px; border-bottom: 2px solid var(--c2-rule-strong); margin-bottom: 8px; } body.lgs-c2-guides .lgs-topic-archive__head h1 { font-family: var(--c2-serif) !important; font-weight: 600 !important; font-size: clamp(30px, 4vw, 42px) !important; line-height: 1.12 !important; color: var(--c2-ink) !important; margin: 0 0 8px !important; } body.lgs-c2-guides .lgs-topic-archive__count { font: 600 14px/1.4 var(--c2-sans) !important; color: var(--c2-green-deep) !important; } body.lgs-c2-guides .lgs-topic-archive__desc { font: 17px/1.55 var(--c2-sans) !important; color: var(--c2-body) !important; max-width: 46em; } /* hub page (/resource/): masthead in place of the photo hero */ body.lgs-c2-guides .elementor-11 > .e-con:first-child { background: none !important; min-height: 0 !important; padding: 36px 0 22px !important; border-bottom: 2px solid var(--c2-rule-strong); } body.lgs-c2-guides .elementor-11 > .e-con:first-child::before, body.lgs-c2-guides .elementor-11 > .e-con:first-child > .elementor-background-overlay, body.lgs-c2-guides .elementor-11 > .e-con:first-child .elementor-background-video-container { display: none !important; } body.lgs-c2-guides .elementor-11 > .e-con:first-child > .e-con-inner { align-items: flex-start !important; padding: 0 !important; max-width: none !important; } body.lgs-c2-guides .elementor-11 > .e-con:first-child h1 { font-family: var(--c2-serif) !important; font-weight: 600 !important; font-size: clamp(30px, 4vw, 44px) !important; line-height: 1.12 !important; color: var(--c2-ink) !important; text-align: left !important; text-shadow: none !important; } body.lgs-c2-guides .elementor-11 > .e-con:first-child .elementor-widget:not(.elementor-widget-heading), body.lgs-c2-guides .elementor-11 > .e-con:first-child .elementor-widget:not(.elementor-widget-heading) * { color: var(--c2-body) !important; font-family: var(--c2-sans) !important; font-style: normal !important; font-size: 17px !important; line-height: 1.55 !important; text-align: left !important; text-shadow: none !important; } body.lgs-c2-guides .elementor-11 > .e-con:first-child .elementor-widget { width: auto !important; max-width: 46em !important; margin: 0 !important; } body.lgs-c2-guides .elementor-11 > .e-con:nth-child(2) { background: none !important; padding-left: 0 !important; padding-right: 0 !important; } body.lgs-c2-guides .lgs-resource-hub.lgs-resource-filters { background: none !important; border: 0 !important; box-shadow: none !important; padding: 8px 0 0 !important; } body.lgs-c2-guides .lgs-resource-filters-form { background: var(--c2-card); border: 1px solid var(--c2-rule); border-radius: 2px; padding: 18px; } body.lgs-c2-guides .lgs-resource-field label { font: 600 14px/1.4 var(--c2-sans) !important; color: var(--c2-ink) !important; } body.lgs-c2-guides .lgs-resource-field select { min-height: 44px; border: 1px solid var(--c2-rule) !important; border-radius: 2px !important; background-color: #fff !important; font: 15px/1.3 var(--c2-sans) !important; color: var(--c2-ink) !important; } body.lgs-c2-guides .lgs-resource-submit { background: var(--c2-green-deep) !important; color: #fff !important; border: 0 !important; border-radius: 2px !important; min-height: 44px; padding: 0 20px !important; font: 600 15px/1 var(--c2-sans) !important; box-shadow: none !important; } body.lgs-c2-guides .lgs-resource-submit:hover { background: var(--c2-green) !important; } body.lgs-c2-guides .lgs-resource-browse h2, body.lgs-c2-guides .lgs-resource-hubs h2, body.lgs-c2-guides .lgs-featured h2, body.lgs-c2-guides .lgs-resource-vision h2 { font-family: var(--c2-serif) !important; font-weight: 600 !important; color: var(--c2-ink) !important; } body.lgs-c2-guides .lgs-resource-browse li a { background: none !important; color: var(--c2-green-deep) !important; border: 1px solid currentColor !important; border-radius: 2px !important; min-height: 40px; display: inline-flex !important; align-items: center; } body.lgs-c2-guides .lgs-resource-browse li a:hover { background: var(--c2-green-deep) !important; color: #fff !important; } body.lgs-c2-guides .lgs-resource-hubs a, body.lgs-c2-guides .lgs-resource-browse__more a { color: var(--c2-green-deep) !important; } body.lgs-c2-guides .lgs-resource-count { color: var(--c2-green-deep) !important; } body.lgs-c2-guides .lgs-featured__card a { background: var(--c2-card) !important; border: 1px solid var(--c2-hair) !important; border-radius: 2px !important; box-shadow: none !important; transform: none !important; } body.lgs-c2-guides .lgs-featured__card a:hover { border-color: var(--c2-green-deep) !important; } body.lgs-c2-guides .lgs-featured__tag { color: var(--c2-green-deep) !important; } body.lgs-c2-guides .lgs-featured__title { font-family: var(--c2-serif) !important; font-size: 18px; color: var(--c2-ink); } body.lgs-c2-guides .lgs-resource-vision { background: var(--c2-wash) !important; border-radius: 0 !important; border-left-color: var(--c2-green-deep) !important; } body.lgs-c2-guides .lgs-resource-vision h2 { color: var(--c2-ink) !important; } @media (max-width: 900px) { body.lgs-c2-guides .lgs-gd-layout { display: block; } body.lgs-c2-guides .lgs-gd-toc { position: static; margin: 0 0 24px; border-top: 1px solid var(--c2-rule); border-bottom: 1px solid var(--c2-rule); padding: 0; } body.lgs-c2-guides .lgs-gd-toc summary { display: flex; align-items: center; min-height: 44px; margin: 0; cursor: pointer; } body.lgs-c2-guides .lgs-gd-toc summary::after { content: "+"; margin-left: auto; font-size: 18px; font-weight: 400; } body.lgs-c2-guides .lgs-gd-toc[open] summary::after { content: "\2212"; } body.lgs-c2-guides .lgs-gd-toc ol { padding-bottom: 8px; } body.lgs-c2-guides .lgs-gd-body p, body.lgs-c2-guides .lgs-gd-body li { font-size: 17px; } body.lgs-c2-guides .lgs-gd-stand { font-size: 19px; } body.lgs-c2-guides .lgs-gd-body h2 { font-size: 23px !important; } body.lgs-c2-guides .lgs-resource-hub .cards-wrap { columns: 1; } } /* ------------------------------------------------------------------ */ /* 37. STORE-C2 (2.15.4): the business shop page (Dokan store, served at /uk/producer/{slug}/) in the paper's style. CSS only over Dokan's markup. */ body.dokan-store { background: var(--c2-paper); color: var(--c2-body); } body.dokan-store .woocommerce-breadcrumb { max-width: var(--c2-max); margin: 0 auto !important; padding: 22px var(--c2-gutter) 0 !important; font: 13px/1.5 var(--c2-sans) !important; color: var(--c2-muted) !important; } body.dokan-store .woocommerce-breadcrumb a { color: var(--c2-green-deep) !important; } body.dokan-store .dokan-store-wrap { max-width: var(--c2-max); margin: 0 auto 56px !important; padding: 0 var(--c2-gutter) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 48px; align-items: start; float: none !important; } body.dokan-store .dokan-store-wrap::before, body.dokan-store .dokan-store-wrap::after { display: none !important; } body.dokan-store #dokan-primary { grid-column: 1; grid-row: 1; width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; } body.dokan-store #dokan-secondary { grid-column: 2; grid-row: 1; width: auto !important; float: none !important; margin: 18px 0 0 !important; padding: 0 !important; } /* head: banner strip, then name block on paper */ body.dokan-store .dokan-profile-frame-wrapper { margin: 18px 0 0 !important; border: 0 !important; background: none !important; } body.dokan-store .profile-frame { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } body.dokan-store .profile-info-box { position: relative !important; background: none !important; min-height: 0 !important; } body.dokan-store .profile-info-box > img.profile-info-img { display: block; width: 100% !important; height: 260px !important; object-fit: cover; border-radius: 0 !important; } body.dokan-store .profile-info-summery-wrapper { position: static !important; background: none !important; padding: 0 !important; margin: 0 !important; height: auto !important; } body.dokan-store .profile-info-summery { display: flex !important; gap: 20px; align-items: flex-end; padding: 0 !important; background: none !important; position: static !important; } body.dokan-store .profile-info-head { margin: -48px 0 0 !important; flex: 0 0 auto; position: relative; z-index: 2; } body.dokan-store .profile-img img { width: 112px !important; height: 112px !important; object-fit: cover; border: 4px solid var(--c2-paper) !important; border-radius: 2px !important; box-shadow: none !important; display: block; } body.dokan-store .profile-info { padding: 14px 0 0 !important; min-width: 0; } body.dokan-store h1.store-name { font-family: var(--c2-serif) !important; font-weight: 600 !important; font-size: clamp(30px, 4vw, 44px) !important; line-height: 1.08 !important; color: var(--c2-ink) !important; text-shadow: none !important; margin: 0 0 8px !important; padding: 0 !important; } body.dokan-store ul.dokan-store-info { margin: 0 !important; padding: 0 !important; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; font: 15px/1.5 var(--c2-sans) !important; color: var(--c2-body) !important; } body.dokan-store ul.dokan-store-info li { color: var(--c2-body) !important; text-shadow: none !important; padding: 0 !important; margin: 0 !important; } body.dokan-store ul.dokan-store-info li i { color: var(--c2-green-deep) !important; margin-right: 6px; } body.dokan-store ul.dokan-store-info a { color: var(--c2-green-deep) !important; } body.dokan-store .store-social-wrapper { display: none; } /* actions + tabs */ body.dokan-store .dokan-store-tabs { margin: 20px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-bottom: 2px solid var(--c2-rule-strong) !important; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; } body.dokan-store .dokan-store-tabs ul { margin: 0 !important; padding: 0 !important; list-style: none; display: flex; gap: 8px; float: none !important; background: none !important; border: 0 !important; } body.dokan-store .dokan-store-tabs ul.dokan-modules-button { order: 2; padding-bottom: 10px !important; } body.dokan-store .dokan-store-tabs ul.dokan-modules-button li { float: none !important; margin: 0 !important; } body.dokan-store .dokan-store-tabs ul.dokan-list-inline { order: 1; gap: 0; } body.dokan-store .dokan-store-tabs ul.dokan-list-inline li { margin: 0 !important; padding: 0 !important; border: 0 !important; float: none !important; } body.dokan-store .dokan-store-tabs ul.dokan-list-inline li a { display: block; padding: 12px 18px 10px !important; font: 700 12px/1.4 var(--c2-sans) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-muted) !important; background: none !important; border: 0 !important; border-bottom: 3px solid transparent !important; margin-bottom: -2px; } body.dokan-store .dokan-store-tabs ul.dokan-list-inline li a:hover { color: var(--c2-ink) !important; } body.dokan-store .dokan-store-tabs ul.dokan-list-inline li.active a, body.dokan-store .dokan-store-tabs ul.dokan-list-inline li a[aria-current] { color: var(--c2-ink) !important; border-bottom-color: var(--c2-green-deep) !important; } body.dokan-store .dokan-modules-button .dokan-btn { background: none !important; color: var(--c2-green-deep) !important; border: 1px solid currentColor !important; border-radius: 2px !important; box-shadow: none !important; font: 600 13px/1 var(--c2-sans) !important; padding: 10px 12px !important; min-height: 40px; } body.dokan-store .dokan-modules-button .dokan-btn:hover { background: var(--c2-green-deep) !important; color: #fff !important; } /* how to get it, follow, reviews */ body.dokan-store .lgs-howget--store { margin: 24px 0 0 !important; } body.dokan-store .lgs-store-audience { margin: 28px 0 0; } body.dokan-store .lgs-store-audience h3 { font-family: var(--c2-serif) !important; font-weight: 600 !important; color: var(--c2-ink) !important; } /* products */ body.dokan-store .dokan-store-products-filter-area { margin: 32px 0 14px !important; padding: 14px 0 0 !important; border-top: 2px solid var(--c2-rule-strong); } body.dokan-store .dokan-store-products-ordeby { display: flex !important; flex-wrap: wrap; gap: 8px; align-items: center; } body.dokan-store .dokan-store-products-ordeby::before { content: "What they sell"; flex: 1 1 100%; font: 600 26px/1.2 var(--c2-serif); color: var(--c2-ink); margin: 0 0 8px; } body.dokan-store .dokan-store-products-filter-search, body.dokan-store .dokan-store-products-ordeby select { min-height: 44px; border: 1px solid var(--c2-rule) !important; border-radius: 2px !important; background: #fff !important; font: 15px/1.3 var(--c2-sans) !important; color: var(--c2-ink) !important; padding: 0 12px !important; width: auto !important; flex: 1 1 220px; margin: 0 !important; } body.dokan-store .dokan-store-products-ordeby select { flex: 0 1 240px; } body.dokan-store input.search-store-products { min-height: 44px; background: var(--c2-green-deep) !important; color: #fff !important; border: 0 !important; border-radius: 2px !important; padding: 0 18px !important; font: 600 14px/1 var(--c2-sans) !important; margin: 0 !important; } body.dokan-store .seller-items ul.products { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; margin: 8px 0 0 !important; padding: 0 !important; } body.dokan-store .seller-items ul.products::before, body.dokan-store .seller-items ul.products::after { display: none !important; } body.dokan-store .seller-items ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; background: none !important; border: 0 !important; } body.dokan-store .seller-items li.product img { width: 100% !important; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 0 10px !important; border-radius: 0 !important; } body.dokan-store .seller-items li.product .woocommerce-loop-product__title { font: 600 19px/1.25 var(--c2-serif) !important; color: var(--c2-ink) !important; padding: 0 !important; margin: 0 0 4px !important; } body.dokan-store .seller-items li.product .price { display: block; font: 600 15px/1.4 var(--c2-sans) !important; color: var(--c2-ink) !important; margin: 0 0 10px !important; } body.dokan-store .seller-items li.product .price .lgs-unit-price { font-weight: 400; color: var(--c2-muted); font-size: 13px; } body.dokan-store .seller-items li.product .star-rating { margin: 0 0 6px !important; color: var(--c2-green-deep) !important; font-size: 13px; } body.dokan-store .seller-items li.product a.button { display: inline-flex !important; align-items: center; min-height: 40px; padding: 0 14px !important; background: none !important; color: var(--c2-green-deep) !important; border: 1px solid currentColor !important; border-radius: 2px !important; font: 600 13px/1 var(--c2-sans) !important; text-transform: none !important; letter-spacing: 0 !important; } body.dokan-store .seller-items li.product a.button:hover { background: var(--c2-green-deep) !important; color: #fff !important; } /* side column */ body.dokan-store #dokan-secondary .widget { margin: 0 0 28px !important; padding: 12px 0 0 !important; border: 0 !important; border-top: 2px solid var(--c2-rule-strong) !important; background: none !important; box-shadow: none !important; } body.dokan-store #dokan-secondary .widget-title { font: 700 12px/1.4 var(--c2-sans) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--c2-ink) !important; margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; background: none !important; } body.dokan-store #dokan-secondary .widget a { color: var(--c2-green-deep) !important; } body.dokan-store #dokan-secondary ul { margin: 0 !important; padding: 0 !important; list-style: none; } body.dokan-store #dokan-store-location { height: 220px !important; border: 1px solid var(--c2-hair); } body.dokan-store .seller-form input[type=text], body.dokan-store .seller-form input[type=email], body.dokan-store .seller-form textarea { width: 100% !important; border: 1px solid var(--c2-rule) !important; border-radius: 2px !important; background: #fff !important; font: 15px/1.4 var(--c2-sans) !important; color: var(--c2-ink) !important; padding: 10px 12px !important; min-height: 44px; margin: 0 0 8px !important; } body.dokan-store .seller-form .dokan-privacy-policy-text, body.dokan-store .seller-form .dokan-privacy-policy-text p { font: 12px/1.5 var(--c2-sans) !important; color: var(--c2-muted) !important; } body.dokan-store .seller-form input[type=submit] { float: none !important; width: 100%; min-height: 44px; background: var(--c2-green-deep) !important; color: #fff !important; border: 0 !important; border-radius: 2px !important; font: 600 15px/1 var(--c2-sans) !important; margin-top: 4px; } body.dokan-store .paging-navigation { margin-top: 24px; } @media (max-width: 900px) { body.dokan-store .dokan-store-wrap { grid-template-columns: minmax(0, 1fr); } body.dokan-store #dokan-secondary { grid-column: 1; grid-row: 2; margin-top: 36px !important; } body.dokan-store .profile-info-box > img.profile-info-img { height: 170px !important; } body.dokan-store .profile-info-summery { flex-direction: column; align-items: flex-start; gap: 6px; } body.dokan-store .profile-img img { width: 84px !important; height: 84px !important; } body.dokan-store .seller-items ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } body.dokan-store .dokan-store-tabs ul.dokan-modules-button { order: 0; width: 100%; padding: 0 !important; } } body.dokan-store .profile-info-summery { margin: 0 !important; } body.dokan-store ul.dokan-store-info li i { display: inline-block !important; position: static !important; margin: 0 6px 0 0 !important; width: auto !important; } body.dokan-store .dokan-store-tabs ul.dokan-modules-button { margin-left: auto !important; } body.dokan-store #dokan-content.store-page-wrap { display: flex !important; flex-direction: column; } body.dokan-store #dokan-content.store-page-wrap > .lgs-store-audience { order: 10; margin-top: 40px; }