/* style.css (optimized, 1 file) Safe approach: keep original selectors + scope premium overrides under .theme-premium. Body already has: so rules apply without touching HTML. NOTE (auto-merge): vip.css has been merged into this file under the section "VIP OVERRIDES (merged from vip.css)" at the end. Keep this file loaded once. */ /* ========================================================= 1) TOKENS (ONE :root ONLY) — UNIFIED Canonical = VIP tokens, legacy vars are aliases -> no conflict ========================================================= */ :root{ --t-fast:.15s ease; --t-mid:.18s ease; --trans-smooth:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), background var(--t-fast), filter var(--t-fast); /* Brand */ --primary:#2563EB; --secondary:#1D4ED8; --light:#F5F8FF; /* ===== CANONICAL (VIP) ===== */ --brand:var(--primary); --brand2:var(--secondary); --brand3:#0EA5E9; --ink:#0B1220; --muted:#64748B; --surface:#ffffff; --surface-2:#F8FAFC; --line:rgba(2,6,23,.08); --r-sm:14px; --r-md:18px; --r-lg:28px; --r-xl:34px; --sh-xs:0 8px 18px rgba(2,6,23,.06); --sh-sm:0 14px 34px rgba(2,6,23,.08); --sh-md:0 24px 70px rgba(2,6,23,.12); --sh-hi:0 34px 110px rgba(2,6,23,.16); /* ===== LEGACY ALIASES (map -> canonical) ===== */ --dark:var(--ink); --bg:var(--surface); --card:var(--surface); --border:var(--line); --radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-lg); --shadow-xs:var(--sh-xs); --shadow-sm:var(--sh-sm); --shadow-md:var(--sh-md); --shadow-hi:var(--sh-hi); --accent-color:var(--primary); --heading-color:var(--ink); --contrast-color:#FFFFFF; /* job detail tokens */ --jd-ink:var(--ink); --jd-muted:var(--muted); --jd-line:var(--line); --jd-r:18px; --jd-shadow:0 16px 40px rgba(2,6,23,.08); --jd-shadow-soft:0 10px 28px rgba(2,6,23,.06); /* extra tokens used in legacy blocks */ --stroke2:rgba(15,23,42,.10); --surface-color:var(--surface); /* overlay */ --overlay-ink: rgba(2,6,23,1); --overlay-bar-h: 44px; --overlay-ink-70: rgba(2,6,23,.70); } /* ========================================================= 2) BASE ========================================================= */ html, body{ height:100%; } body{ font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:var(--ink); background:var(--bg); overflow-x:hidden; } /* Safer base text (don't break dark sections) */ .theme-premium :is(p, .text-muted){ color:var(--muted); } /* Keep bootstrap helper meaning */ .theme-premium .text-white-50{ color:rgba(255,255,255,.5); } /* Dark sections should keep intended colors */ .theme-premium :where(.hero-ui, .footer, .page-header) :is(p, .text-muted){ color:inherit; } h1,h2,h3,h4,h5{ letter-spacing:-0.02em; } .theme-premium h1, .theme-premium .display-3{ font-weight:800; letter-spacing:-0.05em; line-height:1.08; } /* ========================================================= 3) GLOBAL UTILITIES ========================================================= */ .theme-premium .text-primary{ color:var(--primary) !important; } .theme-premium .bg-primary{ background:var(--primary) !important; } .theme-premium .rounded-0{ border-radius:var(--radius-md) !important; } @media (min-width:576px){ .w-sm-auto{ width:auto; } } /* ========================================================= SHARED TRANSITIONS (REDUCE DUPLICATION) - Keep existing per-component transitions where explicitly set. ========================================================= */ .theme-premium :is( .job-item, .cardx, .post-item, .recent-blog-posts .post-item, .cat-card, .panel-card, .about-mini, .step, .job-search-card, .blog-details-page .sidebar .categories-widget li a, #blog-comments.blog-comments .comment-actions .action-btn, .employer-dashboard a.status-item ){ transition:var(--trans-smooth); } /* ========================================================= 3.5) CARD SYSTEM (FOUNDATION) — CONTRACT BASED - Stop forcing all cards same radius/shadow - Each card overrides via --card-* vars ========================================================= */ .theme-premium :where( .about-card, .about-steps, .job-search-card, .cardx, .blog-details-page .article, .blog-details-page .sidebar .widget-item, #blog-comments.blog-comments .comment-box ){ --card-bg: var(--surface); --card-bd: 1px solid var(--border); --card-r: 22px; --card-sh: var(--shadow-sm); background: var(--card-bg); border: var(--card-bd); border-radius: var(--card-r); box-shadow: var(--card-sh); } /* Component overrides via variables (clean, low-conflict) */ /* Search card should be premium/glass */ .theme-premium .job-search-card{ --card-r: var(--r-xl); --card-bd: 1px solid rgba(37,99,235,.10); --card-sh: 0 22px 60px rgba(2,6,23,.12); } /* Generic dashboard cards */ .theme-premium .cardx{ --card-r: var(--r-lg); --card-bd: 1px solid var(--line); --card-sh: var(--sh-sm); } /* Blog article: follow blog tokens when in blog page */ .blog-details-page .article{ --card-r: 22px; --card-bd: 1px solid var(--bd-line); --card-sh: var(--bd-shadow); } /* Sidebar widgets: softer */ .blog-details-page .sidebar .widget-item{ --card-r: 22px; --card-bd: 1px solid rgba(15,23,42,.10); --card-sh: var(--bd-shadow-soft); } /* Comment box: keep current feel */ #blog-comments.blog-comments .comment-box{ --card-r: 22px; --card-bd: 1px solid rgba(15,23,42,.10); --card-sh: var(--shadow-sm); } /* ========================================================= 4) BACK TO TOP + SPINNER (STABLE) ========================================================= */ .back-to-top{ position:fixed; display:none; right:45px; bottom:45px; z-index:99; } /* Spinner: smooth + safe */ #spinner{ display:flex; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease-out, visibility 0s linear .5s; z-index:99999; } #spinner.show{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .5s ease-out, visibility 0s linear 0s; } /* ========================================================= 5) BUTTONS ========================================================= */ .btn{ font-family:"Inter", sans-serif; font-weight:700; letter-spacing:-0.01em; border-radius:var(--radius-md); transition:transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast); } .btn.btn-primary,.btn.btn-secondary{ color:#fff; } .btn-primary{ background:var(--primary); border-color:var(--primary); box-shadow:var(--shadow-sm); } .btn-primary:hover{ transform:translateY(-1px); filter:brightness(.98); box-shadow:var(--shadow-md); } .btn-secondary{ background:var(--secondary); border-color:var(--secondary); box-shadow:var(--shadow-sm); } .btn-secondary:hover{ transform:translateY(-1px); filter:brightness(.98); box-shadow:var(--shadow-md); } .btn-dark{ box-shadow:var(--shadow-sm); } .btn-square{ width:38px; height:38px; } .btn-sm-square{ width:32px; height:32px; } .btn-lg-square{ width:48px; height:48px; } .btn-square,.btn-sm-square,.btn-lg-square{ padding:0; display:flex; align-items:center; justify-content:center; font-weight:normal; border-radius:14px; } /* premium button set (used in employer/login/dashboard pages) */ .btn-prem{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-weight:800; letter-spacing:.01em; line-height:1; padding:.58rem .90rem; border-radius:12px; font-size:.92rem; white-space:nowrap; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, filter .16s ease; } .btn-prem i{ font-size:.92em; opacity:.95; } .btn-grad{ border:1px solid rgba(37,99,235,.18); color:#fff; background:linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow:0 12px 26px rgba(37,99,235,.16); } .btn-grad:hover{ transform:translateY(-1px); filter:brightness(1.02); box-shadow:0 18px 34px rgba(37,99,235,.20); color:#fff; } .btn-ghost{ color:rgba(11,18,32,.92); border:1px solid rgba(15,23,42,.14); background:#fff; box-shadow:var(--shadow-xs); } .btn-ghost:hover{ transform:translateY(-1px); background:rgba(2,6,23,.01); border-color:rgba(15,23,42,.18); box-shadow:var(--shadow-sm); } .btn-soft{ color:rgba(11,18,32,.86); border:1px solid rgba(15,23,42,.10); background:rgba(2,6,23,.02); } .btn-soft:hover{ transform:translateY(-1px); background:rgba(2,6,23,.03); border-color:rgba(15,23,42,.14); box-shadow:var(--shadow-xs); } .btn-prem--xs,.smallbtn{ padding:.46rem .72rem; border-radius:11px; font-size:.86rem; box-shadow:none; } /* CTA "View all" */ .btn-view-all{ display:inline-flex; align-items:center; gap:8px; } .btn-view-all i{ transition:transform .3s ease; } .btn-view-all:hover i{ transform:translateX(6px); } /* Navbar CTA */ .btn-nav-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 14px; border-radius:999px; font-weight:900; font-size:14px; letter-spacing:-0.01em; color:#fff; background:linear-gradient(135deg, var(--primary), var(--secondary)); border:1px solid rgba(255,255,255,.12); box-shadow:0 14px 34px rgba(37,99,235,.22); transition:transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast); } .btn-nav-cta:hover{ transform:translateY(-1px); box-shadow:0 20px 48px rgba(37,99,235,.30); filter:brightness(.98); } .btn-nav-cta i.fa-arrow-right{ font-size:12px; } /* ========================================================= 6) FORMS (GLOBAL) ========================================================= */ .theme-premium :is(.form-control, .form-select){ border-radius:var(--radius-md); } .theme-premium :is(.form-control, .form-select):focus{ border-color:rgba(37,99,235,.28); box-shadow:0 0 0 .25rem rgba(37,99,235,.10); outline:0; } /* ========================================================= 7) NAVBAR ========================================================= */ .navbar{ background:rgba(245,248,255,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } /* Navbar blur fallbacks (performance) */ @media (hover:none){ .navbar{ backdrop-filter:none; background:rgba(245,248,255,.98); } } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){ .navbar{ background:rgba(245,248,255,.98); } } .navbar .navbar-brand h1{ font-weight:900; letter-spacing:-0.05em; font-size:22px; } .navbar-dark .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link{ margin-right:30px; padding:25px 0; font-size:15px; outline:none; } .navbar-light .navbar-nav .nav-link{ color:var(--dark); font-weight:700; text-transform:none; opacity:.78; } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active{ opacity:1; color:var(--dark); } /* dropdown caret */ .navbar .dropdown-toggle::after{ border:none; content:"\f107"; font-family:"Font Awesome 5 Free"; font-weight:900; vertical-align:middle; margin-left:5px; transition:.5s; } .navbar .dropdown-toggle[aria-expanded=true]::after{ transform:rotate(-180deg); } /* hover dropdown for desktop */ @media (min-width:992px){ .navbar .nav-item .dropdown-menu{ display:block; top:100%; margin-top:0; transform:rotateX(-75deg); transform-origin:0% 0%; opacity:0; visibility:hidden; transition:.5s; } .navbar .nav-item:hover .dropdown-menu{ transform:rotateX(0deg); visibility:visible; opacity:1; } } @media (max-width:991.98px){ .navbar-dark .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link{ margin-right:0; padding:10px 0; } .navbar-light .navbar-nav{ border-top:1px solid #EEE; padding-top:10px; padding-bottom:10px; } } /* underline indicator */ .navbar-light .navbar-nav .nav-link{ position:relative; } .navbar-light .navbar-nav .nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:14px; height:2px; border-radius:999px; background:rgba(37,99,235,0); transform:scaleX(.2); transform-origin:center; transition:transform var(--t-mid), background var(--t-mid), opacity var(--t-mid); opacity:0; } .navbar-light .navbar-nav .nav-link:hover::after, .navbar-light .navbar-nav .nav-link.active::after{ background:rgba(37,99,235,.90); transform:scaleX(.6); opacity:1; } /* brand mark */ .brand-mark{ width:34px;height:34px;border-radius:12px; background:linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow:0 10px 26px rgba(37,99,235,.18); flex:0 0 auto; } /* ========================================================= 8) HEADER / PAGE HEADER ========================================================= */ .header-carousel .container, .page-header .container{ position:relative; padding:45px 0 45px 35px; border-left:15px solid var(--primary); } .header-carousel .container::before, .header-carousel .container::after, .page-header .container::before, .page-header .container::after{ position:absolute; content:""; top:0; left:0; width:100px; height:15px; background:var(--primary); } .header-carousel .container::after, .page-header .container::after{ top:100%; margin-top:-15px; } .page-header{ background: linear-gradient(rgba(15,28,58,.75), rgba(15,28,58,.85)), linear-gradient(135deg,#2563EB,#1D4ED8); background-size:cover; } .page-header .breadcrumb-item + .breadcrumb-item::before{ color:var(--light); } /* Carousel arrows */ .header-carousel .owl-nav{ position:absolute; top:50%; right:8%; transform:translateY(-50%); display:flex; flex-direction:column; } .header-carousel .owl-nav .owl-prev, .header-carousel .owl-nav .owl-next{ margin:7px 0; width:45px;height:45px; display:flex; align-items:center; justify-content:center; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.55); border-radius:14px; font-size:22px; transition:.5s; } .header-carousel .owl-nav .owl-prev:hover, .header-carousel .owl-nav .owl-next:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.75); } /* Mobile carousel text sizing */ @media (max-width:768px){ .theme-premium .header-carousel .owl-carousel-item{ position:relative; min-height:500px; } .theme-premium .header-carousel .owl-carousel-item img{ position:absolute; width:100%; height:100%; object-fit:cover; } .theme-premium .header-carousel .owl-carousel-item p{ font-size:14px; font-weight:400; } .theme-premium .header-carousel .owl-carousel-item h1{ font-size:30px; font-weight:600; } } /* ========================================================= 9) HERO UI (HOME) ========================================================= */ .hero-ui{ background: radial-gradient(1200px 600px at 10% 20%, rgba(30,58,138,.45), transparent 60%), radial-gradient(900px 500px at 85% 35%, rgba(255,255,255,.10), transparent 55%), linear-gradient(180deg, #0F1C3A 0%, #0B1733 100%); position:relative; overflow:visible; } .hero-ui:before{ content:""; position:absolute; inset:-2px; background:repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 12px); opacity:.25; pointer-events:none; mix-blend-mode:overlay; } .hero-ui .container{ position:relative; z-index:2; } .hero-badge{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.92); font-weight:800; letter-spacing:-0.01em; } .hero-title{ max-width:780px; } .hero-sub{ max-width:560px; font-weight:600; color:rgba(255,255,255,.74); } .btn-hero{ padding:14px 20px; border-radius:18px; } .btn-hero-outline{ padding:14px 20px; border-radius:18px; border:1px solid rgba(255,255,255,.55); } .btn-hero-outline:hover{ background:rgba(255,255,255,.10); } .hero-trust{ display:flex; flex-wrap:wrap; gap:10px; } .trust-chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:rgba(255,255,255,.86); font-weight:800; font-size:12px; } .hero-panel{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:18px; box-shadow:0 22px 70px rgba(2,6,23,.25); backdrop-filter:blur(10px); } .hero-panel .panel-title{ color:#fff; font-weight:900; letter-spacing:-0.03em; font-size:16px; } .hero-panel .panel-sub{ color:rgba(255,255,255,.70); font-weight:700; font-size:13px; margin-top:4px; } .panel-grid{ display:flex; flex-direction:column; gap:10px; } .panel-card{ display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius:18px; text-decoration:none; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast); } .panel-card:hover{ transform:translateY(-1px); background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); } .panel-card .ic{ width:44px;height:44px;border-radius:14px; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.10); color:#fff; } .panel-card .t{ color:#fff; font-weight:900; font-size:14px; letter-spacing:-0.02em; } .panel-card .s{ color:rgba(255,255,255,.70); font-weight:700; font-size:12px; } .panel-card i.fa-arrow-right{ color:rgba(255,255,255,.70); } .panel-foot{ display:flex; flex-wrap:wrap; gap:8px; } .mini-chip{ display:inline-flex; align-items:center; padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:rgba(255,255,255,.80); font-weight:800; font-size:12px; } .hero-search-float{ position:relative; margin-top: 0; z-index:20; } /* Search card (used by livewire component) */ .job-search-wrap{ position:relative; z-index:10; } /* keep explicit for safety + overrides already via contract vars */ .job-search-card{ padding:14px; border-radius:22px; border-color:rgba(37,99,235,.10); box-shadow:0 22px 60px rgba(2,6,23,.12); } .theme-premium .job-search-card :is(.form-control, .form-select){ height:54px; border-radius:16px; background:#fff; color:var(--dark); border:1px solid rgba(2,6,23,.10); box-shadow:0 10px 24px rgba(2,6,23,.06); padding:14px 16px; font-weight:600; } .theme-premium .job-search-card .form-control::placeholder{ color:rgba(2,6,23,.45); } .job-search-card .btn-search{ height:54px; border-radius:16px; padding:0 22px; font-weight:800; box-shadow:0 18px 36px rgba(37,99,235,.22); } .job-field{ position:relative; } .job-field i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:rgba(2,6,23,.45); font-size:14px; pointer-events:none; } .theme-premium .hero-search-float .job-search-card :is(.form-control, .form-select){ padding-left:40px; } /* hero responsive */ @media (max-width:768px){ /* Mobile perf: simplify hero background (keep desktop gradients) */ .theme-premium .hero-ui{ background:linear-gradient(180deg, #0F1C3A 0%, #0B1733 100%); } .theme-premium .hero-search-float{ margin-top:-18px; } .theme-premium h1.display-3, .theme-premium .hero-ui h1.display-3{ font-size:34px; line-height:1.10; letter-spacing:-0.04em; } .hero-badge{ font-size:12px; padding:9px 12px; } .hero-sub{ font-size:14px; line-height:1.45; } .trust-chip{ padding:7px 10px; font-size:11px; } .hero-panel{ margin-top:10px; padding:16px; border-radius:20px; } .panel-card .ic{ width:42px; height:42px; } .job-search-card{ padding:12px; border-radius:20px; } .job-search-card .form-control, .job-search-card .form-select, .job-search-card .btn-search{ height:52px; border-radius:16px; font-size:14px; } .theme-premium .job-search-card .btn-search{ width:100%; } } @media (max-width:576px){ .job-field i{ left:12px; font-size:13px; } .theme-premium .hero-search-float .job-search-card .form-control, .theme-premium .hero-search-float .job-search-card .form-select{ padding-left:38px; } } /* ========================================================= 10) CATEGORIES (HORIZONTAL SCROLLER) ========================================================= */ .cat-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; } .cat-h{ margin:0; font-weight:800; font-size:28px; } .cat-sub{ margin-top:6px; color:#6c757d; font-size:14px; } .cat-all{ display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:999px; border:1px solid rgba(25,135,84,.35); color:#198754; text-decoration:none; font-weight:600; background:#fff; } .cat-all:hover{ border-color:#198754; } .cat-wrap{ position:relative; } .cat-scroll{ display:flex; gap:18px; overflow-x:auto; padding:8px 6px 14px; /* FIX: mượt wheel/trackpad */ scroll-snap-type: x proximity; scroll-behavior: auto; -webkit-overflow-scrolling:touch; } .cat-scroll::-webkit-scrollbar{ height:8px; } .cat-scroll::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.14); border-radius:10px; } .cat-scroll::-webkit-scrollbar-track{ background:transparent; } .cat-card{ min-width:260px; flex:0 0 auto; scroll-snap-align:start; background:#f6f8fb; border:1px solid rgba(15,23,42,.08); border-radius:18px; padding:18px; text-decoration:none; color:inherit; transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), background-color var(--t-fast); text-align:center; } .cat-card:hover{ transform:translateY(-2px); background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.08); border-color:rgba(15,23,42,.12); } .cat-badge{ width:56px;height:56px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(15,23,42,.06); margin:0 auto 12px; font-size:22px; } .cat-title{ font-weight:800; font-size:16px; line-height:1.2; margin-bottom:6px; min-height:40px; display:flex; align-items:center; justify-content:center; text-align:center; } .cat-meta{ color:rgba(33,37,41,.70); font-size:13px; text-align:center; } .cat-count{ font-weight:800; color:#212529; } .cat-nav{ position:absolute; top:50%; transform:translateY(-50%); width:40px;height:40px; border-radius:50%; border:1px solid rgba(15,23,42,.10); background:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 10px 25px rgba(0,0,0,.10); z-index:2; cursor:pointer; } .cat-prev{ left:-10px; } .cat-next{ right:-10px; } .cat-nav[disabled]{ opacity:.35; cursor:not-allowed; } @media (max-width:768px){ .cat-h{ font-size:22px; } .cat-card{ min-width:230px; } .cat-title{ min-height:38px; } .cat-nav{ position:absolute; top:50%; transform:translateY(-50%); width:40px;height:40px; border-radius:50%; border:1px solid rgba(15,23,42,.10); background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 25px rgba(0,0,0,.10); z-index:9999; cursor:pointer; pointer-events:auto; } .cat-prev{ left:-14px; } .cat-next{ right:-14px; } .cat-scroll{ padding-left:44px; padding-right:44px; } } /* ========================================================= 11) ABOUT (HOME) ========================================================= */ .theme-premium :is(.about-card, .about-steps){ padding:22px; } .about-kicker{ display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(37,99,235,.06); color:var(--primary); font-weight:900; font-size:12px; margin-bottom:12px; } .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .about-mini{ display:flex; gap:12px; padding:12px; border-radius:18px; border:1px solid rgba(2,6,23,.08); background:#fff; } .about-mini .ic{ width:40px;height:40px;border-radius:14px; display:flex;align-items:center;justify-content:center; background:rgba(37,99,235,.06); color:var(--primary); } .about-mini .t{ font-weight:900; letter-spacing:-0.02em; } .about-mini .s{ font-weight:700; color:var(--muted); font-size:12px; } .step{ display:flex; gap:12px; padding:12px; border-radius:18px; border:1px solid rgba(2,6,23,.08); background:#fff; margin-top:10px; } .step .n{ width:34px;height:34px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:var(--primary); color:#fff; font-weight:900; } .step .t{ font-weight:900; letter-spacing:-0.02em; } .step .s{ color:var(--muted); font-weight:700; font-size:12px; } .steps-foot{ display:flex; flex-wrap:wrap; gap:8px; } .about-steps .mini-chip{ border:1px solid rgba(2,6,23,.10); background:rgba(37,99,235,.04); color:rgba(2,6,23,.70); } @media (max-width:991.98px){ .about-grid{ grid-template-columns:1fr; } } /* ========================================================= 12) JOB CARDS + FEATURED + FEED ========================================================= */ .theme-premium .job-item{ border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-sm); background:var(--card); transition:transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid); } .theme-premium .job-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(37,99,235,.14); } .theme-premium .nav-pills :is(.nav-link, a, button).active{ border-bottom:2px solid var(--dark); } /* Featured jobs internal layout */ .theme-premium .featured-jobs .job-item{ height:100%; display:flex; flex-direction:column; } .theme-premium .featured-jobs .job-item h5{ font-size:18px; line-height:1.25; margin-bottom:2px; } .theme-premium .featured-jobs .job-item small{ font-weight:600; color:var(--muted); } .theme-premium .featured-jobs .job-meta{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-bottom:12px; } .theme-premium .featured-jobs .job-meta span{ font-weight:600; color:var(--muted); font-size:14px; } .theme-premium .featured-jobs .job-logo{ width:56px; height:56px; border-radius:14px; object-fit:cover; } .theme-premium .featured-jobs .job-actions{ margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:flex-start; } /* CTA "Chi tiết công việc" */ .theme-premium :is(.featured-jobs, .job-feed) a.job-detail-link{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; line-height:1.1; color:#DC2626; text-decoration:none; padding:0; margin:0; background:transparent; border:0; box-shadow:none; } .theme-premium :is(.featured-jobs, .job-feed) a.job-detail-link i{ font-size:12px; transform:translateX(0); transition:transform var(--t-fast); } .theme-premium :is(.featured-jobs, .job-feed) a.job-detail-link:hover{ color:#B91C1C; text-decoration:underline; } .theme-premium :is(.featured-jobs, .job-feed) a.job-detail-link:hover i{ transform:translateX(3px); } /* If markup accidentally includes Bootstrap .btn on this link */ .theme-premium :is(.featured-jobs, .job-feed) a.job-detail-link.btn{ background:transparent; border:0; padding:0; box-shadow:none; color:inherit; } /* Job feed (new jobs) align with featured */ .theme-premium .job-feed .job-logo{ width:56px; height:56px; border-radius:14px; object-fit:cover; } .theme-premium .job-feed .job-meta{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-bottom:12px; } .theme-premium .job-feed .job-meta span{ font-weight:600; color:var(--muted); font-size:14px; } /* ========================================================= 14) BLOG LIST + RECENT POSTS ========================================================= */ /* Blog list card */ .post-item{ background:#fff; border:1px solid rgba(2,6,23,.08); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid); } .post-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(37,99,235,.18); } .post-item .post-img{ position:relative; overflow:hidden; } .post-item .post-img img{ width:100%; height:220px; object-fit:cover; display:block; transition:transform .45s ease; } .post-item:hover .post-img img{ transform:scale(1.06); } .post-item .post-date{ position:absolute; left:12px; bottom:12px; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.92); border:1px solid rgba(2,6,23,.08); font-size:12px; font-weight:900; color:rgba(2,6,23,.80); } .post-item .post-content{ padding:18px 18px 16px; } .post-item .post-title{ margin:0 0 10px; font-size:18px; line-height:1.35; font-weight:900; letter-spacing:-0.02em; color:rgba(2,6,23,.92); } .post-item .meta{ gap:10px; flex-wrap:wrap; } .post-item .meta i{ color:var(--primary); opacity:.9; } .post-item .meta span{ font-size:13px; font-weight:800; color:rgba(2,6,23,.60); } .post-item hr{ margin:14px 0 12px; border:0; border-top:1px solid rgba(2,6,23,.10); } .post-item .readmore{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:900; color:var(--primary); text-decoration:none; } .post-item .readmore i{ font-size:12px; transition:transform var(--t-fast); } .post-item:hover .readmore i{ transform:translateX(3px); } @media (max-width:576px){ .post-item .post-img img{ height:200px; } .post-item .post-title{ font-size:16px; } } /* Recent blog posts (home) */ .recent-blog-posts .post-item{ background:var(--surface-color); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid); overflow:hidden; } .recent-blog-posts .post-item:hover{ transform:translateY(-2px); box-shadow:0 22px 70px rgba(2,6,23,.10); border-color:rgba(37,99,235,.14); } .recent-blog-posts .post-item .post-img{ position:relative; overflow:hidden; } .recent-blog-posts .post-item .post-img img{ transition:transform .5s ease; display:block; width:100%; height:auto; } .recent-blog-posts .post-item:hover .post-img img{ transform:scale(1.08); } .theme-premium .recent-blog-posts .post-item .post-date{ position:absolute; inset:auto 0 0 0; height:var(--overlay-bar-h); border:0 !important; outline:0 !important; display:flex; align-items:flex-end; padding:0 16px 10px; background:linear-gradient( 180deg, rgba(2,6,23,0), rgba(2,6,23,.70) ); background:linear-gradient( 180deg, rgba(2,6,23,0), color-mix(in srgb, var(--overlay-ink) 70%, transparent) ); color:#fff; font-size:12px; font-weight:800; letter-spacing:0; text-transform:none; pointer-events:none; } .recent-blog-posts .post-item .post-content{ padding:26px 28px 24px; } .recent-blog-posts .post-item .post-title{ color:var(--heading-color); font-size:20px; font-weight:900; letter-spacing:-0.02em; line-height:1.25; margin:0 0 14px; transition:color .2s ease; } .recent-blog-posts .post-item .meta{ gap:10px; flex-wrap:wrap; } .recent-blog-posts .post-item .meta i{ font-size:16px; color:var(--accent-color); } .recent-blog-posts .post-item .meta span{ font-size:14px; font-weight:700; color:rgba(2,6,23,.55); } .recent-blog-posts .post-item hr{ margin:18px 0; border:0; border-top:1px solid rgba(2,6,23,.10); } .recent-blog-posts .post-item .readmore{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:14px; color:rgba(2,6,23,.65); text-decoration:none; transition:color .2s ease, transform .2s ease; } .recent-blog-posts .post-item .readmore i{ line-height:0; font-size:14px; transform:translateX(0); transition:transform .2s ease; } .recent-blog-posts .post-item:hover .post-title, .recent-blog-posts .post-item:hover .readmore{ color:var(--accent-color); } .recent-blog-posts .post-item:hover .readmore i{ transform:translateX(3px); } @media (max-width:576px){ .recent-blog-posts .post-item .post-content{ padding:22px 20px; } .recent-blog-posts .post-item .post-title{ font-size:18px; } } /* ========================================================= 15) BLOG DETAILS (SCOPE BY .blog-details-page) ========================================================= */ .blog-details-page{ --bd-ink:#0f172a; --bd-muted:#64748b; --bd-line:rgba(2,6,23,.10); --bd-bg:#f8fafc; --bd-card:#ffffff; --bd-primary:#2563eb; --bd-shadow:0 16px 40px rgba(2,6,23,.08); --bd-shadow-soft:0 10px 28px rgba(2,6,23,.06); } .blog-details-page .main{ background:var(--bd-bg); padding-bottom:60px; } .blog-details-page .page-title{ padding:28px 0 18px; background:transparent; } .blog-details-page .breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 10px; } .blog-details-page .breadcrumbs a{ color:var(--bd-muted); text-decoration:none; font-weight:700; } .blog-details-page .breadcrumbs .current{ color:var(--bd-ink); font-weight:900; } .blog-details-page .page-title h1{ font-weight:900; letter-spacing:-0.03em; margin:0; color:var(--bd-ink); } .blog-details-page .article{ border-radius:22px; overflow:hidden; border-color:var(--bd-line); } .blog-details-page .hero-img{ position:relative; overflow:hidden; } .blog-details-page .hero-img img{ width:100%; display:block; height:auto; transform:scale(1.02); transition:transform .45s ease; } .blog-details-page .article:hover .hero-img img{ transform:scale(1.06); } .blog-details-page .article-content{ padding:26px 28px 28px; } .blog-details-page .content-header .title{ font-size:30px; line-height:1.12; font-weight:900; letter-spacing:-0.04em; margin:0 0 16px; color:var(--bd-ink); } .blog-details-page .author-details h4{ margin:0; font-size:14px; font-weight:900; } .blog-details-page .author-details .role{ display:block; margin-top:2px; font-size:12px; color:var(--bd-muted); font-weight:700; } .blog-details-page .content{ padding-top:18px; } .blog-details-page .content p{ color:rgba(2,6,23,.70); font-weight:600; line-height:1.75; font-size:15px; } .blog-details-page .content h2{ margin-top:22px; margin-bottom:10px; font-size:20px; font-weight:900; letter-spacing:-0.02em; color:var(--bd-ink); } .blog-details-page .content ul{ padding-left:18px; } .blog-details-page .content ul li{ margin:10px 0; color:rgba(2,6,23,.70); font-weight:600; } .blog-details-page .content-image{ background:#fff; border:1px solid var(--bd-line); border-radius:18px; overflow:hidden; box-shadow:var(--bd-shadow-soft); margin:16px 0; } .blog-details-page .content-image.right-aligned{ float:right; width:min(320px, 100%); margin-left:18px; } .blog-details-page .content-image img{ width:100%; display:block; } .blog-details-page .content-image figcaption{ padding:10px 12px; font-size:12px; color:var(--bd-muted); font-weight:700; border-top:1px solid var(--bd-line); } @media (max-width:991.98px){ .blog-details-page .content-image.right-aligned{ float:none; width:100%; margin-left:0; } .blog-details-page .sidebar{ margin-top:18px; } } @media (max-width:576px){ .blog-details-page .article-content{ padding:20px; } .blog-details-page .content-header .title{ font-size:22px; } } /* ========================================================= 17) ISOTOPE / PORTFOLIO FILTERS ========================================================= */ .isotope-filters, .portfolio-filters{ list-style:none; padding-left:0; margin:0 0 16px; display:flex; flex-wrap:wrap; gap:10px; } .isotope-filters li, .portfolio-filters li{ cursor:pointer; user-select:none; padding:8px 14px; border:1px solid rgba(0,0,0,.1); border-radius:999px; background:#fff; transition:.15s; } .isotope-filters li.filter-active, .portfolio-filters li.filter-active{ background:#0d6efd; border-color:#0d6efd; color:#fff; } /* ========================================================= 18) AUTH (LOGIN / REGISTER) ========================================================= */ .auth{ padding:28px 0 40px; } .auth-shell{ border-radius:26px; border:1px solid rgba(15,23,42,.08); box-shadow:var(--shadow-hi); overflow:hidden; background:#fff; } .auth-visual{ min-height:560px; position:relative; background:#0b1220; } .auth-visual img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); } .auth-visual:before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(11,18,32,.65) 0%, rgba(11,18,32,.40) 45%, rgba(11,18,32,.18) 72%, rgba(11,18,32,0) 100%), radial-gradient(820px 380px at 20% 15%, rgba(37,99,235,.28), transparent 60%); pointer-events:none; } .auth-form{ padding:28px; } @media (min-width:992px){ .auth-form{ padding:38px; } } @media (max-width:991.98px){ .auth-visual{ min-height:320px; } } /* ========================================================= 19) DASHBOARD HELPERS ========================================================= */ .cardx{ height:100%; transition:transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid); } .cardx:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(15,23,42,.12); } .theme-premium.employer-dashboard .ic{ width:46px;height:46px;border-radius:14px; display:inline-flex; align-items:center; justify-content:center; background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.14); color:rgba(37,99,235,.95); flex:0 0 auto; } .pill{ display:inline-flex; gap:.5rem; align-items:center; padding:.33rem .7rem; border-radius:999px; border:1px solid rgba(15,23,42,.10); background:rgba(2,6,23,.02); color:rgba(11,18,32,.72); font-weight:800; font-size:.86rem; white-space:nowrap; } .panel-hidden{ display:none; } /* ========================================================= 20) FOOTER ========================================================= */ .theme-premium .footer{ background:#0B1733; } .footer .btn.btn-social{ margin-right:5px; width:35px;height:35px; display:flex; align-items:center; justify-content:center; color:var(--light); border:1px solid rgba(255,255,255,0.5); border-radius:14px; transition:.3s; } .footer .btn.btn-social:hover{ color:var(--primary); border-color:var(--light); } .footer .btn.btn-link{ display:block; margin-bottom:5px; padding:0; text-align:left; font-size:15px; font-weight:600; text-transform:capitalize; transition:.3s; opacity:.85; } .footer .btn.btn-link::before{ position:relative; content:"\f105"; font-family:"Font Awesome 5 Free"; font-weight:900; margin-right:10px; } .footer .btn.btn-link:hover{ letter-spacing:0; box-shadow:none; opacity:1; } .footer .form-control{ border-color:rgba(255,255,255,0.5); } .footer .copyright{ padding:25px 0; font-size:15px; border-top:1px solid rgba(255,255,255,.10); } .footer .copyright a{ color:var(--light); } .footer .footer-menu a{ margin-right:15px; padding-right:15px; border-right:1px solid rgba(255,255,255,.1); } .footer .footer-menu a:last-child{ margin-right:0; padding-right:0; border-right:none; } /* ========================================================= A11Y FOCUS RING (GLOBAL, SAFE) ========================================================= */ :where(a, button, .btn, .btn-prem, .btn-filter-icon, .cat-nav, .action-btn, .form-control, .form-select):focus-visible{ outline:none; box-shadow:0 0 0 .25rem rgba(37,99,235,.18); } /* ========================================================= HOVER PERFORMANCE (ONLY ON HOVER-CAPABLE DEVICES) ========================================================= */ @media (hover:hover){ .job-item:hover, .post-item:hover, .recent-blog-posts .post-item:hover, .cardx:hover{ will-change:transform; } } /* ========================================================= 22) REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto; } .cardx, .btn-prem, .btn, .post-item, .recent-blog-posts .post-item{ transition:none; } } /* ===== Dashboard sidebar status list - Stage 1 (safe) ===== */ .theme-premium.employer-dashboard .status-list a, .theme-premium.employer-dashboard a.status-item{ color: inherit; text-decoration: none; } .theme-premium.employer-dashboard a.status-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; } /* ===== Dashboard sidebar status list - Premium (Stage 2+3) ===== */ .theme-premium.employer-dashboard .status-list{ display:flex; flex-direction:column; gap:10px; margin-top:10px; } .theme-premium.employer-dashboard a.status-item{ padding:12px 12px; border:1px solid rgba(15,23,42,.10); border-radius:16px; background:#fff; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease; } .theme-premium.employer-dashboard a.status-item:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); border-color:rgba(15,23,42,.14); background:rgba(2,6,23,.01); } .theme-premium.employer-dashboard :where(a.status-item.active){ border-color:rgba(37,99,235,.28); background:rgba(37,99,235,.04); box-shadow:0 18px 45px rgba(37,99,235,.10); } /* inner */ .theme-premium.employer-dashboard .status-left{ display:flex; align-items:center; gap:10px; min-width:0; } .theme-premium.employer-dashboard .status-ic{ width:36px; height:36px; border-radius:14px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(15,23,42,.10); background:rgba(2,6,23,.02); flex:0 0 auto; } .theme-premium.employer-dashboard .status-ic i{ color:rgba(37,99,235,.95); } .theme-premium.employer-dashboard .status-name{ font-weight:900; letter-spacing:-.01em; color:rgba(11,18,32,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .theme-premium.employer-dashboard .status-count{ min-width:36px; height:30px; padding:0 10px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:900; color:rgba(11,18,32,.92); background:rgba(2,6,23,.05); border:1px solid rgba(15,23,42,.10); flex:0 0 auto; } .theme-premium.employer-dashboard :where(a.status-item.active) .status-count{ background:rgba(37,99,235,.12); border-color:rgba(37,99,235,.20); } /* ===== micro polish (optional, safe) ===== */ .theme-premium.employer-dashboard :where(a.status-item.active){ border-color:rgba(37,99,235,.32); background:rgba(37,99,235,.05); } .theme-premium.employer-dashboard :where(a.status-item.active) .status-ic{ border-color:rgba(37,99,235,.22); background:rgba(37,99,235,.06); } .theme-premium.employer-dashboard .status-count{ font-size:.95rem; letter-spacing:-.01em; } /* ============================== BLOG SIDEBAR (widgets) - Premium Scope: .blog-details-page ============================== */ .blog-details-page .sidebar .widgets-container{ display: grid; gap: 16px; } .blog-details-page .sidebar .widget-item{ padding:18px 18px; border-radius:22px; box-shadow:var(--bd-shadow-soft); border-color:rgba(15,23,42,.10); } .blog-details-page .sidebar .widget-title{ font-weight: 900; letter-spacing: -.02em; font-size: 22px; margin: 0 0 12px; color: rgba(11,18,32,.95); } /* Search widget */ .blog-details-page .sidebar .search-widget form{ position: relative; } .blog-details-page .sidebar .search-widget input[type="text"]{ width: 100%; height: 44px; padding: 10px 48px 10px 14px; border-radius: 14px; border: 1px solid rgba(15,23,42,.12); outline: none; background: #fff; font-weight: 600; } .blog-details-page .sidebar .search-widget input[type="text"]:focus{ border-color: rgba(37,99,235,.35); box-shadow: 0 0 0 4px rgba(37,99,235,.12); } .blog-details-page .sidebar .search-widget button{ position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(15,23,42,.10); background: rgba(2,6,23,.02); display: inline-flex; align-items: center; justify-content: center; } .blog-details-page .sidebar .search-widget button:hover{ background: rgba(2,6,23,.04); border-color: rgba(15,23,42,.16); } /* Recent posts */ .blog-details-page .sidebar .recent-posts-widget .post-item{ display: flex; gap: 12px; align-items: center; padding: 10px 10px; border-radius: 16px; border: 1px solid rgba(15,23,42,.08); background: rgba(2,6,23,.01); margin-bottom: 10px; } .blog-details-page .sidebar .recent-posts-widget .post-item:last-child{ margin-bottom: 0; } .blog-details-page .sidebar .recent-posts-widget .post-item img{ width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; border: 1px solid rgba(15,23,42,.10); } .blog-details-page .sidebar .recent-posts-widget .post-item h4{ margin: 0 0 4px; font-size: 16px; line-height: 1.25; font-weight: 900; letter-spacing: -.01em; } .blog-details-page .sidebar .recent-posts-widget .post-item h4 a{ color: rgba(11,18,32,.92); text-decoration: none; } .blog-details-page .sidebar .recent-posts-widget .post-item h4 a:hover{ color: #2563eb; } .blog-details-page .sidebar .recent-posts-widget .post-item time{ font-size: 13px; font-weight: 700; color: rgba(2,6,23,.55); } /* Categories */ .blog-details-page .sidebar .categories-widget ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .blog-details-page .sidebar .categories-widget li a{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(15,23,42,.08); background: #fff; text-decoration: none; font-weight: 800; color: rgba(11,18,32,.86); } .blog-details-page .sidebar .categories-widget li a span{ font-weight: 900; color: rgba(2,6,23,.55); } .blog-details-page .sidebar .categories-widget li a:hover{ border-color: rgba(37,99,235,.18); box-shadow: 0 10px 22px rgba(2,6,23,.06); transform: translateY(-1px); } /* ========================================================= BLOG DETAIL - COMMENTS (Stage 1: safe, scoped) Scope only: #blog-comments.blog-comments ========================================================= */ #blog-comments.blog-comments{ padding-top: 26px; padding-bottom: 26px; } #blog-comments.blog-comments .comments-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom: 14px; } #blog-comments.blog-comments .comments-header .title{ margin:0; font-weight: 900; letter-spacing: -.02em; } #blog-comments.blog-comments .comments-stats{ display:inline-flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(15,23,42,.10); box-shadow: 0 10px 28px rgba(2,6,23,.06); font-weight: 800; color: rgba(11,18,32,.86); } #blog-comments.blog-comments .comments-stats .count{ min-width: 28px; height: 28px; border-radius: 999px; display:inline-flex; align-items:center; justify-content:center; background: rgba(37,99,235,.10); color: rgba(37,99,235,.95); font-weight: 900; } #blog-comments.blog-comments .comments-container{ display:grid; gap: 14px; } #blog-comments.blog-comments .comment-box{ padding:14px; border-radius:22px; box-shadow:var(--shadow-sm); border-color:rgba(15,23,42,.10); } #blog-comments.blog-comments .comment-wrapper{ display:flex; gap: 14px; align-items:flex-start; } #blog-comments.blog-comments .avatar-wrapper{ position:relative; width: 54px; height: 54px; flex: 0 0 auto; border-radius: 16px; overflow:hidden; border:1px solid rgba(15,23,42,.10); background: rgba(2,6,23,.03); } #blog-comments.blog-comments .avatar-wrapper img{ width:100%; height:100%; object-fit:cover; display:block; } #blog-comments.blog-comments .status-indicator{ position:absolute; right: 6px; bottom: 6px; width: 10px; height: 10px; border-radius: 999px; background: rgba(34,197,94,.95); border: 2px solid #fff; } #blog-comments.blog-comments .comment-content{ min-width:0; flex:1 1 auto; } #blog-comments.blog-comments .comment-header{ display:flex; justify-content:space-between; align-items:flex-start; gap: 12px; } #blog-comments.blog-comments .user-info h4{ margin: 0; font-weight: 900; letter-spacing: -.01em; font-size: 1.05rem; } #blog-comments.blog-comments .time-badge{ margin-top: 6px; display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(15,23,42,.10); background: rgba(2,6,23,.02); color: rgba(2,6,23,.60); font-size: 13px; font-weight: 700; white-space: nowrap; } #blog-comments.blog-comments .engagement .likes{ display:inline-flex; align-items:center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(15,23,42,.10); background: #fff; color: rgba(2,6,23,.65); font-size: 13px; font-weight: 800; } #blog-comments.blog-comments .comment-body p{ margin: 10px 0 12px; color: rgba(11,18,32,.86); font-weight: 600; line-height: 1.6; } #blog-comments.blog-comments .comment-actions{ display:flex; gap: 10px; flex-wrap:wrap; } #blog-comments.blog-comments .comment-actions .action-btn{ appearance:none; border: 1px solid rgba(15,23,42,.12); background:#fff; color: rgba(11,18,32,.86); font-weight: 800; padding: 8px 12px; border-radius: 999px; display:inline-flex; align-items:center; gap: 8px; box-shadow: 0 8px 18px rgba(2,6,23,.06); transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), background var(--t-fast); cursor:pointer; } #blog-comments.blog-comments .comment-actions .action-btn:hover{ transform: translateY(-1px); border-color: rgba(37,99,235,.18); box-shadow: 0 10px 28px rgba(2,6,23,.08); background: rgba(2,6,23,.01); } @media (max-width: 576px){ #blog-comments.blog-comments .comment-box{ padding: 12px; } #blog-comments.blog-comments .avatar-wrapper{ width: 48px; height: 48px; border-radius: 14px; } } /* ========================================================= BLOG DETAIL - COMMENT FORM (Stage 2: safe, scoped) Scope only: #blog-comment-form.blog-comment-form ========================================================= */ #blog-comment-form.blog-comment-form{ padding-top: 18px; padding-bottom: 26px; } #blog-comment-form.blog-comment-form .form-header h3{ margin: 0 0 14px; font-weight: 900; letter-spacing: -.02em; color: rgba(11,18,32,.95); } /* layout grid spacing */ #blog-comment-form.blog-comment-form .row.gy-3{ --bs-gutter-y: 14px; } /* input group wrapper */ #blog-comment-form.blog-comment-form .input-group{ display:flex; flex-direction:column; gap: 8px; } #blog-comment-form.blog-comment-form .input-group label{ font-weight: 900; letter-spacing: -.01em; color: rgba(11,18,32,.88); margin: 0; } /* inputs + textarea */ #blog-comment-form.blog-comment-form input[type="text"], #blog-comment-form.blog-comment-form input[type="email"], #blog-comment-form.blog-comment-form textarea{ width: 100%; border-radius: 14px; border: 1px solid rgba(15,23,42,.12); background: #fff; padding: 12px 14px; font-weight: 600; color: rgba(11,18,32,.92); outline: none; transition: box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast); box-shadow: 0 10px 22px rgba(2,6,23,.05); } #blog-comment-form.blog-comment-form textarea{ min-height: 140px; resize: vertical; line-height: 1.5; } #blog-comment-form.blog-comment-form input::placeholder, #blog-comment-form.blog-comment-form textarea::placeholder{ color: rgba(2,6,23,.45); font-weight: 600; } #blog-comment-form.blog-comment-form input:focus, #blog-comment-form.blog-comment-form textarea:focus{ border-color: rgba(37,99,235,.35); box-shadow: 0 0 0 4px rgba(37,99,235,.12), 0 14px 28px rgba(2,6,23,.07); } /* error text from @error */ #blog-comment-form.blog-comment-form .error-text{ color: #dc2626; font-weight: 800; font-size: 13px; } /* submit button */ #blog-comment-form.blog-comment-form button[type="submit"]{ display:inline-flex; align-items:center; justify-content:center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(37,99,235,.18); background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-weight: 900; letter-spacing: -.01em; box-shadow: 0 18px 36px rgba(37,99,235,.22); transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast); cursor: pointer; } #blog-comment-form.blog-comment-form button[type="submit"]:hover{ transform: translateY(-1px); filter: brightness(1.02); box-shadow: 0 22px 46px rgba(37,99,235,.28); } #blog-comment-form.blog-comment-form button[type="submit"]:active{ transform: translateY(0); } /* make it full width on small screens */ @media (max-width: 576px){ #blog-comment-form.blog-comment-form button[type="submit"]{ width: 100%; } } /* ============================== BLOG DETAIL - META OVERLAY (category • date) Works with your markup: .meta-overlay .meta-categories .category .divider .reading-time ============================== */ .blog-details-page .meta-overlay{ position:absolute; left:16px; right:16px; bottom:16px; z-index:5; pointer-events:none; } .blog-details-page .meta-categories{ display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; background:rgba(255,255,255,.92); border:1px solid rgba(2,6,23,.10); box-shadow:0 10px 28px rgba(2,6,23,.10); backdrop-filter:blur(8px); } .blog-details-page .meta-categories .category{ pointer-events:auto; display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:rgba(37,99,235,.10); color:#2563eb; font-weight:900; text-decoration:none; line-height:1; } .blog-details-page .meta-categories .category:hover{ background:rgba(37,99,235,.14); } .blog-details-page .meta-categories .divider{ color:rgba(2,6,23,.45); font-weight:900; line-height:1; } .blog-details-page .meta-categories .reading-time{ display:inline-flex; align-items:center; gap:6px; color:rgba(2,6,23,.72); font-weight:800; line-height:1; white-space:nowrap; } .blog-details-page .meta-categories .reading-time i{ color:#2563eb; } /* ========================================================= PERF PACK (Phase 5/6/7) ========================================================= */ /* (5) Backdrop-filter is expensive on mobile/touch */ @media (hover:none){ .hero-panel, .adv-filter-pop, .blog-details-page .meta-categories{ -webkit-backdrop-filter:none; backdrop-filter:none; } .adv-filter-pop{ background:rgba(255,255,255,.98); } .blog-details-page .meta-categories{ background:rgba(255,255,255,.96); } .hero-panel{ box-shadow:0 14px 40px rgba(2,6,23,.18); } .adv-filter-pop{ box-shadow:0 14px 40px rgba(2,6,23,.12); } } /* (5) Only apply will-change on hover-capable devices */ @media (hover:hover){ .hero-panel:hover, .adv-filter-pop.show{ will-change:transform; } } /* (6) Skip rendering below-the-fold content until scrolled into view */ @supports (content-visibility:auto){ .job-feed, .recent-blog-posts, #blog-comments, .blog-details-page .sidebar{ content-visibility:auto; contain-intrinsic-size:1px 900px; } } .cat-nav.is-disabled{ opacity:.35; cursor:not-allowed; } /* ===== Employer Premium Polish ===== */ .section-tight{ padding-top: 28px; padding-bottom: 28px; } .hero-premium .hero-wrap{ border-radius: 22px; overflow: hidden; position: relative; box-shadow: 0 30px 90px rgba(2,6,23,.18); } .hero-premium img{ width: 100%; height: 420px; object-fit: cover; filter: saturate(1.05) contrast(1.05); } .hero-premium .overlay{ position:absolute; inset:0; background: radial-gradient(800px 380px at 20% 35%, rgba(37,99,235,.35), transparent 60%), linear-gradient(90deg, rgba(2,6,23,.88), rgba(2,6,23,.35)); } .hero-premium .content{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding: 44px; color: #fff; } .hero-premium .headline{ letter-spacing: -0.02em; line-height: 1.02; } .hero-premium .sub{ margin-top: 10px; opacity: .92; font-weight: 600; } .hero-badge{ display:inline-flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); width: fit-content; margin-bottom: 14px; font-weight: 800; } .hero-premium .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px; } .btn-prem{ min-height: 44px; border-radius: 12px; padding: 10px 14px; font-weight: 800; } /* Card Premium */ .cardx-prem{ border-radius: 18px; border: 1px solid rgba(226,232,240,.95); box-shadow: 0 20px 55px rgba(2,6,23,.06); transition: all .2s ease; } .cardx-prem:hover{ transform: translateY(-4px); box-shadow: 0 30px 80px rgba(2,6,23,.10); } .ic-lg{ width: 46px; height: 46px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: rgba(37,99,235,.10); color: #2563EB; } /* CTA Premium */ .cta-prem{ border-radius: 22px; border: 1px solid rgba(226,232,240,.95); background: radial-gradient(900px 300px at 15% 40%, rgba(37,99,235,.12), transparent 55%), #fff; box-shadow: 0 30px 90px rgba(2,6,23,.08); } /* Mobile */ @media (max-width: 576px){ .hero-premium img{ height: 360px; } .hero-premium .content{ padding: 22px; } .hero-premium .hero-actions .btn{ width: 100%; justify-content:center; } } /* ========================================================= VIP OVERRIDES (merged from vip.css) - Scoped under .theme-premium - No extra :root; VIP token aliases are in the main :root above ========================================================= */ /* ========================================================= 1) BASE POLISH ========================================================= */ body.theme-premium, .theme-premium body{ color:var(--ink); background: radial-gradient(1200px 600px at 18% 6%, rgba(37,99,235,.09), transparent 60%), radial-gradient(900px 480px at 86% 16%, rgba(14,165,233,.07), transparent 60%), #ffffff; } .theme-premium h1,.theme-premium h2,.theme-premium h3,.theme-premium h4,.theme-premium h5{ letter-spacing:-0.03em; } .theme-premium h1,.theme-premium .display-3{ font-weight:950; letter-spacing:-0.06em; } .theme-premium :is(p, .text-muted){ color:rgba(100,116,139,.92); } .theme-premium a{ text-decoration:none; } .theme-premium a:hover{ text-decoration:none; } /* ========================================================= 2) NAVBAR (glass) ========================================================= */ .theme-premium .navbar{ background:rgba(248,250,252,.84) !important; border-bottom:1px solid rgba(2,6,23,.06); box-shadow:none !important; backdrop-filter:blur(12px); } @media (hover:none){ .theme-premium .navbar{ backdrop-filter:none; background:rgba(248,250,252,.98) !important; } } .theme-premium .navbar .navbar-brand h1{ font-weight:950; letter-spacing:-0.06em; } .theme-premium .navbar-light .navbar-nav .nav-link{ font-weight:850; opacity:.78; } .theme-premium .navbar-light .navbar-nav .nav-link:hover, .theme-premium .navbar-light .navbar-nav .nav-link.active{ opacity:1; } /* CTA in navbar (uses your .btn-nav-cta) */ .theme-premium .btn-nav-cta{ box-shadow:0 18px 50px rgba(37,99,235,.28) !important; border-color:rgba(255,255,255,.14) !important; } .theme-premium .btn-nav-cta:hover{ box-shadow:0 26px 70px rgba(37,99,235,.34) !important; } /* ========================================================= 3) GLOBAL CARDS (VIP) — respect --card-* contract ========================================================= */ .theme-premium :is(.cardx, .post-item, .job-search-card){ transition:transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid), filter var(--t-mid); } .theme-premium :is(.cardx, .post-item):hover{ transform:translateY(-2px); box-shadow:var(--sh-md); border-color:rgba(37,99,235,.14); } /* ========================================================= 4) BUTTONS ========================================================= */ .theme-premium .btn{ border-radius:var(--r-md); font-weight:900; letter-spacing:-0.01em; transition:transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast), background var(--t-fast); } .theme-premium .btn-primary{ border-color:transparent !important; background:linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow:0 18px 44px rgba(37,99,235,.24); } .theme-premium .btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.03); box-shadow:0 26px 64px rgba(37,99,235,.30); } .theme-premium .btn-outline-secondary{ border-color:rgba(2,6,23,.14) !important; } /* ========================================================= 5) FORMS ========================================================= */ .theme-premium :is(.form-control, .form-select){ border-radius:var(--r-md) !important; border:1px solid rgba(2,6,23,.12); box-shadow:0 10px 22px rgba(2,6,23,.05); font-weight:650; } .theme-premium :is(.form-control, .form-select):focus{ border-color:rgba(37,99,235,.32); box-shadow:0 0 0 .25rem rgba(37,99,235,.12), 0 16px 34px rgba(2,6,23,.06); } /* ========================================================= 6) HERO — MAKEOVER ========================================================= */ .theme-premium .hero-ui{ position:relative; overflow:hidden; background: radial-gradient(1200px 700px at 12% 22%, rgba(37,99,235,.55), transparent 62%), radial-gradient(900px 520px at 84% 35%, rgba(14,165,233,.22), transparent 60%), radial-gradient(700px 420px at 70% 10%, rgba(255,255,255,.10), transparent 60%), linear-gradient(180deg, #0B1633 0%, #071126 100%); } .theme-premium .hero-ui:before{ content:""; position:absolute; inset:-2px; background: radial-gradient(800px 420px at 18% 20%, rgba(255,255,255,.10), transparent 60%), linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,0)), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 26px); opacity:.30; pointer-events:none; mix-blend-mode:overlay; } .theme-premium .hero-ui:after{ content:""; position:absolute; inset:0; background: radial-gradient(260px 260px at 22% 18%, rgba(37,99,235,.35), transparent 60%), radial-gradient(240px 240px at 82% 30%, rgba(14,165,233,.25), transparent 60%), radial-gradient(300px 300px at 60% 80%, rgba(37,99,235,.18), transparent 60%); filter:blur(6px); opacity:.85; pointer-events:none; } /* HERO shorter */ .theme-premium .hero-ui .container{ position:relative; z-index:2; padding-top: 8px !important; padding-bottom: 36px !important; } .theme-premium .hero-badge{ background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.16) !important; box-shadow:0 16px 40px rgba(2,6,23,.18); } .theme-premium .hero-title{ max-width:820px; } .theme-premium .hero-ui h1, .theme-premium .hero-ui .display-3{ color:#fff; text-shadow:0 18px 60px rgba(0,0,0,.35); } .theme-premium .hero-sub{ color:rgba(255,255,255,.74) !important; font-weight:650; } .theme-premium .trust-chip{ background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.14) !important; } /* Hero panels */ .theme-premium .hero-panel{ border-radius:var(--r-xl) !important; background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.14) !important; box-shadow:0 28px 90px rgba(2,6,23,.30) !important; } .theme-premium .panel-card{ border-radius:22px !important; background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.12) !important; } .theme-premium .panel-card:hover{ transform:translateY(-1px); background:rgba(255,255,255,.10) !important; border-color:rgba(255,255,255,.18) !important; } /* Search float position (consolidated) */ .theme-premium .hero-search-float{ margin-top: 0px !important; position: relative; z-index: 30; } @media (min-width: 992px){ .theme-premium .hero-search-float{ margin-top: -18px !important; } } /* Search card (glass) */ .theme-premium .job-search-card{ border-radius:var(--r-xl) !important; border:1px solid rgba(255,255,255,.14) !important; background:rgba(255,255,255,.92) !important; backdrop-filter:blur(12px); box-shadow:0 30px 90px rgba(2,6,23,.16) !important; position:relative; } .theme-premium .job-search-card :is(.form-control, .form-select){ border-radius:18px !important; border:1px solid rgba(2,6,23,.10) !important; box-shadow:0 12px 28px rgba(2,6,23,.06) !important; font-weight:700; } .theme-premium .job-search-card .btn-search{ border-radius:18px !important; background:linear-gradient(135deg, var(--primary), var(--secondary)) !important; box-shadow:0 22px 60px rgba(37,99,235,.26) !important; } .theme-premium .job-search-card .btn-search:hover{ transform:translateY(-1px); box-shadow:0 30px 80px rgba(37,99,235,.32) !important; } @media (hover:none){ .theme-premium .hero-panel, .theme-premium .job-search-card{ backdrop-filter:none; -webkit-backdrop-filter:none; } .theme-premium .job-search-card{ background:rgba(255,255,255,.98) !important; } } /* Mobile carousel height */ @media (max-width:768px){ .theme-premium .header-carousel .owl-carousel-item{ min-height: 420px !important; } } /* ========================================================= 7) FILTER PILLS ========================================================= */ .theme-premium .nav.nav-pills .nav-link{ border-radius:999px; border:1px solid rgba(2,6,23,.10); background:#fff; font-weight:900; color:rgba(2,6,23,.72); box-shadow:var(--sh-xs); transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), background var(--t-fast); } .theme-premium .nav.nav-pills .nav-link:hover{ transform:translateY(-1px); box-shadow:var(--sh-sm); border-color:rgba(2,6,23,.14); } .theme-premium .nav.nav-pills .nav-link.active{ background:rgba(37,99,235,.08) !important; border-color:rgba(37,99,235,.22) !important; color:rgba(2,6,23,.92) !important; } /* ========================================================= 8) JOB DETAIL (side cards) ========================================================= */ .theme-premium .job-detail-page .bg-light.rounded{ background:#fff !important; border:1px solid rgba(2,6,23,.08); border-radius:var(--r-lg) !important; box-shadow:var(--sh-sm); } .theme-premium .job-detail-page h4, .theme-premium .job-detail-page h3{ font-weight:950; letter-spacing:-0.03em; } /* ========================================================= 9) JOB ITEM VIP++ (KEEP YOUR HTML .job-item) ========================================================= */ .theme-premium .job-item{ border-radius: var(--r-xl) !important; border: 1px solid rgba(2,6,23,.08) !important; background: #fff !important; box-shadow: var(--sh-sm) !important; transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid); display:flex; flex-direction:column; } .theme-premium .job-item:hover{ transform: translateY(-4px); box-shadow: var(--sh-md) !important; border-color: rgba(37,99,235,.18) !important; } /* Logo (keeps .job-logo) */ .theme-premium .job-item .job-logo{ width:56px !important; height:56px !important; object-fit:contain; border-radius:16px !important; background:#fff; padding:6px; border:1px solid rgba(2,6,23,.06) !important; box-shadow:0 6px 16px rgba(2,6,23,.08); } /* Title + company */ .theme-premium .job-item h5{ font-weight:950; letter-spacing:-0.03em; margin-bottom:4px !important; } .theme-premium .job-item small.text-muted{ font-weight:700; color:rgba(2,6,23,.60) !important; } /* Meta as chips */ .theme-premium .job-item .job-meta{ display:flex !important; flex-wrap:wrap; gap:12px 14px; margin-top: 4px; color:rgba(2,6,23,.62); font-weight:700; font-size:.92rem; } .theme-premium .job-item .job-meta span{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background:rgba(2,6,23,.03); border:1px solid rgba(2,6,23,.06); max-width:100%; } /* Salary pill (best-effort) */ .theme-premium .job-item .job-meta span:has(.fa-money-bill-alt){ background:rgba(22,163,74,.10); border-color:rgba(22,163,74,.18); color:#16a34a; font-weight:900; } @supports not selector(:has(*)){ .theme-premium .job-item .job-meta span:last-child{ background:rgba(22,163,74,.10); border-color:rgba(22,163,74,.18); color:#16a34a; font-weight:900; } } /* Actions */ .theme-premium .job-item .job-actions{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(2,6,23,.06); } .theme-premium .job-item .job-detail-link{ display:inline-flex; align-items:center; gap:8px; font-weight:900; color:var(--primary); transition: transform var(--t-fast); } .theme-premium .job-item .job-detail-link:hover{ transform: translateX(3px); } /* ========================================================= 10) A11Y / REDUCED MOTION ========================================================= */ .theme-premium :where(a, button, .btn, .nav-link, .form-control, .form-select):focus-visible{ outline:none; box-shadow:0 0 0 .25rem rgba(37,99,235,.18) !important; } @media (prefers-reduced-motion: reduce){ .theme-premium *{ transition:none !important; } } /* ========================= Modern Premium Responsive ========================= */ .theme-premium .navbar .brand-mark{ width: 34px; height: 34px; border-radius: 10px; display:inline-flex; align-items:center; justify-content:center; background: rgba(37,99,235,.12); color:#2563EB; font-weight:800; } .theme-premium .navbar .brand-name{ font-weight:800; letter-spacing:-.02em; } .theme-premium .btn-nav{ border-radius:12px; padding:10px 14px; min-height:44px; } /* Job card */ .theme-premium .job-logo{ width: 56px; height: 56px; border-radius: 14px; object-fit: cover; } .theme-premium .job-title{ display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; } .theme-premium .job-card-actions{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; } /* Job detail premium */ .theme-premium .card-premium{ background:#fff; border: 1px solid rgba(226,232,240,.9); border-radius: 18px; box-shadow: 0 18px 45px rgba(2,6,23,.06); } .theme-premium .job-logo-lg{ width: 72px; height: 72px; border-radius: 16px; object-fit: cover; border: 1px solid rgba(226,232,240,.9); } .theme-premium .job-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius: 999px; background: rgba(37,99,235,.12); color:#1e40af; font-weight:700; font-size: 13px; } .theme-premium .job-chips{ display:flex; flex-wrap:wrap; gap:10px; } .theme-premium .chip{ display:inline-flex; align-items:center; padding:8px 10px; border-radius: 999px; background:#F8FAFC; border: 1px solid rgba(226,232,240,.9); color:#0F172A; font-size: 14px; } .theme-premium .chip-link{ text-decoration:none; } .theme-premium .job-content{ color:#0F172A; line-height:1.7; } .theme-premium .job-info .info-row{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid rgba(226,232,240,.8); } .theme-premium .job-info .info-row:last-child{ border-bottom:none; } .theme-premium .job-info .k{ color:#64748B; } .theme-premium .job-info .v{ color:#0F172A; font-weight:600; } /* Sticky CTA mobile */ @media (max-width: 991.98px){ .theme-premium .sticky-cta{ position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: rgba(248,250,252,.92); backdrop-filter: blur(10px); border-top: 1px solid rgba(226,232,240,.9); z-index: 999; } .theme-premium .sticky-cta .row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; } .theme-premium .page-content{ padding-bottom: 86px; } }