/* ══════════════════════════════════════════════════════════════════ PLVN · EVENT IDENTITY LAYER — "HEIRLOOM" 2026-06-04 African celebration as editorial craft: textile, gold leaf, indigo dye, clay, brass. One desaturated, culturally-grounded accent per event on a warm paper base. Oversized numerals + hairlines instead of boxed card walls. Cultural texture at whisper opacity. Fine grain for depth. NO neon, NO candy, NO purple, NO 3-up card rows. Applied via , layered over plvn-shared.css. Anti-slop discipline per design-taste-frontend (LILA BAN observed). ══════════════════════════════════════════════════════════════════ */ /* ───────────────────────── shared base ───────────────────────── */ /* The cultural weave tiles on the body background (which repeats natively); the accent wash lives on ::before, the grain on ::after. Each .ev- sets --ev-weave + --ev-weave-size + background-color (longhand, so it does NOT reset this background-image). */ .ev { position: relative; background-image: var(--ev-weave, none); background-size: var(--ev-weave-size, auto); background-repeat: repeat; background-attachment: var(--ev-weave-attach, scroll); } /* Atmospheric layer: an asymmetric single-accent wash + a whisper-faint textile weave. Absolute (not fixed) so it composites cleanly on scroll. */ .ev::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: var(--ev-wash, transparent); background-repeat: no-repeat; background-size: 100% 100%; } /* Fine film grain — depth without busyness. Absolute, behind content, so it never fights the screenshot compositor or mobile GPU. */ .ev::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.45; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E"); } /* Accent re-skin (body.ev wins over each page's inline #FD623B). */ body.ev .label, body.ev .page-eyebrow, body.ev .day-label, body.ev .phase-num, body.ev .f-timing, body.ev .feature-card .fc-icon { color: var(--ev-accent); } body.ev .page-eyebrow::before { background: var(--ev-accent); } body.ev .page-hero h1 em, body.ev .sec-h2 em { color: var(--ev-accent); font-style: italic; } body.ev .stat-num em { color: var(--ev-accent); } body.ev .phase-card ul li::before { background: var(--ev-accent); } body.ev .context-block { border-left-color: var(--ev-accent); } body.ev .pull-quote { border-left-color: var(--ev-accent); } body.ev .ritual-step-num { border-color: var(--ev-accent); color: var(--ev-accent); } body.ev [stroke="#FD623B"] { stroke: var(--ev-accent); } /* Editorial section labels: a mono eyebrow sitting on a hairline rule. */ body.ev .label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 14px; } body.ev .label::after { content: ""; width: 52px; height: 1px; background: color-mix(in srgb, var(--ev-accent) 55%, transparent); } /* ── Anti-card: editorial blocks, not boxed walls ── Light paper surface, hairline frame, a single accent top-rule, and a large ghosted index numeral. Generous air. No heavy shadow. */ body.ev .phase-card, body.ev .feature-card, body.ev .scale-card, body.ev .festival-card { position: relative; background: color-mix(in srgb, var(--ev-surface, #fff) 90%, transparent); border: 1px solid var(--ev-line, rgba(26,23,20,0.10)); border-top: 2px solid color-mix(in srgb, var(--ev-accent) 42%, transparent); border-radius: 4px; padding: 30px 28px 28px; box-shadow: 0 1px 0 rgba(26,23,20,0.02); transition: border-color .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1); } body.ev .phase-card:hover, body.ev .feature-card:hover, body.ev .scale-card:hover, body.ev .festival-card:hover { transform: translateY(-3px); border-top-color: var(--ev-accent); border-color: color-mix(in srgb, var(--ev-accent) 28%, var(--ev-line, rgba(26,23,20,0.1))); } /* the festival card's flat 3px coral bar → our accent top-rule already covers it */ body.ev .festival-card::before { display: none; } /* Oversized index numeral on the phase label (kept as mono kicker too). */ body.ev .phase-num { font-family: 'Radlush','Boogaloo',sans-serif; font-size: 13px; letter-spacing: 0.14em; } /* Section heads: tighten, lead with weight not just scale (anti "giant H1"). */ body.ev .sec-h2 { letter-spacing: -0.035em; } /* Vendor chips: editorial, not candy. Hairline, ink text, accent on hover. */ body.ev .vendor-pill { background: transparent; border: 1px solid var(--ev-line, rgba(26,23,20,0.14)); border-radius: 2px; color: var(--ev-ink, var(--ink-700)); transition: border-color .25s ease, color .25s ease, background .25s ease; } body.ev .vendor-pill:hover { border-color: var(--ev-accent); color: var(--ev-accent); background: color-mix(in srgb, var(--ev-accent) 6%, transparent); } /* Stat strip: hairline-framed, no bright borders. */ body.ev .stat-strip { border-color: var(--ev-line, rgba(26,23,20,0.12)); } body.ev .stat-item { border-color: var(--ev-line, rgba(26,23,20,0.10)); } /* CTAs: in-page coral adopts the event accent; nav stays brand coral. */ body.ev main .btn--coral { --bg: var(--ev-cta, var(--ev-accent)); } body.ev main .btn--coral:hover { box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--ev-cta, var(--ev-accent)) 60%, transparent); } body.ev .cta-coral { background: var(--ev-cta-panel, var(--ev-accent)); } body.ev .cta-coral .btn--white { color: var(--ev-cta, var(--ev-accent)); } /* 2-up editorial grids on desktop instead of 3–4-up card walls. */ @media (min-width: 769px) { body.ev .phase-cards { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } } @media (max-width: 640px) { body.ev .cta-coral { padding: 3rem 1.5rem; border-radius: 6px; } body.ev .phase-card, body.ev .feature-card, body.ev .scale-card, body.ev .festival-card { padding: 24px 20px; } } /* Honour reduced motion. */ @media (prefers-reduced-motion: reduce) { body.ev .phase-card, body.ev .feature-card, body.ev .scale-card, body.ev .festival-card { transition: none; } } /* ════════════════════ WEDDINGS · "Kente Gold" ════════════════════ Muted gold leaf + deep forest on warm ivory. Kente-stripe weave. */ .ev-weddings { background-color: #F7F2E8; --ev-accent: #9A7322; --ev-cta: #1F4A37; --ev-cta-panel: linear-gradient(135deg, #1F4A37 0%, #133527 62%, #6f5418 150%); --ev-surface: #FFFDF8; --ev-line: rgba(122, 96, 33, 0.16); --ev-ink: rgba(46, 38, 18, 0.82); --surface: #FFFDF8; --surface-alt: #F1E9D7; --border: rgba(122, 96, 33, 0.16); --text-body: rgba(46, 38, 18, 0.80); --text-muted: rgba(46, 38, 18, 0.52); --ev-weave-size: auto; /* kente weave — interlocking gold warp + green weft bands, woven on the page */ --ev-weave: repeating-linear-gradient(90deg, rgba(140,104,28,0.10) 0 5px, transparent 5px 27px), repeating-linear-gradient(0deg, rgba(31,74,55,0.085) 0 5px, transparent 5px 27px); } .ev-weddings::before { --ev-wash: radial-gradient(860px 580px at 100% -4%, rgba(154,115,34,0.18), transparent 66%), radial-gradient(760px 540px at -6% 102%, rgba(31,74,55,0.13), transparent 68%); } /* ════════════════════ FUNERALS · "Bronze & Ash" ════════════════════ Dignified charcoal hero (kept) + antique bronze on warm stone. The most restraint and air. */ .ev-funerals { background-color: #EDEAE3; --ev-accent: #9A7B3F; --ev-cta: #16322C; --ev-cta-panel: linear-gradient(135deg, #16322C 0%, #0C201C 70%); --ev-surface: #FBFAF6; --ev-line: rgba(30, 26, 20, 0.12); --ev-ink: rgba(34, 30, 26, 0.80); --surface: #FBFAF6; --surface-alt: #E5E1D8; --border: rgba(30, 26, 20, 0.12); --text-body: rgba(34, 30, 26, 0.80); --text-muted: rgba(34, 30, 26, 0.52); --ev-weave-size: auto; /* faint bronze warp — echoes the hero's candlelit threads, very restrained */ --ev-weave: repeating-linear-gradient(90deg, rgba(154,123,63,0.05) 0 1px, transparent 1px 30px); } .ev-funerals::before { --ev-wash: radial-gradient(1000px 520px at 50% -6%, rgba(22,50,44,0.07), transparent 72%), radial-gradient(760px 460px at 100% 100%, rgba(154,123,63,0.06), transparent 72%); --ev-weave: repeating-linear-gradient(0deg, rgba(30,26,20,0.03) 0 1px, transparent 1px 64px); } .ev-funerals .sec-pad { padding-top: 104px; padding-bottom: 104px; } @media (max-width: 640px) { .ev-funerals .sec-pad { padding-top: 64px; padding-bottom: 64px; } } /* ════════════════════ NAMING · "Clay & Calabash" ════════════════════ Warm terracotta + soft cream. Earthy and tender — new life, not candy. */ .ev-naming { background-color: #F6F1E9; --ev-accent: #B35E36; --ev-cta: #B35E36; --ev-cta-panel: linear-gradient(135deg, #C06A3D 0%, #9A4B28 60%, #7c5a36 150%); --ev-surface: #FFFCF7; --ev-line: rgba(120, 64, 38, 0.15); --ev-ink: rgba(48, 32, 24, 0.80); --surface: #FFFCF7; --surface-alt: #F0E6DA; --border: rgba(120, 64, 38, 0.15); --text-body: rgba(48, 32, 24, 0.80); --text-muted: rgba(48, 32, 24, 0.52); --ev-weave-size: 23px 23px; /* strung beads — soft clay dots, tender and warm */ --ev-weave: radial-gradient(circle, rgba(120,64,38,0.12) 1.8px, transparent 2.4px); } .ev-naming::before { --ev-wash: radial-gradient(900px 600px at 88% -8%, rgba(179,94,54,0.13), transparent 66%), radial-gradient(720px 520px at 0% 104%, rgba(150,110,70,0.07), transparent 70%); --ev-weave: repeating-linear-gradient(45deg, rgba(120,64,38,0.035) 0 1px, transparent 1px 26px); } /* soft calabash arc behind the hero */ .ev-naming .page-hero { position: relative; overflow: hidden; } .ev-naming .page-hero::after { content: ""; position: absolute; top: -38%; right: -18%; width: 60vw; height: 60vw; max-width: 560px; max-height: 560px; border-radius: 50%; background: radial-gradient(circle, transparent 60%, rgba(179,94,54,0.14) 61%, transparent 64%); pointer-events: none; } .ev-naming .ritual-step-num { background: #FFFCF7; } /* ════════════════════ BIRTHDAYS · "Marigold" ════════════════════ Warm marigold + amber. Festive but grown-up — not pink candy. */ .ev-birthdays { background-color: #F8F3E9; --ev-accent: #BB8417; --ev-cta: #B5651F; --ev-cta-panel: linear-gradient(120deg, #C8901F 0%, #B5651F 60%, #8a4a1c 145%); --ev-surface: #FFFDF7; --ev-line: rgba(120, 84, 24, 0.15); --ev-ink: rgba(46, 36, 20, 0.80); --surface: #FFFDF7; --surface-alt: #F2E9D5; --border: rgba(120, 84, 24, 0.15); --text-body: rgba(46, 36, 20, 0.80); --text-muted: rgba(46, 36, 20, 0.52); --ev-weave-size: 27px 27px; /* confetti — marigold dots, festive but grown-up (not candy) */ --ev-weave: radial-gradient(circle, rgba(187,132,23,0.13) 2.2px, transparent 2.8px); } .ev-birthdays::before { --ev-wash: radial-gradient(760px 520px at 100% -4%, rgba(187,132,23,0.14), transparent 66%), radial-gradient(680px 480px at 0% 100%, rgba(181,101,31,0.07), transparent 70%); --ev-weave: radial-gradient(rgba(120,84,24,0.07) 1.4px, transparent 1.6px); } .ev-birthdays .sc-badge { background: color-mix(in srgb, var(--ev-accent) 12%, transparent); color: var(--ev-accent); } .ev-birthdays .milestone-pill { background: var(--surface-alt); } .ev-birthdays .milestone-pill:hover { background: var(--ev-accent); color: #fff; } /* ════════════════════ FESTIVALS · "Indigo & Ochre" ════════════════════ Deep adire indigo + warm ochre. Bold and cultural — the opposite of neon purple. Indigo-resist diamond lattice weave. */ .ev-festivals { background-color: #F2F0EA; --ev-accent: #2C4A78; --ev-cta: #2C4A78; --ev-cta-panel: linear-gradient(120deg, #2C4A78 0%, #1E3457 52%, #b07a23 150%); --ev-surface: #FFFFFF; --ev-line: rgba(34, 40, 60, 0.13); --ev-ink: rgba(28, 30, 42, 0.82); --surface: #FFFFFF; --surface-alt: #E9E8F0; --border: rgba(34, 40, 60, 0.13); --text-body: rgba(28, 30, 42, 0.80); --text-muted: rgba(28, 30, 42, 0.52); --ev-weave-size: auto; /* adire indigo-resist diamond lattice (àdìre eléso) */ --ev-weave: repeating-linear-gradient(45deg, rgba(44,74,120,0.10) 0 2px, transparent 2px 22px), repeating-linear-gradient(-45deg, rgba(44,74,120,0.10) 0 2px, transparent 2px 22px); } .ev-festivals::before { --ev-wash: radial-gradient(820px 560px at -4% 0%, rgba(44,74,120,0.13), transparent 66%), radial-gradient(760px 520px at 104% 24%, rgba(176,122,35,0.08), transparent 68%); --ev-weave: repeating-linear-gradient(45deg, rgba(34,40,60,0.05) 0 1px, transparent 1px 28px), repeating-linear-gradient(-45deg, rgba(34,40,60,0.05) 0 1px, transparent 1px 28px); } /* The marquee carries deep indigo with an ochre dot. */ .ev-festivals .marquee-wrap { background: linear-gradient(100deg, #1B2C4A 0%, #233a5e 55%, #2a1f12 100%); } .ev-festivals .marquee-dot { color: #C8901F; } .ev-festivals .f-timing { color: var(--ev-accent); }