/** * VCourse Design Tokens * * Single source of truth for colour, type, spacing, radius and elevation. * Extracted from the approved static designs in /course-html/css/style.css * so the WordPress build is visually identical to the signed-off pages. * * Never hardcode a colour or shadow in a component file — add or reuse a * token here so theming stays consistent and a rebrand is a one-file change. */ :root { /* --------------------------------------------------------------- * Brand palette * ------------------------------------------------------------- */ --vc-primary: #2563eb; --vc-primary-dark: #1d4ed8; --vc-primary-light: #3b82f6; --vc-primary-soft: rgba(37, 99, 235, 0.05); --vc-primary-border: rgba(37, 99, 235, 0.1); --vc-secondary: #7c3aed; --vc-accent: #f59e0b; /* Tinted icon-box backgrounds — used for the small colour-coded feature * icons on the home hero (quick-features row, floating service card). */ --vc-icon-blue-bg: rgba(37, 99, 235, 0.12); --vc-icon-green-bg: rgba(133, 195, 65, 0.16); --vc-icon-amber-bg: rgba(245, 158, 11, 0.14); --vc-icon-purple-bg: rgba(124, 58, 237, 0.12); /* Crimson CTA accent — reserved for the highest-priority actions * (course enrolment, "explore courses") so they pop against the blue * header/hero without competing with the green primary button. */ --vc-cta: #e42d6f; --vc-cta-dark: #c81f5c; --vc-cta-light: #ff5c93; /* Brand green — used for the top bar, primary buttons and footer headings. */ --vc-green: #85c341; --vc-green-dark: #6ea430; --vc-green-light: #86c53b; /* Deep navy used across gradient headings and CTA panels. */ --vc-navy: #1e2656; --vc-navy-deep: #161c40; /* --------------------------------------------------------------- * Semantic / state colours * ------------------------------------------------------------- */ --vc-success: #10b981; --vc-success-dark: #059669; --vc-danger: #ef4444; --vc-warning: #f59e0b; --vc-info: #0ea5e9; /* --------------------------------------------------------------- * Neutrals & surfaces * ------------------------------------------------------------- */ --vc-white: #ffffff; --vc-light: #f8fafc; --vc-surface: #ffffff; --vc-surface-alt: #f1f5f9; --vc-border: #e2e8f0; --vc-border-strong: #cbd5e1; --vc-text: #334155; --vc-text-muted: #64748b; --vc-text-faint: #94a3b8; --vc-heading: #1e293b; /* Dark footer surfaces. */ --vc-dark: #171717; --vc-dark-alt: #1e293b; --vc-dark-border: #374151; /* --------------------------------------------------------------- * Gradients * ------------------------------------------------------------- */ --vc-gradient-primary: linear-gradient(135deg, #1e2656, #2d3a7a); --vc-gradient-brand: linear-gradient(135deg, #2563eb, #7c3aed); --vc-gradient-secondary: linear-gradient(135deg, #f59e0b, #ef4444); --vc-gradient-success: linear-gradient(135deg, #10b981, #059669); --vc-gradient-green: linear-gradient(135deg, #85c341, #6ea430); --vc-gradient-dark: linear-gradient(135deg, #1e293b, #374151); --vc-gradient-hero: linear-gradient(135deg, #1a6fe0 0%, #2f8fe4 55%, #3fa4f5 100%); --vc-gradient-cta: linear-gradient(135deg, #ee2a6f, #c81f5c); /* --------------------------------------------------------------- * Elevation * ------------------------------------------------------------- */ --vc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --vc-shadow-md: 0 8px 25px rgba(0, 0, 0, 0.1); --vc-shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.12); --vc-shadow-xl: 0 25px 60px rgba(0, 0, 0, 0.15); --vc-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.35); /* --------------------------------------------------------------- * Typography * * System-font fallbacks are listed first in the stack so text paints * immediately if the webfont is still loading (no invisible text, no CLS). * ------------------------------------------------------------- */ --vc-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --vc-font-heading: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --vc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Letter-spacing (tracking). Large headings look crisp and premium with a * touch of negative tracking; small caps/labels want positive tracking. */ --vc-tracking-tight: -0.02em; --vc-tracking-snug: -0.011em; --vc-tracking-normal: 0; --vc-tracking-wide: 0.02em; --vc-tracking-wider: 0.06em; /* Fluid type scale — clamp() removes the need for most media queries. * Tuned to a restrained, professional scale: headings stay readable and * confident without dominating the page (hero ~42px, section titles ~32px). */ --vc-text-xs: 0.75rem; --vc-text-sm: 0.875rem; --vc-text-base: 1rem; --vc-text-lg: 1.0625rem; --vc-text-xl: clamp(1.1rem, 0.3vw + 1rem, 1.2rem); --vc-text-2xl: clamp(1.2rem, 0.5vw + 1.05rem, 1.4rem); --vc-text-3xl: clamp(1.35rem, 0.9vw + 1.05rem, 1.65rem); --vc-text-4xl: clamp(1.55rem, 1.4vw + 1.05rem, 2rem); --vc-text-5xl: clamp(1.85rem, 2vw + 1.1rem, 2.6rem); --vc-leading-tight: 1.2; --vc-leading-snug: 1.4; --vc-leading-normal: 1.6; --vc-leading-relaxed: 1.75; /* --------------------------------------------------------------- * Spacing scale (4px base) * ------------------------------------------------------------- */ --vc-space-1: 0.25rem; --vc-space-2: 0.5rem; --vc-space-3: 0.75rem; --vc-space-4: 1rem; --vc-space-5: 1.5rem; --vc-space-6: 2rem; --vc-space-7: 2.5rem; --vc-space-8: 3rem; --vc-space-9: 4rem; --vc-space-10: 6rem; /* Vertical rhythm for full-bleed sections (matches the 6rem in the mockups). */ --vc-section-y: clamp(3.5rem, 6vw, 6rem); /* --------------------------------------------------------------- * Radius * ------------------------------------------------------------- */ --vc-radius-sm: 7px; --vc-radius-md: 10px; --vc-radius-lg: 16px; --vc-radius-xl: 20px; --vc-radius-2xl: 28px; --vc-radius-pill: 999px; /* --------------------------------------------------------------- * Layout * ------------------------------------------------------------- */ --vc-container: 1200px; --vc-container-wide: 1400px; --vc-container-narrow: 820px; --vc-gutter: clamp(1rem, 3vw, 2rem); /* --------------------------------------------------------------- * Motion * * Durations are referenced as tokens so `prefers-reduced-motion` * can zero them all out in one place (see base.css). * ------------------------------------------------------------- */ --vc-duration-fast: 150ms; --vc-duration: 300ms; --vc-duration-slow: 600ms; --vc-ease: cubic-bezier(0.4, 0, 0.2, 1); --vc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* --------------------------------------------------------------- * Z-index scale — keeps stacking order auditable in one place. * ------------------------------------------------------------- */ --vc-z-base: 1; --vc-z-sticky: 100; --vc-z-header: 1000; --vc-z-dropdown: 1010; --vc-z-overlay: 1050; --vc-z-modal: 1100; --vc-z-toast: 1200; /* Sticky CTA bar height, used to pad the document bottom so fixed content never hides page content. Sized for the taller "Buy Course Now" variant (badge + price + two-line button); the plain Call/CTA variant is shorter, so this just leaves a little extra breathing room there. */ --vc-mobile-cta-height: 76px; }