seahaven-site/social-accountability/index.html
Adam Moussa 9a6fdff2f8 Rewrite all interior pages as clean static HTML
Strip all WordPress/Elementor markup from 8 interior pages and rebuild
with clean semantic HTML, inline CSS design system, always-white nav,
Basin form backends with AJAX submission, and canonical/OG meta tags.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-07 14:40:55 -04:00

658 lines
21 KiB
HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Social Accountability — Sea Haven Industries</title>
<meta name="description" content="Learn about Sea Haven Industries' commitment to social accountability and responsible business practices in the construction industry.">
<meta property="og:title" content="Social Accountability — Sea Haven Industries">
<meta property="og:description" content="Learn about Sea Haven Industries' commitment to social accountability and responsible business practices in the construction industry.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://seahaven.com/social-accountability/">
<meta property="og:site_name" content="Sea Haven Industries">
<meta property="og:image" content="https://seahaven.com/assets/images/seahaven-16.webp">
<meta name="twitter:card" content="summary_large_image">
<meta name="robots" content="index, follow, max-image-preview:large">
<link rel="canonical" href="https://seahaven.com/social-accountability/">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32.png">
<link rel="apple-touch-icon" sizes="192x192" href="/assets/images/favicon-192.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=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
/* ── Reset & Tokens ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--rose: #cc3366;
--rose-dark: #a82a54;
--rose-tint: #f7edf1;
--ink: #1a1814;
--ink-mid: #3d3730;
--body-bg: #faf9f7;
--surface: #ffffff;
--warm-gray: #f0ece6;
--border: #e0dbd4;
--text: #2a2520;
--text-muted: #7c756d;
--font-display: 'DM Serif Display', Georgia, serif;
--font-body: 'Inter', system-ui, sans-serif;
--max-w: 1200px;
--gap: clamp(1.5rem, 4vw, 3rem);
}
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
color: var(--text);
background: var(--body-bg);
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.container {
max-width: var(--max-w);
margin-inline: auto;
padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
/* ── Typography ── */
.display-lg {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: 1.1;
letter-spacing: -0.015em;
}
.display-md {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.25rem);
line-height: 1.2;
}
.label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rose);
}
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.875rem 1.75rem;
border-radius: 2px;
transition: all 0.2s ease;
cursor: pointer;
border: 1.5px solid transparent;
}
.btn-primary {
background: var(--rose);
color: #fff;
border-color: var(--rose);
}
.btn-primary:hover {
background: var(--rose-dark);
border-color: var(--rose-dark);
}
/* ── Navigation ── */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(255,255,255,0.97);
box-shadow: 0 1px 0 var(--border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 0.625rem;
}
.nav-logo img { height: 44px; width: auto; }
.nav-links {
display: flex;
align-items: center;
gap: 2rem;
list-style: none;
}
.nav-links a {
font-size: 0.875rem;
font-weight: 500;
color: var(--ink-mid);
transition: color 0.15s;
}
.nav-links a:hover { color: var(--rose) !important; }
.nav-cta {
font-size: 0.8125rem;
font-weight: 600;
padding: 0.625rem 1.25rem;
border-radius: 2px;
border: 1.5px solid var(--rose);
color: var(--rose);
background: transparent;
transition: all 0.2s;
}
.nav-cta:hover {
background: var(--rose) !important;
border-color: var(--rose) !important;
color: #fff !important;
}
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
background: none;
border: none;
color: var(--ink);
}
.nav-hamburger span {
display: block;
width: 24px;
height: 2px;
background: currentColor;
transition: all 0.25s;
}
/* ── Mobile Nav ── */
.mobile-menu {
display: none;
position: fixed;
inset: 0;
background: var(--ink);
z-index: 99;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
font-family: var(--font-display);
font-size: 2rem;
color: rgba(255,255,255,0.75);
transition: color 0.15s;
}
.mobile-menu a:hover { color: #fff; }
.mobile-menu-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: none;
border: none;
color: rgba(255,255,255,0.5);
font-size: 1.5rem;
cursor: pointer;
line-height: 1;
}
/* ── Page Hero ── */
.page-hero {
background: var(--ink);
padding: 140px 0 60px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: rgba(255,255,255,0.4);
margin-bottom: 1.25rem;
}
.breadcrumb a {
color: rgba(255,255,255,0.5);
transition: color 0.15s;
}
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { color: rgba(255,255,255,0.25); }
.page-hero h1 {
font-family: var(--font-display);
font-size: clamp(2.25rem, 5vw, 3.5rem);
line-height: 1.1;
color: #fff;
}
/* ── Section Scaffolding ── */
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
/* ── Intro ── */
.intro-section {
background: var(--surface);
}
.intro-content {
max-width: 800px;
}
.intro-content h2 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.25rem);
line-height: 1.2;
color: var(--text);
margin-bottom: 1.25rem;
}
.intro-content p {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.8;
margin-bottom: 1.25rem;
}
/* ── Accordion ── */
.accordion-section {
background: var(--surface);
padding-top: 0;
}
.accordion {
max-width: 800px;
}
.accordion details {
border-bottom: 1px solid var(--border);
}
.accordion details:first-child {
border-top: 1px solid var(--border);
}
.accordion summary {
font-size: 1rem;
font-weight: 600;
color: var(--text);
padding: 1.25rem 0;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
content: '+';
font-size: 1.25rem;
font-weight: 400;
color: var(--text-muted);
flex-shrink: 0;
transition: transform 0.2s;
}
.accordion details[open] summary::after {
content: '\2212';
}
.accordion details .accordion-body {
padding-bottom: 1.25rem;
color: var(--text-muted);
line-height: 1.75;
font-size: 0.9375rem;
}
/* ── CTA Banner ── */
.cta-section {
position: relative;
overflow: hidden;
background: var(--warm-gray);
}
.cta-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: center;
padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.cta-text .label { margin-bottom: 0.75rem; }
.cta-text h2 { margin-bottom: 1rem; }
.cta-text p {
color: var(--text-muted);
font-size: 1rem;
max-width: 520px;
line-height: 1.75;
}
.cta-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: flex-start;
white-space: nowrap;
}
.cta-phone {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--text-muted);
}
.cta-phone strong {
color: var(--text);
font-weight: 600;
}
/* ── Footer ── */
.site-footer {
background: var(--ink);
padding: clamp(3.5rem, 6vw, 5rem) 0 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1.75fr 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-brand img { height: 38px; margin-bottom: 1rem; }
.footer-brand p {
font-size: 0.875rem;
color: rgba(255,255,255,0.4);
line-height: 1.75;
max-width: 260px;
margin-bottom: 1.5rem;
}
.footer-social {
display: flex;
gap: 0.625rem;
}
.footer-social a {
width: 36px;
height: 36px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.45);
font-size: 0.75rem;
transition: all 0.2s;
}
.footer-social a:hover {
border-color: var(--rose);
color: var(--rose);
}
.footer-col h4 {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin-bottom: 1.25rem;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.625rem; }
.footer-col ul li a {
font-size: 0.875rem;
color: rgba(255,255,255,0.5);
transition: color 0.15s;
}
.footer-col ul li a:hover { color: #fff; }
.footer-contact-item {
display: flex;
gap: 0.5rem;
font-size: 0.875rem;
color: rgba(255,255,255,0.5);
margin-bottom: 0.5rem;
line-height: 1.5;
}
.footer-contact-item strong { color: rgba(255,255,255,0.75); }
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1.75rem;
gap: 1rem;
flex-wrap: wrap;
}
.footer-bottom p {
font-size: 0.8125rem;
color: rgba(255,255,255,0.28);
}
.footer-bottom-links {
display: flex;
gap: 1.5rem;
list-style: none;
}
.footer-bottom-links a {
font-size: 0.8125rem;
color: rgba(255,255,255,0.28);
transition: color 0.15s;
}
.footer-bottom-links a:hover { color: rgba(255,255,255,0.65); }
/* ── Responsive ── */
@media (max-width: 1024px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.footer-brand { grid-column: span 2; }
}
@media (max-width: 768px) {
.nav-links, .nav-cta { display: none; }
.nav-hamburger { display: flex; }
.cta-inner { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.footer-brand { grid-column: span 1; }
}
@media (max-width: 480px) {
.page-hero { padding: 120px 0 40px; }
}
</style>
</head>
<body>
<!-- ── Navigation ── -->
<header class="site-header scrolled" id="site-header">
<div class="container">
<nav class="nav-inner">
<a href="/" class="nav-logo">
<img src="/assets/images/seahaven-logo-nav-new.png" alt="Sea Haven Industries">
</a>
<ul class="nav-links">
<li><a href="/services/">Services</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/career/">Careers</a></li>
<li><a href="/social-accountability/">Accountability</a></li>
</ul>
<a href="/contact/" class="nav-cta">Get a Quote</a>
<button class="nav-hamburger" id="hamburger" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</nav>
</div>
</header>
<div class="mobile-menu" id="mobile-menu">
<button class="mobile-menu-close" id="menu-close">&#10005;</button>
<a href="/services/">Services</a>
<a href="/about/">About</a>
<a href="/career/">Careers</a>
<a href="/social-accountability/">Accountability</a>
<a href="/contact/">Contact</a>
</div>
<!-- ── Page Hero ── -->
<section class="page-hero">
<div class="container">
<nav class="breadcrumb" aria-label="Breadcrumb">
<a href="/">Home</a>
<span>/</span>
<a href="/about/">About</a>
<span>/</span>
<span>Social Accountability</span>
</nav>
<h1>Social Accountability</h1>
</div>
</section>
<!-- ── Intro ── -->
<section class="intro-section section">
<div class="container">
<div class="intro-content">
<h2>At Sea Haven Industries, Inc.,</h2>
<p>We are committed to maintaining social accountability and responsibility in compliance with SA8000 International Standards. Our dedication to ethical business practices is integral to our mission and operations. We believe that social accountability is not just a responsibility but a foundation for sustainable growth and success. We are dedicated to fostering a culture of respect, equity, and ethical behavior throughout our organization. We strive to create a positive impact on our employees, communities, and the environment.</p>
<p>Click to expand the sections below for more information on our core principles:</p>
</div>
</div>
</section>
<!-- ── Accordion ── -->
<section class="accordion-section section">
<div class="container">
<div class="accordion">
<details>
<summary>Respect for Workers' Rights</summary>
<div class="accordion-body">
<p>We ensure fair treatment of all employees and uphold their rights to freedom of association, collective bargaining, and a safe working environment. Discrimination, forced labor, and child labor are strictly prohibited.</p>
</div>
</details>
<details>
<summary>Health &amp; Safety</summary>
<div class="accordion-body">
<p>The health and safety of our employees are paramount. We provide a safe and healthy workplace, adhering to all regulatory standards and continuously improving our safety practices and training programs.</p>
</div>
</details>
<details>
<summary>Fair Compensation</summary>
<div class="accordion-body">
<p>We provide fair wages and benefits that meet or exceed legal and industry standards. We ensure that all employees are compensated justly for their work, including overtime pay.</p>
</div>
</details>
<details>
<summary>Working Hours</summary>
<div class="accordion-body">
<p>We comply with applicable laws and industry standards regarding working hours. We ensure that employees have the right to rest and leisure, including adequate time off.</p>
</div>
</details>
<details>
<summary>Ethical Business Practices</summary>
<div class="accordion-body">
<p>We conduct our business with integrity, transparency, and accountability. We are committed to combating corruption, bribery, and unethical practices in all forms.</p>
</div>
</details>
<details>
<summary>Environmental Responsibility</summary>
<div class="accordion-body">
<p>We recognize our responsibility to protect the environment. We strive to minimize our environmental footprint through sustainable practices, resource conservation, and pollution prevention.</p>
</div>
</details>
<details>
<summary>Community Engagement</summary>
<div class="accordion-body">
<p>We actively engage with and support the communities in which we operate. We contribute to local development, respect cultural diversity, and promote social inclusion.</p>
</div>
</details>
<details>
<summary>Continuous Improvement</summary>
<div class="accordion-body">
<p>We are committed to continuous improvement in all aspects of social accountability. We regularly review and update our policies and practices to align with evolving standards and stakeholder expectations.</p>
</div>
</details>
</div>
</div>
</section>
<!-- ── CTA Banner ── -->
<section class="cta-section">
<div class="container">
<div class="cta-inner">
<div class="cta-text">
<p class="label">Start Your Project</p>
<h2 class="display-lg">Get in Touch, Get Results</h2>
<p>Have questions or ready to start your project? Contact us today for prompt, professional service and expert advice. We're here to help with all your construction needs.</p>
</div>
<div class="cta-actions">
<a href="/contact/" class="btn btn-primary">Contact Us</a>
<div class="cta-phone">
<strong>(631) 776-5102</strong>
</div>
</div>
</div>
</div>
</section>
<!-- ── Footer ── -->
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<img src="/assets/images/seahaven-logo-footer-new.png" alt="Sea Haven Industries">
<p>Sea Haven Industries provides quality construction services tailored to your needs, ensuring excellence and reliability in every project. Our services can also be expanded to include other fields as needed.</p>
<div class="footer-social">
<a href="#" aria-label="LinkedIn">in</a>
<a href="#" aria-label="Facebook">f</a>
<a href="#" aria-label="Instagram">ig</a>
</div>
</div>
<div class="footer-col">
<h4>Services</h4>
<ul>
<li><a href="/services/">Electrical Work</a></li>
<li><a href="/services/">Plumbing</a></li>
<li><a href="/services/">HVACR Services</a></li>
<li><a href="/services/">Handyman Services</a></li>
<li><a href="/services/">Garage Door Repair</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Company</h4>
<ul>
<li><a href="/about/">About Us</a></li>
<li><a href="/career/">Careers</a></li>
<li><a href="/social-accountability/">Social Accountability</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Contact</h4>
<div class="footer-contact-item"><strong>710 Koehler Ave</strong></div>
<div class="footer-contact-item">Ronkonkoma, NY 11779</div>
<div class="footer-contact-item"><a href="mailto:work-orders@seahaven.com" style="color: var(--rose);">work-orders@seahaven.com</a></div>
<div class="footer-contact-item"><strong>(631) 776-5102</strong></div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Sea Haven Industries. All rights reserved.</p>
<ul class="footer-bottom-links">
<li><a href="/privacy-policy/">Privacy Policy</a></li>
<li><a href="/terms-of-service/">Terms of Service</a></li>
</ul>
</div>
</div>
</footer>
<script>
const header = document.getElementById('site-header');
const onScroll = () => header.classList.toggle('scrolled', window.scrollY > 40);
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
const hamburger = document.getElementById('hamburger');
const mobileMenu = document.getElementById('mobile-menu');
const menuClose = document.getElementById('menu-close');
hamburger.addEventListener('click', () => mobileMenu.classList.add('open'));
menuClose.addEventListener('click', () => mobileMenu.classList.remove('open'));
mobileMenu.querySelectorAll('a').forEach(a => {
a.addEventListener('click', () => mobileMenu.classList.remove('open'));
});
</script>
</body>
</html>