first version and docs
This commit is contained in:
albert
Vendored
BIN
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
Vendored
BIN
Binary file not shown.
|
After Width: | Height: | Size: 414 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
Vendored
BIN
Binary file not shown.
|
After Width: | Height: | Size: 380 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Vendored
+685
@@ -0,0 +1,685 @@
|
|||||||
|
/* =========================================================
|
||||||
|
Apex Turf — Landing Page Styles
|
||||||
|
========================================================= */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Brand palette */
|
||||||
|
--green-950: #0b1c13;
|
||||||
|
--green-900: #0f2818;
|
||||||
|
--green-800: #163a25;
|
||||||
|
--green-700: #1e4f31;
|
||||||
|
--green-600: #2c7a43;
|
||||||
|
--green-500: #3fae4a;
|
||||||
|
--green-400: #6fcf7a;
|
||||||
|
--green-100: #e7f5e9;
|
||||||
|
|
||||||
|
--orange-600: #d97b06;
|
||||||
|
--orange-500: #f5941e;
|
||||||
|
--orange-400: #ffb04d;
|
||||||
|
|
||||||
|
--ink-900: #14201a;
|
||||||
|
--ink-700: #3a463f;
|
||||||
|
--ink-500: #63736a;
|
||||||
|
--ink-300: #9fb0a6;
|
||||||
|
|
||||||
|
--cream-50: #f8f9f4;
|
||||||
|
--cream-100: #f1f3ec;
|
||||||
|
--white: #ffffff;
|
||||||
|
|
||||||
|
--shadow-sm: 0 2px 8px rgba(14, 30, 20, 0.08);
|
||||||
|
--shadow-md: 0 8px 24px rgba(14, 30, 20, 0.14);
|
||||||
|
--shadow-lg: 0 20px 48px rgba(14, 30, 20, 0.22);
|
||||||
|
|
||||||
|
--radius-sm: 8px;
|
||||||
|
--radius-md: 14px;
|
||||||
|
--radius-lg: 22px;
|
||||||
|
|
||||||
|
--font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
|
||||||
|
--font-body: "Inter", "Segoe UI", system-ui, sans-serif;
|
||||||
|
|
||||||
|
--header-h: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Reset ---------- */
|
||||||
|
* , *::before, *::after { box-sizing: border-box; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
color: var(--ink-900);
|
||||||
|
background: var(--cream-50);
|
||||||
|
line-height: 1.6;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
img { max-width: 100%; display: block; }
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
ul { list-style: none; margin: 0; padding: 0; }
|
||||||
|
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5em; color: var(--green-950); }
|
||||||
|
p { margin: 0 0 1em; }
|
||||||
|
button { font-family: inherit; cursor: pointer; }
|
||||||
|
section { position: relative; }
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1240px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
svg.icon { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
html { scroll-behavior: auto; }
|
||||||
|
* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Reveal on scroll ---------- */
|
||||||
|
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
|
||||||
|
.reveal.is-visible { opacity: 1; transform: translateY(0); }
|
||||||
|
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }
|
||||||
|
|
||||||
|
/* ---------- Buttons ---------- */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: .5em;
|
||||||
|
padding: 14px 28px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: .95rem;
|
||||||
|
letter-spacing: .02em;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.btn:active { transform: translateY(1px); }
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(135deg, var(--orange-500), var(--orange-600));
|
||||||
|
color: var(--white);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
.btn-primary:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
|
||||||
|
.btn-outline {
|
||||||
|
background: transparent;
|
||||||
|
border-color: currentColor;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
.btn-outline:hover { background: rgba(255,255,255,.12); }
|
||||||
|
.btn-ghost {
|
||||||
|
background: var(--green-100);
|
||||||
|
color: var(--green-800);
|
||||||
|
}
|
||||||
|
.btn-ghost:hover { background: var(--green-500); color: var(--white); }
|
||||||
|
.btn-block { width: 100%; justify-content: center; }
|
||||||
|
.btn-sm { padding: 10px 20px; font-size: .85rem; }
|
||||||
|
|
||||||
|
/* ---------- Eyebrow / badges ---------- */
|
||||||
|
.eyebrow {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: .5em;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: .78rem;
|
||||||
|
letter-spacing: .12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--orange-500);
|
||||||
|
margin-bottom: .9em;
|
||||||
|
}
|
||||||
|
.eyebrow::before {
|
||||||
|
content: "";
|
||||||
|
width: 22px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--orange-500);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.eyebrow.light { color: var(--green-400); }
|
||||||
|
|
||||||
|
.section-head { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
|
||||||
|
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
|
||||||
|
.section-head p { color: var(--ink-500); font-size: 1.05rem; }
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
Header
|
||||||
|
========================================================= */
|
||||||
|
.site-header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0; left: 0; right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
height: var(--header-h);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(180deg, rgba(11,28,19,.92), rgba(11,28,19,.75));
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
transition: background .3s ease, box-shadow .3s ease, height .3s ease;
|
||||||
|
}
|
||||||
|
.site-header.is-scrolled {
|
||||||
|
background: rgba(9, 22, 15, .96);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
height: 68px;
|
||||||
|
}
|
||||||
|
.site-header .container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.brand { display: flex; align-items: center; gap: .6em; }
|
||||||
|
.brand img { height: 34px; width: auto; }
|
||||||
|
|
||||||
|
.main-nav { display: flex; }
|
||||||
|
.main-nav ul { display: flex; gap: 2rem; }
|
||||||
|
.main-nav a {
|
||||||
|
position: relative;
|
||||||
|
font-size: .92rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(255,255,255,.82);
|
||||||
|
padding: 8px 2px;
|
||||||
|
transition: color .2s ease;
|
||||||
|
}
|
||||||
|
.main-nav a::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0; right: 0; bottom: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--green-400);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: left;
|
||||||
|
transition: transform .25s ease;
|
||||||
|
}
|
||||||
|
.main-nav a:hover, .main-nav a.is-active { color: var(--white); }
|
||||||
|
.main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1); }
|
||||||
|
|
||||||
|
.header-actions { display: flex; align-items: center; gap: 14px; }
|
||||||
|
.nav-toggle {
|
||||||
|
display: none;
|
||||||
|
width: 42px; height: 42px;
|
||||||
|
border: none;
|
||||||
|
background: rgba(255,255,255,.08);
|
||||||
|
border-radius: 10px;
|
||||||
|
color: var(--white);
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.nav-toggle svg { width: 22px; height: 22px; }
|
||||||
|
.nav-toggle .icon-close { display: none; }
|
||||||
|
.nav-open .nav-toggle .icon-menu { display: none; }
|
||||||
|
.nav-open .nav-toggle .icon-close { display: block; }
|
||||||
|
|
||||||
|
@media (max-width: 920px) {
|
||||||
|
.main-nav {
|
||||||
|
position: fixed;
|
||||||
|
top: var(--header-h); left: 0; right: 0;
|
||||||
|
background: rgba(9, 22, 15, .98);
|
||||||
|
flex-direction: column;
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height .35s ease;
|
||||||
|
}
|
||||||
|
.main-nav ul { flex-direction: column; gap: 0; padding: 10px 24px 20px; }
|
||||||
|
.main-nav a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
|
||||||
|
.nav-open .main-nav { max-height: 480px; }
|
||||||
|
.nav-toggle { display: inline-flex; }
|
||||||
|
.header-actions .btn-primary.desktop-only { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
Hero
|
||||||
|
========================================================= */
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-top: var(--header-h);
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--green-950);
|
||||||
|
}
|
||||||
|
.hero-split {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
|
||||||
|
min-height: calc(100vh - var(--header-h));
|
||||||
|
}
|
||||||
|
.hero-pane {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding: 60px 5vw 70px;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 480px;
|
||||||
|
}
|
||||||
|
.hero-pane .pane-bg {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
.hero-pane .pane-overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
.pane-left .pane-overlay {
|
||||||
|
background: linear-gradient(180deg, rgba(9,20,13,.55) 0%, rgba(9,20,13,.25) 40%, rgba(9,20,13,.85) 100%);
|
||||||
|
}
|
||||||
|
.pane-right .pane-overlay {
|
||||||
|
background: linear-gradient(180deg, rgba(6,12,20,.6) 0%, rgba(6,12,20,.3) 40%, rgba(6,12,20,.9) 100%);
|
||||||
|
}
|
||||||
|
.hero-pane::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0; bottom: 0;
|
||||||
|
width: 140px;
|
||||||
|
z-index: 3;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.pane-left::after {
|
||||||
|
right: -70px;
|
||||||
|
background: linear-gradient(100deg, transparent 45%, rgba(63,174,74,.9) 49%, rgba(111,207,122,.7) 51%, transparent 55%);
|
||||||
|
}
|
||||||
|
.hero-content { position: relative; z-index: 2; max-width: 480px; color: var(--white); }
|
||||||
|
.hero-content h1, .hero-content h2 { color: var(--white); }
|
||||||
|
.pane-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: .76rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: .14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 6px 14px;
|
||||||
|
border-radius: 999px;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
.pane-left .pane-badge { background: rgba(111,207,122,.18); color: var(--green-400); border: 1px solid rgba(111,207,122,.4); }
|
||||||
|
.pane-right .pane-badge { background: rgba(245,148,30,.18); color: var(--orange-400); border: 1px solid rgba(245,148,30,.4); }
|
||||||
|
.hero-content h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
|
||||||
|
.hero-content h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
|
||||||
|
.hero-content .sub { color: rgba(255,255,255,.85); font-size: 1.02rem; max-width: 420px; }
|
||||||
|
|
||||||
|
.pane-stats { display: flex; gap: 22px; margin: 1.3em 0 1.5em; flex-wrap: wrap; }
|
||||||
|
.pane-stats .stat { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.9); }
|
||||||
|
.pane-stats .stat span.ico {
|
||||||
|
width: 42px; height: 42px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
background: rgba(255,255,255,.12);
|
||||||
|
border: 1px solid rgba(255,255,255,.25);
|
||||||
|
}
|
||||||
|
.pane-stats .stat svg { width: 20px; height: 20px; }
|
||||||
|
|
||||||
|
/* Right pane tabs */
|
||||||
|
.pane-tabs {
|
||||||
|
position: absolute;
|
||||||
|
top: 34px; right: 5vw;
|
||||||
|
z-index: 4;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.pane-tabs button {
|
||||||
|
width: 44px; height: 44px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid rgba(255,255,255,.35);
|
||||||
|
background: rgba(0,0,0,.25);
|
||||||
|
color: rgba(255,255,255,.75);
|
||||||
|
font-size: .78rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
transition: all .25s ease;
|
||||||
|
}
|
||||||
|
.pane-tabs button.is-active {
|
||||||
|
background: var(--orange-500);
|
||||||
|
border-color: var(--orange-500);
|
||||||
|
color: var(--white);
|
||||||
|
transform: scale(1.08);
|
||||||
|
}
|
||||||
|
.right-scenes { position: absolute; inset: 0; }
|
||||||
|
.right-scene {
|
||||||
|
position: absolute; inset: 0;
|
||||||
|
padding: 60px 5vw 70px;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity .6s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
.right-scene.is-active { opacity: 1; visibility: visible; }
|
||||||
|
|
||||||
|
.hero-divider {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%; top: 0; bottom: 0;
|
||||||
|
width: 2px;
|
||||||
|
background: rgba(255,255,255,.15);
|
||||||
|
transform: skewX(-8deg) translateX(-1px);
|
||||||
|
z-index: 3;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media (min-width: 700px) { .hero-divider { display: block; } }
|
||||||
|
|
||||||
|
.scroll-cue {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 22px; left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 5;
|
||||||
|
color: rgba(255,255,255,.6);
|
||||||
|
font-size: .72rem;
|
||||||
|
letter-spacing: .1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||||
|
animation: bob 2.2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.hero-split { grid-template-columns: minmax(0,1fr); }
|
||||||
|
.hero-pane { min-height: 60vh; padding: 40px 24px 48px; }
|
||||||
|
.pane-left::after { display: none; }
|
||||||
|
.pane-tabs { top: 18px; right: 18px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
Value Pillars
|
||||||
|
========================================================= */
|
||||||
|
.pillars { background: var(--white); padding: 100px 0; }
|
||||||
|
.pillar-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
|
||||||
|
.pillar-card {
|
||||||
|
background: var(--cream-50);
|
||||||
|
border: 1px solid rgba(20,32,26,.06);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: 30px 24px;
|
||||||
|
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
|
||||||
|
}
|
||||||
|
.pillar-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
|
||||||
|
.pillar-card.accent { background: linear-gradient(160deg, #fff6e8, #fdecc9); border-color: rgba(217,123,6,.2); }
|
||||||
|
.pillar-icon {
|
||||||
|
width: 52px; height: 52px;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: var(--green-100);
|
||||||
|
color: var(--green-700);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
.pillar-card.accent .pillar-icon { background: #fce3b8; color: var(--orange-600); }
|
||||||
|
.pillar-icon svg { width: 26px; height: 26px; }
|
||||||
|
.pillar-card h3 { font-size: 1.08rem; }
|
||||||
|
.pillar-card p { color: var(--ink-500); font-size: .94rem; margin-bottom: 0; }
|
||||||
|
|
||||||
|
@media (max-width: 980px) { .pillar-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
|
||||||
|
@media (max-width: 560px) { .pillar-grid { grid-template-columns: minmax(0,1fr); } }
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
Specialties quick-grid
|
||||||
|
========================================================= */
|
||||||
|
.specialties { padding: 100px 0 70px; background: var(--cream-100); }
|
||||||
|
.specialty-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
|
||||||
|
.specialty-card {
|
||||||
|
position: relative;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
aspect-ratio: 3/4;
|
||||||
|
color: var(--white);
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
transition: transform .3s ease, box-shadow .3s ease;
|
||||||
|
}
|
||||||
|
.specialty-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
|
||||||
|
.specialty-card img {
|
||||||
|
position: absolute; inset: 0;
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform .5s ease;
|
||||||
|
}
|
||||||
|
.specialty-card:hover img { transform: scale(1.08); }
|
||||||
|
.specialty-card .scrim {
|
||||||
|
position: absolute; inset: 0;
|
||||||
|
background: linear-gradient(180deg, rgba(11,28,19,0) 30%, rgba(9,18,13,.92) 100%);
|
||||||
|
}
|
||||||
|
.specialty-card .card-body { position: relative; z-index: 2; padding: 22px; }
|
||||||
|
.specialty-card .tag { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-400); }
|
||||||
|
.specialty-card h3 { color: var(--white); font-size: 1.15rem; margin: .3em 0 .4em; }
|
||||||
|
.specialty-card p { color: rgba(255,255,255,.78); font-size: .85rem; margin-bottom: .6em; }
|
||||||
|
.specialty-card .card-link { font-size: .82rem; font-weight: 700; color: var(--orange-400); display: inline-flex; align-items: center; gap: 4px; }
|
||||||
|
.specialty-card .card-link svg { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||||
|
.specialty-card:hover .card-link svg { transform: translateX(4px); }
|
||||||
|
|
||||||
|
@media (max-width: 980px) { .specialty-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
|
||||||
|
@media (max-width: 560px) { .specialty-grid { grid-template-columns: minmax(0,1fr); } .specialty-card { aspect-ratio: 16/10; } }
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
Detail sections (alternating)
|
||||||
|
========================================================= */
|
||||||
|
.detail { padding: 96px 0; }
|
||||||
|
.detail:nth-of-type(even) { background: var(--white); }
|
||||||
|
.detail-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
|
||||||
|
gap: 60px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.detail.reverse .detail-grid { direction: rtl; }
|
||||||
|
.detail.reverse .detail-grid > * { direction: ltr; }
|
||||||
|
.detail-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
|
||||||
|
.detail-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
|
||||||
|
.detail-media .media-badge {
|
||||||
|
position: absolute; bottom: 18px; left: 18px;
|
||||||
|
background: rgba(11,28,19,.85);
|
||||||
|
color: var(--white);
|
||||||
|
padding: 10px 16px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: .82rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: flex; align-items: center; gap: 8px;
|
||||||
|
}
|
||||||
|
.detail-media .media-badge svg { width: 16px; height: 16px; color: var(--green-400); }
|
||||||
|
.detail-text h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
|
||||||
|
.detail-text p.lead { font-size: 1.05rem; color: var(--ink-700); }
|
||||||
|
.feature-list { display: flex; flex-direction: column; gap: 14px; margin: 1.6em 0 2em; }
|
||||||
|
.feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .96rem; color: var(--ink-700); }
|
||||||
|
.feature-list .check {
|
||||||
|
flex: none;
|
||||||
|
width: 24px; height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--green-100);
|
||||||
|
color: var(--green-700);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
.feature-list .check svg { width: 13px; height: 13px; }
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.detail-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
|
||||||
|
.detail.reverse .detail-grid { direction: ltr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
About
|
||||||
|
========================================================= */
|
||||||
|
.about { background: var(--green-950); color: var(--white); padding: 110px 0; position: relative; overflow: hidden; }
|
||||||
|
.about::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute; inset: 0;
|
||||||
|
background: radial-gradient(circle at 15% 20%, rgba(63,174,74,.18), transparent 45%),
|
||||||
|
radial-gradient(circle at 85% 80%, rgba(245,148,30,.12), transparent 40%);
|
||||||
|
}
|
||||||
|
.about .container { position: relative; z-index: 1; }
|
||||||
|
.about-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 60px; align-items: start; }
|
||||||
|
.about h2 { color: var(--white); font-size: clamp(1.7rem, 3vw, 2.3rem); }
|
||||||
|
.about p.lead { color: rgba(255,255,255,.8); font-size: 1.05rem; }
|
||||||
|
.about blockquote {
|
||||||
|
margin: 1.6em 0 0;
|
||||||
|
padding: 20px 24px;
|
||||||
|
border-left: 3px solid var(--green-400);
|
||||||
|
background: rgba(255,255,255,.05);
|
||||||
|
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||||||
|
font-style: italic;
|
||||||
|
color: rgba(255,255,255,.85);
|
||||||
|
}
|
||||||
|
.guarantee-cards { display: flex; flex-direction: column; gap: 20px; }
|
||||||
|
.guarantee-card {
|
||||||
|
background: rgba(255,255,255,.06);
|
||||||
|
border: 1px solid rgba(255,255,255,.12);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: 26px;
|
||||||
|
}
|
||||||
|
.guarantee-card .g-icon {
|
||||||
|
width: 46px; height: 46px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(111,207,122,.16);
|
||||||
|
color: var(--green-400);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.guarantee-card .g-icon svg { width: 22px; height: 22px; }
|
||||||
|
.guarantee-card h3 { color: var(--white); font-size: 1.05rem; }
|
||||||
|
.guarantee-card p { color: rgba(255,255,255,.72); font-size: .92rem; margin-bottom: 0; }
|
||||||
|
|
||||||
|
@media (max-width: 900px) { .about-grid { grid-template-columns: minmax(0,1fr); } }
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
Gallery showcase
|
||||||
|
========================================================= */
|
||||||
|
.showcase { padding: 100px 0; background: var(--cream-50); }
|
||||||
|
.showcase-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
|
||||||
|
.showcase-item {
|
||||||
|
position: relative;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
overflow: hidden;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
}
|
||||||
|
.showcase-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
|
||||||
|
.showcase-item:hover img { transform: scale(1.1); }
|
||||||
|
.showcase-item .cap {
|
||||||
|
position: absolute; inset: auto 0 0 0;
|
||||||
|
background: linear-gradient(180deg, transparent, rgba(9,18,13,.88));
|
||||||
|
color: var(--white);
|
||||||
|
padding: 14px 16px 12px;
|
||||||
|
font-size: .82rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: .04em;
|
||||||
|
}
|
||||||
|
@media (max-width: 760px) { .showcase-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
Contact / Quote form
|
||||||
|
========================================================= */
|
||||||
|
.contact { padding: 110px 0; background: linear-gradient(160deg, var(--green-900), var(--green-950)); color: var(--white); }
|
||||||
|
.contact-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 56px; }
|
||||||
|
.contact-info h2 { color: var(--white); font-size: clamp(1.7rem, 3vw, 2.3rem); }
|
||||||
|
.contact-info p { color: rgba(255,255,255,.78); }
|
||||||
|
.contact-list { display: flex; flex-direction: column; gap: 18px; margin-top: 1.8em; }
|
||||||
|
.contact-list li { display: flex; align-items: center; gap: 14px; font-size: .96rem; }
|
||||||
|
.contact-list .c-icon {
|
||||||
|
width: 42px; height: 42px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255,255,255,.08);
|
||||||
|
color: var(--green-400);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
.contact-list .c-icon svg { width: 19px; height: 19px; }
|
||||||
|
.social-row { display: flex; gap: 12px; margin-top: 2em; }
|
||||||
|
.social-row a {
|
||||||
|
width: 40px; height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255,255,255,.08);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
transition: background .2s ease, transform .2s ease;
|
||||||
|
}
|
||||||
|
.social-row a:hover { background: var(--green-500); transform: translateY(-3px); }
|
||||||
|
.social-row svg { width: 18px; height: 18px; }
|
||||||
|
|
||||||
|
.quote-form {
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 34px;
|
||||||
|
color: var(--ink-900);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
.form-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
|
||||||
|
.field { margin-bottom: 16px; }
|
||||||
|
.field label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 6px; color: var(--ink-700); }
|
||||||
|
.field input, .field select, .field textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1.5px solid #e1e5de;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: .95rem;
|
||||||
|
background: var(--cream-50);
|
||||||
|
transition: border-color .2s ease, box-shadow .2s ease;
|
||||||
|
}
|
||||||
|
.field input:focus, .field select:focus, .field textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--green-500);
|
||||||
|
box-shadow: 0 0 0 4px rgba(63,174,74,.15);
|
||||||
|
}
|
||||||
|
.field textarea { resize: vertical; min-height: 90px; }
|
||||||
|
.form-note { font-size: .78rem; color: var(--ink-500); margin-top: 10px; text-align: center; }
|
||||||
|
.form-success {
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
background: var(--green-100);
|
||||||
|
color: var(--green-800);
|
||||||
|
padding: 16px 18px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: .92rem;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
.form-success.show { display: flex; }
|
||||||
|
.form-success svg { width: 20px; height: 20px; flex: none; }
|
||||||
|
|
||||||
|
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0,1fr); } }
|
||||||
|
@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0,1fr); } }
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
Footer
|
||||||
|
========================================================= */
|
||||||
|
.site-footer { background: #081810; color: rgba(255,255,255,.7); padding: 70px 0 0; }
|
||||||
|
.footer-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);
|
||||||
|
gap: 40px;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,.08);
|
||||||
|
}
|
||||||
|
.footer-brand img { height: 30px; margin-bottom: 16px; }
|
||||||
|
.footer-brand p { font-size: .9rem; max-width: 280px; color: rgba(255,255,255,.6); }
|
||||||
|
.footer-col h4 { color: var(--white); font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
|
||||||
|
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
|
||||||
|
.footer-col a { font-size: .92rem; color: rgba(255,255,255,.65); transition: color .2s ease; }
|
||||||
|
.footer-col a:hover { color: var(--green-400); }
|
||||||
|
.footer-col .foot-contact { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; }
|
||||||
|
.footer-col .foot-contact svg { width: 16px; height: 16px; margin-top: 3px; color: var(--green-400); flex: none; }
|
||||||
|
.footer-bottom {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 24px 0;
|
||||||
|
font-size: .82rem;
|
||||||
|
color: rgba(255,255,255,.5);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.footer-bottom .legal-links { display: flex; gap: 20px; }
|
||||||
|
|
||||||
|
@media (max-width: 860px) { .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
|
||||||
|
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0,1fr); } }
|
||||||
|
|
||||||
|
/* ---------- Back to top ---------- */
|
||||||
|
.back-to-top {
|
||||||
|
position: fixed;
|
||||||
|
right: 24px; bottom: 24px;
|
||||||
|
width: 46px; height: 46px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--green-500);
|
||||||
|
color: var(--white);
|
||||||
|
border: none;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
opacity: 0; visibility: hidden;
|
||||||
|
transform: translateY(10px);
|
||||||
|
transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease;
|
||||||
|
z-index: 90;
|
||||||
|
}
|
||||||
|
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
|
||||||
|
.back-to-top:hover { background: var(--green-600); }
|
||||||
|
.back-to-top svg { width: 20px; height: 20px; }
|
||||||
Vendored
+469
@@ -0,0 +1,469 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Apex Turf | Premium Artificial Turf Installations — Spain</title>
|
||||||
|
<meta name="description" content="Apex Turf designs and installs premium artificial turf for homes, pádel courts, football pitches and golf greens across Spain. Master installers, custom quotes, free samples.">
|
||||||
|
<link rel="icon" type="image/png" href="assets/images/logos/apexturf-icon.png">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
<noscript><style>.reveal{opacity:1!important;transform:none!important;}</style></noscript>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ============ HEADER ============ -->
|
||||||
|
<header class="site-header" id="siteHeader">
|
||||||
|
<div class="container">
|
||||||
|
<a href="#home" class="brand">
|
||||||
|
<img src="assets/images/logos/apexturf-logo.png" alt="Apex Turf">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="main-nav" id="mainNav" aria-label="Primary">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#home" class="is-active">Home</a></li>
|
||||||
|
<li><a href="#landscaping">Landscaping</a></li>
|
||||||
|
<li><a href="#padel">Pádel</a></li>
|
||||||
|
<li><a href="#football">Football</a></li>
|
||||||
|
<li><a href="#golf">Golf</a></li>
|
||||||
|
<li><a href="#about">About Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="header-actions">
|
||||||
|
<a href="#contact" class="btn btn-primary desktop-only">Get Samples & Quote</a>
|
||||||
|
<button class="nav-toggle" id="navToggle" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="mainNav">
|
||||||
|
<svg class="icon icon-menu" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||||||
|
<svg class="icon icon-close" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- ============ HERO ============ -->
|
||||||
|
<section class="hero" id="home">
|
||||||
|
<div class="hero-split">
|
||||||
|
<div class="hero-divider" aria-hidden="true"></div>
|
||||||
|
|
||||||
|
<!-- Left pane: Residential / Landscaping (fixed) -->
|
||||||
|
<div class="hero-pane pane-left">
|
||||||
|
<div class="pane-bg" style="background-image:url('assets/images/animals/lion.jpg')"></div>
|
||||||
|
<div class="pane-overlay"></div>
|
||||||
|
<div class="hero-content">
|
||||||
|
<span class="pane-badge">Residential Turf</span>
|
||||||
|
<h1>The King of Lawns</h1>
|
||||||
|
<p class="sub">Transform your mud-pit, patchy lawn, or tired garden into a flawless, evergreen sanctuary — engineered for family life and built to last across Spain.</p>
|
||||||
|
<div class="pane-stats">
|
||||||
|
<div class="stat">
|
||||||
|
<span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M4.5 12.5c0-1.1.9-2 2-2s2 .9 2 2-1 4-2 4-2-2.9-2-4Z"/><path d="M15.5 12.5c0-1.1.9-2 2-2s2 .9 2 2-1 4-2 4-2-2.9-2-4Z"/><path d="M9 8c0-1.4 1.1-3 2.5-3S14 6.6 14 8s-1 3.5-2.5 3.5S9 9.4 9 8Z"/><path d="M8 20c0-2.8 1.8-5 4-5s4 2.2 4 5"/></svg></span>
|
||||||
|
Pets
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<span class="ico"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="6" r="2.5"/><path d="M6 21v-4a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v4"/><path d="M9 14l-2 7M15 14l2 7"/></svg></span>
|
||||||
|
Kids
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M12 3c4 3 6 6 6 10a6 6 0 0 1-12 0c0-4 2-7 6-10Z"/></svg></span>
|
||||||
|
Low Maintenance
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#contact" class="btn btn-ghost">Get a Free Quote</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right pane: rotating Sport turf (Pádel / Football / Golf) -->
|
||||||
|
<div class="hero-pane pane-right">
|
||||||
|
<div class="pane-tabs" id="heroTabs" role="tablist" aria-label="Sport turf specialties">
|
||||||
|
<button type="button" role="tab" data-scene="padel" class="is-active" aria-selected="true">P</button>
|
||||||
|
<button type="button" role="tab" data-scene="football" aria-selected="false">F</button>
|
||||||
|
<button type="button" role="tab" data-scene="golf" aria-selected="false">G</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right-scenes" id="rightScenes">
|
||||||
|
|
||||||
|
<div class="right-scene is-active" data-scene="padel">
|
||||||
|
<div class="pane-bg" style="background-image:url('assets/images/animals/shark.jpg')"></div>
|
||||||
|
<div class="pane-overlay"></div>
|
||||||
|
<div class="hero-content">
|
||||||
|
<span class="pane-badge">Pádel Court Turf</span>
|
||||||
|
<h2>Professional Pádel Turf & Court Resurfacing</h2>
|
||||||
|
<p class="sub">Built for explosive footwork, rapid drainage, and intense tournament play — courts engineered to outlast the competition.</p>
|
||||||
|
<div class="pane-stats">
|
||||||
|
<div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M12 2 2 7l10 5 10-5-10-5Z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg></span>Durability</div>
|
||||||
|
<div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></svg></span>Fast Drainage</div>
|
||||||
|
<div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/></svg></span>Custom Colors</div>
|
||||||
|
</div>
|
||||||
|
<a href="#padel" class="btn btn-primary">Request Court Audit</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right-scene" data-scene="football">
|
||||||
|
<div class="pane-bg" style="background-image:url('assets/images/animals/panther.jpg')"></div>
|
||||||
|
<div class="pane-overlay"></div>
|
||||||
|
<div class="hero-content">
|
||||||
|
<span class="pane-badge">Football & Multisport</span>
|
||||||
|
<h2>High-Performance Pitches & Multisport Surfaces</h2>
|
||||||
|
<p class="sub">Engineered for explosive speed, heavy multi-directional traction, and professional ball roll — from 5-a-side arenas to multisport complexes.</p>
|
||||||
|
<div class="pane-stats">
|
||||||
|
<div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M4 12h16M8 6l-4 6 4 6M16 6l4 6-4 6"/></svg></span>High Traction</div>
|
||||||
|
<div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M12 2 3 7v6c0 5 4 8 9 9 5-1 9-4 9-9V7l-9-5Z"/></svg></span>Heavy-Duty</div>
|
||||||
|
<div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M3 12h3m12 0h3M12 3v3m0 12v3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1M5.6 18.4l2.1-2.1m8.6-8.6 2.1-2.1"/><circle cx="12" cy="12" r="3"/></svg></span>All-Weather</div>
|
||||||
|
</div>
|
||||||
|
<a href="#football" class="btn btn-primary">Request Pitch Audit</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right-scene" data-scene="golf">
|
||||||
|
<div class="pane-bg" style="background-image:url('assets/images/animals/eagle.jpg')"></div>
|
||||||
|
<div class="pane-overlay"></div>
|
||||||
|
<div class="hero-content">
|
||||||
|
<span class="pane-badge">Golf & Putting Greens</span>
|
||||||
|
<h2>Custom Putting Greens for Luxury Villas</h2>
|
||||||
|
<p class="sub">Bring the course to your backyard. Precision-engineered greens built for true roll, flawless breaks, and championship performance at home.</p>
|
||||||
|
<div class="pane-stats">
|
||||||
|
<div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M2 12h3m14 0h3M12 2v3m0 14v3"/></svg></span>Perfect Roll</div>
|
||||||
|
<div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M6 21V4l11 4-6 3 6 3-11 4"/></svg></span>Custom Contours</div>
|
||||||
|
<div class="stat"><span class="ico"><svg class="icon" viewBox="0 0 24 24"><path d="M12 3c4 3 6 6 6 10a6 6 0 0 1-12 0c0-4 2-7 6-10Z"/></svg></span>All-Weather</div>
|
||||||
|
</div>
|
||||||
|
<a href="#golf" class="btn btn-primary">Request Green Design</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="scroll-cue" aria-hidden="true">
|
||||||
|
<span>Scroll</span>
|
||||||
|
<svg class="icon" viewBox="0 0 24 24" style="width:16px;height:16px;"><path d="M12 4v16M6 14l6 6 6-6"/></svg>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ VALUE PILLARS ============ -->
|
||||||
|
<section class="pillars">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head reveal">
|
||||||
|
<span class="eyebrow" style="justify-content:center">Why Apex Turf</span>
|
||||||
|
<h2>Engineered For Real Life</h2>
|
||||||
|
<p>Total honesty, real performance. Every installation is matched to how you actually live, play, and compete.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pillar-grid reveal-stagger">
|
||||||
|
<div class="pillar-card reveal" style="--i:0">
|
||||||
|
<div class="pillar-icon"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="6" r="2.5"/><path d="M6 21v-4a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v4"/></svg></div>
|
||||||
|
<h3>Child & Family Safe</h3>
|
||||||
|
<p>Soft, non-toxic, mud-free surfaces where kids can play safely all year round without tracking dirt back into the house.</p>
|
||||||
|
</div>
|
||||||
|
<div class="pillar-card reveal" style="--i:1">
|
||||||
|
<div class="pillar-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M4.5 12.5c0-1.1.9-2 2-2s2 .9 2 2-1 4-2 4-2-2.9-2-4Z"/><path d="M15.5 12.5c0-1.1.9-2 2-2s2 .9 2 2-1 4-2 4-2-2.9-2-4Z"/><path d="M9 8c0-1.4 1.1-3 2.5-3S14 6.6 14 8s-1 3.5-2.5 3.5S9 9.4 9 8Z"/></svg></div>
|
||||||
|
<h3>Pet-Friendly Systems</h3>
|
||||||
|
<p>Superior drainage and odor-control backing so dogs can run hard without tearing up or damaging the yard.</p>
|
||||||
|
</div>
|
||||||
|
<div class="pillar-card reveal" style="--i:2">
|
||||||
|
<div class="pillar-icon"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1M5.6 18.4l2.1-2.1m8.6-8.6 2.1-2.1"/></svg></div>
|
||||||
|
<h3>Built for Spanish Weather</h3>
|
||||||
|
<p>High-grade UV-stabilized fibers that withstand intense summer heat and solar exposure without fading or burning.</p>
|
||||||
|
</div>
|
||||||
|
<div class="pillar-card accent reveal" style="--i:3">
|
||||||
|
<div class="pillar-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11"/></svg></div>
|
||||||
|
<h3>Low Maintenance, Not No Maintenance</h3>
|
||||||
|
<p>Total honesty — throw away the lawnmower and weed killer. Upkeep means a quick brush, clearing leaves, and occasional rinsing.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ SPECIALTIES QUICK GRID ============ -->
|
||||||
|
<section class="specialties" id="specialties">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head reveal">
|
||||||
|
<span class="eyebrow" style="justify-content:center">Our Specialties</span>
|
||||||
|
<h2>One Team, Four Disciplines</h2>
|
||||||
|
<p>From backyard lawns to tournament-grade courts — every surface is sourced and engineered for its sport.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="specialty-grid reveal-stagger">
|
||||||
|
<a href="#landscaping" class="specialty-card reveal" style="--i:0">
|
||||||
|
<img src="assets/images/animals/lion.jpg" alt="Residential landscaping turf" loading="lazy">
|
||||||
|
<div class="scrim"></div>
|
||||||
|
<div class="card-body">
|
||||||
|
<span class="tag">Landscaping</span>
|
||||||
|
<h3>Residential Turf</h3>
|
||||||
|
<p>Premium lawns for family living.</p>
|
||||||
|
<span class="card-link">Explore <svg class="icon" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#padel" class="specialty-card reveal" style="--i:1">
|
||||||
|
<img src="assets/images/animals/shark.jpg" alt="Pádel court turf" loading="lazy">
|
||||||
|
<div class="scrim"></div>
|
||||||
|
<div class="card-body">
|
||||||
|
<span class="tag">Pádel</span>
|
||||||
|
<h3>Court Resurfacing</h3>
|
||||||
|
<p>Tournament-grade performance.</p>
|
||||||
|
<span class="card-link">Explore <svg class="icon" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#football" class="specialty-card reveal" style="--i:2">
|
||||||
|
<img src="assets/images/animals/panther.jpg" alt="Football pitch turf" loading="lazy">
|
||||||
|
<div class="scrim"></div>
|
||||||
|
<div class="card-body">
|
||||||
|
<span class="tag">Football</span>
|
||||||
|
<h3>Pitches & Multisport</h3>
|
||||||
|
<p>Built for explosive speed.</p>
|
||||||
|
<span class="card-link">Explore <svg class="icon" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#golf" class="specialty-card reveal" style="--i:3">
|
||||||
|
<img src="assets/images/animals/eagle.jpg" alt="Golf putting green turf" loading="lazy">
|
||||||
|
<div class="scrim"></div>
|
||||||
|
<div class="card-body">
|
||||||
|
<span class="tag">Golf</span>
|
||||||
|
<h3>Putting Greens</h3>
|
||||||
|
<p>Championship performance.</p>
|
||||||
|
<span class="card-link">Explore <svg class="icon" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ DETAIL: LANDSCAPING ============ -->
|
||||||
|
<section class="detail" id="landscaping">
|
||||||
|
<div class="container detail-grid">
|
||||||
|
<div class="detail-media reveal">
|
||||||
|
<img src="assets/images/animals/lion.jpg" alt="Lush residential lawn installation">
|
||||||
|
<span class="media-badge"><svg class="icon" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/></svg>The King of Lawns</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-text reveal">
|
||||||
|
<span class="eyebrow">Residential Turf</span>
|
||||||
|
<h2>Transform Your Home Garden</h2>
|
||||||
|
<p class="lead">Whether you have high-energy dogs tearing up the grass, kids needing a safe space to play, or you just want a stunning, low-maintenance lounge to relax and entertain in — we match the exact turf model to your unique lifestyle.</p>
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Soft, non-toxic, mud-free surfaces for kids and pets</li>
|
||||||
|
<li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Superior drainage and odor-control backing</li>
|
||||||
|
<li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>UV-stabilized fibers built for Spanish summers</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="btn btn-primary">Build Your Project & Claim Free Samples</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ DETAIL: PADEL ============ -->
|
||||||
|
<section class="detail reverse" id="padel">
|
||||||
|
<div class="container detail-grid">
|
||||||
|
<div class="detail-text reveal">
|
||||||
|
<span class="eyebrow">Pádel Courts</span>
|
||||||
|
<h2>Is Your Court Turf Failing Early?</h2>
|
||||||
|
<p class="lead">Heavy tournament play, intense sliding, and continuous pivoting take a brutal toll on pádel courts. We replace worn-out surfaces with our own proprietary assembly system — reinforcing the seams and joints where traditional installations usually fail.</p>
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Proprietary seam & joint assembly system</li>
|
||||||
|
<li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Optimized sand infill for precise ball bounce</li>
|
||||||
|
<li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Custom colors — blue, black, terracotta, green & two-tone</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="btn btn-primary">Request Court Audit & Samples</a>
|
||||||
|
</div>
|
||||||
|
<div class="detail-media reveal">
|
||||||
|
<img src="assets/images/animals/shark.jpg" alt="Pádel court resurfacing">
|
||||||
|
<span class="media-badge"><svg class="icon" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/></svg>Apex Performance</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ DETAIL: FOOTBALL ============ -->
|
||||||
|
<section class="detail" id="football">
|
||||||
|
<div class="container detail-grid">
|
||||||
|
<div class="detail-media reveal">
|
||||||
|
<img src="assets/images/animals/panther.jpg" alt="Football pitch turf system">
|
||||||
|
<span class="media-badge"><svg class="icon" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/></svg>Apex Football</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-text reveal">
|
||||||
|
<span class="eyebrow">Football & Multisport</span>
|
||||||
|
<h2>Built for the Speed of Small-Sided Football</h2>
|
||||||
|
<p class="lead">Fast-paced small-sided football demands a surface that can handle relentless friction, quick pivots, and heavy slide-tackling without breaking down. Our specialized turf systems deliver optimal traction and natural ball behavior.</p>
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>High-density wear resistance for daily training</li>
|
||||||
|
<li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Shock-absorbing underlayers reduce joint impact</li>
|
||||||
|
<li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Custom multisport layouts & line markings</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="btn btn-primary">Request Pitch Audit & Samples</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ DETAIL: GOLF ============ -->
|
||||||
|
<section class="detail reverse" id="golf">
|
||||||
|
<div class="container detail-grid">
|
||||||
|
<div class="detail-text reveal">
|
||||||
|
<span class="eyebrow">Golf & Putting Greens</span>
|
||||||
|
<h2>Your Personal Practice Facility at Home</h2>
|
||||||
|
<p class="lead">Stop driving to the course just to practice your short game. We design and install custom backyard putting greens tailored to your villa's layout — engineered for professional Stimp-rated ball roll and realistic break contours.</p>
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>True ball roll with high-density texturized fibers</li>
|
||||||
|
<li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Custom contours, breaks & cup placements</li>
|
||||||
|
<li><span class="check"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg></span>Laser-leveled sub-base & flush cup fittings</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="btn btn-primary">Request Green Design & Samples</a>
|
||||||
|
</div>
|
||||||
|
<div class="detail-media reveal">
|
||||||
|
<img src="assets/images/animals/eagle.jpg" alt="Backyard golf putting green">
|
||||||
|
<span class="media-badge"><svg class="icon" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/></svg>Apex Golf</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ ABOUT ============ -->
|
||||||
|
<section class="about" id="about">
|
||||||
|
<div class="container about-grid">
|
||||||
|
<div class="reveal">
|
||||||
|
<span class="eyebrow light">About Apex Turf</span>
|
||||||
|
<h2>Master Installers. Absolute Precision. Built For Life.</h2>
|
||||||
|
<p class="lead">We aren't just selling rolls of grass — we are master craftsmen and professional turf specialists dedicated to building surfaces that perform flawlessly and last. We partner directly with Europe's most trusted, premium turf manufacturers to source the exact material every project demands.</p>
|
||||||
|
<blockquote>“Every project, ground condition, and lifestyle is different. That's why we don't offer generic price lists — we provide custom, transparent quotes tailored to your exact space, sub-base requirements, and performance goals.”</blockquote>
|
||||||
|
</div>
|
||||||
|
<div class="guarantee-cards reveal">
|
||||||
|
<div class="guarantee-card">
|
||||||
|
<div class="g-icon"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg></div>
|
||||||
|
<h3>Reliable & Trustworthy</h3>
|
||||||
|
<p>From our first site visit to the final clean-up, we show up on time, communicate clearly, and treat your property with absolute respect.</p>
|
||||||
|
</div>
|
||||||
|
<div class="guarantee-card">
|
||||||
|
<div class="g-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11"/></svg></div>
|
||||||
|
<h3>Satisfaction Guaranteed</h3>
|
||||||
|
<p>We aren't finished until you love the result. Our work is backed by strict installation standards and manufacturer warranties.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ SHOWCASE / GALLERY ============ -->
|
||||||
|
<section class="showcase" id="gallery">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head reveal">
|
||||||
|
<span class="eyebrow" style="justify-content:center">Gallery</span>
|
||||||
|
<h2>Apex Turf In Every Arena</h2>
|
||||||
|
<p>A look at the specialties behind every Apex Turf installation.</p>
|
||||||
|
</div>
|
||||||
|
<div class="showcase-grid reveal-stagger">
|
||||||
|
<a href="#landscaping" class="showcase-item reveal" style="--i:0"><img src="assets/images/animals/lion.jpg" alt="Landscaping"><span class="cap">Landscaping</span></a>
|
||||||
|
<a href="#padel" class="showcase-item reveal" style="--i:1"><img src="assets/images/animals/shark.jpg" alt="Pádel"><span class="cap">Pádel</span></a>
|
||||||
|
<a href="#football" class="showcase-item reveal" style="--i:2"><img src="assets/images/animals/panther.jpg" alt="Football"><span class="cap">Football</span></a>
|
||||||
|
<a href="#golf" class="showcase-item reveal" style="--i:3"><img src="assets/images/animals/eagle.jpg" alt="Golf"><span class="cap">Golf</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ CONTACT / QUOTE ============ -->
|
||||||
|
<section class="contact" id="contact">
|
||||||
|
<div class="container contact-grid">
|
||||||
|
<div class="contact-info reveal">
|
||||||
|
<span class="eyebrow light">Get In Touch</span>
|
||||||
|
<h2>Ready to Upgrade Your Space?</h2>
|
||||||
|
<p>Tell us about your project. We'll help you find the right turf model and ship free samples straight to your door.</p>
|
||||||
|
<ul class="contact-list">
|
||||||
|
<li><span class="c-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 2 .6 2.9a2 2 0 0 1-.4 2.1L8 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.5 2.9.6a2 2 0 0 1 1.7 2Z"/></svg></span> +34 900 123 456</li>
|
||||||
|
<li><span class="c-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="m4 4 8 8 8-8"/></svg></span> hello@apexturf.com</li>
|
||||||
|
<li><span class="c-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12Z"/><circle cx="12" cy="10" r="2.5"/></svg></span> Madrid, Spain — serving projects nationwide</li>
|
||||||
|
</ul>
|
||||||
|
<div class="social-row">
|
||||||
|
<a href="#" aria-label="Facebook"><svg class="icon" viewBox="0 0 24 24"><path d="M14 9h3V6h-3a4 4 0 0 0-4 4v2H7v3h3v6h3v-6h3l1-3h-4v-2a1 1 0 0 1 1-1Z"/></svg></a>
|
||||||
|
<a href="#" aria-label="Instagram"><svg class="icon" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1"/></svg></a>
|
||||||
|
<a href="#" aria-label="X / Twitter"><svg class="icon" viewBox="0 0 24 24"><path d="M4 4l16 16M20 4 4 20"/></svg></a>
|
||||||
|
<a href="#" aria-label="WhatsApp"><svg class="icon" viewBox="0 0 24 24"><path d="M4 20l1.4-4.2A8 8 0 1 1 9 19l-5 1Z"/><path d="M9 10.5c0 3 2.5 5.5 5.5 5.5"/></svg></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form class="quote-form reveal" id="quoteForm" novalidate>
|
||||||
|
<div class="form-success" id="formSuccess">
|
||||||
|
<svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg>
|
||||||
|
Thanks! Your request has been received — we'll be in touch within 24 hours.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="field">
|
||||||
|
<label for="fName">Full Name</label>
|
||||||
|
<input type="text" id="fName" name="name" required placeholder="Jane Smith">
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="fEmail">Email</label>
|
||||||
|
<input type="email" id="fEmail" name="email" required placeholder="jane@email.com">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="field">
|
||||||
|
<label for="fPhone">Phone</label>
|
||||||
|
<input type="tel" id="fPhone" name="phone" placeholder="+34 6xx xxx xxx">
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="fType">Project Type</label>
|
||||||
|
<select id="fType" name="type">
|
||||||
|
<option value="Residential Landscaping">Residential Landscaping</option>
|
||||||
|
<option value="Pádel Court">Pádel Court</option>
|
||||||
|
<option value="Football / Multisport">Football / Multisport</option>
|
||||||
|
<option value="Golf Green">Golf Green</option>
|
||||||
|
<option value="Other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="fMessage">Tell us about your project</label>
|
||||||
|
<textarea id="fMessage" name="message" placeholder="Space size, current surface, timeline..."></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary btn-block">Start Questionnaire & Get Samples</button>
|
||||||
|
<p class="form-note">By submitting, you agree to be contacted by Apex Turf about your project.</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ FOOTER ============ -->
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-grid">
|
||||||
|
<div class="footer-brand">
|
||||||
|
<img src="assets/images/logos/apexturf-logo.png" alt="Apex Turf">
|
||||||
|
<p>Premium artificial turf design & installation for homes, pádel courts, football pitches and golf greens — engineered and built to last across Spain.</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-col">
|
||||||
|
<h4>Explore</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#landscaping">Landscaping</a></li>
|
||||||
|
<li><a href="#padel">Pádel</a></li>
|
||||||
|
<li><a href="#football">Football</a></li>
|
||||||
|
<li><a href="#golf">Golf</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-col">
|
||||||
|
<h4>Company</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#about">About Us</a></li>
|
||||||
|
<li><a href="#gallery">Gallery</a></li>
|
||||||
|
<li><a href="#contact">Get a Quote</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-col">
|
||||||
|
<h4>Contact</h4>
|
||||||
|
<ul>
|
||||||
|
<li class="foot-contact"><svg class="icon" viewBox="0 0 24 24"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 2 .6 2.9a2 2 0 0 1-.4 2.1L8 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.5 2.9.6a2 2 0 0 1 1.7 2Z"/></svg> +34 900 123 456</li>
|
||||||
|
<li class="foot-contact"><svg class="icon" viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="m4 4 8 8 8-8"/></svg> hello@apexturf.com</li>
|
||||||
|
<li class="foot-contact"><svg class="icon" viewBox="0 0 24 24"><path d="M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12Z"/><circle cx="12" cy="10" r="2.5"/></svg> Madrid, Spain</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<span>© <span id="year"></span> Apex Turf. All rights reserved.</span>
|
||||||
|
<div class="legal-links">
|
||||||
|
<a href="#">Privacy Policy</a>
|
||||||
|
<a href="#">Terms of Service</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<button class="back-to-top" id="backToTop" aria-label="Back to top">
|
||||||
|
<svg class="icon" viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Vendored
+189
@@ -0,0 +1,189 @@
|
|||||||
|
/* =========================================================
|
||||||
|
Apex Turf — Landing Page Interactions
|
||||||
|
========================================================= */
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||||
|
|
||||||
|
/* ---------- Sticky header ---------- */
|
||||||
|
var header = document.getElementById("siteHeader");
|
||||||
|
function onScroll() {
|
||||||
|
if (window.scrollY > 40) {
|
||||||
|
header.classList.add("is-scrolled");
|
||||||
|
} else {
|
||||||
|
header.classList.remove("is-scrolled");
|
||||||
|
}
|
||||||
|
toggleBackToTop();
|
||||||
|
}
|
||||||
|
window.addEventListener("scroll", onScroll, { passive: true });
|
||||||
|
onScroll();
|
||||||
|
|
||||||
|
/* ---------- Mobile nav toggle ---------- */
|
||||||
|
var navToggle = document.getElementById("navToggle");
|
||||||
|
var mainNav = document.getElementById("mainNav");
|
||||||
|
navToggle.addEventListener("click", function () {
|
||||||
|
var isOpen = document.body.classList.toggle("nav-open");
|
||||||
|
navToggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
|
||||||
|
});
|
||||||
|
mainNav.querySelectorAll("a").forEach(function (link) {
|
||||||
|
link.addEventListener("click", function () {
|
||||||
|
document.body.classList.remove("nav-open");
|
||||||
|
navToggle.setAttribute("aria-expanded", "false");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ---------- Active nav link on scroll ---------- */
|
||||||
|
var navLinks = Array.prototype.slice.call(mainNav.querySelectorAll("a"));
|
||||||
|
var sections = navLinks
|
||||||
|
.map(function (link) {
|
||||||
|
var id = link.getAttribute("href");
|
||||||
|
return id && id.charAt(0) === "#" ? document.querySelector(id) : null;
|
||||||
|
})
|
||||||
|
.filter(Boolean);
|
||||||
|
|
||||||
|
if ("IntersectionObserver" in window && sections.length) {
|
||||||
|
var navObserver = new IntersectionObserver(
|
||||||
|
function (entries) {
|
||||||
|
entries.forEach(function (entry) {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
var id = "#" + entry.target.id;
|
||||||
|
navLinks.forEach(function (link) {
|
||||||
|
link.classList.toggle("is-active", link.getAttribute("href") === id);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ rootMargin: "-45% 0px -50% 0px", threshold: 0 }
|
||||||
|
);
|
||||||
|
sections.forEach(function (section) { navObserver.observe(section); });
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Scroll reveal (with fallbacks so content never stays stuck hidden) ---------- */
|
||||||
|
var revealEls = document.querySelectorAll(".reveal");
|
||||||
|
function revealAll() {
|
||||||
|
revealEls.forEach(function (el) { el.classList.add("is-visible"); });
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
if ("IntersectionObserver" in window && !prefersReducedMotion) {
|
||||||
|
var revealObserver = new IntersectionObserver(
|
||||||
|
function (entries, obs) {
|
||||||
|
entries.forEach(function (entry) {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add("is-visible");
|
||||||
|
obs.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ threshold: 0.15 }
|
||||||
|
);
|
||||||
|
revealEls.forEach(function (el) { revealObserver.observe(el); });
|
||||||
|
// Safety net: if the observer never fires (paint quirks, fragment-jump
|
||||||
|
// navigation, etc.) don't leave content permanently invisible.
|
||||||
|
setTimeout(revealAll, 2500);
|
||||||
|
} else {
|
||||||
|
revealAll();
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
revealAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Hero right-pane tabs (Pádel / Football / Golf) ---------- */
|
||||||
|
var tabButtons = document.querySelectorAll("#heroTabs button");
|
||||||
|
var scenes = document.querySelectorAll(".right-scene");
|
||||||
|
var sceneOrder = ["padel", "football", "golf"];
|
||||||
|
var currentIndex = 0;
|
||||||
|
var rotateTimer = null;
|
||||||
|
var rightPane = document.querySelector(".pane-right");
|
||||||
|
|
||||||
|
function showScene(name) {
|
||||||
|
tabButtons.forEach(function (btn) {
|
||||||
|
var active = btn.getAttribute("data-scene") === name;
|
||||||
|
btn.classList.toggle("is-active", active);
|
||||||
|
btn.setAttribute("aria-selected", active ? "true" : "false");
|
||||||
|
});
|
||||||
|
scenes.forEach(function (scene) {
|
||||||
|
scene.classList.toggle("is-active", scene.getAttribute("data-scene") === name);
|
||||||
|
});
|
||||||
|
currentIndex = sceneOrder.indexOf(name);
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextScene() {
|
||||||
|
currentIndex = (currentIndex + 1) % sceneOrder.length;
|
||||||
|
showScene(sceneOrder[currentIndex]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function startRotation() {
|
||||||
|
stopRotation();
|
||||||
|
if (!prefersReducedMotion) {
|
||||||
|
rotateTimer = setInterval(nextScene, 6000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function stopRotation() {
|
||||||
|
if (rotateTimer) { clearInterval(rotateTimer); rotateTimer = null; }
|
||||||
|
}
|
||||||
|
|
||||||
|
tabButtons.forEach(function (btn) {
|
||||||
|
btn.addEventListener("click", function () {
|
||||||
|
showScene(btn.getAttribute("data-scene"));
|
||||||
|
startRotation();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (rightPane) {
|
||||||
|
rightPane.addEventListener("mouseenter", stopRotation);
|
||||||
|
rightPane.addEventListener("mouseleave", startRotation);
|
||||||
|
rightPane.addEventListener("focusin", stopRotation);
|
||||||
|
rightPane.addEventListener("focusout", startRotation);
|
||||||
|
}
|
||||||
|
|
||||||
|
startRotation();
|
||||||
|
|
||||||
|
/* ---------- Smooth scroll with header offset ---------- */
|
||||||
|
var headerOffset = function () {
|
||||||
|
return header.offsetHeight + 12;
|
||||||
|
};
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(function (link) {
|
||||||
|
link.addEventListener("click", function (e) {
|
||||||
|
var targetId = link.getAttribute("href");
|
||||||
|
if (targetId.length < 2) return;
|
||||||
|
var target = document.querySelector(targetId);
|
||||||
|
if (!target) return;
|
||||||
|
e.preventDefault();
|
||||||
|
var top = target.getBoundingClientRect().top + window.pageYOffset - headerOffset();
|
||||||
|
window.scrollTo({ top: top, behavior: prefersReducedMotion ? "auto" : "smooth" });
|
||||||
|
history.pushState(null, "", targetId);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ---------- Quote form (front-end only) ---------- */
|
||||||
|
var form = document.getElementById("quoteForm");
|
||||||
|
var successBox = document.getElementById("formSuccess");
|
||||||
|
if (form) {
|
||||||
|
form.addEventListener("submit", function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!form.checkValidity()) {
|
||||||
|
form.reportValidity();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
successBox.classList.add("show");
|
||||||
|
form.reset();
|
||||||
|
successBox.scrollIntoView({ behavior: prefersReducedMotion ? "auto" : "smooth", block: "center" });
|
||||||
|
setTimeout(function () { successBox.classList.remove("show"); }, 8000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Back to top ---------- */
|
||||||
|
var backToTop = document.getElementById("backToTop");
|
||||||
|
function toggleBackToTop() {
|
||||||
|
if (!backToTop) return;
|
||||||
|
backToTop.classList.toggle("show", window.scrollY > 700);
|
||||||
|
}
|
||||||
|
backToTop.addEventListener("click", function () {
|
||||||
|
window.scrollTo({ top: 0, behavior: prefersReducedMotion ? "auto" : "smooth" });
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ---------- Footer year ---------- */
|
||||||
|
var yearEl = document.getElementById("year");
|
||||||
|
if (yearEl) { yearEl.textContent = new Date().getFullYear(); }
|
||||||
|
})();
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
# Changelog
|
||||||
|
|
||||||
|
All notable changes to the Apex Turf landing page.
|
||||||
|
|
||||||
|
## [1.0.0] — 2026-08-24
|
||||||
|
|
||||||
|
### Added
|
||||||
|
- Initial build of the `dist/` landing page (`index.html`, `css/styles.css`, `js/main.js`) from the three
|
||||||
|
reference mockups in `website-ideas/` and the copy/structure in `pdfs/`.
|
||||||
|
- Full-bleed diagonal split hero: fixed Residential/Landscaping pane (lion) + auto-rotating Sport Turf pane
|
||||||
|
cycling Pádel (shark) → Football (panther) → Golf (eagle), with manual tabs and pause-on-hover/focus.
|
||||||
|
- Sticky header with scroll-spy nav highlighting and mobile hamburger menu.
|
||||||
|
- Value pillars section, 4-card specialties quick-nav grid, and four alternating-layout detail sections
|
||||||
|
(Landscaping / Pádel / Football / Golf).
|
||||||
|
- About/trust section (Installers First, Apex Guarantee cards).
|
||||||
|
- Visual gallery/showcase strip.
|
||||||
|
- Front-end-only quote request form with client-side validation and success state.
|
||||||
|
- Footer with contact info, quick links, and social icons.
|
||||||
|
- Scroll-reveal animations, smooth-scroll-with-offset, back-to-top button.
|
||||||
|
- Copied and web-optimized image assets from `animals/` and `logos/` into `dist/assets/images/`
|
||||||
|
(JPEG re-compression + logo resizing to cut total image weight roughly in half).
|
||||||
|
|
||||||
|
### Fixed (found via automated visual/interaction testing during the build)
|
||||||
|
- **Hero right pane not filling its full height.** The rotating Pádel/Football/Golf pane was sized to its
|
||||||
|
text content instead of the full pane (an absolutely-positioned image nested inside a flex-aligned
|
||||||
|
container without an explicit fill), so the background photo appeared as a small floating box instead of
|
||||||
|
full-bleed like the reference mockups. Fixed by making the scene layers fill the pane via `inset: 0` and
|
||||||
|
moving the pane's padding onto the scene layer itself.
|
||||||
|
- **Scroll-reveal content could get stuck invisible.** The fade-in-on-scroll effect relied solely on
|
||||||
|
`IntersectionObserver` firing; if it didn't (or fired late), content stayed at `opacity: 0` forever.
|
||||||
|
Added a try/catch fallback, a 2.5s force-reveal safety timeout, and a `<noscript>` rule so content is
|
||||||
|
never permanently hidden regardless of JS timing or availability.
|
||||||
|
- **Horizontal overflow on narrow viewports (CSS Grid "blowout").** Every `grid-template-columns` track in
|
||||||
|
the stylesheet used bare `Nfr` values. A bare `fr` track's implicit `auto` minimum can grow past the
|
||||||
|
container's padded content box, which caused the contact section (and, latently, every other grid on the
|
||||||
|
page) to overflow its container and clip text at narrow widths. Fixed by wrapping every fractional track
|
||||||
|
in `minmax(0, …fr)` across the whole stylesheet (hero split, pillar/specialty/showcase/footer grids,
|
||||||
|
detail/about/contact grids, the quote form's two-column row) rather than patching only the section where
|
||||||
|
it was first observed.
|
||||||
|
|
||||||
|
### Known placeholders (see `README.md` → "What still needs wiring up before going live")
|
||||||
|
- Contact form has no backend/submission endpoint yet.
|
||||||
|
- Phone, email, address, and social links are placeholders (none were supplied).
|
||||||
|
- Gallery section reuses the four specialty photos in lieu of real installation photography.
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
# Apex Turf — Landing Page
|
||||||
|
|
||||||
|
A single-page marketing landing page for **Apex Turf**, a premium artificial-turf design & installation
|
||||||
|
company (residential landscaping, pádel courts, football/multisport pitches, and golf putting greens),
|
||||||
|
built with plain HTML, CSS and vanilla JavaScript — no build step, no frameworks, no dependencies.
|
||||||
|
|
||||||
|
## Where things live
|
||||||
|
|
||||||
|
```
|
||||||
|
dist/
|
||||||
|
├── index.html # the landing page
|
||||||
|
├── css/styles.css # all styling (CSS variables, layout, components)
|
||||||
|
├── js/main.js # all interactivity (vanilla JS, no dependencies)
|
||||||
|
└── assets/images/
|
||||||
|
├── animals/ # lion, shark, panther, eagle — hero/section imagery
|
||||||
|
│ (compressed to ~250–420KB JPEGs; originals lived in ../animals)
|
||||||
|
└── logos/ # apexturf-logo.png (full lockup), apexturf-icon.png (mark only)
|
||||||
|
(resized from ../logos, background-transparent variants)
|
||||||
|
docs/
|
||||||
|
├── README.md # this file
|
||||||
|
└── Changelog.md
|
||||||
|
```
|
||||||
|
|
||||||
|
To preview locally: open `dist/index.html` directly in a browser, or serve the folder
|
||||||
|
(`python3 -m http.server` from inside `dist/`) so the favicon/font preconnects behave exactly as in
|
||||||
|
production.
|
||||||
|
|
||||||
|
## Design source
|
||||||
|
|
||||||
|
The three reference mockups in `../website-ideas/` (`Websiteidea1.png` – `Websiteidea3.png`) all share one
|
||||||
|
layout: a full-bleed, diagonally-split hero — **Residential Turf** (lion) fixed on the left, and a rotating
|
||||||
|
**Sport Turf** category (Pádel/shark, Football/panther, Golf/eagle) on the right. Rather than picking one
|
||||||
|
mockup, the landing page **combines all three**: the hero's right pane auto-rotates through Pádel → Football
|
||||||
|
→ Golf every 6 seconds (with manual P/F/G tabs, pause-on-hover/focus), so every specialty shown across the
|
||||||
|
three reference images is represented on one page.
|
||||||
|
|
||||||
|
Copy, section structure, and messaging (headlines, value pillars, "Installers First, Not Salesmen", the
|
||||||
|
Apex Guarantee, etc.) are drawn from the four sport-specific and About Us page specifications in `../pdfs/`,
|
||||||
|
condensed from full dedicated pages into single-page sections since this build is one landing page rather
|
||||||
|
than a multi-page site.
|
||||||
|
|
||||||
|
## Page structure
|
||||||
|
|
||||||
|
1. **Header** — logo, nav (Home / Landscaping / Pádel / Football / Golf / About Us), sticky on scroll,
|
||||||
|
hamburger menu on mobile.
|
||||||
|
2. **Hero** — split diagonal layout as above.
|
||||||
|
3. **Value pillars** — Child & Family Safe, Pet-Friendly, Built for Spanish Weather, Low Maintenance (not
|
||||||
|
no maintenance).
|
||||||
|
4. **Specialties grid** — 4 quick-nav cards (Landscaping / Pádel / Football / Golf) linking to detail
|
||||||
|
sections below.
|
||||||
|
5. **Detail sections ×4** — one per specialty, alternating image/text layout, each with its own feature
|
||||||
|
list and CTA, matching the messaging of the corresponding PDF spec.
|
||||||
|
6. **About** — "Master Installers. Absolute Precision." trust section with the two Apex Guarantee cards.
|
||||||
|
7. **Showcase/Gallery** — a 4-image visual recap of the specialties (not client project photos — there
|
||||||
|
were none supplied; swap in real installation photography here when available).
|
||||||
|
8. **Contact / quote form** — front-end-only form (name, email, phone, project type, message) with
|
||||||
|
client-side validation and a success message. **There is no backend** — see "What still needs wiring
|
||||||
|
up" below.
|
||||||
|
9. **Footer** — logo, quick links, contact info, social icons.
|
||||||
|
|
||||||
|
## Notable implementation details
|
||||||
|
|
||||||
|
- **No build tooling.** Plain CSS with custom properties for the palette/spacing scale; plain ES5-ish
|
||||||
|
vanilla JS (one IIFE, no bundler needed).
|
||||||
|
- **Self-contained interactivity**: sticky header, mobile nav, hero tab rotation, scroll-spy nav
|
||||||
|
highlighting, scroll-reveal animations, smooth-scroll with header offset, back-to-top button, and the
|
||||||
|
quote form — all in `js/main.js`, no external libraries.
|
||||||
|
- **Grid-blowout defense**: every `grid-template-columns` track uses `minmax(0, …fr)` rather than a bare
|
||||||
|
`fr`. A bare `fr` track's implicit `auto` minimum can exceed the container's padded content box and
|
||||||
|
force horizontal overflow — this was caught during testing (see Changelog) and fixed everywhere as a
|
||||||
|
standing defensive pattern, not just on the section where it first showed up.
|
||||||
|
- **Scroll-reveal never gets stuck hidden**: the fade-in-on-scroll effect (`.reveal` → `.is-visible`) is
|
||||||
|
wrapped in try/catch with a 2.5s safety-net timeout that force-reveals everything, and a `<noscript>`
|
||||||
|
rule shows everything immediately if JavaScript is unavailable.
|
||||||
|
- **`prefers-reduced-motion`** is respected throughout (reveal animations, hero auto-rotation, and smooth
|
||||||
|
scrolling all fall back to instant/static behavior).
|
||||||
|
- **Accessibility basics**: semantic landmarks, `aria-label`/`aria-expanded` on the nav toggle, `role=tab`
|
||||||
|
/ `aria-selected` on the hero sport tabs, alt text on every image, visible focus states inherited from
|
||||||
|
default UA styles (not suppressed).
|
||||||
|
- Images were re-compressed (JPEG quality ~72, resized logo PNGs) from the originals in `../animals` and
|
||||||
|
`../logos` to keep total page weight reasonable (~1.5MB of images total).
|
||||||
|
|
||||||
|
## What still needs wiring up before going live
|
||||||
|
|
||||||
|
This is a front-end-only deliverable. Before launch:
|
||||||
|
|
||||||
|
- **Contact form has no backend.** It currently just shows a client-side "thanks" message and does not
|
||||||
|
send an email or hit an API. Wire `#quoteForm`'s submit handler in `js/main.js` to a real form
|
||||||
|
endpoint (e.g. Formspree, a serverless function, or your own backend).
|
||||||
|
- **Placeholder contact details**: phone `+34 900 123 456`, email `hello@apexturf.com`, and "Madrid,
|
||||||
|
Spain" are placeholders (no real contact info was supplied) — replace with the real ones in `index.html`
|
||||||
|
(they appear in both the Contact section and the footer). Social links (`#`) are also placeholders —
|
||||||
|
point them at real profiles.
|
||||||
|
- **Gallery images are stand-ins.** The showcase/gallery section reuses the four mascot photos for lack
|
||||||
|
of real installation photography — swap in real project photos when available.
|
||||||
Reference in New Issue
Block a user