@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;500;600;700;800;900&family=Archivo+Expanded:wght@700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&display=swap'); /* ============================================================ ShopInteriors 3 — design system Ported 1:1 from the Claude Design "ShopInteriors Design System" (tokens + components + website sections). ============================================================ */ :root { /* ---- Brand ---- */ --brand-red: #C80010; --brand-red-600: #B0000E; --brand-red-700: #97000C; --brand-red-300: #E64552; --brand-red-050: #FCEAEB; --brand-black: #141414; --brand-white: #FFFFFF; /* ---- Neutral / industrial grey scale ---- */ --grey-950: #141414; --grey-900: #1E1F21; --grey-800: #2B2D30; --grey-700: #3D4045; --grey-600: #565A60; --grey-500: #777C84; --grey-400: #9CA1A8; --grey-300: #C2C6CC; --grey-200: #DEE1E5; --grey-150: #E8EAED; --grey-100: #F1F2F4; --grey-050: #F8F9FA; /* ---- Semantic ---- */ --success: #1F8A4C; --warning: #C9851A; --danger: #C80010; --info: #2563B5; /* ---- Surface / text aliases ---- */ --surface-page: var(--grey-050); --surface-card: var(--brand-white); --surface-inverse: var(--brand-black); --text-strong: var(--grey-950); --text-body: var(--grey-800); --text-muted: var(--grey-600); --text-subtle: var(--grey-500); --text-inverse: var(--brand-white); --text-brand: var(--brand-red); --text-onbrand: var(--brand-white); --border-subtle: var(--grey-200); --border-default: var(--grey-300); --border-strong: var(--grey-400); /* ---- Typography ---- */ --font-display: 'Archivo Expanded', 'Archivo', 'Arial Narrow', system-ui, sans-serif; --font-heading: 'Archivo', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --text-7xl: 5.5rem; --text-6xl: 4.25rem; --text-5xl: 3.25rem; --text-4xl: 2.375rem; --text-3xl: 1.875rem; --text-2xl: 1.5rem; --text-xl: 1.3125rem; --text-lg: 1.1875rem; --text-md: 1.125rem; --text-sm: 1rem; --text-xs: 0.875rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-black: 900; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --ls-tight: -0.02em; --ls-wide: 0.04em; --ls-eyebrow: 0.14em; /* ---- Spacing (4px grid) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* ---- Radius ---- */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px; --accent-bar: 4px; /* ---- Shadows ---- */ --shadow-xs: 0 1px 2px rgba(20,20,20,0.06); --shadow-sm: 0 1px 3px rgba(20,20,20,0.08), 0 1px 2px rgba(20,20,20,0.04); --shadow-md: 0 4px 12px rgba(20,20,20,0.08), 0 2px 4px rgba(20,20,20,0.04); --shadow-lg: 0 12px 32px rgba(20,20,20,0.12), 0 4px 8px rgba(20,20,20,0.05); /* ---- Layout ---- */ --container-max: 1240px; --gutter: clamp(1.25rem, 4vw, 4rem); --header-h: 76px; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 140ms; --dur-med: 240ms; --dur-slow: 420ms; } /* ============================================================ Scope: everything below is scoped to .si-scope so it never leaks into Magento admin widgets or other themes' markup. The gets .si-scope via layout (bodyAttribute). ============================================================ */ /* border-box for all our own components (the design system assumes it) — without this, padding + border are ADDED to fixed heights/widths and buttons/fields look inflated. */ .si-header *, .si-header *::before, .si-header *::after, .si-footer *, .si-footer *::before, .si-footer *::after, .si-home *, .si-home *::before, .si-home *::after { box-sizing: border-box; } .si-scope, .si-scope p { font-family: var(--font-body); } .si-scope h1, .si-scope h2, .si-scope h3, .si-scope h4, .si-scope h5 { font-family: var(--font-heading); color: var(--text-strong); margin: 0; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); font-weight: var(--fw-bold); } /* ---- Type helpers ---- */ .si-display { font-family: var(--font-display); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-strong); } .si-eyebrow { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-brand); margin: 0; } .si-lead { font-size: var(--text-xl); line-height: var(--lh-relaxed); color: var(--text-muted); margin: 0; } .si-accent-bar { display: inline-block; width: 48px; height: var(--accent-bar); background: var(--brand-red); border-radius: var(--radius-sm); } /* ---- Shared container ---- */ .si-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); } .si-section { padding: var(--space-9) 0; } .si-section--white { background: var(--surface-card); } .si-section--page { background: var(--surface-page); } /* ---- Section heading ---- */ .si-heading { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; } .si-heading__title { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-4xl); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--text-strong); margin: 0; } .si-heading__lead { font-size: var(--text-xl); line-height: var(--lh-relaxed); color: var(--text-muted); margin: 0; } /* ============================================================ Components ============================================================ */ /* ---- Button ---- */ .si-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: var(--fw-bold); line-height: 1; letter-spacing: 0.01em; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); /* md default */ padding: 11px 20px; font-size: var(--text-md); height: 44px; } .si-btn:hover { text-decoration: none; } .si-btn:active { transform: translateY(1px); } .si-btn--sm { padding: 8px 14px; font-size: var(--text-sm); height: 36px; } .si-btn--lg { padding: 15px 28px; font-size: var(--text-lg); height: 54px; } .si-btn--full { width: 100%; } /* NOTE: every variant pins :visited too — these buttons are often links to in-page anchors, and without it the browser tints visited links (blue), overriding the label color. */ .si-btn--primary, .si-btn--primary:visited { background: var(--brand-red); color: var(--text-onbrand); border-color: var(--brand-red); } .si-btn--primary:hover { background: var(--brand-red-600); border-color: var(--brand-red-600); color: #fff; } .si-btn--primary:active { background: var(--brand-red-700); border-color: var(--brand-red-700); } .si-btn--secondary, .si-btn--secondary:visited { background: transparent; color: var(--text-strong); border-color: var(--border-strong); } .si-btn--secondary:hover { background: var(--grey-100); border-color: var(--grey-500); color: var(--text-strong); } .si-btn--ghost, .si-btn--ghost:visited { background: transparent; color: var(--text-strong); border-color: transparent; } .si-btn--ghost:hover { background: var(--grey-100); } .si-btn--dark, .si-btn--dark:visited { background: var(--brand-black); color: var(--text-inverse); border-color: var(--brand-black); } .si-btn--dark:hover { background: var(--grey-800); border-color: var(--grey-800); color: #fff; } /* on-image secondary — dark scrim + solid white border so white text stays legible on any hero photo */ .si-btn--onimage, .si-btn--onimage:visited { background: rgba(20,20,20,0.42); color: #fff; border-color: #fff; } .si-btn--onimage:hover { background: rgba(20,20,20,0.62); border-color: #fff; color: #fff; } .si-btn svg { width: 1em; height: 1em; } /* ---- Icon button ---- */ .si-iconbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-card); color: var(--text-strong); border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .si-iconbtn:hover { background: var(--grey-100); } /* ---- Badge ---- */ .si-badge { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-xs); line-height: 1; letter-spacing: 0.02em; padding: 5px 9px; border-radius: var(--radius-sm); } .si-badge--neutral-soft { background: var(--grey-150); color: var(--grey-800); } .si-badge--red-soft { background: var(--brand-red-050); color: var(--brand-red-700); } /* ---- Tag / filter chip ---- */ .si-tag { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-sm); line-height: 1; padding: 8px 14px; border-radius: var(--radius-pill); cursor: pointer; border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); transition: all var(--dur-fast) var(--ease-out); } .si-tag:hover { background: var(--grey-100); } .si-tag.is-selected { background: var(--brand-red); color: #fff; border-color: var(--brand-red); } /* ---- Card ---- */ .si-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); display: block; } .si-card--interactive { cursor: pointer; } .si-card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } .si-card__media { overflow: hidden; aspect-ratio: 16 / 10; background: var(--grey-200); } .si-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); } .si-card--interactive:hover .si-card__media img { transform: scale(1.04); } .si-card__body { padding: var(--space-5); } /* ---- Stat ---- */ .si-stat { display: flex; flex-direction: column; gap: var(--space-1); } .si-stat__value { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-6xl); line-height: 1; letter-spacing: var(--ls-tight); color: var(--brand-red); } .si-stat__label { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-md); color: var(--text-muted); } .si-stat--inverse .si-stat__label { color: rgba(255,255,255,0.8); } /* ---- Form controls ---- */ .si-field { display: flex; flex-direction: column; gap: var(--space-2); } .si-label { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-sm); color: var(--text-strong); } .si-label .si-req { color: var(--brand-red); } .si-input, .si-select, .si-textarea { width: 100%; font-family: var(--font-body); font-size: var(--text-md); color: var(--text-strong); padding: 11px 14px; line-height: var(--lh-normal); height: auto; /* auto height so the larger font isn't clipped (Luma fixes select height) */ background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .si-select { min-height: 48px; } .si-input:focus, .si-select:focus, .si-textarea:focus { border-color: var(--brand-red); box-shadow: 0 0 0 3px var(--brand-red-050); } .si-textarea { resize: vertical; min-height: 88px; line-height: var(--lh-normal); } .si-select-wrap { position: relative; } .si-select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; } .si-select-wrap::after { content: '▾'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); font-size: 12px; } .si-checkbox { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; } .si-checkbox input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: 0 0 auto; margin: 1px 0 0; border: 2px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-card); cursor: pointer; display: grid; place-items: center; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .si-checkbox input:checked { background: var(--brand-red); border-color: var(--brand-red); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .si-checkbox span { font-family: var(--font-body); font-size: var(--text-md); color: var(--text-body); line-height: 1.4; } /* ---- Icons (Lucide) — CSS width/height overrides the SVG's own attrs ---- */ .si-scope .si-ic, .si-scope svg.si-ic { display: inline-flex; vertical-align: middle; width: 20px; height: 20px; stroke-width: 2; flex: 0 0 auto; } .si-scope .si-ic--sm, .si-scope svg.si-ic--sm { width: 14px; height: 14px; } .si-scope .si-ic--md, .si-scope svg.si-ic--md { width: 18px; height: 18px; } .si-scope .si-ic--lg, .si-scope svg.si-ic--lg { width: 20px; height: 20px; } .si-scope .si-ic--xl, .si-scope svg.si-ic--xl { width: 26px; height: 26px; } .si-scope .si-ic--xxl, .si-scope svg.si-ic--xxl { width: 30px; height: 30px; } /* focus */ .si-scope :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }