/* * KTech Theme - Design Tokens * * The --theme-* custom properties below are FALLBACKS only. The real * values are injected at runtime by theme_render_css_vars() (core, * config.inc.php), which is echoed in AFTER this stylesheet - * so any admin-configured Theme Customizer color/font/radius/shadow * always wins. Never hardcode a color where a --theme-* var applies. * * --kt-* tokens are theme-owned extensions with no customizer * equivalent (gradients, glass surfaces, supporting grays, motion * timing) - free to design without breaking customizer compatibility. */ :root { /* Core customizer-driven tokens (fallbacks - Globistic Industries navy/steel-blue) */ --theme-primary: #0A5FB0; --theme-secondary: #0A1F3D; --theme-header-bg: #ffffff; --theme-footer-bg: #0A1F3D; --theme-text: #33404D; --theme-link: #0A5FB0; --theme-button: #0A5FB0; --theme-heading-font: 'Poppins', sans-serif; --theme-body-font: 'Inter', sans-serif; --theme-topbar-bg: #071527; --theme-radius: 0.75rem; --theme-radius-sm: 0.4rem; --theme-shadow: 0 1rem 2.5rem rgba(10, 20, 40, 0.12); --theme-shadow-sm: 0 0.35rem 1rem rgba(10, 20, 40, 0.08); /* Supporting palette (theme-owned) - cool steel grays to pair with navy */ --kt-white: #ffffff; --kt-black: #0a1420; --kt-gray-900: #16232f; --kt-gray-700: #45505c; --kt-gray-500: #7c8896; --kt-gray-200: #e5e9ee; --kt-gray-100: #f3f6f9; --kt-gray-50: #f9fafb; /* Navy/steel-blue gradient system built from the live primary color */ --kt-primary-rgb: 10, 95, 176; --kt-gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, #04162e 100%); --kt-gradient-dark: linear-gradient(160deg, #101b28 0%, #060d16 100%); --kt-gradient-radial: radial-gradient(circle at 30% 20%, rgba(var(--kt-primary-rgb), 0.35), transparent 60%); /* Glassmorphism surfaces */ --kt-glass-bg: rgba(255, 255, 255, 0.72); --kt-glass-bg-dark: rgba(12, 13, 17, 0.6); --kt-glass-border: rgba(255, 255, 255, 0.35); --kt-glass-blur: saturate(180%) blur(18px); /* Elevation */ --kt-shadow-lg: 0 1.5rem 3.5rem rgba(10, 10, 15, 0.18); --kt-shadow-glow: 0 0.75rem 2rem rgba(var(--kt-primary-rgb), 0.28); /* Radii derived from customizer radius */ --kt-radius-lg: calc(var(--theme-radius) * 1.6); --kt-radius-pill: 999px; /* Motion */ --kt-ease: cubic-bezier(0.16, 1, 0.3, 1); --kt-transition: all 0.25s var(--kt-ease); --kt-transition-slow: all 0.5s var(--kt-ease); /* Layout */ --kt-header-h: 84px; --kt-header-h-sm: 64px; --kt-container-pad: clamp(1rem, 4vw, 2.5rem); } @media (prefers-reduced-motion: reduce) { :root { --kt-transition: none; --kt-transition-slow: none; } }