/* ════════════════════════════════════════════════════════════════ TADAWI HOME — Tadawi brand identity Brand navy headings (#1A3662) · Red CTAs (#ED222D) · White header Font: Cairo (LTR + Arabic) ════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Cairo:wght@300;400;500;600;700;800&display=swap'); :root { /* Tadawi brand — navy + accent red. Variable NAMES (--td-teal, --td-coral) stay so existing rules keep working; values now resolve to the new palette. */ --td-teal: #1A3662; /* brand navy (primary) */ --td-teal-dark: #183457; /* darker navy */ --td-teal-light: #F5F8FD; /* tinted surface */ --td-coral: #ED222D; /* brand accent red */ --td-coral-dark: #C61C25; /* pressed/hover */ --td-coral-light: #FDE6E8; --td-dark: #122847; --td-dark2: #183457; /* Brand-spec semantic tokens (use in new rules) */ --brand-navy: #1A3662; --brand-navy-dark: #183457; --brand-red: #ED222D; /* Neutrals from brand spec */ --td-text: #2E2E2E; /* primary text */ --td-text-muted: #6E6E6E; /* muted text */ --td-text-tertiary: #535766; /* tertiary text */ --td-text-support: #646D74; /* supporting text */ /* Legacy --td-{900..50} ramp re-pointed at brand neutrals */ --td-900: #2E2E2E; --td-800: #2E2E2E; --td-700: #535766; --td-600: #646D74; --td-500: #6E6E6E; --td-400: #8A8F96; --td-300: #E5E7EB; --td-200: #E5E7EB; --td-100: #F7F9FA; --td-50: #FAFAFA; /* Surfaces */ --td-white: #FFFFFF; --td-offwhite: #FAFAFA; --td-shell: #F5F8FD; /* booking shell background */ --td-card: #F7F9FA; /* card background */ --td-line: #E5E7EB; /* borders / inactive */ } /* ══ RESET ══ */ .hp *, .hp *::before, .hp *::after { margin: 0; padding: 0; box-sizing: border-box; } .hp { font-family: 'Almarai', 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; color: var(--td-text); background: #fff; line-height: 1.6; } /* Over-scroll backgrounds: Browsers paint 's background on the rubber-band area at BOTH ends of the document. So = navy (= the footer color) makes bottom over-scroll appear as an infinite extension of the footer. The top is covered by the sticky white navbar; we add overscroll-behavior-y: contain to kill the rubber-band there so the navy never peeks above the navbar. stays transparent so it doesn't introduce a third color between html and the page chrome inside .hp. */ /* Both html AND body wear the footer color so neither rubber-band nor over-scroll past the bottom can ever expose white. `none` blocks the bounce entirely on iOS / Chromium so the page stops crisply at the footer edge. */ html { background: #122847; overscroll-behavior-y: none; } body { background: #122847; } [dir="rtl"] .hp { font-family: 'Almarai', 'Cairo', 'Tajawal', sans-serif; } .hp-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } /* ══════════════════════════════════════════════════════════════ HEADER — White like main site ══════════════════════════════════════════════════════════════ */ .hp-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; box-shadow: 0 2px 20px rgba(0,0,0,0.08); /* Promote to its own GPU layer so the browser composites it independently of the scrolling page. Without this, Chrome on some GPUs repaints the whole bar on each scroll frame and you see a 1px flash/jitter as scroll updates the page underneath. */ transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; contain: layout paint style; } .hp-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 56px; } .hp-logo-link { display: flex; align-items: center; } .hp-logo { height: 36px; width: auto; object-fit: contain; } @media (max-width: 640px) { .hp-header-inner { height: 52px; } .hp-logo { height: 30px; } } .hp-nav { display: flex; align-items: center; gap: 0.25rem; } .hp-nav-link { padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 600; color: var(--td-700); text-decoration: none; border-radius: 6px; transition: all 0.2s; } .hp-nav-link:hover { color: var(--td-teal); background: var(--td-teal-light); text-decoration: none; } .hp-nav-active { color: var(--td-coral); } .hp-nav-btn { display: inline-flex; align-items: center; padding: 0.55rem 1.25rem; font-size: 0.88rem; font-weight: 700; color: #fff; background: var(--td-coral); border-radius: 8px; text-decoration: none; margin-left: 0.5rem; transition: all 0.2s; box-shadow: 0 2px 8px rgba(237,34,45,0.25); } .hp-nav-btn:hover { background: var(--td-coral-dark); color: #fff; text-decoration: none; transform: translateY(-1px); } /* Mobile toggle (hamburger that morphs to X) */ .hp-mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; color: var(--td-700); border-radius: 8px; transition: background 0.2s ease; } .hp-mobile-toggle:hover { background: var(--td-100); } .hp-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 24px; height: 24px; } .hp-burger > span { display: block; width: 24px; height: 2.5px; background: var(--td-700); border-radius: 2px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; transform-origin: center; } .hp-burger.is-open > span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .hp-burger.is-open > span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hp-burger.is-open > span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ══════════════════════════════════════════════════════════════ HOME MOBILE DRAWER — full-screen, glassy backdrop, polished ══════════════════════════════════════════════════════════════ */ .hp-drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden; } .hp-drawer.is-open { pointer-events: auto; visibility: visible; } .hp-drawer-bg { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s ease; } .hp-drawer.is-open .hp-drawer-bg { opacity: 1; } /* Panel + head + close: unified with careers .t-nav-drawer-* spec so the mobile drawer reads identically across home / careers / supplier. */ .hp-drawer-panel { position: absolute; top: 0; bottom: 0; right: 0; width: min(360px, 88vw); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -8px 0 32px rgba(15, 23, 42, 0.15); overflow-y: auto; } .hp-drawer.is-open .hp-drawer-panel { transform: translateX(0); } .hp-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--td-100); } .hp-drawer-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--td-900); } .hp-drawer-brand img { height: 40px; width: auto; } .hp-drawer-brand div { display: flex; flex-direction: column; line-height: 1.2; } .hp-drawer-brand strong { font-size: 0.95rem; font-weight: 800; color: var(--td-900); } .hp-drawer-brand span { font-size: 0.7rem; color: var(--td-500); margin-top: 0.1rem; } .hp-drawer-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--td-100); border: none; border-radius: 10px; color: var(--td-700); cursor: pointer; transition: all 0.2s ease; } .hp-drawer-close:hover { background: var(--td-200); color: var(--td-900); } .hp-drawer-close svg { width: 18px; height: 18px; } /* Nav list — same padding/gap as careers .t-nav-drawer-links. */ .hp-drawer-nav { display: flex; flex-direction: column; padding: 1.25rem 1rem; gap: 0.25rem; flex-shrink: 0; } /* Unified drawer link spec — matches careers .t-nav-drawer-link AND the supplier React drawer. Same padding / font / gap / radius across all three modules so the mobile menu reads identically everywhere. */ .hp-drawer-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; font-size: 0.95rem; font-weight: 700; color: var(--td-700); text-decoration: none; border-radius: 10px; transition: all 0.2s ease; } .hp-drawer-link:hover { background: var(--td-100); color: var(--td-900); text-decoration: none; } .hp-drawer-link.is-active { background: var(--td-primary-50, #f0fdfa); color: var(--td-teal); } .hp-drawer-link svg { color: var(--td-500); flex-shrink: 0; } .hp-drawer-link:hover svg, .hp-drawer-link.is-active svg { color: var(--td-teal); } .hp-drawer-link > span:first-of-type { flex: 1 1 auto; min-width: 0; } .hp-drawer-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--td-coral); color: #fff; font-size: 0.65rem; font-weight: 800; line-height: 1; padding: 0.2rem 0.5rem; border-radius: 99px; min-width: 20px; height: 18px; width: auto; } /* Spacer pushes the bottom group (contact + CTAs + foot) to the bottom only when there's extra space */ .hp-drawer-spacer { flex: 1 1 auto; min-height: 0.5rem; } /* Quick contact card */ .hp-drawer-contact { margin: 0.4rem 0.85rem; padding: 0.85rem 1rem; background: linear-gradient(135deg, #183457, #1A3662); border-radius: 12px; color: #fff; box-shadow: 0 6px 18px rgba(26, 54, 98, 0.25); flex-shrink: 0; } .hp-drawer-contact-label { font-size: 0.65rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.78); margin-bottom: 0.35rem; } .hp-drawer-contact-phone { display: block; font-size: 1.25rem; font-weight: 900; color: #fff; text-decoration: none; letter-spacing: -0.3px; margin-bottom: 0.2rem; } .hp-drawer-contact-email { display: block; font-size: 0.8rem; color: rgba(255,255,255,0.85); text-decoration: none; } .hp-drawer-contact-email:hover { color: #fff; } /* CTAs */ .hp-drawer-cta { padding: 0.5rem 0.85rem 0.85rem; display: flex; flex-direction: column; gap: 0.5rem; flex-shrink: 0; } .hp-drawer-cta-primary, .hp-drawer-cta-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.88rem; font-weight: 800; font-family: inherit; border-radius: 10px; text-decoration: none; transition: all 0.2s ease; } .hp-drawer-cta-primary { background: linear-gradient(135deg, #ED222D, #C61C25); color: #fff; box-shadow: 0 6px 16px rgba(237, 34, 45, 0.32); } .hp-drawer-cta-primary:hover { transform: translateY(-1px); color: #fff; text-decoration: none; } .hp-drawer-cta-ghost { background: var(--td-100); color: var(--td-700); border: 1.5px solid transparent; } .hp-drawer-cta-ghost:hover { background: #fff; border-color: var(--td-200); color: var(--td-900); text-decoration: none; } .hp-drawer-foot { padding: 0.6rem 1rem 0.85rem; border-top: 1px solid var(--td-100); margin-top: auto; flex-shrink: 0; } .hp-drawer-foot p { font-size: 0.72rem; color: var(--td-400); text-align: center; margin: 0; } /* ══════════════════════════════════════════════════════════════ HERO — Centered, gradient background like main site ══════════════════════════════════════════════════════════════ */ .hp-hero { margin-top: 72px; position: relative; overflow: hidden; background: #ffffff; padding: 5rem 2rem 0; text-align: center; color: #0f172a; min-height: 760px; } /* Building panorama pinned to the bottom of the hero — matches main website */ .hp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 340px; background: url('/assets/tadawi_customization/images/tadawi-buillding.png') center bottom / contain no-repeat; pointer-events: none; z-index: 1; } .hp-hero-overlay { display: none; } /* remove the white wash — let the pattern show through */ @media (max-width: 768px) { /* Drop min-height so the hero shrinks to fit its content + building image naturally. The trust strip used to fill the lower half here; without it, a fixed min-height left a big white gap between the buttons and the building. The image is now appended as a sibling below content rather than absolutely-positioned, so it sits flush under the buttons. */ .hp-hero { min-height: 0; padding: 3.5rem 1rem 0; } .hp-hero::after { position: relative; display: block; height: 200px; margin-top: 1.5rem; } } @media (max-width: 480px) { .hp-hero { padding-top: 2.5rem; } .hp-hero::after { height: 160px; margin-top: 1.25rem; } } /* ── Hero pattern background (decorative) ── */ .hp-hero-pattern { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .hp-hero-pattern-grid { position: absolute; inset: -10%; width: 120%; height: 120%; opacity: 0; /* hide the old SVG grid, the Islamic pattern replaces it */ } /* Islamic geometric pattern — thin gray lines on white, matches main website */ .hp-hero-pattern-img { display: none; } .hp-hero::before { content: ""; position: absolute; inset: 0; background-image: url('/assets/tadawi_customization/images/background-pattern.png'); background-repeat: repeat; background-size: 640px auto; background-position: center top; opacity: 0.70; pointer-events: none; z-index: 0; } @media (max-width: 768px) { .hp-hero::before { background-size: 380px auto; opacity: 0.60; } } /* ── Branches grid — real locations from tadawigroup.com ── */ .hp-branch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .hp-branch-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--td-200); border-radius: 14px; text-decoration: none; color: inherit; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .hp-branch-card:hover { border-color: var(--td-teal); box-shadow: 0 10px 24px rgba(26, 54, 98, 0.10); transform: translateY(-2px); color: inherit; text-decoration: none; } .hp-branch-pin { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--td-teal-light); color: var(--td-teal); display: inline-flex; align-items: center; justify-content: center; } .hp-branch-pin svg { width: 22px; height: 22px; } .hp-branch-body { flex: 1; min-width: 0; } .hp-branch-body h3 { font-size: 1rem; font-weight: 800; color: var(--td-900); margin: 0 0 0.2rem; } .hp-branch-body p { font-size: 0.83rem; color: var(--td-500); margin: 0; line-height: 1.4; } .hp-branch-go { flex: 0 0 auto; color: var(--td-coral); opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; } .hp-branch-go svg { width: 18px; height: 18px; } .hp-branch-card:hover .hp-branch-go { opacity: 1; transform: translateX(0); } /* Floating ambient orbs — hidden on the light main-site-style hero */ .hp-hero-orb, .hp-hero-ekg { display: none; } .hp-hero-orb { position: absolute; border-radius: 50%; filter: blur(40px); pointer-events: none; } .hp-hero-orb-1 { top: -120px; left: -80px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(237, 34, 45, 0.35), transparent 70%); animation: hpHeroFloat 14s ease-in-out infinite; } .hp-hero-orb-2 { bottom: -150px; right: -100px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(74, 222, 128, 0.18), transparent 70%); animation: hpHeroFloat 18s ease-in-out infinite reverse; } .hp-hero-orb-3 { top: 30%; left: 55%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%); animation: hpHeroFloat 22s ease-in-out infinite; } /* EKG / heartbeat pulse along the bottom of the hero */ .hp-hero-ekg { position: absolute; bottom: 8%; left: 0; right: 0; width: 100%; height: 60px; opacity: 0.4; stroke-dasharray: 1500; stroke-dashoffset: 1500; animation: hpHeroEkg 4s linear infinite; } @keyframes hpHeroFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.08); } } @keyframes hpHeroEkg { 0% { stroke-dashoffset: 1500; } 60% { stroke-dashoffset: 0; opacity: 0.45; } 80% { opacity: 0.45; } 100% { stroke-dashoffset: -1500; opacity: 0.2; } } /* Brand anchor — small clickable badge top-right */ .hp-hero-anchor { display: none; } /* hide — the main nav logo already brands the page */ /* Eyebrow tag above the headline */ .hp-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; background: var(--td-teal-light); border: 1px solid rgba(26, 54, 98, 0.15); border-radius: 99px; font-size: 0.74rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--td-teal); margin-bottom: 1.25rem; animation: hpHeroEyebrow 0.6s ease both; } .hp-hero-eyebrow-dot { width: 8px; height: 8px; background: var(--td-coral); border-radius: 50%; box-shadow: 0 0 0 0 rgba(237, 34, 45, 0.6); animation: hpHeroPulseDot 2s ease-in-out infinite; } @keyframes hpHeroPulseDot { 0% { box-shadow: 0 0 0 0 rgba(237, 34, 45, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(237, 34, 45, 0); } 100% { box-shadow: 0 0 0 0 rgba(237, 34, 45, 0); } } @keyframes hpHeroEyebrow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Headline accent — subtle gradient sweep over the key words. Falls back to plain coral on browsers without `background-clip: text`. */ .hp-hero-accent { color: var(--td-coral); background: linear-gradient(120deg, var(--td-coral) 0%, #ff5b67 60%, var(--td-coral) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: hpHeroAccentShift 8s ease-in-out infinite; } @keyframes hpHeroAccentShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .hp-hero-accent { animation: none; } } /* Trust strip — under the buttons */ .hp-hero-trust { display: inline-flex; align-items: center; gap: 1.5rem; margin-top: 2.5rem; padding: 1rem 2rem; background: #ffffff; border: 1px solid var(--td-200); border-radius: 18px; box-shadow: 0 8px 24px rgba(26, 54, 98, 0.08); animation: hpFadeUp 0.7s ease 0.3s both; } .hp-hero-trust-item { text-align: center; min-width: 80px; } .hp-hero-trust-num { font-size: 1.7rem; font-weight: 900; line-height: 1; color: var(--td-teal); letter-spacing: -0.5px; } .hp-hero-trust-num sup { font-size: 0.9rem; color: var(--td-coral); margin-left: 1px; top: -0.6em; } .hp-hero-trust-lbl { font-size: 0.7rem; font-weight: 700; color: var(--td-500); margin-top: 0.35rem; text-transform: uppercase; letter-spacing: 0.8px; } .hp-hero-trust-sep { width: 1px; height: 36px; background: var(--td-200); } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .hp-hero-orb, .hp-hero-ekg, .hp-hero-eyebrow-dot { animation: none; } } .hp-hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; animation: hpFadeUp 0.7s ease both; } .hp-hero h1 { font-size: 3.4rem; font-weight: 900; line-height: 1.15; letter-spacing: -1.5px; margin-bottom: 1.5rem; color: #1A3662; /* deep navy blue like main site */ text-shadow: none; } .hp-hero p { font-size: 1.1rem; color: #475569; line-height: 1.75; margin-bottom: 2.25rem; max-width: 600px; margin-left: auto; margin-right: auto; font-weight: 500; text-shadow: none; } .hp-hero p strong { color: var(--td-coral); font-weight: 800; } .hp-hero-btns { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } /* ── Buttons (Coral primary like main site) ── */ .hp-btn-coral { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem; border-radius: 10px; font-size: 1rem; font-weight: 700; font-family: inherit; background: linear-gradient(135deg, var(--td-coral) 0%, #d61f29 100%); color: #fff; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(237,34,45,0.35), inset 0 1px 0 rgba(255,255,255,0.15); transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease; overflow: hidden; } .hp-btn-coral::before { /* Diagonal shimmer that sweeps across on hover. Pure transform so it stays GPU-only and never repaints the button surface. */ content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.7s ease; pointer-events: none; } .hp-btn-coral:hover { background: linear-gradient(135deg, var(--td-coral-dark) 0%, #b3181f 100%); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(237,34,45,0.45), inset 0 1px 0 rgba(255,255,255,0.18); color: #fff; text-decoration: none; } .hp-btn-coral:hover::before { transform: translateX(120%); } .hp-btn-coral:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .hp-btn-coral svg { width: 18px; height: 18px; transition: transform 0.25s ease; } .hp-btn-coral:hover svg { transform: translateX(2px); } [dir="rtl"] .hp-btn-coral:hover svg { transform: translateX(-2px); } .hp-badge { background: rgba(255,255,255,0.35); color: #fff; font-size: 0.72rem; padding: 0.15rem 0.55rem; border-radius: 99px; font-weight: 800; } .hp-btn-white { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem; border-radius: 10px; font-size: 1rem; font-weight: 700; font-family: inherit; background: #fff; color: var(--td-teal); text-decoration: none; border: 1px solid rgba(26,54,98,0.10); cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.08); transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease; } .hp-btn-white:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26,54,98,0.18); border-color: rgba(26,54,98,0.20); color: var(--td-teal); text-decoration: none; } .hp-btn-white:focus-visible { outline: 2px solid var(--td-teal); outline-offset: 3px; } .hp-btn-white svg { width: 18px; height: 18px; transition: transform 0.25s ease; } .hp-btn-white:hover svg { transform: translateX(2px); } [dir="rtl"] .hp-btn-white:hover svg { transform: translateX(-2px); } /* ══════════════════════════════════════════════════════════════ SECTIONS ══════════════════════════════════════════════════════════════ */ .hp-section { padding: 5rem 0; } .hp-section-gray { background: #f5f5f5; } .hp-section-head { text-align: center; max-width: 700px; margin: 0 auto 3.5rem; } .hp-section-head h2 { font-size: 2.2rem; font-weight: 800; color: var(--td-teal); line-height: 1.3; letter-spacing: -0.5px; margin-bottom: 1rem; } .hp-head-line { width: 60px; height: 4px; border-radius: 2px; background: var(--td-coral); margin: 0 auto 1.25rem; } .hp-section-head p { font-size: 1.05rem; color: var(--td-500); line-height: 1.7; } .hp-section-head p strong { color: var(--td-teal); } /* ══════════════════════════════════════════════════════════════ WHY CHOOSE US — 4 cards ══════════════════════════════════════════════════════════════ */ .hp-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .hp-why-card { background: #fff; border-radius: 16px; padding: 2rem 1.5rem; text-align: center; border: 1px solid var(--td-200); transition: all 0.3s; position: relative; overflow: hidden; } .hp-why-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--td-coral); transform: scaleX(0); transition: transform 0.3s; } .hp-why-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.1); border-color: transparent; } .hp-why-card:hover::before { transform: scaleX(1); } .hp-why-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--td-teal-light); color: var(--td-teal); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; transition: all 0.3s; } .hp-why-card:hover .hp-why-icon { background: var(--td-teal); color: #fff; } .hp-why-icon svg { width: 28px; height: 28px; } .hp-why-card h3 { font-size: 1.05rem; font-weight: 800; color: var(--td-900); margin-bottom: 0.75rem; line-height: 1.35; } .hp-why-card p { font-size: 0.88rem; color: var(--td-500); line-height: 1.6; } /* ══════════════════════════════════════════════════════════════ STATS — Dark bar with dividers ══════════════════════════════════════════════════════════════ */ .hp-stats { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--td-dark) 0%, var(--td-dark2) 100%); padding: 4rem 0; } .hp-stats-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(26,54,98,0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(237,34,45,0.08) 0%, transparent 50%); } .hp-stats-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; } .hp-stat { flex: 1; min-width: 160px; text-align: center; padding: 1rem 2rem; color: #fff; } .hp-stat-num { display: block; font-size: 2.8rem; font-weight: 900; letter-spacing: -1px; margin-bottom: 0.25rem; background: linear-gradient(135deg, #fff, rgba(255,255,255,0.8)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hp-stat-label { font-size: 0.88rem; font-weight: 500; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.5px; } .hp-stat-divider { width: 1px; height: 60px; background: rgba(255,255,255,0.12); flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════ DEPARTMENTS — Card grid ══════════════════════════════════════════════════════════════ */ .hp-dept-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .hp-dept-card { background: #fff; border-radius: 12px; padding: 1.5rem; text-align: center; border: 1px solid var(--td-200); transition: all 0.25s; cursor: default; } .hp-dept-card:hover { border-color: var(--td-teal); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); } .hp-dept-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--td-teal-light); color: var(--td-teal); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.85rem; transition: all 0.25s; } .hp-dept-card:hover .hp-dept-icon { background: var(--td-teal); color: #fff; } .hp-dept-icon svg { width: 24px; height: 24px; } .hp-dept-card span { font-size: 0.92rem; font-weight: 700; color: var(--td-800); } /* ══════════════════════════════════════════════════════════════ ACCREDITATIONS ══════════════════════════════════════════════════════════════ */ .hp-accred-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 1000px; margin: 0 auto; } .hp-accred-item { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--td-200); border-radius: 14px; padding: 1.1rem 1.25rem; text-align: left; transition: all 0.25s ease; } .hp-accred-item:hover { transform: translateY(-3px); border-color: var(--td-teal); box-shadow: 0 12px 24px rgba(13, 148, 136, 0.15); } .hp-accred-badge { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--td-teal-light), #d5f0f0); color: var(--td-teal); font-size: 0.95rem; font-weight: 900; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--td-teal); flex-shrink: 0; transition: all 0.25s ease; } .hp-accred-item:hover .hp-accred-badge { background: var(--td-teal); color: #fff; transform: scale(1.05); } .hp-accred-item span { font-size: 0.85rem; color: var(--td-600); line-height: 1.45; font-weight: 500; } /* ══════════════════════════════════════════════════════════════ CTA BANNER ══════════════════════════════════════════════════════════════ */ .hp-cta { position: relative; overflow: hidden; background: linear-gradient(135deg, #183457 0%, #1A3662 50%, #234578 100%); padding: 5rem 0; text-align: center; color: #fff; } .hp-cta-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 60%); } .hp-cta-inner { position: relative; z-index: 1; } .hp-cta h2 { font-size: 2.4rem; font-weight: 900; margin-bottom: 0.75rem; letter-spacing: -0.5px; } .hp-cta p { font-size: 1.1rem; color: rgba(255,255,255,0.8); max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.7; } /* ══════════════════════════════════════════════════════════════ CONTACT ══════════════════════════════════════════════════════════════ */ /* auto-fit + minmax keeps the row visually balanced regardless of how many cards are present. With 3 cards it lays out as 3 columns on desktop; with 2 they sit at a sensible width instead of stretching across the whole container. */ .hp-contact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; max-width: 1100px; margin: 0 auto; } .hp-contact-item { display: flex; align-items: center; gap: 1.25rem; background: #fff; border-radius: 12px; padding: 1.5rem; border: 1px solid var(--td-200); transition: all 0.25s; color: inherit; text-decoration: none; } .hp-contact-item:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-color: transparent; color: inherit; text-decoration: none; } .hp-contact-item--link { cursor: pointer; } .hp-contact-item--link:hover .hp-contact-ic { background: var(--td-coral); color: #fff; } .hp-contact-ic { transition: background 0.25s, color 0.25s; } .hp-contact-ic { width: 52px; height: 52px; border-radius: 12px; background: var(--td-coral-light); color: var(--td-coral); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hp-contact-ic svg { width: 24px; height: 24px; } .hp-contact-item h4 { font-size: 0.82rem; font-weight: 700; color: var(--td-900); margin-bottom: 0.15rem; text-transform: uppercase; letter-spacing: 0.5px; } .hp-contact-item p { font-size: 0.95rem; color: var(--td-600); } /* ══════════════════════════════════════════════════════════════ FOOTER — Dark like main site ══════════════════════════════════════════════════════════════ */ .hp-footer { background: var(--td-dark); color: rgba(255,255,255,0.6); padding: 4rem 0 0; } .hp-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; padding-bottom: 3rem; } .hp-footer-logo { height: 48px; background: #fff; border-radius: 10px; padding: 6px 16px; margin-bottom: 1rem; } .hp-footer-desc { font-size: 0.88rem; line-height: 1.7; color: rgba(255,255,255,0.5); } .hp-footer-col h4 { font-size: 0.82rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.25rem; } .hp-footer-col a { display: block; font-size: 0.88rem; color: rgba(255,255,255,0.5); text-decoration: none; padding: 0.3rem 0; transition: color 0.2s; } .hp-footer-col a:hover { color: var(--td-coral); } .hp-footer-phone { font-size: 1.4rem; font-weight: 800; color: var(--td-coral); margin-bottom: 0.35rem; } .hp-footer-email { font-size: 0.88rem; color: rgba(255,255,255,0.5); } .hp-footer-bar { border-top: 1px solid rgba(255,255,255,0.08); text-align: center; padding: 1.5rem 0; font-size: 0.8rem; color: rgba(255,255,255,0.3); } /* ══════════════════════════════════════════════════════════════ ANIMATIONS ══════════════════════════════════════════════════════════════ */ @keyframes hpFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════════════════════ RESPONSIVE — TABLET ══════════════════════════════════════════════════════════════ */ @media (max-width: 960px) { .hp-nav { display: none; } .hp-mobile-toggle { display: block; } .hp-hero h1 { font-size: 2.4rem; letter-spacing: -1px; } .hp-hero p { font-size: 1rem; } .hp-hero { padding: 5rem 1.5rem 5.5rem; } .hp-section-head h2 { font-size: 1.8rem; } .hp-why-grid { grid-template-columns: repeat(2, 1fr); } .hp-stats-inner { gap: 0; } .hp-stat { min-width: 140px; padding: 1rem; } .hp-stat-num { font-size: 2.2rem; } .hp-stat-divider { display: none; } .hp-dept-grid { grid-template-columns: repeat(2, 1fr); } .hp-contact-row { grid-template-columns: 1fr; } .hp-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } /* ══════════════════════════════════════════════════════════════ RESPONSIVE — MOBILE (≤640px) Tighter spacing, denser grids, better thumb targets ══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Tablet + phone shared rules: full-width buttons feel cramped on tablets, so we cap them at a sensible row width with auto-fit. */ .hp-hero-btns { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .hp-btn-coral, .hp-btn-white { flex: 0 1 auto; min-width: 180px; max-width: 280px; justify-content: center; } } @media (max-width: 640px) { .hp-container { padding: 0 1rem; } .hp-header-inner { padding: 0 1rem; height: 60px; } .hp-logo { height: 38px; } /* Hero — compact */ .hp-hero { margin-top: 60px; padding: 2.5rem 1rem 2.5rem; } .hp-hero-pattern-grid { opacity: 0.4; } .hp-hero-orb-1 { width: 240px; height: 240px; } .hp-hero-orb-2 { width: 280px; height: 280px; } .hp-hero-orb-3 { display: none; } .hp-hero-anchor { top: 12px; right: 12px; padding: 0.3rem 0.5rem 0.3rem 0.35rem; font-size: 0.68rem; } .hp-hero-anchor img { width: 22px; height: 22px; } .hp-hero-anchor span { display: none; } .hp-hero-eyebrow { font-size: 0.62rem; padding: 0.25rem 0.65rem; margin-bottom: 0.75rem; } .hp-hero h1 { font-size: 1.7rem; letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 0.85rem; } .hp-hero p { font-size: 0.88rem; margin-bottom: 1.25rem; line-height: 1.55; } /* Buttons — side-by-side row on phones, falling back to stack only when truly narrow. */ .hp-hero-btns { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 420px; margin-inline: auto; } .hp-btn-coral, .hp-btn-white { flex: 1 1 auto; min-width: 0; max-width: none; padding: 0.7rem 1rem; font-size: 0.85rem; justify-content: center; } .hp-hero-trust { display: flex; gap: 0; margin-top: 1.25rem; padding: 0.7rem 0.85rem; border-radius: 12px; width: 100%; max-width: 340px; justify-content: space-around; } .hp-hero-trust-item { min-width: 0; flex: 1; padding: 0 0.25rem; } .hp-hero-trust-num { font-size: 1.15rem; } .hp-hero-trust-num sup { font-size: 0.62rem; } .hp-hero-trust-lbl { font-size: 0.55rem; margin-top: 0.2rem; letter-spacing: 0.4px; } .hp-hero-trust-sep { height: 24px; } /* Sections — much tighter vertical rhythm on phones */ .hp-section { padding: 2.25rem 0; } .hp-section-head { margin-bottom: 1.75rem; } .hp-section-head h2 { font-size: 1.4rem; line-height: 1.2; } .hp-section-head p { font-size: 0.85rem; line-height: 1.5; } .hp-head-line { width: 50px; margin: 0.85rem auto; } /* Why-cards — keep 2-col on mobile (more compact than 1-col stack) */ .hp-why-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; } .hp-why-card { padding: 1rem 0.85rem; text-align: center; } .hp-why-card .hp-why-icon { margin: 0 auto 0.6rem; width: 44px; height: 44px; } .hp-why-card .hp-why-icon svg { width: 20px; height: 20px; } .hp-why-card h3 { font-size: 0.8rem; margin-bottom: 0.35rem; } .hp-why-card h3 br { display: none; } .hp-why-card p { font-size: 0.7rem; line-height: 1.45; } /* Stats — 2x2 grid, denser than vertical stack */ .hp-stats { padding: 2.25rem 0; } .hp-stats-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1rem; flex-direction: row; } .hp-stat { padding: 0.5rem 0.5rem; min-width: 0; } .hp-stat-num { font-size: 1.55rem; line-height: 1.1; } .hp-stat-label { font-size: 0.7rem; margin-top: 0.2rem; } /* Departments — 2-col with tighter cards */ .hp-dept-grid { grid-template-columns: 1fr 1fr; gap: 0.65rem; } .hp-dept-card { padding: 1rem 0.65rem; gap: 0.6rem; } .hp-dept-icon { width: 42px; height: 42px; } .hp-dept-icon svg { width: 20px; height: 20px; } .hp-dept-card span { font-size: 0.78rem; line-height: 1.25; } /* Accreditation — single column on mobile, badge+label inline */ .hp-accred-row { grid-template-columns: 1fr; gap: 0.6rem; } .hp-accred-item { padding: 0.85rem 1rem; gap: 0.85rem; } .hp-accred-badge { width: 48px; height: 48px; font-size: 0.78rem; border-radius: 10px; } .hp-accred-item span { font-size: 0.78rem; line-height: 1.4; } /* CTA */ .hp-cta { padding: 2.5rem 0; } .hp-cta h2 { font-size: 1.4rem; line-height: 1.2; margin-bottom: 0.4rem; } .hp-cta p { font-size: 0.85rem; margin-bottom: 1.25rem; } /* Contact — single column but tighter, cards smaller */ .hp-contact-row { grid-template-columns: 1fr; gap: 0.7rem; } .hp-contact-item { padding: 0.85rem 1rem; gap: 0.85rem; } .hp-contact-ic { width: 40px; height: 40px; flex-shrink: 0; } .hp-contact-ic svg { width: 20px; height: 20px; } .hp-contact-item h4 { font-size: 0.7rem; margin-bottom: 0.1rem; } .hp-contact-item p { font-size: 0.85rem; } /* Old footer fallback (not the v2 one) */ .hp-footer-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .hp-footer-logo { margin: 0 auto 1rem; } } /* Tiny phones (≤380px) — extra compaction */ @media (max-width: 380px) { .hp-hero h1 { font-size: 1.5rem; } .hp-hero p { font-size: 0.84rem; } .hp-section-head h2 { font-size: 1.25rem; } .hp-why-grid { grid-template-columns: 1fr; gap: 0.65rem; } .hp-stats-inner { grid-template-columns: 1fr; } .hp-stat-num { font-size: 1.7rem; } } /* ════════════════════════════════════════════════════════════════ ADVANCED FOOTER v2 — newsletter, multi-col nav, social, live card ════════════════════════════════════════════════════════════════ */ .hp-footer-v2 { position: relative; background: #0b1426; color: #cbd5e1; padding-top: 3rem; margin-top: 0; overflow: hidden; } /* Subtle radial accents */ .hp-footer-v2::before, .hp-footer-v2::after { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; z-index: 0; } .hp-footer-v2::before { background: radial-gradient(circle, rgba(26,54,98,0.18), transparent 70%); top: -300px; left: -200px; } .hp-footer-v2::after { background: radial-gradient(circle, rgba(237,34,45,0.10), transparent 70%); bottom: -300px; right: -200px; } /* ── Newsletter strip — overlaps top of footer ── */ .hp-footer-newsletter { position: relative; z-index: 2; max-width: 1100px; margin: -7rem auto 4rem; padding: 0 1.5rem; } .hp-footer-newsletter-inner { background: linear-gradient(135deg, #183457 0%, #1A3662 50%, #234578 100%); border-radius: 24px; padding: 2rem 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 2rem; box-shadow: 0 25px 50px -12px rgba(26,54,98,0.45), 0 0 0 1px rgba(255,255,255,0.08) inset; position: relative; overflow: hidden; } /* form col fills its grid cell */ .hp-footer-newsletter-form { width: 100%; min-width: 0; } .hp-footer-newsletter-inner::before { content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,0.06); pointer-events: none; } .hp-footer-newsletter-text { position: relative; z-index: 1; } .hp-footer-newsletter-text h3 { color: #fff; font-size: 1.4rem; font-weight: 800; margin-bottom: 0.35rem; letter-spacing: -0.3px; } .hp-footer-newsletter-text p { color: rgba(255,255,255,0.78); font-size: 0.92rem; margin: 0; } .hp-footer-newsletter-form { display: flex; gap: 0.5rem; position: relative; z-index: 1; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.4); border-radius: 14px; padding: 0.35rem; box-shadow: 0 6px 20px rgba(0,0,0,0.18); } .hp-footer-newsletter-form input { flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none; color: #0f172a; font-size: 0.92rem; padding: 0.7rem 1rem; font-family: inherit; font-weight: 500; } .hp-footer-newsletter-form input::placeholder { color: #94a3b8; } .hp-footer-newsletter-form button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.4rem; background: #ED222D; color: #fff; border: none; border-radius: 10px; font-weight: 700; font-size: 0.88rem; font-family: inherit; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(237,34,45,0.35); white-space: nowrap; } .hp-footer-newsletter-form button:hover { background: #C61C25; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(237,34,45,0.45); } .hp-footer-newsletter-thanks { display: inline-flex; align-items: center; gap: 0.6rem; background: rgba(255,255,255,0.18); color: #fff; padding: 0.85rem 1.4rem; border-radius: 12px; font-weight: 700; font-size: 0.92rem; border: 1px solid rgba(255,255,255,0.25); } /* ── Main footer grid ── */ .hp-footer-main { position: relative; z-index: 2; padding: 0 0 3rem; } .hp-footer-grid-v2 { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 3rem; align-items: start; } /* Brand col */ .hp-footer-brand { padding-right: 1rem; } .hp-footer-logo-v2 { height: 48px; background: #fff; padding: 0.5rem 0.75rem; border-radius: 12px; margin-bottom: 1.25rem; box-shadow: 0 4px 12px rgba(0,0,0,0.25); } .hp-footer-desc-v2 { color: rgba(203,213,225,0.75); font-size: 0.9rem; line-height: 1.65; margin-bottom: 1.25rem; } .hp-footer-trust { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; } .hp-footer-trust-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 99px; font-size: 0.7rem; color: rgba(203,213,225,0.9); font-weight: 600; } .hp-footer-trust-pill svg { color: #234578; flex-shrink: 0; } /* Social row */ .hp-footer-social { display: flex; gap: 0.5rem; } .hp-footer-social a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: rgba(203,213,225,0.8); transition: all 0.2s; } .hp-footer-social a:hover { background: #1A3662; border-color: #1A3662; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(26,54,98,0.4); } /* Nav columns */ .hp-footer-col-v2 h4 { color: #fff; font-size: 0.78rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 1.25rem; padding-bottom: 0.85rem; position: relative; } .hp-footer-col-v2 h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px; background: linear-gradient(90deg, #ED222D, transparent); border-radius: 2px; } .hp-footer-col-v2 ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; } .hp-footer-link-v2 { display: inline-flex; align-items: center; gap: 0.35rem; color: rgba(203,213,225,0.7); font-size: 0.88rem; text-decoration: none; transition: all 0.2s; padding: 0.15rem 0; } .hp-footer-link-arrow { opacity: 0; transform: translateX(-4px); transition: all 0.2s; color: #234578; } .hp-footer-link-v2:hover { color: #fff; transform: translateX(4px); text-decoration: none; } .hp-footer-link-v2:hover .hp-footer-link-arrow { opacity: 1; transform: translateX(0); } .hp-footer-badge { display: inline-block; background: #ED222D; color: #fff; font-size: 0.62rem; font-weight: 800; padding: 0.1rem 0.45rem; border-radius: 99px; margin-left: 0.4rem; min-width: 18px; text-align: center; line-height: 1.4; } /* Reach card */ .hp-footer-reach-card { background: linear-gradient(180deg, rgba(26,54,98,0.18), rgba(26,54,98,0.05)); border: 1px solid rgba(26,54,98,0.25); border-radius: 16px; padding: 1.5rem 1.4rem; position: relative; overflow: hidden; } .hp-footer-reach-pulse { position: absolute; top: 1rem; right: 1rem; width: 10px; height: 10px; } .hp-footer-reach-pulse span { display: block; width: 100%; height: 100%; background: #4ade80; border-radius: 50%; box-shadow: 0 0 0 0 rgba(74,222,128,0.7); animation: hpFooterPulse 2s ease-in-out infinite; } @keyframes hpFooterPulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.7); } 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } } .hp-footer-reach-label { color: rgba(203,213,225,0.75); font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 0.5rem; } .hp-footer-reach-phone { display: block; color: #fff; font-size: 1.85rem; font-weight: 900; letter-spacing: -0.5px; text-decoration: none; margin-bottom: 0.5rem; background: linear-gradient(135deg, #ED222D, #ff7350); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hp-footer-reach-phone:hover { opacity: 0.9; text-decoration: none; } .hp-footer-reach-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 0.85rem 0; } .hp-footer-reach-line { display: flex; align-items: center; gap: 0.5rem; color: rgba(203,213,225,0.85); font-size: 0.82rem; margin-bottom: 0.45rem; text-decoration: none; transition: color 0.2s; } .hp-footer-reach-line:hover { color: #fff; text-decoration: none; } .hp-footer-reach-line svg { color: #234578; flex-shrink: 0; } /* Bottom bar */ .hp-footer-bottom { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,0.08); padding: 1.25rem 0; background: rgba(0,0,0,0.2); } .hp-footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.78rem; color: rgba(203,213,225,0.6); } .hp-footer-bottom-inner strong { color: #fff; font-weight: 700; } .hp-footer-bottom-right { display: flex; align-items: center; gap: 0.65rem; } .hp-footer-bottom-right a { color: rgba(203,213,225,0.7); text-decoration: none; transition: color 0.2s; } .hp-footer-bottom-right a:hover { color: #fff; } .hp-footer-totop { display: inline-flex; align-items: center; gap: 0.3rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(203,213,225,0.85); padding: 0.4rem 0.85rem; border-radius: 99px; font-size: 0.78rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.2s; } .hp-footer-totop:hover { background: #1A3662; border-color: #1A3662; color: #fff; transform: translateY(-1px); } /* ── Responsive ── */ @media (max-width: 1024px) { .hp-footer-grid-v2 { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .hp-footer-brand { grid-column: span 2; padding-right: 0; } .hp-footer-reach { grid-column: span 2; } } @media (max-width: 640px) { /* Compact mobile footer — half the scroll length of the desktop layout */ .hp-footer-v2 { padding-top: 2rem; } /* Newsletter: tighter card, inline form */ .hp-footer-newsletter { margin: -3.5rem auto 2rem; padding: 0 1rem; } .hp-footer-newsletter-inner { grid-template-columns: 1fr; padding: 1.25rem 1.25rem 1rem; gap: 0.85rem; text-align: center; border-radius: 18px; } .hp-footer-newsletter-text h3 { font-size: 1.1rem; margin-bottom: 0.25rem; } .hp-footer-newsletter-text p { font-size: 0.82rem; } .hp-footer-newsletter-form { flex-direction: row; gap: 0.4rem; padding: 0.35rem; } .hp-footer-newsletter-form input { min-width: 0; width: 100%; padding: 0.55rem 0.85rem; font-size: 0.85rem; text-align: left; } .hp-footer-newsletter-form button { padding: 0.55rem 0.95rem; font-size: 0.78rem; } .hp-footer-newsletter-form button svg { display: none; } /* Main grid — 2 columns for nav, brand+reach span full width */ .hp-footer-main { padding: 0 0 1.5rem; } .hp-footer-grid-v2 { grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; text-align: left; } /* Brand block: compact, centered, single row */ .hp-footer-brand { grid-column: span 2; padding-right: 0; text-align: center; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .hp-footer-logo-v2 { display: inline-block; height: 38px; padding: 0.35rem 0.6rem; margin-bottom: 0.75rem; } .hp-footer-desc-v2 { font-size: 0.8rem; line-height: 1.55; margin-bottom: 0.85rem; } .hp-footer-trust { justify-content: center; gap: 0.3rem; margin-bottom: 0.85rem; } .hp-footer-trust-pill { font-size: 0.65rem; padding: 0.25rem 0.55rem; } .hp-footer-social { justify-content: center; gap: 0.4rem; } .hp-footer-social a { width: 34px; height: 34px; } /* Nav columns: tight headers, compact link rows */ .hp-footer-col-v2 h4 { font-size: 0.7rem; margin-bottom: 0.65rem; padding-bottom: 0.55rem; letter-spacing: 1.2px; } .hp-footer-col-v2 ul { gap: 0.4rem; } .hp-footer-link-v2 { font-size: 0.82rem; padding: 0; } /* Always show the arrow on mobile (no hover) so it doesn't feel empty */ .hp-footer-link-arrow { opacity: 1; transform: translateX(0); } /* Reach card: compact and full-width below nav cols */ .hp-footer-reach { grid-column: span 2; margin-top: 0.5rem; } .hp-footer-reach-card { padding: 1rem 1.1rem; border-radius: 14px; text-align: center; } .hp-footer-reach-pulse { top: 0.75rem; right: 0.75rem; } .hp-footer-reach-label { font-size: 0.62rem; margin-bottom: 0.25rem; } .hp-footer-reach-phone { font-size: 1.5rem; margin-bottom: 0.35rem; } .hp-footer-reach-divider { margin: 0.55rem 0; } .hp-footer-reach-line { font-size: 0.75rem; justify-content: center; margin-bottom: 0.3rem; } /* Bottom bar: single row, smaller text */ .hp-footer-bottom { padding: 0.85rem 0; } .hp-footer-bottom-inner { flex-direction: column-reverse; text-align: center; gap: 0.5rem; font-size: 0.7rem; } .hp-footer-bottom-right { gap: 0.5rem; font-size: 0.72rem; } .hp-footer-totop { padding: 0.3rem 0.7rem; font-size: 0.7rem; } } /* ══════════════════════════════════════════════════════════════ HOME NAVBAR — Logged-in user pill + dropdown ══════════════════════════════════════════════════════════════ */ .hp-user { position: relative; } .hp-user-trigger { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.85rem 0.3rem 0.35rem; background: var(--td-100); border: 1px solid transparent; border-radius: 99px; cursor: pointer; font-family: inherit; transition: all 0.2s ease; } .hp-user-trigger:hover { background: #fff; border-color: var(--td-200); box-shadow: 0 2px 8px rgba(15,23,42,0.06); } .hp-user.is-open .hp-user-trigger { background: #fff; border-color: var(--td-200); box-shadow: 0 4px 14px rgba(15,23,42,0.08); } .hp-user-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #1A3662, #183457); color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.5px; } .hp-user-avatar img { width: 100%; height: 100%; object-fit: cover; } .hp-user-name { font-size: 0.85rem; font-weight: 700; color: var(--td-900); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hp-user-chevron { color: var(--td-500); transition: transform 0.2s ease; } .hp-user.is-open .hp-user-chevron { transform: rotate(180deg); } /* Avatar-only variant — round trigger that's just the avatar circle. Name moves into the dropdown header. */ .hp-user.is-avatar-only .hp-user-trigger { gap: 0; padding: 2px; background: transparent; border-color: var(--td-200); } .hp-user.is-avatar-only .hp-user-trigger:hover { background: #fff; border-color: var(--td-teal); } .hp-user.is-avatar-only.is-open .hp-user-trigger { background: #fff; border-color: var(--td-teal); } /* Dropdown header — shows the user's name + email at the top of the menu. */ .hp-user-menu-header { padding: 0.7rem 0.85rem 0.55rem; } .hp-user-menu-header-name { font-size: 0.92rem; font-weight: 800; color: var(--td-900); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hp-user-menu-header-email { font-size: 0.78rem; color: var(--td-500); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hp-user-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: #fff; border: 1px solid var(--td-200); border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(15,23,42,0.18); padding: 0.4rem; z-index: 60; animation: hpUserMenuIn 0.18s ease; } @keyframes hpUserMenuIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .hp-user-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 8px; font-size: 0.86rem; font-weight: 600; color: var(--td-700); text-decoration: none; width: 100%; background: transparent; border: none; font-family: inherit; cursor: pointer; text-align: left; transition: all 0.15s ease; } .hp-user-item:hover { background: var(--td-100); color: var(--td-900); text-decoration: none; } .hp-user-item.is-danger { color: var(--td-coral); } .hp-user-item.is-danger:hover { background: #fef2f2; color: var(--td-coral); } .hp-user-item svg { color: var(--td-500); flex-shrink: 0; } .hp-user-item.is-danger svg { color: var(--td-coral); } .hp-user-pill { margin-left: auto; background: var(--td-coral); color: #fff; font-size: 0.62rem; font-weight: 800; padding: 0.1rem 0.45rem; border-radius: 99px; min-width: 18px; text-align: center; } .hp-user-sep { height: 1px; background: var(--td-100); margin: 0.4rem 0.5rem; } /* Mobile drawer — logged-in user card */ .hp-drawer-user { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.85rem; background: var(--td-100); border-radius: 12px; margin-bottom: 0.5rem; } .hp-drawer-user-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #1A3662, #183457); color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 0.85rem; font-weight: 800; flex-shrink: 0; } .hp-drawer-user-avatar img { width: 100%; height: 100%; object-fit: cover; } .hp-drawer-user-meta { display: flex; flex-direction: column; min-width: 0; } .hp-drawer-user-meta strong { font-size: 0.92rem; font-weight: 800; color: var(--td-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hp-drawer-user-meta span { font-size: 0.72rem; color: var(--td-500); margin-top: 0.1rem; } .hp-drawer-cta-ghost.is-danger { background: #fef2f2; color: var(--td-coral); } .hp-drawer-cta-ghost.is-danger:hover { background: #fee2e2; color: var(--td-coral); } /* ════════════════════════════════════════════════════════════════ COMPACT MINI FOOTER — single row, minimal, matches main-site tone ════════════════════════════════════════════════════════════════ */ .hp-footer-mini { position: relative; background: radial-gradient(ellipse at 90% -50%, rgba(237,34,45,0.12), transparent 60%), linear-gradient(180deg, #0e172c 0%, #122847 100%); color: #cbd5e1; padding: 0.6rem 0; font-size: 0.75rem; border-top: 1px solid rgba(255,255,255,0.06); } .hp-footer-mini::before { /* Thin red accent line at the top of the footer — visual full-stop that picks up the brand red without shouting. */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--td-coral), transparent); opacity: 0.55; } .hp-footer-mini-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; } .hp-footer-mini-brand { display: inline-flex; align-items: center; gap: 0.65rem; min-width: 0; } .hp-footer-mini-logo { height: 22px; width: auto; background: #fff; padding: 2px 5px; border-radius: 6px; } .hp-footer-mini-brand span { color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hp-footer-mini-nav { display: inline-flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } .hp-footer-mini-nav a { color: #cbd5e1; text-decoration: none; position: relative; transition: color .2s ease; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0; } .hp-footer-mini-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--td-coral); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } [dir="rtl"] .hp-footer-mini-nav a::after { transform-origin: right; } .hp-footer-mini-nav a:hover { color: #fff; text-decoration: none; } .hp-footer-mini-nav a:hover::after { transform: scaleX(1); } .hp-footer-mini-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--td-coral); color: #fff; font-size: 0.64rem; font-weight: 800; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 99px; } @media (max-width: 640px) { .hp-footer-mini { padding: 0.85rem 0; font-size: 0.78rem; } .hp-footer-mini-inner { flex-direction: column; text-align: center; gap: 0.6rem; } .hp-footer-mini-nav { gap: 0.75rem; justify-content: center; } } /* ════════════════════════════════════════════════════════════════ PRE-MOUNT BOOT SPLASH Sits OUTSIDE #home-root as a fixed overlay so React can mount cleanly into an empty container. A small JS observer in home.html removes this overlay once React inserts its first child (with a 10s safety bail-out). ════════════════════════════════════════════════════════════════ */ .hp-boot-splash { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; background: #FAFAFA; transition: opacity 0.25s ease; } .hp-boot-logo { height: 56px; width: auto; opacity: 0.92; animation: hp-boot-pulse 1.6s ease-in-out infinite; } .hp-boot-spinner { width: 36px; height: 36px; border: 3px solid var(--td-200, #E5E7EB); border-top-color: var(--brand-navy, #1A3662); border-radius: 50%; animation: hp-boot-spin 0.8s linear infinite; } @keyframes hp-boot-spin { to { transform: rotate(360deg); } } @keyframes hp-boot-pulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } } @media (prefers-reduced-motion: reduce) { .hp-boot-logo, .hp-boot-spinner { animation: none; } } /* ══════════════════════════════════════════════════════════════ SUPPLIER PORTAL SECTION Featured promotion of /supplier on the home page. Uses the same .hp-section / .hp-container / .hp-section-head idioms as the other sections (BRANCHES, ABOUT) so it feels native. ══════════════════════════════════════════════════════════════ */ .hp-supplier-section { background: linear-gradient(180deg, #f5f8fd 0%, #ffffff 100%); position: relative; } .hp-supplier-section .hp-section-head { max-width: 720px; } .hp-supplier-eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--td-coral); margin-bottom: 0.6rem; } .hp-supplier-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2.5rem; } .hp-supplier-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 1.5rem 1.25rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; display: flex; flex-direction: column; gap: 0.65rem; } .hp-supplier-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px -16px rgba(26, 54, 98, 0.20); border-color: rgba(26, 54, 98, 0.25); } .hp-supplier-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--td-teal-light); color: var(--td-teal); border-radius: 12px; } .hp-supplier-icon svg { width: 22px; height: 22px; } .hp-supplier-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--td-teal); margin: 0; } .hp-supplier-card p { font-size: 0.92rem; color: var(--td-700); line-height: 1.6; margin: 0; } /* Inline CTA band — navy block sitting at the bottom of the section. Layered backdrop: navy gradient + soft red glow + faint dot grid for depth. Compositor-friendly: pseudo-elements only, no animation on the band itself. */ .hp-supplier-cta { position: relative; margin-top: 2.5rem; background: radial-gradient(ellipse at 110% -20%, rgba(237,34,45,0.30), transparent 55%), radial-gradient(ellipse at -10% 130%, rgba(255,255,255,0.08), transparent 60%), linear-gradient(135deg, #1f3d6e 0%, var(--td-teal) 55%, var(--td-dark) 100%); color: #fff; border-radius: 22px; padding: 2rem 2.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; box-shadow: 0 30px 70px -28px rgba(26, 54, 98, 0.55); border: 1px solid rgba(255,255,255,0.06); overflow: hidden; } .hp-supplier-cta::before { /* Subtle 1-px dot grid for texture — keeps the band from feeling like a flat color block. */ content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); } .hp-supplier-cta > * { position: relative; z-index: 1; } .hp-supplier-cta-text h3 { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.35rem; letter-spacing: -0.01em; } .hp-supplier-cta-text p { font-size: 0.95rem; color: rgba(255,255,255,0.78); margin: 0; } .hp-supplier-cta-btns { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .hp-btn-outline-white { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.25rem; font-size: 0.92rem; font-weight: 700; color: #fff; background: transparent; border: 1.5px solid rgba(255,255,255,0.55); border-radius: 10px; text-decoration: none; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .hp-btn-outline-white:hover { background: rgba(255,255,255,0.10); border-color: #fff; transform: translateY(-1px); color: #fff; text-decoration: none; } .hp-btn-outline-white svg { width: 18px; height: 18px; } /* Mobile tweaks */ @media (max-width: 768px) { .hp-supplier-cta { flex-direction: column; align-items: stretch; text-align: center; padding: 1.5rem 1.25rem; } .hp-supplier-cta-btns { justify-content: center; } .hp-supplier-grid { gap: 1rem; } } /* ════════════════════════════════════════════════════════════════ MODULE PICKER — two big entry cards on the home page. Goal: make the module separation immediately obvious. Each card is a full link surface; on hover it lifts and the icon brightens. ════════════════════════════════════════════════════════════════ */ .hp-modules-section { background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); } .hp-modules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; } @media (min-width: 1024px) { .hp-modules-grid:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Card layout — vertical stack, plenty of room for header + body + CTA. */ .hp-module-card { display: flex; flex-direction: column; gap: 1rem; padding: 2rem 1.75rem; border-radius: 1rem; border: 1px solid #e2e8f0; background: #fff; color: #0f172a; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .hp-module-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.25); border-color: #cbd5e1; text-decoration: none; color: #0f172a; } /* Header row — icon + (eyebrow + title), inline. */ .hp-module-card > .hp-module-icon { width: 64px; height: 64px; border-radius: 0.875rem; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .hp-module-card > .hp-module-icon svg { width: 28px; height: 28px; } .hp-module-careers > .hp-module-icon { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); } .hp-module-supplier > .hp-module-icon { background: linear-gradient(135deg, #0f3a5e 0%, #1e3a8a 100%); } .hp-module-staff > .hp-module-icon { background: linear-gradient(135deg, #475569 0%, #1f2937 100%); } .hp-module-body { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; flex: 1; /* fill the card so .hp-module-actions can be pushed to the bottom */ } .hp-module-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #64748b; } .hp-module-card h3 { font-size: 1.5rem; font-weight: 800; margin: 0; color: #0f3a5e; line-height: 1.2; } .hp-module-card p { font-size: 0.92rem; line-height: 1.55; color: #475569; margin: 0; } /* Actions row — full-width button on its own line, meta items below. */ .hp-module-actions { margin-top: auto; /* push actions to the bottom of the card */ padding-top: 0.5rem; display: flex; flex-direction: column; align-items: stretch; gap: 0.625rem; } .hp-module-actions .hp-btn-coral { /* Re-style the coral CTA INSIDE the module card so it renders as a compact, full-width button without the global drop-shadow glow. Pointer-events stay enabled because the whole is the click target — the inner span is purely visual. */ pointer-events: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.75rem 1rem; font-size: 0.95rem; font-weight: 700; white-space: nowrap; box-shadow: none; filter: none; } .hp-module-actions .hp-btn-coral svg { width: 16px; height: 16px; flex-shrink: 0; } .hp-module-meta { font-size: 0.8rem; font-weight: 600; color: #64748b; text-align: center; } .hp-module-meta-link { pointer-events: auto; /* override card-level pointer-events */ color: #0f3a5e; text-decoration: underline; text-underline-offset: 3px; display: inline-block; } .hp-module-meta-link:hover { color: #ea580c; } @media (max-width: 768px) { .hp-modules-grid { grid-template-columns: 1fr; gap: 1rem; } .hp-module-card { padding: 1.5rem 1.25rem; gap: 0.875rem; } .hp-module-card > .hp-module-icon { width: 56px; height: 56px; } .hp-module-card > .hp-module-icon svg { width: 24px; height: 24px; } .hp-module-card h3 { font-size: 1.25rem; } } /* ════════════════════════════════════════════════════════════════ v2 home polish — appended 2026-05 Scroll-reveal, module-picker accents, hover-lift refinements, visual rhythm. Layered on top of base styles so the enhancement is reversible (delete this block to fall back). ════════════════════════════════════════════════════════════════ */ /* — Scroll reveal — useReveal hook adds .is-visible the first time a node intersects the viewport. Honor reduced-motion preference. */ .hp-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: opacity, transform; } .hp-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .hp-reveal { opacity: 1; transform: none; transition: none; } } /* — Module-picker: brand gradient top accent + prominent CTA — The accent bar gives each card a colored "spine" that ties the card to its module's brand color (coral careers, navy supplier, slate staff). It only animates in on hover so the resting state stays clean. */ .hp-module-card { position: relative; overflow: hidden; } .hp-module-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #f97316 0%, #ea580c 100%); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } html[dir="rtl"] .hp-module-card::before { transform-origin: right center; } .hp-module-supplier::before { background: linear-gradient(90deg, #0f3a5e 0%, #1e3a8a 100%); } .hp-module-staff::before { background: linear-gradient(90deg, #475569 0%, #1f2937 100%); } .hp-module-card:hover::before, .hp-module-card:focus-visible::before { transform: scaleX(1); } .hp-module-card:hover { transform: translateY(-6px); box-shadow: 0 28px 48px -22px rgba(15, 23, 42, 0.32); } .hp-module-card:hover > .hp-module-icon { transform: scale(1.06); } .hp-module-card > .hp-module-icon { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.35); } /* — Hover-lift refinement on existing card families — Why / Branch / Supplier-feature cards: smoother, slightly more pronounced lift, and a soft halo. Doesn't change resting state. */ .hp-why-card, .hp-branch-card, .hp-supplier-feature { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease; } .hp-why-card:hover, .hp-supplier-feature:hover { transform: translateY(-4px); box-shadow: 0 22px 38px -22px rgba(15, 58, 94, 0.28); } .hp-branch-card:hover { transform: translateY(-4px); } /* — Tighter visual rhythm — Consistent breathing room between sections, and a subtle divider gradient under section eyebrows so the page reads as a flowing narrative, not a list of boxes. */ .hp-reveal + .hp-reveal { margin-top: 0; /* let each section's own padding-top govern spacing */ } @media (prefers-reduced-motion: no-preference) { .hp-modules-section .hp-module-card { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.18s ease; } } /* ════════════════════════════════════════════════════════════════ .tdw-drawer — UNIFIED MOBILE COMMAND-PALETTE OVERLAY (home / careers / supplier — mirror to careers.css + supplier index.css) Aesthetic: Apple-style centered floating card. Premium, refined. * Backdrop: deep navy + heavy blur — page is a soft ghost * Card: rounded glass with a subtle gradient halo behind it * Identity: top-of-card pill with avatar + name + role chip * Nav: 2-col grid of horizontal-layout buttons (icon tile + label) * Footer: lang pill + sign-out pill, side by side * Entry: backdrop fades, card scales in with overshoot, content stagger ════════════════════════════════════════════════════════════════ */ .tdw-drawer { position: fixed; inset: 0; z-index: 100; pointer-events: none; visibility: hidden; transition: visibility 0s linear 0.4s; } .tdw-drawer.is-open { pointer-events: auto; visibility: visible; transition-delay: 0s; } /* ── Backdrop — deep dim + heavy blur. Click closes. ── */ .tdw-drawer-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(26, 54, 98, 0.45), transparent 70%), rgba(2, 8, 20, 0.65); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); opacity: 0; transition: opacity 0.3s ease-out; cursor: pointer; } .tdw-drawer.is-open .tdw-drawer-bg { opacity: 1; } /* ── Panel — centered floating card with a halo behind it. ── */ .tdw-drawer-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.92); width: min(440px, calc(100vw - 1.5rem)); max-height: min(90vh, 760px); display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.98); border-radius: 24px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 30px 80px -20px rgba(0, 0, 0, 0.55), 0 12px 40px -16px rgba(26, 54, 98, 0.45); opacity: 0; transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.4, 1), /* gentle overshoot */ opacity 0.3s ease-out; overflow: hidden; } .tdw-drawer.is-open .tdw-drawer-panel { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* Decorative halo gradient behind the card */ .tdw-drawer-panel::before { content: ""; position: absolute; inset: -2px; border-radius: 26px; background: linear-gradient(135deg, rgba(237, 34, 45, 0.35) 0%, rgba(26, 54, 98, 0.25) 50%, rgba(237, 34, 45, 0.2) 100%); z-index: -1; filter: blur(18px); opacity: 0.7; } .tdw-drawer-panel.is-start, .tdw-drawer-panel.is-end { top: 50%; left: 50%; } /* ── Header — close button only (top-end). Floats on top, no chrome. ── */ .tdw-drawer-head { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0.85rem 0.85rem 0; } .tdw-drawer-close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9; border: none; border-radius: 12px; color: #475569; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.18s ease; } .tdw-drawer-close:hover { background: #e2e8f0; color: #0f172a; } .tdw-drawer-close:active { transform: scale(0.92) rotate(90deg); } .tdw-drawer-close svg { width: 18px; height: 18px; } /* ── Body — fits without scroll. Centered layout. ── */ .tdw-drawer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem 1.25rem 0.75rem; overflow: hidden; } /* ── Identity — top pill with avatar + name + role chip ── */ .tdw-drawer-identity { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem 0.55rem 0.55rem; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid #e2e8f0; border-radius: 99px; opacity: 0; transform: translateY(-6px); transition: opacity 0.35s ease-out 0.05s, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s; } [dir="rtl"] .tdw-drawer-identity { padding: 0.55rem 0.55rem 0.55rem 0.8rem; } .tdw-drawer.is-open .tdw-drawer-identity { opacity: 1; transform: translateY(0); } .tdw-drawer-identity-avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #ED222D, #C01C26); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; box-shadow: 0 3px 8px -2px rgba(237, 34, 45, 0.45); } .tdw-drawer-identity-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .tdw-drawer-identity-text { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; } .tdw-drawer-identity-name { font-size: 0.88rem; font-weight: 800; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tdw-drawer-identity-meta { display: none; } .tdw-drawer-identity-role { margin-top: 0.05rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; } /* ── Section — 2-column grid ── */ .tdw-drawer-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .tdw-drawer-section-label { display: none; } /* ── Nav button — refined horizontal tile ── */ .tdw-drawer-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0.7rem; font-weight: 700; color: #1e293b; text-decoration: none; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; position: relative; min-height: 60px; opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .tdw-drawer.is-open .tdw-drawer-link { opacity: 1; transform: translateY(0); } .tdw-drawer-link:hover { color: #0f172a; border-color: #cbd5e1; text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.22); } .tdw-drawer-link.is-active { color: #fff; background: linear-gradient(135deg, #1A3662 0%, #0f2546 100%); border-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 8px 20px -6px rgba(26, 54, 98, 0.45); } /* Icon tile — 32px rounded square with brand-shell bg. Slightly smaller than the original 36px to leave more room for long 2-line labels like "Purchase Orders". */ .tdw-drawer-link svg { flex-shrink: 0; width: 32px; height: 32px; padding: 7px; background: #f1f5f9; color: #1A3662; border-radius: 10px; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } .tdw-drawer-link:hover svg { background: #e0e7ff; transform: scale(1.06); } .tdw-drawer-link.is-active svg { background: #ED222D; color: #fff; box-shadow: 0 3px 8px -2px rgba(237, 34, 45, 0.6); } /* Label: allow up to 2 lines so long names ("Purchase Orders", "Book a Meeting") fit fully instead of truncating. */ .tdw-drawer-link > span:not(.tdw-drawer-badge) { flex: 1 1 auto; min-width: 0; font-size: 0.82rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .tdw-drawer-badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 0.45rem; background: #ED222D; color: #fff; font-size: 0.65rem; font-weight: 800; border-radius: 99px; box-shadow: 0 2px 5px rgba(237, 34, 45, 0.4); } .tdw-drawer-link.is-active .tdw-drawer-badge { background: #fff; color: #ED222D; } /* Stagger items in on open */ .tdw-drawer.is-open .tdw-drawer-link:nth-child(1) { transition-delay: 0.08s, 0.08s, 0s, 0s, 0s, 0s; } .tdw-drawer.is-open .tdw-drawer-link:nth-child(2) { transition-delay: 0.12s, 0.12s, 0s, 0s, 0s, 0s; } .tdw-drawer.is-open .tdw-drawer-link:nth-child(3) { transition-delay: 0.16s, 0.16s, 0s, 0s, 0s, 0s; } .tdw-drawer.is-open .tdw-drawer-link:nth-child(4) { transition-delay: 0.20s, 0.20s, 0s, 0s, 0s, 0s; } .tdw-drawer.is-open .tdw-drawer-link:nth-child(5) { transition-delay: 0.24s, 0.24s, 0s, 0s, 0s, 0s; } .tdw-drawer.is-open .tdw-drawer-link:nth-child(6) { transition-delay: 0.28s, 0.28s, 0s, 0s, 0s, 0s; } .tdw-drawer.is-open .tdw-drawer-link:nth-child(7) { transition-delay: 0.32s, 0.32s, 0s, 0s, 0s, 0s; } .tdw-drawer.is-open .tdw-drawer-link:nth-child(8) { transition-delay: 0.36s, 0.36s, 0s, 0s, 0s, 0s; } .tdw-drawer.is-open .tdw-drawer-link:nth-child(9) { transition-delay: 0.40s, 0.40s, 0s, 0s, 0s, 0s; } .tdw-drawer.is-open .tdw-drawer-link:nth-child(10) { transition-delay: 0.44s, 0.44s, 0s, 0s, 0s, 0s; } .tdw-drawer.is-open .tdw-drawer-link:nth-child(11) { transition-delay: 0.48s, 0.48s, 0s, 0s, 0s, 0s; } .tdw-drawer.is-open .tdw-drawer-link:nth-child(12) { transition-delay: 0.52s, 0.52s, 0s, 0s, 0s, 0s; } /* ── Footer — language pill + sign-out pill, side by side ── */ /* Footer — language pill + sign-out share ONE horizontal row, each taking equal flex so they balance visually. */ .tdw-drawer-foot { flex-shrink: 0; padding: 0.85rem 1.25rem 1rem; display: flex; flex-direction: row; align-items: stretch; gap: 0.5rem; border-top: 1px solid #f1f5f9; margin-top: 0.5rem; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease-out 0.55s, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s; } .tdw-drawer.is-open .tdw-drawer-foot { opacity: 1; transform: translateY(0); } .tdw-drawer-foot-row { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 0.7rem; background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 12px; } .tdw-drawer-foot-label { display: none; /* keep markup compatible; LANG label hidden — flag speaks */ } .tdw-drawer-signout { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.5rem 0.85rem; background: #fff; border: 1px solid #fecaca; border-radius: 12px; color: #dc2626; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; text-decoration: none; } .tdw-drawer-signout:hover { background: #fef2f2; color: #b91c1c; transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(220, 38, 38, 0.3); } .tdw-drawer-signout svg { width: 16px; height: 16px; }