/* ============================================================ TGI Design System — base layer + component utilities. Loaded on every page after the Tailwind CDN. Tokens here are the single source of truth; Tailwind utilities in markup still work, this layer raises the baseline (type, focus, motion). ============================================================ */ :root { /* Brand (fixed identity) */ --navy: #064f93; --navy-900: #043461; --royal: #0e7bbc; --green: #d82a38; /* brand accent (active state, underline, icon, borders) */ --green-700: #c42633; --green-btn: #b0222e; /* action fill w/ white text — 4.78:1 AA */ --green-btn-hover: #9c1e29; --red: #d82a38; /* Text */ --ink: #0E1113; --ink-soft: #2B3340; /* secondary text — ~9.7:1 on white */ --muted: #5A6675; /* tertiary/meta — ~5.3:1 on white */ --on-dark: #FFFFFF; --on-dark-soft: rgba(255, 255, 255, 0.82); --on-dark-muted: rgba(255, 255, 255, 0.64); /* Surfaces */ --surface: #FFFFFF; --surface-2: #F4F7FB; /* tinted toward navy, not warm */ --surface-3: #EAF0F7; --line: #E1E8F0; --footer: #0B0D0F; /* Radius */ --r-sm: 0.5rem; --r-md: 0.875rem; --r-lg: 1.25rem; --r-xl: 1.5rem; --r-pill: 9999px; /* Spacing rhythm */ --gutter: clamp(1.5rem, 4vw, 3rem); --section-y: clamp(4rem, 8vw, 7rem); /* Shadow */ --shadow-soft: 0 4px 16px rgba(2, 22, 43, 0.06); --shadow-card: 0 10px 30px -12px rgba(2, 22, 43, 0.18); --shadow-lift: 0 18px 40px -16px rgba(2, 22, 43, 0.28); /* Motion */ --ease-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-quart: cubic-bezier(0.25, 1, 0.5, 1); --dur-fast: 160ms; --dur: 240ms; --dur-slow: 320ms; /* Z-index scale (semantic) */ --z-base: 0; --z-raised: 10; --z-sticky: 30; --z-header: 50; --z-overlay: 60; --z-modal: 70; --z-toast: 80; --focus: var(--green); } /* ---------- Base typography ---------- */ html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: "Libre Franklin", system-ui, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1; } /* Headings: consistent tracking + even wrapping everywhere. Element selectors don't override Tailwind size/weight utilities, so per-section sizes and the intentional light/bold splits stay intact while tracking + wrapping unify across pages. */ h1, h2, h3 { letter-spacing: -0.02em; text-wrap: balance; } h1 { letter-spacing: -0.025em; } p { text-wrap: pretty; } ::selection { background: var(--green); color: #fff; } /* ---------- Focus (keyboard only) ---------- */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(69, 168, 64, 0.45); border-radius: var(--r-sm); } /* Dark surfaces: brighten the ring for contrast */ .on-dark :where(a, button, input):focus-visible, [data-surface="dark"] :where(a, button, input):focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); } /* ---------- Scroll reveal ---------- Enhances an already-visible default: without the `.js` class (set in before paint) content is fully visible, so no-JS / headless renders never ship blank. */ .js .reveal { opacity: 0; transform: translateY(16px); } .js .reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-quint), transform 0.7s var(--ease-quint); } /* Stagger: equal-or-higher specificity than .is-visible so the shorthand transition above doesn't reset the delay to 0. */ .js .reveal.delay-100.is-visible { transition-delay: 0.08s; } .js .reveal.delay-200.is-visible { transition-delay: 0.16s; } .js .reveal.delay-300.is-visible { transition-delay: 0.24s; } .js .reveal.delay-400.is-visible { transition-delay: 0.32s; } .js .reveal.delay-500.is-visible { transition-delay: 0.40s; } .js .reveal.delay-600.is-visible { transition-delay: 0.48s; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Component: buttons ---------- One transition + focus model for every pill button. Variants layer color only. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--r-pill); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--dur) var(--ease-quint), color var(--dur) var(--ease-quint), border-color var(--dur) var(--ease-quint), box-shadow var(--dur) var(--ease-quint), transform var(--dur) var(--ease-quint); } .btn:active { transform: translateY(0) scale(0.985); } .btn--primary { background: var(--green-btn); color: #fff; box-shadow: var(--shadow-soft); } .btn--primary:hover { background: var(--green-btn-hover); transform: translateY(-1px); box-shadow: var(--shadow-card); } .btn--navy { background: var(--navy); color: #fff; box-shadow: var(--shadow-soft); } .btn--navy:hover { background: var(--navy-900); transform: translateY(-1px); box-shadow: var(--shadow-card); } .btn--outline-dark { background: transparent; color: var(--navy); border: 1px solid var(--navy); } .btn--outline-dark:hover { background: var(--navy); color: #fff; transform: translateY(-1px); } .btn--outline-light { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .btn--outline-light:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); } /* ---------- Component: hairline card hover ---------- */ .card-hover { transition: box-shadow var(--dur) var(--ease-quint), transform var(--dur) var(--ease-quint); } .card-hover:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); } /* ---------- Utility: no-scrollbar ---------- */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ---------- Lucide icons sized by font-size box ---------- */ [data-lucide] { width: 1em; height: 1em; } /* ---------- Refined page scrollbar (desktop) ---------- */ @media (pointer: fine) { html { scrollbar-color: #c4d2e2 transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-thumb { background: #c4d2e2; border-radius: 9999px; border: 3px solid var(--surface); } ::-webkit-scrollbar-thumb:hover { background: #a9bccf; } } /* ---------- Navbar dropdown sub-links ---------- */ .nav-sub-link { display: block; padding: 0.55rem 1.25rem; font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.78); transition: background-color var(--dur-fast) var(--ease-quint), color var(--dur-fast) var(--ease-quint), padding-left var(--dur-fast) var(--ease-quint); white-space: nowrap; } .nav-sub-link:hover { color: #d82a38; } /* ---------- Desktop dropdown visibility (hover-based, no JS needed) ---------- */ .nav-dropdown { padding-top: 0.5rem; min-width: 14rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), visibility 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.22, 1, 0.36, 1); transform: translateY(-4px); } /* Hover bridge: invisible band that fills the gap between the trigger button and the full-width dropdown so the cursor never leaves the hover area while travelling down to the menu. */ .nav-item::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 180px; height: 44px; pointer-events: none; } .nav-item:hover::after, .nav-item:focus-within::after { pointer-events: auto; } /* Show on hover OR when .open class is added by JS. Keep the dropdown interactive slightly longer via a short exit delay so a diagonal cursor path to the menu doesn't dismiss it. */ .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.open .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0ms; } .nav-dropdown { transition-delay: 120ms; } /* Chevron rotate on hover/open */ .nav-item:hover .nav-trigger [data-lucide="chevron-down"], .nav-item:focus-within .nav-trigger [data-lucide="chevron-down"], .nav-item.open .nav-trigger [data-lucide="chevron-down"] { transform: rotate(180deg); } .nav-trigger [data-lucide="chevron-down"] { transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); } /* Wider dropdowns per menu */ .nav-item:nth-child(3) .nav-dropdown { min-width: 18rem; } /* Corporate Activities */ .nav-item:nth-child(4) .nav-dropdown { min-width: 16rem; } /* Investor Relations */ /* ---------- Dropdown background change on scroll ---------- */ #site-header.scrolled { background: white !important; } #site-header.scrolled .nav-dropdown > div { background: #FFFFFF; border-bottom-color: #0e7bbc; } #site-header.scrolled .nav-sub-link { color: #0E1113; } #site-header.scrolled .nav-sub-link:hover { color: #d82a38; } /* ---------- Mobile accordion sub-links ---------- */ .mobile-sub-link { display: block; padding: 0.45rem 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); border-radius: var(--r-sm); transition: color var(--dur-fast) var(--ease-quint), background-color var(--dur-fast) var(--ease-quint); } .mobile-sub-link:hover { color: #064f93; background: #EAF0F7; } /* ---------- Marquee Animation ---------- */ @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } .animate-marquee { display: flex; width: max-content; animation: marquee 25s linear infinite; } .animate-marquee:hover { animation-play-state: paused; } /* ---------- Contact page office selector ---------- */ .office-tab { background: transparent; transition: background-color var(--dur-fast) var(--ease-quint), box-shadow var(--dur-fast) var(--ease-quint); } .office-tab:hover { background: #d82a380d; } .office-tab.is-active { background: #d82a3812; box-shadow: inset 2px 0 0 #d82a38; } .office-tab.is-active span:first-child, .office-tab:hover span:first-child { color: #d82a38; } /* Clickable office address → opens Google Maps */ .office-addr { transition: color var(--dur-fast) var(--ease-quint); } .office-addr:hover span:first-of-type { color: #d82a38; } .office-addr-hint { display: inline-flex; align-items: center; margin-top: 6px; font-weight: 600; color: #d82a38; opacity: 0.75; transition: opacity var(--dur-fast) var(--ease-quint); } .office-addr:hover .office-addr-hint { opacity: 1; text-decoration: underline; } /* Regional Offices grid — "rule of thirds": inner divider lines only, no outer border */ .office-grid > * { border-top: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb; } /* Mobile: single column — inner horizontal lines only, no left border */ .office-grid > * { border-left: 0; } .office-grid > *:first-child { border-top: 0; } /* Tablet: 2 columns */ @media (min-width: 768px) { .office-grid > * { border-left: 1px solid #e5e7eb; } .office-grid > *:nth-child(-n+2) { border-top: 0; } .office-grid > *:nth-child(2n+1) { border-left: 0; } } /* Desktop: 3 columns */ @media (min-width: 1024px) { .office-grid > *:nth-child(-n+3) { border-top: 0; } /* reset the tablet 2-col left-border rule */ .office-grid > *:nth-child(2n+1) { border-left: 1px solid #e5e7eb; } .office-grid > *:nth-child(3n+1) { border-left: 0; } }