/* ============================================================================ SAN ANDREAS FIRE & EMS - department micro-site skin Ported from the approved safems-home.html / safems-careers.html mockups (palette sampled from highridgefire.com). EVERY rule is namespaced under .safems. That is not cosmetic: the mockups use .hero, .btn, .logo, .wrap, .sub, .card, .legal, .footgrid and .skip, and all of those already exist in style.css. Unscoped, this file would repaint the whole site. .safems sits on , so `.safems .btn` (0,2,0) beats the base `.btn` (0,1,0) inside SAFEMS pages and nowhere else. style.css is still loaded on these pages: the roster, duty and manage tabs reuse its tables, badges, chips and forms. ============================================================================ */ /* TWO reds only, on purpose. The mockups drifted to about seven different red-browns (#8d1a1b, #701314, #cc2027, #a91a20, plus #5a2422, #7a2b25 and #4a2b28 hiding inside gradients). Everything now resolves to: --maroon structural: header accents, banners, buttons, footer rules --red highlight: hero CTA, the crest, live indicators Hover states are brightness filters on those two rather than new hex values, and the old brown-red gradients are gone (neutral greys or flat maroon). */ .safems { --maroon: #8d1a1b; --red: #cc2027; --ink: #2f3437; /* headings, footer */ --body-ink: #4d5256; /* body copy */ --grey: #6f6f6f; /* logo word 3 */ --black: #1a1a1a; /* logo word 4 */ --card-bg: #f2f2f2; --line-2: #e3e3e3; --birdy: #1da1f2; /* Birdy feed accent (Twitter blue) */ --sa-font: 'Jost', -apple-system, 'Segoe UI', sans-serif; /* Neutral, so the only reds on the page are the two above. */ --sa-hero: linear-gradient(100deg, #2b2e30 0%, #3d4245 45%, #232628 100%); } body.safems { background: #fff; color: var(--body-ink); font-family: var(--sa-font); font-size: 17px; line-height: 1.62; font-weight: 400; } .safems h1, .safems h2, .safems h3, .safems h4 { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.2; } .safems a { color: var(--maroon); text-decoration: none; } .safems a:hover { text-decoration: underline; } .safems img { max-width: 100%; display: block; } /* Full bleed, matching the rest of the site. The mockup's fixed columns (1180 / 1560 / 1020 / 820 / 660px) left large dead margins on a wide screen. */ .safems .wrap { max-width: none; margin: 0; padding: 0 clamp(16px, 1.6vw, 44px); width: 100%; } .safems :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } .safems .skip { position: absolute; left: -9999px; background: var(--maroon); color: #fff; padding: 10px 18px; font-weight: 600; z-index: 999; } .safems .skip:focus { left: 0; top: 0; } /* ---------- Header ---------- */ /* The wordmark is half maroon, half WHITE, so the header can no longer be a white bar. On the home page it is transparent and overlays the hero photo; everywhere else it gets a dark band so the wordmark renders identically. The text-shadow lifts the maroon half off the photo. */ /* Solid black bar holding the wordmark and nav. It no longer overlays the hero, so the white half of the wordmark reads on every page identically. */ .safems .site-head { background: #1c1f21; position: relative; z-index: 70; } .safems .site-head .wrap { display: flex; align-items: center; gap: 34px; min-height: 92px; flex-wrap: wrap; } .safems .logo { flex: none; line-height: .96; letter-spacing: -.005em; display: block; } .safems .logo:hover { text-decoration: none; } .safems .logo .r1 { font-size: 2rem; display: block; } .safems .logo .r1 .w1 { color: var(--maroon); font-weight: 700; } .safems .logo .r1 .w2 { color: var(--maroon); font-weight: 400; } .safems .logo .r2 { font-size: 1.72rem; display: block; margin-top: 2px; letter-spacing: .03em; } .safems .logo .r2 .w3 { color: #fff; font-weight: 400; } .safems .logo .r2 .w4 { color: #fff; font-weight: 700; } .safems .nav { display: flex; list-style: none; margin: 0 auto; padding: 0; gap: 30px; align-items: center; } .safems .nav > li { position: relative; } .safems .nav > li > a { color: rgba(255,255,255,.86); font-weight: 500; font-size: 1.06rem; padding: 14px 0; display: block; } .safems .nav > li > a:hover, .safems .nav > li:focus-within > a { color: #fff; text-decoration: none; } .safems .nav .caret { font-size: .6rem; margin-left: 5px; vertical-align: middle; color: #fff; opacity: .75; } .safems .sub { position: absolute; top: 100%; left: -14px; min-width: 262px; background: #fff; border-top: 3px solid var(--maroon); box-shadow: 0 12px 28px rgba(0,0,0,.16); list-style: none; margin: 0; padding: 6px 0; opacity: 0; visibility: hidden; transform: translateY(-5px); transition: .15s; z-index: 80; } .safems .nav > li:hover .sub, .safems .nav > li:focus-within .sub { opacity: 1; visibility: visible; transform: none; } .safems .sub a { display: block; padding: 10px 20px; color: var(--body-ink); font-size: .98rem; font-weight: 500; } .safems .sub a:hover { background: #f7f7f7; color: var(--maroon); text-decoration: none; } .safems .socials { display: flex; gap: 16px; flex: none; align-items: center; } .safems .socials a { color: #fff; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; line-height: 0; } .safems .socials a:hover { filter: brightness(1.25); } .safems .socials svg { width: 20px; height: 20px; fill: currentColor; display: block; } .safems .socials img { width: 20px; height: 20px; object-fit: contain; display: block; } .safems .navtoggle { display: none; background: none; border: 0; color: #fff; font: inherit; font-weight: 600; font-size: 1.05rem; cursor: pointer; padding: 10px 0; margin-left: auto; } /* Account controls: the mockups have no auth UI. */ .safems .sa-acct { display: flex; align-items: center; gap: 10px; flex: none; font-size: .92rem; } .safems .sa-acct a { color: rgba(255,255,255,.86); font-weight: 600; } .safems .sa-acct a:hover { color: #fff; } .safems .sa-acct .btn-link { background: none; border: 0; padding: 0; cursor: pointer; color: rgba(255,255,255,.86); font-family: var(--sa-font); font-size: .92rem; font-weight: 600; } .safems .sa-acct .btn-link:hover { color: #fff; text-decoration: underline; } /* ---------- Buttons ---------- */ /* Maroon is the default (careers mockup); the hero CTA is red (home mockup). */ .safems .btn { display: inline-flex; align-items: center; gap: 10px; background: var(--maroon); color: #fff; font-weight: 600; font-size: 1rem; padding: 14px 24px; margin-top: 22px; transition: .15s; border: 0; border-radius: 0; min-height: 0; line-height: 1.3; font-family: var(--sa-font); } .safems .btn:hover { filter: brightness(.88); color: #fff; text-decoration: none; } .safems .btn u { text-decoration: underline; text-underline-offset: 3px; } .safems .btn .chev { font-size: .9rem; letter-spacing: -.14em; } .safems .hero .btn { background: var(--red); font-size: 1.02rem; padding: 15px 26px; margin-top: 30px; } .safems .hero .btn:hover { filter: brightness(.9); } .safems .btn.ghost { background: transparent; border: 2px solid #fff; color: #fff; } .safems .btn.ghost:hover { background: #fff; color: var(--maroon); } /* ---------- Hero ---------- */ .safems .hero { position: relative; background: var(--sa-hero); min-height: 640px; display: flex; align-items: center; overflow: hidden; } .safems .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--hero-pic); background-size: cover; background-position: center; animation: sa-drop .85s cubic-bezier(.22,.7,.3,1) both; } .safems .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(18,14,13,.42); } @keyframes sa-drop { from { transform: translateY(-46px) scale(1.04); opacity: 0; } to { transform: none; opacity: 1; } } .safems .hero .wrap { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .safems .hero-copy { max-width: 560px; } .safems .hero h1 { color: #fff; font-size: 3rem; font-weight: 700; letter-spacing: -.01em; } .safems .hero p { color: #f0eceb; font-size: 1.2rem; margin: 18px 0 0; max-width: 480px; } /* No red plate behind the logo: the artwork sits directly on the hero photo. */ .safems .crest { width: 340px; height: 340px; flex: none; background: none; border: 0; display: grid; place-items: center; text-align: center; color: #fff; font-weight: 700; line-height: 1.16; box-shadow: none; } .safems .crest .big { font-size: 2.3rem; display: block; } .safems .crest .small { font-size: 1rem; letter-spacing: .16em; display: block; margin-top: 8px; } .safems .crest .est { font-size: .86rem; letter-spacing: .2em; display: block; margin-top: 14px; opacity: .9; } .safems .crest img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); } /* ---------- Program cards ---------- */ .safems .programs { padding: 88px 0 74px; } .safems .progrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 34px; } .safems .prog { display: flex; gap: 28px; align-items: flex-start; border: 1px solid var(--line-2); padding: 34px 32px; background: #fff; transition: .15s; } .safems .prog:hover { border-color: #d3d3d3; box-shadow: 0 4px 16px rgba(0,0,0,.06); text-decoration: none; } .safems .progico { width: 96px; height: 96px; flex: none; border-radius: 50%; background: var(--card-bg); display: grid; place-items: center; color: var(--maroon); } .safems .progico svg { width: 44px; height: 44px; fill: currentColor; } .safems .prog h3 { font-size: 1.26rem; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); } .safems .prog p { margin: 9px 0 0; font-size: 1rem; color: var(--body-ink); } /* ---------- Events band ---------- */ .safems .eventband { background: var(--maroon); color: #fff; text-align: center; padding: 52px 0; background-image: radial-gradient(rgba(255,255,255,.055) 1.5px, transparent 1.5px); background-size: 26px 26px; } .safems .eventband h2 { color: #fff; font-size: 2.05rem; } .safems .eventband p { margin: 10px auto 0; max-width: 560px; color: #f2dede; } /* ---------- Dispatch feed ---------- */ .safems .dispatch { padding: 82px 0; } .safems .dispatch h2 { font-size: 2.3rem; text-align: center; } .safems .dispatch .lede { margin-bottom: 34px; } /* ---------- Page banner (interior pages) ---------- */ .safems .pagebanner { background: var(--maroon); padding: 52px 0; text-align: center; background-image: radial-gradient(rgba(255,255,255,.06) 1.6px, transparent 1.6px); background-size: 28px 28px; } .safems .pagebanner h1 { color: #fff; font-size: 3.05rem; letter-spacing: -.01em; } /* ---------- Careers ---------- */ .safems .leadphoto { margin: 56px 0 0; } .safems .leadphoto .frame { aspect-ratio: 16/9; background: var(--maroon); display: grid; place-items: center; color: #e8dcd9; font-weight: 500; letter-spacing: .14em; font-size: .9rem; } .safems .listings { padding: 52px 0 92px; } .safems .listwrap { margin: 0; } .safems .job { background: var(--card-bg); border-left: 5px solid var(--maroon); padding: 34px 38px; margin-bottom: 28px; } .safems .job .eyebrow { color: var(--maroon); font-weight: 600; font-size: .9rem; letter-spacing: .07em; text-transform: uppercase; } .safems .job h2 { font-size: 1.95rem; margin: 10px 0 16px; } .safems .job p { margin: 0; font-size: 1.04rem; } .safems .job.closed { border-left-color: #9aa0a3; opacity: .9; } .safems .job.closed .eyebrow { color: #6f7477; } .safems .job.closed .btn { background: #6f7477; pointer-events: none; } .safems .notice { margin: 0 0 34px; border: 1px solid var(--line-2); padding: 28px 32px; } .safems .notice h3 { font-size: 1.2rem; margin-bottom: 8px; } .safems .notice p { margin: 0; } /* Standard hub tabs (roster / duty / manage) rendered inside SAFEMS chrome. */ .safems .tabwrap { margin: 0; padding: 48px clamp(16px, 1.6vw, 44px) 88px; } /* ---------- Footer ---------- */ .safems footer { background: var(--ink); color: #c9cccd; padding: 60px 0 0; font-size: .97rem; } .safems .footgrid { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 52px; padding-bottom: 48px; } .safems footer h3 { color: #fff; font-size: 1.28rem; margin-bottom: 14px; } .safems footer h4 { color: #fff; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; } .safems footer ul { list-style: none; margin: 0; padding: 0; } .safems footer li { margin-bottom: 9px; } .safems footer a { color: #c9cccd; } .safems footer a:hover { color: #fff; } .safems footer .logo .r1 { font-size: 1.55rem; } .safems footer .logo .r2 { font-size: 1.3rem; } .safems footer .logo .r2 .w3 { color: #fff; } .safems footer .logo .r2 .w4 { color: #fff; } .safems .emerg { margin-top: 22px; } .safems .emerg .dial { color: #fff; font-weight: 700; font-size: 1.06rem; letter-spacing: .02em; } .safems .mapbox { margin-top: 12px; height: 150px; background: #3c4245; border: 1px solid #4c5255; display: grid; place-items: center; color: #9aa0a3; font-size: .88rem; text-align: center; padding: 12px; } .safems .footsocials { display: flex; gap: 16px; margin-top: 16px; } .safems .footsocials a { color: #c9cccd; } .safems .footsocials svg { width: 18px; height: 18px; fill: currentColor; } .safems .legal { border-top: 1px solid #454b4e; padding: 18px 0; font-size: .88rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .safems .crest { width: 250px; height: 250px; padding: 26px; } .safems .crest .big { font-size: 1.7rem; } .safems .hero h1 { font-size: 2.4rem; } .safems .nav { gap: 20px; } .safems .nav > li > a { font-size: .98rem; } } @media (max-width: 960px) { .safems .navtoggle { display: block; } .safems .nav { display: none; order: 4; width: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding-bottom: 14px; border-top: 1px solid var(--line-2); } .safems .nav.open { display: flex; } .safems .nav > li > a { padding: 13px 2px; border-bottom: 1px solid var(--line-2); } .safems .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: 0; border-left: 3px solid var(--maroon); padding: 0 0 6px; } .safems .socials { order: 3; } .safems .site-head .wrap { padding-top: 14px; padding-bottom: 8px; } .safems .hero { min-height: 0; padding: 56px 0; } .safems .hero .wrap { justify-content: center; text-align: center; } .safems .hero-copy { max-width: 100%; } .safems .hero p { margin-left: auto; margin-right: auto; } .safems .progrid { grid-template-columns: 1fr; } .safems .footgrid { grid-template-columns: 1fr 1fr; } .safems .pagebanner h1 { font-size: 2.2rem; } } @media (max-width: 620px) { .safems .prog { flex-direction: column; align-items: center; text-align: center; } .safems .footgrid { grid-template-columns: 1fr; } .safems .hero h1 { font-size: 2rem; } .safems .job { padding: 24px 20px; } .safems .job h2 { font-size: 1.5rem; } } /* ---------- Twotter: live dispatch feed ---------- */ /* Real calls, mirrored from the SAFR dispatch console by mvrp-dispatch (migration 028). Styled as a social timeline. No engagement counts are rendered: inventing likes and retweets would be fabricating data. */ /* A tweet reads wrong stretched across a wide screen, so the feed keeps a timeline-width column. At this width the tile grid resolves to one column. */ .safems .twotter { max-width: 760px; margin: 0 auto; border: 1px solid #eff3f4; background: #fff; } /* Posts tile across the full width. A single 660px column left most of a wide screen empty, and stretching one post edge to edge would give an unreadable line length, so the timeline becomes a responsive card wall instead. */ .safems .tw-feed { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); } .safems .tw-feed .tw-post { border-right: 1px solid #eff3f4; } .safems .tw-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #eff3f4; } .safems .tw-mark { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--birdy); display: grid; place-items: center; color: #fff; } .safems .tw-mark svg { width: 20px; height: 20px; fill: currentColor; } .safems .tw-brand { font-weight: 700; font-size: 1.24rem; color: var(--birdy); line-height: 1.1; } .safems .tw-brand span { color: var(--birdy); } .safems .tw-sub { font-size: .86rem; color: #536471; } .safems .tw-post { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eff3f4; } .safems .tw-post:hover { background: #f7f9f9; } .safems .tw-av { width: 48px; height: 48px; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; } .safems .tw-av img { width: 100%; height: 100%; object-fit: contain; padding: 2px; } .safems .tw-body { flex: 1; min-width: 0; } .safems .tw-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 15px; } .safems .tw-name { font-weight: 700; color: #0f1419; } .safems .tw-check { width: 16px; height: 16px; fill: var(--birdy); flex: none; } .safems .tw-handle, .safems .tw-time { color: #536471; font-weight: 400; } .safems .tw-text { margin: 2px 0 0; font-size: 15px; color: #0f1419; line-height: 1.4; } .safems .tw-text strong { color: #0f1419; font-weight: 400; } .safems .tw-hash { display: inline; font-size: 15px; color: var(--birdy); } .safems .tw-acts { display: flex; justify-content: space-between; max-width: 425px; margin-top: 12px; color: #536471; } .safems .tw-acts svg { width: 18px; height: 18px; fill: currentColor; } .safems .tw-empty { padding: 42px 20px; text-align: center; color: #536471; } @media (max-width: 620px) { .safems .tw-acts { gap: 30px; }} /* Below the tiling breakpoint the Twotter grid collapses to one column and the right-hand divider would hang off the last card. */ @media (max-width: 900px) { .safems .tw-feed { grid-template-columns: 1fr; } .safems .tw-feed .tw-post { border-right: 0; } } /* ---------- Contact page (map + form) ---------- */ /* Ported from fd-form-exmple.html, namespaced like the rest of this file. .field / .submit / .radios all exist in style.css, so the .safems prefix is what keeps this form from restyling every form on the site. */ .safems { --field-line: #c9cccd; --placeholder: #a9adaf; } .safems .mapsection { padding: 54px 0 0; } .safems .mapframe { position: relative; height: 430px; background-image: var(--station-map, linear-gradient(135deg,#efece6 0%,#e6e2da 50%,#eceae4 100%)); background-size: cover; background-position: center; border: 1px solid var(--line-2); max-width: 1020px; margin: 0 auto; overflow: hidden; } .safems .pin { position: absolute; top: 44%; left: 50%; transform: translate(-50%,-100%); text-align: center; } .safems .pin .marker { width: 30px; height: 30px; margin: 0 auto; background: var(--maroon); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 5px rgba(0,0,0,.3); position: relative; } .safems .pin .marker::after { content: ""; position: absolute; top: 9px; left: 9px; width: 12px; height: 12px; background: #fff; border-radius: 50%; } .safems .pin .plabel { margin-top: 10px; font-size: .78rem; line-height: 1.35; font-weight: 600; max-width: 140px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); } .safems .contactsection { padding: 70px 0 86px; } .safems .contactgrid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; align-items: start; max-width: 1180px; margin: 0 auto; } .safems .cinfo h2 { color: var(--maroon); font-size: 2.3rem; margin-bottom: 26px; } .safems .cinfo p { margin: 0 0 14px; font-size: 1.12rem; } .safems .cinfo hr { border: 0; border-top: 1px solid var(--line-2); margin: 30px 0; } .safems .cinfo .addr-label { margin-bottom: 2px; font-weight: 600; color: var(--ink); } .safems .cinfo .addr { font-size: 1.04rem; line-height: 1.9; } .safems .cinfo .isocials { display: flex; gap: 22px; margin-top: 4px; } .safems .cinfo .isocials a { color: var(--maroon); } .safems .cinfo .isocials svg { width: 22px; height: 22px; fill: currentColor; } .safems .formcol h2 { font-size: 2.3rem; margin-bottom: 26px; } .safems .formcard { background: #fff; border: 1px solid var(--line-2); border-top: 4px solid var(--maroon); padding: 32px 30px 34px; } .safems .formcard .field { margin-bottom: 24px; display: block; } .safems .formcard .field > label, .safems .grouplabel { display: block; font-weight: 600; color: var(--ink); font-size: 1rem; margin-bottom: 9px; } .safems .req { color: var(--red); } .safems .formcard input[type=text], .safems .formcard input[type=tel], .safems .formcard input[type=email], .safems .formcard select, .safems .formcard textarea { width: 100%; border: 1px solid var(--field-line); background: #fff; font: inherit; font-size: 1rem; color: var(--ink); padding: 11px 13px; border-radius: 2px; font-family: var(--sa-font); } .safems .formcard input::placeholder, .safems .formcard textarea::placeholder { color: var(--placeholder); } .safems .formcard input:focus, .safems .formcard select:focus, .safems .formcard textarea:focus { outline: none; border-color: var(--maroon); box-shadow: 0 0 0 2px rgba(141,26,27,.13); } .safems .formcard select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--ink) 50%), linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position: calc(100% - 19px) 20px, calc(100% - 13px) 20px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 38px; height: 45px; } .safems .formcard textarea { min-height: 118px; resize: vertical; } .safems .trio { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 14px; } .safems .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .safems .cityzip { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-top: 14px; } .safems .radios { display: flex; gap: 26px; align-items: center; min-height: 45px; } .safems .radios label { display: flex; align-items: center; gap: 9px; font-weight: 400; color: var(--body-ink); cursor: pointer; } .safems .radios input { accent-color: var(--maroon); width: 17px; height: 17px; margin: 0; } .safems .submit { display: inline-flex; align-items: center; gap: 10px; background: var(--maroon); color: #fff; border: 0; font-family: var(--sa-font); font-weight: 600; font-size: 1rem; padding: 14px 30px; cursor: pointer; transition: .15s; } .safems .submit:hover { filter: brightness(.88); } .safems .submit u { text-underline-offset: 3px; } .safems .formnote { font-size: .92rem; color: #7b8083; margin-top: 16px; } /* Honeypot: off-screen for people, still fillable by a bot. */ .safems .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .safems .form-fail { background: #fdecec; border: 1px solid #f0c2c2; border-left: 4px solid var(--red); color: #7e241f; padding: 12px 16px; margin: 0 0 22px; font-size: .98rem; } .safems .form-sent { background: #eaf5ee; border: 1px solid #bfdcc9; border-left: 4px solid #2e6b4b; color: #24513a; padding: 12px 16px; margin: 0 0 22px; font-size: .98rem; } /* ---------- Contact inbox ---------- */ .safems .msg-meta { margin: 6px 0 0; font-size: .98rem; } .safems .msg-body { margin: 14px 0 0; white-space: pre-line; } @media (max-width: 960px) { .safems .contactgrid { grid-template-columns: 1fr; gap: 44px; } } @media (max-width: 620px) { .safems .trio { grid-template-columns: 1fr; } .safems .duo { grid-template-columns: 1fr; gap: 24px; } .safems .cityzip { grid-template-columns: 1fr; } .safems .mapframe { height: 300px; } .safems .formcard { padding: 24px 20px 28px; } .safems .cinfo h2, .safems .formcol h2 { font-size: 1.8rem; } } /* ---------- Application form (skinned) ---------- */ /* Reuses the contact page's .formcard field styling; these are the extras the application form needs on top of it. */ .safems .applycard { max-width: 1000px; margin: 0 auto; } .safems .apply-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line-2); } .safems .apply-logo { width: 66px; height: 66px; object-fit: contain; flex: none; } .safems .apply-code { font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--maroon); text-transform: uppercase; } .safems .apply-name { font-size: 1.5rem; margin-top: 2px; } .safems .slotpick { border: 0; margin: 0 0 24px; padding: 0; } .safems .slotpick legend { font-weight: 600; color: var(--ink); font-size: 1rem; margin-bottom: 10px; padding: 0; } .safems .slotopt { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; border: 1px solid var(--field-line); padding: 14px 16px; margin-bottom: 10px; background: #fff; } .safems .slotopt:hover { border-color: var(--maroon); } .safems .slotopt.on { border-color: var(--maroon); box-shadow: 0 0 0 2px rgba(141,26,27,.13); } .safems .slotopt input { accent-color: var(--maroon); width: 17px; height: 17px; margin: 3px 0 0; flex: none; } .safems .slotopt span { display: flex; flex-direction: column; gap: 3px; } .safems .slotopt strong { color: var(--ink); font-size: 1rem; } .safems .slotopt small { color: var(--body-ink); font-size: .9rem; line-height: 1.45; } .safems .slotopt input:disabled + span strong, .safems .slotopt input:disabled + span small { opacity: .6; } .safems .formcard .field label { display: block; font-weight: 600; color: var(--ink); font-size: 1rem; margin-bottom: 9px; } .safems .pagebanner + .careers { padding-top: 52px; }