/* ============================================================ VARIABLES.CSS — Design Tokens & CSS Custom Properties VirtualToursXR | Light Theme — Matches Figma Design ============================================================ HOW THIS SYSTEM WORKS ───────────────────── All visual values (colors, spacing, type, shadows) are defined once here as CSS custom properties and referenced everywhere else. ✅ To change a color site-wide → update it here only. ✅ Figma is the source of truth — match Figma values exactly. ❌ Never hardcode a hex or px value in component CSS if a token already exists for it. Use the variable instead. NAMING CONVENTION ───────────────── --clr-* Colors --fs-* Font sizes --fw-* Font weights --lh-* Line heights --ls-* Letter spacing --sp-* Spacing (margin / padding / gap) --r-* Border radius --shadow-* Box shadows --tr-* Transition durations + easing --z-* Z-index layers ============================================================ */ :root { /* ── Colors ──────────────────────────────────────────────── Background scale: bg-1 (lightest / main) → bg-dark (footer/dark sections) Primary: teal (#0d9488) — the brand accent color, matches Figma exactly Text scale: text-1 (headings) → text-4 (placeholders) ─────────────────────────────────────────────────────────── */ /* Backgrounds */ --clr-bg-1: #FFFFFF; /* Main page background */ --clr-bg-2: #F7F9FC; /* Alternate section background */ --clr-bg-3: #FFFFFF; /* Card background */ --clr-bg-4: #F0F4F8; /* Subtle elevated card / tinted section */ --clr-bg-dark: #0F172A; /* Dark sections, footer background */ --clr-bg-dark-2: #1E293B; /* Dark card / elevated dark surface */ /* Primary — Teal brand color (verify hex against Figma before changing) */ --clr-primary: #0d9488; /* Brand teal — CTAs, links, accents */ --clr-primary-dark: #0f766e; /* Hover state for teal elements */ --clr-primary-light: #14b8a6; /* Lighter teal for gradients */ --clr-primary-bg: rgba(13,148,136,0.08); /* Teal tint — nav hover bg */ --clr-primary-bg-2: rgba(13,148,136,0.14); /* Stronger teal tint */ /* Secondary — Indigo (used sparingly for special highlights) */ --clr-secondary: #6366F1; --clr-secondary-light:#818CF8; /* Gradients — teal → blue → purple (used on hero, stat numbers, grad-text) */ --clr-gradient: linear-gradient(135deg, #0d9488 0%, #2563eb 50%, #7c3aed 100%); --clr-gradient-soft: linear-gradient(135deg, rgba(13,148,136,0.08) 0%, rgba(37,99,235,0.08) 100%); --clr-teal-banner: linear-gradient(135deg, #0d9488 0%, #2563eb 50%, #7c3aed 100%); /* Text scale — from darkest (headings) to lightest (placeholders) */ --clr-text-1: #0F172A; /* Headings — near-black */ --clr-text-2: #334155; /* Body text — dark gray */ --clr-text-3: #64748B; /* Muted body / secondary text */ --clr-text-4: #94A3B8; /* Placeholder text / captions */ --clr-text-light: #FFFFFF; /* Text on dark backgrounds */ --clr-text-light-2: rgba(255,255,255,0.7); /* Muted text on dark backgrounds */ /* Borders */ --clr-border: #E2E8F0; /* Default border (cards, dividers) */ --clr-border-2: #CBD5E1; /* Slightly darker border */ --clr-border-3: rgba(13, 148, 136, 0.30); /* Teal-tinted border (hover states) */ /* Status colors */ --clr-white: #FFFFFF; --clr-black: #000000; --clr-success: #10B981; /* Green — success messages */ --clr-warning: #F59E0B; /* Amber — warnings */ --clr-error: #EF4444; /* Red — error states */ /* ── Typography ───────────────────────────────────────────── Font: Archivo (Google Fonts) — loaded in every HTML Responsive sizes use clamp(min, preferred-vw, max) ─────────────────────────────────────────────────────────── */ /* Font family — Archivo with full system-font fallback stack */ --font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Fixed font sizes (use for UI labels, captions, small text) */ --fs-xs: 0.75rem; /* 12px — labels, tags, captions */ --fs-sm: 0.875rem; /* 14px — secondary body text */ --fs-base: 1rem; /* 16px — default body */ --fs-md: 1.0625rem; /* 17px — slightly larger body */ --fs-lg: 1.125rem; /* 18px — lead paragraph */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: 1.875rem; /* 30px */ --fs-4xl: 2.25rem; /* 36px */ --fs-5xl: 3rem; /* 48px */ --fs-6xl: 3.75rem; /* 60px */ --fs-7xl: 4.5rem; /* 72px */ /* Responsive font sizes (clamp scales between viewport widths) */ --fs-hero: clamp(2.75rem, 5.5vw, 4.5rem); /* 44–72px */ --fs-section: clamp(2rem, 4vw, 3rem); /* 32–48px — section headings */ --fs-sub: clamp(1rem, 1.8vw, 1.25rem); /* 16–20px — subtitles */ /* Font weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* used for all major headings */ /* Line heights */ --lh-tight: 1.1; /* Large display headings */ --lh-snug: 1.25; /* Medium headings */ --lh-normal: 1.5; /* Default */ --lh-relaxed: 1.7; /* Body copy — most readable for paragraphs */ /* Letter spacing */ --ls-tight: -0.03em; /* Display headings — tighten large text */ --ls-normal: 0em; --ls-wide: 0.02em; --ls-wider: 0.06em; /* Eyebrow labels, uppercase caps */ /* ── Spacing ───────────────────────────────────────────────── Scale follows a 4px base unit (0.25rem). Use --sp-* for margins, paddings, and gaps in component CSS. Use --section-py for top/bottom padding on full-width sections. ─────────────────────────────────────────────────────────── */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ --sp-24: 6rem; /* 96px */ --sp-32: 8rem; /* 128px */ /* Responsive section padding — scales with viewport width */ --section-py: clamp(4rem, 8vw, 6.5rem); /* ~64–104px */ --section-py-sm: clamp(2.5rem, 5vw, 4rem); /* ~40–64px — tighter sections */ /* ── Border Radius ───────────────────────────────────────── */ --r-sm: 4px; /* Tags, chips, small buttons */ --r-md: 8px; /* Inputs, small cards */ --r-lg: 12px; /* Standard cards */ --r-xl: 16px; /* Large cards */ --r-2xl: 24px; /* Featured cards, modals */ --r-full: 9999px; /* Pills, fully rounded elements */ /* ── Shadows ───────────────────────────────────────────────── Use the weakest shadow that achieves the desired depth. --shadow-teal is for teal CTA buttons on hover. ─────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 3px rgba(0,0,0,0.05); --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 30px rgba(0,0,0,0.10); --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.06); --shadow-teal: 0 4px 20px rgba(13,148,136,0.20); /* Teal CTA hover glow */ /* ── Layout ────────────────────────────────────────────────── --container-max: maximum page width before the layout stops expanding --container-px: responsive horizontal padding (shrinks on mobile) --nav-height: fixed header height — used to offset hero padding so content isn't hidden behind the nav bar ─────────────────────────────────────────────────────────── */ --container-max: 1440px; --container-px: clamp(1.25rem, 5vw, 5rem); /* 20–80px horizontal padding */ --nav-height: 88px; /* ⚠️ If you change the header height in common.css, update this value to match */ /* ── Transitions ───────────────────────────────────────────── Always use these variables rather than hardcoding durations. --tr-bounce uses a spring-like cubic-bezier for playful elements. ─────────────────────────────────────────────────────────── */ --tr-fast: 150ms ease; /* Micro-interactions */ --tr-base: 250ms ease; /* Standard hover/focus */ --tr-slow: 400ms ease; /* Panels, menus */ --tr-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Spring-style pop */ /* ── Z-index Stack ─────────────────────────────────────────── Layering order from back to front. Always use these variables — never use arbitrary z-index numbers (e.g. z-index: 9999). ─────────────────────────────────────────────────────────── */ --z-behind: -1; /* Elements placed behind the page flow */ --z-base: 0; /* Normal document flow */ --z-raised: 10; /* Slightly elevated (card hover states) */ --z-overlay: 100; /* Overlays, backdrops */ --z-modal: 200; /* Modal dialogs */ --z-nav: 300; /* Fixed header — must be above all page content */ --z-toast: 400; /* Toast notifications — always on top */ }