/* ========================================================================== JAT SITEWIDE CSS — 04-careers.css Career card + media variant, disclaimer text, career back link, career hero Loaded right after Elementor's Site Settings CSS (see child functions.php), in file-name order 01 → 07. Keep blocks in order; add new blocks at the end of the relevant file under a "JAT — …" banner comment. ========================================================================== */ /* ========================================================= CAREER CARD ========================================================= */ .career-card { position: relative; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .career-card:hover { transform: translateY(-4px); border-color: var(--color-brand-accent); box-shadow: 0 20px 40px -28px rgba(0, 0, 0, 0.35); } .career-card:focus-within { border-color: var(--color-brand-accent); } /* Career Benefit Icon */ .career-benefit__icon { font-size: 2.0rem; color: var(--color-text-primary); } /* ========================================================= JAT — DISCLAIMER TEXT ========================================================= */ .text-disclaimer { font-family: var(--font-family-body); font-size: 0.8125rem; /* 13px */ font-weight: 400; line-height: 1.5; letter-spacing: 0.01em; color: var(--color-text-muted); } /* ========================================================= JAT — CAREER CARD — MEDIA VARIANT Dark gradient + progressive blur ========================================================= */ .career-card--media { position: relative; isolation: isolate; overflow: hidden; min-width: 0; border: 1px solid var(--color-divider-inverse); border-radius: 1rem; box-shadow: 0 20px 50px -28px rgba(0, 0, 0, 0.65); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--color-text-inverse); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } /* ========================================================= DARK GRADIENT Keeps image visible at top and creates strong text area ========================================================= */ .career-card--media::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(19, 20, 22, 0) 0%, rgba(19, 20, 22, 0.05) 35%, rgba(19, 20, 22, 0.38) 58%, rgba(19, 20, 22, 0.62) 80%, rgba(19, 20, 22, 0.75) 100% ); } /* ========================================================= PROGRESSIVE BLUR Blur becomes visually stronger toward bottom of card ========================================================= */ .career-card--media::after { content: ""; position: absolute; inset: 40% 0 0; z-index: 1; pointer-events: none; -webkit-backdrop-filter: blur(12px) saturate(115%); backdrop-filter: blur(12px) saturate(115%); -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.8) 45%, #000 70% ); mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.8) 45%, #000 70% ); } /* Keep Elementor content above both visual layers */ .career-card--media > * { position: relative; z-index: 2; } /* The fill image must sit BEHIND the gradient (::before) and blur (::after) layers, otherwise they're hidden and text is unreadable. */ .elementor .career-card--media > .section-image-fill { z-index: -1; } /* ========================================================= HOVER ========================================================= */ .career-card--media:hover { transform: translateY(-4px); border-color: var(--color-brand-accent); box-shadow: 0 24px 56px -26px rgba(0, 0, 0, 0.8); } /* ========================================================= JAT — CAREER BACK LINK Minimal navigation link for career detail heroes ========================================================= */ .career-back-link, .career-back-link a, .career-back-link button { display: inline-flex; align-items: center; justify-content: flex-start; width: fit-content; max-width: 100%; gap: var(--space-fluid-xxs); margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--color-text-inverse-muted); font-family: var(--font-family-body); font-size: 0.75rem; font-weight: 750; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color 200ms ease, opacity 200ms ease, transform 200ms ease; } /* Hover */ .career-back-link:hover, .career-back-link:hover a, .career-back-link:hover button { color: var(--color-text-inverse); background: transparent; } /* Keyboard accessibility */ .career-back-link:focus-visible, .career-back-link a:focus-visible, .career-back-link button:focus-visible { outline: 2px solid var(--color-brand-accent); outline-offset: 6px; } /* Mobile */ @media (max-width: 767px) { .career-back-link, .career-back-link a, .career-back-link button { font-size: 0.6875rem; letter-spacing: 0.14em; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .career-back-link, .career-back-link a, .career-back-link button { transition: none; } } /* ========================================================= JAT — CAREER HERO Full-bleed Job Role Featured Image ========================================================= */ .career-hero { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: clamp(32rem, 65vh, 48rem); background: var(--color-bg-dark, #131416); } /* BACKGROUND IMAGE CONTAINER */ .career-hero .career-role-media { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; z-index: 0; overflow: hidden; } /* FILL ALL ELEMENTOR SHORTCODE WRAPPERS */ .career-role-media .elementor-widget-shortcode, .career-role-media .elementor-widget-container, .career-role-media .elementor-shortcode { display: block; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; } /* JOB ROLE FEATURED IMAGE */ .career-role-media .jat-role-image { display: block; width: 100%; height: 100%; min-width: 100%; min-height: 100%; max-width: none; object-fit: cover; object-position: center center; } /* DARK GRADIENT OVERLAY */ .career-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 38%, transparent 75% ); } /* FOREGROUND CONTENT */ .career-hero .career-hero-content { position: relative; z-index: 2; width: 100%; min-height: inherit; }