/* ========================================================================== MyCabin Functional Zoning — Liepaja — Page Pack CSS Scoped entirely under .pp-functional-zoning-liepaja (Page Pack Spec §5). Every selector below is nested under that root class — no bare element or utility selectors. Trimmed from the Claude Design export's shared styles.css: only the rules this one page's own markup actually uses. 01 Tokens (scoped custom properties, not :root) 02 Base resets (scoped) 03 Flow-layout margin neutralization (generated list — see note) 04 Layout helpers, type, eyebrow, content links 05 Buttons + tab pills 06 Hero, tags, trust strip 07 Quick-answer card 08 Section scaffolding + cards + concept tiles 09 TOC pills + stat strip 10 Permit decision tree 11 Zone cards + "check your zoning" box 12 Map 13 Permit matrix (grid → stacked cards on phones) 14 Process steps + soft call-out bars 15 District / comparison rows 16 Costs total 17 Model cards 18 "Why MyCabin" (bars + energy scale) 19 Prose, FAQ, related links, sources 20 Dark closing CTA 21 Scroll reveal (io-fade) 22 Desktop layer (min-width: 900px) + 640px / 1100px steps 23 Reduced motion ========================================================================== */ /* ========================================================================== 01 TOKENS — scoped to the root, never :root, so nothing leaks to the rest of the WordPress site (Page Pack Spec §5, layer 2). ========================================================================== */ .pp-functional-zoning-liepaja { --pp-ink: #27272C; --pp-bone: #FFFFFF; --pp-beige: #FBF6F3; --pp-wood: #EDCFB7; --pp-sun: #FFD797; --pp-olive: #6E5C3C; --pp-accent: #917EBC; --pp-accent-soft: #CDCBFF; --pp-tint: #E6E6FF; --pp-surface: var(--pp-beige); --pp-good: #4F7A44; --pp-good-soft: #E3ECD9; --pp-bad: #B0463F; --pp-bad-soft: #F6DEDE; --pp-stone: color-mix(in oklab, var(--pp-ink) 11%, var(--pp-bone)); --pp-ink-hair: color-mix(in oklab, var(--pp-ink) 7%, var(--pp-bone)); --pp-ink-line: color-mix(in oklab, var(--pp-ink) 13%, var(--pp-bone)); --pp-tint-line: color-mix(in oklab, var(--pp-accent) 18%, var(--pp-tint)); --pp-tint-line-strong: color-mix(in oklab, var(--pp-accent) 34%, var(--pp-tint)); --pp-ink-72: color-mix(in oklab, var(--pp-ink) 72%, transparent); --pp-ink-56: color-mix(in oklab, var(--pp-ink) 65%, transparent); --pp-ink-28: color-mix(in oklab, var(--pp-ink) 28%, transparent); --pp-bone-80: color-mix(in oklab, var(--pp-bone) 80%, transparent); --pp-bone-60: color-mix(in oklab, var(--pp-bone) 60%, transparent); --pp-bone-line: color-mix(in oklab, var(--pp-bone) 22%, transparent); --pp-maxw: 1280px; --pp-gutter: clamp(18px, 4vw, 40px); /* Header clearance. The site's fixed global header is supplied by the WordPress theme, not this Page Pack, so its real height can't be read here — this reproduces the source design's own --hdr-h token (clamp(58px, 7vw, 74px)) as a best-effort estimate (same assumption as the Blog / Privacy Policy / Warranty packs). Flagged in the handoff for staging verification. */ --pp-hdr-h: clamp(58px, 7vw, 74px); --pp-r-pill: 999px; --pp-r-card: 11px; --pp-r-md: 9px; --pp-ease: cubic-bezier(.22, 1, .36, 1); --pp-t-med: .25s; position: relative; background: var(--pp-bone); color: var(--pp-ink); font-family: "Poppins", "Helvetica Neue", Helvetica, sans-serif; font-size: 16px; font-weight: 400; line-height: normal; -webkit-font-smoothing: antialiased; text-wrap: pretty; overflow-x: clip; } /* WordPress core gives every group that has a background colour `padding: 1.25em 2.375em` (core block-library theme.css). The design's sections, cards and boxes set their own padding below (same specificity, later in the cascade, so they win); this only removes what they do not set. */ .pp-functional-zoning-liepaja .has-background { padding-left: 0; padding-right: 0; } /* ========================================================================== 02 BASE RESETS (scoped) ========================================================================== */ .pp-functional-zoning-liepaja, .pp-functional-zoning-liepaja *, .pp-functional-zoning-liepaja *::before, .pp-functional-zoning-liepaja *::after { box-sizing: border-box; } .pp-functional-zoning-liepaja h1, .pp-functional-zoning-liepaja h2, .pp-functional-zoning-liepaja h3, .pp-functional-zoning-liepaja h4, .pp-functional-zoning-liepaja p { margin: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; } .pp-functional-zoning-liepaja h1, .pp-functional-zoning-liepaja h2, .pp-functional-zoning-liepaja h3, .pp-functional-zoning-liepaja h4 { letter-spacing: normal; text-transform: none; } /* The site theme balances every heading (text-wrap: balance) and lets text break anywhere (overflow-wrap: break-word, hyphens: none); the design inherits `text-wrap: pretty` from the page, so line breaks differ without this. */ .pp-functional-zoning-liepaja :is(h1, h2, h3, h4, p, li, .wp-block-heading) { text-wrap: pretty; overflow-wrap: normal; hyphens: manual; } .pp-functional-zoning-liepaja a { color: var(--pp-ink); text-decoration: none; } .pp-functional-zoning-liepaja a:hover { color: var(--pp-accent); } .pp-functional-zoning-liepaja em { font-style: normal; } .pp-functional-zoning-liepaja img { max-width: 100%; display: block; } .pp-functional-zoning-liepaja figure { margin: 0; } .pp-functional-zoning-liepaja button { font: inherit; color: inherit; } .pp-functional-zoning-liepaja :focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 3px; border-radius: 4px; } /* ========================================================================== 03 FLOW-LAYOUT MARGIN NEUTRALIZATION -------------------------------------------------------------------------- Every container below is a plain core/group (or core/buttons) with no explicit `layout` attribute in content.html, so WordPress renders it with its default "Flow" layout and generates `margin-block-start: ` on every child after the first — sized from the ACTIVE THEME's spacing.blockGap, whether or not this pack asked for a gap. Each container below owns its own child spacing (grid / flex / explicit margins further down), so that generated margin is neutralized on exactly its own direct children — never a sitewide reset, and never the spacing INSIDE a card (each nested container is neutralized separately, and every wanted margin is re-declared below with !important at equal or higher specificity, later in the file). `!important` mirrors WordPress's own generated rule, which has no :where() wrapper. (Reference: docs/MYCABIN-GUTENBERG-REFERENCE-IMPLEMENTATION.md §5, docs/HOMEPAGE-WORDPRESS-FLOW-MARGIN-FIX-HANDOFF.md.) ========================================================================== */ .pp-functional-zoning-liepaja > *, .pp-functional-zoning-liepaja .pp-adv > *, .pp-functional-zoning-liepaja .pp-adv__headrow > *, .pp-functional-zoning-liepaja .pp-answer > *, .pp-functional-zoning-liepaja .pp-answer-sec > *, .pp-functional-zoning-liepaja .pp-answer__badge > *, .pp-functional-zoning-liepaja .pp-answer__btn > *, .pp-functional-zoning-liepaja .pp-answer__text > *, .pp-functional-zoning-liepaja .pp-bar > *, .pp-functional-zoning-liepaja .pp-bar__track > *, .pp-functional-zoning-liepaja .pp-bars > *, .pp-functional-zoning-liepaja .pp-card > *, .pp-functional-zoning-liepaja .pp-check > *, .pp-functional-zoning-liepaja .pp-check__btn > *, .pp-functional-zoning-liepaja .pp-check__txt > *, .pp-functional-zoning-liepaja .pp-cmp > *, .pp-functional-zoning-liepaja .pp-cmp--hl > *, .pp-functional-zoning-liepaja .pp-cmp__head > *, .pp-functional-zoning-liepaja .pp-concept > *, .pp-functional-zoning-liepaja .pp-concept__body > *, .pp-functional-zoning-liepaja .pp-concept__icon > *, .pp-functional-zoning-liepaja .pp-dark-cta > *, .pp-functional-zoning-liepaja .pp-dark-cta-section > *, .pp-functional-zoning-liepaja .pp-dark-cta__btns > *, .pp-functional-zoning-liepaja .pp-dark-cta__copy > *, .pp-functional-zoning-liepaja .pp-dist > *, .pp-functional-zoning-liepaja .pp-dist__head > *, .pp-functional-zoning-liepaja .pp-ebar > *, .pp-functional-zoning-liepaja .pp-ebar--a > *, .pp-functional-zoning-liepaja .pp-ebar--ap > *, .pp-functional-zoning-liepaja .pp-ebar--b > *, .pp-functional-zoning-liepaja .pp-ebar--c > *, .pp-functional-zoning-liepaja .pp-ebar--d > *, .pp-functional-zoning-liepaja .pp-ebar--e > *, .pp-functional-zoning-liepaja .pp-ebar--f > *, .pp-functional-zoning-liepaja .pp-energy > *, .pp-functional-zoning-liepaja .pp-energy__bars > *, .pp-functional-zoning-liepaja .pp-faq > *, .pp-functional-zoning-liepaja .pp-faq-list > *, .pp-functional-zoning-liepaja .pp-faq-section > *, .pp-functional-zoning-liepaja .pp-grid > *, .pp-functional-zoning-liepaja .pp-grid--2 > *, .pp-functional-zoning-liepaja .pp-grid--3 > *, .pp-functional-zoning-liepaja .pp-grid--models > *, .pp-functional-zoning-liepaja .pp-grid--zones > *, .pp-functional-zoning-liepaja .pp-hero > *, .pp-functional-zoning-liepaja .pp-hero__text > *, .pp-functional-zoning-liepaja .pp-io-fade > *, .pp-functional-zoning-liepaja .pp-is-open > *, .pp-functional-zoning-liepaja .pp-map > *, .pp-functional-zoning-liepaja .pp-map-item > *, .pp-functional-zoning-liepaja .pp-map-item--bad > *, .pp-functional-zoning-liepaja .pp-map-item--good > *, .pp-functional-zoning-liepaja .pp-map-item--warn > *, .pp-functional-zoning-liepaja .pp-map__cta > *, .pp-functional-zoning-liepaja .pp-map__frame > *, .pp-functional-zoning-liepaja .pp-map__head > *, .pp-functional-zoning-liepaja .pp-map__legend > *, .pp-functional-zoning-liepaja .pp-map__list > *, .pp-functional-zoning-liepaja .pp-map__side > *, .pp-functional-zoning-liepaja .pp-matrix > *, .pp-functional-zoning-liepaja .pp-matrix-wrap > *, .pp-functional-zoning-liepaja .pp-mc > *, .pp-functional-zoning-liepaja .pp-mc--first > *, .pp-functional-zoning-liepaja .pp-model > *, .pp-functional-zoning-liepaja .pp-model__body > *, .pp-functional-zoning-liepaja .pp-model__foot > *, .pp-functional-zoning-liepaja .pp-model__media > *, .pp-functional-zoning-liepaja .pp-mrow > *, .pp-functional-zoning-liepaja .pp-mrow--head > *, .pp-functional-zoning-liepaja .pp-outcome > *, .pp-functional-zoning-liepaja .pp-outcome--aux-large > *, .pp-functional-zoning-liepaja .pp-outcome--aux-small-dzs > *, .pp-functional-zoning-liepaja .pp-outcome--aux-small-other > *, .pp-functional-zoning-liepaja .pp-outcome--aux-small-unknown > *, .pp-functional-zoning-liepaja .pp-outcome--dwelling > *, .pp-functional-zoning-liepaja .pp-outskirts__btn > *, .pp-functional-zoning-liepaja .pp-prose > *, .pp-functional-zoning-liepaja .pp-related > *, .pp-functional-zoning-liepaja .pp-related__body > *, .pp-functional-zoning-liepaja .pp-row > *, .pp-functional-zoning-liepaja .pp-rows > *, .pp-functional-zoning-liepaja .pp-sec > *, .pp-functional-zoning-liepaja .pp-sec--alt > *, .pp-functional-zoning-liepaja .pp-sec--tight > *, .pp-functional-zoning-liepaja .pp-soft > *, .pp-functional-zoning-liepaja .pp-soft__btn > *, .pp-functional-zoning-liepaja .pp-soft__txt > *, .pp-functional-zoning-liepaja .pp-sources > *, .pp-functional-zoning-liepaja .pp-stat > *, .pp-functional-zoning-liepaja .pp-stats > *, .pp-functional-zoning-liepaja .pp-step > *, .pp-functional-zoning-liepaja .pp-step__body > *, .pp-functional-zoning-liepaja .pp-step__head > *, .pp-functional-zoning-liepaja .pp-steps > *, .pp-functional-zoning-liepaja .pp-tags > *, .pp-functional-zoning-liepaja .pp-toc > *, .pp-functional-zoning-liepaja .pp-total > *, .pp-functional-zoning-liepaja .pp-total__txt > *, .pp-functional-zoning-liepaja .pp-tree > *, .pp-functional-zoning-liepaja .pp-tree__cta > *, .pp-functional-zoning-liepaja .pp-tree__m > *, .pp-functional-zoning-liepaja .pp-tree__meta > *, .pp-functional-zoning-liepaja .pp-tree__opts > *, .pp-functional-zoning-liepaja .pp-tree__reset > *, .pp-functional-zoning-liepaja .pp-tree__result > *, .pp-functional-zoning-liepaja .pp-tree__step > *, .pp-functional-zoning-liepaja .pp-tree__step--q1 > *, .pp-functional-zoning-liepaja .pp-tree__step--q2 > *, .pp-functional-zoning-liepaja .pp-tree__step--q3 > *, .pp-functional-zoning-liepaja .pp-trust > *, .pp-functional-zoning-liepaja .pp-trust__item > *, .pp-functional-zoning-liepaja .pp-trust__lbl > *, .pp-functional-zoning-liepaja .pp-wrap > *, .pp-functional-zoning-liepaja .pp-zone > *, .pp-functional-zoning-liepaja .pp-zone__head > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* ========================================================================== 04 LAYOUT HELPERS, TYPE, EYEBROW, CONTENT LINKS ========================================================================== */ .pp-functional-zoning-liepaja .pp-wrap { max-width: var(--pp-maxw); margin-inline: auto; padding-inline: var(--pp-gutter); } .pp-functional-zoning-liepaja .pp-eyebrow { font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--pp-ink-56); } .pp-functional-zoning-liepaja .pp-eyebrow--soft { color: var(--pp-accent-soft); } .pp-functional-zoning-liepaja .pp-title { margin-top: 10px !important; max-width: 26ch; font-size: clamp(26px, 4.6vw, 40px); line-height: 1.08; letter-spacing: -.022em; font-weight: 500; } .pp-functional-zoning-liepaja .pp-title--faq { max-width: 28ch; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.06; } .pp-functional-zoning-liepaja .pp-title em, .pp-functional-zoning-liepaja .pp-h1 em { color: var(--pp-accent); } .pp-functional-zoning-liepaja .pp-sub { margin-top: 14px !important; max-width: 64ch; font-size: 15.5px; line-height: 1.65; font-weight: 300; color: var(--pp-ink-72); } .pp-functional-zoning-liepaja .pp-sub strong, .pp-functional-zoning-liepaja .pp-card__p strong { font-weight: 500; color: var(--pp-ink); } .pp-functional-zoning-liepaja .pp-h3 { margin-top: 8px !important; font-size: clamp(20px, 2.6vw, 26px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; } .pp-functional-zoning-liepaja .pp-mt { margin-top: clamp(32px, 5vw, 52px) !important; } /* Links inside running copy — the source's .zc-a */ .pp-functional-zoning-liepaja :is(.pp-lead, .pp-check__p, .pp-note, .pp-step__p, .pp-sources__p, .pp-tree__rdesc, .pp-after) a { color: var(--pp-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--pp-ink-28); text-underline-offset: 3px; transition: color var(--pp-t-med), text-decoration-color var(--pp-t-med); } .pp-functional-zoning-liepaja :is(.pp-lead, .pp-check__p, .pp-note, .pp-step__p, .pp-sources__p, .pp-tree__rdesc, .pp-after) a:hover { color: var(--pp-accent); text-decoration-color: currentColor; } /* ========================================================================== 05 BUTTONS + TAB PILLS ========================================================================== */ .pp-functional-zoning-liepaja .wp-block-button .wp-block-button__link.wp-element-button { display: inline-flex; align-items: center; justify-content: center; text-align: start; gap: 10px; height: 40px; padding: 0 21px; border: 0; border-radius: var(--pp-r-pill); font-family: inherit; font-size: 15px; font-weight: 500; line-height: normal; letter-spacing: normal; text-transform: none; white-space: nowrap; cursor: pointer; transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med); } .pp-functional-zoning-liepaja .pp-btn--48 .wp-block-button__link.wp-element-button { height: 38px; padding: 0 19px; } /* Native ink / light colours are inline (editable in the sidebar); the hover states need !important to beat that inline style. */ .pp-functional-zoning-liepaja .pp-btn--ink .wp-block-button__link.wp-element-button:hover { background: var(--pp-accent) !important; color: var(--pp-bone) !important; } .pp-functional-zoning-liepaja .pp-btn--light .wp-block-button__link.wp-element-button:hover { background: var(--pp-accent-soft) !important; color: var(--pp-ink) !important; } .pp-functional-zoning-liepaja .pp-btn--outline .wp-block-button__link.wp-element-button { background: transparent; color: var(--pp-ink); border: 1px solid var(--pp-ink); } .pp-functional-zoning-liepaja .pp-btn--outline .wp-block-button__link.wp-element-button:hover { background: var(--pp-surface); color: var(--pp-ink); } .pp-functional-zoning-liepaja .pp-btn--ghost .wp-block-button__link.wp-element-button { background: color-mix(in oklab, var(--pp-ink) 30%, transparent); color: var(--pp-bone); border: 1px solid var(--pp-bone-60); } .pp-functional-zoning-liepaja .pp-btn--ghost .wp-block-button__link.wp-element-button:hover { background: color-mix(in oklab, var(--pp-bone) 14%, transparent); border-color: var(--pp-bone); color: var(--pp-bone); } /* Long labels wrap on the full-width action buttons (source: .zc-official__btns .btn …) */ .pp-functional-zoning-liepaja :is(.pp-check__btn, .pp-soft__btn, .pp-map__cta) .wp-block-button__link.wp-element-button { white-space: normal; height: auto; min-height: 38px; padding-block: 10px; text-align: center; line-height: 1.3; max-width: 100%; } .pp-functional-zoning-liepaja .pp-tree__reset .wp-block-button__link.wp-element-button { text-align: center; } /* Tab pill (TOC) */ .pp-functional-zoning-liepaja .pp-tab .wp-block-button__link.wp-element-button { height: 30px; padding: 0 14px; border: 1px solid var(--pp-ink-line); background: var(--pp-bone); color: var(--pp-ink); font-size: 14px; } .pp-functional-zoning-liepaja .pp-tab .wp-block-button__link.wp-element-button:hover { background: var(--pp-tint); border-color: var(--pp-accent-soft); color: var(--pp-ink); } /* Button rows: each component below sets its own direction/gap */ .pp-functional-zoning-liepaja .wp-block-buttons { margin: 0; } /* ========================================================================== 06 HERO, TAGS, TRUST STRIP ========================================================================== */ .pp-functional-zoning-liepaja .pp-hero { padding: calc(var(--pp-hdr-h) + clamp(28px, 6vw, 48px)) 0 clamp(28px, 4vw, 44px); } .pp-functional-zoning-liepaja .pp-hero__text { max-width: 760px; } .pp-functional-zoning-liepaja .pp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--pp-ink-56); margin-bottom: 18px !important; } .pp-functional-zoning-liepaja .pp-crumbs a { color: var(--pp-ink); } .pp-functional-zoning-liepaja .pp-crumbs a::after { content: "\203A"; margin-left: 8px; color: var(--pp-ink-56); } .pp-functional-zoning-liepaja .pp-crumbs a:hover { color: var(--pp-accent); } .pp-functional-zoning-liepaja .pp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px !important; } .pp-functional-zoning-liepaja .pp-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--pp-r-pill); background: var(--pp-ink); color: var(--pp-bone); font-size: 12px; letter-spacing: .02em; max-width: 100%; } .pp-functional-zoning-liepaja .pp-tag--soft { background: var(--pp-bone); color: var(--pp-ink-72); border: 1px solid var(--pp-ink-line); } .pp-functional-zoning-liepaja .pp-tag--accent { background: var(--pp-tint); color: var(--pp-ink); } .pp-functional-zoning-liepaja .pp-h1 { margin-top: 10px !important; max-width: 24ch; font-size: clamp(34px, 8.6vw, 46px); line-height: 1.06; letter-spacing: -.026em; font-weight: 500; } .pp-functional-zoning-liepaja .pp-lead { margin-top: 16px !important; font-size: clamp(16px, 2vw, 20px); line-height: 1.55; color: var(--pp-ink-72); font-weight: 300; } .pp-functional-zoning-liepaja .pp-trust { margin-top: clamp(24px, 3.5vw, 36px) !important; display: grid; grid-template-columns: 1fr; gap: 16px 24px; padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--pp-ink-line); } .pp-functional-zoning-liepaja .pp-trust__item { display: flex; align-items: center; gap: 14px; } .pp-functional-zoning-liepaja .pp-trust__num { font-size: clamp(30px, 4vw, 40px); font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--pp-ink); min-width: 2.4ch; } .pp-functional-zoning-liepaja .pp-trust__lbl { font-size: 13px; line-height: 1.4; color: var(--pp-ink-72); font-weight: 300; } .pp-functional-zoning-liepaja .pp-trust__t { font-size: 14px; font-weight: 500; color: var(--pp-ink); } .pp-functional-zoning-liepaja .pp-trust__s { font-size: 13px; line-height: 1.4; font-weight: 300; color: var(--pp-ink-72); } /* ========================================================================== 07 QUICK-ANSWER CARD (dark) ========================================================================== */ .pp-functional-zoning-liepaja .pp-answer-sec { padding: clamp(24px, 4vw, 40px) 0 0; } .pp-functional-zoning-liepaja .pp-answer { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; padding: clamp(22px, 3vw, 32px); color: var(--pp-bone); border-radius: var(--pp-r-card); } .pp-functional-zoning-liepaja .pp-answer__badge { display: inline-flex; flex-direction: column; gap: 2px; justify-self: start; padding: 10px 16px; border: 1px solid var(--pp-bone-line); border-radius: var(--pp-r-md); } .pp-functional-zoning-liepaja .pp-answer__bl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-accent-soft); } .pp-functional-zoning-liepaja .pp-answer__bv { font-size: 18px; letter-spacing: -.01em; font-weight: 500; color: var(--pp-bone); } .pp-functional-zoning-liepaja .pp-answer__eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-bone-60); margin-bottom: 8px !important; } .pp-functional-zoning-liepaja .pp-answer__h { font-size: clamp(15.5px, 1.9vw, 18px); line-height: 1.55; font-weight: 300; color: var(--pp-bone-80); } .pp-functional-zoning-liepaja .pp-answer__h strong { font-weight: 500; color: var(--pp-bone); } .pp-functional-zoning-liepaja .pp-answer__h em { color: var(--pp-accent-soft); font-weight: 500; } .pp-functional-zoning-liepaja .pp-answer__btn { justify-self: start; } /* ========================================================================== 08 SECTION SCAFFOLDING + CARDS + CONCEPT TILES Section background colours and vertical padding (Section — Compact preset) are native block attributes; only the scroll offset lives here. ========================================================================== */ /* The source stacks html's scroll-padding-top (hdr + 12px) on each target's own scroll-margin-top (hdr + 8px); the sum is kept so anchors land where the design lands them. */ .pp-functional-zoning-liepaja .pp-sec, .pp-functional-zoning-liepaja .pp-faq-section { scroll-margin-top: calc(var(--pp-hdr-h) * 2 + 20px); } .pp-functional-zoning-liepaja .pp-sec--tight { padding-block: clamp(32px, 5vw, 56px); } .pp-functional-zoning-liepaja [id] { scroll-margin-top: calc(var(--pp-hdr-h) * 2 + 20px); } .pp-functional-zoning-liepaja #check-zoning { scroll-margin-top: calc(var(--pp-hdr-h) * 2 + 28px); } .pp-functional-zoning-liepaja .pp-grid { margin-top: clamp(24px, 4vw, 40px) !important; display: grid; gap: 14px; grid-template-columns: 1fr; } .pp-functional-zoning-liepaja .pp-grid > * { min-width: 0; } .pp-functional-zoning-liepaja .pp-card { background: var(--pp-bone); border: 1px solid var(--pp-stone); border-radius: var(--pp-r-card); padding: 20px; } .pp-functional-zoning-liepaja .pp-card__p { margin-top: 10px !important; font-size: 14.5px; line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); } .pp-functional-zoning-liepaja .pp-card__eyebrow { margin: 14px 0 6px !important; font-size: 11px; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; color: var(--pp-accent); font-weight: 500; } .pp-functional-zoning-liepaja .pp-num { padding-bottom: 2px; font-size: 28px; font-weight: 300; letter-spacing: -.03em; color: var(--pp-accent-soft); line-height: 1; } .pp-functional-zoning-liepaja .pp-concept { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--pp-surface); border-radius: var(--pp-r-card); } .pp-functional-zoning-liepaja .pp-sec--alt .pp-concept { background: var(--pp-bone); } .pp-functional-zoning-liepaja .pp-concept__icon { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--pp-tint); border-radius: var(--pp-r-md); color: var(--pp-ink); } .pp-functional-zoning-liepaja .pp-concept__icon svg { display: block; } .pp-functional-zoning-liepaja .pp-concept__body { min-width: 0; } .pp-functional-zoning-liepaja .pp-concept__h { font-size: 16px; font-weight: 500; letter-spacing: -.01em; } .pp-functional-zoning-liepaja .pp-concept__p { margin-top: 6px !important; font-size: 14px; line-height: 1.55; font-weight: 300; color: var(--pp-ink-72); } /* ========================================================================== 09 TOC PILLS + STAT STRIP ========================================================================== */ .pp-functional-zoning-liepaja .pp-toc { margin-top: 14px !important; display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; margin-inline: calc(var(--pp-gutter) * -1) !important; padding-inline: var(--pp-gutter); } .pp-functional-zoning-liepaja .pp-toc::-webkit-scrollbar { display: none; } .pp-functional-zoning-liepaja .pp-toc > .wp-block-button { flex: 0 0 auto; } .pp-functional-zoning-liepaja .pp-stats { margin-top: clamp(24px, 4vw, 40px) !important; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--pp-ink-line); border-bottom: 1px solid var(--pp-ink-line); } .pp-functional-zoning-liepaja .pp-stat { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--pp-ink-line); } .pp-functional-zoning-liepaja .pp-stat:nth-last-child(-n+2) { border-bottom: 0; } .pp-functional-zoning-liepaja .pp-stat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--pp-ink-line); } .pp-functional-zoning-liepaja .pp-stat__lbl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-ink-56); } .pp-functional-zoning-liepaja .pp-stat__val { margin-top: 8px !important; font-size: clamp(26px, 3.6vw, 38px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; } .pp-functional-zoning-liepaja .pp-stat__delta { margin-top: 6px !important; font-size: 13px; font-weight: 500; color: var(--pp-good); } .pp-functional-zoning-liepaja .pp-stat__note { margin-top: 8px !important; font-size: 13px; line-height: 1.55; font-weight: 300; color: var(--pp-ink-72); } /* ========================================================================== 10 PERMIT DECISION TREE (frontend.js drives the steps / outcomes) Without JS every step and outcome simply stays visible; the .pp-js class (added by frontend.js) is what switches on the one-at-a-time behaviour. ========================================================================== */ .pp-functional-zoning-liepaja .pp-tree { margin-top: clamp(24px, 4vw, 40px) !important; max-width: 860px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--pp-stone); border-radius: var(--pp-r-card); } .pp-functional-zoning-liepaja .pp-tree__step { margin-bottom: 26px !important; } .pp-functional-zoning-liepaja .pp-tree__num { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--pp-accent); font-weight: 500; } .pp-functional-zoning-liepaja .pp-tree__q { margin-top: 8px !important; font-size: clamp(18px, 2.2vw, 22px); font-weight: 500; letter-spacing: -.015em; line-height: 1.25; } .pp-functional-zoning-liepaja .pp-tree__opts { margin-top: 14px !important; display: flex; flex-wrap: wrap; gap: 8px; } .pp-functional-zoning-liepaja .pp-opt .wp-block-button__link.wp-element-button { height: auto; padding: 11px 18px; white-space: normal; border: 1px solid var(--pp-ink-line); background: var(--pp-bone); color: var(--pp-ink); font-size: 14.5px; font-weight: 400; line-height: 1.3; text-align: left; } .pp-functional-zoning-liepaja .pp-opt .wp-block-button__link.wp-element-button:hover { background: var(--pp-tint); border-color: var(--pp-accent-soft); color: var(--pp-ink); } .pp-functional-zoning-liepaja .pp-opt.pp-is-selected .wp-block-button__link.wp-element-button { background: var(--pp-ink); border-color: var(--pp-ink); color: var(--pp-bone); } .pp-functional-zoning-liepaja .pp-tree__result { padding: clamp(18px, 3vw, 26px); background: var(--pp-tint); border: 1px solid var(--pp-tint-line-strong); border-radius: var(--pp-r-card); margin-bottom: 18px !important; } .pp-functional-zoning-liepaja .pp-tree__rlabel { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--pp-ink-72); font-weight: 500; } .pp-functional-zoning-liepaja .pp-pill-inline { display: flex; width: fit-content; align-items: center; height: 26px; padding: 0 13px; margin: 8px 0 12px !important; border-radius: var(--pp-r-pill); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .pp-functional-zoning-liepaja .pp-pill-inline--p { background: var(--pp-good-soft); color: var(--pp-good); } .pp-functional-zoning-liepaja .pp-pill-inline--b { background: var(--pp-ink); color: var(--pp-bone); } .pp-functional-zoning-liepaja .pp-pill-inline--c { background: var(--pp-bone); color: var(--pp-ink); border: 1px solid var(--pp-tint-line-strong); } .pp-functional-zoning-liepaja .pp-tree__rh { font-size: clamp(22px, 3vw, 30px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; } .pp-functional-zoning-liepaja .pp-tree__rdesc { margin-top: 12px !important; max-width: 62ch; font-size: 15px; line-height: 1.65; font-weight: 300; color: var(--pp-ink-72); } .pp-functional-zoning-liepaja .pp-tree__meta { margin-top: 18px !important; padding-top: 16px; border-top: 1px solid var(--pp-tint-line-strong); display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .pp-functional-zoning-liepaja .pp-tree__m { display: flex; flex-direction: column; gap: 3px; } .pp-functional-zoning-liepaja .pp-tree__ml { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pp-ink-56); } .pp-functional-zoning-liepaja .pp-tree__mv { font-size: 17px; font-weight: 500; letter-spacing: -.01em; } .pp-functional-zoning-liepaja .pp-tree__cta { margin-top: 18px !important; } /* JS-enhanced behaviour */ .pp-functional-zoning-liepaja.pp-js .pp-tree__step--q2:not(.pp-is-shown), .pp-functional-zoning-liepaja.pp-js .pp-tree__step--q3:not(.pp-is-shown), .pp-functional-zoning-liepaja.pp-js .pp-tree__result:not(.pp-is-shown), .pp-functional-zoning-liepaja.pp-js .pp-tree__reset:not(.pp-is-shown), .pp-functional-zoning-liepaja.pp-js .pp-outcome:not(.pp-is-active) { display: none; } /* ========================================================================== 11 ZONE CARDS + "CHECK YOUR ZONING" BOX ========================================================================== */ .pp-functional-zoning-liepaja .pp-zone { display: flex; flex-direction: column; } .pp-functional-zoning-liepaja .pp-zone__head { display: flex; align-items: center; gap: 12px; } .pp-functional-zoning-liepaja .pp-zbadge { flex: 0 0 auto; min-width: 46px; height: 40px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pp-r-md); background: var(--pp-tint); font-size: 15px; font-weight: 500; letter-spacing: .01em; } .pp-functional-zoning-liepaja .pp-zone__h { font-size: 16px; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; } .pp-functional-zoning-liepaja .pp-zone > .pp-card__p { flex: 1; } .pp-functional-zoning-liepaja .pp-status { margin-top: 16px !important; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; min-height: 27px; padding: 3px 12px; max-width: 100%; border-radius: var(--pp-r-pill); font-size: 12.5px; font-weight: 500; } .pp-functional-zoning-liepaja .pp-status::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pp-functional-zoning-liepaja .pp-status--good { background: var(--pp-good-soft); color: var(--pp-good); } .pp-functional-zoning-liepaja .pp-status--warn { background: color-mix(in oklab, var(--pp-sun) 40%, var(--pp-bone)); color: var(--pp-olive); } .pp-functional-zoning-liepaja .pp-status--bad { background: var(--pp-bad-soft); color: var(--pp-bad); } .pp-functional-zoning-liepaja .pp-check { margin-top: clamp(20px, 3vw, 32px) !important; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(20px, 3vw, 28px); background: var(--pp-bone); border: 1px solid var(--pp-stone); border-radius: var(--pp-r-card); } .pp-functional-zoning-liepaja .pp-check__h { font-size: clamp(18px, 2vw, 21px); font-weight: 500; letter-spacing: -.015em; } .pp-functional-zoning-liepaja .pp-check__p { margin-top: 8px !important; max-width: 64ch; font-size: 14.5px; line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); } /* ========================================================================== 12 MAP — the five native list rows are the data; frontend.js builds the Leaflet map from them and turns the rows into pin-linked buttons. ========================================================================== */ .pp-functional-zoning-liepaja .pp-map { margin-top: clamp(24px, 4vw, 40px) !important; } .pp-functional-zoning-liepaja .pp-map__frame { display: flex; flex-direction: column; position: relative; z-index: 0; isolation: isolate; border: 1px solid var(--pp-stone); border-radius: var(--pp-r-card); overflow: hidden; background: var(--pp-bone); } .pp-functional-zoning-liepaja .pp-map__canvas { min-height: 340px; background: var(--pp-surface); } .pp-functional-zoning-liepaja .pp-map__side { display: flex; flex-direction: column; max-height: 320px; border-top: 1px solid var(--pp-stone); } .pp-functional-zoning-liepaja .pp-map__head { padding: 16px 16px 10px; } .pp-functional-zoning-liepaja .pp-map__h { font-size: 17px; font-weight: 500; letter-spacing: -.01em; } .pp-functional-zoning-liepaja .pp-map__hp { margin-top: 6px !important; font-size: 13px; line-height: 1.5; font-weight: 300; color: var(--pp-ink-72); } .pp-functional-zoning-liepaja .pp-map__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px; border-block: 1px solid var(--pp-stone); font-size: 12px; color: var(--pp-ink-72); } .pp-functional-zoning-liepaja .pp-map__lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pp-ink-72); } .pp-functional-zoning-liepaja .pp-map__lg::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; } .pp-functional-zoning-liepaja .pp-map__lg--good::before { background: var(--pp-good); } .pp-functional-zoning-liepaja .pp-map__lg--olive::before { background: var(--pp-olive); } .pp-functional-zoning-liepaja .pp-map__lg--bad::before { background: var(--pp-bad); } .pp-functional-zoning-liepaja .pp-map__list { padding: 6px; overflow-y: auto; flex: 1; counter-reset: pp-map-n; } .pp-functional-zoning-liepaja .pp-map-item { position: relative; counter-increment: pp-map-n; margin: 0 0 2px !important; padding: 8px 10px 8px 42px; border-radius: var(--pp-r-md); text-align: left; } .pp-functional-zoning-liepaja .pp-map-item::before { content: counter(pp-map-n); position: absolute; left: 10px; top: 9px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 500; } .pp-functional-zoning-liepaja .pp-map-item--good::before { background: var(--pp-good); } .pp-functional-zoning-liepaja .pp-map-item--warn::before { background: var(--pp-olive); } .pp-functional-zoning-liepaja .pp-map-item--bad::before { background: var(--pp-bad); } .pp-functional-zoning-liepaja .pp-map-item__nm { font-size: 14px; font-weight: 500; line-height: 1.3; } .pp-functional-zoning-liepaja .pp-map-item__dsc { margin-top: 2px !important; font-size: 12.5px; line-height: 1.45; font-weight: 300; color: var(--pp-ink-72); } /* data rows (status label for the pin popup, optional coordinates) — never shown on the frontend */ .pp-functional-zoning-liepaja .pp-map-item__status, .pp-functional-zoning-liepaja .pp-map-item__coords { display: none; font-size: 11.5px; line-height: 1.4; color: var(--pp-ink-56); } .pp-functional-zoning-liepaja.pp-js .pp-map-item { cursor: pointer; } .pp-functional-zoning-liepaja.pp-js .pp-map-item:hover { background: var(--pp-surface); } .pp-functional-zoning-liepaja.pp-js .pp-map-item:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; } .pp-functional-zoning-liepaja.pp-js .pp-map-item.pp-is-on { background: var(--pp-tint); } .pp-functional-zoning-liepaja .pp-map__note { margin-top: 12px !important; font-size: 12.5px; line-height: 1.55; color: var(--pp-ink-56); font-weight: 300; } .pp-functional-zoning-liepaja .pp-map__cta { margin-top: 16px !important; } /* Leaflet pins + popups (inside the map canvas) */ .pp-functional-zoning-liepaja .pp-pin { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font: 500 11px/1 "Poppins", sans-serif; border: 2px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .3); } .pp-functional-zoning-liepaja .pp-pin.pp-is-on { transform: scale(1.25); } .pp-functional-zoning-liepaja .pp-pinwrap { background: none; border: 0; } .pp-functional-zoning-liepaja .leaflet-container { font-family: "Poppins", sans-serif; font-size: 13px; } .pp-functional-zoning-liepaja .leaflet-popup-content { margin: 12px 14px; line-height: 1.5; } .pp-functional-zoning-liepaja .pp-pop-n { display: block; margin-bottom: 4px; font-weight: 500; font-size: 14px; color: var(--pp-ink); } .pp-functional-zoning-liepaja .pp-pop-s { display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: var(--pp-r-pill); font-size: 12px; font-weight: 500; } /* ========================================================================== 13 PERMIT MATRIX — a shared 7-track grid on desktop (rows use display: contents so columns auto-size together like the source's ); stacked cards on phones. Column labels on the stacked cards come from the header row (frontend.js writes them to --pp-lbl). ========================================================================== */ .pp-functional-zoning-liepaja .pp-matrix-wrap { margin-top: clamp(24px, 4vw, 40px) !important; } .pp-functional-zoning-liepaja .pp-matrix { display: grid; gap: 12px; } .pp-functional-zoning-liepaja .pp-mrow { display: block; padding: 16px; background: var(--pp-bone); border: 1px solid var(--pp-stone); border-radius: var(--pp-r-card); } .pp-functional-zoning-liepaja .pp-mrow > .pp-mc { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--pp-ink-hair); font-size: 14px; text-align: right; min-width: 0; } .pp-functional-zoning-liepaja .pp-mrow > .pp-mc:last-child { border-bottom: 0; } .pp-functional-zoning-liepaja .pp-mrow.pp-mrow--head { display: none; } .pp-functional-zoning-liepaja .pp-mrow > .pp-mc::before { content: var(--pp-lbl, ""); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pp-ink-56); text-align: left; flex: 0 0 auto; } .pp-functional-zoning-liepaja .pp-mrow > .pp-mc--first { display: block; padding-top: 0; text-align: left; font-size: 16px; font-weight: 500; } .pp-functional-zoning-liepaja .pp-mrow > .pp-mc--first::before { display: none; } .pp-functional-zoning-liepaja .pp-mc__name { font-size: inherit; font-weight: inherit; } .pp-functional-zoning-liepaja .pp-size { margin-top: 2px !important; font-size: 12.5px; font-weight: 300; color: var(--pp-ink-56); } .pp-functional-zoning-liepaja .pp-cost { font-weight: 500; } .pp-functional-zoning-liepaja .pp-pill { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 26px; padding: 3px 11px; max-width: 100%; border-radius: var(--pp-r-pill); font-size: 12px; font-weight: 500; white-space: normal; } .pp-functional-zoning-liepaja .pp-pill--p { background: var(--pp-good-soft); color: var(--pp-good); } .pp-functional-zoning-liepaja .pp-pill--b { background: var(--pp-tint); color: var(--pp-ink); } .pp-functional-zoning-liepaja .pp-pill--x { background: var(--pp-bad-soft); color: var(--pp-bad); } .pp-functional-zoning-liepaja .pp-note { margin-top: 18px !important; padding: 16px 18px; background: color-mix(in oklab, var(--pp-sun) 28%, var(--pp-bone)); border-radius: var(--pp-r-card); font-size: 13.5px; line-height: 1.65; font-weight: 300; color: var(--pp-ink-72); } .pp-functional-zoning-liepaja .pp-note strong { font-weight: 500; color: var(--pp-ink); } /* ========================================================================== 14 PROCESS STEPS + SOFT CALL-OUT BARS ========================================================================== */ .pp-functional-zoning-liepaja .pp-steps { margin-top: clamp(24px, 4vw, 40px) !important; max-width: 860px; } .pp-functional-zoning-liepaja .pp-step { position: relative; display: flex; gap: 16px; padding-bottom: 26px; } .pp-functional-zoning-liepaja .pp-step:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 1px; background: var(--pp-ink-line); } .pp-functional-zoning-liepaja .pp-step__num { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--pp-ink); color: var(--pp-bone); font-size: 14px; font-weight: 500; } .pp-functional-zoning-liepaja .pp-step__body { min-width: 0; } /* Title + duration pill flow inline, exactly like the source

…. */ .pp-functional-zoning-liepaja .pp-step__head { padding-top: 5px; font-size: clamp(17px, 2vw, 20px); font-weight: 500; letter-spacing: -.015em; line-height: 1.3; } .pp-functional-zoning-liepaja .pp-step__h { display: inline; font-size: clamp(17px, 2vw, 20px); font-weight: 500; letter-spacing: -.015em; line-height: 1.3; } .pp-functional-zoning-liepaja .pp-step__time { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 10px; margin-left: 4px !important; border-radius: var(--pp-r-pill); background: var(--pp-tint); font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 1.3; vertical-align: middle; white-space: normal; max-width: 100%; } .pp-functional-zoning-liepaja .pp-step__p { margin-top: 8px !important; max-width: 62ch; font-size: 14.5px; line-height: 1.65; font-weight: 300; color: var(--pp-ink-72); } .pp-functional-zoning-liepaja .pp-soft { margin-top: clamp(16px, 3vw, 28px) !important; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(18px, 3vw, 26px); border: 1px solid var(--pp-tint-line-strong); border-radius: var(--pp-r-card); } .pp-functional-zoning-liepaja .pp-soft__t { font-size: 17px; font-weight: 500; letter-spacing: -.01em; } .pp-functional-zoning-liepaja .pp-soft__s { margin-top: 6px !important; max-width: 64ch; font-size: 14px; line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); } /* ========================================================================== 15 DISTRICT / COMPARISON CARDS + ROW LISTS ========================================================================== */ .pp-functional-zoning-liepaja .pp-dist__head, .pp-functional-zoning-liepaja .pp-cmp__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-width: 0; padding-bottom: 14px; border-bottom: 1px solid var(--pp-ink-line); } .pp-functional-zoning-liepaja .pp-dist__h, .pp-functional-zoning-liepaja .pp-cmp__h { font-size: clamp(18px, 2vw, 21px); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; } .pp-functional-zoning-liepaja .pp-dist__meta { font-size: 12px; line-height: 1.4; text-align: right; color: var(--pp-ink-56); } .pp-functional-zoning-liepaja .pp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--pp-ink-hair); font-size: 13.5px; } .pp-functional-zoning-liepaja .pp-row:last-child { border-bottom: 0; padding-bottom: 0; } .pp-functional-zoning-liepaja .pp-row__k { min-width: 0; overflow-wrap: anywhere; color: var(--pp-ink-72); font-weight: 300; } .pp-functional-zoning-liepaja .pp-row__v { min-width: 0; overflow-wrap: anywhere; max-width: 60%; font-weight: 500; text-align: right; } .pp-functional-zoning-liepaja .pp-cmp__verdict { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 26px; padding: 3px 12px; max-width: 100%; border-radius: var(--pp-r-pill); background: var(--pp-surface); border: 1px solid var(--pp-ink-line); font-size: 12px; } .pp-functional-zoning-liepaja .pp-cmp__verdict--good { background: var(--pp-good-soft); border-color: transparent; color: var(--pp-good); } .pp-functional-zoning-liepaja .pp-cmp--hl { border-color: var(--pp-accent-soft); } /* ========================================================================== 16 COSTS TOTAL BAR + AFTER-NOTE ========================================================================== */ /* the source keeps an (empty) 3-card grid above this bar: its own clamp(24px,4vw,40px) margin + the bar's 16px */ .pp-functional-zoning-liepaja .pp-total { margin-top: calc(clamp(24px, 4vw, 40px) + 16px) !important; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 3vw, 28px); color: var(--pp-bone); border-radius: var(--pp-r-card); } .pp-functional-zoning-liepaja .pp-total__t { font-size: 17px; font-weight: 500; color: var(--pp-bone); } .pp-functional-zoning-liepaja .pp-total__s { margin-top: 4px !important; font-size: 13.5px; font-weight: 300; color: var(--pp-bone-60); } .pp-functional-zoning-liepaja .pp-total__val { font-size: clamp(32px, 5vw, 46px); font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--pp-accent-soft); } .pp-functional-zoning-liepaja .pp-after { margin: 16px 0 20px !important; max-width: 72ch; font-size: 14.5px; line-height: 1.7; font-weight: 300; color: var(--pp-ink-72); } .pp-functional-zoning-liepaja .pp-after strong { font-weight: 500; color: var(--pp-ink); } /* ========================================================================== 17 MODEL CARDS — whole card clickable through the stretched "Detaļas" link (a native paragraph link, its ::before covers the card). ========================================================================== */ .pp-functional-zoning-liepaja .pp-model { position: relative; display: flex; flex-direction: column; background: var(--pp-bone); border: 1px solid var(--pp-stone); border-radius: var(--pp-r-card); overflow: hidden; transition: border-color var(--pp-t-med), box-shadow var(--pp-t-med); } .pp-functional-zoning-liepaja .pp-model__media { position: relative; aspect-ratio: 3 / 2; background: var(--pp-surface); overflow: hidden; } .pp-functional-zoning-liepaja .pp-model__media .wp-block-image { margin: 0; width: 100%; height: 100%; } .pp-functional-zoning-liepaja .pp-model__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .pp-functional-zoning-liepaja .pp-model__tag { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--pp-r-pill); background: var(--pp-bone); font-size: 12px; } .pp-functional-zoning-liepaja .pp-model__body { display: flex; flex-direction: column; flex: 1; padding: 18px; } .pp-functional-zoning-liepaja .pp-model__h { font-size: 20px; font-weight: 500; letter-spacing: -.015em; } .pp-functional-zoning-liepaja .pp-model__meta { margin-top: 4px !important; font-size: 13px; color: var(--pp-ink-56); } .pp-functional-zoning-liepaja .pp-model__fit { margin-top: 10px !important; font-size: 14px; line-height: 1.55; font-weight: 300; color: var(--pp-ink-72); } .pp-functional-zoning-liepaja .pp-model__foot { margin-top: auto !important; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; } .pp-functional-zoning-liepaja .pp-model__price { font-weight: 500; } .pp-functional-zoning-liepaja .pp-model__more { font-size: 16px; font-weight: 500; } .pp-functional-zoning-liepaja .pp-model__more a { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--pp-ink); } .pp-functional-zoning-liepaja .pp-model__more a::before { content: ""; position: absolute; inset: 0; z-index: 2; } .pp-functional-zoning-liepaja .pp-model__more a::after { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .pp-functional-zoning-liepaja .pp-model__more a:hover { color: var(--pp-accent); } @media (hover: hover) { .pp-functional-zoning-liepaja .pp-model:hover { border-color: var(--pp-accent-soft); box-shadow: 0 14px 34px -18px color-mix(in oklab, var(--pp-ink) 30%, transparent); } } /* ========================================================================== 18 "WHY MYCABIN" — time bars + energy-class scale ========================================================================== */ /* the source's .zc-card p rule (specificity 0,1,1) beats .zc-adv__head's own 1.05, so the live line-height is 1.6 */ .pp-functional-zoning-liepaja .pp-adv__headrow { margin-top: 6px !important; font-size: clamp(30px, 4vw, 42px); font-weight: 500; letter-spacing: -.03em; line-height: 1.6; } .pp-functional-zoning-liepaja .pp-adv__head { display: inline; font-size: clamp(30px, 4vw, 42px); font-weight: 500; letter-spacing: -.03em; line-height: inherit; color: var(--pp-ink); } .pp-functional-zoning-liepaja .pp-adv__unit { display: inline; font-size: 16px; font-weight: 300; letter-spacing: 0; line-height: inherit; color: var(--pp-ink-56); } .pp-functional-zoning-liepaja .pp-adv__sub { margin-top: 6px !important; font-size: 14px; line-height: 1.6; font-weight: 300; color: var(--pp-ink-56); } .pp-functional-zoning-liepaja .pp-bars { margin-top: 18px !important; } .pp-functional-zoning-liepaja .pp-bar { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--pp-ink-hair); font-size: 13.5px; } .pp-functional-zoning-liepaja .pp-bar__lbl strong, .pp-functional-zoning-liepaja .pp-prose__p strong { font-weight: 500; color: var(--pp-ink); } /* source: .zc-concept p strong, .zc-tree__rdesc strong, .zc-faq__a strong */ .pp-functional-zoning-liepaja .pp-concept__p strong, .pp-functional-zoning-liepaja .pp-tree__rdesc strong, .pp-functional-zoning-liepaja .pp-faq__a strong { font-weight: 500; color: var(--pp-ink); } .pp-functional-zoning-liepaja .pp-bar__lbl { grid-column: 1 / -1; font-size: 13.5px; line-height: normal; color: var(--pp-ink-72); font-weight: 300; } .pp-functional-zoning-liepaja .pp-bar__track { height: 6px; border-radius: var(--pp-r-pill); background: var(--pp-stone); overflow: hidden; } .pp-functional-zoning-liepaja .pp-bar__fill { height: 100%; border-radius: var(--pp-r-pill); background: var(--pp-accent); } .pp-functional-zoning-liepaja .pp-bar__fill--w100 { width: 100%; } .pp-functional-zoning-liepaja .pp-bar__fill--w20 { width: 20%; } .pp-functional-zoning-liepaja .pp-bar__fill--muted { background: var(--pp-ink-28); } .pp-functional-zoning-liepaja .pp-bar__val { min-width: 7ch; font-size: 13.5px; line-height: normal; font-weight: 500; text-align: right; } .pp-functional-zoning-liepaja .pp-bar__val--accent { color: var(--pp-accent); } .pp-functional-zoning-liepaja .pp-energy { margin-top: 18px !important; padding: 18px; background: var(--pp-surface); border-radius: var(--pp-r-md); } .pp-functional-zoning-liepaja .pp-energy__lbl { line-height: 1.6; font-weight: 300; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pp-ink-56); } .pp-functional-zoning-liepaja .pp-energy__bars { margin-top: 34px !important; height: 64px; display: flex; gap: 3px; align-items: flex-end; } .pp-functional-zoning-liepaja .pp-ebar { flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 4px 2px; border-radius: 4px 4px 0 0; background: var(--pp-stone); font-size: 12px; font-weight: 500; line-height: 1; color: var(--pp-ink); } .pp-functional-zoning-liepaja .pp-ebar__t { font-size: 12px; font-weight: 500; line-height: 1; color: inherit; } .pp-functional-zoning-liepaja .pp-ebar--ap { height: 100%; background: var(--pp-good); color: #fff; } .pp-functional-zoning-liepaja .pp-ebar--a { height: 90%; background: var(--pp-good); color: #fff; opacity: .85; } .pp-functional-zoning-liepaja .pp-ebar__tag { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px !important; padding: 3px 10px; border-radius: var(--pp-r-pill); background: var(--pp-ink); color: var(--pp-bone); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; line-height: 1; } .pp-functional-zoning-liepaja .pp-ebar--b { height: 76%; background: var(--pp-accent-soft); } .pp-functional-zoning-liepaja .pp-ebar--c { height: 62%; background: var(--pp-tint); } .pp-functional-zoning-liepaja .pp-ebar--d { height: 48%; background: var(--pp-wood); } .pp-functional-zoning-liepaja .pp-ebar--e { height: 36%; background: color-mix(in oklab, var(--pp-wood) 70%, var(--pp-bad)); } .pp-functional-zoning-liepaja .pp-ebar--f { height: 26%; background: var(--pp-bad-soft); } .pp-functional-zoning-liepaja .pp-energy__note { margin-top: 12px !important; font-size: 12.5px; line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); } /* ========================================================================== 19 PROSE, FAQ, RELATED LINKS, SOURCES ========================================================================== */ .pp-functional-zoning-liepaja .pp-prose { max-width: 760px; } .pp-functional-zoning-liepaja .pp-prose__h { margin: clamp(26px, 4vw, 36px) 0 10px !important; font-size: clamp(19px, 2.4vw, 24px); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; } .pp-functional-zoning-liepaja .pp-prose__p { margin-top: 14px !important; font-size: 15.5px; line-height: 1.75; font-weight: 300; color: var(--pp-ink-72); } /* FAQ accordion (frontend.js: role/aria + single-open within this section) */ .pp-functional-zoning-liepaja .pp-faq-section { padding: clamp(56px, 8vw, 100px) 0; border-block: 1px solid var(--pp-tint-line); } .pp-functional-zoning-liepaja .pp-faq-list { margin-top: clamp(24px, 3.5vw, 36px) !important; max-width: 860px; border-bottom: 1px solid var(--pp-tint-line-strong); } .pp-functional-zoning-liepaja .pp-faq { border-top: 1px solid var(--pp-tint-line-strong); } .pp-functional-zoning-liepaja .pp-faq__q { position: relative; display: block; width: 100%; padding: 20px 38px 20px 0; text-align: left; font-size: 16px; font-weight: 500; letter-spacing: normal; line-height: normal; cursor: pointer; transition: color .2s; } .pp-functional-zoning-liepaja .pp-faq__q:hover { color: var(--pp-accent); } .pp-functional-zoning-liepaja .pp-faq__q::before { content: "+"; position: absolute; right: 0; top: 20px; width: 22px; font-size: 20px; line-height: 1; font-weight: 300; text-align: right; color: var(--pp-ink-56); } .pp-functional-zoning-liepaja .pp-faq.pp-is-open .pp-faq__q::before { content: "\2212"; } .pp-functional-zoning-liepaja .pp-faq__a { padding: 0 0 22px; font-size: 15.5px; line-height: 1.6; color: var(--pp-ink-72); font-weight: 300; } .pp-functional-zoning-liepaja.pp-js .pp-faq:not(.pp-is-open) .pp-faq__a { display: none; } .pp-functional-zoning-liepaja .pp-related { position: relative; display: flex; gap: 14px; align-items: center; padding: 16px 18px; background: var(--pp-bone); border: 1px solid var(--pp-stone); border-radius: var(--pp-r-card); transition: border-color var(--pp-t-med); } .pp-functional-zoning-liepaja .pp-related__body { min-width: 0; } .pp-functional-zoning-liepaja .pp-related__t { font-size: 15.5px; font-weight: 500; } .pp-functional-zoning-liepaja .pp-related__t a { color: var(--pp-ink); } .pp-functional-zoning-liepaja .pp-related__t a::before { content: ""; position: absolute; inset: 0; z-index: 1; } .pp-functional-zoning-liepaja .pp-related__d { margin-top: 2px !important; font-size: 13.5px; line-height: normal; font-weight: 300; color: var(--pp-ink-72); } @media (hover: hover) { .pp-functional-zoning-liepaja .pp-related:hover { border-color: var(--pp-accent-soft); } .pp-functional-zoning-liepaja .pp-related:hover .pp-related__t a { color: var(--pp-accent); } } .pp-functional-zoning-liepaja .pp-sources { margin-top: clamp(24px, 4vw, 40px) !important; padding: 18px 20px; background: var(--pp-surface); border-radius: var(--pp-r-card); } .pp-functional-zoning-liepaja .pp-sources__t { margin-bottom: 6px !important; font-size: 13px; line-height: 1.75; font-weight: 500; color: var(--pp-ink-72); } .pp-functional-zoning-liepaja .pp-sources__t strong { font-size: 13px; font-weight: 500; color: var(--pp-ink-72); } .pp-functional-zoning-liepaja .pp-sources__p { font-size: 12.5px; line-height: 1.75; font-weight: 300; color: var(--pp-ink-56); } /* ========================================================================== 20 DARK CLOSING CTA ========================================================================== */ .pp-functional-zoning-liepaja .pp-dark-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; } .pp-functional-zoning-liepaja .pp-dark-cta__copy { display: flex; flex-direction: column; gap: 12px; flex: 1 1 300px; min-width: 0; } .pp-functional-zoning-liepaja .pp-dark-cta__h { font-size: clamp(25px, 7vw, 42px); line-height: 1.16; letter-spacing: -.03em; font-weight: 500; color: var(--pp-bone); } .pp-functional-zoning-liepaja .pp-dark-cta__p { font-size: clamp(13px, 2.8vw, 15px); line-height: 1.65; font-weight: 300; color: var(--pp-bone-60); } .pp-functional-zoning-liepaja .pp-dark-cta__btns.wp-block-buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; } .pp-functional-zoning-liepaja .pp-dark-cta__btns .wp-block-button, .pp-functional-zoning-liepaja .pp-dark-cta__btns .wp-block-button__link.wp-element-button { width: 100%; } /* The source's .dark-cta p rule (0,1,1) also wins over .eyebrow / .eyebrow--soft inside the CTA copy */ .pp-functional-zoning-liepaja .pp-dark-cta__copy .pp-eyebrow { font-size: clamp(13px, 2.8vw, 15px); line-height: 1.65; font-weight: 300; color: var(--pp-bone-60); } /* ========================================================================== 21 SCROLL REVEAL (io-fade) — frontend.js adds .pp-in-view once ========================================================================== */ .pp-functional-zoning-liepaja .pp-io-fade { opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .8s var(--pp-ease), transform .8s var(--pp-ease); } .pp-functional-zoning-liepaja .pp-io-fade.pp-in-view { opacity: 1; transform: none; } /* ========================================================================== 22 RESPONSIVE LAYER — the source's own breakpoints: 640px and 900px (plus one 1100px card-padding step). ========================================================================== */ @media (min-width: 640px) { .pp-functional-zoning-liepaja .pp-trust { grid-template-columns: repeat(3, 1fr); } .pp-functional-zoning-liepaja .pp-grid--zones, .pp-functional-zoning-liepaja .pp-grid--models, .pp-functional-zoning-liepaja .pp-grid--2 { grid-template-columns: repeat(2, 1fr); } .pp-functional-zoning-liepaja .pp-tree__meta { grid-template-columns: repeat(4, 1fr); } .pp-functional-zoning-liepaja .pp-card { padding: 24px; } .pp-functional-zoning-liepaja .pp-toc { flex-wrap: wrap; overflow: visible; margin-inline: 0 !important; padding-inline: 0; } .pp-functional-zoning-liepaja .pp-bar { grid-template-columns: 220px 1fr auto; } .pp-functional-zoning-liepaja .pp-bar__lbl { grid-column: auto; } .pp-functional-zoning-liepaja .pp-check__btn .wp-block-button__link.wp-element-button, .pp-functional-zoning-liepaja .pp-soft__btn .wp-block-button__link.wp-element-button { width: auto; } } @media (min-width: 900px) { .pp-functional-zoning-liepaja .pp-answer { grid-template-columns: auto 1fr auto; gap: 28px; } .pp-functional-zoning-liepaja .pp-answer__btn { justify-self: end; } .pp-functional-zoning-liepaja .pp-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } .pp-functional-zoning-liepaja .pp-grid--zones { grid-template-columns: repeat(4, 1fr); gap: 16px; } .pp-functional-zoning-liepaja .pp-grid--models { grid-template-columns: repeat(4, 1fr); gap: 16px; } .pp-functional-zoning-liepaja .pp-grid--2 { gap: 20px; } .pp-functional-zoning-liepaja .pp-stats { grid-template-columns: repeat(4, 1fr); } .pp-functional-zoning-liepaja .pp-stat, .pp-functional-zoning-liepaja .pp-stat:nth-child(even) { padding: 24px; border-left: 0; border-bottom: 0; border-right: 1px solid var(--pp-ink-line); } .pp-functional-zoning-liepaja .pp-stat:first-child { padding-left: 0; } .pp-functional-zoning-liepaja .pp-stat:last-child { border-right: 0; } .pp-functional-zoning-liepaja .pp-check, .pp-functional-zoning-liepaja .pp-soft, .pp-functional-zoning-liepaja .pp-total { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } .pp-functional-zoning-liepaja .pp-soft__btn, .pp-functional-zoning-liepaja .pp-check__btn { flex: 0 0 auto; } .pp-functional-zoning-liepaja .pp-map__frame { flex-direction: row; } .pp-functional-zoning-liepaja .pp-map__canvas { flex: 2 1 0; min-height: 460px; } .pp-functional-zoning-liepaja .pp-map__side { flex: 1 1 0; max-height: 460px; border-top: 0; border-left: 1px solid var(--pp-stone); min-width: 300px; } /* Real table layout (display: table on ordinary blocks) so column widths auto-size exactly like the source's

. */ .pp-functional-zoning-liepaja .pp-matrix { display: table; width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--pp-bone); border: 1px solid var(--pp-stone); border-radius: var(--pp-r-card); } .pp-functional-zoning-liepaja .pp-mrow, .pp-functional-zoning-liepaja .pp-mrow.pp-mrow--head { display: table-row; padding: 0; background: transparent; border: 0; border-radius: 0; } .pp-functional-zoning-liepaja .pp-mrow > .pp-mc { display: table-cell; vertical-align: middle; text-align: center; padding: 16px 14px; border-bottom: 1px solid var(--pp-ink-hair); } .pp-functional-zoning-liepaja .pp-mrow > .pp-mc::before { display: none; } .pp-functional-zoning-liepaja .pp-mrow > .pp-mc--first { display: table-cell; text-align: left; font-size: 14.5px; min-width: 220px; padding-top: 0; } .pp-functional-zoning-liepaja .pp-mrow > .pp-mc:last-child { border-bottom: 0; } .pp-functional-zoning-liepaja .pp-mrow:last-child > .pp-mc { border-bottom: 0; } .pp-functional-zoning-liepaja .pp-mrow--head > .pp-mc { padding: 14px; background: var(--pp-surface); border-bottom: 1px solid var(--pp-stone); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--pp-ink-56); } .pp-functional-zoning-liepaja .pp-mrow--head > .pp-mc:last-child { border-bottom: 1px solid var(--pp-stone); } .pp-functional-zoning-liepaja .pp-mrow:not(.pp-mrow--head):hover > .pp-mc { background: var(--pp-surface); } .pp-functional-zoning-liepaja .pp-pill { white-space: nowrap; } .pp-functional-zoning-liepaja .pp-time-cell { color: var(--pp-ink-72); white-space: nowrap; } .pp-functional-zoning-liepaja .pp-dark-cta__btns.wp-block-buttons { display: grid; grid-template-columns: 1fr 1fr; width: auto; } .pp-functional-zoning-liepaja .pp-dark-cta__btns .wp-block-button { width: auto; } .pp-functional-zoning-liepaja .pp-answer__btn .wp-block-button__link.wp-element-button { white-space: nowrap; } } @media (min-width: 1100px) { .pp-functional-zoning-liepaja .pp-grid--2 .pp-adv { padding: 32px; } } /* ========================================================================== 23 REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .pp-functional-zoning-liepaja .pp-model, .pp-functional-zoning-liepaja .pp-related, .pp-functional-zoning-liepaja .pp-opt .wp-block-button__link.wp-element-button { transition: none; } .pp-functional-zoning-liepaja .pp-io-fade { transition: none; } }