Alireza HassaniandCursor
e625354dc9
Wire the product CTA to store-loan-methods calculate so shoppers can pick a term and see the plan, and render English model runs under Montserrat so fanum fonts stop painting 0-9 as Persian digits. Co-authored-by: Cursor <cursoragent@cursor.com>
98 lines
2.7 KiB
CSS
98 lines
2.7 KiB
CSS
@import "tailwindcss";
|
||
|
||
:root {
|
||
--background: #ffffff;
|
||
--foreground: #2e2e2e;
|
||
|
||
/* Brand palette lifted from the live moalem.shop theme
|
||
(--wb-primary-color #E51E22 / --wb-secondary-color #3B3B3B). Flat, no gradients. */
|
||
--color-brand: #e51e22;
|
||
--color-brand-dark: #b10123;
|
||
--color-brand-soft: #fdecec;
|
||
--color-ink: #2e2e2e;
|
||
--color-ink-soft: #3b3b3b;
|
||
--color-body: #7c7c7c;
|
||
--color-surface: #f6f7f9;
|
||
--color-line: #ececec;
|
||
}
|
||
|
||
@theme inline {
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
|
||
--color-brand: var(--color-brand);
|
||
--color-brand-dark: var(--color-brand-dark);
|
||
--color-brand-soft: var(--color-brand-soft);
|
||
--color-ink: var(--color-ink);
|
||
--color-ink-soft: var(--color-ink-soft);
|
||
--color-body: var(--color-body);
|
||
--color-surface: var(--color-surface);
|
||
--color-line: var(--color-line);
|
||
|
||
--font-fa: var(--font-fa);
|
||
--font-en: var(--font-en);
|
||
|
||
--container-boxed: 1200px;
|
||
}
|
||
|
||
/* Base defaults live in Tailwind's base layer so utilities can override them. */
|
||
@layer base {
|
||
body {
|
||
background: var(--background);
|
||
color: var(--color-ink);
|
||
font-family: var(--font-fa), Tahoma, sans-serif;
|
||
font-weight: 300;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4 {
|
||
color: var(--color-ink);
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
@utility boxed {
|
||
width: 100%;
|
||
max-width: var(--container-boxed);
|
||
margin-inline: auto;
|
||
padding-inline: 1rem;
|
||
}
|
||
|
||
/* Latin runs (model names, SKUs) inside Farsi copy — Montserrat keeps
|
||
real 0-9 digits; IRANYekan fanum would otherwise paint them as ۰-۹. */
|
||
.en {
|
||
font-family: var(--font-en), var(--font-fa), sans-serif;
|
||
unicode-bidi: isolate;
|
||
}
|
||
|
||
/* Swiper theming: its own CSS reads these custom properties when drawing
|
||
bullets (background: var(--swiper-pagination-bullet-inactive-color, #000)
|
||
etc.) — setting a plain .swiper-pagination-bullet{background} rule has the
|
||
same specificity as swiper's own rule and lost the cascade depending on
|
||
chunk order, which is why the dots were showing swiper's black/blue
|
||
defaults instead of white. Setting the variables is the way swiper itself
|
||
documents for overriding bullet colors, and it's cascade-order-proof. */
|
||
.hero-dots {
|
||
--swiper-pagination-bullet-inactive-color: #ffffff;
|
||
--swiper-pagination-bullet-inactive-opacity: 0.55;
|
||
--swiper-pagination-color: #ffffff;
|
||
--swiper-pagination-bullet-width: 8px;
|
||
--swiper-pagination-bullet-height: 8px;
|
||
}
|
||
/* The active pill shape has no swiper variable of its own — .hero-dots
|
||
raises specificity (0,2,0) above swiper's base bullet rule (0,1,0) so
|
||
this wins without !important. */
|
||
.hero-dots .swiper-pagination-bullet-active {
|
||
width: 22px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.clamp-2 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|