/* ============================================================================= THEME — Single source of truth for the entire public site. Edit ONLY this file to restyle the application. Every color, radius, shadow, transition, and typographic weight used in public.css (and partially in the vendor app.css) is declared here. ============================================================================= */ :root { /* ------------------------------------------------------------------------- BRAND COLORS Primary: the dominant blue used for links, buttons, accents. Secondary: the purple used in gradients and highlights. Accent: the orange used for rate-table CTAs. Danger: the red used for hover states and active terms items. --------------------------------------------------------------------------- */ --color-primary: #496cfe; --color-secondary: #9932f5; --color-accent: #f0813d; --color-danger: #c62828; --color-success: #28a745; --color-info: #17a2b8; /* ------------------------------------------------------------------------- PRIMARY TINTS (generated from --color-primary) --------------------------------------------------------------------------- */ --color-primary-hover: #4f46e5; --color-primary-light: rgba(73, 108, 254, 0.08); --color-primary-border: rgba(73, 108, 254, 0.18); --color-primary-border-md: rgba(73, 108, 254, 0.30); --color-primary-focus: rgba(73, 108, 254, 0.12); --color-primary-bg: #e8ecff; --color-primary-surface: #f8f9ff; --color-primary-divider: #dde2ff; /* ------------------------------------------------------------------------- DANGER TINTS (generated from --color-danger) --------------------------------------------------------------------------- */ --color-danger-bg: rgba(198, 40, 40, 0.28); --color-danger-surface: #fff3f3; --color-danger-hover-bg: #fff0f0; --color-danger-muted: #ffcdd2; /* ------------------------------------------------------------------------- TEXT --------------------------------------------------------------------------- */ --color-text: #333; --color-text-dark: #222; --color-text-muted: #888; --color-text-subtle: #555; --color-text-faint: #777; --color-text-placeholder: #727799; --color-text-nav: #3d446f; /* top-bar language dropdown text */ --color-text-white: #fff; /* ------------------------------------------------------------------------- SURFACES & BACKGROUNDS --------------------------------------------------------------------------- */ --color-white: #fff; --color-surface: #f8f9fa; --color-surface-blue: #f8f9ff; --color-surface-dim: #fafafa; --color-surface-hover: #f5f7ff; --color-surface-grad-top: #f0f7ff; /* calendar selected day gradient */ /* ------------------------------------------------------------------------- BORDERS --------------------------------------------------------------------------- */ --color-border: #e0e0e0; --color-border-light: #eee; --color-border-muted: #e8e8e8; --color-border-faint: #e5e5e5; --color-border-dashed: #f0f0f0; --color-border-calendar: #cce5ff; /* ------------------------------------------------------------------------- SPECIAL / ONE-OFF --------------------------------------------------------------------------- */ --color-badge: #f5a623; /* cart item count badge */ --color-rates-header: #c22b76; /* schedule rates table header */ --color-link: #007bff; /* standard Bootstrap link blue */ --color-scrim-start: rgba(0, 0, 0, 0.42); --color-scrim-mid: rgba(0, 0, 0, 0.20); --color-overlay: rgba(0, 0, 0, 0.70); --color-modal-backdrop: rgba(0, 0, 0, 0.50); /* ------------------------------------------------------------------------- GRADIENTS --------------------------------------------------------------------------- */ --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); --gradient-primary-8deg: linear-gradient(8deg, var(--color-secondary) 0%, #4933f1 53%, #4950f8 70%, var(--color-primary) 100%); --gradient-cta: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); --gradient-hero-scrim: linear-gradient(180deg, var(--color-scrim-start) 0%, var(--color-scrim-mid) 55%, transparent 100%); --gradient-day-selected: linear-gradient(180deg, var(--color-surface-grad-top) 0%, var(--color-white) 100%); --gradient-activity-tag: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-monument-tag: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --gradient-image-overlay: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.60) 50%, transparent 100%); --gradient-placeholder: linear-gradient(135deg, rgba(73,108,254,0.13), rgba(153,50,245,0.13)); /* ------------------------------------------------------------------------- TYPOGRAPHY --------------------------------------------------------------------------- */ --font-family-base: 'Poppins', 'Lato', sans-serif; --font-size-2xs: 9px; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 13px; --font-size-md: 14px; --font-size-lg: 15px; --font-size-xl: 16px; --font-size-2xl: 17px; --font-size-3xl: 18px; --font-size-4xl: 20px; --font-size-5xl: 22px; --font-size-6xl: 24px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semi: 600; --font-weight-bold: 700; --font-weight-black: 800; --line-height-tight: 1.2; --line-height-snug: 1.3; --line-height-base: 1.5; --line-height-relaxed: 1.8; /* ------------------------------------------------------------------------- BORDER RADIUS --------------------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 30px; --radius-pill: 20px; --radius-full: 999px; --radius-circle: 50%; /* ------------------------------------------------------------------------- SHADOWS --------------------------------------------------------------------------- */ --shadow-xs: 0 2px 8px rgba(73, 108, 254, 0.08); --shadow-sm: 0 2px 10px rgba(73, 108, 254, 0.08); --shadow-md: 0 4px 12px rgba(0, 123, 255, 0.15); --shadow-lg: 0 5px 20px rgba(0, 0, 0, 0.10); --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.20); --shadow-2xl: 0 12px 40px rgba(0, 0, 0, 0.25); --shadow-hero: 0 6px 18px rgba(17, 38, 117, 0.20); --shadow-map: 0 2px 10px rgba(0, 0, 0, 0.10); --shadow-tag: 0 4px 8px rgba(0, 0, 0, 0.20); --shadow-badge: 0 0 0 4px rgba(73, 108, 254, 0.24); /* ------------------------------------------------------------------------- TRANSITIONS --------------------------------------------------------------------------- */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; --transition-xslow: 0.4s ease; --transition-hero-bg: 7s ease; /* ------------------------------------------------------------------------- SIZES / DIMENSIONS --------------------------------------------------------------------------- */ --header-tools-gap: 18px; --header-tools-gap-mob: 14px; --cart-badge-size: 18px; --account-name-max-width: 140px; --hero-scrim-height: 150px; --hero-scrim-height-mob: 110px; --pax-img-width: 80px; --pax-img-height: 60px; --pax-stepper-btn-size: 38px; --pax-stepper-val-width: 48px; --price-total-font: 22px; /* ------------------------------------------------------------------------- Z-INDEX --------------------------------------------------------------------------- */ --z-dropdown: 1000; --z-header-sub: 1100; --z-header-top: 1101; --z-modal: 3000; /* ------------------------------------------------------------------------- VENDOR THEME OVERRIDES These map our tokens to the template's own variable names so that any utility classes in app.css (.primary-color, .primary-color-bg, etc.) automatically follow the brand colors above. --------------------------------------------------------------------------- */ --Primary__color: var(--color-primary); --Secondary__color: var(--color-secondary); }