/* ========================================================================== MyCabin Private Visit — Page Pack CSS Scoped entirely under .pp-private-visit (Page Pack Spec §5). Every selector 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 markup uses (the PRIVATE VISITS section plus the shared tokens, type, buttons, FAQ, photo CTA and scroll-reveal it relies on). 01 Tokens (scoped custom properties, not :root) 02 Base resets (scoped) 03 Flow-layout margin neutralization (generated list — see note) 04 Layout helpers, type, links 05 Buttons 06 Hero + host card 07 Section scaffolding, split layout, "what to expect" 08 Demo house + spec grid 09 Location card + map + photo 10 Booking calendar 11 FAQ 12 Photo CTA band 13 Scroll reveal (io-fade) 14 Desktop layer (min-width: 640px / 900px) 15 Reduced motion ========================================================================== */ /* ========================================================================== 01 TOKENS — scoped to the root, never :root, so nothing leaks to the rest of the WordPress site. ========================================================================== */ .pp-private-visit { --pp-ink: #27272C; --pp-bone: #FFFFFF; --pp-beige: #FBF6F3; --pp-wood: #EDCFB7; --pp-accent: #917EBC; --pp-accent-soft: #CDCBFF; --pp-tint: #E6E6FF; --pp-surface: var(--pp-beige); --pp-stone: color-mix(in oklab, var(--pp-ink) 11%, 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-60: color-mix(in oklab, var(--pp-bone) 60%, transparent); --pp-maxw: 1280px; --pp-gutter: clamp(18px, 4vw, 40px); /* Header clearance. The site's fixed global header is supplied by the WordPress Site Part, not this Page Pack, so its height can't be read here — this reproduces the source design's own --hdr-h token (clamp(58px, 7vw, 74px)). Checked against the real fixed header at 320 to 1920px: header height and the gap between header and hero content match the design exactly (docs/private-visit-qa). */ --pp-hdr-h: clamp(58px, 7vw, 74px); --pp-r-pill: 999px; --pp-r-card: 11px; --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; } /* ========================================================================== 02 BASE RESETS (scoped) ========================================================================== */ .pp-private-visit, .pp-private-visit *, .pp-private-visit *::before, .pp-private-visit *::after { box-sizing: border-box; } .pp-private-visit h1, .pp-private-visit h2, .pp-private-visit h3, .pp-private-visit p { margin: 0; padding: 0; font: inherit; letter-spacing: normal; text-transform: none; color: inherit; } .pp-private-visit a { color: var(--pp-ink); text-decoration: none; } .pp-private-visit a:hover { color: var(--pp-accent); } .pp-private-visit em { font-style: normal; } .pp-private-visit img { max-width: 100%; display: block; } .pp-private-visit figure { margin: 0; } .pp-private-visit :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 specificity, later in the file). `!important` mirrors WordPress's own generated rule, which has no :where() wrapper. No core/columns are used, so no gap/row-gap inheritance applies. (Reference: docs/MYCABIN-GUTENBERG-REFERENCE-IMPLEMENTATION.md §5, docs/HOMEPAGE-WORDPRESS-FLOW-MARGIN-FIX-HANDOFF.md.) ========================================================================== */ .pp-private-visit > *, .pp-private-visit .pp-wrap > *, .pp-private-visit .pp-book > *, .pp-private-visit .pp-cal > *, .pp-private-visit .pp-cta > *, .pp-private-visit .pp-cta__btns > *, .pp-private-visit .pp-cta__copy > *, .pp-private-visit .pp-cta__wrap > *, .pp-private-visit .pp-expect > *, .pp-private-visit .pp-expect__body > *, .pp-private-visit .pp-expect__item > *, .pp-private-visit .pp-faq > *, .pp-private-visit .pp-faq-list > *, .pp-private-visit .pp-faq-sec > *, .pp-private-visit .pp-faq-split > *, .pp-private-visit .pp-faq-split__intro > *, .pp-private-visit .pp-hero > *, .pp-private-visit .pp-hero__btns > *, .pp-private-visit .pp-hero__copy > *, .pp-private-visit .pp-hero__grid > *, .pp-private-visit .pp-hero__media > *, .pp-private-visit .pp-host > *, .pp-private-visit .pp-host__text > *, .pp-private-visit .pp-house > *, .pp-private-visit .pp-house__copy > *, .pp-private-visit .pp-house__media > *, .pp-private-visit .pp-icon > *, .pp-private-visit .pp-loc > *, .pp-private-visit .pp-loc__card > *, .pp-private-visit .pp-loc__info > *, .pp-private-visit .pp-loc__item > *, .pp-private-visit .pp-loc__photo > *, .pp-private-visit .pp-loc__txt > *, .pp-private-visit .pp-spec > *, .pp-private-visit .pp-specs > *, .pp-private-visit .pp-split > *, .pp-private-visit .pp-split__intro > *, .pp-private-visit .pp-tag > *, .pp-private-visit .pp-sec > *, .pp-private-visit .pp-io-fade > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* ========================================================================== 04 LAYOUT HELPERS, TYPE, LINKS ========================================================================== */ .pp-private-visit .pp-wrap { max-width: var(--pp-maxw); margin-inline: auto; padding-inline: var(--pp-gutter); } .pp-private-visit .pp-eyebrow { font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--pp-ink-56); } .pp-private-visit .pp-title { font-size: clamp(26px, 4.6vw, 40px); line-height: 1.08; letter-spacing: -.022em; font-weight: 500; } .pp-private-visit .pp-title--faq { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.06; } /* The site theme balances every heading (text-wrap: balance) and lets paragraphs break anywhere; the design inherits `text-wrap: pretty` from the page, so headings wrap differently without this. */ .pp-private-visit :is(h1, h2, h3, h4, h5, h6, p, .wp-block-heading) { text-wrap: pretty; overflow-wrap: normal; } .pp-private-visit .pp-mw-16 { max-width: 16ch; } .pp-private-visit .pp-sub { margin-top: 16px !important; max-width: 50ch; font-size: 15.5px; line-height: 1.65; font-weight: 300; color: var(--pp-ink-72); } /* "link-arrow": the arrow is drawn by CSS so the paragraph holds only the editable link text. */ .pp-private-visit .pp-link-arrow { font-size: 16px; font-weight: 500; line-height: normal; } .pp-private-visit .pp-link-arrow a { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--pp-ink); } .pp-private-visit .pp-link-arrow a:hover { color: var(--pp-accent); } .pp-private-visit .pp-link-arrow a::after { content: ""; flex: none; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16' fill='none' stroke='%2327272C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .pp-private-visit .pp-link-arrow a:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16' fill='none' stroke='%23917EBC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E"); } /* Round icon chip used by the expect list and the location rows */ .pp-private-visit .pp-icon { flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--pp-bone); color: var(--pp-accent); } .pp-private-visit .pp-icon--sm { flex-basis: 36px; width: 36px; height: 36px; background: var(--pp-tint); } .pp-private-visit .pp-icon svg, .pp-private-visit .pp-tag svg { display: block; flex: none; } /* ========================================================================== 05 BUTTONS ========================================================================== */ .pp-private-visit .wp-block-buttons { margin: 0; } /* `.wp-element-button` is on every button link (live page and editor) and lifts these rules above the theme's `body:not(.elementor-page) .wp-element-button` button reset, which still applies inside the block editor. */ .pp-private-visit .wp-block-button .wp-block-button__link.wp-element-button { position: relative; display: inline-flex; align-items: center; justify-content: center; text-align: start; gap: 10px; height: 38px; padding: 0 19px; 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; transform: scale(1); transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med), transform .15s var(--pp-ease); } .pp-private-visit .wp-block-button .wp-block-button__link:active { transform: scale(.96); } @media (hover: none) and (pointer: coarse) { .pp-private-visit .wp-block-button .wp-block-button__link::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } } /* Native ink / light colours are inline (editable in the sidebar); the hover states need !important to beat that inline style. */ .pp-private-visit .pp-btn--ink .wp-block-button__link:hover { background: var(--pp-accent) !important; color: var(--pp-bone) !important; } .pp-private-visit .pp-btn--light .wp-block-button__link:hover { background: var(--pp-accent-soft) !important; color: var(--pp-ink) !important; } .pp-private-visit .pp-btn--outline .wp-block-button__link.wp-element-button { background: transparent; color: var(--pp-ink); border: 1px solid var(--pp-ink); } .pp-private-visit .pp-btn--outline .wp-block-button__link:hover { background: var(--pp-surface); color: var(--pp-ink); } .pp-private-visit .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-private-visit .pp-btn--ghost .wp-block-button__link:hover { background: color-mix(in oklab, var(--pp-bone) 14%, transparent); border-color: var(--pp-bone); color: var(--pp-bone); } /* 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 calendar frame own their padding (explicit block attributes or the rules below), so that default is cleared. */ .pp-private-visit .wp-block-group.has-background { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; } /* ========================================================================== 06 HERO + HOST CARD Background colour (Beige) is a native block attribute. ========================================================================== */ .pp-private-visit .pp-hero.wp-block-group { padding: calc(var(--pp-hdr-h) + clamp(28px, 6vw, 48px)) 0 clamp(36px, 5vw, 64px); } .pp-private-visit .pp-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4.5vw, 64px); align-items: center; } .pp-private-visit .pp-hero__copy { min-width: 0; } .pp-private-visit .pp-tag { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; margin-bottom: 20px !important; border-radius: var(--pp-r-pill); background: var(--pp-tint); font-size: 12px; font-weight: 500; color: var(--pp-ink); } .pp-private-visit .pp-tag svg { color: var(--pp-accent); } .pp-private-visit .pp-tag__t { font-size: 12px; font-weight: 500; line-height: normal; } .pp-private-visit .pp-h1 { margin-top: 10px !important; max-width: 16ch; font-size: clamp(34px, 8.6vw, 46px); line-height: 1.06; letter-spacing: -.026em; font-weight: 500; } .pp-private-visit .pp-h1 em { display: block; margin-top: 2px; color: var(--pp-ink-56); } /* font-size comes from the native "Body L" preset (clamp(16px, 2vw, 20px) — exact match to the source .lead) */ .pp-private-visit .pp-lead { margin-top: 20px !important; max-width: 48ch; line-height: 1.55; color: var(--pp-ink-72); font-weight: 300; } .pp-private-visit .pp-hero__btns { margin-top: 26px !important; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; } .pp-private-visit .pp-hero__btns .wp-block-button, .pp-private-visit .pp-hero__btns .wp-block-button__link { width: 100%; } .pp-private-visit .pp-host { margin-top: clamp(26px, 3.4vw, 36px) !important; padding-top: 22px; border-top: 1px solid var(--pp-ink-line); display: flex; align-items: center; gap: 16px; max-width: 460px; } .pp-private-visit .pp-host__photo { flex: 0 0 64px; width: 64px; height: 64px; } .pp-private-visit .pp-host__photo img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--pp-tint); } .pp-private-visit .pp-host__text { min-width: 0; } .pp-private-visit .pp-host__name { font-size: 16px; font-weight: 500; line-height: normal; } .pp-private-visit .pp-host__role { margin-top: 2px !important; font-size: 13px; font-weight: 300; line-height: normal; color: var(--pp-ink-56); } .pp-private-visit .pp-host__links { margin-top: 6px !important; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; line-height: normal; } .pp-private-visit .pp-host__links a { color: var(--pp-ink); text-decoration: underline; text-decoration-color: var(--pp-ink-28); text-underline-offset: 3px; transition: color var(--pp-t-med); } .pp-private-visit .pp-host__links a:hover { color: var(--pp-accent); } .pp-private-visit .pp-hero__media { min-width: 0; } .pp-private-visit .pp-hero__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pp-r-card); background: var(--pp-wood); } /* ========================================================================== 07 SECTION SCAFFOLDING, SPLIT LAYOUT, "WHAT TO EXPECT" Section backgrounds and vertical padding (Section — Compact preset) are native block attributes; only borders and the scroll offset live 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 the booking anchor lands where the design lands it. */ .pp-private-visit .pp-sec { scroll-margin-top: calc(var(--pp-hdr-h) * 2 + 20px); } .pp-private-visit .pp-faq-sec { scroll-margin-top: calc(var(--pp-hdr-h) + 12px); } .pp-private-visit .pp-sec--tint { border-block: 1px solid var(--pp-tint-line); } .pp-private-visit .pp-split { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); } .pp-private-visit .pp-split__intro { min-width: 0; } .pp-private-visit .pp-split__intro .pp-sub { max-width: 40ch; } .pp-private-visit .pp-expect { display: grid; grid-template-columns: 1fr; min-width: 0; } .pp-private-visit .pp-expect__item { display: flex; gap: 14px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--pp-tint-line-strong); min-width: 0; } .pp-private-visit .pp-expect__h { padding-top: 10px; font-size: 18px; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; } .pp-private-visit .pp-expect__p { margin-top: 8px !important; max-width: 40ch; font-size: 14.5px; line-height: 1.65; font-weight: 300; color: var(--pp-ink-72); } /* ========================================================================== 08 DEMO HOUSE + SPEC GRID ========================================================================== */ .pp-private-visit .pp-house { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4.5vw, 72px); align-items: center; } .pp-private-visit .pp-house__media, .pp-private-visit .pp-house__copy { min-width: 0; } .pp-private-visit .pp-house__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pp-r-card); background: var(--pp-wood); } .pp-private-visit .pp-title--house { margin-top: 10px !important; } .pp-private-visit .pp-specs { margin: 26px 0 24px !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--pp-ink-line); } .pp-private-visit .pp-spec { padding: 16px 0; border-bottom: 1px solid var(--pp-ink-line); min-width: 0; } .pp-private-visit .pp-spec__l { font-size: 12px; line-height: normal; color: var(--pp-ink-56); } .pp-private-visit .pp-spec__v { margin-top: 4px !important; font-size: clamp(17px, 2vw, 21px); font-weight: 500; letter-spacing: -.015em; line-height: normal; } /* ========================================================================== 09 LOCATION CARD + MAP + PHOTO Section background (Beige) and the card background (White) are native. ========================================================================== */ .pp-private-visit .pp-loc { margin-top: clamp(28px, 3.6vw, 48px) !important; display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.6vw, 36px); align-items: stretch; } .pp-private-visit .pp-loc__card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--pp-stone); border-radius: var(--pp-r-card); overflow: hidden; } .pp-private-visit .pp-loc__info { padding: clamp(20px, 2.8vw, 32px); display: grid; grid-template-columns: 1fr; gap: 20px 28px; } .pp-private-visit .pp-loc__item { display: flex; gap: 12px; align-items: flex-start; min-width: 0; } .pp-private-visit .pp-loc__txt { min-width: 0; } .pp-private-visit .pp-loc__label { font-size: 12px; line-height: normal; color: var(--pp-ink-56); } .pp-private-visit .pp-loc__value { margin-top: 3px !important; font-size: 14.5px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; } .pp-private-visit .pp-loc__value a { color: var(--pp-ink); } .pp-private-visit .pp-loc__value a:hover { color: var(--pp-accent); } .pp-private-visit .pp-loc__maps { grid-column: 1 / -1; font-size: 14px; } .pp-private-visit .pp-loc__maps a { display: flex; } .pp-private-visit .pp-loc__map { display: block; width: 100%; flex: 1 1 auto; min-height: 240px; border: 0; border-top: 1px solid var(--pp-stone); filter: grayscale(.35); } .pp-private-visit .pp-loc__photo { min-width: 0; min-height: 240px; } .pp-private-visit .pp-loc__photo .wp-block-image { height: 100%; } .pp-private-visit .pp-loc__img img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; border-radius: var(--pp-r-card); background: var(--pp-wood); } /* ========================================================================== 10 BOOKING CALENDAR (Calendly iframe, Custom HTML block) Section background (White) and frame background (Beige) are native; frontend.js sizes the frame to Calendly's own reported page height. ========================================================================== */ .pp-private-visit .pp-book { border-top: 1px solid var(--pp-stone); } .pp-private-visit .pp-checks { list-style: none; margin: 24px 0 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 10px; } .pp-private-visit .pp-checks li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: 14px; line-height: normal; color: var(--pp-ink-72); } .pp-private-visit .pp-checks li::before { content: ""; flex: none; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23917EBC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .pp-private-visit .pp-cal { min-width: 0; border: 1px solid var(--pp-stone); border-radius: var(--pp-r-card); overflow: hidden; } .pp-private-visit .pp-cal iframe { display: block; width: 100%; height: 700px; transition: height var(--pp-t-med); border: 0; background: var(--pp-surface); } /* ========================================================================== 11 FAQ (frontend.js: role/aria + single-open within the FAQ section) ========================================================================== */ .pp-private-visit .pp-faq-split { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); align-items: start; } .pp-private-visit .pp-faq-split__intro { max-width: 52ch; } .pp-private-visit .pp-faq-split__lede { margin-top: 14px !important; max-width: 46ch; font-size: 15.5px; line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); } .pp-private-visit .pp-faq-split__lede 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-private-visit .pp-faq-split__lede a:hover { color: var(--pp-accent); text-decoration-color: currentColor; } .pp-private-visit .pp-faq-list { min-width: 0; display: grid; grid-template-columns: 1fr; gap: 0 clamp(28px, 5vw, 64px); border-bottom: 1px solid var(--pp-ink-line); } .pp-private-visit .pp-faq { border-top: 1px solid var(--pp-ink-line); } .pp-private-visit .pp-faq__q { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 16px; font-weight: 500; letter-spacing: normal; line-height: normal; text-align: left; cursor: pointer; transition: color .2s; } .pp-private-visit .pp-faq__q:hover { color: var(--pp-accent); } .pp-private-visit .pp-faq__q::after { content: "+"; flex: 0 0 22px; font-size: 20px; line-height: 1; font-weight: 300; text-align: right; color: var(--pp-ink-56); } .pp-private-visit .pp-faq.pp-is-open .pp-faq__q::after { content: "\2212"; } /* Once frontend.js runs, each question's text sits in a real