/* ============================================================ ISAFLOWERS BY VALERIE ------------------------------------------------------------ Sampled from her own logo file — the real one, not a screenshot — with scripts/brandkit.py, then corrected by hand where the sampler was wrong. WHAT THE SAMPLER GOT WRONG, and why it is worth knowing: run on a screenshot of her Instagram avatar it called this brand NEUTRAL and built a taupe-grey ramp. Her pink is a tiny share of the pixels — one wash behind one bloom — so by area it loses to a page of black script. By MEANING it is the whole brand. The ramp below is built from the pink. Measured off the clean file: paper #faf5f1 pink #f8b4b9 ink #060605 green #a3d28d the word FLORIST #5e5d5b HER PRICE FLYER IS A DIFFERENT PALETTE — hot pink headings on plain white. That flyer is a Google Doc, not branding; the logo is the identity, and hot pink alongside this script would fight it. If she asks for the flyer pink, it goes here in --ribbon and --pink-deep and nowhere else. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Jost:wght@300;400;500;600&family=Great+Vibes&display=swap'); :root{ /* ---- 1. FONTS -------------------------------------------- typekit.py on her wordmark: contrast 3.81, slant 18.6°, serifs 0.19 — "flowing script", which is exactly what it is. Run again on "FLORIST" alone: serifs 1.28, slant 0°, spacing 0.45 — an upright serif, widely letterspaced. So her lettering is two ideas, and the site uses both: Isaflowers.byvalerie formal copperplate -> Great Vibes FLORIST letterspaced serif -> Cormorant Garamond Cormorant is the load-bearing one. It is high-contrast the way her script is, and in tracked-out caps it IS the FLORIST line — which is why it also sets every button on the page rather than a sans arriving from nowhere. Body is Jost: a quiet geometric sans, so a page of policy stays comfortable at length and never competes with the display faces above it. --------------------------------------------------------- */ --font-script: 'Great Vibes', cursive; --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', 'Helvetica Neue', sans-serif; /* ---- 2. COLOURS ------------------------------------------ Every value checked against her paper. Ratios in comments are against --cream unless they say otherwise. */ --cream: #faf5f1; /* her paper, straight off the logo file */ --blush: #fbeceb; /* calendar day cells, hover fills */ --blush-2: #f2dcda; /* hairlines, borders */ --pink: #f8c9cb; /* dotted leaders, light borders */ --pink-deep: #b8555f; /* announcement bar — 4.66:1 with white on it */ --ribbon: #ad4b56; /* selected day and time, solid buttons — 5.36:1 with white on it */ --pink-dark: #a3444f; /* prices, category headings — 5.55:1 */ --plum: #14100f; /* her name and section headings — 17.5:1. Near-black on purpose: her logo's script is black, and a pink heading would be a colour her brand does not use. */ --ink: #2a2522; /* body text — 14.0:1 */ --ink-soft: #736962; /* captions, hints — 4.9:1 */ --white: #fffdfb; /* cards, warmed so they sit on the paper rather than punching a hole in it */ /* White on this reads at 4.66:1, so the bar keeps core's white type and needs no flip. */ --announce-bg: linear-gradient(90deg, #b8555f, #a3444f); /* Availability dots. SEMANTIC, and the green is the green of the stems in her own bouquet rather than a green from nowhere — deepened from #a3d28d, which is lovely in artwork and invisible as a 6px dot on cream. */ --pip-open: #5f8b4a; --pip-taken: #e6d5d3; --glow: 150,110,105; /* warm rose-taupe, never grey */ --glow-deep: 60,40,38; /* ---- 3. BACKGROUND ARTWORK ------------------------------- Her own flowers, cut out of her own logo and scattered at 8-13% opacity. Nothing here was drawn and nothing came from another client's folder. Kept very faint on purpose: her page is mostly a price list and a calendar, and a floral wallpaper that competes with either of those makes both harder to read. It should register as texture, not pattern. */ --bg-tile: url(bg-tile.png); --bg-size: 460px; --bg-size-mobile: 300px; --bg-opacity: .9; --bg-opacity-admin: .35; /* Set again below, where the two marks are split by size. */ --motif: url(motif.png); /* The bloom is a dustier rose (#bd8e8c) than the pink in her logo (#f8b4b9), and that is the right way round: at 19px on a bullet a pale pink on cream nearly disappears, and this one still reads. */ } /* ============================================================ SHAPE LANGUAGE — crisp, not glossy ------------------------------------------------------------ This is where her site stops looking like the lash and nail ones, and the decision is taken from her logo rather than from a mood. Her mark is fine black line art, a high-contrast script and a serif tracked out to 0.45 of its letter width. That is an editorial register: precise, printed, quiet. The glossy treatment those sites use — pill buttons, 26px radii, deep rose glow — would read as a different company. So: small radii everywhere, hairline borders, and shadows near flat. The softness comes from the palette and the wallpaper, not from the corners. ============================================================ */ :root{ --r-btn: 3px; --r-card: 6px; --r-tile: 4px; --r-input: 3px; --r-msg: 6px; --r-img: 3px; --r-nav: 50%; --r-deal: 6px; --bw: 1px; --bw-card: 1px; --sh-card: 0 2px 16px rgba(var(--glow),.10); --sh-btn: 0 1px 3px rgba(var(--glow),.18); --sh-btn-h: 0 3px 10px rgba(var(--glow),.26); --sh-soft: 0 1px 6px rgba(var(--glow),.12); --sh-lift: 0 3px 12px rgba(var(--glow),.20); --sh-deal: 0 2px 16px rgba(var(--glow),.12); /* The daisy is 240x256 — very slightly taller than wide, and these follow that rather than the template's wide bow. */ /* Sized off the bloom's own 1.11:1, wider than tall — the daisy this replaced was the other way round, so these are not carried over. */ --motif-rot: -8deg; --motif-bullet-w: 21px; --motif-bullet-h: 19px; --motif-badge-w: 33px; --motif-badge-h: 30px; /* Buttons ARE the FLORIST line. Same face, same upright caps, same wide tracking — the one gesture on the page taken directly off her logo. */ --font-btn: 'Cormorant Garamond', Georgia, serif; --btn-weight: 600; --btn-transform: uppercase; --btn-tracking: .22em; --pin-size: 16px; --logo-max: 420px; /* her wordmark is 1.6:1 and reads best wide */ --ty-card: #fffdfb; --ty-line: #e6d5d3; --ty-icon: #a3444f; --ty-heart: #ad4b56; } /* ============================================================ THE SCRIPT NEEDS ROOM ------------------------------------------------------------ Great Vibes has long ascenders and descenders — the I and the y in her own name both run well outside the line box. At core's default line-height they collide with whatever is above and below. This is a type problem, not a spacing preference, so it lives here rather than in a margin somewhere. ============================================================ */ h1, .script, .ty-script{ line-height: 1.45 } /* ============================================================ SMALL CAPS THAT ARE ACTUALLY SMALL CAPS ------------------------------------------------------------ Cormorant is a light face at display sizes and its uppercase loses weight badly at label sizes. Section labels get a notch more weight so a tracked-out "BOOKING POLICY" still reads as a heading rather than a whisper. ============================================================ */ label, .sub{ font-weight: 500 } /* ============================================================ TWO MARKS, SPLIT BY WHERE THEY FIT ------------------------------------------------------------ THE BOUQUET IS THE MARK. It is on the dividers under every heading and it is what the site is built around. It is also 2.5 times taller than it is wide, and three places render the mark at around 20-30px: the badge perched on a button, the bullets down the policy list, and the little mark on the confirmation card. At that size the whole arrangement collapses — the flowers land four pixels across and the stems are most of what you see. The single bloom holds at 19px. So the bloom covers exactly those three and nothing else. The switch is one line: --motif is inherited, so setting it on the parent is enough for the ::before and ::after that actually paint it. Everything the rule does not name keeps the bouquet. ============================================================ */ :root{ --motif: url(motif.png); } /* the bouquet */ .cta.bowed, /* Book Now, and the Submit button */ .card li, /* the policy bullets */ #bkMsg{ /* the mark on the confirmation card */ --motif: url(bloom.png); } /* The dividers are tags carrying the file directly rather than the variable, so they get the bouquet with no help. They only need a height: core sets width="68", and at the bouquet's aspect that would render it 173px tall. */ .sub .bow[data-divider]{ width:auto; height:96px; margin-top:1rem } @media(max-width:600px){ .sub .bow[data-divider]{ height:78px } }