/* ═══════════════════════════════════════════ MakeMyCVNow — Shared Header CSS Single source of truth for header across all pages. Loaded via in on every page. ═══════════════════════════════════════════ */ /* ── Scrollbar stability ── */ html { scrollbar-gutter: stable; } /* ── Top Bar ── */ .mmcv-topbar { height: 36px; background: linear-gradient(90deg, #4f46e5, #7c5cff, #a855f7); color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font: 800 12px/1 'Inter', Arial, sans-serif; position: relative; z-index: 60; padding: 0 16px; text-align: center; white-space: nowrap; overflow: hidden; } .mmcv-topbar a { color: #fff; text-decoration: underline; opacity: .9; } .mmcv-topbar a:hover { opacity: 1; } .top-bar-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.7); flex-shrink: 0; animation: tbPulse 2s ease infinite; } @keyframes tbPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.4); } 50% { box-shadow: 0 0 0 4px rgba(255,255,255,0); } } /* ── Header ── */ .site-header { height: 72px; position: sticky; top: 0; z-index: 50; background: rgba(248, 250, 252, .92); border-bottom: 1px solid rgba(148, 163, 184, .18); box-shadow: 0 8px 26px rgba(15, 23, 42, .05); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: visible; } .mmcv-header-inner { width: min(1180px, calc(100% - 40px)); height: 72px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; } /* ── Logo ── */ .mmcv-brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .mmcv-logo { height: 54px; width: auto; display: block; object-fit: contain; } /* ── Nav ── */ .mmcv-nav { display: flex; align-items: center; justify-content: center; gap: 28px; flex: 1; } .mmcv-nav a { color: #526071; font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; position: relative; transition: color .15s ease; } .mmcv-nav a:hover, .mmcv-nav a.active { color: #111827; } .mmcv-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: #635bff; border-radius: 4px; } /* ───────────────────────────────────────────── Mock Interview NEW link styling ───────────────────────────────────────────── */ .mmcv-nav a.mmcv-nav-new { display: inline-flex; align-items: center; gap: 6px; color: #5B21B6; background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(192, 38, 211, 0.08)); padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(124, 58, 237, 0.15); transition: all .15s ease; } .mmcv-nav a.mmcv-nav-new:hover { color: #5B21B6; background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(192, 38, 211, 0.15)); border-color: rgba(124, 58, 237, 0.3); transform: translateY(-1px); } .mmcv-nav a.mmcv-nav-new::after { display: none; } .mmcv-nav-badge { background: linear-gradient(135deg, #7C3AED, #C026D3); color: white; font-size: 9px; font-weight: 900; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 999px; text-transform: uppercase; box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3); } /* ───────────────────────────────────────────── Mock Interview drawer link styling (mobile) ───────────────────────────────────────────── */ .mobile-drawer a.mmcv-drawer-new { display: flex !important; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #faf5ff, #fdf2f8); color: #5B21B6; border: 1px solid rgba(124, 58, 237, 0.15); margin-top: 4px; margin-bottom: 4px; } .mobile-drawer a.mmcv-drawer-new:hover { background: linear-gradient(135deg, #f5f0ff, #fce7f3); color: #4C1D95; } .mmcv-drawer-badge { background: linear-gradient(135deg, #7C3AED, #C026D3); color: white; font-size: 9px; font-weight: 900; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3); } /* ── Right actions ── */ .mmcv-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; position: relative; overflow: visible; } /* ── Lang-switcher placeholder (before JS fills it) ── */ .lang-switcher { display: inline-flex; align-items: center; width: 64px; height: 42px; position: relative; z-index: 5000; overflow: visible; } /* ── Auth area placeholder (before JS fills it) ── */ #nav-auth-area { display: inline-flex; align-items: center; justify-content: flex-end; width: auto; min-width: 64px; height: 42px; position: relative; overflow: visible; } /* Static login placeholder — replaced by auth-nav.js on load */ .mmcv-login-ph { min-width: 64px; height: 42px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: linear-gradient(135deg, #7c5cff, #8b5cf6); color: #fff !important; text-decoration: none; font-size: 13px; font-weight: 900; font-family: 'Inter', Arial, sans-serif; box-shadow: 0 10px 26px rgba(124, 92, 255, .26); white-space: nowrap; } /* ── Mobile drawer ── */ .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 40; backdrop-filter: blur(4px); } .mobile-drawer { display: none; position: fixed; top: 0; right: 0; width: 280px; height: 100%; background: #fff; z-index: 45; padding: 80px 28px 28px; box-shadow: -10px 0 40px rgba(15, 23, 42, .1); flex-direction: column; gap: 4px; overflow-y: auto; } .mobile-drawer a { display: block; padding: 14px 16px; font-size: 16px; font-weight: 600; color: #334155; border-radius: 10px; transition: .15s; text-decoration: none; } .mobile-drawer a:hover { background: rgba(99, 91, 255, .08); color: #4f46e5; } /* ── Mobile bottom tabs ── */ .mobile-bottom-tabs { display: none; } /* ── Mobile responsive ── */ @media (max-width: 850px) { .mmcv-topbar { height: auto; min-height: 34px; padding: 6px 14px; font-size: 11px; white-space: normal; flex-wrap: wrap; } .site-header { height: 64px; } .mmcv-header-inner { height: 64px; width: calc(100% - 28px); } .mmcv-logo { height: 44px; } .mmcv-nav { display: none; } #nav-auth-area { display: none; } .mobile-bottom-tabs { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; height: 64px; background: rgba(255, 255, 255, .97); border-top: 1px solid rgba(148, 163, 184, .18); box-shadow: 0 -4px 20px rgba(15, 23, 42, .06); backdrop-filter: blur(14px); align-items: center; justify-content: space-around; padding: 0 4px; padding-bottom: env(safe-area-inset-bottom, 0); } .mob-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 10px; border-radius: 10px; text-decoration: none; font-size: 10px; font-weight: 600; color: #94a3b8; transition: .15s; } .mob-tab.active { color: #635bff; } .mob-tab svg { width: 22px; height: 22px; stroke-width: 1.8; } body { padding-bottom: 68px !important; } footer { margin-bottom: 68px; } } /* ── Performance: disable expensive blur on mobile ── */ @media (max-width: 850px) { .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(248, 250, 252, .98); } .mobile-bottom-tabs { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .98); } }