/* Prime South — brand additions to Tailwind. */ :root { --primary: #15324f; /* deep navy (matches home) */ --primary-700: #0d2033; /* navy-deep — nav/footer */ --secondary: #FAF9F6; /* warm paper */ --accent: #E9722E; /* gulf-coast orange */ --accent-700: #d4621f; --ink: #222a31; --muted: #5a6675; } html { scroll-behavior: smooth; } body { background-color: var(--secondary); color: var(--ink); font-family: 'Hanken Grotesque', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .serif { font-family: 'Bricolage Grotesque', 'Hanken Grotesque', system-ui, sans-serif; letter-spacing: -0.02em; font-weight: 800; color: var(--primary); } /* The h1/h2 element selector (color:var(--primary)) overrides CSS inheritance, so headings inside dark-hero sections must be explicitly set to cream. Without this, customer names appear navy-on-navy and are unreadable. */ .cc-hero h1, .cc-hero h2, .st-hero h1, .st-hero h2, .viz-hero h1, .viz-hero h2 { color: var(--secondary); } a { transition: color .15s ease, opacity .15s ease; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: .85rem 1.5rem; border-radius: .5rem; font-weight: 600; font-size: 1rem; line-height: 1; transition: transform .1s ease, background-color .15s ease, box-shadow .15s ease; border: 2px solid transparent; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary); color: var(--secondary); } .btn-primary:hover { background: var(--primary-700); } .btn-accent { background: var(--accent); color: white; } .btn-accent:hover { background: var(--accent-700); } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--secondary); } .bg-primary { background-color: var(--primary); } .bg-cream { background-color: var(--secondary); } .bg-accent { background-color: var(--accent); } .text-primary{ color: var(--primary); } .text-accent { color: var(--accent); } .text-cream { color: var(--secondary); } .section { padding: 4rem 1.25rem; } @media (min-width: 768px) { .section { padding: 6rem 2rem; } } .container-tight { max-width: 1100px; margin: 0 auto; } .card { background: white; border: 1px solid #e8e3d2; border-radius: .75rem; padding: 1.75rem; box-shadow: 0 1px 2px rgba(27,39,71,.04); } .divider { height: 1px; background: linear-gradient(to right, transparent, #d6cfb8, transparent); } /* Visible keyboard-focus ring for the custom photo upload widgets. The real file is visually hidden (sr-only) but stays in the tab order, so surface focus on the clickable container instead. */ .photo-dropzone:focus-within, .photo-slot:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } /* Subtle paint-stroke flourish behind hero headlines. */ .brush-underline { background-image: linear-gradient(120deg, rgba(233,114,46,.35), rgba(233,114,46,.35)); background-repeat: no-repeat; background-size: 100% .35em; background-position: 0 88%; } /* ============================================================ Dark funnel pages — Visualizer, Health Check, Color Consultant. Each tool page sets ; the navy header and footer already match, so the whole page reads as one dark canvas. ============================================================ */ .funnel { background-color: var(--primary-700); color: #e7eef6; } .funnel .funnel-hero { background: radial-gradient(1100px 520px at 50% -10%, rgba(233,114,46,.18), transparent 62%), linear-gradient(180deg, #0e243b 0%, var(--primary-700) 58%, #0b1c2e 100%); } .funnel h1, .funnel h2, .funnel h3 { color: #fff; } .funnel .eyebrow { color: var(--accent); letter-spacing: .14em; text-transform: uppercase; font-weight: 800; font-size: 12px; } .funnel-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(233,114,46,.14); border: 1px solid rgba(233,114,46,.38); color: #f7b48a; font-weight: 700; font-size: 13px; padding: .42rem .9rem; border-radius: 999px; } .funnel-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,.45); } .funnel-label { display: block; font-size: .875rem; font-weight: 600; color: #cfe0f0; margin-bottom: .35rem; } .funnel-field { width: 100%; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; padding: .65rem .85rem; font: inherit; transition: border-color .15s ease, background .15s ease; } .funnel-field::placeholder { color: rgba(231,238,246,.45); } .funnel-field:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.09); } /* Native dropdown options render on white in most browsers — keep readable. */ .funnel-field option { color: #0d2033; } .funnel-note { color: rgba(231,238,246,.6); } /* Reuse the existing photo widgets but recolor them for the dark canvas. */ .funnel .photo-dropzone { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.03); } .funnel .photo-dropzone.is-dragover { border-color: var(--accent); background: rgba(255,255,255,.06); } .funnel .photo-slot { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.03); color: rgba(231,238,246,.6); } .funnel .photo-slot.has-file, .funnel .photo-slot.is-dragover { border-color: var(--accent); background: rgba(255,255,255,.06); }