/* ── CareerBank · marketing-page responsive layer ─────────────────────────── For the white-nav marketing pages (index, students, professionals, employers, listings). Those pages are built from inline styles rather than cb.css, so this file only adds what they were missing below desktop: · a mobile menu (cb-marketing.js builds it) — below 900px the nav links were simply hidden, leaving phones with no way to reach other pages · fluid heading sizes, tighter section gutters, stacked CTA / footer The inline-style attribute selectors below match the pages' repeated section markup; they are scoped to html.cb-mkt (a class on each page's ) so nothing else on the site can pick them up. Breakpoints (shared with cb.css): 1023 tablet · 900 nav collapse · 767 large phone · 480 phone. ────────────────────────────────────────────────────────────────────────────── */ /* ── Nav bar ─────────────────────────────────────────────────────────────── */ .cb-menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1.5px solid #dfe2ee; border-radius: 10px; background: #fff; color: #18277c; cursor: pointer; transition: border-color .15s, background .15s; } .cb-menu-btn:hover { border-color: #18277c; background: #f6f7fc; } .cb-menu-btn svg { width: 20px; height: 20px; } .cb-menu-btn .cb-menu-close { display: none; } .cb-menu-btn[aria-expanded="true"] .cb-menu-open { display: none; } .cb-menu-btn[aria-expanded="true"] .cb-menu-close { display: block; } .cb-mobile-menu { display: none; border-top: 1px solid #eef0f6; background: #fff; padding: 8px 16px 20px; max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 18px 40px rgba(20, 32, 95, .10); } .cb-mobile-menu.open { display: block; } .cb-mobile-menu__links a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 4px; font-size: 16px; font-weight: 600; color: #3a3f55; border-bottom: 1px solid #f0f1f7; } .cb-mobile-menu__links a[aria-current="page"] { color: #18277c; } .cb-mobile-menu__links a::after { content: '›'; font-size: 20px; color: #b4b9cf; } .cb-mobile-menu__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; } .cb-mobile-menu__actions a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 600; } .cb-mobile-menu__actions a:only-child { grid-column: 1 / -1; } .cb-mobile-menu__actions .is-ghost { color: #18277c; border: 1.5px solid #dfe2ee; background: #fff; } .cb-mobile-menu__actions .is-primary { color: #fff; background: #18277c; } @media (max-width: 900px) { .cb-menu-btn { display: inline-flex; } } @media (max-width: 767px) { html.cb-mkt #main-nav > nav { padding: 12px 16px !important; gap: 12px !important; } html.cb-mkt #main-nav > nav > a:first-child img { height: 40px !important; width: 128px !important; } html.cb-mkt .cb-nav-actions { gap: 8px !important; } } /* Below this the Log in / primary CTA no longer fit beside the logo — they move into the menu (LinkedIn keeps "Join now / Sign in" the same way). */ @media (max-width: 560px) { html.cb-mkt .cb-nav-actions > .cb-btn-ghost, html.cb-mkt .cb-nav-actions > .cb-btn-primary { display: none !important; } } @media (min-width: 901px) { .cb-mobile-menu { display: none !important; } } /* ── Sections & typography ───────────────────────────────────────────────── */ html.cb-mkt h2 { overflow-wrap: break-word; } @media (max-width: 1023px) { html.cb-mkt section[style*="padding: 90px 32px"] { padding-top: 64px !important; padding-bottom: 64px !important; } } @media (max-width: 767px) { /* Section gutters: 32px → 20px so cards get the width back. */ html.cb-mkt [style*="padding: 0 32px"] { padding-left: 20px !important; padding-right: 20px !important; } html.cb-mkt [style*="padding: 90px 32px"] { padding: 52px 20px !important; } html.cb-mkt [style*="padding: 90px 32px 20px"]{ padding: 52px 20px 8px !important; } html.cb-mkt [style*="padding: 60px 32px"], html.cb-mkt [style*="padding: 36px 32px 90px"], html.cb-mkt [style*="padding: 30px 32px 60px"]{ padding-left: 20px !important; padding-right: 20px !important; padding-bottom: 52px !important; } html.cb-mkt [style*="padding: 70px 0 80px"] { padding: 52px 0 56px !important; } html.cb-mkt .cb-page-hero { padding: 56px 20px 48px !important; } /* Headings: fixed 40–46px desktop sizes → fluid. */ html.cb-mkt main h2, html.cb-mkt section h2 { font-size: clamp(28px, 7.4vw, 40px) !important; margin-bottom: 32px !important; } html.cb-mkt .cb-page-hero-h1 { font-size: clamp(34px, 9.5vw, 42px) !important; } html.cb-mkt .cb-hero-h1 { font-size: clamp(40px, 12vw, 52px) !important; } /* Stats / proof strip: two tidy columns instead of a ragged wrap. */ html.cb-mkt .cb-stats-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px !important; padding-left: 20px !important; padding-right: 20px !important; } html.cb-mkt .cb-stats-row > * { max-width: none !important; min-width: 0; } /* CTA banner: icon + copy + button stack instead of squeezing side by side. */ html.cb-mkt .cb-cta-box { padding: 28px 22px !important; border-radius: 18px !important; flex-direction: column; align-items: stretch !important; gap: 22px !important; } html.cb-mkt .cb-cta-lead { flex-direction: column; align-items: flex-start !important; gap: 14px !important; } html.cb-mkt .cb-cta-lead h2 { font-size: 24px !important; margin-bottom: 8px !important; } html.cb-mkt .cb-cta-box > a { justify-content: center; } /* Footer: brand full width, link columns two-up (was one long list). */ html.cb-mkt .cb-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 20px !important; padding-bottom: 32px !important; } html.cb-mkt .cb-footer-grid > :first-child { grid-column: 1 / -1; } html.cb-mkt .cb-footer-bottom { flex-direction: column; align-items: flex-start !important; gap: 12px !important; } html.cb-mkt .cb-footer-legal { flex-wrap: wrap; gap: 10px 20px !important; } } @media (max-width: 480px) { html.cb-mkt .cb-stats-row { grid-template-columns: 1fr; } html.cb-mkt [style*="padding: 0 32px"], html.cb-mkt [style*="padding: 90px 32px"], html.cb-mkt [style*="padding: 60px 32px"], html.cb-mkt [style*="padding: 36px 32px 90px"], html.cb-mkt [style*="padding: 30px 32px 60px"] { padding-left: 16px !important; padding-right: 16px !important; } } @media (prefers-reduced-motion: no-preference) { .cb-mobile-menu.open { animation: cbMenuIn .2s ease-out; } @keyframes cbMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } } /* ── index.html: tilted device mockup ───────────────────────────────────── The scroll-tilt script scales the card up to 1.05×, so without side gutters it bleeds past the viewport on laptops/tablets (up to ~70px each side at 1024). On phones the desktop spacing left a tall empty band. */ @media (max-width: 1240px) { /* 7vw: the scale plus the rotateX perspective widens the card's near (bottom) edge by ~12% at the start of the tilt. */ html.cb-mkt #hero-container { padding-left: clamp(16px, 7vw, 88px) !important; padding-right: clamp(16px, 7vw, 88px) !important; } } @media (max-width: 480px) { /* Hero CTAs: equal-width stack rather than two ragged pill widths. */ html.cb-mkt .parallax__layer-cta > a { flex: 1 1 100%; max-width: 320px; justify-content: center; } } @media (max-width: 640px) { html.cb-mkt #hero-container { padding-bottom: 16px !important; } html.cb-mkt #hero-container > div { padding: 24px 0 8px !important; } html.cb-mkt #hero-card { height: 20rem !important; padding: 10px !important; border-radius: 22px !important; } html.cb-mkt #hero-card h2 { top: 20px !important; left: 20px !important; right: 20px !important; font-size: 24px !important; } html.cb-mkt #hero-card > div > div[style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; left: 12px !important; right: 12px !important; bottom: 12px !important; } html.cb-mkt #hero-card > div > div[style*="repeat(4, 1fr)"] > div { padding: 12px !important; } }