/* ============================================================================ 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%); /* ---- Tokens the dark block at the bottom of this file flips ---- Each one resolves to EXACTLY the literal the rule below it used to carry, so light renders byte for byte as it always has. They exist only so dark mode can move a surface without a per-component override for every card. Same pattern this file already uses for --field-line / --placeholder. */ --sa-page: #fff; /* the page itself */ --sa-panel: #fff; /* raised on the page: program cards, form cards, the feed, slot options */ --sa-menu: #fff; /* the nav dropdown */ --sa-menu-hover: #f7f7f7; --sa-head: #1c1f21; /* the black header bar */ --sa-foot: #2f3437; /* the footer band. Equal to --ink in light, but the two part company in dark: one stays a surface, the other becomes heading ink. */ --sa-field: #fff; /* form control fill */ --sa-line-hover: #d3d3d3; /* .prog hover border */ --sa-off: #6f7477; /* the "closed / inactive" label grey */ --sa-note: #7b8083; /* small print under the form */ --sa-shadow: rgba(0, 0, 0, .16); /* dropdown */ --sa-shadow-soft: rgba(0, 0, 0, .06); /* card hover lift */ --sa-ring: rgba(141, 26, 27, .13); /* focus / selected halo */ --sa-map: linear-gradient(135deg, #efece6 0%, #e6e2da 50%, #eceae4 100%); /* Maroon and red each do TWO jobs: a deep fill carrying white text (buttons, banners, the page banner, the skip link) and ink or a signal border on a light surface (links, eyebrows, the focus ring, a selected slot). Those two want opposite treatments on a near-black page - the fill stays deep, the ink has to climb - so they split into a pair here and only diverge in the dark block. Both sides are the same hex in light, so nothing moves. */ --brand-ink: #8d1a1b; /* maroon used as TEXT or a signal border */ --red-ink: #cc2027; /* red used as TEXT or a signal border */ } body.safems { background: var(--sa-page); 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(--brand-ink); 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-ink); 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: var(--sa-head); 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: var(--sa-menu); border-top: 3px solid var(--brand-ink); box-shadow: 0 12px 28px var(--sa-shadow); 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: var(--sa-menu-hover); color: var(--brand-ink); 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; } /* Theme toggle. style.css's version is built for the teal topbar and hovers to the main site's orange, which is not a colour that exists in this skin, so it is restated here to take the same white-on-black ink as the username and Log out beside it. Square-ish corners, because nothing else in this skin is rounded. The header bar is black in BOTH themes, so this needs no dark variant - only the icon swap below. */ .safems .theme-toggle { width: 30px; height: 30px; border-radius: 2px; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; flex: none; background: transparent; color: rgba(255,255,255,.86); } .safems .theme-toggle:hover { background: rgba(255,255,255,.12); color: #fff; } .safems .theme-toggle svg { width: 18px; height: 18px; fill: currentColor; } /* Only the icon for the CURRENT theme is shown; the other is hidden, so one button carries both states without any JS class juggling. */ .safems .theme-toggle .ico-moon { display: none; } :root[data-theme="dark"] .safems .theme-toggle .ico-moon { display: block; } :root[data-theme="dark"] .safems .theme-toggle .ico-sun { display: none; } /* ---------- 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: var(--sa-panel); transition: .15s; } .safems .prog:hover { border-color: var(--sa-line-hover); box-shadow: 0 4px 16px var(--sa-shadow-soft); 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(--brand-ink); } .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(--brand-ink); padding: 34px 38px; margin-bottom: 28px; } .safems .job .eyebrow { color: var(--brand-ink); 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: var(--sa-off); } .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(--sa-foot); 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. */ /* The feed's own greys. Birdy's hairline, hover and ink are a set that only makes sense together, so they get their own tokens rather than borrowing the page's - same trick as --field-line below. Light values are the mockup's. */ .safems { --tw-line: #eff3f4; --tw-hover: #f7f9f9; --tw-ink: #0f1419; --tw-muted: #536471; } .safems .twotter { max-width: 760px; margin: 0 auto; border: 1px solid var(--tw-line); background: var(--sa-panel); } /* 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 var(--tw-line); } .safems .tw-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--tw-line); } .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: var(--tw-muted); } .safems .tw-post { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--tw-line); } .safems .tw-post:hover { background: var(--tw-hover); } /* The white disc is deliberately NOT tokenised: the department seal is dark artwork on transparency (black outlines, a black-ringed Senora Valley badge) and it needs a light plate to read at 48px. That is true in both themes, so the plate stays white in dark rather than being CSS-inverted, which would wreck the red, gold and flag colours in the art. */ .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: var(--tw-ink); } .safems .tw-check { width: 16px; height: 16px; fill: var(--birdy); flex: none; } .safems .tw-handle, .safems .tw-time { color: var(--tw-muted); font-weight: 400; } .safems .tw-text { margin: 2px 0 0; font-size: 15px; color: var(--tw-ink); line-height: 1.4; } .safems .tw-text strong { color: var(--tw-ink); 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: var(--tw-muted); } .safems .tw-acts svg { width: 18px; height: 18px; fill: currentColor; } .safems .tw-empty { padding: 42px 20px; text-align: center; color: var(--tw-muted); } @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, var(--sa-map)); 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(--brand-ink); 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(--brand-ink); } .safems .cinfo .isocials svg { width: 22px; height: 22px; fill: currentColor; } .safems .formcol h2 { font-size: 2.3rem; margin-bottom: 26px; } .safems .formcard { background: var(--sa-panel); border: 1px solid var(--line-2); border-top: 4px solid var(--brand-ink); 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-ink); } .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: var(--sa-field); 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(--brand-ink); box-shadow: 0 0 0 2px var(--sa-ring); } .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(--brand-ink); 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: var(--sa-note); 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; } /* Two tinted result boxes. Each is a fill that CARRIES text, so field, hairline and ink move as a set and all three are tokens: on a dark page the field has to go dark while the ink goes light, which no single value can do. */ .safems { --fail-bg: #fdecec; --fail-line: #f0c2c2; --fail-ink: #7e241f; --sent-bg: #eaf5ee; --sent-line: #bfdcc9; --sent-ink: #24513a; --sent-accent: #2e6b4b; } .safems .form-fail { background: var(--fail-bg); border: 1px solid var(--fail-line); border-left: 4px solid var(--red-ink); color: var(--fail-ink); padding: 12px 16px; margin: 0 0 22px; font-size: .98rem; } .safems .form-sent { background: var(--sent-bg); border: 1px solid var(--sent-line); border-left: 4px solid var(--sent-accent); color: var(--sent-ink); 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(--brand-ink); 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: var(--sa-panel); } .safems .slotopt:hover { border-color: var(--brand-ink); } .safems .slotopt.on { border-color: var(--brand-ink); box-shadow: 0 0 0 2px var(--sa-ring); } .safems .slotopt input { accent-color: var(--brand-ink); 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; } /* ============================================================================ DARK THEME ============================================================================ Keyed on the data-theme attribute the inline script in partials/safems-head stamps on before this file paints, so there is no white flash and no second CSS branch for the OS preference. Same key and same localStorage entry as the main site, so a visitor who chose dark there arrives here in dark. The surfaces are the SHARED dark neutrals from style.css lines 113-175, not a department-specific set. The four skinned micro-sites and the main site have to read as one system in dark; what makes SAFEMS still look like SAFEMS is the maroon and the red, which are kept, not the greys, which are not. Nearly all of it is variable flips, because the light rules above were moved onto tokens first. The handful of real overrides at the bottom are the ones a variable genuinely cannot carry: a border that only exists in dark, a light plate under dark artwork, and two hairlines that live on the black header bar and therefore have to move the OPPOSITE way from every other hairline. */ :root[data-theme="dark"] .safems, :root[data-theme="dark"] body.safems { /* No color-scheme here: style.css already sets it on :root, and style.css is loaded on every skinned page, so native controls and scrollbars follow. */ /* ---- Surfaces: the shared neutrals ---- */ --sa-page: #171c21; /* the page */ --sa-panel: #1c2229; /* raised: program cards, form cards, the feed */ --sa-menu: #1c2229; /* the dropdown, which floats over both */ --sa-menu-hover: #212932; --card-bg: #212932; /* the alternating band: .job, the .progico disc */ --sa-foot: #212932; /* the footer, which is a band like any other */ --line-2: #2b343d; /* hairline */ --field-line: #3a4650; /* the stronger border, for things you can type in */ --sa-line-hover: #3a4650; /* Fields sit INSIDE a panel, so they go darker than it rather than lighter - the same inset treatment style.css gives every control on the main site. */ --sa-field: #171c21; /* ---- Ink ---- */ --ink: #f1f5f8; /* headings. 15.6:1 on the page, 13.4:1 on a band */ --body-ink: #e3e8ec; /* body copy. 13.9 / 13.0 / 11.9 on page / panel / band */ --placeholder: #9aa8b3; /* 7.0:1 on a field */ --sa-note: #9aa8b3; /* 6.6:1 on a form card */ --sa-off: #9aa8b3; /* was #6f7477, only 3.1:1 on a dark band */ /* ---- Brand ---- --maroon and --red themselves do NOT move. Every one of their uses is a deep fill under white text (the buttons, the event band, the page banner, the skip link, the map pin) or the wordmark on the black header bar, and all of those already read correctly against a dark page - deepening them further would only flatten the chrome. What has to move is the same two colours used as INK. Maroon #8d1a1b as text on #171c21 is 1.88:1, and on the lightest band it is 1.61:1, which is unreadable at any size. Both are lifted in LIGHTNESS with the saturation held near the top (88% and 100%) so they stay fire-engine red rather than sliding into salmon, and both clear 4.5:1 on the WORST case, which is the lightest surface they land on. */ --brand-ink: #f4625a; /* 5.5 page / 5.2 panel / 4.7 band */ --red-ink: #ff6f63; /* 6.3 page / 5.9 panel / 5.4 band */ --sa-ring: rgba(244, 98, 90, .28); /* the halo has to work harder on a dark field */ /* ---- Depth ---- A black shadow is invisible on a near-black page, so both go much darker and the card hover leans on its border instead. */ --sa-shadow: rgba(0, 0, 0, .55); --sa-shadow-soft: rgba(0, 0, 0, .45); /* ---- Birdy feed ---- --birdy #1da1f2 is left exactly where it is: it is 5.7:1 on the dark card, it is Birdy's own colour, and lifting it would only make it less itself. */ --tw-line: #2b343d; --tw-hover: #212932; --tw-ink: #e3e8ec; /* 13.0:1 on the feed card */ --tw-muted: #9aa8b3; /* 6.6:1, was #536471 at 1.7:1 */ /* ---- Result boxes ---- */ --fail-bg: #3a1f1e; --fail-line: #5c2c2a; --fail-ink: #eb9a94; /* 6.9:1 */ --sent-bg: #1b3227; --sent-line: #2f5741; --sent-ink: #7fc7a1; /* 6.9:1 */ --sent-accent: #5cae82; /* The station map placeholder only shows when the department has no preview image on its record. Its light version is a warm off-white (#efece6 / #eceae4); the warmth is kept rather than swapping in the cool shared neutrals, because it is standing in for paper, not for a surface. */ --sa-map: linear-gradient(135deg, #2a2622 0%, #211e1b 50%, #262320 100%); } /* --sa-head is deliberately NOT flipped. The header bar is already #1c1f21 in light, the wordmark's maroon half and the nav's white ink are tuned to it, and repainting it would make the bar the one part of the site that looks DIFFERENT in dark. It does mean the bar and the page are now within a few points of each other, so it needs a hairline it never needed on white. Same reasoning for the footer, which no longer contrasts hard with the page. */ :root[data-theme="dark"] .safems .site-head { border-bottom: 1px solid var(--line-2); } :root[data-theme="dark"] .safems footer { border-top: 1px solid var(--line-2); } /* The department seal is dark artwork on transparency, so on the application form's dark card its black outlines and the black-ringed Senora Valley badge simply disappear. It gets a plate, not a CSS invert: inverting would turn the red maltese crosses cyan and the gold blue. (The feed avatar already has this plate in both themes, which is why it needs nothing here.) */ :root[data-theme="dark"] .safems .apply-logo { background: #fff; border-radius: 8px; padding: 4px; } /* The mobile nav's dividers are the one place --line-2 is drawn ON the black header bar instead of on the page, so they are the one place the hairline has to get LIGHTER in dark mode rather than darker. Flipping the token alone would erase them. */ @media (max-width: 960px) { :root[data-theme="dark"] .safems .nav { border-top-color: rgba(255, 255, 255, .14); } :root[data-theme="dark"] .safems .nav > li > a { border-bottom-color: rgba(255, 255, 255, .14); } } /* What style.css's dark rules do to this skin, checked one by one: .card / .widget / .table th / .table tbody tr:hover / .role-icon - these land on the roster, duty and manage tabs, which deliberately reuse the main site's components inside SAFEMS chrome. They are meant to pick up the main dark theme and they are left alone. .searchbox / .social - this skin has no search pill, and its icon row is .socials, so neither selector matches. Nothing to override. .theme-toggle icon swap - reused as-is; the namespaced copy above only repeats it so the button still works if style.css's version ever moves. Deliberately untouched: the hero (photo, gradient fallback and rgba scrim are all already dark and identical in both themes), the crest artwork sitting on that photo, the map pin and its shadow, and .mapbox / .leadphoto, which are dead rules no view renders. One inherited low-contrast spot is left as it was: the wordmark's maroon half ("SAN ANDREAS") is 1.6:1 on the black header bar and 1.4:1 on the footer, and always has been - it is the mockup's logo lockup, not a token, so it is not something dark mode should quietly redesign. Moving the footer to the shared band colour nudges it to 1.6:1, so dark is marginally better than light here, never worse. */