/* packages.html page geometry (flow layer lives in css/patterns.css): the rate-card hero, the add-ons carousel, the rotating quotes, and the pricing FAQ accordion. All selectors are page-scoped (svc-*, qrot, qa-acc) so this file is inert elsewhere. */ /* ---- hero: the rate card ---- */ .svc-hero { background: rgba(19,19,19,1); color: var(--cream-text); overflow: hidden; } .svc-hero-wrap { max-width: 1200px; margin: 0 auto; padding: 148px 60px 0; display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; } .svc-kicker { margin: 0 0 24px; font-family: var(--font-pop); font-weight: 300; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; opacity: .8; } .svc-h1 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 68px; line-height: 1.08; } .svc-h1 em { font-family: var(--font-italic); font-style: normal; } .svc-lede { margin: 26px 0 0; max-width: 480px; font-family: var(--font-pop); font-weight: 300; font-size: 16px; line-height: 1.6; letter-spacing: .02em; } .svc-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; } .svc-hero .btn { min-height: 48px; padding: 14px 26px; } .svc-btn-solid { background: var(--cream); border-color: var(--cream); color: var(--ink); } .svc-btn-solid:hover { background: var(--accent); border-color: var(--accent); color: var(--cream-text); } .svc-hero-media { position: relative; } .svc-hero-media > img, .svc-hero-media > video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } /* giant serif ticker at the hero's foot (marquee machinery from style.css) */ .svc-ticker { margin-top: 64px; padding: 26px 0 34px; border-top: 1px solid rgba(242,241,238,.18); } .svc-ticker span { font-family: var(--font-serif); font-size: 92px; line-height: 1.1; text-transform: uppercase; color: var(--cream-text); opacity: .22; white-space: nowrap; } /* hero load choreography */ @keyframes svc-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes svc-settle { from { transform: scale(1.06); } to { transform: none; } } .svc-hero-copy > *, .svc-hero-media { animation: svc-rise .9s ease both; } .svc-kicker { animation-delay: .05s; } .svc-h1 { animation-delay: .15s; } .svc-lede { animation-delay: .3s; } .svc-ctas { animation-delay: .45s; } .svc-hero-media { animation-delay: .3s; } .svc-hero-media > img, .svc-hero-media > video { animation: svc-settle 2.2s ease-out both; } /* ---- the foundation: editorial split with menu rows ---- */ .svc-found { display: grid; grid-template-columns: 5fr 6fr; gap: 72px; align-items: start; } .svc-found-list { list-style: none; margin: 0; padding: 0; } /* A three-photo gallery under the title in place of the lede (owner, 2026-09-30): props, props in use, and her custom-template prints, the things the list beside it names. One tall photo on the left, two stacked on the right. */ .svc-found-gallery { margin-top: 44px; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 470px; } .svc-found-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 0; } .svc-found-gallery img:first-child { grid-row: 1 / span 2; } @media (max-width: 900px) { .svc-found-gallery { margin-top: 28px; height: 360px; } } .svc-found-list li { display: grid; grid-template-columns: 86px 1fr; gap: 0 24px; padding: 30px 0 32px; border-top: 1px solid var(--line); } .svc-found-list li:last-child { border-bottom: 1px solid var(--line); } .svc-found-list h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.2; } .svc-found-list p { margin: 10px 0 0; font-family: var(--font-pop); font-weight: 300; font-size: 15px; line-height: 1.6; } /* ---- packages: cards lift on hover ---- The featured card used to ride 24px high (`transform: translateY(-24px)`). That came out 2026-08-06 with the equal-length cards below: once the four are the same length, one of them sitting proud reads as a different SIZE rather than as emphasis, and the dark fill already carries that job. The lift also outranked `.fade-in.is-in`'s `transform: none` (1-2-0 vs 0-2-0), so the featured card was the one card on the page that never played the reveal rise. Removing the rule fixes both; do not re-add it as an override, re-add it here or not at all. */ #packages .pcard { transition: transform .5s ease; } /* The two plain package cards sit on her paper (owner, 2026-09-30: "make these colors for the card backgrounds, white"), so they lift off the blush band; the featured card keeps its slate. --cream is her #F2F1EE, the site's white. */ #packages .pcard:not(.is-featured) { background: var(--cream); } #packages .pcard:not(.is-featured) .pcard-price small { opacity: .67; } /* ink at the kit's .65 measured 4.39:1 on paper; .67 is the lowest over 4.5 */ #packages .pcard-price, #booths-that-fit .pcard-price { font-size: 44px; } @media (min-width: 901px) { #packages .card-grid { margin-top: 78px; } #packages .pcard:hover { transform: translateY(-8px); } } /* Shorter cards, this page only (owner, 2026-10-02: "it just feels too long", photos untouched). The card width stays, because the photo is cover-fit to the card and widening the card would widen the photo. Height comes out of the text instead: the description 14.5 to 13px on a 1.55 line, the inclusion list 14 to 13px on 1.4 with 4px rows instead of 8, the price 44 to 40, and a few pixels of margin. The description rule is keyed on the reconciler's own attribute because the price is a

