/* =========================================================
BULKX SHIPPING INSTRUCTIONS PAGE
Page-specific styles only.
Required HTML:
Load after the shared stylesheet:
========================================================= */
/* ---------------------------------------------------------
Shared page-width container
--------------------------------------------------------- */
.shipping-page .shell {
width: min(1400px, calc(100% - 40px));
margin-inline: auto;
}
.shipping-page .jump-grid,
.shipping-page .section-head,
.shipping-page .content-grid,
.shipping-page .stat-row {
width: 100%;
min-width: 0;
}
.shipping-page .jump-card,
.shipping-page .info-card,
.shipping-page .section-copy,
.shipping-page .photo {
min-width: 0;
}
/* ---------------------------------------------------------
Shipping hero
--------------------------------------------------------- */
.shipping-page .hero {
position: relative;
min-height: 460px;
overflow: hidden;
display: flex;
align-items: center;
padding: 45px 6.5vw 55px;
color: var(--white);
background:
radial-gradient(
circle at 74% 48%,
rgba(255, 255, 255, 0.75),
rgba(0, 168, 255, 0.55) 18%,
transparent 36%
),
linear-gradient(135deg, #063a92 0%, #005ec1 54%, #0bb7ff 100%);
border-bottom: 6px solid var(--yellow);
}
.shipping-page .hero-pattern {
position: absolute;
inset: 0;
opacity: 0.16;
background-image:
radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 10px, transparent 11px),
linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
background-size: 110px 110px, 100% 100%;
pointer-events: none;
}
.shipping-page .hero-rays {
position: absolute;
width: 900px;
height: 900px;
right: -110px;
top: -230px;
opacity: 0.28;
border-radius: 50%;
background: repeating-conic-gradient(
from 0deg,
rgba(255, 255, 255, 0.8) 0deg 2deg,
transparent 2deg 8deg
);
pointer-events: none;
}
.shipping-page .yellow-swoosh {
position: absolute;
z-index: 3;
right: -8vw;
bottom: -58px;
width: 70vw;
height: 150px;
border-radius: 100% 0 0 0;
background: var(--yellow);
box-shadow: 0 -10px 0 var(--white);
transform: rotate(-8deg);
pointer-events: none;
}
.shipping-page .hero .shell {
position: relative;
z-index: 4;
}
.shipping-page .hero .eyebrow {
display: inline-flex;
align-items: center;
padding: 7px 12px;
margin-bottom: 18px;
border: 3px solid var(--yellow);
border-radius: 999px;
background: rgba(2, 14, 38, 0.65);
color: #d9efff;
font-size: 0.82rem;
font-weight: 950;
letter-spacing: 0.09em;
text-transform: uppercase;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}
.shipping-page .hero h1 {
width: min(100%, 900px);
max-width: 100%;
margin: 0 0 18px;
color: var(--white);
font-size: 1rem;
line-height: 1;
letter-spacing: -1px;
font-style: italic;
font-weight: 950;
text-transform: uppercase;
transform: none;
}
.shipping-page .hero h1 > span {
display: block;
width: fit-content;
max-width: 100%;
white-space: nowrap;
}
.shipping-page .hero h1 > .hero-white {
color: var(--white);
font-size: clamp(42px, 7.2vw, 92px);
line-height: 0.92;
-webkit-text-stroke: 0;
paint-order: normal;
text-shadow:
-2px -2px 0 #002b67,
0 -2px 0 #002b67,
2px -2px 0 #002b67,
-2px 0 0 #002b67,
2px 0 0 #002b67,
-2px 2px 0 #002b67,
0 2px 0 #002b67,
2px 2px 0 #002b67,
4px 5px 0 #001b40;
}
.shipping-page .hero h1 > span:last-child {
color: var(--yellow);
font-size: clamp(30px, 5.7vw, 72px);
line-height: 0.92;
-webkit-text-stroke: 0;
paint-order: normal;
text-shadow:
-2px -2px 0 #0b54aa,
0 -2px 0 #0b54aa,
2px -2px 0 #0b54aa,
-2px 0 0 #0b54aa,
2px 0 0 #0b54aa,
-2px 2px 0 #0b54aa,
0 2px 0 #0b54aa,
2px 2px 0 #0b54aa,
4px 5px 0 #001b40;
}
.shipping-page .hero p {
max-width: 650px;
margin: 0;
color: var(--white);
font-size: clamp(18px, 2vw, 26px);
line-height: 1.24;
font-weight: 850;
text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
}
.shipping-page .hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.shipping-page .hero-actions .button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 0 28px;
border: 5px solid var(--yellow);
border-radius: 20px;
color: var(--white);
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
font-weight: 950;
box-shadow: 0 5px 0 rgba(0, 0, 0, 0.28);
transition: transform 0.2s ease;
}
.shipping-page .hero-actions .button:hover {
transform: translateY(-2px);
}
.shipping-page .hero-actions .button-primary {
background: linear-gradient(180deg, #ff2020, #c90000);
}
.shipping-page .hero-actions .button-secondary {
background: rgba(2, 14, 38, 0.72);
}
/* ---------------------------------------------------------
Approval alert
--------------------------------------------------------- */
.shipping-page .important {
position: relative;
z-index: 5;
margin-top: -30px;
}
.shipping-page .alert {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
padding: 20px;
border: 4px solid var(--yellow);
border-left: 8px solid var(--red);
border-radius: 22px;
background: var(--white);
box-shadow: 0 8px 0 rgba(0, 0, 0, 0.1);
}
.shipping-page .alert-icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 3px solid #111;
border-radius: 50%;
background: linear-gradient(180deg, #ff2d2d, #c90000);
color: var(--white);
font-size: 1.2rem;
font-weight: 950;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}
.shipping-page .alert strong {
display: block;
margin-bottom: 3px;
color: var(--navy);
}
/* ---------------------------------------------------------
Section jump cards
--------------------------------------------------------- */
.shipping-page .jump {
padding: 58px 0 14px;
}
.shipping-page .jump h2,
.shipping-page .section h2 {
margin-top: 0;
color: var(--navy);
line-height: 1.12;
text-transform: uppercase;
font-style: italic;
font-weight: 950;
letter-spacing: -2px;
text-shadow: 3px 4px 0 rgba(0, 45, 105, 0.14);
}
.shipping-page .jump h2 {
margin-bottom: 8px;
font-size: clamp(1.8rem, 4vw, 2.8rem);
}
.shipping-page .jump > p {
margin-top: 0;
color: var(--muted);
}
.shipping-page .jump-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin-top: 24px;
}
.shipping-page .jump-card {
position: relative;
overflow: hidden;
min-height: 210px;
padding: 22px;
border: 5px solid var(--card-border);
border-radius: 22px;
background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
color: inherit;
text-decoration: none;
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.shipping-page .jump-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 45px rgba(2, 11, 30, 0.12);
}
.shipping-page .jump-card::after,
.shipping-page .info-card::after {
content: "";
position: absolute;
width: 150px;
height: 150px;
right: -40px;
bottom: -65px;
z-index: 0;
border: 10px solid #111;
border-radius: 50%;
opacity: 0.055;
background:
radial-gradient(circle at 50% 50%, #fff 0 14px, #111 15px 25px, transparent 26px),
linear-gradient(to bottom, #e20d0d 0 44%, #111 44% 56%, #fff 56% 100%);
transform: rotate(-8deg);
}
.shipping-page .jump-card > *,
.shipping-page .info-card > * {
position: relative;
z-index: 1;
}
.shipping-page .jump-number {
position: relative;
display: grid;
place-items: center;
width: 54px;
height: 54px;
margin-bottom: 30px;
border: 4px solid var(--yellow);
border-radius: 50%;
background: linear-gradient(180deg, var(--blue), var(--deep-blue));
color: var(--yellow);
font-weight: 950;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}
.shipping-page .jump-number i {
position: absolute;
width: 22px;
height: 22px;
right: -8px;
bottom: -7px;
border: 2px solid #111;
border-radius: 50%;
background:
radial-gradient(circle at center, #fff 0 3px, #111 4px 6px, transparent 7px),
linear-gradient(to bottom, #e20d0d 0 45%, #111 45% 55%, #fff 55% 100%);
}
.shipping-page .jump-card h3 {
margin: 0 0 7px;
color: var(--navy);
font-size: 1.15rem;
line-height: 1.12;
text-transform: uppercase;
font-style: italic;
font-weight: 950;
}
.shipping-page .jump-card p {
margin: 0;
color: var(--muted);
font-size: 0.92rem;
}
.shipping-page .jump-arrow {
position: absolute;
right: 20px;
bottom: 16px;
color: var(--blue);
font-size: 1.4rem;
font-weight: 900;
}
/* ---------------------------------------------------------
Shipping content sections
--------------------------------------------------------- */
.shipping-page main > .shell {
padding-top: 34px;
padding-bottom: 80px;
}
.shipping-page .section {
scroll-margin-top: 24px;
margin-top: 34px;
overflow: hidden;
border: 4px solid var(--yellow);
border-radius: 28px;
background: var(--surface);
box-shadow: 0 8px 0 rgba(0, 0, 0, 0.09);
}
.shipping-page .section-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
min-height: 350px;
background:
radial-gradient(circle at 14% 30%, rgba(42, 117, 187, 0.08), transparent 20rem),
var(--white);
}
.shipping-page .section-copy {
align-self: center;
padding: clamp(28px, 5vw, 58px);
}
.shipping-page .kicker {
margin-bottom: 9px;
color: var(--red);
font-size: 0.9rem;
font-style: italic;
font-weight: 950;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.shipping-page .section h2 {
margin-bottom: 14px;
font-size: clamp(2rem, 5vw, 3.5rem);
text-align: center;
}
.shipping-page .section-lead {
margin: 0;
color: var(--muted);
font-size: 1.04rem;
}
.shipping-page .photo {
position: relative;
display: grid;
place-items: center;
min-height: 320px;
overflow: hidden;
padding: 30px;
border-left: 5px solid var(--yellow);
background:
radial-gradient(circle at 68% 30%, rgba(255, 255, 255, 0.46), transparent 12rem),
repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.1) 0deg 3deg, transparent 3deg 10deg),
linear-gradient(135deg, #063a92, #0bb7ff);
color: var(--white);
}
.shipping-page .photo::before {
content: "";
position: absolute;
inset: 20px;
border: 3px dashed rgba(255, 255, 255, 0.62);
border-radius: 22px;
}
.shipping-page .photo-symbol {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 98px;
height: 98px;
margin-inline: auto;
border: 4px solid var(--yellow);
border-radius: 50%;
background: rgba(2, 14, 38, 0.72);
font-size: 2.8rem;
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
}
.shipping-page .photo-label {
position: relative;
z-index: 1;
margin-top: 16px;
text-align: center;
text-transform: uppercase;
font-style: italic;
font-size: 1.08rem;
font-weight: 850;
text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
}
.shipping-page .photo small {
display: block;
margin-top: 5px;
color: #d9ecff;
font-weight: 500;
}
.shipping-page .content {
padding: 0 clamp(24px, 5vw, 58px) clamp(28px, 5vw, 58px);
}
.shipping-page .content-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.section-photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---------------------------------------------------------
Information cards and notes
--------------------------------------------------------- */
.shipping-page .info-card {
position: relative;
overflow: hidden;
padding: 22px;
border: 3px solid rgba(42, 117, 187, 0.15);
border-radius: 20px;
background: linear-gradient(180deg, #ffffff, #f8fbff);
}
.shipping-page .info-card h3 {
margin: 0 0 10px;
color: var(--navy);
font-size: 1.14rem;
line-height: 1.12;
text-transform: uppercase;
font-style: italic;
font-weight: 950;
}
.shipping-page .info-card p:last-child,
.shipping-page .info-card ul:last-child,
.shipping-page .info-card ol:last-child {
margin-bottom: 0;
}
.shipping-page .info-card li::marker {
color: var(--red);
}
.shipping-page .stat-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 20px 0;
}
.shipping-page .stat {
padding: 18px;
border: 4px solid var(--yellow);
border-radius: 18px;
background:
radial-gradient(circle at 50% 0%, rgba(255, 203, 5, 0.14), transparent 58%),
linear-gradient(180deg, #ffffff, #f5f8fc);
color: var(--ink);
text-align: center;
box-shadow:
0 6px 0 rgba(0, 0, 0, 0.12),
0 12px 24px rgba(4, 27, 63, 0.11);
}
.shipping-page .stat b {
display: block;
color: #000;
font-size: 1.45rem;
font-style: italic;
}
.shipping-page .stat span {
color: #52647b;
font-size: 0.82rem;
font-weight: 800;
}
.shipping-page .note {
margin-top: 18px;
padding: 16px 18px;
border: 3px solid var(--yellow);
border-left: 7px solid var(--red);
border-radius: 12px;
background: #fff9dc;
font-weight: 700;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.06);
}
/* ---------------------------------------------------------
Expandable instruction blocks
--------------------------------------------------------- */
.shipping-page details {
margin-top: 18px;
border: 3px solid #d8e4f2;
border-radius: 20px;
background: var(--white);
box-shadow: 0 5px 0 rgba(0, 0, 0, 0.05);
}
.shipping-page summary {
cursor: pointer;
padding: 18px 20px;
color: var(--navy);
font-style: italic;
font-weight: 950;
text-transform: uppercase;
list-style: none;
}
.shipping-page summary::-webkit-details-marker {
display: none;
}
.shipping-page summary::after {
content: "+";
float: right;
color: var(--blue);
font-size: 1.35rem;
}
.shipping-page details[open] summary::after {
content: "−";
}
.shipping-page .details-body {
padding: 0 20px 20px;
color: var(--ink);
}
/* ---------------------------------------------------------
Checklists and shipping address
--------------------------------------------------------- */
.shipping-page .checklist {
display: grid;
gap: 10px;
padding: 0;
list-style: none;
}
.shipping-page .checklist li {
position: relative;
margin: 0;
padding: 13px 14px 13px 44px;
border: 3px solid rgba(42, 117, 187, 0.12);
border-radius: 16px;
background: linear-gradient(180deg, #ffffff, #f8fbff);
font-weight: 700;
}
.shipping-page .checklist li::before {
content: "✓";
position: absolute;
left: 14px;
top: 12px;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border: 2px solid #111;
border-radius: 50%;
background: linear-gradient(180deg, #ff2d2d, #c90000);
color: var(--white);
font-weight: 950;
}
.shipping-page .address {
padding: 22px;
border: 5px solid var(--yellow);
border-radius: 20px;
background: linear-gradient(180deg, #082859, #031633);
color: var(--white);
text-transform: uppercase;
font-weight: 850;
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
}
.shipping-page .address strong {
color: var(--yellow);
}
/* ---------------------------------------------------------
Shipping-page responsive layout
--------------------------------------------------------- */
@media (max-width: 900px) {
.shipping-page .jump-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.shipping-page .section-head {
grid-template-columns: 1fr;
}
.shipping-page .photo {
min-height: 260px;
border-left: 0;
border-top: 5px solid var(--yellow);
}
}
@media (max-width: 720px) {
.shipping-page .hero {
min-height: 430px;
padding: 54px 5vw 90px;
}
.shipping-page .hero h1 > .hero-white {
font-size: clamp(38px, 11vw, 54px);
}
.shipping-page .hero h1 > span:last-child {
font-size: clamp(28px, 8.2vw, 40px);
}
.shipping-page .jump-card {
min-height: 175px;
}
}
@media (max-width: 640px) {
.shipping-page .shell {
width: min(100% - 24px, 1400px);
}
.shipping-page .jump-grid,
.shipping-page .content-grid,
.shipping-page .stat-row {
grid-template-columns: 1fr;
}
.shipping-page .section {
border-radius: 18px;
}
.shipping-page .section-copy,
.shipping-page .content {
padding-left: 22px;
padding-right: 22px;
}
.shipping-page .alert {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------
Submission CTA and shipping method checklist cards
--------------------------------------------------------- */
.submission-cta-wrap {
position: relative;
overflow: hidden;
margin-top: 56px;
background:
radial-gradient(circle at 12% 24%, rgba(255, 203, 5, 0.18) 0 3px, transparent 4px),
radial-gradient(circle at 88% 68%, rgba(255, 255, 255, 0.14) 0 3px, transparent 4px),
linear-gradient(135deg, var(--navy, #041b3f), var(--deep-blue, #004b9b));
border-top: 8px solid var(--yellow, #ffcb05);
color: #fff;
}
.submission-cta-wrap::before {
content: "";
position: absolute;
width: 220px;
height: 220px;
right: -70px;
top: -82px;
border: 18px solid rgba(255, 203, 5, 0.2);
border-radius: 50%;
}
.submission-cta-wrap::after {
content: "";
position: absolute;
width: 150px;
height: 150px;
left: -58px;
bottom: -72px;
border-radius: 50%;
background: rgba(7, 153, 241, 0.2);
}
.submission-cta {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 36px;
padding-top: 58px;
padding-bottom: 58px;
}
.submission-cta .kicker {
color: var(--yellow, #ffcb05);
margin-bottom: 8px;
}
.submission-cta h2 {
margin: 0 0 10px;
color: #fff;
font-size: clamp(2rem, 4vw, 3.35rem);
line-height: 1.05;
}
.submission-cta p {
max-width: 720px;
margin: 0;
color: rgba(255, 255, 255, 0.86);
font-size: 1.05rem;
}
.submission-cta .quote-btn {
flex: 0 0 auto;
text-align: center;
white-space: nowrap;
}
@media (max-width: 860px) {
.submission-cta {
grid-template-columns: 1fr;
text-align: center;
}
.submission-cta p {
margin-inline: auto;
}
.submission-cta .quote-btn {
justify-self: center;
}
}
/* Shipping method checklist cards */
.shipping-checklist-groups {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
margin-top: 8px;
}
.shipping-checklist-card {
position: relative;
overflow: hidden;
padding: 26px;
border: 1px solid var(--border-blue, #d8e4f2);
border-radius: 20px;
background: var(--surface, #fff);
box-shadow: 0 14px 34px rgba(4, 27, 63, 0.08);
}
.shipping-checklist-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 6px;
background: var(--blue, #0799f1);
}
.shipping-checklist-card.pallet::before {
background: var(--yellow, #ffcb05);
}
.shipping-checklist-card h3 {
margin: 0 0 6px;
color: var(--navy, #041b3f);
font-size: 1.35rem;
}
.shipping-checklist-card > p {
margin: 0 0 18px;
color: var(--muted, #637083);
}
.shipping-checklist-card .checklist {
margin: 0;
}
.shipping-checklist-card .checklist li:last-child {
margin-bottom: 0;
}
@media (max-width: 760px) {
.shipping-checklist-groups {
grid-template-columns: 1fr;
}
}
.shipping-page .spaced-card {
margin-top: 18px;
}
/* =========================================================
MOBILE OVERFLOW FIX
========================================================= */
@media (max-width: 650px) {
/* Keep the shipping page inside the phone viewport */
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.shipping-page {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
/* Mobile header */
.shipping-page .nav {
width: 100%;
max-width: 100%;
gap: 18px;
padding: 18px 16px;
}
.shipping-page .nav-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
max-width: 100%;
gap: 14px 12px;
}
.shipping-page .nav-links a {
min-width: 0;
font-size: 14px;
line-height: 1.15;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
}
/* Put the fifth navigation item across the full bottom row */
.shipping-page .nav-links a:last-child {
grid-column: 1 / -1;
}
/* Header contact button */
.shipping-page .nav > .quote-btn {
width: 100%;
max-width: 100%;
white-space: normal;
text-align: center;
}
/* Bottom submission section */
.shipping-page .submission-cta {
width: 100%;
max-width: 100%;
padding: 44px 0;
}
.shipping-page .submission-cta .quote-btn {
width: 100%;
max-width: 100%;
min-width: 0;
padding: 14px 18px;
white-space: normal;
line-height: 1.15;
text-align: center;
}
.shipping-page .submission-cta h2,
.shipping-page .submission-cta p {
max-width: 100%;
overflow-wrap: anywhere;
}
}