/** Shopify CDN: Minification failed Line 109:5 Unexpected "=" **/ :root{ --as-pink-600: #db2777; --as-rose-500: #f43f5e; --as-gradient-pink: linear-gradient( 90deg, var(--as-pink-600), var(--as-rose-500), var(--as-pink-600) ); --as-radius: 10px; --as-shadow: 0 10px 30px -12px rgba(219,39,119,.45); } /* Strip */ .as-sale-strip{ background: var(--as-gradient-pink); color: #fff; padding: 10px 16px; } /* Container */ .as-sale-container{ max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 14px; } /* Desktop */ @media (min-width: 640px){ .as-sale-container{ flex-direction: row; gap: 24px; } } /* Left */ .as-sale-title{ display: flex; align-items: center; gap: 8px; } .as-sale-heading{ font-weight: 700; letter-spacing: .3px; } /* Right */ .as-sale-offer{ display: flex; align-items: center; gap: 16px; } /* Timer Box */ .as-sale-timer{ display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.2); padding: 4px 8px; border-radius: 6px; } /* Text */ .as-sale-text{ white-space: nowrap; } .as-sale-time{ font-family: monospace; font-weight: 700; } /* Icons */ .as-icon{ width: 14px; height: 14px; } /* Heart Pulse */ .as-icon-heart{ animation: as-pulse 1.4s infinite; } /* Animation */ @keyframes as-pulse{ 0%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.15); opacity: .85; } 100%{ transform: scale(1); opacity: 1; } } /* ========= Theme tokens (Pink/Purple major) ========= */ :root{ --as-rq-bg: 0 0% 100%; --as-rq-fg: 222 15% 15%; --as-rq-muted: 222 10% 45%; --as-rq-border: 330 20% 88%; --as-rq-pink-50: #fdf2f8; --as-rq-rose-50-50: rgba(255, 241, 242, .5); --as-rq-purple-50: #faf5ff; --as-rq-pink-600: #db2777; --as-rq-pink-700: #be185d; --as-rq-rose-500: #f43f5e; --as-rq-green-500: #22c55e; --as-rq-star: #f9a8d4; /* close to "pink-400" feel */ --as-rq-radius-lg: 14px; --as-rq-radius-md: 10px; --as-rq-shadow-soft: 0 10px 30px -14px rgba(219, 39, 119, .30); --as-rq-ease: cubic-bezier(.2,.8,.2,1); --as-rq-dur: 220ms; } /* Optional dark mode toggle via attribute: */ html[data-as-theme="dark"]{ --as-rq-bg: 222 20% 10%; --as-rq-fg: 0 0% 100%; --as-rq-muted: 222 10% 72%; --as-rq-border: 330 20% 22%; } /* ========= Base ========= */ .as-rq-hero{ background: linear-gradient( to bottom right, var(--as-rq-pink-50), var(--as-rq-rose-50-50), var(--as-rq-purple-50) ); border-bottom: 1px solid hsl(var(--as-rq-border)); } /* dark gradient equivalents from your classes */ html[data-as-theme="dark"] .as-rq-hero{ background: linear-gradient( to bottom right, rgba(131,24,67,.20), rgba(88,13,28,.10), rgba(88,28,135,.20) ); border-bottom-color: hsl(var(--as-rq-border)); } .as-rq-hero__container{ max-width: 1200px; margin: 0 auto; padding: 32px 16px; } @media (min-width: 768px){ .as-rq-hero__container{ padding: 48px 16px; } } .as-rq-hero__inner{ max-width: 1024px; margin: 0 auto; } /* space-y-6 */ .as-rq-hero__inner > * + *{ margin-top: 24px; } /* ========= Badges ========= */ .as-rq-badges{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .as-rq-badge{ display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; border: 1px solid transparent; line-height: 1; transition: transform var(--as-rq-dur) var(--as-rq-ease); } .as-rq-badge:focus{ outline: none; } .as-rq-badge--solid-pink{ background: var(--as-rq-pink-600); color: #fff; } .as-rq-badge--outline-pink{ background: transparent; border-color: rgba(219,39,119,.55); color: #a30a4f; } html[data-as-theme="dark"] .as-rq-badge--outline-pink{ color: #f9a8d4; } .as-rq-badge--solid-green{ background: var(--as-rq-green-500); color: #fff; } .as-rq-badge--solid-rose{ background: var(--as-rq-rose-500); color: #fff; } /* ========= Copy ========= */ .as-rq-title{ margin: 0 0 12px 0; font-weight: 800; letter-spacing: -.3px; color: hsl(var(--as-rq-fg)); font-size: 30px; /* ~text-3xl */ } @media (min-width: 768px){ .as-rq-title{ font-size: 36px; } } /* ~md:text-4xl */ @media (min-width: 1024px){ .as-rq-title{ font-size: 48px; } } /* ~lg:text-5xl */ .as-rq-title__hi{ color: var(--as-rq-pink-600); font-weight: 800; } .as-rq-desc{ margin: 0; max-width: 768px; font-size: 18px; /* text-lg */ color: hsl(var(--as-rq-muted)); } /* ========= Benefits grid ========= */ .as-rq-benefits{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } @media (min-width: 768px){ .as-rq-benefits{ grid-template-columns: repeat(4, minmax(0,1fr)); } } .as-rq-benefit{ display: flex; align-items: center; gap: 8px; background: rgba(219,39,119,.10); border: 1px solid rgba(219,39,119,.20); border-radius: var(--as-rq-radius-md); padding: 10px 12px; border-radius:8px; } .as-rq-benefit__text{ font-size: 14px; font-weight: 600; color: hsl(var(--as-rq-fg)); } /* ========= Callout ========= */ .as-rq-callout{ display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: rgba(219,39,119,.10); border: 1px solid rgba(219,39,119,.30); border-radius: var(--as-rq-radius-lg); box-shadow: var(--as-rq-shadow-soft); border-radius:12px; } .as-rq-callout__ico{ margin-top: 2px; } .as-rq-callout__title{ margin: 0 0 4px 0; font-size: 14px; font-weight: 800; color: #a30a4f; } html[data-as-theme="dark"] .as-rq-callout__title{ color: #f9a8d4; } .as-rq-callout__text{ margin: 0; font-size: 14px; color: hsl(var(--as-rq-muted)); } /* ========= Proof bar ========= */ .as-rq-proof{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(219,39,119,.25); border-bottom: 1px solid rgba(219,39,119,.25); } .as-rq-proof__left{ display: flex; flex-wrap: wrap; align-items: center; gap: 24px; } .as-rq-avatars{ display: flex; align-items: center; gap: 0; } .as-rq-avatar{ width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(to bottom right, #ec4899, #e11d48); border: 2px solid hsl(var(--as-rq-bg)); margin-left: -8px; } .as-rq-avatar:first-child{ margin-left: 0; } .as-rq-proof__text{ font-size: 14px; color: hsl(var(--as-rq-muted)); white-space: nowrap; } .as-rq-proof__count{ font-weight: 900; color: hsl(var(--as-rq-fg)); } .as-rq-rating{ display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .as-rq-star{ width: 16px; height: 16px; color: var(--as-rq-star); } .as-rq-rating__score{ margin-left: 6px; font-size: 14px; font-weight: 700; color: hsl(var(--as-rq-fg)); } .as-rq-rating__meta{ font-size: 14px; color: hsl(var(--as-rq-muted)); } .as-rq-proof__right{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(219,39,119,.10); color: var(--as-rq-pink-600); border: 1px solid rgba(219,39,119,.18); } .as-rq-proof__live{ font-weight: 700; font-size: 14px; } /* ========= Bottom row ========= */ .as-rq-bottom{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .as-rq-price__label{ margin: 0; font-size: 14px; color: hsl(var(--as-rq-muted)); } .as-rq-price__row{ display: flex; align-items: baseline; gap: 10px; margin-top: 4px; flex-wrap: wrap; } .as-rq-price__now{ font-size: 30px; font-weight: 900; color: var(--as-rq-pink-600); } .as-rq-price__was{ font-size: 18px; color: hsl(var(--as-rq-muted)); text-decoration: line-through; } .as-rq-price__note{ margin: 6px 0 0 0; font-size: 12px; color: hsl(var(--as-rq-muted)); } /* ========= Buttons ========= */ .as-rq-ctas{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .as-rq-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; height: 40px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; user-select: none; transition: transform var(--as-rq-dur) var(--as-rq-ease), background var(--as-rq-dur) var(--as-rq-ease), box-shadow var(--as-rq-dur) var(--as-rq-ease), border-color var(--as-rq-dur) var(--as-rq-ease); } .as-rq-btn:active{ transform: translateY(1px) scale(.99); } .as-rq-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(244,63,94,.25); } .as-rq-btn--ghost{ background: hsl(var(--as-rq-bg)); color: hsl(var(--as-rq-fg)); border: 1px solid hsl(var(--as-rq-border)); box-shadow: 0 1px 0 rgba(0,0,0,.02); } .as-rq-btn--ghost:hover{ border-color: rgba(219,39,119,.35); background: rgba(244,63,94,.06); } .as-rq-btn--pink{ background: var(--as-rq-pink-600); color: #fff; border: 1px solid rgba(219,39,119,.55); box-shadow: var(--as-rq-shadow-soft); } .as-rq-btn--pink:hover{ background: var(--as-rq-pink-700); } /* ========= Icons ========= */ .as-rq-ico{ width: 16px; height: 16px; flex: 0 0 auto; } .as-rq-ico--sm{ width: 12px; height: 12px; } .as-rq-ico--md{ width: 16px; height: 16px; } .as-rq-ico--lg{ width: 20px; height: 20px; } .as-rq-ico--mr{ margin-right: 6px; } .as-rq-ico--pink{ color: var(--as-rq-pink-600); } /* ========= Pulse ========= */ .as-rq-pulse{ animation: as-rq-pulse 1.6s infinite; } @keyframes as-rq-pulse{ 0%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.03); opacity: .9; } 100%{ transform: scale(1); opacity: 1; } } /* ========= Tokens ========= */ :root{ --as-rq-bg: 0 0% 100%; --as-rq-fg: 222 15% 15%; --as-rq-muted: 222 10% 45%; --as-rq-border: 330 20% 88%; --as-rq-card-bg: 0 0% 100%; --as-rq-card-fg: 222 15% 15%; --as-rq-pink-600: #db2777; --as-rq-pink-700: #be185d; --as-rq-star: #f9a8d4; /* pink-400 feel */ --as-rq-shadow: 0 10px 24px -18px rgba(17, 24, 39, .25); --as-rq-shadow-xl: 0 18px 50px -28px rgba(219, 39, 119, .45); --as-rq-radius-lg: 14px; --as-rq-radius-md: 12px; --as-rq-ease: cubic-bezier(.2,.8,.2,1); --as-rq-dur: 220ms; } html[data-as-theme="dark"]{ --as-rq-bg: 222 20% 10%; --as-rq-fg: 0 0% 100%; --as-rq-muted: 222 10% 72%; --as-rq-border: 330 20% 22%; --as-rq-card-bg: 222 20% 12%; --as-rq-card-fg: 0 0% 100%; } /* ========= Layout ========= */ .as-rq-grid__container{ max-width: 1200px; margin: 0 auto; padding: 32px 16px; /* py-8 px-4 */ } .as-rq-grid__wrap{ display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 24px; /* gap-6 */ } @media (min-width: 640px){ .as-rq-grid__wrap{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px){ .as-rq-grid__wrap{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px){ .as-rq-grid__wrap{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ========= Card ========= */ .as-rq-card{ background: hsl(var(--as-rq-card-bg)); color: hsl(var(--as-rq-card-fg)); border: 2px solid hsl(var(--as-rq-border)); border-radius: var(--as-rq-radius-lg); overflow: hidden; box-shadow: var(--as-rq-shadow); cursor: pointer; transition: transform var(--as-rq-dur) var(--as-rq-ease), box-shadow var(--as-rq-dur) var(--as-rq-ease), border-color var(--as-rq-dur) var(--as-rq-ease); outline: none; } .as-rq-card:hover{ transform: translateY(-2px); box-shadow: var(--as-rq-shadow-xl); border-color: rgba(219, 39, 119, .45); } .as-rq-card:focus-visible{ box-shadow: 0 0 0 3px rgba(219, 39, 119, .25), var(--as-rq-shadow-xl); border-color: rgba(219, 39, 119, .55); } /* ========= Media ========= */ .as-rq-card__media{ position: relative; background: rgba(0,0,0,.02); } .as-rq-card__img{ display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transform: scale(1); transition: transform 500ms var(--as-rq-ease); } .as-rq-card:hover .as-rq-card__img{ transform: scale(1.05); } .as-rq-card__badges{ position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 2; } .as-rq-card__overlay{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.60); opacity: 0; pointer-events: none; transition: opacity var(--as-rq-dur) var(--as-rq-ease); z-index: 1; } .as-rq-card:hover .as-rq-card__overlay{ opacity: 1; pointer-events: auto; } /* ========= Content ========= */ .as-rq-card__content{ padding: 16px; /* p-4 */ } .as-rq-card__top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .as-rq-card__title{ margin: 0 0 8px 0; font-size: 14px; font-weight: 800; line-height: 1.3; /* line-clamp-2 */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .as-rq-card:hover .as-rq-card__title{ color: var(--as-rq-pink-600); } .as-rq-card__meta{ display: flex; align-items: center; gap: 8px; font-size: 12px; color: hsl(var(--as-rq-muted)); margin-bottom: 12px; } .as-rq-card__dot{ opacity: .8; } .as-rq-card__priceRow{ display: flex; align-items: center; justify-content: space-between; padding-top: 8px; /* pt-2 */ margin-bottom: 10px; } .as-rq-card__now{ font-size: 18px; font-weight: 900; color: var(--as-rq-pink-600); } .as-rq-card__was{ font-size: 12px; margin-left: 8px; color: hsl(var(--as-rq-muted)); text-decoration: line-through; } /* ========= Rating ========= */ .as-rq-card__rating{ display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; } .as-rq-star{ color: var(--as-rq-star); width: 16px; height: 16px; } .as-rq-star--sm{ width: 12px; height: 12px; } .as-rq-card__ratingScore{ font-weight: 800; color: hsl(var(--as-rq-fg)); } .as-rq-card__ratingMeta{ color: hsl(var(--as-rq-muted)); } /* ========= Badges ========= */ .as-rq-badge{ display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 10px; font-weight: 800; border: 1px solid transparent; line-height: 1; } .as-rq-badge--xs{ font-size: 12px; padding: 4px 10px; } .as-rq-badge--solid-pink{ background: var(--as-rq-pink-600); color: #fff; } .as-rq-badge--soft{ background: rgba(15, 23, 42, .06); color: hsl(var(--as-rq-fg)); border-color: rgba(15, 23, 42, .06); } html[data-as-theme="dark"] .as-rq-badge--soft{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.08); } .as-rq-badge--outline{ background: transparent; color: hsl(var(--as-rq-fg)); border-color: hsl(var(--as-rq-border)); } /* ========= Buttons ========= */ .as-rq-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; border: 1px solid transparent; font-weight: 800; cursor: pointer; user-select: none; transition: transform var(--as-rq-dur) var(--as-rq-ease), background var(--as-rq-dur) var(--as-rq-ease), box-shadow var(--as-rq-dur) var(--as-rq-ease); } .as-rq-btn:active{ transform: translateY(1px) scale(.99); } .as-rq-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(219, 39, 119, .25); } .as-rq-btn--pink{ background: var(--as-rq-pink-600); color: #fff; box-shadow: 0 10px 24px -18px rgba(219, 39, 119, .45); } .as-rq-btn--pink:hover{ background: var(--as-rq-pink-700); } .as-rq-btn--full{ width: 100%; } .as-rq-btn--sm{ height: 36px; font-size: 14px; padding: 0 14px; } /* h-9 */ .as-rq-btn--md{ height: 40px; font-size: 14px; padding: 0 16px; } /* ========= Icons ========= */ .as-rq-ico{ width: 16px; height: 16px; flex: 0 0 auto; } .as-rq-ico--sm{ width: 12px; height: 12px; } .as-rq-ico--md{ width: 16px; height: 16px; } .as-rq-ico--mr{ margin-right: 6px; } :root{ --as-rq-fg: 222 15% 15%; --as-rq-muted: 222 10% 45%; --as-rq-border: 330 20% 88%; --as-rq-pink-600: #db2777; /* soft section background like from-pink-50 to-rose-50 */ --as-rq-bg1: #fdf2f8; --as-rq-bg2: #fff1f2; /* icon bubble bg like bg-pink-500/10 */ --as-rq-bubble: rgba(219, 39, 119, .10); --as-rq-radius: 999px; --as-rq-ease: cubic-bezier(.2,.8,.2,1); } html[data-as-theme="dark"]{ --as-rq-fg: 0 0% 100%; --as-rq-muted: 222 10% 72%; --as-rq-border: 330 20% 22%; /* dark:from-pink-950/20 dark:to-rose-950/20 */ --as-rq-bg1: rgba(80, 7, 36, .20); --as-rq-bg2: rgba(76, 5, 25, .20); --as-rq-bubble: rgba(219, 39, 119, .14); } /* ========= Section ========= */ .as-rq-why{ padding: 48px 0; /* py-12 */ border-top: 1px solid hsl(var(--as-rq-border)); border-bottom: 1px solid hsl(var(--as-rq-border)); background-image: linear-gradient(to bottom right, var(--as-rq-bg1), var(--as-rq-bg2)); } .as-rq-why__container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; /* container px-4 */ } .as-rq-why__head{ text-align: center; margin-bottom: 32px; /* mb-8 */ } .as-rq-why__title{ margin: 0 0 8px 0; font-weight: 900; letter-spacing: -0.02em; font-size: 24px; /* text-2xl */ color: hsl(var(--as-rq-fg)); } @media (min-width: 768px){ .as-rq-why__title{ font-size: 30px; } /* md:text-3xl */ } .as-rq-why__sub{ margin: 0; color: hsl(var(--as-rq-muted)); font-size: 14px; } /* ========= Grid ========= */ .as-rq-why__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */ gap: 24px; /* gap-6 */ } @media (min-width: 768px){ .as-rq-why__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } /* md:grid-cols-4 */ } /* ========= Item ========= */ .as-rq-why__item{ text-align: center; padding: 6px 8px; } .as-rq-why__iconWrap{ width: 48px; /* w-12 */ height: 48px; /* h-12 */ margin: 0 auto 12px auto; /* mx-auto mb-3 */ border-radius: var(--as-rq-radius); display: flex; align-items: center; justify-content: center; background: var(--as-rq-bubble); transition: transform 220ms var(--as-rq-ease); } .as-rq-why__item:hover .as-rq-why__iconWrap{ transform: translateY(-2px); } .as-rq-why__icon{ width: 24px; /* w-6 */ height: 24px; /* h-6 */ color: var(--as-rq-pink-600); /* text-pink-600 */ } .as-rq-why__itemTitle{ margin: 0 0 4px 0; font-weight: 800; color: hsl(var(--as-rq-fg)); font-size: 14px; } .as-rq-why__itemText{ margin: 0; color: hsl(var(--as-rq-muted)); font-size: 13px; line-height: 1.35; } /* ========= Tokens (Rose Quartz luxury theme-friendly) ========= */ :root{ --as-rq-fg: 222 15% 15%; --as-rq-muted: 222 10% 45%; --as-rq-border: 330 20% 88%; --as-rq-card: 0 0% 100%; --as-rq-pink-500: #ec4899; --as-rq-pink-600: #db2777; --as-rq-rose-600: #e11d48; --as-rq-shadow: 0 10px 30px rgba(17, 24, 39, .06); --as-rq-radius: 16px; --as-rq-ease: cubic-bezier(.2,.8,.2,1); } html[data-as-theme="dark"]{ --as-rq-fg: 0 0% 100%; --as-rq-muted: 222 10% 72%; --as-rq-border: 330 20% 22%; --as-rq-card: 240 10% 8%; --as-rq-shadow: 0 12px 34px rgba(0,0,0,.35); } /* ========= Section ========= */ .as-rq-testimonials{ padding: 48px 0; /* py-12 */ background: hsl(var(--as-rq-card)); /* bg-background like */ } .as-rq-testimonials__container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; /* px-4 */ } .as-rq-testimonials__head{ text-align: center; margin-bottom: 32px; /* mb-8 */ } .as-rq-testimonials__title{ margin: 0 0 8px 0; font-weight: 900; letter-spacing: -0.02em; font-size: 24px; color: hsl(var(--as-rq-fg)); } @media (min-width: 768px){ .as-rq-testimonials__title{ font-size: 30px; } } .as-rq-testimonials__sub{ margin: 0; color: hsl(var(--as-rq-muted)); font-size: 14px; } /* ========= Grid ========= */ .as-rq-testimonials__grid{ display: grid; grid-template-columns: 1fr; /* grid-cols-1 */ gap: 24px; /* gap-6 */ } @media (min-width: 768px){ .as-rq-testimonials__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } /* md:grid-cols-2 */ } @media (min-width: 1024px){ .as-rq-testimonials__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } /* lg:grid-cols-4 */ } /* ========= Card ========= */ .as-rq-testimonials__card{ background: hsl(var(--as-rq-card)); border: 2px solid hsl(var(--as-rq-border)); border-radius: var(--as-rq-radius); padding: 24px; /* p-6 */ box-shadow: var(--as-rq-shadow); transition: border-color 200ms var(--as-rq-ease), transform 200ms var(--as-rq-ease); } .as-rq-testimonials__card:hover{ border-color: rgba(219, 39, 119, .45); /* hover:border-pink-500/50 */ transform: translateY(-2px); } /* ========= Top row ========= */ .as-rq-testimonials__top{ display: flex; gap: 12px; /* gap-3 */ align-items: flex-start; margin-bottom: 16px; /* mb-4 */ } .as-rq-testimonials__avatar{ width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-weight: 900; letter-spacing: .02em; background-image: linear-gradient(to bottom right, var(--as-rq-pink-500), var(--as-rq-rose-600)); flex: 0 0 auto; } .as-rq-testimonials__who{ min-width: 0; } .as-rq-testimonials__name{ margin: 0; font-weight: 800; color: hsl(var(--as-rq-fg)); font-size: 14px; line-height: 1.25; } .as-rq-testimonials__meta{ margin: 2px 0 0 0; font-size: 12px; /* text-xs */ color: hsl(var(--as-rq-muted)); } .as-rq-testimonials__badge{ display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; /* mt-1 */ padding: 3px 10px; border-radius: 999px; font-size: 12px; /* text-xs */ font-weight: 700; border: 1px solid hsl(var(--as-rq-border)); color: hsl(var(--as-rq-fg)); background: rgba(219, 39, 119, .06); white-space: nowrap; } .as-rq-testimonials__badgeIcon{ width: 14px; height: 14px; color: var(--as-rq-pink-600); } /* ========= Stars ========= */ .as-rq-testimonials__stars{ display: flex; gap: 4px; /* gap-1 */ align-items: center; margin-bottom: 12px; /* mb-3 */ } .as-rq-testimonials__star{ width: 16px; height: 16px; fill: rgba(236, 72, 153, .35); /* similar to fill-pink-400 */ color: rgba(236, 72, 153, .95); stroke: rgba(236, 72, 153, .95); } /* ========= Quote ========= */ .as-rq-testimonials__quote{ margin: 0; font-size: 13px; /* text-sm-ish */ line-height: 1.55; color: hsl(var(--as-rq-muted)); font-style: italic; /* italic */ } /* ========= Tokens (Rose Quartz luxury theme-friendly) ========= */ :root{ --as-rq-fg: 222 15% 15%; --as-rq-muted: 222 10% 45%; --as-rq-border: 330 20% 88%; --as-rq-surface: 330 35% 98%; --as-rq-card: 0 0% 100%; --as-rq-shadow: 0 10px 30px rgba(17, 24, 39, .06); --as-rq-radius: 18px; --as-rq-ease: cubic-bezier(.2,.8,.2,1); } html[data-as-theme="dark"]{ --as-rq-fg: 0 0% 100%; --as-rq-muted: 222 10% 72%; --as-rq-border: 330 20% 22%; --as-rq-surface: 330 30% 10%; --as-rq-card: 240 10% 8%; --as-rq-shadow: 0 12px 34px rgba(0,0,0,.35); } /* ========= Band / Wrapper ========= */ .as-rq-proseBand{ padding: 48px 0; /* py-12 */ background: hsl(var(--as-rq-surface)); /* bg-muted/30 feel */ border-top: 1px solid hsl(var(--as-rq-border)); border-bottom: 1px solid hsl(var(--as-rq-border)); } .as-rq-proseBand__container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; /* px-4 */ } .as-rq-proseBand__inner{ max-width: 896px; /* max-w-4xl */ margin: 0 auto; } /* ========= Title ========= */ .as-rq-proseBand__title{ margin: 0 0 24px 0; /* mb-6 */ text-align: center; font-weight: 900; letter-spacing: -0.02em; color: hsl(var(--as-rq-fg)); font-size: 24px; line-height: 1.15; } @media (min-width: 768px){ .as-rq-proseBand__title{ font-size: 30px; } } /* ========= Prose ========= */ .as-rq-proseBand__prose{ background: rgba(255,255,255,.45); border: 1px solid hsl(var(--as-rq-border)); border-radius: var(--as-rq-radius); padding: 22px; box-shadow: var(--as-rq-shadow); backdrop-filter: blur(8px); } html[data-as-theme="dark"] .as-rq-proseBand__prose{ background: rgba(0,0,0,.18); } .as-rq-proseBand__prose p{ margin: 0 0 14px 0; color: hsl(var(--as-rq-muted)); font-size: 16px; /* prose-lg vibe */ line-height: 1.75; } .as-rq-proseBand__prose p:last-child{ margin-bottom: 0; } /* Optional: nicer quotes/dashes inside prose */ .as-rq-proseBand__prose :where(em, i){ color: hsl(var(--as-rq-fg)); } .as-rq-proseBand__prose :where(strong, b){ color: hsl(var(--as-rq-fg)); font-weight: 800; } .as-rq-grid{padding:24px 0} .as-rq-grid__container{max-width:1200px;margin:0 auto;padding:0 16px} .as-rq-grid__wrap{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:16px} @media(min-width:640px){.as-rq-grid__wrap{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1024px){.as-rq-grid__wrap{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:1280px){.as-rq-grid__wrap{grid-template-columns:repeat(4,minmax(0,1fr))}} .as-rq-card{border:1px solid rgba(0,0,0,.08);border-radius:16px;overflow:hidden;background:#fff;transition:box-shadow .2s,border-color .2s} .as-rq-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.10);border-color:rgba(236,72,153,.35)} .as-rq-card__link{display:block;color:inherit;text-decoration:none} .as-rq-card__media{position:relative} .as-rq-card__img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .5s} .as-rq-card:hover .as-rq-card__img{transform:scale(1.04)} .as-rq-card__img--placeholder{background:linear-gradient(135deg,#fde7f3,#fff1f5)} .as-rq-card__badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px} .as-rq-badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-weight:600;line-height:1;border:1px solid transparent} .as-rq-badge--xs{font-size:12px} .as-rq-badge--solid-pink{background:#ec4899;color:#fff} .as-rq-badge--soft{background:rgba(236,72,153,.10);color:#9d174d;border-color:rgba(236,72,153,.12)} .as-rq-badge--outline{background:transparent;border-color:rgba(0,0,0,.12);color:rgba(0,0,0,.72)} .as-rq-ico{display:inline-block;vertical-align:middle} .as-rq-ico--mr{margin-right:6px} .as-rq-ico--sm{width:14px;height:14px} .as-rq-ico--md{width:16px;height:16px} .as-rq-card__content{padding:14px} .as-rq-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .as-rq-card__rating{display:flex;align-items:center;gap:6px} .as-rq-star--sm{width:14px;height:14px;color:#ec4899} .as-rq-card__ratingScore{font-size:12px;font-weight:700} .as-rq-card__ratingMeta{font-size:12px;color:rgba(0,0,0,.55)} .as-rq-card__title{margin:0 0 8px;font-size:14px;font-weight:700;line-height:1.25} .as-rq-card__titleLink{color:inherit;text-decoration:none} .as-rq-card:hover .as-rq-card__titleLink{color:#db2777} .as-rq-card__meta{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(0,0,0,.60);margin-bottom:10px} .as-rq-card__dot{opacity:.7} .as-rq-card__priceRow{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .as-rq-card__now{font-size:18px;font-weight:800;color:#db2777} .as-rq-card__was{font-size:12px;margin-left:8px;color:rgba(0,0,0,.50);text-decoration:line-through} .as-rq-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;border:1px solid transparent;padding:10px 12px;font-weight:700;cursor:pointer} .as-rq-btn--sm{font-size:13px;padding:10px 12px} .as-rq-btn--full{width:100%} .as-rq-btn--pink{background:#ec4899;color:#fff} .as-rq-btn--pink:hover{background:#db2777} .as-rq-btn--disabled{background:rgba(0,0,0,.08);color:rgba(0,0,0,.45);cursor:not-allowed} .as-rq-empty{padding:28px;border:1px dashed rgba(0,0,0,.18);border-radius:16px;text-align:center} .as-rq-empty__title{margin:0 0 6px;font-weight:800} .as-rq-empty__text{margin:0;color:rgba(0,0,0,.60)} .as-rq-card__save{ margin: 9px 0px; font-size: 14px; font-weight: bold; } .as-rq-card__badges{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:8px; z-index:3; } /* Discount pill (dark + pink border) */ .as-rq-badge--discount{ display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.2px; color:#ff6aa7; /* rose-pink text */ background:#1a1418; /* near-black plum */ border:1px solid rgba(255, 106, 167, .35); box-shadow:0 0 0 2px rgba(255, 106, 167, .08); } /* Certified pill (grey soft) */ .as-rq-badge--cert{ display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700; color:#1f1f1f; background:#bdbdbd; /* soft grey like screenshot */ border:1px solid rgba(0,0,0,.08); } /* icon spacing helper (you already use these classes) */ .as-rq-ico--mr{ margin-right:6px; } .as-rq-ico--sm{ width:14px; height:14px; } .as-rq-card__badges{ opacity: 1 !important; visibility: visible !important; } .as-rq-card__media{ position: relative; } .as-rq-card__badges{ position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 5; /* overlay se upar */ opacity: 1 !important; /* force visible */ visibility: visible !important; } .as-rq-card__overlay{ z-index: 4; /* overlay below badges */ } .as-rq-card__badges { opacity: 1; } .as-rq-card:hover .as-rq-card__badges { opacity: 1; } .as-rq-card{ transform: translateY(0px); } .as-rq-btn{ width: 14rem; border: 1px solid pink; } .as-rq-btn--ghost{ background:#ffc0cb26 }