Spaces:
Running
Running
| /* ===================================================================== | |
| Renesas AI Models — restyle | |
| Three switchable directions on data-theme: | |
| a = Brand Light (true to Renesas brand: flat, squared, hairlines) | |
| b = Frosted Light (light branded backdrop + liquid-glass surfaces) | |
| c = Midnight Glass (refined dark, premium frosted glass) | |
| All share Renesas Blue #2A289D and the brand condensed display type. | |
| Drop-in: works with the existing app.js unchanged. | |
| ===================================================================== */ | |
| /* ---------- Brand constants (all themes) ---------- */ | |
| :root { | |
| --brand: #2A289D; /* Renesas Blue — corporate */ | |
| --brand-press: #1F1D78; | |
| --brand-2: #43ABE2; /* secondary sky blue */ | |
| --font-display: "Archivo Narrow", "Arial Narrow", Arial, sans-serif; | |
| --font-body: "Helvetica Neue", Arial, "Liberation Sans", sans-serif; | |
| /* badge accent colors (brand secondary palette) */ | |
| --bc-onnx: #306683; | |
| --bc-gguf: #609A3B; | |
| --bc-cpu: #706F6F; | |
| --bc-npu: #EB6209; | |
| --bc-dsp: #883D90; | |
| --bc-modal: var(--brand); | |
| --bc-art: #706F6F; | |
| --bc-task: #4C8C7D; | |
| /* accuracy delta vs FP32 reference */ | |
| --acc-down: #B84A2E; /* quantization loss */ | |
| --acc-up: #4E8C5A; /* gain over reference */ | |
| } | |
| /* ===================================================================== | |
| Frosted Light — the single theme: liquid glass over a living, | |
| branded backdrop. Renesas Blue #2A289D + brand condensed display. | |
| ===================================================================== */ | |
| :root { | |
| --bg: linear-gradient(165deg, #EEF1F8 0%, #E4E9F4 48%, #EAE6F2 100%); | |
| --bg-dots: radial-gradient(rgba(42,40,157,0.10) 1.4px, transparent 1.6px); | |
| --text: #2C2B45; | |
| --text-dim: #5C5B72; | |
| --text-mute: #908FA3; | |
| --radius: 16px; | |
| --radius-sm: 12px; | |
| --card-radius: 16px; | |
| --card-blur: blur(20px) saturate(155%); | |
| --panel-bg: rgba(255,255,255,0.55); | |
| --panel-border: rgba(255,255,255,0.75); | |
| --panel-shadow: 0 18px 44px rgba(42,40,157,0.10), inset 0 1px 0 rgba(255,255,255,0.65); | |
| --card-bg: rgba(255,255,255,0.58); | |
| --card-border: rgba(255,255,255,0.8); | |
| --card-shadow: 0 12px 32px rgba(42,40,157,0.10), inset 0 1px 0 rgba(255,255,255,0.7); | |
| --card-rule: 0px; | |
| --card-hover-bg: rgba(255,255,255,0.74); | |
| --card-hover-border: rgba(42,40,157,0.45); | |
| --card-hover-shadow: 0 20px 46px rgba(42,40,157,0.18), inset 0 1px 0 rgba(255,255,255,0.8); | |
| --surface: rgba(255,255,255,0.5); | |
| --surface-strong: rgba(255,255,255,0.7); | |
| --surface-border: rgba(255,255,255,0.85); | |
| --header-bg: rgba(255,255,255,0.6); | |
| --header-border: rgba(255,255,255,0.7); | |
| --header-shadow: 0 8px 30px rgba(42,40,157,0.12), inset 0 1px 0 rgba(255,255,255,0.8); | |
| --header-text: #2C2B45; | |
| --header-blur: blur(22px) saturate(160%); | |
| --input-bg: rgba(255,255,255,0.7); | |
| --input-border: rgba(255,255,255,0.9); | |
| --chip-bg: rgba(255,255,255,0.65); | |
| --chip-border: rgba(255,255,255,0.85); | |
| --brand-tint: rgba(42,40,157,0.12); | |
| --brand-ring: rgba(42,40,157,0.22); | |
| --hairline: rgba(42,40,157,0.12); | |
| --canvas-bg: rgba(255,255,255,0.92); | |
| --canvas-border: rgba(255,255,255,0.8); | |
| --table-head-bg: var(--brand); | |
| --table-head-text: #FFFFFF; | |
| --code-bg: rgba(42,40,157,0.06); | |
| --scroll-thumb: rgba(42,40,157,0.28); | |
| --link-bg: rgba(42,40,157,0.12); | |
| --link-text: var(--brand); | |
| --link-border: rgba(42,40,157,0.3); | |
| --modal-backdrop: rgba(38,40,80,0.4); | |
| --brand-active: var(--brand); | |
| } | |
| /* ===================================================================== | |
| Base | |
| ===================================================================== */ | |
| * { box-sizing: border-box; } | |
| [hidden] { display: none ; } | |
| html, body { height: 100%; } | |
| body { | |
| margin: 0; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| color: var(--text); | |
| font-family: var(--font-body); | |
| background: var(--bg); | |
| background-attachment: fixed; | |
| } | |
| /* ---------- Dynamic, living background: brand network mesh + soft color blooms ---------- */ | |
| .bg-fx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } | |
| .bg-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } | |
| .bg-fx .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.42; will-change: transform; } | |
| .bg-fx .b1 { width: 46vw; height: 46vw; left: -12vw; top: -16vh; background: radial-gradient(circle, rgba(67,171,226,0.70), transparent 68%); animation: fx1 30s ease-in-out infinite; } | |
| .bg-fx .b2 { width: 42vw; height: 42vw; right: -10vw; bottom: -18vh; background: radial-gradient(circle, rgba(150,104,214,0.62), transparent 68%); animation: fx2 36s ease-in-out infinite; } | |
| @keyframes fx1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14vw,10vh) scale(1.15); } } | |
| @keyframes fx2 { 0%, 100% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-12vw,12vh) scale(0.92); } } | |
| @media (prefers-reduced-motion: reduce) { .bg-fx .blob { animation: none ; } } | |
| .topbar, .content { position: relative; z-index: 1; } | |
| /* ===================================================================== | |
| Topbar | |
| ===================================================================== */ | |
| .topbar { | |
| flex: 0 0 auto; | |
| z-index: 50; | |
| border-bottom: 1px solid var(--header-border); | |
| background: var(--header-bg); | |
| backdrop-filter: var(--header-blur); | |
| -webkit-backdrop-filter: var(--header-blur); | |
| box-shadow: var(--header-shadow); | |
| } | |
| :root[data-theme="a"] .topbar { border-top: 3px solid var(--brand); } | |
| .topbar-inner { | |
| width: 100%; | |
| padding: 11px 22px; | |
| display: flex; | |
| align-items: center; | |
| gap: 22px; | |
| } | |
| .brand { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 0 0 auto; } | |
| .brand-icon { height: 22px; width: auto; max-width: 168px; object-fit: contain; display: block; } | |
| .brand-divider { width: 1px; height: 26px; background: var(--hairline); flex: 0 0 auto; } | |
| .brand-title { | |
| color: var(--header-text); | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 1.18rem; | |
| line-height: 1; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| } | |
| .brand-subtitle { color: var(--text-dim); font-size: 0.74rem; margin-top: 3px; letter-spacing: 0.04em; } | |
| .tabs { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; } | |
| .nav-item { | |
| appearance: none; | |
| border: 1px solid transparent; | |
| background: transparent; | |
| color: var(--text-dim); | |
| border-radius: var(--radius-sm); | |
| padding: 9px 16px; | |
| font-family: var(--font-display); | |
| font-weight: 600; | |
| font-size: 0.96rem; | |
| letter-spacing: 0.02em; | |
| cursor: pointer; | |
| transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease; | |
| } | |
| .nav-item:hover { color: var(--text); background: var(--brand-tint); } | |
| .nav-item.active { | |
| background: var(--brand-active); | |
| color: #fff; | |
| box-shadow: 0 4px 14px rgba(42,40,157,0.32); | |
| } | |
| /* Burger (mobile nav trigger) — hidden until the phone breakpoint */ | |
| .nav-burger { | |
| display: none; | |
| appearance: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; | |
| width: 44px; height: 44px; flex: 0 0 auto; margin-left: auto; cursor: pointer; | |
| border: 1px solid var(--chip-border); background: var(--chip-bg); | |
| border-radius: var(--radius-sm); | |
| backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); | |
| transition: border-color 140ms ease, background 140ms ease; | |
| } | |
| .nav-burger:hover { border-color: var(--brand-ring); } | |
| .nav-burger span { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 180ms ease, opacity 150ms ease; } | |
| .nav-burger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); } | |
| .nav-burger.active span:nth-child(2) { opacity: 0; } | |
| .nav-burger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } | |
| /* Theme switch */ | |
| .theme-switch { | |
| display: flex; | |
| gap: 2px; | |
| padding: 3px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--chip-border); | |
| background: var(--surface); | |
| flex: 0 0 auto; | |
| } | |
| .theme-btn { | |
| appearance: none; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-dim); | |
| border-radius: calc(var(--radius-sm) - 2px); | |
| padding: 6px 10px; | |
| font-family: var(--font-body); | |
| font-weight: 600; | |
| font-size: 0.74rem; | |
| letter-spacing: 0.02em; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: background 140ms ease, color 140ms ease; | |
| } | |
| .theme-btn:hover { color: var(--text); } | |
| .theme-btn.active { background: var(--brand-active); color: #fff; box-shadow: 0 2px 8px rgba(42,40,157,0.28); } | |
| .theme-btn .sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.12); } | |
| .sw-a { background: #FFFFFF; } | |
| .sw-b { background: linear-gradient(135deg, #E7ECF8, #DCD9EF); } | |
| .sw-c { background: linear-gradient(135deg, #1A1C36, #3937C4); border-color: rgba(255,255,255,0.2); } | |
| /* ===================================================================== | |
| Content / sections | |
| ===================================================================== */ | |
| .content { flex: 1 1 auto; min-height: 0; width: 100%; padding: 8px; overflow: hidden; } | |
| .section { | |
| display: none; | |
| height: 100%; | |
| min-height: 0; | |
| color: var(--text); | |
| border-radius: var(--radius); | |
| border: 1px solid var(--panel-border); | |
| background: var(--panel-bg); | |
| backdrop-filter: var(--card-blur); | |
| -webkit-backdrop-filter: var(--card-blur); | |
| box-shadow: var(--panel-shadow); | |
| overflow: hidden; | |
| } | |
| .section.visible { display: flex; flex-direction: column; } | |
| #sec-overview.visible, #sec-explore.visible { overflow: auto; padding: 9px; } | |
| /* Overview content sits directly on the page (no panel frame). */ | |
| #sec-overview { border: none; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } | |
| .section-head { margin-bottom: 18px; } | |
| .section-title { | |
| margin: 0 0 4px; border: none; padding: 0; | |
| font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; | |
| letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); | |
| } | |
| /* ===================================================================== | |
| Typography | |
| ===================================================================== */ | |
| h1, h2, h3 { color: var(--text); margin-top: 0.2rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--hairline); } | |
| h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand); } | |
| :root[data-theme="c"] h3 { color: #B9C0FF; } | |
| pre, code { font-family: "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace; } | |
| pre { background: var(--code-bg); color: var(--text); padding: 11px 13px; border-radius: var(--radius-sm); overflow-x: auto; border: 1px solid var(--hairline); margin: 0; font-size: 0.86rem; } | |
| code { background: var(--code-bg); color: var(--text); padding: 0.1rem 0.34rem; border-radius: 4px; font-size: 0.88em; } | |
| .note { background: var(--surface); border-left: 3px solid var(--brand); padding: 11px 13px; margin: 10px 0 12px; border-radius: var(--radius-sm); color: var(--text); } | |
| .note.note-warn { background: color-mix(in srgb, var(--bc-npu) 12%, transparent); border-left-color: var(--bc-npu); } | |
| .subtle { color: var(--text-dim); margin-top: 0.4rem; } | |
| .tight { margin-top: 0.35rem; } | |
| .no-border { border-bottom: none ; padding-bottom: 0 ; } | |
| .link-btn { appearance: none; background: none; border: none; cursor: pointer; color: var(--brand); font-weight: 700; font-size: 0.82rem; padding: 2px 4px; letter-spacing: 0.02em; } | |
| :root[data-theme="c"] .link-btn { color: #B9C0FF; } | |
| .link-btn:hover { text-decoration: underline; } | |
| /* ===================================================================== | |
| Card base (big panels) + glass surfaces | |
| ===================================================================== */ | |
| .card, .stat-tile, .model-card, .metric-card, .model-picker, .constellation { | |
| background: var(--card-bg); | |
| border: 1px solid var(--card-border); | |
| backdrop-filter: var(--card-blur); | |
| -webkit-backdrop-filter: var(--card-blur); | |
| box-shadow: var(--card-shadow); | |
| } | |
| .card { border-radius: var(--card-radius); padding: 8px; min-width: 0; position: relative; } | |
| .card::before { | |
| content: ""; | |
| position: absolute; top: 0; left: 0; right: 0; | |
| height: var(--card-rule); | |
| background: var(--brand); | |
| border-radius: var(--card-radius) var(--card-radius) 0 0; | |
| } | |
| .card-head { margin-bottom: 14px; } | |
| .card-head-title { | |
| margin: 0 0 4px; border: none; padding: 0; | |
| font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; | |
| letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); | |
| } | |
| /* ===================================================================== | |
| Form controls | |
| ===================================================================== */ | |
| .form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } | |
| .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } | |
| .label { font-size: 0.72rem; color: var(--text-dim); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } | |
| .radio-row { display: flex; flex-wrap: wrap; gap: 8px; } | |
| .radio-col { display: grid; gap: 8px; } | |
| .field-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } | |
| .pill { | |
| display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; | |
| border: 1px solid var(--chip-border); background: var(--chip-bg); | |
| backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); | |
| border-radius: var(--radius-sm); cursor: pointer; user-select: none; font-size: 0.88rem; color: var(--text); | |
| transition: background 130ms ease, border-color 130ms ease, box-shadow 130ms ease; | |
| } | |
| .pill:hover { border-color: var(--brand-ring); } | |
| .pill.active { background: var(--brand-tint); border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); color: var(--text); font-weight: 600; } | |
| .pill input { accent-color: var(--brand); } | |
| .filter-input, .filter-select { | |
| height: 40px; padding: 0 13px; border-radius: var(--radius-sm); | |
| border: 1px solid var(--input-border); background: var(--input-bg); | |
| backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); | |
| color: var(--text); outline: none; font-size: 0.92rem; width: 100%; font-family: var(--font-body); | |
| } | |
| .filter-input::placeholder { color: var(--text-mute); } | |
| select.filter-select { | |
| appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 38px; cursor: pointer; | |
| background-image: | |
| linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), | |
| linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); | |
| background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px; | |
| background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; | |
| } | |
| .filter-select option { background: var(--input-bg); color: var(--text); } | |
| :root[data-theme="c"] .filter-select option { background: #1B1D33; color: var(--text); } | |
| .filter-input:focus, .filter-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } | |
| .filter-input.compact, .filter-select.compact { height: 36px; font-size: 0.88rem; } | |
| .field.compact { gap: 5px; } | |
| .field.compact .label { font-size: 0.7rem; } | |
| /* ===================================================================== | |
| OVERVIEW | |
| ===================================================================== */ | |
| .stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; } | |
| .stat-tile { border-radius: var(--card-radius); padding: 8px 9px 8px 10px; position: relative; border-left: 3px solid var(--brand); } | |
| .stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1; } | |
| .stat-label { margin-top: 6px; font-size: 0.78rem; color: var(--text-dim); font-weight: 600; letter-spacing: 0.03em; } | |
| /* Carousel */ | |
| .carousel-section { margin-bottom: 20px; } | |
| .carousel-section.featured { | |
| padding: 8px 10px 4px; margin-bottom: 14px; border-radius: var(--card-radius); | |
| background: var(--card-bg); border: 1px solid var(--card-border); | |
| box-shadow: var(--card-shadow); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); | |
| position: relative; | |
| } | |
| :root[data-theme="a"] .carousel-section.featured { border-top: 3px solid var(--brand); } | |
| .carousel-section.featured .carousel-title { font-size: 1.42rem; } | |
| .carousel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } | |
| .carousel-title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; margin: 0; border: none; padding: 0; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); } | |
| .carousel-actions { display: flex; align-items: center; gap: 8px; } | |
| .carousel-sub { color: var(--text-dim); font-size: 0.8rem; font-weight: 600; margin-right: 4px; } | |
| .carousel-nav { | |
| width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; | |
| cursor: pointer; font-size: 1.15rem; line-height: 1; color: var(--text); | |
| border: 1px solid var(--chip-border); background: var(--chip-bg); | |
| backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); | |
| transition: border-color 130ms ease, color 130ms ease, background 130ms ease; | |
| } | |
| .carousel-nav:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); } | |
| .carousel-track { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; padding: 4px 2px 14px; } | |
| .rc-card { flex: 0 0 252px; scroll-snap-align: start; gap: 10px; } | |
| .rc-meta { font-size: 0.72rem; font-weight: 700; color: var(--text-dim); display: flex; align-items: center; gap: 5px; letter-spacing: 0.02em; } | |
| .rc-meta.is-new { color: var(--brand); } | |
| :root[data-theme="c"] .rc-meta.is-new { color: #B9C0FF; } | |
| .rc-stat { font-size: 0.84rem; color: var(--text-dim); } | |
| .rc-stat b { font-family: var(--font-display); font-size: 1.15rem; color: var(--text); font-weight: 700; } | |
| .rc-stat.empty { color: var(--text-mute); } | |
| /* Constellation */ | |
| .constellation-card { padding: 8px; } | |
| .cstl-controls { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px; } | |
| .cstl-controls .field { min-width: 150px; } | |
| .constellation { border-radius: var(--radius-sm); overflow: hidden; position: relative; background: var(--canvas-bg); border: 1px solid var(--canvas-border); box-shadow: none; } | |
| .constellation canvas { width: 100%; height: 460px; display: block; cursor: grab; } | |
| .constellation canvas:active { cursor: grabbing; } | |
| .cstl-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 12px; align-items: center; } | |
| .legend { display: flex; flex-wrap: wrap; gap: 8px 14px; } | |
| .legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-dim); font-weight: 600; } | |
| .legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } | |
| .mini-tooltip { | |
| position: absolute; pointer-events: none; padding: 9px 11px; border-radius: var(--radius-sm); | |
| background: rgba(28,30,52,0.95); color: #F4F5FB; backdrop-filter: blur(6px); | |
| border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 18px 40px rgba(0,0,0,0.35); | |
| font-size: 0.8rem; max-width: 280px; line-height: 1.35; display: none; z-index: 5; | |
| } | |
| /* ===================================================================== | |
| CATALOG | |
| ===================================================================== */ | |
| .catalog-layout { flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; grid-template-columns: 196px minmax(0, 1fr); } | |
| .facets { | |
| border-right: 1px solid var(--hairline); padding: 9px 8px; overflow: auto; | |
| display: flex; flex-direction: column; gap: 12px; | |
| } | |
| .facets-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; } | |
| .facets-title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); } | |
| /* Collapsible filter clusters (the toggle button is shown only on phones) */ | |
| .filter-toggle { | |
| display: none; align-items: center; gap: 8px; width: 100%; cursor: pointer; | |
| appearance: none; border: 1px solid var(--chip-border); background: var(--chip-bg); | |
| color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; | |
| letter-spacing: 0.03em; padding: 11px 14px; border-radius: var(--radius-sm); | |
| backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); | |
| transition: border-color 140ms ease, background 140ms ease; | |
| } | |
| .filter-toggle:hover { border-color: var(--brand-ring); } | |
| .filter-toggle.active { border-color: var(--brand); background: var(--brand-tint); } | |
| .filter-toggle .ft-chevron { margin-left: auto; transition: transform 200ms ease; } | |
| .filter-toggle[aria-expanded="true"] .ft-chevron { transform: rotate(180deg); } | |
| .facets-body { display: flex; flex-direction: column; gap: 12px; } | |
| .explore-filters { display: grid; gap: 10px; } | |
| /* Explore filters: dense progressive-disclosure redesign. | |
| Secondary ("Advanced") tier is collapsed by default on desktop; the generic | |
| delegated .filter-toggle handler (index.html) toggles .open on it — no JS. */ | |
| .explore-advanced { display: none; } | |
| .explore-advanced.open { display: grid; gap: 10px; } | |
| /* Desktop-visible variant of the toggle (base .filter-toggle is display:none | |
| >680px). Slimmer + dimmer so it reads as a secondary affordance. */ | |
| .filter-toggle--inline { | |
| display: flex; padding: 7px 12px; font-size: 0.82rem; font-family: var(--font-body); | |
| letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); | |
| } | |
| .filter-toggle--inline svg:first-of-type { opacity: 0.75; } | |
| /* Dense packing, SCOPED to Explore so Catalog/Overview pills are untouched. */ | |
| .explore-filters .field-row.two, .explore-advanced .field-row.two { gap: 10px; } | |
| .explore-filters .field.compact { gap: 4px; } | |
| .explore-filters .field.compact .label { font-size: 0.68rem; } | |
| .explore-filters .filter-select.compact { height: 34px; font-size: 0.86rem; padding: 0 10px; } | |
| .explore-filters select.filter-select.compact { background-position: calc(100% - 16px) 14px, calc(100% - 10px) 14px; padding-right: 32px; } | |
| .explore-filters .radio-row { gap: 6px; row-gap: 6px; } | |
| .explore-filters .radio-row .pill { padding: 5px 10px; gap: 6px; font-size: 0.82rem; line-height: 1.15; } | |
| .facet-groups { display: flex; flex-direction: column; gap: 12px; } | |
| .facet-group-title { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); font-weight: 700; margin-bottom: 5px; } | |
| .facet-opt { display: flex; align-items: center; gap: 8px; padding: 3px 5px; font-size: 0.82rem; color: var(--text); cursor: pointer; border-radius: 6px; } | |
| .facet-opt:hover { background: var(--brand-tint); } | |
| .facet-opt input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 30px; height: 17px; border-radius: 999px; background: rgba(42,40,157,0.18); position: relative; cursor: pointer; transition: background 150ms ease; } | |
| .facet-opt input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.28); transition: left 150ms ease; } | |
| .facet-opt input:checked { background: var(--brand); } | |
| .facet-opt input:checked::after { left: 15px; } | |
| .catalog-main { min-width: 0; display: flex; flex-direction: column; min-height: 0; } | |
| .toolbar { | |
| display: flex; align-items: center; justify-content: space-between; gap: 12px; | |
| padding: 7px 9px; border-bottom: 1px solid var(--hairline); flex: 0 0 auto; | |
| } | |
| .toolbar-count { color: var(--text-dim); font-weight: 600; font-size: 0.9rem; } | |
| .toolbar-count b { color: var(--text); font-family: var(--font-display); } | |
| .view-toggle { display: inline-flex; border: 1px solid var(--chip-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--chip-bg); } | |
| .view-btn { appearance: none; border: none; background: transparent; color: var(--text-dim); padding: 8px 14px; font-weight: 700; font-size: 0.84rem; cursor: pointer; font-family: var(--font-body); } | |
| .view-btn.active { background: var(--brand-active); color: #fff; } | |
| .card-grid { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 9px; display: grid; grid-template-columns: repeat(auto-fill, minmax(247px, 1fr)); gap: 12px; align-content: start; } | |
| .table-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 14px 18px 18px; } | |
| /* Model card — squared Renesas brand language: a top gradient accent that | |
| sweeps wider on hover, a framed hero stat with a solid left bar, and | |
| hairline-divided publisher row + footer with a solid-fill repo CTA. */ | |
| .model-card { | |
| position: relative; overflow: hidden; | |
| border-radius: var(--card-radius); padding: 17px 17px 15px; | |
| display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 13px; | |
| cursor: pointer; | |
| transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease; | |
| } | |
| /* Signature top accent: 3px brand→brand-2 bar, 34% wide at rest, sweeping to | |
| full width + full opacity on hover. Keep this motif on card-like surfaces. */ | |
| .model-card::before { | |
| content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; | |
| background: linear-gradient(90deg, var(--brand), var(--brand-2)); | |
| transform: scaleX(0.34); transform-origin: left; opacity: 0.8; | |
| transition: transform 220ms ease, opacity 220ms ease; | |
| } | |
| .model-card:hover { | |
| transform: translateY(-4px); border-color: var(--card-hover-border); background: var(--card-hover-bg); | |
| box-shadow: var(--card-hover-shadow); | |
| } | |
| .model-card:hover::before { transform: scaleX(1); opacity: 1; } | |
| /* Publisher row — uppercase, divided from the body by a hairline rule */ | |
| .mc-designer { | |
| display: flex; align-items: center; gap: 8px; min-width: 0; | |
| padding-bottom: 12px; border-bottom: 1px solid var(--hairline); | |
| text-transform: uppercase; letter-spacing: 0.04em; | |
| } | |
| .mc-logo { display: inline-flex; align-items: center; flex: 0 0 auto; } | |
| .mc-logo svg { display: block; } | |
| .mc-designer-name { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .mc-head { display: flex; gap: 12px; align-items: center; } | |
| .mc-monogram { | |
| flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--radius-sm); display: grid; place-items: center; | |
| font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: #fff; | |
| box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 12px rgba(42,40,157,0.18); | |
| } | |
| .mc-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.15; color: var(--text); word-break: break-word; letter-spacing: 0.01em; } | |
| .mc-sub { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; } | |
| .mc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; align-self: start; } | |
| /* Throughput hero — tinted brand panel, framed all round, with a solid brand | |
| left bar via ::before (squared accent, not a left-border-only card). */ | |
| .mc-stat { | |
| position: relative; overflow: hidden; | |
| display: flex; flex-direction: column; align-items: flex-start; gap: 3px; | |
| padding: 9px 12px 9px 16px; border-radius: var(--radius-sm); | |
| background: linear-gradient(115deg, rgba(42,40,157,0.08), rgba(67,171,226,0.05)); | |
| border: 1px solid rgba(42,40,157,0.16); | |
| /* Explicit floor so the shared subgrid row this sits in can't crush it to | |
| near-0 and clip the number: overflow:hidden zeroes the automatic minimum | |
| size CSS Grid would otherwise derive from this box's own content, so | |
| when the card grid runs short on vertical room (more rows than fit) this | |
| row shrinks first unless it has a min-height of its own. */ | |
| min-height: 70px; | |
| } | |
| .mc-stat::before { | |
| content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; | |
| background: var(--brand); | |
| } | |
| .mc-stat-num { font-family: var(--font-display); font-size: 1.78rem; font-weight: 700; color: var(--brand); line-height: 1; } | |
| :root[data-theme="c"] .mc-stat-num { color: #C3C8FF; } | |
| .mc-stat-unit { font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; color: var(--text-dim); margin-left: 4px; } | |
| .mc-stat-sub { font-size: 0.74rem; color: var(--text-dim); font-weight: 600; line-height: 1.25; } | |
| /* Empty state — greyed bar + dashed frame, transparent, italic placeholder */ | |
| .mc-stat.empty { align-items: center; text-align: center; background: transparent; border: 1px dashed var(--hairline); } | |
| .mc-stat.empty::before { background: var(--hairline); } | |
| .mc-stat.empty .mc-stat-sub { color: var(--text-mute); font-style: italic; font-weight: 500; } | |
| .mc-quants { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; align-self: start; } | |
| /* Footer — hairline rule on top; uppercase meta, solid-fill repo CTA */ | |
| .mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 13px; border-top: 1px solid var(--hairline); } | |
| .mc-foot--empty { padding-top: 0; border-top: none; } | |
| /* License + updated-date stack sized to match the repo button's height */ | |
| .mc-meta-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; } | |
| .mc-meta { font-size: 0.72rem; color: var(--text-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .mc-meta-updated { font-size: 0.68rem; color: var(--text-mute); font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .mc-foot .link { | |
| flex: 0 0 auto; | |
| background: var(--brand); border-color: var(--brand); color: #fff; | |
| box-shadow: 0 4px 12px rgba(42,40,157,0.24); | |
| } | |
| .mc-foot .link:hover { background: var(--brand-press); border-color: var(--brand-press); color: #fff; } | |
| /* Chips / badges */ | |
| .chips { display: flex; flex-wrap: wrap; gap: 8px; } | |
| .chip-btn { | |
| appearance: none; border: 1px solid var(--chip-border); background: var(--chip-bg); | |
| backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); | |
| border-radius: var(--radius-sm); padding: 7px 12px; cursor: pointer; font-weight: 700; font-size: 0.86rem; color: var(--text); | |
| transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease; | |
| } | |
| .chip-btn:hover { border-color: var(--brand); transform: translateY(-1px); } | |
| .chip-btn.active { background: var(--brand-tint); border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); } | |
| .badges { display: flex; flex-wrap: wrap; gap: 6px; } | |
| .badge { | |
| display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; | |
| font-weight: 700; font-size: 0.76rem; letter-spacing: 0.02em; | |
| background: color-mix(in srgb, var(--bc) 13%, transparent); | |
| border: 1px solid color-mix(in srgb, var(--bc) 38%, transparent); | |
| color: var(--bc); | |
| --bc: var(--bc-art); | |
| } | |
| :root[data-theme="c"] .badge { color: color-mix(in srgb, var(--bc) 55%, white); background: color-mix(in srgb, var(--bc) 24%, transparent); border-color: color-mix(in srgb, var(--bc) 45%, transparent); } | |
| .badge.clickable { cursor: pointer; } | |
| .badge.clickable:hover { border-color: var(--bc); filter: brightness(0.97); } | |
| .badge.onnx { --bc: var(--bc-onnx); } | |
| .badge.gguf { --bc: var(--bc-gguf); } | |
| .badge.cpu { --bc: var(--bc-cpu); } | |
| .badge.npu { --bc: var(--bc-npu); } | |
| .badge.dsp { --bc: var(--bc-dsp); } | |
| .badge.modality { --bc: var(--bc-modal); } | |
| .badge.art { --bc: var(--bc-art); } | |
| .badge.task { --bc: var(--bc-task); } | |
| /* status badges (mockup-style: uppercase pills) */ | |
| .badge.status { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; padding: 3px 9px; } | |
| /* ===================================================================== | |
| EXPLORE | |
| ===================================================================== */ | |
| .grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } | |
| .grid.explore-grid { display: grid; grid-template-columns: minmax(320px, 32%) 1fr; gap: 16px; margin-top: 10px; } | |
| /* Wide screens: the Configure rail and the result card each fill the full | |
| section height and scroll internally (the page itself doesn't scroll). | |
| On smaller screens the columns stack and the section scrolls normally. */ | |
| @media (min-width: 1041px) { | |
| #sec-explore.visible { overflow: hidden; } | |
| #sec-explore .explore-grid { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); } | |
| /* Both columns fill the section height and scroll internally if content | |
| overflows. The model list keeps its own natural (size=12) height — a | |
| native <select> does NOT flex reliably, so we don't stretch it. */ | |
| #sec-explore .explore-grid > .card { min-height: 0; overflow: auto; } | |
| } | |
| .matchline { font-size: 0.9rem; color: var(--text); font-weight: 700; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-tint); border: 1px solid var(--brand-ring); } | |
| .matchline b { font-family: var(--font-display); color: var(--brand); } | |
| :root[data-theme="c"] .matchline b { color: #C3C8FF; } | |
| .model-picker { border-radius: var(--radius-sm); padding: 12px; } | |
| .model-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } | |
| .model-picker-title { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 1rem; letter-spacing: 0.03em; text-transform: uppercase; } | |
| .model-picker-subtle { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; } | |
| .model-list { height: auto; min-height: 280px; padding: 8px 10px; line-height: 1.4; border-radius: var(--radius-sm); background-image: none ; padding-right: 12px ; cursor: auto; } | |
| .model-list option { padding: 7px 8px; border-radius: 4px; } | |
| /* Deploy page: numbered step strip under the section head */ | |
| .deploy-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } | |
| .deploy-steps li { | |
| display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 7px; | |
| border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface); | |
| font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.03em; | |
| text-transform: uppercase; color: var(--text-dim); | |
| } | |
| .deploy-steps .ds-num { | |
| flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; | |
| background: var(--brand); color: #fff; font-size: 0.8rem; line-height: 1; | |
| } | |
| .deploy-steps .ds-txt { white-space: nowrap; } | |
| /* Hero terminal for the download command (the only non-token colors allowed) */ | |
| /* Command terminal for the download command — light model-card style, | |
| with the brand-2 left-border accent on both Explore (#actions) and | |
| the model-details modal (#modalActions). */ | |
| #actions .cmd-row pre, | |
| #modalActions .cmd-row pre { | |
| background: var(--code-bg); | |
| color: var(--text); | |
| margin: 0; | |
| padding: 12px 14px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--hairline); | |
| border-left: 4px solid var(--brand); | |
| } | |
| .link { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--link-text); text-decoration: none; padding: 9px 13px; border-radius: var(--radius-sm); border: 1px solid var(--link-border); background: var(--link-bg); transition: background 130ms ease, border-color 130ms ease; } | |
| .link:hover { border-color: var(--brand); filter: brightness(1.02); } | |
| .link.small { padding: 6px 10px; font-size: 0.8rem; } | |
| .link.link-na { | |
| color: var(--text-mute); background: transparent; | |
| border: 1px dashed var(--input-border); cursor: default; font-weight: 600; | |
| } | |
| .link.link-na:hover { border-color: var(--input-border); filter: none; } | |
| .summary-grid { display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: stretch; } | |
| .summary-grid ul { margin: 0; padding-left: 0; list-style: none; } | |
| .summary-grid li { margin: 6px 0; color: var(--text); padding-left: 18px; position: relative; } | |
| .summary-grid li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; background: var(--brand); } | |
| :root[data-theme="c"] .summary-grid li::before { background: #6670E6; } | |
| /* Stretched to the summary list's height so the illustration grows/shrinks to | |
| match instead of leaving a mismatched gap or overflow next to it. */ | |
| .repo-buttons { display: flex; flex-direction: column; gap: 10px; align-items: stretch; height: 100%; } | |
| .repo-buttons .link { width: 100%; justify-content: center; flex: none; } | |
| /* Metrics cards */ | |
| .metric-banner { margin: 10px 0; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--surface-border); font-weight: 700; color: var(--text); } | |
| .metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; margin-top: 10px; } | |
| .metric-card { border-radius: var(--radius-sm); padding: 14px; min-width: 0; } | |
| .metric-card-title { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 0.95rem; margin-bottom: 8px; letter-spacing: 0.04em; text-transform: uppercase; } | |
| .metric-pre { white-space: pre-wrap; word-break: break-word; margin: 0; border-radius: var(--radius-sm); } | |
| /* ===================================================================== | |
| Merged "Precision & performance" block (selector + metrics) | |
| Replaces the old precision/quant chip label and the standalone | |
| "Metrics" heading. The selector drives the metrics shown beside it — | |
| each option keeps .chip-btn + data-artifact, so the click handler is | |
| unchanged (zero JS change). | |
| ===================================================================== */ | |
| .pm-heading { margin-top: 20px; } | |
| /* ===================================================================== | |
| Details tabs — "Precision & Performance" | "Download" | |
| CSS-only via hidden radio inputs + sibling selectors (same pattern | |
| as the Download/Deploy tabs inside renderActions). | |
| ===================================================================== */ | |
| .det-radio { position: absolute; opacity: 0; pointer-events: none; } | |
| .det-tab-bar { | |
| display: inline-flex; gap: 2px; padding: 3px; margin: 16px 0 0; | |
| border: 1px solid var(--chip-border); background: var(--chip-bg); | |
| border-radius: var(--radius-sm); | |
| backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); | |
| } | |
| .det-tab { | |
| cursor: pointer; user-select: none; | |
| padding: 7px 16px; border-radius: calc(var(--radius-sm) - 2px); | |
| font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; | |
| letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); | |
| transition: background 130ms ease, color 130ms ease, box-shadow 130ms ease; | |
| } | |
| .det-tab:hover { color: var(--text); } | |
| .det-panel { display: none; padding-top: 14px; } | |
| /* Active tab highlight + matching panel reveal */ | |
| .det-radio--perf:checked ~ .det-tab-bar .det-tab--perf, | |
| .det-radio--dl:checked ~ .det-tab-bar .det-tab--dl { | |
| background: var(--brand); color: #fff; | |
| box-shadow: 0 2px 8px rgba(42,40,157,0.28); | |
| } | |
| .det-radio--perf:checked ~ .det-panel-perf { display: block; } | |
| .det-radio--dl:checked ~ .det-panel-dl { display: block; } | |
| :root[data-theme="c"] .det-radio--perf:checked ~ .det-tab-bar .det-tab--perf, | |
| :root[data-theme="c"] .det-radio--dl:checked ~ .det-tab-bar .det-tab--dl { | |
| background: #6670E6; box-shadow: 0 2px 10px rgba(77,82,201,0.45); | |
| } | |
| .pm-block { | |
| display: grid; | |
| grid-template-columns: minmax(140px, 3fr) minmax(0, 4fr) minmax(0, 3fr); /* precision | est-vs-HIL graph | accuracy */ | |
| gap: 14px; | |
| align-items: stretch; /* all three columns share the same height */ | |
| margin-top: 12px; | |
| } | |
| /* ---- Selector rail (left) ---- */ | |
| .pm-rail { | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--card-border); | |
| background: var(--card-bg); | |
| backdrop-filter: var(--card-blur); | |
| -webkit-backdrop-filter: var(--card-blur); | |
| box-shadow: var(--card-shadow); | |
| padding: 12px; | |
| min-width: 0; | |
| } | |
| .pm-rail-cap { | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 0.78rem; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| color: var(--text-dim); | |
| margin-bottom: 10px; | |
| } | |
| .pm-rail-list { display: flex; flex-direction: column; gap: 6px; } | |
| /* Each selectable row keeps .chip-btn (handler-compatible); override the | |
| inherited tiny-pill look into a full-width row. */ | |
| .chip-btn.pm-opt { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| width: 100%; | |
| text-align: left; | |
| padding: 10px 12px; | |
| border: 1px solid var(--chip-border); | |
| background: var(--chip-bg); | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| position: relative; | |
| font-size: inherit; | |
| transition: background 130ms ease, border-color 130ms ease, box-shadow 130ms ease; | |
| } | |
| .chip-btn.pm-opt:hover { background: var(--brand-tint); border-color: var(--brand-ring); transform: none; } | |
| .chip-btn.pm-opt:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } | |
| /* Radio-dot indicator */ | |
| .pm-opt-dot { | |
| flex: 0 0 auto; | |
| width: 16px; height: 16px; | |
| border-radius: 50%; | |
| border: 2px solid var(--text-mute); | |
| background: transparent; | |
| display: grid; | |
| place-items: center; /* centers the check glyph regardless of box metrics */ | |
| transition: border-color 130ms ease, background 130ms ease; | |
| } | |
| /* Label (condensed display type, like brand titles) */ | |
| .pm-opt-label { | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 0.96rem; | |
| letter-spacing: 0.03em; | |
| text-transform: uppercase; | |
| color: var(--text); | |
| line-height: 1.1; | |
| word-break: break-word; | |
| } | |
| /* "Selected" badge — only on the active row */ | |
| .pm-opt-badge { | |
| flex: 0 0 auto; | |
| display: none; | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 0.62rem; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: #fff; | |
| background: rgba(255,255,255,0.22); | |
| border-radius: 999px; | |
| padding: 2px 8px; | |
| line-height: 1.3; | |
| } | |
| /* ---- ACTIVE row: unmistakable solid brand fill ---- */ | |
| .chip-btn.pm-opt.active { | |
| background: var(--brand); | |
| border-color: var(--brand); | |
| box-shadow: 0 2px 10px rgba(42,40,157,0.28), inset 0 1px 0 rgba(255,255,255,0.18); | |
| transform: none; | |
| } | |
| .chip-btn.pm-opt.active:hover { background: var(--brand-press); border-color: var(--brand-press); } | |
| .chip-btn.pm-opt.active .pm-opt-label { color: #fff; } | |
| .chip-btn.pm-opt.active .pm-opt-badge { display: inline-block; } | |
| .chip-btn.pm-opt.active .pm-opt-dot { border-color: #fff; background: #fff; } | |
| .chip-btn.pm-opt.active .pm-opt-dot::after { | |
| content: ""; | |
| width: 3.5px; height: 7px; | |
| margin-top: -1px; /* optical lift so the tick sits centred in the circle */ | |
| border: solid var(--brand); border-width: 0 2px 2px 0; | |
| transform: rotate(45deg); | |
| } | |
| .chip-btn.pm-opt.active:focus-visible { box-shadow: 0 0 0 3px var(--brand-ring), 0 2px 10px rgba(42,40,157,0.28); } | |
| .pm-opt-empty { | |
| padding: 12px; | |
| border: 1px dashed var(--hairline); | |
| border-radius: var(--radius-sm); | |
| font-size: 0.85rem; | |
| text-align: center; | |
| } | |
| /* ---- Column 2: Est-vs-HIL throughput as a small bar graph. | |
| Bars use flex-grow (not % heights) so they scale to whatever height the | |
| row stretches to, with no dependence on a definite track height. ---- */ | |
| .pm-graph, .pm-acc { display: flex; flex-direction: column; min-width: 0; } | |
| /* Title row: label left, segmented toggle right */ | |
| .pm-graph .metric-card-title { | |
| display: flex; align-items: center; justify-content: space-between; gap: 8px; | |
| } | |
| .pm-graph-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| /* Segmented metric control — always shows both options so it's immediately readable */ | |
| .pm-metric-seg { | |
| flex: 0 0 auto; display: inline-flex; | |
| border: 1px solid var(--chip-border); border-radius: 999px; | |
| background: var(--chip-bg); overflow: hidden; | |
| backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); | |
| } | |
| .pm-seg-btn { | |
| appearance: none; border: none; background: transparent; | |
| color: var(--text-mute); padding: 3px 10px; | |
| font-family: var(--font-display); font-weight: 700; | |
| font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; | |
| cursor: pointer; line-height: 1.55; white-space: nowrap; | |
| transition: background 130ms ease, color 130ms ease; | |
| } | |
| .pm-seg-btn:hover { color: var(--text); } | |
| .pm-seg-btn.active { background: var(--brand); color: #fff; border-radius: 999px; } | |
| :root[data-theme="c"] .pm-seg-btn.active { background: #6670E6; } | |
| /* Latency bars hidden by default; throughput hidden in lat-view. | |
| Use double-class selector (.pm-bars.pm-bars-lat) so specificity beats | |
| the plain .pm-bars { display:flex } rule that comes later. */ | |
| .pm-bars.pm-bars-lat { display: none; } | |
| .pm-graph.lat-view .pm-bars.pm-bars-thr { display: none; } | |
| .pm-graph.lat-view .pm-bars.pm-bars-lat { display: flex; } | |
| /* "Higher / lower is better" hint — toggles with the view */ | |
| .pm-graph-hint { margin-top: 6px; text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--text-mute); letter-spacing: 0.03em; } | |
| .pm-graph-hint .hint-lat { display: none; } | |
| .pm-graph.lat-view .pm-graph-hint .hint-thr { display: none; } | |
| .pm-graph.lat-view .pm-graph-hint .hint-lat { display: inline; } | |
| .pm-bars { flex: 1 1 auto; display: flex; align-items: stretch; justify-content: center; gap: 22px; min-height: 96px; margin-top: 12px; } | |
| .pm-bar-col { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 0 0 auto; } | |
| .pm-bar-val { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; line-height: 1; color: var(--text); } | |
| .pm-bar-track { width: 40px; flex: 1 1 auto; min-height: 56px; display: flex; flex-direction: column; position: relative; } | |
| .pm-bar-fill { width: 100%; min-height: 4px; border-radius: 6px 6px 2px 2px; } | |
| .pm-bar-fill.est { background: var(--brand-2); } | |
| .pm-bar-fill.hil { background: var(--brand); } | |
| .pm-bar-ref-line { | |
| position: absolute; left: -6px; right: -6px; height: 0; | |
| border-top: 2px dashed var(--brand-2); | |
| opacity: 0.7; pointer-events: none; z-index: 2; | |
| } | |
| .pm-bar-lbl { font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } | |
| .pm-graph-empty { flex: 1 1 auto; display: grid; place-items: center; min-height: 80px; font-size: 0.85rem; } | |
| .pm-graph-foot { margin-top: 10px; text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--text-mute); } | |
| /* ---- Column 3: Accuracy (HIL-first; "—" until published) ---- */ | |
| .pm-acc-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; } | |
| .pm-acc-num { font-family: var(--font-display); font-weight: 700; font-size: 1.95rem; line-height: 1; color: var(--brand); } | |
| :root[data-theme="c"] .pm-acc-num { color: #C3C8FF; } | |
| .pm-acc-num.empty { color: var(--text-mute); font-size: 1.6rem; } | |
| .pm-acc-sub { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); } | |
| /* ---- Per-runtime benchmark breakdown (shown when an artifact has more than | |
| one run, e.g. a vision model measured on several HIL runtimes + an estimate) ---- */ | |
| .rt-block { | |
| margin-top: 16px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--card-border); | |
| background: var(--card-bg); | |
| backdrop-filter: var(--card-blur); | |
| -webkit-backdrop-filter: var(--card-blur); | |
| box-shadow: var(--card-shadow); | |
| padding: 12px 14px; | |
| } | |
| .rt-cap { | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 0.78rem; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| color: var(--text-dim); | |
| margin-bottom: 10px; | |
| } | |
| .rt-table-wrap { overflow-x: auto; } | |
| .rt-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } | |
| .rt-table th { | |
| text-align: left; | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 0.68rem; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| color: var(--text-mute); | |
| padding: 4px 10px 8px 0; | |
| border-bottom: 1px solid var(--hairline); | |
| white-space: nowrap; | |
| } | |
| .rt-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--hairline); color: var(--text); white-space: nowrap; } | |
| .rt-table tbody tr:last-child td { border-bottom: none; } | |
| .rt-table td.rt-eng { font-weight: 600; } | |
| .rt-table td.rt-num { font-variant-numeric: tabular-nums; } | |
| .rt-table td.rt-prec { vertical-align: top; padding-right: 16px; border-right: 1px solid var(--hairline); } | |
| .rt-kind { display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; } | |
| .rt-hil { background: var(--brand); color: #fff; } | |
| .rt-est { background: transparent; color: var(--text-mute); border: 1px solid var(--hairline); } | |
| .rt-ref { background: transparent; color: var(--brand); border: 1px solid var(--brand); font-weight: 800; } | |
| :root[data-theme="c"] .rt-hil { background: #6670E6; } | |
| :root[data-theme="c"] .rt-ref { color: #6670E6; border-color: #6670E6; } | |
| /* accuracy delta colouring (shared by the accuracy card + the vs-FP32 table) */ | |
| .acc-down { color: var(--acc-down); font-weight: 700; } | |
| .acc-up { color: var(--acc-up); font-weight: 700; } | |
| :root[data-theme="c"] .acc-down { color: #E58163; } | |
| :root[data-theme="c"] .acc-up { color: #7BC08C; } | |
| /* ---- Accuracy card: delta vs FP32 + retention bar ---- */ | |
| .pm-acc-delta { margin-top: 6px; font-size: 0.78rem; font-weight: 700; } | |
| .pm-acc-delta.is-ref { color: var(--text-mute); font-weight: 600; } | |
| .pm-acc-bar { margin-top: 8px; width: 100%; max-width: 160px; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--text-mute) 22%, transparent); overflow: hidden; } | |
| .pm-acc-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--acc-down), var(--acc-up)); } | |
| .pm-acc-ret { margin-top: 5px; font-size: 0.68rem; font-weight: 600; color: var(--text-dim); } | |
| /* ---- Device utilization: one-glance strip of NPU instances/cores/freq/TOPS | |
| used vs. available, plus a derived core-utilization %. ---- */ | |
| .pm-util { margin-top: 14px; } | |
| .pm-util-src { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-mute); } | |
| .pm-util-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; } | |
| .pm-util-item { text-align: center; padding: 8px 6px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--surface-border); } | |
| .pm-util-val { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); } | |
| .pm-util-lbl { margin-top: 3px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); } | |
| .pm-util-pct .pm-util-val { color: var(--brand); } | |
| :root[data-theme="c"] .pm-util-pct .pm-util-val { color: #C3C8FF; } | |
| /* ---- Example image ("what it's doing") ---- */ | |
| .ex-fig { margin: 0; width: 100%; max-width: 220px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } | |
| .ex-media { | |
| position: relative; | |
| width: 100%; | |
| flex: 1 1 auto; | |
| min-height: 120px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--card-border); | |
| background: color-mix(in srgb, var(--text-mute) 8%, transparent); | |
| overflow: hidden; | |
| } | |
| .ex-ph { | |
| position: absolute; inset: 0; | |
| display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; | |
| color: var(--text-mute); | |
| font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; | |
| } | |
| .ex-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface); } | |
| /* Animated SVG fallback sits behind any repo image that loads successfully. | |
| contain (not cover) so the whole illustration stays visible even though | |
| the box now stretches taller to match the summary list. */ | |
| .ex-img-fallback { object-fit: contain; z-index: 0; background: transparent; } | |
| .ex-cap { margin-top: 6px; font-size: 0.68rem; font-weight: 600; color: var(--text-dim); text-align: center; flex: none; } | |
| /* ---- Dark variant (data-theme="c") — match the established #6670E6 accent ---- */ | |
| :root[data-theme="c"] .chip-btn.pm-opt.active { | |
| background: #6670E6; | |
| border-color: #6670E6; | |
| box-shadow: 0 2px 12px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.20); | |
| } | |
| :root[data-theme="c"] .chip-btn.pm-opt.active:hover { background: #565FD6; border-color: #565FD6; } | |
| :root[data-theme="c"] .chip-btn.pm-opt.active .pm-opt-dot::after { border-color: #6670E6; } | |
| /* ---- Responsive: selector ABOVE metrics on narrow screens ---- */ | |
| @media (max-width: 760px) { | |
| .pm-block { grid-template-columns: 1fr; gap: 14px; } | |
| .pm-rail-list { flex-direction: row; flex-wrap: wrap; } | |
| .chip-btn.pm-opt { width: auto; flex: 1 1 150px; } | |
| } | |
| /* Mini chart */ | |
| .mini-chart-wrap { margin-top: 12px; border: 1px solid var(--canvas-border); border-radius: var(--radius-sm); background: var(--canvas-bg); overflow: hidden; position: relative; } | |
| .mini-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 12px 0; } | |
| .mini-chart-title { font-family: var(--font-display); font-weight: 700; color: #2C2B45; letter-spacing: 0.02em; } | |
| .mini-chart-subtle { color: #5b5750; font-weight: 600; font-size: 0.85rem; } | |
| .mini-chart-wrap canvas { cursor: grab; } | |
| .mini-chart-wrap canvas:active { cursor: grabbing; } | |
| /* Download copy */ | |
| .cmd-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; } | |
| .cmd-row pre { flex: 1 1 auto; } | |
| .copy-btn { appearance: none; border: 1px solid var(--chip-border); background: var(--chip-bg); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); border-radius: var(--radius-sm); padding: 9px 12px; cursor: pointer; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; gap: 8px; color: var(--text); white-space: nowrap; transition: background 130ms ease, border-color 130ms ease; } | |
| .copy-btn:hover { background: var(--brand-tint); border-color: var(--brand); } | |
| .copy-btn.copied { background: color-mix(in srgb, var(--bc-gguf) 16%, transparent); border-color: color-mix(in srgb, var(--bc-gguf) 45%, transparent); color: var(--bc-gguf); } | |
| .copy-btn .icon { font-size: 1rem; } | |
| /* Copy button — fix visibility ONLY on Deploy tab (#actions). | |
| Model-card modal (#modalActions) keeps its original styling untouched. */ | |
| #actions .cmd-row .copy-btn { | |
| align-self: flex-start; /* compact, top-aligned, no stretch */ | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| min-width: 84px; | |
| height: 32px; /* fixed height, never grows with multi-line pre */ | |
| padding: 0 12px; | |
| font: 600 12px/1 var(--font-sans, system-ui, sans-serif); | |
| letter-spacing: 0.02em; | |
| color: var(--text); | |
| background: #fff; | |
| border: 1px solid var(--hairline); | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: background .15s ease, border-color .15s ease, | |
| color .15s ease, box-shadow .15s ease, transform .05s ease; | |
| box-shadow: 0 1px 0 rgba(20, 18, 80, 0.04); | |
| } | |
| #actions .cmd-row .copy-btn:hover { | |
| background: rgba(42, 40, 157, 0.08); | |
| border-color: rgba(42, 40, 157, 0.45); | |
| } | |
| #actions .cmd-row .copy-btn:focus-visible { | |
| outline: none; | |
| border-color: var(--brand-2); | |
| box-shadow: 0 0 0 3px rgba(42, 40, 157, 0.22); | |
| } | |
| #actions .cmd-row .copy-btn:active { | |
| transform: translateY(1px); | |
| background: rgba(42, 40, 157, 0.14); | |
| } | |
| #actions .cmd-row .copy-btn.is-copied { | |
| background: var(--brand-2); | |
| border-color: var(--brand-2); | |
| color: #fff; | |
| } | |
| /* ===================================================================== | |
| TABLE | |
| ===================================================================== */ | |
| .table-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } | |
| .table-wrap { flex: 1 1 auto; min-height: 0; border: 1px solid var(--card-border); border-radius: var(--radius-sm); overflow: auto; background: var(--card-bg); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); } | |
| table.table { width: 100%; min-width: 720px; border-collapse: collapse; background: transparent; } | |
| .table th, .table td { padding: 12px 15px; border-bottom: 1px solid var(--hairline); font-size: 0.9rem; color: var(--text); vertical-align: top; text-align: left; } | |
| /* Header — brand band with a brand-2 accent underline (the signature edge accent) */ | |
| .table th { | |
| background: var(--table-head-bg); color: var(--table-head-text); | |
| font-family: var(--font-display); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.78rem; | |
| white-space: nowrap; border-bottom: none; box-shadow: inset 0 -3px 0 var(--brand-2); | |
| } | |
| .table thead th { position: sticky; top: 0; z-index: 3; } | |
| .table tbody tr { transition: background 130ms ease; } | |
| /* subtle zebra for cross-row scanning (pinned cell gets the matching tint over its opaque base) */ | |
| .table tbody tr:nth-child(even) td { background: rgba(42,40,157,0.035); } | |
| .table tbody tr:nth-child(even) .pin { background: linear-gradient(rgba(42,40,157,0.035), rgba(42,40,157,0.035)), var(--panel-bg); } | |
| .table tbody tr:hover td { background: var(--brand-tint); } | |
| .table tbody tr:last-child td { border-bottom: none; } | |
| /* Name reads as the row's title; a left accent bar slides in on hover */ | |
| .table td.cell-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text); white-space: nowrap; } | |
| /* Publisher logo + model name in the Name cell (mirrors the card's .mc-designer) */ | |
| .tc-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } | |
| .tc-name .mc-logo { line-height: 0; } | |
| .table tbody tr:hover td.cell-name { box-shadow: inset 3px 0 0 var(--brand); } | |
| .pin { position: sticky; left: 0; z-index: 2; background: var(--panel-bg); } | |
| .table thead .pin { z-index: 4; background: var(--table-head-bg); } | |
| .table tbody tr:hover .pin { background: var(--card-hover-bg); } | |
| .table .badges { flex-direction: column; align-items: flex-start; gap: 6px; } | |
| .table .badges.badges-row { flex-direction: row; flex-wrap: wrap; } | |
| .table th.details-col, .table td.details-col { width: 1%; white-space: nowrap; } | |
| .table td.details-col { vertical-align: middle; } | |
| /* Metric mini-table — label left, value right-aligned in display type */ | |
| .cell-metrics { display: grid; gap: 3px; white-space: normal; line-height: 1.2; min-width: 118px; } | |
| .cell-metrics .row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; } | |
| .cell-metrics .k { font-size: 0.66rem; font-weight: 700; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.04em; } | |
| .cell-metrics .v { font-family: var(--font-display); font-weight: 700; color: var(--text); text-align: right; font-size: 0.95rem; line-height: 1; } | |
| .mini-btn { appearance: none; border: 1px solid var(--brand-ring); background: var(--brand-tint); color: var(--brand); border-radius: var(--radius-sm); padding: 7px 12px; font-weight: 700; font-size: 0.82rem; cursor: pointer; font-family: var(--font-body); transition: background 130ms ease; } | |
| :root[data-theme="c"] .mini-btn { color: #C3C8FF; } | |
| .mini-btn:hover { background: var(--brand); color: #fff; } | |
| /* ===================================================================== | |
| MODAL | |
| ===================================================================== */ | |
| .modal { position: fixed; inset: 0; z-index: 10000; display: none; } | |
| .modal.open { display: block; } | |
| .modal-backdrop { position: absolute; inset: 0; background: var(--modal-backdrop); backdrop-filter: blur(4px); } | |
| .modal-panel { | |
| position: absolute; top: 30px; left: 50%; transform: translateX(-50%); | |
| width: min(980px, calc(100vw - 28px)); max-height: calc(100vh - 60px); overflow: hidden; | |
| display: flex; flex-direction: column; | |
| background: var(--panel-bg); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); | |
| border-radius: var(--radius); border: 1px solid var(--panel-border); box-shadow: 0 40px 90px rgba(0,0,0,0.35), var(--panel-shadow); | |
| } | |
| :root[data-theme="a"] .modal-panel { background: #FFFFFF; border-top: 3px solid var(--brand); } | |
| .modal-head { flex: 0 0 auto; z-index: 5; background: var(--header-bg); backdrop-filter: var(--header-blur); border-bottom: 1px solid var(--hairline); border-radius: var(--radius) var(--radius) 0 0; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } | |
| .modal-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; } | |
| .modal-head-left .det-logo { height: 22px; width: auto; flex: 0 0 auto; } | |
| .modal-title { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--text); letter-spacing: 0.02em; text-transform: uppercase; } | |
| .icon-btn { appearance: none; border: 1px solid var(--chip-border); background: var(--chip-bg); border-radius: var(--radius-sm); padding: 8px 11px; cursor: pointer; font-weight: 700; color: var(--text); } | |
| .icon-btn:hover { background: var(--brand-tint); border-color: var(--brand); } | |
| .modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 18px 20px; } | |
| /* ===================================================================== | |
| Scrollbars | |
| ===================================================================== */ | |
| .facets::-webkit-scrollbar, .card-grid::-webkit-scrollbar, .table-wrap::-webkit-scrollbar, | |
| .carousel-track::-webkit-scrollbar, #sec-overview::-webkit-scrollbar, #sec-explore::-webkit-scrollbar, | |
| #sec-explore .explore-grid > .card::-webkit-scrollbar, | |
| .modal-panel::-webkit-scrollbar { width: 10px; height: 9px; } | |
| ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| /* ===================================================================== | |
| Responsive | |
| --------------------------------------------------------------------- | |
| ≥1281px Full layout (tuned for wide / ultrawide screens) | |
| ≤1280px Laptop — tighten padding, narrower rails, shorter chart | |
| ≤1040px Tablet — single-column layouts, catalog filters collapse behind a toggle | |
| ≤680px Phone — switch to natural document scroll, stack everything | |
| ===================================================================== */ | |
| /* ---------- Laptop: keep the desktop layout but ease the spacing ---------- */ | |
| @media (max-width: 1280px) { | |
| .section-title { font-size: 1.7rem; } | |
| .catalog-layout { grid-template-columns: 184px minmax(0, 1fr); } | |
| .card-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } | |
| .grid.explore-grid { grid-template-columns: minmax(300px, 36%) 1fr; } | |
| .constellation canvas { height: 400px; } | |
| .stat-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } | |
| } | |
| /* ---------- Tablet ---------- */ | |
| @media (max-width: 1040px) { | |
| /* Nav stays inline on the header row (no wrap) right down to the phone breakpoint */ | |
| .topbar-inner { padding: 10px 16px; } | |
| .grid.two, .grid.explore-grid { grid-template-columns: 1fr; } | |
| .field-row.two { grid-template-columns: 1fr 1fr; } | |
| .summary-grid { grid-template-columns: 1fr; } | |
| .repo-buttons { height: auto; align-items: flex-start; } | |
| .repo-buttons .link { width: auto; } | |
| .metric-grid { grid-template-columns: 1fr 1fr; } | |
| .catalog-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } | |
| .facets { border-right: none; border-bottom: 1px solid var(--hairline); max-height: none; overflow: visible; } | |
| /* Catalog filters collapse behind the "Filters" toggle — the old always-open | |
| top strip is removed, leaving only "left rail" (desktop) and "collapsed". | |
| Scoped to .facets-head so the Explore toggle is unaffected here. */ | |
| .facets-head .filter-toggle { display: flex; width: auto; flex: 1 1 auto; } | |
| .facets-title { display: none; } | |
| .facets-body { display: none; } | |
| .facets-body.open { display: flex; max-height: 50vh; overflow-y: auto; padding-bottom: 2px; } | |
| /* Overview model constellation — same merge: its "Chart filters" collapse moves | |
| up here too, so it has only "full" (desktop) and "collapsed" states. */ | |
| #cstlFilterToggle { display: flex; margin-bottom: 12px; } | |
| .cstl-controls { display: none; margin-bottom: 0; padding-bottom: 0; border-bottom: none; } | |
| .cstl-controls.open { display: flex; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); } | |
| } | |
| /* ---------- Phone: natural document scroll, burger nav, fully stacked ---------- */ | |
| @media (max-width: 680px) { | |
| /* Release the fixed-viewport lock so the page scrolls as one document */ | |
| html, body { height: auto; } | |
| body { height: auto; min-height: 100dvh; overflow-y: auto; overflow-x: hidden; } | |
| .topbar { position: sticky; top: 0; } | |
| .content { flex: 0 0 auto; height: auto; min-height: 0; overflow: visible; } | |
| .section { height: auto; min-height: 0; overflow: visible; } | |
| #sec-overview.visible, #sec-explore.visible { overflow: visible; } | |
| /* Header stays on a single line: brand left, burger right */ | |
| .topbar-inner { flex-wrap: nowrap; padding: 9px 12px; gap: 12px; } | |
| .brand-icon { height: 19px; } | |
| .brand-subtitle { display: none; } | |
| .nav-burger { display: inline-flex; } | |
| /* Tabs collapse into a dropdown panel under the header */ | |
| .tabs { | |
| position: absolute; top: 100%; left: 0; right: 0; margin: 0; z-index: 60; | |
| flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; | |
| display: none; | |
| background: rgba(255,255,255,0.95); backdrop-filter: blur(26px) saturate(165%); -webkit-backdrop-filter: blur(26px) saturate(165%); | |
| border-bottom: 1px solid var(--header-border); box-shadow: 0 18px 40px rgba(42,40,157,0.20); | |
| } | |
| .tabs.open { display: flex; } | |
| .nav-item { width: 100%; text-align: left; padding: 11px 14px; font-size: 0.96rem; } | |
| /* Headings scale down */ | |
| .section-title { font-size: 1.45rem; } | |
| .card-head-title { font-size: 1.12rem; } | |
| .carousel-section.featured .carousel-title { font-size: 1.18rem; } | |
| /* Overview */ | |
| .stat-tiles { grid-template-columns: 1fr 1fr; } | |
| .stat-num { font-size: 1.7rem; } | |
| .cstl-controls .field { min-width: calc(50% - 6px); flex: 1 1 calc(50% - 6px); } | |
| .constellation canvas { height: 320px; } | |
| .rc-card { flex-basis: 78vw; } | |
| /* Catalog — a wrapping two-up grid that scrolls vertically with the page | |
| (NOT a single horizontal swipe lane) */ | |
| .toolbar { flex-wrap: wrap; } | |
| .card-grid { | |
| flex: 0 0 auto; height: auto; min-height: 0; | |
| display: grid; grid-template-columns: repeat(2, 1fr); | |
| overflow-x: hidden; overflow-y: visible; | |
| gap: 10px; padding-bottom: 16px; scroll-snap-type: none; | |
| } | |
| .model-card { width: auto; scroll-snap-align: none; padding: 10px; row-gap: 8px; } | |
| .mc-monogram { width: 34px; height: 34px; font-size: 0.8rem; } | |
| .mc-head { gap: 9px; } | |
| .mc-title { font-size: 0.95rem; } | |
| .mc-stat { padding: 8px 10px 8px 11px; min-height: 54px; } | |
| .mc-stat-num { font-size: 1.18rem; } | |
| /* Table → cards: collapse each row into a stacked card (no horizontal scroll), | |
| flowing with the document. Each <td> becomes a labelled space-between row. */ | |
| .table-view { display: block; flex: 0 0 auto; height: auto; min-height: 0; overflow: visible; padding: 8px 10px 16px; } | |
| .table-wrap { max-height: none; overflow: visible; border: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } | |
| table.table { min-width: 0; display: block; width: auto; } | |
| .table thead { display: none; } | |
| .table tbody { display: flex; flex-direction: column; gap: 12px; } | |
| .table tbody tr { | |
| position: relative; overflow: hidden; display: block; | |
| padding: 15px 16px 13px; | |
| border: 1px solid var(--card-border); border-radius: var(--card-radius); | |
| background: var(--card-bg); box-shadow: var(--card-shadow); | |
| } | |
| /* signature top accent (matches .model-card) */ | |
| .table tbody tr::before { | |
| content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; | |
| background: linear-gradient(90deg, var(--brand), var(--brand-2)); | |
| transform: scaleX(0.34); transform-origin: left; opacity: 0.85; | |
| } | |
| /* cancel desktop row tints + sticky pins inside cards */ | |
| .table tbody tr:hover td, .table tbody tr:nth-child(even) td { background: transparent; } | |
| .table .pin { position: static ; left: auto ; z-index: auto; background: transparent; } | |
| .table tbody tr:hover td.cell-name { box-shadow: none; } | |
| .table tbody td { | |
| display: flex; justify-content: space-between; align-items: baseline; gap: 14px; | |
| width: auto; padding: 8px 0; border-bottom: 1px solid var(--hairline); | |
| font-size: 0.88rem; white-space: normal; text-align: right; | |
| } | |
| .table tbody td::before { | |
| content: attr(data-label); flex: 0 0 auto; text-align: left; | |
| font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; | |
| text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); | |
| } | |
| .table tbody td:last-child { border-bottom: none; } | |
| /* Name → card title (block, larger, no label) */ | |
| .table tbody td[data-label="Name"] { | |
| display: block; text-align: left; padding: 0 0 11px; margin-bottom: 4px; | |
| border-bottom: 1px solid var(--hairline); font-size: 1.18rem; white-space: normal; | |
| } | |
| .table tbody td[data-label="Name"]::before { content: none; } | |
| /* Details → full-width button */ | |
| .table tbody td.details-col { display: block; width: auto; padding: 12px 0 4px; border-bottom: none; } | |
| .table tbody td.details-col::before { content: none; } | |
| .table tbody td.details-col .mini-btn { width: 100%; } | |
| .table .cell-metrics { min-width: 0; } | |
| .table .badges, .table .badges.badges-row { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; } | |
| /* Explore */ | |
| .field-row.two { grid-template-columns: 1fr; } | |
| .metric-grid { grid-template-columns: 1fr; } | |
| .model-list { min-height: 220px; } | |
| /* Collapsible filter clusters — only Explore collapses here now. | |
| (Catalog + Overview-constellation filters collapse at ≤1040px above.) */ | |
| .filter-toggle { display: flex; } | |
| .explore-filters { display: none; } | |
| .explore-filters.open { display: grid; } | |
| /* On phone the whole page scrolls, so let the opened filter lists expand fully */ | |
| .facets-body.open { max-height: none; overflow: visible; } | |
| /* Modal goes near full-screen */ | |
| .modal-panel { top: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); } | |
| .modal-title { font-size: 1.15rem; } | |
| .modal-body { padding: 14px; } | |
| } | |
| /* Explore: on phone the single "Filters" button reveals #exploreFilters, so | |
| force the nested Advanced tier open (no two-step) and hide its desktop | |
| sub-toggle. Must come AFTER the block above to win on source order. */ | |
| @media (max-width: 680px) { | |
| .explore-advanced { display: grid; gap: 10px; } | |
| .filter-toggle--inline { display: none; } | |
| .explore-filters .field-row.two, .explore-advanced .field-row.two { grid-template-columns: 1fr 1fr; } | |
| } | |
| /* ---------- Small phone ---------- */ | |
| @media (max-width: 380px) { | |
| .stat-tiles { grid-template-columns: 1fr; } | |
| } | |
| /* ===================================================================== | |
| Download / Deploy tabs (no-JS, sibling-selector toggle) | |
| ===================================================================== */ | |
| .dl-tabs-wrap { display: block; margin-top: 6px; } | |
| .dl-tab-radio { position: absolute; opacity: 0; pointer-events: none; } | |
| /* Mode-selector cards */ | |
| .dl-mode-sel { | |
| display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; | |
| } | |
| .dl-mode-card { | |
| display: flex; align-items: flex-start; gap: 10px; | |
| padding: 11px 13px; border-radius: var(--radius-sm); | |
| border: 2px solid var(--chip-border); background: var(--chip-bg); | |
| cursor: pointer; user-select: none; | |
| transition: border-color 130ms ease, background 130ms ease, box-shadow 130ms ease; | |
| } | |
| .dl-mode-card:hover:not(.dl-mode-card--na) { | |
| border-color: var(--brand); background: var(--brand-tint, rgba(42,40,157,0.07)); | |
| } | |
| .dl-mode-card--na { opacity: 0.45; cursor: not-allowed; } | |
| .dl-mode-icon { | |
| flex: 0 0 auto; width: 30px; height: 30px; | |
| display: grid; place-items: center; | |
| background: var(--brand); color: #fff; | |
| border-radius: calc(var(--radius-sm) - 2px); | |
| font-size: 1rem; font-weight: 700; line-height: 1; | |
| } | |
| .dl-mode-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } | |
| .dl-mode-title { | |
| font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; | |
| letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); | |
| } | |
| .dl-mode-desc { font-size: 0.77rem; color: var(--text-dim); line-height: 1.4; } | |
| .dl-na-tag { | |
| font-size: 0.72rem; font-weight: 600; text-transform: none; letter-spacing: 0; | |
| color: var(--text-mute); opacity: 0.85; | |
| } | |
| .dl-panel { display: none; } | |
| /* Active card + matching panel */ | |
| .dl-tab-radio--repo:checked ~ .dl-mode-sel .dl-mode-card--repo, | |
| .dl-tab-radio--deploy:checked ~ .dl-mode-sel .dl-mode-card--deploy { | |
| border-color: var(--brand); background: var(--brand-tint, rgba(42,40,157,0.07)); | |
| box-shadow: 0 0 0 1px var(--brand); | |
| } | |
| .dl-tab-radio--repo:checked ~ .dl-mode-sel .dl-mode-card--repo .dl-mode-icon, | |
| .dl-tab-radio--deploy:checked ~ .dl-mode-sel .dl-mode-card--deploy .dl-mode-icon { | |
| background: var(--brand); | |
| } | |
| .dl-tab-radio--repo:checked ~ .dl-panel-repo, | |
| .dl-tab-radio--deploy:checked ~ .dl-panel-deploy { | |
| display: block; | |
| } | |
| /* Numbered deploy steps */ | |
| .dl-steps { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; } | |
| .dl-steps > li { padding: 0; } | |
| .dl-step-h { | |
| display: flex; align-items: center; gap: 10px; margin-bottom: 6px; | |
| font-family: var(--font-display); font-weight: 700; font-size: 0.84rem; | |
| letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); | |
| } | |
| .dl-step-n { | |
| flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; | |
| display: grid; place-items: center; | |
| background: var(--brand); color: #fff; font-size: 0.78rem; line-height: 1; | |
| } | |
| /* Dark theme tweaks (theme="c") */ | |
| :root[data-theme="c"] .dl-tab-radio--repo:checked ~ .dl-mode-sel .dl-mode-card--repo, | |
| :root[data-theme="c"] .dl-tab-radio--deploy:checked ~ .dl-mode-sel .dl-mode-card--deploy { | |
| border-color: #6670E6; box-shadow: 0 0 0 1px #6670E6; | |
| background: rgba(77,82,201,0.12); | |
| } | |
| :root[data-theme="c"] .dl-mode-icon, | |
| :root[data-theme="c"] .dl-step-n { background: #4D52C9; } | |
| /* ===================================================================== | |
| Command row: full-width, Copy pinned, scrollbar only on <pre> | |
| ===================================================================== */ | |
| /* The row itself spans the full card width and never overflows */ | |
| .dl-tabs-wrap .cmd-row { | |
| display: flex; | |
| align-items: stretch; | |
| gap: 8px; | |
| width: 100%; | |
| max-width: 100%; | |
| min-width: 0; /* critical: allows the <pre> child to shrink */ | |
| overflow: hidden; /* no scrollbar on the row */ | |
| box-sizing: border-box; | |
| } | |
| /* The <pre> takes all remaining space and scrolls horizontally on its own */ | |
| .dl-tabs-wrap .cmd-row > pre { | |
| flex: 1 1 auto; | |
| min-width: 0; /* critical: lets flex item be narrower than content */ | |
| max-width: 100%; | |
| margin: 0; | |
| overflow-x: auto; /* scrollbar lives HERE only */ | |
| overflow-y: hidden; | |
| white-space: pre; /* keep commands single-line and scrollable */ | |
| word-break: normal; | |
| overflow-wrap: normal; | |
| box-sizing: border-box; | |
| } | |
| .dl-tabs-wrap .cmd-row > pre code { | |
| white-space: pre; | |
| display: block; | |
| background: transparent; | |
| } | |
| /* Copy button stays pinned on the right, always visible */ | |
| .dl-tabs-wrap .cmd-row > .copy-btn { | |
| flex: 0 0 auto; | |
| align-self: stretch; /* matches the <pre> height */ | |
| white-space: nowrap; | |
| height: fit-content; | |
| } | |
| /* Numbered deploy steps must also allow their flex/grid children to shrink */ | |
| .dl-steps, | |
| .dl-steps > li { | |
| min-width: 0; | |
| max-width: 100%; | |
| } | |
| /* Slimmer, less intrusive scrollbar inside command boxes (optional polish) */ | |
| .dl-tabs-wrap .cmd-row > pre::-webkit-scrollbar { height: 6px; } | |
| .dl-tabs-wrap .cmd-row > pre::-webkit-scrollbar-thumb { | |
| background: var(--chip-border); | |
| border-radius: 3px; | |
| } | |
| .dl-tabs-wrap .cmd-row > pre { scrollbar-width: thin; } | |
| /* Stack cards on very narrow viewports */ | |
| @media (max-width: 420px) { .dl-mode-sel { grid-template-columns: 1fr; } } | |
| /* Tabs wrapper must not exceed the card width */ | |
| .dl-tabs-wrap { | |
| width: 100%; | |
| max-width: 100%; | |
| min-width: 0; | |
| box-sizing: border-box; | |
| } | |
| .dl-panel { | |
| width: 100%; | |
| max-width: 100%; | |
| min-width: 0; | |
| box-sizing: border-box; | |
| } | |
| .dl-panel-deploy code { | |
| background: transparent; | |
| } | |
| /* Dark themes use the white logo instead */ | |
| [data-theme="c"] .det-logo { | |
| content: url("assets/logo_renesas_white.svg"); | |
| } |