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
+20
-118
@@ -1,106 +1,9 @@
|
||||
/* ============================================================
|
||||
FLOOR IT HARDWOOD FLOORS — Design System
|
||||
main.css: variables, reset, typography, layout, utilities
|
||||
============================================================ */
|
||||
@import url('tokens.css');
|
||||
|
||||
/* --- Custom Properties ------------------------------------ */
|
||||
:root {
|
||||
/* Color palette — warm wood tones, no gradients */
|
||||
--ink: #0c0805;
|
||||
--charcoal: #1c1208;
|
||||
--bark: #2e1d0a;
|
||||
--bark-mid: #3d2710;
|
||||
--amber: #c88b2a;
|
||||
--amber-dark: #a87220;
|
||||
--amber-light: #e8aa48;
|
||||
--parchment: #f5f0e8;
|
||||
--cream: #faf8f5;
|
||||
--grain: #ede5d8;
|
||||
--smoke: #7a6a56;
|
||||
--ash: #b8a898;
|
||||
--white: #ffffff;
|
||||
/* FLOOR IT HARDWOOD FLOORS: Design System
|
||||
main.css: reset, typography, layout, utilities */
|
||||
|
||||
/* Semantic aliases */
|
||||
--bg-dark: var(--ink);
|
||||
--bg-dark-alt: var(--charcoal);
|
||||
--bg-mid-dark: var(--bark);
|
||||
--bg-light: var(--cream);
|
||||
--bg-light-alt: var(--parchment);
|
||||
--bg-warm: var(--grain);
|
||||
|
||||
--text-on-dark: #f0e8da;
|
||||
--text-muted-dark:var(--ash);
|
||||
--text-on-light: var(--charcoal);
|
||||
--text-muted-light:var(--smoke);
|
||||
|
||||
--cta: var(--amber);
|
||||
--cta-hover: var(--amber-dark);
|
||||
--cta-text: var(--ink);
|
||||
|
||||
--border-dark: rgba(255,255,255,0.08);
|
||||
--border-light: rgba(0,0,0,0.08);
|
||||
|
||||
/* Typography */
|
||||
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-display: 'Inter', Georgia, serif;
|
||||
|
||||
/* Scale */
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-md: 1.125rem;
|
||||
--text-lg: 1.25rem;
|
||||
--text-xl: 1.5rem;
|
||||
--text-2xl: 2rem;
|
||||
--text-3xl: 2.5rem;
|
||||
--text-4xl: 3.25rem;
|
||||
--text-5xl: 4.25rem;
|
||||
--text-6xl: 5.5rem;
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--space-20: 5rem;
|
||||
--space-24: 6rem;
|
||||
--space-32: 8rem;
|
||||
|
||||
/* Section rhythm */
|
||||
--section-py: clamp(4rem, 8vw, 8rem);
|
||||
--section-py-sm: clamp(2.5rem, 5vw, 5rem);
|
||||
|
||||
/* Layout */
|
||||
--container-max: 1200px;
|
||||
--container-wide: 1380px;
|
||||
--container-px: clamp(1.25rem, 5vw, 2.5rem);
|
||||
|
||||
/* Effects */
|
||||
--radius-sm: 4px;
|
||||
--radius: 8px;
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 24px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
|
||||
--shadow: 0 4px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
|
||||
--shadow-lg: 0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.10);
|
||||
--shadow-xl: 0 24px 64px rgba(0,0,0,0.22);
|
||||
|
||||
--transition: 0.25s ease;
|
||||
--transition-slow: 0.5s ease;
|
||||
|
||||
/* Header height */
|
||||
--header-h: 72px;
|
||||
}
|
||||
|
||||
/* --- Reset ------------------------------------------------ */
|
||||
/* Reset */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@@ -148,7 +51,7 @@ input, textarea, select {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* --- Typography ------------------------------------------- */
|
||||
/* Typography */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
@@ -215,9 +118,9 @@ p { max-width: 68ch; }
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.grid--2 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid--3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.grid--4 { grid-template-columns: repeat(4, 1fr); }
|
||||
.grid--2, .grid--2col { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid--3, .grid--3col { grid-template-columns: repeat(3, 1fr); }
|
||||
.grid--4, .grid--4col { grid-template-columns: repeat(4, 1fr); }
|
||||
|
||||
.grid--auto-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
|
||||
.grid--auto-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
|
||||
@@ -253,7 +156,7 @@ p { max-width: 68ch; }
|
||||
.section--mid .lead,
|
||||
.section--bark .lead { color: var(--text-muted-dark); }
|
||||
|
||||
/* --- Buttons --------------------------------------------- */
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -328,7 +231,7 @@ p { max-width: 68ch; }
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* --- Forms ----------------------------------------------- */
|
||||
/* Forms */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
@@ -439,7 +342,7 @@ p { max-width: 68ch; }
|
||||
.form-status--success { background: #d4edda; color: #155724; display: block; }
|
||||
.form-status--error { background: #f8d7da; color: #721c24; display: block; }
|
||||
|
||||
/* --- Cards ----------------------------------------------- */
|
||||
/* Cards */
|
||||
.card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
@@ -459,7 +362,7 @@ p { max-width: 68ch; }
|
||||
color: var(--text-on-dark);
|
||||
}
|
||||
|
||||
/* --- Scroll Animations ----------------------------------- */
|
||||
/* Scroll Animations */
|
||||
[data-animate] {
|
||||
opacity: 0;
|
||||
transition: opacity 0.7s ease, transform 0.7s ease;
|
||||
@@ -482,7 +385,7 @@ p { max-width: 68ch; }
|
||||
[data-delay="5"] { transition-delay: 0.5s; }
|
||||
[data-delay="6"] { transition-delay: 0.6s; }
|
||||
|
||||
/* --- Utility Classes ------------------------------------- */
|
||||
/* Utility Classes */
|
||||
.text-center { text-align: center; }
|
||||
.text-amber { color: var(--amber); }
|
||||
.text-muted { color: var(--smoke); }
|
||||
@@ -512,7 +415,7 @@ p { max-width: 68ch; }
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* --- Dividers -------------------------------------------- */
|
||||
/* Dividers */
|
||||
.divider {
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
@@ -524,22 +427,21 @@ p { max-width: 68ch; }
|
||||
.section--mid .divider,
|
||||
.section--bark .divider { background: var(--amber); }
|
||||
|
||||
/* --- Responsive ------------------------------------------ */
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.grid--4 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid--3 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid--4, .grid--4col { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid--3, .grid--3col { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid--2,
|
||||
.grid--3,
|
||||
.grid--4 { grid-template-columns: 1fr; }
|
||||
.grid--2, .grid--2col,
|
||||
.grid--3, .grid--3col,
|
||||
.grid--4, .grid--4col { grid-template-columns: 1fr; }
|
||||
|
||||
.cta-group { justify-content: center; }
|
||||
.cta-group .btn { min-width: 220px; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
:root { --section-py: clamp(3rem, 8vw, 4rem); }
|
||||
p { max-width: 100%; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user