/* ========================================================================== STYL.ISH CSS — DOCUMENTED EDITION -------------------------------------------------------------------------- HOW TO USE THIS FILE (read me first): • This stylesheet is already wired up • You can safely tweak variable values in :root to change the overall look. • Avoid renaming selectors unless you also update the HTML. • Classes like .text-*, .bg-*, .rounded-* are utilities you can mix & match. • “Mobile” styles in Cargo often apply via a .mobile class on or . -------------------------------------------------------------------------- QUICK MAP: 1) Design System Variables → Global tokens (colors, spacing, typography, etc.) 2) Base Styles → Normalize-ish defaults (html, body, box-sizing) 3) Cargo Text Styles → Site-wide text styles (headings, captions, etc.) 4) Utility Classes → Small, composable helpers (spacing, flex, color) 5) Component Classes → Reusable patterns (card, tag, buttons) 6) Responsive Utilities → Utility variants for sm / md / lg breakpoints 7) Animations → Reusable keyframes + attach via .animate-* -------------------------------------------------------------------------- TIPS: • If a beginner wants to change sizes or colors, start in Section 1 (tokens). • Utilities (Section 4) are great for quick layout tweaks without new CSS. • Buttons (in Section 3) are “text styles” that also include visuals. • When in doubt, annotate: /* why you changed something *\/ ========================================================================== */ /* ========================================================================== 1. DESIGN SYSTEM VARIABLES -------------------------------------------------------------------------- Purpose: A single source of truth for color, spacing, type scale, radii, shadows, and transitions. Change values here to theme the entire site. Notes: • All sizes use rem so they scale with the base font-size. • --text-hero is intentionally large for splash/hero headlines. • Shadows use subtle, modern defaults—tune to taste. ========================================================================== */ :root { /* ----- Color System (neutral ramp + brand accents) ----- */ --color-primary: #262626; /* Primary text / darkest neutral */ --color-secondary: #404040; /* Secondary text */ --color-muted: #666666; /* Muted text */ --color-light: #999999; /* Light text / subtle borders */ --color-lighter: #BFBFBF; /* Lighter borders / dividers */ --color-bg-light: #f1f1f1; /* Light surface */ --color-bg-lighter: #e3e3e3; /* Lighter surface */ --color-accent: #b2b5cd; /* Accent (cool) */ --color-accent-alt: #94948c; /* Accent (earthy/neutral) */ --color-brand: #027aff; /* Brand / link / primary action */ --color-white: #ffffff; /* White */ --color-bg: #f6f9f6; /* Page background */ /* ----- Typography Families ----- */ --font-serif: "EB Garamond", serif; /* Headlines / editorial */ --font-sans: "Diatype Variable", sans-serif; /* Body, UI text */ /* ----- Type Scale (REM) -------------------------------- How to use: apply with .text-sm, .text-2xl, etc. or directly via var(). For consistent rhythm, pair sizes with line-height utilities below. */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; /* Default body size */ --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.5rem; --text-8xl: 6rem; --text-9xl: 8rem; --text-hero: 9rem; /* REALLY big—hero displays */ /* ----- Spacing Scale (REM) ------------------------------ Use with utilities like .p-4, .mt-8, etc. to avoid hard-coded numbers. */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ----- Border Radius Tokens ----------------------------- */ --radius-sm: 0.125rem; --radius: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; /* Fully rounded (pills, circles) */ /* ----- Shadows ------------------------------------------ Keep these subtle; heavy shadows can feel dated quickly. */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* ----- Motion / Transitions ----------------------------- */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; } /* ========================================================================== 2. BASE STYLES -------------------------------------------------------------------------- Purpose: predictable defaults and global page styling. Notes: • The html font-size uses !important because Cargo can inject styles. • The .mobile prefix here reflects how Cargo toggles mobile layouts. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; /* Include padding/border in declared width/height */ } html { scroll-behavior: smooth; /* Nice anchor scrolling */ font-size: 16px !important; /* Base for the REM scale */ } /* Set your desired base font size for mobile */ .mobile html { font-size: 16px !important; } /* Change the base font size for all REM units on mobile Note: This duplicates the rule above but preserves current behavior. If you ever want to globally scale mobile type, adjust this value. */ .mobile html { font-size: 16px; /* Default is 16px. Increase to scale everything up. */ } body { background-color: var(--color-bg); color: var(--color-primary); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.6; margin: 0; -webkit-font-smoothing: antialiased; /* Crisper type on macOS/webkit */ -moz-osx-font-smoothing: grayscale; /* Swatch aliases kept for Cargo’s style panel compatibility. These duplicate the color tokens above—don’t remove if your theme or components rely on “--swatch-*” variables. */ --swatch-1: #262626; --swatch-2: #404040; --swatch-3: #666666; --swatch-4: #999999; --swatch-5: #BFBFBF; --swatch-6: #f1f1f1; --swatch-7: #e3e3e3; --swatch-8: #b2b5cd; --swatch-9: #94948c; --swatch-10: #027aff; --swatch-11: #ffffff; --swatch-12: #f6f9f6; } /* ========================================================================== 3. CARGO.SITE TEXT STYLES (COMPLETE SET) -------------------------------------------------------------------------- Purpose: Site-wide typography rules that mirror Cargo’s style panel while giving you class-based helpers you can drop into any element. Notes: • “bodycopy” here is a custom tag used like a block element. If your HTML uses , this ensures it renders like a

. • Headings (h1/h2) use the serif family for editorial vibe. • Buttons here are both typographic and styled components. ========================================================================== */ /* --- Class-based Text Styles --- */ bodycopy { display: block; /* Make this custom element behave like

*/ font-family: var(--font-sans); font-size: var(--text-base); font-weight: 300; color: var(--color-primary); line-height: 1.6; letter-spacing: 0; } .mobile bodycopy { font-size: var(--text-base); } /* Heading 1 — Big editorial headline */ h1 { display: block; font-family: var(--font-serif); font-size: 6.35rem; /* Intentionally large for hero sections */ font-weight: 400; color: var(--color-primary); line-height: 1.05; /* Tight for display */ margin-bottom: 1rem; } .mobile h1 { font-size: 4rem; /* Scales down on mobile */ } /* Heading 2 — Section headers / subheads */ h2 { display: block; font-family: var(--font-serif); font-size: 3.25rem; font-weight: 400; color: var(--color-primary); line-height: 1.1; margin-bottom: 1rem; } /* Caption — supporting copy / figure captions */ .caption { display: block; font-family: var(--font-sans); font-size: 1.3rem; font-weight: 400; color: var(--color-primary); line-height: 1.4; font-variation-settings: 'slnt' 0, 'MONO' 0; } .caption a { text-decoration: underline; /* Make links in captions obvious */ } /* Menu icon text — used for icon-like text in navs */ .menu-icon { --text-style: "Menu icon"; display: inline-block; font-family: var(--font-sans); font-size: 2rem; font-weight: 400; color: var(--color-secondary); line-height: 1.2; font-variation-settings: 'slnt' 0, 'MONO' 0; } .menu-icon a { text-decoration: none; } /* h3 style as a class (not the

element) / .h3 { --text-style: "h3"; display: block; font-family: var(--font-serif); font-size: 2.4rem; font-weight: 400; color: var(--color-primary); line-height: 1.4; } / h4 style as a class (not the

element) / .h4 { --text-style: "h4"; display: block; font-family: var(--font-serif); font-size: 2rem; font-weight: 400; color: var(--color-primary); line-height: 1.5; } / Blockquote — pull quotes / emphasis / .blockquote { --text-style: "blockquote"; display: block; font-family: var(--font-serif); font-size: 2rem; font-weight: 300; color: var(--color-muted); font-style: italic; line-height: 1.5; } / Small text — legalese / metadata / .small-text { --text-style: "small-text"; display: block; font-family: var(--font-sans); font-size: 1.2rem; font-weight: 400; color: var(--color-light); line-height: 1.4; } / ----- Buttons (typography + visuals) -------------------- Use .button-primary for main actions; .button-secondary for quiet ones. You can apply these to ,

element) */ .h3 { --text-style: "h3"; display: block; font-family: var(--font-serif); font-size: 2.4rem; font-weight: 400; color: var(--color-primary); line-height: 1.4; } /* h4 style as a class (not the

Responsive

element) / .h3 { --text-style: "h3"; display: block; font-family: var(--font-serif); font-size: 2.4rem; font-weight: 400; color: var(--color-primary); line-height: 1.4; } / h4 style as a class (not the

Styl.ish