spb/svgarden Public

1/*2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : src/styles/global.css7  Desc   : Site-wide design system — neutral palette, one violet accent8  ============================================================9*/1011:root {12  --sg-accent: #7f77dd;13  --sg-accent-ink: #5a51c8;14  --sg-accent-soft: rgba(127, 119, 221, 0.12);15  --sg-bg: #ffffff;16  --sg-bg-soft: #fafafa;17  --sg-bg-inset: #f4f4f5;18  --sg-text: #18181b;19  --sg-text-soft: #55555e;20  --sg-border: #e4e4e7;21  --sg-ok: #1a7f4e;22  --sg-err: #c03434;23  --sg-radius: 12px;24  --sg-maxw: 1200px;25  --sg-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;26  --sg-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;27  color-scheme: light;28}2930:root[data-theme='dark'] {31  --sg-accent-ink: #9c95e8;32  --sg-accent-soft: rgba(127, 119, 221, 0.18);33  --sg-bg: #111113;34  --sg-bg-soft: #18181b;35  --sg-bg-inset: #202024;36  --sg-text: #ececf0;37  --sg-text-soft: #a3a3af;38  --sg-border: #2a2a30;39  --sg-ok: #3dbf82;40  --sg-err: #e06c6c;41  color-scheme: dark;42}4344* { box-sizing: border-box; }4546html {47  font-family: var(--sg-font);48  scroll-behavior: smooth;49}5051body {52  margin: 0;53  background: var(--sg-bg);54  color: var(--sg-text);55  font-weight: 400;56  line-height: 1.6;57  -webkit-font-smoothing: antialiased;58}5960h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; margin: 0 0 0.5em; }61h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -0.02em; }62h2 { font-size: 1.35rem; }63h3 { font-size: 1.05rem; }64p { margin: 0 0 1em; }6566a { color: var(--sg-accent-ink); text-decoration: none; }67a:hover { text-decoration: underline; }68a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {69  outline: 2px solid var(--sg-accent);70  outline-offset: 2px;71  border-radius: 4px;72}7374.sg-skip-link {75  position: absolute;76  left: -9999px;77  top: 0;78  background: var(--sg-accent);79  color: #fff;80  padding: 0.5rem 1rem;81  border-radius: 0 0 8px 0;82  z-index: 100;83}84.sg-skip-link:focus { left: 0; }8586.sg-container {87  max-width: var(--sg-maxw);88  margin: 0 auto;89  padding: 0 clamp(1rem, 3vw, 2rem);90}9192/* ---------- header / footer ---------- */93.sg-header {94  border-bottom: 1px solid var(--sg-border);95  background: color-mix(in srgb, var(--sg-bg) 88%, transparent);96  backdrop-filter: blur(8px);97  position: sticky;98  top: 0;99  z-index: 50;100}101.sg-header-inner {102  display: flex;103  align-items: center;104  gap: 1.25rem;105  min-height: 60px;106}107.sg-logo {108  display: flex;109  align-items: center;110  gap: 0.55rem;111  font-weight: 600;112  font-size: 1.1rem;113  color: var(--sg-text);114  letter-spacing: -0.01em;115}116.sg-logo:hover { text-decoration: none; }117.sg-logo svg { display: block; }118.sg-nav { display: flex; gap: 1rem; margin-left: auto; align-items: center; }119.sg-nav a { color: var(--sg-text-soft); font-size: 0.925rem; }120.sg-nav a:hover, .sg-nav a[aria-current='page'] { color: var(--sg-text); text-decoration: none; }121122.sg-theme-toggle {123  appearance: none;124  border: 1px solid var(--sg-border);125  background: var(--sg-bg-soft);126  color: var(--sg-text-soft);127  width: 34px;128  height: 34px;129  border-radius: 50%;130  cursor: pointer;131  display: grid;132  place-items: center;133  padding: 0;134}135.sg-theme-toggle:hover { color: var(--sg-text); border-color: var(--sg-text-soft); }136.sg-theme-toggle .sg-icon-sun { display: none; }137[data-theme='dark'] .sg-theme-toggle .sg-icon-sun { display: block; }138[data-theme='dark'] .sg-theme-toggle .sg-icon-moon { display: none; }139140.sg-footer {141  border-top: 1px solid var(--sg-border);142  margin-top: 4rem;143  padding: 1.75rem 0 2.25rem;144  color: var(--sg-text-soft);145  font-size: 0.875rem;146}147.sg-footer a { color: inherit; text-decoration: underline; }148149/* ---------- hero ---------- */150.sg-hero { padding: 3rem 0 1.5rem; }151.sg-hero p { max-width: 56ch; color: var(--sg-text-soft); font-size: 1.05rem; }152153/* ---------- filter bar ---------- */154.sg-toolbar {155  display: flex;156  flex-wrap: wrap;157  gap: 0.75rem;158  align-items: center;159  padding: 1rem 0 1.5rem;160}161.sg-search {162  flex: 1 1 260px;163  position: relative;164  max-width: 420px;165}166.sg-search input {167  width: 100%;168  padding: 0.55rem 2.4rem 0.55rem 2.3rem;169  border: 1px solid var(--sg-border);170  border-radius: 999px;171  background: var(--sg-bg-soft);172  color: var(--sg-text);173  font: inherit;174  font-size: 0.925rem;175}176.sg-search input::placeholder { color: var(--sg-text-soft); }177.sg-search svg {178  position: absolute;179  left: 0.8rem;180  top: 50%;181  translate: 0 -50%;182  color: var(--sg-text-soft);183  pointer-events: none;184}185.sg-search kbd {186  position: absolute;187  right: 0.7rem;188  top: 50%;189  translate: 0 -50%;190  border: 1px solid var(--sg-border);191  border-radius: 5px;192  padding: 0 0.4rem;193  font-family: var(--sg-mono);194  font-size: 0.72rem;195  color: var(--sg-text-soft);196  background: var(--sg-bg);197}198199.sg-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }200.sg-chip {201  appearance: none;202  font: inherit;203  font-size: 0.8rem;204  padding: 0.28rem 0.75rem;205  border-radius: 999px;206  border: 1px solid var(--sg-border);207  background: var(--sg-bg-soft);208  color: var(--sg-text-soft);209  cursor: pointer;210  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;211}212.sg-chip:hover { border-color: var(--sg-accent); color: var(--sg-text); text-decoration: none; }213.sg-chip[aria-pressed='true'], .sg-chip.sg-chip-active {214  background: var(--sg-accent-soft);215  border-color: var(--sg-accent);216  color: var(--sg-accent-ink);217}218219/* ---------- gallery grid & cards ---------- */220.sg-grid {221  display: grid;222  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));223  gap: 1.25rem;224  padding-bottom: 2rem;225}226.sg-card {227  border: 1px solid var(--sg-border);228  border-radius: var(--sg-radius);229  background: var(--sg-bg-soft);230  overflow: hidden;231  transition: transform 0.15s ease, border-color 0.15s ease;232  display: flex;233  flex-direction: column;234}235.sg-card:hover { transform: translateY(-2px); border-color: var(--sg-accent); }236.sg-card[hidden] { display: none; }237.sg-card-preview {238  position: relative;239  height: 170px;240  background:241    linear-gradient(45deg, var(--sg-bg-inset) 25%, transparent 25%, transparent 75%, var(--sg-bg-inset) 75%) 0 0 / 20px 20px,242    linear-gradient(45deg, var(--sg-bg-inset) 25%, transparent 25%, transparent 75%, var(--sg-bg-inset) 75%) 10px 10px / 20px 20px,243    var(--sg-bg);244  border-bottom: 1px solid var(--sg-border);245}246.sg-card-preview iframe {247  position: absolute;248  inset: 0;249  width: 100%;250  height: 100%;251  border: 0;252  background: transparent;253}254.sg-card-body { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }255.sg-card-title {256  font-weight: 600;257  font-size: 1rem;258  color: var(--sg-text);259  margin: 0;260}261.sg-card-title a { color: inherit; }262.sg-card-title a::after { content: ''; position: absolute; inset: 0; }263.sg-card { position: relative; }264.sg-card-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: auto; }265266.sg-badge {267  font-size: 0.72rem;268  padding: 0.12rem 0.55rem;269  border-radius: 999px;270  border: 1px solid var(--sg-border);271  color: var(--sg-text-soft);272  background: var(--sg-bg);273  white-space: nowrap;274}275.sg-badge-cat { border-color: var(--sg-accent); color: var(--sg-accent-ink); background: var(--sg-accent-soft); }276.sg-badge-new { background: var(--sg-accent-ink); border-color: var(--sg-accent-ink); color: var(--sg-bg); font-weight: 600; }277.sg-badge-beginner { color: var(--sg-ok); border-color: currentColor; }278.sg-badge-intermediate { color: var(--sg-accent-ink); border-color: currentColor; }279.sg-badge-advanced { color: var(--sg-err); border-color: currentColor; }280281.sg-empty { padding: 3rem 0; text-align: center; color: var(--sg-text-soft); }282.sg-count { font-size: 0.85rem; color: var(--sg-text-soft); margin-left: auto; }283284/* ---------- detail page ---------- */285.sg-detail-head { padding: 2rem 0 1rem; }286.sg-breadcrumb { font-size: 0.85rem; color: var(--sg-text-soft); margin-bottom: 0.75rem; }287.sg-breadcrumb a { color: inherit; }288.sg-detail-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; }289290.sg-detail-grid {291  display: grid;292  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);293  gap: 1.5rem;294  align-items: start;295}296@media (max-width: 860px) { .sg-detail-grid { grid-template-columns: 1fr; } }297298.sg-panel {299  border: 1px solid var(--sg-border);300  border-radius: var(--sg-radius);301  background: var(--sg-bg-soft);302  overflow: hidden;303}304.sg-panel-bar {305  display: flex;306  align-items: center;307  gap: 0.5rem;308  padding: 0.55rem 0.9rem;309  border-bottom: 1px solid var(--sg-border);310  font-size: 0.85rem;311  color: var(--sg-text-soft);312}313.sg-panel-bar strong { color: var(--sg-text); font-weight: 600; }314.sg-panel-bar .sg-spacer { margin-left: auto; }315316.sg-preview-stage { position: relative; height: 340px; }317.sg-preview-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }318.sg-bg-toggle { display: inline-flex; border: 1px solid var(--sg-border); border-radius: 999px; overflow: hidden; }319.sg-bg-toggle button {320  appearance: none;321  border: 0;322  background: transparent;323  color: var(--sg-text-soft);324  font: inherit;325  font-size: 0.78rem;326  padding: 0.2rem 0.7rem;327  cursor: pointer;328}329.sg-bg-toggle button[aria-pressed='true'] { background: var(--sg-accent-soft); color: var(--sg-accent-ink); }330331/* customizer */332.sg-customizer { display: flex; flex-direction: column; gap: 0.9rem; padding: 1rem; }333.sg-control { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.6rem; align-items: center; }334.sg-control label { font-size: 0.85rem; font-weight: 600; }335.sg-control output {336  font-family: var(--sg-mono);337  font-size: 0.78rem;338  color: var(--sg-text-soft);339  justify-self: end;340}341.sg-control input[type='range'] { grid-column: 1 / -1; width: 100%; accent-color: var(--sg-accent); }342.sg-control input[type='color'] {343  grid-column: 1 / -1;344  width: 100%;345  height: 32px;346  padding: 2px;347  border: 1px solid var(--sg-border);348  border-radius: 8px;349  background: var(--sg-bg);350  cursor: pointer;351}352.sg-customizer-actions { display: flex; gap: 0.5rem; }353354/* buttons */355.sg-btn {356  appearance: none;357  display: inline-flex;358  align-items: center;359  gap: 0.45rem;360  font: inherit;361  font-size: 0.875rem;362  font-weight: 600;363  padding: 0.5rem 1rem;364  border-radius: 8px;365  border: 1px solid var(--sg-border);366  background: var(--sg-bg-soft);367  color: var(--sg-text);368  cursor: pointer;369  transition: border-color 0.15s ease, background 0.15s ease;370}371.sg-btn:hover { border-color: var(--sg-accent); text-decoration: none; }372.sg-btn-primary { background: var(--sg-accent-ink); border-color: var(--sg-accent-ink); color: var(--sg-bg); }373.sg-btn-primary:hover { filter: brightness(0.94); }374.sg-btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }375.sg-btn.sg-btn-done { border-color: var(--sg-ok); color: var(--sg-ok); }376.sg-btn-primary.sg-btn-done { background: var(--sg-ok); color: #fff; }377378/* code block */379.sg-codeblock { position: relative; }380.sg-codeblock pre {381  margin: 0;382  padding: 1rem 1.1rem;383  overflow: auto;384  font-family: var(--sg-mono);385  font-size: 0.82rem;386  line-height: 1.55;387  max-height: 560px;388  border-radius: 0 0 var(--sg-radius) var(--sg-radius);389}390.sg-codeblock pre code { font-family: inherit; }391392/* how it works */393.sg-prose { max-width: 72ch; }394.sg-prose p { color: var(--sg-text); }395.sg-how {396  border-left: 3px solid var(--sg-accent);397  background: var(--sg-accent-soft);398  border-radius: 0 var(--sg-radius) var(--sg-radius) 0;399  padding: 1rem 1.25rem;400  margin: 1.25rem 0;401}402.sg-how h2 { font-size: 1.05rem; margin-bottom: 0.35rem; }403.sg-how p { margin: 0; color: var(--sg-text); }404405.sg-support-note {406  display: flex;407  gap: 0.5rem;408  align-items: baseline;409  border: 1px solid var(--sg-border);410  border-radius: var(--sg-radius);411  background: var(--sg-bg-soft);412  padding: 0.65rem 0.9rem;413  font-size: 0.85rem;414  color: var(--sg-text-soft);415  margin: 1rem 0 0;416}417.sg-support-note strong { color: var(--sg-text); font-weight: 600; white-space: nowrap; }418419.sg-section { padding: 1.5rem 0 0; }420.sg-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }421422/* about page */423.sg-about { max-width: 72ch; padding-top: 2rem; }424.sg-about li { margin-bottom: 0.4em; }425426/* reduced motion: calm the site chrome (snippet previews keep their purpose) */427@media (prefers-reduced-motion: reduce) {428  html { scroll-behavior: auto; }429  .sg-card, .sg-chip, .sg-btn { transition: none; }430}431