/* ========================================================================== SOFTBOOK AI — BENTO DESIGN SYSTEM Load AFTER bootstrap.min.css and BEFORE any page-specific stylesheet. Pure presentation. No IDs are added, removed or renamed here. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS Brand hues are unchanged (#6d5dfc / #46c2ff / #ff7eb3). What changed is where they live: they are now accents on a quiet canvas instead of a full-bleed animated background. That single move is what reads as "professional" rather than "demo". -------------------------------------------------------------------------- */ :root { /* Canvas */ --sb-canvas: #0b0b13; --sb-canvas-2: #101019; /* Tile surfaces — layered, not glassy */ --sb-tile: rgba(255, 255, 255, 0.045); --sb-tile-hover: rgba(255, 255, 255, 0.065); --sb-tile-solid: #14141f; --sb-inset: rgba(255, 255, 255, 0.03); /* Interactive fills — every surface routes through these three, which is what makes the light theme a token swap instead of a second stylesheet. */ --sb-fill-1: rgba(255, 255, 255, 0.03); --sb-fill-2: rgba(255, 255, 255, 0.05); --sb-fill-3: rgba(255, 255, 255, 0.10); /* Hairlines */ --sb-line: rgba(255, 255, 255, 0.09); --sb-line-strong: rgba(255, 255, 255, 0.16); /* Overlays */ --sb-overlay: rgba(6, 6, 11, 0.74); --sb-caret: %23a9adc4; /* Brand */ --sb-violet: #6d5dfc; --sb-violet-soft: #8b7dff; --sb-cyan: #46c2ff; --sb-rose: #ff7eb3; --sb-accent: linear-gradient(100deg, #6d5dfc 0%, #46c2ff 100%); --sb-accent-warm: linear-gradient(100deg, #fc5d68 0%, #af46ff 100%); /* Text */ --sb-text: #f2f3fa; --sb-text-dim: rgba(242, 243, 250, 0.64); --sb-text-faint: rgba(242, 243, 250, 0.42); /* Feedback */ --sb-ok: #3ddc97; --sb-warn: #ffc860; --sb-danger: #ff6b7d; /* Geometry */ --sb-r-lg: 22px; --sb-r-md: 14px; --sb-r-sm: 10px; --sb-gap: 16px; /* Elevation */ --sb-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 40px -24px rgba(0,0,0,0.9); --sb-shadow-lift: 0 1px 0 rgba(255,255,255,0.08) inset, 0 28px 60px -28px rgba(0,0,0,1); /* Motion */ --sb-t: 180ms cubic-bezier(.2,.7,.3,1); /* Back-compat with existing page CSS that references these names */ --brand-1: #6d5dfc; --brand-2: #46c2ff; --brand-3: #ff7eb3; --brand1: #6d5dfc; --brand2: #46c2ff; --brand3: #ff7eb3; } /* -------------------------------------------------------------------------- 1b. LIGHT THEME Applied by the inline snippet in before first paint, so there is no flash of the wrong theme. Dark stays the default. -------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --sb-canvas: #f4f5fa; --sb-canvas-2: #ffffff; --sb-tile: #ffffff; --sb-tile-hover: #ffffff; --sb-tile-solid: #ffffff; --sb-inset: rgba(17, 19, 42, 0.028); --sb-fill-1: rgba(17, 19, 42, 0.030); --sb-fill-2: rgba(17, 19, 42, 0.050); --sb-fill-3: rgba(17, 19, 42, 0.085); --sb-line: rgba(17, 19, 42, 0.11); --sb-line-strong: rgba(17, 19, 42, 0.20); --sb-violet: #5a48f0; --sb-violet-soft: #4b39dd; --sb-cyan: #1d9fe0; --sb-accent: linear-gradient(100deg, #5a48f0 0%, #1d9fe0 100%); --sb-text: #15162a; --sb-text-dim: rgba(21, 22, 42, 0.68); --sb-text-faint: rgba(21, 22, 42, 0.48); --sb-ok: #128a5c; --sb-warn: #a3690a; --sb-danger: #d13b4e; --sb-shadow: 0 1px 2px rgba(17, 19, 42, 0.05), 0 12px 28px -18px rgba(17, 19, 42, 0.35); --sb-shadow-lift: 0 1px 2px rgba(17, 19, 42, 0.07), 0 22px 46px -22px rgba(17, 19, 42, 0.45); --sb-overlay: rgba(232, 234, 244, 0.78); --sb-caret: %235c5f78; } /* Canvas auroras have to lose most of their punch on white or the page reads as a tinted wash rather than a surface. */ :root[data-theme="light"] body::before { background: radial-gradient(760px 520px at 12% -6%, rgba(109, 93, 252, 0.13), transparent 62%), radial-gradient(680px 480px at 92% 4%, rgba(70, 194, 255, 0.09), transparent 60%), radial-gradient(900px 700px at 60% 108%, rgba(255, 126, 179, 0.07), transparent 62%), var(--sb-canvas); } :root[data-theme="light"] body::after { opacity: 0; } /* Tile spot glow */ :root[data-theme="light"] .tile::before { background: radial-gradient(420px 260px at 0% 0%, rgba(109, 93, 252, 0.07), transparent 70%); } /* Chrome that is painted, not tokenised */ :root[data-theme="light"] .navbar.sb-nav, :root[data-theme="light"] .glass-navbar, :root[data-theme="light"] .premium-navbar.scrolled, :root[data-theme="light"] .sb-actionbar { background: rgba(255, 255, 255, 0.88); border-color: var(--sb-line); } :root[data-theme="light"] .logo-text, :root[data-theme="light"] .brand-title, :root[data-theme="light"] .navbar-brand, :root[data-theme="light"] .navbar-toggler { color: var(--sb-text) !important; } :root[data-theme="light"] option { background: #ffffff; color: var(--sb-text); } :root[data-theme="light"] .btn-close { filter: none; } /* Buttons that assumed a dark backdrop */ :root[data-theme="light"] .btn-glass, :root[data-theme="light"] .btn-nav, :root[data-theme="light"] .sb-btn-ghost, :root[data-theme="light"] .btn-outline-light { background: #ffffff; border-color: var(--sb-line-strong); color: var(--sb-text); } :root[data-theme="light"] .btn-glass:hover, :root[data-theme="light"] .btn-nav:hover, :root[data-theme="light"] .btn-outline-light:hover { background: var(--sb-fill-1); color: var(--sb-text); } :root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(17,19,42,0.2); background-clip: content-box; } :root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(17,19,42,0.32); background-clip: content-box; } /* Media overlays stay dark — they sit on photographs in both themes. */ /* -------------------------------------------------------------------------- 1c. THEME TOGGLE -------------------------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; padding: 0; border-radius: 50%; border: 1px solid var(--sb-line-strong); background: var(--sb-fill-2); color: var(--sb-text); cursor: pointer; transition: background var(--sb-t), border-color var(--sb-t), transform var(--sb-t); } .theme-toggle:hover { background: var(--sb-fill-3); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: 2px solid var(--sb-violet-soft); outline-offset: 2px; } /* One icon per theme, swapped by the attribute rather than by script */ .theme-toggle .bi-sun-fill { display: none; } .theme-toggle .bi-moon-stars-fill { display: inline-block; } :root[data-theme="light"] .theme-toggle .bi-sun-fill { display: inline-block; } :root[data-theme="light"] .theme-toggle .bi-moon-stars-fill { display: none; } /* Auto-injected fallback for pages with no navbar slot */ .theme-toggle-float { position: fixed; right: 16px; bottom: 16px; z-index: 1200; width: 40px; height: 40px; background: var(--sb-tile-solid); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7); } @media (max-width: 575.98px) { .theme-toggle-float { right: 12px; bottom: 12px; } } /* -------------------------------------------------------------------------- 2. CANVAS Two static brand auroras pinned to the viewport corners. Static, not animated — an animated background competes with the content for attention and is the main reason the current build reads as unfinished. -------------------------------------------------------------------------- */ body { background: var(--sb-canvas); color: var(--sb-text); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(760px 520px at 12% -6%, rgba(109, 93, 252, 0.30), transparent 62%), radial-gradient(680px 480px at 92% 4%, rgba(70, 194, 255, 0.16), transparent 60%), radial-gradient(900px 700px at 60% 108%, rgba(255, 126, 179, 0.11), transparent 62%), var(--sb-canvas); } /* Fine grain so large flat areas don't band on OLED / gradients */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035; background-image: radial-gradient(rgba(255,255,255,.9) 0.5px, transparent 0.5px); background-size: 3px 3px; } /* -------------------------------------------------------------------------- 3. TYPE SCALE -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5 { letter-spacing: -0.018em; color: var(--sb-text); } .sb-display { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.032em; } .sb-lead { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.6; color: var(--sb-text-dim); max-width: 62ch; } .sb-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-text-faint); } /* Step numbers. Used only where the content really is a sequence. */ .sb-eyebrow .sb-num { font-variant-numeric: tabular-nums; color: var(--sb-violet-soft); letter-spacing: 0.06em; } .sb-hint { display: block; font-size: 0.8125rem; line-height: 1.5; color: var(--sb-text-faint); } .text-muted, small.text-muted { color: var(--sb-text-faint) !important; } /* -------------------------------------------------------------------------- 4. BENTO GRID 12 columns on desktop, 6 on tablet, 1 on phone. Tiles opt into a span. -------------------------------------------------------------------------- */ .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sb-gap); align-items: start; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-9 { grid-column: span 9; } .span-12 { grid-column: span 12; } @media (max-width: 991.98px) { .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-12 { grid-column: span 6; } } @media (max-width: 575.98px) { :root { --sb-gap: 12px; --sb-r-lg: 18px; } .bento { grid-template-columns: 1fr; } .bento > * { grid-column: 1 / -1; } } /* -------------------------------------------------------------------------- 5. TILE Signature: a soft violet spot anchored to the tile's top-left corner that brightens when anything inside the tile takes focus. It tells you where you are in a long form without a progress bar or any script. -------------------------------------------------------------------------- */ .tile { position: relative; isolation: isolate; padding: 26px; border-radius: var(--sb-r-lg); background: var(--sb-tile); border: 1px solid var(--sb-line); box-shadow: var(--sb-shadow); transition: background var(--sb-t), border-color var(--sb-t), box-shadow var(--sb-t); overflow: hidden; } .tile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(420px 260px at 0% 0%, rgba(109, 93, 252, 0.16), transparent 70%); opacity: 0.55; transition: opacity var(--sb-t); } .tile:focus-within { background: var(--sb-tile-hover); border-color: var(--sb-line-strong); box-shadow: var(--sb-shadow-lift); } .tile:focus-within::before { opacity: 1; } .tile-head { margin-bottom: 20px; } .tile-head h2, .tile-title { font-size: 1.125rem; font-weight: 650; margin: 8px 0 0; } .tile-head p, .tile-sub { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--sb-text-dim); max-width: 60ch; } /* Quiet variant — for panels that support the main flow rather than lead it */ .tile.tile-quiet { background: var(--sb-inset); box-shadow: none; } .tile.tile-quiet::before { opacity: 0.25; } /* Flush variant — media fills the tile edge to edge */ .tile.tile-flush { padding: 0; } @media (max-width: 575.98px) { .tile { padding: 20px 18px; } } /* Auto-collapse (opt in with .tile-auto): when app logic hides every field in a tile — e.g. the "generate images only" mode — the empty shell goes too. Browsers without :has() simply keep the tile, which is today's behaviour. */ .tile-auto:not(:has(.sb-field:not([style*="none"]))) { display: none; } /* -------------------------------------------------------------------------- 6. FORM CONTROLS -------------------------------------------------------------------------- */ .form-label, label.form-label { display: block; margin-bottom: 7px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.005em; color: var(--sb-text-dim); } .form-label .req { color: var(--sb-rose); margin-left: 2px; } .form-control, .form-select, textarea.form-control, input.form-control, select.form-select { background: var(--sb-fill-2); border: 1px solid var(--sb-line); border-radius: var(--sb-r-md); color: var(--sb-text); padding: 11px 14px; font-size: 0.9375rem; line-height: 1.45; box-shadow: none; transition: border-color var(--sb-t), background var(--sb-t), box-shadow var(--sb-t); } .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a9adc4' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 15px; padding-right: 40px; appearance: none; -webkit-appearance: none; } .form-control:hover, .form-select:hover { border-color: var(--sb-line-strong); } .form-control:focus, .form-select:focus, select:focus, input:focus, textarea:focus { background: var(--sb-fill-2); border-color: var(--sb-violet-soft); box-shadow: 0 0 0 3px rgba(109, 93, 252, 0.24); color: var(--sb-text); outline: none; } .form-control::placeholder, textarea::placeholder, input::placeholder { color: var(--sb-text-faint) !important; opacity: 1; } /* Native option lists render with zero inset by default, so every dropdown in the create flows looked cramped against the panel edge. Padding here is honoured by Firefox and by Chromium on Windows/Linux; macOS and iOS draw their own system menu and ignore it, which is the accepted trade-off. */ option { background: #15151f; color: var(--sb-text); padding: 9px 12px; line-height: 1.6; } optgroup { background: #15151f; color: var(--sb-text-dim); padding: 6px 12px; } textarea.form-control { min-height: 108px; resize: vertical; } .form-control:disabled, .form-select:disabled, .form-control[readonly] { background: var(--sb-fill-1); color: var(--sb-text-faint); cursor: not-allowed; } /* Field wrapper — also the hook the tile auto-collapse rule looks for */ .sb-field { min-width: 0; } /* Switch-style checkbox */ .form-check { padding-left: 0; } .form-check .form-check-input { float: none; margin: 0 10px 0 0; width: 40px; height: 22px; border-radius: 999px; background-color: var(--sb-fill-3); border: 1px solid var(--sb-line-strong); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23e9eaf3'/%3E%3C/svg%3E"); background-position: left 3px center; background-repeat: no-repeat; transition: background-color var(--sb-t), background-position var(--sb-t), border-color var(--sb-t); cursor: pointer; flex: 0 0 auto; } .form-check .form-check-input:checked { background-color: var(--sb-violet); border-color: var(--sb-violet); background-position: right 3px center; } .form-check .form-check-input:focus-visible { box-shadow: 0 0 0 3px rgba(109, 93, 252, 0.3); border-color: var(--sb-violet-soft); } .form-check .form-check-input:disabled { opacity: 0.5; cursor: not-allowed; } .form-check .form-check-label { font-size: 0.9375rem; font-weight: 500; color: var(--sb-text); cursor: pointer; } /* A switch row: toggle left, label + hint stacked right */ .sb-switch { display: flex; align-items: flex-start; gap: 0; padding: 13px 14px; border-radius: var(--sb-r-md); background: var(--sb-fill-1); border: 1px solid var(--sb-line); transition: border-color var(--sb-t), background var(--sb-t); } .sb-switch:hover { border-color: var(--sb-line-strong); } .sb-switch .form-check-input { margin-top: 1px; } .sb-switch .sb-hint { margin-top: 4px; } /* Radio row */ .form-check-input[type="radio"] { width: 18px; height: 18px; border-radius: 50%; background-image: none; background-color: rgba(255,255,255,.06); border: 1px solid var(--sb-line-strong); } .form-check-input[type="radio"]:checked { background-color: var(--sb-violet); border-color: var(--sb-violet); box-shadow: inset 0 0 0 3.5px var(--sb-canvas); } /* -------------------------------------------------------------------------- 7. PROGRESSIVE DISCLOSURE Native

. Zero script, and it degrades to plain visible content. -------------------------------------------------------------------------- */ .sb-more { border: 1px solid var(--sb-line); border-radius: var(--sb-r-md); background: var(--sb-fill-1); overflow: hidden; transition: border-color var(--sb-t); } .sb-more:hover { border-color: var(--sb-line-strong); } .sb-more > summary { list-style: none; cursor: pointer; padding: 13px 16px; display: flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 600; color: var(--sb-text-dim); user-select: none; } .sb-more > summary::-webkit-details-marker { display: none; } .sb-more > summary:hover { color: var(--sb-text); } .sb-more > summary:focus-visible { outline: 2px solid var(--sb-violet-soft); outline-offset: -2px; } .sb-more > summary .sb-chev { margin-left: auto; transition: transform var(--sb-t); color: var(--sb-text-faint); } .sb-more[open] > summary .sb-chev { transform: rotate(180deg); } .sb-more[open] > summary { border-bottom: 1px solid var(--sb-line); } .sb-more-body { padding: 18px 16px 16px; } /* -------------------------------------------------------------------------- 8. CHOICE CARDS For "pick one of these" moments. Real labels wrapping real inputs, so selection state is native and keyboard-navigable. -------------------------------------------------------------------------- */ .sb-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .sb-choice { position: relative; display: flex; align-items: center; gap: 11px; padding: 14px; border-radius: var(--sb-r-md); border: 1px solid var(--sb-line); background: var(--sb-fill-1); cursor: pointer; transition: border-color var(--sb-t), background var(--sb-t), transform var(--sb-t); } .sb-choice:hover { border-color: var(--sb-line-strong); background: rgba(255,255,255,.055); } .sb-choice i { font-size: 1.1rem; color: var(--sb-violet-soft); } .sb-choice strong { display: block; font-size: 0.9rem; font-weight: 600; } .sb-choice small { display: block; font-size: 0.775rem; color: var(--sb-text-faint); line-height: 1.4; } .sb-choice input { position: absolute; opacity: 0; pointer-events: none; } .sb-choice:has(input:checked), .sb-choice.selected { border-color: var(--sb-violet); background: rgba(109, 93, 252, 0.14); box-shadow: 0 0 0 1px var(--sb-violet) inset; } .sb-choice:has(input:focus-visible) { outline: 2px solid var(--sb-violet-soft); outline-offset: 2px; } /* -------------------------------------------------------------------------- 9. PREVIEW -------------------------------------------------------------------------- */ .sb-preview { border-radius: var(--sb-r-md); border: 1px solid var(--sb-line); background: rgba(0, 0, 0, 0.25); overflow: hidden; aspect-ratio: 3 / 4; display: flex; } .sb-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .sb-swatches { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; } .color-swatch { width: 28px !important; height: 28px !important; border-radius: 50% !important; border: 2px solid rgba(255, 255, 255, 0.28) !important; cursor: pointer; transition: transform var(--sb-t), box-shadow var(--sb-t), border-color var(--sb-t); } .color-swatch:hover { border-color: rgba(255, 255, 255, 0.6) !important; } .color-swatch.selected { border-color: #fff !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); } /* -------------------------------------------------------------------------- 10. BUTTONS -------------------------------------------------------------------------- */ .btn { border-radius: var(--sb-r-md); font-weight: 600; font-size: 0.9rem; padding: 10px 18px; border: 1px solid transparent; transition: transform var(--sb-t), box-shadow var(--sb-t), background var(--sb-t), border-color var(--sb-t), opacity var(--sb-t); } .btn:focus-visible { outline: 2px solid var(--sb-violet-soft); outline-offset: 2px; box-shadow: none; } .btn:active { transform: translateY(1px); } /* Primary */ .btn-primary, .btn-gradient, .sb-btn-primary { background: var(--sb-accent); border: none; color: #fff !important; box-shadow: 0 8px 22px -10px rgba(109, 93, 252, 0.9); } .btn-primary:hover, .btn-gradient:hover, .sb-btn-primary:hover { filter: brightness(1.07); box-shadow: 0 12px 28px -10px rgba(109, 93, 252, 1); transform: translateY(-1px); } .btn-gradient2 { background: var(--sb-accent-warm); border: none; color: #fff !important; } /* Secondary / ghost */ .btn-glass, .btn-nav, .sb-btn-ghost, .btn-outline-light { background: var(--sb-fill-2); border: 1px solid var(--sb-line-strong); color: var(--sb-text); backdrop-filter: none; } .btn-glass:hover, .btn-nav:hover, .sb-btn-ghost:hover, .btn-outline-light:hover { background: var(--sb-fill-3); border-color: rgba(255, 255, 255, 0.28); color: var(--sb-text); transform: translateY(-1px); } .btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* -------------------------------------------------------------------------- 11. NAVBAR -------------------------------------------------------------------------- */ .navbar.sb-nav, .glass-navbar, .premium-navbar { background: rgba(11, 11, 19, 0.72); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--sb-line); box-shadow: none; min-height: 62px; } .navbar-brand { color: var(--sb-text) !important; } .logo-text { color: var(--sb-text) !important; font-weight: 650; font-size: 0.975rem; letter-spacing: -0.01em; } .logo-text small { color: var(--sb-text-faint); font-weight: 500; font-size: 0.78rem; } .nav-actions .btn { padding: 7px 12px; font-size: 0.825rem; } /* -------------------------------------------------------------------------- 12. ACTION BAR Sticks to the bottom of the viewport so the primary action is always one click away, however long the form gets. -------------------------------------------------------------------------- */ .sb-actionbar { position: sticky; bottom: 0; z-index: 40; margin-top: 4px; padding: 14px 20px; border-radius: var(--sb-r-lg); background: rgba(16, 16, 25, 0.9); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border: 1px solid var(--sb-line-strong); box-shadow: 0 -10px 40px -18px rgba(0, 0, 0, 1); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .sb-actionbar .sb-cost { font-size: 0.85rem; color: var(--sb-text-dim); text-align: left !important; margin: 0 !important; } .sb-actionbar .sb-cost b { color: var(--sb-text); } /* JS injects #creditEstimate into the action bar; normalise its inherited Bootstrap utility classes so it sits on the left, not floated right. */ .sb-actionbar #creditEstimate { text-align: left !important; margin: 0 !important; color: var(--sb-text-dim) !important; font-size: 0.85rem; } @media (max-width: 575.98px) { .sb-actionbar { padding: 12px 14px; } .sb-actionbar .sb-actionbar-main { width: 100%; } .sb-actionbar .sb-actionbar-main .btn { width: 100%; } } /* -------------------------------------------------------------------------- 13. MODALS / OVERLAYS -------------------------------------------------------------------------- */ .modal-content { background: var(--sb-tile-solid); border: 1px solid var(--sb-line-strong); border-radius: var(--sb-r-lg); color: var(--sb-text); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 1); } .modal-header, .modal-footer { border-color: var(--sb-line); } /* The scrim: dim on the backdrop, blur on the modal layer (backdrop-filter on .modal-backdrop itself has nothing behind it to blur). */ .modal-backdrop { background-color: #05050a; } .modal-backdrop.show { opacity: 0.66; } .modal { backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); } .dropdown-menu { background: var(--sb-tile-solid); border: 1px solid var(--sb-line-strong); border-radius: var(--sb-r-md); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 1); padding: 6px; } .dropdown-item { border-radius: var(--sb-r-sm); color: var(--sb-text-dim); font-size: 0.875rem; padding: 9px 12px; } .dropdown-item:hover, .dropdown-item:focus { background: var(--sb-fill-3); color: var(--sb-text); } .dropdown-divider { border-color: var(--sb-line); } /* Gallery picker */ .gallery-modal { position: fixed; inset: 0; z-index: 5000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(6, 6, 11, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .gallery-modal.show, .gallery-modal.open { display: flex; } .gallery-content { position: relative; width: 100%; max-width: 880px; max-height: 92vh; overflow-y: auto; padding: 26px; border-radius: var(--sb-r-lg); background: var(--sb-tile-solid); border: 1px solid var(--sb-line-strong); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 1); } .gallery-title { font-size: 1.1rem; font-weight: 650; margin-bottom: 18px; } .gallery-close { position: absolute; top: 16px; right: 18px; z-index: 5; width: 34px; height: 34px; display: grid; place-items: center; font-size: 26px; line-height: 1; color: var(--sb-text-dim) !important; background: rgba(255,255,255,.06) !important; border: 1px solid var(--sb-line) !important; border-radius: 50%; cursor: pointer; } .gallery-close:hover { color: #fff !important; background: rgba(255,255,255,.12) !important; } .gallery-upload-box { text-align: center; margin-bottom: 14px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; } .gallery-item { position: relative; border-radius: var(--sb-r-md); overflow: hidden; cursor: pointer; background: var(--sb-fill-2); border: 1px solid var(--sb-line); opacity: 0; animation: sbFade .25s ease forwards; transition: transform var(--sb-t), border-color var(--sb-t); } .gallery-item:hover { transform: translateY(-2px); border-color: var(--sb-violet); } .gallery-item img { width: 100%; height: 128px; object-fit: cover; display: block; } .gallery-delete { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border: none; border-radius: 50%; background: rgba(255, 60, 80, 0.85); color: #fff; cursor: pointer; z-index: 5; } .gallery-spinner { text-align: center; margin-top: 15px; } @keyframes sbFade { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } } /* Loading overlay */ #loadingOverlay, .loading-overlay { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; flex-direction: column; background: rgba(8, 8, 14, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--sb-text); } #loadingOverlay.active, .loading-overlay.active, .loading-overlay.show { display: flex !important; } /* -------------------------------------------------------------------------- 14. MISC / COMPAT -------------------------------------------------------------------------- */ .hidden-important { display: none !important; } .custom-alert-text { font-size: 0.7rem; font-style: normal; line-height: 1.6; color: var(--sb-text-faint) !important; } hr { border-color: var(--sb-line); opacity: 1; margin: 20px 0; } .text-danger { color: var(--sb-danger) !important; } .badge-soft { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; background: rgba(109, 93, 252, 0.18); border: 1px solid rgba(109, 93, 252, 0.4); color: #c5bcff; } /* -------------------------------------------------------------------------- 15. QUALITY FLOOR -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--sb-violet-soft); outline-offset: 2px; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--sb-fill-3); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); background-clip: content-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* -------------------------------------------------------------------------- 16. OPT-OUT Pages that must keep a light reading surface (the storybook reader) add class="paper" to to switch the canvas off. -------------------------------------------------------------------------- */ body.paper { background: #0e0e16; } body.paper::before, body.paper::after { display: none; } /* -------------------------------------------------------------------------- 17. AUTH SURFACE Shared by login.html and verify.html. -------------------------------------------------------------------------- */ body.auth-page { display: flex; align-items: center; justify-content: center; padding: 32px 18px; } .auth-card, .verify-box { position: relative; width: 100%; max-width: 400px; padding: 34px 30px 30px; border-radius: var(--sb-r-lg); background: linear-gradient(180deg, var(--sb-fill-3), var(--sb-fill-1)); border: 1px solid var(--sb-line-strong); box-shadow: 0 1px 0 var(--sb-fill-3) inset, 0 40px 90px -34px rgba(0,0,0,1); color: var(--sb-text); text-align: center; } .auth-card .logo img, .verify-box .logo { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 14px; } .auth-card h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 4px; } .switch-link { color: var(--sb-violet-soft); font-weight: 600; cursor: pointer; } .switch-link:hover { text-decoration: underline; } .alert-area { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 420px; z-index: 1055; padding: 0 14px; } .alert-area .alert { border-radius: var(--sb-r-md); border: 1px solid var(--sb-line-strong); background: rgba(20, 20, 31, 0.95); backdrop-filter: blur(10px); color: var(--sb-text); font-size: 0.875rem; } .alert-area .alert-danger { border-color: rgba(255,107,125,.45); color: #ffd7dc; } .alert-area .alert-success { border-color: rgba(61,220,151,.45); color: #c9ffe8; } /* Legacy names still referenced by older markup */ .glass-card, .bg-glass, .glass-premium { background: var(--sb-tile); border: 1px solid var(--sb-line-strong); border-radius: var(--sb-r-lg); color: var(--sb-text); backdrop-filter: none; } /* A dialog must be opaque. .glass-modal previously inherited the translucent tile fill, which let the page read straight through the panel. */ .modal-content.glass-modal, .glass-modal { background: var(--sb-tile-solid) !important; border: 1px solid var(--sb-line-strong); border-radius: var(--sb-r-lg); color: var(--sb-text); backdrop-filter: none; } /* -------------------------------------------------------------------------- 18. SECTION HEADINGS (marketing + settings pages) -------------------------------------------------------------------------- */ .section-title { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.015em; color: var(--sb-text); margin: 34px 0 16px; } .section-title i { color: var(--sb-violet-soft); font-size: 1.05rem !important; }