/*! * NameSpark Motion Kit v1 — component styles + theme moods * Consumed via manifest.extra_css. Templates own page design; * this file styles kit components and exposes theme tokens only. */ /* ─── Theme moods ─────────────────────────────────────────────────────────── Apply on . Templates read the tokens; sections marked .mk-band use the dark band tokens. */ [data-mk-theme] { --mk-bg: #f7f4ef; --mk-surface: #ede7dc; --mk-ink: #26221c; --mk-muted: #6f675b; --mk-accent: #c05b33; --mk-accent-2: #a98850; --mk-band-bg: #211c17; --mk-band-ink: #f3efe8; --mk-line: rgba(38, 34, 28, 0.14); --mk-radius: 14px; --mk-font-display: "Fraunces", "Playfair Display", Georgia, serif; --mk-font-body: "Manrope", "Segoe UI", system-ui, sans-serif; } /* Terra Clay — construction default: plaster, limestone, terracotta, bronze */ [data-mk-theme="terra"] { --mk-bg: #f7f4ef; --mk-surface: #ede7dc; --mk-ink: #26221c; --mk-muted: #6f675b; --mk-accent: #c05b33; --mk-accent-2: #a98850; --mk-band-bg: #211c17; --mk-band-ink: #f3efe8; --mk-line: rgba(38, 34, 28, 0.14); } /* Ivory Japandi — interiors, weddings, hospitality */ [data-mk-theme="ivory"] { --mk-bg: #faf7f2; --mk-surface: #efe9e1; --mk-ink: #22201d; --mk-muted: #7a7268; --mk-accent: #b08d57; --mk-accent-2: #3f4a3c; --mk-band-bg: #2c2a26; --mk-band-ink: #f5f1ea; --mk-line: rgba(34, 32, 29, 0.13); } /* Charcoal Lux — real estate, jewellery */ [data-mk-theme="lux"] { --mk-bg: #121212; --mk-surface: #1e1c1a; --mk-ink: #f5f1ea; --mk-muted: #a39a8c; --mk-accent: #c6a87c; --mk-accent-2: #8c6f4e; --mk-band-bg: #0c0b0a; --mk-band-ink: #f5f1ea; --mk-line: rgba(245, 241, 234, 0.14); } /* ─── Base helpers ───────────────────────────────────────────────────────── */ .mk-band { background: var(--mk-band-bg); color: var(--mk-band-ink); } /* Elements animated by the kit start visible; JS sets initial states just before animating (no CSS-hidden content → no-JS and reduced-motion safe, zero CLS from late reveals). */ /* ─── Scrub media (video / image sequence) ──────────────────────────────── */ .mk-scrub { position: relative; overflow: clip; } .mk-scrub video, .mk-scrub canvas, .mk-scrub .mk-scrub-poster { display: block; width: 100%; height: 100%; object-fit: cover; } .mk-scrub .mk-scrub-poster { position: absolute; inset: 0; z-index: 1; } .mk-scrub[data-mk-live] .mk-scrub-poster { display: none; } /* ─── Before / After slider ─────────────────────────────────────────────── */ .mk-ba { position: relative; overflow: hidden; border-radius: var(--mk-radius); touch-action: pan-y; user-select: none; -webkit-user-select: none; } .mk-ba img, .mk-ba svg { display: block; width: 100%; height: auto; pointer-events: none; } .mk-ba .mk-ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); } .mk-ba .mk-ba-after img, .mk-ba .mk-ba-after svg { height: 100%; object-fit: cover; } .mk-ba .mk-ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--mk-accent); cursor: ew-resize; z-index: 2; } .mk-ba .mk-ba-handle::after { content: "⇔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--mk-accent); color: #fff; font-size: 18px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } .mk-ba .mk-ba-label { position: absolute; top: 14px; z-index: 1; padding: 4px 12px; border-radius: 100px; font: 600 12px/1.6 var(--mk-font-body); letter-spacing: 0.06em; text-transform: uppercase; background: rgba(0, 0, 0, 0.55); color: #fff; } .mk-ba .mk-ba-label--before { left: 14px; } .mk-ba .mk-ba-label--after { right: 14px; } /* ─── Hotspot explorer ──────────────────────────────────────────────────── */ .mk-hotspots { position: relative; display: inline-block; max-width: 100%; } .mk-hotspots img, .mk-hotspots svg { display: block; max-width: 100%; height: auto; } .mk-hotspot { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--mk-accent); color: #fff; font: 700 14px/1 var(--mk-font-body); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 6px color-mix(in srgb, var(--mk-accent) 30%, transparent); transition: transform 0.2s ease; } .mk-hotspot:hover, .mk-hotspot:focus-visible { transform: translate(-50%, -50%) scale(1.15); } .mk-hotspot-tip { position: absolute; z-index: 5; min-width: 180px; max-width: 260px; padding: 12px 14px; border-radius: 10px; background: var(--mk-band-bg); color: var(--mk-band-ink); font: 400 13px/1.5 var(--mk-font-body); transform: translate(-50%, calc(-100% - 16px)); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); pointer-events: none; } .mk-hotspot-tip strong { display: block; font-weight: 700; margin-bottom: 2px; color: var(--mk-accent-2); } .mk-hotspot-tip[hidden] { display: none; } /* ─── Marquee ───────────────────────────────────────────────────────────── */ .mk-marquee { overflow: hidden; white-space: nowrap; } .mk-marquee .mk-marquee-track { display: inline-flex; align-items: center; gap: 3.5rem; padding-right: 3.5rem; will-change: transform; } /* ─── Pinned process section ────────────────────────────────────────────── */ .mk-pin-steps [data-mk-step] { transition: none; } /* ─── EMI calculator ────────────────────────────────────────────────────── */ .mk-emi { display: grid; gap: 1.25rem; } .mk-emi label { display: block; font: 600 13px/1.4 var(--mk-font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mk-muted); margin-bottom: 6px; } .mk-emi input[type="range"] { width: 100%; accent-color: var(--mk-accent); } .mk-emi output, .mk-emi .mk-emi-value { font: 600 15px/1.4 var(--mk-font-body); color: var(--mk-ink); } .mk-emi .mk-emi-result { padding: 1.25rem 1.5rem; border-radius: var(--mk-radius); background: var(--mk-surface); border: 1px solid var(--mk-line); } .mk-emi .mk-emi-result .mk-emi-monthly { font: 700 clamp(1.6rem, 3vw, 2.2rem)/1.2 var(--mk-font-display); color: var(--mk-accent); } /* ─── Reduced motion ────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .mk-marquee .mk-marquee-track { transform: none !important; } } html[data-mk-reduced] .mk-marquee .mk-marquee-track { transform: none !important; }