2 lines
11 KiB
CSS
2 lines
11 KiB
CSS
@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap";:root{--color-white: #ffffff;--color-black: #0b0d10;--color-cobalt-500: #1769ff;--color-cobalt-400: #4d8cff;--color-cobalt-700: #0e45b5;--color-gray-050: #f8fafc;--color-gray-100: #f1f4f8;--color-gray-200: #e3e8ef;--color-gray-300: #c7d0dc;--color-gray-500: #667384;--color-gray-700: #344052;--color-gray-900: #161b22;--color-success-500: #12a150;--color-warning-500: #d88a00;--color-danger-500: #e5484d;--color-info-500: #1683c4;--font-ui: "Manrope", ui-sans-serif, system-ui, sans-serif;--font-display: "Space Grotesk", "Manrope", ui-sans-serif, sans-serif;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--text-xs: .75rem;--text-sm: .875rem;--text-md: 1rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 2rem;--text-display: clamp(2.5rem, 8vw, 5.5rem);--leading-tight: 1.05;--leading-normal: 1.5;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--space-12: 48px;--space-16: 64px;--space-24: 96px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--radius-full: 999px;--border-thin: 1px;--border-strong: 2px;--shadow-sm: 0 2px 8px rgb(11 13 16 / 8%);--shadow-md: 0 8px 24px rgb(11 13 16 / 12%);--duration-fast: 80ms;--duration-standard: .18s;--duration-slow: .35s;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}:root,[data-theme=light]{color-scheme:light;--color-background: var(--color-gray-050);--color-surface: var(--color-white);--color-surface-raised: var(--color-white);--color-surface-muted: var(--color-gray-100);--color-text: var(--color-gray-900);--color-text-muted: var(--color-gray-500);--color-text-subtle: var(--color-gray-700);--color-border: var(--color-gray-200);--color-border-strong: var(--color-gray-300);--color-interactive: var(--color-cobalt-500);--color-interactive-hover: var(--color-cobalt-700);--color-on-interactive: var(--color-white);--color-focus: var(--color-cobalt-500);--color-stage: var(--color-gray-100);--glow-focus: 0 0 0 4px rgb(23 105 255 / 22%);--glow-selection: 0 0 0 3px rgb(23 105 255 / 18%)}[data-theme=dark]{color-scheme:dark;--color-background: #0b0d10;--color-surface: #11161d;--color-surface-raised: #18202b;--color-surface-muted: #202a37;--color-text: #f5f7fa;--color-text-muted: #a7b2c2;--color-text-subtle: #d1d8e2;--color-border: #2b3745;--color-border-strong: #425064;--color-interactive: var(--color-cobalt-400);--color-interactive-hover: #83adff;--color-on-interactive: #07142f;--color-focus: var(--color-cobalt-400);--color-stage: #202630;--glow-focus: 0 0 0 4px rgb(77 140 255 / 28%);--glow-selection: 0 0 0 3px rgb(77 140 255 / 24%)}@media(prefers-reduced-motion:reduce){:root{--duration-fast: 0ms;--duration-standard: 0ms;--duration-slow: 0ms}}*{box-sizing:border-box}html{background:var(--color-background)}body{min-width:320px;margin:0;background:var(--color-background);color:var(--color-text);font-family:var(--font-ui);font-synthesis:none;line-height:var(--leading-normal);text-rendering:optimizeLegibility;transition:background var(--duration-standard) ease,color var(--duration-standard) ease}button,input,select,textarea{font:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:var(--border-strong) solid var(--color-focus);outline-offset:3px;box-shadow:var(--glow-focus)}button{cursor:pointer}h1,h2,h3,h4{margin:0;font-family:var(--font-display);line-height:var(--leading-tight)}.catalog-page,.detail-page,.showcase-page{min-height:100vh;background:var(--color-background)}.catalog-header,.catalog-results{width:min(1120px,100% - var(--space-8));margin:0 auto}.catalog-header{padding:var(--space-24) 0 var(--space-16)}.catalog-kicker,.listing-card__status{color:var(--color-interactive);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.12em;text-transform:uppercase}h1{max-width:760px;margin:var(--space-3) 0 var(--space-4);font-size:var(--text-display)}.catalog-intro{max-width:560px;color:var(--color-text-muted);font-size:var(--text-lg)}.search-field{display:block;max-width:720px;margin-top:var(--space-12);color:var(--color-text-subtle);font-size:var(--text-sm);font-weight:var(--weight-bold)}.search-field input{display:block;width:100%;margin-top:var(--space-2);border:var(--border-thin) solid var(--color-border-strong);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);background:var(--color-surface);color:var(--color-text)}.catalog-results{padding-bottom:var(--space-24)}.results-heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);border-bottom:var(--border-thin) solid var(--color-border);padding-bottom:var(--space-3)}.results-heading span{color:var(--color-text-muted);font-size:var(--text-sm);font-variant-numeric:tabular-nums}.listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6)}.detail-page{width:min(920px,100% - var(--space-8));margin:0 auto;padding:var(--space-12) 0 var(--space-24)}.detail-back{color:var(--color-interactive);font-weight:var(--weight-bold);text-decoration:none}.detail-content{max-width:680px;padding-top:var(--space-16)}.detail-content h1{font-size:clamp(3rem,8vw,6rem)}.detail-price{color:var(--color-text);font-size:var(--text-xl);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}.detail-notes{max-width:560px;color:var(--color-text-muted);font-size:var(--text-lg)}.product-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-8);max-width:560px;margin-top:var(--space-12);border-top:var(--border-thin) solid var(--color-border);padding-top:var(--space-6)}.product-facts div{display:grid;gap:var(--space-2)}.product-facts dt{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.1em;text-transform:uppercase}.product-facts dd{margin:0}.catalog-state{padding:var(--space-12) 0;color:var(--color-text-muted)}.catalog-state--error{color:var(--color-danger-500)}.pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-6);margin-top:var(--space-8);color:var(--color-text-muted);font-size:var(--text-sm)}.pagination button{min-width:44px;min-height:44px;border:var(--border-thin) solid var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);background:var(--color-surface);color:var(--color-interactive)}.pagination button:disabled{cursor:not-allowed;opacity:.45}.showcase-page{padding:var(--space-12) max(var(--space-4),(100vw - 1200px) / 2)}.showcase-header{display:flex;align-items:end;justify-content:space-between;gap:var(--space-8);margin-bottom:var(--space-12)}.showcase-header h1{max-width:720px}.showcase-header p{max-width:600px;color:var(--color-text-muted)}.showcase-section{margin-top:var(--space-16)}.showcase-section h2{margin-bottom:var(--space-6);font-size:var(--text-2xl)}.showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}.showcase-panel{border:var(--border-thin) solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);background:var(--color-surface);box-shadow:var(--shadow-sm)}.showcase-panel h3{margin-bottom:var(--space-4);font-size:var(--text-lg)}.theme-controls,.control-row,.status-row,.swatch-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}.theme-controls{justify-content:end}.theme-controls label,.fixture-label{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--weight-bold)}.theme-controls select,.fixture-input{min-height:44px;border:var(--border-thin) solid var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);background:var(--color-surface);color:var(--color-text)}.button{min-height:44px;border:var(--border-thin) solid transparent;border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-weight:var(--weight-bold)}.button--primary{background:var(--color-interactive);color:var(--color-on-interactive)}.button--secondary{border-color:var(--color-border-strong);background:var(--color-surface);color:var(--color-text)}.button--danger{background:var(--color-danger-500);color:var(--color-white)}.button:disabled{cursor:not-allowed;opacity:.45}.swatch{display:grid;gap:var(--space-2);color:var(--color-text-muted);font-size:var(--text-xs)}.swatch__chip{width:72px;height:44px;border-radius:var(--radius-md)}.swatch__chip--cobalt{background:var(--color-cobalt-500)}.swatch__chip--success{background:var(--color-success-500)}.swatch__chip--warning{background:var(--color-warning-500)}.swatch__chip--danger{background:var(--color-danger-500)}.swatch__chip--info{background:var(--color-info-500)}.type-sample{display:grid;gap:var(--space-3)}.type-sample__display{font-family:var(--font-display);font-size:var(--text-2xl)}.type-sample__ui{font-weight:var(--weight-semibold)}.type-sample__numeric{font-size:var(--text-xl);font-variant-numeric:tabular-nums}.status{display:inline-flex;align-items:center;gap:var(--space-2);border-radius:var(--radius-full);padding:var(--space-2) var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-bold)}.status:before{width:8px;height:8px;border-radius:50%;background:currentColor;content:""}.status--available{background:color-mix(in srgb,var(--color-success-500) 14%,transparent);color:var(--color-success-500)}.status--pending{background:color-mix(in srgb,var(--color-warning-500) 16%,transparent);color:var(--color-warning-500)}.status--sold{background:color-mix(in srgb,var(--color-danger-500) 14%,transparent);color:var(--color-danger-500)}.condition{border:var(--border-thin) solid var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);color:var(--color-text-subtle);font-size:var(--text-sm)}.condition--selected{border-color:var(--color-interactive);box-shadow:var(--glow-selection)}.fixture-stage{display:grid;place-items:center;min-height:180px;border-radius:var(--radius-lg);background:var(--color-stage);color:var(--color-text-muted);text-align:center}.fixture-stage--image{min-height:240px;background:linear-gradient(135deg,var(--color-stage),var(--color-surface-muted))}.fixture-stage__glyph{font-family:var(--font-display);font-size:3rem;font-weight:var(--weight-bold)}.fixture-card{display:grid;gap:var(--space-4);border:var(--border-thin) solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-4);background:var(--color-surface-raised)}.fixture-card h3{font-size:var(--text-lg)}.fixture-card__meta{color:var(--color-text-muted);font-size:var(--text-sm)}.fixture-card__price{font-size:var(--text-lg);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}.fixture-card__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.state-stack{display:grid;gap:var(--space-3)}.state{border-radius:var(--radius-lg);padding:var(--space-4)}.state--empty{border:var(--border-thin) dashed var(--color-border-strong);color:var(--color-text-muted)}.state--loading{background:var(--color-surface-muted);color:var(--color-text-muted)}.state--error{background:color-mix(in srgb,var(--color-danger-500) 10%,transparent);color:var(--color-danger-500)}@media(max-width:768px){.catalog-header{padding-top:var(--space-16)}.listing-grid,.showcase-grid{grid-template-columns:1fr}.showcase-header{display:grid;align-items:start}.theme-controls{justify-content:start}.product-facts{grid-template-columns:1fr}}
|