/* HIPAA Companion — mobile-first (5 themes via data-theme on ) */ :root { color-scheme: light; --color-bg: #f4f7fb; --color-surface: #ffffff; --color-ink: #0f172a; --color-muted: #475569; --color-accent: #0d9488; --color-accent-deep: #0f766e; --color-navy: #1e3a5f; --color-iris: #6366f1; --color-warning: #fbbf24; --color-header-bg: rgba(244, 247, 251, 0.82); --color-header-border: rgba(15, 23, 42, 0.06); --color-border: rgba(15, 23, 42, 0.12); --color-border-subtle: rgba(15, 23, 42, 0.06); --color-border-faint: rgba(15, 23, 42, 0.08); --color-input-bg: #ffffff; --color-page-tint: rgba(13, 148, 136, 0.12); --color-contact-aside-bg: rgba(99, 102, 241, 0.08); --color-contact-aside-border: rgba(99, 102, 241, 0.2); --color-nav-active-bg: rgba(13, 148, 136, 0.12); --color-service-card-shadow: rgba(15, 23, 42, 0.06); --color-cta-card-bg: linear-gradient(145deg, rgba(13, 148, 136, 0.12), rgba(99, 102, 241, 0.12)); --color-cta-card-border: rgba(13, 148, 136, 0.35); --color-alert-ok-bg: rgba(13, 148, 136, 0.15); --color-alert-ok-border: rgba(13, 148, 136, 0.35); --color-alert-err-bg: rgba(220, 38, 38, 0.1); --color-alert-err-border: rgba(220, 38, 38, 0.3); --color-alert-err-text: #991b1b; --color-secondary-btn-bg: rgba(255, 255, 255, 0.95); --color-secondary-btn-border: rgba(30, 58, 95, 0.15); --color-ghost-hover: rgba(30, 58, 95, 0.06); --color-footer-bg: #0b1220; --color-footer-body: #cbd5e1; --color-footer-muted: #94a3b8; --color-footer-heading: #94a3b8; --color-footer-link: #e2e8f0; --color-footer-strong: #f8fafc; --color-skip-bg: var(--color-navy); --color-skip-fg: #ffffff; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.12); --shadow-card: 0 12px 40px rgba(13, 148, 136, 0.15); --font-sans: "DM Sans", system-ui, -apple-system, sans-serif; --font-display: "Outfit", var(--font-sans); --space-section: clamp(3rem, 8vw, 5.5rem); --max-text: 68ch; } [data-theme="ocean"] { color-scheme: light; --color-bg: #eef6fb; --color-surface: #ffffff; --color-ink: #0c1929; --color-muted: #475569; --color-accent: #0284c7; --color-accent-deep: #0369a1; --color-navy: #1d4ed8; --color-iris: #4f46e5; --color-header-bg: rgba(238, 246, 251, 0.92); --color-header-border: rgba(2, 132, 199, 0.12); --color-border: rgba(15, 23, 42, 0.12); --color-border-subtle: rgba(2, 132, 199, 0.08); --color-border-faint: rgba(2, 132, 199, 0.1); --color-input-bg: #ffffff; --color-page-tint: rgba(2, 132, 199, 0.12); --color-contact-aside-bg: rgba(59, 130, 246, 0.1); --color-contact-aside-border: rgba(37, 99, 235, 0.22); --color-nav-active-bg: rgba(2, 132, 199, 0.12); --color-service-card-shadow: rgba(15, 23, 42, 0.07); --color-cta-card-bg: linear-gradient(145deg, rgba(2, 132, 199, 0.14), rgba(59, 130, 246, 0.12)); --color-cta-card-border: rgba(2, 132, 199, 0.35); --color-alert-ok-bg: rgba(2, 132, 199, 0.12); --color-alert-ok-border: rgba(2, 132, 199, 0.35); --color-secondary-btn-border: rgba(29, 78, 216, 0.18); --color-ghost-hover: rgba(2, 132, 199, 0.08); --shadow-card: 0 12px 40px rgba(2, 132, 199, 0.12); } [data-theme="sunset"] { color-scheme: light; --color-bg: #fff9f5; --color-surface: #ffffff; --color-ink: #1c1917; --color-muted: #57534e; --color-accent: #ea580c; --color-accent-deep: #c2410c; --color-navy: #9f1239; --color-iris: #db2777; --color-header-bg: rgba(255, 249, 245, 0.92); --color-header-border: rgba(234, 88, 12, 0.12); --color-border: rgba(28, 25, 23, 0.12); --color-border-subtle: rgba(234, 88, 12, 0.07); --color-border-faint: rgba(234, 88, 12, 0.1); --color-input-bg: #ffffff; --color-page-tint: rgba(234, 88, 12, 0.1); --color-contact-aside-bg: rgba(219, 39, 119, 0.08); --color-contact-aside-border: rgba(219, 39, 119, 0.2); --color-nav-active-bg: rgba(234, 88, 12, 0.1); --color-service-card-shadow: rgba(120, 53, 15, 0.08); --color-cta-card-bg: linear-gradient(145deg, rgba(234, 88, 12, 0.12), rgba(219, 39, 119, 0.1)); --color-cta-card-border: rgba(234, 88, 12, 0.35); --color-alert-ok-bg: rgba(234, 88, 12, 0.12); --color-alert-ok-border: rgba(234, 88, 12, 0.32); --color-secondary-btn-border: rgba(159, 18, 57, 0.18); --color-ghost-hover: rgba(234, 88, 12, 0.08); --shadow-card: 0 12px 40px rgba(234, 88, 12, 0.12); } [data-theme="forest"] { color-scheme: light; --color-bg: #f3faf6; --color-surface: #ffffff; --color-ink: #14532d; --color-muted: #3f6212; --color-accent: #059669; --color-accent-deep: #047857; --color-navy: #166534; --color-iris: #65a30d; --color-header-bg: rgba(243, 250, 246, 0.92); --color-header-border: rgba(5, 150, 105, 0.12); --color-border: rgba(20, 83, 45, 0.14); --color-border-subtle: rgba(5, 150, 105, 0.08); --color-border-faint: rgba(5, 150, 105, 0.1); --color-input-bg: #ffffff; --color-page-tint: rgba(5, 150, 105, 0.1); --color-contact-aside-bg: rgba(101, 163, 13, 0.1); --color-contact-aside-border: rgba(101, 163, 13, 0.22); --color-nav-active-bg: rgba(5, 150, 105, 0.12); --color-service-card-shadow: rgba(20, 83, 45, 0.08); --color-cta-card-bg: linear-gradient(145deg, rgba(5, 150, 105, 0.14), rgba(101, 163, 13, 0.12)); --color-cta-card-border: rgba(5, 150, 105, 0.35); --color-alert-ok-bg: rgba(5, 150, 105, 0.12); --color-alert-ok-border: rgba(5, 150, 105, 0.32); --color-secondary-btn-border: rgba(22, 101, 52, 0.18); --color-ghost-hover: rgba(5, 150, 105, 0.08); --shadow-card: 0 12px 40px rgba(5, 150, 105, 0.12); } /* Teal uses :root variables; attribute data-theme="teal" matches default look */ [data-theme="midnight"], [data-theme="dark"] { color-scheme: dark; --color-bg: #0c1222; --color-surface: #141c2e; --color-ink: #e8eef7; --color-muted: #94a3b8; --color-accent: #2dd4bf; --color-accent-deep: #5eead4; --color-navy: #7dd3fc; --color-iris: #a5b4fc; --color-header-bg: rgba(12, 18, 34, 0.9); --color-header-border: rgba(148, 163, 184, 0.14); --color-border: rgba(148, 163, 184, 0.2); --color-border-subtle: rgba(148, 163, 184, 0.1); --color-border-faint: rgba(148, 163, 184, 0.12); --color-input-bg: #0f1729; --color-page-tint: rgba(45, 212, 191, 0.14); --color-contact-aside-bg: rgba(129, 140, 248, 0.14); --color-contact-aside-border: rgba(165, 180, 252, 0.28); --color-nav-active-bg: rgba(45, 212, 191, 0.16); --color-service-card-shadow: rgba(0, 0, 0, 0.25); --color-cta-card-bg: linear-gradient(145deg, rgba(45, 212, 191, 0.12), rgba(129, 140, 248, 0.14)); --color-cta-card-border: rgba(45, 212, 191, 0.35); --color-alert-ok-bg: rgba(45, 212, 191, 0.18); --color-alert-ok-border: rgba(45, 212, 191, 0.4); --color-alert-err-bg: rgba(248, 113, 113, 0.12); --color-alert-err-border: rgba(248, 113, 113, 0.35); --color-alert-err-text: #fecaca; --color-secondary-btn-bg: rgba(255, 255, 255, 0.08); --color-secondary-btn-border: rgba(148, 163, 184, 0.22); --color-ghost-hover: rgba(148, 163, 184, 0.1); --color-footer-bg: #060a12; --color-footer-body: #cbd5e1; --color-footer-muted: #94a3b8; --color-footer-heading: #64748b; --color-footer-link: #e2e8f0; --color-footer-strong: #f8fafc; --color-skip-bg: #38bdf8; --color-skip-fg: #0f172a; --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.35); --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.32); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } body { transition: none; } } body { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; color: var(--color-ink); background: var(--color-bg); -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-accent-deep); } a:hover { text-decoration-thickness: 2px; } .shell { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .skip-link { position: absolute; left: -999px; top: 0.5rem; background: var(--color-skip-bg); color: var(--color-skip-fg); padding: 0.5rem 1rem; z-index: 100; border-radius: var(--radius-sm); } .skip-link:focus { left: 0.5rem; } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--color-header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-header-border); } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding-block: 0.85rem; } .site-header__inner > .brand { flex: 1 1 auto; min-width: 0; order: 1; } .site-header__inner > .theme-select { order: 2; } .site-header__inner > .nav-toggle { order: 3; } .site-header__inner > .site-nav { order: 4; } .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: inherit; min-width: 0; } .brand__logo { flex-shrink: 0; border-radius: 12px; box-shadow: 0 6px 20px rgba(13, 148, 136, 0.35); } .brand__text { display: flex; flex-direction: column; min-width: 0; } .brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.2; } .brand__tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); cursor: pointer; padding: 0; flex-shrink: 0; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover { background: var(--color-nav-active-bg); border-color: var(--color-accent); } .theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .theme-toggle__icon { display: block; } .theme-toggle__icon--sun { display: none; } [data-theme="midnight"] .theme-toggle__icon--sun, [data-theme="dark"] .theme-toggle__icon--sun { display: block; } [data-theme="midnight"] .theme-toggle__icon--moon, [data-theme="dark"] .theme-toggle__icon--moon { display: none; } .theme-select { display: inline-block; max-width: 11rem; padding: 0.4rem 2rem 0.4rem 0.65rem; font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0; line-height: 1.3; transition: border-color 0.15s ease, box-shadow 0.15s ease; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .theme-select:hover { border-color: var(--color-accent); } .theme-select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; padding: 0; flex-shrink: 0; } .nav-toggle__bar { position: relative; width: 20px; height: 2px; background: var(--color-navy); border-radius: 2px; } .nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--color-navy); border-radius: 2px; } .nav-toggle__bar::before { top: -6px; } .nav-toggle__bar::after { top: 6px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); } .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--color-surface); border-bottom: 1px solid var(--color-border-faint); box-shadow: var(--shadow-soft); padding: 1rem 1rem 1.25rem; flex-direction: column; gap: 1rem; flex: 1 1 100%; } .site-nav.is-open { display: flex; } .site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .site-nav__list a { display: block; padding: 0.65rem 0.75rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-ink); font-weight: 500; } .site-nav__list a:hover, .site-nav__list a.is-active { background: var(--color-nav-active-bg); color: var(--color-accent-deep); } .site-nav__cta { text-align: center; } @media (min-width: 860px) { .site-header__inner { flex-wrap: nowrap; gap: 1rem; } .site-header__inner > .brand { flex: 0 1 auto; order: 1; } .site-header__inner > .theme-select { order: 3; margin-left: 0.35rem; } .site-header__inner > .nav-toggle { display: none; order: 5; } .site-header__inner > .site-nav { order: 2; flex: 1 1 auto; margin-left: auto; justify-content: flex-end; } .nav-toggle { display: none; } .site-nav { display: flex; position: static; flex-direction: row; align-items: center; gap: 1.5rem; padding: 0; background: transparent; border: 0; box-shadow: none; flex: 1 1 auto; width: auto; } .site-nav__list { flex-direction: row; gap: 0.35rem; } .site-nav__cta { margin-left: 0.5rem; } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1.15rem; font-weight: 600; font-family: inherit; font-size: 0.95rem; line-height: 1.2; text-decoration: none; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: linear-gradient(135deg, var(--color-accent), var(--color-navy)); color: #fff; box-shadow: 0 12px 30px rgba(13, 148, 136, 0.45); } .btn--primary:hover { box-shadow: 0 16px 40px rgba(30, 58, 95, 0.35); } .btn--secondary { background: var(--color-secondary-btn-bg); color: var(--color-navy); border-color: var(--color-secondary-btn-border); } .btn--ghost { background: transparent; color: var(--color-navy); border-color: rgba(30, 58, 95, 0.2); } .btn--ghost:hover { background: var(--color-ghost-hover); } .btn--light { background: #fff; color: var(--color-navy); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .btn--lg { padding: 0.85rem 1.5rem; font-size: 1rem; } /* Hero */ .hero { position: relative; overflow: hidden; padding: var(--space-section) 0 calc(var(--space-section) + 0.5rem); color: #e2e8f0; background: radial-gradient(120% 80% at 20% 0%, #1e3a5f 0%, #0f172a 45%, #020617 100%); } .hero__glow { position: absolute; inset: -20% -10% auto; height: 70%; background: radial-gradient(circle at 30% 30%, rgba(13, 148, 136, 0.55), transparent 55%), radial-gradient(circle at 70% 20%, rgba(99, 102, 241, 0.4), transparent 45%); pointer-events: none; opacity: 0.9; } .hero__inner { position: relative; z-index: 1; } .eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(226, 232, 240, 0.85); margin: 0 0 1rem; } .hero__title { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 3.35rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 1rem; max-width: 14ch; } .hero__lede { margin: 0 0 1.75rem; font-size: 1.08rem; max-width: var(--max-text); color: rgba(226, 232, 240, 0.88); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; } .hero__badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .hero__badges li { font-size: 0.82rem; padding: 0.45rem 0.85rem; border-radius: 999px; background: rgba(15, 23, 42, 0.45); border: 1px solid rgba(148, 163, 184, 0.25); } /* Enhanced homepage hero */ .hero--enhanced { padding: clamp(3.5rem, 9vw, 6rem) 0 clamp(3rem, 7vw, 5rem); background: #020617; background-image: radial-gradient(ellipse 90% 60% at 15% 0%, rgba(30, 58, 95, 0.95) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 85% 10%, rgba(13, 148, 136, 0.35) 0%, transparent 50%), linear-gradient(180deg, #0f172a 0%, #020617 100%); } .hero--enhanced .hero__glow { z-index: 0; opacity: 0.45; height: 55%; inset: -10% -5% auto; } .services-section--after-hero { padding-top: clamp(3rem, 7vw, 4.5rem); margin-top: 0; } .hero__layout { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; } .hero__copy { position: relative; z-index: 2; } @media (min-width: 960px) { .hero__layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2.5rem 3rem; } .hero--enhanced .hero__title { max-width: 16ch; } } .hero--enhanced .hero__title, .hero--enhanced .hero__lede, .hero--enhanced .eyebrow { text-shadow: 0 1px 12px rgba(2, 6, 23, 0.65); } .hero--enhanced .hero__lede { max-width: 36rem; line-height: 1.6; } .hero__highlights { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } @media (min-width: 520px) { .hero__highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .hero__highlights li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 500; padding: 0.55rem 0.85rem; border-radius: 12px; background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(148, 163, 184, 0.22); color: #f1f5f9; } .hero__highlight-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 8px; background: rgba(13, 148, 136, 0.25); font-size: 1rem; flex-shrink: 0; } .hero__showcase { position: relative; } .hero-slideshow { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.12); background: #0f172a; } .hero-slideshow__track { position: relative; min-height: 300px; height: clamp(280px, 38vw, 380px); } .hero-slide { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0.45s ease; pointer-events: none; } .hero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; } .hero-slide__media { flex: 1 1 auto; min-height: 0; overflow: hidden; background: #0f172a; } .hero-slide__img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; } .hero-slide__caption { position: relative; flex: 0 0 auto; margin: 0; padding: 1rem 1.25rem; background: #020617; border-top: 1px solid rgba(148, 163, 184, 0.2); color: #f8fafc; display: flex; flex-direction: column; gap: 0.35rem; } .hero-slide__caption strong { font-size: 1.05rem; font-weight: 700; line-height: 1.3; } .hero-slide__caption span { font-size: 0.9rem; line-height: 1.45; color: #cbd5e1; } .hero-slide[data-accent="email"] .hero-slide__caption strong { color: #5eead4; } .hero-slide[data-accent="fax"] .hero-slide__caption strong { color: #7dd3fc; } .hero-slide[data-accent="forms"] .hero-slide__caption strong { color: #c4b5fd; } .hero-slide[data-accent="app"] .hero-slide__caption strong { color: #6ee7b7; } .hero-slideshow__controls { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 0.65rem; padding: 0.75rem 1rem; background: #0f172a; border-top: 1px solid rgba(148, 163, 184, 0.15); } .hero-slideshow__btn, .hero-slideshow__dot { pointer-events: auto; flex-shrink: 0; } .hero-slideshow__btn { width: 2.25rem; height: 2.25rem; border: none; border-radius: 999px; background: rgba(15, 23, 42, 0.75); color: #f8fafc; font-size: 1.35rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); } .hero-slideshow__btn:hover { background: rgba(13, 148, 136, 0.85); } .hero-slideshow__dots { display: flex; gap: 0.35rem; } .hero-slideshow__dot { width: 0.55rem; height: 0.55rem; padding: 0; border: none; border-radius: 999px; background: rgba(148, 163, 184, 0.55); cursor: pointer; } .hero-slideshow__dot.is-active { width: 1.4rem; background: #2dd4bf; } /* Sections */ .section { padding: var(--space-section) 0; } .section--flush-top { padding-top: 0; } .section__head { max-width: 720px; margin-bottom: 2.25rem; } .section__title { font-family: var(--font-display); font-size: clamp(1.65rem, 4vw, 2.15rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.75rem; line-height: 1.15; } .section__sub { margin: 0; color: var(--color-muted); font-size: 1.05rem; } /* Service grid */ .service-grid { display: grid; gap: 1rem; } @media (min-width: 600px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } } .service-card { position: relative; background: var(--color-surface); border-radius: var(--radius-lg); padding: 1.35rem 1.35rem 1.5rem; border: 1px solid var(--color-border-subtle); box-shadow: 0 4px 24px var(--color-service-card-shadow); overflow: hidden; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .service-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--color-accent), var(--color-iris)); opacity: 0.85; } .service-card--email::before { background: linear-gradient(90deg, #0d9488, #14b8a6); } .service-card--fax::before { background: linear-gradient(90deg, #6366f1, #8b5cf6); } .service-card--forms::before { background: linear-gradient(90deg, #f59e0b, #f97316); } .service-card--chat::before { background: linear-gradient(90deg, #ec4899, #a855f7); } .service-card--files::before { background: linear-gradient(90deg, #0ea5e9, #2563eb); } .service-card--cta { display: flex; flex-direction: column; gap: 0.75rem; justify-content: center; background: var(--color-cta-card-bg); border: 1px dashed var(--color-cta-card-border); } .service-card--cta::before { display: none; } .service-card__icon { font-size: 1.75rem; display: block; margin-bottom: 0.5rem; } .service-card__title { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 0.5rem; } .service-card__text { margin: 0; color: var(--color-muted); font-size: 0.95rem; } /* Proof */ .proof-section__inner { display: grid; gap: 2rem; align-items: center; } @media (min-width: 880px) { .proof-section__inner { grid-template-columns: 1.2fr 0.9fr; gap: 3rem; } } .proof-section__copy p { color: var(--color-muted); max-width: var(--max-text); } .checklist { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--color-muted); } .checklist li { margin-bottom: 0.45rem; } .checklist li::marker { color: var(--color-accent); } .proof-section__panel { background: var(--color-surface); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-card); border: 1px solid var(--color-cta-card-border); } .proof-stat__value { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--color-accent-deep); margin-bottom: 0.35rem; } .proof-stat__label { color: var(--color-muted); font-size: 0.95rem; } /* CTA band */ .cta-band { background: linear-gradient(120deg, #0f766e, #1e3a5f 55%, #312e81); color: #e2e8f0; margin-bottom: 0; } .cta-band__inner { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; } @media (min-width: 720px) { .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; } } .cta-band__title { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.75rem); margin: 0 0 0.35rem; } .cta-band__text { margin: 0; color: rgba(226, 232, 240, 0.88); max-width: 520px; } /* Page hero (inner pages) */ .page-hero { padding: calc(var(--space-section) - 0.5rem) 0 2rem; background: linear-gradient(180deg, var(--color-page-tint), transparent); } .page-hero--compact { padding-bottom: 1.5rem; } .page-hero__title { font-family: var(--font-display); font-size: clamp(1.85rem, 5vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 0.75rem; max-width: 18ch; line-height: 1.1; } .page-hero__lede { margin: 0; color: var(--color-muted); max-width: 640px; font-size: 1.05rem; } /* Prose */ .prose { max-width: var(--max-text); } .prose h2 { font-family: var(--font-display); margin-top: 2rem; font-size: 1.35rem; } .prose p, .prose li { color: var(--color-muted); } .resource-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; } .resource-list__item { margin: 0; padding: 1.25rem 1.5rem; border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-md, 12px); background: var(--color-surface, #fff); } .resource-list__date { display: block; font-size: 0.8125rem; color: var(--color-muted, #64748b); margin-bottom: 0.35rem; } .resource-list__title { margin: 0 0 0.5rem; font-size: 1.25rem; line-height: 1.3; } .resource-list__title a { color: inherit; text-decoration: none; } .resource-list__title a:hover { color: var(--color-primary, #0d9488); } .resource-list__desc { margin: 0 0 0.75rem; color: var(--color-muted, #64748b); line-height: 1.55; } .resource-list__link { font-weight: 600; font-size: 0.9375rem; } .compare-table-wrap { overflow-x: auto; margin: 1.5rem 0 2rem; border-radius: var(--radius-md, 12px); border: 1px solid var(--color-border, #e2e8f0); } .compare-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9rem; } .compare-table th, .compare-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border-subtle, #e2e8f0); vertical-align: top; } .compare-table thead th { background: var(--color-surface-elevated, #f8fafc); font-weight: 600; } .compare-table tbody th[scope='row'] { font-weight: 600; color: var(--color-text, #0f172a); width: 28%; } body.site-public-page .compare-table th, body.site-public-page .compare-table td { border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.82); } body.site-public-page .compare-table thead th { background: rgba(255, 255, 255, 0.06); color: #fff; } body.site-public-page .compare-table tbody th[scope='row'] { color: rgba(255, 255, 255, 0.92); } .prose__note { font-size: 0.875rem; color: var(--color-muted, #64748b); margin-bottom: 1rem; } body.site-public-page .prose__note { color: rgba(255, 255, 255, 0.55); } .prose__cta { margin-top: 2rem; } /* Contact */ .contact-layout { display: grid; gap: 2rem; } @media (min-width: 900px) { .contact-layout { grid-template-columns: 1.2fr 0.85fr; align-items: start; } } .contact-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 1.5rem 1.35rem 1.75rem; border: 1px solid var(--color-border-subtle); box-shadow: 0 14px 40px var(--color-service-card-shadow); } .contact-aside { padding: 1.25rem; border-radius: var(--radius-md); background: var(--color-contact-aside-bg); border: 1px solid var(--color-contact-aside-border); } .contact-aside h2 { font-family: var(--font-display); font-size: 1.15rem; margin-top: 0; } .contact-aside p { color: var(--color-muted); } .form__row { margin-bottom: 1rem; } .form__label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; } .req { color: #dc2626; } .form__input { width: 100%; padding: 0.75rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font: inherit; background: var(--color-input-bg); color: var(--color-ink); } .form__input:focus { outline: 2px solid rgba(13, 148, 136, 0.45); outline-offset: 1px; } .form__textarea { min-height: 140px; resize: vertical; } .form__submit { width: 100%; margin-top: 0.5rem; } @media (min-width: 480px) { .form__submit { width: auto; } } /* Alerts */ .alert { padding: 0.85rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-size: 0.95rem; } .alert--success { background: var(--color-alert-ok-bg); border: 1px solid var(--color-alert-ok-border); color: var(--color-accent-deep); } .alert--error { background: var(--color-alert-err-bg); border: 1px solid var(--color-alert-err-border); color: var(--color-alert-err-text); } /* Map */ .map-page { display: flex; flex-direction: column; gap: 1.5rem; } .location-list { display: grid; gap: 1rem; } @media (min-width: 700px) { .location-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } } .location-card { background: var(--color-surface); padding: 1.1rem 1.2rem; border-radius: var(--radius-md); border: 1px solid rgba(15, 23, 42, 0.08); } .location-card__title { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 0.35rem; } .location-card__address { margin: 0; color: var(--color-muted); font-size: 0.95rem; line-height: 1.5; } .map-canvas { height: min(420px, 65vh); width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); z-index: 0; } [data-theme="midnight"] .leaflet-tile-pane, [data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.9) contrast(1.06); } [data-theme="midnight"] .leaflet-bar a, [data-theme="dark"] .leaflet-bar a { background: var(--color-surface); color: var(--color-ink); } [data-theme="midnight"] .leaflet-bar a:hover, [data-theme="dark"] .leaflet-bar a:hover { background: var(--color-nav-active-bg); } [data-theme="midnight"] .leaflet-bar, [data-theme="dark"] .leaflet-bar { border-color: var(--color-border); } .map-fallback { color: var(--color-muted); } .map-fallback code { font-size: 0.85em; } /* Footer */ .site-footer { background: var(--color-footer-bg); color: var(--color-footer-body); padding: 3rem 0 0; margin-top: 0; transition: background-color 0.2s ease; } .site-footer__grid { display: grid; gap: 2rem; } @media (min-width: 700px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } .site-footer__brand strong { font-family: var(--font-display); color: var(--color-footer-strong); font-size: 1.1rem; } .site-footer__heading { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-footer-heading); margin: 0 0 0.75rem; } .site-footer__links { list-style: none; padding: 0; margin: 0; } .site-footer__links li { margin-bottom: 0.4rem; } .site-footer a { color: var(--color-footer-link); text-decoration: none; } .site-footer a:hover { text-decoration: underline; } .site-footer__bottom { margin-top: 2.5rem; padding: 1.25rem 0; border-top: 1px solid rgba(148, 163, 184, 0.2); font-size: 0.85rem; color: var(--color-footer-muted); } .site-footer__bottom p { margin: 0; } /* Public dynamic forms (form.php) */ .dynamic-form-wrap { max-width: 40rem; margin: 0 auto; } .dynamic-form-wrap .dynamic-form-muted { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--color-muted); } /* Light form themes: subtle accent wash on the card so entry fields stand out vs. plain white. Midnight form theme keeps the global dark surface (no wash). */ .form-theme-teal .contact-card { border-top: 3px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)); } .form-theme-default .contact-card { border-top: 3px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)); } .form-theme-ocean .contact-card { border-top: 3px solid #0ea5e9; background: color-mix(in srgb, #0ea5e9 8%, var(--color-surface)); } .form-theme-sunset .contact-card { border-top: 3px solid #ea580c; background: color-mix(in srgb, #ea580c 8%, var(--color-surface)); } .form-theme-forest .contact-card { border-top: 3px solid #059669; background: color-mix(in srgb, #059669 7%, var(--color-surface)); } .form-theme-minimal .contact-card { box-shadow: none; border-style: solid; border-top: 3px solid var(--color-border); background: color-mix(in srgb, var(--color-muted) 10%, var(--color-surface)); } .form-theme-midnight .contact-card { border-top: 3px solid #818cf8; } /* Inputs stay solid white with a light edge so they read on the tinted card */ .dynamic-form-wrap:not(.form-theme-midnight) .dynamic-form-inner .form__input, .dynamic-form-wrap:not(.form-theme-midnight) .dynamic-form-inner textarea.form__input, .dynamic-form-wrap:not(.form-theme-midnight) .dynamic-form-inner select.form__input { background: #ffffff; border-color: var(--color-border); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07); } .dynamic-form-wrap:not(.form-theme-midnight) .dynamic-form-inner .form__input:focus { outline: 2px solid color-mix(in srgb, var(--color-accent) 50%, transparent); outline-offset: 1px; } .dynamic-form-wrap:not(.form-theme-midnight) .dynamic-form__matrix th[scope="row"], .dynamic-form-wrap:not(.form-theme-midnight) .dynamic-form__matrix-corner { background: #ffffff; } .dynamic-form-wrap:not(.form-theme-midnight) .dynamic-form__matrix th, .dynamic-form-wrap:not(.form-theme-midnight) .dynamic-form__matrix td { background: #ffffff; } .dynamic-form-inner .dynamic-form__heading { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; font-family: var(--font-display, inherit); } .dynamic-form-inner .dynamic-form__heading:first-child { margin-top: 0; } .dynamic-form-inner .dynamic-form__paragraph { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.55; color: var(--color-muted); } .dynamic-form-inner .dynamic-form__radios, .dynamic-form-inner .dynamic-form__checkboxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem 0.85rem; align-items: start; } .dynamic-form-inner .dynamic-form__radio-label, .dynamic-form-inner .dynamic-form__check-label { display: flex; align-items: flex-start; gap: 0.35rem; font-size: 0.95rem; line-height: 1.35; cursor: pointer; min-width: 0; } .dynamic-form-inner .dynamic-form__radio-label, .dynamic-form-inner .dynamic-form__check-label span { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 720px) { .dynamic-form-inner .dynamic-form__radios, .dynamic-form-inner .dynamic-form__checkboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .dynamic-form-inner .dynamic-form__radios, .dynamic-form-inner .dynamic-form__checkboxes { grid-template-columns: 1fr; } } .dynamic-form-inner .dynamic-form__actions { margin-top: 0.5rem; } .dynamic-form__page-break { border: none; border-top: 1px solid var(--color-border-subtle); margin: 1.5rem 0; } .dynamic-form__html-snippet { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.55; } .dynamic-form__signature-wrap { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: #fff; padding: 0.5rem; max-width: 100%; } .dynamic-form__signature-canvas { display: block; width: 100%; max-width: 400px; height: 120px; touch-action: none; -ms-touch-action: none; -webkit-user-select: none; user-select: none; cursor: crosshair; background: #fafafa; } .dynamic-form__signature-wrap--initials { display: inline-block; padding: 0.35rem; max-width: none; } .dynamic-form__signature-canvas--initials { width: 96px; max-width: 96px; height: 96px; border: 1px solid #64748b; background: #fff; } .dynamic-form__row--initials .form__label { margin-bottom: 0.25rem; } .dynamic-form__signature-clear { margin-top: 0.5rem; } .dynamic-form__matrix-wrap { overflow-x: auto; margin: 0.25rem 0 0.5rem; } .dynamic-form__matrix { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .dynamic-form__matrix th, .dynamic-form__matrix td { border: 1px solid var(--color-border-subtle); padding: 0.45rem 0.55rem; text-align: center; } .dynamic-form__matrix th[scope="row"] { text-align: left; font-weight: 600; background: var(--color-surface); } .dynamic-form__matrix-corner { background: var(--color-surface); } .dynamic-form__row--turnstile .cf-turnstile { margin-top: 0.35rem; } /* Admin form preview: no site chrome, form card only */ body.form-preview-standalone { margin: 0; min-height: 100vh; background: var(--color-bg); } .form-preview-standalone__main .section { padding-top: 1.5rem; padding-bottom: 2.5rem; } .form-preview-standalone__note { margin: 0 0 0.75rem; font-size: 0.9rem; } .form-preview-standalone__title { margin: 0 0 1rem; font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.6rem); font-weight: 700; line-height: 1.25; color: var(--color-ink); }