/* * ═══════════════════════════════════════════════════════════════ * DESIGN TOKENS — v3.1 * Agensi Pekerjaan Andaraya · Lesen C * * Fixes applied in v3.1 (from submitted v3): * - FIXED --shadow-sky declared twice, silently deleting --shadow-gold. * --shadow-green restored. --shadow-sky corrected to sky values. * - FIXED --gradient-green-light declared twice (dead code). De-duped. * - FIXED --color-primary-100 deepened oklch(94%→91%) for section separation. * - FIXED Changelog comment block was inaccurate (referenced removed tokens * that were not actually removed). Corrected. * ═══════════════════════════════════════════════════════════════ */ :root { /* ============================================================ COLOR PALETTE — oklch for perceptual uniformity ============================================================ */ /* Primary · Deep navy (authority, trust, government-grade) */ --color-primary-900: oklch(18% 0.13 253); --color-primary-600: oklch(42% 0.18 248); --color-primary-400: oklch(60% 0.16 246); /* Primary light tints */ --color-primary-200: oklch(88% 0.07 250); --color-primary-100: oklch(91% 0.05 252); /* deepened from 94% for better section contrast */ /* Brand aliases */ --color-brand: var(--color-primary-600); --color-brand-bg: var(--color-primary-600); --color-brand-text: var(--color-primary-900); /* Backgrounds */ --bg-base: oklch(98.5% 0.005 252); --bg-surface: oklch(100% 0 0); --bg-alt: oklch(96.5% 0.008 253); /* Text --color-text-base = colour token. --text-base (no prefix) = fluid font-size token below. */ --color-text-base: oklch(26% 0.022 252); --color-text-muted: oklch(46% 0.016 252); --color-text-strong: oklch(14% 0.024 255); --color-text-inverse: oklch(97% 0.006 252); /* Backwards-compat aliases */ --text-muted: var(--color-text-muted); --text-strong: var(--color-text-strong); --text-inverse: var(--color-text-inverse); /* Aurora / dark hero palette */ --aurora-start: oklch(14% 0.11 258); --aurora-mid: oklch(22% 0.14 253); --aurora-end: oklch(11% 0.09 264); /* ── Accent GOld ★ PRIMARY ACCENT (logo lime figures, hue 152°) */ /* Base Colors */ --accent-gold: oklch(66% 0.20 72); --accent-gold-lt: oklch(78% 0.18 78); /* Gold Variations (Replaced Green) */ --accent-gold-pale: oklch(66% 0.20 72 / 0.10); --accent-gold-glow: oklch(66% 0.20 72 / 0.24); /* ── Accent Sky ★ SECONDARY ACCENT (logo oval blue, hue 228°) */ --accent-sky: oklch(58% 0.20 228); --accent-sky-lt: oklch(72% 0.16 224); --accent-sky-pale: oklch(58% 0.20 228 / 0.10); --accent-sky-glow: oklch(58% 0.20 228 / 0.22); /* Extended component palette */ --surface-hover: oklch(42% 0.18 248 / 0.06); /* Semantic states (independent of logo palette) */ --color-success: oklch(50% 0.18 145); --color-warning: oklch(66% 0.18 68); --color-danger: oklch(52% 0.22 22); --color-info: var(--accent-sky); --color-success-pale: oklch(50% 0.18 145 / 0.12); --color-warning-pale: oklch(66% 0.18 68 / 0.12); --color-danger-pale: oklch(52% 0.22 22 / 0.12); --color-info-pale: oklch(58% 0.20 228 / 0.10); /* Borders */ --border-muted: oklch(90% 0.007 252); --border-default: oklch(82% 0.010 252); --border-strong: oklch(66% 0.018 252); /* Focus ring — gold glow, WCAG 2.4.11 compliant */ --focus-ring: 0 0 0 3px oklch(66% 0.20 72 / 0.50); /* ============================================================ HEADER ============================================================ */ --header-h: 72px; --header-bg: oklch(14% 0.11 258); --header-bg-scrolled: oklch(11% 0.10 262); --header-border: oklch(62% 0.22 152 / 0.18); --header-nav-color: oklch(90% 0.008 252 / 0.65); --header-nav-hover: oklch(98% 0.005 252 / 0.96); --header-surface-hover: oklch(100% 0 0 / 0.06); --header-dropdown-bg: oklch(17% 0.11 258); --header-dropdown-border: oklch(100% 0 0 / 0.08); --header-glass-border: oklch(100% 0 0 / 0.07); /* ============================================================ SHADOWS ============================================================ */ --shadow-sm: 0 2px 8px oklch(14% 0.11 258 / 0.09); --shadow-md: 0 4px 16px oklch(14% 0.11 258 / 0.13); --shadow-lg: 0 8px 28px oklch(14% 0.11 258 / 0.17); --shadow-soft: 0 2px 12px oklch(14% 0.11 258 / 0.07), 0 1px 3px oklch(14% 0.11 258 / 0.05); --shadow-mid: 0 8px 32px oklch(14% 0.11 258 / 0.11), 0 3px 8px oklch(14% 0.11 258 / 0.07); --shadow-lift: 0 20px 56px oklch(14% 0.11 258 / 0.15), 0 6px 18px oklch(14% 0.11 258 / 0.09); /* FIX v3.1: --shadow-gold was silently overwritten by a duplicate --shadow-sky declaration. Both tokens now correctly defined. */ --shadow-gold: linear-gradient(135deg, oklch(0.72 0.18 78) 0%, oklch(0.60 0.19 52) 50%, oklch(0.42 0.18 248) 100%); --shadow-sky: 0 8px 28px oklch(58% 0.20 228 / 0.24), 0 2px 8px oklch(58% 0.20 228 / 0.14); /* ============================================================ GLASS ============================================================ */ --glass-bg: oklch(100% 0 0 / 0.62); --glass-border: oklch(92% 0.010 252 / 0.75); /* ============================================================ MOTION & EASING ============================================================ */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --ease: cubic-bezier(0.23, 1, 0.32, 1); --t-fast: 0.18s; --t-mid: 0.35s; --t-slow: 0.55s; /* ============================================================ BORDER RADIUS ============================================================ */ --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-2xl: 2.25rem; --radius-pill: 9999px; /* ============================================================ SPACING (4-pt scale) ============================================================ */ --space-2: 0.5rem; --space-4: 1rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ============================================================ TYPOGRAPHY ============================================================ */ --font-display: "Sora", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: clamp(1rem, 0.95rem + 0.30vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.50vw, 1.375rem); --text-xl: clamp(1.25rem, 1.05rem + 0.80vw, 1.625rem); --text-2xl: clamp(1.5rem, 1.20rem + 1.20vw, 2rem); --text-3xl: clamp(1.875rem, 1.40rem + 2.00vw, 2.75rem); --h1-font-size: clamp(2.25rem, 2.00rem + 3.00vw, 3.5rem); --h2-font-size: clamp(1.875rem, 1.75rem + 2.00vw, 2.75rem); --h3-font-size: clamp(1.5rem, 1.40rem + 1.50vw, 2.25rem); --h4-font-size: clamp(1.25rem, 1.15rem + 1.00vw, 1.875rem); --h5-font-size: clamp(1.125rem, 1.05rem + 0.75vw, 1.5rem); --h6-font-size: clamp(1rem, 0.95rem + 0.50vw, 1.25rem); /* ============================================================ GRADIENTS ============================================================ */ /* Navy — primary dark hero / section bg */ --gradient-primary: linear-gradient( 135deg, oklch(0.14 0.11 258) 0%, oklch(0.24 0.15 252) 45%, oklch(0.36 0.18 244) 100% ); /* Gold — logo lime. Dark stops: use on LIGHT backgrounds only. For dark section backgrounds use --gradient-green-light. */ --gradient-gold: linear-gradient(135deg, oklch(0.88 0.12 88) 0%, oklch(0.78 0.19 78) 30%, oklch(0.66 0.20 70) 65%, oklch(0.74 0.17 76) 100%); --gradient-sky: linear-gradient( 135deg, oklch(72% 0.16 224) 0%, /* sky-lt — bright entry */ oklch(58% 0.20 228) 50%, /* accent-sky — core identity */ oklch(38% 0.18 236) 100% /* deeper indigo — richer exit */ ); /* Sunset — navy → green CTA panel */ --gradient-sunset: linear-gradient( 135deg, oklch(0.22 0.14 253) 0%, oklch(0.36 0.20 200) 45%, oklch(0.52 0.22 152) 100% ); /* Stats bar sweep */ --gradient-stats-bar: linear-gradient( 90deg, oklch(0.20 0.12 256) 0%, oklch(0.42 0.18 232) 50%, oklch(0.20 0.12 256) 100% ); /* Shorthand aliases */ --grad-green: var(--gradient-green); --grad-sky: var(--gradient-sky); --grad-ink: linear-gradient(160deg, oklch(0.10 0.09 262) 0%, oklch(0.18 0.11 255) 100%); --grad-paper: linear-gradient(160deg, var(--bg-base) 0%, var(--bg-alt) 100%); /* ============================================================ LAYOUT ============================================================ */ --container-max: 1320px; --container-lg: 1280px; --container-xl: 1440px; --section-padding: clamp(5rem, 10vw, 9rem); --section-pad: var(--section-padding); /* compat alias */ --container-padding: clamp(1.25rem, 4vw, 2rem); --gutter: clamp(1.25rem, 4vw, 2.5rem); /* ============================================================ MISC ============================================================ */ --blur-sm: 12px; --blur-md: 20px; --blur-lg: 36px; --z-sticky: 1000; --z-overlay: 2000; --z-modal: 3000; } /* ============================================================ DARK MODE OVERRIDES ============================================================ */ @media (prefers-color-scheme: dark) { :root { --bg-base: oklch(14% 0.015 253); --bg-surface: oklch(18% 0.018 254); --bg-alt: oklch(20% 0.020 252); --color-text-base: oklch(88% 0.010 252); --color-text-muted: oklch(62% 0.012 252); --color-text-strong: oklch(97% 0.006 252); --color-text-inverse: oklch(18% 0.022 255); --text-muted: var(--color-text-muted); --text-strong: var(--color-text-strong); --text-inverse: var(--color-text-inverse); --border-muted: oklch(28% 0.018 252); --border-default: oklch(34% 0.022 252); --border-strong: oklch(48% 0.028 252); --color-success-pale: oklch(50% 0.18 145 / 0.20); --color-warning-pale: oklch(66% 0.18 68 / 0.20); --color-danger-pale: oklch(52% 0.22 22 / 0.20); --color-info-pale: oklch(58% 0.20 228 / 0.18); --accent-green-pale: oklch(62% 0.22 152 / 0.18); --accent-sky-pale: oklch(58% 0.20 228 / 0.16); --glass-bg: oklch(18% 0.018 254 / 0.72); --glass-border: oklch(100% 0 0 / 0.08); --surface-hover: oklch(100% 0 0 / 0.06); --grad-paper: linear-gradient(160deg, var(--bg-base) 0%, var(--bg-alt) 100%); --grad-ink: linear-gradient(160deg, oklch(0.88 0.010 252) 0%, oklch(0.96 0.005 252) 100%); } } /* ============================================================ ACCESSIBILITY BASELINE ============================================================ */ :focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ============================================================ SECTION BACKGROUND MAP Hero → var(--gradient-primary) navy Stats bar → var(--bg-alt) off-white End-to-End/Services → var(--bg-surface) white Industry Validation → var(--gradient-primary) navy Sector-Specific → var(--gradient-sky) logo sky-blue RBA Code of Conduct → var(--bg-surface) white Testimonials → var(--color-primary-100) navy-tinted CTA Footer → var(--gradient-sunset) navy → green ============================================================ */ /* ============================================================ GLOBAL ANIMATIONS (OKLCH & TOKEN OPTIMIZED) ============================================================ */ /* 1. Entrances */ @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(var(--space-6)); /* Unified to 1.5rem / 24px */ } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideRight { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } } /* 2. Interactive States & Pings */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.95); } /* Smoother scale for authority feel */ } @keyframes wa-ping { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(1.8); opacity: 0; } } @keyframes pulseRing { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } } /* 3. Decorative & Background Effects */ @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* Updated to use your Gold/Navy palette logic */ @keyframes licShimmer { 0% { background-position: 200% 0; left: -100%; } 100% { background-position: -200% 0; left: 200%; } } /* 4. Continuous Motion */ @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } /* Reduced for professional subtlety */ } @keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ─── Gradient bridge utility classes ────────────────────── */ .transition-flow--hero-to-white { background: linear-gradient( to bottom, var(--bg-hero) 85%, var(--bg-services) 100% ); } .transition-flow--white-to-trust { background: linear-gradient( to bottom, var(--bg-services) 85%, var(--bg-trust) 100% ); } .transition-flow--trust-to-white { background: linear-gradient( to bottom, var(--bg-trust) 85%, var(--bg-neutral) 100% ); }/* ============================================================ BUTTONS BASE ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.78rem 1.6rem; /* RECOMMENDED: Small radius (8px-12px) for "Executive/Legal" feel */ border-radius: var(--radius-md, 10px); font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1; letter-spacing: 0.03em; /* Smooth hardware-accelerated transitions */ transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-standard), background var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), filter var(--duration-normal) var(--ease-standard); } .btn svg { flex-shrink: 0; width: 1.2em; height: 1.2em; transition: transform var(--duration-fast) var(--ease-standard); } .btn:hover svg { transform: translateX(3px); /* Subtle lead-in effect */ } /* Sizing Utilities */ .btn-sm { font-size: 0.80rem; padding: 0.5rem 1.1rem; } .btn-md { font-size: 0.95rem; padding: 0.65rem 1.4rem; } .btn-lg { font-size: 1.05rem; padding: 0.85rem 2rem; } /* --- PRIMARY GOLD (Licence C Brand) --- */ .btn-gold { background-color: var(--accent-gold); /* Deep Navy text for max contrast (Passes AAA) */ color: oklch(25% 0.08 85); border: none; font-weight: 700; box-shadow: 0 4px 15px oklch(66% 0.20 72 / 0.30); } .btn-gold:hover { filter: brightness(1.08); transform: translateY(-3px); box-shadow: 0 10px 25px oklch(66% 0.20 72 / 0.45); } /* --- WHATSAPP EMERALD (Trust/Growth) --- */ .btn-whatsapp { /* Rich Emerald Gradient for depth */ background: linear-gradient( 135deg, oklch(0.48 0.18 145) 0%, oklch(0.55 0.20 142) 50%, oklch(0.45 0.19 138) 100% ); color: white; font-weight: 700; border-top: 1px solid oklch(100% 0 0 / 0.15); /* Top "Light" highlight */ box-shadow: 0 4px 12px oklch(0.45 0.18 145 / 0.25), inset 0 -2px 4px oklch(0% 0 0 / 0.1); } .btn-whatsapp:hover { transform: translateY(-3px) scale(1.02); /* Lighter, more vibrant green on hover */ background: linear-gradient( 135deg, oklch(0.52 0.20 145) 0%, oklch(0.58 0.22 142) 50%, oklch(0.48 0.21 138) 100% ); box-shadow: 0 12px 24px oklch(0.45 0.18 145 / 0.4); } /* --- GHOST / OUTLINE LIGHT (Secondary) --- */ .btn-ghost-light { background: oklch(100% 0 0 / 0.06); color: oklch(100% 0 0 / 0.9); border: 1.5px solid oklch(100% 0 0 / 0.25); } .btn-ghost-light:hover { background: oklch(100% 0 0 / 0.12); border-color: oklch(100% 0 0 / 0.5); transform: translateY(-2px); color: white; } /* --- SOLID WHITE --- */ .btn-white { background: var(--bg-surface); color: var(--color-primary-600); font-weight: 700; box-shadow: var(--shadow-sm); } .btn-white:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } /* --- INTERACTION STATES --- */ .btn:active { transform: translateY(-1px) scale(0.98); filter: contrast(1.1); } /* Focus state for accessibility */ .btn:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; }