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); }
|
||||
|
||||
+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%; }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
/* FLOOR IT HARDWOOD FLOORS. Summer Promo Topbar + Popup */
|
||||
|
||||
/* Topbar */
|
||||
#promo-topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1001;
|
||||
height: 44px;
|
||||
background: #c8a96e;
|
||||
color: #1a1207;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0 1rem;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
#promo-topbar.visible { display: flex; }
|
||||
#promo-topbar-text { flex: 1; text-align: center; }
|
||||
#promo-topbar-btn {
|
||||
background: #1a1207;
|
||||
color: #c8a96e;
|
||||
border: none;
|
||||
padding: 0.3rem 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#promo-topbar-btn:hover { background: #0c0805; }
|
||||
#promo-topbar-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #1a1207;
|
||||
font-size: 1.3rem;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
opacity: 0.6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#promo-topbar-close:hover { opacity: 1; }
|
||||
|
||||
body.has-topbar #site-header { top: 44px; }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#promo-topbar-text { font-size: 0.72rem; }
|
||||
#promo-topbar { gap: 0.5rem; }
|
||||
}
|
||||
|
||||
/* Popup */
|
||||
#promo-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(30, 20, 10, 0.72);
|
||||
z-index: 9000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
#promo-overlay.visible {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
#promo-box {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
padding: 2.5rem 2rem 2rem;
|
||||
position: relative;
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
#promo-box .promo-badge {
|
||||
display: inline-block;
|
||||
background: #c8a96e;
|
||||
color: #fff;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
#promo-box h2 {
|
||||
font-size: 1.45rem;
|
||||
line-height: 1.25;
|
||||
color: #1a1207;
|
||||
margin: 0 0 0.4rem;
|
||||
}
|
||||
#promo-box .promo-sub {
|
||||
font-size: 0.9rem;
|
||||
color: #6b5c3e;
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
#promo-box .promo-field {
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
#promo-box .promo-field label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #1a1207;
|
||||
margin-bottom: 0.3rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
#promo-box .promo-field input {
|
||||
width: 100%;
|
||||
padding: 0.65rem 0.85rem;
|
||||
border: 1.5px solid #d5c9b6;
|
||||
border-radius: 3px;
|
||||
font-size: 0.95rem;
|
||||
color: #1a1207;
|
||||
background: #faf8f5;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
#promo-box .promo-field input:focus {
|
||||
outline: none;
|
||||
border-color: #c8a96e;
|
||||
}
|
||||
#promo-box .promo-submit {
|
||||
width: 100%;
|
||||
padding: 0.85rem;
|
||||
background: #c8a96e;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
cursor: pointer;
|
||||
margin-top: 0.5rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
#promo-box .promo-submit:hover { background: #b5923d; }
|
||||
#promo-box .promo-submit:disabled { background: #ccc; cursor: default; }
|
||||
#promo-box .promo-error {
|
||||
font-size: 0.85rem;
|
||||
color: #b91c1c;
|
||||
margin-top: 0.5rem;
|
||||
display: none;
|
||||
}
|
||||
#promo-box .promo-success {
|
||||
text-align: center;
|
||||
padding: 1rem 0 0.5rem;
|
||||
display: none;
|
||||
}
|
||||
#promo-box .promo-success p {
|
||||
font-size: 1.05rem;
|
||||
color: #1a1207;
|
||||
margin: 0.5rem 0 0;
|
||||
}
|
||||
#promo-close {
|
||||
position: absolute;
|
||||
top: 0.85rem;
|
||||
right: 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: #9a8a72;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
#promo-close:hover { color: #1a1207; }
|
||||
#promo-box .promo-fine {
|
||||
font-size: 0.72rem;
|
||||
color: #9a8a72;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
#promo-box { padding: 2rem 1.25rem 1.5rem; }
|
||||
#promo-box h2 { font-size: 1.2rem; }
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
/* ============================================================
|
||||
FLOOR IT HARDWOOD FLOORS: Design Tokens
|
||||
tokens.css: CSS custom properties only. No rules, no selectors.
|
||||
============================================================ */
|
||||
|
||||
/* 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;
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
:root { --section-py: clamp(3rem, 8vw, 4rem); }
|
||||
}
|
||||
Reference in New Issue
Block a user