/* ========================================================================== ARKS International — Design Tokens Global CSS custom properties. Edit this file to re-theme the entire site. ========================================================================== */ :root { /* ---- Brand Colors ---- Bridged to the CMS Theme Customizer's --theme-* variables (set by theme_render_css_vars() in config.inc.php, echoed in AFTER this file so its values win in the cascade). Falls back to our own design-system defaults if the customizer block hasn't loaded yet or an admin hasn't changed anything from the seeded ARKS palette. */ --color-navy: var(--theme-primary, #0A3D62); --color-navy-dark: #06283F; --color-teal: var(--theme-secondary, #00A8A8); --color-emerald: var(--theme-button, #00C853); --color-white: #FFFFFF; --color-light-gray: #F4F7FA; --color-soft-blue: #EAF3FA; --color-dark-navy: #041C2C; /* ---- Text ---- */ --text-heading: #0B1F2E; --text-body: #445564; --text-muted: #7A8A97; --text-on-dark: #E9F2F7; --text-on-dark-muted: #A9C0CC; /* ---- Gradients ---- */ --gradient-primary: linear-gradient(135deg, #0A3D62 0%, #00A8A8 100%); --gradient-emerald: linear-gradient(135deg, #00A8A8 0%, #00C853 100%); --gradient-dark: linear-gradient(180deg, rgba(4,28,44,0.15) 0%, rgba(4,28,44,0.92) 100%); --gradient-overlay-hero: linear-gradient(180deg, rgba(4,20,32,.55) 0%, rgba(4,20,32,.75) 55%, rgba(4,20,32,.92) 100%); --gradient-glow: radial-gradient(60% 60% at 50% 40%, rgba(0,168,168,.35) 0%, rgba(10,61,98,0) 70%); /* ---- Surfaces ---- */ --surface-glass: rgba(255,255,255,0.08); --surface-glass-border: rgba(255,255,255,0.18); --surface-card: #FFFFFF; --surface-card-alt: #F7FAFC; /* ---- Shadows ---- */ --shadow-sm: 0 2px 8px rgba(11,31,46,0.06); --shadow-md: 0 8px 24px rgba(11,31,46,0.08); --shadow-lg: 0 20px 48px rgba(11,31,46,0.12); --shadow-xl: 0 30px 70px rgba(11,31,46,0.18); --shadow-glow-teal: 0 10px 40px rgba(0,168,168,0.25); /* ---- Radius ---- */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; /* ---- Spacing scale ---- */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; /* ---- Typography (also customizer-bridged, see Brand Colors note above) ---- */ --font-heading: var(--theme-heading-font, 'Fraunces', 'Playfair Display', Georgia, serif); --font-body: var(--theme-body-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); /* ---- Motion ---- */ --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.25s; --dur-med: 0.5s; --dur-slow: 0.9s; /* ---- Layout ---- */ --header-height: 88px; --header-height-scrolled: 72px; --container-max: 1320px; }