Something went wrong. Try again.
atproto Thingiverse but good
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456/* Reusable primitives: panels, cards, buttons, tabs, pills, skeletons, and the shared blueprint vocabulary. Depends on theme.css tokens + base.css reset; loads before shell and page layers. */
/* Page-shell flex utility for routes that stack their sections vertically. */.product-shell { display: flex; flex-direction: column; gap: 0.9rem;}
/* Shared lede + eyebrow text. The mono eyebrow is for deliberate, occasional use (One-Eyebrow rule), never stacked above every section. */.product-lede { margin: 0.7rem 0 0; color: var(--color-subtle); font-size: clamp(1rem, 2vw, 1.18rem);}
.product-kicker,.eyebrow { color: var(--color-primary); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;}
/* Panels and cards */
.card-surface,.blueprint-panel,.state-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent);}
.card-title { font-family: var(--font-heading); font-weight: 600; color: var(--color-text); margin: 0; font-size: 1rem; line-height: 1.3;}
.card-body { padding: 1rem; display: grid; gap: 0.65rem;}
.card-body p { margin: 0; color: var(--color-subtle); font-size: 0.92rem;}
.card-meta { color: var(--color-muted); font-family: var(--font-mono); font-size: 0.74rem;}
/* Drafting-grid media wells and placeholders */
.card-media,.blueprint-media,.blueprint-preview { position: relative; overflow: hidden; background: linear-gradient(var(--color-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px), var(--color-overlay); background-size: 20px 20px;}
.blueprint-media { min-height: 8rem; padding: 0.75rem;}
.blueprint-axis,.blueprint-dimension { position: absolute; font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-primary);}
.blueprint-axis-x { right: 0.75rem; bottom: 0.75rem;}
.blueprint-axis-y { left: 0.75rem; top: 0.75rem;}
.blueprint-dimension { left: 0.75rem; bottom: 0.75rem;}
/* Thing cards */
.thing-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden;}
.thing-card-media { aspect-ratio: 4 / 3; min-height: 10rem;}
.thing-card-media img { display: block; width: 100%; height: 100%; object-fit: cover;}
.thing-card-placeholder { display: grid; min-height: 100%; align-content: start;}
.thing-card-placeholder::before,.thing-card-placeholder::after { content: ""; position: absolute; inset: 20% 17%; border: 1px solid var(--color-primary);}
.thing-card-placeholder::after { inset: 34% 28%; border-color: var(--color-action);}
.thing-card-body { align-content: start; grid-template-rows: auto auto auto minmax(0, 1fr) auto;}
.thing-card-heading { display: grid; gap: 0.25rem; min-width: 0;}
.thing-card-title { font-size: clamp(1rem, 1.8vw, 1.18rem);}
.thing-card-creator { color: var(--color-subtle); font-size: 0.88rem;}
.thing-card-chips { display: flex; flex-wrap: wrap; gap: 0.45rem;}
.thing-card-actions { grid-row: 5; align-self: end; display: flex; justify-content: space-between; gap: 0.65rem; margin-top: auto;}
.thing-card-actions a { text-decoration: none;}
.thing-card-stats { display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; margin: 0; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.72rem;}
.thing-card-stats div { display: contents;}
.thing-card-stats dt { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.thing-card-stats dd { margin: 0;}
/* Visually-hidden utility: keeps a heading/label in the accessibility tree (e.g. a route's <h1> during a loading skeleton) without rendering it. */.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.thing-card-action { padding: 0.18rem 0.28rem; cursor: pointer; color: var(--color-muted); background: transparent; border: 1px solid transparent; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;}
.thing-card-action:hover,.thing-card-action[aria-pressed="true"] { color: var(--color-tertiary); border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent);}
.thing-card-action:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary) 25%, transparent); outline-offset: 1px;}
.thing-card-action:disabled { cursor: wait; opacity: 0.6;}
.thing-card-action-error { flex-basis: 100%; color: var(--color-error); font-size: 0.78rem;}
/* Creator links on cards and thing detail */
.thing-card-creator-link,.thing-detail-creator-link { color: var(--color-secondary);}
.thing-card-creator-link:hover,.thing-detail-creator-link:hover { color: var(--color-link);}
/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; width: fit-content; border: 1px solid var(--color-border); border-radius: var(--radius-panel); padding: 0.55rem 0.8rem; color: var(--color-text); background: var(--color-surface); font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; line-height: 1; text-decoration: none;}
.button:hover { border-color: var(--color-primary); color: var(--color-tertiary); text-decoration: none;}
.button-primary { border-color: var(--color-action); background: var(--color-action); color: var(--color-base);}
.button-primary:hover { filter: brightness(1.04); color: var(--color-base);}
.button-secondary { border-color: var(--color-primary); color: var(--color-tertiary);}
.button-ghost { background: transparent;}
.button:disabled,.button[disabled] { cursor: not-allowed; opacity: 0.52; filter: saturate(0.7);}
.button:disabled:hover,.button[disabled]:hover { border-color: var(--color-border); color: var(--color-text); filter: saturate(0.7);}
.button-row,.tab-row { display: flex; flex-wrap: wrap; gap: 0.5rem;}
/* Tabs, status pills */
.tab,.status-pill { display: inline-flex; align-items: center; width: fit-content; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: transparent; color: var(--color-subtle); font-family: var(--font-mono); font-size: 0.72rem; line-height: 1; padding: 0.35rem 0.5rem;}
.tab.is-active,.status-pill { border-color: var(--color-primary); color: var(--color-tertiary); background: color-mix(in srgb, var(--color-primary) 8%, transparent);}
.tab:disabled,.tab[disabled] { cursor: not-allowed; opacity: 0.52; filter: saturate(0.7);}
.status-muted { border-color: var(--color-muted); color: var(--color-muted); background: transparent;}
.status-error { border-color: var(--color-error); color: var(--color-error); background: color-mix(in srgb, var(--color-error) 8%, transparent);}
/* Reusable state cards (loading / empty / error) */
.state-card { display: grid; align-content: start; gap: 0.75rem; min-height: 11rem; padding: 1rem;}
.state-card h2 { margin: 0; color: var(--color-emphasis); letter-spacing: -0.03em;}
.state-card p { margin: 0; color: var(--color-subtle);}
.error-state { border-color: color-mix(in srgb, var(--color-error) 55%, var(--color-border));}
/* Ordered lists (instructions, print settings) shared across detail + publish */
.instruction-list,.print-settings { margin: 0; padding-left: 1.25rem; color: var(--color-text);}
.instruction-list li + li,.print-settings li + li { margin-top: 0.35rem;}
/* Skeletons */
.skeleton-line,.skeleton-box { background: linear-gradient(90deg, var(--color-overlay), var(--color-highlight), var(--color-overlay)); background-size: 200% 100%; animation: blueprint-skeleton 1.8s linear infinite;}
.skeleton-line { height: 0.7rem; width: 65%;}
.skeleton-wide { width: 90%;}
.skeleton-box { min-height: 5rem;}
@keyframes blueprint-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; }}