/* ===================================================================== JUST FOR YOU — PREMIUM THEME LAYER (theme.css) --------------------------------------------------------------------- NON-DESTRUCTIVE override layer. Loaded AFTER style.css. - Adds structured design tokens (--app-* dashboard, --lp-* landing). - 5 swappable presets via class: .theme-aurora (default), .theme-midnight, .theme-sunset, .theme-emerald, .theme-mono. - Re-maps the EXISTING variables (--gold, --glass-bg, --ink, --line…) so legacy components instantly adopt the new look — no rewrite. - Per-panel hue via [data-hue]. Glassmorphism, gradient headings, premium CTAs, adaptive charts, smooth micro-interactions. ===================================================================== */ :root { --font-ui: 'Plus Jakarta Sans', 'Inter Tight', system-ui, sans-serif; --font-display: 'Sora', 'Fraunces', serif; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); } /* ===================================================================== 1) HUE PALETTE — shared signature accents (per-panel colours) ===================================================================== */ :root { --cyan: 34, 211, 238; --mustard: 240, 180, 41; --green: 52, 211, 153; --rose: 251, 113, 133; --violet: 167, 139, 250; --pink: 244, 114, 182; --blue: 56, 189, 248; --indigo: 129, 140, 248; --purple: 192, 132, 252; --amber: 251, 191, 36; --teal: 45, 212, 191; --gold-rgb: 184, 147, 90; } /* ===================================================================== 2) PRESET TOKENS (default / .theme-aurora = Aurora) ===================================================================== */ :root, html.theme-aurora { --p-1: 34, 211, 238; --p-2: 167, 139, 250; --p-3: 244, 114, 182; --grad-h1: linear-gradient(135deg, #22d3ee 0%, #a78bfa 50%, #f472b6 100%); --grad-cta: linear-gradient(135deg, #8b5cf6, #ec4899); --grad-cta-hover: linear-gradient(135deg, #a78bfa, #f472b6); --glow: rgba(167, 139, 250, 0.45); --ring: rgba(34, 211, 238, 0.55); } html.theme-midnight { --p-1: 56, 189, 248; --p-2: 129, 140, 248; --p-3: 34, 211, 238; --grad-h1: linear-gradient(135deg, #38bdf8 0%, #818cf8 55%, #22d3ee 100%); --grad-cta: linear-gradient(135deg, #4f46e5, #0ea5e9); --grad-cta-hover: linear-gradient(135deg, #6366f1, #38bdf8); --glow: rgba(99, 102, 241, 0.45); --ring: rgba(56, 189, 248, 0.55); } html.theme-sunset { --p-1: 251, 191, 36; --p-2: 251, 113, 133; --p-3: 244, 114, 182; --grad-h1: linear-gradient(135deg, #fbbf24 0%, #fb7185 55%, #f472b6 100%); --grad-cta: linear-gradient(135deg, #f97316, #e11d48); --grad-cta-hover: linear-gradient(135deg, #fb923c, #fb7185); --glow: rgba(251, 113, 133, 0.45); --ring: rgba(251, 191, 36, 0.55); } html.theme-emerald { --p-1: 52, 211, 153; --p-2: 45, 212, 191; --p-3: 56, 189, 248; --grad-h1: linear-gradient(135deg, #34d399 0%, #2dd4bf 55%, #38bdf8 100%); --grad-cta: linear-gradient(135deg, #059669, #0891b2); --grad-cta-hover: linear-gradient(135deg, #10b981, #06b6d4); --glow: rgba(45, 212, 191, 0.4); --ring: rgba(52, 211, 153, 0.55); } html.theme-mono { --p-1: 99, 116, 145; --p-2: 71, 85, 105; --p-3: 148, 163, 184; --grad-h1: linear-gradient(135deg, #0f172a 0%, #475569 60%, #64748b 100%); --grad-cta: linear-gradient(135deg, #0f172a, #475569); --grad-cta-hover: linear-gradient(135deg, #1e293b, #64748b); --glow: rgba(99, 116, 145, 0.3); --ring: rgba(99, 116, 145, 0.5); } /* Mono in DARK mode: lift accents so headings / CTA stay legible on dark */ html.dark.theme-mono { --p-1: 148, 163, 184; --p-2: 148, 163, 184; --p-3: 203, 213, 225; --grad-h1: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 60%, #cbd5e1 100%); --grad-cta: linear-gradient(135deg, #475569, #94a3b8); --grad-cta-hover: linear-gradient(135deg, #64748b, #cbd5e1); --glow: rgba(148, 163, 184, 0.4); --ring: rgba(148, 163, 184, 0.5); } /* ===================================================================== 3) LIGHT MODE base surfaces (default — no .dark) ===================================================================== */ :root { --app-bg: #f5f7fb; --app-bg-grad: radial-gradient(1100px 620px at 12% -8%, rgba(var(--p-1), 0.1), transparent 60%), radial-gradient(960px 560px at 108% 4%, rgba(var(--p-3), 0.1), transparent 60%), linear-gradient(180deg, #f7f9fd, #eef2f9); --app-panel: rgba(255, 255, 255, 0.78); --app-panel-2: rgba(248, 250, 254, 0.92); --app-border: rgba(99, 116, 145, 0.18); --app-border-strong: rgba(99, 116, 145, 0.3); --app-text: #0f172a; --app-text-muted: #475569; --app-text-dim: #6b7689; --app-shadow: 0 18px 48px -22px rgba(15, 23, 42, 0.3); --app-blur: 16px; --lp-bg: #f7f9fd; --lp-panel: rgba(255, 255, 255, 0.8); --lp-text: #0f172a; --lp-muted: #475569; /* ---- Re-map legacy variables ---- */ --cream: var(--app-bg); --ink: var(--app-text); --muted: var(--app-text-muted); --line: var(--app-border); --soft: rgba(99, 116, 145, 0.12); --gold: rgb(var(--p-2)); --gold-soft: rgba(var(--p-2), 0.6); --olive: rgb(var(--p-2)); --olive-2: rgb(var(--p-2)); --glass-bg: var(--app-panel); --glass-brd: var(--app-border); --glass-shadow: var(--app-shadow); /* ---- Dashboard / membership console tokens (previously undefined → hardcoded light fallbacks caused contrast bugs). Now theme-aware. ---- */ --ds-bg: var(--app-bg); --ds-card: #ffffff; --ds-border: var(--app-border); --ds-text: var(--app-text); --ds-muted: var(--app-text-muted); --ds-soft: rgba(99, 116, 145, 0.1); /* Solid surface + soft text (used by Theme Studio modals & cards) */ --app-surface: #ffffff; --app-surface-2: #f4f6fb; --app-text-soft: var(--app-text-muted); } /* ===================================================================== 4) DARK MODE base surfaces — rich, layered ===================================================================== */ html.dark { --app-bg: #0a0f1a; --app-bg-grad: radial-gradient(1200px 680px at 8% -10%, rgba(var(--p-1), 0.16), transparent 60%), radial-gradient(1000px 620px at 110% 0%, rgba(var(--p-3), 0.14), transparent 60%), radial-gradient(900px 600px at 50% 120%, rgba(var(--p-2), 0.12), transparent 60%), linear-gradient(180deg, #0a0f1a, #070b14); --app-panel: rgba(15, 23, 36, 0.78); --app-panel-2: rgba(20, 28, 42, 0.85); --app-border: rgba(120, 140, 180, 0.14); --app-border-strong: rgba(140, 170, 220, 0.24); --app-text: #e6edf7; --app-text-muted: #8a96aa; --app-text-dim: #5f6a7e; --app-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7); --lp-bg: #0a0f1a; --lp-panel: rgba(15, 23, 36, 0.8); --lp-text: #e6edf7; --lp-muted: #8a96aa; --cream: var(--app-bg); --ink: var(--app-text); --muted: var(--app-text-muted); --line: var(--app-border); --soft: rgba(120, 140, 180, 0.16); --gold: rgb(var(--p-2)); --gold-soft: rgba(var(--p-2), 0.7); --olive: rgb(var(--p-2)); --olive-2: rgb(var(--p-2)); --glass-bg: var(--app-panel); --glass-brd: var(--app-border); --glass-shadow: var(--app-shadow); /* Dashboard / membership console tokens — dark variants */ --ds-bg: var(--app-bg); --ds-card: #141c2a; --ds-border: var(--app-border); --ds-text: var(--app-text); --ds-muted: var(--app-text-muted); --ds-soft: rgba(120, 140, 180, 0.12); /* Solid surface + soft text (used by Theme Studio modals & cards) */ --app-surface: #121a29; --app-surface-2: #0d1422; --app-text-soft: var(--app-text-muted); } /* ===================================================================== 5) GLOBAL SURFACE ===================================================================== */ body { background: var(--app-bg-grad) fixed !important; color: var(--app-text); font-family: var(--font-ui); } /* Page-wide TOP GLOW (fixed): a single ambient gradient pinned to the very top of the viewport so the area behind the floating header and the hero body share the exact same colour — no seam. Lives at body level (behind everything) so it never interferes with the sticky header. Only painted on the landing page. */ body.lp-page::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 760px; z-index: -1; pointer-events: none; background: radial-gradient(55% 70% at 18% 30%, rgba(var(--p-2), 0.24), transparent 62%), radial-gradient(48% 60% at 50% 6%, rgba(var(--p-1), 0.18), transparent 60%), radial-gradient(60% 75% at 88% 34%, rgba(245, 129, 31, 0.18), transparent 60%), radial-gradient(40% 50% at 78% 2%, rgba(var(--p-3), 0.15), transparent 60%); filter: blur(8px); } *::selection { background: rgba(var(--p-2), 0.28); } @keyframes appFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* NOTE: fill-mode must NOT be 'both'/'forwards' here — a retained transform on .ds-main turns it into a containing block and breaks position:fixed modals. */ .ds-main, .hero, .auth-card, .se-studio { animation: appFade 0.5s var(--ease) backwards; } /* ===================================================================== 6) GLASS PANELS — token-mapped ===================================================================== */ .glass, .bento-card, .adm-card, .ds-card { background: var(--app-panel); -webkit-backdrop-filter: blur(var(--app-blur)) saturate(150%); backdrop-filter: blur(var(--app-blur)) saturate(150%); border: 1px solid var(--app-border); box-shadow: var(--app-shadow); } /* ===================================================================== 7) PER-PANEL HUE — data-hue="cyan|violet|pink|green|…" ===================================================================== */ [data-hue] { --h: var(--p-2); } [data-hue='cyan'] { --h: var(--cyan); } [data-hue='violet'] { --h: var(--violet); } [data-hue='pink'] { --h: var(--pink); } [data-hue='green'] { --h: var(--green); } [data-hue='rose'] { --h: var(--rose); } [data-hue='mustard'] { --h: var(--mustard); } [data-hue='blue'] { --h: var(--blue); } [data-hue='indigo'] { --h: var(--indigo); } [data-hue='purple'] { --h: var(--purple); } [data-hue='amber'] { --h: var(--amber); } [data-hue='teal'] { --h: var(--teal); } .bento-card[data-hue], .adm-card[data-hue], .glass[data-hue] { border-color: rgba(var(--h), 0.3); background: radial-gradient(120% 100% at 0% 0%, rgba(var(--h), 0.12), transparent 55%), var(--app-panel); box-shadow: var(--app-shadow), inset 0 1px 0 rgba(var(--h), 0.14); } .bento-card[data-hue]:hover { transform: translateY(-5px); border-color: rgba(var(--h), 0.5); box-shadow: 0 26px 60px -24px rgba(var(--h), 0.5), inset 0 1px 0 rgba(var(--h), 0.2); } [data-hue] .bento-ico { background: rgba(var(--h), 0.16); color: rgb(var(--h)); box-shadow: inset 0 0 0 1px rgba(var(--h), 0.25); } [data-hue] .bento-num { color: var(--app-text); } [data-hue] .bento-bar span { background: linear-gradient(90deg, rgb(var(--h)), rgba(var(--h), 0.55)); } [data-hue] .bento-tag { color: rgba(var(--h), 0.95); } /* KPI / stat cards reuse the same hue language */ .rsvp-stat[data-hue] { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); } .rsvp-stat[data-hue]:hover { transform: translateY(-4px); border-color: rgba(var(--h), 0.5); box-shadow: 0 22px 50px -24px rgba(var(--h), 0.45); } .rsvp-stat[data-hue] .rs-num { color: rgb(var(--h)); } .rsvp-stat[data-hue] .rs-label { color: var(--app-text-muted); } /* --------------------------------------------------------------------- Command-center hero — theme-aware (fixes white-on-white in LIGHT mode). style.css hard-codes white text (#fff / #f0ecdf) which is invisible once the .glass token background turns light. Re-map every text colour to the theme tokens and give the panel a subtle green (status) hue tint. */ .cmd-center { background: radial-gradient(120% 100% at 0% 0%, rgba(var(--green), 0.12), transparent 55%), var(--app-panel) !important; border: 1px solid rgba(var(--green), 0.3) !important; color: var(--app-text) !important; } .cmd-title { color: var(--app-text) !important; } .cmd-right { color: var(--app-text-muted) !important; } .cmd-meta { color: var(--app-text-muted); } .cmd-meta strong { color: var(--app-text) !important; } .cmd-badge { background: rgba(var(--green), 0.16) !important; color: rgb(var(--green)) !important; border: 1px solid rgba(var(--green), 0.4) !important; } .cmd-btn { background: rgba(var(--p-2), 0.1) !important; border: 1px solid var(--app-border-strong) !important; color: var(--app-text) !important; } .cmd-btn:hover { background: rgba(var(--p-2), 0.2) !important; } /* ===================================================================== 8) GRADIENT HEADINGS + PREMIUM CTA ===================================================================== */ .grad-text, .lp-grad, .ds-pagehead h1.grad, .hero h1.grad { background: var(--grad-h1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .cta-grad { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; background: var(--grad-cta); color: #fff !important; border: none; border-radius: 14px; padding: 1rem 2.1rem; font-family: var(--font-ui); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; box-shadow: 0 12px 30px -10px var(--glow); transition: transform 0.35s var(--ease), box-shadow 0.35s, background 0.35s; } .cta-grad:hover { background: var(--grad-cta-hover); transform: translateY(-3px); box-shadow: 0 20px 44px -12px var(--glow); } .cta-grad::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-18deg); opacity: 0; } .cta-grad:hover::after { animation: btnSheen 0.9s ease forwards; } /* ===================================================================== 9) MAP EXISTING PREMIUM BUTTONS to current theme accent ===================================================================== */ .btn-gold { background: var(--grad-cta) !important; border-color: transparent !important; box-shadow: 0 8px 22px -10px var(--glow) !important; } .btn-gold:hover { background: var(--grad-cta-hover) !important; box-shadow: 0 16px 34px -12px var(--glow) !important; } .ds-btn.primary { background: var(--grad-cta); border-color: transparent; box-shadow: 0 8px 20px -10px var(--glow); } .ds-btn.primary:hover { background: var(--grad-cta-hover); } .btn-pill:hover, .btn-ghost:hover, .btn-outline:hover { background: var(--grad-cta); border-color: transparent; } /* ===================================================================== 10) COLOUR LEGEND / GLOSSARY ===================================================================== */ .hue-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; font-family: var(--font-ui); font-size: 0.74rem; color: var(--app-text-muted); margin: 0.2rem 0 1.1rem; } .hue-legend .hl { display: inline-flex; align-items: center; gap: 0.4rem; } .hue-legend .dot { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--h)); box-shadow: 0 0 0 3px rgba(var(--h), 0.18); } /* ===================================================================== 11) ADAPTIVE CHART VARS ===================================================================== */ :root { --chart-grid: rgba(99, 116, 145, 0.18); --chart-axis: #475569; --chart-label: #64748b; --chart-1: rgb(var(--p-1)); --chart-2: rgb(var(--p-2)); --chart-3: rgb(var(--p-3)); } html.dark { --chart-grid: rgba(140, 170, 220, 0.14); --chart-axis: #8a96aa; --chart-label: #8a96aa; } /* ===================================================================== 12) SKELETON LOADING ===================================================================== */ .skeleton { position: relative; overflow: hidden; background: var(--app-panel-2); border-radius: 12px; } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(var(--p-2), 0.14), transparent); transform: translateX(-100%); animation: skel 1.3s infinite; } @keyframes skel { 100% { transform: translateX(100%); } } /* ===================================================================== 13) FORMS, TABLES, surfaces — token tidy-ups ===================================================================== */ input, select, textarea { color: var(--app-text); } .ds-table th { color: var(--app-text-muted); } .ds-table td, .ds-table th { border-color: var(--app-border); } html.dark .ds-sidebar { background: linear-gradient(180deg, rgba(15, 23, 36, 0.92), rgba(10, 15, 26, 0.96)) !important; border-right: 1px solid var(--app-border); } html.dark .ds-topbar { background: rgba(10, 15, 26, 0.7) !important; border-bottom: 1px solid var(--app-border); } html.dark .nav { background: rgba(10, 15, 26, 0.72) !important; border-bottom: 1px solid var(--app-border); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; } /* ===================================================================== 14) THEME SWITCHER UI ===================================================================== */ .theme-pop { position: fixed; z-index: 1200; min-width: 230px; padding: 0.9rem; border-radius: 16px; background: var(--app-panel-2); border: 1px solid var(--app-border-strong); box-shadow: var(--app-shadow); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; transform: translateY(8px) scale(0.98); pointer-events: none; transition: 0.25s var(--ease); } .theme-pop.open { opacity: 1; transform: none; pointer-events: auto; } .theme-pop h4 { font: 600 0.7rem/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--app-text-dim); margin: 0.1rem 0 0.7rem; } .theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; } .theme-opt { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.6rem; border-radius: 11px; cursor: pointer; border: 1px solid var(--app-border); background: var(--app-panel); color: var(--app-text); font: 500 0.8rem/1 var(--font-ui); transition: 0.2s var(--ease); } .theme-opt:hover { border-color: var(--app-border-strong); transform: translateY(-1px); } .theme-opt.active { border-color: rgb(var(--p-2)); box-shadow: 0 0 0 2px rgba(var(--p-2), 0.35); } .theme-opt .sw { display: inline-flex; width: 34px; height: 18px; border-radius: 6px; overflow: hidden; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } .theme-opt .sw i { flex: 1; height: 100%; } .theme-row { display: flex; gap: 0.5rem; margin-top: 0.7rem; } .theme-mode { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.55rem; border-radius: 11px; border: 1px solid var(--app-border); background: var(--app-panel); color: var(--app-text); cursor: pointer; font: 600 0.76rem var(--font-ui); transition: 0.2s; } .theme-mode.active { border-color: rgb(var(--p-2)); color: rgb(var(--p-2)); box-shadow: 0 0 0 2px rgba(var(--p-2), 0.3); } #theme-cat-btn { margin-left: 0.2rem; } /* inline settings picker */ .theme-mode-row { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.2rem; } .theme-mode-seg { display: inline-flex; gap: 0.3rem; padding: 0.3rem; border-radius: 13px; border: 1px solid var(--app-border); background: var(--app-panel); } .theme-mode-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem; border-radius: 10px; border: none; background: transparent; color: var(--app-text-muted); cursor: pointer; font: 600 0.8rem var(--font-ui); transition: 0.2s var(--ease); } .theme-mode-btn:hover { color: var(--app-text); } .theme-mode-btn.active { background: var(--grad-cta); color: #fff; box-shadow: 0 8px 20px -8px var(--glow); } .theme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.85rem; margin-top: 0.6rem; } .theme-cardp { position: relative; text-align: left; cursor: pointer; border-radius: 15px; padding: 0.95rem; border: 1px solid var(--app-border); background: var(--app-panel); transition: 0.22s var(--ease); display: block; width: 100%; } .theme-cardp:hover { transform: translateY(-3px); border-color: var(--app-border-strong); box-shadow: var(--app-shadow); } .theme-cardp.active { border-color: rgb(var(--p-2)); box-shadow: 0 0 0 2px rgba(var(--p-2), 0.35), var(--app-shadow); } .theme-swatch { display: flex; height: 34px; border-radius: 10px; overflow: hidden; margin-bottom: 0.7rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .theme-swatch i { flex: 1; height: 100%; } .theme-cardp-name { display: block; font: 700 0.92rem var(--font-display); color: var(--app-text); letter-spacing: -0.01em; } .theme-cardp-desc { display: block; font: 500 0.76rem/1.35 var(--font-ui); color: var(--app-text-muted); margin-top: 0.2rem; } .theme-cardp-check { position: absolute; top: 0.7rem; right: 0.7rem; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #fff; background: var(--grad-cta); opacity: 0; transform: scale(0.6); transition: 0.2s var(--ease); } .theme-cardp.active .theme-cardp-check { opacity: 1; transform: scale(1); } /* ===================================================================== 16) LANDING PAGE premium polish (presentation only) ===================================================================== */ .hero h1.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } .lp-badge { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 1rem; border-radius: 999px; font: 600 0.72rem/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--app-text-muted); background: var(--app-panel); border: 1px solid var(--app-border); margin-bottom: 1.6rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .lp-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--p-1)); box-shadow: 0 0 0 4px rgba(var(--p-1), 0.2); animation: lpPulse 2.4s ease-in-out infinite; } @keyframes lpPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(var(--p-1), 0.18); } 50% { box-shadow: 0 0 0 7px rgba(var(--p-1), 0.06); } } /* ---- Event-type strip (UI UX Pro Max-style display row) -------------- */ /* A full-width, single straight row that sits right under the header, above the hero badge. Chips are display-only (decoration) — the icon still turns orange on hover, exactly like the reference. The row is centred and scrolls horizontally on narrow viewports so it always stays in one straight line. */ .lp-eventbar { position: relative; z-index: 2; padding: 0.9rem clamp(1rem, 5vw, 3rem) 0.3rem; } .lp-events { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0.55rem; margin: 0; --lp-orange: #f5811f; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 0.25rem 0; } .lp-events::-webkit-scrollbar { display: none; } .lp-event-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--app-border); background: var(--app-panel); color: var(--app-text); font: 600 0.82rem/1 var(--font-ui); transition: 0.2s var(--ease); white-space: nowrap; flex: 0 0 auto; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .lp-event-chip i { font-size: 0.82rem; color: var(--app-text-dim); transition: color 0.2s var(--ease), transform 0.2s var(--ease); } .lp-event-chip:hover { border-color: rgba(245, 129, 31, 0.5); transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(245, 129, 31, 0.5); } .lp-event-chip:hover i { color: var(--lp-orange); transform: scale(1.1); } .lp-event-chip.active { border-color: rgba(245, 129, 31, 0.6); background: linear-gradient(135deg, rgba(245, 129, 31, 0.14), rgba(245, 129, 31, 0.05)); color: var(--app-text); } .lp-event-chip.active i { color: var(--lp-orange); } /* the duplicated marquee track is hidden on desktop (only used for mobile loop) */ .lp-events-dupe { display: none; } @media (max-width: 980px) { .lp-events { justify-content: flex-start; } } /* ---- MOBILE-ONLY auto-scroll (marquee) for the event-type categories ---- On phones the chips quietly glide left in a seamless loop. We duplicate the chip set (.lp-events-dupe) so the translate can wrap with no visible gap. Pauses on touch/hover so guests can read a specific category. */ @media (max-width: 760px) { .lp-eventbar { overflow: hidden; } .lp-events { flex-wrap: nowrap; justify-content: flex-start; overflow: visible; width: max-content; animation: lpEventsMarquee 22s linear infinite; will-change: transform; } .lp-events:hover, .lp-events:active { animation-play-state: paused; } .lp-events-dupe { display: inline-flex; align-items: center; gap: 0.55rem; flex: 0 0 auto; margin-left: 0.55rem; } } @keyframes lpEventsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .lp-events { animation: none !important; } } .lp-theme-btn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--app-border); background: var(--app-panel); color: var(--app-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: 0.2s var(--ease); } .lp-theme-btn:hover { border-color: rgb(var(--p-2)); color: rgb(var(--p-2)); transform: translateY(-1px); } /* steps / features / pricing become glass cards */ .steps .step, .features .feature, .pricing .price-card { border-radius: 18px; padding: 1.8rem; transition: 0.3s var(--ease); } .steps .step:hover, .features .feature:hover { transform: translateY(-5px); border-color: rgba(var(--h, var(--p-2)), 0.5); box-shadow: 0 26px 60px -24px rgba(var(--h, var(--p-2)), 0.5); } .steps .step span { font-family: var(--font-display); font-size: 2rem; color: rgb(var(--h, var(--p-2))); font-weight: 600; } .steps .step h3, .features .feature h3 { color: var(--app-text); margin: 0.5rem 0 0.5rem; } .steps .step p, .features .feature p { color: var(--app-text-muted); } .feat-ico { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: rgba(var(--h, var(--p-2)), 0.16); color: rgb(var(--h, var(--p-2))); font-size: 1.25rem; margin-bottom: 1rem; box-shadow: inset 0 0 0 1px rgba(var(--h, var(--p-2)), 0.25); } .pricing .price-card h3 { color: var(--app-text); } .pricing .price-card .price { color: var(--app-text); font-family: var(--font-display); font-weight: 600; } .pricing .price-card ul li { color: var(--app-text-muted); } .pricing .price-card.featured { border-color: rgba(var(--p-2), 0.55); box-shadow: 0 30px 70px -28px var(--glow); } .pricing .price-card.featured .ribbon { background: var(--grad-cta); color: #fff; } /* nav + footer text readable on any theme */ .nav .brand, .nav nav a { color: var(--app-text); } .nav nav a:hover { color: rgb(var(--p-2)); } .site-footer { color: var(--app-text-muted); } .site-footer .brand { color: var(--app-text); } /* section headings adopt display font */ .section-head h2.display, .features h3.display, .hero .lede { font-family: var(--font-display); } /* ===================================================================== 18b) AUTH pages — premium split, glass card, gradient CTA ===================================================================== */ .auth-main { background: var(--app-bg-grad) !important; } html.dark .auth-main { background: var(--app-bg-grad) !important; } .auth-brand { background: radial-gradient(120% 120% at 0% 0%, rgba(var(--p-1), 0.18), transparent 55%), radial-gradient(120% 120% at 100% 100%, rgba(var(--p-3), 0.16), transparent 55%), var(--app-panel) !important; border-right: 1px solid var(--app-border) !important; backdrop-filter: blur(var(--app-blur)); } .auth-brand .brand-lg { color: var(--app-text); } .auth-tagline { color: var(--app-text-muted) !important; } .auth-card2.glass { background: var(--app-panel) !important; border: 1px solid var(--app-border) !important; box-shadow: var(--app-shadow), 0 0 0 1px rgba(var(--p-2), 0.08) !important; backdrop-filter: blur(var(--app-blur)); -webkit-backdrop-filter: blur(var(--app-blur)); animation: appFade 0.5s var(--ease) both; } .auth-h { color: var(--app-text); } .auth-h.grad-text { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } .auth-sub { text-align: center; color: var(--app-text-muted); margin: -1.2rem 0 1.8rem; font-size: 0.92rem; } .auth-form2 input { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html:not(.dark) .auth-form2 input { background: rgba(0, 0, 0, 0.02) !important; } .auth-form2 input:focus { border-color: rgba(var(--p-2), 0.7) !important; box-shadow: 0 0 0 3px var(--ring) !important; } .auth-form2 input::placeholder { color: var(--app-text-dim); } .auth-copy, .field-row, .auth-alt2 { color: var(--app-text-muted) !important; } .auth-alt2 a, .muted-link { color: rgb(var(--p-2)) !important; } .btn-enter { background: var(--grad-cta) !important; box-shadow: 0 10px 28px -10px var(--glow) !important; font-weight: 600; letter-spacing: 0.02em; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s; } .btn-enter:hover { transform: translateY(-2px); filter: brightness(1.05); background: var(--grad-cta-hover) !important; box-shadow: 0 16px 36px -12px var(--glow) !important; } .auth-theme-row { position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.4rem; align-items: center; } .auth-theme-btn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--app-border); background: rgba(var(--p-2), 0.1); color: rgb(var(--p-2)); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s var(--ease), background 0.2s; } .auth-theme-btn:hover { transform: translateY(-2px) rotate(-8deg); background: rgba(var(--p-2), 0.2); } .auth-card2 .theme-toggle { position: static; border: 1px solid var(--app-border); background: transparent; color: var(--app-text-muted); width: 38px; height: 38px; border-radius: 11px; cursor: pointer; } .auth-card2 .theme-toggle:hover { color: var(--app-text); border-color: rgba(var(--p-2), 0.5); } /* ===================================================================== 18) EDITOR / STUDIO polish — productivity surface, theme-consistent ===================================================================== */ html.dark .se-studio { background: var(--app-bg) !important; color: var(--app-text) !important; } html.dark .se-topbar { background: rgba(13, 19, 31, 0.86) !important; border-color: var(--app-border) !important; backdrop-filter: blur(var(--app-blur)); -webkit-backdrop-filter: blur(var(--app-blur)); } html.dark .se-panel { background: var(--app-panel-2, rgba(13, 19, 31, 0.6)) !important; border-color: var(--app-border) !important; } html.dark .se-acc-head { color: var(--app-text) !important; } html.dark .se-input { background: rgba(255, 255, 255, 0.03) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html.dark .se-canvas { background: var(--app-bg-grad) !important; } html.dark .se-canvas-bar { background: rgba(13, 19, 31, 0.55) !important; border-color: var(--app-border) !important; } html.dark .se-canvas-url { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--app-border) !important; color: var(--app-text-muted) !important; } /* Accent: tools + focus use active preset hue (works in light + dark) */ .se-tool:hover { background: rgba(var(--p-2), 0.14) !important; color: rgb(var(--p-2)) !important; } .se-input:focus { border-color: rgba(var(--p-2), 0.7) !important; box-shadow: 0 0 0 3px var(--ring) !important; } .se-acc-ico { color: rgb(var(--p-2)); } .se-theme-chip { color: rgb(var(--p-2)); } .se-panel::-webkit-scrollbar-thumb { background: rgba(var(--p-2), 0.35) !important; } /* light-mode editor keeps clean paper but with themed accents (above rules apply) */ /* ---- Editor accents fully follow the active catalog theme palette ---- */ .se-rail-btn:hover { background: rgba(var(--p-2), 0.1) !important; color: rgb(var(--p-2)) !important; } .se-rail-btn.active { background: linear-gradient(135deg, rgba(var(--p-1), 0.2), rgba(var(--p-2), 0.14)) !important; color: rgb(var(--p-2)) !important; } .se-rail-btn.active i { filter: drop-shadow(0 2px 6px rgba(var(--p-2), 0.4)) !important; } .se-back:hover { background: rgba(var(--p-2), 0.12) !important; color: rgb(var(--p-2)) !important; } .se-title-input:hover { background: rgba(var(--p-2), 0.08) !important; } .se-title-input:focus { border-color: rgba(var(--p-2), 0.7) !important; box-shadow: 0 0 0 3px var(--ring) !important; } .se-theme-chip { background: rgba(var(--p-2), 0.1) !important; border-color: rgba(var(--p-2), 0.25) !important; } .se-palette:hover, .se-font:hover { border-color: rgba(var(--p-2), 0.7) !important; } .se-palette.active, .se-font.active { border-color: rgb(var(--p-2)) !important; box-shadow: 0 0 0 2px rgba(var(--p-2), 0.3) !important; } .se-font-sample { color: rgb(var(--p-2)) !important; } .se-canvas-url i { color: rgb(var(--p-1)) !important; } .se-savestate { color: rgb(var(--p-1)) !important; } .se-savestate.saving { color: rgb(var(--p-2)) !important; } .se-avatar { background: linear-gradient(135deg, rgb(var(--p-1)), rgb(var(--p-2))) !important; } .se-pane-head h2 { color: var(--app-text); } .se-pane-head p, .se-note, .se-help, .se-upstatus, .se-font-name { color: var(--app-text-muted); } .se-acc-title, .se-field label, .se-section-label { color: var(--app-text); } /* Light-mode editor surfaces use theme tokens so they re-tint subtly per preset */ html:not(.dark) .se-studio { background: var(--app-bg); } html:not(.dark) .se-topbar, html:not(.dark) .se-rail { background: #fff; border-color: var(--app-border); } html:not(.dark) .se-panel { background: color-mix(in srgb, rgb(var(--p-1)) 4%, #fff); border-color: var(--app-border); } html:not(.dark) .se-canvas { background: radial-gradient( circle at 50% 0%, color-mix(in srgb, rgb(var(--p-1)) 8%, #efe9dd), color-mix(in srgb, rgb(var(--p-2)) 6%, #e4ddcd) ); } html:not(.dark) .se-canvas-bar { background: rgba(255, 255, 255, 0.6); border-color: var(--app-border); } html:not(.dark) .se-input, html:not(.dark) .se-canvas-url { color: var(--app-text); } /* ===================================================================== 18b) EDITOR MOBILE — robust full-height Edit ⇄ Preview switcher ===================================================================== */ .se-mobtoggle { display: none; } @media (max-width: 780px) { /* Vertical stack: compact rail (tabs) on top, then ONE of panel/canvas. */ .se-workspace { flex-direction: column; position: relative; } /* Tabs as a WRAPPING GRID of cards — no horizontal scroll (Ronde 30d). Mirrors the reference's Umum/Tema/Audio card row: each tab is a little card with an icon over a label, and the ACTIVE tab shows a coloured underline bar. 3 per row → wraps cleanly regardless of tab count. */ .se-rail { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--app-border); padding: 0.6rem; overflow-x: visible; gap: 0.5rem; flex-shrink: 0; } .se-rail-spacer { display: none; } .se-rail-btn { flex-direction: column; gap: 0.35rem; width: 100%; padding: 0.7rem 0.4rem; white-space: nowrap; border-radius: 14px; background: var(--app-surface, #fff); border: 1px solid var(--app-border); position: relative; overflow: hidden; } html.dark .se-rail-btn { background: var(--app-surface-2, #0d1422); border-color: var(--app-border); } .se-rail-btn i { font-size: 1.05rem; } .se-rail-btn span { display: inline; font-size: 0.64rem; } /* coloured underline bar on the active tab (like the reference cards) */ .se-rail-btn.active::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, rgb(var(--p-1)), rgb(var(--p-2))); } .se-rail-btn.active { background: linear-gradient(135deg, rgba(var(--p-2), 0.14), rgba(var(--p-1), 0.08)); border-color: rgba(var(--p-2), 0.4); } /* Panel + canvas each fill the remaining height; we toggle which is shown. */ .se-panel { width: 100%; max-height: none; flex: 1; min-height: 0; border-right: none; border-bottom: none; padding: 1.1rem 1rem 6rem; -webkit-overflow-scrolling: touch; } .se-canvas { flex: 1; min-height: 0; } .se-canvas-url { display: none; } .se-title-input { width: clamp(90px, 32vw, 160px); } .se-top-center { display: none; } /* undo/redo/save chip — free up room */ .se-theme-chip { display: none; } .se-top-left { gap: 0.3rem; min-width: 0; flex: 1; } .se-titlewrap { min-width: 0; flex: 1; } .se-topbar { padding: 0 0.7rem; gap: 0.45rem; } .se-top-right { gap: 0.4rem; flex-shrink: 0; } /* Tidy header on mobile: Share + Publish become compact icon-only pills so nothing overflows off-screen (Ronde 30c). Avatar stays hidden to save room. */ .se-share-btn .se-btn-txt, .se-publish-btn .se-btn-txt { display: none; } .se-share-btn, .se-publish-btn { padding: 0.5rem 0.7rem; min-width: 0; } .se-avatar { display: none; } .se-tool-text { width: 34px; height: 34px; } .se-stage { padding: 1.2rem 0.6rem 6rem; } .se-device-frame.phone { width: min(360px, 92vw); height: auto; aspect-ratio: 390/760; } .se-device-frame.tablet { width: min(560px, 94vw); height: auto; aspect-ratio: 600/800; } .se-device-frame.full { width: 96%; height: auto; aspect-ratio: 390/760; } /* default view = edit (panel visible, canvas hidden) */ .se-studio[data-mobview='edit'] .se-canvas { display: none; } .se-studio[data-mobview='preview'] .se-panel { display: none; } /* floating toggle button */ .se-mobtoggle { display: inline-flex; align-items: center; gap: 0.5rem; position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 80; padding: 0.7rem 1.4rem; border: none; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 0.85rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, rgb(var(--p-1)), rgb(var(--p-2))); box-shadow: 0 10px 26px -8px rgba(var(--p-2), 0.6); } .se-mobtoggle:active { transform: translateX(-50%) scale(0.96); } } @media (max-width: 380px) { /* keep the label — the grid gives room; just tighten spacing */ .se-rail-btn { padding: 0.6rem 0.3rem; } .se-rail-btn span { font-size: 0.58rem; } .se-title-input { width: clamp(70px, 28vw, 120px); font-size: 0.95rem; } } /* ===================================================================== 19) LEGACY BRAND-COLOUR CLEANUP Neutralise leftover gold / olive / cream / brown that bypassed the legacy CSS variables (hard-coded hex / rgba). All re-mapped to the active theme tokens so nothing of the old palette shows through. ===================================================================== */ /* -- Old brown DARK surfaces → theme panel ---------------------------- */ html.dark .modal-card, html.dark .ds-cta, html.dark .ds-sidebar, html.dark .theme-card a, html.dark .kebab-menu, html.dark .stat-card, html.dark .inv-card, html.dark .auth-card2, html.dark .se-rail, html.dark .se-accordion, html.dark .se-palette, html.dark .se-font, html.dark .se-setting-card, html.dark .se-device-toggle { background: var(--app-panel) !important; border-color: var(--app-border) !important; } html.dark .se-title-input { color: var(--app-text) !important; } html.dark .se-title-input:focus { background: rgba(255, 255, 255, 0.04) !important; } html.dark .tut-art { background: linear-gradient(135deg, rgba(var(--p-1), 0.14), rgba(var(--p-3), 0.12)) !important; } .se-device-frame.phone, .se-device-frame.tablet { background: #0b0f17 !important; } /* -- Old gold gradient buttons → preset CTA gradient ------------------ */ .btn-solid, .btn-gold { background: var(--grad-cta) !important; border-color: transparent !important; box-shadow: 0 10px 26px -12px var(--glow) !important; color: #fff !important; } .btn-solid:hover, .btn-gold:hover { background: var(--grad-cta-hover) !important; box-shadow: 0 16px 34px -14px var(--glow) !important; transform: translateY(-2px); } .btn-pill, .btn-ghost, .btn-outline { border-color: rgba(var(--p-2), 0.55) !important; color: rgb(var(--p-2)) !important; } .btn-pill:hover, .btn-ghost:hover, .btn-outline:hover { background: var(--grad-cta) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 12px 26px -12px var(--glow) !important; } .ribbon { background: var(--grad-cta) !important; color: #fff !important; } /* -- Gold drop-shadows on the logo mark → preset glow ----------------- */ .jfy-mark, .brand-lockup .jfy-mark { filter: drop-shadow(0 3px 8px rgba(var(--p-2), 0.3)) !important; } /* -- Old gold accents on misc text / borders -------------------------- */ .display em { color: rgb(var(--p-2)); } .label, .eyebrow, .theme-tier.free, .theme-meta .cat, .theme-name, .detail-info .price, .price-card .price { color: rgb(var(--p-2)) !important; } .brand span { color: rgb(var(--p-2)); } .price-card.featured { border-color: rgba(var(--p-2), 0.55) !important; box-shadow: 0 24px 56px -26px var(--glow) !important; } .mini:hover, .auth-form input:focus { border-color: rgba(var(--p-2), 0.6) !important; } .auth-form a, .auth-alt a, .micro a { color: rgb(var(--p-2)) !important; } /* -- Admin tables / chips / inputs / buttons -------------------------- */ .adm-card h3 { font-family: var(--font-display) !important; color: var(--app-text) !important; } .adm-sub { color: var(--app-text-muted) !important; } .adm-input { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html:not(.dark) .adm-input { background: rgba(0, 0, 0, 0.02) !important; } .adm-input:focus { border-color: rgba(var(--p-2), 0.6) !important; box-shadow: 0 0 0 3px var(--ring) !important; } .adm-chip { background: rgba(var(--p-2), 0.16) !important; color: rgb(var(--p-2)) !important; } .ds-btn.primary { background: var(--grad-cta) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 10px 26px -12px var(--glow) !important; } .ds-btn.primary:hover { background: var(--grad-cta-hover) !important; box-shadow: 0 16px 34px -14px var(--glow) !important; } .ds-btn.ghost { background: var(--app-panel) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } .ds-btn.ghost:hover { border-color: rgba(var(--p-2), 0.5) !important; color: rgb(var(--p-2)) !important; box-shadow: 0 10px 22px -12px var(--glow) !important; } /* Table head / rows readable on any theme */ .rs-table th, .bl-table th { color: var(--app-text-muted) !important; border-color: var(--app-border) !important; } .rs-table td, .bl-table td { color: var(--app-text) !important; border-color: var(--app-border) !important; } .rsvp-table th { color: var(--app-text-muted) !important; } .rsvp-table td { color: var(--app-text) !important; border-color: var(--app-border) !important; } /* Status pills keep semantic colour but on themed translucent chips */ .pill-status.draft { background: rgba(var(--p-2), 0.12) !important; color: var(--app-text-muted) !important; } /* ===================================================================== 20) DASHBOARD CHROME — premium SaaS rework Brand lives in the HEADER (full-width top bar). The sidebar is a pure navigation rail with depth, a glowing active pill and a floating collapse handle pinned to the middle of its outer edge. ===================================================================== */ /* ---- 20.1 Shell: a flex column — full-width header on top, then a body row (sidebar + main). Flexbox is used instead of grid so the legacy grid rules in style.css (which lack rows/areas) are fully neutralised and the header can never be trapped inside the main column. -------- */ :root { --side-w: 264px; --side-w-collapsed: 80px; --topbar-h: 64px; } .ds-shell { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; grid-template-rows: none !important; grid-template-areas: none !important; min-height: 100vh; } /* body row holds the sidebar + main content */ .ds-body { display: flex; flex: 1; min-height: 0; min-width: 0; align-items: stretch; } .ds-col { display: flex; flex-direction: column; min-width: 0; flex: 1; } /* ---- 20.2 TOP BAR — full-width premium header with the brand --------- */ .ds-topbar { position: sticky; top: 0; z-index: 50; width: 100%; flex-shrink: 0; height: var(--topbar-h); padding: 0 1.4rem !important; gap: 1.1rem; display: flex; align-items: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent), var(--app-panel) !important; border-bottom: 1px solid var(--app-border) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px -24px rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(var(--app-blur)) saturate(150%); backdrop-filter: blur(var(--app-blur)) saturate(150%); } html.dark .ds-topbar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent), rgba(11, 16, 27, 0.82) !important; } /* Brand lockup keeps a fixed, comfortable width and NEVER collapses with the sidebar — the wordmark stays fully visible in the header at all times. */ .ds-top-left { display: flex; align-items: center; gap: 0.65rem; min-width: 0; width: auto; flex-shrink: 0; } .ds-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--app-text); min-width: 0; } .ds-brand .jfy-mark { width: 36px; height: 36px; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(var(--p-2), 0.45)); } .ds-brand:hover .jfy-mark { transform: rotate(-6deg) scale(1.06); } .ds-brand-text { display: flex; flex-direction: column; line-height: 1.08; min-width: 0; overflow: hidden; } /* Override the legacy rule (style.css) that hides the wordmark when collapsed: the brand lockup must remain fully visible at all times in the header. */ .ds-shell.collapsed .ds-brand-text { display: flex !important; } .ds-shell.collapsed .ds-brand { gap: 0.7rem !important; } .ds-brand-name { font-family: var(--font-display) !important; font-size: 1.06rem; font-weight: 700; color: var(--app-text) !important; letter-spacing: -0.015em; white-space: nowrap; } .ds-brand-tag { font: 600 0.58rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.24em; color: rgb(var(--p-2)) !important; margin-top: 0.22rem; white-space: nowrap; } /* search sits between brand and account, fluid */ .ds-search-top { flex: 1; max-width: 520px; } .ds-search-top:focus-within { border-color: rgba(var(--p-2), 0.6) !important; box-shadow: 0 0 0 3px var(--ring) !important; } .ds-top-right { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; } .ds-toggle, .ds-burger { color: var(--app-text-muted); border-color: var(--app-border); transition: 0.2s var(--ease); } .ds-toggle:hover, .ds-burger:hover { color: rgb(var(--p-2)) !important; border-color: rgba(var(--p-2), 0.5) !important; background: rgba(var(--p-2), 0.1) !important; } .ds-avatar { background: var(--grad-cta) !important; color: #fff !important; font-weight: 700; box-shadow: 0 6px 16px -6px var(--glow), inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .ds-acct-name { color: var(--app-text); font-weight: 600; } .ds-acct-email { color: var(--app-text-dim); } .ds-burger { display: none; } /* ---- 20.3 SIDEBAR — premium FLOATING navigation rail ---------------- The sidebar is a detached, rounded panel: it has breathing room from the header above and the viewport edges (left/bottom), and soft rounded corners — reading as an elevated card rather than a flush rail. --------- */ :root { --side-gap: 14px; } .ds-sidebar { position: sticky; top: calc(var(--topbar-h) + var(--side-gap)); align-self: flex-start; height: calc(100vh - var(--topbar-h) - var(--side-gap) * 2); width: var(--side-w); flex: 0 0 var(--side-w); margin: var(--side-gap) 0 var(--side-gap) var(--side-gap); border-radius: 18px; padding: 1rem 0.75rem 1rem !important; display: flex; flex-direction: column; border: 1px solid var(--app-border) !important; background: radial-gradient(140% 60% at 0% 0%, rgba(var(--p-1), 0.08), transparent 55%), radial-gradient(120% 50% at 0% 100%, rgba(var(--p-3), 0.07), transparent 60%), var(--app-panel) !important; -webkit-backdrop-filter: blur(var(--app-blur)) saturate(150%); backdrop-filter: blur(var(--app-blur)) saturate(150%); box-shadow: 0 18px 48px -28px rgba(0, 0, 0, 0.6), 0 2px 8px -4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.04); transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), flex-basis 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding 0.28s cubic-bezier(0.4, 0, 0.2, 1); overflow: visible; } /* collapsed: narrow rail (icon-only) */ .ds-shell.collapsed .ds-sidebar { width: var(--side-w-collapsed); flex: 0 0 var(--side-w-collapsed); padding: 1rem 0.5rem 1rem !important; } html.dark .ds-sidebar { background: radial-gradient(140% 60% at 0% 0%, rgba(var(--p-1), 0.1), transparent 55%), radial-gradient(120% 50% at 0% 100%, rgba(var(--p-3), 0.09), transparent 60%), linear-gradient(180deg, rgba(15, 22, 36, 0.85), rgba(9, 13, 22, 0.9)) !important; } /* give the main column matching breathing room so it doesn't hug the panel. flex:1 + min-width:0 — WAJIB: tanpa ini .ds-main shrink-to-fit isinya di flex row .ds-body (halaman dgn konten sempit tampak "menyusut ke kiri"). */ .ds-main { padding-left: 1.8rem; flex: 1 1 0%; min-width: 0; } /* ---- 20.4 Floating collapse handle, pinned mid outer edge ----------- */ .ds-collapse-fab { position: absolute; top: 50%; right: -15px; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; z-index: 45; display: flex; align-items: center; justify-content: center; background: var(--app-panel-2); color: var(--app-text-muted); border: 1px solid var(--app-border-strong); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.04); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform 0.25s var(--ease), background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s; } .ds-collapse-fab:hover { color: #fff; background: var(--grad-cta); border-color: transparent; transform: translateY(-50%) scale(1.12); box-shadow: 0 8px 22px -6px var(--glow); } .ds-collapse-fab i { font-size: 0.8rem; } /* ---- 20.5 Nav: groups, links, glowing active pill ------------------- */ .ds-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.2rem 0.15rem; scrollbar-width: thin; scrollbar-color: rgba(var(--p-2), 0.3) transparent; } .ds-nav::-webkit-scrollbar { width: 6px; } .ds-nav::-webkit-scrollbar-thumb { background: rgba(var(--p-2), 0.3); border-radius: 6px; } .ds-group-title { font: 700 0.62rem/1 var(--font-ui) !important; letter-spacing: 0.18em; text-transform: uppercase; color: var(--app-text-dim) !important; padding: 0.2rem 0.85rem; margin: 1rem 0 0.35rem !important; } .ds-nav > div:first-child .ds-group-title { margin-top: 0.2rem !important; } .ds-link { position: relative; display: flex; align-items: center; gap: 0.8rem; padding: 0.62rem 0.85rem; margin: 0.12rem 0; border-radius: 12px; color: var(--app-text-muted); font: 500 0.88rem/1 var(--font-ui); text-decoration: none; transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); } .ds-link:hover { background: rgba(var(--p-2), 0.09); color: var(--app-text); transform: translateX(2px); } .ds-ico { width: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--app-text-muted); font-size: 0.98rem; flex-shrink: 0; transition: color 0.2s; } .ds-link:hover .ds-ico { color: rgb(var(--p-2)); } .ds-link.active { background: linear-gradient(100deg, rgba(var(--p-2), 0.22), rgba(var(--p-2), 0.05)) !important; color: rgb(var(--p-2)) !important; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(var(--p-2), 0.22), 0 6px 18px -10px var(--glow); } .ds-link.active .ds-ico { color: rgb(var(--p-2)); } .ds-link.active::before { content: ''; position: absolute; left: -0.15rem; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, rgb(var(--p-1)), rgb(var(--p-2))); box-shadow: 0 0 10px rgba(var(--p-2), 0.7); } .ds-mark { color: rgb(var(--p-2)) !important; } /* ---- 20.6 Footer (logout) sits at the bottom, divided -------------- */ .ds-side-foot { margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--app-border); } .ds-logout { margin: 0.3rem 0 0 !important; color: #f87171 !important; } .ds-logout .ds-ico { color: #f87171 !important; } .ds-logout:hover { background: rgba(248, 113, 113, 0.12) !important; color: #fca5a5 !important; } .ds-logout:hover .ds-ico { color: #fca5a5 !important; } /* ---- 20.7 Collapsed state polish ----------------------------------- */ .ds-shell.collapsed .ds-link { justify-content: center; padding: 0.6rem 0; margin: 0.18rem 0; } .ds-shell.collapsed .ds-link .ds-ico { width: auto; } .ds-shell.collapsed .ds-text { display: none; } /* keep group titles as a slim divider so groups stay legible when collapsed */ .ds-shell.collapsed .ds-group-title { font-size: 0 !important; letter-spacing: 0 !important; padding: 0 !important; margin: 0.55rem 0.55rem 0.3rem !important; height: 1px; border-top: 1px solid var(--app-border); overflow: hidden; } .ds-shell.collapsed .ds-nav > div:first-child .ds-group-title { border-top: none; margin-top: 0.1rem !important; } /* tooltip on hover when collapsed */ .ds-shell.collapsed .ds-link:hover::after { content: attr(data-label); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--app-panel-2) !important; color: var(--app-text) !important; border: 1px solid var(--app-border-strong); padding: 0.4rem 0.75rem; border-radius: 9px; font-size: 0.78rem; white-space: nowrap; z-index: 60; box-shadow: var(--app-shadow) !important; } /* NOTE: the brand lockup (logo + wordmark) intentionally stays fully visible when the sidebar is collapsed — only the nav rail narrows. */ /* ---- 20.8 Page head ------------------------------------------------- */ .ds-pagehead h1 { font-family: var(--font-display); color: var(--app-text); letter-spacing: -0.015em; font-weight: 700; } .ds-crumb { color: var(--app-text-muted); } /* ===================================================================== 17) RESPONSIVE polish ===================================================================== */ @media (max-width: 860px) { /* header spans the top; main fills the row below; sidebar = overlay drawer */ .ds-burger { display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--app-border); flex-shrink: 0; } .ds-collapse-fab { display: none !important; } /* On mobile the sidebar is an overlay drawer, so the main column no longer needs the extra left gap that separated it from the floating rail. Reset to symmetric padding so invitation cards sit flush and aren't pushed toward / cut off on the right edge. */ .ds-main { padding: 1.1rem !important; padding-left: 1.1rem !important; } .ds-topbar { gap: 0.6rem !important; padding: 0 0.9rem !important; } .ds-top-left { width: auto !important; min-width: 0; flex: 0 1 auto; } .ds-top-right { gap: 0.5rem !important; } /* search shrinks but stays usable; on phones it is hidden entirely below */ .ds-search-top { max-width: none; flex: 1 1 0; min-width: 0; } .ds-sidebar, .ds-shell.collapsed .ds-sidebar { position: fixed; left: 0; top: 0; height: 100vh !important; width: var(--side-w) !important; max-width: 86vw; flex-basis: var(--side-w) !important; z-index: 80; /* Closed: push fully off-screen (-105% clears any border/shadow/blur sliver) and take it out of the paint with visibility:hidden so no edge bleeds past the left of the viewport. */ transform: translateX(-105%); visibility: hidden; border-right: none !important; box-shadow: none !important; transition: transform 0.3s var(--ease), visibility 0s linear 0.3s; padding: 1rem 0.75rem !important; } .ds-sidebar.open { transform: translateX(0); visibility: visible; box-shadow: 0 0 80px rgba(0, 0, 0, 0.5); transition: transform 0.3s var(--ease), visibility 0s; } /* never collapse-to-rail on mobile — drawer behaviour wins */ .ds-shell.collapsed .ds-text, .ds-shell.collapsed .ds-group-title { display: block; } .ds-shell.collapsed .ds-group-title { font-size: 0.62rem !important; height: auto; border-top: none; letter-spacing: 0.18em !important; padding: 0.2rem 0.85rem !important; margin: 1rem 0 0.35rem !important; } .ds-shell.collapsed .ds-link { justify-content: flex-start; padding: 0.62rem 0.85rem; } } @media (max-width: 640px) { .hue-legend { font-size: 0.7rem; } .cta-grad { padding: 0.85rem 1.5rem; font-size: 0.86rem; } /* ---- compact mobile header: avoid overflow/cramping ---- */ .ds-acct-meta { display: none; } /* hide the global search on phones — it overflowed the header row */ .ds-search-top { display: none !important; } /* keep only the wordmark; drop the small "Atelier/Command" tag line */ .ds-brand-tag { display: none !important; } .ds-brand-name { font-size: 0.98rem !important; } .ds-brand .jfy-mark, .ds-brand .jfy-mark svg { width: 30px !important; height: 30px !important; } .ds-topbar { height: auto !important; min-height: 56px; padding: 0.5rem 0.8rem !important; } .ds-top-right { gap: 0.45rem !important; } .ds-avatar { width: 34px !important; height: 34px !important; font-size: 0.95rem !important; } .ds-toggle { width: 36px; height: 36px; } /* owner badge stays but goes inline-compact */ .owner-badge { margin-left: 0.3rem; font-size: 0.5rem; padding: 0.18rem 0.34rem; } } @media (max-width: 380px) { /* squeeze further on the smallest phones */ .ds-brand-name { font-size: 0.9rem !important; } .ds-topbar { gap: 0.4rem !important; padding: 0.5rem 0.6rem !important; } } /* ===================================================================== 21) OWNER CONSOLE — the founder's private control room ===================================================================== */ /* Brand badge marking the owner console */ .owner-badge { display: inline-block; vertical-align: middle; margin-left: 0.4rem; font: 800 0.54rem/1 var(--font-ui); letter-spacing: 0.16em; padding: 0.22rem 0.42rem; border-radius: 6px; background: linear-gradient(120deg, rgb(var(--p-1)), rgb(var(--p-2))); color: #fff; text-transform: uppercase; box-shadow: 0 4px 12px -4px var(--glow); } .owner-avatar { box-shadow: 0 0 0 2px rgba(var(--p-1), 0.5), 0 6px 16px -6px var(--glow) !important; } /* KPI grid */ .owner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.4rem; } .owner-kpi { padding: 1.1rem 1.2rem; border-radius: 16px; display: flex; flex-direction: column; gap: 0.5rem; } .owner-kpi-top { display: flex; align-items: center; gap: 0.6rem; } .owner-kpi .bento-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--h), 0.16); color: rgb(var(--h)); font-size: 0.95rem; } .owner-kpi-label { font: 600 0.72rem/1.1 var(--font-ui); color: var(--app-text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .owner-kpi-value { font: 800 1.7rem/1 var(--font-display); color: var(--app-text); letter-spacing: -0.02em; } .owner-kpi-sub { font: 500 0.74rem/1.2 var(--font-ui); color: var(--app-text-dim); min-height: 1em; } /* Two-column panel row */ .owner-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.4rem; } .owner-panel { padding: 1.2rem 1.3rem; border-radius: 16px; } .owner-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .owner-panel-head h2 { font: 700 1.02rem/1 var(--font-display); color: var(--app-text); display: flex; align-items: center; gap: 0.55rem; } .owner-panel-head h2 i { color: rgb(var(--h, var(--p-2))); } .owner-panel-tag { font: 600 0.68rem/1 var(--font-ui); color: var(--app-text-dim); text-transform: uppercase; letter-spacing: 0.1em; } .owner-panel-link { font: 600 0.8rem/1 var(--font-ui); color: rgb(var(--p-2)); text-decoration: none; } .owner-panel-link:hover { text-decoration: underline; } /* Lists inside panels */ .owner-list { display: flex; flex-direction: column; gap: 0.1rem; } .owner-li { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.2rem; border-bottom: 1px solid var(--app-border); } .owner-li:last-child { border-bottom: none; } .owner-li-rank { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--p-2), 0.15); color: rgb(var(--p-2)); font: 700 0.72rem/1 var(--font-ui); } .owner-li-main { flex: 1; min-width: 0; color: var(--app-text); font: 500 0.88rem/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .owner-li-val { color: var(--app-text-muted); font: 700 0.85rem/1 var(--font-ui); flex-shrink: 0; } .owner-empty { color: var(--app-text-dim); font: 500 0.85rem/1.4 var(--font-ui); padding: 0.8rem 0.2rem; text-align: center; } /* Status pills */ .owner-pill { font: 600 0.66rem/1 var(--font-ui); padding: 0.28rem 0.5rem; border-radius: 999px; text-transform: capitalize; flex-shrink: 0; } .owner-pill-paid { background: rgba(34, 197, 94, 0.16); color: #22c55e; } .owner-pill-pending { background: rgba(245, 158, 11, 0.16); color: #f59e0b; } .owner-pill-failed, .owner-pill-cancelled { background: rgba(239, 68, 68, 0.16); color: #ef4444; } .owner-pill-new { background: rgba(99, 102, 241, 0.16); color: #818cf8; } /* Quick actions */ .owner-quick { margin-bottom: 1.4rem; } .owner-quick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8rem; } .owner-quick-btn { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem 0.6rem; border-radius: 14px; background: rgba(var(--p-2), 0.06); border: 1px solid var(--app-border); color: var(--app-text-muted); text-decoration: none; transition: 0.2s var(--ease); font: 600 0.76rem/1 var(--font-ui); } .owner-quick-btn i { font-size: 1.25rem; color: rgb(var(--p-2)); } .owner-quick-btn:hover { background: rgba(var(--p-2), 0.12); color: var(--app-text); transform: translateY(-2px); border-color: rgba(var(--p-2), 0.4); box-shadow: 0 10px 24px -14px var(--glow); } /* Coming-soon scaffold */ .owner-soon { text-align: center; padding: 3rem 2rem; max-width: 680px; margin: 1rem auto; } .owner-soon-ico { width: 72px; height: 72px; border-radius: 20px; margin: 0 auto 1.2rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(var(--p-1), 0.2), rgba(var(--p-3), 0.12)); color: rgb(var(--p-2)); font-size: 1.9rem; box-shadow: inset 0 0 0 1px rgba(var(--p-2), 0.2); } .owner-soon h2 { font: 800 1.5rem/1.1 var(--font-display); color: var(--app-text); margin-bottom: 0.6rem; letter-spacing: -0.02em; } .owner-soon-blurb { color: var(--app-text-muted); font: 400 0.98rem/1.6 var(--font-ui); max-width: 520px; margin: 0 auto 1.4rem; } .owner-soon-list { list-style: none; display: inline-flex; flex-direction: column; gap: 0.55rem; text-align: left; margin: 0 auto 1.6rem; } .owner-soon-list li { color: var(--app-text-muted); font: 500 0.9rem/1.2 var(--font-ui); display: flex; align-items: center; gap: 0.6rem; } .owner-soon-list li i { color: rgb(var(--p-2)); font-size: 0.82rem; } .owner-soon-badge { display: inline-block; font: 700 0.7rem/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.5rem 0.9rem; border-radius: 999px; background: rgba(var(--p-2), 0.12); color: rgb(var(--p-2)); } /* Responsive */ @media (max-width: 1100px) { .owner-grid { grid-template-columns: repeat(2, 1fr); } .owner-quick-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .owner-row { grid-template-columns: 1fr; } } @media (max-width: 520px) { .owner-grid { grid-template-columns: 1fr; } .owner-quick-grid { grid-template-columns: repeat(2, 1fr); } } /* ===================================================================== SECTION 22 — THEME STUDIO (owner-only) ===================================================================== */ .ts-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .ts-filters { display: flex; gap: 8px; flex-wrap: wrap; } .ts-chip { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text-soft); font-size: 0.82rem; cursor: pointer; transition: 0.15s; } .ts-chip:hover { border-color: rgb(var(--h)); } .ts-chip.active { background: rgb(var(--h)); color: #fff; border-color: rgb(var(--h)); } .ts-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text); font-size: 0.88rem; cursor: pointer; text-decoration: none; transition: 0.15s; } .ts-btn:hover { transform: translateY(-1px); } .ts-btn-primary { background: rgb(var(--h)); color: #fff; border-color: rgb(var(--h)); box-shadow: 0 6px 18px rgba(var(--h), 0.32); } .ts-btn-ghost { background: transparent; } .ts-toolbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .ts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } /* ---- Smart Filter bar (Phase 8.2) ---- */ .ts-smart { display: flex; flex-direction: column; gap: 10px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 14px; padding: 12px 14px; margin-bottom: 18px; } .ts-smart-search { position: relative; display: flex; align-items: center; } .ts-smart-search > i { position: absolute; left: 13px; color: var(--app-text-soft); font-size: 0.84rem; pointer-events: none; } .ts-smart-search input { width: 100%; padding: 10px 38px; border: 1px solid var(--app-border); border-radius: 11px; background: var(--app-bg); color: var(--app-text); font-size: 0.88rem; font-family: inherit; } .ts-smart-search input:focus { outline: none; border-color: rgb(var(--h)); box-shadow: 0 0 0 3px rgba(var(--h), 0.14); } .ts-smart-clear { position: absolute; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 8px; background: var(--app-border); color: var(--app-text-soft); cursor: pointer; font-size: 0.74rem; } .ts-smart-clear:hover { color: var(--app-text); } .ts-smart-row { display: flex; flex-direction: column; gap: 8px; } .ts-smart-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ts-smart-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--app-text-soft); margin-right: 4px; flex: 0 0 auto; } .ts-smart-label i { font-size: 0.68rem; opacity: 0.7; } .ts-chip-sm { padding: 5px 12px; font-size: 0.76rem; display: inline-flex; align-items: center; gap: 5px; } .ts-chip-sm i { font-size: 0.68rem; opacity: 0.8; } .ts-chip-empty { opacity: 0.4; } .ts-chip-n { display: inline-block; margin-left: 6px; font-size: 0.66rem; font-weight: 700; background: rgba(var(--h), 0.14); color: rgb(var(--h)); padding: 1px 7px; border-radius: 999px; vertical-align: 1px; } .ts-chip.active .ts-chip-n { background: rgba(255, 255, 255, 0.25); color: #fff; } .ts-smart-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ts-smart-count { font-size: 0.76rem; color: var(--app-text-soft); } .ts-smart-reset { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--app-border); background: transparent; color: var(--app-text-soft); font-size: 0.74rem; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: 0.15s; } .ts-smart-reset:hover { color: #dc2626; border-color: #dc2626; } /* date filter (created) */ .ts-date-range { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; } .ts-date-range[hidden] { display: none; } .ts-date-input { padding: 4px 9px; border: 1px solid var(--app-border); border-radius: 9px; background: var(--app-bg); color: var(--app-text); font-size: 0.74rem; font-family: inherit; color-scheme: light dark; } .ts-date-input:focus { outline: none; border-color: rgb(var(--h)); box-shadow: 0 0 0 3px rgba(var(--h), 0.14); } .ts-date-sep { font-size: 0.74rem; color: var(--app-text-soft); } @media (max-width: 640px) { .ts-smart { padding: 10px; } .ts-smart-label { width: 100%; } } /* Import Elementor modal */ .ts-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); padding: 20px; } .ts-modal[hidden] { display: none; } .ts-modal-card { position: relative; width: 100%; max-width: 520px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 18px; padding: 26px 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4); } .ts-modal-card h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin: 0 0 8px; } .ts-modal-sub { font-size: 0.84rem; color: var(--app-text-soft); line-height: 1.55; margin: 0 0 18px; } .ts-modal-sub code { background: var(--app-bg); padding: 1px 6px; border-radius: 5px; font-size: 0.8rem; } .ts-modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--app-border); background: var(--app-bg); color: var(--app-text); cursor: pointer; } .ts-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } .ts-import-status { font-size: 0.84rem; min-height: 20px; color: var(--app-text-soft); line-height: 1.5; margin-top: 4px; } .ts-import-status.err { color: #e0566f; } .ts-import-status.ok { color: #3aa76d; } .ts-import-status code { background: var(--app-bg); padding: 1px 5px; border-radius: 4px; font-size: 0.78rem; } /* ===================================================================== AI THEME COMPOSER — modern gradient redesign ===================================================================== */ .ts-btn-ai { background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(124, 58, 237, 0.32); position: relative; overflow: hidden; } .ts-btn-ai::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 25%, rgba(255, 255, 255, 0.22) 50%, transparent 75% ); transform: translateX(-100%); transition: transform 0.6s; } .ts-btn-ai:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(124, 58, 237, 0.45); } .ts-btn-ai:hover::after { transform: translateX(100%); } .ts-btn-ai:disabled { opacity: 0.65; cursor: wait; transform: none; } .ts-btn-code { border-color: rgba(53, 201, 138, 0.5); color: #35c98a; background: rgba(53, 201, 138, 0.08); } .ts-btn-code:hover { background: rgba(53, 201, 138, 0.16); border-color: #35c98a; } .ts-btn.full { width: 100%; justify-content: center; } /* card shell */ .ts-ai-card { max-width: 980px; padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; max-height: 92vh; border: 1px solid var(--app-border-strong); } /* gradient hero header */ .ts-ai-hero { position: relative; padding: 22px 26px 20px; background: linear-gradient(120deg, #1b1033 0%, #3b1a63 45%, #6b1a4e 100%); overflow: hidden; flex: 0 0 auto; } .ts-ai-hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 160px at 18% 0%, rgba(168, 85, 247, 0.45), transparent 70%), radial-gradient(380px 170px at 85% 20%, rgba(236, 72, 153, 0.35), transparent 70%), radial-gradient(300px 130px at 55% 110%, rgba(99, 102, 241, 0.3), transparent 70%); } .ts-ai-hero::after { content: '✦'; position: absolute; top: 14px; right: 64px; color: rgba(255, 255, 255, 0.25); font-size: 1.1rem; animation: tsAiTwinkle 2.6s ease-in-out infinite; } @keyframes tsAiTwinkle { 0%, 100% { opacity: 0.25; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.25); } } .ts-ai-hero-row { position: relative; display: flex; align-items: flex-start; gap: 14px; } .ts-ai-hero-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff; background: linear-gradient(135deg, #a855f7, #ec4899); box-shadow: 0 8px 22px rgba(168, 85, 247, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); animation: tsAiFloat 3.4s ease-in-out infinite; } @keyframes tsAiFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .ts-ai-hero-txt h3 { margin: 0 0 4px; font-size: 1.22rem; color: #fff; letter-spacing: 0.01em; display: flex; align-items: center; gap: 10px; } .ts-ai-hero-txt p { margin: 0; font-size: 0.82rem; line-height: 1.5; color: rgba(235, 225, 255, 0.78); max-width: 560px; } .ts-ai-close { position: absolute; top: 0; right: 0; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: #fff; backdrop-filter: blur(6px); } .ts-ai-close:hover { background: rgba(255, 255, 255, 0.2); } /* body grid */ .ts-ai-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; align-items: stretch; flex: 1 1 auto; min-height: 0; overflow: hidden; } .ts-ai-left { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; overflow-y: auto; min-height: 0; } .ts-ai-left textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-bg); color: var(--app-text); font-size: 0.86rem; font-family: inherit; line-height: 1.5; resize: vertical; transition: 0.15s; } .ts-ai-left textarea:focus { outline: none; border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.16); } .ts-ai-left .ts-field { margin-bottom: 0; } .ts-ai-left .ts-field label { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--app-text-soft); } .ts-ai-left .ts-field label i { color: #a855f7; font-size: 0.72rem; } /* numbered step cards */ .ts-ai-step { position: relative; border: 1px solid var(--app-border); border-radius: 16px; background: var(--app-surface-2, var(--app-bg)); padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.2s; } .ts-ai-step:focus-within { border-color: rgba(168, 85, 247, 0.45); } .ts-ai-step-head { display: flex; align-items: center; gap: 10px; } .ts-ai-step-head h4 { margin: 0; font-size: 0.92rem; color: var(--app-text); letter-spacing: 0.01em; } .ts-ai-step-n { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.74rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7c3aed, #db2777); box-shadow: 0 4px 10px rgba(124, 58, 237, 0.35); } .ts-ai-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ts-ai-gen-wrap { display: flex; align-items: flex-end; } /* idea chips */ .ts-ai-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .ts-ai-chips-label { font-size: 0.72rem; color: var(--app-text-soft); display: inline-flex; align-items: center; gap: 5px; } .ts-ai-chips-label i { color: #f59e0b; } .ts-ai-chip { padding: 6px 12px; border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-surface); color: var(--app-text-soft); font-size: 0.74rem; cursor: pointer; transition: 0.18s; } .ts-ai-chip:hover { border-color: #a855f7; color: #a855f7; background: rgba(168, 85, 247, 0.08); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(168, 85, 247, 0.18); } /* option toggle cards (premium mode / real assets) */ .ts-ai-opt { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface); cursor: pointer; transition: 0.18s; position: relative; } .ts-ai-opt:hover { border-color: rgba(168, 85, 247, 0.4); } .ts-ai-opt input { position: absolute; opacity: 0; pointer-events: none; } .ts-ai-opt-switch { order: 9; margin-left: auto; flex: 0 0 auto; width: 40px; height: 22px; border-radius: 999px; background: var(--app-border); position: relative; transition: 0.2s; align-self: center; } .ts-ai-opt-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .ts-ai-opt input:checked ~ .ts-ai-opt-switch { background: linear-gradient(135deg, #7c3aed, #db2777); } .ts-ai-opt input:checked ~ .ts-ai-opt-switch::after { transform: translateX(18px); } .ts-ai-opt input:checked ~ .ts-ai-opt-ico { box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35); } .ts-ai-opt:has(input:checked) { border-color: rgba(168, 85, 247, 0.5); background: linear-gradient(135deg, rgba(124, 58, 237, 0.07), rgba(219, 39, 119, 0.05)); } .ts-ai-opt:has(input:disabled) { opacity: 0.55; cursor: not-allowed; } .ts-ai-opt-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: #fff; transition: 0.2s; } .ts-ai-opt-ico-violet { background: linear-gradient(135deg, #7c3aed, #a855f7); } .ts-ai-opt-ico-amber { background: linear-gradient(135deg, #f59e0b, #f97316); } .ts-ai-opt-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 6px; } .ts-ai-opt-txt b { font-size: 0.85rem; color: var(--app-text); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .ts-ai-opt-txt small { font-size: 0.74rem; line-height: 1.5; color: var(--app-text-soft); } .ts-ai-tag { font-style: normal; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 2px 7px; border-radius: 999px; color: #a855f7; background: rgba(168, 85, 247, 0.14); border: 1px solid rgba(168, 85, 247, 0.3); } .ts-ai-tag-amber { color: #f59e0b; background: rgba(245, 158, 11, 0.13); border-color: rgba(245, 158, 11, 0.32); } /* indented sub-options under a toggle */ .ts-ai-sub { margin: -4px 0 0 14px; padding: 10px 12px 2px 14px; border-left: 2px solid rgba(168, 85, 247, 0.28); } /* model picker — token limit badges */ .ts-ai-model-refresh { margin-left: auto; cursor: pointer; color: var(--app-text-soft); font-size: 0.72rem; padding: 2px 6px; border-radius: 6px; transition: 0.15s; } .ts-ai-model-refresh:hover { color: #a855f7; background: rgba(168, 85, 247, 0.1); } .ts-ai-model-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; min-height: 22px; } .ts-ai-mm { display: inline-flex; align-items: center; gap: 5px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text-soft); } .ts-ai-mm i { font-size: 0.62rem; color: #a855f7; } .ts-ai-mm.ok { color: #3aa76d; border-color: rgba(58, 167, 109, 0.35); background: rgba(58, 167, 109, 0.08); } .ts-ai-mm.ok i { color: #3aa76d; } .ts-ai-mm.warn { color: #e0a13e; border-color: rgba(224, 161, 62, 0.4); background: rgba(224, 161, 62, 0.08); } .ts-ai-mm.warn i { color: #e0a13e; } .ts-ai-mm-note { font-size: 0.7rem; color: var(--app-text-soft); font-style: italic; } /* RIGHT preview panel */ .ts-ai-right { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--app-border); background: radial-gradient(480px 260px at 80% -10%, rgba(168, 85, 247, 0.1), transparent 70%), radial-gradient(420px 240px at 0% 110%, rgba(236, 72, 153, 0.08), transparent 70%), var(--app-bg); } .ts-ai-right-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 13px 18px; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--app-text-soft); border-bottom: 1px solid var(--app-border); } .ts-ai-right-head i { color: #a855f7; } .ts-ai-live-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #a855f7; box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.5); animation: tsAiPulse 2s infinite; } @keyframes tsAiPulse { 0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.45); } 70% { box-shadow: 0 0 0 8px rgba(168, 85, 247, 0); } 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); } } .ts-ai-right-body { flex: 1 1 auto; overflow-y: auto; padding: 18px; min-height: 280px; } /* empty state */ .ts-ai-empty { height: 100%; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--app-text-soft); text-align: center; padding: 0 22px; } .ts-ai-empty-orb { width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #a855f7; background: radial-gradient(circle at 35% 30%, rgba(168, 85, 247, 0.22), rgba(236, 72, 153, 0.1)); border: 1px dashed rgba(168, 85, 247, 0.4); animation: tsAiFloat 3.4s ease-in-out infinite; } .ts-ai-empty p { margin: 4px 0 0; font-size: 0.92rem; color: var(--app-text); } .ts-ai-empty small { font-size: 0.76rem; line-height: 1.55; max-width: 280px; } /* loading skeleton while composing */ .ts-ai-loading { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 260px; } .ts-ai-loading-head { display: flex; align-items: center; gap: 11px; color: var(--app-text); } .ts-ai-loading-head .spin { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; border: 3px solid rgba(168, 85, 247, 0.2); border-top-color: #a855f7; animation: tsAiSpin 1s linear infinite; } @keyframes tsAiSpin { to { transform: rotate(360deg); } } .ts-ai-loading-head b { font-size: 0.88rem; } .ts-ai-loading-head small { display: block; font-size: 0.74rem; color: var(--app-text-soft); margin-top: 2px; } .ts-ai-sk { border-radius: 10px; background: linear-gradient( 100deg, rgba(127, 127, 160, 0.12) 35%, rgba(168, 85, 247, 0.2) 50%, rgba(127, 127, 160, 0.12) 65% ); background-size: 300% 100%; animation: tsAiShimmer 1.6s linear infinite; } @keyframes tsAiShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .ts-ai-sk-sw { display: flex; gap: 8px; } .ts-ai-sk-sw .ts-ai-sk { width: 40px; height: 40px; border-radius: 11px; } .ts-ai-sk-line { height: 14px; } .ts-ai-sk-line.lg { height: 26px; width: 65%; } .ts-ai-sk-line.md { width: 85%; } .ts-ai-sk-line.sm { width: 45%; } .ts-ai-sk-block { height: 72px; } /* generated result */ .ts-ai-result { display: flex; flex-direction: column; gap: 13px; animation: tsAiIn 0.35s ease; } @keyframes tsAiIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .ts-ai-swatches { display: flex; gap: 7px; } .ts-ai-sw { width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(127, 127, 127, 0.25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 3px 8px rgba(0, 0, 0, 0.18); transition: 0.15s; } .ts-ai-sw:hover { transform: translateY(-3px) scale(1.06); } .ts-ai-name { font-size: 1.65rem; margin: 0; line-height: 1.12; color: var(--app-text); } .ts-ai-cat { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--app-text-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ts-ai-cat i { color: #a855f7; } .ts-ai-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #a855f7; font-weight: 700; background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.3); padding: 4px 11px; border-radius: 999px; } .ts-ai-quote { margin: 0; padding: 12px 16px; border-left: 3px solid #db2777; background: rgba(219, 39, 119, 0.07); border-radius: 0 12px 12px 0; font-size: 1.02rem; font-style: italic; color: var(--app-text); line-height: 1.5; } .ts-ai-fonts { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; color: var(--app-text-soft); background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 12px; padding: 11px 13px; } .ts-ai-fonts b { color: var(--app-text); font-weight: 600; display: inline-block; width: 64px; } .ts-ai-sections { font-size: 0.78rem; color: var(--app-text-soft); line-height: 1.6; border-top: 1px dashed var(--app-border); padding-top: 10px; } .ts-ai-sections b { color: var(--app-text); } /* footer */ .ts-ai-foot { flex: 0 0 auto; display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--app-border); background: var(--app-surface); } /* responsive */ @media (max-width: 860px) { .ts-ai-card { max-width: 560px; } .ts-ai-body { grid-template-columns: 1fr; overflow-y: auto; } .ts-ai-left { overflow: visible; } .ts-ai-right { border-left: 0; border-top: 1px solid var(--app-border); } .ts-ai-right-body { min-height: 220px; } } @media (max-width: 560px) { .ts-ai-row2 { grid-template-columns: 1fr; } .ts-ai-hero { padding: 18px 18px 16px; } .ts-ai-left { padding: 16px; } } .ts-field input[type='file'] { width: 100%; padding: 9px 12px; border: 1px dashed var(--app-border); border-radius: 10px; background: var(--app-bg); color: var(--app-text); font-size: 0.84rem; cursor: pointer; } .ts-hint { font-weight: 400; font-size: 0.72rem; color: var(--app-text-soft); } .ts-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .ts-cat-check { display: block; cursor: pointer; margin: 0; } .ts-cat-check input { position: absolute; opacity: 0; width: 0; height: 0; } .ts-cat-chip { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-bg); color: var(--app-text); font-size: 0.8rem; font-weight: 500; transition: 0.15s; user-select: none; } .ts-cat-chip i { color: var(--app-text-soft); width: 14px; text-align: center; } .ts-cat-check:hover .ts-cat-chip { border-color: rgb(var(--h)); } .ts-cat-check input:checked + .ts-cat-chip { border-color: rgb(var(--h)); background: rgba(var(--h), 0.12); color: rgb(var(--h)); font-weight: 600; } .ts-cat-check input:checked + .ts-cat-chip i { color: rgb(var(--h)); } .ts-card { border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: 0.2s; } .ts-card:hover { transform: translateY(-4px); } .ts-card-thumb { display: block; aspect-ratio: 16/10; background: linear-gradient(135deg, rgba(var(--h), 0.18), rgba(var(--h), 0.05)); overflow: hidden; } .ts-card-thumb img { width: 100%; height: 100%; object-fit: cover; } .ts-card-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: rgba(var(--h), 0.5); } /* Thumbnail widget — Theme Studio basics pane */ .ts-thumb-widget { display: flex; gap: 14px; align-items: flex-start; } .ts-thumb-preview { width: 96px; height: 120px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.3); font-size: 1.4rem; } .ts-thumb-preview img { width: 100%; height: 100%; object-fit: cover; } .ts-thumb-actions { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; } .ts-thumb-upload-btn, .ts-thumb-shot-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: inherit; width: fit-content; transition: background 0.2s ease, border-color 0.2s ease; } .ts-thumb-upload-btn:hover, .ts-thumb-shot-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); } .ts-thumb-note { font-size: 0.72rem; min-height: 1em; } .ts-card-body { padding: 14px 16px; flex: 1; } .ts-card-top { display: flex; gap: 6px; margin-bottom: 8px; } .ts-status { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 999px; font-weight: 600; } .ts-status-draft { background: rgba(120, 120, 120, 0.16); color: #777; } .ts-status-published { background: rgba(34, 197, 94, 0.16); color: #16a34a; } .ts-status-archived { background: rgba(239, 68, 68, 0.14); color: #dc2626; } .ts-tier { font-size: 0.66rem; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .ts-tier i { font-size: 0.62rem; opacity: 0.95; } .ts-card-name { font-size: 1.05rem; margin: 0 0 4px; color: var(--app-text); } .ts-card-desc { font-size: 0.82rem; color: var(--app-text-soft); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ts-card-meta { display: flex; gap: 14px; font-size: 0.74rem; color: var(--app-text-soft); } .ts-card-meta i { opacity: 0.6; margin-right: 4px; } .ts-card-date { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--app-border); font-size: 0.72rem; color: var(--app-text-soft); display: flex; align-items: center; gap: 6px; } .ts-card-date i { opacity: 0.6; } .ts-card-date-rel { color: rgb(var(--h)); font-weight: 600; } .ts-card-actions { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--app-border); } .ts-mini { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 9px; border: 1px solid var(--app-border); background: transparent; color: var(--app-text-soft); font-size: 0.78rem; cursor: pointer; text-decoration: none; transition: 0.15s; } .ts-mini:hover { background: var(--app-bg); color: var(--app-text); } .ts-mini-danger { flex: 0 0 auto; } .ts-mini-danger:hover { color: #dc2626; border-color: #dc2626; } .ts-blank { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--app-text-soft); } .ts-blank i { font-size: 2.6rem; color: rgba(var(--h), 0.4); margin-bottom: 14px; } .ts-blank h3 { color: var(--app-text); margin-bottom: 6px; } .ts-blank p { max-width: 380px; margin: 0 auto 18px; } /* ---- Effects Library ---- */ .ts-effects-intro p { font-size: 0.88rem; color: var(--app-text-soft); line-height: 1.6; } .ts-effects-intro i { color: rgb(var(--h)); margin-right: 6px; } .fx-cat { margin-bottom: 26px; } .fx-cat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .fx-cat-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(var(--h), 0.14); color: rgb(var(--h)); } .fx-cat-head h2 { font-size: 1.15rem; margin: 0; color: var(--app-text); } .fx-cat-count { margin-left: auto; font-size: 0.78rem; color: var(--app-text-soft); background: var(--app-surface); border: 1px solid var(--app-border); padding: 3px 11px; border-radius: 999px; } .fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .fx-card { padding: 16px; border-radius: 14px; } .fx-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .fx-key { font-family: ui-monospace, monospace; font-size: 0.72rem; color: rgb(var(--h)); background: rgba(var(--h), 0.1); padding: 2px 8px; border-radius: 6px; } .fx-dot { width: 8px; height: 8px; border-radius: 50%; } .fx-on { background: #22c55e; } .fx-off { background: #9ca3af; } .fx-card h4 { margin: 0 0 6px; font-size: 0.98rem; color: var(--app-text); } .fx-card p { font-size: 0.8rem; color: var(--app-text-soft); line-height: 1.5; margin: 0 0 10px; } .fx-cfg { display: flex; flex-wrap: wrap; gap: 5px; } .fx-cfg code { font-size: 0.68rem; background: var(--app-bg); border: 1px solid var(--app-border); padding: 2px 7px; border-radius: 5px; color: var(--app-text-soft); } /* ---- Editor (Phase 8.2 layout: grouped side-rail tabs on desktop) ---- */ .ts-editor { display: grid; grid-template-columns: 1fr 400px; gap: 18px; align-items: start; } /* ===== EMBEDDED MODE — Theme Settings inside the Canvas Builder workspace ===== */ body.ts-embed { margin: 0; background: var(--app-bg, #0f1419); min-height: 100vh; } .ts-embed-wrap { padding: 18px; max-width: 1400px; margin: 0 auto; } body.ts-embed .ts-edit-side { position: sticky; top: 18px; } .ts-edit-main { display: grid; grid-template-columns: 172px 1fr; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 16px; overflow: hidden; min-height: 540px; } .ts-tabs { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; background: var(--app-bg); border-right: 1px solid var(--app-border); } .ts-tab-group { display: flex; flex-direction: column; gap: 2px; } .ts-tab-group + .ts-tab-group { margin-top: 14px; } .ts-tab-group-label { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--app-text-soft); opacity: 0.75; padding: 0 10px; margin-bottom: 4px; } .ts-tab { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border: 0; background: transparent; color: var(--app-text-soft); font-size: 0.83rem; cursor: pointer; border-radius: 9px; white-space: nowrap; transition: 0.15s; text-align: left; } .ts-tab i { font-size: 0.8rem; width: 16px; text-align: center; flex: 0 0 auto; } .ts-tab:hover { color: var(--app-text); background: rgba(var(--h), 0.08); } .ts-tab.active { background: rgba(var(--h), 0.13); color: rgb(var(--h)); font-weight: 600; box-shadow: inset 2px 0 0 rgb(var(--h)); } .ts-tab-locked { opacity: 0.42; } .ts-tab-locked::after { content: '\f023'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.62rem; margin-left: auto; opacity: 0.7; } .ts-tier-hint { display: flex; align-items: flex-start; gap: 7px; font-size: 0.78rem; color: var(--app-text-soft); background: var(--app-bg); border: 1px solid var(--app-border); border-radius: 9px; padding: 9px 11px; margin: -2px 0 14px; line-height: 1.45; } .ts-tier-hint i { color: rgb(var(--h)); margin-top: 2px; } .ts-panes { padding: 22px; } .ts-pane { display: none; } .ts-pane.active { display: block; animation: tsFade 0.25s ease; } @keyframes tsFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ts-pane-hint { font-size: 0.82rem; color: var(--app-text-soft); margin-bottom: 16px; line-height: 1.5; } .ts-pane-hint code { font-family: ui-monospace, monospace; background: var(--app-bg); padding: 1px 6px; border-radius: 5px; font-size: 0.78rem; } .ts-field { margin-bottom: 14px; } .ts-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--app-text); margin-bottom: 6px; } .ts-field input[type='text'], .ts-field input[type='url'], .ts-field textarea, .ts-field select { width: 100%; padding: 10px 12px; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-bg); color: var(--app-text); font-size: 0.88rem; font-family: inherit; } .ts-field input:focus, .ts-field textarea:focus, .ts-field select:focus { outline: none; border-color: rgb(var(--h)); box-shadow: 0 0 0 3px rgba(var(--h), 0.15); } .ts-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ts-field input[type='range'] { width: 100%; accent-color: rgb(var(--h)); padding: 0; } .ts-scale-help { font-size: 0.7rem; color: var(--app-text-soft); margin-top: 4px; } .ts-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; } .ts-color { display: flex; flex-direction: column; gap: 6px; } .ts-color label { font-size: 0.78rem; font-weight: 600; } .ts-color input[type='color'] { width: 100%; height: 40px; border: 1px solid var(--app-border); border-radius: 10px; background: none; cursor: pointer; padding: 3px; } .ts-hex { padding: 6px 8px; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-bg); color: var(--app-text); font-family: ui-monospace, monospace; font-size: 0.76rem; text-transform: uppercase; } .ts-code { width: 100%; font-family: ui-monospace, monospace; font-size: 0.82rem; line-height: 1.55; background: #0f1117; color: #d6deeb; border: 1px solid var(--app-border); border-radius: 12px; padding: 14px; resize: vertical; } /* sections */ .ts-sections { display: flex; flex-direction: column; gap: 8px; } .ts-section-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--app-border); border-radius: 11px; background: var(--app-bg); cursor: grab; } .ts-section-row.dragging { opacity: 0.5; } .ts-drag { color: var(--app-text-soft); cursor: grab; } .ts-section-name { flex: 1; font-size: 0.88rem; color: var(--app-text); } /* switch */ .ts-switch { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; color: var(--app-text); cursor: pointer; margin-bottom: 12px; } .ts-switch input { display: none; } .ts-switch-ui { width: 40px; height: 22px; border-radius: 999px; background: var(--app-border); position: relative; transition: 0.2s; flex: 0 0 auto; } .ts-switch-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .ts-switch input:checked + .ts-switch-ui { background: rgb(var(--h)); } .ts-switch input:checked + .ts-switch-ui::after { transform: translateX(18px); } .ts-switch-sm .ts-switch-ui { width: 34px; height: 19px; } .ts-switch-sm .ts-switch-ui::after { width: 15px; height: 15px; } .ts-switch-sm input:checked + .ts-switch-ui::after { transform: translateX(15px); } /* effects toggles */ .ts-fx-group { margin-bottom: 18px; } .ts-fx-group h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--app-text-soft); margin: 0 0 10px; } .ts-fx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .ts-fx-toggle { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-bg); cursor: pointer; font-size: 0.82rem; } .ts-fx-toggle input { display: none; } .ts-fx-name { color: var(--app-text); } /* preview side */ .ts-edit-side { position: sticky; top: 14px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; } .ts-preview-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; font-weight: 600; color: var(--app-text); } .ts-preview-head i { margin-right: 6px; color: rgb(var(--h)); } .ts-preview-modes { display: flex; gap: 4px; } .ts-pm { width: 32px; height: 30px; border: 1px solid var(--app-border); background: var(--app-bg); border-radius: 8px; cursor: pointer; color: var(--app-text-soft); } .ts-pm.active { background: rgb(var(--h)); color: #fff; border-color: rgb(var(--h)); } .ts-preview-frame { background: var(--app-bg); border: 1px solid var(--app-border); border-radius: 14px; overflow: hidden; margin: 0 auto; transition: 0.25s; } .ts-preview-frame.phone { width: 280px; height: 520px; } .ts-preview-frame.desktop { width: 100%; height: 460px; } .ts-preview-frame iframe { width: 100%; height: 100%; border: 0; background: #fff; } .ts-save-bar { display: flex; gap: 8px; } .ts-save-bar .ts-btn { flex: 1; justify-content: center; } .ts-save-note { font-size: 0.8rem; text-align: center; min-height: 18px; } .ts-save-note.ok { color: #16a34a; } .ts-save-note.err { color: #dc2626; } @media (max-width: 1180px) { .ts-edit-main { grid-template-columns: 150px 1fr; } .ts-tab span { font-size: 0.78rem; } } @media (max-width: 1024px) { .ts-editor { grid-template-columns: 1fr; } .ts-edit-side { position: static; } .ts-preview-frame.phone { width: 100%; max-width: 340px; } /* collapse the side rail back into a horizontal scroll strip on tablets/phones */ .ts-edit-main { grid-template-columns: 1fr; min-height: 0; } .ts-tabs { flex-direction: row; align-items: center; gap: 4px; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--app-border); scrollbar-width: thin; } .ts-tab-group { flex-direction: row; align-items: center; gap: 4px; } .ts-tab-group + .ts-tab-group { margin-top: 0; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--app-border); } .ts-tab-group-label { display: none; } .ts-tab { width: auto; flex: 0 0 auto; padding: 9px 13px; } .ts-tab.active { box-shadow: inset 0 -2px 0 rgb(var(--h)); } } @media (max-width: 560px) { .ts-row2 { grid-template-columns: 1fr; } .ts-tab span { display: none; } .ts-tab { padding: 10px 12px; } .ts-tab i { font-size: 0.92rem; width: auto; } } .ts-btn-publish { width: 100%; justify-content: center; background: linear-gradient(135deg, #16a34a, #059669); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(16, 163, 74, 0.3); } .ts-btn-publish:hover { transform: translateY(-1px); } /* ============================================================ SECTION 23 — Etsy Integration (Owner Console, Phase 5) ============================================================ */ .etsy-wrap { display: flex; flex-direction: column; gap: 18px; } .etsy-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } @media (max-width: 880px) { .etsy-kpis { grid-template-columns: repeat(2, 1fr); } } .etsy-kpi { padding: 14px 16px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; } .etsy-kpi-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; } .etsy-kpi-val { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; } .etsy-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid rgba(var(--h), 0.18); padding-bottom: 2px; } .etsy-tab { background: transparent; border: 0; padding: 10px 14px; border-radius: 10px 10px 0 0; cursor: pointer; font-weight: 600; font-size: 0.9rem; color: inherit; opacity: 0.65; display: inline-flex; gap: 7px; align-items: center; } .etsy-tab:hover { opacity: 0.9; background: rgba(var(--h), 0.08); } .etsy-tab.active { opacity: 1; background: rgba(var(--h), 0.14); box-shadow: inset 0 -2px 0 rgb(var(--h)); } .etsy-pane { display: none; animation: etsyFade 0.25s ease; } .etsy-pane.active { display: block; } @keyframes etsyFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .etsy-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .etsy-filters { display: flex; gap: 8px; flex-wrap: wrap; } .etsy-input { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(var(--h), 0.2); border-radius: 10px; padding: 8px 11px; color: inherit; font-size: 0.88rem; min-width: 120px; } .etsy-input:focus { outline: none; border-color: rgb(var(--h)); box-shadow: 0 0 0 3px rgba(var(--h), 0.18); } .etsy-table-wrap { padding: 6px; border-radius: 14px; overflow-x: auto; } .etsy-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .etsy-table th { text-align: left; padding: 10px 12px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.65; border-bottom: 1px solid rgba(var(--h), 0.16); } .etsy-table td { padding: 11px 12px; border-bottom: 1px solid rgba(var(--h), 0.08); vertical-align: middle; } .etsy-table tr:last-child td { border-bottom: 0; } .etsy-cell-strong { font-weight: 600; } .etsy-cell-sub { font-size: 0.74rem; opacity: 0.6; margin-top: 2px; } .etsy-empty { text-align: center; padding: 26px 12px; opacity: 0.6; } .etsy-mini { margin-top: 8px; font-size: 0.78rem; } .etsy-code { font-family: ui-monospace, monospace; background: rgba(var(--h), 0.12); padding: 3px 8px; border-radius: 7px; font-weight: 600; letter-spacing: 0.02em; } .etsy-code.used { opacity: 0.45; text-decoration: line-through; } .etsy-icon-btn { background: transparent; border: 0; cursor: pointer; color: inherit; opacity: 0.6; padding: 4px 6px; border-radius: 7px; font-size: 0.85rem; } .etsy-icon-btn:hover { opacity: 1; background: rgba(var(--h), 0.12); } .etsy-del:hover { color: #ef4444; background: rgba(239, 68, 68, 0.12); } .etsy-status { min-width: 120px; padding: 5px 8px; font-size: 0.8rem; } .etsy-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 820px) { .etsy-grid2 { grid-template-columns: 1fr; } } .etsy-card { padding: 18px 20px; border-radius: 16px; } .etsy-card h3 { margin: 0 0 6px; font-size: 1rem; display: flex; gap: 8px; align-items: center; } .etsy-hint { font-size: 0.8rem; opacity: 0.7; line-height: 1.5; margin: 0 0 12px; } .etsy-hint code { background: rgba(var(--h), 0.1); padding: 1px 5px; border-radius: 5px; font-size: 0.76rem; } .etsy-textarea { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(var(--h), 0.2); border-radius: 10px; padding: 11px; color: inherit; font-family: ui-monospace, monospace; font-size: 0.82rem; resize: vertical; } .etsy-textarea:focus { outline: none; border-color: rgb(var(--h)); } .etsy-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .etsy-result { margin-top: 10px; font-size: 0.85rem; min-height: 1.2em; } .etsy-ok { color: #16a34a; font-weight: 600; } .etsy-bad { color: #ef4444; font-weight: 600; } .etsy-preview { margin-top: 12px; } .etsy-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed rgba(var(--h), 0.3); border-radius: 14px; padding: 28px 16px; cursor: pointer; text-align: center; transition: 0.2s; } .etsy-drop:hover { border-color: rgb(var(--h)); background: rgba(var(--h), 0.06); } .etsy-drop i { font-size: 1.6rem; opacity: 0.7; } .etsy-map-form { display: grid; grid-template-columns: auto 1fr 1fr auto auto; gap: 10px; align-items: center; } @media (max-width: 820px) { .etsy-map-form { grid-template-columns: 1fr 1fr; } } .etsy-status-row { margin-bottom: 14px; } .etsy-conn { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 0.85rem; padding: 5px 12px; border-radius: 999px; } .etsy-conn i { font-size: 0.6rem; } .etsy-conn.ok { color: #16a34a; background: rgba(16, 163, 74, 0.12); } .etsy-conn.off { color: #f59e0b; background: rgba(245, 158, 11, 0.12); } .etsy-api-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px; } @media (max-width: 820px) { .etsy-api-form { grid-template-columns: 1fr; } } .etsy-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; } .etsy-field span { opacity: 0.75; font-weight: 600; } /* ============================================================ SECTION 24 — Market Analytics (Owner Console, Phase 6) ============================================================ */ .an-wrap { display: flex; flex-direction: column; gap: 18px; } .an-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .an-range { display: inline-flex; gap: 4px; background: rgba(var(--h), 0.08); padding: 4px; border-radius: 12px; } .an-chip { background: transparent; border: 0; padding: 7px 14px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 0.82rem; color: inherit; opacity: 0.7; } .an-chip:hover { opacity: 1; } .an-chip.active { background: rgb(var(--h)); color: #fff; opacity: 1; box-shadow: 0 4px 12px rgba(var(--h), 0.35); } .an-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 880px) { .an-kpis { grid-template-columns: repeat(2, 1fr); } } .an-kpi { padding: 16px 18px; border-radius: 16px; display: flex; flex-direction: column; gap: 5px; } .an-kpi-lbl { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; display: flex; gap: 7px; align-items: center; } .an-kpi-lbl i { color: rgb(var(--h)); } .an-kpi-val { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .an-kpi-sub { font-size: 0.72rem; opacity: 0.6; } .an-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 1040px) { .an-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .an-grid { grid-template-columns: 1fr; } } .an-span2 { grid-column: span 2; } @media (max-width: 680px) { .an-span2 { grid-column: span 1; } } .an-card { padding: 18px 20px; border-radius: 16px; display: flex; flex-direction: column; min-height: 0; } .an-card h3 { margin: 0 0 14px; font-size: 0.98rem; display: flex; gap: 8px; align-items: center; } .an-card h3 i { color: rgb(var(--h)); } .an-canvas-wrap { position: relative; height: 280px; } .an-canvas-wrap.sm { height: 220px; } .an-empty { text-align: center; padding: 40px 12px; opacity: 0.55; font-size: 0.86rem; } .an-funnel { display: flex; flex-direction: column; gap: 14px; } .an-funnel-row { display: flex; flex-direction: column; gap: 5px; } .an-funnel-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.84rem; } .an-funnel-head i { opacity: 0.7; margin-right: 5px; } .an-funnel-head b { font-variant-numeric: tabular-nums; font-size: 0.95rem; } .an-funnel-bar { height: 12px; border-radius: 7px; background: rgba(var(--h), 0.1); overflow: hidden; } .an-funnel-bar span { display: block; height: 100%; border-radius: 7px; transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .an-funnel-conv { font-size: 0.7rem; opacity: 0.55; align-self: flex-end; } .an-rsvp { display: flex; flex-direction: column; gap: 10px; } .an-rsvp-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; background: rgba(var(--h), 0.06); border-radius: 11px; font-size: 0.88rem; } .an-rsvp-row b { font-variant-numeric: tabular-nums; font-size: 1.05rem; } .an-pos { color: #16a34a; } .an-neg { color: #ef4444; } /* ============================================================ SECTION 25 — Finance & Orders (Owner Console, Phase 7) ============================================================ */ /* Finance */ .fin-wrap { display: flex; flex-direction: column; gap: 18px; } .fin-kpis { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 12px; } @media (max-width: 880px) { .fin-kpis { grid-template-columns: 1fr 1fr; } } .fin-kpi { padding: 16px 18px; border-radius: 16px; display: flex; flex-direction: column; gap: 4px; } .fin-hero { background: linear-gradient(135deg, rgba(var(--h), 0.18), rgba(var(--h), 0.04)); } .fin-kpi-lbl { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.72; display: flex; gap: 7px; align-items: center; } .fin-kpi-lbl i { color: rgb(var(--h)); } .fin-kpi-val { font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .fin-kpi-sub { font-size: 0.72rem; opacity: 0.6; } .fin-pos { color: #16a34a; } .fin-neg { color: #ef4444; } .fin-warn { color: #f59e0b; } .fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 820px) { .fin-grid { grid-template-columns: 1fr; } } .fin-card { padding: 18px 20px; border-radius: 16px; } .fin-card h3 { margin: 0 0 14px; font-size: 0.98rem; display: flex; gap: 8px; align-items: center; } .fin-card h3 i { color: rgb(var(--h)); } .fin-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .fin-head-row h3 { margin: 0; } .fin-empty { text-align: center; padding: 24px 12px; opacity: 0.55; font-size: 0.86rem; } .fin-channels { display: flex; flex-direction: column; gap: 12px; } .fin-ch-head { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 5px; } .fin-ch-head small { opacity: 0.55; } .fin-ch-bar { height: 11px; border-radius: 6px; background: rgba(var(--h), 0.1); overflow: hidden; } .fin-ch-bar span { display: block; height: 100%; border-radius: 6px; transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .fin-ledger { display: flex; flex-direction: column; gap: 8px; } .fin-led-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-size: 0.88rem; border-radius: 9px; } .fin-led-row b { font-variant-numeric: tabular-nums; } .fin-led-total { background: rgba(var(--h), 0.1); font-weight: 700; margin-top: 4px; font-size: 1rem; } .fin-table-wrap { overflow-x: auto; margin-top: 6px; } .fin-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .fin-table th { text-align: left; padding: 10px 12px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.65; border-bottom: 1px solid rgba(var(--h), 0.16); } .fin-table td { padding: 11px 12px; border-bottom: 1px solid rgba(var(--h), 0.08); vertical-align: middle; } .fin-cell-strong { font-weight: 600; } .fin-cell-sub { font-size: 0.74rem; opacity: 0.6; margin-top: 2px; } .fin-actions-cell { display: flex; gap: 6px; flex-wrap: wrap; } .fin-act { padding: 5px 11px !important; font-size: 0.78rem !important; } .fin-danger { color: #ef4444 !important; } .fin-done { opacity: 0.4; } .fin-badge { padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; text-transform: capitalize; } .fin-pending { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } .fin-approved { background: rgba(14, 165, 233, 0.15); color: #0ea5e9; } .fin-paid { background: rgba(22, 163, 74, 0.15); color: #16a34a; } .fin-rejected { background: rgba(239, 68, 68, 0.15); color: #ef4444; } /* Orders */ .ord-wrap { display: flex; flex-direction: column; gap: 18px; } .ord-pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 680px) { .ord-pipeline { grid-template-columns: repeat(2, 1fr); } } .ord-stage { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; cursor: pointer; border: 1px solid rgba(var(--h), 0.14); background: rgba(var(--h), 0.04); color: inherit; transition: 0.2s; } .ord-stage:hover { background: rgba(var(--h), 0.1); } .ord-stage.active { border-color: rgb(var(--h)); background: rgba(var(--h), 0.14); box-shadow: 0 4px 14px rgba(var(--h), 0.2); } .ord-stage-n { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; } .ord-stage-l { font-size: 0.76rem; opacity: 0.7; } .ord-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .ord-filters { display: flex; gap: 8px; flex-wrap: wrap; } .ord-input { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(var(--h), 0.2); border-radius: 10px; padding: 8px 11px; color: inherit; font-size: 0.86rem; min-width: 130px; } .ord-input:focus { outline: none; border-color: rgb(var(--h)); box-shadow: 0 0 0 3px rgba(var(--h), 0.18); } .ord-table-wrap { padding: 6px; border-radius: 14px; overflow-x: auto; } .ord-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .ord-table th { text-align: left; padding: 10px 12px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.65; border-bottom: 1px solid rgba(var(--h), 0.16); } .ord-table td { padding: 11px 12px; border-bottom: 1px solid rgba(var(--h), 0.08); vertical-align: middle; } .ord-table tr:last-child td { border-bottom: 0; } .ord-cell-strong { font-weight: 600; } .ord-cell-sub { font-size: 0.74rem; opacity: 0.6; margin-top: 2px; } .ord-chan { display: inline-flex; gap: 5px; align-items: center; font-size: 0.78rem; font-weight: 600; padding: 3px 9px; border-radius: 7px; } .ord-chan-web { background: rgba(99, 102, 241, 0.14); color: #6366f1; } .ord-chan-etsy { background: rgba(245, 118, 42, 0.16); color: #f5762a; } .ord-status { min-width: 120px; padding: 5px 8px; font-size: 0.8rem; } .ord-badge { padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; text-transform: capitalize; } .ord-pending { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } .ord-paid { background: rgba(22, 163, 74, 0.15); color: #16a34a; } .ord-refunded { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .ord-failed { background: rgba(100, 116, 139, 0.18); color: #64748b; } /* ===================================================================== SECTION 26 — Owner Console · Customers / Settings / Audit (Phase 8) ===================================================================== */ /* ---- shared KPI strip reuse (cust + aud) ---- */ .cust-kpis, .aud-kpis { display: grid; gap: 14px; margin-bottom: 18px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .cust-kpi, .aud-kpi { padding: 16px 18px; border-radius: 16px; display: flex; flex-direction: column; gap: 6px; } .cust-kpi-lbl, .aud-kpi-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.65; } .cust-kpi-val, .aud-kpi-val { font-size: 1.6rem; font-weight: 700; line-height: 1; } .cust-warn { color: #f59e0b; } /* ---- card shell ---- */ .cust-card, .set-card, .aud-card { padding: 20px 22px; border-radius: 18px; } /* ---- customers toolbar + table ---- */ .cust-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .cust-search { position: relative; flex: 1 1 220px; min-width: 180px; } .cust-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: 0.5; font-size: 0.85rem; } .cust-search input { width: 100%; padding: 9px 12px 9px 32px; border-radius: 10px; border: 1px solid rgba(var(--h), 0.25); background: rgba(var(--h), 0.05); color: inherit; font: inherit; } .cust-select { padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(var(--h), 0.25); background: rgba(var(--h), 0.05); color: inherit; font: inherit; } .cust-table-wrap, .fin-table-wrap { overflow-x: auto; } .cust-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .cust-table th { text-align: left; padding: 10px 12px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; border-bottom: 1px solid rgba(var(--h), 0.18); } .cust-table td { padding: 11px 12px; border-bottom: 1px solid rgba(var(--h), 0.08); vertical-align: middle; } .cust-row { cursor: pointer; transition: background 0.15s; } .cust-row:hover { background: rgba(var(--h), 0.07); } .cust-cell-strong { font-weight: 600; } .cust-cell-sub { font-size: 0.78rem; opacity: 0.6; } .cust-empty, .aud-empty, .set-empty { text-align: center; padding: 26px; opacity: 0.55; font-size: 0.9rem; } .cust-link { color: rgb(var(--h)); text-decoration: none; } .cust-link:hover { text-decoration: underline; } /* role + status badges */ .cust-role, .cust-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; text-transform: capitalize; } .cust-role-couple { background: rgba(99, 102, 241, 0.16); color: #818cf8; } .cust-role-affiliate { background: rgba(236, 72, 153, 0.16); color: #ec4899; } .cust-role-admin { background: rgba(245, 158, 11, 0.16); color: #f59e0b; } .cust-role-owner { background: rgba(16, 185, 129, 0.16); color: #10b981; } .cust-active { background: rgba(16, 185, 129, 0.16); color: #10b981; } .cust-suspended { background: rgba(239, 68, 68, 0.16); color: #ef4444; } .cust-deleted { background: rgba(148, 163, 184, 0.18); color: #94a3b8; } .cust-role-deleted { background: rgba(148, 163, 184, 0.18); color: #94a3b8; } .cust-ord-paid { background: rgba(16, 185, 129, 0.16); color: #10b981; } .cust-ord-pending { background: rgba(245, 158, 11, 0.16); color: #f59e0b; } .cust-ord-refunded, .cust-ord-failed { background: rgba(239, 68, 68, 0.16); color: #ef4444; } .cust-inv-published { background: rgba(16, 185, 129, 0.16); color: #10b981; } .cust-inv-draft { background: rgba(148, 163, 184, 0.18); color: #94a3b8; } /* ---- customer drawer ---- */ .cust-drawer { position: fixed; inset: 0; z-index: 120; } .cust-drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); } .cust-drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 92vw); padding: 22px; overflow-y: auto; border-radius: 18px 0 0 18px; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35); animation: custSlideIn 0.22s ease; } @keyframes custSlideIn { from { transform: translateX(40px); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } } .cust-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .cust-drawer-head h3 { margin: 0; font-size: 1.2rem; } .cust-drawer-close { background: rgba(var(--h), 0.1); border: none; color: inherit; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 1rem; } .cust-drawer-close:hover { background: rgba(var(--h), 0.2); } .cust-drawer-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .cust-meta-item { display: flex; flex-direction: column; } .cust-meta-item small { font-size: 0.66rem; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.05em; } .cust-drawer-actions { margin-bottom: 18px; display: flex; gap: 8px; } .cust-danger { color: #ef4444; } .cust-drawer-section { margin-bottom: 18px; } .cust-drawer-section h4 { margin: 0 0 8px; font-size: 0.86rem; opacity: 0.8; } .cust-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(var(--h), 0.08); font-size: 0.85rem; } .cust-line:last-child { border-bottom: none; } /* ---- settings ---- */ .set-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .set-head-row h3 { margin: 0 0 4px; } .set-sub { margin: 0; font-size: 0.85rem; opacity: 0.6; max-width: 520px; } .set-form { display: grid; gap: 20px; } .set-group { border: 1px solid rgba(var(--h), 0.18); border-radius: 14px; padding: 14px 16px 6px; margin: 0; } .set-group legend { padding: 0 8px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; font-weight: 700; } .set-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(var(--h), 0.08); } .set-row:last-child { border-bottom: none; } .set-label { display: flex; flex-direction: column; gap: 3px; } .set-label span { font-weight: 600; font-size: 0.92rem; } .set-label small { font-size: 0.76rem; opacity: 0.55; max-width: 380px; } .set-input { flex: 0 0 220px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(var(--h), 0.25); background: rgba(var(--h), 0.05); color: inherit; font: inherit; } .set-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(var(--h), 0.12); } .set-status { font-size: 0.82rem; opacity: 0.7; } /* toggle switch */ .set-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; } .set-switch input { opacity: 0; width: 0; height: 0; } .set-slider { position: absolute; inset: 0; background: rgba(148, 163, 184, 0.4); border-radius: 999px; transition: 0.2s; cursor: pointer; } .set-slider:before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.2s; } .set-switch input:checked + .set-slider { background: rgb(var(--h)); } .set-switch input:checked + .set-slider:before { transform: translateX(20px); } /* ---- audit timeline ---- */ .aud-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; } .aud-search { position: relative; flex: 1 1 220px; min-width: 180px; } .aud-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: 0.5; font-size: 0.85rem; } .aud-search input { width: 100%; padding: 9px 12px 9px 32px; border-radius: 10px; border: 1px solid rgba(var(--h), 0.25); background: rgba(var(--h), 0.05); color: inherit; font: inherit; } .aud-chips { display: flex; flex-wrap: wrap; gap: 6px; } .aud-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(var(--h), 0.25); background: transparent; color: inherit; font-size: 0.78rem; cursor: pointer; transition: 0.15s; text-transform: capitalize; } .aud-chip:hover { background: rgba(var(--h), 0.1); } .aud-chip.active { background: rgb(var(--h)); color: #fff; border-color: transparent; } .aud-timeline { list-style: none; margin: 0; padding: 0; position: relative; } .aud-timeline:before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: rgba(var(--h), 0.15); } .aud-event { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; position: relative; } .aud-dot { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--h), 0.12); z-index: 1; font-size: 0.8rem; } .aud-i-danger { color: #ef4444; } .aud-i-good { color: #10b981; } .aud-i-info { color: rgb(var(--h)); } .aud-body { flex: 1; min-width: 0; } .aud-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .aud-action { font-size: 0.9rem; } .aud-ent { font-size: 0.72rem; padding: 1px 8px; border-radius: 999px; background: rgba(var(--h), 0.1); opacity: 0.85; } .aud-line2 { font-size: 0.78rem; opacity: 0.62; margin-top: 2px; word-break: break-word; } .aud-meta { opacity: 0.85; } .aud-time { flex: 0 0 auto; font-size: 0.74rem; opacity: 0.5; font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 640px) { .set-row { flex-direction: column; align-items: flex-start; gap: 8px; } .set-input { flex: 1 1 auto; width: 100%; } .aud-time { display: none; } } /* ============================================================ SECTION 27 — RESELLER WHITE-LABEL · REPLICA LP · MEMBERSHIP (Phase 9) ============================================================ */ /* ---- 27.1 Membership widget (dashboard overview) ---- */ .ms-card { --h: 212, 160, 90; padding: 18px 22px; border-radius: 20px; margin: 0 0 18px; display: flex; flex-direction: column; gap: 16px; } .ms-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ms-headleft { display: flex; align-items: center; gap: 14px; } .ms-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(var(--h), 0.9), rgba(var(--h), 0.55)); color: #fff; font-size: 1.15rem; box-shadow: 0 6px 18px rgba(var(--h), 0.35); } .ms-plan { display: block; font-family: 'Fraunces', serif; font-size: 1.12rem; font-weight: 600; } .ms-expiry { display: block; font-size: 0.78rem; opacity: 0.6; margin-top: 2px; } .ms-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ms-chip { font-size: 0.74rem; padding: 4px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(var(--h), 0.25); } .ms-chip.ok { color: #10b981; border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.08); } .ms-chip.warn { color: #ef4444; border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.08); } .ms-chip.neutral { opacity: 0.7; } .ms-upgrade { font-size: 0.78rem; padding: 6px 14px; border-radius: 999px; text-decoration: none; color: #fff; background: linear-gradient(135deg, rgb(var(--h)), rgba(var(--h), 0.7)); display: inline-flex; align-items: center; gap: 6px; transition: 0.15s; box-shadow: 0 4px 14px rgba(var(--h), 0.3); } .ms-upgrade:hover { transform: translateY(-1px); filter: brightness(1.05); } .ms-meter { display: flex; flex-direction: column; gap: 8px; } .ms-meterhead { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; } .ms-meterval strong { font-size: 1.05rem; } .ms-rem { opacity: 0.55; font-size: 0.8rem; } .ms-bar { height: 10px; border-radius: 999px; background: rgba(var(--h), 0.14); overflow: hidden; } .ms-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--h)), rgba(var(--h), 0.6)); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .ms-bar > span.full { background: linear-gradient(90deg, #ef4444, #f97316); } /* ---- 27.2 Reseller branding form extras (affiliate marketing page) ---- */ .rs-brandcard .rs-grouptitle { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.65; margin: 1.6rem 0 0.7rem; display: flex; align-items: center; gap: 8px; } .rs-brandcard .rs-grouptitle:first-of-type { margin-top: 1.1rem; } .rs-colorrow { display: flex; gap: 8px; align-items: center; } .rs-colorrow input[type='color'] { width: 46px; height: 42px; border: none; border-radius: 10px; background: none; cursor: pointer; padding: 0; } .rs-colorrow .share-input { flex: 1; } .rs-hint { font-weight: 400; opacity: 0.5; font-size: 0.78rem; text-transform: none; letter-spacing: 0; } .rs-replicatoggle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 0.4rem; padding: 0.85rem 1rem; border-radius: 14px; background: rgba(160, 125, 72, 0.07); border: 1px solid rgba(160, 125, 72, 0.18); } .rs-replicatoggle > span { font-size: 0.9rem; } .rs-replicalink { margin-left: auto; font-size: 0.8rem; } /* ---- 27.3 Owner customers · membership panel (drawer) ---- */ .cd-membership { --h: 212, 160, 90; } .cd-ms-summary { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .cd-ms-row { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; } .cd-ms-row .cust-cell-sub { flex: 0 0 64px; } .cd-ms-meter { margin-top: 4px; } .cd-ms-meterhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .cd-ms-bar { height: 8px; border-radius: 999px; background: rgba(var(--h), 0.14); overflow: hidden; } .cd-ms-bar > span { display: block; height: 100%; background: linear-gradient(90deg, rgb(var(--h)), rgba(var(--h), 0.6)); } .cd-ms-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(var(--h), 0.06); border: 1px solid rgba(var(--h), 0.16); margin-bottom: 14px; } .cd-ms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .cd-ms-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.76rem; opacity: 0.85; } .cd-ms-grid select, .cd-ms-grid input[type='number'], .cd-ms-note { padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(var(--h), 0.22); background: rgba(255, 255, 255, 0.04); color: inherit; font-size: 0.86rem; } .cd-ms-acc { flex-direction: row !important; align-items: center; gap: 8px; grid-column: 1 / -1; } .cd-ms-acc input { width: auto; } .cd-ms-quick { display: flex; gap: 6px; flex-wrap: wrap; } .cd-ms-quick .ts-btn { font-size: 0.74rem; padding: 5px 11px; } .cd-ms-note { width: 100%; } .cd-ms-save { align-self: flex-start; } .cd-ms-msg { font-size: 0.8rem; } .cd-ms-msg.ok { color: #10b981; } .cd-ms-msg.err { color: #ef4444; } .cd-ms-loghead { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.55; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .cd-mslog span { font-size: 0.82rem; } .cust-badge.cust-neutral { background: rgba(160, 125, 72, 0.16); color: inherit; } /* ============================================================ 27.4 — REPLICA LANDING PAGE (self-contained, brand-aware) Uses --rs-accent set inline from the reseller's chosen colour. ============================================================ */ .rs-replica { --rs-accent: #a07d48; --rs-ink: #1c1814; --rs-soft: #6b6359; --rs-bg: #faf7f2; --rs-card: #ffffff; font-family: 'Inter Tight', system-ui, sans-serif; color: var(--rs-ink); background: var(--rs-bg); min-height: 100vh; line-height: 1.55; } .rs-replica a { color: inherit; } .rs-rep-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 1rem 5vw; background: rgba(250, 247, 242, 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .rs-rep-brand { text-decoration: none; display: flex; align-items: center; gap: 10px; } .rs-rep-logo { max-height: 40px; width: auto; } .rs-rep-wordmark { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; color: var(--rs-ink); } .rs-rep-navlinks { display: flex; align-items: center; gap: 1.6rem; } .rs-rep-navlinks a { text-decoration: none; font-size: 0.92rem; color: var(--rs-soft); transition: 0.15s; } .rs-rep-navlinks a:hover { color: var(--rs-ink); } .rs-rep-navcta { padding: 0.55rem 1.2rem; border-radius: 999px; background: var(--rs-accent); color: #fff !important; font-weight: 500; box-shadow: 0 6px 18px color-mix(in srgb, var(--rs-accent) 38%, transparent); } .rs-rep-hero { position: relative; padding: 7rem 5vw 6rem; text-align: center; background-size: cover; background-position: center; color: var(--rs-ink); } .rs-rep-hero[style*='background-image'] { color: #fff; } .rs-rep-hero-inner { max-width: 760px; margin: 0 auto; } .rs-rep-eyebrow { display: inline-block; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid currentColor; opacity: 0.85; margin-bottom: 1.6rem; } .rs-rep-hero h1 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; margin: 0 0 1.2rem; } .rs-rep-hero p { font-size: 1.1rem; opacity: 0.85; max-width: 560px; margin: 0 auto 2rem; } .rs-rep-herocta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .rs-rep-micro { margin-top: 1.4rem; font-size: 0.82rem; opacity: 0.7; } .rs-rep-cta { text-decoration: none; padding: 0.85rem 1.7rem; border-radius: 999px; font-weight: 500; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.55rem; transition: 0.18s; cursor: pointer; } .rs-rep-cta.solid { background: var(--rs-accent); color: #fff; box-shadow: 0 10px 28px color-mix(in srgb, var(--rs-accent) 40%, transparent); } .rs-rep-cta.solid:hover { transform: translateY(-2px); filter: brightness(1.06); } .rs-rep-cta.ghost { background: transparent; border: 1px solid currentColor; } .rs-rep-cta.ghost:hover { background: color-mix(in srgb, var(--rs-accent) 12%, transparent); } .rs-rep-cta.lg { padding: 1.05rem 2.2rem; font-size: 1.05rem; } .rs-rep-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; padding: 4rem 5vw; max-width: 1200px; margin: 0 auto; } .rs-rep-feature { background: var(--rs-card); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 18px; padding: 1.8rem 1.4rem; text-align: center; transition: 0.2s; } .rs-rep-feature:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.07); } .rs-rep-fico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 1.1rem; background: color-mix(in srgb, var(--rs-accent) 14%, transparent); color: var(--rs-accent); font-size: 1.3rem; } .rs-rep-feature h4 { font-family: 'Fraunces', serif; font-size: 1.18rem; font-weight: 600; margin: 0 0 0.5rem; } .rs-rep-feature p { font-size: 0.9rem; color: var(--rs-soft); margin: 0; } .rs-rep-pricing { padding: 5rem 5vw; max-width: 1080px; margin: 0 auto; } .rs-rep-sectionhead { text-align: center; margin-bottom: 3rem; } .rs-rep-label { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rs-accent); font-weight: 600; } .rs-rep-sectionhead h2 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0.6rem 0 0.5rem; } .rs-rep-sectionhead p { color: var(--rs-soft); margin: 0; } .rs-rep-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; align-items: stretch; } .rs-rep-plan { position: relative; background: var(--rs-card); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 22px; padding: 2.2rem 1.8rem; display: flex; flex-direction: column; transition: 0.2s; } .rs-rep-plan:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.08); } .rs-rep-plan.featured { border-color: var(--rs-accent); border-width: 2px; box-shadow: 0 22px 52px color-mix(in srgb, var(--rs-accent) 22%, transparent); } .rs-rep-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--rs-accent); color: #fff; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35rem 0.9rem; border-radius: 999px; } .rs-rep-plan h3 { font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 600; margin: 0 0 0.8rem; } .rs-rep-price { font-size: 2.4rem; font-weight: 700; font-family: 'Fraunces', serif; margin-bottom: 1.4rem; } .rs-rep-price span { font-size: 0.9rem; font-weight: 400; opacity: 0.55; } .rs-rep-feats { list-style: none; padding: 0; margin: 0 0 1.8rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; } .rs-rep-feats li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.92rem; color: var(--rs-soft); } .rs-rep-feats i { color: var(--rs-accent); margin-top: 0.25rem; font-size: 0.8rem; } .rs-rep-plan .rs-rep-cta { width: 100%; justify-content: center; } .rs-rep-empty { text-align: center; color: var(--rs-soft); grid-column: 1 / -1; } .rs-rep-final { text-align: center; padding: 5rem 5vw; background: color-mix(in srgb, var(--rs-accent) 8%, var(--rs-bg)); } .rs-rep-final h2 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 1.8rem; } .rs-rep-footer { text-align: center; padding: 3rem 5vw 3.5rem; border-top: 1px solid rgba(0, 0, 0, 0.07); } .rs-rep-footlogo { max-height: 46px; width: auto; margin: 0 auto 1rem; display: block; } .rs-rep-footname { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 600; margin: 0 0 1rem; } .rs-rep-socials { display: flex; gap: 1rem; justify-content: center; margin-bottom: 1.4rem; } .rs-rep-social { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; border: 1px solid color-mix(in srgb, var(--rs-accent) 35%, transparent); color: var(--rs-accent); font-size: 1.05rem; transition: 0.18s; } .rs-rep-social:hover { background: var(--rs-accent); color: #fff; transform: translateY(-2px); } .rs-rep-powered { font-size: 0.78rem; opacity: 0.55; } .rs-rep-powered a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } .rs-rep-powered svg { height: 14px; width: auto; vertical-align: middle; } @media (max-width: 860px) { .rs-rep-features { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .rs-rep-navlinks a:not(.rs-rep-navcta) { display: none; } .rs-rep-features { grid-template-columns: 1fr; } .cd-ms-grid { grid-template-columns: 1fr; } .ms-head { flex-direction: column; align-items: flex-start; } } /* ============================================================ SECTION 28 — CANVAS BUILDER (Theme Studio · Tahap 1) Professional Elementor-style editor: dark workspace + brand gold. ============================================================ */ .cb { /* Modern solid black-and-white palette (Saasfly / Vercel style): neutral near-black surfaces, crisp white foreground, white accent. --cb-gold kept as an alias so legacy references stay valid, but it now resolves to a clean white accent instead of the old 2010-era gold. */ --cb-bg: #0a0a0a; --cb-panel: #111111; --cb-elev: #1a1a1a; --cb-border: rgba(255, 255, 255, 0.1); --cb-border-strong: rgba(255, 255, 255, 0.18); --cb-fg: #fafafa; --cb-muted: #8a8a8a; --cb-accent: #ffffff; --cb-accent-soft: rgba(255, 255, 255, 0.1); --cb-gold: #ffffff; --cb-gold-soft: rgba(255, 255, 255, 0.12); --cb-radius: 10px; position: relative; display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 560px; background: radial-gradient(ellipse 900px 600px at 50% -10%, rgba(255, 255, 255, 0.04), transparent 60%), linear-gradient(180deg, #0d0d0d 0%, #0a0a0a 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; overflow: hidden; color: var(--cb-fg); font-size: 13px; box-shadow: 0 20px 80px -20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04); /* NOTE: backdrop-filter sengaja TIDAK dipakai di .cb. .cb punya background gradient solid (opaque) sehingga blur backdrop tidak terlihat efeknya, TAPI ia membuat .cb menjadi containing-block untuk semua descendant position:fixed (.cb-modal, .cb-ctx, .cb-export-menu, fullscreen) sekaligus stacking-context baru — ini membuat overlay/modal terjebak & menutupi toolbar sehingga menu tidak bisa diklik. */ } /* ===== WORKSPACE TABS (Elementor-style: Canvas <-> Theme Settings) ===== */ .cb-ws-tabs { display: flex; align-items: stretch; gap: 4px; padding: 6px 10px 0; background: var(--cb-elev); border-bottom: 1px solid var(--cb-border); flex: 0 0 auto; } .cb-ws-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: none; background: transparent; cursor: pointer; color: var(--cb-muted); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; border-radius: 9px 9px 0 0; border: 1px solid transparent; border-bottom: none; position: relative; top: 1px; transition: color 0.15s, background 0.15s; } .cb-ws-tab i { font-size: 13px; } .cb-ws-tab:hover { color: var(--cb-fg); background: rgba(255, 255, 255, 0.04); } .cb-ws-tab.active { color: var(--cb-fg); background: var(--cb-panel); border-color: var(--cb-border); border-bottom: 1px solid var(--cb-panel); } .cb-ws-tab.active::after { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; background: var(--cb-accent); border-radius: 2px; } .cb-ws-spacer { flex: 1 1 0; } .cb-ws-exit { align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; color: var(--cb-muted); font-size: 12px; font-weight: 600; text-decoration: none; border-radius: 8px; transition: color 0.15s, background 0.15s; } .cb-ws-exit:hover { color: var(--cb-fg); background: rgba(255, 255, 255, 0.06); } /* View containers fill the remaining workspace height; only the active one shows. */ .cb-view { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; } .cb-view.active { display: flex; } /* THEME SETTINGS view — embedded Theme Studio editor */ .cb-settings-frame-wrap { position: relative; flex: 1 1 auto; min-height: 0; background: var(--cb-bg); } .cb-settings-frame { width: 100%; height: 100%; border: 0; display: block; background: transparent; } .cb-settings-loader { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: var(--cb-muted); background: var(--cb-bg); z-index: 2; } .cb-settings-loader i { font-size: 30px; color: var(--cb-gold); } .cb-settings-loader p { margin: 0; font-size: 13px; } /* ============================================================ CODE IDE — live-coding workspace (Code view) — VS Code style Full-screen 3 columns: [ live preview | editors | AI chat ] with draggable splitters. Dark editor theme. ============================================================ */ /* Code mode = full screen. Break the .cb card out of the page flow so the IDE uses the entire viewport (VS-Code feel). The canvas view (rail/toolbar) is already hidden by .cb-view:not(.active). */ .cb.cb-on-code { position: fixed; inset: 0; height: 100vh; min-height: 0; max-height: none; border: 0; border-radius: 0; z-index: 60; } .cb-view[data-view='code'] { padding: 0; } .cb-ide { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; background: var(--cb-bg); } /* ---- top toolbar strip ---- */ .cb-ide-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; padding: 8px 14px; border-bottom: 1px solid var(--cb-border); background: var(--cb-panel-2, rgba(255, 255, 255, 0.03)); } .cb-ide-mode { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cb-border); border-radius: 8px; overflow: hidden; padding-left: 8px; } .cb-ide-modelabel { font-size: 11px; color: var(--cb-muted); letter-spacing: 0.04em; text-transform: uppercase; } .cb-ide-modebtn { appearance: none; border: 0; background: transparent; color: var(--cb-muted); font: inherit; font-size: 12px; padding: 6px 12px; cursor: pointer; transition: background 0.15s, color 0.15s; } .cb-ide-modebtn:hover { color: var(--cb-text); } .cb-ide-modebtn.active { background: var(--cb-gold-soft); color: var(--cb-gold); } .cb-ide-actions { margin-left: auto; display: inline-flex; gap: 6px; } .cb-ide-btn { appearance: none; border: 1px solid var(--cb-border); background: transparent; color: var(--cb-text); font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: border-color 0.15s, background 0.15s; } .cb-ide-btn:hover { border-color: var(--cb-border-strong); background: rgba(255, 255, 255, 0.04); } .cb-ide-btn-primary { border-color: var(--cb-gold); color: var(--cb-gold); background: var(--cb-gold-soft); } .cb-ide-btn-primary:hover { filter: brightness(1.15); } .cb-ide-btn-publish { border-color: #35c98a; color: #051b12; background: #35c98a; font-weight: 600; } .cb-ide-btn-publish:hover { filter: brightness(1.08); } .cb-ide-btn-publish:disabled { opacity: 0.6; cursor: default; } /* JFY-ify (magic bind) button — violet accent */ .cb-ide-btn-jfy { border-color: #8b5cf6; color: #fff; background: linear-gradient(135deg, #8b5cf6, #6d5cf6); font-weight: 600; } .cb-ide-btn-jfy:hover { filter: brightness(1.08); } .cb-ide-btn-jfy:disabled { opacity: 0.6; cursor: default; } /* ---- Token "Data" panel modal ---- */ .cb-tok-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; } .cb-tok-head span { font-size: 12px; opacity: 0.7; } .cb-tok-claude { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .cb-tok-claude span { font-size: 11.5px; opacity: 0.7; } .cb-tok-claudebtn { align-self: flex-start; padding: 9px 16px; border: 0; border-radius: 8px; background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: transform 0.15s, opacity 0.15s; } .cb-tok-claudebtn:hover { transform: translateY(-1px); } .cb-tok-claudebtn:disabled { opacity: 0.6; cursor: default; } .cb-tok-group { margin-bottom: 14px; } .cb-tok-gname { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; margin-bottom: 6px; } .cb-tok-list { display: flex; flex-wrap: wrap; gap: 6px; } .cb-tok-chip { font-family: ui-monospace, monospace; font-size: 12px; padding: 4px 9px; border: 1px solid rgba(120, 120, 140, 0.35); border-radius: 6px; background: rgba(140, 140, 160, 0.08); color: inherit; cursor: pointer; transition: all 0.15s; } .cb-tok-chip:hover { border-color: #8b5cf6; transform: translateY(-1px); } .cb-tok-chip.used { border-color: #35c98a; background: rgba(53, 201, 138, 0.16); color: #0b7a4f; } .cb-tok-empty { opacity: 0.6; font-size: 13px; } /* ---- body: 3 columns ---- */ .cb-ide-body { display: flex; flex: 1 1 auto; min-height: 0; width: 100%; } /* draggable splitter */ .cb-ide-split { flex: 0 0 6px; cursor: col-resize; background: var(--cb-border); position: relative; transition: background 0.15s; } .cb-ide-split:hover, .cb-ide-split.dragging { background: var(--cb-gold); } .cb-ide-split::after { content: ''; position: absolute; inset: 0 -4px; } /* LEFT: live preview */ .cb-ide-preview { display: flex; flex-direction: column; flex: 0 0 34%; min-width: 220px; background: #0b0b0d; overflow: hidden; } .cb-ide-preview-head { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 12px; border-bottom: 1px solid var(--cb-border); font-size: 12px; color: var(--cb-muted); } .cb-ide-preview-head em { font-style: normal; opacity: 0.6; } .cb-ide-dev { margin-left: auto; display: inline-flex; gap: 2px; } .cb-ide-devbtn { appearance: none; border: 1px solid var(--cb-border); background: transparent; color: var(--cb-muted); font-size: 12px; width: 30px; height: 26px; border-radius: 7px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .cb-ide-devbtn:hover { color: var(--cb-text); } .cb-ide-devbtn.active { border-color: var(--cb-gold); color: var(--cb-gold); } .cb-ide-frame-wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 12px; } .cb-ide-frame { width: 100%; height: 100%; border: 0; background: #fff; border-radius: 6px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); } .cb-ide-frame-wrap[data-dev='mobile'] .cb-ide-frame { width: 390px; max-width: 100%; } .cb-ide-frame-wrap[data-dev='tablet'] .cb-ide-frame { width: 768px; max-width: 100%; } .cb-ide-frame-wrap[data-dev='desktop'] .cb-ide-frame { width: 100%; } /* CENTER: editors */ .cb-ide-editors { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 260px; border-left: 1px solid var(--cb-border); border-right: 1px solid var(--cb-border); position: relative; } .cb-ide-files { display: flex; gap: 2px; flex: 0 0 auto; padding: 6px 10px 0; background: var(--cb-panel-2, rgba(255, 255, 255, 0.03)); border-bottom: 1px solid var(--cb-border); } .cb-ide-tab { appearance: none; border: 1px solid transparent; background: transparent; color: var(--cb-muted); font: inherit; font-size: 12px; padding: 6px 14px; border-radius: 7px 7px 0 0; cursor: pointer; transition: background 0.15s, color 0.15s; } .cb-ide-tab:hover { color: var(--cb-text); } .cb-ide-tab.active { background: var(--cb-bg); color: var(--cb-gold); border-color: var(--cb-border); border-bottom-color: var(--cb-bg); } .cb-ide-editor-stack { flex: 1 1 auto; min-height: 0; position: relative; } .cb-ide-editor { display: none; position: absolute; inset: 0; } .cb-ide-editor.active { display: block; } .cb-ide-editor textarea { width: 100%; height: 100%; resize: none; border: 0; outline: none; padding: 14px 16px; background: var(--cb-bg); color: #e6edf3; font-family: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; tab-size: 2; white-space: pre; overflow: auto; } .cb-ide-statusbar { flex: 0 0 auto; padding: 6px 14px; font-size: 11px; color: var(--cb-muted); border-top: 1px solid var(--cb-border); background: var(--cb-panel-2, rgba(255, 255, 255, 0.03)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* RIGHT: AI chat */ .cb-ide-chat { display: flex; flex-direction: column; flex: 0 0 28%; min-width: 240px; background: var(--cb-panel, #16161a); overflow: hidden; } .cb-ide-chat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; padding: 10px 12px; border-bottom: 1px solid var(--cb-border); font-size: 13px; color: var(--cb-text); } .cb-ide-chat-head em { font-style: normal; color: var(--cb-gold); font-size: 11px; border: 1px solid var(--cb-gold-soft); border-radius: 6px; padding: 1px 6px; } .cb-ide-model { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--cb-muted); font-size: 11px; } .cb-ide-model-sel { appearance: none; background: var(--cb-bg); color: var(--cb-text); border: 1px solid var(--cb-border); border-radius: 7px; font: inherit; font-size: 11px; padding: 4px 8px; max-width: 150px; cursor: pointer; } .cb-ide-chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; } .cb-ide-chat-empty { color: var(--cb-muted); font-size: 12px; line-height: 1.6; } .cb-ide-chat-empty em { color: var(--cb-text); font-style: italic; } .cb-ide-msg { font-size: 12.5px; line-height: 1.55; padding: 8px 11px; border-radius: 10px; max-width: 100%; word-break: break-word; white-space: pre-wrap; } .cb-ide-msg.user { align-self: flex-end; background: var(--cb-gold-soft); color: var(--cb-text); border: 1px solid var(--cb-gold-soft); } .cb-ide-msg.assistant { align-self: flex-start; background: var(--cb-bg); color: var(--cb-text); border: 1px solid var(--cb-border); } /* attached reference chips */ .cb-ide-attachs { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; } .cb-ide-attach-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--cb-text); background: var(--cb-bg); border: 1px solid var(--cb-border); border-radius: 999px; padding: 3px 6px 3px 10px; } .cb-ide-attach-chip button { appearance: none; border: 0; background: transparent; color: var(--cb-muted); cursor: pointer; font-size: 12px; line-height: 1; } .cb-ide-attach-chip button:hover { color: #ff6b6b; } .cb-ide-chat-inputwrap { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--cb-border); } .cb-ide-attach-btn, .cb-ide-send { appearance: none; border: 1px solid var(--cb-border); background: var(--cb-bg); color: var(--cb-text); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; flex: 0 0 auto; transition: border-color 0.15s, background 0.15s; } .cb-ide-attach-btn:hover, .cb-ide-send:hover { border-color: var(--cb-gold); color: var(--cb-gold); } .cb-ide-send { background: var(--cb-gold-soft); border-color: var(--cb-gold); color: var(--cb-gold); } .cb-ide-chat-input, #cb-ide-chat-input { flex: 1 1 auto; resize: none; min-height: 34px; max-height: 140px; border: 1px solid var(--cb-border); border-radius: 9px; background: var(--cb-bg); color: var(--cb-text); font: inherit; font-size: 13px; padding: 8px 10px; outline: none; } #cb-ide-chat-input:focus { border-color: var(--cb-gold); } .cb-ide-chat-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 0 12px 10px; } .cb-ide-chip-btn { appearance: none; border: 1px solid var(--cb-border); background: transparent; color: var(--cb-muted); font: inherit; font-size: 11px; padding: 4px 12px; border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .cb-ide-chip-btn:hover { color: var(--cb-text); } .cb-ide-chip-btn.active { background: var(--cb-gold-soft); color: var(--cb-gold); border-color: var(--cb-gold); } /* quick-action suggestion chips (Lovable-style) */ .cb-ide-quick { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 4px; } .cb-ide-quickchip { appearance: none; border: 1px solid var(--cb-border); background: transparent; color: var(--cb-muted); font: inherit; font-size: 11px; padding: 5px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; } .cb-ide-quickchip:hover { color: var(--cb-text); border-color: var(--cb-gold); background: var(--cb-gold-soft); } /* element-picker toggle (active = picking) */ .cb-ide-pickbtn.active { background: var(--cb-gold-soft); color: var(--cb-gold); border-color: var(--cb-gold); } /* selected-element bar ("1 selection") */ .cb-ide-selbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin: 4px 12px 0; padding: 6px 10px; border: 1px solid var(--cb-gold); background: var(--cb-gold-soft); color: var(--cb-gold); border-radius: 8px; font-size: 11px; } .cb-ide-sel-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .cb-ide-sel-clear { appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 4px; } .cb-ide-sel-clear:hover { background: rgba(212, 175, 55, 0.2); } .cb-ide-chat-status { margin-left: auto; font-size: 11px; color: var(--cb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cb-ide-chat-status.err { color: #ff6b6b; } .cb-ide-chat-status.ok { color: var(--cb-gold); } /* responsive: stack chat under editors on narrow screens */ @media (max-width: 1100px) { .cb-ide-preview { flex-basis: 40%; } .cb-ide-chat { flex-basis: 300px; min-width: 220px; } } /* AI Composer (Canvas rail) — output mode toggle (Canvas vs Code) */ .cb-ai-modes { display: inline-flex; gap: 2px; border: 1px solid var(--cb-border); border-radius: 8px; overflow: hidden; margin-bottom: 10px; } .cb-ai-mode { appearance: none; border: 0; background: transparent; color: var(--cb-muted); font: inherit; font-size: 12px; padding: 6px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s, color 0.15s; } .cb-ai-mode + .cb-ai-mode { border-left: 1px solid var(--cb-border); } .cb-ai-mode:hover { color: var(--cb-text); } .cb-ai-mode.active { background: var(--cb-gold-soft); color: var(--cb-gold); } /* toolbar */ .cb-toolbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 8px 12px; background: var(--cb-panel); border-bottom: 1px solid var(--cb-border); } .cb-tb-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* ===================================================================== MODERN FLOATING TOOLBAR (Figma-style) — clean 3-cluster layout 3 clusters: left (section · history) · center (insert · more) · right (zoom · device · view · save). Each cluster is a floating "pill". ===================================================================== */ .cb-toolbar-modern { flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 10px; padding: 10px 14px; background: var(--cb-panel); overflow-x: auto; overflow-y: visible; scrollbar-width: thin; } /* keep every group on ONE horizontal line inside the modern toolbar (overrides the default .cb-tb-group flex-wrap that caused the stacking) */ .cb-toolbar-modern .cb-tb-group { flex-wrap: nowrap; } .cb-tb-cluster { display: flex; align-items: center; flex-wrap: nowrap; flex: 0 0 auto; gap: 4px; padding: 4px 6px; background: var(--cb-elev); border: 1px solid var(--cb-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.14); } /* NOTE: intentionally NO backdrop-filter on .cb-tb-cluster — backdrop-filter creates a containing block for descendant position:fixed elements, which would trap the More-tools popover inside the cluster instead of the viewport (that was the root cause of the "popover hidden behind body" bug). */ /* center cluster takes remaining space and pushes the right cluster to the far edge, but never shrinks its own contents */ .cb-tb-center { margin-right: auto; } /* thin vertical separator inside a cluster */ .cb-tb-sep { width: 1px; align-self: stretch; margin: 3px 4px; background: var(--cb-border); opacity: 0.7; } .cb-tb-section .cb-select { min-width: 120px; } /* Insert tools become compact icon-only buttons; label shows as tooltip on hover (Figma-style). Keeps the toolbar tight & scannable. */ .cb-tool-ico { position: relative; width: 34px; height: 34px; padding: 0; justify-content: center; gap: 0; border-radius: 9px; } .cb-tool-ico span { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%) translateY(4px); white-space: nowrap; background: #fafafa; color: #0a0a0a; font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; padding: 3px 8px; border-radius: 6px; pointer-events: none; opacity: 0; transition: 0.14s; z-index: 9000; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); } .cb-tool-ico:hover span { opacity: 1; transform: translateX(-50%) translateY(0); } .cb-tool-ico i { font-size: 14px; color: var(--cb-fg); } /* zoom readout pill */ .cb-tb-zoom .cb-zoom-val { min-width: 44px; text-align: center; font-size: 12px; font-weight: 600; color: var(--cb-fg); } /* "More tools" overflow popover */ .cb-tb-more { position: relative; } /* Use position:fixed so the popover escapes the toolbar's `overflow-x:auto` clipping context (the old position:absolute got cut off / hidden behind the editor body). JS positions it under the More button each time it opens. */ .cb-more-pop { position: fixed; top: 64px; left: 50%; display: flex; flex-direction: column; gap: 12px; min-width: 280px; max-width: min(420px, calc(100vw - 24px)); padding: 14px; background: var(--cb-panel); border: 1px solid var(--cb-border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3); z-index: 9999; } .cb-more-pop[hidden] { display: none; } .cb-more-sec { display: flex; flex-direction: column; gap: 7px; } .cb-more-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cb-muted); } .cb-more-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cb-more-row .cb-select { flex: 1 1 auto; min-width: 120px; } .cb-more-btn-active { background: var(--cb-gold-soft) !important; border-color: var(--cb-gold) !important; } /* Spacer pushes the right-hand groups (zoom · preview · export · save) flush to the right edge. min-width:0 + flex-basis:0 keeps it collapsing cleanly when the toolbar wraps onto multiple rows, so right-side groups never float in the middle. */ .cb-tb-spacer { flex: 1 1 0; min-width: 0; } .cb-section-label { color: var(--cb-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } .cb-select { background: var(--cb-elev); color: var(--cb-fg); border: 1px solid var(--cb-border); border-radius: 8px; padding: 6px 8px; font-size: 12px; min-width: 130px; cursor: pointer; } .cb-tool { display: flex; align-items: center; gap: 6px; background: var(--cb-elev); color: var(--cb-fg); border: 1px solid var(--cb-border); border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: 12px; transition: 0.15s; } .cb-tool:hover { background: var(--cb-elev); border-color: var(--cb-border-strong); color: #fff; } .cb-tool i { color: var(--cb-fg); } .cb-iconbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--cb-elev); color: var(--cb-fg); border: 1px solid var(--cb-border); border-radius: 8px; cursor: pointer; transition: 0.15s; } .cb-iconbtn:hover:not(:disabled) { background: var(--cb-accent-soft); border-color: var(--cb-border-strong); color: #fff; } .cb-iconbtn.active { background: var(--cb-accent); border-color: var(--cb-accent); color: #0a0a0a; } .cb-iconbtn.active i { color: #0a0a0a; } .cb-iconbtn:disabled { opacity: 0.35; cursor: not-allowed; } .cb-iconbtn.off { color: #f0a; } /* zoom preset chips (50% / 100% / 200%) */ .cb-zoom-preset { width: auto; padding: 0 9px; font-size: 11px; font-weight: 600; } .cb-zoom-preset.active { background: var(--cb-accent); border-color: transparent; color: #0a0a0a; } .cb-zoom-val { min-width: 42px; text-align: center; color: var(--cb-muted); font-size: 12px; } .cb-btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--cb-border); text-decoration: none; transition: 0.15s; } .cb-btn-ghost { background: var(--cb-elev); color: var(--cb-fg); } .cb-btn-ghost:hover { background: var(--cb-elev); border-color: var(--cb-border-strong); color: #fff; } .cb-btn-primary { background: var(--cb-accent); color: #0a0a0a; border-color: transparent; } .cb-btn-primary:hover { filter: brightness(0.92); } /* ===== body layout (Canva-style): tool rail + panel LEFT · canvas · layers RIGHT ===== */ .cb-body { flex: 1; display: flex; min-height: 0; } .cb-center { flex: 1; min-width: 0; } .cb-right { background: var(--cb-panel); display: flex; flex-direction: column; min-height: 0; flex: 0 0 250px; width: 250px; border-left: 1px solid var(--cb-border); transition: width 0.22s ease, flex-basis 0.22s ease; overflow: hidden; } /* Collapsed Layers panel → slim vertical rail (Lottie/Figma style) */ .cb-right-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cb-right-rail { display: none; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0; border: none; background: transparent; color: var(--cb-muted); cursor: pointer; height: 100%; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; transition: color 0.15s; } .cb-right-rail i { font-size: 15px; } .cb-right-rail span { writing-mode: vertical-rl; text-orientation: mixed; text-transform: uppercase; letter-spacing: 0.14em; } .cb-right-rail:hover { color: var(--cb-gold); } .cb-right.collapsed { flex-basis: 36px; width: 36px; } .cb-right.collapsed .cb-right-head, .cb-right.collapsed .cb-layers, .cb-right.collapsed .cb-left-foot { display: none; } .cb-right.collapsed .cb-right-rail { display: flex; } /* LEFT: vertical icon rail + sliding content panel */ .cb-left { display: flex; flex-direction: row; min-height: 0; border-right: 1px solid var(--cb-border); background: var(--cb-panel); } .cb-rail { flex: 0 0 68px; width: 68px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 6px; background: #16181f; border-right: 1px solid var(--cb-border); overflow-y: auto; } .cb-rail::-webkit-scrollbar { width: 0; } .cb-rail .cb-rtab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 10px 2px; border: none; border-radius: 10px; background: transparent; color: var(--cb-muted); font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s, color 0.15s; text-align: center; line-height: 1.15; } .cb-rail .cb-rtab i { font-size: 16px; transition: transform 0.15s; } .cb-rail .cb-rtab:hover { background: var(--cb-elev); color: var(--cb-fg); } .cb-rail .cb-rtab:hover i { transform: translateY(-1px); } .cb-rail .cb-rtab.active { background: var(--cb-gold-soft); color: var(--cb-gold); } .cb-rail .cb-rtab.active i { color: var(--cb-gold); } .cb-rail .cb-rtab span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Wedding Kits rail tab — subtle gem sparkle to mark the flagship tool */ .cb-rail .cb-rtab-kits i { color: #c89bd6; } .cb-rail .cb-rtab-kits.active { background: rgba(183, 110, 121, 0.16); color: #e7b9c1; } .cb-rail .cb-rtab-kits.active i { color: #e7b9c1; } /* Background rail action button — opens the Background modal (no pane). Set off from the pane tabs with a top divider so it reads as a separate tool. */ .cb-rail .cb-rtab-action { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--cb-border); border-radius: 10px; } .cb-rail .cb-rtab-bg i { color: #7fd1c4; } .cb-rail .cb-rtab-bg:hover { background: rgba(127, 209, 196, 0.12); color: #bdeee5; } .cb-rail .cb-rtab-bg:hover i { color: #bdeee5; } /* ===== WEDDING KITS pane ===== */ .cb-kits-intro { display: flex; gap: 10px; align-items: flex-start; margin: 10px 12px 8px; padding: 11px 12px; border-radius: 12px; background: var(--cb-accent-soft); border: 1px solid var(--cb-border); } .cb-kits-intro > i { color: var(--cb-fg); font-size: 16px; margin-top: 2px; } .cb-kits-intro strong { display: block; font-size: 12.5px; color: var(--cb-fg); } .cb-kits-intro span { display: block; font-size: 10.5px; color: var(--cb-muted); line-height: 1.45; margin-top: 2px; } .cb-kits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 12px 8px; overflow-y: auto; } .cb-kit-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 11px 10px; border: 1px solid var(--cb-border); border-radius: 12px; background: var(--cb-elev); cursor: pointer; text-align: left; transition: transform 0.14s, border-color 0.14s, box-shadow 0.14s; } .cb-kit-card:hover { transform: translateY(-2px); border-color: var(--cb-gold); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28); } .cb-kit-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kc, #b76e79) 22%, transparent); color: var(--kc, #b76e79); font-size: 13px; } .cb-kit-card strong { font-size: 11.5px; color: var(--cb-fg); line-height: 1.2; } .cb-kit-card span:last-child { font-size: 9.8px; color: var(--cb-muted); line-height: 1.35; } .cb-kits-hint { margin: 2px 12px 12px; padding: 9px 11px; border-radius: 10px; font-size: 10.5px; line-height: 1.5; color: var(--cb-muted); background: var(--cb-elev); border: 1px dashed var(--cb-border); } .cb-kits-hint i { color: var(--cb-gold); margin-right: 4px; } /* ===== ANIMATIONS pane — SVG/Lottie presets, AI generator, code importer ===== */ .cb-anim-tabs { display: flex; gap: 4px; padding: 8px 10px 0; flex-wrap: wrap; } .cb-anim-tab { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid var(--cb-border); border-radius: 8px; background: transparent; color: var(--cb-muted); font-size: 10.5px; font-weight: 600; cursor: pointer; transition: 0.14s; white-space: nowrap; } .cb-anim-tab:hover { border-color: var(--cb-gold); color: var(--cb-fg); } .cb-anim-tab.active { background: var(--cb-gold-soft); border-color: var(--cb-gold); color: var(--cb-gold); } .cb-anim-sub { display: none; padding: 10px; } .cb-anim-sub.active { display: block; } .cb-anim-hint { font-size: 11px; color: var(--cb-muted); line-height: 1.55; margin-bottom: 10px; } .cb-anim-hint i { color: var(--cb-gold); margin-right: 4px; } /* Parallax preset description hint under the motion select */ .cb-bg-preset-hint { font-size: 11px; line-height: 1.55; color: var(--cb-fg); background: rgba(127, 209, 196, 0.1); border: 1px solid rgba(127, 209, 196, 0.28); border-radius: 8px; padding: 7px 10px; margin: 8px 0 4px; } .cb-bg-preset-hint i { color: #7fd1c4; margin-right: 5px; } .cb-bg-preset-hint b { color: #bdeee5; } .cb-anim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cb-anim-card { position: relative; } .cb-anim-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #191b22; border-radius: 7px; display: block; } .cb-anim-lot-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; background: #191b22; border-radius: 7px; color: var(--cb-gold); font-size: 10.5px; font-weight: 600; } /* Lottie preset catalog — category chips + live thumbnails */ .cb-anim-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; } .cb-anim-cat { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 11.5px; font-weight: 600; color: var(--cb-fg); background: var(--cb-elev); border: 1px solid var(--cb-border); border-radius: 999px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .cb-anim-cat:hover { border-color: var(--cb-gold); } .cb-anim-cat.active { color: #14120e; background: var(--cb-gold); border-color: var(--cb-gold); } .cb-lottie-thumb { width: 100%; aspect-ratio: 1; background: #191b22; border-radius: 7px; display: block; overflow: hidden; } .cb-lottie-thumb svg { width: 100% !important; height: 100% !important; } .cb-anim-code { width: 100%; box-sizing: border-box; background: var(--cb-elev); color: var(--cb-fg); border: 1px solid var(--cb-border); border-radius: 8px; padding: 8px 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.5; resize: vertical; margin-bottom: 8px; } .cb-anim-code:focus { outline: none; border-color: var(--cb-gold); } .cb-anim-row { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; } .cb-anim-row input[type='text'], .cb-anim-row select { flex: 1; min-width: 0; background: var(--cb-elev); color: var(--cb-fg); border: 1px solid var(--cb-border); border-radius: 8px; padding: 7px 9px; font-size: 11.5px; } .cb-anim-btn { flex: 0 0 auto; font-size: 11.5px; padding: 7px 11px; } .cb-anim-ai-status { font-size: 11px; color: var(--cb-muted); min-height: 16px; margin-bottom: 8px; line-height: 1.5; } .cb-anim-ai-status.ok { color: #79c98b; } .cb-anim-ai-status.err { color: #e57887; } .cb-anim-preview-box { background: #191b22; border: 1px solid var(--cb-border); border-radius: 9px; padding: 10px; display: flex; align-items: center; justify-content: center; min-height: 120px; margin-bottom: 8px; } .cb-anim-preview-box img { max-width: 100%; max-height: 170px; } #cb-kits-pane { padding: 0; } #cb-kits-pane.active { display: flex; flex-direction: column; } /* ===== FX LIBRARY (animated-CSS asset gallery) ===== */ .cb-rail .cb-rtab-fx i { color: #c9a7ff; } .cb-rail .cb-rtab-fx.active { background: rgba(168, 85, 247, 0.16); color: #d9c2ff; } .cb-rail .cb-rtab-fx.active i { color: #d9c2ff; } #cb-fx-pane { padding: 12px; } #cb-fx-pane.active { display: flex; flex-direction: column; } .cb-fx-intro { display: flex; gap: 9px; align-items: flex-start; background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(34, 211, 238, 0.08)); border: 1px solid rgba(168, 85, 247, 0.22); border-radius: 10px; padding: 10px 11px; margin-bottom: 10px; } .cb-fx-intro > i { color: #c9a7ff; font-size: 15px; margin-top: 1px; } .cb-fx-intro strong { display: block; font-size: 12.5px; color: var(--cb-fg); margin-bottom: 2px; } .cb-fx-intro span { font-size: 10.5px; color: var(--cb-muted); line-height: 1.45; } .cb-fx-search { position: relative; margin-bottom: 9px; } .cb-fx-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--cb-muted); font-size: 11px; } .cb-fx-search input { width: 100%; box-sizing: border-box; background: var(--cb-elev); color: var(--cb-fg); border: 1px solid var(--cb-border); border-radius: 8px; padding: 8px 10px 8px 28px; font-size: 11.5px; } .cb-fx-search input:focus { outline: none; border-color: #a855f7; } .cb-fx-cats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; } .cb-fx-cat { font-size: 10.5px; padding: 5px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap; background: var(--cb-elev); color: var(--cb-muted); border: 1px solid var(--cb-border); transition: all 0.15s; } .cb-fx-cat i { font-size: 9.5px; margin-right: 3px; } .cb-fx-cat:hover { color: var(--cb-fg); border-color: #a855f7; } .cb-fx-cat.active { background: rgba(168, 85, 247, 0.18); color: #e3d3ff; border-color: #a855f7; } .cb-fx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; } .cb-fx-card-wrap { position: relative; display: flex; flex-direction: column; } .cb-fx-card { position: relative; width: 100%; border: 1px solid var(--cb-border); border-radius: 9px; cursor: pointer; background: linear-gradient(135deg, #15181f, #0f1116); overflow: hidden; padding: 0; transition: border-color 0.15s, transform 0.1s; } .cb-fx-card:hover { border-color: #a855f7; transform: translateY(-1px); } .cb-fx-prev { width: 100%; aspect-ratio: 16/11; display: block; overflow: hidden; position: relative; box-sizing: border-box; } /* The render stage (#uid) fills the card so the engine's scoped CSS — which sizes children relative to this box — has a real width/height to work with. */ .cb-fx-prev > .cbfx { position: absolute; inset: 8px; } .cb-fx-name { font-size: 10px; color: var(--cb-muted); text-align: center; margin-top: 4px; line-height: 1.3; } .cb-fx-myhead { display: flex; align-items: center; gap: 6px; margin: 14px 0 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--cb-muted); border-top: 1px solid var(--cb-border); padding-top: 11px; } .cb-fx-myhead i { color: #e7c66a; } .cb-fx-mygrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; } .cb-fx-del { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; background: rgba(0, 0, 0, 0.6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; } .cb-fx-del:hover { background: #e05260; } /* FX param controls in Properties */ .cb-fxp-hint { font-size: 10.5px; color: var(--cb-muted); margin: -2px 0 9px; line-height: 1.45; } .cb-fxp-v { color: #c9a7ff; font-variant-numeric: tabular-nums; } .cb-fxp-save { width: 100%; justify-content: center; margin-top: 12px; font-size: 11.5px; } /* sliding content panel next to the rail */ .cb-left-panel { display: flex; flex-direction: column; min-height: 0; width: 300px; flex: 0 0 300px; overflow: hidden; transition: width 0.22s ease, flex-basis 0.22s ease; } .cb-left.collapsed .cb-left-panel { width: 0; flex-basis: 0; border: 0; } .cb-left-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px 11px 14px; border-bottom: 1px solid var(--cb-border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cb-muted); white-space: nowrap; } .cb-left-panel-head i { color: var(--cb-gold); margin-right: 6px; } .cb-panel-collapse { width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--cb-border); border-radius: 6px; color: var(--cb-muted); font-size: 10px; cursor: pointer; transition: 0.15s; } .cb-panel-collapse:hover { border-color: var(--cb-gold); color: var(--cb-gold); } /* Mobile drawer toggles — hidden on desktop */ .cb-mfab { display: none; } .cb-mob-backdrop { display: none; } /* ===== Mobile editing (≤860px): panels become slide-in drawers ===== */ @media (max-width: 860px) { .cb-body { display: block; position: relative; } .cb-left, .cb-right { position: absolute; top: 0; bottom: 0; width: 86%; max-width: 372px; z-index: 50; transition: transform 0.25s ease; box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); } .cb-right { width: 78%; max-width: 320px; } .cb-left { left: 0; transform: translateX(-104%); } .cb-right { right: 0; transform: translateX(104%); } /* drawers ignore the desktop collapsed state — always show full content */ .cb-right.collapsed { width: 78%; max-width: 320px; flex-basis: auto; } .cb-right.collapsed .cb-right-head, .cb-right.collapsed .cb-left-foot { display: flex; } .cb-right.collapsed .cb-layers { display: block; } .cb-right .cb-right-rail, .cb-right.collapsed .cb-right-rail, .cb-right #cb-right-collapse { display: none; } .cb-body.show-left .cb-left { transform: translateX(0); } .cb-body.show-right .cb-right { transform: translateX(0); } /* drawer always shows the content panel expanded */ .cb-left.collapsed .cb-left-panel { width: 300px; flex-basis: 300px; } .cb-left-panel { flex: 1 1 auto; width: auto; } .cb-rail { flex-basis: 60px; width: 60px; } .cb-center, .cb-canvas-wrap { width: 100%; } .cb-mob-backdrop { display: block; position: absolute; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s; } .cb-body.show-left .cb-mob-backdrop, .cb-body.show-right .cb-mob-backdrop { opacity: 1; pointer-events: auto; } .cb-mfab { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 18px; width: 48px; height: 48px; z-index: 45; border-radius: 50%; border: 1px solid var(--cb-border); background: var(--cb-gold); color: #241c08; font-size: 18px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); cursor: pointer; } .cb-mfab-left { left: 16px; } .cb-mfab-right { right: 16px; } /* roomier touch targets on the toolbar */ .cb-iconbtn { min-width: 40px; min-height: 40px; } /* modern toolbar: allow the 3 clusters to scroll horizontally on small screens instead of wrapping into a messy stack */ .cb-toolbar-modern { overflow-x: auto; justify-content: flex-start; } .cb-tb-cluster { flex: 0 0 auto; } } @media (max-width: 480px) { .cb-toolbar { overflow-x: auto; } .cb-tb-spacer { display: none; } .cb-tb-section .cb-section-label { display: none; } } .cb-panel-head { padding: 11px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cb-muted); border-bottom: 1px solid var(--cb-border); } .cb-panel-head i { color: var(--cb-gold); margin-right: 6px; } /* layers panel */ .cb-layers { flex: 1; overflow-y: auto; padding: 6px; } .cb-layers-empty { color: var(--cb-muted); text-align: center; padding: 30px 12px; font-size: 12px; line-height: 1.6; } .cb-lrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px; border-radius: 8px; margin-bottom: 3px; cursor: pointer; transition: 0.12s; } .cb-lrow:hover { background: var(--cb-elev); } .cb-lrow.active { background: var(--cb-gold-soft); box-shadow: inset 0 0 0 1px var(--cb-gold); } .cb-lname { display: flex; align-items: center; gap: 8px; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; } .cb-lname i { color: var(--cb-gold); width: 14px; text-align: center; } .cb-lacts { display: flex; gap: 1px; opacity: 0.5; transition: 0.12s; } .cb-lrow:hover .cb-lacts, .cb-lrow.active .cb-lacts { opacity: 1; } .cb-lact { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--cb-muted); cursor: pointer; border-radius: 5px; font-size: 10px; } .cb-lact:hover { background: #2c2f3a; color: #fff; } .cb-lact.danger:hover { background: #7a1f2b; color: #fff; } /* --- Figma-style layer panel: drag handle, inline rename, drop indicators --- */ .cb-ldrag { display: flex; align-items: center; color: var(--cb-muted); opacity: 0.35; cursor: grab; font-size: 11px; padding: 0 1px; transition: 0.12s; } .cb-lrow:hover .cb-ldrag { opacity: 0.8; } .cb-ldrag:active { cursor: grabbing; } .cb-lrow.cb-dragging { opacity: 0.45; } .cb-lrow.cb-drop-before { box-shadow: inset 0 2px 0 0 var(--cb-gold); } .cb-lrow.cb-drop-after { box-shadow: inset 0 -2px 0 0 var(--cb-gold); } .cb-lrow.is-hidden .cb-lname { opacity: 0.45; font-style: italic; } .cb-lrow.is-locked .cb-lname i:first-child { color: var(--cb-muted); } .cb-lname-edit { flex: 1; min-width: 0; font-size: 12px; background: #1b1d26; color: #fff; border: 1px solid var(--cb-gold); border-radius: 5px; padding: 2px 6px; outline: none; } /* --- Export options menu (PNG / All PNG / PDF) --- */ .cb-export-menu { position: fixed; z-index: 9999; min-width: 210px; background: #15171f; border: 1px solid var(--cb-border); border-radius: 10px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5); padding: 6px; } .cb-export-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; color: var(--cb-fg); font-size: 13px; padding: 9px 11px; border-radius: 7px; cursor: pointer; } .cb-export-menu button:hover { background: var(--cb-gold-soft); color: #fff; } .cb-export-menu button i { width: 16px; text-align: center; color: var(--cb-gold); } .cb-left-foot { padding: 8px; border-top: 1px solid var(--cb-border); } .cb-mini { width: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--cb-elev); color: var(--cb-fg); border: 1px solid var(--cb-border); border-radius: 7px; padding: 7px 10px; font-size: 11px; cursor: pointer; } .cb-mini.full { width: 100%; justify-content: center; } .cb-mini:hover { background: var(--cb-gold-soft); border-color: var(--cb-gold); } /* Master Prompt v3 — Elementor-style horizontal alignment segmented control */ .cb-seg { display: inline-flex; width: 100%; border: 1px solid var(--cb-border); border-radius: 8px; overflow: hidden; background: var(--cb-elev); } .cb-seg-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; padding: 8px 0; font-size: 12px; color: var(--cb-fg); background: transparent; border: 0; border-right: 1px solid var(--cb-border); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .cb-seg-btn:last-child { border-right: 0; } .cb-seg-btn:hover { background: var(--cb-gold-soft); } .cb-seg-btn.on { background: var(--cb-gold); color: #1c150a; } /* stage */ .cb-center { display: flex; flex-direction: column; min-height: 0; min-width: 0; } .cb-stage { position: relative; flex: 1; overflow: auto; background: radial-gradient(circle at 20% 20%, rgba(94, 106, 210, 0.12), transparent 60%), radial-gradient(circle at 80% 80%, rgba(45, 55, 72, 0.15), transparent 65%), linear-gradient(135deg, #2a2d3a 0%, #1e2436 40%, #151925 70%, #0f1319 100%); display: flex; flex-direction: column; align-items: center; padding: 30px 16px 70px; } /* --- Section thumbnail navigator (Canva-style filmstrip) --- */ /* ===== Sections dock — Lottie-style bottom bar: slim header row that is always visible (numbered chips switch sections even while collapsed) + a collapsible, drag-resizable thumbnail body. ===== */ .cb-pages { position: relative; display: flex; flex-direction: column; background: var(--cb-panel); border-top: 1px solid var(--cb-border); flex: 0 0 auto; } .cb-pages-resize { position: absolute; top: -4px; left: 0; right: 0; height: 8px; cursor: ns-resize; z-index: 6; } .cb-pages-resize::after { content: ''; position: absolute; left: 50%; top: 2px; transform: translateX(-50%); width: 44px; height: 4px; border-radius: 99px; background: var(--cb-border); opacity: 0; transition: opacity 0.15s, background 0.15s; } .cb-pages-resize:hover::after, .cb-row-resizing .cb-pages-resize::after { opacity: 1; background: var(--cb-gold); } .cb-pages.collapsed .cb-pages-resize { display: none; } body.cb-row-resizing { user-select: none; cursor: ns-resize; } .cb-pages-bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border-bottom: 1px solid transparent; flex: 0 0 auto; } .cb-pages:not(.collapsed) .cb-pages-bar { border-bottom-color: var(--cb-border); } .cb-pages-toggle { width: 24px; height: 24px; border: none; border-radius: 7px; background: transparent; color: var(--cb-muted); cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; transition: 0.15s; } .cb-pages-toggle:hover { background: var(--cb-elev); color: var(--cb-gold); } .cb-pages-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cb-muted); white-space: nowrap; display: flex; align-items: center; gap: 6px; } .cb-pages-count { background: var(--cb-elev); color: var(--cb-fg); border-radius: 99px; font-size: 9.5px; padding: 1px 7px; font-weight: 600; } .cb-pages-tabs { display: flex; gap: 4px; overflow-x: auto; flex: 1; min-width: 0; padding: 2px 0; scrollbar-width: none; } .cb-pages-tabs::-webkit-scrollbar { height: 0; } .cb-pages-tab { flex: 0 0 auto; min-width: 24px; height: 22px; padding: 0 7px; border: 1px solid var(--cb-border); border-radius: 7px; background: transparent; color: var(--cb-muted); font-size: 10.5px; font-weight: 600; cursor: pointer; transition: 0.13s; } .cb-pages-tab:hover { border-color: var(--cb-gold); color: var(--cb-fg); } .cb-pages-tab.active { background: var(--cb-gold-soft); border-color: var(--cb-gold); color: var(--cb-gold); } .cb-pages-tab.disabled { opacity: 0.4; } .cb-pages-baract { display: flex; gap: 2px; flex: 0 0 auto; } .cb-pages-szbtn { width: 24px; height: 24px; border: none; border-radius: 7px; background: transparent; color: var(--cb-muted); cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center; transition: 0.15s; } .cb-pages-szbtn:hover { background: var(--cb-elev); color: var(--cb-fg); } .cb-pages-szbtn.active { background: var(--cb-gold-soft); color: var(--cb-gold); } .cb-pages-body { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; overflow-x: auto; overflow-y: hidden; height: 132px; transition: height 0.22s ease, padding 0.22s ease; box-sizing: border-box; } body.cb-row-resizing .cb-pages-body { transition: none; } .cb-pages.collapsed .cb-pages-body { height: 0 !important; padding-top: 0; padding-bottom: 0; overflow: hidden; } .cb-pages-strip { display: flex; gap: 8px; align-items: flex-start; } .cb-pages-empty { color: var(--cb-muted); font-size: 11px; padding: 14px 8px; } .cb-pgthumb { cursor: pointer; border-radius: 7px; padding: 3px; border: 1px solid transparent; transition: 0.12s; flex: 0 0 auto; } .cb-pgthumb:hover { background: var(--cb-elev); } .cb-pgthumb.active { border-color: var(--cb-gold); background: var(--cb-gold-soft); } .cb-pgthumb.disabled { opacity: 0.45; } .cb-pgthumb-frame { position: relative; overflow: hidden; background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); pointer-events: none; } .cb-pgthumb-scale { position: absolute; top: 0; left: 0; transform-origin: top left; } .cb-pgthumb-cap { margin-top: 4px; font-size: 10px; color: var(--cb-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; } .cb-pgthumb.active .cb-pgthumb-cap { color: var(--cb-fg); } .cb-pgthumb-n { display: inline-block; min-width: 13px; text-align: center; background: #2c2f3a; color: #fff; border-radius: 4px; font-size: 9px; padding: 0 3px; margin-right: 2px; } .cb-pgthumb.active .cb-pgthumb-n { background: var(--cb-gold); color: #1a1505; } .cb-pages-add { flex: 0 0 auto; width: 40px; align-self: center; height: 54px; border: 1px dashed var(--cb-border); background: transparent; color: var(--cb-muted); border-radius: 7px; cursor: pointer; font-size: 14px; } .cb-pages-add:hover { color: var(--cb-gold); border-color: var(--cb-gold); } .cb-canvas-wrap { position: relative; } .cb-canvas { position: relative; margin: 0 auto; background: #fff; border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); overflow: hidden; } .cb-stage-hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--cb-muted); font-size: 11px; padding: 0 20px; pointer-events: none; } /* drag handle to resize the active section's height (visual, matches H input) */ .cb-canvas-hgrip { margin: 6px auto 0; width: 120px; height: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--cb-elev); color: var(--cb-muted); border: 1px solid var(--cb-border); border-radius: 0 0 8px 8px; font-size: 11px; cursor: ns-resize; user-select: none; transition: background 0.15s, color 0.15s; } .cb-canvas-hgrip:hover { background: var(--cb-gold-soft); color: var(--cb-gold); border-color: var(--cb-gold); } .cb-canvas-hgrip.dragging { background: var(--cb-gold-soft); color: var(--cb-gold); border-color: var(--cb-gold); } .cb-canvas-hgrip i { font-size: 10px; } /* layer on canvas */ .cb-layer { box-sizing: border-box; } .cb-layer.cb-selected { outline: 1.5px solid var(--cb-accent); outline-offset: 0; box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.25); } .cb-layer.cb-locked { outline: 1px dashed rgba(255, 255, 255, 0.4); } .cb-rotate { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--cb-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: grab; z-index: 1000; } .cb-rotate::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 1px; height: 8px; background: var(--cb-accent); } /* tool panes (inside the left sliding panel) */ .cb-rpane { display: none; flex: 1; overflow-y: auto; padding: 12px; min-height: 0; min-width: 280px; } .cb-rpane.active { display: block; } .cb-empty-props { color: var(--cb-muted); text-align: center; padding: 46px 18px; } .cb-empty-props i { font-size: 24px; color: var(--cb-gold); opacity: 0.6; display: block; margin-bottom: 12px; } .cb-empty-props p { font-size: 12px; line-height: 1.6; } /* property inputs */ .cb-prop-name input { width: 100%; background: var(--cb-elev); color: var(--cb-fg); border: 1px solid var(--cb-border); border-radius: 7px; padding: 8px 10px; font-size: 13px; margin-bottom: 12px; } .cb-prop-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; } .cb-prop-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } .cb-pn, .cb-pc, .cb-ps { display: flex; flex-direction: column; gap: 4px; } .cb-pn label, .cb-pc label, .cb-ps label, .cb-prop-row label { font-size: 10px; color: var(--cb-muted); text-transform: uppercase; letter-spacing: 0.05em; } .cb-pn input, .cb-ps select { background: var(--cb-elev); color: var(--cb-fg); border: 1px solid var(--cb-border); border-radius: 6px; padding: 6px 7px; font-size: 12px; width: 100%; } .cb-pc input[type='color'] { width: 100%; height: 32px; background: var(--cb-elev); border: 1px solid var(--cb-border); border-radius: 6px; cursor: pointer; padding: 2px; } .cb-prop-row { margin-bottom: 12px; display: flex; flex-direction: column; gap: 5px; } .cb-prop-row input[type='text'], .cb-prop-row textarea { background: var(--cb-elev); color: var(--cb-fg); border: 1px solid var(--cb-border); border-radius: 6px; padding: 7px 9px; font-size: 12px; width: 100%; resize: vertical; } .cb-prop-row input[type='range'] { width: 100%; accent-color: var(--cb-gold); } .cb-prop-row label b { color: var(--cb-gold); } .cb-prop-check label { display: flex; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0; font-size: 11px; cursor: pointer; } .cb-prop-check input[type='checkbox'] { accent-color: var(--cb-gold); width: 14px; height: 14px; cursor: pointer; } .cb-hint-inline { color: var(--cb-muted); font-size: 9px; opacity: 0.8; } /* asset library */ .cb-asset-cats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; } .cb-cat { background: var(--cb-elev); color: var(--cb-muted); border: 1px solid var(--cb-border); border-radius: 20px; padding: 5px 11px; font-size: 11px; cursor: pointer; } .cb-cat.active { background: var(--cb-gold-soft); color: #fff; border-color: var(--cb-gold); } .cb-upload { display: flex; align-items: center; gap: 8px; justify-content: center; background: var(--cb-elev); border: 1px dashed var(--cb-border); border-radius: 8px; padding: 10px; font-size: 12px; color: var(--cb-fg); cursor: pointer; margin-bottom: 10px; } .cb-upload:hover { border-color: var(--cb-gold); } .cb-upload i { color: var(--cb-gold); } .cb-upload-cat { margin-left: auto; background: var(--cb-bg); color: var(--cb-fg); border: 1px solid var(--cb-border); border-radius: 6px; padding: 3px 5px; font-size: 11px; } .cb-asset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cb-asset-loading { grid-column: 1/-1; text-align: center; color: var(--cb-muted); padding: 24px; font-size: 12px; } .cb-asset { position: relative; aspect-ratio: 1; background: repeating-conic-gradient(#2a2d36 0 25%, #23262f 0 50%) 50%/16px 16px; border: 1px solid var(--cb-border); border-radius: 8px; overflow: hidden; cursor: pointer; padding: 0; transition: 0.12s; } .cb-asset:hover { border-color: var(--cb-gold); transform: translateY(-1px); } .cb-asset img { width: 100%; height: 100%; object-fit: contain; display: block; } .cb-asset-badge { position: absolute; bottom: 3px; right: 3px; background: var(--cb-gold); color: #1a1407; font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 4px; text-transform: uppercase; } /* asset folders */ .cb-folder-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--cb-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 2px 0 6px; } .cb-folders { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; max-height: 150px; overflow: auto; } .cb-folder { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: var(--cb-elev); color: var(--cb-fg); border: 1px solid var(--cb-border); border-radius: 7px; padding: 6px 9px; font-size: 12px; cursor: pointer; transition: 0.12s; } .cb-folder:hover { border-color: var(--cb-gold); } .cb-folder.active { background: var(--cb-gold-soft); border-color: var(--cb-gold); color: #fff; } .cb-folder i { color: var(--cb-gold); } .cb-folder small { margin-left: auto; opacity: 0.7; font-size: 10px; } .cb-folder-edit { opacity: 0.55; padding: 0 2px; } .cb-folder-edit:hover { opacity: 1; color: var(--cb-gold); } .cb-folder.active small { margin-left: auto; } .cb-upload-folder-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--cb-muted); margin: -4px 0 10px; } .cb-upload-folder-row i { color: var(--cb-gold); } .cb-upload-folder-row strong { color: var(--cb-fg); } /* asset card wrap (name + menu) */ .cb-asset-wrap { position: relative; display: flex; flex-direction: column; gap: 3px; } .cb-asset-name { font-size: 10px; color: var(--cb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; } .cb-asset-menu { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 5px; font-size: 11px; cursor: pointer; opacity: 0; transition: 0.12s; } .cb-asset-wrap:hover .cb-asset-menu { opacity: 1; } .cb-asset-menu:hover { background: var(--cb-gold); color: #1a1407; } /* toast */ .cb-note { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; background: #23262f; color: #fff; border: 1px solid var(--cb-border); border-radius: 8px; padding: 9px 16px; font-size: 12px; transition: 0.25s; z-index: 5000; } .cb-note.show { opacity: 1; transform: translateX(-50%) translateY(0); } .cb-note.ok { border-color: var(--cb-gold); } .cb-note.err { border-color: #e0556b; } /* ---- Phase 2: snap / grid / guides / align / fields ---- */ .cb-iconbtn.active { background: var(--cb-gold-soft); border-color: var(--cb-gold); color: var(--cb-gold); } .cb-align-group { padding-left: 4px; } /* grid overlay on the canvas (8px) */ .cb-grid-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(to right, rgba(94, 106, 210, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(94, 106, 210, 0.1) 1px, transparent 1px); background-size: 8px 8px; } /* alignment guide lines (shown while dragging) */ .cb-guides { position: absolute; inset: 0; pointer-events: none; z-index: 9999; } .cb-guide { position: absolute; background: #ff3d8b; box-shadow: 0 0 4px rgba(255, 61, 139, 0.6); } .cb-guide-v { top: 0; bottom: 0; width: 1px; } .cb-guide-h { left: 0; right: 0; height: 1px; } /* invitation field chips (data binding) */ .cb-fields { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; } .cb-field-chip { font-size: 11px; padding: 3px 8px; border-radius: 999px; cursor: pointer; background: var(--cb-elev); color: var(--cb-fg); border: 1px solid var(--cb-border); } .cb-field-chip:hover { background: var(--cb-gold-soft); border-color: var(--cb-gold); color: var(--cb-gold); } /* ---- Invitation Data pane (grouped client field chips) ---- */ .cb-data-status { font-size: 10.5px; line-height: 1.45; color: var(--cb-muted); margin: 8px 0; padding: 7px 9px; border-radius: 8px; background: var(--cb-elev); border: 1px solid var(--cb-border); } .cb-data-status.ok { color: var(--cb-fg); border-color: var(--cb-gold); background: var(--cb-gold-soft); } .cb-data-status i { margin-right: 5px; } .cb-data-search { display: flex; align-items: center; gap: 7px; margin: 8px 0 10px; padding: 6px 10px; border-radius: 8px; background: var(--cb-elev); border: 1px solid var(--cb-border); } .cb-data-search i { color: var(--cb-muted); font-size: 12px; } .cb-data-search input { flex: 1; border: none; background: none; outline: none; color: var(--cb-fg); font-size: 12px; } .cb-data-grp { margin-bottom: 6px; border: 1px solid var(--cb-border); border-radius: 9px; overflow: hidden; } .cb-data-grp > summary { list-style: none; cursor: pointer; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--cb-fg); background: var(--cb-elev); display: flex; align-items: center; gap: 7px; user-select: none; } .cb-data-grp > summary::-webkit-details-marker { display: none; } .cb-data-grp > summary i { color: var(--cb-gold); font-size: 12px; width: 16px; text-align: center; } .cb-data-grp[open] > summary { border-bottom: 1px solid var(--cb-border); } .cb-data-count { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--cb-muted); background: var(--cb-bg); border: 1px solid var(--cb-border); border-radius: 999px; padding: 1px 7px; } .cb-data-grp .cb-fields { padding: 9px 10px; margin-top: 0; } .cb-data-chip.cb-photo-chip { border-style: dashed; } /* ---- Phase 3: marquee, animation prop, presets ---- */ .cb-marquee { position: absolute; z-index: 9998; pointer-events: none; border: 1px solid var(--cb-accent); background: rgba(94, 106, 210, 0.12); } .cb-prop-sep { margin: 12px 0 6px; padding-top: 10px; border-top: 1px solid var(--cb-border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cb-muted); } .cb-prop-sep i { color: var(--cb-gold); margin-right: 5px; } .cb-tpl-select { max-width: 130px; } /* ---- Properties accordion (foldable sections — keeps the panel short) ---- */ .cb-acc { margin: 8px 0 0; border-top: 1px solid var(--cb-border); } .cb-acc-head { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; padding: 11px 2px 10px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--cb-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; transition: color 0.15s ease; } .cb-acc-head:hover { color: var(--cb-text, #e9e7e2); } .cb-acc-title { display: inline-flex; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0; } .cb-acc-title i { color: var(--cb-gold); } .cb-acc-caret { flex: 0 0 auto; font-size: 11px; color: var(--cb-muted); transition: transform 0.2s ease; } .cb-acc.open .cb-acc-caret { transform: rotate(180deg); color: var(--cb-gold); } .cb-acc-body { display: none; padding: 0 0 6px; animation: cbAccIn 0.16s ease; } .cb-acc.open > .cb-acc-body { display: block; } @keyframes cbAccIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } /* the .cb-prop-sep separators are now the accordion headers → drop their own top border/margins when nested (defensive; sep is normally replaced). */ .cb-acc .cb-prop-sep { border-top: 0; margin-top: 0; padding-top: 0; } /* ---- WebGL Parallax Pro: preset chips + value badges (Apple-grade panel) ---- */ .cb-px-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 4px 0 6px; } .cb-px-chip { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid var(--cb-border); border-radius: 9px; background: var(--cb-panel-2, rgba(255, 255, 255, 0.03)); color: var(--cb-text, #e9e7e2); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease; text-align: left; } .cb-px-chip i { color: var(--cb-gold); font-size: 12px; width: 14px; text-align: center; } .cb-px-chip:hover { border-color: var(--cb-gold); background: rgba(201, 162, 95, 0.1); } .cb-px-chip:active { transform: scale(0.97); } .cb-px-chip.active { border-color: var(--cb-gold); background: rgba(201, 162, 95, 0.18); box-shadow: inset 0 0 0 1px var(--cb-gold); } .val-display { color: var(--cb-gold); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; } .cb-sp-chip { padding: 5px 9px; border: 1px solid var(--cb-border); border-radius: 999px; background: transparent; color: var(--cb-text, #e9e7e2); font-size: 11px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .cb-sp-chip:hover { border-color: var(--cb-gold); background: rgba(201, 162, 95, 0.1); } .cb-sp-presets { display: flex; flex-wrap: wrap; gap: 5px; } /* ---- Per-layer cinematic MOTION preset picker (14 presets) -------------- */ .cb-mo-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 4px 0 6px; } .cb-mo-chip { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid var(--cb-border); border-radius: 9px; background: var(--cb-panel-2, rgba(255, 255, 255, 0.03)); color: var(--cb-text, #e9e7e2); font-size: 11px; font-weight: 600; cursor: pointer; text-align: left; transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease; } .cb-mo-chip i { color: var(--cb-gold); font-size: 11px; width: 13px; text-align: center; flex: 0 0 auto; } .cb-mo-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cb-mo-chip:hover { border-color: var(--cb-gold); background: rgba(201, 162, 95, 0.1); } .cb-mo-chip:active { transform: scale(0.97); } .cb-mo-chip.active { border-color: var(--cb-gold); background: rgba(201, 162, 95, 0.18); box-shadow: inset 0 0 0 1px var(--cb-gold); } /* ---- Phase 4: fullscreen editor, animation preview, remove-bg, new elements ---- */ /* Native Fullscreen API: :fullscreen + CSS fallback class both supported */ .cb:fullscreen, .cb.cb-fullscreen { position: fixed; inset: 0; z-index: 9999; height: 100vh; min-height: 100vh; border: 0; border-radius: 0; max-width: none; } .cb:fullscreen .cb-body, .cb.cb-fullscreen .cb-body { min-height: 0; } /* CSS-only fallback: hide everything except the builder when API unavailable */ body.cb-fs-fallback { overflow: hidden; } body.cb-fs-fallback .cb { position: fixed; inset: 0; z-index: 99999; height: 100vh; border-radius: 0; } .cb-iconbtn.active { background: var(--cb-gold-soft); border-color: var(--cb-gold); color: var(--cb-gold); } /* Live animation preview inside the editor (mirrors public-page keyframes) */ .cb-anim-preview { animation-duration: var(--cbr-dur, 0.8s); animation-delay: var(--cbr-delay, 0s); animation-fill-mode: both; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } .cb-anim-preview[data-anim='fade'] { animation-name: cbpFade; } .cb-anim-preview[data-anim='slide-up'] { animation-name: cbpSlideUp; } .cb-anim-preview[data-anim='slide-down'] { animation-name: cbpSlideDown; } .cb-anim-preview[data-anim='slide-left'] { animation-name: cbpSlideLeft; } .cb-anim-preview[data-anim='slide-right'] { animation-name: cbpSlideRight; } .cb-anim-preview[data-anim='zoom-in'] { animation-name: cbpZoomIn; } .cb-anim-preview[data-anim='zoom-out'] { animation-name: cbpZoomOut; } .cb-anim-preview[data-anim='float'] { animation-name: cbpFloat; animation-iteration-count: 3; animation-direction: alternate; } .cb-anim-preview[data-anim='pulse'] { animation-name: cbpPulse; animation-iteration-count: 3; } .cb-anim-preview[data-anim='breathe'] { animation-name: cbpBreathe; animation-iteration-count: 3; animation-direction: alternate; } .cb-anim-preview[data-anim='sway'] { animation-name: cbpSway; animation-iteration-count: 3; animation-direction: alternate; } @keyframes cbpFade { from { opacity: 0; } to { opacity: 1; } } @keyframes cbpSlideUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes cbpSlideDown { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } } @keyframes cbpSlideLeft { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } } @keyframes cbpSlideRight { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } } @keyframes cbpZoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } } @keyframes cbpZoomOut { from { opacity: 0; transform: scale(1.18); } to { opacity: 1; transform: none; } } @keyframes cbpFloat { from { transform: translateY(0); } to { transform: translateY(-10px); } } @keyframes cbpPulse { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } } @keyframes cbpBreathe { from { opacity: 0.7; } to { opacity: 1; } } @keyframes cbpSway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } } @keyframes cbpSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* Loop animation LIVE preview inside the editor */ .cb-loop-live { animation-duration: var(--cbr-loop-dur, 3s); animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .cb-loop-live[data-loop='float'] { animation-name: cbpFloat; animation-direction: alternate; } .cb-loop-live[data-loop='pulse'] { animation-name: cbpPulse; } .cb-loop-live[data-loop='breathe'] { animation-name: cbpBreathe; animation-direction: alternate; } .cb-loop-live[data-loop='sway'] { animation-name: cbpSway; animation-direction: alternate; } .cb-loop-live[data-loop='spin'] { animation-name: cbpSpin; animation-timing-function: linear; } /* Remove-background button state in the properties panel */ .cb-removebg { position: relative; } .cb-removebg.busy { opacity: 0.6; pointer-events: none; } .cb-checkers { background-image: linear-gradient(45deg, #3a3d44 25%, transparent 25%), linear-gradient(-45deg, #3a3d44 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #3a3d44 75%), linear-gradient(-45deg, transparent 75%, #3a3d44 75%); background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; } /* Icon presets in properties panel */ .cb-icon-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .cb-icon-chip { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--cb-fg); background: var(--cb-elev); border: 1px solid var(--cb-border); } .cb-icon-chip:hover { background: var(--cb-gold-soft); border-color: var(--cb-gold); color: var(--cb-gold); } /* Foil / gradient text presets */ .cb-foil-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .cb-foil-chip { padding: 5px 11px; border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 700; color: #241c08; border: 1px solid var(--cb-border); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35); background-size: cover; line-height: 1.1; } .cb-foil-chip:hover { outline: 2px solid var(--cb-gold); outline-offset: 1px; } .cb-foil-clear { background: var(--cb-elev); color: var(--cb-muted); text-shadow: none; } .cb-foil-clear:hover { color: var(--cb-fg); } /* Sub-label inside an effects group */ .cb-prop-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cb-muted); margin: 4px 0 6px; font-weight: 600; } /* Phase 9 Tahap 2 — per-device override banner in the properties panel */ .cb-dev-banner { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; font-size: 11px; line-height: 1.4; color: #cdd2e4; background: rgba(120, 130, 160, 0.1); border: 1px solid rgba(255, 255, 255, 0.08); } .cb-dev-banner.is-base { color: #9aa3c0; background: rgba(90, 100, 130, 0.08); } .cb-dev-banner.is-override { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.35); } .cb-dev-banner-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cb-dev-banner b { color: #fff; } .cb-dev-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 10px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; } .cb-dev-tag.is-auto { color: #93c5fd; background: rgba(59, 130, 246, 0.14); } .cb-dev-tag.is-override { color: #fbbf24; background: rgba(251, 191, 36, 0.16); } /* amber dot next to a layer name when it has an override for the active device */ .cb-ldev-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 6px; background: #fbbf24; box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.25); vertical-align: middle; } /* One-click text-effect preset chips (Shadow/Lift/Hollow/Splice/Echo/Neon/Glow/Glitch) */ .cb-fx-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .cb-fx-chip { padding: 9px 8px; min-width: 56px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; text-align: center; background: #1a1a1a; color: #fff; border: 1px solid var(--cb-border); line-height: 1; } .cb-fx-chip:hover { border-color: var(--cb-gold); } .cb-fx-chip.active { outline: 2px solid var(--cb-gold); outline-offset: 1px; } /* visual hint of each effect on the chip itself */ .cb-fx-none { background: var(--cb-elev); color: var(--cb-muted); } .cb-fx-shadow { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); } .cb-fx-lift { text-shadow: 0 6px 8px rgba(0, 0, 0, 0.5); } .cb-fx-hollow { color: transparent; -webkit-text-stroke: 1px #fff; } .cb-fx-splice { color: transparent; -webkit-text-stroke: 1px #fff; text-shadow: 3px 3px 0 #888; } .cb-fx-echo { text-shadow: 3px 3px 0 #888, 6px 6px 0 #555; } .cb-fx-neon { color: #eafaff; text-shadow: 0 0 6px #7fd1ff, 0 0 12px #7fd1ff; } .cb-fx-glow { text-shadow: 0 0 8px #ffd166, 0 0 14px #ffd166; } .cb-fx-glitch { text-shadow: -2px 0 #ff2d55, 2px 0 #00e5ff; } /* Pattern / texture overlay preset chips */ .cb-pat-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .cb-pat-chip { padding: 6px 11px; border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 700; color: #241c08; border: 1px solid var(--cb-border); line-height: 1.1; background-size: 6px 6px, 6px 6px, 100% 100%; } .cb-pat-chip:hover { outline: 2px solid var(--cb-gold); outline-offset: 1px; } .cb-pat-chip.active { outline: 2px solid var(--cb-gold); outline-offset: 1px; } .cb-pat-none { background: var(--cb-elev); color: var(--cb-muted); } .cb-pat-none:hover { color: var(--cb-fg); } .cb-pat-glitter-gold { background: radial-gradient(circle at 30% 30%, #fff8d8 0 1px, transparent 1.6px), radial-gradient(circle at 70% 60%, #fbeec0 0 1px, transparent 1.6px), linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); } .cb-pat-glitter-silver { background: radial-gradient(circle at 30% 30%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 70% 60%, #e9eef2 0 1px, transparent 1.6px), linear-gradient(135deg, #8e9eab, #eef2f3, #8e9eab); } .cb-pat-glitter-rose { background: radial-gradient(circle at 30% 30%, #fff0f2 0 1px, transparent 1.6px), radial-gradient(circle at 70% 60%, #f6d7dc 0 1px, transparent 1.6px), linear-gradient(135deg, #b76e79, #eacdd2, #b76e79); } .cb-pat-marble { background: linear-gradient( 115deg, #f5f3ee 0%, #e9e4da 40%, #cfc8bb 50%, #e9e4da 60%, #f5f3ee 100% ); } .cb-pat-confetti { background: #2a2a2a; color: #fff; } /* ===== Box-Model Pro + Scroll Pro chips (Elementor-grade controls) ===== */ .cb-bm-presets, .cb-sp-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .cb-bm-chip, .cb-sp-chip { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--cb-fg); border: 1px solid var(--cb-border); background: var(--cb-elev); line-height: 1.1; transition: outline 0.12s, background 0.12s; } .cb-bm-chip:hover, .cb-sp-chip:hover { outline: 2px solid var(--cb-gold); outline-offset: 1px; background: var(--cb-bg); } /* Right-click context menu */ .cb-ctx { position: fixed; z-index: 100001; min-width: 208px; padding: 6px; background: var(--cb-bg); border: 1px solid var(--cb-border); border-radius: 10px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5); font-size: 12px; color: var(--cb-fg); } .cb-ctx-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; background: transparent; border: 0; border-radius: 6px; color: var(--cb-fg); cursor: pointer; text-align: left; } .cb-ctx-item i { width: 15px; text-align: center; color: var(--cb-muted); } .cb-ctx-item span { flex: 1; } .cb-ctx-item kbd { font-size: 9px; color: var(--cb-muted); background: var(--cb-elev); border: 1px solid var(--cb-border); border-radius: 4px; padding: 1px 5px; } .cb-ctx-item:hover { background: var(--cb-gold-soft); } .cb-ctx-item:hover i { color: var(--cb-gold); } .cb-ctx-item.danger:hover { background: rgba(220, 53, 69, 0.15); } .cb-ctx-item.danger:hover i, .cb-ctx-item.danger:hover span { color: #ff6b6b; } .cb-ctx-item.dim { opacity: 0.4; cursor: default; } .cb-ctx-sep { height: 1px; margin: 5px 6px; background: var(--cb-border); } /* Block inserter select (slightly highlighted to read as an "add" action) */ .cb-blk-select { color: var(--cb-gold); font-weight: 600; } /* Background builder modal */ .cb-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); } .cb-modal[hidden] { display: none; } .cb-modal-card { width: 340px; max-width: 92vw; background: var(--cb-bg); color: var(--cb-fg); border: 1px solid var(--cb-border); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } .cb-modal-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-weight: 600; border-bottom: 1px solid var(--cb-border); } .cb-modal-head i { color: var(--cb-gold); } .cb-modal-x { margin-left: auto; background: none; border: 0; color: var(--cb-muted); cursor: pointer; font-size: 16px; } .cb-modal-x:hover { color: var(--cb-fg); } .cb-modal-body { padding: 16px; } .cb-modal-body label { display: block; font-size: 12px; color: var(--cb-muted); margin: 10px 0 4px; } .cb-modal-body input[type='text'], .cb-modal-body select { width: 100%; box-sizing: border-box; background: var(--cb-elev); color: var(--cb-fg); border: 1px solid var(--cb-border); border-radius: 8px; padding: 7px 9px; } .cb-modal-body input[type='color'] { width: 100%; height: 36px; border: 1px solid var(--cb-border); border-radius: 8px; background: var(--cb-elev); cursor: pointer; } .cb-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--cb-border); } /* --- Background settings: LEFT in-layout panel (identical to the other left menus) --- The Section Background editor lives INSIDE .cb-body (below the toolbar) and docks against the tool rail, exactly like the Properties / Design / Assets panels. It is NOT a floating modal: it does not cover the top toolbar, has no dimming overlay, and uses the same panel header style (.cb-left-panel-head). .cb-body is the positioning context so the panel spans from just below the toolbar down to the bottom of the workspace. */ .cb-body { position: relative; } .cb-modal.cb-bg-dock { /* override the base .cb-modal fixed/centred overlay → in-layout side panel */ position: absolute; inset: 0 auto 0 68px; right: auto; z-index: 40; display: block; background: none; backdrop-filter: none; padding: 0; } .cb-modal.cb-bg-dock[hidden] { display: none; } .cb-modal-card.cb-modal-card-dock { width: 340px; max-width: calc(100vw - 68px); height: 100%; max-height: none; margin: 0; display: flex; flex-direction: column; background: var(--cb-panel); color: var(--cb-fg); border-radius: 0; border: 0; border-right: 1px solid var(--cb-border); box-shadow: 14px 0 36px rgba(0, 0, 0, 0.35); animation: cbDockIn 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); } @keyframes cbDockIn { from { transform: translateX(-22px); opacity: 0.35; } to { transform: translateX(0); opacity: 1; } } /* header matches .cb-left-panel-head exactly (already shares the class) */ .cb-modal-card-dock .cb-modal-head { flex: 0 0 auto; } .cb-modal-card-dock .cb-modal-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 14px 14px 16px; min-height: 0; } .cb-modal-card-dock .cb-modal-body::-webkit-scrollbar { width: 9px; } .cb-modal-card-dock .cb-modal-body::-webkit-scrollbar-thumb { background: var(--cb-border); border-radius: 8px; } .cb-modal-card-dock .cb-modal-foot { flex: 0 0 auto; background: var(--cb-panel); } /* tighten vertical rhythm so it reads compact like the other panels */ .cb-modal-card-dock .cb-modal-body label { margin: 8px 0 3px; } .cb-modal-card-dock .cb-bg-preview, .cb-modal-card-dock #cb-bg-imgpreview { height: 88px; } @media (max-width: 860px) { /* on mobile the whole .cb-left becomes a slide-in drawer; the background panel rides on top of the workspace flush to the 60px collapsed rail */ .cb-modal.cb-bg-dock { position: fixed; inset: 0 auto 0 60px; z-index: 60; } .cb-modal-card.cb-modal-card-dock { width: calc(100vw - 60px); max-width: none; border-right: 0; } } /* --- Template Library (wide modal) --- */ .cb-modal-card-wide { width: 760px; max-width: 94vw; max-height: 88vh; display: flex; flex-direction: column; } .cb-tpl-tabs { display: flex; gap: 4px; padding: 10px 16px 0; } .cb-tpl-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--cb-muted); font-size: 13px; padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 7px; } .cb-tpl-tab.active { color: var(--cb-fg); border-bottom-color: var(--cb-gold); } .cb-tpl-tab i { color: var(--cb-gold); } .cb-tpl-body { flex: 1; overflow-y: auto; } .cb-tpl-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .cb-tpl-cat { background: var(--cb-elev); border: 1px solid var(--cb-border); color: var(--cb-muted); font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer; } .cb-tpl-cat.active { background: var(--cb-gold); color: #1a1505; border-color: var(--cb-gold); } .cb-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; } .cb-tpl-empty { grid-column: 1/-1; color: var(--cb-muted); text-align: center; padding: 30px 12px; font-size: 13px; } .cb-tpl-card { border: 1px solid var(--cb-border); border-radius: 10px; padding: 8px; background: var(--cb-panel); transition: 0.12s; } .cb-tpl-card:hover { border-color: var(--cb-gold); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } .cb-tpl-thumb-frame { position: relative; overflow: hidden; background: #fff; border-radius: 6px; margin: 0 auto 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); pointer-events: none; } .cb-tpl-thumb-scale { position: absolute; top: 0; left: 0; transform-origin: top left; overflow: hidden; } .cb-tpl-card-name { font-size: 12px; text-align: center; color: var(--cb-fg); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cb-tpl-card-acts { display: flex; gap: 6px; justify-content: center; } .cb-tpl-card-acts .cb-mini { padding: 5px 10px; font-size: 11px; } .cb-tpl-foot { justify-content: space-between; align-items: center; } .cb-tpl-hint { color: var(--cb-muted); font-size: 11px; display: flex; align-items: center; gap: 6px; } .cb-tpl-hint i { color: var(--cb-gold); } /* ===== F5 — Comments / annotations (collaboration) ===== */ .cb-iconbtn .cb-cmt-badge { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--cb-gold, #c9a227); color: #15171f; font-size: 9px; line-height: 15px; text-align: center; font-weight: 700; } #cb-comments { position: relative; } .cb-canvas.cb-cmt-cursor { cursor: crosshair; } .cb-cmt-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 60; } .cb-cmt-pin { position: absolute; transform: translate(-50%, -100%); width: 24px; height: 24px; border-radius: 50% 50% 50% 2px; background: var(--cb-gold, #c9a227); color: #15171f; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); font-size: 11px; font-weight: 700; cursor: pointer; pointer-events: auto; display: flex; align-items: center; justify-content: center; } .cb-cmt-pin.empty { background: #8e8e8e; } .cb-cmt-pin.resolved { background: #3fae6b; } .cb-cmt-pin:hover { transform: translate(-50%, -100%) scale(1.12); } .cb-comments-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; max-width: 86vw; background: #15171f; border-left: 1px solid var(--cb-border, #2a2d39); box-shadow: -12px 0 36px rgba(0, 0, 0, 0.45); transform: translateX(105%); transition: transform 0.22s ease; z-index: 80; display: flex; flex-direction: column; } .cb-comments-panel.open { transform: translateX(0); } .cb-cmt-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--cb-border, #2a2d39); font-weight: 600; color: var(--cb-fg, #e8e8ea); } .cb-cmt-head i { color: var(--cb-gold, #c9a227); margin-right: 6px; } .cb-cmt-head-act { display: flex; align-items: center; gap: 8px; } .cb-cmt-filter { font-size: 11px; color: var(--cb-muted, #9aa0ad); display: flex; align-items: center; gap: 4px; cursor: pointer; } .cb-cmt-hint { padding: 9px 14px; font-size: 11px; color: var(--cb-muted, #9aa0ad); border-bottom: 1px solid var(--cb-border, #2a2d39); } .cb-cmt-hint i { color: var(--cb-gold, #c9a227); margin-right: 5px; } .cb-cmt-list { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; } .cb-cmt-empty { color: var(--cb-muted, #9aa0ad); font-size: 12px; text-align: center; padding: 24px 8px; line-height: 1.6; } .cb-cmt-item { background: var(--cb-elev, #1d2029); border: 1px solid var(--cb-border, #2a2d39); border-radius: 9px; padding: 9px 10px; } .cb-cmt-item.resolved { opacity: 0.6; } .cb-cmt-item.flash { box-shadow: 0 0 0 2px var(--cb-gold, #c9a227); } .cb-cmt-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 11px; } .cb-cmt-no { width: 18px; height: 18px; border-radius: 50%; background: var(--cb-gold, #c9a227); color: #15171f; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 10px; } .cb-cmt-author { color: var(--cb-fg, #e8e8ea); font-weight: 600; } .cb-cmt-when { color: var(--cb-muted, #9aa0ad); margin-left: auto; font-size: 10px; } .cb-cmt-text { width: 100%; resize: vertical; min-height: 38px; background: #0f1117; border: 1px solid var(--cb-border, #2a2d39); border-radius: 6px; color: var(--cb-fg, #e8e8ea); font-size: 12px; padding: 7px 8px; box-sizing: border-box; font-family: inherit; } .cb-cmt-acts { display: flex; gap: 6px; margin-top: 7px; } .cb-cmt-acts .cb-mini { font-size: 11px; } .cb-mini-danger { color: #e06b6b; } @media (max-width: 860px) { .cb-comments-panel { width: 100%; } } .cb-bg-tabs { display: flex; gap: 4px; background: var(--cb-elev); border-radius: 9px; padding: 4px; } .cb-bg-tab { flex: 1; padding: 7px; border: 0; border-radius: 6px; background: none; color: var(--cb-muted); cursor: pointer; font-size: 12px; } .cb-bg-tab.active { background: var(--cb-gold-soft); color: var(--cb-gold); } .cb-bg-pane { display: none; } .cb-bg-pane.active { display: block; } .cb-bg-preview { height: 54px; border-radius: 8px; margin-top: 10px; border: 1px solid var(--cb-border); } #cb-bg-imgpreview { height: 120px; display: flex; align-items: center; justify-content: center; background: #f4f1ea; } .cb-bg-imgrow { display: flex; gap: 6px; align-items: stretch; } .cb-bg-imgrow input { flex: 1; } .cb-bg-imgrow .cb-mini { white-space: nowrap; } .cb-bg-pane label { display: block; margin-top: 8px; } /* Saved background presets */ .cb-bg-presets-sec { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--cb-border); } .cb-bg-presets-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .cb-bg-presets-head strong { font-size: 0.82rem; } .cb-bg-presets { display: flex; flex-wrap: wrap; gap: 8px; } .cb-bg-preset { position: relative; width: 84px; } .cb-bg-preset-sw { width: 84px; height: 50px; border-radius: 8px; border: 1px solid var(--cb-border); cursor: pointer; background-size: cover; background-position: center; display: block; } .cb-bg-preset-sw:hover { outline: 2px solid var(--cb-accent, #d4af37); outline-offset: 1px; } .cb-bg-preset-lbl { display: block; font-size: 0.66rem; color: var(--app-text-muted, #8b93a7); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cb-bg-preset-del { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--cb-border); background: #fff; color: #b00; cursor: pointer; line-height: 1; font-size: 0.7rem; padding: 0; } /* Custom parallax animation block (AI / import / edit) */ .cb-pfx { margin-top: 14px; border: 1px solid var(--cb-border); border-radius: 10px; overflow: hidden; } .cb-pfx-toggle { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--cb-gold-soft, #f7efe0); border: none; cursor: pointer; font-size: 0.84rem; font-weight: 600; color: var(--cb-fg, #3a342c); } .cb-pfx-toggle .cb-pfx-caret { margin-left: auto; transition: transform 0.2s; } .cb-pfx-toggle.open .cb-pfx-caret { transform: rotate(180deg); } .cb-pfx-badge { font-size: 0.62rem; font-weight: 700; color: #fff; background: #2e9e5b; border-radius: 999px; padding: 2px 7px; } .cb-pfx-body { padding: 10px 12px; border-top: 1px solid var(--cb-border); } .cb-pfx-tabs { display: flex; gap: 4px; margin-bottom: 8px; } .cb-pfx-tab { flex: 1; padding: 6px 8px; border: 1px solid var(--cb-border); border-radius: 7px; background: #fff; cursor: pointer; font-size: 0.76rem; } .cb-pfx-tab.active { background: var(--cb-gold-soft); border-color: var(--cb-gold); color: var(--cb-gold); } .cb-pfx-sub { display: none; } .cb-pfx-sub.active { display: block; } .cb-pfx-body label { display: block; margin-top: 8px; font-size: 0.74rem; } .cb-pfx-body input[type='text'] { width: 100%; } .cb-bg-pane .cb-prop-grid2 label { margin-top: 0; } .cb-switch-inline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cb-text); text-transform: none !important; letter-spacing: 0 !important; height: 32px; } .cb-switch-inline input { width: auto; } /* universal layer fill section */ .cb-box-pane[hidden], .cb-box-extra[hidden] { display: none; } .cb-layer-box { background-size: cover; background-position: center; } /* multi-stop gradient builder */ .cb-grad-builder { display: flex; flex-direction: column; gap: 8px; } .cb-grad-bar { height: 22px; border-radius: 6px; border: 1px solid var(--cb-border); } .cb-grad-stops { display: flex; flex-direction: column; gap: 6px; } .cb-grad-stop { display: flex; gap: 6px; align-items: center; } .cb-grad-stop input[type='color'] { width: 40px; height: 30px; padding: 2px; border: 1px solid var(--cb-border); border-radius: 6px; background: var(--cb-elev); cursor: pointer; } .cb-grad-stop input[type='number'] { width: 64px; height: 30px; border: 1px solid var(--cb-border); border-radius: 6px; background: var(--cb-elev); color: var(--cb-text); padding: 0 6px; } .cb-grad-del { padding: 5px 8px; } .cb-grad-ctl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .cb-grad-type { height: 30px; border: 1px solid var(--cb-border); border-radius: 6px; background: var(--cb-elev); color: var(--cb-text); padding: 0 6px; } .cb-grad-anglewrap { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--cb-muted); } .cb-grad-angle { width: 60px; height: 30px; border: 1px solid var(--cb-border); border-radius: 6px; background: var(--cb-elev); color: var(--cb-text); padding: 0 6px; } /* studio editor button */ .ts-btn-canvas { background: linear-gradient(135deg, #5e6ad2, #7c5ad2); color: #fff; } .ts-btn-canvas:hover { filter: brightness(1.08); } /* 861–1100px: keep flex row layout but trim panel widths so the canvas breathes */ @media (max-width: 1100px) and (min-width: 861px) { .cb-right { flex-basis: 210px; width: 210px; } .cb-left-panel { width: 240px; flex-basis: 240px; } } /* ===================================================================== CATALOG — premium theme storefront (Phase 6.3) ===================================================================== */ .cat-page { max-width: 1240px; margin: 0 auto; padding: 7rem 1.6rem 5rem; } .cat-hero { text-align: center; margin-bottom: 2.4rem; } .cat-hero .display { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; } .cat-deal-banner { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.4rem; padding: 0.6rem 1.2rem; border-radius: 999px; background: linear-gradient(135deg, rgba(var(--p-2), 0.18), rgba(var(--p-3), 0.12)); border: 1px solid rgba(var(--p-2), 0.4); color: var(--gold); font-size: 0.82rem; letter-spacing: 0.02em; font-weight: 500; } .cat-deal-banner b { color: var(--ink); } html.dark .cat-deal-banner b { color: var(--app-text); } .cat-deal-banner i { color: #e0566f; } /* Toolbar: search + filters */ .cat-toolbar { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.4rem; } .cat-search { position: relative; max-width: 420px; margin: 0 auto; width: 100%; } .cat-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.85rem; } .cat-search input { width: 100%; padding: 0.8rem 1rem 0.8rem 2.6rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-family: inherit; font-size: 0.92rem; } html.dark .cat-search input { background: var(--app-panel-2); border-color: var(--app-border); } .cat-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--p-2), 0.2); } .cat-filterbar { display: flex; flex-direction: column; gap: 0.7rem; align-items: center; } .cat-filtergroup { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; } .cat-filterlabel { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-right: 0.3rem; } .cat-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-family: inherit; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: 0.18s; } html.dark .cat-chip { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } .cat-chip i { font-size: 0.78rem; opacity: 0.8; } .cat-chip:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); } .cat-chip.active { background: var(--grad-cta); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -8px var(--glow); } .cat-chip.active i { opacity: 1; } .cat-chip-tier.active { background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 6px 16px -8px var(--t2); } .cat-count { text-align: center; font-size: 0.8rem; color: var(--muted); margin-bottom: 1.6rem; letter-spacing: 0.04em; } .cat-count span { color: var(--gold); font-weight: 600; } /* Grid + cards */ .tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.8rem; } .tc-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s, border-color 0.3s; } html.dark .tc-card { background: #141c2a; border-color: var(--app-border); } .tc-card:hover { transform: translateY(-8px); box-shadow: 0 28px 56px -26px var(--glow); border-color: rgba(var(--p-2), 0.5); } .tc-media { position: relative; aspect-ratio: 4/5; background: color-mix(in srgb, var(--app-text) 5%, var(--app-bg)); overflow: hidden; } .tc-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .tc-card:hover .tc-img { transform: scale(1.06); } .tc-noimg { display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: rgba(var(--p-2), 0.5); } .tc-tier { position: absolute; top: 0.85rem; left: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.34rem 0.7rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: linear-gradient(135deg, var(--t1), var(--t2)); color: var(--tt); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.3); } .tc-tier i { font-size: 0.64rem; } .tc-discount { position: absolute; top: 0.85rem; right: 0.85rem; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.34rem 0.65rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; background: linear-gradient(135deg, #ff6b81, #e0395a); color: #fff; box-shadow: 0 4px 12px -4px rgba(224, 57, 90, 0.6); animation: tc-pulse 2.2s ease-in-out infinite; } @keyframes tc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } } .tc-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; background: linear-gradient(to top, rgba(10, 15, 26, 0.78), rgba(10, 15, 26, 0.25)); opacity: 0; transition: opacity 0.3s; } .tc-card:hover .tc-overlay { opacity: 1; } .tc-ov-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.3rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: 0.2s; } .tc-ov-ghost { background: rgba(255, 255, 255, 0.16); color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(4px); } .tc-ov-ghost:hover { background: rgba(255, 255, 255, 0.28); } .tc-ov-solid { background: var(--grad-cta); color: #fff; } .tc-ov-solid:hover { transform: translateY(-2px); } .tc-body { padding: 1.25rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; } .tc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; } .tc-tag { display: inline-flex; align-items: center; gap: 0.32rem; font-size: 0.66rem; letter-spacing: 0.04em; color: var(--muted); background: var(--soft); padding: 0.24rem 0.55rem; border-radius: 999px; } html.dark .tc-tag { background: rgba(255, 255, 255, 0.06); } .tc-tag i { font-size: 0.62rem; color: var(--gold); } .tc-name { font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.35rem; line-height: 1.2; margin: 0 0 0.4rem; } .tc-name a { color: var(--ink); text-decoration: none; } html.dark .tc-name a { color: var(--app-text); } .tc-name a:hover { color: var(--gold); } .tc-desc { color: var(--muted); font-size: 0.86rem; line-height: 1.55; margin: 0 0 1rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6rem; border-top: 1px solid var(--line); padding-top: 1rem; } html.dark .tc-foot { border-color: rgba(255, 255, 255, 0.08); } .tc-price-wrap { display: flex; flex-direction: column; line-height: 1.1; } .tc-price-old { font-size: 0.78rem; color: var(--muted); text-decoration: line-through; text-decoration-color: #e0566f; opacity: 0.8; } .tc-price { font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 500; color: var(--gold); } .tc-price-free { font-family: 'Fraunces', serif; font-size: 1.4rem; color: #5e8c6a; font-weight: 500; } .tc-cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.05rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; text-decoration: none; background: var(--ink); color: #fff; transition: 0.2s; white-space: nowrap; } html.dark .tc-cta { background: var(--grad-cta); color: #fff; } .tc-cta:hover { background: var(--gold); transform: translateX(2px); } .tc-cta i { font-size: 0.7rem; } .tc-preview-btn { display: none; } .cat-empty { grid-column: 1/-1; text-align: center; padding: 4rem 1rem; color: var(--muted); } .cat-empty i { font-size: 2.6rem; color: rgba(var(--p-2), 0.45); margin-bottom: 1rem; display: block; } /* Theme detail page */ .td-hero { max-width: 1140px; margin: 0 auto; padding: 7rem 1.6rem 5rem; } .td-back { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); text-decoration: none; font-size: 0.85rem; margin-bottom: 1.6rem; transition: 0.2s; } .td-back:hover { color: var(--gold); } .td-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .td-preview { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; background: color-mix(in srgb, var(--app-text) 5%, var(--app-bg)); box-shadow: 0 30px 70px -30px var(--glow); } .td-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .td-noimg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3rem; color: rgba(var(--p-2), 0.5); } .td-tier { position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: linear-gradient(135deg, var(--t1), var(--t2)); color: var(--tt); } .td-info .display { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0.4rem 0 0.6rem; } .td-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.4rem; } .td-tag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); background: var(--soft); padding: 0.3rem 0.7rem; border-radius: 999px; } html.dark .td-tag { background: rgba(255, 255, 255, 0.06); } .td-tag i { color: var(--gold); font-size: 0.66rem; } .td-price { margin: 1.6rem 0; } .td-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.8rem; } .td-price-old { font-size: 1.2rem; color: var(--muted); text-decoration: line-through; text-decoration-color: #e0566f; } .td-price-now { font-family: 'Fraunces', serif; font-size: 2.6rem; font-weight: 500; color: var(--gold); } .td-price-now.td-free { color: #5e8c6a; } .td-discount { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.7rem; border-radius: 999px; font-size: 0.74rem; font-weight: 800; background: linear-gradient(135deg, #ff6b81, #e0395a); color: #fff; } .td-price-note { display: block; margin-top: 0.5rem; font-size: 0.78rem; color: var(--muted); } .td-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0.4rem 0 1.8rem; } .td-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .td-features li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--muted); } .td-features i { color: #5e8c6a; font-size: 0.82rem; } @media (max-width: 760px) { .td-grid { grid-template-columns: 1fr; gap: 2rem; } .tc-grid { grid-template-columns: 1fr; gap: 1.4rem; } .tc-card { border-radius: 20px; } .tc-media { aspect-ratio: 16/10; } .tc-media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(7, 11, 20, 0.55), transparent); pointer-events: none; } .tc-overlay { display: none; } .tc-tier { top: 0.85rem; left: 0.85rem; padding: 0.42rem 0.85rem; font-size: 0.68rem; } .tc-discount { top: 0.85rem; right: 0.85rem; font-size: 0.7rem; } .tc-tags { display: none; } .tc-name { font-size: 1.22rem; } .tc-desc { font-size: 0.86rem; } .tc-foot { flex-direction: column; align-items: stretch; gap: 0.85rem; } .tc-price-wrap { flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; gap: 0.6rem; } .tc-price { font-size: 1.4rem; } .tc-price-free { font-size: 1.3rem; } .tc-cta { width: 100%; justify-content: center; padding: 0.85rem 1rem; border-radius: 14px; font-size: 0.9rem; font-weight: 700; color: #fff; background: var(--grad-cta); box-shadow: 0 10px 26px -12px var(--glow); } html.dark .tc-cta { color: #fff; background: var(--grad-cta); } .tc-cta:hover { transform: none; background: var(--grad-cta-hover); } .tc-preview-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.8rem 1rem; border-radius: 14px; font-size: 0.88rem; font-weight: 600; text-decoration: none; color: var(--ink); background: var(--soft); border: 1px solid var(--line); } html.dark .tc-preview-btn { color: var(--app-text); background: rgba(255, 255, 255, 0.06); border-color: var(--app-border); } .cat-filterbar { align-items: stretch; max-width: 100%; } .cat-filtergroup { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.4rem; } .cat-filtergroup::-webkit-scrollbar { display: none; } .cat-filtergroup .cat-chip, .cat-filtergroup .cat-filterlabel { white-space: nowrap; flex: 0 0 auto; } } /* ===================================================================== Owner Console · Membership & Pricing ===================================================================== */ .mb-wrap { display: flex; flex-direction: column; gap: 1.4rem; } .mb-intro { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.4rem; border-radius: 16px; } .mb-intro-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 1.2rem; } .mb-intro h3 { margin: 0 0 0.3rem; font-size: 1.05rem; } .mb-intro p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--ds-muted, #667); } .mb-loading { padding: 2rem; text-align: center; color: var(--ds-muted, #778); font-size: 0.9rem; } .mb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.2rem; } .mb-card { background: var(--ds-card, #fff); border: 1px solid var(--ds-border, #e7e7ef); border-radius: 16px; padding: 1.1rem 1.2rem 1.2rem; box-shadow: 0 4px 18px rgba(20, 20, 50, 0.05); display: flex; flex-direction: column; gap: 0.8rem; } .mb-card.is-free { border-color: #7ba888; background: linear-gradient(180deg, rgba(123, 168, 136, 0.06), transparent 40%); } .mb-card-head { display: flex; align-items: center; justify-content: space-between; } .mb-card-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.05rem; color: var(--ds-text); } .mb-intro h3 { color: var(--ds-text); } .mb-tier-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .mb-free { background: #5e8c6a; } .mb-essential { background: #5b87ad; } .mb-premium { background: #b8935a; } .mb-atelier { background: #7d5ba6; } .mb-tag-trial { font-size: 0.72rem; font-weight: 700; color: #3f6b4d; background: rgba(123, 168, 136, 0.18); padding: 0.22rem 0.55rem; border-radius: 999px; } .mb-tag-paid { font-size: 0.72rem; font-weight: 600; color: #667; background: #eef0f6; padding: 0.22rem 0.55rem; border-radius: 999px; } .mb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; } .mb-field { display: flex; flex-direction: column; gap: 0.28rem; } .mb-field.mb-full { grid-column: 1/-1; } .mb-lab { font-size: 0.74rem; font-weight: 600; color: var(--ds-muted, #667); display: flex; flex-direction: column; gap: 0.1rem; } .mb-lab small { font-weight: 400; font-size: 0.66rem; color: #9aa; line-height: 1.3; } .mb-input { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--ds-border, #dde); border-radius: 9px; font-size: 0.85rem; background: var(--ds-bg, #fff); color: inherit; } .mb-input:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); } .mb-feat { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.74rem; font-weight: 600; color: var(--ds-muted, #667); } .mb-feat textarea { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--ds-border, #dde); border-radius: 9px; font-size: 0.83rem; font-family: inherit; resize: vertical; background: var(--ds-bg, #fff); color: inherit; } .mb-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; cursor: pointer; } .mb-toggle input { width: 16px; height: 16px; accent-color: #8b5cf6; } .mb-savebar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: 0.8rem 1rem; background: var(--ds-card, #fff); border: 1px solid var(--ds-border, #e7e7ef); border-radius: 14px; box-shadow: 0 -4px 18px rgba(20, 20, 50, 0.06); } .mb-status { font-size: 0.8rem; color: var(--ds-muted, #778); } html.dark .mb-card { background: #1a1a28; border-color: #2c2c40; } html.dark .mb-input, html.dark .mb-feat textarea { background: #13131f; border-color: #2c2c40; } html.dark .mb-savebar { background: #1a1a28; border-color: #2c2c40; } html.dark .mb-tag-paid { background: #262636; color: #aab; } @media (max-width: 560px) { .mb-grid { grid-template-columns: 1fr; } } /* ===================================================================== Landing · Free-trial banner + dynamic pricing tagline ===================================================================== */ .lp-trial { max-width: 1100px; margin: 0 auto; padding: 1rem 1.4rem; } .lp-trial-inner { display: flex; align-items: center; gap: 1.4rem; padding: 1.6rem 2rem; border-radius: 22px; background: linear-gradient(135deg, rgba(123, 168, 136, 0.14), rgba(94, 140, 106, 0.06)); border: 1px solid rgba(123, 168, 136, 0.3); } .lp-trial-ico { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #7ba888, #5e8c6a); color: #fff; font-size: 1.5rem; box-shadow: 0 8px 24px rgba(94, 140, 106, 0.35); } .lp-trial-copy { flex: 1; } .lp-trial-copy h3 { margin: 0 0 0.35rem; font-size: 1.35rem; font-weight: 700; } .lp-trial-copy p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--lp-muted, #5a5a6e); } .lp-trial-cta { flex: 0 0 auto; white-space: nowrap; } .price-tag { margin: 0.1rem 0 0.6rem; font-size: 0.82rem; color: var(--lp-muted, #7a7a8e); font-style: italic; } @media (max-width: 760px) { .lp-trial-inner { flex-direction: column; text-align: center; padding: 1.4rem 1.2rem; } .lp-trial-cta { width: 100%; justify-content: center; } } /* Membership console — reseller tier additions */ .mb-reseller { background: #2f8f96; } .mb-card.is-reseller { border-color: #5ec2c9; background: linear-gradient(180deg, rgba(94, 194, 201, 0.07), transparent 40%); } .mb-tag-reseller { font-size: 0.72rem; font-weight: 700; color: #1f6b70; background: rgba(94, 194, 201, 0.18); padding: 0.22rem 0.55rem; border-radius: 999px; } html.dark .mb-tag-reseller { background: rgba(94, 194, 201, 0.22); color: #8fe0e6; } /* Landing — reseller price card accent */ .price-card.reseller-card { border-color: rgba(94, 194, 201, 0.45); } .price-card .ribbon.ribbon-partner { background: linear-gradient(135deg, #5ec2c9, #2f8f96); } /* Dashboard — tier badge + upgrade button */ .ds-tier-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--tb1, #7ba888), var(--tb2, #5e8c6a)); } .ds-upgrade-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; text-decoration: none; color: #4a3a1f; background: linear-gradient(135deg, #e4c589, #b8935a); box-shadow: 0 4px 14px rgba(184, 147, 90, 0.35); transition: transform 0.15s; } .ds-upgrade-btn:hover { transform: translateY(-1px); } .ds-trial-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700; color: #3f6b4d; background: rgba(123, 168, 136, 0.18); } .ds-trial-pill.ds-trial-ended { color: #8a4b3a; background: rgba(196, 108, 84, 0.16); } /* Trial status banner (active trial = soft green; ended = warm warning) */ .ds-trial-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.1rem; padding: 0.8rem 1rem; border-radius: 12px; border: 1px solid rgba(196, 108, 84, 0.35); background: linear-gradient(135deg, rgba(196, 108, 84, 0.1), rgba(196, 108, 84, 0.05)); color: #6d3d2f; font-size: 0.9rem; } .ds-trial-banner.is-active { border-color: rgba(123, 168, 136, 0.4); background: linear-gradient(135deg, rgba(123, 168, 136, 0.12), rgba(123, 168, 136, 0.05)); color: #3f6b4d; } .ds-trial-banner-txt { display: flex; align-items: center; gap: 0.7rem; } .ds-trial-banner-txt i { font-size: 1.1rem; } .ds-trial-banner-cta { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.95rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; text-decoration: none; color: #fff; background: linear-gradient(135deg, #b8935a, #8a6a38); white-space: nowrap; } .ds-trial-banner-cta:hover { transform: translateY(-1px); } /* Checkout buttons on pricing cards */ .price-card .pc-checkout { cursor: pointer; border: none; width: 100%; font: inherit; } .pc-checkout[disabled] { opacity: 0.6; cursor: default; } /* Landing pricing — discount illusion on cards */ .price-card .price-row { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; flex-wrap: wrap; } .price-card .price-old { font-size: 1.05rem; color: #b9b0a0; text-decoration: line-through; font-weight: 600; } .price-card .price-save { font-size: 0.72rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #e0556b, #c23a52); padding: 0.18rem 0.5rem; border-radius: 999px; } /* Dashboard topbar plan cluster (tier badge + upgrade) */ .ds-plan-cluster { display: flex; align-items: center; gap: 0.6rem; margin-right: 0.4rem; } @media (max-width: 820px) { .ds-plan-cluster .ds-tier-badge, .ds-plan-cluster .ds-trial-pill { display: none; } } @media (max-width: 560px) { .ds-plan-cluster { display: none; } } /* ===================================================================== LANDING PAGE 2.0 — high-conversion redesign (Phase 6.6) ===================================================================== */ /* ---- sticky nav ---- */ /* Floating "pill card" header (exactly like UI UX Pro Max): the PAGE BACKGROUND is full-bleed and fills the whole viewport up to the very top, while the header itself is a DETACHED rounded card with a margin all around it (top/left/right), a thin border and a soft drop-shadow so it appears to hover above the page. The body content area below stays full-width edge-to-edge. */ .lp-nav { position: sticky; top: clamp(0.7rem, 1.6vw, 1.25rem); z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: clamp(0.7rem, 1.6vw, 1.25rem) clamp(0.8rem, 3.2vw, 2rem) 0; padding: 0.7rem clamp(1rem, 2.4vw, 1.7rem); border-radius: 18px; background: color-mix(in srgb, var(--app-bg) 72%, transparent); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border: 1px solid var(--app-border); box-shadow: 0 12px 34px -20px rgba(0, 0, 0, 0.4); transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } .lp-nav.scrolled { background: color-mix(in srgb, var(--app-bg) 88%, transparent); border-color: var(--app-border-strong, var(--line)); box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.5); } /* Dark mode: the floating card uses a translucent dark glass surface (transparent background) so the dark page gradient shows through — keep the border + shadow. */ html.dark .lp-nav { background: color-mix(in srgb, var(--app-bg) 45%, transparent); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 14px 38px -20px rgba(0, 0, 0, 0.65); } html.dark .lp-nav.scrolled { background: color-mix(in srgb, var(--app-bg) 62%, transparent); border-color: rgba(255, 255, 255, 0.12); } .lp-nav-links { display: flex; align-items: center; gap: 1.6rem; } .lp-nav-links a { color: var(--app-text-muted); font-size: 0.92rem; font-weight: 500; text-decoration: none; transition: color 0.2s; } .lp-nav-links a:hover { color: var(--gold); } .lp-nav-actions { display: flex; align-items: center; gap: 0.7rem; } .lp-nav-signin { color: var(--app-text); font-weight: 500; font-size: 0.92rem; text-decoration: none; padding: 0.4rem 0.2rem; } .lp-nav-signin:hover { color: var(--gold); } .lp-theme-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass-bg); color: var(--app-text-muted); cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .lp-theme-btn:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-1px); } /* ---- logged-in account dropdown ---- */ .lp-account { position: relative; } .lp-account-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.7rem 0.35rem 0.4rem; border: 1px solid var(--app-border); border-radius: 999px; background: var(--glass-bg); color: var(--app-text); cursor: pointer; font: 600 0.9rem/1 var(--font-ui); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); } .lp-account-btn:hover { border-color: rgba(var(--p-2), 0.5); transform: translateY(-1px); } .lp-account-av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; color: #fff; background: var(--grad-cta); flex-shrink: 0; } .lp-account-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-account-caret { font-size: 0.7rem; color: var(--app-text-dim); transition: transform 0.2s var(--ease); } .lp-account-btn[aria-expanded='true'] .lp-account-caret { transform: rotate(180deg); } .lp-account-menu { position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 210px; background: var(--app-panel); border: 1px solid var(--app-border); border-radius: 14px; padding: 0.4rem; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s; z-index: 70; } .lp-account-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } .lp-account-menu a, .lp-account-menu .lp-account-signout { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.6rem 0.75rem; border-radius: 9px; font: 600 0.88rem/1 var(--font-ui); color: var(--app-text); text-decoration: none; background: none; border: none; cursor: pointer; text-align: left; transition: background 0.15s; } .lp-account-menu a i, .lp-account-menu .lp-account-signout i { width: 16px; text-align: center; color: var(--gold); } .lp-account-menu a:hover, .lp-account-menu .lp-account-signout:hover { background: color-mix(in srgb, var(--app-text) 6%, transparent); } .lp-account-signout { color: #dc2626 !important; } .lp-account-signout i { color: #dc2626 !important; } /* ---- mobile hamburger + slide-down menu ---- */ .lp-burger { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--app-border); background: var(--glass-bg); color: var(--app-text); cursor: pointer; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; } .lp-mobile-menu { display: none; flex-direction: column; gap: 0.2rem; position: sticky; top: calc(clamp(0.7rem, 1.6vw, 1.25rem) + 64px); z-index: 55; margin: 0.5rem clamp(0.8rem, 3.2vw, 2rem) 0; border-radius: 16px; padding: 0 0.9rem; background: var(--app-panel); border: 1px solid var(--app-border); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.5); max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s var(--ease), opacity 0.25s var(--ease), padding 0.3s var(--ease); } .lp-mobile-menu.open { max-height: 80vh; opacity: 1; padding: 0.6rem 0.9rem 1rem; } .lp-mobile-menu a, .lp-mobile-menu button { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.6rem; border-radius: 10px; font: 600 0.95rem/1 var(--font-ui); color: var(--app-text); text-decoration: none; background: none; border: none; cursor: pointer; text-align: left; width: 100%; } .lp-mobile-menu a:hover, .lp-mobile-menu button:hover { background: color-mix(in srgb, var(--app-text) 6%, transparent); } .lp-mobile-strong { color: var(--gold) !important; font-weight: 800 !important; } .lp-mobile-divider { height: 1px; background: var(--app-border); margin: 0.4rem 0; } .lp-mobile-signout { color: #dc2626 !important; } @media (max-width: 900px) { .lp-nav-links { display: none; } .lp-burger { display: inline-flex; } .lp-mobile-menu { display: flex; } /* keep the header slim + the action row tight on tablets/phones */ .lp-nav { gap: 0.6rem; padding: 0.5rem 0.85rem; border-radius: 14px; } .lp-nav-actions { gap: 0.45rem; } .lp-nav-cta { display: none; } /* CTA moves into the mobile menu */ .lp-account-name { display: none; } /* avatar-only on small screens */ .lp-account-btn { padding: 0.3rem; border-radius: 50%; } .lp-account-caret { display: none; } /* brand must stay on ONE slim line — never wrap to a second row */ .lp-nav .brand, .lp-nav .brand-lockup { font-size: 1.02rem; gap: 0.45rem; white-space: nowrap; flex-shrink: 1; min-width: 0; } .lp-nav .brand-word { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-nav .brand-lockup .jfy-mark, .lp-nav .jfy-mark { width: 30px !important; height: 30px !important; } } @media (max-width: 480px) { /* keep the theme-catalog button visible in the mobile header (requested) but make it a touch smaller so the slim brand + actions still fit on one line */ .lp-theme-btn { display: inline-flex; width: 34px; height: 34px; border-radius: 10px; } .lp-nav { padding: 0.45rem 0.7rem; } .lp-nav .brand, .lp-nav .brand-word, .lp-nav .brand-lockup { font-size: 0.95rem; } .lp-nav .brand-lockup .jfy-mark, .lp-nav .jfy-mark { width: 28px !important; height: 28px !important; } } /* ---- HERO ---- */ /* The ambient top glow now lives at body level (body.lp-page::before), so the header backdrop and the hero share one identical colour with no seam. The hero keeps overflow:hidden (safe for sticky on mobile) and .lp-hero-glow is retired to avoid a second, mismatched gradient layer. */ /* Hero fits in ONE viewport (no scroll to see all hero content): the section fills the screen minus the floating header + event strip, and everything is vertically centred. Compact, consistent spacing keeps it from overflowing. */ .lp-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: calc(100svh - 150px); padding: clamp(0.5rem, 1.4vw, 1.1rem) clamp(1rem, 5vw, 3rem) clamp(0.8rem, 2vw, 1.6rem); } .lp-hero-glow { display: none; } /* Balanced two-column layout: copy slightly wider, both columns vertically centred, with a comfortable but consistent gutter. */ .lp-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; max-width: 1180px; margin: 0 auto; width: 100%; } /* Consistent vertical rhythm inside the copy column (one shared spacing scale). */ .lp-hero-copy { animation: appFade 0.6s var(--ease) both; display: flex; flex-direction: column; align-items: flex-start; } .lp-hero-copy > .lp-badge { margin-bottom: 0.8rem; } /* Title: compact + roomy line-height so it reads elegant, not blocky, and the whole hero stays within one screen. */ .lp-hero-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.018em; line-height: 1.08; font-size: clamp(1.9rem, 3.6vw, 2.9rem); color: var(--app-text); margin: 0 0 0.75rem; } .lp-hero-lede { color: var(--app-text-muted); font-size: clamp(0.94rem, 1.15vw, 1.04rem); line-height: 1.55; max-width: 32rem; margin: 0 0 1.1rem; } .lp-hero-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 0.95rem; } .lp-hero-primary { font-size: 1.02rem; padding: 0.95rem 1.7rem; } .lp-hero-secondary { font-size: 1.02rem; padding: 0.95rem 1.5rem; } /* typewriter CTA: keep a stable min width so the button doesn't jump as the text types/erases, plus a blinking caret. */ .lp-hero-primary .lp-type-text { display: inline-block; white-space: nowrap; } .lp-hero-primary { min-width: 15.5rem; justify-content: center; } .lp-type-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: currentColor; border-radius: 1px; animation: lpCaret 1s steps(1) infinite; } @keyframes lpCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .lp-hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; padding: 0; margin: 0 0 0.9rem; color: var(--app-text-dim); font-size: 0.82rem; } .lp-hero-trust li { display: flex; align-items: center; gap: 0.4rem; } .lp-hero-trust i { color: #34c08b; } .lp-hero-proof { display: flex; align-items: center; gap: 0.8rem; } .lp-avatars { display: flex; } .lp-avatars span { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--app-bg); margin-left: -10px; background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 60%, #000)); box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.4); } .lp-avatars span:first-child { margin-left: 0; } .lp-proof-copy { font-size: 0.85rem; color: var(--app-text-muted); } .lp-proof-copy strong { color: var(--app-text); } .lp-stars { color: #e4c589; font-size: 0.78rem; letter-spacing: 1px; margin-bottom: 0.1rem; } /* hero visual — phone mock, sitting inside a soft glow halo so it feels framed and intentional rather than floating/cut off. */ .lp-hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; animation: appFade 0.8s var(--ease) both; } /* subtle radial halo behind the phone for depth + framing */ .lp-hero-visual::before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--p-2), 0.16), transparent 62%); filter: blur(10px); z-index: 0; pointer-events: none; } .lp-phone { position: relative; z-index: 1; width: 232px; height: 404px; border-radius: 34px; padding: 13px; background: linear-gradient( 160deg, color-mix(in srgb, var(--app-text) 8%, var(--app-bg)), var(--app-bg) ); border: 1px solid var(--line); box-shadow: 0 50px 100px -45px var(--glow), 0 14px 40px -20px rgba(0, 0, 0, 0.55); transform: rotate(-4deg); transition: transform 0.5s var(--ease); } .lp-phone:hover { transform: rotate(0) translateY(-6px); } .lp-phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 80px; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--app-text) 20%, transparent); } .lp-phone-screen { position: relative; height: 100%; border-radius: 24px; background: radial-gradient(120% 75% at 50% 0%, rgba(var(--p-2), 0.16), transparent 58%), radial-gradient(90% 60% at 50% 105%, rgba(var(--p-3), 0.12), transparent 60%), var(--app-bg); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem 1.15rem; gap: 0.5rem; overflow: hidden; } /* tiny branded "app chrome" dots at the top of the screen — reads as a real app */ .lp-phone-bar { position: absolute; top: 1rem; left: 1rem; display: flex; gap: 0.3rem; } .lp-phone-bar span { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--app-text) 22%, transparent); } .lp-phone-bar span:first-child { background: rgb(var(--p-2)); } .lp-card-script { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.05rem; color: var(--gold); } .lp-card-names { font-family: var(--font-display); font-weight: 500; font-size: 1.85rem; line-height: 1.1; color: var(--app-text); } .lp-card-names span { display: block; font-size: 1rem; font-style: italic; color: var(--app-text-dim); margin: 0.15rem 0; } .lp-card-rule { width: 46px; height: 1px; background: var(--gold); opacity: 0.7; margin: 0.3rem 0; } .lp-card-date { font-size: 0.82rem; color: var(--app-text-muted); letter-spacing: 0.02em; } .lp-card-meta { font-size: 0.76rem; color: var(--app-text-dim); } .lp-card-meta i { color: var(--gold); margin-right: 0.25rem; } /* live RSVP button — pulses gently so it reads as interactive/alive */ .lp-card-rsvp { margin-top: 0.55rem; font-size: 0.78rem; font-weight: 700; color: #fff; padding: 0.5rem 1rem; border-radius: 999px; border: 0; cursor: pointer; background: var(--grad-cta); box-shadow: 0 8px 20px -10px rgba(245, 129, 31, 0.7); animation: lpRsvpPulse 2.6s var(--ease) infinite; } .lp-card-rsvp i { margin-right: 0.35rem; } @keyframes lpRsvpPulse { 0%, 100% { box-shadow: 0 8px 20px -10px rgba(245, 129, 31, 0.6); } 50% { box-shadow: 0 8px 28px -8px rgba(245, 129, 31, 0.95); } } /* on-brand "fast" micro-tag at the bottom of the card */ .lp-card-brand { margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-text-dim); } .lp-card-brand i { color: rgb(var(--p-2)); } .lp-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.9rem; border-radius: 14px; border: 1px solid var(--app-border); background: color-mix(in srgb, var(--app-bg) 86%, transparent); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); box-shadow: 0 22px 48px -22px rgba(0, 0, 0, 0.6); animation: floaty 4s var(--ease) infinite; } .lp-float i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--grad-cta); font-size: 0.82rem; } .lp-float b { display: block; font-size: 0.95rem; color: var(--app-text); line-height: 1.1; } .lp-float span { font-size: 0.7rem; color: var(--app-text-dim); } /* anchored cleanly to the phone's corners (deliberate layered composition) */ .lp-float-1 { top: 8%; left: -10%; } .lp-float-2 { bottom: 10%; right: -8%; animation-delay: 1.6s; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* ---- magic CTA icon: the wand sparkles "magically" (wiggle + twinkle) ---- */ .lp-magic { display: inline-block; transform-origin: 60% 60%; animation: lpWandWiggle 2.4s var(--ease) infinite; filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } @keyframes lpWandWiggle { 0%, 72%, 100% { transform: rotate(0) scale(1); } 78% { transform: rotate(-12deg) scale(1.12); } 84% { transform: rotate(10deg) scale(1.12); } 90% { transform: rotate(-5deg) scale(1.06); } 96% { transform: rotate(0) scale(1); } } /* twinkle glow that flashes on the sparkle stars */ .lp-hero-primary .lp-magic { animation: lpWandWiggle 2.4s var(--ease) infinite, lpTwinkle 2.4s var(--ease) infinite; } @keyframes lpTwinkle { 0%, 70%, 100% { filter: drop-shadow(0 0 0 rgba(255, 240, 200, 0)); } 80% { filter: drop-shadow(0 0 6px rgba(255, 240, 200, 0.95)); } 92% { filter: drop-shadow(0 0 3px rgba(255, 240, 200, 0.5)); } } @media (prefers-reduced-motion: reduce) { .lp-magic { animation: none !important; } } /* ---- creative hand-drawn arrow curving from the phone's RSVP button up to the live RSVP stat card (top-left) — reads as "RSVPs flowing in" ---- */ .lp-arrow { position: absolute; z-index: 3; left: -14%; top: 14%; width: 170px; height: 150px; color: rgb(var(--p-2)); pointer-events: none; overflow: visible; transform: scaleX(-1); } .lp-arrow-path { stroke-dasharray: 6 7; animation: lpArrowDraw 3.4s linear infinite; } @keyframes lpArrowDraw { to { stroke-dashoffset: -130; } } .lp-arrow-head { opacity: 0.95; } @media (max-width: 860px) { .lp-arrow { display: none; } } @media (max-width: 860px) { /* on phones/tablets the hero stacks; let it grow naturally (don't force a single viewport, otherwise the stacked phone would be cramped) */ .lp-hero { min-height: auto; padding-top: 1.4rem; padding-bottom: 2rem; } .lp-hero-inner { grid-template-columns: 1fr; text-align: center; } .lp-hero-copy { align-items: center; } .lp-hero-lede { margin-left: auto; margin-right: auto; } .lp-hero-cta, .lp-hero-trust, .lp-hero-proof { justify-content: center; } .lp-hero-visual { min-height: 380px; margin-top: 1rem; } .lp-float-1 { left: 2%; } .lp-float-2 { right: 2%; } } /* ---- STAT STRIP ---- */ .lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 1100px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 5vw, 3rem); } .lp-stat { text-align: center; padding: 1.1rem 0.6rem; border-radius: 16px; border: 1px solid var(--line); background: var(--glass-bg); } .lp-stat-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lp-stat-lbl { font-size: 0.8rem; color: var(--app-text-muted); margin-top: 0.2rem; } @media (max-width: 680px) { .lp-stats { grid-template-columns: 1fr 1fr; } } /* ---- HOW IT WORKS ---- */ .lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; max-width: 1100px; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 5vw, 3rem); } .lp-steps .step { padding: 1.6rem 1.4rem; border-radius: 18px; } .lp-steps .step span { font-family: var(--font-display); font-size: 1.6rem; font-weight: 300; color: var(--gold); opacity: 0.6; } .lp-steps .step h3 { font-family: var(--font-display); color: var(--app-text); margin: 0.5rem 0 0.4rem; font-size: 1.12rem; } .lp-steps .step p { color: var(--app-text-muted); font-size: 0.92rem; line-height: 1.55; } @media (max-width: 740px) { .lp-steps { grid-template-columns: 1fr; } } /* ---- shared section bits ---- */ .lp-h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; color: var(--app-text); font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.12; margin: 0.5rem 0 0.4rem; } .lp-sub { color: var(--app-text-muted); font-size: 1.02rem; line-height: 1.6; max-width: 38rem; } .lp-sub.center, .section-head.center { margin-left: auto; margin-right: auto; } .section-head.center { text-align: center; max-width: 42rem; } /* ---- INSIGHT / CHARTS ---- */ .lp-insight { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; max-width: 1180px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 5vw, 3rem); } .lp-insight-lede { color: var(--app-text-muted); font-size: 1.04rem; line-height: 1.7; margin: 0.6rem 0 1.3rem; } .lp-insight-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; } .lp-insight-list li { display: flex; align-items: center; gap: 0.7rem; color: var(--app-text-muted); font-size: 0.96rem; } .lp-insight-list strong { color: var(--app-text); font-family: var(--font-display); font-size: 1.1rem; } .lp-insight-list i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--grad-cta); font-size: 0.85rem; flex: none; } .lp-insight-charts { display: grid; gap: 1.1rem; } .lp-chart-card { padding: 1.2rem 1.3rem; border-radius: 18px; } .lp-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.7rem; } .lp-chart-head h4 { font-family: var(--font-display); font-weight: 500; color: var(--app-text); font-size: 1rem; margin: 0; display: flex; align-items: center; gap: 0.45rem; } .lp-chart-head h4 i { color: var(--gold); font-size: 0.9rem; } .lp-chart-tag { font-size: 0.72rem; color: var(--app-text-dim); background: var(--glass-bg); border: 1px solid var(--line); padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; } .lp-chart-canvas-wrap { position: relative; width: 100%; height: 240px; } .lp-chart-canvas-wrap.lp-chart-canvas-sm { height: 210px; } .lp-chart-canvas-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } .lp-chart-card-sm { max-width: none; } @media (max-width: 860px) { .lp-insight { grid-template-columns: 1fr; } } /* ---- FEATURES bento ---- */ .lp-features { max-width: 1180px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 5vw, 3rem); } .lp-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2rem; } .lp-feat { padding: 1.7rem 1.5rem; border-radius: 20px; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .lp-feat:hover { transform: translateY(-5px); border-color: rgba(var(--h, var(--p-2)), 0.5); box-shadow: 0 30px 60px -34px var(--glow); } .lp-feat-lg { grid-row: span 2; display: flex; flex-direction: column; } .lp-feat-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--grad-cta); font-size: 1.2rem; margin-bottom: 1rem; } .lp-feat h3 { font-family: var(--font-display); font-weight: 500; color: var(--app-text); font-size: 1.18rem; margin: 0 0 0.5rem; } .lp-feat p { color: var(--app-text-muted); font-size: 0.94rem; line-height: 1.62; margin: 0; } .lp-feat-mini { margin-top: auto; padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .lp-feat-mini span { font-size: 0.78rem; color: var(--app-text-muted); background: var(--glass-bg); border: 1px solid var(--line); padding: 0.3rem 0.65rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.35rem; } .lp-feat-mini i { color: var(--gold); } @media (max-width: 900px) { .lp-bento { grid-template-columns: 1fr 1fr; } .lp-feat-lg { grid-row: span 1; grid-column: span 2; } } /* ---- MOBILE: compact bento — show ONLY the icon + title in a small tidy grid. Descriptions and feature pills are hidden so the section stays scannable. ---- */ @media (max-width: 600px) { .lp-bento { grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 1.4rem; } .lp-feat, .lp-feat-lg { grid-row: auto; grid-column: auto; padding: 1rem 0.85rem; border-radius: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 0.55rem; min-height: 118px; } .lp-feat p, .lp-feat-mini { display: none; } .lp-feat-ico { width: 42px; height: 42px; font-size: 1.05rem; margin: 0; border-radius: 13px; } .lp-feat h3 { font-size: 0.92rem; margin: 0; line-height: 1.25; } } /* ---- LANDING CATALOG ---- */ /* Full-bleed gradient backdrop (theme hues blended with a warm orange ember) so the collection sits on a rich, combined gradient like the reference. */ .lp-catalog { position: relative; margin: 0 auto; padding: clamp(2.6rem, 6vw, 4.5rem) clamp(1rem, 5vw, 3rem); } .lp-catalog::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 55% at 14% 12%, rgba(var(--p-2), 0.16), transparent 60%), radial-gradient(55% 60% at 90% 18%, rgba(245, 129, 31, 0.14), transparent 60%), radial-gradient(70% 70% at 50% 108%, rgba(var(--p-1), 0.16), transparent 62%), linear-gradient( 180deg, transparent, color-mix(in srgb, rgb(var(--p-3)) 6%, transparent) 50%, transparent ); } .lp-catalog > * { position: relative; z-index: 1; } .lp-catalog .section-head, .lp-catalog .lpc-grid, .lp-catalog .center { max-width: 1200px; margin-left: auto; margin-right: auto; } .lp-cat-filterbar { position: relative; z-index: 1; max-width: 1200px; margin: 1.6rem auto 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; } .lpc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; } .lpc-card { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--glass-bg); display: flex; flex-direction: column; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } .lpc-card:hover { transform: translateY(-5px); border-color: rgba(var(--p-2), 0.45); box-shadow: 0 30px 60px -34px var(--glow); } .lpc-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: color-mix(in srgb, var(--app-text) 5%, var(--app-bg)); } .lpc-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); } .lpc-card:hover .lpc-img { transform: scale(1.06); } .lpc-noimg { display: grid; place-items: center; color: var(--gold); font-size: 1.8rem; opacity: 0.5; } .lpc-tier { position: absolute; top: 0.6rem; left: 0.6rem; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 600; color: var(--tt); padding: 0.3rem 0.6rem; border-radius: 999px; background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.5); } .lpc-discount { position: absolute; top: 0.6rem; right: 0.6rem; font-size: 0.7rem; font-weight: 700; color: #fff; padding: 0.3rem 0.55rem; border-radius: 999px; background: linear-gradient(135deg, #f97316, #e11d48); box-shadow: 0 4px 12px -6px rgba(225, 29, 72, 0.7); } .lpc-discount i { margin-right: 0.2rem; } .lpc-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 0.5rem; padding: 0.8rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%); opacity: 0; transition: opacity 0.3s; } .lpc-card:hover .lpc-overlay { opacity: 1; } .lpc-ov { font-size: 0.78rem; font-weight: 600; padding: 0.45rem 0.8rem; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; } .lpc-ov-ghost { background: rgba(255, 255, 255, 0.16); color: #fff; backdrop-filter: blur(6px); } .lpc-ov-solid { background: #fff; color: #1a1a1a; } .lpc-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; } .lpc-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; } .lpc-tag { font-size: 0.68rem; color: var(--app-text-muted); background: var(--glass-bg); border: 1px solid var(--line); padding: 0.2rem 0.5rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.3rem; } .lpc-tag i { color: var(--gold); font-size: 0.62rem; } .lpc-name { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; margin: 0; } .lpc-name a { color: var(--app-text); text-decoration: none; } .lpc-name a:hover { color: var(--gold); } .lpc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding-top: 0.5rem; } .lpc-price-wrap { display: flex; align-items: baseline; gap: 0.4rem; } .lpc-price { font-family: var(--font-display); font-weight: 600; color: var(--app-text); font-size: 1.1rem; } .lpc-price-old { font-size: 0.82rem; color: var(--app-text-dim); text-decoration: line-through; } .lpc-free { font-family: var(--font-display); font-weight: 600; color: #34c08b; } .lpc-cta { font-size: 0.8rem; font-weight: 600; color: var(--gold); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; transition: gap 0.2s; } .lpc-cta:hover { gap: 0.55rem; } .lpc-cta i { font-size: 0.68rem; } .lp-viewall { margin-top: 2rem; display: inline-flex; align-items: center; gap: 0.5rem; } /* ============================================================ MOBILE CATALOG — modern single-column cards. Touch devices have no hover: actions become permanent buttons, image gets a taller cinematic ratio, footer stacks cleanly. ============================================================ */ @media (max-width: 700px) { .lpc-grid { grid-template-columns: 1fr; gap: 1.15rem; padding: 0 0.15rem; } .lpc-card { border-radius: 20px; } /* Wider cinematic thumbnail — theme art is finally legible */ .lpc-media { aspect-ratio: 16 / 10; } /* Hover overlay is useless on touch — hide it, use real buttons below */ .lpc-overlay { display: none; } /* Soft bottom gradient so badges & art read clearly */ .lpc-media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent); pointer-events: none; } .lpc-tier { top: 0.75rem; left: 0.75rem; font-size: 0.72rem; padding: 0.34rem 0.7rem; } .lpc-discount { top: 0.75rem; right: 0.75rem; font-size: 0.72rem; padding: 0.34rem 0.65rem; } .lpc-body { padding: 1.05rem 1.1rem 1.15rem; gap: 0.5rem; } /* Duplicate tier chip (already on the image) — save vertical space */ .lpc-tags { display: none; } .lpc-name { font-size: 1.18rem; line-height: 1.3; } /* Footer: price row + full-width action buttons */ .lpc-foot { flex-direction: column; align-items: stretch; gap: 0.8rem; padding-top: 0.65rem; } .lpc-price-wrap { justify-content: space-between; width: 100%; } .lpc-price { font-size: 1.35rem; } .lpc-price-old { font-size: 0.9rem; } /* CTA becomes a real, thumb-sized primary button. Uses the brand CTA gradient so it matches the catalog page (.tc-cta) and the "Start free" pill — not a hardcoded gold. */ .lpc-cta { justify-content: center; width: 100%; padding: 0.85rem 1rem; border-radius: 14px; font-size: 0.92rem; font-weight: 700; color: #fff; background: var(--grad-cta); box-shadow: 0 10px 26px -12px var(--glow); gap: 0.45rem; } .lpc-cta:hover { gap: 0.45rem; background: var(--grad-cta-hover); } .lpc-cta i { font-size: 0.78rem; } /* Secondary: live preview link, injected via ::before on the foot? No — provided in markup as .lpc-preview-btn (mobile-only). */ .lpc-preview-btn { display: inline-flex !important; justify-content: center; align-items: center; gap: 0.45rem; width: 100%; padding: 0.8rem 1rem; border-radius: 14px; font-size: 0.88rem; font-weight: 600; color: var(--app-text); background: var(--glass-bg); border: 1px solid var(--line); text-decoration: none; } /* Filter chips: horizontally scrollable, never wrap awkwardly */ .lp-cat-filterbar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 0.2rem 1rem 0.6rem; margin: 1.2rem auto 1.4rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .lp-cat-filterbar::-webkit-scrollbar { display: none; } .lp-cat-filterbar .cat-chip { flex: none; } } /* Desktop: hide the mobile-only preview button */ .lpc-preview-btn { display: none; } /* ---- PRICING wrapper (reuse existing price-card styles) ---- */ .lp-pricing { max-width: 1200px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 5vw, 3rem); } .lp-pricing .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; margin: 2rem 0 1.2rem; } .lp-pricing .price-card ul { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: 0.5rem; text-align: left; } .lp-pricing .price-card ul li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.88rem; line-height: 1.45; } .lp-pricing .price-card ul li i { color: var(--gold); margin-top: 0.18rem; font-size: 0.75rem; flex: none; } /* ---- FAQ ---- */ .lp-faq { max-width: 760px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 5vw, 3rem); } .lp-faq-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.7rem; } .faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--glass-bg); overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s; } .faq-item.open { border-color: rgba(var(--p-2), 0.45); box-shadow: 0 20px 50px -34px var(--glow); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-ui); font-weight: 600; font-size: 1rem; color: var(--app-text); } .faq-ico { color: var(--gold); transition: transform 0.3s var(--ease); flex: none; } .faq-item.open .faq-ico { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); } .faq-item.open .faq-a { max-height: 320px; } .faq-a p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--app-text-muted); font-size: 0.94rem; line-height: 1.65; } .faq-a a { color: var(--gold); } .lp-faq-foot { text-align: center; margin-top: 1.8rem; color: var(--app-text-muted); font-size: 0.92rem; } .lp-faq-foot a { color: var(--gold); font-weight: 600; } /* ---- FINAL CTA ---- */ .lp-final { max-width: 1100px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 5vw, 3rem) clamp(3rem, 6vw, 5rem); } .lp-final-inner { text-align: center; padding: clamp(2.2rem, 5vw, 3.5rem) clamp(1.2rem, 4vw, 3rem); border-radius: 26px; position: relative; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(70% 120% at 50% 0%, rgba(var(--p-2), 0.14), transparent 60%), var(--glass-bg); } .lp-final-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem; font-size: 1.05rem; padding: 1rem 1.9rem; } /* =================================================================== LP — PAPER VS DIGITAL COMPARISON (#compare) =================================================================== */ .lp-compare { max-width: 1180px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 5vw, 3rem); } .lp-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2rem; align-items: stretch; } /* -- paper receipt card -- */ .lp-receipt { padding: 1.7rem 1.6rem; border-radius: 20px; display: flex; flex-direction: column; } .lp-receipt-head { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 1.08rem; color: var(--app-text); } .lp-receipt-head i { color: var(--app-text-dim); } .lp-receipt-tag { margin-left: auto; font-family: var(--font-body, inherit); font-size: 0.72rem; color: var(--app-text-dim); border: 1px solid var(--line); background: var(--glass-bg); padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; } .lp-receipt-lines { list-style: none; margin: 1.1rem 0 0; padding: 0; } .lp-receipt-lines li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 0; font-size: 0.93rem; color: var(--app-text-muted); border-bottom: 1px dashed var(--line); } .lp-receipt-lines li span { flex: 1; } .lp-receipt-lines li em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--app-text); } .lp-receipt-total { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.8rem 0 0.2rem; font-size: 0.95rem; color: var(--app-text); } .lp-receipt-total span { flex: 1; font-weight: 600; } .lp-receipt-total em { font-style: normal; font-family: var(--font-display); font-size: 1.5rem; } .lp-strike { position: relative; color: var(--app-text-dim); } .lp-strike::after { content: ''; position: absolute; left: -4%; right: -4%; top: 52%; height: 2px; background: #ef4444; transform: rotate(-6deg); border-radius: 2px; } .lp-receipt-pains { list-style: none; margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.5rem; } .lp-receipt-pains li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; color: var(--app-text-muted); } .lp-receipt-pains i { color: #ef4444; font-size: 0.8rem; width: 18px; text-align: center; flex: none; } /* -- digital card -- */ .lp-digital { position: relative; padding: 1.7rem 1.6rem; border-radius: 20px; display: flex; flex-direction: column; border-color: rgba(var(--h, var(--p-2)), 0.45); box-shadow: 0 30px 60px -38px var(--glow); } .lp-save-pill { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; font-size: 0.74rem; font-weight: 700; color: #fff; background: var(--grad-cta); padding: 0.35rem 0.85rem; border-radius: 999px; box-shadow: 0 10px 24px -12px var(--glow); } .lp-digital-head { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 1.08rem; color: var(--app-text); margin-top: 0.4rem; } .lp-digital-head i { color: var(--gold); } .lp-digital-price { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 2.7rem); margin: 0.8rem 0 0.4rem; background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lp-digital-from { font-size: 0.95rem; -webkit-text-fill-color: var(--app-text-dim); font-family: var(--font-body, inherit); font-weight: 400; } .lp-digital-once { display: block; font-size: 0.8rem; font-family: var(--font-body, inherit); font-weight: 400; -webkit-text-fill-color: var(--app-text-muted); margin-top: 0.15rem; } .lp-digital-perks { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .lp-digital-perks li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; color: var(--app-text-muted); } .lp-digital-perks i { color: #22c55e; font-size: 0.85rem; width: 18px; text-align: center; flex: none; } .lp-digital-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: auto; padding: 0.85rem 1.4rem; } .lp-digital-perks + .lp-digital-cta { margin-top: 1.4rem; } /* -- ✗/✓ feature table -- */ .lp-vs { margin-top: 1.2rem; border-radius: 20px; overflow: hidden; padding: 0.4rem 0; } .lp-vs-row { display: grid; grid-template-columns: 1fr 110px 130px; align-items: center; padding: 0.72rem 1.3rem; } .lp-vs-row + .lp-vs-row { border-top: 1px solid var(--line); } .lp-vs-head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-text-dim); } .lp-vs-feature { display: flex; align-items: center; gap: 0.65rem; font-size: 0.93rem; color: var(--app-text-muted); } .lp-vs-feature i { color: var(--gold); width: 20px; text-align: center; flex: none; } .lp-vs-col { text-align: center; } .lp-vs-row:not(.lp-vs-head) .lp-vs-col .fa-xmark { color: var(--app-text-dim); opacity: 0.55; } .lp-vs-col-jfy { position: relative; } .lp-vs-row:not(.lp-vs-head) .lp-vs-col-jfy { background: linear-gradient(180deg, rgba(var(--p-2), 0.1), rgba(var(--p-2), 0.04)); } .lp-vs-row:not(.lp-vs-head) .lp-vs-col-jfy .fa-check { color: #22c55e; } .lp-vs-head .lp-vs-col-jfy { background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @media (max-width: 860px) { .lp-compare-grid { grid-template-columns: 1fr; } .lp-vs-row { grid-template-columns: 1fr 56px 66px; padding: 0.65rem 0.9rem; } .lp-vs-head .lp-vs-col { font-size: 0.66rem; } .lp-vs-feature { font-size: 0.85rem; } } /* =================================================================== LP — ADMIN PANEL SHOWCASE (.lp-admin) =================================================================== */ .lp-admin { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; max-width: 1180px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 5vw, 3rem); } .lp-dash { border-radius: 20px; overflow: hidden; padding: 0; box-shadow: 0 40px 80px -48px var(--glow, rgba(0, 0, 0, 0.35)); } .lp-dash-bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--line); } .lp-dash-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--app-text-dim); opacity: 0.35; } .lp-dash-bar span:nth-child(1) { background: #ef4444; opacity: 0.75; } .lp-dash-bar span:nth-child(2) { background: #f59e0b; opacity: 0.75; } .lp-dash-bar span:nth-child(3) { background: #22c55e; opacity: 0.75; } .lp-dash-bar em { font-style: normal; margin-left: 0.5rem; font-size: 0.8rem; color: var(--app-text-dim); font-family: var(--font-display); } .lp-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; padding: 1rem 1.1rem 0.4rem; } .lp-dash-stat { text-align: center; padding: 0.75rem 0.4rem; border-radius: 14px; border: 1px solid rgba(var(--h, var(--p-2)), 0.3); background: linear-gradient( 180deg, rgba(var(--h, var(--p-2)), 0.12), rgba(var(--h, var(--p-2)), 0.04) ); } .lp-dash-stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--app-text); } .lp-dash-stat small { font-size: 0.72rem; color: var(--app-text-muted); } .lp-dash-list { padding: 0.6rem 1.1rem 0.4rem; } .lp-dash-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0; } .lp-dash-row + .lp-dash-row { border-top: 1px solid var(--line); } .lp-dash-av { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--grad-cta); } .lp-dash-name { flex: 1; font-size: 0.9rem; color: var(--app-text); display: flex; flex-direction: column; line-height: 1.25; } .lp-dash-name small { font-size: 0.74rem; color: var(--app-text-dim); } .lp-dash-chip { font-size: 0.7rem; font-weight: 700; padding: 0.28rem 0.6rem; border-radius: 999px; white-space: nowrap; } .lp-dash-chip.is-yes { color: #16a34a; background: rgba(34, 197, 94, 0.14); } .lp-dash-chip.is-wait { color: #d97706; background: rgba(245, 158, 11, 0.14); } .lp-dash-chip.is-no { color: #dc2626; background: rgba(239, 68, 68, 0.12); } html.dark .lp-dash-chip.is-yes { color: #4ade80; } html.dark .lp-dash-chip.is-wait { color: #fbbf24; } html.dark .lp-dash-chip.is-no { color: #f87171; } .lp-dash-foot { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.1rem; border-top: 1px solid var(--line); } .lp-dash-export { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--app-text-muted); border: 1px solid var(--line); background: var(--glass-bg); padding: 0.35rem 0.75rem; border-radius: 10px; } .lp-dash-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 700; color: #16a34a; } html.dark .lp-dash-live { color: #4ade80; } .lp-dash-live i { font-size: 0.5rem; animation: lp-live-pulse 1.6s ease-in-out infinite; } @keyframes lp-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @media (max-width: 860px) { .lp-admin { grid-template-columns: 1fr; } } /* =================================================================== LP — REVIEWS (#reviews) =================================================================== */ .lp-reviews { max-width: 1180px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 5vw, 3rem); } .lp-reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-top: 2rem; } .lp-rating { grid-row: span 1; padding: 1.7rem 1.5rem; border-radius: 20px; text-align: center; } .lp-rating-num { font-family: var(--font-display); font-weight: 600; font-size: 3rem; line-height: 1; background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lp-rating-stars { color: #f59e0b; font-size: 0.95rem; letter-spacing: 0.15em; margin: 0.5rem 0 0.2rem; } .lp-rating-sub { font-size: 0.82rem; color: var(--app-text-muted); margin: 0 0 1.1rem; } .lp-rating-bars { display: flex; flex-direction: column; gap: 0.45rem; text-align: left; } .lp-rating-bar { display: grid; grid-template-columns: 30px 1fr 38px; align-items: center; gap: 0.55rem; font-size: 0.74rem; color: var(--app-text-dim); } .lp-rating-bar em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; } .lp-bar { height: 7px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--line); overflow: hidden; } .lp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad-cta); min-width: 3px; } .lp-review { padding: 1.5rem 1.5rem 1.3rem; border-radius: 20px; display: flex; flex-direction: column; } .lp-review-stars { color: #f59e0b; font-size: 0.78rem; letter-spacing: 0.12em; margin-bottom: 0.7rem; } .lp-review p { color: var(--app-text-muted); font-size: 0.95rem; line-height: 1.65; margin: 0 0 1.1rem; } .lp-review p em { font-style: italic; color: var(--app-text); } .lp-review footer { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; } .lp-review-av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 0.85rem; font-weight: 700; color: #fff; background: var(--grad-cta); } .lp-review footer b { display: block; font-size: 0.9rem; color: var(--app-text); font-family: var(--font-display); font-weight: 600; } .lp-review footer small { font-size: 0.75rem; color: var(--app-text-dim); } .lp-review-verified { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; color: #16a34a; white-space: nowrap; } html.dark .lp-review-verified { color: #4ade80; } @media (max-width: 780px) { .lp-reviews-grid { grid-template-columns: 1fr; } } /* =================================================================== LP NAV CART ICON (Request #6 — keranjang / e-commerce entry) =================================================================== */ .lp-cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--app-border); background: var(--glass-bg); color: var(--app-text); text-decoration: none; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); } .lp-cart-btn:hover { transform: translateY(-2px); border-color: rgba(var(--p-2), 0.5); color: var(--gold); } .lp-cart-btn i { font-size: 1rem; } /* [hidden] must win over display:inline-flex below — badge only shows when the visitor actually picked a plan (JS removes the attribute). */ .lp-cart-dot[hidden] { display: none !important; } .lp-cart-dot { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 0.65rem; font-weight: 800; color: #fff; background: var(--grad-cta); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); border: 2px solid var(--app-bg); } /* =================================================================== CHECKOUT — professional e-commerce page (Request #6) =================================================================== */ .co-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem clamp(1rem, 4vw, 2.5rem); background: color-mix(in srgb, var(--app-bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--app-border); } .co-nav .brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--app-text); font-weight: 800; } .co-nav-back { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--app-text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: color 0.2s var(--ease); } .co-nav-back:hover { color: var(--gold); } .co-steps { display: flex; align-items: center; gap: 0.55rem; flex: 1; justify-content: center; } .co-step { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 700; color: var(--app-text-dim); padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .co-step i { font-size: 0.78rem; } .co-step.active { color: var(--app-text); background: rgba(var(--p-2), 0.1); border-color: rgba(var(--p-2), 0.35); } .co-step.done { color: var(--gold); } .co-step-line { width: 26px; height: 2px; border-radius: 2px; background: var(--app-border); } @media (max-width: 760px) { .co-steps { display: none; } } .co-wrap { max-width: 1140px; margin: 0 auto; padding: clamp(1.4rem, 4vw, 2.8rem) clamp(1rem, 4vw, 2.5rem) 4rem; display: grid; grid-template-columns: 1fr 380px; gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start; } @media (max-width: 920px) { .co-wrap { grid-template-columns: 1fr; } } .co-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.25rem; color: var(--app-text); } .co-sub { color: var(--app-text-muted); margin: 0 0 1.4rem; max-width: 46ch; font-size: 0.97rem; } .co-main { display: flex; flex-direction: column; gap: 1rem; } .co-card { border: 1px solid var(--app-border); border-radius: 18px; padding: 1.25rem 1.35rem; background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .co-card-head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; } .co-card-head h2 { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--app-text); } .co-step-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.85rem; font-weight: 800; color: #fff; background: var(--grad-cta); flex: none; } /* account */ .co-account { display: flex; align-items: center; gap: 0.85rem; } .co-avatar { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: #fff; background: var(--grad-cta); flex: none; } .co-account-name { font-weight: 700; color: var(--app-text); } .co-account-email { font-size: 0.85rem; color: var(--app-text-muted); } .co-account-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; color: #16a34a; background: rgba(22, 163, 74, 0.12); padding: 0.3rem 0.65rem; border-radius: 999px; } .co-account-badge i { font-size: 0.75rem; } .co-signin-note { color: var(--app-text-muted); font-size: 0.92rem; margin: 0 0 0.9rem; } .co-signin-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; } .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 1.1rem; border-radius: 11px; font-weight: 700; font-size: 0.9rem; text-decoration: none; cursor: pointer; border: 1px solid var(--app-border); background: transparent; color: var(--app-text); transition: transform 0.18s var(--ease), border-color 0.18s var(--ease); } .ds-btn:hover { transform: translateY(-1px); border-color: rgba(var(--p-2), 0.5); } .ds-btn.primary { border: none; color: #fff; background: var(--grad-cta); } /* tier switcher — pick Essential / Premium / Atelier on the checkout page */ .co-tier-switch { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.6rem; margin: 0 0 1.1rem; } .co-tier-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.22rem; padding: 0.85rem 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 14px; background: var(--glass-bg); text-decoration: none; color: var(--app-text); transition: transform 0.16s var(--ease), border-color 0.16s var(--ease), box-shadow 0.16s var(--ease); } .co-tier-opt:hover { transform: translateY(-2px); border-color: rgba(var(--p-2), 0.45); } .co-tier-opt i { font-size: 1rem; background: linear-gradient(135deg, var(--t1), var(--t2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .co-tier-opt .co-tier-name { font-weight: 700; font-size: 0.86rem; letter-spacing: 0.01em; } .co-tier-opt .co-tier-price { font-size: 0.8rem; color: var(--app-text-muted); } .co-tier-opt.active { border-color: transparent; box-shadow: 0 0 0 2px rgba(var(--p-2), 0.75), var(--glow); background: linear-gradient(180deg, rgba(var(--p-1), 0.1), rgba(var(--p-2), 0.06)), var(--glass-bg); } .co-tier-opt.active .co-tier-price { color: var(--app-text); font-weight: 600; } .co-tier-badge { position: absolute; top: -9px; right: 8px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.16rem 0.5rem; border-radius: 999px; color: #fff; background: var(--grad-cta); white-space: nowrap; } @media (max-width: 560px) { .co-tier-switch { grid-template-columns: repeat(3, 1fr); } .co-tier-opt .co-tier-name { font-size: 0.74rem; } .co-tier-opt .co-tier-price { font-size: 0.72rem; } } /* product */ .co-product { display: flex; gap: 1rem; align-items: flex-start; } .co-product-ico { flex: none; width: 54px; height: 54px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--tt, #fff); background: linear-gradient(135deg, var(--t1, #8b5cf6), var(--t2, #ec4899)); } .co-product-info { flex: 1; min-width: 0; } .co-product-top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .co-product-top h3 { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--app-text); } .co-tag { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--grad-cta); padding: 0.2rem 0.5rem; border-radius: 6px; } .co-saver { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 800; color: var(--gold); background: rgba(var(--p-2), 0.12); padding: 0.25rem 0.6rem; border-radius: 999px; } .co-product-tagline { color: var(--app-text-muted); font-size: 0.9rem; margin: 0.4rem 0 0.7rem; } .co-feats { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.9rem; } @media (max-width: 560px) { .co-feats { grid-template-columns: 1fr; } } .co-feats li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.88rem; color: var(--app-text); } .co-feats li i { color: var(--gold); font-size: 0.78rem; margin-top: 0.25rem; flex: none; } .co-meta-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .co-meta-pills span { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--app-text-muted); background: color-mix(in srgb, var(--app-text) 5%, transparent); border: 1px solid var(--app-border); padding: 0.35rem 0.7rem; border-radius: 999px; } .co-meta-pills span i { color: var(--gold); font-size: 0.75rem; } /* payment method */ .co-pay-methods { display: flex; flex-direction: column; gap: 0.65rem; } .co-pay { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border: 1.5px solid var(--app-border); border-radius: 13px; cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); } .co-pay input { position: absolute; opacity: 0; pointer-events: none; } .co-pay-body { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--app-text); } .co-pay-body small { font-weight: 500; color: var(--app-text-dim); font-size: 0.78rem; } .co-pay-body > i { font-size: 1.05rem; color: var(--gold); } .co-pay-check { margin-left: auto; color: var(--app-text-dim); font-size: 1.1rem; opacity: 0.25; transition: opacity 0.2s, color 0.2s; } .co-pay.active { border-color: rgba(var(--p-2), 0.55); background: rgba(var(--p-2), 0.07); } .co-pay.active .co-pay-check { opacity: 1; color: var(--gold); } .co-pay-note { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--app-text-dim); margin: 0.9rem 0 0; } .co-pay-note i { color: #16a34a; } /* summary (sticky) */ .co-summary { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 0.7rem; } @media (max-width: 920px) { .co-summary { position: static; } } .co-summary-card { border: 1px solid var(--app-border); border-radius: 18px; padding: 1.3rem 1.35rem; background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .co-summary-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem; color: var(--app-text); } .co-summary-title i { color: var(--gold); } .co-line { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.92rem; color: var(--app-text); padding: 0.32rem 0; } .co-line-save span { color: #16a34a; font-weight: 700; } .co-coupon { display: flex; gap: 0.5rem; margin: 0.8rem 0 0.3rem; } .co-coupon input { flex: 1; min-width: 0; padding: 0.6rem 0.8rem; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-bg); color: var(--app-text); font-size: 0.88rem; outline: none; } .co-coupon input:focus { border-color: rgba(var(--p-2), 0.5); } .co-coupon button { padding: 0.6rem 1rem; border: 1px solid var(--app-border); border-radius: 10px; background: transparent; color: var(--app-text); font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .co-coupon button:hover { border-color: rgba(var(--p-2), 0.5); color: var(--gold); } .co-coupon-msg { font-size: 0.8rem; min-height: 1em; margin-bottom: 0.2rem; } .co-coupon-msg.ok { color: #16a34a; } .co-coupon-msg.err { color: #dc2626; } .co-rule { height: 1px; background: var(--app-border); margin: 0.6rem 0; } .co-line-total { font-size: 1.05rem; font-weight: 800; color: var(--app-text); padding-top: 0.2rem; } .co-line-total small { font-weight: 500; color: var(--app-text-dim); font-size: 0.75rem; } .co-total { font-family: var(--font-display); } .co-pay-btn { width: 100%; margin-top: 1rem; padding: 0.95rem 1rem; border: none; border-radius: 13px; cursor: pointer; font-weight: 800; font-size: 1rem; color: #fff; background: var(--grad-cta); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: 0 8px 22px rgba(var(--p-2), 0.28); transition: transform 0.18s var(--ease), box-shadow 0.2s var(--ease); } .co-pay-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--p-2), 0.36); } .co-pay-btn:disabled { opacity: 0.7; cursor: wait; } /* Payments-unavailable locked state — honest UI, no fake success */ .co-pay-btn.co-pay-btn-disabled, .co-pay-btn.co-pay-btn-disabled:disabled { background: linear-gradient(135deg, #64748b, #475569); box-shadow: none; cursor: not-allowed; opacity: 0.85; } .co-unavailable-note { margin-top: 0.7rem; padding: 0.65rem 0.85rem; border: 1px dashed rgba(148, 163, 184, 0.45); border-radius: 10px; font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft, #64748b); } .co-unavailable-note i { margin-right: 0.35rem; } .co-trust { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .co-trust li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.82rem; color: var(--app-text-muted); } .co-trust li i { color: #16a34a; width: 16px; text-align: center; } .co-cards-row { display: flex; gap: 0.6rem; margin-top: 1rem; font-size: 1.6rem; color: var(--app-text-dim); opacity: 0.65; justify-content: center; } .co-fineprint { font-size: 0.76rem; color: var(--app-text-dim); text-align: center; line-height: 1.5; margin: 0; padding: 0 0.3rem; } .co-fineprint a { color: var(--gold); text-decoration: none; } .co-fineprint a:hover { text-decoration: underline; } /* empty cart */ .co-empty { max-width: 520px; margin: 0 auto; text-align: center; padding: clamp(3rem, 8vw, 6rem) 1.5rem; } .co-empty-ico { width: 88px; height: 88px; margin: 0 auto 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--gold); background: rgba(var(--p-2), 0.1); border: 1px solid rgba(var(--p-2), 0.25); } .co-empty h1 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; margin: 0 0 0.6rem; color: var(--app-text); } .co-empty p { color: var(--app-text-muted); margin: 0 0 1.6rem; } .co-empty .cta-grad { display: inline-flex; align-items: center; gap: 0.5rem; } /* toast */ .co-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--app-text); color: var(--app-bg); padding: 0.8rem 1.3rem; border-radius: 12px; font-weight: 700; font-size: 0.9rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; z-index: 60; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .co-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ===================================================================== */ /* Canvas Builder — Figma Power Pack (group · tidy · eyedropper · */ /* measure · saved styles · constraints) */ /* ===================================================================== */ /* Eyedropper fallback popover */ .cb-eye-pop { position: fixed; z-index: 100002; top: 60px; right: 60px; min-width: 220px; background: #1c2230; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 12px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5); } .cb-eye-title { color: #cfd6e4; font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; } .cb-eye-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .cb-eye-sw { width: 100%; aspect-ratio: 1; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); cursor: pointer; transition: transform 0.12s; } .cb-eye-sw:hover { transform: scale(1.15); } .cb-eye-manual { display: flex; align-items: center; gap: 8px; color: #cfd6e4; font-size: 0.78rem; margin-top: 10px; } .cb-eye-manual input { width: 42px; height: 28px; border: none; background: none; cursor: pointer; } /* Measurement overlay */ .cb-measure-ov { position: absolute; inset: 0; pointer-events: none; z-index: 9000; } .cb-meas { position: absolute; background: #ff2d7e; } .cb-meas-h { height: 1px; transform: translateY(-0.5px); } .cb-meas-v { width: 1px; transform: translateX(-0.5px); } .cb-meas-tag { position: absolute; transform: translate(-50%, -50%); background: #ff2d7e; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; white-space: nowrap; } /* Saved styles modal */ .cb-styles-hint { color: var(--app-text-muted, #8b93a7); font-size: 0.82rem; margin: 0 0 14px; line-height: 1.5; } .cb-styles-sec { margin-bottom: 18px; } .cb-styles-secrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .cb-styles-secrow strong { font-size: 0.85rem; color: var(--app-text, #e7ebf3); display: flex; align-items: center; gap: 7px; } .cb-style-swatches { display: flex; flex-wrap: wrap; gap: 10px; } .cb-style-sw { display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; } .cb-style-chip { width: 46px; height: 46px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.15); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); transition: transform 0.12s; } .cb-style-chip:hover { transform: scale(1.08); } .cb-style-sw span { font-size: 0.62rem; color: var(--app-text-muted, #8b93a7); font-family: monospace; } .cb-style-del { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: none; background: #e23; color: #fff; font-size: 9px; cursor: pointer; display: none; line-height: 1; } .cb-style-sw:hover .cb-style-del, .cb-style-txt:hover .cb-style-del { display: flex; align-items: center; justify-content: center; } .cb-style-texts { display: flex; flex-direction: column; gap: 8px; } .cb-style-txt { position: relative; } .cb-style-txt-apply { width: 100%; text-align: left; padding: 10px 12px; border-radius: 9px; border: 1px solid rgba(127, 127, 127, 0.2); background: var(--app-surface, #161b27); color: var(--app-text, #e7ebf3); cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: border-color 0.15s, background 0.15s; } .cb-style-txt-apply:hover { border-color: var(--cb-gold, #d4af37); } .cb-style-txt-apply small { font-size: 0.66rem; color: var(--app-text-muted, #8b93a7); font-weight: 400; } .cb-style-empty { font-size: 0.78rem; color: var(--app-text-muted, #8b93a7); padding: 6px 2px; } /* Section-height control in the layers footer */ .cb-sech-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.74rem; color: var(--app-text-muted, #8b93a7); } .cb-sech-row input { width: 64px; padding: 3px 6px; border-radius: 6px; border: 1px solid rgba(127, 127, 127, 0.3); background: var(--app-bg, #0d1017); color: var(--app-text, #e7ebf3); font-size: 0.74rem; } /* Active-state ring for the measure toggle (reuses .active convention) */ .cb-iconbtn#cb-measure.active { background: rgba(255, 45, 126, 0.18); border-color: #ff2d7e; color: #ff2d7e; } /* ===================================================================== DESIGN STUDIO — UI/UX Pro Max (style presets, palettes, font pairings) ===================================================================== */ #cb-design-pane { padding: 12px; overflow-y: auto; } /* Header card */ .cb-dz { margin-bottom: 14px; } .cb-dz-head { display: flex; gap: 10px; align-items: flex-start; background: linear-gradient(135deg, rgba(123, 108, 246, 0.16), rgba(32, 178, 170, 0.12)); border: 1px solid rgba(123, 108, 246, 0.32); border-radius: 12px; padding: 11px 12px; } .cb-dz-head > i { font-size: 1.05rem; color: #a78bfa; margin-top: 2px; } .cb-dz-head strong { display: block; font-size: 0.84rem; color: var(--app-text, #e7ebf3); } .cb-dz-head span { display: block; font-size: 0.7rem; opacity: 0.72; line-height: 1.4; margin-top: 2px; } .cb-dz-tip { margin-top: 8px; font-size: 0.68rem; opacity: 0.7; display: flex; gap: 6px; align-items: center; } .cb-dz-tip i { color: #60a5fa; } /* Section blocks */ .cb-dz-sec { margin-bottom: 16px; } .cb-dz-secrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .cb-dz-secrow strong { font-size: 0.78rem; display: flex; gap: 6px; align-items: center; color: var(--app-text, #e7ebf3); } .cb-dz-secrow strong i { color: #a78bfa; } .cb-dz-count { font-size: 0.66rem; opacity: 0.55; } /* Style preset cards */ .cb-style-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .cb-style-card { display: flex; flex-direction: column; text-align: left; cursor: pointer; background: var(--app-bg, #0d1017); border: 1px solid rgba(127, 127, 127, 0.22); border-radius: 11px; overflow: hidden; padding: 0; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; } .cb-style-card:hover { transform: translateY(-2px); border-color: #a78bfa; box-shadow: 0 6px 18px rgba(123, 108, 246, 0.25); } .cb-style-thumb { position: relative; height: 54px; display: flex; align-items: center; justify-content: center; } .cb-style-thumb b { font-size: 1.5rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); } .cb-style-name { font-size: 0.74rem; font-weight: 600; padding: 7px 9px 1px; color: var(--app-text, #e7ebf3); } .cb-style-blurb { font-size: 0.62rem; opacity: 0.62; line-height: 1.35; padding: 0 9px 9px; } /* Palette cards */ .cb-pal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .cb-pal-card { display: flex; flex-direction: column; gap: 6px; cursor: pointer; background: var(--app-bg, #0d1017); border: 1px solid rgba(127, 127, 127, 0.22); border-radius: 11px; padding: 8px; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; } .cb-pal-card:hover { transform: translateY(-2px); border-color: #34d399; box-shadow: 0 6px 18px rgba(52, 211, 153, 0.22); } .cb-pal-swatches { display: flex; gap: 0; border-radius: 7px; overflow: hidden; height: 30px; } .cb-pal-swatches i { flex: 1; display: block; } .cb-pal-name { font-size: 0.7rem; font-weight: 600; color: var(--app-text, #e7ebf3); } /* Font pairing rows */ .cb-font-rows { display: flex; flex-direction: column; gap: 8px; } .cb-font-row { display: flex; align-items: center; justify-content: space-between; cursor: pointer; background: var(--app-bg, #0d1017); border: 1px solid rgba(127, 127, 127, 0.22); border-radius: 10px; padding: 9px 11px; text-align: left; transition: transform 0.1s, border-color 0.12s, box-shadow 0.12s; } .cb-font-row:hover { transform: translateX(2px); border-color: #f472b6; box-shadow: 0 4px 14px rgba(244, 114, 182, 0.2); } .cb-font-prev { display: flex; flex-direction: column; } .cb-font-prev b { font-size: 0.86rem; color: var(--app-text, #e7ebf3); font-weight: 700; } .cb-font-prev small { font-size: 0.66rem; opacity: 0.62; } .cb-font-mood { font-size: 0.62rem; opacity: 0.55; text-transform: capitalize; max-width: 42%; text-align: right; } /* Builder canvas — animated background (Aurora / Mesh drift) */ .cb-anim-bg { animation: cbAnimBgDrift 14s ease infinite; } @keyframes cbAnimBgDrift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (max-width: 860px) { .cb-style-cards, .cb-pal-grid { grid-template-columns: 1fr 1fr; } } /* Design Studio — smart-tools scope switch (Auto / Selected / Section) */ .cb-dz-scope { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; } .cb-dz-scope-lbl { font-size: 0.68rem; opacity: 0.72; display: flex; gap: 5px; align-items: center; white-space: nowrap; } .cb-dz-scope-lbl i { color: #a78bfa; } .cb-dz-seg { display: inline-flex; background: var(--app-bg, #0d1017); border: 1px solid rgba(127, 127, 127, 0.24); border-radius: 8px; padding: 2px; gap: 2px; } .cb-dz-segbtn { font-size: 0.66rem; font-weight: 600; padding: 4px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--app-text, #e7ebf3); cursor: pointer; opacity: 0.7; transition: all 0.12s; } .cb-dz-segbtn:hover { opacity: 1; } .cb-dz-segbtn.active { background: linear-gradient(135deg, #7b6cf6, #9d6cf6); color: #fff; opacity: 1; box-shadow: 0 2px 8px rgba(123, 108, 246, 0.4); } .cb-dz-tip b { color: #a78bfa; font-weight: 700; } /* ===== AI Asset Generator — Canvas Builder editor (cb-asgen-*) ===== */ .cb-asgen-open { width: 100%; box-sizing: border-box; margin: 8px 0 10px; padding: 9px 10px; border: 1px dashed rgba(157, 108, 246, 0.55); border-radius: 9px; cursor: pointer; background: linear-gradient(135deg, rgba(123, 108, 246, 0.14), rgba(157, 108, 246, 0.1)); color: var(--cb-fg, #e7ebf3); font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.14s; } .cb-asgen-open i { color: #a78bfa; } .cb-asgen-open:hover { border-color: #9d6cf6; background: linear-gradient(135deg, rgba(123, 108, 246, 0.26), rgba(157, 108, 246, 0.18)); box-shadow: 0 2px 10px rgba(123, 108, 246, 0.3); } .cb-asgen-card { width: 880px; max-width: 94vw; max-height: 90vh; display: flex; flex-direction: column; } .cb-asgen-sub { font-weight: 400; font-size: 0.7rem; color: var(--cb-muted, #8b93a7); margin-left: 8px; } .cb-asgen-body { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 18px; overflow: auto; } .cb-asgen-form label { display: block; font-size: 12px; color: var(--cb-muted, #8b93a7); margin: 10px 0 4px; } .cb-asgen-form label small { opacity: 0.7; } .cb-asgen-form input[type='text'] { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(127, 127, 127, 0.28); background: var(--cb-panel, #161a23); color: var(--cb-fg, #e7ebf3); font-size: 0.84rem; } .cb-asgen-form input[type='text']:focus { outline: none; border-color: #9d6cf6; } .cb-asgen-secs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 4px 0 8px; } .cb-asgen-sec { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--cb-muted, #8b93a7); background: var(--cb-panel, #161a23); border: 1px solid rgba(127, 127, 127, 0.22); border-radius: 8px; padding: 7px 9px; cursor: pointer; transition: border-color 0.12s; } .cb-asgen-sec:hover { border-color: #9d6cf6; } .cb-asgen-sec input { accent-color: #7b6cf6; } .cb-asgen-sec i { opacity: 0.65; width: 14px; text-align: center; } .cb-asgen-msg { font-size: 0.78rem; margin-top: 8px; min-height: 1em; color: var(--cb-muted, #8b93a7); } .cb-asgen-msg.ok { color: #3aa76d; } .cb-asgen-msg.err { color: #e0566f; } .cb-asgen-out { border: 1px solid rgba(127, 127, 127, 0.18); border-radius: 10px; padding: 12px 14px; background: var(--cb-panel, #161a23); overflow: auto; min-height: 260px; } .cb-asgen-empty { text-align: center; color: var(--cb-muted, #8b93a7); padding: 46px 18px; } .cb-asgen-empty i { font-size: 26px; color: #a78bfa; opacity: 0.8; } .cb-asgen-empty p { margin: 10px 0 4px; } .cb-asgen-empty small { font-size: 0.76rem; line-height: 1.5; } .cb-asgen-head { font-size: 0.76rem; color: var(--cb-muted, #8b93a7); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; } .cb-asgen-head code { background: rgba(127, 127, 127, 0.12); padding: 2px 7px; border-radius: 5px; font-size: 0.72rem; word-break: break-all; } .cb-asgen-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(127, 127, 127, 0.2); } .cb-asgen-row:last-child { border-bottom: 0; } .cb-asgen-thumb { flex: 0 0 84px; height: 60px; border-radius: 8px; background: rgba(127, 127, 127, 0.1); border: 1px solid rgba(127, 127, 127, 0.2); display: flex; align-items: center; justify-content: center; overflow: hidden; color: #e0566f; } .cb-asgen-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; } .cb-asgen-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cb-asgen-info b { font-size: 0.84rem; } .cb-asgen-info small { color: var(--cb-muted, #8b93a7); font-size: 0.72rem; } .cb-asgen-state { font-style: normal; font-size: 0.74rem; color: var(--cb-muted, #8b93a7); } .cb-asgen-state.ok { color: #3aa76d; } .cb-asgen-state.err { color: #e0566f; } .cb-asgen-spin { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(167, 139, 250, 0.35); border-top-color: #a78bfa; animation: cbagspin 0.7s linear infinite; vertical-align: -2px; } @keyframes cbagspin { to { transform: rotate(360deg); } } .cb-asgen-foot { display: flex; justify-content: flex-end; gap: 8px; } @media (max-width: 760px) { .cb-asgen-body { grid-template-columns: 1fr; } } /* ░░ Client photo cropper modal ░░ */ .se-img-btns { display: flex; gap: 6px; flex-wrap: wrap; } .se-crop-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(18, 16, 22, 0.72); backdrop-filter: blur(4px); padding: 16px; } .se-crop-overlay.open { display: flex; } .se-crop-modal { width: min(680px, 96vw); max-height: 94vh; display: flex; flex-direction: column; background: var(--card, #fff); color: var(--ink, #241f1a); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .se-crop-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .se-crop-head h3 { margin: 0; font-size: 15px; font-weight: 650; display: flex; gap: 8px; align-items: center; } .se-crop-x { background: none; border: none; font-size: 18px; cursor: pointer; color: inherit; opacity: 0.6; padding: 4px 8px; border-radius: 8px; } .se-crop-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); } .se-crop-stage { position: relative; width: 100%; height: min(48vh, 420px); background: repeating-conic-gradient(#e9e6e0 0% 25%, #f6f3ee 0% 50%) 50%/22px 22px; overflow: hidden; touch-action: none; } .se-crop-stage canvas { position: absolute; } .se-crop-box { position: absolute; box-sizing: border-box; border: 1.5px solid #fff; box-shadow: 0 0 0 9999px rgba(20, 18, 24, 0.5); cursor: move; } .se-crop-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px); background-size: 33.33% 33.33%; background-position: 0 0; opacity: 0.45; } .se-crop-h { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid #b8935a; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .se-crop-h-nw { top: -8px; left: -8px; cursor: nwse-resize; } .se-crop-h-ne { top: -8px; right: -8px; cursor: nesw-resize; } .se-crop-h-sw { bottom: -8px; left: -8px; cursor: nesw-resize; } .se-crop-h-se { bottom: -8px; right: -8px; cursor: nwse-resize; } .se-crop-controls { padding: 12px 18px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(0, 0, 0, 0.06); } .se-crop-row { display: flex; align-items: center; gap: 10px; } .se-crop-lbl { font-size: 12px; font-weight: 600; opacity: 0.7; width: 48px; flex: 0 0 auto; } .se-crop-ratios { display: flex; gap: 6px; flex-wrap: wrap; } .se-crop-ratio { font-size: 12px; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.15); background: transparent; color: inherit; cursor: pointer; font-weight: 600; } .se-crop-ratio.active { background: #b8935a; border-color: #b8935a; color: #fff; } .se-crop-locknote { font-size: 12px; font-weight: 600; color: #b8935a; display: flex; align-items: center; gap: 6px; } .se-crop-locknote i { font-size: 11px; } .se-crop-zoom { flex: 1; accent-color: #b8935a; } .se-crop-btn-icon { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.15); background: transparent; color: inherit; cursor: pointer; } .se-crop-btn-icon:hover { background: rgba(0, 0, 0, 0.06); } .se-crop-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid rgba(0, 0, 0, 0.08); flex-wrap: wrap; } .se-crop-hint { font-size: 11.5px; opacity: 0.6; } .se-crop-actions { display: flex; gap: 8px; } @media (max-width: 560px) { .se-crop-foot { flex-direction: column; align-items: stretch; } .se-crop-hint { order: 2; text-align: center; } .se-crop-actions { order: 1; justify-content: stretch; } .se-crop-actions .btn { flex: 1; } } /* dark UI variant */ .se-studio[data-uitheme='dark'] ~ .se-crop-overlay .se-crop-modal, [data-uitheme='dark'] .se-crop-modal { background: #211d27; color: #ece8f0; } /* ========================================================================= MARKET RADAR (/owner/market-radar) Etsy Market Intelligence Dashboard — Zinc/Slate dark, Inter, rounded cards ========================================================================= */ .mr-wrap { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); display: flex; flex-direction: column; gap: 20px; } /* ---- EMPTY STATE / DROPZONE ---------------------------------------------- */ .mr-dropzone { position: relative; min-height: 360px; border: 2px dashed var(--line); border-radius: 22px; background: var(--glass-bg); display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; overflow: hidden; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; outline: none; } .mr-dropzone:hover, .mr-dropzone:focus-visible { border-color: rgb(var(--h)); background: rgba(var(--h), 0.05); transform: translateY(-2px); box-shadow: 0 18px 50px -28px rgba(var(--h), 0.55); } .mr-dropzone.mr-drag { border-color: rgb(var(--h)); border-style: solid; background: rgba(var(--h), 0.1); transform: scale(1.01); box-shadow: 0 0 0 4px rgba(var(--h), 0.12), 0 24px 60px -28px rgba(var(--h), 0.6); } .mr-drop-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 28px; max-width: 520px; } .mr-drop-icon { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--h), 0.12); color: rgb(var(--h)); font-size: 1.9rem; transition: transform 0.3s ease, background 0.3s ease; } .mr-dropzone:hover .mr-drop-icon, .mr-dropzone.mr-drag .mr-drop-icon { transform: translateY(-4px) scale(1.06); background: rgba(var(--h), 0.2); } .mr-drop-inner h2 { margin: 0; font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; } .mr-drop-hint { margin: 0; font-size: 0.84rem; opacity: 0.62; line-height: 1.5; } .mr-pick-btn { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 12px; border: 1px solid rgb(var(--h)); background: rgb(var(--h)); color: #fff; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: filter 0.2s ease, transform 0.15s ease; } .mr-pick-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .mr-restore { margin-top: 4px; font-size: 0.8rem; opacity: 0.7; } .mr-restore button { background: none; border: none; color: rgb(var(--h)); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; } .mr-drop-ring { position: absolute; inset: -40%; background: radial-gradient(circle at 50% 50%, rgba(var(--h), 0.08), transparent 60%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 1; } .mr-dropzone:hover .mr-drop-ring, .mr-dropzone.mr-drag .mr-drop-ring { opacity: 1; } /* ---- PARSING OVERLAY ----------------------------------------------------- */ .mr-parsing { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 300px; text-align: center; } .mr-spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--line); border-top-color: rgb(var(--h)); animation: mr-spin 0.8s linear infinite; } @keyframes mr-spin { to { transform: rotate(360deg); } } #mr-parsing-text { font-size: 0.9rem; opacity: 0.7; } /* ---- DASHBOARD / TOOLBAR -------------------------------------------------- */ .mr-dash { display: flex; flex-direction: column; gap: 18px; } .mr-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mr-meta { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; font-size: 0.8rem; opacity: 0.72; flex-wrap: wrap; } .mr-meta i { color: rgb(var(--h)); margin-right: 4px; } .mr-meta-sep { opacity: 0.4; } .mr-search { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--glass-bg); min-width: 200px; } .mr-search i { opacity: 0.5; } .mr-search input { border: none; background: none; color: var(--ink); font: inherit; font-size: 0.85rem; outline: none; width: 100%; } .mr-tools { display: inline-flex; gap: 8px; } .mr-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 11px; border: 1px solid var(--line); background: var(--glass-bg); color: var(--ink); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .mr-btn:hover { border-color: rgb(var(--h)); } .mr-btn-ghost { opacity: 0.75; } /* ---- MODULE A · KPI BENTO GRID ------------------------------------------- */ .mr-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1040px) { .mr-bento { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .mr-bento { grid-template-columns: 1fr; } } .mr-kpi { position: relative; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--glass-bg); display: flex; flex-direction: column; gap: 7px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .mr-kpi:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.5); } .mr-kpi::after { content: ''; position: absolute; top: -30%; right: -20%; width: 130px; height: 130px; border-radius: 50%; opacity: 0.12; background: currentColor; pointer-events: none; } .mr-kpi-a { color: rgb(var(--h)); } .mr-kpi-b { color: #38bdf8; } .mr-kpi-c { color: #fb7185; } .mr-kpi-d { color: #34d399; } .mr-kpi-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(127, 127, 127, 0.12); color: currentColor; font-size: 1rem; } .mr-kpi-lbl { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; color: var(--ink); } .mr-kpi-val { font-size: 1.62rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); } .mr-kpi-sub { font-size: 0.74rem; opacity: 0.62; color: var(--ink); } /* ---- MODULE B · ANALYTICS ------------------------------------------------- */ .mr-analytics { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; } @media (max-width: 980px) { .mr-analytics { grid-template-columns: 1fr; } } .mr-card { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--glass-bg); display: flex; flex-direction: column; min-height: 0; } .mr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .mr-card-head h3 { margin: 0; font-size: 0.98rem; font-weight: 700; display: flex; gap: 8px; align-items: center; } .mr-card-head h3 i { color: rgb(var(--h)); } .mr-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; opacity: 0.75; } .mr-dot { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--h)); display: inline-block; } .mr-dot-sweet { background: #34d399; } .mr-canvas-wrap { position: relative; height: 320px; } /* ---- MODULE D · ATTACK PLAN ----------------------------------------------- */ .mr-attack-tag { font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(251, 113, 133, 0.16); color: #fb7185; } .mr-attack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 760px) { .mr-attack-grid { grid-template-columns: 1fr; } } .mr-attack-card { display: flex; gap: 13px; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(127, 127, 127, 0.04); } .mr-att-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: rgba(251, 113, 133, 0.14); color: #fb7185; font-size: 1.05rem; } .mr-att-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .mr-att-badge { align-self: flex-start; font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(251, 113, 133, 0.16); color: #fb7185; } .mr-att-desc { font-size: 0.82rem; opacity: 0.8; line-height: 1.45; } .mr-att-action { font-size: 0.8rem; font-weight: 600; display: flex; gap: 7px; align-items: flex-start; color: #34d399; } .mr-att-action i { margin-top: 2px; } /* ---- MODULE C · MASTER DATA TABLE ----------------------------------------- */ .mr-table-card { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--glass-bg); } .mr-count { font-size: 0.78rem; opacity: 0.6; font-weight: 500; } .mr-table-scroll { overflow-x: auto; border-radius: 12px; } .mr-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; } .mr-table th, .mr-table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; } .mr-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; font-weight: 700; position: sticky; top: 0; background: var(--glass-bg); backdrop-filter: blur(8px); } .mr-table th[data-sort] { cursor: pointer; user-select: none; } .mr-table th[data-sort]:hover { color: rgb(var(--h)); opacity: 1; } .mr-table th[data-sort]::after { content: '\2195'; margin-left: 5px; opacity: 0.35; font-size: 0.85em; } .mr-table th.mr-sort-asc::after { content: '\2191'; opacity: 1; color: rgb(var(--h)); } .mr-table th.mr-sort-desc::after { content: '\2193'; opacity: 1; color: rgb(var(--h)); } .mr-th-thumb { width: 52px; } .mr-num { text-align: right; font-variant-numeric: tabular-nums; } .mr-center { text-align: center; } .mr-table tbody tr { transition: background 0.15s ease; } .mr-table tbody tr:hover { background: rgba(var(--h), 0.05); } .mr-td-thumb { width: 52px; } .mr-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); display: block; } .mr-thumb-empty { width: 42px; height: 42px; border-radius: 9px; border: 1px dashed var(--line); display: grid; place-items: center; opacity: 0.4; font-size: 0.8rem; } .mr-td-title { max-width: 320px; white-space: normal; } .mr-td-title > span:first-child { font-weight: 600; } .mr-hook { display: block; font-size: 0.74rem; opacity: 0.55; margin-top: 3px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .mr-rev { font-weight: 700; color: #34d399; } .mr-td-tags { max-width: 260px; white-space: normal; } .mr-pill { display: inline-block; font-size: 0.7rem; padding: 2px 8px; margin: 2px 3px 2px 0; border-radius: 999px; background: rgba(var(--h), 0.12); color: rgb(var(--h)); } .mr-pill-more { font-size: 0.7rem; opacity: 0.55; } .mr-lqs { font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 9px; border-radius: 8px; } .mr-lqs-hi { background: rgba(52, 211, 153, 0.16); color: #34d399; } .mr-lqs-mid { background: rgba(251, 191, 36, 0.16); color: #fbbf24; } .mr-lqs-lo { background: rgba(251, 113, 133, 0.16); color: #fb7185; } .mr-yes { color: #34d399; } .mr-no { color: #fb7185; } .mr-empty-row td { text-align: center; padding: 30px 12px; opacity: 0.5; font-size: 0.84rem; } /* ========================================================================= MARKET RADAR — v3 modules: AI SEO Generator + Intelligence Report ========================================================================= */ /* ---- $0.0 price → Deep Scan hint ---------------------------------------- */ .mr-deepscan { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: rgba(251, 191, 36, 0.16); color: #fbbf24; cursor: help; white-space: nowrap; } /* ---- per-row SEO button -------------------------------------------------- */ .mr-seo-row { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: rgba(var(--h), 0.08); color: rgb(var(--h)); cursor: pointer; transition: background 0.18s ease, transform 0.12s ease; } .mr-seo-row:hover { background: rgb(var(--h)); color: #fff; transform: translateY(-1px); } /* ---- small spinner reused in SEO loading -------------------------------- */ .mr-spinner-sm { width: 18px; height: 18px; border-width: 2px; display: inline-block; vertical-align: middle; margin-right: 8px; } /* ---- MODULE E · AI SEO GENERATOR ---------------------------------------- */ .mr-seo-tag { background: rgba(52, 211, 153, 0.16); color: #34d399; } .mr-seo-hint { margin: 0 0 14px; font-size: 0.85rem; opacity: 0.7; line-height: 1.5; } .mr-seo-form { display: flex; gap: 10px; flex-wrap: wrap; } .mr-seo-input { flex: 1; min-width: 240px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass-bg); color: var(--ink); font: inherit; font-size: 0.88rem; outline: none; } .mr-seo-input:focus { border-color: rgb(var(--h)); } .mr-seo-price { width: 120px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass-bg); color: var(--ink); font: inherit; font-size: 0.88rem; outline: none; } .mr-seo-price:focus { border-color: rgb(var(--h)); } .mr-seo-go { margin-top: 0; } .mr-seo-out { margin-top: 16px; } .mr-seo-loading { display: flex; align-items: center; font-size: 0.86rem; opacity: 0.75; padding: 10px 0; } .mr-seo-err { font-size: 0.86rem; color: #fb7185; padding: 12px 14px; border-radius: 12px; background: rgba(251, 113, 133, 0.1); } .mr-seo-err i { margin-right: 7px; } .mr-seo-result { display: flex; flex-direction: column; gap: 14px; } .mr-seo-block { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; background: rgba(127, 127, 127, 0.04); } .mr-seo-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .mr-copy { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--glass-bg); color: var(--ink); cursor: pointer; opacity: 0.7; transition: opacity 0.15s ease, color 0.15s ease; } .mr-copy:hover { opacity: 1; color: rgb(var(--h)); } .mr-seo-title-out { font-size: 1.02rem; font-weight: 700; line-height: 1.4; } .mr-seo-tags { display: flex; flex-wrap: wrap; gap: 6px; } .mr-seo-desc { font-size: 0.9rem; line-height: 1.6; opacity: 0.92; white-space: pre-wrap; } .mr-seo-feat { margin: 0; padding-left: 20px; font-size: 0.88rem; line-height: 1.6; } .mr-seo-model { font-size: 0.74rem; opacity: 0.55; } .mr-seo-model i { margin-right: 5px; color: rgb(var(--h)); } /* ---- MODULE F · INTELLIGENCE REPORT ------------------------------------- */ .mr-intel-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; align-items: start; } @media (max-width: 900px) { .mr-intel-grid { grid-template-columns: 1fr; } } .mr-intel-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .mr-intel-stat { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(127, 127, 127, 0.04); } .mr-intel-num { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; color: rgb(var(--h)); line-height: 1.1; } .mr-intel-cap { font-size: 0.72rem; opacity: 0.65; } .mr-intel-fig { margin: 0; } .mr-intel-img { width: 100%; border-radius: 14px; border: 1px solid var(--line); display: block; } .mr-intel-fig figcaption { font-size: 0.74rem; opacity: 0.55; margin-top: 8px; text-align: center; } .mr-intel-more { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; } .mr-intel-more summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; } .mr-intel-more summary i { color: rgb(var(--h)); } .mr-intel-more summary::-webkit-details-marker { display: none; } .mr-intel-detail h4 { font-size: 0.86rem; margin: 16px 0 10px; display: flex; align-items: center; gap: 7px; } .mr-intel-detail h4 i { color: rgb(var(--h)); } .mr-ice-list { display: flex; flex-direction: column; gap: 8px; } .mr-ice-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; background: rgba(127, 127, 127, 0.04); border: 1px solid var(--line); } .mr-ice-p { font-size: 1rem; flex: none; width: 34px; } .mr-ice-a { flex: 1; font-size: 0.86rem; } .mr-ice-s { flex: none; font-size: 0.74rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(52, 211, 153, 0.16); color: #34d399; } .mr-intel-tags { display: flex; flex-wrap: wrap; gap: 7px; } .mr-intel-tags .mr-pill { cursor: pointer; font-size: 0.74rem; } .mr-intel-tags .mr-pill:hover { background: rgb(var(--h)); color: #fff; } /* ===================================================================== CINEMATIC THEME GALLERY (Tahap 1) Slide-in dock reusing .cb-bg-dock / .cb-modal-card-dock layout. ===================================================================== */ .cb-rail .cb-rtab-themes i { color: #c9a6ff; } .cb-rail .cb-rtab-themes:hover { background: rgba(201, 166, 255, 0.12); color: #e6d6ff; } .cb-rail .cb-rtab-themes:hover i { color: #e6d6ff; } .cb-rail .cb-rtab-themes.active i { color: #e6d6ff; } .cb-themes-tabs { display: flex; gap: 4px; padding: 3px; background: var(--cb-bg); border: 1px solid var(--cb-border); border-radius: 10px; } .cb-themes-tab { flex: 1; padding: 7px 10px; border: 0; background: transparent; color: var(--cb-muted); font-size: 0.8rem; font-weight: 600; border-radius: 7px; cursor: pointer; transition: background 0.15s, color 0.15s; } .cb-themes-tab:hover { color: var(--cb-fg); } .cb-themes-tab.active { background: var(--cb-elev); color: var(--cb-fg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .cb-themes-active { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 12px; padding: 9px 11px; background: rgba(201, 166, 255, 0.1); border: 1px solid rgba(201, 166, 255, 0.28); border-radius: 9px; font-size: 0.78rem; color: var(--cb-fg); } .cb-themes-active i { color: #c9a6ff; margin-right: 5px; } .cb-themes-active b { font-weight: 700; } .cb-themes-grid { display: flex; flex-direction: column; gap: 14px; } .cb-theme-card { border: 1px solid var(--cb-border); border-radius: 12px; overflow: hidden; background: var(--cb-elev); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .cb-theme-card:hover { border-color: var(--cb-border-strong); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .cb-theme-card.active { border-color: rgba(201, 166, 255, 0.55); box-shadow: 0 0 0 1px rgba(201, 166, 255, 0.35); } .cb-theme-thumb { position: relative; height: 120px; background-size: cover; background-position: center; } .cb-theme-layers { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 0.7rem; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.55); border-radius: 999px; backdrop-filter: blur(4px); } .cb-theme-badge { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 0.68rem; font-weight: 700; color: #1a1a1a; background: #c9a6ff; border-radius: 999px; } .cb-theme-meta { padding: 11px 12px 13px; } .cb-theme-name { font-size: 0.92rem; font-weight: 700; color: var(--cb-fg); margin-bottom: 3px; } .cb-theme-desc { font-size: 0.75rem; line-height: 1.4; color: var(--cb-muted); margin-bottom: 8px; } .cb-theme-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; } .cb-theme-tag { font-size: 0.66rem; font-weight: 600; color: var(--cb-muted); padding: 2px 8px; background: var(--cb-bg); border: 1px solid var(--cb-border); border-radius: 999px; } .cb-theme-acts { display: flex; gap: 6px; margin-top: 8px; } .cb-theme-apply { flex: 1 1 auto; justify-content: center; } .cb-theme-edit { flex: 0 0 auto; justify-content: center; } .cb-theme-del { flex: 0 0 auto; justify-content: center; padding-left: 9px; padding-right: 9px; } .cb-theme-del:hover { color: #ff7b7b !important; border-color: rgba(255, 123, 123, 0.4) !important; } .cb-themes-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 38px 16px; color: var(--cb-muted); } .cb-themes-empty i { font-size: 1.8rem; margin-bottom: 12px; color: rgba(201, 166, 255, 0.5); } .cb-themes-empty p { font-size: 0.82rem; line-height: 1.5; margin: 0; } .cb-themes-empty span { font-size: 0.74rem; opacity: 0.7; } /* ===================================================================== CINEMATIC THEME CREATOR (Tahap 2) — visual layer-stack editor. Reuses .cb-bg-dock / .cb-modal-card-dock for the dock shell. Accent: cinematic purple #c9a6ff. Pure CSS, GPU-friendly. ===================================================================== */ .cb-themes-create-btn { background: linear-gradient(135deg, #6d4fc4 0%, #c9a6ff 100%) !important; border: none !important; color: #0a0a0a !important; font-weight: 600; box-shadow: 0 4px 18px rgba(201, 166, 255, 0.28); } .cb-themes-create-btn:hover { filter: brightness(1.06); } .cb-creator-dock { z-index: 60; } .cb-creator-meta { margin-bottom: 14px; } .cb-creator-lbl, .cb-creator-fld > label { display: block; font-size: 0.7rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--cb-muted); margin-bottom: 5px; } .cb-creator-fld > label b { color: #c9a6ff; font-weight: 600; } .cb-creator-input { width: 100%; background: var(--cb-elev); border: 1px solid var(--cb-border); border-radius: 8px; color: var(--cb-fg); padding: 8px 10px; font-size: 0.82rem; outline: none; } .cb-creator-input:focus { border-color: #c9a6ff; } .cb-creator-color { width: 100%; height: 34px; background: var(--cb-elev); border: 1px solid var(--cb-border); border-radius: 8px; padding: 2px; cursor: pointer; } .cb-creator-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cb-border); } .cb-creator-sec-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; font-weight: 600; color: var(--cb-fg); margin-bottom: 10px; } .cb-creator-sec-head i { color: #c9a6ff; margin-right: 5px; } .cb-creator-subhd { font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: #c9a6ff; margin: 14px 0 8px; display: flex; align-items: center; gap: 6px; } /* ---- Layer stack builder ---- */ .cb-creator-stack { display: flex; flex-direction: column; gap: 6px; } .cb-creator-empty { font-size: 0.78rem; color: var(--cb-muted); text-align: center; padding: 16px 8px; border: 1px dashed var(--cb-border); border-radius: 8px; } .cb-creator-lrow { display: flex; align-items: center; gap: 8px; padding: 8px 9px; background: var(--cb-elev); border: 1px solid var(--cb-border); border-radius: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .cb-creator-lrow:hover { border-color: var(--cb-border-strong); } .cb-creator-lrow.active { border-color: #c9a6ff; background: rgba(201, 166, 255, 0.08); } .cb-creator-lz { flex: 0 0 auto; font-size: 0.62rem; font-weight: 700; color: #c9a6ff; background: rgba(201, 166, 255, 0.14); border-radius: 5px; padding: 2px 5px; min-width: 26px; text-align: center; } .cb-creator-lname { flex: 1 1 auto; font-size: 0.8rem; color: var(--cb-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cb-creator-lname i { color: var(--cb-muted); margin-right: 4px; } .cb-creator-lname small { display: block; font-size: 0.66rem; color: var(--cb-muted); margin-top: 1px; } .cb-creator-lacts { flex: 0 0 auto; display: flex; gap: 3px; } .cb-creator-lact { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--cb-border); border-radius: 6px; color: var(--cb-muted); font-size: 0.7rem; cursor: pointer; transition: all 0.12s; } .cb-creator-lact:hover { color: var(--cb-fg); border-color: var(--cb-border-strong); } .cb-creator-lact.danger:hover { color: #ff7b7b; border-color: rgba(255, 123, 123, 0.4); } /* ---- Selected layer editor ---- */ .cb-creator-fld { margin-bottom: 11px; } .cb-creator-fld input[type='range'] { width: 100%; accent-color: #c9a6ff; } .cb-creator-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cb-creator-asset-row { display: flex; align-items: center; gap: 8px; } .cb-creator-asset-val { flex: 1 1 auto; font-size: 0.74rem; color: var(--cb-fg); background: var(--cb-elev); border: 1px solid var(--cb-border); border-radius: 7px; padding: 7px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cb-creator-asset-val i { color: var(--cb-muted); } .cb-hint-inline { font-size: 0.7rem; color: var(--cb-muted); font-weight: 400; text-transform: none; letter-spacing: 0; } /* ---- Asset picker overlay ---- */ .cb-creator-assetpicker { margin-top: 14px; padding: 12px; background: var(--cb-panel); border: 1px solid #c9a6ff; border-radius: 10px; } .cb-creator-ap-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; font-weight: 600; color: var(--cb-fg); margin-bottom: 10px; } .cb-creator-ap-head i { color: #c9a6ff; } .cb-creator-ap-tabs { display: flex; gap: 4px; margin-bottom: 12px; } .cb-creator-ap-tab { flex: 1 1 auto; padding: 7px 4px; font-size: 0.72rem; background: var(--cb-elev); border: 1px solid var(--cb-border); border-radius: 7px; color: var(--cb-muted); cursor: pointer; transition: all 0.14s; } .cb-creator-ap-tab:hover { color: var(--cb-fg); } .cb-creator-ap-tab.active { background: rgba(201, 166, 255, 0.14); border-color: #c9a6ff; color: #c9a6ff; font-weight: 600; } .cb-creator-ap-body { max-height: 280px; overflow-y: auto; } .cb-creator-ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cb-creator-ap-item { display: flex; flex-direction: column; gap: 5px; padding: 0; background: transparent; border: 1px solid var(--cb-border); border-radius: 9px; cursor: pointer; overflow: hidden; transition: border-color 0.14s, transform 0.14s; } .cb-creator-ap-item:hover { border-color: #c9a6ff; transform: translateY(-1px); } .cb-creator-ap-thumb { position: relative; display: block; height: 64px; border-radius: 8px 8px 0 0; background-size: cover; background-position: center; color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .cb-creator-ap-badge { position: absolute; top: 5px; left: 5px; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.05em; background: rgba(201, 166, 255, 0.92); color: #0a0a0a; border-radius: 4px; padding: 1px 5px; } .cb-creator-ap-name { font-size: 0.7rem; color: var(--cb-fg); padding: 0 8px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } /* ---- Upload tab ---- */ .cb-creator-upload { display: flex; flex-direction: column; gap: 10px; } .cb-creator-upstatus { font-size: 0.76rem; min-height: 18px; } .cb-creator-uperr { color: #ff7b7b; } .cb-creator-upok { color: #7be0a0; } /* ---- Foot ---- */ .cb-creator-foot { display: flex; gap: 8px; } .cb-creator-foot .cb-btn { flex: 1 1 auto; justify-content: center; } /* ============================================================ AI COMPOSER — in-editor iterative theme generator (rail tab) Chat-style panel: generate a theme from a brief, then keep prompting to refine it (like AI coding). Dark editor theme. ============================================================ */ .cb-rtab-ai i { color: var(--cb-gold); } .cb-ai { display: flex; flex-direction: column; gap: 12px; padding: 2px 0 4px; } .cb-ai-intro { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--cb-border); border-radius: 10px; background: var(--cb-panel-2, rgba(255, 255, 255, 0.03)); } .cb-ai-intro > i { flex: 0 0 auto; font-size: 16px; color: var(--cb-gold); margin-top: 1px; } .cb-ai-intro strong { display: block; font-size: 12.5px; color: var(--cb-text, #e9e7e2); margin-bottom: 3px; } .cb-ai-intro p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--cb-muted); } .cb-ai-intro p b { color: var(--cb-text, #e9e7e2); font-weight: 600; } /* quick style seeds */ .cb-ai-seeds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .cb-ai-seed { padding: 8px 9px; border: 1px solid var(--cb-border); border-radius: 8px; background: transparent; color: var(--cb-text, #e9e7e2); font-size: 11px; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; } .cb-ai-seed:hover { border-color: var(--cb-gold); background: var(--cb-gold-soft, rgba(255, 255, 255, 0.08)); } .cb-ai-seed:active { transform: translateY(1px); } /* conversation log */ .cb-ai-log { display: flex; flex-direction: column; gap: 8px; max-height: 320px; min-height: 60px; overflow-y: auto; padding: 10px; border: 1px solid var(--cb-border); border-radius: 10px; background: rgba(0, 0, 0, 0.18); scroll-behavior: smooth; } .cb-ai-empty { margin: auto; padding: 8px 4px; font-size: 11.5px; line-height: 1.5; color: var(--cb-muted); text-align: center; } .cb-ai-empty b { color: var(--cb-text, #e9e7e2); } .cb-ai-msg { display: flex; flex-direction: column; gap: 3px; max-width: 92%; animation: cbAccIn 0.16s ease; } .cb-ai-user { align-self: flex-end; align-items: flex-end; } .cb-ai-ai { align-self: flex-start; align-items: flex-start; } .cb-ai-who { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cb-muted); padding: 0 3px; } .cb-ai-txt { padding: 7px 10px; border-radius: 10px; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .cb-ai-user .cb-ai-txt { background: var(--cb-gold-soft, rgba(255, 255, 255, 0.1)); border: 1px solid var(--cb-border-strong, rgba(255, 255, 255, 0.18)); color: var(--cb-text, #e9e7e2); border-bottom-right-radius: 3px; } .cb-ai-ai .cb-ai-txt { background: var(--cb-panel-2, rgba(255, 255, 255, 0.04)); border: 1px solid var(--cb-border); color: var(--cb-muted); border-bottom-left-radius: 3px; } /* reference / concept disclosure */ .cb-ai-ref { border: 1px solid var(--cb-border); border-radius: 8px; padding: 0 10px; background: var(--cb-panel-2, rgba(255, 255, 255, 0.02)); } .cb-ai-ref > summary { list-style: none; cursor: pointer; padding: 9px 0; font-size: 11px; font-weight: 600; color: var(--cb-muted); display: flex; align-items: center; gap: 6px; user-select: none; } .cb-ai-ref > summary::-webkit-details-marker { display: none; } .cb-ai-ref > summary i { color: var(--cb-gold); } .cb-ai-ref[open] > summary { color: var(--cb-text, #e9e7e2); } .cb-ai-ref textarea { width: 100%; margin: 0 0 10px; padding: 8px 9px; border: 1px solid var(--cb-border); border-radius: 7px; background: rgba(0, 0, 0, 0.22); color: var(--cb-text, #e9e7e2); font: inherit; font-size: 11.5px; line-height: 1.45; resize: vertical; box-sizing: border-box; } /* prompt input */ .cb-ai-inputwrap { display: block; } .cb-ai-inputwrap textarea, .cb-ai-input { width: 100%; padding: 10px 11px; border: 1px solid var(--cb-border-strong, rgba(255, 255, 255, 0.18)); border-radius: 9px; background: rgba(0, 0, 0, 0.24); color: var(--cb-text, #e9e7e2); font: inherit; font-size: 12px; line-height: 1.5; resize: vertical; box-sizing: border-box; transition: border-color 0.15s ease; } .cb-ai-inputwrap textarea:focus { outline: none; border-color: var(--cb-gold); } .cb-ai-inputwrap textarea::placeholder { color: var(--cb-muted); opacity: 0.7; } /* action buttons */ .cb-ai-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cb-ai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--cb-border-strong, rgba(255, 255, 255, 0.18)); font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease; } .cb-ai-btn:active { transform: translateY(1px); } .cb-ai-btn:disabled { opacity: 0.5; cursor: not-allowed; } .cb-ai-gen { background: var(--cb-gold, #fff); color: #111; border-color: var(--cb-gold, #fff); } .cb-ai-gen:hover:not(:disabled) { filter: brightness(1.08); } .cb-ai-rev { background: transparent; color: var(--cb-text, #e9e7e2); } .cb-ai-rev:hover:not(:disabled) { border-color: var(--cb-gold); background: var(--cb-gold-soft, rgba(255, 255, 255, 0.08)); } /* options row */ .cb-ai-opts { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .cb-ai-check { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--cb-muted); cursor: pointer; user-select: none; } .cb-ai-check input { accent-color: var(--cb-gold, #fff); } .cb-ai-undo { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--cb-border); background: transparent; color: var(--cb-muted); font-size: 11px; font-weight: 600; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .cb-ai-undo:hover { color: var(--cb-text, #e9e7e2); border-color: var(--cb-border-strong, rgba(255, 255, 255, 0.18)); } .cb-ai-undo[hidden] { display: none; } /* status line */ .cb-ai-status { font-size: 11px; line-height: 1.4; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--cb-border); color: var(--cb-muted); } .cb-ai-status[hidden] { display: none; } .cb-ai-status.busy { color: var(--cb-text, #e9e7e2); border-color: var(--cb-border-strong, rgba(255, 255, 255, 0.18)); background: var(--cb-panel-2, rgba(255, 255, 255, 0.04)); } .cb-ai-status.ok { color: #7fd18b; border-color: rgba(127, 209, 139, 0.35); background: rgba(127, 209, 139, 0.08); } .cb-ai-status.err { color: #ff8f8f; border-color: rgba(255, 143, 143, 0.35); background: rgba(255, 143, 143, 0.08); } /* ===================================================================== MOTION STUDIO (.ms-*) — JFY's Smooth Web Graphic Animation authoring tool. Full-bleed 3-panel editor (Layers / Stage+Timeline / Inspector) using the shared monochrome console palette (--cb-*). ===================================================================== */ .ms { --ms-bg: var(--cb-bg, #0a0a0a); --ms-panel: var(--cb-panel, #111); --ms-elev: var(--cb-elev, #1a1a1a); --ms-border: var(--cb-border, rgba(255, 255, 255, 0.1)); --ms-border-strong: var(--cb-border-strong, rgba(255, 255, 255, 0.18)); --ms-fg: var(--cb-fg, #fafafa); --ms-muted: var(--cb-muted, #8a8a8a); --ms-accent: var(--cb-accent, #fff); --ms-accent-soft: var(--cb-accent-soft, rgba(255, 255, 255, 0.1)); --ms-radius: 10px; --ms-danger: #ff8f8f; display: flex; flex-direction: column; height: calc(100vh - 132px); min-height: 560px; background: var(--ms-bg); color: var(--ms-fg); border: 1px solid var(--ms-border); border-radius: 14px; overflow: hidden; font-size: 13px; } /* ---- Toolbar ---- */ .ms-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--ms-elev); border-bottom: 1px solid var(--ms-border); flex: 0 0 auto; } .ms-tb-left, .ms-tb-right { display: flex; align-items: center; gap: 10px; } .ms-logo { font-weight: 700; letter-spacing: 0.2px; display: inline-flex; align-items: center; gap: 8px; color: var(--ms-fg); } .ms-logo i { color: var(--ms-accent); } .ms-name-input { background: var(--ms-panel); border: 1px solid var(--ms-border); color: var(--ms-fg); border-radius: 8px; padding: 7px 11px; min-width: 200px; font-size: 13px; outline: none; } .ms-name-input:focus { border-color: var(--ms-border-strong); } .ms-tag { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--ms-accent-soft); color: var(--ms-muted); border: 1px solid var(--ms-border); white-space: nowrap; } /* ---- Buttons ---- */ .ms-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--ms-border); background: var(--ms-panel); color: var(--ms-fg); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.05s; white-space: nowrap; } .ms-btn:hover { border-color: var(--ms-border-strong); background: var(--ms-elev); } .ms-btn:active { transform: translateY(1px); } .ms-btn-primary { background: var(--ms-accent); color: #0a0a0a; border-color: var(--ms-accent); } .ms-btn-primary:hover { filter: brightness(0.92); background: var(--ms-accent); } .ms-btn-ghost { background: transparent; } .ms-btn-danger { color: var(--ms-danger); border-color: rgba(255, 143, 143, 0.35); background: rgba(255, 143, 143, 0.06); } .ms-btn-danger:hover { background: rgba(255, 143, 143, 0.12); } .ms-btn-sm { padding: 6px 11px; font-size: 12px; } .ms-w100 { width: 100%; justify-content: center; margin-top: 10px; } .ms-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--ms-border); background: var(--ms-panel); color: var(--ms-fg); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .ms-iconbtn:hover { border-color: var(--ms-border-strong); background: var(--ms-elev); } .ms-play.playing i::before { content: '\f04c'; /* fa-pause */ } /* ---- Dropdown ---- */ .ms-dropdown { position: relative; } .ms-dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--ms-elev); border: 1px solid var(--ms-border-strong); border-radius: 10px; padding: 6px; min-width: 220px; z-index: 40; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); } .ms-dropdown-menu[hidden] { display: none; } .ms-dd-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border: 0; background: transparent; color: var(--ms-fg); font-size: 12.5px; border-radius: 7px; cursor: pointer; text-align: left; } .ms-dd-item:hover { background: var(--ms-accent-soft); } .ms-dd-item i { width: 16px; text-align: center; color: var(--ms-muted); } /* ---- Body / 3-panel grid ---- */ .ms-body { flex: 1 1 auto; display: grid; grid-template-columns: 240px 1fr 300px; min-height: 0; } .ms-panel { background: var(--ms-panel); display: flex; flex-direction: column; min-height: 0; } .ms-layers { border-right: 1px solid var(--ms-border); } .ms-inspector { border-left: 1px solid var(--ms-border); overflow-y: auto; } .ms-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ms-muted); border-bottom: 1px solid var(--ms-border); } .ms-panel-head i { color: var(--ms-accent); margin-right: 4px; } /* ---- Layers list ---- */ .ms-layers-list { flex: 1 1 auto; overflow-y: auto; padding: 8px; } .ms-layer-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; margin-bottom: 4px; } .ms-layer-item:hover { background: var(--ms-elev); } .ms-layer-item.active { background: var(--ms-accent-soft); border-color: var(--ms-border-strong); } .ms-layer-thumb { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 6px; border: 1px solid var(--ms-border); background-color: #000; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: linear-gradient(45deg, #222 25%, transparent 25%), linear-gradient(-45deg, #222 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #222 75%), linear-gradient(-45deg, transparent 75%, #222 75%); background-size: 10px 10px; background-position: 0 0, 0 5px, 5px -5px, -5px 0; } .ms-layer-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; } .ms-layer-item.hidden-layer .ms-layer-name { opacity: 0.4; } .ms-layer-btns { display: flex; gap: 2px; flex: 0 0 auto; } .ms-layer-btns button { width: 24px; height: 24px; border: 0; background: transparent; color: var(--ms-muted); cursor: pointer; border-radius: 5px; font-size: 11px; } .ms-layer-btns button:hover { background: var(--ms-elev); color: var(--ms-fg); } .ms-layers-empty { padding: 30px 18px; text-align: center; color: var(--ms-muted); } .ms-layers-empty i { font-size: 30px; opacity: 0.35; margin-bottom: 10px; display: block; } .ms-layers-empty p { margin: 0 0 12px; font-size: 12.5px; } /* ---- Center: stage ---- */ .ms-center { display: flex; flex-direction: column; min-height: 0; background: var(--ms-bg); } .ms-stage-wrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 24px; min-height: 0; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.03), transparent 60%), var(--ms-bg); } .ms-stage { position: relative; flex: 0 0 auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); border: 1px solid var(--ms-border); overflow: hidden; } .ms-stage.transparent { background-image: linear-gradient(45deg, #1c1c1c 25%, transparent 25%), linear-gradient(-45deg, #1c1c1c 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1c1c1c 75%), linear-gradient(-45deg, transparent 75%, #1c1c1c 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; } .ms-stage-inner { position: absolute; inset: 0; } /* static (non-playing) composition tiles */ .ms-static-layer { position: absolute; cursor: grab; user-select: none; outline: 1px dashed transparent; } .ms-static-layer:hover { outline-color: rgba(255, 255, 255, 0.3); } .ms-static-layer.selected { outline: 1.5px solid var(--ms-accent); } .ms-static-layer.dragging { cursor: grabbing; } .ms-static-layer img { display: block; pointer-events: none; -webkit-user-drag: none; } /* ---- Transport ---- */ .ms-transport { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--ms-border); background: var(--ms-elev); flex: 0 0 auto; } .ms-play { background: var(--ms-accent); color: #0a0a0a; border-color: var(--ms-accent); } .ms-time { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ms-muted); } .ms-loop { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ms-muted); cursor: pointer; } .ms-transport-spacer { flex: 1 1 auto; } .ms-zoom { display: inline-flex; align-items: center; gap: 4px; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); } /* ---- Professional timeline ---- */ .ms-timeline { flex: 0 0 auto; height: 210px; border-top: 1px solid var(--ms-border); background: var(--ms-panel); display: flex; flex-direction: column; position: relative; overflow: hidden; } .ms-tl-body { flex: 1 1 auto; display: flex; min-height: 0; position: relative; } /* left sticky gutter with layer labels */ .ms-tl-gutter { flex: 0 0 176px; width: 176px; border-right: 1px solid var(--ms-border); background: var(--ms-elev); display: flex; flex-direction: column; z-index: 6; } .ms-tl-gutter-head { height: 26px; flex: 0 0 auto; display: flex; align-items: center; padding: 0 12px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-muted); border-bottom: 1px solid var(--ms-border); } .ms-tl-gutter-list { flex: 1 1 auto; overflow: hidden; } .ms-tl-gutter-row { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); cursor: pointer; color: var(--ms-text, #e8e5df); transition: background 0.12s; } .ms-tl-gutter-row:hover { background: rgba(255, 255, 255, 0.04); } .ms-tl-gutter-row.selected { background: rgba(212, 175, 110, 0.14); box-shadow: inset 3px 0 0 var(--ms-accent); } .ms-tl-gutter-row.dim { opacity: 0.45; } .ms-tl-gutter-ic { font-size: 11px; color: var(--ms-accent); width: 14px; text-align: center; } .ms-tl-gutter-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* right scroll area (ruler + lanes share horizontal scroll) */ .ms-tl-scroll { flex: 1 1 auto; position: relative; overflow: auto; } .ms-tl-canvas { position: relative; min-width: 100%; } .ms-tl-ruler { position: sticky; top: 0; height: 26px; background: var(--ms-elev); border-bottom: 1px solid var(--ms-border); z-index: 4; } .ms-tl-tick { position: absolute; top: 15px; bottom: 0; border-left: 1px solid rgba(255, 255, 255, 0.06); } .ms-tl-tick.maj { top: 8px; border-left-color: rgba(255, 255, 255, 0.22); } .ms-tl-tlabel { position: absolute; top: 3px; transform: translateX(3px); font-size: 9.5px; font-variant-numeric: tabular-nums; color: var(--ms-muted); pointer-events: none; white-space: nowrap; } .ms-tl-tracks { position: relative; } .ms-tl-track { position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .ms-tl-track:nth-child(even) { background: rgba(255, 255, 255, 0.015); } .ms-tl-track.selected { background: rgba(212, 175, 110, 0.08); } .ms-tl-seg { position: absolute; top: 8px; bottom: 8px; border-radius: 5px; opacity: 0.92; } .ms-tl-seg-entrance { background: linear-gradient(90deg, #3b82f6, #60a5fa); } .ms-tl-seg-idle { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); } .ms-tl-seg-exit { background: linear-gradient(90deg, #f472b6, #fb7185); } .ms-tl-seg-track { top: 11px; bottom: 11px; background: linear-gradient(90deg, rgba(212, 175, 110, 0.28), rgba(212, 175, 110, 0.16)); border: 1px solid rgba(212, 175, 110, 0.4); border-radius: 6px; } .ms-tl-kf { position: absolute; top: 50%; width: 9px; height: 9px; margin-left: -5px; transform: translateY(-50%) rotate(45deg); background: var(--ms-accent); border: 1px solid #0a0a0a; border-radius: 2px; z-index: 3; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); pointer-events: none; } /* Draggable timeline bars (entrance / exit / baked track) */ .ms-tl-drag { cursor: grab; z-index: 2; } .ms-tl-drag:active { cursor: grabbing; } .ms-tl-drag:hover { filter: brightness(1.18); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); } .ms-tl-hdl { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 4; } .ms-tl-hdl-l { left: -2px; border-radius: 5px 0 0 5px; } .ms-tl-hdl-r { right: -2px; border-radius: 0 5px 5px 0; } .ms-tl-drag:hover .ms-tl-hdl { background: rgba(255, 255, 255, 0.35); } /* Snap guide line (shows while a dragged bar edge locks to another edge/playhead) */ .ms-tl-snapline { position: absolute; top: 0; width: 0; border-left: 1px dashed #7dd3fc; z-index: 6; pointer-events: none; filter: drop-shadow(0 0 4px rgba(125, 211, 252, 0.7)); } /* Compact icon-only toolbar buttons (undo/redo) */ .ms-btn-icon { padding: 0.42rem 0.6rem; } .ms-btn-icon:disabled { opacity: 0.35; cursor: default; } .ms-tl-playhead { position: absolute; top: 0; width: 2px; background: var(--ms-accent); z-index: 7; cursor: ew-resize; box-shadow: 0 0 8px rgba(212, 175, 110, 0.6); } .ms-tl-playhead-cap { position: absolute; top: -1px; left: -6px; width: 14px; height: 12px; background: var(--ms-accent); clip-path: polygon(0 0, 100% 0, 50% 100%); } .ms-tl-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ms-muted); font-size: 12.5px; } /* ---- Inspector ---- */ .ms-insp-tabs { display: flex; border-bottom: 1px solid var(--ms-border); position: sticky; top: 0; background: var(--ms-panel); z-index: 3; } .ms-insp-tab { flex: 1; padding: 11px 8px; border: 0; background: transparent; color: var(--ms-muted); font-size: 12px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .ms-insp-tab.active { color: var(--ms-fg); border-bottom-color: var(--ms-accent); } .ms-insp-pane { display: none; padding: 14px; } .ms-insp-pane.active { display: block; } .ms-insp-empty { color: var(--ms-muted); font-size: 12.5px; text-align: center; padding: 30px 12px; } .ms-insp-group { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ms-accent); font-weight: 700; margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--ms-border); } .ms-insp-group:first-child { margin-top: 0; } .ms-field { display: block; margin-bottom: 11px; } .ms-field > span { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ms-muted); margin-bottom: 5px; } .ms-field > span b { color: var(--ms-fg); font-weight: 600; } .ms-field input[type='text'], .ms-field input[type='number'], .ms-field select { width: 100%; background: var(--ms-bg); border: 1px solid var(--ms-border); color: var(--ms-fg); border-radius: 7px; padding: 8px 10px; font-size: 12.5px; outline: none; } .ms-field input:focus, .ms-field select:focus { border-color: var(--ms-border-strong); } .ms-field input[type='range'] { width: 100%; accent-color: var(--ms-accent); } .ms-field input[type='color'] { width: 100%; height: 34px; padding: 2px; background: var(--ms-bg); border: 1px solid var(--ms-border); border-radius: 7px; cursor: pointer; } .ms-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ms-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ms-fg); margin-bottom: 11px; cursor: pointer; } .ms-check input { accent-color: var(--ms-accent); } /* ---- Modal ---- */ .ms-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; } .ms-modal[hidden] { display: none; } .ms-modal-card { width: min(760px, 96vw); max-height: 88vh; background: var(--ms-elev); border: 1px solid var(--ms-border-strong); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; } .ms-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--ms-border); font-weight: 700; } .ms-modal-head button { background: transparent; border: 0; color: var(--ms-muted); font-size: 24px; line-height: 1; cursor: pointer; } .ms-modal-desc { padding: 12px 18px 0; margin: 0; color: var(--ms-muted); font-size: 12.5px; } .ms-modal-code { margin: 12px 18px; flex: 1 1 auto; min-height: 260px; background: var(--ms-bg); border: 1px solid var(--ms-border); color: var(--ms-fg); border-radius: 8px; padding: 12px; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 11.5px; resize: none; white-space: pre; overflow: auto; } .ms-modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 0 18px 16px; } /* ---- Toast ---- */ .ms-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ms-accent); color: #0a0a0a; padding: 10px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; z-index: 300; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .ms-toast[hidden] { display: none; } /* ---- Responsive ---- */ @media (max-width: 1024px) { .ms-body { grid-template-columns: 200px 1fr 260px; } } @media (max-width: 820px) { .ms { height: auto; } .ms-body { grid-template-columns: 1fr; } .ms-layers, .ms-inspector { border: 0; border-top: 1px solid var(--ms-border); } } /* ---- Fullscreen mode ---- */ body.ms-fs-on { overflow: hidden; } body.ms-fs-on .ms { position: fixed; inset: 0; z-index: 5000; height: 100vh; min-height: 100vh; border-radius: 0; border: 0; } /* hide the surrounding dashboard chrome so nothing peeks through */ body.ms-fs-on .ds-sidebar, body.ms-fs-on .ds-topbar, body.ms-fs-on .ds-pagehead, body.ms-fs-on .ds-collapse-fab, body.ms-fs-on .ds-overlay { display: none !important; } body.ms-fs-on .ds-main { padding: 0 !important; margin: 0 !important; } #ms-fullscreen { padding: 8px 10px; } /* ---- Canvas Builder: Motion Studio handoff banner ---- */ .cb-motion-handoff { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; background: var(--cb-elev, #1a1a1a); border: 1px solid var(--cb-border-strong, rgba(255, 255, 255, 0.18)); border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); z-index: 400; font-size: 12.5px; color: var(--cb-fg, #fafafa); max-width: 94vw; } .cb-mh-ico { color: var(--cb-accent, #fff); } .cb-mh-txt { margin-right: 4px; } .cb-mh-txt b { font-weight: 700; } .cb-mh-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--cb-border, rgba(255, 255, 255, 0.1)); background: var(--cb-panel, #111); color: var(--cb-fg, #fafafa); font-size: 12px; font-weight: 600; cursor: pointer; } .cb-mh-btn:hover { border-color: var(--cb-border-strong, rgba(255, 255, 255, 0.18)); background: var(--cb-bg, #0a0a0a); } .cb-mh-x { background: transparent; border: 0; color: var(--cb-muted, #8a8a8a); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; } .cb-mh-x:hover { color: var(--cb-fg, #fafafa); } /* ---- Canvas Builder: motion layer preview + handoff primary button ---- */ .cb-motion-host { background: transparent; } .cb-motion-badge { position: absolute; bottom: 4px; right: 4px; width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 10px; pointer-events: none; } .cb-mh-btn.cb-mh-primary { background: var(--cb-accent, #fff); color: #0a0a0a; border-color: var(--cb-accent, #fff); } .cb-mh-btn.cb-mh-primary:hover { filter: brightness(0.92); background: var(--cb-accent, #fff); } /* checkout: no payment methods placeholder */ .co-pay-none { padding: 0.8rem 1rem; border: 1px dashed rgba(148, 163, 184, 0.4); border-radius: 10px; font-size: 0.85rem; color: var(--ink-soft, #64748b); } .co-pay-none i { margin-right: 0.4rem; }