/* * 2MAG Store, the Campagne world: paper white, mist tiles, the logo black, the logo blue. * Every value the store uses is named here; see design-system/MASTER.md for how to use each one. */ /* Fonts: Rubik (display, prices, figures) and Nunito Sans (interface, body). Self-hosted, OFL. */ @font-face { font-family: "Rubik"; src: url("../fonts/rubik-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/rubik-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Rubik"; src: url("../fonts/rubik-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/rubik-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/nunito-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/nunito-sans-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Metric-matched fallbacks (measured against Arial): while the web fonts load, Arial takes their width and line box, so nothing jumps. */ @font-face { font-family: "Rubik Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 102%; ascent-override: 91.7%; descent-override: 24.5%; line-gap-override: 0%; } @font-face { font-family: "Nunito Sans Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 99.5%; ascent-override: 101.6%; descent-override: 35.5%; line-gap-override: 0%; } :root { /* Ground and surfaces */ --paper: #FFFFFF; /* the page */ --mist: #F4F5F7; /* tiles, image wells, inputs */ --mist-2: #ECEEF2; /* mist under hover / pressed */ --hairline: #E6E8EC; /* dividers, card borders */ --hairline-strong: #D5D8DE; /* stronger dividers, disabled outlines */ --line-control: #8A919C; /* form-control borders (3.2:1 on paper) */ /* Ink */ --ink: #000000; /* the logo black: text, utility bar, footer */ --ink-2: #3A3F47; /* secondary text (10.6:1 on paper) */ --muted: #5F6670; /* muted text (5.8:1 on paper, 5.3:1 on mist) */ /* The logo blue and its button blue */ --accent: #1082FE; /* the logo blue: lines, icons, rings, active states, hotspots. Not for text on white. */ --accent-soft: #EAF3FF; /* tint behind active nav and chips */ --accent-line: rgb(16 130 254 / 0.32); --action: #0B6BDE; /* filled buttons and blue text links (5.0:1 with white) */ --action-hover: #0059BD; /* 6.6:1 */ --action-press: #004CA3; /* 8.2:1 */ --on-action: #FFFFFF; --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); /* On ink (utility bar, footer, dark panels) */ --ink-raised: #15171B; /* a surface lifted off the ink */ --ink-line: rgb(255 255 255 / 0.14); --on-ink: #FFFFFF; --on-ink-2: #C9CDD3; /* 13.2:1 on ink */ --on-ink-muted: #9EA4AE; /* 8.4:1 on ink */ /* Status */ --danger: #B42318; /* 6.4:1 on paper */ --danger-soft: #FEF1F0; --ok: #0E7A3E; /* 5.4:1 on paper */ --ok-soft: #ECF8F1; /* Type */ --font-display: "Rubik", "Rubik Fallback", "Helvetica Neue", Arial, sans-serif; --font-body: "Nunito Sans", "Nunito Sans Fallback", "Helvetica Neue", Arial, sans-serif; --tracking-display: -0.02em; --tracking-tight: -0.01em; /* Type scale (fluid between 375 and 1440). Body is 16 px on phones. */ --text-xs: 0.75rem; /* 12 fine print, badges */ --text-sm: 0.875rem; /* 14 meta, captions */ --text-base: 1rem; /* 16 body, card names */ --text-md: clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem); /* 17-19 lead text */ --text-lg: clamp(1.25rem, 1.15rem + 0.42vw, 1.5rem); /* 20-24 small headings, prices on cards */ --text-xl: clamp(1.5rem, 1.3rem + 0.85vw, 2rem); /* 24-32 section titles on phones, panel titles */ --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); /* 28-44 section titles */ --text-3xl: clamp(2.25rem, 1.65rem + 2.6vw, 3.75rem); /* 36-60 page titles */ --text-4xl: clamp(2.5rem, 1.6rem + 3.9vw, 4.75rem); /* 40-76 campaign headline */ --leading-tight: 1.05; --leading-snug: 1.2; --leading-body: 1.55; /* Space: 4/8 scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --section-y: 96px; /* 96 desktop, 64 tablet, 48 phone (set below) */ --gutter: clamp(16px, 7.6vw - 30px, 78px); /* 16 on phones; the comp's 74 px at 1376 (5.4 %) on desktops */ --page-max: 1440px; --content-max: calc(var(--page-max) - 2 * 56px); /* Radii: 14 to 24 for surfaces */ --r-xs: 8px; /* thumbs, tiny tags */ --r-sm: 14px; /* inputs, small tiles */ --r-md: 18px; /* cards */ --r-lg: 24px; /* banners, big tiles, panels */ --r-pill: 999px; /* Shadows: soft, offset, only under lifted things */ --shadow-lift: 0 22px 22px rgb(0 0 0 / 0.14); /* filter: drop-shadow under a lifted cut-out */ --shadow-rest: 0 12px 12px rgb(0 0 0 / 0.09); /* drop-shadow under a cut-out at rest */ --shadow-card: 0 20px 40px -24px rgb(16 24 40 / 0.28), 0 2px 6px -2px rgb(16 24 40 / 0.06); --shadow-pop: 0 28px 56px -16px rgb(16 24 40 / 0.24), 0 6px 16px -6px rgb(16 24 40 / 0.1); --shadow-float: 0 8px 20px -8px rgb(0 0 0 / 0.35); /* white controls over photographs */ /* Motion */ --dur-1: 150ms; /* hovers, colour changes */ --dur-2: 250ms; /* presses, small moves, panel fades */ --dur-3: 400ms; /* panels, drawers, card lifts */ --dur-4: 700ms; /* signature moves: slides, reveals */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* default: quint out */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* reveals, big moves */ --ease-in: cubic-bezier(0.55, 0, 0.75, 0.2); /* exits (use the shorter duration) */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* scrubbed or looping moves */ --ease-spring: cubic-bezier(0.25, 1, 0.5, 1); /* buttons, badges, toggles: a quick settle, no overshoot (bounce reads dated) */ /* Layers */ --z-raised: 2; --z-sticky: 40; --z-header: 60; --z-mega: 62; --z-search: 64; --z-bottom-bar: 70; --z-drawer: 90; --z-sheet: 95; --z-toast: 100; --z-skip: 110; /* Breakpoints (media queries cannot read custom properties: use the numbers; JS can read these). Phone 375–767 · tablet 768–1023 · desktop 1024–1439 · wide 1440+. The chrome also switches at 820 (bottom bar) and 1360 (inline search). */ --bp-phone: 375px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1440px; /* Chrome sizes */ --utility-h: 32px; --header-h: 76px; --header-tight: 60px; /* what stays visible once the header is stuck */ --bottom-bar-h: 0px; /* set on phones */ } @media (max-width: 1023px) { :root { --section-y: 64px; --header-h: 64px; --header-tight: 56px; } } @media (max-width: 820px) { :root { --utility-h: 32px; --bottom-bar-h: 72px; } } /* Landscape phones: no bottom bar (lintel.css); the header carries WhatsApp and the cart. */ @media (max-width: 820px) and (orientation: landscape) and (max-height: 500px) { :root { --bottom-bar-h: 0px; } } @media (max-width: 767px) { :root { --section-y: 48px; --header-h: 60px; --header-tight: 52px; } }