/* =========================================================================== modern.css — Jaxie "warm cream" design system (2026-06-21). Steve approved this aesthetic via mockup_modern.html and mockup_thumbnail_wizard.html. All new templates use these `m-*` classes; legacy templates keep their own selectors so nothing collides. Load this AFTER style.css so order-based specificity goes to modern. =========================================================================== */ :root { --m-bg: #F5F1E8; --m-bg-soft: #EDE7D9; --m-card: #FFFFFF; --m-ink: #1A1714; --m-ink-soft: #5C5750; --m-ink-mute: #8E8780; --m-rule: #E6DFD0; --m-rule-soft: #F0EADA; --m-cta: #1A1714; --m-cta-ink: #F5F1E8; --m-pink: #FF4D7A; --m-pink-soft: #FFE5EC; --m-orange: #FF8A3B; --m-orange-soft: #FFE9D6; --m-teal: #16C0A5; --m-teal-soft: #D7F4EE; --m-blue: #3D8BFF; --m-blue-soft: #DCE9FF; --m-yellow: #F4C95A; --m-yellow-soft: #FBEFCC; --m-purple: #8E7BFF; --m-purple-soft: #E5DEFF; /* 2026-06-24 Steve: pink/orange gradient = the app accent for UI chrome (selected pills, active states, focus rings). Render-side emphasis color is unchanged — brand profiles still drive caption colors. */ --m-accent: #FF4D7A; --m-accent-2: #FF8A3B; --m-accent-soft: #FFE5EC; --m-accent-grad: linear-gradient(135deg, #FF8A3B 0%, #FF4D7A 100%); --m-accent-glow: 0 6px 18px -6px rgba(255,77,122,0.55); --m-radius-card: 18px; --m-radius-pill: 999px; --m-shadow-card: 0 1px 0 rgba(26,23,20,0.04), 0 8px 28px -16px rgba(26,23,20,0.18); --m-shadow-hover: 0 1px 0 rgba(26,23,20,0.06), 0 16px 36px -16px rgba(26,23,20,0.22); --m-font-display: "Manrope", "Inter", system-ui, -apple-system, sans-serif; --m-font-body: "Fredoka", "Nunito", system-ui, -apple-system, sans-serif; } /* ---- Modern page body wrapper. Add class="m-page" to ---- */ body.m-page { background: var(--m-bg); color: var(--m-ink); font-family: var(--m-font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.m-page .container, body.m-page .m-shell { max-width: none; margin: 0 auto; padding: 24px 32px 120px; /* Shift content right of the fixed left sidebar so it doesn't slide under. */ padding-left: calc(var(--m-sidebar-w, 232px) + 32px); padding-right: 32px; } /* Narrow modifier kept for forms / readable text — still capped tight. */ body.m-page .m-shell.narrow { max-width: 1080px; } /* MOBILE: collapse sidebar, edge-padding, stack wizard layouts. */ @media (max-width: 720px) { body.m-page .container, body.m-page .m-shell { padding-left: 16px; padding-right: 16px; padding-top: 76px; } /* Stepper labels become shorter pill stacks on small screens. */ .m-stepper { flex-wrap: wrap; gap: 6px; } .m-step-node { padding: 6px 12px 6px 6px; font-size: 12px; } .m-step-rail { width: 10px; } /* Generate-step cards collapse to single column. */ .m-quality-grid { grid-template-columns: 1fr; } .m-template-grid { grid-template-columns: 1fr 1fr; } .m-library-grid { grid-template-columns: 1fr; } /* Cards eat less horizontal padding so text breathes. */ .m-card { padding: 22px 18px; } .m-step-title { font-size: 30px; } .m-title { font-size: 32px; } /* Profile dropdown right-edge alignment. */ .m-profile-menu { right: 0; left: auto; } } @media (max-width: 480px) { .m-template-grid { grid-template-columns: 1fr; } .m-mode-tiles { grid-template-columns: 1fr; } .m-stepper .m-step-node span:not(.m-num) { display: none; } .m-step-title { font-size: 26px; } } /* ====================== LEFT SIDEBAR ====================== */ :root { --m-sidebar-w: 232px; } .m-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--m-sidebar-w); background: var(--m-bg-soft); border-right: 1px solid var(--m-rule); padding: 22px 14px 18px; display: flex; flex-direction: column; z-index: 50; } .m-side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-family: var(--m-font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--m-ink); text-decoration: none; border-bottom: 1px solid var(--m-rule); margin-bottom: 14px; } .m-side-brand-name { white-space: nowrap; } .m-brand-wordmark { height: 26px; width: auto; display: block; } .m-side-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; } .m-side-bottom { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--m-rule); display: flex; flex-direction: column; gap: 4px; } .m-side-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--m-ink-soft); font-weight: 600; font-size: 14px; background: transparent; border: 0; font-family: inherit; cursor: pointer; width: 100%; text-align: left; transition: background 0.15s, color 0.15s; } .m-side-item:hover { background: var(--m-card); color: var(--m-ink); } .m-side-item.active { background: var(--m-ink); color: var(--m-bg); } .m-side-item svg { flex: 0 0 auto; } /* Create group: collapsible submenu */ .m-side-group { display: flex; flex-direction: column; } .m-side-trigger { width: 100%; } .m-side-chev { margin-left: auto; transition: transform 0.15s; } .m-side-group.open .m-side-chev { transform: rotate(180deg); } .m-side-submenu { display: none; margin-left: 18px; padding: 4px 0 4px 16px; border-left: 2px solid var(--m-rule); flex-direction: column; gap: 2px; } .m-side-group.open .m-side-submenu { display: flex; } .m-side-subitem { padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--m-ink-soft); transition: background 0.15s, color 0.15s; } .m-side-subitem:hover { background: var(--m-card); color: var(--m-ink); } .m-side-subitem.active { background: var(--m-ink); color: var(--m-bg); } /* ====================== TOP-RIGHT THIN BAR ====================== */ .m-topbar-thin { position: fixed; top: 0; right: 0; left: var(--m-sidebar-w); display: flex; align-items: center; gap: 12px; padding: 14px 28px; background: var(--m-bg); border-bottom: 1px solid var(--m-rule); z-index: 40; } body.m-page .m-shell, body.m-page .container { padding-top: 84px; } @media (max-width: 720px) { .m-sidebar { display: none; } .m-topbar-thin { left: 0; padding-left: 16px; } } /* Hide the legacy + old top bar on modern pages. */ [data-bp-tab], .m-sidebar [data-bp-tab] { font-family: inherit; } /* Hide the legacy topnav on modern pages — they use m-topbar instead. */ body.m-page > header.topbar { display: none; } /* ====================== TOPBAR ====================== */ .m-topbar { display: flex; align-items: center; gap: 16px; padding: 14px 28px 18px; border-bottom: 1px solid var(--m-rule); max-width: 1240px; margin: 0 auto; } .m-brand { display: flex; align-items: center; gap: 10px; font-family: var(--m-font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; text-decoration: none; color: var(--m-ink); } .m-brand-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--m-ink); color: var(--m-bg); display: grid; place-items: center; font-weight: 800; /* 2026-06-25: brand mark is now "VC" — tightened size + letter-spacing so two chars sit comfortably in the same 32px square. */ font-size: 13px; letter-spacing: -0.04em; font-family: var(--m-font-display); } .m-topbar-spacer { flex: 1; } .m-nav { display: flex; align-items: center; gap: 6px; } .m-nav a { padding: 8px 16px; border-radius: var(--m-radius-pill); text-decoration: none; color: var(--m-ink-soft); font-weight: 600; font-size: 14px; transition: background 0.15s, color 0.15s; } .m-nav a:hover { background: var(--m-bg-soft); color: var(--m-ink); } .m-nav a.active { background: var(--m-ink); color: var(--m-bg); } .m-icon-btn { width: 38px; height: 38px; border-radius: 12px; background: var(--m-card); border: 1px solid var(--m-rule); display: grid; place-items: center; cursor: pointer; transition: background 0.15s; color: var(--m-ink); } .m-icon-btn:hover { background: var(--m-bg-soft); } .m-icon-btn.accent { background: var(--m-bg-soft); border-color: transparent; } .m-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--m-blue); color: white; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .m-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--m-ink-soft); text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: var(--m-radius-pill); transition: background 0.15s; } .m-back-link:hover { background: var(--m-bg-soft); color: var(--m-ink); } /* ====================== HEADLINES ====================== */ .m-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--m-ink-mute); text-transform: uppercase; margin: 0 0 8px; } .m-title { font-family: var(--m-font-display); font-weight: 800; font-size: 42px; letter-spacing: -0.025em; margin: 0 0 6px; line-height: 1.05; color: var(--m-ink); } .m-title.center { text-align: center; } .m-title.large { font-size: 48px; } .m-sub { color: var(--m-ink-soft); margin: 0 0 22px; font-size: 16px; } .m-sub.center { text-align: center; max-width: 560px; margin-left: auto; margin-right: auto; } /* ====================== CARDS ====================== */ .m-card { background: var(--m-card); border-radius: var(--m-radius-card); box-shadow: var(--m-shadow-card); padding: 28px 32px; } .m-card + .m-card { margin-top: 18px; } .m-card h3 { font-family: var(--m-font-display); font-weight: 800; font-size: 20px; margin: 0 0 6px; letter-spacing: -0.015em; color: var(--m-ink); } .m-card .m-lede { color: var(--m-ink-soft); margin: 0 0 22px; font-size: 14px; } .m-card h3 em { color: var(--m-ink-mute); font-weight: 500; font-style: normal; font-size: 14px; margin-left: 6px; } /* ====================== BUTTONS ====================== */ .m-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--m-radius-pill); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; border: 0; transition: transform 0.1s, background 0.15s; text-decoration: none; white-space: nowrap; } .m-btn:hover { transform: translateY(-1px); } .m-btn.cta { background: var(--m-cta); color: var(--m-cta-ink); } .m-btn.cta:hover { background: #000; } .m-btn.go { background: var(--m-teal); color: white; padding: 16px 32px; font-size: 16px; } .m-btn.go:hover { background: #11a890; } .m-btn.ghost { background: transparent; border: 1px solid var(--m-rule); color: var(--m-ink); } .m-btn.ghost:hover { background: var(--m-bg-soft); } .m-btn.sm { padding: 9px 18px; font-size: 14px; } .m-btn.danger { background: var(--m-pink); color: white; } .m-btn.danger:hover { background: #e63d68; } /* ====================== CHIPS / FILTERS ====================== */ .m-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--m-card); border: 1px solid var(--m-rule); border-radius: var(--m-radius-pill); font-weight: 600; font-size: 14px; color: var(--m-ink); cursor: pointer; transition: background 0.15s; } .m-chip:hover { background: var(--m-bg-soft); } .m-chip.active { background: var(--m-ink); color: var(--m-bg); border-color: var(--m-ink); } .m-chip-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .m-chip-dot.rainbow { background: conic-gradient(var(--m-pink), var(--m-orange), var(--m-yellow), var(--m-teal), var(--m-purple), var(--m-pink)); } .m-chip-dot.pink { background: var(--m-pink); } .m-chip-dot.orange { background: var(--m-orange); } .m-chip-dot.teal { background: var(--m-teal); } .m-chip-dot.blue { background: var(--m-blue); } .m-chip-dot.yellow { background: var(--m-yellow); } .m-chip-dot.purple { background: var(--m-purple); } .m-filter-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 4px 20px; } /* ====================== SEGMENTED TABS ====================== */ .m-segmented { display: inline-flex; gap: 4px; padding: 4px; background: var(--m-bg-soft); border-radius: var(--m-radius-pill); } .m-segmented .m-seg { padding: 8px 18px; border: 0; background: transparent; border-radius: var(--m-radius-pill); font: inherit; font-weight: 600; font-size: 14px; color: var(--m-ink-soft); cursor: pointer; } .m-segmented .m-seg.active { background: var(--m-card); color: var(--m-ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); } /* ====================== ACTION BAR ====================== */ .m-action-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } .m-field-pill { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--m-card); border: 1px solid var(--m-rule); border-radius: var(--m-radius-pill); } .m-field-pill input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; color: var(--m-ink); } .m-field-pill input::placeholder { color: var(--m-ink-mute); } /* ====================== FORM ATOMS ====================== */ .m-field { margin-bottom: 18px; } .m-field:last-child { margin-bottom: 0; } .m-field-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--m-ink); } .m-field-label em { color: var(--m-ink-mute); font-weight: 500; font-style: normal; margin-left: 4px; } .m-field-hint { font-size: 12px; color: var(--m-ink-mute); margin-top: 6px; } .m-input, .m-textarea, .m-select { width: 100%; padding: 14px 18px; background: var(--m-bg); border: 1px solid var(--m-rule); border-radius: 14px; font: inherit; color: var(--m-ink); outline: 0; transition: border-color 0.15s, background 0.15s; } .m-input:focus, .m-textarea:focus, .m-select:focus { border-color: var(--m-ink); background: var(--m-card); } .m-textarea { min-height: 92px; resize: vertical; line-height: 1.5; } .m-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C5750' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; } /* ====================== PILL RADIOS ====================== */ .m-pill-radios { display: flex; flex-wrap: wrap; gap: 8px; } .m-pill-radio { padding: 9px 16px; background: var(--m-bg); border: 1px solid var(--m-rule); border-radius: var(--m-radius-pill); font-size: 13px; font-weight: 600; color: var(--m-ink-soft); cursor: pointer; user-select: none; } .m-pill-radio:hover { background: var(--m-bg-soft); } .m-pill-radio.active { background: var(--m-ink); color: var(--m-bg); border-color: var(--m-ink); } /* ====================== STEPPER ====================== */ .m-stepper { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 40px; } .m-step-node { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; background: var(--m-card); border: 1px solid var(--m-rule); border-radius: var(--m-radius-pill); font-size: 13px; font-weight: 700; color: var(--m-ink-mute); cursor: pointer; transition: background 0.15s; } .m-step-node .m-num { width: 26px; height: 26px; background: var(--m-bg-soft); border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--m-ink-mute); } .m-step-node.done { color: var(--m-ink); } .m-step-node.done .m-num { background: var(--m-teal); color: white; } .m-step-node.active { background: var(--m-ink); color: var(--m-bg); border-color: var(--m-ink); } .m-step-node.active .m-num { background: var(--m-bg); color: var(--m-ink); } .m-step-rail { width: 28px; height: 2px; background: var(--m-rule); border-radius: 2px; } .m-step-rail.done { background: var(--m-teal); } .m-step-header { text-align: center; margin-bottom: 36px; } .m-step-eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-ink-mute); margin-bottom: 12px; } .m-step-title { font-family: var(--m-font-display); font-weight: 800; font-size: 44px; letter-spacing: -0.025em; margin: 0 0 10px; line-height: 1.05; } .m-step-sub { color: var(--m-ink-soft); font-size: 16px; margin: 0; max-width: 580px; margin-left: auto; margin-right: auto; } /* ====================== WIZARD FOOTER ====================== */ .m-wizard-footer { display: flex; align-items: center; gap: 14px; padding: 22px 0 0; margin-top: 6px; border-top: 1px solid var(--m-rule); } .m-wizard-footer .m-btn:not(.cta):not(.go):not(.danger) { margin-right: auto; } .m-wizard-footer .m-btn.cta, .m-wizard-footer .m-btn.go { margin-left: auto; } /* ====================== LIBRARY CARD GRID ====================== */ .m-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .m-vid-card { background: var(--m-card); border-radius: var(--m-radius-card); box-shadow: var(--m-shadow-card); overflow: hidden; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; position: relative; } .m-vid-card:hover { transform: translateY(-2px); box-shadow: var(--m-shadow-hover); } .m-vid-thumb { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, #2a2622, #1a1714); display: grid; place-items: center; overflow: hidden; } .m-vid-thumb.r-916 { aspect-ratio: 9/16; } .m-vid-thumb.r-11 { aspect-ratio: 1/1; } .m-vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .m-vid-badge { position: absolute; top: 12px; left: 12px; padding: 5px 10px; background: rgba(255,255,255,0.95); border-radius: var(--m-radius-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--m-ink); display: inline-flex; align-items: center; gap: 6px; z-index: 2; } .m-vid-badge .dot { width: 7px; height: 7px; border-radius: 50%; } .m-vid-duration { position: absolute; bottom: 12px; right: 12px; padding: 5px 10px; background: rgba(26,23,20,0.7); color: white; border-radius: var(--m-radius-pill); font-size: 12px; font-weight: 600; z-index: 2; } .m-vid-info { padding: 16px 18px 18px; border-left: 4px solid transparent; } .m-vid-card.accent-pink .m-vid-info { border-left-color: var(--m-pink); } .m-vid-card.accent-blue .m-vid-info { border-left-color: var(--m-blue); } .m-vid-card.accent-teal .m-vid-info { border-left-color: var(--m-teal); } .m-vid-card.accent-yellow .m-vid-info { border-left-color: var(--m-yellow); } .m-vid-card.accent-purple .m-vid-info { border-left-color: var(--m-purple); } .m-vid-card.accent-orange .m-vid-info { border-left-color: var(--m-orange); } .m-vid-title { font-family: var(--m-font-display); font-weight: 700; font-size: 16px; margin: 0 0 6px; letter-spacing: -0.01em; line-height: 1.25; color: var(--m-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .m-vid-meta { display: flex; align-items: center; gap: 6px; color: var(--m-ink-mute); font-size: 13px; font-weight: 500; } .m-vid-meta .sep { opacity: 0.5; } .m-vid-actions { display: flex; gap: 8px; margin-top: 12px; } .m-mini-btn { padding: 6px 12px; border: 1px solid var(--m-rule); border-radius: var(--m-radius-pill); background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--m-ink-soft); cursor: pointer; text-decoration: none; } .m-mini-btn:hover { background: var(--m-bg-soft); color: var(--m-ink); } .m-mini-btn.primary { background: var(--m-ink); color: var(--m-bg); border-color: var(--m-ink); } .m-mini-btn.danger { color: var(--m-pink); } .m-mini-btn.danger:hover { background: var(--m-pink-soft); } /* ====================== TEMPLATE / TILE GRID (wizard step 2) ====================== */ .m-mode-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 880px; /* keep the row from spanning ultra-wide */ margin: 0 auto; } .m-mode-tile { padding: 14px 14px 12px; background: var(--m-card); border: 1.5px solid #D4CBB6; border-radius: 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s; text-align: left; font: inherit; color: var(--m-ink); box-shadow: 0 1px 0 rgba(26,23,20,0.03); } .m-mode-tile:hover { border-color: var(--m-ink-soft); transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(26,23,20,0.12); } .m-mode-tile.active { background: var(--m-card); border-color: var(--m-ink); box-shadow: 0 0 0 3px rgba(26,23,20,0.08); transform: none; } /* Dark mode: borders use a lighter warm tone so they show on dark-cream. */ [data-theme="dark"] .m-mode-tile { border-color: #4A4234; box-shadow: none; } [data-theme="dark"] .m-mode-tile:hover { border-color: var(--m-ink-soft); } [data-theme="dark"] .m-mode-tile.active { border-color: var(--m-cta); box-shadow: 0 0 0 3px rgba(245,241,232,0.08); } .m-mode-tile .m-mode-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--m-bg-soft); display: grid; place-items: center; margin-bottom: 10px; color: var(--m-ink); } .m-mode-tile .m-mode-ic svg { width: 20px; height: 20px; } .m-mode-tile.active .m-mode-ic { background: var(--m-ink); color: var(--m-bg); } .m-mode-tile h4 { font-family: var(--m-font-display); font-weight: 800; font-size: 14px; margin: 0 0 3px; letter-spacing: -0.01em; } .m-mode-tile p { font-size: 12px; color: var(--m-ink-mute); margin: 0; line-height: 1.35; } /* Reused for thumbnail-templates grid (Step 2 of wizard). */ .m-template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 720px) { .m-template-grid, .m-mode-tiles { grid-template-columns: 1fr 1fr; } } /* Quality side-by-side picker (Step 3) */ .m-quality-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; } .m-quality-card { padding: 22px; background: var(--m-bg); border: 2px solid var(--m-rule); border-radius: 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; font: inherit; color: var(--m-ink); text-align: left; display: block; width: 100%; } .m-quality-card:hover { border-color: var(--m-ink-soft); } .m-quality-card.active { border-color: var(--m-ink); background: var(--m-card); box-shadow: 0 0 0 3px rgba(26,23,20,0.06); } .m-qtag { display: inline-block; padding: 4px 10px; border-radius: var(--m-radius-pill); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: var(--m-bg-soft); color: var(--m-ink-soft); margin-bottom: 12px; } .m-quality-card.active .m-qtag { background: var(--m-ink); color: var(--m-bg); } .m-quality-card.recommended .m-qtag { background: var(--m-teal); color: white; } .m-quality-card h4 { font-family: var(--m-font-display); font-weight: 800; font-size: 18px; margin: 0 0 6px; } .m-quality-card .m-qprice { font-size: 13px; font-weight: 600; color: var(--m-ink-soft); } .m-quality-card .m-qnote { font-size: 12px; color: var(--m-ink-mute); margin-top: 10px; line-height: 1.4; } /* Dropzone for reference images */ .m-dropzone { padding: 28px; border: 2px dashed var(--m-rule); border-radius: 14px; background: var(--m-bg); text-align: center; color: var(--m-ink-soft); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .m-dropzone:hover { border-color: var(--m-ink-soft); background: var(--m-bg-soft); } .m-dropzone .m-dz-ic { width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 12px; background: var(--m-card); display: grid; place-items: center; } .m-dropzone .m-dz-title { font-weight: 700; color: var(--m-ink); margin-bottom: 4px; } .m-dropzone .m-dz-hint { font-size: 12px; color: var(--m-ink-mute); } /* Avatar chips (Step 2) */ .m-avatar-strip { display: flex; gap: 12px; flex-wrap: wrap; } .m-avatar-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: var(--m-ink-soft); } .m-avatar-chip .m-av { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--m-blue), var(--m-purple)); border: 3px solid transparent; transition: border-color 0.15s, transform 0.1s; overflow: hidden; } .m-avatar-chip .m-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .m-avatar-chip:hover .m-av { transform: scale(1.05); } .m-avatar-chip.active .m-av { border-color: var(--m-ink); } .m-avatar-chip .m-av-name { font-size: 11px; font-weight: 600; } .m-avatar-chip.active { color: var(--m-ink); } .m-avatar-chip.active .m-av-name { font-weight: 700; } .m-avatar-chip.add .m-av { background: var(--m-bg-soft); display: grid; place-items: center; color: var(--m-ink-mute); font-size: 22px; font-weight: 700; } /* Cost summary card */ .m-cost-card { background: var(--m-bg-soft); border-radius: 14px; padding: 18px 22px; display: flex; align-items: center; gap: 16px; } .m-cost-card .m-cic { width: 40px; height: 40px; background: var(--m-card); border-radius: 12px; display: grid; place-items: center; color: var(--m-teal); } .m-cost-card .m-ctitle { font-family: var(--m-font-display); font-weight: 800; font-size: 14px; margin: 0 0 2px; } .m-cost-card .m-csub { font-size: 12px; color: var(--m-ink-soft); margin: 0; } .m-cost-card .m-cprice { margin-left: auto; font-family: var(--m-font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; } /* Concept review rows (Step 3 results) */ .m-concept-grid { display: flex; flex-direction: column; gap: 14px; } .m-concept-row { padding: 16px 18px; background: var(--m-bg); border-radius: 12px; } .m-concept-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--m-ink-mute); text-transform: uppercase; margin-bottom: 6px; } .m-concept-value { font-size: 14px; margin: 0; color: var(--m-ink); font-weight: 500; } /* Result thumb grid (Step 3 final output) */ .m-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .m-thumb-grid > * { background: var(--m-card); border-radius: var(--m-radius-card); box-shadow: var(--m-shadow-card); overflow: hidden; } /* Progress card / status hints */ .m-progress { padding: 20px 24px; background: var(--m-card); border-radius: var(--m-radius-card); border-left: 4px solid var(--m-teal); margin-bottom: 18px; } .m-progress h3 { font-family: var(--m-font-display); font-weight: 800; font-size: 16px; margin: 0 0 10px; } .m-progress ol { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.7; } .m-progress .m-est { font-size: 12px; color: var(--m-ink-mute); margin: 12px 0 0; } .m-status { display: inline-block; padding: 6px 14px; border-radius: var(--m-radius-pill); background: var(--m-bg-soft); font-size: 12px; font-weight: 600; color: var(--m-ink-soft); vertical-align: middle; } .m-status.ok { background: var(--m-teal-soft); color: #0e7d6a; } .m-status.err, .m-status.error { background: var(--m-pink-soft); color: #b8254c; } /* Auto-hide status pills whose text content is empty so we don't carry an inline display:none on every span in the templates. */ .m-status:empty { display: none !important; } /* Hide/show utility (preserve same class used by old code, scoped) */ .m-hidden { display: none !important; } /* Modal */ .m-modal { position: fixed; inset: 0; background: rgba(26,23,20,0.45); display: grid; place-items: center; z-index: 100; padding: 24px; } .m-modal-content { background: var(--m-card); border-radius: var(--m-radius-card); padding: 32px; max-width: 540px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.3); } .m-modal-content.wide { max-width: 880px; } .m-modal-content h2 { font-family: var(--m-font-display); font-weight: 800; font-size: 22px; margin: 0 0 4px; letter-spacing: -0.015em; } .m-btn-x { border: 0; background: transparent; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 20px; color: var(--m-ink-mute); } .m-btn-x:hover { background: var(--m-bg-soft); color: var(--m-ink); } .m-row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* Empty state */ .m-empty { padding: 48px 24px; text-align: center; color: var(--m-ink-mute); font-size: 14px; } /* 2026-06-23 Steve: admin-only cost / dollar mentions. Tenants will be on a credit system and shouldn't see raw API $ amounts. Default: hidden. Steve flips it via localStorage `vd_admin = '1'` (the inline init script in m_topbar.html applies body.admin-mode when set). */ body:not(.admin-mode) .cost-admin { display: none !important; } /* =========================================================================== DARK MODE — triggered by `` (set by legacy theme.js). Warm-dark palette: deep brown-ink background, cream text. Keeps the warm personality of the cream mode instead of going cold gray. =========================================================================== */ [data-theme="dark"] { --m-bg: #16130F; --m-bg-soft: #221E18; --m-card: #1F1B16; --m-ink: #F5F1E8; --m-ink-soft: #C8C1B3; --m-ink-mute: #8E867A; --m-rule: #332D24; --m-rule-soft: #28231D; --m-cta: #F5F1E8; --m-cta-ink: #16130F; --m-pink-soft: #3A1E29; --m-orange-soft: #3A2818; --m-teal-soft: #14322D; --m-blue-soft: #1A2745; --m-yellow-soft: #382F1A; --m-purple-soft: #2A2342; /* Dark variant of the accent — keep gradient + glow identical, soften the fill so it sits well on the dark cream-brown bg. */ --m-accent-soft: #3A1E29; --m-accent-glow: 0 6px 18px -6px rgba(255,77,122,0.45); --m-shadow-card: 0 1px 0 rgba(0,0,0,0.5), 0 8px 28px -16px rgba(0,0,0,0.7); --m-shadow-hover: 0 1px 0 rgba(0,0,0,0.6), 0 16px 36px -16px rgba(0,0,0,0.85); } /* Dark mode select chevron — flip stroke color so it shows on dark bg. */ [data-theme="dark"] .m-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C8C1B3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* Dark mode tweaks for elements that swap on hover/active. */ [data-theme="dark"] .m-btn.cta { background: var(--m-cta); color: var(--m-cta-ink); } [data-theme="dark"] .m-btn.cta:hover { background: #fff; } [data-theme="dark"] .m-chip.active { background: var(--m-cta); color: var(--m-cta-ink); border-color: var(--m-cta); } [data-theme="dark"] .m-pill-radio.active { background: var(--m-cta); color: var(--m-cta-ink); border-color: var(--m-cta); } [data-theme="dark"] .m-step-node.active { background: var(--m-cta); color: var(--m-cta-ink); border-color: var(--m-cta); } [data-theme="dark"] .m-step-node.active .m-num { background: var(--m-cta-ink); color: var(--m-cta); } [data-theme="dark"] .m-nav a.active { background: var(--m-cta); color: var(--m-cta-ink); } /* Quality card on dark when active: keep cream-on-dark feel. */ [data-theme="dark"] .m-quality-card.active { background: var(--m-card); border-color: var(--m-cta); } [data-theme="dark"] .m-quality-card.active .m-qtag { background: var(--m-cta); color: var(--m-cta-ink); } /* Mode tile (Step 1) active state — cream bg, dark icon container. */ [data-theme="dark"] .m-mode-tile.active { background: var(--m-card); border-color: var(--m-cta); } [data-theme="dark"] .m-mode-tile.active .m-mode-ic { background: var(--m-cta); color: var(--m-cta-ink); } [data-theme="dark"] .m-mode-ic-yt, [data-theme="dark"] .m-mode-tile.active .m-mode-ic-yt { background: transparent !important; } /* Cost-saving hint (yellow softer in dark) */ [data-theme="dark"] .m-cost-card .m-cic { color: var(--m-teal); } /* Modal overlay deeper in dark. */ [data-theme="dark"] .m-modal { background: rgba(0,0,0,0.7); } /* Brand mark inverts in dark so the V doesn't disappear. */ [data-theme="dark"] .m-brand-mark { background: var(--m-cta); color: var(--m-cta-ink); } /* 2026-06-23: legacy h1 + section-banner-heading on m-page templates inherit the modern display-font look so all titles read consistently. Also kill the legacy blue-italic inside titles — the em becomes invisible (inherits color/weight/style) so "Forge a hook" reads as one solid line instead of "Forge a [blue]hook[/blue]". */ body.m-page h1, body.m-page .section-banner-heading { font-family: var(--m-font-display) !important; font-weight: 800 !important; font-size: 42px !important; letter-spacing: -0.025em !important; color: var(--m-ink) !important; line-height: 1.05 !important; text-align: inherit; } body.m-page h1 em, body.m-page .section-banner-heading em, body.m-page .m-title em { color: inherit !important; font-style: normal !important; font-weight: inherit !important; font-family: inherit !important; } /* Section-banner sub-text becomes the modern m-sub. */ body.m-page .section-banner-sub { color: var(--m-ink-soft) !important; font-size: 16px !important; margin: 0 0 22px !important; } body.m-page .section-banner { text-align: left !important; background: transparent !important; border: 0 !important; padding: 0 0 8px !important; margin: 0 0 18px !important; } /* Sidebar + dropdowns + top thin bar dark mode. */ [data-theme="dark"] .m-sidebar { background: var(--m-bg-soft); border-right-color: var(--m-rule); } [data-theme="dark"] .m-side-brand { color: var(--m-ink); border-bottom-color: var(--m-rule); } [data-theme="dark"] .m-side-item { color: var(--m-ink-soft); } [data-theme="dark"] .m-side-item:hover { background: var(--m-card); color: var(--m-ink); } [data-theme="dark"] .m-side-item.active { background: var(--m-cta); color: var(--m-cta-ink); } [data-theme="dark"] .m-side-bottom { border-top-color: var(--m-rule); } [data-theme="dark"] .m-side-submenu { border-left-color: var(--m-rule); } [data-theme="dark"] .m-side-subitem { color: var(--m-ink-soft); } [data-theme="dark"] .m-side-subitem:hover { background: var(--m-card); color: var(--m-ink); } [data-theme="dark"] .m-side-subitem.active { background: var(--m-cta); color: var(--m-cta-ink); } [data-theme="dark"] .m-topbar-thin { background: var(--m-bg); border-bottom-color: var(--m-rule); } /* Profile dropdown menu (top-right avatar) */ [data-theme="dark"] .m-profile-menu { background: var(--m-card); border-color: var(--m-rule); } [data-theme="dark"] .m-profile-head { border-bottom-color: var(--m-rule); } [data-theme="dark"] .m-profile-name { color: var(--m-ink); } [data-theme="dark"] .m-profile-email { color: var(--m-ink-mute); } [data-theme="dark"] .m-profile-item { color: var(--m-ink); } [data-theme="dark"] .m-profile-item:hover { background: var(--m-bg-soft); } [data-theme="dark"] .m-profile-rule { background: var(--m-rule); } /* Generic Create dropdown menu used in older topbar variants — kept in case any page still renders it. */ [data-theme="dark"] .m-dropdown-trigger { color: var(--m-ink-soft); } [data-theme="dark"] .m-dropdown-trigger:hover { background: var(--m-bg-soft); color: var(--m-ink); } [data-theme="dark"] .m-dropdown-trigger.active { background: var(--m-cta); color: var(--m-cta-ink); } [data-theme="dark"] .m-dropdown-menu { background: var(--m-card); border-color: var(--m-rule); } [data-theme="dark"] .m-dropdown-menu a { color: var(--m-ink); } [data-theme="dark"] .m-dropdown-menu a:hover { background: var(--m-bg-soft); } [data-theme="dark"] .m-dropdown-menu a.active { background: var(--m-cta); color: var(--m-cta-ink); } /* =========================================================================== 2026-06-24 — ACCENT SWEEP Steve picked the Magic Pills mockup (orange→pink gradient). Below = the reusable .m-pill component + override of every selected/active UI state in the app so the accent is consistent everywhere a user can pick. Render-side colors (caption emphasis, brand profile defaults) untouched. =========================================================================== */ /* ---- .m-pill — multi-select chip with optional check dot ---- */ .m-pill-group { display: flex; gap: 10px; flex-wrap: wrap; } .m-pill { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--m-card); border: 1.5px solid var(--m-rule); border-radius: 999px; font-family: var(--m-font-body); font-size: 14px; font-weight: 500; color: var(--m-ink-soft); cursor: pointer; transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; position: relative; user-select: none; } .m-pill:hover { border-color: var(--m-ink-mute); color: var(--m-ink); } .m-pill-strong { font-family: var(--m-font-display); font-weight: 700; letter-spacing: -0.01em; } .m-pill-sub { font-size: 12px; opacity: 0.7; } .m-pill-check { width: 16px; height: 16px; border: 1.5px solid var(--m-rule); border-radius: 999px; background: var(--m-card); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; flex: 0 0 auto; transition: all 200ms ease; } /* Hidden native input inside a .m-pill label drives state via :has() */ .m-pill input[type="checkbox"], .m-pill input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } /* ACTIVE — covers all three drivers: .active class, :has(:checked), and aria. */ .m-pill.active, .m-pill:has(input:checked), .m-pill[aria-pressed="true"] { background: var(--m-accent-grad); color: #fff; border-color: transparent; box-shadow: var(--m-accent-glow), 0 1px 0 rgba(0,0,0,0.04); } .m-pill.active .m-pill-sub, .m-pill:has(input:checked) .m-pill-sub, .m-pill[aria-pressed="true"] .m-pill-sub { opacity: 0.88; } .m-pill.active .m-pill-check, .m-pill:has(input:checked) .m-pill-check, .m-pill[aria-pressed="true"] .m-pill-check { background: #fff; color: var(--m-accent); border-color: #fff; } .m-pill.active .m-pill-check::after, .m-pill:has(input:checked) .m-pill-check::after, .m-pill[aria-pressed="true"] .m-pill-check::after { content: "✓"; } /* ---- App-wide accent sweep for existing selected/active states. These previously used ink-on-cream. Now the gradient = the selection signal. Navigation chrome (.m-side-item, .m-nav, .m-dropdown-menu) stays ink so the identity rail keeps its anchor — selection IN content gets the accent. ---- */ .m-chip.active, .m-segmented .m-seg.active, .m-pill-radio.active, .m-step-node.active, .m-avatar-chip.active .m-av-name { /* avatar gets accent text, not gradient bg */ } .m-chip.active { background: var(--m-accent-grad); color: #fff; border-color: transparent; box-shadow: var(--m-accent-glow); } .m-segmented .m-seg.active { background: var(--m-accent-grad); color: #fff; border-color: transparent; box-shadow: var(--m-accent-glow); } .m-pill-radio.active { background: var(--m-accent-grad); color: #fff; border-color: transparent; box-shadow: var(--m-accent-glow); } .m-step-node.active { background: var(--m-accent-grad); color: #fff; border-color: transparent; box-shadow: var(--m-accent-glow); } .m-step-node.active .m-num { background: rgba(255,255,255,0.22); color: #fff; } /* Mode + quality cards keep their ink fill (they're big surfaces — gradient would overwhelm) but trade their dark ring for the accent ring. */ .m-mode-tile.active { border-color: var(--m-accent); box-shadow: 0 0 0 4px var(--m-accent-soft); } .m-mode-tile.active .m-mode-ic { background: var(--m-accent-grad); color: #fff; } .m-quality-card.active { border-color: var(--m-accent); box-shadow: 0 0 0 4px var(--m-accent-soft); } .m-quality-card.active .m-qtag { background: var(--m-accent-grad); color: #fff; } .m-avatar-chip.active .m-av { border-color: var(--m-accent); } /* Dark mode keeps the SAME gradient — pink/orange punches through the dark bg better than the cta-light fill the rest of dark mode uses. Override the earlier dark rules that forced cta-fill. */ [data-theme="dark"] .m-chip.active, [data-theme="dark"] .m-segmented .m-seg.active, [data-theme="dark"] .m-pill-radio.active, [data-theme="dark"] .m-step-node.active { background: var(--m-accent-grad); color: #fff; border-color: transparent; } [data-theme="dark"] .m-step-node.active .m-num { background: rgba(255,255,255,0.22); color: #fff; } [data-theme="dark"] .m-mode-tile.active, [data-theme="dark"] .m-quality-card.active { border-color: var(--m-accent); box-shadow: 0 0 0 4px var(--m-accent-soft); background: var(--m-card); } [data-theme="dark"] .m-mode-tile.active .m-mode-ic, [data-theme="dark"] .m-quality-card.active .m-qtag { background: var(--m-accent-grad); color: #fff; } /* =========================================================================== 2026-06-24 — FORM CONTROL POLISH Legacy style.css had `select { padding: 13px 22px; border-radius: pill }` and `.form-grid label { display: grid }` — both forced oversized, dropdown- tall controls AND broke the magic-pill horizontal alignment. Below = higher-specificity overrides that ONLY apply when body.m-page is set, so legacy non-modern pages keep their old chrome. =========================================================================== */ /* --- pills inside form-grid must be horizontal flex, not grid columns --- */ body.m-page .form-grid label.m-pill { display: inline-flex; align-items: center; gap: 10px; } /* --- modern compact selects + inputs sized to read like the mockup --- */ body.m-page .form-grid select, body.m-page .form-grid input[type="text"], body.m-page .form-grid input[type="email"], body.m-page .form-grid input[type="password"], body.m-page .form-grid input[type="url"], body.m-page .form-grid input[type="number"], body.m-page .form-grid input[type="search"], body.m-page .form-grid textarea { padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--m-rule); background: var(--m-card); font-family: var(--m-font-body); font-size: 14px; color: var(--m-ink); outline: none; width: 100%; transition: border-color 180ms ease, box-shadow 180ms ease; } body.m-page .form-grid textarea { line-height: 1.5; padding: 12px 14px; resize: vertical; } body.m-page .form-grid input[type="file"] { padding: 10px 14px; border-radius: 12px; font-size: 13px; background: var(--m-bg-soft); border: 1.5px dashed var(--m-rule); } body.m-page .form-grid select:hover, body.m-page .form-grid input:hover:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), body.m-page .form-grid textarea:hover { border-color: var(--m-ink-mute); } body.m-page .form-grid select:focus, body.m-page .form-grid input:focus:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), body.m-page .form-grid textarea:focus { border-color: var(--m-accent); box-shadow: 0 0 0 4px var(--m-accent-soft); } /* Custom chevron — replace the heavy filled triangle from style.css */ body.m-page .form-grid select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; } [data-theme="dark"] body.m-page .form-grid select { background-image: url("data:image/svg+xml;utf8,"); } /* --- modern range sliders (sfx volume, motion speed) --- */ body.m-page .form-grid input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--m-rule); border-radius: 999px; outline: none; margin: 8px 0; cursor: pointer; } body.m-page .form-grid input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--m-card); border: 2.5px solid var(--m-accent); border-radius: 999px; cursor: pointer; box-shadow: 0 2px 6px rgba(255,77,122,0.35); transition: transform 140ms ease; } body.m-page .form-grid input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); } body.m-page .form-grid input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: var(--m-card); border: 2.5px solid var(--m-accent); border-radius: 999px; cursor: pointer; box-shadow: 0 2px 6px rgba(255,77,122,0.35); } /* --- color picker compact look --- */ body.m-page .form-grid input[type="color"] { width: 44px; height: 36px; padding: 2px; border-radius: 10px; border: 1.5px solid var(--m-rule); background: var(--m-card); cursor: pointer; } /* --- label-text — make the field caption modern + compact --- */ body.m-page .form-grid .label-text { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-ink-mute); margin: 0 0 4px; } body.m-page .form-grid .label-text em { font-weight: 500; letter-spacing: 0; text-transform: none; font-style: normal; opacity: 0.85; margin-left: 4px; } /* --- helper / hint text in form-grid is too prominent in legacy css --- */ body.m-page .form-grid .hint, body.m-page .form-grid .hint-tight { font-size: 12px; color: var(--m-ink-mute); line-height: 1.5; } /* --- file input: looks more like a modern drop target --- */ body.m-page .form-grid input[type="file"]::-webkit-file-upload-button, body.m-page .form-grid input[type="file"]::file-selector-button { margin-right: 12px; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--m-ink); color: var(--m-cta-ink); font-family: var(--m-font-display); font-weight: 600; font-size: 12px; cursor: pointer; } /* =========================================================================== 2026-06-26 — UNIVERSAL LOADING SYSTEM Reusable spinner + progress bar with Jaxie pink/orange gradient. Drop into any page using these classes — no JS dependency for visuals. =========================================================================== */ /* === Spinner (3 sizes) === */ .vc-spinner, .vc-spinner-sm, .vc-spinner-lg { display: inline-block; border-radius: 999px; border-style: solid; border-color: rgba(255,77,122,0.18); border-top-color: var(--m-accent, #FF4D7A); animation: vcSpin 0.8s linear infinite; flex: 0 0 auto; vertical-align: middle; } .vc-spinner-sm { width: 14px; height: 14px; border-width: 2px; } .vc-spinner { width: 22px; height: 22px; border-width: 2.5px; } .vc-spinner-lg { width: 40px; height: 40px; border-width: 3.5px; } @keyframes vcSpin { to { transform: rotate(360deg); } } /* Spinner color variants */ .vc-spinner.ink, .vc-spinner-sm.ink, .vc-spinner-lg.ink { border-color: rgba(26,23,20,0.15); border-top-color: var(--m-ink, #1A1714); } .vc-spinner.light, .vc-spinner-sm.light, .vc-spinner-lg.light { border-color: rgba(255,255,255,0.25); border-top-color: #fff; } /* === Inline loading row (spinner + text) === */ .vc-loading-inline { display: inline-flex; align-items: center; gap: 10px; font-family: var(--m-font-body, "Fredoka", sans-serif); font-size: 14px; color: var(--m-ink-soft, #5C5750); } .vc-loading-inline.dim { color: var(--m-ink-mute, #8E8780); font-size: 13px; } /* === Centered block loader (for sections) === */ .vc-loading-block { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; gap: 14px; background: var(--m-bg-soft, #EDE7D9); border-radius: 14px; font-family: var(--m-font-body, "Fredoka", sans-serif); font-size: 14px; color: var(--m-ink-soft, #5C5750); text-align: center; } .vc-loading-block p { margin: 0; line-height: 1.4; } /* === Progress bar (linear) === */ .vc-progress-bar { width: 100%; height: 6px; background: var(--m-rule, #E6DFD0); border-radius: 999px; overflow: hidden; position: relative; } .vc-progress-bar.thick { height: 10px; } .vc-progress-bar.thin { height: 3px; } .vc-progress-fill { height: 100%; background: linear-gradient(135deg, var(--m-accent-2, #FF8A3B) 0%, var(--m-accent, #FF4D7A) 100%); border-radius: 999px; transition: width 280ms ease-out; position: relative; } /* Indeterminate variant (no known progress %) */ .vc-progress-fill.indeterminate { width: 40% !important; animation: vcProgressSweep 1.4s cubic-bezier(.6,0,.4,1) infinite; position: absolute; top: 0; left: 0; } @keyframes vcProgressSweep { 0% { left: -40%; } 100% { left: 100%; } } /* === Button loading state — pair with a button === */ .vc-btn-loading { position: relative; pointer-events: none; color: transparent !important; } .vc-btn-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 999px; border: 2.5px solid rgba(255,255,255,0.3); border-top-color: #fff; animation: vcSpin 0.8s linear infinite; } /* Loading state on light buttons (ghost) — use ink color instead */ .vc-btn-loading.ink-spinner::after { border-color: rgba(26,23,20,0.2); border-top-color: var(--m-ink, #1A1714); } /* === Skeleton shimmer (for placeholder cards) === */ .vc-skeleton { background: linear-gradient(90deg, var(--m-bg-soft, #EDE7D9) 0%, var(--m-rule-soft, #F0EADA) 50%, var(--m-bg-soft, #EDE7D9) 100%); background-size: 200% 100%; animation: vcShimmer 1.4s linear infinite; border-radius: 8px; display: inline-block; } @keyframes vcShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* === Dotted "thinking" indicator (for AI work) === */ .vc-dots { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; } .vc-dots span { width: 5px; height: 5px; border-radius: 999px; background: var(--m-accent, #FF4D7A); animation: vcDot 1.2s ease-in-out infinite; } .vc-dots span:nth-child(2) { animation-delay: 0.15s; } .vc-dots span:nth-child(3) { animation-delay: 0.30s; } @keyframes vcDot { 0%, 100% { transform: scale(0.6); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } }