/* ============================================================ BaskMarket theme — "Immersive" (design 8a) Dark, cinematic marketplace with a popping orange accent. Near-black page, low-contrast surfaces, hairline borders, one confident orange. No textures, no display serif, no uppercase headings. The colour comes from the accent + photos. bg #0C0C0E page (near-black) surface #17171A cards surface-2 #111114 inset / "how it works" cards border #232326 hairlines, card borders border-2 #3A3A40 inputs, outline buttons (more visible) text #FFFFFF headings / primary body #B8B8C0 paragraph text muted #8A8A92 meta / secondary orange #E8630A primary actions, links, price, active orange-hv #F47B2A hover Type: Schibsted Grotesk (400-800). Headings weight 800, letter-spacing -0.03em, NOT uppercase. ============================================================ */ /* Schibsted Grotesk, self-hosted (variable, 400–800 in one file per subset). Replaces the Google Fonts CDN: no third-party origins (UK/GDPR), no @import chain delaying font discovery, and App.razor preloads the latin file so the swap window is effectively zero. */ @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/schibsted-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* :root:root out-specifies the MudThemeProvider's generated :root block */ :root:root { --mud-palette-primary: #E8630A; --mud-palette-primary-rgb: 232, 99, 10; --mud-palette-primary-text: #0C0C0E; --mud-palette-primary-darken: #E85A0C; --mud-palette-primary-lighten: #F47B2A; --mud-palette-primary-hover: rgba(232, 99, 10, 0.12); --mud-palette-secondary: #232326; --mud-palette-secondary-rgb: 35, 35, 38; --mud-palette-secondary-text: #FFFFFF; --mud-palette-secondary-darken: #17171A; --mud-palette-secondary-lighten: #3A3A40; --mud-palette-secondary-hover: rgba(255, 255, 255, 0.06); --mud-palette-tertiary: #9C9CA6; --mud-palette-tertiary-rgb: 156, 156, 166; --mud-palette-tertiary-text: #0C0C0E; --mud-palette-black: #0C0C0E; --mud-palette-white: #FFFFFF; --mud-palette-background: #1A1A20; --mud-palette-background-gray: #1A1A20; --mud-palette-surface: #24242A; --mud-palette-overlay-dark: rgba(0, 0, 0, 0.7); --mud-palette-overlay-light: rgba(23, 23, 26, 0.7); --mud-palette-appbar-background: #0C0C0E; --mud-palette-appbar-text: #FFFFFF; --mud-palette-drawer-background: #0C0C0E; --mud-palette-drawer-text: #FFFFFF; --mud-palette-drawer-icon: #8A8A92; --mud-palette-text-primary: #FFFFFF; --mud-palette-text-secondary: #8A8A92; --mud-palette-text-disabled: rgba(255, 255, 255, 0.3); --mud-palette-action-default: #B8B8C0; --mud-palette-action-default-hover: rgba(255, 255, 255, 0.08); --mud-palette-action-disabled: rgba(255, 255, 255, 0.28); --mud-palette-action-disabled-background: rgba(255, 255, 255, 0.08); --mud-palette-lines-default: #2C2C33; --mud-palette-lines-inputs: #3A3A40; --mud-palette-divider: #2C2C33; --mud-palette-divider-light: #1B1B1F; --mud-palette-table-lines: #2C2C33; --mud-palette-table-striped: rgba(255, 255, 255, 0.02); --mud-palette-table-hover: rgba(232, 99, 10, 0.06); --mud-palette-dark: #17171A; --mud-palette-dark-rgb: 23, 23, 26; --mud-palette-dark-text: #FFFFFF; --mud-palette-dark-darken: #0C0C0E; --mud-palette-dark-lighten: #232326; --mud-palette-dark-hover: rgba(23, 23, 26, 0.8); --mud-palette-gray-default: #8A8A92; --mud-palette-gray-light: #17171A; --mud-palette-gray-lighter: #111114; --mud-palette-gray-dark: #6A6A72; --mud-palette-gray-darker: #232326; --mud-palette-info: #4C8DFF; --mud-palette-info-rgb: 76, 141, 255; --mud-palette-info-text: #FFFFFF; --mud-palette-info-darken: #2E74EE; --mud-palette-info-lighten: #74A6FF; --mud-palette-info-hover: rgba(76, 141, 255, 0.12); --mud-palette-success: #22C07C; --mud-palette-success-rgb: 34, 192, 124; --mud-palette-success-text: #0C0C0E; --mud-palette-success-darken: #1AA96B; --mud-palette-success-lighten: #45D194; --mud-palette-success-hover: rgba(34, 192, 124, 0.12); --mud-palette-warning: #E0A422; --mud-palette-warning-rgb: 224, 164, 34; --mud-palette-warning-text: #0C0C0E; --mud-palette-warning-darken: #C68F16; --mud-palette-warning-lighten: #EDBB4C; --mud-palette-warning-hover: rgba(224, 164, 34, 0.12); --mud-palette-error: #F0563E; --mud-palette-error-rgb: 240, 86, 62; --mud-palette-error-text: #FFFFFF; --mud-palette-error-darken: #DB3E24; --mud-palette-error-lighten: #F47D6A; --mud-palette-error-hover: rgba(240, 86, 62, 0.12); --mud-default-borderradius: 12px; /* MudThemeProvider emits a family var per typography variant, not just the default one, and MudBlazor's own rules read the per-variant var (.mud-button reads --mud-typography-button-family, .mud-table-cell reads body2/subtitle2, and so on). Overriding only `default` left every MudButton, MudMenu label, chip and table cell on MudBlazor's stock Roboto stack — visible as the top nav rendering in a different face from the rest of the page. All 14 are set here so the whole MudBlazor surface inherits the brand face from one place. */ --mud-typography-default-family: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif; --mud-typography-h1-family: var(--mud-typography-default-family); --mud-typography-h2-family: var(--mud-typography-default-family); --mud-typography-h3-family: var(--mud-typography-default-family); --mud-typography-h4-family: var(--mud-typography-default-family); --mud-typography-h5-family: var(--mud-typography-default-family); --mud-typography-h6-family: var(--mud-typography-default-family); --mud-typography-subtitle1-family: var(--mud-typography-default-family); --mud-typography-subtitle2-family: var(--mud-typography-default-family); --mud-typography-body1-family: var(--mud-typography-default-family); --mud-typography-body2-family: var(--mud-typography-default-family); --mud-typography-button-family: var(--mud-typography-default-family); --mud-typography-caption-family: var(--mud-typography-default-family); --mud-typography-overline-family: var(--mud-typography-default-family); /* ---- Brand tokens (Immersive) ---- */ --eb-bg: #0C0C0E; --eb-page-bg: #1A1A20; --eb-surface: #24242A; --eb-surface-2: #111114; --eb-border: #2C2C33; --eb-border-2: #3A3A40; /* Segmented-control track. Deliberately NOT --eb-surface: the sex pills sit inside the filter bar, which is itself --eb-surface, so sharing the token left the group the same colour as its own container and it read as loose text rather than a control. One step up from the surface in dark, one step down from white in light — either way it separates from what it sits on. */ --eb-seg-track: #33333B; --eb-seg-hover: #40404A; --eb-text: #FFFFFF; --eb-body: #B8B8C0; /* Lightened from #8A8A92 (which sat at exactly 4.51:1 on surface — AA with no headroom) to give muted meta text real contrast headroom everywhere. */ --eb-muted: #9C9CA6; --eb-orange: #E8630A; --eb-orange-hover: #F47B2A; /* The orange of the never-flipping world — heroes, photo overlays, the near-black "how it works" plinth. --eb-orange and --eb-on-orange deepen and invert on light so a white label clears AA on a white page; these three don't, because the surface underneath them doesn't either: burnt orange sinks into a near-black hero (3.0:1), and a hero standing next to a bright-orange eyebrow with a burnt-orange button reads as two oranges in one composition. */ --eb-orange-on-dark: #E8630A; --eb-orange-on-dark-hover: #F47B2A; --eb-on-orange-on-dark: #0C0C0E; /* Theme-flipping foreground/surface roles. Light overrides live in the :root:root[data-theme="light"] block below; in dark mode each equals its original value, so every token substitution made across this file is a visual no-op here (dark is unchanged). */ --eb-orange-ink: #E8630A; /* orange used as TEXT (links, price, chips) — darkens to a legible burnt orange in light */ --eb-on-photo: #FFFFFF; /* text/glyphs that always ride over a dark photo or hero scrim — never flips */ --eb-on-photo-dim: #9C9CA6; /* the muted companion to --eb-on-photo: meta lines on those same never-flipping dark surfaces. Equals the dark theme's --eb-muted, and like --eb-on-photo it must NOT flip on light — the light theme's #63636B muted drops to 3.0:1 on the dark news hero. */ --eb-on-orange: #0C0C0E; /* text/glyphs on an orange fill, and the single enforcement point for it — previously copy-pasted at 18 sites. It flips WITH the fill: dark theme keeps near-black on the approved #E8630A (5.79:1); light deepens the fill to #B84A08 and turns the label white (5.22:1), because near-black on a bright orange chip reads muddy against a white page. The pair moves together or one of the two lands under 4.5:1 — never change one alone. */ --eb-photo-bg: #1E1E22; /* letterbox backing behind contained photos */ /* The hairline around a form field's white body. On dark this is decoration — the white box against a near-black card is itself the cue that a field is there — so it keeps the soft #C9C9D0 it was hardcoded to. On light the surrounding surface is white too, which leaves the hairline as the ONLY thing marking the control: at 1.65:1 against its own fill it failed WCAG 1.4.11's 3:1 floor for a component boundary, and fields were effectively invisible. See the light block for the flipped value. */ --eb-input-border: #C9C9D0; /* Semantic sex colours — a recorded exception to the One Orange rule: sex is data, and colour scans faster than reading a glyph on a 25-card grid. Bright, high-contrast tones so the glyph reads at a glance on the dark card surface. */ --eb-sex-m: #5AB2FF; --eb-sex-f: #FF74B4; /* The same two hues pinned for glyphs on a surface that never flips (the card photo's spec chip). The light theme darkens the pair above for a white card; over a near-black photo chip #1668C4 measures 2.4:1, so the overlay keeps the bright values — the same exception --eb-orange-on-dark makes for orange. */ --eb-sex-m-on-dark: #5AB2FF; --eb-sex-f-on-dark: #FF74B4; /* Welfare-advisory amber — another recorded One-Orange exception: a hereditary-defect warning must NOT read as the brand call-to-action, so caution gets its own hue. */ --eb-welfare-accent: #E8A33D; --eb-welfare-border: rgba(232, 163, 61, 0.38); --eb-welfare-bg: rgba(232, 163, 61, 0.10); /* Recessive violet — the third recorded One-Orange exception. Recessive is the one inheritance mode you cannot see on the animal and the one that decides what a pairing produces, so it is the only mode that earns a hue; the other three carry the muted tag alone. 263deg sits 55deg off --eb-sex-m, which is the nearest hue on this page (a coloured sex glyph sits just above the pill row). Always paired with the REC tag, and always yields to welfare amber. */ --eb-recessive-accent: #AF81F8; /* Validation/state hues, matching the documented semantic palette. These were referenced by the bulk-listing rules but never defined, so `color: var(--eb-error)` was invalid at computed-value time and the declaration dropped — the over-quota warning rendered in body colour and the "live" state pill lost both its colour and its color-mix() tint. Used as TEXT, so like --eb-orange-ink they darken on light; see the [data-theme="light"] block. */ /* #F4644C, not the palette's #F0563E: as text on --eb-surface that measures 4.49:1 — AA by a hundredth. Nudged lighter along the same hue for real headroom (4.98:1 on surface, 5.59:1 on the page), exactly as --eb-muted was lifted off 4.51:1 above. MudBlazor's own error swatch keeps #F0563E; this token is only for our text. */ --eb-error: #F4644C; --eb-success: #22C07C; /* Completes the semantic set. The admin status dots and pills reached for --mud-palette-info directly, which is tuned for a near-black surface and never flips — see the light block. Dark value equals that palette entry, so dark is unchanged. */ --eb-info: #4C8DFF; --eb-tint-bg: rgba(232, 99, 10, 0.12); --eb-tint-border: rgba(232, 99, 10, 0.4); /* Orange used as TEXT on top of --eb-tint-bg. The tint lifts the background toward the orange it is made of, so --eb-orange-ink lands at 4.46:1 dark / 4.17:1 light there — under the floor in both, the same hundredths-short trap documented for --eb-error above. This is the step past it, measured on the composited tint: 5.53:1 dark, 5.22:1 light. */ --eb-orange-on-tint: #F47B2A; --eb-display: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif; /* Legacy aliases — keep old class rules / stray references resolving */ --eb-ink: #0C0C0E; --eb-cream: #0C0C0E; --eb-line: #2C2C33; --eb-surface-alias: #24242A; --eb-yellow: rgba(232, 99, 10, 0.12); --eb-yellow-deep: #F47B2A; --eb-purple: #E8630A; --eb-orange-text: #E8630A; --eb-shed: #8A8A92; --eb-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); --eb-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.4); /* Immersive hero background — override --eb-hero-image with url(...) to drop in a photo */ /* This is now the hero's normal state, not its failure state — the front door no longer promotes an arbitrary listing photo — so the lamp has to actually read. 0.34, up from 0.20, which rendered as nothing. The second radial was a 10% violet: a literal second accent, and the most visible non-orange thing in an empty panel. Deleted, not dimmed. */ --eb-hero-fallback: radial-gradient(120% 90% at 82% 8%, rgba(232, 99, 10, 0.34) 0%, rgba(232, 99, 10, 0) 55%), linear-gradient(160deg, #1C1C22 0%, #0E0E11 58%, #090909 100%); } /* ============================================================ LIGHT THEME — "The Day Vivarium" Activated by html[data-theme="light"] (set before first paint by the inline script in App.razor, toggled from the nav, and kept in sync with MudThemeProvider.IsDarkMode). The dark theme above stays the default; everything here is an override. Heroes and photo overlays are deliberately left dark in BOTH themes — a scrim over imagery reads the same either way, and the dark cinematic hero band is the brand's signature ("the animal is the hero"). Verified WCAG AA: ink 17.9:1, body 9.5:1, muted 5.9:1, burnt-orange text 5.2:1, sex-m 5.5:1, sex-f 5.3:1 on white. ============================================================ */ :root:root[data-theme="light"] { /* ---- Brand tokens ---- */ --eb-bg: #FFFFFF; /* app bar, footer, darkest chrome -> now the lightest */ --eb-page-bg: #F4F4F6; /* the neutral gallery-grey the page sits on (not a warm cream) */ --eb-surface: #FFFFFF; /* cards, tables, dialogs */ --eb-surface-2: #EDEDF1; /* recessed panels: table headers, inset strips */ --eb-border: #E4E4E9; /* hairlines */ --eb-border-2: #CFCFD6; /* stronger hairline: outlined buttons */ /* 3.38:1 against the field's white fill (dark theme keeps #C9C9D0 — see the dark block). Deliberately darker than --eb-border-2: that token also paints hairlines that sit on the grey page, where a control boundary is not the only cue. */ --eb-input-border: #8A8A94; --eb-seg-track: #E7E7EC; /* grey track under the pills; the bar behind it is white */ --eb-seg-hover: #FFFFFF; /* an unselected pill lifts to white on hover */ --eb-text: #17171A; /* headings / primary text */ --eb-body: #44454D; /* paragraph text */ --eb-muted: #63636B; /* meta / labels (>=4.5:1 on white, page grey and surface-2) */ /* Approved --eb-orange (#E8630A) still carries fills, badges, active state and focus; orange used as TEXT darkens to a burnt heat-lamp orange so links and prices clear 4.5:1 on white. */ --eb-orange-ink: #B84A08; /* The fill under a label deepens to that same burnt orange and the label turns white: near- black on #E8630A measures 5.79:1 but reads heavy and muddy on a white page, and plain white on #E8630A is 3.38:1 — under the floor. #FFFFFF on #B84A08 is 5.22:1. Fills, badges, active state and focus rings all move together, so the light theme has one orange, not two. Hover deepens rather than warms here (6.63:1) — brightening would drop the white label. */ --eb-orange-hover: #9E3F06; --eb-orange: #B84A08; --eb-on-orange: #FFFFFF; /* Darker rather than lighter here — on light the tint sits near white, so the text has to go down, not up. See the dark declaration for the measurements. */ --eb-orange-on-tint: #A03F06; --eb-photo-bg: #ECECEF; /* light letterbox backing behind contained photos */ --eb-sex-m: #1668C4; --eb-sex-f: #C42B78; /* Darker amber so the welfare-note title/icon clear 4.5:1 on the white card. */ --eb-welfare-accent: #9A6512; --eb-welfare-border: rgba(154, 101, 18, 0.30); --eb-welfare-bg: rgba(232, 163, 61, 0.13); /* #AF81F8 is 2.4:1 on the white card. Same hue, taken down to 5.5:1 as text. */ --eb-recessive-accent: #7F45DE; /* Same treatment as --eb-orange-ink and --eb-welfare-accent: the dark theme's state hues are tuned for a near-black card and read at 3.4:1 / 2.4:1 as text on white. Darkened to 5.5:1 and 5.4:1; the hue is unchanged, so a red still reads red. */ --eb-error: #C4331C; --eb-success: #14794E; /* #4C8DFF is 2.4:1 on white — under the 3:1 floor for a status dot, which carries meaning and is the only thing distinguishing one state from another. Same hue, taken down to 4.6:1. */ --eb-info: #1B5FD9; --eb-tint-bg: rgba(232, 99, 10, 0.12); --eb-tint-border: rgba(232, 99, 10, 0.34); --eb-shadow: 0 12px 32px rgba(20, 22, 40, 0.14); --eb-shadow-sm: 0 8px 24px rgba(20, 22, 40, 0.10); /* ---- MudBlazor palette (light). Our own --eb-* rules cover most chrome, but MudBlazor components we don't restyle read these directly. :root:root[data-theme] out-specifies both MudThemeProvider's generated :root block and the dark :root:root above. The accent follows --eb-orange down to the burnt fill and takes the white label with it — a MudButton we never restyled would otherwise paint near-black on #E8630A while ours reads white on #B84A08. ---- */ --mud-palette-primary: #B84A08; --mud-palette-primary-rgb: 184, 74, 8; --mud-palette-primary-text: #FFFFFF; --mud-palette-primary-darken: #9E3F06; --mud-palette-primary-lighten: #C4530A; --mud-palette-background: #F4F4F6; --mud-palette-background-gray: #EDEDF1; --mud-palette-surface: #FFFFFF; --mud-palette-appbar-background: #FFFFFF; --mud-palette-appbar-text: #17171A; --mud-palette-drawer-background: #FFFFFF; --mud-palette-drawer-text: #17171A; --mud-palette-drawer-icon: #63636B; --mud-palette-text-primary: #17171A; --mud-palette-text-secondary: #63636B; --mud-palette-text-disabled: rgba(23, 23, 26, 0.38); --mud-palette-action-default: #44454D; --mud-palette-action-default-hover: rgba(0, 0, 0, 0.06); --mud-palette-action-disabled: rgba(23, 23, 26, 0.26); --mud-palette-action-disabled-background: rgba(23, 23, 26, 0.10); --mud-palette-lines-default: #E4E4E9; --mud-palette-lines-inputs: #CFCFD6; --mud-palette-divider: #E4E4E9; --mud-palette-divider-light: #EDEDF1; --mud-palette-table-lines: #E4E4E9; --mud-palette-table-striped: rgba(0, 0, 0, 0.02); --mud-palette-table-hover: rgba(232, 99, 10, 0.06); --mud-palette-overlay-dark: rgba(0, 0, 0, 0.5); --mud-palette-overlay-light: rgba(255, 255, 255, 0.7); /* the "dark" pseudo-surface MudBlazor uses for a few raised chrome bits -> a light surface */ --mud-palette-dark: #EDEDF1; --mud-palette-dark-rgb: 237, 237, 241; --mud-palette-dark-text: #17171A; --mud-palette-dark-darken: #E0E0E6; --mud-palette-dark-lighten: #F4F4F6; --mud-palette-dark-hover: rgba(237, 237, 241, 0.8); --mud-palette-secondary: #EDEDF1; --mud-palette-secondary-text: #17171A; --mud-palette-secondary-darken: #E0E0E6; --mud-palette-secondary-lighten: #F4F4F6; --mud-palette-gray-default: #63636B; --mud-palette-gray-light: #EDEDF1; --mud-palette-gray-lighter: #F4F4F6; --mud-palette-gray-dark: #7A7A82; --mud-palette-gray-darker: #E4E4E9; } /* ---- Light theme exceptions: keep photos/heroes dark, restore the right foreground there ---- */ /* White glyphs that ride over a photo or a dark hero scrim. !important is deliberate: these sit on permanently-dark surfaces, and global-styles.css bleeds heading (body.abp-application-layout h1-h5, 0,2,2) and link (main a:not()..., 0,5,3) colours onto the Blazor host at a higher specificity than any practical selector here — so we must out-rank them outright. */ [data-theme="light"] .eb-hero-title, [data-theme="light"] .eb-pricing-headline, [data-theme="light"] .eb-photo-spec, [data-theme="light"] .eb-heart, [data-theme="light"] .eb-store-name, [data-theme="light"] .eb-share-btn, [data-theme="light"] .eb-social-btn, [data-theme="light"] .eb-news-hero-title { color: var(--eb-on-photo) !important; } /* Bright heat-lamp orange where orange TEXT sits on a permanently-dark surface — burnt orange would sink into the near-black hero. !important for the same global-styles-bleed reason. */ [data-theme="light"] .eb-hero-eyebrow, [data-theme="light"] .eb-store-meta-rating .eb-star, [data-theme="light"] .eb-heart--on, [data-theme="light"] .eb-news-tag, [data-theme="light"] .eb-news-more, [data-theme="light"] .eb-news-hero.has-cover .eb-news-date, [data-theme="light"] .eb-news-hero:hover .eb-news-hero-title { color: var(--eb-orange-on-dark) !important; } /* Meta lines on the same never-flipping dark surfaces. The light theme's muted (#63636B) is tuned for a white page and only reaches 3.0:1 on the news hero's #17171A panel. */ [data-theme="light"] .eb-news-hero.has-cover .eb-news-readtime { color: var(--eb-on-photo-dim) !important; } /* Every MudBlazor variant that paints the primary colour as FOREGROUND. Mud drives these from --mud-palette-primary with its own !important, which outranks the light theme's orange-ink override, so they stayed bright #E8630A on a light surface: .mud-link.mud-primary-text card titles (footer nav opts out) 2.85:1 on white .mud-button-text-primary text buttons .mud-chip-color-primary status and filter chips 2.59:1 on #F4F4F6 DESIGN.md's rule is that orange used as TEXT darkens to --eb-orange-ink on light; these are where it was escaping. Only `color` is set — fills and borders keep the bright orange, so the outlined button still has its #E8630A edge. Retargeting --mud-palette-primary instead would have dragged every fill to burnt orange too. */ [data-theme="light"] .mud-link.mud-primary-text, [data-theme="light"] .mud-button-text-primary, [data-theme="light"] .mud-chip-color-primary.mud-chip-text, [data-theme="light"] .mud-chip-color-primary.mud-chip-outlined { color: var(--eb-orange-ink) !important; } /* The featured news lead stays a dark spotlight panel in both themes (the cover variant's surface bg would otherwise flip white and drop out its white title). */ [data-theme="light"] .eb-news-hero.has-cover { background-color: #17171A; } [data-theme="light"] .eb-news-hero-excerpt { color: rgba(255, 255, 255, 0.82); } /* Nav chrome: the app bar is white in day mode, so the links read dark. */ [data-theme="light"] .eb-topnav .eb-nav-item, [data-theme="light"] .eb-topnav .mud-button, [data-theme="light"] .eb-topnav .mud-icon-button, [data-theme="light"] .eb-fav-nav, [data-theme="light"] .eb-chat-nav { color: rgba(23, 23, 26, 0.74); } [data-theme="light"] .eb-topnav .eb-nav-item:hover, [data-theme="light"] .eb-topnav .mud-button:hover, [data-theme="light"] .eb-topnav .mud-icon-button:hover, [data-theme="light"] .eb-fav-nav:hover, [data-theme="light"] .eb-chat-nav:hover { background-color: rgba(0, 0, 0, 0.05); } /* Floating chrome bars flip to light frosted glass — they overlay page content, not photos. */ [data-theme="light"] .eb-compare-tray { background: rgba(248, 248, 250, 0.9); } [data-theme="light"] .eb-store-sticky { background: rgba(248, 248, 250, 0.92); } /* Dark-mode-only translucent whites that would vanish on a light surface. */ [data-theme="light"] .eb-bulk-state--draft, [data-theme="light"] .eb-fb-rail-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.05); } [data-theme="light"] .eb-news-loadmore-spin { border-color: rgba(0, 0, 0, 0.16); border-top-color: var(--eb-orange); } [data-theme="light"] .eb-sk { background: linear-gradient(90deg, #E6E6EB 25%, #F1F1F4 50%, #E6E6EB 75%); background-size: 200% 100%; } /* ---- Base typography -------------------------------------------------- */ html, body { background-color: var(--eb-page-bg); } /* The closed nav drawer is position:fixed and parked just past the right edge (left: 100vw, width: 240px). Chrome counts that off-viewport fixed box in the document scroll width, so every page scrolled ~31px sideways on a phone. MudBlazor's own layout clips this; our custom layout replaced MainLayout and lost it. BOTH elements, and that is not belt-and-braces — it was measured. Root overflow propagates to the viewport and leaves `html` itself computing to visible, so html alone still scrolled 31px; body alone never sees the drawer at all, because a fixed element's containing block is the viewport rather than the body. Only the pair reaches zero. `clip`, not `hidden`: overflow-x: hidden makes an element a scroll container, which silently turns position: sticky into a no-op inside it — and the listing buy rail is sticky. `clip` cuts the overflow without creating a scroll container, so the rail keeps travelling. */ html, body { overflow-x: clip; } /* WCAG 2.4.11 (Focus Not Obscured, AA in 2.2). The MudAppBar is fixed at 64px and several bars are bottom-anchored; without scroll padding, tabbing to a control near a viewport edge parks it underneath one — invisible to someone arriving by keyboard, fine for a mouse user who scrolled there deliberately. Bottom reuses the tray clearance already established at `body:has(.eb-compare-tray) .eb-footer` rather than inventing a second magic number. Also fixes the skip link: `#eb-main` previously landed under the app bar on the fragment jump. Known gap: on store pages `.eb-store-sticky` is a second fixed bar at top:64px, so the real top obstruction is ~117px and this rule does not fully clear it. No clean CSS-only fix — the scroll-timeline path reveals that bar without setting the `--on` class a :has() rule could target. */ html { scroll-padding-top: 64px; scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* The Blazor host also carries .abp-application-layout, which global-styles.css paints with a hardcoded dark bg at higher specificity than the bare `body` rule above. Re-assert the themed page bg here (eball-theme.css loads after global-styles.css, so same-specificity, later wins) so the host background follows the active theme instead of being pinned dark. */ body.abp-application-layout { background-color: var(--eb-page-bg); color: var(--eb-text); } body, .mud-typography { font-family: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif; color: var(--eb-text); } /* The rule above ties MudBlazor's own `.mud-text-secondary` on specificity (both a single class) and this sheet loads after MudBlazor's, so ours won every tie — which meant every `Class="mud-text-secondary"` MudText in the app rendered at full primary strength. The muting was written into dozens of pages and silently did nothing; the shipping line under a listing price was the same white as the price. Two classes here so it outranks the tie rather than re-entering it, and routed through our own token so the light theme follows. */ .mud-typography.mud-text-secondary { color: var(--eb-muted); } .mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { font-family: var(--eb-display); font-weight: 800; letter-spacing: -0.03em; color: var(--eb-text); } .mud-typography-subtitle1 { font-weight: 700; letter-spacing: -0.01em; } a, .mud-link { color: var(--eb-orange-ink); } a:hover, .mud-link:hover { color: var(--eb-orange-hover); } :focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 2px; } /* ---- App chrome: horizontal top nav + fixed-width container ---------------- */ :root:root { /* The page's content width, stepped up on 2026-08-12 from 1240px (sized for a 1280 screen) to 1400px (a 1440 screen, keeping a 20px gutter each side). Anything that has to line its edge up with the container reads this token rather than repeating the number — the header search strip does, and it is the reason the two cannot drift apart again. Grid column counts are tuned to it: listings run 5-up and store cards 6-up above the cap, each dropping a column at max-width:1400px, below which the container shrinks with the viewport and the old steps take over unchanged. */ --eb-container-max: 1400px; } .eb-container { width: 100%; max-width: var(--eb-container-max); margin-inline: auto; padding-inline: 28px; box-sizing: border-box; } .eb-page { padding-top: 32px; padding-bottom: 80px; } .mud-appbar { box-shadow: none; border-bottom: 1px solid var(--eb-border); background-color: var(--eb-bg); } .eb-topnav .mud-toolbar { padding: 0; width: 100%; } .eb-nav-inner { display: flex; align-items: center; gap: 4px; height: 100%; min-width: 0; } .eb-brand { display: flex; align-items: center; flex: 0 0 auto; margin-right: 28px; white-space: nowrap; } /* bask wordmark — the whole header brand. The image is taller than its letters (dot headroom), so 34px draws the lowercase at roughly the old 1.2rem text size. */ .eb-brand-mark { height: 34px; width: auto; display: block; } /* Theme-aware built-in wordmark: paper ink on the dark bar (default), black ink on the light bar. Both s render; only the one matching the active app-bar colour is shown. (A custom admin-uploaded logo renders as a single .eb-brand-mark and is used for both themes.) */ .eb-brand-mark--light { display: none; } [data-theme="light"] .eb-brand-mark--dark { display: none; } [data-theme="light"] .eb-brand-mark--light { display: block; } /* The nav and the hamburger are one switch, thrown at the width the bar actually needs rather than at whichever framework utility is nearest. Measured on the trimmed six-item public bar: the last control lands exactly on the container's right gutter at a 1024px viewport and 26px past the edge at 960 — and because nothing here overflows the document, a clipped control has no scrollbar to recover it. MudBlazor's `md` (960) was that clip; its `lg` (1280) hid the nav from every laptop that fits it. The signed-in bar carries two more dropdowns, so it keeps the wider switch. */ .eb-nav-links { display: none; align-items: center; gap: 4px; } .eb-mobile-menu { display: flex; } /* Exists only to catch the trigger's click before MudMenu's activator sees it — laid out as a pass-through so the bar's flex rhythm is unchanged. */ .eb-nav-trigger { display: flex; align-items: center; } @media (min-width: 1024px) { .eb-nav-links--public { display: flex; } .eb-mobile-menu--public { display: none; } } @media (min-width: 1280px) { .eb-nav-links--backoffice { display: flex; } .eb-mobile-menu--backoffice { display: none; } } /* ---- Phone nav drawer --------------------------------------------------- The panel is the app bar continued downward, not a card floating over the page: same --eb-bg chrome, one hairline down its leading edge, flat. It sits ABOVE the bar (MudBlazor puts the app bar at 1300 and drawers at 1100, which would have slid it under) because a drawer half-covered by the thing that opened it reads as a rendering fault — and because the bar's own controls must not stay tabbable behind an overlay. */ .mud-drawer.eb-nav-drawer { z-index: 1305; width: min(320px, 88vw); background-color: var(--eb-bg); border-left: 1px solid var(--eb-border); box-shadow: none; } .mud-overlay-drawer, .mud-drawer-overlay { z-index: 1304; } @media (prefers-reduced-motion: reduce) { .mud-drawer.eb-nav-drawer, .eb-nav-drawer .mud-collapse-container { transition: none !important; } } .eb-nav-drawer-inner { display: flex; flex-direction: column; height: 100%; outline: none; /* Anchored to the end, so the right inset is the one that matters in landscape. */ padding-right: env(safe-area-inset-right); } .eb-nav-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; min-height: 56px; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--eb-border); } .eb-nav-drawer-title { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--eb-text); } .eb-nav-drawer .eb-nav-drawer-head .mud-icon-button { width: 44px; height: 44px; color: var(--eb-body); } /* The drawer's copy of the theme toggle and saved listings. Hidden by default: above the breakpoint below, the app bar still carries both and two live copies would be a duplicate tab stop for the same action. The title takes the slack so the row keeps its shape. */ .eb-nav-drawer-utility { display: none; align-items: center; gap: 2px; margin-inline-start: auto; } /* The doorway keeps the shape it has on the bar — the one filled control, not another row. */ .eb-nav-drawer .eb-nav-drawer-sell { flex: 0 0 auto; margin: 16px 20px 4px; min-height: 46px; } .eb-nav-drawer-menu { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 max(20px, env(safe-area-inset-bottom)); } /* A hairline between top-level entries only. Nested links live inside the group's collapse container, so they are untouched and the rules keep reading as section boundaries. */ .eb-nav-drawer-menu > * + * { border-top: 1px solid var(--eb-border); } /* "Install app" sits at the foot of the drawer, below the scrolling nav list: it is a utility, not a destination, and putting it in the list would rank it alongside Ball Pythons. Outlined, because Sell is the drawer's one filled control and the One Orange rule gives it that alone. It carries the safe-area inset because it is now the last thing above the home indicator. */ .eb-nav-drawer .eb-install-app { flex: 0 0 auto; margin: 0 20px; margin-bottom: max(16px, env(safe-area-inset-bottom)); min-height: 46px; border-color: var(--eb-border-2); color: var(--eb-body); } .eb-nav-drawer .eb-install-app:hover { border-color: var(--eb-orange); color: var(--eb-text); } /* iOS install instructions. The steps are a numbered list because the order is the instruction; the icons repeat the Share and Add glyphs Safari itself shows, so the visitor is matching pictures rather than parsing prose. */ .eb-install-blurb { margin: 0 0 16px; color: var(--eb-body); line-height: 1.6; } .eb-install-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: eb-install-step; } .eb-install-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--eb-border); border-radius: 12px; background: var(--eb-surface-2); color: var(--eb-text); font-size: 0.92rem; line-height: 1.45; counter-increment: eb-install-step; } .eb-install-step::before { content: counter(eb-install-step); flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; /* --eb-orange-on-tint, not --eb-orange-ink: the ink token falls under 4.5:1 on this fill in both themes, which is why the trait chips use the same pairing. */ background: var(--eb-tint-bg); color: var(--eb-orange-on-tint); font-size: 0.74rem; font-weight: 800; } .eb-install-step-icon { flex: 0 0 auto; color: var(--eb-muted); } .eb-nav-drawer .mud-nav-link { min-height: 52px; padding: 12px 20px; font-size: 0.95rem; font-weight: 600; color: var(--eb-body); } .eb-nav-drawer .mud-nav-link:hover, .eb-nav-drawer .mud-nav-link:focus-visible { background-color: var(--eb-tint-bg); color: var(--eb-text); } /* A group's own row is the section itself: full ink, heavier, so an opened section reads as a heading with destinations under it rather than as one more equal link. */ .eb-nav-drawer .mud-nav-group > .mud-nav-link { color: var(--eb-text); font-weight: 700; } /* Indentation is the container's job, not the link's. MudBlazor pads nested links itself, by selectors that measured 56px on a group's own title and 48px on the links inside it — children sitting further LEFT than their parent, which is the one thing the hierarchy cannot do. So every row is flattened back to the same 20px gutter (the selector chain is deep enough to out-specify MudBlazor's at each depth) and each collapse container adds one step, compounding with nesting. */ .eb-nav-drawer.mud-drawer .mud-navmenu .mud-nav-link, .eb-nav-drawer.mud-drawer .mud-navmenu .mud-nav-group .mud-nav-link, .eb-nav-drawer.mud-drawer .mud-navmenu .mud-nav-group .mud-nav-group .mud-nav-link, .eb-nav-drawer.mud-drawer .mud-navmenu .mud-nav-group .mud-nav-group .mud-nav-group .mud-nav-link { padding-left: 20px; } .eb-nav-drawer .mud-navgroup-collapse { padding-left: 18px; } /* One weight down inside a section, so an open group reads as heading + destinations. */ .eb-nav-drawer .mud-navgroup-collapse .mud-nav-item .mud-nav-link { font-size: 0.92rem; font-weight: 500; } /* Current page: the bar's active treatment — full ink, 800, on the orange tint the system already uses for a selected row. No coloured side stripe (DESIGN.md). MudBlazor's own active state paints the row orange on a white wash, which would have put a second orange voice under the Sell button and dropped the row to weight 500; these selectors are deep enough to out-specify it at each level. */ .eb-nav-drawer.mud-drawer .mud-navmenu .mud-nav-link.active, .eb-nav-drawer.mud-drawer .mud-navmenu .mud-nav-group .mud-nav-link.active, .eb-nav-drawer.mud-drawer .mud-navmenu .mud-nav-group .mud-nav-group .mud-nav-link.active, .eb-nav-drawer.mud-drawer .mud-navmenu .mud-nav-link[aria-current="page"] { color: var(--eb-text); /* The only !important in this block, and it is answering one: MudBlazor ships `.mud-nav-link.active:not(.mud-nav-link-disabled) { font-weight: 500 !important }`, which no amount of specificity beats. Without it the current row was the *lightest* in the drawer. */ font-weight: 800 !important; background-color: var(--eb-tint-bg); } .eb-nav-drawer .mud-nav-link .mud-icon-root { color: var(--eb-muted); } .eb-topnav .eb-nav-item, .eb-topnav .mud-button { text-transform: none; font-weight: 600; font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); letter-spacing: 0; border-radius: 999px; } .eb-topnav .eb-nav-item:hover, .eb-topnav .mud-button:hover { color: var(--eb-text); background-color: rgba(255, 255, 255, 0.08); } /* Current section: full ink + heavier weight, mirrored by aria-current="page" in markup. The species groups are MudMenus, so the class lands on the wrapper and the trigger button inside it carries its own colour/weight — the descendant selectors are what make the active state visible on a dropdown rather than only on a plain link. */ .eb-topnav .eb-nav-item--active, .eb-topnav .eb-nav-item--active .mud-button, [data-theme="light"] .eb-topnav .eb-nav-item--active, [data-theme="light"] .eb-topnav .eb-nav-item--active .mud-button { color: var(--eb-text); font-weight: 800; } /* The seller doorway — the one filled control in the bar, so it owns the orange. Ink text on orange in both themes (DESIGN.md, text-on-orange rule). The drawer carries the same control (the bar hides it below sm), and it sits outside .eb-topnav — hence the second selector on every rule here, or it renders as an unstyled dark pill. */ .eb-topnav .eb-sell-cta, .eb-nav-drawer .eb-sell-cta { background-color: var(--eb-orange); color: var(--eb-on-orange); font-weight: 800; font-size: 0.9rem; text-transform: none; border-radius: 999px; padding: 6px 18px; margin-right: 4px; box-shadow: none; } /* Light-theme nav rules (higher specificity, ~line 354) would wash the ink text and wipe the orange fill on hover — re-assert at matching specificity. */ .eb-topnav .eb-sell-cta:hover, .eb-nav-drawer .eb-sell-cta:hover, [data-theme="light"] .eb-topnav .eb-sell-cta, [data-theme="light"] .eb-nav-drawer .eb-sell-cta, [data-theme="light"] .eb-topnav .eb-sell-cta:hover, [data-theme="light"] .eb-nav-drawer .eb-sell-cta:hover { background-color: var(--eb-orange); color: var(--eb-on-orange); } .eb-topnav .eb-sell-cta:hover, .eb-nav-drawer .eb-sell-cta:hover { filter: brightness(1.06); } /* --- Header morph search ------------------------------------------------- The panel hangs off the app bar itself: MudAppBar is position:fixed, so an absolute child with top:100% renders as a full-width strip directly under the bar on every route and both bar heights. The input inherits the global white outlined-input treatment; only layout lives here. */ .eb-header-search-panel { position: absolute; top: 100%; left: 0; right: 0; display: flex; justify-content: flex-end; /* Right edge lands on the container's content edge — the same line the account controls end on, so the field hangs off the icon that opened it instead of floating at the far side of the bar. Collapses to the phone gutter once the viewport is narrower than the container. */ padding: 10px max(16px, calc((100% - var(--eb-container-max)) / 2 + 28px)) 14px 16px; background: var(--eb-surface); border-bottom: 1px solid var(--eb-border); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); } /* MudAutocomplete puts our Class on its inner input control, not on its root — so the root is the flex child that has to be sized, or the field fills the strip and sits at the far left of it. */ .eb-header-search-panel > .mud-autocomplete { flex: 0 1 560px; } .eb-header-search-input { width: 100%; } /* One suggestion row: the morph name, and the species tag that disambiguates it — "Albino" is a different gene in every catalogue that has one, so the tag is content, not decoration. */ .eb-header-search-hit { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; } /* The miss. Two lines, quiet, inside the same popover the hits use — a search that returns silence reads as broken. The query is echoed and clamped: it is whatever the visitor typed. */ .eb-header-search-empty { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; } .eb-header-search-empty-title { font-weight: 600; color: var(--eb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eb-header-search-empty-hint { font-size: 0.82rem; color: var(--eb-muted); } .eb-header-search-hit-species { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--eb-muted); white-space: nowrap; } /* The visitor's own controls — theme, saved listings, account — read as one group rather than as three more items in a five-control run. The hairline is the bar's own border colour and only appears where there is room for it; on a phone the same rule would be noise. */ .eb-nav-utility { display: flex; align-items: center; gap: 4px; } .eb-nav-utility { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--eb-border); } /* Wider once there is room. The phone keeps the rule rather than losing it: five 44px controls in a row with no gaps was the chunking failure this divider exists to fix, and the phone is where the row is tightest — the bar measures ~60px of slack at 390, so 21px buys the grouping back. */ @media (min-width: 768px) { .eb-nav-utility { margin-left: 14px; padding-left: 14px; } } /* One icon box across the whole bar. MudBlazor's 48px default left the search and theme toggles a size apart from the 44px heart beside them — invisible at rest, obvious on hover, where the ripple circles disagree. */ .eb-topnav .eb-header-search-toggle, .eb-topnav .eb-theme-toggle { width: 44px; min-width: 44px; height: 44px; } /* "Log in" was the one header control under the comfortable touch target — measured 64x37.2 at 390px, while the brand, hamburger, theme toggle and heart all sit at exactly 44x44. It clears WCAG 2.2's 24x24 floor, but it is the anonymous visitor's only way in on a phone, so it gets the same target as everything beside it rather than the smallest one in the row. */ .eb-topnav .eb-login-cta { min-height: 44px; } /* NavToolbar icon buttons (chat / user) stay light on the dark bar */ .eb-topnav .mud-icon-button { color: rgba(255, 255, 255, 0.8); } .eb-topnav .mud-icon-button:hover { color: var(--eb-text); } /* the "Admin" dropdown label sits de-emphasised vs marketplace items */ .eb-nav-admin { color: var(--eb-muted) !important; } /* Phone chrome prioritises destinations and account actions over repeating the full site name. The mark remains a 44px home target; the menu sits at the familiar trailing edge. */ @media (max-width: 767.98px) { .eb-container { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } .eb-page { padding-top: 24px; padding-bottom: 64px; } .eb-nav-inner { gap: 0; } .eb-topnav .eb-brand { min-height: 44px; margin-right: 0; } .eb-topnav .eb-brand-mark { width: auto; height: 26px; margin-right: 0; object-fit: contain; } .eb-mobile-menu { order: 10; flex: 0 0 44px; } .eb-mobile-menu .mud-icon-button, .eb-topnav .eb-theme-toggle, .eb-topnav .eb-fav-nav, .eb-topnav .eb-chat-nav { width: 44px; min-width: 44px; height: 44px; min-height: 44px; } } @media (max-width: 359.98px) { .eb-container { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } .eb-topnav .eb-brand-mark { height: 24px; } /* Measured 2026-08-13: the bar's children need 352px (logo 62 + search 44 + utility 171 + hamburger 44 + gutters), so every viewport below that clipped the right-hand controls. Two of the four utility controls move into the drawer rather than shrinking all of them under the 44px touch target or hiding one outright — a hidden control with no second home is a deleted feature. 88px comes back, which clears 320px with room spare. */ .eb-topnav .eb-theme-toggle, .eb-topnav .eb-fav-nav { display: none; } .eb-nav-drawer-utility { display: flex; } } /* ---- Immersive hero (Home) --------------------------------------------- */ /* The panel is the vitrine: photo area, the search pill straddling the seam, and the step plinth, all inside one 20px frame. The near-black base is a literal, not var(--eb-bg): heroes stay dark in BOTH themes (DESIGN.md, The Two-Theme Rule), and --eb-bg flips to #FFFFFF on light. */ .eb-hero-immersive { position: relative; margin-bottom: 56px; background: #0C0C0E; /* --eb-border-2 (#3A3A40), not --eb-border: on dark the panel sits at 1.13:1 against the page, so with the fainter hairline the "vitrine frame" the comment above describes did not visually exist. The light theme overrides this to a shadow — see the light block. */ border: 1px solid var(--eb-border-2); border-radius: 20px; overflow: hidden; } /* The seam, light theme. --eb-border-2 flips to #CFCFD6, which draws a pale hairline around a black slab — the panel reads as a hole cut into the page rather than an object resting on it. A shadow instead: same near-black, but with weight and a soft edge. */ :root:root[data-theme="light"] .eb-hero-immersive { border-color: transparent; box-shadow: 0 24px 60px rgba(12, 12, 14, 0.28), 0 2px 8px rgba(12, 12, 14, 0.16); } .eb-hero-bg { position: relative; min-height: 440px; display: flex; flex-direction: column; justify-content: flex-end; /* padding-top is not decorative: the content is bottom-aligned inside a min-height, so once it grows past that height (long headline, the credit block, a phone viewport) it would otherwise butt straight against the panel's top edge. */ padding: 36px 48px 84px; background-image: linear-gradient(180deg, rgba(12, 12, 14, 0.5) 0%, rgba(12, 12, 14, 0.12) 42%, rgba(12, 12, 14, 0.96) 100%), var(--eb-hero-image, var(--eb-hero-fallback)); background-size: cover; background-position: center; } .eb-hero-eyebrow { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eb-orange-ink); margin-bottom: 16px; /* Legibility floor over bright patches of an admin/pick-of-week hero photo. */ text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); } .eb-hero-title { font-family: var(--eb-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 0.96; letter-spacing: -0.035em; color: var(--eb-text); margin: 0; /* 17ch + balance, not 15ch bare: at the desktop clamp ceiling the seeded headline broke as "Find the one that stops / you." — a one-word last line. balance evens the lines instead of filling the first, and it was already trusted for this heading on mobile. */ max-width: 17ch; text-wrap: balance; text-transform: none; } .eb-hero-sub { /* 0.82, up from 0.72: the sub runs 52ch across, so its far end leaves the solid part of the scrim. Over the deepest photo patch it can now reach, 0.82 white holds AA; 0.72 did not. */ color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; line-height: 1.6; max-width: 52ch; margin: 18px 0 0; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); } /* The account/seller actions, sitting between the sub and the search pill. Hierarchy is carried by SIZE, not by hue. Both this row's primary and the pill's Search button are orange because both are actions and orange is the only action colour we have (The One Orange Rule) — so the two are kept from competing by scale and plane instead: the pill is white, 67px tall, elevated and overlapping the seam; these are 46px, flat, and sit back on the photo. The pill stays the loudest thing in the panel, which is correct — buying needs no account. Literal whites and blacks throughout, like the rest of the hero: this panel never flips to the light theme (DESIGN.md, The Two-Theme Rule), so a token that flips would break it. */ .eb-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .eb-hero-cta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 26px; border: 1px solid transparent; border-radius: 12px; font-family: var(--eb-display); font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease; } /* !important, and it is load-bearing. The competing rule is global-styles.css's body-link colour, `body.abp-application-layout main a:not(...)` — roughly (0,12,3) once its eleven :not() classes count, which nothing sane in this sheet can out-specify. That file carries an exclusion for .eb-hero-cta-btn, but it is served as a bare `/global-styles.css` with NO version query while this sheet is busted by `?v=`, so a browser or CDN holding yesterday's copy applies the old rule and paints an orange label on an orange fill — the button reads as a blank orange box. Declaring the colour here makes the button correct even against a stale global-styles.css. */ .eb-hero-cta-btn--primary { background-color: var(--eb-orange-on-dark) !important; color: var(--eb-on-orange-on-dark) !important; /* the hero never flips; nor does its button */ } /* The heat lamp switching on — the one shadow DESIGN.md spends on a button. The colour is restated, not inherited: these are elements, and the sheet's bare `a:hover { color: var(--eb-orange-hover) }` (0,1,1) out-specifies the base `.eb-hero-cta-btn--primary` (0,1,0). Without this line the label turned the *same* orange as the fill it sits on and vanished on hover. Any future -based button needs the same restatement. */ .eb-hero-cta-btn--primary:hover { /* !important here only because the resting rule above needs it — without a match, the resting declaration would win the cascade and the hover would never warm. */ background-color: var(--eb-orange-on-dark-hover) !important; color: var(--eb-on-orange-on-dark) !important; box-shadow: 0 0 32px rgba(232, 99, 10, 0.32); } /* The scrim fill is legibility, not glass decoration: the hero photo is admin-set or pick-of-the- week, so a hairline-and-white button can land on an arbitrarily bright patch of snake. A flat dark wash under it holds the border and label readable whatever the photo does. */ .eb-hero-cta-btn--ghost { background-color: rgba(12, 12, 14, 0.42); border-color: rgba(255, 255, 255, 0.34); color: #FFFFFF !important; /* same stale-global-styles defence as the primary */ } .eb-hero-cta-btn--ghost:hover { border-color: var(--eb-orange-on-dark); color: var(--eb-orange-on-dark) !important; } /* The white pill is the seam. It is positioned against the photo area, not the panel, so it hangs over the join between the photo and the plinth below and stitches the two halves into one object. It is a

