/* ============================================================
AT1 V70.7.131
LANDING / SERVICE PAGES
------------------------------------------------------------
- Hero uploaded image visibility fix
- Correct Hero z-index layering
- Desktop/mobile Hero support
- Premium chamfered CTA button
- Existing Story section preserved
- Existing Vehicle cards preserved
- Existing Quick Enquiry preserved
- Mobile image protection preserved
============================================================ */
/* ============================================================
PAGE
============================================================ */
body.landing-public-page {
background:#090909;
color:#fff;
overflow-x:hidden;
}
.at1-landing-page {
background:var(--lp-bg,#090909);
color:var(--lp-text,#fff);
width:100%;
overflow:hidden;
}
/* ============================================================
HERO
============================================================ */
.at1-lp-hero {
position:relative;
isolation:isolate;
width:100%;
min-height:var(
--lp-hero-height,
560px
);
background:#080808;
overflow:hidden;
}
/*
* V70.7.131
* Dedicated media layer used by the updated
* app/landing-pages-v701.php Hero renderer.
*/
.at1-lp-hero-media,
.at1-lp-hero > picture {
position:absolute;
inset:0;
z-index:0;
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
opacity:1;
visibility:visible;
pointer-events:none;
}
.at1-lp-hero-media img,
.at1-lp-hero > picture img {
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
max-width:none;
max-height:none;
margin:0;
padding:0;
opacity:1;
visibility:visible;
object-fit:var(
--lp-hero-fit,
cover
);
object-position:var(
--lp-hero-pos,
center center
);
}
/* ============================================================
HERO OVERLAY
============================================================ */
/*
* IMPORTANT FIX:
*
* Previous CSS used:
*
* background: linear-gradient(...), var(--lp-hero-overlay,#000);
*
* That second solid colour layer could cover the Hero image.
*
* Now the overlay itself uses opacity instead.
*/
.at1-lp-hero-shade {
position:absolute;
inset:0;
z-index:1;
display:block;
background:
var(
--lp-hero-overlay,
#000000
);
opacity:
var(
--lp-hero-overlay-opacity,
.58
);
pointer-events:none;
}
/*
* Separate cinematic bottom fade.
*/
.at1-lp-hero::after {
content:"";
position:absolute;
z-index:2;
left:0;
right:0;
bottom:0;
height:
var(
--lp-hero-fade,
76%
);
background:
linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,.08) 35%,
rgba(0,0,0,.68) 78%,
rgba(0,0,0,.94) 100%
);
pointer-events:none;
}
/* ============================================================
HERO CONTENT
============================================================ */
.at1-lp-hero-inner {
position:relative;
z-index:4;
min-height:
var(
--lp-hero-height,
560px
);
max-width:
var(
--lp-hero-max,
1380px
);
padding:
40px
var(
--lp-hero-side,
40px
);
margin:auto;
display:flex;
}
.at1-lp-hero-inner.v-start {
align-items:flex-start;
}
.at1-lp-hero-inner.v-center {
align-items:center;
}
.at1-lp-hero-inner.v-end {
align-items:flex-end;
}
.at1-lp-hero-inner.align-left {
justify-content:flex-start;
text-align:left;
}
.at1-lp-hero-inner.align-center {
justify-content:center;
text-align:center;
}
.at1-lp-hero-inner.align-right {
justify-content:flex-end;
text-align:right;
}
.at1-lp-hero-copy {
position:relative;
z-index:5;
width:100%;
max-width:
var(
--lp-hero-content,
650px
);
}
/* ============================================================
EYEBROW
============================================================ */
.at1-lp-eyebrow {
display:block;
margin-bottom:14px;
color:
var(
--lp-accent,
#C4FF00
);
font:
700
12px/1.2
Inter,
sans-serif;
letter-spacing:.11em;
text-transform:uppercase;
}
/* ============================================================
HERO TITLE
============================================================ */
.at1-lp-hero h1 {
margin:
0
0
24px;
color:
var(
--lp-text,
#FFFFFF
);
font-family:
var(
--lp-hero-title-font,
"Barlow Condensed"
),
"Barlow Condensed",
Inter,
sans-serif;
font-size:
var(
--lp-hero-title-desktop,
58px
);
font-weight:
var(
--lp-hero-title-weight,
700
);
line-height:.98;
text-transform:uppercase;
}
/* ============================================================
HERO DESCRIPTION
============================================================ */
.at1-lp-hero p {
margin:
0
0
28px;
color:#f0f0f0;
font-family:
var(
--lp-hero-body-font,
"Inter"
),
Inter,
sans-serif;
font-size:
var(
--lp-hero-body-desktop,
16px
);
font-weight:
var(
--lp-hero-body-weight,
400
);
line-height:1.65;
}
/* ============================================================
STANDARD LANDING BUTTON
============================================================ */
.at1-lp-button {
min-height:44px;
padding:
0
26px;
display:inline-flex;
align-items:center;
justify-content:center;
background:
var(
--lp-accent,
#C4FF00
);
color:
var(
--lp-button-text,
#050505
);
font-family:
var(
--lp-button-font,
"Inter"
),
Inter,
sans-serif;
font-size:
var(
--lp-button-desktop,
12px
);
font-weight:
var(
--lp-button-weight,
800
);
text-transform:uppercase;
text-decoration:none;
border:0;
border-radius:3px;
cursor:pointer;
transition:
transform .2s ease,
filter .2s ease,
box-shadow .2s ease;
}
.at1-lp-button:hover {
transform:
translateY(-2px);
filter:
brightness(1.04);
box-shadow:
0
8px
26px
rgba(
196,
255,
0,
.20
);
}
/* ============================================================
PREMIUM CTA
IMAGE-3 STYLE
============================================================ */
/*
* Applies to:
*
* Hero CTA
* Vehicle section footer CTA
*
* Card VIEW CAR buttons remain compact.
*/
.at1-lp-hero .at1-lp-button:not(.small),
.at1-lp-models footer .at1-lp-button:not(.small),
.at1-lp-premium-button {
position:relative;
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:54px;
min-width:330px;
min-height:82px;
padding:
0
35px
0
38px;
border:0;
border-radius:0;
background:
var(
--lp-accent,
#C4FF00
);
color:
var(
--lp-button-text,
#050505
);
font-family:
var(
--lp-button-font,
"Barlow Condensed"
),
"Barlow Condensed",
Inter,
Arial,
sans-serif;
font-size:27px;
font-weight:800;
line-height:1;
letter-spacing:.01em;
text-transform:uppercase;
text-decoration:none;
clip-path:
polygon(
0 0,
calc(100% - 31px) 0,
100% 31px,
100% 100%,
31px 100%,
0 calc(100% - 31px)
);
transition:
transform .2s ease,
filter .2s ease,
box-shadow .2s ease;
}
/*
* Button arrow.
*
* Works even if the renderer still contains only
* plain button text.
*/
.at1-lp-hero .at1-lp-button:not(.small)::after,
.at1-lp-models footer .at1-lp-button:not(.small)::after {
content:"→";
flex:
0
0 auto;
display:flex;
align-items:center;
justify-content:center;
margin-left:auto;
color:inherit;
font-family:
Arial,
sans-serif;
font-size:38px;
font-weight:300;
line-height:1;
transition:
transform .2s ease;
}
/*
* Your updated PHP Hero renderer may already
* contain:
*
* →
*
* Hide it because CSS now supplies one consistent arrow.
*/
.at1-lp-premium-button > i {
display:none !important;
}
.at1-lp-hero .at1-lp-button:not(.small):hover,
.at1-lp-models footer .at1-lp-button:not(.small):hover,
.at1-lp-premium-button:hover {
transform:
translateY(-2px);
filter:
brightness(1.04);
color:
var(
--lp-button-text,
#050505
);
box-shadow:
0
10px
30px
rgba(
196,
255,
0,
.18
);
}
.at1-lp-hero .at1-lp-button:not(.small):hover::after,
.at1-lp-models footer .at1-lp-button:not(.small):hover::after {
transform:
translateX(7px);
}
/* ============================================================
SMALL VEHICLE CARD BUTTON
============================================================ */
.at1-lp-button.small {
min-width:auto;
min-height:38px;
padding:
0
18px;
border-radius:3px;
clip-path:none;
gap:0;
font-size:11px;
}
.at1-lp-button.small::after {
display:none;
}
/* ============================================================
IMAGE + CONTENT / STORY
============================================================ */
.at1-lp-story {
background:
var(
--lp-story-bg,
#090909
);
padding:
var(
--lp-story-top,
0
)
var(
--lp-story-side,
0
)
var(
--lp-story-bottom,
0
);
}
.at1-lp-story-inner {
max-width:
var(
--lp-story-max,
1920px
);
margin:auto;
display:grid;
grid-template-columns:
minmax(
0,
var(
--lp-story-image-width,
55%
)
)
minmax(
0,
1fr
);
gap:
var(
--lp-story-gap,
0
);
}
.at1-lp-story-media {
background:#080808;
display:flex;
align-items:center;
justify-content:center;
min-width:0;
overflow:hidden;
}
.at1-lp-story-media img {
display:block;
width:100%;
height:auto;
max-width:100%;
object-fit:
var(
--lp-story-fit,
contain
);
object-position:
var(
--lp-story-pos,
center center
);
}
.at1-lp-story-copy {
background:
var(
--lp-story-text-bg,
#090909
);
padding:
var(
--lp-story-pad,
72px
);
display:flex;
flex-direction:column;
justify-content:center;
min-width:0;
}
.at1-lp-story-copy h2 {
margin:
0
0
24px;
font-family:
var(
--lp-story-heading-font,
"Barlow Condensed"
),
"Barlow Condensed",
Inter,
sans-serif;
font-size:
var(
--lp-story-heading-desktop,
38px
);
font-weight:
var(
--lp-story-heading-weight,
400
);
line-height:1.08;
text-transform:uppercase;
}
.at1-lp-rich p {
margin:
0
0
18px;
color:
var(
--lp-muted,
#B8B8B8
);
font-family:
var(
--lp-story-body-font,
"Inter"
),
Inter,
sans-serif;
font-size:
var(
--lp-story-body-desktop,
15px
);
font-weight:
var(
--lp-story-body-weight,
400
);
line-height:1.68;
}
/* ============================================================
VEHICLE CATEGORY
============================================================ */
.at1-lp-models {
background:
var(
--lp-models-bg,
#090909
);
padding:
var(
--lp-models-top,
78px
)
var(
--lp-models-side,
28px
)
var(
--lp-models-bottom,
84px
);
}
.at1-lp-models-inner {
max-width:
var(
--lp-models-max,
1380px
);
margin:auto;
}
.at1-lp-models header h2 {
margin:
0
0
16px;
font-family:
var(
--lp-models-heading-font,
"Barlow Condensed"
),
"Barlow Condensed",
Inter,
sans-serif;
font-size:
var(
--lp-models-heading-desktop,
38px
);
font-weight:
var(
--lp-models-heading-weight,
400
);
line-height:1.05;
text-transform:uppercase;
}
.at1-lp-models header p {
margin:
0
0
34px;
color:
var(
--lp-muted,
#B8B8B8
);
font-family:
var(
--lp-models-body-font,
"Inter"
),
Inter,
sans-serif;
font-size:
var(
--lp-models-body-desktop,
15px
);
font-weight:
var(
--lp-models-body-weight,
400
);
line-height:1.6;
}
/* ============================================================
VEHICLE GRID
============================================================ */
.at1-lp-card-grid {
display:grid;
grid-template-columns:
repeat(
var(
--lp-models-cols,
4
),
minmax(
0,
1fr
)
);
gap:
var(
--lp-models-gap,
24px
);
}
.at1-lp-card {
background:
var(
--lp-card-bg,
#202020
);
min-width:0;
overflow:hidden;
}
.at1-lp-card-media {
position:relative;
display:flex;
align-items:center;
justify-content:center;
aspect-ratio:
var(
--lp-card-ratio,
4/3
);
background:
var(
--lp-card-img-bg,
#111111
);
overflow:hidden;
}
.at1-lp-card-media img {
display:block;
width:100%;
height:100%;
object-fit:
var(
--lp-card-fit,
contain
);
object-position:center;
}
.at1-lp-card-media span {
position:absolute;
right:0;
top:0;
background:
var(
--lp-accent,
#C4FF00
);
color:
var(
--lp-button-text,
#050505
);
padding:
9px
12px;
font:
700
11px/1
Inter,
sans-serif;
}
/* ============================================================
VEHICLE CARD BODY
============================================================ */
.at1-lp-card-body {
padding:20px;
}
.at1-lp-card-body small {
display:block;
margin-bottom:10px;
color:
var(
--lp-card-muted,
#BDBDBD
);
font:
400
12px/1.2
Inter,
sans-serif;
text-transform:uppercase;
}
.at1-lp-card-body h3 {
margin:
0
0
22px;
color:
var(
--lp-card-text,
#FFFFFF
);
font-family:
var(
--lp-card-title-font,
"Barlow Condensed"
),
"Barlow Condensed",
Inter,
sans-serif;
font-size:
var(
--lp-card-title-desktop,
22px
);
font-weight:
var(
--lp-card-title-weight,
500
);
line-height:1.05;
text-transform:uppercase;
}
.at1-lp-card-body > div {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.at1-lp-card-body b {
color:
var(
--lp-card-muted,
#BDBDBD
);
font:
400
14px/1.2
Inter,
sans-serif;
}
/* ============================================================
VEHICLE FOOTER
============================================================ */
.at1-lp-models footer {
padding-top:44px;
}
.at1-lp-models footer h3 {
margin:
0
0
8px;
font-family:
var(
--lp-models-heading-font,
"Barlow Condensed"
),
"Barlow Condensed",
Inter,
sans-serif;
font-size:24px;
font-weight:400;
text-transform:uppercase;
}
.at1-lp-models footer p {
max-width:980px;
margin:
0
0
22px;
color:
var(
--lp-muted,
#B8B8B8
);
font-family:
var(
--lp-models-body-font,
"Inter"
),
Inter,
sans-serif;
font-size:14px;
line-height:1.6;
}
/* ============================================================
EXISTING QUICK ENQUIRY
============================================================ */
.at1-lp-enquiry {
background:#090909;
}
.landing-public-page
.at1-lp-enquiry
.at1-quick7053-layout {
margin:0;
}
.landing-public-page
.at1-lp-enquiry
.at1-quick7053-visual,
.landing-public-page
.at1-lp-enquiry
.at1-quick7053-form-side {
min-height:unset;
}
/* ============================================================
TABLET
============================================================ */
@media(max-width:1024px) {
.at1-lp-card-grid {
grid-template-columns:
repeat(
var(
--lp-models-tablet,
2
),
minmax(
0,
1fr
)
);
}
.at1-lp-story-copy {
padding:44px;
}
.at1-lp-story-inner {
grid-template-columns:
50%
50%;
}
.at1-lp-hero .at1-lp-button:not(.small),
.at1-lp-models footer .at1-lp-button:not(.small),
.at1-lp-premium-button {
min-width:300px;
min-height:74px;
padding:
0
30px
0
33px;
font-size:24px;
gap:38px;
}
.at1-lp-hero .at1-lp-button:not(.small)::after,
.at1-lp-models footer .at1-lp-button:not(.small)::after {
font-size:34px;
}
}
/* ============================================================
MOBILE
============================================================ */
@media(max-width:760px) {
/* HERO */
.at1-lp-hero {
min-height:
var(
--lp-hero-mobile-height,
520px
);
}
.at1-lp-hero-inner {
min-height:
var(
--lp-hero-mobile-height,
520px
);
padding:
34px
var(
--lp-hero-mobile-side,
20px
);
}
/*
* Mobile from is automatically
* selected when a mobile image exists.
*/
.at1-lp-hero-media,
.at1-lp-hero > picture {
width:100%;
height:100%;
}
.at1-lp-hero-media img,
.at1-lp-hero > picture img {
width:100%;
height:100%;
object-fit:
var(
--lp-hero-fit,
cover
);
object-position:
var(
--lp-hero-pos,
center center
);
}
/*
* Slightly stronger mobile overlay for readability.
*/
.at1-lp-hero-shade {
opacity:
var(
--lp-hero-overlay-opacity,
.58
);
}
.at1-lp-hero::after {
height:76%;
background:
linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,.16) 32%,
rgba(0,0,0,.76) 80%,
rgba(0,0,0,.96) 100%
);
}
.at1-lp-hero h1 {
font-size:
var(
--lp-hero-title-mobile,
42px
);
}
.at1-lp-hero p {
font-size:
var(
--lp-hero-body-mobile,
14px
);
}
/* PREMIUM BUTTON */
.at1-lp-hero .at1-lp-button:not(.small),
.at1-lp-models footer .at1-lp-button:not(.small),
.at1-lp-premium-button {
width:auto;
min-width:250px;
min-height:64px;
padding:
0
24px
0
27px;
gap:28px;
font-size:21px;
clip-path:
polygon(
0 0,
calc(100% - 23px) 0,
100% 23px,
100% 100%,
23px 100%,
0 calc(100% - 23px)
);
}
.at1-lp-hero .at1-lp-button:not(.small)::after,
.at1-lp-models footer .at1-lp-button:not(.small)::after {
font-size:30px;
}
/* STORY */
.at1-lp-story-inner {
display:flex;
flex-direction:column;
}
.at1-lp-story.order-text-first
.at1-lp-story-copy {
order:1;
}
.at1-lp-story.order-text-first
.at1-lp-story-media {
order:2;
}
.at1-lp-story-media {
width:100%;
min-height:0;
}
/*
* Critical mobile protection:
* Story image never crops.
*/
.at1-lp-story-media img {
width:100%;
height:auto;
max-height:none;
object-fit:contain !important;
object-position:center !important;
}
.at1-lp-story-copy {
padding:
var(
--lp-story-mobile-pad,
22px
);
min-height:0;
}
.at1-lp-story-copy h2 {
font-size:
var(
--lp-story-heading-mobile,
30px
);
}
.at1-lp-rich p {
font-size:
var(
--lp-story-body-mobile,
14px
);
}
/* VEHICLES */
.at1-lp-models {
padding-left:18px;
padding-right:18px;
}
.at1-lp-models header h2 {
font-size:
var(
--lp-models-heading-mobile,
30px
);
}
.at1-lp-models header p {
font-size:
var(
--lp-models-body-mobile,
13px
);
}
.at1-lp-card-grid {
grid-template-columns:
repeat(
var(
--lp-models-mobile,
1
),
minmax(
0,
1fr
)
);
}
.at1-lp-card-body h3 {
font-size:
var(
--lp-card-title-mobile,
20px
);
}
.at1-lp-card-body > div {
align-items:flex-end;
}
.at1-lp-card-media img {
object-fit:
var(
--lp-card-fit,
contain
);
}
.at1-lp-models footer {
padding-top:32px;
}
}
/* ============================================================
SMALL PHONE
============================================================ */
@media(max-width:420px) {
.at1-lp-hero .at1-lp-button:not(.small),
.at1-lp-models footer .at1-lp-button:not(.small),
.at1-lp-premium-button {
min-width:230px;
min-height:60px;
padding:
0
20px
0
23px;
font-size:19px;
gap:22px;
}
.at1-lp-hero .at1-lp-button:not(.small)::after,
.at1-lp-models footer .at1-lp-button:not(.small)::after {
font-size:27px;
}
}