/* ============================================================ gwp-footer.css Global footer styles — Figma "final-version-GWP-redesign" node 1:1499 Loaded by Views/Shared/_Footer.cshtml so the footer renders correctly on every page (not just the homepage). ============================================================ */ /* ---------- Tokens used by the footer ---------- */ :root { --gwp-primary: #f5b209; --gwp-heading: #31356e; --gwp-text-body: #302e2b; --gwp-text-inverse: #ffffff; --gwp-surface-0: #ffffff; --gwp-font-title: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --gwp-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --gwp-fs-md: 18px; --gwp-fw-regular: 400; --gwp-fw-semibold: 600; --gwp-fw-bold: 700; } /* ---------- Shared container/button base used by the footer ---------- All rules below are scoped to .gwp-footer so they DON'T clobber the identical (but page-scoped) rules in style-homepage-gwp.css. Without the scope, this file (loaded in via _Footer.cshtml) would override the homepage's mobile hero-button media query. */ .gwp-footer .gwp-container { width: 100%; max-width: 1370px; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; position: relative; } @media (min-width: 576px) { .gwp-footer .gwp-container { padding-left: 24px; padding-right: 24px; } } .gwp-footer .gwp-btn { box-sizing: border-box; flex: 0 1 240px; min-width: 180px; height: 50px; padding: 0 24px; border-radius: 10px; border: 1px solid transparent; font-family: var(--gwp-font-title); font-size: var(--gwp-fs-md); font-weight: var(--gwp-fw-bold); line-height: 1; text-decoration: none; position: relative; overflow: hidden; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; cursor: pointer; } /* Sheen sweep — mirrors style-homepage-gwp.css .gwp-btn::before */ .gwp-footer .gwp-btn::before { content: ""; position: absolute; top: 0; left: -85%; width: 55%; height: 100%; background: linear-gradient( 115deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100% ); transform: skewX(-22deg); transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .gwp-footer .gwp-btn:hover::before, .gwp-footer .gwp-btn:focus-visible::before { left: 130%; } /* Glass overlay — mirrors style-homepage-gwp.css .gwp-btn::after */ .gwp-footer .gwp-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 18%, rgba(255, 255, 255, 0.04) 35%, transparent 55% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(255, 255, 255, 0.12), inset 0 12px 24px -10px rgba(255, 255, 255, 0.30); } .gwp-footer .gwp-btn:hover::after, .gwp-footer .gwp-btn:focus-visible::after { opacity: 1; } .gwp-footer .gwp-btn--primary { background-color: var(--gwp-primary); /* #f5b209 — matches homepage */ color: var(--gwp-heading); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); } .gwp-footer .gwp-btn--primary:hover, .gwp-footer .gwp-btn--primary:focus-visible { background-color: #ffe066; color: var(--gwp-heading); transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(245, 178, 9, 0.45), 0 4px 10px rgba(49, 53, 110, 0.18); } /* Press feedback — quick crunch on click */ .gwp-footer .gwp-btn:active { transform: translateY(-1px) scale(0.98); transition-duration: 0.08s; } /* Accessible keyboard focus ring */ .gwp-footer .gwp-btn:focus-visible { outline: 2px solid var(--gwp-primary); outline-offset: 3px; } /* ============================================================ FOOTER — Figma node 1:1499 ============================================================ */ .gwp-footer { background-color: var(--gwp-surface-0); color: var(--gwp-text-body); font-family: var(--gwp-font-body); } /* ---- Top half (white) — logo / menus + CTA / about card ---- */ .gwp-footer__logo-row { margin-bottom: 32px; } .gwp-footer__logo img { height: auto; max-width: 100%; display: block; } /* Grid: menus (left, fluid) + vertical divider + CTA block (right) */ .gwp-footer__grid { display: flex; align-items: flex-start; gap: 40px; margin-bottom: 36px; } .gwp-footer__menus { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 48px; min-width: 0; } .gwp-footer__cta-block { flex: 0 0 auto; display: flex; flex-direction: column; gap: 16px; padding-left: 40px; border-left: 1px solid #E5E7EB; align-self: stretch; } /* ---- Menu columns ---- */ .gwp-footer__menu { gap: 10px; min-width: 0; } .gwp-footer__menu-title { font-family: var(--gwp-font-title); font-size: 16px !important; font-weight: var(--gwp-fw-bold); line-height: 1.331; color: #224EB7; white-space: nowrap; } .gwp-footer__menu-title a { color: inherit; text-decoration: none; } .gwp-footer__menu-title a:hover { text-decoration: underline !important; } .gwp-footer__menu-underline { stroke-width: 2px; stroke: #31356E; } .gwp-footer__menu-list { gap: 10px; } .gwp-footer__menu-list a { font-size: var(--gwp-fs-base); font-weight: var(--gwp-fw-regular); color: var(--gwp-text-body); text-decoration: none; line-height: 1.4; } .gwp-footer__menu-list a:hover { color: var(--gwp-heading); text-decoration: underline !important; } .gwp-footer__menu-link--bold { color: var(--gwp-heading) !important; font-weight: var(--gwp-fw-semibold) !important; text-decoration: underline !important; } /* ---- Footer CTAs — Figma 2021:15560/15562 (260×50, 12px radius) ---- */ .gwp-footer__cta { flex: none !important; width: 260px; max-width: 100%; height: 50px; min-width: 0; padding: 10px; border-radius: 12px !important; } .gwp-footer .gwp-btn--outline-dark { background-color: transparent; border: 1px solid var(--gwp-heading); color: var(--gwp-heading); } .gwp-footer .gwp-btn--outline-dark:hover, .gwp-footer .gwp-btn--outline-dark:focus-visible { background-color: var(--gwp-heading); border-color: var(--gwp-heading); color: var(--gwp-text-inverse); transform: translateY(-3px); box-shadow: 0 12px 26px -10px rgba(49, 53, 110, 0.45), 0 4px 10px rgba(49, 53, 110, 0.15); } /* ---- Social icons (sit under CTAs) ---- */ .gwp-footer__social { gap: 16px; margin-top: 4px; } .gwp-footer__social a { color: #31356E; font-size: 22px; text-decoration: none; line-height: 1; transition: opacity 0.18s ease, transform 0.18s ease; } .gwp-footer__social a:hover { opacity: 0.75; transform: translateY(-1px); } /* ---- About Great Work Perks card ---- */ .gwp-footer__about { background-color: #F5F7FB; border: 1px solid #224EB7; border-radius: 12px; padding: 20px 28px; margin-bottom: 32px; } .gwp-footer__about .gwp-footer__logo { margin-bottom: 16px; } .gwp-footer__about .gwp-footer__logo img { height: auto; max-width: 100%; display: block; } .gwp-footer__about-label { display: flex; align-items: center; gap: 12px; font-family: var(--gwp-font-title); font-size: var(--gwp-fs-base); font-weight: var(--gwp-fw-bold); letter-spacing: 0.08em; color: #224EB7; margin-bottom: 10px; text-transform: uppercase; } .gwp-footer__about-dash { display: inline-block; width: 32px; height: 3px; background-color: #224EB7; border-radius: 2px; } .gwp-footer__about-text { font-size: var(--gwp-fs-base); line-height: 1.6; color: var(--gwp-text-body); margin: 0; } .gwp-footer__about-text + .gwp-footer__about-text { margin-top: 10px; } /* ---- Bottom bar (dark) ---- */ .gwp-footer__bottom { background-color: #31356e; color: var(--gwp-text-inverse); padding-top: 18px !important; padding-bottom: 18px; } .gwp-footer__legal { gap: 12px 40px; font-size: var(--gwp-fs-base); line-height: 1.331; justify-content: center; } .gwp-footer__legal a, .gwp-footer__legal span { color: var(--gwp-text-inverse); text-decoration: none; } .gwp-footer__legal a:hover { text-decoration: underline !important; } .gwp-footer__copyright { padding-right: 28px; border-right: 1px solid rgba(255, 255, 255, 0.25); } /* ============================================================ Responsive ============================================================ */ /* Large desktop and below — tighter gaps to keep the 4 menu titles + CTA block on one row inside the 992-1200px container width. */ @media (max-width: 1199.98px) { .gwp-footer__grid { gap: 28px; } .gwp-footer__cta-block { padding-left: 28px; } .gwp-footer__menus { gap: 20px 32px; } .gwp-footer__legal { gap: 12px 24px; } .gwp-footer__copyright { padding-right: 20px; } } /* Tablet — stack menus above CTA block. CTA becomes a centered card with a top divider. Menus remain a fluid 4-col row while width allows. */ @media (max-width: 991.98px) { .gwp-footer__main { padding-top: 32px !important; padding-bottom: 32px !important; } .gwp-footer__about .gwp-footer__logo img { width: 220px; } .gwp-footer__grid { flex-direction: column; align-items: stretch; gap: 24px; margin-bottom: 28px; } .gwp-footer__menus { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 24px; } .gwp-footer__cta-block { padding-left: 0; padding-top: 24px; border-left: none; border-top: 1px solid #E5E7EB; width: 100%; max-width: 360px; margin: 0 auto; align-items: center; } .gwp-footer__cta { width: 260px; max-width: 100%; } .gwp-footer__legal { font-size: 13px; } } /* Small tablet / large phone — 2-col menu grid, titles allowed to wrap. */ @media (max-width: 767.98px) { .gwp-footer__main { padding-top: 28px !important; padding-bottom: 28px !important; } .gwp-footer__about .gwp-footer__logo img { width: 200px; } .gwp-footer__grid { gap: 20px; margin-bottom: 24px; } .gwp-footer__menus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; } .gwp-footer__menu-title { font-size: 15px !important; white-space: normal; } .gwp-footer__menu-list a { font-size: 13px; } .gwp-footer__menu-list { gap: 8px; } .gwp-footer__cta-block { max-width: 100%; padding-top: 20px; } .gwp-footer__cta { width: 260px; max-width: 100%; height: 46px; font-size: 16px; } .gwp-footer__social { gap: 20px; } .gwp-footer__social a { font-size: 20px; } .gwp-footer__about { padding: 18px 20px; border-radius: 10px; } .gwp-footer__about-label { font-size: 12px; margin-bottom: 8px; } .gwp-footer__about-text { font-size: 13px; line-height: 1.55; } .gwp-footer__bottom { padding-top: 16px !important; padding-bottom: 16px; } .gwp-footer__legal { gap: 8px 18px; justify-content: center; text-align: center; font-size: 13px; } .gwp-footer__copyright { flex: 1 1 100%; padding-right: 0; border-right: none; padding-bottom: 6px; } } /* Small phones — 1-col menu grid, tighter typography and paddings. */ @media (max-width: 575.98px) { .gwp-footer__main { padding-top: 24px !important; padding-bottom: 24px !important; } .gwp-footer__about .gwp-footer__logo img { width: 180px; } .gwp-footer__menus { grid-template-columns: 1fr; gap: 18px; } .gwp-footer__menu-title { font-size: 15px !important; } .gwp-footer__menu-list { gap: 6px; } .gwp-footer__cta { height: 44px; font-size: 15px; } .gwp-footer__social { gap: 18px; } .gwp-footer__social a { font-size: 19px; } .gwp-footer__about { padding: 16px; border-radius: 8px; } .gwp-footer__about-label { font-size: 11px; letter-spacing: 0.06em; } .gwp-footer__about-dash { width: 24px; height: 2px; } .gwp-footer__about-text { font-size: 13px; line-height: 1.55; } .gwp-footer__bottom { padding-top: 14px !important; padding-bottom: 14px; } .gwp-footer__legal { gap: 8px 14px; font-size: 12px; } } /* Extra small phones — 320-380px range. Keep everything readable without introducing horizontal scroll. */ @media (max-width: 380px) { .gwp-footer__about .gwp-footer__logo img { width: 160px; } .gwp-footer__menu-title { font-size: 14px !important; } .gwp-footer__menu-list a { font-size: 12.5px; } .gwp-footer__cta { height: 42px; font-size: 14px; } .gwp-footer__about { padding: 14px; } .gwp-footer__about-text { font-size: 12.5px; } .gwp-footer__legal { font-size: 11.5px; } } /* ============================================================ Legacy .footer hover-dropdown (used by the Nemra/tenant footer branch in _Footer.cshtml). Moved out of the inline