/* ============================================================================= LogansDev — single source stylesheet ----------------------------------------------------------------------------- Consolidated 2026-08-09 from css/index.css + modal.css + admin.css. Each of those declared its own palette, so a remodel of the public site never reached the portal or admin: the public --primary was #16a34a while the entire authenticated area sat on #059669. RULES FOR EDITING 1. The :root block below is the only palette. Never redeclare a token. 2. Every page loads this file and no other. Do not add a second stylesheet. 3. Text placed directly on --forest-tint must be light. Dark ink measures 3.04:1 there; the cream --tan-text is 5.21:1 and white is 5.88:1. 4. Rules that legitimately differ between the public site, the portal and admin are scoped with a body class, not left to cascade order. PAGE SCOPES body.page-portal -> portal, login, register, credentials body.page-admin -> admin (no class) -> index, privacy, terms ============================================================================= */ /* ══════════════════════════════════════════════════════════════════ TOKENS — the single palette ══════════════════════════════════════════════════════════════════ */ :root { --primary: #16a34a; --primary-dark: #15803d; --primary-darker: #14532d; --primary-light: #f0fdf4; --primary-tint: #dcfce7; --accent: #f59e0b; --accent-dark: #d97706; --heading: #0f172a; --body: #475569; /* Forest green section background. Darkened from #5ca484 on 2026-08-09: the cream --tan-text sitting on it measured 2.62:1, below the WCAG AA 4.5:1 floor. At #376f57 that copy is 5.21:1 and white is 5.88:1. Keep any text placed directly on this background light — dark ink is only 3.04:1 here. */ --forest-tint: #376f57; --tan-text: #f8f1dc; --bg-subtle: #f2f7f3; --border: #e2e8f0; --white: #ffffff; --footer-bg: #0f172a; --footer-text: #94a3b8; --font: 'Hanken Grotesk', Arial, Helvetica, sans-serif; --radius: 10px; --shadow: 0 4px 20px rgba(0, 0, 0, 0.07); --shadow-lg: 0 8px 36px rgba(0, 0, 0, 0.12); /* Surfaces that flip with the theme. Declared here so the block above stays the single palette; the light theme only reassigns these four. */ --footer-divider: rgba(255, 255, 255, 0.07); --on-forest: var(--white); /* links/emphasis on --forest-tint */ --on-footer-strong: var(--white); /* wordmark + link hover in the footer */ --footer-chevron: #86efac; /* logo chevron on the footer surface */ /* Navbar surface. Translucent because the bar blurs whatever scrolls under it, so the tint reads over the hero illustration too. */ --nav-bg: rgba(240, 253, 244, 0.96); /* --primary-light, tinted */ /* Every page/card surface that used to be pure white. The tint is easier on the eye over a long read than #ffffff. --white itself stays white: it is still the ink on green buttons and on the footer. */ --surface: #f0fdf4; --footer-link: var(--primary); --footer-link-hover: #4ade80; --footer-dev: var(--primary); /* the "Dev" half of the footer logo */ /* Ink on --forest-tint. --primary is only 1.78:1 there, so the check icons use mint; the hairline rule is a translucent white. */ --on-forest-strong: var(--white); --on-forest-icon: #86efac; --on-forest-rule: rgba(255, 255, 255, 0.18); --on-forest-chip: rgba(255, 255, 255, 0.15); --on-forest-chip-hover: rgba(255, 255, 255, 0.25); } /* ---------- Light theme ---------------------------------------------------- The palette above is the dark scheme and stays the default: with no data-theme attribute the site renders exactly as before. Setting data-theme="light" on reassigns the two dark surfaces (--footer-bg, --forest-tint) and the ink that sits on them. Contrast on the reassigned pairs, all above the WCAG AA 4.5:1 floor: --tan-text #14532d on --forest-tint #eef7f1 -> 9.7:1 --footer-text #475569 on --footer-bg #f1f5f9 -> 7.4:1 --heading #0f172a on --footer-bg #f1f5f9 -> 16.4:1 -------------------------------------------------------------------------- */ :root[data-theme="light"] { --forest-tint: #eef7f1; --tan-text: #14532d; --footer-bg: #f1f5f9; --footer-text: #475569; --bg-subtle: #f8fafc; --footer-divider: rgba(15, 23, 42, 0.10); --on-forest: var(--primary-darker); --on-footer-strong: var(--heading); --footer-chevron: var(--primary-darker); --nav-bg: rgba(255, 255, 255, 0.96); --surface: var(--white); /* --primary is only 3.01:1 on #f1f5f9 and #4ade80 is 1.59:1, so the footer links step down a shade rather than carrying the dark-theme greens over. */ --footer-link: var(--primary-dark); --footer-link-hover: var(--primary-darker); --footer-dev: var(--primary-dark); --on-forest-strong: var(--heading); --on-forest-icon: var(--primary-dark); --on-forest-rule: rgba(15, 23, 42, 0.12); --on-forest-chip: rgba(15, 23, 42, 0.06); --on-forest-chip-hover: rgba(15, 23, 42, 0.12); --shadow: 0 4px 20px rgba(15, 23, 42, 0.06); --shadow-lg: 0 8px 36px rgba(15, 23, 42, 0.10); } /* ══════════════════════════════════════════════════════════════════ PUBLIC SITE — index.html, privacy.html, terms.html ══════════════════════════════════════════════════════════════════ */ /* ---------- Reset & Base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-gutter: stable; } /* merged: app files set scrollbar-gutter */ body { font-family: var(--font); color: var(--body); line-height: 1.65; background-color: var(--surface); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ---------- Typography ---------- */ h1, h2, h3 { font-weight: 700; line-height: 1.2; color: var(--heading); } h1 { font-size: clamp(2.2rem, 5vw, 3.75rem); font-weight: 800; } h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); } h3 { font-size: 1.1rem; margin-bottom: 0.35rem; } p { margin-bottom: 0.85rem; } p:last-child { margin-bottom: 0; } /* ---------- Layout ---------- */ .section-inner { max-width: 1200px; margin: 0 auto; padding: 3.5rem 1.5rem; } .section-header { text-align: center; max-width: 620px; margin: 0 auto 2.5rem; } .section-header p { font-size: 1rem; color: var(--body); margin-top: 0.6rem; } /* ---------- Buttons ---------- */ .btn-primary, .btn-accent, .btn-outline { display: inline-block; padding: 0.8rem 1.7rem; font-weight: 600; font-size: 0.95rem; font-family: var(--font); border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, transform 0.15s; text-decoration: none; } .btn-primary { background-color: var(--primary-dark); color: var(--white); } .btn-primary:hover { background-color: var(--primary-darker); transform: translateY(-1px); } .btn-accent { background-color: var(--accent); color: var(--heading); } .btn-accent:hover { background-color: var(--accent-dark); transform: translateY(-1px); } .btn-outline { background-color: transparent; color: var(--heading); border-color: rgba(15, 23, 42, 0.35); } .btn-outline:hover { background-color: rgba(15, 23, 42, 0.06); border-color: var(--heading); } /* ---------- Nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); transition: box-shadow 0.3s; } .nav.scrolled { box-shadow: 0 2px 18px rgba(0, 0, 0, 0.09); } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; height: 64px; display: flex; align-items: center; gap: 1.5rem; } @property --angle { syntax: ''; initial-value: 0deg; inherits: false; } .nav-logo { --angle: 0deg; display: inline-flex; align-items: center; gap: 0.28em; font-size: 1.5rem; font-weight: 800; color: var(--heading); letter-spacing: -0.02em; white-space: nowrap; padding: 0.15rem 0.5rem; border-radius: 8px; border: 4px solid transparent; background: linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)) padding-box, conic-gradient(from var(--angle), #14532d, #16a34a, #86efac, #16a34a, #14532d) border-box; animation: spin 3s linear infinite; } /* Only the "Dev" half is green. The wrapper span inherits the link colour, so the rule is class-scoped rather than a bare descendant selector. */ .nav-logo .logo-dev { color: var(--primary); } /* Command-prompt chevron ahead of the wordmark. Sized in em so it tracks the font-size at every breakpoint and leaves the wordmark's own type metrics untouched; --primary-darker on the light navbar, mint on the dark footer where --primary-darker would disappear into the background. */ .logo-chevron { width: 0.5em; height: 0.62em; flex-shrink: 0; display: block; margin-top: 0.03em; stroke: var(--primary-darker); stroke-width: 3.2; stroke-linecap: square; stroke-linejoin: miter; fill: none; } @keyframes spin { to { --angle: 360deg; } } /* Footer wordmark: same lockup as the navbar, reversed onto the footer's dark surface so the animated border reads against #0f172a. */ .footer-logo { --angle: 0deg; border: 4px solid transparent; border-radius: 8px; padding: 0.15rem 0.5rem; background: linear-gradient(var(--footer-bg), var(--footer-bg)) padding-box, conic-gradient(from var(--angle), #14532d, #16a34a, #86efac, #16a34a, #14532d) border-box; animation: spin 3s linear infinite; } .footer-logo .logo-chevron { stroke: var(--footer-chevron); } @media (prefers-reduced-motion: reduce) { .nav-logo, .footer-logo { animation: none; } } /* Login icon: primary green (same as the logo "Dev" text) at rest. On hover a visible light-green tint of the primary — the icon stays green, so a --primary-light background would be invisible; this keeps the hover noticeable. */ .nav-login:hover { background-color: rgba(22, 163, 74, 0.18); } /* --primary @ 18% */ .nav-links { display: flex; list-style: none; gap: 0.1rem; margin-left: auto; } .nav-links a { display: block; padding: 0.4rem 0.8rem; font-size: 0.92rem; font-weight: 500; color: var(--body); border-radius: 6px; transition: color 0.2s, background-color 0.2s; } .nav-links a:hover { color: var(--primary); background-color: var(--primary-light); } .nav-mobile-cta { display: none; } .nav-cta { font-size: 0.88rem; padding: 0.5rem 1.1rem; white-space: nowrap; flex-shrink: 0; border: 2px solid var(--accent); } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; margin-left: auto; } .nav-toggle span { display: block; width: 24px; height: 2px; background-color: var(--heading); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } /* ---------- Anchor Offset ---------- */ #services, #pricing, #process, #contact { scroll-margin-top: 50px; } /* ---------- Utility Menu ---------- */ .util-menu { position: relative; flex-shrink: 0; margin-left: auto; } .util-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; background: none; border: 1.5px solid var(--border); border-radius: 6px; cursor: pointer; padding: 8px 10px; transition: border-color 0.2s, background-color 0.2s; } .util-toggle:hover { border-color: var(--primary); background-color: var(--primary-light); } .util-toggle span { display: block; width: 20px; height: 2px; background-color: var(--heading); border-radius: 2px; } .util-dropdown { display: none; position: absolute; top: calc(100% + 10px); right: 0; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 140px; overflow: hidden; z-index: 200; } .util-dropdown.open { display: block; } .util-item { display: block; padding: 0.75rem 1.1rem; font-size: 0.92rem; font-weight: 500; color: var(--body); transition: background-color 0.15s, color 0.15s; } .util-item:hover { background-color: var(--primary-light); color: var(--primary); } /* ---------- Hero ---------- */ /* The hero ink follows the theme. Dark is the default, so :root carries the night values and data-theme="light" reassigns them, matching how every other flipping surface is declared above. The illustration itself is NOT a token: it cross-fades between two stacked layers further down, because background-image does not interpolate. The dark-theme ink has to be light: it sits on the night illustration, where the original --heading #0f172a measures 1.19:1 and is unreadable. On the night sky rgb(22,48,92) the replacements measure 13.03:1 and 9.28:1. Light theme keeps the original three colours unchanged, because the daytime illustration is bright and dark ink is correct on it. */ :root { --hero-heading: var(--white); /* Mint. Same value as --on-forest-icon and --footer-chevron, pinned as a literal because those tokens flip under data-theme="light". */ --hero-tagline: #86efac; --hero-body: #86efac; } :root[data-theme="light"] { --hero-heading: var(--heading); --hero-tagline: var(--primary-dark); --hero-body: var(--body); } /* background-image cannot be transitioned — there is no interpolation between two url() values, so the swap is always instant. The cross-fade is done by stacking both illustrations and animating opacity instead: the daytime one is the element's own background, the night one is an overlay that fades out when data-theme="light" is set. Both carry the same tint so neither state doubles it. The cost is that both files are fetched on every visit, which a cross-fade cannot avoid. */ .hero { position: relative; isolation: isolate; background: /* Matches --forest-tint (#376f57 = 55 111 87). Kept as rgba because the gradient needs alpha; update both together if the token changes. */ radial-gradient(ellipse at center, rgba(55, 111, 87, 0.3) 0%, rgba(55, 111, 87, 0.15) 45%, rgba(55, 111, 87, 0.02) 100%), url("../images/hero-illustration.png?v=2") bottom center / cover no-repeat; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--heading); padding-top: 64px; padding-bottom: 54vh; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(55, 111, 87, 0.3) 0%, rgba(55, 111, 87, 0.15) 45%, rgba(55, 111, 87, 0.02) 100%), /* ?v=2 — the file name is unchanged, so a returning browser would keep the previous night hero cached and never see the corrected door signs. */ url("../images/hero-illustration-night.png?v=3") bottom center / cover no-repeat; opacity: 1; /* dark is the default theme */ transition: opacity 600ms ease; } :root[data-theme="light"] .hero::before { opacity: 0; } /* The hero ink is a colour, which does interpolate, so it can cross-fade on the same clock as the illustration underneath it. */ .hero h1, .hero-tagline, .hero p { transition: color 600ms ease; } @media (prefers-reduced-motion: reduce) { .hero::before, .hero h1, .hero-tagline, .hero p { transition: none; } } /* Above the overlay. Without this the copy sits under the night layer. */ .hero-content { position: relative; z-index: 1; max-width: 760px; padding: 2rem 1.5rem; } .hero h1 { color: var(--hero-heading); margin-bottom: 0.25rem; letter-spacing: -0.025em; } .hero-tagline { font-size: clamp(1.3rem, 2.8vw, 1.9rem); font-weight: 600; color: var(--hero-tagline); margin-bottom: 1.25rem; letter-spacing: -0.01em; } .hero p { font-size: clamp(1rem, 2vw, 1.18rem); color: var(--hero-body); margin-bottom: 2rem; line-height: 1.75; } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ---------- Services ---------- */ .services { background-color: var(--forest-tint); min-height: 100vh; display: flex; align-items: center; } .services .section-inner { width: 100%; padding-top: 2rem; padding-bottom: 2rem; } .services-divider { border: none; border-top: 1px solid var(--border); margin: 1.75rem 0; } .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .service-card { display: flex; align-items: flex-start; gap: 1rem; background-color: var(--surface); padding: 1.75rem 1.25rem; border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .service-icon { flex-shrink: 0; width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-tint) 100%); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--primary); } .service-icon svg { width: 38px; height: 38px; } .service-card h3 { margin-bottom: 0.35rem; } .service-card p { color: var(--body); font-size: 0.9rem; margin: 0; } /* ---------- Why (inside services section) ---------- */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .why-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; border-radius: var(--radius); border: 1.5px solid var(--border); background-color: var(--surface); transition: border-color 0.2s, box-shadow 0.2s; } .why-card:hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .why-icon { flex-shrink: 0; width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-tint) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--primary); } .why-icon svg { width: 36px; height: 36px; } .why-card h3 { font-size: 1rem; margin-bottom: 0.25rem; } .why-card p { font-size: 0.88rem; color: var(--body); margin: 0; } /* ---------- Pricing ---------- */ .pricing { background-color: var(--forest-tint); } .pricing .section-inner { padding-top: 1.8rem; padding-bottom: 1.8rem; } /* stretch (not center) so all three cards share one height regardless of how many features or CTAs each one carries */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; align-items: stretch; } .pricing-card { background-color: var(--surface); border-radius: var(--radius); padding: 1.35rem 1.75rem; box-shadow: var(--shadow); position: relative; transition: transform 0.2s, box-shadow 0.2s; /* column flex + a growing feature list pins every card's CTAs to the same baseline, so equal-height cards don't leave buttons floating mid-card */ display: flex; flex-direction: column; } .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* The featured card is distinguished by its border and badge alone — it is not scaled up, so all three cards stay the same size. */ .pricing-featured { border: 2px solid var(--primary); } .pricing-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background-color: var(--primary-dark); color: var(--white); font-size: 0.72rem; font-weight: 700; padding: 0.28rem 0.9rem; border-radius: 100px; white-space: nowrap; letter-spacing: 0.06em; text-transform: uppercase; } .pricing-top { text-align: center; margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); } .pricing-top h3 { font-size: 1.2rem; margin-bottom: 0.65rem; } .price { font-size: 2.8rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 0.2rem; letter-spacing: -0.03em; } .price-sub { font-size: 0.82rem; color: var(--body); margin: 0; } .pricing-features { list-style: none; margin-bottom: 1.1rem; flex: 1; } .pricing-features li { padding: 0.3rem 0; font-size: 0.9rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.6rem; } .pricing-features li::before { content: ''; display: block; width: 7px; height: 7px; background-color: var(--primary); border-radius: 50%; flex-shrink: 0; } .pricing-features li:last-child { border-bottom: none; } .pricing-card .btn-primary, .pricing-card .btn-accent, .pricing-card .btn-outline { width: 100%; text-align: center; display: block; } .pricing-card .btn-outline { margin-top: 0.6rem; } /* ---------- Pricing "See Example" dropdown (Scale card) ---------- */ /* One toggle listing several demos, so a tier with more than one example does not stack a button per demo. Mirrors the .util-dropdown pattern in the nav. */ .demo-menu { position: relative; margin-top: 0.6rem; } .pricing-card .demo-toggle { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0; } .demo-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; flex-shrink: 0; } .demo-toggle[aria-expanded="true"] .demo-caret { transform: translateY(1px) rotate(-135deg); } .demo-dropdown { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 200; text-align: left; } .demo-dropdown.open { display: block; } .demo-item { display: block; padding: 0.7rem 1.1rem; font-size: 0.92rem; font-weight: 700; color: var(--heading); transition: background-color 0.15s, color 0.15s; } .demo-item + .demo-item { border-top: 1px solid var(--border); } .demo-item:hover { background-color: var(--primary-light); color: var(--primary); } .demo-item span { display: block; font-size: 0.78rem; font-weight: 400; color: var(--body); margin-top: 0.1rem; } .pricing-note { max-width: 65ch; margin: 1.1rem auto 0; text-align: center; font-size: 0.87rem; color: var(--body); } /* ---------- Retainer Callout ---------- */ /* A call to action, so it sits on white in both themes rather than tinting into the --forest-tint band behind it. Same treatment as .about-card: the panel keeps the standard dark ink whichever theme is active. */ .retainer-callout { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; padding: 1.5rem 2rem; background-color: var(--surface); border: 1px solid var(--primary); border-radius: 12px; flex-wrap: wrap; } .retainer-icon { flex-shrink: 0; width: 48px; height: 48px; background-color: var(--primary); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--white); } .retainer-icon svg { width: 24px; height: 24px; } .retainer-body { flex: 1; min-width: 200px; max-width: 65ch; } .retainer-body h3 { font-size: 1rem; font-weight: 700; color: var(--heading); margin-bottom: 0.35rem; } /* Three prices in a row rather than one headline figure. Separation is spacing rather than a divider rule: the row wraps on narrow screens, and any border or bullet between items strands itself at the wrap point. */ .retainer-tiers { display: flex; flex-wrap: wrap; gap: 0.3rem 1.75rem; list-style: none; margin: 0 0 0.6rem; padding: 0; } .retainer-tiers li { display: flex; align-items: baseline; gap: 0.3rem; font-size: 0.87rem; } .tier-name { font-weight: 600; color: var(--heading); } .tier-price { font-weight: 700; color: var(--primary-dark); } .tier-per { font-weight: 500; font-size: 0.8em; color: var(--body); } .tier-note { color: var(--body); font-size: 0.82rem; } .retainer-body p { font-size: 0.87rem; color: var(--body); line-height: 1.6; } .retainer-cta { flex-shrink: 0; white-space: nowrap; } /* ---------- Process ---------- */ .process { background-color: var(--forest-tint); } .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .process-step { background-color: var(--surface); border-radius: var(--radius); padding: 1.75rem 1.25rem; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; } .process-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .step-number { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background-color: var(--primary-dark); color: var(--white); border-radius: 50%; font-size: 0.95rem; font-weight: 800; margin-bottom: 1rem; } .process-step h3 { font-size: 1.05rem; margin-bottom: 0.45rem; } .process-step p { font-size: 0.88rem; color: var(--body); margin: 0; } /* ---------- Testimonials ---------- */ .testimonials { background-color: var(--surface); } .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .testimonial-card { background-color: var(--bg-subtle); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.9rem; } .testimonial-stars { color: var(--accent); font-size: 1rem; letter-spacing: 0.15em; } .testimonial-card > p { font-size: 0.9rem; font-style: italic; color: var(--body); flex: 1; margin: 0; line-height: 1.7; } .testimonial-author { display: flex; flex-direction: column; gap: 0.1rem; } .testimonial-author strong { color: var(--heading); font-size: 0.9rem; } .testimonial-author span { font-size: 0.82rem; color: var(--body); } /* ---------- Contact ---------- */ /* Shares the --forest-tint surface with .process above and .contact below, so the three read as one band. Its ink therefore flips with the theme too. */ .about { background-color: var(--forest-tint); } /* Was 860px. Now inherits the 1200px .section-inner width so .about-card's edges line up with the pricing cards in the band above. */ /* The white panel that carries the about copy. Sits on --forest-tint like the pricing cards do, so its ink stays the normal dark palette in both themes rather than flipping with the band behind it. */ .about-card { background-color: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 3rem 3.5rem 3.25rem; } @media (max-width: 700px) { .about-card { padding: 2rem 1.5rem 2.25rem; } } .about-lead { font-size: 1.05rem; line-height: 1.8; color: var(--body); margin: 0 auto 2rem; max-width: 680px; text-align: center; } .about-lead strong { color: var(--heading); } .about-commitments { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; max-width: 720px; margin: 0 auto; padding: 1.75rem 0 0; border-top: 1px solid var(--border); } .about-commitment { display: flex; gap: 0.7rem; align-items: flex-start; } .about-commitment svg { flex-shrink: 0; margin-top: 0.2rem; color: var(--primary); } .about-commitment p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--body); } .about-commitment strong { color: var(--heading); display: block; } @media (max-width: 700px) { .about-commitments { grid-template-columns: 1fr; gap: 1.1rem; } } .contact { background-color: var(--forest-tint); } .contact .section-inner { max-width: 760px; } .contact-email { font-size: 0.93rem; margin-top: 0.4rem; } .contact-email a { /* White on --forest-tint is 5.88:1. Reads as a link against the cream body copy through weight and underline rather than hue. Flips to dark green on the light theme, where white would vanish. */ color: var(--on-forest); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* Text sitting directly on a section's forest-tint background (headings, subtitles, loose paragraphs) — not the white cards inside those sections, which keep their normal heading/body colors. */ .services .section-header h2, .services .section-header p, .pricing .section-header h2, .pricing .section-header p, .pricing-note, .about .section-header h2, .about .section-header p, .process .section-header h2, .process .section-header p, .contact .section-header h2, .contact .section-header p, .contact-email { color: var(--tan-text); } .customer-form { margin-top: 2rem; display: grid; gap: 0.9rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } .customer-form input, .customer-form textarea, .customer-form select { padding: 0.85rem 1rem; border-radius: 8px; border: 1.5px solid var(--border); font-size: 0.93rem; font-family: var(--font); color: var(--heading); background-color: var(--surface); transition: border-color 0.2s, box-shadow 0.2s; width: 100%; } /* Muted slate-400 placeholder ink, pinned by value: the form panel is white in both themes, and --footer-text (the only #94a3b8 token) flips dark in light mode, which placeholders must not do. The chevron below bakes the same hex into its data-URI because var() cannot evaluate inside a URL. */ .customer-form input::placeholder, .customer-form textarea::placeholder { color: #94a3b8; } .customer-form select { color: #94a3b8; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 16px; padding-right: 2.5rem; } .customer-form select.has-value { color: var(--heading); } .customer-form input:focus, .customer-form textarea:focus, .customer-form select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .customer-form textarea { min-height: 140px; resize: vertical; } .customer-form .btn-accent { border: none; font-size: 1rem; padding: 0.95rem 2rem; width: 100%; display: block; } .customer-form .btn-accent:disabled { opacity: 0.65; cursor: not-allowed; transform: none; } #formStatus { font-size: 0.88rem; text-align: center; padding: 0.55rem; border-radius: 6px; min-height: 1.4rem; } #formStatus.success { color: var(--primary-dark); background-color: var(--primary-light); } #formStatus.error { color: #dc2626; background-color: #fef2f2; } /* ---------- Footer ---------- */ /* ---------- Legal pages (privacy.html) ---------------------------------------- These rules were a