Migrate to Stack A: PHP-fpm + nginx + supervisord, drop flat HTML + Python API
- Remove old flat HTML pages (index, about, blog, contact, reviews, services/*, locations/*) - Remove Python/Flask API container (api/) - Remove old root nginx.conf and components/ - Add infra/: full nginx.conf (http block at /etc/nginx/nginx.conf), php-fpm-pool.conf (TCP listen), supervisord.conf, entrypoint.sh (auto-generates ALTCHA_HMAC_KEY) - Add src/: PHP router, page/service/location/blog templates, contact handler, altcha handler, promo endpoint, SQLite data files - Rewrite Dockerfile: single container, tini PID 1, healthcheck, all env vars declared - Update docker-compose.yml: port 8096, env_file, healthcheck - Update .dockerignore: exclude .env.*, include robots.txt/sitemap.xml/404.html/500.html - Update assets: tokens.css, promo-popup.css/js, altcha.min.js, refactored form.js/main.js Verified: all 17 routes 200, protection audit PASS, Resend confirmed working Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Concept Agent
+313
-18
@@ -1,5 +1,5 @@
|
||||
/* ============================================================
|
||||
FLOOR IT HARDWOOD FLOORS — Component Styles
|
||||
FLOOR IT HARDWOOD FLOORS : Component Styles
|
||||
components.css: header, footer, hero, cards, faq, gallery
|
||||
============================================================ */
|
||||
|
||||
@@ -580,6 +580,8 @@
|
||||
border: 1px solid var(--border-light);
|
||||
transition: transform var(--transition), box-shadow var(--transition);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
@@ -616,6 +618,7 @@
|
||||
|
||||
.service-card-body {
|
||||
padding: var(--space-6);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-card-body h3 {
|
||||
@@ -680,7 +683,8 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.process-step-num {
|
||||
.process-step-num,
|
||||
.process-num {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: var(--amber);
|
||||
@@ -1228,6 +1232,213 @@
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.contact-detail {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.contact-detail:last-of-type { border-bottom: none; }
|
||||
.contact-detail strong {
|
||||
min-width: 130px;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.contact-detail a { color: var(--bark); font-weight: 600; }
|
||||
.contact-detail span { color: var(--smoke); }
|
||||
|
||||
/* About preview two-column layout */
|
||||
.about-preview-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-16);
|
||||
align-items: center;
|
||||
}
|
||||
.about-preview-text .divider {
|
||||
width: 48px;
|
||||
height: 3px;
|
||||
background: var(--amber);
|
||||
border-radius: 2px;
|
||||
margin: var(--space-4) 0 var(--space-5);
|
||||
}
|
||||
.about-preview-img {
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
.about-preview-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* About story two-column layout */
|
||||
.about-story {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-16);
|
||||
align-items: center;
|
||||
}
|
||||
.about-story-img {
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
.about-story-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Service intro two-column layout */
|
||||
.service-intro {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: center;
|
||||
}
|
||||
.service-intro-img {
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
.service-intro-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Location service cards */
|
||||
.card--service-local {
|
||||
padding: var(--space-8) var(--space-6);
|
||||
}
|
||||
.card--service-local h3 {
|
||||
font-size: var(--text-xl);
|
||||
color: var(--ink);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.card--service-local p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--smoke);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Benefit item (service pages) */
|
||||
.benefit-item {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-light);
|
||||
padding: var(--space-8) var(--space-6);
|
||||
transition: box-shadow var(--transition), transform var(--transition);
|
||||
}
|
||||
.benefit-item:hover {
|
||||
box-shadow: var(--shadow);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.benefit-item h3 {
|
||||
font-size: var(--text-xl);
|
||||
color: var(--ink);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.benefit-item p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--smoke);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Native details/summary FAQ */
|
||||
details.faq-item {
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius);
|
||||
background: var(--white);
|
||||
overflow: hidden;
|
||||
}
|
||||
details.faq-item + details.faq-item { margin-top: var(--space-2); }
|
||||
details.faq-item summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-5) var(--space-6);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
color: var(--charcoal);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
details.faq-item summary::-webkit-details-marker { display: none; }
|
||||
details.faq-item summary::after {
|
||||
content: '+';
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
color: var(--amber);
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
details.faq-item[open] summary::after { transform: rotate(45deg); }
|
||||
details.faq-item p {
|
||||
padding: 0 var(--space-6) var(--space-5);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--smoke);
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --- Location pills --------------------------------------- */
|
||||
.locations-pill-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
justify-content: center;
|
||||
margin-top: var(--space-10);
|
||||
}
|
||||
.location-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--space-3) var(--space-6);
|
||||
background: var(--white);
|
||||
border: 1.5px solid var(--border-light);
|
||||
border-radius: 999px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--bark);
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
|
||||
transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
.location-pill:hover {
|
||||
background: var(--bark);
|
||||
border-color: var(--bark);
|
||||
color: var(--white);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* --- Credential stats ------------------------------------- */
|
||||
.credential-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-8) var(--space-4);
|
||||
}
|
||||
.credential-item strong {
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: 800;
|
||||
color: var(--amber);
|
||||
line-height: 1;
|
||||
}
|
||||
.credential-item span {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--ash);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* --- Responsive ------------------------------------------ */
|
||||
@media (max-width: 1024px) {
|
||||
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
|
||||
@@ -1236,7 +1447,7 @@
|
||||
.contact-layout { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Header: switch to mobile menu earlier — desktop nav with logo + 6 links
|
||||
/* Header: switch to mobile menu earlier : desktop nav with logo + 6 links
|
||||
+ phone + CTA needs ~1024px to fit without overflowing. */
|
||||
@media (max-width: 1023px) {
|
||||
.header-nav { display: none; }
|
||||
@@ -1268,7 +1479,7 @@
|
||||
.header-logo-sub { display: none; }
|
||||
}
|
||||
|
||||
/* Ultra-narrow phones (iPhone SE portrait, 320px) — tighten header */
|
||||
/* Ultra-narrow phones (iPhone SE portrait, 320px) : tighten header */
|
||||
@media (max-width: 360px) {
|
||||
.header-cta .btn--sm {
|
||||
padding-inline: 0.75rem;
|
||||
@@ -1326,7 +1537,7 @@
|
||||
background: var(--border-dark);
|
||||
}
|
||||
|
||||
/* Luxury about split — larger image aspect */
|
||||
/* Luxury about split : larger image aspect */
|
||||
.about-img-wrap {
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
@@ -1363,7 +1574,7 @@
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Process step numbers — larger */
|
||||
/* Process step numbers : larger */
|
||||
.process-step-num {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
@@ -1371,7 +1582,7 @@
|
||||
box-shadow: 0 0 0 6px rgba(200,139,42,0.15);
|
||||
}
|
||||
|
||||
/* FAQ — premium border treatment */
|
||||
/* FAQ : premium border treatment */
|
||||
.faq-item {
|
||||
border-left: 3px solid transparent;
|
||||
transition: border-color var(--transition), box-shadow var(--transition);
|
||||
@@ -1392,13 +1603,13 @@
|
||||
border-color: rgba(200,139,42,0.25);
|
||||
}
|
||||
|
||||
/* Contact form wrap — elevated shadow */
|
||||
/* Contact form wrap : elevated shadow */
|
||||
.contact-form-wrap {
|
||||
box-shadow: 0 32px 80px rgba(0,0,0,0.14), 0 8px 24px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
LUXURY ELEVATION — v2
|
||||
LUXURY ELEVATION : v2
|
||||
============================================================ */
|
||||
|
||||
/* Services 2×2 grid */
|
||||
@@ -1419,7 +1630,7 @@
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* Service card — luxury border accent on hover */
|
||||
/* Service card : luxury border accent on hover */
|
||||
.services-grid-2x2 .service-card {
|
||||
border-top: 3px solid transparent;
|
||||
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
|
||||
@@ -1430,7 +1641,7 @@
|
||||
box-shadow: 0 24px 60px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* Testimonial cards — richer treatment */
|
||||
/* Testimonial cards : richer treatment */
|
||||
.testimonial-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
@@ -1512,7 +1723,7 @@
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Gallery grid — full-bleed dramatic layout */
|
||||
/* Gallery grid : full-bleed dramatic layout */
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -1559,7 +1770,7 @@
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* Location card — luxury elevated */
|
||||
/* Location card : luxury elevated */
|
||||
.location-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1598,7 +1809,7 @@
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
/* Section headers — more dramatic */
|
||||
/* Section headers : more dramatic */
|
||||
.section-header h2,
|
||||
.section-header--center h2 {
|
||||
font-size: clamp(2rem, 4.5vw, 3.25rem);
|
||||
@@ -1615,7 +1826,7 @@
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* Benefit icon — amber filled circle */
|
||||
/* Benefit icon : amber filled circle */
|
||||
.benefit-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
@@ -1667,7 +1878,7 @@
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Mobile responsive overrides — inline grids must collapse
|
||||
Mobile responsive overrides : inline grids must collapse
|
||||
to single column on narrow viewports. Inline styles win over
|
||||
CSS unless we use !important inside media queries.
|
||||
============================================================ */
|
||||
@@ -1705,7 +1916,7 @@ html, body {
|
||||
gap: 1.5rem !important;
|
||||
}
|
||||
|
||||
/* Order overrides — when 2-col uses order:1/2 to flip image/content,
|
||||
/* Order overrides : when 2-col uses order:1/2 to flip image/content,
|
||||
reset on mobile so content always reads top-to-bottom */
|
||||
[style*="order:1"],
|
||||
[style*="order: 1"] {
|
||||
@@ -1747,7 +1958,7 @@ html, body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Form/contact layout — prevent intrinsic input width from blowing out
|
||||
/* Form/contact layout : prevent intrinsic input width from blowing out
|
||||
the grid track. Without min-width:0, <select> and <input> defaults push
|
||||
the parent column wider than the viewport, causing horizontal scroll. */
|
||||
.contact-layout { min-width: 0; }
|
||||
@@ -1794,3 +2005,87 @@ html, body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* CTA banner sections with photo background */
|
||||
.cta-section {
|
||||
position: relative;
|
||||
background-image: url('/assets/images/refinishing-machine.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: var(--text-on-dark);
|
||||
}
|
||||
.cta-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(12, 8, 5, 0.78);
|
||||
}
|
||||
.cta-section-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-8);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.cta-section-text h2 { color: var(--white); }
|
||||
.cta-section-text p { color: rgba(240,232,218,0.8); max-width: 52ch; }
|
||||
.cta-section .btn--primary {
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 20px rgba(200,139,42,0.4);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.cta-section-inner { flex-direction: column; text-align: center; }
|
||||
.cta-section-text p { margin-inline: auto; }
|
||||
}
|
||||
|
||||
/* Service grid cards (home page) */
|
||||
.card--service {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
color: var(--text-on-light);
|
||||
}
|
||||
.card--service .card-img-wrap {
|
||||
height: 220px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.card--service .card-img-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
.card--service:hover .card-img-wrap img { transform: scale(1.05); }
|
||||
.card--service .card-body {
|
||||
padding: var(--space-6);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.card--service .card-body h3 {
|
||||
font-size: var(--text-xl);
|
||||
color: var(--charcoal);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.card--service .card-body p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--smoke);
|
||||
line-height: 1.65;
|
||||
max-width: none;
|
||||
flex: 1;
|
||||
}
|
||||
.card--service .card-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 700;
|
||||
color: var(--amber);
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: var(--space-4);
|
||||
transition: gap var(--transition);
|
||||
}
|
||||
.card--service:hover .card-link { gap: var(--space-3); }
|
||||
|
||||
Reference in New Issue
Block a user