/* ============================================================================ SAN ANDREAS SHERIFF'S BUREAU - department micro-site skin Ported from the approved sasb-home.html mockup. EVERY rule is namespaced under .sasb, for the same reason safems.css, sadt.css and sampd.css are: the mockup uses .wrap, .btn, .nav, .sub, .card, .tile, .seal, .social, .field, .submit and bare table selectors, all of which already exist in style.css. Unscoped this file would repaint the whole site. .sasb sits on . style.css is still loaded here: the roster, duty and manage tabs reuse its tables, badges, chips and forms. ART PLACEHOLDERS: every box that has no real photo yet carries .ph with a data-ph label, which prints faintly over the gradient so the slot is self-documenting. Dropping a real URL in adds .has-pic and the label goes. ============================================================================ */ .sasb { --gold: #c8a233; /* news band, footer headings, accents */ --gold-dark: #8a6d1f; --gold-soft: #e2c869; --sb-ink: #1f2a36; /* nav, headlines */ --sb-body: #333333; --sb-dark: #2a2b2d; /* footer */ --sb-darker: #212224; /* bottom bar */ --sb-red: #9c1620; --sb-red-dark: #7a1017; --sb-tile: rgba(28,38,54,.84); --sb-head: #f7f8f9; --sb-grey: #d9d9d9; /* welcome band */ --sb-line: #dcdcdc; --sb-field: #9aa3ad; /* --- Surface + ink tokens, so the dark theme at the end of this file is a variable flip and not a second copy of the skin. ----------------------- Every value here is byte-identical to the literal the rule below it used to carry, so light mode renders exactly as it always did. Two of them are token PAIRS for the same reason style.css needed them: a colour that paints a solid fill AND carries text has to move in opposite directions in dark mode, so the fill and its ink cannot share one token. --sb-ink is INK (headings, links, field text) and goes light in dark. --sb-chrome is the same navy as a FILL (utility strip, banner, buttons, table heads) and stays deep, because those already carry light labels. --gold-dark is INK (nav hover, eyebrows, the apply code) and lightens. --gold-fill is the same gold as a button-hover FILL and stays deep. The "Around the Bureau" band gets its own six tokens further down for the same reason, but resolved the other way: it is a page-sized FIELD of gold rather than a strip of it, so in dark mode the field goes dark and the gold moves onto the ink. See the --sb-goldband group. */ --sb-page: #fff; /* the page itself */ --sb-panel: #fff; /* cards and panels raised off the page */ --sb-panel-2: #fff; /* a box sitting on top of a panel (slot options) */ --sb-band: #fafafa; /* the contact band, and table zebra rows */ /* Split out of --sb-band even though it is the same #fafafa: .midsection is the only band that sits DIRECTLY under the "Around the Bureau" band, and once that one stops being gold the two need different dark values or the page loses the section break. See the dark block. */ --sb-midband: #fafafa; --sb-ladder: #f3f4f5; /* careers rank-ladder cards */ --sb-panel-foot: #f2f2f2; /* the stat panel's footer strip */ --sb-hover: #f2f3f4; /* dropdown row hover */ --sb-field-bg: #fff; /* form fields, inset into their card */ --sb-chrome: var(--sb-ink); --sb-chrome-hover: #29343f; --on-sb-chrome: #fff; /* ink on any navy fill */ --gold-fill: var(--gold-dark); /* The "Around the Bureau" band, every layer of it, so they move together. */ --sb-goldband: var(--gold); --sb-goldband-head: #2c2410; /* AROUND THE BUREAU */ --sb-goldband-rule: rgba(0,0,0,.22); /* the rule under that heading */ --on-goldband: #1f2a36; /* story headings */ --sb-goldband-body: #2f2f2f; /* story copy */ --sb-goldband-line: rgba(0,0,0,.16); /* hairline between stories */ --sb-wordmark: #111; /* SHERIFF'S BUREAU lockup and its rule */ --sb-star-ink: #3a2c0c; /* header seal fallback text, no logo uploaded */ --sb-welcome-ink: #2e2e2e; --sb-req: #b32020; /* required-field asterisk */ /* Three hairlines that are all but the same grey but are NOT interchangeable in light: each token keeps its own literal so nothing shifts by a hex. */ --sb-line-head: #eaecee; /* under the header band */ --sb-line-sub: #e2e4e6; /* dropdown box, and the mobile nav's top rule */ --sb-line-nav: #e8eaec; /* between mobile nav items */ --sb-shadow: 0 12px 26px rgba(0,0,0,.16); /* Form result strips. Tinted fields carrying their own ink, so all four parts move together. */ --sb-fail-bg: #fdecec; --sb-fail-line: #f0c2c2; --sb-fail-accent: #b32020; --sb-fail-ink: #7e241f; --sb-sent-bg: #eaf2ea; --sb-sent-line: #bfd9c2; --sb-sent-accent: #2e6b4b; --sb-sent-ink: #24513a; --font-sb: 'Nunito Sans', -apple-system, 'Segoe UI', Arial, sans-serif; --font-sb-logo: 'Playfair Display', Georgia, serif; /* Fallback art. Anything the view supplies a real URL for overrides these inline. Written as background-image, never the background shorthand: the shorthand resets background-size/position and a 2560x1440 screenshot then renders at natural size anchored top left. */ --sb-hero: linear-gradient(150deg,#2f3a48 0%,#54627a 50%,#232c38 100%); --tile-1: linear-gradient(140deg,#20293a,#39465c); --tile-2: linear-gradient(140deg,#2a2f38,#4b5361); --tile-3: linear-gradient(140deg,#3a3327,#5f5540); --tile-4: linear-gradient(140deg,#232c3a,#3f4c62); --promo-1: linear-gradient(120deg,#2b241c,#5a4a33); --promo-2: linear-gradient(120deg,#1c1f24,#3d444f); --thumb: linear-gradient(160deg,#8d8d8d,#6f6f6f); --deputy: linear-gradient(150deg,#4a5766,#87919d); } /* No capsules anywhere in this skin. The roster, duty and manage tabs borrow style.css chips and badges, every one of them a 999px pill, so they are squared off here rather than in style.css, where it would drag the other four departments and the main site along with it. */ .sasb .role-badge, .sasb .sub-badge, .sasb .cert-chip, .sasb .role-sys, .sasb .rf-chip, .sasb .news-cat, .sasb .news-pin, .sasb .tag, .sasb .pill, .sasb .panel-nav a, .sasb .review-filter a { border-radius: 0; } body.sasb { background: var(--sb-page); color: var(--sb-body); font-family: var(--font-sb); font-size: 17px; line-height: 1.62; } .sasb h1, .sasb h2, .sasb h3, .sasb h4 { margin: 0; color: var(--sb-ink); font-weight: 700; line-height: 1.22; } .sasb a { color: var(--sb-ink); text-decoration: none; } .sasb a:hover { text-decoration: underline; } .sasb img { max-width: 100%; display: block; } /* Full bleed, like the rest of the site: the mockup's 1440px cap left dead margins on a wide screen. */ .sasb .wrap { max-width: none; margin: 0; padding: 0 clamp(16px, 1.6vw, 44px); width: 100%; } .sasb .inner { max-width: 1600px; margin: 0 auto; } .sasb .narrow { max-width: 1400px; margin: 0 auto; } .sasb :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .sasb .skip { position: absolute; left: -9999px; background: var(--gold); color: #1b1b1b; padding: 10px 18px; font-weight: 700; z-index: 999; } .sasb .skip:focus { left: 0; top: 0; } @media (prefers-reduced-motion: reduce) { .sasb *, .sasb *::before { animation: none !important; transition: none !important; } } /* ---------- Art placeholder labels ---------- */ .sasb .ph { position: relative; } .sasb .ph::after { content: attr(data-ph); position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; pointer-events: none; font-family: var(--font-sb); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; line-height: 1.7; color: rgba(255,255,255,.32); text-shadow: 0 1px 3px rgba(0,0,0,.45); } .sasb .ph.has-pic::after { content: none; } /* Tiles carry their own label text, so the placeholder note is pushed into the top right corner instead of sitting centred on top of it. */ .sasb .tile.ph::after { place-items: start end; padding: 8px 12px; font-size: .58rem; letter-spacing: .14em; } /* Same for the apply banner, which has its own "Apply Now" label over it. */ .sasb .applybtn.ph::after { place-items: end center; padding-bottom: 8px; font-size: .58rem; letter-spacing: .14em; } /* ---------- 1. Utility strip + header ---------- */ .sasb .utility { background: var(--sb-chrome); color: #d7dbe0; font-size: .88rem; } .sasb .utility .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; } .sasb .utility a { color: var(--on-sb-chrome); text-decoration: underline; } .sasb .utility a:hover { color: var(--gold-soft); } .sasb .utility .acct { display: flex; align-items: center; gap: 14px; } .sasb .utility .btn-link { background: none; border: 0; padding: 0; cursor: pointer; min-height: 0; color: var(--on-sb-chrome); font-family: var(--font-sb); font-size: .88rem; text-decoration: underline; } .sasb .utility .btn-link:hover { color: var(--gold-soft); } /* Theme toggle. It rides in the account cluster on the utility strip, which is a deep navy fill in BOTH themes, so it needs no dark override of its own: the light ink and gold hover it borrows from the links beside it are correct either way. style.css owns .theme-toggle too, and its 5px radius would be the only rounded thing in this skin, so it is squared off here like the chips. */ .sasb .theme-toggle { width: 28px; height: 28px; border: 0; border-radius: 0; padding: 0; min-height: 0; display: grid; place-items: center; cursor: pointer; flex: none; background: none; color: var(--on-sb-chrome); } .sasb .theme-toggle:hover { background: rgba(255,255,255,.12); color: var(--gold-soft); } .sasb .theme-toggle svg { width: 17px; height: 17px; fill: currentColor; } /* Only the icon for the CURRENT theme is shown, so one button carries both states with no JS class juggling. style.css carries the same pair unscoped, but this skin keeps its own so it never silently depends on a rule written for the main site's topbar. */ .sasb .theme-toggle .ico-moon { display: none; } :root[data-theme="dark"] .sasb .theme-toggle .ico-moon { display: block; } :root[data-theme="dark"] .sasb .theme-toggle .ico-sun { display: none; } .sasb .site-head { background: var(--sb-head); border-bottom: 1px solid var(--sb-line-head); position: relative; z-index: 70; } .sasb .site-head .wrap { display: flex; align-items: center; justify-content: center; gap: 48px; min-height: 82px; flex-wrap: wrap; } .sasb .logo { display: flex; align-items: center; gap: 14px; flex: none; } .sasb .logo:hover { text-decoration: none; } /* No disc behind the seal and no ring around it. The Bureau's art is two patches side by side on a transparent background, so a circular footprint shrank it to an illegible smudge. It gets a wide box and a lot more room. */ .sasb .star { flex: none; display: flex; align-items: center; justify-content: center; color: var(--sb-star-ink); font-weight: 800; font-size: .62rem; text-align: center; line-height: 1.1; } /* Size the image, not the box. A percentage height on the image does not resolve here and it renders at its natural square aspect, which overflowed the header band. style.css hit the same thing on the main site logo. */ .sasb .star img { display: block; width: auto; height: 74px; object-fit: contain; } .sasb .logo .lock { line-height: 1.05; } .sasb .logo .l1 { display: block; font-family: var(--font-sb-logo); font-weight: 900; font-size: 1.62rem; letter-spacing: .01em; color: var(--sb-wordmark); border-bottom: 2px solid var(--sb-wordmark); padding-bottom: 2px; } .sasb .logo .l2 { display: block; font-family: var(--font-sb-logo); font-weight: 700; font-size: 1.02rem; letter-spacing: .03em; color: var(--sb-wordmark); margin-top: 4px; } /* ---------- 2. Nav ---------- */ .sasb .nav { display: flex; list-style: none; margin: 0; padding: 0; gap: 26px; align-items: center; } .sasb .nav > li { position: relative; } .sasb .nav > li > a { color: var(--sb-ink); font-weight: 600; font-size: 1.02rem; padding: 16px 0; display: block; } .sasb .nav > li > a:hover, .sasb .nav > li:focus-within > a, .sasb .nav > li.active > a { color: var(--gold-dark); text-decoration: none; } .sasb .nav > li.active > a { box-shadow: inset 0 -3px 0 var(--gold); } .sasb .nav .caret { font-size: .55rem; margin-left: 5px; vertical-align: middle; } /* style.css also owns .sub, .navtoggle and .btn, and every property left undeclared here leaks through from it. The explicit resets below kill its orange border-top on the dropdowns, its uppercase pill navtoggle, and its rounded corners and --font-ui on buttons. */ .sasb .sub { position: absolute; top: 100%; left: -18px; min-width: 256px; background: var(--sb-panel); border: 1px solid var(--sb-line-sub); border-top: 1px solid var(--sb-line-sub); box-shadow: var(--sb-shadow); list-style: none; margin: 0; padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(-5px); transition: .14s; z-index: 80; } .sasb .nav > li:hover .sub, .sasb .nav > li:focus-within .sub { opacity: 1; visibility: visible; transform: none; } .sasb .sub a { display: block; padding: 9px 22px; color: var(--sb-ink); font-size: .98rem; font-weight: 400; } .sasb .sub a:hover { background: var(--sb-hover); color: var(--gold-dark); text-decoration: none; } .sasb .navtoggle { display: none; background: none; border: 0; border-radius: 0; color: var(--sb-ink); font-family: var(--font-sb); font-weight: 700; font-size: 1.02rem; cursor: pointer; padding: 12px 0; min-height: 0; text-transform: none; letter-spacing: normal; } /* ---------- 3. Hero carousel ---------- */ .sasb .sbhero { position: relative; } .sasb .slides { position: relative; height: 640px; overflow: hidden; } .sasb .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; background-image: var(--sb-hero); background-size: cover; background-position: center; } .sasb .slide.on { opacity: 1; } .sasb .chev { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; background: none; border: 0; color: #fff; font-size: 2.1rem; line-height: 1; cursor: pointer; padding: 10px 16px; text-shadow: 0 1px 6px rgba(0,0,0,.5); font-weight: 300; min-height: 0; } .sasb .chev:hover { color: var(--gold); } .sasb .chev.prev { left: 8px; } .sasb .chev.next { right: 8px; } .sasb .herodots { position: absolute; left: 0; right: 0; bottom: 108px; z-index: 6; display: flex; gap: 9px; justify-content: center; } .sasb .herodots .dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; min-height: 0; } .sasb .herodots .dot.on { background: var(--gold); } /* ---------- 4. Quick tile strip ---------- */ .sasb .tiles { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -92px; position: relative; z-index: 6; } .sasb .tile { position: relative; min-height: 92px; display: flex; flex-direction: column; justify-content: center; padding: 16px 22px; color: #fff; overflow: hidden; background-size: cover; background-position: center; } .sasb .tile:nth-child(1) { background-image: var(--tile-1); } .sasb .tile:nth-child(2) { background-image: var(--tile-2); } .sasb .tile:nth-child(3) { background-image: var(--tile-3); } .sasb .tile:nth-child(4) { background-image: var(--tile-4); } .sasb .tile::before { content: ""; position: absolute; inset: 0; background: var(--sb-tile); } .sasb .tile b, .sasb .tile span { position: relative; z-index: 2; } .sasb .tile b { font-size: 1.12rem; font-weight: 700; line-height: 1.3; } .sasb .tile span { font-size: .98rem; margin-top: 2px; } .sasb .tile:hover { text-decoration: none; color: #fff; } .sasb .tile:hover::before { background: rgba(28,38,54,.72); } /* ---------- 5. Gold band ---------- */ .sasb .goldband { background: var(--sb-goldband); padding: 58px 0; } .sasb .goldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; } .sasb .promo { display: block; aspect-ratio: 16/6; background-size: cover; background-position: center; margin-bottom: 22px; position: relative; overflow: hidden; } .sasb .promo:nth-of-type(1) { background-image: var(--promo-1); } .sasb .promo:nth-of-type(2) { background-image: var(--promo-2); } .sasb .promo:hover { text-decoration: none; filter: brightness(1.08); } /* The caption is white and gold, and the screenshots are bright daylight shots with a lot of white bodywork, so a slot holding a real picture gets a scrim under the caption end. The placeholder gradients are already dark enough. */ .sasb .promo.has-pic::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15,22,32,.82) 0%, rgba(15,22,32,.56) 46%, rgba(15,22,32,.06) 100%); } .sasb .promo .cap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 22px 30px; color: #fff; z-index: 2; } .sasb .promo .cap .cap1 { font-size: 1.3rem; font-weight: 700; line-height: 1.15; text-transform: uppercase; } .sasb .promo .cap .cap2 { font-size: 1.8rem; font-weight: 800; color: var(--gold-soft); line-height: 1.1; text-transform: uppercase; } .sasb .promo .cap .cap3 { font-size: .93rem; font-weight: 600; margin-top: 10px; text-transform: uppercase; letter-spacing: .04em; } .sasb .promo.ph::after { align-items: end; padding-bottom: 10px; } .sasb .bandhead { color: var(--sb-goldband-head); font-size: 1.34rem; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 12px; border-bottom: 2px solid var(--sb-goldband-rule); margin-bottom: 4px; } .sasb .briefitem { display: grid; grid-template-columns: 150px 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--sb-goldband-line); } .sasb .briefthumb { aspect-ratio: 4/5; background-size: cover; background-position: center; background-image: var(--thumb); } /* --on-goldband, not --sb-ink: these sit inside the band, which has its own surface in each theme, so their ink is tied to the band rather than the page. */ .sasb .briefitem h3 { font-size: 1.16rem; color: var(--on-goldband); line-height: 1.3; } .sasb .briefitem h3 a { color: var(--on-goldband); } .sasb .briefitem p { margin: 12px 0 0; font-size: 1rem; color: var(--sb-goldband-body); } .sasb .briefitem .stat { font-weight: 800; } /* ---------- 6. Hiring / on duty / command ---------- */ .sasb .midsection { background: var(--sb-midband); padding: 70px 0 80px; } .sasb .midgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 44px; align-items: start; } .sasb .hiring { text-align: center; } .sasb .hiring .eyebrow { color: var(--gold-dark); font-weight: 800; font-size: 1.24rem; } .sasb .hiring h2 { font-size: 2.5rem; margin: 8px 0 24px; } .sasb .applybtn { display: block; aspect-ratio: 16/6; position: relative; overflow: hidden; background-image: linear-gradient(105deg, #0d1a33 0%, #2b3f5c 45%, #6d5417 100%); background-size: cover; background-position: center; } .sasb .applybtn:hover { text-decoration: none; filter: brightness(1.1); } .sasb .applybtn > span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.7rem; letter-spacing: .03em; text-transform: uppercase; z-index: 2; } .sasb .hiring p { margin: 22px 0 0; font-size: 1rem; } .sasb .hiring a.textlink { text-decoration: underline; font-weight: 600; } .sasb .statpanel { border: 1px solid var(--sb-line); background: var(--sb-panel); } .sasb .statpanel .head { background: var(--sb-chrome); color: var(--on-sb-chrome); text-align: center; padding: 10px 12px; font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .sasb .statpanel .rows { padding: 6px 22px 14px; } .sasb .statrow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--sb-line); } .sasb .statrow:last-child { border-bottom: 0; } .sasb .statrow .k { font-size: .97rem; color: var(--sb-body); } .sasb .statrow .v { font-weight: 800; font-size: 1.32rem; color: var(--sb-ink); white-space: nowrap; } .sasb .statpanel .foot { text-align: center; padding: 14px 12px; background: var(--sb-panel-foot); border-top: 1px solid var(--sb-line); font-size: .95rem; } /* Seal above, name below. No photo box, no plate laid over the artwork. */ .sasb .commandcard { display: block; text-align: center; background: var(--sb-panel); border: 1px solid var(--sb-line); border-top: 4px solid var(--gold); padding: 26px 22px 24px; } .sasb .commandcard:hover { text-decoration: none; border-color: var(--gold); } .sasb .commandcard .seal { display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--sb-ink); font-weight: 800; font-size: 1.6rem; } .sasb .commandcard .seal img { display: block; width: auto; height: 210px; max-width: 100%; object-fit: contain; } .sasb .commandcard .who b { display: block; color: var(--sb-ink); font-size: 1.5rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; } .sasb .commandcard .who small { display: block; color: var(--sb-body); font-size: .84rem; font-weight: 600; letter-spacing: .06em; margin-top: 8px; text-transform: uppercase; } /* ---------- 7. Welcome ---------- */ .sasb .welcome { background: var(--sb-grey); padding: 70px 0; } .sasb .welcomegrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 52px; align-items: start; } .sasb .welcome h1 { font-size: 2.25rem; margin-bottom: 22px; } .sasb .welcome p { margin: 0 0 18px; font-size: 1.03rem; color: var(--sb-welcome-ink); } .sasb .welcome .photo { aspect-ratio: 16/9; background-image: var(--deputy); background-size: cover; background-position: center; } /* ---------- 8. Documents strip ---------- The same tile as the strip under the hero, so the page ends on a component the template already owns. No photography here, so the placeholder gradient and its label are dropped for a flat ink fill, and the column count follows the number of published documents instead of being pinned at four. */ .sasb .tiles.more { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 0; } .sasb .tile.plain { background: var(--sb-chrome); border-top: 4px solid var(--gold); min-height: 108px; } .sasb .tile.plain::before { content: none; } .sasb .tile.plain:hover { background: var(--sb-chrome-hover); } .sasb .tile.plain span { color: #b9c2cc; } /* ---------- 9. Footer ---------- */ .sasb .sb-footer { background: var(--sb-dark); color: #e6e7e8; border-top: 6px solid var(--gold); padding: 64px 0 54px; } .sasb .sbfootgrid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.15fr; gap: 44px; align-items: start; } .sasb .sbfootid { text-align: center; } .sasb .sbfootid .bigstar { margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; color: #e6e7e8; font-weight: 800; font-size: .82rem; line-height: 1.25; text-align: center; } .sasb .sbfootid .bigstar img { display: block; width: auto; height: 210px; max-width: 100%; object-fit: contain; } .sasb .sbfootid p { margin: 0; font-size: 1.02rem; line-height: 1.75; } .sasb .sbfootid .phones { margin-top: 22px; } .sasb .sb-footer h3 { color: var(--gold); font-size: 1.1rem; text-align: center; margin-bottom: 18px; } .sasb .sb-footer ul { list-style: none; margin: 0; padding: 0; text-align: center; } .sasb .sb-footer li { margin-bottom: 14px; } .sasb .sb-footer a { color: #e6e7e8; text-decoration: underline; } .sasb .sb-footer a:hover { color: var(--gold); } .sasb .joinpanel { background: linear-gradient(150deg, var(--sb-red), var(--sb-red-dark)); padding: 30px 26px; display: flex; align-items: center; gap: 22px; color: #fff; } .sasb .joinpanel:hover { text-decoration: none; color: #fff; filter: brightness(1.09); } .sasb .joinpanel .icon { flex: none; display: flex; align-items: center; justify-content: center; } .sasb .joinpanel .icon img { display: block; width: auto; height: 86px; object-fit: contain; } .sasb .joinpanel .icon svg { width: 44px; height: 44px; fill: #fff; } .sasb .joinpanel .txt .s1 { display: block; font-size: 1.4rem; font-weight: 600; line-height: 1.1; } .sasb .joinpanel .txt .s2 { display: block; font-size: 2rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; } .sasb .contactpanel { display: block; aspect-ratio: 16/9; background-image: var(--promo-2); background-size: cover; background-position: center; position: relative; margin-top: 22px; } .sasb .contactpanel:hover { text-decoration: none; filter: brightness(1.08); } .sasb .contactpanel > span { position: absolute; left: 22px; bottom: 18px; color: #efe9d8; font-weight: 800; font-size: 1.85rem; line-height: 1.05; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.5); z-index: 2; } .sasb .bottombar { background: var(--sb-darker); color: #cfd0d1; padding: 26px 0 30px; font-size: .95rem; } .sasb .bottombar .sbsocial { display: flex; gap: 14px; margin-bottom: 16px; } .sasb .bottombar .sbsocial a { width: 40px; height: 40px; background: rgba(255,255,255,.08); color: #e6e7e8; display: grid; place-items: center; text-decoration: none; } .sasb .bottombar .sbsocial a:hover { background: var(--gold); color: #1b1b1b; } .sasb .bottombar .sbsocial svg { width: 20px; height: 20px; fill: currentColor; } .sasb .bottombar .sbsocial img { width: 20px; height: 20px; object-fit: contain; display: block; } .sasb .bottombar p { margin: 0 0 4px; } .sasb .bottombar a { color: #cfd0d1; text-decoration: underline; } .sasb .bottombar a:hover { color: var(--gold); } /* ---------- 10. Shared page furniture ---------- */ .sasb .btn { display: inline-block; background: var(--sb-chrome); color: var(--on-sb-chrome); font-family: var(--font-sb); font-weight: 700; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; padding: 14px 30px; transition: .15s; border: 0; border-radius: 0; min-height: 0; width: max-content; } /* --gold-fill, not --gold-dark: this is a deep gold FILL carrying a white label, so it has to stay deep even after --gold-dark lightens for dark mode. */ .sasb .btn:hover { background: var(--gold-fill); color: #fff; text-decoration: none; } .sasb .btn.gold { background: var(--gold); color: #23200f; } .sasb .btn.gold:hover { background: var(--gold-fill); color: #fff; } /* Standard hub tabs (roster / duty / manage) rendered inside SASB chrome. */ .sasb .pagebanner { background: var(--sb-chrome); padding: 52px 0; text-align: center; border-bottom: 5px solid var(--gold); } .sasb .pagebanner h1 { color: var(--on-sb-chrome); font-size: 3rem; letter-spacing: -.01em; } .sasb .tabwrap { margin: 0; padding: 48px clamp(16px, 1.6vw, 44px) 88px; } /* ---------- 11. Contact page ---------- */ .sasb .contact { background: var(--sb-band); padding: 60px 0 84px; } .sasb .contact .lede { max-width: 1000px; margin: 0 auto 32px; font-size: 1.02rem; } .sasb .warning { background: var(--sb-chrome); color: var(--on-sb-chrome); padding: 26px 30px; margin: 0 auto 40px; max-width: 1000px; border-left: 6px solid var(--gold); } .sasb .warning h3 { color: var(--on-sb-chrome); font-size: 1.14rem; margin-bottom: 10px; letter-spacing: .02em; } .sasb .warning p { margin: 0 0 10px; font-size: 1rem; color: #d8dbdf; } .sasb .warning p:last-child { margin-bottom: 0; } .sasb .warning strong { color: var(--on-sb-chrome); } .sasb .formcard { background: var(--sb-panel); border: 1px solid var(--sb-line); padding: 34px 32px; max-width: 1000px; margin: 0 auto; } .sasb .formcard .field { margin-bottom: 22px; display: block; } .sasb .formcard .field label { display: block; font-weight: 700; color: var(--sb-ink); font-size: .95rem; margin-bottom: 8px; } .sasb .req { color: var(--sb-req); } .sasb .formcard input[type=text], .sasb .formcard input[type=email], .sasb .formcard select, .sasb .formcard textarea { width: 100%; border: 1px solid var(--sb-field); background: var(--sb-field-bg); font: inherit; font-size: 1rem; color: var(--sb-ink); padding: 11px 13px; font-family: var(--font-sb); } .sasb .formcard input:focus, .sasb .formcard select:focus, .sasb .formcard textarea:focus { outline: none; border-color: var(--gold-dark); box-shadow: 0 0 0 2px rgba(200,162,51,.24); } .sasb .formcard textarea { min-height: 130px; resize: vertical; } .sasb .formcard select { appearance: none; height: 45px; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--sb-ink) 50%), linear-gradient(135deg, var(--sb-ink) 50%, transparent 50%); background-position: calc(100% - 19px) 20px, calc(100% - 13px) 20px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .sasb .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .sasb .submit { background: var(--sb-chrome); color: var(--on-sb-chrome); border: 0; font-weight: 700; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; padding: 15px 40px; cursor: pointer; transition: .15s; min-height: 0; } .sasb .submit:hover { background: var(--gold-fill); } .sasb .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sasb .form-fail { background: var(--sb-fail-bg); border: 1px solid var(--sb-fail-line); border-left: 4px solid var(--sb-fail-accent); color: var(--sb-fail-ink); padding: 12px 16px; margin: 0 0 22px; font-size: .98rem; } .sasb .form-sent { background: var(--sb-sent-bg); border: 1px solid var(--sb-sent-line); border-left: 4px solid var(--sb-sent-accent); color: var(--sb-sent-ink); padding: 12px 16px; margin: 0 0 22px; font-size: .98rem; } /* ---------- 12. Careers ---------- */ .sasb .careers { padding: 60px 0 84px; } .sasb .careers h2 { font-size: 2rem; margin-bottom: 18px; } .sasb .careers p { margin: 0 0 18px; } .sasb .laddergrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; margin: 30px 0 34px; } .sasb .ladder { background: var(--sb-ladder); border-top: 4px solid var(--gold); padding: 26px 28px 30px; } .sasb .ladder h3 { font-size: 1.02rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-dark); margin-bottom: 14px; } .sasb .ladder ol { margin: 0; padding-left: 20px; } .sasb .ladder li { margin-bottom: 7px; font-size: .97rem; } /* ---------- 13. Message inbox table ---------- */ .sasb .sbtable { width: 100%; border-collapse: collapse; background: var(--sb-panel); font-size: 1rem; } .sasb .sbtable thead th { background: var(--sb-chrome); color: var(--on-sb-chrome); text-align: left; padding: 13px 20px; font-size: .84rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; } .sasb .sbtable tbody td { border-bottom: 1px solid var(--sb-line); padding: 14px 20px; color: var(--sb-ink); } .sasb .sbtable tbody tr:nth-child(even) td { background: var(--sb-band); } /* ---------- 14. Application form (skinned) ---------- */ .sasb .applycard { max-width: 1000px; margin: 0 auto; } .sasb .apply-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--sb-line); } .sasb .apply-logo { width: 66px; height: 66px; object-fit: contain; flex: none; } .sasb .apply-code { font-size: .8rem; font-weight: 800; letter-spacing: .14em; color: var(--gold-dark); text-transform: uppercase; } .sasb .apply-name { font-size: 1.5rem; margin-top: 2px; } .sasb .slotpick { border: 0; margin: 0 0 24px; padding: 0; } .sasb .slotpick legend { font-weight: 700; color: var(--sb-ink); font-size: .95rem; margin-bottom: 10px; padding: 0; } .sasb .slotopt { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; border: 1px solid var(--sb-field); padding: 14px 16px; margin-bottom: 10px; background: var(--sb-panel-2); } .sasb .slotopt:hover { border-color: var(--gold-dark); } .sasb .slotopt.on { border-color: var(--gold-dark); box-shadow: 0 0 0 2px rgba(200,162,51,.24); } .sasb .slotopt input { accent-color: var(--gold-dark); width: 17px; height: 17px; margin: 3px 0 0; flex: none; } .sasb .slotopt span { display: flex; flex-direction: column; gap: 3px; } .sasb .slotopt strong { color: var(--sb-ink); font-size: 1rem; } .sasb .slotopt small { color: var(--sb-body); font-size: .9rem; line-height: 1.45; } .sasb .slotopt input:disabled + span strong, .sasb .slotopt input:disabled + span small { opacity: .6; } /* ---------- 15. Responsive ---------- */ @media (max-width: 1300px) { .sasb .site-head .wrap { gap: 26px; } .sasb .nav { gap: 16px; } .sasb .nav > li > a { font-size: .94rem; } } @media (max-width: 1100px) { .sasb .sbfootgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 1060px) { .sasb .navtoggle { display: block; margin-left: auto; } .sasb .site-head .wrap { justify-content: space-between; } .sasb .nav { display: none; order: 4; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 12px; border-top: 1px solid var(--sb-line-sub); } .sasb .nav.open { display: flex; } .sasb .nav > li > a { padding: 12px 2px; border-bottom: 1px solid var(--sb-line-nav); } .sasb .nav > li.active > a { box-shadow: none; } .sasb .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 3px solid var(--gold); padding: 0 0 6px; min-width: 0; } .sasb .slides { height: 400px; } .sasb .herodots { bottom: 16px; } .sasb .tiles { grid-template-columns: 1fr 1fr; margin-top: 0; } .sasb .goldgrid, .sasb .midgrid, .sasb .welcomegrid { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 640px) { .sasb .tiles { grid-template-columns: 1fr; } .sasb .sbfootgrid { grid-template-columns: 1fr; } .sasb .slides { height: 280px; } .sasb .hiring h2 { font-size: 2rem; } .sasb .welcome h1 { font-size: 1.7rem; } .sasb .briefitem { grid-template-columns: 110px 1fr; gap: 16px; } .sasb .joinpanel .txt .s2 { font-size: 1.6rem; } .sasb .duo { grid-template-columns: 1fr; } .sasb .logo .l1 { font-size: 1.3rem; } } /* ============================================================================ 16. DARK THEME ============================================================================ Almost entirely a variable flip of the .sasb block at the top of this file, the same way style.css re-themes the main site: no markup changes, and per-component rules only where a variable genuinely cannot carry it (two, both at the bottom of this block). Keyed on the concrete data-theme attribute that sasb-head.ejs stamps on before either stylesheet paints. The OS preference is NOT a second CSS branch here either: that script resolves "no stored choice" to the OS setting and always writes one of two values, so there is a single source of truth and no white flash. The neutrals below are byte-identical to style.css's dark palette on purpose. The Bureau site borrows style.css's tables, badges, chips and forms for the roster, duty and manage tabs, so its cards land on --paper-2 and its hairlines on --line whatever this file does. Matching those values is what keeps a hub tab from looking like it was cut out of a different site and pasted in. The rule for the gold, applied surface by surface rather than globally: a thin strip, a rule, a chip or a button KEEPS the gold fill, because a small saturated shape on a dark page is what an accent is for. A page-sized FIELD of gold does not: it becomes a dark surface with the gold moved onto the ink. Only one surface in this skin is the second kind, the "Around the Bureau" band, and it is called out below. The near-black chrome, the red join panel and every fill that was already dark under a light label are untouched. ============================================================================ */ :root[data-theme="dark"] .sasb, :root[data-theme="dark"] body.sasb { /* ---- Surfaces ---- Three levels, matching the main site: the page, a raised panel, and the alternating band. Note the light theme painted panels (#fff) LIGHTER than the bands (#fafafa) and here it is the other way round. That is deliberate and comes from style.css: --paper-2 is the card colour on every other page of this site, so a stat panel and a roster card have to agree. The 1px --sb-line border is what actually draws the edge in both themes. */ --sb-page: #171c21; --sb-panel: #1c2229; --sb-panel-2: #212932; /* slot options, which sit ON the form card */ --sb-band: #212932; --sb-ladder: #212932; --sb-panel-foot: #212932; /* .midsection is the exception, and it drops to the page level rather than the band level. It sits directly under the "Around the Bureau" band, which is now #212932 itself, so two band-level surfaces would run together into one 1500px field with no section break. In light the pair reads as gold-then-pale; here it reads as band-then-page, which is the same rhythm. Nothing is lost: #fafafa on #fff was a 1.02:1 whisper of a band anyway, and the structure in there comes from the three bordered cards, which now sit LIGHTER than their background the way they did in light. */ --sb-midband: #171c21; --sb-head: #1c2229; /* the header band, a raised bar */ --sb-grey: #212932; /* welcome band, a mid grey in light */ --sb-field-bg: #171c21; /* inset into its card, as style.css does */ /* The dropdown hover has to clear the dropdown itself, and #212932 on #1c2229 is only 1.09:1 - not enough to read as a hover. It gets the line colour instead, which is 1.27:1. */ --sb-hover: #2b343d; /* ---- Lines ---- The three hairlines that had to stay separate tokens in light so nothing shifted by a hex all land on the same value here; there is no perceptible difference between them to preserve on a dark page. */ --sb-line: #2b343d; --sb-line-head: #2b343d; --sb-line-sub: #2b343d; --sb-line-nav: #2b343d; --sb-field: #3a4650; /* form field borders want the stronger line */ /* ---- Ink ---- --sb-ink stays a step brighter than --sb-body, the same relationship the light theme had when ink was #1f2a36 against #333. */ --sb-ink: #f1f5f8; /* 14.62:1 on a panel */ --sb-body: #e3e8ec; /* 12.99:1 on a panel */ --sb-welcome-ink: #e3e8ec; --sb-wordmark: #e3e8ec; /* the lockup and the rule under it */ --sb-star-ink: #e2c869; /* header seal fallback, only shown with no logo */ --sb-req: #de726b; /* #b32020 was 2.40:1 on a panel and unreadable */ /* ---- Chrome ---- This is the one place the skin needed lifting rather than darkening. The utility strip was #1f2a36, which is a near-black bar - fine over a white page, and only 1.10:1 from the header band right below it once that band goes dark too. Lifting it to #26343f puts a 1.26:1 step back between the two so it still reads as its own object, exactly what style.css does for --chrome-2. Every navy fill in the skin shares this token, so the banner, the buttons, the stat panel head, the document tiles and the message table head all lift together. White on it is 12.76:1. */ --sb-chrome: #26343f; --sb-chrome-hover: #32424f; /* ---- Gold ---- The brand colour splits the way the file header describes. --gold itself never moves: it is 7.08:1 on the page and 5.85:1 on the footer, and it is the Bureau's identity. --gold-dark was ink at #8a6d1f, which is 3.27:1 on a panel and fails, so it rises to the skin's own --gold-soft at 9.69:1. --gold-fill keeps the old deep value because it is a button-hover FILL under a white label, and it is a literal rather than var(--gold-dark) so it does not follow the ink up. */ --gold-dark: #e2c869; --gold-fill: #8a6d1f; /* ---- The "Around the Bureau" band ---- The one brand fill that does NOT survive being left alone. Everywhere else the gold is a strip, a 4px rule, a 40px social tile or a button, and a small saturated shape on a dark page is exactly what an accent should be. Here it is a page-sized field: roughly half the visible height of the home page, which makes it the brightest thing on a near-black document and reads as a section that was never themed rather than as the Bureau's colour. So the field takes the shared band surface and the gold moves onto the ink. The heading and its rule stay gold, so the section still announces itself as SASB, and the two promo panels inside are art and were already dark. The story headings and copy join the shared inks, because gold body text at this length is worse than no gold at all. Same trade the main site makes with its gold family: dark field, light ink. */ --sb-goldband: #212932; --sb-goldband-head: #c8a233; /* 6.05:1 on the band, and still unmistakably gold */ --sb-goldband-rule: #c8a233; --on-goldband: #e3e8ec; /* 11.92:1 */ --sb-goldband-body: #9aa8b3; /* 6.04:1 */ --sb-goldband-line: #2b343d; /* The story thumbnails are the only pale placeholder art in the skin: they were a mid grey because they sat on gold. On the dark band they became the brightest blocks on the page, so they join the other placeholders. */ --thumb: linear-gradient(160deg,#3c444e,#2b333b); /* A 16% black shadow does nothing over #171c21. The dropdown gets a much harder one, plus the --sb-line-sub border it already had. */ --sb-shadow: 0 14px 30px rgba(0, 0, 0, .6); /* ---- Form result strips ---- Inverted the way style.css inverts its gold family: dark tinted field, light ink. The luminance step from the form card is small, so the 1px border and the 4px accent bar are what separate them. */ --sb-fail-bg: #3d2220; --sb-fail-line: #5c2b28; --sb-fail-accent: #de726b; --sb-fail-ink: #eb9a94; --sb-sent-bg: #1d3329; --sb-sent-line: #2c4c3c; --sb-sent-accent: #4a9a6f; --sb-sent-ink: #7fc7a1; } /* ---- The two things a variable could not carry ---- Everything else the skin owns came out of the flip above. Two deliberate non-changes worth recording, because both look like omissions: The seal art is left alone. Both patches carry their own light rim, a white outline on the Blaine County oval and a gold one on the Los Santos County shield, and the footer has been rendering this exact file on near-black #2a2b2d since the skin shipped, which is the proof it survives a dark surface. A backing plate would put a bright rectangle behind artwork the mockup deliberately floats free, and inverting it would wreck the colour. The footer and bottom bar keep #2a2b2d and #212224. They are near-black on a near-black page, but the 6px gold border already cuts the footer off from whatever is above it, so they read as one object rather than dissolving. */ /* The utility strip's own hairline. It has no border in light because the pale header band below it was contrast enough; now that the band is dark the two navies need a seam, and the header's border-bottom is on the wrong edge. */ :root[data-theme="dark"] .sasb .utility { border-bottom: 1px solid rgba(255, 255, 255, .07); } /* The quick tile strip sits flush on top of the "Around the Bureau" band with no gap. In light the strip is navy and the band was gold, so the join drew itself; now the strip's scrim (rgba(28,38,54,.84) over its art) lands within 1.01:1 of the band and the tiles read as floating in it. A hairline is enough to give the strip its bottom edge back. */ :root[data-theme="dark"] .sasb .goldband { border-top: 1px solid var(--sb-line); } /* Placeholder art labels are white at 32% over a gradient that is now competing with a dark page rather than a white one. Lifted so the slot stays self-documenting; it still has to stay faint or it reads as real copy. */ :root[data-theme="dark"] .sasb .ph::after { color: rgba(255, 255, 255, .42); }