/* ========================================================================== MegaPets 2.0 — Design System File: assets/css/design-system.css Responsibility: - Global design tokens - Shared colors - Shared typography - Shared borders and radii - Shared premium arrows - Shared decorative lines - Shared shadows - Shared motion settings - Shared layout dimensions - Shared cross-component layering Important: - This file contains variables only. - Component styles do not belong here. - Add a new token only when it is genuinely shared across components or required as a stable global design value. - All MegaPets components should use these tokens instead of duplicating global colors, fonts, radii, shadows or layout dimensions. ========================================================================== */ :root { /* ====================================================================== COLORS ====================================================================== */ /* Page and surfaces */ --mp-color-page: #fbfbfb; --mp-color-surface: #ffffff; /* WARM BEIGE — main global MegaPets brand background. */ --mp-global-color-background-brand: #efe5d7; --mp-color-background-soft: #f4ece2; --mp-color-cream: #f7efe2; /* * Shared warm highlight for interactive navigation-list rows. * * Colors: * - SOFT WARM BEIGE (#f4ece2): primary luminous highlight surface; * - WARM BEIGE (#efe5d7): main MegaPets brand depth; * - TRANSPARENT: trailing fade into the parent background. * * Use for hovered, focused, active or expanded navigation rows. * Do not use for product offers, cart rows or ordinary content lists. */ --mp-navigation-list-highlight-background: linear-gradient( 90deg, rgba(244, 236, 226, 0.92), rgba(244, 236, 226, 0.98) 22%, rgba(244, 236, 226, 1) 46%, rgba(239, 229, 215, 0.96) 72%, rgba(244, 236, 226, 0.45) 92%, rgba(244, 236, 226, 0) ); /* * Shared centered warm highlight for navigation labels and compact headings. * * Colors: * - SOFT WARM BEIGE (#f4ece2): wide luminous center and soft side fade; * - WARM BEIGE (#efe5d7): parent brand background revealed at both edges; * - TRANSPARENT: balanced fade into the parent background at both edges. * * Uses the same MegaPets beige pair as * --mp-navigation-list-highlight-background, but with centered symmetry. * The solid center stays wide before the soft side fades begin. * Use for centered navigation group names, section titles and headings. * Do not use for active list rows, product offers or ordinary content lists. */ --mp-navigation-centered-title-background: linear-gradient( 90deg, rgba(244, 236, 226, 0), rgba(244, 236, 226, 0.26) 12%, rgba(244, 236, 226, 0.56) 22%, rgba(244, 236, 226, 0.86) 30%, rgba(244, 236, 226, 1) 34%, rgba(244, 236, 226, 1) 66%, rgba(244, 236, 226, 0.86) 70%, rgba(244, 236, 226, 0.56) 78%, rgba(244, 236, 226, 0.26) 88%, rgba(244, 236, 226, 0) ); /* * Shared subtle surface for compact navigation tiles. * * Colors: * - WHITE: delicate 12% to 8% light overlay; * - WARM BEIGE (#efe5d7): parent brand background visible underneath. * * Use for default icon-and-label navigation tiles such as Atlas and Gallery. * Active tiles continue to use --mp-color-background-soft. * Do not use for product offers, cart rows or ordinary content cards. */ --mp-navigation-tile-background: linear-gradient( 135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08) ); /* Text */ --mp-color-grey: #5b544d; /* Shared near-black for all primary dark MegaPets elements. */ --mp-color-dark: #2a221b; /* Warm editorial text: descriptions, quotations and sales details. */ --mp-color-brown-chocolate: #6b5643; /* Brand gold */ --mp-color-gold: #c79a57; --mp-color-gold-dark: #b8833e; /* Secondary transition tone for gradients, visual volume and light highlights. */ --mp-color-gold-light: #d7ac69; /* * Primary premium action palette: * - add-to-cart controls; * - cart-state actions; * - shared branded buttons and icons. */ --mp-color-action-primary: #b66d06; --mp-color-action-primary-light: #d2a056; --mp-color-action-primary-mid: #b8833e; --mp-color-action-primary-dark: #a56d24; --mp-color-action-primary-hover-light: #cc964c; --mp-color-action-primary-hover-mid: #b07a36; --mp-color-action-primary-hover-dark: #985f20; --mp-color-action-primary-active-light: #c88b3a; --mp-color-action-primary-active-mid: #a66f2f; --mp-color-action-primary-active-dark: #8f581b; --mp-color-action-primary-alpha-24: rgba(182, 109, 6, 0.24); --mp-color-action-primary-alpha-26: rgba(182, 109, 6, 0.26); --mp-color-action-primary-alpha-32: rgba(182, 109, 6, 0.32); --mp-color-action-primary-alpha-65: rgba(182, 109, 6, 0.65); --mp-action-primary-background: linear-gradient( 135deg, var(--mp-color-action-primary-light) 0%, var(--mp-color-action-primary-mid) 55%, var(--mp-color-action-primary-dark) 100% ); --mp-action-primary-background-hover: linear-gradient( 135deg, var(--mp-color-action-primary-hover-light) 0%, var(--mp-color-action-primary-hover-mid) 55%, var(--mp-color-action-primary-hover-dark) 100% ); --mp-action-primary-background-active: linear-gradient( 135deg, var(--mp-color-action-primary-active-light) 0%, var(--mp-color-action-primary-active-mid) 55%, var(--mp-color-action-primary-active-dark) 100% ); /* * ACTION SOFT — GOLD * * Soft branded action palette: * - lightweight secondary actions; * - compact branded icons; * - surfaces that need a gentler hierarchy than purchase actions. */ --mp-action-soft-background: linear-gradient( 135deg, var(--mp-color-gold) 0%, var(--mp-color-gold-light) 48%, var(--mp-color-gold-dark) 100% ); --mp-action-soft-background-hover: linear-gradient( 135deg, var(--mp-color-gold-dark) 0%, var(--mp-color-gold) 48%, var(--mp-color-action-primary-dark) 100% ); --mp-action-soft-background-active: linear-gradient( 135deg, var(--mp-color-action-primary-dark) 0%, var(--mp-color-gold-dark) 48%, var(--mp-color-action-primary-active-dark) 100% ); /* * ACTION QUIET — BEIGE * * Quiet content action palette: * - informational and editorial transitions; * - low-emphasis links inside content panels; * - soft beige at rest, cream on hover and deeper warm beige when pressed; * - chocolate text remains stable across every interaction state. */ --mp-action-quiet-background: var(--mp-color-background-soft); --mp-action-quiet-background-hover: var(--mp-color-cream); --mp-action-quiet-background-active: var(--mp-global-color-background-brand); --mp-action-quiet-color: var(--mp-color-brown-chocolate); --mp-action-quiet-color-active: var(--mp-action-quiet-color); /* * MINI CONTROL — MENU * * Primary circular trigger for the global Mobile Header navigation. * * Colors: * - WHITE: delicate 14% light surface; * - WARM BEIGE (#efe5d7): stable 86% brand base; * - GOLD (#c79a57): resting contour and icon; * - DARK GOLD (#b8833e): pressed and open state. * * Use for the Mobile Header hamburger and equivalent primary menu * triggers only. Do not use for local catalog actions or purchase buttons. */ --mp-mini-control-menu-background: color-mix( in srgb, var(--mp-color-surface) 14%, var(--mp-global-color-background-brand) 86% ); --mp-mini-control-menu-border-color: color-mix( in srgb, var(--mp-color-gold) 45%, var(--mp-mini-control-menu-background) 55% ); --mp-mini-control-menu-border-color-active: color-mix( in srgb, var(--mp-color-gold-dark) 48%, var(--mp-mini-control-menu-background) 52% ); --mp-mini-control-menu-icon-color: var(--mp-color-gold); --mp-mini-control-menu-icon-color-active: var(--mp-color-gold-dark); --mp-mini-control-menu-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* * MINI CONTROL — SECONDARY * * Compact rounded-rectangle actions in local interfaces. * * Resting controls stay WHITE. Active, open or travelling controls use * the approved MENU surface. Contour, icon and shadow follow the same * gold hierarchy as the Mobile Header hamburger. * * Approved uses: * - Mini Catalog pin; * - Astra scroll-to-top beside the Mini Catalog. * - Mobile Mini Catalog offer carts and navigation arrows, while their * context-dependent backgrounds remain owned by the offer state. */ --mp-mini-control-secondary-background: var(--mp-color-surface); --mp-mini-control-secondary-background-active: var(--mp-mini-control-menu-background); --mp-mini-control-secondary-border-color: var(--mp-mini-control-menu-border-color); --mp-mini-control-secondary-border-color-active: var(--mp-mini-control-menu-border-color-active); --mp-mini-control-secondary-icon-color: var(--mp-mini-control-menu-icon-color); --mp-mini-control-secondary-icon-color-active: var(--mp-mini-control-menu-icon-color-active); --mp-mini-control-secondary-shadow: var(--mp-mini-control-menu-shadow); /* Borders */ /* * Transparent border: * - soft component contours; * - overlays; * - surfaces where the background should remain visible. * * Solid border: * - Astra settings; * - SVG; * - opaque controls; * - places where a HEX value is required. */ --mp-color-border: rgba(199, 154, 87, 0.58); /* Resting contours and their darker interactive state. */ --mp-color-border-subtle: rgba(199, 154, 87, 0.24); --mp-color-border-interactive: rgba(184, 131, 62, 0.48); --mp-color-border-solid: #d8c09c; /* ====================================================================== TYPOGRAPHY ====================================================================== */ --mp-font-body: "Manrope", Arial, sans-serif; --mp-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif; --mp-font-accent: "Source Serif 4", Georgia, "Times New Roman", serif; --mp-font-weight-regular: 400; --mp-font-weight-medium: 500; --mp-font-weight-semibold: 600; --mp-font-weight-bold: 700; /* Shared compact heading size: Trust Line and desktop mini catalog. */ --mp-compact-heading-font-size: 9.5px; /* Shared editorial quote size: product cards and mini catalog. */ --mp-quote-font-size: 12px; /* * Shared premium italic label: * - mobile language names; * - compact branded headings; * - future editorial navigation labels. * * Line height and color remain component-specific because they depend * on the local control geometry and interaction hierarchy. */ --mp-premium-italic-font-family: var(--mp-font-heading); --mp-premium-italic-font-size: 13px; --mp-premium-italic-font-weight: var(--mp-font-weight-bold); --mp-premium-italic-font-style: italic; --mp-premium-italic-letter-spacing: 0.04em; /* ====================================================================== SPACING ====================================================================== */ /* * A global spacing scale will be introduced only after repeated spacing * values are confirmed across the real Header, Catalog, Product Card * and Trust Center layouts. */ /* ====================================================================== BORDERS & RADIUS ====================================================================== */ --mp-border-width: 1px; /* ====================================================================== РАДИУСЫ РАМОК MEGAPETS ====================================================================== */ /* * MegaPets uses a restrained, slightly sharper rounded contour. * * IMPORTANT: * - Component CSS should use only the radius tokens defined below. * - Do not introduce arbitrary local border-radius values. * - If unsure which radius to use, choose --mp-radius. * - Use a larger radius only when the real size and purpose of the * element genuinely require a softer contour. * * If none of the approved radius tokens produces the correct visual * result, do not immediately add a local value. * * First test the existing scale in the real component. * A new global radius token may be proposed only when: * - the existing tokens are demonstrably unsuitable; * - the new value is expected to be reused by multiple components; * - the new value preserves the visual MegaPets radius family. * * Usage: * - small: compact controls, small image frames and small UI elements; * - default: product cards, Trust Center, header controls, fields * and common panels; * - large: popups, dialogs, larger dropdowns, expanded panels * and large surfaces; * - pill: circular controls, badges, chips and fully rounded buttons. */ --mp-radius-small: 4px; --mp-radius: 8px; --mp-radius-large: 12px; --mp-radius-pill: 999px; /* ====================================================================== PREMIUM ARROWS ====================================================================== */ /* * Shared MegaPets navigation arrow. * * IMPORTANT: * - The design system defines the approved shape, visual weight, * color behavior and standard movement. * - The arrow inherits the current color from its trigger or component. * - The shared utility controls direction and interaction states. * - Components control color, size, spacing and placement. * - Other arrow types receive separate tokens only after approval. */ --mp-premium-arrow-standard-symbol: "›"; --mp-premium-arrow-standard-font-family: var(--mp-font-heading); --mp-premium-arrow-standard-font-weight: 300; --mp-premium-arrow-standard-optical-offset-y: -0.075em; --mp-premium-arrow-standard-opacity: 0.76; --mp-premium-arrow-standard-motion-distance: 4px; --mp-premium-arrow-standard-motion-duration: 0.25s; --mp-premium-arrow-standard-motion-easing: ease; /* ====================================================================== CAROUSEL MEDIA DOTS INDICATORS ====================================================================== */ /* * Shared indicators for carousels and media galleries. * * IMPORTANT: * - Components control placement, outer spacing and visibility. * - The design system controls indicator size, spacing and colors. * - Image indicators use a circle. * - Video indicators use a triangle with the same state colors. */ --mp-carousel-media-dots-indicators-size: 7px; --mp-carousel-media-dots-indicators-gap: 7px; --mp-carousel-media-dots-indicators-control-width: 20px; --mp-carousel-media-dots-indicators-control-height: 18px; --mp-carousel-media-dots-indicators-color: rgba(184, 131, 62, 0.28); --mp-carousel-media-dots-indicators-hover-color: rgba(184, 131, 62, 0.58); --mp-carousel-media-dots-indicators-active-color: var(--mp-color-gold-dark); --mp-carousel-media-dots-indicators-video-height: 4.5px; --mp-carousel-media-dots-indicators-video-width: 7.5px; /* ====================================================================== STANDARD SEPARATOR LINES ====================================================================== */ /* * Continuous structural separators used between adjacent content groups. * * IMPORTANT: * - Standard separators remain solid and do not fade. * - They are structural, not decorative elements. * - Components control line length, spacing and placement. */ --mp-standard-separator-line-color: rgba(199, 154, 87, 0.16); --mp-standard-separator-line-thickness: 1px; /* ====================================================================== ДЕКОРАТИВНЫЕ ЛИНИИ MEGAPETS ====================================================================== */ /* * MegaPets uses three shared decorative line families. * * DECORATIVE TITLE LINES: * - frame a logo, title, heading or short message; * - remain clearly visible next to the text or logo; * - fade only toward the outer edge; * - use separate left and right gradient tokens. * * DECORATIVE DIVIDER LINES: * - separate sections or content groups; * - fade smoothly at both ends; * - remain strongest around the center. * * DECORATIVE NAVIGATION LINES: * - separate interactive navigation rows; * - remain strongest at the leading edge; * - fade smoothly toward the trailing edge; * - use strength variants only after a repeated hierarchy is approved. * * IMPORTANT: * - All decorative line families use approved global MegaPets gold. * - All decorative line families use one approved global height token. * - The design system defines the visual character of the lines. * - Each component controls its own line length and spacing. * - Do not add local decorative gradients when one of these shared * decorative line families already matches the required purpose. */ /* Shared color and thickness for all MegaPets decorative lines */ --mp-color-decorative-line: rgba(199, 154, 87, 0.48); --mp-decorative-line-height: 1px; /* * Decorative title lines: * clear next to the text or logo and soft only toward the outer edge. */ --mp-decorative-title-line-left: linear-gradient( 90deg, transparent 0%, var(--mp-color-decorative-line) 58%, var(--mp-color-decorative-line) 100% ); --mp-decorative-title-line-right: linear-gradient( 90deg, var(--mp-color-decorative-line) 0%, var(--mp-color-decorative-line) 42%, transparent 100% ); /* * Decorative divider line: * soft at both ends and strongest around the center. */ --mp-decorative-divider-line: linear-gradient( 90deg, transparent 0%, color-mix( in srgb, var(--mp-color-decorative-line) 50%, transparent ) 20%, var(--mp-color-decorative-line) 50%, color-mix( in srgb, var(--mp-color-decorative-line) 50%, transparent ) 80%, transparent 100% ); /* * Light-gold decorative navigation line: * soft separator for secondary mobile navigation items. * * LIGHT-GOLD describes the lighter visual density, not a new gold hue. * The line uses the approved global MegaPets gold and fades to the right. */ --mp-decorative-navigation-line-right-light-gold: linear-gradient( 90deg, color-mix( in srgb, var(--mp-color-gold) 42%, transparent ), color-mix( in srgb, var(--mp-color-gold) 20%, transparent ) 42%, transparent 100% ); /* * Dark-gold decorative navigation line: * strong separator for primary mobile navigation hierarchy. * * DARK-GOLD describes the stronger visual density, not a new gold hue. * The line uses the approved global MegaPets gold and fades to the right. */ --mp-decorative-navigation-line-right-dark-gold: linear-gradient( 90deg, color-mix( in srgb, var(--mp-color-gold) 66%, transparent ), color-mix( in srgb, var(--mp-color-gold) 40%, transparent ) 38%, transparent 100% ); /* ====================================================================== SHADOWS ====================================================================== */ --mp-shadow: 0 8px 24px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.04); /* ====================================================================== SCROLLBARS ====================================================================== */ /* * Shared restrained scrollbar used by compact, independently scrollable * MegaPets regions. The track stays transparent and the thumb keeps one * calm colour through hover, keyboard focus and active states. */ --mp-scrollbar-size: 7px; --mp-scrollbar-track-color: transparent; --mp-scrollbar-thumb-color: rgb(199 154 87 / 42%); --mp-scrollbar-thumb-hover-color: rgb(199 154 87 / 42%); --mp-scrollbar-thumb-active-color: rgb(199 154 87 / 42%); /* ====================================================================== TRANSITIONS & ANIMATIONS ====================================================================== */ --mp-duration-fast: 0.18s; --mp-duration-normal: 0.30s; --mp-duration-slow: 0.42s; --mp-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ====================================================================== LAYOUT ====================================================================== */ --mp-container-width: 1760px; --mp-container-narrow-width: 750px; /* * Fixed Site Header clearances. * * Desktop includes the initial 18px top position, the complete Header * height and its outer border. Mobile preserves the approved compact * Header clearance. The Header component applies these values globally * so individual pages never compensate for the fixed Header themselves. */ --mp-site-header-clearance-desktop: 223px; --mp-site-header-clearance-mobile: 126px; /* * Desktop sticky elements sit below the collapsed fixed Header: * 8px top position + 60px Header box + 12px visual gap. */ --mp-site-header-sticky-offset-desktop: 80px; /* * The Site Header may use its own local maximum width. * It is intentionally allowed to be slightly wider than the main * content container. */ /* ====================================================================== BREAKPOINTS ====================================================================== */ /* * Breakpoints are not stored as CSS custom properties because custom * properties cannot be used directly inside @media conditions. * * Shared breakpoint rules will be documented only after the responsive * layouts of Header and Catalog are fully approved. */ /* ====================================================================== Z-INDEX ====================================================================== */ /* * Only cross-component layers belong here. * Internal layers inside a component remain local to that component. */ --mp-z-header: 99999; }