/* 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. */ /* ========================================================= 1) TOKENS (ONE :root ONLY) ========================================================= */ :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); --primary:#2563EB; --secondary:#1D4ED8; --light:#F5F8FF; --dark:#0F172A; --accent-color:var(--primary); --heading-color:var(--dark); --contrast-color:#FFFFFF; --muted:#64748B; --border:rgba(2,6,23,.10); --card:#FFFFFF; --bg:#FFFFFF; --brand:var(--primary); --brand2:var(--secondary); --shadow-xs:0 8px 18px rgba(2,6,23,.06); --shadow-sm:0 10px 28px rgba(2,6,23,.06); --shadow-md:0 22px 60px rgba(2,6,23,.10); --shadow-hi:0 22px 70px rgba(2,6,23,.16); --radius-sm:12px; --radius-md:14px; --radius-lg:22px; /* job detail tokens */ --jd-ink:#0F172A; --jd-muted:#64748B; --jd-line:rgba(2,6,23,.10); --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:#ffffff; } /* ========================================================= 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(--dark); background:#fff; 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) Goal: share common surface styles, reduce duplication, keep selectors unchanged. ========================================================= */ .theme-premium :is( .about-card, .about-steps, .job-search-card, .cardx, .blog-details-page .article, .blog-details-page .sidebar .widget-item, #blog-comments.blog-comments .comment-box ){ background:#fff; border:1px solid var(--border); } .theme-premium :is( .about-card, .about-steps, .job-search-card, .cardx, .blog-details-page .article, .blog-details-page .sidebar .widget-item, #blog-comments.blog-comments .comment-box ){ border-radius:22px; box-shadow:var(--shadow-sm); } /* tighter cards (job detail) keep their own radius/shadows below */ /* ========================================================= 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:-46px; z-index:20; } /* Search card (used by livewire component) */ .job-search-wrap{ position:relative; z-index:10; } .job-search-card{ padding:14px; border-radius:22px; /* keep explicit for safety */ box-shadow:0 22px 60px rgba(2,6,23,.12); /* stronger than base */ border-color:rgba(37,99,235,.10); /* premium tint */ } .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; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; } .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-nav{ display:none; } .cat-card{ min-width:230px; } .cat-title{ min-height:38px; } } /* ========================================================= 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); } .recent-blog-posts .post-item .post-date{ position:absolute; right:0; bottom:0; background:var(--accent-color); color:var(--contrast-color); text-transform:uppercase; font-size:12px; padding:7px 12px; font-weight:800; letter-spacing:.02em; border-top-left-radius:14px; } .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; box-shadow:var(--bd-shadow); overflow:hidden; /* base border/background inherited from card system */ 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; } /* ========================================================= 21) MOBILE PERFORMANCE TWEAKS ========================================================= */ @media (max-width:768px){ .navbar .navbar-brand h1{ font-size:18px; } .btn-nav-cta{ height:40px; padding:0 12px; font-size:13px; } /* lighter shadows on small devices */ .theme-premium :is(.job-item, .cat-item, .job-search-card){ box-shadow:0 10px 24px rgba(2,6,23,.08); } } /* ========================================================= 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) ===== */ /* active: rõ hơn chút */ .theme-premium.employer-dashboard :where(a.status-item.active){ border-color:rgba(37,99,235,.32); background:rgba(37,99,235,.05); } /* icon box: đồng bộ với active */ .theme-premium.employer-dashboard :where(a.status-item.active) .status-ic{ border-color:rgba(37,99,235,.22); background:rgba(37,99,235,.06); } /* count: căn “đúng vibe” hơn */ .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 ============================== */ /* overlay container */ .blog-details-page .meta-overlay{ position:absolute; left:16px; right:16px; bottom:16px; z-index:5; pointer-events:none; /* để không chặn click ảnh */ } /* pill wrapper */ .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); } /* category chip */ .blog-details-page .meta-categories .category{ pointer-events:auto; /* cho phép click category */ 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); } /* dot divider */ .blog-details-page .meta-categories .divider{ color:rgba(2,6,23,.45); font-weight:900; line-height:1; } /* date */ .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; } /* Prevent hover jank on touch devices */ /* ========================================================= PERF PACK (Phase 5/6/7) - (5) Reduce blur/shadow cost on touch devices - (6) Lazy render long lists with content-visibility - (7) Font: see HEAD snippet in assistant message ========================================================= */ /* (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; } /* keep readability when blur off */ .adv-filter-pop{ background:rgba(255,255,255,.98); } .blog-details-page .meta-categories{ background:rgba(255,255,255,.96); } /* soften very heavy shadows on touch */ .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 (already used in file; keep here as safety net) */ @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; } }