/* ---------- @font-face — self-hosted woff2 (build addition, GDPR: no Google CDN) ---------- */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: optional; src: url('../fonts/archivo-700.woff2') format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: optional; src: url('../fonts/archivo-800.woff2') format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-display: optional; src: url('../fonts/archivo-900.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: optional; src: url('../fonts/manrope-400.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: optional; src: url('../fonts/manrope-500.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: optional; src: url('../fonts/manrope-600.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: optional; src: url('../fonts/manrope-700.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: optional; src: url('../fonts/manrope-800.woff2') format('woff2'); } /* ============================================================ RENGINIO GENAS — DESIGN TOKENS Single source of truth. Every value in main.css references these custom properties. Maps 1:1 to tokens/theme.json. Note on consolidation: near-duplicate values from the mocks were normalized (e.g. text grays 5B5B77/6A6A82 → one token, radii 9/10/11 → 10px). The mapping is documented in docs/02-component-inventory.md. Deltas are ≤2px / ≤ΔE 2. ============================================================ */ :root { /* ---------- COLOR: brand ---------- */ --color-ink: #1B1A3A; /* headings, body text, dark section bg, "dark" buttons */ --color-ink-deep: #15142E; /* footer background */ --color-rent: #EC008C; /* magenta — Rent vertical: accents, primary CTAs, request-list */ --color-rent-dark: #C40076; /* magenta hover */ --color-shop: #3A1ED8; /* indigo — Shop vertical: accents, cart, buy CTAs */ --color-shop-dark: #2C14B0; /* indigo hover */ --color-svc: #14A3E0; /* cyan — Services vertical: accents, service CTAs */ --color-svc-dark: #0F8BC2; /* cyan hover */ --color-svc-bright: #3BB6ED; /* cyan on dark backgrounds (icons, eyebrows) */ /* gradient stops (only used inside --gradient-*) */ --color-indigo-mid: #2A1C8C; --color-purple-mid: #7A14C4; --color-magenta-deep: #A8005F; --color-svc-deep: #0F5C84; --color-svc-ink: #0E2A3A; /* ---------- COLOR: tints (light fills per vertical) ---------- */ --tint-rent-1: #FFF7FB; /* hover wash */ --tint-rent-2: #FFF0F8; /* active row / icon chip */ --tint-rent-3: #FFEAF5; /* icon tile fill */ --tint-rent-border: #FBD6EB; --tint-shop-1: #F7F6FF; /* estimate box fill */ --tint-shop-2: #F2F0FF; /* qty stepper fill / active period */ --tint-shop-3: #ECE9FE; /* icon tile fill */ --tint-shop-border: #D8D4F7; --tint-shop-border-2: #E6E2FB; /* estimate box border */ --tint-svc-1: #F4FAFD; /* sub-nav / process panel fill */ --tint-svc-2: #E3F4FC; /* icon tile fill */ --tint-svc-border: #E2EEF4; --tint-svc-pill-border: #D6E6EE; --tint-lavender: #F4F1FB; /* neutral icon tile (rent categories, empty states) */ /* ---------- COLOR: feedback ---------- */ --color-success: #1B8A4B; --tint-success: #E9F8EF; --tint-success-border: #BFE9CE; --color-danger: #C04646; --tint-danger: #FFF5F5; --tint-danger-border: #F2D0D0; /* ---------- COLOR: text ---------- */ --color-text: #1B1A3A; /* = ink */ --color-text-soft: #4A4A66; /* long-form paragraphs */ --color-text-mute: #6A6A82; /* card descriptions, secondary copy (merged 5B5B77/6A6A82) */ --color-text-faint: #9A9AB0; /* labels, captions, placeholders (merged 8A8AA0/9A9AB0/A8A8BC) */ /* text on dark (ink) backgrounds */ --color-ondark: #FFFFFF; --color-ondark-body: #CFCFF0; /* hero leads (merged C9CBE6) */ --color-ondark-mute: #B9B9DC; /* stats sublabels, breadcrumbs on dark */ --color-ondark-faint: #A8A8CC; /* footer body (merged 9A9AC0/A8A8CC) */ --color-ondark-dim: #7A7A9C; /* footer legal line */ /* text on cyan service-hero gradient */ --color-onsvc-strong: #CFEFFB; /* tagline */ --color-onsvc-body: #B8DEEF; /* intro copy (merged BBE3F2) */ --color-onsvc-mute: #8A98AC; /* contact-section sublabels (with B9C5D6 → ondark-mute) */ /* ---------- COLOR: surfaces & borders ---------- */ --color-bg: #FFFFFF; --color-bg-page: #F7F8FC; /* catalog / shop / item-detail page background */ --color-bg-band: #F5F6FB; /* how-it-works band */ --color-bg-panel: #FBFBFE; /* drawer footers */ --color-bg-chip: #F2F3F8; /* count chips, stepper buttons (merged F7F8FC-on-white) */ --color-border: #E6E7EF; /* cards */ --color-border-soft: #ECEDF3; /* header rule, dividers, drawer rules */ --color-border-input: #E4E5EE; /* inputs, icon buttons, segmented controls */ --color-border-faint: #F0F1F6; /* spec-table row rules */ --color-border-hover: #D9DAE6; /* card border on hover */ --color-border-onink: #3A3A60; /* lang toggle border on utility bar */ /* ---------- GRADIENTS ---------- */ --gradient-hero: linear-gradient(160deg, var(--color-ink) 0%, var(--color-indigo-mid) 55%, var(--color-shop) 100%); --gradient-svc-hero: linear-gradient(160deg, var(--color-svc-ink) 0%, var(--color-svc-deep) 55%, var(--color-svc) 100%); --gradient-cta: linear-gradient(135deg, var(--color-shop) 0%, var(--color-purple-mid) 50%, var(--color-rent) 100%); --gradient-magenta: linear-gradient(135deg, var(--color-rent), var(--color-magenta-deep)); /* ---------- TYPOGRAPHY ---------- */ /* Archivo = display (headings, buttons, prices, numbers). Manrope = body/UI. */ --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --fw-regular: 400; /* body copy */ --fw-medium: 500; /* placeholder / soft UI text */ --fw-semibold: 600; /* emphasized body */ --fw-bold: 700; /* nav, card titles, buttons */ --fw-extrabold: 800; /* section headings, prices, eyebrows */ --fw-black: 900; /* display / hero headings */ /* Heading scale — size / line-height / weight / tracking */ --fs-display-xl: 54px; /* home hero lh 1.03 w900 ls -0.025em */ --fs-display-lg: 48px; /* service hero lh 1.04 w900 ls -0.025em */ --fs-display: 42px; /* catalog/shop titles lh 1.05 w900 ls -0.025em */ --fs-h1: 38px; /* major section titles lh 1.10 w800 ls -0.02em */ --fs-h2: 34px; /* section titles lh 1.12 w800 ls -0.02em */ --fs-h3: 30px; /* product title (PDP) lh 1.10 w900 ls -0.02em */ --fs-h4: 26px; /* sub-sections lh 1.15 w800 ls -0.02em */ --fs-h5: 23px; /* path-card titles lh 1.20 w800 */ --fs-h6: 21px; /* panel titles lh 1.25 w800 */ --fs-title-lg: 19px; /* drawer & tile titles lh 1.20 w800 */ --fs-title: 17px; /* card titles lh 1.30 w700 */ --fs-title-sm: 16px; /* product names lh 1.25 w700 */ --lh-display: 1.05; --lh-heading: 1.12; --lh-snug: 1.25; --lh-base: 1.6; --lh-relaxed: 1.7; --ls-display: -0.025em; --ls-heading: -0.02em; --ls-caps: 0.08em; /* chips, small caps labels */ --ls-caps-wide: 0.14em; /* section eyebrows */ /* Body scale */ --fs-lead-lg: 19px; /* home hero lead */ --fs-lead: 17px; /* page-hero / CTA-band leads */ --fs-body-lg: 16px; /* section intros */ --fs-body: 15px; /* card descriptions, long-form */ --fs-body-sm: 14px; /* dense UI copy, inputs, step descriptions */ --fs-caption: 13px; /* sublabels, breadcrumbs, footer links */ --fs-caption-sm: 12px; /* utility bar, count chips */ --fs-micro: 11px; /* fine print */ --fs-tag: 10.5px; /* uppercase category chips */ /* ---------- SPACING (4px base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; /* default card padding */ --space-8: 32px; /* container gutter */ --space-9: 40px; --space-10: 48px; --space-11: 56px; --space-12: 64px; --space-13: 72px; /* section vertical padding */ --space-14: 80px; --section-pad: var(--space-13); --card-pad: var(--space-7); --container-pad: var(--space-8); /* ---------- LAYOUT ---------- */ --container-max: 1180px; /* content pages: home, service, item detail */ --container-wide: 1180px; /* unified to --container-max: one width site-wide for consistent header/footer alignment (was 1240 for browse pages). Restore 1240 to re-widen catalog/shop grids. */ /* Breakpoints — reference only: custom properties cannot be used inside @media. Keep in sync with main.css and theme.json. --bp-sm 600px small phones ↑ --bp-md 768px tablet ↑ --bp-lg 1024px desktop ↑ --bp-xl 1240px full design width */ /* ---------- RADII ---------- */ --radius-xs: 8px; /* small buttons, mini thumbs (merged 7/8/9) */ --radius-sm: 10px; /* inputs, icon buttons, std buttons (merged 10/11) */ --radius-md: 12px; /* large CTAs, icon tiles, drawer rows (merged 12/13) */ --radius-lg: 14px; /* category tiles, small cards */ --radius-xl: 16px; /* product & content cards */ --radius-2xl: 18px; /* hero media, buy panel, large cards */ --radius-3xl: 24px; /* CTA band, process panel (merged 22/24) */ --radius-pill: 999px; /* chips, pills, badges */ /* ---------- SHADOWS ---------- */ --shadow-panel: 0 10px 40px rgba(27, 26, 58, 0.06); /* resting buy panel */ --shadow-card-hover: 0 14px 34px rgba(27, 26, 58, 0.10); /* product card hover */ --shadow-lift-rent: 0 16px 40px rgba(236, 0, 140, 0.12); /* path card hover (rent) */ --shadow-lift-shop: 0 16px 40px rgba(58, 30, 216, 0.12); /* path card hover (shop) */ --shadow-lift-svc: 0 16px 40px rgba(20, 163, 224, 0.14); /* path/example card hover (svc) */ --shadow-pop: 0 16px 45px rgba(0, 0, 0, 0.26); /* hero search bar, floating cards */ --shadow-drawer: -12px 0 50px rgba(20, 18, 46, 0.22); /* off-canvas drawers */ /* ---------- MOTION ---------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-hover: 180ms; /* card lifts, border/color hovers (mock used .18/.2s) */ --dur-fade: 300ms; /* overlay fade */ --dur-drawer: 320ms; /* drawer slide */ --dur-float: 7s; /* hero orb idle float */ /* ---------- Z-INDEX ---------- */ --z-subnav: 40; --z-header: 50; --z-overlay: 99; --z-drawer: 100; }