/* ============================================================================= IMTREX INC. — Design System CSS Custom Properties, Typography Scale, Spacing, Color Palette Version: 1.0 | Sprint 1 ============================================================================= */ /* ============================================================================= FONTS — Loaded via HTML tags (parallel fetch) Fraunces (variable) + Plus Jakarta Sans (variable) ============================================================================= */ /* ============================================================================= COLOR PALETTE Mediterranean Warm — sourced from Build Brief Section 3.1 ============================================================================= */ :root { /* Primary Brand */ --brand-terracotta: #8B3A2A; --brand-terracotta-dark: #6D2C1E; --brand-terracotta-light: #F0DDD9; --brand-olive: #5C4A1E; --brand-olive-light: #E8E2D5; --brand-gold: #D4A853; --brand-gold-dark: #B8913F; /* Backgrounds */ --background-cream: #F8F3ED; --background-white: #FFFFFF; --background-paper: #FBF7EF; /* Text */ --text-primary: #1E1A15; --text-secondary: #4A4236; --text-muted: #6B5F54; --text-on-dark: #F8F3ED; --text-on-terracotta: #FFFFFF; /* UI */ --divider: rgba(30, 26, 21, 0.1); --divider-strong: rgba(30, 26, 21, 0.18); --border-light: rgba(30, 26, 21, 0.08); /* Shadows */ --shadow-xs: 0 1px 2px rgba(30, 26, 21, 0.04); --shadow-sm: 0 2px 8px rgba(30, 26, 21, 0.06); --shadow-md: 0 4px 20px rgba(30, 26, 21, 0.08); --shadow-lg: 0 20px 60px rgba(30, 26, 21, 0.10); --shadow-card: 0 2px 12px rgba(30, 26, 21, 0.07); /* Border Radii */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ============================================================================= SPACING SCALE — 4px base unit ============================================================================= */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ --space-11: 10rem; /* 160px */ --space-12: 12rem; /* 192px */ /* Section padding */ --section-pad-y: clamp(4rem, 8vw, 8rem); --section-pad-y-sm: clamp(2.5rem, 5vw, 5rem); --container-max: 1240px; --container-pad: clamp(1.25rem, 5vw, 2.5rem); /* ============================================================================= TYPOGRAPHY ============================================================================= */ --font-serif: 'Fraunces', 'Georgia', 'Times New Roman', serif; --font-sans: 'Plus Jakarta Sans', -apple-system, 'Helvetica Neue', sans-serif; --font-mono: 'Geist Mono', 'Courier New', monospace; /* Fluid type scale */ --type-eyebrow: 0.75rem; /* 12px — uppercase, tracked */ --type-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem); --type-sm: clamp(0.875rem, 0.84rem + 0.18vw, 1rem); --type-base: clamp(1rem, 0.97rem + 0.22vw, 1.0625rem); --type-lg: clamp(1.125rem, 1.05rem + 0.38vw, 1.25rem); --type-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem); --type-h4: clamp(1.0625rem, 0.95rem + 0.55vw, 1.25rem); --type-h3: clamp(1.375rem, 1.1rem + 1.35vw, 1.875rem); --type-h2: clamp(1.875rem, 1.3rem + 2.9vw, 3rem); --type-h1: clamp(2.25rem, 1.4rem + 4.25vw, 4.25rem); --type-display: clamp(3rem, 1.8rem + 6vw, 7rem); /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.15em; /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* ============================================================================= MOTION ============================================================================= */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --duration-instant: 0.1s; --duration-fast: 0.2s; --duration-med: 0.4s; --duration-slow: 0.7s; --duration-slower: 1.0s; /* ============================================================================= Z-INDEX LAYERS ============================================================================= */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ============================================================================= GLOBAL RESET + BASE ============================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--type-base); line-height: var(--leading-relaxed); color: var(--text-primary); background-color: var(--background-cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Skip to main content */ .skip-link { position: absolute; inset-block-start: -100%; inset-inline-start: var(--space-4); background: var(--brand-terracotta); color: var(--text-on-terracotta); padding: var(--space-2) var(--space-5); border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-size: var(--type-sm); font-weight: var(--weight-semibold); text-decoration: none; z-index: var(--z-toast); transition: inset-block-start var(--duration-fast); } .skip-link:focus { inset-block-start: 0; } /* ============================================================================= TYPOGRAPHY — HEADINGS ============================================================================= */ h1, h2, h3 { font-family: var(--font-serif); color: var(--text-primary); letter-spacing: var(--tracking-tight); text-wrap: balance; } h4, h5, h6 { font-family: var(--font-sans); font-weight: var(--weight-bold); color: var(--text-primary); text-wrap: balance; } h1 { font-size: var(--type-h1); font-weight: var(--weight-black); line-height: var(--leading-tight); } h2 { font-size: var(--type-h2); font-weight: var(--weight-bold); line-height: var(--leading-snug); } h3 { font-size: var(--type-h3); font-weight: var(--weight-regular); line-height: 1.3; } h4 { font-size: var(--type-h4); line-height: 1.35; } h5 { font-size: var(--type-base); font-weight: var(--weight-semibold); } h6 { font-size: var(--type-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); } p { max-width: 65ch; } p + p { margin-block-start: var(--space-4); } a { color: var(--brand-terracotta); text-decoration: underline; text-underline-offset: 3px; transition: color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); } a:hover { color: var(--brand-terracotta-dark); } a:focus-visible { outline: 2px solid var(--brand-terracotta); outline-offset: 3px; border-radius: var(--radius-xs); } strong { font-weight: var(--weight-semibold); } em { font-style: italic; } blockquote { font-family: var(--font-serif); font-style: italic; font-size: var(--type-xl); line-height: var(--leading-snug); color: var(--text-primary); border-inline-start: 3px solid var(--brand-terracotta); padding-inline-start: var(--space-6); margin-inline: 0; } /* ============================================================================= UTILITY CLASSES ============================================================================= */ /* Eyebrow label */ .eyebrow { display: inline-block; font-family: var(--font-sans); font-size: var(--type-eyebrow); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--brand-gold); } .eyebrow--terracotta { color: var(--brand-terracotta); } .eyebrow--cream { color: var(--text-on-dark); } /* Text styles */ .text-serif { font-family: var(--font-serif); } .text-sans { font-family: var(--font-sans); } .text-mono { font-family: var(--font-mono); } .text-xs { font-size: var(--type-xs); } .text-sm { font-size: var(--type-sm); } .text-base { font-size: var(--type-base); } .text-lg { font-size: var(--type-lg); } .text-xl { font-size: var(--type-xl); } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-cream { color: var(--text-on-dark); } .text-gold { color: var(--brand-gold); } .text-terracotta { color: var(--brand-terracotta); } .text-left { text-align: start; } .text-center { text-align: center; } .text-right { text-align: end; } .font-regular { font-weight: var(--weight-regular); } .font-medium { font-weight: var(--weight-medium); } .font-semibold { font-weight: var(--weight-semibold); } .font-bold { font-weight: var(--weight-bold); } .font-black { font-weight: var(--weight-black); } .font-italic { font-style: italic; } /* Backgrounds */ .bg-cream { background-color: var(--background-cream); } .bg-white { background-color: var(--background-white); } .bg-olive { background-color: var(--brand-olive); } .bg-terracotta { background-color: var(--brand-terracotta); } .bg-paper { background-color: var(--background-paper); } /* Visually hidden (accessible) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Focus ring utility */ .focus-ring:focus-visible { outline: 2px solid var(--brand-terracotta); outline-offset: 3px; border-radius: var(--radius-xs); } /* Truncate text */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================================= PRINT STYLES ============================================================================= */ @media print { :root { --background-cream: #ffffff; --background-paper: #ffffff; } body { font-size: 12pt; color: #000; background: #fff; } .nav-wrapper, .site-footer, .cta-band, .exit-intent-overlay, .mobile-menu-overlay { display: none !important; } a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } h1, h2, h3, h4 { page-break-after: avoid; } p, blockquote { orphans: 3; widows: 3; } } /* ============================================================================= REDUCED MOTION ============================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }