/* ============================================================================= ONE EI · CARD SYSTEM — tokens + base classes (FUNCTIONAL LAYER) ----------------------------------------------------------------------------- This file is the FUNCTIONAL / STRUCTURAL card component only: surface, border, radius, padding, elevation, anatomy, a media slot, interactivity, states, behaviour patterns, scroll, nesting, sizing, layout and responsive reflow. OUT OF SCOPE — owned by a separate EXPRESSIVE skill (built later, asset- and judgment-driven): coloured / gradient fills, illustrations, textures, non-rectangular shapes, celebration / persona / reward treatments, and any audience "playful vs mature" theming. Nothing expressive lives here. It COMPOSES on three foundation systems and defines none of their rules: • COLOUR color-tokens.md + ../guides/color.md → greyscale for surface / border / ink; status hues for glance-marks; teal focus ring. • TYPOGRAPHY typography-tokens.css + ../guides/typography.md → the .t-* type ramp; card text IS a .t-* class (this file ships no font sizes). • BUTTONS button-tokens.css + ../guides/buttons.md → every button in or beside a card is a .btn; the chevron is a grey card affordance. Companion files: ../guides/cards.md (rules) · OneEI-Cards.html (visual reference) ============================================================================= */ /* Foundation token layers (canonical filenames — strip any "(n)" copy-suffix). */ @import url("typography-tokens.css"); /* --font-*, .t-* classes, container-type on .card */ @import url("button-tokens.css"); /* --btn-*, .btn base + variants */ /* ============================================================================= 1 · TOKENS (all greyscale / structural — no colour fills) ============================================================================= */ :root{ /* ---- surface (greyscale · color_skill §8) ---------------------------- */ --card-surface: var(--grey-white, #ffffff); /* Default body surface */ --card-surface-sub: var(--grey-20, #f1f5f9); /* nested sub-tile · ghost tint */ --card-ink: var(--grey-100, #18181c); /* primary text */ --card-ink-2: var(--grey-80, #6b7481); /* secondary text (>= grey-80) */ --card-ink-3: var(--grey-70, #808b9a); /* muted / captions / chevron */ /* ---- border (greyscale) ---------------------------------------------- */ --card-border: var(--grey-30, #ebf0f5); /* hairline (the signature) */ --card-border-strong: var(--grey-40, #d3dbe4); /* raised / draggable */ --card-border-hover: var(--grey-40, #d3dbe4); /* ---- geometry -------------------------------------------------------- */ --card-radius: 24px; /* outer corner */ --card-radius-inner: 12px; /* sub-tiles, media wells */ --card-pad: 24px; --card-pad-compact: 16px; /* dense tiles / small viewports */ --card-gap: 16px; /* ---- elevation — depth is shadow, never a colour ramp ---------------- */ --card-shadow-0: none; /* Ghost */ --card-shadow-s: 0 4px 24px rgba(24,24,28,.04); /* Default resting */ --card-shadow-m: 0 8px 32px rgba(24,24,28,.08); /* hover / raised */ /* ---- motion ---------------------------------------------------------- */ --card-dur: 200ms; --card-dur-slow: 320ms; --card-ease: cubic-bezier(.2,.7,.3,1); /* ---- sizing guards --------------------------------------------------- */ --card-w-min: 160px; /* practical floor */ --card-w-desktop: 360px; /* 320–420 recommended */ --card-measure: 66ch; /* body-text measure cap */ /* ---- selection & focus (defer colour to the foundations) ------------- Selection is greyscale here (the colour system may retint it). The focus ring reuses the button focus token — an interactive card focuses like a button. Teal is never card decoration, only this ring. */ --card-select: var(--grey-100, #18181c); --card-focus-ring: var(--btn-affirm-primary, var(--teal-primary, #0e9289)); /* ---- status accents — glance MARKS only (dots / badges / progress) ---- A card SURFACE never takes a token fill; these are for small marks placed inside a card. Hues owned by color_skill §2. */ --card-mark-success: var(--success-60, #35b86a); --card-mark-warning: var(--yellow-60, #ffe53b); /* gold — dark ink only */ --card-mark-error: var(--error-60, #e14f2e); --card-mark-info: var(--blue-60, #48a2df); --card-tint: var(--grey-20, #f1f5f9); /* ghost group tint / sub-surface */ } /* ============================================================================= 2 · BASE — Default treatment ============================================================================= */ .card{ font-family:var(--font-body,'Nunito',system-ui,sans-serif); /* family from typography; text sizes come from .t-* */ color:var(--card-ink); background:var(--card-surface); border:1px solid var(--card-border); border-radius:var(--card-radius); box-shadow:var(--card-shadow-s); padding:var(--card-pad); display:flex; flex-direction:column; gap:var(--card-gap); position:relative; text-align:left; min-width:var(--card-w-min); transition:transform var(--card-dur) var(--card-ease), box-shadow var(--card-dur) var(--card-ease), border-color var(--card-dur) var(--card-ease); } /* ---- interior STRUCTURE helpers. Card TEXT uses typography: title → .t-h3/.t-h2 · number(hero) → .t-number · number(data) → .t-stat body → .t-body · label/eyebrow → .t-label(+.t-caps)/.t-overline --------- */ .card__row { display:flex; align-items:center; gap:12px; justify-content:space-between; } .card__foot { display:flex; align-items:center; gap:12px; } .card__chevron { flex:none; width:18px; height:18px; color:var(--card-ink-3); } /* affordance — grey, never teal */ /* Media slot — a functional content block (chart, thumbnail, icon). Decorative illustration / texture / asset selection is the EXPRESSIVE skill's domain. */ .card__media{ display:block; overflow:hidden; border-radius:var(--card-radius-inner); background:var(--card-tint); } .card__media > img, .card__media > svg{ display:block; width:100%; height:100%; object-fit:cover; } /* Sub-tile — the only sanctioned "card inside a card" (flat, depth 2) */ .card__subtile{ background:var(--card-surface-sub); border:1px solid var(--card-border); border-radius:var(--card-radius-inner); padding:var(--card-pad-compact); box-shadow:none; } /* ============================================================================= 3 · TREATMENTS (two functional surfaces) ============================================================================= */ /* ---- GHOST — quietest: no border, no shadow. Optional group tint. -------- The container never clicks (it may still host an inner button). */ .card--ghost{ background:transparent; border:0; box-shadow:none; padding:0; } .card--ghost.is-tinted{ background:var(--card-tint); padding:var(--card-pad-compact); border-radius:var(--card-radius-inner); } /* ---- DEFAULT — the base `.card` above. No extra class needed. ------------ */ /* ============================================================================= 4 · MEDIA PLACEMENT (functional layout of the media slot, by reading order) ============================================================================= */ .card--media-left, .card--media-right{ display:grid; align-items:stretch; gap:var(--card-gap); } .card--media-left { grid-template-columns:auto 1fr; } /* introduces — before content */ .card--media-right{ grid-template-columns:1fr auto; } /* supports — after content */ .card--media-left > .card__media{ order:0; } .card--media-right > .card__media{ order:1; } .card--media-top{ display:flex; flex-direction:column; } /* introduces — full-bleed top */ .card--media-top > .card__media{ order:-1; margin:calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0; border-radius:0; } /* ============================================================================= 5 · INTERACTIVITY (§A) ============================================================================= */ /* Interactive · whole card is one target (chevron signals it opens a view) */ .card--interactive{ cursor:pointer; } .card--interactive:hover{ box-shadow:var(--card-shadow-m); border-color:var(--card-border-hover); transform:translateY(-2px); } .card--interactive:active{ transform:translateY(0); } .card--interactive:focus-visible{ outline:2px solid var(--card-focus-ring); outline-offset:2px; } /* Non-interactive info card = base `.card`. A Ghost container is never a whole-card target (but may host an inner button). */ .card--static{ cursor:default; } /* ============================================================================= 6 · STATES (documented card states) ============================================================================= */ /* rest = the base `.card` at rest hover = .card--interactive:hover (lift + raised shadow) pressed = .card--interactive:active (settle) focus = .card--interactive:focus-visible (teal ring) */ .card.is-selected{ border-color:var(--card-select); box-shadow:0 0 0 2px var(--card-select),var(--card-shadow-s); } /* persistent pick (colour may retint) */ .card.is-disabled{ opacity:.55; pointer-events:none; } .card.is-loading{ position:relative; overflow:hidden; } /* skeleton shimmer while data loads */ .card.is-loading::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-100%); animation:card-shimmer 1.2s infinite; } @keyframes card-shimmer{ to{ transform:translateX(100%); } } /* ============================================================================= 7 · BEHAVIOURAL PATTERNS (§B — need a surface, never Ghost) ============================================================================= */ .card-flip{ perspective:1100px; } .card-flip__inner{ position:relative; transition:transform var(--card-dur-slow) var(--card-ease); transform-style:preserve-3d; } .card-flip.is-flipped .card-flip__inner{ transform:rotateY(180deg); } .card-flip__face{ backface-visibility:hidden; -webkit-backface-visibility:hidden; } .card-flip__face--back{ position:absolute; inset:0; transform:rotateY(180deg); } .card-carousel{ display:flex; gap:var(--card-gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; } .card-carousel > *{ scroll-snap-align:center; flex:0 0 auto; } .card-stack{ position:relative; } .card-stack > *{ position:absolute; inset:0 0 auto; transform-origin:top center; transition:transform var(--card-dur-slow) var(--card-ease),opacity var(--card-dur-slow) var(--card-ease); } .card-stack > .is-p1{ transform:translateY(13px) scale(.95); } .card-stack > .is-p2{ transform:translateY(26px) scale(.9); opacity:.9; } /* ============================================================================= 8 · INTERNAL SCROLL (§C — requires a bounded height) ============================================================================= */ .card--scroll{ overflow:hidden; } /* set height/max-height in layout */ .card--scroll > .card__foot{ flex:none; } .card__scrollbody{ overflow-y:auto; min-height:120px; flex:1; -webkit-mask-image:linear-gradient(#000 88%,transparent); mask-image:linear-gradient(#000 88%,transparent); } .card__scrollbody::-webkit-scrollbar{ width:6px; } .card__scrollbody::-webkit-scrollbar-thumb{ background:var(--card-border-strong); border-radius:99px; } /* ============================================================================= 9 · NESTING GUARD (§D — max depth 2; depth 3 is a system error) ============================================================================= */ .card .card .card{ outline:2px dashed var(--card-mark-error); outline-offset:2px; } /* ============================================================================= 10 · LAYOUT (§F) — cards reflow, not scale ============================================================================= */ .card-grid{ display:grid; gap:var(--card-gap); } .card-grid--sym { grid-template-columns:repeat(auto-fill,minmax(var(--card-w-desktop),1fr)); } /* equal peers */ .card-grid--asym{ grid-template-columns:2fr 1fr; } /* one dominant */ .card-grid--bento{ grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(120px,auto); } /* mixed spans */ .card-grid--bento > .is-lead{ grid-column:span 2; grid-row:span 2; } /* ============================================================================= 11 · RESPONSIVE (§G) — XS 320 · SM 480 · MD 768 · LG 1024 · XL 1440 · 2XL 1920 ============================================================================= */ @media (max-width:1023px){ .card--media-left, .card--media-right{ grid-template-columns:1fr; } .card--media-left > .card__media, .card--media-right > .card__media{ order:-1; } .card-grid--asym{ grid-template-columns:1fr; } } @media (max-width:767px){ .card{ --card-pad:var(--card-pad-compact); } .card-grid--sym, .card-grid--bento{ grid-template-columns:1fr; } .card-grid--bento > .is-lead{ grid-column:auto; grid-row:auto; } } /* ============================================================================= 12 · MOTION SAFETY ============================================================================= */ @media (prefers-reduced-motion:reduce){ .card, .card--interactive, .card-flip__inner, .card-stack > *, .card.is-loading::after{ transition:none !important; animation:none !important; } }