/* --------------------------------------------------------------------------- Block: Why Choose Us (ported verbatim from live #bolt-chooseus). Only edits: brand hexes swapped for base.css tokens where the literal matched exactly, plus the rules the
-> markup change requires (appended, and labelled as port-only, at the bottom of this file). --------------------------------------------------------------------------- */ /* ===== TOKENS / BASE (Pink section with blue accents) ===== */ #bolt-chooseus{ --pink:var(--mp-pink); --blue:var(--mp-blue); --text:var(--mp-ink); --muted:#ffd7e8; --outline:rgba(255,255,255,.22); --glassTop:rgba(255,255,255,.10); --glassBot:rgba(255,255,255,.05); --mx:50%; --my:50%; position:relative; isolation:isolate; overflow:hidden; color:var(--text); padding:90px 0; background: radial-gradient(130% 160% at 70% 0%, var(--pink) 0%, #a71d61 55%, #6b0f38 100%); } /* Background highlights */ #bolt-chooseus::before{ content:""; position:absolute; inset:0; background: radial-gradient(780px 780px at 22% 38%, rgba(255,255,255,.08), transparent 60%), radial-gradient(640px 640px at 80% 72%, rgba(255,255,255,.06), transparent 65%); mix-blend-mode:screen; opacity:.5; z-index:0; animation:bcuFloat 24s ease-in-out infinite alternate; } @keyframes bcuFloat{ 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(-4%,3%) scale(1.05);} 100%{transform:translate(4%,-3%) scale(1);} } #bolt-chooseus::after{ content:""; position:absolute; inset:-10% -40%; background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.09) 50%, transparent 65%); transform:skewX(-12deg); animation:bcuSheen 7s linear infinite; z-index:0; } @keyframes bcuSheen{ 0%{transform:translateX(-40%) skewX(-12deg);} 100%{transform:translateX(40%) skewX(-12deg);} } /* Mouse-follow glow */ #bolt-chooseus .bcu-mouse{ position:absolute; inset:0; pointer-events:none; z-index:1; background: radial-gradient(360px 360px at var(--mx) var(--my), rgba(255,255,255,.18) 0%, transparent 60%); filter: blur(50px); } /* Layout: left text + right cards */ #bolt-chooseus .bcu-inner{ position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:0 20px; display:grid; gap:40px; grid-template-columns:1fr; } @media(min-width:1024px){ #bolt-chooseus .bcu-inner{ grid-template-columns:5fr 6fr; align-items:center; } } /* Left copy */ #bolt-chooseus .bcu-left{ max-width:620px; } #bolt-chooseus .bcu-badge{ display:inline-flex; align-items:center; gap:.75rem; padding:6px 14px; margin:0 0 10px; border:1px solid var(--blue); border-radius:999px; background:linear-gradient(90deg, rgba(37,52,153,.15), rgba(208,36,121,.15)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(0,0,0,.28); color:var(--muted); font:12px/1 "Montserrat",sans-serif; letter-spacing:.14em; text-transform:uppercase; } #bolt-chooseus .bcu-badge i{ color:#ffd166; font-style:normal; font-size:13px; } #bolt-chooseus .bcu-title{ font-family:"DM Serif Display",serif; font-weight:400; color:#fff; font-size:42px; line-height:1.15; margin:10px 0 16px; } #bolt-chooseus .bcu-sub{ font-family:"Montserrat",sans-serif; font-size:16px; line-height:1.8; margin-bottom:30px; } /* CTA */ #bolt-chooseus .bcu-cta{ display:inline-block; background:linear-gradient(90deg, var(--blue), var(--pink)); color:#fff; text-decoration:none; font-family:"Montserrat",sans-serif; font-weight:600; padding:12px 30px; border-radius:10px; box-shadow:0 8px 18px rgba(208,36,121,.35); transition:transform .22s ease, box-shadow .28s ease, filter .2s ease; } #bolt-chooseus .bcu-cta:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(37,52,153,.45); filter:brightness(1.05); } /* Right cards grid */ #bolt-chooseus .bcu-grid{ display:grid !important; grid-template-columns:repeat(2, minmax(240px,1fr)) !important; gap:22px !important; } @media(max-width:720px){ #bolt-chooseus .bcu-grid{ grid-template-columns:1fr !important; } } /* Card design */ #bolt-chooseus .bcu-card{ border:1px solid var(--outline); border-radius:14px; background:linear-gradient(180deg, var(--glassTop), var(--glassBot)); box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 10px 25px rgba(0,0,0,.3); backdrop-filter:blur(8px); padding:22px 20px; opacity:0; transform:translateY(40px); transition:all .65s cubic-bezier(.16,.84,.44,1); } #bolt-chooseus .bcu-card.in-view{ opacity:1; transform:translateY(0); } /* Hover */ #bolt-chooseus .bcu-card:hover{ transform:translateY(-6px); border-color: rgba(255,255,255,.35); box-shadow: 0 18px 45px rgba(255,255,255,.35), 0 2px 0 rgba(255,255,255,.18) inset; background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07)); } #bolt-chooseus .bcu-card h3{ font-family:"DM Serif Display",serif; font-size:22px; margin:0 0 8px; color:#fff; } #bolt-chooseus .bcu-card p{ font-family:"Montserrat",sans-serif; font-size:15px; margin:0; color:#fff; } /* Last card spans full width */ #bolt-chooseus .bcu-span-all{ grid-column:1 / -1; } @media (prefers-reduced-motion: reduce){ #bolt-chooseus::before, #bolt-chooseus::after{ animation:none; } #bolt-chooseus .bcu-mouse{ display:none; } } /* ========================================================================== Port-only additions -- NOT in the source stylesheet. The source cards were
, which is not keyboard-operable and carries an inline handler. Contract rule 8 makes them real . base.css underlines every hovered/focused anchor, so the rules below restore the source's appearance. Nothing else was changed. ========================================================================== */ #bolt-chooseus .bcu-card{ color:inherit; text-decoration:none; } #bolt-chooseus .bcu-card:hover, #bolt-chooseus .bcu-card:focus-visible{ text-decoration:none; } #bolt-chooseus .bcu-cta:hover, #bolt-chooseus .bcu-cta:focus-visible{ text-decoration:none; }