/* ============================================================ Bartallama3D Design Tokens The single source of truth for colors, type, spacing, and motion across marketing, storefront, and product pages. Import this file first on every page. ============================================================ */ :root { /* ------------------------------------------------------------ COLOR — Brand The llama palette. Warm off-white fleece, black outline, pink ears/muzzle, and a sky-blue accent lifted from the winking llama's eye. ------------------------------------------------------------ */ --b3d-fleece: #FDFCFA; /* Page background, fleece white */ --b3d-fleece-2: #F4F2ED; /* Secondary surface, panel bg */ --b3d-ink: #111111; /* Outline black — 4px strokes, headings */ --b3d-ink-soft: #2A2A2A; /* Body text on light */ --b3d-sky: #7FD3F7; /* Llama-eye sky blue — primary accent, links, info */ --b3d-sky-deep: #3AA8DA; /* Hover / active on sky */ --b3d-sky-ink: #1A6EA0; /* Sky-blue text on light grounds (5:1+, WCAG AA) */ /* Deprecated — these aliases map the retired muzzle tokens onto Sky so legacy CSS keeps working while we migrate references. Do not use in new code. */ --b3d-muzzle: var(--b3d-sky); --b3d-muzzle-deep: var(--b3d-sky-deep); /* Legacy Beautiful-Jekyll web colors — used ONLY on the current production site. New surfaces should prefer the brand tokens above. Kept here so we can identify and migrate them. */ --b3d-legacy-link: #008AFF; --b3d-legacy-hover: #0085A1; /* ------------------------------------------------------------ COLOR — Functional / UI ------------------------------------------------------------ */ --b3d-success: #3CB371; /* "Final revision" badges, in-stock */ --b3d-success-bg: #E8F6EE; --b3d-warning: #E0A000; /* "Upgrade recommended" */ --b3d-warning-bg: #FDF5D4; --b3d-danger: #B03426; /* "Discontinued" alerts; 4.8:1 on danger-bg (WCAG AA), was #C0392B */ --b3d-danger-bg: #F4DDDB; --b3d-info: var(--b3d-sky-deep); --b3d-info-bg: #E4F4FB; /* ------------------------------------------------------------ COLOR — Marketplace partners (use ONLY in "Buy on X" CTAs) Sourced from the live product_listing.html. ------------------------------------------------------------ */ --b3d-amazon-bg: #FF9900; --b3d-amazon-ink: #232F3E; --b3d-etsy-bg: #B8541A; /* 4.9:1 with white text (WCAG AA); was #D5641C */ --b3d-etsy-ink: #FFFFFF; --b3d-ebay-bg: #0064D2; --b3d-ebay-ink: #FFFFFF; /* ------------------------------------------------------------ COLOR — Neutrals ------------------------------------------------------------ */ --b3d-n-50: #FAF9F7; --b3d-n-100: #F0EEE9; --b3d-n-200: #E4E1DA; --b3d-n-300: #CFCBC2; --b3d-n-400: #A9A49A; --b3d-n-500: #726E66; /* 4.9:1 on fleece (WCAG AA); was #7D7970 */ --b3d-n-600: #555249; --b3d-n-700: #3A3832; --b3d-n-800: #1F1E1B; /* ------------------------------------------------------------ TYPE Body: Lora (serif) — warm, readable, inherited from the current production site. Use for prose, product copy, specs, blog. Display (hero/impact): "Rubik Mono One" — mono-width, cartoonish geometry that echoes the llama outline. Title/Callout: "Josefin Sans" 700 — Art-Deco geometric cousin, elegant and playful at section-header sizes. Body: "Nunito" 400/600 — rounded humanist sans, warm and highly legible for product copy and specs. UI / meta: "Josefin Sans" 600 uppercase — nav, buttons, badges, eyebrows (also keeps a single web-font family doing double duty). Mono: JetBrains Mono — for dimensions, part IDs, specs. ------------------------------------------------------------ */ --b3d-font-body: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif; --b3d-font-display: 'Rubik Mono One', 'Arial Black', 'Helvetica Neue', sans-serif; --b3d-font-title: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif; --b3d-font-ui: 'Josefin Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --b3d-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Type scale — modular, 1.25 ratio, anchored at 18px body */ --b3d-text-xs: 0.75rem; /* 12px — captions, tag chips */ --b3d-text-sm: 0.875rem; /* 14px — meta, footer */ --b3d-text-base: 1.125rem; /* 18px — body */ --b3d-text-lg: 1.25rem; /* 20px — lede */ --b3d-text-xl: 1.5rem; /* 24px — h4 */ --b3d-text-2xl: 1.875rem; /* 30px — h3 */ --b3d-text-3xl: 2.25rem; /* 36px — h2 */ --b3d-text-4xl: 3.125rem; /* 50px — h1 */ --b3d-text-5xl: 5rem; /* 80px — hero display */ --b3d-leading-tight: 1.1; --b3d-leading-snug: 1.25; --b3d-leading-body: 1.55; --b3d-leading-loose: 1.75; --b3d-track-tight: -0.01em; --b3d-track-normal: 0; --b3d-track-wide: 0.0625rem; /* uppercase labels */ /* ------------------------------------------------------------ SPACING — 4px base ------------------------------------------------------------ */ --b3d-s-1: 0.25rem; /* 4px */ --b3d-s-2: 0.5rem; /* 8px */ --b3d-s-3: 0.75rem; /* 12px */ --b3d-s-4: 1rem; /* 16px */ --b3d-s-5: 1.5rem; /* 24px */ --b3d-s-6: 2rem; /* 32px */ --b3d-s-7: 3rem; /* 48px */ --b3d-s-8: 4rem; /* 64px */ --b3d-s-9: 6rem; /* 96px */ /* ------------------------------------------------------------ SHAPE — the llama outline is the visual spine of the brand. Everything has a black stroke. Corners are generously rounded to echo the fluffy fleece. ------------------------------------------------------------ */ --b3d-radius-sm: 6px; --b3d-radius-md: 12px; --b3d-radius-lg: 20px; --b3d-radius-xl: 32px; --b3d-radius-pill: 999px; --b3d-stroke-hair: 1px; --b3d-stroke-thin: 2px; --b3d-stroke: 3px; /* default card / button border */ --b3d-stroke-bold: 4px; /* hero cards, logo-scale lockups */ /* ------------------------------------------------------------ ELEVATION — soft shadows only. (The old hard black offset shadows were removed on purpose; don't bring them back.) ------------------------------------------------------------ */ /* Floating panels: menus, dialogs */ --b3d-shadow-float: 0 20px 40px -15px rgba(17, 17, 17, 0.18); /* Soft shadow — use sparingly for photographs on light bg */ --b3d-shadow-photo: 0 12px 32px -12px rgba(17, 17, 17, 0.25); /* ------------------------------------------------------------ MOTION ------------------------------------------------------------ */ --b3d-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --b3d-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --b3d-dur-fast: 120ms; --b3d-dur-base: 220ms; --b3d-dur-slow: 420ms; /* ------------------------------------------------------------ LAYOUT ------------------------------------------------------------ */ --b3d-container: 1200px; --b3d-container-narrow: 760px; --b3d-nav-h: 64px; } /* Dark surfaces — reserved for hero bands, cards over imagery */ .b3d-on-dark { --b3d-surface: var(--b3d-ink); --b3d-on-surface: var(--b3d-fleece); }