/* ============================================================================= Roster UI Kit — prototype stylesheet ----------------------------------------------------------------------------- Makes plain HTML render like the real Roster portals, which run on the shared `@roster-technologies/rosterui` component library (Ant Design 5 + a Roster theme). Token values below are lifted verbatim from the production theme sources, NOT approximated: - web-app-brand-portal/src/scripts/theme.js (AntD 5 ConfigProvider) - web-app-brand-portal/src/styles/App.scss (:root CSS variables) - web-app-brand-portal/src/scripts/containers/menuV2 (MainNav.scss + routes.js) - web-app-consumer-portal/src/themes.jsx (ambassador overrides) Values marked "(measured)" were pulled from the live app via Chrome DevTools getComputedStyle on app.getroster.com (2026-06-22), not approximated. Usage: Default (no attribute) = brand portal. Pair with Font Awesome Pro 6.7.2 for icons (see projects/CLAUDE.md). ========================================================================== */ /* ---- Design tokens ------------------------------------------------------- */ :root { /* Typography — Inter, 14px base, line-height 1.5 (theme.js) */ --font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-size: 14px; --font-size-sm: 12px; --font-size-lg: 16px; --line-height: 1.5; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* AntD heading scale (theme.js fontSize 14 base) */ --h1-size: 38px; --h2-size: 30px; --h3-size: 24px; --h4-size: 20px; --h5-size: 16px; /* Text colors (AntD 5 derived from colorTextBase #000) */ --text: rgba(0, 0, 0, 0.88); --text-secondary: rgba(0, 0, 0, 0.65); --text-tertiary: rgba(0, 0, 0, 0.45); --text-quaternary: rgba(0, 0, 0, 0.25); --text-disabled: rgba(0, 0, 0, 0.25); --text-inverse: #ffffff; /* Surfaces */ --bg-base: #ffffff; --bg-container: #ffffff; --bg-elevated: #ffffff; --bg-layout: #ffffff; /* content area is white (measured: .ant-layout-content) */ --bg-spotlight: rgba(0, 0, 0, 0.85); --fill: rgba(0, 0, 0, 0.15); --fill-secondary: rgba(0, 0, 0, 0.06); --fill-tertiary: rgba(0, 0, 0, 0.04); /* hover rows */ --fill-quaternary: rgba(0, 0, 0, 0.02); /* Neutral ramp (App.scss :root) */ --neutral-4: #f0f0f0; --neutral-5: #d9d9d9; --neutral-7: #8c8c8c; --neutral-9: #434343; --neutral-11: #1f1f1f; --secondary-45: #828282; /* table header text (measured) */ --secondary-85: #1d1d1d; /* nav item text/icon (measured) */ --blue-gray-2: #e3e6ea; /* page-header bottom border (measured) */ /* Light nav (App.scss) — sider surface */ --light-nav: #f5f5f5; --light-nav-hover: #e9e9e9; --nav-border: #dadada; /* MainNav.scss border-right (measured) */ /* Borders (theme.js: colorBorder rgba(0,0,0,.15), split rgba(0,0,0,.06)) */ --border: rgba(0, 0, 0, 0.15); --border-secondary: rgba(0, 0, 0, 0.06); --split: rgba(0, 0, 0, 0.06); /* Brand pink ramp (antd.theme.less) — accents, tab ink bar */ --pink-1: #fff0f2; --pink-2: #ffd6de; --pink-3: #ffadc0; --pink-4: #ff85a5; --pink-5: #ff5c8d; --pink-6: #ff3378; --pink-7: #d92164; --pink-8: #b31252; --pink-9: #8c0741; --pink-10: #660432; /* Blue ramp — links, info, secondary actions */ --blue-1: #e6f7ff; --blue-2: #bae7ff; --blue-5: #40a9ff; --blue-6: #1890ff; /* AntD 5 primary (info/link) */ --primary: #1677ff; --primary-hover: #4096ff; --primary-active: #0958d9; --primary-bg: #e6f4ff; --primary-border: #91caff; --link: #1677ff; --link-hover: #4096ff; /* Status (AntD 5 seed) */ --success: #52c41a; --warning: #faad14; --error: #ff4d4f; --info: #1677ff; --success-bg: #f6ffed; --success-border: #b7eb8f; --success-text: #389e0d; --warning-bg: #fffbe6; --warning-border: #ffe58f; --warning-text: #d48806; --error-bg: #fff2f0; --error-border: #ffccc7; --error-text: #cf1322; --info-bg: #e6f4ff; --info-border: #91caff; --info-text: #0958d9; /* Status tag fills — Roster uses the AntD "-2" shade + black text (measured) */ --green-2: #d9f7be; --blue-2-tag: #bae7ff; --red-2: #ffccc7; --gold-2: #fff1b8; /* Radii — Roster renders an 8px base everywhere (buttons, tables, menu, cards all measured at 8px), not the AntD 6px default. Tags/pills are fully rounded. */ --radius: 8px; --radius-lg: 8px; --radius-sm: 4px; --radius-pill: 20px; /* Spacing scale (antd.theme.less padding/margin scale) */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; /* Control sizing */ --control-h: 32px; --control-h-lg: 40px; --control-h-sm: 24px; --control-pad-x: 12px; /* Elevation (AntD 5 boxShadow tokens) */ --shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02); /* Layout chrome (measured) */ --sider-w: 240px; --header-h: 56px; /* logo row height */ --page-header-h: 65px; /* Primary action color — overridden per portal below */ --btn-primary-bg: #1f1f1f; /* brand portal: dark buttons (theme.js) */ --btn-primary-hover: #434343; --btn-primary-active: #262626; --tab-ink: var(--pink-6); /* brand portal: pink tab ink bar */ --tab-selected-text: rgba(0, 0, 0, 0.45); --brand-primary: var(--pink-6); /* white-label accent (ambassador) */ } /* Ambassador portal overrides (themes.jsx: colorPrimary #000, blue tables) */ [data-portal="ambassador"] { --btn-primary-bg: #000000; --btn-primary-hover: #262626; --btn-primary-active: #000000; --tab-ink: #000000; /* ambassador: black ink bar */ --tab-selected-text: rgba(0, 0, 0, 0.88); --border-secondary: rgba(0, 0, 0, 0.15); /* themes.jsx colorBorderSecondary */ } /* ---- Reset / base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* The [hidden] attribute must win over component display rules (e.g. flex/grid layouts), so state toggles like `el.hidden = true` actually hide. */ [hidden] { display: none !important; } html, body { height: 100%; } /* Inline-SVG icon (sprite in roster-icons.svg). Uses real FontAwesome Pro glyph paths extracted from the live app, so icons match exactly. Default 16px, inherits text color via fill:currentColor — same as FA SVG core. */ .ic { width: 16px; height: 16px; display: inline-block; fill: currentColor; vertical-align: -0.15em; flex: 0 0 auto; } .ic-sm { width: 12px; height: 12px; } .ic-lg { width: 20px; height: 20px; } body { margin: 0; font-family: var(--font-family); font-size: var(--font-size); line-height: var(--line-height); color: var(--text); background: var(--bg-layout); font-variant: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5 { color: var(--text); font-weight: var(--fw-semibold); margin: 0 0 .5em; } h1 { font-size: var(--h1-size); } h2 { font-size: var(--h2-size); } h3 { font-size: var(--h3-size); } h4 { font-size: var(--h4-size); } h5 { font-size: var(--h5-size); } p { margin: 0 0 1em; } a { color: var(--link); text-decoration: none; transition: color .2s; } a:hover { color: var(--link-hover); } small { font-size: var(--font-size-sm); } code { font-family: "SFMono-Regular", Consolas, Menlo, monospace; font-size: .92em; background: var(--fill-tertiary); padding: .1em .4em; border-radius: var(--radius-sm); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-success { color: var(--success-text); } .text-warning { color: var(--warning-text); } .text-error { color: var(--error-text); } /* ---- App shell: sidebar + header + content ------------------------------ */ .app { display: flex; min-height: 100vh; } /* Brand portal sider is LIGHT (#f5f5f5) with a 1px #dadada right border. All dimensions measured from .main-nav-container on app.getroster.com: width 240, logo row 56 (padding-left 14), items radius 8. Active leaf = white pill (no shadow) + pink icon + #1d1d1d text. */ .sider { width: var(--sider-w); flex: 0 0 var(--sider-w); background: var(--light-nav); border-right: 1px solid var(--nav-border); color: var(--secondary-85); display: flex; flex-direction: column; } /* Logo row: real logo-pink.svg, 78×24, left-padded 14px (measured) */ .sider-logo { height: var(--header-h); display: flex; align-items: center; padding: 0 0 0 14px; } .sider-logo svg, .sider-logo img { width: 78px; height: 24px; display: block; } .menu { list-style: none; margin: 0; padding: 0 0 8px; } .menu .group-label { padding: 8px 24px 4px; font-size: var(--font-size-sm); color: var(--text-tertiary); } /* AntD renders group dividers as a hairline; real one is colorSplit */ .menu .divider-line { height: 1px; background: var(--split); margin: 8px 16px; } /* Top-level row: height 38, margin 4, radius 8, left pad 10, icon 16 (measured) */ .menu li > a { display: flex; align-items: center; gap: 10px; height: 38px; margin: 4px; padding: 0 16px 0 10px; border-radius: var(--radius); color: var(--text); font-size: var(--font-size); font-weight: var(--fw-regular); } .menu li > a .ic, .menu li > a .fa, .menu li > a i { width: 16px; height: 16px; flex: 0 0 16px; text-align: center; color: var(--text); } .menu li > a .expand { margin-left: auto; width: 18px; height: 18px; color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; } .menu li > a:hover { background: var(--light-nav-hover); } /* Submenu children: indented 36, width 176, leaf height 36, radius 8 (measured) */ .menu .submenu { list-style: none; margin: 0; padding: 0; } .menu .submenu li > a { height: 36px; width: 176px; margin: 4px 4px 4px 36px; padding: 0 16px 0 8px; gap: 8px; } .menu li.active > a { background: #fff; color: var(--secondary-85); font-weight: var(--fw-regular); } .menu li.active > a .ic, .menu li.active > a .fa, .menu li.active > a i { color: var(--pink-6); } [data-portal="ambassador"] .menu li.active > a .ic, [data-portal="ambassador"] .menu li.active > a .fa, [data-portal="ambassador"] .menu li.active > a i { color: var(--primary); } /* Sider footer = brand avatar (profile image) + business name, 56px row (from routes.js account popout trigger). */ .sider-foot { margin-top: auto; padding: 0 16px 8px; display: flex; align-items: center; gap: 12px; height: 56px; color: var(--secondary-85); font-weight: var(--fw-semibold); } .sider-foot .logo-mark { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; background: var(--pink-2); color: var(--pink-8); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: 13px; overflow: hidden; } .sider-foot .logo-mark img { width: 100%; height: 100%; object-fit: cover; } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .header { height: var(--header-h); flex: 0 0 var(--header-h); background: var(--bg-container); border-bottom: 1px solid var(--split); display: flex; align-items: center; gap: 16px; padding: 0 var(--space-lg); } .header .spacer { flex: 1; } .header .title { font-size: var(--font-size-lg); font-weight: var(--fw-semibold); } .content { flex: 1; padding: var(--space-lg); background: var(--bg-container); } .content-narrow { max-width: 1080px; } /* Page header (AntD ant-page-header): full-bleed title row with a bottom border. Measured: padding 12px 24px, border-bottom 1px #e3e6ea, title 20px/600, line-height 32. */ .page-header { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--blue-gray-2); background: var(--bg-container); } .page-header h1 { font-size: 20px; font-weight: var(--fw-semibold); line-height: 32px; margin: 0; } .page-header .actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* Page header (breadcrumb + title + actions) */ .page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: var(--space-lg); } .page-head h2 { margin: 0; } .page-head .sub { color: var(--text-tertiary); margin-top: 4px; } .page-head .actions { margin-left: auto; display: flex; gap: 8px; } .breadcrumb { color: var(--text-tertiary); font-size: var(--font-size); margin-bottom: 8px; } .breadcrumb a { color: var(--text-tertiary); } .breadcrumb .sep { padding: 0 8px; } /* ---- Buttons ------------------------------------------------------------- */ /* Measured: h32, radius 8, font 14/500, padding 0 15, default outlined has a subtle 0 2px 0 rgba(0,0,0,.02) drop. (.ant-btn on app.getroster.com) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-h); padding: 0 15px; font-family: inherit; font-size: var(--font-size); font-weight: var(--fw-medium); line-height: 1; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-container); color: var(--text); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02); cursor: pointer; white-space: nowrap; transition: all .2s cubic-bezier(.645,.045,.355,1); user-select: none; } .btn:hover { color: var(--primary-hover); border-color: var(--primary-hover); } .btn:active { color: var(--primary-active); border-color: var(--primary-active); } .btn .ic, .btn .fa, .btn i { font-size: 14px; } .btn .expand, .btn .ic-chevron { color: var(--text-tertiary); } /* Connected button group (e.g. the filter bar): shared borders, end radii only. Real filter bar renders as one .ant-btn group, not separate pills. */ .btn-group { display: inline-flex; } .btn-group > .btn { border-radius: 0; margin-left: -1px; } .btn-group > .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; } .btn-group > .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; } .btn-group > .btn:hover { z-index: 1; } .btn-primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: #fff; box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1); } .btn-primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: #fff; } .btn-primary:active { background: var(--btn-primary-active); border-color: var(--btn-primary-active); color: #fff; } .btn-link { border-color: transparent; background: transparent; color: var(--link); box-shadow: none; } .btn-link:hover { background: transparent; color: var(--link-hover); border-color: transparent; } .btn-text { border-color: transparent; background: transparent; color: var(--text); box-shadow: none; } .btn-text:hover { background: var(--fill-tertiary); color: var(--text); border-color: transparent; } .btn-danger { background: var(--error); border-color: var(--error); color: #fff; } .btn-danger:hover { background: #ff7875; border-color: #ff7875; color: #fff; } .btn-dashed { border-style: dashed; } .btn-lg { height: var(--control-h-lg); padding: 0 19px; font-size: var(--font-size-lg); border-radius: var(--radius-lg); } .btn-sm { height: var(--control-h-sm); padding: 0 7px; font-size: var(--font-size-sm); border-radius: var(--radius-sm); } .btn-block { display: flex; width: 100%; } .btn:disabled, .btn.disabled { cursor: not-allowed; color: var(--text-disabled); background: var(--fill-tertiary); border-color: var(--border); box-shadow: none; } .btn-primary:disabled { color: var(--text-disabled); background: var(--fill-tertiary); border-color: var(--border); } /* ---- Form controls ------------------------------------------------------- */ .input, .textarea, .select-native { width: 100%; height: var(--control-h); padding: 4px 11px; font-family: inherit; font-size: var(--font-size); color: var(--text); background: var(--bg-container); border: 1px solid var(--border); border-radius: var(--radius); transition: all .2s; outline: none; } .textarea { height: auto; min-height: 80px; padding: 6px 11px; resize: vertical; line-height: var(--line-height); } .input::placeholder, .textarea::placeholder { color: var(--text-quaternary); } .input:hover, .textarea:hover, .select-native:hover { border-color: var(--primary-hover); } .input:focus, .textarea:focus, .select-native:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1); } .input:disabled { background: var(--fill-tertiary); color: var(--text-disabled); cursor: not-allowed; } .input-affix { position: relative; display: inline-flex; align-items: center; width: 100%; } .input-affix .prefix, .input-affix .suffix { position: absolute; color: var(--text-tertiary); } .input-affix .prefix { left: 11px; } .input-affix .suffix { right: 11px; } .input-affix .prefix ~ .input { padding-left: 30px; } .input-affix .input ~ .suffix { right: 11px; } .field { margin-bottom: var(--space-lg); } .field > label { display: block; margin-bottom: 8px; color: var(--text); font-size: var(--font-size); } .field > label .req { color: var(--error); margin-right: 4px; } .field .help { margin-top: 4px; color: var(--text-tertiary); font-size: var(--font-size); } .field.error .input { border-color: var(--error); } .field.error .help { color: var(--error-text); } /* Checkbox / radio / switch */ .check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .check input { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; } .switch { position: relative; display: inline-block; width: 44px; height: 22px; background: rgba(0, 0, 0, 0.25); border-radius: 100px; cursor: pointer; transition: background .2s; } .switch.on { background: var(--btn-primary-bg); } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: left .2s; box-shadow: 0 2px 4px rgba(0,0,0,.2); } .switch.on::after { left: 24px; } /* ---- Cards --------------------------------------------------------------- */ .card { background: var(--bg-container); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .card-head { padding: 16px 24px; border-bottom: 1px solid var(--split); font-size: var(--font-size-lg); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: 12px; } .card-head .extra { margin-left: auto; font-weight: var(--fw-regular); } .card-body { padding: 24px; } .card-grid { display: grid; gap: var(--space-md); } /* Stat tile */ .stat { padding: 20px 24px; } .stat .label { color: var(--text-tertiary); font-size: var(--font-size); } .stat .value { font-size: 30px; font-weight: var(--fw-semibold); line-height: 1.2; margin-top: 4px; } .stat .delta { font-size: var(--font-size); margin-top: 4px; } .stat .delta.up { color: var(--success-text); } .stat .delta.down { color: var(--error-text); } /* ---- Tabs ---------------------------------------------------------------- */ .tabs { border-bottom: 1px solid var(--split); display: flex; gap: 0; margin-bottom: var(--space-lg); } .tabs .tab { position: relative; padding: 12px 0; margin-right: 32px; color: var(--text-tertiary); cursor: pointer; font-size: var(--font-size); background: none; border: none; font-family: inherit; } .tabs .tab:hover { color: var(--pink-6); } [data-portal="ambassador"] .tabs .tab:hover { color: var(--text); } .tabs .tab.active { color: var(--tab-selected-text); font-weight: var(--fw-semibold); } .tabs .tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--tab-ink); } /* ---- Tables -------------------------------------------------------------- */ /* Measured: the table is FULL-BLEED — no wrapper border, no radius. Row borders (td border-bottom) span the entire container width; only the cell text is inset, via the 24px cell padding. On a list page, give .table-wrap the .bleed-x utility so it breaks out of the content's 24px gutter to the full width (matches the real .common-table-wrapper at x=content-edge). Header is WHITE, text #828282/600. */ .table-wrap { background: var(--bg-container); border: none; border-radius: 0; } table.table { width: 100%; border-collapse: collapse; font-size: var(--font-size); } table.table th { text-align: left; font-weight: var(--fw-semibold); color: var(--secondary-45); background: var(--bg-container); padding: 16px 24px; border-bottom: 1px solid var(--split); white-space: nowrap; } table.table td { padding: 8px 24px; border-bottom: 1px solid var(--split); color: var(--text); vertical-align: middle; } table.table tbody tr:last-child td { border-bottom: none; } table.table tbody tr:hover td { background: var(--fill-quaternary); } table.table .num { text-align: right; font-variant-numeric: tabular-nums; } /* ---- Tags / badges ------------------------------------------------------- */ /* Measured: status tags are fully-rounded (radius 20), 12px/400, height 24, padding 2px 8px, 1px transparent border, BLACK text on an AntD "-2" shade fill. Paid/Approved = green-2 #d9f7be, Pending = blue-2 #bae7ff. */ .tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 2px 8px; font-size: var(--font-size-sm); font-weight: var(--fw-regular); line-height: 20px; border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--neutral-4); color: rgba(0, 0, 0, 0.88); } .tag .ic, .tag .fa, .tag i { font-size: 11px; width: 12px; height: 12px; } .status-paid, .status-approved, .tag-success { background: var(--green-2); color: #000; } .status-pending, .tag-info { background: var(--blue-2-tag); color: #000; } .status-rejected, .tag-error { background: var(--red-2); color: #000; } .status-neutral, .tag-default { background: var(--neutral-4); color: rgba(0, 0, 0, 0.88); } .tag-warning { background: var(--gold-2); color: #000; } .tag-pink { background: var(--pink-2); color: var(--pink-8); } /* Small inline label tag (e.g. "NEW"): radius 4, 10px/600, height 18 */ .tag-mini { height: 18px; padding: 0 6px; font-size: 10px; font-weight: var(--fw-semibold); line-height: 17px; border-radius: var(--radius-sm); } .badge-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success); } .badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: var(--font-size-sm); background: var(--error); color: #fff; border-radius: 10px; } /* ---- Alerts -------------------------------------------------------------- */ .alert { display: flex; gap: 10px; padding: 8px 16px; border-radius: var(--radius-lg); border: 1px solid; font-size: var(--font-size); margin-bottom: var(--space-md); } .alert .fa, .alert i { margin-top: 2px; } .alert-info { background: var(--info-bg); border-color: var(--info-border); } .alert-success { background: var(--success-bg); border-color: var(--success-border); } .alert-warning { background: var(--warning-bg); border-color: var(--warning-border); } .alert-error { background: var(--error-bg); border-color: var(--error-border); } .alert-info .fa { color: var(--info); } .alert-success .fa { color: var(--success); } .alert-warning .fa { color: var(--warning); } .alert-error .fa { color: var(--error); } /* ---- Modal --------------------------------------------------------------- */ .modal-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-start; justify-content: center; padding-top: 100px; z-index: 1000; } .modal { width: 520px; max-width: calc(100vw - 32px); background: var(--bg-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .modal-head { padding: 16px 24px; font-size: var(--font-size-lg); font-weight: var(--fw-semibold); display: flex; align-items: center; } .modal-head .close { margin-left: auto; color: var(--text-tertiary); cursor: pointer; background: none; border: none; } .modal-body { padding: 0 24px 8px; } .modal-foot { padding: 16px 24px; display: flex; justify-content: flex-end; gap: 8px; } /* ---- Dropdown / menu ----------------------------------------------------- */ .dropdown { background: var(--bg-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 4px; min-width: 160px; } .dropdown .item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius); cursor: pointer; font-size: var(--font-size); } .dropdown .item:hover { background: var(--fill-tertiary); } .dropdown .divider { height: 1px; background: var(--split); margin: 4px 0; } /* ---- Pagination ---------------------------------------------------------- */ /* Real list pages float a small dark count tag bottom-centre. Measured: bg #434343, height 22, radius 20, padding 0 8, 12px/400 white text, shadow 0 6px 8px rgba(0,0,0,.15). It's a count indicator, not a pager. */ .pagination { display: flex; justify-content: center; margin: var(--space-md) 0; } .pagination .range-pill { display: inline-flex; align-items: center; gap: 8px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--neutral-9); color: #fff; font-size: var(--font-size-sm); font-weight: var(--fw-regular); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); } .pagination .range-pill .nav { cursor: pointer; opacity: .75; } .pagination .range-pill .nav:hover { opacity: 1; } /* ---- Segmented control --------------------------------------------------- */ .segmented { display: inline-flex; background: var(--fill-secondary); border-radius: var(--radius); padding: 2px; } .segmented .seg { padding: 4px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-size); color: var(--text-secondary); } .segmented .seg.active { background: var(--bg-container); color: var(--text); box-shadow: var(--shadow-card); } /* ---- Avatar / empty / divider ------------------------------------------- */ .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--pink-2); color: var(--pink-8); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-medium); font-size: var(--font-size); } .avatar-lg { width: 48px; height: 48px; font-size: var(--font-size-lg); } .divider { height: 1px; background: var(--split); border: 0; margin: var(--space-lg) 0; } .empty { text-align: center; color: var(--text-tertiary); padding: 48px 0; } .empty .fa { font-size: 40px; opacity: .35; margin-bottom: 12px; } /* ---- Utilities (sparing — prefer semantic classes) ---------------------- */ /* Break an element out of the content's 24px gutter to full width (full-bleed tables on list pages). Cell padding keeps the inner text on the gutter. */ .bleed-x { margin-left: calc(-1 * var(--space-lg)); margin-right: calc(-1 * var(--space-lg)); } .row { display: flex; gap: var(--space-md); } .col { display: flex; flex-direction: column; gap: var(--space-md); } .between { justify-content: space-between; } .items-center { align-items: center; } .gap-sm { gap: var(--space-xs); } .gap-lg { gap: var(--space-lg); } .mt-sm { margin-top: var(--space-xs); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mb-0 { margin-bottom: 0; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .sider { display: none; } } /* =========================================================================== LIST-PAGE PATTERNS (canonical brand-portal list page; co-browse-verified) ======================================================================== */ /* Page header: H1 + right-aligned action cluster (primary + secondary text buttons, overflow to "More Actions"). Detail pages prepend .back-btn. */ /* Title row matches the AntD page-header: 20px/600 title, actions right. Prefer .page-header (full-bleed, bordered) for the canonical list page. */ .list-head { display: flex; align-items: center; gap: 16px; margin-bottom: var(--space-lg); } .list-head h1 { font-size: 20px; font-weight: var(--fw-semibold); line-height: 32px; margin: 0; } .list-head .actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .back-btn { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-container); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } /* Inline stat strip (label over number). .stat-strip.boxed = bordered-card variant (detail pages). */ .stat-strip { display: flex; gap: 24px; margin-bottom: var(--space-lg); } .stat-strip .item { flex: 1; } .stat-strip.boxed { border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); padding: 20px 24px; gap: 0; justify-content: space-between; } /* Measured (.ant-statistic): label 14/400 rgba(0,0,0,.45) mb4; value 24/400 */ .stat-strip .item .label { color: var(--text-tertiary); font-size: var(--font-size); margin-bottom: 4px; } .stat-strip .item .value { font-size: 24px; font-weight: var(--fw-regular); line-height: 36px; color: var(--text); } /* Filter bar: the real one is a connected .btn-group (see .btn-group above) at 32px + a separate Sort button pushed right. Standalone pills (.filter-pill) are kept for one-off filters; match the 32px control height + 8px radius. */ .filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-md); flex-wrap: wrap; } .filter-pill { display: inline-flex; align-items: center; gap: 8px; height: var(--control-h); padding: 0 15px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-container); font-size: var(--font-size); font-weight: var(--fw-medium); cursor: pointer; color: var(--text); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02); } .filter-pill .ic, .filter-pill .fa-chevron-down { font-size: 11px; color: var(--text-tertiary); } .filter-bar .search { position: relative; } .filter-bar .search .ic, .filter-bar .search .fa { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); } .filter-bar .search input { height: var(--control-h); width: 260px; padding: 0 11px 0 32px; border: 1px solid var(--border); border-radius: var(--radius); font-family: inherit; font-size: var(--font-size); outline: none; } .filter-bar .search input:focus { border-color: var(--primary); } .filter-bar .sort { margin-left: auto; } /* removable active-filter chip */ .filter-chips { display: flex; gap: 8px; margin-bottom: var(--space-md); } .chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 12px; background: var(--fill-tertiary); border-radius: var(--radius); font-size: var(--font-size); color: var(--text); } .chip .x { cursor: pointer; color: var(--text-tertiary); padding: 0 4px; } /* Two-line table cells — both lines at the 21px line-height the real app uses, which gives the ~59px row height (not a tighter 1.3). */ .cell-2 { line-height: 21px; } .cell-2 .primary { color: var(--text); } .cell-2 .secondary { color: var(--text-tertiary); font-size: var(--font-size-sm); } /* ambassador name = clickable, blue only on hover (links aren't blue by default) */ .row-link { color: var(--text); cursor: pointer; } .row-link:hover { color: var(--link); } /* whole-row clickable affordance */ table.table tbody tr.clickable { cursor: pointer; } /* kebab row-action trigger */ .kebab { width: 28px; height: 28px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); cursor: pointer; } .kebab:hover { background: var(--fill-tertiary); color: var(--text); } /* Bulk-actions header: replaces the column-title row when rows are selected. */ .bulk-bar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; } .bulk-bar .count { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--fw-medium); } .bulk-bar input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); } /* selected row highlight */ table.table tbody tr.selected td { background: var(--primary-bg); } /* Loading skeleton (shimmer rows) */ .skeleton { background: linear-gradient(90deg, var(--fill-tertiary) 25%, var(--fill-secondary) 37%, var(--fill-tertiary) 63%); background-size: 400% 100%; border-radius: var(--radius-sm); height: 12px; animation: sk 1.4s ease infinite; } @keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .skeleton-row { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1fr 1fr 1fr; gap: 24px; padding: 22px 16px; border-bottom: 1px solid var(--split); } /* Empty state vs. no-results state (distinct) */ .empty-state { text-align: center; padding: 80px 24px; color: var(--text-secondary); } .empty-state .illus { width: 120px; height: auto; opacity: .9; margin: 0 auto 20px; } .empty-state .headline { color: var(--text); font-size: var(--font-size-lg); font-weight: var(--fw-medium); } .empty-state .sub { color: var(--text-tertiary); margin-top: 6px; } /* ---- Drawers -------------------------------------------------------------- */ /* Modal drawer (e.g. Filters): dark scrim dims the page. */ .drawer-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 900; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; background: var(--bg-elevated); z-index: 901; display: flex; flex-direction: column; box-shadow: -6px 0 16px rgba(0, 0, 0, 0.08); } /* Non-modal drawer (e.g. Contact details): NO scrim, list stays legible. */ .drawer.non-modal { box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08); } .drawer-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; } .drawer-head .title { font-size: var(--font-size-lg); font-weight: var(--fw-semibold); } .drawer-head .icon-btn { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-container); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .drawer-head .spacer { flex: 1; } .drawer-body { flex: 1; overflow-y: auto; padding: 0 20px 20px; } .drawer-foot { padding: 16px 20px; border-top: 1px solid var(--split); display: flex; justify-content: space-between; } /* accordion section rows (filters drawer) */ .acc-row { display: flex; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--split); font-weight: var(--fw-medium); cursor: pointer; } .acc-row .fa-chevron-down { margin-left: auto; color: var(--text-tertiary); font-size: 12px; } /* drawer section + labelled list (contact drawer) */ .drawer-section { padding: 16px 0; border-bottom: 1px solid var(--split); } .drawer-section h4 { margin: 0 0 12px; font-size: var(--font-size-lg); } .kv { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--text); } .kv .fa, .kv i { width: 16px; color: var(--text-tertiary); } /* =========================================================================== DRAWER VARIANTS (canonical — captured from the live Brand Portal source) --------------------------------------------------------------------------- Three canonical drawers. Recommended width 400px (real app: 370–448). 1. CONTACT-DETAILS drawer — the ONE non-modal drawer (no scrim). It is meant to coexist with the list (browse + paginate through contacts) and can Expand to the full contact page. Header = [X] [Expand] control row + an identity block (avatar / name / program tag / kebab); pink tabs; the body is a STACK OF BORDERED CARDS (.drawer-cards > .dcard). Source: AccountInfoDrawer. 2. STANDARD detail drawer (e.g. Order Details) — MODAL (dark scrim). Header = title (left) + plain X (right, .drawer-x). Body = flat hairline-split sections (.drawer-section) with .dsec-head + .dlist; optional status tag + .btn-row actions. Source: OrderDetailDrawer. 3. CONTEXTUAL-CONTACT drawer (e.g. Participant progress) — a STANDARD drawer whose body opens with a .drawer-contact identity block (name + email + a kebab "more" menu: Copy Email / Send Email). Use this whenever a drawer is ABOUT a contact but is not THE contact-details drawer. Source: AmbassadorProgress. Rule of thumb: only the contact-details drawer is non-modal; every other drawer (detail, contextual, filters, edit form) is modal with a scrim. --------------------------------------------------------------------------- */ /* Standard-drawer header: title left (20/600), plain X right */ .drawer-head .title { font-size: 20px; font-weight: var(--fw-semibold); } .drawer-x { margin-left: auto; width: 32px; height: 32px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: var(--radius); cursor: pointer; font-size: 18px; color: var(--text-secondary); } .drawer-x:hover { background: var(--fill-tertiary); color: var(--text); } /* Contact-details drawer — top control row: [X] [Expand] */ .drawer-controls { display: flex; align-items: center; gap: 8px; padding: 16px 20px 4px; } .drawer-controls .icon-btn, .drawer-id .icon-btn { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-container); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); } .drawer-controls .icon-btn:hover, .drawer-id .icon-btn:hover { color: var(--text); border-color: var(--text-tertiary); } .drawer-controls .expand { width: auto; padding: 0 12px; gap: 8px; font-weight: var(--fw-medium); color: var(--text); } /* Contact-details drawer — identity block (avatar + name + program tag + kebab) */ .drawer-id { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px 8px; } .drawer-id .avatar, .drawer-id .avatar-lg { background: var(--fill-secondary); color: var(--text-tertiary); flex: 0 0 auto; } .drawer-id .id-meta { flex: 1; min-width: 0; } .drawer-id .id-name { font-size: 18px; font-weight: var(--fw-semibold); line-height: 1.3; } /* Program tag (e.g. "Am Ambassadors"): colored 2-letter chip + program name */ .prog-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--text); } .prog-tag .prog-ico { width: 18px; height: 18px; border-radius: 4px; background: var(--info); color: #fff; font-size: 10px; font-weight: var(--fw-semibold); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } /* Contact-details drawer body: a stack of bordered AntD size="small" Cards */ .drawer-cards { display: flex; flex-direction: column; gap: 12px; padding: 12px 20px 20px; } .dcard { border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-container); } .dcard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--split); font-weight: var(--fw-semibold); font-size: var(--font-size-lg); } .dcard-head .count { color: var(--text-secondary); font-weight: var(--fw-regular); } .dcard-head .extra { margin-left: auto; font-weight: var(--fw-regular); } .dcard-head .sub { flex-basis: 100%; font-size: var(--font-size-sm); font-weight: var(--fw-regular); font-style: italic; color: var(--text-tertiary); } .dcard-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; } .dcard-row + .dcard-row { border-top: 1px solid var(--split); } .dcard-row.between { justify-content: space-between; } .dcard-row .ic, .dcard-row > i:first-child { color: var(--text-tertiary); width: 16px; flex: 0 0 auto; } .dcard-row .rank { color: var(--text-secondary); margin-left: 4px; } .dcard-foot { padding: 10px 16px; border-top: 1px solid var(--split); } .dcard-foot a, .dcard-foot .row-link { color: var(--link); cursor: pointer; } .dcard-empty { padding: 12px 16px; color: var(--text-tertiary); font-style: italic; } /* Standard-drawer flat section (.drawer-section already defined above) */ .dsec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: var(--fw-semibold); font-size: var(--font-size-lg); } .dsec-head .tag { margin-left: auto; } .dlist { margin: 0; padding-left: 18px; color: var(--text); } .dlist li { padding: 4px 0; } .more-link { display: block; text-align: right; color: var(--link); cursor: pointer; margin-top: 8px; } .btn-row { display: flex; gap: 8px; margin-top: 12px; } .btn-row .btn { flex: 1; } /* Contextual-contact identity block (name + email + ⋮ more-menu) */ .drawer-contact { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0 16px; border-bottom: 1px solid var(--split); } .drawer-contact .dc-name { font-weight: var(--fw-semibold); } .drawer-contact .dc-email { color: var(--text-tertiary); font-size: var(--font-size-sm); margin-top: 2px; } .drawer-contact .menu-anchor { margin-left: auto; position: relative; } .menu-anchor { position: relative; } .menu-pop { position: absolute; top: 28px; right: 0; z-index: 20; } /* Requirement / activity rows (campaign-context drawer) */ .activity-group-label { color: var(--text-tertiary); padding: 16px 0 0; } .activity-row { display: flex; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--split); cursor: pointer; font-weight: var(--fw-semibold); } .activity-row .check { color: var(--success); font-size: 18px; flex: 0 0 auto; } .activity-row .chev { margin-left: auto; color: var(--text-tertiary); font-weight: var(--fw-regular); } /* =========================================================================== SOCIAL-GRID PATTERNS (canonical social-post-card + grid; co-browse-verified) --------------------------------------------------------------------------- The Social Feed (app.getroster.com/feed) and Campaign Content (…/campaigns/:id/analytics/content/posts) render a wrapping grid of `social-post-card`s. Every value below is measured via getComputedStyle on the live app (2026-06-23) — the card is a fixed 296px-wide tile so the grid stays uniform regardless of caption/media. Card height is fixed at 479px: header 42 + media 280 + metrics 22 + caption 44 (2 lines) + divider 1 + actions 32, with 8px gaps and 8/12 content padding. ======================================================================== */ /* Grid: real container is flex-wrap with a 12px gap; cards are fixed-width and left-aligned (leftover space falls to the right edge). */ .social-grid { display: flex; flex-wrap: wrap; gap: 12px; } /* Card. Inherits .card chrome (white, 8px radius, hairline border, soft shadow); measured border is the split shade rgba(0,0,0,.06). */ .social-post-card { width: 296px; display: flex; flex-direction: column; border-color: var(--split); overflow: hidden; } .social-post-card__content { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; } /* Header: 36px network glyph + two-line account info. */ .social-post-header { display: flex; align-items: center; gap: 12px; } .social-post-header__left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .social-post-header__network-icon { width: 36px; height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; } .social-post-header__network-icon svg { width: 36px; height: 36px; display: block; } .social-post-header__account-info { min-width: 0; flex: 1; } .social-post-header__row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .social-post-header__row-bottom { display: flex; align-items: center; gap: 6px; } /* name 14/600 #1d1d1d, ellipsis; time 12/400 #1d1d1d */ .social-post-header__account-name { font-size: 14px; font-weight: var(--fw-semibold); color: var(--secondary-85); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .social-post-header__account-name.clickable { cursor: pointer; } .social-post-header__account-name.clickable:hover { color: var(--link); } .social-post-header__time { font-size: 12px; font-weight: var(--fw-regular); color: var(--secondary-85); white-space: nowrap; flex: 0 0 auto; } /* handle 12/400 #535353 link; program badge = 14px avatar */ .social-post-header__account-handle { font-size: 12px; font-weight: var(--fw-regular); color: #535353; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a.social-post-header__account-handle:hover { color: var(--link); } .social-post-header__program { width: 14px; height: 14px; min-width: 14px; border-radius: 6px; overflow: hidden; flex: 0 0 auto; display: inline-flex; } .social-post-header__program img { width: 100%; height: 100%; object-fit: cover; } /* Media: fixed 280px tall, 4px radius, #f5f5f5 placeholder bg, cover-fit image. */ .social-post-image { height: 280px; border-radius: var(--radius-sm); background: var(--light-nav); overflow: hidden; position: relative; } .social-post-image--clickable { cursor: pointer; } .social-post-image__img, .social-post-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* No-media placeholder: large faded network glyph + caption. */ .social-post-image__placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; } .social-post-image__placeholder-icon { width: 96px; height: 96px; opacity: .25; } .social-post-image__placeholder-icon svg { width: 96px; height: 96px; } .social-post-image__placeholder-text { font-size: 14px; color: var(--text-tertiary); } /* video play affordance (overlaid bottom-left on reels/tiktoks) */ .social-post-image__badge { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: rgba(0,0,0,.55); color: #fff; font-size: 12px; } /* Metrics row: evenly distributed icon+value pairs. Icon #1d1d1d/16, value 14/500 #535353. */ .social-post-metrics { display: flex; } .social-post-metrics__container { display: flex; justify-content: space-between; gap: 6px; width: 100%; } .social-post-metrics__metric { display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .social-post-metrics__metric-icon { width: 16px; height: 16px; color: var(--secondary-85); display: inline-flex; align-items: center; justify-content: center; } .social-post-metrics__metric-icon .ic { width: 16px; height: 16px; } .social-post-metrics__metric-icon .fa { font-size: 15px; } .social-post-metrics__metric-value { font-size: 14px; font-weight: var(--fw-medium); color: #535353; font-variant-numeric: tabular-nums; } /* Caption: 2-line clamp at 14/22 → fixed 44px so cards stay uniform. */ .social-post-caption { font-size: 14px; line-height: 22px; color: #595959; height: 44px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .social-post-caption .tag-text { color: var(--link); } /* Hairline divider above the action row (#f0f0f0). */ .social-post-card__divider { height: 1px; background: var(--neutral-4); border: 0; margin: 0; } /* Actions: select/checkbox on the left, icon buttons (favorite/archive/download) on the right. Buttons are 24px icon-only text buttons, glyph #1d1d1d. */ .social-post-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; } .social-post-actions__left { display: flex; align-items: center; gap: 8px; } .social-post-actions__right { display: flex; align-items: center; gap: 4px; } .social-post-actions__left input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; cursor: pointer; } .social-post-action { width: 28px; height: 28px; border: 0; background: transparent; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; color: var(--secondary-85); cursor: pointer; } .social-post-action .ic { width: 16px; height: 16px; } .social-post-action .fa { font-size: 15px; } .social-post-action:hover { background: var(--fill-tertiary); } .social-post-action.active { color: var(--pink-6); } /* favorited */ /* Selected tile (selection / boost-picker mode): blue ring + checkbox accent. */ .social-post-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-bg); } /* Loading skeleton tile (mirrors the card layout). */ .social-post-card.skeleton-card { padding: 8px 12px; gap: 8px; } .social-post-card.skeleton-card .sk-media { height: 280px; border-radius: var(--radius-sm); } .social-post-card.skeleton-card .sk-line { height: 12px; border-radius: var(--radius-sm); }