/* =============================================================================
Relite Logistics — Design System : PREMIUM HOME LAYER (P1 Wave 2)
=============================================================================
The reference implementation for premium-ing a guest page. Linked ONLY from
Views/Home/Index.cshtml, so it can only restyle the homepage — no scoping guard
is needed because it never loads elsewhere. (Adopt the pattern per page: each
guest view opts in with its own .)
Design intent, applied through TOKENS so it follows the guest preset:
* generous vertical rhythm and breathing room
* fluid type via clamp() — scales from phone to desktop with no breakpoints
* soft, layered elevation instead of hard borders
* calm hover lifts with a single easing curve
* the accent used sparingly, always from --ds-accent
It touches only PRESENTATION selectors from the Sigma theme. No functional markup
is styled by class in a way that changes behaviour: the tracking form, its tabs,
and the ViewBag banner are left entirely alone.
Loads AFTER Sigma's own style.css and panel-sigma.css, so these win on source
order at equal specificity — the same contract every other adapter in this system
uses. Nothing here is !important unless a Sigma rule genuinely outguns it.
============================================================================= */
/* -----------------------------------------------------------------------------
0. Local rhythm tokens — scoped to the home layer, derived from the globals
-------------------------------------------------------------------------- */
:root {
--home-ease: cubic-bezier(0.22, 1, 0.36, 1);
--home-elev-1: 0 2px 8px rgba(15, 23, 42, 0.05);
--home-elev-2: 0 12px 32px rgba(15, 23, 42, 0.08);
--home-elev-3: 0 24px 60px rgba(15, 23, 42, 0.12);
--home-section-pad: clamp(56px, 8vw, 120px);
}
/* -----------------------------------------------------------------------------
1. Hero
-----------------------------------------------------------------------------
Roomier, with a fluid headline and an eyebrow that reads as a labelled chip
rather than a stray line of coloured text.
-------------------------------------------------------------------------- */
.sigma_banner.style-8 .banner-slider-inner {
padding: clamp(64px, 9vw, 150px) 0 clamp(80px, 10vw, 170px) !important;
}
.sigma_banner.style-8 .sigma_banner-text h5.primary-color {
display: inline-block;
margin-bottom: 18px;
padding: 6px 16px;
border-radius: var(--ds-radius-pill, 999px);
background: var(--ds-accent-subtle);
color: var(--ds-accent-active);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sigma_banner.style-8 .sigma_banner-text h1.title {
font-size: clamp(2.2rem, 5vw, 3.6rem);
line-height: 1.08;
letter-spacing: -0.02em;
font-weight: 800;
margin-bottom: 20px;
}
.sigma_banner.style-8 .sigma_banner-text > .container p {
font-size: clamp(1rem, 1.4vw, 1.12rem);
line-height: 1.7;
max-width: 30em;
color: var(--thm-b-text, #4E5164);
}
/* Phase 434: banner/3.png is a flat ILLUSTRATION, not a photo. A card radius + drop
shadow framed it like a floating panel on the light hero, which read as "the image has
a different background from everything else." Left as the theme intends — no framing. */
/* -----------------------------------------------------------------------------
2. Buttons — a premium pill with a lift on hover
-----------------------------------------------------------------------------
.sigma_btn already recolours from --thm-base (panel-sigma). This adds the shape
and motion that read as "premium": pill radius, weight, and a shadow that grows
as the button rises.
-------------------------------------------------------------------------- */
/* Phase 434 — MUST target a.sigma_btn / button.sigma_btn, NOT bare .sigma_btn.
The Sigma header builds its nav CTAs as
(Ship Now, Login),
so an unscoped .sigma_btn rule leaked button padding + shadow onto those list items and,
worse, the :hover transform put a stacking context around the
— which dropped its
position:absolute sub-menu BEHIND the page (the "Ship Now menu hidden" report). The
[[design-system-class-collisions]] trap again: sigma_btn is a button in content and a
nav-item modifier in the header. Anchors/buttons only. */
a.sigma_btn,
button.sigma_btn {
border-radius: var(--ds-radius-pill, 999px);
padding: 14px 32px;
font-weight: 600;
letter-spacing: 0.01em;
box-shadow: 0 8px 20px rgba(var(--ds-accent-rgb), 0.22);
transition: transform 0.35s var(--home-ease),
box-shadow 0.35s var(--home-ease),
background-color 0.25s var(--home-ease);
}
a.sigma_btn:hover,
button.sigma_btn:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(var(--ds-accent-rgb), 0.30);
}
/* The "light" secondary button — ghost treatment that fills on hover. */
a.sigma_btn.light,
button.sigma_btn.light {
background: transparent;
color: var(--ds-text-primary);
border: 1.5px solid var(--ds-border-default);
box-shadow: none;
}
a.sigma_btn.light:hover,
button.sigma_btn.light:hover {
border-color: var(--ds-accent);
color: var(--ds-accent-active);
background: var(--ds-accent-subtle);
transform: translateY(-3px);
}
/* -----------------------------------------------------------------------------
3. Hero info cards (Transparent Pricing / Real Time Tracking / On-Time)
-----------------------------------------------------------------------------
Elevated, equal-height, and they rise on hover. The icon sits in a tinted
rounded tile so the row reads as three considered cards, not three text blocks.
-------------------------------------------------------------------------- */
.sigma_banner-info .sigma_info.style-17 {
background: var(--ds-bg-surface, #fff);
border-radius: 18px;
padding: 36px 30px;
box-shadow: var(--home-elev-1);
border: 1px solid var(--ds-border-subtle);
transition: transform 0.4s var(--home-ease), box-shadow 0.4s var(--home-ease);
height: 100%;
}
.sigma_banner-info .sigma_info.style-17:hover {
transform: translateY(-6px);
box-shadow: var(--home-elev-2);
}
.sigma_banner-info .sigma_info.style-17 .sigma_info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 16px;
margin-bottom: 20px;
background: var(--ds-accent-subtle);
color: var(--ds-accent-active);
font-size: 1.6rem;
}
/* The middle "with-hue" card gets the solid accent, as the row's focal point. */
.sigma_banner-info .sigma_info.style-17.with-hue {
background: linear-gradient(160deg, var(--ds-accent) 0%, var(--ds-accent-active) 100%);
border-color: transparent;
box-shadow: 0 20px 44px rgba(var(--ds-accent-rgb), 0.28);
}
.sigma_banner-info .sigma_info.style-17.with-hue :is(h5, p),
.sigma_banner-info .sigma_info.style-17.with-hue .sigma_info-icon {
color: var(--ds-text-on-color);
}
.sigma_banner-info .sigma_info.style-17.with-hue .sigma_info-icon {
background: rgba(255, 255, 255, 0.18);
}
.sigma_banner-info .sigma_info.style-17 h5 {
font-weight: 700;
font-size: 1.15rem;
margin-bottom: 10px;
}
.sigma_banner-info .sigma_info.style-17 p {
line-height: 1.65;
font-size: 0.92rem;
margin: 0;
}
/* Phase 434 — the white-on-white fix, and the reason it happened.
Sigma's style-17 cards were accent-bg (var(--thm-base)) with white text, so this layer
giving the PLAIN cards a WHITE surface stranded that white text — invisible. My 433
verification checked the .with-hue card's white text but never the plain cards' contrast.
The plain cards now take dark text and an accent icon; .with-hue is excluded and keeps its
white text on the accent gradient. Specificity here (through .sigma_info-description and
.sigma_info-icon i) exceeds Sigma's own (0,3,1)/(0,4,1) without !important. */
.sigma_banner-info .sigma_info.style-17:not(.with-hue) .sigma_info-description h5 {
color: var(--ds-text-primary);
}
.sigma_banner-info .sigma_info.style-17:not(.with-hue) .sigma_info-description p {
color: var(--ds-text-secondary);
}
.sigma_banner-info .sigma_info.style-17:not(.with-hue) .sigma_info-icon,
.sigma_banner-info .sigma_info.style-17:not(.with-hue) .sigma_info-title .sigma_info-icon i {
color: var(--ds-accent-active);
}
/* -----------------------------------------------------------------------------
4. Section rhythm + titles
-------------------------------------------------------------------------- */
.section.section-padding {
padding-top: var(--home-section-pad);
padding-bottom: var(--home-section-pad);
}
.section-title .subtitle,
.section-title h4.subtitle {
color: var(--ds-accent-active);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 0.82rem;
}
.section-title .title {
font-size: clamp(1.8rem, 3.4vw, 2.7rem);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 800;
}
.section-title.centered {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* -----------------------------------------------------------------------------
5. Service cards — rounded, elevated, image zoom on hover
-------------------------------------------------------------------------- */
.sigma_service {
border-radius: 18px;
overflow: hidden;
box-shadow: var(--home-elev-1);
border: 1px solid var(--ds-border-subtle);
transition: transform 0.4s var(--home-ease), box-shadow 0.4s var(--home-ease);
}
.sigma_service:hover {
transform: translateY(-6px);
box-shadow: var(--home-elev-2);
}
.sigma_service .sigma_service-thumb img {
transition: transform 0.6s var(--home-ease);
width: 100%;
}
.sigma_service:hover .sigma_service-thumb img {
transform: scale(1.06);
}
.sigma_service .sigma_service-body h5 a {
font-weight: 700;
transition: color 0.25s var(--home-ease);
}
.sigma_service .sigma_service-body h5 a:hover {
color: var(--ds-accent-active);
}
.sigma_service .icon-wrapper .icon-box {
color: var(--ds-accent);
}
/* -----------------------------------------------------------------------------
6. Portfolio / feature cards
-------------------------------------------------------------------------- */
.sigma_portfolio-content {
transition: transform 0.4s var(--home-ease);
}
.sigma_portfolio-item:hover .sigma_portfolio-content {
transform: translateY(-4px);
}
.sigma_portfolio-content .icon-box {
color: var(--ds-accent);
}
.btn-link.primary-color,
.btn-link {
color: var(--ds-accent-active);
font-weight: 600;
transition: gap 0.25s var(--home-ease), color 0.25s var(--home-ease);
}
/* -----------------------------------------------------------------------------
7. Pricing — lift the featured plan, soften the rest
-------------------------------------------------------------------------- */
.sigma_pricing,
.pricing-table {
border-radius: 18px;
box-shadow: var(--home-elev-1);
border: 1px solid var(--ds-border-subtle);
transition: transform 0.4s var(--home-ease), box-shadow 0.4s var(--home-ease);
}
.sigma_pricing:hover,
.pricing-table:hover {
transform: translateY(-6px);
box-shadow: var(--home-elev-2);
}
/* -----------------------------------------------------------------------------
8. Work-process steps — numbered, connected feel
-------------------------------------------------------------------------- */
.sigma_icon-block,
.process-step {
transition: transform 0.4s var(--home-ease);
}
.sigma_icon-block:hover,
.process-step:hover {
transform: translateY(-5px);
}
/* -----------------------------------------------------------------------------
9. Links / motion polish across the page
-------------------------------------------------------------------------- */
.sigma_banner.style-8 a,
.section a:not(.sigma_btn) {
transition: color 0.25s var(--home-ease);
}
img {
max-width: 100%;
}