Overrides use attribute-substring selectors ([style*=…], [class*=…]) so they beat both the inline `var(--ink-75)` colours on the ERP pages and the Tailwind arbitrary classes (text-[#86868b]) on the feature pages, without either page having to be edited. ───────────────────────────────────────────────────────────── */ /* ── accent presets: --a1 mid, --a2 light, --a3 deep ─────────── */ body[data-accent] { --a1:#4f46e5; --a2:#818cf8; --a3:#1e1b4b; } body[data-accent="indigo"] { --a1:#4f46e5; --a2:#818cf8; --a3:#1e1b4b; } body[data-accent="violet"] { --a1:#7c3aed; --a2:#a78bfa; --a3:#2e1065; } body[data-accent="fuchsia"] { --a1:#c026d3; --a2:#e879f9; --a3:#4a044e; } body[data-accent="rose"] { --a1:#e11d48; --a2:#fb7185; --a3:#4c0519; } body[data-accent="orange"] { --a1:#ea580c; --a2:#fb923c; --a3:#431407; } body[data-accent="amber"] { --a1:#d97706; --a2:#fbbf24; --a3:#451a03; } body[data-accent="lime"] { --a1:#65a30d; --a2:#a3e635; --a3:#1a2e05; } body[data-accent="emerald"] { --a1:#059669; --a2:#34d399; --a3:#022c22; } body[data-accent="teal"] { --a1:#0d9488; --a2:#2dd4bf; --a3:#042f2e; } body[data-accent="cyan"] { --a1:#0891b2; --a2:#22d3ee; --a3:#083344; } body[data-accent="sky"] { --a1:#0284c7; --a2:#38bdf8; --a3:#082f49; } body[data-accent="blue"] { --a1:#2563eb; --a2:#60a5fa; --a3:#172554; } body[data-accent="purple"] { --a1:#9333ea; --a2:#c084fc; --a3:#3b0764; } body[data-accent="slate"] { --a1:#475569; --a2:#94a3b8; --a3:#020617; } body[data-accent="navy"] { --a1:#1b3a86; --a2:#60a5fa; --a3:#0b1a3f; } /* ── the hero ────────────────────────────────────────────────── */ .hero-vivid{ position:relative; overflow:hidden; /* Solid fallback FIRST and separate from the gradient: if color-mix() is unsupported the gradient declaration is dropped, and without this the hero would render transparent with white text on white. */ background-color:var(--a3); background-image: linear-gradient(152deg, var(--a3) 0%, var(--a1) 62%, var(--a3) 100%); } @supports (background: color-mix(in srgb, red 50%, transparent)){ .hero-vivid{ background-image: radial-gradient(900px 520px at 10% -10%, color-mix(in srgb, var(--a2) 55%, transparent), transparent 62%), radial-gradient(760px 480px at 92% 4%, color-mix(in srgb, var(--a1) 60%, transparent), transparent 64%), radial-gradient(680px 430px at 60% 108%, rgba(242,193,78,.24), transparent 62%), linear-gradient(152deg, var(--a3) 0%, var(--a1) 62%, color-mix(in srgb, var(--a1) 55%, #000) 100%); } } /* dotted texture, faded at the edges */ .hero-vivid::before{ content:''; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size:20px 20px; mask-image:radial-gradient(ellipse 78% 70% at 50% 26%, #000 22%, transparent 76%); -webkit-mask-image:radial-gradient(ellipse 78% 70% at 50% 26%, #000 22%, transparent 76%); } .hero-vivid > *{ position:relative; z-index:1; } /* text inside the hero — beats inline vars AND tailwind arbitrary classes */ /* Headings must beat the [class*="text-["] rule below, which the ERP pages' h1 also matches via its text-[clamp(...)] size class. Without the attribute-qualified selectors here that rule wins on specificity and headings render at 84% white — visible as low contrast on the lighter end of the gradient. */ .hero-vivid h1, .hero-vivid h2, .hero-vivid strong, .hero-vivid h1[class], .hero-vivid h2[class], .hero-vivid h1[class*="text-["], .hero-vivid h2[class*="text-["] { color:#fff !important; } .hero-vivid p, .hero-vivid li, .hero-vivid span, .hero-vivid [class*="text-["], .hero-vivid [style*="--ink"] { color:rgba(255,255,255,.84) !important; } .hero-vivid a { color:#fff !important; } .hero-vivid .eyebrow, .hero-vivid [style*="--brass"] { color:#ffd77a !important; } .hero-vivid .serif-em, .hero-vivid em { color:#ffd77a !important; } .hero-vivid .hairline { background:rgba(255,255,255,.55) !important; } /* buttons need inverting on a dark field */ .hero-vivid .btn-primary{ background:#fff !important; color:var(--a3) !important; border-color:#fff !important; box-shadow:0 12px 30px -12px rgba(0,0,0,.5); } .hero-vivid .btn-primary:hover{ background:transparent !important; color:#fff !important; } .hero-vivid .btn-secondary{ color:#fff !important; border-bottom-color:rgba(255,255,255,.65) !important; } .hero-vivid .btn-secondary:hover{ color:#ffd77a !important; border-bottom-color:#ffd77a !important; } /* pill CTAs used on the feature pages */ .hero-vivid a[class*="rounded-full"][class*="bg-"]{ background:#fff !important; color:var(--a3) !important; border-color:#fff !important; } /* Anything that carries its OWN light background inside the hero — the little "Features" / "HR Calculators" pill badges — must keep dark text, or the generic white-text rules above render it white-on-white and invisible. The :not() excludes hover-only utilities (hover:bg-white, hover:bg-gray-50), which have no background at rest and must stay white. */ .hero-vivid [class*="bg-white"]:not([class*="hover:bg-white"]), .hero-vivid [class*="bg-white"]:not([class*="hover:bg-white"]) *, .hero-vivid [class*="bg-gray-50"]:not([class*="hover:bg-gray-50"]), .hero-vivid [class*="bg-gray-50"]:not([class*="hover:bg-gray-50"]) *{ color:var(--a3) !important; } /* ── accent carried through the body of the page ─────────────── */ body[data-accent] .eyebrow { color:var(--a1); } body[data-accent] .serif-em, body[data-accent] .serif em { color:var(--a1); } body[data-accent] .chapter-num { color:var(--a1); } body[data-accent] .rail-dot.active { background:var(--a1); border-color:var(--a1); } body[data-accent] .ink-mark::after { background:color-mix(in srgb, var(--a1) 22%, transparent); } body[data-accent] .btn-secondary:hover{ color:var(--a1); border-color:var(--a1); } /* a tinted band so mid-page sections aren't all white */ body[data-accent] .section-sand, body[data-accent] .section-ivory{ background:linear-gradient(180deg, color-mix(in srgb, var(--a1) 6%, #fff) 0%, color-mix(in srgb, var(--a2) 9%, #fff) 100%) !important; } /* accent chip, for anything that wants one */ .accent-chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:600; background:color-mix(in srgb, var(--a1) 12%, transparent); color:var(--a1); } /* framed product screenshot, matching the homepage */ .shot{ border-radius:14px; overflow:hidden; background:#fff; border:1px solid rgba(15,23,42,.10); box-shadow:0 30px 70px -22px rgba(8,15,40,.42); } .shot-bar{ display:flex; align-items:center; gap:6px; padding:9px 13px; background:#f1f5f9; border-bottom:1px solid rgba(15,23,42,.08); } .shot-bar i{ width:10px; height:10px; border-radius:50%; display:block; font-style:normal; } .shot img{ display:block; width:100%; height:auto; } @media (prefers-reduced-motion: reduce){ .hero-vivid::before{ display:none; } }