/* ============================================================================ SAN ANDREAS MUNICIPAL POLICE DEPARTMENT - department micro-site skin Ported from the approved sampd-home.html mockup. EVERY rule is namespaced under .sampd, for the same reason safems.css and sadt.css are: the mockup uses .wrap, .btn, .nav, .sub, .card, .story, .seal, .social, .field, .submit and bare table selectors, all of which already exist in style.css. Unscoped this file would repaint the whole site. .sampd sits on . style.css is still loaded here: the roster, duty and manage tabs reuse its tables, badges, chips and forms. ============================================================================ */ .sampd { --navy: #1e4d92; /* nav bar, buttons, socials, copyright bar */ --navy-dark: #173d75; --navy-deep: #12305c; /* The navy split in two. --navy is the FILL: a deep block with a white label on it, which is already correct against a dark page and never moves. This one is the navy used as INK - the wordmark, section labels, form labels, focus rings - and it has to lighten in dark mode or it disappears into the page. In light both resolve to the same #1e4d92, so nothing changes. */ --navy-ink: var(--navy); --paleblue: #e3ecf7; /* chief band, footer */ --greyband: #f1f1f1; /* slider caption band */ --offwhite: #fafafa; /* Surfaces, split out of the literal #fff this file used in ~10 places so the dark block at the bottom has a single thing to flip. --pd-page is the page itself (body, top bar, the plain services band); --pd-surface is anything that sits proud of it (card, doc box, form card, message table, inputs); --pd-panel is a tile INSIDE a band (unit tiles, rank ladders), which is why it starts life as the pale blue rather than white. */ --pd-page: #ffffff; --pd-surface: #ffffff; --pd-panel: #e3ecf7; --pd-ink: #333333; --pd-body: #3f4448; /* Identical to --pd-body today, on purpose: light mode must not change. It exists so the genuinely secondary lines (the chief's title, the empty document notice, the slot descriptions) can drop to the muted grey in dark mode while the main body copy stays at full strength. */ --pd-muted: var(--pd-body); --pd-link: #1a3f7a; --pd-line: #d8dee6; --pd-field: #9aa3ad; /* Tuned for a white page: a soft black drop shadow and a navy focus glow. Both are meaningless on a dark page, so they become a hairline and a lightened glow in the dark block. */ --pd-shadow: 0 3px 12px rgba(0,0,0,.13); --pd-ring: rgba(30,77,146,.16); --pd-toggle-hover: rgba(30,77,146,.10); --font-head: 'Archivo', Arial, sans-serif; --font-ui: 'Roboto', Arial, sans-serif; /* Overridden inline from dept.preview_url / banner_url when one exists. */ --pd-hero: linear-gradient(160deg,#2f4a72 0%,#4a6b96 50%,#1d3355 100%); --card-1: linear-gradient(140deg,#2b3f5c,#4a6285); --card-2: linear-gradient(140deg,#15181c,#3a4048); --card-3: linear-gradient(140deg,#5a4a3a,#8a7256); --card-4: linear-gradient(140deg,#4a4f45,#767c6b); } body.sampd { background: var(--pd-page); color: var(--pd-body); font-family: var(--font-ui); font-size: 16px; line-height: 1.6; font-weight: 400; } .sampd h1, .sampd h2, .sampd h3, .sampd h4 { margin: 0; font-family: var(--font-head); color: var(--pd-ink); font-weight: 700; line-height: 1.2; } .sampd a { color: var(--pd-link); text-decoration: none; } .sampd a:hover { text-decoration: underline; } .sampd img { max-width: 100%; display: block; } /* Full bleed, like the rest of the site: the mockup's 1420/1180px caps left dead margins on a wide screen. */ .sampd .wrap { max-width: none; margin: 0; padding: 0 clamp(16px, 1.6vw, 44px); width: 100%; } .sampd .inner { max-width: 1600px; margin: 0 auto; } .sampd .narrow { max-width: 1400px; margin: 0 auto; } .sampd :focus-visible { outline: 3px solid var(--navy-ink); outline-offset: 2px; } .sampd .skip { position: absolute; left: -9999px; background: var(--navy); color: #fff; padding: 10px 18px; font-weight: 700; z-index: 999; } .sampd .skip:focus { left: 0; top: 0; } @media (prefers-reduced-motion: reduce) { .sampd *, .sampd *::before { animation: none !important; transition: none !important; } } /* ---------- 1. Top bar ---------- */ .sampd .topbar { background: var(--pd-page); padding: 16px 0; } .sampd .topbar .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } .sampd .phones { font-size: .95rem; color: var(--pd-ink); line-height: 1.55; } .sampd .phones strong { font-weight: 700; } .sampd .phones a { font-style: italic; font-weight: 700; text-decoration: underline; } .sampd .wordmark { display: flex; align-items: center; gap: 14px; justify-self: center; } .sampd .wordmark:hover { text-decoration: none; } /* Scoped to .wordmark on purpose. This is the round shield in the masthead, but ".badge" is also style.css's status pill, which the roster, duty and manage tabs render inside this skin. Unscoped, this rule beat .badge-accepted / .badge-denied / .badge-pending on specificity and turned every application status into an identical 74px navy disc, losing the green/red/amber that is the only thing distinguishing them. Keep the logo styling anchored to the masthead so the pills stay pills. */ .sampd .wordmark .badge { width: 74px; height: 74px; flex: none; border-radius: 50%; background: var(--navy); border: 3px solid #b9bec4; color: #fff; display: grid; place-items: center; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: .68rem; line-height: 1.15; padding: 6px; } /* Real logo art: keep the circular footprint, drop the fill and ring. */ .sampd .wordmark .badge.has-logo { background: none; border: 0; padding: 0; } .sampd .wordmark .badge img { width: 100%; height: 100%; object-fit: contain; } .sampd .wordmark .wm { line-height: 1; } .sampd .wordmark .wm .small { display: block; font-family: var(--font-head); font-weight: 700; font-size: .86rem; letter-spacing: .02em; color: var(--navy-ink); } .sampd .wordmark .wm .big { display: block; font-family: var(--font-head); font-weight: 700; font-size: 2.35rem; letter-spacing: .01em; color: var(--navy-ink); margin-top: 1px; } .sampd .topright { justify-self: end; display: flex; align-items: center; gap: 18px; } .sampd .searchform { display: flex; max-width: 340px; width: 100%; } /* Heads up: style.css's global control rule is input:not([type=checkbox]):not([type=radio]):not([type=color]), which is (0,3,1) and OUT-SPECIFIES this (0,2,1) selector, so the fill, the ink, the border, the radius and the padding below are all already losing to it and the field is painted by the main site's --bg/--text/--border. That is how the light site ships, so it is left alone; the dark block at the bottom only lifts the fill back off the top bar, where the two would otherwise be the same colour. */ .sampd .searchform input { flex: 1; border: 1px solid var(--pd-field); border-right: 0; padding: 10px 13px; font: inherit; font-size: .95rem; border-radius: 3px 0 0 3px; min-height: 0; } .sampd .searchform input:focus { outline: none; border-color: var(--navy-ink); } .sampd .searchform button { background: var(--navy); border: 0; color: #fff; width: 48px; cursor: pointer; border-radius: 0 3px 3px 0; display: grid; place-items: center; padding: 0; min-height: 0; } .sampd .searchform button:hover { background: var(--navy-dark); } .sampd .searchform svg { width: 20px; height: 20px; fill: currentColor; } .sampd .pd-acct { display: flex; align-items: center; gap: 10px; font-size: .92rem; white-space: nowrap; } .sampd .pd-acct a { color: var(--navy-ink); font-weight: 700; } .sampd .pd-acct .btn-link { background: none; border: 0; padding: 0; cursor: pointer; min-height: 0; color: var(--navy-ink); font-family: var(--font-ui); font-size: .92rem; font-weight: 700; } .sampd .pd-acct .btn-link:hover { text-decoration: underline; } /* Theme switch. style.css styles .theme-toggle for the MAIN site's teal bar (white ink, orange hover), which is wrong on this white top bar, so it is restated here in the skin's own navy and picks up --navy-ink for free when the page flips. */ .sampd .theme-toggle { width: 30px; height: 30px; border-radius: 3px; border: 0; padding: 0; min-height: 0; display: grid; place-items: center; cursor: pointer; flex: none; background: none; color: var(--navy-ink); } .sampd .theme-toggle:hover { background: var(--pd-toggle-hover); color: var(--navy-ink); } .sampd .theme-toggle svg { width: 18px; height: 18px; fill: currentColor; } /* Only the icon for the CURRENT theme is shown, so one button carries both states with no JS class juggling. Repeated inside the namespace rather than leaned on from style.css so the skin does not depend on load order. */ .sampd .theme-toggle .ico-moon { display: none; } :root[data-theme="dark"] .sampd .theme-toggle .ico-moon { display: block; } :root[data-theme="dark"] .sampd .theme-toggle .ico-sun { display: none; } /* ---------- 2. Nav bar ---------- */ .sampd .mainnav { background: var(--navy); position: relative; z-index: 60; } .sampd .mainnav .wrap { display: flex; justify-content: center; } .sampd .nav { display: flex; list-style: none; margin: 0; padding: 0; } .sampd .nav > li { position: relative; } .sampd .nav > li > a { display: block; color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .86rem; letter-spacing: .03em; text-transform: uppercase; padding: 15px 17px; } .sampd .nav > li > a:hover, .sampd .nav > li:focus-within > a, .sampd .nav > li.active > a { background: var(--navy-deep); text-decoration: none; } .sampd .nav .caret { font-size: .55rem; margin-left: 6px; vertical-align: middle; } .sampd .sub { position: absolute; top: 100%; left: 0; min-width: 262px; background: var(--navy); list-style: none; margin: 0; padding: 0; opacity: 0; visibility: hidden; transition: .13s; box-shadow: 0 10px 24px rgba(0,0,0,.28); z-index: 80; } .sampd .nav > li:hover .sub, .sampd .nav > li:focus-within .sub { opacity: 1; visibility: visible; } .sampd .sub a { display: block; color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .79rem; letter-spacing: .03em; text-transform: uppercase; padding: 12px 18px; line-height: 1.35; } .sampd .sub a:hover { background: var(--navy-deep); text-decoration: none; } .sampd .navtoggle { display: none; background: none; border: 0; color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; padding: 14px 0; cursor: pointer; width: 100%; text-align: left; min-height: 0; } /* ---------- 3. Hero ---------- */ .sampd .slider { position: relative; } .sampd .slides { position: relative; height: 640px; overflow: hidden; } .sampd .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; background-image: var(--pd-hero); background-size: cover; background-position: center; } .sampd .slide.on { opacity: 1; } .sampd .arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 56px; height: 56px; border-radius: 50%; background: var(--navy); border: 0; color: #fff; font-size: 1.25rem; cursor: pointer; display: grid; place-items: center; padding: 0; min-height: 0; } .sampd .arrow:hover { background: var(--navy-dark); } .sampd .arrow.prev { left: 14px; } .sampd .arrow.next { right: 14px; } .sampd .slidecap { background: var(--greyband); text-align: center; padding: 38px 24px 20px; } .sampd .slidecap h2 { font-size: 2.1rem; text-transform: uppercase; letter-spacing: .01em; } .sampd .slidecap p { margin: 14px auto 0; max-width: 900px; font-size: 1.05rem; color: var(--pd-body); } .sampd .btn { display: inline-block; background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; padding: 14px 30px; border-radius: 3px; transition: .15s; border: 0; min-height: 0; width: max-content; } .sampd .btn:hover { background: var(--navy-dark); color: #fff; text-decoration: none; } .sampd .slidecap .btn { margin-top: 24px; } .sampd .dots { display: flex; gap: 9px; justify-content: center; background: var(--greyband); padding: 0 0 26px; } .sampd .dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: #b7bcc2; cursor: pointer; padding: 0; min-height: 0; } .sampd .dot.on { background: #3a3f45; } /* ---------- 4. Four cards ---------- */ .sampd .cards { background: var(--offwhite); padding: 44px 0 70px; } .sampd .cardgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .sampd .card { background: var(--pd-surface); box-shadow: var(--pd-shadow); display: flex; flex-direction: column; text-align: center; border: 0; border-radius: 0; padding: 0; } /* 16/9 to match the FiveManage sources (2560x1440). The mockup's 16/10 box cropped a strip off the top and bottom of every card photo. */ .sampd .card .pic { aspect-ratio: 16/9; background-size: cover; background-position: center; } .sampd .card:nth-child(1) .pic { background-image: var(--card-1); } .sampd .card:nth-child(2) .pic { background-image: var(--card-2); } .sampd .card:nth-child(3) .pic { background-image: var(--card-3); } .sampd .card:nth-child(4) .pic { background-image: var(--card-4); } .sampd .card .body { padding: 26px 22px 30px; display: flex; flex-direction: column; flex: 1; } .sampd .card h3 { font-size: 1.28rem; text-transform: uppercase; letter-spacing: .01em; } .sampd .card p { margin: 16px 0 0; font-size: .97rem; } .sampd .card .btn { margin: 28px auto 0; font-size: .79rem; padding: 13px 22px; } /* ---------- 5. Chief's welcome ---------- */ .sampd .chief { background: var(--paleblue); padding: 74px 0; } .sampd .chiefgrid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; } .sampd .portrait { aspect-ratio: 16/9; background-image: var(--card-1); background-size: cover; background-position: center; } /* The department seal on the band's own background, no coloured plate. */ .sampd .portrait.plain { background-color: transparent; background-size: contain; background-repeat: no-repeat; aspect-ratio: 4/3; } .sampd .chieftext { text-align: center; } .sampd .chieftext h2 { font-size: 2.1rem; text-transform: uppercase; line-height: 1.28; } .sampd .rule { width: 66px; height: 4px; background: var(--navy-ink); margin: 22px auto 30px; } .sampd .chieftext p { text-align: left; margin: 0 0 18px; font-size: 1rem; } .sampd .chiefsig { text-align: left; margin-top: 22px; font-family: var(--font-head); font-weight: 700; color: var(--navy-ink); line-height: 1.35; } .sampd .chiefsig span { display: block; font-family: var(--font-ui); font-weight: 400; font-size: .95rem; color: var(--pd-muted); } .sampd .chieftext .btn { margin-top: 14px; } /* ---------- 6. Divisions and specialty units ---------- */ .sampd .units { background: var(--offwhite); padding: 70px 0 80px; } .sampd .unithead { text-align: center; margin-bottom: 34px; } .sampd .unithead h2 { font-size: 2.1rem; text-transform: uppercase; } .sampd .unithead p { margin: 14px auto 0; max-width: 900px; font-size: 1.02rem; } .sampd .unitgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; } .sampd .unit { background: var(--pd-panel); display: flex; flex-direction: column; text-align: center; padding: 30px 26px 34px; } .sampd .unitico { width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; color: #fff; } .sampd .unitico svg { width: 28px; height: 28px; fill: currentColor; } /* Unit logos are black artwork on transparent, so they are inverted to white to sit on the navy disc the same way the fallback glyph does. */ .sampd .unitico img { width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); } .sampd .unit h3 { font-size: 1.14rem; line-height: 1.35; } .sampd .unit .abbr { display: block; font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-ink); margin-bottom: 6px; } .sampd .unit p { margin: 14px 0 0; font-size: .95rem; } .sampd .unit .count { margin-top: 16px; font-family: var(--font-head); font-weight: 700; color: var(--navy-ink); font-size: .92rem; } /* ---------- 7. Service buttons + documents ---------- */ .sampd .services { background: var(--pd-page); padding: 70px 0 80px; } .sampd .servgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .sampd .servbtns { display: flex; flex-direction: column; gap: 14px; } .sampd .servbtn { display: flex; align-items: center; background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .88rem; letter-spacing: .05em; text-transform: uppercase; padding: 16px 20px; border-radius: 3px; } .sampd .servbtn:hover { background: var(--navy-dark); color: #fff; text-decoration: none; } .sampd .servbtn svg { width: 20px; height: 20px; fill: currentColor; flex: none; } .sampd .servbtn span { flex: 1; text-align: center; } .sampd .docpanel h2 { display: flex; align-items: center; gap: 12px; font-size: 1.65rem; margin-bottom: 20px; } .sampd .docpanel h2 svg { width: 26px; height: 26px; fill: var(--pd-ink); } .sampd .docbox { border: 1px solid var(--pd-line); background: var(--pd-surface); padding: 8px 20px; } .sampd .docbox ul { list-style: none; margin: 0; padding: 0; } .sampd .docbox li { border-bottom: 1px solid var(--pd-line); padding: 14px 0; font-size: .97rem; } .sampd .docbox li:last-child { border-bottom: 0; } .sampd .docbox a { font-weight: 700; } .sampd .docempty { color: var(--pd-muted); font-size: .95rem; padding: 14px 0; } /* ---------- 8. Footer ---------- */ .sampd .pd-footer { background: var(--paleblue); padding: 56px 0 46px; } .sampd .footgrid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px; align-items: start; } .sampd .seal { width: 180px; height: 180px; border-radius: 50%; background: var(--navy); border: 4px solid #c9a227; color: #fff; display: grid; place-items: center; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: .8rem; line-height: 1.3; padding: 22px; margin: 0 auto; } .sampd .seal.has-logo { background: none; border: 0; padding: 0; } .sampd .seal img { width: 100%; height: 100%; object-fit: contain; } .sampd .pd-footer h3 { font-family: var(--font-head); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pd-ink); margin-bottom: 16px; } .sampd .pd-footer ul { list-style: none; margin: 0; padding: 0; } .sampd .pd-footer li { margin-bottom: 8px; font-size: .95rem; } .sampd .pd-footer a { color: var(--pd-link); text-decoration: underline; } .sampd .pd-footer .contact p { margin: 0 0 6px; font-size: .95rem; } .sampd .pd-footer .contact a { font-style: italic; font-weight: 700; } .sampd .social { display: flex; gap: 12px; } .sampd .social a { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; } .sampd .social a:hover { background: var(--navy-dark); text-decoration: none; } .sampd .social svg { width: 19px; height: 19px; fill: currentColor; } .sampd .social img { width: 19px; height: 19px; object-fit: contain; display: block; } .sampd .copyright { background: var(--navy); color: #fff; text-align: center; padding: 16px 0; font-size: .92rem; } .sampd .copyright a { color: #fff; text-decoration: underline; } /* ---------- 9. Contact page ---------- */ .sampd .contact { background: var(--offwhite); padding: 60px 0 84px; } .sampd .contact .lede { max-width: 1000px; margin: 0 auto 32px; font-size: 1.02rem; } .sampd .warning { background: var(--navy); color: #fff; padding: 26px 30px; margin: 0 auto 40px; max-width: 1000px; } .sampd .warning h3 { color: #fff; font-size: 1.16rem; margin-bottom: 10px; letter-spacing: .02em; } .sampd .warning p { margin: 0 0 10px; font-size: 1rem; color: #dbe6f4; } .sampd .warning p:last-child { margin-bottom: 0; } .sampd .warning strong { color: #fff; } .sampd .formcard { background: var(--pd-surface); border: 1px solid var(--pd-line); padding: 34px 32px; max-width: 1000px; margin: 0 auto; } .sampd .formcard .field { margin-bottom: 22px; display: block; } .sampd .formcard .field label { display: block; font-family: var(--font-head); font-weight: 700; color: var(--navy-ink); font-size: .95rem; margin-bottom: 8px; } .sampd .req { color: #b32020; } .sampd .formcard input[type=text], .sampd .formcard input[type=email], .sampd .formcard select, .sampd .formcard textarea { width: 100%; border: 1px solid var(--pd-field); background: var(--pd-surface); font: inherit; font-size: 1rem; color: var(--pd-ink); padding: 11px 13px; border-radius: 3px; font-family: var(--font-ui); } .sampd .formcard input:focus, .sampd .formcard select:focus, .sampd .formcard textarea:focus { outline: none; border-color: var(--navy-ink); box-shadow: 0 0 0 2px var(--pd-ring); } .sampd .formcard textarea { min-height: 130px; resize: vertical; } .sampd .formcard select { appearance: none; height: 45px; padding-right: 38px; background-image: linear-gradient(45deg,transparent 50%,var(--navy-ink) 50%), linear-gradient(135deg,var(--navy-ink) 50%,transparent 50%); background-position: calc(100% - 19px) 20px, calc(100% - 13px) 20px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .sampd .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .sampd .submit { background: var(--navy); color: #fff; border: 0; font-family: var(--font-head); font-weight: 700; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; padding: 15px 40px; cursor: pointer; transition: .15s; border-radius: 3px; min-height: 0; } .sampd .submit:hover { background: var(--navy-dark); } .sampd .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sampd .form-fail { background: #fdecec; border: 1px solid #f0c2c2; border-left: 4px solid #b32020; color: #7e241f; padding: 12px 16px; margin: 0 0 22px; font-size: .98rem; } .sampd .form-sent { background: #eaf2ea; border: 1px solid #bfd9c2; border-left: 4px solid #2e6b4b; color: #24513a; padding: 12px 16px; margin: 0 0 22px; font-size: .98rem; } /* ---------- Careers ---------- */ .sampd .careers { padding: 60px 0 84px; } .sampd .careers h2 { font-size: 2rem; margin-bottom: 18px; } .sampd .careers p { margin: 0 0 18px; } .sampd .laddergrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; margin: 30px 0 34px; } .sampd .ladder { background: var(--pd-panel); padding: 26px 28px 30px; } .sampd .ladder h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .05em; color: var(--navy-ink); margin-bottom: 14px; } .sampd .ladder ol { margin: 0; padding-left: 20px; } .sampd .ladder li { margin-bottom: 7px; font-size: .97rem; } /* ---------- Message inbox table ---------- */ .sampd .pdtable { width: 100%; border-collapse: collapse; background: var(--pd-surface); font-size: 1rem; } .sampd .pdtable thead th { background: var(--navy); color: #fff; text-align: left; padding: 13px 20px; font-size: .86rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; font-family: var(--font-head); } .sampd .pdtable tbody td { border-bottom: 1px solid var(--pd-line); padding: 14px 20px; color: var(--pd-ink); } /* The alternating row rides on --offwhite rather than its own literal: it is the same "one step off the surrounding surface" that the pale bands are, and in dark mode it lands on the band grey, which lifts the row off the table. */ .sampd .pdtable tbody tr:nth-child(even) td { background: var(--offwhite); } /* Standard hub tabs (roster / duty / manage) rendered inside SAMPD chrome. */ .sampd .pagebanner { background: var(--navy); padding: 52px 0; text-align: center; } .sampd .pagebanner h1 { color: #fff; font-size: 3.05rem; letter-spacing: -.01em; } .sampd .tabwrap { margin: 0; padding: 48px clamp(16px, 1.6vw, 44px) 88px; } /* ---------- Application form (skinned) ---------- */ .sampd .applycard { max-width: 1000px; margin: 0 auto; } .sampd .apply-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--pd-line); } .sampd .apply-logo { width: 66px; height: 66px; object-fit: contain; flex: none; } .sampd .apply-code { font-family: var(--font-head); font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--navy-ink); text-transform: uppercase; } .sampd .apply-name { font-size: 1.5rem; margin-top: 2px; } .sampd .slotpick { border: 0; margin: 0 0 24px; padding: 0; } .sampd .slotpick legend { font-family: var(--font-head); font-weight: 700; color: var(--navy-ink); font-size: .95rem; margin-bottom: 10px; padding: 0; } .sampd .slotopt { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; border: 1px solid var(--pd-field); padding: 14px 16px; margin-bottom: 10px; background: var(--pd-surface); border-radius: 3px; } .sampd .slotopt:hover { border-color: var(--navy-ink); } .sampd .slotopt.on { border-color: var(--navy-ink); box-shadow: 0 0 0 2px var(--pd-ring); } .sampd .slotopt input { accent-color: var(--navy-ink); width: 17px; height: 17px; margin: 3px 0 0; flex: none; } .sampd .slotopt span { display: flex; flex-direction: column; gap: 3px; } .sampd .slotopt strong { color: var(--navy-ink); font-family: var(--font-head); font-size: 1rem; } .sampd .slotopt small { color: var(--pd-muted); font-size: .9rem; line-height: 1.45; } .sampd .slotopt input:disabled + span strong, .sampd .slotopt input:disabled + span small { opacity: .6; } /* ---------- 10. Responsive ---------- */ @media (max-width: 1320px) { .sampd .nav > li > a { padding: 15px 12px; font-size: .79rem; } } @media (max-width: 1100px) { .sampd .cardgrid { grid-template-columns: 1fr 1fr; } .sampd .footgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .sampd .topbar .wrap { grid-template-columns: 1fr; text-align: center; gap: 16px; } .sampd .wordmark { justify-self: center; } .sampd .topright { justify-self: center; flex-wrap: wrap; justify-content: center; } .sampd .navtoggle { display: block; } .sampd .mainnav .wrap { flex-direction: column; justify-content: flex-start; } .sampd .nav { display: none; flex-direction: column; width: 100%; padding-bottom: 12px; } .sampd .nav.open { display: flex; } .sampd .nav > li > a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.18); } .sampd .sub { position: static; opacity: 1; visibility: visible; box-shadow: none; background: var(--navy-deep); padding-left: 14px; } .sampd .slides { height: 340px; } .sampd .slidecap h2 { font-size: 1.5rem; } .sampd .chiefgrid, .sampd .servgrid { grid-template-columns: 1fr; gap: 34px; } .sampd .portrait { aspect-ratio: 4/3; } } @media (max-width: 620px) { .sampd .cardgrid { grid-template-columns: 1fr; } .sampd .footgrid { grid-template-columns: 1fr; text-align: center; } .sampd .social { justify-content: center; } .sampd .wordmark .wm .big { font-size: 1.7rem; } .sampd .duo { grid-template-columns: 1fr; } } /* ============================================================================ 11. DARK THEME Same contract as style.css: the inline script in partials/sampd-head.ejs stamps a concrete data-theme on before this file paints, so there is one branch here and no prefers-color-scheme media query to drift from it. color-scheme: dark is already set by style.css on :root, so native controls and scrollbars follow without anything being restated. The department's navy is IDENTITY and is not repainted. Everywhere it is a deep FILL carrying a white label - the nav bar, the sub menus, the buttons, the service tiles, the unit discs, the social discs, the page banner, the warning panel, the copyright bar, the message table head - it stays exactly #1e4d92 and reads correctly against the near-black page (2.07:1 separation from the page, white label at 8.29:1 on it). Only the navy used as INK moves, via --navy-ink, and only the pale tints that exist to be a light band become dark surfaces. Neutrals are the main site's, to the value, so the four department skins and the CMS are visibly one system. ============================================================================ */ :root[data-theme="dark"] .sampd, :root[data-theme="dark"] body.sampd { /* Shared neutrals. Page, raised surface, band, hairline, stronger border. */ --pd-page: #171c21; --pd-surface: #1c2229; --pd-line: #2b343d; --pd-field: #3a4650; /* The three pale brand tints only ever existed to be a light band, so they all land on the same band grey rather than staying pale: --offwhite under the card and unit sections, --greyband under the slider caption, --paleblue on the chief's welcome and the footer. */ --offwhite: #212932; --greyband: #212932; --paleblue: #212932; /* The pale blue's OTHER job is a tile sitting inside one of those bands (unit tiles, rank ladders). A tile has to differ from the band it sits on, and in light it is the darker of the two, so it stays the darker of the two here and takes the raised-surface grey. */ --pd-panel: #1c2229; /* Text. --pd-ink and --pd-body are #333333 and #3f4448 in light, which the eye reads as one colour, so they collapse to the one body neutral rather than inventing a distinction that was never there. --pd-muted is what carries the secondary lines. */ --pd-ink: #e3e8ec; --pd-body: #e3e8ec; --pd-muted: #9aa8b3; /* Brand as ink, lightened until it is readable on the page rather than on white. Links keep their light-mode relationship to the wordmark navy: they are the more emphatic of the two, so they sit a step lighter. Measured on #171c21 / #1c2229 / #212932: --navy-ink #7aa9e0 -> 7.01 / 6.55 / 6.01 --pd-link #8bb6e8 -> 8.13 / 7.60 / 6.97 */ --navy-ink: #7aa9e0; --pd-link: #8bb6e8; /* A drop shadow tuned for a white page is invisible on a dark one, so the card's edge is carried by an inset hairline and the shadow only deepens the lift. Inset so nothing moves: adding a real border would shift layout by 2px in dark mode only. */ --pd-shadow: inset 0 0 0 1px #2b343d, 0 6px 20px rgba(0,0,0,.5); --pd-ring: rgba(122,169,224,.24); --pd-toggle-hover: rgba(255,255,255,.12); } /* ---- The handful of things a variable cannot carry ---- */ /* Slider dots. Light paints an inactive dot pale and the active one near-black; both of those readings invert here. The active dot is 9.04:1 on the caption band and the inactive one 3.22:1, which is better than the 1.69:1 the light theme gives it. */ :root[data-theme="dark"] .sampd .dot { background: #6b7783; } :root[data-theme="dark"] .sampd .dot.on { background: #c3ccd4; } /* The required-field asterisk and the two form result banners are the only places this skin paints a status colour, and each is three or four literals deep. Restating them once is clearer than four token pairs used once each. Values are the main site's dark status colours so a red here matches a red on the portal. Ink measured on its own tint: 6.44 / 6.69 / 7.34. */ :root[data-theme="dark"] .sampd .req { color: #e98a84; } :root[data-theme="dark"] .sampd .form-fail { background: #3a2222; border-color: #5c3130; border-left-color: #de726b; color: #eb9a94; } :root[data-theme="dark"] .sampd .form-sent { background: #1e2c25; border-color: #2f4a3a; border-left-color: #5cae82; color: #7fc7a1; } /* style.css's own .social rule reaches into this skin (the mockup reuses the class name) and hangs a divider hairline off the right of the footer icons. Its dark value is a near-white rgba, which glows on the footer band; this pulls it back to the skin's own hairline. */ :root[data-theme="dark"] .sampd .social { border-right-color: var(--pd-line); } /* The search field is painted by style.css's global control rule, which wins on specificity (see the .searchform input rule above). Its dark fill is --bg, the page colour, which is also the top bar's colour, so the field would vanish into the bar and leave a floating hairline. This is specific enough to beat the global rule and puts the field back on the raised surface, the way the white field reads against the white bar in light mode. */ :root[data-theme="dark"] .sampd .searchform input { background: var(--pd-surface); } /* Deliberately left alone: - The roster, duty and manage tabs render style.css components (.widget, .table, .badge, .chip, form controls) inside this chrome. They pick up the MAIN site's dark theme, which is the point of loading style.css here. The masthead shield is styled as .wordmark .badge so it cannot collide with those status pills; see the note on that rule. - style.css's ":root[data-theme=dark] .card/.widget" rule lands on this skin's .card too, but at equal specificity from an earlier file, so .sampd .card wins and the card follows --pd-surface. Nothing to override. - --pd-hero and --card-1..4 are placeholder gradients, only visible when a department has no art uploaded. They are already dark and are overridden inline by the real photography. - The department logo is colour patch art with light outlines on transparency, so it needs no backing plate on a dark surface. The unit glyphs are already inverted to white onto their navy disc. */