:root { --brand:#127f6b; } body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; } .header { display:flex; align-items:center; gap:12px; padding:16px 20px; background:#f7f9f9; border-bottom:1px solid #e5e7eb; } .logo { height:36px; } .grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:12px; padding:16px; } .job-card { display:block; padding:14px; border:1px solid #e5e7eb; border-radius:12px; text-decoration:none; color:#111; background:#fff; } .job-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); transform: translateY(-1px); transition:.2s; } .job-title { font-weight:700; margin-bottom:6px; } .company { font-size:14px; color:#444; margin-bottom:8px; } .description { font-size:14px; color:#333; min-height:40px; } .cta { margin-top:10px; font-weight:600; color:#fff; background:var(--brand); display:inline-block; padding:8px 10px; border-radius:10px; } .filters { display:flex; gap:8px; padding:10px 16px; flex-wrap:wrap; } select { padding:6px 8px; } #loadMoreBtn { margin: 12px 16px 24px; padding:10px 14px; border:0; border-radius:10px; background:var(--brand); color:#fff; font-weight:600; cursor:pointer; } /* ===== Layout shell (center everything) ===== */ .page, .filters, .job-list { max-width: 820px; /* sweet spot for single column */ margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; } /* ===== Compact header (“hero”) ===== */ .header { padding: 14px 0; border-bottom: 1px solid #f0f0f0; } .header h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; } body.compact-hero .header { /* the hook */ padding: 8px 0; } @media (min-width: 900px) { .header h1 { font-size: 30px; } } /* ===== Filters row (always visible, centered) ===== */ .filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin: 14px auto 12px; } .filters select { appearance: none; background-color: #fff; border: 1px solid #e5e7eb; border-radius: 10px; height: 42px; padding: 0 12px; font-size: 15px; min-width: 220px; max-width: 260px; } .filters select:focus { outline: none; border-color: #22c55e22; box-shadow: 0 0 0 3px #22c55e22; } /* ===== Single-column job cards ===== */ .job-list { display: block; /* ensure no grid/masonry leftovers apply */ } .job-card { display: block; width: 100%; background: #fff; border: 1px solid #e5e7eb; border-left: 6px solid var(--brand, #118a63); /* uses your brand var if set */ border-radius: 14px; padding: 16px 16px 14px; margin: 12px auto; box-shadow: 0 1px 2px rgba(16,24,40,.06); text-decoration: none; color: inherit; transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease; } .job-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,24,40,.10); border-color: var(--brand, #118a63); } .job-title { font-size: 20px; line-height: 1.25; font-weight: 800; margin: 0 0 6px 0; color: #0f172a; } .company { font-weight: 600; color: #334155; margin: 0 0 8px 0; } .description { color: #475569; line-height: 1.45; margin: 0 0 12px 0; } /* CTA pill */ .job-card .cta { display: inline-block; background: var(--brand, #118a63); color: #fff; font-weight: 700; border-radius: 999px; padding: 9px 14px; margin-top: 2px; transition: background .12s ease, transform .06s ease; } .job-card:hover .cta { background: #0f6b4e; } /* ===== “Load more” centered ===== */ #loadMoreBtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; background: #0f766e; color: #fff; font-weight: 700; border: none; margin: 8px auto 32px; cursor: pointer; } #loadMoreBtn:hover { background: #0d615b; } #loadMoreBtn:disabled { opacity: .5; cursor: default; } /* --- Compact header band (you can keep OR comment out the next two blocks) --- */ .header { padding: 8px 16px; /* was larger */ border: 0; } .header h1 { font-size: 28px; /* smaller title */ line-height: 1.15; margin: 6px 0 10px; } /* If you prefer to remove the header entirely, uncomment this: */ /* .header { display: none !important; } */ /* ===== SINGLE-COLUMN JOB LIST (centered) ===== */ /* The list container should stack items vertically and center them */ #jobList { /* kill any grid that might be set earlier */ display: flex !important; flex-direction: column !important; align-items: center; /* center the cards horizontally */ justify-content: flex-start; gap: 18px; /* space between cards */ max-width: 980px; /* page width for the column */ margin: 0 auto; /* center the whole column */ padding: 0 12px; } /* Each card becomes a full-width block within that column */ #jobList .job-card { display: block !important; width: 100%; max-width: 900px; /* card width; tweak as you like */ margin: 0 auto; box-sizing: border-box; /* knock out old grid/float rules if they exist */ float: none !important; grid-column: auto !important; } /* If a parent somewhere forced a grid with columns, neutralize it too */ #jobList[class*="grid"], #jobList[class*="cards"], #jobList[class*="columns"] { grid-template-columns: 1fr !important; } /* Filters bar centered and same width as the column */ .filters, .filters form { max-width: 980px; margin: 0 auto 10px; padding: 0 12px; } /* Job cards centered look */ .job-card { display: flex; flex-direction: column; align-items: center; /* Center horizontally */ justify-content: center; /* Center vertically if text is small */ text-align: center; /* Center text inside */ margin: 1rem auto; /* Auto margins keep them centered in container */ max-width: 800px; /* Prevents cards from going full-width */ } /* Job title bigger and bold */ .job-card .job-title { font-size: 1.25rem; font-weight: bold; color: #006400; /* dark green like Roadwarriors */ margin-bottom: 0.5rem; text-align: center; } /* Company name smaller, directly under job title */ .job-card .company { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; text-align: center; } /* Job description */ .job-card .description { font-size: 0.95rem; margin: 0.5rem 0 1rem; text-align: center; } /* Button styling */ .job-card .cta { display: inline-block; background: #008000; /* Roadwarriors green */ color: #fff; padding: 0.5rem 1rem; border-radius: 5px; font-weight: bold; margin-top: auto; text-align: center; } /* Center the load more button */ #loadMoreBtn { display: block; margin: 2rem auto; /* auto centers horizontally */ padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: bold; background: #008000; /* green */ color: #fff; border: none; border-radius: 25px; cursor: pointer; text-align: center; } #loadMoreBtn:hover { background: #006400; /* darker green on hover */ } /* Container */ #jobList { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 900px; /* keeps things from being too wide */ margin: 0 auto; padding: 0 1rem; /* some space on mobile */ } /* Job card responsiveness */ .job-card { width: 100%; margin: 1rem 0; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); background: #fff; }