/* ========================================================================== Velocity Talent — Rebrand stylesheet (scoped under .vt-home) Reference: rebranding-web/stitch_modern_job_portal_redesign/velocity_talent/DESIGN.md Loaded only on the home page. Does not affect other pages. ========================================================================== */ /* Material Symbols Outlined base class — required when font CSS doesn't ship it (e.g. Bunny Fonts CDN). Without this, font ligatures don't bind to the class and icons render as literal text like "edit_document". */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* ── Global token fallbacks on :root ────────────────────────────────────── JS may portal elements (e.g. dropdown panels) directly to , where they lose the .vt-home ancestor. These :root rules ensure CSS custom properties are still resolvable for those detached nodes. ──────────────────────────────────────────────────────────────────────── */ :root { --vt-bg: #0b1326; --vt-surface: #0b1326; --vt-surface-dim: #0b1326; --vt-surface-bright: #31394d; --vt-surface-lowest: #060e20; --vt-surface-low: #131b2e; --vt-surface-container: #171f33; --vt-surface-high: #222a3d; --vt-surface-highest: #2d3449; --vt-surface-variant: #2d3449; --vt-on-surface: #dae2fd; --vt-on-surface-variant: #c2c6d6; --vt-outline: #8c909f; --vt-outline-variant: #424754; --vt-primary: #adc6ff; --vt-primary-container: #4d8eff; --vt-on-primary: #000000; --vt-on-primary-container: #000000; --vt-secondary: #4cd7f6; --vt-secondary-container: #03b5d3; --vt-on-secondary: #003640; --vt-tertiary: #c4a3ff; --vt-tertiary-container: #7e57c2; --vt-success: #00CC99; --vt-error: #f87171; --vt-radius-sm: 0.25rem; --vt-radius: 0.5rem; --vt-radius-md: 0.75rem; --vt-radius-lg: 1rem; --vt-radius-xl: 1.5rem; --vt-radius-full: 9999px; --vt-container-max: 1280px; --vt-gutter: 24px; --vt-margin-desktop: 32px; --vt-margin-mobile: 16px; --vt-font-display: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif; --vt-font-body: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; } .vt-home { /* ---- Surface tokens ---- */ --vt-bg: #0b1326; --vt-surface: #0b1326; --vt-surface-dim: #0b1326; --vt-surface-bright: #31394d; --vt-surface-lowest: #060e20; --vt-surface-low: #131b2e; --vt-surface-container: #171f33; --vt-surface-high: #222a3d; --vt-surface-highest: #2d3449; --vt-surface-variant: #2d3449; /* ---- Content tokens ---- */ --vt-on-surface: #dae2fd; --vt-on-surface-variant: #c2c6d6; --vt-outline: #8c909f; --vt-outline-variant: #424754; /* ---- Accent tokens ---- */ --vt-primary: #adc6ff; --vt-primary-container: #4d8eff; --vt-on-primary: #000000; --vt-on-primary-container: #000000; --vt-secondary: #4cd7f6; --vt-secondary-container: #03b5d3; --vt-on-secondary: #003640; --vt-tertiary: #c4a3ff; --vt-tertiary-container: #7e57c2; --vt-success: #00CC99; --vt-error: #f87171; /* ---- Shape tokens ---- */ --vt-radius-sm: 0.25rem; --vt-radius: 0.5rem; --vt-radius-md: 0.75rem; --vt-radius-lg: 1rem; --vt-radius-xl: 1.5rem; --vt-radius-full: 9999px; /* ---- Spacing tokens ---- */ --vt-container-max: 1280px; --vt-gutter: 24px; --vt-margin-desktop: 32px; --vt-margin-mobile: 16px; /* ---- Type tokens ---- */ --vt-font-display: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif; --vt-font-body: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; } /* RTL: Arabic-first headlines */ [dir="rtl"] .vt-home { --vt-font-display: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif; --vt-font-body: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; } /* ========================================================================== Reset / base — only inside .vt-home ========================================================================== */ .vt-home { background: var(--vt-bg); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .vt-home a { color: inherit; text-decoration: none; } .vt-home a:hover { color: var(--vt-primary); } .vt-home img { max-width: 100%; height: auto; display: block; } .vt-home .container { max-width: var(--vt-container-max); margin-left: auto; margin-right: auto; padding-left: var(--vt-margin-mobile); padding-right: var(--vt-margin-mobile); } @media (min-width: 768px) { .vt-home .container { padding-left: var(--vt-margin-desktop); padding-right: var(--vt-margin-desktop); } } /* Section base */ .vt-section { padding: 96px 0; position: relative; } .vt-section--alt { background-color: var(--vt-bg); background-image: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(77, 142, 255, 0.22) 0%, transparent 65%), radial-gradient(ellipse 55% 40% at 50% 100%, rgba(124, 92, 255, 0.10) 0%, transparent 60%); background-repeat: no-repeat; background-attachment: scroll; } .vt-section--container { background-color: var(--vt-surface-container); background-image: url('../images/vt-pattern-bg.png'); background-size: 400px auto; background-repeat: repeat; background-blend-mode: overlay; border-top: 1px solid var(--vt-outline-variant); border-bottom: 1px solid var(--vt-outline-variant); } .vt-section--low { background: var(--vt-surface-lowest); } .vt-section--mena { background-color: #0d1117; background-image: linear-gradient(180deg, rgba(13, 17, 23, 0.62) 0%, rgba(13, 17, 23, 0.40) 45%, rgba(13, 17, 23, 0.70) 100%), url('../images/vt-mena-bg.png'); background-position: center, center; background-size: cover, cover; background-repeat: no-repeat; background-attachment: scroll; color: #fff; position: relative; min-height: 500px; opacity: 1 !important; filter: none !important; } .vt-section--mena::before { content: ''; position: absolute; inset: 0; background-image: url('../images/vt-pattern-bg.png'); opacity: 0.1; pointer-events: none; } .vt-section--mena .vt-section-head__title, .vt-section--mena .vt-section-head__sub { color: #fff; } .vt-country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--vt-gutter); } .vt-country-card { position: relative; padding: 32px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--vt-radius-lg); display: flex; flex-direction: column; align-items: center; text-align: center; transition: all 0.3s ease; overflow: hidden; } .vt-country-card:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--vt-primary); transform: translateY(-8px); } .vt-country-card h4 { font-family: var(--vt-font-display); font-weight: 600; font-size: 18px; margin: 0 0 8px; color: #fff; } .vt-country-card span { font-size: 14px; color: var(--vt-primary); font-weight: 500; } .vt-country-card__icon { width: 64px; height: 64px; margin-bottom: 20px; background: rgba(47, 129, 247, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--vt-primary); } .vt-country-card.is-home-base { background: rgba(47, 129, 247, 0.1); border-color: var(--vt-primary); box-shadow: 0 0 20px rgba(47, 129, 247, 0.2); } .vt-country-card.is-home-base h4 { color: var(--vt-primary); } .vt-country-card.is-home-base .vt-country-card__icon { background: var(--vt-primary); color: #fff; } /* Image-flag variant of the country icon circle. The circle-flags SVGs are already round, so we let them fill the wrapper and clip to the existing 50% border-radius. Override the solid primary-blue home-base background so the flag colors aren't sitting on a blue wash — use a translucent surface instead. */ .vt-country-card__icon--flag { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); padding: 0; overflow: hidden; } .vt-country-card.is-home-base .vt-country-card__icon--flag { background: rgba(255, 255, 255, 0.10); border-color: rgba(47, 129, 247, 0.55); box-shadow: 0 0 0 2px rgba(47, 129, 247, 0.30); } .vt-country-card__flag-img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); } @media (max-width: 768px) { .vt-section { padding: 64px 0; } } /* Headings */ .vt-h1 { font-family: var(--vt-font-display); font-weight: 700; font-size: clamp(34px, 5vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: var(--vt-on-surface); } .vt-h2 { font-family: var(--vt-font-display); font-weight: 600; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -0.01em; color: var(--vt-on-surface); } .vt-h3 { font-family: var(--vt-font-display); font-weight: 600; font-size: 24px; line-height: 1.3; color: var(--vt-on-surface); } .vt-h4 { font-family: var(--vt-font-display); font-weight: 600; font-size: 20px; line-height: 1.4; color: var(--vt-on-surface); } .vt-body-lg { font-size: 18px; line-height: 1.6; color: var(--vt-on-surface-variant); } .vt-body { font-size: 16px; line-height: 1.5; color: var(--vt-on-surface-variant); } .vt-body-sm { font-size: 14px; line-height: 1.5; color: var(--vt-on-surface-variant); } .vt-label-md { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; } .vt-label-sm { font-size: 12px; font-weight: 500; line-height: 1; } .vt-muted { color: var(--vt-on-surface-variant); } .vt-outline-text { color: var(--vt-outline); } /* ========================================================================== Glass primitives ========================================================================== */ .vt-glass { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--vt-radius-lg); transition: border-color 220ms ease, transform 220ms ease; } .vt-glass:hover { border-color: rgba(173, 198, 255, 0.4); } .vt-glass-nav { background: var(--vt-surface-lowest); } /* ========================================================================== Buttons ========================================================================== */ .vt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 24px; border-radius: var(--vt-radius); font-family: var(--vt-font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer; transition: opacity 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease; text-decoration: none; line-height: 1; } .vt-btn:hover { opacity: 0.92; text-decoration: none; } .vt-btn:active { transform: translateY(1px); } .vt-btn.vt-btn--primary, a.vt-btn--primary, button.vt-btn--primary { background: var(--vt-primary); color: var(--vt-on-primary-container); } .vt-btn.vt-btn--primary:hover, a.vt-btn--primary:hover, button.vt-btn--primary:hover { background: var(--vt-primary); color: var(--vt-on-primary-container); } .vt-btn.vt-btn--container, a.vt-btn--container, button.vt-btn--container { background: var(--vt-primary-container); color: #fff; } .vt-btn.vt-btn--container:hover, a.vt-btn--container:hover, button.vt-btn--container:hover { background: var(--vt-primary); color: var(--vt-on-primary-container); } .vt-btn.vt-btn--ghost, a.vt-btn--ghost, button.vt-btn--ghost { background: var(--vt-surface-highest); color: var(--vt-on-surface); } .vt-btn--ghost:hover { background: var(--vt-surface-bright); color: var(--vt-on-surface); } .vt-btn--outline { background: transparent; color: var(--vt-primary); border-color: var(--vt-primary); } .vt-btn--outline:hover { background: rgba(173, 198, 255, 0.06); color: var(--vt-primary); } .vt-btn--lg { padding: 14px 32px; font-size: 15px; } .vt-btn--block { width: 100%; } /* ========================================================================== Top navigation (scoped — only on home for now) ========================================================================== */ .vt-nav { position: sticky; top: 0; z-index: 200; width: 100%; border-bottom: 1px solid rgba(66, 71, 84, 0.2); } .vt-nav__inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--vt-container-max); margin: 0 auto; padding: 14px var(--vt-margin-mobile); gap: 24px; } @media (min-width: 768px) { .vt-nav__inner { padding: 16px var(--vt-margin-desktop); } } .vt-nav__left { display: flex; align-items: center; gap: 32px; } .vt-nav__brand { font-family: var(--vt-font-display); font-weight: 700; font-size: 22px; color: var(--vt-primary); letter-spacing: -0.01em; } .vt-nav__brand img { max-height: 56px; width: auto; } .vt-nav__links { display: none; gap: 28px; align-items: center; } @media (min-width: 992px) { .vt-nav__links { display: flex; } } .vt-nav__link { color: var(--vt-on-surface-variant); font-size: 14px; font-weight: 600; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color 180ms ease, border-color 180ms ease; } .vt-nav__link:hover { color: var(--vt-secondary); } .vt-nav__link.is-active { color: var(--vt-primary); border-bottom-color: var(--vt-primary); } .vt-nav__right { display: flex; align-items: center; gap: 12px; } .vt-nav__sign { background: transparent; border: none; color: var(--vt-on-surface-variant); font-size: 14px; font-weight: 600; padding: 8px 12px; cursor: pointer; transition: color 180ms ease; } .vt-nav__sign:hover { color: var(--vt-primary); } .vt-nav__lang { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--vt-radius); background: rgba(173, 198, 255, 0.08); color: var(--vt-primary); font-size: 13px; font-weight: 600; cursor: pointer; } .vt-nav__lang:hover { background: rgba(173, 198, 255, 0.14); } .vt-nav__lang-menu { position: absolute !important; top: calc(100% + 6px); right: 0; min-width: 140px; background: var(--vt-surface-container); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--vt-radius); padding: 6px; display: none !important; flex-direction: column; z-index: 100; pointer-events: none; opacity: 0; } .vt-nav__lang.is-open .vt-nav__lang-menu { display: flex !important; pointer-events: auto; opacity: 1; } [dir="rtl"] .vt-nav__lang-menu { right: auto; left: 0; } .vt-nav__lang-item { display: block; padding: 8px 12px; color: var(--vt-on-surface-variant); font-size: 13px; border-radius: 4px; text-align: start; width: 100%; background: transparent; border: none; cursor: pointer; } .vt-nav__lang-item:hover { background: var(--vt-surface-high); color: var(--vt-on-surface); } /* --- User / company avatar dropdown --- */ .vt-nav__user { position: relative; display: inline-flex; } .vt-nav__avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--vt-surface-container); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--vt-on-surface); cursor: pointer; padding: 0; overflow: hidden; transition: border-color 150ms ease, transform 150ms ease; } .vt-nav__avatar:hover { border-color: var(--vt-primary); transform: translateY(-1px); } /* Specificity bump (.vt-nav.vt-nav__avatar img) so page-scope resets like `.vt-companies img { height: auto; }` at velocity-talent.css:3263 (and equivalents for .vt-company / .vt-search / .vt-home) don't cascade into the navbar and squash the avatar to intrinsic aspect ratio. Without this, the avatar img renders as a ~40×27 rectangle inside the round 40×40 button on /companies, /search-jobs, etc. */ .vt-nav .vt-nav__avatar img, .vt-nav__avatar.vt-nav__avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 999px !important; display: block !important; max-width: none !important; } .vt-nav__avatar-initial { font-family: var(--vt-font-display); font-weight: 700; font-size: 16px; color: var(--vt-primary); text-transform: uppercase; } .vt-nav__menu { position: absolute !important; top: calc(100% + 8px); right: 0; min-width: 240px; background: var(--vt-surface-container); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--vt-radius); padding: 6px; display: none !important; flex-direction: column; z-index: 100; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity 150ms ease, transform 150ms ease; } .vt-nav__user.is-open .vt-nav__menu { display: flex !important; pointer-events: auto; opacity: 1; transform: translateY(0); } [dir="rtl"] .vt-nav__menu { right: auto; left: 0; } .vt-nav__menu-head { padding: 10px 12px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 4px; } .vt-nav__menu-name { margin: 0; font-size: 13px; font-weight: 600; color: var(--vt-on-surface); } .vt-nav__menu-email { margin: 2px 0 0; font-size: 11px; color: var(--vt-on-surface-variant); opacity: 0.75; } .vt-nav__menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: var(--vt-on-surface-variant); font-size: 13px; font-weight: 500; border-radius: 6px; text-decoration: none; transition: background 150ms ease, color 150ms ease; } .vt-nav__menu-item:hover { background: var(--vt-surface-high); color: var(--vt-on-surface); text-decoration: none; } .vt-nav__menu-item .material-symbols-outlined { font-size: 18px; color: var(--vt-primary); opacity: 0.85; } .vt-nav__menu-sep { height: 1px; background: rgba(255, 255, 255, 0.05); margin: 6px 4px; } .vt-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--vt-surface-container); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--vt-radius); color: var(--vt-on-surface); cursor: pointer; } @media (min-width: 992px) { .vt-nav__toggle { display: none; } } .vt-mobile-menu { display: none; background: var(--vt-surface-container); border-top: 1px solid rgba(255, 255, 255, 0.04); padding: 12px var(--vt-margin-mobile); } .vt-mobile-menu.is-open { display: block; } .vt-mobile-menu a { display: block; padding: 12px 8px; color: var(--vt-on-surface); font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .vt-mobile-menu a:last-child { border-bottom: none; } /* ────────────────────────────────────────────────────────────────────── Mobile nav fix: on phones the right-side cluster (tour + sign-in + Post-a-Job CTA + lang + hamburger) was overflowing past the right edge of the bar because nothing hid the wide text buttons below 992px. Below the desktop nav-link breakpoint we collapse the wide CTAs into the hamburger menu (see .vt-mobile-menu items below) and tighten the remaining icon-sized items so the row fits on a 360px screen. ────────────────────────────────────────────────────────────────────── */ @media (max-width: 991px) { .vt-nav__inner { gap: 12px; flex-wrap: nowrap; } .vt-nav__right { gap: 6px; min-width: 0; } .vt-nav__left { min-width: 0; gap: 12px; } /* Wide text CTAs move into the hamburger panel */ .vt-nav__sign, .vt-nav__right > .vt-btn, .vt-nav__tour { display: none; } /* Shrink the brand a touch to leave more room for icons + hamburger */ .vt-nav__brand img { max-height: 44px; } /* Compact the language switcher (keep the locale code, drop horiz padding) */ .vt-nav__lang { padding: 6px 8px; gap: 4px; } } /* ========================================================================== Hero ========================================================================== */ .vt-hero { position: relative; min-height: 550px; display: flex; align-items: center; justify-content: center; padding: 55px 0 75px; overflow: hidden; background-color: #121824; } .vt-hero__bg { position: absolute; inset: 0; z-index: 0; } .vt-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.35; /* Softly dimmed so the busy details don't clash with the text */ transition: opacity 0.5s ease; } .vt-hero__bg::after { content: ''; position: absolute; inset: 0; /* Beautiful radial ambient center light + smooth top/bottom vertical blend to integrate cleanly with the site */ background: radial-gradient(circle at center, rgba(18, 24, 36, 0.2) 0%, rgba(18, 24, 36, 0.65) 60%, #121824 100%), linear-gradient(to bottom, #121824 0%, transparent 15%, transparent 85%, #121824 100%); z-index: 3; pointer-events: none; } /* Background Slideshow & Ken Burns Zoom Effect */ .vt-slideshow { position: absolute; inset: 0; z-index: 1; overflow: hidden; } .vt-slideshow__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease-in-out; z-index: 1; } .vt-slideshow__slide.is-active { opacity: 1; z-index: 2; } .vt-slideshow__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.35; /* Decreased to 0.35 for maximum readability and clean dark integration */ transform: scale(1.0); transition: transform 6s cubic-bezier(0.1, 0.1, 0.25, 1); } .vt-slideshow__slide.is-animating img { transform: scale(1.15); } .vt-hero__content { position: relative; z-index: 1; width: 100%; max-width: var(--vt-container-max); margin: 0 auto; padding: 0 var(--vt-margin-mobile); text-align: center; } @media (min-width: 768px) { .vt-hero__content { padding: 0 var(--vt-margin-desktop); } } .vt-hero__title { margin-bottom: 24px; } .vt-hero__title .vt-accent { color: var(--vt-primary); } .vt-hero__lead { max-width: 640px; margin: 0 auto 48px; font-size: 18px; line-height: 1.6; color: var(--vt-on-surface-variant); } /* Hero search bar (glass) */ .vt-hero-search { max-width: 920px; width: 100%; margin: 0 auto; background: rgba(13, 20, 36, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--vt-radius-md); padding: 10px; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 12px; } .vt-filter-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; background: var(--vt-surface-container); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: var(--vt-radius); color: var(--vt-on-surface); cursor: pointer; transition: all 0.2s ease; white-space: nowrap; height: 48px; } .vt-filter-trigger:hover { background: var(--vt-surface-high); border-color: var(--vt-primary); } .vt-search__field { flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--vt-surface-container); border-radius: var(--vt-radius); border: 1px solid rgba(255, 255, 255, 0.04); min-width: 200px; height: 48px; } .vt-search__field .material-symbols-outlined { color: var(--vt-outline); } .vt-search__field input, .vt-search__field select, .vt-search__field .form-control { background: transparent !important; border: none !important; outline: none !important; color: var(--vt-on-surface) !important; font-size: 14px; font-family: var(--vt-font-body); width: 100%; padding: 0; box-shadow: none !important; height: auto; line-height: 1.4; } .vt-search__field input::placeholder { color: var(--vt-outline); } .vt-search__field .select2-container { width: 100% !important; } .vt-search__field .select2-selection { background: transparent !important; border: none !important; height: auto !important; } .vt-search__field .select2-selection__rendered { color: var(--vt-on-surface) !important; padding: 0 !important; } .vt-search__field .select2-selection__arrow { display: none !important; } /* ── Hero search vt-dd integration ───────────────────────────────────── When the company-mode hero embeds a vt-dd (country picker), the outer `.vt-search__field--dd` already provides the glass background + leading icon, so strip the inner vt-dd trigger's own chrome to avoid double borders / nested backgrounds. The dropdown PANEL keeps its own styling because it's portaled to outside this scope. */ .vt-search__field--dd { padding-inline-end: 6px; } .vt-search__field--dd .vt-dd { flex: 1; min-width: 0; } .vt-search__field--dd .vt-dd__trigger { background: transparent !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; color: var(--vt-on-surface) !important; box-shadow: none !important; border-radius: 0 !important; } .vt-search__field--dd .vt-dd__trigger:hover, .vt-search__field--dd .vt-dd.is-open .vt-dd__trigger { background: transparent !important; box-shadow: none !important; } .vt-search__field--dd .vt-dd__placeholder { color: var(--vt-outline); font-size: 14px; font-family: var(--vt-font-body); } .vt-search__field--dd .vt-dd__values { color: var(--vt-on-surface); font-size: 14px; font-family: var(--vt-font-body); } .vt-search__field--dd .vt-dd__caret { color: var(--vt-outline); } .vt-search__submit { background: var(--vt-primary); color: var(--vt-on-primary-container); border: none; padding: 14px 28px; border-radius: var(--vt-radius); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; cursor: pointer; transition: opacity 180ms ease; white-space: nowrap; height: 48px; display: flex; align-items: center; justify-content: center; } .vt-search__submit:hover { opacity: 0.9; } /* Search submit gets a leading magnifier icon (added in search_form.blade.php). align-items + gap already exist on the base rule; this just sizes the icon. */ .vt-search__submit .material-symbols-outlined { font-size: 18px; line-height: 1; } .vt-search__submit { gap: 8px; } /* ────────────────────────────────────────────────────────────────────── Hero-search mobile layout. The base `.vt-hero-search` rule uses `flex-direction: row !important; flex-wrap: nowrap !important;` to force a single-row glass bar on desktop. On phones the input + filter + submit don't fit on one row, so we keep the row but allow wrap: input takes its own full row, then filter trigger and submit share the next row side-by-side. Company variant (which has the country dd instead of filter trigger and no filter button) ends up with input → country-dd → submit, each on its own row. Match the base `!important` strength so the override wins. ────────────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .vt-hero-search { flex-direction: row !important; flex-wrap: wrap !important; align-items: stretch; gap: 8px; padding: 8px; } /* Input always takes a full-width row */ .vt-search__field, .vt-search__field--dd { flex: 1 1 100%; min-width: 0; width: 100%; order: 1; } /* Filter trigger sits inline with the submit button on the next row */ .vt-filter-trigger { flex: 0 0 auto; width: auto; min-width: 0; order: 2; } /* Submit fills the remaining width next to the filter trigger */ .vt-search__submit { flex: 1 1 auto; width: auto; min-width: 0; order: 3; } } /* ========================================================================== Section heading row ========================================================================== */ .vt-section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; gap: 24px; flex-wrap: wrap; } .vt-section-head--center { justify-content: center; text-align: center; flex-direction: column; align-items: center; } .vt-section-head__title { margin-bottom: 8px; } .vt-section-head__sub { color: var(--vt-on-surface-variant); font-size: 16px; } .vt-link { color: var(--vt-primary); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; transition: opacity 180ms ease; } .vt-link:hover { opacity: 0.85; text-decoration: underline; } /* ========================================================================== Dual CTA strip (Job seeker + Employer) ========================================================================== */ .vt-cta-strip { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 64px 0; } @media (min-width: 768px) { .vt-cta-strip { grid-template-columns: 1fr 1fr; } } .vt-cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 32px; background: rgba(22, 27, 34, 0.6); backdrop-filter: blur(12px); border: 1px solid var(--vt-outline-variant); border-radius: var(--vt-radius-lg); transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .vt-cta__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.25; transition: opacity 300ms ease, transform 500ms ease; } .vt-cta__bg img { width: 100%; height: 100%; object-fit: cover; } .vt-cta:hover { border-color: var(--vt-primary); transform: translateY(-4px); background: rgba(22, 27, 34, 0.9); } .vt-cta:hover .vt-cta__bg { opacity: 0.4; transform: scale(1.05); } .vt-cta__text { position: relative; z-index: 1; } .vt-cta__text h3 { font-family: var(--vt-font-display); font-weight: 600; font-size: 22px; color: #fff; margin: 0 0 6px; } .vt-cta__text p { color: var(--vt-on-surface-variant); margin: 0; font-size: 15px; } .vt-cta__icon { position: relative; z-index: 1; flex-shrink: 0; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: rgba(47, 129, 247, 0.15); color: var(--vt-primary); border-radius: var(--vt-radius-md); box-shadow: 0 8px 16px rgba(0,0,0,0.2); } .vt-cta--employer .vt-cta__icon { background: rgba(47, 129, 247, 0.2); color: var(--vt-primary); } /* ========================================================================== Company cards (Top Companies Hiring) ========================================================================== */ .vt-company-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (min-width: 768px) { .vt-company-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .vt-company-grid { grid-template-columns: repeat(5, 1fr); } } .vt-company-card { position: relative; background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--vt-radius-md); padding: 24px; text-align: center; transition: border-color 220ms ease, transform 220ms ease; cursor: pointer; display: flex; flex-direction: column; align-items: center; color: inherit; } .vt-company-card__badge { position: absolute; top: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: linear-gradient(135deg, #ffd166 0%, #f4a300 100%); color: #1f1300; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid rgba(255, 209, 102, 0.6); box-shadow: 0 4px 12px rgba(244, 163, 0, 0.30); z-index: 2; } .vt-company-card__badge .material-symbols-outlined { font-size: 12px; line-height: 1; } .vt-company-card:hover { border-color: rgba(173, 198, 255, 0.4); transform: translateY(-2px); color: inherit; } .vt-company-card__logo { width: 64px; height: 64px; border-radius: 50%; background: var(--vt-surface-high); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; padding: 0; overflow: hidden; } .vt-company-card__logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .vt-company-card__name { font-family: var(--vt-font-display); font-weight: 600; font-size: 18px; color: var(--vt-on-surface); margin: 0 0 4px; } .vt-company-card__loc { color: var(--vt-outline); font-size: 12px; margin: 0; } /* Push the badge to the card bottom so all cards align */ .vt-company-card .vt-pill { margin-top: auto; } .vt-pill { display: inline-block; padding: 4px 12px; border-radius: var(--vt-radius-full); font-size: 12px; font-weight: 500; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .vt-pill--primary { background: rgba(173, 198, 255, 0.1); color: var(--vt-primary); } .vt-pill--secondary { background: rgba(76, 215, 246, 0.1); color: var(--vt-secondary); } .vt-pill--tertiary { background: rgba(196, 163, 255, 0.1); color: var(--vt-tertiary); } .vt-pill--neutral { background: var(--vt-surface-highest); color: var(--vt-outline); } /* ========================================================================== Industry tiles ========================================================================== */ .vt-industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 768px) { .vt-industry-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .vt-industry-grid { grid-template-columns: repeat(4, 1fr); } } .vt-industry-tile { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--vt-radius-md); background: var(--vt-surface-high); border: 1px solid rgba(255, 255, 255, 0.05); transition: border-color 220ms ease; color: inherit; } .vt-industry-tile:hover { border-color: rgba(173, 198, 255, 0.5); color: inherit; } .vt-industry-tile__icon { width: 40px; height: 40px; border-radius: var(--vt-radius); display: flex; align-items: center; justify-content: center; background: rgba(173, 198, 255, 0.2); color: var(--vt-primary); flex-shrink: 0; } .vt-industry-tile:nth-child(4n+2) .vt-industry-tile__icon { background: rgba(76, 215, 246, 0.2); color: var(--vt-secondary); } .vt-industry-tile:nth-child(4n+3) .vt-industry-tile__icon { background: rgba(196, 163, 255, 0.2); color: var(--vt-tertiary); } .vt-industry-tile__name { font-weight: 600; font-size: 14px; color: var(--vt-on-surface); margin: 0; } .vt-industry-tile__count { color: var(--vt-outline); font-size: 12px; margin: 0; } /* ========================================================================== Job rows (Featured / Latest) ========================================================================== */ .vt-job-list { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .vt-job-list { grid-template-columns: 1fr 1fr; } } .vt-job-row { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--vt-radius-md); padding: 24px; display: flex; flex-direction: column; gap: 16px; transition: border-color 220ms ease; } .vt-job-row:hover { border-color: rgba(173, 198, 255, 0.3); } .vt-job-row__main { display: flex; gap: 20px; flex: 1; min-width: 0; } .vt-job-row__icon { width: 56px; height: 56px; background: var(--vt-surface-container); border-radius: var(--vt-radius-md); display: flex; align-items: center; justify-content: center; color: var(--vt-primary); flex-shrink: 0; overflow: hidden; } .vt-job-row__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--vt-radius-md); } .vt-job-row__icon .material-symbols-outlined { font-size: 28px; } .vt-job-row__body { min-width: 0; } .vt-job-row__title { font-family: var(--vt-font-display); font-weight: 600; font-size: 18px; color: var(--vt-on-surface); margin: 0 0 8px; transition: color 180ms ease; display: block; } .vt-job-row:hover .vt-job-row__title { color: var(--vt-primary); } .vt-job-row__meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--vt-on-surface-variant); font-size: 14px; margin-bottom: 12px; } .vt-job-row__meta span { display: inline-flex; align-items: center; gap: 4px; } .vt-job-row__meta .material-symbols-outlined { font-size: 16px; } .vt-job-row__pay { color: var(--vt-primary); font-weight: 700; } .vt-job-row__salary { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; color: var(--vt-primary); } .vt-job-row__salary .material-symbols-outlined { font-size: 18px; color: var(--vt-secondary); } .vt-job-row__salary strong { font-weight: 700; color: var(--vt-text); } .vt-job-row__salary-na { color: var(--vt-on-surface-variant); font-style: italic; opacity: 0.7; } .vt-job-row__tags { display: flex; flex-wrap: wrap; gap: 8px; } .vt-tag { padding: 4px 12px; background: var(--vt-surface-highest); border-radius: var(--vt-radius-full); font-size: 12px; color: var(--vt-outline); } .vt-job-row__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .vt-job-row__footer { display: flex; justify-content: flex-end; margin-top: auto; } .vt-job-row__aside { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-shrink: 0; } .vt-badge-gradient { background: linear-gradient(135deg, var(--vt-primary) 0%, var(--vt-secondary) 100%); color: var(--vt-on-primary-container); padding: 4px 12px; border-radius: var(--vt-radius-full); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } /* ========================================================================== Category cards (Browse Jobs By Categories — was popular_searches) ========================================================================== */ .vt-category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 768px) { .vt-category-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .vt-category-grid { grid-template-columns: repeat(4, 1fr); } } .vt-category-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--vt-surface-container); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: var(--vt-radius-md); transition: border-color 220ms ease, transform 220ms ease; color: inherit; } .vt-category-card:hover { border-color: rgba(173, 198, 255, 0.45); transform: translateY(-2px); color: inherit; } .vt-category-card__icon { width: 56px; height: 56px; border-radius: var(--vt-radius); background: rgba(76, 215, 246, 0.14); color: var(--vt-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .vt-category-card__icon img { width: 32px; height: 32px; object-fit: contain; } .vt-category-card__body h4 { font-family: var(--vt-font-display); font-size: 16px; font-weight: 600; color: var(--vt-on-surface); margin: 0 0 4px; } .vt-category-card__body p { color: var(--vt-outline); font-size: 12px; margin: 0; } /* ========================================================================== City cards (image background) ========================================================================== */ .vt-city-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; } @media (min-width: 640px) { .vt-city-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .vt-city-grid { grid-template-columns: repeat(4, 1fr); } } .vt-city-card { position: relative; border-radius: var(--vt-radius-md); overflow: hidden; aspect-ratio: 4 / 3; display: block; border: 1px solid rgba(255, 255, 255, 0.05); color: inherit; } .vt-city-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .vt-city-card:hover img { transform: scale(1.05); } .vt-city-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 19, 38, 0.92) 0%, rgba(11, 19, 38, 0.4) 55%, rgba(11, 19, 38, 0) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; } .vt-city-card h4 { font-family: var(--vt-font-display); font-size: 20px; color: #fff; margin: 0 0 4px; font-weight: 600; } .vt-city-card p { color: rgba(218, 226, 253, 0.8); font-size: 13px; margin: 0; } /* Big-number stat card — clean dashboard-style tile. No photo, no flag — just the data: city name top, huge job-count number center, brand-tinted accent bar at the bottom. */ .vt-city-stat { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 24px 26px; min-height: 200px; border-radius: 16px; background: linear-gradient(155deg, rgba(47, 129, 247, 0.08) 0%, rgba(11, 19, 38, 0.0) 55%), rgba(23, 31, 51, 0.55); border: 1px solid rgba(173, 198, 255, 0.10); color: inherit; text-decoration: none; overflow: hidden; isolation: isolate; transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease, border-color 320ms ease; } /* Faded country flag backdrop. Absolutely-positioned layer behind the stat content so the flag reads as ambient atmosphere, not as the subject. ~22% opacity + a dim radial gradient on top keep text crisp. */ .vt-city-stat__flag-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.22; filter: saturate(1.1); pointer-events: none; } .vt-city-stat--has-flag::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 30% 100%, rgba(11, 19, 38, 0.55) 0%, rgba(11, 19, 38, 0.20) 60%, transparent 100%); pointer-events: none; } .vt-city-stat--has-flag:hover .vt-city-stat__flag-bg { opacity: 0.30; } .vt-city-stat:hover { transform: translateY(-3px); border-color: rgba(47, 129, 247, 0.35); box-shadow: 0 18px 40px -18px rgba(47, 129, 247, 0.30); } .vt-city-stat__head { display: flex; align-items: center; gap: 8px; color: rgba(218, 226, 253, 0.85); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; } .vt-city-stat__pin { font-size: 18px !important; color: var(--vt-primary, #2f81f7); } .vt-city-stat__name { font-family: var(--vt-font-display, var(--vt-font-sans, system-ui)); font-size: 18px; font-weight: 700; color: #fff; } .vt-city-stat__body { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; } .vt-city-stat__num { font-family: var(--vt-font-display, var(--vt-font-sans, system-ui)); font-size: 56px; line-height: 1; font-weight: 800; color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .vt-city-stat__label { font-size: 13px; font-weight: 600; color: rgba(173, 198, 255, 0.75); text-transform: uppercase; letter-spacing: 0.08em; } .vt-city-stat__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--vt-primary, #2f81f7) 0%, rgba(124, 92, 255, 0.9) 50%, rgba(47, 129, 247, 0.4) 100%); border-radius: 0 0 16px 16px; } @media (max-width: 600px) { .vt-city-stat { min-height: 170px; padding: 18px 20px 22px; } .vt-city-stat__num { font-size: 44px; } } /* Gradient fallback for cards without an uploaded city image — solid colored panel + a centered icon so the layout stays consistent. */ .vt-city-card--gradient { background: linear-gradient(135deg, rgba(47, 129, 247, 0.35), rgba(124, 92, 255, 0.30) 60%, rgba(15, 23, 42, 0.5)), radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 70%); transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease; } .vt-city-card--gradient:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(47, 129, 247, 0.45); } .vt-city-card--gradient .vt-city-card__overlay { background: linear-gradient(180deg, rgba(11, 19, 38, 0) 0%, rgba(11, 19, 38, 0.55) 65%, rgba(11, 19, 38, 0.85) 100%); } .vt-city-card__icon { position: absolute; top: 18px; inset-inline-end: 18px; font-size: 32px !important; color: rgba(255, 255, 255, 0.85); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); } /* ========================================================================== Talent cards (Featured Candidates) ========================================================================== */ .vt-talent-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 24px; } @media (min-width: 768px) { .vt-talent-grid { grid-template-columns: repeat(3, 1fr); } } .vt-talent-card { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--vt-radius-lg); padding: 24px; display: flex; align-items: center; gap: 16px; transition: border-color 220ms ease; color: inherit; } .vt-talent-card:hover { border-color: rgba(173, 198, 255, 0.3); color: inherit; } .vt-talent-card:nth-child(2):hover { border-color: rgba(76, 215, 246, 0.3); } .vt-talent-card:nth-child(3):hover { border-color: rgba(196, 163, 255, 0.3); } .vt-talent-card__img-wrap { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; filter: grayscale(100%); transition: filter 220ms ease; background: var(--vt-surface-high); display: flex; align-items: center; justify-content: center; } .vt-talent-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; } .vt-talent-card:hover .vt-talent-card__img-wrap { filter: grayscale(0%); } .vt-talent-card__name { font-family: var(--vt-font-display); font-size: 18px; font-weight: 600; color: var(--vt-on-surface); margin: 0; } .vt-talent-card__role { font-size: 12px; color: var(--vt-primary); margin: 4px 0 0; } .vt-talent-card:nth-child(2) .vt-talent-card__role { color: var(--vt-secondary); } .vt-talent-card:nth-child(3) .vt-talent-card__role { color: var(--vt-tertiary); } .vt-talent-card__meta { color: var(--vt-outline); font-size: 12px; margin: 6px 0 0; display: flex; gap: 8px; align-items: center; } /* ========================================================================== How it works ========================================================================== */ .vt-steps { display: grid; grid-template-columns: 1fr; gap: 48px; } @media (min-width: 768px) { .vt-steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } } .vt-step { text-align: center; } .vt-step__icon { width: 80px; height: 80px; border-radius: var(--vt-radius-lg); background: rgba(173, 198, 255, 0.2); color: var(--vt-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .vt-step__icon .material-symbols-outlined { font-size: 38px; } .vt-step:nth-child(2) .vt-step__icon { background: rgba(76, 215, 246, 0.2); color: var(--vt-secondary); } .vt-step:nth-child(3) .vt-step__icon { background: rgba(196, 163, 255, 0.2); color: var(--vt-tertiary); } .vt-step h3 { font-family: var(--vt-font-display); font-weight: 600; font-size: 20px; color: var(--vt-on-surface); margin: 0 0 12px; } .vt-step p { color: var(--vt-on-surface-variant); font-size: 16px; line-height: 1.6; margin: 0; } /* ========================================================================== Testimonials ========================================================================== */ .vt-testimonial-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .vt-testimonial-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .vt-testimonial-grid { grid-template-columns: repeat(3, 1fr); } } .vt-testimonial { position: relative; background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--vt-radius-lg); padding: 32px; } .vt-testimonial__quote { position: absolute; top: 24px; right: 24px; font-size: 40px; color: rgba(173, 198, 255, 0.4); line-height: 1; } [dir="rtl"] .vt-testimonial__quote { right: auto; left: 24px; transform: scaleX(-1); } .vt-testimonial__stars { display: flex; gap: 4px; margin-bottom: 16px; color: var(--vt-tertiary); } .vt-testimonial__stars .material-symbols-outlined { font-size: 16px; font-variation-settings: 'FILL' 1; } .vt-testimonial__text { color: var(--vt-on-surface-variant); font-size: 16px; line-height: 1.55; font-style: italic; margin: 0 0 24px; } .vt-testimonial__name { font-size: 14px; font-weight: 600; color: var(--vt-on-surface); margin: 0; } .vt-testimonial__role { font-size: 12px; color: var(--vt-outline); margin: 4px 0 0; } /* ========================================================================== Country list ========================================================================== */ .vt-country-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px; } @media (min-width: 640px) { .vt-country-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .vt-country-grid { grid-template-columns: repeat(4, 1fr); } } .vt-country-card { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; background: var(--vt-surface-container); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--vt-radius-md); transition: border-color 220ms ease, transform 220ms ease; color: inherit; } .vt-country-card:hover { border-color: rgba(76, 215, 246, 0.4); transform: translateY(-2px); color: inherit; } .vt-country-card h4 { font-family: var(--vt-font-display); font-size: 16px; font-weight: 600; color: var(--vt-on-surface); margin: 0 0 6px; } .vt-country-card span { color: var(--vt-secondary); font-size: 13px; font-weight: 500; } /* ========================================================================== Blog cards ========================================================================== */ .vt-blog-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .vt-blog-grid { grid-template-columns: repeat(3, 1fr); } } .vt-blog-card { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--vt-radius-md); overflow: hidden; transition: border-color 220ms ease, transform 220ms ease; color: inherit; display: flex; flex-direction: column; } .vt-blog-card:hover { border-color: rgba(173, 198, 255, 0.35); transform: translateY(-2px); color: inherit; } .vt-blog-card__img { aspect-ratio: 16 / 9; overflow: hidden; } .vt-blog-card__img img { width: 100%; height: 100%; object-fit: cover; } .vt-blog-card__body { padding: 20px; } .vt-blog-card__meta { color: var(--vt-outline); font-size: 12px; margin: 0 0 8px; display: flex; gap: 6px; align-items: center; } .vt-blog-card__meta .material-symbols-outlined { font-size: 14px; } .vt-blog-card__title { font-family: var(--vt-font-display); font-size: 18px; font-weight: 600; color: var(--vt-on-surface); margin: 0; line-height: 1.35; } /* ========================================================================== Footer ========================================================================== */ .vt-footer { background: var(--vt-surface-lowest); border-top: 1px solid rgba(255, 255, 255, 0.05); padding: 64px 0 32px; color: var(--vt-on-surface-variant); } .vt-footer__grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; } @media (min-width: 768px) { .vt-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .vt-footer__brand { font-family: var(--vt-font-display); font-weight: 700; font-size: 22px; color: var(--vt-primary); margin: 0 0 12px; } .vt-footer__tagline { font-size: 14px; line-height: 1.6; color: var(--vt-on-surface-variant); max-width: 320px; margin: 0 0 16px; } .vt-footer__contact { font-size: 13px; color: var(--vt-on-surface-variant); } .vt-footer__contact a { color: var(--vt-secondary); } .vt-footer h5 { font-family: var(--vt-font-display); font-size: 14px; font-weight: 600; color: var(--vt-on-surface); margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.05em; } .vt-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .vt-footer__links a { color: var(--vt-on-surface-variant); font-size: 14px; transition: color 180ms ease; } .vt-footer__links a:hover { color: var(--vt-primary); } .vt-footer__social { display: flex; gap: 12px; margin-top: 16px; } .vt-footer__social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--vt-surface-high); color: var(--vt-on-surface); transition: background 180ms ease, color 180ms ease; } .vt-footer__social a:hover { background: var(--vt-primary); color: var(--vt-on-primary-container); } .vt-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: 12px; color: var(--vt-outline); } /* ========================================================================== Mobile bottom bar ========================================================================== */ .vt-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--vt-surface-lowest, #060e20); border-top: 1px solid rgba(66, 71, 84, 0.3); z-index: 40; } @media (min-width: 992px) { .vt-bottom-nav { display: none; } } .vt-bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--vt-on-surface-variant); font-size: 11px; font-weight: 500; gap: 2px; } .vt-bottom-nav__item.is-active { color: var(--vt-secondary); } .vt-bottom-nav__item .material-symbols-outlined { font-size: 22px; } /* Push body content above the fixed bottom nav on mobile */ @media (max-width: 991px) { .vt-home main { padding-bottom: 80px; } } /* ========================================================================== View-all centered button ========================================================================== */ .vt-viewall { text-align: center; margin-top: 48px; } .vt-viewall a { display: inline-block; } /* ========================================================================== Material Symbols defaults ========================================================================== */ .vt-home .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } /* Avoid Bootstrap modal-fade interference — let existing modals work as-is. We do not restyle modals here; they use existing main.css. */ /* ========================================================================== Filter trigger button (in hero search) ========================================================================== */ .vt-filter-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--vt-surface-container); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--vt-radius); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 14px; font-weight: 600; cursor: pointer; position: relative; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; white-space: nowrap; } .vt-filter-trigger:hover { background: var(--vt-surface-high); border-color: rgba(173,198,255,0.25); color: var(--vt-primary); } .vt-filter-trigger .material-symbols-outlined { font-size: 20px; } @media (max-width: 640px) { .vt-filter-trigger__label { display: none; } .vt-filter-trigger { padding: 12px 14px; } } .vt-filter-trigger__badge { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--vt-secondary); color: var(--vt-on-secondary); font-size: 11px; font-weight: 700; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* ========================================================================== Filter drawer ========================================================================== */ .vt-filter { position: fixed; inset: 0; z-index: 1000; visibility: hidden; pointer-events: none; } .vt-filter.is-open { visibility: visible; pointer-events: auto; } .vt-filter__backdrop { position: absolute; inset: 0; background: rgba(6, 14, 32, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 240ms ease; } .vt-filter.is-open .vt-filter__backdrop { opacity: 1; } .vt-filter__panel { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 100%; max-width: 560px; background: var(--vt-surface-low); border-inline-start: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); box-shadow: -24px 0 48px rgba(0,0,0,0.35); } [dir="rtl"] .vt-filter__panel { border-inline-start: none; border-inline-end: 1px solid rgba(255,255,255,0.06); transform: translateX(-100%); box-shadow: 24px 0 48px rgba(0,0,0,0.35); } .vt-filter.is-open .vt-filter__panel { transform: translateX(0); } @media (max-width: 640px) { .vt-filter__panel { max-width: 100%; } } .vt-filter__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px; border-bottom: 1px solid rgba(255,255,255,0.06); background: var(--vt-surface-container); position: sticky; top: 0; z-index: 2; } .vt-filter__title { font-family: var(--vt-font-display); font-weight: 700; font-size: 22px; color: var(--vt-on-surface); margin: 0 0 4px; } .vt-filter__sub { color: var(--vt-on-surface-variant); font-size: 13px; margin: 0; } .vt-filter__close { width: 40px; height: 40px; background: var(--vt-surface-high); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--vt-radius); color: var(--vt-on-surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .vt-filter__close:hover { background: var(--vt-surface-bright); color: var(--vt-primary); } .vt-filter__body { flex: 1 1 auto; overflow-y: auto; padding: 8px 28px 24px; display: flex; flex-direction: column; gap: 4px; } .vt-filter__section { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .vt-filter__section:last-child { border-bottom: none; } .vt-filter__section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--vt-primary); } .vt-filter__section-head .material-symbols-outlined { font-size: 20px; } .vt-filter__section-head h3 { font-family: var(--vt-font-display); font-weight: 600; font-size: 16px; color: var(--vt-on-surface); margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .vt-filter__hint { font-family: var(--vt-font-body); font-weight: 400; font-size: 12px; color: var(--vt-outline); } /* Chip group */ .vt-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; } .vt-filter__chips--scroll { max-height: 260px; overflow-y: auto; padding: 8px; background: var(--vt-surface-lowest); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--vt-radius); margin-top: 8px; } .vt-chip { display: inline-flex; align-items: center; cursor: pointer; user-select: none; } .vt-chip input { position: absolute; opacity: 0; pointer-events: none; } .vt-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--vt-surface-container); border: 1px solid rgba(255,255,255,0.06); color: var(--vt-on-surface-variant); border-radius: var(--vt-radius-full); font-size: 13px; font-weight: 500; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; line-height: 1.2; } .vt-chip:hover span { background: var(--vt-surface-high); color: var(--vt-on-surface); } .vt-chip input:checked + span { background: rgba(173, 198, 255, 0.12); border-color: var(--vt-primary); color: var(--vt-primary); } .vt-chip input:checked + span::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--vt-primary); border-radius: 50%; } .vt-filter__showall { margin-top: 10px; padding: 6px 0; background: transparent; border: none; color: var(--vt-secondary); font-size: 13px; font-weight: 600; cursor: pointer; text-align: start; } .vt-filter__showall:hover { text-decoration: underline; } .vt-filter__showall.is-open::after { content: ' ↑'; } .vt-filter__showall:not(.is-open)::after { content: ' ↓'; } .vt-filter__search { width: 100%; padding: 10px 14px; background: var(--vt-surface-container); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--vt-radius); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 14px; margin-bottom: 8px; outline: none; } .vt-filter__search:focus { border-color: var(--vt-primary); } .vt-filter__field-row { display: flex; gap: 12px; flex-wrap: wrap; } .vt-filter__select, .vt-filter__input { flex: 1; min-width: 120px; padding: 10px 14px; background: var(--vt-surface-container); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--vt-radius); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 14px; outline: none; } .vt-filter__select:focus, .vt-filter__input:focus { border-color: var(--vt-primary); } .vt-filter__select[multiple] { min-height: 120px; } .vt-filter__salary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } @media (max-width: 480px) { .vt-filter__salary { grid-template-columns: 1fr; } } .vt-filter__footer { display: flex; gap: 12px; padding: 18px 28px calc(18px + env(safe-area-inset-bottom)); background: var(--vt-surface-container); border-top: 1px solid rgba(255,255,255,0.06); position: sticky; bottom: 0; } .vt-filter__footer .vt-btn { flex: 1; } .vt-filter__footer .vt-btn--primary { flex: 2; } .vt-filter__apply-count { font-weight: 700; opacity: 0.85; margin-inline-start: 4px; } .vt-filter__apply-count:empty { display: none; } .vt-filter__apply-count:not(:empty)::before { content: '('; } .vt-filter__apply-count:not(:empty)::after { content: ')'; } /* Lock background scroll when drawer open */ .vt-home.vt-noscroll { overflow: hidden; } /* ========================================================================== Themed scrollbars inside drawer ========================================================================== */ .vt-filter__body, .vt-filter__chips--scroll, .vt-dd__list { scrollbar-width: thin; scrollbar-color: var(--vt-surface-bright) transparent; } .vt-filter__body::-webkit-scrollbar, .vt-filter__chips--scroll::-webkit-scrollbar, .vt-dd__list::-webkit-scrollbar { width: 8px; height: 8px; } .vt-filter__body::-webkit-scrollbar-track, .vt-filter__chips--scroll::-webkit-scrollbar-track, .vt-dd__list::-webkit-scrollbar-track { background: transparent; } .vt-filter__body::-webkit-scrollbar-thumb, .vt-filter__chips--scroll::-webkit-scrollbar-thumb, .vt-dd__list::-webkit-scrollbar-thumb { background: var(--vt-surface-bright); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; } .vt-filter__body::-webkit-scrollbar-thumb:hover, .vt-filter__chips--scroll::-webkit-scrollbar-thumb:hover, .vt-dd__list::-webkit-scrollbar-thumb:hover { background: var(--vt-primary); background-clip: padding-box; border: 2px solid transparent; } /* ========================================================================== Custom searchable dropdown (vt-dd) ========================================================================== */ .vt-dd { position: relative; flex: 1; min-width: 180px; } .vt-dd__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var(--vt-surface-container); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--vt-radius); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 14px; cursor: pointer; text-align: start; transition: border-color 180ms ease, background 180ms ease; min-height: 44px; } .vt-dd__trigger:hover { border-color: rgba(173,198,255,0.25); background: var(--vt-surface-high); } .vt-dd.is-open > .vt-dd__trigger { border-color: var(--vt-primary); } .vt-dd__placeholder { color: var(--vt-outline); flex-shrink: 0; } .vt-dd__values { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; color: var(--vt-on-surface); min-width: 0; } .vt-dd.has-value .vt-dd__placeholder { display: none; } .vt-dd:not(.has-value) .vt-dd__values { display: none; } .vt-dd__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: rgba(173, 198, 255, 0.12); border: 1px solid rgba(173, 198, 255, 0.25); color: var(--vt-primary); border-radius: 9999px; font-size: 12px; font-weight: 500; line-height: 1.4; max-width: 200px; } .vt-dd__chip-x { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: rgba(173, 198, 255, 0.2); cursor: pointer; font-size: 14px; line-height: 1; } .vt-dd__chip-x:hover { background: var(--vt-primary); color: var(--vt-on-primary-container); } .vt-dd__caret { margin-inline-start: auto; color: var(--vt-outline); transition: transform 200ms ease; font-size: 20px; flex-shrink: 0; } .vt-dd.is-open .vt-dd__caret { transform: rotate(180deg); color: var(--vt-primary); } .vt-dd__panel { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 50; background: var(--vt-surface-container); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--vt-radius-md); box-shadow: 0 16px 48px rgba(0,0,0,0.45); overflow: hidden; display: flex; flex-direction: column; max-height: 340px; /* Expand to fit content even when trigger is narrow (e.g. currency in salary row) */ min-width: 100%; width: max-content; max-width: min(320px, 90vw); } /* When the panel would overflow the drawer's right edge, anchor to the end instead */ .vt-dd--end > .vt-dd__panel { inset-inline-start: auto; inset-inline-end: 0; } .vt-dd__search-wrap { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); background: var(--vt-surface-low); } .vt-dd__search-wrap .material-symbols-outlined { color: var(--vt-outline); font-size: 18px; } .vt-dd__search { flex: 1; background: transparent; border: none; outline: none; color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 14px; padding: 0; } .vt-dd__search::placeholder { color: var(--vt-outline); } .vt-dd__list { flex: 1; overflow-y: auto; padding: 6px; } .vt-dd__option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: transparent; border: none; color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 14px; text-align: start; cursor: pointer; border-radius: var(--vt-radius); transition: background 140ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vt-dd__option:hover { background: var(--vt-surface-high); } .vt-dd__option.is-active { background: rgba(173, 198, 255, 0.08); color: var(--vt-primary); } .vt-dd__check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--vt-outline-variant); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 140ms ease, border-color 140ms ease; background: transparent; } .vt-dd__check .material-symbols-outlined { font-size: 14px; color: var(--vt-on-primary-container); opacity: 0; transition: opacity 140ms ease; } .vt-dd__option.is-active .vt-dd__check { background: var(--vt-primary); border-color: var(--vt-primary); } .vt-dd__option.is-active .vt-dd__check .material-symbols-outlined { opacity: 1; } /* For single-select variant, hide checkmark squares and use a different active style */ .vt-dd[data-vt-dd-multi="0"] .vt-dd__check { display: none; } .vt-dd[data-vt-dd-multi="0"] .vt-dd__option.is-active { background: rgba(173, 198, 255, 0.12); font-weight: 600; } /* Search-filter hide — class-based so it beats any !important display rules from page-level CSS */ .vt-dd__option.vt-dd__option--hidden, .vt-dd[data-vt-dd-multi="0"] .vt-dd__option.vt-dd__option--hidden, .vt-dd[data-vt-dd-multi="1"] .vt-dd__option.vt-dd__option--hidden { display: none !important; } .vt-dd__empty { text-align: center; padding: 18px; color: var(--vt-outline); font-size: 13px; } /* ── Portaled panel premium styling ── */ [data-vt-portaled] { z-index: 2147483647 !important; background: var(--vt-surface-container) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: var(--vt-radius-md) !important; padding: 6px !important; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } [data-vt-portaled][hidden] { display: none !important; } [data-vt-portaled] .vt-dd__search-wrap { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 14px !important; background: rgba(11, 19, 38, 0.65) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 10px !important; margin: 8px !important; transition: border-color 180ms ease, box-shadow 180ms ease !important; } [data-vt-portaled] .vt-dd__search-wrap:focus-within { border-color: #4d8eff !important; box-shadow: 0 0 0 3px rgba(77, 142, 255, 0.18) !important; } [data-vt-portaled] .vt-dd__search-wrap .material-symbols-outlined { font-size: 18px !important; color: var(--vt-on-surface-variant) !important; flex-shrink: 0 !important; } [data-vt-portaled] .vt-dd__search { flex: 1 !important; min-width: 0 !important; background: transparent !important; border: 0 !important; outline: none !important; color: #ffffff !important; font-size: 14px !important; font-family: var(--vt-font-body) !important; padding: 2px 0 !important; margin: 0 !important; height: auto !important; -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important; } [data-vt-portaled] .vt-dd__search::placeholder { color: var(--vt-on-surface-variant) !important; opacity: 0.85 !important; } [data-vt-portaled] .vt-dd__search::-webkit-search-cancel-button, [data-vt-portaled] .vt-dd__search::-webkit-search-decoration { -webkit-appearance: none !important; display: none !important; } [data-vt-portaled] .vt-dd__list { flex: 1 !important; overflow-y: auto !important; padding: 2px !important; } [data-vt-portaled] .vt-dd__list::-webkit-scrollbar { width: 6px !important; } [data-vt-portaled] .vt-dd__list::-webkit-scrollbar-thumb { background: var(--vt-outline-variant) !important; border-radius: 6px !important; } [data-vt-portaled] .vt-dd__empty { padding: 16px 14px !important; text-align: center !important; font-size: 13px !important; color: var(--vt-on-surface-variant) !important; font-style: italic !important; } [data-vt-portaled] .vt-dd__option { display: flex !important; align-items: center !important; width: 100% !important; gap: 10px !important; padding: 10px 14px !important; margin: 0 !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; text-align: start !important; color: var(--vt-on-surface) !important; font-family: var(--vt-font-body) !important; font-size: 13px !important; cursor: pointer !important; transition: background 140ms ease !important; } [data-vt-portaled] .vt-dd__option:hover { background: var(--vt-surface-high) !important; } [data-vt-portaled] .vt-dd__option.is-active { background: rgba(173,198,255,0.12) !important; color: var(--vt-primary) !important; font-weight: 600 !important; } [data-vt-portaled] .vt-dd__option.vt-dd__option--hidden { display: none !important; } [data-vt-portaled] .vt-dd__check { width: 18px !important; height: 18px !important; border-radius: 50% !important; border: 1.5px solid var(--vt-outline-variant) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; background: transparent !important; transition: background 140ms ease, border-color 140ms ease !important; } [data-vt-portaled] .vt-dd__check .material-symbols-outlined { font-size: 14px !important; color: var(--vt-on-primary-container) !important; opacity: 0 !important; transition: opacity 140ms ease !important; } [data-vt-portaled] .vt-dd__option.is-active .vt-dd__check { background: var(--vt-primary) !important; border-color: var(--vt-primary) !important; } [data-vt-portaled] .vt-dd__option.is-active .vt-dd__check .material-symbols-outlined { opacity: 1 !important; } [data-vt-portaled] .vt-dd__option-label { flex: 1 !important; text-align: start !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; color: inherit !important; font-size: 13px !important; line-height: 1.35 !important; } [data-vt-portaled] .vt-dd__option-count { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 22px !important; height: 18px !important; padding: 0 6px !important; font-size: 11px !important; font-weight: 600 !important; border-radius: 9999px !important; background: rgba(255, 255, 255, 0.08) !important; color: var(--vt-outline) !important; transition: background 140ms ease, color 140ms ease !important; margin-inline-start: auto !important; } [data-vt-portaled] .vt-dd__option:hover .vt-dd__option-count { background: rgba(255, 255, 255, 0.15) !important; color: var(--vt-on-surface) !important; } [data-vt-portaled] .vt-dd__option.is-active .vt-dd__option-count { background: rgba(173, 198, 255, 0.18) !important; color: var(--vt-primary) !important; } /* ========================================================================== Chip count (jobs available per filter option) — pill badge with active state ========================================================================== */ .vt-chip__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 7px; margin-inline-start: 6px; background: var(--vt-surface-lowest); color: var(--vt-outline); font-size: 11px; font-weight: 600; border-radius: 9999px; line-height: 1; font-variant-numeric: tabular-nums; } .vt-chip input:checked + span .vt-chip__count { background: rgba(173, 198, 255, 0.22); color: var(--vt-primary); } /* Zero-count chip: dimmed but still clickable */ .vt-chip--zero span { opacity: 0.45; } .vt-chip--zero:hover span { background: var(--vt-surface-container); color: var(--vt-on-surface-variant); } .vt-chip--zero input:checked + span { opacity: 0.75; } /* Per-section "Show all (+N)" expander for zero-count chips */ .vt-chip--hidden { display: none !important; } .vt-filter__show-more { margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; background: transparent; border: 1px dashed rgba(255,255,255,0.18); border-radius: 999px; color: var(--vt-on-surface-variant, #c2c6d6); font-size: 12px; font-weight: 600; cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background 160ms ease; } .vt-filter__show-more:hover { color: var(--vt-primary, #adc6ff); border-color: rgba(173,198,255,0.40); background: rgba(173,198,255,0.06); } .vt-filter__show-more .material-symbols-outlined { font-size: 16px; transition: transform 200ms ease; } .vt-filter__show-more.is-open { color: var(--vt-secondary, #4cd7f6); border-color: rgba(76,215,246,0.40); } /* Dropdown option: label expands, count sits at end as same pill */ .vt-dd__option-label { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; } .vt-dd__option-count { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 18px; padding: 0 7px; margin-inline-start: 8px; background: var(--vt-surface-lowest); color: var(--vt-outline); font-size: 11px; font-weight: 600; border-radius: 9999px; line-height: 1; font-variant-numeric: tabular-nums; } .vt-dd__option.is-active .vt-dd__option-count { background: rgba(173, 198, 255, 0.22); color: var(--vt-primary); } .vt-dd__option--zero { opacity: 0.55; } .vt-dd__option--zero:hover { opacity: 0.85; } /* ──────────── Grouped dropdown (vt-dd--grouped) ──────────── */ .vt-dd--grouped .vt-dd__list, [data-vt-portaled] .vt-dd__list { /* groups arrange themselves vertically, no extra gap needed */ } .vt-dd__group { display: block; } .vt-dd__group--hidden { display: none !important; } .vt-dd__group-head { display: flex; width: 100%; align-items: center; gap: 8px; padding: 10px 12px; background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,0.06); color: var(--vt-on-surface-variant, #c2c6d6); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.5; cursor: pointer; text-align: start; overflow: visible; transition: background 160ms ease, color 160ms ease; } .vt-dd__group:first-child .vt-dd__group-head { border-top: 0; } .vt-dd__group-head:hover { background: rgba(173,198,255,0.06); color: var(--vt-on-surface, #e6e8f2); } .vt-dd__group-caret { font-size: 18px; transition: transform 200ms ease; } .vt-dd__group.is-open .vt-dd__group-caret { transform: rotate(90deg); } [dir="rtl"] .vt-dd__group-caret { transform: rotate(180deg); } [dir="rtl"] .vt-dd__group.is-open .vt-dd__group-caret { transform: rotate(90deg); } .vt-dd__group-title { flex: 1 1 auto; min-width: 0; line-height: 1.5; overflow: visible; } .vt-dd__group-count { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 18px; padding: 0 7px; margin-inline-start: 6px; background: var(--vt-surface-lowest, rgba(255,255,255,0.06)); color: var(--vt-outline, #8d93a8); font-size: 11px; font-weight: 700; border-radius: 9999px; line-height: 1; font-variant-numeric: tabular-nums; } .vt-dd__group.has-selected .vt-dd__group-count { background: rgba(173, 198, 255, 0.22); color: var(--vt-primary, #adc6ff); } .vt-dd__group-list { padding: 2px 0 6px; } .vt-dd__group-list .vt-dd__option { padding-inline-start: 28px; } .vt-dd__option--hidden { display: none !important; } /* ========================================================================== Hero search: focus border matches theme ========================================================================== */ .vt-search__field:focus-within { border-color: var(--vt-primary); background: var(--vt-surface-high); box-shadow: 0 0 0 3px rgba(173, 198, 255, 0.14); } .vt-search__field input:focus, .vt-search__field input:focus-visible { outline: none !important; box-shadow: none !important; } /* Themed focus rings for number inputs and dd search */ .vt-filter__input:focus, .vt-filter__search:focus, .vt-dd__search:focus { outline: none; border-color: var(--vt-primary); box-shadow: 0 0 0 3px rgba(173, 198, 255, 0.14); } /* Remove default Chrome number-spinner styling clash in dark theme */ .vt-filter__input::-webkit-outer-spin-button, .vt-filter__input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .vt-filter__input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* ========================================================================== jQuery UI autocomplete — themed dark (scoped via .vt-ac class) ========================================================================== */ .ui-autocomplete.vt-ac { background: var(--vt-surface-container) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: var(--vt-radius-md) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.45) !important; padding: 6px !important; max-height: 340px; overflow-y: auto; font-family: var(--vt-font-body); z-index: 1100; list-style: none; margin: 0; } .ui-autocomplete.vt-ac .ui-menu-item { list-style: none; padding: 0; margin: 0; } .ui-autocomplete.vt-ac .ui-menu-item-wrapper, .ui-autocomplete.vt-ac .ui-menu-item > a, .ui-autocomplete.vt-ac .ui-menu-item div { display: block; padding: 10px 14px; color: var(--vt-on-surface) !important; font-size: 14px; border: none !important; border-radius: var(--vt-radius); cursor: pointer; background: transparent !important; margin: 0; } .ui-autocomplete.vt-ac .ui-menu-item-wrapper.ui-state-active, .ui-autocomplete.vt-ac .ui-menu-item-wrapper:hover, .ui-autocomplete.vt-ac .ui-menu-item > a.ui-state-active, .ui-autocomplete.vt-ac .ui-menu-item > a:hover, .ui-autocomplete.vt-ac .ui-menu-item div.ui-state-active, .ui-autocomplete.vt-ac .ui-menu-item div:hover { background: var(--vt-surface-high) !important; color: var(--vt-primary) !important; border: none !important; } /* Themed scrollbar for autocomplete (consistent with drawer) */ .ui-autocomplete.vt-ac::-webkit-scrollbar { width: 8px; } .ui-autocomplete.vt-ac::-webkit-scrollbar-track { background: transparent; } .ui-autocomplete.vt-ac::-webkit-scrollbar-thumb { background: var(--vt-surface-bright); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; } .ui-autocomplete.vt-ac::-webkit-scrollbar-thumb:hover { background: var(--vt-primary); background-clip: padding-box; } /* ========================================================================== ANIMATION PACK — scroll reveals, hero motion, micro-interactions Respects prefers-reduced-motion (see bottom of file). ========================================================================== */ /* Reveal: elements with data-vt-reveal start hidden + offset, then animate in when IntersectionObserver adds .is-revealed. Direction = data-vt-reveal value. */ .vt-home [data-vt-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .vt-home [data-vt-reveal="up"] { transform: translateY(28px); } .vt-home [data-vt-reveal="down"] { transform: translateY(-28px); } .vt-home [data-vt-reveal="left"] { transform: translateX(-32px); } .vt-home [data-vt-reveal="right"] { transform: translateX(32px); } .vt-home [data-vt-reveal="scale"] { transform: scale(0.96); } .vt-home [data-vt-reveal].is-revealed { opacity: 1; transform: translate(0, 0) scale(1); } /* Stagger children: parent with data-vt-stagger animates its direct revealable children at incremental delays via inline --vt-stagger-i index assigned by JS. */ .vt-home [data-vt-stagger] [data-vt-reveal] { transition-delay: calc(var(--vt-stagger-i, 0) * 110ms); } /* Hero entrance — runs once on load (no observer needed). */ .vt-home .vt-hero__title, .vt-home .vt-hero__lead, .vt-home .vt-hero .vt-search, .vt-home .vt-hero__title-mini { opacity: 0; transform: translateY(20px); animation: vtHeroIn 1200ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } .vt-home .vt-hero__title { animation-delay: 200ms; } .vt-home .vt-hero__lead { animation-delay: 450ms; } .vt-home .vt-hero .vt-search { animation-delay: 700ms; } @keyframes vtHeroIn { to { opacity: 1; transform: translateY(0); } } /* Animated mesh gradient behind hero — slow, low-saturation, GPU friendly. */ .vt-hero::before { content: ''; position: absolute; inset: -10%; z-index: 0; background: transparent; display: none !important; pointer-events: none; } @keyframes vtMeshDrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, -2%) scale(1.05); } 100% { transform: translate(-2%, 3%) scale(0.98); } } /* Micro-interactions polish */ .vt-home .vt-chip { transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1); } .vt-home .vt-chip:hover { transform: translateY(-1px); } .vt-home .vt-chip:active { transform: translateY(0); } .vt-home .vt-company-card, .vt-home .vt-job-row, .vt-home .vt-talent-card, .vt-home .vt-blog-card, .vt-home .vt-testimonial, .vt-home .vt-cta, .vt-home .vt-category-card, .vt-home .vt-industry-tile, .vt-home .vt-country-card { transition: border-color 320ms ease, box-shadow 420ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1); } .vt-home .vt-company-card:hover, .vt-home .vt-talent-card:hover, .vt-home .vt-blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(173, 198, 255, 0.18); } .vt-home .vt-job-row:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(173, 198, 255, 0.16); } .vt-home .vt-btn:active { transform: scale(0.97); } .vt-home .vt-search__submit:active { transform: scale(0.97); } .vt-home .vt-filter-trigger:active { transform: scale(0.97); } /* Reduced motion: kill everything */ @media (prefers-reduced-motion: reduce) { .vt-home *, .vt-home *::before, .vt-home *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } .vt-home [data-vt-reveal] { opacity: 1; transform: none; } .vt-hero::before { animation: none; } } /* ========================================================================== COMPANIES LISTING — /companies (scope: .vt-companies) ========================================================================== */ .vt-companies { --vt-bg: #0b1326; --vt-surface-dim: #0b1326; --vt-surface-bright: #31394d; --vt-surface-lowest: #060e20; --vt-surface-low: #131b2e; --vt-surface-container: #171f33; --vt-surface-high: #222a3d; --vt-surface-highest: #2d3449; --vt-surface-variant: #2d3449; --vt-on-surface: #dae2fd; --vt-on-surface-variant: #c2c6d6; --vt-outline: #8c909f; --vt-outline-variant: #424754; --vt-primary: #adc6ff; --vt-primary-container: #4d8eff; --vt-on-primary: #000000; --vt-on-primary-container: #000000; --vt-secondary: #4cd7f6; --vt-secondary-container: #03b5d3; --vt-tertiary: #c4a3ff; --vt-radius-sm: 0.25rem; --vt-radius: 0.5rem; --vt-radius-md: 0.75rem; --vt-radius-lg: 1rem; --vt-radius-full: 9999px; --vt-container-max: 1280px; --vt-margin-desktop: 32px; --vt-margin-mobile: 16px; --vt-font-display: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif; --vt-font-body: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; background: var(--vt-bg); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; } [dir="rtl"] .vt-companies { --vt-font-display: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif; --vt-font-body: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; } .vt-companies a { color: inherit; text-decoration: none; } .vt-companies a:hover { color: var(--vt-primary); } .vt-companies img { max-width: 100%; height: auto; display: block; } .vt-companies .container { max-width: var(--vt-container-max); margin-left: auto; margin-right: auto; padding-left: var(--vt-margin-mobile); padding-right: var(--vt-margin-mobile); } @media (min-width: 768px) { .vt-companies .container { padding-left: var(--vt-margin-desktop); padding-right: var(--vt-margin-desktop); } } /* Hero */ .vt-companies__hero { position: relative; padding: 80px 0 56px; overflow: hidden; } .vt-companies__hero::before { content: ''; position: absolute; inset: -10%; z-index: 0; background: radial-gradient(circle at 25% 35%, rgba(77, 142, 255, 0.18), transparent 45%), radial-gradient(circle at 75% 65%, rgba(76, 215, 246, 0.14), transparent 50%); filter: blur(60px); animation: vtMeshDrift 38s ease-in-out infinite alternate; pointer-events: none; } .vt-companies__hero-inner { position: relative; z-index: 1; text-align: center; } .vt-companies__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(173, 198, 255, 0.10); border: 1px solid rgba(173, 198, 255, 0.20); color: var(--vt-primary); border-radius: var(--vt-radius-full); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; } .vt-companies__eyebrow .material-symbols-outlined { font-size: 16px; } .vt-companies__title { font-family: var(--vt-font-display); font-weight: 700; font-size: clamp(30px, 4.5vw, 44px); line-height: 1.15; letter-spacing: -0.02em; color: var(--vt-on-surface); margin: 0 0 14px; } .vt-companies__title .vt-accent { background: linear-gradient(135deg, var(--vt-primary), var(--vt-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .vt-companies__sub { color: var(--vt-on-surface-variant); font-size: 16px; max-width: 56ch; margin: 0 auto; } /* Layout: sidebar + main */ .vt-companies__layout { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 32px 0 80px; align-items: start; } @media (min-width: 1024px) { .vt-companies__layout { grid-template-columns: 320px 1fr; } } /* Sidebar */ /* Sidebar shell sizes to its content. On desktop it sticks just below the nav. If content ever exceeds the viewport, the card scrolls internally. */ .vt-companies__sidebar { position: relative; display: flex; flex-direction: column; gap: 14px; } @media (min-width: 1024px) { .vt-companies__sidebar { position: sticky; top: 88px; max-height: calc(100vh - 88px - 24px); } } .vt-companies__sb-form { display: flex; flex-direction: column; gap: 14px; min-height: 0; } /* Glass card holds the filter content. Scrolls only when it would overflow. */ .vt-companies__sb-card { background: rgba(30, 41, 59, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--vt-radius-lg); padding: 22px; min-height: 0; overflow-y: auto; } .vt-companies__sb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .vt-companies__sb-head h3 { font-family: var(--vt-font-display); font-weight: 600; font-size: 18px; color: var(--vt-on-surface); margin: 0; } .vt-companies__sb-head .material-symbols-outlined { color: var(--vt-primary); } .vt-companies__sb-section { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .vt-companies__sb-section:last-of-type { border-bottom: none; } .vt-feat-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .vt-feat-toggle input { position: absolute; opacity: 0; pointer-events: none; } .vt-feat-toggle__pill { position: relative; flex-shrink: 0; width: 38px; height: 22px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; transition: background 180ms ease, border-color 180ms ease; } .vt-feat-toggle__dot { position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #f5f5f5; transition: inset-inline-start 180ms ease, background 180ms ease; } .vt-feat-toggle input:checked ~ .vt-feat-toggle__pill { background: linear-gradient(135deg, #ffd166 0%, #f4a300 100%); border-color: rgba(255, 209, 102, 0.6); } .vt-feat-toggle input:checked ~ .vt-feat-toggle__pill .vt-feat-toggle__dot { inset-inline-start: 18px; background: #1f1300; } .vt-feat-toggle input:focus-visible ~ .vt-feat-toggle__pill { box-shadow: 0 0 0 3px rgba(244, 163, 0, 0.30); } .vt-feat-toggle__text { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--vt-on-surface); } .vt-feat-toggle__text .material-symbols-outlined { font-size: 16px; color: #f4a300; } .vt-companies__sb-label { display: flex; align-items: center; gap: 8px; font-family: var(--vt-font-display); font-weight: 600; font-size: 13px; color: var(--vt-on-surface); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.06em; } .vt-companies__sb-label .material-symbols-outlined { font-size: 16px; color: var(--vt-primary); } /* Themed text input */ .vt-companies__input { width: 100%; padding: 10px 14px; background: var(--vt-surface-container); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--vt-radius); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 14px; outline: none; transition: border-color 180ms ease, box-shadow 180ms ease; } .vt-companies__input::placeholder { color: var(--vt-outline); } .vt-companies__input:focus { border-color: var(--vt-primary); box-shadow: 0 0 0 3px rgba(173, 198, 255, 0.14); } /* vt-dd disabled state (used for State/City when no parent selected) */ .vt-companies .vt-dd.is-disabled .vt-dd__trigger { opacity: 0.55; cursor: not-allowed; } /* Scrollbar for the sidebar card (only when content overflows) */ .vt-companies__sb-card { scrollbar-width: thin; scrollbar-color: var(--vt-surface-bright) transparent; } .vt-companies__sb-card::-webkit-scrollbar { width: 8px; } .vt-companies__sb-card::-webkit-scrollbar-track { background: transparent; } .vt-companies__sb-card::-webkit-scrollbar-thumb { background: var(--vt-surface-bright); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; } .vt-companies__sb-card::-webkit-scrollbar-thumb:hover { background: var(--vt-primary); background-clip: padding-box; } /* ---- Mobile filter FAB + drawer ---------------------------------------- */ .vt-companies__filter-fab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--vt-primary); color: var(--vt-on-primary-container); border: none; border-radius: var(--vt-radius-full); font-family: var(--vt-font-body); font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 10px 28px rgba(77, 142, 255, 0.30); position: fixed; /* Always anchor to the physical right; lift above the .vt-bottom-nav so it doesn't overlap the Sign In / Profile mobile nav item. The bottom nav is ~64px tall plus safe-area-inset on iOS. */ right: 18px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); z-index: 80; transition: transform 200ms ease, box-shadow 200ms ease; } .vt-companies__filter-fab:active { transform: scale(0.97); } .vt-companies__filter-fab .material-symbols-outlined { font-size: 20px; } @media (min-width: 1024px) { .vt-companies__filter-fab { display: none; } } /* Drawer shell — inline column on desktop, full-screen overlay on mobile */ .vt-companies__drawer { position: relative; } .vt-companies__drawer-backdrop { display: none; } .vt-companies__drawer-close { display: none; } @media (max-width: 1023.98px) { .vt-companies__drawer { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: flex; } .vt-companies__drawer-backdrop { display: block; position: absolute; inset: 0; background: rgba(6, 14, 32, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 240ms ease; } .vt-companies__drawer .vt-companies__sidebar { position: relative; z-index: 1; width: min(420px, 92vw); height: 100%; background: var(--vt-surface-low); padding: 22px 18px 22px; margin: 0; border-radius: 0; box-shadow: -24px 0 48px rgba(0,0,0,0.45); transform: translateX(-100%); transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; inset-inline-start: 0; } [dir="rtl"] .vt-companies__drawer .vt-companies__sidebar { transform: translateX(100%); box-shadow: 24px 0 48px rgba(0,0,0,0.45); } .vt-companies__drawer.is-open { pointer-events: auto; } .vt-companies__drawer.is-open .vt-companies__drawer-backdrop { opacity: 1; } .vt-companies__drawer.is-open .vt-companies__sidebar { transform: translateX(0); } .vt-companies__drawer-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; background: var(--vt-surface-high); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--vt-radius); color: var(--vt-on-surface); cursor: pointer; z-index: 2; } .vt-companies__drawer-close:hover { color: var(--vt-primary); } body.vt-companies-noscroll { overflow: hidden; } } /* Date joined chips */ .vt-companies__date-list { display: flex; flex-wrap: wrap; gap: 8px; } /* Sidebar action buttons */ /* Action bar lives OUTSIDE the glass card. Buttons stand alone with their own weight so they read as primary actions, not a sub-section of the filter card. */ .vt-companies__sb-actions { flex-shrink: 0; display: flex; gap: 10px; } .vt-companies__sb-actions .vt-btn { flex: 1; padding-top: 14px; padding-bottom: 14px; } .vt-companies__sb-actions .vt-btn--primary { flex: 2; box-shadow: 0 10px 28px rgba(77, 142, 255, 0.22); } /* Main */ .vt-companies__main { min-width: 0; position: relative; } /* Loader: shown by default, hidden once page finishes loading (JS adds .is-ready) */ .vt-companies__content { opacity: 1; transition: opacity 200ms ease; } .vt-companies__main:not(.is-ready) .vt-companies__content { opacity: 0; pointer-events: none; } .vt-companies__main.is-ready .vt-companies__loader { display: none; } .vt-companies__loader { padding: 4px 0; } /* Skeleton grid mirrors .vt-companies__grid exactly */ .vt-companies__loader-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 640px) { .vt-companies__loader-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1180px) { .vt-companies__loader-grid { grid-template-columns: repeat(3, 1fr); } } /* Each skeleton card mirrors .vt-companies__card geometry */ .vt-companies__loader-card { background: rgba(30, 41, 59, 0.70); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--vt-radius-lg); padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; } /* Shimmer base — single source of truth */ .vt-companies__loader-card > * { background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.12), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: vtShimmer 1.4s linear infinite; } .vt-companies__loader-logo { width: 86px; height: 86px; border-radius: 50%; margin-bottom: 12px; } .vt-companies__loader-name { width: 65%; height: 16px; border-radius: 6px; } .vt-companies__loader-industry { width: 45%; height: 12px; border-radius: 6px; margin-top: 2px; } .vt-companies__loader-loc { width: 55%; height: 10px; border-radius: 6px; margin-top: 2px; } .vt-companies__loader-jobs { width: 110px; height: 28px; border-radius: var(--vt-radius-full); margin-top: 12px; } .vt-companies__loader-label { margin: 18px 0 0; font-size: 13px; color: var(--vt-on-surface-variant); text-align: center; letter-spacing: 0.04em; } @keyframes vtShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .vt-companies__loader-card > * { animation: none; } } .vt-companies__results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 24px; } .vt-companies__results-count { font-family: var(--vt-font-display); font-weight: 700; font-size: 22px; color: var(--vt-on-surface); margin: 0; } .vt-companies__results-count .vt-accent { color: var(--vt-primary); } .vt-companies__results-sub { color: var(--vt-outline); font-size: 13px; } /* Cards grid */ .vt-companies__grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 640px) { .vt-companies__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1180px) { .vt-companies__grid { grid-template-columns: repeat(3, 1fr); } } .vt-companies__card { position: relative; background: rgba(30, 41, 59, 0.70); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--vt-radius-lg); padding: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: border-color 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 420ms ease; overflow: hidden; color: inherit; } .vt-companies__card:hover { transform: translateY(-4px); border-color: rgba(173, 198, 255, 0.35); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(173, 198, 255, 0.16); color: inherit; } .vt-companies__card__logo { width: 86px; height: 86px; border-radius: 50%; background: var(--vt-surface-high); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; overflow: hidden; flex-shrink: 0; } .vt-companies__card__logo img, .vt-companies__card__logo > * { width: 100%; height: 100%; object-fit: cover; display: block; } .vt-companies__card__name { font-family: var(--vt-font-display); font-weight: 700; font-size: 18px; color: var(--vt-on-surface); margin: 0; line-height: 1.25; } .vt-companies__card__industry { font-size: 13px; color: var(--vt-on-surface-variant); margin: 0; } .vt-companies__card__loc { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--vt-outline); margin-top: 2px; } .vt-companies__card__loc .material-symbols-outlined { font-size: 14px; } .vt-companies__card__jobs { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--vt-surface-lowest); border: 1px solid rgba(255,255,255,0.05); color: var(--vt-on-surface-variant); border-radius: var(--vt-radius-full); font-size: 12px; font-weight: 600; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; } .vt-companies__card:hover .vt-companies__card__jobs { background: rgba(173,198,255,0.10); border-color: rgba(173,198,255,0.30); color: var(--vt-primary); } .vt-companies__card__jobs .material-symbols-outlined { font-size: 14px; } .vt-companies__card__ribbon { position: absolute; top: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: linear-gradient(135deg, #fff1a8 0%, #f5c518 45%, #b8860b 100%); color: #2a1c00; border: 1px solid rgba(245, 197, 24, 0.55); border-radius: var(--vt-radius-full); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(184, 134, 11, 0.35); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); } .vt-companies__card__ribbon .material-symbols-outlined { font-size: 12px; } /* Empty state */ .vt-companies__empty { text-align: center; padding: 80px 24px; background: rgba(30,41,59,0.4); border: 1px dashed rgba(255,255,255,0.10); border-radius: var(--vt-radius-lg); } .vt-companies__empty__icon { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; background: var(--vt-surface-container); display: flex; align-items: center; justify-content: center; color: var(--vt-primary); } .vt-companies__empty__icon .material-symbols-outlined { font-size: 32px; } .vt-companies__empty h3 { font-family: var(--vt-font-display); font-weight: 600; font-size: 20px; color: var(--vt-on-surface); margin: 0 0 8px; } .vt-companies__empty p { color: var(--vt-on-surface-variant); margin: 0 0 18px; } /* Pagination (Laravel default markup) */ .vt-companies__pagination { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .vt-companies__pagination .pagination { display: inline-flex; gap: 6px; list-style: none; margin: 0; padding: 0; } .vt-companies__pagination .page-item .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; background: var(--vt-surface-container); border: 1px solid rgba(255,255,255,0.06); color: var(--vt-on-surface-variant); border-radius: var(--vt-radius); font-size: 14px; font-weight: 600; text-decoration: none; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .vt-companies__pagination .page-item .page-link:hover { background: var(--vt-surface-high); color: var(--vt-primary); border-color: rgba(173,198,255,0.25); } .vt-companies__pagination .page-item.active .page-link { background: var(--vt-primary); color: var(--vt-on-primary-container); border-color: var(--vt-primary); } .vt-companies__pagination .page-item.disabled .page-link { opacity: 0.4; pointer-events: none; } /* Scroll reveal */ .vt-companies [data-vt-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .vt-companies [data-vt-reveal].is-revealed { opacity: 1; transform: translateY(0); } .vt-companies .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } @media (prefers-reduced-motion: reduce) { .vt-companies *, .vt-companies *::before, .vt-companies *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } .vt-companies [data-vt-reveal] { opacity: 1; transform: none; } } /* ========================================================================== COMPANIES — vt-dd overrides Force the dropdown to fill its full sidebar column and align the panel to it. Keeps chevron pinned to the logical end of the trigger via justify-between plus an extra defensive flex rule (no flex-1 on values when empty). ========================================================================== */ .vt-companies .vt-dd { width: 100%; min-width: 0; flex: none; } .vt-companies .vt-dd__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; } .vt-companies .vt-dd__placeholder { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vt-companies .vt-dd__caret { margin-inline-start: 0; flex-shrink: 0; } /* Panel matches the trigger width exactly inside the sidebar (no overflow on either side) */ .vt-companies .vt-dd__panel { inset-inline-start: 0; inset-inline-end: 0; width: auto; min-width: 0; max-width: none; } /* Inside the panel, option labels truncate cleanly so a long Industry name doesn't blow the panel out beyond the trigger width. */ .vt-companies .vt-dd__option { gap: 8px; } .vt-companies .vt-dd__option-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vt-companies .vt-dd__option-count { flex-shrink: 0; } /* ========================================================================== COMPANY DETAIL — /company/{slug} (scope: .vt-company) ========================================================================== */ .vt-company { --vt-bg: #0b1326; --vt-surface-dim: #0b1326; --vt-surface-bright: #31394d; --vt-surface-lowest: #060e20; --vt-surface-low: #131b2e; --vt-surface-container: #171f33; --vt-surface-high: #222a3d; --vt-surface-highest: #2d3449; --vt-on-surface: #dae2fd; --vt-on-surface-variant: #c2c6d6; --vt-outline: #8c909f; --vt-outline-variant: #424754; --vt-primary: #adc6ff; --vt-primary-container: #4d8eff; --vt-on-primary: #000000; --vt-on-primary-container: #000000; --vt-secondary: #4cd7f6; --vt-tertiary: #c4a3ff; --vt-error: #f87171; --vt-radius: 0.5rem; --vt-radius-md: 0.75rem; --vt-radius-lg: 1rem; --vt-radius-full: 9999px; --vt-container-max: 1280px; --vt-margin-mobile: 16px; --vt-margin-desktop: 32px; --vt-font-display: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif; --vt-font-body: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; background: var(--vt-bg); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; } [dir="rtl"] .vt-company { --vt-font-display: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif; --vt-font-body: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; } .vt-company a { color: inherit; text-decoration: none; } .vt-company a:hover { color: var(--vt-primary); } .vt-company img { max-width: 100%; height: auto; display: block; } .vt-company .container { max-width: var(--vt-container-max); margin-left: auto; margin-right: auto; padding-left: var(--vt-margin-mobile); padding-right: var(--vt-margin-mobile); } @media (min-width: 768px) { .vt-company .container { padding-left: var(--vt-margin-desktop); padding-right: var(--vt-margin-desktop); } } .vt-company .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } /* ---- Hero ---- */ .vt-company__hero { position: relative; padding: 64px 0 48px; overflow: hidden; } .vt-company__hero-mesh { position: absolute; inset: -10%; z-index: 0; background: radial-gradient(circle at 18% 30%, rgba(77, 142, 255, 0.20), transparent 45%), radial-gradient(circle at 78% 55%, rgba(76, 215, 246, 0.16), transparent 50%), radial-gradient(circle at 45% 90%, rgba(173, 198, 255, 0.10), transparent 55%); filter: blur(70px); animation: vtMeshDrift 38s ease-in-out infinite alternate; pointer-events: none; } /* Bounded profile-card cover — cover lives inside a rounded card with logo overlapping its bottom edge */ .vt-company__hero--has-card { padding: 24px 0 32px; } .vt-company__hero--has-card .vt-company__hero-inner { align-items: stretch; text-align: start; gap: 0; } .vt-company__hero-card { background: var(--vt-surface, #fff); border-radius: 20px; /* Wide, soft shadow that diffuses into the stats section below for a seamless blend */ box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.14), 0 8px 24px -8px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.03); overflow: hidden; width: 100%; } .vt-company__hero-card-cover { position: relative; width: 100%; height: clamp(160px, 22vw, 240px); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--vt-surface-variant, #eef2f7); } /* Soft fade at the bottom of the cover so the image melts into the card body — no hard edge */ .vt-company__hero-card-cover::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--vt-surface, #fff) 100%); pointer-events: none; } .vt-company__hero-card-body { padding: 0 28px 28px; display: flex; flex-direction: column; gap: 0; } .vt-company__hero--has-card .vt-company__hero-logo { margin: -66px 0 16px; background: var(--vt-surface, #fff); /* Subtle neutral slate ring — visible on both the white card body and the cover image without competing with brand colors. */ border: 1px solid rgba(173, 198, 255, 0.20); outline: none; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18); z-index: 1; } .vt-company__hero--has-card .vt-company__hero-body { flex: initial; } @media (max-width: 767.98px) { .vt-company__hero-card-body { padding: 0 20px 24px; } .vt-company__hero--has-card .vt-company__hero-logo { margin-top: -50px; } } /* ── Logo row + animated stats panel (cover variant only) ────── */ .vt-company__hero-logo-row { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .vt-company__hero-logo-row .vt-company__hero-logo { /* Row carries the layout — keep negative top on logo so it overlaps cover */ margin-bottom: 0; } .vt-company__hero-stats { display: flex; flex: 1 1 auto; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; min-width: 0; } .vt-company__hero-stat { flex: 1 1 110px; min-width: 110px; padding: 14px 18px; background: linear-gradient(180deg, rgba(47, 129, 247, 0.06), rgba(47, 129, 247, 0.02)); border: 1px solid rgba(47, 129, 247, 0.16); border-radius: 14px; display: flex; flex-direction: column; gap: 4px; transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms ease, border-color 280ms ease; } .vt-company__hero-stat:hover { transform: translateY(-2px); border-color: rgba(47, 129, 247, 0.35); box-shadow: 0 8px 22px -10px rgba(47, 129, 247, 0.40); } .vt-company__hero-stat--link { cursor: pointer; text-decoration: none; color: inherit; } .vt-company__hero-stat--link:hover, .vt-company__hero-stat--link:focus-visible { text-decoration: none; color: inherit; outline: none; } .vt-company__hero-stat--link:focus-visible { border-color: rgba(47, 129, 247, 0.55); box-shadow: 0 0 0 3px rgba(47, 129, 247, 0.20); } .vt-company__hero-stat-arrow { font-size: 14px; color: var(--vt-primary); opacity: 0.6; margin-inline-start: auto; transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease; } [dir="rtl"] .vt-company__hero-stat-arrow { /* Mirror the right-facing arrow_forward glyph so it points left, matching the RTL reading direction. */ transform: scaleX(-1); } .vt-company__hero-stat--link:hover .vt-company__hero-stat-arrow { opacity: 1; transform: translateX(2px); } [dir="rtl"] .vt-company__hero-stat--link:hover .vt-company__hero-stat-arrow { opacity: 1; /* Keep the mirror applied AND slide forward (which is toward the left in RTL). The scaleX(-1) flips translateX(2px) into -2px visually, so the arrow slides toward the destination. */ transform: scaleX(-1) translateX(2px); } .vt-company__hero-stat-num { font-family: var(--vt-font-display, var(--vt-font-sans, system-ui)); font-size: 28px; line-height: 1; font-weight: 700; color: var(--vt-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .vt-company__hero-stat-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vt-on-surface-variant, #64748b); } .vt-company__hero-stat-label .material-symbols-outlined { font-size: 14px; color: var(--vt-primary); opacity: 0.85; } @media (max-width: 767.98px) { .vt-company__hero-logo-row { flex-direction: column; align-items: stretch; gap: 16px; } .vt-company__hero-stats { padding-bottom: 0; } .vt-company__hero-stat-num { font-size: 24px; } } .vt-company__hero-inner { position: relative; z-index: 1; max-width: var(--vt-container-max); margin: 0 auto; padding: 0 var(--vt-margin-mobile); display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; } @media (min-width: 768px) { .vt-company__hero-inner { padding: 0 var(--vt-margin-desktop); flex-direction: row; align-items: flex-start; text-align: start; } } .vt-company__hero-logo { position: relative; width: 132px; height: 132px; flex-shrink: 0; border-radius: var(--vt-radius-lg); background: rgba(30, 41, 59, 0.7); border: 1px solid rgba(173, 198, 255, 0.20); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; padding: 14px; overflow: hidden; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); } .vt-company__hero-logo img, .vt-company__hero-logo > * { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--vt-radius-lg) - 4px); display: block; } /* Verified badge — social-media style. Small, tucked onto the bottom-end corner of the logo (Instagram/Twitter pattern), with a thin white halo so the scalloped shape pops off the avatar like a stamp. */ .vt-company__hero-logo-badge { position: absolute; bottom: 4px; inset-inline-end: 4px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--vt-primary-container); filter: drop-shadow( 0 1px 0 #fff) drop-shadow( 0 -1px 0 #fff) drop-shadow( 1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow( 0 2px 4px rgba(77, 142, 255, 0.35)); pointer-events: none; } .vt-company__hero-logo-badge svg { width: 100%; height: 100%; display: block; } .vt-company__hero-body { flex: 1; min-width: 0; } .vt-company__hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: rgba(173, 198, 255, 0.10); border: 1px solid rgba(173, 198, 255, 0.20); color: var(--vt-primary); border-radius: var(--vt-radius-full); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 12px; margin-bottom: 14px; } .vt-company__hero-eyebrow .material-symbols-outlined { font-size: 14px; } .vt-company__hero-title { font-family: var(--vt-font-display); font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; letter-spacing: -0.02em; color: var(--vt-on-surface); margin: 0 0 14px; } .vt-company__hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 22px; color: var(--vt-on-surface-variant); } .vt-company__hero-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; } .vt-company__hero-meta-item .material-symbols-outlined { font-size: 16px; color: var(--vt-primary); } .vt-company__hero-actions { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 767.98px) { .vt-company__hero-actions { justify-content: center; } .vt-company__hero-meta { justify-content: center; } } /* Danger ghost button variant — for Report Abuse */ .vt-company .vt-btn--danger:hover { color: var(--vt-error); border-color: rgba(248,113,113, 0.35); } /* ---- Layout: main + sidebar ---- */ .vt-company__layout { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 32px 0 80px; align-items: start; } @media (min-width: 1024px) { .vt-company__layout { grid-template-columns: 1fr 340px; gap: 32px; } } .vt-company__main { min-width: 0; display: flex; flex-direction: column; gap: 24px; } /* ---- Sidebar ---- */ /* Sidebar: independent stacked cards, no scroll container, no sticky. Lets the page scroll naturally so each panel feels like a standalone card. */ .vt-company__sidebar { display: flex; flex-direction: column; gap: 18px; } /* ---- Reusable panel (glass card) ---- */ .vt-company__panel { background: rgba(30, 41, 59, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--vt-radius-lg); padding: 24px; } .vt-company__panel-title { display: flex; align-items: center; gap: 8px; font-family: var(--vt-font-display); font-weight: 600; font-size: 14px; color: var(--vt-on-surface); margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.08em; } .vt-company__panel-title .material-symbols-outlined { color: var(--vt-primary); font-size: 18px; } .vt-company__panel-title--lg { font-size: 18px; letter-spacing: -0.01em; text-transform: none; } .vt-company__panel-title--lg .material-symbols-outlined { font-size: 22px; } .vt-company__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .vt-company__panel-head .vt-company__panel-title { margin: 0; } .vt-company__panel-sub { color: var(--vt-outline); font-size: 13px; } /* ---- Summary list (in sidebar) ---- */ .vt-company__summary-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .vt-company__summary-row { display: flex; align-items: center; gap: 12px; } .vt-company__summary-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--vt-radius); background: rgba(173, 198, 255, 0.12); color: var(--vt-primary); display: inline-flex; align-items: center; justify-content: center; } .vt-company__summary-icon .material-symbols-outlined { font-size: 18px; } .vt-company__summary-body { display: flex; flex-direction: column; min-width: 0; } .vt-company__summary-label { font-size: 11px; color: var(--vt-outline); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .vt-company__summary-value { font-size: 14px; color: var(--vt-on-surface); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Contact list ---- */ .vt-company__contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .vt-company__contact-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--vt-on-surface-variant); min-width: 0; } .vt-company__contact-list li .material-symbols-outlined { font-size: 18px; color: var(--vt-primary); flex-shrink: 0; } .vt-company__contact-list a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vt-on-surface); font-weight: 500; } .vt-company__contact-list a:hover { color: var(--vt-primary); } /* ---- Socials ---- */ .vt-company__socials { display: flex; gap: 10px; flex-wrap: wrap; } .vt-company__social { width: 38px; height: 38px; border-radius: 50%; background: var(--vt-surface-high); color: var(--vt-on-surface); display: inline-flex; align-items: center; justify-content: center; transition: background 180ms ease, color 180ms ease, transform 200ms ease; } .vt-company a.vt-company__social:hover { background: var(--vt-primary); color: var(--vt-on-primary-container); transform: translateY(-2px); } /* ---- About body (HTML description) ---- */ .vt-company__about-body { color: var(--vt-on-surface-variant); font-size: 15px; line-height: 1.7; } .vt-company__about-body p { margin: 0 0 12px; } .vt-company__about-body p:last-child { margin-bottom: 0; } .vt-company__about-body a { color: var(--vt-primary); text-decoration: underline; } .vt-company__about-body h1, .vt-company__about-body h2, .vt-company__about-body h3, .vt-company__about-body h4 { font-family: var(--vt-font-display); color: var(--vt-on-surface); margin: 18px 0 10px; } .vt-company__about-body ul, .vt-company__about-body ol { padding-inline-start: 22px; margin: 0 0 12px; } .vt-company__about-body li { margin-bottom: 6px; } /* ---- Map (Leaflet + OpenStreetMap, no Google tracking) ---- */ .vt-company__map-wrap { position: relative; border-radius: var(--vt-radius); overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: var(--vt-surface-lowest); aspect-ratio: 16 / 9; margin-bottom: 12px; } .vt-company__map-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: hue-rotate(180deg) invert(0.92) saturate(0.85); } /* Below-map link to open address in maps */ .vt-company__map-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: rgba(34,42,61,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--vt-radius); color: var(--vt-on-surface); text-decoration: none; transition: border-color 200ms ease, background 200ms ease; } .vt-company a.vt-company__map-link, .vt-company a.vt-company__map-link:hover { color: var(--vt-on-surface); } .vt-company__map-link:hover { border-color: rgba(76,215,246,0.40); background: rgba(76,215,246,0.06); } .vt-company__map-link-text { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vt-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .vt-company__map-link-text .material-symbols-outlined { font-size: 16px; color: var(--vt-secondary); flex: 0 0 auto; } .vt-company__map-link-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--vt-secondary); white-space: nowrap; transition: gap 200ms ease; } .vt-company__map-link:hover .vt-company__map-link-cta { gap: 8px; } .vt-company__map-link-cta .material-symbols-outlined { font-size: 15px; } [dir="rtl"] .vt-company__map-link-cta .material-symbols-outlined { transform: scaleX(-1); } /* ---- Current Openings (job cards) ---- */ .vt-company__jobs-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .vt-company__jobs-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1300px) { .vt-company__jobs-grid { grid-template-columns: repeat(3, 1fr); } } .vt-company__job-card { position: relative; background: rgba(30, 41, 59, 0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--vt-radius-md); padding: 18px; display: flex; flex-direction: column; gap: 10px; color: inherit; transition: border-color 280ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease; } .vt-company__job-card:hover { border-color: rgba(173,198,255,0.35); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,0.22), 0 0 0 1px rgba(173, 198, 255, 0.15); color: inherit; } .vt-company__job-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vt-company__job-card-head .vt-pill { display: inline-flex; align-items: center; gap: 4px; } .vt-company__job-card-head .vt-pill .material-symbols-outlined { font-size: 14px; } .vt-company__job-ribbon { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; background: linear-gradient(135deg, var(--vt-primary), var(--vt-secondary)); color: var(--vt-on-primary-container); border-radius: var(--vt-radius-full); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .vt-company__job-ribbon .material-symbols-outlined { font-size: 11px; } .vt-company__job-title { font-family: var(--vt-font-display); font-weight: 600; font-size: 17px; color: var(--vt-on-surface); margin: 0; line-height: 1.3; } .vt-company__job-card:hover .vt-company__job-title { color: var(--vt-primary); } .vt-company__job-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--vt-outline); font-size: 12px; } .vt-company__job-meta span { display: inline-flex; align-items: center; gap: 4px; } .vt-company__job-meta .material-symbols-outlined { font-size: 14px; } .vt-company__job-salary { margin-top: 2px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--vt-surface-lowest); border: 1px solid rgba(173, 198, 255, 0.10); border-radius: var(--vt-radius); color: var(--vt-on-surface); font-size: 13px; align-self: flex-start; } .vt-company__job-salary .material-symbols-outlined { color: var(--vt-primary); font-size: 16px; } .vt-company__job-salary strong { white-space: nowrap; } .vt-company__job-salary-per { color: var(--vt-outline); font-weight: 400; } /* ---- Empty state for jobs ---- */ .vt-company__empty { text-align: center; padding: 60px 24px; background: rgba(30,41,59,0.4); border: 1px dashed rgba(255,255,255,0.10); border-radius: var(--vt-radius-lg); } .vt-company__empty-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--vt-surface-container); display: flex; align-items: center; justify-content: center; color: var(--vt-primary); } .vt-company__empty-icon .material-symbols-outlined { font-size: 28px; } .vt-company__empty h3 { font-family: var(--vt-font-display); font-weight: 600; font-size: 18px; color: var(--vt-on-surface); margin: 0 0 8px; } .vt-company__empty p { color: var(--vt-on-surface-variant); margin: 0 0 18px; } /* ---- Send Message modal — restyle Bootstrap modal in dark theme ---- */ .vt-company__msg-modal .modal-dialog { max-width: 560px; } .vt-company__msg-modal .modal-content { background: var(--vt-surface-container); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--vt-radius-lg); color: var(--vt-on-surface); } .vt-company__msg-modal .modal-header { border-bottom: 1px solid rgba(255,255,255,0.06); padding: 18px 22px; } .vt-company__msg-modal .modal-title { font-family: var(--vt-font-display); font-weight: 600; font-size: 16px; color: var(--vt-on-surface); } .vt-company__msg-modal .btn-close { filter: invert(1) brightness(1.4); opacity: 0.7; } .vt-company__msg-modal .modal-body { padding: 22px; } .vt-company__msg-label { display: block; font-size: 13px; font-weight: 600; color: var(--vt-on-surface-variant); margin: 0 0 8px; } .vt-company__msg-textarea { width: 100%; background: var(--vt-surface-low) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: var(--vt-radius) !important; color: var(--vt-on-surface) !important; font-family: var(--vt-font-body); font-size: 14px; padding: 12px 14px; min-height: 140px; outline: none; } .vt-company__msg-textarea:focus { border-color: var(--vt-primary) !important; box-shadow: 0 0 0 3px rgba(173, 198, 255, 0.14) !important; } .vt-company__msg-modal .modal-footer { border-top: 1px solid rgba(255,255,255,0.06); padding: 16px 22px; display: flex; gap: 10px; justify-content: flex-end; } /* ---- Scroll reveal ---- */ /* Company detail page has scroll animations disabled by request. */ @media (prefers-reduced-motion: reduce) { .vt-company *, .vt-company *::before, .vt-company *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } } /* ========================================================================== COMPANY DETAIL — add-ons (breadcrumb, stat row, leadership, followers, share button feedback, similar companies) ========================================================================== */ /* Breadcrumb */ .vt-company__breadcrumb { padding: 20px 0 28px; } .vt-company__crumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--vt-outline); } .vt-company__crumbs li + li::before { content: '›'; display: inline-block; margin-inline-end: 8px; color: var(--vt-outline-variant); } [dir="rtl"] .vt-company__crumbs li + li::before { content: '‹'; } .vt-company__crumbs a { color: var(--vt-on-surface-variant); } .vt-company__crumbs a:hover { color: var(--vt-primary); } .vt-company__crumbs li[aria-current] { color: var(--vt-on-surface); font-weight: 600; } /* Quick stat highlights row (under hero) */ .vt-company__stats { padding: 32px 0 8px; } @media (min-width: 768px) { .vt-company__stats { padding: 40px 0 8px; } } /* Anchor offset so #openings lands just below the sticky nav, not under it */ .vt-company [id="openings"] { scroll-margin-top: 96px; } .vt-company { scroll-behavior: smooth; } /* Clickable stat card variant (Open Jobs jumps to the openings section) */ a.vt-company__stat-card { color: inherit; text-decoration: none; } a.vt-company__stat-card:hover { color: inherit; border-color: rgba(173, 198, 255, 0.4); } a.vt-company__stat-card:hover .vt-company__stat-icon { background: rgba(173, 198, 255, 0.22); } .vt-company__stats-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 540px) { .vt-company__stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .vt-company__stats-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1200px) { .vt-company__stats-grid { grid-template-columns: repeat(5, 1fr); } } .vt-company__stat-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: rgba(30, 41, 59, 0.55); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--vt-radius-lg); transition: border-color 220ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1); } .vt-company__stat-card:hover { border-color: rgba(173, 198, 255, 0.25); transform: translateY(-2px); } .vt-company__stat-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--vt-radius); background: rgba(173, 198, 255, 0.12); color: var(--vt-primary); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; } .vt-company__stat-icon .material-symbols-outlined { font-size: 22px; } .vt-company__stat-body { display: flex; flex-direction: column; min-width: 0; } .vt-company__stat-value { font-family: var(--vt-font-display); font-weight: 700; font-size: 22px; color: var(--vt-on-surface); line-height: 1.1; font-variant-numeric: tabular-nums; } .vt-company__stat-label { font-size: 12px; color: var(--vt-outline); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; white-space: nowrap; } /* Followers headline card (sidebar) */ .vt-company__followers-card { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(77, 142, 255, 0.18), rgba(76, 215, 246, 0.10)); border-color: rgba(173, 198, 255, 0.25); } .vt-company__followers-icon { width: 48px; height: 48px; flex-shrink: 0; background: linear-gradient(135deg, var(--vt-primary), var(--vt-secondary)); color: var(--vt-on-primary-container); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .vt-company__followers-icon .material-symbols-outlined { font-size: 24px; font-variation-settings: 'FILL' 1; } .vt-company__followers-body { min-width: 0; } .vt-company__followers-count { font-family: var(--vt-font-display); font-weight: 700; font-size: 24px; color: var(--vt-on-surface); margin: 0; line-height: 1.1; font-variant-numeric: tabular-nums; } .vt-company__followers-label { font-size: 13px; color: var(--vt-on-surface-variant); margin: 4px 0 0; } /* Leadership card */ .vt-company__leader { display: flex; align-items: center; gap: 14px; } .vt-company__leader-avatar { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--vt-surface-high); color: var(--vt-primary); display: inline-flex; align-items: center; justify-content: center; font-family: var(--vt-font-display); font-weight: 700; font-size: 20px; } .vt-company__leader-body { min-width: 0; } .vt-company__leader-name { font-family: var(--vt-font-display); font-weight: 600; font-size: 15px; color: var(--vt-on-surface); margin: 0; line-height: 1.2; } .vt-company__leader-role { font-size: 12px; color: var(--vt-outline); text-transform: uppercase; letter-spacing: 0.06em; margin: 4px 0 0; } /* Similar Companies */ .vt-company__similar { padding: 16px 0 80px; } .vt-company__similar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .vt-company__similar-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--vt-font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 24px); color: var(--vt-on-surface); margin: 0; } .vt-company__similar-title .material-symbols-outlined { color: var(--vt-primary); font-size: 22px; } .vt-company__similar-link { display: inline-flex; align-items: center; gap: 4px; color: var(--vt-primary); font-size: 14px; font-weight: 600; } .vt-company__similar-link:hover { text-decoration: underline; } .vt-company__similar-link .material-symbols-outlined { font-size: 18px; } [dir="rtl"] .vt-company__similar-link .material-symbols-outlined { transform: scaleX(-1); } .vt-company__similar-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 600px) { .vt-company__similar-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .vt-company__similar-grid { grid-template-columns: repeat(4, 1fr); } } .vt-company__similar-card { position: relative; background: rgba(30, 41, 59, 0.55); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--vt-radius-lg); padding: 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: inherit; transition: border-color 280ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1); } .vt-company__similar-card:hover { border-color: rgba(173, 198, 255, 0.35); transform: translateY(-3px); color: inherit; } .vt-company__similar-ribbon { position: absolute; top: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; background: linear-gradient(135deg, var(--vt-primary), var(--vt-secondary)); color: var(--vt-on-primary-container); border-radius: var(--vt-radius-full); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .vt-company__similar-ribbon .material-symbols-outlined { font-size: 11px; } .vt-company__similar-logo { width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; background: var(--vt-surface-high); display: flex; align-items: center; justify-content: center; overflow: hidden; } .vt-company__similar-logo img, .vt-company__similar-logo > * { width: 100%; height: 100%; object-fit: cover; display: block; } .vt-company__similar-name { font-family: var(--vt-font-display); font-weight: 600; font-size: 15px; color: var(--vt-on-surface); margin: 0; line-height: 1.25; } .vt-company__similar-industry { font-size: 12px; color: var(--vt-on-surface-variant); margin: 0; } .vt-company__similar-loc { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--vt-outline); margin-top: 2px; } .vt-company__similar-loc .material-symbols-outlined { font-size: 13px; } .vt-company__similar-jobs { margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--vt-surface-lowest); border: 1px solid rgba(255,255,255,0.05); color: var(--vt-on-surface-variant); border-radius: var(--vt-radius-full); font-size: 11px; font-weight: 600; } .vt-company__similar-jobs .material-symbols-outlined { font-size: 12px; } .vt-company__similar-card:hover .vt-company__similar-jobs { background: rgba(173,198,255,0.10); color: var(--vt-primary); border-color: rgba(173,198,255,0.30); } /* ========================================================================== JOB SEARCH — /search-jobs (scope: .vt-search) Sidebar with 14 vt-dd filters + Salary + mobile drawer + dark Job Alert modal. ========================================================================== */ .vt-search { --vt-bg: #0b1326; --vt-surface-dim: #0b1326; --vt-surface-bright: #31394d; --vt-surface-lowest: #060e20; --vt-surface-low: #131b2e; --vt-surface-container: #171f33; --vt-surface-high: #222a3d; --vt-surface-highest: #2d3449; --vt-on-surface: #dae2fd; --vt-on-surface-variant: #c2c6d6; --vt-outline: #8c909f; --vt-outline-variant: #424754; --vt-primary: #adc6ff; --vt-primary-container: #4d8eff; --vt-on-primary: #000000; --vt-on-primary-container: #000000; --vt-secondary: #4cd7f6; --vt-tertiary: #c4a3ff; --vt-radius: 0.5rem; --vt-radius-md: 0.75rem; --vt-radius-lg: 1rem; --vt-radius-full: 9999px; --vt-container-max: 1280px; --vt-margin-mobile: 16px; --vt-margin-desktop: 32px; --vt-font-display: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif; --vt-font-body: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; background: var(--vt-bg); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; display: block; width: 100%; min-height: 100vh; overflow-x: hidden; } [dir="rtl"] .vt-search { --vt-font-display: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif; --vt-font-body: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; } .vt-search a { color: inherit; text-decoration: none; } .vt-search a:hover { color: var(--vt-primary); } .vt-search img { max-width: 100%; height: auto; display: block; } .vt-search .container { max-width: var(--vt-container-max); margin-left: auto; margin-right: auto; padding-left: var(--vt-margin-mobile); padding-right: var(--vt-margin-mobile); } @media (min-width: 768px) { .vt-search .container { padding-left: var(--vt-margin-desktop); padding-right: var(--vt-margin-desktop); } } .vt-search .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } /* ---- Hero ---- */ .vt-search__hero { position: relative; padding: 72px 0 56px; overflow: hidden; } .vt-search__hero-mesh { position: absolute; inset: -10%; z-index: 0; background: radial-gradient(circle at 22% 30%, rgba(77, 142, 255, 0.18), transparent 45%), radial-gradient(circle at 78% 60%, rgba(76, 215, 246, 0.14), transparent 50%); filter: blur(70px); animation: vtMeshDrift 38s ease-in-out infinite alternate; pointer-events: none; } .vt-search__hero-inner { position: relative; z-index: 1; text-align: center; } .vt-search__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(173, 198, 255, 0.10); border: 1px solid rgba(173, 198, 255, 0.20); color: var(--vt-primary); border-radius: var(--vt-radius-full); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; } .vt-search__eyebrow .material-symbols-outlined { font-size: 16px; } .vt-search__title { font-family: var(--vt-font-display); font-weight: 700; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -0.02em; color: var(--vt-on-surface); margin: 0 0 12px; } .vt-search__title .vt-accent { background: linear-gradient(135deg, var(--vt-primary), var(--vt-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .vt-search__sub { color: var(--vt-on-surface-variant); font-size: 15px; max-width: 56ch; margin: 0 auto 28px; } .vt-search__bar { display: flex; align-items: center; gap: 10px; max-width: 720px; margin: 0 auto; padding: 8px 8px 8px 16px; background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--vt-radius-full); transition: border-color 200ms ease, box-shadow 200ms ease; } .vt-search__bar:focus-within { border-color: var(--vt-primary); box-shadow: 0 0 0 3px rgba(173, 198, 255, 0.16); } .vt-search__bar-icon { color: var(--vt-outline); font-size: 22px; flex-shrink: 0; } .vt-search__bar-input { flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none; color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 15px; padding: 8px 0; } .vt-search__bar-input::placeholder { color: var(--vt-outline); } .vt-search__bar-submit { flex-shrink: 0; padding: 12px 22px; background: var(--vt-primary); color: var(--vt-on-primary-container); border: none; border-radius: var(--vt-radius-full); font-family: var(--vt-font-body); font-weight: 700; font-size: 14px; cursor: pointer; transition: opacity 180ms ease, transform 180ms ease; } .vt-search__bar-submit:hover { opacity: 0.92; } .vt-search__bar-submit:active { transform: scale(0.97); } /* ---- Layout: sidebar + main ---- */ .vt-search__form { display: block; } .vt-search__layout { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 24px 0 80px; align-items: start; } @media (min-width: 1024px) { .vt-search__layout { grid-template-columns: 320px 1fr; gap: 32px; } } /* ---- Mobile filter FAB ---- */ .vt-search__filter-fab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--vt-primary); color: var(--vt-on-primary-container); border: none; border-radius: var(--vt-radius-full); font-family: var(--vt-font-body); font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 10px 28px rgba(77, 142, 255, 0.30); position: fixed; right: 18px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); z-index: 80; transition: transform 200ms ease; } .vt-search__filter-fab:active { transform: scale(0.97); } .vt-search__filter-fab .material-symbols-outlined { font-size: 20px; } @media (min-width: 1024px) { .vt-search__filter-fab { display: none; } } /* ---- Sidebar drawer shell ---- */ /* Desktop: drawer is the first grid cell; sidebar lives inside it. Mobile: drawer becomes a full-screen overlay containing backdrop + sliding sidebar. */ .vt-search__drawer { position: relative; min-width: 0; } .vt-search__drawer-backdrop { display: none; } .vt-search__drawer-close { display: none; } @media (max-width: 1023.98px) { .vt-search__drawer { display: flex; position: fixed; inset: 0; z-index: 90; pointer-events: none; } .vt-search__drawer-backdrop { display: block; position: absolute; inset: 0; background: rgba(6, 14, 32, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 240ms ease; } .vt-search__drawer .vt-search__sidebar { position: relative; z-index: 1; width: min(420px, 92vw); height: 100%; background: var(--vt-surface-low); padding: 60px 18px 22px; margin: 0; border-radius: 0; box-shadow: -24px 0 48px rgba(0,0,0,0.45); transform: translateX(-100%); transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } [dir="rtl"] .vt-search__drawer .vt-search__sidebar { transform: translateX(100%); box-shadow: 24px 0 48px rgba(0,0,0,0.45); } .vt-search__drawer.is-open { pointer-events: auto; } .vt-search__drawer.is-open .vt-search__drawer-backdrop { opacity: 1; } .vt-search__drawer.is-open .vt-search__sidebar { transform: translateX(0); } .vt-search__drawer-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; background: var(--vt-surface-high); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--vt-radius); color: var(--vt-on-surface); cursor: pointer; z-index: 2; } body.vt-search-noscroll { overflow: hidden; } } /* ---- Sidebar (inline on desktop) ---- */ .vt-search__sidebar { display: flex; flex-direction: column; gap: 14px; } .vt-search__sb-card { background: rgba(30, 41, 59, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--vt-radius-lg); padding: 22px; } .vt-search__sb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .vt-search__sb-head h3 { font-family: var(--vt-font-display); font-weight: 600; font-size: 18px; color: var(--vt-on-surface); margin: 0; } .vt-search__sb-head .material-symbols-outlined { color: var(--vt-primary); } .vt-search__sb-section { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .vt-search__sb-section:last-of-type { border-bottom: none; } .vt-search__sb-label { display: flex; align-items: center; gap: 8px; font-family: var(--vt-font-display); font-weight: 600; font-size: 12px; color: var(--vt-on-surface); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.06em; } .vt-search__sb-label .material-symbols-outlined { font-size: 16px; color: var(--vt-primary); } /* Inputs (salary) */ .vt-search__input { width: 100%; padding: 10px 14px; background: var(--vt-surface-container); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--vt-radius); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 14px; outline: none; transition: border-color 180ms ease, box-shadow 180ms ease; } .vt-search__input::placeholder { color: var(--vt-outline); } .vt-search__input:focus { border-color: var(--vt-primary); box-shadow: 0 0 0 3px rgba(173, 198, 255, 0.14); } .vt-search__salary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Sidebar action bar */ .vt-search__sb-actions { display: flex; gap: 10px; flex-shrink: 0; align-items: stretch; } .vt-search__sb-actions .vt-btn { flex: 1; padding-top: 14px; padding-bottom: 14px; min-height: 48px; line-height: 1; } .vt-search__sb-actions .vt-btn .material-symbols-outlined { line-height: 1; display: inline-flex; align-items: center; } .vt-search__sb-actions .vt-btn--primary { flex: 2; box-shadow: 0 10px 28px rgba(77, 142, 255, 0.22); } /* vt-dd scoped overrides (chevron at end + panel fits trigger width) */ .vt-search .vt-dd { width: 100%; min-width: 0; flex: none; } .vt-search .vt-dd__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vt-search .vt-dd__placeholder { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vt-search .vt-dd__caret { margin-inline-start: 0; flex-shrink: 0; } .vt-search .vt-dd__panel { inset-inline-start: 0; inset-inline-end: 0; width: auto; min-width: 0; max-width: none; } .vt-search .vt-dd__option { gap: 8px; } .vt-search .vt-dd__option-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vt-search .vt-dd__option-count { flex-shrink: 0; } /* ---- Main ---- */ .vt-search__main { min-width: 0; } .vt-search__results-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 24px; } .vt-search__results-count { font-family: var(--vt-font-display); font-weight: 700; font-size: 22px; color: var(--vt-on-surface); margin: 0; } .vt-search__results-count .vt-accent { background: linear-gradient(135deg, var(--vt-primary), var(--vt-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .vt-search__results-sub { color: var(--vt-on-surface, #e6e8f2); font-size: 13px; font-weight: 500; margin: 4px 0 0; } .vt-search__results-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* Country-name accent inside the results title — keeps the title legible while the country name carries the same gradient as the count for visual link. */ .vt-search__results-country { background: linear-gradient(135deg, var(--vt-primary), var(--vt-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 700; } /* Sub-line shown only on zero-result country lock-out. The CTA chip sits inline on wide viewports and wraps on narrow ones — flex + wrap handles both. */ .vt-search__results-sub--zero { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--vt-on-surface-variant, #b8c0d6); margin-top: 8px; } .vt-search__results-sub-cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: linear-gradient(135deg, var(--vt-primary), var(--vt-secondary)); color: #fff !important; font-weight: 600; font-size: 12.5px; border-radius: 999px; text-decoration: none; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28); transition: transform 120ms ease, box-shadow 120ms ease; } .vt-search__results-sub-cta:hover, .vt-search__results-sub-cta:focus { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(99, 102, 241, 0.42); color: #fff !important; text-decoration: none; } .vt-search__results-sub-cta .material-symbols-outlined { font-size: 16px; } /* Sidebar "Show jobs from all countries" link sits under the country dropdown as a small, neutral, secondary action — visually subordinate to the dropdown chips so it doesn't compete with normal filter usage. */ .vt-search__sb-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 0; color: var(--vt-primary, #6366f1); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: color 120ms ease; } .vt-search__sb-link:hover, .vt-search__sb-link:focus { color: var(--vt-secondary, #ec4899); text-decoration: underline; } .vt-search__sb-link .material-symbols-outlined { font-size: 15px; } /* Similar-jobs mode banner — sits above the results title to signal "you're in a curated similar-jobs view, click X to leave." Pill shape, subtle gradient, trailing close button. */ .vt-search__similar-banner { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 14px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(236, 72, 153, 0.16)); border: 1px solid rgba(99, 102, 241, 0.32); border-radius: 999px; color: var(--vt-on-surface, #e6e8f2); font-size: 13px; max-width: 100%; } .vt-search__similar-banner .material-symbols-outlined { font-size: 18px; color: var(--vt-primary, #6366f1); flex-shrink: 0; } .vt-search__similar-banner-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vt-search__similar-banner-text strong { font-weight: 700; color: var(--vt-on-surface, #fff); } .vt-search__similar-banner-loose { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--vt-on-surface-variant, #b8c0d6); margin-inline-start: 4px; } .vt-search__similar-banner-clear { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--vt-on-surface, #e6e8f2) !important; text-decoration: none; flex-shrink: 0; transition: background 120ms ease; } .vt-search__similar-banner-clear:hover, .vt-search__similar-banner-clear:focus { background: rgba(255, 255, 255, 0.18); text-decoration: none; } .vt-search__similar-banner-clear .material-symbols-outlined { font-size: 14px; color: inherit; } /* ---- Jobs grid ---- */ .vt-search__grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .vt-search__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1280px) { .vt-search__grid { grid-template-columns: repeat(3, 1fr); } } .vt-search__job-card { position: relative; background: rgba(30, 41, 59, 0.55); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--vt-radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 10px; color: inherit; transition: border-color 280ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease; overflow: hidden; } .vt-search__job-card:hover { border-color: rgba(173, 198, 255, 0.35); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,0.28), 0 0 0 1px rgba(173, 198, 255, 0.16); color: inherit; } .vt-search__job-card.is-featured { border-color: rgba(173, 198, 255, 0.25); background: linear-gradient(160deg, rgba(77,142,255,0.10), rgba(30,41,59,0.55) 40%); } .vt-search__job-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; } .vt-search__job-card-top .vt-pill { flex: 0 1 auto; min-width: 0; font-size: 11px; padding: 4px 10px; } .vt-search__job-card-top .vt-search__job-ribbon { flex: 0 0 auto; } .vt-search__job-card-logo { flex: 0 0 28px; width: 28px; height: 28px; background: var(--vt-surface-high); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); } .vt-search__job-card-logo img, .vt-search__job-card-logo > * { width: 100%; height: 100%; object-fit: cover; display: block; } .vt-search__job-ribbon { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; background: #4d8eff; color: #ffffff; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 3px 10px rgba(77,142,255,0.30); text-shadow: 0 1px 0 rgba(0,0,0,0.15); } .vt-search__job-ribbon .material-symbols-outlined { font-size: 12px; } .vt-search__job-ribbon--boost { background: linear-gradient(135deg, #4cd7f6, #03b5d3); box-shadow: 0 3px 10px rgba(3,181,211,0.35); color: #000000; text-shadow: none; } /* Applied — green pill with inline date sub-label */ .vt-search__job-ribbon--applied { background: linear-gradient(135deg, #00CC99, #009E78); box-shadow: 0 3px 10px rgba(0, 204, 153, 0.30); color: #ffffff; text-shadow: none; } .vt-search__job-ribbon-date { margin-inline-start: 4px; padding-inline-start: 6px; border-inline-start: 1px solid rgba(255,255,255,0.45); font-weight: 600; letter-spacing: 0.04em; text-transform: none; } .vt-search__job-card.is-boosted { border-color: rgba(76,215,246,0.30); } .vt-search__job-title { font-family: var(--vt-font-display); font-weight: 600; font-size: 17px; color: var(--vt-on-surface); margin: 0; line-height: 1.3; } .vt-search__job-card:hover .vt-search__job-title { color: var(--vt-primary); } .vt-search__job-company { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vt-on-surface-variant); min-width: 0; } .vt-search__job-company-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .vt-search__job-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--vt-outline); font-size: 12px; } .vt-search__job-meta span { display: inline-flex; align-items: center; gap: 4px; } .vt-search__job-meta .material-symbols-outlined { font-size: 14px; } .vt-search__job-salary { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--vt-surface-lowest); border: 1px solid rgba(173, 198, 255, 0.10); border-radius: var(--vt-radius); color: var(--vt-on-surface); font-size: 13px; align-self: flex-start; } .vt-search__job-salary .material-symbols-outlined { color: var(--vt-primary); font-size: 16px; } .vt-search__job-salary strong { white-space: nowrap; } .vt-search__job-salary-per { color: var(--vt-outline); font-weight: 400; } .vt-search__ad-slot { grid-column: 1 / -1; padding: 16px; background: rgba(30, 41, 59, 0.4); border: 1px dashed rgba(255,255,255,0.08); border-radius: var(--vt-radius-md); text-align: center; } /* ---- Empty + pagination (reuse companies pagination styles) ---- */ .vt-search__empty { text-align: center; padding: 80px 24px; background: rgba(30,41,59,0.4); border: 1px dashed rgba(255,255,255,0.10); border-radius: var(--vt-radius-lg); } .vt-search__empty-icon { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; background: var(--vt-surface-container); display: flex; align-items: center; justify-content: center; color: var(--vt-primary); } .vt-search__empty-icon .material-symbols-outlined { font-size: 32px; } .vt-search__empty h3 { font-family: var(--vt-font-display); font-weight: 600; font-size: 20px; color: var(--vt-on-surface); margin: 0 0 8px; } .vt-search__empty p { color: var(--vt-on-surface-variant); margin: 0 0 18px; } .vt-search__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px; } .vt-search__empty-actions .vt-btn { min-height: 48px; line-height: 1; } .vt-search__empty-actions .vt-btn .material-symbols-outlined { line-height: 1; display: inline-flex; align-items: center; } .vt-search__pagination { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .vt-search__pagination .pagination { display: inline-flex; gap: 6px; list-style: none; margin: 0; padding: 0; } .vt-search__pagination .page-item .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; background: var(--vt-surface-container); border: 1px solid rgba(255,255,255,0.06); color: var(--vt-on-surface-variant); border-radius: var(--vt-radius); font-size: 14px; font-weight: 600; text-decoration: none; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .vt-search__pagination .page-item .page-link:hover { background: var(--vt-surface-high); color: var(--vt-primary); border-color: rgba(173,198,255,0.25); } .vt-search__pagination .page-item.active .page-link { background: var(--vt-primary); color: var(--vt-on-primary-container); border-color: var(--vt-primary); } .vt-search__pagination .page-item.disabled .page-link { opacity: 0.4; pointer-events: none; } /* Laravel's Bootstrap-5 paginator emits its own "Showing X to Y of Z results" summary inside the nav, next to the page buttons. We render our own summary below the nav (.vt-search__results-sub) and don't want two copies, so hide the BS5 one entirely. Then center the remaining page buttons since they're now the only child of the BS5 flex container. */ .vt-search__pagination .small.text-muted, .vt-search__pagination p.small.text-muted { display: none !important; } .vt-search__pagination .d-sm-flex.justify-content-sm-between { justify-content: center !important; } /* ---- Job Alert modal (dark themed Bootstrap modal) ---- */ .vt-search__alert-modal .modal-dialog { max-width: 540px; } .vt-search__alert-modal .modal-content { background: var(--vt-surface-container); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--vt-radius-lg); color: var(--vt-on-surface); } .vt-search__alert-modal .modal-header { border-bottom: 1px solid rgba(255,255,255,0.06); padding: 18px 22px; } .vt-search__alert-modal .modal-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--vt-font-display); font-weight: 600; font-size: 16px; color: var(--vt-on-surface); } .vt-search__alert-modal .modal-title .material-symbols-outlined { color: var(--vt-primary); font-size: 20px; } .vt-search__alert-modal .btn-close { filter: invert(1) brightness(1.4); opacity: 0.7; } .vt-search__alert-modal .modal-body { padding: 22px; } .vt-search__alert-headline { font-family: var(--vt-font-display); font-weight: 600; font-size: 16px; color: var(--vt-on-surface); margin: 0 0 16px; line-height: 1.5; } .vt-search__alert-headline strong { color: var(--vt-primary); font-weight: 700; } .vt-search__alert-label { display: block; font-size: 13px; font-weight: 600; color: var(--vt-on-surface-variant); margin: 0 0 6px; } .vt-search__alert-input { width: 100%; background: var(--vt-surface-low); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--vt-radius); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 14px; padding: 12px 14px; outline: none; transition: border-color 180ms ease, box-shadow 180ms ease; } .vt-search__alert-input:focus { border-color: var(--vt-primary); box-shadow: 0 0 0 3px rgba(173, 198, 255, 0.14); } .vt-search__alert-modal .modal-footer { border-top: 1px solid rgba(255,255,255,0.06); padding: 16px 22px; display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; } .vt-search__alert-modal .vt-search__alert-cta { display: inline-flex; gap: 10px; align-items: center; margin-inline-start: auto; } .vt-search__alert-modal .vt-search__alert-never { color: var(--vt-on-surface-variant, #c2c6d6); border: 1px solid rgba(255,255,255,0.12); background: transparent; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 180ms ease; } .vt-search__alert-modal .vt-search__alert-never:hover { color: #f87171; border-color: rgba(248,113,113,0.40); background: rgba(248,113,113,0.06); transform: translateY(-1px); } .vt-search__alert-modal .vt-search__alert-never .material-symbols-outlined { font-size: 18px; } @media (max-width: 480px) { .vt-search__alert-modal .modal-footer { flex-direction: column; align-items: stretch; } .vt-search__alert-modal .vt-search__alert-cta { width: 100%; justify-content: flex-end; } .vt-search__alert-modal .vt-search__alert-never { justify-content: center; } } /* Avoid Owl carousel — replaced with CSS grids in vt partials. */ /* ===================================================================== Job Detail page — .vt-job (scoped restyle, ZERO backend impact) ===================================================================== */ .vt-job { --vt-bg: #0b1326; --vt-surface-dim: #0b1326; --vt-surface-bright: #31394d; --vt-surface-lowest: #060e20; --vt-surface-low: #131b2e; --vt-surface-container: #171f33; --vt-surface-high: #222a3d; --vt-surface-highest: #2d3449; --vt-surface-variant: #2d3449; --vt-on-surface: #dae2fd; --vt-on-surface-variant: #c2c6d6; --vt-outline: #8c909f; --vt-outline-variant: #424754; --vt-primary: #adc6ff; --vt-primary-container: #4d8eff; --vt-on-primary: #000000; --vt-on-primary-container: #000000; --vt-secondary: #4cd7f6; --vt-secondary-container: #03b5d3; --vt-tertiary: #c4a3ff; --vt-text: #dae2fd; --vt-muted: #c2c6d6; --vt-radius-sm: 0.25rem; --vt-radius: 0.5rem; --vt-radius-md: 0.75rem; --vt-radius-lg: 1rem; --vt-radius-full: 9999px; --vt-container-max: 1280px; --vt-margin-desktop: 32px; --vt-margin-mobile: 16px; --vt-font-display: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif; --vt-font-body: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; background: var(--vt-bg); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } [dir="rtl"] .vt-job { --vt-font-display: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif; --vt-font-body: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; } .vt-job__main { flex: 1 0 auto; padding: 28px 0 80px; position: relative; } .vt-job__container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; gap: 28px; } @media (max-width: 768px) { .vt-job__main { padding: 16px 0 100px; } .vt-job__container { padding: 0 16px; gap: 20px; } } /* ---------- Breadcrumb ---------- */ .vt-job__breadcrumb { font-size: 13px; } .vt-job__crumbs { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--vt-muted, #c2c6d6); } .vt-job__crumbs li { display: inline-flex; align-items: center; } .vt-job__crumbs a { color: var(--vt-muted, #c2c6d6); text-decoration: none; transition: color 160ms ease; } .vt-job__crumbs a:hover { color: var(--vt-primary, #adc6ff); } .vt-job__crumbs [aria-current="page"] { color: var(--vt-text, #dae2fd); font-weight: 600; } .vt-job__crumbs .material-symbols-outlined { font-size: 16px; opacity: .6; } [dir="rtl"] .vt-job__crumbs .material-symbols-outlined { transform: scaleX(-1); } /* ---------- Hero ---------- */ .vt-job__hero { position: relative; border-radius: 22px; padding: 0; overflow: hidden; background: linear-gradient(135deg, rgba(77,142,255,0.10), rgba(76,215,246,0.06) 50%, rgba(196,163,255,0.05)); border: 1px solid rgba(255,255,255,0.06); } .vt-job__hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 360px at 12% 0%, rgba(77,142,255,0.18), transparent 60%), radial-gradient(700px 320px at 88% 100%, rgba(76,215,246,0.14), transparent 65%); opacity: .9; pointer-events: none; z-index: 0; } .vt-job__hero-inner { position: relative; z-index: 1; padding: 28px 28px 26px; backdrop-filter: blur(10px); } .vt-job__hero-ribbon { align-self: flex-start; background: #4d8eff; color: #ffffff; padding: 5px 11px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 4px 12px rgba(77,142,255,0.30); text-shadow: 0 1px 0 rgba(0,0,0,0.15); margin-bottom: 8px; width: fit-content; } .vt-job__hero-ribbon .material-symbols-outlined { font-size: 16px; } .vt-job__hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } .vt-job__hero-id { display: flex; gap: 20px; align-items: flex-start; flex: 1; min-width: 0; } .vt-job__hero-logo { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 18px; background: var(--vt-surface-high, #222a3d); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform 200ms ease, box-shadow 200ms ease; } .vt-job__hero-logo:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.25); } .vt-job__hero-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .vt-job__hero-id-text { min-width: 0; } .vt-job__hero-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: clamp(24px, 2.4vw, 38px); line-height: 1.18; font-weight: 700; letter-spacing: -0.01em; color: var(--vt-text, #dae2fd); margin: 0 0 10px; } [dir="rtl"] .vt-job__hero-title { font-family: 'Plus Jakarta Sans','IBM Plex Sans Arabic',sans-serif; } .vt-job__hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--vt-muted, #c2c6d6); font-size: 14px; } .vt-job__hero-company { display: inline-flex; align-items: center; gap: 6px; color: var(--vt-secondary, #4cd7f6); font-weight: 600; text-decoration: none; transition: color 160ms ease; } .vt-job__hero-company:hover { color: var(--vt-primary, #adc6ff); } .vt-job__hero-company .material-symbols-outlined { font-size: 18px; color: var(--vt-secondary); } .vt-job__hero-dot { opacity: .5; } .vt-job__hero-loc, .vt-job__hero-posted { display: inline-flex; align-items: center; gap: 5px; } .vt-job__hero-loc .material-symbols-outlined, .vt-job__hero-posted .material-symbols-outlined { font-size: 16px; opacity: .7; } .vt-job__hero-salary { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; background: rgba(76,215,246,0.10); border: 1px solid rgba(76,215,246,0.22); padding: 10px 16px; border-radius: 12px; color: var(--vt-text); } .vt-job__hero-salary .material-symbols-outlined { color: var(--vt-secondary); font-size: 20px; } .vt-job__hero-salary strong { font-weight: 700; color: var(--vt-text); } .vt-job__hero-period { color: var(--vt-muted); font-size: 13px; } .vt-job__hero-cta { flex: 0 0 auto; padding-top: 8px; } /* ---------- Apply button (shared) ---------- */ .vt-job__apply { display: inline-flex; align-items: center; gap: 10px; background: var(--vt-primary, #adc6ff); color: #000000; font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 14px; text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 10px 28px rgba(173,198,255,0.20); transition: transform 180ms cubic-bezier(.16,1,.3,1), box-shadow 200ms ease, background-color 200ms ease; } .vt-job__apply:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(173,198,255,0.30); color: #000000; } .vt-job__apply:active { transform: scale(.98); } .vt-job__apply .material-symbols-outlined { font-size: 20px; } /* Send icon is the LAST child in source so flex places it at the end of the button — right in LTR, left in RTL. In RTL we mirror the glyph so it points the natural RTL forward direction (left). Exclude the --applied (task_alt) and --expired (block) variants: their icon is direction-agnostic and sits at the START of the badge, so the previous `:last-child` rule was wrongly mirroring the check on "Already Applied". */ [dir="rtl"] .vt-job__apply:not(.vt-job__apply--applied):not(.vt-job__apply--expired) > .material-symbols-outlined:last-child { transform: scaleX(-1); } .vt-job__apply--applied { background: rgba(0,204,153,0.16); color: #00CC99; box-shadow: none; cursor: default; } .vt-job__apply--applied:hover { transform: none; box-shadow: none; color: #00CC99; } /* "Applied on " sub-caption rendered below the green pill on the job detail hero + sticky actions panel. Matches the pill's green palette. */ .vt-job__apply-meta { margin: 8px 0 0; /* `flex` (NOT inline-flex) makes the

block-level so it sits below the "Already Applied" pill, not beside it. width:max-content keeps the pill-style line tight rather than stretching to the container width. */ display: flex; width: max-content; max-width: 100%; align-items: center; gap: 6px; font-size: 12px; color: rgba(0, 204, 153, 0.85); font-weight: 600; } .vt-job__apply-meta .material-symbols-outlined { font-size: 14px; } /* Sidebar radio group used by Application Status (and any future radio set). */ .vt-search__sb-radios { display: flex; flex-direction: column; gap: 6px; } .vt-search__sb-radio { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); cursor: pointer; font-size: 13px; color: var(--vt-on-surface, #dae2fd); transition: background 150ms ease, border-color 150ms ease; } .vt-search__sb-radio:hover { background: rgba(255,255,255,0.06); } .vt-search__sb-radio input[type="radio"] { accent-color: var(--vt-secondary, #4cd7f6); margin: 0; } .vt-search__sb-radio input[type="radio"]:checked + span { color: var(--vt-secondary, #4cd7f6); font-weight: 600; } .vt-job__apply--expired { background: rgba(248,113,113,0.14); color: #f87171; box-shadow: none; cursor: not-allowed; } .vt-job__apply--expired:hover { transform: none; box-shadow: none; } .vt-job__apply--warn { background: linear-gradient(135deg, var(--vt-tertiary, #c4a3ff), #ddc8ff); color: #461f00; box-shadow: 0 10px 28px rgba(196,163,255,0.20); } .vt-job__apply--warn:hover { color: #461f00; box-shadow: 0 14px 36px rgba(196,163,255,0.30); } @media (max-width: 900px) { .vt-job__hero-head { flex-direction: column; align-items: stretch; } .vt-job__hero-cta { padding-top: 4px; } .vt-job__apply { width: 100%; justify-content: center; } } @media (max-width: 540px) { .vt-job__hero-logo { width: 64px; height: 64px; flex-basis: 64px; border-radius: 14px; } } /* Salary chip on phones: the default `inline-flex` chip sizes to content and refuses to wrap, so a long range like "USD 50,000 – USD 100,000 / per month" overflows the hero column on ≤640px screens. Switch to a wrapping flex row that fills the available width, allow the numeric range to break, and isolate its bidi direction so the LTR currency range renders cleanly inside the RTL Arabic hero. */ @media (max-width: 640px) { .vt-job__hero-salary { display: flex; flex-wrap: wrap; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; padding: 10px 12px; gap: 4px 8px; margin-top: 12px; } .vt-job__hero-salary .material-symbols-outlined { font-size: 18px; } .vt-job__hero-salary strong { font-size: 14px; line-height: 1.35; word-break: break-word; direction: ltr; unicode-bidi: isolate; } .vt-job__hero-period { font-size: 12px; } } @media (max-width: 640px) { .vt-company__job-salary { display: flex; flex-wrap: wrap; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; gap: 4px 6px; } .vt-company__job-salary strong { direction: ltr; unicode-bidi: isolate; } .vt-search__job-salary { display: flex; flex-wrap: wrap; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; gap: 4px 6px; } .vt-search__job-salary strong { direction: ltr; unicode-bidi: isolate; } } /* ---------- Hero secondary actions row ---------- */ .vt-job__hero-actions { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-wrap: wrap; gap: 8px; } .vt-job__hero-actions .vt-job__action { background: rgba(34,42,61,0.55); border-color: rgba(255,255,255,0.10); } .vt-job__hero-actions .vt-job__action:hover { background: rgba(173,198,255,0.10); } /* ---------- Two-column grid ---------- */ .vt-job__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } @media (min-width: 1024px) { .vt-job__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; } } .vt-job__col-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .vt-job__col-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* Sidebar cards scroll naturally — sticky removed to avoid backdrop-filter stacking conflicts with sibling cards */ /* ---------- Glass panel base ---------- */ .vt-job__panel { background: rgba(23, 31, 51, 0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; padding: 22px 24px; backdrop-filter: blur(8px); } .vt-job__panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .vt-job__panel-icon { font-size: 22px; color: var(--vt-secondary, #4cd7f6); background: rgba(76,215,246,0.10); padding: 7px; border-radius: 10px; } .vt-job__panel-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700; color: var(--vt-text); margin: 0; } [dir="rtl"] .vt-job__panel-title { font-family: 'Plus Jakarta Sans','IBM Plex Sans Arabic',sans-serif; } /* ---------- Details bento ---------- */ .vt-job__details-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; } @media (min-width: 540px) { .vt-job__details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { .vt-job__details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .vt-job__detail { display: flex; align-items: flex-start; gap: 12px; background: rgba(34,42,61,0.55); border: 1px solid rgba(255,255,255,0.05); border-radius: 14px; padding: 14px 14px; transition: border-color 200ms ease, transform 200ms ease; } .vt-job__detail:hover { border-color: rgba(76,215,246,0.25); transform: translateY(-1px); } .vt-job__detail-icon { font-size: 20px; color: var(--vt-secondary, #4cd7f6); background: rgba(76,215,246,0.10); padding: 7px; border-radius: 10px; flex: 0 0 auto; } .vt-job__detail-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vt-job__detail-label { font-size: 11px; color: var(--vt-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .vt-job__detail-value { font-size: 14px; color: var(--vt-text); font-weight: 600; word-break: break-word; } /* ---------- Prose (description / benefits) ---------- */ .vt-job__prose { color: var(--vt-text); font-size: 15px; line-height: 1.7; } .vt-job__prose p { margin: 0 0 14px; } .vt-job__prose p:last-child { margin-bottom: 0; } .vt-job__prose h1, .vt-job__prose h2, .vt-job__prose h3, .vt-job__prose h4 { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--vt-text); margin: 22px 0 10px; font-weight: 700; line-height: 1.3; } .vt-job__prose h2 { font-size: 20px; } .vt-job__prose h3 { font-size: 18px; } .vt-job__prose h4 { font-size: 16px; } .vt-job__prose ul, .vt-job__prose ol { margin: 0 0 14px; padding-inline-start: 22px; color: var(--vt-muted); } .vt-job__prose li { margin-bottom: 6px; line-height: 1.65; } .vt-job__prose strong { color: var(--vt-text); font-weight: 700; } .vt-job__prose em { color: var(--vt-text); } .vt-job__prose a { color: var(--vt-secondary); text-decoration: none; border-bottom: 1px solid rgba(76,215,246,0.30); transition: color 160ms ease, border-color 160ms ease; } .vt-job__prose a:hover { color: var(--vt-primary); border-bottom-color: rgba(173,198,255,0.55); } .vt-job__prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 12px 0; } .vt-job__prose blockquote { margin: 14px 0; padding: 10px 16px; border-inline-start: 3px solid var(--vt-secondary); background: rgba(76,215,246,0.06); border-radius: 10px; color: var(--vt-muted); } .vt-job__prose hr { border: 0; border-top: 1px solid rgba(255,255,255,0.08); margin: 18px 0; } /* ---------- Skills chips ---------- */ .vt-job__skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .vt-job__skills li { display: inline-flex; } .vt-job__skills li a { display: inline-flex; align-items: center; padding: 8px 14px; background: rgba(76,215,246,0.08); border: 1px solid rgba(76,215,246,0.25); border-radius: 999px; color: var(--vt-secondary, #4cd7f6); text-decoration: none; font-size: 13px; font-weight: 600; transition: transform 180ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease; } .vt-job__skills li a:hover { transform: translateY(-1px); background: rgba(173,198,255,0.14); border-color: rgba(173,198,255,0.40); color: var(--vt-primary, #adc6ff); } /* ---------- Actions row ---------- */ .vt-job__actions-panel { padding: 20px 24px; } .vt-job__actions-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .vt-job__actions-meta { display: flex; flex-wrap: wrap; gap: 6px; } .vt-job__action { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; background: transparent; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; color: var(--vt-muted); text-decoration: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 180ms ease; } .vt-job__action:hover { color: var(--vt-primary); border-color: rgba(173,198,255,0.40); background: rgba(173,198,255,0.06); transform: translateY(-1px); } .vt-job__action .material-symbols-outlined { font-size: 18px; } .vt-job__action--saved { color: var(--vt-secondary); border-color: rgba(76,215,246,0.40); background: rgba(76,215,246,0.08); } .vt-job__action--danger:hover { color: #f87171; border-color: rgba(248,113,113,0.40); background: rgba(248,113,113,0.06); } @media (max-width: 540px) { .vt-job__actions-cta { width: 100%; } .vt-job__actions-cta .vt-job__apply { width: 100%; justify-content: center; } } /* ---------- Side: Job Summary card ---------- */ .vt-job__sidecard { background: rgba(23,31,51,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; overflow: hidden; backdrop-filter: blur(8px); } .vt-job__summary { border-inline-start: 3px solid var(--vt-secondary, #4cd7f6); padding: 22px 24px; } .vt-job__sidecard-head { margin-bottom: 16px; } .vt-job__sidecard-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--vt-muted); margin: 0; } .vt-job__summary-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .vt-job__summary-row { display: flex; align-items: flex-start; gap: 14px; } .vt-job__summary-icon { font-size: 22px; color: var(--vt-secondary); background: rgba(76,215,246,0.12); padding: 10px; border-radius: 12px; flex: 0 0 auto; } .vt-job__summary-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .vt-job__summary-label { font-size: 11px; color: var(--vt-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .vt-job__summary-value { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; color: var(--vt-text); word-break: break-word; } .vt-job__summary-sub { margin-inline-start: 6px; font-size: 12px; font-weight: 500; color: var(--vt-muted); } /* ---------- Side: Company card ---------- */ .vt-job__companycard-cover { height: 80px; background: linear-gradient(135deg, rgba(173,198,255,0.45), rgba(76,215,246,0.45)); opacity: .35; } .vt-job__companycard-body { padding: 0 22px 22px; margin-top: -44px; } .vt-job__companycard-logo { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 16px; background: var(--vt-surface-high, #222a3d); border: 1px solid rgba(173, 198, 255, 0.20); padding: 0; margin-bottom: 14px; overflow: hidden; text-decoration: none; position: relative; z-index: 1; transition: transform 200ms ease; } .vt-job__companycard-logo:hover { transform: translateY(-2px); } .vt-job__companycard-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .vt-job__companycard-id { margin-bottom: 14px; } .vt-job__companycard-name { display: inline-flex; align-items: center; gap: 6px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700; color: var(--vt-text); text-decoration: none; margin-bottom: 4px; transition: color 160ms ease; } .vt-job__companycard-name:hover { color: var(--vt-primary); } .vt-job__companycard-name .material-symbols-outlined { font-size: 18px; color: var(--vt-secondary); } .vt-job__companycard-meta { font-size: 13px; color: var(--vt-muted); margin: 0 0 4px; } .vt-job__companycard-loc { font-size: 13px; color: var(--vt-muted); margin: 0; display: inline-flex; align-items: center; gap: 5px; } .vt-job__companycard-loc .material-symbols-outlined { font-size: 15px; opacity: .8; } .vt-job__companycard-desc { font-size: 13px; line-height: 1.65; color: var(--vt-muted); margin: 0 0 16px; } .vt-job__companycard-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin-bottom: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); } .vt-job__companycard-stat { display: flex; flex-direction: column; gap: 2px; background: rgba(34,42,61,0.55); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; padding: 10px; align-items: flex-start; } .vt-job__companycard-stat-value { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; color: var(--vt-text); } .vt-job__companycard-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--vt-muted); } .vt-job__companycard-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--vt-secondary); font-size: 13px; font-weight: 600; text-decoration: none; transition: color 160ms ease, gap 200ms ease; } .vt-job__companycard-cta:hover { color: var(--vt-primary); gap: 10px; } .vt-job__companycard-cta .material-symbols-outlined { font-size: 16px; } /* ---------- Side: Map (Leaflet + OpenStreetMap, mirrors .vt-company__map) ---------- */ .vt-job__map { padding: 22px 24px; } .vt-job__map-wrap { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: var(--vt-surface-lowest, #060e20); margin-bottom: 12px; } .vt-job__map-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: hue-rotate(180deg) invert(0.92) saturate(0.85); } .vt-job__map-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: rgba(34,42,61,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; color: var(--vt-text, #dae2fd); text-decoration: none; transition: border-color 200ms ease, background 200ms ease; } .vt-job__map-link:hover { border-color: rgba(76,215,246,0.40); background: rgba(76,215,246,0.06); color: var(--vt-text, #dae2fd); } .vt-job__map-link-text { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vt-muted, #c2c6d6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .vt-job__map-link-text .material-symbols-outlined { font-size: 16px; color: var(--vt-secondary, #4cd7f6); flex: 0 0 auto; } .vt-job__map-link-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--vt-secondary, #4cd7f6); white-space: nowrap; transition: gap 200ms ease; } .vt-job__map-link:hover .vt-job__map-link-cta { gap: 8px; } .vt-job__map-link-cta .material-symbols-outlined { font-size: 15px; } [dir="rtl"] .vt-job__map-link-cta .material-symbols-outlined { transform: scaleX(-1); } /* ---------- Related Jobs ---------- */ .vt-job__related { margin-top: 8px; } .vt-job__related-head { justify-content: space-between; } .vt-job__related-head > .vt-job__panel-title { flex: 1; } .vt-job__related-all { display: inline-flex; align-items: center; gap: 4px; color: var(--vt-secondary); font-size: 13px; font-weight: 600; text-decoration: none; transition: color 160ms ease, gap 200ms ease; } .vt-job__related-all:hover { color: var(--vt-primary); gap: 8px; } .vt-job__related-all .material-symbols-outlined { font-size: 18px; } [dir="rtl"] .vt-job__related-all .material-symbols-outlined { transform: scaleX(-1); } .vt-job__related-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .vt-job__related-card { position: relative; background: rgba(34,42,61,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .vt-job__related-card:hover { transform: translateY(-3px); border-color: rgba(76,215,246,0.30); box-shadow: 0 14px 30px rgba(0,0,0,0.25); } .vt-job__related-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; } .vt-job__related-ribbon { display: inline-flex; align-items: center; gap: 4px; background: #4d8eff; color: #ffffff; font-size: 10px; letter-spacing: .08em; font-weight: 800; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; box-shadow: 0 3px 10px rgba(77,142,255,0.30); text-shadow: 0 1px 0 rgba(0,0,0,0.15); } .vt-job__related-ribbon .material-symbols-outlined { font-size: 12px; } .vt-job__related-head-row { display: flex; gap: 12px; align-items: flex-start; } .vt-job__related-logo { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; background: var(--vt-surface-high, #222a3d); border: 1px solid rgba(255,255,255,0.06); padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .vt-job__related-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .vt-job__related-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vt-job__related-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 700; color: var(--vt-text); text-decoration: none; line-height: 1.3; transition: color 160ms ease; } .vt-job__related-title:hover { color: var(--vt-primary); } .vt-job__related-company { font-size: 13px; color: var(--vt-muted); text-decoration: none; transition: color 160ms ease; } .vt-job__related-company:hover { color: var(--vt-secondary); } .vt-job__related-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--vt-muted); font-size: 12px; } .vt-job__related-meta li { display: inline-flex; align-items: center; gap: 4px; } .vt-job__related-meta .material-symbols-outlined { font-size: 14px; opacity: .8; } .vt-job__related-salary { font-size: 13px; color: var(--vt-text); } .vt-job__related-salary strong { color: var(--vt-secondary); font-weight: 700; } .vt-job__related-salary span { color: var(--vt-muted); font-weight: 500; margin-inline-start: 4px; } .vt-job__related-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; color: var(--vt-secondary); font-size: 13px; font-weight: 600; text-decoration: none; transition: color 160ms ease, gap 200ms ease; } .vt-job__related-cta:hover { color: var(--vt-primary); gap: 8px; } .vt-job__related-cta .material-symbols-outlined { font-size: 16px; } [dir="rtl"] .vt-job__related-cta .material-symbols-outlined { transform: scaleX(-1); } .vt-job__related-empty { text-align: center; padding: 32px 16px; color: var(--vt-muted); } .vt-job__related-empty .material-symbols-outlined { font-size: 48px; opacity: .4; margin-bottom: 8px; } .vt-job__related-empty p { margin: 0 0 14px; font-size: 14px; } .vt-job__related-empty-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 12px; background: var(--vt-primary); color: #000000; font-weight: 700; font-size: 13px; text-decoration: none; transition: transform 180ms ease, box-shadow 200ms ease; } .vt-job__related-empty-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(173,198,255,0.25); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .vt-job * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ===================================================================== Blog listing page — .vt-blog (scoped restyle, ZERO backend impact) ===================================================================== */ .vt-blog { --vt-bg: #0b1326; --vt-surface-dim: #0b1326; --vt-surface-bright: #31394d; --vt-surface-lowest: #060e20; --vt-surface-low: #131b2e; --vt-surface-container: #171f33; --vt-surface-high: #222a3d; --vt-surface-highest: #2d3449; --vt-surface-variant: #2d3449; --vt-on-surface: #dae2fd; --vt-on-surface-variant: #c2c6d6; --vt-outline: #8c909f; --vt-outline-variant: #424754; --vt-primary: #adc6ff; --vt-primary-container: #4d8eff; --vt-on-primary: #000000; --vt-on-primary-container: #000000; --vt-secondary: #4cd7f6; --vt-secondary-container: #03b5d3; --vt-tertiary: #c4a3ff; --vt-text: #dae2fd; --vt-muted: #c2c6d6; --vt-radius-sm: 0.25rem; --vt-radius: 0.5rem; --vt-radius-md: 0.75rem; --vt-radius-lg: 1rem; --vt-radius-full: 9999px; --vt-container-max: 1280px; --vt-margin-desktop: 32px; --vt-margin-mobile: 16px; --vt-font-display: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif; --vt-font-body: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; background: var(--vt-bg); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } [dir="rtl"] .vt-blog { --vt-font-display: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif; --vt-font-body: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; } .vt-blog__main { flex: 1 0 auto; padding: 28px 0 80px; } .vt-blog__container { width: 100%; max-width: var(--vt-container-max); margin: 0 auto; padding: 0 var(--vt-margin-desktop); display: flex; flex-direction: column; gap: 32px; } @media (max-width: 768px) { .vt-blog__main { padding: 16px 0 100px; } .vt-blog__container { padding: 0 var(--vt-margin-mobile); gap: 24px; } } /* ---------- Hero ---------- */ .vt-blog__hero { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); background: linear-gradient(135deg, rgba(77,142,255,0.12), rgba(76,215,246,0.06) 50%, rgba(196,163,255,0.05)); } .vt-blog__hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 380px at 10% -10%, rgba(77,142,255,0.22), transparent 60%), radial-gradient(700px 320px at 90% 110%, rgba(76,215,246,0.16), transparent 65%); z-index: 0; pointer-events: none; } .vt-blog__hero-inner { position: relative; z-index: 1; padding: 48px 40px 44px; text-align: center; max-width: 760px; margin: 0 auto; } .vt-blog__hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-secondary); background: rgba(76,215,246,0.10); border: 1px solid rgba(76,215,246,0.25); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; } .vt-blog__hero-eyebrow .material-symbols-outlined { font-size: 16px; } .vt-blog__hero-title { font-family: var(--vt-font-display); font-size: clamp(28px, 3.4vw, 48px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--vt-on-surface); margin: 0 0 14px; background: linear-gradient(135deg, var(--vt-on-surface), var(--vt-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vt-blog__hero-lead { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: var(--vt-on-surface-variant); margin: 0 0 28px; max-width: 580px; margin-inline: auto; } .vt-blog__hero-search { display: flex; align-items: center; background: rgba(11,19,38,0.65); border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; padding: 6px; max-width: 560px; margin: 0 auto; transition: border-color 180ms ease, box-shadow 180ms ease; } .vt-blog__hero-search:focus-within { border-color: var(--vt-primary); box-shadow: 0 0 0 4px rgba(173,198,255,0.14); } .vt-blog__hero-search-icon { margin-inline-start: 14px; color: var(--vt-on-surface-variant); font-size: 22px; } .vt-blog__hero-search-input { flex: 1; min-width: 0; padding: 12px 14px; background: transparent; border: 0; color: var(--vt-on-surface); font-size: 15px; font-family: inherit; outline: none; } .vt-blog__hero-search-input::placeholder { color: var(--vt-on-surface-variant); opacity: .8; } .vt-blog__hero-search-btn { flex: 0 0 auto; background: var(--vt-primary); color: var(--vt-on-primary-container); border: 0; padding: 11px 22px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform 180ms ease, box-shadow 200ms ease; } .vt-blog__hero-search-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(173,198,255,0.25); } .vt-blog__hero-count { margin: 22px 0 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vt-on-surface-variant); } .vt-blog__hero-count .material-symbols-outlined { font-size: 16px; } @media (max-width: 540px) { .vt-blog__hero-inner { padding: 36px 20px 32px; } .vt-blog__hero-search { flex-wrap: wrap; gap: 4px; padding: 8px; } .vt-blog__hero-search-input { width: 100%; } .vt-blog__hero-search-btn { width: 100%; } } /* ---------- Layout ---------- */ .vt-blog__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } @media (min-width: 1024px) { .vt-blog__layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; } } .vt-blog__col-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; } /* ---------- Card grid ---------- */ .vt-blog__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px; } @media (min-width: 700px) { .vt-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { .vt-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .vt-blog__card { background: rgba(23,31,51,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform 220ms cubic-bezier(.16,1,.3,1), border-color 220ms ease, box-shadow 220ms ease; backdrop-filter: blur(8px); } .vt-blog__card:hover { transform: translateY(-4px); border-color: rgba(76,215,246,0.30); box-shadow: 0 18px 38px rgba(0,0,0,0.35); } .vt-blog__card-imgwrap { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vt-surface-high); } .vt-blog__card-img { position: absolute; inset: 0; display: flex; } .vt-blog__card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 360ms cubic-bezier(.16,1,.3,1); } .vt-blog__card:hover .vt-blog__card-img img { transform: scale(1.05); } .vt-blog__card-imgveil { position: absolute; inset: auto 0 0 0; height: 50%; background: linear-gradient(to top, rgba(11,19,38,0.65), transparent); pointer-events: none; } .vt-blog__card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .vt-blog__card-cats { display: flex; flex-wrap: wrap; gap: 6px; } .vt-blog__card-cat { display: inline-flex; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vt-secondary); background: rgba(76,215,246,0.10); border: 1px solid rgba(76,215,246,0.22); padding: 4px 10px; border-radius: 999px; text-decoration: none; transition: color 160ms ease, border-color 160ms ease, background 160ms ease; } .vt-blog__card-cat:hover { color: var(--vt-primary); border-color: rgba(173,198,255,0.40); background: rgba(173,198,255,0.10); } .vt-blog__card-title { font-family: var(--vt-font-display); font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--vt-on-surface); } .vt-blog__card-title a { color: inherit; text-decoration: none; transition: color 160ms ease; } .vt-blog__card-title a:hover { color: var(--vt-primary); } .vt-blog__card-excerpt { font-size: 14px; line-height: 1.6; color: var(--vt-on-surface-variant); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .vt-blog__card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; color: var(--vt-on-surface-variant); } .vt-blog__card-date { display: inline-flex; align-items: center; gap: 5px; } .vt-blog__card-date .material-symbols-outlined { font-size: 15px; opacity: .8; } .vt-blog__card-cta { display: inline-flex; align-items: center; gap: 4px; color: var(--vt-secondary); font-size: 13px; font-weight: 700; text-decoration: none; transition: color 160ms ease, gap 200ms ease; } .vt-blog__card-cta:hover { color: var(--vt-primary); gap: 8px; } .vt-blog__card-cta .material-symbols-outlined { font-size: 16px; } [dir="rtl"] .vt-blog__card-cta .material-symbols-outlined { transform: scaleX(-1); } /* ---------- Empty state ---------- */ .vt-blog__empty { background: rgba(23,31,51,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; padding: 48px 28px; text-align: center; color: var(--vt-on-surface-variant); } .vt-blog__empty .material-symbols-outlined { font-size: 56px; opacity: .4; margin-bottom: 10px; } .vt-blog__empty-title { font-family: var(--vt-font-display); font-size: 22px; font-weight: 700; color: var(--vt-on-surface); margin: 0 0 8px; } .vt-blog__empty-text { margin: 0 0 18px; font-size: 14px; } .vt-blog__empty-cta { display: inline-flex; align-items: center; gap: 6px; padding: 11px 22px; border-radius: 12px; background: var(--vt-primary); color: var(--vt-on-primary-container); font-weight: 700; font-size: 13px; text-decoration: none; transition: transform 180ms ease, box-shadow 200ms ease; } .vt-blog__empty-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(173,198,255,0.25); } /* ---------- Sidebar ---------- */ .vt-blog__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .vt-blog__widget { background: rgba(23,31,51,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 20px 22px; backdrop-filter: blur(8px); } .vt-blog__widget-title { display: flex; align-items: center; gap: 8px; font-family: var(--vt-font-display); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vt-on-surface); margin: 0 0 14px; } .vt-blog__widget-title .material-symbols-outlined { font-size: 18px; color: var(--vt-secondary); background: rgba(76,215,246,0.12); padding: 6px; border-radius: 8px; } /* Sidebar search */ .vt-blog__widget-search { display: flex; align-items: stretch; gap: 8px; } .vt-blog__widget-search-input { flex: 1; min-width: 0; padding: 10px 14px; background: rgba(11,19,38,0.45); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: var(--vt-on-surface); font-size: 14px; font-family: inherit; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; } .vt-blog__widget-search-input::placeholder { color: var(--vt-on-surface-variant); opacity: .7; } .vt-blog__widget-search-input:focus { border-color: var(--vt-primary); box-shadow: 0 0 0 3px rgba(173,198,255,0.14); } .vt-blog__widget-search-btn { flex: 0 0 auto; background: var(--vt-primary); color: var(--vt-on-primary-container); border: 0; padding: 0 14px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 180ms ease; } .vt-blog__widget-search-btn:hover { transform: translateY(-1px); } .vt-blog__widget-search-btn .material-symbols-outlined { font-size: 18px; } [dir="rtl"] .vt-blog__widget-search-btn .material-symbols-outlined { transform: scaleX(-1); } /* Categories list */ .vt-blog__widget-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .vt-blog__widget-cat { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-radius: 10px; color: var(--vt-on-surface); text-decoration: none; font-size: 14px; font-weight: 500; transition: background 160ms ease, color 160ms ease; } .vt-blog__widget-cat:hover { background: rgba(76,215,246,0.08); color: var(--vt-secondary); } .vt-blog__widget-cat-chevron { font-size: 16px; opacity: .6; transition: transform 200ms ease; } .vt-blog__widget-cat:hover .vt-blog__widget-cat-chevron { transform: translateX(2px); } [dir="rtl"] .vt-blog__widget-cat-chevron { transform: scaleX(-1); } [dir="rtl"] .vt-blog__widget-cat:hover .vt-blog__widget-cat-chevron { transform: scaleX(-1) translateX(2px); } /* CTA sidebar block */ .vt-blog__widget--cta { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(77,142,255,0.16), rgba(76,215,246,0.08)); border-color: rgba(173,198,255,0.20); text-align: center; } .vt-blog__widget-cta-icon { font-size: 28px; color: var(--vt-primary); background: rgba(173,198,255,0.12); padding: 12px; border-radius: 14px; display: inline-flex; margin-bottom: 10px; } .vt-blog__widget-cta-title { font-family: var(--vt-font-display); font-size: 16px; font-weight: 700; color: var(--vt-on-surface); margin: 0 0 6px; } .vt-blog__widget-cta-text { font-size: 13px; line-height: 1.5; color: var(--vt-on-surface-variant); margin: 0 0 16px; } .vt-blog__widget-cta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; background: var(--vt-primary); color: var(--vt-on-primary-container); font-weight: 700; font-size: 13px; text-decoration: none; transition: transform 180ms ease, box-shadow 200ms ease; } .vt-blog__widget-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(173,198,255,0.30); } .vt-blog__widget-cta-btn .material-symbols-outlined { font-size: 16px; } [dir="rtl"] .vt-blog__widget-cta-btn .material-symbols-outlined { transform: scaleX(-1); } /* ---------- Pagination ---------- */ .vt-blog__pagination .pagination { display: inline-flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .vt-blog__pagination .page-item { display: inline-flex; } .vt-blog__pagination .page-link, .vt-blog__pagination .page-item > span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; background: rgba(23,31,51,0.6); border: 1px solid rgba(255,255,255,0.08); color: var(--vt-on-surface-variant); border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; transition: color 160ms ease, border-color 160ms ease, background 160ms ease; } .vt-blog__pagination .page-link:hover { color: var(--vt-primary); border-color: rgba(173,198,255,0.40); background: rgba(173,198,255,0.06); } .vt-blog__pagination .page-item.active .page-link { background: var(--vt-primary); color: var(--vt-on-primary-container); border-color: transparent; } .vt-blog__pagination .page-item.disabled .page-link, .vt-blog__pagination .page-item.disabled > span { opacity: .4; cursor: not-allowed; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .vt-blog * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ===================================================================== Blog detail / article body — extends .vt-blog scope ===================================================================== */ .vt-blog__layout--detail .vt-blog__col-main { gap: 0; } .vt-blog__article { background: rgba(23,31,51,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; padding: 32px; backdrop-filter: blur(8px); } @media (max-width: 768px) { .vt-blog__article { padding: 22px; } } /* Breadcrumb */ .vt-blog__crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--vt-on-surface-variant, #c2c6d6); margin-bottom: 22px; } .vt-blog__crumbs a { color: var(--vt-on-surface-variant, #c2c6d6); text-decoration: none; transition: color 160ms ease; } .vt-blog__crumbs a:hover { color: var(--vt-primary, #adc6ff); } .vt-blog__crumbs .material-symbols-outlined { font-size: 16px; opacity: .6; } [dir="rtl"] .vt-blog__crumbs .material-symbols-outlined { transform: scaleX(-1); } /* Article head */ .vt-blog__article-head { margin-bottom: 28px; } .vt-blog__article-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .vt-blog__article-title { font-family: var(--vt-font-display); font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; color: var(--vt-on-surface); margin: 0 0 18px; } .vt-blog__article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 13px; color: var(--vt-on-surface-variant); } .vt-blog__article-meta > span { display: inline-flex; align-items: center; gap: 5px; } .vt-blog__article-meta .material-symbols-outlined { font-size: 16px; opacity: .8; } .vt-blog__article-share { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: transparent; border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; color: var(--vt-on-surface-variant); font-size: 13px; font-weight: 600; cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 180ms ease; } .vt-blog__article-share:hover { color: var(--vt-primary); border-color: rgba(173,198,255,0.40); background: rgba(173,198,255,0.06); transform: translateY(-1px); } .vt-blog__article-share .material-symbols-outlined { font-size: 16px; opacity: 1; } /* Cover */ .vt-blog__article-cover { margin: 0 0 28px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); background: var(--vt-surface-high); } .vt-blog__article-cover img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; } /* Prose */ .vt-blog__prose { color: var(--vt-on-surface); font-size: 16px; line-height: 1.75; } .vt-blog__prose p { margin: 0 0 18px; color: var(--vt-on-surface); } .vt-blog__prose p:last-child { margin-bottom: 0; } .vt-blog__prose h1, .vt-blog__prose h2, .vt-blog__prose h3, .vt-blog__prose h4, .vt-blog__prose h5, .vt-blog__prose h6 { font-family: var(--vt-font-display); color: var(--vt-on-surface); font-weight: 700; line-height: 1.3; margin: 28px 0 12px; } .vt-blog__prose h2 { font-size: 24px; } .vt-blog__prose h3 { font-size: 20px; } .vt-blog__prose h4 { font-size: 18px; } .vt-blog__prose ul, .vt-blog__prose ol { margin: 0 0 18px; padding-inline-start: 22px; color: var(--vt-on-surface); } .vt-blog__prose li { margin-bottom: 6px; line-height: 1.7; } .vt-blog__prose strong { color: var(--vt-on-surface); font-weight: 700; } .vt-blog__prose em { color: var(--vt-on-surface); } .vt-blog__prose a { color: var(--vt-secondary); text-decoration: none; border-bottom: 1px solid rgba(76,215,246,0.35); transition: color 160ms ease, border-color 160ms ease; } .vt-blog__prose a:hover { color: var(--vt-primary); border-bottom-color: rgba(173,198,255,0.55); } .vt-blog__prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 18px 0; } .vt-blog__prose blockquote { margin: 22px 0; padding: 14px 20px; border-inline-start: 3px solid var(--vt-secondary); background: rgba(76,215,246,0.06); border-radius: 10px; color: var(--vt-on-surface-variant); font-style: italic; } .vt-blog__prose hr { border: 0; border-top: 1px solid rgba(255,255,255,0.08); margin: 26px 0; } .vt-blog__prose code { background: rgba(34,42,61,0.7); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 2px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; color: var(--vt-secondary); } .vt-blog__prose pre { background: rgba(11,19,38,0.7); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px; overflow-x: auto; margin: 0 0 18px; } .vt-blog__prose pre code { background: transparent; border: 0; padding: 0; color: var(--vt-on-surface); } .vt-blog__prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; } .vt-blog__prose th, .vt-blog__prose td { border: 1px solid rgba(255,255,255,0.08); padding: 10px 14px; text-align: start; } .vt-blog__prose th { background: rgba(34,42,61,0.6); font-weight: 700; } /* Foot */ .vt-blog__article-foot { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); } .vt-blog__article-back { display: inline-flex; align-items: center; gap: 6px; color: var(--vt-secondary); font-size: 13px; font-weight: 700; text-decoration: none; transition: color 160ms ease, gap 200ms ease; } .vt-blog__article-back:hover { color: var(--vt-primary); gap: 10px; } .vt-blog__article-back .material-symbols-outlined { font-size: 18px; } [dir="rtl"] .vt-blog__article-back .material-symbols-outlined { transform: scaleX(-1); } /* ============================================================= * VT Auth / Role-Picker Modal (headlogin, headregister, preresume) * Global — these modals can open from any page using vt/header.blade.php * ============================================================= */ .vt-auth-modal { color: #dae2fd; } .vt-auth-modal .modal-dialog { max-width: 440px; margin: 1.75rem auto; } .vt-auth-modal .modal-content { position: relative; background: radial-gradient(120% 100% at 50% 0%, rgba(77,142,255,0.18), transparent 60%), linear-gradient(180deg, #1a2238 0%, #141b2d 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; box-shadow: 0 30px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(173,198,255,0.04) inset; overflow: hidden; padding: 6px; } .vt-auth-modal .modal-content::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 50% at 20% 0%, rgba(76,215,246,0.10), transparent 60%), radial-gradient(60% 50% at 100% 100%, rgba(196,163,255,0.08), transparent 60%); z-index: 0; } .vt-auth-modal .btn-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 32px; height: 32px; border-radius: 10px; background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); opacity: 1; filter: none; z-index: 3; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; padding: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 12px; } .vt-auth-modal .btn-close:hover { background-color: rgba(77,142,255,0.22); border-color: rgba(173,198,255,0.35); transform: rotate(90deg); } .vt-auth-modal .btn-close:focus { outline: none; box-shadow: 0 0 0 3px rgba(77,142,255,0.30); } .vt-auth-modal .modal-body { position: relative; z-index: 1; padding: 36px 32px 32px; text-align: center; } .vt-auth-modal__icon { width: 64px; height: 64px; margin: 0 auto 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, rgba(77,142,255,0.22), rgba(76,215,246,0.16)); border: 1px solid rgba(173,198,255,0.18); box-shadow: 0 8px 24px rgba(77,142,255,0.18); } .vt-auth-modal__icon .material-symbols-outlined { font-size: 30px; color: #adc6ff; } .vt-auth-modal__title { font-family: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: #f1f4ff; margin: 0 0 6px; line-height: 1.3; } .vt-auth-modal__sub { font-size: 14px; color: #c2c6d6; margin: 0 0 24px; } .vt-auth-modal__actions { display: flex; flex-direction: column; gap: 10px; } .vt-auth-modal__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 18px; border-radius: 14px; font-family: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease; } .vt-auth-modal__btn .material-symbols-outlined { font-size: 20px; } .vt-auth-modal__btn--primary { background: linear-gradient(135deg, #4d8eff 0%, #2f6fff 100%); color: #ffffff; box-shadow: 0 8px 24px rgba(77,142,255,0.28); } .vt-auth-modal__btn--primary:hover { color: #ffffff; transform: translateY(-1px); box-shadow: 0 12px 32px rgba(77,142,255,0.4); } .vt-auth-modal__btn--primary:active { transform: translateY(0); } .vt-auth-modal__btn--ghost { background: rgba(255,255,255,0.04); color: #dae2fd; border-color: rgba(255,255,255,0.10); } .vt-auth-modal__btn--ghost:hover { background: rgba(173,198,255,0.10); color: #f1f4ff; border-color: rgba(173,198,255,0.25); transform: translateY(-1px); } .vt-auth-modal__btn--ghost:active { transform: translateY(0); } @media (min-width: 480px) { .vt-auth-modal__actions { flex-direction: row; } .vt-auth-modal__btn { flex: 1; } } /* Modal backdrop tint to match dark theme */ .vt-auth-modal + .modal-backdrop, .modal-backdrop.show { background-color: #04070f; } .modal-backdrop.show { opacity: 0.75; } /* RTL: close button stays on the start side via inset-inline-end above; flip icon if needed */ [dir="rtl"] .vt-auth-modal .btn-close { transform: none; } [dir="rtl"] .vt-auth-modal .btn-close:hover { transform: rotate(-90deg); } /* Single-action variant: keep one button centred, max ~280px wide */ .vt-auth-modal__actions--single { flex-direction: column; align-items: center; } .vt-auth-modal__actions--single .vt-auth-modal__btn { flex: 0 1 auto; width: 100%; max-width: 280px; } @media (min-width: 480px) { .vt-auth-modal__actions--single { flex-direction: column; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .vt-auth-modal__btn, .vt-auth-modal .btn-close { transition: none; } .vt-auth-modal__btn:hover { transform: none; } } /* ===================================================================== Legacy .mypremodal safety net — any modal still using the legacy class (build-resume thanks modals, etc.) gets dark-themed automatically. Real fix is to migrate them to .vt-auth-modal; this prevents a white-card bleed-through while that migration is in progress. ===================================================================== */ .mypremodal .modal-content, .modal-dialog.mypremodal .modal-content, .modal-content.mypremodal { background: linear-gradient(180deg, #171f33 0%, #131b2e 100%); color: #dae2fd; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); overflow: hidden; } .mypremodal .btn-close, .modal-dialog.mypremodal .btn-close, .modal-content.mypremodal .btn-close { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dae2fd' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6 L18 18 M18 6 L6 18'/%3E%3C/svg%3E") center / 14px no-repeat; border: 1px solid rgba(255, 255, 255, 0.10); opacity: 1; transition: transform 180ms ease, background 180ms ease; } .mypremodal .btn-close:hover { transform: rotate(90deg); background-color: rgba(255, 255, 255, 0.12); } .mypremodal .modal-body, .modal-dialog.mypremodal .modal-body, .modal-content.mypremodal .modal-body { padding: 36px 28px 28px; text-align: center; } .mypremodal .preuserinfo h3, .modal-dialog.mypremodal .preuserinfo h3, .modal-content.mypremodal .preuserinfo h3 { font-family: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif; font-weight: 700; font-size: 20px; color: #f1f4ff; margin: 0 0 10px; line-height: 1.3; } .mypremodal .preuserinfo p, .modal-dialog.mypremodal .preuserinfo p, .modal-content.mypremodal .preuserinfo p { font-family: 'Inter', 'Noto Sans Arabic', system-ui, sans-serif; font-size: 14px; color: #c2c6d6; margin: 0 0 22px; } /* Re-skin the legacy yellow/dark CTAs as primary/ghost VT buttons */ .mypremodal .btn-yellow, .mypremodal .btn-dark, .modal-dialog.mypremodal .btn-yellow, .modal-dialog.mypremodal .btn-dark, .modal-content.mypremodal .btn-yellow, .modal-content.mypremodal .btn-dark { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 14px; font-family: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid transparent; margin: 4px; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease; } .mypremodal .btn-yellow, .modal-dialog.mypremodal .btn-yellow, .modal-content.mypremodal .btn-yellow { background: linear-gradient(135deg, #4d8eff 0%, #2f6fff 100%); color: #ffffff !important; box-shadow: 0 8px 24px rgba(77, 142, 255, 0.28); } .mypremodal .btn-yellow:hover, .modal-dialog.mypremodal .btn-yellow:hover, .modal-content.mypremodal .btn-yellow:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(77, 142, 255, 0.4); } .mypremodal .btn-dark, .modal-dialog.mypremodal .btn-dark, .modal-content.mypremodal .btn-dark { background: rgba(255, 255, 255, 0.04); color: #dae2fd !important; border-color: rgba(255, 255, 255, 0.10); } .mypremodal .btn-dark:hover, .modal-dialog.mypremodal .btn-dark:hover, .modal-content.mypremodal .btn-dark:hover { background: rgba(173, 198, 255, 0.10); color: #f1f4ff !important; border-color: rgba(173, 198, 255, 0.25); transform: translateY(-1px); } /* ===================================================================== Contact page — .vt-contact (scoped restyle, ZERO backend impact) ===================================================================== */ .vt-contact { --vt-bg: #0b1326; --vt-surface-dim: #0b1326; --vt-surface-bright: #31394d; --vt-surface-lowest: #060e20; --vt-surface-low: #131b2e; --vt-surface-container: #171f33; --vt-surface-high: #222a3d; --vt-surface-highest: #2d3449; --vt-surface-variant: #2d3449; --vt-on-surface: #dae2fd; --vt-on-surface-variant: #c2c6d6; --vt-outline: #8c909f; --vt-outline-variant: #424754; --vt-primary: #adc6ff; --vt-primary-container: #4d8eff; --vt-on-primary: #000000; --vt-on-primary-container: #000000; --vt-secondary: #4cd7f6; --vt-secondary-container: #03b5d3; --vt-tertiary: #c4a3ff; --vt-text: #dae2fd; --vt-muted: #c2c6d6; --vt-radius: 0.5rem; --vt-radius-md: 0.75rem; --vt-radius-lg: 1rem; --vt-radius-full: 9999px; --vt-container-max: 1280px; --vt-margin-desktop: 32px; --vt-margin-mobile: 16px; --vt-font-display: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif; --vt-font-body: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; background: var(--vt-bg); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } [dir="rtl"] .vt-contact { --vt-font-display: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif; --vt-font-body: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; } .vt-contact__main { flex: 1 0 auto; padding: 28px 0 80px; } .vt-contact__container { width: 100%; max-width: var(--vt-container-max); margin: 0 auto; padding: 0 var(--vt-margin-desktop); display: flex; flex-direction: column; gap: 32px; } @media (max-width: 768px) { .vt-contact__main { padding: 16px 0 100px; } .vt-contact__container { padding: 0 var(--vt-margin-mobile); gap: 24px; } } /* ---------- Hero ---------- */ .vt-contact__hero { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); background: linear-gradient(135deg, rgba(77,142,255,0.12), rgba(76,215,246,0.06) 50%, rgba(196,163,255,0.05)); } .vt-contact__hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 380px at 10% -10%, rgba(77,142,255,0.22), transparent 60%), radial-gradient(700px 320px at 90% 110%, rgba(76,215,246,0.16), transparent 65%); z-index: 0; pointer-events: none; } .vt-contact__hero-inner { position: relative; z-index: 1; padding: 44px 32px 40px; text-align: center; max-width: 720px; margin: 0 auto; } .vt-contact__hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-secondary); background: rgba(76,215,246,0.10); border: 1px solid rgba(76,215,246,0.25); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; } .vt-contact__hero-eyebrow .material-symbols-outlined { font-size: 16px; } .vt-contact__hero-title { font-family: var(--vt-font-display); font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--vt-on-surface); margin: 0 0 12px; background: linear-gradient(135deg, var(--vt-on-surface), var(--vt-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vt-contact__hero-lead { font-size: clamp(14px, 1.2vw, 17px); line-height: 1.6; color: var(--vt-on-surface-variant); margin: 0 auto; max-width: 560px; } /* ---------- Layout (info + form side by side) ---------- */ .vt-contact__layout { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 1024px) { .vt-contact__layout { grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; } } /* ---------- Info column ---------- */ .vt-contact__info { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .vt-contact__info-head { margin-bottom: 4px; } .vt-contact__info-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-secondary); margin-bottom: 6px; } .vt-contact__info-title { font-family: var(--vt-font-display); font-size: 22px; font-weight: 700; color: var(--vt-on-surface); margin: 0; line-height: 1.2; } .vt-contact__info-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: rgba(23,31,51,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; text-decoration: none; transition: border-color 200ms ease, background 200ms ease, transform 200ms ease; } .vt-contact a.vt-contact__info-card, .vt-contact a.vt-contact__info-card:hover { color: var(--vt-on-surface); } .vt-contact__info-card--link:hover { border-color: rgba(76,215,246,0.40); background: rgba(76,215,246,0.06); transform: translateY(-2px); } .vt-contact__info-icon { flex: 0 0 auto; font-size: 22px; color: var(--vt-secondary); background: rgba(76,215,246,0.12); padding: 10px; border-radius: 12px; } .vt-contact__info-card > div { min-width: 0; flex: 1; } .vt-contact__info-label { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--vt-on-surface-variant); } .vt-contact__info-value { margin: 0; font-size: 14px; font-weight: 600; color: var(--vt-on-surface); word-break: break-word; line-height: 1.5; } /* ---------- Form card ---------- */ .vt-contact__form-card { background: rgba(23,31,51,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; padding: 28px; backdrop-filter: blur(8px); min-width: 0; } @media (max-width: 540px) { .vt-contact__form-card { padding: 22px; } } .vt-contact__form-head { margin-bottom: 22px; } .vt-contact__form-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-secondary); margin-bottom: 6px; } .vt-contact__form-title { font-family: var(--vt-font-display); font-size: 24px; font-weight: 700; color: var(--vt-on-surface); margin: 0 0 6px; line-height: 1.2; } .vt-contact__form-sub { margin: 0; font-size: 13px; color: var(--vt-on-surface-variant); } .vt-contact__form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .vt-contact__form-grid { grid-template-columns: repeat(2, 1fr); } } .vt-contact__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .vt-contact__field--full { grid-column: 1 / -1; } .vt-contact__label { font-size: 12px; font-weight: 600; color: var(--vt-on-surface-variant); letter-spacing: 0.02em; } .vt-contact__req { color: var(--vt-tertiary); } .vt-contact__input, .vt-contact__textarea { width: 100%; padding: 12px 14px; background: rgba(11,19,38,0.55); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; color: var(--vt-on-surface); font-size: 14px; font-family: inherit; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; -webkit-appearance: none; appearance: none; } .vt-contact__input::placeholder, .vt-contact__textarea::placeholder { color: var(--vt-on-surface-variant); opacity: .65; } .vt-contact__input:focus, .vt-contact__textarea:focus { border-color: var(--vt-primary); box-shadow: 0 0 0 3px rgba(173,198,255,0.14); background: rgba(11,19,38,0.75); } .vt-contact__textarea { resize: vertical; min-height: 140px; line-height: 1.6; } .vt-contact__field.has-error .vt-contact__input, .vt-contact__field.has-error .vt-contact__textarea { border-color: rgba(248,113,113,0.55); box-shadow: 0 0 0 3px rgba(248,113,113,0.14); } .vt-contact__error { font-size: 12px; color: #f87171; margin-top: 2px; } .vt-contact__captcha { display: flex; justify-content: center; padding: 6px 0; } /* Make sure reCAPTCHA isn't crammed by the grid on narrow screens */ .vt-contact__captcha > div { max-width: 100%; overflow-x: auto; } .vt-contact__actions { margin-top: 4px; } .vt-contact__submit { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 12px; font-size: 14px; font-weight: 700; border: 0; cursor: pointer; transition: transform 180ms ease, box-shadow 200ms ease; } .vt-contact__submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(173,198,255,0.25); } .vt-contact__submit .material-symbols-outlined { font-size: 18px; } [dir="rtl"] .vt-contact__submit .material-symbols-outlined { transform: scaleX(-1); } /* Bootstrap-classed error legacy markup ({{ Form::label }}) — themed equivalents */ .vt-contact .help-block { font-size: 12px; color: #f87171; } /* ---------- Map section (Leaflet + OSM, Google Maps for external link) ---------- */ .vt-contact__map-section { background: rgba(23,31,51,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; padding: 24px; } @media (max-width: 540px) { .vt-contact__map-section { padding: 18px; } } .vt-contact__map-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .vt-contact__map-head .material-symbols-outlined { font-size: 22px; color: var(--vt-secondary); background: rgba(76,215,246,0.12); padding: 8px; border-radius: 10px; } .vt-contact__map-title { font-family: var(--vt-font-display); font-size: 18px; font-weight: 700; color: var(--vt-on-surface); margin: 0; } .vt-contact__map-wrap { position: relative; aspect-ratio: 21 / 9; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: var(--vt-surface-lowest); margin-bottom: 12px; } @media (max-width: 768px) { .vt-contact__map-wrap { aspect-ratio: 16 / 10; } } .vt-contact__map-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: hue-rotate(180deg) invert(0.92) saturate(0.85); } .vt-contact__map-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: rgba(34,42,61,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; color: var(--vt-on-surface); text-decoration: none; transition: border-color 200ms ease, background 200ms ease; } .vt-contact a.vt-contact__map-link, .vt-contact a.vt-contact__map-link:hover { color: var(--vt-on-surface); } .vt-contact__map-link:hover { border-color: rgba(76,215,246,0.40); background: rgba(76,215,246,0.06); } .vt-contact__map-link-text { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vt-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .vt-contact__map-link-text .material-symbols-outlined { font-size: 16px; color: var(--vt-secondary); flex: 0 0 auto; } .vt-contact__map-link-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--vt-secondary); white-space: nowrap; transition: gap 200ms ease; } .vt-contact__map-link:hover .vt-contact__map-link-cta { gap: 8px; } .vt-contact__map-link-cta .material-symbols-outlined { font-size: 15px; } [dir="rtl"] .vt-contact__map-link-cta .material-symbols-outlined { transform: scaleX(-1); } @media (prefers-reduced-motion: reduce) { .vt-contact * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ===================================================================== Talent search page — .vt-talent (employer-facing /job-seekers) ===================================================================== */ .vt-talent { --vt-bg: #0b1326; --vt-surface-dim: #0b1326; --vt-surface-bright: #31394d; --vt-surface-lowest: #060e20; --vt-surface-low: #131b2e; --vt-surface-container: #171f33; --vt-surface-high: #222a3d; --vt-surface-highest: #2d3449; --vt-on-surface: #dae2fd; --vt-on-surface-variant: #c2c6d6; --vt-outline: #8c909f; --vt-outline-variant: #424754; --vt-primary: #adc6ff; --vt-primary-container: #4d8eff; --vt-on-primary: #000000; --vt-on-primary-container: #000000; --vt-secondary: #4cd7f6; --vt-tertiary: #c4a3ff; --vt-text: #dae2fd; --vt-muted: #c2c6d6; --vt-radius: 0.5rem; --vt-radius-md: 0.75rem; --vt-radius-lg: 1rem; --vt-radius-full: 9999px; --vt-container-max: 1280px; --vt-margin-desktop: 32px; --vt-margin-mobile: 16px; --vt-font-display: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif; --vt-font-body: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; background: var(--vt-bg); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } [dir="rtl"] .vt-talent { --vt-font-display: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif; --vt-font-body: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; } .vt-talent__main { flex: 1 0 auto; padding: 28px 0 80px; } .vt-talent__container { width: 100%; max-width: var(--vt-container-max); margin: 0 auto; padding: 0 var(--vt-margin-desktop); display: flex; flex-direction: column; gap: 28px; } @media (max-width: 768px) { .vt-talent__main { padding: 16px 0 100px; } .vt-talent__container { padding: 0 var(--vt-margin-mobile); gap: 20px; } } /* ---------- Hero ---------- */ .vt-talent__hero { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); background: linear-gradient(135deg, rgba(77,142,255,0.12), rgba(76,215,246,0.06) 50%, rgba(196,163,255,0.05)); } .vt-talent__hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 380px at 10% -10%, rgba(77,142,255,0.22), transparent 60%), radial-gradient(700px 320px at 90% 110%, rgba(76,215,246,0.16), transparent 65%); z-index: 0; pointer-events: none; } .vt-talent__hero-inner { position: relative; z-index: 1; padding: 44px 32px 40px; text-align: center; max-width: 760px; margin: 0 auto; } .vt-talent__hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-secondary); background: rgba(76,215,246,0.10); border: 1px solid rgba(76,215,246,0.25); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; } .vt-talent__hero-eyebrow .material-symbols-outlined { font-size: 16px; } .vt-talent__hero-title { font-family: var(--vt-font-display); font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--vt-on-surface); margin: 0 0 12px; background: linear-gradient(135deg, var(--vt-on-surface), var(--vt-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vt-talent__hero-lead { font-size: clamp(14px, 1.2vw, 17px); line-height: 1.6; color: var(--vt-on-surface-variant); margin: 0 auto 26px; max-width: 600px; } .vt-talent__hero-search { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; background: rgba(11,19,38,0.65); border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; padding: 6px; max-width: 720px; margin: 0 auto; transition: border-color 180ms ease, box-shadow 180ms ease; } .vt-talent__hero-search:focus-within { border-color: var(--vt-primary); box-shadow: 0 0 0 4px rgba(173,198,255,0.14); } .vt-talent__hero-search-field { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 240px; min-width: 0; padding: 0 4px 0 16px; } .vt-talent__hero-search-icon { color: var(--vt-on-surface-variant); font-size: 20px; } .vt-talent__hero-search-input { flex: 1; min-width: 0; padding: 12px 8px; background: transparent; border: 0; color: var(--vt-on-surface); font-size: 15px; font-family: inherit; outline: none; } .vt-talent__hero-search-input::placeholder { color: var(--vt-on-surface-variant); opacity: .8; } .vt-talent__hero-search-fa { flex: 1 1 200px; display: flex; align-items: center; background: rgba(34,42,61,0.55); border-radius: 999px; padding: 0 6px; } .vt-talent__hero-search-select { width: 100%; background: transparent; border: 0; color: var(--vt-on-surface); font-size: 14px; font-family: inherit; padding: 10px 12px; outline: none; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px; padding-right: 26px; } [dir="rtl"] .vt-talent__hero-search-select { background-position: left 10px center; padding-right: 12px; padding-left: 26px; } .vt-talent__hero-search-select option { background: var(--vt-surface-container); color: var(--vt-on-surface); } .vt-talent__hero-search-btn { flex: 0 0 auto; background: var(--vt-primary); color: var(--vt-on-primary-container); border: 0; padding: 11px 24px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform 180ms ease, box-shadow 200ms ease; } .vt-talent__hero-search-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(173,198,255,0.25); } .vt-talent__hero-count { margin: 22px 0 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vt-on-surface-variant); } .vt-talent__hero-count .material-symbols-outlined { font-size: 16px; } @media (max-width: 640px) { .vt-talent__hero-search { border-radius: 18px; } .vt-talent__hero-search-field, .vt-talent__hero-search-fa, .vt-talent__hero-search-btn { width: 100%; flex: 1 1 100%; } .vt-talent__hero-search-btn { padding: 12px; border-radius: 12px; } .vt-talent__hero-search-fa { border-radius: 12px; } .vt-talent__hero-search-field { padding-left: 14px; padding-right: 8px; } } /* ---------- Layout (sidebar + results) ---------- */ .vt-talent__layout { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 1024px) { .vt-talent__layout { grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; } } /* ---------- Mobile filter FAB ---------- */ .vt-talent__filter-fab { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 10px 18px; background: var(--vt-primary); color: var(--vt-on-primary-container); border: 0; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 10px 24px rgba(173,198,255,0.25); } .vt-talent__filter-fab .material-symbols-outlined { font-size: 16px; } @media (min-width: 1024px) { .vt-talent__filter-fab { display: none; } } /* ---------- Drawer (mobile) / inline (desktop) ---------- */ .vt-talent__drawer { position: relative; min-width: 0; } @media (max-width: 1023px) { .vt-talent__drawer { position: fixed; inset: 0; z-index: 110; display: none; } .vt-talent__drawer.is-open { display: block; } .vt-talent__drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); } .vt-talent__sb { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: min(420px, 92%); overflow-y: auto; border-radius: 0 18px 18px 0; } [dir="rtl"] .vt-talent__sb { border-radius: 18px 0 0 18px; } } @media (min-width: 1024px) { .vt-talent__drawer-backdrop { display: none; } } /* ---------- Sidebar ---------- */ .vt-talent__sb { background: rgba(23,31,51,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; padding: 22px 22px 18px; backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 18px; } .vt-talent__sb-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); } .vt-talent__sb-head .material-symbols-outlined { font-size: 20px; color: var(--vt-secondary); background: rgba(76,215,246,0.12); padding: 8px; border-radius: 10px; } .vt-talent__sb-title { font-family: var(--vt-font-display); font-size: 17px; font-weight: 700; color: var(--vt-on-surface); margin: 0; } .vt-talent__sb-section { display: flex; flex-direction: column; gap: 10px; } .vt-talent__sb-section-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vt-on-surface-variant); margin: 0; } .vt-talent__sb-section-title .material-symbols-outlined { font-size: 14px; color: var(--vt-secondary); opacity: .85; } .vt-talent__sb-chips { display: flex; flex-wrap: wrap; gap: 6px; } /* Salary inputs */ .vt-talent__sb-salary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .vt-talent__sb-input { width: 100%; padding: 10px 12px; background: rgba(11,19,38,0.55); border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; color: var(--vt-on-surface); font-size: 14px; font-family: inherit; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; } .vt-talent__sb-input::placeholder { color: var(--vt-on-surface-variant); opacity: .65; } .vt-talent__sb-input:focus { border-color: var(--vt-primary); box-shadow: 0 0 0 3px rgba(173,198,255,0.14); } /* Actions */ .vt-talent__sb-actions { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); } .vt-talent__sb-clear { flex: 1; } .vt-talent__sb-submit { flex: 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .vt-talent__sb-submit .material-symbols-outlined { font-size: 18px; } /* ---------- Results ---------- */ .vt-talent__results { min-width: 0; } .vt-talent__results-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; } .vt-talent__results-count { font-family: var(--vt-font-display); font-size: 22px; font-weight: 700; color: var(--vt-on-surface); margin: 0; } .vt-talent__results-count .vt-accent { background: linear-gradient(135deg, var(--vt-primary), var(--vt-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vt-talent__results-sub { font-size: 13px; color: var(--vt-on-surface-variant); margin: 0; } /* ---------- Candidate cards grid ---------- */ .vt-talent__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 640px) { .vt-talent__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1300px) { .vt-talent__grid { grid-template-columns: repeat(3, 1fr); } } .vt-talent__card { position: relative; background: rgba(30, 41, 59, 0.70); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--vt-radius-lg); padding: 24px 22px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; backdrop-filter: blur(12px); transition: border-color 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 420ms ease; overflow: hidden; } .vt-talent__card:hover { transform: translateY(-4px); border-color: rgba(173, 198, 255, 0.35); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(173, 198, 255, 0.16); } .vt-talent__card-ribbon { position: absolute; top: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #4d8eff; color: #ffffff; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(77,142,255,0.35); text-shadow: 0 1px 0 rgba(0,0,0,0.15); z-index: 2; } .vt-talent__card-ribbon .material-symbols-outlined { font-size: 12px; } .vt-talent__card-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--vt-surface-high); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 8px; border: 2px solid rgba(173,198,255,0.18); } .vt-talent__card-avatar img, .vt-talent__card-avatar > * { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .vt-talent__card-name { font-family: var(--vt-font-display); font-weight: 700; font-size: 17px; color: var(--vt-on-surface); margin: 0; line-height: 1.25; } .vt-talent__card-role { margin: 0; font-size: 13px; color: var(--vt-secondary); font-weight: 600; } .vt-talent__card-meta { list-style: none; margin: 8px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 12px; color: var(--vt-on-surface-variant); } .vt-talent__card-meta li { display: inline-flex; align-items: center; gap: 4px; } .vt-talent__card-meta .material-symbols-outlined { font-size: 14px; opacity: .8; } .vt-talent__card-cta { margin-top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 9px 18px; background: rgba(173,198,255,0.10); border: 1px solid rgba(173,198,255,0.30); color: var(--vt-primary); border-radius: var(--vt-radius-full); font-size: 13px; font-weight: 700; text-decoration: none; transition: background 200ms ease, color 200ms ease, border-color 200ms ease, gap 200ms ease; } .vt-talent__card-cta:hover { background: var(--vt-primary); color: var(--vt-on-primary-container); gap: 8px; } .vt-talent__card-cta .material-symbols-outlined { font-size: 16px; } [dir="rtl"] .vt-talent__card-cta .material-symbols-outlined { transform: scaleX(-1); } /* ---------- Empty state ---------- */ .vt-talent__empty { background: rgba(23,31,51,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; padding: 48px 28px; text-align: center; color: var(--vt-on-surface-variant); } .vt-talent__empty .material-symbols-outlined { font-size: 56px; opacity: .4; margin-bottom: 10px; } .vt-talent__empty-title { font-family: var(--vt-font-display); font-size: 22px; font-weight: 700; color: var(--vt-on-surface); margin: 0 0 8px; } .vt-talent__empty-text { margin: 0 0 18px; font-size: 14px; } .vt-talent__empty-cta { display: inline-flex; align-items: center; gap: 6px; padding: 11px 22px; border-radius: 12px; background: var(--vt-primary); color: var(--vt-on-primary-container); font-weight: 700; font-size: 13px; text-decoration: none; transition: transform 180ms ease, box-shadow 200ms ease; } .vt-talent__empty-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(173,198,255,0.25); } /* ---------- Pagination ---------- */ .vt-talent__pagination { margin-top: 24px; } .vt-talent__pagination .pagination { display: inline-flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .vt-talent__pagination .page-item { display: inline-flex; } .vt-talent__pagination .page-link, .vt-talent__pagination .page-item > span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; background: rgba(23,31,51,0.6); border: 1px solid rgba(255,255,255,0.08); color: var(--vt-on-surface-variant); border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; transition: color 160ms ease, border-color 160ms ease, background 160ms ease; } .vt-talent__pagination .page-link:hover { color: var(--vt-primary); border-color: rgba(173,198,255,0.40); background: rgba(173,198,255,0.06); } .vt-talent__pagination .page-item.active .page-link { background: var(--vt-primary); color: var(--vt-on-primary-container); border-color: transparent; } .vt-talent__pagination .page-item.disabled .page-link, .vt-talent__pagination .page-item.disabled > span { opacity: .4; cursor: not-allowed; } .vt-talent__ad { margin-top: 26px; } /* ---------- Hire-me modal (dark themed) ---------- */ .vt-talent__modal .modal-content { background: var(--vt-surface-container); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; color: var(--vt-on-surface); padding: 28px 24px; text-align: center; } /* Bootstrap's default .btn-close ships an SVG-via-background-image that becomes nearly invisible on the dark surface (even with filter:invert). Replaced the markup with a proper button + Material icon — and we still defensively style the legacy class in case any cached partial renders. */ .vt-talent__modal-close, .vt-talent__modal .btn-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); background-image: none; /* defeat Bootstrap's SVG background */ border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; padding: 0; color: var(--vt-on-surface); cursor: pointer; opacity: 1; filter: none; transition: background 160ms ease, border-color 160ms ease, transform 200ms ease; z-index: 2; } .vt-talent__modal-close:hover, .vt-talent__modal .btn-close:hover { background: rgba(255,255,255,0.12); border-color: rgba(173,198,255,0.30); transform: rotate(90deg); } .vt-talent__modal-close:focus-visible, .vt-talent__modal .btn-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(173,198,255,0.30); } .vt-talent__modal-close .material-symbols-outlined { font-size: 18px; color: var(--vt-on-surface); line-height: 1; } [dir="rtl"] .vt-talent__modal-close:hover, [dir="rtl"] .vt-talent__modal .btn-close:hover { transform: rotate(-90deg); } @media (prefers-reduced-motion: reduce) { .vt-talent__modal-close, .vt-talent__modal .btn-close { transition: none; } .vt-talent__modal-close:hover, .vt-talent__modal .btn-close:hover { transform: none; } } .vt-talent__modal-icon { font-size: 36px; color: var(--vt-secondary); background: rgba(76,215,246,0.12); padding: 14px; border-radius: 14px; display: inline-flex; margin-bottom: 14px; } .vt-talent__modal-title { font-family: var(--vt-font-display); font-size: 18px; font-weight: 700; color: var(--vt-on-surface); margin: 0 0 8px; line-height: 1.3; } .vt-talent__modal-text { font-size: 14px; color: var(--vt-on-surface-variant); margin: 0 0 20px; } .vt-talent__modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .vt-talent__modal-actions .vt-btn { padding: 10px 22px; } @media (prefers-reduced-motion: reduce) { .vt-talent * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ===================================================================== 404 Page Not Found — .vt-404 (scoped restyle, ZERO backend impact) ===================================================================== */ .vt-404 { --vt-bg: #0b1326; --vt-surface-lowest: #060e20; --vt-surface-container: #171f33; --vt-surface-high: #222a3d; --vt-on-surface: #dae2fd; --vt-on-surface-variant: #c2c6d6; --vt-outline: #8c909f; --vt-outline-variant: #424754; --vt-primary: #adc6ff; --vt-primary-container: #4d8eff; --vt-on-primary: #000000; --vt-on-primary-container: #000000; --vt-secondary: #4cd7f6; --vt-tertiary: #c4a3ff; --vt-container-max: 1280px; --vt-margin-desktop: 32px; --vt-margin-mobile: 16px; --vt-font-display: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif; --vt-font-body: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; background: var(--vt-bg); color: var(--vt-on-surface); font-family: var(--vt-font-body); font-size: 16px; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } [dir="rtl"] .vt-404 { --vt-font-display: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif; --vt-font-body: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; } .vt-404__main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 60px 0 80px; position: relative; overflow: hidden; } /* Ambient background mesh */ .vt-404__main::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 380px at 18% 12%, rgba(77,142,255,0.16), transparent 60%), radial-gradient(700px 320px at 82% 88%, rgba(76,215,246,0.12), transparent 65%), radial-gradient(500px 240px at 50% 50%, rgba(196,163,255,0.08), transparent 70%); z-index: 0; pointer-events: none; } .vt-404__container { position: relative; z-index: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 0 var(--vt-margin-desktop); } @media (max-width: 768px) { .vt-404__main { padding: 32px 0 100px; } .vt-404__container { padding: 0 var(--vt-margin-mobile); } } .vt-404__card { background: rgba(23, 31, 51, 0.55); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 48px 36px 44px; text-align: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 24px 60px rgba(0,0,0,0.35); } @media (max-width: 540px) { .vt-404__card { padding: 36px 20px 32px; border-radius: 18px; } } /* Big 4 0 4 with a planet/compass between the digits */ .vt-404__glyph { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; } .vt-404__digit { font-family: var(--vt-font-display); font-weight: 800; font-size: clamp(72px, 14vw, 140px); line-height: 1; letter-spacing: -0.04em; background: linear-gradient(135deg, var(--vt-primary), var(--vt-secondary) 50%, var(--vt-tertiary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 8px 24px rgba(173,198,255,0.20)); } .vt-404__planet { position: relative; width: clamp(72px, 14vw, 130px); height: clamp(72px, 14vw, 130px); border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(173,198,255,0.65), rgba(76,215,246,0.35) 40%, rgba(23,31,51,0.95) 75%); display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 -10px 30px rgba(0,0,0,0.55), inset 0 8px 18px rgba(173,198,255,0.18), 0 12px 36px rgba(76,215,246,0.30); animation: vt404Float 6s ease-in-out infinite; } .vt-404__planet .material-symbols-outlined { font-size: clamp(36px, 6.5vw, 64px); color: rgba(255,255,255,0.92); filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45)); } /* Subtle ring around the planet */ .vt-404__planet::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(173,198,255,0.20); border-top-color: rgba(173,198,255,0.55); border-right-color: rgba(76,215,246,0.45); animation: vt404Spin 12s linear infinite; pointer-events: none; } @keyframes vt404Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes vt404Spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .vt-404__planet, .vt-404__planet::before { animation: none; } } .vt-404__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-secondary); background: rgba(76,215,246,0.10); border: 1px solid rgba(76,215,246,0.25); padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; } .vt-404__eyebrow .material-symbols-outlined { font-size: 16px; } .vt-404__title { font-family: var(--vt-font-display); font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; color: var(--vt-on-surface); margin: 0 0 10px; } .vt-404__lead { font-size: clamp(14px, 1.2vw, 16px); line-height: 1.6; color: var(--vt-on-surface-variant); margin: 0 auto 28px; max-width: 520px; } .vt-404__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 28px; } .vt-404__cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none; transition: transform 180ms ease, box-shadow 200ms ease; } .vt-404__cta:hover { transform: translateY(-2px); } .vt-404 a.vt-btn--primary.vt-404__cta:hover { box-shadow: 0 12px 28px rgba(173,198,255,0.25); } .vt-404__cta .material-symbols-outlined { font-size: 18px; } .vt-404__shortcuts { padding-top: 22px; border-top: 1px dashed rgba(255,255,255,0.08); } .vt-404__shortcuts-label { font-size: 12px; color: var(--vt-on-surface-variant); margin: 0 0 12px; letter-spacing: 0.02em; } .vt-404__chips { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .vt-404__chip { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; background: rgba(34,42,61,0.55); border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; color: var(--vt-on-surface-variant); text-decoration: none; font-size: 13px; font-weight: 600; transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 180ms ease; } .vt-404__chip:hover { color: var(--vt-primary); border-color: rgba(173,198,255,0.40); background: rgba(173,198,255,0.06); transform: translateY(-1px); } .vt-404__chip .material-symbols-outlined { font-size: 16px; color: var(--vt-secondary); } /* ========================================================================= GLOBAL SEEKER CART — nav trigger + slide-in right drawer Lives in velocity-talent.css so it works on every page that includes includes/vt/header.blade.php (home, seeker dashboard, my-profile, packages, my-favourite-jobs, search-jobs, blog, etc.). ========================================================================= */ .vt-nav__cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-inline-end: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; color: var(--vt-on-surface); cursor: pointer; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; } .vt-nav__cart:hover { background: rgba(173,198,255,0.10); border-color: rgba(173,198,255,0.30); } .vt-nav__cart:active { transform: scale(0.96); } .vt-nav__cart .material-symbols-outlined { font-size: 20px; } .vt-nav__cart-badge { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--vt-primary), var(--vt-secondary)); color: #0b1326; font-family: var(--vt-font-display, 'Plus Jakarta Sans', Inter, sans-serif); font-weight: 800; font-size: 10.5px; line-height: 1; border-radius: 999px; border: 2px solid var(--vt-bg, #0b1326); box-shadow: 0 4px 10px rgba(0,0,0,0.35); pointer-events: none; } /* Backdrop */ .vt-cart-backdrop { position: fixed; inset: 0; background: rgba(4,7,15,0.66); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; z-index: 1080; transition: opacity 280ms ease; } .vt-cart-backdrop.is-open { opacity: 1; } /* Drawer */ .vt-cart-drawer { position: fixed; top: 0; inset-inline-end: 0; bottom: 0; width: 420px; max-width: 92vw; z-index: 1090; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(23,31,51,0.98), rgba(11,19,38,0.98)); border-inline-start: 1px solid rgba(255,255,255,0.08); box-shadow: -20px 0 60px rgba(0,0,0,0.5); transform: translateX(100%); transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); color: var(--vt-on-surface); } [dir="rtl"] .vt-cart-drawer { transform: translateX(-100%); box-shadow: 20px 0 60px rgba(0,0,0,0.5); } .vt-cart-drawer.is-open { transform: translateX(0); } .vt-cart-drawer[aria-hidden="true"] { pointer-events: none; } .vt-cart-drawer.is-open[aria-hidden="false"] { pointer-events: auto; } body.vt-cart-locked { overflow: hidden; } .vt-cart-drawer__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(34,42,61,0.45); } .vt-cart-drawer__title { flex: 1; margin: 0; display: inline-flex; align-items: center; gap: 10px; font-family: var(--vt-font-display, 'Plus Jakarta Sans', Inter, sans-serif); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--vt-on-surface); } .vt-cart-drawer__title .material-symbols-outlined { font-size: 22px; color: var(--vt-secondary); } .vt-cart-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; color: var(--vt-on-surface); cursor: pointer; transition: background 160ms ease, transform 160ms ease; } .vt-cart-drawer__close:hover { background: rgba(255,255,255,0.10); transform: rotate(90deg); } .vt-cart-drawer__close .material-symbols-outlined { font-size: 18px; } .vt-cart-drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; } .vt-cart-drawer__body::-webkit-scrollbar { width: 8px; } .vt-cart-drawer__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 8px; } .vt-cart-drawer__body::-webkit-scrollbar-track { background: transparent; } .vt-cart-drawer__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 40px 16px; color: var(--vt-on-surface-variant, #c2c6d6); } .vt-cart-drawer__empty .material-symbols-outlined { font-size: 56px; opacity: 0.35; } .vt-cart-drawer__empty p { margin: 0; font-size: 13.5px; max-width: 28ch; } .vt-cart-drawer__empty .vt-btn { margin-top: 6px; } .vt-cart-drawer__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .vt-cart-drawer__item { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(34,42,61,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; transition: border-color 180ms ease, background 180ms ease; } .vt-cart-drawer__item:hover { border-color: rgba(173,198,255,0.20); } .vt-cart-drawer__item-icon { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--vt-secondary); background: rgba(76,215,246,0.10); border-radius: 10px; } .vt-cart-drawer__item-body { flex: 1; min-width: 0; } .vt-cart-drawer__item-title { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--vt-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vt-cart-drawer__item-meta { margin: 3px 0 0; font-size: 11.5px; color: var(--vt-on-surface-variant, #c2c6d6); } .vt-cart-drawer__item-price { flex: 0 0 auto; font-family: var(--vt-font-display, 'Plus Jakarta Sans', Inter, sans-serif); font-weight: 700; color: var(--vt-primary); white-space: nowrap; font-size: 13.5px; } .vt-cart-drawer__item-remove { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--vt-on-surface-variant, #c2c6d6); cursor: pointer; border-radius: 999px; transition: background 160ms ease, color 160ms ease; } .vt-cart-drawer__item-remove:hover { background: rgba(248,113,113,0.12); color: #f87171; } .vt-cart-drawer__item-remove .material-symbols-outlined { font-size: 18px; } .vt-cart-drawer__foot { padding: 16px 20px 20px; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(11,19,38,0.55); } .vt-cart-drawer__total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .vt-cart-drawer__total-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vt-on-surface-variant, #c2c6d6); } .vt-cart-drawer__total-value { font-family: var(--vt-font-display, 'Plus Jakarta Sans', Inter, sans-serif); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; background: linear-gradient(135deg, var(--vt-primary), var(--vt-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vt-cart-drawer__total-currency { font-size: 12px; margin-inline-end: 4px; color: var(--vt-on-surface-variant, #c2c6d6); -webkit-text-fill-color: var(--vt-on-surface-variant, #c2c6d6); } .vt-cart-drawer__actions { display: flex; gap: 10px; } .vt-cart-drawer__actions .vt-btn { flex: 1; justify-content: center; } @media (max-width: 480px) { .vt-cart-drawer { width: 100vw; max-width: 100vw; } } @media (prefers-reduced-motion: reduce) { .vt-cart-drawer, .vt-cart-backdrop, .vt-cart-drawer__close { transition: none; } } /* ============================================================ Toasts (window.vtToast) — global, used on every page that loads velocity-talent.css. Previously lived in velocity-talent-seeker.css which made employer pages render the toast as raw black HTML. Promoted here so add/edit job, admin previews, and any future page get the styled version without having to pull in the whole seeker stylesheet. ============================================================ */ .vt-toast-stack { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 12px; pointer-events: none; max-width: calc(100vw - 48px); } @media (max-width: 600px) { .vt-toast-stack { bottom: 16px; inset-inline-end: 16px; inset-inline-start: 16px; max-width: none; } } .vt-toast { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 12px; min-width: 320px; max-width: 440px; padding: 14px 16px 14px 18px; background: radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, 0.06), transparent 55%), linear-gradient(180deg, #1a2238 0%, #141b2d 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-inline-start: 4px solid transparent; border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); color: #f1f4ff; font-family: 'Inter', 'Noto Sans Arabic', system-ui, sans-serif; opacity: 0; transform: translateY(20px) scale(0.96); transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1), transform 280ms cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; } .vt-toast.is-shown { opacity: 1; transform: translateY(0) scale(1); } .vt-toast.is-hiding { opacity: 0; transform: translateY(-8px) scale(0.96); } .vt-toast__icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 22px !important; } .vt-toast__body { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #f1f4ff; letter-spacing: -0.005em; } .vt-toast__close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 0; border-radius: 8px; color: rgba(255, 255, 255, 0.6); cursor: pointer; flex-shrink: 0; transition: background 160ms ease, color 160ms ease; } .vt-toast__close:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .vt-toast__close .material-symbols-outlined { font-size: 16px !important; } .vt-toast__bar { position: absolute; bottom: 0; inset-inline-start: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.05); overflow: hidden; } .vt-toast__bar::after { content: ""; position: absolute; inset: 0; background: currentColor; transform-origin: left; animation: vtToastBar 4.5s linear forwards; } [dir="rtl"] .vt-toast__bar::after { transform-origin: right; } @keyframes vtToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } } .vt-toast--success { border-inline-start-color: #00cc99; color: #6bf3c8; } .vt-toast--success .vt-toast__icon { background: rgba(0, 204, 153, 0.18); color: #00cc99; box-shadow: 0 0 0 1px rgba(0, 204, 153, 0.30) inset; } .vt-toast--error { border-inline-start-color: #ff4d6d; color: #ff8a8a; } .vt-toast--error .vt-toast__icon { background: rgba(255, 99, 99, 0.18); color: #ff4d6d; box-shadow: 0 0 0 1px rgba(255, 99, 99, 0.30) inset; } .vt-toast--error .vt-toast__bar::after { animation-duration: 6s; } .vt-toast--warning { border-inline-start-color: #4cd7f6; color: #a8e6f5; } .vt-toast--warning .vt-toast__icon { background: rgba(76, 215, 246, 0.18); color: #4cd7f6; box-shadow: 0 0 0 1px rgba(76, 215, 246, 0.30) inset; } .vt-toast--warning .vt-toast__bar::after { animation-duration: 6s; } .vt-toast--info { border-inline-start-color: #4cd7f6; color: #adc6ff; } .vt-toast--info .vt-toast__icon { background: rgba(76, 215, 246, 0.18); color: #4cd7f6; box-shadow: 0 0 0 1px rgba(76, 215, 246, 0.30) inset; } @media (prefers-reduced-motion: reduce) { .vt-toast { transition: none; } .vt-toast__bar::after { animation: none; } }