/* Feature highlight chips (header) */ .feature-row { display:flex; flex-wrap:wrap; justify-content:center; gap:.65rem; margin-top:1.15rem; } .feature-chip { position:relative; font-family:'Archivo',system-ui,sans-serif; font-weight:800; letter-spacing:.18em; padding:.55rem .9rem .5rem; line-height:1; color:transparent; -webkit-text-stroke:1.6px #fff; text-shadow:0 3px 6px rgba(0,0,0,.45); display:inline-block; font-size:1.05rem; transform:skew(-7deg) rotate(-1.5deg); } @media (min-width:640px){ .feature-chip{ font-size:1.15rem; } } @media (min-width:768px){ .feature-chip{ font-size:1.17rem; } } .chip-prompt{ --accent:rgba(99,102,241,.55); } .chip-daily{ --accent:rgba(250,204,21,.55); } .chip-free{ --accent:rgba(16,185,129,.55); } .feature-chip::before{ content:''; position:absolute; inset:0; border-radius:10px; background:radial-gradient(circle at 35% 40%, var(--accent), transparent 70%); opacity:.55; filter:blur(14px); z:-1; } .chip-daily::after{ content:'\f0e7'; /* bolt */ font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; left:50%; top:49%; transform:translate(-50%,-50%) rotate(9deg) scale(1.1); color:#facc15; opacity:.25; font-size:2.5rem; pointer-events:none; filter:drop-shadow(0 0 4px rgba(250,204,21,.6)) drop-shadow(0 4px 12px rgba(0,0,0,.4)); } .chip-free::after{ content:''; position:absolute; inset:0; border-radius:10px; background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(16,185,129,0) 55%); mix-blend-mode:screen; } .chip-prompt::after{ content:'' ; position:absolute; left:50%; top:50%; transform:translate(-50%,-52%) rotate(5deg); font-size:1.35rem; font-weight:700; color:#6366f1; opacity:.35; letter-spacing:0; pointer-events:none; } /* FREE: add subtle shimmer and a small round "100%" seal */ .chip-free{ isolation:isolate; } .chip-free::after{ background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 65%), linear-gradient(135deg,rgba(16,185,129,.18),rgba(16,185,129,0) 55%); background-size: 220% 100%, auto; background-position: -120% 0, 0 0; animation: sheen 4.5s ease-in-out infinite; opacity:.9; mix-blend-mode: screen; } @keyframes sheen { 0%{ background-position: -120% 0, 0 0; } 55%{ background-position: 140% 0, 0 0; } 100%{ background-position: 140% 0, 0 0; } } .chip-free .seal{ position:absolute; right:-10px; top:-9px; width:30px; height:30px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:.58rem; font-weight:900; letter-spacing:.02em; color:#06281f; background: radial-gradient(circle at 30% 30%, #34d399, #10b981 55%, #0ea5a3 100%); box-shadow: 0 4px 14px rgba(0,0,0,.3), inset 0 -2px 6px rgba(0,0,0,.25); transform: rotate(-8deg); border: 2px solid rgba(255,255,255,.8); } .chip-free .seal::after{ content:''; position:absolute; inset:-3px; border-radius:inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 10px 16px rgba(255,255,255,.18); pointer-events:none; } @media (min-width:768px){ .chip-free .seal{ right:-12px; top:-10px; } } @media (prefers-reduced-motion:reduce){ .chip-free::after{ animation:none; } } @keyframes chipGlow { 0%{ filter:blur(14px) brightness(1); } 50%{ filter:blur(16px) brightness(1.08); } 100%{ filter:blur(14px) brightness(1); } } .feature-chip::before{ animation:chipGlow 6.5s ease-in-out infinite; } @media (prefers-reduced-motion:reduce){ .feature-chip::before, .chip-daily::after{ animation:none; } } @supports not (-webkit-text-stroke:1.6px #fff){ .feature-chip{ color:#fff; } }