(note optional per page). */ .sec-hero.pat { --h: 700px; } .z-hero_3 { background: var(--cream); border-color: var(--cream); color: var(--ink); } .z-hero_5 { color: rgba(242,239,232,1); font-size: 14px; text-align: center; } .z-hero_5 a { color: inherit; } @media (min-width: 901px) { .z-hero_3 { left: 415px; top: 556px; width: 182px; height: 48px; } .z-hero_4 { left: 619px; top: 556px; width: 166px; height: 48px; } .z-hero_5 { left: 300px; top: 638px; width: 600px; } } /* bands */ .fl { position: relative; overflow: hidden; --line: rgba(46,42,37,.25); } .fl-wrap { max-width: 1200px; margin: 0 auto; padding: 96px 60px 104px; } .fl-cream { background: var(--cream); } .fl-stone { background: #ECE6DC; } .fl-dark { background: #221E1A; color: var(--cream-text); --line: rgba(242,239,232,.28); } .fl-dark2 { background: #2B2723; color: var(--cream-text); --line: rgba(242,239,232,.28); } /* type */ .fl-kicker { margin: 0 0 16px; font-family: var(--font-pop); font-weight: 300; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; opacity: .8; } .fl-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 58px; line-height: 1.08; } .fl-title em { font-family: var(--font-italic); font-style: normal; } .fl-lede { margin: 22px 0 0; font-family: var(--font-pop); font-weight: 300; font-size: 16px; line-height: 1.6; letter-spacing: .02em; max-width: 620px; } .fl-num { font-family: var(--font-italic); font-size: 22px; white-space: nowrap; } .fl-note { margin: 44px 0 0; font-family: var(--font-pop); font-weight: 300; font-size: 15px; line-height: 1.6; max-width: 640px; } .fl-note a, .fl-lede a { color: inherit; } .fl-cta { margin-top: 40px; } /* reveal on scroll (observer lives in each page's js) */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; } .fade-in.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .fade-in { opacity: 1; transform: none; transition: none; } } /* review cards */ .rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 54px; } .rev-card { margin: 0; padding: 32px 30px 28px; border: 1px solid var(--line); display: flex; flex-direction: column; } .rev-stars { font-size: 13px; letter-spacing: .35em; } .rev-card blockquote { margin: 18px 0 24px; font-family: var(--font-italic); font-size: 21px; line-height: 1.4; } .rev-card figcaption { margin-top: auto; font-family: var(--font-pop); font-weight: 300; font-size: 14px; } .rev-card figcaption span { display: block; opacity: .65; font-size: 12.5px; margin-top: 4px; } /* numbered editorial FAQ */ .qa-list { margin-top: 52px; } .qa-item { display: grid; grid-template-columns: 96px 1fr; gap: 0 44px; padding: 30px 0; border-top: 1px solid var(--line); } .qa-item:last-child { border-bottom: 1px solid var(--line); } .qa-q { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 27px; line-height: 1.2; } .qa-a { grid-column: 2; margin: 12px 0 0; font-family: var(--font-pop); font-weight: 300; font-size: 15.5px; line-height: 1.6; max-width: 660px; } /* interactive guide (venue guide / chapter player / timeline walker) */ .gd-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 44px; margin-top: 54px; align-items: stretch; } .gd-list { display: flex; flex-direction: column; } .gd-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 4px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; text-align: left; cursor: pointer; font-family: var(--font-pop); font-weight: 300; opacity: .6; transition: opacity .3s ease, padding-left .3s ease; } .gd-item:last-child { border-bottom: 1px solid var(--line); } .gd-item.is-on { opacity: 1; padding-left: 14px; } .gd-name { display: block; font-family: var(--font-serif); font-size: 25px; line-height: 1.15; } .gd-sub { display: block; font-size: 13px; opacity: .7; margin-top: 5px; letter-spacing: .02em; } .gd-arrow { font-family: var(--font-italic); font-size: 20px; flex: none; } .gd-stage { position: relative; min-height: 560px; } .gd-media { position: absolute; inset: 0; overflow: hidden; } .gd-media img, .gd-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; } .gd-media img.is-on, .gd-media video.is-on { opacity: 1; } .gd-card { position: absolute; left: 32px; right: 32px; bottom: 32px; background: var(--cream); color: var(--ink); padding: 26px 28px 28px; } .fl-cream .gd-card, .fl-stone .gd-card { background: #221E1A; color: var(--cream-text); } .gd-label { margin: 0 0 12px; font-family: var(--font-pop); font-weight: 300; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; opacity: .75; } .gd-note { display: none; margin: 0 0 0; font-family: var(--font-pop); font-weight: 300; font-size: 15px; line-height: 1.55; } .gd-note.is-on { display: block; } .gd-card .btn { margin-top: 20px; } /* card grids (packages, offers, occasion panels, booth options) */ /* Reconciled list: the card count is the client's package count, not the demo's. Flex-wrap + justify-content:center keeps a trailing row of 1 or 2 centred instead of stranded; a full row renders identically to the grid. */ .card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; margin-top: 54px; } .card-grid > * { flex: 0 1 calc((100% - 2 * 26px) / 3 - 0.5px); min-width: 240px; } .card-grid.two > * { flex: 0 1 calc((100% - 26px) / 2 - 0.5px); } .pcard { position: relative; border: 1px solid var(--line); display: flex; flex-direction: column; padding: 0 0 30px; color: inherit; text-decoration: none; } .pcard-img, .pcard-video { height: 300px; overflow: hidden; } .pcard-img img, .pcard-video video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; } .pcard:hover .pcard-img img, .pcard:hover .pcard-video video { transform: scale(1.04); } .pcard-num { margin: 22px 28px 0; font-family: var(--font-italic); font-size: 19px; } .pcard h3 { margin: 8px 28px 0; font-family: var(--font-serif); font-weight: 400; font-size: 29px; line-height: 1.15; } .pcard-price { margin: 16px 28px 0; font-family: var(--font-serif); font-size: 38px; line-height: 1; } .pcard-price small { display: block; font-family: var(--font-pop); font-weight: 300; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .65; margin-bottom: 8px; } .pcard p { margin: 14px 28px 0; font-family: var(--font-pop); font-weight: 300; font-size: 14.5px; line-height: 1.6; } .pcard ul { margin: 16px 28px 0; padding: 0; list-style: none; font-family: var(--font-pop); font-weight: 300; font-size: 14px; line-height: 1.5; } .pcard li { padding: 8px 0 0; } .pcard li::before { content: "·"; margin-right: 10px; } .pcard .btn { margin: 24px 28px 0; align-self: flex-start; } .pcard-link { display: inline-block; margin: 20px 28px 0; font-family: var(--font-pop); font-weight: 300; font-size: 14px; color: inherit; text-decoration: underline; text-underline-offset: 4px; } .pcard.is-featured { background: #221E1A; color: var(--cream-text); border-color: #221E1A; } .pcard-pill { position: absolute; top: 18px; left: 18px; z-index: 1; background: var(--cream); color: var(--ink); font-family: var(--font-pop); font-weight: 300; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 14px; } /* count-up stat rows */ .ct-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 48px; } .ct-row.three { grid-template-columns: repeat(3, 1fr); } .ct { border-top: 1px solid var(--line); padding-top: 20px; } .ct b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 62px; line-height: 1; } .ct span { display: block; margin-top: 12px; font-family: var(--font-pop); font-weight: 300; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .75; } /* three-point rows (what's included foundations, the case for the booth) */ .pt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 54px; } .pt { border-top: 1px solid var(--line); padding-top: 22px; } .pt .fl-num { display: block; margin-bottom: 14px; } .pt h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.2; } .pt p { margin: 12px 0 0; font-family: var(--font-pop); font-weight: 300; font-size: 15px; line-height: 1.6; } /* two-column included list */ .inc-list { list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 60px; } .inc-list li { padding: 22px 0; border-top: 1px solid var(--line); } .inc-list b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.2; } .inc-list span { display: block; margin-top: 8px; font-family: var(--font-pop); font-weight: 300; font-size: 14.5px; line-height: 1.55; opacity: .85; } /* area chips */ .chip-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .chip-row span, .chip-row a { font-family: var(--font-pop); font-weight: 300; font-size: 14px; padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px; color: inherit; text-decoration: none; } /* flow-layer mobile (additive; the canvas mobile rules above are untouched) */ @media (max-width: 900px) { .sec-hero .z-hero_3 { order: 4; margin-top: 28px; } .sec-hero .z-hero_4 { order: 5; margin-top: 12px; } .sec-hero .z-hero_5 { order: 6; margin-top: 20px; } .fl-wrap { padding: 60px 22px 68px; } .fl-title { font-size: clamp(34px, 9.5vw, 44px); } .rev-grid, .pt-grid { grid-template-columns: 1fr; margin-top: 36px; } .card-grid, .card-grid.two { margin-top: 36px; } .card-grid > *, .card-grid.two > * { flex: 1 1 100%; } .gd-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 36px; } .gd-stage { min-height: 480px; } .qa-item { grid-template-columns: 1fr; gap: 0; padding: 24px 0; } .qa-item .fl-num { margin-bottom: 8px; } .qa-q { font-size: 22px; } .qa-a { grid-column: 1; } .ct-row, .ct-row.three { grid-template-columns: repeat(2, 1fr); margin-top: 34px; } .ct b { font-size: 44px; } .inc-list { grid-template-columns: 1fr; margin-top: 30px; } .pcard-img, .pcard-video { height: 240px; } } /* Clamp the kit's decorative edge-bleeds (.social-strip filmstrip) so interior pages show no horizontal scrollbar. `clip` (not `hidden`) so position:sticky descendants keep working. patterns.css is never linked on index. */ html { overflow-x: clip; } /* ---------- package cards: count-aware layout (see the JS in services.js) ---- Four or more package cards turn the row into a one-row slider with arrows. At three or fewer nothing here applies and the list renders as designed. Recovered from live San Diego 2026-07-28; canonical copy in design-01. */ @media (min-width: 901px) { .card-grid.is-slider { display: flex; justify-content: flex-start; flex-wrap: nowrap; /* BOTH axes hidden, NOT auto: the arrows are the only way the rail moves. As an auto scroller with x-mandatory snap it captured trackpad gestures, and a lone overflow-x forces overflow-y to compute to auto, so the hover/pill headroom (padding-top pulled back by margin) left ~26px of vertical overflow: the rail latched the wheel and froze PAGE scrolling over the whole section (found live on a client build 2026-08-01). hidden blocks user scrolling on both axes; the arrows' scrollTo() keeps working. */ overflow: hidden; padding-top: 22px; margin-top: -22px; } .card-grid.is-slider > article { flex: 0 0 calc((100% - 2 * 26px) / 3); } } .svc-pkg-shell { position: relative; } .svc-pkg-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; background: #fff; border: 1px solid rgba(0, 0, 0, .25); color: inherit; font-size: 24px; line-height: 1; display: none; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); transition: background .35s, color .35s, border-color .35s; } @media (min-width: 901px) { .svc-pkg-shell .svc-pkg-arrow { display: inline-flex; } } .svc-pkg-arrow:hover { background: #111; color: #fff; border-color: #111; } .svc-pkg-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .svc-pkg-prev { left: -22px; } .svc-pkg-next { right: -22px; } /* ---- contact form: canvas to flow, the DESKTOP half (2026-09-11) ---------- patterns.css is what every SUBPAGE loads; css/form.css is what the home page loads. form.css carried both halves of the canvas-to-flow conversion and this file only ever got the mobile half, so above 900px the subpages kept style.css's `.contact-form { position: absolute; inset: 0 }` base and the whole form collapsed into a pile in the corner with the submit button covered by the package select. Home was fine, which is exactly why it went unnoticed. These are form.css's own rules, for the same component: all five design-02 pages carry an identical contact section (two views, four z layers, seven fields, no image). Live sites built from this kit already carry this block in their own patterns.css, which is where it was checked against. Mobile is untouched. The max-width layer above already neutralises the inline geometry with position/left/top/width !important, so it never depended on the coordinates this conversion removes. */ @media (min-width: 901px) { .sec-contact-form, .sec-contact-form .cv { height: auto; min-height: 740px; } .sec-contact-form .cv { display: flex; flex-direction: column; align-items: flex-start; } .sec-contact-form .contact-form { position: static; width: 510px; margin: 113px 60px 129px 630px; } .sec-contact-form .cf-view.cf-form:not([hidden]) { position: static; display: flex; flex-direction: column; gap: 19px; } .sec-contact-form .cf-form .field { position: static; width: 100%; } /* Rows exist for questions the form editor ADDS side by side; the kit ships none, so these are inert until a client uses the editor. */ .sec-contact-form .cf-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } /* a field left alone on a shared row spans the full line (owner rule) */ .sec-contact-form .cf-form .form-row > :only-child { grid-column: 1 / -1; } /* 22, not 41: the column's own 19px gap already supplies part of the canvas's 41px, and margin adds to the gap rather than replacing it. */ .sec-contact-form .cf-form .btn { margin-top: 22px; } .sec-contact-form .cf-form .cf-error { position: static; width: auto; } } /* The two rules form.css's mobile layer carries and this file did not. Both are inert on the kit as shipped and become load bearing the moment a client adds a side-by-side question or an add-on picker through the form editor. */ @media (max-width: 900px) { .sec-contact-form .cf-form .form-row { display: contents; } .sec-contact-form .addon-picks { position: static !important; left: auto !important; top: auto !important; width: 100% !important; } } /* The 901 to 1199 gap. The desktop rule above pins this block's right edge at 1140px (a 630px left margin + 510px, inside .cv's fixed 1200px canvas), while the stacked layout does not take over until 900px. Between the two the form runs past the viewport, and html{overflow-x:clip} removes the scrollbar, so the cut-off half could not be reached at all: 116px lost at 1024 (ordinary iPad landscape) and 239px at 901, taking the second column of add-on checkboxes and the send button off screen. Reuse the kit's own stacked reflow here, including the blanket that un-absolutes canvas children (style.css `.sec .cv > *`), which is what the mobile layout relies on and the only reason this is a few rules rather than a re-layout. Centred, because at these widths a left-aligned column leaves the right half empty. Nothing outside 901-1199 is touched. */ @media (min-width: 901px) and (max-width: 1199px) { .sec-contact-form, .sec-contact-form .cv { height: auto; min-height: 0; } .sec-contact-form .cv > * { position: static; left: auto; top: auto; right: auto; bottom: auto; width: auto; height: auto; white-space: normal; } .sec-contact-form .cv { width: auto; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; padding: 60px 40px 70px; } .sec-contact-form .z-contact-form_4 { order: 1; font-size: 17px; } .sec-contact-form .z-contact-form_3 { order: 2; font-size: 28px; margin-top: 14px; } .sec-contact-form .z-contact-form_2 { order: 3; font-size: 16px; margin-top: 26px; } .sec-contact-form .z-contact-form_1 { order: 4; margin-top: 4px; } .sec-contact-form .contact-form { order: 5; position: static; width: 100%; max-width: 620px; margin: 34px 0 0; } .sec-contact-form .cf-view:not([hidden]) { position: static; display: flex; flex-direction: column; } .sec-contact-form .field { position: static !important; left: auto !important; top: auto !important; width: auto !important; } .sec-contact-form .cf-form .btn { position: static !important; left: auto !important; top: auto !important; } .sec-contact-form .cf-success > * { position: static !important; left: auto !important; top: auto !important; width: auto !important; } .sec-contact-form .cf-form .form-row { display: contents; } .sec-contact-form .addon-picks { position: static !important; left: auto !important; top: auto !important; width: auto !important; } } /* PHONES: THE PACKAGE CARDS ARE A SWIPE TRACK. Ported 2026-09-27 from design-03 (Charisma, owner call 2026-09-22) onto this kit's .card-grid / .pcard package list; the desktop rail above is untouched. Native scrolling only, no gesture code: the track scrolls sideways and NOT vertically (overflow-y hidden, never auto, the lesson of the desktop rail above), and touch-action stays at its default, so a vertical swipe over a card scrolls the PAGE and a sideways one slides the cards. The arrow bar is for people who do not think to swipe: fixed to the bottom of the screen while the section is on screen (pkg-rail.js), never on desktop. Any card count from two up; keyed on the reconciler's own mark so a portal save that adds a package joins the track with no rebuild. */ @media (max-width: 900px) { .card-grid[data-bc-pkg-list="package"] { display: flex; flex-wrap: nowrap; justify-content: flex-start; /* Each card its own height (Charisma, owner 2026-09-22: equal heights "just leaves a ton of blank space"); desktop still stretches. */ align-items: flex-start; gap: 6px; margin-top: 36px; /* Every card centres in the track with the ones either side peeking. The side padding is what lets the FIRST and LAST card centre too. The card is sized in vw on purpose: a percentage flex-basis resolves against the track's content box, which this very padding shrinks, so the two chase each other; a vw card is absolute and padding + card/2 lands on the track's centre at either end. 84vw of a 390 screen shows ~28px of each neighbour, most of it their photo. */ --pk-card: 84vw; padding: 0 calc((100% - var(--pk-card)) / 2) 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* No intrinsic width of its own: a scroll container reports its whole content width to a flex/grid parent. width 0 + min-width 100%. */ width: 0; min-width: 100%; } .card-grid[data-bc-pkg-list="package"]::-webkit-scrollbar { display: none; } .card-grid[data-bc-pkg-list="package"] > .pcard { flex: 0 0 var(--pk-card); min-width: 0; scroll-snap-align: center; } /* THE NEIGHBOURS HAVE TO BE VISIBLE. Cards carry .fade-in, which only turns on when the card intersects the viewport, and a card parked off to the side never does: the peek would be a card at opacity 0. In the track they are always shown; the section around them still reveals on scroll. */ .card-grid[data-bc-pkg-list="package"] > .pcard.fade-in { opacity: 1; transform: none; } /* One package: nothing to peek at. :only-of-type, NOT :only-child, because the inert is a sibling. */ .card-grid[data-bc-pkg-list="package"] > .pcard:only-of-type { flex-basis: 100%; } .card-grid[data-bc-pkg-list="package"]:has(> .pcard:only-of-type) { padding-inline: 0; } /* FULL BLEED, the deterministic way: this one section drops the wrap's 22px gutter and the heading, lede and note take it back themselves, so the track spans the screen with no negative margins (calc(50% - 50vw) resolves against a shell that is already 100vw and computes to zero). Descendant :has(), not child: pkg-rail.js wraps the list in .svc-pkg-shell at every width. */ .fl:has(.card-grid[data-bc-pkg-list="package"]) { overflow-x: clip; } .fl:has(.card-grid[data-bc-pkg-list="package"]) > .fl-wrap { padding-inline: 0; } .fl:has(.card-grid[data-bc-pkg-list="package"]) > .fl-wrap > .fl-kicker, .fl:has(.card-grid[data-bc-pkg-list="package"]) > .fl-wrap > .fl-title, .fl:has(.card-grid[data-bc-pkg-list="package"]) > .fl-wrap > .fl-lede, .fl:has(.card-grid[data-bc-pkg-list="package"]) > .fl-wrap > .fl-note { padding-inline: 22px; } } /* The phone bar: back, a "2 / 4" counter read from the DOM, forward. Built and positioned by pkg-rail.js; shown only while its track is on screen. */ .svc-pkg-mnav { display: none; } @media (max-width: 900px) { .svc-pkg-mnav { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 50; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 999px; background: var(--ink); color: var(--cream-text); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); opacity: 0; pointer-events: none; transition: opacity .25s; } .svc-pkg-mnav.is-on { opacity: 1; pointer-events: auto; } .svc-pkg-mnav.in-editor { bottom: 84px; } /* above the site editor's toolbar in its phone view */ .svc-pkg-mbtn { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; background: transparent; color: inherit; border: 1px solid rgba(242, 239, 232, .45); font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; -webkit-appearance: none; appearance: none; } .svc-pkg-mbtn:active { background: rgba(242, 239, 232, .14); } .svc-pkg-mcount { font-family: var(--font-pop); font-weight: 300; font-size: 12px; letter-spacing: .2em; min-width: 52px; text-align: center; } }