@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 { --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; --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); --eb-bg: #0C0C0E; --eb-page-bg: #1A1A20; --eb-surface: #24242A; --eb-surface-2: #111114; --eb-border: #2C2C33; --eb-border-2: #3A3A40; --eb-seg-track: #33333B; --eb-seg-hover: #40404A; --eb-text: #FFFFFF; --eb-body: #B8B8C0; --eb-muted: #9C9CA6; --eb-orange: #E8630A; --eb-orange-hover: #F47B2A; --eb-orange-on-dark: #E8630A; --eb-orange-on-dark-hover: #F47B2A; --eb-on-orange-on-dark: #0C0C0E; --eb-orange-ink: #E8630A; --eb-on-photo: #FFFFFF; --eb-on-photo-dim: #9C9CA6; --eb-on-orange: #0C0C0E; --eb-photo-bg: #1E1E22; --eb-input-border: #C9C9D0; --eb-nav-ink: rgba(255, 255, 255, 0.75); --eb-nav-hover-bg: rgba(255, 255, 255, 0.08); --eb-float-glass: rgba(12, 12, 14, 0.92); --eb-sex-m: #5AB2FF; --eb-sex-f: #FF74B4; --eb-sex-m-on-dark: #5AB2FF; --eb-sex-f-on-dark: #FF74B4; --eb-welfare-accent: #E8A33D; --eb-welfare-border: rgba(232, 163, 61, 0.38); --eb-welfare-bg: rgba(232, 163, 61, 0.10); --eb-recessive-accent: #AF81F8; --eb-rrk-amber: #D39226; --eb-error: #F4644C; --eb-success: #22C07C; --eb-warning: #E0A422; --eb-info: #4C8DFF; --eb-tint-bg: rgba(232, 99, 10, 0.12); --eb-tint-border: rgba(232, 99, 10, 0.4); --eb-orange-on-tint: #F47B2A; --eb-display: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif; --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); --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%); } :root:root[data-theme="light"] { --mud-palette-black: rgba(39,44,52,1); --mud-palette-white: rgba(255,255,255,1); --mud-palette-primary: rgba(89,74,226,1); --mud-palette-primary-rgb: 89,74,226; --mud-palette-primary-text: rgba(255,255,255,1); --mud-palette-primary-darken: rgb(62,44,221); --mud-palette-primary-lighten: rgb(118,106,231); --mud-palette-primary-hover: rgba(89,74,226,0.058823529411764705); --mud-palette-secondary: rgba(255,64,129,1); --mud-palette-secondary-rgb: 255,64,129; --mud-palette-secondary-text: rgba(255,255,255,1); --mud-palette-secondary-darken: rgb(255,31,105); --mud-palette-secondary-lighten: rgb(255,102,153); --mud-palette-secondary-hover: rgba(255,64,129,0.058823529411764705); --mud-palette-tertiary: rgba(30,200,165,1); --mud-palette-tertiary-rgb: 30,200,165; --mud-palette-tertiary-text: rgba(255,255,255,1); --mud-palette-tertiary-darken: rgb(25,169,140); --mud-palette-tertiary-lighten: rgb(42,223,187); --mud-palette-tertiary-hover: rgba(30,200,165,0.058823529411764705); --mud-palette-info: rgba(33,150,243,1); --mud-palette-info-rgb: 33,150,243; --mud-palette-info-text: rgba(255,255,255,1); --mud-palette-info-darken: rgb(12,128,223); --mud-palette-info-lighten: rgb(71,167,245); --mud-palette-info-hover: rgba(33,150,243,0.058823529411764705); --mud-palette-success: rgba(0,200,83,1); --mud-palette-success-rgb: 0,200,83; --mud-palette-success-text: rgba(255,255,255,1); --mud-palette-success-darken: rgb(0,163,68); --mud-palette-success-lighten: rgb(0,235,98); --mud-palette-success-hover: rgba(0,200,83,0.058823529411764705); --mud-palette-warning: rgba(255,152,0,1); --mud-palette-warning-rgb: 255,152,0; --mud-palette-warning-text: rgba(255,255,255,1); --mud-palette-warning-darken: rgb(214,129,0); --mud-palette-warning-lighten: rgb(255,167,36); --mud-palette-warning-hover: rgba(255,152,0,0.058823529411764705); --mud-palette-error: rgba(244,67,54,1); --mud-palette-error-rgb: 244,67,54; --mud-palette-error-text: rgba(255,255,255,1); --mud-palette-error-darken: rgb(242,28,13); --mud-palette-error-lighten: rgb(246,96,85); --mud-palette-error-hover: rgba(244,67,54,0.058823529411764705); --mud-palette-dark: rgba(66,66,66,1); --mud-palette-dark-rgb: 66,66,66; --mud-palette-dark-text: rgba(255,255,255,1); --mud-palette-dark-darken: rgb(46,46,46); --mud-palette-dark-lighten: rgb(87,87,87); --mud-palette-dark-hover: rgba(66,66,66,0.058823529411764705); --mud-palette-text-primary: rgba(66,66,66,1); --mud-palette-text-primary-rgb: 66,66,66; --mud-palette-text-secondary: rgba(0,0,0,0.5372549019607843); --mud-palette-text-secondary-rgb: 0,0,0; --mud-palette-text-disabled: rgba(0,0,0,0.3764705882352941); --mud-palette-text-disabled-rgb: 0,0,0; --mud-palette-action-default: rgba(0,0,0,0.5372549019607843); --mud-palette-action-default-hover: rgba(0,0,0,0.058823529411764705); --mud-palette-action-disabled: rgba(0,0,0,0.25882352941176473); --mud-palette-action-disabled-background: rgba(0,0,0,0.11764705882352941); --mud-palette-surface: rgba(255,255,255,1); --mud-palette-surface-rgb: 255,255,255; --mud-palette-background: rgba(255,255,255,1); --mud-palette-background-gray: rgba(245,245,245,1); --mud-palette-drawer-background: rgba(255,255,255,1); --mud-palette-drawer-text: rgba(66,66,66,1); --mud-palette-drawer-icon: rgba(97,97,97,1); --mud-palette-appbar-background: rgba(89,74,226,1); --mud-palette-appbar-text: rgba(255,255,255,1); --mud-palette-lines-default: rgba(0,0,0,0.11764705882352941); --mud-palette-lines-inputs: rgba(189,189,189,1); --mud-palette-table-lines: rgba(224,224,224,1); --mud-palette-table-striped: rgba(0,0,0,0.0196078431372549); --mud-palette-table-hover: rgba(0,0,0,0.0392156862745098); --mud-palette-divider: rgba(224,224,224,1); --mud-palette-divider-rgb: 224,224,224; --mud-palette-divider-light: rgba(0,0,0,0.8); --mud-palette-skeleton: rgba(0,0,0,0.10980392156862745); --mud-palette-gray-default: #9E9E9E; --mud-palette-gray-light: #BDBDBD; --mud-palette-gray-lighter: #E0E0E0; --mud-palette-gray-dark: #757575; --mud-palette-gray-darker: #616161; --mud-palette-overlay-dark: rgba(33,33,33,0.4980392156862745); --mud-palette-overlay-light: rgba(255,255,255,0.4980392156862745); --mud-palette-border-opacity: 1; --mud-ripple-color: var(--mud-palette-text-primary); --mud-native-html-color-scheme: light; --eb-bg: #FFFFFF; --eb-page-bg: #F4F4F6; --eb-surface: #FFFFFF; --eb-surface-2: #EDEDF1; --eb-border: #E4E4E9; --eb-border-2: #CFCFD6; --eb-input-border: #8A8A94; --eb-nav-ink: rgba(23, 23, 26, 0.74); --eb-nav-hover-bg: rgba(0, 0, 0, 0.05); --eb-float-glass: rgba(248, 248, 250, 0.92); --eb-seg-track: #E7E7EC; --eb-seg-hover: #FFFFFF; --eb-text: #17171A; --eb-body: #44454D; --eb-muted: #63636B; --eb-orange-ink: #B84A08; --eb-orange-hover: #9E3F06; --eb-orange: #B84A08; --eb-on-orange: #FFFFFF; --eb-orange-on-tint: #A03F06; --eb-photo-bg: #ECECEF; --eb-sex-m: #1668C4; --eb-sex-f: #C42B78; --eb-welfare-accent: #9A6512; --eb-welfare-border: rgba(154, 101, 18, 0.30); --eb-welfare-bg: rgba(232, 163, 61, 0.13); --eb-recessive-accent: #7F45DE; --eb-error: #C4331C; --eb-success: #14794E; --eb-warning: #9A6A00; --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); --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-tertiary: #6E6E78; --mud-palette-tertiary-rgb: 110, 110, 120; --mud-palette-tertiary-text: #FFFFFF; --mud-palette-info: #2F6FDB; --mud-palette-info-rgb: 47, 111, 219; --mud-palette-info-text: #FFFFFF; --mud-palette-info-darken: #1F56B8; --mud-palette-info-lighten: #5A8FE6; --mud-palette-info-hover: rgba(47, 111, 219, 0.12); --mud-palette-success: #178A57; --mud-palette-success-rgb: 23, 138, 87; --mud-palette-success-text: #FFFFFF; --mud-palette-success-darken: #126C44; --mud-palette-success-lighten: #3AAE79; --mud-palette-success-hover: rgba(23, 138, 87, 0.12); --mud-palette-warning: #9A6A00; --mud-palette-warning-rgb: 154, 106, 0; --mud-palette-warning-text: #FFFFFF; --mud-palette-warning-darken: #7C5500; --mud-palette-warning-lighten: #B98620; --mud-palette-warning-hover: rgba(154, 106, 0, 0.12); --mud-palette-error: #C4331C; --mud-palette-error-rgb: 196, 51, 28; --mud-palette-error-text: #FFFFFF; --mud-palette-error-darken: #A32916; --mud-palette-error-lighten: #D65A45; --mud-palette-error-hover: rgba(196, 51, 28, 0.12); --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); --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; } [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-news-hero-title { color: var(--eb-on-photo) !important; } .eb-store-hero a.eb-store-follow { color: rgba(255, 255, 255, 0.9) !important; } .eb-store-hero a.eb-store-follow:hover, .eb-store-hero a.eb-store-follow:focus-visible { color: #fff !important; } a.eb-store-follow--sm { color: var(--eb-text) !important; } a.eb-store-follow--sm:hover, a.eb-store-follow--sm:focus-visible { color: var(--eb-orange-ink) !important; } [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; } [data-theme="light"] .eb-news-hero.has-cover .eb-news-readtime { color: var(--eb-on-photo-dim) !important; } [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; } [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); } [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: var(--eb-nav-ink); } [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: var(--eb-nav-hover-bg); } [data-theme="light"] .eb-bulk-state--draft, [data-theme="light"] .eb-fb-rail-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.05); } html, body { background-color: var(--eb-page-bg); } html, body { overflow-x: clip; } html { scroll-padding-top: 64px; scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } html:has(.eb-store-sticky--on) { scroll-padding-top: 117px; } 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); } .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; } :root:root { --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; } .eb-brand-mark { height: 34px; width: auto; display: block; } .eb-brand-mark--light { display: none; } [data-theme="light"] .eb-brand-mark--dark { display: none; } [data-theme="light"] .eb-brand-mark--light { display: block; } .eb-nav-links { display: none; align-items: center; gap: 4px; } .eb-mobile-menu { display: flex; } .eb-nav-trigger { display: flex; align-items: center; } @media (min-width: 1200px) { .eb-nav-links--public { display: flex; } .eb-mobile-menu--public { display: none; } } .eb-topnav details.eb-nav-item.eb-nav-admin { display: none; } @media (min-width: 1410px) { .eb-nav-links--backoffice { display: flex; } .eb-mobile-menu--backoffice { display: none; } .eb-topnav details.eb-nav-item.eb-nav-admin { display: flex; } } .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 { transition: none !important; } } .eb-nav-drawer-inner { display: flex; flex-direction: column; height: 100%; outline: none; 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-utility { display: none; align-items: center; gap: 2px; margin-inline-start: auto; } .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)); } .eb-nav-drawer-menu > * + * { border-top: 1px solid var(--eb-border); } .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); } .eb-nav-drawer .eb-get-app { flex: 0 0 auto; display: flex; justify-content: center; margin: 0 20px max(8px, env(safe-area-inset-bottom)); } .eb-nav-drawer .eb-get-app img { height: 68px; width: auto; display: block; } .eb-nav-drawer .eb-get-app:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 2px; border-radius: 12px; } .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-dialog .eb-install-blurb { margin: 16px 20px; } .eb-install-dialog .eb-install-steps { margin: 0 20px; } .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; background: var(--eb-tint-bg); color: var(--eb-orange-on-tint); font-size: 0.75rem; font-weight: 800; } .eb-install-step-icon { flex: 0 0 auto; color: var(--eb-muted); } .eb-topnav .eb-nav-item, .eb-topnav .mud-button { text-transform: none; font-weight: 600; font-size: 0.9rem; color: var(--eb-nav-ink); letter-spacing: 0; border-radius: 999px; } .eb-topnav .eb-nav-item:hover, .eb-topnav .mud-button:hover { color: var(--eb-text); background-color: var(--eb-nav-hover-bg); } .eb-topnav .eb-nav-item--active, [data-theme="light"] .eb-topnav .eb-nav-item--active { color: var(--eb-text); font-weight: 800; } .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; } .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); } .eb-header-search-panel { position: absolute; top: 100%; left: 0; right: 0; display: flex; justify-content: flex-end; 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); } .eb-header-search-input { width: 100%; } .eb-header-search-hit { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; } .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-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); } @media (min-width: 768px) { .eb-nav-utility { margin-left: 14px; padding-left: 14px; } } .eb-topnav .eb-header-search-toggle, .eb-topnav .eb-theme-toggle { width: 44px; min-width: 44px; height: 44px; } .eb-topnav .eb-login-cta { min-height: 44px; } .eb-topnav .mud-icon-button { color: rgba(255, 255, 255, 0.8); } .eb-topnav .mud-icon-button:hover { color: var(--eb-text); } .eb-nav-admin { color: var(--eb-muted) !important; } @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; } .eb-topnav .eb-theme-toggle, .eb-topnav .eb-fav-nav { display: none; } .eb-nav-drawer-utility { display: flex; } } .eb-hero-immersive { position: relative; margin-bottom: 56px; background: #0C0C0E; border: 1px solid var(--eb-border-2); border-radius: 20px; overflow: hidden; } :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: 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; } @media (max-height: 500px) { .eb-hero-bg { min-height: 280px; padding-bottom: 52px; } } .eb-hero-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eb-orange-ink); margin-bottom: 16px; 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; max-width: 17ch; text-wrap: balance; text-transform: none; } .eb-hero-sub { 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); } .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; } .eb-hero-cta-btn--primary { background-color: var(--eb-orange-on-dark) !important; color: var(--eb-on-orange-on-dark) !important; } .eb-hero-cta-btn--primary:hover { 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); } .eb-hero-cta-btn--ghost { background-color: rgba(12, 12, 14, 0.42); border-color: rgba(255, 255, 255, 0.34); color: #FFFFFF !important; } .eb-hero-cta-btn--ghost:hover { border-color: var(--eb-orange-on-dark); color: var(--eb-orange-on-dark) !important; } .eb-hero-search { position: absolute; left: 48px; right: 48px; bottom: -34px; z-index: 2; background: #fff; border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); display: flex; align-items: center; padding: 10px 10px 10px 24px; gap: 14px; cursor: text; transition: box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1); } .eb-hero-search:focus-within { transform: translateY(-3px); box-shadow: 0 22px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(232, 99, 10, 0.55); } @media (prefers-reduced-motion: reduce) { .eb-hero-search { transition: none; } .eb-hero-search:focus-within { transform: none; } } .eb-hero-search .eb-hero-search-btn { cursor: pointer; } .eb-hero-search .eb-hero-search-icon { color: #55555C; font-size: 1.15rem; line-height: 1; } .eb-hero-search input { flex: 1; border: none; outline: none; background: transparent; color: #0C0C0E; font-family: var(--eb-display); font-size: 0.98rem; min-width: 0; } .eb-hero-search input::placeholder { color: #6A6A72; opacity: 1; } .eb-hero-search .eb-hero-search-btn { background: var(--eb-orange); color: var(--eb-on-orange); font-weight: 800; font-size: 0.92rem; padding: 13px 30px; border: none; border-radius: 12px; cursor: pointer; white-space: nowrap; transition: background 140ms ease; } .eb-hero-search .eb-hero-search-btn:hover { background: var(--eb-orange-hover); } @media (max-width: 720px) { .eb-hero-bg { padding: 26px 18px 18px; min-height: 360px; } .eb-hero-immersive { margin-bottom: 40px; } .eb-hero-search { position: static; left: auto; right: auto; bottom: auto; margin-top: 22px; padding-left: 16px; gap: 10px; flex-wrap: wrap; } .eb-hero-title { max-width: none; font-size: clamp(2.25rem, 11vw, 3.2rem); } .eb-hero-search .eb-hero-search-btn { min-height: 44px; padding-inline: 18px; } .eb-hero-cta { margin-top: 22px; gap: 10px; } .eb-hero-cta-btn { flex: 1 1 auto; padding-inline: 16px; } } .eb-section-head { display: flex; align-items: center; margin-bottom: 20px; } .eb-section-title { font-family: var(--eb-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--eb-text); margin: 0; line-height: 1.2; } .eb-section-link { font-size: 0.86rem; font-weight: 600; color: var(--eb-orange-ink); cursor: pointer; white-space: nowrap; flex: 0 0 auto; } .eb-section-link:hover { color: var(--eb-orange-hover); } @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); } .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; } .eb-page-aka { color: var(--eb-muted); font-size: 0.86rem; margin-bottom: 22px; } .eb-page-sub + .eb-page-aka { margin-top: -18px; } .eb-mark-yellow, .eb-mark-orange { background: none; padding: 0; color: var(--eb-orange-ink); } .eb-crumb { font-size: 0.84rem; font-weight: 600; color: var(--eb-muted); margin-bottom: 18px; } .eb-crumb--row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .eb-crumb-trail { min-width: 0; } @media (max-width: 599.98px) { .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); } .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); } .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); } .eb-card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } @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); } } @media (max-width: 560px) { :is(.eb-card-grid, .eb-bento) { gap: 12px; } :is(.eb-card-grid, .eb-bento) .mud-card-content.pa-3 { padding: 7px 9px 8px !important; } :is(.eb-card-grid, .eb-bento) .eb-card-title { font-size: 0.86rem; } :is(.eb-card-grid, .eb-bento) .eb-card-price-row { flex-wrap: wrap; } :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 { min-height: 44px; padding: 4px 0; flex: 0 0 auto; } :is(.eb-card-grid, .eb-bento) .eb-card-spec { font-size: 0.75rem; } :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.75rem; margin: 2px 0 4px; } :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.7rem; } :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; } } @media (max-width: 960px) { .eb-card-grid > .eb-species-lane-item:last-child:nth-child(odd) { grid-column: 1 / -1; } :is(.eb-card-grid > .eb-card:last-child:nth-child(odd), .eb-card-grid > .eb-species-lane-item:last-child:nth-child(odd) > .eb-card) { --eb-orphan-photo: min(40%, 220px); grid-column: 1 / -1; flex-direction: row !important; } :is(.eb-card-grid > .eb-card:last-child:nth-child(odd), .eb-card-grid > .eb-species-lane-item:last-child:nth-child(odd) > .eb-card) .eb-card-photo-link { flex: 0 0 var(--eb-orphan-photo); } :is(.eb-card-grid > .eb-card:last-child:nth-child(odd), .eb-card-grid > .eb-species-lane-item:last-child:nth-child(odd) > .eb-card) .eb-heart { right: auto; left: calc(var(--eb-orphan-photo) - 53px); } :is(.eb-card-grid > .eb-card:last-child:nth-child(odd), .eb-card-grid > .eb-species-lane-item:last-child:nth-child(odd) > .eb-card) .eb-card-photo { height: 100%; border-bottom: 0; border-right: 1px solid var(--eb-border); } :is(.eb-card-grid > .eb-card:last-child:nth-child(odd), .eb-card-grid > .eb-species-lane-item:last-child:nth-child(odd) > .eb-card) .eb-card-photo img, :is(.eb-card-grid > .eb-card:last-child:nth-child(odd), .eb-card-grid > .eb-species-lane-item:last-child:nth-child(odd) > .eb-card) .eb-card-photo > div { height: 100% !important; aspect-ratio: auto !important; } :is(.eb-card-grid > .eb-card:last-child:nth-child(odd), .eb-card-grid > .eb-species-lane-item:last-child:nth-child(odd) > .eb-card) .mud-card-content { min-width: 0; justify-content: center; } } @media (max-width: 860px) { .eb-bento > .eb-card:last-child:nth-child(even) { --eb-orphan-photo: min(40%, 220px); grid-column: 1 / -1; flex-direction: row !important; } .eb-bento > .eb-card:last-child:nth-child(even) .eb-card-photo-link { flex: 0 0 var(--eb-orphan-photo); } .eb-bento > .eb-card:last-child:nth-child(even) .eb-heart { right: auto; left: calc(var(--eb-orphan-photo) - 53px); } .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; } .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; } } .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; } .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; } .eb-price-was { color: var(--eb-muted); font-size: 0.85rem; font-weight: 600; text-decoration: line-through; } .eb-price, .eb-price-was, .eb-c-price { font-variant-numeric: tabular-nums; } .eb-price-qty { color: var(--eb-muted); font-size: 0.8rem; font-weight: 600; white-space: nowrap; } .eb-price-was--lg { font-size: 1.2rem; padding-bottom: 8px; } .eb-price-row { display: flex; align-items: flex-end; gap: 12px; } .eb-sale-note { color: var(--eb-orange-ink); font-weight: 700; font-size: 0.9rem; } .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); } .eb-ship-pill { display: inline-block; font-size: 0.75rem; 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; } .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; } .eb-photo-spec { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; max-width: 100%; font-size: 0.76rem; font-weight: 700; line-height: 1.35; color: var(--eb-on-photo); 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); } .eb-photo-cb { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 0.75rem; letter-spacing: -0.02em; } .eb-photo-weight { font-variant-numeric: tabular-nums; } .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); } .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) { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .eb-card-meta > :is(.eb-spec-maturity, .eb-spec-category) { flex: 0 0 auto; } .eb-card-meta > .eb-store-line { flex: 0 1 auto; min-width: 0; } .eb-store-line { display: inline-flex; align-items: center; min-width: 0; color: var(--eb-muted); font-size: 0.78rem; } .eb-store-line .mud-link { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--eb-muted); } .eb-store-line .mud-link:hover { color: var(--eb-text); } .eb-card-meta .eb-rrk-chip { flex: 0 0 auto; white-space: nowrap; } .eb-store-line .eb-star { color: var(--eb-orange-ink); } .eb-equipment-card .eb-store-line { display: flex; flex-wrap: wrap; column-gap: 4px; } .eb-equipment-card .eb-store-who { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; } .eb-equipment-card .eb-store-loc { flex: 0 0 auto; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .eb-equipment-card .eb-rrk-chip { flex: 0 0 auto; } .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); } } @media (max-width: 460px) { .eb-feature-grid { gap: 12px; } } @media (min-width: 961px) and (max-width: 1400px) { .eb-store-strip-grid > *:nth-child(n+6) { display: none; } } @media (min-width: 961px) and (max-width: 1180px) { .eb-store-strip-grid > *:nth-child(n+5) { display: none; } } .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-avatar:has(img) { width: auto; height: 64px; min-width: 64px; max-width: 100%; border-radius: 12px; padding: 4px 8px; background: var(--eb-surface); } .eb-store-card-avatar:has(img) img { width: auto; max-width: 200px; } .eb-store-card-name { font-family: var(--eb-display); font-weight: 600; font-size: 1rem; color: var(--eb-text); line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .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); } .eb-store-card-meta .eb-rrk-chip { margin-inline-start: 0; } .eb-store-card--windowed { padding-top: 0; overflow: hidden; } .eb-store-card-window { position: relative; flex: 0 0 auto; width: calc(100% + 32px); height: 110px; margin: 0 -16px; overflow: hidden; background: var(--eb-photo-bg); border-bottom: 1px solid var(--eb-border); } .eb-store-card--bare .eb-store-card-window { background: linear-gradient(176deg, var(--eb-surface) 0%, var(--eb-surface-2) 100%); } .eb-store-card--ground .eb-store-card-window { --eb-ground-lamp: 0.16; --eb-ground-lift: 90%; --eb-ground-floor: 88%; background: radial-gradient(78% 120% at 88% 4%, rgba(232, 99, 10, var(--eb-ground-lamp)) 0%, rgba(232, 99, 10, 0) 58%), linear-gradient(176deg, color-mix(in srgb, var(--eb-store-ground) var(--eb-ground-lift), #fff) 0%, var(--eb-store-ground) 56%, color-mix(in srgb, var(--eb-store-ground) var(--eb-ground-floor), #000) 100%); } .eb-store-card--on-light .eb-store-card-window { --eb-ground-lamp: 0.06; --eb-ground-lift: 97%; --eb-ground-floor: 96%; border-bottom-color: rgba(12, 12, 14, 0.14); } .eb-store-card-window img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease, filter 300ms ease; } .eb-store-card:hover .eb-store-card-window img { transform: scale(1.06); } .eb-store-card--own .eb-store-card-window::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 130% at 88% 0%, rgba(232, 99, 10, 0.34) 0%, rgba(232, 99, 10, 0) 60%); opacity: 0; transition: opacity 300ms ease; } .eb-store-card--own:hover .eb-store-card-window::after { opacity: 1; } .eb-store-card--on-light .eb-store-card-window::after { background: radial-gradient(70% 130% at 88% 0%, rgba(232, 99, 10, 0.14) 0%, rgba(232, 99, 10, 0) 60%); } .eb-store-card--own .eb-store-card-name { font-weight: 700; } .eb-store-card-window { filter: saturate(0.7) brightness(0.82); transition: filter 300ms ease; } .eb-store-card:hover .eb-store-card-window { filter: none; } .eb-store-card--windowed .eb-store-card-meta { margin-top: auto; padding-top: 8px; } .eb-store-card--windowed .eb-store-card-avatar { position: relative; margin-top: -32px; background: linear-gradient(var(--eb-tint-bg), var(--eb-tint-bg)), var(--eb-surface); box-shadow: 0 0 0 3px var(--eb-surface); } .eb-store-card--windowed .eb-store-card-avatar:has(img) { background: var(--eb-surface); box-shadow: none; } @media (prefers-reduced-motion: reduce) { .eb-store-card-window, .eb-store-card-window img, .eb-store-card--own .eb-store-card-window::after { transition: none; } .eb-store-card:hover .eb-store-card-window img { transform: none; } } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .eb-breeders-grid .eb-store-card { animation-name: eb-store-rise; animation-timeline: view(); animation-range: entry 5% entry 48%; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } } } .eb-section-head--lg.eb-section-head--stores { margin-bottom: 8px; } .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; } .eb-hero-plinth { display: block; background: #0C0C0E; border-top: 1px solid rgba(255, 255, 255, 0.09); 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; } .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; } .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-how-body { font-size: 0.86rem; line-height: 1.6; color: var(--eb-on-photo-dim); max-width: 34ch; } @media (max-width: 760px) { .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; } } @media (max-width: 720px) { .eb-hero-plinth { display: none; } } .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-end; gap: 8px; margin-bottom: 16px; } .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; } .eb-filter-bar .eb-filter-item { width: 100%; min-width: 0; } .eb-filter-bar .eb-filter-item--num { max-width: 128px; min-width: 90px; } .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; } .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; 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; } .eb-sort-slot { margin-left: auto; } summary.eb-sort-btn { align-self: center; 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; } summary.eb-sort-btn:hover { color: var(--eb-text); border-color: var(--eb-orange); } .eb-filter-more { display: none; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--eb-border); } .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); } .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); } .eb-gallery-main { border-radius: 16px; border: 1px solid var(--eb-border); background-color: var(--eb-surface); overflow: hidden; width: 100%; 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; } .eb-thumb-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .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--prohibited { border-width: 2px; } .eb-welfare-note--guidance { border-color: var(--eb-border); background: var(--eb-surface-2); } .eb-welfare-note--guidance .eb-welfare-note-icon, .eb-welfare-note--guidance .eb-welfare-note-title { color: var(--eb-muted); } .eb-welfare-note-text { display: flex; flex-direction: column; gap: 2px; } .eb-welfare-note-title { font-size: 0.75rem; 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); } .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; } .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; } } #eb-main:focus { outline: none; } .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); } .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; } .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); } .eb-morph-spec-item--lead { background: var(--eb-surface-2); } @media (max-width: 560px) { .eb-morph-spec-item { flex-basis: 120px; padding: 11px 13px; } } .eb-morph-spec-label { font-size: 0.75rem; 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); } .eb-morph-spec-value--warn { color: var(--eb-welfare-accent); text-decoration: underline; text-underline-offset: 2px; } .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; } .eb-morph-page .eb-welfare-note { margin-bottom: 20px; } @media (min-width: 961px) { .eb-card-grid--sparse { grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); justify-content: start; } } .eb-morph-control-group { display: flex; flex-direction: column; gap: 4px; } .eb-morph-control-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .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; } @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; } .eb-morph-controls .eb-seg { width: 100%; } .eb-morph-controls .eb-seg-btn { flex: 1 1 0; } .eb-morph-controls .eb-sort-btn { width: 100%; } } @media (max-width: 640px) { .eb-morph-controls-count { margin-left: 0; width: 100%; } } .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; } } .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); } .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; } .eb-morph-index-row:hover { background: var(--eb-tint-bg); } .eb-morph-index-name { font-weight: 700; color: var(--eb-text); transition: transform 140ms ease, color 140ms ease; } .eb-morph-index-row:hover .eb-morph-index-name { color: var(--eb-orange-on-tint); transform: translateX(10px); } .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; } .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; } .eb-section-ctas { display: flex; flex-wrap: wrap; column-gap: 24px; margin-top: 4px; } .eb-section-ctas .eb-morph-index-cta { margin-top: 0; } @media (prefers-reduced-motion: reduce) { .eb-morph-index-row { transition: none; } .eb-morph-index-name { transition: none; } .eb-morph-index-row:hover .eb-morph-index-name { transform: none; } } .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); } .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%; } .eb-spec-meta { margin-top: 12px; font-size: 0.76rem; color: var(--eb-muted); letter-spacing: 0.01em; } .eb-detail-desc { line-height: 1.7; } .eb-price-lg { font-size: 2.4rem; letter-spacing: -0.02em; color: var(--eb-orange-ink); 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); } .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; } .eb-col-rail .eb-seller-strip { margin-top: 16px; } .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: contain; } .eb-seller-avatar:has(img) { width: auto; height: 44px; min-width: 44px; max-width: 150px; border-radius: 10px; padding: 6px 10px; } .eb-seller-avatar:has(img) img { width: auto; max-width: 130px; } .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); } .eb-prose { max-width: 38em; 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-page > .eb-prose { margin-inline: auto; } .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-border-2); 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.75rem; 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; } .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; } .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; 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-social { display: flex; flex-wrap: wrap; gap: 4px; margin-inline-start: -12px; } .eb-footer-social-link { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--eb-muted); transition: color 160ms cubic-bezier(0.16, 1, 0.3, 1), background-color 160ms cubic-bezier(0.16, 1, 0.3, 1); } .eb-footer-social-link:hover { color: var(--eb-text); background-color: var(--eb-border); } @media (prefers-reduced-motion: reduce) { .eb-footer-social-link { transition: none; } } .eb-footer-mark--light { display: none; } [data-theme="light"] .eb-footer-mark--dark { display: none; } [data-theme="light"] .eb-footer-mark--light { display: block; } .eb-footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 2px 24px; font-size: 0.8rem; } .eb-footer .eb-footer-links a, .eb-footer .eb-footer-links a.mud-link { color: var(--eb-muted) !important; display: inline-flex; align-items: center; min-height: 32px; } @media (pointer: coarse) { .eb-footer .eb-footer-links a, .eb-footer .eb-footer-links a.mud-link { min-height: 44px; } } .eb-footer .eb-footer-links a:hover, .eb-footer .eb-footer-links a.mud-link:hover { color: var(--eb-text) !important; } .eb-footer-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 0 24px; align-content: start; } .eb-footer-group-title { grid-column: 1 / -1; color: var(--eb-text) !important; font-weight: 700; letter-spacing: -0.01em; font-size: 0.78rem; margin-bottom: 2px; } @media (max-width: 1023.98px) { .eb-footer-links { display: block; column-count: 2; column-gap: 20px; } .eb-footer-group { break-inside: avoid; grid-template-columns: 1fr; margin-bottom: 18px; } .eb-footer-group:last-child { margin-bottom: 0; } .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)); } .eb-footer-inner { grid-template-columns: 1fr; gap: 28px; } .eb-footer-brand-block { max-width: none; } .eb-footer-links { font-size: 0.85rem; } .eb-footer .eb-footer-links a, .eb-footer .eb-footer-links a.mud-link { min-height: 44px; } } @media (max-width: 359.98px) { .eb-footer-links { column-gap: 14px; } } .mud-button-root { border-radius: 999px; text-transform: none; font-weight: 700; letter-spacing: 0; } .mud-button-filled { box-shadow: none; border: none; } .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); } .eb-store-cta, .eb-store-cta:hover, .eb-share-btn:hover { color: var(--eb-on-orange) !important; } .eb-share-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; } .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; } .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.75rem; } .mud-table-head th .mud-button-root, .mud-table-head th .mud-typography { color: var(--eb-muted) !important; } .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); } .mud-input.mud-input-outlined { background-color: #FFFFFF; border-radius: 10px; } .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; } .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; } .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; } .mud-input-control:has(.mud-input-label-outlined) { margin-top: 24px; } .mud-input-control.mud-input-control-margin-dense:has(.mud-input-label-outlined) { margin-top: 24px; } .mud-input-label.mud-input-label-outlined { 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; } .mud-input.mud-input-outlined .mud-input-outlined-border legend { max-width: 0 !important; padding: 0 !important; } .mud-chip { font-weight: 700; border-radius: 999px; } .mud-chip.mud-chip-outlined { border-width: 1px; } .mud-rating-item .mud-icon-root { color: var(--eb-orange-ink); } .mud-avatar { font-family: var(--mud-typography-default-family); font-weight: 700; } .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; } .mud-alert { border: 1px solid var(--eb-border); border-radius: 12px; box-shadow: none; background-color: var(--eb-surface); color: var(--eb-text); } .mud-expand-panel { border: 1px solid var(--eb-border); border-radius: 12px; box-shadow: none; overflow: hidden; background-color: var(--eb-surface); } .mud-expand-panel .mud-expand-panel-content { padding-top: 8px !important; padding-bottom: 16px !important; } .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); } .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); } .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: 44px; height: 44px; padding: 0 6px; } .eb-pager-of { flex: 1 0 100%; margin: 2px 0 0; text-align: center; } } .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); } .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; } .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); } .mud-switch-input:checked + .mud-switch-track { background-color: var(--eb-orange); } .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); } .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; } .eb-topnav .eb-nav-links { align-self: stretch; } .mud-popover.mud-popover-open.mud-paper.eb-nav-popover { margin-top: 6px; min-width: 208px; } .eb-nav-popover [aria-current="page"] { color: var(--eb-text); font-weight: 800; } .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.75rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; } .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); } .mud-treeview-item-content.mud-treeview-item-selected { background-color: var(--eb-tint-bg); } .mud-treeview global\:\:mudblazor\.mudtreeviewitem, .mud-treeview bodycontent, .mud-treeview childcontent { display: block; } .mud-treeview childcontent { margin-left: 16px; padding-left: 15px; border-left: 1px solid var(--eb-border); } [style*="z-index: 999999"] > .mud-paper { background-color: var(--eb-surface) !important; color: var(--eb-body) !important; border-top: 1px solid var(--eb-border); } [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; } .mud-button-root:focus-visible, .mud-icon-button:focus-visible, .mud-link:focus-visible, .eb-nav-item:focus-visible, .eb-nav-popover .mud-menu-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; } .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--eb-orange) !important; border-width: 2px !important; } .eb-filter-group { display: flex; gap: 4px; align-items: flex-start; } .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); } .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); } @media (max-width: 959.98px) { .eb-filter-bar { display: none; flex-direction: column; } .eb-filter-bar.eb-filter-bar--open { display: flex; } .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%; height: 44px; margin-top: 0; } .eb-filter-bar details.eb-filter-more::details-content, .eb-filter-bar .eb-filter-more-body { flex: 0 0 auto; } .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; } .eb-filter-bar .eb-sort-slot { margin-left: 0; margin-top: 0; width: 100%; } .eb-filter-bar .eb-sort-btn { width: 100%; min-height: 44px; justify-content: center; } } .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); } .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-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; } .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; } .eb-empty-icon { color: var(--eb-border-2); margin-bottom: 6px; } .eb-empty-icon .mud-icon-root { font-size: 2.6rem; } .eb-notfound .eb-empty-title { margin: 0; font-size: 1.5rem; } .eb-notfound-search { display: flex; gap: 8px; width: min(100%, 420px); margin-top: 20px; } .eb-notfound-search input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--eb-input-border); background: #FFFFFF; color: #0C0C0E; font-family: var(--eb-display); font-size: 0.9rem; } .eb-notfound-search input::placeholder { color: #6A6A72; } @media (max-width: 479.98px) { .eb-notfound-search { flex-wrap: wrap; } .eb-notfound-search input { flex: 1 1 100%; } .eb-notfound-search > :not(input) { flex: 1 1 100%; } } .eb-notfound-search input:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 1px; } .eb-notfound-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 18px; font-size: 0.85rem; } .eb-notfound-links a { color: var(--eb-body); text-decoration: underline; text-underline-offset: 3px; } .eb-notfound-links a:hover { color: var(--eb-orange-ink); } .eb-notfound-back { margin-top: 18px; text-align: center; } .eb-card-spec { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px; min-height: 26px; font-size: 0.82rem; font-weight: 600; color: var(--eb-body); margin: 4px 0 7px; } .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); } .eb-spec-category { color: var(--eb-muted); } .eb-morph-text { color: var(--eb-muted); } .eb-select-heading { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--eb-muted); } .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); } .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-equipment-card .eb-chip-trait.mud-chip { background-color: transparent !important; border-color: var(--eb-border-2) !important; color: var(--eb-body) !important; } .eb-chip-trait.eb-chip-remove { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 10px; font-size: 0.76rem; font-weight: 700; line-height: 1.5; cursor: pointer; background-color: var(--eb-tint-bg); border: 1px solid var(--eb-tint-border); color: var(--eb-orange-on-tint); border-radius: 999px; transition: background-color 140ms ease, border-color 140ms ease; } .eb-chip-trait.eb-chip-remove:hover { background-color: var(--eb-tint-border); border-color: var(--eb-orange); } .eb-chip-trait.eb-chip-remove:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 2px; } .eb-chip-trait.eb-chip-remove .mud-icon-root { color: var(--eb-orange-ink); font-size: 1rem; } .eb-chip-trait--link { cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease; } .eb-chip-trait--link:hover { background-color: var(--eb-tint-border) !important; border-color: var(--eb-orange) !important; } .eb-store-line .mud-link { color: var(--eb-body) !important; } .eb-store-line .mud-link:hover { color: var(--eb-text) !important; } .eb-gallery-main img { view-transition-name: listing-hero; } @media (prefers-reduced-motion: no-preference) { ::view-transition-group(listing-hero) { animation-duration: 440ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } ::view-transition-old(listing-hero), ::view-transition-new(listing-hero) { animation-duration: 440ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); mix-blend-mode: normal; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; animation-timing-function: ease-out; } } .eb-card { position: relative; } .eb-card-photo-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .eb-card .eb-store-line { position: relative; z-index: 2; } .eb-card .eb-compare-toggle { position: relative; z-index: 3; } .eb-card-selected { border-color: var(--eb-orange) !important; box-shadow: 0 0 0 1px var(--eb-orange) inset; } .eb-compare-tray { position: fixed; left: 0; right: 0; bottom: var(--eb-consent-h, 0px); z-index: 1250; background: var(--eb-float-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--eb-border); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); animation: eb-tray-up 240ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes eb-tray-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .eb-compare-tray { animation: none; } } .eb-compare-tray-inner { display: flex; align-items: center; gap: 14px; } .eb-compare-tray-label { font-family: var(--eb-display); font-weight: 800; font-size: 0.95rem; color: var(--eb-text); white-space: nowrap; } .eb-compare-thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 2px; } .eb-compare-thumb { position: relative; width: 46px; height: 46px; min-width: 46px; border-radius: 10px; border: 1px solid var(--eb-border-2); background: var(--eb-photo-bg); } .eb-compare-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .eb-compare-thumb-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--eb-muted); } .eb-compare-thumb-remove { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 999px; background: var(--eb-surface); border: 1px solid var(--eb-border-2); color: var(--eb-text); font-size: 0.8rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .eb-compare-thumb-remove:hover { border-color: var(--eb-orange); color: var(--eb-orange-ink); } @media (pointer: coarse) { .eb-compare-thumb-remove::before { content: ""; position: absolute; inset: -11px; } } .eb-compare-hint { font-size: 0.82rem; color: var(--eb-muted); white-space: nowrap; } .eb-compare-clear { min-height: 24px; padding: 2px 4px; background: none; border: none; color: var(--eb-muted); font-weight: 600; font-size: 0.85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .eb-compare-clear:hover { color: var(--eb-text); } .eb-compare-go { 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.92rem; padding: 11px 26px; cursor: pointer; white-space: nowrap; transition: background 140ms ease; } .eb-compare-go:hover:not(:disabled) { background: var(--eb-orange-hover); } .eb-compare-go:disabled { background: var(--eb-border-2); color: var(--eb-muted); cursor: default; } body:has(.eb-compare-tray) .eb-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } @media (max-width: 640px) { .eb-compare-hint { display: none; } .eb-compare-go { padding: 11px 18px; } } .eb-compare-scroll { overflow-x: auto; } .eb-compare-table { border-collapse: collapse; width: 100%; } .eb-compare-corner { width: 128px; position: sticky; left: 0; background: var(--eb-surface); z-index: 1; } .eb-compare-col { position: relative; padding: 6px 12px 12px; text-align: center; vertical-align: top; border-bottom: 1px solid var(--eb-border); min-width: 148px; } .eb-compare-col-remove { position: absolute; top: 2px; right: 6px; width: 22px; height: 22px; border-radius: 999px; background: var(--eb-surface-2); border: 1px solid var(--eb-border-2); color: var(--eb-muted); cursor: pointer; font-size: 0.9rem; line-height: 1; z-index: 2; } .eb-compare-col-remove:hover { border-color: var(--eb-orange); color: var(--eb-orange-ink); } .eb-compare-col-photo { display: flex; align-items: center; justify-content: center; width: 260px; max-width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--eb-photo-bg); border: 1px solid var(--eb-border); margin: 0 auto 8px; } .eb-compare-col-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .eb-compare-col-title { display: block; color: var(--eb-text); font-weight: 600; font-size: 0.84rem; line-height: 1.25; text-decoration: none; } .eb-compare-col-title:hover { color: var(--eb-orange-ink); } .eb-compare-label { position: sticky; left: 0; z-index: 1; background: var(--eb-surface); color: var(--eb-muted); font-weight: 600; font-size: 0.82rem; padding: 10px 16px 10px 4px; white-space: nowrap; border-bottom: 1px solid var(--eb-border); } .eb-compare-value { text-align: center; color: var(--eb-text); font-weight: 600; font-size: 0.86rem; padding: 10px 12px; border-bottom: 1px solid var(--eb-border); } .eb-compare-price { color: var(--eb-orange-ink); font-weight: 800; font-size: 1rem; } .eb-compare-was { color: var(--eb-muted); text-decoration: line-through; font-size: 0.8rem; margin-left: 6px; } .eb-compare-seller { color: var(--eb-body); text-decoration: none; } .eb-compare-seller:hover { color: var(--eb-text); } .eb-compare-section { position: sticky; left: 0; background: var(--eb-surface-2); color: var(--eb-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; padding: 12px 16px; border-bottom: 1px solid var(--eb-border); } .eb-compare-trait-row .eb-compare-label { text-transform: none; color: var(--eb-body); } .eb-compare-dot { display: inline-block; width: 12px; height: 12px; border-radius: 999px; background: var(--eb-orange); } .eb-compare-dash { color: var(--eb-muted); } .eb-compare-shared .eb-compare-label, .eb-compare-shared .eb-compare-value { background: var(--eb-tint-bg); } .eb-heart { position: absolute; top: 9px; right: 9px; z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: none; background: rgba(12, 12, 14, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: var(--eb-text); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; } .eb-heart .mud-icon-root { font-size: 1.3rem; } .eb-heart:hover { background: rgba(12, 12, 14, 0.78); } .eb-heart--on { color: var(--eb-orange-ink); } .eb-heart--on .mud-icon-root { animation: eb-heart-pop 260ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes eb-heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .eb-heart--on .mud-icon-root { animation: none; } } .eb-heart:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 2px; } .eb-compare-toggle { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; gap: 7px; padding: 4px 2px; width: fit-content; cursor: pointer; user-select: none; font-size: 0.78rem; font-weight: 600; color: var(--eb-muted); } .eb-compare-toggle::before { content: ""; position: absolute; inset: -9px -4px; } .eb-fav-nav, .eb-chat-nav { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 140ms ease, background-color 140ms ease; } .eb-fav-nav:hover, .eb-chat-nav:hover { color: var(--eb-text); background: rgba(255, 255, 255, 0.08); } .eb-fav-nav .mud-icon-root, .eb-chat-nav .mud-icon-root { font-size: 1.3rem; } .eb-fav-nav-badge, .eb-chat-nav-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--eb-orange); color: var(--eb-on-orange); font-size: 0.68rem; font-weight: 800; line-height: 16px; text-align: center; } .eb-account-nav-activator { position: relative; } .eb-account-nav-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--eb-orange); color: var(--eb-on-orange); font-size: 0.68rem; font-weight: 800; line-height: 16px; text-align: center; } .eb-save-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; row-gap: 10px; } .eb-save-btn { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--eb-border-2); color: var(--eb-text); border-radius: 999px; font-weight: 700; font-size: 0.9rem; padding: 9px 18px; cursor: pointer; transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease; } .eb-save-btn .mud-icon-root { font-size: 1.1rem; } .eb-save-btn:hover { border-color: var(--eb-orange); color: var(--eb-orange-on-tint); } .eb-save-btn--on { border-color: var(--eb-orange); color: var(--eb-orange-on-tint); background: var(--eb-tint-bg); } .eb-save-btn:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 2px; } .eb-save-count { font-size: 0.85rem; color: var(--eb-muted); } .eb-empty-heart { color: var(--eb-border-2); margin-bottom: 6px; } .eb-empty-heart .mud-icon-root { font-size: 2.6rem; } .eb-hero-bg--photo { min-height: 440px; background-image: radial-gradient(64% 88% at 88% 16%, rgba(232, 99, 10, 0.22) 0%, rgba(232, 99, 10, 0) 60%), linear-gradient(97deg, #0C0C0E 0%, rgba(12, 12, 14, 0.96) 32%, rgba(12, 12, 14, 0.74) 50%, rgba(12, 12, 14, 0.20) 73%, rgba(12, 12, 14, 0.05) 100%), linear-gradient(180deg, rgba(12, 12, 14, 0) 44%, rgba(12, 12, 14, 0.34) 70%, rgba(12, 12, 14, 0.94) 100%), radial-gradient(76% 96% at 60% 62%, #FFFFFF 0%, #EDEDF0 26%, #9A9AA4 62%, #4E4E56 88%, #35353C 100%), linear-gradient(180deg, #6E6E78 0%, #B4B4BC 22%, #FFFFFF 52%), var(--eb-hero-photo, var(--eb-hero-image)); background-blend-mode: normal, normal, normal, multiply, multiply, normal; background-position: center, center, center, center, center, right center; background-size: cover, cover, cover, cover, cover, cover; background-repeat: no-repeat; } .eb-hero-bg--photo .eb-hero-title { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55); } .eb-hero-bg--photo .eb-hero-sub { text-shadow: 0 1px 18px rgba(0, 0, 0, 0.6); } @media (max-width: 720px) { .eb-hero-bg--photo { min-height: 430px; background-position: center, center, center, center, center, center; --eb-hero-photo: var(--eb-hero-image-sm, var(--eb-hero-image)); } } .eb-section-head--lg { align-items: baseline; column-gap: 16px; margin-bottom: 26px; margin-top: 4px; } .eb-section-title--lg { font-size: clamp(1.55rem, 2.6vw, 2.05rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; } .eb-bento { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: stretch; } .eb-bento > :first-child { grid-column: span 2; grid-row: span 2; } @media (max-width: 1400px) { .eb-bento { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1180px) { .eb-bento { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .eb-bento { grid-template-columns: repeat(2, 1fr); } .eb-bento > :first-child { grid-column: span 2; grid-row: span 1; } } .eb-species-lane-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .eb-species-lane-item > .mud-card { flex: 1 1 auto; } .eb-species-lane-item a.eb-species-chip { align-self: start; max-width: 100%; padding: 3px 10px; border: 1px solid var(--eb-border); border-radius: 999px; background: var(--eb-surface); color: var(--eb-muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease; } .eb-species-lane-item a.eb-species-chip:hover, .eb-species-lane-item a.eb-species-chip:focus-visible { color: var(--eb-orange-on-tint); border-color: var(--eb-tint-border); background: var(--eb-tint-bg); text-decoration: none; } .eb-card-featured .eb-card-photo-link { flex: 1 1 auto; min-height: 0; display: block; } .eb-card-featured .eb-card-photo { height: 100%; min-height: 340px; } .eb-card-featured .eb-card-photo > :first-child { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; object-fit: cover; } .eb-pick-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.01em; color: var(--eb-on-orange-on-dark); background: var(--eb-orange-on-dark); border-radius: 8px; padding: 6px 12px; box-shadow: 0 6px 18px rgba(232, 99, 10, 0.36); } .eb-card-featured-footer { display: flex; align-items: flex-end; gap: 16px; padding: 18px 22px 20px; flex: 0 0 auto; } .eb-card-featured-info { min-width: 0; } .eb-card-featured-title { font-family: var(--eb-display); font-weight: 800; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.14; letter-spacing: -0.01em; color: var(--eb-text); margin-bottom: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .eb-card-featured .eb-card-meta { font-size: 0.86rem; margin: 0; } .eb-card-featured-price { text-align: right; flex: 0 0 auto; } .eb-price--lg { font-size: 1.75rem; line-height: 1.08; } .eb-card-featured-price .eb-price-was { display: block; margin-top: 2px; } .eb-card-featured-price .eb-ship-pill { display: block; margin-top: 5px; } .eb-store-hero { position: relative; min-height: 320px; container-type: inline-size; border-radius: 20px; overflow: clip; border: 1px solid var(--eb-border); background: var(--eb-hero-fallback); display: flex; align-items: flex-end; margin-bottom: 28px; } .eb-store-hero-montage { position: absolute; inset: 0; display: flex; filter: blur(3px) saturate(1.06); transform: scale(1.08); } .eb-store-hero-montage img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; } .eb-store-hero--photos::after { content: ""; position: absolute; inset: 0; background: radial-gradient(78% 120% at 88% 4%, rgba(232, 99, 10, 0.22) 0%, rgba(232, 99, 10, 0) 55%), linear-gradient(180deg, rgba(12, 12, 14, 0.5) 0%, rgba(12, 12, 14, 0.28) 32%, rgba(12, 12, 14, 0.9) 100%); } .eb-store-hero--ground { --eb-ground-lamp: 0.16; --eb-ground-lift: 90%; --eb-ground-floor: 88%; background: radial-gradient(78% 120% at 88% 4%, rgba(232, 99, 10, var(--eb-ground-lamp)) 0%, rgba(232, 99, 10, 0) 58%), linear-gradient(176deg, color-mix(in srgb, var(--eb-store-ground) var(--eb-ground-lift), #fff) 0%, var(--eb-store-ground) 56%, color-mix(in srgb, var(--eb-store-ground) var(--eb-ground-floor), #000) 100%); } .eb-store-hero--on-light { --eb-on-photo: #0C0C0E; --eb-on-photo-dim: rgba(12, 12, 14, 0.62); --eb-orange-ink: #B84A08; --eb-orange-on-dark: #B84A08; --eb-ground-lamp: 0.06; --eb-ground-lift: 97%; --eb-ground-floor: 96%; border-color: rgba(12, 12, 14, 0.14); } .eb-store-hero--on-light .eb-store-name { color: var(--eb-on-photo) !important; } .eb-store-hero--on-light .eb-store-meta { color: rgba(12, 12, 14, 0.74); } .eb-store-hero--on-light .eb-store-meta-item:not(:last-child)::after { color: rgba(12, 12, 14, 0.3); } .eb-store-hero--on-light .eb-store-meta-dim { color: rgba(12, 12, 14, 0.52); } .eb-store-hero--on-light .eb-store-avatar-lg { background: rgba(255, 255, 255, 0.62); border-color: rgba(12, 12, 14, 0.1); } .eb-store-hero--on-light .eb-store-follow, .eb-store-hero--on-light a.eb-store-follow { border-color: rgba(12, 12, 14, 0.18); background: rgba(255, 255, 255, 0.55); color: rgba(12, 12, 14, 0.86) !important; } .eb-store-hero--on-light .eb-store-follow:hover, .eb-store-hero--on-light a.eb-store-follow:hover, .eb-store-hero--on-light a.eb-store-follow:focus-visible { border-color: var(--eb-orange-ink); background: rgba(255, 255, 255, 0.8); color: #0C0C0E !important; } .eb-store-hero--on-light .eb-store-follow--on { border-color: var(--eb-orange-ink); background: rgba(255, 255, 255, 0.72); color: var(--eb-orange-ink) !important; } .eb-store-hero--on-light .eb-store-follow-count { background: rgba(12, 12, 14, 0.1); } .eb-store-hero--on-light .eb-store-rrk .eb-rrk { background: #17171A; border-color: rgba(255, 255, 255, 0.16); } .eb-store-hero--on-light .eb-store-rrk .eb-rrk:hover, .eb-store-hero--on-light .eb-store-rrk .eb-rrk:focus-visible { background: #0C0C0E; } .eb-store-hero--on-light .eb-share-label { color: rgba(12, 12, 14, 0.66); } .eb-store-hero--on-light .eb-share-btn { background: rgba(255, 255, 255, 0.55); border-color: rgba(12, 12, 14, 0.14); color: rgba(12, 12, 14, 0.86) !important; } .eb-store-hero--on-light .eb-share-btn:hover { background: var(--eb-orange); border-color: var(--eb-orange); color: var(--eb-on-orange) !important; } .eb-store-hero--centred .eb-store-hero-body { flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; } .eb-store-hero--centred .eb-store-hero-id, .eb-store-hero--centred .eb-store-hero-actions { align-self: center; } .eb-store-hero--centred .eb-store-hero-id { align-items: center; } .eb-store-hero--centred .eb-store-hero-text { text-align: center; } .eb-store-hero--centred .eb-store-meta, .eb-store-hero--centred .eb-store-social, .eb-store-hero--centred .eb-licence-line { justify-content: center; } .eb-store-hero--centred .eb-store-hero-actions { justify-content: center; justify-items: center; } .eb-store-hero--centred .eb-store-hero-actions > .eb-store-cta, .eb-store-hero--centred .eb-store-hero-actions > .eb-share, .eb-store-hero--centred .eb-store-hero-actions > form:has(.eb-store-cta) { justify-self: center; } .eb-store-hero--centred .eb-store-hero-id { transform-origin: top center; } .eb-store-hero-body { position: relative; z-index: 1; width: 100%; align-self: stretch; box-sizing: border-box; padding: 28px 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .eb-store-hero-id { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; align-self: flex-start; } .eb-store-hero-text { text-align: left; align-self: stretch; min-width: 0; } .eb-store-avatar-lg { width: 128px; height: 128px; flex: 0 0 auto; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--eb-on-photo) 12%, transparent); border: 1px solid var(--eb-border-2); display: flex; align-items: center; justify-content: center; font-family: var(--eb-display); font-weight: 800; font-size: 3rem; color: var(--eb-orange-ink); } .eb-store-avatar-lg img { object-fit: contain; display: block; } .eb-store-avatar-lg--logo { width: fit-content; height: fit-content; max-width: none; max-height: none; padding: 10px; border: 0; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--eb-on-photo) 12%, transparent); } .eb-store-avatar-lg--logo img { width: auto; height: auto; max-width: 35cqw; max-height: 152px; } .eb-store-name { font-family: var(--eb-display); font-weight: 800; font-size: clamp(1.45rem, 2.6vw, 1.85rem); line-height: 1.06; letter-spacing: -0.03em; color: var(--eb-text); margin: 0; } .eb-store-hero--photos .eb-store-name { text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55); } .eb-store-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; } .eb-store-signature { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 22px; } .eb-store-signature h2.eb-store-signature-label { font-family: inherit; font-size: 0.85rem; font-weight: 700; letter-spacing: 0; color: var(--eb-muted); margin: 0; flex: 0 0 auto; } .eb-store-signature-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } @media (max-width: 720px) { .eb-store-signature-list > li:nth-child(n+4) { display: none; } } .eb-store-gene { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border-radius: 999px; background-color: var(--eb-surface); border: 1px solid var(--eb-border); color: var(--eb-text); font-size: 0.76rem; font-weight: 600; text-decoration: none; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; } .eb-store-gene:hover, .eb-store-gene:focus-visible { background-color: var(--eb-tint-bg); border-color: var(--eb-orange); color: var(--eb-orange-on-tint); } .eb-store-gene-count::before { content: "\00B7"; margin-right: 7px; opacity: 0.5; } .eb-store-gene-count { font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--eb-muted); } @media (max-width: 899.98px) { .eb-store-gene { min-height: 40px; padding: 0 15px; } } @media (prefers-reduced-motion: reduce) { .eb-store-gene { transition: none; } } .eb-store-meta-item { display: inline-flex; align-items: center; gap: 4px; } .eb-store-meta-item:not(:last-child)::after { content: "\00B7"; margin-left: 14px; color: rgba(255, 255, 255, 0.4); } .eb-store-meta-item .mud-icon-root { font-size: 1rem; } .eb-store-meta-rating .eb-star { color: var(--eb-orange-ink); } .eb-store-meta-dim { color: rgba(255, 255, 255, 0.55); } .eb-store-hero-actions { display: grid; grid-template-columns: auto auto; gap: 10px; justify-content: end; align-content: end; flex: 0 0 auto; align-self: flex-end; } .eb-store-hero-actions > .eb-store-cta, .eb-store-hero-actions > .eb-share, .eb-store-hero-actions > form:has(.eb-store-cta) { grid-column: 1 / -1; justify-self: end; } .eb-store-hero-actions .eb-store-follow { width: 100%; } .eb-store-follow { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 9px 15px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 12px; background: rgba(12, 12, 14, 0.44); color: rgba(255, 255, 255, 0.9); font: 700 0.86rem/1 var(--eb-display); text-decoration: none; cursor: pointer; backdrop-filter: blur(8px); transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease; } .eb-store-follow:hover { border-color: var(--eb-orange); color: var(--eb-text); background: rgba(12, 12, 14, 0.7); } .eb-store-follow--on { border-color: var(--eb-orange-on-dark); background: var(--eb-tint-bg); color: var(--eb-orange-on-dark); } .eb-store-follow:disabled { opacity: 0.55; cursor: wait; } .eb-store-hero-actions .eb-store-hero-msg { background: var(--eb-orange); border-color: var(--eb-orange); color: var(--eb-on-orange); backdrop-filter: none; } .eb-store-hero-actions .eb-store-hero-msg:hover { background: var(--eb-orange-hover); border-color: var(--eb-orange-hover); color: var(--eb-on-orange); box-shadow: 0 0 32px rgba(232, 99, 10, 0.32); } .eb-store-follow-count { display: inline-flex; min-width: 21px; height: 21px; padding-inline: 6px; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: inherit; font-size: 0.75rem; } .eb-store-follow--sm { min-height: 36px; padding: 7px 11px; border-radius: 10px; background: transparent; border-color: var(--eb-border-2); color: var(--eb-text); backdrop-filter: none; } .eb-store-follow--sm:hover { border-color: var(--eb-orange); color: var(--eb-orange-ink); background: var(--eb-tint-bg); } .eb-store-follow--sm.eb-store-follow--on { border-color: var(--eb-orange-ink); color: var(--eb-orange-ink); } .eb-store-follow--sm .eb-store-follow-count { background: var(--eb-tint-bg); color: var(--eb-orange-ink); } .eb-store-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--eb-orange); color: var(--eb-on-orange); font-family: var(--eb-display); font-weight: 800; font-size: 0.92rem; padding: 11px 22px; border: none; border-radius: 12px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 140ms ease; } .eb-store-cta:hover { background: var(--eb-orange-hover); color: var(--eb-on-orange); } .eb-store-cta:disabled { opacity: 0.45; cursor: not-allowed; } .eb-store-cta--sm { padding: 7px 15px; font-size: 0.84rem; border-radius: 10px; } .eb-share { display: flex; align-items: center; gap: 6px; } .eb-share-label { font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); margin-right: 2px; } .eb-share-btn { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); color: var(--eb-text); border: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer; text-decoration: none; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } .eb-share-btn:hover { background: var(--eb-orange); color: var(--eb-on-orange); border-color: var(--eb-orange); } .eb-share[data-eb-share-native] .eb-share-btn:not(.eb-share-btn--native) { display: none; } .eb-store-hero .eb-share-btn { background: transparent; border-color: rgba(255, 255, 255, 0.22); } .eb-store-hero .eb-share-btn:hover, .eb-store-hero .eb-share-btn:focus-visible { background: var(--eb-orange); border-color: var(--eb-orange); } .eb-store-hero--on-light .eb-share-btn { background: transparent; border-color: rgba(12, 12, 14, 0.2); } .eb-share-btn .mud-icon-root { font-size: 1.05rem; } .eb-share-btn:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 2px; } .eb-share--inline { flex-wrap: wrap; } .eb-share--inline .eb-share-label { color: var(--eb-muted); } .eb-share--inline .eb-share-btn { background: var(--eb-surface-2); border-color: var(--eb-border-2); color: var(--eb-text); } .eb-share--inline .eb-share-btn:hover { background: var(--eb-orange); border-color: var(--eb-orange); color: var(--eb-on-orange); } [data-theme="light"] .eb-share--inline .eb-share-btn { color: var(--eb-text) !important; } .eb-store-social { display: block; margin-top: 12px; font-size: 0.86rem; line-height: 1.85; } .eb-store-social-label { font-size: 0.78rem; color: var(--eb-on-photo-dim); margin-right: 6px; } .eb-store-social-links { display: inline; } .eb-store-social .eb-store-social-link { color: var(--eb-on-photo); font-weight: 700; text-decoration: none; padding-block: 5px; border-bottom: 1px solid transparent; transition: color 140ms ease, border-color 140ms ease; } .eb-store-social .eb-store-social-link:hover, .eb-store-social .eb-store-social-link:focus-visible { color: var(--eb-orange-on-dark); border-bottom-color: var(--eb-orange-on-dark); } .eb-store-social .eb-store-social-link:not(:last-of-type)::after { content: " · "; color: var(--eb-on-photo-dim); font-weight: 400; } @media (pointer: coarse) { .eb-store-social { line-height: 2.1; } .eb-store-social .eb-store-social-link { padding-block: 8px; } } .eb-form-section-label { font-family: var(--eb-display); font-weight: 800; font-size: 1rem; color: var(--eb-text); margin: 8px 0 2px; } .eb-store-live { background: var(--eb-tint-bg); border: 1px solid var(--eb-tint-border); } .eb-store-live-url { display: inline-block; font-family: var(--eb-display); font-weight: 700; font-size: 1.15rem; color: var(--eb-orange-on-tint); word-break: break-all; text-decoration: none; } .eb-store-live-url:hover { text-decoration: underline; } .eb-store-live-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; } .eb-store-sticky { position: fixed; top: 64px; left: 0; right: 0; z-index: 1000; background: var(--eb-float-glass); backdrop-filter: blur(10px); border-bottom: 1px solid var(--eb-border); transform: translateY(-112%); visibility: hidden; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 280ms; will-change: transform; } .eb-store-sticky--on { transform: translateY(0); visibility: visible; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; } .eb-store-sticky-in { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .eb-store-avatar-sm { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; background: var(--eb-surface); border: 1px solid var(--eb-border-2); display: flex; align-items: center; justify-content: center; font-family: var(--eb-display); font-weight: 800; color: var(--eb-orange-ink); font-size: 0.9rem; } .eb-store-avatar-sm img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 3px; box-sizing: border-box; } .eb-store-avatar-sm:has(img) { width: auto; min-width: 32px; max-width: 120px; padding: 0 6px; } .eb-store-avatar-sm:has(img) img { width: auto; max-width: 108px; } .eb-store-logo-preview { width: 160px; height: 160px; flex: 0 0 160px; padding: 12px; box-sizing: border-box; border: 1px solid var(--eb-border); border-radius: 16px; overflow: hidden; background: var(--eb-tint-bg); } .eb-store-logo-preview img { width: 100%; height: 100%; object-fit: contain; display: block; } .eb-store-logo-preview--fallback { display: flex; align-items: center; justify-content: center; color: var(--eb-orange-ink); font-family: var(--eb-display); font-size: 3rem; font-weight: 800; } .eb-my-store-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 16px 16px; } .eb-my-store-actions > .mud-button-root { margin: 0; } .eb-store-form .eb-form-section-label { margin-top: 28px; } .eb-form-section-hint { margin: 0 0 14px; font-size: 0.92rem; line-height: 1.5; color: var(--eb-muted); max-width: 62ch; } @media (max-width: 480px) { .eb-handle-field .mud-input-adornment-text { font-size: 0.8rem; } } @media (pointer: coarse) { .eb-store-listing-hub__actions > .mud-button-root, .eb-my-store-actions > .mud-button-root, .eb-layout-block__actions .mud-button-root, .eb-store-logo-card .mud-button-root { min-height: 44px; } .eb-layout-lock-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; } } .eb-storefront-bar { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border: 1px solid var(--eb-tint-border); border-radius: 14px; background: var(--eb-tint-bg); } .eb-storefront-bar__logo { flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border: 1px solid var(--eb-border); border-radius: 12px; background: var(--eb-surface); color: var(--eb-orange-ink); font-family: var(--eb-display); font-size: 1.6rem; font-weight: 800; line-height: 1; text-decoration: none; } .eb-storefront-bar__logo img { display: block; width: auto; height: 100%; max-width: 150px; object-fit: contain; } .eb-storefront-bar__logo:has(img) { width: auto; min-width: 56px; max-width: 170px; padding: 8px 10px; } .eb-storefront-bar__id { flex: 1 1 auto; min-width: 0; } .eb-storefront-bar__name { font-family: var(--eb-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; color: var(--eb-text); overflow-wrap: anywhere; } .eb-storefront-bar__address { margin-top: 3px; font-size: 0.9rem; color: var(--eb-muted); overflow-wrap: anywhere; } .eb-storefront-bar__address a { font-weight: 600; color: var(--eb-orange-on-tint); text-decoration: none; } .eb-storefront-bar__address a:hover, .eb-storefront-bar__address a:focus-visible { text-decoration: underline; } .eb-storefront-bar__actions { flex: none; display: flex; align-items: center; gap: 8px; } .eb-storefront-bar__actions > .mud-button-root { margin: 0; } @media (max-width: 720px) { .eb-storefront-bar { align-items: flex-start; flex-wrap: wrap; gap: 14px; padding: 16px; } .eb-storefront-bar__id { flex-basis: calc(100% - 74px); } .eb-storefront-bar__actions { flex: 1 0 100%; } .eb-storefront-bar__cta { flex: 1 1 auto; } } .eb-store-connect__content { display: grid; gap: 14px; } .eb-store-connect__reveal { display: grid; gap: 6px; } .eb-store-connect .eb-store-connect__token .mud-input .mud-input-slot { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em; text-overflow: ellipsis; } .eb-store-connect__warn { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--mud-palette-warning); font-size: 0.8rem; font-weight: 600; } .eb-store-connect__list { list-style: none; margin: 0; padding: 0; display: grid; } .eb-store-connect__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--eb-border); } .eb-store-connect__row:first-child { border-top: 0; padding-top: 0; } .eb-store-connect__id { min-width: 0; } .eb-store-connect__prefix { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.84rem; color: var(--eb-text); } .eb-store-connect__tag { display: inline-block; vertical-align: 1px; margin-inline-start: 6px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--eb-border-2); background: var(--eb-surface-2); color: var(--eb-muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.6; } .eb-store-connect__meta { margin-top: 2px; font-size: 0.76rem; color: var(--eb-muted); } .eb-store-connect__create { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--eb-border); } .eb-store-connect__foot { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--eb-border); } .eb-store-connect__foot-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-store-connect__foot code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; color: var(--eb-text); overflow-wrap: anywhere; } .eb-sync-chip { display: inline-block; vertical-align: middle; margin-inline-start: 8px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--eb-border-2); background: var(--eb-surface-2); color: var(--eb-muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.5; } .eb-sync-banner .mud-alert-message { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .eb-store-listing-hub { border: 1px solid var(--eb-tint-border); } .eb-store-listing-hub__content { display: flex; align-items: center; gap: 28px; padding: 20px 24px !important; } .eb-store-listing-hub__intro { flex: 0 1 260px; min-width: 210px; } .eb-store-listing-hub__intro .mud-typography-h6 { margin-bottom: 3px; } .eb-store-listing-hub__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 600px; gap: 24px; } .eb-store-listing-hub__group { min-width: 0; padding-inline-start: 20px; border-inline-start: 1px solid var(--eb-border); } .eb-store-listing-hub__label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--eb-text); } .eb-store-listing-hub__label .mud-icon-root { color: var(--eb-orange-ink); font-size: 1.2rem; } .eb-store-listing-hub__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .eb-store-listing-hub__actions > .mud-button-root { min-width: 0; margin: 0; white-space: nowrap; } @media (max-width: 900px) { .eb-store-listing-hub__content { align-items: stretch; flex-direction: column; gap: 18px; } .eb-store-listing-hub__intro { flex-basis: auto; min-width: 0; } .eb-store-listing-hub__groups { flex-basis: auto; } } @media (max-width: 600px) { .eb-store-listing-hub__content { padding: 18px 16px !important; } .eb-store-listing-hub__groups { grid-template-columns: 1fr; gap: 18px; } } @media (max-width: 420px) { .eb-store-listing-hub__actions { grid-template-columns: 1fr; } } .eb-store-sticky-name { font-family: var(--eb-display); font-weight: 700; color: var(--eb-text); } .eb-store-sticky-rating { color: var(--eb-body); font-size: 0.88rem; } .eb-store-sticky-rating .eb-star { color: var(--eb-orange-ink); } .eb-store-sticky .eb-store-cta { margin-left: auto; } .eb-store-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .eb-store-search { flex: 1 1 220px; max-width: 320px; } .eb-store-sort { max-width: 210px; } .eb-seg { display: inline-flex; background: var(--eb-seg-track); border: 1px solid var(--eb-border-2); border-radius: 10px; padding: 4px; gap: 4px; } .eb-seg-btn { border: none; background: none; color: var(--eb-text); font-family: var(--eb-display); font-weight: 600; font-size: 0.85rem; padding: 8px 12px; border-radius: 7px; cursor: pointer; transition: background 140ms ease, color 140ms ease; } .eb-seg-btn--on { background: var(--eb-orange); color: var(--eb-on-orange); } .eb-seg-btn:not(.eb-seg-btn--on):hover { background: var(--eb-seg-hover); } .eb-seg-btn:disabled { color: var(--eb-muted); opacity: 0.5; cursor: default; } @media (pointer: coarse) { .eb-seg-btn { min-height: 44px; padding: 8px 14px; } .eb-photo-action { min-width: 44px; min-height: 44px; } .eb-qa-signin .mud-button-root { min-height: 44px; } .eb-notif-matrix .eb-notif-col .mud-switch { min-height: 44px; align-items: center; } } .eb-seg-btn:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 2px; } .eb-store-collection { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 20px; } .eb-store-collection h2.eb-store-collection-title { font-family: var(--eb-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--eb-text); margin: 0; } .eb-store-collection-count { color: var(--eb-muted); font-size: 0.85rem; } .eb-store-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 20px; } .eb-store-empty-icon { color: var(--eb-border-2); font-size: 3rem !important; } .eb-store-empty-sub { margin-top: 6px; color: var(--eb-muted); font-size: 0.95rem; } .eb-store-empty-title { font-family: var(--eb-display); font-weight: 700; font-size: 1.2rem; color: var(--eb-text); } .eb-store-empty-sub { color: var(--eb-muted); margin-top: 6px; } .eb-store-prose { color: var(--eb-body); font-size: 0.98rem; line-height: 1.7; max-width: 70ch; } .eb-store-prose-h { font-family: var(--eb-display); font-weight: 700; color: var(--eb-text); font-size: 1.15rem; margin: 20px 0 8px; } .eb-store-review-form { background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; padding: 20px; margin-bottom: 20px; max-width: 640px; } .eb-store-review { border-bottom: 1px solid var(--eb-border); padding: 14px 0; } .eb-store-review-who { font-weight: 700; color: var(--eb-text); font-size: 0.9rem; } .eb-store-review-when { color: var(--eb-muted); font-size: 0.8rem; } .eb-store-review-text { color: var(--eb-body); margin-top: 6px; line-height: 1.6; } ::view-transition-old(eb-grid), ::view-transition-new(eb-grid) { animation-duration: 280ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } @media (max-width: 720px) { .eb-store-hero { min-height: 320px; margin-bottom: 20px; } .eb-store-hero-body { flex-direction: column; align-items: flex-start; padding: 18px; gap: 14px; } .eb-store-hero-id { gap: 12px; } .eb-store-avatar-lg { width: 72px; height: 72px; font-size: 1.8rem; } .eb-store-avatar-lg--logo { width: fit-content; height: fit-content; max-width: none; max-height: none; padding: 8px; } .eb-store-avatar-lg--logo img { max-width: 40cqw; max-height: 96px; } .eb-store-hero-montage img:nth-child(n+4) { display: none; } .eb-store-meta { gap: 6px 12px; margin-top: 8px; } .eb-store-meta-item:not(:last-child)::after { content: none; } .eb-store-hero-actions { display: grid; grid-template-columns: 1fr 1fr; align-self: stretch; width: 100%; margin-top: auto; gap: 10px; } .eb-store-hero-actions .eb-store-cta, .eb-store-hero-actions .eb-share { grid-column: 1 / -1; } .eb-store-hero-actions .eb-store-cta { width: 100%; min-height: 44px; } .eb-store-hero-actions .eb-store-follow { width: 100%; min-height: 44px; } .eb-share { justify-content: flex-start; } .eb-store-hero--centred .eb-store-hero-actions { justify-items: center; } .eb-store-hero--centred .eb-share { justify-content: center; } .eb-store-sticky { top: 56px; } .eb-store-sticky-in { gap: 10px; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); } .eb-store-sticky-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eb-store-sticky-rating { flex: 0 0 auto; } .eb-store-sticky-in .eb-store-cta { flex: 0 0 auto; margin-left: auto; } .eb-store-filters { gap: 10px; } .eb-store-search { flex: 1 1 100%; max-width: none; } .eb-store-sort { flex: 1 1 140px; max-width: none; } } @media (max-width: 460px) { .eb-store-sticky-in .eb-store-follow span { display: none; } .eb-store-sticky-in .eb-store-follow { width: 40px; padding: 0; flex: 0 0 40px; } } @media (pointer: coarse) { .eb-share-btn, .eb-store-follow { width: 44px; height: 44px; border-radius: 11px; } .eb-store-filters .eb-seg-btn { min-height: 44px; min-width: 44px; padding-block: 10px; } .eb-store-sticky-in .eb-store-cta { min-height: 40px; } .eb-report-btn { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .eb-store-sticky { transition: none; } ::view-transition-old(eb-grid), ::view-transition-new(eb-grid) { animation: none; } } :root:root { --eb-hero-bar-inset: 64px; } .eb-store-hero-montage--deep { filter: blur(18px) saturate(1.18); opacity: 0; } .eb-store-hero-dim { position: absolute; inset: 0; opacity: 0; background: radial-gradient(78% 120% at 88% 4%, rgba(232, 99, 10, 0.07) 0%, rgba(232, 99, 10, 0) 46%), linear-gradient(180deg, rgba(12, 12, 14, 0.6) 0%, rgba(12, 12, 14, 0.76) 46%, rgba(12, 12, 14, 0.9) 100%); } @keyframes eb-hero-recede { 0% { opacity: 0; } 22% { opacity: 0.06; } 100% { opacity: 1; } } @keyframes eb-hero-push { from { transform: scale(1.08); } to { transform: scale(1.2); } } @keyframes eb-hero-dim { 0% { opacity: 0; } 40% { opacity: 0.18; } 100% { opacity: 1; } } @keyframes eb-hero-drift-1 { to { translate: 0 1.5%; } } @keyframes eb-hero-drift-2 { to { translate: 0 4.5%; } } @keyframes eb-hero-drift-3 { to { translate: 0 2.5%; } } @keyframes eb-hero-drift-4 { to { translate: 0 6%; } } @keyframes eb-hero-drift-5 { to { translate: 0 3.5%; } } @keyframes eb-hero-condense { 0% { transform: none; opacity: 1; visibility: visible; } 62% { transform: translateY(-10px) scale(0.84); opacity: 1; visibility: visible; } 100% { transform: translateY(-17px) scale(0.68); opacity: 0; visibility: hidden; } } @keyframes eb-hero-shed { 0% { opacity: 1; translate: 0 0; visibility: visible; } 100% { opacity: 0; translate: 0 -6px; visibility: hidden; } } @keyframes eb-hero-bar { 0%, 65% { transform: translateY(-112%); visibility: hidden; } 66% { transform: translateY(-112%); visibility: visible; } 100% { transform: translateY(0); visibility: visible; } } @keyframes eb-hero-bar-in { 0%, 72% { opacity: 0; scale: 0.94; } 100% { opacity: 1; scale: 1; } } @keyframes eb-stock-rise { from { opacity: 0.55; translate: 0 18px; } to { opacity: 1; translate: 0 0; } } @keyframes eb-store-rise { from { translate: 0 18px; } to { translate: 0 0; } } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { :root:root { timeline-scope: --eb-hero, --eb-hero-id; } #eb-store-hero { view-timeline: --eb-hero block; view-timeline-inset: var(--eb-hero-bar-inset) 0; } .eb-store-hero-id { view-timeline: --eb-hero-id block; view-timeline-inset: var(--eb-hero-bar-inset) 0; } .eb-store-hero-montage, .eb-store-hero-montage img, .eb-store-hero-dim, .eb-store-kicker, .eb-store-social, .eb-store-meta, .eb-store-hero-actions, .eb-store-hero-id, .eb-store-sticky, .eb-store-sticky-in { animation-range: exit; animation-fill-mode: both; animation-timing-function: linear; } .eb-store-hero-montage, .eb-store-hero-montage img, .eb-store-hero-dim { animation-timeline: --eb-hero; } .eb-store-kicker, .eb-store-social, .eb-store-meta, .eb-store-hero-actions { animation-timeline: view(block var(--eb-hero-bar-inset) 0); } .eb-store-hero-id, .eb-store-sticky, .eb-store-sticky-in { animation-timeline: --eb-hero-id; } .eb-store-hero-montage { animation-name: eb-hero-push; } .eb-store-hero-montage--deep { animation-name: eb-hero-push, eb-hero-recede; } .eb-store-hero-montage img:nth-child(1) { animation-name: eb-hero-drift-1; } .eb-store-hero-montage img:nth-child(2) { animation-name: eb-hero-drift-2; } .eb-store-hero-montage img:nth-child(3) { animation-name: eb-hero-drift-3; } .eb-store-hero-montage img:nth-child(4) { animation-name: eb-hero-drift-4; } .eb-store-hero-montage img:nth-child(5) { animation-name: eb-hero-drift-5; } .eb-store-hero-dim { animation-name: eb-hero-dim; } .eb-store-hero-id { animation-name: eb-hero-condense; transform-origin: top left; } .eb-store-kicker, .eb-store-social, .eb-store-meta, .eb-store-hero-actions { animation-name: eb-hero-shed; } .eb-store-sticky { animation-name: eb-hero-bar; transition: none; } .eb-store-sticky-in { animation-name: eb-hero-bar-in; transform-origin: left center; } #eb-store-grid .eb-card { animation-name: eb-stock-rise; animation-timeline: view(); animation-range: entry 5% entry 48%; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } @media (max-width: 720px) { :root:root { --eb-hero-bar-inset: 56px; } } } } .eb-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .eb-news-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .eb-news-grid { grid-template-columns: 1fr; } } .eb-news-card-link { display: block; height: 100%; } .eb-news-card { background-color: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease; } .eb-news-card:hover { border-color: var(--eb-orange); box-shadow: var(--eb-shadow); transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .eb-news-card { transition: none; } .eb-news-card:hover { transform: none; } } .eb-news-card-media { aspect-ratio: 16 / 9; background: var(--eb-surface-2); overflow: hidden; } .eb-news-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .eb-news-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .eb-news-card-date { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-orange-ink); } .eb-news-card-title { font-family: var(--eb-display); font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--eb-text); margin: 0; } .eb-news-card-excerpt { font-size: 0.86rem; line-height: 1.5; color: var(--eb-body); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .eb-news-card-title { transition: color 160ms ease; } .eb-news-card:hover .eb-news-card-title { color: var(--eb-orange-ink); } .eb-news-card--text { background: linear-gradient(180deg, rgba(232, 99, 10, 0.05) 0%, rgba(232, 99, 10, 0) 42%), var(--eb-surface); } .eb-news-card--text .eb-news-card-body { padding-top: 22px; gap: 10px; } .eb-news-card--text .eb-news-card-title { font-size: 1.1rem; } .eb-news-card--text .eb-news-card-excerpt { -webkit-line-clamp: 4; } .eb-news-card-more { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 700; color: var(--eb-orange-ink); } .eb-news-card-more-arrow { transition: transform 160ms ease; } .eb-news-card:hover .eb-news-card-more-arrow { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .eb-news-card-title, .eb-news-card-more-arrow { transition: none; } .eb-news-card:hover .eb-news-card-more-arrow { transform: none; } } .eb-news-head { margin-bottom: 4px; } .eb-news-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .eb-news-date { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-orange-ink); } .eb-news-readtime { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-news-readtime::before { content: "·"; margin-right: 8px; color: var(--eb-border-2); } .eb-news-hero { position: relative; display: grid; overflow: hidden; border: 1px solid var(--eb-border); border-radius: 18px; text-decoration: none; transition: border-color 200ms ease, box-shadow 200ms ease; } .eb-news-hero.has-cover { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: 320px; background: var(--eb-surface); } .eb-news-hero.is-textual { display: block; background: radial-gradient(85% 130% at 90% -15%, rgba(232, 99, 10, 0.20) 0%, rgba(232, 99, 10, 0) 60%), linear-gradient(160deg, #1C1C22 0%, #121216 60%, #0E0E11 100%); } .eb-news-hero:hover { border-color: var(--eb-tint-border); box-shadow: var(--eb-shadow); } .eb-news-hero-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(28px, 4vw, 48px); position: relative; z-index: 1; } .eb-news-hero.is-textual .eb-news-hero-body { max-width: 66ch; } .eb-news-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eb-orange-ink); margin-bottom: 16px; } .eb-news-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--eb-orange); box-shadow: 0 0 8px rgba(232, 99, 10, 0.7); } .eb-news-hero-title { font-family: var(--eb-display); font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--eb-text); margin: 0 0 14px; text-wrap: balance; transition: color 180ms ease; } .eb-news-hero-excerpt { font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.6; color: var(--eb-body); margin: 0 0 24px; max-width: 58ch; text-wrap: pretty; } .eb-news-more { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: 0.92rem; font-weight: 700; color: var(--eb-orange-ink); } .eb-news-more-arrow { transition: transform 180ms ease; } .eb-news-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 260ms cubic-bezier(0.2, 1, 0.3, 1); } .eb-news-hero-cover { position: relative; overflow: hidden; background: var(--eb-surface-2); } .eb-news-hero-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 420ms cubic-bezier(0.2, 1, 0.3, 1); } .eb-news-hero:hover .eb-news-hero-title { color: var(--eb-orange-ink); } .eb-news-hero:hover .eb-news-more::after { transform: scaleX(1); } .eb-news-hero:hover .eb-news-more-arrow { transform: translateX(3px); } .eb-news-hero.has-cover:hover .eb-news-hero-cover img { transform: scale(1.04); } .eb-news-list { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--eb-border); } .eb-news-item { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 22px 4px; border-bottom: 1px solid var(--eb-border); text-decoration: none; } .eb-news-item-rail { display: flex; flex-direction: column; gap: 3px; } .eb-news-item-day { font-family: var(--eb-display); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em; color: var(--eb-orange-ink); transition: color 160ms ease; } .eb-news-item-year { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; color: var(--eb-muted); } .eb-news-item-body { min-width: 0; } .eb-news-item-title { font-family: var(--eb-display); font-weight: 700; font-size: 1.18rem; line-height: 1.3; color: var(--eb-text); margin: 0 0 5px; text-wrap: pretty; transition: color 160ms ease; } .eb-news-item-excerpt { font-size: 0.9rem; line-height: 1.5; color: var(--eb-muted); margin: 0; max-width: 70ch; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .eb-news-item-aside { display: flex; align-items: center; gap: 16px; justify-self: end; } .eb-news-item-thumb { width: 88px; height: 60px; border-radius: 10px; overflow: hidden; background: var(--eb-surface-2); flex: none; display: block; } .eb-news-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 320ms cubic-bezier(0.2, 1, 0.3, 1); } .eb-news-item-readtime { margin-top: 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); white-space: nowrap; } .eb-news-item-arrow { color: var(--eb-muted); font-size: 1.15rem; transition: color 160ms ease, transform 160ms ease; } .eb-news-item:hover .eb-news-item-title { color: var(--eb-orange-ink); } .eb-news-item:hover .eb-news-item-day { color: var(--eb-orange-hover); } .eb-news-item:hover .eb-news-item-arrow { color: var(--eb-orange-ink); transform: translateX(3px); } .eb-news-item:hover .eb-news-item-thumb img { transform: scale(1.05); } .eb-news-end { margin-top: 28px; color: var(--eb-muted); font-size: 0.92rem; } .eb-news-empty-glyph { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid var(--eb-border); background: radial-gradient(circle at 50% 25%, rgba(232, 99, 10, 0.20) 0%, rgba(232, 99, 10, 0) 70%), var(--eb-surface); } .eb-news-empty-glyph span { font-family: var(--eb-display); font-weight: 800; font-size: 1.1rem; letter-spacing: 0.04em; color: var(--eb-orange-ink); } .eb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .eb-app-only { display: none; } html[data-app="twa"] .eb-app-only { display: block; } html[data-app="twa"] .eb-web-only { display: none !important; } .eb-news-hero:focus-visible, .eb-news-item:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 3px; } .eb-news-hero:focus-visible { border-radius: 18px; } @media (prefers-reduced-motion: reduce) { .eb-news-hero, .eb-news-hero-title, .eb-news-more::after, .eb-news-more-arrow, .eb-news-hero-cover img, .eb-news-item-title, .eb-news-item-day, .eb-news-item-arrow, .eb-news-item-thumb img { transition: none; } .eb-news-hero:hover .eb-news-more::after { transform: none; } .eb-news-hero:hover .eb-news-more-arrow, .eb-news-item:hover .eb-news-item-arrow { transform: none; } .eb-news-hero.has-cover:hover .eb-news-hero-cover img, .eb-news-item:hover .eb-news-item-thumb img { transform: none; } } @media (max-width: 760px) { .eb-news-hero.has-cover { grid-template-columns: 1fr; min-height: 0; } .eb-news-hero-cover { order: -1; aspect-ratio: 16 / 9; } .eb-news-hero-cover img { position: static; } } @media (max-width: 620px) { .eb-news-item { grid-template-columns: 1fr; gap: 8px; align-items: start; } .eb-news-item-rail { flex-direction: row; align-items: baseline; gap: 8px; } .eb-news-item-rail .eb-news-item-readtime { display: none; } .eb-news-item-aside { display: none; } } .eb-article { max-width: 760px; margin: 0 auto; } .eb-article-back { display: inline-block; font-size: 0.85rem; font-weight: 600; color: var(--eb-orange-ink); margin-bottom: 24px; } .eb-article-back:hover { color: var(--eb-orange-hover); } .eb-article-date { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-orange-ink); margin-bottom: 10px; } .eb-article-title { font-family: var(--eb-display); font-weight: 800; font-size: clamp(1.7rem, 4.5vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--eb-text); margin: 0 0 16px; } .eb-article-lead { font-size: clamp(1.05rem, 2.5vw, 1.15rem); line-height: 1.55; color: var(--eb-body); margin: 0 0 28px; } .eb-article-masthead { margin-bottom: 28px; } .eb-article-masthead .eb-article-lead { margin-bottom: 0; } .eb-article-body.eb-prose :is(h2, h3) { scroll-margin-top: 88px; } .eb-article-cover { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--eb-border); margin-bottom: 32px; display: block; } .eb-article-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--eb-border); } .eb-article-back--foot { margin-bottom: 0; } .eb-guides-head { max-width: 880px; margin: 0 auto 26px; } .eb-guides-list { list-style: none; margin: 6px auto 0; padding: 0; max-width: 880px; border-top: 1px solid var(--eb-border); } .eb-guides-list > li { border-bottom: 1px solid var(--eb-border); } .eb-guide-row { display: grid; grid-template-columns: 152px minmax(0, 1fr) 18px; align-items: center; gap: 26px; padding: 24px 16px; text-decoration: none; border-radius: 14px; transition: background-color 220ms ease; } .eb-guide-row:hover { background-color: var(--eb-surface); } .eb-guide-row.has-no-thumb { grid-template-columns: minmax(0, 1fr) 18px; } .eb-guide-row-thumb { position: relative; width: 152px; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: var(--eb-surface-2); border: 1px solid var(--eb-border); flex: none; } .eb-guide-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.96); transition: transform 480ms cubic-bezier(0.2, 1, 0.3, 1), filter 300ms ease; } .eb-guide-row-body { min-width: 0; } .eb-guide-row-title { font-family: var(--eb-display); font-weight: 700; font-size: 1.18rem; line-height: 1.28; letter-spacing: -0.01em; color: var(--eb-text); margin: 0 0 7px; text-wrap: pretty; transition: color 180ms ease; } .eb-guide-row-excerpt { font-size: 0.92rem; line-height: 1.55; color: var(--eb-body); margin: 0 0 12px; max-width: 64ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .eb-guide-row-meta { display: inline-flex; align-items: center; gap: 9px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-guide-row-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--eb-orange); flex: none; } .eb-guide-row-go { justify-self: end; color: var(--eb-muted); font-size: 1.1rem; opacity: 0.5; transition: color 180ms ease, transform 220ms cubic-bezier(0.2, 1, 0.3, 1), opacity 180ms ease; } .eb-guide-row:hover .eb-guide-row-title { color: var(--eb-orange-ink); } .eb-guide-row:hover .eb-guide-row-thumb img { transform: scale(1.03); filter: saturate(1.02); } .eb-guide-row:hover .eb-guide-row-go { color: var(--eb-orange-ink); opacity: 1; transform: translateX(3px); } .eb-guides-empty-glyph { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid var(--eb-border); background: var(--eb-surface); color: var(--eb-muted); } .eb-guide { max-width: 720px; margin: 0 auto; } .eb-guide-back { display: inline-block; font-size: 0.85rem; font-weight: 600; color: var(--eb-orange-ink); margin-bottom: 26px; } .eb-guide-back:hover { color: var(--eb-orange-hover); } .eb-guide-masthead { margin-bottom: 30px; } .eb-guide-label { display: inline-flex; align-items: center; gap: 9px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eb-muted); margin-bottom: 14px; } .eb-guide-label-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--eb-orange); box-shadow: 0 0 8px rgba(232, 99, 10, 0.6); flex: none; } .eb-guide-label-readtime::before, .eb-guide-label-part::before { content: "·"; margin: 0 9px 0 3px; color: var(--eb-border-2); } .eb-guide-title { font-family: var(--eb-display); font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1.16; letter-spacing: -0.03em; color: var(--eb-text); margin: 0 0 18px; text-wrap: balance; } .eb-guide-lead { font-size: 1.16rem; line-height: 1.6; color: var(--eb-body); margin: 0; text-wrap: pretty; } .eb-guide-dates { margin: 10px 0 0; font-size: 0.85rem; color: var(--eb-muted); } .eb-guide-byline { color: var(--eb-body); } .eb-guide-cover { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--eb-border); margin-bottom: 34px; display: block; } .eb-guide-body.eb-prose { max-width: 44em; font-size: 1.05rem; line-height: 1.78; } .eb-guide-body.eb-prose h2 { margin-top: 44px; } .eb-guide-body.eb-prose h3 { margin-top: 34px; } .eb-guide-body.eb-prose :is(h2, h3) { scroll-margin-top: 88px; } .eb-guide-body.eb-prose blockquote { margin: 34px 0; padding: 20px 24px; border: 1px solid var(--eb-tint-border); border-radius: var(--eb-radius-card, 14px); background: var(--eb-tint-bg); color: var(--eb-text); font-style: normal; } .eb-guide-body.eb-prose blockquote > *:last-child { margin-bottom: 0; } .eb-prose a.eb-prose-morph { text-decoration-style: dotted; text-underline-offset: 3px; } .eb-prose a.eb-prose-morph:hover { text-decoration-style: solid; } .eb-guide-progress { position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--eb-orange); transform: scaleX(0); transform-origin: 0 50%; z-index: 1200; animation: eb-read-progress linear both; animation-timeline: scroll(root block); } @keyframes eb-read-progress { to { transform: scaleX(1); } } @supports not (animation-timeline: scroll(root block)) { .eb-guide-progress { display: none; } } .eb-guide-toc { margin: 0 0 32px; border: 1px solid var(--eb-border); border-radius: var(--eb-radius-card, 14px); padding: 14px 18px; background: var(--eb-surface); } .eb-guide-toc-summary { cursor: pointer; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-guide-toc-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .eb-guide-toc-list a { color: var(--eb-muted); text-decoration: none; font-size: 0.86rem; line-height: 1.4; border-left: 2px solid transparent; padding-left: 12px; display: block; transition: color 120ms ease, border-color 120ms ease; } .eb-guide-toc-list a:hover { color: var(--eb-text); border-left-color: var(--eb-orange); } .eb-guide-toc-list li[data-level="3"] a { padding-left: 24px; font-size: 0.8rem; } @media (min-width: 1280px) { .eb-guide, .eb-article { display: grid; align-items: start; max-width: none; } .eb-guide { grid-template-columns: minmax(0, 1fr) minmax(0, 46em) minmax(0, 1fr); } .eb-article { grid-template-columns: minmax(0, 1fr) minmax(0, 36em) minmax(0, 1fr); } .eb-guide > *:not(.eb-guide-toc), .eb-article > *:not(.eb-guide-toc) { grid-column: 2; } .eb-guide-toc { grid-column: 1; grid-row: 1 / span 99; align-self: start; justify-self: end; width: 170px; margin: 0 32px 0 0; position: sticky; top: 96px; border: 0; border-left: 1px solid var(--eb-border); border-radius: 0; padding: 2px 0 2px 0; background: transparent; } .eb-guide-toc-summary { list-style: none; cursor: default; padding-left: 12px; } .eb-guide-toc-summary::-webkit-details-marker { display: none; } .eb-guide-toc::details-content { content-visibility: visible; block-size: auto; } } .eb-guide-next { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--eb-border); } .eb-guide-next-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eb-muted); margin-bottom: 16px; } .eb-guide-next-links { display: flex; flex-wrap: wrap; gap: 12px; } .eb-guide-next-share { margin-top: 22px; } .eb-guide-next-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--eb-border-2); border-radius: 999px; font-size: 0.92rem; font-weight: 600; color: var(--eb-text); text-decoration: none; } .eb-guide-next-link:hover, .eb-guide-next-link:focus-visible { border-color: var(--eb-orange); color: var(--eb-text); } .eb-guide-next-link--primary { background: var(--eb-orange); border-color: var(--eb-orange); color: var(--eb-on-orange); } .eb-guide-next-link--primary:hover, .eb-guide-next-link--primary:focus-visible { background: var(--eb-orange-hover); border-color: var(--eb-orange-hover); color: var(--eb-on-orange); } .eb-guides-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .eb-guides-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .eb-guides-cards { grid-template-columns: 1fr; } } .eb-guide-card-link { display: block; height: 100%; } .eb-guide-card { height: 100%; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; transition: border-color 180ms ease; } .eb-guide-card:hover { border-color: var(--eb-tint-border); } .eb-guide-card-media { width: 92px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--eb-surface-2); flex: none; } .eb-guide-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 420ms cubic-bezier(0.2, 1, 0.3, 1); } .eb-guide-card-media.is-empty { display: grid; place-items: center; } .eb-guide-card-mono { font-family: var(--eb-display); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.06em; color: var(--eb-muted); } .eb-guide-card-body { min-width: 0; } .eb-guide-card-title { font-family: var(--eb-display); font-weight: 700; font-size: 0.98rem; line-height: 1.32; color: var(--eb-text); margin: 0 0 8px; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 160ms ease; } .eb-guide-card-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-guide-card:hover .eb-guide-card-title { color: var(--eb-orange-ink); } .eb-guide-card:hover .eb-guide-card-media img { transform: scale(1.04); } .eb-guide-row:focus-visible, .eb-guide-card-link:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 3px; border-radius: 14px; } @media (prefers-reduced-motion: reduce) { .eb-guide-row, .eb-guide-row-title, .eb-guide-row-thumb img, .eb-guide-row-go, .eb-guide-card, .eb-guide-card-title, .eb-guide-card-media img { transition: none; } .eb-guide-row:hover .eb-guide-row-thumb img, .eb-guide-row:hover .eb-guide-row-go, .eb-guide-card:hover .eb-guide-card-media img { transform: none; } } @media (max-width: 620px) { .eb-guide-row { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 18px 10px; } .eb-guide-row.has-no-thumb { grid-template-columns: minmax(0, 1fr); } .eb-guide-row-thumb { width: 96px; } .eb-guide-row-go { display: none; } .eb-guide-card { grid-template-columns: 72px minmax(0, 1fr); } .eb-guide-card-media { width: 72px; } } .eb-qa-body { max-width: 72ch; } .eb-qa-count { font-size: 0.85rem; font-weight: 700; color: var(--eb-muted); margin-left: 10px; vertical-align: 2px; } .eb-qa-list { list-style: none; margin: 0; padding: 0; } .eb-qa-pair { padding: 22px 0; } .eb-qa-pair + .eb-qa-pair { border-top: 1px solid var(--eb-border); } .eb-qa-pair:first-child { padding-top: 4px; } .eb-qa-q { margin: 0 0 4px; color: var(--eb-text); font-weight: 600; font-size: 1rem; line-height: 1.5; text-wrap: pretty; } .eb-qa-meta { font-size: 0.78rem; color: var(--eb-muted); } .eb-qa-answer { display: flex; gap: 12px; margin-top: 14px; padding-left: 4px; } .eb-qa-avatar { width: 34px; height: 34px; min-width: 34px; font-size: 0.9rem; } .eb-qa-answer-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; } .eb-qa-store { font-family: var(--eb-display); font-weight: 700; font-size: 0.9rem; color: var(--eb-text); } .eb-qa-report { display: flex; justify-content: flex-end; margin-top: 4px; } .eb-qa-a { margin: 0; color: var(--eb-body); font-size: 0.95rem; line-height: 1.7; white-space: pre-line; text-wrap: pretty; } .eb-qa-mine { margin-top: 26px; padding: 14px 16px; background: var(--eb-tint-bg); border: 1px solid var(--eb-tint-border); border-radius: 12px; } .eb-qa-mine-title { font-size: 0.78rem; font-weight: 700; color: var(--eb-orange-ink); margin-bottom: 8px; } .eb-qa-mine-row { display: flex; align-items: center; gap: 12px; } .eb-qa-mine-row + .eb-qa-mine-row { margin-top: 10px; } .eb-qa-mine-main { flex: 1; min-width: 0; } .eb-qa-mine-q { margin: 0; color: var(--eb-text); font-size: 0.92rem; line-height: 1.5; } .eb-qa-withdraw { flex-shrink: 0; } .eb-qa-compose { margin-top: 26px; } .eb-qa-compose-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .eb-qa-preview { padding: 16px 18px; background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 12px; animation: eb-qa-fade 150ms ease-out; } .eb-qa-preview-intro { font-size: 0.82rem; color: var(--eb-muted); margin-bottom: 8px; } .eb-qa-preview-text { margin: 0 0 6px; color: var(--eb-text); font-weight: 600; font-size: 1rem; line-height: 1.55; } .eb-qa-empty { margin: 0 0 4px; color: var(--eb-body); font-size: 0.95rem; } .eb-qa-footnote { font-size: 0.78rem; color: var(--eb-muted); line-height: 1.5; max-width: 46ch; } .eb-qa-footnote a { white-space: nowrap; } .eb-qa-signin { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; color: var(--eb-body); font-size: 0.95rem; } @keyframes eb-qa-fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .eb-qa-preview { animation: none; } } .eb-qi-list { max-width: 860px; } .eb-qi-row { display: flex; gap: 16px; padding: 20px 0; } .eb-qi-row + .eb-qi-row { border-top: 1px solid var(--eb-border); } .eb-qi-thumb { width: 56px; height: 56px; min-width: 56px; border-radius: 10px; overflow: hidden; background: var(--eb-surface); border: 1px solid var(--eb-border); display: flex; align-items: center; justify-content: center; } .eb-qi-thumb img { width: 100%; height: 100%; object-fit: cover; } .eb-qi-main { flex: 1; min-width: 0; } .eb-qi-meta { font-size: 0.78rem; color: var(--eb-muted); display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .eb-qi-listing { color: var(--eb-body); font-weight: 600; text-decoration: none; } .eb-qi-listing:hover { color: var(--eb-orange-ink); } .eb-qi-q { margin: 0 0 10px; color: var(--eb-text); font-weight: 600; font-size: 1rem; line-height: 1.5; text-wrap: pretty; } .eb-qi-a { margin: 0 0 8px; color: var(--eb-body); font-size: 0.92rem; line-height: 1.65; white-space: pre-line; } .eb-qi-composer { margin-top: 4px; } .eb-qi-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; } .eb-qi-publish { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .eb-qi-hint { font-size: 0.78rem; color: var(--eb-muted); max-width: 40ch; } @media (max-width: 560px) { .eb-qi-thumb { display: none; } } .eb-bulk-shared .mud-card-header { padding-bottom: 0; } .eb-bulk-rows { border: 1px solid var(--eb-border); border-radius: 12px; background: var(--eb-surface); margin-bottom: 12px; overflow: hidden; } .eb-bulk-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 12px 9px 34px; } .eb-bulk-row + .eb-bulk-row { border-top: 1px solid var(--eb-border); } .eb-bulk-rownum { position: absolute; left: 12px; top: 17px; font-family: var(--eb-display); font-weight: 700; font-size: 0.82rem; color: var(--eb-muted); } .eb-bulk-f-title { flex: 1 1 200px; min-width: 150px; } .eb-bulk-f-sex { flex: 0 0 124px; } .eb-bulk-f-wt { flex: 0 0 108px; } .eb-bulk-f-price { flex: 0 0 116px; } .eb-bulk-f-traits { flex: 1 1 220px; min-width: 160px; } .eb-bulk-row > [class^="eb-bulk-f-"] > .mud-input-control, .eb-bulk-row > [class^="eb-bulk-f-"] > .mud-select, .eb-bulk-row > [class^="eb-bulk-f-"] > .mud-autocomplete { width: 100%; margin: 0; } .eb-bulk-row-actions { display: flex; gap: 2px; align-items: center; margin-left: auto; } .eb-bulk-row-dup { color: var(--eb-muted); } .eb-bulk-row-dup:hover { color: var(--eb-orange-ink); } .eb-bulk-row-remove { color: var(--eb-muted); } .eb-bulk-row-remove:hover { color: var(--eb-error); } .eb-bulk-row-chips { flex-basis: 100%; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 0 0 2px 0; } .eb-bulk-addrow { display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: center; border: 1px dashed var(--eb-border-2); background: none; color: var(--eb-body); font-family: var(--eb-display); font-weight: 600; font-size: 0.9rem; padding: 12px; border-radius: 12px; cursor: pointer; transition: border-color 140ms ease, color 140ms ease; } .eb-bulk-addrow:hover:not(:disabled) { border-color: var(--eb-orange); color: var(--eb-text); } .eb-bulk-addrow:disabled { opacity: 0.5; cursor: not-allowed; } .eb-bulk-actionbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 14px 0; background: var(--eb-page-bg); border-top: 1px solid var(--eb-border); z-index: 3; } .eb-bulk-quota { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; font-size: 0.85rem; } .eb-bulk-quota-used { color: var(--eb-body); font-weight: 600; } .eb-bulk-quota-adding { color: var(--eb-muted); font-size: 0.8rem; } .eb-bulk-quota-over { color: var(--eb-error); font-weight: 600; font-size: 0.8rem; } .eb-bulk-quota-link { color: var(--eb-orange-ink) !important; font-weight: 700; font-size: 0.8rem; text-decoration: none; } .eb-bulk-quota-link:hover { color: var(--eb-orange-hover) !important; text-decoration: underline; } .eb-bulk-finish-head { margin: 4px 0 14px; } .eb-bulk-finish-count { font-size: 0.85rem; font-weight: 600; color: var(--eb-muted); } .eb-bulk-finish-item { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--eb-border); border-radius: 12px; background: var(--eb-surface); margin-bottom: 10px; transition: border-color 160ms ease; } .eb-bulk-finish-item--live { border-color: var(--eb-border-2); } .eb-bulk-finish-main { flex: 1; min-width: 0; } .eb-bulk-finish-title { font-family: var(--eb-display); font-weight: 600; color: var(--eb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eb-bulk-finish-state { margin-top: 3px; } .eb-bulk-finish-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; } .eb-bulk-state { font-size: 0.75rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; } .eb-bulk-state--draft { color: var(--eb-muted); background: rgba(255, 255, 255, 0.06); } .eb-bulk-state--ready { color: var(--eb-orange-on-tint); background: var(--eb-tint-bg); } .eb-bulk-state--live { color: var(--eb-text); background: var(--eb-tint-bg); } .eb-bulk-error-list { margin: 0; padding-left: 18px; font-size: 0.85rem; } .eb-bulk-finish-footer { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; } @media (max-width: 640px) { .eb-bulk-row { padding: 10px 12px 10px 30px; gap: 8px; } .eb-bulk-rownum { left: 10px; top: 20px; } .eb-bulk-f-title { flex-basis: 100%; min-width: 0; padding-right: 80px; } .eb-bulk-f-sex { flex: 1.35 1 0; min-width: 7.75rem; } .eb-bulk-f-wt { flex: 1 1 0; min-width: 7.5rem; } .eb-bulk-f-price { flex: 1 1 0; min-width: 6rem; } .eb-bulk-f-traits { flex-basis: 100%; min-width: 0; } .eb-bulk-row-actions { position: absolute; top: 8px; right: 6px; margin-left: 0; gap: 4px; } .eb-bulk-row-actions .mud-icon-button { width: 44px; height: 44px; } .eb-bulk-finish-item { flex-wrap: wrap; } .eb-bulk-finish-actions { justify-content: flex-start; width: 100%; } } .eb-feedback-tab { position: fixed; right: env(safe-area-inset-right); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 1200; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 9px; background: var(--eb-surface); border: 1px solid var(--eb-border-2); border-right: none; border-radius: 12px 0 0 12px; color: var(--eb-body); cursor: pointer; transition: color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1); } .eb-feedback-tab:hover, .eb-feedback-tab:focus-visible { color: var(--eb-text); border-color: var(--eb-orange); box-shadow: var(--eb-shadow-sm); transform: translateX(-3px); } .eb-feedback-tab-ico { color: var(--eb-orange-ink); display: flex; } .eb-feedback-tab-label { writing-mode: vertical-rl; font-family: var(--eb-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; } .eb-feedback-tab-dot { display: none; } @media (prefers-reduced-motion: reduce) { .eb-feedback-tab { transition: none; } } @media (max-width: 959.98px) { .eb-feedback-tab { bottom: calc(128px + env(safe-area-inset-bottom, 0px)); padding: 12px 10px; z-index: 1190; } .eb-feedback-tab-label { display: none; } } @media (max-width: 599.98px) { .eb-feedback-tab { display: none; } } .eb-fb-seg { display: flex; gap: 4px; background: var(--eb-seg-track); border: 1px solid var(--eb-border-2); border-radius: 10px; padding: 4px; } .eb-fb-seg-btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 9px 12px; border-radius: 7px; cursor: pointer; background: none; border: none; color: var(--eb-text); font-family: var(--eb-display); font-weight: 700; font-size: 0.88rem; line-height: 1.25; text-align: center; transition: color 140ms ease, background 140ms ease; } .eb-fb-seg-btn:not(.eb-fb-seg-btn--active):hover { background: var(--eb-seg-hover); } .eb-fb-seg-btn--active { background: var(--eb-orange); color: var(--eb-on-orange); } .eb-fb-context { display: flex; align-items: center; gap: 7px; max-width: 100%; font-size: 0.78rem; color: var(--eb-muted); background: var(--eb-surface-2); border: 1px solid var(--eb-border); border-radius: 8px; padding: 7px 11px; } .eb-fb-context code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--eb-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .eb-fb-login { text-align: center; padding: 10px 4px 6px; } .eb-fb-login-ico { color: var(--eb-orange-ink); margin-bottom: 10px; } .eb-fb-login-title { font-family: var(--eb-display); font-weight: 800; font-size: 1.15rem; color: var(--eb-text); margin-bottom: 6px; } .eb-fb-login-hint { color: var(--eb-muted); font-size: 0.88rem; line-height: 1.5; max-width: 34ch; margin: 0 auto 18px; } .eb-fb-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; } .eb-fb-spacer { flex: 1 1 auto; } .eb-fb-filter { max-width: 190px; } .eb-fb-toolbar .eb-fb-filter { margin-top: 0; margin-bottom: 0; } @media (max-width: 767.98px) { .eb-fb-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; align-items: stretch; } .eb-fb-toolbar > .eb-fb-spacer { display: none; } .eb-fb-toolbar > .eb-fb-seg, .eb-fb-toolbar > .eb-fb-filter { grid-column: 1 / -1; } .eb-fb-toolbar .eb-fb-filter { max-width: none; } .eb-fb-toolbar > .eb-fb-seg { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } .eb-fb-toolbar > .eb-fb-seg::-webkit-scrollbar { display: none; } .eb-fb-toolbar > .eb-fb-seg > .eb-fb-seg-btn { flex: 0 0 auto; white-space: nowrap; } .eb-fb-toolbar > .mud-button-root { width: 100%; min-height: 44px; } .eb-fb-toolbar > .mud-input-control-boolean-input { grid-column: 1 / -1; } } @media (max-width: 359.98px) { .eb-fb-toolbar { grid-template-columns: 1fr; } } .eb-fb-list { display: flex; flex-direction: column; gap: 12px; } .eb-fb-row { display: flex; gap: 14px; background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; padding: 16px; transition: border-color 140ms ease; } .eb-fb-row:hover { border-color: var(--eb-border-2); } .eb-fb-row-body { flex: 1 1 auto; min-width: 0; } .eb-fb-row-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; } .eb-fb-row-title { display: inline-block; font-family: var(--eb-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--eb-text); text-decoration: none; } .eb-fb-row-title:hover { color: var(--eb-orange-ink); } .eb-fb-row-excerpt { color: var(--eb-body); font-size: 0.9rem; line-height: 1.55; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .eb-fb-row-byline { color: var(--eb-muted); font-size: 0.78rem; margin-top: 11px; } .eb-fb-rail { display: flex; flex-direction: column; align-items: center; gap: 2px; align-self: flex-start; min-width: 54px; padding: 7px 6px; background: var(--eb-surface-2); border: 1px solid var(--eb-border); border-radius: 12px; } .eb-fb-rail--lg { min-width: 62px; padding: 10px 8px; } .eb-fb-rail-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 26px; border: none; border-radius: 8px; background: none; color: var(--eb-muted); cursor: pointer; transition: color 120ms ease, background 120ms ease; } .eb-fb-rail-btn:hover:not(:disabled) { color: var(--eb-text); background: rgba(255, 255, 255, 0.06); } .eb-fb-rail-btn:disabled { cursor: default; opacity: 0.55; } .eb-fb-rail-btn--active { color: var(--eb-orange-ink); } @media (pointer: coarse) { .eb-fb-rail { min-width: 60px; } .eb-fb-rail-btn { width: 44px; height: 44px; } } .eb-fb-rail-score { font-family: var(--eb-display); font-weight: 800; font-size: 1rem; color: var(--eb-text); font-variant-numeric: tabular-nums; line-height: 1.1; } .eb-fb-rail--lg .eb-fb-rail-score { font-size: 1.25rem; } .eb-fb-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 700; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--eb-tint-bg); color: var(--eb-orange-on-tint); border: 1px solid var(--eb-tint-border); white-space: nowrap; } .eb-fb-badge .mud-icon-root { font-size: 0.95rem; } .eb-fb-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: var(--eb-body); background: var(--eb-surface-2); border: 1px solid var(--eb-border-2); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .eb-fb-status-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .eb-fb-dot--new { background: var(--eb-muted); } .eb-fb-dot--review { background: var(--eb-info); } .eb-fb-dot--planned { background: var(--eb-welfare-accent); } .eb-fb-dot--fixed { background: var(--eb-success); } .eb-fb-dot--dismissed { background: var(--eb-border-2); } .eb-fb-dot--duplicate { background: var(--mud-palette-secondary); } .eb-fb-duplicate { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--eb-muted); font-size: 0.82rem; } .eb-fb-duplicate a { color: var(--eb-orange-on-tint); font-weight: 700; } .eb-fb-duplicate--detail { align-items: flex-start; padding: 13px 15px; margin: 0 0 18px; background: var(--eb-tint-bg); border: 1px solid var(--eb-tint-border); } .eb-fb-duplicate-title { color: var(--eb-text); font-weight: 700; } .eb-fb-duplicate-hint { margin-top: 2px; font-size: 0.78rem; } .eb-fb-response { margin-top: 12px; padding: 11px 14px; background: var(--eb-tint-bg); border: 1px solid var(--eb-tint-border); border-radius: 10px; } .eb-fb-response-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-orange-ink); margin-bottom: 4px; } .eb-fb-response-text { color: var(--eb-body); font-size: 0.9rem; line-height: 1.5; } .eb-fb-detail { display: flex; gap: 18px; align-items: flex-start; } .eb-fb-detail-body { flex: 1 1 auto; min-width: 0; } .eb-fb-detail-title { font-family: var(--eb-display); font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.1rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--eb-text); margin: 10px 0 0; text-wrap: balance; } .eb-fb-detail-text { color: var(--eb-body); font-size: 0.98rem; line-height: 1.7; white-space: pre-wrap; max-width: 68ch; } .eb-fb-admin-table .eb-fb-admin-title { color: var(--eb-text); font-weight: 600; text-decoration: none; } .eb-fb-admin-table .eb-fb-admin-title:hover { color: var(--eb-orange-ink); } .eb-fb-admin-duplicate { color: var(--eb-muted); font-size: 0.75rem; margin-top: 3px; } .eb-fb-admin-duplicate a { color: var(--eb-orange-ink); } .eb-fb-admin-score { font-family: var(--eb-display); font-weight: 800; font-variant-numeric: tabular-nums; } .eb-fb-manage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .eb-fb-manage-score { color: var(--eb-muted); font-size: 0.82rem; font-weight: 600; } .eb-fb-manage-title { font-family: var(--eb-display); font-weight: 700; font-size: 1.1rem; color: var(--eb-text); letter-spacing: -0.01em; margin-bottom: 6px; } .eb-fb-manage-details { color: var(--eb-body); font-size: 0.9rem; line-height: 1.55; margin: 0 0 16px; white-space: pre-wrap; } @media (max-width: 560px) { .eb-fb-detail { flex-direction: column; } .eb-fb-detail .eb-fb-rail { flex-direction: row; min-width: 0; align-self: flex-start; justify-content: flex-start; gap: 10px; } .eb-fb-detail .eb-fb-rail-score { min-width: 2ch; text-align: center; } } .eb-report-row { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--eb-border); } .eb-report-row--page { display: flex; justify-content: center; margin-top: 32px; padding-top: 0; border-top: none; } .eb-report-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: none; background: transparent; color: var(--eb-muted); font-size: 0.8rem; font-weight: 600; border-radius: 10px; cursor: pointer; transition: color 140ms ease, background-color 140ms ease; } .eb-report-btn:hover { color: var(--eb-text); background: rgba(255, 255, 255, 0.05); } .eb-report-btn:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 2px; } .eb-report-btn .mud-icon-root { font-size: 1rem; } .eb-report-btn--done, .eb-report-btn--done:hover { color: var(--eb-muted); background: transparent; cursor: default; } .eb-report-intro { color: var(--eb-body); font-size: 0.9rem; line-height: 1.55; margin: 0 0 16px; } .eb-report-helper { margin: 6px 0 0; font-size: 13px; color: var(--eb-muted); } .eb-report-urgent { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--eb-welfare-accent); border-radius: 10px; background: rgba(224, 164, 34, 0.10); color: var(--eb-body); font-size: 0.82rem; line-height: 1.5; } .eb-report-urgent .mud-icon-root { color: var(--eb-welfare-accent); font-size: 1.1rem; margin-top: 1px; } .eb-report-login { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 24px 8px; } .eb-report-login-ico .mud-icon-root { font-size: 2rem; color: var(--eb-muted); } .eb-report-login-title { font-family: var(--eb-display); font-weight: 800; font-size: 1.1rem; color: var(--eb-text); } .eb-report-login-hint { color: var(--eb-body); font-size: 0.88rem; margin-bottom: 8px; } .eb-rep-dot--open { background: var(--eb-welfare-accent); } .eb-rep-dot--review { background: var(--eb-info); } .eb-rep-dot--actioned { background: var(--eb-success); } .eb-rep-dot--dismissed { background: var(--eb-border-2); } .eb-rep-target { display: inline-flex; align-items: flex-start; gap: 8px; } .eb-rep-target > .mud-icon-root { font-size: 1.05rem; color: var(--eb-muted); margin-top: 2px; } .eb-rep-target-type { color: var(--eb-muted); font-size: 0.75rem; margin-top: 2px; } .eb-rep-count { display: inline-block; min-width: 1.6em; padding: 1px 7px; border-radius: 999px; background: var(--eb-surface-2); border: 1px solid var(--eb-border); color: var(--eb-body); font-size: 0.78rem; font-weight: 700; text-align: center; } .eb-rep-count--multi { background: var(--eb-tint-bg); border-color: var(--eb-tint-border); color: var(--eb-orange-ink); } .eb-rep-reason--urgent { color: var(--eb-error); font-weight: 700; } .eb-rep-manage-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .eb-rep-manage-count { color: var(--eb-orange-ink); font-weight: 700; font-size: 0.8rem; } .eb-rep-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 12px 0 16px; padding: 12px 14px; background: var(--eb-surface-2); border: 1px solid var(--eb-border); border-radius: 12px; } .eb-rep-meta > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .eb-rep-meta dt { color: var(--eb-muted); font-size: 0.7rem; font-weight: 600; } .eb-rep-meta dd { color: var(--eb-text); font-size: 0.88rem; margin: 0; word-break: break-word; } .eb-rep-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .eb-rep-handled { color: var(--eb-muted); font-size: 0.78rem; margin-top: 12px; } .eb-mod { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--eb-border); border-radius: var(--eb-radius-control, 12px); } .eb-mod-rows { display: flex; flex-direction: column; gap: 10px; margin: 0; } .eb-mod-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .eb-mod-row dt { min-width: 60px; color: var(--eb-muted); font-size: 0.7rem; font-weight: 600; } .eb-mod-row dd { display: contents; } .eb-mod-muted { color: var(--eb-muted); font-size: 0.85rem; } .eb-mod-reason { flex: 1 1 200px; font-size: 0.85rem; } .eb-mod-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; } .eb-mod-pill--live { color: var(--eb-success); background: color-mix(in srgb, var(--eb-success) 16%, transparent); } .eb-mod-pill--down { color: var(--eb-error); background: color-mix(in srgb, var(--eb-error) 16%, transparent); } .eb-mod-pill--off { color: var(--eb-muted); background: var(--eb-surface-2); border: 1px solid var(--eb-border); } .eb-mod-strikes { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; } .eb-mod-strikes i { width: 14px; height: 6px; border-radius: 3px; background: var(--eb-border); } .eb-mod-strikes i.is-on { background: var(--eb-welfare-accent); } .eb-mod-strikes[data-level="out"] i.is-on { background: var(--eb-error); } .eb-mod-strikes > span { margin-left: 6px; } .eb-mod-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--eb-radius-input, 10px); color: var(--eb-error); background: color-mix(in srgb, var(--eb-error) 12%, transparent); font-size: 0.85rem; font-weight: 600; } .eb-mod-strip .mud-icon-root { width: 1.1rem; height: 1.1rem; font-size: 1.1rem; } .eb-mod-strip > span { flex: 1 1 200px; } .eb-mod-list { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.82rem; } .eb-mod-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .eb-mod-list li.is-lifted { color: var(--eb-muted); text-decoration: line-through; } .eb-mod-list-date { color: var(--eb-muted); font-variant-numeric: tabular-nums; } .eb-mod-list-title { font-weight: 600; } .eb-mod-list-reason { flex: 1 1 160px; color: var(--eb-muted); } .eb-mod-target { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--eb-border); border-radius: var(--eb-radius-input, 10px); } .eb-mod-quote { margin: 0 0 12px; padding-left: 10px; border-left: 1px solid var(--eb-border); font-size: 0.85rem; } .eb-mod-warning { margin: 0; color: var(--eb-muted); font-size: 0.82rem; } .eb-field-hint { color: var(--eb-muted); font-size: 0.78rem; line-height: 1.45; max-width: 60ch; } .eb-field-hint--legal { padding: 10px 12px; border: 1px solid var(--eb-welfare-border); border-radius: 10px; background: var(--eb-welfare-bg); color: var(--eb-welfare-accent); font-weight: 600; } .eb-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; } .eb-rep-byref { white-space: nowrap; } .eb-rep-details-label { color: var(--eb-muted); font-size: 0.7rem; font-weight: 600; margin-bottom: 2px; } .eb-rep-queue { margin-left: 8px; font-weight: 600; } .eb-rep-queue--overdue { color: var(--eb-welfare-accent); } .eb-rep-age { font-variant-numeric: tabular-nums; white-space: nowrap; } .eb-rep-age--overdue { color: var(--eb-welfare-accent); font-weight: 700; } .eb-rep-admin-table tr.eb-rep-overdue > td { background: color-mix(in srgb, var(--eb-welfare-accent) 8%, transparent); } .eb-rep-admin-table tbody tr { cursor: default; } .eb-rep-target-type .eb-rep-count { margin-left: 6px; } .eb-mod-canned { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .eb-removed-chip { display: inline-flex; align-items: center; gap: 4px; color: var(--eb-error); font-size: 0.8rem; font-weight: 700; white-space: nowrap; } .eb-needs-photo-chip { display: inline-flex; align-items: center; gap: 4px; color: var(--eb-warning); font-size: 0.8rem; font-weight: 700; line-height: 1.2; text-align: center; } @media (pointer: coarse) { .eb-rep-admin-table .mud-button-root, .eb-fb-admin-table .mud-button-root, .eb-mod-target .mud-button-root, .eb-mod-list .mud-button-root { min-height: 44px; } .eb-rep-admin-table .mud-icon-button, .eb-fb-admin-table .mud-icon-button, .eb-mod-target .mud-icon-button, .eb-mod-list .mud-icon-button { width: 44px; height: 44px; } .eb-mod-canned .mud-chip { min-height: 44px; } } @media (max-width: 560px) { .eb-rep-meta { grid-template-columns: 1fr; } } .eb-dash-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; } .eb-dash-heading { min-width: 0; } .eb-dash-heading .eb-page-sub { max-width: 64ch; margin-bottom: 0; text-wrap: pretty; } .eb-dash-controls { display: flex; align-items: flex-end; gap: 12px; flex: none; } .eb-dash-date { width: 280px; } .eb-dash-refresh { min-height: 44px; margin-bottom: 2px; } .eb-dash-loading { display: flex; flex-direction: column; gap: 16px; } .eb-dash-skeleton { border-radius: 14px; } .eb-dash-error { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .eb-dash-update-line { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-bottom: 16px; color: var(--eb-body); font-size: 0.82rem; line-height: 1.45; } .eb-dash-update-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--eb-success); } .eb-dash-updated { margin-inline-start: auto; color: var(--eb-muted); white-space: nowrap; } .eb-dash-live { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 24px; margin-bottom: 16px; padding: 18px 22px; border: 1px solid var(--eb-tint-border); border-radius: 14px; background: var(--eb-tint-bg); } .eb-dash-live-head { display: flex; align-items: center; gap: 10px; } .eb-dash-live-head h2 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--eb-text); } .eb-dash-live-status { display: inline-flex; align-items: center; gap: 6px; color: var(--eb-muted); font-size: 0.75rem; font-weight: 600; text-transform: none; } .eb-dash-live-dot { width: 7px; height: 7px; flex: none; border-radius: 999px; background: var(--eb-success); } .eb-dash-live-status--stale .eb-dash-live-dot { background: var(--eb-muted); } .eb-dash-live-count { display: block; margin-top: 6px; font-family: var(--eb-display); font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--eb-text); font-variant-numeric: tabular-nums; transition: color 180ms ease-out; } .eb-dash-live-split { margin: 6px 0 0; color: var(--eb-muted); font-size: 0.82rem; line-height: 1.45; } .eb-dash-live-people { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-inline-start: 24px; border-inline-start: 1px solid var(--eb-tint-border); } .eb-dash-live-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 20px; margin: 0; padding: 0; list-style: none; } .eb-dash-live-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.86rem; } .eb-dash-live-avatar { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--eb-border); border-radius: 999px; background: var(--eb-surface); color: var(--eb-orange-ink); font-size: 0.68rem; font-weight: 800; letter-spacing: 0; } .eb-dash-live-name { min-width: 0; overflow: hidden; color: var(--eb-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .eb-dash-live-kind { margin-inline-start: auto; color: var(--eb-muted); font-size: 0.75rem; white-space: nowrap; } .eb-dash-live-since { min-width: 52px; color: var(--eb-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; } .eb-dash-live-none { display: flex; align-items: center; gap: 10px; min-height: 64px; color: var(--eb-muted); font-size: 0.86rem; } .eb-dash-live-none .mud-icon-root { color: var(--eb-muted); font-size: 1.25rem; } .eb-dash-live-more, .eb-dash-live-note { margin: 8px 0 0; color: var(--eb-muted); font-size: 0.76rem; } @media (max-width: 900px) { .eb-dash-live { grid-template-columns: 1fr; gap: 16px; padding: 16px; } .eb-dash-live-people { padding-inline-start: 0; padding-block-start: 16px; border-inline-start: 0; border-block-start: 1px solid var(--eb-tint-border); } .eb-dash-live-count { font-size: 2.2rem; } } .eb-dash-surface, .eb-dash-lifecycle { background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; box-shadow: none; } .eb-dash-surface { min-width: 0; padding: 24px; } .eb-dash-first-run { display: flex; align-items: center; gap: 16px; min-height: 160px; } .eb-dash-first-run > .mud-icon-root { color: var(--eb-orange-ink); font-size: 2rem; } .eb-dash-first-run h2 { margin: 0 0 4px; color: var(--eb-text); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; } .eb-dash-first-run p { max-width: 62ch; margin: 0; color: var(--eb-body); } .eb-dash-lifecycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; overflow: hidden; } .eb-dash-lifecycle-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; min-height: 112px; padding: 16px 18px; color: var(--eb-text); text-decoration: none; transition: background-color 160ms ease-out, color 160ms ease-out; } .eb-dash-lifecycle-item + .eb-dash-lifecycle-item { border-inline-start: 1px solid var(--eb-border); } a.eb-dash-lifecycle-item:hover { background: var(--eb-tint-bg); color: var(--eb-text); } .eb-dash-lifecycle-item > .mud-icon-root:first-child { color: var(--eb-muted); font-size: 1.5rem; } a.eb-dash-lifecycle-item:hover > .mud-icon-root:first-child, a.eb-dash-lifecycle-item:hover .eb-dash-metric-arrow { color: var(--eb-orange-ink); } .eb-dash-metric-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .eb-dash-metric-label { overflow: hidden; color: var(--eb-muted); font-size: 0.78rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .eb-dash-metric-copy strong { color: var(--eb-text); font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.15; } .eb-dash-metric-copy > span:last-child { color: var(--eb-muted); font-size: 0.75rem; line-height: 1.35; } .eb-dash-metric-arrow { color: var(--eb-border-2); transition: color 160ms ease-out, transform 160ms ease-out; } a.eb-dash-lifecycle-item:hover .eb-dash-metric-arrow { transform: translateX(2px); } .eb-dash-change--up { color: var(--eb-success) !important; } .eb-dash-change--down { color: var(--eb-error) !important; } .eb-dash-primary-grid, .eb-dash-secondary-grid { display: grid; gap: 16px; } .eb-dash-primary-grid { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); margin-bottom: 16px; } .eb-dash-secondary-grid { grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr); margin-bottom: 16px; } .eb-dash-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .eb-dash-section-head h2 { margin: 0; color: var(--eb-text); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance; } .eb-dash-section-head p { max-width: 54ch; margin: 4px 0 0; color: var(--eb-muted); font-size: 0.8rem; line-height: 1.5; text-wrap: pretty; } .eb-dash-period-facts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; color: var(--eb-muted); font-size: 0.75rem; line-height: 1.4; } .eb-dash-period-facts span { white-space: nowrap; } .eb-dash-period-facts strong { color: var(--eb-text); font-size: 0.84rem; font-variant-numeric: tabular-nums; } .eb-dash-chart-wrap { min-width: 0; } .eb-dash-chart-canvas { position: relative; } .eb-dash-chart { display: block; width: 100%; height: 260px; overflow: visible; } .eb-dash-chart-grid { stroke: var(--eb-border); stroke-width: 1; vector-effect: non-scaling-stroke; } .eb-dash-chart-y { position: absolute; inset: 18px auto 36px 0; display: flex; flex-direction: column; justify-content: space-between; width: 36px; color: var(--eb-muted); font-family: var(--eb-display); font-size: 0.75rem; font-variant-numeric: tabular-nums; line-height: 1; text-align: end; } .eb-dash-chart-area { fill: var(--eb-tint-bg); stroke: none; } .eb-dash-chart-line { fill: none; stroke: var(--eb-orange); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .eb-dash-chart-point { fill: var(--eb-surface); stroke: var(--eb-orange); stroke-width: 2.5; vector-effect: non-scaling-stroke; } .eb-dash-chart-axis { display: flex; justify-content: space-between; padding-inline-start: 44px; color: var(--eb-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; } .eb-dash-chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 260px; color: var(--eb-muted); text-align: center; } .eb-dash-chart-empty .mud-icon-root { color: var(--eb-border-2); font-size: 2rem; } .eb-dash-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding-inline: 8px; border-radius: 999px; background: var(--eb-tint-bg); color: var(--eb-orange-on-tint); font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; } .eb-dash-attention-list { margin-inline: -24px; } .eb-dash-attention-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 72px; padding: 12px 24px; border-top: 1px solid var(--eb-border); color: var(--eb-text); text-decoration: none; transition: background-color 160ms ease-out; } .eb-dash-attention-row:first-child { border-top: 0; } a.eb-dash-attention-row:hover { background: var(--eb-tint-bg); color: var(--eb-text); } .eb-dash-attention-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--eb-surface-2); color: var(--eb-muted); } .eb-dash-attention-icon .mud-icon-root { font-size: 1.15rem; } .eb-dash-attention-row > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .eb-dash-attention-row strong { overflow: hidden; color: var(--eb-text); font-size: 0.84rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .eb-dash-attention-row small { overflow: hidden; color: var(--eb-muted); font-size: 0.75rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .eb-dash-attention-row b { color: var(--eb-text); font-size: 0.9rem; font-variant-numeric: tabular-nums; } .eb-dash-attention-row--overdue { background: color-mix(in srgb, var(--eb-welfare-accent) 8%, transparent); } .eb-dash-attention-row--overdue small { color: var(--eb-welfare-accent); font-weight: 600; } .eb-dash-all-clear { display: flex; align-items: center; gap: 12px; min-height: 220px; color: var(--eb-success); } .eb-dash-all-clear > .mud-icon-root { font-size: 1.75rem; } .eb-dash-all-clear div { display: flex; flex-direction: column; gap: 4px; } .eb-dash-all-clear strong { color: var(--eb-text); } .eb-dash-all-clear span { color: var(--eb-muted); font-size: 0.8rem; } .eb-dash-section-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--eb-orange-ink); font-size: 0.78rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .eb-dash-section-link .mud-icon-root { font-size: 1rem; } .eb-dash-plan-list { display: flex; flex-direction: column; margin-inline: -24px; } .eb-dash-plan-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 84px; padding: 12px 24px; border-top: 1px solid var(--eb-border); color: var(--eb-text); text-decoration: none; transition: background-color 160ms ease-out; } .eb-dash-plan-row:first-child { border-top: 0; } .eb-dash-plan-row:hover { background: var(--eb-tint-bg); color: var(--eb-text); } .eb-dash-plan-row > .mud-icon-root { color: var(--eb-border-2); font-size: 1.1rem; } .eb-dash-plan-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--eb-tint-bg); color: var(--eb-orange-on-tint); font-size: 0.82rem; font-weight: 800; } .eb-dash-plan-mark--keeper { opacity: 0.72; } .eb-dash-plan-mark--hobbyist { opacity: 0.86; } .eb-dash-plan-copy { display: flex; flex-direction: column; min-width: 0; gap: 6px; } .eb-dash-plan-copy > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .eb-dash-plan-copy strong { color: var(--eb-text); font-size: 0.84rem; } .eb-dash-plan-copy b { color: var(--eb-text); font-size: 0.9rem; font-variant-numeric: tabular-nums; } .eb-dash-plan-track { height: 5px; overflow: hidden; border-radius: 999px; background: var(--eb-surface-2); } .eb-dash-plan-track > span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--eb-orange); } .eb-dash-plan-copy small { display: flex; justify-content: space-between; gap: 12px; color: var(--eb-muted); font-size: 0.75rem; font-style: normal; line-height: 1.4; } .eb-dash-plan-copy em { color: var(--eb-welfare-accent); font-style: normal; font-weight: 700; } .eb-dash-status-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .eb-dash-status-group { min-width: 0; } .eb-dash-status-group + .eb-dash-status-group { padding-inline-start: 24px; border-inline-start: 1px solid var(--eb-border); } .eb-dash-status-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--eb-border); } .eb-dash-status-heading > span { display: inline-flex; align-items: center; gap: 8px; color: var(--eb-text); font-size: 0.84rem; font-weight: 700; } .eb-dash-status-heading .mud-icon-root { color: var(--eb-muted); font-size: 1.1rem; } .eb-dash-status-heading small { color: var(--eb-orange-ink); font-size: 0.75rem; font-weight: 700; white-space: nowrap; } .eb-dash-status-group dl { margin: 0; } .eb-dash-status-group dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--eb-border); } .eb-dash-status-group dl > div:last-child { border-bottom: 0; } .eb-dash-status-group dt { display: inline-flex; align-items: center; gap: 8px; color: var(--eb-body); font-size: 0.78rem; } .eb-dash-status-group dd { margin: 0; color: var(--eb-text); font-size: 0.84rem; font-weight: 700; font-variant-numeric: tabular-nums; } .eb-dash-status-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--eb-muted); } .eb-dash-status-dot--live { background: var(--eb-success); } .eb-dash-status-dot--hold { background: var(--eb-welfare-accent); } .eb-dash-status-dot--sold { background: var(--eb-info); } @media (max-width: 1020px) { .eb-dash-primary-grid { grid-template-columns: 1fr; } .eb-dash-all-clear { min-height: 120px; } } @media (max-width: 840px) { .eb-dash-header { flex-direction: column; } .eb-dash-controls { width: 100%; } .eb-dash-lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eb-dash-lifecycle-item:nth-child(3) { border-inline-start: 0; border-top: 1px solid var(--eb-border); } .eb-dash-lifecycle-item:nth-child(4) { border-top: 1px solid var(--eb-border); } .eb-dash-secondary-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .eb-dash-error { flex-direction: column; align-items: stretch; gap: 12px; } .eb-dash-header { gap: 16px; } .eb-dash-controls { flex-direction: column; align-items: stretch; } .eb-dash-date { width: 100%; } .eb-dash-refresh { width: 100%; margin-bottom: 0; } .eb-dash-update-line { align-items: flex-start; flex-wrap: wrap; } .eb-dash-updated { width: 100%; margin-inline-start: 16px; } .eb-dash-lifecycle { grid-template-columns: 1fr; } .eb-dash-lifecycle-item + .eb-dash-lifecycle-item, .eb-dash-lifecycle-item:nth-child(3) { border-inline-start: 0; border-top: 1px solid var(--eb-border); } .eb-dash-lifecycle-item { min-height: 88px; } .eb-dash-surface { padding: 16px; } .eb-dash-section-head { flex-direction: column; margin-bottom: 16px; } .eb-dash-period-facts { justify-content: flex-start; } .eb-dash-chart { height: 220px; } .eb-dash-attention-list, .eb-dash-plan-list { margin-inline: -16px; } .eb-dash-attention-row, .eb-dash-plan-row { padding-inline: 16px; } .eb-dash-attention-row small { overflow: visible; text-overflow: clip; white-space: normal; } .eb-dash-status-groups { grid-template-columns: 1fr; gap: 24px; } .eb-dash-status-group + .eb-dash-status-group { padding-inline-start: 0; padding-top: 24px; border-inline-start: 0; border-top: 1px solid var(--eb-border); } } @media (prefers-reduced-motion: reduce) { .eb-dash-lifecycle-item, .eb-dash-metric-arrow, .eb-dash-attention-row, .eb-dash-plan-row { transition: none; } a.eb-dash-lifecycle-item:hover .eb-dash-metric-arrow { transform: none; } } .eb-notif-section-head { display: flex; align-items: baseline; gap: 12px; margin-top: 36px; } .eb-notif-section-head .eb-section-title { margin-top: 0; } .eb-notif-saved { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--eb-success, #22C07C); opacity: 0; transition: opacity 180ms ease-out; } .eb-notif-saved.is-visible { opacity: 1; } .eb-notif-saved .mud-icon-root { font-size: 1rem; } .eb-notif-sub { margin-bottom: 14px; } .eb-notif-matrix { background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; overflow: hidden; } .eb-notif-head, .eb-notif-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; align-items: center; column-gap: 8px; } .eb-notif-head { padding: 10px 20px; background: var(--eb-surface-2); border-bottom: 1px solid var(--eb-border); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-notif-row { padding: 13px 20px; } .eb-notif-row + .eb-notif-row { border-top: 1px solid var(--eb-border); } .eb-notif-name { font-weight: 600; font-size: 0.95rem; color: var(--eb-text); } .eb-notif-desc { font-size: 0.82rem; line-height: 1.45; color: var(--eb-muted); margin-top: 2px; } .eb-notif-col { display: flex; justify-content: center; text-align: center; } .eb-notif-col .mud-switch { margin: 0; } .eb-notif-hint { margin-top: 10px; font-size: 0.82rem; color: var(--eb-muted); } @media (max-width: 480px) { .eb-notif-head, .eb-notif-row { grid-template-columns: minmax(0, 1fr) 56px 56px; } .eb-notif-head { padding: 9px 14px; } .eb-notif-row { padding: 12px 14px; } } @media (prefers-reduced-motion: reduce) { .eb-notif-saved { transition: none; } } .eb-import-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--eb-border); border-radius: 10px; scrollbar-color: var(--eb-border-2) transparent; scrollbar-width: thin; mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); } .eb-import-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--eb-border); } .eb-import-row:last-child { border-bottom: 0; } .eb-import-row-body { flex: 1; min-width: 0; } @media (pointer: coarse) { .eb-import-list .mud-checkbox > .mud-button-root, .eb-import-replace .mud-checkbox > .mud-button-root { width: 44px; height: 44px; } } .eb-import-replace { padding: 10px 12px; border: 1px solid var(--eb-border); border-radius: 10px; background: var(--eb-surface-inset); } .eb-photo-tile { width: 140px; flex: 0 0 auto; } .eb-photo-frame { position: relative; width: 140px; height: 140px; overflow: hidden; border-radius: 10px; background: var(--eb-photo-bg); } .eb-photo-rotate { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 4px; height: 34px; background: rgba(12, 12, 14, 0.82); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .eb-photo-rotate .mud-button-root { width: 30px; height: 30px; color: var(--eb-on-photo); } .eb-photo-rotate .mud-button-root:hover:not(:disabled) { color: var(--eb-orange-on-dark); } .eb-photo-rotate .mud-button-root:disabled { color: var(--eb-on-photo); opacity: 0.4; } .eb-photo-rotate .mud-progress-circular { color: var(--eb-on-photo); } .eb-photo-actions { display: flex; justify-content: center; gap: 4px; margin-top: 4px; } .eb-photo-bulk { display: flex; align-items: center; gap: 4px; } @media (pointer: coarse) { .eb-photo-rotate { height: 44px; } .eb-photo-rotate .mud-button-root { width: 44px; height: 44px; } } .eb-seller-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .eb-seller-toolbar .eb-seller-search { max-width: 280px; } @media (max-width: 767.98px) { .eb-seller-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; align-items: stretch; } .eb-seller-toolbar > .flex-grow-1 { display: none; } .eb-seller-toolbar > .mud-chipset, .eb-seller-toolbar > .eb-seller-search { grid-column: 1 / -1; } .eb-seller-toolbar .eb-seller-search { max-width: none; } .eb-seller-toolbar > .mud-chipset { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left))) calc(-1 * max(16px, env(safe-area-inset-right))); padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } .eb-seller-toolbar > .mud-chipset::-webkit-scrollbar { display: none; } .eb-seller-toolbar > .mud-chipset > .mud-chip-container > .mud-chip { flex: 0 0 auto; margin: 0; } .eb-seller-toolbar > .mud-button-root { width: 100%; min-height: 44px; } .eb-seller-primary { position: fixed; inset-inline: 0; bottom: 0; z-index: 90; display: flex; gap: 8px; padding: 10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background-color: var(--eb-bg); border-top: 1px solid var(--eb-border); } .eb-seller-primary > .mud-button-root { flex: 1; min-height: 48px; } .eb-my-store-actions.eb-seller-primary { position: sticky; inset-inline: auto; z-index: 2; background-color: var(--eb-surface); padding: 10px 16px max(10px, env(safe-area-inset-bottom)); } } @media (max-width: 359.98px) { .eb-seller-toolbar > .mud-chipset { margin-inline: calc(-1 * max(12px, env(safe-area-inset-left))) calc(-1 * max(12px, env(safe-area-inset-right))); padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); } } @media (max-width: 959.98px) { .eb-seller-table { background: none; border: none; border-radius: 0; overflow: visible; } .eb-seller-table .mud-table-container, .eb-seller-table .mud-table-root, .eb-seller-table .mud-table-body { display: block; } .eb-seller-table .mud-table-body { border-top: none; } .eb-seller-table .mud-table-row { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "thumb title title" "thumb price status" "thumb meta weight" ". updated updated" "traits traits traits" "live live menu"; column-gap: 10px; row-gap: 4px; align-items: center; padding: 14px; margin-bottom: 10px; background-color: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; } .eb-seller-table.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover { background-color: var(--eb-surface); } .eb-seller-table .mud-table-row:has(.mud-checkbox-input:checked), .eb-seller-table.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:has(.mud-checkbox-input:checked) { border-color: var(--eb-tint-border); background-color: var(--eb-tint-bg); } .eb-seller-table .mud-table-cell { display: block; border: none; padding: 0; text-align: start; } .eb-seller-table.mud-table-dense .mud-table-cell { padding: 0; } .eb-seller-table .mud-table-cell::before { display: none; } .eb-seller-table .mud-table-row .mud-table-cell:last-child { border-bottom: none; } .eb-seller-table .eb-c-thumb { grid-area: thumb; align-self: start; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background-color: var(--eb-photo-bg, #1E1E22); border: 1px solid var(--eb-border); } .eb-seller-table .eb-c-thumb .mud-icon-root { font-size: 1.6rem; } .eb-seller-table .eb-c-thumb:has(.eb-needs-photo-chip) { width: 84px; height: 84px; padding: 6px; overflow: visible; background-color: transparent; border-style: dashed; } .eb-seller-table .eb-c-thumb .eb-needs-photo-chip { flex-direction: column; gap: 2px; font-size: 0.7rem; } .eb-seller-table .eb-c-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; display: block; } .eb-seller-table .mud-table-row > .mud-table-cell:has(.mud-table-cell-checkbox) { position: absolute; top: 19px; left: 19px; z-index: 2; border-radius: 8px; line-height: 0; } .eb-seller-table .mud-table-cell-checkbox .mud-icon-button { width: 44px; height: 44px; padding: 10px; } .eb-seller-table .mud-table-row:has(.eb-c-thumb img) > .mud-table-cell:has(.mud-table-cell-checkbox) { background-color: rgba(12, 12, 14, 0.66); backdrop-filter: blur(3px); } .eb-seller-table .mud-table-row:has(.eb-c-thumb img) .mud-table-cell-checkbox .mud-icon-button { color: var(--eb-on-photo, #fff); } .eb-seller-table .mud-table-cell-checkbox .mud-icon-root { font-size: 1.2rem; } .eb-seller-table .eb-c-title { grid-area: title; align-self: start; min-width: 0; } .eb-seller-table .eb-c-title .mud-link { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; font-size: 0.92rem; line-height: 1.3; color: var(--eb-text) !important; } .eb-seller-table .eb-c-title .mud-typography-caption { font-size: 0.75rem; color: var(--eb-muted); } .eb-seller-table .eb-c-price { grid-area: price; font-weight: 700; font-size: 1.02rem; } .eb-seller-table .eb-c-status { grid-area: status; align-self: start; justify-self: end; text-align: end; } .eb-seller-table .eb-c-status .mud-chip { margin: 0; height: 22px; font-size: 0.7rem; } .eb-seller-table .eb-c-status .mud-typography-caption { line-height: 1.35; white-space: normal; } .eb-seller-table .eb-c-meta { grid-area: meta; min-width: 0; } .eb-seller-table .eb-c-meta .eb-animal-badge { display: flex; flex-wrap: wrap; padding: 0; border: none; background: none; white-space: normal; row-gap: 2px; line-height: 1.35; } .eb-seller-table .eb-c-weight { grid-area: weight; justify-self: end; font-size: 0.78rem; color: var(--eb-muted); white-space: nowrap; } .eb-seller-table .eb-c-menu { grid-area: menu; justify-self: end; } .eb-seller-table .eb-c-menu .mud-icon-button { width: 44px; height: 44px; padding: 10px; margin-right: -6px; } .eb-seller-table .eb-c-traits { grid-area: traits; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 5px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--eb-border); } .eb-seller-table .eb-c-traits .mud-typography { font-size: 0.75rem; color: var(--eb-muted); } .eb-seller-table .eb-c-traits:empty { display: none; } .eb-seller-table .eb-c-traits .mud-chip { margin: 0; height: 22px; font-size: 0.7rem; } .eb-seller-table .eb-c-live { grid-area: live; justify-self: start; display: flex; align-items: center; justify-content: flex-start; gap: 2px; flex-wrap: wrap; } .eb-seller-table .eb-c-live .mud-typography-caption { flex: 1 0 100%; line-height: 1.35; } .eb-seller-table .eb-c-live::before { display: inline; content: attr(data-label); font-size: 0.75rem; font-weight: 600; color: var(--eb-muted); } .eb-seller-table .eb-c-updated { grid-area: updated; justify-self: start; font-size: 0.7rem; font-weight: 400; color: var(--eb-muted); white-space: nowrap; } .eb-seller-table .eb-c-updated::before { display: inline; content: attr(data-label); padding-right: 4px; } .eb-seller-table .mud-table-pagination { display: block; border: 1px solid var(--eb-border); border-radius: 12px; background-color: var(--eb-surface); } .eb-seller-table .mud-table-pagination-toolbar { flex-wrap: wrap; row-gap: 4px; min-height: 0; padding-block: 6px; border-top: none; } } @media (min-width: 700px) and (max-width: 959.98px) { .eb-seller-table .mud-table-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } .eb-seller-table .mud-table-row { margin-bottom: 0; } .eb-seller-table .mud-table-body > .mud-table-row:only-child:not(:has(.eb-c-thumb)) { grid-column: 1 / -1; } } @media (max-width: 767.98px) { body:has(.eb-seller-primary:not(.eb-my-store-actions)) .eb-page { padding-bottom: 92px; } .eb-seller-table .mud-table-pagination-display > .mud-table-pagination-caption:first-child { display: none; } } @media (max-width: 767.98px) { .eb-batch-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; } .eb-batch-bar > .mud-typography { grid-column: 1 / -1; margin: 0 !important; } .eb-batch-bar > .flex-grow-1 { display: none; } .eb-batch-bar > .mud-menu, .eb-batch-bar > .mud-button-root { width: 100%; margin: 0 !important; } .eb-batch-bar > .mud-menu .mud-button-root { width: 100%; margin: 0 !important; } .eb-batch-bar > .eb-batch-clear { grid-column: 1 / -1; } } .eb-import-steps { margin: 0; padding-left: 1.25rem; font-size: 0.875rem; line-height: 1.55; color: var(--eb-muted); } .eb-import-steps > li { margin-bottom: 0.35rem; } .eb-import-steps > li::marker { color: var(--eb-orange); font-weight: 700; } .eb-chat-safety { display: flex; align-items: center; gap: 10px; margin: -14px 0 20px; padding: 10px 14px; border: 1px solid var(--eb-border); border-radius: 12px; background: var(--eb-surface-2); color: var(--eb-muted); font-size: 0.85rem; } .eb-chat-safety .mud-icon-root { color: var(--eb-orange); flex: none; } .eb-chat { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; height: clamp(420px, 66vh, 760px); } .eb-chat-list { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--eb-border); border-radius: 14px; background: var(--eb-surface); overflow: hidden; } .eb-chat-filter { padding: 12px; border-bottom: 1px solid var(--eb-border); } .eb-chat-filter-input { width: 100%; padding: 9px 12px; border: 1px solid #C9C9D0; border-radius: 10px; background: #FFFFFF; color: #0C0C0E; font: inherit; font-size: 0.9rem; } .eb-chat-filter-input::placeholder { color: #6A6A72; } .eb-chat-filter-input:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 2px; border-color: var(--eb-orange); } .eb-chat-rows { flex: 1; min-height: 0; overflow-y: auto; } .eb-chat-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--eb-border); color: inherit; text-decoration: none; } .eb-chat-row:hover, .eb-chat-row:focus-visible { background: var(--eb-surface-2); } .eb-chat-row--on, .eb-chat-row--on:hover { background: var(--eb-tint-bg); border-bottom-color: var(--eb-tint-border); } .eb-chat-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--eb-tint-border); background: var(--eb-tint-bg); color: var(--eb-orange-on-tint); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.02em; } .eb-chat-row-main { flex: 1; min-width: 0; display: block; } .eb-chat-row-top { display: flex; align-items: baseline; gap: 8px; } .eb-chat-row-name { flex: 1; min-width: 0; color: var(--eb-text); font-weight: 500; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eb-chat-row--unread .eb-chat-row-name { font-weight: 800; } .eb-chat-row-time, .eb-chat-msg-time { flex: none; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); white-space: nowrap; } .eb-chat-row-preview { display: block; margin-top: 2px; color: var(--eb-muted); font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eb-chat-row--unread .eb-chat-row-preview { color: var(--eb-text); } .eb-chat-pill { flex: none; min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--eb-orange); color: var(--eb-on-orange); font-size: 0.72rem; font-weight: 800; text-align: center; } .eb-chat-nomatch { margin: 0; padding: 24px 16px; color: var(--eb-muted); font-size: 0.88rem; text-align: center; } .eb-chat-thread { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--eb-border); border-radius: 14px; background: var(--eb-surface); overflow: hidden; } .eb-chat-thread-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--eb-border); } .eb-chat-peer { flex: 1; min-width: 0; margin: 0; font-family: var(--eb-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--eb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eb-chat-back { display: none; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 999px; border: 1px solid var(--eb-border-2); color: var(--eb-text); } .eb-chat-back:hover { border-color: var(--eb-orange); color: var(--eb-orange); } .eb-chat-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; } .eb-chat-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 78%; } .eb-chat-msg--mine { align-self: flex-end; align-items: flex-end; } .eb-chat-bubble { padding: 10px 14px; border-radius: 14px; border: 1px solid var(--eb-border); background: var(--eb-surface-2); color: var(--eb-text); } .eb-chat-msg--mine .eb-chat-bubble { border-color: var(--eb-border-2); background: var(--eb-page-bg); } .eb-chat-text { margin: 0; font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; } .eb-chat-composer { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--eb-border); background: var(--eb-surface); } .eb-chat-composer .eb-native-field { flex: 1; min-width: 0; margin: 0; } .eb-chat-composer textarea { resize: vertical; } .eb-chat-send { flex: none; } .eb-chat-none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 32px 24px; text-align: center; } .eb-enq { display: flex; gap: 12px; margin-bottom: 10px; padding: 10px; border: 1px solid var(--eb-border); border-radius: 12px; background: var(--eb-surface); } .eb-enq-thumb { flex: none; display: block; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--eb-photo-bg); } .eb-enq-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .eb-enq-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .eb-enq-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-enq-title { font-weight: 700; font-size: 0.92rem; text-decoration: none; overflow-wrap: anywhere; } span.eb-enq-title { color: var(--eb-text); } a.eb-enq-title:hover { color: var(--eb-orange); text-decoration: underline; text-underline-offset: 2px; } .eb-enq-foot { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; } .eb-enq-gone { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } @media (max-width: 959.98px) { .eb-chat { display: block; height: auto; } .eb-chat--open .eb-chat-list { display: none; } .eb-chat:not(.eb-chat--open) .eb-chat-thread { display: none; } .eb-chat-rows, .eb-chat-msgs { overflow: visible; } .eb-chat-back { display: grid; } .eb-chat-composer { position: sticky; bottom: 0; } .eb-chat-msg { max-width: 88%; } } @media (max-width: 599.98px) { .eb-chat-composer { flex-wrap: wrap; } .eb-chat-composer .eb-native-field { flex: 1 0 100%; } .eb-chat-send { margin-left: auto; } } .mud-pagination-item > .mud-button-root { min-width: 40px; min-height: 40px; } .eb-feedback-tab { min-width: 44px; } .eb-morph-help { padding-block: 13px; margin-block: -13px; } @media (max-width: 899.98px) { .eb-store-line .mud-link { display: inline-flex; align-items: center; min-height: 44px; } .eb-equipment-card .eb-store-who .mud-link { display: block; line-height: 44px; } .eb-card-meta .mud-link { display: inline; min-height: 0; padding-block: 6px; margin-block: -6px; } .eb-store-line.mb-2 { margin-bottom: 0 !important; } .eb-filter-toggle { position: sticky; top: 57px; z-index: 5; } } .eb-acct-band { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 40px; max-width: 780px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--eb-border); } .eb-acct-id { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; min-width: 0; } .eb-acct-main { max-width: 780px; } @media (min-width: 720px) { .eb-acct-facts { grid-template-columns: auto auto; gap: 8px 36px; } } .eb-acct-id-name { font-family: var(--eb-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1.2; color: var(--eb-text); overflow-wrap: anywhere; } .eb-acct-id-handle { font-size: 0.86rem; color: var(--eb-muted); margin-top: 2px; overflow-wrap: anywhere; } .eb-acct-facts { margin: 0; display: grid; gap: 12px; flex: 0 0 auto; } .eb-acct-fact dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); margin-bottom: 3px; } .eb-acct-fact dd { margin: 0; font-size: 0.9rem; color: var(--eb-body); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .eb-acct-email { overflow-wrap: anywhere; min-width: 0; } .eb-acct-flag { font-size: 0.75rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; } .eb-acct-flag--ok { color: var(--eb-text); background: var(--eb-tint-bg); } .eb-acct-flag--warn { color: var(--eb-welfare-accent); background: var(--eb-welfare-bg); } .eb-acct-note { margin: 0; font-size: 0.8rem; line-height: 1.4; color: var(--eb-muted); max-width: 24ch; } .eb-acct-main .eb-form-section-label { margin: 30px 0 6px; } .eb-acct-hint { margin: 0 0 14px; font-size: 0.82rem; line-height: 1.6; color: var(--eb-muted); max-width: 62ch; } .eb-acct-hint--lead { margin-bottom: 18px; color: var(--eb-body); } .eb-acct-avatar-row { display: flex; align-items: center; gap: 14px; } .eb-acct-id-text { min-width: 0; } .eb-acct-avatar { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--eb-border-2); background: var(--eb-photo-bg); } .eb-acct-avatar--empty { display: inline-flex; align-items: center; justify-content: center; font-family: var(--eb-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--eb-orange-on-tint); background: var(--eb-tint-bg); border-color: var(--eb-tint-border); } .eb-acct-avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; gap: 6px; flex-wrap: wrap; margin-top: 14px; } .eb-acct-avatar-actions .mud-file-upload { display: inline-flex; } .eb-account-nav-activator { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: rgba(255, 255, 255, 0.75); cursor: pointer; } .eb-account-nav-activator:hover, .eb-account-nav-activator:focus-visible { color: var(--eb-on-photo); background: rgba(255, 255, 255, 0.08); } .eb-account-nav-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--eb-border-2); } .eb-account-nav-avatar--lg { width: 40px; height: 40px; } .eb-account-nav-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px; border-bottom: 1px solid var(--eb-border); margin-bottom: 4px; } .eb-account-nav-name { font-weight: 700; font-size: 0.92rem; color: var(--eb-text); overflow-wrap: anywhere; } [data-theme="light"] .eb-account-nav-activator { color: rgba(23, 23, 26, 0.74); } [data-theme="light"] .eb-account-nav-activator:hover, [data-theme="light"] .eb-account-nav-activator:focus-visible { color: rgba(23, 23, 26, 0.92); background: rgba(0, 0, 0, 0.05); } .eb-account-nav-activator { appearance: none; background: none; border: 0; padding: 0; font: inherit; } .eb-acct-avatar-actions .mud-file-upload { display: inline-flex; width: auto; flex: none; margin: 0; } .eb-acct-avatar-actions .mud-file-upload-files { display: none; } .eb-licensing-choice { margin-bottom: 8px; } .eb-licensing-choice .mud-radio-group.mud-radio-group { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .eb-licensing-option { display: flex; flex-direction: column; gap: 1px; padding: 2px 0; } .eb-licensing-option-title { font-weight: 700; font-size: 0.92rem; color: var(--eb-text); } .eb-licensing-option-desc { font-size: 0.82rem; line-height: 1.5; color: var(--eb-muted); } .eb-licensing-fields { border-left: 1px solid var(--eb-border); padding-left: 16px; margin: 4px 0 18px 12px; } .eb-licence-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border: 1px solid var(--eb-on-photo-dim); border-radius: 999px; font-weight: 700; font-size: 0.78rem; } .eb-licence-badge .mud-icon-root { font-size: 0.95rem; } .eb-licence-line { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; font-size: 0.82rem; line-height: 1.6; color: var(--eb-on-photo-dim); } .eb-licence-line strong { color: var(--eb-on-photo); font-weight: 700; } .eb-licence-part { display: inline-block; } .eb-seller-licence { margin-top: 3px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; font-size: 0.78rem; line-height: 1.5; color: var(--eb-muted); } .eb-licence-stars { white-space: nowrap; } .eb-licence-stars-label { margin-inline-start: 5px; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; } .eb-rrk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .eb-rrk-lockup { width: 96px; height: auto; display: block; } .eb-rrk-lockup--light { display: none; } [data-theme="light"] .eb-rrk-lockup--dark { display: none; } [data-theme="light"] .eb-rrk-lockup--light { display: block; } .eb-rrk-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); white-space: nowrap; transition: color 140ms ease; } .eb-rrk:hover .eb-rrk-label, .eb-rrk:focus-visible .eb-rrk-label { color: var(--eb-text); } .eb-rrk--on-dark .eb-rrk-lockup--dark { display: block; } .eb-rrk--on-dark .eb-rrk-label { color: var(--eb-on-photo-dim); } .eb-rrk--on-dark:hover .eb-rrk-label, .eb-rrk--on-dark:focus-visible .eb-rrk-label { color: var(--eb-on-photo); } .eb-rrk-chip { display: inline-flex; align-items: center; margin-inline-start: 6px; font-size: 0.75rem; text-decoration: none; vertical-align: baseline; white-space: nowrap; opacity: 0.78; transition: opacity 140ms ease; } .eb-rrk-chip:hover, .eb-rrk-chip:focus-visible { opacity: 1; } .eb-store-card:hover .eb-rrk-chip--static { opacity: 1; } .eb-rrk-mark { height: 0.9em; width: auto; display: block; flex: 0 0 auto; } .eb-rrk-mark--light { display: none; } [data-theme="light"] .eb-rrk-mark--dark { display: none; } [data-theme="light"] .eb-rrk-mark--light { display: block; } .eb-store-rrk { position: absolute; top: 24px; right: 24px; z-index: 2; } .eb-store-rrk .eb-rrk { padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 14px; background: rgba(12, 12, 14, 0.72); backdrop-filter: blur(8px); transition: border-color 160ms ease, background-color 160ms ease; } .eb-store-rrk .eb-rrk:hover, .eb-store-rrk .eb-rrk:focus-visible { border-color: color-mix(in srgb, var(--eb-rrk-amber) 64%, transparent); background: rgba(12, 12, 14, 0.82); } .eb-store-rrk .eb-rrk-label { display: none; } .eb-store-rrk .eb-rrk-lockup { width: 150px; } @media (max-width: 720px) { .eb-store-rrk { top: 16px; right: 16px; } .eb-store-rrk .eb-rrk { padding: 9px 12px; border-radius: 12px; } .eb-store-rrk .eb-rrk-lockup { width: 104px; } } .eb-seller-affiliation { margin-top: 10px; } .eb-seller-strip:has(.eb-seller-affiliation) { align-items: flex-start; } .eb-acct-check { margin: 4px 0 6px -9px; } .eb-acct-check.mud-checkbox, .eb-acct-check .mud-typography { width: 100%; } .eb-acct-check .mud-typography { font-size: 0.92rem; } .eb-acct-rrk { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; width: 100%; } .eb-acct-rrk-text { flex: 1 1 auto; min-width: 12ch; } .eb-acct-rrk-mark { width: 160px; flex: 0 0 auto; margin-left: auto; } @media (max-width: 720px) { .eb-acct-rrk-mark { width: 132px; } .eb-acct-check.mud-checkbox { align-items: flex-start; } .eb-acct-check.mud-checkbox > .mud-button-root { margin-top: -2px; } } .eb-gallery-main--sold { position: relative; } .eb-sold-band { position: absolute; z-index: 2; left: 0; right: 0; top: 62%; padding: 10px 0; background: rgba(12, 12, 14, 0.82); color: var(--eb-on-photo); font-family: var(--eb-font-display, inherit); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; } .eb-sold-band--hold { background: rgba(12, 12, 14, 0.62); font-size: 0.9rem; } .eb-sold-band--card { top: 50%; transform: translateY(-50%); padding: 7px 0; font-size: 0.82rem; } .eb-photo--sold img { filter: brightness(0.78); } .eb-hold-note { padding: 12px 14px; border: 1px solid var(--eb-hairline-strong); border-radius: 12px; background: var(--eb-surface-inset); color: var(--eb-body); font-size: 0.86rem; line-height: 1.55; } .eb-status-badge { position: absolute; top: 10px; left: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eb-on-photo); background: rgba(12, 12, 14, 0.78); border-radius: 6px; padding: 4px 9px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .eb-card--closed:hover { border-color: var(--eb-hairline-strong); } .eb-price--closed { color: var(--eb-muted); font-weight: 700; display: inline-flex; align-items: baseline; gap: 5px; } .eb-price-asked { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-sold-ago { color: var(--eb-muted); font-size: 0.78rem; white-space: nowrap; } @media (max-width: 560px) { .eb-price-asked { font-size: 0.66rem; } .eb-card-price-row { flex-wrap: wrap; row-gap: 2px; } .eb-card-price-row .eb-spec-dot { display: none; } .eb-sold-ago { flex-basis: 100%; font-size: 0.75rem; white-space: normal; } } .eb-price--sold { color: var(--eb-muted); text-decoration: line-through; text-decoration-thickness: 2px; } .eb-sold-note { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--eb-border); border-radius: 12px; background: var(--eb-surface-2); } .eb-sold-note-title { color: var(--eb-text); font-weight: 700; } .eb-sold-note-body { color: var(--eb-body); font-size: 0.92rem; line-height: 1.45; } .eb-sold-actions { display: flex; flex-wrap: wrap; gap: 10px; } .eb-sold-actions .mud-button-root { flex: 1 1 auto; } .eb-policy-quote { padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--eb-border); border-radius: 10px; background: var(--eb-surface-2); } .eb-policy-quote-title { display: block; margin-bottom: 6px; color: var(--eb-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .eb-policy-quote-body { max-height: 180px; overflow-y: auto; color: var(--eb-body); font-size: 0.9rem; line-height: 1.5; white-space: pre-line; } .eb-policy-quote--card { margin: 10px 0 0; } .eb-policy-quote--collapsible > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0; cursor: pointer; list-style: none; } .eb-policy-quote--collapsible > summary::-webkit-details-marker { display: none; } .eb-policy-quote--collapsible > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 140ms ease; } .eb-policy-quote--collapsible[open] > summary::after { transform: translateY(2px) rotate(-135deg); } .eb-policy-quote--collapsible[open] > summary { margin-bottom: 8px; } .eb-policy-quote--collapsible > summary:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .eb-policy-quote--collapsible > summary::after { transition: none; } } .eb-inquiry-sent { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 8px 4px; } .eb-inquiry-sent-icon { margin-bottom: 12px; color: var(--eb-orange-ink); font-size: 2.4rem !important; height: 2.4rem; width: 2.4rem; } .eb-inq-recap { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 14px; background: var(--eb-surface-2); border: 1px solid var(--eb-border); border-radius: 10px; } .eb-inq-recap-thumb { width: 56px; height: 56px; flex: 0 0 auto; object-fit: cover; border-radius: 8px; background: var(--eb-photo-bg, #1E1E22); } .eb-inq-recap-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .eb-inq-recap-title { font-weight: 700; color: var(--eb-text); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eb-inq-recap-meta { font-size: 0.82rem; color: var(--eb-muted); } .eb-inq-recap-meta .eb-cur { color: var(--eb-orange-ink); font-weight: 700; } .eb-inq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; } .eb-inq-chip { padding: 7px 14px; min-height: 34px; background: var(--eb-tint-bg); border: 1px solid var(--eb-tint-border); border-radius: 999px; color: var(--eb-orange-ink); font-family: var(--eb-display); font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: border-color 140ms ease, background 140ms ease; } .eb-inq-chip:hover { border-color: var(--eb-orange); } .eb-inq-chip:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 2px; } @media (pointer: coarse) { .eb-inq-chip { min-height: 44px; } } .eb-inq-next { margin: 6px 0 0; font-size: 0.8rem; color: var(--eb-muted); } .eb-gallery-main { aspect-ratio: 5 / 4; max-height: 680px; } .eb-gallery-main img { height: 100%; } .eb-genes { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--eb-border); } .eb-gene { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--eb-border); } .eb-gene .eb-gene-name.eb-gene-name { color: var(--eb-text); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; } .eb-gene .eb-gene-name.eb-gene-name:hover, .eb-gene .eb-gene-name.eb-gene-name:focus-visible { color: var(--eb-orange-ink); text-decoration: underline; } .eb-gene-flag { display: inline-flex; align-items: center; gap: 5px; color: var(--eb-welfare-accent); font-size: 0.78rem; font-weight: 600; line-height: 1.3; } .eb-genes-outro { margin: -6px 0 18px; color: var(--eb-muted); font-size: 0.82rem; line-height: 1.5; } .eb-prov-title { margin: 0 0 12px; color: var(--eb-text); font-size: 0.9rem; font-weight: 800; letter-spacing: -0.01em; } .eb-prov-parent { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--eb-border); } .eb-prov-parent:first-of-type { border-top: 0; padding-top: 0; } .eb-prov-role { flex: 0 0 112px; color: var(--eb-muted); font-size: 0.86rem; } .eb-prov-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .eb-prov-name { color: var(--eb-text); font-weight: 600; } .eb-prov-genes { color: var(--eb-body); font-size: 0.88rem; line-height: 1.45; } .eb-buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: flex; align-items: center; gap: 18px; padding: 12px max(16px, calc((100% - var(--eb-container-max)) / 2 + 28px)) calc(12px + env(safe-area-inset-bottom)); background: var(--eb-bg); border-top: 1px solid var(--eb-border-2); box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.42); transform: translateY(110%); visibility: hidden; transition: transform 180ms ease-out, visibility 0s linear 180ms; } .eb-buy-bar--on { transform: translateY(0); visibility: visible; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; } @media (prefers-reduced-motion: reduce) { .eb-buy-bar, .eb-buy-bar--on { transition: none; } } .eb-buy-bar .mud-button-root { flex: 0 0 auto; min-height: 52px; padding-inline: 30px; border-radius: 12px; font-size: 0.98rem; font-weight: 800; white-space: nowrap; } .eb-buy-bar-thumb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid var(--eb-border); } .eb-buy-bar-info { flex: 1 2 auto; min-width: 120px; display: flex; flex-direction: column; gap: 2px; } .eb-buy-bar-title { color: var(--eb-text); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eb-buy-bar-seller { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--eb-muted); font-size: 0.8rem; font-weight: 600; line-height: 1.25; } .eb-buy-bar-store { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eb-buy-bar-licence { flex: 0 0 auto; padding: 2px 8px; border: 1px solid var(--eb-tint-border); border-radius: 999px; background: var(--eb-tint-bg); color: var(--eb-orange-on-tint); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .eb-buy-bar-vitals { flex: 0 1 auto; display: flex; align-items: center; min-width: 0; } .eb-buy-bar-stat { display: flex; flex-direction: column; gap: 1px; flex: 0 0 auto; min-width: 0; padding-inline: 13px; white-space: nowrap; } .eb-buy-bar-stat + .eb-buy-bar-stat { border-left: 1px solid var(--eb-border); } .eb-buy-bar-stat-label { color: var(--eb-muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .eb-buy-bar-stat-value { display: inline-flex; align-items: center; gap: 0; min-width: 0; color: var(--eb-text); font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .eb-buy-bar-stat-unit { margin-left: 1px; color: var(--eb-muted); font-size: 0.78em; font-weight: 700; } .eb-buy-bar-stat--sex.eb-sex--m .eb-buy-bar-stat-value { color: var(--eb-sex-m); } .eb-buy-bar-stat--sex.eb-sex--f .eb-buy-bar-stat-value { color: var(--eb-sex-f); } .eb-buy-bar-sex.eb-buy-bar-sex { flex: 0 0 auto; margin-left: -3px; margin-right: 3px; font-size: 1.15rem !important; width: 1.15rem; height: 1.15rem; filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 45%, transparent)); } .eb-buy-bar-stat--warn .eb-buy-bar-stat-label, .eb-buy-bar-stat--warn .eb-buy-bar-stat-value { color: var(--eb-welfare-accent); } .eb-buy-bar-warn-ico.eb-buy-bar-warn-ico { flex: 0 0 auto; margin-right: 4px; font-size: 1.05rem !important; width: 1.05rem; height: 1.05rem; } .eb-buy-bar-stat--warn, .eb-buy-bar-stat--soft { flex: 0 1 auto; } .eb-buy-bar-stat-text, .eb-buy-bar-stat-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .eb-buy-bar-money { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; padding-left: 6px; } .eb-buy-bar-price { color: var(--eb-orange-ink); font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.025em; } .eb-buy-bar-was { color: var(--eb-muted); font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: line-through; } .eb-buy-bar-save { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--eb-border-2); background: transparent; color: var(--eb-body); cursor: pointer; transition: border-color 140ms ease, color 140ms ease; } .eb-buy-bar-save:hover { border-color: var(--eb-orange); color: var(--eb-text); } .eb-buy-bar-save--on { color: var(--eb-orange); border-color: var(--eb-orange); } .eb-buy-bar-join { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-left: auto; flex: 1 1 auto; min-width: 0; } .eb-buy-bar-join .mud-button-root { white-space: normal; line-height: 1.15; } .eb-buy-bar-alt { text-align: center; font-size: 0.75rem; color: var(--eb-muted); text-decoration: underline; text-underline-offset: 2px; } .eb-buy-bar-alt:hover { color: var(--eb-orange-ink); } @media (max-width: 1359.98px) { .eb-buy-bar { gap: 14px; } .eb-buy-bar-vitals { gap: 0; } .eb-buy-bar-stat { flex-direction: row; align-items: baseline; gap: 0; padding-inline: 0; overflow: hidden; } .eb-buy-bar-stat + .eb-buy-bar-stat { border-left: 0; } .eb-buy-bar-stat + .eb-buy-bar-stat::before { content: "\00b7"; margin: 0 7px; color: var(--eb-muted); font-weight: 700; } .eb-buy-bar-stat-label { display: none; } .eb-buy-bar-stat-value { font-size: 0.82rem; font-weight: 700; color: var(--eb-muted); } .eb-buy-bar-stat--born, .eb-buy-bar-stat--delivery { display: none; } .eb-buy-bar-stat--sex .eb-buy-bar-stat-word { display: none; } .eb-buy-bar-sex.eb-buy-bar-sex { margin-left: 0; font-size: 1.05rem !important; width: 1.05rem; height: 1.05rem; } .eb-buy-bar-price { font-size: 1.45rem; } .eb-buy-bar-title { font-size: 0.98rem; } } @media (max-width: 899.98px) { .eb-buy-bar-stat--maturity { display: none; } .eb-buy-bar-vitals:not(:has(.eb-buy-bar-stat--sex)) .eb-buy-bar-stat--weight::before { content: none; } } @media (max-width: 699.98px) { .eb-buy-bar-stat--weight { display: none; } .eb-buy-bar-vitals:not(:has(.eb-buy-bar-stat--sex)) .eb-buy-bar-stat--warn::before { content: none; } } @media (max-width: 619.98px) { .eb-buy-bar { flex-wrap: wrap; gap: 8px 12px; padding-left: 14px; padding-right: 14px; } .eb-buy-bar-info { display: contents; } .eb-buy-bar-title { flex: 1 0 100%; order: -1; } .eb-buy-bar-seller { display: none; } .eb-buy-bar-vitals { flex: 1 1 0; min-width: 0; overflow: hidden; } .eb-buy-bar .mud-button-root { padding-inline: 22px; } } @media (max-width: 459.98px) { .eb-buy-bar-thumb { display: none; } .eb-buy-bar .mud-button-root { padding-inline: 16px; } .eb-buy-bar-price { font-size: 1.3rem; } } body:has(.eb-buy-bar--on) .eb-container:not(.eb-nav-inner) { padding-bottom: 108px; } @media (max-width: 619.98px) { body:has(.eb-buy-bar--on) .eb-container:not(.eb-nav-inner) { padding-bottom: 124px; } } @media (max-width: 359.98px) { .eb-buy-bar { gap: 8px 10px; } .eb-buy-bar .mud-button-root { padding-inline: 12px; } .eb-buy-bar-save { width: 44px; height: 44px; } .eb-buy-bar-stat--warn { flex: 0 0 auto; } .eb-buy-bar-stat--warn .eb-buy-bar-stat-text { display: none; } .eb-buy-bar-warn-ico.eb-buy-bar-warn-ico { margin-right: 0; } .eb-buy-bar-money { padding-left: 0; } } @media (max-height: 480px) { .eb-buy-bar { gap: 12px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); } .eb-buy-bar-thumb { width: 44px; height: 44px; border-radius: 10px; } .eb-buy-bar .mud-button-root { min-height: 44px; padding-inline: 20px; } .eb-buy-bar-save { width: 44px; height: 44px; } .eb-buy-bar-price { font-size: 1.3rem; } .eb-buy-bar-seller { display: none; } body:has(.eb-buy-bar--on) .eb-container:not(.eb-nav-inner) { padding-bottom: 84px; } } .eb-bulk-lineage-head { margin-top: 4px; color: var(--eb-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .eb-listing-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .eb-col-photo, .eb-col-rail, .eb-col-evidence { min-width: 0; } @media (min-width: 960px) { .eb-listing-grid { grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); grid-template-rows: auto 1fr; align-items: start; } .eb-col-photo { grid-column: 1; grid-row: 1; } .eb-col-evidence { grid-column: 1; grid-row: 2; } .eb-col-rail { grid-column: 2; grid-row: 1 / span 2; } } .eb-item-title { overflow-wrap: anywhere; } @media (max-width: 560px) { .eb-item-title { font-size: 1.55rem; line-height: 1.14; } } @media (pointer: coarse) { .eb-seller-visit { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; } .eb-report-row .mud-button-root, .eb-report-row button { min-height: 44px; } .eb-crumb a { display: inline-block; padding-block: 10px; } .eb-save-btn, .eb-detail-nav-btn, .eb-ld-genes .eb-ld-gene.eb-ld-gene { min-height: 44px; } } .eb-vitals { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 15px; margin: 0 0 16px; padding: 0 0 16px; list-style: none; border-bottom: 1px solid var(--eb-border); } .eb-vital { display: inline-flex; align-items: center; gap: 6px; color: var(--eb-text); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .eb-vital + .eb-vital::before { content: ""; width: 3px; height: 3px; margin-right: 15px; border-radius: 50%; background: var(--eb-border-2); } .eb-vital-pre, .eb-vital-unit { color: var(--eb-muted); font-size: 0.82rem; font-weight: 600; } .eb-vital-pre { margin-right: 1px; } .eb-vital-unit { margin-left: 2px; } .eb-facts { display: grid; grid-template-columns: 1fr; gap: 8px 24px; margin: 0; } @media (min-width: 600px) { .eb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .eb-fact { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .eb-fact dt { flex: 0 0 auto; color: var(--eb-muted); font-size: 0.82rem; font-weight: 600; } .eb-fact dd { margin: 0; min-width: 0; color: var(--eb-text); font-size: 0.9rem; font-weight: 600; } .eb-listing-terms { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--eb-border); color: var(--eb-muted); font-size: 0.78rem; line-height: 1.5; } .eb-listing-terms-quiet { opacity: 0.72; } .eb-vitals--tight .eb-vital { font-variant-numeric: lining-nums; } .eb-vitals--tight { margin-bottom: 14px; padding-bottom: 0; border-bottom: 0; } .eb-ld { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; } .eb-ld-stage { position: relative; overflow: hidden; min-height: 0; aspect-ratio: 4 / 3; border: 1px solid var(--eb-border); border-radius: 14px; background-color: var(--eb-photo-bg); } .eb-ld-rail { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } .eb-ld-rail::-webkit-scrollbar { display: none; } .eb-ld-slide { position: relative; flex: 0 0 100%; overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always; } .eb-ld-amb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); filter: blur(44px) saturate(1.25) brightness(0.5); } .eb-ld-photo { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; } .eb-ld-nophoto { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 240px; } .eb-ld-zoom { position: absolute; z-index: 3; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: rgba(12, 12, 14, 0.55); color: var(--eb-on-photo); cursor: pointer; transition: border-color 140ms ease, color 140ms ease; } .eb-ld-zoom:hover, .eb-ld-zoom:focus-visible { border-color: var(--eb-orange-on-dark); color: var(--eb-orange-on-dark); } .eb-ld-photo { cursor: zoom-in; } .eb-ld-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .eb-ld-thumb { aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 1px solid var(--eb-border-2); border-radius: 10px; background: var(--eb-photo-bg); cursor: pointer; transition: border-color 140ms ease, transform 140ms ease; } .eb-ld-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .eb-ld-thumb:hover { border-color: var(--eb-orange); transform: translateY(-2px); } .eb-ld-thumb--on { border: 2px solid var(--eb-orange); } .eb-ld-count { position: absolute; z-index: 3; left: 16px; bottom: 16px; padding: 4px 10px; border-radius: 6px; background: rgba(12, 12, 14, 0.7); backdrop-filter: blur(3px); color: var(--eb-on-photo); font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; font-weight: 700; } .eb-ld-info { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .eb-ld-info .eb-page-title { margin: 0; } .eb-ld-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--eb-border); border-bottom: 1px solid var(--eb-border); } .eb-ld-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 20px; } .eb-ld-stat:first-child { padding-left: 0; } .eb-ld-stat + .eb-ld-stat { border-left: 1px solid var(--eb-border); } .eb-ld-stat-label { color: var(--eb-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .eb-ld-stat-value { color: var(--eb-text); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; } .eb-ld-stat-unit { margin-left: 2px; font-size: 0.78em; font-weight: 700; color: var(--eb-muted); } .eb-ld-stat-value--m, .eb-ld-stat-value--f { display: inline-flex; align-items: center; gap: 3px; } .eb-ld-stat-value--m { color: var(--eb-sex-m); } .eb-ld-stat-value--f { color: var(--eb-sex-f); } .eb-ld-sex-ico.eb-ld-sex-ico { flex: 0 0 auto; margin-left: -4px; font-size: 1.6rem !important; width: 1.6rem; height: 1.6rem; filter: drop-shadow(0 0 7px color-mix(in srgb, currentColor 45%, transparent)); } .eb-ld-buy { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .eb-ld-buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } .eb-ld-price { display: flex; flex-direction: column; min-width: 0; } .eb-ld-price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .eb-ld-ship { display: inline-flex; align-items: center; gap: 5px; margin-top: -4px; color: var(--eb-muted); font-size: 0.84rem; } .eb-ld-terms { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; color: var(--eb-muted); font-size: 0.84rem; } .eb-ld-ship-info { display: inline-flex; align-items: center; color: var(--eb-muted); cursor: help; } .eb-ld-ship-info .mud-icon-root { font-size: 1rem !important; width: 1rem; height: 1rem; } .eb-ld-ship-info:hover, .eb-ld-ship-info:focus-visible { color: var(--eb-text); } .eb-ld-buy-row .eb-ld-cta.eb-ld-cta { height: 52px; margin-left: auto; padding: 0 36px; border-radius: 12px; font-size: 1rem; font-weight: 800; white-space: nowrap; } .eb-ld-join { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; min-width: 0; } .eb-ld-cta-alt { font-family: var(--eb-display); font-size: 0.85rem; color: var(--eb-muted); text-align: right; text-decoration: underline; text-underline-offset: 3px; } .eb-ld-cta-alt:hover { color: var(--eb-orange-ink); } .eb-ld-cta-note { margin: 0; color: var(--eb-muted); font-size: 0.8rem; line-height: 1.5; text-align: right; } .eb-ld-metarow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .eb-ld-meta { flex: 1 1 280px; min-width: 0; color: var(--eb-muted); font-size: 0.8rem; font-weight: 600; } .eb-ld-meta { display: flex; flex-wrap: wrap; column-gap: 6px; } .eb-ld-meta > span { white-space: nowrap; } .eb-ld-meta > span:not(:last-child)::after { content: " ·"; } .eb-ld-metarow .eb-share { margin-left: auto; } .eb-ld-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; border: 1px solid var(--eb-border); border-radius: 16px; background: var(--eb-surface); } .eb-ld-card--keeper { gap: 4px; } .eb-ld-card-title { margin: 0; color: var(--eb-text); font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; } .eb-ld-card-title--desc { margin-top: 12px; } .eb-ld-genes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .eb-ld-genes .eb-ld-gene.eb-ld-gene { display: inline-flex; align-items: center; gap: 5px; padding: 8px 18px; border: 1px solid var(--eb-border-2); border-radius: 999px; color: var(--eb-text); font-size: 0.95rem; font-weight: 700; white-space: nowrap; text-decoration: none; transition: border-color 140ms ease, color 140ms ease; } .eb-ld-genes .eb-ld-gene.eb-ld-gene:hover, .eb-ld-genes .eb-ld-gene.eb-ld-gene:focus-visible { border-color: var(--eb-orange); color: var(--eb-orange-ink); } .eb-ld-genes .eb-ld-gene--flagged.eb-ld-gene--flagged { border-color: color-mix(in srgb, var(--eb-welfare-accent) 55%, transparent); color: var(--eb-welfare-accent); } .eb-ld-genes .eb-ld-gene-mode { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-ld-genes .eb-ld-gene--rec.eb-ld-gene--rec { border-color: color-mix(in srgb, var(--eb-recessive-accent) 55%, transparent); } .eb-ld-genes .eb-ld-gene--rec .eb-ld-gene-mode { color: var(--eb-recessive-accent); } .eb-ld-genes .eb-ld-gene--flagged .eb-ld-gene-mode, .eb-ld-genes .eb-ld-gene.eb-ld-gene:hover .eb-ld-gene-mode, .eb-ld-genes .eb-ld-gene.eb-ld-gene:focus-visible .eb-ld-gene-mode { color: inherit; } .eb-ld-genes .eb-ld-gene .mud-icon-root { font-size: 1rem !important; width: 1rem; height: 1rem; } .eb-ld-genes--dense { gap: 6px; } .eb-ld-genes--dense .eb-ld-gene.eb-ld-gene { gap: 4px; padding: 6px 13px; font-size: 0.86rem; } .eb-ld-genes--dense .eb-ld-gene-mode { font-size: 0.68rem; } .eb-ld-genes--dense .eb-ld-carries { font-size: 0.86rem; } .eb-ld-carries { display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 0 6px; font-size: 0.92rem; color: var(--eb-body); } .eb-ld-carries .eb-ld-carries-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--eb-muted); margin-right: 10px; } .eb-ld-carries a.eb-ld-carries-link { color: var(--eb-text); font-weight: 700; text-decoration: none; padding-block: 6px; border-bottom: 1px solid transparent; transition: color 140ms ease, border-color 140ms ease; } .eb-ld-carries a.eb-ld-carries-link:hover, .eb-ld-carries a.eb-ld-carries-link:focus-visible { color: var(--eb-orange-ink); border-bottom-color: var(--eb-orange); } .eb-ld-carries-sep { color: var(--eb-muted); margin: 0 8px; } .eb-ld-advisory { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } .eb-ld-advisory li { display: flex; align-items: flex-start; gap: 7px; color: var(--eb-welfare-accent); font-size: 0.84rem; line-height: 1.45; } .eb-ld-advisory .mud-icon-root { flex: 0 0 auto; margin-top: 1px; font-size: 1rem !important; width: 1rem; height: 1rem; } .eb-ld-advisory-outro { margin: -4px 0 0; color: var(--eb-muted); font-size: 0.8rem; line-height: 1.5; } .eb-ld-advisory--guidance li { color: var(--eb-text); } .eb-ld-advisory--guidance .mud-icon-root { color: var(--eb-muted); } .eb-ld-advice { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--eb-muted); font-size: 0.84rem; line-height: 1.45; } .eb-ld-advice .mud-icon-root { flex: 0 0 auto; margin-top: 1px; font-size: 1rem !important; width: 1rem; height: 1rem; } .eb-ld-advice > span { display: flex; flex-wrap: wrap; column-gap: 6px; } .eb-ld-advice > span > :not(:last-child)::after { content: " ·"; } .eb-ld-advice a { color: var(--eb-orange-ink); text-decoration: underline; text-underline-offset: 2px; } .eb-ld-facts { margin-top: 2px; } .eb-ld-lineage { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--eb-border); } .eb-ld-card--keeper .eb-seller-strip { margin: 0; padding: 0; border: 0; background: none; } .eb-report-row--keeper { margin-top: 8px; } .eb-ld-desc { max-width: 70ch; margin: 2px 0 0; color: var(--eb-body); font-size: 0.95rem; line-height: 1.7; white-space: pre-line; } @media (min-width: 960px) { .eb-ld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto auto 1fr; column-gap: 48px; row-gap: 12px; margin-top: 22px; align-items: start; } .eb-ld-info { grid-column: 1; grid-row: 1 / span 3; } .eb-ld-stage { grid-column: 2; grid-row: 1; } .eb-ld-thumbs { grid-column: 2; grid-row: 2; } .eb-ld > .eb-ld-card--keeper { grid-column: 2; grid-row: 3; align-self: start; } } @media (min-width: 768px) and (max-width: 959.98px) { .eb-ld-stage { max-height: 48vh; } } .eb-lightbox { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; background: rgba(12, 12, 14, 0.96); } .eb-lightbox:focus { outline: none; } .eb-lightbox-photo { max-width: 100vw; max-height: 100vh; object-fit: contain; cursor: default; } .eb-lightbox-btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; background: rgba(12, 12, 14, 0.55); color: var(--eb-on-photo); cursor: pointer; transition: border-color 140ms ease, color 140ms ease; } .eb-lightbox-btn:hover, .eb-lightbox-btn:focus-visible { border-color: var(--eb-orange-on-dark); color: var(--eb-orange-on-dark); } .eb-lightbox-close { top: 20px; right: 20px; } .eb-lightbox-prev { top: 50%; left: 20px; transform: translateY(-50%); } .eb-lightbox-next { top: 50%; right: 20px; transform: translateY(-50%); } .eb-lightbox-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 6px; background: rgba(12, 12, 14, 0.7); color: var(--eb-on-photo); font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; font-weight: 700; } @media (max-width: 767.98px) { .eb-ld-stage { margin-inline: -16px; border-inline: 0; border-radius: 0; } .eb-ld-zoom { top: 16px; bottom: auto; } .eb-ld-thumbs { gap: 8px; } .eb-ld-stat { padding: 12px 12px; } .eb-ld-buy-row > .eb-ld-cta.eb-ld-cta, .eb-ld-buy-row > .eb-ld-join { flex: 1 1 100%; order: 2; } .eb-ld-buy-row .eb-ld-cta.eb-ld-cta { margin-left: 0; height: auto; min-height: 52px; padding: 10px 20px; white-space: normal; text-align: center; line-height: 1.2; } .eb-ld-join { align-items: stretch; width: 100%; margin-left: 0; } .eb-ld-cta-alt, .eb-ld-cta-note { text-align: center; } .eb-ld-buy-row .eb-save-btn { margin-left: auto; } .eb-ld-card { padding-inline: 16px; } } @media (max-width: 599.98px) { .eb-ld-stats { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .eb-ld-stat:nth-child(odd) { padding-left: 0; border-left: 0; } .eb-ld-stat:nth-child(n + 3) { border-top: 1px solid var(--eb-border); } } @media (max-width: 359.98px) { .eb-ld-stage { margin-inline: -12px; } } @media (prefers-reduced-motion: reduce) { .eb-ld-thumb { transition: none; } .eb-ld-thumb:hover { transform: none; } } .eb-dash { display: grid; grid-template-columns: minmax(0, 1fr) 312px; grid-template-rows: auto 1fr; grid-template-areas: "main figs" "main rail"; align-items: start; gap: 22px 30px; margin-top: 24px; } .eb-dash-main { grid-area: main; min-width: 0; } .eb-dash-figs { grid-area: figs; } .eb-dash-rail { grid-area: rail; display: flex; flex-direction: column; gap: 22px; min-width: 0; } .eb-rail-card { padding: 18px 20px 20px; background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; } .eb-rail-title { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--eb-text); } .eb-rail-since { margin: 4px 0 0; font-size: 0.78rem; color: var(--eb-muted); } .eb-rail-note { margin: 14px 0 0; font-size: 0.82rem; color: var(--eb-body); } .eb-num { font-variant-numeric: tabular-nums; } .eb-rail-fine { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.55; color: var(--eb-muted); } .eb-figs { display: flex; flex-direction: column; margin: 12px 0 0; } .eb-figs > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--eb-border); } .eb-figs > div:first-child { border-top: 0; } .eb-figs dt { font-size: 0.86rem; color: var(--eb-muted); } .eb-figs dd { margin: 0; font-size: 1.22rem; font-weight: 800; letter-spacing: -0.02em; color: var(--eb-text); font-variant-numeric: tabular-nums; } .eb-focal { margin: 0; } .eb-focal-card { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 22px; margin-top: 12px; padding: 18px; background: var(--eb-surface); border: 1px solid var(--eb-border-2); border-radius: 16px; } .eb-focal-photo { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; border: 1px solid var(--eb-border-2); background-color: var(--eb-photo-bg); background-size: cover; background-position: center; overflow: hidden; } .eb-photo-flag { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px); padding: 4px 9px 5px; border-radius: 6px; background: rgba(12, 12, 14, 0.82); backdrop-filter: blur(3px); color: var(--eb-on-photo); font-size: 0.7rem; font-weight: 700; line-height: 1.25; } .eb-focal-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .eb-focal-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; min-width: 0; font-size: 1.32rem; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; color: var(--eb-text); overflow-wrap: anywhere; } .eb-focal-meta { margin: 0; font-size: 0.86rem; color: var(--eb-muted); font-variant-numeric: tabular-nums; } .eb-focal-meta b { color: var(--eb-text); font-weight: 700; } .eb-focal-price { color: var(--eb-orange-ink) !important; font-size: 1.05rem; } .eb-focal-advice { margin: 0; max-width: 62ch; font-size: 0.95rem; line-height: 1.65; color: var(--eb-text); } .eb-board-section { margin-top: 30px; } .eb-board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-bottom: 14px; } .eb-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; } .eb-tile { min-width: 0; content-visibility: auto; contain-intrinsic-size: auto 300px; } .eb-tile-btn { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; overflow: hidden; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; } .eb-tile-btn:hover { border-color: var(--eb-orange); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .eb-tile-btn:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 2px; } .eb-tile.is-open .eb-tile-btn { border-color: var(--eb-orange); } .eb-tile-photo { position: relative; display: block; flex: none; width: 100%; aspect-ratio: 4 / 3; background-color: var(--eb-photo-bg); background-size: cover; background-position: center; border-bottom: 1px solid var(--eb-border); } .eb-tile-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; padding: 12px 12px 13px; min-width: 0; } .eb-tile-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; font-weight: 700; font-size: 0.92rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--eb-text); overflow-wrap: anywhere; } .eb-tile-figs { display: flex; flex-wrap: wrap; gap: 1px 10px; font-size: 0.75rem; color: var(--eb-muted); font-variant-numeric: tabular-nums; } .eb-tile-figs b { color: var(--eb-body); font-weight: 700; } .eb-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; } .eb-tile-foot .eb-spark { width: 62px; } .eb-tile-price { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.02em; color: var(--eb-orange-ink); font-variant-numeric: tabular-nums; } .eb-tile-days { font-size: 0.75rem; color: var(--eb-muted); } .eb-tile-detail { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; background: var(--eb-surface-2); border: 1px solid var(--eb-border-2); border-radius: 14px; } .eb-stat-advice { margin: 0; max-width: 62ch; font-size: 0.92rem; line-height: 1.65; color: var(--eb-text); } .eb-stat-actions { display: flex; flex-wrap: wrap; gap: 8px; } .eb-stats-sep { color: var(--eb-border-2); margin: 0 2px; } .eb-load-failed { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .eb-stats-thin, .eb-stats-note, .eb-stats-upsell { color: var(--eb-muted); font-size: 0.84rem; } .eb-stats-thin { margin: 12px 0 0; line-height: 1.55; } .eb-stats-note { margin-top: 16px; } .eb-stats-upsell { margin: 0; padding: 16px 20px 18px; background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; line-height: 1.6; } .eb-stats-upsell a { margin-left: 4px; color: var(--eb-orange-ink); font-weight: 700; } .eb-stats-allclear { margin: 0; padding: 22px 24px; background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; font-size: 1rem; color: var(--eb-text); max-width: 62ch; } .eb-stats-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 32px; padding: 32px; background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; } .eb-stats-empty-lead { margin: 0; font-size: 1.05rem; color: var(--eb-text); } .eb-chart { margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; } .eb-chart-svg { width: 100%; overflow: visible; } .eb-dash-rail .eb-chart-svg { height: 104px; } .eb-focal .eb-chart-svg { height: 86px; } .eb-tile-detail .eb-chart-svg { height: 110px; } .eb-chart-caption { font-size: 0.76rem; line-height: 1.5; color: var(--eb-muted); } .eb-bar { fill: var(--eb-orange); transition: fill 140ms ease; } .eb-bar:hover { fill: var(--eb-orange-hover, var(--eb-orange)); } .eb-bar-zero { fill: var(--eb-border-2); } .eb-bar-marker { fill: var(--eb-muted); } .eb-chart-baseline { stroke: var(--eb-border); stroke-width: 1; } .eb-spark { width: 96px; height: 26px; overflow: visible; } .eb-spark-line { fill: none; stroke: var(--eb-orange); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .eb-spark-fill { fill: var(--eb-orange); opacity: 0.14; stroke: none; } .eb-spark-end { fill: var(--eb-orange); } .eb-demand-rows { list-style: none; display: flex; flex-direction: column; margin: 12px 0 0; padding: 0; } .eb-demand-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--eb-border); } .eb-demand-row:first-child { border-top: 0; } .eb-demand-label { min-width: 0; font-size: 0.86rem; font-weight: 700; color: var(--eb-text); overflow-wrap: anywhere; } .eb-demand-verbatim { margin-left: 6px; font-size: 0.7rem; font-weight: 600; color: var(--eb-muted); } .eb-demand-counts { text-align: right; font-size: 0.76rem; color: var(--eb-muted); font-variant-numeric: tabular-nums; } .eb-demand-unmet { display: block; color: var(--eb-orange-ink); font-weight: 700; } .eb-demand-gap { grid-column: 1 / -1; justify-self: start; font-size: 0.7rem; font-weight: 700; color: var(--eb-muted); border: 1px solid var(--eb-border-2); border-radius: 999px; padding: 1px 9px 2px; white-space: nowrap; } @media (max-width: 1080px) { .eb-dash { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "figs" "main" "rail"; } .eb-figs { flex-direction: row; flex-wrap: wrap; gap: 4px 26px; } .eb-figs > div { flex: 0 1 auto; justify-content: flex-start; gap: 8px; padding: 4px 0; border-top: 0; } } @media (max-width: 700px) { .eb-focal-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; } .eb-focal-photo { max-width: 260px; } .eb-tile-detail { padding: 14px; } } @media (max-width: 620px) { .eb-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .eb-tile-body { gap: 5px; padding: 10px 10px 11px; } .eb-tile-title { font-size: 0.86rem; } .eb-tile-figs { font-size: 0.7rem; gap: 1px 8px; } .eb-tile-price { font-size: 0.94rem; } .eb-tile-foot .eb-spark { display: none; } } @media (prefers-reduced-motion: reduce) { .eb-bar, .eb-tile-btn { transition: none; } .eb-tile-btn:hover { transform: none; } } .eb-pricing-band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); background: #0C0C0E; border: 1px solid var(--eb-border-2); border-radius: 20px; overflow: hidden; margin-bottom: 52px; } .eb-pricing-band:not(:has(.eb-pricing-photo)) { grid-template-columns: minmax(0, 1fr); } :root:root[data-theme="light"] .eb-pricing-band { border-color: transparent; box-shadow: 0 24px 60px rgba(12, 12, 14, 0.28), 0 2px 8px rgba(12, 12, 14, 0.16); } .eb-pricing-band-inner { padding: 52px 44px 48px; max-width: 640px; } .eb-pricing-photo { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); } .eb-pricing-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .eb-pricing-headline { font-family: var(--eb-display); font-weight: 800; font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 0.98; letter-spacing: -0.035em; color: var(--eb-on-photo); text-wrap: balance; margin: 0 0 16px; } .eb-pricing-sub { color: var(--eb-on-photo-dim); font-size: 1.02rem; line-height: 1.55; max-width: 42ch; margin: 0 0 20px; } .eb-pricing-claim { color: var(--eb-on-photo); font-size: 0.95rem; line-height: 1.65; max-width: 48ch; margin: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .eb-pricing-proof { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; } .eb-pricing-proof li { display: flex; align-items: flex-start; gap: 10px; color: var(--eb-on-photo-dim); font-size: 0.9rem; line-height: 1.5; } .eb-pricing-proof .eb-included-tick { color: var(--eb-orange-on-dark); } .eb-pricing-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .eb-pricing-alert { margin-bottom: 52px; } .eb-ladder { margin-bottom: 52px; } .eb-ladder .eb-section-head { justify-content: space-between; flex-wrap: wrap; gap: 16px; } .eb-ladder-sub { color: var(--eb-body); font-size: 0.95rem; line-height: 1.7; max-width: 68ch; margin: 10px 0 24px; } .eb-ladder-note { color: var(--eb-muted); font-size: 0.86rem; line-height: 1.65; max-width: 68ch; margin: 20px 0 0; } .eb-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .eb-plan { position: relative; display: flex; flex-direction: column; background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; padding: 24px 22px; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .eb-plan.is-marked { border-color: var(--eb-tint-border); } .eb-plan-flag { position: absolute; top: -1px; right: 18px; padding: 4px 10px; border-radius: 0 0 6px 6px; background: var(--eb-tint-bg); color: var(--eb-text); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .eb-plan:hover { transform: translateY(-3px); border-color: var(--eb-orange); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } :root:root[data-theme="light"] .eb-plan:hover { box-shadow: 0 12px 32px rgba(12, 12, 14, 0.14); } .eb-plan-name { font-family: var(--eb-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--eb-text); margin: 0; } .eb-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; min-height: 58px; margin-top: 10px; } .eb-plan-price .eb-price { font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; } .eb-plan-per, .eb-plan-noprice { color: var(--eb-muted); font-size: 0.86rem; } .eb-plan-noprice { line-height: 1.5; } .eb-plan-rows { margin: 6px 0 0; border-top: 1px solid var(--eb-border); } .eb-plan-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--eb-border); } .eb-plan-row:last-child { border-bottom: none; } .eb-plan-row dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); margin: 0; } .eb-plan-row dd { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--eb-text); font-variant-numeric: tabular-nums; text-align: right; } .eb-plan-foot { margin-top: auto; padding-top: 20px; } .eb-plan-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 12px; font-family: var(--eb-display); font-weight: 800; font-size: 0.92rem; letter-spacing: -0.01em; text-decoration: none; background-color: var(--eb-orange) !important; color: var(--eb-on-orange) !important; transition: background-color 140ms ease, box-shadow 140ms ease; } .eb-plan-btn:hover { background-color: var(--eb-orange-hover) !important; color: var(--eb-on-orange) !important; box-shadow: 0 0 32px rgba(232, 99, 10, 0.32); } .eb-plan-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--eb-page-bg), 0 0 0 4px var(--eb-orange); } .eb-plan-btn--quiet { background-color: transparent !important; border-color: var(--eb-border-2); color: var(--eb-text) !important; } .eb-plan-btn--quiet:hover { background-color: transparent !important; border-color: var(--eb-orange); color: var(--eb-orange-ink) !important; box-shadow: none; } .eb-plan-then { display: block; margin-top: 10px; min-height: 2.6em; color: var(--eb-muted); font-size: 0.8rem; line-height: 1.5; } .eb-bill-seg { max-width: 100%; flex-wrap: wrap; } .eb-bill-seg .eb-seg-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .eb-seg-tag { padding: 2px 7px; border: 1px solid var(--eb-tint-border); border-radius: 999px; background: var(--eb-tint-bg); color: var(--eb-text); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .eb-seg-btn--on .eb-seg-tag { background: transparent; border-color: color-mix(in srgb, var(--eb-on-orange) 38%, transparent); color: var(--eb-on-orange); } .eb-pt-scroll { overflow-x: auto; contain: paint; } .eb-pt-scroll:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 4px; } .eb-pt { width: 100%; min-width: 720px; table-layout: fixed; border-collapse: separate; border-spacing: 0; } .eb-pt th, .eb-pt td { text-align: left; } .eb-pt tbody th[scope="row"], .eb-pt tbody th[scope="rowgroup"], .eb-pt .eb-pt-corner { position: sticky; left: 0; z-index: 1; width: 34%; background: var(--eb-page-bg); } .eb-pt tbody th[scope="row"] { padding: 13px 22px 13px 0; overflow-wrap: break-word; font-size: 0.9rem; font-weight: 500; line-height: 1.45; color: var(--eb-body); border-bottom: 1px solid var(--eb-border); } .eb-pt tbody td { width: 22%; padding: 13px 18px; overflow-wrap: break-word; font-size: 0.95rem; font-weight: 600; color: var(--eb-text); font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--eb-border); } .eb-pt col.is-marked { background: var(--eb-tint-bg); } .eb-pt-col, .eb-pt thead .eb-pt-corner { border-bottom: 1px solid var(--eb-border-2); } .eb-pt-col { padding: 0 18px 20px; vertical-align: bottom; } .eb-pt-flag { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border: 1px solid transparent; border-radius: 6px; background: var(--eb-tint-bg); color: var(--eb-text); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .eb-pt-flag--next { background: var(--eb-surface-2); border-color: var(--eb-border); color: var(--eb-muted); } .eb-pt-flag--none { visibility: hidden; background: none; border-color: transparent; } .eb-pt-name { display: block; overflow-wrap: break-word; font-family: var(--eb-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--eb-text); } .eb-pt-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; min-height: 46px; margin-top: 10px; } .eb-pt-price .eb-price { font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; } .eb-pt-per, .eb-pt-noprice { color: var(--eb-muted); font-size: 0.86rem; line-height: 1.5; } .eb-pt-group > tr:first-child > th, .eb-pt-group > tr:first-child > td { padding-top: 30px; padding-bottom: 11px; border-bottom: 1px solid var(--eb-border-2); } .eb-pt-group > tr:first-child > th { padding-right: 22px; padding-left: 0; font-family: var(--eb-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-pt-group-note { display: block; max-width: 62ch; margin-top: 7px; font-family: var(--eb-body-font, inherit); font-size: 0.82rem; font-weight: 400; letter-spacing: 0; line-height: 1.6; text-transform: none; color: var(--eb-muted); } .eb-pt-tick .eb-included-tick { margin: 0; } .eb-pt tbody.eb-pt-coming td { color: var(--eb-muted); } .eb-pt-lever { display: block; color: var(--eb-body); font-weight: 600; } .eb-pt-gloss { display: block; margin-top: 3px; font-size: 0.8rem; font-weight: 400; line-height: 1.5; color: var(--eb-muted); } .eb-pt tfoot td { padding: 24px 18px 22px; vertical-align: top; } .eb-pt tfoot .eb-pt-corner { background: var(--eb-page-bg); } .eb-pt-foot-name { display: block; margin-bottom: 12px; font-family: var(--eb-display); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--eb-text); } .eb-included-tick { color: var(--eb-orange-ink); flex: 0 0 auto; margin-top: 2px; } .eb-pt-cards, .eb-pt-included { display: none; } @media (max-width: 775.98px) { .eb-pt-scroll { display: none; } .eb-pt-cards { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .eb-pt-included { display: block; margin-top: 22px; } } .eb-pt-card { padding: 18px 18px 20px; border: 1px solid var(--eb-border); border-radius: 14px; background: var(--eb-surface); } .eb-pt-card.is-marked { border-color: var(--eb-orange); background: var(--eb-tint-bg); } .eb-pt-card .eb-pt-flag--none { display: none; } .eb-pt-card .eb-pt-name { margin: 0; } .eb-pt-card .eb-pt-price { min-height: 0; margin-bottom: 14px; } .eb-pt-card-rows { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; margin: 0 0 18px; padding: 14px 0 0; border-top: 1px solid var(--eb-border); } .eb-pt-card-rows dt { color: var(--eb-muted); font-size: 0.88rem; } .eb-pt-card-rows dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .eb-pt-included-title { margin: 0 0 10px; font-family: var(--eb-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-pt-included-list { margin: 0; padding: 0; list-style: none; } .eb-pt-included-list li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 0.92rem; } .eb-pt-coming-panel { margin-top: 26px; padding: 14px 18px; border: 1px solid var(--eb-border); border-radius: 14px; background: var(--eb-surface-2); } .eb-pt-coming-summary { cursor: pointer; font-family: var(--eb-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-pt-coming-list { margin: 14px 0 4px; padding: 0; list-style: none; } .eb-pt-coming-list > li + li { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--eb-border); } .eb-pt-coming-tiers { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; } .eb-pt-coming-tier { display: inline-flex; gap: 6px; padding: 3px 9px; border: 1px solid var(--eb-border); border-radius: 999px; font-size: 0.78rem; } .eb-pt-coming-plan { color: var(--eb-muted); } .eb-pt-coming-value { font-weight: 600; } .eb-pt-coming-tier.is-none { opacity: 0.55; } .eb-faq { margin-bottom: 40px; } .eb-faq-item { border-bottom: 1px solid var(--eb-border); } .eb-faq .eb-section-head + .eb-faq-item { border-top: 1px solid var(--eb-border); } .eb-faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; font-family: var(--eb-display); font-weight: 700; font-size: 0.98rem; letter-spacing: -0.01em; color: var(--eb-text); } .eb-faq-item > summary::-webkit-details-marker { display: none; } .eb-faq-item > summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-right: 1.5px solid var(--eb-muted); border-bottom: 1.5px solid var(--eb-muted); transform: translateY(-2px) rotate(45deg); transition: transform 160ms ease, border-color 160ms ease; } .eb-faq-item[open] > summary::after { transform: translateY(2px) rotate(-135deg); border-color: var(--eb-orange-ink); } .eb-faq-item > summary:hover { color: var(--eb-orange-ink); } .eb-faq-item > p { margin: 0 0 18px; padding-right: 24px; color: var(--eb-body); font-size: 0.92rem; line-height: 1.7; max-width: 70ch; } .eb-pricing-legal { color: var(--eb-muted); font-size: 0.8rem; line-height: 1.6; margin: 0 0 24px; } .eb-pricing-legal-link { font-size: 0.8rem; } @media (max-width: 1100px) { .eb-pricing-band { grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr); } .eb-pricing-band-inner { padding: 44px 34px 40px; } } @media (max-width: 960px) { .eb-pricing-band, .eb-pricing-band:not(:has(.eb-pricing-photo)) { grid-template-columns: minmax(0, 1fr); } .eb-pricing-photo { grid-row: 1; min-height: 170px; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 40%, transparent 100%); } .eb-pricing-band-inner { max-width: none; padding-top: 28px; } .eb-plans { grid-template-columns: 1fr; } .eb-plan-price { min-height: 0; } .eb-plan-then { min-height: 0; } } @media (max-width: 700px) { .eb-pricing-band-inner { padding: 24px 22px 30px; } .eb-pricing-cta .eb-hero-cta-btn { flex: 1 1 auto; padding-inline: 16px; } .eb-ladder .eb-section-head { flex-wrap: wrap; gap: 12px; } } @media (max-width: 380px) { .eb-pt { min-width: 480px; } .eb-pt tbody th[scope="row"], .eb-pt tbody th[scope="rowgroup"], .eb-pt .eb-pt-corner { width: 142px; } .eb-pt tbody td { padding: 12px 10px; } .eb-pt-col { padding: 0 10px 14px; } .eb-pt tfoot td { padding: 18px 10px; } .eb-pt-gloss { font-size: 0.76rem; } } @media (max-width: 560px) { .eb-bill-seg .eb-seg-btn { flex-direction: column; gap: 2px; } } @media (prefers-reduced-motion: reduce) { .eb-plan, .eb-faq-item > summary::after { transition: none; } .eb-plan:hover { transform: none; } } .eb-plans--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eb-mem-current { display: flex; flex-direction: column; gap: 4px; background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; padding: 22px; margin-bottom: 24px; } .eb-mem-current-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-mem-current-plan { font-family: var(--eb-display); font-weight: 800; font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.03em; color: var(--eb-orange-ink); } .eb-mem-current-via { color: var(--eb-body); font-size: 0.9rem; } .eb-mem-alert { margin-bottom: 24px; } .eb-mem-offer { background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: 14px; padding: 22px; margin-bottom: 28px; } .eb-mem-offer-body { color: var(--eb-body); font-size: 0.95rem; line-height: 1.7; max-width: 68ch; margin: 8px 0 0; } .eb-mem-offer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .eb-mem-offer-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: var(--eb-text); margin: 0; } .eb-mem-region { margin-bottom: 40px; } .eb-mem-region + .eb-mem-region { border-top: 1px solid var(--eb-border); padding-top: 36px; } .eb-mem-region > .eb-section-title { margin: 0 0 16px; } .eb-mem-free { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--eb-border); } .eb-mem-free-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .eb-mem-free-days { font-family: var(--eb-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--eb-text); } .eb-mem-free-ends { color: var(--eb-muted); font-size: 0.86rem; } .eb-mem-free-next { color: var(--eb-body); font-size: 0.9rem; line-height: 1.6; max-width: 62ch; margin: 8px 0 0; } .eb-mem-free-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; } .eb-mem-free-hint { color: var(--eb-muted); font-size: 0.8rem; } .eb-mem-seg { margin-bottom: 20px; } .eb-mem-consent { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 12px; padding: 14px 16px; background: var(--eb-surface-inset); border: 1px solid var(--eb-border); border-radius: 12px; margin-bottom: 20px; } .eb-mem-consent-hint { color: var(--eb-muted); font-size: 0.8rem; } .eb-mem-consent .mud-checkbox { align-items: flex-start; } .eb-mem-covered-note { display: flex; align-items: center; min-height: 44px; color: var(--eb-muted); font-size: 0.86rem; } .eb-mem-cta { min-height: 44px; } @media (max-width: 960px) { .eb-plans--two { grid-template-columns: 1fr; } } ::selection { background: var(--eb-tint-border); } input, textarea, [contenteditable] { caret-color: var(--eb-orange); } .eb-qa-q, .eb-qa-a, .eb-qa-mine-q, .eb-qa-preview-text, .eb-qi-q, .eb-qi-a, .eb-store-review-text, .eb-store-prose p, .eb-ld-desc, .eb-detail-desc, .eb-fb-row-title, .eb-fb-row-excerpt, .eb-fb-response-text, .eb-fb-detail-title, .eb-fb-detail-text, .eb-fb-admin-table .eb-fb-admin-title, .eb-chat-text, .eb-chat-row-preview { overflow-wrap: anywhere; } .eb-qa-answer-main { flex: 1; min-width: 0; } .eb-store-hero-montage--own { filter: saturate(1.04); } .eb-store-notice { display: block; margin: -8px 0 24px; padding: 11px 16px; border: 1px solid var(--eb-border); border-radius: 12px; background: var(--eb-surface); color: var(--eb-body); font-size: 0.9rem; font-weight: 400; line-height: 1.45; } .eb-store-featured h2.eb-store-block-label, .eb-store-story h2.eb-store-block-label, [data-theme="light"] .eb-store-featured h2.eb-store-block-label, [data-theme="light"] .eb-store-story h2.eb-store-block-label { font-family: var(--eb-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; color: var(--eb-text); margin: 0 0 14px; } [data-theme="light"] .eb-store-signature h2.eb-store-signature-label { color: var(--eb-muted); } .eb-store-featured, .eb-store-story { margin: 0 0 26px; } .eb-store-featured-rail { --eb-featured-cols: 5; --eb-featured-gap: 18px; display: flex; gap: var(--eb-featured-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 4px 0 12px; scrollbar-color: var(--eb-border-2) transparent; scrollbar-width: thin; } .eb-store-featured-rail > * { flex: 0 0 calc((100% - (var(--eb-featured-cols) - 1) * var(--eb-featured-gap)) / var(--eb-featured-cols)); scroll-snap-align: start; } .eb-store-featured-rail::-webkit-scrollbar { height: 8px; } .eb-store-featured-rail::-webkit-scrollbar-thumb { background: var(--eb-border-2); border-radius: 999px; } .eb-store-featured-rail::-webkit-scrollbar-track { background: transparent; } .eb-store-story-text { white-space: pre-line; color: var(--eb-body); } .eb-store-offer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 16px; color: var(--eb-body); font-size: 0.9rem; line-height: 1.5; } .eb-store-offer-tag { flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-layout-block { padding: 16px 0; border-top: 1px solid var(--eb-border); } .eb-layout-block:first-of-type { border-top: 0; padding-top: 0; } .eb-layout-block__label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.95rem; font-weight: 700; color: var(--eb-text); } .eb-layout-block__hint { margin-top: 4px; font-size: 0.82rem; line-height: 1.5; color: var(--eb-muted); max-width: 62ch; } .eb-layout-block .mud-input-control { margin-top: 22px; } .eb-layout-block__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .eb-layout-block--locked .eb-layout-block__label, .eb-layout-block--locked .eb-layout-block__hint { color: var(--eb-muted); } .eb-layout-lock { padding: 2px 8px; border: 1px solid var(--eb-border-2); border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted); } .eb-layout-lock-link { display: inline-block; margin-top: 10px; font-size: 0.85rem; font-weight: 700; color: var(--eb-orange-ink); } .eb-store-logo-nudge { margin: 0 0 12px; max-width: 30ch; text-align: center; font-size: 0.8rem; line-height: 1.5; color: var(--eb-muted); } .eb-layout-modules { list-style: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--eb-border); border-radius: 12px; overflow: hidden; } .eb-layout-module { display: flex; align-items: center; gap: 4px; padding: 6px 10px 6px 4px; border-top: 1px solid var(--eb-border); background: var(--eb-surface); } .eb-layout-module:first-child { border-top: 0; } .eb-layout-module--off .eb-layout-module__name { color: var(--eb-muted); } .eb-layout-module__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .eb-layout-module__name { font-size: 0.9rem; font-weight: 700; color: var(--eb-text); } .eb-layout-module__hint { font-size: 0.78rem; color: var(--eb-muted); } .eb-layout-module__move { flex: 0 0 auto; display: flex; gap: 2px; } .eb-ground-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; margin-top: 14px; } .eb-ground-grid--placement { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); max-width: 340px; } .eb-ground-upload { display: contents; } .eb-ground { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; font: inherit; color: var(--eb-muted); -webkit-tap-highlight-color: transparent; } .eb-ground:disabled { cursor: wait; opacity: 0.6; } .eb-ground-swatch { aspect-ratio: 3 / 1; min-height: 34px; border-radius: 10px; border: 1px solid var(--eb-border-2); display: flex; align-items: center; justify-content: center; color: var(--eb-muted); overflow: hidden; background: radial-gradient(70% 130% at 88% 4%, rgba(232, 99, 10, 0.09) 0%, rgba(232, 99, 10, 0) 62%), linear-gradient(176deg, color-mix(in srgb, var(--eb-store-ground, var(--eb-surface)) 96%, #fff) 0%, var(--eb-store-ground, var(--eb-surface)) 58%, color-mix(in srgb, var(--eb-store-ground, var(--eb-surface)) 95%, #000) 100%); transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; } @media (pointer: coarse) { .eb-ground-swatch { min-height: 44px; } } .eb-ground-swatch--photos { background: var(--eb-hero-fallback); } .eb-ground-swatch--upload { border-style: dashed; background-color: var(--eb-photo-bg); background-size: cover; background-position: center; } .eb-ground--on .eb-ground-swatch { border-color: var(--eb-orange); box-shadow: 0 0 0 2px var(--eb-orange); } .eb-ground--on .eb-ground-name { color: var(--eb-text); } .eb-ground:hover:not(:disabled) .eb-ground-swatch { transform: translateY(-1px); } .eb-ground:hover:not(:disabled) .eb-ground-name { color: var(--eb-text); } .eb-ground:focus-visible { outline: none; } .eb-ground:focus-visible .eb-ground-swatch { outline: 2px solid var(--eb-orange); outline-offset: 2px; } .eb-ground-name { font-size: 0.74rem; font-weight: 700; line-height: 1.3; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eb-ground-swatch--diagram { position: relative; display: grid; align-content: center; justify-items: start; gap: 3px; padding: 7px 9px; background: var(--eb-surface); } .eb-ground-swatch--diagram.eb-ground-swatch--centred { justify-items: center; } .eb-ground-mark { width: 13px; height: 13px; border-radius: 3px; background: color-mix(in srgb, var(--eb-orange) 62%, transparent); } .eb-ground-line { width: 42px; height: 3px; border-radius: 2px; background: var(--eb-border-2); } .eb-ground-line--short { width: 26px; } .eb-ground--on .eb-ground-line { background: color-mix(in srgb, var(--eb-text) 42%, transparent); } .eb-store-header-preview { position: relative; margin-top: 12px; border: 1px solid var(--eb-border); border-radius: 12px; overflow: hidden; background: var(--eb-photo-bg); aspect-ratio: 3 / 1; } .eb-store-header-preview::after { content: ""; position: absolute; inset: 6% 20%; border: 1px dashed rgba(255, 255, 255, 0.72); border-radius: 6px; box-shadow: 0 0 0 9999px rgba(12, 12, 14, 0.42); pointer-events: none; } .eb-store-header-preview img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 1400px) { .eb-store-featured-rail { --eb-featured-cols: 4; } } @media (max-width: 1200px) { .eb-store-featured-rail { --eb-featured-cols: 3; } } @media (max-width: 960px) { .eb-store-featured-rail { --eb-featured-cols: 2; } } @media (max-width: 560px) { .eb-store-featured-rail { --eb-featured-gap: 12px; } .eb-store-notice { margin-bottom: 18px; font-size: 0.85rem; } } #components-reconnect-modal { display: none; } #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { display: flex; position: fixed; inset: 0; z-index: 2100; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, var(--eb-bg) 80%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } html.eb-navigating #components-reconnect-modal { display: none !important; } #components-reconnect-modal .eb-rc-card { width: min(340px, 100%); padding: 28px 24px; border: 1px solid var(--eb-border); border-radius: 14px; background: var(--eb-surface); color: var(--eb-text); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); text-align: center; } #components-reconnect-modal .eb-rc-spinner { width: 34px; height: 34px; margin: 0 auto 16px; border: 3px solid var(--eb-border-2); border-top-color: var(--eb-orange); border-radius: 50%; animation: eb-rc-spin 0.9s linear infinite; } @keyframes eb-rc-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #components-reconnect-modal .eb-rc-spinner { animation-duration: 2.4s; } } #components-reconnect-modal .eb-rc-title { margin: 0 0 6px; font-size: 1rem; font-weight: 600; } #components-reconnect-modal .eb-rc-sub { margin: 0 0 18px; font-size: 0.85rem; color: var(--eb-body); } #components-reconnect-modal .eb-rc-btn { display: inline-block; min-width: 0; margin: 0 4px !important; padding: 9px 16px; border: 1px solid var(--eb-orange); border-radius: 8px; background: var(--eb-orange); color: var(--eb-on-orange); font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.2; text-transform: none; text-decoration: none; cursor: pointer; } #components-reconnect-modal .eb-rc-btn-quiet { border-color: var(--eb-border-2); background: transparent; color: var(--eb-text); } #components-reconnect-modal .eb-rc-lost { display: none; } #components-reconnect-modal.components-reconnect-failed .eb-rc-spinner, #components-reconnect-modal.components-reconnect-rejected .eb-rc-spinner, #components-reconnect-modal.components-reconnect-failed .eb-rc-retrying, #components-reconnect-modal.components-reconnect-rejected .eb-rc-retrying { display: none; } #components-reconnect-modal.components-reconnect-failed .eb-rc-lost, #components-reconnect-modal.components-reconnect-rejected .eb-rc-lost { display: block; } #components-reconnect-modal.components-reconnect-rejected #eb-rc-retry { display: none; } .eb-topnav details.eb-nav-item { position: relative; display: flex; align-items: center; align-self: stretch; } .eb-nav-btn { display: inline-flex; align-items: center; gap: 2px; min-height: 37px; padding: 6px 14px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1.4; color: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none; user-select: none; } .eb-nav-btn::-webkit-details-marker { display: none; } .eb-nav-btn:hover, .eb-nav-btn:focus-visible, details[open] > .eb-nav-btn { color: var(--eb-text); background-color: rgba(255, 255, 255, 0.08); } [data-theme="light"] .eb-nav-btn:hover, [data-theme="light"] .eb-nav-btn:focus-visible, [data-theme="light"] details[open] > .eb-nav-btn { background-color: rgba(23, 23, 26, 0.06); } .eb-nav-caret { font-size: 1.1rem; transition: transform 140ms ease; } details[open] > .eb-nav-btn .eb-nav-caret { transform: rotate(180deg); } .eb-topnav .eb-nav-item--active > .eb-nav-btn, .eb-topnav a.eb-nav-item--active { color: var(--eb-text); font-weight: 800; } .eb-nav-popover { position: absolute; top: 100%; left: 0; z-index: 1310; min-width: 208px; margin-top: 6px; padding: 6px 0; border: 1px solid var(--eb-border); border-radius: 12px; background-color: var(--eb-surface); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); overflow: hidden; } .eb-nav-popover--end { left: auto; right: 0; } .eb-nav-popover--scroll { max-height: calc(100dvh - 64px - max(12px, env(safe-area-inset-bottom))); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; } .eb-nav-popover-item { display: block; min-height: 36px; padding: 8px 16px; color: var(--eb-text); font-size: 0.9rem; font-weight: 500; line-height: 1.4; text-decoration: none; white-space: nowrap; } .eb-nav-popover-item:hover, .eb-nav-popover-item:focus-visible { background-color: var(--eb-tint-bg); color: var(--eb-text); outline: none; } .eb-nav-popover-item[aria-current="page"] { font-weight: 800; } .eb-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, 0.8); cursor: pointer; list-style: none; transition: color 140ms ease, background-color 140ms ease; } .eb-icon-btn::-webkit-details-marker { display: none; } .eb-icon-btn:hover, .eb-icon-btn:focus-visible { color: var(--eb-text); background: rgba(255, 255, 255, 0.08); } [data-theme="light"] .eb-topnav .eb-icon-btn, [data-theme="light"] .eb-nav-drawer .eb-icon-btn { color: rgba(23, 23, 26, 0.74); } [data-theme="light"] .eb-topnav .eb-icon-btn:hover, [data-theme="light"] .eb-nav-drawer .eb-icon-btn:hover, [data-theme="light"] .eb-topnav .eb-icon-btn:focus-visible { color: var(--eb-text); background: rgba(23, 23, 26, 0.06); } .eb-icon-btn .mud-icon-root { font-size: 1.5rem; } .eb-theme-toggle .eb-ico-moon { display: none; } [data-theme="light"] .eb-theme-toggle .eb-ico-sun { display: none; } [data-theme="light"] .eb-theme-toggle .eb-ico-moon { display: inline-flex; } .eb-fav-nav .eb-ico-on { display: none; } .eb-fav-nav--on .eb-ico-on { display: inline-flex; } .eb-fav-nav--on .eb-ico-off { display: none; } details.eb-account-nav { position: relative; display: flex; align-items: center; } details.eb-account-nav > summary { list-style: none; } details.eb-account-nav > summary::-webkit-details-marker { display: none; } .eb-account-nav-list { min-width: 232px; } details.eb-header-search { display: flex; align-items: center; position: static; } details.eb-header-search > summary { list-style: none; } details.eb-header-search > summary::-webkit-details-marker { display: none; } .eb-header-search-form { display: flex; align-items: center; gap: 8px; flex: 0 1 560px; } .eb-header-search-form .eb-header-search-input { flex: 1 1 auto; min-height: 44px; padding: 8px 14px; border: 1px solid var(--eb-border-2); border-radius: 10px; background: #fff; color: #0C0C0E; font: inherit; } .eb-header-search-form .eb-header-search-input:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 1px; } dialog.eb-nav-drawer { position: fixed; inset: 0 0 0 auto; width: min(320px, 88vw); height: 100dvh; max-height: none; max-width: none; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--eb-border); background-color: var(--eb-bg); color: var(--eb-text); z-index: 1305; } dialog.eb-nav-drawer::backdrop { background: rgba(0, 0, 0, 0.5); } dialog.eb-nav-drawer[open] { display: block; animation: eb-drawer-in 180ms ease-out; } @keyframes eb-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { dialog.eb-nav-drawer[open] { animation: none; } } .eb-nav-drawer-inner { display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(16px, env(safe-area-inset-bottom)); } .eb-nav-drawer-head { display: flex; align-items: center; gap: 4px; min-height: 64px; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--eb-border); } .eb-nav-drawer-title { flex: 1 1 auto; font-size: 1rem; font-weight: 800; color: var(--eb-text); } .eb-nav-drawer-utility { display: flex; align-items: center; } .eb-nav-drawer-sell { margin: 16px 20px 8px; } .eb-nav-drawer-menu { display: flex; flex-direction: column; padding: 4px 0 12px; } .eb-nav-drawer-link { display: block; min-height: 52px; padding: 14px 20px; font-size: 0.95rem; font-weight: 600; line-height: 1.5; color: var(--eb-body); text-decoration: none; cursor: pointer; list-style: none; } .eb-nav-drawer-link::-webkit-details-marker { display: none; } .eb-nav-drawer-link:hover, .eb-nav-drawer-link:focus-visible { background-color: var(--eb-tint-bg); color: var(--eb-text); } .eb-nav-drawer-group-title { position: relative; padding-right: 44px; color: var(--eb-text); font-weight: 700; } .eb-nav-drawer-group-title::after { content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--eb-muted); border-bottom: 2px solid var(--eb-muted); transform: translateY(-70%) rotate(45deg); transition: transform 140ms ease; } .eb-nav-drawer-group[open] > .eb-nav-drawer-group-title::after { transform: translateY(-30%) rotate(225deg); } .eb-nav-drawer-children { padding-left: 18px; } .eb-nav-drawer-children .eb-nav-drawer-link { font-size: 0.92rem; font-weight: 500; } .eb-nav-drawer-link--active, .eb-nav-drawer-link[aria-current="page"] { color: var(--eb-text); font-weight: 800; background-color: var(--eb-tint-bg); } dialog.eb-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--eb-border); border-radius: 16px; background: var(--eb-surface); color: var(--eb-text); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); } dialog.eb-dialog::backdrop { background: rgba(0, 0, 0, 0.55); } dialog.eb-dialog > .eb-dialog-head, dialog.eb-dialog > .eb-dialog-body, dialog.eb-dialog > .eb-dialog-foot { padding: 16px 20px; } dialog.eb-dialog > .eb-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--eb-border); } dialog.eb-dialog > .eb-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--eb-border); } .eb-dialog-title { margin: 0; font-size: 1.1rem; font-weight: 800; } .eb-dialog-close { width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; color: var(--eb-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; } .eb-dialog-close:hover, .eb-dialog-close:focus-visible { background: var(--eb-tint-bg); color: var(--eb-text); } @media (pointer: coarse) { .eb-dialog-close { width: 44px; height: 44px; } } .eb-flash { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--eb-border-2); border-radius: 10px; background: var(--eb-surface-2); color: var(--eb-text); font-weight: 600; } .eb-flash::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--eb-orange); } .mud-chip.mud-chip-text.eb-status-chip.mud-chip-color-info { color: var(--eb-info); background: color-mix(in srgb, var(--eb-info) 16%, transparent); } .mud-chip.mud-chip-text.eb-status-chip.mud-chip-color-warning { color: var(--eb-welfare-accent); background: var(--eb-welfare-bg); } .mud-chip.mud-chip-text.eb-status-chip.mud-chip-color-success, .mud-chip.mud-chip-text.eb-status-chip.mud-chip-color-default { color: var(--eb-text); background: var(--eb-tint-bg); } .eb-pricing-legal-link, .eb-page-sub a, p > a.mud-link { text-decoration: underline; text-underline-offset: 3px; } .eb-crumb a.mud-link { text-decoration: underline; text-underline-offset: 3px; } fieldset.eb-seg { margin: 0; min-width: 0; } .eb-bill-seg .eb-seg-btn { position: relative; } .eb-bill-seg .eb-seg-btn input[type="radio"] { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .eb-bill-seg .eb-seg-btn:has(input:checked) { background: var(--eb-orange); color: var(--eb-on-orange); } .eb-bill-seg .eb-seg-btn:has(input:focus-visible) { outline: 2px solid var(--eb-orange); outline-offset: 2px; } .eb-bill-seg .eb-seg-btn:has(input:checked) .eb-seg-tag { background: transparent; border-color: color-mix(in srgb, var(--eb-on-orange) 38%, transparent); color: var(--eb-on-orange); } .eb-ladder .eb-pt-price.eb-pt-price--annual, .eb-ladder .eb-plan-then.eb-plan-then--annual { display: none; } .eb-ladder:has(#eb-billing-annual:checked) .eb-pt-price.eb-pt-price--monthly, .eb-ladder:has(#eb-billing-annual:checked) .eb-plan-then.eb-plan-then--monthly { display: none; } .eb-ladder:has(#eb-billing-annual:checked) .eb-pt-price.eb-pt-price--annual { display: flex; } .eb-ladder:has(#eb-billing-annual:checked) .eb-plan-then.eb-plan-then--annual { display: block; } .eb-heart-form { display: contents; } .eb-compare-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--eb-orange); cursor: pointer; } .eb-compare-check:has(input:checked) { color: var(--eb-orange-ink); } .eb-compare-check:has(input:disabled) { opacity: 0.5; cursor: default; } .eb-compare-check input:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 2px; } .eb-compare-page-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 28px 0 8px; } .eb-compare-col-remove { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .eb-morph-controls-panel > summary.eb-filter-toggle { list-style: none; } .eb-morph-controls-panel > summary.eb-filter-toggle::-webkit-details-marker { display: none; } @media (max-width: 959.98px) { .eb-morph-controls-panel[open] > .eb-morph-controls { display: flex !important; flex-direction: column; align-items: stretch; } .eb-morph-controls-panel[open] .eb-seg { width: 100%; } .eb-morph-controls-panel[open] .eb-seg-btn { flex: 1 1 0; } .eb-morph-controls .eb-sort-menu, .eb-morph-controls .eb-sort-menu > .eb-nav-btn { width: 100%; min-height: 44px; } } @media (min-width: 960px) { .eb-morph-controls-panel > summary.eb-filter-toggle { display: none; } .eb-morph-controls-panel::details-content { content-visibility: visible; } } a.eb-seg-btn { text-decoration: none; } .eb-seg-btn[aria-disabled="true"] { color: var(--eb-muted); opacity: 0.5; cursor: default; } .eb-native-field .mud-input.mud-input-outlined { border: 1px solid var(--eb-input-border); } .eb-native-field .mud-input.mud-input-outlined:focus-within { border-color: var(--eb-orange); } .eb-native-check { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 4px; font-size: 0.88rem; color: var(--eb-body); cursor: pointer; } .eb-native-check input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--eb-orange); } .eb-field-error { margin: 0 0 12px; color: var(--eb-error); font-size: 0.85rem; font-weight: 600; } .eb-flash a { color: var(--eb-orange-ink); font-weight: 700; } .eb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 9px 18px; border-radius: 10px; border: 1px solid transparent; font-family: var(--eb-display); font-weight: 700; font-size: 0.88rem; cursor: pointer; text-decoration: none; } .eb-btn--primary { background: var(--eb-orange); border-color: var(--eb-orange); color: var(--eb-on-orange); } .eb-btn--primary:hover { background: var(--eb-orange-hover); border-color: var(--eb-orange-hover); } .eb-btn--outline { background: transparent; border-color: var(--eb-border-2); color: var(--eb-text); } .eb-btn--outline:hover { border-color: var(--eb-orange); color: var(--eb-orange-ink); } .eb-fb-seg-btn, .eb-fb-rail-btn { text-decoration: none; } .eb-fb-rail-form, .eb-fb-filter-form { display: contents; } .eb-native-field select.mud-input-slot { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--eb-muted) 50%), linear-gradient(135deg, var(--eb-muted) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; } .eb-native-field textarea.mud-input-slot { resize: vertical; min-height: 76px; } .eb-fb-seg-radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0); overflow: hidden; white-space: nowrap; } .eb-fb-seg-btn:focus-within { outline: 2px solid var(--eb-orange); outline-offset: 2px; } .eb-flash--error { color: var(--eb-error); } .eb-flash--error::before { background: var(--eb-error); } .eb-fb-manage-panel { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--eb-border); } .eb-fb-manage-summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--eb-muted); list-style: none; } .eb-fb-manage-summary::-webkit-details-marker { display: none; } .eb-fb-manage-summary:hover { color: var(--eb-text); } .eb-fb-manage-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; max-width: 420px; } .eb-filter-bar > form.eb-filter-form { display: contents; } .eb-filter-bar > form.eb-filter-form > .eb-filter-item { flex: 0.9 1 132px; min-width: 0; max-width: 280px; } .eb-filter-bar > form.eb-filter-form > .eb-filter-item--wide { flex: 1.2 1 170px; max-width: 400px; } @media (max-width: 959.98px) { .eb-filter-bar > form.eb-filter-form > .eb-filter-item, .eb-filter-bar > form.eb-filter-form > .eb-filter-item--wide { flex: 0 0 auto; width: 100%; max-width: none; } } .eb-native-field .mud-input.mud-input-outlined { border: 1px solid var(--eb-input-border); } .eb-native-field .mud-input.mud-input-outlined:focus-within { border-color: var(--eb-orange); box-shadow: inset 0 0 0 1px var(--eb-orange); } .eb-native-field .mud-input.mud-input-outlined { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1876; } .eb-native-field .mud-input-adornment { font-size: 1rem; letter-spacing: 0; } .eb-native-field .mud-input-adornment .mud-icon-root { font-size: 1.5rem; } .eb-native-field > .mud-input-label-outlined:not(.eb-sr-only) { position: static; transform: none !important; margin-bottom: 7px; } .eb-native-field:has(> .mud-input-label-outlined) { margin-top: 0; } .eb-native-field select.mud-input-slot, .eb-native-field input.mud-input-slot { min-height: 40px; } .eb-native-field select.mud-input-slot { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2355555C' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 24px; } .eb-native-field input[type="number"]::-webkit-inner-spin-button, .eb-native-field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .eb-native-field input[type="number"] { -moz-appearance: textfield; } details.eb-filter-more { display: block; display: contents; padding-top: 0; border-top: none; } details.eb-filter-more[open] { flex: 0 0 100%; } details.eb-filter-more::details-content, .eb-filter-more-body { flex: 0 0 100%; } .eb-filter-bar .eb-native-field .mud-input-slot { min-height: 39px; } .eb-filter-bar .eb-filter-item { margin-bottom: 0; } .eb-filter-bar .eb-seg { padding: 3px; align-items: stretch; } @media (min-width: 960px) { .eb-filter-bar .eb-seg { height: 40px; } } .eb-filter-bar .eb-seg-btn { display: inline-flex; align-items: center; padding: 0 12px; } details.eb-filter-more > summary.eb-more-btn { list-style: none; } details.eb-filter-more > summary.eb-more-btn::-webkit-details-marker { display: none; } details.eb-filter-more[open] > summary.eb-more-btn { color: var(--eb-text); border-color: var(--eb-orange); } details.eb-filter-more[open] > summary.eb-more-btn .mud-icon-root { transform: rotate(180deg); } .eb-filter-more-body { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--eb-border); } html.eb-js form[data-eb-autosubmit] [type="submit"] { display: none; } details.eb-sort-menu { position: relative; } .eb-pager-btn.eb-pager-btn--disabled { opacity: 0.4; cursor: default; pointer-events: none; } .eb-filter-collapse > summary.eb-filter-toggle { list-style: none; } .eb-filter-collapse > summary.eb-filter-toggle::-webkit-details-marker { display: none; } @media (min-width: 960px) { .eb-filter-collapse > summary.eb-filter-toggle, .eb-filter-done { display: none; } .eb-filter-collapse::details-content { content-visibility: visible; } } @media (max-width: 959.98px) { .eb-filter-collapse > .eb-filter-bar { display: none; } .eb-filter-collapse[open] > .eb-filter-bar { display: flex; flex-direction: column; } } .eb-ld-photo-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; color: inherit; text-align: inherit; } dialog.eb-dialog.eb-lightbox { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(12, 12, 14, 0.96); box-shadow: none; } dialog.eb-dialog.eb-lightbox::backdrop { background: rgba(0, 0, 0, 0.7); } :root:has(dialog.eb-lightbox[open]) { overflow: hidden; } dialog.eb-dialog > form { display: contents; } .eb-dialog-body { padding: 16px 20px; } .eb-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--eb-border); } .eb-heart-form, .eb-inline-form { display: contents; } .eb-share-btn[hidden] { display: none; } .eb-share-btn--copy { position: relative; } .eb-share-copy-icon--done { display: none; } .eb-share-btn--copy[data-eb-copied="1"] { background: var(--eb-orange); border-color: var(--eb-orange); color: var(--eb-on-orange); } .eb-share-btn--copy[data-eb-copied="1"] .eb-share-copy-icon--default { display: none; } .eb-share-btn--copy[data-eb-copied="1"] .eb-share-copy-icon--done { display: inline-flex; } .eb-save-btn.eb-heart--on { border-color: var(--eb-orange); color: var(--eb-orange-on-tint); background: var(--eb-tint-bg); } .eb-save-btn .eb-save-ico--on, .eb-save-btn .eb-save-label--on { display: none; } .eb-save-btn.eb-heart--on .eb-save-ico--off, .eb-save-btn.eb-heart--on .eb-save-label--off { display: none; } .eb-save-btn.eb-heart--on .eb-save-ico--on { display: inline-flex; } .eb-save-btn.eb-heart--on .eb-save-label--on { display: inline; } .eb-native-field .mud-input.mud-input-outlined { border: 1px solid var(--eb-input-border); border-radius: 10px; } .eb-native-field .mud-input.mud-input-outlined:focus-within { border-color: var(--eb-orange); border-width: 2px; } .eb-native-field select.mud-input-slot, .eb-native-field textarea.mud-input-slot, .eb-native-field input.mud-input-slot { display: block; width: 100%; box-sizing: border-box; border: 0; outline: none; background-color: transparent; font: inherit; padding: 10px 14px; text-overflow: ellipsis; } .eb-native-field select.mud-input-slot { cursor: pointer; padding-right: 38px; } .eb-native-field textarea.mud-input-slot { resize: vertical; min-height: 4.5em; } .eb-native-check { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--eb-body); margin-top: 8px; cursor: pointer; } .eb-native-check input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--eb-orange); cursor: pointer; } .eb-store-tabnav { display: flex; gap: 4px; border-bottom: 1px solid var(--eb-border); margin-bottom: 16px; overflow-x: auto; } .eb-store-tabnav-link { display: inline-flex; align-items: center; padding: 12px 16px; font-family: var(--eb-display); font-weight: 600; color: var(--eb-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; } .eb-store-tabnav-link:hover { color: var(--eb-text); } .eb-store-tabnav-link[aria-current="page"] { color: var(--eb-text); border-bottom-color: var(--eb-orange); } .eb-store-tabnav-link:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: -2px; } @media (max-width: 599px) { .eb-store-tabnav-link { min-height: 44px; padding: 10px 14px; } } .eb-native-field .mud-input.mud-input-outlined { border: 1px solid var(--eb-input-border); } .eb-native-field .mud-input.mud-input-outlined:focus-within { border-color: var(--eb-orange); border-width: 2px; } .eb-store-search-form { display: flex; align-items: center; gap: 8px; } .eb-store-search-form .mud-input-control { margin-top: 0; } .eb-store-filters .eb-sort-slot { margin-top: 0; align-self: center; } .eb-inline-form { display: contents; } .eb-form-error { color: var(--eb-error); font-weight: 600; font-size: 0.85rem; margin: 6px 0 0; } .eb-store-review-pin-btn { background: none; border: 0; color: var(--eb-orange-ink); font-weight: 600; font-size: 0.85rem; cursor: pointer; padding: 4px 8px; } .eb-store-review-pin-btn:hover, .eb-store-review-pin-btn:focus-visible { text-decoration: underline; } .eb-review-stars { color: var(--eb-orange-ink); letter-spacing: 1px; } .eb-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; width: fit-content; } .eb-rating input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .eb-rating label { font-size: 1.7rem; line-height: 1; color: var(--eb-border-2); cursor: pointer; } .eb-rating label:hover, .eb-rating label:hover ~ label, .eb-rating input:checked ~ label { color: var(--eb-orange); } .eb-rating input:focus-visible + label { outline: 2px solid var(--eb-orange); outline-offset: 2px; border-radius: 4px; } dialog.eb-dialog.eb-lightbox:not([open]) { display: none; } .eb-sheet-sources { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); align-items: start; gap: 16px; } .eb-sheet-or { align-self: center; padding-top: 10px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--eb-muted); } .eb-sheet-counts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 12px; font-size: 0.9rem; color: var(--eb-muted); } .eb-sheet-count b { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; color: var(--eb-text); font-variant-numeric: tabular-nums; margin-right: 4px; } .eb-sheet-count.is-refused b { color: var(--mud-palette-warning); } .eb-sheet-table-wrap { max-height: 380px; overflow: auto; border: 1px solid var(--eb-border); border-radius: 10px; scrollbar-color: var(--eb-border-2) transparent; scrollbar-width: thin; } .eb-sheet-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.45; } .eb-sheet-table th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 8px 12px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--eb-muted); background: var(--eb-surface-2); border-bottom: 1px solid var(--eb-border); } .eb-sheet-table td { padding: 8px 12px; vertical-align: top; border-bottom: 1px solid var(--eb-border); } .eb-sheet-table tbody tr:last-child td { border-bottom: 0; } .eb-sheet-table tr.is-refused td { color: var(--eb-muted); } .eb-sheet-num { width: 3.5rem; color: var(--eb-muted); font-variant-numeric: tabular-nums; } .eb-sheet-title { font-weight: 600; color: var(--eb-text); } .eb-sheet-code { display: inline-block; margin-left: 8px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--eb-muted); } .eb-sheet-action { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--eb-border-2); color: var(--eb-text); } .eb-sheet-action.is-create { border-color: var(--eb-tint-border); background: var(--eb-tint-bg); color: var(--eb-orange-ink); } .eb-sheet-action.is-refused { border-color: transparent; background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); color: var(--mud-palette-warning); } .eb-sheet-notes-cell { color: var(--eb-muted); font-size: 0.8rem; } .eb-sheet-notes { max-height: 200px; overflow-y: auto; padding-top: 8px; border-top: 1px solid var(--eb-border); } @media (max-width: 640px) { .eb-sheet-sources { grid-template-columns: 1fr; } .eb-sheet-or { padding-top: 0; } } .eb-attention-chip { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; vertical-align: middle; color: var(--eb-warning); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; } .eb-attention-chip .mud-icon-root { font-size: 0.95rem; } .eb-quick-dates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .eb-quick-dates .mud-button-root { min-width: 0; } .eb-locked-field { padding: 12px 14px; border: 1px dashed var(--eb-border-2); border-radius: var(--eb-radius-input, 10px); background: var(--eb-surface-2); } .eb-locked-field__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--eb-muted); } .eb-locked-field__hint { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.6; color: var(--eb-body); } .eb-store-review-anchor { margin: 0; color: var(--eb-muted); font-size: 0.85rem; line-height: 1.6; } .eb-plan-delay-note { margin: 0 0 12px; color: var(--eb-muted); font-size: 0.85rem; line-height: 1.6; } :root:not([data-theme="light"]) .mud-chip-color-primary.mud-chip-text .mud-chip-content, :root:not([data-theme="light"]) .mud-chip-color-primary.mud-chip-outlined .mud-chip-content { color: var(--eb-orange-hover); } .eb-cg { --cg-cool: #6FA0BC; --cg-plinth: #0C0C0E; --cg-read: 70ch; --cg-rail-h: 58px; margin: 0 auto; padding-bottom: 24px; } :root:root[data-theme="light"] .eb-cg { --cg-cool: #3D6F8C; } html:has(.eb-cg-rail) { scroll-padding-top: calc(64px + var(--cg-rail-h, 58px) + 20px); } .eb-cg-crumb { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .86rem; margin: 4px 0 0; } .eb-cg .eb-cg-crumb a { color: var(--eb-muted); text-decoration: none; } .eb-cg .eb-cg-crumb a:hover { color: var(--eb-text); } .eb-cg-crumb a + a::before { content: "/"; margin: 0 10px; color: var(--eb-border-2); } .eb-cg-key-list dd, .eb-cg-sheet-key dd { font-variant-numeric: tabular-nums; } .eb-cg-mast { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); gap: 32px 72px; align-items: end; padding: 44px 0 52px; } .eb-cg-title { font-family: var(--eb-display); margin: 0; color: var(--eb-text); text-wrap: balance; } .eb-cg-title-name { display: block; font-size: clamp(2.6rem, 6.4vw, 5.2rem); font-weight: 800; line-height: .94; letter-spacing: -.04em; } .eb-cg-title-tail { display: block; margin-top: 10px; font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 600; letter-spacing: -.01em; color: var(--eb-muted); } .eb-cg-sci { margin: 18px 0 0; font-style: italic; color: var(--eb-body); font-size: 1rem; } .eb-cg-standfirst { max-width: 58ch; margin: 22px 0 0; font-size: clamp(1.08rem, 1.5vw, 1.24rem); line-height: 1.6; color: var(--eb-text); text-wrap: pretty; } .eb-cg-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 22px 0 0; font-size: .86rem; color: var(--eb-muted); } .eb-cg-key { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding-left: 36px; border-left: 1px solid var(--eb-border); } .eb-cg-key-title { margin: 0 0 6px; font-size: .86rem; font-weight: 600; color: var(--eb-muted); letter-spacing: 0; } .eb-cg-key-list { margin: 0; } .eb-cg-key-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--eb-border); } .eb-cg-key-list dt { font-size: .95rem; color: var(--eb-body); } .eb-cg-key-list dd { margin: 0; font-family: var(--eb-display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; color: var(--eb-text); white-space: nowrap; } .eb-cg-limit { display: flex; gap: 10px; align-items: baseline; margin: 16px 0 0; font-weight: 700; color: var(--eb-orange-ink); } .eb-cg-limit::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--eb-orange); transform: translateY(-1px); } .eb-cg .eb-cg-pdf { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 22px; padding: 10px 16px; border-radius: 12px; background: var(--eb-orange); color: var(--eb-on-orange); font-weight: 700; font-size: .92rem; text-decoration: none; } .eb-cg .eb-cg-pdf:hover { background: var(--eb-orange-hover); color: var(--eb-on-orange); } .eb-cg-check { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: cg-check; } .eb-cg-check li { counter-increment: cg-check; border-bottom: 1px solid var(--eb-border); } .eb-cg .eb-cg-check a { display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 12px 0; color: var(--eb-text); text-decoration: none; line-height: 1.45; } .eb-cg-check a::before { content: counter(cg-check); font-weight: 700; color: var(--eb-muted); } .eb-cg .eb-cg-check a:hover { color: var(--eb-orange-ink); } .eb-cg-mast--photo { min-height: min(72vh, 640px); padding: 64px 40px 48px; margin: 18px 0 0; border-radius: 20px; overflow: hidden; isolation: isolate; } .eb-cg-mast-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .eb-cg-mast--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 12, 14, .88) 0%, rgba(12, 12, 14, .55) 55%, rgba(12, 12, 14, .82) 100%); } .eb-cg .eb-cg-mast--photo .eb-cg-title, .eb-cg .eb-cg-mast--photo .eb-cg-title-name, .eb-cg .eb-cg-mast--photo .eb-cg-standfirst, .eb-cg .eb-cg-mast--photo .eb-cg-key-list dd { color: var(--eb-on-photo); } .eb-cg .eb-cg-mast--photo .eb-cg-title-tail, .eb-cg .eb-cg-mast--photo .eb-cg-sci, .eb-cg .eb-cg-mast--photo .eb-cg-meta, .eb-cg .eb-cg-mast--photo .eb-cg-key-title, .eb-cg .eb-cg-mast--photo .eb-cg-key-list dt { color: var(--eb-on-photo-dim); } .eb-cg-mast--photo .eb-cg-key, .eb-cg-mast--photo .eb-cg-key-list div { border-color: rgba(255, 255, 255, .16); } .eb-cg-mast--photo .eb-cg-limit { color: var(--eb-orange-on-dark); } .eb-cg-rail { position: sticky; top: 64px; z-index: 5; margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%); background: color-mix(in srgb, var(--eb-page-bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--eb-border); border-bottom: 1px solid var(--eb-border); } .eb-cg-rail-list { --eb-cg-progress: 0; position: relative; display: grid; grid-template-columns: repeat(var(--eb-cg-stages, 5), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .eb-cg-rail-list::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--eb-cg-progress) * 100%); background: var(--eb-orange); transition: width .5s cubic-bezier(.16, 1, .3, 1); } .eb-cg .eb-cg-rail-link { display: flex; align-items: center; gap: 10px; height: var(--cg-rail-h); padding-right: 12px; color: var(--eb-muted); text-decoration: none; font-size: .92rem; font-weight: 600; white-space: nowrap; transition: color .2s ease; } .eb-cg .eb-cg-rail-link:hover { color: var(--eb-text); } .eb-cg-rail-n { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--eb-border-2); font-size: .78rem; font-weight: 700; color: var(--eb-body); transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .eb-cg-rail-label { overflow: hidden; text-overflow: ellipsis; } .eb-cg .eb-cg-rail-link[aria-current] { color: var(--eb-text); } .eb-cg-rail-link[aria-current] .eb-cg-rail-n { background: var(--eb-orange); border-color: var(--eb-orange); color: var(--eb-on-orange); } .eb-cg-rail-link[data-eb-cg-done] .eb-cg-rail-n { border-color: var(--eb-orange); color: var(--eb-orange-ink); } .eb-cg-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 0 72px; align-items: start; } .eb-cg-main { min-width: 0; } .eb-cg-side { position: sticky; top: calc(64px + var(--cg-rail-h) + 28px); padding-top: 64px; max-height: calc(100vh - 64px - var(--cg-rail-h) - 40px); overflow-y: auto; scrollbar-width: thin; } .eb-cg--chapter .eb-cg-side { padding-top: 44px; } .eb-cg-toc { font-size: .9rem; } .eb-cg-toc-stage + .eb-cg-toc-stage, .eb-cg .eb-cg-toc-appendix { margin-top: 14px; } .eb-cg .eb-cg-toc-stage-link { display: block; padding: 4px 0; font-weight: 700; color: var(--eb-text); text-decoration: none; } .eb-cg-toc-topics { margin: 2px 0 0; padding: 0; list-style: none; border-left: 1px solid var(--eb-border); } .eb-cg .eb-cg-toc-topics a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 1px solid transparent; color: var(--eb-muted); text-decoration: none; line-height: 1.35; transition: color .2s ease, border-color .2s ease; } .eb-cg .eb-cg-toc-topics a:hover { color: var(--eb-text); } .eb-cg .eb-cg-toc-topics a[aria-current] { color: var(--eb-text); font-weight: 600; border-left-color: var(--eb-orange); } .eb-cg .eb-cg-toc-appendix { font-weight: 600; color: var(--eb-muted); } .eb-cg-toc[data-eb-cg-live] .eb-cg-toc-stage:not([data-eb-cg-open]) .eb-cg-toc-topics { display: none; } .eb-cg-stage { padding: 72px 0 8px; } .eb-cg-stage + .eb-cg-stage { border-top: 1px solid var(--eb-border); } .eb-cg-stage-head, .eb-cg-chapter-head { margin-bottom: 8px; } .eb-cg-stage-title { margin: 0; font-family: var(--eb-display); font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--eb-text); text-wrap: balance; } .eb-cg-stage-rule { max-width: 44ch; margin: 18px 0 0; font-size: clamp(1.15rem, 1.8vw, 1.38rem); line-height: 1.45; font-weight: 500; color: var(--eb-text); text-wrap: pretty; } .eb-cg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 28px; margin: 32px 0 0; } .eb-cg-facts div { padding: 12px 0; border-top: 1px solid var(--eb-border); } .eb-cg-facts dt { font-size: .82rem; color: var(--eb-muted); } .eb-cg-facts dd { margin: 4px 0 0; font-weight: 700; color: var(--eb-text); } .eb-cg-facts dd small { display: block; margin-top: 2px; font-size: .82rem; font-weight: 400; color: var(--eb-muted); } .eb-cg-stage-more { margin: 48px 0 0; } .eb-cg .eb-cg-stage-more a { display: block; font-weight: 700; color: var(--eb-orange-ink); padding: 16px 0; border-top: 1px solid var(--eb-border); border-bottom: 1px solid var(--eb-border); text-decoration: none; } .eb-cg .eb-cg-stage-more a:hover { color: var(--eb-orange-hover); } .eb-cg-topic { padding-top: 48px; } .eb-cg-chapter-head + .eb-cg-rail + .eb-cg-body .eb-cg-topic:first-child { padding-top: 56px; } .eb-cg-topic-title { margin: 0; font-family: var(--eb-display); font-size: clamp(1.45rem, 2.4vw, 1.75rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--eb-text); } .eb-cg-lede { margin: 6px 0 18px !important; font-size: 1.08rem; font-weight: 500; color: var(--eb-muted) !important; text-wrap: pretty; } .eb-cg-topic-title + .eb-cg-col > :first-child:not(.eb-cg-lede) { margin-top: 16px; } .eb-cg-main { font-size: 1.02rem; line-height: 1.72; color: var(--eb-body); } .eb-cg-main p { margin: 0 0 18px; color: var(--eb-body); text-wrap: pretty; } .eb-cg-main h4 { margin: 32px 0 10px; font-size: 1.06rem; font-weight: 700; color: var(--eb-text); } .eb-cg-main ul, .eb-cg-main ol { margin: 0 0 18px; padding-left: 22px; } .eb-cg-main li { margin-bottom: 9px; padding-left: 4px; } .eb-cg-main li::marker { color: var(--eb-muted); font-weight: 700; } .eb-cg-main strong, .eb-cg-main b { color: var(--eb-text); font-weight: 700; } .eb-cg-main a { color: var(--eb-orange-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; } .eb-cg-main a:hover { color: var(--eb-orange-hover); } .eb-cg-col > :last-child { margin-bottom: 0; } .eb-cg-more { margin-top: 26px !important; font-size: .92rem; color: var(--eb-muted) !important; } .eb-cg-val, .eb-cg-num { color: var(--eb-text); white-space: nowrap; } .eb-cg-term { font-style: normal; font-weight: 600; color: var(--eb-text); } .eb-cg-formula { margin: 0 0 18px; padding: 14px 18px; border-radius: 12px; background: var(--eb-surface-2); border: 1px solid var(--eb-border); color: var(--eb-text); } .eb-cg-rule { margin: 28px 0; padding: 20px 22px; border-radius: 14px; background: var(--eb-tint-bg); border: 1px solid var(--eb-tint-border); } .eb-cg-rule p { margin: 0 !important; color: var(--eb-text) !important; } .eb-cg-rule p + p { margin-top: 10px !important; } .eb-cg-lbl { display: block; margin-bottom: 6px; font-weight: 700; color: var(--eb-orange-ink); } .eb-cg-warn { background: var(--eb-welfare-bg); border-color: var(--eb-welfare-border); } .eb-cg-warn .eb-cg-lbl { color: var(--eb-welfare-accent); } .eb-cg-tw { margin: 24px 0; } .eb-cg-tw table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; } .eb-cg-tw th { text-align: left; padding: 0 16px 10px 0; font-size: .82rem; font-weight: 600; color: var(--eb-muted); vertical-align: bottom; border-bottom: 1px solid var(--eb-border-2); } .eb-cg-tw td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--eb-border); vertical-align: top; color: var(--eb-body); } .eb-cg-tw td:last-child, .eb-cg-tw th:last-child { padding-right: 0; } .eb-cg-tw tfoot td { font-size: .86rem; color: var(--eb-muted); border-bottom: 0; } .eb-cg-r { text-align: right; } .eb-cg-changed td:first-child { color: var(--eb-muted); text-decoration: line-through; text-decoration-color: var(--eb-border-2); } .eb-cg-changed td:nth-child(2) { color: var(--eb-text); font-weight: 600; } .eb-cg-tier { display: inline-block; margin: 0 4px 6px 0; padding: 2px 10px; border-radius: 999px; font-size: .84rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--eb-border-2); color: var(--eb-body); text-decoration: none; } .eb-cg a.eb-cg-tier { color: var(--eb-text); } .eb-cg a.eb-cg-tier:hover { border-color: var(--eb-orange); color: var(--eb-orange-ink); } .eb-cg-tier--no { border-color: var(--eb-welfare-border); background: var(--eb-welfare-bg); color: var(--eb-text); } .eb-cg-tier--spec { border-color: var(--eb-tint-border); background: var(--eb-tint-bg); color: var(--eb-text); } .eb-cg-status { font-size: .86rem; color: var(--eb-muted); white-space: nowrap; } .eb-cg-fold { margin: 18px 0; border-top: 1px solid var(--eb-border); border-bottom: 1px solid var(--eb-border); } .eb-cg-fold > summary, .eb-cg-appendix-fold > summary { cursor: pointer; list-style: none; } .eb-cg-fold > summary::-webkit-details-marker, .eb-cg-appendix-fold > summary::-webkit-details-marker { display: none; } .eb-cg-fold > summary { position: relative; padding: 14px 32px 14px 0; font-weight: 700; color: var(--eb-text); } .eb-cg-fold > summary::after, .eb-cg-appendix-fold > summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--eb-muted); border-bottom: 2px solid var(--eb-muted); transform: rotate(45deg); transition: transform .2s ease; } .eb-cg-fold[open] > summary::after, .eb-cg-appendix-fold[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; } .eb-cg-fold > summary:hover { color: var(--eb-orange-ink); } .eb-cg-fold .eb-cg-tw { margin-top: 4px; } .eb-cg-main figure { margin: 32px 0; } .eb-cg-figbox { padding: 22px 20px 16px; border-radius: 14px; background: var(--eb-surface-2); border: 1px solid var(--eb-border); } .eb-cg-figbox svg { display: block; width: 100%; height: auto; } .eb-cg-main figcaption { margin-top: 14px; font-size: .92rem; line-height: 1.6; color: var(--eb-muted); } .eb-cg-main figcaption b { color: var(--eb-text); } .eb-cg-figbox svg text { font-family: var(--eb-display); letter-spacing: 0; } .eb-cg-figbox [fill="#FF6B1A"] { fill: var(--eb-orange-ink); } .eb-cg-figbox [stroke="#FF6B1A"] { stroke: var(--eb-orange-ink); } .eb-cg-figbox [fill="#6FA0BC"], .eb-cg-figbox [fill="#3A8FD0"] { fill: var(--cg-cool); } .eb-cg-figbox [stroke="#6FA0BC"] { stroke: var(--cg-cool); } .eb-cg-figbox [fill="#C0659B"] { fill: var(--eb-orange); } .eb-cg-figbox [fill="#9C9CA6"] { fill: var(--eb-muted); } .eb-cg-figbox [stroke="#9C9CA6"] { stroke: var(--eb-muted); } .eb-cg-figbox [fill="#B8B8C0"] { fill: var(--eb-body); } .eb-cg-figbox [stroke="#B8B8C0"] { stroke: var(--eb-body); } .eb-cg-figbox [fill="#EDEDF0"] { fill: var(--eb-text); } .eb-cg-figbox [fill="#1A1A1F"] { fill: var(--eb-page-bg); } .eb-cg-figbox [fill="#24242A"], .eb-cg-figbox [fill="#2C2C33"] { fill: var(--eb-surface); } .eb-cg-figbox [stroke="#3A3A44"], .eb-cg-figbox [stroke="#2C2C33"] { stroke: var(--eb-border-2); } .eb-cg-figbox [fill="#3A3A44"] { fill: var(--eb-border-2); } .eb-cg-figbox [font-size="10"], .eb-cg-figbox [font-size="10.5"] { font-size: 12px; } .eb-cg-figbox [font-size="11"] { font-size: 13px; } .eb-cg-figbox [letter-spacing] { letter-spacing: .04em; } .eb-cg-bar-row:hover .eb-cg-seg { opacity: .82; } .eb-cg-photo { margin: 32px 0; } .eb-cg-photo img { display: block; width: 100%; height: auto; border-radius: 14px; } .eb-cg-credit { margin: 6px 0 0; font-size: 12px; color: var(--eb-muted); } .eb-cg-credit a, .eb-cg-mast-credit { color: inherit; text-decoration: none; } .eb-cg-credit a:hover, .eb-cg-mast-credit:hover { text-decoration: underline; } .eb-cg-mast-credit { position: absolute; right: 16px; bottom: 10px; z-index: 1; font-size: 12px; color: rgba(255, 255, 255, .72); } .eb-cg-appendix { margin-top: 72px; border-top: 1px solid var(--eb-border); border-bottom: 1px solid var(--eb-border); } .eb-cg-appendix-fold > summary { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 24px 40px 24px 0; } .eb-cg-appendix-title { font-family: var(--eb-display); font-size: clamp(1.45rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; color: var(--eb-text); } .eb-cg-appendix-sub { color: var(--eb-muted); } .eb-cg-appendix-fold > summary:hover .eb-cg-appendix-title { color: var(--eb-orange-ink); } .eb-cg-appendix-fold > .eb-cg-col { padding-bottom: 24px; } .eb-cg-section-title { margin: 0 0 24px; font-family: var(--eb-display); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; color: var(--eb-text); } .eb-cg-next { margin-top: 96px; padding-top: 56px; border-top: 1px solid var(--eb-border-2); } .eb-cg-next-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: start; } .eb-cg .eb-cg-next-stock { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 180px; padding: 28px 30px; border-radius: 20px; background: var(--cg-plinth); border: 1px solid var(--eb-border); text-decoration: none; transition: border-color .2s ease; } .eb-cg-next-stock:hover { border-color: var(--eb-orange-on-dark); } .eb-cg-next-stock-title { font-family: var(--eb-display); font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--eb-on-photo); text-wrap: balance; } .eb-cg-next-stock-cta { font-weight: 700; color: var(--eb-orange-on-dark); } .eb-cg-next-links { margin: 0; padding: 0; list-style: none; grid-column: 2; } .eb-cg-next-stock + .eb-cg-next-links { grid-column: 2; } .eb-cg-next-links:only-child { grid-column: 1 / -1; columns: 2 260px; column-gap: 64px; } .eb-cg-next-links li { break-inside: avoid; border-bottom: 1px solid var(--eb-border); } .eb-cg .eb-cg-next-links a { display: block; padding: 13px 0; font-weight: 600; color: var(--eb-text); text-decoration: none; } .eb-cg .eb-cg-next-links a:hover { color: var(--eb-orange-ink); } .eb-cg-colophon { max-width: var(--cg-read); margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--eb-border); font-size: .9rem; line-height: 1.6; color: var(--eb-muted); } .eb-cg-colophon p { margin: 0 0 10px; } .eb-cg .eb-cg-colophon a { color: var(--eb-body); text-underline-offset: 3px; } .eb-cg-chapters { margin-top: 8px; padding-top: 56px; border-top: 1px solid var(--eb-border-2); } .eb-cg-chapter-list { margin: 0; padding: 0; list-style: none; } .eb-cg-chapter { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; padding: 26px 0; border-top: 1px solid var(--eb-border); } .eb-cg-chapter-n { font-family: var(--eb-display); font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--eb-muted); } .eb-cg-chapter-title { margin: 0; font-family: var(--eb-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; } .eb-cg .eb-cg-chapter-title a { color: var(--eb-text); text-decoration: none; } .eb-cg .eb-cg-chapter-title a:hover { color: var(--eb-orange-ink); } .eb-cg-chapter-rule { max-width: 60ch; margin: 8px 0 0; font-size: 1.05rem; color: var(--eb-text); } .eb-cg-chapter-topics { margin: 8px 0 0; font-size: .9rem; color: var(--eb-muted); } .eb-cg-chapter-head { padding: 48px 0 44px; } .eb-cg-chapter-head .eb-cg-stage-title { font-size: clamp(2.6rem, 6vw, 4.4rem); } .eb-cg-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 72px; } .eb-cg .eb-cg-pager a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--eb-border); text-decoration: none; } .eb-cg-pager a:hover { border-color: var(--eb-orange); } .eb-cg-pager a span:first-child { font-size: .82rem; color: var(--eb-muted); } .eb-cg-pager a span:last-child { font-weight: 700; color: var(--eb-text); } .eb-cg-pager-next { grid-column: 2; text-align: right; } .eb-cg--index { padding-top: 28px; } .eb-cg-index-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 64px; align-items: end; padding: 12px 0 32px; } .eb-cg-index-title { margin: 0; font-family: var(--eb-display); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; color: var(--eb-text); } .eb-cg-index-intro { max-width: 56ch; margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--eb-body); text-wrap: pretty; } .eb-cg-start { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 4fr); gap: 32px 72px; align-items: end; padding: 56px 52px 48px; border-radius: 20px; background: var(--cg-plinth); border: 1px solid var(--eb-border); } .eb-cg-start--photo { min-height: 520px; border: 0; } .eb-cg-start-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; } .eb-cg-start--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 12, 14, .9) 0%, rgba(12, 12, 14, .6) 52%, rgba(12, 12, 14, .82) 100%), linear-gradient(0deg, rgba(12, 12, 14, .7) 0%, rgba(12, 12, 14, 0) 45%); } .eb-cg-start-hook { max-width: 17ch; margin: 0 0 28px; font-family: var(--eb-display); font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; color: var(--eb-on-photo); text-wrap: balance; } .eb-cg-start-title { margin: 0; font-family: var(--eb-display); font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } .eb-cg .eb-cg-start-title a { color: var(--eb-orange-on-dark); text-decoration: none; } .eb-cg-start-link::after { content: ""; position: absolute; inset: 0; z-index: 0; } .eb-cg-start-chapters { position: relative; z-index: 1; } .eb-cg .eb-cg-start:hover .eb-cg-start-title a { color: var(--eb-orange-on-dark-hover); } .eb-cg .eb-cg-start .eb-cg-start-link:focus-visible { outline: none !important; box-shadow: none; } .eb-cg-start-hook, .eb-cg-start-summary { position: relative; z-index: 1; cursor: text; } .eb-cg .eb-cg-start-first { display: none; position: relative; z-index: 1; margin-top: 14px; font-weight: 700; color: var(--eb-orange-on-dark); text-decoration: none; } .eb-cg-start:has(.eb-cg-start-link:focus-visible) { outline: 2px solid var(--eb-orange); outline-offset: 3px; } .eb-cg .eb-cg-start-title a:hover { color: var(--eb-orange-on-dark-hover); } .eb-cg-start-summary { max-width: 52ch; margin: 10px 0 0; font-size: 1.02rem; line-height: 1.6; color: var(--eb-on-photo); } .eb-cg-start .eb-cg-meta { color: var(--eb-on-photo-dim); } .eb-cg-start-chapters { margin: 0; padding: 0; list-style: none; } .eb-cg-start-chapters li + li { border-top: 1px solid rgba(255, 255, 255, .14); } .eb-cg .eb-cg-start-chapters a { display: flex; align-items: center; gap: 14px; padding: 12px 0; font-weight: 600; color: var(--eb-on-photo); text-decoration: none; } .eb-cg .eb-cg-start-chapters a:hover { color: var(--eb-orange-on-dark); } .eb-cg-start-chapters .eb-cg-rail-n { border-color: rgba(255, 255, 255, .3); color: var(--eb-on-photo); } .eb-cg-start-chapters a:hover .eb-cg-rail-n { border-color: var(--eb-orange-on-dark); color: var(--eb-orange-on-dark); } .eb-cg-index-species { margin-top: 72px; } .eb-cg .eb-cg-next .eb-cg-cards--strip { margin-top: 0; } .eb-cg-group + .eb-cg-group { margin-top: 44px; } .eb-cg-group-title { margin: 0 0 14px; font-size: 1rem; font-weight: 700; color: var(--eb-muted); } .eb-cg-tier-note { max-width: 62ch; margin: -12px 0 32px; font-size: .95rem; line-height: 1.6; color: var(--eb-body); } .eb-cg-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; } .eb-cg-cards > li { min-width: 0; } .eb-cg .eb-cg-card { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; aspect-ratio: 4 / 5; border-radius: 16px; background: var(--cg-plinth); text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; } .eb-cg-card-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; } .eb-cg-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12, 12, 14, .95) 0%, rgba(12, 12, 14, .8) 34%, rgba(12, 12, 14, .45) 56%, rgba(12, 12, 14, 0) 76%); } .eb-cg-card--plain::before { background: none; } .eb-cg .eb-cg-card:hover { transform: translateY(-3px); box-shadow: var(--eb-shadow); } .eb-cg-card:hover .eb-cg-card-photo { transform: scale(1.04); } .eb-cg .eb-cg-card:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 3px; } .eb-cg-card-body { display: flex; flex-direction: column; width: 100%; padding: 20px 20px 18px; } .eb-cg-card-tier { align-self: flex-start; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .34); font-size: .78rem; font-weight: 600; color: var(--eb-on-photo); background: rgba(12, 12, 14, .72); } .eb-cg-card-tier--specialist { border-color: #E8A33D; color: #F2C27A; } .eb-cg-card-tier--first { border-color: transparent; } .eb-cg-card-name { font-family: var(--eb-display); font-size: clamp(1.35rem, 1.9vw, 1.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; color: var(--eb-on-photo); text-shadow: 0 1px 14px rgba(12, 12, 14, .55); transition: color .2s ease; } .eb-cg-card:hover .eb-cg-card-name { color: var(--eb-orange-on-dark); } .eb-cg-card-sci { margin-top: 3px; font-style: italic; font-size: .86rem; color: var(--eb-on-photo-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eb-cg-card-hook { margin-top: 12px; font-size: .92rem; font-weight: 600; line-height: 1.4; color: var(--eb-on-photo); } .eb-cg-card-hook > span { white-space: nowrap; } .eb-cg-card-time { margin-top: 4px; font-size: .8rem; color: var(--eb-on-photo-dim); } .eb-cg-cards--strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; } .eb-cg-cards--strip > li { flex: 0 0 236px; scroll-snap-align: start; } @media (min-width: 1100px) { .eb-cg-cards--strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; overflow: visible; padding-bottom: 0; } } .eb-cg-sheet { max-width: 780px; margin: 0 auto; padding: 32px 0; } .eb-cg-sheet-head { padding: 24px 0 20px; border-bottom: 3px solid var(--eb-orange); } .eb-cg-sheet-title { margin: 0; font-family: var(--eb-display); font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--eb-text); } .eb-cg-sheet-sub { margin: 8px 0 0; font-style: italic; color: var(--eb-muted); } .eb-cg-sheet-key { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--eb-border-2); } .eb-cg-sheet-key dt { font-size: .82rem; color: var(--eb-muted); } .eb-cg-sheet-key dd { margin: 4px 0 0; font-family: var(--eb-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--eb-text); } .eb-cg-sheet-limit { margin: 14px 0 6px; font-weight: 700; color: var(--eb-orange-ink); } .eb-cg-sheet-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 8px 0 0; } .eb-cg-sheet-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--eb-border); break-inside: avoid; } .eb-cg-sheet-rows dt { color: var(--eb-body); } .eb-cg-sheet-rows dd { margin: 0; font-weight: 700; color: var(--eb-text); text-align: right; } .eb-cg-sheet-foot { display: flex; justify-content: space-between; gap: 24px; margin-top: 24px; font-size: .8rem; color: var(--eb-muted); } .eb-cg-sheet-foot p { margin: 0; } .eb-cg-sheet-brand { font-weight: 800; color: var(--eb-text); margin-right: 6px; } @media (max-width: 1100px) { .eb-cg-body { grid-template-columns: minmax(0, 1fr); } .eb-cg-side { display: none; } } @media (max-width: 900px) { .eb-cg-mast, .eb-cg-next-grid, .eb-cg-start { grid-template-columns: minmax(0, 1fr); } .eb-cg-key { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--eb-border); } .eb-cg-mast--photo { padding: 48px 24px 32px; min-height: 0; } .eb-cg-next-links, .eb-cg-next-stock + .eb-cg-next-links { grid-column: auto; } .eb-cg-index-head { grid-template-columns: minmax(0, 1fr); } .eb-cg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eb-cg-start--photo { min-height: 0; } } @media (max-width: 700px) { .eb-cg { --cg-rail-h: 50px; } .eb-cg-mast { padding: 28px 0 36px; } .eb-cg-mast--photo { padding: 236px 18px 22px; margin-top: 12px; border-radius: 16px; gap: 0; background: #0C0C0E; } .eb-cg-mast--photo .eb-cg-mast-photo { height: 260px; object-position: 50% 45%; } .eb-cg-mast--photo::before { background: linear-gradient(180deg, rgba(12, 12, 14, 0) 0%, rgba(12, 12, 14, .1) 120px, rgba(12, 12, 14, .88) 205px, #0C0C0E 260px); } .eb-cg-mast--photo .eb-cg-mast-credit { top: 12px; right: 12px; bottom: auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: rgba(12, 12, 14, .55); } .eb-cg-title-name { font-size: 2.5rem; } .eb-cg-title-tail { margin-top: 6px; font-size: 1.05rem; } .eb-cg-sci { margin-top: 10px; font-size: .92rem; } .eb-cg-standfirst { margin-top: 14px; font-size: 1rem; line-height: 1.55; } .eb-cg-meta { margin-top: 14px; font-size: .82rem; gap: 4px 16px; } .eb-cg-key { padding-top: 18px; margin-top: 18px; } .eb-cg-key-title { margin-bottom: 2px; font-size: .8rem; } .eb-cg-key-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } .eb-cg-key-list div { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 10px 0; } .eb-cg-key-list dt { font-size: .8rem; line-height: 1.3; } .eb-cg-key-list dd { font-size: 1.3rem; white-space: normal; } .eb-cg-limit { margin-top: 12px; font-size: .92rem; } .eb-cg-pdf { margin-top: 16px; } .eb-cg-rail { overflow-x: auto; scrollbar-width: none; } .eb-cg-rail::-webkit-scrollbar { display: none; } .eb-cg-rail-list { display: flex; width: max-content; min-width: 100%; } .eb-cg-rail-link { padding-right: 20px; font-size: .88rem; } .eb-cg-stage { padding-top: 52px; } .eb-cg-appendix { margin-top: 40px; } .eb-cg-next { margin-top: 56px; padding-top: 40px; } .eb-cg-topic { padding-top: 40px; } .eb-cg-main { font-size: 1rem; } .eb-cg-tw table, .eb-cg-tw thead, .eb-cg-tw tbody, .eb-cg-tw tr, .eb-cg-tw td { display: block; width: 100%; } .eb-cg-tw thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .eb-cg-tw tr { padding: 12px 0; border-bottom: 1px solid var(--eb-border); } .eb-cg-tw tr:first-child { border-top: 1px solid var(--eb-border-2); } .eb-cg-tw td { position: relative; padding: 4px 0 4px 38%; border: 0; min-height: 1.5em; } .eb-cg-tw td::before { content: attr(data-label); position: absolute; left: 0; top: 6px; width: calc(38% - 12px); font-size: .82rem; line-height: 1.35; color: var(--eb-muted); } .eb-cg-tw td:first-child { color: var(--eb-text); } .eb-cg-r { text-align: left; } .eb-cg-figbox { overflow-x: auto; padding: 16px 14px 12px; } .eb-cg-figbox svg { min-width: 600px; } .eb-cg-pager { grid-template-columns: 1fr; } .eb-cg-pager-next { grid-column: auto; } .eb-cg-start { padding: 32px 22px 26px; gap: 20px; } .eb-cg-start--photo { padding-top: 150px; } .eb-cg-start-photo { height: 230px; object-position: 55% 40%; } .eb-cg-start--photo::before { background: linear-gradient(180deg, rgba(12, 12, 14, 0) 0%, rgba(12, 12, 14, .15) 80px, rgba(12, 12, 14, .92) 190px, #0C0C0E 230px); } .eb-cg-start-summary { display: none; } .eb-cg .eb-cg-start-first { display: inline-block; } .eb-cg-index-head { padding-bottom: 20px; } .eb-cg-index-intro { font-size: .95rem; } .eb-cg-start-hook { margin-bottom: 18px; } .eb-cg-start-chapters { display: none; } .eb-cg-cards, .eb-cg-cards--strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; overflow: visible; } .eb-cg-cards > li, .eb-cg-cards--strip > li { flex: none; } .eb-cg .eb-cg-card { aspect-ratio: 3 / 4; border-radius: 14px; } .eb-cg-card-body { padding: 12px 12px 12px; } .eb-cg-card-tier { margin-bottom: 6px; padding: 1px 8px; font-size: .7rem; } .eb-cg-card-name { font-size: 1.08rem; } .eb-cg-card-sci { font-size: .74rem; } .eb-cg-card-hook { margin-top: 6px; font-size: .76rem; } .eb-cg-card-hook > span { display: block; } .eb-cg-card-time { display: none; } .eb-cg-index-species { margin-top: 48px; } .eb-cg-sheet-key { grid-template-columns: 1fr 1fr; } .eb-cg-sheet-rows { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .eb-cg-rail-list::after, .eb-cg .eb-cg-rail-link, .eb-cg-rail-n, .eb-cg .eb-cg-toc-topics a, .eb-cg .eb-cg-card, .eb-cg-card-photo { transition: none; } .eb-cg .eb-cg-card:hover, .eb-cg-card:hover .eb-cg-card-photo { transform: none; } } @page { size: A4; margin: 14mm; } @media print { .eb-topnav, .eb-footer, .eb-cg-print-hide, .mud-appbar, .eb-cg-rail, .eb-cg-side, .eb-cg-crumb, .eb-cg-next, .eb-cg-pdf { display: none !important; } body, .eb-cg, .eb-cg-sheet { background: #fff !important; color: #111 !important; } .eb-cg-sheet { max-width: none; padding: 0; } .eb-cg-sheet-title, .eb-cg-sheet-key dd, .eb-cg-sheet-rows dd, .eb-cg-sheet-brand { color: #111 !important; } .eb-cg-sheet-key dt, .eb-cg-sheet-rows dt, .eb-cg-sheet-sub, .eb-cg-sheet-foot { color: #444 !important; } .eb-cg-sheet-limit { color: #9E3F06 !important; } .eb-cg-sheet-head { border-bottom-color: #E8630A; } .eb-cg-sheet-key, .eb-cg-sheet-rows div { border-color: #ccc !important; } .eb-cg-appendix-fold, .eb-cg-fold { display: block; } } .eb-tierset-settings { display: grid; gap: 40px; max-width: 1080px; } .eb-tierset-intro { margin: 0; max-width: 72ch; color: var(--eb-body); font-size: 0.9rem; line-height: 1.6; } .eb-tierset-heading { margin: 0 0 10px; color: var(--eb-text); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; } .eb-tierset-row-label { display: block; color: var(--eb-text); font-size: 0.9rem; font-weight: 600; line-height: 1.35; } .eb-tierset-row-hint { display: block; margin-top: 3px; max-width: 58ch; color: var(--eb-muted); font-size: 0.8rem; font-weight: 400; line-height: 1.45; } .eb-tierset-settings .mud-input-label.mud-input-label-outlined { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; } .eb-tierset-settings .mud-input-control:has(.mud-input-label-outlined) { margin-top: 0; margin-bottom: 0; } .eb-tierset-rows { border-top: 1px solid var(--eb-border); } .eb-tierset-row { display: grid; grid-template-columns: calc(34% + 14px) 11rem; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--eb-border); } .eb-tierset-input { width: 11rem; } .eb-tierset-matrix { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; } .eb-tierset-matrix th, .eb-tierset-matrix td { padding: 10px 14px; text-align: left; vertical-align: middle; font-weight: 400; } .eb-tierset-matrix th:first-child { width: 34%; padding-left: 0; } .eb-tierset-matrix thead th { padding-top: 0; padding-bottom: 12px; border-bottom: 1px solid var(--eb-border-2); vertical-align: bottom; } .eb-tierset-tier { display: block; color: var(--eb-text); font-size: 0.95rem; font-weight: 700; } .eb-tierset-state { display: inline-block; margin-top: 4px; padding: 1px 7px; border: 1px solid var(--eb-border-2); border-radius: 999px; color: var(--eb-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .eb-tierset-state--live { border-color: var(--eb-tint-border); background: var(--eb-tint-bg); color: var(--eb-orange-ink); } .eb-tierset-matrix .eb-tierset-group th { padding: 26px 0 6px; border-bottom: 1px solid var(--eb-border); color: var(--eb-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .eb-tierset-matrix tbody tr:not(.eb-tierset-group) > * { border-bottom: 1px solid var(--eb-border); } .eb-tierset-matrix td:last-child { padding-right: 0; } .eb-tierset-matrix tr.eb-tierset-top > th, .eb-tierset-matrix tr.eb-tierset-top > td { vertical-align: top; } .eb-tierset-matrix tr.eb-tierset-top > th { padding-top: 28px; } .eb-tierset-matrix .mud-input-helper-text { margin-top: 4px; line-height: 1.35; } .eb-tierset-actions { padding-top: 4px; } .eb-set { display: grid; gap: 36px; max-width: 940px; } .eb-set-intro { margin: 0; max-width: 72ch; color: var(--eb-body); font-size: 0.9rem; line-height: 1.6; } .eb-set-section-head { margin-bottom: 10px; } .eb-set-heading { margin: 0; color: var(--eb-text); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; } .eb-set-section-desc { margin: 4px 0 0; max-width: 72ch; color: var(--eb-muted); font-size: 0.82rem; line-height: 1.5; } .eb-set-rows { border-top: 1px solid var(--eb-border); } .eb-set-row { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 12px 32px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--eb-border); } .eb-set-row--wide { grid-template-columns: minmax(0, 1fr); } .eb-set-row--wide .eb-set-row-control { max-width: 100%; } .eb-set-row-label { display: block; color: var(--eb-text); font-size: 0.9rem; font-weight: 600; line-height: 1.35; } .eb-set-row-hint { display: block; margin-top: 3px; max-width: 62ch; color: var(--eb-muted); font-size: 0.8rem; line-height: 1.45; } .eb-set-row-control { min-width: 0; } .eb-set .mud-input-label.mud-input-label-outlined { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; } .eb-set .mud-input-control:has(.mud-input-label-outlined) { margin-top: 0; margin-bottom: 0; } .eb-set .mud-switch { margin: 0; } .eb-set-code .mud-input-slot { font-family: var(--eb-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 0.82rem; } .eb-set-actions { display: flex; align-items: center; gap: 14px; padding-top: 4px; } .eb-set-status { font-size: 0.8rem; } .eb-set-dirty { display: inline-flex; align-items: center; gap: 7px; color: var(--eb-muted); } .eb-set-dirty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--eb-orange); } .eb-set-alert { margin: 0; } .eb-set-loading { padding: 8px 0 2px; } .eb-set-failed { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--eb-border); border-radius: 12px; background: var(--eb-surface); } .eb-set-failed p { margin: 0; color: var(--eb-body); font-size: 0.9rem; } .eb-set-image { display: flex; align-items: center; gap: 16px; } .eb-set-image-preview { width: 132px; height: 88px; border: 1px solid var(--eb-border); border-radius: 10px; object-fit: cover; background: var(--eb-surface-inset, var(--eb-surface)); } .eb-set-image-preview--mark { object-fit: contain; padding: 10px; } .eb-set-image-empty { display: grid; place-items: center; width: 132px; height: 88px; padding: 0 10px; border: 1px dashed var(--eb-border-2); border-radius: 10px; color: var(--eb-muted); font-size: 0.72rem; line-height: 1.3; text-align: center; } .eb-set-image-actions { display: grid; gap: 4px; justify-items: start; } .eb-set-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 18px 0 4px; } .eb-set-step { display: grid; gap: 10px; align-content: start; } .eb-set-maintenance { padding: 16px 0 4px; } .eb-set + .eb-set-section { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--eb-border); } .mud-card:has(> .mud-card-content > .mud-tabs.mud-tabs-vertical) { border-radius: 14px; } .mud-tabs.mud-tabs-vertical > .mud-tabs-tabbar { min-width: 232px; padding-inline-end: 12px; border-inline-end: 1px solid var(--eb-border); } .mud-tabs.mud-tabs-vertical .mud-tab { justify-content: flex-start; min-height: 40px; padding: 8px 14px; border-radius: 8px; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; text-align: start; text-transform: none; } .mud-tabs.mud-tabs-vertical .mud-tab:hover { color: var(--eb-text); background: var(--eb-surface); } .mud-tabs.mud-tabs-vertical .mud-tab.mud-tab-active { font-weight: 700; background: var(--eb-tint-bg); color: var(--eb-text); } .mud-tabs.mud-tabs-vertical > .mud-tabs-tabbar .mud-tab-slider { display: none; } .mud-tabs.mud-tabs-vertical > .mud-tabs-panels { padding-inline-start: 32px; } .mud-tabs.mud-tabs-vertical .mud-tabs-panels .mud-tabs-tabbar { border-bottom: 1px solid var(--eb-border); } .mud-tabs.mud-tabs-vertical .mud-tabs-panels .mud-tab { text-transform: none; letter-spacing: 0; font-size: 0.875rem; } .mud-tabs.mud-tabs-vertical .mud-tabs-panels .mud-typography-h5, .mud-tabs.mud-tabs-vertical .mud-tabs-panels .mud-typography-h6 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; } .mud-tabs.mud-tabs-vertical .mud-tabs-panels .mud-tabs-panels { max-width: 880px; }