/* =========================================================================== THE BODY — Treatments, phone + tablet (<= 1079px). On top of css/mobile.css. Adaptation (no mobile frames in Figma). See MOBILE-CONTRACT.md. Section ids from css/treatments.css; component classes from css/treat-ui.css. =========================================================================== */ /* =========================================================================== 05 THE TREATMENT LIST (280:2) — one flat section, four groups. A 3-column grid: [name / copy / duration ........ price | +] Every child spans the row by default; only the row parts share lines: h3 -> columns 1-2, its +/– marker -> column 3 (dense packing drops the marker, which comes later in the DOM, into the hole beside its h3) duration -> column 1, price -> columns 2-3 (2 wide, so it can never fall into a name row's 1-wide hole) Each group reads: number, h2, intro, PHOTO, rows, detail + bullets, the side card. The photo is pulled up with `order` (one band per group, by DOM range). =========================================================================== */ .page .sec[data-f="280:2"] { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-auto-flow: row dense; column-gap: 14px; row-gap: 0; align-items: start; } .page .sec[data-f="280:2"] > * { grid-column: 1 / -1; width: auto; min-width: 0; order: 12; } /* group bands (DOM ranges), then each group's header (0) and photo (1) */ .page .sec[data-f="280:2"] > [data-f="280:65"], .page .sec[data-f="280:2"] > [data-f="280:65"] ~ * { order: 22; } .page .sec[data-f="280:2"] > [data-f="280:86"], .page .sec[data-f="280:2"] > [data-f="280:86"] ~ * { order: 32; } .page .sec[data-f="280:2"] > [data-f="280:112"], .page .sec[data-f="280:2"] > [data-f="280:112"] ~ * { order: 42; } .page .sec[data-f="280:2"] > [data-f="280:5"], .page .sec[data-f="280:2"] > [data-f="280:6"], .page .sec[data-f="280:2"] > [data-f="353:15"], .page .sec[data-f="280:2"] > [data-f="280:7"] { order: 10; } .page .sec[data-f="280:2"] > [data-f="280:65"], .page .sec[data-f="280:2"] > [data-f="280:66"], .page .sec[data-f="280:2"] > [data-f="353:16"], .page .sec[data-f="280:2"] > [data-f="280:67"] { order: 20; } .page .sec[data-f="280:2"] > [data-f="280:86"], .page .sec[data-f="280:2"] > [data-f="280:87"], .page .sec[data-f="280:2"] > [data-f="353:17"], .page .sec[data-f="280:2"] > [data-f="280:88"] { order: 30; } .page .sec[data-f="280:2"] > [data-f="280:112"], .page .sec[data-f="280:2"] > [data-f="280:114"], .page .sec[data-f="280:2"] > [data-f="280:116"] { order: 40; } .page .sec[data-f="280:2"] > [data-f="543:147"] { order: 11; } .page .sec[data-f="280:2"] > [data-f="543:83"] { order: 21; } .page .sec[data-f="280:2"] > [data-f="543:116"] { order: 31; } .page .sec[data-f="280:2"] > [data-f="543:146"] { order: 41; } /* group header: 01 / BODY SCULPTING / two intro lines */ .page .sec[data-f="280:2"] > .up.k-clay { margin-top: 72px; } /* 02 03 04: 72px between groups */ .page .sec[data-f="280:2"] > .up.k-clay[data-f="280:5"] { margin-top: 0; } .page .sec[data-f="280:2"] > .up.k-clay[data-f="419:47"] { margin-top: 44px; } /* ADD TO ANY FACE TREATMENT */ .page .sec[data-f="280:2"] > h2[id] { margin-top: 10px; scroll-margin-top: calc(var(--hdr-h) + 24px); } .page .sec[data-f="280:2"] > [data-f="353:15"], .page .sec[data-f="280:2"] > [data-f="353:16"], .page .sec[data-f="280:2"] > [data-f="353:17"] { margin-top: 12px; } .page .sec[data-f="280:2"] > [data-f="280:7"], .page .sec[data-f="280:2"] > [data-f="280:67"], .page .sec[data-f="280:2"] > [data-f="280:88"], .page .sec[data-f="280:2"] > [data-f="280:116"] { margin-top: 10px; } /* the group photo: a rounded card under the intro */ .page .sec[data-f="280:2"] > .ph { margin: 26px 0 8px; aspect-ratio: 4 / 3; border-radius: 18px; } /* treatment rows */ .page .sec[data-f="280:2"] > h3 { grid-column: 1 / -1; margin-top: 20px; font-size: 24px; line-height: 1.25; text-wrap: pretty; } .page .sec[data-f="280:2"] > .c.k-clay { /* the +/– marker */ grid-column: 3; justify-self: end; align-self: start; width: auto; margin-top: 22px; text-align: right; text-indent: 0; } .page .sec[data-f="280:2"] > h3 + .hl { margin-top: 6px; } /* 2026-10-29 rows that book online: no row layer here; the "+" is its own 44px tap target beside the title (columns 1-2 for the title, the "+" drops into column 3 by dense packing) */ .page .sec[data-f="280:2"] > .row-hit { display: none; } .page .sec[data-f="280:2"] > h3.has-plus { grid-column: 1 / 3; } .page .sec[data-f="280:2"] > .c.k-clay.row-plus-m { display: flex; align-items: center; justify-content: flex-end; grid-column: 3; justify-self: end; align-self: start; width: 44px; height: 44px; margin: 13px 0 -14px; font-size: 26px; line-height: 1; text-indent: 0; } .page .sec[data-f="280:2"] > .r.k-mute { grid-column: 1; margin-top: 12px; align-self: start; } /* duration */ .page .sec[data-f="280:2"] > .price { grid-column: 2 / 4; justify-self: end; align-self: start; margin-top: 12px; text-align: right; } .page .sec[data-f="280:2"] .price span { display: inline-block; } .page .sec[data-f="280:2"] .price span + span { margin-left: 10px; } .page .sec[data-f="280:2"] > .rule { margin-top: 18px; } /* the featured treatment: detail copy + bullets (the Figma dots become ::before bullets) */ .page .sec[data-f="280:2"] > [data-f="280:15"], .page .sec[data-f="280:2"] > [data-f="543:56"], .page .sec[data-f="280:2"] > [data-f="543:86"], .page .sec[data-f="280:2"] > [data-f="543:119"] { margin-top: 26px; } .page .sec[data-f="280:2"] > img[src*="treat-list-dot"] { display: none; } .page .sec[data-f="280:2"] > img[src*="treat-list-dot"] + p { margin-top: 10px; padding-left: 20px; } .page .sec[data-f="280:2"] > img[src*="treat-list-dot"] + p::before { content: ""; position: absolute; left: 2px; top: calc(var(--lh) / var(--fs) * 0.5em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--clay); } /* the side card: .side-card is its top edge, the six fact lines are its body, the Book button sits inside the padded last line */ .page .sec[data-f="280:2"] > .side-card { height: 24px; margin-top: 30px; border-bottom: 0; border-radius: 20px 20px 0 0; } .page .sec[data-f="280:2"] > .side-card + p, .page .sec[data-f="280:2"] > .side-card + p + p, .page .sec[data-f="280:2"] > .side-card + p + p + p, .page .sec[data-f="280:2"] > .side-card + p + p + p + p, .page .sec[data-f="280:2"] > .side-card + p + p + p + p + p, .page .sec[data-f="280:2"] > .side-card + p + p + p + p + p + p { background: #f6f5ec; border: 1px solid var(--hair); border-block: 0; padding: 4px 22px 0; } .page .sec[data-f="280:2"] > .side-card + p + p + p, .page .sec[data-f="280:2"] > .side-card + p + p + p + p + p { padding-top: 16px; } /* FREQUENCY, TERMS */ .page .sec[data-f="280:2"] > .side-card + p { padding-top: 0; } /* GOOD FOR */ .page .sec[data-f="280:2"] > .side-card + p + p + p + p + p + p { padding-bottom: 94px; /* 22 + the 48px button + 24 */ border-bottom: 1px solid var(--hair); border-radius: 0 0 20px 20px; } .page .sec[data-f="280:2"] > .side-card + p + p + p + p + p + p + .btn { justify-self: start; width: auto; height: 48px; padding: 0 30px; margin: -72px 0 0 22px; /* up into the padded last line */ } .page .sec[data-f="280:2"] > .side-card + p + p + p + p + p + p + .btn + .rule { margin-top: 48px; } /* Free Body Sculpting Consultation: the same edge-cap card, sage border */ .page .sec[data-f="280:2"] > .consult { height: 26px; margin-top: 40px; border-bottom: 0; border-radius: 24px 24px 0 0; } .page .sec[data-f="280:2"] > .consult + p, .page .sec[data-f="280:2"] > .consult + p + h2, .page .sec[data-f="280:2"] > .consult + p + h2 + p { border: 1px solid #c7d3c4; border-block: 0; padding: 0 22px; } .page .sec[data-f="280:2"] > .consult + p + h2 { margin: 0; padding-top: 10px; font-size: 32px; line-height: 1.08; } .page .sec[data-f="280:2"] > .consult + p + h2 + p { padding-top: 12px; padding-bottom: 104px; /* 26 + the 52px button + 26 */ border-bottom: 1px solid #c7d3c4; border-radius: 0 0 24px 24px; } .page .sec[data-f="280:2"] > .consult + p + h2 + p + .btn { justify-self: start; width: auto; max-width: calc(100% - 44px); height: 52px; padding: 0 22px; margin: -78px 0 0 22px; } /* =========================================================================== 07b CEDAR FOR TWO (344:2): the dark photo banner becomes a tall inset card. The photo, js/steam.js's canvas.duo-glass and the wash all stay absolute (inset 0) on the card, so the steamed glass covers the whole photo; the copy and the two buttons stack at the bottom, over a deeper wash. =========================================================================== */ .page .sec[data-f="344:2"] { padding: 24px var(--gut); } .page .sec .duo { position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 700px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(220px, 1fr) repeat(6, auto); padding: 22px 22px 26px; border-radius: 24px; } .page .sec .duo > .a { grid-column: 1; } .page .sec .duo > .a.haze { /* the no-canvas fallback haze */ position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .page .sec .duo-wash { background: linear-gradient(180deg, rgba(10,8,6,.38) 0%, rgba(10,8,6,.06) 16%, rgba(10,8,6,.06) 30%, rgba(10,8,6,.55) 50%, rgba(10,8,6,.82) 70%, rgba(10,8,6,.9) 100%); } .page .sec .duo > [data-f="346:3"] { grid-row: 1; align-self: center; width: 22px; } /* hint: rule + label */ .page .sec .duo > [data-f="346:4"] { grid-row: 1; align-self: center; margin-left: 32px; width: auto; } .page .sec .duo > [data-f="346:11"] { grid-row: 3; } .page .sec .duo > [data-f="346:13"] { grid-row: 4; margin-top: 12px; } .page .sec .duo > [data-f="543:150"] { grid-row: 5; margin-top: 18px; width: auto; } .page .sec .duo > [data-f="543:151"] { grid-row: 6; margin-top: 6px; width: auto; } /* each button is an empty link with its label + arrow laid over it (pe-none) */ .page .sec .duo > [data-f="346:30"], .page .sec .duo > [data-f="346:31"], .page .sec .duo > [data-f="346:32"] { grid-row: 7; margin-top: 24px; } .page .sec .duo > [data-f="346:34"], .page .sec .duo > [data-f="346:35"], .page .sec .duo > [data-f="346:36"] { grid-row: 8; margin-top: 10px; } .page .sec .duo > .btn { justify-self: start; height: 54px; } .page .sec .duo > [data-f="346:31"], .page .sec .duo > [data-f="346:35"] { align-self: center; width: auto; margin-left: calc(25 * var(--u)); } .page .sec .duo > [data-f="346:32"] { align-self: center; margin-left: calc(137 * var(--u)); } .page .sec .duo > [data-f="346:36"] { align-self: center; margin-left: calc(170 * var(--u)); } .page .sec .duo > [data-f="346:31"], .page .sec .duo > [data-f="346:32"] { margin-top: 24px; } .page .sec .duo > [data-f="346:35"], .page .sec .duo > [data-f="346:36"] { margin-top: 10px; } /* =========================================================================== 06 START FROM THE PROBLEM (281:2): six goal cards. Each card is an empty .goal box (photo on top) + sibling texts, so the section is a grid with an explicit 4-row band per card: the box spans the band, the texts sit inside it, and the card's link (.goal-link) spans the whole card (one tap target). Band starts (--g0) are set per card by DOM range; phones 1 column, tablets 2-up (end of file). =========================================================================== */ .page .sec[data-f="281:2"] { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; column-gap: 16px; align-items: start; } .page .sec[data-f="281:2"] > * { grid-column: 1; width: auto; min-width: 0; } .page .sec[data-f="281:2"] > [data-f="281:3"] { grid-row: 1; } .page .sec[data-f="281:2"] > [data-f="281:5"] { grid-row: 2; margin-top: 12px; } .page .sec[data-f="281:2"] > [data-f="322:4"], .page .sec[data-f="281:2"] > [data-f="322:4"] ~ * { --g0: 3; --g1: 4; --g2: 5; --g3: 6; --gs: 30px; } .page .sec[data-f="281:2"] > [data-f="322:2"], .page .sec[data-f="281:2"] > [data-f="322:2"] ~ * { --g0: 7; --g1: 8; --g2: 9; --g3: 10; --gs: 16px; } .page .sec[data-f="281:2"] > [data-f="322:8"], .page .sec[data-f="281:2"] > [data-f="322:8"] ~ * { --g0: 11; --g1: 12; --g2: 13; --g3: 14; } .page .sec[data-f="281:2"] > [data-f="322:6"], .page .sec[data-f="281:2"] > [data-f="322:6"] ~ * { --g0: 15; --g1: 16; --g2: 17; --g3: 18; } .page .sec[data-f="281:2"] > [data-f="388:158"], .page .sec[data-f="281:2"] > [data-f="388:158"] ~ * { --g0: 19; --g1: 20; --g2: 21; --g3: 22; } .page .sec[data-f="281:2"] > [data-f="419:63"], .page .sec[data-f="281:2"] > [data-f="419:63"] ~ * { --g0: 23; --g1: 24; --g2: 25; --g3: 26; } .page .sec[data-f="281:2"] > .goal { grid-row: var(--g0) / span 4; align-self: stretch; height: auto; margin-top: var(--gs); } .page .sec[data-f="281:2"] .goal-img { width: 100%; height: auto; aspect-ratio: 629 / 250; } .page .sec[data-f="281:2"] > .k-clay:not(.pe-none) { /* BODY SCULPTING */ grid-row: var(--g0); margin: calc(var(--gs) + 250 / 629 * 100% + 22px) 22px 0; } .page .sec[data-f="281:2"] > h3 { grid-row: var(--g1); margin: 10px 22px 0; } .page .sec[data-f="281:2"] > h3 + .hl { grid-row: var(--g2); margin: 8px 22px 0; } .page .sec[data-f="281:2"] > .goal-link { /* the whole card is the link */ grid-row: var(--g0) / span 4; align-self: stretch; height: auto; margin-top: var(--gs); border: 0; border-radius: 20px; z-index: 1; } .page .sec[data-f="281:2"] > .goal-link:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; } .page .sec[data-f="281:2"] > p.pe-none { grid-row: var(--g3); justify-self: start; width: auto; margin: 16px 56px 24px 22px; z-index: 2; text-decoration: underline 1px var(--clay); text-underline-offset: 5px; } .page .sec[data-f="281:2"] > img.pe-none { grid-row: var(--g3); justify-self: end; align-self: start; margin: 20px 22px 0 0; z-index: 2; } .page .sec[data-f="281:2"] > [data-f="281:43"] { grid-row: 27; margin: 32px 0 0; } /* =========================================================================== 07 RESULTS BUILD OVER TIME (281:44): three .pack cards, stacked. Same explicit-band grid: the empty .pack box spans its card's rows, the texts sit in it; the dot images become ::before bullets. =========================================================================== */ .page .sec[data-f="281:44"] { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; align-items: start; } .page .sec[data-f="281:44"] > * { grid-column: 1; width: auto; min-width: 0; } .page .sec[data-f="281:44"] > img { display: none; } .page .sec[data-f="281:44"] > [data-f="281:47"] { grid-row: 1; } .page .sec[data-f="281:44"] > [data-f="281:48"] { grid-row: 2; margin-top: 12px; } .page .sec[data-f="281:44"] > [data-f="281:49"] { grid-row: 3; margin-top: 14px; } /* card 1: rows 4-12, card 2: 13-22, card 3: 23-31 */ .page .sec[data-f="281:44"] > [data-f="281:52"] { grid-row: 4 / span 9; } .page .sec[data-f="281:44"] > [data-f="281:75"] { grid-row: 13 / span 10; } .page .sec[data-f="281:44"] > [data-f="281:101"] { grid-row: 23 / span 9; } .page .sec[data-f="281:44"] > [data-f="281:53"] { grid-row: 4; } .page .sec[data-f="281:44"] > [data-f="281:55"] { grid-row: 5; } .page .sec[data-f="281:44"] > [data-f="281:57"] { grid-row: 6; } .page .sec[data-f="281:44"] > [data-f="281:59"] { grid-row: 7; } .page .sec[data-f="281:44"] > [data-f="281:61/rule"] { grid-row: 8; } .page .sec[data-f="281:44"] > [data-f="281:64"] { grid-row: 9; } .page .sec[data-f="281:44"] > [data-f="281:67"] { grid-row: 10; } .page .sec[data-f="281:44"] > [data-f="281:70"] { grid-row: 11; } .page .sec[data-f="281:44"] > [data-f="281:73"] { grid-row: 12; } .page .sec[data-f="281:44"] > [data-f="281:76"] { grid-row: 13; } .page .sec[data-f="281:44"] > [data-f="281:78"] { grid-row: 14; } .page .sec[data-f="281:44"] > [data-f="281:80"] { grid-row: 15; } .page .sec[data-f="281:44"] > [data-f="281:82"] { grid-row: 16; } .page .sec[data-f="281:44"] > [data-f="281:84/rule"] { grid-row: 17; } .page .sec[data-f="281:44"] > [data-f="281:87"] { grid-row: 18; } .page .sec[data-f="281:44"] > [data-f="281:90"] { grid-row: 19; } .page .sec[data-f="281:44"] > [data-f="281:93"] { grid-row: 20; } .page .sec[data-f="281:44"] > [data-f="281:96"] { grid-row: 21; } .page .sec[data-f="281:44"] > [data-f="281:99"] { grid-row: 22; } .page .sec[data-f="281:44"] > [data-f="281:102"] { grid-row: 23; } .page .sec[data-f="281:44"] > [data-f="281:104"] { grid-row: 24; } .page .sec[data-f="281:44"] > [data-f="281:106"] { grid-row: 25; } .page .sec[data-f="281:44"] > [data-f="281:108"] { grid-row: 26; } .page .sec[data-f="281:44"] > [data-f="281:110/rule"] { grid-row: 27; } .page .sec[data-f="281:44"] > [data-f="281:113"] { grid-row: 28; } .page .sec[data-f="281:44"] > [data-f="281:116"] { grid-row: 29; } .page .sec[data-f="281:44"] > [data-f="281:119"] { grid-row: 30; } .page .sec[data-f="281:44"] > [data-f="281:122"] { grid-row: 31; } .page .sec[data-f="281:44"] > .pack { align-self: stretch; height: auto; margin-top: 16px; } .page .sec[data-f="281:44"] > [data-f="281:52"] { margin-top: 34px; } .page .sec[data-f="281:44"] > .c { justify-self: center; margin-inline: 24px; } .page .sec[data-f="281:44"] > .pack + .c { margin-top: 46px; } /* 16 gap + 30 inside */ .page .sec[data-f="281:44"] > [data-f="281:53"] { margin-top: 64px; } /* 34 + 30 */ .page .sec[data-f="281:44"] > h3 { margin-top: 8px; } .page .sec[data-f="281:44"] > h3 + .c { margin-top: 10px; } /* the price */ .page .sec[data-f="281:44"] > h3 + .c + .c { margin-top: 6px; } .page .sec[data-f="281:44"] > .rule { width: auto; margin: 22px 28px 6px; } .page .sec[data-f="281:44"] > img + p { margin: 10px 28px 0; padding-left: 17px; } .page .sec[data-f="281:44"] > img + p::before { content: ""; position: absolute; left: 0; top: calc(var(--lh) / var(--fs) * 0.5em - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: #97a596; } .page .sec[data-f="281:44"] > [src*="dot-clay"] + p::before { background: var(--clay); } .page .sec[data-f="281:44"] > .btn { justify-self: center; width: auto; min-width: 120px; padding: 0 30px; margin: 28px 0 30px; height: 52px; } /* =========================================================================== 08 NO SURPRISES ON THE DAY (282:2): numbered ring beside each heading =========================================================================== */ .page .sec[data-f="282:2"] { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: start; } .page .sec[data-f="282:2"] > * { grid-column: 1 / -1; width: auto; min-width: 0; } .page .sec[data-f="282:2"] > h2 { margin-top: 12px; } .page .sec[data-f="282:2"] > .ring44 { grid-column: 1; width: 44px; height: 44px; margin-top: 30px; } .page .sec[data-f="282:2"] > .ring44 + h3 { grid-column: 2; align-self: center; margin-top: 30px; } .page .sec[data-f="282:2"] > h3 + p { grid-column: 2; margin-top: 6px; } /* =========================================================================== 09 QUESTIONS (282:29): the accordion takes the column (same as Book's) =========================================================================== */ .page .sec[data-f="282:29"] { min-height: 0; } .page .sec[data-f="282:29"] > [data-f="282:32"] { margin-bottom: 0; } .page .sec[data-f="282:29"] .faq { width: 100%; margin: 18px 0 0; } .page .sec[data-f="282:29"] .faq-h { text-wrap: pretty; } .page .sec[data-f="282:29"] .faq-item:first-child { border-top: 1px solid var(--hair); } .page .sec[data-f="282:29"] .faq-q { gap: 20px; padding: 22px 0 21px; font-size: 22px; line-height: 28px; letter-spacing: -0.3px; } .page .sec[data-f="282:29"] .faq-item.is-open .faq-q { padding-bottom: 12px; } .page .sec[data-f="282:29"] .faq-q span { max-width: none; min-width: 0; } .page .sec[data-f="282:29"] .faq-ic { width: 14px; height: 28px; margin-right: 4px; } .page .sec[data-f="282:29"] .faq-a-in p { max-width: 560px; font-size: 15.5px; line-height: 27px; } .page .sec[data-f="282:29"] .faq-a-in p + p { margin-top: 12px; } .page .sec[data-f="282:29"] .faq-a-in p:last-child { margin-bottom: 24px; } /* =========================================================================== TABLETS (600-1079): the goal cards go 2-up, the Cedar for two buttons share a row =========================================================================== */ @media (min-width: 600px) { .page .sec[data-f="281:2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page .sec[data-f="281:2"] > [data-f="281:3"], .page .sec[data-f="281:2"] > [data-f="281:5"] { grid-column: 1 / -1; } .page .sec[data-f="281:2"] > [data-f="322:2"], .page .sec[data-f="281:2"] > [data-f="322:2"] ~ * { --g0: 3; --g1: 4; --g2: 5; --g3: 6; --gs: 30px; grid-column: 2; } .page .sec[data-f="281:2"] > [data-f="322:8"], .page .sec[data-f="281:2"] > [data-f="322:8"] ~ * { --g0: 7; --g1: 8; --g2: 9; --g3: 10; --gs: 16px; grid-column: 1; } .page .sec[data-f="281:2"] > [data-f="322:6"], .page .sec[data-f="281:2"] > [data-f="322:6"] ~ * { --g0: 7; --g1: 8; --g2: 9; --g3: 10; grid-column: 2; } .page .sec[data-f="281:2"] > [data-f="388:158"], .page .sec[data-f="281:2"] > [data-f="388:158"] ~ * { --g0: 11; --g1: 12; --g2: 13; --g3: 14; grid-column: 1; } .page .sec[data-f="281:2"] > [data-f="419:63"], .page .sec[data-f="281:2"] > [data-f="419:63"] ~ * { --g0: 11; --g1: 12; --g2: 13; --g3: 14; grid-column: 2; } .page .sec[data-f="281:2"] > [data-f="281:43"] { grid-row: 15; grid-column: 1 / -1; } .page .sec .duo { min-height: 640px; grid-template-rows: auto minmax(200px, 1fr) repeat(5, auto); padding: 28px 32px 34px; } .page .sec .duo > [data-f="346:34"], .page .sec .duo > [data-f="346:35"], .page .sec .duo > [data-f="346:36"] { grid-row: 7; margin-top: 24px; } .page .sec .duo > [data-f="346:34"] { margin-left: calc(191 * var(--u)); } .page .sec .duo > [data-f="346:35"] { margin-left: calc(216 * var(--u)); } .page .sec .duo > [data-f="346:36"] { margin-left: calc(361 * var(--u)); } .page .sec[data-f="280:2"] > .ph { aspect-ratio: 16 / 10; } } /* =========================================================================== PHONES (<= 599px) =========================================================================== */ @media (max-width: 599px) { .page .sec[data-f="280:2"] > h3 { font-size: 21px; } .page .sec[data-f="280:2"] > .consult + p + h2 { font-size: 30px; } .page .sec[data-f="344:2"] { padding: 16px 10px; } .page .sec[data-f="282:29"] .faq-q { font-size: 20px; } .page .sec[data-f="281:2"] > [data-f="281:5"], .page .sec[data-f="281:44"] > [data-f="281:48"] { font-size: 36px; } } /* Figma's hard break in "Barrel + 60 or 90 / min": the generator puts a space before the
(invisible on desktop), so the phone column can drop it */ .page .sec [data-f="280:96"] br { display: none; } /* =========================================================================== CLIENT EDITS 2026-10-28 (scripts/build_treatments.py, "CLIENT EDITS" block) =========================================================================== */ /* Cedar Rituals Coming Soon notice: with the group header, above the group photo */ .page .sec[data-f="280:2"] > [data-f="280:84/soon"] { order: 30; margin-top: 26px; } /* Massage + Cedar side cards lost their Frequency line: Terms (4th line) is now the last one (same specificity as the 6-line chain above, plus the node id) */ .page .sec[data-f="280:2"] > .side-card + p + p + p + p[data-f="543:80"], .page .sec[data-f="280:2"] > .side-card + p + p + p + p[data-f="543:110"] { padding-bottom: 94px; /* 22 + the 48px button + 24 */ border-bottom: 1px solid var(--hair); border-radius: 0 0 20px 20px; } .page .sec[data-f="280:2"] > .side-card + p + p + p + p + .btn { justify-self: start; width: auto; min-width: 0; height: 48px; padding: 0 30px; margin: -72px 0 0 22px; /* up into the padded last line */ } .page .sec[data-f="280:2"] > .side-card + p + p + p + p + .btn + .rule { margin-top: 48px; } /* Siberian Spa Experience stages: time set right (px here, --u is tiny on phones) */ .page .tr-stage-t { margin-left: 12px; font-size: 13.5px; letter-spacing: 0.5px; } /* sub-blocks under a panel: "Add to Siberian Spa Experience", "Face programs", "Add to your face treatment" (label, optional note, rows in the row style) */ .page .sec[data-f="280:2"] > .up.k-clay[data-f="280:2/spa-add"], .page .sec[data-f="280:2"] > .up.k-clay[data-f="280:2/progs"] { margin-top: 44px; } .page .sec[data-f="280:2"] > [data-f="280:2/progs/note"], .page .sec[data-f="280:2"] > [data-f="419:47/note"] { margin-top: 10px; } /* Cedar for two: three price lines + the member note, then the two buttons */ .page .sec .duo { grid-template-rows: auto minmax(220px, 1fr) repeat(8, auto); } .page .sec .duo > [data-f="543:150"], .page .sec .duo > [data-f="543:151"], .page .sec .duo > [data-f="344:3/line3"] { white-space: normal; } .page .sec .duo > [data-f="344:3/line3"] { grid-row: 7; margin-top: 6px; width: auto; } .page .sec .duo > [data-f="344:3/note"] { grid-row: 8; margin-top: 12px; width: auto; } .page .sec .duo > [data-f="346:30"] { grid-row: 9; margin-top: 24px; min-width: 179px; } .page .sec .duo > [data-f="346:34"], .page .sec .duo > [data-f="346:35"], .page .sec .duo > [data-f="346:36"] { grid-row: 10; } @media (min-width: 600px) { .page .sec .duo { grid-template-rows: auto minmax(200px, 1fr) repeat(7, auto); } .page .sec .duo > [data-f="346:34"], .page .sec .duo > [data-f="346:35"], .page .sec .duo > [data-f="346:36"] { grid-row: 9; } }