/* ============================================================ tokens.css: HeyBusiness.ai Network Design Token System ------------------------------------------------------------ Single source of truth for all design tokens across every vertical site in the network. Mirrors HeyGuest.ai language. VERTICAL INTEGRATION GUIDE -------------------------- Each vertical's site.css overrides ONLY these tokens: --site-accent Primary brand color (bright; reads on dark) --site-accent-deep Darker shade for use on light backgrounds --site-accent-soft Light tint of the brand color --hero-image url() to hero asset Everything visual that varies per site flows from these three palette tokens. Hover states, dark-mode accent, pricing terminal color, kicker color, etc., all chain off them below. Do NOT override layout, typography, or component tokens in site.css unless documented. Structural changes belong in this file or components.css. ============================================================ */ :root { /* -- Network palette ----------------------------------- */ /* Navy + blue are shared across the entire network as surface and secondary tokens. They never change per site. */ --brand-navy: #0A1726; --brand-navy-soft: #0D2237; --brand-navy-deeper: #112D47; --brand-blue: #2B75BB; --brand-blue-light: #2E96FF; --brand-blue-tint: #EAF1F8; /* -- Site palette (override in site.css per vertical) - The three knobs every vertical owns. Default falls back to the network blue so an unstyled preview never accidentally borrows another brand's signature color. --site-accent bright primary , reads against navy --site-accent-deep darker variant , reads against white --site-accent-soft light tint , for backgrounds */ --site-accent: var(--brand-blue); --site-accent-deep: var(--brand-blue); --site-accent-soft: var(--brand-blue-tint); --accent-color: var(--site-accent); --accent-hover: var(--brand-navy); /* HG: on light bg, accent button hover is dark */ --accent-hover-on-dark: var(--brand-blue); /* HG: on dark bg, accent button hover is blue */ --accent-light: var(--site-accent-soft); --accent-on-dark: var(--site-accent); --accent-fg: var(--brand-navy); /* Text on accent fills */ --accent-fg-hover: var(--color-white); /* Text on dark/blue hover fills */ /* -- Surface colors ----------------------------------- */ --hero-bg: var(--brand-navy); --dark-bg: var(--brand-navy); --dark-bg-soft: var(--brand-navy-soft); --marquee-bg: #FFFFFF; --section-bg: #FFFFFF; --section-bg-alt: #F5F7FA; /* -- Neutrals ----------------------------------------- */ --color-white: #FFFFFF; --color-black: var(--brand-navy); --color-gray-50: #F7F8FB; --color-gray-100: #EEF1F6; --color-gray-200: #DDE2EC; --color-gray-300: #C2C9D6; --color-gray-400: #94A0B5; --color-gray-500: #6B7691; --color-gray-600: #4B5772; --color-gray-700: #364158; --color-gray-800: #1E2940; --color-gray-900: #131D33; /* -- Text --------------------------------------------- */ --color-text: var(--brand-navy); --color-text-muted: #5B6478; --color-text-on-dark: #FFFFFF; --color-text-on-dark-muted: #B5BFD3; /* -- Typography --------------------------------------- */ --font-primary: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Matches HeyGuest's Tailwind --text-* scale exactly */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ --font-size-7xl: 4.5rem; /* 72px */ --font-size-hero: var(--font-size-6xl); /* Matches HeyGuest's --leading-* values */ --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-base: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semi: 600; --font-weight-bold: 700; --font-weight-extra: 800; /* Matches HeyGuest's --tracking-* values */ --letter-spacing-tighter: -0.05em; --letter-spacing-tight: -0.025em; --letter-spacing-base: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; /* -- Spacing scale ------------------------------------ */ /* Matches HeyGuest's Tailwind spacing system: --spacing is the 0.25rem base unit and every --space-N resolves to N x --spacing. So --space-24 = 6rem, --space-8 = 2rem, etc. */ --spacing: 0.25rem; --space-1: calc(var(--spacing) * 1); /* 0.25rem / 4px */ --space-2: calc(var(--spacing) * 2); /* 0.5rem / 8px */ --space-3: calc(var(--spacing) * 3); /* 0.75rem / 12px */ --space-4: calc(var(--spacing) * 4); /* 1rem / 16px */ --space-5: calc(var(--spacing) * 5); /* 1.25rem / 20px */ --space-6: calc(var(--spacing) * 6); /* 1.5rem / 24px */ --space-7: calc(var(--spacing) * 7); /* 1.75rem / 28px */ --space-8: calc(var(--spacing) * 8); /* 2rem / 32px */ --space-10: calc(var(--spacing) * 10); /* 2.5rem / 40px */ --space-12: calc(var(--spacing) * 12); /* 3rem / 48px */ --space-14: calc(var(--spacing) * 14); /* 3.5rem / 56px */ --space-16: calc(var(--spacing) * 16); /* 4rem / 64px */ --space-20: calc(var(--spacing) * 20); /* 5rem / 80px */ --space-24: calc(var(--spacing) * 24); /* 6rem / 96px */ --space-28: calc(var(--spacing) * 28); /* 7rem / 112px */ --space-32: calc(var(--spacing) * 32); /* 8rem / 128px */ /* -- Section padding ---------------------------------- */ /* Mirrors HeyGuest's .container responsive pattern: - Mobile: 1rem top & bottom (calc(--spacing * 4)) - md+: 3.5rem top, 4rem bottom (calc(--spacing * 14) / * 16) */ --section-pad-y-top: var(--space-4); --section-pad-y-bottom: var(--space-4); --section-pad-x: var(--space-24); --section-pad-hero-y: var(--space-32); /* -- Layout ------------------------------------------- */ --container-max: 1600px; /* Matches HeyGuest layout max-width */ --container-wide: 1600px; --container-narrow: 900px; --grid-gap: var(--space-8); /* -- Radii -------------------------------------------- */ /* Matches HeyGuest's --radius-* Tailwind scale */ --radius-xs: 0.125rem; /* 2px */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px , most cards & buttons */ --radius-3xl: 1.5rem; /* 24px */ --radius-4xl: 2rem; /* 32px */ --radius-huge: 10rem; /* 160px , HG .rounded-[10rem] for media */ --radius-full: 9999px; /* -- Shadows ------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(13, 17, 23, 0.05); --shadow-md: 0 4px 12px rgba(13, 17, 23, 0.08); --shadow-lg: 0 12px 28px rgba(13, 17, 23, 0.12); --shadow-xl: 0 24px 48px rgba(13, 17, 23, 0.16); --shadow-card: 0 2px 8px rgba(13, 17, 23, 0.06); --shadow-card-hover: 0 12px 32px rgba(13, 17, 23, 0.12); /* -- Transitions -------------------------------------- */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* -- Navigation --------------------------------------- */ --nav-height: 76px; --nav-bg: rgba(255, 255, 255, 0.98); --nav-bg-scrolled: rgba(255, 255, 255, 0.98); --nav-border: rgba(13, 17, 23, 0.06); --nav-shadow: 0 1px 0 rgba(13, 17, 23, 0.04); --nav-shadow-scrolled: 0 6px 20px rgba(13, 17, 23, 0.08); /* -- Marquee ------------------------------------------ */ --marquee-speed: 40s; --marquee-fade-width: 120px; /* -- Z-index scale ------------------------------------ */ --z-base: 1; --z-dropdown: 50; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-modal: 400; /* -- Pricing module progression ------------------------- */ /* The 1->4 ramp is fixed network-wide (navy -> blue). The terminal step picks up --site-accent so the gradient resolves into each vertical's brand color. */ --pricing-color-1: #0b1725; --pricing-color-2: #122e46; --pricing-color-3: #3076b9; --pricing-color-4: #3698fb; --pricing-color-5: var(--site-accent); /* -- Hero asset (overridden per vertical) ------------- */ --hero-image: none; --logo-filter: brightness(0) invert(1); } /* Responsive section padding override , mirrors HeyGuest's .container breakpoint at 48rem (768px). CSS variables can be re-declared inside a media query and every consumer picks up the new value automatically. */ @media (min-width: 48rem) { :root { --section-pad-y-top: var(--space-14); /* 3.5rem / 56px */ --section-pad-y-bottom: var(--space-16); /* 4rem / 64px */ } } /* On narrow viewports the desktop --section-pad-x of 6rem leaves almost no room for content. Drop it to 1rem so sections / hero / contact-hero / footer all breathe comfortably. */ @media (max-width: 640px) { :root { --section-pad-x: var(--space-4); /* 1rem / 16px */ } }