/* ============================================ SageTechTN Production CSS BUILD-004 Phase 4: Design and Branding Design Canon: mark-aesthetic.md Approved by Father: April 6, 2026 ============================================ */ /* --- Google Fonts loaded in HTML : Merriweather 400,700 (display headings) Source Sans 3 400,500,600 (body) ----------------------------------------- */ /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } /* ============================================ DESIGN TOKENS Canon: intention density over defaults. Every value is a deliberate choice. ============================================ */ /* Readable column width for body copy (centered in max-width container) */ :root { /* --- Backgrounds: Nashville Warm Cream --- "What color is my cream?" Southern afternoon light. Tinted toward sage at near-imperceptible saturation. */ --bg-cream: #FBF6EF; --bg-warm: #F5EDE2; --bg-tinted: #EDE5DA; --bg-white: #FFFCF8; /* --- Text: warm near-blacks, never pure black --- */ --text-primary: #2C2926; --text-secondary: #5C554E; --text-light: #8A837B; --text-on-dark: #F5EDE2; /* --- Accent: Sage Teal (from logo) --- */ --color-accent: #45968A; --color-accent-hover: #3D8A7A; --color-accent-dark: #2D6B5F; --color-accent-light: #DCF0EA; --color-accent-subtle: rgba(74, 158, 142, 0.08); --color-accent-glow: rgba(74, 158, 142, 0.20); /* --- Warm Accent: Nashville Gold --- */ --color-warm: #C8943E; --color-warm-light: #FEF3E5; --color-warm-subtle: rgba(200, 148, 62, 0.10); /* --- Borders: accent-derived, not flat gray --- */ --border-light: rgba(74, 158, 142, 0.12); --border-warm: rgba(200, 148, 62, 0.15); --border-accent: rgba(74, 158, 142, 0.25); /* --- Shadows: brand-warm, sage-tinted --- Canon: "shadows are part of the palette." Never rgba(0, 0, 0, ...). */ --shadow-sm: 0 1px 4px rgba(74, 110, 90, 0.08), 0 1px 2px rgba(74, 110, 90, 0.04); --shadow-md: 0 4px 16px rgba(74, 110, 90, 0.10), 0 2px 4px rgba(74, 110, 90, 0.06); --shadow-lg: 0 8px 32px rgba(74, 110, 90, 0.12), 0 4px 8px rgba(74, 110, 90, 0.06); --shadow-glow: 0 0 24px rgba(74, 158, 142, 0.12), 0 0 48px rgba(200, 148, 62, 0.06); /* --- Footer: dark sage forest --- */ --footer-bg: #1E3330; --footer-text: #E8E0D6; --footer-accent: #5AAFA0; /* --- Typography --- */ --font-display: 'Merriweather', Georgia, 'Times New Roman', serif; --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-hero: clamp(2.2rem, 4vw, 3.2rem); --font-size-h2: clamp(1.6rem, 3vw, 2.2rem); --font-size-h3: clamp(1.2rem, 2vw, 1.5rem); --font-size-body: 1.125rem; --font-size-sm: 0.9375rem; --font-size-lg: 1.25rem; --font-size-xs: 0.8125rem; --line-height-body: 1.75; --line-height-heading: 1.3; /* --- Spacing & Layout --- */ --max-width: 1100px; --prose-max: 65ch; --nav-height: 72px; --section-pad: clamp(3rem, 6vw, 5rem); --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 3rem; --space-xl: 4rem; /* --- Components --- */ --card-radius: 10px; --button-radius: 8px; --touch-target: 48px; } /* ============================================ BODY ============================================ */ body { font-family: var(--font-body); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--text-primary); background: var(--bg-cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================ TYPOGRAPHY ============================================ */ h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: var(--line-height-heading); color: var(--text-primary); } h1 { font-size: var(--font-size-hero); margin-bottom: var(--space-sm); } h2 { font-size: var(--font-size-h2); margin-bottom: var(--space-sm); } h3 { font-size: var(--font-size-h3); margin-bottom: var(--space-xs); } /* Body copy: centered column (was max-width without auto margins = ragged left in wide layout) */ p { margin-bottom: var(--space-sm); max-width: min(var(--prose-max), 100%); margin-left: auto; margin-right: auto; } /* Main headings: same measure as paragraphs unless overridden below */ main .section .container :is(h1, h2, h3, h4) { max-width: min(var(--prose-max), 100%); margin-left: auto; margin-right: auto; } /* Stack sections: titles optically centered (short headings in a centered measure) */ main .section .container > h2 { text-align: center; } /* Cards and split hero: headings use full component width (beats rule above via extra class) */ main .section .container .guarantee-box :is(h1, h2, h3, h4), main .section .container .service-category :is(h1, h2, h3, h4), main .section .container .service-item :is(h1, h2, h3, h4), main .section .container .process-step :is(h1, h2, h3, h4), main .section .container .contact-method :is(h1, h2, h3, h4) { max-width: none; margin-left: 0; margin-right: 0; } main .section .container .service-item p, main .section .container .process-step p, main .section .container .contact-method p { max-width: none; margin-left: 0; margin-right: 0; } main .about-hero .about-hero__text :is(h1, h2, h3, h4) { max-width: none; margin-left: 0; margin-right: 0; } main .about-hero .about-hero__text p.about-hero__lead { margin-left: 0; margin-right: 0; max-width: min(52ch, 100%); } .site-footer p, .site-footer :is(h1, h2, h3, h4) { max-width: none; margin-left: 0; margin-right: 0; } /* Chatbot bubbles: do not inherit prose column constraints */ .chatbot-messages p, .chatbot-messages h4, .chatbot-input-area p { max-width: none; margin-left: 0; margin-right: 0; } a { color: var(--color-accent); text-decoration: underline; transition: color 200ms ease; } a:hover, a:focus { color: var(--color-accent-hover); } a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; } /* ============================================ PER-WORD COLOR GRADATION Canon: discrete steps at semantic boundaries. ============================================ */ .grad-word { display: inline; } .grad-w1 { color: var(--text-primary); } .grad-w2 { color: #3D6E62; } .grad-w3 { color: #458878; } .grad-w4 { color: var(--color-accent); } .grad-warm-w1 { color: var(--text-primary); } .grad-warm-w2 { color: #6B6040; } .grad-warm-w3 { color: #9E7E3E; } .grad-warm-w4 { color: var(--color-warm); } /* ============================================ CONTAINER ============================================ */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(1.125rem, 4vw, 1.75rem); } /* ============================================ NAVIGATION ============================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bg-white); border-bottom: 1px solid var(--border-light); height: var(--nav-height); box-shadow: var(--shadow-sm); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 100%; } .site-logo { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-accent); text-decoration: none; line-height: 1; flex-shrink: 0; } .site-logo:hover { text-decoration: none; color: var(--color-accent-hover); } .site-logo__mark { height: 48px; width: auto; max-width: 200px; object-fit: contain; display: block; } .site-logo:hover .site-logo__mark, .site-logo:focus-visible .site-logo__mark { opacity: 0.92; } .site-logo:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 4px; } .nav-links { display: flex; list-style: none; gap: var(--space-md); align-items: center; } .nav-links a { text-decoration: none; color: var(--text-secondary); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 500; padding: var(--space-xs) 0; transition: color 200ms ease; } .nav-links a:hover, .nav-links a.active { color: var(--color-accent); } .nav-links a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; } .nav-phone { font-family: var(--font-body); font-weight: 700; color: var(--color-accent); font-size: var(--font-size-body); white-space: nowrap; } .nav-phone a { color: var(--color-accent); text-decoration: none; font-weight: 700; } /* Mobile nav toggle */ .nav-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; min-width: var(--touch-target); min-height: var(--touch-target); color: var(--text-primary); } .mobile-phone-icon { display: none; min-width: var(--touch-target); min-height: var(--touch-target); font-size: 1.5rem; text-decoration: none; color: var(--color-accent); align-items: center; justify-content: center; } /* Mobile sticky phone bar */ .mobile-phone-bar { display: none; background: var(--color-accent); color: #fff; text-align: center; padding: var(--space-xs); font-family: var(--font-body); font-weight: 700; font-size: var(--font-size-sm); } .mobile-phone-bar a { color: #fff; text-decoration: none; } @media (max-width: 767px) { .nav-links { display: none; position: absolute; top: var(--nav-height); left: 0; right: 0; background: var(--bg-white); border-bottom: 1px solid var(--border-light); flex-direction: column; padding: var(--space-sm) 1.5rem; gap: var(--space-xs); box-shadow: var(--shadow-md); } .nav-links.open { display: flex; } .nav-toggle { display: flex; align-items: center; justify-content: center; } .mobile-phone-icon { display: flex; } .nav-phone { display: none; } .mobile-phone-bar { display: block; position: sticky; top: var(--nav-height); z-index: 99; } } /* ============================================ SECTIONS ============================================ */ .section { padding: var(--section-pad) 0; } .section--alt { background: var(--bg-warm); } /* ============================================ SVG SECTION DIVIDER: Single Sage Leaf (Variant B, Gold) ============================================ */ .section-divider { text-align: center; padding: 1rem 0; line-height: 0; } .section-divider svg { width: 100%; max-width: 600px; height: auto; } /* ============================================ HERO Canon: "the hero answers the question: where am I?" ============================================ */ .hero { padding: var(--section-pad) 0; position: relative; overflow: hidden; } /* Atmospheric depth: subtle radial gradients */ .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, rgba(74, 158, 142, 0.05) 0%, transparent 55%), radial-gradient(ellipse at 70% 60%, rgba(200, 148, 62, 0.04) 0%, transparent 50%); pointer-events: none; } .hero .container { position: relative; z-index: 1; } .hero h1 { font-size: var(--font-size-hero); } .hero h2 { font-family: var(--font-body); font-size: var(--font-size-lg); color: var(--text-secondary); font-weight: 400; line-height: var(--line-height-body); max-width: min(var(--prose-max), 100%); margin-left: auto; margin-right: auto; } .hero p { max-width: min(var(--prose-max), 100%); margin-left: auto; margin-right: auto; font-size: var(--font-size-body); color: var(--text-secondary); } /* Split hero layout */ .hero__inner { display: flex; flex-direction: column; gap: 2.5rem; } @media (min-width: 768px) { .hero__inner { flex-direction: row; align-items: center; } .hero__text { flex: 1 1 50%; } .hero__photos { flex: 1 1 50%; } } .hero__photos { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; width: 100%; margin-bottom: var(--space-md); } .hero__photos .hero__placeholder-img { max-width: min(100%, 420px); width: 100%; height: auto; border-radius: var(--card-radius); box-shadow: var(--shadow-md); border: 1px solid var(--border-light); object-fit: contain; background: var(--bg-white); } .hero__photo-placeholder { width: 200px; height: 240px; border-radius: var(--card-radius); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--text-light); text-align: center; padding: 1rem; box-shadow: var(--shadow-md); } .hero__photo-placeholder--vintage { background: var(--bg-tinted); border: 1px solid var(--border-warm); } .hero__photo-placeholder--current { background: var(--color-accent-light); border: 1px solid var(--border-accent); } /* Centered hero (non-split) */ .hero--centered { text-align: center; } .hero--centered h1, .hero--centered h2, .hero--centered p { margin-left: auto; margin-right: auto; } /* About page: split hero with portrait */ .about-hero__inner { display: flex; flex-direction: column; gap: var(--space-lg); align-items: center; } @media (min-width: 768px) { .about-hero__inner { flex-direction: row; align-items: flex-start; gap: 2.5rem; } .about-hero__text { flex: 1 1 55%; } .about-hero__photo { flex: 0 1 40%; max-width: 380px; } } .about-hero__text h1 { margin-bottom: var(--space-sm); } .about-hero__text h2 { margin-bottom: var(--space-md); } .about-hero__lead { font-size: var(--font-size-body); color: var(--text-secondary); line-height: var(--line-height-body); max-width: 52ch; } .about-hero__img { width: 100%; height: auto; border-radius: var(--card-radius); box-shadow: var(--shadow-md); border: 1px solid var(--border-light); display: block; } .section--cta-center { text-align: center; } .section--cta-center p { margin-left: auto; margin-right: auto; max-width: 52ch; } /* Services: chatbot is the main action */ .chatbot-section--prominent { scroll-margin-top: calc(var(--nav-height) + 8px); } .chatbot-section--prominent .chatbot-container { max-width: min(680px, 100%); } .chatbot-section--prominent .chatbot-messages { min-height: 260px; height: min(50vh, 460px); } @media (max-width: 767px) { .chatbot-section--prominent .chatbot-messages { height: min(55vh, 520px); } } .services-written-intro { max-width: min(62ch, 100%); margin-left: auto; margin-right: auto; color: var(--text-secondary); margin-bottom: var(--space-md); font-size: var(--font-size-body); } .services-written-intro a { color: var(--color-accent); font-weight: 600; } #all-services-written { scroll-margin-top: calc(var(--nav-height) + 12px); } .hero.section a { color: var(--color-accent); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(69, 150, 138, 0.35); text-underline-offset: 2px; } .hero.section a:hover { color: var(--color-accent-hover); } /* Hero links are styled as teal inline links; CTAs must stay white on accent (higher specificity). */ .hero.section a.cta-button, .hero.section .cta-button { color: #fff; text-decoration: none; } .hero.section a.cta-button:hover, .hero.section .cta-button:hover { color: #fff; } /* ============================================ CTA BUTTON ============================================ */ .cta-button { display: inline-block; background: var(--color-accent); color: #fff; font-family: var(--font-body); font-size: var(--font-size-body); font-weight: 600; padding: 0.875rem 2rem; text-decoration: none; border: none; border-radius: var(--button-radius); min-height: var(--touch-target); cursor: pointer; transition: all 200ms ease; box-shadow: var(--shadow-sm); } .cta-button:hover { background: var(--color-accent-hover); color: #fff; box-shadow: var(--shadow-md); transform: translateY(-1px); } .cta-button:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; } .cta-button--warm { background: var(--color-warm); } .cta-button--warm:hover { background: #B8842F; } /* ============================================ TESTIMONIAL ============================================ */ .testimonial { padding: var(--section-pad) 0; text-align: center; background: var(--bg-warm); } .testimonial blockquote { max-width: 60ch; margin: 0 auto var(--space-sm); font-family: var(--font-display); font-size: var(--font-size-lg); font-style: italic; line-height: 1.8; color: var(--text-primary); } .testimonial blockquote p { max-width: none; margin-left: 0; margin-right: 0; } .testimonial cite { color: var(--text-light); font-family: var(--font-body); font-style: normal; font-size: var(--font-size-sm); } /* ============================================ CHATBOT ============================================ */ .chatbot-section { padding: var(--section-pad) 0; text-align: center; } .chatbot-container { max-width: 600px; margin: var(--space-md) auto 0; border: 1px solid var(--border-light); border-radius: var(--card-radius); overflow: hidden; background: var(--bg-white); box-shadow: var(--shadow-md); } .chatbot-header { background: var(--color-accent); color: #fff; padding: var(--space-sm) var(--space-md); font-family: var(--font-body); font-weight: 600; font-size: var(--font-size-body); } .chatbot-messages { height: 400px; overflow-y: auto; padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); background: var(--bg-cream); } @media (max-width: 767px) { .chatbot-messages { height: 500px; } } .chatbot-message { max-width: 85%; padding: 0.75rem 1rem; border-radius: 10px; font-size: var(--font-size-sm); line-height: 1.6; } .chatbot-message--bot { background: rgba(74, 158, 142, 0.08); border: 1px solid rgba(74, 158, 142, 0.12); color: var(--text-primary); align-self: flex-start; border-bottom-left-radius: 3px; } .chatbot-message--user { background: var(--color-accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; } .chatbot-message--match h4 { margin-bottom: var(--space-xs); color: var(--color-accent-dark); font-family: var(--font-display); } .chatbot-message--match ul { list-style: none; padding: 0; margin-top: var(--space-xs); } .chatbot-message--match li { padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-light); font-size: var(--font-size-sm); } .chatbot-message--match li:last-child { border-bottom: none; } .chatbot-input-area { display: flex; border-top: 1px solid var(--border-light); padding: 0.75rem; gap: 0.5rem; background: var(--bg-white); } .chatbot-input { flex: 1; border: 1px solid var(--border-light); border-radius: 6px; padding: 0.625rem 0.875rem; font-family: var(--font-body); font-size: var(--font-size-sm); min-height: var(--touch-target); background: var(--bg-white); } .chatbot-input:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; border-color: var(--color-accent); } .chatbot-send { background: var(--color-accent); color: #fff; border: none; border-radius: 6px; padding: 0 1rem; font-family: var(--font-body); font-weight: 600; font-size: var(--font-size-sm); cursor: pointer; min-width: var(--touch-target); min-height: var(--touch-target); transition: background 200ms ease; } .chatbot-send:hover { background: var(--color-accent-hover); } .chatbot-fallback { text-align: center; padding: var(--space-sm); font-size: var(--font-size-sm); color: var(--text-light); } .chatbot-fallback a { color: var(--color-accent); font-weight: 600; } /* ============================================ GUARANTEE Canon: Nashville Gold for trust signals. ============================================ */ .guarantee { padding: var(--section-pad) 0; } .guarantee-box { background: var(--color-warm-light); border: 1px solid var(--border-warm); border-left: 4px solid var(--color-warm); border-radius: 0 var(--card-radius) var(--card-radius) 0; padding: 1.5rem 2rem; max-width: 600px; margin: 0 auto; text-align: center; } .guarantee-box :is(h2, h3) { font-family: var(--font-display); color: var(--text-primary); margin-bottom: var(--space-xs); } .guarantee-box p { color: var(--text-secondary); font-size: var(--font-size-sm); max-width: none; margin-left: auto; margin-right: auto; } /* ============================================ AUDIENCE SECTIONS ============================================ */ .audience { padding: var(--section-pad) 0; } .audience h3 { font-family: var(--font-display); color: var(--color-accent); margin-bottom: var(--space-xs); } .audience-group { margin-bottom: var(--space-lg); max-width: min(var(--prose-max), 100%); margin-left: auto; margin-right: auto; } /* ============================================ ABOUT JOURNEY ============================================ */ .journey-section { margin-bottom: var(--space-lg); max-width: min(var(--prose-max), 100%); margin-left: auto; margin-right: auto; } .journey-section h3 { font-family: var(--font-display); color: var(--color-accent); margin-bottom: var(--space-sm); } /* ============================================ PHILOSOPHY ============================================ */ .philosophy-item { margin-bottom: var(--space-lg); max-width: min(60ch, 100%); margin-left: auto; margin-right: auto; } .philosophy-item h3 { font-family: var(--font-display); color: var(--color-accent); } /* ============================================ CARDS Canon: lift + accent border + glow shadow. translateY(-4px). Accent bar: solid sage or gold, no blend. ============================================ */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .card { background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--card-radius); padding: 1.75rem; box-shadow: var(--shadow-sm); transition: all 250ms ease; } .card:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: 0 4px 20px var(--color-accent-glow); } .card h3 { font-family: var(--font-display); color: var(--text-primary); } .card p { color: var(--text-secondary); font-size: var(--font-size-sm); } .card-accent-bar { height: 3px; border-radius: 3px 3px 0 0; margin: -1.75rem -1.75rem 1.25rem; } .card-accent-bar--sage { background: var(--color-accent); } .card-accent-bar--gold { background: var(--color-warm); } /* ============================================ SERVICE CATEGORIES ============================================ */ .service-category { margin-bottom: var(--space-lg); padding: 1.5rem; background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); transition: all 250ms ease; } .service-category:hover { box-shadow: var(--shadow-md); border-color: var(--border-accent); } .service-category h3 { font-family: var(--font-display); color: var(--color-accent); margin-bottom: var(--space-xs); } .service-item { margin-bottom: var(--space-md); } .service-item h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--font-size-body); margin-bottom: var(--space-xs); } /* ============================================ PROCESS STEPS ============================================ */ .process-steps { display: grid; gap: var(--space-md); } @media (min-width: 768px) { .process-steps { grid-template-columns: repeat(3, 1fr); } } .process-step { padding: 1.5rem; background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); transition: all 250ms ease; } .process-step:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: 0 4px 20px var(--color-accent-glow); } .process-step h3 { color: var(--color-accent); } /* ============================================ FAQ ============================================ */ .faq-items { max-width: min(72ch, 100%); margin-left: auto; margin-right: auto; } .faq-items .faq-item p { max-width: none; margin-left: 0; margin-right: 0; } .faq-item { border-bottom: 1px solid var(--border-light); padding: var(--space-md) 0; } .faq-item:last-child { border-bottom: none; } .faq-question { font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-body); margin-bottom: var(--space-xs); color: var(--text-primary); } .faq-answer { color: var(--text-secondary); max-width: none; margin-left: 0; margin-right: 0; } /* ============================================ CONTACT FORM ============================================ */ .contact-form { max-width: 600px; margin-left: auto; margin-right: auto; } .form-group { margin-bottom: var(--space-md); } .form-group label { display: block; font-family: var(--font-body); font-weight: 600; margin-bottom: var(--space-xs); color: var(--text-primary); } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.75rem; border: 1px solid var(--border-light); border-radius: 6px; font-size: var(--font-size-sm); font-family: var(--font-body); min-height: var(--touch-target); background: var(--bg-white); color: var(--text-primary); transition: border-color 200ms ease; } .form-group textarea { min-height: 120px; resize: vertical; } .form-group input:focus, .form-group textarea:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; border-color: var(--color-accent); } .form-helper { font-size: var(--font-size-xs); color: var(--text-light); margin-top: 4px; } .required-abbr { color: var(--color-accent); text-decoration: none; font-weight: 700; cursor: help; } .optional-label { font-weight: 400; color: var(--text-secondary); font-size: 0.9em; } .form-fieldset { border: none; margin: 0 0 var(--space-md); padding: 0; } .form-fieldset legend { font-family: var(--font-body); font-weight: 600; margin-bottom: var(--space-xs); color: var(--text-primary); padding: 0; } .radio-group { display: flex; gap: var(--space-md); flex-wrap: wrap; } .radio-group label { display: flex; align-items: center; gap: var(--space-xs); font-weight: 400; cursor: pointer; min-height: var(--touch-target); } .radio-group input[type="radio"] { width: 20px; height: 20px; min-height: auto; accent-color: var(--color-accent); } /* ============================================ CONTACT METHODS ============================================ */ .contact-methods { display: grid; gap: var(--space-md); } @media (min-width: 768px) { .contact-methods { grid-template-columns: repeat(3, 1fr); } } .contact-method { padding: 1.5rem; background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); transition: all 250ms ease; } .contact-method:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: 0 4px 20px var(--color-accent-glow); } .contact-method h3 { font-family: var(--font-display); color: var(--color-accent); margin-bottom: var(--space-xs); } .contact-method .phone-number { font-family: var(--font-display); font-size: var(--font-size-h2); font-weight: 700; color: var(--color-accent); } /* ============================================ CLASSES ============================================ */ .class-listing { padding: 1.5rem; background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--card-radius); margin-bottom: var(--space-md); box-shadow: var(--shadow-sm); transition: all 250ms ease; } .class-listing:hover { box-shadow: var(--shadow-md); border-color: var(--border-accent); } .class-listing h3 { font-family: var(--font-display); color: var(--color-accent); } .class-detail { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); } .class-detail dt { font-weight: 600; color: var(--text-primary); } .class-detail dd { margin-left: 0; color: var(--text-secondary); } .placeholder-tag { display: inline-block; background: var(--color-warm-light); color: var(--color-warm); padding: 2px 8px; border-radius: 4px; font-size: var(--font-size-xs); font-weight: 600; border: 1px solid var(--border-warm); } /* ============================================ PASSWORD GATE ============================================ */ .password-gate { padding: var(--space-lg); background: var(--bg-warm); border-radius: var(--card-radius); text-align: center; margin-top: var(--space-lg); border: 1px solid var(--border-light); } .password-gate h2 { font-family: var(--font-display); } .password-gate input { padding: 0.75rem; border: 1px solid var(--border-light); border-radius: 6px; font-family: var(--font-body); font-size: var(--font-size-sm); min-height: var(--touch-target); width: 280px; max-width: 100%; background: var(--bg-white); } .password-gate input:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; } .password-gate button { padding: 0.75rem 1.5rem; background: var(--color-accent); color: #fff; border: none; border-radius: var(--button-radius); cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: var(--font-size-sm); min-height: var(--touch-target); margin-left: var(--space-xs); transition: background 200ms ease; } .password-gate button:hover { background: var(--color-accent-hover); } .password-error-msg { color: #b42318; margin-top: var(--space-sm); font-size: var(--font-size-sm); } .password-error-msg[hidden] { display: none !important; } .gate-announce { min-height: 1.25em; margin: var(--space-sm) 0; font-size: var(--font-size-sm); color: var(--text-secondary); } .resource-hub { display: none; } .resource-hub.visible { display: block; } .resource-class { margin-bottom: var(--space-lg); } .resource-class h3 { font-family: var(--font-display); color: var(--color-accent); margin-bottom: var(--space-sm); } .resource-list { list-style: none; padding: 0; } .resource-list li { padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); } .resource-list li:last-child { border-bottom: none; } /* ============================================ TESTIMONIAL PLACEHOLDER ============================================ */ .testimonial-placeholder { padding: 1.5rem; background: var(--bg-warm); border-left: 3px solid var(--color-warm); margin-bottom: var(--space-md); border-radius: 0 var(--card-radius) var(--card-radius) 0; } /* ============================================ FOOTER Canon: dark sage forest, not black. ============================================ */ .site-footer { background: var(--footer-bg); color: var(--footer-text); padding: var(--space-xl) 0; } .footer-grid { display: grid; gap: var(--space-lg); } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } } .site-footer a { color: var(--footer-accent); text-decoration: none; transition: color 200ms ease; } .site-footer a:hover { color: #fff; text-decoration: underline; } .site-footer a:focus-visible { outline: 2px solid var(--footer-accent); outline-offset: 3px; border-radius: 2px; } .footer-links { list-style: none; } .footer-links li { margin-bottom: var(--space-xs); } .footer-phone { font-family: var(--font-display); font-size: var(--font-size-h3); font-weight: 700; } .footer-tagline { font-family: var(--font-display); font-style: italic; color: var(--footer-accent); margin-top: var(--space-xs); } .footer-copyright { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; color: rgba(255, 255, 255, 0.4); font-size: var(--font-size-xs); } /* ============================================ SKIP LINK (Accessibility) ============================================ */ .skip-link { position: absolute; top: -100%; left: var(--space-sm); background: var(--color-accent); color: #fff; padding: var(--space-sm) var(--space-md); z-index: 200; border-radius: 0 0 6px 6px; font-family: var(--font-body); font-weight: 600; text-decoration: none; } .skip-link:focus { top: 0; } /* ============================================ PHASE LABEL (remove for production) ============================================ */ .phase-label { position: fixed; bottom: var(--space-sm); right: var(--space-sm); background: var(--color-accent-dark); color: #fff; padding: 4px 12px; font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 700; border-radius: 4px; z-index: 200; pointer-events: none; }