/* ============================================================================= IKHAYA THEME ENGINE ----------------------------------------------------------------------------- One attribute drives everything: It is set from events.theme_id (Supabase) by: 1. _worker.js – server-side, so the very first paint is already themed 2. index.html boot – from the cached copy of the event on this phone 3. the app bundle – as soon as the live event record arrives Presets mode for ethereal-velvet dark memorials, funerals (midnight + candlelight) royal-heritage dark unveilings, imbizo, umhlangano (emerald + bronze) champagne-celebration light weddings, milestone birthdays (alabaster + rose gold) No attribute (or theme_id = 'classic') = the original Ikhaya look, untouched. Architecture: each preset is ONE token block (section 1). Every component rule below it reads those tokens, so a new preset = a new token block + (optionally) a few flourishes in section 9. ============================================================================= */ /* --------------------------------------------------------------------------- 1. TOKENS Specificity note: `html[data-ik-theme=x][data-theme]` is (0,2,1) which beats the app's own `html[data-kind]` and `[data-theme=dark]` palettes. --------------------------------------------------------------------------- */ /* ---- Ethereal Velvet · midnight luxury, candlelight --------------------- */ html[data-ik-theme="ethereal-velvet"][data-theme]{ color-scheme:dark; --ik-d:"Cormorant Garamond"; --ik-b:"Plus Jakarta Sans"; /* app palette (the legacy tokens every existing rule already reads) */ --bg:#0c0a09; --ink:#f4ead8; --mute:#ab9f8d; --card:rgba(255,255,255,.05); --line:rgba(251,191,36,.16); --acc:#e9b866; --acc2:#b9803f; --on:#1b1208; --glow:rgba(245,166,35,.16); --lit:rgba(255,226,170,.20); --blur-md:18px; --blur-lg:26px; --r-card:26px; /* engine tokens */ --k-edge:rgba(251,191,36,.25); /* hairline gold border (amber-400/25) */ --k-edge-2:rgba(233,184,102,.88); /* brighter accent border / frames */ --k-line:linear-gradient(90deg,transparent,rgba(240,200,120,.9),transparent); --k-metal:linear-gradient(135deg,#f7e2ac 0%,#e6b963 46%,#c28a3f 100%); --k-gloss:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(90,50,10,.28); --k-btn-shadow:0 14px 30px -12px rgba(233,160,60,.55); --k-card-shadow:0 25px 50px -12px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,236,190,.13); --k-dock:rgba(16,13,10,.72); --k-head:#efd9a6; --k-input:rgba(255,255,255,.045); --k-h1:clamp(2.35rem,10.6vw,3.2rem); --k-h2:25px; --k-item:20px; --k-gsum:25px; --k-h1-lh:1; --k-bg-img: radial-gradient(75% 48% at 50% -10%,rgba(245,166,35,.21),transparent 70%), radial-gradient(55% 40% at 100% 100%,rgba(150,80,30,.15),transparent 70%), linear-gradient(165deg,#020617 0%,#18181b 52%,#0c0a09 100%); /* slate-950 → zinc-900 → stone-950 */ /* cover */ --kc-bg:radial-gradient(120% 70% at 50% 0%,rgba(245,166,35,.22),transparent 62%),linear-gradient(165deg,#020617,#18181b 55%,#0c0a09); --kc-ink:#f4ead8; --kc-mute:#d8c9ae; --kc-accent:#e6bd6e; --kc-img:blur(26px) saturate(.85) brightness(.30) sepia(.35); --kc-img-op:.95; --kc-veil:radial-gradient(90% 60% at 50% 26%,rgba(255,190,90,.13),transparent 62%),linear-gradient(transparent 52%,rgba(0,0,0,.55)); } /* ---- Royal Heritage · emerald, bronze, ceremony ------------------------- */ html[data-ik-theme="royal-heritage"][data-theme]{ color-scheme:dark; --ik-d:"Playfair Display"; --ik-b:"Plus Jakarta Sans"; --bg:#04261f; --ink:#f5ebd1; --mute:#b4c3b2; --card:rgba(7,56,45,.58); --line:rgba(214,169,90,.28); --acc:#dcb061; --acc2:#a87430; --on:#170f05; --glow:rgba(214,169,90,.14); --lit:rgba(246,222,160,.20); --blur-md:14px; --blur-lg:22px; --r-card:14px; --k-edge:rgba(205,150,70,.52); --k-edge-2:#c9954a; --k-line:linear-gradient(90deg,transparent,rgba(224,178,96,.95),transparent); --k-metal:linear-gradient(135deg,#f0d696 0%,#d3a04a 48%,#b07a30 100%); --k-gloss:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(80,45,5,.3); --k-btn-shadow:0 14px 28px -12px rgba(200,145,60,.55); --k-card-shadow:0 22px 44px -18px rgba(0,0,0,.72),inset 0 1px 0 rgba(246,222,160,.10); --k-dock:rgba(3,32,26,.80); --k-head:#f3dc9e; --k-input:rgba(0,0,0,.20); --k-h1:clamp(1.95rem,8.6vw,2.7rem); --k-h2:20px; --k-item:17px; --k-gsum:21px; --k-h1-lh:1.12; --k-bg-img: radial-gradient(80% 50% at 50% -10%,rgba(214,169,90,.17),transparent 65%), radial-gradient(60% 45% at 0% 100%,rgba(10,90,68,.5),transparent 70%), linear-gradient(170deg,#04261f 0%,#06342a 48%,#021611 100%); --kc-bg:linear-gradient(170deg,#06382d,#04261f 55%,#021611); --kc-ink:#f6ecd2; --kc-mute:#cfd8c4; --kc-accent:#dfb467; --kc-img:blur(26px) saturate(.8) brightness(.3); --kc-img-op:.5; --kc-veil:radial-gradient(90% 55% at 50% 24%,rgba(214,169,90,.14),transparent 62%),linear-gradient(transparent 55%,rgba(0,0,0,.5)); /* beadwork-inspired lattice: diamonds with a triangle at each node (bronze, very quiet) */ --k-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23d6a95a' stroke-width='1' stroke-opacity='.55'%3E%3Cpath d='M28 4 52 28 28 52 4 28Z'/%3E%3Cpath d='M28 16 40 28 28 40 16 28Z' stroke-opacity='.35'/%3E%3C/g%3E%3Cpath d='M28 22 34 28 28 34 22 28Z' fill='%23d6a95a' fill-opacity='.40'/%3E%3Cpath d='M0 0 6 0 0 6ZM56 0 50 0 56 6ZM0 56 6 56 0 50ZM56 56 50 56 56 50Z' fill='%23d6a95a' fill-opacity='.45'/%3E%3C/svg%3E"); } /* ---- Champagne Celebration · alabaster, rose gold ----------------------- */ html[data-ik-theme="champagne-celebration"][data-theme]{ color-scheme:light; --ik-d:"Cormorant Garamond"; --ik-b:"Plus Jakarta Sans"; --bg:#f6ebdb; --ink:#3a2f2b; --mute:#74645b; --card:rgba(255,255,255,.58); --line:rgba(150,100,80,.20); --acc:#9b5546; --acc2:#c98672; --on:#ffffff; /* acc = readable rose-bronze for text; metal = the shiny rose gold */ --glow:rgba(226,150,130,.24); --lit:rgba(255,255,255,.95); --blur-md:20px; --blur-lg:28px; --r-card:30px; --k-edge:rgba(214,160,140,.48); --k-edge-2:#d9a08c; --k-line:linear-gradient(90deg,transparent,rgba(217,160,140,.95),transparent); --k-metal:linear-gradient(135deg,#f8dccd 0%,#e5ae99 50%,#cd8d79 100%); --k-gloss:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(120,60,40,.18); --k-btn-shadow:0 14px 28px -12px rgba(190,110,90,.5); --k-card-shadow:0 32px 60px -28px rgba(125,75,55,.46),0 2px 10px rgba(125,75,55,.07),inset 0 1px 0 rgba(255,255,255,.9); --k-dock:rgba(255,250,243,.74); --k-head:#4a3731; --k-input:rgba(255,255,255,.72); --k-h1:clamp(2.45rem,11vw,3.35rem); --k-h2:26px; --k-item:21px; --k-gsum:26px; --k-h1-lh:.98; --k-bg-img: radial-gradient(70% 45% at 88% -6%,rgba(226,160,140,.34),transparent 70%), radial-gradient(60% 42% at 0% 42%,rgba(240,214,170,.46),transparent 70%), linear-gradient(180deg,#fcf8f1 0%,#f6ebdb 55%,#efdfc8 100%); --kc-bg:linear-gradient(170deg,#fffaf2,#f6e9d6 60%,#eddcc4); --kc-ink:#3a2f2b; --kc-mute:#6b5b52; --kc-accent:#a2604e; --kc-img:blur(30px) saturate(1.1) brightness(1.2); --kc-img-op:.42; --kc-veil:radial-gradient(100% 70% at 50% 18%,rgba(255,255,255,.6),transparent 65%); } /* --------------------------------------------------------------------------- 2. TYPE (the bundle's CSS reads var(--ik-d) / var(--ik-b); sizes below compensate for Cormorant's smaller x-height) --------------------------------------------------------------------------- */ html[data-ik-theme] .card h2{font-size:var(--k-h2);font-weight:600;letter-spacing:0;line-height:1.1;color:var(--k-head)} html[data-ik-theme] .ordc h2{font-size:calc(var(--k-h2) + 4px)} html[data-ik-theme] .ordc .tl b{font-size:var(--k-item);font-weight:600;line-height:1.18} html[data-ik-theme] .ai .gsum{font-size:var(--k-gsum);font-weight:600;line-height:1.2} html[data-ik-theme] .ai h2{font-size:11px;letter-spacing:.14em;color:var(--mute)} /* small label stays a label */ html[data-ik-theme] .sh h3{font-size:calc(var(--k-h2) + 6px)} html[data-ik-theme] .stepper output{font-size:28px} html[data-ik-theme] #main.wrap:before{font-size:22px} /* --------------------------------------------------------------------------- 3. ATMOSPHERE – page background, ambient light, texture --------------------------------------------------------------------------- */ html[data-ik-theme] body{background-color:var(--bg);background-image:var(--k-bg-img);background-attachment:fixed} /* velvet: a candle that never quite sits still */ html[data-ik-theme="ethereal-velvet"] body::after{ content:"";position:fixed;z-index:-1;pointer-events:none; left:50%;top:-18vh;width:120vw;height:70vh;transform:translateX(-50%); background:radial-gradient(closest-side,rgba(255,184,76,.20),rgba(255,150,40,.07) 55%,transparent); animation:ikCandle 7s ease-in-out infinite; } @keyframes ikCandle{0%,100%{opacity:.82}18%{opacity:1}34%{opacity:.88}57%{opacity:.98}76%{opacity:.84}} /* royal: textured pattern overlay */ html[data-ik-theme="royal-heritage"] body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:var(--k-pattern);background-size:56px 56px;opacity:.085; -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 70%,#000); mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 70%,#000); } /* champagne: paper grain so the light mode never looks flat */ html[data-ik-theme="champagne-celebration"] body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:multiply; background-image:radial-gradient(rgba(150,100,70,.07) 1px,transparent 1.3px);background-size:5px 5px; } /* the theme decides light/dark, so the personal toggle steps aside on themed pages */ html[data-ik-theme] .ikth,html[data-ik-theme] .cvth{display:none!important} /* --------------------------------------------------------------------------- 4. GLASS CARDS (backdrop-blur · translucent fill · gold hairline · deep shadow) --------------------------------------------------------------------------- */ html[data-ik-theme] .card, html[data-ik-theme] .stats div{ background:var(--card); -webkit-backdrop-filter:blur(var(--blur-md)) saturate(1.5);backdrop-filter:blur(var(--blur-md)) saturate(1.5); border:1px solid var(--k-edge); border-radius:var(--r-card); box-shadow:var(--k-card-shadow); } /* delicate metallic highlight along the top edge */ html[data-ik-theme] .card::after{ content:"";position:absolute;left:calc(var(--r-card) + 6px);right:calc(var(--r-card) + 6px);top:-1px;height:1px; background:var(--k-line);opacity:.8;pointer-events:none; } /* royal: a second, inset bronze rule – the stately double border */ html[data-ik-theme="royal-heritage"] .card{outline:1px solid rgba(205,150,70,.26);outline-offset:-5px} html[data-ik-theme] .card.ai{overflow:hidden} html[data-ik-theme] .ordc h2::after{color:var(--acc);border-top-color:var(--k-edge)} html[data-ik-theme] .ordc .tl li{border-top-color:var(--k-edge)} /* champagne cards float */ @media (hover:hover){ html[data-ik-theme="champagne-celebration"] #main>.card{transition:transform .6s var(--ease),box-shadow .6s var(--ease)} html[data-ik-theme="champagne-celebration"] #main>.card:hover{transform:translateY(-3px);box-shadow:0 40px 70px -30px rgba(125,75,55,.5),0 2px 10px rgba(125,75,55,.07),inset 0 1px 0 #fff} } /* --------------------------------------------------------------------------- 5. CONTROLS – buttons, chips, inputs, dock --------------------------------------------------------------------------- */ html[data-ik-theme] .btn:not(.ghost):not(.danger), html[data-ik-theme] .chip.on, html[data-ik-theme] .seg button.on, html[data-ik-theme] .tapo, html[data-ik-theme] .cvturn{ background:var(--k-metal);color:var(--on);border:0; box-shadow:var(--k-gloss),var(--k-btn-shadow); -webkit-backdrop-filter:none;backdrop-filter:none; } html[data-ik-theme] .btn.ghost{background:transparent;border:1px solid var(--k-edge-2);color:var(--ink)} html[data-ik-theme] .chip,html[data-ik-theme] .pill{border-color:var(--k-edge)} html[data-ik-theme] .pill{background:var(--card)} html[data-ik-theme] #cmdl li[aria-selected=true]{background:var(--k-metal);color:var(--on)} html[data-ik-theme] .card input, html[data-ik-theme] .card textarea, html[data-ik-theme] .card select{background:var(--k-input);border-color:var(--k-edge);color:var(--ink);border-radius:calc(var(--r-card)*.55)} html[data-ik-theme] .card input::placeholder, html[data-ik-theme] .card textarea::placeholder{color:var(--mute);opacity:.75} html[data-ik-theme] .stepper button{border-color:var(--k-edge-2);background:var(--card)} html[data-ik-theme] .tribute{border-bottom-color:var(--k-edge)} html[data-ik-theme] .tl li::before{background:var(--k-metal)} /* dock: glass bar with a sliding metallic thumb (position comes from --i / --n set by the app) */ html[data-ik-theme] nav.tabs{ background:var(--k-dock);border:1px solid var(--k-edge);isolation:isolate; box-shadow:0 22px 48px -14px rgba(0,0,0,.6),inset 0 1px 0 var(--lit); } html[data-ik-theme="champagne-celebration"] nav.tabs{box-shadow:0 22px 44px -16px rgba(125,75,55,.4),inset 0 1px 0 #fff} html[data-ik-theme] nav.tabs::before{ content:"";position:absolute;z-index:0;top:6px;bottom:6px;left:6px; width:calc((100% - 12px)/var(--n,5)); border-radius:var(--r-pill); background:var(--k-metal);box-shadow:var(--k-gloss),0 8px 22px -8px var(--glow); transform:translate3d(calc(var(--i,0)*100%),0,0); opacity:var(--ik-on,1); transition:transform .6s var(--spring),opacity .25s; } html[data-ik-theme] nav.tabs button.on{background:transparent;box-shadow:none;color:var(--on)} html[data-ik-theme] nav.tabs button{transition:color .3s} /* --------------------------------------------------------------------------- 6. FLUID TAB SWITCHING Tab content remounts on every switch, so an entrance animation = a fade-through. Small travel + a soft spring so it feels like a native sheet settling. --------------------------------------------------------------------------- */ @keyframes ikTabIn{ from{opacity:0;transform:translate3d(0,16px,0) scale(.982)} 60%{opacity:1} to{opacity:1;transform:none} } html[data-ik-theme] #main>:not(.gcv){animation:ikTabIn .66s var(--ease) both} html[data-ik-theme] #main>:not(.gcv):nth-child(3){animation-delay:.07s} html[data-ik-theme] #main>:not(.gcv):nth-child(4){animation-delay:.13s} html[data-ik-theme] #main>:not(.gcv):nth-child(5){animation-delay:.19s} html[data-ik-theme] #main>:not(.gcv):nth-child(n+6){animation-delay:.24s} html[data-ik-theme] .sh{animation-duration:.5s;animation-timing-function:var(--ease)} /* bottom sheets */ /* --------------------------------------------------------------------------- 7. COVER (the full-screen "tap to open" page AND the persistent cover card) `:not(.kts)` leaves the granite-headstone funeral cover exactly as designed. `.kc` limits this to the kinds that have the framed-portrait cover. --------------------------------------------------------------------------- */ html[data-ik-theme] .cover.kc:not(.kts){background:var(--kc-bg);color:var(--kc-ink);--cg:var(--kc-accent)} html[data-ik-theme] .cover.kc:not(.kts) .cvimg{filter:var(--kc-img);opacity:var(--kc-img-op)} html[data-ik-theme] .cover.kc:not(.kts)::after{background:var(--kc-veil)} html[data-ik-theme] .cover.kf::before{content:none} /* retire the confetti */ html[data-ik-theme] .cover.gcv.kc:not(.kts){ border:1px solid var(--k-edge);border-radius:calc(var(--r-card) + 6px); box-shadow:0 30px 60px -26px rgba(0,0,0,.7),inset 0 1px 0 var(--lit); } html[data-ik-theme="champagne-celebration"] .cover.gcv.kc:not(.kts){box-shadow:0 34px 64px -28px rgba(125,75,55,.5),inset 0 1px 0 #fff} /* royal: the lattice carries onto the cover */ html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts)::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background-image:var(--k-pattern);background-size:56px 56px;opacity:.10; } /* ---- the words ---- */ html[data-ik-theme] .cover.kc:not(.kts) .cvtxt small, html[data-ik-theme] .cover.kc:not(.kts) .cvlbl{ display:block;background:none;padding:0;border-radius:0; color:var(--kc-accent);font-weight:600;letter-spacing:.3em;opacity:1; } html[data-ik-theme] .cover.kc:not(.kts) .cvtxt h1{ font-size:var(--k-h1);line-height:var(--k-h1-lh);font-weight:600;letter-spacing:-.01em;margin:12px 0 8px;color:var(--kc-ink);text-shadow:none; } html[data-ik-theme] .cover.kc:not(.kts) .cvtxt p, html[data-ik-theme] .cover.kc:not(.kts) .cvbp{color:var(--kc-mute);text-shadow:none;opacity:1} html[data-ik-theme] .cover.kc:not(.kts) .cvm{display:block;color:var(--kc-mute);font-size:13.5px;line-height:1.55} html[data-ik-theme] .cover.kc:not(.kts) .cvm span{display:block;background:none;border:0;padding:0;border-radius:0;font-weight:500;color:var(--kc-mute)} html[data-ik-theme] .cover.kc:not(.kts) .cvm span+span::before{content:none} html[data-ik-theme] .cover.kc:not(.kts) .cvdiv{color:var(--kc-accent)} html[data-ik-theme] .cover.kc:not(.kts) .gckeep{color:var(--kc-mute)} html[data-ik-theme] .cover.kc:not(.kts) .gcw{ background:rgba(255,255,255,.07);border:1px solid var(--k-edge-2);color:var(--kc-ink); } html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .gcw{background:rgba(255,255,255,.6)} html[data-ik-theme] .cover.kc:not(.kts) .gcw.on{background:var(--k-metal);color:var(--on);border-color:transparent} html[data-ik-theme] .cover.kc:not(.kts) .tapo{color:var(--on)} /* velvet: gold-leaf title, and a candle flame for the divider */ html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvtxt h1{ background:linear-gradient(180deg,#fff6dc 0%,#f2d38f 52%,#d9a652 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; filter:drop-shadow(0 4px 22px rgba(245,166,35,.30)); } html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvdiv{ font-size:0;height:34px;margin:6px 0;gap:10px; background: radial-gradient(ellipse 3.5px 8.5px at 50% 60%,#fffdf0 0%,#ffe39a 48%,rgba(255,190,80,0) 100%) center/34px 34px no-repeat, radial-gradient(circle 17px at 50% 54%,rgba(255,176,64,.55),rgba(255,140,30,0) 100%) center/34px 34px no-repeat; animation:ikCandle 5s ease-in-out infinite; } /* royal: engraved title */ html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvtxt h1{font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.45),0 0 30px rgba(214,169,90,.22)} /* champagne: italic, like handwriting on an invitation */ html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt h1{font-style:italic;font-weight:600} html[data-ik-theme] .cover.kc:not(.kts) .cvturn{display:inline-block;font-weight:700} /* --------------------------------------------------------------------------- 8. EDITORIAL PHOTO TREATMENTS --------------------------------------------------------------------------- */ /* --- 8a. cover portrait (.cvph) -------------------------------------------- */ html[data-ik-theme] .cover.kc:not(.kts) .cvph{ position:relative;transform:none;border:0; width:min(66vw,270px);height:clamp(190px,36vh,330px); } html[data-ik-theme] .cover.gcv.kc:not(.kts) .cvph{width:min(62%,250px);height:clamp(190px,34vh,300px)} html[data-ik-theme] .cover.kc:not(.kts) .cvph img{transition:transform 1.4s var(--ease)} /* VELVET · arched memorial portrait, gold ring, candle back-glow */ html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvph{ border-radius:999px 999px 18px 18px; box-shadow: 0 0 0 1px rgba(8,6,4,.9),0 0 0 3.5px #0c0a09,0 0 0 5px var(--k-edge-2), 0 0 46px 6px rgba(247,176,66,.34),0 0 120px 26px rgba(247,150,50,.16), 0 34px 60px -18px #000; } html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvph::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:radial-gradient(120% 90% at 50% 30%,transparent 52%,rgba(24,10,0,.5)); box-shadow:inset 0 0 0 1px rgba(255,226,160,.18); } /* ROYAL · gilded double frame with an engraved inner keyline */ html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvph{ border-radius:6px; box-shadow: 0 0 0 2px #04261f,0 0 0 4px #c9954a,0 0 0 9px #04261f,0 0 0 10px rgba(214,169,90,.62), 0 30px 56px -18px #000; margin-bottom:24px; } html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvph::after{ content:"";position:absolute;inset:6px;pointer-events:none;border-radius:2px; border:1px solid rgba(240,210,140,.72);box-shadow:0 0 0 1px rgba(0,0,0,.25); } /* CHAMPAGNE · polaroid: cream border, deeper chin, rounded corners, gentle float */ html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvph{ overflow:visible;background:#fffdf8;padding:10px 10px 38px;border-radius:14px; transform:rotate(-2deg); box-shadow:0 26px 42px -16px rgba(125,75,55,.5),0 3px 8px rgba(125,75,55,.16),inset 0 0 0 1px rgba(205,141,121,.28); animation:ikFloat 7.5s ease-in-out infinite; } html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvph img{border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)} @keyframes ikFloat{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-1.4deg) translateY(-7px)}} /* --- 8b. photo gallery (.ss) ---------------------------------------------- */ html[data-ik-theme] .ss{position:relative} html[data-ik-theme] .sl img{transition:transform 6s linear} html[data-ik-theme] .sl.on img{transform:scale(1.035)} /* a slow, quiet push-in on the live frame */ /* VELVET · rounded glass frame floating in its own candlelight */ html[data-ik-theme="ethereal-velvet"] .ss{ border-radius:28px;border:1px solid var(--k-edge); box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 70px -8px rgba(240,170,70,.32),0 34px 60px -24px #000; } html[data-ik-theme="ethereal-velvet"] .ss::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,226,160,.14),inset 0 -90px 80px -60px rgba(0,0,0,.55); } /* ROYAL · gilded frame */ html[data-ik-theme="royal-heritage"] .ss{ width:calc(100% - 22px);margin-left:auto;margin-right:auto;border-radius:6px; box-shadow:0 0 0 2px #04261f,0 0 0 4px #c9954a,0 0 0 9px #04261f,0 0 0 10px rgba(214,169,90,.62),0 30px 56px -18px #000; } html[data-ik-theme="royal-heritage"] .ss::after{ content:"";position:absolute;inset:7px;pointer-events:none;border-radius:2px; border:1px solid rgba(240,210,140,.7); } html[data-ik-theme="royal-heritage"] .ss{margin-bottom:26px} /* CHAMPAGNE · polaroid with the caption written on the white chin */ html[data-ik-theme="champagne-celebration"] .ss{ background:#fffdf8;border-radius:16px; box-shadow:0 30px 52px -20px rgba(125,75,55,.52),0 3px 10px rgba(125,75,55,.14),inset 0 0 0 1px rgba(205,141,121,.28); } html[data-ik-theme="champagne-celebration"] .slides{inset:12px 12px 62px 12px} html[data-ik-theme="champagne-celebration"] .sl img{border-radius:9px} html[data-ik-theme="champagne-celebration"] .sl figcaption{ bottom:-46px;left:0;right:0;padding:0 8px;background:none;text-align:center; color:#4a3731;font:italic 600 19px/1.2 var(--ik-d),Georgia,serif;text-shadow:none; } html[data-ik-theme="champagne-celebration"] .dots{bottom:10px} html[data-ik-theme="champagne-celebration"] .dots i{background:rgba(120,80,60,.28)} html[data-ik-theme="champagne-celebration"] .dots i.on{background:#b9705f} /* --- 8c. small photos: programme avatars + detail-sheet portraits ---------- */ html[data-ik-theme] .av{border:2px solid var(--k-edge-2);box-shadow:0 0 0 3px rgba(0,0,0,.18),0 8px 18px -8px rgba(0,0,0,.5)} html[data-ik-theme="champagne-celebration"] .av{border-color:#fffdf8;box-shadow:0 0 0 1px rgba(205,141,121,.5),0 8px 18px -8px rgba(125,75,55,.5)} html[data-ik-theme] .sh{background:var(--bg);border-top:1px solid var(--k-edge)} html[data-ik-theme] .sh img{border-radius:calc(var(--r-card)*.7);box-shadow:0 22px 40px -20px rgba(0,0,0,.65)} html[data-ik-theme="ethereal-velvet"] .sh img{box-shadow:0 0 50px -10px rgba(240,170,70,.35),0 22px 40px -20px rgba(0,0,0,.7)} html[data-ik-theme="royal-heritage"] .sh img{border-radius:4px;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px #c9954a,0 22px 40px -20px rgba(0,0,0,.7)} html[data-ik-theme="champagne-celebration"] .sh img{border:8px solid #fffdf8;border-bottom-width:26px;border-radius:12px;box-shadow:0 24px 40px -18px rgba(125,75,55,.5)} html[data-ik-theme] .videoItem video{box-shadow:0 22px 40px -22px rgba(0,0,0,.6);border:1px solid var(--k-edge)} /* ============================================================================= SOUTH AFRICAN HERITAGE LOOKS Authored as real geometry (SVG), after traditional beadwork, painted-wall and woven-band design: nested diamonds, stepped pyramids, triangle tessellations, bead rows, outlined colour blocks. ubuntu-heritage dark unveilings black ground, green / gold / red woven band, kente-style diamonds zulu-beadwork dark imbizo navy ground, white-outlined triangle tessellation, bead rows ndebele-joy light weddings white ground, bold black-outlined nested diamonds and stepped blocks Shared structure (so the three feel like one family): --h-band tall woven border -> top/bottom of the cover, header of the Order of Service card --h-rule slim divider band -> card tops, dividers --h-frame bead frame -> portrait + gallery (border-image) --h-field quiet all-over tile in the page background ============================================================================= */ /* ---- ubuntu-heritage ---- */ html[data-ik-theme="ubuntu-heritage"][data-theme]{ color-scheme:dark; --ik-d:"Fraunces"; --ik-b:"Plus Jakarta Sans"; --bg:#080d09; --ink:#f7f0da; --mute:#b4bca8; --card:rgba(16,36,22,.66); --line:rgba(242,185,46,.24); --acc:#f2b92e; --acc2:#d23a2c; --on:#150e00; --glow:rgba(242,185,46,.16); --lit:rgba(255,226,150,.2); --blur-md:14px; --blur-lg:22px; --r-card:8px; --k-edge:rgba(242,185,46,.5); --k-edge-2:#f2b92e; --k-line:linear-gradient(90deg,#1f8a3b 0 33.3%,#f2b92e 33.3% 66.6%,#d23a2c 66.6%); --k-metal:linear-gradient(135deg,#ffd860 0%,#eaa819 50%,#c98408 100%); --k-gloss:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(90,50,0,.3); --k-btn-shadow:0 14px 28px -12px rgba(234,168,25,.55); --k-card-shadow:0 22px 44px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,226,150,.1); --k-dock:rgba(8,16,10,.84); --k-head:#f6d57c; --k-input:rgba(0,0,0,.28); --k-h1:clamp(2rem,9vw,2.8rem); --k-h2:21px; --k-item:17.5px; --k-gsum:22px; --k-h1-lh:1.08; --k-bg-img: radial-gradient(75% 44% at 50% -10%,rgba(242,185,46,.15),transparent 66%), radial-gradient(60% 44% at 0% 100%,rgba(31,138,59,.28),transparent 70%), linear-gradient(170deg,#0a140d 0%,#080d09 55%,#040604 100%); --kc-bg:linear-gradient(170deg,#0f1f14,#080d09 58%,#040604); --kc-ink:#f7f0da; --kc-mute:#cdd3bf; --kc-accent:#f2b92e; --kc-img:blur(26px) saturate(.8) brightness(.3); --kc-img-op:.5; --kc-veil:radial-gradient(90% 55% at 50% 24%,rgba(242,185,46,.13),transparent 62%),linear-gradient(transparent 55%,rgba(0,0,0,.55)); --h-band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='40' viewBox='0 0 96 40'%3E%3Crect x='0' y='0' width='96' height='40' fill='%23080d09' shape-rendering='crispEdges'/%3E%3Cpolygon points='0,9 6,1 12,9' fill='%23f2b92e'/%3E%3Cpolygon points='12,9 18,1 24,9' fill='%23d23a2c'/%3E%3Cpolygon points='24,9 30,1 36,9' fill='%23f2b92e'/%3E%3Cpolygon points='36,9 42,1 48,9' fill='%231f8a3b'/%3E%3Cpolygon points='48,9 54,1 60,9' fill='%23f2b92e'/%3E%3Cpolygon points='60,9 66,1 72,9' fill='%23d23a2c'/%3E%3Cpolygon points='72,9 78,1 84,9' fill='%23f2b92e'/%3E%3Cpolygon points='84,9 90,1 96,9' fill='%231f8a3b'/%3E%3Crect x='0' y='10' width='96' height='1.5' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Cpolygon points='24,10 34.5,20.5 24,31 13.5,20.5' fill='%23d23a2c'/%3E%3Cpolygon points='24,12.3 32.2,20.5 24,28.7 15.8,20.5' fill='%23f2b92e'/%3E%3Cpolygon points='24,14.7 29.8,20.5 24,26.3 18.2,20.5' fill='%231f8a3b'/%3E%3Cpolygon points='24,17.3 27.2,20.5 24,23.7 20.8,20.5' fill='%23080d09'/%3E%3Cpolygon points='24,19.1 25.4,20.5 24,21.9 22.6,20.5' fill='%23f2b92e'/%3E%3Cpolygon points='72,10 82.5,20.5 72,31 61.5,20.5' fill='%231f8a3b'/%3E%3Cpolygon points='72,12.3 80.2,20.5 72,28.7 63.8,20.5' fill='%23f2b92e'/%3E%3Cpolygon points='72,14.7 77.8,20.5 72,26.3 66.2,20.5' fill='%23d23a2c'/%3E%3Cpolygon points='72,17.3 75.2,20.5 72,23.7 68.8,20.5' fill='%23080d09'/%3E%3Cpolygon points='72,19.1 73.4,20.5 72,21.9 70.6,20.5' fill='%23f2b92e'/%3E%3Crect x='42' y='15' width='1.5' height='11' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='45' y='15' width='1.5' height='11' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='49.5' y='15' width='1.5' height='11' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='52.5' y='15' width='1.5' height='11' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Ccircle cx='48' cy='20.5' r='1.3' fill='%23d23a2c'/%3E%3Crect x='88.5' y='15' width='1.5' height='11' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='91.5' y='15' width='1.5' height='11' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Ccircle cx='96' cy='20.5' r='1.3' fill='%231f8a3b'/%3E%3Crect x='3' y='15' width='1.5' height='11' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='6' y='15' width='1.5' height='11' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Ccircle cx='0' cy='20.5' r='1.3' fill='%231f8a3b'/%3E%3Crect x='0' y='29' width='96' height='1.5' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Cpolygon points='0,31 12,31 6,39' fill='%231f8a3b'/%3E%3Cpolygon points='12,31 24,31 18,39' fill='%23f2b92e'/%3E%3Cpolygon points='24,31 36,31 30,39' fill='%23d23a2c'/%3E%3Cpolygon points='36,31 48,31 42,39' fill='%23f2b92e'/%3E%3Cpolygon points='48,31 60,31 54,39' fill='%231f8a3b'/%3E%3Cpolygon points='60,31 72,31 66,39' fill='%23f2b92e'/%3E%3Cpolygon points='72,31 84,31 78,39' fill='%23d23a2c'/%3E%3Cpolygon points='84,31 96,31 90,39' fill='%23f2b92e'/%3E%3C/svg%3E"); --h-rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Crect x='0' y='0' width='48' height='14' fill='%23080d09' shape-rendering='crispEdges'/%3E%3Crect x='2' y='2.5' width='1.8' height='9' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='5.5' y='2.5' width='1.8' height='9' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='9' y='2.5' width='1.8' height='9' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='12.5' y='2.5' width='1.8' height='9' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='16' y='2.5' width='1.8' height='9' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='19.5' y='2.5' width='1.8' height='9' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Cpolygon points='36,0.8 42.2,7 36,13.2 29.8,7' fill='%23d23a2c'/%3E%3Cpolygon points='36,2.6 40.4,7 36,11.4 31.6,7' fill='%23f2b92e'/%3E%3Cpolygon points='36,4.4 38.6,7 36,9.6 33.4,7' fill='%231f8a3b'/%3E%3Cpolygon points='36,6 37,7 36,8 35,7' fill='%23080d09'/%3E%3Ccircle cx='26.5' cy='7' r='1.1' fill='%23f2b92e'/%3E%3Ccircle cx='45.5' cy='7' r='1.1' fill='%23f2b92e'/%3E%3C/svg%3E"); --h-frame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='0' y='0' width='48' height='48' fill='none' shape-rendering='crispEdges'/%3E%3Crect x='16' y='0' width='16' height='16' fill='%23080d09' shape-rendering='crispEdges'/%3E%3Cpolygon points='24,1.4 30.6,8 24,14.6 17.4,8' fill='%23f2b92e'/%3E%3Cpolygon points='24,3.3 28.7,8 24,12.7 19.3,8' fill='%231f8a3b'/%3E%3Cpolygon points='24,5.4 26.6,8 24,10.6 21.4,8' fill='%23d23a2c'/%3E%3Cpolygon points='24,7 25,8 24,9 23,8' fill='%23080d09'/%3E%3Cpolygon points='16,0 20,0 16,4' fill='%23d23a2c'/%3E%3Cpolygon points='32,0 32,4 28,0' fill='%23d23a2c'/%3E%3Cpolygon points='16,12 20,16 16,16' fill='%23d23a2c'/%3E%3Cpolygon points='32,12 32,16 28,16' fill='%23d23a2c'/%3E%3Crect x='16' y='32' width='16' height='16' fill='%23080d09' shape-rendering='crispEdges'/%3E%3Cpolygon points='24,33.4 30.6,40 24,46.6 17.4,40' fill='%23f2b92e'/%3E%3Cpolygon points='24,35.3 28.7,40 24,44.7 19.3,40' fill='%231f8a3b'/%3E%3Cpolygon points='24,37.4 26.6,40 24,42.6 21.4,40' fill='%23d23a2c'/%3E%3Cpolygon points='24,39 25,40 24,41 23,40' fill='%23080d09'/%3E%3Cpolygon points='16,32 20,32 16,36' fill='%23d23a2c'/%3E%3Cpolygon points='32,32 32,36 28,32' fill='%23d23a2c'/%3E%3Cpolygon points='16,44 20,48 16,48' fill='%23d23a2c'/%3E%3Cpolygon points='32,44 32,48 28,48' fill='%23d23a2c'/%3E%3Crect x='0' y='16' width='16' height='16' fill='%23080d09' shape-rendering='crispEdges'/%3E%3Cpolygon points='8,17.4 14.6,24 8,30.6 1.4,24' fill='%23f2b92e'/%3E%3Cpolygon points='8,19.3 12.7,24 8,28.7 3.3,24' fill='%231f8a3b'/%3E%3Cpolygon points='8,21.4 10.6,24 8,26.6 5.4,24' fill='%23d23a2c'/%3E%3Cpolygon points='8,23 9,24 8,25 7,24' fill='%23080d09'/%3E%3Cpolygon points='0,16 4,16 0,20' fill='%23d23a2c'/%3E%3Cpolygon points='16,16 16,20 12,16' fill='%23d23a2c'/%3E%3Cpolygon points='0,28 4,32 0,32' fill='%23d23a2c'/%3E%3Cpolygon points='16,28 16,32 12,32' fill='%23d23a2c'/%3E%3Crect x='32' y='16' width='16' height='16' fill='%23080d09' shape-rendering='crispEdges'/%3E%3Cpolygon points='40,17.4 46.6,24 40,30.6 33.4,24' fill='%23f2b92e'/%3E%3Cpolygon points='40,19.3 44.7,24 40,28.7 35.3,24' fill='%231f8a3b'/%3E%3Cpolygon points='40,21.4 42.6,24 40,26.6 37.4,24' fill='%23d23a2c'/%3E%3Cpolygon points='40,23 41,24 40,25 39,24' fill='%23080d09'/%3E%3Cpolygon points='32,16 36,16 32,20' fill='%23d23a2c'/%3E%3Cpolygon points='48,16 48,20 44,16' fill='%23d23a2c'/%3E%3Cpolygon points='32,28 36,32 32,32' fill='%23d23a2c'/%3E%3Cpolygon points='48,28 48,32 44,32' fill='%23d23a2c'/%3E%3Crect x='16' y='0' width='16' height='1.5' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='16' y='30.5' width='16' height='1.5' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='16' y='46.5' width='16' height='1.5' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='0' y='16' width='1.5' height='16' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='14.5' y='16' width='1.5' height='16' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='46.5' y='16' width='1.5' height='16' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='32' y='16' width='1.5' height='16' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='0' y='0' width='16' height='16' fill='%23080d09' shape-rendering='crispEdges'/%3E%3Crect x='1.5' y='1.5' width='13' height='13' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='3.5' y='3.5' width='9' height='9' fill='%231f8a3b' shape-rendering='crispEdges'/%3E%3Crect x='5.5' y='5.5' width='5' height='5' fill='%23d23a2c' shape-rendering='crispEdges'/%3E%3Crect x='7' y='7' width='2' height='2' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='32' y='0' width='16' height='16' fill='%23080d09' shape-rendering='crispEdges'/%3E%3Crect x='33.5' y='1.5' width='13' height='13' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='35.5' y='3.5' width='9' height='9' fill='%231f8a3b' shape-rendering='crispEdges'/%3E%3Crect x='37.5' y='5.5' width='5' height='5' fill='%23d23a2c' shape-rendering='crispEdges'/%3E%3Crect x='39' y='7' width='2' height='2' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='0' y='32' width='16' height='16' fill='%23080d09' shape-rendering='crispEdges'/%3E%3Crect x='1.5' y='33.5' width='13' height='13' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='3.5' y='35.5' width='9' height='9' fill='%231f8a3b' shape-rendering='crispEdges'/%3E%3Crect x='5.5' y='37.5' width='5' height='5' fill='%23d23a2c' shape-rendering='crispEdges'/%3E%3Crect x='7' y='39' width='2' height='2' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='32' y='32' width='16' height='16' fill='%23080d09' shape-rendering='crispEdges'/%3E%3Crect x='33.5' y='33.5' width='13' height='13' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3Crect x='35.5' y='35.5' width='9' height='9' fill='%231f8a3b' shape-rendering='crispEdges'/%3E%3Crect x='37.5' y='37.5' width='5' height='5' fill='%23d23a2c' shape-rendering='crispEdges'/%3E%3Crect x='39' y='39' width='2' height='2' fill='%23f2b92e' shape-rendering='crispEdges'/%3E%3C/svg%3E"); --h-field:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23f2b92e' stroke-width='1.1'%3E%3Cpolygon points='24,3 45,24 24,45 3,24' fill='none' stroke='%23f2b92e' stroke-width='1.1' stroke-linejoin='miter'/%3E%3Cpolygon points='24,13 35,24 24,35 13,24' fill='none' stroke='%231f8a3b' stroke-width='1.2' stroke-linejoin='miter'/%3E%3C/g%3E%3Cpolygon points='24,19.6 28.4,24 24,28.4 19.6,24' fill='%23d23a2c'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%23f2b92e'/%3E%3Ccircle cx='48' cy='0' r='2' fill='%23f2b92e'/%3E%3Ccircle cx='0' cy='48' r='2' fill='%23f2b92e'/%3E%3Ccircle cx='48' cy='48' r='2' fill='%23f2b92e'/%3E%3C/svg%3E"); --h-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg opacity='0.16'%3E%3Cg fill='none' stroke='%23f2b92e' stroke-width='1.1'%3E%3Cpolygon points='24,3 45,24 24,45 3,24' fill='none' stroke='%23f2b92e' stroke-width='1.1' stroke-linejoin='miter'/%3E%3Cpolygon points='24,13 35,24 24,35 13,24' fill='none' stroke='%231f8a3b' stroke-width='1.2' stroke-linejoin='miter'/%3E%3C/g%3E%3Cpolygon points='24,19.6 28.4,24 24,28.4 19.6,24' fill='%23d23a2c'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%23f2b92e'/%3E%3Ccircle cx='48' cy='0' r='2' fill='%23f2b92e'/%3E%3Ccircle cx='0' cy='48' r='2' fill='%23f2b92e'/%3E%3Ccircle cx='48' cy='48' r='2' fill='%23f2b92e'/%3E%3C/g%3E%3C/svg%3E"); --h-field-w:48px; --h-field-h:48px; --h-plq-bg:#0f2a17; --h-plq-ink:#f6d57c; --h-plq-edge:#f2b92e; --h-chip-bg:#f2b92e; --h-chip-ink:#150e00; --h-chip-edge:#150e00; } /* ---- zulu-beadwork ---- */ html[data-ik-theme="zulu-beadwork"][data-theme]{ color-scheme:dark; --ik-d:"Plus Jakarta Sans"; --ik-b:"Plus Jakarta Sans"; --bg:#0a1a40; --ink:#f8f1e2; --mute:#b6c1dc; --card:rgba(18,44,104,.6); --line:rgba(255,176,46,.26); --acc:#ffb02e; --acc2:#f58a1f; --on:#1b1000; --glow:rgba(245,138,31,.2); --lit:rgba(255,214,140,.22); --blur-md:14px; --blur-lg:22px; --r-card:12px; --k-edge:rgba(255,176,46,.5); --k-edge-2:#ffb02e; --k-line:linear-gradient(90deg,#f58a1f 0 25%,#1aa6a0 25% 50%,#7a49b5 50% 75%,#f4efe4 75%); --k-metal:linear-gradient(135deg,#ffc94d 0%,#f9a22a 50%,#ee7d1b 100%); --k-gloss:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(120,50,0,.3); --k-btn-shadow:0 14px 28px -12px rgba(245,138,31,.6); --k-card-shadow:0 22px 44px -18px rgba(0,0,10,.75),inset 0 1px 0 rgba(255,214,140,.14); --k-dock:rgba(8,22,56,.84); --k-head:#ffd27a; --k-input:rgba(0,0,0,.24); --k-h1:clamp(1.9rem,8.8vw,2.7rem); --k-h2:19px; --k-item:16.5px; --k-gsum:20px; --k-h1-lh:1.1; --k-bg-img: radial-gradient(80% 46% at 50% -10%,rgba(245,138,31,.2),transparent 66%), radial-gradient(60% 45% at 100% 100%,rgba(26,166,160,.2),transparent 70%), linear-gradient(170deg,#0d2257 0%,#0a1a40 52%,#060f2a 100%); --kc-bg:linear-gradient(170deg,#12306b,#0a1a40 58%,#060f2a); --kc-ink:#f8f1e2; --kc-mute:#cbd3e8; --kc-accent:#ffb02e; --kc-img:blur(26px) saturate(.9) brightness(.32); --kc-img-op:.55; --kc-veil:radial-gradient(90% 55% at 50% 24%,rgba(245,138,31,.16),transparent 62%),linear-gradient(transparent 55%,rgba(0,0,10,.5)); --h-band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='40' viewBox='0 0 72 40'%3E%3Crect x='0' y='0' width='72' height='40' fill='%230a1a40' shape-rendering='crispEdges'/%3E%3Ccircle cx='4' cy='4.6' r='2.3' fill='%23f6f1e4'/%3E%3Ccircle cx='12' cy='4.6' r='2.3' fill='%23f58a1f'/%3E%3Ccircle cx='20' cy='4.6' r='2.3' fill='%231aa6a0'/%3E%3Ccircle cx='28' cy='4.6' r='2.3' fill='%237a49b5'/%3E%3Ccircle cx='36' cy='4.6' r='2.3' fill='%23ffc21a'/%3E%3Ccircle cx='44' cy='4.6' r='2.3' fill='%23d83a3a'/%3E%3Ccircle cx='52' cy='4.6' r='2.3' fill='%232f9b4a'/%3E%3Ccircle cx='60' cy='4.6' r='2.3' fill='%23f6f1e4'/%3E%3Ccircle cx='68' cy='4.6' r='2.3' fill='%23f58a1f'/%3E%3Crect x='0' y='9' width='72' height='1' fill='%23f6f1e4' shape-rendering='crispEdges'/%3E%3Cpolygon points='0,28 12,11 24,28' fill='%23f58a1f' stroke='%23f6f1e4' stroke-width='0.9' stroke-linejoin='miter'/%3E%3Cpolygon points='12,11 36,11 24,28' fill='%23ffc21a' stroke='%23f6f1e4' stroke-width='0.9' stroke-linejoin='miter'/%3E%3Cpolygon points='24,28 36,11 48,28' fill='%231aa6a0' stroke='%23f6f1e4' stroke-width='0.9' stroke-linejoin='miter'/%3E%3Cpolygon points='36,11 60,11 48,28' fill='%23d83a3a' stroke='%23f6f1e4' stroke-width='0.9' stroke-linejoin='miter'/%3E%3Cpolygon points='48,28 60,11 72,28' fill='%237a49b5' stroke='%23f6f1e4' stroke-width='0.9' stroke-linejoin='miter'/%3E%3Cpolygon points='60,11 84,11 72,28' fill='%232f9b4a' stroke='%23f6f1e4' stroke-width='0.9' stroke-linejoin='miter'/%3E%3Cpolygon points='-12,11 12,11 0,28' fill='%232f9b4a' stroke='%23f6f1e4' stroke-width='0.9' stroke-linejoin='miter'/%3E%3Crect x='0' y='29.5' width='72' height='1' fill='%23f6f1e4' shape-rendering='crispEdges'/%3E%3Cpolygon points='0,39 4,32.5 8,39' fill='%231aa6a0'/%3E%3Cpolygon points='8,39 12,32.5 16,39' fill='%23f58a1f'/%3E%3Cpolygon points='16,39 20,32.5 24,39' fill='%23ffc21a'/%3E%3Cpolygon points='24,39 28,32.5 32,39' fill='%237a49b5'/%3E%3Cpolygon points='32,39 36,32.5 40,39' fill='%23d83a3a'/%3E%3Cpolygon points='40,39 44,32.5 48,39' fill='%232f9b4a'/%3E%3Cpolygon points='48,39 52,32.5 56,39' fill='%23f6f1e4'/%3E%3Cpolygon points='56,39 60,32.5 64,39' fill='%232a62d0'/%3E%3Cpolygon points='64,39 68,32.5 72,39' fill='%23f58a1f'/%3E%3C/svg%3E"); --h-rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12' viewBox='0 0 36 12'%3E%3Crect x='0' y='0' width='36' height='12' fill='%230a1a40' shape-rendering='crispEdges'/%3E%3Cpolygon points='0,10.8 6,1.2 12,10.8' fill='%23f58a1f' stroke='%23f6f1e4' stroke-width='0.8' stroke-linejoin='miter'/%3E%3Cpolygon points='6,1.2 18,1.2 12,10.8' fill='%23ffc21a' stroke='%23f6f1e4' stroke-width='0.8' stroke-linejoin='miter'/%3E%3Cpolygon points='12,10.8 18,1.2 24,10.8' fill='%231aa6a0' stroke='%23f6f1e4' stroke-width='0.8' stroke-linejoin='miter'/%3E%3Cpolygon points='18,1.2 30,1.2 24,10.8' fill='%23d83a3a' stroke='%23f6f1e4' stroke-width='0.8' stroke-linejoin='miter'/%3E%3Cpolygon points='24,10.8 30,1.2 36,10.8' fill='%237a49b5' stroke='%23f6f1e4' stroke-width='0.8' stroke-linejoin='miter'/%3E%3Cpolygon points='30,1.2 42,1.2 36,10.8' fill='%232f9b4a' stroke='%23f6f1e4' stroke-width='0.8' stroke-linejoin='miter'/%3E%3Cpolygon points='-6,1.2 6,1.2 0,10.8' fill='%232f9b4a' stroke='%23f6f1e4' stroke-width='0.8' stroke-linejoin='miter'/%3E%3C/svg%3E"); --h-frame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='0' y='0' width='48' height='48' fill='none' shape-rendering='crispEdges'/%3E%3Crect x='16' y='0' width='16' height='16' fill='%230a1a40' shape-rendering='crispEdges'/%3E%3Cpolygon points='24,1.2 30.8,8 24,8' fill='%23f58a1f' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Cpolygon points='30.8,8 24,14.8 24,8' fill='%231aa6a0' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Cpolygon points='24,14.8 17.2,8 24,8' fill='%237a49b5' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Cpolygon points='17.2,8 24,1.2 24,8' fill='%23ffc21a' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Ccircle cx='24' cy='8' r='1.5' fill='%23f6f1e4'/%3E%3Ccircle cx='17.6' cy='1.6' r='1.1' fill='%23d83a3a'/%3E%3Ccircle cx='30.4' cy='1.6' r='1.1' fill='%232f9b4a'/%3E%3Ccircle cx='17.6' cy='14.4' r='1.1' fill='%232f9b4a'/%3E%3Ccircle cx='30.4' cy='14.4' r='1.1' fill='%23d83a3a'/%3E%3Crect x='16' y='32' width='16' height='16' fill='%230a1a40' shape-rendering='crispEdges'/%3E%3Cpolygon points='24,33.2 30.8,40 24,40' fill='%23f58a1f' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Cpolygon points='30.8,40 24,46.8 24,40' fill='%231aa6a0' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Cpolygon points='24,46.8 17.2,40 24,40' fill='%237a49b5' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Cpolygon points='17.2,40 24,33.2 24,40' fill='%23ffc21a' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Ccircle cx='24' cy='40' r='1.5' fill='%23f6f1e4'/%3E%3Ccircle cx='17.6' cy='33.6' r='1.1' fill='%23d83a3a'/%3E%3Ccircle cx='30.4' cy='33.6' r='1.1' fill='%232f9b4a'/%3E%3Ccircle cx='17.6' cy='46.4' r='1.1' fill='%232f9b4a'/%3E%3Ccircle cx='30.4' cy='46.4' r='1.1' fill='%23d83a3a'/%3E%3Crect x='0' y='16' width='16' height='16' fill='%230a1a40' shape-rendering='crispEdges'/%3E%3Cpolygon points='8,17.2 14.8,24 8,24' fill='%23f58a1f' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Cpolygon points='14.8,24 8,30.8 8,24' fill='%231aa6a0' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Cpolygon points='8,30.8 1.2,24 8,24' fill='%237a49b5' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Cpolygon points='1.2,24 8,17.2 8,24' fill='%23ffc21a' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Ccircle cx='8' cy='24' r='1.5' fill='%23f6f1e4'/%3E%3Ccircle cx='1.6' cy='17.6' r='1.1' fill='%23d83a3a'/%3E%3Ccircle cx='14.4' cy='17.6' r='1.1' fill='%232f9b4a'/%3E%3Ccircle cx='1.6' cy='30.4' r='1.1' fill='%232f9b4a'/%3E%3Ccircle cx='14.4' cy='30.4' r='1.1' fill='%23d83a3a'/%3E%3Crect x='32' y='16' width='16' height='16' fill='%230a1a40' shape-rendering='crispEdges'/%3E%3Cpolygon points='40,17.2 46.8,24 40,24' fill='%23f58a1f' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Cpolygon points='46.8,24 40,30.8 40,24' fill='%231aa6a0' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Cpolygon points='40,30.8 33.2,24 40,24' fill='%237a49b5' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Cpolygon points='33.2,24 40,17.2 40,24' fill='%23ffc21a' stroke='%23f6f1e4' stroke-width='0.7' stroke-linejoin='miter'/%3E%3Ccircle cx='40' cy='24' r='1.5' fill='%23f6f1e4'/%3E%3Ccircle cx='33.6' cy='17.6' r='1.1' fill='%23d83a3a'/%3E%3Ccircle cx='46.4' cy='17.6' r='1.1' fill='%232f9b4a'/%3E%3Ccircle cx='33.6' cy='30.4' r='1.1' fill='%232f9b4a'/%3E%3Ccircle cx='46.4' cy='30.4' r='1.1' fill='%23d83a3a'/%3E%3Crect x='16' y='0' width='16' height='1.2' fill='%23f6f1e4' shape-rendering='crispEdges'/%3E%3Crect x='16' y='14.8' width='16' height='1.2' fill='%23f58a1f' shape-rendering='crispEdges'/%3E%3Crect x='16' y='32' width='16' height='1.2' fill='%23f58a1f' shape-rendering='crispEdges'/%3E%3Crect x='16' y='46.8' width='16' height='1.2' fill='%23f6f1e4' shape-rendering='crispEdges'/%3E%3Crect x='0' y='16' width='1.2' height='16' fill='%23f6f1e4' shape-rendering='crispEdges'/%3E%3Crect x='14.8' y='16' width='1.2' height='16' fill='%23f58a1f' shape-rendering='crispEdges'/%3E%3Crect x='32' y='16' width='1.2' height='16' fill='%23f58a1f' shape-rendering='crispEdges'/%3E%3Crect x='46.8' y='16' width='1.2' height='16' fill='%23f6f1e4' shape-rendering='crispEdges'/%3E%3Crect x='0' y='0' width='16' height='16' fill='%230a1a40' shape-rendering='crispEdges'/%3E%3Crect x='1.2' y='1.2' width='13.6' height='13.6' fill='%23f6f1e4' shape-rendering='crispEdges'/%3E%3Crect x='3' y='3' width='10' height='10' fill='%23d83a3a' shape-rendering='crispEdges'/%3E%3Crect x='5' y='5' width='6' height='6' fill='%23ffc21a' shape-rendering='crispEdges'/%3E%3Crect x='6.8' y='6.8' width='2.4' height='2.4' fill='%231aa6a0' shape-rendering='crispEdges'/%3E%3Crect x='32' y='0' width='16' height='16' fill='%230a1a40' shape-rendering='crispEdges'/%3E%3Crect x='33.2' y='1.2' width='13.6' height='13.6' fill='%23f6f1e4' shape-rendering='crispEdges'/%3E%3Crect x='35' y='3' width='10' height='10' fill='%23d83a3a' shape-rendering='crispEdges'/%3E%3Crect x='37' y='5' width='6' height='6' fill='%23ffc21a' shape-rendering='crispEdges'/%3E%3Crect x='38.8' y='6.8' width='2.4' height='2.4' fill='%231aa6a0' shape-rendering='crispEdges'/%3E%3Crect x='0' y='32' width='16' height='16' fill='%230a1a40' shape-rendering='crispEdges'/%3E%3Crect x='1.2' y='33.2' width='13.6' height='13.6' fill='%23f6f1e4' shape-rendering='crispEdges'/%3E%3Crect x='3' y='35' width='10' height='10' fill='%23d83a3a' shape-rendering='crispEdges'/%3E%3Crect x='5' y='37' width='6' height='6' fill='%23ffc21a' shape-rendering='crispEdges'/%3E%3Crect x='6.8' y='38.8' width='2.4' height='2.4' fill='%231aa6a0' shape-rendering='crispEdges'/%3E%3Crect x='32' y='32' width='16' height='16' fill='%230a1a40' shape-rendering='crispEdges'/%3E%3Crect x='33.2' y='33.2' width='13.6' height='13.6' fill='%23f6f1e4' shape-rendering='crispEdges'/%3E%3Crect x='35' y='35' width='10' height='10' fill='%23d83a3a' shape-rendering='crispEdges'/%3E%3Crect x='37' y='37' width='6' height='6' fill='%23ffc21a' shape-rendering='crispEdges'/%3E%3Crect x='38.8' y='38.8' width='2.4' height='2.4' fill='%231aa6a0' shape-rendering='crispEdges'/%3E%3C/svg%3E"); --h-field:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpolygon points='0,0 30,0 15,26' fill='%23f58a1f'/%3E%3Cpolygon points='30,0 60,0 45,26' fill='%231aa6a0'/%3E%3Cpolygon points='15,26 30,0 45,26' fill='%23ffc21a'/%3E%3Cpolygon points='0,0 15,26 0,26' fill='%232f9b4a'/%3E%3Cpolygon points='60,0 60,26 45,26' fill='%232f9b4a'/%3E%3Cpolygon points='15,26 45,26 30,52' fill='%237a49b5'/%3E%3Cpolygon points='0,52 15,26 30,52' fill='%23f6f1e4'/%3E%3Cpolygon points='30,52 45,26 60,52' fill='%23d83a3a'/%3E%3Cpolygon points='0,26 15,26 0,52' fill='%231aa6a0'/%3E%3Cpolygon points='60,26 45,26 60,52' fill='%23f58a1f'/%3E%3C/svg%3E"); --h-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cg opacity='0.16'%3E%3Cpolygon points='0,0 30,0 15,26' fill='%23f58a1f'/%3E%3Cpolygon points='30,0 60,0 45,26' fill='%231aa6a0'/%3E%3Cpolygon points='15,26 30,0 45,26' fill='%23ffc21a'/%3E%3Cpolygon points='0,0 15,26 0,26' fill='%232f9b4a'/%3E%3Cpolygon points='60,0 60,26 45,26' fill='%232f9b4a'/%3E%3Cpolygon points='15,26 45,26 30,52' fill='%237a49b5'/%3E%3Cpolygon points='0,52 15,26 30,52' fill='%23f6f1e4'/%3E%3Cpolygon points='30,52 45,26 60,52' fill='%23d83a3a'/%3E%3Cpolygon points='0,26 15,26 0,52' fill='%231aa6a0'/%3E%3Cpolygon points='60,26 45,26 60,52' fill='%23f58a1f'/%3E%3C/g%3E%3C/svg%3E"); --h-field-w:60px; --h-field-h:52px; --h-plq-bg:#102a63; --h-plq-ink:#ffd27a; --h-plq-edge:#f6f1e4; --h-chip-bg:#ffb02e; --h-chip-ink:#1b1000; --h-chip-edge:#f6f1e4; } /* ---- ndebele-joy ---- */ html[data-ik-theme="ndebele-joy"][data-theme]{ color-scheme:light; --ik-d:"Fraunces"; --ik-b:"Plus Jakarta Sans"; --bg:#fbf6ea; --ink:#1b1f2a; --mute:#555a68; --card:rgba(255,255,255,.86); --line:rgba(27,31,42,.2); --acc:#1b4fa6; --acc2:#d6382b; --on:#ffffff; --glow:rgba(31,88,184,.22); --lit:rgba(255,255,255,.95); --blur-md:10px; --blur-lg:16px; --r-card:10px; --k-edge:rgba(27,31,42,.34); --k-edge-2:#1b1f2a; --k-line:linear-gradient(90deg,#d6382b 0 25%,#f2b705 25% 50%,#1f8a4c 50% 75%,#1f58b8 75%); --k-metal:linear-gradient(135deg,#2a6ad8 0%,#1b4fa6 100%); --k-gloss:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,40,.25); --k-btn-shadow:0 12px 24px -12px rgba(27,79,166,.7); --k-card-shadow:0 0 0 2px #fbf6ea,0 0 0 3.5px #1b1f2a,0 22px 34px -22px rgba(27,31,42,.5); --k-dock:rgba(255,252,243,.92); --k-head:#12306b; --k-input:#ffffff; --k-h1:clamp(2.3rem,10.4vw,3.1rem); --k-h2:23px; --k-item:19px; --k-gsum:24px; --k-h1-lh:1.02; --k-bg-img: radial-gradient(70% 40% at 90% -4%,rgba(242,183,5,.22),transparent 70%), radial-gradient(60% 40% at 0% 60%,rgba(31,88,184,.10),transparent 70%), linear-gradient(180deg,#fffdf6 0%,#fbf6ea 60%,#f3ead6 100%); --kc-bg:linear-gradient(170deg,#fffef8,#f8f0dc 62%,#efe3c6); --kc-ink:#1b1f2a; --kc-mute:#454a58; --kc-accent:#b42a1f; --kc-img:blur(30px) saturate(1.2) brightness(1.18); --kc-img-op:.38; --kc-veil:radial-gradient(100% 70% at 50% 16%,rgba(255,255,255,.65),transparent 65%); --h-band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Crect x='0' y='0' width='80' height='40' fill='%23fffef8' shape-rendering='crispEdges'/%3E%3Crect x='0' y='0' width='80' height='3' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3Crect x='0' y='11.3' width='20' height='3.4' fill='%231f58b8' stroke='%231b1f2a' stroke-width='1' shape-rendering='crispEdges'/%3E%3Crect x='3.4' y='7.9' width='13.2' height='3.4' fill='%23d6382b' stroke='%231b1f2a' stroke-width='1' shape-rendering='crispEdges'/%3E%3Crect x='6.8' y='4.5' width='6.4' height='3.4' fill='%23f2b705' stroke='%231b1f2a' stroke-width='1' shape-rendering='crispEdges'/%3E%3Crect x='20' y='4.5' width='20' height='3.4' fill='%23d6382b' stroke='%231b1f2a' stroke-width='1' shape-rendering='crispEdges'/%3E%3Crect x='23.4' y='7.9' width='13.2' height='3.4' fill='%231f58b8' stroke='%231b1f2a' stroke-width='1' shape-rendering='crispEdges'/%3E%3Crect x='26.8' y='11.3' width='6.4' height='3.4' fill='%23fffef8' stroke='%231b1f2a' stroke-width='1' shape-rendering='crispEdges'/%3E%3Crect x='40' y='11.3' width='20' height='3.4' fill='%231f8a4c' stroke='%231b1f2a' stroke-width='1' shape-rendering='crispEdges'/%3E%3Crect x='43.4' y='7.9' width='13.2' height='3.4' fill='%23f2b705' stroke='%231b1f2a' stroke-width='1' shape-rendering='crispEdges'/%3E%3Crect x='46.8' y='4.5' width='6.4' height='3.4' fill='%23d6382b' stroke='%231b1f2a' stroke-width='1' shape-rendering='crispEdges'/%3E%3Crect x='60' y='4.5' width='20' height='3.4' fill='%23d6382b' stroke='%231b1f2a' stroke-width='1' shape-rendering='crispEdges'/%3E%3Crect x='63.4' y='7.9' width='13.2' height='3.4' fill='%231f58b8' stroke='%231b1f2a' stroke-width='1' shape-rendering='crispEdges'/%3E%3Crect x='66.8' y='11.3' width='6.4' height='3.4' fill='%23fffef8' stroke='%231b1f2a' stroke-width='1' shape-rendering='crispEdges'/%3E%3Crect x='0' y='15.5' width='80' height='1.6' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3Cpolygon points='20,16.4 30.6,27 20,37.6 9.4,27' fill='%231f58b8' stroke='%231b1f2a' stroke-width='1.6' stroke-linejoin='miter'/%3E%3Cpolygon points='20,19 28,27 20,35 12,27' fill='%23d6382b'/%3E%3Cpolygon points='20,21.4 25.6,27 20,32.6 14.4,27' fill='%23f2b705'/%3E%3Cpolygon points='20,23.8 23.2,27 20,30.2 16.8,27' fill='%23fffef8'/%3E%3Cpolygon points='20,25.5 21.5,27 20,28.5 18.5,27' fill='%231b1f2a'/%3E%3Cpolygon points='60,16.4 70.6,27 60,37.6 49.4,27' fill='%231f8a4c' stroke='%231b1f2a' stroke-width='1.6' stroke-linejoin='miter'/%3E%3Cpolygon points='60,19 68,27 60,35 52,27' fill='%23d6382b'/%3E%3Cpolygon points='60,21.4 65.6,27 60,32.6 54.4,27' fill='%23f2b705'/%3E%3Cpolygon points='60,23.8 63.2,27 60,30.2 56.8,27' fill='%23fffef8'/%3E%3Cpolygon points='60,25.5 61.5,27 60,28.5 58.5,27' fill='%231b1f2a'/%3E%3Ccircle cx='-5' cy='27' r='1.35' fill='%23f2b705' stroke='%231b1f2a' stroke-width='0.7'/%3E%3Ccircle cx='0' cy='27' r='1.35' fill='%23f2b705' stroke='%231b1f2a' stroke-width='0.7'/%3E%3Ccircle cx='5' cy='27' r='1.35' fill='%23f2b705' stroke='%231b1f2a' stroke-width='0.7'/%3E%3Ccircle cx='35' cy='27' r='1.35' fill='%23f2b705' stroke='%231b1f2a' stroke-width='0.7'/%3E%3Ccircle cx='40' cy='27' r='1.35' fill='%23f2b705' stroke='%231b1f2a' stroke-width='0.7'/%3E%3Ccircle cx='45' cy='27' r='1.35' fill='%23f2b705' stroke='%231b1f2a' stroke-width='0.7'/%3E%3Ccircle cx='75' cy='27' r='1.35' fill='%23f2b705' stroke='%231b1f2a' stroke-width='0.7'/%3E%3Ccircle cx='80' cy='27' r='1.35' fill='%23f2b705' stroke='%231b1f2a' stroke-width='0.7'/%3E%3Ccircle cx='85' cy='27' r='1.35' fill='%23f2b705' stroke='%231b1f2a' stroke-width='0.7'/%3E%3Crect x='0' y='36.6' width='80' height='3.4' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3C/svg%3E"); --h-rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Crect x='0' y='0' width='40' height='12' fill='%23fffef8' shape-rendering='crispEdges'/%3E%3Crect x='1' y='2' width='8' height='8' fill='%231f58b8' stroke='%231b1f2a' stroke-width='1.4' shape-rendering='crispEdges'/%3E%3Crect x='3.5' y='4.5' width='3' height='3' fill='%23fffef8' shape-rendering='crispEdges'/%3E%3Crect x='11' y='2' width='8' height='8' fill='%23d6382b' stroke='%231b1f2a' stroke-width='1.4' shape-rendering='crispEdges'/%3E%3Crect x='13.5' y='4.5' width='3' height='3' fill='%23fffef8' shape-rendering='crispEdges'/%3E%3Crect x='21' y='2' width='8' height='8' fill='%23f2b705' stroke='%231b1f2a' stroke-width='1.4' shape-rendering='crispEdges'/%3E%3Crect x='23.5' y='4.5' width='3' height='3' fill='%23fffef8' shape-rendering='crispEdges'/%3E%3Crect x='31' y='2' width='8' height='8' fill='%231f8a4c' stroke='%231b1f2a' stroke-width='1.4' shape-rendering='crispEdges'/%3E%3Crect x='33.5' y='4.5' width='3' height='3' fill='%23fffef8' shape-rendering='crispEdges'/%3E%3C/svg%3E"); --h-frame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='0' y='0' width='48' height='48' fill='none' shape-rendering='crispEdges'/%3E%3Crect x='16' y='0' width='16' height='16' fill='%23fffef8' shape-rendering='crispEdges'/%3E%3Cpolygon points='24,1 31,8 24,15 17,8' fill='%231f58b8' stroke='%231b1f2a' stroke-width='1.3' stroke-linejoin='miter'/%3E%3Cpolygon points='24,3.2 28.8,8 24,12.8 19.2,8' fill='%23d6382b'/%3E%3Cpolygon points='24,5.2 26.8,8 24,10.8 21.2,8' fill='%23f2b705'/%3E%3Cpolygon points='24,6.9 25.1,8 24,9.1 22.9,8' fill='%231b1f2a'/%3E%3Ccircle cx='18' cy='2' r='1.2' fill='%231f8a4c' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Ccircle cx='30' cy='2' r='1.2' fill='%23d6382b' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Ccircle cx='18' cy='14' r='1.2' fill='%23d6382b' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Ccircle cx='30' cy='14' r='1.2' fill='%231f8a4c' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Crect x='16' y='32' width='16' height='16' fill='%23fffef8' shape-rendering='crispEdges'/%3E%3Cpolygon points='24,33 31,40 24,47 17,40' fill='%231f58b8' stroke='%231b1f2a' stroke-width='1.3' stroke-linejoin='miter'/%3E%3Cpolygon points='24,35.2 28.8,40 24,44.8 19.2,40' fill='%23d6382b'/%3E%3Cpolygon points='24,37.2 26.8,40 24,42.8 21.2,40' fill='%23f2b705'/%3E%3Cpolygon points='24,38.9 25.1,40 24,41.1 22.9,40' fill='%231b1f2a'/%3E%3Ccircle cx='18' cy='34' r='1.2' fill='%231f8a4c' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Ccircle cx='30' cy='34' r='1.2' fill='%23d6382b' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Ccircle cx='18' cy='46' r='1.2' fill='%23d6382b' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Ccircle cx='30' cy='46' r='1.2' fill='%231f8a4c' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Crect x='0' y='16' width='16' height='16' fill='%23fffef8' shape-rendering='crispEdges'/%3E%3Cpolygon points='8,17 15,24 8,31 1,24' fill='%231f58b8' stroke='%231b1f2a' stroke-width='1.3' stroke-linejoin='miter'/%3E%3Cpolygon points='8,19.2 12.8,24 8,28.8 3.2,24' fill='%23d6382b'/%3E%3Cpolygon points='8,21.2 10.8,24 8,26.8 5.2,24' fill='%23f2b705'/%3E%3Cpolygon points='8,22.9 9.1,24 8,25.1 6.9,24' fill='%231b1f2a'/%3E%3Ccircle cx='2' cy='18' r='1.2' fill='%231f8a4c' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Ccircle cx='14' cy='18' r='1.2' fill='%23d6382b' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Ccircle cx='2' cy='30' r='1.2' fill='%23d6382b' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Ccircle cx='14' cy='30' r='1.2' fill='%231f8a4c' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Crect x='32' y='16' width='16' height='16' fill='%23fffef8' shape-rendering='crispEdges'/%3E%3Cpolygon points='40,17 47,24 40,31 33,24' fill='%231f58b8' stroke='%231b1f2a' stroke-width='1.3' stroke-linejoin='miter'/%3E%3Cpolygon points='40,19.2 44.8,24 40,28.8 35.2,24' fill='%23d6382b'/%3E%3Cpolygon points='40,21.2 42.8,24 40,26.8 37.2,24' fill='%23f2b705'/%3E%3Cpolygon points='40,22.9 41.1,24 40,25.1 38.9,24' fill='%231b1f2a'/%3E%3Ccircle cx='34' cy='18' r='1.2' fill='%231f8a4c' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Ccircle cx='46' cy='18' r='1.2' fill='%23d6382b' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Ccircle cx='34' cy='30' r='1.2' fill='%23d6382b' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Ccircle cx='46' cy='30' r='1.2' fill='%231f8a4c' stroke='%231b1f2a' stroke-width='0.6'/%3E%3Crect x='16' y='0' width='16' height='2' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3Crect x='16' y='14.5' width='16' height='1.5' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3Crect x='16' y='32' width='16' height='1.5' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3Crect x='16' y='46' width='16' height='2' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3Crect x='0' y='16' width='2' height='16' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3Crect x='14.5' y='16' width='1.5' height='16' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3Crect x='32' y='16' width='1.5' height='16' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3Crect x='46' y='16' width='2' height='16' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3Crect x='0' y='0' width='16' height='16' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3Crect x='2' y='2' width='12' height='12' fill='%231f58b8' shape-rendering='crispEdges'/%3E%3Crect x='4' y='4' width='8' height='8' fill='%23fffef8' shape-rendering='crispEdges'/%3E%3Crect x='5.8' y='5.8' width='4.4' height='4.4' fill='%23d6382b' shape-rendering='crispEdges'/%3E%3Crect x='32' y='0' width='16' height='16' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3Crect x='34' y='2' width='12' height='12' fill='%231f58b8' shape-rendering='crispEdges'/%3E%3Crect x='36' y='4' width='8' height='8' fill='%23fffef8' shape-rendering='crispEdges'/%3E%3Crect x='37.8' y='5.8' width='4.4' height='4.4' fill='%23d6382b' shape-rendering='crispEdges'/%3E%3Crect x='0' y='32' width='16' height='16' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3Crect x='2' y='34' width='12' height='12' fill='%231f58b8' shape-rendering='crispEdges'/%3E%3Crect x='4' y='36' width='8' height='8' fill='%23fffef8' shape-rendering='crispEdges'/%3E%3Crect x='5.8' y='37.8' width='4.4' height='4.4' fill='%23d6382b' shape-rendering='crispEdges'/%3E%3Crect x='32' y='32' width='16' height='16' fill='%231b1f2a' shape-rendering='crispEdges'/%3E%3Crect x='34' y='34' width='12' height='12' fill='%231f58b8' shape-rendering='crispEdges'/%3E%3Crect x='36' y='36' width='8' height='8' fill='%23fffef8' shape-rendering='crispEdges'/%3E%3Crect x='37.8' y='37.8' width='4.4' height='4.4' fill='%23d6382b' shape-rendering='crispEdges'/%3E%3C/svg%3E"); --h-field:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke-width='1.4'%3E%3Cpolygon points='32,4 60,32 32,60 4,32' fill='none' stroke='%231f58b8' stroke-width='1.4' stroke-linejoin='miter'/%3E%3Cpolygon points='32,16 48,32 32,48 16,32' fill='none' stroke='%23d6382b' stroke-width='1.4' stroke-linejoin='miter'/%3E%3C/g%3E%3Cpolygon points='32,25 39,32 32,39 25,32' fill='%23f2b705'/%3E%3Cpolygon points='0,0 8,0 0,8' fill='%231f8a4c'/%3E%3Cpolygon points='64,0 56,0 64,8' fill='%231f8a4c'/%3E%3Cpolygon points='0,64 8,64 0,56' fill='%231f8a4c'/%3E%3Cpolygon points='64,64 56,64 64,56' fill='%231f8a4c'/%3E%3C/svg%3E"); --h-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg opacity='0.2'%3E%3Cg fill='none' stroke-width='1.4'%3E%3Cpolygon points='32,4 60,32 32,60 4,32' fill='none' stroke='%231f58b8' stroke-width='1.4' stroke-linejoin='miter'/%3E%3Cpolygon points='32,16 48,32 32,48 16,32' fill='none' stroke='%23d6382b' stroke-width='1.4' stroke-linejoin='miter'/%3E%3C/g%3E%3Cpolygon points='32,25 39,32 32,39 25,32' fill='%23f2b705'/%3E%3Cpolygon points='0,0 8,0 0,8' fill='%231f8a4c'/%3E%3Cpolygon points='64,0 56,0 64,8' fill='%231f8a4c'/%3E%3Cpolygon points='0,64 8,64 0,56' fill='%231f8a4c'/%3E%3Cpolygon points='64,64 56,64 64,56' fill='%231f8a4c'/%3E%3C/g%3E%3C/svg%3E"); --h-field-w:64px; --h-field-h:64px; --h-plq-bg:#12306b; --h-plq-ink:#fffef8; --h-plq-edge:#1b1f2a; --h-chip-bg:#12306b; --h-chip-ink:#fffef8; --h-chip-edge:#1b1f2a; } /* ---- page: quiet tessellation behind everything; no fixed bar stealing screen space ---- */ html[data-ik-theme="ubuntu-heritage"] body::after, html[data-ik-theme="zulu-beadwork"] body::after, html[data-ik-theme="ndebele-joy"] body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:var(--h-field) 0 0/var(--h-field-w) var(--h-field-h) repeat;opacity:.09; -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 70%,#000);mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 70%,#000); } html[data-ik-theme="ubuntu-heritage"]::before, html[data-ik-theme="zulu-beadwork"]::before, html[data-ik-theme="ndebele-joy"]::before{content:none} /* retire the old thin top strip */ /* ---- every card gets a woven rule along its top edge ---- */ html[data-ik-theme="ubuntu-heritage"] .card::after, html[data-ik-theme="zulu-beadwork"] .card::after, html[data-ik-theme="ndebele-joy"] .card::after{ left:0;right:0;top:0;height:9px;border-radius:var(--r-card) var(--r-card) 0 0;opacity:1; background:var(--h-rule) 0 0/auto 9px repeat-x; } /* ---- programme heading: title flanked by woven rules (no banner) ---- */ html[data-ik-theme="ubuntu-heritage"] .card.ordc h2, html[data-ik-theme="zulu-beadwork"] .card.ordc h2, html[data-ik-theme="ndebele-joy"] .card.ordc h2, html[data-ik-theme="ubuntu-heritage"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2, html[data-ik-theme="zulu-beadwork"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2, html[data-ik-theme="ndebele-joy"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2{ display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 10px;padding:0; background:none;text-align:center; } html[data-ik-theme="ubuntu-heritage"] .card.ordc h2::before, html[data-ik-theme="zulu-beadwork"] .card.ordc h2::before, html[data-ik-theme="ndebele-joy"] .card.ordc h2::before, html[data-ik-theme="ubuntu-heritage"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::before, html[data-ik-theme="zulu-beadwork"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::before, html[data-ik-theme="ndebele-joy"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::before, html[data-ik-theme="ubuntu-heritage"] .card.ordc h2::after, html[data-ik-theme="zulu-beadwork"] .card.ordc h2::after, html[data-ik-theme="ndebele-joy"] .card.ordc h2::after, html[data-ik-theme="ubuntu-heritage"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::after, html[data-ik-theme="zulu-beadwork"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::after, html[data-ik-theme="ndebele-joy"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::after{ content:"";display:block;flex:1;width:auto;height:11px;margin:0;padding:0;border:0;font-size:0;border-radius:0; background:var(--h-rule) 0 0/auto 11px repeat-x; } html[data-ik-theme="ubuntu-heritage"] .card.ordc h2::after, html[data-ik-theme="zulu-beadwork"] .card.ordc h2::after, html[data-ik-theme="ndebele-joy"] .card.ordc h2::after, html[data-ik-theme="ubuntu-heritage"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::after, html[data-ik-theme="zulu-beadwork"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::after, html[data-ik-theme="ndebele-joy"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::after{transform:scaleX(-1)} /* ---- covers: woven band top and bottom, bead-framed portrait ---- */ html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts)::before, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts)::before, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts)::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:var(--h-band) 0 0/auto 28px repeat-x,var(--h-band) 0 100%/auto 28px repeat-x; } html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts), html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts), html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts){background:var(--h-soft) 0 0/var(--h-field-w) var(--h-field-h) repeat,var(--kc-bg)} html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvph, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvph, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvph{border:15px solid transparent;border-image:var(--h-frame) 16 round;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 18px 22px rgba(0,0,0,.4))} html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvph img, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvph img, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvph img{border-radius:0} html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvdiv, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvdiv, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvdiv{ display:block;font-size:0;height:14px;width:min(250px,74%);margin:12px auto; background:var(--h-rule) center/auto 14px repeat-x;animation:none; } html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvdiv::before, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvdiv::before, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvdiv::before, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvdiv::after, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvdiv::after, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvdiv::after{content:none} /* ---- gallery: bead frame ---- */ html[data-ik-theme="ubuntu-heritage"] .ss, html[data-ik-theme="zulu-beadwork"] .ss, html[data-ik-theme="ndebele-joy"] .ss{ border:16px solid transparent;border-image:var(--h-frame) 16 round;border-radius:0;box-shadow:none; width:100%;margin:8px 0 24px;filter:drop-shadow(0 16px 20px rgba(0,0,0,.32)); } html[data-ik-theme="ubuntu-heritage"] .ss::after, html[data-ik-theme="zulu-beadwork"] .ss::after, html[data-ik-theme="ndebele-joy"] .ss::after{content:none} /* ---- end of page: the band closes the programme ---- */ html[data-ik-theme="ubuntu-heritage"] body:has(#main.wrap>.card.ai) #main.wrap::after, html[data-ik-theme="zulu-beadwork"] body:has(#main.wrap>.card.ai) #main.wrap::after, html[data-ik-theme="ndebele-joy"] body:has(#main.wrap>.card.ai) #main.wrap::after{ content:"";display:block!important;position:static;width:auto;height:32px;margin:6px 0 0;border:0;border-radius:0; background:var(--h-band) 0 0/auto 32px repeat-x; } /* ---- keep the dock readable on the busy pages ---- */ html[data-ik-theme="ubuntu-heritage"] nav.tabs, html[data-ik-theme="zulu-beadwork"] nav.tabs, html[data-ik-theme="ndebele-joy"] nav.tabs{border-color:var(--k-edge-2)} html[data-ik-theme="ndebele-joy"] nav.tabs button{color:#1b1f2a} html[data-ik-theme="ndebele-joy"] .tapo{color:#fff} html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .gcw{background:rgba(255,255,255,.8)} @media (prefers-reduced-motion:reduce){ html[data-ik-theme="ubuntu-heritage"] .cvdiv, html[data-ik-theme="zulu-beadwork"] .cvdiv, html[data-ik-theme="ndebele-joy"] .cvdiv{animation:none} } /* ============================================================================= LUXE LAYER · editorial cover, premium typography, gold-foil names, quiet motion (applies to every themed look; the granite headstone cover is left alone) ============================================================================= */ html[data-ik-theme="ethereal-velvet"][data-theme]{ --ik-n:"Cormorant Garamond"; --ik-l:"Cinzel"; --ik-s:"Cormorant Garamond"; --k-foil:linear-gradient(100deg,#a9792f 0%,#e9c46f 26%,#fff4cf 38%,#e6b95e 52%,#b9873a 70%,#e9c46f 100%); --k-scrim:linear-gradient(to top,rgba(3,5,4,.92) 0%,rgba(3,5,4,.6) 30%,rgba(3,5,4,0) 64%); --k-nsize:clamp(2.5rem,12.4vw,3.5rem); } html[data-ik-theme="royal-heritage"][data-theme]{ --ik-n:"Cinzel"; --ik-l:"Cinzel"; --ik-s:"Cormorant Garamond"; --k-foil:linear-gradient(100deg,#a8742c 0%,#e2b866 26%,#fff0c4 38%,#dcae5c 52%,#b07a30 70%,#e2b866 100%); --k-scrim:linear-gradient(to top,rgba(3,5,4,.92) 0%,rgba(3,5,4,.6) 30%,rgba(3,5,4,0) 64%); --k-nsize:clamp(1.85rem,8.6vw,2.55rem); } html[data-ik-theme="champagne-celebration"][data-theme]{ --ik-n:"Cormorant Garamond"; --ik-l:"Cinzel"; --ik-s:"Cormorant Garamond"; --ik-script:"Pinyon Script"; --k-foil:linear-gradient(100deg,#8a4a3a 0%,#c98a76 26%,#f6cdbd 38%,#c0806b 52%,#8f503f 70%,#c98a76 100%); --k-scrim:linear-gradient(to top,rgba(255,251,243,.96) 0%,rgba(255,251,243,.72) 30%,rgba(255,251,243,0) 64%); --k-nsize:clamp(2.6rem,12.8vw,3.6rem); } html[data-ik-theme="ubuntu-heritage"][data-theme]{ --ik-n:"Bodoni Moda"; --ik-l:"Cinzel"; --ik-s:"Cormorant Garamond"; --k-foil:linear-gradient(100deg,#b8862c 0%,#f2c24e 26%,#fff2c2 38%,#eab63c 52%,#bd8a2b 70%,#f2c24e 100%); --k-scrim:linear-gradient(to top,rgba(3,5,4,.92) 0%,rgba(3,5,4,.6) 30%,rgba(3,5,4,0) 64%); --k-nsize:clamp(2rem,9.6vw,2.8rem); } html[data-ik-theme="zulu-beadwork"][data-theme]{ --ik-n:"Bodoni Moda"; --ik-l:"Cinzel"; --ik-s:"Cormorant Garamond"; --k-foil:linear-gradient(100deg,#d9731a 0%,#ffb02e 26%,#fff0c8 38%,#ffa326 52%,#e07a1a 70%,#ffb02e 100%); --k-scrim:linear-gradient(to top,rgba(3,5,4,.92) 0%,rgba(3,5,4,.6) 30%,rgba(3,5,4,0) 64%); --k-nsize:clamp(1.8rem,8.6vw,2.5rem); } html[data-ik-theme="ndebele-joy"][data-theme]{ --ik-n:"Bodoni Moda"; --ik-l:"Cinzel"; --ik-s:"Cormorant Garamond"; --k-foil:linear-gradient(100deg,#0e2757 0%,#1f58b8 26%,#7fb0ff 38%,#1b4fa6 52%,#0e2757 72%,#1f58b8 100%); --k-scrim:linear-gradient(to top,rgba(255,251,243,.96) 0%,rgba(255,251,243,.72) 30%,rgba(255,251,243,0) 64%); --k-nsize:clamp(2.1rem,10.2vw,3rem); } /* ---- COVER LAYOUT: big portrait, name set over its lower edge, safe scrolling ---- */ html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvcard, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvcard, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvcard, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvcard, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvcard, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvcard{ display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(150px,500px) auto auto;grid-auto-rows:auto; justify-items:center;align-content:start;align-content:safe center;row-gap:0; padding:calc(66px + env(safe-area-inset-top,0px)) 18px calc(30px + env(safe-area-inset-bottom,0px)); } html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvcard, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvcard, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvcard{padding-top:calc(78px + env(safe-area-inset-top,0px))} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvtxt, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvtxt, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvtxt, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvtxt, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvtxt{display:contents} /* its children join the grid, so the title can sit exactly on the photo's lower edge */ html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvlbl, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvlbl, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvlbl, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvlbl, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvlbl, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvlbl{display:none!important} /* the portrait spans the label + title rows: the name always sits on its lower edge, whatever its length */ html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvph, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvph, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvph, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvph, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvph, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvph{ grid-column:1;grid-row:1 / 4;align-self:stretch;justify-self:center;width:min(92vw,396px);height:auto;min-height:0;max-height:none;margin:0; animation:ikPhoto 1.3s var(--ease) both; } html[data-ik-theme="ethereal-velvet"] .cover.gcv.kc:not(.kts) .cvcard, html[data-ik-theme="royal-heritage"] .cover.gcv.kc:not(.kts) .cvcard, html[data-ik-theme="champagne-celebration"] .cover.gcv.kc:not(.kts) .cvcard, html[data-ik-theme="ubuntu-heritage"] .cover.gcv.kc:not(.kts) .cvcard, html[data-ik-theme="zulu-beadwork"] .cover.gcv.kc:not(.kts) .cvcard, html[data-ik-theme="ndebele-joy"] .cover.gcv.kc:not(.kts) .cvcard{grid-template-rows:clamp(230px,42vh,360px) auto auto} html[data-ik-theme="ethereal-velvet"] .cover.gcv.kc:not(.kts) .cvph, html[data-ik-theme="royal-heritage"] .cover.gcv.kc:not(.kts) .cvph, html[data-ik-theme="champagne-celebration"] .cover.gcv.kc:not(.kts) .cvph, html[data-ik-theme="ubuntu-heritage"] .cover.gcv.kc:not(.kts) .cvph, html[data-ik-theme="zulu-beadwork"] .cover.gcv.kc:not(.kts) .cvph, html[data-ik-theme="ndebele-joy"] .cover.gcv.kc:not(.kts) .cvph{width:min(94%,400px);height:auto;min-height:0;max-height:none} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvtxt small, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvtxt small, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt small, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvtxt small, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvtxt small, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvtxt small{grid-column:1;grid-row:2;position:relative;z-index:3;align-self:end;justify-self:center;width:min(92vw,396px);padding-top:14px} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvtxt h1{grid-column:1;grid-row:3;position:relative;z-index:3;justify-self:center;width:min(92vw,396px);padding:0 22px 22px;margin:4px 0 0} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvcard>.cvtxt>:not(small):not(h1), html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvcard>.cvtxt>:not(small):not(h1), html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvcard>.cvtxt>:not(small):not(h1), html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvcard>.cvtxt>:not(small):not(h1), html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvcard>.cvtxt>:not(small):not(h1), html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvcard>.cvtxt>:not(small):not(h1){grid-column:1;justify-self:center;width:min(100%,420px);position:relative;z-index:3} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvcard>.cvtxt>.tapo, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvcard>.cvtxt>.tapo, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvcard>.cvtxt>.tapo, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvcard>.cvtxt>.tapo, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvcard>.cvtxt>.tapo, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvcard>.cvtxt>.tapo{width:auto;min-width:210px;max-width:92%} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvcard>.cvtxt>.cvturn, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvcard>.cvtxt>.cvturn, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvcard>.cvtxt>.cvturn, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvcard>.cvtxt>.cvturn, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvcard>.cvtxt>.cvturn, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvcard>.cvtxt>.cvturn{width:auto;min-width:0;padding:8px 22px;margin:6px 0 2px} /* heritage looks carry a woven band along the top: lower the logo and menu so they sit beneath it */ html[data-ik-theme="ubuntu-heritage"] .cvbrand, html[data-ik-theme="zulu-beadwork"] .cvbrand, html[data-ik-theme="ndebele-joy"] .cvbrand{top:calc(36px + env(safe-area-inset-top,0px));transform:scale(.8);transform-origin:left top} html[data-ik-theme="ubuntu-heritage"] .cvtop, html[data-ik-theme="zulu-beadwork"] .cvtop, html[data-ik-theme="ndebele-joy"] .cvtop{top:calc(34px + env(safe-area-inset-top,0px))} html[data-ik-theme="ubuntu-heritage"] .cvtop .tb, html[data-ik-theme="zulu-beadwork"] .cvtop .tb, html[data-ik-theme="ndebele-joy"] .cvtop .tb{width:38px;height:38px} html[data-ik-theme="ubuntu-heritage"] .cvwa, html[data-ik-theme="zulu-beadwork"] .cvwa, html[data-ik-theme="ndebele-joy"] .cvwa{bottom:calc(34px + env(safe-area-inset-bottom,0px))} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvph::after, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvph::after, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvph::after, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvph::after, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvph::after, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvph::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:var(--k-scrim);box-shadow:none;border:0; } html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvph img, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvph img, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvph img, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvph img, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvph img, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvph img{width:100%;height:100%;object-fit:cover;object-position:center 24%} /* ---- TYPOGRAPHY: inscriptional caps for labels, high-contrast display for names ---- */ html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvtxt small, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvtxt small, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt small, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvtxt small, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvtxt small, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvtxt small{ font:600 10.5px/1.5 var(--ik-l),Georgia,serif;letter-spacing:.3em;text-transform:uppercase;color:var(--kc-accent); text-shadow:0 1px 14px rgba(0,0,0,.35);padding-left:calc(24px + .3em);padding-right:24px;text-wrap:balance; } html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt small, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvtxt small{text-shadow:none} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvtxt h1{ font-family:var(--ik-n),Georgia,serif;margin:10px 0 8px;letter-spacing:-.005em; -webkit-text-fill-color:transparent;color:transparent;text-shadow:none; background:var(--k-foil) 100% 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text; filter:drop-shadow(0 2px 14px rgba(0,0,0,.45));animation:ikUp 1s var(--ease) .5s both,ikFoil 7s ease-in-out 2.2s infinite; } html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvtxt h1{filter:drop-shadow(0 1px 10px rgba(255,255,255,.7))} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvtxt h1{font-weight:600;font-style:normal;font-size:var(--k-nsize);line-height:0.98;text-transform:none} html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvtxt h1{font-weight:700;font-style:normal;font-size:var(--k-nsize);line-height:1.12;text-transform:none} html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt h1{font-weight:600;font-style:italic;font-size:var(--k-nsize);line-height:0.98;text-transform:none} html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvtxt h1{font-weight:700;font-style:normal;font-size:var(--k-nsize);line-height:1.06;text-transform:none} html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvtxt h1{font-weight:800;font-style:normal;font-size:var(--k-nsize);line-height:1.08;text-transform:uppercase} html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvtxt h1{font-weight:800;font-style:italic;font-size:var(--k-nsize);line-height:1.04;text-transform:none} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvtxt p:not(.cvm):not(.cvbp), html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvtxt p:not(.cvm):not(.cvbp), html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt p:not(.cvm):not(.cvbp), html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvtxt p:not(.cvm):not(.cvbp), html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvtxt p:not(.cvm):not(.cvbp), html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvtxt p:not(.cvm):not(.cvbp){font:italic 500 1.34rem/1.28 var(--ik-s),Georgia,serif;letter-spacing:.005em;opacity:1;animation:ikUp 1s var(--ease) .8s both} html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt p:not(.cvm):not(.cvbp){font:400 2rem/1.1 var(--ik-script),var(--ik-s),cursive;font-style:normal;color:#8f503f} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvbp{font:500 12px/1.7 var(--ik-l),Georgia,serif;letter-spacing:.22em;text-transform:uppercase;animation:ikUp 1s var(--ease) .7s both} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvm{font:500 12px/1.9 var(--ik-l),Georgia,serif;letter-spacing:.2em;text-transform:uppercase;animation:ikUp 1s var(--ease) 1s both} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvm span, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvm span, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvm span, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvm span, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvm span, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvm span{font:inherit} /* the button: a slow sweep of light across metal */ html[data-ik-theme="ethereal-velvet"] .tapo, html[data-ik-theme="royal-heritage"] .tapo, html[data-ik-theme="champagne-celebration"] .tapo, html[data-ik-theme="ubuntu-heritage"] .tapo, html[data-ik-theme="zulu-beadwork"] .tapo, html[data-ik-theme="ndebele-joy"] .tapo{ font:700 13px/1 var(--ik-l),Georgia,serif;letter-spacing:.22em;text-transform:uppercase;padding:17px 30px; background:linear-gradient(110deg,var(--k-btn-a,#c28a3f) 0%,var(--k-btn-b,#f7e2ac) 22%,var(--k-btn-c,#fff7da) 30%,var(--k-btn-b,#f7e2ac) 38%,var(--k-btn-a,#c28a3f) 70%); background-size:260% 100%;animation:ikShine 5.5s ease-in-out infinite!important; margin-top:22px; } html[data-ik-theme="ethereal-velvet"]{--k-btn-a:#c28a3f;--k-btn-b:#f0cf86;--k-btn-c:#fff7da} html[data-ik-theme="royal-heritage"]{--k-btn-a:#b07a30;--k-btn-b:#e6bf72;--k-btn-c:#fff3cc} html[data-ik-theme="ubuntu-heritage"]{--k-btn-a:#c98408;--k-btn-b:#f6c445;--k-btn-c:#fff3c4} html[data-ik-theme="zulu-beadwork"]{--k-btn-a:#e07a1a;--k-btn-b:#ffb53a;--k-btn-c:#fff0cc} html[data-ik-theme="champagne-celebration"]{--k-btn-a:#cd8d79;--k-btn-b:#f0bba9;--k-btn-c:#fff1ea} html[data-ik-theme="ndebele-joy"]{--k-btn-a:#1b4fa6;--k-btn-b:#3a78e0;--k-btn-c:#a9ccff} /* ---- gold dust drifting through the cover ---- */ html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvcard::before, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvcard::before, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvcard::before, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvcard::before, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvcard::before, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvcard::before{ content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;pointer-events:none;z-index:0; box-shadow:173px 224px 2px 0px color-mix(in srgb,var(--kc-accent) 55%,transparent),282px 166px 1px 0px color-mix(in srgb,var(--kc-accent) 70%,transparent),27px 158px 2px 1px color-mix(in srgb,var(--kc-accent) 55%,transparent),131px 162px 3px 1px color-mix(in srgb,var(--kc-accent) 55%,transparent),297px 196px 1px 0px color-mix(in srgb,var(--kc-accent) 100%,transparent),33px 296px 0px 0px color-mix(in srgb,var(--kc-accent) 85%,transparent),222px 217px 3px 0px color-mix(in srgb,var(--kc-accent) 85%,transparent),294px 255px 0px 0px color-mix(in srgb,var(--kc-accent) 85%,transparent),57px 630px 0px 0px color-mix(in srgb,var(--kc-accent) 70%,transparent),262px 614px 2px 0px color-mix(in srgb,var(--kc-accent) 100%,transparent),307px 534px 1px 0px color-mix(in srgb,var(--kc-accent) 70%,transparent),100px 319px 0px 0px color-mix(in srgb,var(--kc-accent) 100%,transparent),183px 529px 1px 0px color-mix(in srgb,var(--kc-accent) 55%,transparent),270px 498px 1px 0px color-mix(in srgb,var(--kc-accent) 70%,transparent),258px 501px 0px 0px color-mix(in srgb,var(--kc-accent) 85%,transparent),182px 428px 3px 1px color-mix(in srgb,var(--kc-accent) 100%,transparent),43px 165px 1px 1px color-mix(in srgb,var(--kc-accent) 55%,transparent),39px 387px 3px 1px color-mix(in srgb,var(--kc-accent) 85%,transparent),205px 425px 0px 1px color-mix(in srgb,var(--kc-accent) 85%,transparent),94px 189px 2px 0px color-mix(in srgb,var(--kc-accent) 70%,transparent),155px 202px 1px 1px color-mix(in srgb,var(--kc-accent) 100%,transparent),262px 152px 1px 1px color-mix(in srgb,var(--kc-accent) 100%,transparent);animation:ikDust 7s ease-in-out infinite; } /* ---- the programme heading, in the same inscriptional caps ---- */ html[data-ik-theme="ethereal-velvet"] .card.ordc h2, html[data-ik-theme="royal-heritage"] .card.ordc h2, html[data-ik-theme="champagne-celebration"] .card.ordc h2, html[data-ik-theme="ubuntu-heritage"] .card.ordc h2, html[data-ik-theme="zulu-beadwork"] .card.ordc h2, html[data-ik-theme="ndebele-joy"] .card.ordc h2, html[data-ik-theme="ethereal-velvet"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2, html[data-ik-theme="royal-heritage"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2, html[data-ik-theme="champagne-celebration"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2, html[data-ik-theme="ubuntu-heritage"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2, html[data-ik-theme="zulu-beadwork"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2, html[data-ik-theme="ndebele-joy"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2{ font:600 14px/1.2 var(--ik-l),Georgia,serif;letter-spacing:.34em;text-transform:uppercase;color:var(--k-head); -webkit-text-fill-color:currentColor; } html[data-ik-theme="ethereal-velvet"] .card h2, html[data-ik-theme="royal-heritage"] .card h2, html[data-ik-theme="champagne-celebration"] .card h2{letter-spacing:.01em} /* velvet / royal / champagne: hairline gold rules either side of the heading (heritage looks use woven rules) */ html[data-ik-theme="ethereal-velvet"] .card.ordc h2, html[data-ik-theme="royal-heritage"] .card.ordc h2, html[data-ik-theme="champagne-celebration"] .card.ordc h2, html[data-ik-theme="ethereal-velvet"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2, html[data-ik-theme="royal-heritage"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2, html[data-ik-theme="champagne-celebration"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2{ display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0 8px; } html[data-ik-theme="ethereal-velvet"] .card.ordc h2::before, html[data-ik-theme="royal-heritage"] .card.ordc h2::before, html[data-ik-theme="champagne-celebration"] .card.ordc h2::before, html[data-ik-theme="ethereal-velvet"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::before, html[data-ik-theme="royal-heritage"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::before, html[data-ik-theme="champagne-celebration"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::before, html[data-ik-theme="ethereal-velvet"] .card.ordc h2::after, html[data-ik-theme="royal-heritage"] .card.ordc h2::after, html[data-ik-theme="champagne-celebration"] .card.ordc h2::after, html[data-ik-theme="ethereal-velvet"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::after, html[data-ik-theme="royal-heritage"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::after, html[data-ik-theme="champagne-celebration"] body:has(#main.wrap>.card.ai) #main.wrap>.card.ordc h2::after{ content:"";display:block;flex:1;width:auto;height:1px;margin:0;padding:0;border:0;font-size:0; background:var(--k-line);opacity:.9; } /* ---- short screens (your phone with the browser toolbars showing is ~645px): compact text so the portrait stays big and the button stays on screen ---- */ @media (max-height:720px){ html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvcard, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvcard, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvcard, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvcard, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvcard, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvcard{padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvdiv, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvdiv, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvdiv, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvdiv, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvdiv, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvdiv{display:none} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvbp{font-size:11px;margin:8px 0 2px} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvbp span, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvbp span, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvbp span, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvbp span, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvbp span, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvbp span{display:inline} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvbp span+span::before, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvbp span+span::before, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvbp span+span::before, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvbp span+span::before, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvbp span+span::before, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvbp span+span::before{content:" · "} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvtxt p:not(.cvm):not(.cvbp), html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvtxt p:not(.cvm):not(.cvbp), html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt p:not(.cvm):not(.cvbp), html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvtxt p:not(.cvm):not(.cvbp), html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvtxt p:not(.cvm):not(.cvbp), html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvtxt p:not(.cvm):not(.cvbp){font-size:1.1rem;margin:6px 0 2px} html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt p:not(.cvm):not(.cvbp){font-size:1.6rem} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvm{font-size:11px;line-height:1.7;margin-top:6px} html[data-ik-theme="ethereal-velvet"] .tapo, html[data-ik-theme="royal-heritage"] .tapo, html[data-ik-theme="champagne-celebration"] .tapo, html[data-ik-theme="ubuntu-heritage"] .tapo, html[data-ik-theme="zulu-beadwork"] .tapo, html[data-ik-theme="ndebele-joy"] .tapo{margin-top:14px;padding:14px 26px} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvtxt h1{padding-bottom:16px;font-size:calc(var(--k-nsize) * .86)} } /* ---- keyframes ---- */ @keyframes ikPhoto{from{opacity:0;transform:translate3d(0,18px,0) scale(.965)}to{opacity:1;transform:none}} @keyframes ikUp{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}} @keyframes ikFoil{0%,35%{background-position:100% 0}75%,100%{background-position:0% 0}} @keyframes ikShine{0%,40%{background-position:100% 0}75%,100%{background-position:0 0}} @keyframes ikDust{0%,100%{opacity:.3;transform:translate3d(0,0,0)}50%{opacity:1;transform:translate3d(0,-12px,0)}} @media (prefers-reduced-motion:reduce){ html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvph, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvph, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvph, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvph, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvph, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvph,html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvtxt h1,html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvtxt p, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvtxt p, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt p, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvtxt p, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvtxt p, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvtxt p, html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvbp, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvbp,html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvm, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvm,html[data-ik-theme="ethereal-velvet"] .tapo, html[data-ik-theme="royal-heritage"] .tapo, html[data-ik-theme="champagne-celebration"] .tapo, html[data-ik-theme="ubuntu-heritage"] .tapo, html[data-ik-theme="zulu-beadwork"] .tapo, html[data-ik-theme="ndebele-joy"] .tapo,html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvcard::before, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvcard::before, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvcard::before, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvcard::before, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvcard::before, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvcard::before{animation:none!important} html[data-ik-theme="ethereal-velvet"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvtxt h1, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvtxt h1{background-position:0 0} } /* --------------------------------------------------------------------------- 9. DOWNLOADED / PRINTED PROGRAMME – always ink on white, whatever the theme --------------------------------------------------------------------------- */ html[data-ik-theme]:has(body.print-mode){--ink:#1d1712;--mute:#6b5d4f;--acc:#8a5a1f;--k-head:#1d1712;--card:#fff;--k-edge:#d8cabb} body.print-mode::before,body.print-mode::after{display:none!important} body.print-mode .card::after,body.print-mode .card::before{display:none!important} body.print-mode .card{outline:0!important} body.print-mode .card h2{-webkit-text-fill-color:currentColor!important} /* --------------------------------------------------------------------------- 10. ADMIN: the "Page look" picker in the event editor (not themed itself) --------------------------------------------------------------------------- */ .ikpick{display:grid;gap:8px;margin:6px 0 4px} .ikpick button{ display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer; padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:var(--glass);color:var(--ink); font:inherit;min-height:56px;transition:border-color .2s,box-shadow .2s,transform .18s var(--ease); } .ikpick button:active{transform:scale(.985)} .ikpick button.on{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 26%,transparent)} .ikpick .sw{flex:none;width:40px;height:40px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 6px 14px -6px rgba(0,0,0,.5)} .ikpick b{display:block;font-size:14px} .ikpick small{display:block;color:var(--mute);font-size:12px;line-height:1.3} /* --------------------------------------------------------------------------- 11. MOTION PREFERENCES --------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ html[data-ik-theme] body::after, html[data-ik-theme] .cover .cvdiv, html[data-ik-theme] .cover .cvph, html[data-ik-theme] #main>:not(.gcv){animation:none!important} html[data-ik-theme] .sl.on img{transform:none} html[data-ik-theme] nav.tabs::before{transition:none} } /* --------------------------------------------------------------------------- 12. COVER WHATSAPP BUTTON – smaller and quieter (all looks) --------------------------------------------------------------------------- */ .cvwa{width:40px;height:40px;left:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px)); box-shadow:0 6px 16px -4px rgba(0,0,0,.5),0 0 0 2px #ffffff40} .cvwa svg{width:20px;height:20px} /* --------------------------------------------------------------------------- 13. ADD TO CALENDAR picker (reads the active look's tokens, falls back to the original palette) --------------------------------------------------------------------------- */ .ikcal{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center; background:rgba(0,0,0,.52);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:ikcalbg .25s ease both;transition:opacity .2s} .ikcal.out{opacity:0} .ikcal-p{width:min(440px,100%);display:grid;gap:10px;padding:20px 16px calc(18px + env(safe-area-inset-bottom,0px)); background:var(--bg);color:var(--ink);border:1px solid var(--k-edge,var(--line));border-bottom:0;border-radius:28px 28px 0 0; box-shadow:0 -24px 60px -20px rgba(0,0,0,.6);animation:ikcalup .45s var(--ease) both} .ikcal-h{font:600 24px/1.1 var(--ik-d,Fraunces),Georgia,serif;text-align:center;margin:2px 0 6px;color:var(--k-head,var(--ink))} .ikcal-s{display:block;text-align:center;font:600 11px/1.2 var(--ik-b,Inter),sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin:-2px 0 8px;opacity:.9} .ikcal-p button{display:flex;align-items:center;gap:14px;width:100%;min-height:62px;padding:10px 14px;text-align:left;cursor:pointer; color:inherit;font:inherit;background:var(--card);border:1px solid var(--k-edge,var(--line));border-radius:18px;transition:transform .18s var(--ease),border-color .2s} .ikcal-p button:active{transform:scale(.985)} .ikcal-p button:focus-visible{outline:2px solid var(--acc);outline-offset:2px} .ikcal-p button i{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:700 18px/1 var(--ik-b,Inter),sans-serif;font-style:normal; background:var(--k-metal,linear-gradient(135deg,var(--acc),var(--acc2)));color:var(--on)} .ikcal-p button b{display:block;font-size:15px} .ikcal-p button small{display:block;color:var(--mute);font-size:12.5px;margin-top:1px} .ikcal-p .ikcal-x{justify-content:center;min-height:50px;background:none;border-color:transparent;color:var(--mute);font-weight:600} @keyframes ikcalbg{from{opacity:0}} @keyframes ikcalup{from{transform:translate3d(0,40px,0);opacity:0}} @media (prefers-reduced-motion:reduce){.ikcal,.ikcal-p{animation:none}} /* =========================================================================== COVER REFINEMENT (v14) - a smaller, calmer portrait; the name no longer sits on the photo. Photo ~44% of the screen (no logo badge above it), then: label, name, details, button - all on the plain background. Appended last so it wins over the per-theme cover layout above (same specificity, later rule). =========================================================================== */ html[data-ik-theme] .cover.kc:not(.kts) .cvcard, html[data-ik-theme] .cover.gcv.kc:not(.kts) .cvcard{ grid-template-rows:clamp(250px,44vh,420px) auto auto; padding-top:calc(58px + env(safe-area-inset-top,0px)); padding-bottom:calc(26px + env(safe-area-inset-bottom,0px)); } html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts) .cvcard, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts) .cvcard, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts) .cvcard{padding-top:calc(82px + env(safe-area-inset-top,0px))} html[data-ik-theme] .cover.kc:not(.kts) .cvph, html[data-ik-theme] .cover.gcv.kc:not(.kts) .cvph{ grid-row:1;width:min(86vw,360px);max-width:100%;margin-bottom:22px; } html[data-ik-theme] .cover.kc:not(.kts) .cvph::after{background:none} /* no dark fade: nothing is written over the photo */ html[data-ik-theme="royal-heritage"] .cover.kc:not(.kts) .cvph::after{ border:1px solid rgba(240,210,140,.72);box-shadow:0 0 0 1px rgba(0,0,0,.25);inset:6px;border-radius:2px; } html[data-ik-theme] .cover.kc:not(.kts) .cvtxt small{padding-top:4px;padding-bottom:10px;align-self:start} html[data-ik-theme] .cover.kc:not(.kts) .cvtxt h1{ padding:0 6px 2px;margin:0;width:min(92vw,396px);text-shadow:none; font-size:clamp(1.7rem,7.4vw,2.3rem);line-height:1.12;text-wrap:balance; } html[data-ik-theme] .cover.kc:not(.kts) .cvcard>.cvtxt>.cvdiv{margin-top:10px;margin-bottom:10px} html[data-ik-theme] .cover.kc:not(.kts) .cvcard>.cvtxt>.tapo{margin-top:14px} @media (max-height:700px){ /* only the full-screen cover must fit the screen; the in-page cover just scrolls */ html[data-ik-theme] .cover.kc:not(.kts):not(.gcv) .cvcard{grid-template-rows:clamp(170px,32vh,240px) auto auto;padding-top:calc(54px + env(safe-area-inset-top,0px))} html[data-ik-theme] .cover.kc:not(.kts):not(.gcv) .cvph{width:min(70vw,260px);margin-bottom:16px} } /* champagne: the rose-gold name needs a deeper tone now that it sits on the pale background, not on the photo */ html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt h1{ --k-foil:linear-gradient(100deg,#6f3526 0%,#9a5441 38%,#7d3f2f 70%,#6f3526 100%); } html[data-ik-theme="champagne-celebration"] .cover.kc:not(.kts) .cvtxt small{color:#8f4a39} /* =========================================================================== COVER v15 - larger portrait (fills the space the text does not need) and the Ikhaya mark at the top-left, mirroring the menu button at the top-right. Appended last so it wins over the v14 refinement above. =========================================================================== */ html[data-ik-theme] .cover.kc:not(.kts):not(.gcv) .cvcard{ grid-template-rows:clamp(240px,calc(100vh - 340px),500px) auto auto; grid-template-rows:clamp(240px,calc(100dvh - 340px),500px) auto auto; padding-top:calc(60px + env(safe-area-inset-top,0px)); padding-bottom:calc(18px + env(safe-area-inset-bottom,0px)); } html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts):not(.gcv) .cvcard, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts):not(.gcv) .cvcard, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts):not(.gcv) .cvcard{ grid-template-rows:clamp(230px,calc(100vh - 355px),500px) auto auto; grid-template-rows:clamp(230px,calc(100dvh - 355px),500px) auto auto; padding-top:calc(80px + env(safe-area-inset-top,0px)); } html[data-ik-theme] .cover.kc:not(.kts):not(.gcv) .cvph{width:min(90vw,410px);margin-bottom:16px} html[data-ik-theme] .cover.gcv.kc:not(.kts) .cvcard{grid-template-rows:clamp(300px,52vh,520px) auto auto} html[data-ik-theme] .cover.gcv.kc:not(.kts) .cvph{width:min(88%,390px)} .cvbrand{z-index:4;pointer-events:none;top:calc(13px + env(safe-area-inset-top,0px));left:14px} .cvbrand img,.gcbrand img{display:block;width:40px;height:40px;border-radius:11px;object-fit:cover; box-shadow:0 0 0 1px rgba(214,169,90,.55),0 6px 16px -4px rgba(0,0,0,.6);filter:none} html[data-ik-theme="ubuntu-heritage"] .cvbrand, html[data-ik-theme="zulu-beadwork"] .cvbrand, html[data-ik-theme="ndebele-joy"] .cvbrand{top:calc(33px + env(safe-area-inset-top,0px));transform:none} /* =========================================================================== VIDEO GALLERY v16 - videos use the same framed slider as the photos (themed frame, arrows, dots, caption). Always muted, no native controls. =========================================================================== */ .ss .sl video{display:block;width:100%;height:100%;object-fit:cover;background:#000;-webkit-tap-highlight-color:transparent} .ss.vs{margin-top:18px} .ss.vs .sl{pointer-events:none} .ss.vs .sl.on{pointer-events:auto} .ss.vs .sl.on video{cursor:pointer} .ss.vs video::-webkit-media-controls,.ss.vs video::-webkit-media-controls-enclosure{display:none!important} html[data-ik-theme="champagne-celebration"] .sl video{border-radius:9px} /* =========================================================================== COVER LOGO v18 - the full "Ikhaya Events & Legacy" logo (mark + wordmark), top-left of the cover, level with the menu button. Cover only. =========================================================================== */ .cvbrand{top:calc(11px + env(safe-area-inset-top,0px));left:14px} .cvbrand img{display:block;width:auto;height:44px;max-width:calc(100vw - 96px);object-fit:contain;border-radius:0;box-shadow:none; filter:drop-shadow(0 1px 6px rgba(0,0,0,.55))} html[data-ik-theme="ubuntu-heritage"] .cvbrand, html[data-ik-theme="zulu-beadwork"] .cvbrand, html[data-ik-theme="ndebele-joy"] .cvbrand{top:calc(31px + env(safe-area-inset-top,0px))} /* light covers: the gold artwork is deepened so it stays readable on cream */ html[data-theme="light"] .cvbrand img{filter:brightness(.4) saturate(1.5) contrast(1.15) drop-shadow(0 1px 0 rgba(255,255,255,.4))} /* =========================================================================== COVER v19 - nothing may ever sit under the logo, in any browser window. Facebook / Instagram in-app browsers give a short window and a top inset, and funeral covers carry extra lines (born / passed / tribute line). - classic (unthemed) cover: content starts below the logo, the portrait shrinks to make room, and only scrolls if a phone is truly tiny - themed covers: the portrait row subtracts the inset and the extra lines =========================================================================== */ html:not([data-ik-theme]) .cover.kc:not(.gcv) .cvcard{justify-content:flex-start;padding-top:calc(68px + env(safe-area-inset-top,0px))} html:not([data-ik-theme]) .cover.kc:not(.gcv) .cvcard>.cvph{margin-top:auto} html:not([data-ik-theme]) .cover.kc:not(.gcv) .cvcard>.cvtxt{margin-bottom:auto} html:not([data-ik-theme]) .cover.kc:not(.kts):not(.gcv):not(.k-baby_shower) .cvph{height:auto;flex:0 1 clamp(200px,42vh,380px);min-height:130px} html:not([data-ik-theme]) .cover.kd:not(.kts):not(.gcv) .cvph, html:not([data-ik-theme]) .cover.kf:not(.gcv):not(.k-baby_shower) .cvph{width:min(76vw,300px)} html[data-ik-theme] .cover.kc:not(.kts):not(.gcv) .cvcard{ padding-top:calc(66px + env(safe-area-inset-top,0px)); align-content:start;align-content:safe center; grid-template-rows:clamp(210px,calc(100vh - 346px - env(safe-area-inset-top,0px)),500px) auto auto; grid-template-rows:clamp(210px,calc(100dvh - 346px - env(safe-area-inset-top,0px)),500px) auto auto; } html[data-ik-theme] .cover.k-funeral.kc:not(.kts):not(.gcv) .cvcard, html[data-ik-theme] .cover.k-unveil.kc:not(.kts):not(.gcv) .cvcard{ grid-template-rows:clamp(190px,calc(100vh - 362px - env(safe-area-inset-top,0px)),500px) auto auto; grid-template-rows:clamp(190px,calc(100dvh - 362px - env(safe-area-inset-top,0px)),500px) auto auto; } html[data-ik-theme="ubuntu-heritage"] .cover.kc:not(.kts):not(.gcv) .cvcard, html[data-ik-theme="zulu-beadwork"] .cover.kc:not(.kts):not(.gcv) .cvcard, html[data-ik-theme="ndebele-joy"] .cover.kc:not(.kts):not(.gcv) .cvcard{ padding-top:calc(86px + env(safe-area-inset-top,0px)); grid-template-rows:clamp(210px,calc(100vh - 372px - env(safe-area-inset-top,0px)),500px) auto auto; grid-template-rows:clamp(210px,calc(100dvh - 372px - env(safe-area-inset-top,0px)),500px) auto auto; } html[data-ik-theme="ubuntu-heritage"] .cover.k-unveil.kc:not(.kts):not(.gcv) .cvcard, html[data-ik-theme="zulu-beadwork"] .cover.k-unveil.kc:not(.kts):not(.gcv) .cvcard, html[data-ik-theme="ubuntu-heritage"] .cover.k-funeral.kc:not(.kts):not(.gcv) .cvcard{ grid-template-rows:clamp(190px,calc(100vh - 388px - env(safe-area-inset-top,0px)),500px) auto auto; grid-template-rows:clamp(190px,calc(100dvh - 388px - env(safe-area-inset-top,0px)),500px) auto auto; } /* ===== v20: gig / poster covers show the WHOLE picture (never cropped) ===== */ .cover.k-gig:not(.gcv){display:flex;flex-direction:column;background:#0d0b0a} .cover.k-gig:not(.gcv):after{display:none} .cover.k-gig:not(.gcv) .cvbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(28px) brightness(.45) saturate(1.2);transform:scale(1.25)} .cover.k-gig:not(.gcv) .cvimg{position:relative;inset:auto;z-index:1;flex:1 1 0;min-height:0;width:100%;height:auto;box-sizing:border-box;padding:calc(70px + env(safe-area-inset-top,0px)) 14px 0;object-fit:contain;object-position:center;animation:none} .cover.k-gig:not(.gcv) .cvtxt{position:relative;z-index:2;flex:none;bottom:auto;padding:12px 20px calc(18px + env(safe-area-inset-bottom,0px));background:linear-gradient(#0d0b0a00,#0d0b0ae6 35%)} .cover.k-gig:not(.gcv) .cvtxt small,.cover.k-gig:not(.gcv) .cvtxt>p:not(.cvm){display:none} .cover.k-gig:not(.gcv) .cvtxt h1{font-size:clamp(1.15rem,5.2vw,1.55rem);line-height:1.15;margin:0 0 4px} .cover.k-gig:not(.gcv) .cvtxt .cvm{margin-top:2px} .cover.k-gig:not(.gcv) .tapo{margin-top:12px} .cover.k-gig:not(.gcv).np{background:linear-gradient(160deg,var(--acc2),var(--acc));justify-content:flex-end} /* in-page gig cover card */ .cover.gcv.k-gig .cvimg{filter:blur(26px) brightness(.5);transform:scale(1.25)} .cover.gcv.k-gig .cvph{width:100%;max-width:400px;height:auto;border-radius:18px;background:none} .cover.gcv.k-gig .cvph img{width:100%;height:auto;max-height:70vh;object-fit:contain;border-radius:18px} /* poster already carries the details: hide the repeated text, keep buttons (title stays for screen readers) */ .cover.kno .cvtxt>:not(.tapo):not(.ikbuy):not(.gcrow):not(h1){display:none!important} .cover.kno .cvtxt>h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0} .cover.k-gig.kno:not(.gcv) .cvtxt{padding-top:6px;background:linear-gradient(#0d0b0a00,#0d0b0ad9 45%)} /* ===== v20: gig / poster covers show the WHOLE picture (never cropped) ===== */ .cover.k-group:not(.gcv){display:flex;flex-direction:column;background:#0d0b0a} .cover.k-group:not(.gcv):after{display:none} .cover.k-group:not(.gcv) .cvbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(28px) brightness(.45) saturate(1.2);transform:scale(1.25)} .cover.k-group:not(.gcv) .cvimg{position:relative;inset:auto;z-index:1;flex:1 1 0;min-height:0;width:100%;height:auto;box-sizing:border-box;padding:calc(70px + env(safe-area-inset-top,0px)) 14px 0;object-fit:contain;object-position:center;animation:none} .cover.k-group:not(.gcv) .cvtxt{position:relative;z-index:2;flex:none;bottom:auto;padding:12px 20px calc(18px + env(safe-area-inset-bottom,0px));background:linear-gradient(#0d0b0a00,#0d0b0ae6 35%)} .cover.k-group:not(.gcv) .cvtxt small,.cover.k-group:not(.gcv) .cvtxt>p:not(.cvm){display:none} .cover.k-group:not(.gcv) .cvtxt h1{font-size:clamp(1.15rem,5.2vw,1.55rem);line-height:1.15;margin:0 0 4px} .cover.k-group:not(.gcv) .cvtxt .cvm{margin-top:2px} .cover.k-group:not(.gcv) .tapo{margin-top:12px} .cover.k-group:not(.gcv).np{background:linear-gradient(160deg,var(--acc2),var(--acc));justify-content:flex-end} /* in-page gig cover card */ .cover.gcv.k-group .cvimg{filter:blur(26px) brightness(.5);transform:scale(1.25)} .cover.gcv.k-group .cvph{width:100%;max-width:400px;height:auto;border-radius:18px;background:none} .cover.gcv.k-group .cvph img{width:100%;height:auto;max-height:70vh;object-fit:contain;border-radius:18px} /* poster already carries the details: hide the repeated text, keep buttons (title stays for screen readers) */ .cover.kno .cvtxt>:not(.tapo):not(.ikbuy):not(.gcrow):not(h1){display:none!important} .cover.kno .cvtxt>h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0} .cover.k-group.kno:not(.gcv) .cvtxt{padding-top:6px;background:linear-gradient(#0d0b0a00,#0d0b0ad9 45%)} .k-group .cvtxt small{color:#e8bb5a;font-weight:700;letter-spacing:.28em} /* ===== v25: luxe icon system ===== */ .ikic{flex:none;overflow:visible} .ikl{display:inline-flex;align-items:center;gap:.6em;vertical-align:middle} .ikl>span{min-width:0} .card h2 .ikic:not(.ik-wa),.ikl.gold .ikic:not(.ik-wa),.pill .ikic,.cvmenu .ikic{stroke:url(#ikg)} .card h2 .ikic:not(.ik-wa) .ikf,.pill .ikic .ikf{fill:url(#ikg);fill-opacity:.2} .card h2 .ikic:not(.ik-wa) .iks,.pill .ikic .iks{fill:url(#ikg);stroke:none} .card h2 .ikic{filter:drop-shadow(0 1px 3px #d4a53a47)} .ik-wa{color:#25D366} .ik-wa .iks{fill:#25D366} nav.tabs button .dki{width:22px;height:22px} .songb .ikic,.cmdi .ikic{color:var(--acc)} .cmdi .ikic{color:var(--mute)} .who .ikic{vertical-align:-2px} .pill{display:inline-flex;align-items:center} .pp .ikic{display:block} .ikcal-p button>i{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-style:normal;background:linear-gradient(145deg,#2a2112,#14100a);border:1px solid #d4a53a66;box-shadow:inset 0 1px 0 #ffffff14} .ikcal-p button>i svg{width:24px;height:24px;stroke:url(#ikg);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .ikcal-p button>i svg .ikf{fill:url(#ikg);fill-opacity:.2;stroke:url(#ikg)} .ikcal-p button>i svg .iks{fill:url(#ikg);stroke:none} .cvhb .ikic{stroke:url(#ikg)} /* ===== v26: Community / Group colour theme (gold + emerald). Without this the accent colour was undefined, so primary buttons and the active tab had no background. ===== */ html[data-kind=group][data-theme]{--bg:#0a0908;--card:#171310cc;--ink:#f7f1e8;--mute:#b3aa9c;--line:#e8bb5a38;--acc:#e8bb5a;--acc2:#1f9d63;--on:#140d02;--glow:#1f9d6340} html[data-kind=group] body{background:radial-gradient(120% 55% at 50% -8%,#1f9d6347,transparent 62%),radial-gradient(70% 40% at 100% 35%,#e8bb5a1f,transparent),var(--bg)} html[data-kind=group] .card h2{letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-size:13px} .k-group .cvtxt h1{text-transform:uppercase;letter-spacing:.01em} /* v18: tighter cover card - less empty frame above and around the photo */ .cover.gcv .ikth.in{top:8px!important;right:8px!important;width:36px;height:36px} .cover.gcv.k-group .cvcard,.cover.gcv.k-gig .cvcard{padding:8px 8px 22px!important} .cover.gcv.k-group .cvph,.cover.gcv.k-gig .cvph{max-width:none} .cover.gcv.k-group .cvtxt,.cover.gcv.k-gig .cvtxt{padding:0 12px!important} .cover.gcv:not(.k-group):not(.k-gig):not(.k-baby_shower):not(.k-party):not(.kts) .cvcard{padding-top:46px!important} /* Original luxury wedding presets for the Ikhaya theme picker. */ html[data-ik-theme="luxe-botanical"][data-theme]{color-scheme:light;--bg:#f7f5ed;--ink:#29392e;--mute:#677268;--card:#fffefa;--line:rgba(91,111,88,.18);--acc:#647b61;--acc2:#a78b60;--on:#fff;--glow:rgba(100,123,97,.10);--lit:rgba(255,255,255,.8);--r-card:20px;--k-edge:rgba(101,126,97,.25);--k-edge-2:#a78b60;--k-line:linear-gradient(90deg,transparent,#9bad88,transparent);--k-metal:linear-gradient(135deg,#e9dfc2,#a78b60);--k-bg-img:radial-gradient(70% 45% at 50% 0%,rgba(170,190,155,.18),transparent 70%),linear-gradient(165deg,#faf8f1,#edf0e7);--kc-bg:linear-gradient(165deg,#f8f6ed,#e8eee4);--kc-ink:#29392e;--kc-mute:#657264;--kc-accent:#8b7954;--kc-veil:linear-gradient(transparent 52%,rgba(30,45,34,.10))} html[data-ik-theme="luxe-emerald"][data-theme]{color-scheme:dark;--bg:#081b17;--ink:#f3ead7;--mute:#b0b8a9;--card:rgba(17,47,39,.82);--line:rgba(210,176,112,.22);--acc:#d5b16b;--acc2:#9a7744;--on:#20180c;--glow:rgba(211,176,107,.12);--lit:rgba(250,236,199,.12);--r-card:16px;--k-edge:rgba(213,177,107,.35);--k-edge-2:#d5b16b;--k-line:linear-gradient(90deg,transparent,#d5b16b,transparent);--k-metal:linear-gradient(135deg,#f5e7be,#bd914b);--k-bg-img:radial-gradient(65% 40% at 50% 0%,rgba(177,141,69,.20),transparent 70%),linear-gradient(165deg,#061410,#10362b 60%,#061410);--kc-bg:linear-gradient(165deg,#10362b,#071914);--kc-ink:#f3ead7;--kc-mute:#d1c6a9;--kc-accent:#e2bf78;--kc-veil:linear-gradient(transparent 52%,rgba(0,0,0,.42))} html[data-ik-theme="luxe-champagne"][data-theme]{color-scheme:light;--bg:#fbf8f1;--ink:#3a3026;--mute:#7d7063;--card:#fffdfa;--line:rgba(169,133,84,.2);--acc:#8e6c3c;--acc2:#c49e68;--on:#fff;--glow:rgba(188,155,105,.12);--lit:#fff;--r-card:18px;--k-edge:rgba(172,137,88,.28);--k-edge-2:#bd985f;--k-line:linear-gradient(90deg,transparent,#c5a36d,transparent);--k-metal:linear-gradient(135deg,#f0dfb9,#bd985f);--k-bg-img:radial-gradient(70% 45% at 50% 0%,rgba(225,205,165,.24),transparent 70%),linear-gradient(165deg,#fffdf8,#f2eadb);--kc-bg:linear-gradient(165deg,#fffdf8,#eee3cf);--kc-ink:#3a3026;--kc-mute:#786a5b;--kc-accent:#a47c45;--kc-veil:linear-gradient(transparent 52%,rgba(62,45,28,.10))} html[data-ik-theme="luxe-blush"][data-theme]{color-scheme:light;--bg:#fbf5f3;--ink:#49343a;--mute:#836b71;--card:#fffafa;--line:rgba(173,116,132,.2);--acc:#a75e70;--acc2:#c78b92;--on:#fff;--glow:rgba(189,123,140,.11);--lit:#fff;--r-card:22px;--k-edge:rgba(177,110,127,.24);--k-edge-2:#bd7c89;--k-line:linear-gradient(90deg,transparent,#c58a94,transparent);--k-metal:linear-gradient(135deg,#f2d8d4,#bc7c8b);--k-bg-img:radial-gradient(70% 45% at 50% 0%,rgba(222,174,178,.2),transparent 70%),linear-gradient(165deg,#fffaf8,#f5e8e7);--kc-bg:linear-gradient(165deg,#fff8f6,#f1e2e1);--kc-ink:#49343a;--kc-mute:#806970;--kc-accent:#a75e70;--kc-veil:linear-gradient(transparent 52%,rgba(74,45,53,.10))} html[data-ik-theme="luxe-noir"][data-theme]{color-scheme:dark;--bg:#111116;--ink:#f4efe4;--mute:#b4ad9e;--card:rgba(34,32,34,.84);--line:rgba(205,174,117,.21);--acc:#d0ad6a;--acc2:#987744;--on:#1a1711;--glow:rgba(205,174,117,.12);--lit:rgba(244,224,184,.12);--r-card:14px;--k-edge:rgba(205,174,117,.34);--k-edge-2:#d0ad6a;--k-line:linear-gradient(90deg,transparent,#d0ad6a,transparent);--k-metal:linear-gradient(135deg,#f2dfb2,#b78e4c);--k-bg-img:radial-gradient(65% 40% at 50% 0%,rgba(123,92,47,.2),transparent 70%),linear-gradient(165deg,#111116,#202027 60%,#101014);--kc-bg:linear-gradient(165deg,#202027,#101014);--kc-ink:#f4efe4;--kc-mute:#d3c7ae;--kc-accent:#dfc07d;--kc-veil:linear-gradient(transparent 52%,rgba(0,0,0,.48))} /* Expanded wedding luxe presets: ten additional photo-ready palettes. */ html[data-ik-theme="luxe-terracotta"][data-theme]{color-scheme:light;--bg:#f5e8e0;--ink:#4b302a;--mute:#7e645e;--card:#fffaf7;--line:rgba(166,91,73,.2);--acc:#ad5b49;--acc2:#d18c77;--on:#fff;--glow:rgba(190,106,85,.12);--lit:#fff;--r-card:22px;--k-edge:rgba(173,91,72,.28);--k-edge-2:#c77962;--k-line:linear-gradient(90deg,transparent,#c77962,transparent);--k-metal:linear-gradient(135deg,#f4d1c5,#c77962);--k-bg-img:radial-gradient(70% 45% at 50% 0%,rgba(222,159,140,.24),transparent 70%),linear-gradient(165deg,#fff9f6,#f2dfd7);--kc-bg:linear-gradient(165deg,#fff8f3,#f0ddd4);--kc-ink:#4b302a;--kc-mute:#86655d;--kc-accent:#ad5b49;--kc-veil:linear-gradient(transparent 52%,rgba(81,42,33,.12))} html[data-ik-theme="luxe-sage"][data-theme]{color-scheme:light;--bg:#f1f4ed;--ink:#344439;--mute:#657268;--card:#fbfdf9;--line:rgba(93,122,96,.2);--acc:#5a7460;--acc2:#a8b88d;--on:#fff;--glow:rgba(109,142,112,.11);--lit:#fff;--r-card:22px;--k-edge:rgba(97,128,102,.28);--k-edge-2:#9bad88;--k-line:linear-gradient(90deg,transparent,#9bad88,transparent);--k-metal:linear-gradient(135deg,#dde8cf,#8da487);--k-bg-img:radial-gradient(70% 45% at 50% 0%,rgba(177,198,164,.28),transparent 70%),linear-gradient(165deg,#fbfcf8,#e7eee3);--kc-bg:linear-gradient(165deg,#fbfcf7,#e4ece2);--kc-ink:#344439;--kc-mute:#667a6a;--kc-accent:#6c8a70;--kc-veil:linear-gradient(transparent 52%,rgba(41,66,47,.1))} html[data-ik-theme="luxe-sapphire"][data-theme]{color-scheme:dark;--bg:#0c1835;--ink:#f2eee6;--mute:#aeb8ca;--card:rgba(19,35,70,.84);--line:rgba(170,190,222,.2);--acc:#cad7ee;--acc2:#8da6d1;--on:#10182b;--glow:rgba(109,145,206,.15);--lit:rgba(235,242,255,.12);--r-card:16px;--k-edge:rgba(165,188,226,.3);--k-edge-2:#a8bddf;--k-line:linear-gradient(90deg,transparent,#b4c8ed,transparent);--k-metal:linear-gradient(135deg,#eff4ff,#9eb8e7);--k-bg-img:radial-gradient(70% 45% at 50% 0%,rgba(82,120,200,.28),transparent 70%),linear-gradient(165deg,#09142d,#152d5e 60%,#081128);--kc-bg:linear-gradient(165deg,#122c60,#0a1631);--kc-ink:#f1f4fb;--kc-mute:#c1cde2;--kc-accent:#b2c6ec;--kc-veil:linear-gradient(transparent 52%,rgba(0,0,0,.46))} html[data-ik-theme="luxe-pearl"][data-theme]{color-scheme:light;--bg:#faf8f4;--ink:#403a35;--mute:#786f67;--card:rgba(255,255,255,.8);--line:rgba(143,128,113,.2);--acc:#876e5a;--acc2:#cfb49b;--on:#fff;--glow:rgba(198,174,150,.12);--lit:#fff;--r-card:24px;--k-edge:rgba(170,144,121,.28);--k-edge-2:#cba98a;--k-line:linear-gradient(90deg,transparent,#cba98a,transparent);--k-metal:linear-gradient(135deg,#f3e5d5,#cba98a);--k-bg-img:radial-gradient(70% 45% at 50% 0%,rgba(235,219,201,.36),transparent 70%),linear-gradient(165deg,#fffefa,#f0e9df);--kc-bg:linear-gradient(165deg,#fffefa,#eee5da);--kc-ink:#403a35;--kc-mute:#796e65;--kc-accent:#ae8b6f;--kc-veil:linear-gradient(transparent 52%,rgba(68,54,42,.08))} html[data-ik-theme="luxe-marigold"][data-theme]{color-scheme:light;--bg:#fbf3dc;--ink:#59452a;--mute:#806b4c;--card:#fffaf0;--line:rgba(176,133,52,.22);--acc:#8e6825;--acc2:#d4ae59;--on:#fff;--glow:rgba(215,166,61,.15);--lit:#fff;--r-card:20px;--k-edge:rgba(183,137,44,.3);--k-edge-2:#c99b43;--k-line:linear-gradient(90deg,transparent,#d2a64e,transparent);--k-metal:linear-gradient(135deg,#f5e0a0,#c59335);--k-bg-img:radial-gradient(70% 45% at 50% 0%,rgba(241,191,79,.3),transparent 70%),linear-gradient(165deg,#fffaf0,#f4e4bd);--kc-bg:linear-gradient(165deg,#fffaf0,#f2e1b8);--kc-ink:#59452a;--kc-mute:#806c4d;--kc-accent:#b7862f;--kc-veil:linear-gradient(transparent 52%,rgba(100,72,18,.1))} html[data-ik-theme="luxe-olive"][data-theme]{color-scheme:light;--bg:#f1f0e4;--ink:#3e4634;--mute:#676f5b;--card:#fbfbf4;--line:rgba(93,108,70,.2);--acc:#637244;--acc2:#a79a62;--on:#fff;--glow:rgba(126,143,83,.11);--lit:#fff;--r-card:20px;--k-edge:rgba(112,129,76,.28);--k-edge-2:#9f965e;--k-line:linear-gradient(90deg,transparent,#aaa269,transparent);--k-metal:linear-gradient(135deg,#dce2be,#9e965d);--k-bg-img:radial-gradient(70% 45% at 50% 0%,rgba(195,201,155,.24),transparent 70%),linear-gradient(165deg,#fbfbf3,#e8e8d8);--kc-bg:linear-gradient(165deg,#fbfbf3,#e3e3d2);--kc-ink:#3e4634;--kc-mute:#6f795f;--kc-accent:#7d854f;--kc-veil:linear-gradient(transparent 52%,rgba(54,62,35,.1))} html[data-ik-theme="luxe-cobalt"][data-theme]{color-scheme:light;--bg:#edf2fb;--ink:#263653;--mute:#5f6e8e;--card:#fbfdff;--line:rgba(61,90,153,.2);--acc:#4565a7;--acc2:#9caed3;--on:#fff;--glow:rgba(72,104,180,.11);--lit:#fff;--r-card:18px;--k-edge:rgba(70,100,169,.28);--k-edge-2:#718bc8;--k-line:linear-gradient(90deg,transparent,#7b91ca,transparent);--k-metal:linear-gradient(135deg,#dbe4fa,#718bc8);--k-bg-img:radial-gradient(70% 45% at 50% 0%,rgba(120,153,219,.24),transparent 70%),linear-gradient(165deg,#fbfdff,#e1e9f7);--kc-bg:linear-gradient(165deg,#fbfdff,#dfe8f8);--kc-ink:#263653;--kc-mute:#65759a;--kc-accent:#506fae;--kc-veil:linear-gradient(transparent 52%,rgba(39,58,96,.08))} html[data-ik-theme="luxe-lilac"][data-theme]{color-scheme:light;--bg:#f7f1fa;--ink:#493b50;--mute:#7b6982;--card:#fffaff;--line:rgba(137,106,151,.2);--acc:#81638e;--acc2:#c1a3c9;--on:#fff;--glow:rgba(160,123,178,.12);--lit:#fff;--r-card:22px;--k-edge:rgba(143,106,157,.26);--k-edge-2:#ad8bbb;--k-line:linear-gradient(90deg,transparent,#b38fc0,transparent);--k-metal:linear-gradient(135deg,#ead9ee,#ad8bbb);--k-bg-img:radial-gradient(70% 45% at 50% 0%,rgba(206,173,215,.28),transparent 70%),linear-gradient(165deg,#fffaff,#eee2f1);--kc-bg:linear-gradient(165deg,#fffaff,#eee0f1);--kc-ink:#493b50;--kc-mute:#7d6b84;--kc-accent:#9a75a7;--kc-veil:linear-gradient(transparent 52%,rgba(69,44,80,.08))} html[data-ik-theme="luxe-sand"][data-theme]{color-scheme:light;--bg:#f6eee1;--ink:#4f4234;--mute:#776a57;--card:#fffaf2;--line:rgba(144,111,69,.2);--acc:#866541;--acc2:#c3a275;--on:#fff;--glow:rgba(190,151,105,.12);--lit:#fff;--r-card:22px;--k-edge:rgba(158,121,77,.28);--k-edge-2:#bb9568;--k-line:linear-gradient(90deg,transparent,#c2a075,transparent);--k-metal:linear-gradient(135deg,#efdbb8,#b89162);--k-bg-img:radial-gradient(70% 45% at 50% 0%,rgba(229,196,151,.28),transparent 70%),linear-gradient(165deg,#fffaf2,#eee1cb);--kc-bg:linear-gradient(165deg,#fffaf2,#eddfc6);--kc-ink:#4f4234;--kc-mute:#806f59;--kc-accent:#aa8458;--kc-veil:linear-gradient(transparent 52%,rgba(74,55,34,.09))} html[data-ik-theme="luxe-ruby"][data-theme]{color-scheme:dark;--bg:#2b1018;--ink:#f7eae6;--mute:#c4a7a7;--card:rgba(67,24,38,.84);--line:rgba(222,162,157,.22);--acc:#e0aaa5;--acc2:#aa5d68;--on:#291016;--glow:rgba(184,79,98,.16);--lit:rgba(255,223,214,.12);--r-card:16px;--k-edge:rgba(222,162,157,.32);--k-edge-2:#d99896;--k-line:linear-gradient(90deg,transparent,#dfa5a0,transparent);--k-metal:linear-gradient(135deg,#f5d1c8,#c46e7a);--k-bg-img:radial-gradient(70% 45% at 50% 0%,rgba(177,63,84,.27),transparent 70%),linear-gradient(165deg,#210b12,#4b182a 60%,#1d0910);--kc-bg:linear-gradient(165deg,#521b2e,#220b14);--kc-ink:#f7eae6;--kc-mute:#d1b7b6;--kc-accent:#e0aaa5;--kc-veil:linear-gradient(transparent 52%,rgba(0,0,0,.46))} /* Portrait artwork thumbnails and the matching no-upload guest cover. */ .ikpick .sw{width:48px;height:62px;border-radius:9px;background-size:cover!important;background-position:center!important} html[data-ik-theme="luxe-botanical"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-botanical-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-botanical-md.webp?v=1") 1x,url("/assets/wedding-luxe-botanical-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-botanical-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-botanical-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-botanical-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-botanical-lg.webp?v=1") type("image/webp") 2x)} html[data-ik-theme="luxe-emerald"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-emerald-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-emerald-md.webp?v=1") 1x,url("/assets/wedding-luxe-emerald-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-emerald-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-emerald-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-emerald-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-emerald-lg.webp?v=1") type("image/webp") 2x)} html[data-ik-theme="luxe-champagne"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-champagne-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-champagne-md.webp?v=1") 1x,url("/assets/wedding-luxe-champagne-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-champagne-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-champagne-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-champagne-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-champagne-lg.webp?v=1") type("image/webp") 2x)} html[data-ik-theme="luxe-blush"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-blush-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-blush-md.webp?v=1") 1x,url("/assets/wedding-luxe-blush-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-blush-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-blush-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-blush-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-blush-lg.webp?v=1") type("image/webp") 2x)} html[data-ik-theme="luxe-noir"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-noir-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-noir-md.webp?v=1") 1x,url("/assets/wedding-luxe-noir-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-noir-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-noir-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-noir-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-noir-lg.webp?v=1") type("image/webp") 2x)} html[data-ik-theme="luxe-terracotta"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-terracotta-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-terracotta-md.webp?v=1") 1x,url("/assets/wedding-luxe-terracotta-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-terracotta-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-terracotta-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-terracotta-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-terracotta-lg.webp?v=1") type("image/webp") 2x)} html[data-ik-theme="luxe-sage"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-sage-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-sage-md.webp?v=1") 1x,url("/assets/wedding-luxe-sage-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-sage-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-sage-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-sage-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-sage-lg.webp?v=1") type("image/webp") 2x)} html[data-ik-theme="luxe-sapphire"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-sapphire-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-sapphire-md.webp?v=1") 1x,url("/assets/wedding-luxe-sapphire-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-sapphire-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-sapphire-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-sapphire-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-sapphire-lg.webp?v=1") type("image/webp") 2x)} html[data-ik-theme="luxe-pearl"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-pearl-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-pearl-md.webp?v=1") 1x,url("/assets/wedding-luxe-pearl-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-pearl-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-pearl-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-pearl-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-pearl-lg.webp?v=1") type("image/webp") 2x)} html[data-ik-theme="luxe-marigold"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-marigold-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-marigold-md.webp?v=1") 1x,url("/assets/wedding-luxe-marigold-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-marigold-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-marigold-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-marigold-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-marigold-lg.webp?v=1") type("image/webp") 2x)} html[data-ik-theme="luxe-olive"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-olive-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-olive-md.webp?v=1") 1x,url("/assets/wedding-luxe-olive-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-olive-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-olive-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-olive-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-olive-lg.webp?v=1") type("image/webp") 2x)} html[data-ik-theme="luxe-cobalt"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-cobalt-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-cobalt-md.webp?v=1") 1x,url("/assets/wedding-luxe-cobalt-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-cobalt-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-cobalt-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-cobalt-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-cobalt-lg.webp?v=1") type("image/webp") 2x)} html[data-ik-theme="luxe-lilac"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-lilac-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-lilac-md.webp?v=1") 1x,url("/assets/wedding-luxe-lilac-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-lilac-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-lilac-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-lilac-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-lilac-lg.webp?v=1") type("image/webp") 2x)} html[data-ik-theme="luxe-sand"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-sand-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-sand-md.webp?v=1") 1x,url("/assets/wedding-luxe-sand-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-sand-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-sand-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-sand-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-sand-lg.webp?v=1") type("image/webp") 2x)} html[data-ik-theme="luxe-ruby"] .cover.kc.np:not(.kts)::before{content:"";position:absolute;inset:0;z-index:0;background:url("/assets/wedding-luxe-ruby-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-ruby-md.webp?v=1") 1x,url("/assets/wedding-luxe-ruby-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-ruby-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-ruby-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-ruby-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-ruby-lg.webp?v=1") type("image/webp") 2x)} /* Occasion folders in the Page look editor. */ .ikfolders{display:grid;gap:9px;margin:8px 0 4px} .ikfolder{border:1px solid var(--line);border-radius:16px;background:var(--glass);overflow:hidden} .ikfolder>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;cursor:pointer;color:var(--ink);font-weight:650;user-select:none} .ikfolder>summary::-webkit-details-marker{display:none} .ikfolder>summary::after{content:"＋";color:var(--acc);font-size:18px;line-height:1} .ikfolder[open]>summary::after{content:"−"} .ikfolder-title{font-size:14px} .ikfolder-meta{font-size:11px;color:var(--mute);font-weight:500;white-space:nowrap;margin-left:auto} .ikfolder[open]>summary{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--acc) 7%,transparent)} .ikfolder .ikpick{padding:8px 9px 10px;margin:0} /* Give each luxury preset a visible treatment when an event already has a photo. */ html[data-ik-theme="luxe-botanical"][data-theme]{--kc-img:saturate(.78) brightness(.88) sepia(.08);--kc-img-op:.96} html[data-ik-theme="luxe-emerald"][data-theme]{--kc-img:saturate(.72) brightness(.58) sepia(.2);--kc-img-op:.95} html[data-ik-theme="luxe-champagne"][data-theme]{--kc-img:saturate(.76) brightness(.88) sepia(.12);--kc-img-op:.96} html[data-ik-theme="luxe-blush"][data-theme]{--kc-img:saturate(.72) brightness(.86) sepia(.08);--kc-img-op:.96} html[data-ik-theme="luxe-noir"][data-theme]{--kc-img:saturate(.58) brightness(.48) sepia(.22);--kc-img-op:.94} html[data-ik-theme="luxe-botanical"] .cover.kc:not(.kts) .cvph{border:3px double #748b6a;border-radius:18px;box-shadow:0 0 0 5px rgba(247,245,237,.8),0 20px 42px rgba(29,45,32,.38)} html[data-ik-theme="luxe-emerald"] .cover.kc:not(.kts) .cvph{border:3px solid #d5b16b;border-radius:4px;box-shadow:0 0 0 5px rgba(8,27,23,.82),0 0 0 7px rgba(213,177,107,.8),0 24px 48px rgba(0,0,0,.5)} html[data-ik-theme="luxe-champagne"] .cover.kc:not(.kts) .cvph{border:2px solid #bd985f;border-radius:12px;box-shadow:0 0 0 5px rgba(251,248,241,.8),0 0 0 7px rgba(189,152,95,.68),0 20px 42px rgba(74,53,31,.34)} html[data-ik-theme="luxe-blush"] .cover.kc:not(.kts) .cvph{border:3px solid #bd7c89;border-radius:48% 48% 16px 16px;box-shadow:0 0 0 5px rgba(251,245,243,.82),0 0 0 7px rgba(189,124,137,.58),0 20px 42px rgba(73,52,58,.3)} html[data-ik-theme="luxe-noir"] .cover.kc:not(.kts) .cvph{border:2px solid #d0ad6a;border-radius:2px;box-shadow:0 0 0 5px rgba(17,17,22,.9),0 0 0 7px rgba(208,173,106,.66),0 24px 50px rgba(0,0,0,.62)} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts) .cvtxt h1{text-shadow:0 2px 14px rgba(0,0,0,.24)} /* ============================================================================= LUXE v2 · every wedding theme gets its own cover architecture shape of the portrait · ornament · typography · button · text alignment (only for events WITH a cover photo; the no-photo artwork covers are untouched) ============================================================================= */ html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvimg{filter:blur(26px) saturate(.9) brightness(var(--lx-bri,1.1));transform:scale(1.25);opacity:1} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np)::after{background:linear-gradient(180deg,rgb(var(--lx-v) / .55),rgb(var(--lx-v) / .9))} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvcard{align-items:var(--lx-ai,center);text-align:var(--lx-ta,center)} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvtxt{display:flex;flex-direction:column;align-items:var(--lx-ai,center);text-align:var(--lx-ta,center)} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvph{isolation:isolate;overflow:visible;flex:none;width:min(62vw,calc(40vh * var(--lx-r,.75)));height:auto;aspect-ratio:var(--lx-r,.75);margin-bottom:var(--lx-mb,26px);background:none;border:0;border-radius:0;box-shadow:none;transform:var(--lx-rot,none);filter:var(--lx-fx,drop-shadow(0 18px 24px rgba(0,0,0,.26)))} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvph img{width:100%;height:100%;object-fit:cover;object-position:center 22%;clip-path:var(--lx-clip,none);border-radius:var(--lx-br,0)} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvph::before{content:"";position:absolute;inset:calc(var(--lx-rim,5px) * -1);z-index:-1;clip-path:var(--lx-clip,none);border-radius:var(--lx-br,0);background:var(--lx-rimbg,none);border:var(--lx-bd,0);box-shadow:var(--lx-bsh,none);transform:var(--lx-bt,none)} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvph::after{content:"";display:none;position:absolute;pointer-events:none} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvtxt h1{font-family:var(--lx-ff,var(--ik-d,Fraunces),Georgia,serif);font-style:var(--lx-fst,italic);font-weight:var(--lx-fw,600);text-transform:var(--lx-tt,none);letter-spacing:var(--lx-ls,-.01em);font-size:var(--lx-fs,clamp(2.1rem,9.5vw,3.3rem));line-height:1.06;text-shadow:none} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvtxt small{letter-spacing:var(--lx-kls,.3em);font-size:11px;text-transform:uppercase} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvdiv{font-size:0;display:block;margin:4px 0} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvdiv::before{content:var(--lx-div,"◆");font-size:15px;letter-spacing:.5em;color:var(--kc-accent)} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .tapo{border-radius:var(--lx-btn,999px);text-transform:var(--lx-btnt,none);letter-spacing:var(--lx-btnls,.06em);background:var(--lx-btnbg,var(--k-metal));color:var(--lx-btnc,var(--on));border:var(--lx-btnb,0)} /* 1 · IVORY BOTANICA — arched window, double olive line */ html[data-ik-theme="luxe-botanical"][data-theme]{--r-card:28px;--lx-v:247 245 237;--lx-bri:1.12;--lx-r:.72;--lx-br:999px 999px 14px 14px;--lx-rim:8px;--lx-bd:1.5px solid #748b6a;--lx-div:"❦";--lx-fw:500;--lx-btnbg:linear-gradient(135deg,#7d9378,#566b52);--lx-btnc:#fff} html[data-ik-theme="luxe-botanical"] .cover.kc:not(.kts):not(.np) .cvph::after{display:block;inset:-18px;border:1px solid rgba(100,123,97,.38);border-radius:999px 999px 26px 26px} /* 2 · EMERALD & GOLD — art-deco octagon, gold rim, capitals */ html[data-ik-theme="luxe-emerald"][data-theme]{--r-card:3px;--lx-v:8 27 23;--lx-bri:.5;--lx-r:.74;--lx-clip:polygon(14% 0,86% 0,100% 8%,100% 92%,86% 100%,14% 100%,0 92%,0 8%);--lx-rim:5px;--lx-rimbg:linear-gradient(135deg,#f0d99a,#b8914a 50%,#f0d99a);--lx-fx:drop-shadow(0 0 22px rgba(214,177,100,.25)) drop-shadow(0 18px 24px rgba(0,0,0,.5));--lx-fst:normal;--lx-fw:500;--lx-tt:uppercase;--lx-ls:.14em;--lx-fs:clamp(1.55rem,7.4vw,2.4rem);--lx-div:"◇ ◆ ◇";--lx-btn:2px;--lx-btnt:uppercase;--lx-btnls:.2em;--lx-btnbg:transparent;--lx-btnc:#ecd49a;--lx-btnb:1px solid #d5b16b} /* 3 · CHAMPAGNE HEIRLOOM — stepped geometric frame */ html[data-ik-theme="luxe-champagne"][data-theme]{--r-card:6px;--lx-v:251 248 241;--lx-bri:1.12;--lx-r:.8;--lx-clip:polygon(0 7%,7% 7%,7% 0,93% 0,93% 7%,100% 7%,100% 93%,93% 93%,93% 100%,7% 100%,7% 93%,0 93%);--lx-rim:5px;--lx-rimbg:linear-gradient(135deg,#e6cf9d,#a47c45 55%,#e6cf9d);--lx-div:"✦";--lx-fw:500;--lx-btn:10px;--lx-btnc:#fff} /* 4 · BLUSH HEIRLOOM — oval cameo, dotted rose halo */ html[data-ik-theme="luxe-blush"][data-theme]{--r-card:30px;--lx-v:251 245 243;--lx-bri:1.12;--lx-r:.78;--lx-br:50%;--lx-rim:7px;--lx-rimbg:linear-gradient(135deg,#f6dadd,#c98592 50%,#f6dadd);--lx-div:"❀";--lx-fw:400;--lx-fs:clamp(2.3rem,10.5vw,3.6rem);--lx-btnbg:linear-gradient(135deg,#d596a3,#a75e70);--lx-btnc:#fff} html[data-ik-theme="luxe-blush"] .cover.kc:not(.kts):not(.np) .cvph::after{display:block;inset:-19px;border:2px dotted rgba(167,94,112,.5);border-radius:50%} /* 5 · MIDNIGHT OPULENCE — cinematic left-aligned, gold hairlines */ html[data-ik-theme="luxe-noir"][data-theme]{--r-card:0px;--lx-v:17 17 22;--lx-bri:.45;--lx-ai:flex-start;--lx-ta:left;--lx-r:.68;--lx-rim:3px;--lx-rimbg:linear-gradient(135deg,#e7cd8f,#a8844a);--lx-fx:drop-shadow(0 22px 30px rgba(0,0,0,.65));--lx-fst:normal;--lx-fw:300;--lx-tt:uppercase;--lx-ls:.2em;--lx-fs:clamp(1.5rem,7vw,2.3rem);--lx-div:"───";--lx-btn:0;--lx-btnt:uppercase;--lx-btnls:.24em;--lx-btnbg:transparent;--lx-btnc:#e7cd8f;--lx-btnb:1px solid #d0ad6a} html[data-ik-theme="luxe-noir"] .cover.kc:not(.kts):not(.np) .cvph::after{display:block;inset:-16px -16px -16px 16px;border:1px solid rgba(208,173,106,.4);z-index:-2} /* 6 · TERRACOTTA GARDEN — arch on a pedestal, offset colour block, left-aligned */ html[data-ik-theme="luxe-terracotta"][data-theme]{--r-card:14px;--lx-v:245 232 224;--lx-bri:1.1;--lx-ai:flex-start;--lx-ta:left;--lx-r:.72;--lx-br:999px 999px 0 0;--lx-rim:0px;--lx-rimbg:linear-gradient(160deg,#dc9a82,#b8604c);--lx-bt:translate(13px,13px);--lx-fst:normal;--lx-fw:700;--lx-div:"⁕";--lx-btn:4px 18px 4px 18px;--lx-btnc:#fff;--lx-btnbg:linear-gradient(135deg,#c8705a,#9c4838)} /* 7 · SAGE MEADOW — organic pebble, floating outline */ html[data-ik-theme="luxe-sage"][data-theme]{--r-card:34px;--lx-v:241 244 237;--lx-bri:1.12;--lx-r:.88;--lx-br:58% 42% 55% 45% / 48% 56% 44% 52%;--lx-rim:6px;--lx-rimbg:rgba(97,125,103,.3);--lx-fst:normal;--lx-fw:300;--lx-ls:.02em;--lx-div:"❧";--lx-btnbg:linear-gradient(135deg,#7b997f,#52705a);--lx-btnc:#fff} html[data-ik-theme="luxe-sage"] .cover.kc:not(.kts):not(.np) .cvph::after{display:block;inset:-16px;border:1px solid rgba(97,125,103,.45);border-radius:44% 56% 42% 58% / 55% 45% 57% 43%;transform:rotate(-8deg)} /* 8 · SAPPHIRE CONSTELLATION — moon disc, orbit rings, stars */ html[data-ik-theme="luxe-sapphire"][data-theme]{--r-card:18px;--lx-v:12 24 53;--lx-bri:.5;--lx-r:1;--lx-br:50%;--lx-rim:4px;--lx-rimbg:linear-gradient(135deg,#eef3ff,#9fb2d6 55%,#eef3ff);--lx-bsh:0 0 0 12px rgba(170,190,222,.16),0 0 0 26px rgba(170,190,222,.09),0 0 46px rgba(120,150,230,.4);--lx-fst:normal;--lx-fw:400;--lx-tt:uppercase;--lx-ls:.16em;--lx-fs:clamp(1.6rem,7.6vw,2.5rem);--lx-mb:44px;--lx-div:"✧";--lx-btnbg:transparent;--lx-btnc:#dbe6ff;--lx-btnb:1px solid rgba(190,208,240,.7)} html[data-ik-theme="luxe-sapphire"] .cover.kc:not(.kts):not(.np) .cvph::after{display:block;inset:-60px -44px;z-index:-2;background:radial-gradient(circle at 6% 22%,#dbe7ff 1.4px,transparent 2.4px),radial-gradient(circle at 94% 12%,#fff 1.2px,transparent 2.2px),radial-gradient(circle at 88% 78%,#c9dbff 1.6px,transparent 2.6px),radial-gradient(circle at 12% 84%,#fff 1.2px,transparent 2.2px),radial-gradient(circle at 50% 2%,#dbe7ff 1.4px,transparent 2.4px)} /* 9 · PEARL SILK — tall capsule with a sheen */ html[data-ik-theme="luxe-pearl"][data-theme]{--r-card:26px;--lx-v:250 248 244;--lx-bri:1.15;--lx-r:.5;--lx-br:999px;--lx-rim:7px;--lx-rimbg:linear-gradient(160deg,#fff,#e3dad2 45%,#fff 70%,#d8d0dc);--lx-bsh:0 0 0 1px rgba(143,128,113,.22);--lx-fst:normal;--lx-fw:300;--lx-fs:clamp(2.3rem,10vw,3.5rem);--lx-div:"· ✦ ·";--lx-btnbg:rgba(255,255,255,.85);--lx-btnc:#403a35;--lx-btnb:1px solid rgba(143,128,113,.4)} html[data-ik-theme="luxe-pearl"] .cover.kc:not(.kts):not(.np) .cvph::after{display:block;inset:0;border-radius:999px;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.5) 48%,transparent 62%)} /* 10 · MARIGOLD ARCH — arch with a sunburst */ html[data-ik-theme="luxe-marigold"][data-theme]{--r-card:20px;--lx-v:251 243 220;--lx-bri:1.12;--lx-r:.76;--lx-br:999px 999px 10px 10px;--lx-rim:5px;--lx-rimbg:linear-gradient(135deg,#f3cf74,#b7862f 55%,#f3cf74);--lx-fw:700;--lx-div:"☼";--lx-btnbg:linear-gradient(135deg,#efc25c,#b7862f);--lx-btnc:#3d2d12} html[data-ik-theme="luxe-marigold"] .cover.kc:not(.kts):not(.np) .cvph::after{display:block;inset:-30px -32px 4px -32px;z-index:-2;background:repeating-conic-gradient(from -90deg at 50% 52%,rgba(224,167,60,.24) 0 5deg,transparent 5deg 20deg);-webkit-mask-image:radial-gradient(circle at 50% 52%,#000 30%,transparent 70%);mask-image:radial-gradient(circle at 50% 52%,#000 30%,transparent 70%)} /* 11 · OLIVE ATELIER — leaf-cut architecture */ html[data-ik-theme="luxe-olive"][data-theme]{--r-card:4px;--lx-v:241 240 228;--lx-bri:1.1;--lx-r:.8;--lx-br:150px 0 150px 0;--lx-rim:9px;--lx-bd:1.5px solid #6e7f4c;--lx-fst:normal;--lx-fw:500;--lx-ls:.04em;--lx-div:"❧";--lx-btn:0 16px 0 16px;--lx-btnbg:linear-gradient(135deg,#80925c,#566640);--lx-btnc:#fff} html[data-ik-theme="luxe-olive"] .cover.kc:not(.kts):not(.np) .cvph::after{display:block;inset:-20px;border:1px solid rgba(110,127,76,.3);border-radius:170px 0 170px 0} /* 12 · COBALT BRUSHWORK — tilted paper print on a brush stroke */ html[data-ik-theme="luxe-cobalt"][data-theme]{--r-card:8px;--lx-v:237 242 251;--lx-bri:1.12;--lx-r:.8;--lx-br:3px;--lx-rim:0px;--lx-bsh:inset 0 0 0 10px #fff,0 12px 26px rgba(38,54,83,.3);--lx-rot:rotate(-3deg);--lx-fw:700;--lx-div:"✦";--lx-btn:6px;--lx-btnbg:linear-gradient(135deg,#5877b8,#34509a);--lx-btnc:#fff} html[data-ik-theme="luxe-cobalt"] .cover.kc:not(.kts):not(.np) .cvph::after{display:block;inset:-8px -24px 16px -24px;z-index:-2;background:linear-gradient(100deg,rgba(69,101,167,.92),rgba(110,142,205,.78));border-radius:46% 54% 50% 50% / 30% 36% 64% 70%;transform:rotate(5deg)} /* 13 · LAVENDER REVERIE — faceted gem, lilac glow */ html[data-ik-theme="luxe-lilac"][data-theme]{--r-card:28px;--lx-v:247 241 250;--lx-bri:1.12;--lx-r:.86;--lx-clip:polygon(50% 0,100% 22%,100% 78%,50% 100%,0 78%,0 22%);--lx-rim:6px;--lx-rimbg:linear-gradient(135deg,#f1e4f8,#a98bc2 55%,#f1e4f8);--lx-fw:400;--lx-div:"✿";--lx-btnbg:linear-gradient(135deg,#b496cb,#836397);--lx-btnc:#fff} html[data-ik-theme="luxe-lilac"] .cover.kc:not(.kts):not(.np) .cvph::after{display:block;inset:-34px;z-index:-2;background:radial-gradient(circle,rgba(190,150,215,.45),transparent 68%)} /* 14 · DUNE CEREMONY — concentric sun-washed arches */ html[data-ik-theme="luxe-sand"][data-theme]{--r-card:22px;--lx-v:246 238 225;--lx-bri:1.1;--lx-r:.74;--lx-br:999px 999px 0 0;--lx-rim:0px;--lx-bsh:0 0 0 9px rgba(214,174,126,.38),0 0 0 18px rgba(214,174,126,.24),0 0 0 27px rgba(214,174,126,.13);--lx-mb:40px;--lx-fw:500;--lx-div:"◐";--lx-btnbg:linear-gradient(135deg,#c9a173,#9c7448);--lx-btnc:#fff} /* 15 · RUBY VELVET — evening portrait sealed with wax */ html[data-ik-theme="luxe-ruby"][data-theme]{--r-card:12px;--lx-v:43 16 24;--lx-bri:.48;--lx-r:.76;--lx-br:26px;--lx-rim:4px;--lx-rimbg:linear-gradient(135deg,#f1c7bf,#c98a85 55%,#f1c7bf);--lx-fx:drop-shadow(0 0 24px rgba(200,60,80,.25)) drop-shadow(0 20px 26px rgba(0,0,0,.55));--lx-mb:46px;--lx-fw:600;--lx-div:"❦";--lx-btnbg:linear-gradient(135deg,#bd2c46,#7a1226);--lx-btnc:#fff} html[data-ik-theme="luxe-ruby"] .cover.kc:not(.kts):not(.np) .cvph::after{content:"❦";display:grid;place-items:center;z-index:3;left:50%;bottom:-30px;width:54px;height:54px;margin-left:-27px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e0586c,#8a1630 70%);box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 0 0 3px rgba(255,205,205,.2);color:rgba(255,226,222,.9);font-size:22px} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvtxt>*{max-width:100%} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvtxt>:not(.tapo):not(.gcrow){align-self:stretch;text-align:inherit} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvtxt h1{overflow-wrap:anywhere} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvdiv::before{position:static;display:inline-block;width:auto;height:auto;background:none;border:0;margin:0;transform:none;opacity:1} html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvdiv::after{content:none;display:none} /* ============================================================================= LUXE v3 — PHOTO-TRUE FRAMES ----------------------------------------------------------------------------- Two problems this layer fixes: 1. CROPPING. The old frame was a fixed box with `object-fit:cover`, so any photograph that was not the same ratio as the box lost its edges (heads, bouquets, the top of a church door). The frame now shrinks to the photograph's own proportions: `width:fit-content` + an intrinsically sized . Nothing is ever cropped and nothing is letter-boxed, because the frame *is* the photo. A max-height keeps a very tall portrait from pushing the names off screen, and the width then scales down proportionally. 2. SAMENESS. Fifteen looks that were mostly rounded rectangles and circles now have fifteen different silhouettes — a pointed cathedral arch, an emerald-cut octagon, a scalloped medallion, a twelve-petal cameo, an editorial clipped corner, a dome, an organic pebble, a celestial hexagon, a silk cushion, a sunburst, a keystone arch, a tilted print, a faceted gem, a concentric dune arch and a crest. Each is a real clip-path or radius, so the photograph is masked to the shape rather than sitting in a box. ============================================================================= */ /* --- A. the frame is the photograph ---------------------------------------- */ html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvph{ width:fit-content;height:fit-content;aspect-ratio:auto; max-width:min(76vw,352px);max-height:min(47vh,412px); display:flex;align-items:center;justify-content:center; border:0;border-radius:0;background:none;box-shadow:none; margin-bottom:var(--lx-mb,26px); } html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvph img{ width:auto;height:auto; max-width:min(76vw,352px);max-height:min(47vh,412px); object-fit:contain;object-position:center; clip-path:var(--lx-clip,none); border-radius:var(--lx-br,0); display:block; box-shadow:var(--lx-imgsh,0 26px 48px -22px rgba(0,0,0,.55)); } /* the rim repeats the silhouette, scaled out by --lx-rim, so it reads as a real mount rather than a rectangle behind a shape */ html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvph::before{ inset:calc(var(--lx-rim,5px) * -1); clip-path:var(--lx-clip,none); border-radius:var(--lx-br,0); border:var(--lx-bd,0); background:var(--lx-rimbg,none); box-shadow:var(--lx-bsh,none); } /* keep wide ornaments from creating a sideways scrollbar on the cover */ html[data-ik-theme^="luxe-"] .cover.kc:not(.kts):not(.np) .cvcard{overflow-x:hidden} /* --- B. fifteen silhouettes ------------------------------------------------ */ /* 1 · IVORY BOTANICA — pointed cathedral arch, olive double line */ html[data-ik-theme="luxe-botanical"][data-theme]{ --lx-clip:polygon(0% 100%,0% 58%,1% 47%,3.5% 37%,8% 28%,14% 20%,21.5% 13.5%,30% 8%,39% 4%,50% 0%,61% 4%,70% 8%,78.5% 13.5%,86% 20%,92% 28%,96.5% 37%,99% 47%,100% 58%,100% 100%); --lx-br:0;--lx-rim:9px; --lx-rimbg:linear-gradient(165deg,#9aae8d,#5d7357 55%,#82996f); --lx-imgsh:0 28px 50px -22px rgba(58,74,52,.55); } html[data-ik-theme="luxe-botanical"] .cover.kc:not(.kts):not(.np) .cvph::after{ display:block;inset:-20px;border:1px solid rgba(100,123,97,.34); clip-path:inherit;border-radius:0; } /* 2 · EMERALD & GOLD — emerald-cut octagon, gold bevel */ html[data-ik-theme="luxe-emerald"][data-theme]{ --lx-clip:polygon(20% 0%,80% 0%,100% 20%,100% 80%,80% 100%,20% 100%,0% 80%,0% 20%); --lx-br:0;--lx-rim:7px; --lx-rimbg:linear-gradient(135deg,#f7e3ae,#c79a4c 48%,#f2d79a 62%,#a97e37); --lx-imgsh:0 26px 46px -18px rgba(0,0,0,.62); } /* 3 · CHAMPAGNE HEIRLOOM — scalloped medallion, gold foil edge */ html[data-ik-theme="luxe-champagne"][data-theme]{ --lx-clip:polygon(50% 0%,62.04% 5.08%,75% 6.7%,82.88% 17.12%,93.3% 25%,94.92% 37.96%,100% 50%,94.92% 62.04%,93.3% 75%,82.88% 82.88%,75% 93.3%,62.04% 94.92%,50% 100%,37.96% 94.92%,25% 93.3%,17.12% 82.88%,6.7% 75%,5.08% 62.04%,0% 50%,5.08% 37.96%,6.7% 25%,17.12% 17.12%,25% 6.7%,37.96% 5.08%); --lx-br:0;--lx-rim:6px; --lx-rimbg:linear-gradient(135deg,#f0dcae,#b98f52 52%,#f4e3bd); --lx-imgsh:0 26px 48px -20px rgba(74,53,31,.4); } /* 4 · BLUSH HEIRLOOM — twelve-petal cameo */ html[data-ik-theme="luxe-blush"][data-theme]{ --lx-clip:polygon(50% 0%,60.61% 10.4%,75% 6.7%,78.99% 21.01%,93.3% 25%,89.6% 39.39%,100% 50%,89.6% 60.61%,93.3% 75%,78.99% 78.99%,75% 93.3%,60.61% 89.6%,50% 100%,39.39% 89.6%,25% 93.3%,21.01% 78.99%,6.7% 75%,10.4% 60.61%,0% 50%,10.4% 39.39%,6.7% 25%,21.01% 21.01%,25% 6.7%,39.39% 10.4%); --lx-br:0;--lx-rim:7px; --lx-rimbg:linear-gradient(135deg,#f8dee1,#c98592 52%,#f6dadd); --lx-imgsh:0 26px 46px -20px rgba(120,70,80,.42); } html[data-ik-theme="luxe-blush"] .cover.kc:not(.kts):not(.np) .cvph::after{ display:block;inset:-22px;border:2px dotted rgba(167,94,112,.42); clip-path:inherit;border-radius:0; } /* 5 · MIDNIGHT OPULENCE — editorial plate with a clipped corner */ html[data-ik-theme="luxe-noir"][data-theme]{ --lx-clip:polygon(0% 0%,100% 0%,100% 76%,76% 100%,0% 100%); --lx-br:0;--lx-rim:4px; --lx-rimbg:linear-gradient(135deg,#e9d29a,#a8844a); --lx-imgsh:0 26px 44px -18px rgba(0,0,0,.72); } /* 6 · TERRACOTTA GARDEN — dome on a pedestal, offset colour block */ html[data-ik-theme="luxe-terracotta"][data-theme]{ --lx-clip:none;--lx-br:50% 50% 0 0 / 36% 36% 0 0;--lx-rim:0px; --lx-imgsh:0 26px 46px -20px rgba(120,70,50,.5); } /* 7 · SAGE MEADOW — organic pebble */ html[data-ik-theme="luxe-sage"][data-theme]{ --lx-clip:none;--lx-br:62% 38% 46% 54% / 44% 56% 44% 56%;--lx-rim:6px; --lx-rimbg:rgba(97,125,103,.34); --lx-imgsh:0 26px 48px -22px rgba(60,80,62,.45); } /* 8 · SAPPHIRE CONSTELLATION — celestial hexagon gem */ html[data-ik-theme="luxe-sapphire"][data-theme]{ --lx-clip:polygon(50% 0%,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%); --lx-br:0;--lx-rim:5px; --lx-rimbg:linear-gradient(135deg,#f2f6ff,#9fb2d6 55%,#eef3ff); --lx-imgsh:0 0 46px rgba(120,150,230,.4),0 24px 44px -18px rgba(0,0,0,.6); } /* 9 · PEARL SILK — silk cushion, clipped corners, beaded edge */ html[data-ik-theme="luxe-pearl"][data-theme]{ --lx-clip:polygon(7% 0%,93% 0%,100% 7%,100% 93%,93% 100%,7% 100%,0% 93%,0% 7%); --lx-br:0;--lx-rim:7px; --lx-rimbg:linear-gradient(160deg,#ffffff,#e3dad2 45%,#fff 70%,#d8d0dc); --lx-imgsh:0 26px 48px -22px rgba(120,105,90,.35); } /* 10 · MARIGOLD ARCH — sixteen-point sunburst */ html[data-ik-theme="luxe-marigold"][data-theme]{ --lx-clip:polygon(50% 0%,61.65% 6.53%,75% 6.7%,81.82% 18.18%,93.3% 25%,93.47% 38.35%,100% 50%,93.47% 61.65%,93.3% 75%,81.82% 81.82%,75% 93.3%,61.65% 93.47%,50% 100%,38.35% 93.47%,25% 93.3%,18.18% 81.82%,6.7% 75%,6.53% 61.65%,0% 50%,6.53% 38.35%,6.7% 25%,18.18% 18.18%,25% 6.7%,38.35% 6.53%); --lx-br:0;--lx-rim:5px; --lx-rimbg:linear-gradient(135deg,#f6d98a,#b7862f 55%,#f3cf74); --lx-imgsh:0 26px 46px -20px rgba(150,105,30,.45); } /* 11 · OLIVE ATELIER — keystone arch with straight sides */ html[data-ik-theme="luxe-olive"][data-theme]{ --lx-clip:none;--lx-br:999px 999px 0 0 / 30% 30% 0 0;--lx-rim:10px; --lx-bd:1.5px solid #6e7f4c; --lx-rimbg:linear-gradient(165deg,#93a470,#5d6d45); --lx-imgsh:0 26px 46px -20px rgba(70,85,50,.5); } html[data-ik-theme="luxe-olive"] .cover.kc:not(.kts):not(.np) .cvph::after{ display:block;inset:-22px;border:1px solid rgba(110,127,76,.28); border-radius:999px 999px 0 0 / 32% 32% 0 0; } /* 12 · COBALT BRUSHWORK — tilted print, thick white border */ html[data-ik-theme="luxe-cobalt"][data-theme]{ --lx-clip:none;--lx-br:4px;--lx-rim:12px; --lx-rimbg:#ffffff; --lx-imgsh:0 22px 40px -14px rgba(38,54,83,.42); } /* 13 · LAVENDER REVERIE — faceted gem, double lilac outline */ html[data-ik-theme="luxe-lilac"][data-theme]{ --lx-clip:polygon(50% 0%,100% 22%,100% 78%,50% 100%,0% 78%,0% 22%); --lx-br:0;--lx-rim:7px; --lx-rimbg:linear-gradient(135deg,#f4e8fa,#a98bc2 55%,#f1e4f8); --lx-imgsh:0 26px 46px -20px rgba(110,80,130,.42); } html[data-ik-theme="luxe-lilac"] .cover.kc:not(.kts):not(.np) .cvph::after{ display:block;inset:-20px;border:1px solid rgba(150,115,180,.35); clip-path:inherit;border-radius:0; } /* 14 · DUNE CEREMONY — concentric dune arches */ html[data-ik-theme="luxe-sand"][data-theme]{ --lx-clip:none;--lx-br:999px 999px 0 0 / 28% 28% 0 0;--lx-rim:0px; --lx-bsh:0 0 0 9px rgba(214,174,126,.36),0 0 0 18px rgba(214,174,126,.22),0 0 0 27px rgba(214,174,126,.12); --lx-imgsh:0 26px 46px -20px rgba(150,110,60,.45); } /* 15 · RUBY VELVET — crest / shield, wax seal */ html[data-ik-theme="luxe-ruby"][data-theme]{ --lx-clip:polygon(0% 0%,100% 0%,100% 64%,82% 82%,50% 100%,18% 82%,0% 64%); --lx-br:0;--lx-rim:5px; --lx-rimbg:linear-gradient(135deg,#f6d2cb,#c98a85 55%,#f1c7bf); --lx-imgsh:0 26px 46px -18px rgba(0,0,0,.6); } /* ============================================================================= MODERN EVENT CHROME — a quieter, more expensive top bar and cover for every event kind (funeral, unveiling, wedding, birthday, baby shower, party, imbizo, gig, group, business). Nothing here changes the palette; it only refines geometry, weight and motion so the app reads as current rather than templated. ============================================================================= */ /* --- the floating top bar -------------------------------------------------- */ .cover .cvtop{gap:9px} .cover .cvtop .tb, .cover .cvwa{ width:44px;height:44px; -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); background:rgba(20,17,15,.42); border:1px solid rgba(255,255,255,.26); box-shadow:0 10px 26px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22); transition:transform .3s cubic-bezier(.22,1,.36,1),background .25s,box-shadow .25s; } .cover .cvtop .tb{color:#fff} .cover .cvwa{background:#25d366;border-color:rgba(255,255,255,.4);color:#fff} .cover .cvtop .tb:active, .cover .cvwa:active{transform:scale(.93)} @media (hover:hover){ .cover .cvtop .tb:hover{background:rgba(20,17,15,.62);transform:translateY(-1px)} .cover .cvwa:hover{transform:translateY(-1px)} } .cover .cvbrand img{height:34px;width:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))} /* --- the "tap to open" button: a modern pill with a moving arrow ----------- */ .cover .tapo{ border-radius:999px; padding:12px 22px; font:600 13.5px var(--ik-b,Inter),sans-serif; letter-spacing:.02em; gap:9px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.42); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 14px 30px -14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.3); } .cover .tapo .i{transition:transform .35s cubic-bezier(.22,1,.36,1)} .cover .tapo:hover .i{transform:translateX(3px)} /* --- every event cover gets a softer, deeper scrim so type stays legible --- */ .cover:after{ background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0) 26% 40%,rgba(0,0,0,.82)); } /* --- funeral / unveiling: a calm modern arch with a hairline -------------- */ .kd .cvph{ border-radius:999px 999px 20px 20px; box-shadow:0 0 0 1px rgba(217,176,98,.55),0 0 0 6px rgba(20,17,15,.55),0 30px 56px -22px rgba(0,0,0,.75); } .kd .cvtxt h1{letter-spacing:-.025em} /* --- wedding (base look, when no luxe theme is chosen): soft arch --------- */ .kw .cvph{ width:min(60vw,248px); height:clamp(210px,40vh,340px); border-radius:999px 999px 18px 18px; box-shadow:0 0 0 1px rgba(184,138,62,.6),0 0 0 6px rgba(246,239,227,.85),0 26px 48px -18px rgba(60,35,10,.5); } .kw .cvtxt h1{letter-spacing:-.02em} /* --- birthday / party: a modern tilted print ----------------------------- */ .kf .cvph{ border-radius:22px; border:5px solid rgba(255,255,255,.94); transform:rotate(-2deg); box-shadow:0 30px 54px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.2); } .kf .cvtxt h1{letter-spacing:-.03em} /* --- baby shower: a soft squircle instead of a hard circle --------------- */ .k-baby_shower .cvph{ width:min(62vw,252px); height:min(62vw,252px); border-radius:36% 36% 34% 34% / 32% 32% 38% 38%; box-shadow:0 0 0 1px rgba(255,255,255,.6),0 26px 48px -18px rgba(80,40,60,.45); } /* --- gig / festival: keep the poster but sharpen the frame --------------- */ .k-gig .cvph{border-radius:14px;box-shadow:0 0 0 1px rgba(232,187,90,.55),0 28px 54px -20px rgba(0,0,0,.8)} /* --- imbizo / group / business: a clean editorial plate ------------------ */ .k-imbizo .cvph, .k-group .cvph, .k-business .cvph{border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 26px 48px -20px rgba(0,0,0,.6)} /* --- the cover label (small caps) gets a little more air ----------------- */ .cover .cvtxt small{letter-spacing:.26em;font-weight:600} .cover .cvtxt h1{text-wrap:balance} /* --------------------------------------------------------------------------- COVER TOP BAR ALIGNMENT (v31) The WhatsApp button was a leftover bottom-left floating button: it still carried left/bottom offsets, and because it is position:relative inside the top bar those offsets pushed it 12px right and 14-34px up, so it overlapped the menu button and sat higher than it. Reset the offsets, give both buttons one size, centre the logo on the same line, and keep an even gap between them. --------------------------------------------------------------------------- */ .cover .cvtop, html[data-ik-theme] .cover .cvtop{align-items:center;gap:10px} .cover .cvtop .cvwa, html[data-ik-theme] .cover .cvtop .cvwa{ position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto; width:44px;height:44px;margin:0;flex:none; box-shadow:0 10px 26px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px rgba(255,255,255,.18); } .cover .cvtop .cvwa svg{width:22px;height:22px;display:block} .cover .cvtop .tb, html[data-ik-theme] .cover .cvtop .tb{width:44px;height:44px;margin:0;flex:none;display:grid;place-items:center;padding:0} /* logo sits on the same centre line as the two buttons (top bar centre = top + 22px) */ .cover .cvbrand, html[data-ik-theme] .cover .cvbrand{top:calc(19px + env(safe-area-inset-top,0px));transform:none} html[data-ik-theme="ubuntu-heritage"] .cover .cvbrand, html[data-ik-theme="zulu-beadwork"] .cover .cvbrand, html[data-ik-theme="ndebele-joy"] .cover .cvbrand{top:calc(39px + env(safe-area-inset-top,0px));transform:none} @media (max-width:380px){ .cover .cvtop{right:10px;gap:8px} .cover .cvtop .cvwa,.cover .cvtop .tb{width:40px;height:40px} .cover .cvbrand{left:10px} } /* programme footer: PDF and video buttons sit side by side */ .foot .pdfbtn{margin-left:0} /* ============================================================================= LUXE v4 · THE ARTWORK RETURNS TO PHOTO COVERS ----------------------------------------------------------------------------- The floral / design artwork used to be drawn only on the no-photo cover (`.np`), so as soon as a couple uploaded a photograph the flowers vanished. Here the same artwork is re-used as a soft, masked frame *around* the photo: the centre of the mask is transparent so the portrait stays crisp, while the corners and edges carry the theme's flowers, linen and gold. z-index:1 puts it above the blurred backdrop but below the text card (z-index:2). ============================================================================= */ html[data-ik-theme="luxe-botanical"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-botanical-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-botanical-md.webp?v=1") 1x,url("/assets/wedding-luxe-botanical-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-botanical-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-botanical-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-botanical-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-botanical-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} html[data-ik-theme="luxe-emerald"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-emerald-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-emerald-md.webp?v=1") 1x,url("/assets/wedding-luxe-emerald-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-emerald-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-emerald-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-emerald-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-emerald-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} html[data-ik-theme="luxe-champagne"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-champagne-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-champagne-md.webp?v=1") 1x,url("/assets/wedding-luxe-champagne-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-champagne-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-champagne-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-champagne-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-champagne-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} html[data-ik-theme="luxe-blush"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-blush-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-blush-md.webp?v=1") 1x,url("/assets/wedding-luxe-blush-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-blush-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-blush-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-blush-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-blush-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} html[data-ik-theme="luxe-noir"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-noir-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-noir-md.webp?v=1") 1x,url("/assets/wedding-luxe-noir-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-noir-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-noir-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-noir-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-noir-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} html[data-ik-theme="luxe-terracotta"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-terracotta-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-terracotta-md.webp?v=1") 1x,url("/assets/wedding-luxe-terracotta-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-terracotta-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-terracotta-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-terracotta-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-terracotta-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} html[data-ik-theme="luxe-sage"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-sage-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-sage-md.webp?v=1") 1x,url("/assets/wedding-luxe-sage-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-sage-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-sage-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-sage-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-sage-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} html[data-ik-theme="luxe-sapphire"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-sapphire-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-sapphire-md.webp?v=1") 1x,url("/assets/wedding-luxe-sapphire-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-sapphire-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-sapphire-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-sapphire-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-sapphire-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} html[data-ik-theme="luxe-pearl"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-pearl-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-pearl-md.webp?v=1") 1x,url("/assets/wedding-luxe-pearl-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-pearl-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-pearl-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-pearl-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-pearl-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} html[data-ik-theme="luxe-marigold"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-marigold-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-marigold-md.webp?v=1") 1x,url("/assets/wedding-luxe-marigold-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-marigold-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-marigold-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-marigold-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-marigold-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} html[data-ik-theme="luxe-olive"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-olive-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-olive-md.webp?v=1") 1x,url("/assets/wedding-luxe-olive-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-olive-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-olive-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-olive-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-olive-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} html[data-ik-theme="luxe-cobalt"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-cobalt-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-cobalt-md.webp?v=1") 1x,url("/assets/wedding-luxe-cobalt-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-cobalt-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-cobalt-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-cobalt-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-cobalt-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} html[data-ik-theme="luxe-lilac"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-lilac-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-lilac-md.webp?v=1") 1x,url("/assets/wedding-luxe-lilac-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-lilac-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-lilac-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-lilac-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-lilac-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} html[data-ik-theme="luxe-sand"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-sand-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-sand-md.webp?v=1") 1x,url("/assets/wedding-luxe-sand-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-sand-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-sand-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-sand-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-sand-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} html[data-ik-theme="luxe-ruby"] .cover.kc:not(.kts):not(.np)::before{content:"";position:absolute;inset:0;z-index:1;background:url("/assets/wedding-luxe-ruby-md.webp?v=1") center 44%/cover no-repeat;background-image:-webkit-image-set(url("/assets/wedding-luxe-ruby-md.webp?v=1") 1x,url("/assets/wedding-luxe-ruby-lg.webp?v=1") 2x);background-image:image-set(url("/assets/wedding-luxe-ruby-md.avif?v=1") type("image/avif") 1x,url("/assets/wedding-luxe-ruby-md.webp?v=1") type("image/webp") 1x,url("/assets/wedding-luxe-ruby-lg.avif?v=1") type("image/avif") 2x,url("/assets/wedding-luxe-ruby-lg.webp?v=1") type("image/webp") 2x);opacity:.82;pointer-events:none;-webkit-mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%);mask-image:radial-gradient(118% 92% at 50% 43%,transparent 30%,rgba(0,0,0,.35) 54%,rgba(0,0,0,.92) 82%,#000 100%)} /* --------------------------------------------------------------------------- v48. Programme editor (labelled fields) + social handles row at the bottom of guest pages --------------------------------------------------------------------------- */ .ikpe-hint{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--mute);text-align:left} .ikpe-empty{margin:0 0 12px;padding:12px 14px;border:1px dashed var(--line);border-radius:14px;font-size:13px;color:var(--mute);text-align:left} .ikpe-row{min-width:0;margin:0 0 14px;padding:4px 12px 12px;border:1px solid var(--line);border-radius:18px;background:var(--glass,transparent)} .ikpe-row>legend{padding:0 8px;font:600 12.5px/1 var(--ik-b,Inter),sans-serif;color:var(--acc)} .ikpe-tools{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px} .ikpe-tools button{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:6px 10px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);font:500 13px var(--ik-b,Inter),sans-serif;cursor:pointer} .ikpe-tools button[disabled]{opacity:.35;cursor:default} .ikpe-tools .ikpe-del{color:#e5675d} .ikpe-f{display:block;margin:0 0 10px} .ikpe-f>span{display:block;margin:0 0 4px;font-size:12.5px;color:var(--mute)} .ikpe-f input,.ikpe-f textarea{margin:0} .ikpe-two{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;align-items:end} .ikpe-add{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:4px} .ikpe-paste{margin:14px 0 4px} .ikpe-paste summary{cursor:pointer;color:var(--acc);font-size:13px;margin:0 0 8px} .ikpe-paste textarea{margin:0 0 8px} .ikpe .ppic{margin:2px 0 4px} .iksoc{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:26px auto 16px;padding:0 6px;max-width:100%} .iksoc a{display:inline-flex;align-items:center;gap:7px;min-height:40px;max-width:100%;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:500 13px/1 var(--ik-b,Inter),sans-serif;text-decoration:none} .iksoc a svg{flex:none} .iksoc a span{min-width:0;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .iksoc a:focus-visible{outline:2px solid var(--acc);outline-offset:2px} .iksoc .iksoc-wa{justify-content:center;width:40px;padding:0;border-color:transparent;background:#25d366;color:#fff;box-shadow:0 6px 16px -6px rgba(37,211,102,.6)} body.print-mode .iksoc{display:none} /* ---- host editor: "Ready to share" checklist ---- */ .ikready-b{height:6px;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent);overflow:hidden;margin-top:8px} .ikready-b span{display:block;height:100%;border-radius:999px;background:#25a85a;transition:width .4s ease} .ikready-r{display:flex;align-items:center;gap:10px;min-height:34px;font-size:15px;opacity:.75} .ikready-r.ok{opacity:1} .ikready-r span:first-child{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;border:1.5px solid currentColor;font-size:12px} .ikready-r.ok span:first-child{background:#25a85a;border-color:#25a85a;color:#fff} /* ---- host editor: every section taps open; each line-up / programme item taps open ---- */ .ikc>h2{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;margin-bottom:0} .ikc>h2::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;opacity:.7} .ikc.ikc-c>h2::after{transform:rotate(-45deg)} .ikc:not(.ikc-c)>h2{margin-bottom:12px} .ikc.ikc-c>:not(h2){display:none!important} .ikc>h2:focus-visible{outline:2px solid var(--acc,currentColor);outline-offset:4px;border-radius:8px} .ikpe-d{padding:0 12px} .ikpe-d[open]{padding-bottom:12px} .ikpe-sum{display:flex;align-items:center;gap:8px;min-height:48px;cursor:pointer;list-style:none;font:600 14px/1.3 var(--ik-b,Inter),sans-serif} .ikpe-sum::-webkit-details-marker{display:none} .ikpe-sum b{flex:none;color:var(--acc);min-width:22px} .ikpe-sum span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ikpe-sum::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;opacity:.7} .ikpe-d:not([open])>.ikpe-sum::after{transform:rotate(-45deg)} /* ---- gig line-up: auto "Next up", past gigs tucked away ---- */ .tl li.ik-next{position:relative;border-radius:14px;box-shadow:0 0 0 1.5px var(--acc,currentColor);padding-top:22px} .ik-nx{position:absolute;top:-9px;left:12px;padding:2px 10px;border-radius:999px;background:var(--acc,#c8963e);color:#fff;font:700 10.5px/1.6 var(--ik-b,Inter),sans-serif;letter-spacing:.08em;text-transform:uppercase} .ikpast{margin:14px 0 2px;opacity:.8} .ikpast summary{cursor:pointer;font-size:13px;color:var(--mute);min-height:40px;display:flex;align-items:center} /* v49c: bottom order = downloads, share + social row, Ikhaya logo last */ .foot.ikdl{margin:22px 0 0;padding-bottom:0} .foot.ikbrand{margin:6px 0 4px} .iksoc .ikmem span{max-width:none} body:has(#main.wrap>.gcv) #root>.foot.ikdl{margin:18px auto 0;padding-bottom:0} body:has(#main.wrap>.gcv) #root>.foot.ikbrand{margin:4px auto 0} body.print-mode .foot.ikdl,body.print-mode .foot.ikbrand{display:none!important} /* v50: public home for visitors who are not signed in */ .ikland{margin:6px 0 18px;text-align:center} .ikland h1{font-family:var(--ik-d,Fraunces),Georgia,serif;font-size:clamp(1.55rem,6.6vw,2.1rem);line-height:1.15;margin:8px 0 12px} .ikland h2{font-family:var(--ik-d,Fraunces),Georgia,serif;font-size:1.1rem;margin:26px 0 10px} .ikland-lede{color:var(--mute);line-height:1.55;margin:0 auto 16px;max-width:34em} .ikland-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .ikland-cta .btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-width:170px} .ikland-price{font-size:13px;color:var(--mute);margin:12px 0 0} .ikland-ex{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .ikland-ex a{padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;font-size:14px} .ikland-ft{list-style:none;margin:0;padding:0;display:grid;gap:10px;text-align:left} .ikland-ft li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px} .ikland-ft li span{color:var(--mute);font-size:13px} .ikland-foot{font-size:13px;color:var(--mute);margin:20px 0 6px} .ikland-foot a{color:var(--acc)} .ikland-sign{margin-top:18px} /* ============================================================================= v50c · HEIRLOOM GREEN & GOLD (funeral-heirloom) Warm cream paper, deep forest green, antique gold. Cormorant headings flanked by gold rules, white rounded cards, pill tabs, and a circular framed portrait in the gallery with the caption underneath. ============================================================================= */ html[data-ik-theme="funeral-heirloom"][data-theme]{ color-scheme:light; --ik-d:"Cormorant Garamond"; --ik-b:"Plus Jakarta Sans"; --bg:#faf6ee; --ink:#2c3a31; --mute:#7d705c; --card:#ffffff; --line:rgba(176,137,74,.28); --acc:#1f4d3a; --acc2:#b8924a; --on:#ffffff; --glow:rgba(184,146,74,.12); --lit:rgba(255,255,255,.95); --blur-md:0px; --blur-lg:0px; --r-card:26px; --k-edge:rgba(184,146,74,.42); --k-edge-2:#b8924a; --k-line:linear-gradient(90deg,transparent,#b8924a,transparent); --k-metal:linear-gradient(135deg,#2a5f49,#1f4d3a); --k-gloss:inset 0 1px 0 rgba(255,255,255,.18); --k-btn-shadow:0 14px 28px -12px rgba(31,77,58,.45); --k-card-shadow:0 18px 40px -26px rgba(90,70,30,.35),0 1px 3px rgba(90,70,30,.06); --k-dock:rgba(255,253,248,.96); --k-head:#a07a3a; --k-input:#fffdf8; --k-h1:clamp(2.4rem,11vw,3.3rem); --k-h2:30px; --k-item:21px; --k-gsum:26px; --k-h1-lh:1; --k-bg-img:linear-gradient(180deg,#fdfaf3 0%,#faf6ee 55%,#f4ede0 100%); --kc-bg:linear-gradient(160deg,#fffdf8,#efe5d1); --kc-ink:#1f3a2e; --kc-mute:#6f624d; --kc-accent:#a07a3a; } /* section headings: gold Cormorant with a rule either side */ html[data-ik-theme="funeral-heirloom"] #main.wrap:not(:has(>.gcv)) .card h2{justify-content:center;text-align:center;gap:14px;color:#a07a3a;font-weight:500;letter-spacing:.01em} html[data-ik-theme="funeral-heirloom"] #main.wrap:not(:has(>.gcv)) .card h2::before, html[data-ik-theme="funeral-heirloom"] #main.wrap:not(:has(>.gcv)) .card h2::after{content:"";flex:1 1 24px;height:1px;background:#b8924a;opacity:.85} html[data-ik-theme="funeral-heirloom"] #main.wrap:not(:has(>.gcv)) .card h2::before,html[data-ik-theme="funeral-heirloom"] #main.wrap:not(:has(>.gcv)) .card h2::after{width:auto!important;height:1px!important;min-width:24px;background:#b8924a!important;opacity:.85;border-radius:0!important;box-shadow:none!important;transform:none!important;position:static!important;inset:auto!important} html[data-ik-theme="funeral-heirloom"] #main.wrap:not(:has(>.gcv)) .card h2 svg{display:none} html[data-ik-theme="funeral-heirloom"] #main.wrap:not(:has(>.gcv)) .card{background:#fff;border:1px solid rgba(184,146,74,.28);box-shadow:var(--k-card-shadow)} /* pill tabs: white pill, green label, gold outline on the active one */ html[data-ik-theme="funeral-heirloom"] nav.tabs{background:rgba(255,253,248,.96);border:1px solid rgba(184,146,74,.38);box-shadow:0 14px 34px -16px rgba(60,50,20,.35)} html[data-ik-theme="funeral-heirloom"] nav.tabs::before{background:#fffdf8;border:1.5px solid #b8924a;box-shadow:0 6px 16px -8px rgba(160,122,58,.55)} html[data-ik-theme="funeral-heirloom"] nav.tabs button,html[data-ik-theme="funeral-heirloom"] nav.tabs button.on{color:#1f4d3a;font-weight:600} html[data-ik-theme="funeral-heirloom"] nav.tabs button:not(.on){opacity:.82} /* buttons */ html[data-ik-theme="funeral-heirloom"] .btn:not(.ghost):not(.danger){background:#1f4d3a;color:#fff;border:1px solid #b8924a} /* gallery slideshow: white card, circular portrait, caption underneath */ html[data-ik-theme="funeral-heirloom"] .ss:not(.vs){background:#fff;border:1px solid rgba(184,146,74,.32);border-radius:28px;box-shadow:var(--k-card-shadow);aspect-ratio:4/4.85} html[data-ik-theme="funeral-heirloom"] .ss:not(.vs) .slides{inset:14px 14px 70px 14px} html[data-ik-theme="funeral-heirloom"] .ss:not(.vs) .sl{display:flex;flex-direction:column;align-items:center;justify-content:flex-start} html[data-ik-theme="funeral-heirloom"] .ss:not(.vs) .sl img{width:100%;height:auto;aspect-ratio:1/1;border-radius:50%;object-fit:cover;object-position:center 22%;transition:none;transform:none!important} html[data-ik-theme="funeral-heirloom"] .ss:not(.vs) .sl figcaption{position:absolute;left:0;right:0;bottom:-38px;top:auto;padding:0 12px;background:none;color:#7d705c;text-align:center;font:400 15px var(--ik-b),system-ui,sans-serif} html[data-ik-theme="funeral-heirloom"] .ss:not(.vs) .dots{bottom:12px} html[data-ik-theme="funeral-heirloom"] .ss:not(.vs) .dots i{background:rgba(184,146,74,.35)} html[data-ik-theme="funeral-heirloom"] .ss:not(.vs) .dots i.on{background:#1f4d3a} html[data-ik-theme="funeral-heirloom"] .ss:not(.vs) .nv,html[data-ik-theme="funeral-heirloom"] .ss:not(.vs) .pp{background:#ffffffd9;color:#1f4d3a;border:1px solid rgba(184,146,74,.5)} html[data-ik-theme="funeral-heirloom"] .ss:not(.vs) .nv{top:calc(14px + 25%)} /* cover: cream paper, deep-green type, gold small-caps, full-screen photo with a cream veil */ html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts){background:linear-gradient(160deg,#fffdf8,#efe5d1);color:#1f3a2e} html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts) .cvimg,html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts) .cvbg{display:none!important} html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts):not(.np):not(.gcv) .cvimg{display:none!important} html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts)::after{background:none!important} html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts) .cvtxt small{color:#a07a3a;letter-spacing:.28em;font-weight:700} html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts) .cvtxt h1{color:#1f4d3a;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;text-shadow:0 2px 18px #faf6ee99} html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts) .cvtxt p,html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts) .cvtxt .cvm{color:#6f624d} html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts) .tapo{background:#1f4d3a;color:#fff;border:1px solid #b8924a;box-shadow:0 12px 28px #1f4d3a44} /* v50e · Heirloom cover: circular framed portrait (same as the gallery) instead of the full-width photo */ html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts):not(.np) .cvph{ display:block!important; --fr-ar:1; --fr-ov:16px; --fr-rmin:1; --fr-rmax:1; --fr-maxw:300; --fr-maxh:300; border:0!important;background:none!important;box-shadow:none!important;transform:none!important;filter:none!important;overflow:visible!important; border-radius:50%!important; } html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts):not(.np) .cvph>img{ border-radius:50%!important;box-shadow:none!important;clip-path:none!important;object-position:center 22%!important; } html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts):not(.np) .cvph::before{ content:""!important;display:block!important;position:absolute!important;inset:-8px!important;z-index:-1!important; border-radius:50%!important;background:#fff!important;transform:none!important;clip-path:none!important;border:0!important; box-shadow:0 0 0 1.5px #b8924a,0 18px 36px -16px rgba(90,70,30,.45)!important; } html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts):not(.np) .cvph::after{ content:""!important;display:block!important;position:absolute!important;inset:-16px!important;z-index:-2!important; border-radius:50%!important;border:1px solid rgba(184,146,74,.5)!important;background:none!important;box-shadow:none!important;transform:none!important;clip-path:none!important; } html[data-ik-theme="funeral-heirloom"] .cover.kc:not(.kts):not(.np) .cvcard{justify-content:center!important} /* in-page cover (above Order / Gallery / RSVP / Venue / Gifts): same circle, sized from the screen width */ html[data-ik-theme="funeral-heirloom"] .cover.gcv.kc:not(.kts):not(.np) .cvph{--gr:1;aspect-ratio:1/1!important;margin:22px auto 22px!important} html[data-ik-theme="funeral-heirloom"] .cover.gcv.kc:not(.kts):not(.np) .cvcard{justify-content:flex-start!important} /* v50zc: today's gig(s) and the next gig date are highlighted automatically in the line-up */ .tl li.ik-today{background:color-mix(in srgb,var(--acc,#c8963e) 16%,transparent)} .tl li.ik-today .ik-nx{background:#d6342c;animation:ikTodayPulse 2s ease-in-out infinite} @keyframes ikTodayPulse{0%,100%{box-shadow:0 0 0 0 rgba(214,52,44,.55)}50%{box-shadow:0 0 0 6px rgba(214,52,44,0)}} @media (prefers-reduced-motion:reduce){.tl li.ik-today .ik-nx{animation:none}}