/* ============================================================ THEME — j0synailedit · Fairfield, CA ------------------------------------------------------------ Sampled from HER OWN branding: the glossy airbrushed wordmark and the flat hot pink her price list and policy slides are printed on. brandkit read this brand as CHROMATIC, ramp built from #de168b. The paper value is the one the logo decodes to AFTER JPEG compression (252,106,179), not the value before it. A single step of drift puts a faint rectangle round her wordmark on a ground this saturated. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400&family=Poppins:wght@300;400;500;600;700&family=Yellowtail&display=swap'); :root{ --font-script: 'Yellowtail', cursive; --font-display: 'Bodoni Moda', serif; --font-body: 'Poppins', sans-serif; /* ---- COLOURS ------------------------------------------- */ --cream: #fc6ab3; /* her flyer pink */ --blush: #ffdcef; /* calendar day cells, hover fills */ --blush-2: #f9b4d9; /* hairlines, borders */ --pink: #f486c6; /* dotted leaders, light borders */ --pink-deep: #d61b86; /* announcement bar, button rims */ --ribbon: #b90f6d; /* selected day/slot, admin buttons */ --pink-dark: #6f0640; /* prices, category headings */ --plum: #2c0518; /* section headings, on her pink */ --ink: #24101b; /* body text */ --ink-soft: #63213f; /* captions, taglines, hints */ --white: #fff5fb; /* cards */ /* Availability dots. Checked by eye on --blush day cells: open is her deep magenta at full strength, taken is a desaturated mauve — apart in hue AND lightness. */ --pip-open: #c9127a; --pip-taken: #cdb6c1; --glow: 182,15,109; --glow-deep: 44,5,24; /* ---- PINK HERO, WHITE PAGE -------------------------------- Her branding keeps the hot pink; everything from the price list down is white, and the header fades into it. The fade lives on
rather than on the page, because a transition tied to the DOCUMENT is what she asked for and a page background cannot do it: --page-bg lands on html, where holding any screen-sized paint needs background-attachment:fixed — which iOS Safari does not honour, and iPhones are nearly all of her traffic. Painting the hero on the header itself is correct everywhere and scrolls away with the branding, which is the point. header carries overflow:hidden in core, so the bloom cannot bleed past it. The extra bottom padding keeps her buttons clear of the white fade. --cream stays her pink: core reads it for the deposit panel on the confirmation, which should still be tinted. ------------------------------------------------------------- */ --page-bg: #ffffff; --bg-tile: none; --motif: url(motif.png); } /* ============================================================ SHAPE LANGUAGE = glossy and bezel-set. Her lettering is airbrushed, rounded and lit from above, so the page runs pill buttons, generous radii and deep glow. ============================================================ */ :root{ --r-btn: 999px; --r-card: 24px; --r-svc-shot: 14px; --r-tile: 14px; --r-input: 14px; --r-msg: 20px; --r-img: 18px; --r-nav: 50%; --r-deal: 24px; --bw: 1.5px; --bw-card: 1px; --sh-card: 0 14px 38px rgba(var(--glow),.22); --sh-btn: 0 6px 18px rgba(var(--glow),.34); --sh-btn-h: 0 10px 26px rgba(var(--glow),.44); --sh-soft: 0 4px 14px rgba(var(--glow),.18); --sh-lift: 0 8px 22px rgba(var(--glow),.32); --sh-deal: 0 14px 38px rgba(var(--glow),.24); --motif-rot: -10deg; --motif-bullet-w: 22px; --motif-bullet-h: 20px; --motif-badge-w: 34px; --motif-badge-h: 31px; --font-btn: 'Poppins', sans-serif; --btn-weight: 600; --btn-transform: uppercase; --btn-tracking: .1em; --pin-size: 17px; --ty-card: #fff5fb; --ty-line: #f6c3de; --ty-icon: #b90f6d; --ty-heart: #d61b86; } /* ============================================================ HER BOOK NOW BUTTON ------------------------------------------------------------ The bubble: bright pink inside rather than a deep magenta, a white sheen across the top half and a soft inner shade at the base, so it reads as a lit glossy capsule the way her 3D lettering does. The butterfly badge stays perched on the corner. Scoped to .cta.bowed so it takes the primary actions (Book Now, Request Appointment, Add to Calendar) and leaves the Instagram ghost as the light pill beside it — two filled pills in a row would give the page no first move. The base stop stays around #d21a80: the label is white, and lightening the bottom of the capsule any further drops it under 4.5:1 where the text actually sits. Two classes, so it beats core's .cta:hover on specificity. Nothing here belongs in core: it is her shape language, not the product's. ============================================================ */ .cta.bowed{ color:#fff; font-family:var(--font-script); font-weight:400; text-transform:none; letter-spacing:.012em; font-size:var(--btn-size-script, clamp(1.3rem, 5.6vw, 1.68rem)); padding:.58rem clamp(1.25rem, 6vw, 2.6rem); border-color:rgba(255,255,255,.62); background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.16) 42%, rgba(255,255,255,0) 54%), linear-gradient(180deg, #ff63bd 0%, #fb3ba6 34%, #ea2093 64%, #d21a80 100%); box-shadow: var(--sh-btn-h, 0 10px 26px rgba(var(--glow),.44)), inset 0 1.5px 0 rgba(255,255,255,.8), inset 0 -4px 10px rgba(150,10,84,.3); text-shadow:0 1px 2px rgba(140,8,78,.42); } .cta.bowed:hover{ color:#fff; border-color:rgba(255,255,255,.85); background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.2) 42%, rgba(255,255,255,0) 54%), linear-gradient(180deg, #ff7bc9 0%, #ff4bb0 34%, #f4289c 64%, #dd1f88 100%); box-shadow: 0 13px 32px rgba(var(--glow),.52), inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -4px 10px rgba(150,10,84,.26); } /* ============================================================ HER HEADINGS AS ARTWORK ------------------------------------------------------------ "Services & Prices" and "Policy" are her own glossy lettering rather than type. The

