/*
* CHANGE LOG
* File: /var/www/html/prohrhq.com/static/css/prohrhq_public.css
* Purpose: Public ProHRHQ design system (Hoffman Reports, reference hub,
* training, PEO transition, future public surfaces).
* Separate from afh_main.css (legacy sidebar brochure) and
* switchboard.css (sister-site qplex/petal pattern).
* Used by: templates/base_public.html
* Version History:
* 2026-05-20 v1.1 - Add hero / lede / card-h3 / card-h2 / card-title-link /
* meta-line-after-grade / improvement-lede classes.
* Moves inline styles out of templates/index.html,
* carriers.html, carriers/wheeler-machinery-co-ut.html,
* training/index.html into named classes per the
* no-inline-CSS regression rule.
* 2026-05-20 v1.0 - Initial public design system per grounding doc §14.
* Navy/slate/white/muted-blue accent. No dashboard
* clutter, no fake urgency, no truck-brochure cliches.
*/
:root {
--color-bg: #ffffff;
--color-bg-alt: #f6f8fb;
--color-text: #1f2a44; /* navy-slate */
--color-text-mute: #4a5872;
--color-rule: #d9dee8;
--color-rule-soft: #eaeef4;
--color-accent: #1f4d8a; /* muted blue */
--color-accent-soft: #e6eef9;
--color-grade-a: #2f6b3c; /* muted green */
--color-grade-warn:#a86a14;
--color-link: #1f4d8a;
--color-link-hover:#13325b;
--maxw-content: min(85vw, 1400px);
--maxw-prose: 720px;
--radius: 6px;
--shadow-soft: 0 1px 2px rgba(31,42,68,0.06), 0 1px 0 rgba(31,42,68,0.04);
--font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
--font-sans: "Barlow Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.55;
}
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-link-hover); }
h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 600; color: var(--color-text); line-height: 1.25; margin: 1.5rem 0 0.75rem; letter-spacing: 0.01em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; border-bottom: 1px solid var(--color-rule); padding-bottom: 0.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-mute); }
p { margin: 0 0 1rem; }
.container { max-width: var(--maxw-content); margin: 0 auto; padding: 0 1.25rem; }
.prose { max-width: var(--maxw-prose); }
/* ---- HEADER ---- */
.ph-header { background: var(--color-bg); border-bottom: 1px solid var(--color-rule); }
.ph-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.25rem; max-width: var(--maxw-content); margin: 0 auto; gap: 1.5rem; flex-wrap: wrap; }
.ph-brand { font-family: var(--font-sans); font-weight: 700; font-size: 1.4rem; color: var(--color-text); text-decoration: none; letter-spacing: 0.02em; }
.ph-brand:hover { color: var(--color-text); }
.ph-brand-tag { font-family: var(--font-sans); font-weight: 400; font-size: 0.85rem; color: var(--color-text-mute); margin-left: 0.5rem; }
.ph-nav { display: flex; gap: 1.3rem; font-family: var(--font-sans); font-size: 1rem; }
.ph-nav a { color: var(--color-text); text-decoration: none; }
.ph-nav a:hover { color: var(--color-link); text-decoration: underline; }
/* ---- BREADCRUMBS ---- */
.ph-crumbs { font-family: var(--font-sans); font-size: 0.9rem; color: var(--color-text-mute); padding: 0.9rem 0 0.4rem; }
.ph-crumbs a { color: var(--color-text-mute); text-decoration: none; }
.ph-crumbs a:hover { color: var(--color-link); text-decoration: underline; }
.ph-crumbs .sep { margin: 0 0.4rem; opacity: 0.5; }
/* ---- HOFFMAN REPORT COMPONENTS ---- */
.ph-card { background: var(--color-bg); border: 1px solid var(--color-rule); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin: 1.25rem 0; box-shadow: var(--shadow-soft); }
.ph-card-tight { padding: 0.9rem 1.1rem; }
.ph-section-label { font-family: var(--font-sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-mute); margin-bottom: 0.3rem; }
.ph-identity { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.ph-identity-main { flex: 1 1 380px; min-width: 280px; }
.ph-identity-side { flex: 0 1 280px; }
.ph-identity h1 { margin: 0.1rem 0 0.5rem; }
.ph-meta-line { font-size: 0.95rem; color: var(--color-text-mute); margin: 0.15rem 0; }
.ph-meta-line strong { color: var(--color-text); font-weight: 600; }
.ph-grade { font-family: var(--font-sans); display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0.7rem; border-radius: var(--radius); background: #e6f0e8; color: var(--color-grade-a); font-weight: 600; }
.ph-grade-letter { font-size: 1.5rem; line-height: 1; }
.ph-grade-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ph-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.85rem; margin: 1rem 0 0.5rem; }
.ph-metric { background: var(--color-bg-alt); border: 1px solid var(--color-rule-soft); border-radius: var(--radius); padding: 0.85rem 1rem; }
.ph-metric-num { font-family: var(--font-sans); font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--color-text); }
.ph-metric-lbl { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-mute); margin-top: 0.2rem; }
table.ph-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: 0.95rem; }
.ph-table th, .ph-table td { padding: 0.55rem 0.7rem; text-align: left; border-bottom: 1px solid var(--color-rule-soft); }
.ph-table thead th { font-family: var(--font-sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-mute); background: var(--color-bg-alt); border-bottom: 1px solid var(--color-rule); }
.ph-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ph-table td.flag-no { color: var(--color-text-mute); }
.ph-callout { background: var(--color-accent-soft); border-left: 3px solid var(--color-accent); padding: 0.85rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1rem 0; font-size: 0.95rem; }
.ph-disclaimer { font-size: 0.85rem; color: var(--color-text-mute); border-top: 1px solid var(--color-rule-soft); padding-top: 0.75rem; margin-top: 1rem; }
.ph-takeaways { padding-left: 1.2rem; }
.ph-takeaways li { margin: 0.4rem 0; }
.ph-improvement { background: var(--color-bg-alt); border: 1px solid var(--color-rule-soft); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1.5rem 0; }
.ph-improvement h3 { margin-top: 0; }
.ph-improvement ul { list-style: none; padding: 0; margin: 0; }
.ph-improvement li { padding: 0.4rem 0; border-bottom: 1px dashed var(--color-rule-soft); }
.ph-improvement li:last-child { border-bottom: 0; }
.ph-context-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.5rem; margin: 0.75rem 0; }
.ph-context-links a { display: block; padding: 0.55rem 0.8rem; border: 1px solid var(--color-rule); border-radius: var(--radius); text-decoration: none; color: var(--color-text); font-size: 0.92rem; background: var(--color-bg); }
.ph-context-links a:hover { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-link); }
.ph-claim { background: var(--color-bg-alt); border-left: 3px solid var(--color-text-mute); padding: 1rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5rem 0; }
.ph-claim h3 { margin-top: 0; }
/* ---- FOOTER ---- */
.ph-footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-rule); margin-top: 3rem; padding: 2.2rem 0 1.5rem; color: var(--color-text-mute); }
.ph-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem 2rem; max-width: var(--maxw-content); margin: 0 auto; padding: 0 1.25rem; }
.ph-footer h4 { color: var(--color-text); margin: 0 0 0.6rem; font-size: 0.85rem; }
.ph-footer ul { list-style: none; padding: 0; margin: 0; }
.ph-footer li { padding: 0.18rem 0; font-size: 0.92rem; }
.ph-footer a { color: var(--color-text-mute); text-decoration: none; }
.ph-footer a:hover { color: var(--color-link); text-decoration: underline; }
.ph-footer-base { max-width: var(--maxw-content); margin: 1.5rem auto 0; padding: 1rem 1.25rem 0; border-top: 1px solid var(--color-rule); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between; }
/* ---- PRINT ---- */
@media print {
.ph-header, .ph-footer, .ph-claim { display: none; }
body { color: #000; }
.ph-card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
a { color: #000; text-decoration: none; }
}
/* ---- MOBILE ---- */
@media (max-width: 720px) {
.ph-nav { width: 100%; gap: 1rem; flex-wrap: wrap; font-size: 0.95rem; }
.ph-identity-side { flex-basis: 100%; }
h1 { font-size: 1.6rem; }
}
/* ---- HOMEPAGE / HERO ---- */
.ph-hero { padding: 1.5rem 0 0.5rem; }
.ph-hero h1 { max-width: 720px; font-size: 2.25rem; }
.ph-lede { font-size: 1.1rem; margin-top: 1rem; }
/* ---- CARD VARIANTS / INNER SPACING ---- */
/* h3 sitting directly under a .ph-section-label tightens to it. */
.ph-card h3 { margin-top: 0.2rem; }
/* h2 inside a .ph-card acts as a tile title, not a section ruler. */
.ph-card h2 { border-bottom: none; margin-top: 0; }
/* Title-as-link inside a card inherits color and drops the underline; hover restores accent. */
.ph-card-title-link { text-decoration: none; color: inherit; }
.ph-card-title-link:hover { color: var(--color-link); text-decoration: underline; }
/* ---- META-LINE SPACING ---- */
/* When a meta-line follows the grade pill, give it breathing room. */
.ph-grade + .ph-meta-line { margin-top: 0.6rem; }
/* ---- IMPROVEMENT BLOCK LEDE ---- */
/* The disclaimer-styled lede inside .ph-improvement is a sub-header, not a footer. */
.ph-improvement > .ph-disclaimer:first-of-type {
border-top: none;
padding-top: 0;
margin-top: 0;
}
/* ============================================================
Carrier directory landing (/carriers) — v3.0 manifest-backed
============================================================ */
.ph-filters {
margin: 1.5em 0;
display: flex;
flex-wrap: wrap;
gap: 0.75em;
align-items: end;
}
.ph-filters label {
display: flex;
flex-direction: column;
font-size: 0.85em;
}
.ph-filters input,
.ph-filters select {
padding: 0.4em;
}
.ph-filters input[name="state"] {
width: 5em;
}
.ph-filters button {
padding: 0.5em 1.2em;
}
.ph-filters .ph-filter-clear {
font-size: 0.85em;
}
.ph-catalog-row {
padding: 0.75em 0;
border-bottom: 1px solid #e5e5e5;
}
.ph-catalog-row-inner {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1em;
flex-wrap: wrap;
}
.ph-catalog-main {
flex: 1;
min-width: 220px;
}
.ph-catalog-sub {
font-size: 0.85em;
color: #555;
}
.ph-catalog-meta {
font-size: 0.85em;
white-space: nowrap;
}
.ph-catalog-meta strong {
font-weight: bold;
}
.ph-catalog-only {
color: #888;
font-style: italic;
margin-left: 0.5em;
}
/* ============================================================
Six-gear hub on /carriers (v3.2)
============================================================ */
.ph-gear-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1em;
margin: 1.5em 0 2em;
}
.ph-gear-card {
border: 1px solid #d6d8db;
border-radius: 4px;
padding: 1.1em 1.2em;
background: #fff;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.ph-gear-card:hover {
border-color: #1a2b4a;
box-shadow: 0 2px 8px rgba(26, 43, 74, 0.08);
text-decoration: none;
}
.ph-gear-num {
font-size: 0.75em;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #777;
margin-bottom: 0.3em;
}
.ph-gear-title {
font-size: 1.15em;
font-weight: 600;
color: #1a2b4a;
margin: 0 0 0.4em;
}
.ph-gear-text {
font-size: 0.9em;
color: #444;
line-height: 1.4;
margin: 0 0 0.6em;
flex-grow: 1;
}
.ph-gear-cta {
font-size: 0.85em;
color: #1a2b4a;
font-weight: 500;
}
.ph-gear-card.ph-gear-disabled {
opacity: 0.6;
cursor: default;
pointer-events: none;
}
/* ============================================================ */
/* Image hero + service grid + detail hero — added 2026-05-24 */
/* See templates/index.html v4.0 and templates/boss-trucks.html */
/* ============================================================ */
/* Image hero (full-bleed at top of homepage) */
.ph-hero-image { display: block; margin: 0 0 1.5rem; padding: 0; width: 100%; background: var(--color-ink, #0a1628); }
.ph-hero-img { width: 100%; height: auto; display: block; }
/* Intro paragraph below image hero */
.ph-intro { margin: 1.5rem 0 2rem; }
.ph-intro .ph-lede { font-size: 1.1rem; line-height: 1.55; max-width: 64ch; }
/* Service grid — 7 cards, each card is a link with an image cover */
.ph-services { margin: 2.5rem 0 3rem; }
.ph-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
.ph-service { display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-rule); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-soft); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.ph-service:hover { box-shadow: 0 6px 20px rgba(10, 22, 40, 0.14); transform: translateY(-2px); }
.ph-service-cover { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-ink, #0a1628); }
.ph-service-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-service-body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.ph-service-body h3 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.ph-service-body p { margin: 0 0 0.75rem; flex: 1; font-size: 0.98rem; line-height: 1.5; }
.ph-service-cta { display: inline-block; margin-top: auto; font-family: var(--font-sans); font-size: 0.88rem; color: var(--color-link); text-transform: uppercase; letter-spacing: 0.04em; }
/* Detail-page hero (used by boss-trucks; reusable for other detail pages) */
.ph-detail-hero { display: block; margin: 0.5rem 0 1.5rem; width: 100%; background: var(--color-ink, #0a1628); border-radius: var(--radius); overflow: hidden; }
.ph-detail-hero-img { width: 100%; height: auto; display: block; }
/* Mobile: single column */
@media (max-width: 640px) {
.ph-service-grid { grid-template-columns: 1fr; gap: 1rem; }
.ph-service-body { padding: 0.9rem 1rem 1rem; }
}
/* ============================================================ */
/* Hero pitch + CTAs + ATS feature strip — added 2026-05-24 v5.0 */
/* See templates/index.html v5.0 ATS-led restructure */
/* ============================================================ */
/* The big H1 + lede + CTA row that sits below the hero image */
.ph-hero-pitch { margin: 2rem 0 2.5rem; max-width: 760px; }
.ph-hero-pitch h1 { margin: 0 0 0.75rem; font-size: 2.5rem; line-height: 1.1; }
.ph-hero-pitch-lede { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.5; color: var(--color-text); margin: 0 0 1.5rem; max-width: 60ch; }
.ph-cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.ph-cta-primary { display: inline-block; padding: 0.75rem 1.25rem; background: var(--color-link, #0d6efd); color: #fff; text-decoration: none; border-radius: var(--radius); font-family: var(--font-sans); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; transition: background 0.15s ease, transform 0.15s ease; }
.ph-cta-primary:hover { background: var(--color-link-hover, #0b5ed7); transform: translateY(-1px); color: #fff; }
.ph-cta-secondary { display: inline-block; padding: 0.75rem 1.25rem; background: transparent; color: var(--color-link); text-decoration: none; border: 1px solid var(--color-rule); border-radius: var(--radius); font-family: var(--font-sans); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; transition: border-color 0.15s ease, color 0.15s ease; }
.ph-cta-secondary:hover { border-color: var(--color-link); color: var(--color-link); }
/* Feature strip — six tight cards describing what's in the free ATS */
.ph-ats-features { margin: 2.5rem 0 3rem; padding: 1.5rem 1.5rem 1.75rem; background: var(--color-accent-soft, #f5f8ff); border-radius: var(--radius); border-left: 4px solid var(--color-link, #0d6efd); }
.ph-ats-features h2 { margin: 0 0 1.25rem; }
.ph-ats-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 1.5rem; }
.ph-ats-feature { padding: 0; }
.ph-ats-feature h3 { margin: 0 0 0.35rem; font-size: 1.05rem; color: var(--color-ink, #0a1628); }
.ph-ats-feature p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--color-text); }
/* Mobile: pitch headline scales down */
@media (max-width: 640px) {
.ph-hero-pitch h1 { font-size: 1.85rem; }
.ph-hero-pitch-lede { font-size: 1.05rem; }
.ph-cta-row { flex-direction: column; align-items: stretch; }
.ph-cta-primary, .ph-cta-secondary { text-align: center; }
.ph-ats-features { padding: 1.25rem 1rem 1.5rem; }
.ph-ats-features-grid { gap: 0.75rem 1rem; }
}
/* ============================================================ */
/* Plate stack — homepage vertical layout v5.1, 2026-05-24 */
/* One container; hero plate at top, service plates in order; */
/* all plates the same width (the container width). */
/* ============================================================ */
/* Generic plate — a full-bleed-of-container image with a deep navy
matte underneath to anchor the image when it loads. */
.ph-plate {
display: block;
margin: 2rem 0 1rem;
background: var(--color-ink, #0a1628);
border-radius: var(--radius);
overflow: hidden;
}
.ph-plate--hero { margin: 0.5rem 0 1.5rem; }
.ph-plate-img { display: block; width: 100%; height: auto; }
/* One service block — plate, then heading + prose + CTA below it. */
.ph-service-row { margin: 0 0 3rem; }
.ph-service-row .ph-plate { margin: 0 0 1rem; }
.ph-service-prose h3 { margin: 0.5rem 0 0.5rem; font-size: 1.5rem; line-height: 1.2; }
.ph-service-prose p { margin: 0 0 0.75rem; max-width: 64ch; font-size: 1rem; line-height: 1.55; }
.ph-service-prose .ph-service-cta {
display: inline-block;
font-family: var(--font-sans);
font-size: 0.92rem;
color: var(--color-link);
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
}
.ph-service-prose .ph-service-cta:hover { text-decoration: underline; }
/* Mobile: a touch less vertical pad between plate and prose */
@media (max-width: 640px) {
.ph-service-row { margin: 0 0 2.25rem; }
.ph-service-prose h3 { font-size: 1.3rem; }
}
/* ============================================================ */
/* /ats explainer page — video figures, 2026-05-24 */
/* ============================================================ */
.ats-video {
margin: 1.5rem 0 2rem;
background: var(--color-ink, #0a1628);
border-radius: var(--radius);
overflow: hidden;
}
.ats-video video {
display: block;
width: 100%;
height: auto;
max-height: 70vh;
background: #000;
}
.ats-video figcaption {
padding: 0.6rem 1rem 0.75rem;
font-size: 0.92rem;
color: #c7d0dd;
background: var(--color-ink, #0a1628);
font-family: var(--font-sans);
}