/* ============================================================ PALETTE A — drawn from LOGO SC-01. Extracted from site-01.html so every page in the 01 family (home, about, gallery, get-involved) shares ONE definition. A page picks its identity by linking this file or palette-02. NOTE: url() values are bare (no assets/ prefix) — they resolve against this stylesheet, which already lives in assets/. ============================================================ */ /* Ochre · Terracotta · Olive · Navy · Slate Mood: heritage, warm, grounded. Earth pigments on warm paper. This file is the ONLY difference from the palette-02 family. */ :root { /* the five logo colours, verbatim from LOGO SC-01.svg */ --brand-1: #D1871A; /* ochre — the circle */ --brand-2: #C4451C; /* terracotta — the petal */ --brand-3: #6B785C; /* olive — the leaf */ --brand-4: #2E4B75; /* navy — the arch */ --brand-5: #284654; /* slate — the deep accent */ /* The exact navy the wordmark text is drawn in inside mark-01.svg (#193e5c) — close to but not identical to --brand-4/--primary below, which were approximated from an earlier pass at this palette. Used wherever real HTML text is asked to match the logo's own colour exactly (about-swatch, join/kiosk wordmark). */ --logo-ink: #193e5c; /* hero tile: a plain dot grid, no separate SVG asset needed */ --hero-texture: radial-gradient(var(--primary) 1px, transparent 1.4px); --hero-texture-size: 18px 18px; --hero-texture-opacity: 0.22; /* a dot grid this fine needs more than the 0.06 default to read */ /* Two real photos now cross-fade behind the home hero (hero-rotate.js toggles .is-hero-active between them on a timer) — an oud in performance and a sunlit mural detail whose ochre/navy/black already happen to be this palette's own colours. Shown crisp, not blurred: they're finished photographs, not a mood backdrop. --hero-photo stays defined as a single static image (not a pair) because it's also the fallback the page-hero on about/gallery/ involved reads when they don't set their own --page-hero-photo (see site.css) — those pages have no rotation to drive, so they keep the one-image contract untouched. */ --hero-photo: url("hero-1.png"); --hero-photo-2: url("hero-2.png"); --hero-photo-blur: 0px; --hero-photo-saturate: 1; --hero-photo-opacity: 0.92; --hero-photo-position: center 42%; /* linear, not radial: a radial spotlight either hides the tower itself (centered far enough right to clear the text) or fades the road back out before the image's own right edge. A long, gentle left-to-right ramp starts revealing very early (18%) so most of the photo shows — even under the lede — while the long run to full strength (80%) keeps it faint enough under the text itself not to fight it. Shared by both rotating photos so the reveal doesn't jump between them. */ --hero-photo-mask: linear-gradient(to right, transparent 0%, transparent 18%, #000 80%); /* roles */ --primary: #2E4B75; --primary-deep: #223A5C; --accent: #C4451C; --highlight: #D1871A; --on-primary: #FFF9F0; --on-accent: #FFF9F0; /* neutrals — warm white + natural wood, from the CANVAS board */ --ink: #24313D; --muted: #6A6F6F; --paper: #FBF7F0; --surface: #F3ECE0; --surface-2: #EBE2D3; --line: #E0D6C6; --hero-bg: #FBF7F0; --canvas-bg: #FFFFFF; --shadow-soft: 0 20px 50px -22px rgba(40, 70, 84, 0.30); --shadow-lift: 0 20px 44px -18px rgba(196, 69, 28, 0.42); /* shape language, revised 2026-09-13, twice: the near-square 4px radius read as unfinished — "a big rectangle" — and its first replacement, an arch matching the logo's own navy arch, was tried and rejected too. --btn-radius is now just a soft, neutral fallback (8px) for whatever still reads it directly — join.css/joinus.css's own buttons, mainly. The site's actual default button shape is no longer radius-driven at all: see the faceted clip-path on .btn-solid/.btn-ghost/.btn-accent in site.css, which cuts two corners on the diagonal rather than rounding any of them — echoing the logo's own angular petal instead of its arch. --blk-radius (block-level cards, photos) is untouched either way — never was the button's shape. */ --btn-radius: 8px; --blk-radius: 4px; --chip-radius: 12px; /* --------------------------------------------------------------- the eight programs — colour-science pass, 2026-08-20 WHAT WAS ALREADY RIGHT (kept unchanged): the raw logo hues form a near-complementary pair — warm cluster (terracotta 15°, ochre 36°) sits only 2° off the true complement of the cool cluster (slate 199°, navy 216°). And olive (88°) sits only 0.6° off a real triadic angle of that cool cluster. The geometry was already sound; art/music/photography keep their literal brand hex below because they already pass contrast and ARE the brand. WHAT WAS WRONG, measured with the WCAG 2.1 relative-luminance formula against the real --on-accent white (#FFF9F0), not a guess: theater/literature/crafts/dance all sit under the 4.5:1 AA text-contrast floor when used as filled chip/badge backgrounds with white labels (theater was 2.79:1 — visibly washed out). Fixed by holding hue, solving lightness by binary search for ≥4.6:1 (olive's saturation raised 13%→34% too, since at its correct triadic angle it was too weak in chroma to read as deliberate rather than as a grey afterthought). crafts/movie/dance were also HUE-REDUNDANT — each sat within 15° of an existing brand colour (crafts + theater/art, dance + art, movie + music/photography), so three of eight "different" programs were really the same one or two hues at different lightness. That's a real accessibility problem for red-green colour-blind users (~8% of men), not just a look. Moved each to an empty region of the wheel: crafts→58° bridges ochre/olive (still earthy), movie→255° indigo (still cool/nocturnal, fits a screening room), dance→340° berry (still warm, no longer a terracotta twin). True green/cyan (90–195°) stays empty on purpose — the logo has no green, so this doesn't invent one. --------------------------------------------------------------- */ --p-art: #C4451C; /* unchanged — literal terracotta, 4.76:1 */ --p-music: #2E4B75; /* unchanged — literal navy, 8.43:1 */ --p-theater: #9D6614; /* was #D1871A (2.79:1) — same 36° hue, darkened for 4.62:1 */ --p-photography: #284654; /* unchanged — literal slate, 9.58:1 */ --p-literature: #5E7A3C; /* was #6B785C (4.49:1) — same 87° triadic hue, sat 13%→34%, 4.64:1 */ --p-crafts: #777526; /* was #A9713F, redundant w/ ochre — moved to 58°, 4.60:1 */ --p-movie: #624E9D; /* was #4A6B7C, redundant w/ navy — moved to 255° indigo, 6.48:1 */ --p-dance: #B63560; /* was #B85C3C, redundant w/ terracotta — moved to 340° berry, 5.47:1 */ /* 2026-09-24 — five more doors added to the homepage (now eleven). Placed in the ONE stretch of the wheel the pass above left open on purpose: 267°→323°, between movie's 255° indigo and dance's 340° berry, ~14° apart so none reads as a duplicate of its neighbour. Green/cyan (90–195°) is still never touched — same reason as above, the logo has no green. technology/education reuse the CRM academy_category ids verbatim (see root data.js's SCC_COURSE_CATEGORIES, which used to fall back to --primary for both — this is the "give one a real token the day the Center runs such a course" that comment asked for); classes/media/cooking have no CRM category yet, so they exist only as this token + an empty chip icon (no artwork drawn for any of the five — that's deliberate, see the programs array in assets/data.js and root data.js). All five hold ≥6.4:1 against --on-accent white, computed the same way as above. */ --p-classes: #623B91; /* 267° violet, 7.86:1 */ --p-technology: #763B91; /* 281° violet, 7.16:1 */ --p-media: #8A3B91; /* 295° magenta-violet, 6.44:1 */ --p-cooking: #8D357F; /* 309° magenta, 6.81:1 */ --p-education: #913B70; /* 323° plum, 6.55:1 */ /* 2026-09-26 — twelfth door, TTalks, added to the homepage row. Placed at 358° vermilion: the one gap left between dance's 340° berry and art's own ~15° terracotta, evenly splitting it (18°/17°) rather than landing on either neighbour. Same rotate-the-hue construction as the five above (dance's own S/L held, hue turned to 358°), 5.6:1 against --on-accent white. */ --p-ttalks: #B63539; /* 358° vermilion, 5.6:1 */ /* 2026-09-24 — Events & Calendar's OWN category colours (--e-), deliberately a separate token set from --p- above: the event categories (theatre plays, concerts, conferences, book signings, exhibitions, kids' activities, ceremonies, seminars, workshops) are not the eleven programs and never appear as filter chips alongside them, so there's no requirement that the two sets dodge each other's hues the way crafts/movie/dance had to dodge each other above — each set only needs to be internally distinct. Hues spread ~36° apart around the full wheel (including the green/teal band the programs above avoid, since that avoidance was specifically about the eleven doors echoing the logo's own four shapes, not a blanket site rule). All sit at 28–38% lightness, the same dark range the programs above land in, which is comfortably ≥4.5:1 against the site's off-white --on-accent (#FFF9F0) for a filled chip/dot with a white label. */ --e-theatre-plays: #8C2F44; /* 344° burgundy */ --e-concerts: #1F5C6B; /* 193° deep teal */ --e-conferences: #3B4F73; /* 221° indigo-blue */ --e-book-signings: #6B4226; /* 24° deep brown */ --e-exhibitions: #6A3B7A; /* 285° violet */ --e-kids-activities: #B4631E; /* 30° warm amber */ --e-ceremonies: #8A6D1E; /* 46° old gold */ --e-seminars: #2F5D8A; /* 208° blue */ --e-workshops: #4F6B3A; /* 100° moss */ /* --e-talks (18° rust/clay) removed 2026-09-28 — the generic "Talks" chip it belonged to was dropped for reading as a near-duplicate of TTalks right next to it (see assets/data.js's own note). */ /* 2026-09-26 — eleventh event category, TTalks, added alongside the (now-removed) generic "Talks" chip — a different thing: TTALKS is the named dialogue series, "Talks" was any other kind of talk. Placed at 150° teal-green, the one wide gap left in the wheel (moss 100° to deep teal 193° is 93° apart — every other neighbour is ≤64°), landing ~50° from each side. 6.0:1 against --on-accent white, same method as the others above. */ --e-ttalks: #2E6B4D; /* 150° teal-green, 6.0:1 */ /* 2026-09-27 — two seasonal categories, Ramadan and Christmas at the Center. Deliberately drawn from each season's own familiar palette rather than the wheel-gap method above — a seasonal chip benefits from being recognisable at a glance more than from even hue spacing. */ --e-ramadan: #6B4A9C; /* 270° dusk purple/gold, night-sky motif */ --e-christmas: #A81F35; /* 350° classic Christmas red */ }