headings; strip the UA heading margin so they sit flush in the flex .eb-section-head row exactly as the old did. */ margin: 0; line-height: 1.2; } .eb-section-link { font-size: 0.86rem; font-weight: 600; color: var(--eb-orange-ink); cursor: pointer; } .eb-section-link:hover { color: var(--eb-orange-hover); } /* On a phone the fixed Feedback rail sits against the right edge and covers the last third of any control parked there — elementFromPoint returns the rail, so the link is not merely clipped, it is unclickable. Reserve the rail's width, and give the link a real tap target while we are here. Scoped with :has() so heads that carry no right-hand control keep their full line width. */ @media (max-width: 700px) { .eb-section-head:has(.eb-section-link) { padding-right: 44px; } .eb-section-link { display: inline-flex; align-items: center; min-height: 44px; } } .eb-scale-divider { height: 1px; width: 100%; margin: 12px 0 26px; background: var(--eb-border); } /* ---- Page titles ---------------------------------------------------------- */ .eb-page-title { font-family: var(--eb-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.02; letter-spacing: -0.03em; text-transform: none; color: var(--eb-text); margin: 0 0 4px; } .eb-page-sub { color: var(--eb-muted); font-size: 0.92rem; margin-bottom: 26px; } /* The species' other name ("also known as royal pythons"). Quieter than the tagline: it is there for the buyer who uses that word and for the crawler, not as a second headline. */ .eb-page-aka { color: var(--eb-muted); font-size: 0.86rem; margin-bottom: 22px; } /* Where a tagline precedes it, that tagline's own 26px is already doing the section's spacing — reclaim it rather than stacking a second gap. On the morph pages it follows the H1 instead and keeps its own margin. */ .eb-page-sub + .eb-page-aka { margin-top: -18px; } /* highlight marks (legacy) — flat, no block highlight in the Immersive theme */ .eb-mark-yellow, .eb-mark-orange { background: none; padding: 0; color: var(--eb-orange-ink); } /* breadcrumb line above detail pages */ .eb-crumb { font-size: 0.84rem; font-weight: 600; color: var(--eb-muted); margin-bottom: 18px; } /* detail crumb becomes a row: trail on the left, prev/next on the right */ .eb-crumb--row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .eb-crumb-trail { min-width: 0; } @media (max-width: 599.98px) { /* See ListingDetail.razor: the current page's own title is the one crumb segment a phone can spare, because the h1 under it is already saying it. */ .eb-crumb-current { display: none; } } .eb-detail-nav { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; } .eb-detail-nav-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--eb-text); text-decoration: none; padding: 7px 14px; border: 1px solid var(--eb-border-2); border-radius: 999px; white-space: nowrap; transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease; } .eb-detail-nav-btn:hover { border-color: var(--eb-orange); color: var(--eb-orange-on-tint); background-color: var(--eb-tint-bg); } /* boundary of the sequence — shown, but clearly inactive */ .eb-detail-nav-btn--off { color: var(--eb-muted); border-color: var(--eb-border); opacity: 0.5; cursor: default; } .eb-crumb a, .eb-crumb .mud-link { color: var(--eb-text); text-decoration: none; font-weight: 600; } .eb-crumb a:hover, .eb-crumb .mud-link:hover { color: var(--eb-orange-ink); } /* ---- Listing cards -------------------------------------------------------- */ .eb-card { background-color: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; box-shadow: none; transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease; overflow: hidden; cursor: pointer; } .eb-card:hover { border-color: var(--eb-orange); box-shadow: var(--eb-shadow); transform: translateY(-3px); } /* Browse results — responsive card grid, 5-up above the container cap and 4-up below it. 5-up was tried once at the 1240px container and reverted: 217px columns left too little width for the text stack (title, spec, store, price) under even a 4:3 photo, so cards read as tall narrow rectangles. At the 1400px container the same five columns are 254px, which is the width the card body is now sized against — the meta row ellipsises its text there rather than clipping (see .eb-card-meta). Below the cap the container tracks the viewport, so the fifth column would shrink without limit; 1400px steps it back to the 282px 4-up case. */ .eb-card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } /* Ordering matters: every query here is max-width at equal specificity, so this block has to sit above the narrower ones or it would win at 320px too and put 4 cards on a phone. */ @media (max-width: 1400px) { .eb-card-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1200px) { .eb-card-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 960px) { .eb-card-grid { grid-template-columns: repeat(2, 1fr); } } /* Phones keep two columns all the way down — there is deliberately no 1-up step. A single full-width card put one animal on screen at a time and made the photo far larger than the decision needs, so browsing became scrolling and comparing two morphs meant remembering the last one. Two tiles show four animals per screen, which is the point of a grid. The cost is width: a 390px phone gives ~170px per card against the 282px column the card body was sized for, and ~139px at 320px. The block below retunes the body for that, and every rule in it pays off a specific overflow rather than decorating. */ @media (max-width: 560px) { /* 18px between two ~170px cards spends 5% of the row on nothing. Both card grids are tuned together from here down. .eb-card-grid is browse, morph, store and favourites; .eb-bento is the home page's Latest Listings, which is a separate grid because of its pick-of-the-week hero tile. They were missed apart once already — browse went 2-up while home stayed 1-up, which just looks like the change did not ship. */ :is(.eb-card-grid, .eb-bento) { gap: 12px; } /* pa-3 is 12px a side — 24px out of a 170px card. Asymmetric on purpose: the sides still need enough to hold the text off the card edge, but the top gap is doing nothing (the photo above it is already a hard edge) and the bottom sits under the price, which is the last thing in the stack. Trimming those two is what pulls the whole card up. */ :is(.eb-card-grid, .eb-bento) .mud-card-content.pa-3 { padding: 7px 9px 8px !important; } /* The morph combo is the card's identity, so it keeps both lines and gives up only scale. */ :is(.eb-card-grid, .eb-bento) .eb-card-title { font-size: 0.86rem; } /* Compare keeps its control and its accessible name; only the redundant visible word goes. "· 850g · Adult" plus a 62px label does not fit ~119px of content width at 320px, and the label is the one part a checkbox sitting beside a listing can afford to lose. Losing the label leaves an 18px box as the only target, so the row grows to a 44px touch square instead. That costs every phone card ~18px of height, which is the right trade: this is a touch-only breakpoint, and a control you cannot reliably hit is worse than a card you scroll slightly further. Padding with a negative margin was tried first and is wrong — it pulls the control past the card's padding edge and overflows the spec row by 12px. */ :is(.eb-card-grid, .eb-bento) .eb-compare-toggle-text { display: none; } /* ...but only where that control actually exists. Compare is opt-in (Selectable), so browse and morph pages have it while home, store, favourites and similar-listings do not. Applied unconditionally this reserved a 44px thumb target on cards with nothing to press, which surfaced as ~26px of dead air in the text stack — the gap was the touch target's ghost. */ :is(.eb-card-grid, .eb-bento) .eb-card-price-row:has(.eb-compare-toggle) { min-height: 44px; } :is(.eb-card-grid, .eb-bento) .eb-compare-toggle { /* width, not min-width: the base rule sets width:fit-content, which resolves against the 16px box and then fights a min-width for the used size. The side padding goes with it — 44px already is the target, so 2px either side only spilled the row by 4px. */ width: 44px; min-height: 44px; padding: 4px 0; justify-content: center; flex: 0 0 auto; } /* Store name and rating stay on one line or they break the reserved-height text stack that keeps every card in a row the same height. Truncate the name rather than wrap it. */ :is(.eb-card-grid, .eb-bento) .eb-store-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Equipment cards still carry a chip row here; the listing card's spec strip moved onto the photo. The type steps down with the narrower column. */ :is(.eb-card-grid, .eb-bento) .eb-card-spec { font-size: 0.74rem; } /* Close the vertical rhythm to match the narrower column. These are the four gaps between the photo and the price, and at 168px each one reads about half again as large as it does in a 282px card — the same air that looks composed on desktop looks like a hole here. */ :is(.eb-card-grid, .eb-bento) .eb-card-spec { margin: 2px 0 3px; } :is(.eb-card-grid, .eb-bento) .eb-card-meta { font-size: 0.72rem; margin: 2px 0 4px; } /* "CB'21 ♀ 2,500 g" and a "Sale −20%" flash share 152px of photo width at 320px. The chip is the half that can afford to shrink; below this it would start dropping the weight. */ :is(.eb-card-grid, .eb-bento) .eb-photo-foot { left: 7px; right: 7px; bottom: 7px; gap: 5px; } :is(.eb-card-grid, .eb-bento) .eb-photo-spec { font-size: 0.68rem; gap: 4px; padding: 2px 7px; } :is(.eb-card-grid, .eb-bento) .eb-photo-cb { font-size: 0.65rem; } :is(.eb-card-grid, .eb-bento) .eb-photo-spec .eb-sex { font-size: 0.95rem; } :is(.eb-card-grid, .eb-bento) .eb-card-price-row { margin-top: auto; } } /* ---- The last card, when it is on its own ------------------------------------ Fifteen listings over two columns leaves one card alone on the final row beside a card-shaped hole, which reads as a rendering fault rather than as the end of the page. The orphan takes the whole row and turns on its side instead - photo left, the same text stack right - so the page ends on a deliberate shape. `:last-child:nth-child(odd)` is the entire test: it can only be true when the count is odd, which at two columns is exactly when the last row holds one card. It is scoped to the two-column range; at three columns and wider a short last row reads as a grid, not as a fault. */ @media (max-width: 960px) { .eb-card-grid > .eb-card:last-child:nth-child(odd) { /* One value, read by the photo column and by the heart that has to stay on top of it. */ --eb-orphan-photo: min(40%, 220px); grid-column: 1 / -1; /* The card sets flex-direction inline, so the row direction has to outrank the attribute. */ flex-direction: row !important; } .eb-card-grid > .eb-card:last-child:nth-child(odd) .eb-card-photo-link { flex: 0 0 var(--eb-orphan-photo); } /* The heart is a control drawn for a photo - translucent black, blurred backdrop - and the card's top-right corner is now the title. Anchor it to the photo's right edge instead (44px button, 9px inset, same as the tile). */ .eb-card-grid > .eb-card:last-child:nth-child(odd) .eb-heart { right: auto; left: calc(var(--eb-orphan-photo) - 53px); } /* The photo fills its column rather than keeping the tile's aspect: in a row the height is set by the text beside it, and a 4:3 box would leave a band of card colour under the image. */ .eb-card-grid > .eb-card:last-child:nth-child(odd) .eb-card-photo { height: 100%; border-bottom: 0; border-right: 1px solid var(--eb-border); } .eb-card-grid > .eb-card:last-child:nth-child(odd) .eb-card-photo img, .eb-card-grid > .eb-card:last-child:nth-child(odd) .eb-card-photo > div { height: 100% !important; aspect-ratio: auto !important; } /* The text column is the flexible one, and min-width:0 is what lets the title ellipse inside it rather than push the card wider than its row. */ .eb-card-grid > .eb-card:last-child:nth-child(odd) .mud-card-content { min-width: 0; justify-content: center; } } /* ---- ...and the same on the home page ---------------------------------------- The bento is the same grid problem with the opposite parity and its own breakpoint, so it needs its own block rather than a longer selector list on the one above. Parity, because the first tile - the pick of the week - spans both columns and takes a row to itself here. That shifts every tile after it, so the card left alone on the last row is the even-numbered child, not the odd one: measured, the twelve tiles lay out 1 | 2+3 | 4+5 | 6+7 | 8+9 | 10+11 | 12. Breakpoint, because the bento goes two across at 860px where the browse grid does it at 960px. Between the two it is still three across, where last-child parity means nothing. */ @media (max-width: 860px) { .eb-bento > .eb-card:last-child:nth-child(even) { /* One value, read by the photo column and by the heart that has to stay on top of it. */ --eb-orphan-photo: min(40%, 220px); grid-column: 1 / -1; /* The card sets flex-direction inline, so the row direction has to outrank the attribute. */ flex-direction: row !important; } .eb-bento > .eb-card:last-child:nth-child(even) .eb-card-photo-link { flex: 0 0 var(--eb-orphan-photo); } /* The heart is a control drawn for a photo - translucent black, blurred backdrop - and the card's top-right corner is now the title. Anchor it to the photo's right edge instead (44px button, 9px inset, same as the tile). */ .eb-bento > .eb-card:last-child:nth-child(even) .eb-heart { right: auto; left: calc(var(--eb-orphan-photo) - 53px); } /* The photo fills its column rather than keeping the tile's aspect: in a row the height is set by the text beside it, and a 4:3 box would leave a band of card colour under the image. */ .eb-bento > .eb-card:last-child:nth-child(even) .eb-card-photo { height: 100%; border-bottom: 0; border-right: 1px solid var(--eb-border); } .eb-bento > .eb-card:last-child:nth-child(even) .eb-card-photo img, .eb-bento > .eb-card:last-child:nth-child(even) .eb-card-photo > div { height: 100% !important; aspect-ratio: auto !important; } /* The text column is the flexible one, and min-width:0 is what lets the title ellipse inside it rather than push the card wider than its row. */ .eb-bento > .eb-card:last-child:nth-child(even) .mud-card-content { min-width: 0; justify-content: center; } } .eb-card-photo { overflow: hidden; background-color: var(--eb-photo-bg); border-bottom: 1px solid var(--eb-border); } .eb-card-photo img { transition: transform 300ms ease; } .eb-card:hover .eb-card-photo img { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .eb-card, .eb-card-photo img { transition: none; } .eb-card:hover { transform: none; } .eb-card:hover .eb-card-photo img { transform: none; } } /* Two lines, reserved rather than merely capped. Titles carry the morph combo, so their length varies wildly ("Pastel" vs "Banana Pastel Clown Het Piebald"); left unclamped, a 3-line title in one card gave its row-mates up to 42px of dead air, because the price row's margin-top:auto absorbed the difference. Reserving makes every card's text stack identical, so there is nothing left to absorb. Clamped at 2 rather than 1 — truncating the genetics is not an option, and the card gets its height back from the specimen chip and the merged meta row instead. */ .eb-card-title { color: var(--eb-text); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; /* 2 lines at line-height 1.3 — the reserve depends on that value */ } .eb-price { font-weight: 800; color: var(--eb-orange-ink); font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.3; } .eb-price .eb-cur { font-size: 0.86em; font-weight: 700; margin-right: 1px; } /* struck-through original price shown next to a sale price */ .eb-price-was { color: var(--eb-muted); font-size: 0.85rem; font-weight: 600; text-decoration: line-through; } /* Digits that stack — card prices, was-prices, the seller table's price column — take tabular figures so a column of prices aligns instead of wobbling on proportional 1s. */ .eb-price, .eb-price-was, .eb-c-price { font-variant-numeric: tabular-nums; } /* Detail-page context: the was-price sits beside the 2.4rem .eb-price-lg, so it steps up and takes a baseline nudge to align with the big figure. */ .eb-price-was--lg { font-size: 1.2rem; padding-bottom: 8px; } /* Sale price + was-price on one baseline (detail pages, both listing kinds). */ .eb-price-row { display: flex; align-items: flex-end; gap: 12px; } /* "On sale · ends N" line under the detail price. */ .eb-sale-note { color: var(--eb-orange-ink); font-weight: 700; font-size: 0.9rem; } /* "Sale −N%" badge over a card photo — bottom-right, since the heart owns the top-right corner */ /* Static: it is the right-hand child of .eb-photo-foot, which does the placing. Absolute, it overlapped the spec chip on a 170px phone card the moment a sale and a weight coincided. */ .eb-sale-badge { margin-left: auto; flex: 0 0 auto; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; color: var(--eb-on-orange-on-dark); background: var(--eb-orange-on-dark); border-radius: 6px; padding: 3px 8px; } .eb-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--eb-muted); } /* shipping shown as muted text (not a filled pill) in the card footer */ .eb-ship-pill { display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--eb-muted); background: none; border-radius: 0; padding: 0; } .eb-chip-trait.mud-chip { font-size: 0.76rem; font-weight: 700; letter-spacing: 0; text-transform: none; background-color: var(--eb-tint-bg); border: 1px solid var(--eb-tint-border); color: var(--eb-orange-on-tint); border-radius: 999px; } /* The photo's bottom strip: the specimen chip left, the sale flash right. A strip rather than two absolutely-placed badges, so they cannot collide at any card width. pointer-events:none keeps the stretched photo link underneath working — nothing in here is interactive. */ .eb-photo-foot { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 8px; pointer-events: none; } /* The specimen chip — year, sex, weight in one dark-glass tag, the three facts a keeper reads first. They sit on the animal rather than in a row of their own beneath it, which is what pays for the shorter card. Blur is legibility here, not decoration: the chip lies over photography whose brightness we do not control. Permanently dark in both themes, like every photo overlay. No separators — a mono year, a coloured glyph and a number with a unit are already three distinct things, and dots would only add clutter over a photo. */ .eb-photo-spec { display: inline-flex; align-items: center; gap: 6px; /* Never shrinks. On a 320px phone a sale flash leaves the chip 42px, which renders "CB'2…" — the chip drops to its own line above the flash instead of eating its own data. */ flex: 0 0 auto; max-width: 100%; font-size: 0.76rem; font-weight: 700; line-height: 1.35; color: var(--eb-on-photo); /* 0.82, not the CB tag's old 0.75: the chip now carries the coloured sex glyph, and against a blown-out white photo the thinner glass put female at 3.6:1 — over the 3:1 graphical floor but under the 4.5:1 the system sets for a colour that carries meaning. */ background: rgba(12, 12, 14, 0.82); border-radius: 6px; padding: 3px 9px; white-space: nowrap; overflow: hidden; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Mono for the year alone — a measurement, and the one place the system allows the face. */ .eb-photo-cb { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 0.72rem; letter-spacing: -0.02em; } .eb-photo-weight { font-variant-numeric: tabular-nums; } /* Smaller than the spec strip's 1.2rem: the chip's own line box is 15px, and the glyph has a dark ground behind it here rather than the card surface, so it needs less mass to read. */ .eb-photo-spec .eb-sex { font-size: 1.05rem; } .eb-photo-spec .eb-sex--m { color: var(--eb-sex-m-on-dark); } .eb-photo-spec .eb-sex--f { color: var(--eb-sex-f-on-dark); } /* The card's single secondary row: maturity, category and the seller, which were three rows of the same muted grey. One line, never wrapping — the text stack's height is reserved so every card in a row matches, and a wrap would break that. Truncation runs right-to-left through the store name and its rating, so the animal's own data is the last thing to go. */ .eb-card-meta { display: flex; align-items: baseline; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--eb-muted); font-size: 0.78rem; line-height: 1.45; min-height: 1.45em; margin: 3px 0 7px; } .eb-card-meta > .eb-spec-dot { flex: 0 0 auto; } .eb-card-meta > :is(.eb-spec-maturity, .eb-spec-category, .eb-store-line) { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* The seller is the only part that gives way. Flex shrinks proportionally, so with all three present on a 254px card even a 1:3 ratio still clipped "Hognose" to "Hogno…" and "Adult" to "Ad…" — the animal's own two fields are short and are the reason the row exists, so they are pinned and the store name absorbs the whole deficit. */ .eb-card-meta > :is(.eb-spec-maturity, .eb-spec-category) { flex: 0 0 auto; } .eb-card-meta > .eb-store-line { flex: 0 1 auto; } .eb-store-line { color: var(--eb-muted); font-size: 0.78rem; } .eb-store-line .mud-link { color: var(--eb-muted); } .eb-store-line .mud-link:hover { color: var(--eb-text); } .eb-store-line .eb-star { color: var(--eb-orange-ink); } /* ---- Home "Featured today" grid + "how it works" -------------------------- */ /* Store cards carry a name, a location and a count rather than a photo-led text stack, so they take a narrower column than a listing does: 6-up is 211px at the 1400px container, near enough the 221px these cards already run at 5-up today. Steps back to 5 at the cap, then follows its existing ladder. Same source-order rule as .eb-card-grid — widest query first. */ .eb-feature-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } @media (max-width: 1400px) { .eb-feature-grid { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 1180px) { .eb-feature-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 960px) { .eb-feature-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 680px) { .eb-feature-grid { grid-template-columns: repeat(2, 1fr); } } /* Stays 2-up on phones — one store card per row wastes the viewport. */ @media (max-width: 460px) { .eb-feature-grid { gap: 12px; } } /* Breeders directory — A–Z letter headings */ .eb-letter-head { font-family: var(--eb-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--eb-orange-ink); margin: 28px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--eb-border); } /* ---- Latest Stores cards (home) ------------------------------------------ */ .eb-store-card-link { display: block; height: 100%; } .eb-store-card { background-color: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; padding: 22px 16px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; height: 100%; transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease; } .eb-store-card:hover { border-color: var(--eb-orange); box-shadow: var(--eb-shadow); transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .eb-store-card { transition: none; } .eb-store-card:hover { transform: none; } } .eb-store-card-avatar { width: 64px; height: 64px; min-width: 64px; border-radius: 999px; background: var(--eb-tint-bg); color: var(--eb-orange-on-tint); display: flex; align-items: center; justify-content: center; font-family: var(--eb-display); font-weight: 800; font-size: 1.6rem; overflow: hidden; margin-bottom: 12px; padding: 7px; box-sizing: border-box; } .eb-store-card-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; } .eb-store-card-name { font-family: var(--eb-display); font-weight: 600; font-size: 1rem; color: var(--eb-text); line-height: 1.3; } .eb-store-card-loc { font-size: 0.8rem; color: var(--eb-muted); margin-top: 2px; } .eb-store-card-meta { font-size: 0.8rem; color: var(--eb-body); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .eb-store-card-meta .eb-star { color: var(--eb-orange-ink); } .eb-store-card-dot { color: var(--eb-muted); } /* ---- Batch action bar (My Animals multi-select) -------------------------- */ .eb-batch-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 8px; background-color: var(--eb-tint-bg); border: 1px solid var(--eb-tint-border); border-radius: 12px; } /* The plinth the exhibit stands on: the base of the hero panel, inside its frame. Near-black literals throughout for the same reason as .eb-hero-immersive — this band never flips to light. padding-top clears the 34px of search pill that hangs down into it, plus breathing room. */ .eb-hero-plinth { display: block; background: #0C0C0E; border-top: 1px solid rgba(255, 255, 255, 0.09); /* 56 top, not 66: the pill hangs 34px into this band, so this is the overhang plus 22px of clearance. It cannot go below ~40 without the first step title touching the pill. */ padding: 56px 48px 30px; } .eb-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; border: none; background: none; padding: 0; border-radius: 0; } /* Three bays divided by hairlines, the way a caption rail under a display case is divided — not three cards, and not three unattached top rules floating on the page background (which is what these were, and why the sequence read as debris between the hero and the grid). */ .eb-how > div { border-top: none; border-left: 1px solid rgba(255, 255, 255, 0.10); padding: 0 30px; } .eb-how > div:first-child { border-left: none; padding-left: 0; } .eb-how > div:last-child { padding-right: 0; } /* An

since these steps are real headings. Two consequences of that, both handled here. margin-top is pinned so the UA heading margin can't push the strip off its grid. And the colour is !important because global-styles.css blanket-styles headings inside the Blazor app: `body.abp-application-layout h3` (0,0,1,2) and `[data-theme="light"] body.abp-application-layout h3` (0,0,2,2) would repaint these titles white on dark and near-black on light. Two classes beat the first but not the second, and that sheet loads later, so a specificity tie loses too — same fight, same remedy as .mud-button-filled-primary above. */ /* White, not orange. These numerals are labels, not actions, and orange painted them as a third and fourth and fifth call to action in a panel that already holds two orange fills — at which point the scarcity The One Orange Rule depends on is gone. The 800 weight carries the hierarchy on its own. --eb-on-photo never flips, which is what this never-flipping band needs. !important stays for the reason it was added: global-styles.css blanket-styles headings inside the Blazor app — `body.abp-application-layout h3` (0,0,1,2) and its [data-theme="light"] twin (0,0,2,2) — and that sheet loads later, so a specificity tie loses too. */ .eb-how .eb-how-title { font-family: var(--eb-display); color: var(--eb-on-photo) !important; font-weight: 800; font-size: 1.08rem; letter-spacing: -0.01em; margin-top: 0; margin-bottom: 6px; } /* --eb-on-photo-dim for the same reason: --eb-muted flips to #63636B on light, which is invisible on this near-black band. This token is defined never to flip. */ .eb-how-body { font-size: 0.86rem; line-height: 1.6; color: var(--eb-on-photo-dim); max-width: 34ch; } @media (max-width: 760px) { /* Stacked, the divider has to move with the flow: hairlines between rows, not down their side. */ .eb-how { grid-template-columns: 1fr; } .eb-how > div, .eb-how > div:first-child { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.10); padding: 16px 0 0; } .eb-how > div:first-child { border-top: none; padding-top: 0; } .eb-how-body { max-width: none; } } /* Phone: the plinth goes away entirely. Stacked, three steps cost roughly a whole viewport of scroll before the visitor has seen a single animal, and on a phone the listings have to come first. The steps are self-evident marketplace mechanics, not information the buyer is missing — so this drops the section and its heading together, leaving no dangling label in the a11y tree. Placed after the base .eb-hero-plinth rule: a media query carries no extra specificity, so the same declaration earlier in the sheet would simply lose to it. */ @media (max-width: 720px) { .eb-hero-plinth { display: none; } } /* ---- Filter rail / bar (Browse) ------------------------------------------- */ /* Wraps rather than placing a fixed set of children. The primary row is variable now that species are database rows: a category with a morph catalogue AND a type list (boas, hognoses) shows seven controls where ball pythons show six, and one an admin adds later could show more. The former six-column grid template had no column for a seventh child, so grid placed it in an implicit auto column and the row's min-content width exceeded the container — the bar ran off the right edge. Flex-wrap sizes from the controls themselves, so any count lays out and the surplus drops to a second row instead of overflowing. */ .eb-filter-bar { border: 1px solid var(--eb-border); border-radius: 14px; background: var(--eb-surface); padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 16px; } .eb-filter-bar .mud-input-outlined-border { border-radius: 10px; } /* Basis, not width: in a wrapping row the flex basis decides both the resting proportion and where the row breaks. min-width:0 is what lets a field shrink past its intrinsic width rather than forcing the overflow back. The max-width keeps a wrapped row honest. Six controls fill one row and never reach the cap, so the ball-python bar is unchanged; seven wrap, and without a ceiling the lone select left on the second row grows to consume the whole of it — an 850px "Maturity" dropdown. Capped, the surplus row stays left-aligned at a sane field width. Both selectors are needed because MudBlazor is inconsistent about where our Class lands: MudTextField puts it on its own root, but MudSelect and MudAutocomplete wrap themselves in an outer .mud-select and put it on the inner .mud-input-control — so the flex item for every dropdown in this bar is the wrapper, and sizing .eb-filter-item alone silently misses all of them. */ /* The bases are set so the widest case — morph picker, type, keyword, sex, maturity, More and sort, seven controls — still fits one row at the 1240px container, then wraps below it where the tablet rules take over. Wrapping breaks the line on the basis total before flex-shrink ever runs, so the basis, not the shrink factor, is what decides whether a row holds. */ .eb-filter-bar > .mud-select, .eb-filter-bar > .eb-filter-item { flex: 0.9 1 132px; min-width: 0; max-width: 280px; } .eb-filter-bar > .mud-select.mud-autocomplete, .eb-filter-bar > .eb-filter-item--wide { flex: 1.2 1 170px; max-width: 400px; } /* The inner control fills whichever wrapper it sits in. */ .eb-filter-bar .eb-filter-item { width: 100%; min-width: 0; } .eb-filter-bar .eb-filter-item--num { max-width: 110px; min-width: 90px; } /* Unlabeled controls (sex pills, More, Sort) carry no caption, so they must reserve the same 24px label headroom the stacked-label inputs get (:1912/:1920) — otherwise they center against the taller labelled cells and float ~11px above the input-box baseline ("filters not lined up"). Matching the top offset lines their box tops up with the fields. */ .eb-filter-bar .eb-seg { align-self: start; margin-top: 24px; } /* Inside the filter bar the sex pills wear the row's own language. Every neighbour here is a white outlined input, so a dark segmented control read as a different kind of thing — the group faded into the bar behind it while the fields in front of it were bright. Same instrument, dressed for its container: on the morph pages, where the surroundings are dark, .eb-seg keeps its dark track. The active pill stays orange in both, because that is the one thing the control is saying. */ .eb-filter-bar .eb-seg { background: #FFFFFF; border-color: #C9C9D0; } .eb-filter-bar .eb-seg-btn { color: #0C0C0E; } .eb-filter-bar .eb-seg-btn--on { color: var(--eb-on-orange); } .eb-filter-bar .eb-seg-btn:not(.eb-seg-btn--on):hover { background: #EDEDF1; } /* "More filters" toggle — sits with the primary filters; badge counts hidden active filters */ .eb-more-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--eb-border-2); background: none; color: var(--eb-body); font-family: var(--eb-display); font-weight: 600; font-size: 0.86rem; min-height: 40px; padding: 8px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap; align-self: start; margin-top: 24px; /* match the stacked-label headroom so it lines up with the input boxes */ transition: border-color 140ms ease, color 140ms ease; } .eb-more-btn:hover { color: var(--eb-text); border-color: var(--eb-orange); } .eb-more-btn--open { color: var(--eb-text); border-color: var(--eb-orange); } .eb-more-count { background: var(--eb-orange); color: var(--eb-on-orange); font-size: 0.7rem; font-weight: 800; border-radius: 999px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } /* Sort — a labelled menu button showing the current order at rest (not a mystery icon), pinned to the row's right edge on desktop. Matches the "More filters" button's weight. */ /* headroom to match the labelled input boxes. margin-left:auto only bites when the row has slack — on a filled row the growing fields have already eaten it — so its job is the wrapped case: a category with enough filters to break the row leaves sort pinned to the right edge under the other actions, rather than dangling alone at the left margin. */ .eb-sort-slot { align-self: start; margin-top: 24px; margin-left: auto; } .eb-sort-btn { align-self: center; } .eb-sort-btn .mud-button-root { border: 1px solid var(--eb-border-2); border-radius: 10px; color: var(--eb-body); font-family: var(--eb-display); font-weight: 600; font-size: 0.86rem; text-transform: none; min-height: 40px; padding: 8px 12px; } .eb-sort-btn .mud-button-root:hover { color: var(--eb-text); border-color: var(--eb-orange); } /* Secondary filters — full-width collapse row inside the bar. flex-basis 100% (not the old grid-column: 1 / -1) is what forces its own row now that the bar is a wrapping flex container. */ .eb-filter-more { display: none; flex: 0 0 100%; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--eb-border); } .eb-filter-more--open { display: flex; } .eb-active-label { font-size: 0.78rem; font-weight: 600; color: var(--eb-muted); } .eb-clear-link { font-size: 0.8rem; font-weight: 600; color: var(--eb-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; background: none; border: none; padding: 0; } .eb-clear-link:hover { color: var(--eb-text); } /* Quiet, always-visible help affordance next to the result count — the specialist genetics shorthand in every title/morph search has no other explanation anywhere on the page. */ .eb-morph-help { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--eb-muted); cursor: pointer; background: none; border: none; padding: 0; } .eb-morph-help .mud-icon-root { font-size: 1rem; } .eb-morph-help:hover { color: var(--eb-text); } /* ---- Detail page ---------------------------------------------------------- */ .eb-gallery-main { border-radius: 16px; border: 1px solid var(--eb-border); background-color: var(--eb-surface); overflow: hidden; width: 100%; /* Sized by ratio, not a fixed px height, so the box hugs the photo at every viewport width (a fixed 480px left ~200px of dead space inside the frame on phones). 4:3 at the desktop column width ≈ the old 480px. */ height: auto; aspect-ratio: 4 / 3; max-height: 520px; display: flex; align-items: center; justify-content: center; } .eb-gallery-main img { max-width: 100%; max-height: 100%; width: auto; height: 95%; object-fit: contain; display: block; } /* Thumbnail strip under the main gallery photo. */ .eb-thumb-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } /* Welfare advisory shown under the main photo when a listing carries a morph linked to a hereditary neurological ("wobble") defect. Caution amber, not brand orange — a warning must not read as a call to action. Quiet by design: informs the buyer, doesn't shout. */ .eb-welfare-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--eb-welfare-border); background: var(--eb-welfare-bg); border-radius: 12px; } .eb-welfare-note-icon { font-size: 1.25rem; color: var(--eb-welfare-accent); flex: 0 0 auto; margin-top: 1px; } .eb-welfare-note-text { display: flex; flex-direction: column; gap: 2px; } .eb-welfare-note-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-welfare-accent); } .eb-welfare-note-list { margin: 2px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; } .eb-welfare-note-list li { font-size: 0.875rem; line-height: 1.5; color: var(--eb-text); } .eb-welfare-note-body { margin-top: 4px; font-size: 0.82rem; line-height: 1.5; color: var(--eb-muted); } /* Route to the welfare policy from the advisory itself — the page raising the concern is where a buyer wants the detail, not the footer. Welfare accent, not brand orange: this whole block must never read as a call to action. */ .eb-welfare-note-link { align-self: flex-start; margin-top: 6px; font-size: 0.82rem; font-weight: 600; color: var(--eb-welfare-accent); text-decoration: underline; text-underline-offset: 2px; } /* Skip link — off-screen until focused, then a real button over the app bar. */ .eb-skip-link { position: fixed; top: -100px; left: 16px; z-index: 2000; padding: 10px 16px; border-radius: 10px; background: var(--eb-orange); color: var(--eb-on-orange); font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: top 140ms ease; } .eb-skip-link:focus, .eb-skip-link:focus-visible { top: 12px; } @media (prefers-reduced-motion: reduce) { .eb-skip-link { transition: none; } } /* The skip target must not draw a focus ring of its own — the user asked to move, not to highlight a container. */ #eb-main:focus { outline: none; } /* Publish-run summary on the Traits admin. Shows only rows needing attention — a run where 40 files are simply awaiting review must not print 40 lines of nothing-happened. */ .eb-morph-publish { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--eb-border); border-radius: 12px; background: var(--eb-surface); } .eb-morph-publish-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .eb-morph-publish-title { font-weight: 700; color: var(--eb-text); } .eb-morph-publish-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; } .eb-morph-publish-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 0.86rem; padding: 4px 0; border-top: 1px solid var(--eb-border); } .eb-morph-publish-row code { color: var(--eb-text); } .eb-morph-publish-outcome { font-weight: 600; } .eb-morph-publish-row--ok .eb-morph-publish-outcome { color: var(--eb-success); } .eb-morph-publish-row--bad .eb-morph-publish-outcome { color: var(--eb-error); } .eb-morph-publish-row--muted .eb-morph-publish-outcome { color: var(--eb-muted); } .eb-morph-publish-msg { color: var(--eb-muted); flex: 1 1 240px; } .eb-morph-publish-foot { margin-top: 10px; font-size: 0.84rem; color: var(--eb-muted); } /* ---- Morph landing pages (/morphs/{slug}) --------------------------------- */ /* Breadcrumb: most arrivals come cold from a search result with no history behind them. */ .eb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.8rem; color: var(--eb-muted); } .eb-crumbs a { color: var(--eb-muted); text-decoration: none; } .eb-crumbs a:hover { color: var(--eb-orange-ink); text-decoration: underline; text-underline-offset: 2px; } .eb-crumbs [aria-current="page"] { color: var(--eb-text); font-weight: 600; } /* The gene spec strip: the page's identity, and the specialist promise kept. Inheritance mode, super form, first-produced year and welfare status are DATA here, scanned the way a keeper scans sex and weight on a listing — not sentences buried in a paragraph. Availability leads and carries the orange, because price and action are the only things orange is allowed to mean. */ /* Flex, not grid: items grow to fill their row, so a 5-item strip never leaves a dead cell showing through where a 6th would be. The divisions are a 1px gap over a border-coloured container rather than a border per item. Per-item borders only drew vertically, which was invisible on desktop (one row) and wrong the moment the strip wrapped: on a phone the six items stacked into four rows with nothing between them, so "Super form: Super Pastel" and "Welfare: none documented" read as one paragraph. The gap draws both axes, and since flex items grow to fill their row there is never a stretch of bare track showing through. */ .eb-morph-spec { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 14px; margin-bottom: 24px; border: 1px solid var(--eb-border); border-radius: 14px; background: var(--eb-border); overflow: hidden; } .eb-morph-spec-item { display: flex; flex-direction: column; justify-content: center; gap: 3px; flex: 1 1 160px; padding: 12px 16px; background: var(--eb-surface); } /* Availability sits on the recessed surface so the eye lands on it first in the strip. */ .eb-morph-spec-item--lead { background: var(--eb-surface-2); } /* Phones keep two columns down to 320px. The 160px basis broke to one item per row there, turning a six-item strip into six stacked rows of mostly empty line — 85px of scroll bought nothing, on the screen where scroll is dearest. A full-width lead row was tried and cost the same. The labels are short enough to hold at 142px; values that don't ("Incomplete dominant") wrap, which is cheaper than a row. */ @media (max-width: 560px) { .eb-morph-spec-item { flex-basis: 120px; padding: 11px 13px; } } .eb-morph-spec-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-morph-spec-value { font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: var(--eb-text); } .eb-morph-spec-price { display: block; margin-top: 1px; font-size: 0.86rem; font-weight: 700; color: var(--eb-orange-ink); } .eb-morph-spec-value--none { font-weight: 600; color: var(--eb-muted); } .eb-morph-spec-value--ok { font-weight: 600; color: var(--eb-body); } /* Welfare accent, never brand orange — a concern must not read as a call to action. */ .eb-morph-spec-value--warn { color: var(--eb-welfare-accent); text-decoration: underline; text-underline-offset: 2px; } /* Page rhythm. .eb-section-title ships margin:0 for .eb-section-head flex rows; this page uses it bare, so unscoped every heading sat flush on the welfare note above and the grid below, and the H1's 4px bottom (sized for a tagline that never renders here) crammed it onto the spec strip. The scale: identity block tight (14px H1→strip via .eb-morph-spec), sections generous (40px above a heading, 16px below — more above than below), heading+tagline one voice (6px). */ .eb-morph-page .eb-section-title { margin: 40px 0 16px; } .eb-morph-page .eb-section-title:has(+ .eb-page-sub) { margin-bottom: 6px; } .eb-morph-page .eb-page-sub { margin-bottom: 18px; } /* The advisory must never merge with the stock heading; collapses into the 40px when no controls row follows. */ .eb-morph-page .eb-welfare-note { margin-bottom: 20px; } /* Sparse stock is the steady state on a permanent page, not the edge case: inventory churns underneath while the page stays. The shared 5-track grid kept its tracks whatever the count, so two animals sat beside three empty slots — a marketplace advertising that it is empty. auto-fit collapses the unused tracks, the max stops two cards stretching to half the page each, and justify-content packs them left so the row reads as "these two" rather than "three missing". */ /* Gated at 961px on purpose. The base grid already steps down to two columns at 960 and stays there on phones, so there is no empty-track problem left to solve down there — and because this rule sits after those max-width queries at equal specificity, an ungated version overrode them and pinned a phone's card to 240px inside a 358px container while every other page went full width. This only applies where the base grid is three columns or more, the only place a void appears. */ @media (min-width: 961px) { .eb-card-grid--sparse { grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); justify-content: start; } } /* Captions, because the two segmented groups were two adjacent identical orange "All" buttons. The groups already carried aria-labels, so assistive tech was told what sighted users weren't. */ .eb-morph-control-group { display: flex; flex-direction: column; gap: 4px; } .eb-morph-control-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } /* Control row: the buyer already chose a gene, so this is where sort and compare become the primary actions. Reuses the browse page's .eb-seg pills and .eb-sort-btn so the two surfaces never teach two different instruments. */ .eb-morph-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; padding: 12px 14px; border: 1px solid var(--eb-border); border-radius: 12px; background: var(--eb-surface); } .eb-morph-controls-count { margin-left: auto; font-size: 0.84rem; color: var(--eb-muted); } .eb-morph-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* Below md the row becomes a panel behind the .eb-filter-toggle, exactly as the browse filter bar does — one collapse mechanism for the whole marketplace. Open, it stacks: seven controls wrapped into a phone-width row produced ragged half-rows and a 342px wall of chrome above the first animal. Breakpoint matches MudBlazor's md (960px), because the toggle that reveals it is d-md-none — any other number would leave a width with no way to open the panel. */ @media (max-width: 959.98px) { .eb-morph-controls { display: none; } .eb-morph-controls.eb-morph-controls--open { display: flex; flex-direction: column; align-items: stretch; } /* Segmented groups fill the panel and split it evenly, so the options read as one control rather than as pills floating at the left of an empty row. */ .eb-morph-controls .eb-seg { width: 100%; } .eb-morph-controls .eb-seg-btn { flex: 1 1 0; } .eb-morph-controls .eb-sort-btn, .eb-morph-controls .eb-sort-btn .mud-button-root { width: 100%; } .eb-morph-controls .eb-sort-btn .mud-button-root { min-height: 44px; } } @media (max-width: 640px) { .eb-morph-controls-count { margin-left: 0; width: 100%; } } /* Related genes read as navigation, not as trait chips: an orange chip means "this animal carries this trait" everywhere else in the product. Same-hue tint, but a card-shaped link carrying the co-occurrence count that makes it useful to a breeder. */ .eb-morph-related { display: flex; flex-wrap: wrap; gap: 10px; } .eb-morph-related-link { display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; padding: 8px 14px; border: 1px solid var(--eb-border); border-radius: 12px; background: var(--eb-surface); text-decoration: none; transition: border-color 140ms ease, transform 140ms ease; } .eb-morph-related-link:hover { border-color: var(--eb-orange); transform: translateY(-2px); } .eb-morph-related-name { font-size: 0.9rem; font-weight: 700; color: var(--eb-text); } .eb-morph-related-count { font-size: 0.76rem; color: var(--eb-muted); } @media (prefers-reduced-motion: reduce) { .eb-morph-related-link { transition: none; } .eb-morph-related-link:hover { transform: none; } } /* ---- Morph index (/{species}/morphs) ------------------------------------ */ /* A list, not a card grid: 33 identical tiles holding a name and a number is a container standing in for content. Rows read as a column you scan, which is how a keeper reads a gene list. */ .eb-morph-index-intro { max-width: 68ch; margin: 6px 0 0; color: var(--eb-body); line-height: 1.7; } .eb-morph-index-count { margin: 18px 0 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } /* Columns rather than a single long file: 33 genes down one column is 1500px of scroll for a list whose longest label is one word. Multi-column flows them without locking rows. */ .eb-morph-index-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--eb-border); column-count: 3; column-gap: 28px; } @media (max-width: 1023.98px) { .eb-morph-index-list { column-count: 2; } } @media (max-width: 599.98px) { .eb-morph-index-list { column-count: 1; } } .eb-morph-index-list li { break-inside: avoid; } .eb-morph-index-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--eb-border); text-decoration: none; transition: background 140ms ease, padding-left 140ms ease; } .eb-morph-index-row:hover { background: var(--eb-tint-bg); padding-left: 10px; } .eb-morph-index-name { font-weight: 700; color: var(--eb-text); } .eb-morph-index-row:hover .eb-morph-index-name { color: var(--eb-orange-on-tint); } .eb-morph-index-stock { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; font-size: 0.82rem; color: var(--eb-muted); text-align: right; } .eb-morph-index-price { font-weight: 700; color: var(--eb-orange-ink); } .eb-morph-index-stock--none { font-style: normal; opacity: 0.75; } /* The section page's route in. A link, not a button: it competes with nothing on that page. */ .eb-morph-index-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; color: var(--eb-orange-ink); font-weight: 700; font-size: 0.92rem; text-decoration: none; } .eb-morph-index-cta:hover { text-decoration: underline; text-underline-offset: 3px; } .eb-morph-index-cta-icon { font-size: 1.1rem; } @media (prefers-reduced-motion: reduce) { .eb-morph-index-row { transition: none; } } /* Compact "details" badge on the My Animals table — sex icon · maturity · views */ .eb-animal-badge { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--eb-border-2); background-color: var(--eb-surface-2); white-space: nowrap; font-size: 0.8rem; line-height: 1; } .eb-animal-badge .mud-icon-root { font-size: 1.05rem; } .eb-animal-badge-txt { font-weight: 600; color: var(--eb-body); } .eb-animal-badge-views { display: inline-flex; align-items: center; gap: 3px; color: var(--eb-muted); } .eb-animal-badge-views .mud-icon-root { color: var(--eb-muted); font-size: 0.95rem; } .eb-animal-badge-sep { width: 1px; height: 12px; background-color: var(--eb-border-2); } /* The thumbnails are real buttons now (keyboard access); this strips the UA button chrome so the row looks exactly as it did when they were bare images. The visual treatment stays on .eb-thumb below, which is still the , so the active-border and hover rules are untouched. */ .eb-thumb-btn { padding: 0; border: 0; background: none; line-height: 0; border-radius: 10px; cursor: pointer; } .eb-thumb { cursor: pointer; border-radius: 10px; border: 1px solid var(--eb-border); opacity: 0.7; object-fit: cover; transition: opacity 150ms ease, border-color 150ms ease; } .eb-thumb-btn:hover .eb-thumb { opacity: 1; border-color: var(--eb-border-2); } .eb-thumb:hover { opacity: 1; border-color: var(--eb-border-2); } .eb-thumb.eb-thumb-active { border-color: var(--eb-orange); opacity: 1; } .eb-spec-table td { font-size: 0.86rem; font-weight: 600; color: var(--eb-text); border-bottom: 1px solid var(--eb-border) !important; padding: 8px 0; } .eb-spec-table td:first-child { color: var(--eb-muted); font-size: 0.82rem; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; width: 42%; } /* Listing telemetry under the spec table: view count and the short listing id. Deliberately the quietest text on the card — it is a support handle, not evidence about the animal. */ .eb-spec-meta { margin-top: 12px; font-size: 0.76rem; color: var(--eb-muted); letter-spacing: 0.01em; } /* Seller-written description on detail pages — multi-paragraph long-form, so it reads at the prose leading rather than MudBlazor body1's tighter default. */ .eb-detail-desc { line-height: 1.7; } /* detail price — large, white (per 8a); flat, no tag */ .eb-price-lg { font-size: 2.4rem; letter-spacing: -0.02em; color: var(--eb-text); background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; transform: none; display: inline-block; } .eb-price-lg .eb-cur { color: var(--eb-text); } /* ---- Seller strip (listing detail / store) -------------------------------- */ .eb-seller-strip { background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; padding: 16px 20px; display: flex; align-items: center; gap: 14px; } /* The card above the strip carries no bottom margin, so on the listing page the two touched and read as one element. Scoped to the column: the strip is used on other pages where it already sits clear. */ .eb-col-rail .eb-seller-strip { margin-top: 16px; } /* Same automatic-minimum trap as the grid columns, in flex this time: the name/location/licence block would not shrink below its content, so a long licensing authority pushed "Visit →" 11px past the right edge of the phone. The avatar and the link keep their size; only the text block gives, and its longest single tokens (a licence number, a council name) may break rather than push. */ .eb-seller-strip > * { min-width: 0; } .eb-seller-avatar, .eb-seller-visit { flex: 0 0 auto; } .eb-seller-name, .eb-seller-meta, .eb-seller-licence { overflow-wrap: anywhere; } .eb-seller-avatar { width: 44px; height: 44px; min-width: 44px; border-radius: 999px; background: var(--eb-tint-bg); color: var(--eb-orange-on-tint); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; overflow: hidden; } .eb-seller-avatar img { width: 100%; height: 100%; object-fit: cover; } .eb-seller-name { font-family: var(--eb-display); font-weight: 700; font-size: 0.95rem; color: var(--eb-text); } .eb-seller-strip .eb-seller-name a, .eb-seller-strip .eb-seller-name .mud-link { color: var(--eb-text); } .eb-seller-meta { font-size: 0.78rem; color: var(--eb-muted); } .eb-seller-visit, .eb-seller-strip a.eb-seller-visit { font-weight: 700; font-size: 0.86rem; color: var(--eb-orange-ink); text-decoration: none; cursor: pointer; white-space: nowrap; } .eb-seller-visit:hover { color: var(--eb-orange-hover); } /* ---- Static prose pages (privacy / cookies) ------------------------------- */ /* One prose system for every long-form surface — legal pages, article bodies, guides. (Two rival .eb-prose blocks used to coexist in this file, ~2,300 lines apart; each half-won the cascade, so neither surface rendered as authored. This is the only definition now.) Measure: 48em — about 806px on the guide body, deliberately wider than the 718px it started at. The history matters, because the obvious "fix" here is wrong. This was `70ch`, which is not 70 characters: `ch` is the advance of the "0" glyph, and in Schibsted Grotesk that is 10.26px against 7.68px for average running text, so `70ch` actually carried ~93 characters per line. Chasing the textbook 45–75 window took it to 32em and then 36em, and both were worse in the only way that counts — a long guide became a thin spine down the middle of a 1240px page, and a narrow column makes a 2,400-word article taller, not shorter. Scroll length was the complaint; narrowing the column is the one change guaranteed to increase it. So this is set for the page, not for the guideline. `em` remains the unit because it tracks the element's own font-size, letting one declaration govern the 0.95rem legal pages and the 1.05rem guide body together. Long lines are made readable here by leading rather than by measure: the guide body runs line-height 1.78, which keeps the return sweep easy to land. If this is ever revisited, the lever for "reads too dense" is subheads, images and callouts — the things that break a column into landmarks — not a narrower ribbon of text. */ .eb-prose { max-width: 48em; color: var(--eb-body); font-size: 0.95rem; line-height: 1.7; } .eb-prose > *:first-child { margin-top: 0; } .eb-prose > *:last-child { margin-bottom: 0; } .eb-prose h1 { font-family: var(--eb-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.03em; text-transform: none; color: var(--eb-text); margin: 0 0 24px; } .eb-prose h2 { font-family: var(--eb-display); font-weight: 800; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.02em; text-transform: none; color: var(--eb-text); margin: 36px 0 12px; } .eb-prose h3 { font-family: var(--eb-display); font-weight: 700; font-size: 1.2rem; color: var(--eb-text); margin: 28px 0 10px; } .eb-prose h4 { font-family: var(--eb-display); font-weight: 700; font-size: 1.05rem; color: var(--eb-text); margin: 22px 0 8px; } .eb-prose p { margin: 0 0 18px; } .eb-prose ul, .eb-prose ol { margin: 0 0 18px; padding-left: 24px; } .eb-prose li { margin-bottom: 6px; } .eb-prose a { color: var(--eb-orange-ink); text-decoration: underline; text-underline-offset: 2px; } .eb-prose a:hover { color: var(--eb-orange-hover); } .eb-prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0 20px; } .eb-prose blockquote { margin: 0 0 20px; padding: 4px 0 4px 20px; border-left: 3px solid var(--eb-orange); color: var(--eb-text); } .eb-prose code { background: var(--eb-surface-2); border: 1px solid var(--eb-border); border-radius: 6px; padding: 1px 6px; font-size: 0.9em; } .eb-prose pre { background: var(--eb-surface-2); border: 1px solid var(--eb-border); border-radius: 10px; padding: 16px; overflow-x: auto; margin: 0 0 20px; } .eb-prose pre code { background: none; border: none; padding: 0; } .eb-prose hr { border: none; border-top: 1px solid var(--eb-border); margin: 28px 0; } .eb-prose table { width: 100%; border: 1px solid var(--eb-border); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; margin: 14px 0; } .eb-prose table th { background: var(--eb-surface-2); color: var(--eb-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; text-align: left; padding: 10px 14px; } .eb-prose table td { font-size: 0.88rem; color: var(--eb-body); padding: 10px 14px; border-top: 1px solid var(--eb-border); vertical-align: top; } /* ---- Footer --------------------------------------------------------------- */ /* Sticky-footer shell. On a short page — a store-less My Animals ends around y=250 — the footer used to run y=400–570 with 330px of bare charcoal below it, reading as a floating slab rather than the end of the page. The shell fills the viewport and the main column takes up the slack, so the footer sits either at the bottom of the fold or below real content, never mid-air. min-height counts the app-bar padding Mud puts on this element (border-box), so this adds no scrollbar to pages that already fill the screen. */ .mud-main-content { display: flex; flex-direction: column; min-height: 100vh; } .mud-main-content > .eb-page { flex: 1 0 auto; } .eb-footer { background: var(--eb-bg); border-top: 1px solid var(--eb-border); padding: 48px 0 40px; margin-top: 56px; } /* Two blocks, not a spacer-pushed row: the old flex + left a 406px void at 1440 between a 70px mark and the link row, so the footer read as two unrelated fragments. Two equal tracks give each block a half to fill, so the separation is the gap between two columns of content rather than slack pushing a strip against the right edge — a content-sized second track reproduced the same void at 570px. Collapses to one column without a media query fighting a spacer. */ .eb-footer-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 32px 64px; } .eb-footer-brand-block { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; /* Wide enough to keep the one-line legal notice off a second line at its 0.75rem size. */ max-width: 46ch; } .eb-footer-brand { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 64px; text-decoration: none; } .eb-footer-mark { display: block; height: 64px; width: auto; } .eb-footer-legal { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--eb-muted); } .eb-footer-mark--light { display: none; } [data-theme="light"] .eb-footer-mark--dark { display: none; } [data-theme="light"] .eb-footer-mark--light { display: block; } /* Columns, not a wrapping row. The links arrive from the CMS as one flat list, and a flex-wrap row left a ragged right edge at every width (4+4 at 390px, one long stripe at 1440). A fixed column count aligns both edges and gives the list a shape the CMS can grow into. Four fractions here so the list fills its half of the footer as a band instead of a narrow right-hand strip. */ .eb-footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 2px 24px; font-size: 0.8rem; } /* MudLink renders Color.Primary, whose .mud-primary-text carries !important — so the plain `.eb-footer-links a { color: var(--eb-muted) }` above never applied and all eight legal links rendered in the brand orange. Eight saturated links in the quietest region of the page is the One Orange Rule inverted: the footer shouted louder than the price on a listing card. */ /* Scoped through .eb-footer for specificity, not for reach: the light-theme rule at line ~355 (`[data-theme="light"] .mud-link.mud-primary-text`) is 0-3-0 !important, so a 0-2-1 selector won on dark and lost on light — the links came back orange the moment the theme flipped. */ .eb-footer .eb-footer-links a, .eb-footer .eb-footer-links a.mud-link { color: var(--eb-muted) !important; /* Give the legal links a comfortable tap target on mobile (they measured 18px tall). */ display: inline-flex; align-items: center; min-height: 32px; } .eb-footer .eb-footer-links a:hover, .eb-footer .eb-footer-links a.mud-link:hover { color: var(--eb-text) !important; } /* A menu item with children renders as a titled column: it takes one track of .eb-footer-links, so four CMS groups become the footer's four columns and each column reads top-to-bottom as one subject. Loose ungrouped links still flow into the same tracks around them. It stays a grid rather than a flex column so a group wider than ~300px (few groups, wide viewport) flows into two internal columns instead of a single-file ladder. That ladder is what the eleven species categories produced before they were removed: 363px-wide rows each holding one link. */ .eb-footer-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 24px; align-content: start; } /* Sentence case, not the uppercase this carried before — The No-Shouting Rule reserves uppercase for table headers and the hero eyebrow, and a footer column head is neither. */ .eb-footer-group-title { /* Full width, or the heading becomes the first cell of its own link grid. */ grid-column: 1 / -1; color: var(--eb-text) !important; font-weight: 700; letter-spacing: -0.01em; font-size: 0.78rem; margin-bottom: 2px; } /* Between the phone breakpoint and desktop the half-track is too narrow for four link columns ("Acceptable Use" alone needs ~99px), so step down to two while the two blocks stay side by side. Columns that flow, not a grid that locks rows. As a 2-track grid each group is a grid item, so both groups on a row take the height of the taller one: Selling has four links to Company's three, and the difference showed as a void under "News" — twice, once per row, and 44px of it on a phone. Nothing is misaligned there, which is exactly why it reads as broken rather than as spacing. Multi-column packs the four groups into two continuous columns instead, so the only vertical space left is the margin below each group. It also reorders them column-major, which is the right reading order for a stack of subject lists. Above this width the grid is still correct: four groups in four tracks is one row, and a row of one cannot lock anything. */ @media (max-width: 1023.98px) { .eb-footer-links { display: block; column-count: 2; column-gap: 20px; } /* break-inside is what keeps a heading with its links; without it a column can break between "Legal" and "Terms". One internal track, explicitly: the base rule's auto-fill minimum is 150px, which a group inside a 136px column at 320px cannot honour — it kept its 150px and ate the column gap. There is no room for a second internal column at these widths anyway. */ .eb-footer-group { break-inside: avoid; grid-template-columns: 1fr; margin-bottom: 18px; } .eb-footer-group:last-child { margin-bottom: 0; } /* Loose ungrouped links (a CMS footer link with no parent) are the one thing multi-column cannot flow safely: as inline-flex children of a block they would run together on a line. */ .eb-footer-links > a, .eb-footer-links > a.mud-link { display: flex; } } @media (max-width: 767.98px) { .eb-footer { margin-top: 40px; padding: 36px 0 max(32px, env(safe-area-inset-bottom)); } /* One column: brand block, then the links beneath it. */ .eb-footer-inner { grid-template-columns: 1fr; gap: 28px; } .eb-footer-brand-block { max-width: none; } /* The two columns and their flow come from the tablet block above; a phone only changes the type size, which buys back what the narrower measure costs in legibility. */ .eb-footer-links { font-size: 0.85rem; } /* .mud-link is repeated here on purpose: the base rule needs it to beat MudBlazor's !important colour, and a media query adds no specificity — without it the 44px phone tap target loses to the base 32px. */ .eb-footer .eb-footer-links a, .eb-footer .eb-footer-links a.mud-link { min-height: 44px; } } /* The narrowest phones keep both columns. They used to drop to one, on the grounds that two fixed tracks put "Acceptable Use" a few pixels from "Animal Welfare" — but the cost was a 734px footer at 320px, a full screen and a half of links under a page the visitor has already finished reading. Multi-column tracks size themselves from the gap, and the longest label measures ~100px against a 143px column, so the collision the old rule paid for is not there. The gap tightens rather than the type shrinking: 0.85rem is already the floor for a tap target you are meant to hit while holding the phone one-handed. */ @media (max-width: 359.98px) { .eb-footer-links { column-gap: 14px; } } /* ---- Buttons -------------------------------------------------------------- */ .mud-button-root { border-radius: 999px; text-transform: none; font-weight: 700; letter-spacing: 0; } .mud-button-filled { box-shadow: none; border: none; } /* !important on the text colour, deliberately: a MudButton with an Href renders as an , and global-styles.css colours content links orange from `body.abp-application-layout main a:not(.btn)…:not(.mud-button-root)…` — six classes deep once the :not() arguments count, so it outranks this single-class rule by a mile and loads later. That leaves the label orange on an orange fill: an unreadable button. The :not(.mud-button-root) exclusion there is supposed to prevent it, but relying on a defensive exclusion in a different stylesheet to keep 13 Href'd primary buttons legible is one edit (or one stale bundle) away from breaking. Text on orange is near-black in both themes, so pin it here and stop the fight. */ .mud-button-filled-primary { color: var(--eb-on-orange) !important; font-weight: 800; box-shadow: none; border-radius: 12px; background-color: var(--eb-orange); } .mud-button-filled-primary:hover { box-shadow: 0 0 32px rgba(232, 99, 10, 0.32); background-color: var(--eb-orange-hover); } /* The same fight, for the buttons that aren't MudButtons. `.eb-store-cta`, `.eb-share-btn` and `.eb-social-btn` are bespoke elements, so the `:not(.mud-button-root)` exclusion above does not cover them and the content-link rule repaints their label orange: .eb-store-cta orange label on an orange fill — 1.00:1 on dark, 1.83:1 on light. Invisible. .eb-share-btn orange at rest (should be quiet) and orange-on-orange once hovered, which .eb-social-btn inverts the documented "quiet by default, orange on hover" behaviour. Rule of thumb for anything added later: an that carries its own background is a button, and the content-link colour will reach it. Pin its label here rather than adding another :not() to a list in a different stylesheet. Text on orange is near-black in both themes. */ .eb-store-cta, .eb-store-cta:hover, .eb-share-btn:hover, .eb-social-btn:hover { color: var(--eb-on-orange) !important; } .eb-share-btn, .eb-social-btn { color: var(--eb-text) !important; } .mud-button-outlined { border: 1px solid var(--eb-border-2); color: var(--eb-text); border-radius: 12px; } .mud-button-outlined:hover { border-color: var(--eb-orange); color: var(--eb-orange-ink); background-color: transparent; } /* DESIGN.md §5 Buttons: "Outlined: transparent fill, 1px Hairline Strong border, white text; hover turns border and text orange." Mud's -primary modifier paints both orange at rest, so any button passing Color.Primary rendered permanently in its own hover state — and roughly half the outlined buttons in the app pass it, which is what made the two treatments read as two different components. Corrected here rather than at the eleven call sites, so the twelfth cannot reintroduce it. !important because Mud sets these with !important of its own. */ .mud-button-outlined.mud-button-outlined-primary { border-color: var(--eb-border-2) !important; color: var(--eb-text) !important; } .mud-button-outlined.mud-button-outlined-primary:hover { border-color: var(--eb-orange) !important; color: var(--eb-orange-ink) !important; } /* ---- Cards / tables / inputs ---------------------------------------------- */ .mud-card { box-shadow: none; border: 1px solid var(--eb-border); border-radius: 14px; background-color: var(--eb-surface); } .mud-card + .mud-card, .mud-card.mt-4 { box-shadow: none; } .mud-paper { background-color: var(--eb-surface); color: var(--eb-text); } .mud-table { border: 1px solid var(--eb-border); border-radius: 14px; box-shadow: none; overflow: hidden; background-color: var(--eb-surface); } .mud-table-head th, .mud-table-cell.mud-table-head-cell { background-color: var(--eb-surface-2); color: var(--eb-muted) !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; } .mud-table-head th .mud-button-root, .mud-table-head th .mud-typography { color: var(--eb-muted) !important; } /* outlined inputs use the more-visible border, orange on focus */ .mud-input-outlined-border { border-color: var(--eb-border-2) !important; border-width: 1px !important; border-radius: 10px; } .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border { border-color: var(--eb-orange) !important; border-width: 2px !important; } .mud-input-root { color: var(--eb-text); } /* ---- White form inputs -------------------------------------------------- */ /* Tony's call (2026-07-15): outlined fields on the dark theme still read as low-contrast, so the input body is solid white with dark text — fields pop as distinct white cards. Labels/helper text that sit OUTSIDE the box stay light (they're over the dark card, handled by the theme defaults). */ .mud-input.mud-input-outlined { background-color: #FFFFFF; border-radius: 10px; } /* value / placeholder / textarea / select display text — dark on white (2-class selector beats the .mud-input-root white-text rule above) */ .mud-input.mud-input-outlined input, .mud-input.mud-input-outlined textarea, .mud-input.mud-input-outlined .mud-input-slot { color: #0C0C0E; } .mud-input.mud-input-outlined input::placeholder, .mud-input.mud-input-outlined textarea::placeholder { color: #6A6A72; opacity: 1; } /* adornments (£, g), select arrow, clear + spin-button icons — dark on white */ .mud-input.mud-input-outlined .mud-input-adornment, .mud-input.mud-input-outlined .mud-input-adornment-text, .mud-input.mud-input-outlined .mud-input-adornment .mud-icon-root, .mud-input.mud-input-outlined .mud-icon-button .mud-icon-root { color: #55555C; } /* hairline around the white body; orange on focus. Token, not a literal: on light theme this is the only thing that marks the field (see --eb-input-border). */ .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--eb-input-border) !important; } .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border { border-color: var(--eb-orange) !important; } /* floating label sits over the white body: dark at rest, orange on focus. When it shrinks it straddles the top border — half of it rides above the white box over the dark card. A white background chip (the Material "notch") keeps the dark label text on white in both halves, so it never half-vanishes. */ /* Stacked labels — the caption sits ABOVE the white box as a separate label, not floating in a notch on the border, so it reads as a distinct label and never overlaps the field edge. Text fields with no Label render no label element, so :has() leaves those (e.g. toolbar search) untouched. */ .mud-input-control:has(.mud-input-label-outlined) { margin-top: 24px; } /* MudBlazor's dense variant sets margin-top:8px at higher specificity (.mud-input-control-margin-dense.mud-input-outlined-with-label), which collapses the headroom the stacked caption needs while the label's -22px lift still applies — that jams the caption against the box's top edge (the "squashed" filter-bar labels). Restore 24px for dense inputs so the caption clears the field on every dense surface (Browse/Equipment filters). */ .mud-input-control.mud-input-control-margin-dense:has(.mud-input-label-outlined) { margin-top: 24px; } .mud-input-label.mud-input-label-outlined { /* Static caption ABOVE the box (not floating in a notch). Sized and weighted directly to the design-system label spec (0.78rem/600/muted — matching .eb-active-label and every other caption) instead of scaling 1rem down, so the captions no longer read anaemic. !important beats MudBlazor's own float transform + its white text-primary recolour on shrink. */ font-size: 0.78rem !important; font-weight: 600 !important; line-height: 1.2; transform: translate(2px, -22px) !important; transform-origin: top left; color: var(--eb-muted) !important; background: transparent !important; padding: 0 !important; max-width: none !important; overflow: visible; } .mud-input-control:focus-within .mud-input-label.mud-input-label-outlined { color: var(--eb-orange-ink) !important; } /* close the outlined notch so the top border stays a continuous line */ .mud-input.mud-input-outlined .mud-input-outlined-border legend { max-width: 0 !important; } /* chips (status pills etc.) */ .mud-chip { font-weight: 700; border-radius: 999px; } .mud-chip.mud-chip-outlined { border-width: 1px; } /* rating stars in brand orange */ .mud-rating-item .mud-icon-root { color: var(--eb-orange-ink); } /* store / seller monogram avatars use the site body font */ .mud-avatar { font-family: var(--mud-typography-default-family); font-weight: 700; } /* tabs (store page) */ .mud-tabs-toolbar { border: 1px solid var(--eb-border); border-radius: 12px; background: var(--eb-surface); } .mud-tab { color: var(--eb-muted); } .mud-tab.mud-tab-active { color: var(--eb-text); font-weight: 800; } .mud-tab-slider { background-color: var(--eb-orange) !important; height: 3px; } /* alerts */ .mud-alert { border: 1px solid var(--eb-border); border-radius: 12px; box-shadow: none; background-color: var(--eb-surface); color: var(--eb-text); } /* expansion panels (store policy) */ .mud-expand-panel { border: 1px solid var(--eb-border); border-radius: 12px; box-shadow: none; overflow: hidden; background-color: var(--eb-surface); } /* Dense panels zero the content's vertical padding, so the text jams against the top/bottom of the card — restore breathing room below (and a little above). */ .mud-expand-panel .mud-expand-panel-content { padding-top: 8px !important; padding-bottom: 16px !important; } /* ---- Pager ------------------------------------------------------------------ Our own control rather than MudPagination (see Pager.razor for why), wearing the same pill the Mud one was themed into below, so nothing about the page changes except how many numbers show. */ .eb-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; } .eb-pager-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--eb-border); border-radius: 999px; background: transparent; color: var(--eb-text); font-family: inherit; font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease; } .eb-pager-btn:hover:not(:disabled) { border-color: var(--eb-orange); } /* Disabled rather than removed: the ends of the run are where the arrow count would otherwise change and shift every other control sideways under the thumb. */ .eb-pager-btn:disabled { opacity: 0.4; cursor: default; } .eb-pager-btn--on, .eb-pager-btn--on:hover { background-color: var(--eb-orange); border-color: var(--eb-orange); color: var(--eb-on-orange); } /* Where the window sits in the whole run - the fact the anchored last-page number used to give away for free. */ .eb-pager-of { margin-left: 6px; color: var(--eb-muted); font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 419.98px) { .eb-pager { gap: 4px; } .eb-pager-btn { min-width: 36px; height: 36px; padding: 0 6px; } /* The count drops to its own line rather than squeezing the controls it describes. */ .eb-pager-of { flex: 1 0 100%; margin: 2px 0 0; text-align: center; } } /* pagination */ .mud-pagination-item .mud-button-root { border: 1px solid var(--eb-border); border-radius: 999px; font-weight: 700; color: var(--eb-text); } .mud-pagination-item .mud-button-root:hover { border-color: var(--eb-orange); } .mud-pagination-item .mud-button-root.mud-button-filled-primary { background-color: var(--eb-orange); color: var(--eb-on-orange); border-color: var(--eb-orange); } /* ============================================================ Admin / back-office chrome — bring the ABP module pages (Identity, CMS, OpenIddict, Settings, etc.) in line with the Immersive dark surfaces. ============================================================ */ .mud-dialog { border: 1px solid var(--eb-border); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important; overflow: hidden; background-color: var(--eb-surface); } .mud-dialog-title { font-family: var(--eb-display); font-weight: 800; letter-spacing: -0.02em; color: var(--eb-text); } .mud-dialog .mud-tabs-toolbar, .mud-table .mud-tabs-toolbar { border: none; border-radius: 0; background: transparent; } /* breadcrumbs under the admin PageHeader */ .mud-breadcrumbs { padding-inline: 0; } .mud-breadcrumb-item a, .mud-breadcrumb-item .mud-typography { color: var(--eb-muted); font-weight: 600; } .mud-breadcrumb-item a:hover { color: var(--eb-orange-ink); } .mud-breadcrumbs .mud-icon-root { color: var(--eb-orange-ink); } /* toggles/switches use the brand accent when on */ .mud-switch-input:checked + .mud-switch-track { background-color: var(--eb-orange); } /* menus / dropdowns (nav "Admin", user menu, data-grid row actions) */ .mud-popover.mud-popover-open.mud-paper { border: 1px solid var(--eb-border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important; overflow: hidden; background-color: var(--eb-surface); } /* Back-office navigation can contain dozens of permission-filtered destinations. Keep the popover inside the visible viewport and let touch/wheel users reach all of them. */ .mud-popover.mud-popover-open.mud-paper.eb-scrollable-nav-popover { max-height: calc(100vh - 76px); max-height: calc(100dvh - 64px - max(12px, env(safe-area-inset-bottom))); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; } /* --- Species nav dropdowns ----------------------------------------------- The panel used to open at y=51 while the app bar ends at 65: MudMenu anchors to its own root, and that root was the 37px pill sitting centred in a 64px bar, so 14px of the panel overlapped the bar and cut its hairline. Stretching the *anchor* to the toolbar's full height fixes it at the source — the pill stays 37px and centred, but the element the popover measures from now ends where the bar does. Nothing about the visible mark changes. */ .eb-topnav .eb-nav-links { align-self: stretch; } .eb-topnav .eb-nav-links > .mud-menu { align-self: stretch; display: flex; align-items: center; } /* Then hang it clear of the bar rather than flush to it: this panel is a rounded card with its own shadow, and rounded top corners butted against a straight edge read as a rendering fault. The gap also leaves the bar's hairline intact, which is what tells you the panel belongs to the bar instead of replacing it. */ .mud-popover.mud-popover-open.mud-paper.eb-nav-popover { margin-top: 6px; min-width: 208px; } /* One gutter for the whole panel. The headings were indented 16px and their own items 12px, so a group label never lined up with the destinations underneath it — the single loudest reason the panel read as cramped, ahead of its actual width. 36px rows rather than 32: this is a pointer menu of seven destinations, not a dense data list. */ /* The row you are standing on, marked the way the bar marks its active section — full ink and the heavier weight. The aria-current that drives it is on the same element, so the sighted and the announced states cannot drift apart. */ .eb-nav-popover [aria-current="page"] { color: var(--eb-text); font-weight: 800; } .eb-nav-popover .mud-menu-item, .eb-nav-popover .mud-list-item { min-height: 36px; padding-inline: 16px; } /* Section headings inside the CMS / Admin / mobile dropdowns. The back-office menu runs long enough that a small caption alone reads as another row — give each group a hairline rule above it so the boundaries are unmissable. */ .eb-menu-section { display: block; margin-top: 6px; padding: 10px 16px 4px; border-top: 1px solid var(--eb-border); color: var(--eb-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; } /* No rule above the first group, and none between a group and its immediate sub-group (Administration → Identity management) — that would read as two breaks. */ .eb-menu-section:first-child, .eb-menu-section + .eb-menu-section { margin-top: 0; border-top: 0; } .eb-menu-section + .eb-menu-section { padding-top: 2px; } .mud-list-item { color: var(--eb-text); } .mud-list-item:hover { background-color: var(--eb-tint-bg); } /* tree view (settings groups, file-management folders) selection */ .mud-treeview-item-content.mud-treeview-item-selected { background-color: var(--eb-tint-bg); } /* CmsKit Menu Management tree (/Cms/Menus/Items) — ABP 10.6.0 ships this page, and only this page, with MudTreeViewItem compiled as an unresolved tag, so the DOM carries literal // elements instead of components. MudBlazor's own tree CSS never matches them, every level renders inline and flat, and no expander exists. Restore block layout and one indent per level so the hierarchy is readable. Real MudTreeViews (Settings, File Management) emit none of these element names, so these rules cannot reach them. Delete this block once ABP fixes the package. */ .mud-treeview global\:\:mudblazor\.mudtreeviewitem, .mud-treeview bodycontent, .mud-treeview childcontent { display: block; } /* 16 + 15 + 1px border = the parent's icon (20px) + gap-3 (12px), so a child's icon lands under its parent's label text. */ .mud-treeview childcontent { margin-left: 16px; padding-left: 15px; border-left: 1px solid var(--eb-border); } /* ---- ABP cookie-consent banner → Night Vivarium ------------------------- */ /* ABP renders it as a MudPaper with an inline primary (orange) background and a filled-info (blue) Accept button, inside a fixed wrapper at z-index 999999. Repaint it as a dark surface with an orange Accept, overriding ABP's inline styles. */ [style*="z-index: 999999"] > .mud-paper { background-color: var(--eb-surface) !important; color: var(--eb-body) !important; border-top: 1px solid var(--eb-border); } /* Same element, stated again at higher specificity, because two of our own rules collide on it. ABP renders this bar as `background-color: var(--mud-palette-primary); color: white` inline — byte-identical to what Volo.Chat writes on an own-message bubble. The chat rule far below (`.mud-paper[style*="mud-palette-primary"][style*="color: white"]`, ~line 8920) therefore also matches the consent bar, and at (0,3,0) it beats the (0,2,0) rule above even though both are !important — so the bar rendered in the chat bubble's 12%-alpha orange tint and read as transparent over the page. Repeating the attribute matches here takes this to (0,4,0), which wins outright and is immune to source order. The chat rule is deliberately left alone: it fixes a real 3.38:1 contrast failure on white-on-orange that DESIGN.md forbids by name, so narrowing it risks reintroducing that. The broad rule above is kept as the fallback for when ABP's inline style does not carry both fragments — then neither this rule nor the chat rule matches, and it applies unopposed. */ [style*="z-index: 999999"] > .mud-paper[style*="mud-palette-primary"][style*="color: white"] { background-color: var(--eb-surface) !important; color: var(--eb-body) !important; border: none; border-top: 1px solid var(--eb-border); } [style*="z-index: 999999"] .mud-paper p { color: var(--eb-body) !important; } [style*="z-index: 999999"] .mud-paper a, [style*="z-index: 999999"] .mud-paper a.text-white { color: var(--eb-orange-ink) !important; } [style*="z-index: 999999"] .mud-button-filled-info { background-color: var(--eb-orange) !important; color: var(--eb-on-orange) !important; box-shadow: none !important; } [style*="z-index: 999999"] .mud-button-filled-info:hover { background-color: var(--eb-orange-hover) !important; } /* ============================================================ Browse critique fixes (2026-07-15): visible keyboard focus, grouped/collapsible filter bar, specialist card data, recovering empty state. ============================================================ */ /* ---- Keyboard focus: make it unmistakable ------------------------------- */ /* The bare :focus-visible rule near the top was out-specified by MudBlazor's own outline:none. These class-scoped rules win it back so keyboard/screen- reader users can always see where they are. */ .mud-button-root:focus-visible, .mud-icon-button:focus-visible, .mud-link:focus-visible, .eb-nav-item:focus-visible, .eb-clear-link:focus-visible, .eb-morph-help:focus-visible, .eb-filter-toggle:focus-visible, .eb-section-link:focus-visible, .mud-pagination-item .mud-button-root:focus-visible, .mud-chip:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--eb-orange) !important; outline-offset: 2px; } /* Outlined inputs never reliably got MudBlazor's .mud-focused class, so focus was invisible on the white fields. :focus-within fires whenever the real input is focused. */ .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--eb-orange) !important; border-width: 2px !important; } /* ---- Filter bar: clustering + mobile collapse --------------------------- */ /* Range pairs (£ from/to, weight from/to) read as one control, not two loose fields. */ .eb-filter-group { display: flex; gap: 4px; align-items: flex-start; } /* Mobile-only trigger; the bar itself collapses behind it so animals aren't pushed below a full-height filter wall on the first screen. */ .eb-filter-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--eb-surface); color: var(--eb-text); border: 1px solid var(--eb-border-2); border-radius: 12px; font-family: var(--eb-display); font-weight: 700; font-size: 0.92rem; padding: 12px 16px; margin-bottom: 16px; cursor: pointer; } .eb-filter-toggle:hover { border-color: var(--eb-orange); } /* "Show N results" — collapses the open mobile filter panel back to the grid. Full-bleed orange primary; the count updates live as filters change. */ .eb-filter-done { width: 100%; background: var(--eb-orange); color: var(--eb-on-orange); border: none; border-radius: 12px; font-family: var(--eb-display); font-weight: 800; font-size: 0.95rem; padding: 12px 16px; margin-top: 4px; cursor: pointer; transition: background 140ms ease; } .eb-filter-done:hover { background: var(--eb-orange-hover); } /* No tablet-width special case. There used to be one that placed each child in a named 12-column span, which collided silently the moment a category added a seventh control — Type and Maturity both landed in columns 4–8. Percentage bases replaced it and were worse in a different way: with only two fields per row they grew to 546px, a morph picker wider than the results beneath it. The base rules already wrap here and their max-width holds the fields at a readable size, so the right number of tablet rules is none. */ @media (max-width: 959.98px) { .eb-filter-bar { display: none; flex-direction: column; } .eb-filter-bar.eb-filter-bar--open { display: flex; } /* In column mode the desktop flex-basis (a width hint) is read as a height, ballooning single-child inputs like Keyword. Reset to content-height, full-width stacking — and reset the desktop max-width with it, or every dropdown stops 280px short of the panel edge. */ .eb-filter-bar > .mud-select, .eb-filter-bar > .mud-select.mud-autocomplete, .eb-filter-bar > .eb-filter-item--wide, .eb-filter-bar .eb-filter-item { flex: 0 0 auto; width: 100%; max-width: none; } .eb-filter-bar .eb-filter-group { width: 100%; } .eb-filter-bar .eb-seg { width: 100%; margin-top: 0; /* desktop label-headroom offset is meaningless in the stacked column */ } .eb-filter-bar .eb-seg-btn { flex: 1 1 0; } .eb-filter-bar .eb-more-btn { width: 100%; min-height: 44px; justify-content: center; margin-top: 0; } .eb-filter-bar .eb-filter-item--num { flex: 1; width: auto; max-width: none; } /* Desktop right-pins the sort with margin-left:auto, which in column layout strands it as a lone icon on its own row. On mobile make it a full-width labelled button in flow. */ .eb-filter-bar .eb-sort-slot { margin-left: 0; margin-top: 0; width: 100%; } .eb-filter-bar .eb-sort-btn, .eb-filter-bar .eb-sort-btn .mud-button-root { width: 100%; } .eb-filter-bar .eb-sort-btn .mud-button-root { min-height: 44px; } } /* ---- Result count + recovering empty state ----------------------------- */ .eb-results-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 20px 0 18px; } .eb-result-count { font-size: 0.86rem; font-weight: 700; color: var(--eb-body); } /* "Stores I follow" — a scope toggle, not a navigation control, so it wears the filter language: flat and hairline at rest, orange only once it is doing something. */ .eb-follow-filter { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--eb-border-2); border-radius: 999px; background: none; color: var(--eb-body); font-family: var(--eb-display); font-weight: 600; font-size: 0.8rem; padding: 5px 12px 5px 9px; cursor: pointer; white-space: nowrap; transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease; } .eb-follow-filter:hover { color: var(--eb-text); border-color: var(--eb-orange); } .eb-follow-filter--on { background: var(--eb-tint-bg); border-color: var(--eb-orange); color: var(--eb-orange-on-tint); } .eb-loading-bar { border-radius: 999px; } .eb-empty { border: 1px solid var(--eb-border); border-radius: 14px; background: var(--eb-surface-2); padding: 44px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; } .eb-empty-title { font-family: var(--eb-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--eb-text); } .eb-empty-hint { color: var(--eb-muted); font-size: 0.9rem; margin-top: 6px; } /* ---- Specialist card data: sex · weight · maturity, freshness ---------- */ /* A proper spec strip so the specialist data (what a keeper scans first) reads as first-class, not an afterthought below the title. */ /* Two groups: the spec data left, the compare toggle right (Browse and morph pages only). The data truncates before the control shrinks — worst realistic case is "♀ · 1,250 g · Juvenile" plus the toggle at ~239px in the 256px body, so the ellipsis is a guard, not a normal state. */ .eb-card-spec { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px; /* Reserved so the row is the same height whatever it holds: bare text measures 18.8px, text plus a sex icon 19.2px, and the compare toggle 25.8px (its 4px padding on an 18px line). Without this, a Browse card stood 7px taller than the identical card on a store or favourites page, which is the last of the mismatch this row's restructure set out to remove. */ min-height: 26px; font-size: 0.82rem; font-weight: 600; color: var(--eb-body); margin: 4px 0 7px; } /* Sex glyphs are colour-coded — a deliberate, recorded exception to the One Orange rule: male blue / female pink read instantly on a grid where the glyph alone must be parsed. */ .eb-sex { font-weight: 800; font-size: 1.2rem; color: var(--eb-text); line-height: 1; } .eb-sex--m { color: var(--eb-sex-m); text-shadow: 0 0 10px rgba(90, 178, 255, 0.35); } .eb-sex--f { color: var(--eb-sex-f); text-shadow: 0 0 10px rgba(255, 116, 180, 0.35); } .eb-spec-dot { color: var(--eb-muted); } .eb-spec-maturity { color: var(--eb-muted); } /* Category label on mixed-species grids (store page, favourites). Muted like the rest of the strip on purpose — it answers "what am I looking at", it isn't a filter and isn't a morph, so it must not compete with the chips or the price. */ .eb-spec-category { color: var(--eb-muted); } /* Free-text morph line for categories with no catalogue. Reads as the seller's own words where chips would otherwise sit, without borrowing the chip's implied "click to filter". */ .eb-morph-text { color: var(--eb-muted); } /* Group heading inside the category select (Snakes / Lizards). MudBlazor 9.7 has no select-item group, so these are disabled items — this makes them read as headings rather than dead options. */ .eb-select-heading { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--eb-muted); } /* "New" freshness chip — a solid orange badge (orange means "notable" here) with a soft heat-lamp glow so freshness pops off the photo; top-left, clear of the bottom-right sale badge. */ .eb-new-badge { position: absolute; top: 10px; left: 10px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--eb-on-orange); background: var(--eb-orange); border: none; border-radius: 7px; padding: 4px 10px; box-shadow: 0 3px 14px rgba(232, 99, 10, 0.5); } /* ---- Active trait chips: force the documented tint fill ---------------- */ .eb-chip-trait.mud-chip, .eb-chip-trait.mud-chip.mud-chip-outlined { background-color: var(--eb-tint-bg) !important; border: 1px solid var(--eb-tint-border) !important; color: var(--eb-orange-on-tint) !important; } .eb-chip-trait .mud-chip-close-button .mud-icon-root { color: var(--eb-orange-ink); } /* Removable morph filter (MorphChip). A real