/*! * vantage-pages.css — v13.6 * Every rule the rebuilt pages depend on. Loaded by the child theme so * that page content can stay markup-only: WordPress strips CSS custom * property declarations out of post content, and this stylesheet is * entirely token-driven. * * Namespaces, all mutually exclusive: * .vp page shell (header, sections, rows, stats, CTA) * .vsv searchable service catalog, collapsible (.vsv__grp* grouping * sub-namespace added v13.6, still .vsv) * .vh fractional FAQ (+ .vh__roles/.vh__role scoping cards, v13.8) * .vfaq collapsible Q&A accordion — added v13.8 (Fractional page, id 329) * .vfr fractional IH/safety toggle (Fractional page, id 329) * .vtg Both/IH/Safety toggle — added v13.6 (IH & Safety hub, id 323) * .vf Jetpack form styling * .vnav header nav .vfoot footer * .vhr Home hero (Direction B) — added v13.5 * * v13.7 — Home hero (.vhr) becomes self-adjusting when there is no photo. * .vhr__media has always rendered as an empty graphite panel (owner call, * v13.5) — this used to permanently reserve a blank right-hand column. * Now `.vhr-b:has(.vhr__media:empty)` collapses to one centered column and * hides the empty panel; the two-column layout returns automatically the * moment a photo is ever placed inside .vhr__media. Pure CSS, no markup * change on the Home page. Also this session: removed the "Placement" * row from Home's "Three delivery modes" list (page content, not CSS) — * direct staffing/placement is treated as Staff Aug for a fixed period, * not a fourth mode; the heading already said "Three." * * v13.6 — Industrial Hygiene & Safety hub (323) rebuilt as a single toggle * page per owner direction 2026-08-13: hero rewritten (new eyebrow/H1/sub, * "Book a call" not "20-minute call", ladder removed, "What we offer" * scroll link replaces it), "Three Services"/"What Vantage does" renamed * to "Our Solutions"/"What Vantage offers" ON THIS PAGE ONLY (Home's own * copy is unchanged), three index rows (Industrial Hygiene / Occupational Safety / * Fractional CIH & CSP) rolled down from the old hub content, then a * Both/IH/Safety toggle (.vtg, new namespace — .vfr stays reserved for the * Fractional page's rate-table layout) holding two full .vsv catalog * instances (all 50 services preserved — the uploaded 8-11 toggle draft's * asbestos/lead/mold exclusion was NOT carried over; that content * exclusion question is closed, see DECISIONS-LOG.md), reorganized under * four buyer-question groups per catalog via new .vsv__grp/.vsv__grp-list * classes (2-column, click-to-expand — .vsv__grp-list uses CSS * column-count, not grid, so independent accordion rows can expand without * forcing row-height alignment across the two columns). Standalone catalog * pages 332/333 keep their own URLs and content; their "Related — OSHA * citation priorities" note also moved from the page bottom to a short * intro above the "25 SERVICES" controls (new .vsv__topnote class, dark * header context), same visit. The bottom "Not sure which of these you * need?" scoping CTA and the cross-link to the sibling catalog are * unchanged, still at the bottom. * * v13.3 — .vnav dropped position:sticky. The header was pinned to the top of * the viewport for the entire scroll (inherited from the parent theme's * `header{position:sticky}`, unchanged since 2026-07-29). Owner call * 2026-08-13: header should scroll away with the page like normal content, * not stay parked at the top eating space over everything below it. * * v13.4 — the v13.3 fix only touched .vnav. The parent theme's * `header{position:sticky}` (vantage.css lines 69/275/389/668) is a bare * TAG selector — it grabs every `
` element on the site, not just * the nav. Page content pastes in `.vp__header` (the hero block on every * rebuilt page) as an actual `
` tag too, so it inherited the same * sticky behaviour untouched: pins at the top of the viewport, later * sections scroll under it, gets shoved off only when the footer reaches * it. Confirmed live via screen recording 2026-08-13 — hero stuck through * the whole homepage scroll. Fixed at the root instead of per-class: this * rule overrides the parent's bare `header` selector directly, so no * `
`-tagged element anywhere on the site — now or in any future * pasted page — can inherit sticky from the parent again. * * v13.5 — adds .vhr, the Home hero from the 2026-08-11 * "Hero-Direction-B" draft (two-column: copy panel + photo panel), ported * to replace the plain .vp__header on the Home page only. Two changes from * the draft, both owner calls 2026-08-13: (1) the photo panel is dropped — * .vhr__media renders as an empty graphite panel, no image; (2) the * draft's speculative "Crimson" accent hue is replaced with the site's * actual live brand accent, Oxblood (--vp-accent-dk), so the hero matches * the nav, footer and every other .vp--brand page instead of introducing a * seventh, never-adopted hue. Tokens are NOT redeclared — .vhr sits inside * `.vp.vp--brand` in the page markup and inherits --vp-graphite, --vp-paper, * --vp-accent-dk etc. directly. Also renamed the draft's "Embedded" tier * label to "Staff Aug" per Decision #29 (2026-08-11, DECISIONS-LOG.md), * and repointed "How engagements work" from the draft's dead /services/ * link to /industrial-hygiene-safety/. */ header { position: static; } /* ==================================================================== 1. PAGE SHELL — .vp ==================================================================== */ /* Default: brand. A .vp with no modifier renders Oxblood. */ .vp{--vp-accent:#8C3038;--vp-accent-dk:#DE787B;} /* Oxblood — Home, About, Projects, and any page not owned by a service line */ .vp.vp--brand{--vp-accent:#8C3038;--vp-accent-dk:#DE787B;} /* Steel — Industrial Hygiene & Safety */ .vp.vp--ihs{--vp-accent:#3B6EA5;--vp-accent-dk:#6D9CD1;} /* Plum — Staffing */ .vp.vp--staffing{--vp-accent:#6B4079;--vp-accent-dk:#A67FC2;} /* Gold — Training */ .vp.vp--training{--vp-accent:#8A7310;--vp-accent-dk:#F0D53F;} /* Steel — Industrial Hygiene & Safety */ .vp .vp__row--ih{--row-hue:#3B6EA5;} /* Plum — Staffing */ .vp .vp__row--staffing{--row-hue:#6B4079;} /* Gold — Training */ .vp .vp__row--training{--row-hue:#8A7310;} .vp{ --vp-graphite:#101418; --vp-paper:#F6F5F2; --vp-white:#FFFFFF; --vp-rule:#E4E1D9; --vp-rule-dk:#2A2E33; --vp-body:#45443F; --vp-body-dk:#B8B6AE; --vp-muted:#6C6A64; --vp-muted-dk:#8E8C84; --vp-sans:Archivo,Helvetica,Arial,sans-serif; --vp-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --vp-max:880px; font-family:var(--vp-sans); color:var(--vp-body); background:var(--vp-white); line-height:1.55; -webkit-font-smoothing:antialiased; } .vp *,.vp *::before,.vp *::after{box-sizing:border-box;} .vp p,.vp h1,.vp h2,.vp h3,.vp h4,.vp ul,.vp ol,.vp dl,.vp dd,.vp dt{margin:0;} .vp p{text-wrap:pretty;} .vp__wrap{max-width:var(--vp-max);margin:0 auto;padding:0 24px;} .vp__eyebrow{font-family:var(--vp-mono);font-size:11px;font-weight:500; letter-spacing:.14em;text-transform:uppercase;display:block;} /* dark page header */ .vp__header{background:var(--vp-graphite);color:var(--vp-paper);padding:68px 0 60px;} .vp__header .vp__eyebrow{color:var(--vp-accent-dk);} .vp .vp__h1{font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-.02em; color:var(--vp-paper);margin-top:18px;max-width:20ch;} .vp .vp__lede{font-size:17px;color:var(--vp-body-dk);margin-top:22px;max-width:66ch;} .vp .vp__lede b{color:var(--vp-paper);font-weight:600;} /* header actions */ .vp__acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;} .vp__btn{display:inline-block;font-family:var(--vp-sans);font-size:15px;font-weight:600; padding:12px 20px;border-radius:0;text-decoration:none;border:1px solid transparent; transition:background .14s linear,color .14s linear;} .vp__btn--pri{background:var(--vp-accent-dk);color:var(--vp-graphite);} .vp__btn--pri:hover{background:var(--vp-paper);} .vp__btn--sec{background:transparent;color:var(--vp-paper);border-color:var(--vp-rule-dk);} .vp__btn--sec:hover{border-color:var(--vp-accent-dk);color:var(--vp-accent-dk);} .vp__btn--light{background:var(--vp-graphite);color:var(--vp-paper);} .vp__btn--light:hover{background:#2A2E33;border-color:var(--vp-accent-dk);} .vp__btn:focus-visible{outline:2px solid var(--vp-accent-dk);outline-offset:2px;} /* proof strip */ .vp__proof{border-top:1px solid var(--vp-rule-dk);margin-top:38px;padding-top:18px; font-family:var(--vp-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--vp-muted-dk);line-height:1.9;} /* section */ .vp__sec{padding:56px 0;border-bottom:1px solid var(--vp-rule);} .vp__sec:last-of-type{border-bottom:0;} .vp__sec .vp__eyebrow{color:var(--vp-accent);padding-bottom:10px; border-bottom:2px solid var(--vp-rule);margin-bottom:26px;} .vp .vp__h2{font-size:27px;font-weight:600;line-height:1.2;letter-spacing:-.015em; color:var(--vp-graphite);max-width:26ch;} .vp .vp__h3{font-size:17px;font-weight:600;color:var(--vp-graphite);line-height:1.3;} .vp .vp__p{font-size:16px;color:var(--vp-body);margin-top:16px;max-width:68ch;} .vp .vp__p b,.vp .vp__p strong{color:var(--vp-graphite);font-weight:600;} .vp__p + .vp__p{margin-top:14px;} /* definition rows — services, modes */ .vp__rows{margin-top:28px;border-top:1px solid var(--vp-rule);} .vp__row{display:grid;grid-template-columns:210px 1fr;gap:26px; padding:22px 0;border-bottom:1px solid var(--vp-rule);} .vp__row dt{font-size:17px;font-weight:600;color:var(--vp-graphite);line-height:1.3;} .vp__row dt small{display:block;font-family:var(--vp-mono);font-size:11px;font-weight:400; letter-spacing:.12em;text-transform:uppercase;color:var(--vp-accent);margin-top:7px;} .vp__row dd{font-size:15px;color:var(--vp-body);} .vp__row dd a{color:var(--vp-accent);font-weight:500;text-decoration:none; border-bottom:1px solid currentColor;} @media(max-width:719px){.vp__row{grid-template-columns:1fr;gap:10px;}} /* service-identifying rows — BRAND-SPEC: a family-overview page may carry all service hues as FLAT IDENTIFYING SWATCHES. The hue names the service; it is never decoration. Page chrome stays the brand hue. */ .vp__row--id{padding-left:18px;border-left:3px solid var(--row-hue);} .vp__row--id dt small{color:var(--row-hue);} .vp__row--id dd a{color:var(--row-hue);} @media(max-width:719px){.vp__row--id{padding-left:14px;}} /* chevron bullet list */ .vp__list{list-style:none;padding:0;margin:22px 0 0;} .vp__list li{position:relative;padding-left:24px;font-size:16px;color:var(--vp-body); margin-bottom:13px;max-width:68ch;} .vp__list li b{color:var(--vp-graphite);font-weight:600;} .vp__list li::before{content:"";position:absolute;left:0;top:.52em;width:10px;height:9px; background:var(--vp-accent); clip-path:polygon(50% 0,100% 62%,88% 78%,50% 30%,12% 78%,0 62%);} /* inline term list */ .vp__terms{font-size:15px;color:var(--vp-body);margin-top:14px;max-width:70ch;} .vp__terms b{color:var(--vp-graphite);font-weight:600;} /* stat grid */ .vp__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:28px; background:var(--vp-rule);border:1px solid var(--vp-rule);} .vp__stat{background:var(--vp-white);padding:24px 22px;} .vp__stat b{display:block;font-size:32px;font-weight:600;letter-spacing:-.02em; color:var(--vp-accent);line-height:1;} .vp__stat span{display:block;font-family:var(--vp-mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--vp-muted);margin-top:10px;} .vp__stat p{font-size:14px;color:var(--vp-body);margin-top:12px;} @media(max-width:719px){.vp__stats{grid-template-columns:1fr;}} /* totals bar */ .vp__totals{display:flex;flex-wrap:wrap;gap:8px 34px;margin-top:26px;padding:20px 22px; background:var(--vp-paper);border:1px solid var(--vp-rule);} .vp__totals div{font-size:15px;color:var(--vp-body);} .vp__totals div b{display:block;font-size:22px;font-weight:600;color:var(--vp-graphite); letter-spacing:-.01em;} .vp__totals div span{font-family:var(--vp-mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--vp-muted);} /* definition callout */ .vp__def{margin-top:24px;padding:20px 22px;background:var(--vp-paper); border-left:3px solid var(--vp-accent);} .vp__def b{font-size:17px;font-weight:600;color:var(--vp-graphite);} .vp__def i{font-family:var(--vp-mono);font-size:12px;font-style:normal; color:var(--vp-muted);margin-left:8px;} .vp__def p{font-size:15px;color:var(--vp-body);margin-top:8px;} /* footnote */ .vp__note{font-size:13px;color:var(--vp-muted);margin-top:18px;max-width:70ch;line-height:1.5;} /* CTA band */ .vp__cta{background:var(--vp-graphite);color:var(--vp-paper);padding:54px 0;} .vp__cta .vp__eyebrow{color:var(--vp-accent-dk);margin-bottom:16px;} .vp .vp__cta-h{font-size:27px;font-weight:600;color:var(--vp-paper);line-height:1.2; letter-spacing:-.015em;max-width:24ch;} .vp .vp__cta-p{font-size:16px;color:var(--vp-body-dk);margin-top:16px;max-width:62ch;} .vp__cta-note{font-size:14px;color:var(--vp-muted-dk);margin-top:24px;} .vp__cta-note b{color:var(--vp-paper);font-weight:600;} @media(max-width:719px){ .vp .vp__h1{font-size:31px;} .vp .vp__h2,.vp .vp__cta-h{font-size:23px;} .vp__header{padding:52px 0 46px;} .vp__sec{padding:44px 0;} } @media(prefers-reduced-motion:reduce){.vp *{transition:none !important;}} /* ==================================================================== 2. SERVICE CATALOG — .vsv ==================================================================== */ /* Sage — Industrial Hygiene */ #vsv-ih{--c:#37795B;--c-dk:#5EA483;--c-txt:#37795B;} /* Sunset — Occupational Safety */ #vsv-sf{--c:#D2521A;--c-dk:#FB4F14;--c-txt:#B24512;} /* Gold — Training */ #vsv-tr{--c:#8A7310;--c-dk:#F0D53F;--c-txt:#8A7310;} /* Steel — OSHA citation priorities */ #vsv-ct{--c:#3B6EA5;--c-dk:#6D9CD1;--c-txt:#3B6EA5;} .vsv { --vsv-steel:#3B6EA5; --vsv-steel-dk:#6D9CD1; --vsv-graphite:#101418; --vsv-paper:#F6F5F2; --vsv-white:#FFFFFF; --vsv-rule:#E4E1D9; --vsv-rule-dk:#2A2E33; --vsv-body:#45443F; --vsv-body-dk:#B8B6AE; --vsv-muted:#6C6A64; --vsv-muted-dk:#8E8C84; --vsv-sans:Archivo,Helvetica,Arial,sans-serif; --vsv-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --vsv-max:880px; font-family:var(--vsv-sans); color:var(--vsv-body); background:var(--vsv-white); line-height:1.55; -webkit-font-smoothing:antialiased; } .vsv *,.vsv *::before,.vsv *::after{box-sizing:border-box;} .vsv p,.vsv h1,.vsv h2,.vsv h3,.vsv ul,.vsv ol{margin:0;} .vsv p{text-wrap:pretty;} .vsv__wrap{max-width:var(--vsv-max);margin:0 auto;padding:0 24px;} .vsv__eyebrow{font-family:var(--vsv-mono);font-size:11px;font-weight:500; letter-spacing:.14em;text-transform:uppercase;display:block;} /* ── dark page header ── */ .vsv__header{background:var(--vsv-graphite);color:var(--vsv-paper);padding:68px 0 60px;} .vsv__header .vsv__eyebrow{color:var(--c-dk);} .vsv .vsv__h1{font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-.02em; color:var(--vsv-paper);margin-top:18px;max-width:19ch;} .vsv .vsv__lede{font-size:17px;color:var(--vsv-body-dk);margin-top:22px;max-width:64ch;} .vsv .vsv__lede b{color:var(--vsv-paper);font-weight:600;} .vsv .vsv__topnote{font-size:14.5px;color:var(--vsv-body-dk);margin-top:16px;max-width:64ch;} .vsv .vsv__topnote a{color:var(--c-dk);font-weight:600;text-decoration:none;} .vsv .vsv__topnote a:hover{text-decoration:underline;} /* ── controls ── */ .vsv__controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap; padding:22px 0;border-bottom:2px solid var(--vsv-rule);margin-bottom:2px;} .vsv__count{font-family:var(--vsv-mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--vsv-muted);margin-right:auto;} .vsv__filter{font-family:var(--vsv-sans);font-size:14px;color:var(--vsv-graphite); border:1px solid var(--vsv-rule);background:var(--vsv-white);padding:9px 12px; min-width:230px;border-radius:0;} .vsv__filter:focus{outline:2px solid var(--c-txt);outline-offset:-1px;} .vsv__btn{appearance:none;border:1px solid var(--vsv-rule);background:var(--vsv-white); font-family:var(--vsv-sans);font-size:13px;font-weight:600;color:var(--vsv-graphite); padding:9px 14px;cursor:pointer;border-radius:0;} .vsv__btn:hover{background:var(--vsv-paper);} .vsv__btn:focus-visible{outline:2px solid var(--c-txt);outline-offset:-1px;} /* ── accordion item ── */ .vsv__item{border-bottom:1px solid var(--vsv-rule);} .vsv__item[hidden]{display:none;} .vsv__head{width:100%;appearance:none;background:none;border:0;border-radius:0; text-align:left;cursor:pointer;padding:19px 0;display:flex;gap:14px; align-items:baseline;font-family:var(--vsv-sans);} .vsv__head:hover .vsv__name{color:var(--c-txt);} .vsv__head:focus-visible{outline:2px solid var(--c-txt);outline-offset:2px;} .vsv__num{font-family:var(--vsv-mono);font-size:12px;color:var(--vsv-muted); flex:none;width:26px;padding-top:2px;} .vsv__name{font-size:17px;font-weight:600;color:var(--vsv-graphite); line-height:1.3;flex:1 1 auto;transition:color .15s linear;} .vsv__chev{flex:none;align-self:center;color:var(--c-txt); transition:transform .28s cubic-bezier(.4,0,.2,1);} .vsv__head[aria-expanded="true"] .vsv__chev{transform:rotate(180deg);} .vsv__head[aria-expanded="true"] .vsv__name{color:var(--c-txt);} /* ── THE MOTION ── 0fr -> 1fr on a grid row animates to the content's natural height without measuring it in JS and without a max-height guess that clips long panels. */ .vsv__panel{display:grid;grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1);} .vsv__head[aria-expanded="true"] + .vsv__panel{grid-template-rows:1fr;} .vsv__panel > .vsv__inner{overflow:hidden;min-height:0;} .vsv__body{padding:2px 0 26px 40px;max-width:68ch;} .vsv__body p{font-size:15px;} /* ── inside the panel ── */ .vsv__meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;} .vsv__code{font-family:var(--vsv-mono);font-size:11.5px;letter-spacing:.02em; color:var(--vsv-graphite);background:var(--vsv-paper); border-left:3px solid var(--c);padding:6px 10px;} .vsv__flag{font-family:var(--vsv-mono);font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--vsv-white);background:var(--c-txt); padding:7px 10px;} .vsv .vsv__failhead{font-family:var(--vsv-mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--vsv-muted);margin:20px 0 10px;} .vsv__fails{list-style:none;padding:0;} .vsv__fails li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;padding:6px 0;} .vsv__fails li svg{flex:none;margin-top:7px;color:var(--c-txt);} .vsv__xlink{display:inline-flex;gap:11px;align-items:flex-start;font-size:14.5px; font-weight:600;color:var(--c-txt);text-decoration:none;} .vsv__xlink:hover{text-decoration:underline;} .vsv__xlink svg{flex:none;margin-top:6px;} .vsv__rel{border:1px solid var(--vsv-rule);background:var(--vsv-paper); border-left:3px solid var(--c);padding:18px 20px;margin:34px 0 0;} .vsv .vsv__rel-h{font-family:var(--vsv-mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--vsv-muted);margin-bottom:8px;} .vsv .vsv__rel-p{font-size:14.5px;margin:0;} .vsv__rel a{color:var(--c-txt);font-weight:600;} /* ── CTA ── */ .vsv__cta{background:var(--vsv-graphite);margin-top:64px;padding:60px 0;} .vsv .vsv__cta-h{font-size:27px;font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--vsv-paper);} .vsv .vsv__cta-p{font-size:15px;color:var(--vsv-body-dk);margin-top:12px;max-width:56ch;} .vsv__cta-a{display:inline-block;margin-top:24px;padding:11px 18px;font-size:15px; font-weight:600;text-decoration:none;background:var(--c-dk);color:var(--vsv-graphite);} .vsv__cta-a:hover{background:var(--vsv-paper);} .vsv__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} .vsv .vsv__none{padding:34px 0;color:var(--vsv-muted);font-size:15px;} /* draft banner — REMOVE BEFORE PORTING */ .vsv .vsv__draft{font-family:var(--vsv-mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--vsv-white);background:var(--c-txt); padding:10px 24px;text-align:center;} @media (prefers-reduced-motion: reduce){ .vsv__panel{transition:none;} .vsv__chev{transition:none;} } @media (max-width:640px){ .vsv .vsv__h1{font-size:32px;} .vsv .vsv__cta-h{font-size:20px;} .vsv__header{padding:46px 0 42px;} .vsv__body{padding-left:0;} .vsv__filter{min-width:0;flex:1 1 100%;} } /* ── grouped, 2-column catalog list — added v13.6 ── Wraps .vsv__item rows under a buyer-question heading, laid out in two CSS columns so a 25-item catalog reads as a compact index instead of one long list. break-inside:avoid keeps an accordion row (collapsed OR expanded) from splitting across the column break. Requires nothing new from vantage-pages.js — catalog() finds .vsv__item via querySelectorAll regardless of nesting depth, so filter/expand-all/collapse-all and the accordion motion all work unchanged inside a group. */ .vsv__grp{margin-top:6px;} .vsv__grp:first-child{margin-top:0;} .vsv__grp-h{padding:30px 0 2px;} .vsv .vsv__grp-q{font-size:19px;font-weight:600;letter-spacing:-.01em; color:var(--vsv-graphite);margin:0;} .vsv__grp-list{column-count:2;column-gap:44px;column-fill:balance;} .vsv__grp-list > .vsv__item{break-inside:avoid;-webkit-column-break-inside:avoid;} @media (max-width:760px){ .vsv__grp-list{column-count:1;} } /* ==================================================================== 2b. IH / SAFETY TOGGLE — .vtg (Both / Industrial Hygiene / Safety switch — Industrial Hygiene & Safety hub page only) — added v13.6 Same tested pattern as .vfr (Fractional toggle): a data-view attribute on the root, set by JS, drives which panel(s) show via plain CSS attribute selectors — no panel-hiding logic lives in JS. New namespace because .vfr is styled specifically for the Fractional page's two- column rate tables; this switch instead shows/hides two full, independent .vsv catalogs (each with its own header, controls, filter and grouped list) stacked in the page, not paired side-by-side columns. ==================================================================== */ .vtg__tabs{display:flex;gap:0;border-bottom:1px solid var(--vp-rule); flex-wrap:wrap;margin-top:8px;} .vtg__tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent; font-family:var(--vp-sans);font-size:15px;font-weight:600;color:var(--vp-muted); padding:12px 22px 11px;cursor:pointer;margin-bottom:-1px;} .vtg__tab:first-child{padding-left:0;} .vtg__tab:hover{color:var(--vp-graphite);} .vtg__tab:focus-visible{outline:2px solid var(--vp-accent);outline-offset:-2px;} .vtg__tab[aria-pressed="true"]{color:var(--vp-graphite);border-bottom-color:var(--vp-accent);} .vtg__panel{margin-top:0;} .vtg[data-view="ih"] .vtg__panel[data-disc="safety"]{display:none;} .vtg[data-view="safety"] .vtg__panel[data-disc="ih"]{display:none;} .vtg__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} /* ── plain-English glossary, 2-column — added v13.6, IH & Safety hub only. Reuses .vp tokens; lives directly in a .vp__sec, not inside .vsv/.vtg. */ .vp__gloss-p{font-size:15px;color:var(--vp-body);max-width:66ch;margin-top:14px;} .vp__gl{list-style:none;margin:26px 0 0;padding:0;display:grid; grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;} .vp__gl li{padding:0 0 22px;} .vp .vp__gl h4{font-size:15px;font-weight:600;color:var(--vp-graphite);margin:0 0 5px;} .vp .vp__gl p{font-size:14px;color:var(--vp-body);margin:0;text-wrap:pretty;} @media (max-width:719px){.vp__gl{grid-template-columns:1fr;}} /* ==================================================================== 3. FRACTIONAL FAQ — .vh ==================================================================== */ .vh { /* service hue — Industrial Hygiene & Safety */ --vh-steel: #3B6EA5; --vh-steel-on-dark: #6D9CD1; /* neutrals */ --vh-graphite: #101418; --vh-paper: #F6F5F2; --vh-rule: #E4E1D9; --vh-rule-dark: #2A2E33; --vh-body: #45443F; --vh-body-dark: #B8B6AE; --vh-muted: #6C6A64; --vh-muted-dark: #8E8C84; --vh-white: #FFFFFF; --vh-sans: Archivo, Helvetica, Arial, sans-serif; --vh-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --vh-max: 860px; font-family: var(--vh-sans); color: var(--vh-body); background: var(--vh-white); -webkit-font-smoothing: antialiased; line-height: 1.55; } .vh *, .vh *::before, .vh *::after { box-sizing: border-box; } .vh p, .vh h1, .vh h2, .vh h3, .vh ul, .vh ol, .vh table, .vh figure { margin: 0; } .vh p { text-wrap: pretty; } .vh a { color: var(--vh-steel); } .vh__wrap { max-width: var(--vh-max); margin: 0 auto; padding: 0 24px; } /* ── eyebrow ───────────────────────────────────────────── */ .vh__eyebrow { font-family: var(--vh-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } /* ── page header, dark band ────────────────────────────── */ .vh__header { background: var(--vh-graphite); color: var(--vh-paper); padding: 72px 0 64px; } .vh__header .vh__eyebrow { color: var(--vh-steel-on-dark); } .vh__h1 { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--vh-paper); margin-top: 20px; max-width: 17ch; } .vh__lede { font-size: 17px; color: var(--vh-body-dark); margin-top: 24px; max-width: 62ch; } .vh__lede + .vh__lede { margin-top: 14px; } /* ── section heading: mono eyebrow over 2px rule ───────── */ .vh__section { padding: 64px 0 0; } .vh__section-head { border-bottom: 2px solid var(--vh-rule); padding-bottom: 10px; margin-bottom: 40px; } .vh__section-head .vh__eyebrow { color: var(--vh-muted); } /* ── Q&A ───────────────────────────────────────────────── */ .vh__qa { border-top: 1px solid var(--vh-rule); padding: 32px 0; } .vh__qa:first-of-type { border-top: 0; padding-top: 0; } .vh__q { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--vh-graphite); margin-bottom: 14px; } .vh__a { font-size: 15px; } .vh__a + .vh__a { margin-top: 12px; } /* ── chevron bullets ───────────────────────────────────── */ .vh__list { list-style: none; padding: 0; margin-top: 16px; } .vh__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; padding: 7px 0; } .vh__list li svg { flex: none; margin-top: 8px; } /* ── tables ────────────────────────────────────────────── */ .vh__table-wrap { margin-top: 24px; overflow-x: auto; } .vh__table { width: 100%; border-collapse: collapse; font-size: 15px; } .vh__table th, .vh__table td { text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--vh-rule); vertical-align: top; } .vh__table th { font-family: var(--vh-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vh-muted); border-bottom: 2px solid var(--vh-rule); white-space: nowrap; } .vh__table thead th:first-child { padding-left: 0; } .vh__table td:last-child, .vh__table th:last-child { padding-right: 0; } .vh__num { font-family: var(--vh-mono); font-size: 14px; color: var(--vh-graphite); white-space: nowrap; } .vh__table tbody tr:last-child td { border-bottom: 2px solid var(--vh-rule); } .vh__mode { font-weight: 600; color: var(--vh-graphite); } /* ── disclaimer ────────────────────────────────────────── */ .vh__note { margin-top: 20px; padding: 16px 18px; background: var(--vh-paper); border-left: 3px solid var(--vh-steel); font-size: 13px; color: var(--vh-muted); } /* ── credential block ──────────────────────────────────── */ .vh__cred { margin-top: 20px; padding: 22px 24px; background: var(--vh-paper); border: 1px solid var(--vh-rule); } .vh__cred-name { font-family: var(--vh-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--vh-graphite); text-transform: uppercase; margin-bottom: 10px; } /* ── CTA strip, dark band ──────────────────────────────── */ .vh__cta { background: var(--vh-graphite); margin-top: 72px; padding: 64px 0; } .vh__cta-h { font-size: 27px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--vh-paper); } .vh__cta-p { font-size: 15px; color: var(--vh-body-dark); margin-top: 12px; max-width: 52ch; } .vh__btn { display: inline-block; margin-top: 26px; padding: 11px 18px; font-family: var(--vh-sans); font-size: 15px; font-weight: 600; text-decoration: none; background: var(--vh-steel-on-dark); color: var(--vh-graphite); border: 0; } .vh__btn:hover { background: var(--vh-paper); } /* ── role-scoping cards, "Who do you need?" (v13.8) ─────── */ .vh__roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 8px; border-top: 1px solid var(--vh-rule); } .vh__role { padding: 28px 22px 8px 0; border-right: 1px solid var(--vh-rule); } .vh__role:last-child { border-right: 0; } .vh__role-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--vh-graphite); margin-bottom: 10px; } .vh__role-lede { font-size: 14px; color: var(--vh-muted); } .vh__role .vh__list { margin-top: 14px; } .vh__role .vh__list li { font-size: 13.5px; padding: 6px 0; } @media (max-width: 760px) { .vh__roles { grid-template-columns: 1fr; border-top: 0; } .vh__role { padding: 24px 0 8px; border-right: 0; border-top: 1px solid var(--vh-rule); } .vh__role:first-child { border-top: 0; } } /* ── collapsible Q&A accordion, page-bottom FAQ (v13.8) ─── */ .vfaq { border-top: 1px solid var(--vh-rule); } .vfaq__item { border-bottom: 1px solid var(--vh-rule); } .vfaq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--vh-sans); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--vh-graphite); } .vfaq__q:hover { color: var(--vh-steel); } .vfaq__q:focus-visible { outline: 2px solid var(--vh-steel); outline-offset: 2px; } .vfaq__chev { flex: none; transition: transform .15s ease; color: var(--vh-muted); } .vfaq__q[aria-expanded="true"] .vfaq__chev { transform: rotate(180deg); } .vfaq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .18s ease; } .vfaq__q[aria-expanded="true"] + .vfaq__panel { grid-template-rows: 1fr; } .vfaq__inner { overflow: hidden; } .vfaq__a { font-size: 15px; padding-bottom: 22px; max-width: 68ch; } .vfaq__a + .vfaq__a { margin-top: 10px; } @media (prefers-reduced-motion: reduce) { .vfaq__panel, .vfaq__chev { transition: none; } } /* ── draft banner — REMOVE BEFORE PORTING ──────────────── */ .vh__draft { background: var(--vh-steel); color: var(--vh-white); font-family: var(--vh-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 24px; text-align: center; } @media (max-width: 640px) { .vh__h1 { font-size: 32px; } .vh__cta-h { font-size: 20px; } .vh__header { padding: 48px 0 44px; } .vh__section { padding-top: 48px; } } /* ==================================================================== 4. FRACTIONAL TOGGLE — .vfr ==================================================================== */ :root{ --vh-graphite:#101418; --vh-paper:#F6F5F2; --vh-rule:#2A2E33; --vh-body:#B8B6AE; --vh-muted:#8E8C84; --vh-steel:#6D9CD1; --vh-pine:#5EA483; --vh-sunset:#FB4F14; --vh-sans:'Archivo',Helvetica,Arial,sans-serif; --vh-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; } .vfr *,.vfr *::before,.vfr *::after{box-sizing:border-box;} .vfr{ font-family:var(--vh-sans); background:var(--vh-graphite); color:var(--vh-paper); padding:clamp(44px,5vw,72px) clamp(20px,5vw,56px) 80px; -webkit-font-smoothing:antialiased; line-height:1.55; } .vfr p,.vfr h2,.vfr h3,.vfr h4,.vfr ul,.vfr table{margin:0;} .vfr__wrap{max-width:1080px;margin:0 auto;} /* ── page head ─────────────────────────────────────────── */ .vfr__eyebrow{ font-family:var(--vh-mono);font-weight:500;font-size:11px;letter-spacing:.14em; text-transform:uppercase;display:block; } .vfr__head-eyebrow{ color:var(--vh-steel);padding-bottom:12px; border-bottom:1px solid var(--vh-rule);margin-bottom:20px; } .vfr__h2{font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.13;margin-bottom:14px;} .vfr__lede{font-size:17px;color:var(--vh-body);max-width:66ch;margin-bottom:30px;text-wrap:pretty;} .vfr__lede b{color:var(--vh-paper);font-weight:600;} /* ── segmented control ─────────────────────────────────── */ .vfr__tabs{display:flex;border-bottom:1px solid var(--vh-rule);flex-wrap:wrap;} .vfr__tab{ appearance:none;background:none;border:0;border-bottom:2px solid transparent; font-family:var(--vh-sans);font-size:15px;font-weight:600;color:var(--vh-muted); padding:12px 20px 11px;cursor:pointer;margin-bottom:-1px; display:inline-flex;align-items:center;gap:8px; transition:color .15s linear,border-color .15s linear; } .vfr__tab:first-child{padding-left:0;} .vfr__tab:hover{color:var(--vh-paper);} .vfr__tab:focus-visible{outline:2px solid var(--vh-steel);outline-offset:-2px;} .vfr__tab[aria-pressed="true"]{color:var(--vh-paper);border-bottom-color:var(--vh-steel);} .vfr__tab svg{opacity:0;transition:opacity .15s linear;flex:none;} .vfr__tab[aria-pressed="true"] svg{opacity:1;} /* ── two-column grid ───────────────────────────────────── */ .vfr__cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,56px);padding-top:34px;} .vfr[data-view="ih"] .vfr__cols, .vfr[data-view="safety"] .vfr__cols{grid-template-columns:1fr;max-width:70ch;} .vfr[data-view="ih"] .vfr__col[data-disc="safety"]{display:none;} .vfr[data-view="safety"] .vfr__col[data-disc="ih"]{display:none;} /* column accent — flat identifying swatch only */ .vfr__col{display:flex;flex-direction:column;border-top:3px solid var(--c);padding-top:20px;} .vfr__col[data-disc="ih"]{--c:var(--vh-pine);} .vfr__col[data-disc="safety"]{--c:var(--vh-sunset);} .vfr__col .vfr__eyebrow{color:var(--c);margin-bottom:12px;} .vfr__h3{font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.01em;margin-bottom:12px;} .vfr__col-lede{font-size:15px;color:var(--vh-body);margin-bottom:6px;text-wrap:pretty;} .vfr__col-lede b{color:var(--vh-paper);font-weight:600;} .vfr__grp{border-top:1px solid var(--vh-rule);margin-top:26px;padding-top:18px;} .vfr__grp-h{ font-family:var(--vh-mono);font-weight:500;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--vh-muted);margin-bottom:12px; } .vfr__list{list-style:none;padding:0;} .vfr__list li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--vh-body);padding:6px 0;} .vfr__list li svg{flex:none;margin-top:7px;color:var(--c);} .vfr__list b{color:var(--vh-paper);font-weight:600;} /* ── rate table, pinned to the bottom of each column ───── */ .vfr__spacer{flex:1 1 auto;min-height:22px;} .vfr__rates{border-top:1px solid var(--vh-rule);padding-top:18px;} .vfr__table{width:100%;border-collapse:collapse;} .vfr__table th{ font-family:var(--vh-mono);font-weight:500;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--vh-muted);text-align:left; padding:0 12px 9px 0;border-bottom:1px solid var(--vh-rule);white-space:nowrap; } .vfr__table td{ font-family:var(--vh-mono);font-size:13.5px;color:var(--vh-paper);text-align:left; padding:10px 12px 10px 0;border-bottom:1px solid var(--vh-rule);white-space:nowrap; } .vfr__table th:last-child,.vfr__table td:last-child{padding-right:0;} .vfr__table tbody tr:last-child td{border-bottom:0;} .vfr__table td.vfr__rate{color:var(--c);font-weight:500;} .vfr__link{ display:inline-flex;align-items:center;gap:8px;margin-top:18px; font-size:14px;font-weight:600;color:var(--c);text-decoration:none; } .vfr__link:hover{text-decoration:underline;} /* ── shared footer under the columns ───────────────────── */ .vfr__foot{border-top:1px solid var(--vh-rule);margin-top:38px;padding-top:22px;} .vfr__fine{font-size:13px;color:var(--vh-muted);max-width:78ch;text-wrap:pretty;} .vfr__fine + .vfr__fine{margin-top:10px;} .vfr__fine em{color:var(--vh-body);font-style:normal;} .vfr__cta{ display:inline-block;margin-top:26px;padding:11px 18px; font-size:15px;font-weight:600;text-decoration:none; background:var(--vh-steel);color:var(--vh-graphite); } .vfr__cta:hover{background:var(--vh-paper);} .vfr__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} /* ── draft banner — REMOVE BEFORE PORTING ──────────────── */ .vfr__draft{ font-family:var(--vh-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--vh-graphite);background:var(--vh-steel);padding:9px 16px;margin-bottom:34px; } @media (max-width:900px){ .vfr__cols{grid-template-columns:1fr;gap:0;} .vfr__col{margin-top:30px;} .vfr__col:first-child{margin-top:0;} } /* ==================================================================== 5. FORMS — .vf ==================================================================== */ /* ============================================================ VANTAGE FORMS — scoped to .vf only. Nothing leaks site-wide. BRAND-SPEC: Archivo + IBM Plex Mono, square corners, 1px hairlines, no shadows, no pills. ============================================================ */ .vf{--vf-accent:#3B6EA5;--vf-graphite:#101418;--vf-paper:#F6F5F2;--vf-rule:#E4E1D9; --vf-body:#45443F;--vf-muted:#6C6A64;--vf-req:#8C3038; font-family:Archivo,Helvetica,Arial,sans-serif;color:var(--vf-body); max-width:720px;font-size:15px;line-height:1.55} .vf--network{--vf-accent:#37795B} /* labels */ .vf label,.vf .wp-block-jetpack-label{display:block;font-weight:500;font-size:15px; color:var(--vf-graphite);margin:0 0 6px} .vf .required,.vf .wp-block-jetpack-label .required{color:var(--vf-req);font-weight:600} /* text, email, tel, number, textarea */ .vf input[type=text],.vf input[type=email],.vf input[type=tel], .vf input[type=number],.vf input[type=url],.vf textarea{ width:100%;box-sizing:border-box;border:1px solid var(--vf-rule);border-radius:0; background:#fff;padding:11px 12px;font:400 15px/1.4 Archivo,Helvetica,Arial,sans-serif; color:var(--vf-graphite);transition:border-color .12s ease} .vf input:focus,.vf textarea:focus{outline:2px solid var(--vf-accent);outline-offset:-1px; border-color:var(--vf-accent)} .vf textarea{min-height:132px;resize:vertical} /* field spacing */ .vf .wp-block-jetpack-contact-form>div,.vf>div{margin-bottom:22px} /* ---- radio / checkbox CARDS ---- */ .vf .wp-block-jetpack-options{list-style:none;margin:0;padding:0;display:grid;gap:8px} @media(min-width:768px){ .vf .wp-block-jetpack-options{grid-template-columns:1fr 1fr} .vf .wp-block-jetpack-options:has(li:nth-child(-n+4):last-child){grid-template-columns:1fr} } .vf .wp-block-jetpack-options li{margin:0;padding:0;list-style:none} .vf .wp-block-jetpack-options li label, .vf .wp-block-jetpack-options li>*{display:flex;align-items:center;gap:10px; min-height:52px;box-sizing:border-box;padding:12px 14px;margin:0; border:1px solid var(--vf-rule);background:#fff;cursor:pointer;font-weight:400; color:var(--vf-body);transition:border-color .12s ease,background .12s ease} .vf .wp-block-jetpack-options li label:hover{border-color:var(--vf-accent);background:var(--vf-paper)} .vf .wp-block-jetpack-options input[type=radio], .vf .wp-block-jetpack-options input[type=checkbox]{flex:0 0 auto;width:16px;height:16px; accent-color:var(--vf-accent);margin:0} .vf .wp-block-jetpack-options li:has(input:checked) label, .vf .wp-block-jetpack-options li label:has(input:checked){ border-color:var(--vf-accent);box-shadow:inset 0 0 0 1px var(--vf-accent); background:var(--vf-paper)} .vf .wp-block-jetpack-options li:focus-within label{outline:2px solid var(--vf-accent); outline-offset:-1px} /* single checkbox (per diem, consent) */ .vf .wp-block-jetpack-contact-form>div:has(>input[type=checkbox]) label{ display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 14px; border:1px solid var(--vf-rule);background:#fff;cursor:pointer} /* file dropzone */ .vf .wp-block-jetpack-dropzone{border:1px dashed var(--vf-rule);background:var(--vf-paper); padding:22px 16px;text-align:center;border-radius:0} .vf .wp-block-jetpack-dropzone p{margin:0;color:var(--vf-muted);font-size:14px} /* helper / legend / note lines */ .vf__legend{font:500 11px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em; text-transform:uppercase;color:var(--vf-req);margin:0 0 20px;padding-bottom:10px; border-bottom:2px solid var(--vf-rule)} .vf__help{margin:-14px 0 22px;font-size:13px;color:var(--vf-muted)} .vf__note{margin:10px 0 0;font-size:13px;color:var(--vf-muted);line-height:1.5} .vf__urgent{margin:-8px 0 22px;padding:12px 14px;background:var(--vf-paper); border-left:3px solid var(--vf-accent);font-size:14px;color:var(--vf-graphite)} /* submit button — solid graphite on light, per BRAND-SPEC */ .vf .wp-block-button__link,.vf button[type=submit]{display:block;width:100%; background:var(--vf-graphite);color:var(--vf-paper);border:0;border-radius:0; padding:15px 18px;font:600 16px/1 Archivo,Helvetica,Arial,sans-serif;cursor:pointer; letter-spacing:.01em;transition:background .12s ease} .vf .wp-block-button__link:hover,.vf button[type=submit]:hover{background:var(--vf-accent)} .vf .wp-block-button{width:100%;margin-top:8px} /* cross-banner */ .vf-banner{max-width:720px;margin:0 0 28px;padding:14px 16px;border:1px solid var(--vf-rule); background:#F6F5F2;font:400 14px/1.5 Archivo,Helvetica,Arial,sans-serif;color:#45443F} .vf-banner a{color:#3B6EA5;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor} .vf-banner--network a{color:#37795B} @media(prefers-reduced-motion:reduce){.vf *{transition:none!important}} /* ==================================================================== 6. NAV AND FOOTER — .vnav / .vfoot ==================================================================== */ .vnav,.vfoot{ --vn-brand:#8C3038; --vn-brand-dk:#DE787B; --vn-graphite:#101418; --vn-paper:#F6F5F2; --vn-rule-dk:#2A2E33; --vn-body-dk:#B8B6AE; --vn-muted-dk:#8E8C84; --vn-sans:Archivo,Helvetica,Arial,sans-serif; --vn-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --vn-max:1180px; font-family:var(--vn-sans); line-height:1.55; -webkit-font-smoothing:antialiased; } .vnav *,.vfoot *,.vnav *::before,.vfoot *::before{box-sizing:border-box;} .vnav ul,.vfoot ul{list-style:none;margin:0;padding:0;} .vnav p,.vfoot p{margin:0;} .vn__wrap{max-width:var(--vn-max);margin:0 auto;padding:0 24px;} /* skip link */ .vn__skip{position:absolute;left:-9999px;top:0;background:var(--vn-paper);color:var(--vn-graphite); padding:11px 18px;font-weight:600;z-index:200;} .vn__skip:focus{left:0;} /* ── HEADER ── */ /* position:static explicitly overrides the parent theme's header{position: sticky;top:0} (vantage.css line 69/275/389/668) — .vnav has higher specificity than the parent's bare `header` selector, but only for properties it actually declares. Leaving `position` unset here would let the parent's sticky rule fall straight through. */ .vnav{background:var(--vn-graphite);color:var(--vn-paper); border-bottom:1px solid var(--vn-rule-dk);position:static;} .vn__bar{display:flex;align-items:center;gap:24px;min-height:76px;} .vn__brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none;margin-right:auto;} .vn__wm{display:block;font-size:21px;font-weight:700;letter-spacing:.02em;color:var(--vn-paper);line-height:1;} .vn__desc{display:block;font-size:9px;font-weight:500;letter-spacing:.2em; color:var(--vn-brand-dk);margin-top:5px;line-height:1;} .vn__brand:focus-visible{outline:2px solid var(--vn-brand-dk);outline-offset:4px;} .vn__menu{display:flex;align-items:center;gap:2px;} .vn__menu a{display:block;font-size:14px;font-weight:500;color:var(--vn-body-dk); text-decoration:none;padding:9px 11px;border:1px solid transparent;transition:color .12s linear;} .vn__menu a:hover{color:var(--vn-paper);} .vn__menu a:focus-visible{outline:2px solid var(--vn-brand-dk);outline-offset:-1px;} .vn__menu a[aria-current="page"]{color:var(--vn-paper);border-bottom-color:var(--vn-brand-dk);} .vn__cta{flex:none;display:inline-block;font-size:14px;font-weight:600; background:var(--vn-brand-dk);color:var(--vn-graphite);text-decoration:none; padding:11px 17px;border:1px solid transparent;transition:background .12s linear;} .vn__cta:hover{background:var(--vn-paper);} .vn__cta:focus-visible{outline:2px solid var(--vn-paper);outline-offset:2px;} .vn__toggle{display:none;appearance:none;background:none;border:1px solid var(--vn-rule-dk); color:var(--vn-paper);font-family:var(--vn-sans);font-size:13px;font-weight:600; padding:10px 14px;cursor:pointer;border-radius:0;align-items:center;gap:9px;} .vn__toggle:hover{border-color:var(--vn-brand-dk);} .vn__toggle:focus-visible{outline:2px solid var(--vn-brand-dk);outline-offset:2px;} .vn__bars{display:block;width:16px;height:2px;background:currentColor;position:relative;} .vn__bars::before,.vn__bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;} .vn__bars::before{top:-5px;} .vn__bars::after{top:5px;} .vn__toggle[aria-expanded="true"] .vn__bars{background:transparent;} .vn__toggle[aria-expanded="true"] .vn__bars::before{top:0;transform:rotate(45deg);} .vn__toggle[aria-expanded="true"] .vn__bars::after{top:0;transform:rotate(-45deg);} @media(max-width:1023px){ .vn__toggle{display:inline-flex;} .vn__menu,.vn__bar .vn__cta{display:none;} .vn__panel[data-open="true"] .vn__menu{display:flex;flex-direction:column;align-items:stretch;gap:0;} .vn__panel[data-open="true"] .vn__cta{display:block;text-align:center;margin-top:14px;} .vn__panel[data-open="true"]{display:block;padding:8px 0 24px;border-top:1px solid var(--vn-rule-dk);} .vn__panel{display:none;} .vn__menu a{padding:14px 0;border-bottom:1px solid var(--vn-rule-dk);font-size:16px;} .vn__menu a[aria-current="page"]{border-bottom-color:var(--vn-brand-dk);} } /* ── FOOTER ── */ .vfoot{background:var(--vn-graphite);color:var(--vn-body-dk);padding:56px 0 30px;} .vfoot__top{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:44px; padding-bottom:34px;border-bottom:1px solid var(--vn-rule-dk);} .vfoot__wm{display:block;font-size:19px;font-weight:700;letter-spacing:.02em;color:var(--vn-paper);line-height:1;} .vfoot__desc{display:block;font-size:9px;font-weight:500;letter-spacing:.2em; color:var(--vn-brand-dk);margin-top:5px;line-height:1;} .vfoot__blurb{font-size:14px;margin-top:18px;max-width:40ch;color:var(--vn-body-dk);} .vfoot__h{font-family:var(--vn-mono);font-size:10px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--vn-muted-dk);display:block;margin-bottom:15px;} .vfoot li{margin-bottom:9px;} .vfoot a{color:var(--vn-body-dk);text-decoration:none;font-size:14px;} .vfoot a:hover{color:var(--vn-brand-dk);} .vfoot a:focus-visible{outline:2px solid var(--vn-brand-dk);outline-offset:2px;} .vfoot__strong a{color:var(--vn-paper);font-weight:500;} .vfoot__bot{display:flex;flex-wrap:wrap;gap:10px 30px;padding-top:24px; font-size:12.5px;color:var(--vn-muted-dk);} .vfoot__bot p{max-width:62ch;} .vfoot__legal{margin-left:auto;} @media(max-width:859px){ .vfoot__top{grid-template-columns:1fr;gap:34px;} .vfoot__legal{margin-left:0;} } @media(prefers-reduced-motion:reduce){.vnav *,.vfoot *{transition:none !important;}} /* ==================================================================== HOME HERO — .vhr (Direction B, two-column, graphite panel, no photo) Lives inside .vp.vp--brand and inherits its --vp-* tokens; see the v13.5 note at the top of this file for what changed from the draft. ==================================================================== */ .vhr *,.vhr *::before,.vhr *::after{box-sizing:border-box;} .vhr{position:relative;isolation:isolate;overflow:hidden;-webkit-font-smoothing:antialiased;} .vhr-b{ min-height:min(680px,88vh); display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); background:var(--vp-graphite); } .vhr__panel{position:relative;z-index:2;display:flex;align-items:center; padding:clamp(48px,6vw,88px) clamp(24px,4.4vw,68px);background:var(--vp-graphite);} .vhr__media{background:var(--vp-graphite);border-left:1px solid var(--vp-rule-dk);} .vhr__inner{max-width:560px;width:100%;} .vhr__eyebrow{font-family:var(--vp-mono);font-weight:500;font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--vp-accent-dk); margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--vp-rule-dk);display:block;} .vhr__h1{font-family:var(--vp-sans);font-weight:600;font-size:clamp(27px,3.3vw,40px); line-height:1.1;letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance;color:var(--vp-paper);} .vhr__sub{font-weight:400;font-size:17px;line-height:1.55;color:var(--vp-body-dk); max-width:52ch;margin:0 0 28px;text-wrap:pretty;} .vhr__sub strong{color:var(--vp-paper);font-weight:500;} .vhr__ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;} .vhr__cta{display:inline-flex;align-items:center;gap:10px;background:var(--vp-accent-dk); color:var(--vp-graphite);font-family:var(--vp-sans);font-size:15px;font-weight:600; padding:11px 18px;border:0;text-decoration:none;transition:background .15s linear;} .vhr__cta:hover{background:var(--vp-paper);} .vhr__cta:focus-visible{outline:2px solid var(--vp-paper);outline-offset:3px;} .vhr__cta svg{flex:none;} .vhr__link{font-size:15px;font-weight:500;color:var(--vp-accent-dk);text-decoration:none; border-bottom:1px solid var(--vp-rule-dk);padding-bottom:2px;transition:border-color .15s linear;} .vhr__link:hover{border-bottom-color:var(--vp-accent-dk);} .vhr__link:focus-visible{outline:2px solid var(--vp-accent-dk);outline-offset:3px;} .vhr__ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:0; margin:32px 0 0;border-top:1px solid var(--vp-rule-dk);} .vhr__rung{padding:16px 20px 0 0;} .vhr__rung h3{margin:0 0 6px;font-family:var(--vp-sans);font-size:15px;font-weight:600; color:var(--vp-paper);letter-spacing:-.01em;display:flex;align-items:center;gap:8px;} .vhr__rung p{margin:0;font-size:13px;line-height:1.5;color:var(--vp-muted-dk);text-wrap:pretty;} .vhr__mode{display:block;font-family:var(--vp-mono);font-weight:500;font-size:10px; letter-spacing:.14em;text-transform:uppercase;color:var(--vp-accent-dk);margin:0 0 8px;} /* No photo: collapse the reserved media column and center the copy panel. Reverts automatically the moment .vhr__media gets real content. */ .vhr-b:has(.vhr__media:empty){grid-template-columns:1fr;} .vhr-b:has(.vhr__media:empty) .vhr__media{display:none;} .vhr-b:has(.vhr__media:empty) .vhr__panel{justify-content:center;} .vhr-b:has(.vhr__media:empty) .vhr__inner{max-width:640px;} @media (max-width:960px){ .vhr-b{grid-template-columns:1fr;} .vhr__media{display:none;} .vhr__inner{max-width:none;} } @media (max-width:640px){ .vhr-b{min-height:auto;} .vhr__ladder{grid-template-columns:1fr;} .vhr__rung{padding:16px 0 0;} .vhr__rung + .vhr__rung{border-top:1px solid var(--vp-rule-dk);} .vhr__cta{width:100%;justify-content:center;} } @media (prefers-reduced-motion:reduce){.vhr__cta,.vhr__link{transition:none;}} /* ==================================================================== DARK SITE + HUE REASSIGNMENT — appended 2026-08-18 Decisions #51 (brand = Steel) and #52 (IH/Safety split, four services). This whole block is additive. To revert the site to light, delete from this comment to the end of the file. Nothing above it was changed. Contrast audited in-browser: every text node on Home, Contact, Staffing, the catalogs and the forms clears WCAG AA on graphite. ==================================================================== */ /* ---- 1. grounds ---- */ html,body{background:#101418;} .vp{--vp-white:#101418;--vp-body:#B8B6AE;--vp-muted:#8E8C84;--vp-rule:#2A2E33;} .vsv{--vsv-white:#101418;--vsv-body:#B8B6AE;--vsv-muted:#8E8C84;--vsv-rule:#2A2E33; --vsv-steel:#5EA483;--vsv-steel-dk:#5EA483;} /* ---- 2. hues. Every service uses its LIFTED variant on graphite. ---- */ .vp,.vp.vp--brand{--vp-accent:#6D9CD1;--vp-accent-dk:#6D9CD1;} /* Vantage — Steel #51 */ .vp.vp--ihs,.vp.vp--ih{--vp-accent:#5EA483;--vp-accent-dk:#5EA483;} /* Industrial Hygiene — Pine #52 */ .vp.vp--safety{--vp-accent:#FB4F14;--vp-accent-dk:#FB4F14;} /* Occupational Safety — Sunset #52 */ .vp.vp--staffing{--vp-accent:#A67FC2;--vp-accent-dk:#A67FC2;} /* Staffing — Plum */ .vp.vp--training{--vp-accent:#F0D53F;--vp-accent-dk:#F0D53F;} /* Training — Gold, usable at last */ .vp.vp--talent{--vp-accent:#DE787B;--vp-accent-dk:#DE787B;} /* Talent Network — Oxblood #52 */ .vp .vp__row--ih{--row-hue:#5EA483;} .vp .vp__row--safety{--row-hue:#FB4F14;} .vp .vp__row--staffing{--row-hue:#A67FC2;} .vp .vp__row--training{--row-hue:#F0D53F;} #vsv-ih{--c:#5EA483;--c-dk:#5EA483;--c-txt:#5EA483;} #vsv-sf{--c:#FB4F14;--c-dk:#FB4F14;--c-txt:#FB4F14;} #vsv-tr{--c:#F0D53F;--c-dk:#F0D53F;--c-txt:#F0D53F;} /* ---- 3. text that was graphite-on-white is now paper-on-graphite ---- */ .vp .vp__h2,.vp .vp__h3,.vp .vp__p b,.vp .vp__p strong,.vp__row dt,.vp__list li b, .vp__terms b,.vp__totals div b,.vp__def b,.vp .vp__gl h4, .vsv__name,.vsv .vsv__grp-q,.vsv__filter,.vsv__btn,.vsv__code,.vsv__cta-a{color:#F6F5F2;} /* ---- 4. panels that were Paper are now one step up from the ground ---- */ .vp__totals,.vp__def,.vp__stat,.vsv__code,.vsv__rel{background:#171B20;} .vsv__filter,.vsv__btn{background:#171B20;border-color:#2A2E33;} .vsv__btn:hover,.vsv__cta-a:hover{background:#22262B;} /* ---- 5. dark bands no longer contrast with a white body, so separate them with a hairline instead ---- */ .vp__header,.vsv__header{border-bottom:1px solid #2A2E33;} .vp__cta,.vsv__cta{border-top:1px solid #2A2E33;} .vp__sec{border-bottom-color:#2A2E33;} /* ---- 6. forms. This is where dark mode usually breaks: Jetpack fields default to light styling and go white-on-white. ---- */ .vf{--vf-accent:#6D9CD1;--vf-req:#6D9CD1;--vf-graphite:#F6F5F2;--vf-paper:#171B20;--vf-rule:#2A2E33;} .vf,.vf p,.vf li,.vf .vf-banner{color:#B8B6AE;} .vf h1,.vf h2,.vf h3,.vf label,.vf legend{color:#F6F5F2;} .vf__help,.vf__note,.vf__legend,.vf small{color:#B8B6AE;} .vf input,.vf select,.vf textarea, form.wp-block-jetpack-contact-form input,form.wp-block-jetpack-contact-form select, form.wp-block-jetpack-contact-form textarea, .wp-block-jetpack-contact-form input[type=text],.wp-block-jetpack-contact-form input[type=email], .wp-block-jetpack-contact-form input[type=tel],.wp-block-jetpack-contact-form input[type=number], .wp-block-jetpack-contact-form input[type=date],.wp-block-jetpack-contact-form input[type=url], .wp-block-jetpack-contact-form textarea,.wp-block-jetpack-contact-form select{ background:#171B20 !important;color:#F6F5F2 !important;border:1px solid #3A3F46 !important;} .wp-block-jetpack-contact-form ::placeholder{color:#8E8C84 !important;} .wp-block-jetpack-contact-form label,.wp-block-jetpack-contact-form .grunion-field-label{color:#F6F5F2 !important;} .wp-block-button__link,.wp-block-jetpack-button button,button[type=submit]{ background:#6D9CD1 !important;color:#101418 !important;border-color:#6D9CD1 !important;} /* ---- 7. print. A graphite site prints as a solid black page. ---- */ @media print{ html,body,.vp,.vsv{background:#FFFFFF !important;color:#101418 !important;} .vp__header,.vp__cta,.vsv__header,.vsv__cta{background:#FFFFFF !important;color:#101418 !important;} .vp .vp__h1,.vp .vp__h2,.vp .vp__h3,.vsv .vsv__h1,.vsv__name{color:#101418 !important;} .vp__totals,.vp__def,.vp__stat,.vsv__code,.vsv__rel{background:#F6F5F2 !important;} } /* ---- 8. page-local stylesheets. Contact (315) and Talent Network (314) each ship their own inline