/* Theme Name: LocaLilly Theme URI: https://localilly.com.au Template: lamoureux Author: Lamoureux Lane Description: LocaLilly — find your local Lilly, Jack, Mia or Mac. An enamelled street sign, purple with a mint ILLY. This file holds tokens and nothing else; the look is assembled from them in assets/css/localilly.css. Version: 0.1.0 Requires PHP: 8.2 Text Domain: localilly */ /* * Tokens only. * * A rule with a selector belongs in assets/css/localilly.css. This file answers * one question: what does LocaLilly look like. Everything else reads the * answers. * * THE MATERIAL, AND IT IS THE WHOLE BUILD. * * Her logo is a street nameplate — enamel, a bright inner keyline, cut corners, * and a shine that only ever falls across the plate rather than behind type. * So the site is made of plates. A category is a plate on a corner post. A * young person's card is her own nameplate. One substance carrying one meaning * does more than any amount of decoration. * * THE PALETTE IS MEASURED RATHER THAN CHOSEN. * * Sampled off Untitled-design-85.png, taking the brightest and most saturated * member of each hue family rather than the average — an average of a logo * returns its shadows. The earlier navy plate ran #284773 with cream, and the * mint survived that redesign unchanged, so mint is the constant and the two * grounds are the variable. */ :root { /* The plate. */ --purple: #792DA0; --purple-lit: #9A4FC4; --purple-mid: #5A1F7D; --purple-deep: #3F1B66; /* The ILLY. The one colour that survived her redesign. */ --mint: #38E8CB; --mint-lit: #7DF4DF; --mint-deep: #12836F; /* The enamel, and the keyline that catches the light. */ --enamel: #F6F1F8; --cream: #F6F1F8; --keyline: rgba(255, 255, 255, .92); /* Three faces, each with one job. */ --font-util: 'Rubik', system-ui, sans-serif; --font-head: 'Abril Fatface', Georgia, serif; --font-hand: 'Caveat', 'Segoe Script', cursive; /* Structure reads these. */ --ground: var(--purple-deep); --measure: 1180px; /* Enamel shine. Across a plate, never behind type. */ --satin: linear-gradient(118deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 22%, rgba(0,0,0,.14) 48%, rgba(255,255,255,.20) 66%, rgba(0,0,0,.10) 84%, rgba(255,255,255,.08) 100%); /* The ground carries a bloom so it has body rather than sitting flat. */ --bloom: radial-gradient(58% 52% at 16% 8%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 62%), radial-gradient(54% 48% at 88% 96%, rgba(56,232,203,.20) 0%, rgba(56,232,203,0) 64%), radial-gradient(46% 44% at 96% 6%, rgba(154,79,196,.30) 0%, rgba(154,79,196,0) 62%); --bloom-soft: radial-gradient(56% 50% at 14% 6%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 62%), radial-gradient(50% 46% at 90% 98%, rgba(56,232,203,.16) 0%, rgba(56,232,203,0) 64%); /* * Every heading is lifted, never flat — the letters stand off the plate the * way cast letters stand off enamel. Ten layers is the ceiling on large * type, and a stroke never shares an element with a multi-step shadow. */ --lift: 0 2px 0 rgba(28,8,48,.55), 0 4px 0 rgba(28,8,48,.34), 0 6px 0 rgba(28,8,48,.18), 0 14px 28px rgba(20,5,36,.60); --surface-shadow: inset 0 2px 0 rgba(255,255,255,.42), 0 20px 44px rgba(20,5,36,.44); --surface-shadow-soft: inset 0 2px 0 rgba(255,255,255,.44), 0 12px 26px rgba(20,5,36,.32); /* The entrance. */ --entrance: radial-gradient(60% 50% at 22% 14%, rgba(154,79,196,.90) 0%, rgba(154,79,196,0) 66%), radial-gradient(60% 50% at 82% 92%, rgba(56,232,203,.40) 0%, rgba(56,232,203,0) 64%), var(--purple-deep); --entrance-gap: clamp(8px, 1.4vw, 16px); --entrance-fade-height: min(26svh, 14rem); --entrance-fade: linear-gradient(to bottom, rgba(63,27,102,0) 0%, rgba(63,27,102,.55) 58%, var(--purple-deep) 100%); /* * --mark-image is declared in functions.php, never here, and it is * absolute rather than relative. * * A relative url() inside a custom property resolves against the * stylesheet that USES the property, never the one that declares it. The * parent's base.css is what reads this token, so a relative path written * here resolves against themes/lamoureux/assets/css/ and returns 404 — * measured, not assumed. It fails silently: the mark is simply absent, * which reads as a missing file rather than as a resolution rule. * * Found by the Honour Her session, 21 August 2026. */ --mark-ratio: 1150 / 750; --mark-space: clamp(52px, 11vw, 112px); --mark-shadow: drop-shadow(0 18px 36px rgba(20,5,36,.58)); --anchor-space: clamp(56px, 11vw, 116px); --anchor-ink: var(--mint-lit); /* Arriving. Quick, and never so quick it snaps. */ --float-time: 620ms; --float-ease: cubic-bezier(.22, .61, .36, 1); --float-rise: 22px; --float-stagger: 110ms; /* * Search and doorways. The search sits lighter than the ground it stands * on — the one control she came to use should never be the heaviest object * on the screen. */ /* * Both ends of this gradient are measured against white, never eyeballed. * The first draft ran #B98AD8 at the light end and put the placeholder at * 2.73:1 — a search box a neighbour could not read the prompt in. The pale * end is now the lightest purple of this hue where white still clears the * floor. */ --seek-ground: linear-gradient(120deg, #965EB5, #8E45C4); --seek-sheen: radial-gradient(80% 120% at 12% -10%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 55%), radial-gradient(60% 100% at 88% 120%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%); --seek-rule: rgba(255,255,255,.36); --seek-ink: #fff; --seek-placeholder: rgba(255,255,255,.96); --seek-button: linear-gradient(120deg, var(--mint-lit), var(--mint)); --seek-button-ink: #10322C; --chip-ink: rgba(246,241,248,.92); --chip-ink-hover: #fff; --chip-rule: rgba(246,241,248,.42); --chip-rule-hover: var(--mint); --door-ink: #fff; /* The numbered band — her three steps. */ --row-ground: var(--purple); --row-ink: var(--cream); --row-ink-soft: #EBD9F5; --num-ground: var(--mint); --num-ink: #10322C; /* The index of young people. Each card is a nameplate. */ --top-ground: rgba(90, 31, 125, .94); --top-rule: rgba(246, 241, 248, .16); --chip-current: var(--mint); --count-ink: #fff; --count-figure: var(--mint); --count-note: #DFC6EF; --card-ink: var(--cream); --card-title-ink: #fff; --card-body-ink: rgba(246, 241, 248, .94); --card-meta-ink: rgba(246, 241, 248, .90); --card-pay-ink: #fff; --card-rule: rgba(246, 241, 248, .26); --card-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 30px rgba(20,5,36,.30); --card-shadow-lift: inset 0 1px 0 rgba(255,255,255,.32), 0 22px 44px rgba(20,5,36,.44); --org-ink: #fff; --live-ink: rgba(246, 241, 248, .78); --pill-ink: #2C0F45; /* The empty search. MA — the space before, full of possibility. */ --ma-ground: radial-gradient(60% 55% at 50% 10%, rgba(154,79,196,.50) 0%, rgba(154,79,196,0) 66%), var(--purple-mid); --act-ink: #10322C; --act-ground: linear-gradient(120deg, var(--mint-lit), var(--mint)); --act-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 12px 26px rgba(20,5,36,.40); --act-quiet-rule: rgba(246, 241, 248, .42); --note-ground: var(--purple-deep); --note-ink: #D4B3EC; /* The foot, and reaching it by keyboard. */ --foot-ground: var(--purple-deep); --foot-ink: #C79FE6; --skip-ground: var(--mint); --skip-ink: #10322C; --focus: var(--mint-lit); }