/* ===================================================================== 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(.2,.8,.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,.45); --ring:rgba(34,211,238,.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,.45); --ring:rgba(56,189,248,.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,.45); --ring:rgba(251,191,36,.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,.4); --ring:rgba(52,211,153,.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,.3); --ring:rgba(99,116,145,.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,.4); --ring:rgba(148,163,184,.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),.10), transparent 60%), radial-gradient(960px 560px at 108% 4%, rgba(var(--p-3),.10), transparent 60%), linear-gradient(180deg,#f7f9fd,#eef2f9); --app-panel:rgba(255,255,255,.78); --app-panel-2:rgba(248,250,254,.92); --app-border:rgba(99,116,145,.18); --app-border-strong:rgba(99,116,145,.30); --app-text:#0f172a; --app-text-muted:#475569; --app-text-dim:#6b7689; --app-shadow:0 18px 48px -22px rgba(15,23,42,.30); --app-blur:16px; --lp-bg:#f7f9fd; --lp-panel:rgba(255,255,255,.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,.12); --gold:rgb(var(--p-2)); --gold-soft:rgba(var(--p-2),.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); } /* ===================================================================== 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),.16), transparent 60%), radial-gradient(1000px 620px at 110% 0%, rgba(var(--p-3),.14), transparent 60%), radial-gradient(900px 600px at 50% 120%, rgba(var(--p-2),.12), transparent 60%), linear-gradient(180deg,#0a0f1a,#070b14); --app-panel:rgba(15,23,36,.78); --app-panel-2:rgba(20,28,42,.85); --app-border:rgba(120,140,180,.14); --app-border-strong:rgba(140,170,220,.24); --app-text:#e6edf7; --app-text-muted:#8a96aa; --app-text-dim:#5f6a7e; --app-shadow:0 24px 60px -20px rgba(0,0,0,.7); --lp-bg:#0a0f1a; --lp-panel:rgba(15,23,36,.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,.16); --gold:rgb(var(--p-2)); --gold-soft:rgba(var(--p-2),.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); } /* ===================================================================== 5) GLOBAL SURFACE ===================================================================== */ body{ background:var(--app-bg-grad) fixed !important; color:var(--app-text); font-family:var(--font-ui); } *::selection{background:rgba(var(--p-2),.28)} @keyframes appFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .ds-main,.hero,.auth-card,.se-studio{animation:appFade .5s var(--ease) both} /* ===================================================================== 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),.30); background: radial-gradient(120% 100% at 0% 0%, rgba(var(--h),.12), transparent 55%), var(--app-panel); box-shadow:var(--app-shadow), inset 0 1px 0 rgba(var(--h),.14); } .bento-card[data-hue]:hover{ transform:translateY(-5px); border-color:rgba(var(--h),.5); box-shadow:0 26px 60px -24px rgba(var(--h),.5), inset 0 1px 0 rgba(var(--h),.2); } [data-hue] .bento-ico{ background:rgba(var(--h),.16);color:rgb(var(--h)); box-shadow:inset 0 0 0 1px rgba(var(--h),.25); } [data-hue] .bento-num{color:var(--app-text)} [data-hue] .bento-bar span{background:linear-gradient(90deg,rgb(var(--h)),rgba(var(--h),.55))} [data-hue] .bento-tag{color:rgba(var(--h),.95)} /* KPI / stat cards reuse the same hue language */ .rsvp-stat[data-hue]{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)} .rsvp-stat[data-hue]:hover{transform:translateY(-4px);border-color:rgba(var(--h),.5);box-shadow:0 22px 50px -24px rgba(var(--h),.45)} .rsvp-stat[data-hue] .rs-num{color:rgb(var(--h))} .rsvp-stat[data-hue] .rs-label{color:var(--app-text-muted)} /* ===================================================================== 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:.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:.92rem;letter-spacing:.01em; text-decoration:none;cursor:pointer;box-shadow:0 12px 30px -10px var(--glow); transition:transform .35s var(--ease),box-shadow .35s,background .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,.4),transparent);transform:skewX(-18deg);opacity:0} .cta-grad:hover::after{animation:btnSheen .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:.5rem .9rem;align-items:center; font-family:var(--font-ui);font-size:.74rem;color:var(--app-text-muted);margin:.2rem 0 1.1rem} .hue-legend .hl{display:inline-flex;align-items:center;gap:.4rem} .hue-legend .dot{width:10px;height:10px;border-radius:50%;background:rgb(var(--h));box-shadow:0 0 0 3px rgba(var(--h),.18)} /* ===================================================================== 11) ADAPTIVE CHART VARS ===================================================================== */ :root{ --chart-grid:rgba(99,116,145,.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,.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),.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,.92),rgba(10,15,26,.96)) !important;border-right:1px solid var(--app-border)} html.dark .ds-topbar{background:rgba(10,15,26,.7) !important;border-bottom:1px solid var(--app-border)} html.dark .nav{background:rgba(10,15,26,.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:.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(.98);pointer-events:none;transition:.25s var(--ease)} .theme-pop.open{opacity:1;transform:none;pointer-events:auto} .theme-pop h4{font:600 .7rem/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--app-text-dim);margin:.1rem 0 .7rem} .theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem} .theme-opt{display:flex;align-items:center;gap:.55rem;padding:.55rem .6rem;border-radius:11px;cursor:pointer; border:1px solid var(--app-border);background:var(--app-panel);color:var(--app-text); font:500 .8rem/1 var(--font-ui);transition:.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),.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,.12)} .theme-opt .sw i{flex:1;height:100%} .theme-row{display:flex;gap:.5rem;margin-top:.7rem} .theme-mode{flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.55rem;border-radius:11px; border:1px solid var(--app-border);background:var(--app-panel);color:var(--app-text);cursor:pointer;font:600 .76rem var(--font-ui);transition:.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),.3)} #theme-cat-btn{margin-left:.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:.3rem;padding:.3rem;border-radius:13px;border:1px solid var(--app-border);background:var(--app-panel)} .theme-mode-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem;border-radius:10px;border:none; background:transparent;color:var(--app-text-muted);cursor:pointer;font:600 .8rem var(--font-ui);transition:.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:.85rem;margin-top:.6rem} .theme-cardp{position:relative;text-align:left;cursor:pointer;border-radius:15px;padding:.95rem; border:1px solid var(--app-border);background:var(--app-panel);transition:.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),.35),var(--app-shadow)} .theme-swatch{display:flex;height:34px;border-radius:10px;overflow:hidden;margin-bottom:.7rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .theme-swatch i{flex:1;height:100%} .theme-cardp-name{display:block;font:700 .92rem var(--font-display);color:var(--app-text);letter-spacing:-.01em} .theme-cardp-desc{display:block;font:500 .76rem/1.35 var(--font-ui);color:var(--app-text-muted);margin-top:.2rem} .theme-cardp-check{position:absolute;top:.7rem;right:.7rem;width:24px;height:24px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff;background:var(--grad-cta); opacity:0;transform:scale(.6);transition:.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:-.01em} .lp-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1rem;border-radius:999px; font:600 .72rem/1 var(--font-ui);letter-spacing:.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),.2); animation:lpPulse 2.4s ease-in-out infinite} @keyframes lpPulse{0%,100%{box-shadow:0 0 0 3px rgba(var(--p-1),.18)}50%{box-shadow:0 0 0 7px rgba(var(--p-1),.06)}} .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:.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:.3s var(--ease); } .steps .step:hover,.features .feature:hover{transform:translateY(-5px);border-color:rgba(var(--h,var(--p-2)),.5); box-shadow:0 26px 60px -24px rgba(var(--h,var(--p-2)),.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:.5rem 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)),.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)),.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),.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),.18), transparent 55%), radial-gradient(120% 120% at 100% 100%, rgba(var(--p-3),.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),.08) !important; backdrop-filter:blur(var(--app-blur));-webkit-backdrop-filter:blur(var(--app-blur)); animation:appFade .5s var(--ease) both} .auth-h{color:var(--app-text)} .auth-h.grad-text{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em} .auth-sub{text-align:center;color:var(--app-text-muted);margin:-1.2rem 0 1.8rem;font-size:.92rem} .auth-form2 input{background:rgba(255,255,255,.04) !important;border-color:var(--app-border) !important;color:var(--app-text) !important} html:not(.dark) .auth-form2 input{background:rgba(0,0,0,.02) !important} .auth-form2 input:focus{border-color:rgba(var(--p-2),.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:.02em;transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .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:.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),.10);color:rgb(var(--p-2));cursor:pointer;display:flex;align-items:center;justify-content:center; transition:transform .2s var(--ease),background .2s} .auth-theme-btn:hover{transform:translateY(-2px) rotate(-8deg);background:rgba(var(--p-2),.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),.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,.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,.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,.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,.55) !important;border-color:var(--app-border) !important} html.dark .se-canvas-url{background:rgba(255,255,255,.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),.14) !important;color:rgb(var(--p-2)) !important} .se-input:focus{border-color:rgba(var(--p-2),.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),.35) !important} /* light-mode editor keeps clean paper but with themed accents (above rules apply) */ /* ===================================================================== 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,.04) !important} html.dark .tut-art{background:linear-gradient(135deg,rgba(var(--p-1),.14),rgba(var(--p-3),.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),.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),.30)) !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),.55) !important;box-shadow:0 24px 56px -26px var(--glow) !important} .mini:hover,.auth-form input:focus{border-color:rgba(var(--p-2),.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,.04) !important;border-color:var(--app-border) !important;color:var(--app-text) !important} html:not(.dark) .adm-input{background:rgba(0,0,0,.02) !important} .adm-input:focus{border-color:rgba(var(--p-2),.6) !important;box-shadow:0 0 0 3px var(--ring) !important} .adm-chip{background:rgba(var(--p-2),.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),.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),.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,.04), transparent), var(--app-panel) !important; border-bottom:1px solid var(--app-border) !important; box-shadow:0 1px 0 rgba(255,255,255,.04), 0 10px 30px -24px rgba(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,.03), transparent), rgba(11,16,27,.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:.65rem;min-width:0; width:auto;flex-shrink:0} .ds-brand{display:flex;align-items:center;gap:.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),.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:.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:-.015em;white-space:nowrap} .ds-brand-tag{font:600 .58rem/1 var(--font-ui);text-transform:uppercase;letter-spacing:.24em; color:rgb(var(--p-2)) !important;margin-top:.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),.6) !important;box-shadow:0 0 0 3px var(--ring) !important} .ds-top-right{margin-left:auto;display:flex;align-items:center;gap:.9rem} .ds-toggle,.ds-burger{color:var(--app-text-muted);border-color:var(--app-border);transition:.2s var(--ease)} .ds-toggle:hover,.ds-burger:hover{color:rgb(var(--p-2)) !important;border-color:rgba(var(--p-2),.5) !important; background:rgba(var(--p-2),.10) !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,.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 .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),.08), transparent 55%), radial-gradient(120% 50% at 0% 100%, rgba(var(--p-3),.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,.6), 0 2px 8px -4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.04); transition:width .28s cubic-bezier(.4,0,.2,1),flex-basis .28s cubic-bezier(.4,0,.2,1),padding .28s cubic-bezier(.4,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 .5rem 1rem !important; } html.dark .ds-sidebar{background: radial-gradient(140% 60% at 0% 0%, rgba(var(--p-1),.10), transparent 55%), radial-gradient(120% 50% at 0% 100%, rgba(var(--p-3),.09), transparent 60%), linear-gradient(180deg, rgba(15,22,36,.85), rgba(9,13,22,.9)) !important} /* give the main column matching breathing room so it doesn't hug the panel */ .ds-main{padding-left:1.8rem} /* ---- 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,.5), inset 0 0 0 1px rgba(255,255,255,.04); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); transition:transform .25s var(--ease),background .2s,color .2s,box-shadow .2s,border-color .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:.8rem} /* ---- 20.5 Nav: groups, links, glowing active pill ------------------- */ .ds-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:.2rem .15rem; scrollbar-width:thin;scrollbar-color:rgba(var(--p-2),.3) transparent} .ds-nav::-webkit-scrollbar{width:6px} .ds-nav::-webkit-scrollbar-thumb{background:rgba(var(--p-2),.3);border-radius:6px} .ds-group-title{font:700 .62rem/1 var(--font-ui) !important;letter-spacing:.18em;text-transform:uppercase; color:var(--app-text-dim) !important;padding:.2rem .85rem;margin:1rem 0 .35rem !important} .ds-nav>div:first-child .ds-group-title{margin-top:.2rem !important} .ds-link{ position:relative;display:flex;align-items:center;gap:.8rem; padding:.62rem .85rem;margin:.12rem 0;border-radius:12px; color:var(--app-text-muted);font:500 .88rem/1 var(--font-ui);text-decoration:none; transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease); } .ds-link:hover{background:rgba(var(--p-2),.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:.98rem;flex-shrink:0;transition:color .2s} .ds-link:hover .ds-ico{color:rgb(var(--p-2))} .ds-link.active{ background:linear-gradient(100deg, rgba(var(--p-2),.22), rgba(var(--p-2),.05)) !important; color:rgb(var(--p-2)) !important;font-weight:600; box-shadow:inset 0 0 0 1px rgba(var(--p-2),.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:-.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),.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:.6rem;border-top:1px solid var(--app-border)} .ds-logout{margin:.3rem 0 0 !important;color:#f87171 !important} .ds-logout .ds-ico{color:#f87171 !important} .ds-logout:hover{background:rgba(248,113,113,.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:.6rem 0;margin:.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:.55rem .55rem .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:.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:.4rem .75rem;border-radius:9px; font-size:.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:-.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} .ds-collapse-fab{display:none !important} .ds-top-left{width:auto !important} .ds-search-top{max-width:none} .ds-sidebar,.ds-shell.collapsed .ds-sidebar{ position:fixed;left:0;top:0;height:100vh !important; width:var(--side-w) !important;flex-basis:var(--side-w) !important; z-index:80;transform:translateX(-100%);transition:transform .3s var(--ease); padding:1rem .75rem !important; } .ds-sidebar.open{transform:translateX(0);box-shadow:0 0 80px rgba(0,0,0,.5)} /* 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:.62rem !important;height:auto;border-top:none; letter-spacing:.18em !important;padding:.2rem .85rem !important;margin:1rem 0 .35rem !important} .ds-shell.collapsed .ds-link{justify-content:flex-start;padding:.62rem .85rem} } @media(max-width:640px){ .hue-legend{font-size:.7rem} .cta-grad{padding:.85rem 1.5rem;font-size:.86rem} .ds-acct-meta{display:none} } /* ===================================================================== 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:.4rem; font:800 .54rem/1 var(--font-ui);letter-spacing:.16em; padding:.22rem .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),.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:.5rem} .owner-kpi-top{display:flex;align-items:center;gap:.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),.16);color:rgb(var(--h));font-size:.95rem} .owner-kpi-label{font:600 .72rem/1.1 var(--font-ui);color:var(--app-text-muted);text-transform:uppercase;letter-spacing:.08em} .owner-kpi-value{font:800 1.7rem/1 var(--font-display);color:var(--app-text);letter-spacing:-.02em} .owner-kpi-sub{font:500 .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:.55rem} .owner-panel-head h2 i{color:rgb(var(--h,var(--p-2)))} .owner-panel-tag{font:600 .68rem/1 var(--font-ui);color:var(--app-text-dim);text-transform:uppercase;letter-spacing:.1em} .owner-panel-link{font:600 .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:.1rem} .owner-li{display:flex;align-items:center;gap:.7rem;padding:.6rem .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),.15);color:rgb(var(--p-2));font:700 .72rem/1 var(--font-ui)} .owner-li-main{flex:1;min-width:0;color:var(--app-text);font:500 .88rem/1.2 var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .owner-li-val{color:var(--app-text-muted);font:700 .85rem/1 var(--font-ui);flex-shrink:0} .owner-empty{color:var(--app-text-dim);font:500 .85rem/1.4 var(--font-ui);padding:.8rem .2rem;text-align:center} /* Status pills */ .owner-pill{font:600 .66rem/1 var(--font-ui);padding:.28rem .5rem;border-radius:999px;text-transform:capitalize;flex-shrink:0} .owner-pill-paid{background:rgba(34,197,94,.16);color:#22c55e} .owner-pill-pending{background:rgba(245,158,11,.16);color:#f59e0b} .owner-pill-failed,.owner-pill-cancelled{background:rgba(239,68,68,.16);color:#ef4444} .owner-pill-new{background:rgba(99,102,241,.16);color:#818cf8} /* Quick actions */ .owner-quick{margin-bottom:1.4rem} .owner-quick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem} .owner-quick-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .6rem;border-radius:14px; background:rgba(var(--p-2),.06);border:1px solid var(--app-border);color:var(--app-text-muted); text-decoration:none;transition:.2s var(--ease);font:600 .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),.12);color:var(--app-text);transform:translateY(-2px); border-color:rgba(var(--p-2),.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),.2), rgba(var(--p-3),.12));color:rgb(var(--p-2));font-size:1.9rem; box-shadow:inset 0 0 0 1px rgba(var(--p-2),.2)} .owner-soon h2{font:800 1.5rem/1.1 var(--font-display);color:var(--app-text);margin-bottom:.6rem;letter-spacing:-.02em} .owner-soon-blurb{color:var(--app-text-muted);font:400 .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:.55rem;text-align:left;margin:0 auto 1.6rem} .owner-soon-list li{color:var(--app-text-muted);font:500 .9rem/1.2 var(--font-ui);display:flex;align-items:center;gap:.6rem} .owner-soon-list li i{color:rgb(var(--p-2));font-size:.82rem} .owner-soon-badge{display:inline-block;font:700 .7rem/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase; padding:.5rem .9rem;border-radius:999px;background:rgba(var(--p-2),.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:.82rem;cursor:pointer;transition:.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:.88rem;cursor:pointer;text-decoration:none;transition:.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),.32)} .ts-btn-ghost{background:transparent} .ts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px} .ts-card{border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:.2s} .ts-card:hover{transform:translateY(-4px)} .ts-card-thumb{display:block;aspect-ratio:16/10;background:linear-gradient(135deg,rgba(var(--h),.18),rgba(var(--h),.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),.5)} .ts-card-body{padding:14px 16px;flex:1} .ts-card-top{display:flex;gap:6px;margin-bottom:8px} .ts-status{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:999px;font-weight:600} .ts-status-draft{background:rgba(120,120,120,.16);color:#777} .ts-status-published{background:rgba(34,197,94,.16);color:#16a34a} .ts-status-archived{background:rgba(239,68,68,.14);color:#dc2626} .ts-tier{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:999px;font-weight:600;background:rgba(212,175,55,.18);color:#b8860b} .ts-card-name{font-size:1.05rem;margin:0 0 4px;color:var(--app-text)} .ts-card-desc{font-size:.82rem;color:var(--app-text-soft);margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ts-card-meta{display:flex;gap:14px;font-size:.74rem;color:var(--app-text-soft)} .ts-card-meta i{opacity:.6;margin-right:4px} .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:.78rem;cursor:pointer;text-decoration:none;transition:.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),.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:.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),.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:.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:.72rem;color:rgb(var(--h));background:rgba(var(--h),.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:.98rem;color:var(--app-text)} .fx-card p{font-size:.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:.68rem;background:var(--app-bg);border:1px solid var(--app-border);padding:2px 7px;border-radius:5px;color:var(--app-text-soft)} /* ---- Editor ---- */ .ts-editor{display:grid;grid-template-columns:1fr 400px;gap:18px;align-items:start} .ts-edit-main{background:var(--app-surface);border:1px solid var(--app-border);border-radius:16px;overflow:hidden} .ts-tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--app-border);padding:6px 6px 0;background:var(--app-bg)} .ts-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:11px 15px;border:0;background:transparent;color:var(--app-text-soft);font-size:.84rem;cursor:pointer;border-radius:10px 10px 0 0;white-space:nowrap;transition:.15s} .ts-tab i{font-size:.82rem} .ts-tab:hover{color:var(--app-text)} .ts-tab.active{background:var(--app-surface);color:rgb(var(--h));font-weight:600;box-shadow:0 -2px 0 rgb(var(--h)) inset} .ts-panes{padding:22px} .ts-pane{display:none} .ts-pane.active{display:block;animation:tsFade .25s ease} @keyframes tsFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .ts-pane-hint{font-size:.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:.78rem} .ts-field{margin-bottom:14px} .ts-field label{display:block;font-size:.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:.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),.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:.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:.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:.76rem;text-transform:uppercase} .ts-code{width:100%;font-family:ui-monospace,monospace;font-size:.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:.5} .ts-drag{color:var(--app-text-soft);cursor:grab} .ts-section-name{flex:1;font-size:.88rem;color:var(--app-text)} /* switch */ .ts-switch{display:inline-flex;align-items:center;gap:9px;font-size:.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:.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:.2s;box-shadow:0 1px 3px rgba(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:.82rem;text-transform:uppercase;letter-spacing:.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:.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:.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:.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:.8rem;text-align:center;min-height:18px} .ts-save-note.ok{color:#16a34a}.ts-save-note.err{color:#dc2626} @media(max-width:1024px){.ts-editor{grid-template-columns:1fr}.ts-edit-side{position:static}.ts-preview-frame.phone{width:100%;max-width:340px}} @media(max-width:560px){.ts-row2{grid-template-columns:1fr}} .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,.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:.72rem;text-transform:uppercase;letter-spacing:.06em;opacity:.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),.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:.9rem;color:inherit;opacity:.65;display:inline-flex;gap:7px;align-items:center} .etsy-tab:hover{opacity:.9;background:rgba(var(--h),.08)} .etsy-tab.active{opacity:1;background:rgba(var(--h),.14);box-shadow:inset 0 -2px 0 rgb(var(--h))} .etsy-pane{display:none;animation:etsyFade .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,.04);border:1px solid rgba(var(--h),.2);border-radius:10px;padding:8px 11px;color:inherit;font-size:.88rem;min-width:120px} .etsy-input:focus{outline:none;border-color:rgb(var(--h));box-shadow:0 0 0 3px rgba(var(--h),.18)} .etsy-table-wrap{padding:6px;border-radius:14px;overflow-x:auto} .etsy-table{width:100%;border-collapse:collapse;font-size:.86rem} .etsy-table th{text-align:left;padding:10px 12px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;opacity:.65;border-bottom:1px solid rgba(var(--h),.16)} .etsy-table td{padding:11px 12px;border-bottom:1px solid rgba(var(--h),.08);vertical-align:middle} .etsy-table tr:last-child td{border-bottom:0} .etsy-cell-strong{font-weight:600} .etsy-cell-sub{font-size:.74rem;opacity:.6;margin-top:2px} .etsy-empty{text-align:center;padding:26px 12px;opacity:.6} .etsy-mini{margin-top:8px;font-size:.78rem} .etsy-code{font-family:ui-monospace,monospace;background:rgba(var(--h),.12);padding:3px 8px;border-radius:7px;font-weight:600;letter-spacing:.02em} .etsy-code.used{opacity:.45;text-decoration:line-through} .etsy-icon-btn{background:transparent;border:0;cursor:pointer;color:inherit;opacity:.6;padding:4px 6px;border-radius:7px;font-size:.85rem} .etsy-icon-btn:hover{opacity:1;background:rgba(var(--h),.12)} .etsy-del:hover{color:#ef4444;background:rgba(239,68,68,.12)} .etsy-status{min-width:120px;padding:5px 8px;font-size:.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:.8rem;opacity:.7;line-height:1.5;margin:0 0 12px} .etsy-hint code{background:rgba(var(--h),.1);padding:1px 5px;border-radius:5px;font-size:.76rem} .etsy-textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(var(--h),.2);border-radius:10px;padding:11px;color:inherit;font-family:ui-monospace,monospace;font-size:.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:.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),.3);border-radius:14px;padding:28px 16px;cursor:pointer;text-align:center;transition:.2s} .etsy-drop:hover{border-color:rgb(var(--h));background:rgba(var(--h),.06)} .etsy-drop i{font-size:1.6rem;opacity:.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:.85rem;padding:5px 12px;border-radius:999px} .etsy-conn i{font-size:.6rem} .etsy-conn.ok{color:#16a34a;background:rgba(16,163,74,.12)} .etsy-conn.off{color:#f59e0b;background:rgba(245,158,11,.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:.8rem} .etsy-field span{opacity:.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),.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:.82rem;color:inherit;opacity:.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),.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:.74rem;text-transform:uppercase;letter-spacing:.05em;opacity:.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:.72rem;opacity:.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:.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:.55;font-size:.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:.84rem} .an-funnel-head i{opacity:.7;margin-right:5px} .an-funnel-head b{font-variant-numeric:tabular-nums;font-size:.95rem} .an-funnel-bar{height:12px;border-radius:7px;background:rgba(var(--h),.1);overflow:hidden} .an-funnel-bar span{display:block;height:100%;border-radius:7px;transition:width .6s cubic-bezier(.2,.8,.2,1)} .an-funnel-conv{font-size:.7rem;opacity:.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),.06);border-radius:11px;font-size:.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),.18),rgba(var(--h),.04))} .fin-kpi-lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;opacity:.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:.72rem;opacity:.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:.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:.55;font-size:.86rem} .fin-channels{display:flex;flex-direction:column;gap:12px} .fin-ch-head{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:5px} .fin-ch-head small{opacity:.55} .fin-ch-bar{height:11px;border-radius:6px;background:rgba(var(--h),.1);overflow:hidden} .fin-ch-bar span{display:block;height:100%;border-radius:6px;transition:width .6s cubic-bezier(.2,.8,.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:.88rem;border-radius:9px} .fin-led-row b{font-variant-numeric:tabular-nums} .fin-led-total{background:rgba(var(--h),.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:.86rem} .fin-table th{text-align:left;padding:10px 12px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;opacity:.65;border-bottom:1px solid rgba(var(--h),.16)} .fin-table td{padding:11px 12px;border-bottom:1px solid rgba(var(--h),.08);vertical-align:middle} .fin-cell-strong{font-weight:600} .fin-cell-sub{font-size:.74rem;opacity:.6;margin-top:2px} .fin-actions-cell{display:flex;gap:6px;flex-wrap:wrap} .fin-act{padding:5px 11px!important;font-size:.78rem!important} .fin-danger{color:#ef4444!important} .fin-done{opacity:.4} .fin-badge{padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:600;text-transform:capitalize} .fin-pending{background:rgba(245,158,11,.15);color:#f59e0b} .fin-approved{background:rgba(14,165,233,.15);color:#0ea5e9} .fin-paid{background:rgba(22,163,74,.15);color:#16a34a} .fin-rejected{background:rgba(239,68,68,.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),.14);background:rgba(var(--h),.04);color:inherit;transition:.2s} .ord-stage:hover{background:rgba(var(--h),.1)} .ord-stage.active{border-color:rgb(var(--h));background:rgba(var(--h),.14);box-shadow:0 4px 14px rgba(var(--h),.2)} .ord-stage-n{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums} .ord-stage-l{font-size:.76rem;opacity:.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,.04);border:1px solid rgba(var(--h),.2);border-radius:10px;padding:8px 11px;color:inherit;font-size:.86rem;min-width:130px} .ord-input:focus{outline:none;border-color:rgb(var(--h));box-shadow:0 0 0 3px rgba(var(--h),.18)} .ord-table-wrap{padding:6px;border-radius:14px;overflow-x:auto} .ord-table{width:100%;border-collapse:collapse;font-size:.86rem} .ord-table th{text-align:left;padding:10px 12px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;opacity:.65;border-bottom:1px solid rgba(var(--h),.16)} .ord-table td{padding:11px 12px;border-bottom:1px solid rgba(var(--h),.08);vertical-align:middle} .ord-table tr:last-child td{border-bottom:0} .ord-cell-strong{font-weight:600} .ord-cell-sub{font-size:.74rem;opacity:.6;margin-top:2px} .ord-chan{display:inline-flex;gap:5px;align-items:center;font-size:.78rem;font-weight:600;padding:3px 9px;border-radius:7px} .ord-chan-web{background:rgba(99,102,241,.14);color:#6366f1} .ord-chan-etsy{background:rgba(245,118,42,.16);color:#f5762a} .ord-status{min-width:120px;padding:5px 8px;font-size:.8rem} .ord-badge{padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:600;text-transform:capitalize} .ord-pending{background:rgba(245,158,11,.15);color:#f59e0b} .ord-paid{background:rgba(22,163,74,.15);color:#16a34a} .ord-refunded{background:rgba(239,68,68,.15);color:#ef4444} .ord-failed{background:rgba(100,116,139,.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:.72rem; text-transform:uppercase; letter-spacing:.08em; opacity:.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:.5; font-size:.85rem; } .cust-search input { width:100%; padding:9px 12px 9px 32px; border-radius:10px; border:1px solid rgba(var(--h),.25); background:rgba(var(--h),.05); color:inherit; font:inherit; } .cust-select { padding:9px 12px; border-radius:10px; border:1px solid rgba(var(--h),.25); background:rgba(var(--h),.05); color:inherit; font:inherit; } .cust-table-wrap, .fin-table-wrap { overflow-x:auto; } .cust-table { width:100%; border-collapse:collapse; font-size:.9rem; } .cust-table th { text-align:left; padding:10px 12px; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; opacity:.6; border-bottom:1px solid rgba(var(--h),.18); } .cust-table td { padding:11px 12px; border-bottom:1px solid rgba(var(--h),.08); vertical-align:middle; } .cust-row { cursor:pointer; transition:background .15s; } .cust-row:hover { background:rgba(var(--h),.07); } .cust-cell-strong { font-weight:600; } .cust-cell-sub { font-size:.78rem; opacity:.6; } .cust-empty, .aud-empty, .set-empty { text-align:center; padding:26px; opacity:.55; font-size:.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:.72rem; font-weight:600; text-transform:capitalize; } .cust-role-couple { background:rgba(99,102,241,.16); color:#818cf8; } .cust-role-affiliate { background:rgba(236,72,153,.16); color:#ec4899; } .cust-role-admin { background:rgba(245,158,11,.16); color:#f59e0b; } .cust-role-owner { background:rgba(16,185,129,.16); color:#10b981; } .cust-active { background:rgba(16,185,129,.16); color:#10b981; } .cust-suspended { background:rgba(239,68,68,.16); color:#ef4444; } .cust-deleted { background:rgba(148,163,184,.18); color:#94a3b8; } .cust-role-deleted { background:rgba(148,163,184,.18); color:#94a3b8; } .cust-ord-paid { background:rgba(16,185,129,.16); color:#10b981; } .cust-ord-pending { background:rgba(245,158,11,.16); color:#f59e0b; } .cust-ord-refunded, .cust-ord-failed { background:rgba(239,68,68,.16); color:#ef4444; } .cust-inv-published { background:rgba(16,185,129,.16); color:#10b981; } .cust-inv-draft { background:rgba(148,163,184,.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,.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,.35); animation:custSlideIn .22s ease; } @keyframes custSlideIn { from { transform:translateX(40px); opacity:.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),.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),.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:.66rem; opacity:.55; text-transform:uppercase; letter-spacing:.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:.86rem; opacity:.8; } .cust-line { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(var(--h),.08); font-size:.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:.85rem; opacity:.6; max-width:520px; } .set-form { display:grid; gap:20px; } .set-group { border:1px solid rgba(var(--h),.18); border-radius:14px; padding:14px 16px 6px; margin:0; } .set-group legend { padding:0 8px; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; opacity:.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),.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:.92rem; } .set-label small { font-size:.76rem; opacity:.55; max-width:380px; } .set-input { flex:0 0 220px; padding:9px 12px; border-radius:10px; border:1px solid rgba(var(--h),.25); background:rgba(var(--h),.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),.12); } .set-status { font-size:.82rem; opacity:.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,.4); border-radius:999px; transition:.2s; cursor:pointer; } .set-slider:before { content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.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:.5; font-size:.85rem; } .aud-search input { width:100%; padding:9px 12px 9px 32px; border-radius:10px; border:1px solid rgba(var(--h),.25); background:rgba(var(--h),.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),.25); background:transparent; color:inherit; font-size:.78rem; cursor:pointer; transition:.15s; text-transform:capitalize; } .aud-chip:hover { background:rgba(var(--h),.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),.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),.12); z-index:1; font-size:.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:.9rem; } .aud-ent { font-size:.72rem; padding:1px 8px; border-radius:999px; background:rgba(var(--h),.1); opacity:.85; } .aud-line2 { font-size:.78rem; opacity:.62; margin-top:2px; word-break:break-word; } .aud-meta { opacity:.85; } .aud-time { flex:0 0 auto; font-size:.74rem; opacity:.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),.9),rgba(var(--h),.55)); color:#fff; font-size:1.15rem; box-shadow:0 6px 18px rgba(var(--h),.35); } .ms-plan { display:block; font-family:'Fraunces',serif; font-size:1.12rem; font-weight:600; } .ms-expiry { display:block; font-size:.78rem; opacity:.6; margin-top:2px; } .ms-chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .ms-chip { font-size:.74rem; padding:4px 11px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(var(--h),.25); } .ms-chip.ok { color:#10b981; border-color:rgba(16,185,129,.3); background:rgba(16,185,129,.08); } .ms-chip.warn { color:#ef4444; border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.08); } .ms-chip.neutral { opacity:.7; } .ms-upgrade { font-size:.78rem; padding:6px 14px; border-radius:999px; text-decoration:none; color:#fff; background:linear-gradient(135deg,rgb(var(--h)),rgba(var(--h),.7)); display:inline-flex; align-items:center; gap:6px; transition:.15s; box-shadow:0 4px 14px rgba(var(--h),.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:.85rem; } .ms-meterval strong { font-size:1.05rem; } .ms-rem { opacity:.55; font-size:.8rem; } .ms-bar { height:10px; border-radius:999px; background:rgba(var(--h),.14); overflow:hidden; } .ms-bar > span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,rgb(var(--h)),rgba(var(--h),.6)); transition:width .5s cubic-bezier(.4,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:.82rem; text-transform:uppercase; letter-spacing:.06em; opacity:.65; margin:1.6rem 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:.5; font-size:.78rem; text-transform:none; letter-spacing:0; } .rs-replicatoggle { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:.4rem; padding:.85rem 1rem; border-radius:14px; background:rgba(160,125,72,.07); border:1px solid rgba(160,125,72,.18); } .rs-replicatoggle > span { font-size:.9rem; } .rs-replicalink { margin-left:auto; font-size:.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:.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),.14); overflow:hidden; } .cd-ms-bar > span { display:block; height:100%; background:linear-gradient(90deg,rgb(var(--h)),rgba(var(--h),.6)); } .cd-ms-form { display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:14px; background:rgba(var(--h),.06); border:1px solid rgba(var(--h),.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:.76rem; opacity:.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),.22); background:rgba(255,255,255,.04); color:inherit; font-size:.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:.74rem; padding:5px 11px; } .cd-ms-note { width:100%; } .cd-ms-save { align-self:flex-start; } .cd-ms-msg { font-size:.8rem; } .cd-ms-msg.ok { color:#10b981; } .cd-ms-msg.err { color:#ef4444; } .cd-ms-loghead { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; opacity:.55; margin-bottom:8px; display:flex; align-items:center; gap:6px; } .cd-mslog span { font-size:.82rem; } .cust-badge.cust-neutral { background:rgba(160,125,72,.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,.82); backdrop-filter:blur(14px); border-bottom:1px solid rgba(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:.92rem; color:var(--rs-soft); transition:.15s; } .rs-rep-navlinks a:hover { color:var(--rs-ink); } .rs-rep-navcta { padding:.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:.74rem; letter-spacing:.18em; text-transform:uppercase; padding:.45rem 1rem; border-radius:999px; border:1px solid currentColor; opacity:.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:.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:.82rem; opacity:.7; } .rs-rep-cta { text-decoration:none; padding:.85rem 1.7rem; border-radius:999px; font-weight:500; font-size:.95rem; display:inline-flex; align-items:center; gap:.55rem; transition:.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,.06); border-radius:18px; padding:1.8rem 1.4rem; text-align:center; transition:.2s; } .rs-rep-feature:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(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 .5rem; } .rs-rep-feature p { font-size:.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:.74rem; letter-spacing:.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:.6rem 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,.07); border-radius:22px; padding:2.2rem 1.8rem; display:flex; flex-direction:column; transition:.2s; } .rs-rep-plan:hover { transform:translateY(-4px); box-shadow:0 22px 48px rgba(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:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:.35rem .9rem; border-radius:999px; } .rs-rep-plan h3 { font-family:'Fraunces',serif; font-size:1.4rem; font-weight:600; margin: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:.9rem; font-weight:400; opacity:.55; } .rs-rep-feats { list-style:none; padding:0; margin:0 0 1.8rem; display:flex; flex-direction:column; gap:.7rem; flex:1; } .rs-rep-feats li { display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; color:var(--rs-soft); } .rs-rep-feats i { color:var(--rs-accent); margin-top:.25rem; font-size:.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,.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:.18s; } .rs-rep-social:hover { background:var(--rs-accent); color:#fff; transform:translateY(-2px); } .rs-rep-powered { font-size:.78rem; opacity:.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 { --cb-bg: #14151a; --cb-panel: #1c1e26; --cb-elev: #23262f; --cb-border: rgba(255,255,255,.08); --cb-fg: #e8e9ec; --cb-muted: #9aa0ad; --cb-gold: #d4af37; --cb-gold-soft: rgba(212,175,55,.16); --cb-accent: #5E6AD2; --cb-radius: 10px; position: relative; display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 560px; background: var(--cb-bg); border:1px solid var(--cb-border); border-radius: 14px; overflow: hidden; color: var(--cb-fg); font-size: 13px; } /* toolbar */ .cb-toolbar { display:flex; align-items:center; gap: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; } .cb-tb-spacer { flex:1; } .cb-section-label { color:var(--cb-muted); font-size:11px; text-transform:uppercase; letter-spacing:.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:.15s; } .cb-tool:hover { background:var(--cb-gold-soft); border-color:var(--cb-gold); color:#fff; } .cb-tool i { color:var(--cb-gold); } .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:.15s; } .cb-iconbtn:hover:not(:disabled){ background:var(--cb-gold-soft); border-color:var(--cb-gold); } .cb-iconbtn:disabled { opacity:.35; cursor:not-allowed; } .cb-iconbtn.off { color:#f0a; } .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:.15s; } .cb-btn-ghost { background:var(--cb-elev); color:var(--cb-fg); } .cb-btn-ghost:hover { background:#2c2f3a; } .cb-btn-primary { background:linear-gradient(135deg,#d4af37,#b8935a); color:#1a1407; border-color:transparent; } .cb-btn-primary:hover { filter:brightness(1.08); } /* body grid */ .cb-body { flex:1; display:grid; grid-template-columns:230px 1fr 280px; min-height:0; } .cb-left, .cb-right { background:var(--cb-panel); display:flex; flex-direction:column; min-height:0; } .cb-left { border-right:1px solid var(--cb-border); } .cb-right { border-left:1px solid var(--cb-border); } .cb-panel-head { padding:11px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.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:.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:.5; transition:.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; } .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); } /* stage */ .cb-stage { position:relative; overflow:auto; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.03), transparent 60%), repeating-linear-gradient(45deg,#101116 0 10px,#0d0e12 10px 20px); display:flex; flex-direction:column; align-items:center; padding:30px 16px 70px; } .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,.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; } /* 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,.25); } .cb-layer.cb-locked { outline:1px dashed rgba(255,255,255,.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); } /* right panel tabs */ .cb-right-tabs { display:flex; border-bottom:1px solid var(--cb-border); } .cb-rtab { flex:1; background:transparent; border:none; color:var(--cb-muted); padding:11px 8px; font-size:12px; cursor:pointer; border-bottom:2px solid transparent; display:flex; align-items:center; justify-content:center; gap:6px; } .cb-rtab.active { color:var(--cb-fg); border-bottom-color:var(--cb-gold); } .cb-rtab i { font-size:11px; } .cb-rpane { display:none; flex:1; overflow-y:auto; padding:12px; min-height:0; } .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:.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:.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); } /* 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:.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; } /* 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:.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,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(94,106,210,.10) 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,.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); } /* studio editor button */ .ts-btn-canvas { background:linear-gradient(135deg,#5E6AD2,#7c5ad2); color:#fff; } .ts-btn-canvas:hover { filter:brightness(1.08); } @media (max-width: 1100px){ .cb-body { grid-template-columns:1fr; grid-template-rows:auto 1fr auto; } .cb-left, .cb-right { max-height:200px; } .cb { height:auto; } }