/* ============================================================ NAILED X ANAHI — theme ------------------------------------------------------------ Palette sampled from her wordmark. brandkit read the brand as CHROMATIC and built the ramp from #f281be. THE LOGO IS NOW A TRUE ALPHA MATTE. Edgar supplied the same artwork twice, once on white (#fefefe) and once on her pink (#f8d6f1), pixel-aligned. Two known grounds solve the matte exactly — for every pixel O1-O2 = (1-a)(B1-B2) — which recovered the white script AND its neon glow that a region-based key-out destroyed. Why that matters here: the header no longer has to be the one colour her logo was baked onto. The page can be near-white with her pink used as bands and light, which is what gives this build the value contrast the flat-pink version lacked. Neon is her own device: her signature is white with a pink outer glow. It is carried through the page rather than left sitting only in the logo. ============================================================ */ @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=Jost:wght@300;400;500;600&family=Sacramento&display=swap'); :root{ --font-script: 'Sacramento', cursive; --font-display: 'Bodoni Moda', serif; --font-body: 'Jost', sans-serif; /* ---- COLOURS -------------------------------------------- The page is near-white now and her pink does the accenting. Flat pale-pink-on-pale-pink had no dark value anywhere on it, which is what read as dull no matter how good the type was. --plum is near-black and carries the headings. */ --cream: #fffafd; /* page */ --blush: #fbe0f2; /* calendar cells, footer band */ --blush-2: #f4c2e4; /* hairlines, borders */ --pink: #f0a8d6; --pink-deep: #e87dbe; --ribbon: #f281be; /* her accent — the colour that glows */ --pink-dark: #a83a74; /* prices */ --plum: #1a1016; /* headings — the dark anchor */ --ink: #2e2129; --ink-soft: #7c6a75; --white: #ffffff; --pip-open: #4f8a5e; --pip-taken: #c79ab7; --glow: 242,129,190; --glow-deep: 26,16,22; /* Accent surfaces. Her accent at full strength carries white text at only 2.4:1, so --accent-strong is the same hue pushed down its ramp until white clears 4.35:1. */ --accent-strong: #d43c8d; --announce-bg: linear-gradient(90deg, #b02f76 0%, #d43c8d 100%); --on-accent: #ffffff; --sel-bg: var(--accent-strong); --deal-top: #ffffff; --igbox-top: #ffffff; --bg-tile: none; --bg-size: 420px; --bg-size-mobile: 300px; --bg-opacity: 0; --bg-opacity-admin: 0; --motif: url(motif.png); /* HER hand-drawn heart, keyed off its white ground with --hollow so the middle shows the page through. Not drawn by me. */ --announce-h: 5.2rem; --h1-glow: 0 0 12px rgba(var(--glow),.55), 0 0 30px rgba(var(--glow),.35); } /* ---- SHAPE ------------------------------------------------- */ :root{ --r-btn:8px; --r-card:20px; --r-tile:10px; --r-input:8px; --r-msg:16px; --r-img:14px; --r-nav:50%; --r-deal:20px; --bw:1.5px; --bw-card:1px; --sh-card: 0 16px 44px rgba(var(--glow),.20); --sh-btn: 0 10px 26px rgba(212,60,141,.34), 0 0 24px rgba(var(--glow),.55); --sh-btn-h: 0 14px 34px rgba(212,60,141,.44), 0 0 34px rgba(var(--glow),.8); --sh-soft: 0 5px 18px rgba(var(--glow),.22); --sh-lift: 0 12px 30px rgba(212,60,141,.36), 0 0 28px rgba(var(--glow),.6); --sh-deal: 0 16px 44px rgba(var(--glow),.24); --motif-rot:0deg; --motif-bullet-w:24px; --motif-bullet-h:24px; --motif-badge-w:34px; --motif-badge-h:34px; --font-btn:'Jost',sans-serif; --btn-weight:500; --btn-transform:uppercase; --btn-tracking:.14em; --pin-size:13px; --logo-max:470px; --ty-card:#ffffff; --ty-line:#f4c2e4; --ty-icon:#a83a74; --ty-heart:#f281be; } /* ============================================================ COMPOSITION + NEON All of this targets core's own classes from the client folder. core/ is untouched, so no other client moves. ============================================================ */ #announce{ text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; font-weight:500; padding:.72rem 1rem; box-shadow:0 6px 22px rgba(212,60,141,.34); position:relative; z-index:2; } /* Hero band — possible only because the wordmark is matted. */ /* The full-screen sizing is core's landing gate, not mine — brand.js sets landing:true and core holds the header at 100svh minus the announcement strip. --announce-h has to match that strip's REAL height or the few leftover pixels make the gate scrollable, which is the one thing it cannot be. Hers wraps to two lines on a phone, so it is taller than core's 3.6rem default. */ header{ padding-left:1.5rem; padding-right:1.5rem; background: radial-gradient(95% 85% at 12% 4%, #ffffff 0%, rgba(255,255,255,0) 58%), radial-gradient(85% 75% at 88% 96%, #f7bfe4 0%, rgba(247,191,228,0) 62%), linear-gradient(140deg,#fbe6f6 0%,#f8d6f1 46%,#f3bde6 100%); border-bottom:1px solid #f0b6dd; } .tagline{ color:#7a5468; } header::before, header::after{ content:''; position:absolute; pointer-events:none; background:var(--motif) no-repeat center/contain; } header::before{ width:54px; height:54px; top:40px; left:7%; transform:rotate(-12deg); } header::after { width:34px; height:34px; top:82px; right:9%; transform:rotate(10deg); } @media (max-width:640px){ header::before{ width:34px; height:34px; top:24px; left:5%; } header::after { width:22px; height:22px; top:56px; right:6%; } } /* Buttons: lit accent, and an outlined partner. */ /* White button, pink rule, her glow doing the lifting. */ .cta, .cta.bowed{ background:#fff; color:var(--pink-dark); border-color:var(--ribbon); font-size:.95rem; } .cta:hover, .cta.bowed:hover{ background:var(--pink-dark); color:#fff; border-color:var(--pink-dark); } /* Her social buttons live ON the landing screen. Core hides ghost CTAs behind the gate by default, and for good reason — on a two-trade gate the extra buttons pushed the second Book button under the fold. She has ONE book button, so there is room for three in the stack, and it is measured: on a 360x740 phone the last button still sits well above the fold. Core's default is untouched for everyone else. */ html.landing:not(.chosen) header .cta.ghost{ display:inline-flex; } /* ...but Shop Presets is a GATE button only. Once someone is through, core collapses the header into a masthead and keeps the ghost buttons, which parked a SECOND Shop Presets directly above Services & Prices. Instagram earns its place there — it is how she is reached. A navigation button pointing further down the same page does not; the toggle beside her prices is the way in from that point on. */ html.landing.chosen header #shopPresetsBtn{ display:none; } /* Tighter rhythm — the flat build was mostly empty pink. */ section{ padding:2.9rem 1.5rem; } /* Dark caps anchor, lit script beneath. */ h2{ text-transform:uppercase; letter-spacing:.15em; font-weight:400; font-size:clamp(1.7rem,4.6vw,2.6rem); color:var(--plum); } .sub{ font-family:var(--font-script); font-style:normal; color:#ec5aa8; font-size:clamp(2rem,5.4vw,2.85rem); line-height:.95; letter-spacing:0; text-transform:none; margin:.15rem 0 1.6rem; text-shadow:0 0 10px rgba(var(--glow),.85), 0 0 26px rgba(var(--glow),.55), 0 0 48px rgba(var(--glow),.30); } .sub .bow{ margin-top:1rem; } /* Price list */ .cat h3{ font-size:1rem; letter-spacing:.22em; color:var(--plum); border-bottom-color:var(--blush-2); } .svc .dots{ display:none; } .svc{ padding:.7rem 0; border-bottom:1px solid #fbeaf5; } .svc .price{ font-size:1.35rem; } /* ---- CALENDAR CORNER HEARTS — OFF --------------------------------- Core ships .cal-corner.tl/.br and leaves them off unless a theme opts in, so removing the opt-in is all that is needed. Parked here with the values that were measured to sit symmetrically, in case they come back: :root{ --cal-corner-on:block; --cal-corner-size:72px; --cal-corner-fx:drop-shadow(0 0 10px rgba(var(--glow),.9)); --cal-corner-x-tl:-26px; --cal-corner-y-tl:-16px; --cal-corner-x-br:-26px; --cal-corner-y-br:-36px; --cal-corner-rot-tl:-12deg; } .cal-corner.br{ transform:rotate(12deg) scaleX(-1); } <- mirrored @media(max-width:600px){ .cal-corner{width:52px} .cal-corner.tl{top:-11px;left:-20px} .cal-corner.br{bottom:-27px;right:-18px} } ------------------------------------------------------------------- */ /* Lit selection in the calendar. */ .day.sel, .slot.sel{ box-shadow:0 0 22px rgba(var(--glow),.9); } /* Dividers she does not want. Only the policy heart is left. */ .bow[data-divider="deals"], .bow[data-divider="services"], .bow[data-divider="booking"], .bow[data-divider="policy"]{ display:none; } /* ---- WHY THERE IS NO filter: drop-shadow ANYWHERE HERE ------------- It looked like the obvious way to give the hearts and the wordmark a neon halo, and it puts a faint pale rectangle behind every element it touches — the "invisible box". Not the blur: measured at 26px, 10px and 4px the rectangle is IDENTICAL, and it disappears entirely at filter:none. Declaring a filter promotes the element to its own compositing layer and the layer's box shows through against a gradient. No radius avoids it, so the property is simply not used. The neon that IS here comes from mechanisms without that problem: text-shadow on the script lines, box-shadow on buttons and cards, and the halo her wordmark already carries in the artwork itself. ------------------------------------------------------------------- */