:root { /* Hostrend Design System — Global Colors */ --color-primary: var(--color-blue-600); --color-dark: var(--color-neutral-900); --color-white: #FFFFFF; --color-black: #000000; --color-background: var(--color-neutral-50); --color-border: var(--color-neutral-200); --color-secondary-text: var(--color-neutral-500); /* * Hostrend Design System — Extended Color System * * Source of truth for brand, neutral, semantic, interaction, surface, * and gradient colors. Components should consume semantic tokens instead * of hard-coding HEX values. */ /* Primary blue scale */ --color-blue-900: #1200B8; --color-blue-800: #1712D9; --color-blue-700: #2520D9; --color-blue-600: #2119FF; --color-blue-500: #3933FF; --color-blue-400: #5A55FF; --color-blue-300: #8581FF; --color-blue-200: #B6B3FF; --color-blue-100: #DDDCFF; --color-blue-50: #F0F0FF; /* Brand accent colors */ --color-cyan-600: #06B6D4; --color-cyan-500: #22D3EE; --color-cyan-200: #A5F3FC; --color-cyan-50: #ECFEFF; --color-indigo-600: #4F46E5; --color-indigo-400: #818CF8; --color-indigo-200: #C7D2FE; --color-indigo-50: #EEF2FF; --color-violet-600: #7C3AED; --color-violet-400: #A78BFA; --color-violet-200: #DDD6FE; --color-violet-50: #F3E8FF; /* Warm neutral accent used by the Free Website Design process label. */ --color-beige-50: #F7F1E7; /* Neutral scale */ --color-neutral-950: #0B1220; --color-neutral-900: #131B24; --color-neutral-800: #1E2938; --color-neutral-700: #334155; --color-neutral-600: #475569; --color-neutral-500: #64748B; --color-neutral-400: #94A3B8; --color-neutral-300: #CBD5E1; --color-neutral-200: #E2E8F0; --color-neutral-100: #F1F5F9; --color-neutral-50: #F8FAFC; /* Semantic states */ --color-success: #16A34A; --color-success-dark: #15803D; --color-success-soft: #DCFCE7; --color-warning: #F59E0B; --color-warning-dark: #B45309; --color-warning-soft: #FEF3C7; --color-error: #DC2626; --color-error-dark: #B91C1C; --color-error-soft: #FEE2E2; --color-info: #0284C7; --color-info-dark: #0369A1; --color-info-soft: #E0F2FE; /* Interaction states */ --color-primary-hover: #1712D9; --color-primary-active: #120DB8; --color-hover-surface: #F0F0FF; --navigation-item-radius: var(--radius-lg); --navigation-item-min-height: 34px; --navigation-item-padding-inline: 6px; /* Header layout tokens */ --header-height-desktop: 80px; --header-height-tablet: 64px; --header-height-mobile: 64px; --header-top-gap: 3px; --header-padding-desktop: 40px; /* Desktop header content stops at this maximum width while the header background remains full-bleed. */ --header-content-max-width: 1440px; --header-padding-tablet: 16px; --header-padding-mobile: 16px; --header-logo-height-desktop: 32px; --header-logo-height-mobile: 26px; --header-mobile-menu-size: 32px; --header-mobile-icon-size: 20px; --header-brand-control-gap: 0px; --header-mobile-action-height: 30px; --header-mobile-action-padding: 10px; --header-mobile-action-font-size: var(--font-button-xs); /* Guest authentication buttons in the desktop header touch as a single compact group. */ --header-auth-actions-gap: 8px; /* Header auth controls on saturated/transparent hero surfaces. */ --header-auth-signup-top-bg: rgba(255,255,255,.06); --header-auth-signup-top-border: rgba(255,255,255,.35); --header-auth-signup-top-hover-bg: var(--navigation-hover-surface-on-dark); --header-auth-signup-top-hover-border: var(--navigation-hover-border-on-dark); --header-auth-signup-top-blur: var(--navigation-hover-blur); --header-auth-login-top-bg: rgba(255,255,255,.55); --header-auth-login-top-hover-bg: var(--color-white); --header-auth-login-top-border: rgba(255,255,255,.72); --header-auth-login-top-hover-border: var(--color-white); --header-auth-login-top-text: var(--color-dark); --header-auth-transition: var(--navigation-hover-indicator-transition); /* Navigation item interaction surfaces: subtle glass, never opaque white. */ --navigation-hover-surface-on-dark: rgba(255,255,255,.10); --navigation-hover-border-on-dark: rgba(255,255,255,.18); --navigation-hover-surface-on-light: color-mix(in srgb, var(--color-primary) 8%, transparent); --navigation-hover-border-on-light: color-mix(in srgb, var(--color-primary) 18%, transparent); --navigation-hover-blur: 8px; --navigation-hover-indicator-transition: var(--motion-normal) var(--ease-standard); --navigation-fit-buffer: 24px; --navigation-mobile-breakpoint: 767px; /* Compact header lower bound matching the supplied Canva tablet state. */ --navigation-compact-max-width: 1023px; --navigation-active-surface-on-dark: rgba(255,255,255,.12); /* Mega-menu glass surface: translucent, blurred, and intentionally not opaque white. */ --navigation-mega-surface: rgba(255,255,255,.80); --navigation-mega-surface-on-solid: rgba(255,255,255,.90); --navigation-mega-border: rgba(255,255,255,.58); --border-glass: rgba(255,255,255,.58); --navigation-mega-blur: 22px; --navigation-mega-saturate: 125%; --navigation-mega-shadow: 0 16px 48px rgba(16,24,40,.14), 0 4px 16px rgba(16,24,40,.08); /* Reusable premium light frosted-glass recipe for Hero trust/stat panels. */ --hero-stats-glass-surface: rgba(255,255,255,.08); --hero-stats-glass-surface-strong: rgba(255,255,255,.10); --hero-stats-glass-border: rgba(255,255,255,.25); --hero-stats-glass-blur: 14px; --hero-stats-glass-saturate: 115%; --hero-stats-glass-shadow: 0 10px 30px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.14); --hero-stats-glass-fallback: rgba(255,255,255,.06); --hero-stats-glass-surface-3d: rgba(255,255,255,.08); --hero-stats-glass-surface-3d-strong: rgba(255,255,255,.10); --hero-stats-glass-highlight: rgba(255,255,255,.18); --hero-stats-glass-sheen: rgba(255,255,255,.08); --hero-stats-glass-depth-shadow: 0 10px 30px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.14); /* Clean Hero stats surface — no glass, no blur, only a subtle brand outline. */ --hero-stats-surface-clean: var(--color-white); --hero-stats-border-clean: color-mix(in srgb, var(--color-primary) 22%, transparent); --hero-stats-shadow-clean: none; --hero-stats-number-clean: var(--color-primary); --hero-stats-label-clean: var(--color-dark); --hero-stats-divider-clean: color-mix(in srgb, var(--color-primary) 12%, transparent); --hero-stats-spacing-y: var(--space-16); --hero-stats-spacing-x: var(--space-24); --hero-stats-spacing-y-tablet: var(--space-12); --hero-stats-spacing-x-tablet: var(--space-16); --hero-stats-spacing-y-mobile: var(--space-8); --hero-stats-spacing-x-mobile: var(--space-8); /* HOSTREND GLOBAL MEGA MENU COMPONENT — v1.0 * Desktop sizing is content-aware; tablet/mobile behavior follows the * supplied Canva-style drawer/subpanel reference. Components consume these * tokens instead of introducing one-off visual values. */ --navigation-list-gap: var(--space-4); --mega-menu-offset-y: 10px; --mega-menu-viewport-edge: var(--space-16); --mega-menu-z-index: 1225; --mega-menu-backdrop-z-index: 1210; --mega-menu-backdrop-blur: 8px; --mega-menu-backdrop-saturate: 110%; --mega-menu-backdrop-surface: rgba(255,255,255,.08); --mega-menu-backdrop-transition: 140ms; --mega-menu-min-width: 240px; --mega-menu-column-min-width: 236px; --mega-menu-max-width: calc(100vw - (var(--mega-menu-viewport-edge) * 2)); --mega-menu-padding: 4px; --mega-menu-radius: var(--radius-2xl); /* Free Website Design header: intentionally white in every theme mode. */ --free-website-design-header-surface: var(--color-white); --free-website-design-header-text: var(--color-neutral-500); --free-website-design-header-active-text: var(--color-black); --free-website-design-header-icon-color: var(--color-neutral-900); --free-website-design-header-glass-hover: linear-gradient(135deg, rgba(33,25,255,.085) 0%, rgba(33,25,255,.035) 100%); --free-website-design-header-surface-hover: color-mix(in srgb, var(--color-primary) 7%, #FFFFFF); --free-website-design-header-theme-popup-shadow: 0 8px 22px rgba(19,27,36,.10); --free-website-design-mega-menu-radius: 10px; --free-website-design-mega-menu-padding-block: 12px; --free-website-design-mega-menu-padding-inline: 14px; --mega-menu-border-width: 1px; --mega-menu-border: var(--border-glass); --mega-menu-divider-width: 1px; --mega-menu-divider: #E7EBF2; --mega-menu-surface: var(--color-white); --mega-menu-blur: 18px; --mega-menu-saturate: 120%; --mega-menu-shadow: var(--shadow-overlay); --mega-menu-enter-offset: 8px; --mega-menu-enter-scale: var(--motion-enter-scale); --mega-menu-transition-duration: var(--motion-medium); --mega-menu-item-transition-duration: var(--motion-slow); --mega-menu-item-stagger-step: 50ms; --mega-menu-transition-ease: var(--ease-enter); --mega-menu-column-padding-block: 20px; --mega-menu-column-padding-inline: 24px; --mega-menu-column-first-padding: 24px; --mega-menu-heading-gap: 8px; --mega-menu-heading-color: var(--color-secondary-text); --mega-menu-heading-size: 12.5px; --mega-menu-heading-weight: var(--font-weight-medium); --mega-menu-heading-line: var(--line-small); --mega-menu-group-gap: 18px; --mega-menu-item-padding-block: 0; --mega-menu-item-padding-inline: 10px; --mega-menu-item-height: 40px; --mega-menu-item-gap: 6px; --mega-menu-item-radius: 8px; --mega-menu-item-color: var(--color-dark); --mega-menu-item-hover-color: var(--color-white); --mega-menu-item-hover-surface: var(--color-primary); --mega-menu-item-hover-shadow: inset 0 0 0 1px rgba(33,25,255,.18), 0 4px 12px rgba(33,25,255,.14); --mega-menu-item-size: 13.5px; --mega-menu-item-weight: var(--font-weight-medium); --mega-menu-item-line: 1.45; --mega-menu-description-gap: var(--space-4); --mega-menu-description-color: var(--color-secondary-text); --mega-menu-description-size: var(--font-label); --mega-menu-description-line: var(--line-caption); --mega-menu-promo-gap: var(--space-8); --mega-menu-promo-padding: var(--space-24); --mega-menu-promo-radius: var(--radius-xl); --mega-menu-promo-surface: var(--color-primary); --mega-menu-promo-badge-gap: var(--space-8); --mega-menu-promo-badge-padding-block: var(--space-4); --mega-menu-promo-badge-padding-inline: var(--space-8); --mega-menu-promo-badge-border-width: var(--border-width-subtle); --mega-menu-promo-badge-border: rgba(255,255,255,.24); --mega-menu-promo-badge-surface: rgba(255,255,255,.10); --mega-menu-promo-badge-size: var(--font-label); --mega-menu-promo-badge-tracking: .05em; --mega-menu-promo-title-gap: var(--space-8); --mega-menu-promo-title-size: var(--font-h5); --mega-menu-promo-title-weight: var(--font-weight-medium); --mega-menu-promo-title-line: var(--line-h5); --mega-menu-promo-copy-gap: var(--space-16); --mega-menu-promo-copy-color: rgba(255,255,255,.82); --mega-menu-promo-copy-size: var(--font-small-body); --mega-menu-promo-copy-line: var(--line-small); /* Tablet/mobile drawer and subpanel */ --mega-menu-mobile-drawer-z-index: 1302; /* V42 compact drawer alignment/sizing tokens. */ --mega-menu-tablet-auth-side-padding: 8px; --mega-menu-tablet-drawer-top: var(--header-height-tablet); --mega-menu-tablet-auth-bottom-padding: 8px; --mega-menu-tablet-auth-gap: 6px; /* Tablet shell: Canva-style compact left navigation drawer. */ --mega-menu-tablet-drawer-width: min(360px, 55vw); --mega-menu-tablet-backdrop-blur: 4px; --mega-menu-tablet-auth-button-height: var(--button-height-sm); --mega-menu-tablet-auth-padding: 12px; --mega-menu-tablet-auth-gap: 6px; --mega-menu-tablet-nav-item-radius: 0; --header-tablet-menu-icon-size: 24px; --header-tablet-menu-hover-duration: 100ms; --header-tablet-menu-opacity-duration: 150ms; --header-tablet-menu-press-duration: 70ms; --header-tablet-menu-button-size: 32px; --header-tablet-menu-icon-size: 24px; --header-tablet-menu-hover-surface: rgba(33,25,255,.08); --header-tablet-menu-hover-border: rgba(33,25,255,.14); --header-tablet-menu-active-transform: scale(.95); --header-tablet-menu-press-surface: rgba(33,25,255,.14); --header-tablet-menu-press-border: rgba(33,25,255,.24); --header-tablet-menu-press-icon-scale: .90; --header-tablet-drawer-transition-duration: 280ms; --header-tablet-drawer-transition-ease: cubic-bezier(.22,1,.36,1); --header-tablet-panel-transition-duration: 260ms; --header-tablet-panel-transition-ease: cubic-bezier(.22,1,.36,1); --header-tablet-panel-item-duration: 320ms; --header-tablet-panel-item-stagger: 28ms; --header-tablet-panel-item-ease: cubic-bezier(.22,1,.36,1); --header-tablet-panel-item-offset: -8px; --mega-menu-tablet-title-size-refined: 20px; --mega-menu-tablet-title-margin-bottom-refined: 20px; --mega-menu-tablet-group-margin-top-refined: 14px; --mega-menu-tablet-group-margin-bottom-refined: 8px; --mega-menu-tablet-group-size-refined: 13px; --mega-menu-tablet-link-height-refined: 42px; --mega-menu-tablet-link-size-refined: 15px; --mega-menu-tablet-title-color: var(--color-dark); --mega-menu-tablet-title-weight: var(--font-weight-medium); --mega-menu-tablet-group-color: var(--color-secondary-text); --mega-menu-tablet-group-weight: var(--font-weight-regular); --mega-menu-tablet-link-color: var(--color-dark); --mega-menu-tablet-link-weight: var(--font-weight-regular); --mega-menu-tablet-submenu-close-hidden: 1; --mega-menu-tablet-drawer-head-height: 32px; --mega-menu-tablet-close-offset-y: 0px; --mega-menu-tablet-drawer-padding-inline: 8px; --mega-menu-tablet-nav-item-height: 40px; --mega-menu-tablet-nav-item-padding-inline: 0; --mega-menu-tablet-nav-item-size: 17px; --mega-menu-tablet-nav-item-gap: 0px; --mega-menu-tablet-nav-chevron-gap: 6px; --mega-menu-tablet-nav-chevron-size: 16px; --mega-menu-tablet-nav-chevron-box-size: 20px; --mega-menu-tablet-nav-chevron-end-inset: 0px; --mega-menu-tablet-content-padding-top: 4px; --mega-menu-tablet-content-padding-inline: 8px; --mega-menu-tablet-content-padding-bottom: 12px; --mega-menu-tablet-panel-padding-top: 0px; --mega-menu-tablet-panel-padding-inline: 16px; --mega-menu-tablet-panel-padding-bottom: 16px; --mega-menu-tablet-back-size: 32px; --mega-menu-tablet-back-icon-size: 16px; --mega-menu-tablet-title-margin-top: 8px; --mega-menu-tablet-title-margin-bottom: 20px; --mega-menu-tablet-title-size: 20px; --mega-menu-tablet-group-margin-top: 14px; --mega-menu-tablet-group-margin-bottom: 8px; --mega-menu-tablet-group-size: 13px; --mega-menu-tablet-link-height: 42px; --mega-menu-tablet-link-size: 15px; --mega-menu-tablet-link-padding-inline: 0; --mega-menu-mobile-drawer-width-tablet: min(360px, 55vw); /* Mobile drawer keeps a deliberate right-side reveal so the backdrop blur remains visible, matching the supplied Canva reference. */ --mega-menu-mobile-drawer-width-mobile: clamp(300px, 78vw, 380px); --mega-menu-mobile-drawer-max-width: 460px; --mega-menu-mobile-drawer-surface: var(--color-white); --mega-menu-mobile-drawer-shadow: var(--shadow-overlay); --mega-menu-mobile-drawer-transition-duration: var(--motion-medium); --mega-menu-mobile-drawer-transition-ease: var(--ease-standard); --mega-menu-mobile-drawer-head-height: var(--space-64); --mega-menu-mobile-drawer-head-height-mobile: var(--space-48); --mega-menu-mobile-drawer-head-padding-inline: var(--space-16); --mega-menu-mobile-close-size: var(--space-40); --mega-menu-mobile-close-icon-size: var(--icon-size-md); --mega-menu-mobile-content-padding-top: var(--space-8); --mega-menu-mobile-content-padding-inline: var(--space-24); --mega-menu-mobile-content-padding-inline-mobile: var(--space-16); --mega-menu-mobile-content-padding-bottom: var(--space-24); --mega-menu-mobile-nav-item-height: 52px; --mega-menu-mobile-nav-item-height-mobile: 48px; --mega-menu-mobile-nav-item-padding-inline: 12px; --mega-menu-mobile-nav-item-radius: var(--radius-sm); --mega-menu-mobile-nav-item-size: 18px; --mega-menu-mobile-nav-item-size-mobile: 17px; --mega-menu-mobile-nav-item-weight: var(--font-weight-medium); --mega-menu-mobile-nav-item-line: var(--line-body); --mega-menu-mobile-nav-item-hover-surface: var(--color-neutral-100); --mega-menu-mobile-nav-chevron-gap: var(--space-12); --mega-menu-mobile-nav-chevron-size: 14px; --mega-menu-mobile-nav-chevron-box-size: 24px; --mega-menu-mobile-nav-chevron-end-inset: 8px; --mega-menu-mobile-auth-gap: 6px; --mega-menu-mobile-auth-padding: var(--space-16); --mega-menu-mobile-auth-border-width: var(--border-width-subtle); --mega-menu-mobile-auth-border: var(--border-default); --mega-menu-mobile-login-bg: var(--button-color-primary-bg); --mega-menu-mobile-login-text: var(--button-color-primary-text); --mega-menu-mobile-login-border: var(--button-border-primary); --mega-menu-mobile-login-shadow: var(--button-shadow-default); --mega-menu-mobile-signup-bg: var(--button-color-outline-bg); --mega-menu-mobile-signup-text: var(--button-color-outline-text); --mega-menu-mobile-signup-border: var(--button-border-outline); --mega-menu-mobile-signup-shadow: var(--button-shadow-outline); --mega-menu-mobile-panel-padding-top: var(--space-8); --mega-menu-mobile-panel-padding-inline: var(--space-16); --mega-menu-mobile-panel-padding-inline-mobile: var(--space-16); --mega-menu-mobile-panel-padding-bottom: var(--space-24); --mega-menu-mobile-surface: var(--color-white); --mega-menu-mobile-back-size: 44px; --mega-menu-mobile-back-icon-size: var(--icon-size-md); --mega-menu-mobile-title-margin-top: var(--space-8); --mega-menu-mobile-title-margin-bottom: var(--space-24); --mega-menu-mobile-title-size: 28px; --mega-menu-mobile-title-size-mobile: 24px; --mega-menu-mobile-title-weight: var(--font-weight-medium); --mega-menu-mobile-title-line: var(--line-h4); --mega-menu-mobile-group-margin-top: var(--space-16); --mega-menu-mobile-group-margin-bottom: var(--space-8); --mega-menu-mobile-group-size: var(--font-label); --mega-menu-mobile-group-weight: var(--font-weight-medium); --mega-menu-mobile-group-tracking: .04em; --mega-menu-mobile-group-line: var(--line-caption); --mega-menu-mobile-link-padding-block: var(--space-12); --mega-menu-mobile-link-size: 17px; --mega-menu-mobile-link-size-mobile: 16px; --mega-menu-mobile-link-weight: var(--font-weight-medium); --mega-menu-mobile-link-line: var(--line-body); --mega-menu-mobile-backdrop-z-index: 1100; --mega-menu-mobile-backdrop-surface: rgba(19,27,36,.18); --mega-menu-mobile-backdrop-blur: 12px; --mega-menu-mobile-backdrop-saturate: 110%; --mega-menu-mobile-backdrop-transition-duration: var(--motion-medium); --mega-menu-mobile-backdrop-transition-ease: var(--ease-standard); --color-active-surface: #E0E7FF; --color-focus-ring: rgba(33, 25, 255, 0.22); --color-selection: rgba(33, 25, 255, 0.10); --color-disabled-text: #94A3B8; --color-disabled-background: #F1F5F9; --color-disabled-border: #E2E8F0; /* Brand surfaces */ --color-surface-blue: #F0F0FF; --color-surface-cyan: #ECFEFF; --color-surface-violet: #F3E8FF; /* Reusable Trust Badge — subtle flat glass tokens (no shadow or 3D elevation). */ --trust-badge-glass-surface: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.045) 100%); --trust-badge-glass-blur: 10px; --trust-badge-glass-saturate: 110%; --trust-badge-light-surface: rgba(255,255,255,.08); --trust-badge-light-text: var(--color-white, #FFFFFF); --trust-badge-light-muted: rgba(255,255,255,.78); --trust-badge-light-icon: var(--color-white, #FFFFFF); --trust-badge-light-mark-bg: rgba(255,255,255,.10); --trust-badge-light-mark-fg: var(--color-white, #FFFFFF); --trust-badge-light-border: rgba(255,255,255,.28); --trust-badge-light-shadow: none; --trust-badge-light-reflection: rgba(255,255,255,.07); --trust-badge-light-sheen: rgba(255,255,255,.05); --trust-badge-light-edge-highlight: rgba(255,255,255,.40); --trust-badge-light-sheen-opacity: .24; --trust-badge-hover-lift: none; --trust-badge-light-shadow-hover: none; /* Reusable vertical marquee controls — consumed by hero media galleries. */ --marquee-speed: 25s; --marquee-card-gap: clamp(14px, 1.35vw, 22px); --marquee-column-gap: clamp(14px, 1.35vw, 22px); --marquee-card-radius: var(--radius-xl, 20px); --marquee-card-surface: rgba(255, 255, 255, .86); --marquee-card-border: rgba(255, 255, 255, .68); --marquee-card-shadow: none; /* Longer fade ramps avoid the impression of a hard horizontal crop line. */ --marquee-fade-top: 14%; --marquee-fade-bottom-start: 76%; /* Reusable customer logo marquee — geometry, theme surfaces and motion. */ --customer-logo-marquee-duration: 42s; --customer-logo-marquee-gap: clamp(10px, 1vw, 16px); --customer-logo-marquee-item-width: clamp(84px, 8.8vw, 124px); --customer-logo-marquee-item-height: 44px; --customer-logo-marquee-logo-height: clamp(23px, 2.1vw, 31px); --customer-logo-marquee-logo-max-width: clamp(72px, 8.2vw, 108px); --customer-logo-marquee-edge-fade: 8%; --customer-logo-marquee-title-logo-gap: var(--component-group-space, var(--space-24)); /* Pull the borderless strip upward into the hero's already-white gradient tail. */ --customer-logo-marquee-overlap: 0px; --customer-logo-marquee-padding-top: var(--space-24, 24px); --customer-logo-marquee-padding-bottom: var(--space-24, 24px); /* Backward-compatible alias for older consumers of the original block token. */ --customer-logo-marquee-padding-block: clamp(12px, 1.2vw, 16px); --customer-logo-marquee-background: #FFFFFF; --customer-logo-marquee-text: #131B24; --customer-logo-marquee-border: transparent; --customer-logo-marquee-logo-filter: brightness(0); --customer-logo-marquee-logo-opacity: .70; /* Brand gradients */ --gradient-primary: linear-gradient(180deg, #2119FF 0%, #2119FF 42%, #4F63FF 70%, #FFFFFF 100%); /* Theme-aware Hostrend blue-to-endpoint hero gradient. Hold brand blue through the upper hero, then use one long, continuous interpolation into white (Light) or black (Dark) so there is no visible horizontal band. */ --gradient-free-website-design-hero-mid: color-mix(in srgb, var(--color-primary) 42%, var(--gradient-free-website-design-hero-end, var(--color-white))); --gradient-free-website-design-hero-end: var(--color-white); --gradient-free-website-design-hero: linear-gradient( 180deg, var(--color-primary) 0%, var(--color-primary) 38%, var(--gradient-free-website-design-hero-mid) 68%, var(--gradient-free-website-design-hero-end) 100% ); --gradient-cyan: linear-gradient(135deg, #06B6D4 0%, #2119FF 100%); --gradient-purple: linear-gradient(135deg, #7C3AED 0%, #2119FF 100%); --gradient-accent: linear-gradient(135deg, #06B6AA 0%, #E0F2FE 100%); --gradient-soft: linear-gradient(135deg, #F8FAFC 0%, #E0F2FE 100%); /* Logo Design Hero — page-level semantic visual tokens. */ --gradient-logo-design-hero: linear-gradient(118deg, #7C3AED 0%, #4F46E5 38%, #2119FF 60%, #06B6D4 100%); --gradient-logo-design-hero-wash: linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.96) 100%); --logo-design-hero-title-size: 68px; --logo-design-hero-title-size-mobile: 46px; --logo-design-hero-title-weight: var(--font-section-heading-weight); --logo-design-hero-title-line: 1.05; --logo-design-hero-title-line-mobile: 1.08; --tracking-hero-display: -.04em; --logo-design-hero-copy-size: 18px; --logo-design-hero-copy-size-mobile: 16px; --logo-design-hero-copy-line: 1.55; --logo-design-hero-copy-line-mobile: 1.55; /* Backward-compatible aliases used by existing components */ --brand-blue: var(--color-primary); --brand-blue-dark: var(--color-primary-hover); --dark: var(--color-dark); --text: var(--color-secondary-text); --muted: var(--color-secondary-text); --white: var(--color-white); --surface: var(--color-background); --border: var(--color-border); /* * HOSTREND TYPOGRAPHY SYSTEM — LOCKED FOUNDATION * * Primary typeface: Be Vietnam Pro * The global system intentionally uses one font family for consistency. * --font-secondary remains as a compatibility alias for existing components. * * Large marketing/display type follows Hostrend’s heading-weight refinement: * existing size + shared Semibold (600) heading weight + controlled tracking. */ --font-primary: "Be Vietnam Pro", sans-serif; --font-secondary: var(--font-primary); /* Supported global weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Shared visual weight for primary section and CTA headings. */ --font-section-heading-weight: var(--font-weight-semibold); /* Display scale — desktop */ --font-display-xl: 84px; --font-display-lg: 64px; --font-display-md: 56px; /* Section / heading scale — desktop */ --font-section-xl: 48px; --font-section-lg: 42px; --font-section-md: 32px; --font-h4: 24px; --font-h5: 20px; --font-h6: 18px; /* Body scale — desktop */ --font-body-xl: 20px; --font-large-body: 18px; --font-body: 16px; --font-small-body: 14px; --font-caption: 12px; /* UI scale — desktop */ --font-nav: 15px; --font-button: 16px; --font-button-xs: 12px; --font-button-small: 14px; --font-label: 12px; --font-overline: 12px; /* Backward-compatible heading aliases */ --font-h1: var(--font-section-xl); --font-h2: var(--font-section-lg); --font-h3: var(--font-section-md); /* Line heights */ --line-display-xl: 1.10; --line-display-lg: 1.10; --line-display-md: 1.12; --line-section-xl: 1.25; --line-section-lg: 1.10; --line-section-md: 1.30; --line-h4: 1.40; --line-h5: 1.40; --line-h6: 1.45; --line-body-xl: 1.60; --line-body-large: 1.60; --line-body: 1.60; --line-small: 1.55; --line-caption: 1.50; --line-button: 1.375; --line-nav: 1.375; /* Backward-compatible line-height aliases */ --line-h1: var(--line-section-xl); --line-h2: var(--line-section-lg); --line-h3: var(--line-section-md); /* Letter spacing */ --tracking-display: -0.01em; --tracking-normal: 0; --tracking-overline: 1px; /* * HOSTREND SPACING & LAYOUT SYSTEM — v1.0 FOUNDATION * * Base principle: 8px grid with a small 4px micro-step. * Global spacing tokens are intentionally limited to the approved scale. */ --space-0: 0px; --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px; /* Backward-compatible spacing aliases used by older components. */ --space-1: var(--space-4); --space-2: var(--space-8); --space-3: var(--space-12); --space-4-legacy: var(--space-16); --space-5: var(--space-24); --space-6: var(--space-32); --space-7: var(--space-48); --space-8: var(--space-64); --space-9: var(--space-96); /* Container system. */ --container-xl: 1920px; --container-lg: 1440px; --container-md: 1440px; --container-sm: 960px; --container-content: 720px; /* Backward-compatible container aliases. */ --container-max-width: var(--container-md); --container-wide-max-width: var(--container-lg); /* Responsive page gutters. */ --gutter-desktop: 40px; --gutter-tablet: 32px; --gutter-mobile: 20px; --container-padding-inline: var(--gutter-desktop); --container-padding-tablet: var(--gutter-tablet); --container-padding-mobile: var(--gutter-mobile); /* Section spacing system. */ --section-space-hero: var(--space-96); --section-space-large: var(--space-64); --section-space-normal: var(--space-48); --section-space-small: var(--space-32); --component-group-space: var(--space-24); --element-space: var(--space-16); --internal-content-space: var(--space-12); /* * HOSTREND ICON SYSTEM — v1.0 FOUNDATION * * Artwork lives in /design-system/icon-library/. * Global rules below define size, color, spacing, alignment and states. */ --icon-size-xs: 12px; --icon-size-sm: 16px; --icon-size-md: 20px; --icon-size-lg: 24px; --icon-size-xl: 32px; --icon-size-2xl: 40px; --icon-size-3xl: 48px; /* Compact inline icon/text spacing. */ --icon-gap: 8px; --icon-gap-lg: 12px; /* Recommended icon stroke guidance (assets may be filled or stroked). */ --icon-stroke-xs: 1.5px; --icon-stroke-sm: 1.5px; --icon-stroke-md: 1.5px; --icon-stroke-lg: 2px; --icon-stroke-xl: 2px; --icon-stroke-2xl: 2px; --icon-stroke-3xl: 2.5px; --icon-color-default: var(--color-dark); --icon-color-primary: var(--color-primary); --icon-color-secondary: var(--color-secondary-text); --icon-color-muted: var(--color-neutral-400); --icon-color-disabled: var(--color-neutral-300); --icon-color-inverse: var(--color-white); --icon-color-success: var(--color-success); --icon-color-warning: var(--color-warning); --icon-color-error: var(--color-error); --icon-color-info: var(--color-info); --icon-container-radius: var(--radius-md); --icon-container-feature-radius: var(--radius-lg); --icon-container-circle-radius: var(--radius-circle); /* Responsive section spacing. */ --section-space-hero-tablet: var(--space-64); --section-space-large-tablet: var(--space-48); --section-space-normal-tablet: var(--space-32); --section-space-small-tablet: var(--space-24); --component-group-space-tablet: var(--space-16); --element-space-tablet: var(--space-12); --internal-content-space-tablet: var(--space-12); --section-space-hero-mobile: var(--space-48); --section-space-large-mobile: var(--space-32); --section-space-normal-mobile: var(--space-24); --section-space-small-mobile: var(--space-16); --component-group-space-mobile: var(--space-12); --element-space-mobile: var(--space-8); --internal-content-space-mobile: var(--space-8); /* Default section aliases retained for existing global classes. */ --section-space-y: var(--section-space-normal); --section-space-y-tablet: var(--section-space-normal-tablet); --section-space-y-mobile: var(--section-space-normal-mobile); /* Global grid system. */ --grid-columns-desktop: 12; --grid-columns-tablet: 8; --grid-columns-mobile: 4; --grid-column-gap: var(--space-24); --grid-row-gap: var(--space-24); --grid-column-gap-mobile: var(--space-16); --grid-row-gap-mobile: var(--space-16); /* Breakpoint reference values (for JS/documentation and component contracts). */ --breakpoint-mobile: 767px; --breakpoint-tablet: 768px; --breakpoint-desktop: 1024px; --breakpoint-wide: 1440px; /* Standard card/component padding. */ --card-padding-small: var(--space-16); --card-padding-default: var(--space-24); --card-padding-large: var(--space-32); --button-padding-block: var(--space-16); --button-padding-inline: var(--space-24); --button-padding-block-mobile: var(--space-12); --button-padding-inline-mobile: var(--space-16); --content-measure: var(--container-content); --focus-ring: var(--shadow-focus); /* * HOSTREND BORDER RADIUS & SHAPE SYSTEM — v1.0 FOUNDATION * * Soft, rounded design language informed by the inspected reference style. * Use semantic component tokens instead of arbitrary one-off radii. */ --radius-0: 0px; --radius-sharp: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-3xl: 28px; --radius-pill: 9999px; --radius-circle: 50%; /* Semantic component radii. */ --radius-button-small: var(--radius-sm); --radius-button-medium: var(--radius-md); --radius-button-default: var(--radius-lg); --radius-button-large: var(--radius-xl); --radius-button-xl: var(--radius-3xl); --radius-input: var(--radius-sm); --radius-dropdown: var(--radius-md); --radius-card-small: var(--radius-md); --radius-card-default: var(--radius-lg); --radius-card-feature: var(--radius-xl); --radius-card-large: var(--radius-2xl); --radius-hero: var(--radius-2xl); --radius-modal: var(--radius-2xl); --radius-popover: var(--radius-md); --radius-badge: var(--radius-pill); --radius-search: var(--radius-pill); --radius-icon-button: var(--radius-circle); --radius-avatar: var(--radius-circle); /* Responsive semantic overrides. */ --radius-button-large-mobile: var(--radius-lg); --radius-button-xl-tablet: var(--radius-2xl); --radius-button-xl-mobile: var(--radius-xl); --radius-card-feature-mobile: var(--radius-lg); --radius-card-large-mobile: var(--radius-xl); --radius-hero-mobile: var(--radius-xl); --radius-modal-mobile: var(--radius-xl); /* * HOSTREND BORDER SYSTEM — v1.0 FOUNDATION * * Semantic, minimal and state-based borders. * Use these tokens instead of arbitrary border values. * * 0px = none * 0.5px = hairline * 1px = subtle/default * 2px = strong/focus/selected * 3px = special cases only */ --border-width-none: 0px; --border-width-hairline: 0.5px; --border-width-subtle: 1px; --border-width-strong: 2px; --border-width-extra-strong: 3px; /* Semantic border colors. */ --border-default: var(--color-neutral-200); --border-subtle: rgba(100, 116, 139, 0.18); --border-hover: var(--color-neutral-300); --border-focus: var(--color-primary); --border-selected: var(--color-primary); --border-disabled: var(--color-disabled-border); --border-success: var(--color-success); --border-warning: var(--color-warning); --border-error: var(--color-error); --border-info: var(--color-info); --border-inverse: var(--color-white); /* Semantic control widths. */ --border-width-control: var(--border-width-subtle); --border-width-focus: var(--border-width-strong); --border-width-selected: var(--border-width-strong); --border-width-state: var(--border-width-strong); /* Dark-theme border colors are opt-in through a dark surface/theme class. */ --border-default-dark: rgba(255, 255, 255, 0.12); --border-hover-dark: rgba(255, 255, 255, 0.20); --border-focus-dark: var(--color-primary); --border-selected-dark: var(--color-primary); --border-disabled-dark: rgba(255, 255, 255, 0.08); --border-success-dark: var(--color-success); --border-warning-dark: var(--color-warning); --border-error-dark: var(--color-error); --border-inverse-dark: var(--color-dark); /* Backward-compatible border alias. */ --border: var(--border-default); /* * HOSTREND SHADOWS & ELEVATION SYSTEM — v1.0 FOUNDATION * * Semantic elevation levels inspired by the inspected Canva behavior. * Use tokens by role rather than arbitrary box-shadow values. * * 0 = Flat * 1 = Raised * 2 = Floating * 3 = Overlay */ --shadow-none: none; /* Light theme semantic shadows. */ --shadow-raised: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.08); --shadow-floating: 0 4px 12px rgba(16, 24, 40, 0.08), 0 12px 32px rgba(16, 24, 40, 0.12); --shadow-overlay: 0 8px 24px rgba(16, 24, 40, 0.10), 0 24px 64px rgba(16, 24, 40, 0.16); --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.25); --shadow-focus: 0 0 0 3px rgba(33, 25, 255, 0.15); /* Interaction variants. */ --shadow-raised-hover: 0 2px 6px rgba(16, 24, 40, 0.08), 0 8px 18px rgba(16, 24, 40, 0.10); --shadow-raised-active: 0 1px 3px rgba(16, 24, 40, 0.10); /* Dark-theme recipes are opt-in through a dark surface/theme class. */ --shadow-raised-dark: 0 1px 2px rgba(0, 0, 0, 0.20), 0 4px 12px rgba(0, 0, 0, 0.24); --shadow-floating-dark: 0 4px 12px rgba(0, 0, 0, 0.24), 0 12px 32px rgba(0, 0, 0, 0.30); --shadow-overlay-dark: 0 8px 24px rgba(0, 0, 0, 0.30), 0 24px 64px rgba(0, 0, 0, 0.40); --shadow-inner-dark: inset 0 1px 0 rgba(255, 255, 255, 0.08); --shadow-focus-dark: 0 0 0 3px rgba(33, 25, 255, 0.25); /* Backward-compatible shadow aliases used by existing UI primitives. */ --shadow-sm: var(--shadow-raised); --shadow-md: var(--shadow-floating); --shadow-lg: var(--shadow-overlay); /* * HOSTREND MOTION & ANIMATION SYSTEM — v1.0 FOUNDATION * * Purposeful, subtle motion for interaction feedback and state changes. * Durations/easing are Hostrend tokens inspired by the inspected reference * behavior; they are not claimed as Canva's unpublished internal values. */ --motion-instant: 0ms; --motion-fast: 120ms; --motion-normal: 180ms; --motion-medium: 240ms; --motion-slow: 320ms; --motion-extended: 400ms; /* Global blur-reveal entrance system. Components opt in with data attributes or reusable .host-motion-reveal--blur-up / --blur-scale classes. */ --motion-reveal-duration: 780ms; --motion-reveal-distance-y: 18px; --motion-reveal-blur: 8px; --motion-reveal-scale-start: 0.986; --motion-reveal-stagger-step: 75ms; --motion-reveal-easing: var(--ease-emphasized); --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0, 0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-linear: linear; --transition-hover: var(--motion-normal) var(--ease-standard); --transition-fade: var(--motion-normal) var(--ease-standard); --transition-enter: var(--motion-medium) var(--ease-enter); --transition-exit: var(--motion-normal) var(--ease-exit); /* Semantic interaction recipes. */ --motion-hover-lift: translateY(-1px); --motion-card-lift: translateY(-2px); --motion-press: translateY(0); --motion-enter-offset: 8px; --motion-enter-scale: 0.98; --motion-stagger-step: 40ms; --motion-stagger-max: 200ms; /* Continuous loading motion. */ --motion-spin-duration: 1000ms; --motion-shimmer-duration: 1200ms; /* Accessibility preference hook. */ --motion-reduced-duration: 0.01ms; /* * HOSTREND INPUT & FORM COMPONENT SYSTEM — v1.0 FOUNDATION * * Compact, accessible and responsive form controls. Components consume * these tokens instead of hard-coded visual values. */ --form-control-height-sm: 36px; --form-control-height: 40px; --form-control-height-lg: 48px; --form-control-height-mobile: 40px; --form-control-padding-x: 12px; --form-control-padding-y: 12px; --form-control-font-size: 14px; --form-control-font-weight: var(--font-weight-regular); --form-control-line: 1.4; --form-control-background: var(--color-white); --form-control-disabled-background: var(--color-disabled-background); --form-input-radius: var(--radius-sm); --form-search-radius: var(--radius-pill); --form-dropdown-radius: var(--radius-popover); --form-card-radius: var(--radius-card-default); --form-border-width: var(--border-width-subtle); --form-border-focus-width: var(--border-width-strong); --form-border-state-width: var(--border-width-strong); --form-border-default: var(--border-default); --form-border-hover: var(--border-hover); --form-border-focus: var(--border-focus); --form-border-disabled: var(--border-disabled); --form-border-success: var(--border-success); --form-border-error: var(--border-error); --form-label-size: var(--font-label); --form-label-weight: var(--font-weight-medium); --form-label-line: 18px; --form-help-size: 12px; --form-help-line: 18px; --form-choice-size: 14px; --form-option-size: 14px; --form-chip-size: 12px; --form-field-gap: var(--space-4); --form-helper-gap: var(--space-4); --form-field-group-gap: var(--space-12); --form-section-gap: var(--space-24); --form-input-icon-size: var(--icon-size-md); --form-select-icon-size: var(--icon-size-sm); --form-check-size: 16px; --form-number-control: 40px; --form-textarea-height: 96px; --form-textarea-line: 22px; --form-option-height: 40px; --form-file-height: 152px; --form-file-height-mobile: 132px; --form-file-border-width: var(--border-width-subtle); --form-file-border: var(--border-hover); --form-switch-width: 44px; --form-switch-height: 24px; --form-switch-thumb: 18px; --form-switch-padding: 3px; --form-transition: var(--transition-hover); /* Compact inline CTA form — shared by marketing heroes and documented in the design-system test page. */ --form-inline-cta-max-width: 400px; --form-inline-cta-height: var(--form-control-height-lg); --form-inline-cta-padding: var(--space-4); --form-inline-cta-gap: var(--space-8); --form-inline-cta-radius: 10px; --form-inline-cta-inner-radius: var(--radius-sm); --form-inline-cta-surface: var(--theme-surface, var(--color-white)); --form-inline-cta-border: var(--theme-border, var(--form-border-default)); --form-inline-cta-text: var(--theme-text, var(--color-dark)); --form-inline-cta-placeholder: var(--theme-text-muted, var(--color-secondary-text)); --form-inline-cta-button-bg: var(--theme-primary, var(--button-color-primary-bg)); --form-inline-cta-button-text: var(--theme-on-primary, var(--button-color-primary-text)); --form-inline-cta-button-hover-bg: #1A13E5; --form-inline-cta-button-hover-text: #FFFFFF; --form-inline-cta-highlight: rgba(255, 255, 255, .62); --form-inline-cta-shadow: var(--shadow-raised); /* * HOSTREND BUTTON COMPONENT SYSTEM — v2.0 FOUNDATION * * All button appearance is token-driven. * Standard buttons are solid/no-gradient. The gradient variant is an * explicit marketing/hero CTA treatment only. * All buttons use a fixed 16px radius. */ --button-font-weight: var(--font-weight-semibold); --button-radius: var(--radius-lg); --button-icon-gap: var(--icon-gap); --button-group-gap: var(--space-16); --button-transition: var(--transition-hover); --button-hover-lift: var(--motion-hover-lift); --button-press-transform: var(--motion-press); --button-disabled-opacity: 0.55; --button-border-default: var(--border-default); /* * HOSTREND CARD & SURFACE COMPONENT SYSTEM — v1.0 * * Reusable card families consume the global foundation tokens below. * Cards should not introduce one-off radius, spacing, border or shadow values. */ --card-radius-sm: var(--radius-card-small); --card-radius-md: var(--radius-card-default); --card-radius-lg: var(--radius-card-feature); --card-radius-xl: var(--radius-card-large); --card-padding-sm: var(--space-16); --card-padding-md: var(--space-24); --card-padding-lg: var(--space-32); --card-gap: var(--space-16); --card-section-gap: var(--space-24); --card-cta-gap: var(--space-24); --card-grid-gap: var(--space-24); --card-icon-gap: var(--space-8); --card-icon-sm: var(--icon-size-md); --card-icon-md: var(--icon-size-lg); --card-icon-lg: var(--icon-size-xl); --card-icon-xl: var(--icon-size-2xl); --card-surface-default: var(--color-white); --card-surface-subtle: var(--color-background); --card-surface-brand: var(--color-surface-blue); --card-surface-cyan: var(--color-surface-cyan); --card-surface-violet: var(--color-surface-violet); --card-surface-dark: var(--color-dark); --card-surface-success: var(--color-success-soft); --card-surface-warning: var(--color-warning-soft); --card-surface-error: var(--color-error-soft); --card-border-default: var(--border-default); --card-border-hover: var(--border-hover); --card-border-focus: var(--border-focus); --card-border-selected: var(--border-selected); --card-border-disabled: var(--border-disabled); --card-shadow-default: var(--shadow-raised); --card-shadow-hover: var(--shadow-raised-hover); --card-shadow-active: var(--shadow-raised-active); --card-shadow-focus: var(--shadow-focus), var(--shadow-raised); --card-shadow-floating: var(--shadow-floating); --card-media-aspect: 16 / 9; --card-transition: var(--transition-hover); --card-hover-transform: var(--motion-card-lift); --card-disabled-opacity: 0.62; --button-height-xs: 32px; --button-height-sm: 36px; --button-height-md: 44px; --button-height-lg: 48px; --button-height-xl: 52px; --button-height-hero: 56px; --button-height-lg-mobile: 48px; --button-height-xl-mobile: 48px; --button-height-hero-mobile: 48px; --button-padding-xs: 12px; --button-padding-sm: 16px; --button-padding-md: 20px; --button-padding-lg: 24px; --button-padding-xl: 28px; --button-padding-hero: 32px; --button-padding-text: 0px; --button-padding-md-mobile: 18px; --button-padding-lg-mobile: 20px; --button-padding-xl-mobile: 22px; --button-padding-hero-mobile: 22px; --button-icon-size: var(--icon-size-md); --button-icon-only-size: var(--icon-size-md); --button-icon-button-size: var(--button-height-md); --button-icon-button-size-mobile: var(--button-height-md); --button-spinner-size: 16px; --button-spinner-border-width: 2px; --button-spinner-track: rgba(255, 255, 255, 0.35); --button-shadow-none: var(--shadow-none); --button-shadow-default: var(--shadow-inner), var(--shadow-raised); --button-shadow-hover: var(--shadow-inner), var(--shadow-raised-hover); --button-shadow-active: var(--shadow-raised-active); --button-shadow-outline: var(--shadow-inner), var(--shadow-raised); --button-shadow-focus: var(--shadow-focus), var(--shadow-raised); --button-shadow-gradient: var(--shadow-inner), var(--shadow-raised); --button-shadow-gradient-hover: var(--shadow-inner), var(--shadow-raised-hover); --button-shadow-gradient-active: var(--shadow-raised-active); /* Light surface CTA — translucent on brand surfaces, solid white on hover. */ --button-color-light-bg: var(--color-white); --button-color-light-hover-bg: var(--color-white); --button-color-light-active-bg: var(--color-white); --button-color-light-text: var(--color-dark); --button-color-light-hover-text: var(--color-dark); --button-color-light-active-text: var(--color-dark); --button-border-light: rgba(255, 255, 255, 0.82); --button-border-light-hover: var(--color-white); --button-border-light-active: var(--color-white); /* Header-auth button variants — reusable Button Component states. * Both variants intentionally derive their surfaces from global navigation/white tokens. */ --button-color-header-signup-bg: transparent; --button-color-header-signup-hover-bg: var(--navigation-hover-surface-on-dark); --button-color-header-signup-active-bg: var(--navigation-active-surface-on-dark); --button-color-header-signup-text: var(--color-white); --button-color-header-signup-hover-text: var(--color-white); --button-color-header-signup-active-text: var(--color-white); --button-border-header-signup: var(--navigation-hover-border-on-dark); --button-border-header-signup-hover: var(--navigation-hover-border-on-dark); --button-border-header-signup-active: var(--navigation-hover-border-on-dark); /* Legacy compatibility tokens retained for existing consumers. Locked Header state uses the standard outline treatment on the revealed white header. */ --button-color-header-signup-light-bg: var(--navigation-hover-surface-on-light); --button-color-header-signup-light-hover-bg: var(--navigation-hover-surface-on-light); --button-color-header-signup-light-active-bg: var(--navigation-hover-surface-on-light); --button-color-header-signup-light-text: var(--color-primary); --button-color-header-signup-light-hover-text: var(--color-primary); --button-color-header-signup-light-active-text: var(--color-primary); --button-border-header-signup-light: var(--navigation-hover-border-on-light); --button-border-header-signup-light-hover: var(--navigation-hover-border-on-light); --button-border-header-signup-light-active: var(--navigation-hover-border-on-light); --button-header-signup-light-blur: var(--navigation-hover-blur); --button-color-header-login-bg: rgba(255,255,255,.88); --button-color-header-login-bg: color-mix(in srgb, var(--color-white) 88%, transparent); --button-color-header-login-hover-bg: var(--color-white); --button-color-header-login-active-bg: color-mix(in srgb, var(--color-white) 94%, transparent); --button-color-header-login-text: var(--color-dark); --button-color-header-login-hover-text: var(--color-dark); --button-color-header-login-active-text: var(--color-dark); --button-border-header-login: color-mix(in srgb, var(--color-white) 78%, transparent); --button-border-header-login-hover: var(--color-white); --button-border-header-login-active: var(--color-white); --button-header-auth-blur: var(--navigation-hover-blur); --button-header-auth-transition: var(--navigation-hover-indicator-transition); /* Primary — solid, no gradient. */ --button-color-primary-bg: var(--color-primary); --button-color-primary-hover-bg: var(--color-primary-hover); --button-color-primary-active-bg: var(--color-primary-active); --button-color-primary-text: var(--color-white); --button-color-primary-hover-text: var(--color-white); --button-color-primary-active-text: var(--color-white); --button-border-primary: transparent; --button-border-primary-hover: transparent; --button-border-primary-active: transparent; /* Secondary — light surface, no gradient. */ --button-color-secondary-bg: var(--color-white); --button-color-secondary-hover-bg: var(--color-white); --button-color-secondary-active-bg: var(--color-neutral-50); --button-color-secondary-text: var(--color-dark); --button-color-secondary-hover-text: var(--color-dark); --button-color-secondary-active-text: var(--color-dark); --button-border-secondary: var(--border-default); --button-border-secondary-hover: var(--border-hover); --button-border-secondary-active: var(--border-hover); /* Outline — transparent/light surface, blue border. */ --button-color-outline-bg: transparent; --button-color-outline-hover-bg: var(--color-hover-surface); --button-color-outline-active-bg: var(--color-active-surface); --button-color-outline-text: var(--color-primary); --button-color-outline-hover-text: var(--color-primary-hover); --button-color-outline-active-text: var(--color-primary-active); --button-border-outline: var(--color-primary); --button-border-outline-hover: var(--color-primary); --button-border-outline-active: var(--color-primary); /* Tertiary — low-emphasis filled surface. */ --button-color-tertiary-bg: transparent; --button-color-tertiary-hover-bg: var(--color-hover-surface); --button-color-tertiary-active-bg: var(--color-active-surface); --button-color-tertiary-text: var(--color-primary); --button-color-tertiary-hover-text: var(--color-primary-hover); --button-color-tertiary-active-text: var(--color-primary-active); --button-border-tertiary: transparent; --button-border-tertiary-hover: transparent; --button-border-tertiary-active: transparent; /* Text — no surface. */ --button-color-text-bg: transparent; --button-color-text-hover-bg: transparent; --button-color-text-active-bg: transparent; --button-color-text-text: var(--color-primary); --button-color-text-hover-text: var(--color-primary-hover); --button-color-text-active-text: var(--color-primary-active); --button-border-text: transparent; --button-border-text-hover: transparent; --button-border-text-active: transparent; /* Icon button — light raised surface. */ --button-color-icon-bg: var(--color-white); --button-color-icon-hover-bg: var(--color-hover-surface); --button-color-icon-active-bg: var(--color-active-surface); --button-color-icon-text: var(--color-dark); --button-color-icon-hover-text: var(--color-primary); --button-color-icon-active-text: var(--color-primary-active); --button-border-icon: var(--border-default); --button-border-icon-hover: var(--border-hover); --button-border-icon-active: var(--border-selected); /* Menu outline — transparent control surface. */ --button-color-menu-bg: transparent; --button-color-menu-hover-bg: var(--color-hover-surface); --button-color-menu-active-bg: var(--color-active-surface); --button-color-menu-text: var(--color-dark); --button-color-menu-hover-text: var(--color-primary); --button-color-menu-active-text: var(--color-primary); --button-border-menu: var(--border-default); --button-border-menu-hover: var(--border-hover); --button-border-menu-active: var(--border-selected); /* Gradient — explicit hero/marketing CTA only. */ --button-color-gradient-bg: var(--gradient-primary); --button-color-gradient-hover-bg: var(--gradient-purple); --button-color-gradient-active-bg: var(--color-primary-active); --button-color-gradient-text: var(--color-white); --button-color-gradient-hover-text: var(--color-white); --button-color-gradient-active-text: var(--color-white); --button-border-gradient: transparent; --button-border-gradient-hover: transparent; --button-border-gradient-active: transparent; /* Destructive — semantic error action. */ --button-color-destructive-bg: var(--color-error); --button-color-destructive-hover-bg: var(--color-error-dark); --button-color-destructive-active-bg: var(--color-error-dark); --button-color-destructive-text: var(--color-white); --button-color-destructive-hover-text: var(--color-white); --button-color-destructive-active-text: var(--color-white); --button-border-destructive: transparent; --button-border-destructive-hover: transparent; --button-border-destructive-active: transparent; /* Contrast — light CTA on dark/brand surfaces. */ --button-color-contrast-bg: var(--color-white); --button-color-contrast-hover-bg: var(--color-white); --button-color-contrast-active-bg: var(--color-neutral-100); --button-color-contrast-text: var(--color-primary); --button-color-contrast-hover-text: var(--color-dark); --button-color-contrast-active-text: var(--color-dark); --button-border-contrast: var(--color-white); --button-border-contrast-hover: var(--color-white); --button-border-contrast-active: var(--color-neutral-100); /* Contextual surface text — opt-in for colored/dark backgrounds */ --surface-text-primary: var(--color-dark); --surface-text-secondary: var(--color-secondary-text); --surface-text-muted: var(--color-neutral-400); --surface-link: var(--color-primary); --surface-on-primary: var(--color-white); } /* HOSTREND GLOBAL ANIMATED MESH GRADIENT. One reusable, two-colour system. Light: Hostrend Blue -> White. Dark: Hostrend Blue -> Pure Black. Motion is a separate soft colour-field layer, preserving a smooth vertical base without hard bands. */ :root { --gradient-hostrend-animated-mesh-end: var(--color-white); --gradient-hostrend-animated-mesh-mid: color-mix(in srgb, var(--color-primary) 42%, var(--gradient-hostrend-animated-mesh-end)); --gradient-hostrend-animated-mesh: linear-gradient( 180deg, var(--color-primary) 0%, var(--color-primary) 38%, var(--gradient-hostrend-animated-mesh-mid) 68%, var(--gradient-hostrend-animated-mesh-end) 100% ); --gradient-hostrend-animated-mesh-duration: 18s; --gradient-hostrend-animated-mesh-background-size: 260% 240%; --gradient-hostrend-animated-mesh-blur: 36px; --gradient-hostrend-animated-mesh-overlay-opacity: .32; --gradient-hostrend-animated-mesh-overlay-mask: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 34%, transparent 82%); /* These overlays use only the approved Hostrend Blue/White palette with transparency. */ --gradient-hostrend-animated-mesh-glow-primary: rgba(255,255,255,.18); --gradient-hostrend-animated-mesh-glow-secondary: rgba(33,25,255,.12); --gradient-hostrend-animated-mesh-glow-tertiary: rgba(255,255,255,.10); /* Backward-compatible global alias for existing components and page backgrounds. */ --gradient-hostrend-blue-white-ambient: var(--gradient-hostrend-animated-mesh); --gradient-hostrend-blue-white-ambient-duration: var(--gradient-hostrend-animated-mesh-duration); --gradient-hostrend-blue-white-ambient-blur: var(--gradient-hostrend-animated-mesh-blur); --gradient-hostrend-blue-white-ambient-glow-opacity: var(--gradient-hostrend-animated-mesh-overlay-opacity); --gradient-hostrend-blue-white-ambient-glow-strong: var(--gradient-hostrend-animated-mesh-glow-primary); --gradient-hostrend-blue-white-ambient-glow-soft: var(--gradient-hostrend-animated-mesh-glow-tertiary); --gradient-hostrend-blue-white-ambient-glow-clear: rgba(255,255,255,0); --gradient-hostrend-blue-white-ambient-glow-opacity-min: .28; --gradient-hostrend-blue-white-ambient-glow-opacity-max: .38; --free-website-design-hero-benefit-text: var(--color-white); --free-website-design-hero-benefit-icon: var(--color-white); } /* Perceptual OKLCH interpolation gives a smoother blend; the declaration above is the fallback. */ @supports (background: linear-gradient(180deg in oklch, #000000 0%, #FFFFFF 100%)) { :root { --gradient-hostrend-animated-mesh-mid: color-mix(in oklch, var(--color-primary) 42%, var(--gradient-hostrend-animated-mesh-end)); --gradient-hostrend-animated-mesh: linear-gradient( 180deg in oklch, var(--color-primary) 0%, var(--color-primary) 38%, var(--gradient-hostrend-animated-mesh-mid) 68%, var(--gradient-hostrend-animated-mesh-end) 100% ); } } @media (max-width: 1023px) { :root { /* Tablet */ --font-display-xl: 64px; --font-display-lg: 56px; --font-display-md: 48px; --font-section-xl: 44px; --font-section-lg: 36px; --font-section-md: 28px; --font-h4: 22px; --font-h5: 20px; --font-h6: 18px; --font-body-xl: 18px; --font-large-body: 18px; --font-body: 16px; --font-small-body: 14px; --font-caption: 12px; --font-nav: 15px; --font-button: 16px; --font-button-xs: 12px; --font-button-small: 14px; --font-label: 12px; --font-overline: 12px; } } @media (max-width: 767px) { :root { /* Mobile */ --font-display-xl: 48px; --font-display-lg: 40px; --font-display-md: 36px; --font-section-xl: 36px; --font-section-lg: 28px; --font-section-md: 24px; --font-h4: 20px; --font-h5: 18px; --font-h6: 16px; --font-body-xl: 18px; --font-large-body: 16px; --font-body: 16px; --font-small-body: 14px; --font-caption: 12px; --font-nav: 14px; --font-button: 15px; --font-button-xs: 12px; --font-button-small: 14px; --font-label: 12px; --font-overline: 12px; } } /* HOSTREND REUSABLE TRUST BADGE — v278.09 Subtle flat glass: low translucency, fine edge only, no shadows or 3D elevation. */ :root { --trust-badge-radius: 999px; --trust-badge-gap: 7px; --trust-badge-gap-mobile: 5px; --trust-badge-text-gap: 6px; --trust-badge-text-gap-mobile: 5px; --trust-badge-padding-inline: 12px; --trust-badge-padding-block: 6px; --trust-badge-padding-inline-mobile: 9px; --trust-badge-padding-block-mobile: 5px; --trust-badge-icon-size: 18px; --trust-badge-source-size: 18px; --trust-badge-icon-size-mobile: 16px; --trust-badge-source-size-mobile: 16px; --trust-badge-rating-size: 13px; --trust-badge-rating-size-mobile: 12px; --trust-badge-review-size: 11px; --trust-badge-review-size-mobile: 10px; --trust-badge-margin-bottom: 10px; --trust-badge-glass-surface: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.045) 100%); --trust-badge-glass-blur: 10px; --trust-badge-glass-saturate: 110%; --trust-badge-light-surface: rgba(255,255,255,.08); --trust-badge-light-text: var(--color-white, #FFFFFF); --trust-badge-light-muted: rgba(255,255,255,.78); --trust-badge-light-icon: var(--color-white, #FFFFFF); --trust-badge-light-mark-bg: rgba(255,255,255,.10); --trust-badge-light-mark-fg: var(--color-white, #FFFFFF); --trust-badge-light-border: rgba(255,255,255,.28); --trust-badge-light-shadow: none; --trust-badge-light-reflection: rgba(255,255,255,.07); --trust-badge-light-sheen: rgba(255,255,255,.05); --trust-badge-light-edge-highlight: rgba(255,255,255,.40); --trust-badge-light-sheen-opacity: .24; --trust-badge-light-shadow-hover: none; --trust-badge-dark-surface: rgba(255,255,255,.07); --trust-badge-dark-text: var(--color-white, #FFFFFF); --trust-badge-dark-muted: rgba(255,255,255,.78); --trust-badge-dark-icon: var(--color-white, #FFFFFF); --trust-badge-dark-mark-bg: rgba(255,255,255,.10); --trust-badge-dark-mark-fg: var(--color-white, #FFFFFF); --trust-badge-dark-border: rgba(255,255,255,.26); --trust-badge-dark-shadow: none; --trust-badge-dark-shadow-hover: none; }