/* ============================================================ THEME — D.lashxed · Diana Aguilera ------------------------------------------------------------ Her branding is stark editorial monochrome: a thin signature wordmark over a hairline rule, wide-tracked light caps, and a sheet of near-white paper with nothing else on it. brandkit.py read her as NEUTRAL (accent saturation 0.00, contrast 20.9:1), so the ramp is mixed paper -> ink with no tint invented anywhere. The shape language follows the same idea: near-square corners, hairline borders, and shadows so shallow they only separate a card from the page rather than lifting it off it. Anything glossy or rounded would read as somebody else's brand. ============================================================ */ /* ---- 1. FONTS ------------------------------------------------- Mrs Saint Delafield — her wordmark is a thin, long-tailed signature; this is the closest web face. Jost — geometric deco caps, letterspaced. Her policy slides are set in a high-contrast deco sans and this carries that read. Manrope — quiet body text that stays out of the way. --------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Manrope:wght@300;400;500;600&family=Mrs+Saint+Delafield&display=swap'); :root{ --font-script: 'Mrs Saint Delafield', cursive; --font-display: 'Jost', sans-serif; --font-body: 'Manrope', sans-serif; /* ---- 2. COLOURS ------------------------------------------- Sampled from her logo and her policy slides. Her paper is #fefefe, so --cream is set to it exactly and her wordmark floats with no visible box behind it. ---------------------------------------------------------- */ --cream: #fefefe; /* page background — her paper, to the byte */ --blush: #f4f4f4; /* calendar day cells, hover fills */ --blush-2: #e4e4e4; /* hairlines, borders */ --pink: #c9c9c9; /* dotted leaders, light borders */ --pink-deep: #4e4e50; /* announcement bar (left), ghost buttons */ --ribbon: #101011; /* selected day/slot, admin buttons */ --pink-dark: #3a3a3c; /* prices, category headings, button text */ --plum: #0a0a0b; /* HER NAME + section headings — her ink */ --ink: #1f1e1f; /* body text */ --ink-soft: #86868a; /* captions, taglines, hints */ --white: #ffffff; /* cards, a hair brighter than the page */ /* The announcement bar runs --pink-deep -> --ribbon under white text: 8.6:1 at the light end, 18.7:1 at the dark. Both clear. */ /* Availability dots. She has no accent colour to spend here, so these are separated by weight instead of hue: a solid ink dot means the slot is free, a pale grey one means it is gone. Checked against her paper, not guessed. */ --pip-open: #101011; --pip-taken: #d9d9d9; --glow: 0,0,0; --glow-deep: 0,0,0; /* ---- 3. SHAPE --------------------------------------------- Near-square. Her logo is a rule and a signature; curves would soften a brand that is deliberately hard-edged. ---------------------------------------------------------- */ --r-btn: 1px; --r-card: 2px; --r-tile: 1px; --r-input: 1px; --r-msg: 2px; --r-img: 2px; --r-nav: 50%; /* the month arrows stay round — they read as controls */ --r-deal: 2px; --bw: 1px; /* hairline, like the rule under her wordmark */ --bw-card: 1px; /* Flat and shallow. These separate; they do not lift. */ --sh-card: 0 1px 2px rgba(var(--glow),.05); --sh-btn: 0 1px 2px rgba(var(--glow),.07); --sh-btn-h: 0 2px 6px rgba(var(--glow),.11); --sh-soft: 0 1px 2px rgba(var(--glow),.05); --sh-lift: 0 2px 5px rgba(var(--glow),.09); --sh-deal: 0 1px 3px rgba(var(--glow),.06); /* ---- 4. ARTWORK ------------------------------------------- bloom.png is the line-drawn blossom Diana supplied, keyed off its white field so it carries no box, and thickened a touch because the original hairline vanished at the 19px policy bullets. bg-bloomtile.png is the same blossom at 20% alpha, scattered and wrapped so the tile is seamless. ---------------------------------------------------------- */ --bg-tile: url(bg-bloomtile.png); --bg-size: 860px; /* on a wide screen a 640 tile repeated often enough that a blossom landed on her wordmark and another sat behind a section divider */ --bg-size-mobile: 560px; --bg-opacity: .4; --bg-opacity-admin: .22; --motif: url(bloom.png); /* The blossom is square, not a wide sweep, so the bullet and badge boxes are square too — the old lash ratios cropped its petals. */ --motif-rot: 0deg; --motif-bullet-w: 20px; --motif-bullet-h: 20px; --motif-badge-w: 29px; /* the blossom's stamen centre is dense, so at 34 the sticker on BOOK NOW read as a blot */ --motif-badge-h: 29px; --logo-max: 430px; /* Buttons in Jost caps, opened right up. This is the single gesture that carries her deco slides onto the page. */ --font-btn: 'Jost', sans-serif; --btn-weight: 400; --btn-transform: uppercase; --btn-tracking: .22em; } /* Her headings are wide-tracked caps on every slide she has ever posted. Jost at 400 is the right weight; the tracking is what makes it hers. */ .cat h3{ letter-spacing:.16em; text-transform:uppercase; font-weight:400 } /* The month sits between two arrows in a fixed row, so it gets less tracking than the section headings — at .16em "SEPTEMBER 2026" wrapped to two lines on a phone. */ .cal-head b{ letter-spacing:.1em; text-transform:uppercase; font-weight:400; white-space:nowrap } /* One blossom per section is plenty — under the page title and beside each policy. Under the price list and the deals as well, it stopped being a mark and became wallpaper. */ .bow[data-divider="services"], .bow[data-divider="deals"]{ display:none } /* ============================================================ The announcement bar. ------------------------------------------------------------ core runs it as a dark gradient under white text, which on a pink brand is a ribbon and on hers was a black band laid across the top of an otherwise white page. #ececec is sampled off her own Instagram highlight covers, so it is a tone she already uses rather than one invented for her. Her ink on it clears 14:1, and a hairline underneath lands it on the page instead of interrupting it. body #announce, not #announce: core's inline