/* ============================================================================= Del Plaza — tokens Design tokens, type scale, spacing, colour. ============================================================================= TYPE — nothing is simulated ---------------------------------------------------------------------------- The family declared below as 'Univers' is the design slot, and the licensed Univers fills it: the foundry's own cuts, bound to the style names the design asks for. The width slots — 'Univers Condensed', 'Univers Extended', 'Univers UltraCondensed' — carry Univers' own condensed, extended and ultra-condensed drawings, not a stretched imitation. Inter and Archivo, which stood in while the commissioned set was unusable, are gone with their faces. Nothing is synthesised by the engine: no faux bold, no oblique passed off as italic, and no width faked with font-stretch. Univers' scale has five steps where this stylesheet names six, so a slot can be filled a rank below its label: 500 takes the Roman, the semi-bold slots take Bold. The file name carries the truth about the drawing; the weight beside it is the slot the drawing fills. Declared by exact family name, never by font-stretch. Every family, weight and slant requested anywhere in public/css has a face declared here, so the engine never has to invent one. ============================================================================= */ /* Del Plaza - E-commerce Platform*/ /* ============================================================================= Bootstrap Icons 1.13.1 — Icon Library =============================================================================*/ @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"); /* ============================================================================= @font-face — 'Univers' (primary slot) — the licensed cuts Each Univers style name is bound to the foundry's cut of the same rank, so the slot numbers keep meaning what the stylesheet says they mean: 300 Light · 400 Regular · 500 Roman · 600 Bold · 700 Black · 900 ExtraBlack, each of the upright slots with its oblique beside it Read from the files, the drawings are 300 Light, 400 Roman, 700 Bold, 850 Black and 950 ExtraBlack — five steps where the design names six, which is why 500 is filled by the Roman. The file name carries the truth about the drawing; the weight beside it is the slot the drawing fills. ============================================================================= */ @font-face { font-family: 'Univers'; src: url('../fonts/Univers-Light.woff2?v=20260926.1') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers'; src: url('../fonts/Univers-LightOblique.woff2?v=20260926.1') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Univers'; src: url('../fonts/Univers-Regular.woff2?v=20260926.1') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers'; src: url('../fonts/Univers-RegularOblique.woff2?v=20260926.1') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Univers'; src: url('../fonts/Univers-Regular.woff2?v=20260926.1') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers'; src: url('../fonts/Univers-Bold.woff2?v=20260926.1') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers'; src: url('../fonts/Univers-BoldOblique.woff2?v=20260926.1') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Univers'; src: url('../fonts/Univers-Black.woff2?v=20260926.1') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers'; src: url('../fonts/Univers-BlackOblique.woff2?v=20260926.1') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Univers'; src: url('../fonts/Univers-ExtraBlack.woff2?v=20260926.1') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers'; src: url('../fonts/Univers-ExtraBlackOblique.woff2?v=20260926.1') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; } /* ============================================================================= @font-face — width slots — served by Univers' own width cuts ============================================================================= */ /* 'Univers Condensed' — Light 300 / Regular 400 / Bold at 600 and 700 (Univers draws no SemiBold) */ @font-face { font-family: 'Univers Condensed'; src: url('../fonts/Univers-LightCondensed.woff2?v=20260926.1') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers Condensed'; src: url('../fonts/Univers-LightCondensedOblique.woff2?v=20260926.1') format('woff2'); font-weight: 300; font-style: oblique; font-display: swap; } @font-face { font-family: 'Univers Condensed'; src: url('../fonts/Univers-Condensed.woff2?v=20260926.1') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers Condensed'; src: url('../fonts/Univers-CondensedOblique.woff2?v=20260926.1') format('woff2'); font-weight: 400; font-style: oblique; font-display: swap; } @font-face { font-family: 'Univers Condensed'; src: url('../fonts/Univers-BoldCondensed.woff2?v=20260926.1') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers Condensed'; src: url('../fonts/Univers-BoldCondensed.woff2?v=20260926.1') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers Condensed'; src: url('../fonts/Univers-BoldCondensedOblique.woff2?v=20260926.1') format('woff2'); font-weight: 700; font-style: oblique; font-display: swap; } /* 'Univers Extended' — Regular 400 (also filling 500) / Bold at 600 and 700 / Black 800 / ExtraBlack 900 */ @font-face { font-family: 'Univers Extended'; src: url('../fonts/Univers-Extended.woff2?v=20260926.1') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers Extended'; src: url('../fonts/Univers-ExtendedOblique.woff2?v=20260926.1') format('woff2'); font-weight: 400; font-style: oblique; font-display: swap; } @font-face { font-family: 'Univers Extended'; src: url('../fonts/Univers-Extended.woff2?v=20260926.1') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers Extended'; src: url('../fonts/Univers-BoldExtended.woff2?v=20260926.1') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers Extended'; src: url('../fonts/Univers-BoldExtended.woff2?v=20260926.1') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers Extended'; src: url('../fonts/Univers-BoldExtendedOblique.woff2?v=20260926.1') format('woff2'); font-weight: 700; font-style: oblique; font-display: swap; } @font-face { font-family: 'Univers Extended'; src: url('../fonts/Univers-BlackExtended.woff2?v=20260926.1') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers Extended'; src: url('../fonts/Univers-BlackExtendedOblique.woff2?v=20260926.1') format('woff2'); font-weight: 800; font-style: oblique; font-display: swap; } @font-face { font-family: 'Univers Extended'; src: url('../fonts/Univers-ExtraBlackExtended.woff2?v=20260926.1') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers Extended'; src: url('../fonts/Univers-ExtraBlackExtendedOblique.woff2?v=20260926.1') format('woff2'); font-weight: 900; font-style: oblique; font-display: swap; } /* 'Univers UltraCondensed' — Thin 100 / Light 300 / Regular 400 */ @font-face { font-family: 'Univers UltraCondensed'; src: url('../fonts/Univers-ThinUltraCondensed.woff2?v=20260926.1') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers UltraCondensed'; src: url('../fonts/Univers-LightUltraCondensed.woff2?v=20260926.1') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Univers UltraCondensed'; src: url('../fonts/Univers-UltraCondensed.woff2?v=20260926.1') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ============================================================================= Variables & Design Token System =============================================================================*/ :root { /* ---- Palette (immutable) ----*/ --cognac: #A26330; --deep-navy: #3c477a; --parchment-cream: #F9F3E5; --alabaster: #F3F3F3; --golden-milk: #ECD9AC; --slate-charcoal: #5E5D5A; --muted-silver: #C4C4C0; --tawny-umber: #987458; --ash-grey: #949693; --imperial-plum: #2e1a47; --oxford-light: #d0dbf6; --green: #8dff7f; /* ---- Typography ----*/ --font-primary: 'Univers', 'Helvetica Neue', Arial, sans-serif; /* ---- Spacing — Semantic Scale (base unit: 4px = 0.25rem) ---*/ --spacing-tiny: 0.125rem; /* 2px*/ --spacing-quark: 0.25rem; /* 4px*/ --spacing-nano: 0.5rem; /* 8px*/ --spacing-xxxs: 0.75rem; /* 12px*/ --spacing-xxs: 1rem; /* 16px*/ --spacing-xs: 1.25rem; /* 20px*/ --spacing-sm: 1.5rem; /* 24px*/ --spacing-md: 2rem; /* 32px*/ --spacing-lg: 2.5rem; /* 40px*/ --spacing-xl: 3rem; /* 48px*/ --spacing-xxl: 4rem; /* 64px*/ --spacing-xxxl: 5rem; /* 80px*/ --spacing-big: 6rem; /* 96px*/ --spacing-huge: 8rem; /* 128px*/ --spacing-enormous: 9.625rem; /* 154px*/ /* ---- Border Radii ----*/ --border-radius-sm: 3px; --border-radius-md: 8px; --border-radius-lg: 12px; /* Sticker geometry -- sharp top corners, rounded bottom*/ --border-radius-sticker: 0 0 6px 6px; /* ---- Shadows ----*/ --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15); --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.2); /* ---- Semantic Color Tokens ---*/ --color-surface-primary: #FFFFFF; --color-surface-secondary: var(--parchment-cream); --color-surface-dark: var(--deep-navy); --color-surface-card: #FFFFFF; --color-surface-header-tint: #F7FAFC; --color-content-primary: var(--slate-charcoal); --color-content-heading: var(--deep-navy); --color-content-on-dark: var(--parchment-cream); --color-content-muted: var(--ash-grey); --color-content-accent: var(--cognac); --color-content-inverse: #FFFFFF; --color-interactive-primary: var(--deep-navy); --color-interactive-hover: var(--cognac); --color-interactive-active: var(--imperial-plum); --color-border-primary: var(--muted-silver); --color-border-accent: var(--cognac); --color-border-on-dark: rgba(247, 238, 218, 0.16); --color-badge-origin: var(--cognac); --color-badge-exclusive: var(--imperial-plum); /* ---- Animation ----*/ --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ---- Override Bootstrap CSS vars for global congruence ----*/ --bs-body-font-family: var(--font-primary); --bs-body-color: var(--color-content-primary); --bs-body-bg: var(--color-surface-secondary); --bs-border-color: var(--color-border-primary); --bs-link-color: var(--color-content-muted); --bs-link-hover-color: var(--cognac); --bs-link-decoration: none; --bs-focus-ring-color: rgba(162, 99, 48, 0.25); --bs-focus-ring-width: 0.125rem; --bs-primary: var(--deep-navy); --bs-primary-rgb: 60, 71, 122; --bs-dark: var(--deep-navy); } /* ============================================================================= Base Styles — Extend Bootstrap's reboot =============================================================================*/ html { height: 100%; overflow-x: hidden; width: 100%; } body { min-height: 100vh; position: relative; background-color: var(--color-surface-secondary); /* Parchment Cream canvas*/ } /* ============================================================================= Typography Hierarchy Override Bootstrap's heading defaults with Univers-specific sizing =============================================================================*/ h1, .h1 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 600; line-height: 1.05; } h2, .h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 600; line-height: 1.10; } h3, .h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 500; line-height: 1.15; } h4, .h4 { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 500; line-height: 1.20; } h5, .h5 { font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 500; line-height: 1.25; } h6, .h6 { font-size: 1rem; font-weight: 500; line-height: 1.30; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--color-content-heading); margin-bottom: var(--spacing-xxs); }