/* Theme Name: KPT Production Theme URI: https://kptproduction.fun Author: KPT Production Team Author URI: https://kptproduction.fun Description: Professional Video Production Company — Premium, Cinematic, Dark, Mobile-First WordPress Theme. Powered by Bunny.net & YouTube. No page builder required. Version: 2.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: Proprietary License URI: https://kptproduction.fun Text Domain: kpt-production Tags: video, dark, premium, cinematic, mobile-first, gutenberg, bunny, youtube */ /* ============================================================ KPT PRODUCTION — GLOBAL DESIGN TOKEN SYSTEM All colors, spacing, typography, shadows, radii defined here. NEVER hard-code values elsewhere. Always use these variables. ============================================================ */ :root { /* ── BACKGROUND HIERARCHY ─────────────────────────────── */ --kpt-bg-primary: #0a0a0f; --kpt-bg-secondary: #0f0f17; --kpt-bg-tertiary: #14141e; --kpt-surface: #1a1a26; --kpt-surface-elevated: #1f1f2e; --kpt-surface-hover: #252538; /* ── BRAND COLORS ─────────────────────────────────────── */ --kpt-gold: #c9a84c; --kpt-gold-light: #e0c06a; --kpt-gold-dim: #8a6f2e; --kpt-gold-gradient: linear-gradient(135deg, #c9a84c 0%, #e0c06a 50%, #b8922e 100%); --kpt-blue: #1a3a6b; --kpt-blue-mid: #2355a0; --kpt-blue-light: #3b72d4; --kpt-purple: #2d1b69; --kpt-purple-mid: #4a2faa; --kpt-purple-light: #7c5de0; --kpt-gradient-brand: linear-gradient(135deg, #1a3a6b 0%, #2d1b69 50%, #4a2faa 100%); --kpt-gradient-accent: linear-gradient(135deg, #c9a84c 0%, #4a2faa 100%); /* ── TEXT ─────────────────────────────────────────────── */ --kpt-text-primary: #f0f0f5; --kpt-text-secondary: #b8b8cc; --kpt-text-muted: #82829a; --kpt-text-disabled: #3a3a52; --kpt-text-link: #7c9de8; --kpt-text-link-hover: #c9a84c; /* ── BORDERS ──────────────────────────────────────────── */ --kpt-border-subtle: rgba(255,255,255,0.06); --kpt-border-mid: rgba(255,255,255,0.10); --kpt-border-strong: rgba(255,255,255,0.16); --kpt-border-gold: rgba(201,168,76,0.35); /* ── BORDER RADIUS ────────────────────────────────────── */ --kpt-radius-xs: 4px; --kpt-radius-sm: 6px; --kpt-radius-md: 10px; --kpt-radius-lg: 16px; --kpt-radius-xl: 24px; --kpt-radius-full: 9999px; /* ── SHADOWS ──────────────────────────────────────────── */ --kpt-shadow-sm: 0 2px 8px rgba(0,0,0,0.40); --kpt-shadow-md: 0 4px 20px rgba(0,0,0,0.55); --kpt-shadow-lg: 0 8px 40px rgba(0,0,0,0.70); --kpt-shadow-gold: 0 0 20px rgba(201,168,76,0.20); --kpt-shadow-card: 0 2px 12px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.04); /* ── SPACING ──────────────────────────────────────────── */ --kpt-space-2xs: 4px; --kpt-space-xs: 8px; --kpt-space-sm: 12px; --kpt-space-md: 16px; --kpt-space-lg: 24px; --kpt-space-xl: 32px; --kpt-space-2xl: 48px; --kpt-space-3xl: 64px; /* ── TYPOGRAPHY ───────────────────────────────────────── */ --kpt-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --kpt-font-display: 'Cinzel', 'Playfair Display', Georgia, serif; --kpt-font-mono: 'JetBrains Mono', 'Fira Code', monospace; --kpt-text-xs: clamp(10px, 1.8vw, 11px); --kpt-text-sm: clamp(12px, 2.5vw, 13px); --kpt-text-base: clamp(14px, 3vw, 15px); --kpt-text-md: clamp(15px, 3.5vw, 16px); --kpt-text-lg: clamp(17px, 4vw, 20px); --kpt-text-xl: clamp(20px, 5vw, 26px); --kpt-text-2xl: clamp(24px, 6vw, 36px); --kpt-text-3xl: clamp(28px, 7vw, 48px); --kpt-leading-tight: 1.2; --kpt-leading-normal: 1.5; --kpt-leading-relaxed: 1.7; --kpt-weight-regular: 400; --kpt-weight-medium: 500; --kpt-weight-semibold: 600; --kpt-weight-bold: 700; /* ── TRANSITIONS ──────────────────────────────────────── */ --kpt-transition-fast: 150ms ease; --kpt-transition-normal: 250ms ease; --kpt-transition-slow: 400ms ease; --kpt-transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ── LAYOUT ───────────────────────────────────────────── */ --kpt-container-sm: 640px; --kpt-container-md: 960px; --kpt-container-lg: 1200px; --kpt-container-xl: 1400px; --kpt-container-pad: clamp(16px, 4vw, 32px); /* ── Z-INDEX SCALE ────────────────────────────────────── */ --kpt-z-base: 1; --kpt-z-dropdown: 100; --kpt-z-sticky: 200; --kpt-z-overlay: 300; --kpt-z-modal: 400; --kpt-z-toast: 500; /* ── GLASS (selective accent only — see design-system.md) ── */ --kpt-glass-bg: rgba(20,20,30,0.72); --kpt-glass-bg-light: rgba(30,30,44,0.55); --kpt-glass-blur: 12px; --kpt-glass-border: rgba(255,255,255,0.08); /* ── SAFE AREA (iOS notch / home indicator) ────────────── */ --kpt-safe-top: env(safe-area-inset-top, 0px); --kpt-safe-bottom: env(safe-area-inset-bottom, 0px); --kpt-safe-left: env(safe-area-inset-left, 0px); --kpt-safe-right: env(safe-area-inset-right, 0px); /* ── HEADER / BOTTOM NAV SIZING ─────────────────────────── */ --kpt-header-h: 56px; --kpt-header-h-scroll: 52px; --kpt-bottom-nav-h: 58px; /* ── TOUCH TARGET MINIMUM (accessibility) ───────────────── */ --kpt-touch-min: 44px; /* ── TEAM CAROUSEL SPEED (admin-configurable — Homepage settings) ── Overridden inline per-instance from KPT Settings; this is just the safe fallback if that inline value is ever missing. */ --kpt-team-speed: 32s; } /* ── REDUCED MOTION ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --kpt-transition-fast: 0ms; --kpt-transition-normal: 0ms; --kpt-transition-slow: 0ms; --kpt-transition-bounce: 0ms; } * { animation-duration: 0.01ms !important; } } /* ============================================================ RESPONSIVE BREAKPOINT SYSTEM (reference — used across all CSS) Mobile-first: base styles target 320–479px, then expand up. ------------------------------------------------------------ Mobile : 0 – 479px (base, no media query) Large Mobile : 480 – 639px (min-width: 480px) Tablet : 640 – 959px (min-width: 640px / 768px) Desktop : 960 – 1279px (min-width: 960px / 1024px) Large Desktop : 1280px+ (min-width: 1280px / 1440px) ============================================================ */