/* ============================================================================ SAN ANDREAS DEPARTMENT OF TELECOMMUNICATIONS - department micro-site skin Ported from the approved sadt-home.html mockup (palette sampled from cce911.org). EVERY rule is namespaced under .sadt, for the same reason safems.css is namespaced: the mockup uses .hero, .btn, .wrap, .sub, .nav, .seal, .field, .submit, .legal, .footgrid, .photo and bare table/thead/tbody selectors, and all of those already exist in style.css. Unscoped this file would repaint the whole site. .sadt sits on . style.css is still loaded here: the roster and manage tabs reuse its tables, badges, chips and forms. ============================================================================ */ .sadt { /* Navy and crimson each do TWO jobs here: a deep fill that carries light text (utility bar, table head, page banner, footer, buttons, stats band) and an ink laid on a light surface (nav links, headings, links, required markers). Those two jobs move in opposite directions once the page goes dark - the fill is already correct against a near-black page, the ink is badly under contrast - so they are split into separate tokens. --navy / --crimson are the INK and lighten in the dark block at the foot of this file; --dt-fill-navy / --dt-fill-red are the FILLS and stay deep in both themes. --navy-dark / --crimson-dark are only ever a hover FILL, so they never move either. */ --navy: #1b3a6e; /* nav links, headings, form labels */ --navy-dark: #14294f; /* .btn.navy hover fill */ --crimson: #b81c2d; /* links, accents, required markers */ --crimson-dark: #8f1524; /* .btn / .submit / .footsocials hover fill */ --dt-fill-navy: #1b3a6e; /* utility bar, seal disc, table head, banner, footer */ --dt-fill-red: #b81c2d; /* buttons, stats band, warning panel */ --red-bright: #c1172c; /* social icon block, fill only */ /* Surfaces. Each of these was a literal inlined in the rules below; they are tokens purely so the dark block can flip all of them in one place. Every light value is byte for byte what the rule carried before, so light mode renders exactly as it always has. */ --dt-page: #fff; /* the page itself */ --dt-surface: #fff; /* header bar, agency table, form card, slot option */ --dt-menu: #fff; /* nav dropdown, which sits ON the header bar */ --dt-menu-hover: #f6f6f6; --dt-zebra: #fafafa; /* alternating agency table rows */ --dt-input: #fff; /* text fields */ --greybg: #f3f3f3; /* alternating full width section band */ --dt-ink: #2b2b2b; --dt-body: #454545; --dt-line: #dcdcdc; --dt-field: #c9cccd; --dt-card-line: #dcdcdc; /* outer edge of a panel sitting on a --greybg band */ /* All three are tuned for a white page and none of them survive a dark one: a .17 black shadow is invisible on #171c21, and a navy focus glow is the wrong hue the moment --navy itself goes light. */ --dt-shadow: rgba(0,0,0,.17); --dt-focus: rgba(27,58,110,.14); --dt-scrim: rgba(8,16,30,.34); /* Inline form feedback: pale field with dark ink in light, inverted in dark. */ --dt-fail-bg: #fdecec; --dt-fail-line: #f0c2c2; --dt-fail-ink: #7e241f; --dt-ok-bg: #eaf2ea; --dt-ok-line: #bfd9c2; --dt-ok-edge: #2e6b4b; --dt-ok-ink: #24513a; --dt-font: 'Figtree', -apple-system, 'Segoe UI', sans-serif; /* Overridden inline from dept.preview_url / banner_url when one exists. */ --dt-hero: linear-gradient(120deg,#0d1b33 0%,#1b3a6e 45%,#0a1424 100%); --photo-1: linear-gradient(140deg,#22314a,#3d5a86); --photo-2: linear-gradient(140deg,#5a2320,#a8302a); --photo-3: linear-gradient(140deg,#1e3a5c,#2f6f8c); --photo-4: linear-gradient(140deg,#233d2c,#3f6b4a); } body.sadt { background: var(--dt-page); color: var(--dt-body); font-family: var(--dt-font); font-size: 17px; line-height: 1.62; } .sadt h1, .sadt h2, .sadt h3, .sadt h4, .sadt h5 { margin: 0; color: var(--navy); font-weight: 700; line-height: 1.22; } .sadt a { color: var(--crimson); text-decoration: none; } .sadt a:hover { text-decoration: underline; } .sadt img { max-width: 100%; display: block; } /* Full bleed, like the rest of the site: the mockup's 1280px cap left dead margins on a wide screen. */ .sadt .wrap { max-width: none; margin: 0; padding: 0 clamp(16px, 1.6vw, 44px); width: 100%; } .sadt .narrow { max-width: 1400px; margin: 0 auto; } .sadt :focus-visible { outline: 3px solid var(--crimson); outline-offset: 3px; } .sadt .skip { position: absolute; left: -9999px; background: var(--dt-fill-red); color: #fff; padding: 10px 18px; font-weight: 600; z-index: 999; } .sadt .skip:focus { left: 0; top: 0; } /* ---------- 1. Utility bar ---------- */ .sadt .utility { background: var(--dt-fill-navy); color: #fff; font-size: .88rem; font-weight: 500; } .sadt .utility .wrap { padding: 0; display: flex; align-items: stretch; min-height: 38px; flex-wrap: wrap; } .sadt .util-left { display: flex; align-items: center; gap: 0; padding-left: 22px; flex-wrap: wrap; } .sadt .util-left > * { padding: 0 16px; border-right: 1px solid rgba(255,255,255,.22); display: flex; align-items: center; gap: 8px; } .sadt .util-left > *:first-child { padding-left: 0; } .sadt .util-left > *:last-child { border-right: 0; } .sadt .utility a { color: #fff; } .sadt .utility a:hover { color: #f0c9ce; } .sadt .utility svg { width: 15px; height: 15px; fill: currentColor; flex: none; } .sadt .util-right { margin-left: auto; display: flex; align-items: stretch; } .sadt .records { display: flex; align-items: center; padding: 0 20px; font-weight: 700; border-left: 4px solid var(--dt-fill-red); } .sadt .utilsocials { background: var(--red-bright); display: flex; align-items: center; gap: 14px; padding: 0 18px; } .sadt .utilsocials a { display: grid; place-items: center; } .sadt .utilsocials svg { width: 19px; height: 19px; } .sadt .utilsocials img { width: 19px; height: 19px; object-fit: contain; display: block; } .sadt .contactus { display: flex; align-items: center; gap: 8px; padding: 0 22px; font-weight: 700; } /* ---------- 2. Header ---------- */ .sadt .site-head { background: var(--dt-surface); } .sadt .site-head .wrap { display: flex; align-items: center; gap: 20px; min-height: 92px; flex-wrap: wrap; } .sadt .seal { width: 78px; height: 78px; flex: none; border-radius: 50%; background: var(--dt-fill-navy); border: 3px solid var(--dt-fill-red); color: #fff; display: grid; place-items: center; text-align: center; font-weight: 800; font-size: .72rem; line-height: 1.2; padding: 8px; } .sadt .seal span { display: block; } .sadt .seal .big { font-size: 1.02rem; letter-spacing: .02em; } /* Real logo art: keep the circular footprint, drop the fill and ring. */ .sadt a.seal img, .sadt .footseal img { width: 100%; height: 100%; object-fit: contain; } .sadt .seal.has-logo { background: none; border: 0; padding: 0; } .sadt .emergbox { border: 1px solid var(--dt-field); padding: 9px 16px; line-height: 1.35; flex: none; max-width: 250px; } .sadt .emergbox .top { color: var(--crimson); font-weight: 800; font-size: .94rem; letter-spacing: .01em; } .sadt .emergbox .btm { color: var(--dt-ink); font-size: .79rem; font-weight: 600; margin-top: 3px; } .sadt .nav { display: flex; list-style: none; margin: 0 0 0 auto; padding: 0; gap: 26px; align-items: center; } .sadt .nav > li { position: relative; } .sadt .nav > li > a { color: var(--navy); font-weight: 600; font-size: 1.02rem; padding: 14px 0; display: block; } .sadt .nav > li > a:hover, .sadt .nav > li:focus-within > a, .sadt .nav > li.active > a { color: var(--crimson); text-decoration: none; } .sadt .nav .caret { font-size: .55rem; margin-left: 4px; vertical-align: middle; } .sadt .sub { position: absolute; top: 100%; left: -16px; min-width: 272px; background: var(--dt-menu); border-top: 3px solid var(--crimson); box-shadow: 0 12px 28px var(--dt-shadow); list-style: none; margin: 0; padding: 6px 0; opacity: 0; visibility: hidden; transform: translateY(-5px); transition: .15s; z-index: 80; } .sadt .nav > li:hover .sub, .sadt .nav > li:focus-within .sub { opacity: 1; visibility: visible; transform: none; } .sadt .sub a { display: block; padding: 10px 20px; color: var(--dt-body); font-size: .96rem; font-weight: 500; } .sadt .sub a:hover { background: var(--dt-menu-hover); color: var(--crimson); text-decoration: none; } .sadt .navtoggle { display: none; background: none; border: 0; color: var(--navy); font: inherit; font-weight: 700; font-size: 1.02rem; cursor: pointer; padding: 10px 0; margin-left: auto; } .sadt .dt-acct { display: flex; align-items: center; gap: 10px; flex: none; font-size: .92rem; } .sadt .dt-acct a { color: var(--navy); font-weight: 600; } .sadt .dt-acct .btn-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--navy); font-family: var(--dt-font); font-size: .92rem; font-weight: 600; } .sadt .dt-acct .btn-link:hover { color: var(--crimson); text-decoration: underline; } /* Theme toggle. style.css already styles .theme-toggle, but for the main site's teal topbar: white ink, which would be invisible sitting here on the white header bar. Restated so it takes the same navy ink and crimson hover as the username and Log out beside it. */ .sadt .theme-toggle { width: 30px; height: 30px; flex: none; border: 0; padding: 0; border-radius: 3px; background: none; color: var(--navy); display: grid; place-items: center; cursor: pointer; } .sadt .theme-toggle:hover { color: var(--crimson); } .sadt .theme-toggle svg { width: 18px; height: 18px; fill: currentColor; } /* Both icons ship in the markup and only the one matching the active theme is shown, so the button carries both states with no JS class juggling. */ .sadt .theme-toggle .ico-moon { display: none; } :root[data-theme="dark"] .sadt .theme-toggle .ico-moon { display: block; } :root[data-theme="dark"] .sadt .theme-toggle .ico-sun { display: none; } /* ---------- 3. Hero + stats band ---------- */ .sadt .hero { position: relative; background: var(--dt-hero); background-size: cover; background-position: center; min-height: 640px; display: flex; flex-direction: column; justify-content: flex-end; } .sadt .hero::before { content: ""; position: absolute; inset: 0; background: var(--dt-scrim); } .sadt .hero .wrap { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 80px; padding-bottom: 60px; } .sadt .hero h1 { color: #fff; font-size: 2.35rem; font-weight: 700; max-width: 700px; } .sadt .hero h1 .sub { display: block; margin-top: 14px; font-size: 2.05rem; line-height: 1.35; } .sadt .btn { display: inline-flex; align-items: center; gap: 11px; background: var(--dt-fill-red); color: #fff; font-weight: 700; font-size: 1rem; padding: 14px 26px; transition: .15s; border: 0; border-radius: 0; min-height: 0; font-family: var(--dt-font); width: max-content; } .sadt .btn:hover { background: var(--crimson-dark); color: #fff; text-decoration: none; } .sadt .btn.navy { background: var(--dt-fill-navy); } .sadt .btn.navy:hover { background: var(--navy-dark); } .sadt .hero .btn { margin-top: 26px; } .sadt .statsband { background: var(--dt-fill-red); padding: 34px 0; } .sadt .statsband .wrap { display: flex; align-items: center; gap: 0; flex-wrap: wrap; justify-content: center; } .sadt .stat { padding: 0 22px; border-left: 1px solid rgba(255,255,255,.45); color: #fff; text-align: center; flex: 1 1 158px; min-width: 158px; max-width: 240px; } .sadt .stat .num { font-size: 2.5rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; } .sadt .stat .cap { font-size: .92rem; line-height: 1.35; margin-top: 6px; color: #fbe9eb; } /* ---------- 4. Mission ---------- */ .sadt .mission { background: var(--greybg); padding: 78px 0; } .sadt .missiongrid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .sadt .missionquote { border-left: 5px solid var(--navy); padding-left: 26px; } .sadt .missionquote p { margin: 0; color: var(--navy); font-size: 1.62rem; line-height: 1.4; font-weight: 500; } .sadt .missionbody p { margin: 0 0 18px; } .sadt .missionbody p:last-child { margin-bottom: 0; } /* ---------- 5. History ---------- */ .sadt .history { padding: 78px 0; } .sadt .history h2 { font-size: 2.15rem; margin-bottom: 26px; } .sadt .histgrid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: start; } .sadt .photo { background: var(--photo-1); background-size: cover; background-position: center; aspect-ratio: 16/9; display: grid; place-items: center; color: #e5eaf2; font-size: .86rem; font-weight: 600; letter-spacing: .12em; text-align: center; padding: 16px; } .sadt .history p { margin: 0 0 18px; } /* ---------- 6. Committees ---------- */ .sadt .committees { background: var(--greybg); padding: 70px 0; } .sadt .commgrid { display: grid; grid-template-columns: 340px 1fr; gap: 44px; align-items: center; } .sadt .commgrid .photo { aspect-ratio: 4/3; background-image: var(--photo-4); } .sadt .committees h3 { font-size: 1.55rem; margin-bottom: 14px; } .sadt .committees p { margin: 0 0 20px; } /* ---------- 7. Service panels ---------- */ .sadt .services { padding: 78px 0; } .sadt .servgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 32px; } .sadt .serv .photo { aspect-ratio: 16/9; } /* background-IMAGE, never the `background` shorthand. These selectors are more specific than `.sadt .photo` above, and the shorthand resets every sub-property it does not name: background-size would go back to `auto`, which renders a 2560x1440 screenshot at full size inside a ~500px box and shows nothing but its top-left corner. Same trap on .commgrid and .caregrid below. */ .sadt .serv:nth-child(1) .photo { background-image: var(--photo-3); } .sadt .serv:nth-child(2) .photo { background-image: var(--photo-2); } .sadt .serv:nth-child(3) .photo { background-image: var(--photo-1); } .sadt .servico { width: 62px; height: 62px; margin: -31px 0 0 26px; position: relative; border-radius: 50%; background: var(--dt-fill-navy); border: 3px solid var(--dt-page); display: grid; place-items: center; color: #fff; } .sadt .servico svg { width: 28px; height: 28px; fill: currentColor; } .sadt .serv h3 { font-size: 1.2rem; margin: 18px 0 10px; line-height: 1.35; } .sadt .serv p { margin: 0; font-size: .99rem; } /* ---------- 8. Member agencies ---------- */ .sadt .agencies { background: var(--greybg); padding: 70px 0; } .sadt .agencies .banner { background: var(--photo-1); background-size: cover; background-position: center; aspect-ratio: 21/9; max-height: 560px; margin-bottom: 38px; display: grid; place-items: center; color: #e5eaf2; font-weight: 600; letter-spacing: .12em; font-size: .86rem; } .sadt .agencytable { width: 100%; border-collapse: collapse; background: var(--dt-surface); font-size: 1rem; } .sadt .agencytable thead th { background: var(--dt-fill-navy); color: #fff; text-align: left; padding: 13px 20px; font-size: .86rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; } .sadt .agencytable tbody td { border-bottom: 1px solid var(--dt-line); padding: 14px 20px; color: var(--dt-ink); } .sadt .agencytable tbody tr:nth-child(even) td { background: var(--dt-zebra); } .sadt .agencytable tbody td:last-child { width: 150px; } .sadt .agencytable tbody a { font-weight: 600; } /* ---------- 9. Careers ---------- */ .sadt .careers { padding: 78px 0; } .sadt .caregrid { display: grid; grid-template-columns: 1fr 460px; gap: 52px; align-items: center; } .sadt .careers h2 { font-size: 2.05rem; margin-bottom: 20px; } .sadt .careers p { margin: 0 0 18px; } .sadt .caregrid .photo { aspect-ratio: 16/9; background-image: var(--photo-3); } /* ---------- 10. Contact ---------- */ .sadt .contact { background: var(--greybg); padding: 70px 0 84px; } .sadt .contact .eyebrow { font-weight: 700; color: var(--crimson); letter-spacing: .1em; text-transform: uppercase; font-size: .86rem; text-align: center; } .sadt .contact h2 { font-size: 2.2rem; text-align: center; margin: 8px 0 30px; } .sadt .warning { background: var(--dt-fill-red); color: #fff; padding: 26px 30px; margin: 0 auto 40px; max-width: 1000px; } .sadt .warning h3 { color: #fff; font-size: 1.16rem; margin-bottom: 10px; letter-spacing: .02em; } .sadt .warning p { margin: 0 0 10px; font-size: 1rem; color: #fde9eb; } .sadt .warning p:last-child { margin-bottom: 0; } .sadt .warning strong { color: #fff; } .sadt .formcard { background: var(--dt-surface); border: 1px solid var(--dt-card-line); padding: 34px 32px; max-width: 1000px; margin: 0 auto; } .sadt .formcard .field { margin-bottom: 22px; display: block; } .sadt .formcard .field label { display: block; font-weight: 600; color: var(--navy); font-size: .97rem; margin-bottom: 8px; } .sadt .req { color: var(--crimson); } .sadt .formcard input[type=text], .sadt .formcard input[type=tel], .sadt .formcard input[type=email], .sadt .formcard select, .sadt .formcard textarea { width: 100%; border: 1px solid var(--dt-field); background: var(--dt-input); font: inherit; font-size: 1rem; color: var(--dt-ink); padding: 11px 13px; border-radius: 2px; font-family: var(--dt-font); } .sadt .formcard input:focus, .sadt .formcard select:focus, .sadt .formcard textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 2px var(--dt-focus); } .sadt .formcard textarea { min-height: 130px; resize: vertical; } .sadt .formcard select { appearance: none; height: 45px; padding-right: 38px; background-image: linear-gradient(45deg,transparent 50%,var(--navy) 50%), linear-gradient(135deg,var(--navy) 50%,transparent 50%); background-position: calc(100% - 19px) 20px, calc(100% - 13px) 20px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .sadt .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .sadt .submit { background: var(--dt-fill-red); color: #fff; border: 0; font-family: var(--dt-font); font-weight: 700; font-size: 1rem; padding: 14px 40px; cursor: pointer; transition: .15s; } .sadt .submit:hover { background: var(--crimson-dark); } .sadt .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sadt .form-fail { background: var(--dt-fail-bg); border: 1px solid var(--dt-fail-line); border-left: 4px solid var(--crimson); color: var(--dt-fail-ink); padding: 12px 16px; margin: 0 0 22px; font-size: .98rem; } .sadt .form-sent { background: var(--dt-ok-bg); border: 1px solid var(--dt-ok-line); border-left: 4px solid var(--dt-ok-edge); color: var(--dt-ok-ink); padding: 12px 16px; margin: 0 0 22px; font-size: .98rem; } /* ---------- 11. Footer ---------- */ .sadt .dt-footer { background: var(--dt-fill-navy); color: #d3dced; padding: 58px 0 0; font-size: .98rem; } .sadt .dt-footer h3 { color: #fff; font-size: 1.5rem; margin-bottom: 18px; } .sadt .dt-footer h4 { color: #fff; font-size: 1rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 10px; } .sadt .footgrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 46px; padding-bottom: 42px; } .sadt .dt-footer ul { list-style: none; margin: 0; padding: 0; } .sadt .dt-footer li { margin-bottom: 9px; } .sadt .dt-footer a { color: #d3dced; } .sadt .dt-footer a:hover { color: #f0c9ce; } .sadt .footsocials { display: flex; gap: 14px; margin-top: 14px; } .sadt .footsocials a { width: 34px; height: 34px; border-radius: 50%; background: var(--red-bright); display: grid; place-items: center; color: #fff; } .sadt .footsocials a:hover { background: var(--crimson-dark); } .sadt .footsocials svg { width: 17px; height: 17px; fill: currentColor; } .sadt .footsocials img { width: 17px; height: 17px; object-fit: contain; display: block; } .sadt .footseal { margin-top: 6px; } .sadt .legal { border-top: 1px solid #35558c; padding: 18px 0; font-size: .87rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* Standard hub tabs (roster / manage) rendered inside SADT chrome. */ .sadt .pagebanner { background: var(--dt-fill-navy); padding: 52px 0; text-align: center; background-image: radial-gradient(rgba(255,255,255,.07) 1.6px, transparent 1.6px); background-size: 28px 28px; } .sadt .pagebanner h1 { color: #fff; font-size: 3.05rem; letter-spacing: -.01em; } .sadt .tabwrap { margin: 0; padding: 48px clamp(16px, 1.6vw, 44px) 88px; } /* ---------- 12. Responsive ---------- */ @media (max-width: 1240px) { .sadt .nav { gap: 18px; } .sadt .nav > li > a { font-size: .94rem; } .sadt .hero { min-height: 0; } } @media (max-width: 1000px) { .sadt .navtoggle { display: block; } .sadt .nav { display: none; order: 5; width: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding-bottom: 12px; border-top: 1px solid var(--dt-line); } .sadt .nav.open { display: flex; } .sadt .nav > li > a { padding: 13px 2px; border-bottom: 1px solid var(--dt-line); } .sadt .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: 0; border-left: 3px solid var(--crimson); padding: 0 0 6px; } .sadt .site-head .wrap { padding-top: 14px; padding-bottom: 10px; } .sadt .util-right { width: 100%; margin-left: 0; } .sadt .records { border-left: 0; border-top: 3px solid var(--dt-fill-red); } .sadt .missiongrid, .sadt .histgrid, .sadt .commgrid, .sadt .caregrid { grid-template-columns: 1fr; gap: 34px; } .sadt .servgrid { grid-template-columns: 1fr; } .sadt .footgrid { grid-template-columns: 1fr 1fr; } .sadt .statsband .wrap { justify-content: flex-start; } .sadt .stat { border-left: 0; padding: 18px 0; min-width: 150px; text-align: left; } } @media (max-width: 640px) { .sadt .hero h1 { font-size: 1.6rem; } .sadt .hero h1 .sub { font-size: 1.4rem; } .sadt .duo { grid-template-columns: 1fr; } .sadt .footgrid { grid-template-columns: 1fr; } .sadt .missionquote p { font-size: 1.28rem; } .sadt .agencytable tbody td:last-child { width: auto; } } /* ---------- Seal on a section background, no coloured plate ---------- `contain` so the whole seal is visible and never cropped or distorted. The seal art is square, so the box is square too: in the 4/3 box it inherited from .commgrid it sat in a band of dead space. The selector has to match .sadt .commgrid .photo's specificity (0,3,0) to override its aspect-ratio. */ .sadt .photo-plain { background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: center; } .sadt .commgrid .photo-plain { aspect-ratio: 1/1; } /* ---------- Application form (skinned) ---------- */ .sadt .applycard { max-width: 1000px; margin: 0 auto; } .sadt .apply-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--dt-line); } .sadt .apply-logo { width: 66px; height: 66px; object-fit: contain; flex: none; } .sadt .apply-code { font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--crimson); text-transform: uppercase; } .sadt .apply-name { font-size: 1.5rem; margin-top: 2px; } .sadt .slotpick { border: 0; margin: 0 0 24px; padding: 0; } .sadt .slotpick legend { font-weight: 600; color: var(--navy); font-size: .97rem; margin-bottom: 10px; padding: 0; } .sadt .slotopt { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; border: 1px solid var(--dt-field); padding: 14px 16px; margin-bottom: 10px; background: var(--dt-surface); } .sadt .slotopt:hover { border-color: var(--navy); } .sadt .slotopt.on { border-color: var(--navy); box-shadow: 0 0 0 2px var(--dt-focus); } .sadt .slotopt input { accent-color: var(--crimson); width: 17px; height: 17px; margin: 3px 0 0; flex: none; } .sadt .slotopt span { display: flex; flex-direction: column; gap: 3px; } .sadt .slotopt strong { color: var(--navy); font-size: 1rem; } .sadt .slotopt small { color: var(--dt-body); font-size: .9rem; line-height: 1.45; } .sadt .slotopt input:disabled + span strong, .sadt .slotopt input:disabled + span small { opacity: .6; } /* ============================================================================ DARK THEME The department site now follows the site-wide toggle. The theme is stamped as a concrete data-theme on by the inline script in partials/sadt-head, which runs before this file paints, so there is no white flash and the CSS only ever has to look at one attribute. The OS preference is NOT a second branch here; that script already resolves it. Almost all of this is a variable table, for the same reason style.css keeps its dark palette that way: the rules above stay theme agnostic and there is one place to look when a colour is wrong. The two per-component rules at the bottom are the only cases a variable genuinely cannot carry. The neutrals are deliberately identical to style.css's dark palette. SADT loads style.css too (the roster, duty and manage tabs reuse its tables, cards, badges and forms and SHOULD pick up the main dark theme), so if the skin's surfaces did not match those components you would see a seam every time a visitor moved between the Home tab and the Roster tab. The brand keeps its identity: navy and crimson FILLS stay exactly as deep as they are in light, because a deep fill with white text already reads correctly against a near-black page. Only the two INK tokens move, because navy #1b3a6e as text on #171c21 measures 1.53:1 and crimson #b81c2d 2.65:1, both unreadable. ============================================================================ */ :root[data-theme="dark"] body.sadt { color-scheme: dark; /* native selects, scrollbars and the caret follow */ /* Ink. Lifted in lightness, saturation kept high so the crimson still reads as the department's red rather than sliding into salmon. Measured against the worst case background, the #212932 section band: --navy #7fa8dd 5.99:1 (6.98 on the page, 6.52 on a card) --crimson #f26a72 4.96:1 (5.78 on the page, 5.40 on a card) Both clear 4.5:1 for body sized text, so the large headings that also use them are far past their 3:1 bar. */ --navy: #7fa8dd; --crimson: #f26a72; /* --navy-dark and --crimson-dark are NOT restated: their only job in this skin is the hover fill of .btn / .btn.navy / .submit / .footsocials, and a fill has to stay deep. White on #8f1524 is 9.13:1, on #14294f 14.39:1. */ /* Surfaces. Near black slate rather than pure black, so the navy and crimson chrome does not look detached from the page it sits on. */ --dt-page: #171c21; --dt-surface: #1c2229; /* header bar, agency table, form card, slot option */ --dt-menu: #212932; /* lifted off the header bar so the dropdown has an edge */ --dt-menu-hover: #262e36; /* crimson link ink on this is 4.64:1 */ --dt-zebra: #212932; --dt-input: #151a1f; /* fields recess below the card instead of matching it */ --greybg: #212932; /* the alternating band, one step up from the page */ --dt-ink: #f1f4f7; /* 13.3:1 on the band, 15.9:1 in a field */ --dt-body: #e3e8ec; /* 11.9:1 on the band, 13.9:1 on the page */ --dt-line: #2b343d; --dt-field: #3a4650; --dt-card-line: #3a4650; /* the stronger border, because a #1c2229 card on a #212932 band is only a 1.09:1 step on its own */ /* A .17 black shadow is invisible on #171c21, and the focus glow was navy when navy was dark ink; both restated rather than dropped, since the dropdown and the focus ring are the only things marking those elements. */ --dt-shadow: rgba(0,0,0,.62); --dt-focus: rgba(127,168,221,.24); /* The hero scrim carries the white headline over whatever banner art the department has uploaded. Deepened, because the page around it is dark and a .34 scrim leaves the hero looking like a lit panel floating on black. */ --dt-scrim: rgba(6,10,16,.52); /* Form feedback inverted: dark tinted field, light ink. */ --dt-fail-bg: #3a2124; --dt-fail-line: #5b2e33; --dt-fail-ink: #efb9b9; /* 8.65:1 on the field */ --dt-ok-bg: #1c2f26; --dt-ok-line: #2f5240; --dt-ok-edge: #4d9b74; --dt-ok-ink: #a8dcbd; /* 9.19:1 on the field */ } /* --- The two things a variable cannot carry --- */ /* The dropdown is only one step lighter than the header bar it drops out of, so on its own it reads as a slightly-off rectangle. In light it got its edge from a shadow, which a dark page swallows, so here it needs an actual hairline with the crimson rule kept on top. Gated to the desktop breakpoint: below 1000px the submenu is flattened into the mobile nav and given a crimson LEFT rule instead, and boxing it would undo that. Scoped through .nav on purpose: the hero headline also carries a span.sub, and this must never reach it. */ @media (min-width: 1001px) { :root[data-theme="dark"] .sadt .nav .sub { border: 1px solid var(--dt-line); border-top: 3px solid var(--crimson); } } /* The seal art is a dark navy disc on transparency. Its gold rim keeps the large copies readable anywhere, but at the 78px header size that rim is about 2px and the disc behind it dissolves into the dark header bar. A hair of light backing puts the edge back. NOT a CSS filter: inverting would wreck the lynx, the mountains and the gold. Only the header copy needs this. The footer seal sits on the navy footer, which is the same colour in both themes, and the .photo-plain copy on the committees band is ~340px, where the gold rim is thick enough to carry the silhouette on its own. */ :root[data-theme="dark"] .sadt a.seal.has-logo { background: rgba(255,255,255,.09); border-radius: 50%; padding: 3px; } /* Deliberately NOT touched: .photo and .agencies .banner. Their fallback gradients are already dark in both themes and their #e5eaf2 caption reads on them either way, so re-tinting would make the same tile look different for no reason. Same for the utility bar, stats band, warning panel and footer: every one of those is a brand fill that does not move, so its ink does not either. style.css paints .card / .widget / .table in dark for the roster, duty and manage tabs, which is exactly what we want - those tabs are meant to be the main site's components inside SADT chrome. The one thing it does NOT cover is .tabwrap itself, which has no background of its own and so falls through to body.sadt above. Nothing to add; noted so nobody goes looking for it. */