/* ProxiMatch page scoped styles — loaded last in to override all global rules */ @font-face { font-family: 'Futura LtCn BT'; src: url('../assets/fonts/FuturaBT-LightCondensed.woff2') format('woff2'), url('../assets/fonts/FuturaBT-LightCondensed.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } .proximatch-page, .proximatch-page *, .proximatch-page *::before, .proximatch-page *::after, .proximatch-page h1, .proximatch-page h2, .proximatch-page h3, .proximatch-page h4, .proximatch-page h5, .proximatch-page h6, .proximatch-page p, .proximatch-page a, .proximatch-page button, .proximatch-page span, .proximatch-page div, .proximatch-page section, .proximatch-page article { font-family: 'Inter', sans-serif !important; /* client spec: Inter sitewide (was Futura) */ } .proximatch-page img{display:block} .proximatch-page .pm-shell{max-width:1200px !important} .proximatch-page .bg-hero{background-color:#f3f3f3 !important} .proximatch-page .bg-purple-light{background-color:#f7eef8 !important} .proximatch-page .border-purple{border-color:#e2d3eb !important} .proximatch-page .btn-red{background-color:#b30000 !important;color:#fff !important;text-decoration:none !important;display:inline-flex !important;align-items:center !important;justify-content:center !important} .proximatch-page .btn-red:hover{background-color:#900000 !important;color:#fff !important} .proximatch-page .btn-red:visited{color:#fff !important} .proximatch-page .btn-dark{background-color:#333333 !important;color:#fff !important;text-decoration:none !important;display:inline-flex !important;align-items:center !important;justify-content:center !important} .proximatch-page .btn-dark:hover{background-color:#000 !important;color:#fff !important} .proximatch-page .btn-dark:visited{color:#fff !important} .proximatch-page .btn-crimson{background-color:#c6001b !important;color:#fff !important;text-decoration:none !important;display:inline-flex !important;align-items:center !important;justify-content:center !important} .proximatch-page .btn-crimson:hover{background-color:#a00016 !important;color:#fff !important} .proximatch-page .btn-crimson:visited{color:#fff !important} .proximatch-page .btn-outline{text-decoration:none !important;color:#222222 !important;background-color:#fff !important} .proximatch-page .btn-outline:hover{background-color:#f7f7f7 !important;color:#222222 !important} .proximatch-page .btn-outline:visited{color:#222222 !important} .proximatch-page .text-gray-mid{color:#555555 !important} .proximatch-page .text-dark-heavy{color:#242424 !important} .proximatch-page .text-dark-card{color:#222222 !important} .proximatch-page .text-gray-sub{color:#666666 !important} .proximatch-page .text-red-brand{color:#b30000 !important} .proximatch-page .text-crimson{color:#c6001b !important} .proximatch-page .text-match-green{color:#1a4c22 !important} .proximatch-page .text-match-yellow{color:#6b6400 !important} .proximatch-page .text-match-red{color:#7a0010 !important} .proximatch-page .border-card{border-color:#e3e3e3 !important} .proximatch-page .border-btn{border-color:#d2d2d2 !important} .proximatch-page .border-avatar{border-color:#dddddd !important} .proximatch-page .border-action{border-color:#e0e0e0 !important} .proximatch-page .text-11{font-size:11px !important} .proximatch-page .text-22{font-size:22px !important;line-height:1.4 !important} .proximatch-page .text-32{font-size:32px !important;line-height:1.2 !important} .proximatch-page .w-65{width:65px !important} .proximatch-page .pm-card-button{display:flex !important;align-items:center !important;justify-content:center !important;min-width:76px !important;line-height:1.1 !important} .proximatch-page .pm-arrow{ margin-left: 338px; position:absolute !important;z-index:50 !important;visibility:visible !important;display:block !important;opacity:1 !important} .proximatch-page .pt-4{padding-top:1rem !important;padding-bottom:1rem !important} .button-area{ text-align: right; } /* ===== ProxiMatch hero (PSD #1): full-bleed graduate photo on the right, content aligned to the site header's `container mx-auto`. ===== */ .proximatch-page .pm-hero{ display:flex; align-items:center; min-height:440px; } /* Full-bleed image: pinned to the right edge, top-to-bottom, ~half the viewport wide. */ .proximatch-page .pm-hero-media{ position:absolute; top:0; right:0; bottom:0; width:48%; background-repeat:no-repeat; background-size:cover; background-position:center top; /* keep the cap/head in frame */ z-index:1; } .proximatch-page .pm-hero-content{ max-width:600px; padding-top:56px; padding-bottom:56px; } .proximatch-page .pm-hero-title{ font-size:44px; line-height:1.1; overflow-wrap:break-word; /* never overflow the container */ word-wrap:break-word; } @media (min-width:1280px){ .proximatch-page .pm-hero-title{ font-size:52px; } .proximatch-page .pm-hero{ min-height:480px; } } /* Mobile: image becomes a banner on top, content below (no overlap). */ @media (max-width:767px){ .proximatch-page .pm-hero{ flex-direction:column; min-height:0; } .proximatch-page .pm-hero-media{ position:relative; width:100%; height:220px; order:-1; } /* Content must never exceed the phone width (was 600px -> overflowed). */ .proximatch-page .pm-hero-content{ max-width:100%; width:100%; padding-top:28px; padding-bottom:28px; } .proximatch-page .pm-hero-title{ font-size:26px; } /* buttons wrap + shrink so both fit small screens */ .proximatch-page .pm-hero-content .flex{ gap:12px !important; } .proximatch-page .pm-hero-content a{ padding-left:1.5rem !important; padding-right:1.5rem !important; } } /* ===== "How It Works" — PSD: 3 equal gray cards, dotted arrows between ===== */ .proximatch-page .pm-hiw-card{ flex:1 1 0; min-width:0; } .proximatch-page .pm-hiw-icon{ display:inline-block; width:52px; height:52px; background-color:#b1040e; /* PSD brand red — the source PNG icons are dark, so tint via mask */ -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .proximatch-page .pm-hiw-arrow{ width:72px; padding:0 6px; } .proximatch-page .pm-hiw-arrow img{ width:72px; height:24px; opacity:.9; } @media (max-width:767px){ /* stacked on mobile: rotate the arrow to point down between cards */ .proximatch-page .pm-hiw-arrow{ width:auto; padding:4px 0; } .proximatch-page .pm-hiw-arrow img{ transform:rotate(90deg); } }