<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Frontline Boat Services — Miami, FL</title>
<meta name="description" content="Frontline Boat Services provides marine electrical installations, rewires, maintenance, audio, GPS, and electronics service across Miami-Dade and Broward." />
<meta property="og:type" content="website" />
<meta property="og:title" content="Frontline Boat Services — Miami, FL" />
<meta property="og:description" content="Marine electrical installations, rewires, maintenance, audio, GPS, and electronics service across Miami-Dade and Broward." />
<meta property="og:image" content="frontline-og_card.png" />
<meta property="og:image:width" content="1731" />
<meta property="og:image:height" content="909" />
<meta property="og:image:alt" content="Frontline Boat Services social preview card" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Frontline Boat Services — Miami, FL" />
<meta name="twitter:description" content="Marine electrical installations, rewires, maintenance, audio, GPS, and electronics service across Miami-Dade and Broward." />
<meta name="twitter:image" content="frontline-og_card.png" />
<meta name="twitter:image:alt" content="Frontline Boat Services social preview card" />
<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=Bebas+Neue&family=Inter:wght@300;400;500;600&family=Oswald:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
/* ── TOKEN SYSTEM ─────────────────────────────────────────────────────── */
:root {
--flame: #D62B2B;
--ember: #FF5C1A;
--smoke: #1A1A1A;
--ash: #2E2E2E;
--steel: #3D3D3D;
--mist: #B0B0B0;
--white: #F0EDE8;
--gold: #C9A84C;
--font-display: 'Bebas Neue', sans-serif;
--font-heading: 'Oswald', sans-serif;
--font-body: 'Inter', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--smoke);
color: var(--white);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
}
/* ── NAV ──────────────────────────────────────────────────────────────── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5vw;
height: 112px;
background: rgba(20,20,20,0.72);
backdrop-filter: blur(8px);
border-bottom: 1px solid transparent;
transition: height 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
nav.is-scrolled,
nav.is-open {
height: 64px;
background: rgba(20,20,20,0.92);
border-bottom-color: var(--ash);
box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.nav-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.nav-logo img {
width: 250px;
height: auto;
object-fit: contain;
display: block;
transition: width 0.25s ease;
}
nav.is-scrolled .nav-logo img,
nav.is-open .nav-logo img {
width: 135px;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
position: relative;
font-family: var(--font-heading);
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mist);
text-decoration: none;
transition: color 0.2s;
}
.nav-links a::after {
content: '';
position: absolute;
left: 0;
bottom: -0.45rem;
width: 28px;
height: 2px;
background: var(--flame);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease;
}
.nav-links a:hover,
.nav-links a.is-active { color: var(--flame); }
.nav-links a:hover::after,
.nav-links a.is-active::after { transform: scaleX(1); }
.nav-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.nav-cta {
font-family: var(--font-heading);
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
background: var(--flame);
color: #fff;
padding: 0.5rem 1.25rem;
border: none;
cursor: pointer;
text-decoration: none;
transition: background 0.2s;
}
.nav-cta:hover { background: var(--ember); }
.nav-cta-call {
background: transparent;
border: 1px solid var(--flame);
color: var(--white);
}
.nav-cta-call:hover {
background: var(--flame);
color: #fff;
}
.nav-toggle {
display: none;
width: 44px;
height: 44px;
border: 1px solid var(--steel);
background: transparent;
color: var(--white);
cursor: pointer;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
}
.nav-toggle span {
width: 20px;
height: 2px;
background: currentColor;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.nav-toggle:focus-visible,
.image-modal-close:focus-visible,
.project-tile:focus-visible {
outline: 2px solid var(--ember);
outline-offset: 4px;
}
/* ── HERO ─────────────────────────────────────────────────────────────── */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: flex-end;
padding: 0 5vw 8vh;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
background:
linear-gradient(to right, rgba(10,10,10,0.95) 40%, rgba(10,10,10,0.5) 100%),
url('frontline-hero.png') center/cover no-repeat;
}
/* Signature element: diagonal red slash that bleeds off the right edge */
.hero-slash {
position: absolute;
top: 0; right: -60px;
width: 180px;
height: 100%;
background: var(--flame);
transform: skewX(-8deg);
opacity: 0.08;
pointer-events: none;
}
.hero-slash::after {
content: '';
position: absolute;
top: 0; left: -100px;
width: 60px;
height: 100%;
background: var(--ember);
opacity: 0.5;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 680px;
width: 100%;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-heading);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--flame);
margin-bottom: 1rem;
}
.hero-eyebrow::before {
content: '';
display: block;
width: 28px;
height: 2px;
background: var(--flame);
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(4rem, 10vw, 8rem);
line-height: 0.92;
letter-spacing: 0.02em;
color: var(--white);
margin-bottom: 0.5rem;
}
.hero-title .accent { color: var(--flame); }
.hero-sub {
font-family: var(--font-heading);
font-size: clamp(1rem, 2.5vw, 1.4rem);
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mist);
margin-bottom: 2rem;
}
.hero-body {
font-size: 1rem;
font-weight: 300;
color: var(--mist);
max-width: 480px;
margin-bottom: 2.5rem;
line-height: 1.7;
}
.hero-body strong {
font-family: var(--font-heading);
font-size: 1.08em;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--flame);
}
.hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
}
.btn-primary {
font-family: var(--font-heading);
font-size: 0.8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
background: var(--flame);
color: #fff;
padding: 1rem 2rem;
border: none;
cursor: pointer;
text-decoration: none;
transition: background 0.2s, transform 0.15s;
display: inline-block;
}
.btn-primary:hover { background: var(--ember); transform: translateY(-1px); }
.btn-ghost {
font-family: var(--font-heading);
font-size: 0.8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
background: transparent;
color: var(--white);
padding: 1rem 2rem;
border: 1px solid var(--steel);
cursor: pointer;
text-decoration: none;
transition: border-color 0.2s, color 0.2s;
display: inline-block;
}
.btn-ghost:hover { border-color: var(--flame); color: var(--flame); }
/* ── TRUST BAR ────────────────────────────────────────────────────────── */
.trust-bar {
background: var(--ash);
border-top: 1px solid var(--steel);
border-bottom: 1px solid var(--steel);
padding: 1.25rem 5vw;
display: flex;
align-items: center;
gap: 2.5rem;
flex-wrap: wrap;
justify-content: center;
}
.trust-item {
display: flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-heading);
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mist);
}
.trust-item svg { flex-shrink: 0; }
.trust-divider {
width: 1px;
height: 20px;
background: var(--steel);
}
/* ── SECTIONS SHARED ──────────────────────────────────────────────────── */
section {
padding: 7rem 5vw;
scroll-margin-top: 84px;
}
.section-eyebrow {
font-family: var(--font-heading);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--flame);
margin-bottom: 0.75rem;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(2.4rem, 5vw, 4rem);
line-height: 1;
color: var(--white);
margin-bottom: 1.25rem;
}
.section-body {
font-size: 1rem;
font-weight: 300;
color: var(--mist);
max-width: 560px;
line-height: 1.75;
}
/* ── SERVICES ─────────────────────────────────────────────────────────── */
.services-section {
background: var(--smoke);
}
.services-header {
margin-bottom: 4rem;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1px;
background: var(--steel);
}
.service-card {
background: var(--ash);
padding: 2.5rem 2rem;
transition: background 0.25s;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 100%;
height: 3px;
background: var(--flame);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { background: var(--steel); }
.service-icon {
width: 44px;
height: 44px;
margin-bottom: 1.25rem;
color: var(--flame);
}
.service-name {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--white);
margin-bottom: 0.6rem;
}
.service-desc {
font-size: 0.88rem;
font-weight: 300;
color: var(--mist);
line-height: 1.65;
}
/* ── ABOUT / FIRST RESPONDER ──────────────────────────────────────────── */
.about-section {
background: var(--ash);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: stretch;
padding: 0 5vw 0 0;
}
.about-visual {
position: relative;
width: 100%;
min-height: clamp(560px, 72vh, 760px);
}
.about-img {
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
display: block;
background:
linear-gradient(135deg, #1a1a1a 0%, #2e2e2e 100%);
}
.about-img-real {
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
display: block;
object-position: center center;
}
/* First Responder badge */
.fr-badge {
position: absolute;
bottom: 1rem;
right: -1rem;
background: var(--smoke);
border: 2px solid var(--flame);
padding: 1rem 1.25rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.fr-badge-flag {
width: 44px;
flex-shrink: 0;
}
.fr-badge-text {
font-family: var(--font-heading);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--flame);
line-height: 1.3;
}
.about-content .section-body {
margin-bottom: 1.5rem;
}
.about-content {
align-self: center;
padding: 7rem 0;
}
.about-stat-row {
display: flex;
gap: 2.5rem;
margin-top: 2.5rem;
flex-wrap: wrap;
}
.stat {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.stat-num {
font-family: var(--font-display);
font-size: 2.6rem;
color: var(--flame);
line-height: 1;
}
.stat-label {
font-family: var(--font-heading);
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--mist);
}
/* ── FLAG SVG ─────────────────────────────────────────────────────────── */
/* Inline thin-red-line flag */
/* ── PROJECTS / GALLERY ───────────────────────────────────────────────── */
.projects-section {
background: #151515;
}
.projects-header {
display: flex;
justify-content: space-between;
align-items: end;
gap: 3rem;
margin-bottom: 3rem;
}
.projects-header .section-body {
max-width: 480px;
}
.projects-mosaic {
display: grid;
grid-template-columns: 1.1fr 0.9fr 0.9fr;
grid-auto-rows: minmax(210px, 26vw);
gap: 1px;
background: var(--steel);
}
.project-tile {
position: relative;
min-height: 220px;
border: 0;
color: var(--white);
background: var(--ash);
overflow: hidden;
cursor: pointer;
display: flex;
isolation: isolate;
}
.project-tile.tall {
grid-row: span 2;
}
.project-tile::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(135deg, rgba(214,43,43,0.14), transparent 46%);
opacity: 0.7;
pointer-events: none;
}
.tile-image {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.86) contrast(1.04);
transform: scale(1.02);
transition: transform 0.45s ease, filter 0.45s ease;
}
.project-tile:hover .tile-image {
filter: saturate(1) contrast(1.08);
transform: scale(1.07);
}
.image-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: clamp(1rem, 4vw, 3rem);
background: rgba(10,10,10,0.5);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.image-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.image-modal img {
max-width: 100%;
max-height: 92vh;
object-fit: contain;
}
.image-modal-close {
position: fixed;
top: 1rem;
right: 1rem;
width: 44px;
height: 44px;
border: 0;
background: transparent;
color: var(--white);
font: 300 2.5rem/1 var(--font-body);
cursor: pointer;
}
body.modal-open {
overflow: hidden;
}
/* ── SERVICE AREAS ─────────────────────────────────────────────────────── */
.service-areas-section {
background: var(--smoke);
}
.service-areas-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
margin-top: 4rem;
background: var(--steel);
}
.service-area-card {
position: relative;
min-height: 260px;
padding: 2.5rem;
background: var(--ash);
overflow: hidden;
}
.service-area-name {
font-family: var(--font-display);
font-size: clamp(2.8rem, 6vw, 5rem);
line-height: 1;
color: var(--white);
margin-bottom: 0.5rem;
}
.service-area-label {
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--flame);
margin-bottom: 1.25rem;
}
.service-area-copy {
font-size: 0.95rem;
font-weight: 300;
color: var(--mist);
line-height: 1.7;
max-width: 34rem;
}
.service-area-note {
margin-top: 2rem;
padding-left: 1rem;
border-left: 3px solid var(--flame);
max-width: 760px;
}
/* ── CONTACT ──────────────────────────────────────────────────────────── */
.contact-section {
background: var(--ash);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: start;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.contact-row {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.contact-icon {
width: 20px;
height: 20px;
color: var(--flame);
flex-shrink: 0;
margin-top: 2px;
}
.contact-label {
font-family: var(--font-heading);
font-size: 0.65rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mist);
margin-bottom: 0.2rem;
}
.contact-value {
font-size: 1rem;
font-weight: 400;
color: var(--white);
text-decoration: none;
}
.contact-value:hover { color: var(--flame); }
/* ── STICKY CALL CTA ─────────────────────────────────────────────────────── */
.sticky-call-cta {
position: fixed;
left: 50%;
bottom: 1.25rem;
z-index: 90;
display: inline-flex;
align-items: center;
gap: 0.85rem;
min-width: min(92vw, 420px);
padding: 0.85rem 1rem;
background: #111;
border: 1px solid var(--flame);
box-shadow: 0 16px 34px rgba(0,0,0,0.45);
color: var(--white);
text-decoration: none;
transform: translate(-50%, calc(100% + 2rem));
opacity: 0;
pointer-events: none;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.sticky-call-cta.is-visible {
transform: translate(-50%, 0);
opacity: 1;
pointer-events: auto;
}
.sticky-call-icon {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--flame);
color: #fff;
}
.sticky-call-copy {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.sticky-call-label {
font-family: var(--font-heading);
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mist);
}
.sticky-call-number {
font-family: var(--font-heading);
font-size: 1.05rem;
letter-spacing: 0.04em;
color: var(--white);
}
/* Social row */
.social-row {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
}
.social-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-heading);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mist);
border: 1px solid var(--steel);
padding: 0.5rem 0.9rem;
text-decoration: none;
transition: border-color 0.2s, color 0.2s;
}
.social-btn:hover { border-color: var(--flame); color: var(--flame); }
/* Quote form */
.quote-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.quote-form.is-submitted > :not(#form-success) {
display: none;
}
.form-label {
font-family: var(--font-heading);
font-size: 0.65rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mist);
margin-bottom: 0.35rem;
display: block;
}
.form-field {
display: flex;
flex-direction: column;
}
.form-input,
.form-select,
.form-textarea {
background: var(--smoke);
border: 1px solid var(--steel);
color: var(--white);
font-family: var(--font-body);
font-size: 0.95rem;
padding: 0.75rem 1rem;
outline: none;
transition: border-color 0.2s;
width: 100%;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--steel); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: var(--flame); }
.form-select {
appearance: none;
cursor: pointer;
}
.form-textarea { resize: vertical; min-height: 110px; }
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
#form-success {
display: none;
text-align: center;
padding: 1rem;
color: var(--flame);
font-family: var(--font-heading);
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ── FOOTER ───────────────────────────────────────────────────────────── */
footer {
background: #111;
border-top: 1px solid var(--ash);
padding: 2rem 5vw;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.footer-logo {
display: inline-flex;
align-items: center;
}
.footer-logo img {
width: 240px;
height: auto;
object-fit: contain;
display: block;
}
.footer-note {
font-size: 0.78rem;
color: var(--steel);
font-weight: 300;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 800px) {
nav {
height: auto;
min-height: 96px;
flex-wrap: wrap;
padding: 0.5rem 5vw;
}
nav.is-scrolled,
nav.is-open {
min-height: 64px;
}
.nav-logo img {
width: min(58vw, 210px);
height: auto;
}
nav.is-scrolled .nav-logo img,
nav.is-open .nav-logo img {
width: 135px;
}
.nav-logo {
flex: 1;
min-width: 0;
}
.nav-toggle {
display: flex;
position: relative;
z-index: 2;
border-color: rgba(240, 237, 232, 0.28);
background: rgba(17, 17, 17, 0.72);
}
.nav-links {
order: 3;
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 0.25rem;
max-height: 0;
margin-top: 0;
padding: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
background: #111;
border-top: 1px solid transparent;
transition: max-height 0.28s ease, margin-top 0.28s ease, padding 0.28s ease, opacity 0.2s ease, visibility 0.2s ease, border-color 0.2s ease;
}
nav.is-open .nav-links {
display: flex;
max-height: 24rem;
margin-top: 0.5rem;
padding: 0.75rem;
opacity: 1;
visibility: visible;
pointer-events: auto;
border-top-color: var(--ash);
box-shadow: 0 18px 30px rgba(0,0,0,0.45);
}
.nav-links a {
display: block;
padding: 0.9rem 0.75rem;
background: #1A1A1A;
border: 1px solid transparent;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.nav-links a:hover,
.nav-links a.is-active {
background: rgba(214,43,43,0.12);
border-color: rgba(214,43,43,0.35);
}
.nav-links a::after {
display: none;
}
.nav-cta {
display: block;
width: 100%;
text-align: center;
max-height: 0;
margin-top: 0;
padding: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
background: var(--flame);
transition: max-height 0.28s ease, margin-top 0.28s ease, padding 0.28s ease, opacity 0.2s ease, visibility 0.2s ease, background 0.2s ease;
}
.nav-actions {
order: 4;
width: 100%;
flex-direction: column;
gap: 0;
}
nav.is-open .nav-cta {
display: block;
max-height: 4rem;
margin-top: 0.5rem;
padding: 0.9rem 1rem;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
nav.is-open .nav-cta-call {
background: #1A1A1A;
border: 1px solid var(--flame);
}
.about-section,
.contact-section {
grid-template-columns: 1fr;
gap: 3rem;
}
.about-section {
padding: 5rem 5vw;
}
.about-visual {
min-height: clamp(420px, 65vh, 620px);
}
.about-content {
padding: 0;
}
.projects-header {
display: block;
}
.projects-header .section-body {
max-width: none;
margin-top: 1rem;
}
.projects-mosaic {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
.project-tile,
.project-tile.tall {
min-height: 260px;
grid-row: auto;
}
.fr-badge { right: 1rem; bottom: 1rem; }
.service-areas-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.trust-divider { display: none; }
}
@media (max-width: 560px) {
section {
padding: 4.5rem 5vw;
}
.about-section {
padding: 4.5rem 5vw;
}
.hero {
min-height: 100svh;
align-items: flex-start;
padding-top: calc(96px + 2rem);
padding-bottom: 4rem;
}
.hero-content {
max-width: 24rem;
}
.hero-eyebrow {
font-size: 0.62rem;
letter-spacing: 0.16em;
}
.hero-title {
font-size: clamp(2.9rem, 19vw, 4rem);
line-height: 0.88;
}
.hero-sub {
margin-bottom: 1.5rem;
}
.hero-body {
margin-bottom: 2rem;
}
.hero-actions {
align-items: stretch;
}
.btn-primary,
.btn-ghost {
width: 100%;
text-align: center;
padding: 0.95rem 1rem;
}
.trust-bar {
justify-content: flex-start;
}
.sticky-call-cta {
left: 5vw;
right: 5vw;
bottom: 0.75rem;
min-width: 0;
width: auto;
transform: translateY(calc(100% + 1.5rem));
}
.sticky-call-cta.is-visible {
transform: translateY(0);
}
.fr-badge {
right: 0.75rem;
bottom: 0.75rem;
max-width: calc(100% - 1.5rem);
padding: 0.8rem 0.9rem;
}
.service-area-card {
min-height: 220px;
padding: 2rem;
}
footer {
align-items: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav>
<a class="nav-logo" href="#hero" aria-label="Frontline Boat Services home">
<img src="frontline-logo.png" alt="Frontline Boat Services">
</a>
<button class="nav-toggle" type="button" aria-label="Open navigation" aria-controls="primary-navigation" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</button>
<ul class="nav-links" id="primary-navigation">
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Gallery</a></li>
<li><a href="#service-areas">Areas</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="nav-actions">
<a class="nav-cta nav-cta-call" href="tel:+17862780478">Call (786) 278-0478</a>
<a class="nav-cta" href="#contact">Get a Quote</a>
</div>
</nav>
<!-- HERO -->
<section id="hero" class="hero">
<div class="hero-bg"></div>
<div class="hero-slash"></div>
<div class="hero-content">
<div class="hero-eyebrow">Miami, FL — First Responder Owned & Operated</div>
<h1 class="hero-title">
FULL SERVICE <br><span class="accent">MARINE</span> SOLUTIONS
</h1>
<p class="hero-body">
<strong>Frontline Boat Services</strong> specializes in marine electrical installations, rewires, maintenance, & more! We provide reliable, expert solutions to keep your vessel in top condition.
</p>
<div class="hero-actions">
<a class="btn-primary" href="#contact">Get a Free Quote</a>
<a class="btn-ghost" href="#services">Our Services</a>
</div>
</div>
</section>
<!-- TRUST BAR -->
<div class="trust-bar">
<div class="trust-item">
<!-- shield icon -->
<svg class="trust-item-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" color="#D62B2B"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
First Responder Owned
</div>
<div class="trust-divider"></div>
<div class="trust-item">
<svg class="trust-item-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" color="#D62B2B"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
Fast Turnaround
</div>
<div class="trust-divider"></div>
<div class="trust-item">
<svg class="trust-item-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" color="#D62B2B"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
Quality Guaranteed
</div>
<div class="trust-divider"></div>
<div class="trust-item">
<svg class="trust-item-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" color="#D62B2B"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
Miami & South Florida
</div>
<div class="trust-divider"></div>
<div class="trust-item">
<svg class="trust-item-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" color="#D62B2B"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/></svg>
Full-Service Shop
</div>
</div>
<!-- SERVICES -->
<section id="services" class="services-section">
<div class="services-header">
<p class="section-eyebrow">What We Do</p>
<h2 class="section-title">EVERY SYSTEM,<br>HANDLED RIGHT</h2>
<p class="section-body">
From a single gauge to a full electronics overhaul, we bring the same
first-responder standard of accuracy and accountability to every job.
</p>
</div>
<div class="services-grid">
<div class="service-card">
<svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</svg>
<div class="service-name">Marine Electronics</div>
<div class="service-desc">Chartplotters, depth finders, VHF radios, autopilots, and full NMEA 2000 network builds. If it has a wire, we can install it.</div>
</div>
<div class="service-card">
<svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
<div class="service-name">Full Rewiring</div>
<div class="service-desc">Complete electrical system replacement or repair. We chase every ghost fault, eliminate every corroded connection, and build to NMEA standards.</div>
</div>
<div class="service-card">
<svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>
</svg>
<div class="service-name">Audio Installation</div>
<div class="service-desc">Marine-grade speakers, amplifiers, subwoofers, and head units. Crystal clear sound that holds up against saltwater, sun, and wind.</div>
</div>
<div class="service-card">
<svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5"/>
</svg>
<div class="service-name">GPS Systems</div>
<div class="service-desc">Single and multi-station GPS installation, sensor integration, and satellite compass setup for reliable on-water navigation.</div>
</div>
<div class="service-card">
<svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
</svg>
<div class="service-name">Displays & Instruments</div>
<div class="service-desc">Multi-function display installs, gauge clusters, acrylic panels, digital switching panels, and helm layouts built for the way you actually run your boat.</div>
</div>
<div class="service-card">
<svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
</svg>
<div class="service-name">And More</div>
<div class="service-desc">Shore power, battery systems, bilge pumps, lighting, camera systems. Tell us what your boat needs — we'll sort it out.</div>
</div>
</div>
</section>
<!-- ABOUT / FIRST RESPONDER -->
<section id="about" class="about-section">
<div class="about-visual">
<!-- Placeholder image with a styled background; in production replace src with a real photo -->
<img
class="about-img-real"
src="frontline-1.png"
alt="Firefighter and boat technician at work"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<div class="about-img" style="display:none; align-items:center; justify-content:center;">
<svg width="64" height="64" fill="none" stroke="#3D3D3D" stroke-width="1.5" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
</div>
<div class="fr-badge">
<!-- Inline thin-red-line flag SVG -->
<svg class="fr-badge-flag" viewBox="0 0 60 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="60" height="36" fill="#1A1A1A"/>
<!-- stripes -->
<rect y="0" width="60" height="4" fill="#555"/>
<rect y="4" width="60" height="4" fill="#1A1A1A"/>
<rect y="8" width="60" height="4" fill="#555"/>
<rect y="12" width="60" height="4" fill="#1A1A1A"/>
<!-- thin red line -->
<rect y="16" width="60" height="4" fill="#D62B2B"/>
<rect y="20" width="60" height="4" fill="#1A1A1A"/>
<rect y="24" width="60" height="4" fill="#555"/>
<rect y="28" width="60" height="4" fill="#1A1A1A"/>
<rect y="32" width="60" height="4" fill="#555"/>
<!-- canton overlay -->
<rect width="24" height="20" fill="#1A1A1A" opacity="0.6"/>
</svg>
<div class="fr-badge-text">First Responder<br>Owned & Operated</div>
</div>
</div>
<div class="about-content">
<p class="section-eyebrow">About Frontline</p>
<h2 class="section-title">TRAINED TO<br>NEVER FAIL</h2>
<p class="section-body">
Frontline Boat Services was founded by owner Brian Frias, an active firefighter
who built the same habits off the truck as on it: no shortcuts, no guesswork,
no half-measures.
</p>
<p class="section-body" style="margin-top: 1rem;">
Brian is NMEA certified as a Basic NMEA 2000 Installer and an Advanced Marine
Electronics Installer (AMEI), bringing trained marine electronics standards to
every install, rewire, and diagnostic job.
</p>
<p class="section-body" style="margin-top: 1rem;">
Working out of Miami, FL, we serve boaters across South Florida who are tired of
sloppy installs and chasing repeat electrical issues season after season. When we hand
your boat back, every system works — and keeps working.
</p>
<div class="about-stat-row">
<div class="stat">
<span class="stat-num">100%</span>
<span class="stat-label">First Responder Owned</span>
</div>
<div class="stat">
<span class="stat-num">Miami</span>
<span class="stat-label">Based in South FL</span>
</div>
<div class="stat">
<span class="stat-num">0</span>
<span class="stat-label">Shortcuts Taken</span>
</div>
</div>
</div>
</section>
<!-- PROJECTS / GALLERY -->
<section id="projects" class="projects-section">
<div class="projects-header">
<div>
<p class="section-eyebrow">Recent Work</p>
<h2 class="section-title">SYSTEMS BUILT<br>FOR THE WATER</h2>
</div>
<p class="section-body">
A closer look at the type of clean installs, helm layouts, wiring work,
and marine electronics projects Frontline handles for South Florida boaters.
</p>
</div>
<div class="projects-mosaic">
<div class="project-tile tall" role="button" tabindex="0" aria-label="View full size image of a Frontline marine electronics install">
<img class="tile-image" src="frontline-2.png" alt="Frontline marine electronics install">
</div>
<div class="project-tile" role="button" tabindex="0" aria-label="View full size image of Frontline dockside diagnostics work">
<img class="tile-image" src="frontline-3.png" alt="Frontline dockside diagnostics work">
</div>
<div class="project-tile" role="button" tabindex="0" aria-label="View full size image of a Frontline helm control layout">
<img class="tile-image" src="frontline-4.png" alt="Frontline helm control layout">
</div>
<div class="project-tile" role="button" tabindex="0" aria-label="View full size image of Frontline water-tested marine systems">
<img class="tile-image" src="frontline-5.png" alt="Frontline water-tested marine systems">
</div>
<div class="project-tile" role="button" tabindex="0" aria-label="View full size image of a Frontline marine audio upgrade">
<img class="tile-image" src="frontline-6.png" alt="Frontline marine audio upgrade">
</div>
</div>
</section>
<!-- SERVICE AREAS -->
<section id="service-areas" class="service-areas-section">
<p class="section-eyebrow">Service Areas</p>
<h2 class="section-title">MIAMI-DADE<br>& BROWARD</h2>
<p class="section-body">
Frontline Boat Services works across South Florida for boaters who need clean
marine electronics, wiring, audio, GPS, and electrical service done correctly.
</p>
<div class="service-areas-grid">
<div class="service-area-card">
<div class="service-area-name">Miami-Dade</div>
<div class="service-area-label">Primary Service County</div>
<p class="service-area-copy">
Based in Miami and serving boat owners, marinas, and dockside projects
throughout Miami-Dade County.
</p>
</div>
<div class="service-area-card">
<div class="service-area-name">Broward</div>
<div class="service-area-label">North Coverage Area</div>
<p class="service-area-copy">
Available for installs, repairs, diagnostics, and upgrades throughout
Broward County.
</p>
</div>
</div>
<p class="section-body service-area-note">
Call, text, or email with what is going on or what you want upgraded. We listen,
assess the work, give a straight quote, build with marine-grade components,
test everything before signoff, and send you back on the water knowing exactly
what was done.
</p>
</section>
<!-- CONTACT -->
<section id="contact" class="contact-section">
<div>
<p class="section-eyebrow">Get In Touch</p>
<h2 class="section-title">MESSAGE US<br>TODAY</h2>
<p class="section-body" style="margin-bottom: 3rem;">
Ready for a quote or just have a question? Reach out by phone, email, or the form.
We get back to every message.
</p>
<div class="contact-info">
<div class="contact-row">
<svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.38C1.61 2.18 2.6 1 3.8 1h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.91a16 16 0 0 0 6.06 6.06l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
<div>
<div class="contact-label">Phone / Text</div>
<a class="contact-value" href="tel:+17862780478">(786) 278-0478</a>
</div>
</div>
<div class="contact-row">
<svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
</svg>
<div>
<div class="contact-label">Email</div>
<a class="contact-value" href="mailto:[email protected]">[email protected]</a>
</div>
</div>
<div class="contact-row">
<svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
</svg>
<div>
<div class="contact-label">Location</div>
<span class="contact-value">Miami, FL & South Florida</span>
</div>
</div>
<div class="social-row">
<a class="social-btn" href="https://instagram.com/frontlineboats" target="_blank" rel="noopener">
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
@FrontlineBoats
</a>
<a class="social-btn" href="https://facebook.com" target="_blank" rel="noopener">
<svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
Frontline Boat Services
</a>
</div>
</div>
</div>
<div>
<form class="quote-form" onsubmit="handleSubmit(event)">
<div class="form-row">
<div class="form-field">
<label class="form-label" for="fname">First Name</label>
<input class="form-input" type="text" id="fname" placeholder="John" />
</div>
<div class="form-field">
<label class="form-label" for="lname">Last Name</label>
<input class="form-input" type="text" id="lname" placeholder="Smith" />
</div>
</div>
<div class="form-field">
<label class="form-label" for="email">Email</label>
<input class="form-input" type="email" id="email" placeholder="[email protected]" />
</div>
<div class="form-field">
<label class="form-label" for="phone">Phone / Text</label>
<input class="form-input" type="tel" id="phone" placeholder="(305) 000-0000" />
</div>
<div class="form-field">
<label class="form-label" for="service">Service Needed</label>
<select class="form-select" id="service">
<option value="" disabled selected>Select a service…</option>
<option>Marine Electronics Installation</option>
<option>Full Rewiring</option>
<option>Audio Installation</option>
<option>GPS / Navigation</option>
<option>Displays & Instruments</option>
<option>General Electrical Repair</option>
<option>Other / Not Sure</option>
</select>
</div>
<div class="form-field">
<label class="form-label" for="message">Tell Us About Your Boat</label>
<textarea class="form-textarea" id="message" placeholder="Year, make, model, and what you're looking to have done…"></textarea>
</div>
<button class="btn-primary" type="submit" style="width:100%; font-size:0.85rem; padding: 1.1rem;">Request a Free Quote</button>
<div id="form-success">Message sent. We'll be in touch shortly.</div>
</form>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-logo">
<img src="frontline-logo.png" alt="Frontline Boat Services">
</div>
<div class="footer-note">Miami, FL · First Responder Owned · [email protected]</div>
<div class="footer-note">© 2025 Frontline Boat Services. All rights reserved.</div>
</footer>
<a class="sticky-call-cta" href="tel:+17862780478" aria-hidden="true" tabindex="-1">
<span class="sticky-call-icon" aria-hidden="true">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.38C1.61 2.18 2.6 1 3.8 1h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.91a16 16 0 0 0 6.06 6.06l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
</span>
<span class="sticky-call-copy">
<span class="sticky-call-label">Call or Text</span>
<span class="sticky-call-number">(786) 278-0478</span>
</span>
</a>
<div class="image-modal" id="image-modal" role="dialog" aria-modal="true" aria-hidden="true">
<button class="image-modal-close" type="button" aria-label="Close full screen image">×</button>
<img id="image-modal-img" src="" alt="">
</div>
<script>
function handleSubmit(e) {
e.preventDefault();
const form = e.target;
const successMessage = document.getElementById('form-success');
form.reset();
form.classList.add('is-submitted');
form.querySelectorAll('input, select, textarea, button[type="submit"]').forEach((control) => {
control.disabled = true;
});
successMessage.style.display = 'block';
successMessage.setAttribute('tabindex', '-1');
successMessage.focus();
}
const siteNav = document.querySelector('nav');
const navToggle = document.querySelector('.nav-toggle');
const primaryNavigation = document.getElementById('primary-navigation');
const heroSection = document.getElementById('hero');
const siteFooter = document.querySelector('footer');
const stickyCallCta = document.querySelector('.sticky-call-cta');
const navSectionLinks = Array.from(document.querySelectorAll('.nav-links a[href^="#"]'));
const navSections = navSectionLinks
.map((link) => ({ link, section: document.querySelector(link.getAttribute('href')) }))
.filter(({ section }) => section);
function syncMobileNavA11y() {
const isMobileNav = window.matchMedia('(max-width: 800px)').matches;
primaryNavigation.setAttribute('aria-hidden', String(isMobileNav && !siteNav.classList.contains('is-open')));
}
function setMobileNav(open) {
siteNav.classList.toggle('is-open', open);
navToggle.setAttribute('aria-expanded', String(open));
navToggle.setAttribute('aria-label', open ? 'Close navigation' : 'Open navigation');
syncMobileNavA11y();
}
function updateStickyCallCta() {
const isPastHero = heroSection.getBoundingClientRect().bottom <= 0;
const isFooterVisible = siteFooter.getBoundingClientRect().top < window.innerHeight;
const shouldShow = isPastHero && !isFooterVisible;
stickyCallCta.classList.toggle('is-visible', shouldShow);
stickyCallCta.setAttribute('aria-hidden', String(!shouldShow));
stickyCallCta.tabIndex = shouldShow ? 0 : -1;
}
function setActiveNavLink(activeId) {
navSections.forEach(({ link, section }) => {
const isActive = section.id === activeId;
link.classList.toggle('is-active', isActive);
if (isActive) {
link.setAttribute('aria-current', 'location');
} else {
link.removeAttribute('aria-current');
}
});
}
function updateActiveNavLink() {
const navOffset = siteNav.offsetHeight + 24;
const isAtPageEnd = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2;
let activeId = '';
navSections.forEach(({ section }) => {
if (section.getBoundingClientRect().top <= navOffset) {
activeId = section.id;
}
});
if (isAtPageEnd && navSections.length) {
activeId = navSections[navSections.length - 1].section.id;
}
setActiveNavLink(activeId);
siteNav.classList.toggle('is-scrolled', window.scrollY > 40);
updateStickyCallCta();
}
navToggle.addEventListener('click', () => {
setMobileNav(!siteNav.classList.contains('is-open'));
});
document.querySelectorAll('.nav-links a, .nav-cta').forEach((link) => {
link.addEventListener('click', () => {
const targetId = link.getAttribute('href')?.slice(1);
if (targetId) {
setActiveNavLink(targetId);
}
setMobileNav(false);
});
});
window.addEventListener('scroll', updateActiveNavLink, { passive: true });
window.addEventListener('resize', () => {
updateActiveNavLink();
syncMobileNavA11y();
updateStickyCallCta();
});
window.addEventListener('load', updateActiveNavLink);
updateActiveNavLink();
syncMobileNavA11y();
const modal = document.getElementById('image-modal');
const modalImage = document.getElementById('image-modal-img');
const closeModalButton = modal.querySelector('.image-modal-close');
let lastFocusedElement = null;
function openImageModal(image) {
lastFocusedElement = document.activeElement;
modalImage.src = image.currentSrc || image.src;
modalImage.alt = image.alt;
modal.classList.add('is-open');
modal.setAttribute('aria-hidden', 'false');
document.body.classList.add('modal-open');
closeModalButton.focus();
}
function closeImageModal() {
modal.classList.remove('is-open');
modal.setAttribute('aria-hidden', 'true');
document.body.classList.remove('modal-open');
modalImage.removeAttribute('src');
modalImage.alt = '';
if (lastFocusedElement) {
lastFocusedElement.focus();
}
}
document.querySelectorAll('.project-tile').forEach((tile) => {
tile.addEventListener('click', () => {
openImageModal(tile.querySelector('.tile-image'));
});
tile.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
openImageModal(tile.querySelector('.tile-image'));
}
});
});
closeModalButton.addEventListener('click', closeImageModal);
modal.addEventListener('click', (event) => {
if (event.target === modal) {
closeImageModal();
}
});
document.addEventListener('keydown', (event) => {
if (event.key !== 'Escape') {
return;
}
if (modal.classList.contains('is-open')) {
closeImageModal();
}
if (siteNav.classList.contains('is-open')) {
setMobileNav(false);
navToggle.focus();
}
});
</script>
</body>
</html>