/* Terminal skin: every rule the skin adds beyond its tokens (the tokens stay in src/app.css so the switch has them before this file arrives). Static and unlayered on purpose: it must stay outside any Tailwind layer (research/02). Linked render-blocking by src/app.html on every page (ahead of the bundle CSS, as the old script-injected link was), so classic fetches it too and the prefix below keeps it inert there; setLook() reuses that link. Every rule is prefixed :root[data-skin="terminal"]; delete this file and the skin's token block to remove the skin. */ /* ==================== TERMINAL SKIN: TIER 2 (prototype round 2, matches the POC design system) ==================== */ /* Unlayered, after everything, prefixed. !important only where a component sets an inline style or a scoped literal. */ @font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('/fonts/plex-mono-500.woff2') format('woff2'); } @font-face { font-family: 'VT323'; font-weight: 400; font-display: swap; src: url('/fonts/vt323.woff2') format('woff2'); } /* metric-matched local fallbacks: swap moves no line (research 08a) */ @font-face { font-family: 'VT323 Fallback'; src: local('Courier New'), local('CourierNewPSMT'), local('Liberation Mono'), local('DejaVu Sans Mono'), local('Cousine'), local('Nimbus Mono PS'); size-adjust: 66.67%; ascent-override: 120%; descent-override: 30%; line-gap-override: 0%; } @font-face { font-family: 'IBM Plex Mono Fallback'; src: local('Courier New'), local('CourierNewPSMT'), local('Liberation Mono'), local('DejaVu Sans Mono'), local('Cousine'), local('Nimbus Mono PS'); size-adjust: 100%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; } :root[data-skin="terminal"] { --font-crt: 'VT323', 'VT323 Fallback', 'IBM Plex Mono', ui-monospace, monospace; --t-photo: grayscale(1) contrast(1.05); } :root[data-skin="terminal"] body { font-size: 0.9rem; line-height: 1.55; } :root[data-skin="terminal"] body *:not(svg):not(svg *) { font-family: var(--font-sans) !important; letter-spacing: 0 !important; } :root[data-skin="terminal"] body *, :root[data-skin="terminal"] body *::before, :root[data-skin="terminal"] body *::after { border-radius: 0 !important; box-shadow: none !important; } :root[data-skin="terminal"] ::selection { background: var(--t-red); color: var(--t-on-red); } :root[data-skin="terminal"] :focus-visible { outline: 2px solid var(--t-red) !important; outline-offset: 2px; } /* a text control's ring hugs its own border (never reaches the label or help text around it); a control inside a .prefix-row lets the row draw the one ring */ :root[data-skin="terminal"] :is(input, textarea, select):focus-visible { outline-offset: 0; } :root[data-skin="terminal"] .prefix-row input:focus-visible { outline: none !important; } /* display face: VT323 for the wordmark, h1 and big numbers (POC .logo, .hero h1, .bigprice) */ :root[data-skin="terminal"] :is(h1, .logo-text, .brand-wordmark, .fund-meter-title, .h1-eyebrow, .fund-kicker) { font-family: var(--font-crt) !important; font-weight: 400 !important; text-transform: none; line-height: 0.95; color: var(--t-fg); } :root[data-skin="terminal"] h1 { font-size: clamp(2.4rem, 5vw, 3.4rem) !important; } :root[data-skin="terminal"] :is(.logo-text, .brand-wordmark) { font-size: 1.7rem !important; } :root[data-skin="terminal"] :is(.h1-eyebrow, .fund-kicker) { font-size: 1.1rem !important; color: var(--t-muted); } :root[data-skin="terminal"] :is(h1.fund-title) { color: var(--t-red); } :root[data-skin="terminal"] :is(.card-price, .bento-price, .product-card p.type-bold) { font-variant-numeric: tabular-nums; } :root[data-skin="terminal"] .text-3xl.type-bold, :root[data-skin="terminal"] .text-4xl.type-bold { font-family: var(--font-crt) !important; font-weight: 400 !important; font-size: 3rem !important; line-height: 1; } /* section headings: "## lowercase" (POC .sec h2) */ :root[data-skin="terminal"] :is(h2, h3.facts-method-title) { font-weight: 500 !important; font-size: 1.05rem !important; text-transform: lowercase; } :root[data-skin="terminal"] h2::before { content: "## "; content: "## " / ""; color: var(--t-red); } :root[data-skin="terminal"] :is(.section-icon) { display: none; } /* shell: header, footer, bottom nav sit on the page ground with dashed rules (POC .bar, footer) */ :root[data-skin="terminal"] :is(.app-shell, .app-header, .site-footer, .mobile-nav, .sheet, .sheet-actions) { background: var(--t-bg) !important; color: var(--t-fg); } :root[data-skin="terminal"] .app-header { border-bottom: 1px dashed var(--t-line) !important; backdrop-filter: none; } :root[data-skin="terminal"] .site-footer { border-top: 1px dashed var(--t-line) !important; color: var(--t-muted); } :root[data-skin="terminal"] .mobile-nav { border-top: 1px dashed var(--t-line) !important; } :root[data-skin="terminal"] :is(.wordmark, .logo-text, .footer-wordmark) { color: var(--t-fg) !important; } :root[data-skin="terminal"] .footer-pig { filter: grayscale(1); } :root[data-skin="terminal"][data-mode="dark"] .footer-pig { filter: invert(1) grayscale(1); } :root[data-skin="terminal"] .footer-divider { background: var(--t-line) !important; } :root[data-skin="terminal"] :is(.desktop-nav-link, .nav-item, .favorites-link) { background: none !important; color: var(--t-muted) !important; } :root[data-skin="terminal"] :is(.desktop-nav-link, .nav-item):hover { color: var(--t-fg) !important; } :root[data-skin="terminal"] :is(.desktop-nav-link.active, .nav-item.active) { color: var(--t-red) !important; } :root[data-skin="terminal"] .desktop-nav-link.active::before { content: "> "; content: "> " / ""; } :root[data-skin="terminal"] .nav-icon { background: none !important; } /* buttons: [ label ] (POC .btn); the primary action is the solid red block (POC .btn.solid) */ :root[data-skin="terminal"] :is( .hero-btn, .btn-primary, .segment-btn, .region-pill, .refinement-pill, .more-filters-pill, .filter-chip, .chip, .ctl, .brand-action, .fav-btn.labeled, .notify-btn, .shipping-option, .show-history-btn, .type-pill, .sell-pill, .start-btn, .fund-cta, .fund-meter-cta, .view-all-btn, .sheet-done-btn, .type-alert-bell, .context-bar-chip, .clear-filters-btn, [aria-label="Example searches"] button, .mobile-filter-fab, .wood-link, .carousel-arrow ) { background: none !important; color: var(--t-fg) !important; border: 0 !important; padding: 2px 4px !important; min-height: 0; height: auto; width: auto; font-weight: 400 !important; font-size: 0.9rem !important; text-transform: none !important; white-space: nowrap; transform: none !important; opacity: 1; } :root[data-skin="terminal"] :is( .hero-btn, .btn-primary, .segment-btn, .region-pill, .refinement-pill, .more-filters-pill, .filter-chip, .chip, button.ctl, .brand-action, .fav-btn.labeled, .notify-btn, .shipping-option, .show-history-btn, .type-pill, .sell-pill, .start-btn, .fund-cta, .fund-meter-cta, .view-all-btn, .sheet-done-btn, .type-alert-bell, .context-bar-chip, .clear-filters-btn, [aria-label="Example searches"] button, .mobile-filter-fab, .wood-link, .carousel-arrow )::before { content: "["; content: "[" / ""; color: var(--t-muted); position: static; background: none; width: auto; height: auto; } :root[data-skin="terminal"] :is( .hero-btn, .btn-primary, .segment-btn, .region-pill, .refinement-pill, .more-filters-pill, .filter-chip, .chip, button.ctl, .brand-action, .fav-btn.labeled, .notify-btn, .shipping-option, .show-history-btn, .type-pill, .sell-pill, .start-btn, .fund-cta, .fund-meter-cta, .view-all-btn, .sheet-done-btn, .type-alert-bell, .context-bar-chip, .clear-filters-btn, [aria-label="Example searches"] button, .mobile-filter-fab, .wood-link, .carousel-arrow )::after { content: "]"; content: "]" / ""; color: var(--t-muted); position: static; background: none; width: auto; height: auto; } :root[data-skin="terminal"] :is( .hero-btn, .btn-primary, .segment-btn, .region-pill, .refinement-pill, .more-filters-pill, .filter-chip, .chip, .ctl, .brand-action, .fav-btn.labeled, .notify-btn, .shipping-option, .show-history-btn, .type-pill, .view-all-btn, .type-alert-bell, .clear-filters-btn, [aria-label="Example searches"] button, .wood-link, .tile-bell, .carousel-arrow ):hover { background: var(--t-fg) !important; color: var(--t-bg) !important; } /* selected state: red label, no fill */ :root[data-skin="terminal"] :is(.segment-btn.selected, .region-pill.selected, .refinement-pill.active, .filter-chip.active, .chip.active, .chip[aria-pressed="true"], .shipping-option.selected, .context-bar-chip.active) { color: var(--t-red) !important; font-weight: 600 !important; } :root[data-skin="terminal"] :is(.segment-btn.selected, .region-pill.selected, .refinement-pill.active, .filter-chip.active, .chip.active, .chip[aria-pressed="true"], .shipping-option.selected)::before { content: "[*"; content: "[*" / ""; color: var(--t-red); } :root[data-skin="terminal"] :is(.refinement-pill, .filter-chip, .chip) span { color: inherit !important; } :root[data-skin="terminal"] :is(.region-count, .chip-count) { color: var(--t-muted) !important; background: none !important; } /* solid: the one primary action per view */ :root[data-skin="terminal"] :is( .hero-btn.solid, .btn-primary, .brand-action.primary, .start-btn, .fund-cta, .sell-pill, .sheet-done-btn, .mobile-filter-fab, a.w-full.type-bold[target="_blank"], div.w-full.type-bold[aria-busy] ) { background: var(--t-red) !important; color: var(--t-on-red) !important; font-weight: 700 !important; padding: 8px 14px !important; display: inline-block; } :root[data-skin="terminal"] :is(a.w-full.type-bold[target="_blank"], div.w-full.type-bold[aria-busy]) { display: block; padding: 14px !important; font-size: 1.05rem !important; transform: none !important; } :root[data-skin="terminal"] :is(a.w-full.type-bold[target="_blank"])::before { content: "["; content: "[" / ""; } :root[data-skin="terminal"] :is(a.w-full.type-bold[target="_blank"])::after { content: "]"; content: "]" / ""; } :root[data-skin="terminal"] :is(.hero-btn.solid, .btn-primary, .brand-action.primary, .start-btn, .fund-cta, .sell-pill, .sheet-done-btn, .mobile-filter-fab):is(*, :hover)::before, :root[data-skin="terminal"] :is(.hero-btn.solid, .btn-primary, .brand-action.primary, .start-btn, .fund-cta, .sell-pill, .sheet-done-btn, .mobile-filter-fab):is(*, :hover)::after { color: inherit; } :root[data-skin="terminal"] :is(.hero-btn.solid, .btn-primary, .brand-action.primary, .start-btn, .fund-cta, .sell-pill, a.w-full.type-bold[target="_blank"]):hover { background: var(--t-fg) !important; color: var(--t-bg) !important; } :root[data-skin="terminal"] :is(.hero-btn, .btn-primary, .brand-action, .start-btn, .fund-cta, .sell-pill) :is(svg, span) { color: inherit !important; } :root[data-skin="terminal"] .hero-btn { display: inline-flex; width: auto !important; } :root[data-skin="terminal"] :is(.view-all-link, .see-all, .teaser-link, .compare-link, .empty-link) { color: var(--t-red) !important; } /* icon-only heart: a bare glyph, no chip */ :root[data-skin="terminal"] .fav-btn:not(.labeled) { background: var(--t-bg) !important; border: 1px solid var(--t-line) !important; color: var(--t-fg) !important; } /* objects: single-line frames, no fills (POC .frame) */ :root[data-skin="terminal"] :is( .product-card, .drop-card, .bento-card, .brand-card, .brand-tile, .fund-card, .setup-preview, details.facts, details.pd-specs, .fund-meter-box, .empty-slot, .restock-teaser, .teaser-thumb, .vs-badge, .empty-icon, .step-number, .slot-label, .card-timestamp, .attributed-badge, select, input:not([type="checkbox"]):not([type="radio"]), .type-pill ) { background: var(--t-bg) !important; color: var(--t-fg); border-color: var(--t-line) !important; } :root[data-skin="terminal"] :is(.product-card, .drop-card, .bento-card, .brand-card, .brand-tile) { border: 1px solid var(--t-line) !important; transform: none !important; } :root[data-skin="terminal"] :is(.product-card, .drop-card, .bento-card, .brand-card, .brand-tile):hover { border-color: var(--t-fg) !important; } :root[data-skin="terminal"] :is(.product-card, .drop-card, .bento-card):hover :is(h3, .card-title, .bento-title) { color: var(--t-red) !important; } :root[data-skin="terminal"] .empty-slot { border: 1px dashed var(--t-line) !important; } :root[data-skin="terminal"] .step-number { border: 1px solid var(--t-line); color: var(--t-muted); } :root[data-skin="terminal"] .step.active .step-number { background: var(--t-red) !important; color: var(--t-on-red) !important; border-color: var(--t-red) !important; } :root[data-skin="terminal"] progress { background: var(--t-surface) !important; accent-color: var(--t-red); } /* photos: real photos on the surface, grayscale until hover (POC .ph) */ :root[data-skin="terminal"] :is(.product-card, .drop-card, .bento-card, .teaser-thumb) img { filter: var(--t-photo); transition: filter 0.3s; } :root[data-skin="terminal"] :is(.product-card, .drop-card, .bento-card):hover img { filter: none; } :root[data-skin="terminal"] :is(.image-box, .bento-image, .product-card > a > div:first-child) { background: var(--t-surface) !important; } /* brand logos assume a light ground: keep them on a paper chip in both modes */ :root[data-skin="terminal"] :is(.brand-logo-container, .tile-logo) { background: #f3f2ef !important; } /* badges: outlined, uppercase, no fill (POC .badge) */ :root[data-skin="terminal"] :is(.stock-badge, .stock-badge-live, .stock-badge-sold, .section-flag, .in-stock-badge, .stat, .sold-out-count, .filter-count-badge, .shipping-option-oos) { background: var(--t-bg) !important; border: 1px solid currentColor !important; padding: 0 4px !important; font-size: 0.72rem !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.06em !important; line-height: 1.5; color: var(--t-muted) !important; } :root[data-skin="terminal"] :is(.stock-badge-live, .badge-live, .flag-restock, .flag-new, .stat-restock, .stat-new) { color: var(--t-red) !important; } :root[data-skin="terminal"] .in-stock-badge { color: var(--t-ok) !important; } :root[data-skin="terminal"] :is(.stock-badge, .stock-badge-live, .stock-badge-sold, .section-flag) :is(span, svg) { color: inherit !important; } /* hero */ :root[data-skin="terminal"] .hero-section { background: var(--t-bg) !important; border-bottom: 1px dashed var(--t-line); } :root[data-skin="terminal"] .hero-text { letter-spacing: 0.2em !important; font-size: 0.78rem !important; } :root[data-skin="terminal"] [aria-label="Example searches"] button { color: var(--t-muted) !important; font-size: 0.78rem !important; } /* round 2 fixes: brackets sit inline whatever the button's own layout was */ :root[data-skin="terminal"] :is( .hero-btn, .btn-primary, .segment-btn, .region-pill, .refinement-pill, .more-filters-pill, .filter-chip, .chip, button.ctl, .brand-action, .fav-btn.labeled, .notify-btn, .shipping-option, .show-history-btn, .type-pill, .sell-pill, .start-btn, .fund-cta, .fund-meter-cta, .view-all-btn, .sheet-done-btn, .type-alert-bell, .context-bar-chip, .clear-filters-btn, [aria-label="Example searches"] button, .mobile-filter-fab, .wood-link, .carousel-arrow ) { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center; gap: 0.6ch !important; grid-template-columns: none !important; } :root[data-skin="terminal"] :is(.hero-btn, .btn-primary) :is(.label, span) { flex: 0 0 auto; width: auto; } :root[data-skin="terminal"] :is(a.w-full.type-bold[target="_blank"])::before { content: "[ "; content: "[ " / ""; } :root[data-skin="terminal"] :is(a.w-full.type-bold[target="_blank"])::after { content: " ]"; content: " ]" / ""; } :root[data-skin="terminal"] :is(.tile-bell, .sheet-close) { background: none !important; border: 0 !important; color: var(--t-muted) !important; } :root[data-skin="terminal"] :is(.pig-mark, .wordmark, .wordmark-pig) { color: var(--t-fg) !important; } :root[data-skin="terminal"] aside button.type-bold, :root[data-skin="terminal"] .sheet button.type-bold { background: none !important; color: var(--t-red) !important; } :root[data-skin="terminal"] .wordmark-pig { background-color: var(--t-fg) !important; } :root[data-skin="terminal"] span.inline-flex[style*="rgba("] { background: none !important; border: 1px solid currentColor; padding: 0 6px !important; font-size: 0.78rem !important; } /* ==================== TERMINAL SKIN: ROUND 3 (Ross feedback 2026-10-07) ==================== */ /* 1. nothing eases: states flip instantly, like a terminal redraw */ :root[data-skin="terminal"] body *, :root[data-skin="terminal"] body *::before, :root[data-skin="terminal"] body *::after { transition: none !important; } :root[data-skin="terminal"] body :is(a, button):hover { transform: none !important; } /* 2. chrome is lowercase; product and brand names, prices and long copy keep their case */ :root[data-skin="terminal"] body :is(nav, button, select, label, h2, h3, summary, .hero-text, .hero-title, .stat-line, .eyebrow, .carousel-subtitle, .section-label, .view-all-link, .see-all, .stock-badge, .stock-badge-live, .stock-badge-sold, .section-flag, .in-stock-badge, .stat, .shipping-select-label, .footer-links, .footer-tagline, .teaser-header, .hero-hint, .sub, .explainer, .page-title, .page-subtitle, .drops-hero h1, .feed-header h1, .fund-kicker, .fund-title, .fund-meter-title, .sell-pill, .brand-action, .fund-cta, .type-pill, .back-link, .empty-state, .empty-title, .empty-hint, .step-label, .slot-label, .empty-text, .empty-label, .h1-eyebrow, .compare-links, .text-xs.uppercase, .uppercase) { text-transform: lowercase !important; } :root[data-skin="terminal"] body:not(#_) :is(.product-card h3, .product-card a, .drop-card h3, h1.type-bold, .product-card p, .card-title, .brand-pill, .bento-title, .bento-brand, .brand-name, .tile-name, .pd-headline, .pd-record, .logo-text, .brand-wordmark, nav[aria-label="Breadcrumb"] *, ol li, .brand-option, option) { text-transform: none !important; } /* 3. red is a mark, not a text color: prompts, cursor, live state and the one solid action */ :root[data-skin="terminal"] body :is([style*=" color: var(--accent)"], [style^="color: var(--accent)"], [style*=" color: var(--accent-red)"], [style^="color: var(--accent-red)"]) { color: var(--t-fg) !important; } :root[data-skin="terminal"] body :is(.view-all-link, .see-all, .teaser-link, .compare-link, .empty-link, .eyebrow, .carousel-subtitle, .section-label, .bento-brand, a.wood-link) { color: var(--t-fg) !important; } :root[data-skin="terminal"] body :is(.view-all-link, .see-all, .teaser-link, .compare-link, .empty-link) { text-decoration: underline dashed var(--t-muted); text-underline-offset: 3px; } :root[data-skin="terminal"] body :is(.hero-text, .eyebrow, .carousel-subtitle, .section-label, .fund-kicker) { color: var(--t-muted) !important; letter-spacing: 0 !important; font-size: 0.78rem !important; font-weight: 400 !important; } :root[data-skin="terminal"] body :is(.hero-text, .eyebrow, .carousel-subtitle, .section-label)::before { content: "// "; content: "// " / ""; } :root[data-skin="terminal"] body h2::before { content: "> "; content: "> " / ""; color: var(--t-red); } :root[data-skin="terminal"] body :is(.segment-btn.selected, .region-pill.selected, .refinement-pill.active, .filter-chip.active, .chip.active, .chip[aria-pressed="true"], .shipping-option.selected, .context-bar-chip.active, .desktop-nav-link.active, .nav-item.active, h1.fund-title) { color: var(--t-fg) !important; } :root[data-skin="terminal"] body :is(.segment-btn.selected, .region-pill.selected, .refinement-pill.active, .filter-chip.active, .chip.active, .chip[aria-pressed="true"], .shipping-option.selected)::before { content: "[x"; content: "[x" / ""; color: var(--t-red); } :root[data-skin="terminal"] body :is(.stat-restock, .stat-new, .flag-restock, .flag-new) { color: var(--t-fg) !important; } @keyframes t-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { :root[data-skin="terminal"] body *::after { animation: none !important; } } /* 4. hero example searches read as search commands: "try: /crushable bevel" */ :root[data-skin="terminal"] body [aria-label="Example searches"]::before { content: "try:"; content: "try:" / ""; color: var(--t-muted); align-self: center; margin-right: 1ch; } :root[data-skin="terminal"] body [aria-label="Example searches"] button { color: var(--t-fg) !important; gap: 0 !important; text-decoration: underline dashed var(--t-muted); text-underline-offset: 3px; cursor: pointer; } :root[data-skin="terminal"] body [aria-label="Example searches"] button::before { content: "/"; content: "/" / ""; color: var(--t-red); } :root[data-skin="terminal"] body [aria-label="Example searches"] button::after { content: none; } /* 5. no emoji, no pictograms: flags go, icons become ASCII marks */ :root[data-skin="terminal"] body :is(.region-flag, .tile-flag) { display: none !important; } :root[data-skin="terminal"] body :is(.desktop-nav-link, .brand-action, .hero-btn, .btn-primary, .notify-btn, .type-alert-bell, .sell-pill, .more-filters-pill, .fav-btn, .tile-bell, .favorites-link, .view-all-btn, .back-link, .sheet-close, .carousel-arrow) svg { display: none !important; } :root[data-skin="terminal"] body :is(.fav-btn:not(.labeled), .favorites-link)::before { content: "<3"; content: "<3" / ""; font-size: 0.85rem; color: inherit; } :root[data-skin="terminal"] body .tile-bell::before { content: "[!]"; content: "[!]" / ""; font-size: 0.85rem; } :root[data-skin="terminal"] body .sheet-close::before { content: "[x]"; content: "[x]" / ""; } :root[data-skin="terminal"] body .carousel-arrow-prev { font-size: 0 !important; } :root[data-skin="terminal"] body .carousel-arrow-prev::before { content: "[<]"; content: "[<]" / ""; font-size: 0.9rem; color: var(--t-fg); } :root[data-skin="terminal"] body .carousel-arrow-next { font-size: 0 !important; } :root[data-skin="terminal"] body .carousel-arrow-next::before { content: "[>]"; content: "[>]" / ""; font-size: 0.9rem; color: var(--t-fg); } :root[data-skin="terminal"] body :is(.carousel-arrow-prev, .carousel-arrow-next)::after { content: none; } :root[data-skin="terminal"] body :is(.notify-btn, .type-alert-bell, .brand-action.primary, .btn-primary.hero-cta) > :is(span, .notify-label):first-of-type::before { content: "! "; content: "! " / ""; } :root[data-skin="terminal"] body .back-link::before { content: "<- "; content: "<- " / ""; } :root[data-skin="terminal"] body .mobile-nav .nav-icon { display: none !important; } :root[data-skin="terminal"] body .mobile-nav .nav-label { font-size: 0.8rem !important; color: inherit; } :root[data-skin="terminal"] body .mobile-nav .nav-item.active .nav-label::before { content: ">"; content: ">" / ""; color: var(--t-red); } :root[data-skin="terminal"] body .mobile-nav .active-indicator { display: none; } :root[data-skin="terminal"] body .pulse-dot, :root[data-skin="terminal"] body .stock-badge-live > span:first-child:empty { display: none !important; } :root[data-skin="terminal"] body :is(.stock-badge-live, .badge-live)::before { content: "* "; content: "* " / ""; } /* 6. dropdowns and inputs: same frame language, ASCII caret, prompt on search */ :root[data-skin="terminal"] body select { appearance: none; -webkit-appearance: none; background: var(--t-bg) !important; color: var(--t-fg) !important; border: 1px solid var(--t-line) !important; padding: 2px 4ch 2px 1ch !important; height: auto !important; min-height: 0; font-size: 0.9rem !important; text-transform: lowercase; background-image: linear-gradient(45deg, transparent 50%, var(--t-fg) 50%), linear-gradient(135deg, var(--t-fg) 50%, transparent 50%) !important; background-position: calc(100% - 1.6ch) 55%, calc(100% - 1ch) 55% !important; background-size: 0.6ch 0.6ch !important; background-repeat: no-repeat !important; } :root[data-skin="terminal"] body select:is(:hover, :focus) { border-color: var(--t-fg) !important; } :root[data-skin="terminal"] body option { background: var(--t-bg); color: var(--t-fg); } :root[data-skin="terminal"] body input:not([type="checkbox"]):not([type="radio"]) { border: 0 !important; border-bottom: 1px dashed var(--t-muted) !important; background: none !important; caret-color: var(--t-red); } :root[data-skin="terminal"] body input::placeholder { color: var(--t-muted); text-transform: lowercase; } :root[data-skin="terminal"] body input[type="checkbox"] { appearance: none; width: auto; height: auto; border: 0 !important; background: none !important; } :root[data-skin="terminal"] body input[type="checkbox"]::before { content: "[ ]"; content: "[ ]" / ""; color: var(--t-muted); } :root[data-skin="terminal"] body input[type="checkbox"]:checked::before { content: "[x]"; content: "[x]" / ""; color: var(--t-red); } :root[data-skin="terminal"] body details > summary { list-style: none; } :root[data-skin="terminal"] body :is(.facts-toggle, .pd-toggle) svg { display: none; } :root[data-skin="terminal"] body details:not([open]) :is(.facts-toggle, .pd-toggle)::after { content: " [+]"; content: " [+]" / ""; } :root[data-skin="terminal"] body details[open] :is(.facts-toggle, .pd-toggle)::after { content: " [-]"; content: " [-]" / ""; } :root[data-skin="terminal"] body :is(.stock-badge-live, .badge-live) :is(svg, span:empty, .live-dot, [class*="dot"]) { display: none !important; } :root[data-skin="terminal"] body .carousel-arrow { font-size: 0.9rem !important; } :root[data-skin="terminal"] body:not(#_) [aria-label="Example searches"] button::before { content: "/" !important; content: "/" / "" !important; color: var(--t-red) !important; } :root[data-skin="terminal"] body:not(#_) [aria-label="Example searches"] button::after { content: none !important; } :root[data-skin="terminal"] body:not(#_) .carousel-arrow-prev::before { content: "[<" !important; content: "[<" / "" !important; color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .carousel-arrow-next::before { content: "[>" !important; content: "[>" / "" !important; color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .carousel-arrow::after { content: "]" !important; content: "]" / "" !important; color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) :is(.stock-badge-live, .badge-live) > :is(span, svg, i):first-child:not(.live-text) { display: none !important; } :root[data-skin="terminal"] body:not(#_) :is(.hero-title, .mobile-nav .nav-label) { text-transform: lowercase !important; } /* round 4: leftovers that needed a markup hook (.pict, .search-glyph) */ :root[data-skin="terminal"] body:not(#_) :is(.desktop-nav-link .pig-mark, .meter-icon, .claims-icon) { display: none !important; } :root[data-skin="terminal"] body:not(#_) .pict { font-size: 0 !important; opacity: 1 !important; } :root[data-skin="terminal"] body:not(#_) .pict::before { content: attr(data-ascii); font-size: 0.9rem; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .search-glyph svg { display: none !important; } :root[data-skin="terminal"] body:not(#_) .search-glyph::before { content: ">"; content: ">" / ""; color: var(--t-red); font-weight: 600; } /* filter panel: no icons, ASCII toggles, prompt on search, ink clear-all */ :root[data-skin="terminal"] body:not(#_) .filter-panel svg { display: none !important; } :root[data-skin="terminal"] body:not(#_) .filter-panel button.group::after { content: "[+]"; content: "[+]" / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .filter-panel button.group:has(svg.rotate-180)::after { content: "[-]"; content: "[-]" / ""; } :root[data-skin="terminal"] body:not(#_) .filter-panel .relative:has(> svg)::before { content: ">"; content: ">" / ""; color: var(--t-red); font-weight: 600; position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); } :root[data-skin="terminal"] body:not(#_) .filter-panel .clear-all { color: var(--t-fg) !important; background: none !important; } :root[data-skin="terminal"] body:not(#_) .filter-panel .stock-dot { background: none !important; width: auto !important; height: auto !important; } :root[data-skin="terminal"] body:not(#_) .filter-panel .stock-dot::before { content: "+"; content: "+" / "in stock"; color: var(--t-muted); font-size: 0.8rem; } :root[data-skin="terminal"] body:not(#_) select { background-color: var(--t-bg) !important; background-repeat: no-repeat !important; background-size: 0.6ch 0.6ch !important; background-image: linear-gradient(45deg, transparent 50%, var(--t-fg) 50%), linear-gradient(135deg, var(--t-fg) 50%, transparent 50%) !important; background-position: calc(100% - 1.6ch) 55%, calc(100% - 1ch) 55% !important; } /* round 4 sweep: fund, setup, footer */ :root[data-skin="terminal"] body:not(#_) .fund-kicker { font-size: 0.8rem !important; text-transform: lowercase; } :root[data-skin="terminal"] body:not(#_) .fund-kicker::before { content: "// "; content: "// " / ""; } :root[data-skin="terminal"] body:not(#_) :is(.fund-arrow, .footer-social-icon, .empty-icon) { display: none !important; } :root[data-skin="terminal"] body:not(#_) .fund-cta::after { content: " ->]" !important; content: " ->]" / "" !important; } :root[data-skin="terminal"] body:not(#_) main :is(p, li) > a:not([class]) { color: var(--t-fg) !important; text-decoration: underline dashed !important; text-underline-offset: 3px; } :root[data-skin="terminal"] body:not(#_) :is(.prose-block, .fund-fine-print) a, :root[data-skin="terminal"] body:not(#_) a.inline-link { color: var(--t-fg) !important; text-decoration: underline dashed !important; text-underline-offset: 3px; } :root[data-skin="terminal"] body:not(#_) :is(.bell-btn, .brand-site-link, .gallery-prev, .gallery-next) svg { display: none !important; } :root[data-skin="terminal"] body:not(#_) .bell-btn:not(:has(.bell-label))::before { content: "[!]"; content: "[!]" / ""; font-size: 0.85rem; } :root[data-skin="terminal"] body:not(#_) .brand-site-link::before { content: "[->]"; content: "[->]" / ""; font-size: 0.85rem; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) :is(.gallery-prev, .gallery-next) { background: var(--t-bg) !important; color: var(--t-fg) !important; border: 1px solid var(--t-line); font-size: 0.9rem; } :root[data-skin="terminal"] body:not(#_) .gallery-prev::before { content: "[<]"; content: "[<]" / ""; } :root[data-skin="terminal"] body:not(#_) .gallery-next::before { content: "[>]"; content: "[>]" / ""; } :root[data-skin="terminal"] body:not(#_) h1.page-title { text-transform: lowercase !important; } :root[data-skin="terminal"] body:not(#_) .brand-site-link { white-space: nowrap; } /* ticket 18: carousel arrows. hidden when there is nowhere to scroll; hover inverts in place (the global hover transform reset was knocking them off center) */ :root[data-skin="terminal"] body:not(#_) .carousel-arrow { gap: 0 !important; padding: 0 0.5ch !important; width: auto !important; height: auto !important; line-height: 1.6; background: var(--t-bg) !important; border: 1px solid var(--t-line) !important; opacity: 1 !important; } :root[data-skin="terminal"] body:not(#_) .carousel-arrow:is(*, :hover, :active) { transform: translateY(-50%) !important; } :root[data-skin="terminal"] body:not(#_) .carousel-arrow:disabled { visibility: hidden !important; } :root[data-skin="terminal"] body:not(#_) .carousel-arrow:is(:hover, :focus-visible) { background: var(--t-fg) !important; border-color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .carousel-arrow:is(:hover, :focus-visible)::before, :root[data-skin="terminal"] body:not(#_) .carousel-arrow:is(:hover, :focus-visible)::after { color: var(--t-bg) !important; } /* ==================== TICKET 18: POC ORNAMENTS (test batch A) ==================== */ /* A1 tapered section divider */ :root[data-skin="terminal"] body:not(#_) main section.border-t { border-top: 0 !important; } :root[data-skin="terminal"] body:not(#_) main section.border-t::before { content: "· · - - ----------==============================---------- - - · ·"; content: "· · - - ----------==============================---------- - - · ·" / ""; display: flex; justify-content: center; white-space: nowrap; overflow: hidden; color: var(--t-muted); margin-bottom: 2rem; user-select: none; } /* A2 titled frames */ :root[data-skin="terminal"] body:not(#_) :is(.history-panel, .fund-meter-box, .filter-panel > div) { position: relative; border: 1px solid var(--t-line) !important; overflow: visible !important; } :root[data-skin="terminal"] body:not(#_) :is(.history-panel, .fund-meter-box, .filter-panel > div)::before { position: absolute; top: -0.8em; left: 12px; padding: 0 0.5ch; background: var(--t-bg); color: var(--t-muted); font-size: 0.78rem; white-space: pre; text-transform: lowercase; } :root[data-skin="terminal"] body:not(#_) .history-panel::before { content: attr(aria-label); content: attr(aria-label) / ""; } :root[data-skin="terminal"] body:not(#_) .fund-meter-box::before { content: "dama fund"; content: "dama fund" / ""; } :root[data-skin="terminal"] body:not(#_) .fund-meter-title { display: none !important; } :root[data-skin="terminal"] body:not(#_) .fund-meter-box { padding: 14px 12px 10px !important; } :root[data-skin="terminal"] body:not(#_) .filter-panel > div::before { content: "filters"; content: "filters" / ""; } /* A5 status line on the hero */ :root[data-skin="terminal"] body:not(#_) .stat-line::before { content: "[ ok ] "; content: "[ ok ] " / ""; color: var(--t-ok); } :root[data-skin="terminal"] body:not(#_) .stat-line .mx-2 { font-size: 0 !important; } :root[data-skin="terminal"] body:not(#_) .stat-line .mx-2::before { content: "/"; content: "/" / ""; font-size: 0.8rem; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .stat-line span[style] { color: var(--t-fg) !important; font-weight: 600; } /* A8 breadcrumb as a path */ :root[data-skin="terminal"] body:not(#_) main nav.mb-6 > ol { gap: 0.5ch !important; font-size: 0.8rem; } :root[data-skin="terminal"] body:not(#_) main nav.mb-6 > ol::before { content: "~/"; content: "~/" / ""; color: var(--t-red); font-weight: 600; } /* A10 radio marks */ :root[data-skin="terminal"] body:not(#_) .shipping-option[role="radio"]::before { content: "( ) " !important; content: "( ) " / "" !important; color: var(--t-muted) !important; } :root[data-skin="terminal"] body:not(#_) .shipping-option[role="radio"][aria-checked="true"]::before { content: "(*) " !important; content: "(*) " / "" !important; color: var(--t-red) !important; } :root[data-skin="terminal"] body:not(#_) .shipping-option[role="radio"]::after { content: none !important; } /* footer separators */ :root[data-skin="terminal"] body:not(#_) .footer-divider { background: none !important; width: auto !important; height: auto !important; } :root[data-skin="terminal"] body:not(#_) .footer-divider::before { content: "/"; content: "/" / ""; color: var(--t-muted); } /* ==================== TICKET 18: POC ORNAMENTS (test batch B) ==================== */ /* B3 dither skeletons, no shimmer */ :root[data-skin="terminal"] body:not(#_) :is(.skeleton, .teaser-skeleton, .animate-pulse) { animation: none !important; background: repeating-conic-gradient(var(--t-line) 0 25%, transparent 0 50%) 0 0 / 4px 4px !important; } /* B4 ASCII spinner, stepped progress bar */ :root[data-skin="terminal"] body:not(#_) svg.animate-spin { display: none !important; } :root[data-skin="terminal"] body:not(#_) :has(> svg.animate-spin)::before { content: "|/-\\"; content: "|/-\\" / ""; display: inline-block; width: 1ch; overflow: hidden; white-space: nowrap; text-align: left; color: var(--t-red); animation: t-spin 0.6s steps(4) infinite; } @keyframes t-spin { to { text-indent: -4ch; } } :root[data-skin="terminal"] body:not(#_) .nav-progress { animation-timing-function: steps(12, end) !important; background: var(--t-red) !important; } @media (prefers-reduced-motion: reduce) { :root[data-skin="terminal"] body:not(#_) :has(> svg.animate-spin)::before { animation: none !important; } } /* B6 history table as a log */ :root[data-skin="terminal"] body:not(#_) .history-panel .table-wrap :is(table, th, td) { border: 0 !important; background: none !important; font-size: 0.8rem; font-variant-numeric: tabular-nums; } :root[data-skin="terminal"] body:not(#_) .history-panel .table-wrap td:first-child { color: var(--t-muted); white-space: nowrap; } :root[data-skin="terminal"] body:not(#_) .history-panel .table-wrap th { font-weight: 400 !important; color: var(--t-muted); text-transform: lowercase; } :root[data-skin="terminal"] body:not(#_) .history-panel .table-caption::before { content: "$ tail -f "; content: "$ tail -f " / ""; color: var(--t-muted); } /* B7 404 face */ :root[data-skin="terminal"] body:not(#_) .error-page .logo { display: none !important; } :root[data-skin="terminal"] body:not(#_) .error-page .status-badge { color: var(--t-muted) !important; background: none !important; border: 0 !important; } :root[data-skin="terminal"] body:not(#_) .error-page .status-badge::before { content: "// http "; content: "// http " / ""; } /* port gap: secondary buttons had no brackets */ :root[data-skin="terminal"] body:not(#_) .btn-secondary { background: none !important; border: 0 !important; color: var(--t-fg) !important; text-transform: lowercase; } :root[data-skin="terminal"] body:not(#_) .btn-secondary::before { content: "[ "; content: "[ " / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .btn-secondary::after { content: " ]"; content: " ]" / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .error-page .logo-link::before { font-family: var(--font-sans) !important; letter-spacing: 0 !important; word-spacing: 0 !important; font-weight: 400; text-transform: none; padding: 0; margin: 0; } :root[data-skin="terminal"] body:not(#_) .error-page :is(.headline, .btn-primary, .status-badge) { text-transform: lowercase !important; } :root[data-skin="terminal"] body:not(#_) .error-page .status-badge { font-size: 0.85rem !important; font-weight: 400 !important; } :root[data-skin="terminal"] body:not(#_) .error-page .logo-link::before { font-size: 1.05rem !important; font-weight: 600 !important; line-height: 1.1 !important; } /* specs toggle: the classic chevron is a rotated bordered ::after; flatten it so the ASCII mark sits straight */ :root[data-skin="terminal"] body:not(#_) .pd-toggle::after { transform: none !important; rotate: none !important; border: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; display: inline !important; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .pd-toggle { text-transform: lowercase !important; } :root[data-skin="terminal"] body:not(#_) .fund-meter-cta { text-transform: lowercase !important; } /* ==================== TICKET 18 batch 2: wordmark slash, double buy box ==================== */ :root[data-skin="terminal"] body:not(#_) .buy-box { position: relative; border: 3px double var(--t-fg) !important; padding: 20px 16px 16px; } :root[data-skin="terminal"] body:not(#_) .buy-box::before { content: " " attr(data-shop) " "; content: " " attr(data-shop) " " / ""; position: absolute; top: -0.8em; left: 12px; background: var(--t-bg); color: var(--t-muted); font-size: 0.78rem; white-space: pre; text-transform: lowercase; } /* ASCII pig logo (footer) and its dead twin (404) */ :root[data-skin="terminal"] body:not(#_) .ascii-pig { font-family: var(--font-sans) !important; font-size: min(5px, calc((100vw - 32px) / 140 / 0.6)); line-height: 1.05; letter-spacing: 0; white-space: pre; color: var(--t-fg); margin: 0 auto 1rem; width: max-content; text-align: left; user-select: none; overflow: hidden; } :root[data-skin="terminal"] body:not(#_) .ascii-pig.dead { rotate: 180deg; color: var(--t-muted); margin-bottom: 0.5rem; } :root[data-skin="terminal"] body:not(#_) .site-footer:has(.t-piece-logo) .footer-brand-mark { display: none !important; } :root[data-skin="terminal"] body:not(#_) .error-page .status-badge::after { content: " x_x"; content: " x_x" / ""; color: var(--t-red); } /* animated pieces: drop board and logo carve-in */ :root[data-skin="terminal"] body:not(#_) .t-piece-wrap { position: relative; width: max-content; max-width: 100%; margin: 0 auto 1.5rem; } :root[data-skin="terminal"] body:not(#_) .t-piece { overflow-x: auto; margin: 0 auto; max-width: 100%; } :root[data-skin="terminal"] body:not(#_) .t-piece pre { font-family: var(--font-sans) !important; margin: 0 auto; width: max-content; white-space: pre; line-height: 1.2; text-align: left; user-select: none; contain: content; overflow: hidden; text-rendering: optimizeSpeed; font-kerning: none; font-variant-ligatures: none; letter-spacing: 0; width: calc(var(--cols, 94) * 1ch); height: calc(var(--rows) * 1lh); } :root[data-skin="terminal"] body:not(#_) .t-piece-board pre { font-size: min(13px, calc((100vw - 32px) / 80 / 0.6)); } :root[data-skin="terminal"] body:not(#_) .t-piece-board :is(.c0, .c1, .c7) { color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .t-piece-board .c2 { color: var(--t-fg); } :root[data-skin="terminal"] body:not(#_) .t-piece-board .c3 { color: var(--t-red); font-weight: 700; } :root[data-skin="terminal"] body:not(#_) .t-piece-board .c4 { color: var(--t-ok); } :root[data-skin="terminal"] body:not(#_) .t-piece-board .c5 { color: var(--t-fg); font-weight: 700; } :root[data-skin="terminal"] body:not(#_) .t-piece-board .c6 { color: var(--t-warn); } :root[data-skin="terminal"] body:not(#_) .t-piece-board .c8 { color: var(--t-fg); font-weight: 700; } :root[data-skin="terminal"] body:not(#_) .t-piece-logo pre { font-size: min(5px, calc((100vw - 32px) / 150 / 0.6)); line-height: 1.05; } :root[data-skin="terminal"] body:not(#_) .t-piece-logo .c0 { color: var(--t-fg); } :root[data-skin="terminal"] body:not(#_) .t-piece-logo .c1 { color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .t-piece-logo .c2 { color: var(--t-line); } :root[data-skin="terminal"] body:not(#_) .t-piece-logo .c3 { color: var(--t-red); } /* drops page leftovers */ :root[data-skin="terminal"] body:not(#_) .drop-card .notify-btn:not(.watch-pill) { font-size: 0 !important; } :root[data-skin="terminal"] body:not(#_) .drop-card .notify-btn:not(.watch-pill)::before { content: "[!]" !important; content: "[!]" / "" !important; font-size: 0.85rem; color: var(--t-muted) !important; } :root[data-skin="terminal"] body:not(#_) .drop-card .notify-btn:not(.watch-pill)::after { content: none !important; } :root[data-skin="terminal"] body:not(#_) .hub-footer a { color: var(--t-fg) !important; text-decoration: underline dashed !important; text-underline-offset: 3px; } :root[data-skin="terminal"] body:not(#_) .teaser-title { text-transform: lowercase !important; } :root[data-skin="terminal"] body:not(#_) .teaser-title::before { content: "// "; content: "// " / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .ascii-pig { font-weight: 600; } :root[data-skin="terminal"] body:not(#_) .ascii-pig.dead { color: var(--t-fg); } /* brand, shop and product names always keep their own case, wherever they sit */ :root[data-skin="terminal"] body:not(#_) :is(.keep-case, .keep-case *, .alt-brand, .alt-title, .facts-body h2, .type-medium, label.brand-option, label.brand-option *, .bell-label, main a.text-xs.type-bold.uppercase.tracking-wider, .brand-hero h1, .brand-hero span, .fav-title, .tile-name, .mini-label + *, .slot-title, .picker-title, .picker-brand) { text-transform: none !important; } :root[data-skin="terminal"] body:not(#_) .buy-box::before { text-transform: none !important; } :root[data-skin="terminal"] body:not(#_) main nav:is(.mb-4, .mb-6) :is(span, a, li) { text-transform: none !important; } /* home carousels: smaller cards in the skin (Ross 2026-10-08). classic is 72vw / 220px */ :root[data-skin="terminal"] body:not(#_) .carousel-card-wrapper { width: calc((100vw - 44px) / 2) !important; max-width: 176px !important; } /* same width as a two-column grid card on phones */ @media (min-width: 640px) { :root[data-skin="terminal"] body:not(#_) .carousel-card-wrapper { width: 176px !important; } } /* one card size everywhere (Ross 2026-10-08): 176px columns wherever product, drop or bento cards sit in a grid; two columns on phones */ :root[data-skin="terminal"] body:not(#_) :is(.product-grid, .grid:has(> .product-card), .grid:has(> * > .product-card), .drops-grid, .bento-grid, .sold-out-grid, .picks-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } @media (min-width: 640px) { :root[data-skin="terminal"] body:not(#_) :is(.product-grid, .grid:has(> .product-card), .grid:has(> * > .product-card), .drops-grid, .bento-grid, .sold-out-grid, .picks-grid) { grid-template-columns: repeat(auto-fill, 176px) !important; justify-content: start; } } :root[data-skin="terminal"] body:not(#_) :is(.bento-grid, .sold-out-grid) > * { grid-column: auto !important; grid-row: auto !important; } /* home brand cards: tighter inside and between (Ross 2026-10-08) */ :root[data-skin="terminal"] body:not(#_) .brand-grid { gap: 6px !important; } :root[data-skin="terminal"] body:not(#_) .brand-card { padding: 8px 6px !important; } :root[data-skin="terminal"] body:not(#_) .brand-card .brand-logo-container { width: 40px !important; height: 40px !important; margin-bottom: 4px !important; } :root[data-skin="terminal"] body:not(#_) .brand-card .brand-name { margin-bottom: 0 !important; line-height: 1.25; } :root[data-skin="terminal"] body:not(#_) .brand-card .brand-meta { font-size: 0.7rem !important; line-height: 1.3; } /* terminal border for brand cards: dashed rule with + corners, solid on hover */ :root[data-skin="terminal"] body:not(#_) .brand-card { position: relative; border: 1px dashed var(--t-muted) !important; background: var(--t-bg) !important; overflow: visible !important; } :root[data-skin="terminal"] body:not(#_) .brand-card::before, :root[data-skin="terminal"] body:not(#_) .brand-card::after { content: "+"; content: "+" / ""; position: absolute; font-size: 0.8rem; line-height: 1; width: 1ch; background: var(--t-bg); color: var(--t-fg); pointer-events: none; } :root[data-skin="terminal"] body:not(#_) .brand-card::before { top: -0.48em; left: -0.5ch; } :root[data-skin="terminal"] body:not(#_) .brand-card::after { bottom: -0.5em; right: -0.5ch; } :root[data-skin="terminal"] body:not(#_) .brand-card:is(:hover, :focus-visible) { border: 1px solid var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .brand-card:is(:hover, :focus-visible)::before, :root[data-skin="terminal"] body:not(#_) .brand-card:is(:hover, :focus-visible)::after { color: var(--t-red); } :root[data-skin="terminal"] body:not(#_) .brand-card .brand-instock { display: block; } :root[data-skin="terminal"] body:not(#_) .brand-grid { gap: 10px !important; } /* about page: the name as terminal text in place of the echo image */ :root[data-skin="terminal"] body:not(#_) .echo-hero:has(.t-piece-word) .echo-mark { display: none !important; } :root[data-skin="terminal"] body:not(#_) .t-piece-word { margin: 0.75rem auto 1.25rem; overflow: hidden; } :root[data-skin="terminal"] body:not(#_) .t-piece-word pre { font-size: min(11px, calc((100vw - 32px) / var(--cols, 150) / 0.6)); line-height: 1.05; font-weight: 600; } :root[data-skin="terminal"] body:not(#_) .t-piece-word .c0 { color: var(--t-fg); } :root[data-skin="terminal"] body:not(#_) .t-piece-word .c2 { color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .echo-kicker { text-transform: lowercase !important; color: var(--t-muted) !important; font-size: 0.85rem !important; font-weight: 400 !important; } :root[data-skin="terminal"] body:not(#_) .echo-kicker::before { content: "// "; content: "// " / ""; } /* ==================== phone-width fixes ==================== */ /* the section divider is nowrap text: stop it from setting the page's minimum width */ :root[data-skin="terminal"] body:not(#_) main section.border-t::before { inline-size: 0; min-inline-size: 100%; } /* pill rows that scroll sideways were forcing these pages wider than the screen (also true in classic) */ :root[data-skin="terminal"] body:not(#_) :is(.beginner-page, .drops-page) { width: 100% !important; min-width: 0 !important; } :root[data-skin="terminal"] body:not(#_) :is(.beginner-page, .drops-page) :is(.controls, .color-row, .region-row) { min-width: 0; max-width: 100%; } /* ==================== beginner page: same pattern as the rest ==================== */ :root[data-skin="terminal"] body:not(#_) .beginner-hero h1 { text-transform: lowercase !important; } :root[data-skin="terminal"] body:not(#_) .crumbs::before { content: "~/"; content: "~/" / ""; color: var(--t-red); font-weight: 600; } :root[data-skin="terminal"] body:not(#_) .hero-line a { color: var(--t-fg) !important; text-decoration: underline dashed !important; text-underline-offset: 3px; } :root[data-skin="terminal"] body:not(#_) .result-line .count { color: var(--t-fg) !important; font-weight: 600; } :root[data-skin="terminal"] body:not(#_) .color-chip { background: none !important; border: 0 !important; color: var(--t-fg) !important; padding: 2px 0 !important; gap: 0.5ch !important; text-transform: lowercase; font-weight: 400 !important; } :root[data-skin="terminal"] body:not(#_) .color-chip::before { content: "["; content: "[" / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .color-chip::after { content: "]"; content: "]" / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .color-chip.selected { font-weight: 600 !important; } :root[data-skin="terminal"] body:not(#_) .color-chip.selected::before { content: "[x"; content: "[x" / ""; color: var(--t-red); } :root[data-skin="terminal"] body:not(#_) .color-dot { width: 0.6rem !important; height: 0.6rem !important; border: 1px solid var(--t-muted) !important; } :root[data-skin="terminal"] body:not(#_) .color-chip .dot-all { display: none !important; } :root[data-skin="terminal"] body:not(#_) .color-count { color: var(--t-muted) !important; font-size: 0.7rem; } :root[data-skin="terminal"] body:not(#_) .beginner-card { background: var(--t-bg) !important; border: 1px solid var(--t-line) !important; } :root[data-skin="terminal"] body:not(#_) .beginner-card:hover { border-color: var(--t-fg) !important; transform: none !important; } :root[data-skin="terminal"] body:not(#_) .beginner-card .image-box { background: var(--t-surface) !important; } :root[data-skin="terminal"] body:not(#_) .beginner-card .image-box img { filter: var(--t-photo); } :root[data-skin="terminal"] body:not(#_) .beginner-card:hover .image-box img { filter: none; } :root[data-skin="terminal"] body:not(#_) .beginner-card .badge { background: var(--t-bg) !important; color: var(--t-fg) !important; border: 1px solid currentColor !important; padding: 0 4px !important; font-size: 0.65rem !important; font-weight: 400 !important; text-transform: lowercase !important; letter-spacing: 0 !important; line-height: 1.5; } :root[data-skin="terminal"] body:not(#_) .beginner-card .card-body { padding: 8px !important; } :root[data-skin="terminal"] body:not(#_) .beginner-card .notify-btn { font-size: 0 !important; background: none !important; border: 0 !important; padding: 0 !important; } :root[data-skin="terminal"] body:not(#_) .beginner-card .notify-btn svg { display: none !important; } :root[data-skin="terminal"] body:not(#_) .beginner-card .notify-btn::before { content: "[!]" !important; content: "[!]" / "" !important; font-size: 0.85rem; color: var(--t-muted) !important; } :root[data-skin="terminal"] body:not(#_) .beginner-card .notify-btn::after { content: none !important; } :root[data-skin="terminal"] body:not(#_) .beginner-guide { background: none !important; border: 1px solid var(--t-line) !important; } :root[data-skin="terminal"] body:not(#_) .beginner-guide .guide-toggle svg { display: none !important; } :root[data-skin="terminal"] body:not(#_) .beginner-guide .guide-toggle::before { content: "[ "; content: "[ " / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .beginner-guide .guide-toggle::after { content: " ]"; content: " ]" / ""; color: var(--t-muted); } /* ==================== brands page: same tight boxes as the home brand cards ==================== */ :root[data-skin="terminal"] body:not(#_) .grid:has(> .brand-card) { gap: 10px !important; } :root[data-skin="terminal"] body:not(#_) .brand-card-link { padding: 8px !important; gap: 10px !important; align-items: flex-start !important; } :root[data-skin="terminal"] body:not(#_) .brand-card .brand-logo { width: 40px !important; height: 40px !important; } :root[data-skin="terminal"] body:not(#_) .brand-card .brand-logo img { padding: 4px !important; } :root[data-skin="terminal"] body:not(#_) .brand-card .brand-stats { gap: 0 0.6rem !important; line-height: 1.35; } :root[data-skin="terminal"] body:not(#_) .brand-card :is(.brand-ship, .brand-bio) { margin-top: 1px !important; font-size: 0.7rem !important; line-height: 1.3 !important; } :root[data-skin="terminal"] body:not(#_) .brand-card .brand-actions { padding: 6px 8px 6px 0 !important; gap: 2px !important; } :root[data-skin="terminal"] body:not(#_) .brand-card .brand-actions :is(.fav-btn, .bell-btn, .brand-site-link) { background: none !important; border: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 1.5rem; line-height: 1.5; } :root[data-skin="terminal"] body:not(#_) .region-heading { margin-bottom: 0.6rem !important; padding-bottom: 0.3rem !important; } :root[data-skin="terminal"] body:not(#_) .t-credit { font-size: 0.72rem; color: var(--t-muted); text-align: center; margin-top: 1rem; } :root[data-skin="terminal"] body:not(#_) .t-credit a { color: var(--t-fg) !important; text-decoration: underline dashed !important; text-underline-offset: 3px; } /* drops board: page font, readable size on any screen, ink for names and red only for the live mark */ :root[data-skin="terminal"] body:not(#_) .t-piece-board pre { font-size: min(14px, calc((100vw - 34px) / var(--cols, 94) / 0.6)) !important; line-height: 1.75 !important; font-weight: 500; } :root[data-skin="terminal"] body:not(#_) .t-piece-board .c3 { color: var(--t-red); font-weight: 600; } :root[data-skin="terminal"] body:not(#_) .t-piece-board .c2 { color: var(--t-fg); font-weight: 600; } :root[data-skin="terminal"] body:not(#_) .t-piece-board .c5 { color: var(--t-muted); font-weight: 600; } :root[data-skin="terminal"] body:not(#_) .t-piece-board .c8 { color: var(--t-muted); font-weight: 400; } /* phones: tap areas at least about 32px for footer links, filter chips and the small ASCII marks */ @media (max-width: 639px) { :root[data-skin="terminal"] body:not(#_) .site-footer :is(a, button) { display: inline-block; padding-block: 7px; } :root[data-skin="terminal"] body:not(#_) :is(.region-pill, .color-chip, .filter-chip, .segment-btn, .chip, .view-all-link, .back-link, .compare-link) { min-height: 34px; display: inline-flex; align-items: center; } :root[data-skin="terminal"] body:not(#_) :is(.see-all, .filter-tab) { min-height: 44px !important; display: inline-flex; align-items: center; } :root[data-skin="terminal"] body:not(#_) .paint-page .product-card .fav-btn { min-width: 44px !important; min-height: 44px !important; width: 44px !important; height: 44px !important; display: inline-flex; align-items: center; justify-content: center; } :root[data-skin="terminal"] body:not(#_) .brand-card .brand-actions :is(.fav-btn, .bell-btn, .brand-site-link) { min-height: 32px !important; min-width: 36px !important; display: inline-flex; align-items: center; justify-content: center; } :root[data-skin="terminal"] body:not(#_) :is(.beginner-card, .drop-card) .notify-btn { min-width: 36px; min-height: 32px; } } :root[data-skin="terminal"] body:not(#_) .ascii-pig.dead { font-size: min(9px, calc((100vw - 48px) / 64 / 0.6)) !important; line-height: 1.05; font-weight: 600; } /* ==================== variant pickers and dropdowns ==================== */ /* option pills: bracket marks, [x for the chosen one, never a red fill */ :root[data-skin="terminal"] body:not(#_) :is(.variant-option, .variant-link) { background: none !important; border: 0 !important; color: var(--t-fg) !important; padding: 4px 0 !important; min-height: 36px; gap: 0.5ch !important; font-weight: 400 !important; text-transform: none !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; } :root[data-skin="terminal"] body:not(#_) :is(.variant-option, .variant-link)::before { content: "[" !important; content: "[" / "" !important; color: var(--t-muted) !important; } :root[data-skin="terminal"] body:not(#_) :is(.variant-option, .variant-link)::after { content: "]" !important; content: "]" / "" !important; color: var(--t-muted) !important; } :root[data-skin="terminal"] body:not(#_) :is(.variant-option, .variant-link).selected { font-weight: 600 !important; } :root[data-skin="terminal"] body:not(#_) :is(.variant-option, .variant-link).selected::before { content: "[x" !important; content: "[x" / "" !important; color: var(--t-red) !important; } :root[data-skin="terminal"] body:not(#_) :is(.variant-option, .variant-link).selected * { color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) :is(.variant-option, .variant-link).unavailable { color: var(--t-muted) !important; } :root[data-skin="terminal"] body:not(#_) :is(.variant-option, .variant-link):is(:hover, :focus-visible):not(:disabled)::before, :root[data-skin="terminal"] body:not(#_) :is(.variant-option, .variant-link):is(:hover, :focus-visible):not(:disabled)::after { color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .variant-option .color-swatch { width: 0.7rem !important; height: 0.7rem !important; border: 1px solid var(--t-muted) !important; box-shadow: none !important; } :root[data-skin="terminal"] body:not(#_) .variant-options, :root[data-skin="terminal"] body:not(#_) .variant-links { gap: 2px 1.5ch !important; } :root[data-skin="terminal"] body:not(#_) .variant-label { color: var(--t-muted) !important; font-weight: 400 !important; } :root[data-skin="terminal"] body:not(#_) .variant-select { text-transform: none !important; } /* dropdown boxes: big enough to tap; 16px text on phones so iOS does not zoom the page on focus */ :root[data-skin="terminal"] body:not(#_) select { min-height: 36px !important; padding-block: 5px !important; } @media (max-width: 639px) { :root[data-skin="terminal"] body:not(#_) select { min-height: 44px !important; } :root[data-skin="terminal"] body:not(#_) :is(select, textarea, input:not([type="checkbox"]):not([type="radio"])) { font-size: 16px !important; } } /* the opened list, where the browser lets a page style it (Chrome, Edge, Android Chrome). Safari, iOS and Firefox keep their own list. */ @supports (appearance: base-select) { :root[data-skin="terminal"] body:not(#_) select, :root[data-skin="terminal"] body:not(#_) select::picker(select) { appearance: base-select; } :root[data-skin="terminal"] body:not(#_) select::picker-icon { display: none; } :root[data-skin="terminal"] body:not(#_) select::picker(select) { background: var(--t-bg); color: var(--t-fg); border: 1px solid var(--t-fg); border-radius: 0; box-shadow: 5px 5px 0 var(--t-line); padding: 2px 0; margin-top: 3px; font-family: var(--font-sans); font-size: 0.9rem; } :root[data-skin="terminal"] body:not(#_) select option { padding: 7px 1.5ch 7px 1ch; gap: 0; border-radius: 0; background: var(--t-bg); color: var(--t-fg); white-space: pre; } :root[data-skin="terminal"] body:not(#_) select option::checkmark { display: none; } :root[data-skin="terminal"] body:not(#_) select option::before { content: " "; content: " " / ""; white-space: pre; } :root[data-skin="terminal"] body:not(#_) select option:checked::before { content: "> "; content: "> " / ""; color: var(--t-red); font-weight: 600; } :root[data-skin="terminal"] body:not(#_) select option:is(:hover, :focus-visible):not(:disabled) { background: var(--t-fg); color: var(--t-bg); } :root[data-skin="terminal"] body:not(#_) select option:is(:hover, :focus-visible):not(:disabled)::before { color: var(--t-bg); } :root[data-skin="terminal"] body:not(#_) select option:disabled { color: var(--t-muted); } } :root[data-skin="terminal"] body:not(#_) .variant-label { text-transform: lowercase !important; } @supports (appearance: base-select) { :root[data-skin="terminal"] body:not(#_) select::picker(select) { max-width: calc(100vw - 16px); max-height: 60vh; overflow-y: auto; } :root[data-skin="terminal"] body:not(#_) select option { white-space: normal; } } /* review fixes */ :root[data-skin="terminal"] body:not(#_) .live-dot-char { display: none !important; } :root[data-skin="terminal"] body:not(#_) .fav-btn.favorited::before, :root[data-skin="terminal"] body:not(#_) .fav-btn.favorited { color: var(--t-red) !important; } :root[data-skin="terminal"] body:not(#_) :is(.product-card, .drop-card, .bento-card, .beginner-card):focus-within img { filter: none; } /* title mark (Ross 2026-10-09): an ink underscore that blinks three times and then holds still, instead of a red block blinking forever */ :root[data-skin="terminal"] body:not(#_) :is(.hero-title, .drops-hero h1, .feed-header h1, .page-title, .fund-title, .beginner-hero h1)::after { content: "_"; content: "_" / ""; display: inline; width: auto; height: auto; margin-left: 0.04em; background: none; color: var(--t-fg); animation: t-blink 1s steps(1) 3; } /* home hero button: ink, not red */ :root[data-skin="terminal"] body:not(#_) .hero-btn { background: var(--t-fg) !important; border-color: var(--t-fg) !important; color: var(--t-bg) !important; } :root[data-skin="terminal"] body:not(#_) .hero-btn :is(span, svg), :root[data-skin="terminal"] body:not(#_) .hero-btn::before, :root[data-skin="terminal"] body:not(#_) .hero-btn::after { color: var(--t-bg) !important; } :root[data-skin="terminal"] body:not(#_) .hero-btn:is(:hover, :focus-visible) { background: var(--t-bg) !important; color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .hero-btn:is(:hover, :focus-visible) :is(span, svg), :root[data-skin="terminal"] body:not(#_) .hero-btn:is(:hover, :focus-visible)::before, :root[data-skin="terminal"] body:not(#_) .hero-btn:is(:hover, :focus-visible)::after { color: var(--t-fg) !important; } /* ==================== long tail: used marketplace, merch, blog, legal, info pages ==================== */ /* links in copy and tables: ink with a dashed underline, never red text */ :root[data-skin="terminal"] body:not(#_) main :is(p, li, td, strong, blockquote) > a:not([class*="btn"]):not(.hero-btn):not(.sell-pill):not(.wood-link):not(:has(h2, h3, h4, div, p, img, ul)), :root[data-skin="terminal"] body:not(#_) :is(a, button).legal-link, :root[data-skin="terminal"] body:not(#_) a.browse-link, :root[data-skin="terminal"] body:not(#_) .cart a.back, :root[data-skin="terminal"] body:not(#_) .foot a { color: var(--t-fg) !important; text-decoration: underline dashed !important; text-underline-offset: 3px; } :root[data-skin="terminal"] body:not(#_) button.legal-link { background: none !important; border: 0 !important; padding: 0 !important; text-transform: none !important; } :root[data-skin="terminal"] body:not(#_) button.legal-link::before, :root[data-skin="terminal"] body:not(#_) button.legal-link::after { content: none !important; } /* errors: ink text, red mark */ :root[data-skin="terminal"] body:not(#_) main p.error { color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) main p.error::before { content: "[!] "; content: "[!] " / ""; color: var(--t-red); font-weight: 600; } /* every small badge is the same outlined lowercase tag */ :root[data-skin="terminal"] body:not(#_) :is(.pillar-badge, .cs-pill, .used-badge, .sold-badge, .stock-badge-new, .condition-pill, .shipping-chip) { background: var(--t-bg) !important; color: var(--t-fg) !important; border: 1px solid currentColor !important; padding: 0 4px !important; font-size: 0.7rem !important; font-weight: 400 !important; text-transform: lowercase !important; letter-spacing: 0 !important; line-height: 1.5 !important; } :root[data-skin="terminal"] body:not(#_) .sold-badge { color: var(--t-muted) !important; } /* step numbers and chart bars are ink, not red; upcoming steps stay hollow so done / current / next read apart */ :root[data-skin="terminal"] body:not(#_) :is(.progress-step.done, .progress-step.current) .progress-num { background: var(--t-fg) !important; color: var(--t-bg) !important; border-color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .progress-step.current .progress-num { box-shadow: 0 0 0 2px var(--t-bg), 0 0 0 4px var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .progress-step:not(.done):not(.current) .progress-num { background: var(--t-bg) !important; color: var(--t-muted) !important; border: 2px dashed var(--t-muted) !important; } :root[data-skin="terminal"] body:not(#_) :is(.progress-step.current, .progress-step.done)::before { background: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .progress-step.current .progress-label { text-decoration-color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .next-hint::before { color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) main span.bar { background: repeating-linear-gradient(90deg, var(--t-fg) 0 6px, transparent 6px 8px) !important; height: 0.8em !important; } :root[data-skin="terminal"] body:not(#_) main blockquote { border-left: 3px double var(--t-fg) !important; background: none !important; } :root[data-skin="terminal"] body:not(#_) main span.w-2.h-2.rounded-full { display: none !important; } /* headings that get focus by script for screen readers should not draw a ring */ :root[data-skin="terminal"] body:not(#_) :is(h1, h2, h3, main, section)[tabindex="-1"]:focus-visible { outline: none !important; } /* blog filter tabs as bracket marks */ :root[data-skin="terminal"] body:not(#_) .filter-tab { background: none !important; border: 0 !important; color: var(--t-fg) !important; padding: 4px 0 !important; text-transform: lowercase; font-weight: 400 !important; } :root[data-skin="terminal"] body:not(#_) .filter-tab::before { content: "[ "; content: "[ " / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .filter-tab::after { content: " ]"; content: " ]" / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .filter-tab:is(.active, [aria-pressed="true"], [aria-current="true"], [aria-selected="true"]) { font-weight: 600 !important; } :root[data-skin="terminal"] body:not(#_) .filter-tab:is(.active, [aria-pressed="true"], [aria-current="true"], [aria-selected="true"])::before { content: "[x "; content: "[x " / ""; color: var(--t-red); } /* used cards join the one card size */ :root[data-skin="terminal"] body:not(#_) :is(.feed-grid, .grid:has(> .feed-card), .grid:has(> .used-card)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } @media (min-width: 640px) { :root[data-skin="terminal"] body:not(#_) :is(.feed-grid, .grid:has(> .feed-card), .grid:has(> .used-card)) { grid-template-columns: repeat(auto-fill, 176px) !important; justify-content: start; } } @media (max-width: 639px) { :root[data-skin="terminal"] body:not(#_) main table :is(td, th, a) { overflow-wrap: anywhere; word-break: break-word; } :root[data-skin="terminal"] body:not(#_) main table { table-layout: fixed; width: 100% !important; max-width: 100%; } } /* look switch in the header: small text, generous hit area, no bracket marks added */ :root[data-skin="terminal"] body:not(#_) .look-switch { font-size: 10px !important; line-height: 12px !important; padding: 10px 8px !important; min-height: 0 !important; background: none !important; border: 0 !important; color: var(--t-muted) !important; text-transform: none !important; } :root[data-skin="terminal"] body:not(#_) .look-switch:is(:hover, :focus-visible) { color: var(--t-fg) !important; transform: translateY(-50%) !important; } :root[data-skin="terminal"] body:not(#_) .look-switch::before, :root[data-skin="terminal"] body:not(#_) .look-switch::after { content: none !important; } @media (min-width: 768px) { :root[data-skin="terminal"] body:not(#_) .look-switch { left: 8.5rem !important; } } /* titles of the fingerprinted legal pages (their files must not change): same title pattern from here */ :root[data-skin="terminal"] body:not(#_) :is(main article > h1, main div.mb-6 > h1.text-3xl.font-bold) { text-transform: lowercase !important; } :root[data-skin="terminal"] body:not(#_) :is(main article > h1, main div.mb-6 > h1.text-3xl.font-bold)::after { content: "_"; content: "_" / ""; color: var(--t-fg); animation: t-blink 1s steps(1) 3; margin-left: 0.04em; } /* ==================== 2026-10-09: compact header and bottom bar ==================== */ /* Header 56/64 -> 40/44 px, wordmark with a red prompt, tucks away while reading down (AppShell + header-tuck.ts), instant, no easing. */ :root[data-skin="terminal"] body:not(#_) .app-header { height: calc(40px + env(safe-area-inset-top, 0px)) !important; } :root[data-skin="terminal"] body:not(#_) .app-header.tucked { transform: translateY(-100%); } :root[data-skin="terminal"] body:not(#_) .app-header.tucked:focus-within { transform: none; } /* keyboard focus never sits off screen */ :root[data-skin="terminal"] body:not(#_) .app-header .wordmark-pig { width: 18px; height: 18px; } :root[data-skin="terminal"] body:not(#_) .app-header .logo-text { font-size: 1.3rem !important; letter-spacing: 0.04em; } :root[data-skin="terminal"] body:not(#_) .app-header .favorites-link { width: 36px; height: 36px; } @media (min-width: 768px) { :root[data-skin="terminal"] body:not(#_) .app-header { height: 44px !important; } } /* Bottom bar 62 -> 44 px text row. On iPhones the home-indicator inset (34 px) is mostly reused: the row may sit 14 px into it, the links stay 44 px tall. */ :root[data-skin="terminal"] body:not(#_) { --t-nav-pad: max(6px, calc(env(safe-area-inset-bottom, 0px) - 14px)); } :root[data-skin="terminal"] body:not(#_) .mobile-nav { height: calc(44px + var(--t-nav-pad)) !important; padding-bottom: var(--t-nav-pad) !important; } :root[data-skin="terminal"] body:not(#_) .mobile-nav .nav-item { padding: 0 !important; gap: 0 !important; min-height: 44px; } @media (max-width: 767px) { :root[data-skin="terminal"] body:not(#_) .site-footer { padding-bottom: calc(44px + var(--t-nav-pad) + 0.5rem) !important; } } /* ==================== 2026-10-09 (Ross): tighter cards, drops frames, steady chips ==================== */ /* cards keep their own height: no stretch to the tallest card in a row, no reserved second title line */ :root[data-skin="terminal"] body:not(#_) :is(.product-grid, .grid:has(> .product-card), .grid:has(> * > .product-card), .drops-grid, .bento-grid, .sold-out-grid, .picks-grid, .carousel-track, [class*="carousel"]:has(> .product-card), [class*="carousel"]:has(> * > .product-card)) { align-items: start !important; } :root[data-skin="terminal"] body:not(#_) .product-card h3 { min-height: 0 !important; margin-bottom: 4px !important; } :root[data-skin="terminal"] body:not(#_) .drop-card .card-title { margin-bottom: 4px !important; } /* the featured bento card shares the one card size, so it shares the type too */ :root[data-skin="terminal"] body:not(#_) .bento-card-link.featured .bento-title { font-size: 14px !important; } :root[data-skin="terminal"] body:not(#_) .bento-card-link.featured .bento-price { font-size: 15px !important; } :root[data-skin="terminal"] body:not(#_) .bento-card-link.featured .bento-image { aspect-ratio: 1 / 1 !important; } /* drops brand tiles get the brands-page frame: dashed rule, + corners */ :root[data-skin="terminal"] body:not(#_) .brand-tile { position: relative; border: 1px dashed var(--t-muted) !important; overflow: visible !important; } :root[data-skin="terminal"] body:not(#_) .brand-tile::before, :root[data-skin="terminal"] body:not(#_) .brand-tile::after { content: "+"; content: "+" / ""; position: absolute; font-size: 0.8rem; line-height: 1; width: 1ch; background: var(--t-bg); color: var(--t-fg); pointer-events: none; } :root[data-skin="terminal"] body:not(#_) .brand-tile::before { top: -0.48em; left: -0.5ch; } :root[data-skin="terminal"] body:not(#_) .brand-tile::after { bottom: -0.5em; right: -0.5ch; } :root[data-skin="terminal"] body:not(#_) .brand-tile:is(:hover, :focus-within) { border: 1px solid var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .brand-tile:is(:hover, :focus-within)::before, :root[data-skin="terminal"] body:not(#_) .brand-tile:is(:hover, :focus-within)::after { color: var(--t-red); } /* chips: selected and unselected are the same width, so picking one never shifts its neighbours */ :root[data-skin="terminal"] body:not(#_) :is(.segment-btn, .region-pill, .refinement-pill, .filter-chip, .chip, .shipping-option):not(.selected, .active, [aria-pressed="true"])::before { content: "[\00a0"; content: "[\00a0" / ""; } :root[data-skin="terminal"] body:not(#_) :is(.segment-btn, .region-pill, .refinement-pill, .filter-chip, .chip, .shipping-option) { transition: none !important; -webkit-tap-highlight-color: transparent; outline-offset: 0; } /* the black hover block only where there is a real pointer; on touch a tap left it stuck and it flashed */ @media (hover: none) { :root[data-skin="terminal"] body:not(#_) :is(.segment-btn, .region-pill, .refinement-pill, .filter-chip, .chip, .ctl, .notify-btn, .type-pill, .view-all-btn, .carousel-arrow, .tile-bell, [aria-label="Example searches"] button):hover { background: none !important; color: var(--t-fg) !important; } } /* Dama Fund: a double-line frame with red + corners */ :root[data-skin="terminal"] body:not(#_) :is(.fund-meter-box, .fund-card) { position: relative; border: 3px double var(--t-fg) !important; overflow: visible !important; } :root[data-skin="terminal"] body:not(#_) .fund-card::before, :root[data-skin="terminal"] body:not(#_) :is(.fund-meter-box, .fund-card)::after { content: "+"; content: "+" / ""; position: absolute; font-size: 0.9rem; font-weight: 700; line-height: 1; width: 1ch; background: var(--t-bg); color: var(--t-red); pointer-events: none; } :root[data-skin="terminal"] body:not(#_) .fund-card::before { top: -0.6em; left: -0.6ch; } /* the meter box keeps its "dama fund" legend in ::before; only its bottom-right corner gets the + */ :root[data-skin="terminal"] body:not(#_) :is(.fund-meter-box, .fund-card)::after { bottom: -0.6em; right: -0.6ch; } /* footer name in capitals, like the header */ :root[data-skin="terminal"] body:not(#_) .site-footer .footer-wordmark.footer-wordmark { text-transform: uppercase !important; } /* a select that is also a .ctl button keeps its select frame and room for the caret */ :root[data-skin="terminal"] body:not(#_) select.ctl { padding: 2px 3.2ch 2px 1ch !important; border: 1px solid var(--t-line) !important; } :root[data-skin="terminal"] body:not(#_) select.ctl::before, :root[data-skin="terminal"] body:not(#_) select.ctl::after { content: none !important; } /* drops board: tighter lines and less air above and below (Ross 2026-10-09) */ :root[data-skin="terminal"] body:not(#_) .drops-hero { margin-bottom: 8px !important; padding-bottom: 0 !important; } :root[data-skin="terminal"] body:not(#_) .t-piece-board { margin: 0 0 12px !important; } /* pause for a piece that plays on (ticket 28 B3, WCAG 2.2.2): a bracket button under the board */ :root[data-skin="terminal"] body:not(#_) .t-piece-board pre { line-height: 1.3 !important; } :root[data-skin="terminal"] body:not(#_) .drops-page { padding-top: 20px !important; } /* used: "see my listing" is a small popover under the header on every width, never in the row beside the title (on phones the in-flow panel squeezed the title and ran off screen) */ :root[data-skin="terminal"] body:not(#_) .feed-header { position: relative; } :root[data-skin="terminal"] body:not(#_) .my-listing-panel { position: absolute !important; top: calc(100% + 4px) !important; left: auto; right: 0 !important; width: min(20rem, calc(100vw - 32px)) !important; max-width: none !important; margin: 0 !important; z-index: 30; border: 1px solid var(--t-fg) !important; box-shadow: 5px 5px 0 var(--t-line) !important; background: var(--t-bg) !important; } :root[data-skin="terminal"] body:not(#_) .my-listing-panel .resend { margin: 0 !important; padding: 10px 12px !important; border: 0 !important; } :root[data-skin="terminal"] body:not(#_) .feed-header .my-listing-panel.my-listing-panel :is(.resend-heading, h2) { font-size: 0.95rem !important; margin: 0 0 4px !important; } :root[data-skin="terminal"] body:not(#_) .feed-header .my-listing-panel.my-listing-panel .resend-help { font-size: 0.75rem !important; line-height: 1.4; margin: 0 0 8px !important; } :root[data-skin="terminal"] body:not(#_) .feed-header .my-listing-panel.my-listing-panel .resend-label { font-size: 0.75rem !important; margin-bottom: 2px !important; } :root[data-skin="terminal"] body:not(#_) .feed-header .my-listing-panel.my-listing-panel input { font-size: 16px !important; padding: 4px 8px !important; min-height: 36px; height: auto !important; } :root[data-skin="terminal"] body:not(#_) .feed-header .my-listing-panel.my-listing-panel .resend-btn { margin-top: 8px !important; } @media (max-width: 479px) { :root[data-skin="terminal"] body:not(#_) .head-actions { position: static !important; } :root[data-skin="terminal"] body:not(#_) .my-listing-panel { left: 16px !important; right: 16px !important; width: auto !important; } } /* home example searches: small print under the headline (Ross 2026-10-09) */ :root[data-skin="terminal"] body:not(#_) [aria-label="Example searches"] :is(button, a, span) { font-size: 0.75rem !important; } :root[data-skin="terminal"] body:not(#_) [aria-label="Example searches"] { gap: 2px 10px !important; } /* the home hero's example searches only appear once you are searching (the search bar has its own) */ :root[data-skin="terminal"] body:not(#_) .hero-examples { display: none !important; } /* ==================== 2026-10-09 (Ross): beginner button, favorites heart, footer ==================== */ /* home beginner button: a small ascii.rest bracket button, not a full-width bar */ :root[data-skin="terminal"] body:not(#_) .button-row .hero-btn.solid { width: auto !important; flex: 0 0 auto !important; background: var(--t-bg) !important; color: var(--t-fg) !important; border: 1px solid var(--t-fg) !important; padding: 4px 12px !important; font-size: 0.85rem !important; font-weight: 600 !important; min-height: 36px; box-shadow: 3px 3px 0 var(--t-line) !important; } :root[data-skin="terminal"] body:not(#_) .button-row .hero-btn.solid::after { content: " ->]"; content: " ->]" / ""; } :root[data-skin="terminal"] body:not(#_) .button-row .hero-btn.solid:is(:hover, :focus-visible) { background: var(--t-fg) !important; color: var(--t-bg) !important; } :root[data-skin="terminal"] body:not(#_) .button-row:has(.hero-btn.solid) { justify-content: center !important; } /* favorites, nothing saved: an ascii heart instead of the drawn one */ :root[data-skin="terminal"] body:not(#_) .fav-empty svg { display: none !important; } :root[data-skin="terminal"] body:not(#_) .fav-empty::before { content: " ,d88b.d88b,\A 88888888888\A `Y8888888Y'\A `Y888Y'\A `Y'"; content: " ,d88b.d88b,\A 88888888888\A `Y8888888Y'\A `Y888Y'\A `Y'" / ""; white-space: pre !important; display: block; width: max-content; text-align: left !important; font-family: var(--font-mono, monospace); font-size: 1rem; line-height: 1.05; color: var(--t-red); margin-bottom: 12px; text-transform: none !important; text-align: left; } /* footer: no about or brands (the nav has both), one compact line, the date on its own line */ :root[data-skin="terminal"] body:not(#_) .footer-links :is(a[href="/about"], a[href="/brands"]) { display: none !important; } :root[data-skin="terminal"] body:not(#_) .footer-links :is(a[href="/about"], a[href="/brands"]) + .footer-divider { display: none !important; } :root[data-skin="terminal"] body:not(#_) .footer-links { font-size: 0.72rem !important; gap: 2px 0 !important; justify-content: center; flex-wrap: wrap; } :root[data-skin="terminal"] body:not(#_) .footer-links :is(a, button) { padding: 13px 6px !important; } :root[data-skin="terminal"] body:not(#_) .footer-links .footer-divider { margin: 0 6px !important; } :root[data-skin="terminal"] body:not(#_) .footer-links .footer-divider:has(+ .footer-updated) { display: none !important; } :root[data-skin="terminal"] body:not(#_) .footer-links .footer-updated { flex-basis: 100%; text-align: center; font-size: 0.68rem; } :root[data-skin="terminal"] body:not(#_) .footer-tagline { font-size: 0.72rem !important; } :root[data-skin="terminal"] body:not(#_) .button-row .hero-btn.solid :is(span, svg, path) { color: inherit !important; } :root[data-skin="terminal"] body:not(#_) .button-row .hero-btn.solid svg { display: none !important; } /* every card the same small size (Ross 2026-10-09): a fixed two-line title slot, tight, price right under it */ :root[data-skin="terminal"] body:not(#_) :is(.product-card h3, .drop-card .card-title, .bento-title) { line-height: 1.25 !important; min-height: 2.5em !important; max-height: 2.5em; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 4px !important; } :root[data-skin="terminal"] body:not(#_) :is(.product-card p.text-xs, .drop-card .brand-pill, .bento-brand) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* home sections: tight, with a small dashed divider between them */ :root[data-skin="terminal"] body:not(#_) :is(.carousel-section, .carousel-section ~ section) { padding-top: 14px !important; padding-bottom: 14px !important; } :root[data-skin="terminal"] body:not(#_) .carousel-section :is(h2, .section-head, header) { margin-bottom: 8px !important; } /* bento cards (in stock now, sold out grids) match the carousel card: no default card padding or gap */ :root[data-skin="terminal"] body:not(#_) .bento-card { padding: 0 !important; gap: 0 !important; } :root[data-skin="terminal"] body:not(#_) .bento-content { padding: 12px !important; } :root[data-skin="terminal"] body:not(#_) .bento-card-link .bento-brand { font-size: 11px !important; margin-bottom: 4px; } :root[data-skin="terminal"] body:not(#_) .bento-card-link .bento-title { font-size: 14px !important; } :root[data-skin="terminal"] body:not(#_) .bento-card-link .bento-price :is(span, .price-live) { font-size: 15px !important; } :root[data-skin="terminal"] body:not(#_) .bento-card-link .bento-image { aspect-ratio: 1 / 1 !important; height: auto !important; } /* wood links: plain bracket buttons, no underline, readable when hovered */ :root[data-skin="terminal"] body:not(#_) .wood-link { text-decoration: none !important; } :root[data-skin="terminal"] body:not(#_) .wood-link:is(:hover, :focus-visible) { background: var(--t-fg) !important; color: var(--t-bg) !important; } :root[data-skin="terminal"] body:not(#_) .wood-link:is(:hover, :focus-visible) :is(*, ::before, ::after) { color: var(--t-bg) !important; } /* home section dividers: an ascii.rest style rule, =-=-=-=-+ repeated, muted */ :root[data-skin="terminal"] body:not(#_) :is(.carousel-section ~ .carousel-section, .carousel-section ~ section)::before { content: "+=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+"; content: "+=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+" / ""; display: block; overflow: hidden; white-space: nowrap; text-overflow: clip; color: var(--t-line); font-size: 0.75rem; line-height: 1; margin: -6px 16px 12px; letter-spacing: 0.05em; } /* ==================== 2026-10-09 late (Ross): heart, beginner, barbed wire, brands ==================== */ /* header heart: keep it centred when hovered or pressed (the no-movement hover rule had dropped it) */ :root[data-skin="terminal"] body:not(#_) .app-header .favorites-link:is(*, :hover, :active, :focus-visible) { transform: translateY(-50%) !important; } /* card hearts: small, the same on carousel and grid cards; 24 px box (Ross 10-13), the WCAG 2.2 minimum target */ :root[data-skin="terminal"] body:not(#_) :is(.product-card, .drop-card, .bento-card-link) .fav-btn { min-width: 24px !important; min-height: 24px !important; width: 24px !important; height: 24px !important; padding: 0 !important; background: var(--t-bg) !important; border: 1px solid var(--t-line) !important; } :root[data-skin="terminal"] body:not(#_) :is(.product-card, .drop-card, .bento-card-link) .fav-btn::before { font-size: 0.7rem !important; } /* home beginner button: centred label with an arrow */ :root[data-skin="terminal"] body:not(#_) .button-row .hero-btn.solid { justify-content: center !important; gap: 0 !important; } :root[data-skin="terminal"] body:not(#_) .button-row .hero-btn.solid::before { content: "[\00a0"; content: "[\00a0" / ""; color: var(--t-muted) !important; } :root[data-skin="terminal"] body:not(#_) .button-row .hero-btn.solid::after { content: "\00a0->\00a0]"; content: "\00a0->\00a0]" / ""; color: inherit !important; } /* barbed wire: under the home hero and above the footer on every page */ :root[data-skin="terminal"] body:not(#_) :is(.button-row:has(.hero-btn.solid), .site-footer)::after, :root[data-skin="terminal"] body:not(#_) .site-footer::before { content: "--x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x--"; content: "--x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x---x--" / ""; display: block; overflow: hidden; white-space: nowrap; color: var(--t-muted); font-size: 0.75rem; line-height: 1; letter-spacing: 0.04em; } :root[data-skin="terminal"] body:not(#_) .site-footer::after { content: none; } :root[data-skin="terminal"] body:not(#_) .button-row:has(.hero-btn.solid) { flex-wrap: wrap; } :root[data-skin="terminal"] body:not(#_) .button-row:has(.hero-btn.solid)::after { flex-basis: 100%; margin-top: 18px; text-align: center; } :root[data-skin="terminal"] body:not(#_) .site-footer::before { margin: 0 0 12px; } /* brands page: smaller intro, one-line bios that open on tap */ :root[data-skin="terminal"] body:not(#_) .brands-intro { font-size: 0.8rem !important; line-height: 1.5 !important; } :root[data-skin="terminal"] body:not(#_) .brand-card:has(> .brand-bio-more) { flex-wrap: wrap !important; } :root[data-skin="terminal"] body:not(#_) .brand-bio-more { flex: 1 0 100%; order: 3; min-width: 0; padding: 0 12px 6px; font-size: 0.72rem; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .brand-bio-more summary { list-style: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.72rem !important; margin: 0 !important; } :root[data-skin="terminal"] body:not(#_) .brand-bio-more summary::-webkit-details-marker { display: none; } :root[data-skin="terminal"] body:not(#_) .brand-bio-more[open] summary { white-space: normal !important; display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; max-height: none !important; } :root[data-skin="terminal"] body:not(#_) .brand-bio-more:not([open]) summary::after { content: none; } /* no ligatures in the skin: VT323 joins "fi", so a settled title was one cell narrower than its scrambled self and could wrap while settling (the title jitter) */ :root[data-skin="terminal"] body:not(#_) * { font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "clig" 0 !important; } :root[data-skin="terminal"]:not([data-fonts="ready"]) body:not(#_) main h1 { visibility: hidden; } /* about: "who is dama pig" in smaller type (Ross 2026-10-09) */ :root[data-skin="terminal"] body:not(#_) .echo-hero .echo-kicker { font-size: 0.8rem !important; } :root[data-skin="terminal"] body:not(#_) .echo-hero .t-piece pre { font-size: min(9px, calc((100vw - 32px) / 146 / 0.6)) !important; } /* the art is 146 cells wide */ :root[data-skin="terminal"] body:not(#_) .echo-hero .echo-kicker { margin-bottom: 2px !important; } :root[data-skin="terminal"] body:not(#_) .echo-hero .t-piece-word { margin-top: 0 !important; margin-bottom: 12px !important; } :root[data-skin="terminal"] body:not(#_) .echo-hero .echo-tagline { font-size: 1.15rem !important; line-height: 1.3 !important; } :root[data-skin="terminal"] body:not(#_) .echo-hero .echo-subhead { font-size: 0.75rem !important; } :root[data-skin="terminal"] body:not(#_) .contact-link { color: var(--t-fg) !important; text-decoration: underline dashed var(--t-muted) !important; text-underline-offset: 3px; } /* bottom bar labels in the wordmark's face (Ross 2026-10-09); VT323 runs small, so a touch larger */ :root[data-skin="terminal"] body:not(#_) .mobile-nav .nav-label { font-family: var(--font-crt) !important; font-size: 1.15rem !important; font-weight: 400 !important; letter-spacing: 0.02em !important; } /* about: one list, one face, left aligned like a readme */ :root[data-skin="terminal"] body:not(#_) .about-points { text-align: left !important; max-width: 34rem; margin: 0 auto !important; font-size: 0.85rem !important; color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .about-points li { padding-left: 2ch; text-indent: -2ch; line-height: 1.55; } :root[data-skin="terminal"] body:not(#_) .about-points li::before { content: "- "; content: "- " / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .about-points :is(strong, b) { font-weight: inherit !important; color: inherit !important; } /* filter rows wrap instead of scrolling sideways: every option is visible, nothing hides off screen */ :root[data-skin="terminal"] body:not(#_) :is(.region-row, .chip-row, .drops-page .controls) { flex-wrap: wrap !important; overflow: visible !important; row-gap: 4px !important; } /* one page label pattern everywhere: "// dama pig " above the title (drops, home and about have their own) */ :root[data-skin="terminal"] body:not(#_) main:is([data-section="brands"], [data-section="setup"], [data-section="beginner"], [data-section="used"], [data-section="favorites"], [data-section="compare"], [data-section="blog"], [data-section="wood"]) h1:first-of-type::before { display: block; font-family: var(--font-sans) !important; font-size: 0.8rem; line-height: 1.4; color: var(--t-muted); text-transform: lowercase; margin-bottom: 6px; letter-spacing: 0; } :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] h1:first-of-type::before { content: "// dama pig brands"; content: "// dama pig brands" / ""; } :root[data-skin="terminal"] body:not(#_) main[data-section="setup"] h1:first-of-type::before { content: "// dama pig setup"; content: "// dama pig setup" / ""; } :root[data-skin="terminal"] body:not(#_) main[data-section="beginner"] h1:first-of-type::before { content: "// dama pig beginner"; content: "// dama pig beginner" / ""; } :root[data-skin="terminal"] body:not(#_) main[data-section="used"] h1:first-of-type::before { content: "// dama pig used"; content: "// dama pig used" / ""; } :root[data-skin="terminal"] body:not(#_) main[data-section="favorites"] h1:first-of-type::before { content: "// dama pig favorites"; content: "// dama pig favorites" / ""; } :root[data-skin="terminal"] body:not(#_) main[data-section="compare"] h1:first-of-type::before { content: "// dama pig compare"; content: "// dama pig compare" / ""; } :root[data-skin="terminal"] body:not(#_) main[data-section="blog"] h1:first-of-type::before { content: "// dama pig blog"; content: "// dama pig blog" / ""; } :root[data-skin="terminal"] body:not(#_) main[data-section="wood"] h1:first-of-type::before { content: "// dama pig wood"; content: "// dama pig wood" / ""; } /* the brands breadcrumb is the label's job now */ :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] nav:has(> a[href="/"]):not([aria-label]) { display: none !important; } /* brands filter box: a prompt line */ :root[data-skin="terminal"] body:not(#_) .brand-search { border: 0 !important; border-bottom: 1px dashed var(--t-line) !important; border-radius: 0 !important; background: var(--t-bg) !important; color: var(--t-fg) !important; padding: 4px 0 !important; font-family: var(--font-sans) !important; } :root[data-skin="terminal"] body:not(#_) .brand-search::placeholder { color: var(--t-muted); text-transform: lowercase; } :root[data-skin="terminal"] body:not(#_) .brand-search-empty { color: var(--t-muted) !important; font-size: 0.8rem !important; } :root[data-skin="terminal"] body:not(#_) .brand-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } :root[data-skin="terminal"] body:not(#_) .brand-search:focus-visible { outline: 0 !important; border-bottom: 1px solid var(--t-fg) !important; } /* ==================== 2026-10-09 night (Ross) ==================== */ /* product photos in full colour, always (the grey-until-hover did not work on phones) */ :root[data-skin="terminal"] { --t-photo: none; } /* every solid button gets the beginner button's offset shadow */ :root[data-skin="terminal"] body:not(#_) :is(.hero-btn.solid, .btn-primary, .brand-action.primary, .start-btn, .fund-cta, .sell-pill, .sheet-done-btn, .drops-hero .hero-btn, .get-alerts-btn) { box-shadow: 3px 3px 0 var(--t-line) !important; } /* setup: tighter, and the pick buttons are ink like the beginner button, not red */ :root[data-skin="terminal"] body:not(#_) .setup-page { padding-bottom: 24px !important; } :root[data-skin="terminal"] body:not(#_) .setup-page .setup-preview { padding-bottom: 16px !important; } :root[data-skin="terminal"] body:not(#_) .setup-page .empty-state { padding: 12px 0 !important; margin-top: 8px !important; } :root[data-skin="terminal"] body:not(#_) .setup-page :is(h1, .page-subtitle, .sub) { margin-bottom: 8px !important; } :root[data-skin="terminal"] body:not(#_) .start-btn { background: var(--t-bg) !important; color: var(--t-fg) !important; border: 1px solid var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .start-btn:is(:hover, :focus-visible) { background: var(--t-fg) !important; color: var(--t-bg) !important; } :root[data-skin="terminal"] body:not(#_) .start-btn :is(span, svg) { color: inherit !important; } /* recent restocks strip: full width and centred again */ :root[data-skin="terminal"] body:not(#_) .restock-teaser { width: 100% !important; margin-inline: auto !important; text-align: center; } :root[data-skin="terminal"] body:not(#_) .restock-teaser .teaser-header { justify-content: center !important; } :root[data-skin="terminal"] body:not(#_) .restock-teaser :is(.teaser-thumbs, .teaser-row, ul) { justify-content: center !important; margin-inline: auto !important; } /* brands page: smaller type for the filter, the country chips, region headings and names */ :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .brand-search { font-size: 0.85rem !important; } :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .region-pill { font-size: 0.75rem !important; } :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .region-heading { font-size: 0.85rem !important; } :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .brand-name { font-size: 0.82rem !important; } :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] :is(.brand-stats, .brand-ship) { font-size: 0.7rem !important; } /* setup steps: the active step is ink, like the beginner button, not a red block */ :root[data-skin="terminal"] body:not(#_) .step.active .step-number { background: var(--t-fg) !important; color: var(--t-bg) !important; border-color: var(--t-fg) !important; box-shadow: 2px 2px 0 var(--t-line); } :root[data-skin="terminal"] body:not(#_) .setup-page { padding-top: 4px !important; } :root[data-skin="terminal"] body:not(#_) .setup-page .back-link { margin-bottom: 8px !important; } :root[data-skin="terminal"] body:not(#_) .setup-page :is(header, .setup-header, .page-header) { margin-bottom: 12px !important; padding-top: 0 !important; } /* carousel arrows: raised keys with an offset shadow; pressing drops them into the shadow (no fill, no easing) */ :root[data-skin="terminal"] body:not(#_) .carousel-arrow { background: var(--t-bg) !important; color: var(--t-fg) !important; border: 1px solid var(--t-fg) !important; box-shadow: 2px 2px 0 var(--t-line) !important; transition: none !important; } :root[data-skin="terminal"] body:not(#_) .carousel-arrow:is(:hover, :focus, :focus-visible) { background: var(--t-bg) !important; color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .carousel-arrow:is(:hover, :focus-visible)::before, :root[data-skin="terminal"] body:not(#_) .carousel-arrow:is(:hover, :focus-visible)::after { color: var(--t-red) !important; } :root[data-skin="terminal"] body:not(#_) .carousel-arrow:active { box-shadow: 0 0 0 var(--t-line) !important; translate: 2px 2px; } :root[data-skin="terminal"] body:not(#_) .carousel-arrow:focus:not(:focus-visible) { outline: 0 !important; } /* brand cards: one shape for all. Actions sit in one row top right; stats keep to one line; the outside link is one common mark, [www], wherever a brand links to its own site */ :root[data-skin="terminal"] body:not(#_) .brand-card .brand-actions { flex-direction: row !important; align-items: flex-start !important; justify-content: flex-end !important; gap: 0 !important; padding: 4px 4px 0 0 !important; align-self: flex-start; } :root[data-skin="terminal"] body:not(#_) .brand-card .brand-actions :is(.fav-btn, .bell-btn, .brand-site-link) { min-width: 32px !important; min-height: 32px !important; } :root[data-skin="terminal"] body:not(#_) .brand-site-link::before { content: "[www]" !important; content: "[www]" / "" !important; font-size: 0.85rem !important; color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .brand-card :is(.brand-stats, .brand-ship) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin="terminal"] body:not(#_) .brand-card .brand-info { min-width: 0; } :root[data-skin="terminal"] body:not(#_) .brand-card .brand-card-link { flex: 1 1 0 !important; min-width: 0 !important; } :root[data-skin="terminal"] body:not(#_) .brand-card { min-height: 124px; align-content: flex-start; } :root[data-skin="terminal"] body:not(#_) .brand-card .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 360px) { :root[data-skin="terminal"] body:not(#_) .brand-card { min-height: 137px; } } /* brands list cards: no bio, short and even */ :root[data-skin="terminal"] body:not(#_) .brand-card { min-height: 0 !important; } @media (max-width: 360px) { :root[data-skin="terminal"] body:not(#_) .brand-card { min-height: 0 !important; } } :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .brand-card-link { padding: 8px 10px !important; gap: 10px !important; } :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .brand-logo { width: 40px !important; height: 40px !important; } /* about: the Dama Fund button is a beginner-style key with an ascii heart */ :root[data-skin="terminal"] body:not(#_) .merch-cta { box-shadow: 3px 3px 0 var(--t-line) !important; } /* merch matches the homepage Beginner button: outlined, [ label -> ], fills on hover; Dama Fund is solid red */ :root[data-skin="terminal"] body:not(#_) .merch-cta:not(.merch-cta-fund) { background: var(--t-bg) !important; color: var(--t-fg) !important; border: 1px solid var(--t-fg) !important; gap: 0 !important; } :root[data-skin="terminal"] body:not(#_) .merch-cta:not(.merch-cta-fund):is(:hover, :focus-visible) { background: var(--t-fg) !important; color: var(--t-bg) !important; } :root[data-skin="terminal"] body:not(#_) .merch-cta:not(.merch-cta-fund)::before { content: "[\00a0"; content: "[\00a0" / ""; color: var(--t-muted) !important; } :root[data-skin="terminal"] body:not(#_) .merch-cta:not(.merch-cta-fund)::after { content: "\00a0->\00a0]"; content: "\00a0->\00a0]" / ""; color: inherit !important; } :root[data-skin="terminal"] body:not(#_) .merch-cta:not(.merch-cta-fund) svg { display: none !important; } :root[data-skin="terminal"] body:not(#_) .merch-cta-fund { background: var(--t-red) !important; color: var(--t-on-red) !important; border: 1px solid var(--t-red) !important; } :root[data-skin="terminal"] body:not(#_) .merch-cta-fund::before { content: "<3\00a0"; content: "<3\00a0" / ""; color: inherit !important; font-weight: 700; } /* brand page: one-line description that opens on tap, and the actions on one line */ :root[data-skin="terminal"] body:not(#_) .brand-desc-more { margin: 4px 0 10px; font-size: 0.78rem; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .brand-desc-more summary { list-style: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin="terminal"] body:not(#_) .brand-desc-more summary::-webkit-details-marker { display: none; } :root[data-skin="terminal"] body:not(#_) .brand-desc-more[open] summary { white-space: normal; } :root[data-skin="terminal"] body:not(#_) .brand-actions-row { flex-wrap: nowrap !important; gap: 6px !important; } :root[data-skin="terminal"] body:not(#_) .brand-actions-row .brand-action { font-size: 0.75rem !important; padding: 4px 6px !important; min-height: 32px; white-space: nowrap; } :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .brand-card { min-height: 100px !important; } @media (max-width: 360px) { :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .brand-card { min-height: 115px !important; } } /* brand page hero: compact, nothing past the card edge */ :root[data-skin="terminal"] body:not(#_) .brand-hero { padding: 12px !important; } :root[data-skin="terminal"] body:not(#_) .brand-hero > div > div:first-child:has(img) { width: 56px !important; height: 56px !important; } :root[data-skin="terminal"] body:not(#_) .brand-hero :is(.flex-1) { min-width: 0; } :root[data-skin="terminal"] body:not(#_) .brand-pills > * { white-space: normal !important; font-size: 0.72rem !important; padding: 2px 6px !important; max-width: 100%; } :root[data-skin="terminal"] body:not(#_) .brand-desc-more summary { display: block !important; } :root[data-skin="terminal"] body:not(#_) .type-alert-row { flex-wrap: wrap !important; row-gap: 2px !important; font-size: 0.75rem !important; } :root[data-skin="terminal"] body:not(#_) .type-alert-row :is(button, .type-alert-bell) { font-size: 0.75rem !important; } :root[data-skin="terminal"] body:not(#_) .brand-hero .flex-1 { align-self: stretch !important; width: 100% !important; max-width: 100%; } /* ==================== 2026-10-10 depth and readability, round 1 (ticket 27) ==================== */ /* One elevation scale, hard offset shadows only (no blur anywhere in the skin). The shadow ink is its own token because dark mode needs a shadow LIGHTER than the ground; --t-line is invisible there. */ :root[data-skin="terminal"] { --t-shadow: #0a0a0a; --t-shadow-soft: #b4b4b4; } :root[data-skin="terminal"][data-mode="dark"] { --t-shadow: #4a4a4a; --t-shadow-soft: #3a3a3a; } :root[data-skin="terminal"] { --t-elev-1: 2px 2px 0 var(--t-shadow); /* chips, small buttons, inputs, arrows, hearts */ --t-elev-2: 4px 4px 0 var(--t-shadow-soft); /* cards, brand boxes, panels */ --t-elev-3: 6px 6px 0 var(--t-shadow); /* popovers, open selects, sheets */ --t-elev-1-up: 3px 3px 0 var(--t-shadow); --t-elev-2-up: 5px 5px 0 var(--t-shadow-soft); } /* classic's soft blur shadows do not exist in this skin */ :root[data-skin="terminal"] body:not(#_) :is(.combo-tooltip, .search-dropdown, .my-listing-panel, select::picker(select)) { box-shadow: var(--t-elev-3) !important; } /* solid and outlined buttons: raised at rest, lift one step on hover, press into the shadow */ :root[data-skin="terminal"] body:not(#_) :is(.hero-btn.solid, .btn-primary, .brand-action.primary, .start-btn, .fund-cta, .sell-pill, .sheet-done-btn, .drops-hero .hero-btn, .get-alerts-btn, .merch-cta, .carousel-arrow, .step.active .step-number, .brand-actions-row .brand-action) { box-shadow: var(--t-elev-1) !important; transition: none !important; } :root[data-skin="terminal"] body:not(#_) .brand-actions-row .brand-action { border: 1px solid var(--t-fg) !important; } @media (hover: hover) { :root[data-skin="terminal"] body:not(#_) :is(.hero-btn.solid, .btn-primary, .brand-action.primary, .start-btn, .fund-cta, .sell-pill, .sheet-done-btn, .drops-hero .hero-btn, .get-alerts-btn, .merch-cta, .carousel-arrow, .brand-actions-row .brand-action):hover { box-shadow: var(--t-elev-1-up) !important; translate: -1px -1px; } /* text-only bracket buttons stay boxless: the brackets are the box; the hover fill gets the shadow */ :root[data-skin="terminal"] body:not(#_) :is(.segment-btn, .region-pill, .refinement-pill, .filter-chip, .chip, .ctl, .notify-btn, .type-pill, .view-all-btn, .type-alert-bell, .clear-filters-btn, .wood-link, [aria-label="Example searches"] button):hover { box-shadow: var(--t-elev-1) !important; } } :root[data-skin="terminal"] body:not(#_) :is(.hero-btn.solid, .btn-primary, .brand-action.primary, .start-btn, .fund-cta, .sell-pill, .sheet-done-btn, .drops-hero .hero-btn, .get-alerts-btn, .merch-cta, .carousel-arrow, .brand-actions-row .brand-action):active { box-shadow: 0 0 0 var(--t-shadow) !important; translate: 2px 2px; } :root[data-skin="terminal"] body:not(#_) :is(button, a)[disabled], :root[data-skin="terminal"] body:not(#_) :is(button, a)[aria-disabled="true"] { box-shadow: none !important; color: var(--t-muted) !important; border-style: dashed !important; translate: none; } @media (prefers-reduced-motion: reduce) { :root[data-skin="terminal"] body:not(#_) * { translate: none !important; } } /* cards: raised boxes on the page ground; the ground beneath never moves (box-shadow is paint only, CLS 0) */ :root[data-skin="terminal"] body:not(#_) :is(.product-card, .brand-card) { box-shadow: var(--t-elev-2) !important; border: 1px solid var(--t-fg) !important; position: relative; } @media (hover: hover) { :root[data-skin="terminal"] body:not(#_) :is(.product-card, .brand-card):hover { box-shadow: var(--t-elev-2-up) !important; translate: -1px -1px; } } /* the carousel clips vertically: leave room for the shadow under the last row */ :root[data-skin="terminal"] body:not(#_) .carousel-track { padding-bottom: 6px !important; padding-right: 1.5rem !important; } :root[data-skin="terminal"] body:not(#_) :is(.product-grid, .grid:has(> .product-card), .grid:has(> * > .product-card), .grid:has(> .brand-card)) { padding-bottom: 4px; } /* product card readability: image well, dashed rule, brand / title / price with one job each */ :root[data-skin="terminal"] body:not(#_) .product-card > a > div:first-child { border-bottom: 1px dashed var(--t-line); } :root[data-skin="terminal"] body:not(#_) .product-card .p-3 { padding: 8px 10px 0 !important; } :root[data-skin="terminal"] body:not(#_) .product-card .p-3 > p.text-xs { font-size: 11px !important; color: var(--t-muted) !important; margin-bottom: 2px !important; } :root[data-skin="terminal"] body:not(#_) .product-card h3 { font-size: 13px !important; font-weight: 600 !important; color: var(--t-fg) !important; margin-bottom: 6px !important; } /* the price sits on a tinted footer strip, full card width, so it never blends into the title */ :root[data-skin="terminal"] body:not(#_) .product-card .p-3 > p.type-bold { display: block; margin: 0 -10px !important; padding: 5px 10px !important; background: var(--t-surface) !important; border-top: 1px dotted var(--t-line); font-size: 15px !important; font-weight: 700 !important; color: var(--t-fg) !important; font-variant-numeric: tabular-nums; } :root[data-skin="terminal"] body:not(#_) .product-card:hover h3 { color: var(--t-red) !important; } /* badges differ by form, not only by colour: live = red outline + *, new = ink fill, sold out = muted dashed */ :root[data-skin="terminal"] body:not(#_) .product-card :is(.stock-badge-live, .stock-badge-sold, .stock-badge-new) { font-size: 10px !important; padding: 1px 5px !important; line-height: 1.4 !important; box-shadow: var(--t-elev-1) !important; } :root[data-skin="terminal"] body:not(#_) .product-card .stock-badge-live { border: 1px solid var(--t-red) !important; background: var(--t-bg) !important; } :root[data-skin="terminal"] body:not(#_) .product-card .stock-badge-new { background: var(--t-fg) !important; color: var(--t-bg) !important; border: 1px solid var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .product-card .stock-badge-sold { border: 1px dashed var(--t-muted) !important; color: var(--t-muted) !important; background: var(--t-bg) !important; box-shadow: none !important; } :root[data-skin="terminal"] body:not(#_) .product-card .fav-btn { box-shadow: var(--t-elev-1) !important; border-color: var(--t-fg) !important; } /* brands page cards: a solid raised box at rest; the dashed frame with + corners becomes the hover */ :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .brand-card { border: 1px solid var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .brand-card:not(:hover):not(:focus-within)::before, :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .brand-card:not(:hover):not(:focus-within)::after { content: none; } :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .brand-card:is(:hover, :focus-within) { border: 1px dashed var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .brand-card .brand-logo { background: var(--t-surface) !important; border: 1px solid var(--t-line); } :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .brand-card .brand-name { font-weight: 600 !important; color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .brand-card .brand-stats { color: var(--t-muted) !important; } :root[data-skin="terminal"] body:not(#_) main[data-section="brands"] .brand-card .brand-actions { border-left: 1px dashed var(--t-line); padding-left: 4px !important; align-self: stretch !important; } /* carousel cards carry a time-ago strip below the card: the strip joins the card as its footer and the wrapper carries the shadow, so the raised unit is card + strip, not a card with a loose tag under it */ :root[data-skin="terminal"] body:not(#_) .carousel-card-wrapper:has(.card-timestamp) { box-shadow: var(--t-elev-2) !important; position: relative; } :root[data-skin="terminal"] body:not(#_) .carousel-card-wrapper:has(.card-timestamp) .product-card { box-shadow: none !important; border-bottom: 0 !important; } :root[data-skin="terminal"] body:not(#_) .carousel-card-wrapper .card-timestamp { margin-top: 0 !important; padding: 3px 10px !important; border: 1px solid var(--t-fg) !important; border-top: 1px dotted var(--t-line) !important; background: var(--t-surface) !important; color: var(--t-muted) !important; font-size: 10px !important; text-align: left !important; } @media (hover: hover) { :root[data-skin="terminal"] body:not(#_) .carousel-card-wrapper:has(.card-timestamp):hover { box-shadow: var(--t-elev-2-up) !important; translate: -1px -1px; } :root[data-skin="terminal"] body:not(#_) .carousel-card-wrapper:has(.card-timestamp) .product-card:hover { translate: none; } } /* ALTERNATIVE for Ross to compare (?elev=dither): the ascii.rest shade, a 2 px checker one cell down and right. Product cards only: they are the one raised element whose ::before and ::after are free (buttons spend them on brackets, brand cards on the + corners), and the shade needs two bands, bottom and right. */ :root[data-skin="terminal"][data-elev="dither"] body:not(#_) :is(.product-card, .carousel-card-wrapper:has(.card-timestamp)) { box-shadow: none !important; position: relative; overflow: visible !important; } :root[data-skin="terminal"][data-elev="dither"] body:not(#_) :is(.product-card:not(.carousel-card-wrapper *), .carousel-card-wrapper:has(.card-timestamp))::before, :root[data-skin="terminal"][data-elev="dither"] body:not(#_) :is(.product-card:not(.carousel-card-wrapper *), .carousel-card-wrapper:has(.card-timestamp))::after { content: ""; position: absolute; pointer-events: none; background: repeating-conic-gradient(var(--t-shadow) 0 25%, transparent 0 50%) 0 0 / 4px 4px; } :root[data-skin="terminal"][data-elev="dither"] body:not(#_) :is(.product-card:not(.carousel-card-wrapper *), .carousel-card-wrapper:has(.card-timestamp))::before { left: 4px; right: -4px; bottom: -4px; height: 4px; } :root[data-skin="terminal"][data-elev="dither"] body:not(#_) :is(.product-card:not(.carousel-card-wrapper *), .carousel-card-wrapper:has(.card-timestamp))::after { top: 4px; bottom: 0; right: -4px; width: 4px; } /* ==================== 2026-10-10 depth and readability, round 2: hard everywhere, dither on cards (Ross) ==================== */ /* every remaining card: raised, solid ink border at rest; brand tiles keep the dashed + corners as the hover */ :root[data-skin="terminal"] body:not(#_) :is(.drop-card, .bento-card, .beginner-card, .brand-tile, .wood-card) { box-shadow: var(--t-elev-2) !important; border: 1px solid var(--t-fg) !important; position: relative; } :root[data-skin="terminal"] body:not(#_) .brand-tile:not(:hover):not(:focus-within)::before, :root[data-skin="terminal"] body:not(#_) .brand-tile:not(:hover):not(:focus-within)::after { content: none; } :root[data-skin="terminal"] body:not(#_) .brand-tile:is(:hover, :focus-within) { border: 1px dashed var(--t-fg) !important; } @media (hover: hover) { :root[data-skin="terminal"] body:not(#_) :is(.drop-card, .bento-card, .beginner-card, .brand-tile, .wood-card):hover { box-shadow: var(--t-elev-2-up) !important; translate: -1px -1px; } } :root[data-skin="terminal"] body:not(#_) :is(.drops-grid, .picks-grid, .bento-grid, .sold-out-grid, .grid:has(> .brand-tile), .tiles:has(> .brand-tile)) { padding-bottom: 4px; padding-right: 4px; } /* the same card hierarchy as the product card: muted brand, bold ink title, price on a tinted footer strip */ :root[data-skin="terminal"] body:not(#_) :is(.drop-card, .beginner-card) .image-box, :root[data-skin="terminal"] body:not(#_) .bento-card .bento-image { border-bottom: 1px dashed var(--t-line); } :root[data-skin="terminal"] body:not(#_) :is(.drop-card, .beginner-card) .card-body { padding: 8px 10px 0 !important; display: flex; flex-direction: column; } :root[data-skin="terminal"] body:not(#_) :is(.drop-card, .beginner-card) .brand-pill, :root[data-skin="terminal"] body:not(#_) .bento-card .bento-brand { font-size: 11px !important; color: var(--t-muted) !important; background: none !important; border: 0 !important; padding: 0 !important; margin-bottom: 2px !important; } :root[data-skin="terminal"] body:not(#_) :is(.drop-card, .beginner-card) .card-title, :root[data-skin="terminal"] body:not(#_) .bento-card .bento-title { font-size: 13px !important; font-weight: 600 !important; color: var(--t-fg) !important; margin-bottom: 6px !important; } :root[data-skin="terminal"] body:not(#_) :is(.drop-card, .beginner-card) .card-footer { margin: 0 -10px !important; padding: 5px 10px !important; background: var(--t-surface) !important; border-top: 1px dotted var(--t-line); display: flex; align-items: center; justify-content: space-between; gap: 6px; } :root[data-skin="terminal"] body:not(#_) :is(.drop-card, .beginner-card) .card-price { font-size: 15px !important; font-weight: 700 !important; color: var(--t-fg) !important; font-variant-numeric: tabular-nums; } :root[data-skin="terminal"] body:not(#_) .bento-card .bento-content { padding: 8px 10px 0 !important; } :root[data-skin="terminal"] body:not(#_) .bento-card .bento-price { margin: 0 -10px !important; padding: 5px 10px !important; background: var(--t-surface) !important; border-top: 1px dotted var(--t-line); font-weight: 700 !important; color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) :is(.drop-card, .beginner-card, .bento-card) :is(.section-flag, .badge, .bento-badges .stock-badge) { font-size: 10px !important; padding: 1px 5px !important; line-height: 1.4 !important; box-shadow: var(--t-elev-1) !important; } :root[data-skin="terminal"] body:not(#_) :is(.drop-card, .beginner-card, .bento-card) :is(.flag-sold, .badge-sold) { border: 1px dashed var(--t-muted) !important; color: var(--t-muted) !important; box-shadow: none !important; } :root[data-skin="terminal"] body:not(#_) :is(.drop-card, .beginner-card, .bento-card) :is(.flag-new, .badge-new) { background: var(--t-fg) !important; color: var(--t-bg) !important; border-color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) :is(.drop-card, .beginner-card, .bento-card-link) .fav-btn { box-shadow: var(--t-elev-1) !important; border-color: var(--t-fg) !important; } /* dither on every card type (Ross: dither on cards only) */ :root[data-skin="terminal"][data-elev="dither"] body:not(#_) :is(.drop-card, .bento-card, .beginner-card) { box-shadow: none !important; overflow: visible !important; } :root[data-skin="terminal"][data-elev="dither"] body:not(#_) :is(.drop-card, .bento-card, .beginner-card)::before, :root[data-skin="terminal"][data-elev="dither"] body:not(#_) :is(.drop-card, .bento-card, .beginner-card)::after { content: ""; position: absolute; pointer-events: none; background: repeating-conic-gradient(var(--t-shadow) 0 25%, transparent 0 50%) 0 0 / 4px 4px; } :root[data-skin="terminal"][data-elev="dither"] body:not(#_) :is(.drop-card, .bento-card, .beginner-card)::before { left: 4px; right: -4px; bottom: -4px; height: 4px; } :root[data-skin="terminal"][data-elev="dither"] body:not(#_) :is(.drop-card, .bento-card, .beginner-card)::after { top: 4px; bottom: 0; right: -4px; width: 4px; } /* panels and boxes: raised */ :root[data-skin="terminal"] body:not(#_) :is(.fund-meter-box, .fund-card, .setup-preview, details.facts, details.pd-specs, .wood-hero, .buy-box, .restock-teaser, .brand-hero, .beginner-guide, .my-listing-panel, .price-card, .trust-card, .seller, .drops-board, .board-frame, pre.board, .state-message, .analysis, .setup-analysis) { box-shadow: var(--t-elev-2) !important; border-color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) :is(.brand-hero, .beginner-guide, .state-message) { border: 1px solid var(--t-fg) !important; } /* the brand description is a well inside the hero (fill, no shadow) so it does not merge with it */ :root[data-skin="terminal"] body:not(#_) .brand-desc-more { background: var(--t-surface) !important; border: 1px solid var(--t-line) !important; padding: 4px 8px !important; } /* inputs, selects and the search box: raised one step; open menus and sheets raised three */ :root[data-skin="terminal"] body:not(#_) :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, .brand-search) { box-shadow: var(--t-elev-1) !important; border-color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) :is(.sheet, .dialog, [role="dialog"] > .modal, .modal-content, .combo-tooltip, .search-dropdown) { box-shadow: var(--t-elev-3) !important; border: 1px solid var(--t-fg) !important; } /* the rest of the solid and outlined buttons */ :root[data-skin="terminal"] body:not(#_) :is(.btn-secondary, .notify-btn.watch-pill, .brand-action, .sheet-done-btn, .mobile-filter-fab, a.w-full.type-bold[target="_blank"], .shipping-option, .start-btn) { box-shadow: var(--t-elev-1) !important; } :root[data-skin="terminal"] body:not(#_) :is(.btn-secondary, .shipping-option) { border: 1px solid var(--t-fg) !important; padding: 4px 10px !important; } @media (hover: hover) { :root[data-skin="terminal"] body:not(#_) :is(.btn-secondary, .brand-action, .mobile-filter-fab, a.w-full.type-bold[target="_blank"], .shipping-option):hover { box-shadow: var(--t-elev-1-up) !important; translate: -1px -1px; } } :root[data-skin="terminal"] body:not(#_) :is(.btn-secondary, .brand-action, .mobile-filter-fab, a.w-full.type-bold[target="_blank"], .shipping-option):active { box-shadow: 0 0 0 var(--t-shadow) !important; translate: 2px 2px; } :root[data-skin="terminal"] body:not(#_) .shipping-option.selected { background: var(--t-fg) !important; color: var(--t-bg) !important; } /* product page: fewer words around the one button. The shipping lines sit under one "shipping [+]" row, the two notes become one muted footer line each at 0.7rem, no italics. */ :root[data-skin="terminal"] body:not(#_) .pd-shipping { margin-top: 8px; border: 1px solid var(--t-line); } :root[data-skin="terminal"] body:not(#_) .pd-shipping > summary { display: block; list-style: none; cursor: pointer; padding: 5px 10px; font-size: 0.8rem; color: var(--t-fg); background: var(--t-surface); } :root[data-skin="terminal"] body:not(#_) .pd-shipping > summary::-webkit-details-marker { display: none; } :root[data-skin="terminal"] body:not(#_) .pd-shipping > summary::before { content: "> "; content: "> " / ""; color: var(--t-red); } :root[data-skin="terminal"] body:not(#_) .pd-shipping > summary::after { content: "[+]"; content: "[+]" / ""; float: right; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .pd-shipping[open] > summary::after { content: "[-]"; content: "[-]" / ""; } :root[data-skin="terminal"] body:not(#_) .pd-shipping > :not(summary) { margin: 0 !important; padding: 4px 10px !important; font-size: 0.75rem !important; text-align: left !important; } :root[data-skin="terminal"] body:not(#_) .pd-shipping .shipping-info { padding-top: 6px !important; } :root[data-skin="terminal"] body:not(#_) .pd-shipping .shipping-change-btn { font-size: 0.75rem !important; text-decoration: none !important; color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .pd-shipping .shipping-change-btn::before { content: "["; content: "[" / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .pd-shipping .shipping-change-btn::after { content: "]"; content: "]" / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .buy-box :is(p.text-xs.type-italic, p.text-center.text-xs) { font-style: normal !important; font-size: 0.7rem !important; margin-top: 4px !important; } :root[data-skin="terminal"] body:not(#_) .buy-box .shipping-select-label { font-size: 0.75rem; color: var(--t-muted); } /* beginner page: one voice before the grid. The h1 and the count line are ink; every other line is one size and muted, so the brand note, the stamp and the section notes stop competing with each other. */ :root[data-skin="terminal"] body:not(#_) .beginner-hero :is(.hero-line, .stamp), :root[data-skin="terminal"] body:not(#_) .controls-label, :root[data-skin="terminal"] body:not(#_) .section-note { font-size: 0.8rem !important; line-height: 1.45 !important; color: var(--t-muted) !important; margin: 0 0 4px !important; } :root[data-skin="terminal"] body:not(#_) .beginner-hero .hero-line:first-of-type { color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .beginner-hero .hero-line a { color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .beginner-hero .stamp { font-size: 0.7rem !important; } :root[data-skin="terminal"] body:not(#_) .controls { margin-top: 10px !important; } :root[data-skin="terminal"] body:not(#_) .result-line { font-size: 0.85rem !important; color: var(--t-fg) !important; margin: 8px 0 !important; } :root[data-skin="terminal"] body:not(#_) .section-head { margin-bottom: 8px !important; } :root[data-skin="terminal"] body:not(#_) .section-heading { margin-bottom: 2px !important; } /* every card the same height: a fixed two-line title slot and the footer strip pinned to the bottom */ :root[data-skin="terminal"] body:not(#_) :is(.beginner-card .card-title, .drop-card .card-title) { min-height: 2.5em !important; max-height: 2.5em; line-height: 1.25 !important; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } :root[data-skin="terminal"] body:not(#_) :is(.beginner-card, .drop-card) { display: flex; flex-direction: column; } :root[data-skin="terminal"] body:not(#_) :is(.beginner-card, .drop-card) .card-body { flex: 1 1 auto; } :root[data-skin="terminal"] body:not(#_) :is(.beginner-card, .drop-card) .card-footer { margin-top: auto !important; } :root[data-skin="terminal"] body:not(#_) details.pd-versions { box-shadow: var(--t-elev-2) !important; border-color: var(--t-fg) !important; } /* ==================== 2026-10-10 product page, Ross's notes after round 2 ==================== */ /* the title takes the full width; favorite and notify sit on their own row under it (they used to squeeze the title into a narrow column and hang past the edge) */ :root[data-skin="terminal"] body:not(#_) .buy-box div:has(> h1) { flex-wrap: wrap !important; gap: 6px 0 !important; } :root[data-skin="terminal"] body:not(#_) .buy-box div:has(> h1) > h1 { flex: 1 1 100% !important; max-width: 100%; } :root[data-skin="terminal"] body:not(#_) .buy-box .title-actions { flex: 1 1 100% !important; justify-content: flex-start !important; margin-left: -4px; } /* the shop is named once, on the frame: the brand line keeps only the type, the maker pill drops "at " */ :root[data-skin="terminal"] body:not(#_) .buy-box div:has(> a[href^="/brand/"].type-bold) > :not(.type-italic) { display: none !important; } :root[data-skin="terminal"] body:not(#_) .buy-box .attribution-pill-shop { display: none !important; } :root[data-skin="terminal"] body:not(#_) .buy-box .attribution-pill::before { content: "made by "; content: "made by " / ""; color: var(--t-muted); font-weight: 400; text-transform: none; } :root[data-skin="terminal"] body:not(#_) .buy-box .attribution-pill { text-transform: none !important; } /* the tracked-since sentence repeats the headline and the chart panel: the panel keeps it */ :root[data-skin="terminal"] body:not(#_) .pd .pd-record { display: none !important; } /* the chart toggle is a real raised button, not a bare bracket line */ :root[data-skin="terminal"] body:not(#_) .show-history-btn { border: 1px solid var(--t-fg) !important; padding: 4px 10px !important; box-shadow: var(--t-elev-1) !important; margin: 4px 0 8px; } @media (hover: hover) { :root[data-skin="terminal"] body:not(#_) .show-history-btn:hover { box-shadow: var(--t-elev-1-up) !important; translate: -1px -1px; } } :root[data-skin="terminal"] body:not(#_) .show-history-btn:active { box-shadow: 0 0 0 var(--t-shadow) !important; translate: 2px 2px; } :root[data-skin="terminal"] body:not(#_) .show-history-btn[aria-expanded="true"] { background: var(--t-fg) !important; color: var(--t-bg) !important; } /* drops board: the ascii frame is drawn in the pre; the pre carries the shadow so the board is raised like every other box */ :root[data-skin="terminal"] body:not(#_) .t-piece-board pre { box-shadow: var(--t-elev-2) !important; } /* recent restocks strip (footer): a small raised box that hugs its content, bordered all round (Ross 2026-10-10) */ :root[data-skin="terminal"] body:not(#_) .restock-teaser { width: max-content !important; max-width: calc(100% - 8px) !important; margin: 0 auto 12px !important; padding: 6px 12px 8px !important; border: 1px solid var(--t-fg) !important; box-shadow: var(--t-elev-2) !important; display: block; } :root[data-skin="terminal"] body:not(#_) .restock-teaser .teaser-header { margin-bottom: 4px !important; } :root[data-skin="terminal"] body:not(#_) .restock-teaser { display: block !important; margin-left: auto !important; margin-right: auto !important; text-align: center; } /* ==================== 2026-10-10 brand filter, crumbs, heart, About box (Ross) ==================== */ /* drops, brands, beginner: no region pills; one tight brand filter box instead (rendered only in the skin) */ :root[data-skin="terminal"] body:not(#_) :is(main[data-section="brands"], .drops-page, .beginner-page, main:has(.beginner-hero), main:has(.drops-page)) .region-row { display: none !important; } :root[data-skin="terminal"] body:not(#_) .brands-page .region-row, :root[data-skin="terminal"] body:not(#_) .region-row:has(.region-pill) { display: none !important; } :root[data-skin="terminal"] body:not(#_) .brand-search { display: block; width: 22ch !important; max-width: 100% !important; padding: 3px 8px !important; font-size: 0.8rem !important; margin: 6px 0 10px !important; border: 1px solid var(--t-fg) !important; box-shadow: var(--t-elev-1) !important; background: var(--t-bg) !important; color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .brand-search::placeholder { color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .controls-label { display: none !important; } /* beginner: only the "// dama pig beginner" label, not the crumbs above it */ :root[data-skin="terminal"] body:not(#_) main:has(.beginner-hero) .crumbs, :root[data-skin="terminal"] body:not(#_) .beginner-page .crumbs { display: none !important; } /* favorites: the empty-state ascii heart glimmers (a stepped sweep, no easing; still under reduced motion) */ @keyframes t-glimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } :root[data-skin="terminal"] body:not(#_) .fav-empty::before { color: transparent !important; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(100deg, var(--t-muted) 0 42%, var(--t-red) 48% 52%, var(--t-muted) 58% 100%); background-size: 300% 100%; background-position: 100% 0; animation: t-glimmer 2.4s steps(16) 2; /* two sweeps (4.8 s) then still: WCAG 2.2.2 wants a pause control for anything that moves past 5 s */ } @media (prefers-reduced-motion: reduce) { :root[data-skin="terminal"] body:not(#_) .fav-empty::before { animation: none; color: var(--t-muted) !important; background: none; } } /* about: "help support the project" is a raised double-ruled box with + corners */ :root[data-skin="terminal"] body:not(#_) .merch-card { position: relative; border: 3px double var(--t-fg) !important; box-shadow: var(--t-elev-3) !important; padding: 14px 16px 16px !important; background: var(--t-bg) !important; overflow: visible !important; } :root[data-skin="terminal"] body:not(#_) .merch-card::before, :root[data-skin="terminal"] body:not(#_) .merch-card::after { content: "+"; content: "+" / ""; position: absolute; color: var(--t-red); font-weight: 700; line-height: 1; background: var(--t-bg); padding: 0 1px; } :root[data-skin="terminal"] body:not(#_) .merch-card::before { top: -0.55em; left: -0.5ch; } :root[data-skin="terminal"] body:not(#_) .merch-card::after { bottom: -0.5em; right: -0.5ch; } :root[data-skin="terminal"] body:not(#_) .merch-heading::before { content: "> "; content: "> " / ""; color: var(--t-red); } /* ==================== 2026-10-10 used marketplace: feed cards on the card standard, ascii loader (Ross) ==================== */ /* grid: the same two columns on phones and 176 px cards on desktop as every other product grid */ :root[data-skin="terminal"] body:not(#_) .used-row .feed, :root[data-skin="terminal"] body:not(#_) .feed:has(> .feed-card) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 0 0 6px !important; align-items: start !important; } @media (min-width: 640px) { :root[data-skin="terminal"] body:not(#_) .feed:has(> .feed-card) { grid-template-columns: repeat(auto-fill, 176px) !important; justify-content: start; } } /* the card: raised, ink border, photo well with a dashed rule, same as the product card */ :root[data-skin="terminal"] body:not(#_) .feed-card { background: var(--t-bg) !important; border: 1px solid var(--t-fg) !important; box-shadow: var(--t-elev-2) !important; position: relative; display: flex; flex-direction: column; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; } @media (hover: hover) { :root[data-skin="terminal"] body:not(#_) .feed-card:hover { box-shadow: var(--t-elev-2-up) !important; translate: -1px -1px; } } :root[data-skin="terminal"] body:not(#_) .feed-card .photo-wrap { background: var(--t-surface) !important; border-bottom: 1px dashed var(--t-line); aspect-ratio: 1 / 1; border-radius: 0 !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .photo-wrap img { object-fit: cover; } :root[data-skin="terminal"] body:not(#_) .feed-card .photo-placeholder { font-size: 11px; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .feed-card .sold-badge { position: absolute; top: 8px; left: 8px; font-size: 10px !important; padding: 1px 5px !important; border: 1px dashed var(--t-muted) !important; color: var(--t-muted) !important; background: var(--t-bg) !important; } /* body: condition and type on the small top line, bold title in a fixed slot, price on the tinted strip with the retail anchor beside it, the total as one small line, trust and shipping as text marks, posted last */ :root[data-skin="terminal"] body:not(#_) .feed-card .card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 8px 10px 0 !important; gap: 0 !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .meta-row { order: 1; display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; font-size: 11px !important; color: var(--t-muted) !important; margin: 0 0 2px !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .condition-pill { font-size: 10px !important; padding: 0 4px !important; border: 1px solid var(--t-fg) !important; color: var(--t-fg) !important; background: var(--t-bg) !important; line-height: 1.4; } :root[data-skin="terminal"] body:not(#_) .feed-card .type-text { font-size: 11px !important; color: var(--t-muted) !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .verified { font-size: 0 !important; color: var(--t-ok) !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .verified svg { display: none !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .verified::before { content: "[v] verified"; content: "[v] verified" / "verified seller"; font-size: 10px; } :root[data-skin="terminal"] body:not(#_) .feed-card .shipping-chip { font-size: 10px !important; padding: 0 4px !important; border: 1px solid var(--t-line) !important; background: var(--t-surface) !important; color: var(--t-fg) !important; font-weight: 400 !important; line-height: 1.4; margin: 0 !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .card-title { order: 2; font-size: 13px !important; font-weight: 600 !important; color: var(--t-fg) !important; line-height: 1.25 !important; min-height: 2.5em !important; max-height: 2.5em; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 0 0 6px !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .card-title::before { content: none !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .title-link { color: inherit !important; text-decoration: none !important; } :root[data-skin="terminal"] body:not(#_) .feed-card:hover .card-title { color: var(--t-red) !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .price-row { order: 3; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin: auto -10px 0 !important; padding: 5px 10px !important; background: var(--t-surface) !important; border-top: 1px dotted var(--t-line); } :root[data-skin="terminal"] body:not(#_) .feed-card .price { font-size: 15px !important; font-weight: 700 !important; color: var(--t-fg) !important; font-variant-numeric: tabular-nums; } :root[data-skin="terminal"] body:not(#_) .feed-card .retail-anchor { font-size: 10px !important; color: var(--t-muted) !important; white-space: nowrap; } :root[data-skin="terminal"] body:not(#_) .feed-card .retail-anchor a { color: var(--t-fg) !important; text-decoration: underline dotted !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .total-line { order: 4; margin: 0 -10px !important; padding: 2px 10px 4px !important; background: var(--t-surface) !important; font-size: 10px !important; line-height: 1.3 !important; color: var(--t-muted) !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .posted { order: 5; margin: 0 -10px !important; padding: 3px 10px !important; border-top: 1px dotted var(--t-line); font-size: 10px !important; color: var(--t-muted) !important; text-align: right; background: var(--t-surface) !important; } :root[data-skin="terminal"] body:not(#_) .feed-card.sold { opacity: 1 !important; } :root[data-skin="terminal"] body:not(#_) .feed-card.sold .price { color: var(--t-muted) !important; text-decoration: line-through; } /* dither on these cards too (Ross: dither on cards only) */ :root[data-skin="terminal"][data-elev="dither"] body:not(#_) .feed-card { box-shadow: none !important; overflow: visible !important; } :root[data-skin="terminal"][data-elev="dither"] body:not(#_) .feed-card::before, :root[data-skin="terminal"][data-elev="dither"] body:not(#_) .feed-card::after { content: ""; position: absolute; pointer-events: none; background: repeating-conic-gradient(var(--t-shadow) 0 25%, transparent 0 50%) 0 0 / 4px 4px; } :root[data-skin="terminal"][data-elev="dither"] body:not(#_) .feed-card::before { left: 4px; right: -4px; bottom: -4px; height: 4px; } :root[data-skin="terminal"][data-elev="dither"] body:not(#_) .feed-card::after { top: 4px; bottom: 0; right: -4px; width: 4px; } /* loading: the grey blocks become a boot line, stepped like a terminal, with dashed empty frames underneath */ :root[data-skin="terminal"] body:not(#_) [data-testid="feed-skeleton"] { position: relative; padding-top: 44px !important; } :root[data-skin="terminal"] body:not(#_) [data-testid="feed-skeleton"] .feed-card { border: 1px dashed var(--t-line) !important; box-shadow: none !important; min-height: 240px; } :root[data-skin="terminal"] body:not(#_) [data-testid="feed-skeleton"] .skeleton { visibility: hidden !important; animation: none !important; } @keyframes t-boot { 0% { content: "> loading used listings [#.........] |"; } 12% { content: "> loading used listings [##........] /"; } 25% { content: "> loading used listings [###.......] -"; } 37% { content: "> loading used listings [#####.....] \\"; } 50% { content: "> loading used listings [######....] |"; } 62% { content: "> loading used listings [#######...] /"; } 75% { content: "> loading used listings [########..] -"; } 87% { content: "> loading used listings [#########.] \\"; } 100% { content: "> loading used listings [##########] |"; } } :root[data-skin="terminal"] body:not(#_) [data-testid="feed-skeleton"]::before { content: "> loading used listings [..........] |"; position: absolute; top: 10px; left: 0; right: 0; grid-column: 1 / -1; font-size: 12px; color: var(--t-fg); white-space: pre; animation: t-boot 1.8s steps(1) infinite; } :root[data-skin="terminal"] body:not(#_) [data-testid="feed-skeleton"]::before { content: "> loading used listings [..........] |" / "loading"; } @media (prefers-reduced-motion: reduce) { :root[data-skin="terminal"] body:not(#_) [data-testid="feed-skeleton"]::before { animation: none; content: "> loading used listings ..." / "loading"; } } /* listing page: the trust box is a well with a frame */ :root[data-skin="terminal"] body:not(#_) .trust-block { border: 1px solid var(--t-line) !important; background: var(--t-surface) !important; padding: 10px 12px !important; } /* feed card body as one wrapping row: condition + type share the top line; verified, shipping share, posted share the bottom strip */ :root[data-skin="terminal"] body:not(#_) .feed-card .card-body { flex-direction: row !important; flex-wrap: wrap; align-content: flex-start; padding: 8px 0 0 !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .meta-row { display: contents; } :root[data-skin="terminal"] body:not(#_) .feed-card .condition-pill { order: 1; margin: 0 4px 2px 10px !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .type-text { order: 1; flex: 1 1 auto; margin: 0 10px 2px 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; } :root[data-skin="terminal"] body:not(#_) .feed-card .type-text + .type-text { flex: 0 0 auto; margin-left: -6px !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .card-title { flex: 0 0 100%; padding: 0 10px; } :root[data-skin="terminal"] body:not(#_) .feed-card .price-row { flex: 0 0 100%; margin: auto 0 0 !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .total-line { flex: 0 0 100%; margin: 0 !important; min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } :root[data-skin="terminal"] body:not(#_) .feed-card .card-body > :is(.verified, .shipping-chip, .posted) { order: 5; margin: 0 !important; padding: 3px 0 !important; border-top: 1px dotted var(--t-line); background: var(--t-surface) !important; line-height: 1.4; } :root[data-skin="terminal"] body:not(#_) .feed-card .verified { flex: 0 0 auto; padding-left: 10px !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .shipping-chip { flex: 0 0 auto; border: 0 !important; color: var(--t-ok) !important; padding-left: 8px !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .shipping-chip * { font-size: 10px !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .posted { flex: 1 1 auto; padding-right: 10px !important; text-align: right; } /* loader line: a full-width grid item, not an absolute box */ :root[data-skin="terminal"] body:not(#_) [data-testid="feed-skeleton"] { padding-top: 0 !important; } :root[data-skin="terminal"] body:not(#_) [data-testid="feed-skeleton"]::before { position: static; grid-column: 1 / -1; display: block; padding: 6px 0 4px; } /* (fix) the chip is .ship-chip, and the strip items live inside .meta-row (display: contents), so no child combinator */ :root[data-skin="terminal"] body:not(#_) .feed-card :is(.verified, .ship-chip, .posted) { order: 5 !important; margin: 0 !important; padding: 3px 0 !important; border-top: 1px dotted var(--t-line); background: var(--t-surface) !important; line-height: 1.5 !important; font-size: 10px !important; height: 21px; box-sizing: border-box; } :root[data-skin="terminal"] body:not(#_) .feed-card .verified { flex: 0 0 auto; padding-left: 10px !important; color: var(--t-ok) !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .ship-chip { flex: 0 0 auto; border: 0 !important; color: var(--t-ok) !important; padding-left: 8px !important; font-weight: 400 !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .ship-chip * { font-size: 10px !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; line-height: 1.5 !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .posted { flex: 1 1 auto; padding-right: 10px !important; text-align: right; } :root[data-skin="terminal"] body:not(#_) .feed-card :is(.condition-pill, .type-text) { order: 1 !important; height: 17px; box-sizing: border-box; } :root[data-skin="terminal"] body:not(#_) .feed-card .condition-pill { line-height: 15px !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .ship-chip { flex: 0 1 auto !important; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin="terminal"] body:not(#_) .feed-card .posted { flex: 1 0 auto !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .verified { font-size: 0 !important; flex: 0 0 auto !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .verified::before { content: "[v]"; content: "[v]" / "verified seller"; font-size: 10px; } :root[data-skin="terminal"] body:not(#_) .feed-card .ship-chip { padding-left: 6px !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .posted { flex: 1 0 auto !important; white-space: nowrap; } :root[data-skin="terminal"] body:not(#_) .feed-card .ship-chip { flex: 0 1 auto !important; min-width: 0 !important; } /* the strip never wraps: the chip starts from a zero basis and fills the gap (ellipsis when short of room) */ :root[data-skin="terminal"] body:not(#_) .feed-card .ship-chip { flex: 1 1 0 !important; } :root[data-skin="terminal"] body:not(#_) .feed-card:has(.ship-chip) .posted { flex: 0 0 auto !important; } /* Ross 2026-10-10: no [v] on the feed card (the listing page carries the trust block); the date keeps clear of the edge */ :root[data-skin="terminal"] body:not(#_) .feed-card .verified { display: none !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .ship-chip { padding-left: 10px !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .posted { padding-right: 12px !important; padding-left: 10px !important; } :root[data-skin="terminal"] body:not(#_) .feed-card .card-body > .posted { padding: 3px 12px 3px 10px !important; } /* brand box: no native search-field cancel / decoration glyph (it sat over the typed text) */ :root[data-skin="terminal"] body:not(#_) .brand-search::-webkit-search-cancel-button, :root[data-skin="terminal"] body:not(#_) .brand-search::-webkit-search-decoration, :root[data-skin="terminal"] body:not(#_) .brand-search::-webkit-search-results-button { -webkit-appearance: none; appearance: none; display: none; } :root[data-skin="terminal"] body:not(#_) .brand-search { -webkit-appearance: none; appearance: none; } /* sell wizard (Ross 2026-10-10): the brand chip row scrolls sideways without a bar, fading at the right edge; inputs get the full ink frame */ :root[data-skin="terminal"] body:not(#_) .brand-row { scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-bottom: 4px; } :root[data-skin="terminal"] body:not(#_) .brand-row::-webkit-scrollbar { display: none; width: 0; height: 0; } :root[data-skin="terminal"] body:not(#_) .wizard-body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) { border: 1px solid var(--t-fg) !important; border-radius: 0 !important; box-shadow: var(--t-elev-1) !important; background: var(--t-bg) !important; } /* a $ or unit row (price, paid, weights) carries the frame itself; the input inside stays flat */ :root[data-skin="terminal"] body:not(#_) .prefix-row { border: 1px solid var(--t-fg); border-radius: 0; box-shadow: var(--t-elev-1); background: var(--t-bg); } :root[data-skin="terminal"] body:not(#_) .prefix-row input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { border: 0 !important; box-shadow: none !important; background: transparent !important; } :root[data-skin="terminal"] body:not(#_) .t-pause { position: absolute; right: 2ch; bottom: 0; margin: 0; padding: 0 0.5ch; line-height: 1.3; height: 1.3em; background: var(--t-bg) !important; border: 0 !important; box-shadow: none !important; color: var(--t-muted); font: inherit; font-family: var(--font-sans) !important; font-size: min(14px, calc((100vw - 34px) / var(--cols, 94) / 0.6)); cursor: pointer; } :root[data-skin="terminal"] body:not(#_) .t-pause:hover { color: var(--t-fg); } /* invisible 44px hit area; the button stays small in the border */ :root[data-skin="terminal"] body:not(#_) .t-pause::after { content: ""; position: absolute; inset: -14px -8px; } /* ==================== 2026-10-12 ticket 20: the pipeline's product-page sections and /paint (#182, #223) ==================== */ /* mirrors only: the shape explorer, "tamas with this paint", "setups with this tama" and the paint page take the skin's existing marks (bracket tabs, framed chips with the chip shadow, dashed rules; "> " headings come free). The chip and button shadows carry !important like every other shadow here: line 19 resets box-shadow !important. */ /* tabs: "[ woods ]" marks, the picked one "[x woods]" in red; the tab strip is a dashed rule, no color bar */ :root[data-skin="terminal"] body:not(#_) :is(.shape-explorer, .paint-page) .tabs { border-bottom: 1px dashed var(--t-line); gap: 0; } :root[data-skin="terminal"] body:not(#_) :is(.shape-explorer, .paint-page) .tab { background: none; border: 0; color: var(--t-fg); padding: 4px 0; margin-right: 1ch; text-transform: lowercase; font-weight: 400; } :root[data-skin="terminal"] body:not(#_) :is(.shape-explorer, .paint-page) .tab::before { content: "[ "; content: "[ " / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) :is(.shape-explorer, .paint-page) .tab::after { content: " ]"; content: " ]" / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) :is(.shape-explorer, .paint-page) .tab:hover { color: var(--t-red); } :root[data-skin="terminal"] body:not(#_) :is(.shape-explorer, .paint-page) .tab[aria-selected="true"] { font-weight: 600; } :root[data-skin="terminal"] body:not(#_) :is(.shape-explorer, .paint-page) .tab[aria-selected="true"]::before { content: "[x "; content: "[x " / ""; color: var(--t-red); } /* entry chips: a framed box with the chip shadow, no underline inside (the page-link rule reaches li > a, hence the :is(#_, .tx-chip) weight); this page's entry has the red frame; a sold-out entry is dashed and muted, its words say so */ :root[data-skin="terminal"] body:not(#_) a.tx-chip:is(#_, .tx-chip) { background: var(--t-bg); border: 1px solid var(--t-line); color: var(--t-fg); text-decoration: none !important; box-shadow: var(--t-elev-1) !important; transition: none; } /* the page-link rule above underlines with !important */ @media (hover: hover) { :root[data-skin="terminal"] body:not(#_) a.tx-chip:is(#_, .tx-chip):hover { border-color: var(--t-fg); box-shadow: var(--t-elev-1-up) !important; translate: -1px -1px; } } :root[data-skin="terminal"] body:not(#_) a.tx-chip:is(#_, .tx-chip):hover .chip-label { color: var(--t-red); } :root[data-skin="terminal"] body:not(#_) a.tx-chip:is(#_, .tx-chip).current { border-color: var(--t-red); } :root[data-skin="terminal"] body:not(#_) a.tx-chip:is(#_, .tx-chip).soldout { border-style: dashed; } :root[data-skin="terminal"] body:not(#_) a.tx-chip:is(#_, .tx-chip).soldout .chip-label { color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .tx-chip .chip-meta { color: var(--t-muted); font-variant-numeric: tabular-nums; } :root[data-skin="terminal"] body:not(#_) .tx-chip .chip-oos { font-weight: 400; } :root[data-skin="terminal"] body:not(#_) .tx-chip .chip-thumb { background: var(--t-surface); border: 1px solid var(--t-line); filter: var(--t-photo); } /* the see-all link: "see all 103 tamas with gecko paint >>" (Plex Mono has no U+2192; the component's arrow span is hidden) */ :root[data-skin="terminal"] body:not(#_) .taxonomy-sections .see-all { text-decoration: none; } :root[data-skin="terminal"] body:not(#_) .taxonomy-sections .see-all:hover { text-decoration: underline dashed; text-underline-offset: 3px; } :root[data-skin="terminal"] body:not(#_) .taxonomy-sections .see-all .see-all-mark { display: none; } :root[data-skin="terminal"] body:not(#_) .taxonomy-sections .see-all::after { content: "\00a0>>"; content: "\00a0>>" / ""; color: var(--t-red); } /* the spec line under the title: muted, its separators dimmer, its links dashed like every page link */ :root[data-skin="terminal"] body:not(#_) p.spec-line { color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) p.spec-line .sep { color: var(--t-line); } /* paint page: maker line muted; word and shape filters as bracket chips; "show more" a framed button; notes in dashed frames */ :root[data-skin="terminal"] body:not(#_) .paint-page .maker, :root[data-skin="terminal"] body:not(#_) .paint-page .count { color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .paint-page .fchip { background: none; border: 0; padding: 4px 0; margin-right: 1ch; color: var(--t-fg); font-weight: 400; min-height: 44px; } :root[data-skin="terminal"] body:not(#_) .paint-page .fchip::before { content: "[\00a0"; content: "[\00a0" / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .paint-page .fchip::after { content: " ]"; content: " ]" / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .paint-page .fchip:hover { color: var(--t-red); } :root[data-skin="terminal"] body:not(#_) .paint-page .fchip[aria-pressed="true"] { font-weight: 600; } :root[data-skin="terminal"] body:not(#_) .paint-page .fchip[aria-pressed="true"]::before { content: "[x"; content: "[x" / ""; color: var(--t-red); } :root[data-skin="terminal"] body:not(#_) .paint-page .chipbar { gap: 0 0.5ch; } :root[data-skin="terminal"] body:not(#_) .paint-page .more-btn { background: var(--t-bg); border: 1px solid var(--t-fg); color: var(--t-fg); box-shadow: var(--t-elev-1) !important; text-transform: lowercase; font-weight: 400; } :root[data-skin="terminal"] body:not(#_) .paint-page .more-btn::before { content: "[ "; content: "[ " / ""; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .paint-page .more-btn::after { content: " ]"; content: " ]" / ""; color: var(--t-muted); } @media (hover: hover) { :root[data-skin="terminal"] body:not(#_) .paint-page .more-btn:hover { background: var(--t-fg); color: var(--t-bg); box-shadow: var(--t-elev-1-up) !important; translate: -1px -1px; } :root[data-skin="terminal"] body:not(#_) .paint-page .more-btn:hover::before, :root[data-skin="terminal"] body:not(#_) .paint-page .more-btn:hover::after { color: var(--t-bg); } } :root[data-skin="terminal"] body:not(#_) .paint-page :is(.note, .empty) { background: var(--t-bg); border: 1px dashed var(--t-line); color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .paint-page .linklike { color: var(--t-fg); text-decoration: underline dashed; text-underline-offset: 3px; font-weight: 400; } :root[data-skin="terminal"] body:not(#_) .paint-page .linklike:hover { color: var(--t-red); } :root[data-skin="terminal"] body:not(#_) .paint-page .toggle input { accent-color: var(--t-red); } /* ==================== 2026-10-13 (Ross): tighter sections, tighter card hearts ==================== */ /* product page sections: the classic 3 rem top padding plus the divider's 2 rem left a hole after each list (the "see all" link sat 5 rem above the next rule); the divider now sits 1.25 rem from either side */ :root[data-skin="terminal"] body:not(#_) main section.border-t { padding-top: 1.25rem !important; } :root[data-skin="terminal"] body:not(#_) main section.border-t::before { margin-bottom: 1.25rem; } /* card hearts (Ross, 10-13 second look): the boxed button as before, 24 px instead of 32, so the shadow sits on the box itself (the glyph-hugging box of the first pass left the shadow floating on the unboxed 32 px button). 24 px is the WCAG 2.2 minimum target; paint pages keep their 44 px rule above. */ /* brand filter: the brands page's 0.85rem size on drops and beginner too. The phone rule above (every input 16px so iOS does not zoom on focus) outranked the shared box; this selector outranks that rule on all three. */ :root[data-skin="terminal"] body:not(#_) main .brand-search[type="search"] { font-size: 0.85rem !important; } /* minimal filters (Ross 2026-10-13): .mini-select dropdowns 30px / 12px with room for the chevron (plain appearance: base-select ignores the right padding and runs the text under the chevron), filter chips 28px / 12px. Outranks the select and chip phone rules above, the same way .brand-search does. */ :root[data-skin="terminal"] body:not(#_) main select.mini-select.mini-select.mini-select { appearance: none !important; -webkit-appearance: none !important; height: 30px !important; min-height: 0 !important; padding: 0 3.4ch 0 1ch !important; font-size: 12px !important; line-height: 28px !important; } :root[data-skin="terminal"] body:not(#_) main :is(.list-filter .chip, .fchip) { min-height: 0 !important; height: 28px !important; font-size: 12px !important; } :root[data-skin="terminal"] body:not(#_) main .list-filter .chip-count { font-size: 11px !important; } /* Product-page related cards (also sold complete, others to consider, also sniffed out): smaller than the carousel cards. */ :root[data-skin="terminal"] body:not(#_) .grid.related-grid.related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } @media (min-width: 640px) { :root[data-skin="terminal"] body:not(#_) .grid.related-grid.related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (min-width: 1024px) { :root[data-skin="terminal"] body:not(#_) .grid.related-grid.related-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } } /* sell wizard type scale (research 2026-10-18, PR 6): the skin's blanket h2 size (1.05rem !important) must not undercut the 20px step heading */ :root[data-skin="terminal"] body:not(#_) :is(.wizard-body h2, .confirm-screen h2) { font-size: 1.25rem !important; } /* sell wizard price card: one raised box; retail muted (context; red is for the Use action and cap), the number in ink, the cap as a flat chip, the basis behind a [+] row like the product page shipping row */ :root[data-skin="terminal"] body:not(#_) .price-card { border: 1px solid var(--t-fg) !important; background: var(--t-bg) !important; } :root[data-skin="terminal"] body:not(#_) .price-card .price-basis { background: none !important; border: 0 !important; padding: 0 !important; color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .price-card .pb-retail { color: var(--t-muted) !important; font-weight: 400 !important; } :root[data-skin="terminal"] body:not(#_) .price-card .pb-cap { color: var(--t-red) !important; border: 1px solid var(--t-red) !important; box-shadow: var(--t-elev-1) !important; } :root[data-skin="terminal"] body:not(#_) .price-card .use-btn { background: var(--t-red) !important; color: var(--t-on-red) !important; border: 1px solid var(--t-red) !important; box-shadow: var(--t-elev-1) !important; } :root[data-skin="terminal"] body:not(#_) .price-card .use-btn:active { box-shadow: 0 0 0 var(--t-shadow) !important; translate: 2px 2px; } :root[data-skin="terminal"] body:not(#_) .pb-why > summary { list-style: none; text-decoration: none !important; color: var(--t-fg) !important; } :root[data-skin="terminal"] body:not(#_) .pb-why > summary::-webkit-details-marker { display: none; } :root[data-skin="terminal"] body:not(#_) .pb-why > summary::before { content: "> "; content: "> " / ""; color: var(--t-red); white-space: pre; } :root[data-skin="terminal"] body:not(#_) .pb-why > summary::after { content: "[+]"; content: "[+]" / ""; margin-left: auto; color: var(--t-muted); } :root[data-skin="terminal"] body:not(#_) .pb-why[open] > summary::after { content: "[-]"; content: "[-]" / ""; } /* sell wizard step 3: the Verified seller card. Heading with the red "> " prefix, rows on dotted lines, the one open step (ID) carries the action, done rows go ink with the check */ :root[data-skin="terminal"] body:not(#_) .trust-card { border: 1px solid var(--t-fg) !important; background: var(--t-bg) !important; } :root[data-skin="terminal"] body:not(#_) .trust-card .trust-card-h::before { content: "> "; content: "> " / ""; color: var(--t-red); white-space: pre; } :root[data-skin="terminal"] body:not(#_) .trust-card .trust-card-rows li { border-top-color: var(--t-line) !important; } :root[data-skin="terminal"] body:not(#_) .trust-card .trust-card-rows .todo { color: var(--t-muted) !important; } :root[data-skin="terminal"] body:not(#_) .trust-card .id-row .secondary-btn { border: 1px solid var(--t-fg) !important; box-shadow: var(--t-elev-1) !important; } /* ==================== 2026-10-22 /used feed cards: side gutter, one-line total, date up top as "3d", nothing cut off (Ross) ==================== */ @media (max-width: 639px) { :root[data-skin="terminal"] body:not(#_) .feed:has(> .feed-card) { padding: 0 1rem 6px !important; } } :root[data-skin="terminal"] body:not(#_) .feed-card .total-line { min-height: 0 !important; -webkit-line-clamp: 1; } /* the date joins the top line, right of the type; the strip keeps verified and the shipping share */ :root[data-skin="terminal"] body:not(#_) .feed-card .card-body > .posted { order: 1 !important; flex: 0 0 auto !important; height: 17px; padding: 0 10px 0 0 !important; border-top: 0 !important; background: none !important; line-height: 17px !important; } /* the skeleton body is the real body's height (top line, title, price, total; checked by e2e feed-skeleton) */ :root[data-skin="terminal"] body:not(#_) [data-testid="feed-skeleton"] .feed-card .card-body { height: 118.75px; overflow: hidden; } /* each strip line gets the full card width, so "Seller covers 50% shipping" never ellipsizes beside a date */ :root[data-skin="terminal"] body:not(#_) .feed-card :is(.verified, .ship-chip) { flex: 1 0 100% !important; padding-left: 10px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the loader line overlays the first skeleton card instead of pushing the grid down 38 px (the real grid starts where the skeleton did) */ :root[data-skin="terminal"] body:not(#_) [data-testid="feed-skeleton"] { position: relative; } :root[data-skin="terminal"] body:not(#_) [data-testid="feed-skeleton"]::before { position: absolute; top: 10px; left: 10px; right: auto; padding: 0; } /* the type text takes the leftover of the top line (basis 0), so a long type never pushes the date onto a second row */ :root[data-skin="terminal"] body:not(#_) .feed-card .type-text { flex: 1 1 0 !important; min-width: 0; } :root[data-skin="terminal"] body:not(#_) .feed-card .type-text + .type-text { flex: 0 1 auto !important; }