/* ============================================================================ PetPulse — Design tokens + component classes ---------------------------------------------------------------------------- Authored from the "Clinical Calm" prototype system (web-shared.jsx `W` / theme()). Standalone — no build step, no framework. Drop into app/assets/stylesheets/ and @import, or include directly. Dark mode: set (or on any wrapper). All component classes are prefixed .pp- to avoid collisions. ============================================================================ */ /* ---------------------------------------------------------------- TOKENS */ :root { /* surfaces */ --pp-bg: #F7F8FA; --pp-surface: #FFFFFF; --pp-surface-2: #F4F5F7; /* recessed */ --pp-chip: #EEF0F2; --pp-border: #ECEDEF; /* hairline */ --pp-border-str: #E2E4E8; /* stronger hairline (inputs) */ /* text */ --pp-text: #0A0B0D; --pp-text-sec: #6B7077; --pp-text-ter: #A8ABB1; /* brand */ --pp-primary: #2D7D6E; --pp-primary-ink: #1A5247; --pp-primary-soft: #E6F2EF; /* semantic */ --pp-alert: #E5484D; --pp-alert-soft: #FDECEC; --pp-warn: #D97A28; --pp-warn-soft: #FAEDDD; --pp-info: #3A8BC9; --pp-info-soft: #E0F4FF; --pp-violet: #7E5BD9; --pp-violet-soft: #F0EAFF; --pp-success: #1F8A5B; --pp-success-soft: #E2F2EA; /* type */ --pp-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif; --pp-font-mono: ui-monospace, Menlo, "SF Mono", monospace; /* radii */ --pp-r-card: 18px; --pp-r-input: 10px; --pp-r-btn: 10px; --pp-r-pill: 999px; /* shadow */ --pp-shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --pp-shadow-md: 0 8px 24px rgba(15,18,20,0.10); /* layout */ --pp-sidebar-w: 240px; --pp-sidebar-w-collapsed: 72px; --pp-content-pad: 28px; } [data-theme="dark"] { --pp-bg: #0B0C0E; --pp-surface: #16181B; --pp-surface-2: #1F2226; --pp-chip: #22252A; --pp-border: #26292E; --pp-border-str: #2F3338; --pp-text: #F2F3F4; --pp-text-sec: #9CA0A7; --pp-text-ter: #6E7178; --pp-primary: #62C8B5; --pp-primary-ink: #A8DDD2; --pp-primary-soft: #1A3A35; --pp-alert-soft: rgba(229,72,77,0.14); --pp-warn-soft: rgba(217,122,40,0.14); --pp-info-soft: rgba(58,139,201,0.14); --pp-violet-soft: rgba(126,91,217,0.18); --pp-success: #34A853; --pp-success-soft: rgba(52,168,83,0.16); } /* ----------------------------------------------------------------- BASE */ .pp-root, .pp-app { font-family: var(--pp-font); color: var(--pp-text); background: var(--pp-bg); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } .pp-app *, .pp-root * { box-sizing: border-box; } /* tabular numerals helper */ .pp-num { font-variant-numeric: tabular-nums; } .pp-mono { font-family: var(--pp-font-mono); letter-spacing: -0.3px; } /* ----------------------------------------------------------- TYPOGRAPHY */ .pp-h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: var(--pp-text); } .pp-h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.4px; color: var(--pp-text); } .pp-card-title{ font-size: 15.5px; font-weight: 700; letter-spacing: -0.2px; color: var(--pp-text); } .pp-body { font-size: 14px; color: var(--pp-text); line-height: 1.55; } .pp-sec { color: var(--pp-text-sec); } .pp-ter { color: var(--pp-text-ter); } .pp-overline { font-size: 11.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--pp-text-sec); } .pp-label { font-size: 12.5px; font-weight: 600; letter-spacing: -0.05px; color: var(--pp-text); } .pp-hint { font-size: 11.5px; color: var(--pp-text-ter); line-height: 1.45; } .pp-stat-num { font-size: 34px; font-weight: 700; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- LAYOUT */ /* App frame: sidebar + main. Designed at 1440px; let it fluid-fill in app. */ .pp-app { display: flex; min-height: 100vh; } .pp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pp-content { padding: 24px var(--pp-content-pad) 40px; } .pp-content--narrow { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } .pp-content--wide { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } /* Sidebar */ .pp-sidebar { width: var(--pp-sidebar-w); flex-shrink: 0; background: var(--pp-surface); border-right: 0.5px solid var(--pp-border); display: flex; flex-direction: column; position: sticky; top: 0; align-self: flex-start; min-height: 100vh; } .pp-sidebar--collapsed { width: var(--pp-sidebar-w-collapsed); } .pp-sidebar__logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; } .pp-sidebar__nav { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 2px; } .pp-navitem { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--pp-text); cursor: pointer; font-size: 13.5px; font-weight: 500; } .pp-navitem:hover { background: var(--pp-surface-2); } .pp-navitem--active { background: var(--pp-primary-soft); color: var(--pp-primary); font-weight: 600; } .pp-navitem__count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--pp-text-ter); font-variant-numeric: tabular-nums; } /* Page header (in content area) */ .pp-pageheader { display: flex; align-items: center; gap: 14px; padding: 20px var(--pp-content-pad) 18px; border-bottom: 0.5px solid var(--pp-border); } .pp-pageheader__titles { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .pp-pageheader__sub { font-size: 13.5px; color: var(--pp-text-sec); letter-spacing: -0.1px; } .pp-pageheader__actions { display: flex; align-items: center; gap: 8px; } /* Settings sub-nav */ .pp-tabs { display: flex; gap: 2px; padding: 0 var(--pp-content-pad); background: var(--pp-surface); border-bottom: 0.5px solid var(--pp-border); } .pp-tab { display: flex; align-items: center; gap: 8px; padding: 13px 14px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--pp-text-sec); font-size: 13.5px; font-weight: 500; margin-bottom: -0.5px; } .pp-tab--active { border-bottom-color: var(--pp-primary); color: var(--pp-text); font-weight: 600; } /* ----------------------------------------------------------------- CARD */ .pp-card { background: var(--pp-surface); border: 0.5px solid var(--pp-border); border-radius: var(--pp-r-card); padding: 20px; } .pp-card--flush { padding: 0; } .pp-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 22px 14px; border-bottom: 0.5px solid var(--pp-border); } .pp-card__body { padding: 22px; } /* --------------------------------------------------------------- BUTTONS */ .pp-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--pp-r-btn); border: 0.5px solid transparent; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.1px; cursor: pointer; white-space: nowrap; } .pp-btn--sm { padding: 7px 12px; font-size: 13px; } .pp-btn--lg { padding: 11px 18px; font-size: 15px; } .pp-btn--primary { background: var(--pp-primary); color: #fff; } .pp-btn--secondary { background: var(--pp-surface); color: var(--pp-text); border-color: var(--pp-border-str); } .pp-btn--ghost { background: transparent; color: var(--pp-text); } .pp-btn--danger { background: var(--pp-alert); color: #fff; } .pp-btn--icon { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 9px; background: var(--pp-surface); border: 0.5px solid var(--pp-border); color: var(--pp-text-sec); } .pp-btn--icon.pp-btn--danger-ghost { color: var(--pp-alert); } /* ------------------------------------------------------ PILLS / BADGES */ /* Base soft pill. Pair with a color modifier. */ .pp-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--pp-r-pill); font-size: 11.5px; font-weight: 600; white-space: nowrap; } .pp-pill--primary { background: var(--pp-primary-soft); color: var(--pp-primary); } .pp-pill--success { background: var(--pp-success-soft); color: var(--pp-success); } .pp-pill--warn { background: var(--pp-warn-soft); color: var(--pp-warn); } .pp-pill--alert { background: var(--pp-alert-soft); color: var(--pp-alert); } .pp-pill--info { background: var(--pp-info-soft); color: var(--pp-info); } .pp-pill--violet { background: var(--pp-violet-soft); color: var(--pp-violet); } .pp-pill--neutral { background: var(--pp-surface-2); color: var(--pp-text-sec); border: 0.5px solid var(--pp-border); } /* status dot */ .pp-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ----------------------------------------------------------- FORM FIELDS */ .pp-field { display: flex; flex-direction: column; } .pp-field__label { display: flex; align-items: baseline; gap: 6px; margin-bottom: 7px; } .pp-field__optional { font-size: 11.5px; color: var(--pp-text-ter); font-weight: 500; } .pp-field__hint { font-size: 11.5px; color: var(--pp-text-ter); margin-top: 6px; line-height: 1.45; } .pp-input, .pp-select, .pp-textarea { width: 100%; padding: 10px 13px; border-radius: var(--pp-r-input); background: var(--pp-surface); border: 0.5px solid var(--pp-border-str); font-family: var(--pp-font); font-size: 14px; color: var(--pp-text); font-weight: 500; letter-spacing: -0.1px; box-sizing: border-box; } .pp-input::placeholder, .pp-textarea::placeholder { color: var(--pp-text-ter); font-weight: 400; } .pp-input:focus, .pp-select:focus, .pp-textarea:focus { outline: none; border-color: var(--pp-primary); box-shadow: 0 0 0 3px var(--pp-primary-soft); } .pp-textarea { min-height: 96px; line-height: 1.5; resize: vertical; } .pp-select { appearance: none; display: flex; align-items: center; justify-content: space-between; background-image: none; cursor: pointer; } /* input with a leading icon: wrap input in .pp-input-group */ .pp-input-group { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: var(--pp-r-input); background: var(--pp-surface); border: 0.5px solid var(--pp-border-str); } .pp-input-group input { border: 0; padding: 0; background: transparent; flex: 1; font: inherit; color: var(--pp-text); } .pp-input-group input:focus { outline: none; } .pp-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .pp-form-grid--3 { grid-template-columns: repeat(3, 1fr); } .pp-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; } .pp-form-footer__actions { display: flex; gap: 10px; } /* --------------------------------------------------- SEGMENTED CONTROL */ .pp-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--pp-chip); border: 0.5px solid var(--pp-border); } .pp-seg__item { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; color: var(--pp-text-sec); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .pp-seg__item--active { background: var(--pp-surface); color: var(--pp-text); box-shadow: var(--pp-shadow-sm); } .pp-seg__item--active.is-view { color: var(--pp-info); } .pp-seg__item--active.is-manage { color: var(--pp-primary); } /* ------------------------------------------------------ TOGGLE SWITCH */ .pp-toggle { width: 44px; height: 26px; border-radius: 13px; background: #D4D6DA; padding: 2px; display: flex; align-items: center; cursor: pointer; transition: background .2s; flex-shrink: 0; } .pp-toggle__knob { width: 22px; height: 22px; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform .2s; } .pp-toggle--on { background: var(--pp-primary); } .pp-toggle--on .pp-toggle__knob { transform: translateX(18px); } /* --------------------------------------------------- ACCESS / PERMISSION */ .pp-access-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 0.5px solid var(--pp-border); } .pp-access-row:last-child { border-bottom: 0; } .pp-access-row__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--pp-surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--pp-text-sec); } /* ----------------------------------------------------------- AVATARS */ /* User avatar: set background + color inline per-person (see COMPONENTS.md tones). */ .pp-avatar { border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: -0.3px; border: 0.5px solid var(--pp-border); background: var(--pp-primary-soft); color: var(--pp-primary); } .pp-avatar--40 { width: 40px; height: 40px; font-size: 15px; } .pp-avatar--64 { width: 64px; height: 64px; font-size: 24px; } .pp-avatar--88 { width: 88px; height: 88px; font-size: 33px; } /* Species glyph (clinical pages) — set bg/color per species, see COMPONENTS.md */ .pp-glyph { border-radius: 30%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--pp-surface-2); color: var(--pp-text-sec); } /* ----------------------------------------------------------- LIST / ROWS */ .pp-list { /* put on .pp-card.pp-card--flush wrapping rows */ } .pp-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; border-bottom: 0.5px solid var(--pp-border); } .pp-row:last-child { border-bottom: 0; } .pp-row:hover { background: var(--pp-surface-2); } .pp-colhead { display: flex; align-items: center; gap: 14px; padding: 0 18px 8px; font-size: 11px; font-weight: 600; color: var(--pp-text-ter); letter-spacing: 0.4px; text-transform: uppercase; } /* ----------------------------------------------------------- EMPTY STATE */ .pp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 32px; min-height: 360px; } .pp-empty__icon { width: 76px; height: 76px; border-radius: 22px; background: var(--pp-primary-soft); color: var(--pp-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .pp-empty__title { font-size: 21px; font-weight: 700; letter-spacing: -0.4px; color: var(--pp-text); margin: 0; } .pp-empty__body { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--pp-text-sec); max-width: 420px; text-wrap: pretty; } .pp-empty__actions { display: flex; gap: 10px; margin-top: 24px; } .pp-empty__foot { margin-top: 22px; font-size: 12.5px; color: var(--pp-text-ter); } /* -------------------------------------------------------- RICH TEXT BOX */ .pp-rte { border-radius: 12px; border: 0.5px solid var(--pp-border-str); overflow: hidden; background: var(--pp-surface); } .pp-rte__toolbar { display: flex; align-items: center; gap: 2px; padding: 7px 10px; flex-wrap: wrap; background: var(--pp-surface-2); border-bottom: 0.5px solid var(--pp-border); } .pp-rte__btn { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--pp-text-sec); cursor: pointer; } .pp-rte__btn:hover { background: var(--pp-surface); } .pp-rte__body { padding: 14px 16px; min-height: 180px; font-size: 13.5px; line-height: 1.6; color: var(--pp-text); } .pp-rte__body:empty::before { content: attr(data-placeholder); color: var(--pp-text-ter); } /* -------------------------------------------------------- UPLOAD TILE */ .pp-upload { border-radius: 12px; border: 1.5px dashed var(--pp-border-str); background: var(--pp-surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-align: center; padding: 16px; min-height: 132px; } .pp-upload__icon { width: 40px; height: 40px; border-radius: 11px; background: var(--pp-surface); border: 0.5px solid var(--pp-border); display: flex; align-items: center; justify-content: center; color: var(--pp-text-sec); } .pp-upload--square { aspect-ratio: 1; min-height: 0; } /* -------------------------------------------------------- TOOL / STAT TILES */ .pp-tile { background: var(--pp-surface); border: 0.5px solid var(--pp-border); border-radius: var(--pp-r-card); padding: 18px; cursor: pointer; } .pp-tile__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } /* responsive: collapse 2/3-col grids on narrow screens */ @media (max-width: 900px) { .pp-form-grid, .pp-form-grid--3 { grid-template-columns: 1fr; } }