/* ===================================================================== VinDB console design language, portable skin ===================================================================== Extracted from the special-access VinDB console so the same refined look (renewed buttons, clean surfaces, focus rings, status pills, spacing rhythm) can be applied to other surfaces. Activate by adding the class "vd-skin" to a page root or . Every rule is scoped under .vd-skin, so this file is completely inert on pages that don't opt in. It restyles shared primitives only (buttons, inputs, pills, surfaces, typography) and never imposes layout, so it drops onto an existing surface without breaking it. ===================================================================== */ .vd-skin { --vd-radius: 14px; --vd-radius-sm: 10px; --vd-surface: color-mix(in oklab, var(--bg-primary, #0a0c10) 86%, #000); --vd-surface-soft: color-mix(in oklab, var(--bg-surface, rgba(255, 255, 255, 0.06)) 48%, transparent); --vd-hairline: var(--border-soft, rgba(255, 255, 255, 0.08)); } /* ===================================================================== Global card refinement, applies SITE-WIDE (not gated by .vd-skin) --------------------------------------------------------------------- The default .panel / .card / .section-block use a 28px "blob" radius, oversized padding, a glassy translucent fill, and a heavy 0 20px 60px drop shadow: the generic "floating glass card" look. Flatten them into solid, hairline-bordered, right-sized surfaces everywhere. Loaded after render.css, so these win by source order without !important. Layout (padding on non-section cards) is left untouched so nothing shifts. ===================================================================== */ /* Primary lever: refine the shared design TOKENS. Every card rule, including the high-specificity, surface-specific ones (.portfolio-shell .section-block, marketplace/asset cards, etc.), resolves these tokens, so refining the tokens refines cards EVERYWHERE without fighting CSS specificity. */ :root { --radius-xl: 18px; /* was 28px, the "blob" radius */ --radius-lg: 14px; /* was 22px */ --surface-padding: clamp(18px, 1.6vw, 22px); /* was up to 32px */ --surface-gap: clamp(14px, 1.3vw, 18px); --shadow-soft: 0 8px 24px rgba(4, 6, 12, 0.26); /* was 0 20px 60px, floaty */ } /* De-glass the default panel fill (render.css sets it to a white-tinted translucent glass at higher specificity, so match that specificity). */ body:not([data-focus-mode="true"]) { --bg-panel: color-mix(in oklab, var(--bg-primary, #0a0c10) 84%, #000); } /* The heavy 0 24px 60px hover lift is a hard value, not a token, flatten it. */ .panel:hover, .card:hover, .section-block:hover { transform: none; box-shadow: var(--shadow-soft); border-color: var(--border-strong, rgba(255, 255, 255, 0.16)); } .meta-card { border-radius: 12px; } /* ---- Buttons (renewal) ---- */ .vd-skin .apply-button, .vd-skin .ghost-button { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border-radius: var(--vd-radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease; } .vd-skin .apply-button { background: color-mix(in oklab, var(--accent-primary) 90%, #eafdf7); color: #06140f; border-color: color-mix(in oklab, var(--accent-primary) 55%, transparent); } .vd-skin .apply-button:hover { background: color-mix(in oklab, var(--accent-primary) 96%, #ffffff); transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in oklab, var(--accent-primary) 22%, transparent); } .vd-skin .apply-button:active { transform: translateY(0); box-shadow: none; } .vd-skin .ghost-button { background: var(--vd-surface-soft); color: var(--text-muted); border-color: var(--border-soft); } .vd-skin .ghost-button:hover { color: var(--text-strong); border-color: var(--border-strong); background: color-mix(in oklab, var(--bg-surface) 78%, transparent); } .vd-skin .apply-button:focus-visible, .vd-skin .ghost-button:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-primary) 38%, transparent); } /* ---- Form controls ---- */ .vd-skin input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), .vd-skin select, .vd-skin textarea { background: color-mix(in oklab, var(--bg-primary) 88%, #000); border: 1px solid var(--border-soft); border-radius: 9px; color: var(--text-strong); font-family: var(--font-sans); font-size: 13px; padding: 9px 12px; transition: border-color 150ms ease, box-shadow 150ms ease; } .vd-skin input:focus, .vd-skin select:focus, .vd-skin textarea:focus { outline: none; border-color: color-mix(in oklab, var(--accent-primary) 50%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-primary) 18%, transparent); } .vd-skin input::placeholder, .vd-skin textarea::placeholder { color: var(--text-subtle); opacity: 0.75; } /* ---- Status pills ---- */ .vd-skin .case-status { font-family: var(--font-sans); font-size: 10px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; } .vd-skin .case-status-info { color: var(--accent-primary); background: color-mix(in oklab, var(--accent-primary) 13%, transparent); border-color: color-mix(in oklab, var(--accent-primary) 30%, transparent); } .vd-skin .case-status-warning { color: var(--accent-warning); background: color-mix(in oklab, var(--accent-warning) 14%, transparent); border-color: color-mix(in oklab, var(--accent-warning) 30%, transparent); } .vd-skin .case-status-neutral, .vd-skin .case-status-success { color: var(--text-subtle); background: var(--vd-surface-soft); border-color: var(--border-soft); } /* ---- Eyebrow / label typography ---- */ .vd-skin .case-room-eyebrow { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-primary); } /* ---- Reusable surface + control utility classes ---- Opt-in helpers for surfaces that want the console's card/table look without depending on VinDB-specific class names. */ .vd-skin .vd-card { border: 1px solid var(--vd-hairline); border-radius: var(--vd-radius); background: var(--vd-surface); padding: 20px 22px; } .vd-skin .vd-card-soft { border: 1px solid var(--border-soft); border-radius: var(--vd-radius-sm); background: var(--vd-surface-soft); padding: 16px; } .vd-skin .vd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--vd-surface-soft); color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; } /* ---- Surface refinements for common containers ---- Visual only (border, radius, flat background), no layout is imposed, so these drop onto existing panels without shifting anything. */ .vd-skin .panel, .vd-skin .case-rail-card, .vd-skin .case-room-section { border: 1px solid var(--vd-hairline); border-radius: var(--vd-radius); background: var(--vd-surface); background-image: none; box-shadow: none; } .vd-skin .case-reaction-pill, .vd-skin .case-message-role-badge { border-radius: 999px; border: 1px solid var(--border-soft); background: var(--vd-surface-soft); color: var(--text-muted); font-family: var(--font-sans); font-size: 11px; }