/* ===================================================================== PayStubCheck 2026 visual system — shared theme, header, mega-menus, mobile drawer, search dialog and footer. Loaded last on every page. Typography families are inherited unchanged (Bricolage Grotesque, DM Sans, JetBrains Mono); this file only adjusts colour, spacing, hierarchy and surfaces. ===================================================================== */ :root { --psx-forest-950: #04211A; --psx-forest-900: #072B21; --psx-forest-850: #093327; --psx-forest-800: #0B3B2D; --psx-forest-700: #0F4D3A; --psx-emerald-600: #136B4B; --psx-emerald-500: #187A55; --psx-jade-500: #22936A; --psx-jade-400: #39A97B; --psx-mint-300: #9FD8B8; --psx-mint-200: #CDEBD9; --psx-mint-100: #E5F4EB; --psx-mint-50: #F1F8F3; --psx-ivory: #FBFAF5; --psx-paper: #F6F8F2; --psx-white: #FFFFFF; --psx-orange-400: #FDB447; --psx-orange-500: #F7A02E; --psx-orange-600: #EE8B1C; --psx-orange-700: #B85F00; --psx-gold: #E2B45A; --psx-ink: #10241C; --psx-ink-2: #2E4239; --psx-muted: #566A61; --psx-line: #DCE7E0; --psx-line-2: #C9DCD1; --psx-shadow-sm: 0 2px 6px rgba(7, 43, 33, .06); --psx-shadow: 0 10px 28px rgba(7, 43, 33, .09); --psx-shadow-lg: 0 24px 60px rgba(4, 33, 26, .18); --psx-radius: 16px; --psx-nav-h: 68px; --psx-orange-grad: linear-gradient(180deg, #FDB447 0%, #F59A23 100%); --psx-orange-grad-hover: linear-gradient(180deg, #FFC062 0%, #F28B12 100%); --psx-forest-grad: linear-gradient(135deg, #0B3B2D 0%, #072B21 100%); /* legacy aliases repointed at the 2026 palette (colour only) */ --psc-forest: var(--psx-forest-800); --psc-forest-deep: var(--psx-forest-900); --psc-action: var(--psx-emerald-500); --psc-action-hover: var(--psx-emerald-600); --psc-action-pressed: var(--psx-forest-700); --psc-ember: var(--psx-orange-700); --psc-ember-hover: #9A4F00; --psc-ember-bright: var(--psx-orange-500); --psc-ink: var(--psx-ink); --psc-muted: var(--psx-muted); --psc-paper: var(--psx-ivory); --psc-mint: var(--psx-mint-100); --psc-line: var(--psx-line); --psc-focus: var(--psx-emerald-500); --bg: var(--psx-ivory); --green-pale: var(--psx-paper); --green-light: var(--psx-mint-100); --orange-light: #FFF3E2; --dark-bg: var(--psx-forest-900); } html { scroll-padding-top: calc(var(--psx-nav-h) + 16px); } body { background-color: var(--psx-ivory); color: var(--psx-ink); } ::selection { background: #FBD89A; color: var(--psx-forest-900); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--psx-orange-500); outline-offset: 2px; } .psx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .psx-i { width: 1em; height: 1em; flex: 0 0 auto; } /* --------------------------------------------------------------------- HEADER --------------------------------------------------------------------- */ #main-nav.psx-nav { height: var(--psx-nav-h); padding: 0 clamp(16px, 4.6vw, 88px); background-color: var(--psx-forest-900); background-image: radial-gradient(120% 220% at 100% 0%, rgba(34, 147, 106, .22) 0%, rgba(34, 147, 106, 0) 46%), none, linear-gradient(180deg, #08311F00 0%, #04211A 100%); background-repeat: no-repeat; background-position: 0 0, right top, 0 0; background-size: auto, 46% 100%, auto; border-bottom: 1px solid rgba(226, 180, 90, .14); box-shadow: 0 6px 22px rgba(3, 25, 19, .22); backdrop-filter: none; -webkit-backdrop-filter: none; } #main-nav.psx-nav.nav-dark, #main-nav.psx-nav.nav-dark.scrolled { background-color: var(--psx-forest-900); } #main-nav.psx-nav .nav-logo img { height: 44px !important; width: auto !important; } #main-nav.psx-nav .psx-nav-actions { display: flex; align-items: center; gap: 14px; justify-self: end; } #main-nav.psx-nav .psx-search-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(205, 235, 217, .28); background: rgba(255, 255, 255, .04); color: #F2FAF5; cursor: pointer; transition: background .18s, border-color .18s, color .18s; } #main-nav.psx-nav .psx-search-btn svg { width: 19px; height: 19px; } #main-nav.psx-nav .psx-search-btn:hover, #main-nav.psx-nav .psx-search-btn:focus-visible { background: rgba(253, 180, 71, .14); border-color: var(--psx-orange-400); color: var(--psx-orange-400); } #main-nav.psx-nav .psx-nav-divider { width: 1px; height: 26px; background: rgba(205, 235, 217, .22); } #main-nav.psx-nav .nav-cta.psx-nav-cta, #main-nav.psx-nav .nav-cta.psx-nav-cta:visited { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 8px 0 22px; border-radius: 999px; background: var(--psx-orange-grad) !important; border: 1px solid #F8B04A; color: var(--psx-forest-900) !important; font-size: 14.5px; font-weight: 700; letter-spacing: .005em; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 20px rgba(238, 139, 28, .30), inset 0 1px 0 rgba(255, 255, 255, .45); transition: background .18s, transform .18s, box-shadow .18s; } #main-nav.psx-nav .nav-cta.psx-nav-cta:hover, #main-nav.psx-nav .nav-cta.psx-nav-cta:focus-visible { background: var(--psx-orange-grad-hover) !important; color: var(--psx-forest-950) !important; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(238, 139, 28, .38), inset 0 1px 0 rgba(255, 255, 255, .5); } #main-nav.psx-nav .psx-cta-dot { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--psx-forest-900); color: var(--psx-orange-400); } #main-nav.psx-nav .psx-cta-dot svg { width: 16px; height: 16px; } #main-nav.psx-nav .ps-nav-burger { border-color: rgba(205, 235, 217, .4); } @media (min-width: 1024px) { #main-nav.psx-nav { display: grid; grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr); } #main-nav.psx-nav .nav-links { gap: 6px; } #main-nav.psx-nav .nav-dd-trigger { position: relative; min-height: 50px; padding: 0 16px; gap: 7px; border-radius: 10px; color: #E3F1E8 !important; font-size: 15px; font-weight: 500; letter-spacing: .005em; transition: background .16s, color .16s; } #main-nav.psx-nav .nav-dd-trigger:hover { background: rgba(255, 255, 255, .06); color: #fff !important; } #main-nav.psx-nav .dd-open > .nav-dd-trigger { background: linear-gradient(180deg, rgba(19, 107, 75, .55), rgba(9, 51, 39, .9)); color: var(--psx-orange-400) !important; box-shadow: inset 0 0 0 1px rgba(253, 180, 71, .18); } #main-nav.psx-nav .dd-open > .nav-dd-trigger::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--psx-orange-500); } #main-nav.psx-nav .nav-dd-caret { width: 11px; height: 11px; opacity: .85; } #main-nav.psx-nav .ps-canada-trigger-flag .ps-canada-flag-svg { width: 26px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); } /* ---- mega-menu shell ---- */ #main-nav.psx-nav .ps-mega-menu.psx-menu { top: calc(var(--psc-nav-bottom, 72px) + 12px); width: min(1460px, calc(100vw - 56px)); max-height: calc(100dvh - var(--psc-nav-bottom, 72px) - 28px); border: 1px solid rgba(201, 220, 209, .9); border-radius: 22px; background: #FCFCF8; color: var(--psx-ink); box-shadow: 0 30px 80px rgba(3, 25, 19, .32), 0 2px 0 rgba(255, 255, 255, .8) inset; overflow: hidden; } #main-nav.psx-nav .ps-mega-menu.psx-menu::before { top: -9px; width: 18px; height: 18px; background: #FCFCF8; border-color: rgba(201, 220, 209, .9); border-radius: 3px 0 0 0; z-index: 3; } #main-nav.psx-nav .ps-mega-inner.psx-inner { padding: 30px 30px 18px; max-height: inherit; overflow-y: auto; scrollbar-gutter: auto; } #main-nav.psx-nav .psx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: stretch; } /* ---- section head ---- */ #main-nav.psx-nav .psx-head { display: flex; align-items: center; gap: 22px; margin: 0 0 22px; position: relative; z-index: 2; } #main-nav.psx-nav .psx-head-tile { display: grid; place-items: center; flex: 0 0 auto; width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(180deg, #E9F6EE, #DCEFE4); color: var(--psx-emerald-600); box-shadow: inset 0 0 0 1px rgba(19, 107, 75, .08); } #main-nav.psx-nav .psx-head-tile svg { width: 36px; height: 36px; } #main-nav.psx-nav .psx-head-tile--flag { background: #fff; box-shadow: 0 6px 16px rgba(7, 43, 33, .1), inset 0 0 0 1px #E5ECE7; } #main-nav.psx-nav .psx-head-tile--flag img { width: 48px; height: auto; border-radius: 3px; } #main-nav.psx-nav .psx-head-copy h3 { margin: 0 0 6px; color: var(--psx-forest-950); font-size: clamp(26px, 2.25vw, 38px); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; } #main-nav.psx-nav .psx-head-copy p { margin: 0; color: var(--psx-muted); font-size: 16.5px; line-height: 1.45; max-width: 720px; } #main-nav.psx-nav .psx-head-copy p strong { color: var(--psx-ink-2); font-weight: 600; } #main-nav.psx-nav .psx-accent { color: var(--psx-orange-600); } #main-nav.psx-nav .psx-head-link { margin-left: auto; align-self: flex-start; margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; color: var(--psx-emerald-600) !important; font-weight: 700; font-size: 15px; text-decoration: none; background: transparent !important; } #main-nav.psx-nav .psx-head-link:hover { color: var(--psx-orange-700) !important; } #main-nav.psx-nav .psx-label { margin: 0 0 14px; color: var(--psx-emerald-600); font: 700 12.5px/1.2 'DM Sans', sans-serif; letter-spacing: .22em; text-transform: uppercase; display: flex; align-items: center; gap: 14px; } #main-nav.psx-nav .psx-main > .psx-label::after, #main-nav.psx-nav .psx-ca-tools > .psx-label::after, #main-nav.psx-nav .psx-ca-provinces > .psx-label::after { content: ''; flex: 1; height: 1px; background: var(--psx-line); } /* ---- cards ---- */ #main-nav.psx-nav .ps-mega-grid.psx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } #main-nav.psx-nav .ps-mega-card.psx-card { position: relative; isolation: isolate; overflow: hidden; min-height: 136px; display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px; gap: 18px; align-items: center; padding: 22px 20px 22px 22px; border: 1px solid var(--psx-line) !important; border-radius: 16px; background: #fff !important; background-image: none !important; color: var(--psx-ink) !important; text-decoration: none; box-shadow: 0 1px 2px rgba(7, 43, 33, .04), 0 8px 18px rgba(7, 43, 33, .04); transition: background-color .18s, background-image .18s, border-color .18s, box-shadow .18s, transform .18s; } #main-nav.psx-nav .ps-mega-card.psx-card--wide { grid-column: 1 / -1; min-height: 116px; } #main-nav.psx-nav .psx-card-icon { width: 64px !important; height: 64px !important; border-radius: 16px !important; background: linear-gradient(180deg, #EAF6EF, #DDEFE4) !important; color: var(--psx-emerald-600) !important; display: grid; place-items: center; } #main-nav.psx-nav .psx-card-icon svg { width: 32px !important; height: 32px !important; } #main-nav.psx-nav .psx-card-icon.psx-tone-orange { background: linear-gradient(180deg, #FFF2E0, #FFE6C6) !important; color: var(--psx-orange-600) !important; } #main-nav.psx-nav .psx-card-copy { gap: 6px; } #main-nav.psx-nav .psx-card-copy strong { font-size: 19px; line-height: 1.2; color: var(--psx-forest-950); letter-spacing: -.01em; font-weight: 700; } #main-nav.psx-nav .psx-card-copy small { font-size: 15px; line-height: 1.5; color: var(--psx-muted); } #main-nav.psx-nav .psx-card-go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #EEF5F0; color: var(--psx-forest-800) !important; font-size: 0; transition: background .18s, color .18s, transform .18s; } #main-nav.psx-nav .psx-card-go svg { width: 18px; height: 18px; } /* hover/focus: visible background change (not text-only) */ #main-nav.psx-nav .ps-mega-card.psx-card:is(:hover, :focus-visible) { background-color: #EAF6EF !important; background-image: linear-gradient(135deg, #F1FAF4 0%, #DDF0E5 100%) !important; border-color: var(--psx-jade-400) !important; color: var(--psx-ink) !important; box-shadow: 0 14px 30px rgba(7, 43, 33, .12); transform: translateY(-2px); } #main-nav.psx-nav .ps-mega-card.psx-card:is(:hover, :focus-visible) :is(strong) { color: var(--psx-forest-950); } #main-nav.psx-nav .ps-mega-card.psx-card:is(:hover, :focus-visible) small { color: var(--psx-ink-2); } #main-nav.psx-nav .ps-mega-card.psx-card:is(:hover, :focus-visible) .psx-card-icon { background: var(--psx-emerald-500) !important; color: #fff !important; } #main-nav.psx-nav .ps-mega-card.psx-card:is(:hover, :focus-visible) .psx-card-go { background: var(--psx-orange-500); color: var(--psx-forest-950) !important; transform: translateX(2px); } #main-nav.psx-nav .ps-mega-card.psx-card:focus-visible { outline: 3px solid var(--psx-orange-500); outline-offset: 2px; } /* featured dark card */ #main-nav.psx-nav .ps-mega-card.psx-card--featured { border: 1.5px solid #E2A643 !important; color: #fff !important; background-color: var(--psx-forest-800) !important; background-image: none, radial-gradient(120% 140% at 0% 0%, #155C43 0%, #0B3B2D 55%, #072B21 100%) !important; background-size: 100% 100%, auto !important; box-shadow: 0 16px 34px rgba(7, 43, 33, .26), inset 0 0 0 1px rgba(255, 255, 255, .04); } #main-nav.psx-nav .psx-card--featured .psx-card-icon { background: rgba(255, 255, 255, .07) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } #main-nav.psx-nav .psx-card--featured .psx-card-copy strong { color: #fff; font-size: 22px; } #main-nav.psx-nav .psx-card--featured .psx-card-copy small { color: rgba(236, 248, 241, .86); font-size: 15.5px; } #main-nav.psx-nav .psx-card--featured .psx-card-go { width: 52px; height: 52px; background: var(--psx-orange-grad); color: var(--psx-forest-950) !important; box-shadow: 0 8px 18px rgba(238, 139, 28, .35); } #main-nav.psx-nav .psx-card--featured .psx-card-go svg { width: 22px; height: 22px; } #main-nav.psx-nav .ps-mega-card.psx-card--featured:is(:hover, :focus-visible) { border-color: var(--psx-orange-400) !important; background-color: #0F4D3A !important; background-image: none, radial-gradient(120% 140% at 0% 0%, #1E7A57 0%, #0F4D3A 55%, #0B3B2D 100%) !important; box-shadow: 0 20px 40px rgba(7, 43, 33, .32); } #main-nav.psx-nav .ps-mega-card.psx-card--featured:is(:hover, :focus-visible) strong { color: #fff; } #main-nav.psx-nav .ps-mega-card.psx-card--featured:is(:hover, :focus-visible) small { color: #F2FBF6; } #main-nav.psx-nav .ps-mega-card.psx-card--featured:is(:hover, :focus-visible) .psx-card-icon { background: rgba(253, 180, 71, .18) !important; color: var(--psx-orange-400) !important; } #main-nav.psx-nav .psx-badge { align-self: flex-start; display: inline-block; margin-bottom: 4px; padding: 4px 12px; border: 1px solid rgba(253, 180, 71, .8); border-radius: 999px; color: var(--psx-orange-400); font: 700 11.5px/1.2 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; font-style: normal; } /* ---- right rail (dark) ---- */ #main-nav.psx-nav .psx-rail { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 34px 32px 0; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .05); } #main-nav.psx-nav .psx-rail--dark { color: #E9F6EE; background: radial-gradient(130% 90% at 100% 0%, #135C43 0%, #0A3B2D 48%, #062A20 100%); box-shadow: 0 18px 38px rgba(4, 33, 26, .25); } #main-nav.psx-nav .psx-rail-badge { position: absolute; top: 26px; right: 26px; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(226, 180, 90, .55); color: var(--psx-orange-400); background: rgba(255, 255, 255, .03); } #main-nav.psx-nav .psx-rail-badge svg { width: 28px; height: 28px; } #main-nav.psx-nav .psx-kicker { display: block; color: var(--psx-orange-400); font: 700 13px/1.2 'DM Sans', sans-serif; letter-spacing: .2em; text-transform: uppercase; margin: 6px 0 14px; } #main-nav.psx-nav .psx-rail h3 { margin: 0 0 14px; color: #fff; font-size: clamp(26px, 2.2vw, 34px); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; } #main-nav.psx-nav .psx-rail h3 span { color: var(--psx-orange-400); } #main-nav.psx-nav .psx-rail p { margin: 0 0 22px; color: rgba(233, 246, 238, .9); font-size: 16px; line-height: 1.55; } #main-nav.psx-nav .psx-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; background: var(--psx-orange-grad) !important; color: var(--psx-forest-950) !important; font-weight: 700; font-size: 16.5px; text-decoration: none; box-shadow: 0 10px 22px rgba(238, 139, 28, .3), inset 0 1px 0 rgba(255, 255, 255, .45); transition: background .18s, transform .18s; } #main-nav.psx-nav .psx-cta svg { width: 18px; height: 18px; } #main-nav.psx-nav a.psx-cta:is(:hover, :focus-visible) { background: var(--psx-orange-grad-hover) !important; transform: translateY(-1px); } #main-nav.psx-nav .psx-rail-links { display: grid; margin-top: 24px; border-top: 1px solid rgba(233, 246, 238, .16); } #main-nav.psx-nav .psx-rail--dark .ps-mega-mini.psx-mini { display: grid; grid-template-columns: 40px 1fr 20px; align-items: center; gap: 14px; min-height: 62px; padding: 10px 6px; border: 0 !important; border-bottom: 1px solid rgba(233, 246, 238, .12) !important; border-radius: 10px; background: transparent !important; color: #F3FBF6 !important; font-size: 16px; font-weight: 500; } #main-nav.psx-nav .psx-rail--dark .psx-mini .ps-mega-mini-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--psx-mint-300); } #main-nav.psx-nav .psx-rail--dark .psx-mini .ps-mega-mini-icon svg { width: 22px; height: 22px; } #main-nav.psx-nav .psx-mini-go svg { width: 18px; height: 18px; } #main-nav.psx-nav .psx-rail--dark .ps-mega-mini.psx-mini:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .1) !important; color: var(--psx-orange-400) !important; padding-left: 12px; } #main-nav.psx-nav .psx-rail-points { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(233, 246, 238, .16); display: grid; gap: 14px; } #main-nav.psx-nav .psx-rail-points li { display: flex; align-items: center; gap: 14px; color: #F3FBF6; font-size: 15.5px; } #main-nav.psx-nav .psx-rail-points svg { width: 24px; height: 24px; color: var(--psx-mint-300); } #main-nav.psx-nav .psx-rail-art { display: block; width: calc(100% + 40px); max-width: none; height: auto; margin: auto -20px -8px; padding-top: 10px; pointer-events: none; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .25)); } /* ---- footer strip ---- */ #main-nav.psx-nav .ps-mega-footer.psx-foot { margin-top: 22px; padding: 16px 4px 0; border-top: 1px solid var(--psx-line); font-size: 14.5px; color: var(--psx-muted); } #main-nav.psx-nav .psx-foot-note { display: flex; align-items: center; gap: 14px; } #main-nav.psx-nav .psx-foot-i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--psx-mint-100); color: var(--psx-emerald-600); flex: 0 0 auto; } #main-nav.psx-nav .psx-foot-i svg { width: 20px; height: 20px; } #main-nav.psx-nav .psx-foot-note strong { color: var(--psx-ink); } #main-nav.psx-nav .ps-mega-footer.psx-foot a { color: var(--psx-emerald-600) !important; font-size: 16px; font-weight: 700; padding: 6px 10px !important; border-radius: 8px; } #main-nav.psx-nav .ps-mega-footer.psx-foot a:is(:hover, :focus-visible) { background: var(--psx-mint-100) !important; color: var(--psx-forest-900) !important; } /* ---- States ---- */ #main-nav.psx-nav .psx-banner { position: relative; margin: -30px -30px 18px; padding: 30px 30px 18px; min-height: 168px; overflow: hidden; border-bottom: 1px solid var(--psx-line); background: linear-gradient(90deg, #FCFCF8 0%, #FCFCF8 52%, rgba(252, 252, 248, 0) 70%); } #main-nav.psx-nav .psx-banner .psx-head { max-width: 58%; margin: 0; padding-top: 10px; } #main-nav.psx-nav .psx-banner-art { position: absolute; inset: 14px 14px 14px auto; width: 47%; border-radius: 18px; overflow: hidden; z-index: 0; } #main-nav.psx-nav .psx-banner-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; } #main-nav.psx-nav .psx-banner-art::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #FCFCF8 0%, rgba(252, 252, 248, .7) 12%, rgba(252, 252, 248, 0) 32%); } #main-nav.psx-nav .psx-banner-art::after { content: ''; position: absolute; inset: 0; z-index: 2; background: none center / 100% 100% no-repeat; } #main-nav.psx-nav .psx-layout--states { grid-template-columns: minmax(0, 1fr) 400px; } #main-nav.psx-nav .ps-state-grid.psx-state-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } #main-nav.psx-nav .ps-state-grid.psx-state-grid a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 14px 0 18px; text-align: left; border: 1px solid var(--psx-line) !important; border-radius: 10px; background: #fff !important; color: var(--psx-ink) !important; font-size: 15px; line-height: 1.2; text-decoration: none; box-shadow: 0 1px 2px rgba(7, 43, 33, .03); transition: background .16s, border-color .16s, color .16s, transform .16s; } #main-nav.psx-nav .ps-state-grid.psx-state-grid a svg { width: 15px; height: 15px; color: var(--psx-forest-800); flex: 0 0 auto; } #main-nav.psx-nav .ps-state-grid.psx-state-grid a:is(:hover, :focus-visible) { background: var(--psx-emerald-500) !important; border-color: var(--psx-emerald-500) !important; color: #fff !important; transform: translateY(-1px); } #main-nav.psx-nav .ps-state-grid.psx-state-grid a:is(:hover, :focus-visible) svg { color: var(--psx-orange-400); } #main-nav.psx-nav .psx-map { display: block; margin: auto -12px -6px !important; padding: 18px 0 0 !important; background: transparent !important; } #main-nav.psx-nav .psx-map img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .35)); transition: transform .2s; } #main-nav.psx-nav .psx-map:is(:hover, :focus-visible) img { transform: scale(1.03); } /* ---- Canada ---- */ #main-nav.psx-nav .psx-banner--ca { min-height: 196px; } #main-nav.psx-nav .psx-banner--ca .psx-head-copy h3 { font-size: clamp(32px, 2.8vw, 46px); } #main-nav.psx-nav .psx-banner--ca .psx-banner-art { width: 52%; } #main-nav.psx-nav .psx-banner--ca .psx-banner-art::after { background: none center / 100% 100% no-repeat; } #main-nav.psx-nav .psx-banner-note { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; gap: 18px; max-width: 300px; padding: 20px 24px; border-radius: 16px; border: 1px solid rgba(226, 180, 90, .45); background: rgba(5, 36, 27, .84); backdrop-filter: blur(6px); color: #fff; box-shadow: 0 16px 30px rgba(0, 0, 0, .25); } #main-nav.psx-nav .psx-banner-note span { color: var(--psx-orange-400); } #main-nav.psx-nav .psx-banner-note svg { width: 46px; height: 46px; } #main-nav.psx-nav .psx-banner-note p { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 500; } #main-nav.psx-nav .psx-ca-panel { display: grid !important; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0; padding: 0; border: 1px solid var(--psx-line); border-radius: 18px; background: #fff; overflow: hidden; } #main-nav.psx-nav .psx-ca-tools { padding: 24px 24px 24px; border-right: 1px solid var(--psx-line); } #main-nav.psx-nav .psx-ca-provinces { padding: 24px 24px 24px !important; background: #FBFCF9 !important; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid a { display: grid; grid-template-columns: 38px 1fr 16px; align-items: center; justify-items: start; gap: 12px; min-height: 52px; padding: 6px 12px 6px 12px; text-align: left; border: 1px solid var(--psx-line) !important; border-radius: 10px; background: #fff !important; color: var(--psx-ink) !important; font-size: 14.5px; line-height: 1.2; text-decoration: none; transition: background .16s, border-color .16s, color .16s; } #main-nav.psx-nav .psx-province-grid img { width: 38px; height: 23px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); } #main-nav.psx-nav .psx-province-grid svg { width: 15px; height: 15px; color: var(--psx-forest-800); } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid a:is(:hover, :focus-visible) { background: var(--psx-emerald-500) !important; border-color: var(--psx-emerald-500) !important; color: #fff !important; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid a:is(:hover, :focus-visible) svg { color: var(--psx-orange-400); } #main-nav.psx-nav .psx-ca-tools .ps-mega-card.psx-card { min-height: 150px; grid-template-columns: 58px minmax(0, 1fr) 40px; padding: 20px; } #main-nav.psx-nav .psx-ca-tools .psx-card-icon { width: 58px !important; height: 58px !important; } #main-nav.psx-nav .psx-ca-guide { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-top: 16px; padding: 22px 24px; border-radius: 16px; text-decoration: none; background: radial-gradient(120% 160% at 100% 0%, #135C43 0%, #0A3B2D 52%, #062A20 100%) !important; color: #fff !important; position: relative; overflow: hidden; transition: background .18s; } #main-nav.psx-nav .psx-ca-guide::after { content: ''; position: absolute; right: 4%; top: -30%; width: 220px; height: 220px; opacity: .08; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 21v-4.5M12 16.5l-5 1 .8-2.4L4 12l1.6-.6L4.5 8l2.6.6.5-1.4 2.4 2.2-.8-5L11 5.6 12 3l1 2.6 1.8-1.2-.8 5 2.4-2.2.5 1.4 2.6-.6-1.1 3.4L20 12l-3.8 3.1.8 2.4z'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; } #main-nav.psx-nav .psx-ca-guide:is(:hover, :focus-visible) { background: radial-gradient(120% 160% at 100% 0%, #1E7A57 0%, #0F4D3A 52%, #0A3B2D 100%) !important; } #main-nav.psx-nav .psx-ca-guide-i { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(226, 180, 90, .55); color: var(--psx-orange-400); } #main-nav.psx-nav .psx-ca-guide-i svg { width: 30px; height: 30px; } #main-nav.psx-nav .psx-ca-guide-copy { display: flex; flex-direction: column; gap: 4px; } #main-nav.psx-nav .psx-ca-guide-copy em { font-style: normal; color: var(--psx-orange-400); font: 700 12.5px/1.2 'DM Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; } #main-nav.psx-nav .psx-ca-guide-copy strong { font-size: 24px; line-height: 1.15; color: #fff; } #main-nav.psx-nav .psx-ca-guide-copy small { font-size: 14.5px; line-height: 1.45; color: rgba(233, 246, 238, .86); } #main-nav.psx-nav .psx-ca-guide .psx-cta { position: relative; z-index: 1; white-space: nowrap; } /* ---- Resources ---- */ #main-nav.psx-nav .ps-resources-layout.psx-res-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr) 320px; gap: 22px; align-items: stretch; } #main-nav.psx-nav .psx-res-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 38px 32px 0; border-radius: 20px; color: #fff; background: radial-gradient(130% 80% at 50% 100%, #1B6E4F 0%, #0A3B2D 50%, #062A20 100%); } #main-nav.psx-nav .psx-res-hero h3 { margin: 0 0 16px; font-size: clamp(30px, 2.5vw, 40px); line-height: 1.08; letter-spacing: -.02em; color: #fff; } #main-nav.psx-nav .psx-res-hero h3 span { color: var(--psx-orange-400); } #main-nav.psx-nav .psx-res-hero p { margin: 0 0 24px; color: rgba(233, 246, 238, .9); font-size: 17px; line-height: 1.5; } #main-nav.psx-nav .psx-res-hero .psx-cta { align-self: flex-start; } #main-nav.psx-nav .ps-resource-k.psx-res-k { margin: auto -24px -10px; padding-top: 18px; } #main-nav.psx-nav .ps-resource-k.psx-res-k img { width: 100%; height: auto; display: block; mix-blend-mode: normal; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .35)); } #main-nav.psx-nav .ps-resource-grid.psx-res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: stretch; } #main-nav.psx-nav .ps-resource-grid .ps-mega-card.psx-rcard { display: flex !important; flex-direction: column; align-items: stretch; gap: 0; padding: 0 !important; min-height: 0; grid-template-columns: none; } #main-nav.psx-nav .psx-rcard-top { display: grid; grid-template-columns: 54px minmax(0, 1fr) 36px; gap: 16px; align-items: start; padding: 20px 18px 6px 20px; } #main-nav.psx-nav .psx-rcard .psx-card-icon { width: 54px !important; height: 54px !important; border-radius: 14px !important; } #main-nav.psx-nav .psx-rcard .psx-card-icon svg { width: 28px !important; height: 28px !important; } #main-nav.psx-nav .psx-rcard .psx-card-copy strong { font-size: 18.5px; } #main-nav.psx-nav .psx-rcard .psx-card-copy small { font-size: 14.5px; } #main-nav.psx-nav .psx-rcard .psx-card-go { width: 36px; height: 36px; margin-top: 8px; } #main-nav.psx-nav .psx-rcard-art { display: block; width: 100%; height: 92px; object-fit: cover; object-position: right bottom; margin-top: auto; border-radius: 0 0 15px 15px; } #main-nav.psx-nav .psx-rcard--featured { border-color: var(--psx-orange-400) !important; box-shadow: 0 0 0 1px rgba(247, 160, 46, .25), 0 10px 22px rgba(238, 139, 28, .12); } #main-nav.psx-nav .psx-rcard--featured .psx-card-icon { background: linear-gradient(180deg, #FFF2E0, #FFE3BD) !important; color: var(--psx-orange-700) !important; } #main-nav.psx-nav .psx-res-rail { display: flex; flex-direction: column; gap: 12px; } #main-nav.psx-nav .psx-res-rail > .psx-label { margin: 6px 0 4px; } #main-nav.psx-nav .psx-res-rail .ps-resource-next { display: grid; gap: 10px; } #main-nav.psx-nav .psx-res-rail .ps-mega-mini.psx-mini { display: grid; grid-template-columns: 38px 1fr 18px; align-items: center; gap: 12px; min-height: 62px; padding: 10px 14px; border: 1px solid var(--psx-line) !important; border-radius: 12px; background: #fff !important; color: var(--psx-ink) !important; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .16s, border-color .16s; } #main-nav.psx-nav .psx-res-rail .psx-mini .ps-mega-mini-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--psx-mint-100); color: var(--psx-emerald-600); } #main-nav.psx-nav .psx-res-rail .psx-mini .ps-mega-mini-icon svg { width: 20px; height: 20px; } #main-nav.psx-nav .psx-res-rail .psx-mini-go { color: var(--psx-forest-800); } #main-nav.psx-nav .psx-res-rail .ps-mega-mini.psx-mini:is(:hover, :focus-visible) { background: var(--psx-mint-100) !important; border-color: var(--psx-jade-400) !important; color: var(--psx-forest-950) !important; } #main-nav.psx-nav .psx-res-rail .ps-mega-mini.psx-mini:is(:hover, :focus-visible) .ps-mega-mini-icon { background: var(--psx-emerald-500); color: #fff; } #main-nav.psx-nav .ps-resource-support.psx-support { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: end; flex: 1; min-height: 210px; margin-top: 4px; padding: 18px 16px 0 10px; border: 1px solid var(--psx-line); border-radius: 16px; background: linear-gradient(180deg, #F1F8F3, #E5F4EB); overflow: hidden; } #main-nav.psx-nav .psx-support > img { width: 120px; height: 160px; object-fit: contain; object-position: center bottom; display: block; } #main-nav.psx-nav .psx-support > div { padding-bottom: 18px; } #main-nav.psx-nav .psx-support .psx-label { margin: 0 0 8px; font-size: 12px; } #main-nav.psx-nav .psx-support p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--psx-muted); } #main-nav.psx-nav .ps-resource-contact.psx-btn-dark { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; background: var(--psx-forest-800) !important; color: #fff !important; font-size: 15px; font-weight: 700; text-decoration: none; } #main-nav.psx-nav .ps-resource-contact.psx-btn-dark svg { width: 16px; height: 16px; } #main-nav.psx-nav .ps-resource-contact.psx-btn-dark:is(:hover, :focus-visible) { background: var(--psx-emerald-500) !important; } } /* Laptop widths: tighten proportions so menus never need an inner scrollbar */ @media (min-width: 1024px) and (max-width: 1400px) { #main-nav.psx-nav { padding: 0 24px; grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr); } #main-nav.psx-nav .nav-logo img { height: 38px !important; } #main-nav.psx-nav .nav-dd-trigger { padding: 0 11px; font-size: 14px; } #main-nav.psx-nav .nav-cta.psx-nav-cta { padding-left: 16px; font-size: 13.5px; min-height: 42px; } #main-nav.psx-nav .psx-cta-dot { width: 26px; height: 26px; } #main-nav.psx-nav .psx-nav-actions { gap: 10px; } #main-nav.psx-nav .ps-mega-inner.psx-inner { padding: 22px 22px 14px; } #main-nav.psx-nav .psx-banner { margin: -22px -22px 14px; padding: 22px 22px 14px; min-height: 140px; } #main-nav.psx-nav .psx-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; } #main-nav.psx-nav .psx-layout--states { grid-template-columns: minmax(0, 1fr) 300px; } #main-nav.psx-nav .psx-head { gap: 16px; margin-bottom: 16px; } #main-nav.psx-nav .psx-head-tile { width: 58px; height: 58px; border-radius: 15px; } #main-nav.psx-nav .psx-head-tile svg { width: 30px; height: 30px; } #main-nav.psx-nav .psx-head-copy p { font-size: 14.5px; } #main-nav.psx-nav .ps-mega-card.psx-card { min-height: 108px; grid-template-columns: 50px minmax(0, 1fr) 34px; gap: 14px; padding: 16px; } #main-nav.psx-nav .ps-mega-card.psx-card--wide { min-height: 92px; } #main-nav.psx-nav .psx-card-icon { width: 50px !important; height: 50px !important; border-radius: 13px !important; } #main-nav.psx-nav .psx-card-icon svg { width: 26px !important; height: 26px !important; } #main-nav.psx-nav .psx-card-copy strong { font-size: 16.5px; } #main-nav.psx-nav .psx-card-copy small { font-size: 13.5px; } #main-nav.psx-nav .psx-card--featured .psx-card-copy strong { font-size: 19px; } #main-nav.psx-nav .psx-card--featured .psx-card-copy small { font-size: 13.5px; } #main-nav.psx-nav .psx-card--featured .psx-card-go { width: 44px; height: 44px; } #main-nav.psx-nav .psx-card-go { width: 34px; height: 34px; } #main-nav.psx-nav .ps-mega-grid.psx-grid { gap: 12px; } #main-nav.psx-nav .psx-rail { padding: 24px 22px 0; } #main-nav.psx-nav .psx-rail-badge { width: 50px; height: 50px; top: 18px; right: 18px; } #main-nav.psx-nav .psx-rail h3 { font-size: 24px; padding-right: 44px; } #main-nav.psx-nav .psx-rail p { font-size: 14px; margin-bottom: 16px; } #main-nav.psx-nav .psx-cta { min-height: 46px; font-size: 14.5px; padding: 0 20px; } #main-nav.psx-nav .psx-rail--dark .ps-mega-mini.psx-mini { min-height: 50px; font-size: 14px; } #main-nav.psx-nav .psx-rail-points li { font-size: 14px; } #main-nav.psx-nav .ps-state-grid.psx-state-grid { gap: 7px; } #main-nav.psx-nav .ps-state-grid.psx-state-grid a { min-height: 40px; padding: 0 10px 0 12px; font-size: 13px; } #main-nav.psx-nav .ps-mega-footer.psx-foot { margin-top: 14px; padding-top: 12px; font-size: 13px; } #main-nav.psx-nav .ps-mega-footer.psx-foot a { font-size: 14.5px; } #main-nav.psx-nav .psx-banner--ca { min-height: 160px; } #main-nav.psx-nav .psx-banner-note { right: 24px; max-width: 250px; padding: 14px 16px; } #main-nav.psx-nav .psx-banner-note p { font-size: 15px; } #main-nav.psx-nav .psx-banner-note svg { width: 36px; height: 36px; } #main-nav.psx-nav .psx-ca-tools, #main-nav.psx-nav .psx-ca-provinces { padding: 18px !important; } #main-nav.psx-nav .psx-ca-tools .ps-mega-card.psx-card { min-height: 118px; padding: 16px; grid-template-columns: 50px minmax(0, 1fr) 34px; } #main-nav.psx-nav .psx-ca-tools .psx-card-icon { width: 50px !important; height: 50px !important; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid a { min-height: 44px; font-size: 13px; grid-template-columns: 32px 1fr 14px; gap: 9px; } #main-nav.psx-nav .psx-province-grid img { width: 32px; height: 19px; } #main-nav.psx-nav .psx-ca-guide { grid-template-columns: 50px minmax(0, 1fr); padding: 16px 18px; gap: 14px; } #main-nav.psx-nav .psx-ca-guide .psx-cta { grid-column: 2; justify-self: start; } #main-nav.psx-nav .psx-ca-guide-i { width: 50px; height: 50px; } #main-nav.psx-nav .psx-ca-guide-copy strong { font-size: 19px; } #main-nav.psx-nav .psx-ca-guide-copy small { font-size: 13px; } #main-nav.psx-nav .ps-resources-layout.psx-res-layout { grid-template-columns: 270px minmax(0, 1fr) 260px; gap: 16px; } #main-nav.psx-nav .psx-res-hero { padding: 26px 22px 0; } #main-nav.psx-nav .psx-res-hero h3 { font-size: 27px; } #main-nav.psx-nav .psx-res-hero p { font-size: 14.5px; } #main-nav.psx-nav .psx-rcard-top { grid-template-columns: 44px minmax(0, 1fr) 30px; gap: 12px; padding: 14px 14px 4px; } #main-nav.psx-nav .psx-rcard .psx-card-icon { width: 44px !important; height: 44px !important; } #main-nav.psx-nav .psx-rcard .psx-card-icon svg { width: 23px !important; height: 23px !important; } #main-nav.psx-nav .psx-rcard .psx-card-copy strong { font-size: 15.5px; } #main-nav.psx-nav .psx-rcard .psx-card-copy small { font-size: 12.5px; } #main-nav.psx-nav .psx-rcard .psx-card-go { width: 30px; height: 30px; } #main-nav.psx-nav .psx-rcard-art { height: 64px; } #main-nav.psx-nav .psx-res-rail .ps-mega-mini.psx-mini { min-height: 48px; font-size: 13px; padding: 8px 10px; grid-template-columns: 32px 1fr 16px; } #main-nav.psx-nav .psx-res-rail .psx-mini .ps-mega-mini-icon { width: 32px; height: 32px; } #main-nav.psx-nav .ps-resource-support.psx-support { grid-template-columns: 92px minmax(0, 1fr); min-height: 170px; } #main-nav.psx-nav .psx-support > img { width: 92px; height: 130px; } #main-nav.psx-nav .psx-support p { font-size: 12.5px; } } @media (min-width: 1024px) and (max-width: 1180px) { #main-nav.psx-nav .nav-dd-trigger { padding: 0 8px; font-size: 13.5px; } #main-nav.psx-nav .psx-search-btn { width: 40px; height: 40px; } #main-nav.psx-nav .psx-nav-divider { display: none; } #main-nav.psx-nav .psx-layout, #main-nav.psx-nav .psx-layout--states { grid-template-columns: minmax(0, 1fr) 260px; } #main-nav.psx-nav .ps-state-grid.psx-state-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } #main-nav.psx-nav .ps-resources-layout.psx-res-layout { grid-template-columns: 230px minmax(0, 1fr) 230px; } #main-nav.psx-nav .psx-banner-note { display: none; } } /* Short viewports: let the panel itself scroll (single scrollbar). */ @media (min-width: 1024px) and (max-height: 820px) { #main-nav.psx-nav .psx-rail-art { max-height: 150px; object-fit: contain; } } /* --------------------------------------------------------------------- MOBILE / TABLET (<1024px) --------------------------------------------------------------------- */ @media (max-width: 1023px) { :root { --psx-nav-h: 66px; } #main-nav.psx-nav { display: flex; justify-content: space-between; height: var(--psx-nav-h); padding: 0 16px; } #main-nav.psx-nav .nav-logo img { height: 34px !important; } #main-nav.psx-nav .psx-nav-actions { margin-left: auto; margin-right: 10px; gap: 8px; } #main-nav.psx-nav .psx-nav-divider { display: none; } #main-nav.psx-nav .psx-search-btn { width: 42px; height: 42px; } #main-nav.psx-nav .nav-cta.psx-nav-cta { display: inline-flex !important; min-height: 42px; padding: 0 6px 0 14px; font-size: 13px; gap: 8px; } #main-nav.psx-nav .psx-cta-dot { width: 28px; height: 28px; } } @media (max-width: 560px) { #main-nav.psx-nav .nav-cta.psx-nav-cta { padding: 0 14px; } #main-nav.psx-nav .psx-cta-dot { display: none; } #main-nav.psx-nav .nav-cta.psx-nav-cta { font-size: 0; min-width: 44px; padding: 0 12px; } #main-nav.psx-nav .nav-cta.psx-nav-cta::before { content: 'Free Paystub'; font-size: 13px; } } @media (max-width: 380px) { #main-nav.psx-nav .psx-search-btn { width: 40px; height: 40px; } #main-nav.psx-nav .nav-logo img { height: 28px !important; } } .ps-drawer { background: var(--psx-ivory); } .ps-drawer .psc-drawer-head strong { color: var(--psx-forest-900); font-size: 18px; } .ps-drawer .psx-drawer-search { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 16px 0 8px; padding: 0 16px; border: 1px solid var(--psx-line-2); border-radius: 12px; background: #fff; color: var(--psx-muted); font: inherit; font-size: 15px; cursor: pointer; } .ps-drawer .psx-drawer-search svg { width: 20px; height: 20px; color: var(--psx-emerald-600); } .ps-drawer .psc-drawer-section summary { min-height: 56px; font-size: 16px; color: var(--psx-forest-900); } .ps-drawer .psc-drawer-section summary::after { color: var(--psx-orange-600); font-size: 22px; } .ps-drawer .psc-drawer-section summary .ps-canada-flag-svg { width: 24px; height: 12px; } .ps-drawer a.ps-drawer-link { border-radius: 10px; } .ps-drawer a.ps-drawer-link:is(:hover, :focus-visible) { background: var(--psx-mint-100); color: var(--psx-forest-900); } .ps-drawer .ps-drawer-cta.psx-drawer-cta { background: var(--psx-orange-grad) !important; border: 1px solid #F8B04A; color: var(--psx-forest-950) !important; border-radius: 999px; min-height: 52px; font-size: 16px; box-shadow: 0 10px 22px rgba(238, 139, 28, .28); } /* --------------------------------------------------------------------- SEARCH DIALOG (built by psc-2026-site.js) --------------------------------------------------------------------- */ .psx-search[hidden] { display: none !important; } .psx-search { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: center; align-items: flex-start; padding: clamp(70px, 12vh, 140px) 16px 24px; background: rgba(4, 33, 26, .55); backdrop-filter: blur(4px); } .psx-search-panel { width: min(720px, 100%); max-height: calc(100dvh - 120px); display: flex; flex-direction: column; border-radius: 20px; background: #FCFCF8; box-shadow: var(--psx-shadow-lg); overflow: hidden; border: 1px solid var(--psx-line); } .psx-search-field { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--psx-line); } .psx-search-field > svg { width: 22px; height: 22px; color: var(--psx-emerald-600); flex: 0 0 auto; } .psx-search-field input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; font: inherit; font-size: 18px; color: var(--psx-ink); outline: none; } .psx-search-field input:focus-visible { outline: none; } .psx-search-close { border: 1px solid var(--psx-line-2); background: #fff; border-radius: 8px; padding: 6px 10px; font: 600 12px/1 'JetBrains Mono', monospace; color: var(--psx-muted); cursor: pointer; } .psx-search-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; } .psx-search-results:empty { display: none; } .psx-search-results a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; color: var(--psx-ink); text-decoration: none; } .psx-search-results a strong { font-size: 15.5px; color: var(--psx-forest-900); } .psx-search-results a span { font-size: 13px; color: var(--psx-muted); } .psx-search-results a em { font-style: normal; font: 600 11px/1.2 'JetBrains Mono', monospace; color: var(--psx-emerald-600); letter-spacing: .04em; } .psx-search-results a:is(:hover, :focus-visible), .psx-search-results a[aria-selected="true"] { background: var(--psx-mint-100); outline: none; } .psx-search-hint { margin: 0; padding: 12px 20px 16px; color: var(--psx-muted); font-size: 13px; border-top: 1px solid var(--psx-line); } body.psx-search-open { overflow: hidden; } /* --------------------------------------------------------------------- FOOTER --------------------------------------------------------------------- */ footer.site-footer.psx-footer { position: relative; isolation: isolate; overflow: hidden; color: rgba(233, 246, 238, .82); background-color: var(--psx-forest-900); background-image: radial-gradient(90% 120% at 0% 0%, #0E4433 0%, #072B21 55%, #04211A 100%); background-size: 100% 100%, auto; background-repeat: no-repeat; border-top: 1px solid rgba(226, 180, 90, .2); } footer.psx-footer .footer-brand img { height: 42px !important; width: auto !important; } footer.psx-footer .footer-tagline { color: rgba(233, 246, 238, .78) !important; font-size: 14.5px; line-height: 1.6; } footer.psx-footer .footer-business-contact { font-style: normal; font-size: 12.5px; line-height: 1.65; color: rgba(233, 246, 238, .55); margin: -4px 0 20px; max-width: 280px; } footer.psx-footer .footer-business-contact a { color: rgba(233, 246, 238, .82); text-decoration: none; } footer.psx-footer .footer-col-title { color: #fff !important; font: 700 12.5px/1.2 'DM Sans', sans-serif !important; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; } footer.psx-footer .footer-links li { margin-bottom: 9px; } footer.psx-footer .footer-links a { color: rgba(233, 246, 238, .78) !important; font-size: 14.5px; text-decoration: none; transition: color .15s; } footer.psx-footer .footer-links a:is(:hover, :focus-visible) { color: var(--psx-orange-400) !important; } footer.psx-footer a.psx-footer-cta, footer.psx-footer a.btn-green-sm.psx-footer-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid #F8B04A; background: var(--psx-orange-grad) !important; color: var(--psx-forest-950) !important; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 10px 22px rgba(238, 139, 28, .28); } footer.psx-footer a.psx-footer-cta:is(:hover, :focus-visible) { background: var(--psx-orange-grad-hover) !important; } footer.psx-footer .ps-footer-secondary { border-color: rgba(233, 246, 238, .1) !important; } footer.psx-footer .ps-footer-secondary strong { color: #fff !important; } footer.psx-footer .ps-footer-secondary a { color: rgba(233, 246, 238, .62) !important; } footer.psx-footer .ps-footer-secondary a:is(:hover, :focus-visible) { color: var(--psx-orange-400) !important; } footer.psx-footer .footer-copy { color: rgba(233, 246, 238, .55) !important; } /* --------------------------------------------------------------------- SITE-WIDE THEME (applies the 2026 palette to legacy page components without restructuring them). --------------------------------------------------------------------- */ :is(.btn-primary, .btn-green, .btn-checkout, .btn-step-next, .sc-primary, .ca-primary):not(.psx-keep) { background: var(--psx-orange-grad) !important; border-color: #F8B04A !important; color: var(--psx-forest-950) !important; box-shadow: 0 8px 20px rgba(238, 139, 28, .26), inset 0 1px 0 rgba(255, 255, 255, .4) !important; } :is(.btn-primary, .btn-green, .btn-checkout, .btn-step-next, .sc-primary, .ca-primary):not(.psx-keep):is(:hover, :focus-visible) { background: var(--psx-orange-grad-hover) !important; color: var(--psx-forest-950) !important; } :is(.btn-primary, .btn-green, .btn-checkout, .btn-step-next, .sc-primary, .ca-primary):not(.psx-keep):disabled, :is(.btn-primary, .btn-green, .btn-checkout, .btn-step-next, .sc-primary, .ca-primary)[aria-disabled="true"] { background: #DCE5DF !important; border-color: #CBD8D0 !important; color: #5B6E65 !important; box-shadow: none !important; } :is(.btn-green-sm):not(.psx-footer-cta) { background: var(--psx-emerald-500) !important; border-color: var(--psx-emerald-500) !important; color: #fff !important; } :is(.btn-green-sm):not(.psx-footer-cta):is(:hover, :focus-visible) { background: var(--psx-forest-700) !important; } :is(.btn-outline, .btn-step-prev, .sc-secondary) { border-color: var(--psx-line-2) !important; color: var(--psx-forest-800) !important; background: #fff !important; } :is(.btn-outline, .btn-step-prev, .sc-secondary):is(:hover, :focus-visible) { background: var(--psx-mint-100) !important; border-color: var(--psx-jade-400) !important; } .btn-outline-white { border-color: rgba(255, 255, 255, .55) !important; color: #fff !important; } .btn-outline-white:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .1) !important; } :is(.btn-orange, .btn-orange-sm) { background: var(--psx-orange-grad) !important; border-color: #F8B04A !important; color: var(--psx-forest-950) !important; } :is(.section-label, .ps-eyebrow, .eyebrow, .kicker, .wsr-kicker) { color: var(--psx-emerald-600); } .section-accent, .section-title .accent { color: var(--psx-orange-600); } :is(main, .page, article) a:not([class]) { color: var(--psx-emerald-600); text-decoration-color: rgba(19, 107, 75, .35); } :is(main, .page, article) a:not([class]):hover { color: var(--psx-orange-700); } /* Legacy dark hero / band surfaces adopt the forest gradient */ :is(.section-dark, .products-dark, .pricing-dark, .cta-band, .trust-hero, .blog-hero, .wsr-hero, .ps-audience-hero, .ps-pack-hero) { background-color: var(--psx-forest-900); } :is(input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="tel"], input[type="search"], input:not([type]), select, textarea):not(.psx-raw) { border-color: var(--psx-line-2); } :is(input, select, textarea):not(.psx-raw):focus-visible { border-color: var(--psx-emerald-500); box-shadow: 0 0 0 3px rgba(34, 147, 106, .18); outline: none; } details > summary { cursor: pointer; } /* ---- menu link normalisation (legacy .nav-dropdown a rules use column flex, green hover and no focus ring) ---- */ @media (min-width: 1024px) { #main-nav.psx-nav .ps-mega-menu.psx-menu { overflow: visible; } #main-nav.psx-nav .ps-mega-menu.psx-menu > .psx-inner { border-radius: 22px; } #main-nav.psx-nav .psx-menu a { flex-direction: row; } #main-nav.psx-nav .psx-menu a:focus { outline: none; } #main-nav.psx-nav .psx-menu a:focus-visible { outline: 3px solid var(--psx-orange-500) !important; outline-offset: 2px; } #main-nav.psx-nav .psx-menu :is(.psx-cta, .psx-head-link, .psx-foot a, .psx-btn-dark) { flex-wrap: nowrap; white-space: nowrap; } #main-nav.psx-nav .psx-menu :is(.psx-cta, .psx-head-link, .psx-btn-dark) svg { flex: 0 0 auto; } #main-nav.psx-nav .psx-menu .psx-head-link { padding: 6px 8px; border-radius: 8px; } #main-nav.psx-nav .psx-menu .psx-head-link:is(:hover, :focus-visible) { background: var(--psx-mint-100) !important; } #main-nav.psx-nav .psx-menu .ps-mega-footer.psx-foot a { display: inline-flex; align-items: center; gap: 6px; } #main-nav.psx-nav .psx-menu .ps-state-grid.psx-state-grid a, #main-nav.psx-nav .psx-menu .ps-canada-province-grid.psx-province-grid a { flex-direction: row; } #main-nav.psx-nav .psx-menu .ps-mega-mini.psx-mini { flex-direction: row; } /* Paystubs proportions (approved: tall first row, wide premium row) */ #main-nav.psx-nav .ps-mega-paystubs .psx-grid > .psx-card:nth-child(-n+2) { min-height: 196px; } #main-nav.psx-nav .ps-mega-paystubs .psx-grid > .psx-card:nth-child(n+3):not(.psx-card--wide) { min-height: 138px; } #main-nav.psx-nav .psx-rail-art--stack { width: calc(100% + 70px); margin: auto -10px -26px -60px; } #main-nav.psx-nav .psx-rail-art--folder { width: calc(100% + 40px); margin: auto -20px -14px; } #main-nav.psx-nav .psx-card--featured { background-position: 0 18px, 0 0 !important; } /* Tax forms: three even rows */ #main-nav.psx-nav .ps-mega-tax .psx-grid > .psx-card { min-height: 126px; } #main-nav.psx-nav .ps-mega-tax .psx-grid > .psx-card--featured { min-height: 150px; } /* Resources K on pedestal */ #main-nav.psx-nav .ps-resource-k.psx-res-k { position: relative; margin: auto -6px 6px; padding-top: 6px; text-align: center; } #main-nav.psx-nav .ps-resource-k.psx-res-k img { position: relative; z-index: 1; width: 82%; margin: 0 auto; } #main-nav.psx-nav .psx-pedestal { position: absolute; left: 10%; right: 10%; bottom: -2px; height: 46px; border-radius: 50%; z-index: 0; background: radial-gradient(60% 60% at 50% 40%, #1E5A44 0%, #0E3A2C 60%, #04211A 100%); box-shadow: 0 -2px 0 rgba(226, 180, 90, .55), 0 18px 30px rgba(0, 0, 0, .45); } #main-nav.psx-nav .psx-rcard-art { height: 76px; } #main-nav.psx-nav .psx-res-grid .psx-rcard .psx-card-copy small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } } @media (min-width: 1024px) { /* Fit every approved menu inside common laptop/desktop heights without an inner scrollbar. r2: applied at every desktop height so menu proportions do not jump on taller screens. */ #main-nav.psx-nav .ps-mega-inner.psx-inner { padding-top: 24px; padding-bottom: 14px; } #main-nav.psx-nav .psx-head { margin-bottom: 16px; } #main-nav.psx-nav .psx-head-tile { width: 62px; height: 62px; } #main-nav.psx-nav .psx-head-copy h3 { font-size: clamp(26px, 2.1vw, 36px); } #main-nav.psx-nav .psx-head-copy p { font-size: 15.5px; } #main-nav.psx-nav .ps-mega-grid.psx-grid { gap: 14px; } #main-nav.psx-nav .ps-mega-paystubs .psx-grid > .psx-card:nth-child(-n+2) { min-height: 172px; } #main-nav.psx-nav .ps-mega-paystubs .psx-grid > .psx-card:nth-child(n+3):not(.psx-card--wide) { min-height: 124px; } #main-nav.psx-nav .ps-mega-card.psx-card--wide { min-height: 100px; } #main-nav.psx-nav .ps-mega-tax .psx-grid > .psx-card { min-height: 112px; padding-top: 16px; padding-bottom: 16px; } #main-nav.psx-nav .ps-mega-tax .psx-grid > .psx-card--featured { min-height: 140px; } #main-nav.psx-nav .psx-rail { padding-top: 28px; } #main-nav.psx-nav .psx-rail h3 { font-size: clamp(25px, 2vw, 32px); } #main-nav.psx-nav .psx-rail p { font-size: 15px; margin-bottom: 18px; } #main-nav.psx-nav .psx-cta { min-height: 50px; font-size: 15.5px; } #main-nav.psx-nav .psx-rail-points { margin-top: 18px; padding-top: 14px; gap: 10px; } #main-nav.psx-nav .ps-mega-footer.psx-foot { margin-top: 16px; padding-top: 12px; } #main-nav.psx-nav .psx-foot-i { width: 30px; height: 30px; } #main-nav.psx-nav .psx-banner { margin: -24px -30px 14px; padding: 24px 30px 14px; min-height: 150px; } #main-nav.psx-nav .ps-state-grid.psx-state-grid { gap: 8px; } #main-nav.psx-nav .ps-state-grid.psx-state-grid a { min-height: 44px; font-size: 14.5px; } #main-nav.psx-nav .psx-map { padding-top: 6px !important; } #main-nav.psx-nav .psx-banner--ca { min-height: 150px; } #main-nav.psx-nav .psx-banner--ca .psx-head-copy h3 { font-size: clamp(30px, 2.5vw, 42px); } #main-nav.psx-nav .psx-ca-tools, #main-nav.psx-nav .psx-ca-provinces { padding: 18px 20px !important; } #main-nav.psx-nav .psx-ca-tools .ps-mega-card.psx-card { min-height: 112px; padding: 14px 16px; } #main-nav.psx-nav .psx-ca-tools .psx-card-copy small { font-size: 14px; } #main-nav.psx-nav .psx-ca-tools .psx-card-copy strong { font-size: 17.5px; } #main-nav.psx-nav .psx-ca-tools .psx-card--featured .psx-card-copy strong { font-size: 19px; } #main-nav.psx-nav .psx-ca-guide { margin-top: 12px; padding: 16px 20px; } #main-nav.psx-nav .psx-ca-guide-copy strong { font-size: 21px; } #main-nav.psx-nav .psx-ca-guide-copy small { font-size: 13.5px; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid { gap: 8px; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid a { min-height: 46px; } #main-nav.psx-nav .psx-res-hero { padding-top: 30px; } #main-nav.psx-nav .psx-res-hero h3 { font-size: clamp(28px, 2.3vw, 36px); } #main-nav.psx-nav .psx-res-hero p { font-size: 15.5px; margin-bottom: 18px; } #main-nav.psx-nav .psx-rcard-top { padding: 16px 16px 2px 18px; } #main-nav.psx-nav .psx-rcard .psx-card-copy strong { font-size: 17px; } #main-nav.psx-nav .psx-rcard .psx-card-copy small { font-size: 14px; } #main-nav.psx-nav .psx-rcard-art { height: 62px; } #main-nav.psx-nav .psx-res-rail .ps-mega-mini.psx-mini { min-height: 54px; } #main-nav.psx-nav .ps-resource-support.psx-support { min-height: 180px; } } /* ---- proportion refinements from side-by-side review (r2) ---- */ @media (min-width: 1440px) { #main-nav.psx-nav .nav-logo img { height: 46px !important; } #main-nav.psx-nav .nav-dd-trigger { font-size: 15.5px; min-height: 50px; padding: 0 17px; } #main-nav.psx-nav .nav-cta.psx-nav-cta { min-height: 48px; font-size: 15.5px; padding-left: 24px; } #main-nav.psx-nav .psx-cta-dot { width: 32px; height: 32px; } #main-nav.psx-nav .psx-search-btn { width: 46px; height: 46px; } } @media (min-width: 1024px) { #main-nav.psx-nav .ps-state-grid.psx-state-grid a { white-space: nowrap; padding: 0 10px 0 14px; font-size: 14px; } #main-nav.psx-nav .ps-state-grid.psx-state-grid a span { overflow: hidden; text-overflow: ellipsis; } #main-nav.psx-nav .psx-rail-art--stack { width: calc(100% + 120px); margin: auto -30px -40px -90px; } #main-nav.psx-nav .psx-rail-art--folder { width: calc(100% + 64px); margin: auto -32px -18px; } #main-nav.psx-nav .psx-rcard-art { height: 96px !important; } #main-nav.psx-nav .ps-resource-k.psx-res-k img { width: 100%; } #main-nav.psx-nav .ps-resource-support.psx-support { grid-template-columns: 128px minmax(0, 1fr); } #main-nav.psx-nav .psx-support > img { width: 128px; height: 168px; } } @media (min-width: 1024px) and (max-width: 1400px) { #main-nav.psx-nav .ps-state-grid.psx-state-grid a { font-size: 12.5px; padding: 0 8px 0 10px; } #main-nav.psx-nav .psx-rcard-art { height: 64px !important; } #main-nav.psx-nav .ps-resource-support.psx-support { grid-template-columns: 92px minmax(0, 1fr); } #main-nav.psx-nav .psx-support > img { width: 92px; height: 130px; } } /* Large desktop: approved mockups use a larger type scale inside the menus */ @media (min-width: 1500px) { #main-nav.psx-nav .ps-mega-menu.psx-menu { width: min(1440px, calc(100vw - 200px)); } #main-nav.psx-nav .psx-head-copy h3 { font-size: 42px; } #main-nav.psx-nav .psx-head-copy p { font-size: 17.5px; } #main-nav.psx-nav .psx-card-copy strong { font-size: 20px; } #main-nav.psx-nav .psx-card-copy small { font-size: 16px; } #main-nav.psx-nav .psx-card--featured .psx-card-copy strong { font-size: 23px; } #main-nav.psx-nav .psx-card--featured .psx-card-copy small { font-size: 16.5px; } #main-nav.psx-nav .psx-rail h3 { font-size: 36px; } #main-nav.psx-nav .psx-rail p { font-size: 17px; } #main-nav.psx-nav .psx-cta { font-size: 17px; } #main-nav.psx-nav .psx-rail--dark .ps-mega-mini.psx-mini { font-size: 17px; } #main-nav.psx-nav .ps-mega-footer.psx-foot { font-size: 15px; } #main-nav.psx-nav .ps-mega-card.psx-card { padding-top: 18px; padding-bottom: 18px; } #main-nav.psx-nav .psx-layout { grid-template-columns: minmax(0, 1fr) 380px; } #main-nav.psx-nav .psx-layout--states { grid-template-columns: minmax(0, 1fr) 400px; } #main-nav.psx-nav .ps-state-grid.psx-state-grid a { font-size: 15px; } #main-nav.psx-nav .psx-res-hero h3 { font-size: 40px; } #main-nav.psx-nav .psx-res-hero p { font-size: 17px; } #main-nav.psx-nav .psx-rcard .psx-card-copy strong { font-size: 19px; } #main-nav.psx-nav .psx-rcard .psx-card-copy small { font-size: 15px; } #main-nav.psx-nav .psx-res-rail .ps-mega-mini.psx-mini { font-size: 15.5px; } #main-nav.psx-nav .psx-banner--ca .psx-head-copy h3 { font-size: 48px; } #main-nav.psx-nav .psx-ca-tools .psx-card-copy strong { font-size: 19px; } #main-nav.psx-nav .psx-ca-tools .psx-card-copy small { font-size: 15px; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid a { font-size: 15.5px; } } @media (min-width: 1500px) { #main-nav.psx-nav .ps-mega-menu.psx-menu { width: min(1530px, calc(100vw - 140px)); } #main-nav.psx-nav .ps-resources-layout.psx-res-layout { grid-template-columns: 370px minmax(0, 1fr) 340px; } #main-nav.psx-nav .ps-resource-support.psx-support { grid-template-columns: 140px minmax(0, 1fr); } #main-nav.psx-nav .psx-support > img { width: 140px; height: 186px; } } @media (min-width: 1500px) { #main-nav.psx-nav .psx-rcard-art { height: 86px !important; } } /* ===== Final responsive compaction for laptops (kept last so it wins source order) ===== */ @media (min-width: 1024px) and (max-width: 1499px) { #main-nav.psx-nav .ps-mega-inner.psx-inner { padding: 20px 22px 12px; } #main-nav.psx-nav .psx-banner { margin: -20px -22px 12px; padding: 20px 22px 12px; min-height: 128px; } #main-nav.psx-nav .psx-banner--ca { min-height: 132px; } #main-nav.psx-nav .psx-head { gap: 16px; margin-bottom: 14px; } #main-nav.psx-nav .psx-head-tile { width: 56px; height: 56px; border-radius: 14px; } #main-nav.psx-nav .psx-head-tile svg { width: 28px; height: 28px; } #main-nav.psx-nav .psx-head-copy h3 { font-size: clamp(24px, 2.3vw, 32px); } #main-nav.psx-nav .psx-banner--ca .psx-head-copy h3 { font-size: clamp(28px, 2.6vw, 38px); } #main-nav.psx-nav .psx-head-copy p { font-size: 14.5px; } #main-nav.psx-nav .psx-layout, #main-nav.psx-nav .psx-layout--states { grid-template-columns: minmax(0, 1fr) clamp(250px, 24vw, 330px); gap: 18px; } #main-nav.psx-nav .ps-mega-grid.psx-grid { gap: 12px; } #main-nav.psx-nav .ps-mega-card.psx-card { min-height: 96px; grid-template-columns: 50px minmax(0, 1fr) 34px; gap: 14px; padding: 14px 14px 14px 16px; } #main-nav.psx-nav .ps-mega-paystubs .psx-grid > .psx-card:nth-child(-n+2) { min-height: 150px; } #main-nav.psx-nav .ps-mega-paystubs .psx-grid > .psx-card:nth-child(n+3):not(.psx-card--wide) { min-height: 110px; } #main-nav.psx-nav .ps-mega-card.psx-card--wide { min-height: 92px; } #main-nav.psx-nav .ps-mega-tax .psx-grid > .psx-card { min-height: 104px; padding-top: 14px; padding-bottom: 14px; } #main-nav.psx-nav .ps-mega-tax .psx-grid > .psx-card--featured { min-height: 128px; } #main-nav.psx-nav .psx-card-icon { width: 50px !important; height: 50px !important; border-radius: 13px !important; } #main-nav.psx-nav .psx-card-icon svg { width: 26px !important; height: 26px !important; } #main-nav.psx-nav .psx-card-copy strong { font-size: 16.5px; } #main-nav.psx-nav .psx-card-copy small { font-size: 13.5px; } #main-nav.psx-nav .psx-card--featured .psx-card-copy strong { font-size: 18.5px; } #main-nav.psx-nav .psx-card--featured .psx-card-copy small { font-size: 13.5px; } #main-nav.psx-nav .psx-card--featured .psx-card-go { width: 44px; height: 44px; } #main-nav.psx-nav .psx-card-go { width: 34px; height: 34px; } #main-nav.psx-nav .psx-badge { font-size: 10.5px; padding: 3px 10px; } #main-nav.psx-nav .psx-rail { padding: 22px 22px 0; } #main-nav.psx-nav .psx-rail-badge { width: 48px; height: 48px; top: 16px; right: 16px; } #main-nav.psx-nav .psx-rail-badge svg { width: 22px; height: 22px; } #main-nav.psx-nav .psx-kicker { font-size: 11.5px; margin-bottom: 10px; } #main-nav.psx-nav .psx-rail h3 { font-size: clamp(21px, 2vw, 27px); padding-right: 46px; } #main-nav.psx-nav .psx-rail p { font-size: 13.5px; margin-bottom: 14px; } #main-nav.psx-nav .psx-cta { min-height: 44px; font-size: 14px; padding: 0 18px; } #main-nav.psx-nav .psx-rail-links { margin-top: 14px; } #main-nav.psx-nav .psx-rail--dark .ps-mega-mini.psx-mini { min-height: 48px; font-size: 13.5px; grid-template-columns: 34px 1fr 18px; gap: 10px; } #main-nav.psx-nav .psx-rail--dark .psx-mini .ps-mega-mini-icon { width: 34px; height: 34px; } #main-nav.psx-nav .psx-rail-points { margin-top: 14px; padding-top: 12px; gap: 8px; } #main-nav.psx-nav .psx-rail-points li { font-size: 13.5px; gap: 10px; } #main-nav.psx-nav .psx-rail-points svg { width: 20px; height: 20px; flex: 0 0 auto; } #main-nav.psx-nav .psx-rail-art--stack, #main-nav.psx-nav .psx-rail-art--folder { max-height: 170px; object-fit: contain; object-position: center bottom; } #main-nav.psx-nav .ps-mega-footer.psx-foot { margin-top: 12px; padding-top: 10px; font-size: 13px; } #main-nav.psx-nav .ps-mega-footer.psx-foot a { font-size: 14px; } #main-nav.psx-nav .psx-foot-i { width: 28px; height: 28px; } #main-nav.psx-nav .psx-label { font-size: 11px; margin-bottom: 10px; } #main-nav.psx-nav .ps-state-grid.psx-state-grid { gap: 7px; } #main-nav.psx-nav .ps-state-grid.psx-state-grid a { min-height: 40px; font-size: 13px; padding: 0 8px 0 11px; } #main-nav.psx-nav .psx-map { padding-top: 4px !important; } #main-nav.psx-nav .psx-banner-note { right: 22px; max-width: 250px; padding: 12px 16px; gap: 12px; } #main-nav.psx-nav .psx-banner-note p { font-size: 14px; } #main-nav.psx-nav .psx-banner-note svg { width: 34px; height: 34px; } #main-nav.psx-nav .psx-ca-tools, #main-nav.psx-nav .psx-ca-provinces { padding: 14px 16px !important; } #main-nav.psx-nav .psx-ca-tools .ps-mega-card.psx-card { min-height: 98px; padding: 12px 14px; grid-template-columns: 46px minmax(0, 1fr) 32px; gap: 12px; } #main-nav.psx-nav .psx-ca-tools .psx-card-icon { width: 46px !important; height: 46px !important; } #main-nav.psx-nav .psx-ca-tools .psx-card-copy strong { font-size: 15.5px; } #main-nav.psx-nav .psx-ca-tools .psx-card-copy small { font-size: 12.5px; } #main-nav.psx-nav .psx-ca-tools .psx-card--featured .psx-card-copy strong { font-size: 16.5px; } #main-nav.psx-nav .psx-ca-guide { grid-template-columns: 46px minmax(0, 1fr) auto; margin-top: 10px; padding: 12px 16px; gap: 14px; } #main-nav.psx-nav .psx-ca-guide .psx-cta { grid-column: auto; } #main-nav.psx-nav .psx-ca-guide-i { width: 46px; height: 46px; } #main-nav.psx-nav .psx-ca-guide-i svg { width: 22px; height: 22px; } #main-nav.psx-nav .psx-ca-guide-copy em { font-size: 10.5px; } #main-nav.psx-nav .psx-ca-guide-copy strong { font-size: 17px; } #main-nav.psx-nav .psx-ca-guide-copy small { font-size: 12.5px; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid { gap: 7px; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid a { min-height: 40px; font-size: 13px; grid-template-columns: 30px 1fr 14px; gap: 9px; padding: 4px 10px; } #main-nav.psx-nav .psx-province-grid img { width: 30px; height: 18px; } #main-nav.psx-nav .ps-resources-layout.psx-res-layout { grid-template-columns: clamp(220px, 21vw, 300px) minmax(0, 1fr) clamp(220px, 20vw, 280px); gap: 14px; } #main-nav.psx-nav .psx-res-hero { padding: 22px 20px 0; } #main-nav.psx-nav .psx-res-hero h3 { font-size: clamp(23px, 2.1vw, 30px); } #main-nav.psx-nav .psx-res-hero p { font-size: 13.5px; margin-bottom: 14px; } #main-nav.psx-nav .ps-resource-grid.psx-res-grid { gap: 12px; } #main-nav.psx-nav .psx-rcard-top { grid-template-columns: 40px minmax(0, 1fr) 28px; gap: 10px; padding: 12px 12px 2px 14px; } #main-nav.psx-nav .psx-rcard .psx-card-icon { width: 40px !important; height: 40px !important; border-radius: 11px !important; } #main-nav.psx-nav .psx-rcard .psx-card-icon svg { width: 21px !important; height: 21px !important; } #main-nav.psx-nav .psx-rcard .psx-card-copy strong { font-size: 15px; } #main-nav.psx-nav .psx-rcard .psx-card-copy small { font-size: 12.5px; -webkit-line-clamp: 2; } #main-nav.psx-nav .psx-rcard .psx-card-go { width: 28px; height: 28px; margin-top: 4px; } #main-nav.psx-nav .psx-rcard-art { height: 64px !important; } #main-nav.psx-nav .psx-res-rail .ps-mega-mini.psx-mini { min-height: 46px; font-size: 13px; padding: 6px 10px; grid-template-columns: 30px 1fr 16px; gap: 10px; } #main-nav.psx-nav .psx-res-rail .psx-mini .ps-mega-mini-icon { width: 30px; height: 30px; } #main-nav.psx-nav .ps-resource-support.psx-support { grid-template-columns: 88px minmax(0, 1fr); min-height: 150px; padding: 12px 12px 0 6px; } #main-nav.psx-nav .psx-support > img { width: 88px; height: 124px; } #main-nav.psx-nav .psx-support p { font-size: 12px; margin-bottom: 10px; } #main-nav.psx-nav .ps-resource-contact.psx-btn-dark { min-height: 38px; font-size: 13px; padding: 0 14px; } } @media (min-width: 1024px) and (max-width: 1239px) { #main-nav.psx-nav { grid-template-columns: auto 1fr auto; column-gap: 10px; } #main-nav.psx-nav .nav-logo img { height: 32px !important; } #main-nav.psx-nav .nav-links { justify-self: center; gap: 0; } #main-nav.psx-nav .nav-dd-trigger { padding: 0 9px; font-size: 13.5px; } #main-nav.psx-nav .psx-nav-actions { gap: 8px; } #main-nav.psx-nav .psx-search-btn { width: 38px; height: 38px; } #main-nav.psx-nav .nav-cta.psx-nav-cta { padding-left: 14px; font-size: 13px; min-height: 40px; } #main-nav.psx-nav .psx-cta-dot { width: 24px; height: 24px; } #main-nav.psx-nav .ps-state-grid.psx-state-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } #main-nav.psx-nav .psx-banner-note { display: none; } #main-nav.psx-nav .psx-ca-panel { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } #main-nav.psx-nav .psx-ca-guide { grid-template-columns: 46px minmax(0, 1fr); } #main-nav.psx-nav .psx-ca-guide .psx-cta { grid-column: 2; justify-self: start; min-height: 38px; } #main-nav.psx-nav .psx-ca-guide-copy small { display: none; } #main-nav.psx-nav .psx-rail-art--stack, #main-nav.psx-nav .psx-rail-art--folder { display: none; } #main-nav.psx-nav .psx-rail { padding-bottom: 20px; } } @media (min-width: 1024px) { #main-nav.psx-nav .psx-rcard-art { object-fit: contain; object-position: right bottom; background: url("/assets/images/psc-2026/menu/res-waves.svg") left bottom / 100% 62% no-repeat; } } @media (min-width: 1300px) and (max-width: 1499px) and (min-height: 850px) { #main-nav.psx-nav .psx-rcard-art { height: 96px !important; } #main-nav.psx-nav .ps-resource-support.psx-support { grid-template-columns: 112px minmax(0, 1fr); } #main-nav.psx-nav .psx-support > img { width: 112px; height: 156px; } #main-nav.psx-nav .ps-mega-paystubs .psx-grid > .psx-card:nth-child(-n+2) { min-height: 176px; } #main-nav.psx-nav .ps-mega-paystubs .psx-grid > .psx-card:nth-child(n+3):not(.psx-card--wide) { min-height: 124px; } #main-nav.psx-nav .ps-mega-tax .psx-grid > .psx-card { min-height: 116px; } #main-nav.psx-nav .ps-mega-tax .psx-grid > .psx-card--featured { min-height: 140px; } #main-nav.psx-nav .psx-rail-art--stack, #main-nav.psx-nav .psx-rail-art--folder { max-height: 210px; } #main-nav.psx-nav .psx-ca-tools .ps-mega-card.psx-card { min-height: 112px; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid a { min-height: 46px; } } /* Existing PayStubCheck typography retained: Bricolage Grotesque for display headings, DM Sans for text. */ :root { --psx-display: 'Bricolage Grotesque', sans-serif; --psx-text: 'DM Sans', sans-serif; } #main-nav.psx-nav :is(.psx-head-copy h3, .psx-rail h3, .psx-res-hero h3, .psx-ca-guide-copy strong), :is(.psh-hero-title, .psh-h2, .psh-how-panel h2, .psh-rating-score b, .psh-pack-price b, .psh-smart .psc-smart-title), :is(.pj-title, .pj-h2, .pj-fit-card h3, .pj-cta h2, .pj-id-head b), :is(.pc-h1, .pc-h2, .pc-title) { font-family: var(--psx-display) !important; } /* New 2026 controls use the existing body font (DM Sans) rather than the browser default. */ .psx-search-btn, .psh-qbtn, .psh-how-close { font-family: inherit; } /* Short desktop viewports (e.g. 1024x768): trim panel padding so menus fit without an inner scrollbar. */ @media (min-width: 1024px) and (max-height: 800px) { #main-nav.psx-nav .ps-mega-inner.psx-inner { padding-top: 24px; padding-bottom: 12px; } } /* 1024–1279px wide and short (≤ 860px tall): compact the long lists so every menu fits the viewport with no inner scrollbar. */ @media (min-width: 1024px) and (max-width: 1279px) and (max-height: 860px) { #main-nav.psx-nav .ps-mega-states .psx-banner, #main-nav.psx-nav .ps-mega-canada .psx-banner { display: none; } #main-nav.psx-nav .ps-mega-states .psx-head, #main-nav.psx-nav .ps-mega-canada .psx-head { margin-bottom: 10px; } #main-nav.psx-nav .ps-state-grid.psx-state-grid { gap: 5px; } #main-nav.psx-nav .ps-state-grid.psx-state-grid a { min-height: 31px; font-size: 12.5px; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid { gap: 5px; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid a { min-height: 31px; } #main-nav.psx-nav .ps-mega-resources .psx-res-k { max-height: 120px; } #main-nav.psx-nav .ps-mega-inner.psx-inner { padding: 12px 22px 4px; } #main-nav.psx-nav .psx-menu.ps-mega-canada .ps-mega-card.psx-card { padding-top: 10px !important; padding-bottom: 10px !important; } #main-nav.psx-nav .psx-menu:is(.ps-mega-canada, .ps-mega-states) .ps-mega-footer.psx-foot { padding-top: 8px !important; padding-bottom: 8px !important; } #main-nav.psx-nav :is(.ps-mega-canada, .ps-mega-resources) .psx-card p { font-size: 12.5px; line-height: 1.42; } } /* Fit-to-viewport scaling set by psc-2026-site.js (only when a menu would otherwise need its own scrollbar). */ #main-nav.psx-nav .ps-mega-inner.psx-inner > * { zoom: var(--psx-fit, 1); } /* ===================== patch-002-r2 refinements ===================== */ @media (min-width: 1024px) { /* Paystubs: six cards in a compact 2 x 3 grid (approved Paystubs mockup, rev. 2) */ #main-nav.psx-nav .ps-mega-menu.psx-menu.ps-mega-paystubs { width: min(1380px, calc(100vw - 56px)); } #main-nav.psx-nav .ps-mega-paystubs .psx-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; } #main-nav.psx-nav .ps-mega-paystubs .psx-head { margin-bottom: 18px; } #main-nav.psx-nav .ps-mega-paystubs .ps-mega-grid.psx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; } #main-nav.psx-nav .ps-mega-paystubs .psx-grid > .ps-mega-card.psx-card { min-height: 122px !important; grid-template-columns: 60px minmax(0, 1fr) 34px; gap: 18px; padding: 18px 18px 18px 20px; } #main-nav.psx-nav .ps-mega-paystubs .psx-card-icon { width: 60px !important; height: 60px !important; border-radius: 15px !important; } #main-nav.psx-nav .ps-mega-paystubs .psx-card-icon svg { width: 29px !important; height: 29px !important; } #main-nav.psx-nav .ps-mega-paystubs .psx-card-copy { gap: 4px; } #main-nav.psx-nav .ps-mega-paystubs .psx-card-copy strong { font-size: 20.5px !important; } #main-nav.psx-nav .ps-mega-paystubs .psx-card--featured .psx-card-copy strong { font-size: 22px !important; } #main-nav.psx-nav .ps-mega-paystubs .psx-head h3 { font-size: 38px; } #main-nav.psx-nav .ps-mega-paystubs .psx-head p { font-size: 16.5px; max-width: 560px; } #main-nav.psx-nav .ps-mega-paystubs .psx-card-copy small { font-size: 15.5px !important; line-height: 1.45; } #main-nav.psx-nav .ps-mega-paystubs .psx-card-go { width: 32px !important; height: 32px !important; } #main-nav.psx-nav .ps-mega-paystubs .psx-main > .psx-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--psx-line); } #main-nav.psx-nav .ps-mega-paystubs .psx-layout { align-items: stretch; } #main-nav.psx-nav .ps-mega-paystubs .psx-card-go svg { width: 15px !important; height: 15px !important; } #main-nav.psx-nav .ps-mega-paystubs .psx-card--featured .psx-card-go { width: 38px !important; height: 38px !important; } #main-nav.psx-nav .ps-mega-paystubs .psx-card--featured .psx-badge { margin-bottom: 2px; padding: 3px 9px; font-size: 10.5px; } #main-nav.psx-nav .ps-mega-paystubs .psx-rail { padding: 28px 26px 0; } #main-nav.psx-nav .ps-mega-paystubs .psx-rail h3 { font-size: clamp(28px, 2.4vw, 38px); } #main-nav.psx-nav .ps-mega-paystubs .psx-rail p { font-size: 16.5px; margin-bottom: 20px; } #main-nav.psx-nav .ps-mega-paystubs .psx-rail-art--stack { max-height: 190px; object-fit: contain; object-position: center bottom; margin-top: auto; } /* Featured cards: flat emerald (no decorative line artwork); distinct, accessible hover/focus */ #main-nav.psx-nav .ps-mega-card.psx-card--featured { background-image: radial-gradient(120% 140% at 0% 0%, #155C43 0%, #0B3B2D 55%, #072B21 100%) !important; } #main-nav.psx-nav .ps-mega-card.psx-card--featured:is(:hover, :focus-visible) { background-image: linear-gradient(135deg, #1B7A56 0%, #136B4B 60%, #0F4D3A 100%) !important; border-color: var(--psx-orange-400) !important; } #main-nav.psx-nav .ps-mega-card.psx-card--featured:is(:hover, :focus-visible) .psx-card-go { background: #FDB447; transform: translateX(2px); } /* Resource cards without decorative art strips: compact, consistent heights */ #main-nav.psx-nav .ps-resource-grid { grid-auto-rows: 1fr; } #main-nav.psx-nav .ps-resource-grid .ps-mega-card.psx-rcard { justify-content: flex-start; min-height: 132px !important; } #main-nav.psx-nav .psx-rcard-top { padding: 20px 18px 18px 20px; } #main-nav.psx-nav .psx-rcard-art { display: none !important; } /* Rails: plain gradients only (rejected curved-line artwork removed) */ #main-nav.psx-nav .ps-mega-tax .psx-rail-badge { display: none; } } @media (min-width: 1024px) and (max-width: 1399px) { #main-nav.psx-nav .ps-mega-paystubs .psx-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; } #main-nav.psx-nav .ps-mega-paystubs .psx-grid > .ps-mega-card.psx-card { min-height: 98px !important; grid-template-columns: 48px minmax(0, 1fr) 30px; gap: 12px; padding: 14px 12px 14px 14px; } #main-nav.psx-nav .ps-mega-paystubs .psx-card-icon { width: 48px !important; height: 48px !important; } #main-nav.psx-nav .ps-mega-paystubs .psx-card-icon svg { width: 24px !important; height: 24px !important; } #main-nav.psx-nav .ps-mega-paystubs .psx-card-copy strong { font-size: 17px !important; } #main-nav.psx-nav .ps-mega-paystubs .psx-card--featured .psx-card-copy strong { font-size: 18px !important; } #main-nav.psx-nav .ps-mega-paystubs .psx-card-copy small { font-size: 13.5px !important; } #main-nav.psx-nav .ps-mega-paystubs .psx-head h3 { font-size: 30px; } #main-nav.psx-nav .ps-mega-paystubs .psx-head p { font-size: 14.5px; } #main-nav.psx-nav .ps-mega-paystubs .psx-rail { padding: 22px 20px 0; } #main-nav.psx-nav .ps-mega-paystubs .psx-rail h3 { font-size: 26px; } #main-nav.psx-nav .ps-mega-paystubs .psx-rail p { font-size: 14.5px; margin-bottom: 14px; } #main-nav.psx-nav .ps-mega-paystubs .psx-rail-art--stack { display: block !important; max-height: 150px; width: calc(100% + 40px); margin: auto -20px -6px; } } /* Footer contact with icons (approved footer reference). main.js (protected) rebuilds this
with inline styles at runtime, so the icons are drawn with CSS only. */ footer.psx-footer .footer-business-contact { position: relative !important; font-size: 16px !important; line-height: 1.6 !important; color: rgba(233, 246, 238, .86) !important; margin: 18px 0 26px !important; max-width: 320px !important; padding-left: 38px !important; font-style: normal !important; } footer.psx-footer .footer-business-contact a { display: block; position: relative; color: rgba(233, 246, 238, .94) !important; margin-bottom: 12px; text-decoration: none; } footer.psx-footer .footer-business-contact a:hover, footer.psx-footer .footer-business-contact a:focus-visible { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; } footer.psx-footer .footer-business-contact a::before, footer.psx-footer .footer-business-contact::before { content: ""; position: absolute; left: -38px; width: 22px; height: 22px; background: center / 22px 22px no-repeat; opacity: .9; } footer.psx-footer .footer-business-contact a::before { top: 1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E9F6EE'%3E%3Cpath d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm0 2v.4l8 5.1 8-5.1V7H4zm16 2.8-7.5 4.8a1 1 0 0 1-1 0L4 9.8V17h16V9.8z'/%3E%3C/svg%3E"); } footer.psx-footer .footer-business-contact::before { left: 0; top: calc(1.6em + 13px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E9F6EE'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); } footer.psx-footer .footer-business-contact br:first-of-type { display: none; } /* ===== patch-002-r2: shared mega-menu geometry + one full-card hover/focus treatment ===== */ @media (min-width: 1024px) { /* One outer width / position / radius for all five menus (contents differ, frame does not). */ #main-nav.psx-nav .ps-mega-menu.psx-menu, #main-nav.psx-nav .ps-mega-menu.psx-menu.ps-mega-paystubs { width: min(1420px, calc(100vw - 56px)) !important; border-radius: 24px !important; } /* Arrow controls: one size everywhere; the featured card keeps an orange arrow at nearly the same size. */ #main-nav.psx-nav .psx-card-go, #main-nav.psx-nav .ps-mega-paystubs .psx-card-go, #main-nav.psx-nav .psx-rcard .psx-card-go { width: 36px !important; height: 36px !important; } #main-nav.psx-nav .psx-card-go svg { width: 16px !important; height: 16px !important; } #main-nav.psx-nav .psx-card--featured .psx-card-go, #main-nav.psx-nav .ps-mega-paystubs .psx-card--featured .psx-card-go { width: 38px !important; height: 38px !important; box-shadow: 0 6px 14px rgba(238, 139, 28, .28) !important; } #main-nav.psx-nav .psx-card--featured .psx-card-go svg { width: 17px !important; height: 17px !important; } /* Every selectable card: the whole card turns dark emerald; text, icons, borders and arrows follow. */ #main-nav.psx-nav .ps-mega-card.psx-card, #main-nav.psx-nav .psx-res-rail .ps-mega-mini.psx-mini, #main-nav.psx-nav .ps-state-grid.psx-state-grid a, #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid a { transition: background-color .2s ease, background-image .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease !important; } #main-nav.psx-nav .ps-mega-card.psx-card:not(.psx-card--featured):is(:hover, :focus-visible), #main-nav.psx-nav .psx-res-rail .ps-mega-mini.psx-mini:is(:hover, :focus-visible) { background-color: #0F5A40 !important; background-image: linear-gradient(135deg, #17704F 0%, #0F5A40 55%, #0B4532 100%) !important; border-color: #0F5A40 !important; color: #fff !important; box-shadow: 0 14px 30px rgba(7, 43, 33, .22) !important; transform: translateY(-2px); } #main-nav.psx-nav .ps-mega-card.psx-card:not(.psx-card--featured):is(:hover, :focus-visible) strong, #main-nav.psx-nav .psx-res-rail .ps-mega-mini.psx-mini:is(:hover, :focus-visible) > span:not([class]) { color: #fff !important; } #main-nav.psx-nav .ps-mega-card.psx-card:not(.psx-card--featured):is(:hover, :focus-visible) small { color: rgba(236, 248, 241, .9) !important; } #main-nav.psx-nav .ps-mega-card.psx-card:not(.psx-card--featured):is(:hover, :focus-visible) .psx-card-icon, #main-nav.psx-nav .psx-res-rail .ps-mega-mini.psx-mini:is(:hover, :focus-visible) .ps-mega-mini-icon { background: rgba(255, 255, 255, .13) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18) !important; } #main-nav.psx-nav .ps-mega-card.psx-card:not(.psx-card--featured):is(:hover, :focus-visible) .psx-card-icon.psx-tone-orange { color: #FDB447 !important; } #main-nav.psx-nav .ps-mega-card.psx-card:not(.psx-card--featured):is(:hover, :focus-visible) .psx-card-go { background: var(--psx-orange-grad, linear-gradient(180deg, #FDB447, #F29A21)) !important; color: var(--psx-forest-950) !important; } #main-nav.psx-nav .psx-res-rail .ps-mega-mini.psx-mini:is(:hover, :focus-visible) .psx-mini-go { color: #FDB447 !important; } /* States / provinces: same dark-emerald selected treatment. */ #main-nav.psx-nav .ps-state-grid.psx-state-grid a:is(:hover, :focus-visible), #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid a:is(:hover, :focus-visible) { background: linear-gradient(135deg, #17704F 0%, #0F5A40 55%, #0B4532 100%) !important; border-color: #0F5A40 !important; color: #fff !important; } /* Featured card (already dark): brighter emerald + orange edge, text stays white. */ #main-nav.psx-nav .ps-mega-card.psx-card--featured:is(:hover, :focus-visible) { color: #fff !important; background-image: linear-gradient(135deg, #22855F 0%, #187A55 55%, #12684A 100%) !important; border-color: #FDB447 !important; box-shadow: 0 0 0 3px rgba(253, 180, 71, .28), 0 18px 36px rgba(7, 43, 33, .3) !important; transform: translateY(-2px); } #main-nav.psx-nav :is(.ps-mega-card.psx-card, .ps-mega-mini.psx-mini, .psx-state-grid a, .psx-province-grid a):focus-visible { outline: 3px solid #FDB447 !important; outline-offset: 2px; } } @media (hover: none) { /* Touch: the pressed card shows the same selected state. */ #main-nav.psx-nav .ps-mega-card.psx-card:not(.psx-card--featured):active { background: #0F5A40 !important; color: #fff !important; } #main-nav.psx-nav .ps-mega-card.psx-card:not(.psx-card--featured):active :is(strong, small) { color: #fff !important; } } /* ===== patch-002-r2: Resources menu refinement (reference layout; no decorative line art) ===== */ @media (min-width: 1024px) { #main-nav.psx-nav .ps-resource-k.psx-res-art { margin: auto -10px 8px; padding-top: 14px; } #main-nav.psx-nav .ps-resource-k.psx-res-art img { width: 100%; height: auto; display: block; filter: none; } #main-nav.psx-nav .psx-res-hero { padding-bottom: 0; } #main-nav.psx-nav .psx-res-hero .psx-kicker { color: var(--psx-orange-400); } /* Uniform feature cards with tinted icon tiles (orange / green), clear hierarchy. */ #main-nav.psx-nav .ps-resource-grid .ps-mega-card.psx-rcard { border: 1px solid #E1ECE6 !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 8px 20px rgba(7, 43, 33, .05) !important; min-height: 0 !important; } #main-nav.psx-nav .psx-rcard--featured { box-shadow: 0 8px 20px rgba(7, 43, 33, .05) !important; } #main-nav.psx-nav .psx-rcard-top { grid-template-columns: 60px minmax(0, 1fr) 36px !important; gap: 18px !important; padding: 22px 20px 20px 22px !important; align-items: start; } #main-nav.psx-nav .psx-rcard .psx-card-icon { width: 60px !important; height: 60px !important; border-radius: 14px !important; background: linear-gradient(180deg, #ECF7F1, #DDF0E5) !important; color: var(--psx-emerald-600) !important; } #main-nav.psx-nav .psx-rcard .psx-card-icon svg { width: 30px !important; height: 30px !important; } #main-nav.psx-nav .ps-resource-grid > .psx-rcard:is(:nth-child(1), :nth-child(4), :nth-child(6)) .psx-card-icon { background: linear-gradient(180deg, #FFF2E0, #FFE3BD) !important; color: var(--psx-orange-700, #B5600B) !important; } #main-nav.psx-nav .psx-rcard .psx-card-copy { gap: 8px !important; padding-top: 2px; } #main-nav.psx-nav .psx-rcard .psx-card-copy strong { font-size: 18px !important; line-height: 1.25; } #main-nav.psx-nav .psx-rcard .psx-card-copy small { font-size: 14.5px !important; line-height: 1.5; } #main-nav.psx-nav .ps-resource-grid > .psx-rcard:not(.psx-card--featured):is(:hover, :focus-visible) .psx-card-icon { background: rgba(255, 255, 255, .13) !important; color: #fff !important; } #main-nav.psx-nav .ps-resource-grid > .psx-rcard:is(:nth-child(1), :nth-child(4), :nth-child(6)):is(:hover, :focus-visible) .psx-card-icon { color: #FDB447 !important; } /* Read next + Contact & support: supporting information, visually distinct from navigation cards. */ #main-nav.psx-nav .psx-res-rail { padding-left: 18px; border-left: 1px solid #E4ECE8; } #main-nav.psx-nav .ps-resource-support.psx-support { grid-template-columns: minmax(0, 1fr) 104px !important; gap: 6px !important; align-items: end !important; padding: 20px 0 0 20px !important; border: 1px solid #DCEAE2 !important; border-radius: 18px !important; background: linear-gradient(160deg, #F2F9F5 0%, #E3F2EA 100%) !important; overflow: hidden; } #main-nav.psx-nav .psx-support > div { padding-bottom: 20px !important; align-self: start; } #main-nav.psx-nav .psx-support > img { width: 104px !important; height: 150px !important; object-fit: contain; object-position: right bottom; } #main-nav.psx-nav .psx-support .psx-label { color: var(--psx-emerald-600); letter-spacing: .14em; } } @media (min-width: 1024px) and (max-width: 1399px) { #main-nav.psx-nav .psx-rcard-top { grid-template-columns: 46px minmax(0, 1fr) 32px !important; gap: 12px !important; padding: 16px 14px 14px 16px !important; } #main-nav.psx-nav .psx-rcard .psx-card-icon { width: 46px !important; height: 46px !important; } #main-nav.psx-nav .psx-rcard .psx-card-icon svg { width: 24px !important; height: 24px !important; } #main-nav.psx-nav .psx-rcard .psx-card-copy strong { font-size: 15.5px !important; } #main-nav.psx-nav .psx-rcard .psx-card-copy small { font-size: 13px !important; } #main-nav.psx-nav .psx-rcard .psx-card-go { width: 32px !important; height: 32px !important; } #main-nav.psx-nav .psx-res-rail { padding-left: 12px; } #main-nav.psx-nav .ps-resource-support.psx-support { grid-template-columns: minmax(0, 1fr) 80px !important; padding: 14px 0 0 14px !important; } #main-nav.psx-nav .psx-support > img { width: 80px !important; height: 118px !important; } } @media (min-width: 1024px) { /* r2: Resources descriptions are never cut off. */ #main-nav.psx-nav .psx-res-grid .psx-rcard .psx-card-copy small { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; } } @media (min-width: 1400px) { #main-nav.psx-nav .ps-resources-layout.psx-res-layout { grid-template-columns: 300px minmax(0, 1fr) 300px !important; gap: 18px !important; } } @media (min-width: 1024px) and (max-width: 1239px) { #main-nav.psx-nav .psx-res-hero .psx-cta { max-width: 100%; box-sizing: border-box; padding-left: 14px !important; padding-right: 14px !important; font-size: 13.5px !important; gap: 8px; white-space: nowrap; } } @media (min-width: 1500px) { /* r2: one shared large-desktop frame for all five menus */ #main-nav.psx-nav .ps-mega-menu.psx-menu, #main-nav.psx-nav .ps-mega-menu.psx-menu.ps-mega-paystubs { width: min(1440px, calc(100vw - 140px)) !important; } } @media (min-width: 1500px) { /* r2: large-desktop type scale aligned with the approved Paystubs menu so no menu looks oversized */ #main-nav.psx-nav .psx-head-copy h3 { font-size: 38px !important; } #main-nav.psx-nav .psx-head-copy p { font-size: 16.5px !important; } #main-nav.psx-nav .ps-mega-menu:not(.ps-mega-paystubs) .psx-card-copy strong { font-size: 19px !important; } #main-nav.psx-nav .ps-mega-menu:not(.ps-mega-paystubs) .psx-card-copy small { font-size: 15px !important; } #main-nav.psx-nav .ps-mega-menu:not(.ps-mega-paystubs) .psx-card--featured .psx-card-copy strong { font-size: 21px !important; } #main-nav.psx-nav .ps-mega-menu:not(.ps-mega-paystubs) .psx-rail h3 { font-size: 32px !important; } #main-nav.psx-nav .ps-mega-menu:not(.ps-mega-paystubs) .psx-rail p { font-size: 16px !important; } #main-nav.psx-nav .psx-layout:not(.psx-layout--states) { grid-template-columns: minmax(0, 1fr) 360px !important; } #main-nav.psx-nav .psx-rail-art--folder { max-height: 170px !important; object-fit: contain; object-position: center bottom; } #main-nav.psx-nav .ps-state-grid.psx-state-grid a { font-size: 14.5px !important; min-height: 40px !important; } #main-nav.psx-nav .psx-banner--ca .psx-head-copy h3 { font-size: 42px !important; } #main-nav.psx-nav .psx-ca-tools .psx-card-copy strong { font-size: 18px !important; } #main-nav.psx-nav .psx-ca-tools .psx-card-copy small { font-size: 14.5px !important; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid a { font-size: 14.5px !important; min-height: 44px !important; } #main-nav.psx-nav .psx-res-hero h3 { font-size: 36px !important; } #main-nav.psx-nav .psx-res-hero p { font-size: 16px !important; } } @media (min-width: 1500px) { #main-nav.psx-nav .psx-banner--ca { min-height: 132px !important; } #main-nav.psx-nav .psx-ca-tools .ps-mega-card.psx-card { min-height: 104px !important; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid { gap: 7px !important; } #main-nav.psx-nav .ps-canada-province-grid.psx-province-grid a { min-height: 42px !important; } #main-nav.psx-nav .psx-ca-guide { padding: 14px 18px !important; } } /* ===== patch-002-r2: header controls proportioned to the 68px nav bar ===== */ @media (min-width: 1024px) { #main-nav.psx-nav .psx-search-btn { width: 36px !important; height: 36px !important; } #main-nav.psx-nav .psx-search-btn svg { width: 17px; height: 17px; } #main-nav.psx-nav .psx-nav-divider { height: 22px; } #main-nav.psx-nav .nav-cta.psx-nav-cta, #main-nav.psx-nav .nav-cta.psx-nav-cta:visited { min-height: 38px !important; padding: 0 5px 0 16px !important; gap: 9px; font-size: 14px !important; box-shadow: 0 5px 14px rgba(238, 139, 28, .24), inset 0 1px 0 rgba(255, 255, 255, .45); } #main-nav.psx-nav .psx-cta-dot { width: 28px !important; height: 28px !important; } #main-nav.psx-nav .psx-cta-dot svg { width: 14px; height: 14px; } } @media (min-width: 1440px) { #main-nav.psx-nav .psx-search-btn { width: 38px !important; height: 38px !important; } #main-nav.psx-nav .nav-cta.psx-nav-cta, #main-nav.psx-nav .nav-cta.psx-nav-cta:visited { min-height: 40px !important; font-size: 14.5px !important; padding-left: 18px !important; } } @media (max-width: 1023px) { #main-nav.psx-nav .psx-search-btn { width: 38px !important; height: 38px !important; } #main-nav.psx-nav .nav-cta.psx-nav-cta { min-height: 38px !important; } } @media (max-width: 560px) { #main-nav.psx-nav .nav-logo img { height: 30px !important; width: auto !important; } #main-nav.psx-nav .nav-cta.psx-nav-cta { padding: 0 11px !important; min-height: 36px !important; } #main-nav.psx-nav .nav-cta.psx-nav-cta::before { font-size: 12.5px !important; } #main-nav.psx-nav .psx-search-btn { width: 36px !important; height: 36px !important; } #main-nav.psx-nav #ps-burger { flex: 0 0 40px; width: 40px !important; min-width: 40px; } } /* ===== patch-002-r2 (19 Oct follow-up): Canada menu in the shared menu geometry; Resources cards compacted ===== */ @media (min-width: 1024px) { /* Canada: same head + card grid + dark rail as Tax Forms */ #main-nav.psx-nav .ps-mega-canada .psx-layout--ca { align-items: stretch; } #main-nav.psx-nav .ps-mega-canada .psx-ca-panel.ps-canada-layout { display: flex !important; flex-direction: column; gap: 18px; padding: 0 !important; border: 0 !important; border-radius: 0; background: transparent !important; overflow: visible; } #main-nav.psx-nav .ps-mega-canada .psx-ca-tools { padding: 0 !important; border: 0 !important; } #main-nav.psx-nav .ps-mega-canada .psx-ca-tools .ps-canada-grid.psx-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } #main-nav.psx-nav .ps-mega-canada .psx-ca-tools .ps-mega-card.psx-card { min-height: 118px !important; grid-template-columns: 64px minmax(0, 1fr) 40px !important; gap: 18px !important; padding: 18px 22px !important; } #main-nav.psx-nav .ps-mega-canada .psx-ca-tools .psx-card-icon { width: 64px !important; height: 64px !important; } #main-nav.psx-nav .ps-mega-canada .psx-ca-provinces { padding: 0 !important; background: transparent !important; } #main-nav.psx-nav .ps-mega-canada .psx-ca-provinces > .psx-label { margin: 0 0 10px; } #main-nav.psx-nav .ps-mega-canada .ps-canada-province-grid.psx-province-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; } #main-nav.psx-nav .ps-mega-canada .ps-canada-province-grid.psx-province-grid a { min-height: 44px !important; padding: 5px 10px !important; font-size: 14px !important; line-height: 1.2; grid-template-columns: 32px minmax(0, 1fr) 14px !important; gap: 9px !important; } #main-nav.psx-nav .ps-mega-canada .psx-province-grid img { width: 32px !important; height: 19px !important; } #main-nav.psx-nav .psx-rail--ca .psx-rail-art--ca { width: 100%; max-width: 250px; margin: auto auto -14px; padding-top: 14px; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .3)); } #main-nav.psx-nav .psx-rail--ca .psx-rail-points li { align-items: flex-start; } /* Resources: cards sized to their content; a short topic row replaces the empty space */ #main-nav.psx-nav .ps-resource-grid.psx-res-grid { align-content: start !important; grid-auto-rows: 1fr; } #main-nav.psx-nav .ps-resource-grid .ps-mega-card.psx-rcard { min-height: 0 !important; } #main-nav.psx-nav .psx-rcard-top { padding: 18px 18px 10px 20px !important; } #main-nav.psx-nav .psx-rcard-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding: 10px 20px 16px 98px; border-top: 0; } #main-nav.psx-nav .psx-rcard-meta span { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; background: #F0F6F2; color: var(--psx-forest-800, #0F4D3A); font: 600 12px/1.2 'DM Sans', sans-serif; letter-spacing: .01em; } #main-nav.psx-nav .psx-rcard:is(:hover, :focus-visible) .psx-rcard-meta span { background: rgba(255, 255, 255, .14); color: #fff; } #main-nav.psx-nav .ps-resource-k.psx-res-art img { width: 100% !important; max-width: 340px; margin: 0 auto; border-radius: 14px; } #main-nav.psx-nav .ps-resource-support.psx-support { grid-template-columns: minmax(0, 1fr) 128px !important; } #main-nav.psx-nav .psx-support > img { width: 128px !important; height: 166px !important; object-fit: contain; object-position: right bottom; } } @media (min-width: 1024px) and (max-width: 1400px) { #main-nav.psx-nav .ps-mega-canada .psx-ca-tools .ps-mega-card.psx-card { min-height: 100px !important; grid-template-columns: 50px minmax(0, 1fr) 34px !important; gap: 14px !important; padding: 14px 16px !important; } #main-nav.psx-nav .ps-mega-canada .psx-ca-tools .psx-card-icon { width: 50px !important; height: 50px !important; } #main-nav.psx-nav .ps-mega-canada .ps-canada-province-grid.psx-province-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; } #main-nav.psx-nav .ps-mega-canada .ps-canada-province-grid.psx-province-grid a { min-height: 38px !important; font-size: 13px !important; } #main-nav.psx-nav .ps-mega-canada .psx-ca-panel.ps-canada-layout { gap: 12px; } #main-nav.psx-nav .psx-rail--ca .psx-rail-art--ca { max-width: 220px; } #main-nav.psx-nav .psx-rcard-top { padding: 14px 12px 8px 14px !important; } #main-nav.psx-nav .psx-rcard-meta { padding: 6px 12px 12px 72px; gap: 5px; } #main-nav.psx-nav .psx-rcard-meta span { font-size: 11px; min-height: 20px; padding: 1px 8px; } #main-nav.psx-nav .ps-resource-support.psx-support { grid-template-columns: minmax(0, 1fr) 92px !important; } #main-nav.psx-nav .psx-support > img { width: 92px !important; height: 124px !important; } } @media (min-width: 1024px) and (max-height: 820px) { #main-nav.psx-nav .ps-mega-canada .psx-rail--ca .psx-rail-art--ca { display: none; } } @media (min-width: 1024px) and (max-width: 1180px) { #main-nav.psx-nav .psx-rail--ca .psx-cta { max-width: 100%; box-sizing: border-box; padding-left: 14px !important; padding-right: 14px !important; font-size: 13.5px !important; gap: 8px; justify-content: center; } #main-nav.psx-nav .psx-rail--ca .psx-rail-art--ca { max-width: 170px; padding-top: 6px; } #main-nav.psx-nav .ps-mega-canada .ps-canada-province-grid.psx-province-grid a { font-size: 12.5px !important; padding: 4px 8px !important; gap: 7px !important; grid-template-columns: 28px minmax(0, 1fr) 12px !important; } #main-nav.psx-nav .ps-mega-canada .psx-province-grid img { width: 28px !important; height: 17px !important; } } @media (min-width: 1024px) and (max-width: 1180px) { #main-nav.psx-nav .psx-rail .psx-cta { width: auto !important; max-width: 100%; white-space: normal !important; text-align: center; line-height: 1.2; padding-left: 12px !important; padding-right: 12px !important; gap: 6px !important; } } /* ===== patch-002-r2 (19 Oct): site-wide phone audit — readable minimum text and comfortable tap targets ===== */ @media (max-width: 760px) { .ucc-source-link small, .ucc-review-date small, [class*="ucc-"] :is(small, code, summary), .ucc-coverage-status, .ucc-confidence-badge, .ucc-coverage-kicker { font-size: 11px !important; } .reviews-filter-panel .reviews-field label { font-size: 11.5px !important; } .review-card .review-verified, .review-card .review-verified span { font-size: 11px !important; } .reviews-product-card small { font-size: 11.5px !important; } .wsr-detail-label { font-size: 11px !important; } .blog-card2-tag { font-size: 11px !important; } a.review-product { display: inline-flex !important; align-items: center; min-height: 32px; } button.reviews-clear { min-height: 36px; padding-left: 8px; padding-right: 8px; } a.wsr-anchor, a.wsr-source { display: inline-flex !important; align-items: center; min-height: 32px; } } /* ===== patch-002-r4: Resources menu card text sized to its cards (proportional to the other menus) ===== The menus shrink to fit short screens (see --psx-fit). Resources was the tallest menu, so it shrank the most and its text read much smaller than the other menus. Compact card spacing keeps it close to the others' height, so its text renders at the same effective size. */ @media (min-width: 1024px) { #main-nav.psx-nav .ps-mega-resources .psx-res-grid { gap:12px !important; grid-auto-rows:auto !important; align-content:stretch !important; } #main-nav.psx-nav .ps-mega-resources .psx-rcard-top { grid-template-columns:48px minmax(0,1fr) 32px !important; gap:14px !important; padding:16px 16px 4px 18px !important; } #main-nav.psx-nav .ps-mega-resources .psx-rcard .psx-card-icon { width:48px !important; height:48px !important; } #main-nav.psx-nav .ps-mega-resources .psx-rcard .psx-card-icon svg { width:24px !important; height:24px !important; } #main-nav.psx-nav .ps-mega-resources .psx-rcard .psx-card-copy { gap:5px !important; padding-top:0 !important; } #main-nav.psx-nav .ps-mega-resources .psx-res-grid .psx-rcard .psx-card-copy strong { font-size:16.5px !important; line-height:1.22; } #main-nav.psx-nav .ps-mega-resources .psx-res-grid .psx-rcard .psx-card-copy small { font-size:13.5px !important; line-height:1.45; } #main-nav.psx-nav .ps-mega-resources .psx-rcard-meta { padding:6px 16px 14px 80px !important; } #main-nav.psx-nav .ps-mega-resources .psx-rcard-meta span { font-size:12px !important; min-height:24px; } #main-nav.psx-nav .ps-mega-resources .psx-res-hero h3 { font-size:clamp(25px, 1.95vw, 32px) !important; margin-bottom:10px !important; } #main-nav.psx-nav .ps-mega-resources .psx-res-hero p { margin-bottom:14px !important; } /* patch-003-r6: the laptop / lamp / plant art fills the space under the button. The drawing occupies the middle of its canvas (transparent margins: 26% above, 10% below), so the image is sized against its own box (container units) and its visible drawing is centred in the space; it never makes the menu taller. */ #main-nav.psx-nav .ps-mega-resources .psx-res-hero .ps-resource-k { position:relative !important; flex:1 1 0 !important; min-height:150px !important; max-height:none !important; margin:6px -18px 0 !important; padding:0 !important; container-type:size; } #main-nav.psx-nav .ps-mega-resources .psx-res-hero .ps-resource-k img { position:absolute !important; left:50% !important; top:50% !important; bottom:auto !important; width:min(104cqw, 215cqh) !important; height:auto !important; max-width:none !important; max-height:none !important; margin:0 !important; transform:translate(-50%, -57.7%); border-radius:0 !important; } #main-nav.psx-nav .ps-mega-resources .ps-resource-support.psx-support { min-height:0 !important; } #main-nav.psx-nav .ps-mega-resources .ps-resource-next { gap:8px; } #main-nav.psx-nav .ps-mega-resources .psx-res-rail .ps-mega-mini.psx-mini { min-height:50px; } } @media (min-width: 1281px) { #main-nav.psx-nav .ps-mega-resources .psx-res-grid .psx-rcard .psx-card-copy strong { font-size:18px !important; } #main-nav.psx-nav .ps-mega-resources .psx-res-grid .psx-rcard .psx-card-copy small { font-size:14.5px !important; } #main-nav.psx-nav .ps-mega-resources .psx-rcard-meta span { font-size:12.5px !important; } } @media (min-width: 1500px) { #main-nav.psx-nav .ps-mega-resources .psx-rcard-top { grid-template-columns:52px minmax(0,1fr) 34px !important; padding:18px 18px 4px 20px !important; } #main-nav.psx-nav .ps-mega-resources .psx-rcard .psx-card-icon { width:52px !important; height:52px !important; } #main-nav.psx-nav .ps-mega-resources .psx-res-grid .psx-rcard .psx-card-copy strong { font-size:19px !important; } #main-nav.psx-nav .ps-mega-resources .psx-res-grid .psx-rcard .psx-card-copy small { font-size:15px !important; } #main-nav.psx-nav .ps-mega-resources .psx-rcard-meta { padding:6px 18px 16px 86px !important; } #main-nav.psx-nav .ps-mega-resources .psx-rcard-meta span { font-size:12.5px !important; min-height:26px; } #main-nav.psx-nav .ps-mega-resources .psx-res-rail .ps-mega-mini.psx-mini { font-size:15px !important; } } @media (min-width: 1024px) { #main-nav.psx-nav .ps-mega-resources .psx-support .ps-resource-contact { position:relative; z-index:2; white-space:nowrap; } } /* ===== patch-003-r7: phone header — search moves into the menu; the menu button always stays on screen ===== Phones (and phones with larger text/display zoom, which narrow the page) do not have room for logo, search, "Free Paystub" and the menu button. Search stays available as the first item inside the menu. */ @media (max-width: 560px) { #main-nav.psx-nav .psx-search-btn { display: none !important; } #main-nav.psx-nav .nav-logo { flex: 0 0 auto; } #main-nav.psx-nav .psx-nav-actions { flex: 0 1 auto; min-width: 0; margin-right: 10px; } #main-nav.psx-nav .nav-cta.psx-nav-cta { min-width: 0 !important; max-width: 100%; overflow: hidden; } #main-nav.psx-nav .nav-cta.psx-nav-cta::before { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #main-nav.psx-nav #ps-burger { flex: 0 0 40px; } } /* Very narrow pages (small phones, or large text/zoom): tighten spacing so nothing is cut off. */ @media (max-width: 340px) { #main-nav.psx-nav { padding: 0 12px; } #main-nav.psx-nav .nav-logo img { height: 26px !important; } #main-nav.psx-nav .psx-nav-actions { margin-right: 8px; } #main-nav.psx-nav .nav-cta.psx-nav-cta { padding: 0 9px !important; } #main-nav.psx-nav .nav-cta.psx-nav-cta::before { font-size: 12px !important; } } /* ===== patch-003-r8: footer contact shows the support email only (physical address removed site-wide) ===== */ footer.psx-footer .footer-business-contact::before { content: none !important; display: none !important; } footer.psx-footer .footer-business-contact a { margin-bottom: 0 !important; } /* ===== patch-003-r8: Smart Match buttons wrap instead of running off the card on phones ===== */ .psc-smart-example, .psc-smart-search button.psc-smart-example, .psc-smart-secondary-cta { max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: break-word; text-align: center; line-height: 1.3; } .psc-smart-example, .psc-smart-search button.psc-smart-example { height: auto !important; min-height: 40px; } @media (max-width: 640px) { .psc-smart-secondary-cta[data-psc-skip] { display: flex; width: 100%; } }