/** * BAYA DESIGN SYSTEM - site-wide shared layer. * Approved trial on index.html rolled out to all customer-facing pages. * Load LAST in (after site-global.css and any per-page styles). * Key overrides use !important so they win over per-page inline rules. * Delete this file to revert the whole rollout. */ :root{ --ds-primary:#1D4ED8; --ds-primary-hover:#1E40AF; --ds-primary-active:#1E3A8A; --ds-primary-soft:#EFF6FF; --ds-teal:#0D9488; --ds-teal-soft:#F0FDFA; --ds-purple:#7C3AED; --ds-purple-soft:#F5F3FF; --ds-bg:#F8F7F4; --ds-surface:#FFFFFF; --ds-border:#E5E7EB; --ds-border-strong:#D1D5DB; --ds-heading:#0F172A; --ds-body:#334155; --ds-muted:#64748B; --ds-placeholder:#94A3B8; --ds-success:#059669; --ds-warning:#D97706; --ds-error:#DC2626; --ds-info:#0284C7; --ds-shadow-sm:0 1px 2px rgba(15,23,42,.05); --ds-shadow-md:0 4px 12px rgba(15,23,42,.06); --ds-shadow-lg:0 12px 32px rgba(15,23,42,.08); } body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important; background:var(--ds-bg)!important; color:var(--ds-body)!important; --bg-base:var(--ds-bg); --accent-primary:var(--ds-primary); } /* Headings: Inter + heading color. span.font-serif wordmarks keep Playfair (untouched). NOTE: color is NOT forced with !important here so explicit text color utilities (e.g. text-white over images/dark surfaces) win. Default still applies to headings that don't set their own text color. */ h1,h2,h3,h4,h5,h6{font-family:'Inter',sans-serif;color:var(--ds-heading)} h1.font-serif,h2.font-serif,h3.font-serif,h4.font-serif,h5.font-serif,h6.font-serif{ font-family:'Inter',sans-serif!important; } /* ── Type scale utilities (desktop) ── */ .ds-display{font-size:56px!important;font-weight:700!important;line-height:1.1!important;letter-spacing:-.02em!important} .ds-h1{font-size:40px!important;font-weight:700!important;line-height:1.2!important;letter-spacing:-.01em!important} .ds-h2{font-size:28px!important;font-weight:600!important;line-height:1.25!important} .ds-h3{font-size:20px!important;font-weight:600!important;line-height:1.4!important} .ds-body-lg{font-size:18px!important;line-height:1.6!important;font-weight:400!important} .ds-body{font-size:16px!important;line-height:1.6!important;font-weight:400!important} .ds-body-md{font-size:16px!important;line-height:1.5!important;font-weight:500!important} .ds-small{font-size:14px!important;line-height:1.5!important} .ds-caption{font-size:13px!important;line-height:1.45!important;font-weight:500!important;letter-spacing:.01em!important} .ds-micro{font-size:12px!important;line-height:1.4!important;font-weight:500!important;letter-spacing:.02em!important} @media(max-width:768px){ .ds-display{font-size:36px!important} .ds-h1{font-size:28px!important} .ds-h2{font-size:22px!important} .ds-h3{font-size:18px!important} .ds-body-lg{font-size:16px!important} .ds-body{font-size:15px!important} } /* ── Global buttons ── */ .btn-purple,.btn-primary,.btn-cinematic,.btn-pay,.btn-wa{ background:var(--ds-primary)!important;color:#fff!important;border:none!important; border-radius:9999px!important;height:48px!important;padding:0 24px!important; font-family:'Inter',sans-serif!important;font-size:16px!important;font-weight:500!important; display:inline-flex;align-items:center;justify-content:center;gap:8px; box-shadow:var(--ds-shadow-sm)!important; } .btn-purple:hover,.btn-primary:hover,.btn-cinematic:hover,.btn-pay:hover,.btn-wa:hover{ background:var(--ds-primary-hover)!important;box-shadow:var(--ds-shadow-md)!important;transform:translateY(-1px)!important; } .btn-purple:active,.btn-primary:active,.btn-cinematic:active,.btn-pay:active,.btn-wa:active{ background:var(--ds-primary-active)!important;transform:none!important; } .btn-purple:disabled,.btn-primary:disabled,.btn-cinematic:disabled,.btn-pay:disabled,.btn-wa:disabled{ background:var(--ds-primary)!important;opacity:.5!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important; } /* Cinematic buttons: keep loading/spinner state, recolor sheen to white */ .btn-cinematic.loading,.btn-cinematic:disabled{color:transparent!important;box-shadow:none!important} .btn-cinematic::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)!important} /* Secondary / outline buttons */ .btn-offer,.btn-secondary{ background:#fff!important;color:var(--ds-primary)!important;border:1.5px solid var(--ds-primary)!important; border-radius:9999px!important;height:48px!important;padding:0 24px!important; font-family:'Inter',sans-serif!important;font-size:16px!important;font-weight:500!important; display:inline-flex;align-items:center;justify-content:center;gap:8px; box-shadow:none!important;transition:background .2s,color .2s,border-color .2s; } .btn-offer:hover,.btn-secondary:hover{background:var(--ds-primary-soft)!important;color:var(--ds-primary)!important;border-color:var(--ds-primary)!important;transform:none!important} .btn-offer:disabled,.btn-secondary:disabled{opacity:.5!important;cursor:not-allowed!important;transform:none!important;background:#fff!important;color:var(--ds-primary)!important;border-color:var(--ds-primary)!important} /* Danger buttons → error token */ .btn-danger{ background:var(--ds-error)!important;color:#fff!important;border:none!important; border-radius:9999px!important;height:48px!important;padding:0 24px!important; font-family:'Inter',sans-serif!important;font-size:16px!important;font-weight:500!important; display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:none!important; } .btn-danger:hover{background:#b91c1c!important;box-shadow:var(--ds-shadow-md)!important} /* ── Badge / pill ── */ .ds-badge{ display:inline-flex;align-items:center;gap:6px;background:var(--ds-teal-soft)!important;color:var(--ds-teal)!important; border-radius:9999px!important;padding:6px 14px!important;font-size:13px!important;font-weight:500!important; letter-spacing:.01em!important;line-height:1!important; } /* ── Inputs ── */ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"]), select,textarea{ font-family:'Inter',sans-serif!important;font-size:16px!important;color:var(--ds-body)!important; background:#fff!important;border:1.5px solid var(--ds-border)!important;border-radius:12px!important; padding:12px 14px!important;min-height:48px!important; } input:focus,select:focus,textarea:focus{ border-color:var(--ds-primary)!important; outline:3px solid #BFDBFE!important;outline-offset:0!important; } ::placeholder{color:var(--ds-placeholder)!important} /* ── Cards ── */ .ds-card{ background:var(--ds-surface)!important;border:1px solid var(--ds-border)!important; border-radius:16px!important;padding:24px!important;box-shadow:var(--ds-shadow-sm)!important; } /* ── Focus visibility (a11y) ── */ a:focus-visible,button:focus-visible{ outline:3px solid #BFDBFE!important;outline-offset:2px!important; } /* ── Mobile ≤430px: full-width primary/secondary actions ── */ @media(max-width:430px){ .btn-purple,.btn-primary,.btn-cinematic,.btn-pay,.btn-wa,.btn-offer,.btn-secondary{height:52px!important} }