/* =========================================================
Lease Plans Online — site.css (clean rebuild)
Goal: keep current appearance + functionality, but rationalise.
========================================================= */
/* ------------------------------
TOKENS
------------------------------ */
:root{
/* Brand palette */
--green: #8CB63C;
--greenDeep: #6E9F1F;
--orange: #F15A24;
--ink: #121212;
--blue: #153243;
--muted: #5B5B5B;
/* Surfaces */
--paper: #FBFAF7;
--paper2:#F6F4EE;
--paper3:#EEF0EB;
--chip: #F2F0EA;
/* Lines / shadows */
--line-rgb: 227 230 234;
--line: rgb(var(--line-rgb) / 0.12); /* subtle, predictable */
--radius: 4px;
--shadow: 0 14px 38px rgba(0,0,0,.10);
--shadowSoft: 0 10px 26px rgba(0,0,0,.07);
/* Layout */
--max: 1120px;
/* Header offset (synced by JS) */
--header-h: 72px;
/* Hero / photo card */
--pc-h: 520px;
--pc-photo-h: 300px;
--pc-gap: 18px;
--pc-pad: 18px;
--pc-left-col: 240px;
}
/* ------------------------------
BASE / RESET
------------------------------ */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior: smooth; }
body{
margin:0;
padding-top: var(--header-h, 72px); /* fixed header offset */
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
color: var(--ink);
background: var(--paper);
line-height: 1.55;
}
img, svg{ display:block; max-width:100%; height:auto; }
a {
color: var(--green);
font-weight: 500;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.grid{ display:grid; gap: 18px; }
/* =========================================================
FONTS + TYPE SCALE
(drop-in block)
========================================================= */
/* 1) Load fonts in HTML (recommended):
Inter: 300,400 ; Playfair Display: 400
*/
:root{
/* Font families */
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-serif: "Playfair", ui-serif, Georgia, "Times New Roman", Times, serif;
/* Type sizes (desktop) */
--p-size: 14px; /* body paragraphs */
--p-weight: 200;
--p-leading: 1.60;
--h1-size: 48px;
--h1-leading: 1.06;
--h2-size: 36px;
--h2-leading: 1.12;
/* Supporting hierarchy */
--h3-size: 24px; /* card titles, sub-heads */
--h3-leading: 1.20;
--small-size: 14px; /* captions, meta */
--small-leading: 1.45;
--nav-size: 16px; /* desktop nav */
--btn-size: 16px; /* buttons */
}
/* 2) Base text defaults */
html{ font-size: 14px; }
body{
font-family: var(--font-sans);
font-size: var(--p-size);
line-height: var(--p-leading);
font-weight: var(--p-weight);
color: var(--ink);
}
/* Paragraphs */
p{
font-size: inherit;
line-height: var(--p-leading);
font-weight: inherit;
color: var(--muted);
margin: 0 0 12px;
}
/* Links (site-wide) */
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
/* 3) Headings */
h1, h2, h3, h4{
margin: 0 0 10px;
color: var(--ink);
}
/* H1: Playfair 48/400 */
h1{
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--h1-size);
line-height: var(--h1-leading);
letter-spacing: -0.02em;
}
/* H2: Inter 36/400 */
h2{
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--h2-size);
line-height: var(--h2-leading);
letter-spacing: -0.02em;
}
/* H3: Inter 24, slightly stronger than body */
h3{
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--h3-size);
line-height: var(--h3-leading);
letter-spacing: -0.01em;
}
/* H4 (if used) */
h4{
font-family: var(--font-sans);
font-weight: 600;
font-size: 18px;
line-height: 1.25;
}
/* 4) Common supporting text */
.sub,
.section-desc,
.carousel-note,
.price-note,
.review-cta{
font-family: var(--font-sans);
font-weight: inherit;
font-size: inherit;
line-height: 1.55;
color: var(--muted);
}
/* Smaller meta/captions */
.cap,
.tiny,
small{
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--small-size);
line-height: var(--small-leading);
}
/* 5) Desktop nav typography */
.nav a{
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--nav-size);
text-transform: none;
letter-spacing: 0.03em;
}
/* Keep dropdown items sane (not huge/uppercase) */
.dropdown a{
font-size: 16px;
text-transform: none;
letter-spacing: 0;
font-weight: 600;
}
/* 6) Buttons: Inter Light 24px */
.btn,
button,
input[type="button"],
input[type="submit"]{
font-family: var(--font-sans);
font-weight: 300; /* Inter Light */
font-size: var(--btn-size);
letter-spacing: 0.01em;
}
/* Keep icon/text alignment clean when buttons wrap */
.btn{ line-height: 1; }
/* 7) Component-specific hierarchy tweaks */
.tile h3,
.mini h3,
.card h3,
.step strong,
.price-title{
font-family: var(--font-sans);
font-weight: 500;
}
.tile p,
.mini p,
.card p,
.step p{
font-size: inherit;
font-weight: inherit;
line-height: 1.55;
}
/* Make “Learn more” / “go” cues feel like UI text */
.tile .go,
.review-cta{
font-weight: 600;
font-size: 17px;
}
/* 8) Dark section contrast (e.g. .section--blue) */
.section--blue{
color: rgba(255,255,255,.88);
}
/* All text inside blue sections inherits a linen/soft-white feel */
.section--blue h1,
.section--blue h2,
.section--blue h3,
.section--blue h4{
color: rgba(255,255,255,.94);
}
.section--blue p,
.section--blue .sub,
.section--blue .section-desc{
color: rgba(255,255,255,.78);
}
/* Nav/links/buttons inside blue sections (if any) */
.section--blue a{ color: rgba(255,255,255,.92); }
.section--blue a:hover{ color: #fff; }
/* Optional: make “secondary” buttons readable on blue backgrounds */
.section--blue .btn.secondary{
background: rgba(255,255,255,.92);
color: var(--ink);
}
.star {
font-size: 1.2em; /* makes star larger than surrounding text */
color: #F4B400; /* classic gold tone */
margin-left: 2px;
margin-right: 2px;
}
.rating-number {
font-weight: 600;
color: var(--ink);
font-size: 1.1em;
}
/* 9) Responsive type scale */
@media (max-width: 980px){
:root{
--p-size: 14px;
--h1-size: 40px;
--h2-size: 30px;
--h3-size: 22px;
--nav-size: 16px; /* if nav ever shows at this size */
--btn-size: 16px;
}
}
@media (max-width: 560px){
:root{
--p-size: 14px;
--h1-size: 34px;
--h2-size: 26px;
--h3-size: 18px;
--btn-size: 18px;
}
}
/* ------------------------------
BUTTONS / PILLS
------------------------------ */
.btn{
display:inline-flex;
align-items:center;
gap:10px;
padding: 9px 13px;
border-radius: 999px;
border: 1px solid transparent;
text-decoration:none !important;
transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{ transform: translateY(1px); }
.btn.primary{
background: var(--green);
color: #fff;
border-color: rgba(0,0,0,.00);
box-shadow: 0 10px 22px rgba(0,30,0,.18);
}
.btn.primary:hover{
transform: translateY(-2px);
filter: brightness(.97);
color: var(--ink);
}
.btn.secondary{
background: #fff;
color: var(--ink);
border-color: var(--line);
box-shadow: 0 10px 22px rgba(0,30,0,.18);
}
.btn.secondary:hover{
/* background: var(--chip);*/
color: #000;
transform: translateY(-2px);
}
/* Use only when you want the contents centred inside a wrapping button */
.btn.center{
justify-content: center;
text-align: center;
flex-wrap: wrap;
}
.pill{
display:inline-flex;
align-items:center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
font-weight: 20;
font-size: 14px;
border: 1px solid rgba(0,0,0,.00);
background: rgba(0,0,0,.03);
color: rgba(0,0,0,.72);
}
.pill.green{
background: rgba(140,182,60,.12);
color: #2b3a0f;
}
.pill.orange{
background: rgba(241,90,36,.10);
color: #4a1f0f;
}
.pill.white{
background: rgba(255,255,255,.85);
color: var(--ink);
}
.dot{
width: 9px;
height: 9px;
border-radius: 99px;
background: var(--green);
display:inline-block;
}
.dot.orange{ background: var(--orange); }
.dot.blue{ background: var(--blue); }
/* Trust pill (Services header) */
.trust-pill{
display: flex;
flex-wrap: wrap;
border-radius: 4px;
padding: 16px 16px;
align-items: center;
gap: 14px;
/* important: do NOT force-centre; let section-head alignment control position */
justify-content: flex-start;
}
.trust-pill .trust-item{
white-space: nowrap;
flex: 0 0 auto;
}
/* ------------------------------
HEADER + NAV (fixed)
------------------------------ */
/* Allow the header row to wrap ONLY when it has to */
.topbar{
flex-wrap: wrap;
}
/* Allow logo block to shrink instead of forcing overflow */
.brand{
min-width: 0; /* important */
}
/* Keep the icon cluster pinned right */
.mobile-icons{
margin-left: auto;
flex: 0 0 auto;
}
/* Burger shouldn’t shrink away */
.burger{
flex: 0 0 auto;
}
header{
position: fixed;
top: 0; left: 0; right: 0;
z-index: 9999;
background: rgba(21,50,67,1);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgb(0 0 0 / 0.10);
box-shadow:
0 1px 0 rgba(0,0,0,.10),
0 10px 24px rgba(0,0,0,.22);
}
.topbar{
display:flex;
align-items:center;
justify-content: space-between;
gap: 14px;
row-gap: 10px;
padding: 0;
padding-bottom: 14px;
}
.brand{
display:flex;
align-items:center;
gap: 12px;
min-width: 220px;
}
.brand img{
width: 160px;
height: auto;
}
.brand-tip{
position: relative;
display: inline-flex;
align-items: center;
}
.brand-tip .tip{
position: absolute;
left: 50%;
top: calc(100% + 10px);
transform: translate(-50%, -6px);
padding: 8px 10px;
border-radius: 10px;
background: #0c1f2a; /* match your price tooltip background */
color: #fff;
font-size: 13px;
line-height: 1;
white-space: nowrap;
box-shadow: 0 12px 30px rgba(0,0,0,.25);
opacity: 0;
pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
z-index: 60;
}
/* show on hover + keyboard focus */
.brand-tip:hover .tip,
.brand-tip:focus-visible .tip{
opacity: 1;
transform: translate(-50%, 0);
}
.brand-tip .tip::before{
content: "";
position: absolute;
left: 50%;
top: -6px;
transform: translateX(-50%);
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: transparent transparent #0c1f2a transparent;
}
.nav{
display:flex;
align-items:center;
gap: 14px;
flex-wrap: wrap;
justify-content: flex-end;
}
.nav a{
position: relative;
padding: 8px 10px 12px;
color: rgba(255,255,255,.85);
text-decoration: none;
}
.nav a::after{
content: "";
position: absolute;
left: 50%;
bottom: 4px;
width: 0;
height: 2px;
background: var(--green);
border-radius: 999px;
transform: translateX(-50%);
transition: width .22s ease;
}
.nav a:hover::after,
.nav a:focus-visible::after{ width: 70%; }
.nav a:hover{
background: none;
color: var(--green);
text-decoration:none;
}
/* Desktop dropdown */
.nav-item{ position: relative; }
.nav-parent{
display: inline-flex;
align-items: center;
gap: 6px;
}
.caret{ font-size: 12px; opacity: .7; }
.dropdown{
position: absolute;
top: 100%;
margin-top: 8px;
left: 0;
min-width: 260px;
background: rgba(255,255,255,.96);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 18px 50px rgba(0,0,0,.16);
padding: 8px;
display: none;
z-index: 9999;
}
.dropdown a{
display: block;
padding: 10px 12px;
border-radius: 12px;
color: rgba(0,0,0,.75);
font-weight: 800;
font-size: 14px;
text-decoration: none;
}
.dropdown a:hover{ background: rgba(140,182,60,.10); }
/* Hover open */
.has-dropdown:hover .dropdown{ display: block; }
.has-dropdown::after{
content:"";
position:absolute;
left: 0;
right: 0;
top: 100%;
height: 10px;
}
/* JS click-open support */
.has-dropdown.open .dropdown{ display: block; }
.actions{
display:flex;
gap: 10px;
align-items:center;
white-space: nowrap;
}
/* Burger (mobile) */
.burger{
display:none;
align-items:center;
justify-content:center;
width: 44px;
height: 44px;
border-radius: 4px;
border: 1px solid var(--line);
background: #fff;
box-shadow: 0 8px 18px rgba(0,0,0,.06);
cursor:pointer;
position: relative;
}
.burger .icon{
position: absolute;
width: 22px;
height: 22px;
transition: opacity .15s ease, transform .15s ease;
}
.burger .icon-burger{ opacity: 1; transform: scale(1); }
.burger .icon-close{ opacity: 0; transform: scale(.9); }
.burger.is-open .icon-burger{ opacity: 0; transform: scale(.9); }
.burger.is-open .icon-close{ opacity: 1; transform: scale(1); }
.burger:active{ transform: translateY(1px); }
.mobile-icons {
display: none;
align-items: center;
gap: 10px;
}
.icon-btn {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.08);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
text-decoration: none;
transition: background .2s ease, transform .1s ease;
}
.icon-btn svg {
width: 20px;
height: 20px;
}
.icon-btn:active {
transform: scale(0.96);
}
/* HEADER SWITCH: desktop → mobile header */
@media (max-width: 1060px){
.nav{ display:none; }
.actions{ display:none; }
.mobile-icons{ display:flex; }
.burger{ display:inline-flex; }
/* optional: slightly smaller logo so it stays comfy */
.brand img{ width: 170px; }
}
/* ------------------------------
SECTIONS (single source of truth)
------------------------------ */
.section{
padding: 56px 0;
scroll-margin-top: calc(var(--header-h, 72px) + 16px);
background: var(--section-bg, transparent);
border-top: 1px solid var(--section-divider, transparent);
}
.section--base{
--section-bg: var(--paper);
--section-divider: rgb(var(--line-rgb) / 0.00);
}
.section--tint{
--section-bg: var(--paper2);
--section-divider: rgb(var(--line-rgb) / 0.14);
}
.section--alt{
--section-bg: var(--paper3);
--section-divider: rgb(var(--line-rgb) / 0.16);
}
.section--blue{
--section-bg: var(--blue);
--section-divider: rgb(var(--line-rgb) / 0.16);
}
/* Section header layout (title/desc + right CTA) */
.section-head{
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 6px;
margin-bottom: 14px;
}
/* Let H2 and P inside the inner participate without HTML changes */
.section-head > div{ display: contents; }
.section-head h2{
grid-column: 1;
grid-row: 1;
}
.section-desc{
grid-column: 1 / -1;
grid-row: 2;
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 80ch;
}
.section-head > a,
.section-head > .btn{
grid-column: 2;
grid-row: 1;
align-self: end; /* align to H2 row */
justify-self: end;
}
@media (max-width: 720px){
.section-head{
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
row-gap: 12px;
}
.section-head > a,
.section-head > .btn{
grid-column: 1;
grid-row: 3;
justify-self: start;
}
}
/* ------------------------------
HERO
------------------------------ */
.hero{
position: relative;
padding: 34px 0 40px; /* preserve your hero feel */
overflow: hidden;
}
/* motif kept but neutral (you had 0-alpha gradients) */
.hero::before,
.hero::after{
content:"";
position:absolute;
pointer-events:none;
}
.hero::before{
left:-220px;
top: -180px;
width: 680px;
height: 680px;
background: linear-gradient(135deg, rgba(140,182,60,0), rgba(140,182,60,0));
clip-path: polygon(0% 50%, 70% 10%, 70% 90%);
transform: rotate(-10deg);
filter: blur(.2px);
}
.hero::after{
right:-220px;
top: 120px;
width: 520px;
height: 520px;
background: linear-gradient(135deg, rgba(241,90,36,0), rgba(241,90,36,0));
clip-path: polygon(25% 0%, 100% 50%, 25% 100%, 0% 80%, 0% 20%);
transform: rotate(8deg);
}
.hero-grid{
position:relative;
display:grid;
grid-template-columns: 1.05fr 1.15fr;
gap: 22px;
align-items: stretch;
z-index: 1;
}
.hero-grid::after{
content:"";
position:absolute;
top: 18px;
bottom: 18px;
left: calc( (100% - 22px) * (1.05 / (1.05 + 1.15)) + (22px / 2) );
width: 1px;
background: rgba(0,0,0,.08);
pointer-events: none;
}
.hero-card{
height: 100%;
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 18px;
}
.hero-left{
display: flex;
flex-direction: column;
height: 100%;
}
.hero-copy{ padding-bottom: 18px; }
.hero-bottom{
margin-top: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.hero-pills{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
margin-top: 10px;
}
.hero-ctas{
display:flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
}
/* Was: height: var(--pc-h); */
.photo-card{
/* height: var(--pc-h); <-- remove this */
min-height: var(--pc-h); /* optional: keeps your nice minimum size */
background: rgba(255,255,255,0);
border-radius: 4px;
overflow: hidden;
}
/* Was: height: 100%; */
.pc-grid{
/* height: 100%; <-- remove this */
padding: var(--pc-pad);
display: grid;
grid-template-columns: minmax(0, var(--pc-left-col)) minmax(0, 1fr);
/* IMPORTANT: make rows size to content */
grid-template-rows: auto auto auto;
grid-template-areas:
"photo right"
"under under"
"badge badge";
gap: var(--pc-gap);
align-items: start;
}
.pc-grid > *{ min-width: 0; min-height: 0; }
/* Map each block into the grid */
.pc-photo{ grid-area: photo; border-radius: 14px; overflow: hidden; }
.pc-right{ grid-area: right; }
.pc-under{ grid-area: under; }
.pc-badge{ grid-area: badge; }
/* Keep your existing image behaviour */
.pc-photo img{
width: 100%;
height: 100%;
object-fit: cover;
}
/* Optional: make the bottom badge feel like a full-width element */
.pc-badge{
justify-self: stretch;
align-self: end;
width: 100%;
max-width: none;
}
/* Optional: if you want the badge card centered with a max width, use this instead:
.pc-badge{
justify-self: center;
width: min(520px, 100%);
}
*/
@media (max-width: 720px){
.pc-grid{
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
grid-template-areas:
"photo"
"right"
"under"
"badge";
}
}
@media (max-width: 980px){
.hero-grid::after{
display: none;
}
}
/* ------------------------------
SERVICES TILES
------------------------------ */
.tiles{ grid-template-columns: repeat(3, 1fr); }
.tile{
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
background: rgba(255,255,255,.92);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadowSoft);
padding: 14px 14px 54px;
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.tile:hover{
transform: translateY(-2px);
border-color: rgba(140,182,60,.52);
box-shadow: 0 18px 44px rgba(0,0,0,.10);
text-decoration: none;
}
/* You intentionally hide the top row */
.tile-top{ display:none; }
.tile .badge{
position: absolute;
right: 14px;
bottom: 14px;
width: 38px;
height: 38px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0,0,0,.08);
background: rgba(140,182,60,.12);
}
.badge.orange{
background: rgba(241,90,36,.12);
border-color: rgba(241,90,36,.20);
}
.badge.blue{
background: rgba(21,50,67,.12);
border-color: rgba(3,7,9,.20);
}
.badge svg{ width: 20px; height: 20px; opacity: .85; }
.tile h3{
margin: 0;
font-size: 16px;
letter-spacing: -0.01em;
}
.tile p{
margin: 0;
font-size: inherit;
font-weight: inherit;
color: var(--muted);
}
.tile .go{
position: absolute;
left: 14px;
bottom: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 900;
color: var(--greenDeep);
}
.tile .go .arrow{
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid rgba(140,182,60,.35);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ------------------------------
HOW IT WORKS
------------------------------ */
.steps{ grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step{
position:relative;
background: rgba(255,255,255,.92);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadowSoft);
display:flex;
flex-direction: column;
gap: 8px;
overflow:hidden;
}
.step::after{
content:"";
position:absolute;
top: 34px;
right: -50%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, rgba(140,182,60,.35), rgba(241,90,36,.18));
opacity: .9;
}
.step:last-child::after{ display:none; }
.num{
width: 36px;
height: 36px;
border-radius: 4px;
background: rgba(140,182,60,.14);
border: 1px solid rgba(140,182,60,.25);
display:flex;
align-items:center;
justify-content:center;
font-weight: 900;
color: #24310E;
}
.step strong{ font-size: 15px; }
.step p{ margin:0; color: var(--muted); font-size: inherit; font-weight: inherit; }
/* ------------------------------
CAROUSEL
------------------------------ */
.slider-wrap{
background: rgba(255,255,255,.92);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 14px;
box-shadow: var(--shadow);
}
.slider{
display:flex;
gap: 12px;
overflow:auto;
scroll-snap-type: x mandatory;
padding-bottom: 6px;
}
.carousel-track{
overflow-x: auto;
scroll-behavior: smooth;
}
.slide{
min-width: 340px;
height: 240px;
border-radius: 4px;
background: #FFF;
scroll-snap-align: start;
position: relative;
overflow: hidden;
}
.slide img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}
.cap{
position: absolute;
left: 15px;
bottom: 15px;
padding: 8px 10px;
border-radius: 4px;
background: rgba(255,255,255,.75);
border: 1px solid rgba(0,0,0,.12);
font-size: 12px;
font-weight: 800;
color: rgba(0,0,0,.75);
}
.carousel-footer{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 14px;
}
.carousel-note{ margin: 0; color: var(--muted); font-size: 14px; }
.carousel-controls{ display: flex; gap: 8px; }
.carousel-btn{
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--paper);
color: #444;
font-size: 18px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
}
.carousel-btn:hover{ background: #fff; }
/* TESTIMONIALS CAROUSEL (drop into your CSS) */
.tcarousel {
margin-top: 14px;
}
.tcarousel-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 420px);
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
}
.tcarousel-track::-webkit-scrollbar {
height: 10px;
}
.tcarousel-track::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.25);
border-radius: 999px;
}
.tcard {
scroll-snap-align: start;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 18px;
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr;
min-height: 320px;
}
.tcard-media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.tcard-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.95);
}
.tcard-badge {
position: absolute;
left: 10px;
bottom: 10px;
}
.tbadge {
display: inline-block;
padding: 6px 10px;
border-radius: 999px;
font-size: 0.85rem;
line-height: 1;
color: var(--ink);
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(0, 0, 0, 0.06);
}
.tcard-body {
padding: 14px 14px 16px 14px;
}
.tquote {
color: var(--ink);
font-size: 1rem;
line-height: 1.5;
margin: 0 0 10px 0;
}
.tauthor {
margin: 0;
color: var(--ink);
opacity: 0.95;
}
.tcarousel-footer {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.tcarousel-controls {
display: flex;
gap: 10px;
}
/* Slightly larger cards on bigger screens */
@media (min-width: 900px) {
.tcarousel-track {
grid-auto-columns: minmax(360px, 520px);
}
.tcard {
min-height: 340px;
}
}
/* ------------------------------
CARDS / REVIEWS
------------------------------ */
.card{
background: rgba(255,255,255,.92);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadowSoft);
}
.card--blue{
background: var(--blue);
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--paper);
padding: 18px;
box-shadow: var(--shadowSoft);
}
.card p{ margin:0; color: var(--muted); font-size: inherit; font-weight: inherit; }
.card h3{ margin:0 0 8px; font-size: 16px; }
.reviews{ grid-template-columns: 1fr 1fr; }
.review-logo{
display: flex;
align-items: center;
justify-content: center;
min-height: 180px;
background: rgba(255,255,255,1);
transition: background .25s ease, transform .15s ease;
}
.review-logo a{
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
justify-content: center;
width: 100%;
}
.review-logo img{
max-width: 220px;
width: 70%;
transition: transform .2s ease;
}
.review-logo:hover{
border: 1px solid rgba(140,182,60,1);
}
.review-logo:hover img{ transform: scale(1.04); }
.review-cta{
font-size: 13px;
font-weight: 800;
color: rgba(0,0,0,.65);
}
/* ------------------------------
EXAMPLES + BLOG PREVIEWS
------------------------------ */
.tri-grid{ grid-template-columns: repeat(3, 1fr); }
.thumb{
height: 182px;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.08);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.01));
overflow: hidden;
display: block;
}
.thumb img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mini{
background: rgba(255,255,255,.92);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 14px;
box-shadow: var(--shadowSoft);
display:flex;
flex-direction: column;
gap: 10px;
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.mini:hover{
transform: translateY(-2px);
border-color: rgba(241,90,36,.35);
box-shadow: 0 18px 44px rgba(0,0,0,.10);
text-decoration:none;
}
.mini h3{ margin:0; font-size: 15px; }
.mini p{ margin:0; color: var(--muted); font-size: inherit; font-weight: inherit; }
/* ------------------------------
FAQ
------------------------------ */
details{
background: rgba(255,255,255,.92);
border: 1px solid var(--line);
border-radius: 4px;
padding: 14px 16px;
box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
details + details{ margin-top: 10px; }
summary{
cursor:pointer;
font-weight: 900;
list-style:none;
display:flex;
align-items:center;
justify-content: space-between;
gap: 12px;
}
summary::-webkit-details-marker{ display:none; }
summary .chev{
width: 30px;
height: 30px;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.08);
background: rgba(0,0,0,.03);
display:flex;
align-items:center;
justify-content:center;
font-weight: 900;
color: rgba(0,0,0,.55);
flex: 0 0 auto;
}
details[open] summary .chev{
background: rgba(255,255,255,1);
color: #5a220f;
}
details p{ margin: 10px 0 0; color: var(--muted); font-size: inherit; font-weight: inherit; }
/* ------------------------------
PRICES
------------------------------ */
.price-grid{ grid-template-columns: 1fr 1fr; }
.price-card{
position: relative;
background: rgba(255,255,255,.92);
border-radius: 14px;
padding: 18px 18px 16px 22px;
box-shadow: var(--shadowSoft);
overflow: hidden;
}
.price-card::before{
content:"";
position:absolute;
top:0; bottom:0; left:0;
width: 6px;
background: linear-gradient(
180deg,
rgba(140,182,60,.95),
rgba(140,182,60,.25),
rgba(140,182,60,0)
);
}
.price-title{ margin:0; font-size: 18px; font-weight: 450; }
.price-from{
margin: 10px 0 6px;
font-size: 24px;
font-weight: 450;
letter-spacing: -0.02em;
}
.price-note{ margin:0; color: var(--muted); }
.price-vat{ font-size: 14px; font-weight: 250; color: var(--ink); }
.from-word{
font-weight: 300;
font-size: 0.8em;
margin-right: 4px;
opacity: 1;
}
.price-with-tip{
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
}
.from-price{
font-weight: 400;
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-thickness: 1px; /* thinner dots */
text-underline-offset: 6px; /* pushes dots further down */
cursor: help;
}
.share-btn{
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.0);
border: none;
border-radius: 10px;
color: inherit;
cursor: pointer;
transition: transform .1s ease, background .2s ease;
position: relative;
}
.share-btn:hover{
background: rgba(0,0,0,0.07);
transform: translateY(-1px);
}
.share-btn:active{
transform: scale(0.97);
}
.share-icon{
width: 18px;
height: 18px;
position: absolute;
transition: opacity .15s ease, transform .15s ease;
}
.icon-tick{
opacity: 0;
transform: scale(0.6);
}
.share-btn.is-copied .icon-share{
opacity: 0;
transform: scale(0.6);
}
.share-btn.is-copied .icon-tick{
opacity: 1;
color: #fff;
transform: scale(1);
}
/* Optional subtle success tint */
.share-btn.is-copied{
background: var(--green);
border-color: rgba(0,120,60,0.25);
}
.tip-trigger{
width: 20px;
height: 20px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.2);
background: rgba(255,255,255,.7);
font-size: 12px;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.price-tip{
position: absolute;
left: 0;
top: calc(100% + 10px);
width: min(320px, 85vw);
padding: 12px 14px;
border-radius: 12px;
background: #0c1f2a; /* adjust to your brand colour */
color: #fff;
font-size: 14px;
line-height: 1.4;
box-shadow: 0 12px 30px rgba(0,0,0,.25);
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
z-index: 50;
}
/* Desktop hover + keyboard focus */
.price-with-tip:hover .price-tip,
.price-with-tip:focus-within .price-tip{
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Mobile open state */
.price-with-tip.is-open .price-tip{
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* ------------------------------
LIGHTBOX (Example Plans)
------------------------------ */
body.lb-open{
overflow: hidden;
touch-action: none; /* helps reduce background scroll on mobile */
}
.lb[hidden]{ display:none; }
.lb{
position: fixed;
inset: 0;
z-index: 10050; /* above header (9999) + drawer (10000) */
}
.lb__backdrop{
position:absolute;
inset:0;
background: rgba(0,10,10,.85);
}
.lb__dialog{
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 14px;
}
.lb__stage{
position: relative;
margin: 0;
width: min(1200px, 100%);
max-height: min(86dvh, 860px);
display: grid;
grid-template-rows: 1fr auto;
gap: 10px;
background: rgba(255,255,255,.96);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 18px 50px rgba(0,0,0,.22);
overflow: hidden;
}
.lb__img{
width: 100%;
height: 100%;
max-height: 68dvh;
object-fit: contain;
background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
display:block;
}
.lb__cap{
padding: 12px 14px 14px;
border-top: 1px solid var(--line);
background: rgba(255,255,255,.92);
}
.lb__capHead{
display:flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.lb__title{
font-size: 14px;
font-weight: 600;
color: rgba(0,0,0,.75);
}
.lb__count{
font-size: 12px;
font-weight: 600;
color: rgba(0,0,0,.45);
white-space: nowrap;
}
.lb__desc{
margin: 6px 0 0;
font-size: 14px;
color: var(--muted);
line-height: 1.45;
}
/* Close button (matches your tap target style) */
.lb__close{
position: fixed;
top: 12px;
right: 12px;
width: 44px;
height: 44px;
border-radius: 4px;
border: 1px solid var(--line);
background: rgba(255,255,255,.92);
color: #143E4F;
cursor: pointer;
display: grid;
place-items: center;
box-shadow: 0 8px 18px rgba(0,0,0,.15);
z-index: 10052;
font-size: 28px;
line-height: 1;
}
.lb__close:active{ transform: translateY(1px); }
/* Prev/Next */
.lb__nav{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255,255,255,.92);
color: rgba(0,0,0,.70);
cursor: pointer;
display: grid;
place-items: center;
box-shadow: 0 10px 22px rgba(0,0,0,.16);
z-index: 10051;
font-size: 30px;
line-height: 1;
}
.lb__prev{ left: 18px; }
.lb__next{ right: 18px; }
.lb__nav:disabled{
opacity: .45;
cursor: not-allowed;
}
/* Make nav less intrusive on small screens */
@media (max-width: 560px){
.lb__prev{ left: 10px; }
.lb__next{ right: 10px; }
.lb__nav{ width: 44px; height: 44px; }
.lb__img{ max-height: 64dvh; }
}
/* ------------------------------
CONTACT / FORMS
------------------------------ */
.contact-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.copy-email-btn {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.copy-email-btn .copy-icon {
opacity: 0.8;
transition: opacity 0.2s ease;
}
.copy-email-btn:hover .copy-icon {
opacity: 1;
}
.copy-email-btn.copied {
background-color: var(--green); /* Optional success feedback */
color: #fff;
}
.copy-email-btn.copied:hover {
background-color: var(--green); /* Optional success feedback */
color: #fff;
}
.form-field{
width: 100%;
padding: 14px 18px;
border: 0;
border-radius: 999px;
background: rgba(140,182,60,.18);
color: var(--ink);
font-family: var(--font-sans);
font-size: inherit; /* <- match body text */
font-weight: 400;
line-height: 1.5;
outline: none;
margin-bottom: 14px;
}
textarea.form-field{
border-radius: 16px;
resize: vertical;
min-height: 120px;
margin-bottom: 18px;
}
/* Placeholder styling */
.form-field::placeholder{
color: rgba(0,0,0,.38);
font-weight: 200; /* Inter Light */
}
.form-field:focus{ background: rgba(140,182,60,.35); color: rgba(0,0,0,.95); }
.form-alert{
margin: 12px 0 14px;
padding: 12px 14px;
border-radius: 14px;
font-size: 14px;
line-height: 1.35;
border: 1px solid transparent;
}
.form-alert.success{
background: rgba(140, 182, 60, 0.12);
border-color: rgba(140, 182, 60, 0.35);
}
.form-alert.error{
background: rgba(249, 160, 63, 0.12);
border-color: rgba(249, 160, 63, 0.40);
}
#contactSubmit.is-sending {
opacity: 0.7;
cursor: not-allowed;
}
#contactForm.is-sending {
pointer-events: none;
opacity: 0.95;
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
/* ------------------------------
FOOTER
------------------------------ */
footer{
margin-top: 18px;
border-top: 1px solid var(--line);
background: #0c222f;
}
.foot{
padding: 24px 0 34px;
display:grid;
grid-template-columns: 1.2fr .8fr .8fr;
gap: 18px;
}
.foot h3{
margin:0 0 8px;
font-size: 14px;
color: var(--green);
letter-spacing: .02em;
}
/* Footer text */
.foot p{
margin: 0;
color: var(--paper);
font-size: inherit;
font-weight: inherit;
line-height: 1.55;
}
/* Footer links (but NOT buttons) */
.foot a:not(.btn){
margin: 0;
color: var(--paper);
font-size: 14px;
line-height: 1.55;
font-weight: 400;
}
/* Footer buttons should keep global .btn typography */
.foot .btn{
font-size: inherit; /* or remove this line if your global .btn sets size */
font-weight: inherit; /* same: lets global button styling win */
}
.tiny{
padding: 10px 0 18px;
color: var(--green);
font-size: 12px;
}
/* ------------------------------
MOBILE DRAWER (full screen)
------------------------------ */
.overlay{
position: fixed;
inset: 0;
background: rgba(0,0,0,.38);
display:none;
z-index: 9998;
}
.overlay.open{ display:block; }
.drawer{
position: fixed;
inset: 0;
width: 100%;
height: 100dvh;
background: rgba(255,255,255,.98);
transform: translateX(102%);
transition: transform .22s ease;
z-index: 10000;
display:flex;
flex-direction: column;
overflow: hidden;
}
.drawer.open{ transform: translateX(0); }
.drawer-top{
position: relative;
z-index: 10002;
height: var(--header-h, 72px);
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
padding: 0 16px;
background: var(--blue);
border-bottom: none;
}
.drawer-title{
letter-spacing:-0.01em;
padding-left: 14px;
color: var(--paper);
font-size: 24px;
font-weight: 100;
}
.drawer-body{
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 12px 16px 16px;
display: grid;
gap: 12px;
}
.drawer .close{
position: fixed;
top: var(--burger-top, 12px);
right: var(--burger-right, 12px);
width: var(--burger-w, 44px);
height: var(--burger-h, 44px);
border-radius: 4px;
border: none;
background: rgba(255,255,255,.9);
color: #143E4F;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow: 0 8px 18px rgba(0,0,0,.15);
z-index: 10004;
}
.drawer a{
display:flex;
align-items:center;
justify-content: space-between;
padding: 12px 12px;
border-radius: 4px;
border: 1px solid var(--line);
background: rgba(0,0,0,.02);
font-weight: 900;
color: rgba(0,0,0,.72);
}
.drawer a:hover{
background: rgba(140,182,60,.10);
border-color: rgba(140,182,60,.30);
text-decoration:none;
}
.drawer .drawer-actions{
position: sticky;
bottom: 0;
background: rgba(255,255,255,.98);
padding: 12px 16px 16px;
border-top: 1px solid var(--line);
display:grid;
gap: 10px;
}
.drawer-actions .btn{
justify-content:center; width: 100%;
}
/* Drawer dropdown */
.drawer-toggle{
width: 100%;
display:flex;
align-items:center;
justify-content: space-between;
padding: 14px 12px;
border-radius: 4px;
border: 1px solid var(--line);
background: rgba(0,0,0,.02);
font-weight: 900;
font-size: 16px;
letter-spacing: -0.01em;
color: rgba(0,0,0,.72);
cursor: pointer;
}
.drawer-toggle:hover{
background: rgba(140,182,60,.10);
border-color: rgba(140,182,60,.30);
}
.drawer-sub{
position: relative;
display: grid;
gap: 8px;
padding: 10px 10px 4px 18px;
}
.drawer-sub::before{
content: "";
position: absolute;
top: 6px;
bottom: 4px;
left: 6px;
width: 1px;
background: rgba(0,0,0,.12);
}
.drawer-sub a{
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--line);
background: rgba(255,255,255,.7);
font-size: 14px;
font-weight: 600;
color: rgba(0,0,0,.65);
}
/* ------------------------------
RESPONSIVE
------------------------------ */
@media (max-width: 980px){
.hero-grid{ grid-template-columns: 1fr; }
.tiles{ grid-template-columns: repeat(2, 1fr); }
.steps{ grid-template-columns: repeat(2, 1fr); }
.reviews{ grid-template-columns: 1fr; }
.tri-grid{ grid-template-columns: repeat(2, 1fr); }
.foot{ grid-template-columns: 1fr; }
.contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
.step::after{ display:none; }
}
@media (max-width: 560px){
.tiles{ grid-template-columns: 1fr; }
.steps{ grid-template-columns: 1fr; }
.tri-grid{ grid-template-columns: 1fr; }
.slide{ min-width: 84vw; }
}