/* ============================================================
DOFT 2026 — deep-screen page layouts the spec called for and the refresh
layer never got to: C.3 My Truck two-card, D.3.2 post-load route/token
cards, D.5 trusted-drivers, E.1 /find-loads hero.
Page-scoped, and linked ONLY from the four JSPs that need it
(panel/MyTruckPage, shipper/loads/LoadPostPage, seo/ResultsPage,
seo/SearchPage) — refresh.css is the global layer, this is not.
KILL SWITCH: every rule starts at html[data-refresh], so nothing here can
reach the legacy prod skin even if the is served. The itself
is behind the same Constants gate as refresh.css, so on the legacy skin the
file is not even fetched.
============================================================ */
/* ============================================================
C.3 — My Truck (/panel/my-truck): the spec's TWO-CARD layout.
Card 1 "status & specs": status chip, actions, the Truck spec grid, carrier
+ vetting. Card 2 "location & lanes": the HERE map.
The card DOM is AJAX-rendered by GetTruckPageAjax.getTruckUI_Driver and we
cannot restructure it from here, so the split is done in CSS. The map lives
in the MIDDLE of the card (row 3 of 4), which is why it has to be lifted out
of the flow rather than floated or ordered:
.wrp -> left card: padding-right reserves the gutter,
.row (status chip) ::before paints the surface behind the flow
.row (features + actions)
hr
.row (specs + map)
.col-md-5 (specs) -> takes the whole row once its sibling leaves
.col-md-7 (map) -> position:absolute, top-right = card 2
.row.py-05 (carrier + vetting)
`hr + .row` is what identifies the specs/map row: the builder emits the
immediately before it (GetTruckPageAjax:317-320) and no other row in the card
follows an . Matching .col-md-7 instead would also catch CARRIER VETTING.
Card 2 is NOT just the map: BLOCK_map appends to the same col-md-7 a
"Current Location" .linfo-row (always, whenever there is a map — the row and
the .map-wrp share the `locationCoords != null` branch) plus up to three
Lane #1/#2/#3 rows, each ~29px and free to wrap in a 34%-wide card
(GetTruckPageAjax:532-676, truck.css:109). So its height is 348px + 1..4
wrapping rows, not 348px, and an out-of-flow box that tall WOULD hang below
.wrp and over whatever follows it (on MyTruckPage, the disclaimer) whenever
the left card is the shorter of the two. It is therefore BOUNDED rather than
predicted: max-height:100% pins it to .wrp's padding box — which is exactly
what `top:0` is measured from — and the lane list scrolls inside the card in
the rare case it does not fit. .wrp's min-height then only has to buy the
common case out of scrolling: 348 + 2 rows.
Guarded on `:has(.map-wrp)`: BLOCK_map only draws a map when the truck has
location coords, and a truck without them would otherwise get an almost-empty
card 2. Without a map the page keeps its current single-card layout — which
is also the fallback on a browser without :has().
DESKTOP ONLY (>=992px) — below that the two columns already stack, so the
page keeps its single .border-section card and only gets the mobile half of
the spec (map >=240px, full-width >=44px actions) at the bottom.
============================================================ */
@media (min-width: 992px) {
/* the page's outer chrome stops being the card — the two cards inside are */
html[data-refresh] .truck-page #load_block:has(.itruck .map-wrp) {
background: transparent !important; border: 0 !important; box-shadow: none !important;
padding: 0 !important;
}
html[data-refresh] .truck-page .itruck:has(.map-wrp) .wrp {
padding-right: calc(34% + 18px) !important; /* card 2 + gutter */
padding-left: 18px !important;
padding-top: 16px !important; padding-bottom: 16px !important;
min-height: 420px; /* map card + its 2 likeliest rows */
background: transparent;
margin-bottom: 0;
}
/* card 1 surface — absolute, so it cannot displace the builder's rows or take
part in their layout. z-index:-1 (not 0) for two reasons: a positioned
z-index:0 box paints OVER the in-flow content it is supposed to sit behind,
and raising the rows back with position:relative would make the specs row —
not .wrp — the containing block for card 2. .wrp's own background is cleared
just below, and .itruck (position:relative;z-index:1, truck.css:7) is the
stacking context that keeps -1 from escaping the card. */
html[data-refresh] .truck-page .itruck:has(.map-wrp) .wrp::before {
content: ""; position: absolute; z-index: -1;
top: 0; bottom: 0; left: 0; right: calc(34% + 18px);
background: var(--surface, #fff);
border: 1px solid var(--line, #e6e9ed);
border-radius: var(--radius-lg, 14px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,24,40,.06));
}
/* card 2 — location & lanes */
html[data-refresh] .truck-page .itruck:has(.map-wrp) .wrp > hr + .row > .col-md-7 {
position: absolute; top: 0; right: 0; width: 34%;
max-width: none !important;
/* the bound: 100% of .wrp's padding box, the same box top:0 anchors to, so
the card can reach .wrp's inner bottom edge and not one pixel further,
whatever the lane list does. Longhands, not `overflow: hidden auto` —
the two-value shorthand is dropped wholesale by Safari < 15, which would
silently take the bound away again. */
max-height: 100%; overflow-x: hidden; overflow-y: auto;
background: var(--surface, #fff);
border: 1px solid var(--line, #e6e9ed);
border-radius: var(--radius-lg, 14px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,24,40,.06));
padding: 14px !important;
}
/* the specs column is alone in its row now, so let it use the full width */
html[data-refresh] .truck-page .itruck:has(.map-wrp) .wrp > hr + .row > .col-md-5 {
flex: 1 1 auto !important; max-width: none !important;
}
/* spec: map >=320px on desktop. truck.css gives .map-wrp its own 10px padding
and a 290px height — the card supplies the padding now. */
html[data-refresh] .truck-page .itruck:has(.map-wrp) .wrp > hr + .row > .col-md-7 .map-wrp {
padding: 0 !important; height: 320px !important;
}
html[data-refresh] .truck-page .itruck:has(.map-wrp) .wrp > hr + .row > .col-md-7 .map,
html[data-refresh] .truck-page .itruck:has(.map-wrp) .wrp > hr + .row > .col-md-7 .map > div {
border-radius: var(--radius-md, 10px);
}
/* DARK MODE: three later-loading rules repaint the very boxes this layout
un-paints — refresh.css:777 (.wrp/.border-section), hotfix-20260725:233
(.itruck .wrp) and hotfix-20260727-darkmode:321 (.border-section) — all
with !important, and all after this file. Re-clear them here; the card
surfaces themselves are token-driven, so they follow the theme on their own. */
html[data-theme="dark"][data-refresh] .truck-page #load_block:has(.itruck .map-wrp),
html[data-theme="dark"][data-refresh] .truck-page .itruck:has(.map-wrp) .wrp {
background: transparent !important; background-color: transparent !important;
border-color: transparent !important; box-shadow: none !important;
}
/* the used to divide the single card's halves; inside card 1 it is the
rule under the actions row */
html[data-refresh] .truck-page .itruck:has(.map-wrp) .wrp > hr { margin: 10px 0 !important; }
}
/* mobile half of C.3 — the page keeps one card, but the map gets the spec's
240px floor and the actions stack full-width at a 44px target */
@media (max-width: 991px) {
html[data-refresh] .truck-page .itruck .map-wrp { height: 240px !important; }
html[data-refresh] .truck-page .itruck .truck-actions { display: flex; flex-direction: column; gap: 8px; }
html[data-refresh] .truck-page .itruck .truck-actions > * { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; }
}
/* ============================================================
D.3.2 — Post-load wizard, Route & Time step: the route cards.
(D.3.1 stepper and D.3.3 sticky footer already shipped in refresh.css.)
The step's DOM is server-rendered per lane point (LoadPostPage.jsp:203-293)
and cloned from #waypoint_template for injected stops, so everything here is
keyed off the classes both paths emit — an added waypoint gets the card for
free:
#wp-list
.wp-block one lane point
.row.distance "+ Add waypoint" | Distance (hidden on the first)
.row.waypoint the card itself
i.dd-icon.handle drag handle
label.wp-hdr "Pick Up" / "Drop Off" (middle stops show .wp-type instead)
.input-group > .lp-address + .pin-select
.asap-block, .input-group.date-time
Pick-up / drop-off dots key off DOM position, not the label text, because
CSS cannot match text — and position is exactly what load-post.js:571-589
uses when it re-labels after a drag (index 0 -> "Pick Up", last -> "Drop
Off"), so the dot and the label are driven by the same rule.
============================================================ */
html[data-refresh] .shipper-post-load-page .waypoint {
background: var(--surface, #fff);
border: 1px solid var(--line, #e6e9ed);
border-radius: var(--radius-lg, 14px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,24,40,.06)) !important; /* load-post.css:27 is !important */
padding: 10px 12px 8px 14px;
transition: border-color var(--dur-2, 180ms) var(--ease-out, ease), box-shadow var(--dur-2, 180ms) var(--ease-out, ease);
}
html[data-refresh] .shipper-post-load-page .waypoint:focus-within {
border-color: var(--red-600, #f12908);
box-shadow: var(--ring, 0 0 0 3px rgba(241,41,8,.18)) !important;
}
/* the stop's role, as a dot on its label */
html[data-refresh] .shipper-post-load-page .waypoint .wp-hdr::before {
content: ""; display: inline-block; vertical-align: middle;
width: 8px; height: 8px; border-radius: 50%;
margin: -2px 8px 0 0;
background: var(--gray-400, #98a2b3);
}
html[data-refresh] .shipper-post-load-page #wp-list > .wp-block:first-child .wp-hdr::before { background: var(--teal-500, #14b8a6); }
html[data-refresh] .shipper-post-load-page #wp-list > .wp-block:last-child .wp-hdr::before { background: var(--red-600, #f12908); }
/* pin button -> 44px token icon-button (it is an .input-group-text append, so
the group's own height keeps it aligned with the address field) */
html[data-refresh] .shipper-post-load-page .waypoint .pin-select {
min-width: 44px; justify-content: center;
color: var(--text-muted, #828a94);
transition: color var(--dur-1, 120ms) var(--ease-out, ease), background-color var(--dur-1, 120ms) var(--ease-out, ease);
}
html[data-refresh] .shipper-post-load-page .waypoint .pin-select:hover {
color: var(--red-600, #f12908); background: var(--gray-100, #f1f3f5);
}
/* drag handle -> 44px TALL hit area. Deliberately not 44px wide: .dd-icon is
position:absolute at left:0 with z-index:10000 (load-post.css:698-707), so
widening it would swallow clicks on the address label behind it. */
html[data-refresh] .shipper-post-load-page .waypoint .dd-icon {
display: flex; align-items: center; min-height: 44px;
padding: 0 10px; top: 12px;
}
/* ASAP on -> load-post.js:1583 disables every date/time field; dim the group so
the disabled state reads at a glance (spec D.3.2). Keyed off [disabled], not
the checkbox, because iCheck hides the real input. */
html[data-refresh] .shipper-post-load-page .waypoint .input-group.date-time:has(.form-control[disabled]) {
opacity: .5; pointer-events: none;
}
/* "+ Add waypoint" -> ghost button; Distance -> compact read-mostly chip */
html[data-refresh] .shipper-post-load-page .wp-block .distance a {
display: inline-flex; align-items: center; gap: 6px;
min-height: 36px; padding: 0 12px;
border: 1px solid var(--line, #e6e9ed); border-radius: var(--radius-pill, 999px);
color: var(--text-body, #414851); font-weight: var(--fw-semibold, 600); font-size: var(--fs-sm, .875rem);
text-decoration: none !important;
transition: border-color var(--dur-1, 120ms) var(--ease-out, ease), color var(--dur-1, 120ms) var(--ease-out, ease);
}
html[data-refresh] .shipper-post-load-page .wp-block .distance a:hover {
border-color: var(--red-600, #f12908); color: var(--red-600, #f12908);
}
/* .waypoint-dist is itself a .col-sm-6, so the chip treatment goes on its
CONTENTS — giving the column a pill background would paint half the row.
flex-wrap + a full-basis error list is NOT optional: the distance input is
`required` (LoadPostPage.jsp:222-225) and, unlike the address field above it,
has no data-parsley-errors-container, so Parsley injects its
`
` as a SIBLING of the input right here
(load-post.css:76 styles it at exactly that path). Without the wrap, "Enter
distance" becomes a third flex item on the input's own line and squeezes it.
Column gap only (`gap: 0 8px`) so the empty
Parsley leaves behind on a
valid field adds no row gap. */
html[data-refresh] .shipper-post-load-page .waypoint-dist {
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 8px;
}
html[data-refresh] .shipper-post-load-page .waypoint-dist .parsley-errors-list {
flex: 0 0 100%; margin: 4px 0 0; text-align: right; /* keeps refresh.css:887's 4px lead-in */
}
html[data-refresh] .shipper-post-load-page .waypoint-dist label {
margin: 0; color: var(--text-muted, #828a94); font-size: var(--fs-2xs, .75rem);
text-transform: uppercase; letter-spacing: .04em;
}
html[data-refresh] .shipper-post-load-page .waypoint-dist input {
border-radius: var(--radius-pill, 999px); text-align: right; font-variant-numeric: tabular-nums;
}
/* ============================================================
E.1 — /find-loads hero + search (seo/SearchPage.jsp, seo/ResultsPage.jsp).
The public acquisition funnel was the last surface still wearing the
pre-redesign skin: two stock-photo bands (bg.jpg on the search page,
bg_ct_1.jpg on the results page) with a 200-weight 50px headline and a
square Bootstrap input group.
Path A from the spec — the photo is set in CSS (findloads.css:1-9 / :527-535),
so it is replaced here rather than in the JSP, and reverting is deleting this
block. The SEO copy, links, form action, ids and the findloads.js
autocomplete wiring are untouched.
The suggestion list (.srch-results) is position:absolute INSIDE the input
group, so the pill deliberately gets no overflow:hidden — clipping the
autocomplete is the failure mode the spec calls out by name.
============================================================ */
/* --- E.1.1 hero: asphalt/ink gradient + restrained scarlet aurora --- */
html[data-refresh] :is(.srch-container, .find-promo-wrp) {
background-image:
radial-gradient(120% 140% at 80% -10%, rgba(241,41,8,.28), rgba(241,41,8,0) 55%),
radial-gradient(90% 120% at 0% 110%, rgba(22,184,166,.16), rgba(22,184,166,0) 50%),
linear-gradient(160deg, var(--ink, #0a0b0d) 0%, var(--ink-700, #2b2d33) 60%, var(--asphalt, #303030) 100%) !important;
background-color: var(--ink, #0a0b0d) !important;
padding: clamp(40px, 7vw, 96px) 12px clamp(36px, 6vw, 72px) !important;
}
/* --- E.1.2 headline + subhead --- */
html[data-refresh] .srch-block h1,
html[data-refresh] .find-promo h2 {
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-weight: var(--fw-semibold, 600);
font-size: clamp(32px, 5vw, 56px);
line-height: var(--lh-tight, 1.15);
letter-spacing: var(--ls-tight, -.02em);
color: #fff;
margin: 0 0 12px; padding-bottom: 0;
}
html[data-refresh] .find-promo {
font-size: clamp(15px, 1.6vw, 18px); line-height: var(--lh-body, 1.55);
color: rgba(255,255,255,.82); max-width: 56ch; width: auto;
}
html[data-refresh] .find-promo .emp { color: #fff; font-weight: var(--fw-bold, 700); }
html[data-refresh] .find-promo .btn-doft {
background: var(--red-600, #f12908); border-color: var(--red-600, #f12908);
border-radius: var(--radius-pill, 9999px); padding: 12px 30px; min-height: 48px;
font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: var(--fw-bold, 700);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,24,40,.06));
}
html[data-refresh] .find-promo .btn-doft:hover { background: var(--red-700, #c81f06); border-color: var(--red-700, #c81f06); }
/* --- E.1.3 one confident search: the input group becomes one pill ---
The pill is painted with --surface, not #fff: these are public pages and they
pick up data-theme="dark" from localStorage like every other page (header.jsp:148).
And the inner control's transparent background has to be !important —
refresh.css:754 repaints `:is(.form-control,input,textarea,select)` with
`background:var(--surface)!important` in dark, which would otherwise put a
near-black box inside the pill. */
html[data-refresh] .srch-block .input-group {
background: var(--surface, #fff); border: 1px solid var(--line, #e6e9ed);
border-radius: var(--radius-pill, 9999px); box-shadow: var(--shadow, 0 12px 28px -12px rgba(16,24,40,.18));
padding: 6px; align-items: center;
}
html[data-refresh] .srch-block .input-group > .form-control,
html[data-refresh] .srch-block .input-group > .form-control:not(:last-child) {
border: 0 !important; background: transparent !important; box-shadow: none;
font-size: 16px; /* 16px = no iOS zoom-on-focus */
padding: 14px 20px; height: auto; border-radius: var(--radius-pill, 9999px);
color: var(--text, #16181c);
}
html[data-refresh] .srch-block .input-group > .form-control::placeholder { color: var(--gray-400, #98a2b3); }
html[data-refresh] .srch-block .input-group > .form-control:focus { box-shadow: none; outline: none; }
html[data-refresh] .srch-block .input-group:focus-within { box-shadow: var(--ring, 0 0 0 3px rgba(241,41,8,.18)), var(--shadow, 0 12px 28px -12px rgba(16,24,40,.18)); border-color: var(--red-600, #f12908); }
html[data-refresh] .srch-block .input-group-append { margin-left: 0; align-items: center; }
html[data-refresh] .srch-block .btn-outline-secondary,
html[data-refresh] .srch-block .input-group > .input-group-append:not(:last-child) > .btn {
height: 52px !important; /* findloads.css:75 sets 65px !important */
width: auto; min-width: 52px; padding: 0 24px;
background: var(--red-600, #f12908); border: 0; color: #fff;
border-radius: var(--radius-pill, 9999px) !important;
font-size: 19px; display: inline-flex; align-items: center; justify-content: center;
transition: background var(--dur-2, 180ms) var(--ease-out, ease), transform var(--dur-1, 120ms) var(--ease-out, ease);
}
html[data-refresh] .srch-block .btn-outline-secondary:hover { background: var(--red-700, #c81f06); border-color: transparent; }
html[data-refresh] .srch-block .btn-outline-secondary:active { transform: translateY(1px); }
/* suggestions: never clipped, and no longer welded to the old 65px input */
html[data-refresh] .srch-block .srch-results {
top: calc(100% + 8px); border: 1px solid var(--line, #e6e9ed);
border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow, 0 12px 28px -12px rgba(16,24,40,.18));
background: var(--surface, #fff); opacity: 1;
}
html[data-refresh] .srch-block .srch-results li a { border-radius: var(--radius-sm, 6px); color: var(--text-body, #414851); }
html[data-refresh] .srch-block .srch-results li a:hover { background: var(--gray-100, #f1f3f5); color: var(--red-600, #f12908); }
/* --- E.1.4 SEO body: same copy, readable column and token type ---
--text (not --text-heading): --text-heading is NOT defined anywhere in the
token tree — every use of it in refresh.css rides on its light-mode fallback —
so `var(--text-heading, #10131a)` would have pinned these headings to
near-black in BOTH themes, and at (0,2,2) it out-specifies refresh.css:744
`html[data-theme="dark"] :is(h1..h6){color:var(--text)}` at (0,1,2). That is
#10131a on the #0c0e12 canvas: invisible. --text is real, and flips. */
html[data-refresh] :is(.states-block, .info-block) h2,
html[data-refresh] .find-results h1 {
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-weight: var(--fw-semibold, 600); letter-spacing: var(--ls-tight, -.02em);
color: var(--text, #10131a);
}
html[data-refresh] :is(.states-block h3, .find-results h3) {
font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: var(--fw-semibold, 600);
color: var(--text, #10131a);
}
html[data-refresh] .info-block { background-color: var(--surface-alt, #fafbfc); }
html[data-refresh] :is(.states-block, .info-block) a { color: var(--red-600, #f12908); }
html[data-refresh] :is(.states-block, .info-block) a:hover { color: var(--red-700, #c81f06); }
/* the equipment filter row on the results page -> token pills */
html[data-refresh] .eq-block a {
border-radius: var(--radius-pill, 9999px); border-color: var(--line, #e6e9ed);
color: var(--text-body, #414851); font-weight: var(--fw-semibold, 600);
min-height: 44px; display: inline-flex; align-items: center;
transition: background var(--dur-1, 120ms) var(--ease-out, ease), color var(--dur-1, 120ms) var(--ease-out, ease), border-color var(--dur-1, 120ms) var(--ease-out, ease);
}
html[data-refresh] .eq-block a:hover { background: var(--gray-100, #f1f3f5); color: var(--red-600, #f12908); border-color: var(--red-600, #f12908); font-weight: var(--fw-semibold, 600); }
html[data-refresh] .eq-block a.active,
html[data-refresh] .eq-block a.active:hover { background: var(--red-600, #f12908); border-color: var(--red-600, #f12908); color: #fff; }