/* ========================================================================== The Leather Store — base.css Design tokens, reset, typography, layout primitives, utilities ========================================================================== */ /* ---------- 1. Design tokens ---------- */ :root { /* Brand palette — warm leather & brass */ --c-espresso: #241812; --c-leather: #3e2a20; --c-cocoa: #54382a; --c-tan: #c08552; --c-camel: #d9a566; --c-brass: #b8873b; --c-gold: #e0b973; --c-cream: #f6efe5; --c-sand: #efe4d5; --c-ivory: #fdfbf8; --c-white: #ffffff; --c-ink: #1a1310; --c-body: #453931; --c-muted: #7d6b5d; --c-line: #e6dccc; --c-line-strong: #d6c7b1; --c-success: #2f6d4f; --c-danger: #9b2226; /* Semantic */ --bg: var(--c-ivory); --bg-alt: var(--c-cream); --fg: var(--c-ink); --accent: var(--c-brass); /* Type */ --font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem); --fs-md: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem); --fs-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); --fs-2xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem); --fs-3xl: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem); --fs-4xl: clamp(2.5rem, 1.7rem + 3.6vw, 4.75rem); --lh-tight: 1.08; --lh-snug: 1.25; --lh-normal: 1.6; --tracking-wide: 0.18em; /* Space */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --section-y: clamp(3.25rem, 2rem + 5vw, 6.5rem); /* Layout */ --container: 1320px; --container-narrow: 900px; --gutter: clamp(1rem, 0.55rem + 2.2vw, 2.5rem); /* Chrome */ --ann-h: 38px; --bar-h: 74px; --header-h: calc(var(--ann-h) + var(--bar-h)); /* Shape */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; /* Elevation */ --sh-1: 0 1px 2px rgba(36, 24, 18, 0.06), 0 2px 8px rgba(36, 24, 18, 0.05); --sh-2: 0 2px 6px rgba(36, 24, 18, 0.07), 0 12px 28px rgba(36, 24, 18, 0.09); --sh-3: 0 6px 18px rgba(36, 24, 18, 0.1), 0 28px 60px rgba(36, 24, 18, 0.16); --sh-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.5); /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 160ms; --t: 280ms; --t-slow: 520ms; /* Z */ --z-header: 900; --z-drawer: 1000; --z-modal: 1100; --z-toast: 1200; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (max-width: 900px) { :root { --ann-h: 0px; --bar-h: 62px; } } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-tap-highlight-color: rgba(184, 135, 59, 0.18); } body { min-height: 100vh; min-height: 100svh; padding-top: var(--header-h); background: var(--bg); color: var(--c-body); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } /* position:fixed is required — iOS Safari ignores overflow:hidden on */ body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; overscroll-behavior: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; border-style: none; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul[class], ol[class] { list-style: none; padding: 0; } a { color: inherit; text-decoration: none; } /* Component `display` rules outrank the UA sheet, so make [hidden] win. */ [hidden] { display: none !important; } /* Inline icons have no intrinsic size; without this they stretch to fill any container that has no explicit `svg` rule. */ .ico { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; } hr { border: 0; border-top: 1px solid var(--c-line); } :focus-visible { outline: 2px solid var(--c-brass); outline-offset: 3px; border-radius: var(--r-xs); } ::selection { background: var(--c-camel); color: var(--c-espresso); } /* ---------- 3. Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--c-espresso); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.01em; } .display-1 { font-size: var(--fs-4xl); font-weight: 600; } .display-2 { font-size: var(--fs-3xl); font-weight: 600; } .h-section { font-size: var(--fs-2xl); font-weight: 600; } .h-card { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.005em; color: var(--c-espresso); } .eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--c-brass); } .eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.7; } .eyebrow--center::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.7; } .lede { font-size: var(--fs-lg); color: var(--c-muted); line-height: 1.55; font-weight: 300; } .muted { color: var(--c-muted); } /* Emphasis produced by {curly braces} in a JSON title */ .hl { font-style: italic; color: var(--c-brass); } .hero__title .hl, .section--dark .hl, .cta-band .hl { color: var(--c-gold); } .text-center { text-align: center; } /* ---------- 4. Layout primitives ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); padding-inline: max(var(--gutter), env(safe-area-inset-left)); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem); } .section--alt { background: var(--bg-alt); } .section--dark { background: var(--c-espresso); color: var(--c-sand); } .section--dark h2, .section--dark h3 { color: var(--c-ivory); } .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) var(--sp-6); margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); } .section-head__text { max-width: 62ch; display: grid; gap: 0.75rem; } .section-head--center { flex-direction: column; align-items: center; text-align: center; } .section-head--center .section-head__text { justify-items: center; } .grid { display: grid; gap: var(--sp-5); } .stack > * + * { margin-top: var(--sp-4); } .flow-sm > * + * { margin-top: var(--sp-2); } /* ---------- 5. Utilities ---------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0; left: 50%; transform: translate(-50%, -140%); z-index: calc(var(--z-header) + 10); padding: 0.75rem 1.25rem; background: var(--c-espresso); color: var(--c-ivory); border-radius: 0 0 var(--r-sm) var(--r-sm); font-size: var(--fs-sm); font-weight: 600; transition: transform var(--t) var(--ease); } .skip-link:focus-visible { transform: translate(-50%, 0); } .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .no-scrollbar::-webkit-scrollbar { display: none; } .rule { height: 1px; background: linear-gradient(90deg, transparent, var(--c-line-strong), transparent); border: 0; } /* Reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* No-JS safety net: never hide content permanently */ .no-js .reveal { opacity: 1; transform: none; } /* ---------- 6. Preferences ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } @media print { body { padding-top: 0; background: #fff; } .site-header, .site-footer, .to-top, .hero { display: none !important; } }