/* components.css — reusable UI patterns. Sizing convention: rem for typography, spacing, dimensions, and layout — 1rem = 16px (the browser default, never overridden on ). px is kept only for values where pixel precision matters: 1–2px borders/hairlines, sub-pixel micro-transforms (e.g. translateY(-1px)), the 999px pill idiom for fully-rounded corners, and box-shadow blur radii. */ /* Component-layer design tokens. tokens.css holds the brand tokens (colors, fonts, type scale) generated from brand-tokens.json. These additional tokens are the contract for atomic project-card / project-detail components migrated from the old susplify-projects library: a tighter spacing scale (--sp-N), per-axis typography (--t-display-*, --t-h1-*, etc.), pixel-precise sizes (--size-N), semantic color roles (--fg-*, --surface-*, --hairline, --accent), motion (--dur-*, --ease-out), and layout maxes (--layout-card-*, --layout-detail-*). Kept here, not in tokens.css, because they are not brand-owned and not regenerated from brand-tokens.json. */ :root { /* spacing scale (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; --sp-10: 64px; --sp-14: 96px; /* typography (single body family; each axis addressable) */ --t-display-size: 56px; --t-display-weight: 500; --t-display-lh: 1.05; --t-display-track: -0.02em; --t-h1-size: 32px; --t-h1-weight: 500; --t-h1-lh: 1.1; --t-h1-track: -0.015em; --t-h2-size: 40px; --t-h2-weight: 500; --t-h2-lh: 1.0; --t-h2-track: -0.02em; --t-h3-size: 24px; --t-h3-weight: 500; --t-h3-lh: 1.15; --t-h3-track: -0.01em; --t-body-lg-size: 17px; --t-body-lg-weight: 400; --t-body-lg-lh: 1.55; --t-body-lg-track: 0; --t-body-size: 15px; --t-body-weight: 400; --t-body-lh: 1.5; --t-body-track: 0; --t-caption-size: 13px; --t-caption-weight: 500; --t-caption-lh: 1.3; --t-caption-track: 0; --t-eyebrow-size: 11px; --t-eyebrow-weight: 500; --t-eyebrow-lh: 1.2; --t-eyebrow-track: 0.12em; /* pixel-precise sizes used by hairlines, dot indicators, and borders */ --size-1: 1px; --size-2: 2px; --size-3: 3px; --size-4: 4px; --size-6: 6px; --size-8: 8px; --size-10: 10px; --size-12: 12px; --size-14: 14px; --size-16: 16px; --size-18: 18px; --size-20: 20px; --size-22: 22px; --size-24: 24px; --size-28: 28px; --size-32: 32px; --size-36: 36px; --size-44: 44px; --size-48: 48px; --size-56: 56px; --size-64: 64px; /* semantic color roles (map to brand tokens already in tokens.css) */ --fg-strong: var(--color-deep); --fg-default: var(--color-deep); --fg-muted: rgba(26, 58, 82, 0.72); --fg-faint: rgba(26, 58, 82, 0.55); --fg-on-dark: var(--color-sand); --fg-on-dark-muted: rgba(245, 240, 232, 0.72); --fg-data: var(--color-forest); --accent: var(--color-amber); --surface-page: var(--color-sand); --surface-raised: rgba(26, 58, 82, 0.03); --surface-cta: var(--color-forest); --hairline: var(--alpha-deep-16); /* radius extras (coexist with --radius-sm/md/lg from tokens.css) */ --radius-sharp: 2px; --radius-card-tight: 4px; /* motion */ --dur-fast: 160ms; --dur-base: 240ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* layout maxes for portfolio card + project detail */ --layout-card-width: 980px; --layout-card-min-height: 340px; --layout-card-image-min: 320px; --layout-card-image-min-mobile: 240px; --layout-detail-hero-min-h: 520px; } /* Buttons ------------------------------------------------------------------ */ .sp-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-lg); border: 1px solid transparent; border-radius: var(--radius-button); font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--size-15); line-height: 1.2; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--motion-duration-xs) var(--motion-ease-standard), box-shadow var(--motion-duration-xs) var(--motion-ease-standard), background-color var(--motion-duration-xs) var(--motion-ease-standard), color var(--motion-duration-xs) var(--motion-ease-standard), border-color var(--motion-duration-xs) var(--motion-ease-standard); } .sp-button:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .sp-button:active:not(:disabled) { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-sm); transition-duration: var(--motion-duration-xs); transition-timing-function: var(--motion-ease-accelerate); } .sp-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .sp-button--amber { background: var(--color-white); color: var(--color-deep); border-color: var(--color-sand); } .sp-button--amber:hover { filter: brightness(0.85); } /* True amber emphasis variant — solid brand amber with deep text. Used where we want the CTA to *pop* (hero primary, CTA strip primary). The legacy .sp-button--amber above is misnamed and renders white; preserved as-is for the contact form, 404 page, and other consumers that already read white. */ .sp-button--solid-amber { background: var(--color-amber); color: var(--color-deep); border-color: var(--color-amber); } .sp-button--solid-amber:hover { filter: brightness(0.92); } .sp-button--outline { background: transparent; color: var(--color-sand); border-color: var(--color-sand); } .sp-button--outline:hover { background: var(--color-sand); color: var(--color-primary); } /* Badges & tags ------------------------------------------------------------ */ /* Scoped to the web's own filter tabs + segment pickers so these rules do NOT bleed into the that susplify-projects emits inside cards/details — that one stays styled purely by its inline