/* ========================================================================= SOIREE - Candlelight Deco - THE TOKEN CONTRACT (11.08.26) DNA: design/DNA.md. Kit law: agency-core/rules/design-dna.md section 6. Every colour's provenance is recorded; sampled from public/images/ soiree-logo.png (their real logo artwork, harvested 11.08.26). ========================================================================= */ :root { /* --- DNA vocabulary (aliased to the kit contract below) ---------------- */ --gold: #e6a458; /* logo dominant gold, modal cluster #e49f52-#e9ad63 */ --gold-deep: #c2671d; /* logo darkest saturated amber */ --champagne: #f6d7aa; /* logo brightest highlight */ --cream: #ffe8d0; /* Legacy site's own heading cream, kept */ --espresso: #120b05; /* gold hue (~32deg) at field depth - CHOSEN, not sampled */ /* --- BRAND, SAMPLED ---------------------------------------------------- */ --brand: var(--gold); /* src: soiree-logo.png, ~60% of opaque px */ --brand-soft: var(--champagne); /* src: soiree-logo.png highlight */ --accent: var(--gold); --accent-deep: var(--gold-deep); /* src: soiree-logo.png darkest saturated */ /* 19.08.26: was #8a7a68, which measured 4.5:1 on --deep - exactly ON the bar, so any backing at all (the Monster's glow, a texture) pushed the legal bar and the blog date under it. Raised to 7.1:1 measured, still clearly quieter than --on-deep-soft, so fine print keeps its subordinate role with headroom instead of depending on nothing ever sitting behind it. */ --wordmark: #b19c85; /* warm grey for fine print on dark */ /* --- DARK SURFACES (logo has no dark px: gold hue deepened, recorded) --- spreads measured: #120b05 r18 g11 b5 spread 13 · #1b1109 spread 18 · #261a0e spread 24 - all clear the >=12 warm floor, none reads neutral. */ --deep: #120b05; /* base dark field. lum ~7, spread 13 */ --deep-2: #1b1109; /* raised plate. lum ~10, spread 18 */ --deep-3: #261a0e; /* hover/pressed. lum ~15, spread 24 */ /* --- THE FIELD LADDER (DARK lane, committed in DNA) -------------------- */ --lane: dark; --field: #120b05; --field-2: #180f07; --field-3: #1f150b; --field-4: #291c0f; --sheet: #f7ecdd; /* the one contrasting band if ever needed */ --paper: #ffffff; /* RESERVED: brand-logo band only */ /* --- TEXT (measured on the worst pair) --------------------------------- cream #ffe8d0 on --field #120b05 = 15.9:1 · --on-deep-soft #d9c1a6 on --field = 11.2:1 · gold #e6a458 on --field = 9.1:1 (links/accents ok) */ --ink: #241505; /* on --sheet 13.8:1 */ --graphite: #5c4a35; /* secondary on --sheet 6.4:1 */ --on-deep: var(--cream); /* 15.9:1 on --deep */ --on-deep-soft: #d9c1a6; /* 11.2:1 on --deep */ --link-on-light: #8a4d0f; /* 5.6:1 on --sheet */ --link-on-deep: var(--gold); /* 9.1:1 on --deep, 8.2:1 on --deep-2 */ /* --- RULES AND HAIRLINES (the brass-rail edge) ------------------------- */ --rule-accent: var(--accent); --rule-quiet: rgba(230, 164, 88, .22); /* gold hairline on dark plates */ --rule-light: rgba(36, 21, 5, .14); --fold-rule: 3px; /* --- SHAPE LAW: supper-club pill + stage arch -------------------------- */ --r-control: 999px; /* pill controls: glassware / logo curve logic */ --r-card: 14px; /* programme cards, review cards */ --r-plate: 18px; /* photo plates */ --r-signature: 160px; /* stage-arch top radius, Programme rail plates ONLY */ --border-w: 1px; /* --- TYPE: Cormorant Garamond display / Albert Sans UI+body ------------ */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Albert Sans', 'Helvetica Neue', Arial, sans-serif; --font-data: 'Albert Sans', 'Helvetica Neue', Arial, sans-serif; --display-weight: 600; --display-track: .14em; --display-case: uppercase; --h1: clamp(32px, 3.6vw, 52px); --h2: clamp(26px, 2.6vw, 38px); --h3: clamp(19px, 1.6vw, 23px); --body: 17px; --body-lh: 1.66; --small: 14px; --btn-label: 15px; /* finer, wide-tracked caps (Josh 14.08.26) */ /* --- SPACE ------------------------------------------------------------- */ --shell: 1220px; --measure: 1060px; --header-h: 84px; --header-h-sm: 64px; --sec-pad: clamp(56px, 6.4vw, 96px); --gutter: 24px; --card-pad: 28px; --control-h: 46px; --submit-h: 54px; /* --- MOTION: glide (dimmed-lights ease) -------------------------------- */ --motion-name: "glide"; --snap: .15s; /* hovers stay snappy */ --settle: .6s; /* section reveals glide in */ --reveal-rise: 14px; --stagger: 90ms; /* --- SHADOW: one candlelight source, above-left ------------------------ */ --shadow-contact: 0 2px 6px rgba(0, 0, 0, .55); --shadow-cast: 10px 14px 44px rgba(0, 0, 0, .45); --shadow-plate: var(--shadow-contact), var(--shadow-cast); --shadow-card: 0 2px 6px rgba(0, 0, 0, .6), 12px 18px 46px rgba(0, 0, 0, .64); /* resting card on a dark plate: reads, unlike --shadow-cast */ --shadow-lift: 0 4px 10px rgba(0, 0, 0, .62), 18px 26px 60px rgba(0, 0, 0, .68); /* hovered card, one step deeper */ --foot-fade-floor: rgba(24, 15, 7, .94); /* silk-veil floor: the contact band colour the footer fade starts from */ --text-shadow-display: .019em .024em .05em rgba(0,0,0,.8), .048em .058em .4em rgba(0,0,0,.55); --text-shadow-small: 1px 2px 6px rgba(0,0,0,.75); /* --- TEXTURE: candle-smoke grain on velvet (2-4% opacity) -------------- */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); --silk: url("/images/GEN-silk-texture-soiree.webp"); /* dark silk drape, under overlays only */ --silk-veil: linear-gradient(180deg, rgba(31,21,11,.90), rgba(24,15,7,.94)); --silk-veil-2: linear-gradient(180deg, rgba(18,11,5,.92), rgba(24,15,7,.95)); --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E"); /* --- SIGNATURE ---------------------------------------------------------- */ --signature-name: "programme-rail"; --programme-rail-w: 1px; /* the vertical gold rail */ --programme-plate-arch: var(--r-signature); /* night-plate arch tops */ --r-plate-night: 24px 24px 8px 8px; /* programme night-plate silhouette */ /* --- WHAT'S ON REEL (scroll-scrub carousel, 12.08.26) ------------------- */ --reel-tile-w: clamp(300px, 30vw, 520px); /* three across, in focus */ --reel-gap: 24px; /* The section's own top/bottom edge. Josh 19.08.26: the space above the heading and below the cards equals the heading's own font size, which is --h2, so it tracks the type instead of guessing. The max() keeps it clear of the 28px rk:breathing floor at narrow widths, where --h2 clamps to 26px. */ --reel-edge: max(32px, var(--h2)); --reel-blur-1: blur(2.4px) brightness(.72); /* first peripheral pair */ --reel-blur-2: blur(5px) brightness(.5); /* far edges */ /* --- FROSTED GLASS SYSTEM (12.08.26, Josh: "very clear, highly rendered") One glass recipe, consumed by the header, every primary button and the pour puck. Espresso tint + deep blur + top-lit rim; no literals at any point of use. ------------------------------------------------ */ --glass-tint: rgba(18, 11, 5, .44); /* clearer than v1 chrome */ --glass-tint-deep: rgba(18, 11, 5, .58); /* puck / submit floor */ --glass-filter: blur(26px) saturate(165%) brightness(1.06); --glass-rim: rgba(246, 215, 170, .30); /* champagne hairline */ --glass-rim-hover: rgba(230, 164, 88, .65); --glass-highlight: inset 0 1px 0 rgba(255, 232, 208, .16), inset 0 12px 24px -18px rgba(246, 215, 170, .35); --glass-sheen: linear-gradient(168deg, rgba(246,215,170,.10) 0%, rgba(246,215,170,.03) 34%, transparent 60%); --on-glass: var(--champagne); /* button labels on glass */ /* --- DERIVED SURFACES (espresso glass family; all from --espresso 18,11,5 and --gold 230,164,88 - alpha steps, one source hue) --------------- */ --chrome-glass: var(--glass-tint); /* header pill (glass system) */ --panel-glass: rgba(26, 17, 9, .5); /* pancake card */ --panel-solid: rgba(26, 17, 9, .88); /* A4 form card */ --card-glass: rgba(18, 11, 5, .55); /* service/blog/menu cards */ --ghost-glass: rgba(18, 11, 5, .35); /* ghost buttons */ --field-glass: rgba(18, 11, 5, .72); /* form inputs */ --hover-glass: rgba(38, 26, 14, .6); /* card hover lift */ --gold-35: rgba(230, 164, 88, .35); --gold-45: rgba(230, 164, 88, .45); --gold-50: rgba(230, 164, 88, .5); --gold-65: rgba(230, 164, 88, .68); /* marquee floor: 4.5:1 on --deep-2 */ --gold-glow: rgba(230, 164, 88, .4); --shine: rgba(246, 215, 170, .85); /* conic call shine sweep */ --glow-radial: radial-gradient(closest-side, rgba(230, 164, 88, .09), transparent 70%); --ink-on-gold: #2a1505; /* text on gold buttons, 8.9:1 */ --gold-lift: #eeb069; /* gold +1 light step (button top) */ --gold-settle: #d18e3f; /* gold -1 step (button base) */ --r-field: 6px; /* hero + band scrims: espresso, graded to THIS photography */ --scrim-hero: linear-gradient(180deg, rgba(18,11,5,.72) 0%, rgba(18,11,5,.38) 30%, rgba(18,11,5,.44) 58%, rgba(18,11,5,.88) 100%); --scrim-band: linear-gradient(180deg, rgba(18,11,5,.82), rgba(18,11,5,.62) 50%, rgba(18,11,5,.85)); /* cast shadow set (candle above-left) as filters for cutout artwork */ --logo-shadow: drop-shadow(2px 3px 6px rgba(0,0,0,.7)) drop-shadow(7px 11px 30px rgba(0,0,0,.5)); --icon-shadow: drop-shadow(1px 2px 4px rgba(0,0,0,.7)); --glow-pulse: 0 0 26px var(--gold-glow); /* Monster wordmark deep mask: upper half near-invisible, builds through the lower third (rk:footer-wordmark) */ /* even climb, top still near-invisible (rk:footer-wordmark), no visibility ledge anywhere down the mark - Josh 14.08.26 asked for a smoother gradient */ /* v8 (19.08.26): held back through the band the footer's own copy occupies, then blooming into a real pool of light on the floor below it. Same nine stops and still no visibility ledge, but the old even climb put full brightness directly behind the legal bar and measured 1.47:1 there. The mask is the sanctioned lever for that (rk:footer-wordmark keeps copy legible via mask, backing and stacking, never a text-shadow). */ --monster-mask: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.04) 16%, rgba(0,0,0,.10) 30%, rgba(0,0,0,.16) 42%, rgba(0,0,0,.22) 54%, rgba(0,0,0,.52) 66%, rgba(0,0,0,.82) 78%, rgba(0,0,0,.95) 90%, rgba(0,0,0,1) 100%); } /* Reduced motion: nothing pulses, nothing rises, everything arrives complete. */ @media (prefers-reduced-motion: reduce) { :root { --snap: 0s; --settle: 0s; --reveal-rise: 0px; --stagger: 0ms; } } @media (max-width: 900px) { :root { --header-h: var(--header-h-sm); } }