Test
:root{
--max:1200px;
--pad:clamp(18px,4vw,36px);
}
/* wrapper */
.atb-wrap{width:min(var(--max),calc(100% - 2*var(--pad)));margin:auto}
/* HERO (matches your mockup) */
.atb-hero{
position:relative;
border-radius:28px;
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.45);
min-height:520px;
display:flex;
align-items:center;
background:#0a1018;
}
.atb-hero-photo{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:right center; /* hikers to the right */
z-index:0;
}
.atb-hero-overlay{
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(90deg, rgba(5,10,16,.90) 0%, rgba(5,10,16,.62) 46%, rgba(5,10,16,.18) 100%);
}
/* subtle vignette */
.atb-hero:after{
content:"";
position:absolute; inset:0;
z-index:1;
background:radial-gradient(900px 420px at 22% 48%, rgba(0,0,0,.18), transparent 70%);
pointer-events:none;
}
.atb-hero-inner{
position:relative;
z-index:2;
width:100%;
padding:clamp(26px,4vw,56px);
display:grid;
grid-template-columns: 1.05fr .95fr;
gap:28px;
align-items:center;
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
@media (max-width: 900px){
.atb-hero-inner{grid-template-columns:1fr;}
}
/* Brand lockup */
.atb-brand{
display:flex;
align-items:center;
gap:14px;
margin-bottom:18px;
}
.atb-brand svg{width:50px;height:50px;opacity:.95}
.atb-brand-title{display:flex;flex-direction:column;line-height:1.0}
.atb-brand-title .top{font-weight:900;letter-spacing:.04em;font-size:26px;color:#fff}
.atb-brand-title .sub{font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:12px;opacity:.85;margin-top:6px;color:#fff}
/* Hero copy */
.atb-hero h1{
color:#fff;
font-size:clamp(34px,4.6vw,56px);
line-height:1.05;
margin:0 0 12px;
}
.atb-hero p{
color:rgba(255,255,255,.80);
max-width:62ch;
margin:0;
line-height:1.55;
font-size:15px;
}
/* Buttons like mockup */
.atb-hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px;}
.atb-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 18px;
border-radius:10px;
font-weight:800;
text-decoration:none !important;
border:2px solid rgba(255,255,255,.22);
color:#fff !important;
background:rgba(255,255,255,.06);
}
.atb-btn--orange{
border:none;
background:linear-gradient(135deg,#ffb35f,#ff8a2a);
color:#1b1208 !important;
box-shadow:0 14px 34px rgba(255,138,42,.25);
}
.atb-btn--ghost{
background:rgba(0,0,0,.18);
border-color:rgba(255,255,255,.30);
}
Adventure Team Building
ADVENTURE
TEAM BUILDING
Adventure Team Building
for Teams That Want More
Step outside the office. Tackle real outdoor challenges in the UK’s best landscapes—guided, safe, unforgettable.