/** * design-c.css — Trust-Forward Conversion design system, site-wide. * * Loaded LAST in on every HTML page so source-order beats * per-page inline styles. Layered `@layer` blocks let us keep the * override predictable without a specificity war. * * Goals (from docs/DESIGN_DIRECTIONS.md · Direction C): * - One dominant primary CTA per section, no competing buttons * - Editorial serif display (Fraunces) + neutral sans body (Inter) * - Generous whitespace, restrained motion * - Mobile-first: 90% of traffic is on phone, so every rule below * scales down cleanly to 320px * - Prefers-reduced-motion respected everywhere */ @layer sr-design-c { /* ── Tokens ─────────────────────────────────────────────────────────── */ :root { --sr-maroon: #7B2337; --sr-maroon-dark: #5A1A29; --sr-brass: #C4935A; --sr-brass-on-light: #8A5A22; --sr-cream: #FAF8F5; --sr-white: #ffffff; --sr-border: #ECE7E1; --sr-text: #1A1A1A; --sr-text-soft: #4A4A4A; --sr-text-muted: #7A7A7A; --sr-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sr-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sr-radius: 12px; --sr-radius-lg: 20px; --sr-shadow-sm: 0 2px 8px rgba(0,0,0,0.04); --sr-shadow: 0 12px 40px rgba(0,0,0,0.06); --sr-shadow-hover: 0 22px 56px rgba(0,0,0,0.10); --sr-ease: cubic-bezier(.2,.9,.4,1); } /* ── Safe-area + horizontal-scroll belt ─────────────────────────────── */ html, body { overflow-x: hidden !important; max-width: 100vw !important; overscroll-behavior-x: none; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; padding-bottom: env(safe-area-inset-bottom); } /* ── Typography refinement ──────────────────────────────────────────── */ h1, h2, h3, .hero__title, .hero-title, .section-heading, .h1, .h2 { font-family: var(--sr-serif) !important; letter-spacing: -0.02em !important; text-wrap: balance; } body, p, li, input, textarea, button, .btn, .nav__cta { font-family: var(--sr-sans); } /* ── Buttons: refined pill with subtle hover ────────────────────────── */ .btn, .cta, .btn--primary, .btn--maroon, .btn--brass, button.btn, a.btn, .ed-btn { font-family: var(--sr-sans) !important; font-weight: 600; letter-spacing: -0.005em; border-radius: 10px; transition: transform 200ms var(--sr-ease), background-color 200ms var(--sr-ease), box-shadow 200ms var(--sr-ease) !important; will-change: transform; } .btn--primary, button.btn--primary, a.btn--primary, .btn--maroon, button.btn--maroon, a.btn--maroon { background: var(--sr-maroon) !important; color: #fff !important; border: none !important; box-shadow: var(--sr-shadow-sm) !important; } .btn--primary:hover, button.btn--primary:hover, a.btn--primary:hover, .btn--maroon:hover, button.btn--maroon:hover, a.btn--maroon:hover { background: var(--sr-maroon-dark) !important; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(123, 35, 55, 0.25) !important; } .btn--ghost, .btn--secondary, .ed-btn--ghost { background: transparent !important; color: var(--sr-maroon) !important; border: 1.5px solid var(--sr-maroon) !important; } .btn--ghost:hover, .btn--secondary:hover, .ed-btn--ghost:hover { background: var(--sr-maroon) !important; color: #fff !important; transform: translateY(-2px); } /* ── Hero polish (works on all page types) ──────────────────────────── */ .hero, .hero-lite, .ed-hero { position: relative; overflow: hidden; } .hero__title, .hero-title, .ed-hero__title { font-size: clamp(30px, 6vw, 66px) !important; line-height: 1.06 !important; text-wrap: balance; } .hero__subtitle, .hero-subtitle, .ed-hero__lede { font-size: clamp(15px, 1.6vw, 18px) !important; line-height: 1.6 !important; color: rgba(255,255,255,0.85) !important; max-width: 52ch; } @media (max-width: 640px) { .hero__title, .hero-title, .ed-hero__title { font-size: clamp(28px, 8vw, 42px) !important; } .hero, .hero-lite, .ed-hero { min-height: 88dvh !important; } } /* ── Cards and tiles (project/testimonial/service/why) ──────────────── */ .card, .review-card, .why-card, .step-card, .project, .ed-svc-tile, .ed-proj, .ed-test, .cost-summary, .tier, .division { transition: transform 260ms var(--sr-ease), box-shadow 260ms var(--sr-ease); will-change: transform; } .card:hover, .review-card:hover, .why-card:hover, .project:hover, .ed-svc-tile:hover, .ed-proj:hover, .division:hover, .tier:hover { transform: translateY(-4px); box-shadow: var(--sr-shadow-hover); } /* ── Scroll-reveal (activated by animation.js) ──────────────────────── */ .sr-reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--sr-ease), transform 700ms var(--sr-ease); } .sr-reveal.is-visible { opacity: 1; transform: none; } .sr-reveal.sr-delay-1 { transition-delay: 90ms; } .sr-reveal.sr-delay-2 { transition-delay: 170ms; } .sr-reveal.sr-delay-3 { transition-delay: 250ms; } .sr-reveal.sr-delay-4 { transition-delay: 330ms; } /* ── Sticky mobile CTA (appears after user scrolls past hero) ───────── */ .sr-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 55; background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); border-top: 1px solid var(--sr-border); padding: 12px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); display: none; gap: 10px; align-items: center; transform: translateY(120%); transition: transform 320ms var(--sr-ease); } .sr-sticky-cta.is-visible { transform: none; } .sr-sticky-cta__phone { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sr-cream); color: var(--sr-maroon); border: 1.5px solid var(--sr-maroon); font-size: 18px; text-decoration: none; } .sr-sticky-cta__main { flex: 1 1 auto; min-height: 44px; padding: 12px 18px; background: var(--sr-maroon); color: #fff; border-radius: 10px; font-size: 14px; font-weight: 700; text-align: center; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; letter-spacing: -0.005em; } .sr-sticky-cta__main:hover { background: var(--sr-maroon-dark); } @media (max-width: 768px) { .sr-sticky-cta { display: flex; } /* Reserve room so a fixed nav/Dakota card + sticky-cta don't overlap */ body:not(.sr-no-sticky-reserve) { padding-bottom: 80px; } } /* ── Nav polish ─────────────────────────────────────────────────────── */ .nav, .ed-nav { transition: background-color 240ms var(--sr-ease), box-shadow 240ms var(--sr-ease); } .nav.is-scrolled, .ed-nav.is-scrolled { background: rgba(255,255,255,0.98) !important; box-shadow: 0 6px 22px rgba(0,0,0,0.05); } .nav__cta, .ed-nav__cta { transition: transform 200ms var(--sr-ease), background-color 200ms var(--sr-ease); } .nav__cta:hover, .ed-nav__cta:hover { transform: translateY(-1px); } /* ── Section rhythm — generous whitespace ───────────────────────────── */ .section, .ed-section { padding: clamp(56px, 8vw, 112px) 24px !important; } @media (max-width: 640px) { .section, .ed-section { padding: 48px 20px !important; } } /* ── Focus rings (keyboard access, WCAG 2.4.7) ──────────────────────── */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--sr-brass) !important; outline-offset: 3px !important; border-radius: 4px; } /* ── Motion guardrails ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .sr-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .card, .review-card, .why-card, .project, .division, .tier { transition: none !important; } .btn, .cta, .nav__cta, .sr-sticky-cta { transition: none !important; } } /* ── Selection color ────────────────────────────────────────────────── */ ::selection { background: var(--sr-brass); color: #1a1a1a; } /* ── Mobile tap-target minimums (WCAG 2.5.5) ────────────────────────── */ @media (max-width: 768px) { .btn, .nav__cta, .cta, button, .filter, .faq-q, [role="button"] { min-height: 44px; } } } /* end @layer sr-design-c */