/* ========================================================================== UTKAL INSTITUTE OF HOTEL MANAGEMENT & TOURISM (UIHMT) — JAJPUR, ODISHA File: assets/css/design-system.css Theme: Sapphire Blue • Milky White • Warm Ivory (3D) Purpose: Single Source of Truth for :root Design Tokens, Colors, Gradients, 3D Porcelain & Sapphire Extruded Shadows, Glassmorphism & Resets. Note: Intentionally UNMINIFIED for clarity and institutional maintenance. ========================================================================== */ :root { /* Namespaced tokens for the imported Admissions page. */ --admissions-src-elite-black: var(--admissions-src-color-1); --admissions-src-elite-black-soft: var(--admissions-src-color-2); --admissions-src-elite-green: var(--admissions-src-color-3); --admissions-src-elite-green-deep: var(--admissions-src-color-4); --admissions-src-elite-yellow: var(--admissions-src-color-5); --admissions-src-elite-yellow-strong: var(--admissions-src-color-6); --admissions-src-shadow-3d-yellow: 0 8px 0 var(--admissions-src-color-7), 0 18px 36px var(--admissions-src-color-8), inset 0 1px 0 var(--admissions-src-color-9); --admissions-src-shadow-3d-green: 0 8px 0 var(--admissions-src-color-10), 0 18px 36px var(--admissions-src-color-11), inset 0 1px 0 var(--admissions-src-color-12); --admissions-src-navy-950: var(--admissions-src-color-1); --admissions-src-navy-900: var(--admissions-src-color-13); --admissions-src-navy-800: var(--admissions-src-color-2); --admissions-src-navy-700: var(--admissions-src-color-14); --admissions-src-navy-600: var(--admissions-src-color-15); --admissions-src-teal-700: var(--admissions-src-color-16); --admissions-src-teal-600: var(--admissions-src-color-4); --admissions-src-teal-100: var(--admissions-src-color-17); --admissions-src-gold-600: var(--admissions-src-color-16); --admissions-src-gold-500: var(--admissions-src-color-6); --admissions-src-gold-400: var(--admissions-src-color-5); --admissions-src-gold-100: var(--admissions-src-color-18); --admissions-src-ivory-100: var(--admissions-src-color-19); --admissions-src-ivory-200: var(--admissions-src-color-20); --admissions-src-white: var(--admissions-src-color-21); --admissions-src-ink-900: var(--admissions-src-color-22); --admissions-src-ink-700: var(--admissions-src-color-23); --admissions-src-muted-600: var(--admissions-src-color-24); --admissions-src-border-soft: var(--admissions-src-color-25); --admissions-src-border-dark: var(--admissions-src-color-26); --admissions-src-success-600: var(--admissions-src-color-16); --admissions-src-danger-600: var(--admissions-src-color-27); --admissions-src-warning-600: var(--admissions-src-color-28); --admissions-src-font-display: "Playfair Display", Georgia, "Times New Roman", serif; --admissions-src-font-body: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --admissions-src-fs-xs: clamp(0.75rem, 0.73rem + 0.08vw, 0.8rem); --admissions-src-fs-sm: clamp(0.86rem, 0.83rem + 0.12vw, 0.92rem); --admissions-src-fs-base: clamp(1rem, 0.97rem + 0.14vw, 1.06rem); --admissions-src-fs-lg: clamp(1.12rem, 1.06rem + 0.28vw, 1.3rem); --admissions-src-fs-xl: clamp(1.32rem, 1.22rem + 0.5vw, 1.65rem); --admissions-src-fs-h3: clamp(1.55rem, 1.35rem + 0.85vw, 2.1rem); --admissions-src-fs-h2: clamp(2.1rem, 1.65rem + 2vw, 3.65rem); --admissions-src-fs-hero: clamp(2.9rem, 1.9rem + 4.7vw, 6rem); --admissions-src-space-1: 0.25rem; --admissions-src-space-2: 0.5rem; --admissions-src-space-3: 0.75rem; --admissions-src-space-4: 1rem; --admissions-src-space-5: 1.5rem; --admissions-src-space-6: 2rem; --admissions-src-space-7: 3rem; --admissions-src-space-8: 4rem; --admissions-src-space-9: 6rem; --admissions-src-space-10: 8rem; --admissions-src-radius-sm: 0.65rem; --admissions-src-radius-md: 1rem; --admissions-src-radius-lg: 1.5rem; --admissions-src-radius-xl: 2rem; --admissions-src-radius-pill: 999px; --admissions-src-shadow-xs: 0 2px 8px var(--admissions-src-color-29), 0 1px 2px var(--admissions-src-color-30); --admissions-src-shadow-sm: 0 12px 30px var(--admissions-src-color-31), 0 3px 8px var(--admissions-src-color-30); --admissions-src-shadow-md: 0 24px 60px var(--admissions-src-color-32), 0 8px 18px var(--admissions-src-color-33); --admissions-src-shadow-lg: 0 40px 100px var(--admissions-src-color-34), 0 12px 30px var(--admissions-src-color-35); --admissions-src-container-wide: 1200px; --admissions-src-nav-height: 76px; --admissions-src-z-base: 1; --admissions-src-z-sticky: 1030; --admissions-src-z-dropdown: 1050; --admissions-src-z-modal: 1090; --admissions-src-z-progress: 2000; --admissions-src-transition-fast: 160ms ease; --admissions-src-transition-base: 280ms cubic-bezier(0.2, 0.7, 0.2, 1); --admissions-src-transition-slow: 520ms cubic-bezier(0.2, 0.7, 0.2, 1); --admissions-src-color-1: #050607; --admissions-src-color-2: #0f1215; --admissions-src-color-3: #3b74b8; --admissions-src-color-4: #284f7d; --admissions-src-color-5: #5ea8ff; --admissions-src-color-6: #4d99f1; --admissions-src-color-7: #31619a; --admissions-src-color-8: rgba(84, 156, 241, 0.22); --admissions-src-color-9: rgba(255, 255, 255, 0.55); --admissions-src-color-10: #1d395a; --admissions-src-color-11: rgba(44, 81, 125, 0.22); --admissions-src-color-12: rgba(255, 255, 255, 0.35); --admissions-src-color-13: #0a0b0d; --admissions-src-color-14: #171b20; --admissions-src-color-15: #212830; --admissions-src-color-16: #22446b; --admissions-src-color-17: #dcf5e6; --admissions-src-color-18: #c7e1ff; --admissions-src-color-19: #f8faf5; --admissions-src-color-20: #edf3ea; --admissions-src-color-21: #ffffff; --admissions-src-color-22: #070c12; --admissions-src-color-23: #2c343d; --admissions-src-color-24: #4f5862; --admissions-src-color-25: #d9e5da; --admissions-src-color-26: rgba(255, 255, 255, 0.13); --admissions-src-color-27: #a03a3a; --admissions-src-color-28: #2c578a; --admissions-src-color-29: rgba(12, 21, 31, 0.10); --admissions-src-color-30: rgba(12, 21, 31, 0.08); --admissions-src-color-31: rgba(12, 21, 31, 0.14); --admissions-src-color-32: rgba(12, 21, 31, 0.22); --admissions-src-color-33: rgba(12, 21, 31, 0.12); --admissions-src-color-34: rgba(12, 21, 31, 0.48); --admissions-src-color-35: rgba(16, 27, 40, 0.28); --admissions-src-color-36: #dff3e6; --admissions-src-color-37: #c6e6d2; --admissions-src-color-38: #e4f6ec; --admissions-src-color-39: rgba(255, 255, 255, 0.07); --admissions-src-color-40: rgba(255, 255, 255, 0.06); --admissions-src-color-41: rgba(255, 255, 255, 0.16); --admissions-src-color-42: rgba(12, 21, 31, 0.35); --admissions-src-color-43: rgba(12, 21, 31, 0.94); --admissions-src-color-44: rgba(255, 255, 255, 0.09); --admissions-src-color-45: rgba(12, 21, 31, 0.98); --admissions-src-color-46: rgba(12, 21, 31, 0.2); --admissions-src-color-47: rgba(94, 168, 255, 0.65); --admissions-src-color-48: rgba(12, 21, 31, 0.25); --admissions-src-color-49: rgba(255, 255, 255, 0.08); --admissions-src-color-50: rgba(255, 255, 255, 0.3); --admissions-src-color-51: rgba(94, 168, 255, 0.35); --admissions-src-color-52: #e6f6ec; --admissions-src-color-53: #8ac0ff; --admissions-src-color-54: rgba(84, 156, 241, 0.3); --admissions-src-color-55: rgba(255, 255, 255, 0.48); --admissions-src-color-56: rgba(12, 21, 31, 0.28); --admissions-src-color-57: rgba(255, 255, 255, 0.18); --admissions-src-color-58: rgba(44, 81, 125, 0.34); --admissions-src-color-59: rgba(84, 156, 241, 0.18); --admissions-src-color-60: #101b29; --admissions-src-color-61: rgba(94, 168, 255, 0.15); --admissions-src-color-62: rgba(255, 255, 255, 0.14); --admissions-src-color-63: #d3ebdd; --admissions-src-color-64: rgba(12, 21, 31, 0.02); --admissions-src-color-65: rgba(12, 21, 31, 0.72); --admissions-src-color-66: rgba(12, 21, 31, 0.68); --admissions-src-color-67: rgba(255, 255, 255, 0.2); --admissions-src-color-68: #c1e0ce; --admissions-src-color-69: rgba(44, 81, 125, 0.78); --admissions-src-color-70: rgba(255, 255, 255, 0.24); --admissions-src-color-71: #9fbca8; --admissions-src-color-72: rgba(44, 81, 125, 0.35); --admissions-src-color-73: rgba(94, 168, 255, 0.16); --admissions-src-color-74: #c8e3d3; --admissions-src-color-75: #a9c7b5; --admissions-src-color-76: rgba(255, 255, 255, 0.45); --admissions-src-color-77: rgba(84, 156, 241, 0.5); --admissions-src-color-78: rgba(255, 255, 255, 0.055); --admissions-src-color-79: rgba(255, 255, 255, 0.12); --admissions-src-color-80: rgba(255, 255, 255, 0.085); --admissions-src-color-81: rgba(44, 81, 125, 0.2); --admissions-src-color-82: rgba(94, 168, 255, 0.1); --admissions-src-color-83: rgba(94, 168, 255, 0.22); --admissions-src-color-84: rgba(44, 81, 125, 0.15); --admissions-src-color-85: rgba(84, 156, 241, 0.25); --admissions-src-color-86: #a8bfd9; --admissions-src-color-87: #fff9df; --admissions-src-color-88: #5e9de8; --admissions-src-color-89: #c4dfff; --admissions-src-color-90: #243e5c; --admissions-src-color-91: #e4f4ea; --admissions-src-color-92: #aed4bc; --admissions-src-color-93: #e9f7ef; --admissions-src-color-94: #214166; --admissions-src-color-95: #7d9082; --admissions-src-color-96: rgba(12, 21, 31, 0.78); --admissions-src-color-97: rgba(12, 21, 31, 0.15); --admissions-src-color-98: #c2d8c8; --admissions-src-color-99: rgba(12, 21, 31, 0.88); --admissions-src-color-100: #a6bfae; --admissions-src-color-101: #fbfff8; --admissions-src-color-102: #c6d9cc; --admissions-src-color-103: rgba(44, 81, 125, 0.12); --admissions-src-color-104: #93a99a; --admissions-src-color-105: #732a2a; --admissions-src-color-106: #fbeaea; --admissions-src-color-107: #edc4c4; --admissions-src-color-108: #e2f5e9; --admissions-src-color-109: rgba(12, 21, 31, 0.9); --admissions-src-color-110: rgba(94, 168, 255, 0.42); --admissions-src-color-111: #b4d2bf; --admissions-src-color-112: rgba(44, 81, 125, 0.42); --admissions-src-color-113: rgba(94, 168, 255, 0.2); --admissions-src-color-114: #c5e2d0; --admissions-src-color-115: #8ab5e8; --admissions-src-color-116: #407fc9; --admissions-src-color-117: #aec9b6; --admissions-src-color-118: rgba(255, 255, 255, 0.035); --admissions-src-color-119: rgba(255, 255, 255, 0.1); --admissions-src-color-120: rgba(84, 156, 241, 0.2); --admissions-src-color-121: #e5f0e7; --admissions-src-color-122: #d9edc9; --admissions-src-color-123: rgba(255, 255, 255, 0.17); --admissions-src-color-124: rgba(44, 81, 125, 0.045); --admissions-src-color-125: rgba(94, 168, 255, 0.12); --admissions-src-color-126: rgba(64, 119, 184, 0.09); --admissions-src-color-127: #0a111a; --admissions-src-color-128: rgba(12, 21, 31, 0.24); --admissions-src-color-129: rgba(12, 21, 31, 0.55); --admissions-src-color-130: rgba(64, 119, 184, 0.22); --admissions-src-color-131: rgba(12, 21, 31, 0.42); --admissions-src-color-132: rgba(94, 168, 255, 0.20); --admissions-src-color-133: rgba(12, 21, 31, 0.32); --admissions-src-color-134: rgba(255, 255, 255, 0.05); --admissions-src-color-135: rgba(64, 119, 184, 0.16); --admissions-src-color-136: rgba(64, 119, 184, 0.26); --admissions-src-color-137: rgba(84, 156, 241, 0.16); --admissions-src-color-138: rgba(12, 21, 31, 0.90); --admissions-src-color-139: rgba(17, 28, 42, 0.94); --admissions-src-color-140: rgba(64, 119, 184, 0.45); --admissions-src-color-141: rgba(94, 168, 255, 0.28); --admissions-src-color-142: rgba(64, 119, 184, 0.18); --admissions-src-color-143: rgba(94, 168, 255, 0.06); --admissions-src-color-144: rgba(64, 119, 184, 0.30); --admissions-src-color-145: rgba(12, 21, 31, 0.93); --admissions-src-color-146: rgba(17, 28, 42, 0.93); --admissions-src-color-147: rgba(94, 168, 255, 0.24); --admissions-src-color-148: rgba(64, 119, 184, 0.10); --admissions-src-color-149: rgba(94, 168, 255, 0.08); --admissions-src-color-150: rgba(64, 119, 184, 0.28); --admissions-src-color-151: rgba(12, 21, 31, 0.38); --admissions-src-color-152: rgba(64, 119, 184, 0.35); --admissions-src-color-153: rgba(44, 81, 125, 0.24); --admissions-src-color-154: rgba(94, 168, 255, 0.34); --admissions-src-color-155: rgba(12, 21, 31, 0.56); --admissions-src-color-156: rgba(12, 21, 31, 0.76); --admissions-src-color-157: rgba(94, 168, 255, 0.32); --admissions-src-color-158: rgba(255, 255, 255, 0.10); --admissions-src-color-159: #4589d9; --admissions-src-color-160: rgba(255, 255, 255, 0.65); --admissions-src-color-161: rgba(255, 255, 255, 0.98); --admissions-src-color-162: rgba(238, 250, 242, 0.94); --admissions-src-color-163: rgba(94, 168, 255, 0.18); --admissions-src-color-164: rgba(44, 81, 125, 0.18); --admissions-src-color-165: rgba(255, 255, 255, 0.85); --admissions-src-color-166: rgba(44, 81, 125, 0.06); --admissions-src-color-167: rgba(44, 81, 125, 0.38); --admissions-src-color-168: rgba(12, 21, 31, 0.74); --admissions-src-color-169: rgba(255, 255, 255, 0.02); --admissions-src-color-170: rgba(12, 21, 31, 0.36); --admissions-src-color-171: #b9d0eb; --admissions-src-color-172: rgba(44, 81, 125, 0.30); --admissions-src-color-173: #8cabcf; --admissions-src-color-174: rgba(44, 81, 125, 0.20); --admissions-src-color-175: rgba(94, 168, 255, 0.10); --admissions-src-color-176: rgba(54, 100, 154, 0.35); --admissions-src-color-177: rgba(12, 21, 31, 0.30); --admissions-src-color-178: rgba(255, 255, 255, 0.75); --admissions-src-color-179: rgba(84, 156, 241, 0.24); --admissions-src-color-180: rgba(255, 255, 255, 0.30); --admissions-src-color-181: #add3ff; --admissions-src-color-182: rgba(84, 156, 241, 0.32); --admissions-src-color-183: rgba(255, 255, 255, 0.70); --admissions-src-color-184: #0d1b2a; --admissions-src-color-185: rgba(64, 119, 184, 0.38); --admissions-src-color-186: #13253a; --admissions-src-color-187: rgba(255, 255, 255, 0.72); --admissions-src-color-188: rgba(84, 156, 241, 0.28); --admissions-src-color-189: rgba(64, 119, 184, 0.32); --admissions-src-color-190: rgba(94, 168, 255, 0.48); --admissions-src-color-191: rgba(44, 81, 125, 0.16); --admissions-src-color-192: rgba(12, 21, 31, 0.06); --admissions-src-color-193: rgba(12, 21, 31, 0.62); --admissions-src-color-194: rgba(255, 255, 255, 0.22); --admissions-src-color-195: rgba(44, 81, 125, 0.48); --admissions-src-color-196: rgba(12, 21, 31, 0.20); --admissions-src-color-197: rgba(255, 255, 255, 0.90); --admissions-src-color-198: rgba(255, 255, 255, 0.78); --admissions-src-color-199: rgba(64, 119, 184, 0.12); --admissions-src-color-200: rgba(255, 255, 255, 0.96); --admissions-src-color-201: rgba(255, 255, 255, 0.84); --admissions-src-color-202: rgba(220, 245, 230, 0.80); --admissions-src-color-203: rgba(255, 249, 223, 0.92); --admissions-src-color-204: rgba(199, 225, 255, 0.88); --admissions-src-color-205: rgba(12, 21, 31, 0.97); --admissions-src-color-206: #fff; --admissions-src-color-207: #0b141f; /* Namespaced tokens from the source About page. */ --source-about-primary-color: var(--source-about-color-1); --source-about-primary-900: var(--source-about-color-2); --source-about-primary-800: var(--source-about-color-3); --source-about-primary-700: var(--source-about-color-1); --source-about-primary-600: var(--source-about-color-4); --source-about-primary-500: var(--source-about-color-5); --source-about-primary-400: var(--source-about-color-6); --source-about-primary-100: var(--source-about-color-7); --source-about-secondary-color: var(--source-about-color-8); --source-about-secondary-700: var(--source-about-color-5); --source-about-secondary-600: var(--source-about-color-9); --source-about-secondary-500: var(--source-about-color-10); --source-about-secondary-300: var(--source-about-color-8); --source-about-secondary-100: var(--source-about-color-11); --source-about-champagne: var(--source-about-color-12); --source-about-accent-color: var(--source-about-color-5); --source-about-accent-teal-soft: var(--source-about-color-11); --source-about-accent-burgundy: var(--source-about-color-13); --source-about-accent-burgundy-soft: var(--source-about-color-14); --source-about-surface-color: var(--source-about-color-15); --source-about-surface-raised: var(--source-about-color-16); --source-about-surface-alt: var(--source-about-color-17); --source-about-surface-muted: var(--source-about-color-18); --source-about-surface-inverse: var(--source-about-primary-color); --source-about-border-color: var(--source-about-color-19); --source-about-border-color-strong: var(--source-about-color-20); --source-about-rule-color: var(--source-about-color-21); --source-about-text-color: var(--source-about-color-22); --source-about-heading-color: var(--source-about-primary-color); --source-about-muted-color: var(--source-about-color-23); --source-about-text-on-dark: var(--source-about-color-15); --source-about-muted-on-dark: var(--source-about-color-24); --source-about-link-color: var(--source-about-primary-600); --source-about-link-hover-color: var(--source-about-secondary-700); --source-about-success-color: var(--source-about-color-25); --source-about-success-bg: var(--source-about-color-26); --source-about-danger-color: var(--source-about-color-27); --source-about-danger-bg: var(--source-about-color-28); --source-about-warning-color: var(--source-about-color-29); --source-about-warning-bg: var(--source-about-color-30); --source-about-info-color: var(--source-about-color-31); --source-about-info-bg: var(--source-about-color-32); --source-about-focus-ring: var(--source-about-color-5); --source-about-focus-ring-width: 3px; --source-about-focus-ring-offset: 2px; --source-about-font-sans: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; --source-about-font-display: "Playfair Display", Georgia, "Times New Roman", serif; --source-about-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --source-about-fs-display: clamp(2.5rem, 1.05rem + 5.3vw, 5rem); --source-about-fs-h1: clamp(2rem, 1.35rem + 2.6vw, 3.15rem); --source-about-fs-h2: clamp(1.65rem, 1.25rem + 1.7vw, 2.5rem); --source-about-fs-h3: clamp(1.3rem, 1.1rem + 0.85vw, 1.7rem); --source-about-fs-h4: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem); --source-about-fs-h5: 1.06rem; --source-about-fs-lead: clamp(1.03rem, 0.98rem + 0.35vw, 1.2rem); --source-about-fs-body: 1rem; --source-about-fs-sm: 0.9375rem; --source-about-fs-xs: 0.8125rem; --source-about-fs-2xs: 0.75rem; --source-about-fw-regular: 400; --source-about-fw-medium: 500; --source-about-fw-semibold: 600; --source-about-fw-bold: 700; --source-about-lh-tight: 1.12; --source-about-lh-heading: 1.24; --source-about-lh-body: 1.7; --source-about-lh-relaxed: 1.85; --source-about-ls-eyebrow: 0.16em; --source-about-ls-tight: -0.015em; --source-about-ls-display: -0.02em; --source-about-space-1: 0.25rem; --source-about-space-2: 0.5rem; --source-about-space-3: 0.75rem; --source-about-space-4: 1rem; --source-about-space-5: 1.5rem; --source-about-space-6: 2rem; --source-about-space-7: 2.5rem; --source-about-space-8: 3rem; --source-about-space-9: 4rem; --source-about-space-10: 5rem; --source-about-space-11: 6rem; --source-about-space-12: 8rem; --source-about-section-py: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem); --source-about-section-py-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem); --source-about-container-width: 1200px; --source-about-container-wide: 1320px; --source-about-container-narrow: 860px; --source-about-gutter: 1rem; --source-about-header-height: 76px; --source-about-topbar-height: 38px; --source-about-menubar-height: 54px; --source-about-radius-xs: 2px; --source-about-radius-sm: 3px; --source-about-radius-md: 4px; --source-about-radius-lg: 6px; --source-about-radius-xl: 8px; --source-about-radius-pill: 999px; --source-about-shadow-xs: 0 1px 2px var(--source-about-color-33); --source-about-shadow-sm: 0 2px 8px var(--source-about-color-34); --source-about-shadow-md: 0 10px 26px -12px var(--source-about-color-35); --source-about-shadow-lg: 0 22px 48px -22px var(--source-about-color-36); --source-about-shadow-focus: 0 0 0 var(--source-about-focus-ring-width) var(--source-about-focus-ring); --source-about-ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1); --source-about-ease-entrance: cubic-bezier(0.22, 0.68, 0.24, 1); --source-about-dur-fast: 140ms; --source-about-dur-base: 240ms; --source-about-dur-slow: 480ms; --source-about-z-dropdown: 1020; --source-about-z-sticky: 1030; --source-about-z-progress: 1045; --source-about-z-backdrop: 1050; --source-about-z-modal: 1055; --source-about-z-toast: 1080; --source-about-bs-body-font-family: var(--source-about-font-sans); --source-about-bs-body-font-size: var(--source-about-fs-body); --source-about-bs-body-line-height: var(--source-about-lh-body); --source-about-bs-body-color: var(--source-about-text-color); --source-about-bs-body-bg: var(--source-about-surface-color); --source-about-bs-heading-color: var(--source-about-heading-color); --source-about-bs-primary: var(--source-about-primary-color); --source-about-bs-primary-rgb: 13, 47, 122; --source-about-bs-secondary: var(--source-about-secondary-color); --source-about-bs-link-color: var(--source-about-link-color); --source-about-bs-link-hover-color: var(--source-about-link-hover-color); --source-about-bs-link-color-rgb: 20, 66, 168; --source-about-bs-border-color: var(--source-about-border-color); --source-about-bs-border-radius: var(--source-about-radius-sm); --source-about-bs-border-radius-lg: var(--source-about-radius-md); --source-about-bs-border-radius-xl: var(--source-about-radius-lg); --source-about-bs-border-radius-pill: var(--source-about-radius-pill); --source-about-bs-focus-ring-color: var(--source-about-focus-ring); --source-about-bs-focus-ring-width: var(--source-about-focus-ring-width); --source-about-bs-focus-ring-box-shadow: 0 0 0 var(--source-about-focus-ring-width) var(--source-about-focus-ring); --source-about-bs-primary-text-emphasis: var(--source-about-primary-700); --source-about-bs-secondary-text-emphasis: var(--source-about-secondary-700); --source-about-bs-success-text-emphasis: var(--source-about-success-color); --source-about-bs-danger-text-emphasis: var(--source-about-danger-color); --source-about-bs-font-sans-serif: var(--source-about-font-sans); --source-about-bs-body-font-weight: var(--source-about-fw-regular); --source-about-bs-headings-font-weight: var(--source-about-fw-bold); --source-about-bs-accordion-btn-focus-box-shadow: 0 0 0 var(--source-about-focus-ring-width) var(--source-about-focus-ring); --source-about-bs-accordion-btn-icon-width: 1.15rem; --source-about-bs-accordion-active-color: var(--source-about-primary-color); --source-about-bs-accordion-active-bg: var(--source-about-secondary-100); --source-about-bs-modal-border-radius: var(--source-about-radius-lg); --source-about-bs-dropdown-border-radius: var(--source-about-radius-md); --source-about-bs-dropdown-link-active-bg: var(--source-about-primary-600); --source-about-bs-nav-pills-border-radius: var(--source-about-radius-pill); --source-about-bs-carousel-indicator-active-bg: var(--source-about-secondary-color); --source-about-bs-progress-bar-bg: var(--source-about-secondary-color); --source-about-color-1: #0d2f7a; --source-about-color-2: #081b4a; --source-about-color-3: #0a2461; --source-about-color-4: #1442a8; --source-about-color-5: #1e56c8; --source-about-color-6: #4a7ce0; --source-about-color-7: #e7edfb; --source-about-color-8: #cfdcf2; --source-about-color-9: #8fb0e0; --source-about-color-10: #b9cdea; --source-about-color-11: #eaf0fc; --source-about-color-12: #dfe8f7; --source-about-color-13: #7a2e39; --source-about-color-14: #f3e7e8; --source-about-color-15: #fafaf5; --source-about-color-16: #ffffff; --source-about-color-17: #f2f3ed; --source-about-color-18: #edeee7; --source-about-color-19: #e2e3da; --source-about-color-20: #c7c9bc; --source-about-color-21: rgba(13, 47, 122, 0.10); --source-about-color-22: #14213a; --source-about-color-23: #55606f; --source-about-color-24: rgba(250, 250, 245, 0.78); --source-about-color-25: #1c6b45; --source-about-color-26: #e7f4ec; --source-about-color-27: #9b2226; --source-about-color-28: #fdeceb; --source-about-color-29: #8a5a00; --source-about-color-30: #fdf3e0; --source-about-color-31: #14496e; --source-about-color-32: #e9f1f8; --source-about-color-33: rgba(10, 28, 51, 0.06); --source-about-color-34: rgba(10, 28, 51, 0.07); --source-about-color-35: rgba(10, 28, 51, 0.20); --source-about-color-36: rgba(10, 28, 51, 0.30); --source-about-color-37: rgba(255, 255, 255, 0.06); --source-about-color-38: rgba(255, 255, 255, 0.22); --source-about-color-39: rgba(255, 255, 255, 0.55); --source-about-color-40: rgba(255, 255, 255, 0.09); --source-about-color-41: rgba(8, 27, 74, 0.94); --source-about-color-42: rgba(8, 27, 74, 0.78); --source-about-color-43: rgba(8, 27, 74, 0.42); --source-about-color-44: rgba(255, 255, 255, 0.25); --source-about-color-45: rgba(255, 255, 255, 0.07); --source-about-color-46: rgba(255, 255, 255, 0.16); --source-about-color-47: rgba(255, 255, 255, 0.12); --source-about-color-48: rgba(8, 27, 74, 0.6); --source-about-color-49: rgba(8, 27, 74, 0.92); --source-about-color-50: rgba(8, 27, 74, 0.72); --source-about-color-51: rgba(8, 27, 74, 0.5); --source-about-color-52: rgba(255, 255, 255, 0.14); --source-about-color-53: rgba(201, 162, 39, 0.16); --source-about-color-54: rgba(201, 162, 39, 0.22); --source-about-color-55: rgba(14, 111, 107, 0.28); --source-about-color-56: rgba(8, 27, 74, 0.88); --source-about-color-57: rgba(255, 255, 255, 0.08); --source-about-color-58: rgba(255, 255, 255, 0.18); --source-about-color-59: rgba(255, 255, 255, 0.1); --source-about-color-60: rgba(28, 107, 69, 0.22); --source-about-color-61: #cfe9d9; --source-about-color-62: rgba(207, 233, 217, 0.4); --source-about-color-63: rgba(155, 34, 38, 0.18); --source-about-color-64: #f6d3d2; --source-about-color-65: rgba(246, 211, 210, 0.4); --source-about-color-66: rgba(232, 220, 192, 0.62); --source-about-color-67: rgba(255, 255, 255, 0.65); --source-about-color-68: rgba(255, 255, 255, 0.05); --source-about-color-69: #000000; --source-about-color-70: rgba(13, 47, 122, 0.7); --source-about-color-71: rgba(30, 86, 200, 0.55); --source-about-color-72: rgba(30, 86, 200, 0.5); --source-about-color-73: rgba(30, 86, 200, 0); --source-about-color-74: rgba(250, 250, 245, 0.7); --source-about-color-75: rgba(13, 47, 122, 0.55); --source-about-color-76: rgba(8, 27, 74, 0.55); --source-about-color-77: rgba(8, 27, 74, 0.1); --source-about-color-78: rgba(8, 27, 74, 0.62); --source-about-color-79: rgba(8, 27, 74, 0.74); --source-about-color-80: rgba(8, 27, 74, 0.12); --source-about-color-81: rgba(8, 27, 74, 0.28); --source-about-color-82: rgba(255, 255, 255, 0.82); --source-about-color-83: rgba(255, 255, 255, 0.9); --source-about-color-84: rgba(255, 255, 255, 0.5); --source-about-color-85: rgba(13, 47, 122, 0.45); --source-about-color-86: rgba(8, 27, 74, 0.86); --source-about-color-87: rgba(30, 86, 200, 0.35); --source-about-color-88: rgba(30, 86, 200, 0.28); --source-about-color-89: rgba(255, 255, 255, 0.75); --source-about-color-90: rgba(30, 86, 200, 0.3); --source-about-color-91: rgba(250, 250, 245, 0.72); --source-about-color-92: rgba(30, 86, 200, 0.18); --source-about-color-93: rgba(30, 86, 200, 0.2); --source-about-color-94: rgba(250, 250, 245, 0.45); --source-about-color-95: rgba(255, 255, 255, 0.03); --source-about-color-96: rgba(30, 86, 200, 0.7); --source-about-color-97: rgba(30, 86, 200, 0.4); --source-about-color-98: rgba(250, 250, 245, 0.6); --source-about-color-99: rgba(250, 250, 245, 0.82); --source-about-color-100: rgba(207, 220, 242, 0.26); --source-about-color-101: rgba(207, 220, 242, 0.22); --source-about-color-102: rgba(8, 27, 74, 0.08); --source-about-color-103: rgba(8, 27, 74, 0.66); --source-about-color-104: rgba(13, 47, 122, 0.95); --source-about-color-105: rgba(13, 47, 122, 0.78); --source-about-color-106: rgba(13, 47, 122, 0.30); --source-about-color-107: rgba(250, 250, 245, 0.84); --source-about-color-108: rgba(250, 250, 245, 0.16); --source-about-color-109: rgba(250, 250, 245, 0.13); --source-about-color-110: rgba(250, 250, 245, 0.92); --source-about-color-111: rgba(13, 47, 122, 0.5); --source-about-color-112: #fcfbf7; --source-about-color-113: rgba(250, 250, 245, 0.1); --source-about-color-114: rgba(250, 250, 245, 0.03); --source-about-color-115: rgba(8, 27, 74, 0.9); --source-about-color-116: rgba(207, 220, 242, 0.34); --source-about-color-117: rgba(250, 250, 245, 0.94); --source-about-color-118: rgba(13, 47, 122, 0.06); --source-about-color-119: rgba(207, 220, 242, 0); --source-about-color-120: rgba(207, 220, 242, 0.45); --source-about-color-121: rgba(8, 27, 74, 0.95); --source-about-color-122: rgba(250, 250, 245, 0.62); --source-about-color-123: rgba(250, 250, 245, 0.74); --source-about-color-124: rgba(250, 250, 245, 0.06); --source-about-color-125: rgba(8, 27, 74, 0); --source-about-color-126: rgba(250, 250, 245, 0.86); --source-about-color-127: rgba(250, 250, 245, 0.07); --source-about-color-128: rgba(250, 250, 245, 0.24); --source-about-color-129: rgba(250, 250, 245, 0.12); --source-about-color-130: rgba(250, 250, 245, 0.2); --source-about-color-131: #6b5a38; --source-about-color-132: rgba(74, 124, 224, 0.55); --source-about-color-133: rgba(74, 124, 224, 0); --source-about-color-134: rgba(74, 124, 224, 0.45); --source-about-color-135: rgba(207, 220, 242, 0.65); --source-about-color-136: rgba(74, 124, 224, 0.25); --source-about-color-137: rgba(207, 220, 242, 0.5); --source-about-color-138: rgba(20, 66, 168, 0.85); --source-about-color-139: rgba(8, 27, 74, 0.60); --source-about-color-140: rgba(13, 47, 122, 0.08); --source-about-color-141: rgba(207, 220, 242, 0.18); --source-about-color-142: rgba(74, 124, 224, 0.6); --source-about-color-143: rgba(250, 250, 245, 0.66); --source-about-color-144: rgba(255, 255, 255, 0.6); --source-about-color-145: rgba(250, 250, 245, 0.95); --source-about-color-146: rgba(207, 220, 242, 0.42); --source-about-color-147: rgba(8, 27, 74, 0.96); --source-about-color-148: rgba(250, 250, 245, 0.4); --source-about-color-149: rgba(74, 124, 224, 0.3); --source-about-color-150: rgba(250, 250, 245, 0.04); --source-about-color-151: rgba(207, 220, 242, 0.3); --source-about-color-152: rgba(250, 250, 245, 0.08); --source-about-color-153: rgba(207, 220, 242, 0.62); --source-about-color-154: rgba(207, 220, 242, 0.4); --source-about-color-155: rgba(250, 250, 245, 0.76); --source-about-color-156: #33405a; --source-about-color-157: rgba(8, 27, 74, 0.58); --source-about-color-158: rgba(250, 250, 245, 0.88); /* Original story-section palette from the referenced About page. */ --story-surface: #fafaf5; --story-ink: #14213a; --story-heading: #0d2f7a; --story-blue: #1442a8; --story-rule: #1e56c8; --story-border: #e2e3da; --story-placeholder: #eaf0fc; --story-placeholder-border: #b9cdea; --story-badge: rgba(8, 27, 74, 0.92); --story-badge-border: rgba(207, 220, 242, 0.42); --story-badge-text: #ffffff; --story-badge-muted: rgba(250, 250, 245, 0.82); /* ------------------------------------------------------------------------ 1. Core Palette — Sapphire Blue, Milky White & Warm Ivory ------------------------------------------------------------------------ */ --color-bg-primary: #092653; --color-bg-secondary: #123d7d; --color-bg-tertiary: #2761a7; --color-bg-light: #faf7ef; /* Warm Ivory Silk Surface */ --color-bg-light-alt: #f2eddf; /* Sculpted Champagne Ivory */ --color-bg-surface: #fdfeff; /* Pure Luminous Milky White */ --color-ivory-pure: #fffcf1; /* High-Key Ivory Pearl */ --color-ivory-border: #e6dfce; /* Warm Ivory Bevel Rim */ --color-bg-glass-dark: rgba(10, 37, 78, 0.86); --color-bg-glass-darker: rgba(8, 28, 61, 0.94); --color-bg-glass-light: rgba(253, 254, 255, 0.94); --color-bg-glass-ivory: rgba(250, 247, 239, 0.94); --color-transparent: transparent; /* ------------------------------------------------------------------------ 2. Brand Accent Tokens (Sapphire Blue, Milky White & Ivory) ------------------------------------------------------------------------ */ --color-brand-primary: #174b91; --color-brand-primary-light: #d5eaff; --color-brand-primary-dark: #0b3271; --color-brand-secondary: #2469b9; --color-brand-secondary-light: #a9d2fa; --color-brand-accent: #176ba0; --color-brand-accent-light: #e6f3ff; --color-brand-ivory-warm: #f5eedc; /* Warm Sculpted Ivory */ /* ------------------------------------------------------------------------ 3. Semantic Status Tokens ------------------------------------------------------------------------ */ --color-success: #059669; --color-warning: #d97706; --color-danger: #dc2626; --color-info: #0284c7; /* ------------------------------------------------------------------------ 4. Translucent Tints & 3D Lighting Layers ------------------------------------------------------------------------ */ --color-white-04: rgba(253, 254, 255, 0.08); --color-white-08: rgba(253, 254, 255, 0.14); --color-white-12: rgba(253, 254, 255, 0.20); --color-white-18: rgba(253, 254, 255, 0.28); --color-white-25: rgba(253, 254, 255, 0.38); --color-white-45: rgba(253, 254, 255, 0.62); --color-white-70: rgba(253, 254, 255, 0.82); --color-white-90: rgba(253, 254, 255, 0.95); --color-slate-06: rgba(15, 46, 87, 0.06); --color-slate-10: rgba(15, 46, 87, 0.10); --color-slate-16: rgba(15, 46, 87, 0.16); --color-slate-40: rgba(15, 46, 87, 0.40); --color-slate-75: rgba(15, 46, 87, 0.75); /* Mapped Accent Alpha Layers (Sapphire & Ivory Harmony) */ --color-gold-08: rgba(45, 111, 184, 0.08); --color-gold-14: rgba(45, 111, 184, 0.14); --color-gold-22: rgba(45, 111, 184, 0.22); --color-gold-35: rgba(45, 111, 184, 0.35); --color-gold-55: rgba(45, 111, 184, 0.55); --color-blue-soft-bg: rgba(45, 111, 184, 0.09); --color-blue-soft-border: rgba(45, 111, 184, 0.25); --color-ivory-glow: rgba(250, 246, 236, 0.55); --color-indigo-12: rgba(45, 111, 184, 0.12); --color-indigo-24: rgba(45, 111, 184, 0.24); --color-teal-12: rgba(45, 111, 184, 0.12); --color-teal-24: rgba(45, 111, 184, 0.24); --color-rose-12: rgba(250, 246, 236, 0.25); --color-emerald-14: rgba(16, 185, 129, 0.22); --color-amber-14: rgba(250, 246, 236, 0.25); --color-danger-14: rgba(220, 38, 38, 0.14); /* ------------------------------------------------------------------------ 5. Typography Color Tokens (Crisp WCAG AA/AAA Contrast) ------------------------------------------------------------------------ */ --color-text-on-dark: #fcfdff; --color-text-muted-dark: #d9e8fa; --color-text-subtle-dark: #e4edf9; --color-text-on-light: #102947; --color-text-muted-light: #425771; --color-text-dark-ink: #102947; /* ------------------------------------------------------------------------ 6. Multi-Stop 3D Gradients (Sapphire Blue, Milky White & Ivory Porcelain) ------------------------------------------------------------------------ */ --gradient-hero-mesh: radial-gradient(circle at 82% 16%, rgba(117, 188, 244, 0.30), transparent 42%), radial-gradient(circle at 8% 85%, rgba(115, 165, 230, 0.13), transparent 40%), linear-gradient(125deg, #081f46 0%, #123b75 53%, #215a9d 100%); --gradient-dark-section: radial-gradient(circle at 85% 10%, rgba(134, 191, 242, 0.17), transparent 42%), linear-gradient(150deg, #0b2854 0%, #123e7c 60%, #164c8d 100%); --gradient-light-section: radial-gradient(circle at 90% 10%, rgba(95, 161, 225, 0.08), transparent 40%), linear-gradient(180deg, #faf8f1 0%, #f4f1e8 55%, #fdfeff 100%); --gradient-surface-porcelain: linear-gradient(155deg, #ffffff 0%, #fcfdfc 60%, #f0f6fc 100%); --gradient-ivory-card: linear-gradient(155deg, #fffefa 0%, #faf7ef 62%, #f0eadb 100%); --gradient-sapphire-3d-card: linear-gradient(150deg, rgba(37, 97, 166, 0.96) 0%, rgba(18, 62, 124, 0.98) 55%, rgba(9, 35, 74, 0.99) 100%); --gradient-gold-luxury: linear-gradient(115deg, #ffffff 0%, #d3eaff 40%, #fdfcf3 72%, #aed3fb 100%); --gradient-gold-solid: linear-gradient(145deg, #367ecb 0%, #1e5ca7 58%, #143c7a 100%); --gradient-ivory-button-3d: linear-gradient(145deg, #ffffff 0%, #faf7ef 55%, #e8e0d0 100%); --gradient-royal-tech: linear-gradient(135deg, #5a9add 0%, #2469b9 52%, #164985 100%); /* 5 Rich Premium Sculpted 3D Icon Finishes (Sapphire, Cobalt, Glacier, Ivory Ceramic, Marine) */ --gradient-3d-icon-gold: linear-gradient(145deg, #468fd8 0%, #245fa8 50%, #163b75 100%); --gradient-3d-icon-indigo: linear-gradient(145deg, #77afe4 0%, #2868b4 52%, #153d7a 100%); --gradient-3d-icon-teal: linear-gradient(145deg, #e5f5ff 0%, #8bc8eb 48%, #5597cf 100%); --gradient-3d-icon-rose: linear-gradient(145deg, #ffffff 0%, #faf7ef 55%, #e7dfce 100%); --gradient-3d-icon-emerald: linear-gradient(145deg, #65a8de 0%, #2775b8 52%, #164c86 100%); /* Top Bar & Social Media 3D Porcelain/Jewel Keycaps (YouTube, WhatsApp, Facebook, Instagram, LinkedIn, X) */ --gradient-top-utility: linear-gradient(90deg, #071f47 0%, #17447c 50%, #0a2853 100%); --gradient-social-resting: linear-gradient(150deg, #ffffff 0%, #faf9f3 56%, #dfeaf6 100%); --gradient-social-dome: linear-gradient(150deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.16) 44%, transparent 70%); --gradient-social-dome-hover: linear-gradient(150deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.10) 46%, transparent 72%); --gradient-social-youtube: linear-gradient(145deg, #ff5252 0%, #ff0000 52%, #b91c1c 100%); --gradient-social-whatsapp: linear-gradient(145deg, #4ade80 0%, #25d366 52%, #128c7e 100%); --gradient-social-facebook: linear-gradient(145deg, #60a5fa 0%, #1877f2 55%, #0c4a9e 100%); --gradient-social-instagram: radial-gradient(circle at 28% 105%, #fdf497 0%, #fdf497 8%, #fd5949 42%, #d6249f 68%, #285aeb 100%); --gradient-social-linkedin: linear-gradient(145deg, #38bdf8 0%, #0a66c2 55%, #004182 100%); --gradient-social-x: linear-gradient(145deg, #4a4539 0%, #1b1a17 52%, #080807 100%); --color-social-youtube-tint: #dc2626; --color-social-whatsapp-tint: #16a34a; --color-social-facebook-tint: #1877f2; --color-social-instagram-tint: #db2777; --color-social-linkedin-tint: #0a66c2; --color-social-x-tint: #171612; /* Royal 3D Brand Logo Shimmer (Sapphire -> Cerulean -> Ivory -> Cobalt) */ --gradient-logo-shimmer: linear-gradient(110deg, #102947 0%, #1d5b9e 24%, #458bc9 45%, #235d9a 58%, #102947 78%, #286bb4 100%); --gradient-logo-shimmer-light: linear-gradient(110deg, #ffffff 0%, #dceeff 25%, #b5d8f9 50%, #ffffff 72%, #edf7ff 100%); --gradient-logo-pedestal: radial-gradient(circle at 22% 50%, rgba(70, 143, 216, 0.14) 0%, rgba(250, 247, 239, 0.90) 65%, rgba(253, 254, 255, 0.97) 100%); --gradient-logo-crest-glint: linear-gradient(125deg, transparent 20%, rgba(255, 255, 255, 0.85) 50%, transparent 80%); /* CSS 3D Visual Scene Gradients (Blue, Cerulean, Sapphire & Ivory Curated Palettes) */ --gradient-scene-culinary: radial-gradient(circle at 25% 22%, rgba(158, 212, 255, 0.24), transparent 52%), linear-gradient(135deg, #092653 0%, #245c9e 54%, #12365f 100%); --gradient-scene-suite: radial-gradient(circle at 35% 22%, rgba(158, 212, 255, 0.24), transparent 52%), linear-gradient(135deg, #092653 0%, #245c9e 54%, #12365f 100%); --gradient-scene-tourism: radial-gradient(circle at 45% 22%, rgba(158, 212, 255, 0.24), transparent 52%), linear-gradient(135deg, #092653 0%, #245c9e 54%, #12365f 100%); --gradient-scene-fb: radial-gradient(circle at 55% 22%, rgba(158, 212, 255, 0.24), transparent 52%), linear-gradient(135deg, #092653 0%, #245c9e 54%, #12365f 100%); --gradient-scene-frontoffice: radial-gradient(circle at 65% 22%, rgba(158, 212, 255, 0.24), transparent 52%), linear-gradient(135deg, #092653 0%, #245c9e 54%, #12365f 100%); --gradient-scene-aviation: radial-gradient(circle at 75% 22%, rgba(158, 212, 255, 0.24), transparent 52%), linear-gradient(135deg, #092653 0%, #245c9e 54%, #12365f 100%); --gradient-button-shine: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%); --gradient-grid-pattern-dark: linear-gradient(rgba(253, 254, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(253, 254, 255, 0.07) 1px, transparent 1px); --gradient-grid-pattern-light: linear-gradient(rgba(23, 75, 145, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 75, 145, 0.05) 1px, transparent 1px); /* ------------------------------------------------------------------------ 7. Sculpted 3D Porcelain & Sapphire Depth, Extruded Bevels & Shadows ------------------------------------------------------------------------ */ --glass-blur: blur(18px) saturate(180%); --glass-blur-heavy: blur(24px) saturate(195%); --border-glass-dark: 1px solid rgba(253, 254, 255, 0.24); --border-glass-bright: 1px solid rgba(250, 246, 236, 0.42); --border-glass-gold: 1px solid rgba(175, 214, 252, 0.55); --border-porcelain-3d: 1px solid rgba(23, 75, 145, 0.14); --border-ivory-3d: 1px solid #e6dfce; --border-light-subtle: 1px solid rgba(23, 75, 145, 0.11); --border-light-strong: 1px solid rgba(23, 75, 145, 0.22); /* 3D Extruded Sapphire Glass Card Shadow */ --shadow-3d-card: 0 24px 48px -12px rgba(7, 26, 55, 0.44), 0 6px 0 rgba(151, 198, 244, 0.25), inset 0 2px 2px rgba(255, 255, 255, 0.25), inset 0 -3px 8px rgba(7, 26, 55, 0.35); /* 3D Extruded Milky-White & Ivory Porcelain Card Shadow */ --shadow-3d-card-light: 0 20px 42px -12px rgba(24, 60, 104, 0.15), 0 5px 0 #e0dbce, 0 8px 18px -6px rgba(23, 75, 145, 0.10), inset 0 2px 3px #ffffff; /* 3D Hover Levitation Shadow */ --shadow-3d-card-hover: 0 30px 60px -12px rgba(24, 60, 104, 0.24), 0 7px 0 rgba(45, 111, 184, 0.28), inset 0 2px 3px #ffffff; /* Rich Premium 3D Sculpted Icon Plinths */ --shadow-3d-icon: 0 16px 28px -6px rgba(16, 50, 94, 0.35), 0 5px 0 #153d75, inset 0 2.5px 3px rgba(255, 255, 255, 0.55), inset 0 -4px 8px rgba(7, 26, 55, 0.36); --shadow-3d-icon-ivory: 0 16px 28px -6px rgba(33, 28, 14, 0.22), 0 5px 0 #cfc3aa, inset 0 3px 4px #ffffff, inset 0 -4px 7px rgba(180, 166, 138, 0.32); /* 3D Tactile Buttons */ --shadow-btn-gold: 0 14px 26px -6px rgba(23, 75, 145, 0.40), 0 4px 0 #113c77, inset 0 2px 2px rgba(255, 255, 255, 0.55); --shadow-btn-ivory-3d: 0 14px 26px -6px rgba(18, 16, 10, 0.34), 0 4px 0 #d5c9b0, inset 0 2px 3px #ffffff; --shadow-btn-indigo: 0 14px 26px -6px rgba(23, 75, 145, 0.35), 0 4px 0 #113c77, inset 0 2px 2px rgba(255, 255, 255, 0.55); --shadow-glow-gold: 0 0 28px rgba(65, 147, 228, 0.40); --shadow-glow-indigo: 0 0 32px rgba(65, 147, 228, 0.38); --shadow-focus-ring: 0 0 0 4px rgba(45, 111, 184, 0.35); /* Sculpted 3D Social Keycap Elevation (Ivory Porcelain Resting -> Jewel Hover) */ --shadow-social-resting: 0 9px 18px -4px rgba(18, 16, 10, 0.48), 0 3.5px 0 #c6baa0, inset 0 2px 2px #ffffff, inset 0 -2px 4px rgba(33, 28, 14, 0.14); --shadow-social-youtube: 0 15px 26px -4px rgba(239, 68, 68, 0.62), 0 4px 0 #7f1d1d, 0 0 18px rgba(255, 0, 0, 0.36), inset 0 2px 3px rgba(255, 255, 255, 0.82); --shadow-social-whatsapp: 0 15px 26px -4px rgba(37, 211, 102, 0.58), 0 4px 0 #0d685d, 0 0 18px rgba(37, 211, 102, 0.34), inset 0 2px 3px rgba(255, 255, 255, 0.82); --shadow-social-facebook: 0 15px 26px -4px rgba(24, 119, 242, 0.60), 0 4px 0 #093573, 0 0 18px rgba(59, 130, 246, 0.36), inset 0 2px 3px rgba(255, 255, 255, 0.82); --shadow-social-instagram: 0 15px 26px -4px rgba(214, 36, 159, 0.60), 0 4px 0 #7a125a, 0 0 18px rgba(236, 72, 153, 0.36), inset 0 2px 3px rgba(255, 255, 255, 0.82); --shadow-social-linkedin: 0 15px 26px -4px rgba(10, 102, 194, 0.60), 0 4px 0 #002d5b, 0 0 18px rgba(56, 189, 248, 0.36), inset 0 2px 3px rgba(255, 255, 255, 0.82); --shadow-social-x: 0 15px 26px -4px rgba(13, 45, 108, 0.64), 0 4px 0 #93c5fd, 0 0 18px rgba(147, 197, 253, 0.38), inset 0 2px 3px rgba(255, 255, 255, 0.62); --filter-social-glyph-rest: drop-shadow(0 1.5px 2px rgba(13, 45, 108, 0.16)); --filter-social-glyph-hover: drop-shadow(0 3px 5px rgba(6, 20, 52, 0.42)); --shadow-logo-hover-aura: 0 14px 28px -8px rgba(23, 75, 145, 0.24), 0 3px 0 #d9e4ef, inset 0 2px 3px #ffffff; --filter-crest-rest: drop-shadow(0 5px 10px rgba(15, 46, 87, 0.22)); --filter-crest-hover: drop-shadow(0 10px 18px rgba(23, 75, 145, 0.45)) drop-shadow(0 0 10px rgba(65, 147, 228, 0.35)); /* ------------------------------------------------------------------------ 8. Typography, Spacing, Radii, Z-Index & Motion Curves ------------------------------------------------------------------------ */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --radius-xs: 0.425rem; --radius-sm: 0.625rem; --radius-md: 1rem; --radius-lg: 1.5rem; --radius-xl: 2.25rem; --radius-pill: 9999px; --z-navbar: 1030; --z-floating: 1045; --z-modal-custom: 1060; --z-security-toast: 1090; --z-preloader: 99990; --z-top-progress: 100000; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-curtain: cubic-bezier(0.76, 0, 0.24, 1); /* Bootstrap 5 Variable Harmonization */ --bs-primary: #174b91; --bs-primary-rgb: 23, 75, 145; --bs-warning: #e6dfce; --bs-warning-rgb: 230, 223, 206; --bs-success: #059669; --bs-info: #0284c7; --bs-danger: #dc2626; --bs-body-font-family: var(--font-sans); --bs-body-color: var(--color-text-on-light); --bs-body-bg: var(--color-bg-light); } /* ========================================================================== BASE DOCUMENT & ACCESSIBLE TYPOGRAPHY DEFAULTS ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 104px; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); color: var(--color-text-on-light); background-color: var(--color-bg-light); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.uihmt-protected { -webkit-user-select: none; user-select: none; } body.uihmt-protected input, body.uihmt-protected textarea, body.uihmt-protected select, body.uihmt-protected [contenteditable="true"], body.uihmt-protected .allow-select, body.uihmt-protected a[href^="tel:"], body.uihmt-protected a[href^="mailto:"] { -webkit-user-select: text; user-select: text; } h1, h2, h3, h4, .font-display { font-family: var(--font-display); letter-spacing: -0.015em; line-height: 1.2; } .font-sans { font-family: var(--font-sans); } .font-mono { font-family: var(--font-mono); } /* Luminous Ivory-Pearl-to-Ice-Blue Shimmer Text Utility (for Royal Blue Sections) */ .text-gold-gradient { background: var(--gradient-gold-luxury); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .text-brand-gold { color: var(--color-brand-secondary) !important; } .section-dark .text-brand-gold, .hero-section .text-brand-gold, .page-hero .text-brand-gold, .uihmt-footer .text-brand-gold, .card-3d-glass .text-brand-gold { color: var(--color-brand-primary-light) !important; } .text-brand-gold-light { color: var(--color-brand-primary-light) !important; } .text-brand-indigo { color: var(--color-brand-primary) !important; } .text-brand-teal { color: var(--color-brand-secondary-light) !important; } .text-on-dark { color: var(--color-text-on-dark) !important; } .text-muted-dark { color: var(--color-text-muted-dark) !important; } .text-subtle-dark { color: var(--color-text-subtle-dark) !important; } .text-muted-light { color: var(--color-text-muted-light) !important; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .accordion-button:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring) !important; } .skip-to-content { position: fixed; top: -120px; left: 1rem; z-index: var(--z-top-progress); padding: 0.75rem 1.25rem; background: var(--gradient-ivory-button-3d); color: var(--color-text-on-light); font-weight: 800; border-radius: var(--radius-sm); box-shadow: var(--shadow-btn-ivory-3d); text-decoration: none; transition: top 0.25s var(--ease-out-expo); } .skip-to-content:focus { top: 1rem; } /* Custom Refined Royal Blue & Ivory Scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--color-bg-light); } ::-webkit-scrollbar-thumb { background: var(--color-brand-secondary); border-radius: var(--radius-pill); border: 2px solid var(--color-bg-light); } ::-webkit-scrollbar-thumb:hover { background: var(--color-bg-primary); }