text stays in the markup and is only collapsed to font-size:0 — it is still announced by a screen reader and still what the page title and share text read from, so the words and the picture must stay in step. If you change one, change headings{} in brand.js to match. Keyed onto transparency, not flattened, so the page bloom shows through behind them the way it does behind the logo. The artwork carries its own butterflies, so the divider bow under these two headings is hidden — a third butterfly in a stack of three read as clutter. Booking keeps its bow: that heading is still type. ============================================================ */ #services-sec h2, #booking h2, #policy-sec h2{ font-size:0; line-height:0; letter-spacing:0; margin-bottom:.5rem; /* A wash of her pink behind each one, so the artwork is not stranded on bare white. Same #fc6ab3 as the hero, only faint. The padding is what makes it work: the gradient has to reach fully transparent INSIDE the box, or the box's own edge becomes a visible pink rectangle. Give it room to fade and there is no edge to see. Keep the last stop under 100% for the same reason. */ padding:2.6rem 0 1.6rem; background:radial-gradient(41% 47% at 50% 46%, rgba(252,106,179,.52) 0%, rgba(252,106,179,.24) 46%, rgba(252,106,179,0) 74%); } #services-sec h2::before, #booking h2::before, #policy-sec h2::before{ content:''; display:block; margin:0 auto; background-repeat:no-repeat; background-position:center; background-size:contain; } #services-sec h2::before{ width:min(400px, 76vw); aspect-ratio:1.244; background-image:url(h-services.webp); } #booking h2::before{ width:min(430px, 82vw); aspect-ratio:1.241; background-image:url(h-booking.webp); } #policy-sec h2::before{ width:min(310px, 62vw); aspect-ratio:1.167; background-image:url(h-policy.webp); } .bow[data-divider="services"], .bow[data-divider="booking"], .bow[data-divider="policy"]{display:none} /* ============================================================ THE HERO ------------------------------------------------------------ Her pink and her airbrush, ending in a fade to the white page. Last layer is the flat pink; the fade sits on top so it wins over the bloom at the bottom edge. ============================================================ */ header{ padding-bottom:5rem; background: linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.75) 84%, #ffffff 100%), radial-gradient(68% 54% at 50% 32%, rgba(255,247,253,.80) 0%, rgba(255,228,247,.42) 46%, rgba(255,228,247,0) 78%), radial-gradient(122% 104% at 50% 38%, rgba(252,106,179,0) 42%, rgba(190,18,113,.32) 100%), #fc6ab3; }