/* ============================================================ Vinayak Jobs · Brand Theme Matches vinayakjob.com (teal #1f6471 + clean corporate light UI). Activated by class "vj-brand" on . Layered on top of Bootstrap 5 + existing site CSS — overrides only. ============================================================ */ :root.vj-brand, .vj-brand { /* brand palette (sampled from vinayakjob.com production CSS) */ --vj-primary: #1f6471; --vj-primary-hover: #2a8594; --vj-primary-dark: #1a5460; --vj-primary-soft: #e8f1f3; --vj-primary-softer: #f3f8f9; --vj-accent-navy: #060639; /* status colors (Tailwind-aligned, also used by their site) */ --vj-success: #16a34a; --vj-success-soft: #dcfce7; --vj-warning: #f59e0b; --vj-warning-soft: #fef3c7; --vj-danger: #dc2626; --vj-danger-soft: #fee2e2; --vj-info: #3b82f6; --vj-info-soft: #dbeafe; /* surfaces (light corporate) */ --vj-bg: #f9fafb; /* gray-50 — main canvas */ --vj-surface: #ffffff; /* cards, header */ --vj-surface-alt: #f3f4f6; /* subtle bands, table stripe */ --vj-border: #e5e7eb; /* gray-200 */ --vj-border-strong: #d1d5db;/* gray-300 */ /* text */ --vj-text: #111827; /* gray-900 */ --vj-text-body: #374151; /* gray-700 */ --vj-text-muted: #6b7280; /* gray-500 */ --vj-text-subtle: #9ca3af; /* gray-400 */ --vj-text-on-primary: #ffffff; /* shape & motion */ --vj-radius-pill: 9999px; --vj-radius-lg: 14px; --vj-radius-md: 10px; --vj-radius-sm: 6px; --vj-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --vj-shadow: 0 4px 14px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05); --vj-shadow-md: 0 10px 25px rgba(15, 23, 42, .08), 0 4px 10px rgba(15, 23, 42, .04); --vj-shadow-primary: 0 6px 18px rgba(31, 100, 113, .25); --vj-ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Page ---------- */ html.vj-brand, .vj-brand body { background: var(--vj-bg); color: var(--vj-text-body); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vj-brand h1, .vj-brand h2, .vj-brand h3, .vj-brand h4, .vj-brand h5, .vj-brand h6 { color: var(--vj-text); font-weight: 700; letter-spacing: -0.01em; } .vj-brand a { color: var(--vj-primary); text-decoration: none; } .vj-brand a:hover { color: var(--vj-primary-hover); text-decoration: underline; } .vj-brand .vj-container { width: 100%; max-width: 1500px; margin-inline: auto; padding-inline: clamp(1rem, 2.5vw, 2.25rem); } @media (min-width: 1800px) { .vj-brand .vj-container { max-width: 1680px; } } /* Match Bootstrap .container (used in topbar/footer) to the same wide canvas */ .vj-brand .vj-topbar .container, .vj-brand .vj-topbar .container-fluid, .vj-brand .vj-footer .container { max-width: 1500px; padding-inline: clamp(1rem, 2.5vw, 2.25rem); } @media (min-width: 1800px) { .vj-brand .vj-topbar .container, .vj-brand .vj-topbar .container-fluid, .vj-brand .vj-footer .container { max-width: 1680px; } } /* ---------- Header / Topbar ---------- */ .vj-brand .vj-topbar { background: var(--vj-surface); border-bottom: 1px solid var(--vj-border); box-shadow: var(--vj-shadow-sm); } .vj-brand .navbar { background: transparent !important; padding-block: .5rem; } .vj-brand .vj-brand-mark, .vj-brand .vj-brand { /* the wordmark */ color: var(--vj-primary) !important; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: .5rem; } .vj-brand .vj-brand span { color: var(--vj-text); font-weight: 700; } .vj-brand .navbar .nav-link { color: var(--vj-text-body) !important; font-weight: 500; padding: .5rem .85rem; border-radius: var(--vj-radius-md); transition: color .15s var(--vj-ease), background .15s var(--vj-ease); } .vj-brand .navbar .nav-link:hover, .vj-brand .navbar .nav-link:focus { color: var(--vj-primary) !important; background: var(--vj-primary-soft); text-decoration: none; } .vj-brand .navbar .nav-link.active { color: var(--vj-primary) !important; background: var(--vj-primary-soft); } .vj-brand .navbar-toggler { border: 1px solid var(--vj-border); color: var(--vj-text-body); } .vj-brand .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23374151' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } /* Pill chip — small teal label like the "Jobs 10k+" badge on the live site */ .vj-brand .vj-chip { display: inline-flex; align-items: center; background: var(--vj-primary); color: #fff; font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: var(--vj-radius-pill); margin-left: .35rem; box-shadow: var(--vj-shadow-sm); } /* Pill toggle (Job Seeker / Employer style) */ .vj-brand .vj-pill-toggle { display: inline-flex; background: var(--vj-surface-alt); padding: 4px; border-radius: var(--vj-radius-pill); gap: 2px; } .vj-brand .vj-pill-toggle .btn, .vj-brand .vj-pill-toggle a { border-radius: var(--vj-radius-pill); padding: .35rem .9rem; font-size: .85rem; font-weight: 600; color: var(--vj-text-body); background: transparent; border: 0; transition: all .2s var(--vj-ease); } .vj-brand .vj-pill-toggle .active, .vj-brand .vj-pill-toggle .btn.active { background: var(--vj-primary); color: #fff; box-shadow: var(--vj-shadow-sm); } /* Dropdowns */ .vj-brand .dropdown-menu { background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-md); box-shadow: var(--vj-shadow-md); padding: .35rem; } .vj-brand .dropdown-item { color: var(--vj-text-body); border-radius: var(--vj-radius-sm); padding: .5rem .75rem; font-weight: 500; } .vj-brand .dropdown-item:hover, .vj-brand .dropdown-item:focus { background: var(--vj-primary-soft); color: var(--vj-primary); } .vj-brand .dropdown-item.active, .vj-brand .dropdown-item:active { background: var(--vj-primary); color: #fff; } .vj-brand .dropdown-divider { border-top-color: var(--vj-border); } /* ---------- Cards ---------- */ .vj-brand .card, .vj-brand .vj-card { background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); box-shadow: var(--vj-shadow-sm); color: var(--vj-text-body); transition: box-shadow .2s var(--vj-ease), transform .2s var(--vj-ease), border-color .2s var(--vj-ease); } .vj-brand .card:hover, .vj-brand .vj-card:hover { box-shadow: var(--vj-shadow-md); border-color: var(--vj-border-strong); } .vj-brand .card-header, .vj-brand .card-footer { background: var(--vj-surface); border-color: var(--vj-border); color: var(--vj-text-body); } .vj-brand .card-title { color: var(--vj-text); font-weight: 700; } /* Featured / hero card variant */ .vj-brand .vj-card-feature { background: linear-gradient(135deg, var(--vj-primary) 0%, var(--vj-primary-hover) 100%); color: #fff; border: 0; box-shadow: var(--vj-shadow-primary); } .vj-brand .vj-card-feature .card-title, .vj-brand .vj-card-feature h1, .vj-brand .vj-card-feature h2 { color: #fff; } /* ---------- Buttons ---------- */ .vj-brand .btn { border-radius: var(--vj-radius-md); font-weight: 700; letter-spacing: .01em; padding: .5rem 1rem; transition: background .15s var(--vj-ease), border-color .15s var(--vj-ease), box-shadow .15s var(--vj-ease), transform .1s var(--vj-ease); } .vj-brand .btn:active { transform: translateY(1px); } .vj-brand .btn:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(31, 100, 113, .28); } .vj-brand .btn-primary { background: var(--vj-primary-dark); border-color: var(--vj-primary-dark); color: #fff; } .vj-brand .btn-primary:hover, .vj-brand .btn-primary:focus { background: var(--vj-primary); border-color: var(--vj-primary); box-shadow: 0 8px 18px rgba(31,100,113,.28); color: #fff; } .vj-brand .btn-primary:disabled, .vj-brand .btn-primary.disabled { background: var(--vj-primary); border-color: var(--vj-primary); opacity: .5; } .vj-brand .btn-outline-primary { color: var(--vj-primary); border-color: var(--vj-primary); background: #fff; } .vj-brand .btn-outline-primary:hover { background: var(--vj-primary); border-color: var(--vj-primary); color: #fff; } .vj-brand .btn-secondary { background: var(--vj-surface-alt); border-color: var(--vj-border); color: var(--vj-text-body); } .vj-brand .btn-secondary:hover { background: #e5e7eb; border-color: var(--vj-border-strong); color: var(--vj-text); } .vj-brand .btn-success { background: var(--vj-success); border-color: var(--vj-success); color: #fff; } .vj-brand .btn-warning { background: var(--vj-warning); border-color: var(--vj-warning); color: #fff; } .vj-brand .btn-danger { background: var(--vj-danger); border-color: var(--vj-danger); color: #fff; } .vj-brand .btn-link { color: var(--vj-primary); } /* Pill button (the live site uses these for CTAs) */ .vj-brand .btn-pill { border-radius: var(--vj-radius-pill); padding-inline: 1.4rem; } /* ---------- Forms ---------- */ .vj-brand .form-control, .vj-brand .form-select, .vj-brand textarea.form-control { background: var(--vj-surface); border: 1px solid var(--vj-border); color: var(--vj-text); border-radius: var(--vj-radius-md); padding: .55rem .75rem; transition: border-color .15s var(--vj-ease), box-shadow .15s var(--vj-ease); } .vj-brand .form-control::placeholder { color: var(--vj-text-subtle); } .vj-brand .form-control:focus, .vj-brand .form-select:focus { border-color: var(--vj-primary); box-shadow: 0 0 0 .2rem rgba(31, 100, 113, .15); color: var(--vj-text); } .vj-brand .form-label { color: var(--vj-text-body); font-weight: 600; font-size: .9rem; } .vj-brand .form-text { color: var(--vj-text-muted); } .vj-brand .input-group-text { background: var(--vj-surface-alt); border: 1px solid var(--vj-border); color: var(--vj-text-muted); } .vj-brand .form-check-input:checked { background-color: var(--vj-primary); border-color: var(--vj-primary); } /* Search bar (rounded pill — used in hero search inputs) */ .vj-brand .vj-search { display: flex; align-items: center; background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-pill); padding: .25rem .25rem .25rem 1rem; box-shadow: var(--vj-shadow); } .vj-brand .vj-search input { border: 0; outline: 0; flex: 1; background: transparent; padding: .55rem .5rem; } .vj-brand .vj-search .btn { border-radius: var(--vj-radius-pill); padding: .55rem 1.4rem; } /* ---------- Tables ---------- */ .vj-brand .table { color: var(--vj-text-body); --bs-table-bg: var(--vj-surface); --bs-table-striped-bg: var(--vj-surface-alt); --bs-table-hover-bg: var(--vj-primary-softer); --bs-table-border-color: var(--vj-border); border-radius: var(--vj-radius-md); overflow: hidden; } .vj-brand .table thead th { background: var(--vj-primary-softer); color: var(--vj-primary-dark); font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .07em; border-bottom: 1px solid var(--vj-border); } .vj-brand .table > :not(caption) > * > * { padding: .75rem .9rem; } /* ---------- Badges ---------- */ .vj-brand .badge { font-weight: 600; border-radius: var(--vj-radius-pill); padding: .35em .7em; font-size: .72rem; letter-spacing: .02em; } .vj-brand .badge.bg-primary { background: var(--vj-primary) !important; color: #fff; } .vj-brand .badge.bg-success { background: var(--vj-success-soft) !important; color: var(--vj-success); } .vj-brand .badge.bg-warning { background: var(--vj-warning-soft) !important; color: #92400e; } .vj-brand .badge.bg-danger { background: var(--vj-danger-soft) !important; color: var(--vj-danger); } .vj-brand .badge.bg-info { background: var(--vj-info-soft) !important; color: #1e40af; } .vj-brand .badge.bg-secondary { background: var(--vj-surface-alt) !important; color: var(--vj-text-body); border: 1px solid var(--vj-border); } /* Stat number (big metrics like 32.5K+) */ .vj-brand .vj-stat { font-size: 1.85rem; font-weight: 800; color: var(--vj-primary); line-height: 1.1; letter-spacing: -.02em; } .vj-brand .vj-stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--vj-text-muted); margin-top: .25rem; } /* KPI tile */ .vj-brand .vj-kpi { background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.1rem 1.25rem; box-shadow: var(--vj-shadow-sm); display: flex; flex-direction: column; gap: .25rem; transition: box-shadow .2s var(--vj-ease); } .vj-brand .vj-kpi:hover { box-shadow: var(--vj-shadow-md); } .vj-brand .vj-kpi .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--vj-text-muted); } .vj-brand .vj-kpi .value { font-size: 1.25rem; font-weight: 700; color: var(--vj-text); } .vj-brand .vj-kpi .trend.up { color: var(--vj-success); font-size: .8rem; } .vj-brand .vj-kpi .trend.down { color: var(--vj-danger); font-size: .8rem; } /* Section heading band */ .vj-brand .vj-section-title { font-size: 1.4rem; font-weight: 700; color: var(--vj-text); margin-bottom: 1rem; display: flex; align-items: center; gap: .65rem; } .vj-brand .vj-section-title::before { content: ""; width: 4px; height: 22px; background: var(--vj-primary); border-radius: 2px; } /* ---------- Alerts ---------- */ .vj-brand .alert { border-radius: var(--vj-radius-md); border: 1px solid transparent; } .vj-brand .alert-success { background: var(--vj-success-soft); color: #166534; border-color: #bbf7d0; } .vj-brand .alert-danger { background: var(--vj-danger-soft); color: #991b1b; border-color: #fecaca; } .vj-brand .alert-warning { background: var(--vj-warning-soft); color: #92400e; border-color: #fde68a; } .vj-brand .alert-info { background: var(--vj-info-soft); color: #1e40af; border-color: #bfdbfe; } /* ---------- Toasts ---------- */ .vj-brand .toast { background: var(--vj-surface); border: 1px solid var(--vj-border); box-shadow: var(--vj-shadow-md); color: var(--vj-text); border-radius: var(--vj-radius-md); } .vj-brand .toast-header { background: var(--vj-surface); color: var(--vj-text); border-bottom: 1px solid var(--vj-border); } /* ---------- Modals ---------- */ .vj-brand .modal-content { background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); box-shadow: var(--vj-shadow-md); } .vj-brand .modal-header, .vj-brand .modal-footer { border-color: var(--vj-border); } /* ---------- Footer (solid teal — matches live site) ---------- */ .vj-brand .vj-footer { background: var(--vj-primary) !important; color: rgba(255,255,255,.92); border-top: 0; padding-block: 2rem; } .vj-brand .vj-footer h5, .vj-brand .vj-footer h6, .vj-brand .vj-footer strong { color: #fff; } .vj-brand .vj-footer a { color: rgba(255,255,255,.85); } .vj-brand .vj-footer a:hover { color: #fff; text-decoration: underline; } /* ---------- Utility ---------- */ .vj-brand .text-primary { color: var(--vj-primary) !important; } .vj-brand .bg-primary { background-color: var(--vj-primary) !important; } .vj-brand .border-primary { border-color: var(--vj-primary) !important; } .vj-brand .vj-divider { height: 1px; background: var(--vj-border); margin-block: 1.25rem; } /* Scrollbar */ .vj-brand *::-webkit-scrollbar { width: 10px; height: 10px; } .vj-brand *::-webkit-scrollbar-track { background: var(--vj-surface-alt); } .vj-brand *::-webkit-scrollbar-thumb { background: var(--vj-border-strong); border-radius: 8px; } .vj-brand *::-webkit-scrollbar-thumb:hover { background: var(--vj-primary); } /* Selection */ .vj-brand ::selection { background: var(--vj-primary-soft); color: var(--vj-primary-dark); } /* ============================================================ Landing page (Home/Index) ============================================================ */ /* Hero band */ .vj-brand .vj-hero-band { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 90% -10%, rgba(31,100,113,.10), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(42,133,148,.10), transparent 65%), linear-gradient(180deg, #ffffff 0%, var(--vj-primary-softer) 100%); border-bottom: 1px solid var(--vj-border); } .vj-brand .vj-hero-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(31,100,113,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(31,100,113,.05) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%); pointer-events: none; } .vj-brand .vj-hero-band > .vj-container { position: relative; z-index: 1; } .vj-brand .vj-eyebrow { display: inline-block; background: #fff; color: var(--vj-primary); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-pill); padding: .35rem .85rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; box-shadow: var(--vj-shadow-sm); } .vj-brand .vj-hero-band > .vj-container { padding-block: clamp(2rem, 4vw, 3rem) !important; } .vj-brand .vj-hero-title { font-size: clamp(1.5rem, 2.4vw, 1.75rem); line-height: 1.06; color: var(--vj-text); font-weight: 800; letter-spacing: -.02em; margin-bottom: 0; } .vj-brand .vj-hero-sub { color: var(--vj-text-muted); font-size: 1rem; line-height: 1.5; max-width: 36rem; } .vj-brand .vj-grad-text { background: linear-gradient(120deg, var(--vj-primary) 0%, var(--vj-primary-hover) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Hero search (combined skill + location + button in a single pill) */ .vj-brand .vj-search-hero { display: flex; align-items: stretch; background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-pill); padding: 6px; box-shadow: 0 10px 30px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04); flex-wrap: wrap; } .vj-brand .vj-search-hero .vj-search-icon { display: flex; align-items: center; justify-content: center; color: var(--vj-text-muted); padding-left: .75rem; } .vj-brand .vj-search-hero .vj-search-icon svg { width: 18px; height: 18px; } .vj-brand .vj-search-hero .vj-search-input { flex: 1 1 200px; min-width: 0; border: 0; outline: 0; background: transparent; padding: .85rem .75rem; font-size: .95rem; color: var(--vj-text); } .vj-brand .vj-search-hero .vj-search-input::placeholder { color: var(--vj-text-subtle); } .vj-brand .vj-search-hero .vj-search-input-loc { flex: 0 1 200px; } .vj-brand .vj-search-hero .vj-search-divider { width: 1px; background: var(--vj-border); margin-block: .55rem; } .vj-brand .vj-search-hero .btn { white-space: nowrap; padding-inline: 1.4rem; } @media (max-width: 575.98px) { .vj-brand .vj-search-hero { border-radius: var(--vj-radius-lg); } .vj-brand .vj-search-hero .vj-search-divider { display: none; } .vj-brand .vj-search-hero .btn { width: 100%; margin-top: .35rem; } } .vj-brand .vj-quick-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } .vj-brand .vj-quick-tags-label { font-size: .85rem; color: var(--vj-text-muted); margin-right: .25rem; } .vj-brand .vj-tag { display: inline-block; background: #fff; color: var(--vj-text-body); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-pill); padding: .3rem .8rem; font-size: .8rem; font-weight: 500; text-decoration: none; transition: all .15s var(--vj-ease); } .vj-brand .vj-tag:hover { background: var(--vj-primary-soft); border-color: var(--vj-primary); color: var(--vj-primary); text-decoration: none; } .vj-brand .vj-cta-row { display: flex; gap: .75rem; flex-wrap: wrap; } .vj-brand .vj-cta-row .btn { display: inline-flex; align-items: center; gap: .4rem; } /* Hero side card with mini-stats */ .vj-brand .vj-hero-card { position: relative; background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); box-shadow: 0 20px 50px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .05); padding: 1.4rem 1.4rem 1.2rem; overflow: hidden; } .vj-brand .vj-hero-card-glow { position: absolute; top: -50px; right: -50px; width: 220px; height: 220px; background: radial-gradient(closest-side, rgba(31,100,113,.18), transparent); pointer-events: none; } .vj-brand .vj-hero-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .25rem; } .vj-brand .vj-hero-card-eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--vj-text-muted); font-weight: 700; } .vj-brand .vj-hero-card-title { font-weight: 700; color: var(--vj-text); font-size: 1.05rem; } .vj-brand .vj-pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: #16a34a; position: relative; box-shadow: 0 0 0 0 rgba(22,163,74,.6); animation: vjPulse 2s infinite; } @@keyframes vjPulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); } 70% { box-shadow: 0 0 0 12px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } } .vj-brand .vj-mini-stat { background: var(--vj-primary-softer); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-md); padding: .85rem .9rem; } .vj-brand .vj-mini-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--vj-primary); line-height: 1.1; letter-spacing: -.02em; } .vj-brand .vj-mini-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--vj-text-muted); margin-top: .15rem; font-weight: 600; } .vj-brand .vj-hero-card-foot { border-top: 1px dashed var(--vj-border); padding-top: .9rem; } .vj-brand .vj-hero-card-foot .vj-pill-toggle a { text-decoration: none; } /* Stats band (bigger numbers under the hero) */ .vj-brand .vj-stats-band { background: #fff; border-bottom: 1px solid var(--vj-border); padding-block: 2rem; } .vj-brand .vj-stat-tile { background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.1rem 1.25rem; box-shadow: var(--vj-shadow-sm); text-align: center; transition: transform .2s var(--vj-ease), box-shadow .2s var(--vj-ease); } .vj-brand .vj-stat-tile:hover { transform: translateY(-2px); box-shadow: var(--vj-shadow-md); } /* Generic content section — tighter vertical rhythm to avoid empty space */ .vj-brand .vj-section { padding-block: 2.25rem; } @media (min-width: 992px) { .vj-brand .vj-section { padding-block: 2.75rem; } } .vj-brand .vj-section-soft { background: var(--vj-surface-alt); } .vj-brand .vj-section + .vj-section { padding-top: 1.75rem; } /* Category card */ .vj-brand .vj-cat-card { display: flex; align-items: center; gap: .75rem; background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: .9rem 1rem; color: var(--vj-text-body); text-decoration: none; transition: all .2s var(--vj-ease); box-shadow: var(--vj-shadow-sm); } .vj-brand .vj-cat-card:hover { border-color: var(--vj-primary); color: var(--vj-text); text-decoration: none; transform: translateY(-2px); box-shadow: var(--vj-shadow-md); } .vj-brand .vj-cat-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--vj-radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--vj-primary-soft); color: var(--vj-primary); } .vj-brand .vj-cat-icon svg { width: 22px; height: 22px; } .vj-brand .vj-cat-meta { flex: 1; min-width: 0; } .vj-brand .vj-cat-title { font-weight: 700; color: var(--vj-text); font-size: .95rem; } .vj-brand .vj-cat-count { font-size: .78rem; color: var(--vj-text-muted); margin-top: 1px; } .vj-brand .vj-cat-arrow { color: var(--vj-text-subtle); transition: transform .2s var(--vj-ease), color .2s var(--vj-ease); } .vj-brand .vj-cat-arrow svg { width: 16px; height: 16px; } .vj-brand .vj-cat-card:hover .vj-cat-arrow { color: var(--vj-primary); transform: translateX(3px); } /* Job card */ .vj-brand .vj-job-card { display: flex; flex-direction: column; gap: .65rem; background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.1rem 1.1rem 1rem; color: var(--vj-text-body); text-decoration: none; height: 100%; transition: all .2s var(--vj-ease); box-shadow: var(--vj-shadow-sm); } .vj-brand .vj-job-card:hover { border-color: var(--vj-primary); color: var(--vj-text-body); text-decoration: none; transform: translateY(-3px); box-shadow: var(--vj-shadow-md); } .vj-brand .vj-job-card-head { display: flex; align-items: center; gap: .65rem; } .vj-brand .vj-job-logo { width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, var(--vj-primary), var(--vj-primary-hover)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; box-shadow: var(--vj-shadow-sm); flex: 0 0 auto; } .vj-brand .vj-job-org { min-width: 0; } .vj-brand .vj-job-org-name { font-weight: 700; color: var(--vj-text); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vj-brand .vj-job-org-loc { color: var(--vj-text-muted); font-size: .78rem; display: inline-flex; align-items: center; gap: .25rem; } .vj-brand .vj-job-title { font-size: 1.05rem; font-weight: 700; color: var(--vj-text); margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vj-brand .vj-job-chips { display: flex; flex-wrap: wrap; gap: .35rem; } .vj-brand .vj-chip-soft { display: inline-flex; align-items: center; background: var(--vj-surface-alt); color: var(--vj-text-body); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-pill); padding: .2rem .6rem; font-size: .72rem; font-weight: 600; } .vj-brand .vj-chip-soft-accent { background: var(--vj-primary-soft); color: var(--vj-primary-dark); border-color: rgba(31,100,113,.2); } .vj-brand .vj-job-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--vj-border); padding-top: .6rem; margin-top: auto; } .vj-brand .vj-time-ago { font-size: .75rem; color: var(--vj-text-muted); } .vj-brand .vj-job-cta { font-weight: 700; color: var(--vj-primary); font-size: .85rem; } /* Empty state */ .vj-brand .vj-empty { background: #fff; border: 1px dashed var(--vj-border); border-radius: var(--vj-radius-lg); padding: 2.5rem 1rem; text-align: center; color: var(--vj-text-muted); } .vj-brand .vj-empty-icon { width: 56px; height: 56px; margin: 0 auto .75rem; border-radius: 50%; background: var(--vj-primary-soft); color: var(--vj-primary); display: inline-flex; align-items: center; justify-content: center; } .vj-brand .vj-empty-icon svg { width: 28px; height: 28px; } /* How it works step */ .vj-brand .vj-step-card { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.4rem; height: 100%; box-shadow: var(--vj-shadow-sm); transition: box-shadow .2s var(--vj-ease), transform .2s var(--vj-ease); } .vj-brand .vj-step-card:hover { box-shadow: var(--vj-shadow-md); transform: translateY(-2px); } .vj-brand .vj-step-num { width: 38px; height: 38px; background: linear-gradient(135deg, var(--vj-primary), var(--vj-primary-hover)); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; margin-bottom: .85rem; box-shadow: var(--vj-shadow-primary); } .vj-brand .vj-step-card h3 { font-size: 1.05rem; color: var(--vj-text); margin-bottom: .35rem; } .vj-brand .vj-step-card p { color: var(--vj-text-muted); font-size: .9rem; margin: 0; } /* Company card */ .vj-brand .vj-company-card { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.1rem; text-align: center; box-shadow: var(--vj-shadow-sm); transition: all .2s var(--vj-ease); height: 100%; } .vj-brand .vj-company-card:hover { border-color: var(--vj-primary); transform: translateY(-2px); box-shadow: var(--vj-shadow-md); } .vj-brand .vj-company-logo { width: 56px; height: 56px; border-radius: var(--vj-radius-md); background: linear-gradient(135deg, var(--vj-primary-soft), #fff); color: var(--vj-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; margin: 0 auto .75rem; border: 1px solid var(--vj-border); } .vj-brand .vj-company-name { font-weight: 700; color: var(--vj-text); font-size: .95rem; margin-bottom: .15rem; } .vj-brand .vj-company-meta { font-size: .75rem; color: var(--vj-text-muted); margin-bottom: .5rem; } .vj-brand .vj-company-jobs { display: inline-block; background: var(--vj-primary-soft); color: var(--vj-primary-dark); font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: var(--vj-radius-pill); } /* CTA banner */ .vj-brand .vj-cta-banner { background: linear-gradient(135deg, var(--vj-primary) 0%, var(--vj-primary-dark) 100%); color: #fff; border-radius: var(--vj-radius-lg); padding: 2rem 2.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; box-shadow: var(--vj-shadow-md); position: relative; overflow: hidden; } .vj-brand .vj-cta-banner::before { content: ""; position: absolute; top: -100px; right: -80px; width: 360px; height: 360px; background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent); pointer-events: none; } .vj-brand .vj-cta-banner h2 { color: #fff; font-size: 1.55rem; margin-bottom: .35rem; } .vj-brand .vj-cta-banner p { color: rgba(255,255,255,.88); margin: 0; font-size: 1rem; } .vj-brand .vj-cta-banner-actions { display: flex; gap: .6rem; flex-wrap: wrap; position: relative; z-index: 1; } .vj-brand .vj-cta-banner .btn-outline-light { color: #fff; border-color: rgba(255,255,255,.6); } .vj-brand .vj-cta-banner .btn-outline-light:hover { background: #fff; color: var(--vj-primary-dark); } /* ============================================================ Landing v2 — premium cards, ticker, sparkline, locations, placements, testimonials, trust strip, urgency badges ============================================================ */ /* Trust strip */ .vj-brand .vj-trust { display: flex; align-items: center; gap: .85rem; } .vj-brand .vj-trust-avatars { display: inline-flex; } .vj-brand .vj-trust-avatars > span { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .8rem; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1); margin-left: -8px; } .vj-brand .vj-trust-avatars > span:first-child { margin-left: 0; } .vj-brand .vj-trust-more { background: var(--vj-surface-alt) !important; color: var(--vj-text-body) !important; font-size: .68rem !important; } .vj-brand .vj-trust-text { color: var(--vj-text-muted); font-size: .85rem; } .vj-brand .vj-trust-text strong { color: var(--vj-text); } /* Hero side card sparkline */ .vj-brand .vj-hero-spark { background: var(--vj-surface-alt); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-md); padding: .65rem .85rem; } .vj-brand .vj-hero-spark-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .15rem; } .vj-brand .vj-hero-spark-head .badge { font-size: .65rem; padding: .25em .55em; } /* Live ticker bar */ .vj-brand .vj-ticker { background: linear-gradient(90deg, #0f3a44 0%, #1f6471 50%, #2a8594 100%); color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); overflow: hidden; padding-block: .55rem; } .vj-brand .vj-ticker-label { display: inline-flex; align-items: center; gap: .35rem; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.18); border-radius: var(--vj-radius-pill); padding: .15rem .55rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; flex-shrink: 0; } .vj-brand .vj-ticker-label .vj-pulse-dot { width: 7px; height: 7px; } .vj-brand .vj-ticker-track { flex: 1; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent); } .vj-brand .vj-ticker-row { display: inline-flex; gap: 2.25rem; white-space: nowrap; animation: vjTickerScroll 55s linear infinite; } .vj-brand .vj-ticker:hover .vj-ticker-row { animation-play-state: paused; } @@keyframes vjTickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .vj-brand .vj-ticker-item { display: inline-flex; align-items: center; gap: .55rem; font-size: .85rem; color: rgba(255,255,255,.92); } .vj-brand .vj-ticker-item strong { color: #fff; font-weight: 700; } .vj-brand .vj-ticker-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: .65rem; line-height: 1; } .vj-brand .vj-tone-blue { background: rgba(59,130,246,.45) !important; } .vj-brand .vj-tone-green { background: rgba(34,197,94,.45) !important; color: #052e16; } .vj-brand .vj-ticker-time { background: rgba(0,0,0,.22); border-radius: var(--vj-radius-pill); padding: .1rem .45rem; font-size: .7rem; color: rgba(255,255,255,.85); margin-left: .25rem; } /* Stats tile (icon + value layout) */ .vj-brand .vj-stat-tile { display: flex; align-items: center; gap: .9rem; text-align: left; } .vj-brand .vj-stat-icon { width: 48px; height: 48px; border-radius: var(--vj-radius-md); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .vj-brand .vj-stat-icon svg { width: 22px; height: 22px; } .vj-brand .vj-stat-icon.vj-tone-cyan { background: #cffafe; color: #0e7490; } .vj-brand .vj-stat-icon.vj-tone-violet { background: #ede9fe; color: #6d28d9; } .vj-brand .vj-stat-icon.vj-tone-amber { background: #fef3c7; color: #b45309; } .vj-brand .vj-stat-icon.vj-tone-green { background: #dcfce7; color: #15803d; } /* Premium / featured job card */ .vj-brand .vj-job-card-premium { position: relative; background: linear-gradient(180deg, #fff 0%, var(--vj-primary-softer) 100%); border: 1px solid var(--vj-border-strong); box-shadow: 0 12px 30px rgba(31,100,113,.10), 0 2px 6px rgba(15,23,42,.04); } .vj-brand .vj-job-card-premium::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--vj-primary), var(--vj-primary-hover)); border-radius: var(--vj-radius-lg) var(--vj-radius-lg) 0 0; } .vj-brand .vj-premium-ribbon { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .15em; padding: .22rem .55rem; border-radius: var(--vj-radius-pill); box-shadow: 0 4px 10px rgba(239,68,68,.3); } .vj-brand .vj-job-skills { display: flex; flex-wrap: wrap; gap: .3rem; } .vj-brand .vj-skill-pill { display: inline-block; background: var(--vj-primary-soft); color: var(--vj-primary-dark); border: 1px solid rgba(31,100,113,.15); border-radius: var(--vj-radius-sm); padding: .15rem .5rem; font-size: .68rem; font-weight: 600; } .vj-brand .vj-skill-pill.vj-skill-more { background: var(--vj-surface-alt); color: var(--vj-text-muted); border-color: var(--vj-border); } .vj-brand .vj-salary-block { background: rgba(255,255,255,.6); border: 1px dashed var(--vj-border-strong); border-radius: var(--vj-radius-md); padding: .65rem .8rem; } .vj-brand .vj-salary-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; } .vj-brand .vj-salary-head strong { color: var(--vj-primary-dark); font-size: .95rem; } .vj-brand .vj-salary-bar { height: 6px; background: var(--vj-surface-alt); border-radius: 999px; overflow: hidden; border: 1px solid var(--vj-border); } .vj-brand .vj-salary-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--vj-primary), var(--vj-primary-hover)); border-radius: 999px; } .vj-brand .vj-salary-foot { margin-top: .35rem; } /* Urgent badge on regular job cards */ .vj-brand .vj-urgent { margin-left: auto; background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; border-radius: var(--vj-radius-pill); padding: .15rem .55rem; font-size: .62rem; font-weight: 800; letter-spacing: .12em; flex-shrink: 0; } /* Location card */ .vj-brand .vj-loc-card { display: flex; align-items: center; gap: .75rem; background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1rem 1.15rem; color: var(--vj-text-body); text-decoration: none; box-shadow: var(--vj-shadow-sm); transition: all .2s var(--vj-ease); } .vj-brand .vj-loc-card:hover { transform: translateY(-2px); border-color: var(--vj-primary); box-shadow: var(--vj-shadow-md); color: var(--vj-text); text-decoration: none; } .vj-brand .vj-loc-icon { width: 44px; height: 44px; border-radius: var(--vj-radius-md); background: linear-gradient(135deg, var(--vj-primary), var(--vj-primary-hover)); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .vj-brand .vj-loc-icon svg { width: 22px; height: 22px; } .vj-brand .vj-loc-city { font-weight: 800; color: var(--vj-text); font-size: 1rem; } .vj-brand .vj-loc-meta { font-size: .78rem; color: var(--vj-text-muted); } /* Placement card */ .vj-brand .vj-placement-card { position: relative; background: linear-gradient(180deg, #fff 0%, #f0fdf4 100%); border: 1px solid #bbf7d0; border-radius: var(--vj-radius-lg); padding: 1.4rem 1.1rem 1.1rem; text-align: center; box-shadow: 0 6px 18px rgba(34,197,94,.08), 0 2px 4px rgba(15,23,42,.03); height: 100%; transition: transform .2s var(--vj-ease), box-shadow .2s var(--vj-ease); } .vj-brand .vj-placement-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(34,197,94,.18); } .vj-brand .vj-placement-badge { position: absolute; top: 12px; right: 12px; background: #16a34a; color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .15em; padding: .2rem .5rem; border-radius: var(--vj-radius-pill); box-shadow: 0 4px 8px rgba(22,163,74,.3); } .vj-brand .vj-placement-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--vj-primary), var(--vj-primary-hover)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; margin: 0 auto .65rem; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(31,100,113,.25); } .vj-brand .vj-placement-name { font-weight: 800; color: var(--vj-text); font-size: 1.05rem; } .vj-brand .vj-placement-role { color: var(--vj-text-muted); font-size: .82rem; margin-bottom: .35rem; } .vj-brand .vj-placement-org { font-size: .85rem; margin-bottom: .35rem; } .vj-brand .vj-placement-org strong { color: var(--vj-primary-dark); } .vj-brand .vj-placement-ctc { display: inline-block; background: #dcfce7; color: #15803d; font-size: .78rem; font-weight: 700; padding: .2rem .65rem; border-radius: var(--vj-radius-pill); margin-top: .25rem; } .vj-brand .vj-placement-time { font-size: .72rem; color: var(--vj-text-subtle); margin-top: .55rem; } /* Testimonial / quote card */ .vj-brand .vj-quote-card { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.5rem 1.4rem 1.2rem; height: 100%; box-shadow: var(--vj-shadow-sm); position: relative; transition: box-shadow .2s var(--vj-ease), transform .2s var(--vj-ease); } .vj-brand .vj-quote-card:hover { box-shadow: var(--vj-shadow-md); transform: translateY(-2px); } .vj-brand .vj-quote-mark { position: absolute; top: -12px; left: 18px; width: 36px; height: 36px; background: var(--vj-primary); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 1.8rem; line-height: 1; box-shadow: 0 4px 10px rgba(31,100,113,.3); padding-bottom: 6px; } .vj-brand .vj-quote-card p { color: var(--vj-text-body); font-size: .92rem; line-height: 1.55; margin: 1rem 0 1.1rem; font-style: italic; } .vj-brand .vj-quote-author { display: flex; align-items: center; gap: .7rem; border-top: 1px dashed var(--vj-border); padding-top: .8rem; } .vj-brand .vj-quote-author strong { display: block; color: var(--vj-text); font-size: .9rem; } .vj-brand .vj-quote-author small { color: var(--vj-text-muted); font-size: .78rem; } .vj-brand .vj-quote-avatar { width: 44px; height: 44px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Top company variant */ .vj-brand .vj-company-jobs-alt { background: #ecfdf5 !important; color: #15803d !important; border: 1px solid #bbf7d0; } /* Job card head — allow urgent badge to push right */ .vj-brand .vj-job-card-head { gap: .65rem; } .vj-brand .vj-job-card-head > .vj-job-org { flex: 1; min-width: 0; } /* ============================================================ PUBLIC LAYOUT — top nav + clean marketing pages ============================================================ */ .vj-brand.vj-public, .vj-public body { background: #ffffff; } /* Top nav */ .vj-brand .vj-pub-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--vj-border); padding: .65rem 0; } .vj-brand .vj-pub-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--vj-text); font-weight: 700; font-size: 1.15rem; text-decoration: none; letter-spacing: -.01em; } .vj-brand .vj-pub-brand:hover { text-decoration: none; color: var(--vj-text); } .vj-brand .vj-pub-brand-mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--vj-primary), var(--vj-primary-hover)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 4px 10px rgba(31,100,113,.25); } .vj-brand .vj-pub-brand-text span { color: var(--vj-primary); } .vj-brand .vj-pub-links { margin-left: 1.25rem; display: flex; gap: .25rem; } .vj-brand .vj-pub-links a { color: var(--vj-text-body); text-decoration: none; font-weight: 500; font-size: .9rem; padding: .45rem .75rem; border-radius: var(--vj-radius-md); transition: background .15s var(--vj-ease), color .15s var(--vj-ease); } .vj-brand .vj-pub-links a:hover { background: var(--vj-primary-soft); color: var(--vj-primary); } .vj-brand .vj-pub-burger { background: transparent; border: 1px solid var(--vj-border); color: var(--vj-text-body); border-radius: var(--vj-radius-md); padding: .35rem .5rem; line-height: 0; } .vj-brand .vj-pub-link-mobile { display: block; color: var(--vj-text-body); text-decoration: none; padding: .55rem .75rem; border-radius: var(--vj-radius-md); font-weight: 500; font-size: .92rem; } .vj-brand .vj-pub-link-mobile:hover { background: var(--vj-primary-soft); color: var(--vj-primary); } .vj-brand .vj-pub-main { display: block; } /* Public footer (deep teal, redesigned) */ .vj-brand .vj-pub-foot { position: relative; background: linear-gradient(180deg, #17505c 0%, #0e3841 100%); color: rgba(255,255,255,.8); padding: 4rem 0 1.75rem; margin-top: 4rem; font-size: .925rem; } .vj-brand .vj-pub-foot::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #2a8594, #7fd4c1 45%, transparent 80%); opacity: .9; } .vj-brand .vj-pub-foot h6 { color: rgba(255,255,255,.55); font-size: .72rem; letter-spacing: .14em; margin-bottom: 1.1rem; text-transform: uppercase; font-weight: 700; } .vj-brand .vj-pub-foot h6::after { content: ""; display: block; width: 26px; height: 2px; margin-top: .5rem; border-radius: 2px; background: linear-gradient(90deg, #7fd4c1, transparent); } .vj-brand .vj-pub-foot a { color: rgba(255,255,255,.78); text-decoration: none; transition: color .15s ease; } .vj-brand .vj-pub-foot a:hover { color: #fff; text-decoration: none; } .vj-brand .vj-pub-foot .vj-foot-links li { margin-bottom: .1rem; } .vj-brand .vj-pub-foot .vj-foot-links a { display: inline-block; padding: .3rem 0; transition: color .15s ease, transform .15s ease; } .vj-brand .vj-pub-foot .vj-foot-links a:hover { transform: translateX(3px); color: #9fe3d3; } .vj-brand .vj-pub-foot .vj-foot-tagline { margin: .9rem 0 1.4rem; max-width: 30ch; line-height: 1.65; color: rgba(255,255,255,.7); } .vj-brand .vj-pub-foot .vj-foot-contact li { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .6rem; color: rgba(255,255,255,.72); } .vj-brand .vj-pub-foot .vj-foot-contact svg { width: 15px; height: 15px; min-width: 15px; margin-top: .22rem; color: #7fd4c1; } .vj-brand .vj-pub-foot .vj-foot-social { display: flex; gap: .6rem; margin-top: 1.4rem; } .vj-brand .vj-pub-foot .vj-foot-social a { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.85); transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease; } .vj-brand .vj-pub-foot .vj-foot-social a:hover { background: #7fd4c1; border-color: #7fd4c1; color: #0e3841; transform: translateY(-3px); } .vj-brand .vj-pub-foot .vj-foot-social svg { width: 17px; height: 17px; } .vj-brand .vj-pub-foot .vj-pub-brand, .vj-brand .vj-pub-foot .vj-pub-brand-text { color: #fff; } .vj-brand .vj-pub-foot .vj-pub-brand-text span { color: #7fd4c1; } .vj-brand .vj-pub-foot .vj-pub-brand-mark { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); box-shadow: none; } .vj-brand .vj-pub-foot .vj-foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; color: rgba(255,255,255,.55); } .vj-brand .vj-pub-foot .vj-foot-bottom-links { display: flex; gap: .6rem; align-items: center; color: rgba(255,255,255,.4); } .vj-brand .vj-pub-foot .vj-foot-bottom-links a { color: rgba(255,255,255,.6); } .vj-brand .vj-pub-foot .vj-foot-bottom-links a:hover { color: #9fe3d3; } .vj-brand .vj-pub-foot .vj-foot-made { display: flex; align-items: center; gap: .4rem; } @media (max-width: 991.98px) { .vj-brand .vj-pub-foot { padding: 3rem 0 1.5rem; } .vj-brand .vj-pub-foot .vj-foot-bottom { justify-content: center; text-align: center; } } .vj-brand .vj-pub-foot-rule { border: 0; height: 1px; background: rgba(255,255,255,.18); margin: 2rem 0 1.25rem; } /* ============================================================ CLEAN HERO + sections ============================================================ */ .vj-brand .vj-hero-clean { background: radial-gradient(700px 500px at 90% -20%, rgba(31,100,113,.08), transparent 60%), radial-gradient(600px 500px at -10% 110%, rgba(42,133,148,.08), transparent 60%), #ffffff; padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 5vw, 4.5rem); border-bottom: 1px solid var(--vj-border); position: relative; overflow: hidden; } .vj-brand .vj-eyebrow-clean { display: inline-block; background: var(--vj-primary-soft); color: var(--vj-primary-dark); border: 1px solid rgba(31,100,113,.18); border-radius: var(--vj-radius-pill); padding: .35rem .85rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 1.25rem; } .vj-brand .vj-hero-clean-title { font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.04; letter-spacing: -.025em; color: var(--vj-text); font-weight: 800; margin-bottom: 1rem; } .vj-brand .vj-hero-clean-sub { color: var(--vj-text-muted); font-size: clamp(1rem, 1.1vw, 1.1rem); line-height: 1.6; max-width: 36rem; margin-bottom: 0; } /* Hero visual (right side) */ .vj-brand .vj-hero-visual { position: relative; aspect-ratio: 1 / 1; max-width: 460px; margin-left: auto; } .vj-brand .vj-hero-visual-blob { position: absolute; inset: 8% 4% 8% 4%; background: radial-gradient(closest-side, rgba(31,100,113,.18), rgba(31,100,113,.04) 60%, transparent), radial-gradient(closest-side at 70% 30%, rgba(124,92,255,.15), transparent 65%); border-radius: 40% 60% 55% 45% / 45% 50% 50% 55%; filter: blur(8px); animation: vjBlob 14s var(--vj-ease) infinite alternate; } @@keyframes vjBlob { 0% { border-radius: 40% 60% 55% 45% / 45% 50% 50% 55%; } 100% { border-radius: 55% 45% 40% 60% / 50% 60% 40% 50%; } } .vj-brand .vj-hero-visual-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(31,100,113,.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(31,100,113,.08) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 35%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 35%, transparent 80%); pointer-events: none; } .vj-brand .vj-hero-orbit { position: absolute; top: 50%; left: 50%; width: 60%; height: 60%; transform: translate(-50%, -50%); border: 2px dashed rgba(31,100,113,.18); border-radius: 50%; animation: vjOrbit 30s linear infinite; } @@keyframes vjOrbit { to { transform: translate(-50%, -50%) rotate(360deg); } } .vj-brand .vj-hero-stat-card { position: absolute; background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: .85rem 1rem; display: flex; align-items: center; gap: .75rem; box-shadow: 0 14px 30px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.04); min-width: 175px; animation: vjFloat 7s var(--vj-ease) infinite; } .vj-brand .vj-hero-stat-card .icon { width: 38px; height: 38px; border-radius: var(--vj-radius-md); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .vj-brand .vj-hero-stat-card .icon svg { width: 18px; height: 18px; } .vj-brand .vj-hero-stat-card .icon.vj-tone-cyan { background: #cffafe; color: #0e7490; } .vj-brand .vj-hero-stat-card .icon.vj-tone-violet { background: #ede9fe; color: #6d28d9; } .vj-brand .vj-hero-stat-card .icon.vj-tone-green { background: #dcfce7; color: #15803d; } .vj-brand .vj-hero-stat-card .value { font-size: 1.25rem; font-weight: 800; color: var(--vj-text); line-height: 1.1; letter-spacing: -.02em; } .vj-brand .vj-hero-stat-card .label { font-size: .72rem; color: var(--vj-text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } .vj-brand .vj-hero-stat-card-a { top: 8%; left: -2%; animation-delay: 0s; } .vj-brand .vj-hero-stat-card-b { top: 44%; right: -4%; animation-delay: 1.2s; } .vj-brand .vj-hero-stat-card-c { bottom: 6%; left: 12%; animation-delay: 2.4s; } @@keyframes vjFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (max-width: 991.98px) { .vj-brand .vj-hero-visual { display: none; } } /* Clean section base */ .vj-brand .vj-clean-section { padding: clamp(2.5rem, 5vw, 4rem) 0; } .vj-brand .vj-clean-section-tight { padding-block: clamp(1.5rem, 3vw, 2.25rem); } .vj-brand .vj-clean-section-soft { background: #f7fafb; } .vj-brand .vj-clean-head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; } .vj-brand .vj-clean-head h2 { font-size: clamp(1.4rem, 2vw, 1.85rem); color: var(--vj-text); margin-bottom: .25rem; font-weight: 800; letter-spacing: -.015em; } .vj-brand .vj-clean-head p { color: var(--vj-text-muted); margin: 0; font-size: .92rem; } .vj-brand .vj-clean-link { color: var(--vj-primary); text-decoration: none; font-weight: 700; font-size: .9rem; } .vj-brand .vj-clean-link:hover { color: var(--vj-primary-hover); text-decoration: underline; } /* Stat tiles */ .vj-brand .vj-clean-stat { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.1rem 1.25rem; text-align: left; box-shadow: var(--vj-shadow-sm); transition: transform .2s var(--vj-ease), box-shadow .2s var(--vj-ease); position: relative; overflow: hidden; } .vj-brand .vj-clean-stat:hover { transform: translateY(-2px); box-shadow: var(--vj-shadow-md); } .vj-brand .vj-clean-stat .icon { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .65rem; } .vj-brand .vj-clean-stat .icon svg { width: 20px; height: 20px; } .vj-brand .vj-clean-stat .icon.vj-tone-cyan { background: #cffafe; color: #0e7490; } .vj-brand .vj-clean-stat .icon.vj-tone-violet { background: #ede9fe; color: #6d28d9; } .vj-brand .vj-clean-stat .icon.vj-tone-amber { background: #fef3c7; color: #b45309; } .vj-brand .vj-clean-stat .icon.vj-tone-green { background: #dcfce7; color: #15803d; } .vj-brand .vj-clean-stat .value { font-size: 1.85rem; font-weight: 800; color: var(--vj-text); line-height: 1.1; letter-spacing: -.02em; } .vj-brand .vj-clean-stat .label { font-size: .78rem; color: var(--vj-text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-top: .15rem; } /* Clean job card */ .vj-brand .vj-clean-job { display: flex; flex-direction: column; gap: .65rem; background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.15rem 1.15rem 1rem; color: var(--vj-text-body); text-decoration: none; height: 100%; transition: all .2s var(--vj-ease); box-shadow: var(--vj-shadow-sm); } .vj-brand .vj-clean-job:hover { transform: translateY(-3px); border-color: var(--vj-primary); box-shadow: var(--vj-shadow-md); color: var(--vj-text-body); text-decoration: none; } .vj-brand .vj-clean-job .head { display: flex; align-items: center; gap: .65rem; } .vj-brand .vj-clean-job .logo { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--vj-primary), var(--vj-primary-hover)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex-shrink: 0; box-shadow: var(--vj-shadow-sm); } .vj-brand .vj-clean-job .org { min-width: 0; flex: 1; } .vj-brand .vj-clean-job .org-name { font-weight: 700; color: var(--vj-text); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vj-brand .vj-clean-job .org-meta { font-size: .78rem; color: var(--vj-text-muted); } .vj-brand .vj-clean-job .urgent { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; border-radius: var(--vj-radius-pill); padding: .15rem .55rem; font-size: .62rem; font-weight: 800; letter-spacing: .12em; flex-shrink: 0; } .vj-brand .vj-clean-job .title { font-size: 1.05rem; font-weight: 700; color: var(--vj-text); margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vj-brand .vj-clean-job .chips { display: flex; flex-wrap: wrap; gap: .3rem; } .vj-brand .vj-clean-job .skill { display: inline-block; background: var(--vj-primary-soft); color: var(--vj-primary-dark); border: 1px solid rgba(31,100,113,.15); border-radius: var(--vj-radius-sm); padding: .15rem .5rem; font-size: .68rem; font-weight: 600; } .vj-brand .vj-clean-job .skill.skill-more { background: var(--vj-surface-alt); color: var(--vj-text-muted); border-color: var(--vj-border); } .vj-brand .vj-clean-job .foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--vj-border); padding-top: .65rem; } .vj-brand .vj-clean-job .ctc { font-weight: 800; color: var(--vj-primary-dark); font-size: 1rem; letter-spacing: -.01em; display: flex; align-items: baseline; gap: .25rem; } .vj-brand .vj-clean-job .ctc small { font-weight: 500; color: var(--vj-text-muted); font-size: .72rem; } .vj-brand .vj-clean-job .cta { color: var(--vj-primary); font-weight: 700; font-size: .9rem; } .vj-brand .vj-clean-job .time { font-size: .72rem; color: var(--vj-text-subtle); margin-top: -.15rem; } /* Clean category tile */ .vj-brand .vj-clean-cat { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.1rem 1.15rem; color: var(--vj-text-body); text-decoration: none; transition: all .2s var(--vj-ease); box-shadow: var(--vj-shadow-sm); height: 100%; } .vj-brand .vj-clean-cat:hover { transform: translateY(-2px); border-color: var(--vj-primary); color: var(--vj-text); box-shadow: var(--vj-shadow-md); text-decoration: none; } .vj-brand .vj-clean-cat .ico { width: 44px; height: 44px; border-radius: 10px; background: var(--vj-primary-soft); color: var(--vj-primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: .35rem; } .vj-brand .vj-clean-cat .ico svg { width: 22px; height: 22px; } .vj-brand .vj-clean-cat .name { font-weight: 700; color: var(--vj-text); font-size: .98rem; } .vj-brand .vj-clean-cat .count { font-size: .78rem; color: var(--vj-text-muted); } /* Clean company card */ .vj-brand .vj-clean-company { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.25rem 1rem; text-align: center; box-shadow: var(--vj-shadow-sm); transition: all .2s var(--vj-ease); height: 100%; display: flex; flex-direction: column; align-items: center; gap: .15rem; } .vj-brand .vj-clean-company:hover { transform: translateY(-2px); border-color: var(--vj-primary); box-shadow: var(--vj-shadow-md); } .vj-brand .vj-clean-company .logo { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--vj-primary-soft), #ffffff); color: var(--vj-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; margin-bottom: .65rem; border: 1px solid var(--vj-border); } .vj-brand .vj-clean-company .name { font-weight: 700; color: var(--vj-text); font-size: .95rem; } .vj-brand .vj-clean-company .meta { font-size: .75rem; color: var(--vj-text-muted); } .vj-brand .vj-clean-company .badge { background: var(--vj-primary-soft); color: var(--vj-primary-dark); font-size: .7rem; font-weight: 700; padding: .25em .65em; border-radius: var(--vj-radius-pill); margin-top: .65rem; border: 1px solid rgba(31,100,113,.15); } /* Clean step card */ .vj-brand .vj-clean-step { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.5rem 1.4rem; height: 100%; box-shadow: var(--vj-shadow-sm); transition: box-shadow .2s var(--vj-ease), transform .2s var(--vj-ease); } .vj-brand .vj-clean-step:hover { box-shadow: var(--vj-shadow-md); transform: translateY(-2px); } .vj-brand .vj-clean-step .num { width: 40px; height: 40px; background: linear-gradient(135deg, var(--vj-primary), var(--vj-primary-hover)); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; margin-bottom: .85rem; box-shadow: var(--vj-shadow-primary); } .vj-brand .vj-clean-step h3 { font-size: 1.05rem; color: var(--vj-text); margin-bottom: .35rem; font-weight: 700; } .vj-brand .vj-clean-step p { color: var(--vj-text-muted); font-size: .92rem; margin: 0; line-height: 1.55; } /* Clean CTA */ .vj-brand .vj-clean-cta { background: linear-gradient(135deg, var(--vj-primary) 0%, var(--vj-primary-dark) 100%); color: #fff; border-radius: var(--vj-radius-lg); padding: 2.5rem 2.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; position: relative; overflow: hidden; box-shadow: var(--vj-shadow-md); } .vj-brand .vj-clean-cta::before { content: ""; position: absolute; top: -100px; right: -80px; width: 360px; height: 360px; background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent); } .vj-brand .vj-clean-cta h2 { color: #fff; font-size: 1.55rem; margin-bottom: .35rem; font-weight: 800; } .vj-brand .vj-clean-cta p { color: rgba(255,255,255,.88); margin: 0; font-size: 1rem; } .vj-brand .vj-clean-cta .actions { display: flex; gap: .55rem; flex-wrap: wrap; position: relative; z-index: 1; } .vj-brand .vj-clean-cta .btn-outline-light { color: #fff; border-color: rgba(255,255,255,.55); } .vj-brand .vj-clean-cta .btn-outline-light:hover { background: #fff; color: var(--vj-primary-dark); } /* ============================================================ UNIVERSAL PAGE SHELL — used inside the sidebar layout to give every internal page the same chrome: title band, body, cards. Wrap any page content in:
... ============================================================ */ .vj-brand .vj-page { padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2.25rem) 3rem; max-width: 1500px; margin-inline: auto; width: 100%; } @media (min-width: 1800px) { .vj-brand .vj-page { max-width: 1680px; } } .vj-brand .vj-page-head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--vj-border); } .vj-brand .vj-page-head h1, .vj-brand .vj-page-title { font-size: 1.571rem; color: var(--vj-text); font-weight: 700; letter-spacing: -.015em; margin: 0; } .vj-brand .vj-page-sub { color: var(--vj-text-muted); font-size: .92rem; margin: .25rem 0 0; } .vj-brand .vj-page-actions { display: flex; gap: .5rem; flex-wrap: wrap; } /* Breadcrumb polish (pages that use Bootstrap .breadcrumb) */ .vj-brand .breadcrumb { background: transparent; padding: 0; margin-bottom: .35rem; font-size: .82rem; } .vj-brand .breadcrumb-item, .vj-brand .breadcrumb-item.active { color: var(--vj-text-muted); } .vj-brand .breadcrumb-item a { color: var(--vj-primary); text-decoration: none; } .vj-brand .breadcrumb-item a:hover { text-decoration: underline; } .vj-brand .breadcrumb-item + .breadcrumb-item::before { color: var(--vj-text-subtle); } /* ============================================================ GLOBAL POLISH — applies automatically to every existing view that uses Bootstrap classes. No markup changes required. ============================================================ */ /* Default content padding inside the sidebar shell */ .vj-brand .vj-content > .container, .vj-brand .vj-content > .container-fluid { padding-top: 1rem; padding-bottom: 2rem; max-width: 1500px; } /* Page H1/H2 inside content */ .vj-brand .vj-content h1, .vj-brand .vj-content h2, .vj-brand .vj-content h3 { color: var(--vj-text); } /* Card polish — already styled but ensure padding is generous on dashboards */ .vj-brand .card-body { padding: 1.1rem 1.25rem; } .vj-brand .card.h-100 { display: flex; flex-direction: column; } /* Stat-tile-like cards (used in admin dashboards): give them tone */ .vj-brand .vj-content .card .display-1, .vj-brand .vj-content .card .display-2, .vj-brand .vj-content .card .display-3, .vj-brand .vj-content .card .display-4, .vj-brand .vj-content .card .display-5, .vj-brand .vj-content .card .display-6, .vj-brand .vj-content .card .h1, .vj-brand .vj-content .card .h2, .vj-brand .vj-content .card .h3 { color: var(--vj-primary-dark); font-weight: 800; } /* Group-of-stats look on dashboards */ .vj-brand .vj-admin-stat, .vj-brand .vj-stat-card { border-radius: var(--vj-radius-lg) !important; border: 1px solid var(--vj-border) !important; box-shadow: var(--vj-shadow-sm) !important; transition: transform .2s var(--vj-ease), box-shadow .2s var(--vj-ease); } .vj-brand .vj-admin-stat:hover, .vj-brand .vj-stat-card:hover { transform: translateY(-2px); box-shadow: var(--vj-shadow-md) !important; } /* Form controls — ensure consistent radius + focus everywhere */ .vj-brand .vj-content .form-control, .vj-brand .vj-content .form-select { border-radius: var(--vj-radius-md); } .vj-brand .vj-content .form-control-lg, .vj-brand .vj-content .form-select-lg { border-radius: var(--vj-radius-md); padding: .65rem .85rem; } /* Button polish — older custom classes still around */ .vj-brand .btn-vj-primary { background: var(--vj-primary); border-color: var(--vj-primary); color: #fff !important; border-radius: var(--vj-radius-md); font-weight: 600; } .vj-brand .btn-vj-primary:hover, .vj-brand .btn-vj-primary:focus { background: var(--vj-primary-hover); border-color: var(--vj-primary-hover); color: #fff !important; box-shadow: var(--vj-shadow-primary); } .vj-brand .btn-vj-outline { background: transparent; border: 1px solid var(--vj-primary); color: var(--vj-primary) !important; border-radius: var(--vj-radius-md); font-weight: 600; } .vj-brand .btn-vj-outline:hover { background: var(--vj-primary); color: #fff !important; } /* Toolbar / search bands (older "vj-jobs-toolbar" class on Jobs pages) */ .vj-brand .vj-jobs-toolbar { background: linear-gradient(135deg, var(--vj-primary) 0%, var(--vj-primary-dark) 100%) !important; color: #fff; border-bottom: 1px solid var(--vj-border); } .vj-brand .vj-jobs-toolbar .breadcrumb-item, .vj-brand .vj-jobs-toolbar .breadcrumb-item a { color: rgba(255,255,255,.85); } .vj-brand .vj-jobs-toolbar .breadcrumb-item.active, .vj-brand .vj-jobs-toolbar .breadcrumb-item a:hover { color: #fff; } .vj-brand .vj-jobs-toolbar .form-label { color: rgba(255,255,255,.85) !important; } .vj-brand .vj-jobs-toolbar .form-control, .vj-brand .vj-jobs-toolbar .vj-search-input { background: #fff; border-color: transparent; } /* Old job-card / salary / priority pill polish (used by Jobs/Index legacy) */ .vj-brand .vj-job-title { color: var(--vj-text) !important; font-weight: 700; } .vj-brand .vj-job-title:hover { color: var(--vj-primary) !important; } .vj-brand .vj-salary { color: var(--vj-primary-dark); font-weight: 700; } .vj-brand .vj-priority-high { background: #fef2f2 !important; color: #b91c1c !important; border: 1px solid #fecaca !important; } .vj-brand .vj-priority-normal { background: var(--vj-primary-soft) !important; color: var(--vj-primary-dark) !important; border: 1px solid rgba(31,100,113,.18) !important; } .vj-brand .vj-priority-low { background: var(--vj-surface-alt) !important; color: var(--vj-text-muted) !important; border: 1px solid var(--vj-border) !important; } /* Pagination polish */ .vj-brand .pagination .page-link { color: var(--vj-text-body); border-color: var(--vj-border); border-radius: var(--vj-radius-sm); margin: 0 2px; font-weight: 600; } .vj-brand .pagination .page-link:hover { background: var(--vj-primary-soft); color: var(--vj-primary); border-color: var(--vj-primary); } .vj-brand .pagination .page-item.active .page-link { background: var(--vj-primary); border-color: var(--vj-primary); color: #fff; } .vj-brand .pagination .page-item.disabled .page-link { color: var(--vj-text-subtle); background: transparent; } /* List group polish */ .vj-brand .list-group-item { border-color: var(--vj-border); } .vj-brand .list-group-item-action:hover { background: var(--vj-primary-softer); color: var(--vj-primary); } /* Tabs polish */ .vj-brand .nav-tabs { border-bottom: 1px solid var(--vj-border); } .vj-brand .nav-tabs .nav-link { border: 0; color: var(--vj-text-muted); font-weight: 600; padding: .65rem 1rem; border-bottom: 2px solid transparent; border-radius: 0; } .vj-brand .nav-tabs .nav-link:hover { color: var(--vj-primary); border-color: transparent transparent var(--vj-primary-soft); } .vj-brand .nav-tabs .nav-link.active { color: var(--vj-primary); background: transparent; border-color: transparent transparent var(--vj-primary); } /* Generic empty state inside admin/internal pages */ .vj-brand .vj-content .alert-light { background: var(--vj-surface-alt); border: 1px dashed var(--vj-border); color: var(--vj-text-muted); } /* --- _LoginLayout / _RegisterLayout polish: keep their teal but match radius --- */ .vj-brand .vj-reg-form-card, .vj-brand .vj-reg-sidebar { border-radius: var(--vj-radius-lg) !important; } /* ============================================================ Jobs listing / details — public-layout band + detail card ============================================================ */ .vj-brand .vj-jobs-search-band { background: radial-gradient(700px 400px at 100% -20%, rgba(31,100,113,.10), transparent 60%), linear-gradient(180deg, var(--vj-primary-softer) 0%, #ffffff 100%); border-bottom: 1px solid var(--vj-border); padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(1.75rem, 3vw, 2.5rem); } .vj-brand .vj-jobs-search-band-slim { padding: 1rem 0 .85rem; background: #fff; } .vj-brand .vj-jobs-search-band-head { margin-bottom: 1.25rem; max-width: 700px; } .vj-brand .vj-jobs-search-band-head h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--vj-text); letter-spacing: -.02em; margin-bottom: .35rem; } .vj-brand .vj-jobs-search-band-head p { color: var(--vj-text-muted); margin: 0; } /* Detail card (Jobs/Details, Apply, Privacy) */ .vj-brand .vj-detail-card { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.5rem 1.5rem; box-shadow: var(--vj-shadow-sm); } .vj-brand .vj-detail-head { display: flex; gap: 1rem; align-items: flex-start; } .vj-brand .vj-detail-logo { width: 60px; height: 60px; border-radius: 14px; background: linear-gradient(135deg, var(--vj-primary), var(--vj-primary-hover)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.6rem; box-shadow: var(--vj-shadow-sm); flex-shrink: 0; } .vj-brand .vj-detail-meta { flex: 1; min-width: 0; } .vj-brand .vj-detail-org { font-weight: 700; color: var(--vj-primary-dark); font-size: .95rem; margin-bottom: .25rem; } .vj-brand .vj-detail-title { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; color: var(--vj-text); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .5rem; } .vj-brand .vj-detail-sub { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .vj-brand .vj-detail-sub .urgent { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; border-radius: var(--vj-radius-pill); padding: .15rem .55rem; font-size: .62rem; font-weight: 800; letter-spacing: .12em; } .vj-brand .vj-detail-aux { color: var(--vj-text-muted); font-size: .8rem; margin-top: .55rem; } .vj-brand .vj-detail-section-title { font-size: 1.05rem; font-weight: 700; color: var(--vj-text); margin: 0 0 .5rem; } .vj-brand .vj-detail-body { white-space: pre-wrap; color: var(--vj-text-body); line-height: 1.65; font-size: .95rem; } .vj-brand .vj-detail-callout { background: var(--vj-primary-soft); border: 1px solid rgba(31,100,113,.18); border-left: 4px solid var(--vj-primary); border-radius: var(--vj-radius-md); padding: .85rem 1.1rem; color: var(--vj-primary-dark); } /* Aside (apply box) */ .vj-brand .vj-detail-aside { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.4rem 1.4rem 1.25rem; box-shadow: var(--vj-shadow-sm); } .vj-brand .vj-sticky-aside { position: sticky; top: 80px; } .vj-brand .vj-detail-aside-head { margin-bottom: 1rem; } .vj-brand .vj-detail-aside-eyebrow { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--vj-text-muted); } .vj-brand .vj-detail-aside-ctc { font-size: 1.65rem; font-weight: 800; color: var(--vj-primary-dark); line-height: 1.1; letter-spacing: -.02em; display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; } .vj-brand .vj-detail-aside-ctc small { font-weight: 500; color: var(--vj-text-muted); font-size: .72rem; } .vj-brand .vj-detail-summary > div { display: flex; justify-content: space-between; align-items: center; padding: .45rem 0; border-bottom: 1px dashed var(--vj-border); font-size: .85rem; } .vj-brand .vj-detail-summary > div:last-child { border-bottom: 0; } .vj-brand .vj-detail-summary span { color: var(--vj-text-muted); } .vj-brand .vj-detail-summary strong { color: var(--vj-text); font-weight: 700; } /* Prose (privacy / static content) */ .vj-brand .vj-prose h1 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .35rem; } .vj-brand .vj-prose h2 { font-size: 1.15rem; font-weight: 700; color: var(--vj-text); margin-top: 1.5rem; margin-bottom: .5rem; } .vj-brand .vj-prose p, .vj-brand .vj-prose ul, .vj-brand .vj-prose ol { color: var(--vj-text-body); line-height: 1.65; font-size: .95rem; } .vj-brand .vj-prose ul { padding-left: 1.25rem; } .vj-brand .vj-prose ul li { margin-bottom: .25rem; } .vj-brand .vj-prose a { color: var(--vj-primary); } /* ============================================================ Internal page components — used by polished dashboards & lists ============================================================ */ /* White card body with consistent radius + padding */ .vj-brand .vj-card-pad { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.25rem 1.4rem; box-shadow: var(--vj-shadow-sm); } /* Pill tabs (used in CandidatePortal/Index) */ .vj-brand .vj-tabs { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 1px solid var(--vj-border); padding-bottom: .5rem; } .vj-brand .vj-tab { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; background: transparent; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-pill); color: var(--vj-text-body); font-weight: 600; font-size: .85rem; text-decoration: none; transition: all .15s var(--vj-ease); } .vj-brand .vj-tab:hover { background: var(--vj-primary-soft); color: var(--vj-primary); border-color: var(--vj-primary); text-decoration: none; } .vj-brand .vj-tab.active { background: var(--vj-primary); color: #fff; border-color: var(--vj-primary); box-shadow: 0 4px 10px rgba(31,100,113,.2); } .vj-brand .vj-tab-badge { background: rgba(255,255,255,.18); color: inherit; border-radius: var(--vj-radius-pill); padding: .05em .55em; font-size: .68rem; line-height: 1.4; font-weight: 700; } .vj-brand .vj-tab:not(.active) .vj-tab-badge { background: var(--vj-surface-alt); color: var(--vj-text-muted); } /* Table cards (lists in Consultant/Employer pages) */ .vj-brand .vj-table-card { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); box-shadow: var(--vj-shadow-sm); overflow: hidden; } .vj-brand .vj-table-card .table { margin: 0; --bs-table-bg: transparent; } .vj-brand .vj-table-card .table thead th { background: var(--vj-primary-softer); color: var(--vj-primary-dark); font-weight: 700; text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; border-bottom: 1px solid var(--vj-border); padding: .85rem 1rem; } .vj-brand .vj-table-card .table tbody td { padding: .85rem 1rem; border-bottom-color: var(--vj-border); color: var(--vj-text-body); vertical-align: middle; } .vj-brand .vj-table-card .table tbody tr:last-child td { border-bottom: 0; } .vj-brand .vj-table-card .table tbody tr:hover { background: var(--vj-primary-softer); } .vj-brand .vj-table-card .table a { color: var(--vj-text); } .vj-brand .vj-table-card .table a:hover { color: var(--vj-primary); } /* Action card (employer overview quick actions) */ .vj-brand .vj-action-card { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.1rem 1.25rem; color: var(--vj-text-body); text-decoration: none; box-shadow: var(--vj-shadow-sm); transition: all .2s var(--vj-ease); height: 100%; } .vj-brand .vj-action-card:hover { transform: translateY(-2px); border-color: var(--vj-primary); box-shadow: var(--vj-shadow-md); color: var(--vj-text); text-decoration: none; } .vj-brand .vj-action-card .icon { width: 44px; height: 44px; border-radius: var(--vj-radius-md); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .vj-brand .vj-action-card .icon svg { width: 22px; height: 22px; } .vj-brand .vj-action-card .icon.vj-tone-cyan { background: #cffafe; color: #0e7490; } .vj-brand .vj-action-card .icon.vj-tone-violet { background: #ede9fe; color: #6d28d9; } .vj-brand .vj-action-card .icon.vj-tone-amber { background: #fef3c7; color: #b45309; } .vj-brand .vj-action-card .title { font-weight: 700; color: var(--vj-text); font-size: 1rem; } .vj-brand .vj-action-card .sub { color: var(--vj-text-muted); font-size: .82rem; } /* Avatar (candidate dashboard) */ .vj-brand .vj-cand-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--vj-primary), var(--vj-primary-hover)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; box-shadow: var(--vj-shadow-sm); flex-shrink: 0; } .vj-brand .vj-cand-avatar-sm { width: 34px; height: 34px; font-size: .85rem; } /* Progress bar (slim, brand) */ .vj-brand .vj-progress { height: 6px; background: var(--vj-surface-alt); border-radius: 999px; overflow: hidden; border: 1px solid var(--vj-border); } .vj-brand .vj-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--vj-primary), var(--vj-primary-hover)); border-radius: 999px; } /* Mini logo (used in tables) */ .vj-brand .vj-mini-logo { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, var(--vj-primary-soft), #fff); color: var(--vj-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; border: 1px solid var(--vj-border); flex-shrink: 0; } /* Match score pill */ .vj-brand .vj-match-pill { background: rgba(31,100,113,.10); color: var(--vj-primary-dark); border: 1px solid rgba(31,100,113,.25); font-size: .72rem; font-weight: 700; padding: .15em .55em; border-radius: var(--vj-radius-pill); flex-shrink: 0; } /* Applied pill (already-applied jobs in candidate dashboard) */ .vj-brand .vj-applied-pill { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; font-size: .72rem; font-weight: 700; padding: .15em .55em; border-radius: var(--vj-radius-pill); } /* Allow .vj-clean-stat to also work as a "no-icon" widget when used on candidate dashboard */ .vj-brand .vj-clean-stat .vj-cand-avatar { margin-bottom: 0; } /* ============================================================ Kanban (ATS board) ============================================================ */ .vj-brand .vj-page-wide { max-width: none; padding-inline: clamp(1rem, 2vw, 1.5rem); } .vj-brand .vj-kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: thin; } .vj-brand .vj-kanban-col { flex: 0 0 280px; min-width: 280px; background: var(--vj-surface-alt); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); display: flex; flex-direction: column; max-height: calc(100vh - 200px); } .vj-brand .vj-kanban-col-head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--vj-border); background: #fff; border-radius: var(--vj-radius-lg) var(--vj-radius-lg) 0 0; } .vj-brand .vj-kanban-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--vj-primary); } .vj-brand .vj-kanban-dot.vj-tone-cyan { background: #0e7490; } .vj-brand .vj-kanban-dot.vj-tone-violet { background: #7c3aed; } .vj-brand .vj-kanban-dot.vj-tone-amber { background: #f59e0b; } .vj-brand .vj-kanban-dot.vj-tone-green { background: #16a34a; } .vj-brand .vj-kanban-name { font-weight: 700; color: var(--vj-text); font-size: .85rem; flex: 1; } .vj-brand .vj-kanban-count { background: var(--vj-surface-alt); color: var(--vj-text-muted); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-pill); font-size: .7rem; font-weight: 700; padding: .1rem .55rem; } .vj-brand .vj-kanban-list { flex: 1; padding: .65rem; min-height: 200px; overflow-y: auto; } .vj-brand .vj-kanban-placeholder { background: transparent; border: 2px dashed var(--vj-border-strong); color: var(--vj-text-subtle); text-align: center; padding: 1rem; border-radius: var(--vj-radius-md); font-size: .82rem; font-style: italic; } .vj-brand .vj-kanban-card { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-md); padding: .65rem .75rem; margin-bottom: .55rem; cursor: grab; box-shadow: var(--vj-shadow-sm); transition: box-shadow .15s var(--vj-ease), transform .15s var(--vj-ease); } .vj-brand .vj-kanban-card:hover { box-shadow: var(--vj-shadow); transform: translateY(-1px); } .vj-brand .vj-kanban-card:active { cursor: grabbing; } .vj-brand .vj-kanban-card.is-saving { opacity: .55; } .vj-brand .vj-kanban-card.is-selected { border-color: var(--vj-primary); box-shadow: 0 0 0 2px rgba(31, 100, 113, .2); } .vj-brand .vj-kanban-card .ats-card-select { cursor: pointer; margin: 0; } .vj-brand #ats-bulk-bar { background: #fff; border: 1px solid var(--vj-border); box-shadow: var(--vj-shadow); } .vj-brand .vj-kanban-ghost { opacity: .35; background: var(--vj-primary-soft); border-style: dashed; } .vj-brand .vj-kanban-chosen { box-shadow: 0 8px 22px rgba(31,100,113,.25); } .vj-brand .vj-kanban-card-head { display: flex; align-items: center; gap: .55rem; } .vj-brand .vj-kanban-card-meta { flex: 1; min-width: 0; } .vj-brand .vj-kanban-card-meta .name { color: var(--vj-text); font-weight: 700; font-size: .85rem; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vj-brand .vj-kanban-card-meta .name:hover { color: var(--vj-primary); } .vj-brand .vj-kanban-card-meta .role { color: var(--vj-text-muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vj-brand .vj-kanban-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; padding-top: .45rem; border-top: 1px dashed var(--vj-border); font-size: .72rem; } .vj-brand .vj-kanban-card-foot .org { color: var(--vj-text-body); font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vj-brand .vj-kanban-card-foot .time { color: var(--vj-text-muted); flex-shrink: 0; margin-left: .35rem; } /* ATS-03/04: collapsible kanban columns — header + count stay visible when collapsed */ .vj-brand .vj-kanban-col-head { cursor: pointer; } .vj-brand .vj-kanban-collapse { border: 0; background: transparent; padding: 0 .1rem; color: var(--vj-text-muted); line-height: 1; cursor: pointer; display: inline-flex; align-items: center; } .vj-brand .vj-kanban-collapse:hover { color: var(--vj-text); } .vj-brand .vj-kanban-chevron { display: inline-block; transition: transform .15s var(--vj-ease); } .vj-brand .vj-kanban-col.is-collapsed .vj-kanban-chevron { transform: rotate(-90deg); } .vj-brand .vj-kanban-col.is-collapsed .vj-kanban-list { display: none; } .vj-brand .vj-kanban-col.is-collapsed { max-height: none; align-self: flex-start; } .vj-brand .vj-kanban-col.is-collapsed .vj-kanban-col-head { border-bottom: 0; border-radius: var(--vj-radius-lg); } /* ATS-06: job-level detailed pipeline — collapsible stage groups */ .vj-brand .vj-detail-stage { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); margin-bottom: .75rem; overflow: hidden; box-shadow: var(--vj-shadow-sm); } .vj-brand .vj-detail-stage-head { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; border: 0; background: #fff; padding: .7rem 1rem; cursor: pointer; } .vj-brand .vj-detail-stage-title { font-weight: 700; font-size: .85rem; color: var(--vj-text); flex: 1; } .vj-brand .vj-detail-stage .vj-kanban-chevron { color: var(--vj-text-muted); } .vj-brand .vj-detail-stage-body { border-top: 1px solid var(--vj-border); } .vj-brand .vj-detail-stage.is-collapsed .vj-detail-stage-body { display: none; } .vj-brand .vj-detail-stage.is-collapsed .vj-kanban-chevron { transform: rotate(-90deg); } /* ============================================================ Submission card (EmployerPortal/Applications) ============================================================ */ .vj-brand .vj-submission-card { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.1rem 1.15rem; box-shadow: var(--vj-shadow-sm); height: 100%; display: flex; flex-direction: column; gap: .65rem; transition: box-shadow .2s var(--vj-ease), transform .2s var(--vj-ease); } .vj-brand .vj-submission-card:hover { box-shadow: var(--vj-shadow-md); transform: translateY(-1px); } .vj-brand .vj-submission-card .head { display: flex; align-items: center; gap: .65rem; } .vj-brand .vj-submission-card .meta { flex: 1; min-width: 0; } .vj-brand .vj-submission-card .name { font-weight: 800; color: var(--vj-text); font-size: 1rem; line-height: 1.2; } .vj-brand .vj-submission-card .role { color: var(--vj-text-muted); font-size: .82rem; } .vj-brand .vj-submission-card .chips { display: flex; flex-wrap: wrap; gap: .3rem; } .vj-brand .vj-submission-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: .55rem; border-top: 1px dashed var(--vj-border); font-size: .8rem; } .vj-brand .vj-submission-card .foot .time { color: var(--vj-text-muted); } .vj-brand .vj-submission-card .foot .cta { color: var(--vj-primary); font-weight: 700; text-decoration: none; } .vj-brand .vj-submission-card .foot .cta:hover { text-decoration: underline; } .vj-brand .vj-feedback-form { background: var(--vj-surface-alt); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-md); padding: .55rem .65rem; } .vj-brand .vj-feedback-row { display: grid; grid-template-columns: auto 90px 1fr auto; gap: .35rem; align-items: center; } .vj-brand .vj-feedback-row .form-select-sm, .vj-brand .vj-feedback-row .form-control-sm { font-size: .82rem; } /* ============================================================ Timeline (Stage history, employment) ============================================================ */ .vj-brand .vj-timeline { position: relative; padding-left: 1rem; } .vj-brand .vj-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--vj-border-strong); border-radius: 1px; } .vj-brand .vj-timeline-item { position: relative; padding-left: 1.2rem; margin-bottom: 1.1rem; } .vj-brand .vj-timeline-item:last-child { margin-bottom: 0; } .vj-brand .vj-timeline-dot { position: absolute; left: -3px; top: 6px; width: 12px; height: 12px; background: #fff; border: 3px solid var(--vj-primary); border-radius: 50%; box-shadow: 0 0 0 3px #fff; } .vj-brand .vj-timeline-mini { position: relative; padding-left: .85rem; } .vj-brand .vj-timeline-mini::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 2px; background: var(--vj-border); } .vj-brand .vj-timeline-mini-item { position: relative; padding-left: 1rem; margin-bottom: .65rem; } .vj-brand .vj-timeline-mini-item:last-child { margin-bottom: 0; } .vj-brand .vj-timeline-mini-item .vj-timeline-dot { position: absolute; left: -2px; top: 6px; width: 9px; height: 9px; border-width: 2px; box-shadow: 0 0 0 2px #fff; } /* ============================================================ Notification list ============================================================ */ .vj-brand .vj-notif-list { display: flex; flex-direction: column; gap: .5rem; } .vj-brand .vj-notif { display: flex; gap: .85rem; background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1rem 1.15rem; box-shadow: var(--vj-shadow-sm); transition: box-shadow .15s var(--vj-ease); } .vj-brand .vj-notif:hover { box-shadow: var(--vj-shadow); } .vj-brand .vj-notif.is-unread { border-left: 4px solid var(--vj-primary); background: linear-gradient(90deg, var(--vj-primary-softer) 0%, #fff 30%); } .vj-brand .vj-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vj-text-subtle); margin-top: .55rem; flex-shrink: 0; } .vj-brand .vj-notif.is-unread .vj-notif-dot { background: var(--vj-primary); box-shadow: 0 0 0 4px rgba(31,100,113,.15); } .vj-brand .vj-notif-body { flex: 1; min-width: 0; } .vj-brand .vj-notif-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .vj-brand .vj-notif-title { font-weight: 700; color: var(--vj-text); font-size: .95rem; } .vj-brand .vj-notif.is-unread .vj-notif-title { color: var(--vj-primary-dark); } .vj-brand .vj-notif-time { font-size: .75rem; color: var(--vj-text-muted); flex-shrink: 0; } .vj-brand .vj-notif-msg { color: var(--vj-text-body); font-size: .88rem; margin-top: .15rem; line-height: 1.5; } .vj-brand .vj-notif-actions { display: flex; gap: .35rem; margin-top: .55rem; align-items: center; } /* ============================================================ AI tools hub ============================================================ */ .vj-brand .vj-ai-tool { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.1rem 1.15rem; box-shadow: var(--vj-shadow-sm); height: 100%; transition: box-shadow .2s var(--vj-ease), transform .2s var(--vj-ease); } .vj-brand .vj-ai-tool:hover { box-shadow: var(--vj-shadow-md); transform: translateY(-2px); } .vj-brand .vj-ai-tool .head { display: flex; align-items: center; gap: .75rem; } .vj-brand .vj-ai-tool .icon { width: 44px; height: 44px; border-radius: var(--vj-radius-md); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .vj-brand .vj-ai-tool .icon svg { width: 22px; height: 22px; } .vj-brand .vj-ai-tool .icon.vj-tone-cyan { background: #cffafe; color: #0e7490; } .vj-brand .vj-ai-tool .icon.vj-tone-violet { background: #ede9fe; color: #6d28d9; } .vj-brand .vj-ai-tool .icon.vj-tone-amber { background: #fef3c7; color: #b45309; } .vj-brand .vj-ai-tool .icon.vj-tone-green { background: #dcfce7; color: #15803d; } .vj-brand .vj-ai-tool .title { font-weight: 700; color: var(--vj-text); font-size: 1rem; } .vj-brand .vj-ai-tool .sub { color: var(--vj-text-muted); font-size: .8rem; } .vj-brand .vj-ai-out { background: var(--vj-surface-alt); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-md); padding: 1rem 1.15rem; min-height: 140px; color: var(--vj-text-body); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .85rem; white-space: pre-wrap; margin: 0; } /* ============================================================ Integrations cards ============================================================ */ .vj-brand .vj-integration-card { background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-lg); padding: 1.1rem 1.15rem; box-shadow: var(--vj-shadow-sm); height: 100%; transition: all .2s var(--vj-ease); } .vj-brand .vj-integration-card:hover { transform: translateY(-2px); box-shadow: var(--vj-shadow-md); border-color: var(--vj-primary); } .vj-brand .vj-integration-card .head { display: flex; align-items: center; gap: .75rem; margin-bottom: .55rem; } .vj-brand .vj-integration-card .logo { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; flex-shrink: 0; } .vj-brand .vj-integration-card .logo.vj-tone-cyan { background: #cffafe; color: #0e7490; } .vj-brand .vj-integration-card .logo.vj-tone-violet { background: #ede9fe; color: #6d28d9; } .vj-brand .vj-integration-card .logo.vj-tone-amber { background: #fef3c7; color: #b45309; } .vj-brand .vj-integration-card .title { font-weight: 700; color: var(--vj-text); font-size: 1rem; } .vj-brand .vj-integration-card .sub { color: var(--vj-text-muted); font-size: .78rem; } /* ============================================================ Form helpers — role chips, monospace inputs ============================================================ */ .vj-brand .vj-role-grid { display: flex; flex-wrap: wrap; gap: .5rem; background: var(--vj-surface-alt); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-md); padding: .65rem .75rem; } .vj-brand .vj-role-chip { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-pill); padding: .35rem .85rem; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--vj-text-body); transition: all .15s var(--vj-ease); margin: 0; } .vj-brand .vj-role-chip:hover { border-color: var(--vj-primary); color: var(--vj-primary); } .vj-brand .vj-role-chip:has(input:checked) { background: var(--vj-primary); border-color: var(--vj-primary); color: #fff; box-shadow: var(--vj-shadow-primary); } .vj-brand .vj-role-chip input { margin: 0; } .vj-brand .vj-role-chip:has(input:checked) input { background-color: #fff; border-color: #fff; } .vj-brand .vj-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .85rem; } /* ============================================================ App shell — fixed sidebar + main column ============================================================ */ :root.vj-brand { --vj-side-w: 268px; --vj-appbar-h: 60px; } .vj-brand body.vj-shell { margin: 0; min-height: 100vh; display: block; /* override Bootstrap d-flex */ background: var(--vj-bg); } .vj-brand body.vj-sidebar-locked { overflow: hidden; } /* ============================================================ Sidebar — refined, professional layout ============================================================ */ /* Sidebar shell */ .vj-brand .vj-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--vj-side-w); background: #ffffff; border-right: 1px solid var(--vj-border); display: flex; flex-direction: column; z-index: 1040; overflow: hidden; box-shadow: 0 0 0 1px transparent; transition: width .22s var(--vj-ease), transform .25s var(--vj-ease); } /* Head — brand + close/collapse */ .vj-brand .vj-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1rem .9rem; border-bottom: 1px solid var(--vj-border); flex-shrink: 0; } .vj-brand .vj-sidebar-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--vj-text) !important; font-weight: 700; font-size: 1.05rem; text-decoration: none !important; letter-spacing: -.015em; min-width: 0; } .vj-brand .vj-sidebar-brand:hover { color: var(--vj-text) !important; text-decoration: none !important; } .vj-brand .vj-sidebar-brand-mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--vj-primary), var(--vj-primary-hover)); color: #fff !important; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; box-shadow: 0 6px 14px rgba(31,100,113,.28); flex-shrink: 0; } .vj-brand .vj-sidebar-brand-text { color: var(--vj-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vj-brand .vj-sidebar-brand-text span { color: var(--vj-primary) !important; } .vj-brand .vj-sidebar-close { background: transparent; border: 1px solid transparent; color: var(--vj-text-muted); border-radius: var(--vj-radius-sm); padding: .3rem; line-height: 0; transition: background .15s var(--vj-ease), color .15s var(--vj-ease); } .vj-brand .vj-sidebar-close:hover { background: var(--vj-surface-alt); color: var(--vj-text); } /* Search */ .vj-brand .vj-sidebar-search { position: relative; padding: .85rem 1rem .25rem; flex-shrink: 0; } .vj-brand .vj-sidebar-search-icon { position: absolute; left: 1.6rem; top: calc(50% - .15rem); transform: translateY(-50%); color: var(--vj-text-subtle); pointer-events: none; line-height: 0; } .vj-brand .vj-sidebar-search input { padding-left: 2.15rem; background: var(--vj-surface-alt); border: 1px solid transparent; font-size: .82rem; border-radius: var(--vj-radius-md); height: 36px; transition: background .15s, border-color .15s, box-shadow .15s; } .vj-brand .vj-sidebar-search input:focus { background: #fff; border-color: var(--vj-primary); box-shadow: 0 0 0 .15rem rgba(31,100,113,.12); } /* Nav scroll area */ .vj-brand .vj-sidebar-nav { flex: 1; padding: .65rem .55rem 1rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .vj-brand .vj-sidebar-nav::-webkit-scrollbar { width: 6px; } .vj-brand .vj-sidebar-nav::-webkit-scrollbar-thumb { background: var(--vj-border-strong); border-radius: 6px; } /* Section group */ .vj-brand .vj-nav-section + .vj-nav-section { margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--vj-border); } .vj-brand .vj-nav-section { padding: .3rem .25rem .35rem; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,252,252,.92)); border: 1px solid rgba(31,100,113,.08); box-shadow: 0 3px 10px rgba(15,23,42,.03); } .vj-brand .vj-nav-group-toggle { width: 100%; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-align: left; padding: .15rem .6rem .35rem; border-radius: 8px; color: var(--vj-text-subtle); transition: background .15s var(--vj-ease), color .15s var(--vj-ease); } .vj-brand .vj-nav-group-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; line-height: 1; } .vj-brand .vj-nav-group-chevron { color: var(--vj-text-muted); transition: transform .18s var(--vj-ease), color .18s var(--vj-ease); } .vj-brand .vj-nav-group-toggle:hover { background: rgba(31,100,113,.08); color: var(--vj-primary-dark); } .vj-brand .vj-nav-group-toggle[aria-expanded="true"] .vj-nav-group-chevron { transform: rotate(180deg); color: var(--vj-primary); } .vj-brand .vj-nav-group-body { max-height: 0; overflow: hidden; opacity: .25; transform: translateY(-3px); transition: max-height .26s var(--vj-ease), opacity .2s var(--vj-ease), transform .2s var(--vj-ease); } .vj-brand .vj-nav-group-body.is-open { max-height: 1200px; opacity: 1; transform: translateY(0); } .vj-brand .vj-nav-subgroup { font-size: .67rem; font-weight: 700; color: var(--vj-primary-dark); letter-spacing: .08em; text-transform: uppercase; padding: .45rem .85rem .28rem; opacity: .85; } .vj-brand .vj-nav-subgroup + .vj-nav-item { margin-top: 0; } /* Nav item — calmer active state, refined hover */ .vj-brand .vj-sidebar .vj-nav-item, .vj-brand .vj-sidebar a.vj-nav-item, .vj-brand .vj-sidebar a.vj-nav-item:link, .vj-brand .vj-sidebar a.vj-nav-item:visited { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; margin: 1px 0; border-radius: 10px; color: var(--vj-text-body) !important; text-decoration: none !important; font-size: .88rem; font-weight: 500; line-height: 1.2; position: relative; transform: translateZ(0); transition: background .16s var(--vj-ease), color .16s var(--vj-ease), padding-left .16s var(--vj-ease), transform .2s var(--vj-ease), box-shadow .2s var(--vj-ease); } .vj-brand .vj-sidebar .vj-nav-item span { color: inherit !important; } .vj-brand .vj-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--vj-text-muted); transition: color .16s var(--vj-ease), transform .18s var(--vj-ease); } .vj-brand .vj-nav-item .vj-nav-ext { width: 11px; height: 11px; margin-left: auto; opacity: .55; color: inherit; } /* Hover — soft primary tint, no jump */ .vj-brand .vj-sidebar .vj-nav-item:hover, .vj-brand .vj-sidebar a.vj-nav-item:hover { background: var(--vj-primary-softer); color: var(--vj-primary-dark) !important; transform: translateX(2px); box-shadow: inset 0 0 0 1px rgba(31,100,113,.12); } .vj-brand .vj-sidebar .vj-nav-item:hover svg { color: var(--vj-primary); transform: scale(1.05); } /* Active — calmer, icon-rail accent + tinted background, NOT heavy fill */ .vj-brand .vj-sidebar .vj-nav-item.active, .vj-brand .vj-sidebar a.vj-nav-item.active { background: var(--vj-primary-soft); color: var(--vj-primary-dark) !important; font-weight: 600; padding-left: 1rem; box-shadow: inset 0 0 0 1px rgba(31,100,113,.16); } .vj-brand .vj-sidebar .vj-nav-item.active svg, .vj-brand .vj-sidebar .vj-nav-item.active span { color: var(--vj-primary-dark) !important; } .vj-brand .vj-nav-item.active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; background: var(--vj-primary); border-radius: 0 3px 3px 0; } /* Footer / user card */ .vj-brand .vj-sidebar-foot { border-top: 1px solid var(--vj-border); padding: .75rem .85rem .65rem; background: #fcfdfd; flex-shrink: 0; } .vj-brand .vj-user-card { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--vj-border); border-radius: 10px; padding: .45rem .55rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .12s var(--vj-ease), box-shadow .12s var(--vj-ease); } .vj-brand .vj-user-card:hover { border-color: var(--vj-primary); box-shadow: 0 4px 10px rgba(31,100,113,.10); } .vj-brand .vj-user-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--vj-primary), var(--vj-primary-hover)); color: #fff; font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .vj-brand .vj-user-meta { flex: 1; min-width: 0; } .vj-brand .vj-user-name { font-size: .82rem; font-weight: 700; color: var(--vj-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; } .vj-brand .vj-user-role { font-size: .7rem; color: var(--vj-text-muted); line-height: 1.2; margin-top: 1px; } .vj-brand .vj-user-action { background: transparent; border: 0; color: var(--vj-text-muted); border-radius: var(--vj-radius-sm); padding: .3rem; line-height: 0; flex-shrink: 0; } .vj-brand .vj-user-action:hover { background: var(--vj-surface-alt); color: var(--vj-text); } .vj-brand .vj-sidebar-cta { border-radius: var(--vj-radius-pill); font-weight: 600; } .vj-brand .vj-sidebar-legal { margin-top: .55rem; text-align: center; color: var(--vj-text-subtle); font-size: .68rem; } .vj-brand .vj-sidebar-legal a { color: var(--vj-text-muted); text-decoration: none; } .vj-brand .vj-sidebar-legal a:hover { color: var(--vj-primary); } /* Backdrop (mobile) */ .vj-brand .vj-sidebar-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s var(--vj-ease); z-index: 1035; } .vj-brand .vj-sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; } /* Main column */ .vj-brand .vj-main { margin-left: var(--vj-side-w); min-height: 100vh; display: flex; flex-direction: column; background: var(--vj-bg); } /* App bar */ .vj-brand .vj-appbar { position: sticky; top: 0; z-index: 30; height: var(--vj-appbar-h); background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--vj-border); display: flex; align-items: center; gap: 1rem; padding: 0 clamp(1rem, 2vw, 1.5rem); } .vj-brand .vj-appbar-toggler { background: transparent; border: 1px solid var(--vj-border); color: var(--vj-text-body); border-radius: var(--vj-radius-md); padding: .35rem .5rem; line-height: 0; } .vj-brand .vj-appbar-toggler:hover { background: var(--vj-surface-alt); color: var(--vj-text); } .vj-brand .vj-appbar-title { font-weight: 700; color: var(--vj-text); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vj-brand .vj-appbar-search { flex: 1; max-width: 540px; position: relative; margin-left: .75rem; } .vj-brand .vj-appbar-search input { width: 100%; padding: .45rem .75rem .45rem 2rem; background: var(--vj-surface-alt); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-pill); font-size: .85rem; color: var(--vj-text); outline: none; } .vj-brand .vj-appbar-search input::placeholder { color: var(--vj-text-subtle); } .vj-brand .vj-appbar-search input:focus { background: #fff; border-color: var(--vj-primary); box-shadow: 0 0 0 .15rem rgba(31,100,113,.12); } .vj-brand .vj-appbar-search-icon { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--vj-text-subtle); pointer-events: none; } .vj-brand .vj-appbar-actions { margin-left: auto; display: flex; align-items: center; gap: .55rem; } .vj-brand .vj-appbar-icon { color: var(--vj-text-body); width: 36px; height: 36px; border-radius: var(--vj-radius-md); display: inline-flex; align-items: center; justify-content: center; transition: background .15s var(--vj-ease), color .15s var(--vj-ease); } .vj-brand .vj-appbar-icon:hover { background: var(--vj-primary-soft); color: var(--vj-primary); text-decoration: none; } .vj-brand .vj-appbar-icon svg { width: 20px; height: 20px; } .vj-brand .vj-appbar-user { display: inline-flex; align-items: center; gap: .55rem; background: transparent; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-pill); padding: .25rem .65rem .25rem .25rem; color: var(--vj-text-body); font-weight: 600; font-size: .85rem; transition: background .15s var(--vj-ease), border-color .15s var(--vj-ease); } .vj-brand .vj-appbar-user:hover { background: var(--vj-primary-soft); border-color: var(--vj-primary); color: var(--vj-primary); } .vj-brand .vj-appbar-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--vj-primary), var(--vj-primary-hover)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; } .vj-brand .vj-appbar-user-name { white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; } /* Content scroll area */ .vj-brand .vj-content { flex: 1; } /* Footer (slim, inside main) */ .vj-brand .vj-footer { background: #fff !important; color: var(--vj-text-muted) !important; border-top: 1px solid var(--vj-border); padding: 1rem 0; font-size: .8rem; } .vj-brand .vj-footer strong { color: var(--vj-text); } .vj-brand .vj-footer a { color: var(--vj-primary); text-decoration: none; } .vj-brand .vj-footer a:hover { text-decoration: underline; } /* Make sticky sections inside the page (e.g., ticker) sit beneath the appbar — no change needed because the appbar is itself sticky inside .vj-main; ticker scrolls naturally. */ /* Responsive — collapse sidebar to drawer */ @media (max-width: 991.98px) { .vj-brand .vj-sidebar { transform: translateX(-100%); box-shadow: 0 12px 40px rgba(15,23,42,.25); } .vj-brand .vj-sidebar.is-open { transform: translateX(0); } .vj-brand .vj-main { margin-left: 0; } .vj-brand .vj-appbar-title { display: none; } /* save space on mobile */ } /* Wider container override no longer needed — sidebar already eats 260px, but vj-container should still expand within main */ @media (min-width: 992px) { .vj-brand .vj-container { max-width: none; } .vj-brand .vj-topbar .container, .vj-brand .vj-topbar .container-fluid, .vj-brand .vj-footer .container { max-width: none; } } /* ============================================================ Sidebar collapse / expand toggle ============================================================ */ /* Smooth width transitions */ .vj-brand .vj-sidebar { transition: width .22s var(--vj-ease), transform .25s var(--vj-ease); } .vj-brand .vj-main { transition: margin-left .22s var(--vj-ease); } /* Collapse chevron in sidebar head (desktop only) */ .vj-brand .vj-sidebar-collapse { background: transparent; border: 1px solid var(--vj-border); color: var(--vj-text-muted); border-radius: var(--vj-radius-sm); width: 28px; height: 28px; align-items: center; justify-content: center; line-height: 0; transition: background .15s var(--vj-ease), color .15s var(--vj-ease), border-color .15s var(--vj-ease); } .vj-brand .vj-sidebar-collapse:hover { background: var(--vj-primary-soft); color: var(--vj-primary); border-color: var(--vj-primary); } .vj-brand .vj-sidebar-collapse .vj-sb-chevron { transition: transform .25s var(--vj-ease); } /* Appbar toggler (visible on all sizes now) */ .vj-brand .vj-appbar-toggler { display: inline-flex; } /* Sidebar entrance polish */ @media (prefers-reduced-motion: no-preference) { .vj-brand .vj-nav-section[data-vj-animate="section"] { animation: vj-nav-section-in .32s ease both; } .vj-brand .vj-nav-section[data-vj-animate="section"]:nth-child(1) { animation-delay: .04s; } .vj-brand .vj-nav-section[data-vj-animate="section"]:nth-child(2) { animation-delay: .08s; } .vj-brand .vj-nav-section[data-vj-animate="section"]:nth-child(3) { animation-delay: .12s; } .vj-brand .vj-nav-section[data-vj-animate="section"]:nth-child(4) { animation-delay: .16s; } .vj-brand .vj-nav-section[data-vj-animate="section"]:nth-child(5) { animation-delay: .2s; } .vj-brand .vj-nav-section[data-vj-animate="section"]:nth-child(6) { animation-delay: .24s; } } @keyframes vj-nav-section-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ===== COLLAPSED STATE (desktop ≥ lg) ===== */ @media (min-width: 992px) { /* Sidebar shrinks via the CSS variable; main margin auto-follows because both reference it */ html.vj-sb-collapsed { --vj-side-w: 72px !important; } /* Belt-and-braces: also force literal width/margin in case the variable doesn't cascade as expected */ html.vj-sb-collapsed .vj-sidebar { width: 72px !important; } html.vj-sb-collapsed .vj-main { margin-left: 72px !important; } /* Head — center brand mark, hide chevron entirely (use the appbar hamburger to re-expand) */ html.vj-sb-collapsed .vj-sidebar-head { padding: .85rem .5rem; justify-content: center; } html.vj-sb-collapsed .vj-sidebar-brand-text { display: none; } html.vj-sb-collapsed .vj-sidebar-brand { gap: 0; } html.vj-sb-collapsed .vj-sidebar-collapse { display: none !important; } html.vj-sb-collapsed .vj-sidebar-search { display: none; } html.vj-sb-collapsed .vj-nav-label { display: none; } html.vj-sb-collapsed .vj-nav-subgroup { display: none; } html.vj-sb-collapsed .vj-nav-group-toggle { display: none; } html.vj-sb-collapsed .vj-nav-group-body { max-height: none; opacity: 1; transform: none; overflow: visible; } html.vj-sb-collapsed .vj-nav-section { padding: .35rem 0; } html.vj-sb-collapsed .vj-nav-item { justify-content: center; padding: .55rem .25rem; gap: 0; position: relative; margin-inline: .25rem; } html.vj-sb-collapsed .vj-nav-item > span, html.vj-sb-collapsed .vj-nav-item .vj-nav-ext { display: none !important; } /* Hover tooltip — uses data-tip injected by the layout's JS */ html.vj-sb-collapsed .vj-nav-item:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--vj-text); color: #fff; font-size: .75rem; font-weight: 600; padding: .35rem .65rem; border-radius: var(--vj-radius-sm); white-space: nowrap; box-shadow: 0 6px 14px rgba(15,23,42,.18); z-index: 1050; pointer-events: none; } html.vj-sb-collapsed .vj-nav-item.active::before { display: none; } /* Footer / user card */ html.vj-sb-collapsed .vj-sidebar-foot { padding: .65rem .35rem; } html.vj-sb-collapsed .vj-user-card { padding: .25rem; justify-content: center; } html.vj-sb-collapsed .vj-user-meta, html.vj-sb-collapsed .vj-user-action, html.vj-sb-collapsed .vj-sidebar-cta, html.vj-sb-collapsed .vj-sidebar-legal { display: none; } } @media (prefers-reduced-motion: reduce) { .vj-brand .vj-nav-group-chevron, .vj-brand .vj-nav-group-body { transition: none !important; } } /* Below lg: collapse class has no effect (mobile drawer takes over) */ @media (max-width: 991.98px) { html.vj-sb-collapsed .vj-main { margin-left: 0 !important; } } /* ============================================================ Final overrides — must win against legacy CSS ============================================================ */ /* Force sane link colors inside content areas (legacy CSS bleeds orange) */ .vj-brand .vj-content a:not(.btn):link, .vj-brand .vj-content a:not(.btn):visited, .vj-brand .vj-page a:not(.btn):link, .vj-brand .vj-page a:not(.btn):visited, .vj-brand .vj-table-card a:not(.btn):link, .vj-brand .vj-table-card a:not(.btn):visited { color: var(--vj-primary) !important; } .vj-brand .vj-content a:not(.btn):hover, .vj-brand .vj-page a:not(.btn):hover, .vj-brand .vj-table-card a:not(.btn):hover { color: var(--vj-primary-hover) !important; } /* Explicit safety net for common button variants used as anchors */ .vj-brand a.btn.btn-primary, .vj-brand a.btn.btn-primary:hover, .vj-brand a.btn.btn-primary:focus { color: #fff !important; } .vj-brand .btn-primary, .vj-brand .btn-primary:hover, .vj-brand .btn-primary:focus { color: #fff !important; } .vj-brand a.btn.btn-outline-primary, .vj-brand a.btn.btn-outline-secondary, .vj-brand a.btn.btn-secondary { color: var(--vj-text-body) !important; } .vj-brand a.btn.btn-outline-primary:hover { color: #fff !important; } .vj-brand .btn-outline-secondary { color: var(--vj-text-body) !important; border-color: var(--vj-border-strong); background: #fff; } .vj-brand .btn-outline-secondary:hover, .vj-brand .btn-outline-secondary:focus { color: #fff !important; background: var(--vj-primary-dark); border-color: var(--vj-primary-dark); } /* Inside table rows the bare email/text links should look like body text, not loud links */ .vj-brand .vj-table-card td a:link, .vj-brand .vj-table-card td a:visited { color: var(--vj-text-body) !important; text-decoration: none !important; } .vj-brand .vj-table-card td a:hover { color: var(--vj-primary) !important; text-decoration: underline !important; } /* Breadcrumb/back buttons + page-actions */ .vj-brand .vj-page-head a:not(.btn):link, .vj-brand .vj-page-head a:not(.btn):visited { color: var(--vj-primary) !important; } /* Brand text — give it room, no ellipsis at default width */ .vj-brand .vj-sidebar-brand { flex: 1; min-width: 0; } .vj-brand .vj-sidebar-brand-text { overflow: visible !important; text-overflow: clip !important; white-space: nowrap; font-size: 1.02rem; } /* Make sure the appbar hamburger is always usable, not hidden */ .vj-brand .vj-appbar-toggler { display: inline-flex !important; } /* Profile lazy sections — keep layout reserved, fade in when near viewport */ .vj-brand .vj-lazy-section { content-visibility: auto; contain-intrinsic-size: 480px; opacity: 0.55; transition: opacity 0.25s ease; } .vj-brand .vj-lazy-section.is-visible { opacity: 1; }