/* * Stylist Solo components: the Stylist (GlowSkin) layout on legwork-base. * Values are Stylist's exact ones (design/stylist-reference/NOTES.md and the * bridge specs 02–04); deviations are commented with the reason. * * Mobile-first: base = ≤767, then 768 (tablet), 1025 (laptop), 1367 (desktop). * Hover only inside (hover: hover) and (pointer: fine); focus-visible always. */ /* ------------------------------------------------------------------ base */ @layer components { body { background: var(--sts-white); color: var(--sts-text); font-family: var(--sts-font-text); font-size: var(--sts-body); line-height: 2em; /* kit "Text" preset (Elementor inherits the computed px) */ letter-spacing: 0.4px; -webkit-font-smoothing: auto; } a { color: inherit; } h1, h2, h3, h4, h5, h6 { margin: 15px 0; /* Kava theme default under Elementor */ color: var(--sts-black); text-wrap: wrap; /* Stylist doesn't balance headings */ } h1 { font: 500 var(--sts-h1)/1.3em var(--sts-font-display); letter-spacing: -1px; } h2 { font: 500 var(--sts-h2)/1.2em var(--sts-font-display); letter-spacing: 0.2px; } h3 { font: 400 var(--sts-h3)/1.2em var(--sts-font-display); letter-spacing: 0; } h4 { font: 600 var(--sts-h4)/1.3em var(--sts-font-text); letter-spacing: 0.3px; } h5 { font: 600 var(--sts-h5)/1.3em var(--sts-font-text); letter-spacing: 0.5px; } h6 { font: 400 var(--sts-h6)/1.7em var(--sts-font-text); letter-spacing: 0.5px; } :focus-visible { outline: 2px solid var(--sts-accent); outline-offset: 3px; } /* Entrance fades (Elementor fadeIn, 1.25s ease, per-element delay --d). Luca 2026-10-09: match Stylist, hero included. Hidden only with JS; reduced motion shows everything at once. */ html.js .sts-reveal { opacity: 0; } html.js .sts-reveal.is-in { animation: sts-fade-in var(--sts-fade-duration) var(--sts-ease) var(--d, 0ms) both; } @keyframes sts-fade-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html.js .sts-reveal { opacity: 1; animation: none; } } } /* ---------------------------------------------------------------- button */ @layer components { /* Kit button + Stylist's custom CSS (overlay fades in over 1s, shrink 0.3s). Colours: fixed for contrast (brand.css --sts-btn-*). */ .sts-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-block; text-align: center; vertical-align: baseline; padding: 15px 36px; border: 0; border-radius: 15px; font: 500 var(--sts-button)/1 var(--sts-font-button); letter-spacing: 0.5px; text-transform: capitalize; text-decoration: none; color: var(--sts-white); background-image: linear-gradient(115deg, var(--sts-btn-deep) 0%, var(--sts-btn-light) 100%); transition: transform 0.3s var(--sts-ease); } .sts-btn__label { position: relative; z-index: 1; } .sts-btn-wrap { text-align: center; } .sts-btn::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background-image: linear-gradient(215deg, var(--sts-btn-deep) 0%, var(--sts-btn-light) 100%); opacity: 0; transition: opacity 1s var(--sts-ease); } .sts-btn:focus-visible::after { opacity: 1; } .sts-btn:is(.sts-btn--header, .sts-btn--hero):active { transform: scale(0.9); } .sts-btn--header { padding: 13px 32px; background-image: linear-gradient(136deg, var(--sts-btn-light) 0%, var(--sts-btn-deep) 100%); } .sts-btn--hero { padding: 15px 35px 15px 34px; background-image: linear-gradient(260deg, var(--sts-btn-light) 0%, var(--sts-btn-deep) 100%); } @media (hover: hover) and (pointer: fine) { .sts-btn:hover::after { opacity: 1; } .sts-btn:is(.sts-btn--header, .sts-btn--hero):hover { transform: scale(0.9); } .sts-btn--header:hover { background-image: linear-gradient(88deg, var(--sts-btn-deep) 0%, var(--sts-btn-light) 100%); } .sts-btn--hero:hover { background-image: linear-gradient(215deg, var(--sts-btn-deep) 0%, var(--sts-btn-light) 100%); } } } /* ---------------------------------------------------------------- header */ @layer components { /* Height and overlap measured on Stylist (1280px: header 104px). The header pulls the page up by min(overlap, own height), so the first section starts under it at the top of the page. (Kava's #content added a 30px margin above and below; copied here it showed as a white strip over the hero and above the footer, so .sts-main has none: Luca, 2026-10-26.) */ .sts-header { position: relative; z-index: 10; min-height: 90px; /* kit tablet/mobile min-height (border-box) */ padding: 15px 0; margin-bottom: calc(-1 * var(--sts-header-overlap)); border-bottom: 1px solid var(--sts-border); background: transparent; } .sts-header__inner { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; } .sts-header__inner > * { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 10px; } .sts-main { margin-block: 0; } .sts-header__logo { flex: 0 1 51%; } .sts-header__nav { flex: 0 1 44%; margin-right: -20px; align-items: flex-end; } .sts-header__cta { display: none; } .sts-logo { display: block; } .sts-logo__img { display: block; width: 100%; height: auto; } .sts-logo__name { font: 500 var(--sts-h4)/1.2 var(--sts-font-display); color: var(--sts-black); } /* Hamburger (Jeg jki-burger-menu-light): 67px wide, 30px icon. */ .sts-burger { display: inline-grid; place-items: center; width: 67px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--sts-secondary); } .sts-burger .lw-icon { width: 30px; height: 30px; } /* 67×30 as on Stylist; the hit area grows to 44px tall without moving anything (mobile-native). */ .sts-burger { position: relative; } .sts-burger::before { content: ""; position: absolute; inset: -7px 0; } /* Desktop list: hidden until laptop. Without JS (no drawer) it shows, wrapped. */ .sts-nav__list--bar { display: none; } html:not(.js) .sts-burger { display: none; } html:not(.js) .sts-nav__list--bar { display: flex; flex-wrap: wrap; justify-content: flex-end; } .sts-nav__list { margin: 0; padding: 0; list-style: none; } .sts-nav__link { display: flex; align-items: center; height: 100%; padding: 0 20px; border: 0; background: transparent; font: 500 var(--sts-menu)/1 var(--sts-font-text); letter-spacing: 1.5px; color: var(--sts-secondary); text-decoration: none; transition: all 0.4s var(--sts-ease); } @media (min-width: 768px) { .sts-header { padding: 15px 0 12px; } .sts-header__logo { flex-basis: 35%; } .sts-header__logo .sts-logo__img { width: 79%; } .sts-header__nav { flex-basis: 75%; margin-right: 0; } .sts-header__inner { flex-wrap: nowrap; } } @media (min-width: 1025px) { .sts-header__inner { min-height: 76px; } .sts-header__logo { flex-basis: 21%; } .sts-header__logo .sts-logo__img { width: 100%; } .sts-header__nav { flex-basis: 62%; align-items: stretch; } .sts-header__cta { display: flex; flex: 0 1 19%; align-items: center; justify-content: flex-start; } .sts-burger { display: none; } .sts-nav__list--bar { display: flex; justify-content: center; height: 40px; } html:not(.js) .sts-nav__list--bar { flex-wrap: nowrap; justify-content: center; } } @media (min-width: 1367px) { .sts-header__logo { flex-basis: 19%; } .sts-header__cta { flex-basis: 19.664%; } .sts-nav__list--bar { height: 45px; } } /* Submenu (desktop): fades in on hover over 0.4s; also opens on focus and on click (touch laptops/tablets in landscape) via aria-expanded. */ .sts-nav__list--bar > .sts-nav__item { position: relative; } .sts-nav__list--bar .sts-nav__sub { position: absolute; top: 100%; z-index: 1000; min-width: 220px; margin: 7px; padding: 15px 10px; list-style: none; background: var(--sts-white); border: 1px solid var(--sts-border); border-radius: 10px; box-shadow: 5px 9px 15px 5px rgba(170, 170, 170, 0.08); opacity: 0; visibility: hidden; transition: all 0.4s var(--sts-ease); } .sts-nav__list--bar .sts-nav__item:focus-within > .sts-nav__sub, .sts-nav__list--bar .sts-nav__toggle[aria-expanded="true"] + .sts-nav__sub { opacity: 1; visibility: visible; } .sts-nav__sublink { display: block; padding: 10px 20px; border-radius: 10px; font: 400 15px/1.8em var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-black); text-decoration: none; transition: all 0.4s var(--sts-ease); } @media (hover: hover) and (pointer: fine) { .sts-nav__link:hover { color: var(--sts-accent); } .sts-nav__list--bar .sts-nav__item:hover > .sts-nav__sub { opacity: 1; visibility: visible; } .sts-nav__list--bar .sts-nav__sublink:hover { background: var(--sts-accent); color: var(--sts-white); } } .sts-nav__toggle { cursor: pointer; } /* Drawer (≤1024): slides in from the left over 0.6s with Jeg's curve. */ .sts-drawer { position: fixed; inset: 0 auto 0 0; margin: 0; width: 100%; max-width: 360px; height: 100dvh; max-height: none; padding: 10px 0; border: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--sts-cream); color: var(--sts-secondary); transform: translateX(-110%); transition: transform 0.6s var(--sts-ease-panel), overlay 0.6s allow-discrete, display 0.6s allow-discrete; } .sts-drawer[open] { display: flex; flex-direction: column; transform: none; } @starting-style { .sts-drawer[open] { transform: translateX(-110%); } } .sts-drawer::backdrop { background: transparent; } body.admin-bar .sts-drawer { top: 46px; height: calc(100dvh - 46px); } @media (min-width: 783px) { body.admin-bar .sts-drawer { top: 32px; height: calc(100dvh - 32px); } } .sts-drawer__identity { display: flex; align-items: center; justify-content: space-between; } .sts-drawer__logo { display: block; max-width: 150px; margin: 5px 0; padding: 5px; } .sts-drawer__logo img { width: 100%; height: auto; object-fit: cover; } .sts-drawer__close { display: inline-grid; place-items: center; width: 45px; margin: 12px; padding: 8px; border: 0; border-radius: 3px; background: var(--sts-white); color: var(--sts-secondary); } .sts-drawer__close .lw-icon { width: 21px; height: 21px; } .sts-nav__list--drawer .sts-nav__link { display: block; width: 100%; height: auto; padding: 15px 15px 15px 30px; text-align: start; line-height: 1.3; } .sts-nav__list--drawer .sts-nav__link[aria-current="page"] { color: var(--sts-black); } .sts-nav__list--drawer .sts-nav__sub { display: none; margin: 0; padding: 0; list-style: none; } .sts-nav__list--drawer .sts-nav__toggle[aria-expanded="true"] + .sts-nav__sub { display: block; } .sts-nav__list--drawer .sts-nav__sublink { padding: 12px 15px 12px 45px; border-radius: 0; } @media (min-width: 768px) { .sts-drawer__logo { max-width: 155px; } } @media (hover: hover) and (pointer: fine) { .sts-drawer__close:hover { color: #000913; } .sts-nav__list--drawer .sts-nav__sublink:hover { background: transparent; color: var(--sts-accent); } } } /* ------------------------------------------------------------ Home 1 hero */ @layer components { .sts-hero { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: calc(8 * var(--sts-body)) 0 calc(3 * var(--sts-body)); background: var(--sts-white) var(--sts-img-page, url("../img/hero-bg-mobile.jpg")) top left / cover no-repeat; } /* Hard stop: top 62% shows the photo, bottom 38% is solid peach. */ .sts-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(180deg, #FFFFFF00 62%, var(--sts-peach) 0%); } .sts-hero__col { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; } .sts-hero__col--a, .sts-hero__col--b, .sts-hero__col--e { display: none; } .sts-hero__col--b, .sts-hero__col--d { gap: 15px; padding: 10px; } /* measured: Elementor's default 10px */ .sts-hero__col--c { flex: 0 1 100%; gap: 20px; padding: 10px; margin: -15px 0; } .sts-hero__col--d { flex: 0 1 100%; flex-direction: row; flex-wrap: nowrap; } .sts-hero__col--d > * { flex: 1 1 0; } .sts-tile { width: 100%; border-radius: 15px; overflow: hidden; } .sts-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .sts-tile--centre, .sts-tile--edge-left, .sts-tile--edge-right { height: 40vh; } .sts-tile--tall { height: 20vh; } .sts-tile--short { height: 20vh; } .sts-tile--edge-left { border-radius: 0 15px 15px 1px; } .sts-tile--edge-right { border-radius: 15px 0 0 15px; } .sts-hero__mark { align-self: center; width: 10%; height: auto; margin-bottom: -20px; } .sts-hero__heading { position: relative; z-index: 3; align-self: center; width: 80%; text-align: center; } .sts-hero__title { margin: 15px 0 0; } .sts-hero__subtitle { margin: 0; font: 400 var(--sts-body)/2em var(--sts-font-text); letter-spacing: 0.4px; color: var(--sts-secondary); } /* Elementor button widget: an inline-block inside a line box (body line-height), which adds ~12px under the button on Stylist; the wrapper reproduces it. */ .sts-hero__cta { margin: 10px 0 15px; text-align: center; } @media (min-width: 768px) { .sts-hero { flex-wrap: nowrap; padding-top: calc(10 * var(--sts-body)); background-image: var(--sts-img-hero, url("../img/hero-bg.jpg")); background-position: center left; } .sts-hero__col--a, .sts-hero__col--b, .sts-hero__col--e { display: flex; } .sts-hero__col--a, .sts-hero__col--e { flex: 0 1 8%; } .sts-hero__col--b, .sts-hero__col--d { flex: 0 1 22%; flex-direction: column; } .sts-hero__col--d > * { flex: none; } .sts-hero__col--c { flex: 0 1 40%; margin: 0; } .sts-tile--tall { height: 30vh; } /* Stylist quirk (measured): Elementor fixes the widget at 100% width, so the kit's "0 -85px" margins don't widen it; they shift the heading 85px left of centre (-80px at laptop) until the ≥1200 override. */ .sts-hero__heading { width: 100%; align-self: auto; margin: 0 0 0 -85px; } } @media (min-width: 1025px) { .sts-hero { background-position: center center; } .sts-tile--tall { height: 35vh; } .sts-hero__heading { margin: 0 0 0 -80px; } } /* Stylist custom CSS (59f39fd8): at ≥1200px the H1 sits on one line. */ /* Edit-safe (2026-10-14): the title sizes to its own text and stays centred even when wider than its column (overflowing equally both sides); one wider than the screen wraps, balanced, instead of running off to the right. */ @media (min-width: 1200px) { .sts-hero__heading { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; } .sts-hero__title { width: max-content; max-width: calc(100vw - 40px); text-wrap: balance; } } @media (min-width: 1367px) { .sts-hero__mark { width: 6%; margin-bottom: -15px; } } } /* ------------------------------------------------ Home 2 + 3 service cards */ @layer components { /* overflow-x clip: the right column's badges overhang the card by design and would scroll the page sideways by ~1px at 320px. */ .sts-cards { padding: 0 0 calc(5 * var(--sts-body)); overflow-x: clip; } .sts-cards--first { padding: calc(3 * var(--sts-body)) 0 var(--sts-body); background: linear-gradient(180deg, var(--sts-peach) 35%, var(--sts-white) 0%); } .sts-cards__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 95%; margin-inline: auto; } .sts-card { position: relative; flex: 0 1 48%; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 15px; overflow: hidden; /* Frame = the photo's exact box, clipped, so the photo can be zoomed/rotated inside it (Web Edit framing). */ } .sts-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 15px; } .sts-card__spacer { height: 27vh; } .sts-card__bar { position: relative; display: flex; justify-content: space-between; gap: 0; padding: 20px; border-radius: 0 0 15px 15px; background-image: linear-gradient(102deg, #F59F758F 0%, #E29463D1 100%); } .sts-card__bar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--sts-img-texture, url("../img/card-texture.png")); opacity: 0.85; } .sts-card__title { position: relative; z-index: 1; flex: 0 1 90%; min-width: 0; margin: 0; padding: 0; font: 600 var(--sts-h5)/1.3 var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-secondary); overflow-wrap: break-word; hyphens: auto; /* launch check: "Extensions" spilled the bar at 320 */ } .sts-card__title a { color: inherit; text-decoration: none; } /* A card with a link (or Book) is clickable all over: site.js forwards the click to the title's link. Not a stretched a::after: that needs the bar unpositioned, and the bar's texture layer then covered the whole photo (the "grey" cards, 2026-10-22). */ .sts-card--link { cursor: pointer; } /* Badge: Elementor social-icons widget = a 10% slot pulled up 35px and left 17px (mobile 20px); the 40px box overflows it to the right. */ .sts-card__badge { position: relative; z-index: 2; flex: 0 1 10%; min-width: 0; margin: -35px 0 0 -20px; } .sts-card__badge-box { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 5px; background: var(--sts-white); color: var(--sts-black); transition: all 0.3s var(--sts-ease); } .sts-card__badge .lw-icon { width: 20px; height: 20px; } @media (min-width: 768px) { .sts-cards--first { padding: calc(5 * var(--sts-body)) 0 var(--sts-body); } .sts-cards__inner { width: min(100%, 980px); gap: 20px; } .sts-card { flex-basis: 47%; } .sts-card__bar { gap: 20px; } .sts-card__badge { margin-left: -17px; } } @media (min-width: 1025px) { .sts-cards__inner { flex-wrap: nowrap; } .sts-card { flex-basis: 25%; } } @media (min-width: 1367px) { .sts-cards__inner { width: min(100%, var(--sts-boxed)); justify-content: flex-start; } } @media (hover: hover) and (pointer: fine) { .sts-card { transition: transform 0.5s var(--sts-ease), box-shadow 0.5s var(--sts-ease); } .sts-card:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(153, 90, 50, 0.14); } .sts-card__badge-box:hover { background: var(--sts-accent); color: var(--sts-white); opacity: 0.9; } } .sts-card--link:focus-within { outline: 2px solid var(--sts-accent); outline-offset: 3px; } } /* --------------------------------------------------------- eyebrow label */ @layer components { /* Jeg icon box, icon left: 38px mark in a 38×45 slot, 15px gap, label 12px down. */ .sts-eyebrow { display: flex; align-items: flex-start; gap: 15px; margin: 0; } .sts-eyebrow__mark { flex: none; width: 38px; height: 38px; margin-bottom: 7px; } .sts-eyebrow__text { margin-top: 12px; font: 400 var(--sts-eyebrow)/1.4em var(--sts-font-eyebrow); letter-spacing: 1px; text-transform: uppercase; color: var(--sts-black); } } /* ------------------------------------------------- Home 4 why choose us */ @layer components { .sts-why { padding: 0 0 calc(3 * var(--sts-body)); background: var(--sts-img-leaves, url("../img/leaves-corner.jpg")) 0% 100% / 60% auto no-repeat; } .sts-why__inner { display: flex; flex-direction: column; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; } .sts-why__intro { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; padding: 10px; text-align: center; } .sts-why__title { margin: 0; font: 500 var(--sts-h2)/1.2em var(--sts-font-display); letter-spacing: 0.2px; color: var(--sts-secondary); } .sts-why__grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; padding: 10px; } .sts-why__cell { flex: 0 0 100%; min-width: 0; padding: 10px; } /* min-width 0: long titles mustn't force a wrap (2 per row from tablet, as Stylist) */ .sts-feature { display: flex; flex-direction: column; /* no margin collapse, as in Jeg's box */ height: 100%; padding: 30px 20px 35px; background: var(--sts-white); border: 0.8px solid var(--sts-peach); border-radius: 15px; text-align: center; transition: transform 0.45s var(--sts-ease), border-color 0.4s var(--sts-ease); } /* Jeg icon slot (kit 65×40, 13px margin) measures 46px on Stylist; the 65px image spills below it. Measured: title top = icon top + 84px. */ .sts-feature__icon { height: 46px; margin-bottom: 13px; } .sts-feature__icon img { width: 65px; height: 65px; margin-inline: auto; } .sts-feature__title { margin: 25px 0 10px; font: 500 var(--sts-f23)/1.3em var(--sts-font-display); letter-spacing: -0.5px; color: var(--sts-secondary); overflow-wrap: break-word; hyphens: auto; /* launch check: "Personalized" spilled the 109px column at 768 */ transition: color 0.45s var(--sts-ease); } .sts-feature__text { margin: 0; font: 400 14px/1.7em var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-text); } @media (min-width: 768px) { .sts-why { padding: calc(3 * var(--sts-body)) 0 calc(5 * var(--sts-body)); background-size: 35% auto; } .sts-why__inner { flex-direction: row; } .sts-why__intro, .sts-why__grid { flex: 0 0 50%; } .sts-why__intro { align-items: stretch; text-align: start; } .sts-why__grid { align-content: flex-start; } .sts-why__cell { flex-basis: 48%; } } @media (hover: hover) and (pointer: fine) { .sts-feature:hover { transform: translateY(-8px); border-color: #EE8F1D; } .sts-feature:hover .sts-feature__title { color: var(--sts-accent); } } } /* ---------------------------------------------------- Home 5 testimonials */ @layer components { .sts-reviews { padding: calc(5 * var(--sts-body)) 0 0; background: linear-gradient(180deg, var(--sts-peach) 60%, transparent 0%); overflow-x: clip; /* the desktop carousel bleeds 100px each side */ } .sts-reviews__intro { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; padding: 10px; } .sts-reviews__intro > * { flex: 1 1 0; min-width: 0; padding: 10px; } .sts-reviews__lead { display: flex; flex-direction: column; gap: 20px; } /* Stylist: this heading has no typography of its own, so Elementor's default heading rule gives it the H1 preset (measured). */ .sts-reviews__title { margin: 0; font: 500 var(--sts-h1)/1.3em var(--sts-font-display); letter-spacing: -1px; color: var(--sts-black); } .sts-reviews__text { display: flex; flex-direction: column; justify-content: center; } .sts-reviews__text p { margin: 0 0 1em; color: var(--sts-secondary); } /* Kava p margin */ .sts-carousel { width: 95%; margin: 20px auto 0; } .sts-carousel__track { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .sts-carousel__track::-webkit-scrollbar { display: none; } .sts-carousel__item { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; } .sts-carousel.is-dragging .sts-carousel__track { scroll-snap-type: none; cursor: grabbing; } /* Card (Jeg style-3 + kit overrides): photo, then stars/quote/name/role. Centred and stacked below 1025px; at laptop+ the text column is lifted beside the photo with Stylist's own negative margin. */ .sts-review { margin: 0; padding: 0 20px; background: var(--sts-white); border: 2px solid var(--sts-peach); border-radius: 15px; text-align: center; } .sts-review__photo { margin-bottom: 20px; } /* Inline image on a text line (as Stylist): the line adds ~12px under it, which the stars' negative margin below is measured against. */ .sts-review__frame { display: inline-block; vertical-align: baseline; overflow: hidden; width: 170px; margin: 20px 0 0; border-radius: 15px; } /* Frame = the photo's exact box, clipped, so the photo can be zoomed/rotated inside it (Web Edit framing). */ .sts-review__frame img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } .sts-review__stars { display: flex; justify-content: center; gap: 5px; height: calc(2 * var(--sts-body)); /* one body line, as each star li */ margin: 0 0 10px; color: var(--sts-accent); } .sts-review__stars .lw-icon { width: 17px; height: 17px; align-self: center; } .sts-review__quote { margin: 0; } .sts-review__quote p { margin: 0; padding-bottom: 20px; font: italic 400 var(--sts-quote)/1.8em var(--sts-font-display); letter-spacing: 0.3px; color: var(--sts-secondary); } .sts-review__name { display: block; font: 600 var(--sts-h5)/1.3 var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-accent); } .sts-review__role { display: block; margin-bottom: 25px; font: 400 var(--sts-f14)/1.5em var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-text); } @media (min-width: 768px) { .sts-reviews__intro { flex-direction: row; } .sts-carousel { width: 97%; } .sts-carousel__item { flex-basis: calc((100% - 10px) / 2); } .sts-review__frame { width: 130px; } .sts-review__role { line-height: 1em; } } @media (min-width: 1025px) { .sts-carousel { margin-top: 20px; } .sts-carousel__track { gap: 35px; } .sts-carousel__item { flex-basis: calc((100% - 35px) / 2); } .sts-review { padding: 20px 40px 60px 0; text-align: start; } .sts-review__frame { width: 175px; margin-left: 20px; } .sts-review__stars { justify-content: flex-start; margin: -220px 0 10px 230px; } .sts-review__quote p, .sts-review__name, .sts-review__role { margin-left: 230px; } .sts-review__role { margin-bottom: 30px; } } @media (min-width: 1367px) { .sts-reviews__intro { padding-inline: 0; } .sts-carousel { width: auto; max-width: none; margin: 70px calc(50% - var(--sts-boxed) / 2 - 90px) 0; /* 20px gap + Stylist 50px */ } .sts-review__frame { width: 230px; } .sts-review__stars { margin: -275px 0 10px 285px; } .sts-review__stars .lw-icon { width: 20px; height: 20px; } .sts-review__quote p, .sts-review__name, .sts-review__role { margin-left: 285px; } .sts-review__role { margin-bottom: 0; } } } /* ------------------------------------------------------- Home 6 logos */ @layer components { .sts-logos { padding: calc(2 * var(--sts-body)) 0; } .sts-logos__track { display: flex; gap: 15px; margin: 0; padding: 0 0 12px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .sts-logos__track::-webkit-scrollbar { display: none; } .sts-logos__item { flex: 0 0 calc((100% - 15px) / 2); padding: 0 10px; scroll-snap-align: start; } .sts-logos__item img { display: block; width: 100%; height: auto; } @media (min-width: 768px) { .sts-logos__track { gap: 30px; } .sts-logos__item { flex-basis: calc((100% - 3 * 30px) / 4); } } @media (min-width: 1025px) { .sts-logos__item { flex-basis: calc((100% - 4 * 30px) / 5); } } @media (min-width: 1367px) { .sts-logos__item { flex-basis: calc((100% - 5 * 30px) / 6); } } } /* ------------------------------------------------------- Home 7 promos */ @layer components { .sts-promos { display: flex; flex-direction: column; gap: 20px; padding: 10px; } .sts-promo { position: relative; isolation: isolate; overflow: hidden; display: flex; min-height: 367px; border-radius: 15px; /* 400px from tablet up */ } .sts-promo__img { position: absolute; z-index: -1; bottom: 0; height: auto; pointer-events: none; } .sts-promo__body { display: flex; flex-direction: column; gap: 20px; } .sts-promo__label { align-self: center; width: 50%; margin: 0; padding: 4px 0; /* measured: 50% on phones, 45% from tablet */ background: var(--sts-white); border-radius: 15px; text-align: center; font: 400 14px/1.7em var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-black); } .sts-promo__title { margin: 0; font: 400 var(--sts-h3)/1.2em var(--sts-font-display); letter-spacing: 0; color: var(--sts-white); } .sts-promo--narrow { background-image: linear-gradient(180deg, var(--sts-tan) 0%, var(--sts-peach-light) 100%); } .sts-promo--narrow .sts-promo__img { left: 0; width: 100%; } .sts-promo--narrow .sts-promo__body { flex: 1; padding-top: 45px; text-align: center; } .sts-promo--narrow .sts-promo__title { margin-top: -15px; } /* Wide promo: stacked and centred on phones (text block 283px, photo 76% wide at the bottom centre); from tablet, text left and photo bottom-right. */ .sts-promo--wide { flex-direction: column; background-image: linear-gradient(165deg, var(--sts-tan) 0%, var(--sts-peach-light) 100%); } .sts-promo--wide .sts-promo__img { left: 12%; width: 76%; } .sts-promo--wide .sts-promo__body { flex: 0 0 283px; justify-content: center; padding: 10px; text-align: center; } .sts-promo--wide .sts-promo__title { margin: 15px 0 5px; } /* Jeg heading box (measured) */ .sts-promo .sts-btn-wrap { line-height: 0; } /* Jeg button wrapper: no text-line gap (measured) */ .sts-btn--dark { padding: 15px 30px; background: var(--sts-black); transition: all 0.4s var(--sts-ease); } .sts-btn--dark::after { display: none; } @media (min-width: 768px) { .sts-promo { min-height: 400px; } .sts-promo__label { width: 45%; } .sts-promo--wide { flex-direction: row; padding-left: 50px; } .sts-promo--wide .sts-promo__img { left: auto; right: 0; width: 55%; } .sts-promo--wide .sts-promo__body { flex: 0 1 calc(100% - 207px); text-align: start; } .sts-promos { flex-direction: row; } .sts-promo--narrow { flex: 0 0 calc((100% - 20px) * 0.3633); } .sts-promo--wide { flex: 1 1 0; } } } /* ------------------------------------------------ FAQ 3 promo cards (bridge 13) */ @layer components { /* Two gradient cards; each is a row of a text column and an empty spacer that leaves room for the art (a background, swapped on phones). Widths come from flex-shrink exactly as on Stylist: the text column can't shrink below its longest unbreakable run (the inline-block bold accent). */ .sts-promos--faq { gap: 0; padding: 30px 0 0; } .sts-promo--card { flex-direction: column; min-height: 55vh; margin: 10px; background-image: linear-gradient(165deg, var(--sts-tan) 0%, var(--sts-peach-light) 100%); } /* Card art: s behind the text (were a ::before background). Phones: the phone version when set, full width along the bottom (card B 85%, centred). */ .sts-promo__art { position: absolute; z-index: -1; inset: auto auto 0 0; width: 100%; height: auto; margin: 0; pointer-events: none; } .sts-promo--card .sts-promo__art--m, .sts-promo--card.has-art-m .sts-promo__art:not(.sts-promo__art--m) { display: none; } .sts-promo--card.has-art-m .sts-promo__art.sts-promo__art--m { display: block; } .sts-promos--faq > .sts-promo--card:nth-child(2) .sts-promo__art { left: 7.5%; width: 85%; } .sts-promo--card .sts-promo__body { flex: 1 1 auto; justify-content: center; padding: 10px; text-align: center; } .sts-promo--card .sts-promo__space { flex: 0 0 16.5vh; } /* measured: 148 of the 495px phone card */ .sts-promo--card .sts-promo__label { width: 50%; padding: 6px 0; font-size: var(--sts-f14); line-height: 1.5em; } .sts-promo--card .sts-promo__title { margin: -5px 0 5px; } /* Jeg heading box: -20px widget, 15px h2, -10px wrapper (measured) */ .sts-promo__accent { display: inline-block; font-weight: 700; } /* Jeg's span: real Rufina Bold, unbreakable */ /* Edit-safe: today's labels render at 195px as before; a longer label grows, then wraps (was width: 195px + nowrap, which spilled; launch check 2026-10-14). */ .sts-promo--card .sts-btn { min-width: 195px; max-width: 100%; text-wrap: balance; } @media (min-width: 768px) { .sts-promos--faq { gap: 10px; padding-top: 45px; } .sts-promo--card { flex: 1 1 0; flex-direction: row; min-height: 30vh; margin: 0; } /* Desktop art from here up: right edge, vertically centred (100% 50%), 82% / 80% wide. */ .sts-promo--card.has-art-m .sts-promo__art:not(.sts-promo__art--m) { display: block; } .sts-promo--card.has-art-m .sts-promo__art.sts-promo__art--m { display: none; } .sts-promo__art, .sts-promos--faq > .sts-promo--card:nth-child(2) .sts-promo__art { inset: 0 0 0 auto; margin-block: auto; width: 82%; } .sts-promos--faq > .sts-promo--card:nth-child(2) .sts-promo__art { width: 80%; } .sts-promo--card .sts-promo__body { flex: 0 1 100%; text-align: start; } /* Spacer: card A 22% at every width, card B 40% (100% on desktop). Measured: the flex-shrink of these bases gives Stylist's 501/109 and 438/173 at 1265. */ .sts-promo--card .sts-promo__space { flex: 0 1 22%; } .sts-promos--faq > .sts-promo--card:nth-child(2) .sts-promo__space { flex-basis: 40%; } .sts-promo--card .sts-promo__label { align-self: flex-start; width: 58%; line-height: 1em; } .sts-promo--card .sts-btn-wrap { text-align: start; } } @media (min-width: 1025px) { .sts-promos--faq { padding-top: 54px; } .sts-promo--card { min-height: 40vh; } .sts-promo--card .sts-promo__body { margin-left: 10px; } /* Stylist pins the art at fixed offsets here, so it slides as the card resizes. */ .sts-promo__art { inset: 0 auto auto 174px; margin-block: 0; } .sts-promos--faq > .sts-promo--card:nth-child(2) .sts-promo__art { inset: 0 auto auto 258px; margin-block: 0; } .sts-promos--faq > .sts-promo--card:nth-child(1) .sts-promo__label { width: 48%; } .sts-promos--faq > .sts-promo--card:nth-child(2) .sts-promo__label { width: 45%; } } @media (min-width: 1367px) { .sts-promos--faq { gap: 20px; max-width: var(--sts-boxed); margin-inline: auto; } .sts-promo--card { min-height: 32vh; } .sts-promo--card .sts-promo__body { margin-left: 50px; } .sts-promos--faq > .sts-promo--card:nth-child(2) .sts-promo__space { flex-basis: 100%; } /* card B's spacer has no desktop width on Stylist (measured 290px) */ .sts-promos--faq > .sts-promo--card .sts-promo__art, .sts-promos--faq > .sts-promo--card:nth-child(2) .sts-promo__art { inset: auto 0 0 auto; margin-block: 0; width: 55%; } .sts-promos--faq > .sts-promo--card:nth-child(1) .sts-promo__label { width: 36%; } .sts-promos--faq > .sts-promo--card:nth-child(2) .sts-promo__label { width: 50%; } } /* Jeg button hovers. FAQ: Stylist's #BF7E5D under white text is 3.3:1, so it takes the lighter button stop instead (4.51:1; Luca: "fix contrast, keep the look"). Home 7 wide card: tan with black text, as Stylist (6.4:1). Home 7 narrow card: no hover on Stylist. */ @media (hover: hover) and (pointer: fine) { .sts-promo--card .sts-btn--dark:hover { background: var(--sts-btn-light); } .sts-promo--wide .sts-btn--dark:hover { background: var(--sts-tan); color: var(--sts-black); } } .sts-promo--card .sts-btn--dark:focus-visible { background: var(--sts-btn-light); } } /* -------------------------------------------- eyebrow hover + stacked variant */ @layer components { /* Stylist's site-wide rule lifts every Jeg icon box (eyebrows, name boxes) 8px. */ .sts-eyebrow, .sts-member__info { transition: transform 0.45s var(--sts-ease); } @media (hover: hover) and (pointer: fine) { .sts-eyebrow:hover, .sts-member__info:hover { transform: translateY(-8px); } } /* Icon on top, centred, at ≤1024 (Home 8): 34×42 slot, label margin 0 0 7px, widget -15px. */ .sts-eyebrow--stack { flex-direction: column; align-items: center; gap: 0; margin-bottom: -15px; } .sts-eyebrow--stack .sts-eyebrow__mark { width: 34px; height: 34px; margin-bottom: 8px; } .sts-eyebrow--stack .sts-eyebrow__text { margin: 0 0 7px; } @media (min-width: 1025px) { .sts-eyebrow--stack { flex-direction: row; align-items: flex-start; gap: 15px; margin-bottom: 0; } .sts-eyebrow--stack .sts-eyebrow__mark { width: 38px; height: 38px; margin-bottom: 7px; } .sts-eyebrow--stack .sts-eyebrow__text { margin: 12px 0 0; } } } /* ----------------------------------------------------------- Home 8 team */ @layer components { .sts-team { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; padding: calc(5 * var(--sts-body)) 0 0; overflow-x: clip; /* the 236px ring is wider than a phone column (as on Stylist) */ } .sts-team__title { width: 80%; margin: 0; text-align: center; font: 500 var(--sts-h1)/1.3em var(--sts-font-display); letter-spacing: -1px; color: var(--sts-black); } .sts-team__title--h2 { font: 500 var(--sts-h2)/1.2em var(--sts-font-display); letter-spacing: 0.2px; } .sts-team__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; margin: 0; padding: 10px; list-style: none; } .sts-team__col { flex: 0 0 48%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 20px; padding: 10px; min-width: 0; } /* Ring: 220px circle photo + padding + peach border (5+3 phone, 7+3 tablet/laptop, 10+4 desktop). */ .sts-member { position: relative; overflow: hidden; flex: none; width: max-content; max-width: min(248px, 100%); margin-inline: auto; /* capped by the column: clips to a capsule on phones, as Stylist */ padding: 5px; border: 3px solid var(--sts-peach); border-radius: 300px; } .sts-member__frame { display: block; width: 220px; max-width: 100%; height: 220px; overflow: hidden; border-radius: 50%; } /* shrinks with the column on phones, as the photo did */ /* Frame = the photo's exact box, clipped, so the photo can be zoomed/rotated inside it (Web Edit framing). */ .sts-member__photo { display: block; width: 220px; height: 220px; object-fit: cover; border-radius: 50%; } .sts-member::before { content: ""; position: absolute; left: 0; top: 100%; z-index: 1; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; transition: all 0.4s var(--sts-ease) 0.2s; } .sts-member__hover { position: absolute; left: 0; top: 50%; z-index: 2; width: 100%; text-align: center; transform: translateY(-20%); opacity: 0; visibility: hidden; transition: all 0.3s var(--sts-ease); } .sts-member__socials { display: flex; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; line-height: 36px; } .sts-member__socials li { margin: 0; } .sts-member__social { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; width: 30px; height: 30px; border-radius: 50%; background: var(--sts-accent); color: var(--sts-white); transition: all 0.3s; } .sts-member__social .lw-icon { width: 8px; height: 8px; } .sts-member__info { text-align: center; } .sts-member__name { margin: 0 0 5px; font: 500 var(--sts-f23)/1.3em var(--sts-font-display); letter-spacing: -0.5px; color: var(--sts-accent); } .sts-member__role { margin: 0; font: 400 var(--sts-f14)/1.5em var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-secondary); } /* Overlay shows on hover (pointer devices) and on keyboard focus inside. */ .sts-member:focus-within::before { top: 0; opacity: 1; visibility: visible; transition-delay: 0s; } .sts-member:focus-within .sts-member__hover { transform: translateY(-50%); opacity: 1; visibility: visible; transition-delay: 0.1s; } @media (hover: hover) and (pointer: fine) { .sts-member:hover::before { top: 0; opacity: 1; visibility: visible; transition-delay: 0s; } .sts-member:hover .sts-member__hover { transform: translateY(-50%); opacity: 1; visibility: visible; transition-delay: 0.1s; } .sts-member__social:hover { background: var(--sts-peach); color: var(--sts-black); } .sts-member__social:hover .lw-icon { animation: sts-icon-y 0.4s forwards; } } @keyframes sts-icon-y { 49% { transform: translateY(100%); } 50% { opacity: 0; transform: translateY(-100%); } 51% { opacity: 1; } } @media (min-width: 768px) { .sts-team__title { width: 50%; } .sts-team__row { flex-wrap: nowrap; gap: 0; margin-top: 30px; } .sts-team__col { flex: 1 1 0; justify-content: center; } .sts-member { padding: 7px; } .sts-member__socials { gap: 7px; } .sts-member__social .lw-icon { width: 12px; height: 12px; } .sts-member__role { line-height: 1em; } } @media (min-width: 1025px) { .sts-team__title { width: 40%; } .sts-team__row { gap: 20px; } } @media (min-width: 1367px) { .sts-member { padding: 10px; border-width: 4px; } } } /* ---------------------------------------------------------------- footer */ @layer components { .sts-footer { position: relative; display: flow-root; } /* keep the strip margin inside (Stylist: no collapse) */ /* Footer 1: Instagram strip. */ .sts-insta { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: var(--sts-boxed); margin: 30px auto 0; padding: calc(2 * var(--sts-body)) 0 0; background: var(--sts-white); border-bottom: 0.8px solid var(--sts-border); } .sts-insta__head { padding: 0 10px; text-align: center; } .sts-insta__sub { margin: 5px 0 0; font: 400 14px/1.7em var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-secondary); } .sts-insta__title { margin: 0; font: 700 var(--sts-f27)/1.3em var(--sts-font-display); letter-spacing: -0.5px; color: var(--sts-accent); } .sts-insta__title a { color: inherit; text-decoration: none; transition: color 0.3s; } .sts-insta__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 0 0 -75px; padding: 10px; list-style: none; } .sts-insta__col { flex: 0 0 32%; min-width: 0; padding: 0; } /* Stylist look (team-card CSS leaking onto these tiles): a 220px circle inside a 15px-radius card that clips it when the card is narrower. */ .sts-insta__tile { position: relative; overflow: hidden; width: 100%; max-width: 248px; height: 220px; margin-inline: auto; border-radius: 15px; } .sts-insta__frame { display: block; width: 220px; max-width: 220px; height: 220px; margin-inline: auto; overflow: hidden; border-radius: 50%; } /* Frame = the photo's exact box, clipped, so the photo can be zoomed/rotated inside it (Web Edit framing). */ .sts-insta__img { display: block; width: 220px; max-width: 220px; height: 220px; object-fit: cover; border-radius: 50%; } .sts-insta__tile::before { content: ""; position: absolute; left: 0; top: 100%; z-index: 1; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; transition: all 0.4s var(--sts-ease) 0.2s; } .sts-insta__hover { position: absolute; left: 0; top: 50%; z-index: 2; width: 100%; text-align: center; transform: translateY(-20%); opacity: 0; visibility: hidden; transition: all 0.3s var(--sts-ease); } .sts-insta__icon { width: 36px; height: 36px; } .sts-insta__icon .lw-icon { width: 16px; height: 16px; } /* Footer 2: cream, palm shadow bottom-right. */ .sts-foot { position: relative; isolation: isolate; background: var(--sts-cream); padding: calc(7 * var(--sts-body)) 0 calc(3 * var(--sts-body)); } .sts-foot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.4; background: var(--sts-img-palm, url("../img/palm-shadow.png")) right bottom / 21% auto no-repeat; } .sts-foot__inner { display: flex; flex-direction: column; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; } .sts-foot__map { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 20vh; padding: 10px; } /* The map picture fills its box behind the pin (was a CSS background: cover, centre). */ .sts-foot__map-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* Stylist: ElementsKit prints a non-breaking space (a 36px line) above the pin. */ .sts-foot__pin { width: 20%; padding: 36px 0 12px; line-height: 0; } .sts-foot__pin .lw-icon { width: 100%; height: auto; } .sts-foot__info { display: flex; flex-direction: column; gap: 20px; padding: 10px; } .sts-foot__upper { display: flex; flex-wrap: wrap; gap: 20px; padding: 0 5px; border-bottom: 1px solid var(--sts-peach); } .sts-foot__services { flex: 0 1 41%; display: flex; flex-direction: column; gap: 20px; padding: 0; } .sts-foot__hours { flex: 0 1 52%; display: flex; flex-direction: column; gap: 20px; padding: 0; } .sts-foot__heading { margin: 0; font: 600 var(--sts-h5)/1.3em var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-accent); } .sts-foot__links { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; } .sts-foot__links li { padding-bottom: 5px; font-size: var(--sts-f16); line-height: 1.5; } /* Elementor icon list: 5px padding + 5px margin */ .sts-foot__links a { font: 400 var(--sts-f16)/1.5em var(--sts-font-text); letter-spacing: 0.2px; color: var(--sts-secondary); text-decoration: none; transition: color 0.3s; } .sts-hours { width: 100%; margin: -30px 0 0 -19px; padding: 19px 20px; } /* ElementsKit box (measured); fixed 100% width, so the margin shifts it */ /* Phones: day above time (Stylist's rows are plain blocks there); flex from tablet. */ .sts-hours__row { display: block; padding: 10px 0; border-bottom: 0.8px solid var(--sts-border); } .sts-hours__row:last-child { border-bottom: 0; } .sts-hours__day { font: 700 16px/2em var(--sts-font-text); font-size: 16px; line-height: calc(2 * var(--sts-body)); letter-spacing: -0.3px; color: var(--sts-secondary); } .sts-hours__time { margin: 0; font: 400 var(--sts-f16)/1.5em var(--sts-font-text); letter-spacing: 0.2px; color: var(--sts-accent); } .sts-foot__lower { display: flex; flex-direction: column; gap: 20px; padding: 10px; } .sts-foot__contact { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 10px; } .sts-foot__contact-title { margin: 0; font: 600 var(--sts-h4)/1.3em var(--sts-font-text); letter-spacing: 0.3px; color: var(--sts-accent); } .sts-foot__row { display: flex; flex-wrap: wrap; column-gap: 10px; margin: 0; } .sts-foot__row b { font: 700 var(--sts-body)/2em var(--sts-font-text); color: var(--sts-accent); } .sts-foot__row :is(a, span) { align-self: center; font: 400 var(--sts-f16)/1.5em var(--sts-font-text); letter-spacing: 0.2px; color: var(--sts-black); text-decoration: none; transition: color 0.3s; } .sts-foot__buttons { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 10px; } /* Stylist: 214deg #995A32 to #F4AC7C under white text; contrast-fixed like every button. */ .sts-fbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 40px; background-image: linear-gradient(214deg, var(--sts-btn-deep) 0%, var(--sts-btn-light) 100%); } .sts-fbtn .sts-fbtn__icon { position: relative; z-index: 1; width: 1em; height: 1em; flex: none; } .sts-foot__buttons .sts-btn-wrap { padding-bottom: 12px; } /* the button widget's text-line slack on Stylist (measured 65px rhythm) */ span.sts-fbtn { cursor: default; } /* Footer 3: copyright bar. */ .sts-bar { background: var(--sts-accent); color: var(--sts-white); padding: 10px 0; } .sts-bar__inner { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; text-align: center; } .sts-bar__nav, .sts-bar__copy { padding: 10px; } .sts-bar__links { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 6px; margin: 0; padding: 0; list-style: none; } .sts-bar__links li { position: relative; display: flex; align-items: center; padding: 0 12.5px; } .sts-bar__links li + li::before { content: ""; position: absolute; left: 0; top: 50%; height: 45%; transform: translateY(-50%); border-left: 1px solid #DDDDDD; } .sts-bar__links a { font: 400 var(--sts-f14)/1.5em var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-white); text-decoration: none; transition: color 0.3s; } .sts-bar__copy { margin: 0; font: 400 var(--sts-f16)/1.5em var(--sts-font-text); } @media (min-width: 768px) { .sts-insta__row { gap: 0; } .sts-insta__col { flex: 0 0 33%; padding: 10px; } .sts-foot__map { min-height: 30vh; } /* was "100% auto": the box is always wider than the map, so that equals cover */ .sts-foot__pin { width: 9%; } .sts-foot__info { flex-direction: row; } .sts-foot__upper { flex: 0 1 50%; padding: 0 10px 30px; align-content: flex-start; } .sts-foot__services { flex-basis: 47%; padding: 10px; } .sts-foot__hours { flex-basis: 94%; padding: 10px; } .sts-hours { margin-left: -15px; } .sts-foot__lower { flex: 0 1 50%; } .sts-hours__row { display: flex; justify-content: space-between; gap: 10px; } .sts-hours__day { font-size: 17px; } .sts-bar__inner { flex-direction: row; justify-content: space-between; text-align: start; } .sts-bar__nav, .sts-bar__copy { flex: 1 1 50%; } .sts-bar__copy { text-align: end; } .sts-bar__links { justify-content: flex-start; } .sts-bar__links li { padding: 0 14.5px; } .sts-bar__links li:first-child { padding-left: 0; } } @media (min-width: 1025px) { .sts-insta__row { flex-wrap: nowrap; } .sts-insta__col { flex: 1 1 0; } .sts-foot__inner { flex-direction: row; } .sts-foot__map { flex: 0 1 60%; min-height: 0; } .sts-foot__map-img { object-position: 0 0; } .sts-foot__pin { width: 14%; } .sts-foot__info { flex: 0 1 50%; flex-direction: column; } .sts-foot__upper { flex: none; flex-wrap: nowrap; } /* Measured split on Stylist: services 37.5% / hours 62.5% of the row minus the gap. */ .sts-foot__services { flex: 0 0 calc((100% - 20px) * 0.375); } .sts-foot__hours { flex: 1 1 0; } .sts-hours__day { font-size: 16px; } .sts-foot__lower { flex: none; flex-direction: row; } .sts-foot__contact { flex: 0 1 60%; } .sts-foot__row { flex-direction: column; } .sts-foot__row :is(a, span) { align-self: flex-start; } .sts-foot__buttons { flex: 0 1 75%; justify-content: center; } .sts-bar__links a { line-height: 1em; } } @media (min-width: 1367px) { .sts-insta { margin-top: 60px; } .sts-foot__row { flex-direction: row; } .sts-foot__row :is(a, span) { align-self: center; } .sts-foot__buttons { justify-content: space-between; } } @media (hover: hover) and (pointer: fine) { .sts-insta__title a:hover { color: var(--sts-black); } .sts-insta__tile:hover::before { top: 0; opacity: 1; visibility: visible; transition-delay: 0s; } .sts-insta__tile:hover .sts-insta__hover { transform: translateY(-50%); opacity: 1; visibility: visible; transition-delay: 0.1s; } .sts-insta__icon:hover { background: var(--sts-peach); color: var(--sts-black); } .sts-foot__links a:hover, .sts-foot__row a:hover { color: var(--sts-accent); } a.sts-fbtn:hover::after { opacity: 1; } .sts-bar__links a:hover { color: var(--sts-peach-light); } } } /* ------------------------------------------------------ inner page hero */ @layer components { /* Stylist pushed inner pages down 101px for Kava's breadcrumb row. Kava is gone, so the page hero starts under the header like the home hero (that offset was the white band behind the header on inner pages: Luca, 2026-10-26). The hero's own padding clears the header. */ body.sts-inner .sts-main { margin-top: 0; } /* Only the 70% overlay renders on Stylist (BG-09 over white). */ .sts-phero { position: relative; isolation: isolate; } .sts-phero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.7; background: var(--sts-img-page, url("../img/hero-bg-mobile.jpg")) center left / cover no-repeat; } .sts-page-contact .sts-phero::before { background-image: var(--sts-img-contact, url("../img/inner-bg-contact.jpg")); } /* BG-010 on phones */ .sts-phero__inner { display: flex; flex-direction: column; justify-content: space-around; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; padding: calc(9 * var(--sts-body)) 0 20px; /* 20px: Stylist's empty image column (padding 10px) still stacks under the text on phones */ } .sts-phero__text { display: flex; flex-direction: column; gap: 20px; padding: 10px; text-align: center; } .sts-phero__aside { display: none; } .sts-crumbs__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; padding: 0; list-style: none; } .sts-crumbs__item { position: relative; margin-right: 33px; font: 400 var(--sts-eyebrow)/1.4em var(--sts-font-eyebrow); letter-spacing: 1px; text-transform: uppercase; color: var(--sts-accent); } .sts-crumbs__item:last-child { margin-right: 0; } .sts-crumbs__item + .sts-crumbs__item::before { content: ""; position: absolute; left: -16.5px; top: 50%; height: 50%; transform: translateY(-50%); border-left: 0.8px solid var(--sts-accent); } .sts-crumbs__item a { color: inherit; text-decoration: none; } .sts-phero__title { margin: 15px 0; font: 500 var(--sts-h2)/1.2em var(--sts-font-display); letter-spacing: 0.2px; color: var(--sts-secondary); } .sts-phero__focus { display: inline-block; color: var(--sts-accent); } /* wraps as one unit */ @media (min-width: 768px) { .sts-phero::before, .sts-page-contact .sts-phero::before { background-image: var(--sts-img-page, url("../img/hero-bg-mobile.jpg")); background-position: top center; } .sts-page-about .sts-phero::before, .sts-page-hair-treatments .sts-phero::before, .sts-page-faq .sts-phero::before { background-size: contain; } .sts-phero__inner { flex-direction: row; padding-bottom: calc(2 * var(--sts-body)); } .sts-page-services .sts-phero__inner, .sts-page-pricing .sts-phero__inner { padding: calc(10 * var(--sts-body)) 0 calc(3 * var(--sts-body)); } .sts-phero__text { flex: 0 1 80%; text-align: start; } .sts-phero__aside { display: block; flex: 0 1 50%; padding: 10px; } .sts-crumbs__list { justify-content: flex-start; } } @media (min-width: 1025px) { .sts-phero::before { background-size: cover; } .sts-page-about .sts-phero::before, .sts-page-hair-treatments .sts-phero::before, .sts-page-faq .sts-phero::before { background-size: cover; } .sts-phero__inner { padding: calc(9 * var(--sts-body)) 0 var(--sts-body); } .sts-page-services .sts-phero__inner, .sts-page-pricing .sts-phero__inner { padding: calc(12 * var(--sts-body)) 0 calc(3 * var(--sts-body)); } .sts-phero__text { flex-basis: 50%; } } @media (min-width: 1367px) { .sts-phero__inner { padding: calc(12 * var(--sts-body)) 0 calc(3 * var(--sts-body)); } } @media (hover: hover) and (pointer: fine) { .sts-crumbs__item a { transition: color 0.3s; } } } /* ------------------------------------------------------------ About 2–6 */ @layer components { .sts-accent { color: var(--sts-accent); } /* About 2: welcome split. */ .sts-welcome__inner { display: flex; flex-direction: column; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; } .sts-welcome__media, .sts-welcome__text { padding: 10px; } .sts-welcome__text { display: flex; flex-direction: column; justify-content: center; gap: 20px; } /* 14px frame: peach on the left 35% only (hard stop), white elsewhere. */ .sts-welcome__frame { width: 100%; padding: 14px; border-radius: 15px; background: linear-gradient(90deg, var(--sts-peach) 35%, var(--sts-white) 0%); } .sts-welcome__frame img { display: block; width: 100%; height: auto; border-radius: 15px; } .sts-welcome__title { margin: 0; font: 500 var(--sts-h2)/1.2em var(--sts-font-display); letter-spacing: 0.2px; color: var(--sts-secondary); } .sts-welcome__p, .sts-salon__p { margin: 0 0 1em; color: var(--sts-text); } /* About 3: feature boxes on white → peach (bottom 33%). Icon left at ≤1024. */ .sts-abfeat { background: linear-gradient(180deg, var(--sts-white) 67%, var(--sts-peach) 0%); } .sts-abfeat__inner { display: flex; flex-wrap: wrap; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; } .sts-abfeat__cell { flex: 0 0 100%; padding: 10px; } .sts-abfeat .sts-feature { flex-direction: row; align-items: flex-start; text-align: start; } .sts-abfeat .sts-feature__icon { flex: none; width: 55px; height: 40px; margin: 0 25px 0 0; } .sts-abfeat .sts-feature__icon img { width: 55px; height: 55px; margin: 0; } .sts-abfeat .sts-feature__title { margin: 0 0 10px; } /* About 4: photo band. */ .sts-band { display: flex; flex-direction: column; gap: 10px; padding: 0 0 calc(3 * var(--sts-body)); background: linear-gradient(180deg, var(--sts-peach) 50%, var(--sts-cream) 0%); } .sts-band__col { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: 10px; } .sts-band__col--edge { display: none; } .sts-band__col--b, .sts-band__col--d { flex-direction: row; gap: 15px; } .sts-band__col--b > *, .sts-band__col--d > * { flex: 1 1 0; } .sts-band__col--c { margin: -15px 0; } .sts-band__tall, .sts-band__short { height: 20vh; } .sts-band__centre { height: 56vh; } /* About 5: counters (1140px box, cream). */ .sts-counts { background: var(--sts-cream); padding: 10px 0; } .sts-counts__inner { display: flex; flex-wrap: wrap; width: 100%; max-width: 1140px; margin: 0 auto; padding: 0; list-style: none; } .sts-count { flex: 0 0 50%; padding: 10px; text-align: center; } .sts-count__num { margin: 0; font: 500 var(--sts-counter)/1.3 var(--sts-font-text); letter-spacing: -1px; color: var(--sts-accent); } .sts-count__plus { position: relative; top: -5px; vertical-align: super; font: 600 var(--sts-h5)/1.3 var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-text); } .sts-count__label { margin: 0; font: 400 var(--sts-f16)/1.5 var(--sts-font-text); letter-spacing: 0.2px; color: var(--sts-text); } /* About 6: our salon + mission / vision (cream). */ .sts-salon { background: var(--sts-cream); padding: calc(3 * var(--sts-body)) 0; } .sts-salon__inner { display: flex; flex-direction: column; justify-content: space-around; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; } .sts-salon__intro { display: flex; flex-direction: column; justify-content: center; padding: 10px; } .sts-salon__intro-box { display: flex; flex-direction: column; gap: 20px; } .sts-salon__title { margin: 0; font: 500 var(--sts-h2)/1.2em var(--sts-font-display); letter-spacing: 0.2px; color: var(--sts-black); } .sts-salon__aims { display: flex; flex-direction: column; gap: 20px; padding: 10px; } .sts-aim { align-self: flex-start; transition: transform 0.45s var(--sts-ease); } .sts-aim--mission { padding-bottom: 30px; border-bottom: 1px solid var(--sts-peach); } .sts-aim__title { margin: 25px 0 10px; font: 700 var(--sts-f27)/1.3 var(--sts-font-display); letter-spacing: -0.5px; color: var(--sts-accent); transition: color 0.45s var(--sts-ease); } .sts-aim__p { margin: 0; color: var(--sts-text); } @media (min-width: 768px) { .sts-welcome__inner { flex-direction: row; } .sts-welcome__media { flex: 0 1 60%; } .sts-welcome__text { flex: 0 1 40%; } .sts-welcome__frame { width: 90%; } .sts-abfeat { padding: calc(3 * var(--sts-body)) 0; } .sts-abfeat__cell { flex-basis: 50%; } .sts-band { flex-direction: row; justify-content: space-between; padding: calc(3 * var(--sts-body)) 0; } .sts-band__col--b, .sts-band__col--d { flex: 0 1 30%; flex-direction: column; } .sts-band__col--b > *, .sts-band__col--d > * { flex: none; } .sts-band__col--c { flex: 0 1 40%; margin: 0; } .sts-band__tall { height: 23vh; } .sts-band__centre { height: 45vh; } .sts-count { flex-basis: 25%; } .sts-salon__inner { flex-direction: row; } .sts-salon__intro { flex: 0 1 50%; } .sts-salon__aims { flex: 0 1 35%; } .sts-aim__title { font-size: var(--sts-f27); } } @media (min-width: 1025px) { .sts-welcome { padding: calc(3 * var(--sts-body)) 0; } .sts-abfeat__cell { flex-basis: 25%; } .sts-abfeat .sts-feature { flex-direction: column; align-items: stretch; text-align: center; } .sts-abfeat .sts-feature__icon { width: auto; height: 46px; margin: 0 0 13px; } .sts-abfeat .sts-feature__icon img { width: 65px; height: 65px; margin-inline: auto; } .sts-abfeat .sts-feature__title { margin: 25px 0 10px; } .sts-band__col--edge { display: block; flex: 0 1 8%; padding: 0; } .sts-band__col--b, .sts-band__col--d { flex-basis: 22%; } .sts-band__tall { height: 35vh; } .sts-band__centre { height: 56vh; } .sts-salon__intro-box { width: 90%; padding: 10px; } } @media (hover: hover) and (pointer: fine) { .sts-aim:hover { transform: translateY(-8px); } .sts-aim:hover .sts-aim__title { color: var(--sts-black); } } } /* ------------------------------------------------------------------- 404 */ @layer components { .sts-404 { position: relative; isolation: isolate; } .sts-404::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.7; background: var(--sts-img-page, url("../img/hero-bg-mobile.jpg")) 50% 0 / cover no-repeat; /* BG-09 */ } .sts-404__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; padding: calc(9 * var(--sts-body) + 10px) 10px calc(var(--sts-body) + 10px); text-align: center; } .sts-404__label { margin: 0 0 6px; /* measured: illustration starts 57px below the label top */ font: 600 24px/1.3 var(--sts-font-text); color: var(--sts-secondary); } .sts-404__img img { display: block; width: 560px; max-width: 100%; height: auto; margin-inline: auto; } .sts-404__title { margin: 0; font: 400 var(--sts-h3)/1.2em var(--sts-font-display); letter-spacing: 0; color: var(--sts-secondary); } .sts-404__text { max-width: 498px; margin: 0 0 18px; color: var(--sts-text); } html.js .sts-reveal--up.is-in { animation-name: sts-fade-in-up; } @keyframes sts-fade-in-up { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } } /* ------------------------------------------------------------ price list */ @layer components { .sts-prices { padding: calc(5 * var(--sts-body)) 0; } .sts-prices--pricing { padding: 0 0 calc(2 * var(--sts-body)); } .sts-prices__inner { display: flex; flex-wrap: wrap; gap: 40px 20px; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; } .sts-pgroup { flex: 0 0 100%; min-width: 0; padding: 0 20px; } /* Jeg heading with a 4px gradient bar 30px left of the text. */ .sts-pgroup__title { position: relative; padding-left: 30px; margin: 15px 0 45px; /* measured: first row 45px below the title */ font: 700 var(--sts-f27)/1.3 var(--sts-font-display); letter-spacing: -0.5px; color: var(--sts-black); } .sts-pgroup__list { margin: 0; } .sts-pgroup__title::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--sts-accent) 0%, var(--sts-peach) 100%); } .sts-prow { display: flex; align-items: center; padding: 10px 0 10px 20px; } .sts-prow:nth-child(odd) { background: rgb(244 198 175 / 0.15); } /* rows 1 and 3: faint peach band */ .sts-prow__name { flex: 0 1 60%; min-width: 0; font: 400 var(--sts-f16)/1.5em var(--sts-font-text); letter-spacing: 0.2px; color: var(--sts-secondary); } .sts-prow__line { flex: 0 1 26%; margin: 0; border-top: 0.8px dashed var(--sts-accent); } .sts-prow__price { flex: 1 1 auto; margin: 0; text-align: end; font: 700 16px/1.5em var(--sts-font-text); letter-spacing: -0.3px; color: var(--sts-secondary); } @media (min-width: 768px) { .sts-pgroup { flex-basis: 47%; padding: 0 30px; } } } /* ---------------------------------------------------------- contact block */ @layer components { .sts-cblock__inner { display: flex; flex-direction: column; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; } .sts-cblock--services, .sts-cblock--faq { padding-top: calc(2 * var(--sts-body)); } .sts-cblock__left, .sts-cblock__right { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 10px; } .sts-cblock__text { display: flex; flex-direction: column; gap: 20px; padding: 0; text-align: center; } .sts-cblock__eyebrow { align-self: center; } .sts-cblock__title { margin: 0; font: 500 var(--sts-h2)/1.2em var(--sts-font-display); letter-spacing: 0.2px; color: var(--sts-secondary); } .sts-cblock__p { margin: 0 0 1em; color: var(--sts-text); } /* Opening hours: the ElementsKit box (fixed width; negative margins shift it). */ .sts-cblock__hours { display: flex; flex-direction: column; padding: 0; } /* 10px from tablet up (measured) */ .sts-hours--contact { align-self: center; width: 60%; margin: -45px 0 -30px 0; padding: 20px; } .sts-hours--contact .sts-hours__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .sts-hours--contact .sts-hours__day, .sts-hours--contact .sts-hours__time { font: 700 16px/2em var(--sts-font-text); line-height: calc(2 * var(--sts-body)); letter-spacing: -0.3px; } /* body line box */ .sts-hours--contact .sts-hours__day { color: var(--sts-secondary); } .sts-hours--contact .sts-hours__time { color: var(--sts-accent); } @media (max-width: 480px) { .sts-hours--contact .sts-hours__row { display: block; } } /* Hair / Skin variant: framed photo (peach on the left 35%), 32vh. */ .sts-cblock__media { padding: 0; } .sts-cblock__frame { padding: 14px; border-radius: 15px; background: linear-gradient(90deg, var(--sts-peach) 35%, var(--sts-white) 0%); } .sts-cblock__frame img { display: block; width: 100%; height: 32vh; object-fit: cover; border-radius: 15px; } @media (min-width: 768px) { .sts-cblock__inner { flex-direction: row; } .sts-cblock__left, .sts-cblock__right { flex: 0 1 50%; } .sts-cblock--services { padding-top: calc(3 * var(--sts-body)); } .sts-cblock--faq { padding-top: calc(5 * var(--sts-body)); } .sts-cblock__text { padding: 10px; text-align: start; } .sts-cblock__eyebrow { align-self: flex-start; } .sts-cblock__hours { padding: 10px; } .sts-hours--contact { align-self: auto; width: 100%; margin: -60px 0 0 -15px; padding: 19px 20px; } .sts-hours--contact .sts-hours__day, .sts-hours--contact .sts-hours__time { font-size: 17px; } .sts-cblock__media { width: 90%; margin-top: -25px; } } @media (min-width: 1025px) { .sts-cblock__text, .sts-cblock__hours { width: 90%; } .sts-hours--contact { width: 85%; } .sts-hours--contact .sts-hours__day, .sts-hours--contact .sts-hours__time { font-size: 16px; } } @media (min-width: 1367px) { .sts-cblock--services { padding-top: calc(5 * var(--sts-body)); } .sts-cblock--contact, .sts-cblock--hairskin { padding-top: var(--sts-body); } .sts-hours--contact { width: 80%; margin: -30px 0 0 -17px; } } /* Contact 3: phone / email / address boxes. */ .sts-cboxes { padding: calc(2 * var(--sts-body)) 0 0; } .sts-cboxes__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 500px; margin: 0 auto; padding: 0; list-style: none; } .sts-cboxes__col { width: 80%; padding: 10px; } .sts-cboxes__col:nth-child(2) { border-top: 1px solid var(--sts-border); border-bottom: 1px solid var(--sts-border); } .sts-cbox { display: flex; align-items: flex-start; gap: 15px; margin: 10px 0; color: inherit; text-decoration: none; text-align: start; transition: transform 0.45s var(--sts-ease); } .sts-cbox__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-top: 6px; border-radius: 15px; background: var(--sts-accent); color: var(--sts-white); transition: all 0.4s var(--sts-ease); } .sts-cbox__icon .lw-icon { width: 20px; height: 20px; } .sts-cbox__body { display: flex; flex-direction: column; } .sts-cbox__title { font: 400 14px/1.7em var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-accent); transition: color 0.45s var(--sts-ease); } .sts-cbox__value { font: 600 var(--sts-h5)/1.3em var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-accent); transition: color 0.45s var(--sts-ease); } @media (min-width: 768px) { .sts-cboxes__inner { flex-direction: row; flex-wrap: wrap; align-items: stretch; max-width: var(--sts-boxed); } .sts-cboxes__col { width: 33.333%; display: flex; align-items: center; justify-content: center; } .sts-cboxes__col:nth-child(2) { border: 0; border-left: 1px solid var(--sts-border); border-right: 1px solid var(--sts-border); } .sts-cbox { display: block; margin: 0; } .sts-cbox__title { margin-top: 10px; } } @media (min-width: 1025px) { .sts-cbox { display: flex; gap: 14px; } .sts-cbox__icon { width: 55px; height: 55px; margin-top: 0; } .sts-cbox__icon .lw-icon { width: 32px; height: 32px; } .sts-cbox__title { margin-top: 0; } } @media (hover: hover) and (pointer: fine) { .sts-cbox:hover { transform: translateY(-8px); } .sts-cbox:hover .sts-cbox__icon { background: var(--sts-peach); color: var(--sts-black); } .sts-cbox:hover .sts-cbox__title { color: var(--sts-text); } .sts-cbox:hover .sts-cbox__value { color: var(--sts-black); } } a.sts-cbox:focus-visible { outline: 2px solid var(--sts-accent); outline-offset: 4px; } } /* ------------------------------------------------------ price highlights */ @layer components { .sts-offers__inner { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; padding: 10px; } .sts-offer { position: relative; isolation: isolate; overflow: hidden; flex: 0 0 100%; min-width: 0; min-height: 46vh; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; border-radius: 15px; } /* Card art: an along the bottom (was a ::before background: contain / 80% / 65% auto, bottom centre). */ .sts-offer__art { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; pointer-events: none; } .sts-offer--a { background-image: linear-gradient(140deg, var(--sts-tan) 0%, var(--sts-peach-light) 100%); } .sts-offer--b { align-items: center; background-image: linear-gradient(230deg, var(--sts-tan) 0%, var(--sts-peach-light) 100%); } .sts-offer--b .sts-offer__art { inset: auto auto 0 10%; width: 80%; height: auto; } .sts-offer--c { align-items: center; min-height: 51vh; background: var(--sts-peach-light); } .sts-offer--c .sts-offer__art { inset: auto auto 0 17.5%; width: 65%; height: auto; } .sts-offer__head { padding-top: 30px; margin-bottom: -13px; text-align: center; } .sts-offer__title { margin: 0; font: 400 var(--sts-h3)/1.2em var(--sts-font-display); letter-spacing: 0; color: var(--sts-black); } .sts-offer__focus { display: inline-block; font-weight: 700; } /* ElementsKit base: the focused word is a real bold */ .sts-offer__text { margin: 7px 50px 0; color: var(--sts-secondary); } .sts-offer--b .sts-offer__text { margin-inline: 37px; } .sts-offer--c .sts-offer__text { margin-inline: 30px; } /* Badge: black circle bottom-right. */ .sts-offer__badge { align-self: flex-end; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 24px; border-radius: 50%; background: var(--sts-black); color: var(--sts-white); text-align: center; } .sts-offer__lead { margin: 15px 0; font: 400 var(--sts-f14)/1.5em var(--sts-font-text); letter-spacing: 0.5px; } .sts-offer__price { margin-top: -32px; } .sts-offer__cur { font: 600 var(--sts-h4)/1.3 var(--sts-font-text); letter-spacing: 0.3px; } .sts-offer__num { display: inline-block; font: 500 var(--sts-h2)/1.2 var(--sts-font-display); letter-spacing: 0.2px; } /* Stylist defect kept behind its own rule (Luca to decide): at ≤1024 the badges shrink to 70% and shift; on phones card C's badge resets. */ @media (max-width: 1024px) { .sts-offer__badge { transform: translate(24px, 12px) scale(0.7); } .sts-offer__price { margin-top: -28px; } } @media (max-width: 767px) { .sts-offer--c .sts-offer__badge { transform: none; } } @media (min-width: 768px) { .sts-offer { flex-basis: 29%; flex-shrink: 1; min-height: 35vh; } .sts-offer--b { flex-basis: 36%; } .sts-offer__text, .sts-offer--b .sts-offer__text, .sts-offer--c .sts-offer__text { margin: 7px 0 0; } .sts-offer__lead { line-height: 1em; } } @media (min-width: 1025px) { .sts-offer { min-height: 40vh; } .sts-offer--a { flex-basis: 30%; } } @media (min-width: 1367px) { .sts-offer { min-height: 48vh; } .sts-offer--c { flex-basis: 30%; } .sts-offer__text { margin: 7px 50px 0; } .sts-offer--b .sts-offer__text { margin: 7px 70px 0; } .sts-offer--c .sts-offer__text { margin: 7px 50px 0; } } } @layer components { /* Services page card rows (measured): no peach band, 1em / 3em bottom padding. */ .sts-cards--svc.sts-cards--first { padding: 0 0 var(--sts-body); background: none; } .sts-cards--svc.sts-cards--next { padding-bottom: calc(3 * var(--sts-body)); } } /* ------------------------------------------------ Skin & Body treatment cards */ @layer components { .sts-treats__inner { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; padding: 10px; } .sts-treat { position: relative; isolation: isolate; overflow: hidden; flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 10px; border: 1px solid var(--sts-peach); border-radius: 15px; } /* Pictures are s (were CSS backgrounds). Full-card background (looks 2 and 3): cover, centre right (look 3: contain); phones use its phone version on look 2. Corner picture (any look): phones show only the phone version, 85% wide along the bottom (look 4: its natural size, bottom centre); from tablet up the main one. */ .sts-treat__bg, .sts-treat__art { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; margin: 0; pointer-events: none; } .sts-treat__bg { z-index: -2; object-fit: cover; object-position: 100% 50%; } .sts-treat--1 .sts-treat__bg, .sts-treat--4 .sts-treat__bg, .sts-treat .sts-treat__bg.sts-treat__bg--m, .sts-treat .sts-treat__art:not(.sts-treat__art--m) { display: none; } .sts-treat--2.has-bg-m .sts-treat__bg.sts-treat__bg--m { display: block; } .sts-treat--2.has-bg-m .sts-treat__bg:not(.sts-treat__bg--m) { display: none; } .sts-treat--3 .sts-treat__bg { object-fit: contain; } .sts-treat__art--m { inset: auto auto 0 7.5%; width: 85%; height: auto; } .sts-treat--4 .sts-treat__art--m { inset: auto auto 0 50%; max-width: none; translate: -50% 0; } /* own pixel size (inline), bottom centre */ .sts-treat--1 { min-height: 56vh; background-image: linear-gradient(140deg, var(--sts-tan), var(--sts-peach-light)); } .sts-treat--2 { min-height: 55vh; border-color: var(--sts-border); background: #F5F5F5; } .sts-treat--3 { min-height: 51vh; justify-content: center; border-color: var(--sts-border); background: #F5F5F5; } .sts-treat--4 { min-height: 54vh; background-image: linear-gradient(250deg, var(--sts-accent), var(--sts-peach-light)); } .sts-treat__inner { display: flex; flex-direction: column; gap: 20px; margin: 20px 0 0; text-align: center; } .sts-treat--2 .sts-treat__inner { margin-top: 19px; } .sts-treat--3 .sts-treat__inner { margin: 0 0 0 10px; text-align: start; } .sts-treat__head { margin-bottom: -13px; } .sts-treat--1 .sts-treat__head { margin-bottom: -20px; } .sts-treat__title { margin: 0; font: 400 var(--sts-h3)/1.2em var(--sts-font-display); letter-spacing: 0; color: var(--sts-black); } .sts-treat__text { margin: 7px 0 0; color: var(--sts-secondary); } .sts-treat__link { align-self: center; display: inline-flex; align-items: center; gap: 5px; font: 500 var(--sts-button)/1 var(--sts-font-button); letter-spacing: 0.5px; text-transform: capitalize; color: var(--sts-black); text-decoration: none; white-space: nowrap; transition: all 0.4s var(--sts-ease); } .sts-treat--3 .sts-treat__link { align-self: flex-start; } .sts-treat__link .lw-icon { width: 1em; height: 1em; } @media (min-width: 768px) { .sts-treat { min-height: 35vh; justify-content: center; } /* Main versions from here up; corner picture: contain, 125px from the left (look 4: 150px). */ .sts-treat .sts-treat__art.sts-treat__art--m, .sts-treat--2.has-bg-m .sts-treat__bg.sts-treat__bg--m { display: none; } .sts-treat .sts-treat__art:not(.sts-treat__art--m), .sts-treat--2.has-bg-m .sts-treat__bg:not(.sts-treat__bg--m) { display: block; } .sts-treat__art { object-fit: contain; object-position: 125px 0; } .sts-treat--4 .sts-treat__art { object-position: 150px 0; } .sts-treat--1 { flex-basis: 49%; min-height: 34vh; } .sts-treat--2 { flex-basis: 48%; } .sts-treat--3 { flex-basis: 38%; } .sts-treat--4 { flex-basis: 60%; } .sts-treat__inner, .sts-treat--2 .sts-treat__inner, .sts-treat--3 .sts-treat__inner { margin: 0 0 0 15px; text-align: start; } .sts-treat__head, .sts-treat--1 .sts-treat__head { margin-bottom: -13px; } .sts-treat--1 .sts-treat__head { margin-bottom: -10px; } .sts-treat__link { align-self: flex-start; } } @media (min-width: 1025px) { .sts-treat, .sts-treat--1 { min-height: 34vh; } .sts-treat__art, .sts-treat--4 .sts-treat__art { object-position: 100% 100%; } .sts-treat--1 { flex-basis: 50%; } .sts-treat--2 .sts-treat__text, .sts-treat--4 .sts-treat__text { margin-right: 275px; } } @media (min-width: 1367px) { .sts-treat--1, .sts-treat--2 { min-height: 30vh; } .sts-treat--3, .sts-treat--4 { min-height: 36vh; } .sts-treat--2 .sts-treat__bg { object-fit: contain; } .sts-treat__inner, .sts-treat--2 .sts-treat__inner, .sts-treat--3 .sts-treat__inner { margin-left: 45px; } } @media (hover: hover) and (pointer: fine) { .sts-treat--1 .sts-treat__link:hover, .sts-treat--4 .sts-treat__link:hover { color: var(--sts-white); } .sts-treat--2 .sts-treat__link:hover, .sts-treat--3 .sts-treat__link:hover { color: var(--sts-accent); } } } @layer components { /* Inner-page variants (measured on Teams / Skin & Body). */ .sts-reviews--inner { padding-bottom: calc(5 * var(--sts-body)); } .sts-team--page { padding: calc(2 * var(--sts-body)) 0 calc(3 * var(--sts-body)); } } /* ---------------------------------------------------------- FAQ accordions */ @layer components { .sts-faq__inner { display: flex; flex-direction: column; width: 100%; max-width: var(--sts-boxed); margin-inline: auto; padding: 10px; } .sts-faq__col { padding: 10px; } .sts-faq__list { width: 100%; margin: 0 10px; } /* Stylist: full width plus a 10px left margin, so it runs 10px past the column (measured) */ .sts-faq-item { margin: 10px 0; border-bottom: 0.8px solid var(--sts-border); } .sts-faq-item__q { position: relative; display: block; cursor: pointer; list-style: none; border: 1px solid transparent; /* Jeg's header button has its own 1px border inside the item's bottom rule (measured 67.1px item) */ padding: 20px 10px 20px 0; font: 600 var(--sts-h5)/1.3 var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-secondary); } .sts-faq-item__q::-webkit-details-marker { display: none; } .sts-faq-item__title { display: inline-block; padding-right: 10px; } /* Stylist: the open question turns brown and jumps up 10px, instantly. */ .sts-faq-item[open] > .sts-faq-item__q { margin-top: -10px; color: var(--sts-accent); } .sts-faq-item__q .lw-icon { position: absolute; right: 30px; top: 20px; margin-top: 20px; width: 10px; height: 10px; color: var(--sts-black); } .sts-faq-item__minus, .sts-faq-item[open] .sts-faq-item__plus { display: none; } .sts-faq-item[open] .sts-faq-item__minus { display: block; } .sts-faq-item__a { padding: 0 0 10px 5px; } .sts-faq-item__a p { margin: 0; font: 400 14px/1.7em var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-text); } .sts-faq-item__q:focus-visible { outline: 2px solid var(--sts-accent); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { @supports (interpolate-size: allow-keywords) { .sts-faq { interpolate-size: allow-keywords; } .sts-faq-item::details-content { height: 0; overflow: clip; transition: height 0.4s var(--sts-ease-swing), content-visibility 0.4s allow-discrete; } .sts-faq-item[open]::details-content { height: auto; } } } @media (min-width: 768px) { .sts-faq__inner { flex-direction: row; } .sts-faq__col { flex: 1 1 50%; min-width: 0; } .sts-faq__list { margin: 0; } .sts-faq-item__q { padding: 20px; } .sts-faq-item__q .lw-icon { top: 50%; margin-top: -7.5px; width: 15px; height: 15px; } .sts-faq-item__a { padding: 0 70px 15px 23px; } } @media (min-width: 1367px) { .sts-faq__list { width: 95%; } } } /* ------------------------------------------------ solo: few photos (BUILD-PLAN §6) One stylist's site: every photo slot is optional and the page still reads as finished without it. Mobile-first; hover only on fine pointers. */ @layer components { /* Hero: heading + one photo (or heading alone) instead of the 7-tile collage. No .sts-reveal here: the first viewport never waits on JS (CLAUDE.md). */ .sts-hero--solo { display: block; padding: calc(7 * var(--sts-body) + 30px) 0 calc(3 * var(--sts-body)); } /* +30px: the space .sts-main's old top margin gave */ /* The collage's 62% peach stop cut through the text; here the band sits under it. */ .sts-hero--solo::before { background-image: none; } /* no photo: no band to frame it (it cut through the button) */ .sts-hero--solo.has-photo::before { background-image: linear-gradient(180deg, #FFFFFF00 70%, var(--sts-peach) 0%); } /* From tablets: a peach block behind the photo only, starting below the header. */ @media (min-width: 768px) { .sts-hero--solo.has-photo::before { inset: calc(var(--sts-header-overlap) + 30px) 0 30px 66%; background: var(--sts-peach); border-radius: 15px 0 0 15px; } } .sts-logo { text-decoration: none; } /* Text wordmark (no logo image): one line, a touch smaller on phones. Wrapped to two lines it made the header 111px instead of 90 and opened a gap under it (Luca, 2026-10-26). */ .sts-logo__name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(17px, 5vw, var(--sts-h4)); } /* Price badge: label stacked over the price in a true circle. The kit's -32px pull-up made "from" collide with a 2-digit price ($85); this fits any label and length. */ .sts-offer__badge { justify-content: center; aspect-ratio: 1; min-width: 104px; padding: 18px; } .sts-offer__lead { margin: 0 0 2px; line-height: 1.2; } .sts-offer__price, .sts-offer__price { margin-top: 0; } @media (max-width: 1024px) { .sts-offer__price { margin-top: 0; } } /* Contact block: hours in the right half (it was an empty form slot); text alone centres. */ .sts-cblock__right .sts-cblock__hours { width: 100%; max-width: 460px; } .sts-cblock--solo-text .sts-cblock__left { flex-basis: 100%; align-items: center; } .sts-cblock--solo-text .sts-cblock__text { max-width: 720px; text-align: center; } @media (min-width: 768px) { .sts-cblock__right { align-items: center; } .sts-cblock--solo-text .sts-cblock__eyebrow { align-self: center; } } /* Narrow promo: text centred vertically in the card (Luca, 2026-10-24); was 45px from the top. */ .sts-promo--narrow .sts-promo__body { justify-content: center; padding-top: 0; } .sts-promo--narrow .sts-promo__title { margin-top: 0; } /* Wide promo on phones: the photo goes below the text, in flow. Absolutely placed at the bottom, a near-square cut-out climbed under the heading and made it unreadable. */ @media (max-width: 767px) { .sts-promo--wide .sts-promo__body { order: 1; flex: none; padding-top: 30px; } .sts-promo--wide .sts-promo__img { order: 2; position: relative; z-index: 0; left: auto; display: block; width: 76%; margin: 10px auto 0; } } /* Why section on tablets: heading above, boxes full width. Side by side, each box got ~100px and titles broke mid-word ("appointme / nts" at 768). */ @media (min-width: 768px) and (max-width: 1024px) { .sts-why__inner { flex-direction: column; } .sts-why__intro, .sts-why__grid { flex: none; } .sts-why__intro { align-items: center; text-align: center; } } /* Contact boxes: a long email or URL can't widen the page (the email ran 89px past a 320px screen). */ .sts-cbox, .sts-cbox__body { min-width: 0; } .sts-cbox__value { overflow-wrap: anywhere; } /* Copyright bar: its 1300px box is wider than a 1265px screen, so the text ran to the edge. */ .sts-bar__inner { padding-inline: 20px; } /* Footer without a map image: the details take the full width. */ @media (min-width: 1025px) { .sts-foot--nomap .sts-foot__info { flex: 1 1 100%; flex-direction: row; justify-content: space-between; gap: 40px; } .sts-foot--nomap .sts-foot__upper, .sts-foot--nomap .sts-foot__lower { flex: 1 1 50%; } } .sts-hero__inner { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 92%; max-width: var(--sts-boxed); margin-inline: auto; } .sts-hero__text { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 760px; text-align: center; } .sts-hero--solo .sts-hero__mark { align-self: center; width: 48px; margin: 0; } .sts-hero--solo .sts-hero__title { margin: 0; overflow-wrap: break-word; text-wrap: balance; } .sts-hero--solo .sts-hero__cta { margin: 8px 0 0; } .sts-hero__media { width: 100%; max-width: 420px; } /* 14px frame, peach on the left 35% (as the About welcome frame). */ .sts-hero__frame { display: block; padding: 14px; border-radius: 15px; background: linear-gradient(90deg, var(--sts-peach) 35%, var(--sts-white) 0%); } .sts-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; } @media (min-width: 768px) { .sts-hero--solo { padding-top: calc(9 * var(--sts-body)); } .sts-hero--solo.has-photo .sts-hero__inner { flex-direction: row; justify-content: space-between; gap: 40px; } .sts-hero--solo.has-photo .sts-hero__text { flex: 1 1 55%; align-items: flex-start; text-align: start; } .sts-hero--solo.has-photo .sts-hero__mark { align-self: flex-start; } .sts-hero--solo.has-photo .sts-hero__media { flex: 0 1 40%; max-width: 460px; } } /* Service card without a photo: textured brand panel, content above the bar. */ .sts-card--plain { background: linear-gradient(160deg, var(--sts-cream) 0%, var(--sts-peach-light) 100%); border: 1px solid var(--sts-peach); } .sts-card--plain::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--sts-img-texture, url("../img/card-texture.png")); opacity: 0.35; } .sts-card__body { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 27vh; padding: 24px 20px 30px; } .sts-card__mark { width: 36px; height: 36px; margin-bottom: auto; object-fit: contain; } .sts-card__summary { margin: 0; font: 400 var(--sts-f14)/1.6 var(--sts-font-text); letter-spacing: 0.3px; color: var(--sts-secondary); } .sts-card__price { margin: 0; font: 700 var(--sts-f16)/1.3 var(--sts-font-text); letter-spacing: 0.2px; color: var(--sts-accent); } /* Review without a photo: initials, stacked text at every width. */ .sts-review__initials { display: grid; place-items: center; width: 64px; height: 64px; margin: 24px auto 16px; border-radius: 50%; background: var(--sts-peach); color: var(--sts-accent); font: 500 22px/1 var(--sts-font-display); letter-spacing: 1px; } @media (min-width: 1025px) { .sts-review--plain { padding: 30px 40px 40px; } .sts-review--plain .sts-review__initials { margin: 0 0 16px; } .sts-review--plain .sts-review__stars { margin: 0 0 10px; } .sts-review--plain :is(.sts-review__quote p, .sts-review__name, .sts-review__role) { margin-left: 0; } } /* Meet the stylist: ring portrait (or initials) beside the intro. */ .sts-meet { padding: calc(5 * var(--sts-body)) 0; } .sts-meet__inner { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 92%; max-width: 1100px; margin-inline: auto; } .sts-meet__ring { display: block; padding: 8px; border: 3px solid var(--sts-peach); border-radius: 50%; } .sts-meet__frame { display: grid; place-items: center; width: 240px; max-width: 70vw; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--sts-cream); } .sts-meet__photo { display: block; width: 100%; height: 100%; object-fit: cover; } .sts-meet__initials { font: 500 64px/1 var(--sts-font-display); letter-spacing: 2px; color: var(--sts-accent); } .sts-meet__text { display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: center; } .sts-meet__title { margin: 0; font: 500 var(--sts-h2)/1.2em var(--sts-font-display); letter-spacing: 0.2px; color: var(--sts-black); overflow-wrap: break-word; } .sts-meet__role { margin: 0; font: 600 var(--sts-f16)/1.4 var(--sts-font-text); letter-spacing: 0.5px; color: var(--sts-accent); } .sts-meet__bio { margin: 0; max-width: 60ch; color: var(--sts-text); } .sts-meet__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 8px; } .sts-meet__more { color: var(--sts-accent); font: 500 var(--sts-f16)/1.4 var(--sts-font-text); text-underline-offset: 4px; } @media (min-width: 768px) { .sts-meet__inner { flex-direction: row; gap: 60px; } .sts-meet__media { flex: none; } .sts-meet__frame { width: 300px; } .sts-meet__text { flex: 1 1 auto; text-align: start; align-items: flex-start; } .sts-meet__actions { justify-content: flex-start; } } @media (min-width: 1025px) { .sts-meet__frame { width: 340px; } } @media (hover: hover) and (pointer: fine) { .sts-meet__more:hover { color: var(--sts-black); } } /* About without the portrait: the story runs full width. */ .sts-welcome--plain .sts-welcome__text { flex: 1 1 100%; max-width: 820px; margin-inline: auto; text-align: center; align-items: center; } .sts-welcome--plain { padding: calc(3 * var(--sts-body)) 0 calc(2 * var(--sts-body)); } /* My work: any number of photos, square crops, 2 → 3 per row. */ .sts-work { padding: calc(3 * var(--sts-body)) 0; background: linear-gradient(180deg, var(--sts-peach) 50%, var(--sts-cream) 0%); } .sts-work__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 92%; max-width: var(--sts-boxed); margin: 0 auto; padding: 0; list-style: none; } .sts-work--n1 .sts-work__grid { grid-template-columns: 1fr; max-width: 520px; } .sts-work__item { overflow: hidden; border-radius: 15px; aspect-ratio: 1; } .sts-work__img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (min-width: 768px) { .sts-work__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } .sts-work--n2 .sts-work__grid, .sts-work--n4 .sts-work__grid { grid-template-columns: repeat(2, 1fr); max-width: 900px; } } } /* ----------------------------------------------- edit-safe image slots (2026-10-14) Clients can swap any photo (Legwork Web Edit), so no layout may depend on a photo's own shape. Each slot is locked to the ratio it renders at today (measured at 1440 / 768 / 375; it's the same at every width), so nothing moves now: - photo slots fill and crop (cover); - logos, icons and cut-out art fit inside (contain) and are never cropped. Slots that already had a fixed shape + cover (hero tiles, service cards, team, Instagram, contact-block photo) need nothing. */ @layer components { .sts-review__frame { aspect-ratio: 230 / 259; } .sts-review__frame img { object-fit: cover; } .sts-welcome__frame img { aspect-ratio: 3 / 2; object-fit: cover; } .sts-logos__item img { aspect-ratio: 192 / 81; object-fit: contain; } .sts-logo__img { aspect-ratio: 270 / 63; object-fit: contain; object-position: left center; } .sts-drawer__logo img { aspect-ratio: 270 / 63; object-fit: contain; object-position: left center; } .sts-hero__mark { aspect-ratio: 1; object-fit: contain; } .sts-eyebrow__mark, .sts-feature__icon img { object-fit: contain; } .sts-promo__img { object-fit: contain; object-position: center bottom; } .sts-promo--narrow .sts-promo__img { aspect-ratio: 503 / 316; } .sts-promo--wide .sts-promo__img { aspect-ratio: 485 / 503; } .sts-404__img img { aspect-ratio: 560 / 232; object-fit: contain; } } /* * Unlayered overrides: WordPress core prints unlayered element styles (e.g. * figure { margin: 0 0 1em }) that beat every @layer rule. Keep this small. */ .sts-review { margin: 0; } /* * Booking (Legwork Booking's widget; functions.php "booking"). The widget's own * look is Booking's "Beauty" theme (brand colours and fonts); this is the frame * around it: Book chips, the popup, the showcase switch and the booking page. */ @layer components { /* Book chip: price rows and team cards. */ .sts-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 14px; border: 1px solid var(--sts-accent); border-radius: 15px; background: transparent; color: var(--sts-accent); font: 500 var(--sts-button)/1 var(--sts-font-button); letter-spacing: 0.5px; text-decoration: none; white-space: nowrap; transition: background-color 0.2s var(--sts-ease), color 0.2s var(--sts-ease); } .sts-chip:focus-visible { outline: 2px solid var(--sts-accent); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .sts-chip:hover { background: var(--sts-accent); color: var(--sts-white); } } .sts-prow__book { flex: none; margin: 0 0 0 12px; } .sts-member__book { margin: 12px 0 0; } /* Popup: the whole screen on phones, a centred panel from tablets up. */ .sts-book { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--sts-white); color: var(--sts-secondary); overscroll-behavior: contain; opacity: 1; transform: none; transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out); } .sts-book[open] { display: flex; flex-direction: column; } @starting-style { .sts-book[open] { opacity: 0; transform: translateY(12px); } } .sts-book::backdrop { background: rgb(0 0 0 / 0.5); } html:has(.sts-book[open]) { overflow: hidden; } .sts-book__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--sts-border); background: var(--sts-cream); } .sts-book__title { margin: 0; font: 500 22px/1.2 var(--sts-font-display); color: var(--sts-black); } .sts-book__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--sts-secondary); cursor: pointer; } .sts-book__close .lw-icon { width: 20px; height: 20px; } .sts-book__close:focus-visible { outline: 2px solid var(--sts-accent); outline-offset: -2px; } @media (hover: hover) and (pointer: fine) { .sts-book__close:hover { background: rgb(153 90 50 / 0.1); } } .sts-book__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px; } @media (min-width: 768px) { .sts-book { width: min(760px, 100% - 48px); height: auto; max-height: calc(100dvh - 48px); margin: auto; border-radius: 15px; box-shadow: 0 24px 64px rgb(0 0 0 / 0.25); } .sts-book__body { padding: 24px; } } /* Showcase switch: two options, one pressed. Needs JS, like the widget itself. */ .sts-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--sts-peach); border-radius: 15px; background: var(--sts-cream); } html:not(.js) .sts-switch { display: none; } .sts-switch__opt { min-height: 44px; padding: 10px 12px; border: 0; border-radius: 11px; background: transparent; color: var(--sts-secondary); font: 500 14px/1.2 var(--sts-font-button); letter-spacing: 0.3px; cursor: pointer; transition: background-color 0.2s var(--sts-ease), color 0.2s var(--sts-ease); } .sts-switch__opt[aria-pressed="true"] { background: var(--sts-accent); color: var(--sts-white); } .sts-switch__opt:focus-visible { outline: 2px solid var(--sts-accent); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .sts-switch__opt:not([aria-pressed="true"]):hover { background: rgb(153 90 50 / 0.1); } } .sts-switch__note { margin: 12px 0 20px; font: 400 var(--sts-f14, 14px)/1.5em var(--sts-font-text); color: var(--sts-text); } .sts-switch__note[hidden], .sts-showcase__panel[hidden] { display: none; } .sts-showcase__panel { min-height: 420px; } /* the widget has no placeholder: keep the space while it loads */ @media (min-width: 768px) { .sts-switch { display: inline-grid; grid-template-columns: auto auto; } .sts-switch__opt { padding: 10px 22px; } } /* Booking page. */ .sts-booking { padding: 50px 20px 80px; } .sts-booking__inner { max-width: 820px; margin: 0 auto; } @media (min-width: 1025px) { .sts-booking { padding: 80px 20px 110px; } } }