/* ============================================================================
GTruckers Fleet — shared page backdrop
The film's true black (#000) run as a column down the whole page, flanked by
lighter "glass", with a thin brass lining where the two meet.
USE ON EVERY PAGE (existing and future):
1.
2. first element inside :
Keep page content inside --film-w; the black column (--void-w) is deliberately
wider, so text never lands exactly on the brass lining.
============================================================================ */
:root{
--void:#000000; /* the film's true black */
/* width of the content column: film, captions, About-Us grid all share this */
--film-w: min(86vw, 980px, 96svh);
/* the black column — wider than the content so edges never touch the text */
--void-w: min(calc(var(--film-w) + clamp(40px, 9vw, 132px)), 92vw);
}
.page-bg{
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
background:
/* sheen catching the light along the outer edges */
linear-gradient(105deg,
rgba(255,255,255,0.055) 0%,
rgba(255,255,255,0.014) 15%,
rgba(255,255,255,0) 33%,
rgba(255,255,255,0) 67%,
rgba(255,255,255,0.018) 85%,
rgba(255,255,255,0.060) 100%),
/* the glass flanks: a touch lighter and cooler than the column */
linear-gradient(180deg, #17171d 0%, #121216 46%, #0c0c10 100%);
}
.page-bg__column{
position:absolute;
top:0; bottom:0; left:50%;
width:var(--void-w);
transform:translateX(-50%);
background:var(--void);
box-shadow:0 0 70px 26px rgba(0,0,0,0.62); /* seats the column into the glass */
}
/* the thin brass linings between the glass and the black */
.page-bg__column::before,
.page-bg__column::after{
content:"";
position:absolute;
top:0; bottom:0;
width:1px;
background:linear-gradient(180deg,
rgba(184,147,90,0) 0%,
rgba(184,147,90,0.32) 16%,
rgba(184,147,90,0.14) 55%,
rgba(184,147,90,0) 100%);
}
.page-bg__column::before{ left:-1px; }
.page-bg__column::after{ right:-1px; }