/** * /assets/css/mobile-responsive.css * * Mobile-first responsive overrides for salarycalculator.co.ke * * Strategy: * - Phones (≤640px): Progressive disclosure — key info first, extras hidden * behind
or collapsed sections. Nothing cut, just tucked away. * - Tablets (641–1024px): Minor layout tweaks, two-column where useful. * - Desktop (1025px+): Already good; only small refinements applied. * * SEO note: All hidden content uses
/ or CSS class toggles * so it remains fully indexed by crawlers (no JS required to be "visible"). * * Append this stylesheet LAST in your so it overrides correctly: * */ /* ══════════════════════════════════════════════════════════ 0. CSS CUSTOM PROPERTIES ══════════════════════════════════════════════════════════ */ :root { --sc-green: #16a34a; --sc-green-dark: #15803d; --sc-green-light: #dcfce7; --sc-text: #0f172a; --sc-muted: #475569; --sc-border: #e2e8f0; --sc-radius: 10px; --sc-shadow: 0 2px 8px rgba(0,0,0,0.07); --sc-transition: 0.2s ease; } [data-theme="dark"] { --sc-text: #f1f5f9; --sc-muted: #94a3b8; --sc-border: #334155; } /* ══════════════════════════════════════════════════════════ 1. GLOBAL BASE (applies at all sizes) ══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; min-height: 100dvh; /* use dvh to account for mobile chrome bar */ } /* Smooth tap highlight removal */ a, button, [role="button"] { -webkit-tap-highlight-color: transparent; } /* Improve touch target size */ button, .btn, a.btn, input[type="submit"] { min-height: 44px; touch-action: manipulation; } /* Inputs & selects: prevent iOS zoom on focus (font-size >= 16px) */ input, select, textarea { font-size: 16px !important; } /* ══════════════════════════════════════════════════════════ 2. MOBILE (≤640px) — PRIMARY FOCUS ══════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* ── Layout shell ─────────────────────────────────── */ .container, .wrapper, .page-wrapper, main { padding-left: 1rem !important; padding-right: 1rem !important; } /* ── Navigation ───────────────────────────────────── */ /* Tighten the nav so it fits on small screens */ header nav, .navbar, .site-header { padding: 0.65rem 1rem !important; gap: 0.5rem; } /* Hide secondary nav items behind a hamburger on mobile */ .nav-links, .nav__links { display: none; } .nav-links.is-open, .nav__links.is-open { display: flex; flex-direction: column; position: fixed; inset: 0; background: #fff; z-index: 8000; padding: 5rem 2rem 2rem; gap: 1.5rem; font-size: 1.1rem; overflow-y: auto; } [data-theme="dark"] .nav-links.is-open, [data-theme="dark"] .nav__links.is-open { background: #0f172a; } /* Show hamburger button (hidden on desktop) */ .nav-hamburger, .menu-toggle, [data-hamburger] { display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; background: none; border: none; color: var(--sc-text); flex-shrink: 0; } /* ── Hero / page title ────────────────────────────── */ h1 { font-size: clamp(1.5rem, 5vw, 2rem) !important; line-height: 1.2; } h2 { font-size: clamp(1.15rem, 4vw, 1.6rem) !important; } h3 { font-size: clamp(1rem, 3.5vw, 1.25rem) !important; } /* ── Calculator form ──────────────────────────────── */ .calc-form, .calculator-form, #calculator-form, form.salary-form { padding: 1rem !important; border-radius: var(--sc-radius) !important; } /* Stack label+input vertically */ .form-row, .input-row, .field-group { flex-direction: column !important; gap: 0.5rem !important; } /* Full-width inputs */ .form-control, .input-field, input[type="number"], input[type="text"], input[type="email"], select { width: 100% !important; padding: 0.75rem !important; border-radius: 8px !important; } /* Calculate button full-width */ .btn-calculate, .calc-submit, button[type="submit"], #calculate-btn { width: 100% !important; padding: 0.9rem !important; font-size: 1rem !important; border-radius: 10px !important; } /* ── Collapsible "Advanced Options" ──────────────── */ /* Hide advanced options behind a details/summary toggle on mobile. Desktop shows them always. */ .advanced-options, .sc-advanced, #advanced-options { margin-top: 0.75rem; } /* If wrapped in
, style it nicely */ details.sc-collapsible { border: 1px solid var(--sc-border); border-radius: 8px; padding: 0; overflow: hidden; } details.sc-collapsible summary { padding: 0.75rem 1rem; font-weight: 600; font-size: 0.9rem; color: var(--sc-green); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; user-select: none; } details.sc-collapsible summary::after { content: "＋"; font-size: 1.1rem; transition: transform 0.2s; } details.sc-collapsible[open] summary::after { content: "−"; } details.sc-collapsible > *:not(summary) { padding: 0 1rem 1rem; } /* ── Results breakdown table ──────────────────────── */ /* Make the breakdown table scroll horizontally if wide */ .sc-breakdown, .salary-breakdown, #salary-breakdown-table, .results-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--sc-radius); } /* Key numbers: bigger + prominent on mobile */ .result-net, .net-pay, .sc-net-pay, [data-result="net"] { font-size: clamp(1.75rem, 6vw, 2.5rem) !important; font-weight: 800 !important; } /* ── Stats / comparison cards (horizontal scroll) ── */ .stats-grid, .comparison-grid, .sc-percentile-grid, .cards-row { display: flex !important; flex-direction: row !important; overflow-x: auto !important; gap: 0.75rem !important; padding-bottom: 0.5rem !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .stats-grid > *, .comparison-grid > *, .sc-percentile-grid > *, .cards-row > * { flex: 0 0 80vw !important; max-width: 85vw !important; scroll-snap-align: start; } /* ── Financial tools affiliate cards ─────────────── */ .sc-financial-tools__grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; } .sc-fin-card { padding: 1rem !important; } /* ── Share card ───────────────────────────────────── */ .sc-share-buttons { flex-wrap: wrap !important; gap: 0.5rem !important; } .sc-share-btn { flex: 1 1 calc(50% - 0.5rem) !important; min-width: 120px !important; justify-content: center !important; padding: 0.6rem 0.5rem !important; font-size: 0.82rem !important; } .sc-share-card__preview { display: none; /* Hide the long text preview on mobile — too much space */ } /* ── Newsletter widget ────────────────────────────── */ .sc-newsletter { flex-direction: column !important; text-align: center !important; } .sc-newsletter__form { flex-direction: column !important; width: 100% !important; } .sc-newsletter__input, .sc-newsletter__btn { width: 100% !important; } /* ── Blog / articles grid ─────────────────────────── */ .blog-grid, .articles-grid, .news-grid, .sc-blog-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } /* ── Salary profession pages table ───────────────── */ .profession-table, .salary-table, table.sc-table { font-size: 0.82rem !important; } .profession-table th, .profession-table td { padding: 0.5rem 0.4rem !important; } /* Hide less-critical columns on mobile */ .col-optional, .hide-mobile, th.hide-mobile, td.hide-mobile { display: none !important; } /* ── Ad slots ─────────────────────────────────────── */ #ad-sidebar { display: none !important; /* Sidebar ad hidden on mobile */ } /* ── Premium gate ─────────────────────────────────── */ .sc-premium-gate { padding: 0.75rem; } .sc-premium-gate__inner { padding: 1.5rem 1rem !important; border-radius: 12px !important; } .sc-premium-gate__pricing { flex-direction: column !important; } .sc-price-card--best { order: -1; } /* ── Footer ───────────────────────────────────────── */ footer, .site-footer, .footer { padding: 2rem 1rem 1.5rem !important; } .footer-grid, .footer-cols, .footer__columns { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; } .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; } /* ── Breadcrumbs ──────────────────────────────────── */ .breadcrumb, .breadcrumbs { font-size: 0.78rem !important; overflow-x: auto; white-space: nowrap; } /* ── Modals / drawers ─────────────────────────────── */ .modal, .dialog { margin: 0 !important; border-radius: 16px 16px 0 0 !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; max-height: 90dvh !important; overflow-y: auto !important; width: 100% !important; max-width: 100% !important; } } /* ══════════════════════════════════════════════════════════ 3. TABLET (641–1024px) ══════════════════════════════════════════════════════════ */ @media (min-width: 641px) and (max-width: 1024px) { /* Two-column calc + results split */ .calc-layout, .sc-calc-layout { grid-template-columns: 1fr 1fr; gap: 1.5rem; } /* Two-column blog */ .blog-grid, .articles-grid, .news-grid, .sc-blog-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Financial cards: 2 columns on tablet */ .sc-financial-tools__grid { grid-template-columns: repeat(2, 1fr) !important; } /* Share buttons: row */ .sc-share-buttons { flex-wrap: nowrap !important; overflow-x: auto; } .footer-grid, .footer-cols, .footer__columns { grid-template-columns: repeat(3, 1fr) !important; } } /* ══════════════════════════════════════════════════════════ 4. DESKTOP (1025px+) — light touch ══════════════════════════════════════════════════════════ */ @media (min-width: 1025px) { /* Always show nav links */ .nav-links, .nav__links { display: flex !important; } /* Hide hamburger on desktop */ .nav-hamburger, .menu-toggle, [data-hamburger] { display: none !important; } /* Financial cards: 3 columns */ .sc-financial-tools__grid { grid-template-columns: repeat(3, 1fr) !important; } /* Show the share preview text on desktop */ .sc-share-card__preview { display: block !important; } } /* ══════════════════════════════════════════════════════════ 5. UTILITY CLASSES (all breakpoints) ══════════════════════════════════════════════════════════ */ /* Tap-safe link underlines */ a { text-underline-offset: 2px; } /* Scrollbar styling for horizontal carousels */ .sc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } .sc-scroll-x::-webkit-scrollbar { height: 4px; } .sc-scroll-x::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; } /* Visually hide but keep accessible (for screen readers + SEO) */ .sc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Skip to main content link (accessibility + Core Web Vitals) */ .sc-skip-link { position: absolute; top: -100%; left: 1rem; background: var(--sc-green); color: #fff; padding: 0.5rem 1rem; border-radius: 0 0 8px 8px; font-weight: 600; text-decoration: none; z-index: 9999; transition: top 0.2s; } .sc-skip-link:focus { top: 0; } /* Focus-visible ring */ :focus-visible { outline: 2px solid var(--sc-green); outline-offset: 3px; } /* ══════════════════════════════════════════════════════════ 6. SEO / PERFORMANCE HELPERS ══════════════════════════════════════════════════════════ */ /* Prevent layout shift from images */ img, video, iframe { max-width: 100%; height: auto; display: block; } /* Lazy-loaded image fade-in */ img.lazy { opacity: 0; transition: opacity 0.3s ease; } img.lazy.loaded { opacity: 1; } /* Print: hide ads, banner, nav on print */ @media print { #sc-trial-banner, .sc-trial-countdown, #ad-after-result, #ad-sidebar, #ad-homepage-mid, .navbar, .site-header, .nav-hamburger, .sc-financial-tools, .sc-share-card { display: none !important; } body { font-size: 11pt; color: #000; } a { color: inherit; text-decoration: none; } .sc-premium-gate, .sc-signin-gate { display: none !important; } }