/* Active Business Core - Design tokens * * Operator-owned. Pending palette approval (Option A vs Option B per BUSINESS.md). * Mirrors `D:\Pool Pro Presence\ABC Website\website\src\styles.css`. * * All custom tokens are namespaced --abc-* to avoid collision with Tailwind / Basecoat. * We expose both Option A (warm/grounded) and Option B (clean/modern) palettes via * [data-palette="a"] and [data-palette="b"] selectors. Operator flips at runtime * by changing the data-palette attribute on . * * Until operator approves, the default is Option A. */ :root { /* Option A (warm / grounded) - default */ --abc-cream: #fff4dd; --abc-cream-deep: #f5ead1; --abc-butter: #ffd66e; --abc-teal: #0b6f90; --abc-teal-hover: #095c78; --abc-teal-active: #074a61; --abc-aqua: #67d5df; --abc-coral: #e6563f; --abc-coral-dark: #b93b2f; --abc-ink: #12243a; --abc-chrome: #d8e8ed; --abc-bg: #fff8e8; --abc-bg-alt: #f5ead1; --abc-surface: #fffcf4; --abc-surface-alt: #edf9fb; --abc-text: #12243a; --abc-text-secondary: #435060; --abc-text-muted: #69717b; --abc-border: #e3d4b5; --abc-border-light: #efe1c4; --abc-success: #2f9e66; /* Typography scale */ --abc-text-xs: 0.75rem; --abc-text-sm: 0.875rem; --abc-text-base: 1rem; --abc-text-lg: 1.125rem; --abc-text-xl: 1.25rem; --abc-text-2xl: 1.5rem; --abc-text-3xl: 1.875rem; --abc-text-4xl: 2.25rem; --abc-text-5xl: 3rem; /* Spacing */ --abc-pad: 1rem; --abc-pad-lg: 2rem; --abc-section: 4rem; /* Radius */ --abc-radius-sm: 4px; --abc-radius: 8px; --abc-radius-lg: 14px; --abc-radius-pill: 9999px; /* Font stack */ --abc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } [data-palette="b"] { /* Option B (clean / modern) - alternative */ --abc-cream: #ffffff; --abc-cream-deep: #fafbfc; --abc-butter: #f59e0b; --abc-teal: #4f46e5; --abc-teal-hover: #4338ca; --abc-teal-active: #3730a3; --abc-aqua: #06b6d4; --abc-coral: #f97316; --abc-coral-dark: #c2410c; --abc-ink: #0f172a; --abc-chrome: #e2e8f0; --abc-bg: #ffffff; --abc-bg-alt: #f8fafc; --abc-surface: #ffffff; --abc-surface-alt: #f1f5f9; --abc-text: #0f172a; --abc-text-secondary: #475569; --abc-text-muted: #64748b; --abc-border: #e2e8f0; --abc-border-light: #f1f5f9; --abc-success: #10b981; } /* Dark mode (works with both palettes) */ html.dark { --abc-bg: #07131d; --abc-bg-alt: #0d2230; --abc-surface: #132b3a; --abc-surface-alt: #173646; --abc-text: #f8f0df; --abc-text-secondary: #c9c1ad; --abc-text-muted: #9b9077; --abc-border: #1f4456; --abc-border-light: #173646; } html { font-family: var(--abc-font); line-height: 1.6; -webkit-font-smoothing: antialiased; background: var(--abc-bg); color: var(--abc-text); } body { margin: 0; } a { color: var(--abc-teal); text-decoration: none; } a:hover { color: var(--abc-teal-hover); } a:active { color: var(--abc-teal-active); } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--abc-pad) 0; font-weight: 700; color: var(--abc-text); line-height: 1.2; } h1 { font-size: var(--abc-text-5xl); } h2 { font-size: var(--abc-text-4xl); } h3 { font-size: var(--abc-text-3xl); } h4 { font-size: var(--abc-text-2xl); } h5 { font-size: var(--abc-text-xl); } h6 { font-size: var(--abc-text-lg); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.25rem; border-radius: var(--abc-radius); font-weight: 600; font-size: var(--abc-text-base); border: 1px solid transparent; cursor: pointer; transition: all 150ms ease; background: var(--abc-teal); color: #fff; text-decoration: none; } .btn:hover { background: var(--abc-teal-hover); color: #fff; } .btn:active { background: var(--abc-teal-active); } .btn-lg { padding: 0.875rem 1.5rem; font-size: var(--abc-text-lg); } .btn-outline { background: transparent; color: var(--abc-teal); border: 1px solid var(--abc-teal); } .btn-outline:hover { background: var(--abc-teal); color: #fff; } .btn-coral { background: var(--abc-coral); } .btn-coral:hover { background: var(--abc-coral-dark); } .main-cta { display: inline-flex; align-items: center; padding: 0.75rem 1.5rem; border-radius: var(--abc-radius); background: var(--abc-coral); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 6px 16px -8px var(--abc-coral); } .main-cta:hover { background: var(--abc-coral-dark); color: #fff; } /* Cards */ .card { background: var(--abc-surface); border: 1px solid var(--abc-border); border-radius: var(--abc-radius-lg); padding: var(--abc-pad-lg); } /* Sections */ .section-padding { padding: var(--abc-section) 0; } .section-alt { background: var(--abc-bg-alt); } .section-divider { border-top: 1px solid var(--abc-border); } .cta-section { background: var(--abc-surface-alt); padding: var(--abc-section) 0; text-align: center; } .page-hero { padding: calc(var(--abc-section) * 1.25) 0 var(--abc-section) 0; text-align: center; } .page-hero .kicker { text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--abc-text-sm); color: var(--abc-teal); font-weight: 700; } /* ICP choice cards (homepage router) */ .icp-choice { display: block; padding: var(--abc-pad-lg); background: var(--abc-surface); border: 1px solid var(--abc-border); border-radius: var(--abc-radius-lg); cursor: pointer; transition: all 200ms ease; text-decoration: none; color: var(--abc-text); } .icp-choice:hover { border-color: var(--abc-teal); transform: translateY(-2px); box-shadow: 0 12px 28px -16px var(--abc-teal); color: var(--abc-text); } /* Skip link */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--abc-teal); color: #fff; padding: var(--abc-pad); z-index: 1000; } .skip-link:focus { top: 0; } /* Scroll progress */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--abc-coral); z-index: 9999; transition: width 60ms linear; width: 0; } /* Theme + language switchers */ .nav-switch-group { display: inline-flex; gap: var(--abc-pad); align-items: center; } .theme-switcher, .language-pill { cursor: pointer; padding: 0.375rem 0.625rem; border-radius: var(--abc-radius-pill); background: transparent; border: 1px solid var(--abc-border); font-size: var(--abc-text-sm); color: var(--abc-text-secondary); } .theme-switcher:hover, .language-pill:hover { background: var(--abc-bg-alt); } /* Animations */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms ease, transform 600ms ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-stagger > * { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 500ms ease; } .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); } .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; } .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; } .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; } .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; } .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; } /* Container */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--abc-pad-lg); } @media (max-width: 768px) { .container { padding: 0 var(--abc-pad); } } /* Grid helpers */ .grid { display: grid; gap: var(--abc-pad-lg); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* Header / nav */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--abc-bg); border-bottom: 1px solid var(--abc-border); transition: box-shadow 200ms ease; } .site-header.scrolled { box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8px); background: rgba(255, 248, 232, 0.85); } .site-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--abc-pad) 0; } .site-nav .primary-nav { display: flex; gap: var(--abc-pad-lg); align-items: center; } @media (max-width: 768px) { .site-nav .primary-nav { display: none; } } /* Footer */ .site-footer { background: var(--abc-surface); border-top: 1px solid var(--abc-border); padding: calc(var(--abc-section) * 0.75) 0 calc(var(--abc-section) * 0.5); color: var(--abc-text-secondary); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--abc-pad-lg); margin-bottom: calc(var(--abc-section) * 0.5); } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer-col h4 { font-size: var(--abc-text-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--abc-text-muted); } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { padding: 0.25rem 0; } .footer-col a { color: var(--abc-text-secondary); } .footer-bottom { border-top: 1px solid var(--abc-border); padding-top: var(--abc-pad); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--abc-pad); font-size: var(--abc-text-sm); } /* Money-back badge */ .guarantee-badge { height: 60px; width: auto; } /* Print: hide nav/footer */ @media print { .site-header, .site-footer, .skip-link, .scroll-progress { display: none; } }