too and a bare `.pcard p` would shrink it. Measured at 1440: the tallest card 1309 to 1160px (1256 to 1100 at 390). Smallest type on the cards is 13px: ink on paper 12.6:1, paper on the slate card 5.19:1. The About page's cards keep the kit's sizes. */ #packages .pcard-price { font-size: 40px; } #packages .pcard-price small { margin-bottom: 6px; } #packages .pcard p[data-bc-pkg-desc] { margin-top: 12px; font-size: 13px; line-height: 1.55; } #packages .pcard ul { margin-top: 14px; font-size: 13px; line-height: 1.4; } #packages .pcard li { padding-top: 4px; } #packages .pcard .btn { margin-top: 20px; } /* And a little wider (owner, same day: "a little wider so they can be even shorter", accepting that the cover-fit photo widens with the card; its height stays 300). Only the card row widens, by 90px each side, so the section's kicker and title stay on the page's 1200px line with every other section. Gated to screens where the extra width fits inside the viewport with the kit's 60px margins; below that the cards keep the 1200px row. */ @media (min-width: 1400px) { #packages .card-grid { margin-left: -90px; margin-right: -90px; } } /* ---- add-ons carousel (replaces the estimator; lives on the fl-dark band) ---- */ .svc-addons .svc-addons-head { max-width: 660px; margin-bottom: clamp(44px, 5vw, 66px); } .svc-addons .svc-addons-head .fl-lede { max-width: 640px; } /* click-through carousel: one slide per add-on, count-agnostic */ .svc-carousel-viewport { overflow: hidden; } .svc-carousel-track { display: flex; transition: transform .6s cubic-bezier(.2,.7,.2,1); will-change: transform; } .svc-slide { flex: 0 0 100%; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); border: 1px solid var(--line); background: rgba(242,241,238,.04); overflow: hidden; transition: opacity .6s ease; } .svc-slide[aria-hidden="true"] { opacity: .18; } .svc-slide-media { position: relative; overflow: hidden; height: clamp(360px, 38vw, 480px); } .svc-slide-media img, .svc-slide-media video { display: block; width: 100%; height: 100%; object-fit: cover; } /* The photo fills its card. The slides share one height (the track is a flex row), set by the LONGEST description, while the photo had a fixed height, so one long add-on left a blank strip under every photo: 94px at 1440 and 163px at 901 on Posie, whose Day-of Coordinating copy runs five lines. On the two-column layout the photo now stretches with its grid row, and the old fixed height stays as its floor, so a short card looks exactly as before. The stacked phone layout keeps its fixed 260px photo (rule below). */ @media (min-width: 901px) { .svc-slide-media { height: auto; min-height: clamp(360px, 38vw, 480px); } } .svc-slide-tag { position: absolute; top: 20px; left: 20px; background: var(--accent); color: var(--cream-text); padding: 8px 16px; font-family: var(--font-mont); font-weight: 500; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; } .svc-slide-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4vw, 60px); } .svc-slide-index { margin: 0 0 22px; font-family: var(--font-pop); font-weight: 300; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: rgba(242,241,238,.97); } /* .55 in the kit, tuned for its near-black band; on her slate .97 is the lowest that clears 4.5:1 (2026-09-30) */ .svc-slide-index b { color: var(--accent-lift); font-weight: 400; } .svc-slide-top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .svc-slide-name { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; } .svc-slide-price { font-family: var(--font-italic); font-size: clamp(24px, 2.6vw, 34px); line-height: 1; color: var(--accent-lift); white-space: nowrap; } .svc-slide-blurb { margin: 24px 0 0; max-width: 46ch; font-family: var(--font-pop); font-weight: 300; font-size: 15px; line-height: 1.75; color: rgba(242,241,238,.97); } /* .75 in the kit; .97 is the lowest that clears 4.5:1 on her slate (2026-09-30) */ .svc-addon-add { align-self: flex-start; margin-top: 32px; display: inline-flex; align-items: center; gap: 12px; padding: 0; background: none; border: 0; cursor: pointer; font-family: var(--font-mont); font-weight: 400; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-text); transition: color .4s; } .svc-addon-add:hover { color: var(--accent-lift); } .svc-addon-add:focus-visible { outline: 1px solid var(--accent-lift); outline-offset: 5px; } .svc-addon-add-i { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(242,241,238,.4); border-radius: 50%; font-size: 18px; line-height: 1; transition: transform .5s cubic-bezier(.2,.7,.2,1), background-color .4s, color .4s, border-color .4s; } .svc-addon-add:hover .svc-addon-add-i { border-color: var(--accent-lift); } .svc-slide.is-added .svc-addon-add-i { background: var(--accent); border-color: var(--accent); color: var(--cream-text); transform: rotate(45deg); } /* nav: arrows flanking the dots (JS hides the row when there is one slide) */ .svc-carousel-nav { margin-top: clamp(28px, 3vw, 40px); display: flex; align-items: center; justify-content: center; gap: 22px; } .svc-carousel-arrow { width: 50px; height: 50px; flex: none; border-radius: 50%; cursor: pointer; background: none; border: 1px solid rgba(242,241,238,.35); color: var(--cream-text); font-family: var(--font-serif); font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background-color .4s, color .4s, border-color .4s; } .svc-carousel-arrow:hover { background: var(--accent); color: var(--cream-text); border-color: var(--accent); } .svc-carousel-arrow:focus-visible { outline: 1px solid var(--accent-lift); outline-offset: 3px; } .svc-carousel-dots { display: flex; align-items: center; gap: 12px; } .svc-carousel-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(242,241,238,.3); transition: background-color .3s, transform .3s; } .svc-carousel-dots button.is-live { background: var(--accent-lift); transform: scale(1.4); } .svc-addons-foot { margin-top: clamp(34px, 4vw, 50px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .svc-addons-note { max-width: 46ch; margin: 0; font-family: var(--font-pop); font-weight: 300; font-size: 13px; line-height: 1.6; color: rgba(242,241,238,.6); } .svc-addons-foot .btn { min-height: 48px; } /* The "Ask about add-ons" button is filled with her light pink (owner, 2026-10-01, "make this little box pink"): ink label on pink, 9.0:1; hover goes to her paper. Same size as before. */ .svc-addons-foot .btn-secondary { background: var(--accent-lift); border-color: var(--accent-lift); color: var(--ink); } .svc-addons-foot .btn-secondary:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); } /* ---- rotating quotes ---- */ /* More room above and below the quotes on desktop (owner, 2026-10-01): 150 over 96 on top, 160 over 104 below. Keyed on the pricing page's own section id, so the kit's 96/104 holds everywhere else; phones keep the kit's 60/68. */ @media (min-width: 901px) { #owner-words > .fl-wrap { padding-top: 150px; padding-bottom: 160px; } } .qrot { position: relative; text-align: center; } .qrot::before { content: "\201C"; position: absolute; left: 50%; top: 66px; transform: translateX(-50%); font-family: var(--font-serif); font-size: 240px; line-height: 1; opacity: .08; pointer-events: none; } .qrot-stage { position: relative; min-height: 250px; } .qrot-stage figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s ease; display: flex; flex-direction: column; justify-content: center; } .qrot-stage figure.is-on { opacity: 1; } .qrot-stage blockquote { margin: 0 auto; max-width: 880px; font-family: var(--font-italic); font-size: 36px; line-height: 1.3; } .qrot-stage figcaption { margin-top: 26px; font-family: var(--font-pop); font-weight: 300; font-size: 15px; } .qrot-stage figcaption span { display: block; opacity: .9; font-size: 13px; margin-top: 4px; } /* .65 was 3.3:1 once the band went slate (owner, 2026-10-01); .9 measures 4.6 */ .qrot-dots { display: flex; justify-content: center; gap: 12px; margin-top: 36px; } /* color: inherit is load-bearing: iOS WebKit's UA button color is the system BLUE and `color` does not inherit into form controls, so without it every currentColor below paints the dots blue on an iPhone (fine in Chrome). */ .qrot-dots button { width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; background: transparent; padding: 0; cursor: pointer; opacity: .5; color: inherit; -webkit-appearance: none; appearance: none; } .qrot-dots button.is-on { background: currentColor; opacity: 1; } /* ---- pricing FAQ accordion (progressive: without js every answer stays open) ---- */ .qa-acc .qa-q button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 20px; background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; } .qa-tog { flex: none; font-family: var(--font-italic); font-size: 17px; opacity: .65; white-space: nowrap; transition: opacity .3s ease; } .qa-tog::before { content: "( Open )"; } .qa-item.is-open .qa-tog::before { content: "( Close )"; } .qa-acc .qa-q button:hover .qa-tog { opacity: 1; } .qa-acc .qa-body { grid-column: 2; } .qa-acc.js .qa-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s ease; } .qa-acc.js .qa-item.is-open .qa-body { grid-template-rows: 1fr; } .qa-acc.js .qa-clip { min-height: 0; overflow: hidden; } /* The pricing FAQ sits on her blush (fl-stone) since 2026-10-02 (owner: "one of the light options"). Ink on blush is 8.8:1, the red kicker and numbers 5.5:1; the "( Open )" toggle at the kit's .65 would be 3.6:1 there, so it is .8 on this page (5.3:1), measured in WebKit at 1440 and 390. */ #pricing-faq .qa-tog { opacity: .8; } #pricing-faq .qa-acc .qa-q button:hover .qa-tog { opacity: 1; } /* ---- motion off ---- */ @media (prefers-reduced-motion: reduce) { .svc-hero-copy > *, .svc-hero-media, .svc-hero-media > img, .svc-hero-media > video { animation: none; } .svc-ticker .marq-track { animation: none; } #packages .pcard { transition: none; } .qa-acc.js .qa-body { transition: none; } .svc-carousel-track { transition: none; } } /* ---- mobile (kit breakpoint) ---- */ @media (max-width: 900px) { .svc-hero-wrap { grid-template-columns: 1fr; gap: 46px; padding: 108px 22px 0; } .svc-h1 { font-size: clamp(38px, 11vw, 50px); } .svc-ctas { flex-direction: column; margin-top: 30px; } .svc-hero .btn { width: 100%; max-width: 340px; } .svc-ticker { margin-top: 46px; padding: 18px 0 24px; } .svc-ticker span { font-size: 44px; } .svc-found { grid-template-columns: 1fr; gap: 34px; } .svc-found-list li { grid-template-columns: 62px 1fr; gap: 0 16px; padding: 24px 0 26px; } .svc-slide { grid-template-columns: 1fr; } .svc-slide-media { height: 260px; } /* Shorter add-on cards on phones (owner, 2026-10-02), photo untouched: the text block tightens instead. Blurb 15/1.75 to 14/1.6, body padding 32 to 24, index 22 to 14 under, blurb 24 to 16 above, button 32 to 22 above. The blurb keeps its .97 paper on slate (5.0:1 at 14px). */ .svc-slide-body { padding: 24px; } .svc-slide-index { margin-bottom: 14px; } .svc-slide-blurb { margin-top: 16px; font-size: 14px; line-height: 1.6; } .svc-addon-add { margin-top: 22px; } /* Package cards all one height on phones too (owner, 2026-10-02): the swipe track stretches every card to the tallest and the button sits at the foot, the same two rules the desktop row uses above 900px. The add-on carousel already does this on its own (a flex row stretches its slides). */ #packages .card-grid[data-bc-pkg-list="package"] { align-items: stretch; } #packages .pcard .btn { margin-top: auto; } /* Wider on phones so they run shorter (owner, 2026-10-02): the card is 92vw instead of the kit's 84 (359px on a 390 screen, was 328) and the inner gutters 22px instead of 28, so the text column grows from 272 to 315px. The neighbours still peek about 10px each side. The list keeps 28px under it on every card, so the tallest card (where the button's margin-top:auto resolves to nothing) can never run its last inclusion into the button. */ #packages .card-grid[data-bc-pkg-list="package"] { --pk-card: 92vw; } #packages .pcard-num, #packages .pcard h3, #packages .pcard-price, #packages .pcard p, #packages .pcard ul, #packages .pcard .btn { margin-left: 22px; margin-right: 22px; } #packages .pcard ul { margin-bottom: 28px; } /* and the description and the inclusions a touch bigger on phones (owner, same day): 14px here, 13 on desktop. */ #packages .pcard p[data-bc-pkg-desc] { font-size: 14px; } #packages .pcard ul { font-size: 14px; } .svc-addons-foot { flex-direction: column; align-items: flex-start; } .svc-addons-foot .btn { width: 100%; } .qrot::before { font-size: 150px; top: 120px; } .qrot-stage { min-height: 330px; } .qrot-stage blockquote { font-size: 24px; } .qa-acc .qa-body { grid-column: 1; } } /* ---- packages hero: fixed photo backdrop under a dark overlay ------------- Built as a position:fixed LAYER clipped by the section's clip-path, not background-attachment:fixed. A fixed background cannot be promoted to a compositor layer, so it repaints the full-bleed photo on every scroll frame, which is the stutter; clip-path clips descendants without becoming their containing block, so the layer stays viewport-anchored and the parallax reads the same. It also works on iOS, where attachment:fixed is effectively broken. Same technique as the home hero (css/home.css .sec-hero::before). The overlay rides in the same layer stack as the photo, so there is one painted element and the hero's own content only needs lifting above it. BUILD: swap the photo per client and re-measure the overlay alpha. .82 is what carries cream copy past AA on this photo's lightest patches; a brighter photo needs more, and the probe is the layout-audit contrast check. */ .svc-hero { position: relative; clip-path: inset(0); } .svc-hero::before { content: ""; position: fixed; inset: 0; z-index: 0; background: linear-gradient(rgba(19,19,19,0.82), rgba(19,19,19,0.82)), url("../images/po-guests-reading.jpg") center / cover no-repeat; } /* POSIE (2026-09-29): photo + alpha chosen by the probe the note above asks for, worst 10% patch behind kicker / h1 / lede at 1440 and 390 all at or above 4.5:1 (po-guests-reading.jpg, alpha 0.82). */ .svc-hero-wrap, .svc-ticker { position: relative; z-index: 1; } /* ---- packages hero: exactly one window tall -------------------------------- The section is a flex column: the wrap takes the slack so the ticker always sits on the bottom edge, and every part that would otherwise pin a minimum height is viewport-derived instead. The 4/5 photo is the real driver (529px at a 940 window), so it is given an explicit vh height with object-fit already doing the cropping; the display type and the ticker scale with it. Scoped to the slider's 901px breakpoint: below that the hero stacks and a phone should scroll it, not squeeze it. */ @media (min-width: 901px) { .svc-hero { min-height: 100vh; display: flex; flex-direction: column; } .svc-hero-wrap { flex: 1 1 auto; align-content: center; padding-top: clamp(76px, 11vh, 148px); padding-bottom: clamp(12px, 2.4vh, 36px); } .svc-hero-media > img, .svc-hero-media > video { aspect-ratio: auto; height: clamp(240px, 42vh, 560px); } .svc-h1 { font-size: clamp(34px, 5.4vh, 68px); } .svc-lede { margin-top: clamp(14px, 2.4vh, 26px); } .svc-ctas { margin-top: clamp(18px, 3.4vh, 38px); } .svc-kicker { margin-bottom: clamp(12px, 2.2vh, 24px); } .svc-ticker { margin-top: 0; flex: 0 0 auto; padding: clamp(12px, 2.2vh, 26px) 0 clamp(16px, 3vh, 34px); } .svc-ticker span { font-size: clamp(40px, 8.5vh, 92px); } } /* ---- package cards: all the same length ----------------------------------- The shared .card-grid's `align-items: start` is what staggers them, so the grid stretches here and the CTA is pinned to the foot: the bottoms line up whatever the inclusion count, which is the whole point when the counts are the client's and unknown at kit time. Pairs with the featured-card change above; reverting is a one-block delete. */ @media (min-width: 901px) { #packages .card-grid, #booths-that-fit .card-grid { align-items: stretch; } #packages .pcard, #booths-that-fit .pcard { position: relative; padding-bottom: 50px; } #packages .pcard ul, #booths-that-fit .pcard ul { margin-bottom: 20px; } #packages .pcard .btn, #booths-that-fit .pcard .btn { margin-top: auto; } #packages .pcard-link, #booths-that-fit .pcard-link { position: absolute; left: 28px; right: 28px; bottom: 24px; margin: 0; } } /* The 50px reserve above fits a ONE LINE .pcard-link (21px tall, sitting 24px off the card foot, clearing the CTA by 5px). The link is out of flow, so the reserve cannot grow with it: once the column narrows enough for the label to wrap to two lines the link is 42px tall, needs 66px, and climbs 16px INTO the button, striking through its bottom border and printing the first line of link text across the control. Measured on the Desert Glow build at every 10px from 1140 down to 901: the wrap starts at 1090 (link box 247.5px, one line still fits at 250.8px) and the 16px collision then holds all the way to the 901 breakpoint. 71px = 24 bottom + 42 two lines + the same 5px clearance. Only the CARD padding moves, so every CTA stays on one baseline and the link itself does not shift; the band is capped at 1199 rather than the measured 1090 so a longer label wraps into headroom instead of into the button. Above 1199 nothing changes. (Both sections: the occasion page's #booths-that-fit carries the same cards.) */ @media (min-width: 901px) and (max-width: 1199px) { #packages .pcard, #booths-that-fit .pcard { padding-bottom: 71px; } } /* her accents on the packages page's own bands (see style.css for the rule) */ .svc-kicker { color: var(--accent-lift); } .qrot .fl-kicker { color: var(--accent); opacity: 1; } /* THE ADD-ON SLOT ALWAYS SHIPS, and hides itself until the client actually has an add-on, so a price list with none never renders an empty band. The inert