/* ============================================================ Cynosure Titli — Custom CSS Charcoal / Black / White — Inspired by Blingon, myBageecha, CrunchyFashion. Rounded, warm, premium handmade feel. ============================================================ */ /* ── Base ──────────────────────────────────────────────────── */ body { font-family: 'Mulish', system-ui, sans-serif; color: #1c1c1c; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: #1c1c1c; color: #fff; } html { scroll-behavior: smooth; } /* ── Kill Blocksy default blue accent; align links to brand ──── */ :root { --theme-palette-color-1: #1c1c1c; /* was blue — primary accent */ --theme-palette-color-2: #3B1C32; /* aubergine */ --theme-link-initial-color: #1c1c1c; --theme-link-hover-color: #C9A24B; /* gold */ } /* Custom Tailwind-styled button anchors must never inherit link blue — but yield to an explicit hover:text-* utility (buttons that invert to a light background on hover need their text to invert too). */ a.text-white:hover:not(.hover\:text-brand-black):not(.hover\:text-brand-gray) { color: #fff; } /* Hide the reel story progress bar */ .ct-reel-progress { display: none !important; } /* ── Announcement bar marquee ──────────────────────────────── */ @keyframes ct-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .ct-marquee-track { display: flex; animation: ct-marquee 30s linear infinite; width: max-content; } .ct-marquee-track:hover { animation-play-state: paused; } /* ── Floating WhatsApp ─────────────────────────────────────── */ .ct-float-wa { position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 9999; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,0.35); text-decoration: none; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s; animation: ct-pulse-wa 3s ease-in-out infinite; } .ct-float-wa:hover { transform: scale(1.12); box-shadow: 0 8px 28px rgba(37,211,102,0.5); color: #fff; } .ct-float-wa svg { width: 28px; height: 28px; } @keyframes ct-pulse-wa { 0%, 100% { box-shadow: 0 4px 16px rgba(37,211,102,0.35); } 50% { box-shadow: 0 4px 20px rgba(37,211,102,0.55), 0 0 0 8px rgba(37,211,102,0.06); } } /* ── Butterfly float ───────────────────────────────────────── */ @keyframes ct-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } } .ct-butterfly-float { animation: ct-float 6s ease-in-out infinite; } /* ── Image hover zoom ──────────────────────────────────────── */ .ct-img-zoom { overflow: hidden; } .ct-img-zoom img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .ct-img-zoom:hover img { transform: scale(1.08); } /* ── Card hover lift (Blingon-style) ───────────────────────── */ .ct-card-lift { transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .ct-card-lift:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04); } /* ── Category circle hover ─────────────────────────────────── */ .ct-circle-zoom { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .ct-circle-zoom:hover { transform: scale(1.05); } .ct-circle-zoom:hover img { transform: scale(1.1); } /* ── Subtle fade-in on scroll ──────────────────────────────── */ .ct-fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .ct-fade-up.ct-visible { opacity: 1; transform: translateY(0); } /* ── Badge system (CrunchyFashion-inspired) ────────────────── */ .ct-badge { display: inline-block; padding: 0.2rem 0.6rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'Mulish', sans-serif; } .ct-badge--new { background: #1c1c1c; color: #fff; } .ct-badge--handmade { background: #f0f0f0; color: #1c1c1c; } .ct-badge--quote { background: #1c1c1c; color: #fff; } .ct-badge--sale { background: #1c1c1c; color: #fff; } /* ── AJAX cart toast notification ──────────────────────────── */ .ct-cart-toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px); background: #0a0a0a; color: #fff; padding: 0.85rem 1.5rem; border-radius: 12px; font-family: 'Mulish', sans-serif; font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 1rem; z-index: 99999; opacity: 0; transition: opacity 0.35s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 12px 40px rgba(0,0,0,0.25); max-width: 90vw; white-space: nowrap; } .ct-cart-toast.ct-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); } .ct-cart-toast a { color: #fff; text-decoration: none; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 1rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; transition: all 0.25s; flex-shrink: 0; } .ct-cart-toast a:hover { background: #fff; color: #0a0a0a; border-color: #fff; } /* ── Add-to-cart button states ────────────────────────────── */ .button.loading, .add_to_cart_button.loading, .single_add_to_cart_button.loading { position: relative !important; color: transparent !important; pointer-events: none !important; } .button.loading::after, .add_to_cart_button.loading::after, .single_add_to_cart_button.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: ct-spin 0.6s linear infinite; } /* Spinner color when button is inverted (hover state) */ .button.loading:hover::after { border-color: rgba(10,10,10,0.2); border-top-color: #0a0a0a; } .ct-added, .add_to_cart_button.ct-added { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; } @keyframes ct-spin { to { transform: rotate(360deg); } } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 640px) { .ct-float-wa { width: 50px; height: 50px; bottom: 1.25rem; right: 1.25rem; } .ct-float-wa svg { width: 24px; height: 24px; } .ct-cart-toast { font-size: 0.75rem; padding: 0.75rem 1.25rem; bottom: 5rem; } } /* ── Varmala reel: Instagram-story gradient ring ──────────────────── */ /* Tight gradient border hugging the circle (the recognisable IG story ring). */ .ct-reel-ring-ig { background: conic-gradient( from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75 ); } /* Soft coloured glow behind, slowly rotating for a premium, unique feel. */ .ct-reel-ring { background: conic-gradient( from 0deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75 ); animation: ct-reel-spin 16s linear infinite; } @keyframes ct-reel-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ct-reel-ring { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════ Fluent Forms — brand styling (quote / enquiry forms) ═══════════════════════════════════════════════════════════════════════ */ .fluentform { max-width: 640px; } .fluentform .ff-el-group { margin-bottom: 1.4rem; } .fluentform .ff-el-group:last-child { margin-bottom: 0; } /* Labels */ .fluentform .ff-el-input--label label { font-family: 'Mulish', system-ui, sans-serif; font-size: 0.82rem; font-weight: 600; color: #1a1a1a; -webkit-text-fill-color: #1a1a1a; margin-bottom: 0.5rem; letter-spacing: 0; } .fluentform .ff-el-is-required.asterisk-right label:after, .fluentform .ff-el-is-required label .ff-el-is-required, .fluentform .ff-el-input--label.ff-el-is-required label:after { color: #c0392b; -webkit-text-fill-color: #c0392b; } /* Inputs, selects, textareas */ .fluentform input.ff-el-form-control, .fluentform select.ff-el-form-control, .fluentform textarea.ff-el-form-control { width: 100%; min-height: 50px; padding: 0.8rem 1rem; border: 1px solid #e3e3e3; border-radius: 11px; background: #fafafa; font-family: 'Mulish', system-ui, sans-serif; font-size: 0.95rem; color: #0a0a0a; line-height: 1.4; box-shadow: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .fluentform textarea.ff-el-form-control { min-height: 130px; resize: vertical; } .fluentform input.ff-el-form-control:focus, .fluentform select.ff-el-form-control:focus, .fluentform textarea.ff-el-form-control:focus { background: #fff; border-color: #0a0a0a; box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.07); outline: none; } .fluentform input.ff-el-form-control::placeholder, .fluentform textarea.ff-el-form-control::placeholder { color: #b0b0b0; } /* Select arrow */ .fluentform select.ff-el-form-control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } /* Name / multi-column rows: even gap */ .fluentform .ff-t-container { gap: 1.2rem; margin: 0; } .fluentform .ff-t-container .ff-t-cell { padding: 0; } /* Submit button */ .fluentform .ff-btn-submit { margin-top: 0.5rem; padding: 0.95rem 2.4rem; border: 0; border-radius: 11px; background: #0a0a0a; color: #fff; font-family: 'Mulish', system-ui, sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; } .fluentform .ff-btn-submit:hover { background: #2e2e2e; transform: translateY(-1px); } /* Validation + success messages */ .fluentform .error, .fluentform .text-danger, .fluentform .ff-el-is-error .text-danger { color: #c0392b; font-size: 0.78rem; margin-top: 0.3rem; } .ff-message-success, .fluentform_success { padding: 1.25rem 1.5rem; background: #f5f4f2; border: 1px solid #e5e5e5; border-left: 4px solid #0a0a0a; border-radius: 12px; color: #1a1a1a; font-size: 0.95rem; } /* Footer social icons — explicit hover so it never depends on Tailwind CDN generating hover:text-* utilities (which was leaving icons invisible). */ .ct-social-icon i { color: inherit; transition: color .3s ease; } .ct-social-icon:hover { background: #fff; color: #0a0a0a; } .ct-social-icon:hover i { color: #0a0a0a; } .ct-social-icon--wa:hover { background: #25D366; color: #fff; } .ct-social-icon--wa:hover i { color: #fff; } /* ============================================================ Customer Memory Wall ============================================================ */ .ct-mw { background: radial-gradient(circle at 20% 20%, rgba(201,162,75,0.06), transparent 40%), radial-gradient(circle at 80% 60%, rgba(59,28,50,0.05), transparent 45%), #f3efe9; background-color: #f3efe9; } /* faint pinboard texture */ .ct-mw::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; opacity: .6; } .ct-mw-grid { position: relative; z-index: 1; } /* --- Polaroid card --- */ .ct-mw-card { position: relative; background: #fff; padding: 14px 14px 0; border-radius: 3px; box-shadow: 0 10px 28px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.08); transform: rotate(var(--rot, 0deg)); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; will-change: transform; } .ct-mw-card:hover { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: 0 22px 50px rgba(0,0,0,0.22), 0 4px 10px rgba(0,0,0,0.1); z-index: 5; } /* washi tape */ .ct-mw-tape { position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: linear-gradient(135deg, rgba(201,162,75,0.55), rgba(231,212,160,0.45)); box-shadow: 0 2px 6px rgba(0,0,0,0.12); border-left: 1px dashed rgba(255,255,255,0.5); border-right: 1px dashed rgba(255,255,255,0.5); } .ct-mw-card:nth-child(even) .ct-mw-tape { transform: translateX(-50%) rotate(4deg); background: linear-gradient(135deg, rgba(59,28,50,0.35), rgba(120,70,105,0.28)); } /* photo */ .ct-mw-photo { display: block; width: 100%; cursor: zoom-in; overflow: hidden; background: #ece7df; line-height: 0; } .ct-mw-photo img { display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .ct-mw-card:hover .ct-mw-photo img { transform: scale(1.04); } /* handwritten caption */ .ct-mw-cap { font-family: 'Caveat', 'Segoe Script', cursive; font-size: 1.5rem; line-height: 1.1; color: #3B1C32; text-align: center; padding: 12px 8px 6px; min-height: 2.2em; } /* --- Reactions --- */ .ct-mw-react { display: flex; justify-content: center; gap: 6px; padding: 4px 8px 14px; } .ct-react { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid #ece7df; border-radius: 999px; background: #faf8f5; cursor: pointer; font-size: 0.82rem; font-weight: 700; color: #6b6b6b; transition: transform .15s ease, background .2s ease, border-color .2s ease; -webkit-tap-highlight-color: transparent; } .ct-react:hover { background: #fff; border-color: #d4c9b6; transform: translateY(-2px); } .ct-react:active { transform: scale(.9); } .ct-react-emoji { font-size: 1rem; line-height: 1; } .ct-react.is-reacted { background: #fff4e6; border-color: #C9A24B; color: #3B1C32; } .ct-react-n { font-variant-numeric: tabular-nums; min-width: 1ch; } /* count pop */ .ct-react-n.bump { animation: ctReactBump .4s ease; } @keyframes ctReactBump { 0% { transform: scale(1); } 40% { transform: scale(1.5); color: #C9A24B; } 100% { transform: scale(1); } } /* --- Floating reactions (burst + ambient live stream) --- */ .ct-float-emoji { position: fixed; z-index: 9998; pointer-events: none; font-size: 1.6rem; will-change: transform, opacity; animation: ctFloatUp var(--dur, 2.4s) cubic-bezier(.4,0,.6,1) forwards; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); } @keyframes ctFloatUp { 0% { transform: translateY(0) translateX(0) scale(.6) rotate(0); opacity: 0; } 12% { opacity: 1; transform: translateY(-10px) scale(1.1); } 100% { transform: translateY(var(--rise, -220px)) translateX(var(--drift, 0)) scale(1) rotate(var(--spin, 12deg)); opacity: 0; } } .ct-mw-live { position: absolute; inset: 0; pointer-events: none; z-index: 2; } @media (prefers-reduced-motion: reduce) { .ct-float-emoji { animation-duration: .01s; opacity: 0; } .ct-mw-card, .ct-mw-photo img { transition: none; } } /* ============================================================ About — Achievements & Recognition ============================================================ */ .ct-ach-tab { padding: 7px 18px; border: 1px solid #e5ded3; border-radius: 999px; background: #fff; color: #6b6b6b; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: all .25s ease; } .ct-ach-tab:hover { border-color: #C9A24B; color: #3B1C32; } .ct-ach-tab.is-active { background: #3B1C32; border-color: #3B1C32; color: #fff; } /* --- Museum "exhibit wall" --- */ .ct-ach { position: relative; } /* warm wall wash + soft vignette so framed pieces feel gallery-lit */ .ct-ach::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.6), transparent 60%), radial-gradient(120% 90% at 50% 100%, rgba(42,17,36,0.06), transparent 55%); pointer-events: none; } .ct-ach > * { position: relative; z-index: 1; } .ct-ach-card { position: relative; padding-top: 14px; /* room for the hanging nail */ transition: transform .4s cubic-bezier(.2,.8,.2,1); } .ct-ach-card:hover { transform: translateY(-8px); } /* hanging nail + faint wire */ .ct-ach-nail { position: absolute; top: 0; left: 50%; width: 8px; height: 8px; transform: translateX(-50%); background: radial-gradient(circle at 35% 30%, #6b6b6b, #1c1c1c); border-radius: 50%; box-shadow: 0 2px 3px rgba(0,0,0,0.4); z-index: 3; } .ct-ach-nail::before { content: ""; position: absolute; top: 6px; left: 50%; width: 60px; height: 22px; transform: translateX(-50%); border: 1px solid rgba(42,17,36,0.18); border-bottom: none; border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: -1; } /* gold frame + cream matting */ .ct-ach-frame { position: relative; padding: 14px; background: #fbf8f2; border: 3px solid #C9A24B; border-radius: 2px; box-shadow: 0 0 0 1px #E7D4A0 inset, 0 1px 0 2px rgba(255,255,255,0.4) inset, 0 22px 44px rgba(42,17,36,0.20), 0 4px 10px rgba(0,0,0,0.10); transition: box-shadow .4s ease; } .ct-ach-card:hover .ct-ach-frame { box-shadow: 0 0 0 1px #E7D4A0 inset, 0 0 0 4px rgba(201,162,75,0.25), 0 34px 60px rgba(42,17,36,0.28), 0 6px 14px rgba(0,0,0,0.14); } .ct-ach-photo { display: block; width: 100%; position: relative; line-height: 0; cursor: zoom-in; overflow: hidden; background: #ece7df; border: 1px solid #e3d8bf; box-shadow: 0 2px 8px rgba(0,0,0,0.12) inset; } .ct-ach-photo img { display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .ct-ach-card:hover .ct-ach-photo img { transform: scale(1.05); } /* spotlight sheen sweeping the piece on hover */ .ct-ach-glow { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%); opacity: 0; transform: translateX(-30%); transition: opacity .5s ease, transform .8s ease; pointer-events: none; } .ct-ach-card:hover .ct-ach-glow { opacity: 1; transform: translateX(30%); } /* wax-seal / award ribbon */ .ct-ach-seal { position: absolute; top: -12px; right: -10px; z-index: 4; padding: 6px 13px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: #3B1C32; border: 1px solid rgba(255,255,255,0.5); border-radius: 3px; transform: rotate(3deg); box-shadow: 0 6px 14px rgba(0,0,0,0.22); } .ct-ach-seal::after { content: ""; position: absolute; left: 14px; bottom: -7px; border-width: 7px 6px 0; border-style: solid; border-color: currentColor transparent transparent; color: inherit; filter: brightness(.8); } .ct-ach-seal--certificate { background: linear-gradient(135deg, #C9A24B, #E7D4A0); color: #2A1124; text-shadow: 0 1px 0 rgba(255,255,255,0.4); } .ct-ach-seal--exhibition { background: linear-gradient(135deg, #3B1C32, #5a2b4c); } .ct-ach-seal--workshop { background: linear-gradient(135deg, #2A1124, #4a2340); } /* engraved brass plaque */ .ct-ach-plaque { display: block; width: max-content; max-width: 90%; margin: 16px auto 0; padding: 8px 20px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; text-align: center; color: #2A1124; background: linear-gradient(160deg, #E7D4A0 0%, #C9A24B 45%, #b8923f 55%, #E7D4A0 100%); border-radius: 3px; box-shadow: 0 4px 10px rgba(42,17,36,0.22), 0 1px 0 rgba(255,255,255,0.5) inset; text-shadow: 0 1px 0 rgba(255,255,255,0.35); position: relative; } /* little brass screws on the plaque */ .ct-ach-plaque::before, .ct-ach-plaque::after { content: ""; position: absolute; top: 50%; width: 4px; height: 4px; transform: translateY(-50%); background: radial-gradient(circle at 35% 30%, #fff6dc, #8a6d28); border-radius: 50%; } .ct-ach-plaque::before { left: 7px; } .ct-ach-plaque::after { right: 7px; } @media (prefers-reduced-motion: reduce) { .ct-ach-card, .ct-ach-photo img, .ct-ach-frame, .ct-ach-glow { transition: none; } } /* ============================================================ Varmala Preservation — Indian wedding theme ============================================================ */ /* Hero */ .ct-vm-hero { background: radial-gradient(130% 110% at 50% -10%, #5a2b4c 0%, #3B1C32 45%, #2A1124 100%); } .ct-vm-rule { display:inline-block; width:34px; height:1px; background:#C9A24B; } /* Blocksy forces a dark heading colour; override so the hero title is readable. */ .ct-vm-hero h1 { color:#FBF7F3 !important; } .ct-vm-hero h1 em { color:#E8C46A !important; font-style:italic; font-weight:400; } .ct-vm-hero p { color:rgba(251,247,243,0.85) !important; } /* Section headings on light bg also inherit Blocksy dark — keep them aubergine. */ #ct-varmala h2 { color:#3B1C32; } .ct-vm-benefits h2, .ct-vm-benefits h3 { color:#fff !important; } .ct-vm-benefits h3 { color:#E8C46A !important; } /* mandala corners */ .ct-vm-mandala { position:absolute; width:300px; height:300px; opacity:.10; pointer-events:none; background: repeating-conic-gradient(#E7D4A0 0deg 4deg, transparent 4deg 12deg), radial-gradient(circle, transparent 26%, #E7D4A0 27%, transparent 29%, #E7D4A0 40%, transparent 42%, #E7D4A0 54%, transparent 56%); border-radius:50%; } .ct-vm-mandala--tl { top:-120px; left:-120px; } .ct-vm-mandala--br { bottom:-120px; right:-120px; } /* falling petals */ .ct-vm-petals { position:absolute; inset:0; overflow:hidden; pointer-events:none; } .ct-vm-petal { position:absolute; top:-24px; width:14px; height:14px; background: radial-gradient(circle at 30% 30%, #F2C14E, #E8A13A); border-radius: 0 100% 0 100%; opacity:0; animation: ctVmFall linear infinite; } @keyframes ctVmFall { 0% { transform: translateY(0) translateX(0) rotate(0); opacity:0; } 8% { opacity:.9; } 100% { transform: translateY(760px) translateX(40px) rotate(400deg); opacity:.15; } } .ct-vm-petal:nth-child(1){ left:5%; animation-duration:9s; animation-delay:0s; background:radial-gradient(circle at 30% 30%,#F2C14E,#E8A13A);} .ct-vm-petal:nth-child(2){ left:14%; animation-duration:11s; animation-delay:-3s; background:radial-gradient(circle at 30% 30%,#EE8FA6,#C74B6D);} .ct-vm-petal:nth-child(3){ left:23%; animation-duration:8s; animation-delay:-6s; } .ct-vm-petal:nth-child(4){ left:32%; animation-duration:12s; animation-delay:-1s; background:radial-gradient(circle at 30% 30%,#EE8FA6,#C74B6D);} .ct-vm-petal:nth-child(5){ left:41%; animation-duration:10s; animation-delay:-4s; } .ct-vm-petal:nth-child(6){ left:50%; animation-duration:9s; animation-delay:-7s; } .ct-vm-petal:nth-child(7){ left:59%; animation-duration:13s; animation-delay:-2s; background:radial-gradient(circle at 30% 30%,#EE8FA6,#C74B6D);} .ct-vm-petal:nth-child(8){ left:68%; animation-duration:8s; animation-delay:-5s; } .ct-vm-petal:nth-child(9){ left:77%; animation-duration:11s; animation-delay:-9s; } .ct-vm-petal:nth-child(10){left:86%; animation-duration:10s; animation-delay:-3s; background:radial-gradient(circle at 30% 30%,#EE8FA6,#C74B6D);} .ct-vm-petal:nth-child(11){left:93%; animation-duration:12s; animation-delay:-6s; } .ct-vm-petal:nth-child(12){left:38%; animation-duration:14s; animation-delay:-8s; } /* toran (hanging garland divider) */ .ct-vm-toran { position:relative; display:flex; justify-content:center; align-items:flex-start; gap: clamp(14px, 5vw, 46px); padding: 24px 0 30px; background:#FBF7F3; } .ct-vm-toran::before { content:""; position:absolute; top:24px; left:6%; right:6%; height:2px; background: linear-gradient(90deg, transparent, #C9A24B 20%, #C9A24B 80%, transparent); } .ct-vm-toran-flower { position:relative; width:18px; height:18px; margin-top:40px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #F2C14E, #E8A13A); box-shadow: 0 2px 5px rgba(0,0,0,.14); } .ct-vm-toran-flower::before { content:""; position:absolute; left:50%; top:-40px; width:1px; height:40px; background:#C9A24B; transform:translateX(-50%); } .ct-vm-toran-flower::after { content:""; position:absolute; inset:5px; border-radius:50%; background:#C74B6D; } .ct-vm-toran-flower:nth-child(odd) { margin-top:52px; } .ct-vm-toran-flower:nth-child(odd)::before { top:-52px; height:52px; } .ct-vm-toran-flower:nth-child(5) { margin-top:64px; } .ct-vm-toran-flower:nth-child(5)::before { top:-64px; height:64px; } /* journey */ .ct-vm-step-node { position:relative; width:84px; height:84px; border-radius:50%; background:#fff; border:2px solid #E7D4A0; display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 26px rgba(201,162,75,.20); } .ct-vm-step-emoji { font-size:2rem; line-height:1; } .ct-vm-step-n { position:absolute; top:-8px; right:-8px; width:28px; height:28px; border-radius:50%; background:#3B1C32; color:#E7D4A0; font-family:'Cormorant Garamond',serif; font-weight:700; font-size:.72rem; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.2); } @media (min-width:1024px){ .ct-vm-step:not(:last-child)::after { content:""; position:absolute; top:41px; left:calc(50% + 52px); right:calc(-50% + 52px); border-top:2px dotted #C9A24B; } } /* gifts */ .ct-vm-gift-icon { display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%; font-size:2rem; background: linear-gradient(135deg,#f7f0ea,#ffffff); box-shadow: 0 8px 20px rgba(59,28,50,.08); } /* benefits */ .ct-vm-benefits { background: linear-gradient(135deg,#2A1124 0%, #3B1C32 55%, #4a2340 100%); } .ct-vm-benefits::before { content:""; position:absolute; inset:0; opacity:.06; pointer-events:none; background: repeating-conic-gradient(from 0deg at 50% 50%, #E7D4A0 0deg 3deg, transparent 3deg 14deg); } /* showcase wall (uniform-height photo grid) */ .ct-vm-wall-item { position:relative; display:block; width:100%; padding:0; aspect-ratio: 3 / 4; /* every tile the same height */ border-radius:16px; overflow:hidden; background:#f5f4f2; line-height:0; cursor:zoom-in; box-shadow: 0 10px 28px rgba(59,28,50,.10); border:1px solid #efe4d7; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; } .ct-vm-wall-item:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(59,28,50,.20); } .ct-vm-wall-item img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .7s cubic-bezier(.2,.8,.2,1); } .ct-vm-wall-item:hover img { transform: scale(1.07); } /* hover overlay + zoom cue */ .ct-vm-wall-overlay { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; background: linear-gradient(to top, rgba(42,17,36,.55), rgba(42,17,36,0) 45%); opacity:0; transition:opacity .35s ease; } .ct-vm-wall-overlay i { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.18); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.4); transform:scale(.8); transition:transform .35s ease; } .ct-vm-wall-item:hover .ct-vm-wall-overlay { opacity:1; } .ct-vm-wall-item:hover .ct-vm-wall-overlay i { transform:scale(1); } @media (prefers-reduced-motion: reduce){ .ct-vm-wall-item, .ct-vm-wall-item img { transition:none; } } /* form skin — soften Fluent Forms buttons to gold */ .ct-vm-form .ff-btn-submit, .ct-vm-form button[type="submit"] { background:#C9A24B !important; color:#2A1124 !important; border:none !important; } .ct-vm-form .ff-btn-submit:hover, .ct-vm-form button[type="submit"]:hover { background:#b8923f !important; } @media (prefers-reduced-motion: reduce){ .ct-vm-petal { animation:none; opacity:0; } .ct-vm-gift, .ct-vm-step-node { transition:none; } } /* ============================================================ Birth-flower month finder ============================================================ */ .ct-finder-months { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:640px; margin:0 auto 28px; } @media (min-width:640px){ .ct-finder-months { grid-template-columns:repeat(6,1fr); } } .ct-finder-month { display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 6px; border:1px solid #eae0d4; border-radius:14px; background:#fff; cursor:pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .ct-finder-month:hover { transform:translateY(-3px); border-color:#C9A24B; box-shadow:0 8px 20px rgba(59,28,50,.10); } .ct-finder-month.is-active { background:#3B1C32; border-color:#3B1C32; } .ct-finder-month.is-active .ct-finder-month-name { color:#E7D4A0; } .ct-finder-month-emoji { font-size:1.3rem; line-height:1; } .ct-finder-month-name { font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#6b6b6b; } .ct-finder-result { min-height:80px; text-align:center; } .ct-finder-hint { color:#6b6b6b; font-size:.95rem; } .ct-finder-empty { color:#6b6b6b; font-size:.95rem; max-width:32rem; margin:0 auto; } .ct-finder-empty a { color:#3B1C32; text-decoration:underline; } .ct-finder-flower { display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px; margin-bottom:24px; background:linear-gradient(135deg,#fbf7f3,#f7f0ea); border:1px solid #eae0d4; border-radius:18px; } .ct-finder-flower-emoji { font-size:2rem; line-height:1; } .ct-finder-flower-label { font-size:.65rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#999; } .ct-finder-flower-name { font-family:'Cormorant Garamond',serif; font-size:1.9rem; font-weight:600; color:#3B1C32; line-height:1.1; } .ct-finder-flower-note { font-size:.9rem; color:#6b6b6b; font-style:italic; } .ct-finder-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } @media (min-width:768px){ .ct-finder-grid { grid-template-columns:repeat(4,1fr); } } .ct-finder-card { display:block; text-align:left; background:#fff; border:1px solid #f0e7dc; border-radius:14px; overflow:hidden; text-decoration:none; transition:transform .3s ease, box-shadow .3s ease; } .ct-finder-card:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(59,28,50,.14); } .ct-finder-card-img { display:block; aspect-ratio:1/1; background:#f5f4f2; overflow:hidden; } .ct-finder-card-img img { width:100%; height:100%; object-fit:cover; display:block; } .ct-finder-card-title { display:block; padding:10px 12px 2px; font-family:'Cormorant Garamond',serif; font-size:1rem; font-weight:600; color:#0a0a0a; line-height:1.25; } .ct-finder-card-price { display:block; padding:0 12px 12px; font-size:.85rem; font-weight:700; color:#3B1C32; } /* ============================================================ Festival capsule band ============================================================ */ .ct-festival { background:linear-gradient(135deg,#2A1124 0%,#3B1C32 55%,#5a2b4c 100%); } .ct-festival-glow { position:absolute; inset:0; pointer-events:none; opacity:.5; background: radial-gradient(50% 60% at 15% 20%, rgba(201,162,75,.28), transparent 60%), radial-gradient(45% 60% at 85% 80%, rgba(232,161,58,.22), transparent 60%); } .ct-festival-dot { width:7px; height:7px; border-radius:50%; background:#E8C46A; box-shadow:0 0 0 0 rgba(232,196,106,.7); animation:ctFestPulse 2s infinite; } @keyframes ctFestPulse { 0% { box-shadow:0 0 0 0 rgba(232,196,106,.7); } 70% { box-shadow:0 0 0 10px rgba(232,196,106,0); } 100% { box-shadow:0 0 0 0 rgba(232,196,106,0); } } .ct-festival-countdown { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .ct-festival h2 { color:#fff !important; } /* ============================================================ Gift mode (checkout) ============================================================ */ .ct-gift-block { margin:20px 0; padding:18px 20px; background:#fbf7f3; border:1px solid #eae0d4; border-left:4px solid #C9A24B; border-radius:12px; } .ct-gift-toggle-row { margin:0 !important; } .ct-gift-toggle { display:flex; align-items:center; gap:10px; cursor:pointer; } .ct-gift-toggle input { width:18px; height:18px; accent-color:#C9A24B; cursor:pointer; } .ct-gift-fields { margin-top:16px; } .ct-gift-fields[hidden] { display:none; } @media (prefers-reduced-motion: reduce){ .ct-finder-month, .ct-finder-card, .ct-sp-tile, .ct-sp-ach { transition:none; } .ct-festival-dot { animation:none; } } /* ============================================================ AI Keepsake Designer — stepped wizard + result modal ============================================================ */ .ct-kd-section { background:#f7f4ef; } .ct-kd-bg { position:absolute; inset:0; pointer-events:none; background: radial-gradient(40% 45% at 12% 10%, rgba(201,162,75,.10), transparent 62%), radial-gradient(38% 44% at 88% 82%, rgba(10,10,10,.045), transparent 62%); } .ct-kd-eyebrow { display:inline-flex; align-items:center; gap:9px; padding:7px 16px; border-radius:999px; background:#fff; border:1px solid #eae0d4; color:#C9A24B; font-size:.64rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; } .ct-kd-eyebrow-dot { width:6px; height:6px; border-radius:50%; background:#C9A24B; animation:ctKDPulse 2.4s infinite; } @keyframes ctKDPulse { 0% { box-shadow:0 0 0 0 rgba(201,162,75,.55); } 70% { box-shadow:0 0 0 8px rgba(201,162,75,0); } 100% { box-shadow:0 0 0 0 rgba(201,162,75,0); } } .ct-kd-section h2 { color:#0a0a0a !important; } .ct-kd-gold { color:#C9A24B !important; font-style:italic; font-weight:400; } /* panel */ .ct-kd-form { position:relative; background:#fff; border:1px solid #eae0d4; border-radius:20px; padding:0 0 24px; box-shadow:0 14px 50px rgba(0,0,0,.06); overflow:hidden; } /* progress */ .ct-kd-head { padding:22px 24px 0; } @media (min-width:640px){ .ct-kd-head { padding:26px 34px 0; } } .ct-kd-progress { height:3px; background:#f0ebe3; border-radius:999px; overflow:hidden; } .ct-kd-progress-bar { display:block; height:100%; width:0; background:linear-gradient(90deg,#C9A24B,#E7D4A0); transition:width .45s cubic-bezier(.2,.8,.2,1); } .ct-kd-progress-meta { display:flex; align-items:center; justify-content:space-between; margin-top:10px; font-size:.65rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#b0aaa2; } .ct-kd-dots { display:flex; gap:6px; } .ct-kd-dot { width:6px; height:6px; border-radius:50%; background:#e5ded3; transition:all .3s ease; } .ct-kd-dot.is-done { background:#C9A24B; } .ct-kd-dot.is-on { background:#0a0a0a; transform:scale(1.4); } /* slides */ .ct-kd-slides { position:relative; padding:26px 24px 8px; min-height:290px; } @media (min-width:640px){ .ct-kd-slides { padding:32px 34px 8px; min-height:270px; } } .ct-kd-slide { display:none; } .ct-kd-slide.is-active { display:block; } .ct-kd-slide.from-right { animation:ctKDInRight .42s cubic-bezier(.2,.8,.2,1) both; } .ct-kd-slide.from-left { animation:ctKDInLeft .42s cubic-bezier(.2,.8,.2,1) both; } @keyframes ctKDInRight { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:none; } } @keyframes ctKDInLeft { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:none; } } .ct-kd-q { font-family:'Cormorant Garamond',serif; font-size:1.9rem; font-weight:600; color:#0a0a0a; line-height:1.15; margin-bottom:6px; } @media (min-width:640px){ .ct-kd-q { font-size:2.2rem; } } .ct-kd-sub { color:#999; font-size:.88rem; margin-bottom:20px; } .ct-kd-chips { display:flex; flex-wrap:wrap; gap:8px; } .ct-kd-chip { padding:10px 18px; border-radius:999px; cursor:pointer; background:#fff; border:1px solid #e5ded3; color:#4a4a4a; font-size:.85rem; font-weight:600; transition:all .22s ease; } .ct-kd-chip:hover { border-color:#C9A24B; color:#0a0a0a; transform:translateY(-2px); } .ct-kd-chip.is-on { background:#0a0a0a; border-color:#0a0a0a; color:#fff; font-weight:700; box-shadow:0 6px 16px rgba(0,0,0,.18); } .ct-kd-chip--month { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; font-size:.78rem; } .ct-kd-textarea { width:100%; padding:14px 16px; border-radius:12px; background:#faf9f7; border:1px solid #e5ded3; color:#1c1c1c; font-family:inherit; font-size:.95rem; line-height:1.6; resize:vertical; } .ct-kd-textarea::placeholder { color:#b0aaa2; } .ct-kd-textarea:focus { outline:none; border-color:#0a0a0a; background:#fff; } .ct-kd-count { display:block; text-align:right; margin-top:6px; font-size:.7rem; color:#b0aaa2; } .ct-kd-recap { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:16px; } .ct-kd-recap-label { font-size:.6rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#b0aaa2; margin-right:4px; } /* Blocksy's [type=submit]{display:inline-flex} ties in specificity with Tailwind's [hidden]{display:none} and loads later, so it wins — the wizard's submit button stays visible on every step. Force it back. */ .ct-kd [hidden] { display:none !important; } /* nav */ .ct-kd-nav { display:flex; align-items:center; gap:10px; padding:0 24px; flex-wrap:wrap; } @media (min-width:640px){ .ct-kd-nav { padding:0 34px; } } .ct-kd-nav-spacer { flex:1; } .ct-kd-back, .ct-kd-skip { background:none; border:none; cursor:pointer; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#999; padding:12px 4px; transition:color .2s ease; } .ct-kd-back:hover, .ct-kd-skip:hover { color:#0a0a0a; } .ct-kd-next, .ct-kd-submit { padding:14px 30px; border-radius:10px; cursor:pointer; background:#0a0a0a; border:2px solid #0a0a0a; color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; transition:all .3s ease; } .ct-kd-next:hover, .ct-kd-submit:hover { background:#fff; color:#0a0a0a; transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.12); } .ct-kd-submit:disabled { opacity:.55; cursor:wait; transform:none; background:#0a0a0a; color:#fff; } .ct-kd-submit.is-loading .ct-kd-submit-text::after { content:'…'; } .ct-kd-disclaimer { text-align:center; margin-top:16px; font-size:.72rem; color:#999; } /* ---------- result modal ---------- */ .ct-kd-modal { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:16px; } .ct-kd-modal[hidden] { display:none; } .ct-kd-modal-backdrop { position:absolute; inset:0; background:rgba(10,10,10,.62); backdrop-filter:blur(4px); opacity:0; transition:opacity .25s ease; } .ct-kd-modal.is-open .ct-kd-modal-backdrop { opacity:1; } .ct-kd-modal-panel { position:relative; z-index:1; display:flex; flex-direction:column; width:100%; max-width:640px; max-height:90vh; max-height:90dvh; overflow:hidden; background:#fff; border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.35); opacity:0; transform:translateY(24px) scale(.97); transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); } /* body scrolls; close button + actions stay put */ .ct-kd-result { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#ddd3c6 transparent; } .ct-kd-result::-webkit-scrollbar { width:8px; } .ct-kd-result::-webkit-scrollbar-track { background:transparent; } .ct-kd-result::-webkit-scrollbar-thumb { background:#e2d8ca; border-radius:99px; border:2px solid #fff; } .ct-kd-result::-webkit-scrollbar-thumb:hover { background:#C9A24B; } .ct-kd-modal.is-open .ct-kd-modal-panel { opacity:1; transform:none; } .ct-kd-modal-close { position:absolute; top:14px; right:16px; z-index:5; width:36px; height:36px; border-radius:50%; cursor:pointer; background:#f7f4ef; border:1px solid #eae0d4; color:#0a0a0a; font-size:1.4rem; line-height:1; transition:all .2s ease; } .ct-kd-modal-close:hover { background:#0a0a0a; color:#fff; border-color:#0a0a0a; } /* thinking */ .ct-kd-thinking { text-align:center; padding:64px 24px; } .ct-kd-orb { display:block; width:44px; height:44px; margin:0 auto 18px; border-radius:50%; border:2px solid #f0ebe3; border-top-color:#C9A24B; animation:ctKDSpin 1s linear infinite; } @keyframes ctKDSpin { to { transform:rotate(360deg); } } .ct-kd-thinking p { font-family:'Cormorant Garamond',serif; font-size:1.5rem; margin-bottom:6px; color:#0a0a0a; } .ct-kd-thinking-sub { font-size:.78rem; color:#999; } .ct-kd-error { margin:0; padding:56px 30px; text-align:center; color:#4a4a4a; font-size:.95rem; } /* concept card (inside modal) */ .ct-kd-card { padding:30px 22px 0; } @media (min-width:640px){ .ct-kd-card { padding:36px 36px 0; } } .ct-kd-card-badge { display:inline-block; padding:6px 14px; border-radius:999px; background:#f7f4ef; border:1px solid #eae0d4; color:#C9A24B; font-size:.6rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; } .ct-kd-card-name { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:600; color:#0a0a0a; line-height:1.12; margin:14px 0 6px; } @media (min-width:640px){ .ct-kd-card-name { font-size:2.5rem; } } .ct-kd-card-tagline { font-family:'Caveat','Segoe Script',cursive; font-size:1.45rem; color:#C9A24B; margin-bottom:14px; } .ct-kd-card-desc { color:#4a4a4a; line-height:1.75; margin-bottom:24px; } .ct-kd-specs { display:grid; gap:16px; padding:22px 0; border-top:1px solid #f0ebe3; border-bottom:1px solid #f0ebe3; } @media (min-width:640px){ .ct-kd-specs { grid-template-columns:repeat(2,1fr); gap:20px 28px; } } .ct-kd-spec > span { display:block; font-size:.6rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#999; margin-bottom:7px; } .ct-kd-spec strong { color:#0a0a0a; font-weight:600; font-size:.95rem; } .ct-kd-pills { display:flex; flex-wrap:wrap; gap:6px; } .ct-kd-pill { padding:5px 12px; border-radius:999px; font-size:.78rem; font-weight:600; background:#f7f4ef; color:#0a0a0a; border:1px solid #eae0d4; } .ct-kd-pill--color { background:#fff; } .ct-kd-meta { display:flex; flex-wrap:wrap; gap:28px; padding:22px 0; } .ct-kd-meta span { display:block; font-size:.6rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#999; margin-bottom:4px; } .ct-kd-price strong { font-family:'Cormorant Garamond',serif; font-size:1.6rem; color:#0a0a0a; font-weight:600; } .ct-kd-lead strong { font-size:1rem; color:#0a0a0a; font-weight:600; } .ct-kd-why { padding:14px 18px; border-radius:12px; margin-bottom:18px; background:#f7f4ef; border-left:3px solid #C9A24B; color:#5a5248; font-size:.9rem; line-height:1.6; font-style:italic; } .ct-kd-actions { position:sticky; bottom:0; z-index:3; display:flex; flex-wrap:wrap; gap:10px; margin:0 -22px; padding:16px 22px 10px; background:#fff; border-top:1px solid #f0ebe3; box-shadow:0 -10px 24px rgba(255,255,255,.95); } @media (min-width:640px){ .ct-kd-actions { margin:0 -36px; padding:18px 36px 10px; } } .ct-kd-cta { flex:1 1 220px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border-radius:10px; text-decoration:none; background:#25D366; color:#fff !important; font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; transition:all .3s ease; } .ct-kd-cta:hover { background:#1da851; transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,211,102,.28); } .ct-kd-again { padding:15px 24px; border-radius:10px; cursor:pointer; background:transparent; border:2px solid #0a0a0a; color:#0a0a0a; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; transition:all .3s ease; } .ct-kd-again:hover { background:#0a0a0a; color:#fff; } .ct-kd-note { position:sticky; bottom:0; z-index:3; margin:0 -22px; padding:0 22px 16px; background:#fff; text-align:center; font-size:.72rem; color:#999; } @media (min-width:640px){ .ct-kd-note { margin:0 -36px; padding:0 36px 18px; } } @media (prefers-reduced-motion: reduce){ .ct-kd-slide, .ct-kd-orb, .ct-kd-eyebrow-dot, .ct-kd-modal-panel, .ct-kd-modal-backdrop { animation:none; transition:none; } .ct-kd-chip, .ct-kd-next, .ct-kd-submit, .ct-kd-cta, .ct-kd-again { transition:none; } } /* Blocksy/Woo style generic