/* Pine Top 3D — Design System (tokens + components), concatenated for no-build static hosting. Source: Claude Design handoff bundle _ds/. Fonts loaded via in , not @import. Order: colors, typography, spacing, base, components. */ /* ============================================================ Pine Top 3D — Color Tokens Brand hexes are LOCKED (Brand Guide §3). Do not alter the seven core values; tints/shades below are derived for UI use. ============================================================ */ :root { /* ---- Locked brand palette (the 7 canonical hexes) ---- */ --navy: #003C5A; /* primary brand ink */ --forest-green: #0F693C; /* pine / "made" green */ --teal-blue: #2D5A69; /* secondary, the 3D-PRINTING capsule */ --slate-gray: #96A5B4; /* mountain rock, muted UI */ --pale-teal: #C3D2D2; /* soft fills, mist */ --cyan: #00B4C8; /* accent / tagline pop */ --white: #FFFFFF; /* ---- Navy ramp ---- */ --navy-900: #00263A; --navy-800: #002F47; --navy-700: #003C5A; /* = --navy */ --navy-600: #0B4D6E; --navy-500: #2D5A69; /* = --teal-blue */ --navy-300: #6F94A6; --navy-100: #D5E2E9; --navy-050: #EAF1F5; /* ---- Green ramp ---- */ --green-800: #0A4D2C; --green-700: #0C5A33; --green-600: #0F693C; /* = --forest-green */ --green-500: #1C8150; --green-300: #6FB893; --green-100: #D6EADF; --green-050: #ECF5F0; /* ---- Cyan ramp (accent) ---- */ --cyan-700: #007A8A; --cyan-600: #0095A8; --cyan-500: #00B4C8; /* = --cyan */ --cyan-300: #6FD6E1; --cyan-100: #CCEFF4; --cyan-050: #E6F7F9; /* ---- Neutral ramp (cool, leans teal-gray) ---- */ --neutral-0: #FFFFFF; --neutral-50: #F5F7F9; --neutral-100: #EAEEF1; --neutral-200: #DCE3E7; --neutral-300: #C5D0D6; --neutral-400: #96A5B4; /* = --slate-gray */ --neutral-500: #6E7F8C; --neutral-600: #51606B; --neutral-700: #3A4750; --neutral-800: #24323B; --neutral-900: #0E1C24; /* ---- Status ---- */ --success: #0F693C; --success-soft: #ECF5F0; --info: #00B4C8; --info-soft: #E6F7F9; --warning: #B9791A; --warning-soft: #F7EFDD; --danger: #B23A2E; --danger-soft: #F7E5E2; /* ============================================================ Semantic aliases — reference these in components, not raw hexes ============================================================ */ /* Text */ --text-strong: var(--navy-700); /* headings, wordmark ink */ --text-body: var(--neutral-800); --text-muted: var(--neutral-500); --text-subtle: var(--neutral-400); --text-inverse: var(--white); --text-link: var(--cyan-700); --text-on-brand:var(--white); /* Surfaces */ --surface-page: var(--neutral-50); --surface-card: var(--white); --surface-raised: var(--white); --surface-sunken: var(--neutral-100); --surface-muted: var(--neutral-50); --surface-brand: var(--navy-700); --surface-brand-soft: var(--navy-050); --surface-accent: var(--cyan-500); --surface-accent-soft: var(--cyan-050); --surface-green-soft: var(--green-050); /* Borders */ --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-strong: var(--slate-gray); --border-brand: var(--navy-700); /* Brand actions */ --brand-primary: var(--navy-700); --brand-primary-hover: var(--navy-800); --brand-primary-active: var(--navy-900); --brand-accent: var(--cyan-500); --brand-accent-hover: var(--cyan-600); --brand-accent-active: var(--cyan-700); --brand-green: var(--green-600); --brand-green-hover: var(--green-700); /* Focus */ --focus-ring: var(--cyan-500); } /* ============================================================ Pine Top 3D — Typography Tokens Montserrat for display/headings (matches the logo wordmark); Lato for body. Tight tracking + heavy weights echo the badge. ============================================================ */ :root { /* Families */ --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800; --weight-black: 900; /* Type scale (1.250 major-third-ish, tuned) */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-md: 16px; /* base body */ --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 46px; --text-5xl: 60px; --text-6xl: 76px; /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Letter spacing — the wordmark + descriptor run tight/uppercase */ --tracking-tighter: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-caps: 0.12em; /* "3D PRINTING" descriptor */ /* ---- Semantic roles ---- */ --display-font: var(--font-display); --display-weight: var(--weight-extra); --display-tracking:var(--tracking-tight); --heading-font: var(--font-display); --heading-weight: var(--weight-bold); --eyebrow-font: var(--font-display); --eyebrow-weight: var(--weight-bold); --eyebrow-tracking:var(--tracking-caps); --eyebrow-size: var(--text-xs); --body-font: var(--font-body); --body-weight: var(--weight-regular); --body-size: var(--text-md); --body-leading: var(--leading-relaxed); --label-font: var(--font-display); --label-weight: var(--weight-semibold); } /* ============================================================ Pine Top 3D — Spacing, Radii, Shadows, Borders, Motion ============================================================ */ :root { /* Spacing scale (4px base) */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Radii — moderate, engineered feel (echoes the capsule descriptor) */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; --radius-circle: 50%; /* Borders */ --border-width: 1px; --border-width-thick: 2px; --border-hairline: 1px; /* Shadows — cool, navy-tinted, soft. Not pure black. */ --shadow-xs: 0 1px 2px rgba(0, 38, 58, 0.06); --shadow-sm: 0 1px 3px rgba(0, 38, 58, 0.08), 0 1px 2px rgba(0, 38, 58, 0.06); --shadow-md: 0 4px 12px rgba(0, 38, 58, 0.08), 0 2px 4px rgba(0, 38, 58, 0.05); --shadow-lg: 0 12px 28px rgba(0, 38, 58, 0.12), 0 4px 8px rgba(0, 38, 58, 0.06); --shadow-xl: 0 24px 56px rgba(0, 38, 58, 0.16), 0 8px 16px rgba(0, 38, 58, 0.08); --shadow-focus: 0 0 0 3px rgba(0, 180, 200, 0.35); /* Layout */ --container-sm: 640px; --container-md: 820px; --container-lg: 1080px; --container-xl: 1280px; --container-2xl: 1440px; --gutter: var(--space-6); /* Motion — quick, confident, minimal bounce */ --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */ --duration-fast: 120ms; /* @kind other */ --duration-base: 200ms; /* @kind other */ --duration-slow: 320ms; /* @kind other */ /* Semantic radii */ --radius-button: var(--radius-md); --radius-input: var(--radius-md); --radius-card: var(--radius-lg); --radius-chip: var(--radius-pill); } /* ============================================================ Pine Top 3D — Base layer Sensible element defaults wired to the tokens. Optional for consumers, but keeps specimen cards & kits consistent. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--body-font); font-size: var(--body-size); line-height: var(--body-leading); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); font-weight: var(--heading-weight); color: var(--text-strong); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 0.5em; text-wrap: balance; } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--text-link); text-decoration: none; } a:hover { text-decoration: underline; } /* Eyebrow / kicker — the uppercase descriptor treatment from the badge */ .pt-eyebrow { font-family: var(--eyebrow-font); font-weight: var(--eyebrow-weight); font-size: var(--eyebrow-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-accent); } /* The descriptor capsule, lifted from the logo's "3D PRINTING" block */ .pt-capsule { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 12px; border-radius: var(--radius-sm); background: var(--teal-blue); color: var(--white); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; } ::selection { background: var(--cyan-100); color: var(--navy-700); } /* ============================================================ Pine Top 3D — Component styles Class-based styling for the React primitives. Ships to consumers via styles.css. Components render these classNames. ============================================================ */ /* ---------------- Button ---------------- */ .pt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); border: 1.5px solid transparent; border-radius: var(--radius-button); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); -webkit-tap-highlight-color: transparent; } .pt-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .pt-btn:active { transform: translateY(1px); } .pt-btn[disabled], .pt-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; } /* sizes */ .pt-btn--sm { height: 34px; padding: 0 14px; font-size: var(--text-sm); } .pt-btn--md { height: 42px; padding: 0 20px; font-size: var(--text-md); } .pt-btn--lg { height: 52px; padding: 0 28px; font-size: var(--text-lg); } .pt-btn--block { width: 100%; } /* variants */ .pt-btn--primary { background: var(--brand-primary); color: var(--white); } .pt-btn--primary:hover:not([disabled]) { background: var(--brand-primary-hover); } .pt-btn--primary:active:not([disabled]) { background: var(--brand-primary-active); } .pt-btn--accent { background: var(--brand-accent); color: var(--navy-900); } .pt-btn--accent:hover:not([disabled]) { background: var(--brand-accent-hover); color: var(--white); } .pt-btn--accent:active:not([disabled]) { background: var(--brand-accent-active); } .pt-btn--green { background: var(--brand-green); color: var(--white); } .pt-btn--green:hover:not([disabled]) { background: var(--brand-green-hover); } .pt-btn--secondary { background: var(--surface-card); color: var(--navy-700); border-color: var(--border-default); } .pt-btn--secondary:hover:not([disabled]) { border-color: var(--navy-700); background: var(--navy-050); } .pt-btn--ghost { background: transparent; color: var(--navy-700); } .pt-btn--ghost:hover:not([disabled]) { background: var(--navy-050); } .pt-btn--danger { background: var(--danger); color: var(--white); } .pt-btn--danger:hover:not([disabled]) { background: #9C3025; } /* ---------------- IconButton ---------------- */ .pt-iconbtn { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid transparent; border-radius: var(--radius-md); cursor: pointer; color: var(--navy-700); background: transparent; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .pt-iconbtn:hover:not([disabled]) { background: var(--navy-050); } .pt-iconbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .pt-iconbtn[disabled] { opacity: 0.4; cursor: not-allowed; } .pt-iconbtn--sm { width: 34px; height: 34px; } .pt-iconbtn--md { width: 42px; height: 42px; } .pt-iconbtn--lg { width: 52px; height: 52px; } .pt-iconbtn--solid { background: var(--brand-primary); color: var(--white); } .pt-iconbtn--solid:hover:not([disabled]) { background: var(--brand-primary-hover); } .pt-iconbtn--outline { border-color: var(--border-default); } .pt-iconbtn--outline:hover:not([disabled]) { border-color: var(--navy-700); background: var(--navy-050); } /* ---------------- Badge ---------------- */ .pt-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-sm); line-height: 1.4; } .pt-badge--navy { background: var(--navy-050); color: var(--navy-700); } .pt-badge--green { background: var(--green-050); color: var(--green-700); } .pt-badge--cyan { background: var(--cyan-050); color: var(--cyan-700); } .pt-badge--slate { background: var(--neutral-100); color: var(--neutral-700); } .pt-badge--warning{ background: var(--warning-soft); color: var(--warning); } .pt-badge--danger { background: var(--danger-soft); color: var(--danger); } .pt-badge--solid { background: var(--brand-primary); color: var(--white); } /* ---------------- Tag / Chip ---------------- */ .pt-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--neutral-700); background: var(--surface-card); border: 1px solid var(--border-default); padding: 5px 12px; border-radius: var(--radius-pill); line-height: 1.3; } .pt-tag--active { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); } .pt-tag__x { cursor: pointer; opacity: 0.6; display: inline-flex; } .pt-tag__x:hover { opacity: 1; } /* ---------------- Card ---------------- */ .pt-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; } .pt-card--flat { box-shadow: none; } .pt-card--raised { box-shadow: var(--shadow-md); } .pt-card--interactive { transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); cursor: pointer; } .pt-card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .pt-card__media { display: block; width: 100%; background: var(--surface-sunken); } .pt-card__body { padding: var(--space-5); } /* ---------------- Avatar ---------------- */ .pt-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-circle); overflow: hidden; flex: none; background: var(--navy-700); color: var(--white); font-family: var(--font-display); font-weight: var(--weight-bold); } .pt-avatar img { width: 100%; height: 100%; object-fit: cover; } .pt-avatar--sm { width: 32px; height: 32px; font-size: 12px; } .pt-avatar--md { width: 42px; height: 42px; font-size: 15px; } .pt-avatar--lg { width: 56px; height: 56px; font-size: 19px; } /* ---------------- Input / Textarea ---------------- */ .pt-field { display: flex; flex-direction: column; gap: 6px; } .pt-label { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text-strong); } .pt-hint { font-size: var(--text-xs); color: var(--text-muted); } .pt-hint--error { color: var(--danger); } .pt-input, .pt-textarea, .pt-select { font-family: var(--font-body); font-size: var(--text-md); color: var(--text-body); background: var(--surface-card); border: 1.5px solid var(--border-default); border-radius: var(--radius-input); padding: 0 14px; height: 44px; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pt-textarea { height: auto; padding: 12px 14px; min-height: 96px; resize: vertical; line-height: 1.5; } .pt-input::placeholder, .pt-textarea::placeholder { color: var(--text-subtle); } .pt-input:focus, .pt-textarea:focus, .pt-select:focus { outline: none; border-color: var(--cyan-500); box-shadow: var(--shadow-focus); } .pt-input[aria-invalid="true"], .pt-textarea[aria-invalid="true"] { border-color: var(--danger); } .pt-input:disabled, .pt-textarea:disabled, .pt-select:disabled { background: var(--surface-sunken); color: var(--text-muted); cursor: not-allowed; } /* Select chevron */ .pt-select { -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23003C5A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; } /* ---------------- Checkbox ---------------- */ .pt-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-body); font-size: var(--text-md); color: var(--text-body); } .pt-check input { position: absolute; opacity: 0; width: 0; height: 0; } .pt-check__box { width: 20px; height: 20px; border-radius: var(--radius-xs); border: 1.5px solid var(--border-strong); background: var(--surface-card); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); color: #fff; } .pt-check__box svg { opacity: 0; } .pt-check input:checked + .pt-check__box { background: var(--navy-700); border-color: var(--navy-700); } .pt-check input:checked + .pt-check__box svg { opacity: 1; } .pt-check input:focus-visible + .pt-check__box { box-shadow: var(--shadow-focus); } /* ---------------- Switch ---------------- */ .pt-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-body); font-size: var(--text-md); color: var(--text-body); } .pt-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .pt-switch__track { width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--neutral-300); position: relative; flex: none; transition: background var(--duration-base) var(--ease-standard); } .pt-switch__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: var(--radius-circle); box-shadow: var(--shadow-sm); transition: transform var(--duration-base) var(--ease-out); } .pt-switch input:checked + .pt-switch__track { background: var(--cyan-500); } .pt-switch input:checked + .pt-switch__track .pt-switch__thumb { transform: translateX(18px); } .pt-switch input:focus-visible + .pt-switch__track { box-shadow: var(--shadow-focus); } /* ---------------- Tabs ---------------- */ .pt-tabs { display: flex; gap: var(--space-1); border-bottom: 1.5px solid var(--border-subtle); } .pt-tab { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 10px 14px; position: relative; margin-bottom: -1.5px; border-bottom: 2.5px solid transparent; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .pt-tab:hover { color: var(--navy-700); } .pt-tab--active { color: var(--navy-700); border-bottom-color: var(--cyan-500); } /* ---------------- Alert ---------------- */ .pt-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font-family: var(--font-body); } .pt-alert__icon { flex: none; margin-top: 1px; } .pt-alert__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); margin: 0 0 2px; } .pt-alert__body { font-size: var(--text-sm); line-height: 1.5; margin: 0; color: var(--text-body); } .pt-alert--info { background: var(--info-soft); border-color: var(--cyan-100); color: var(--cyan-700); } .pt-alert--success { background: var(--success-soft); border-color: var(--green-100); color: var(--green-700); } .pt-alert--warning { background: var(--warning-soft); border-color: #EBD9B4; color: var(--warning); } .pt-alert--danger { background: var(--danger-soft); border-color: #EBC7C1; color: var(--danger); }