/* * OnlySpins Casino - Design System * Tropical-resort aesthetic: turquoise-gold on deep ocean charcoal. * Fonts: Sora (display) + Manrope (body). */ :root { --background: #f5fcfd; --foreground: #1a2b32; --card: #f2e9d8; --card-foreground: #1a2b32; --popover: #ffffff; --popover-foreground: #1a2b32; --primary: #0ca7ba; --primary-foreground: #000000; --secondary: #f2e3c8; --secondary-foreground: #3a2f1a; --muted: #dce8ec; --muted-foreground: #4a5a61; --accent: #c99315; --accent-foreground: #1a2b32; --destructive: #e5484d; --destructive-foreground: #000000; --border: #c4d7dd; --input: #c4d7dd; --ring: #0ca7ba; } /* Site ships dark-first; .dark on is the primary theme. */ .dark, :root { --background: #0c1b21; --foreground: #e8f6f4; --card: #132c34; --card-foreground: #e8f6f4; --popover: #132c34; --popover-foreground: #e8f6f4; --primary: #2cd4e0; --primary-foreground: #04262b; --secondary: #12333c; --secondary-foreground: #e8f6f4; --muted: #1c3d46; --muted-foreground: #a9c8ce; --accent: #f5c542; --accent-foreground: #1a1405; --destructive: #ea0f17; --destructive-foreground: #ffffff; --border: #254a54; --input: #1c3d46; --ring: #2cd4e0; /* Spacing scale (8px base) */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 56px; --space-2xl: 96px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --content-max: 1200px; --header-h: 64px; --coral: #ff7a59; --gold-glow: 0 0 24px rgba(245, 197, 66, 0.45); --turq-glow: 0 12px 40px rgba(44, 212, 224, 0.28); --grad-cta: linear-gradient(120deg, #2cd4e0 0%, #f5c542 100%); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ============================================ BASE / RESET ============================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "Manrope", system-ui, sans-serif; font-size: 17px; line-height: 1.6; color: var(--foreground); background: radial-gradient(1200px 600px at 80% -10%, rgba(44, 212, 224, 0.10), transparent 60%), radial-gradient(900px 500px at 0% 10%, rgba(245, 197, 66, 0.07), transparent 55%), var(--background); background-attachment: fixed; overflow-x: hidden; } img, video, iframe, svg { max-width: 100%; height: auto; display: block; } [class*="grid"] > *, [class*="flex"] > * { min-width: 0; } p, li, td, th { overflow-wrap: break-word; } input, textarea, select { max-width: 100%; } section { overflow: clip; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 8px; top: -60px; z-index: 2000; background: var(--accent); color: var(--accent-foreground); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 700; transition: top .2s var(--ease); } .skip-link:focus { top: 8px; text-decoration: none; } /* ============================================ TYPOGRAPHY ============================================ */ h1, h2, h3, h4 { font-family: "Sora", system-ui, sans-serif; line-height: 1.2; letter-spacing: -0.02em; color: var(--foreground); margin: 0 0 var(--space-sm); } h1 { font-size: 30px; font-weight: 800; } h2 { font-size: 26px; font-weight: 700; } h3 { font-size: 22px; font-weight: 600; } p { margin: 0 0 var(--space-md); } .eyebrow { font-family: "Sora", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-xs); } .lead { font-size: 19px; color: var(--foreground); } .muted-text { color: var(--muted-foreground); } @media (min-width: 768px) { h1 { font-size: 44px; } h2 { font-size: 34px; } h3 { font-size: 24px; } } /* Wave-splash gradient underline beneath section headings */ .section-heading { position: relative; display: inline-block; padding-bottom: 14px; margin-bottom: var(--space-lg); } .section-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 84px; height: 4px; border-radius: var(--radius-pill); background: var(--grad-cta); box-shadow: var(--gold-glow); } .section-heading--center { display: block; text-align: center; } .section-heading--center::after { left: 50%; transform: translateX(-50%); } /* Oversized glowing gold figures */ .gold-figure { font-family: "Sora", sans-serif; font-weight: 800; color: var(--accent); text-shadow: var(--gold-glow); line-height: 1.05; } /* ============================================ LAYOUT PRIMITIVES ============================================ */ .container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-sm); } .section { padding: var(--space-xl) 0; } @media (min-width: 768px) { .section { padding: var(--space-2xl) 0; } } .grid { display: grid; gap: var(--space-sm); grid-template-columns: minmax(0,1fr); } @media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } } @media (min-width: 768px) and (max-width: 1023px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } .split { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0,1fr); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } } /* ============================================ BUTTONS ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; font-family: "Sora", sans-serif; font-weight: 700; font-size: 16px; border-radius: var(--radius-pill); border: 0; cursor: pointer; text-decoration: none; text-align: center; transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease); } .btn:hover { text-decoration: none; } .btn--gold { background: var(--accent); color: var(--accent-foreground); box-shadow: 0 6px 20px rgba(245, 197, 66, 0.28); } .btn--gold:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(245,197,66,0.22), 0 10px 28px rgba(245,197,66,0.4); } .btn--gradient { background: var(--grad-cta); color: #04262b; box-shadow: var(--turq-glow); } .btn--gradient:hover { transform: translateY(-2px); filter: brightness(1.06); } .btn--ghost { background: transparent; color: var(--foreground); border: 1px solid var(--border); } .btn--ghost:hover { border-color: var(--primary); color: var(--primary); } .btn--xl { min-height: 56px; padding: 16px 40px; font-size: 18px; } /* ============================================ HEADER + NAV ============================================ */ .site-header { position: sticky; top: 0; z-index: 1000; background: rgba(12, 27, 33, 0.92); border-bottom: 1px solid var(--border); } .site-header__inner { max-width: var(--content-max); margin: 0 auto; min-height: var(--header-h); padding: 0 var(--space-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } .site-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .site-brand:hover { text-decoration: none; } .site-brand__mark { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: radial-gradient(circle at 60% 35%, #f5c542, transparent 55%), conic-gradient(from 200deg, #2cd4e0, #0ca7ba 40%, #f5c542 75%, #2cd4e0); box-shadow: 0 0 14px rgba(44,212,224,0.5); } .site-brand__text { font-family: "Sora", sans-serif; font-weight: 800; font-size: 19px; color: var(--foreground); letter-spacing: -0.02em; } .site-brand__accent { color: var(--accent); } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 48px; height: 48px; padding: 12px; z-index: 1001; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--foreground); border-radius: 2px; transition: transform .25s var(--ease), opacity .25s var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .primary-nav { display: none; } .primary-nav.is-open { display: flex; flex-direction: column; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 999; background: var(--background); padding: var(--space-lg) var(--space-sm); overflow-y: auto; gap: var(--space-md); } .primary-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .primary-nav__link { display: flex; align-items: center; min-height: 48px; font-family: "Sora", sans-serif; font-weight: 600; font-size: 18px; color: var(--foreground); border-bottom: 1px solid var(--border); } .primary-nav__link:hover { color: var(--primary); text-decoration: none; } .primary-nav__actions { display: flex; flex-direction: column; gap: var(--space-xs); } @media (min-width: 768px) { .nav-toggle { display: none; } .primary-nav { display: flex; align-items: center; gap: var(--space-lg); position: static; padding: 0; background: transparent; } .primary-nav__list { flex-direction: row; gap: var(--space-md); } .primary-nav__link { min-height: auto; border: 0; font-size: 16px; } .primary-nav__actions { flex-direction: row; } } /* ============================================ HERO ============================================ */ .hero { position: relative; overflow: clip; background: linear-gradient(180deg, rgba(12,27,33,0.2), var(--background) 90%); } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; } .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(12,27,33,0.92) 0%, rgba(12,27,33,0.55) 55%, rgba(12,27,33,0.3) 100%); } .hero__inner { position: relative; z-index: 2; max-width: var(--content-max); margin: 0 auto; padding: var(--space-2xl) var(--space-sm); } .hero__content { max-width: 640px; } .hero h1 { margin-bottom: var(--space-md); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); } .bonus-badge { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); background: var(--secondary); border: 1px solid rgba(245,197,66,0.4); border-radius: var(--radius-md); box-shadow: var(--gold-glow); } .bonus-badge__big { font-size: 26px; } .bonus-badge__sub { font-size: 14px; color: var(--muted-foreground); font-weight: 600; } @media (min-width: 768px) { .bonus-badge__big { font-size: 34px; } } /* ============================================ PANELS / CARDS (generic surfaces) ============================================ */ .panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-md); } @media (min-width: 768px) { .panel { padding: var(--space-lg); } } /* ============================================ COMPONENT: bonus_card ============================================ */ .bonus-card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid rgba(44,212,224,0.28); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: 0 0 0 1px rgba(44,212,224,0.08); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .bonus-card:hover { transform: scale(1.03); box-shadow: var(--turq-glow); } .bonus-card--urgent { border-color: rgba(255,122,89,0.5); } .bonus-card__flag { align-self: flex-start; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--coral); color: #241005; font-weight: 700; font-size: 13px; } .bonus-card__figure { font-family: "Sora", sans-serif; font-weight: 800; font-size: 34px; color: var(--accent); text-shadow: var(--gold-glow); } .bonus-card__title { margin: 0; } .bonus-card__text { margin: 0; color: var(--foreground); } .bonus-card__code { margin: 0; font-size: 15px; color: var(--muted-foreground); } .bonus-card__code span { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); background: var(--secondary); color: var(--accent); font-family: "Sora", sans-serif; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(245,197,66,0.35); } .bonus-card__terms { margin: 0; font-size: 14px; color: var(--muted-foreground); } .bonus-card__cta { margin-top: auto; } /* ============================================ COMPONENT: game_card ============================================ */ .game-card { min-width: 0; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .game-card:hover { transform: scale(1.03); box-shadow: var(--turq-glow); } .game-card__media { position: relative; display: block; } .game-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .game-card__tag { position: absolute; top: 10px; left: 10px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-foreground); font-weight: 700; font-size: 13px; } .game-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 8px; } .game-card__title { margin: 0; } .game-card__text { margin: 0; font-size: 15px; color: var(--muted-foreground); } .game-card__link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; font-weight: 700; color: var(--primary); } /* ============================================ COMPONENT: faq_accordion ============================================ */ .faq-accordion { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-xs); } .faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .faq-item__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 48px; padding: var(--space-sm) var(--space-md); cursor: pointer; font-family: "Sora", sans-serif; font-weight: 600; font-size: 17px; color: var(--foreground); list-style: none; } .faq-item__q::-webkit-details-marker { display: none; } .faq-item__icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; } .faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform .3s var(--ease); } .faq-item__icon::before { top: 8px; left: 0; width: 18px; height: 2px; } .faq-item__icon::after { top: 0; left: 8px; width: 2px; height: 18px; } .faq-item[open] .faq-item__icon::after { transform: rotate(90deg); opacity: 0; } .faq-item__a { padding: 0 var(--space-md) var(--space-md); background: rgba(44,212,224,0.05); } .faq-item__a p { margin: var(--space-sm) 0 0; color: var(--foreground); } /* ============================================ COMPONENT: payment_logos_row ============================================ */ .payment-row { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-md); } .payment-row__caption { text-align: center; font-size: 14px; color: var(--muted-foreground); margin: 0 0 var(--space-sm); } .payment-row__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); } .payment-row__item { padding: 10px 18px; border-radius: var(--radius-sm); background: var(--secondary); border: 1px solid var(--border); font-family: "Sora", sans-serif; font-weight: 700; font-size: 15px; color: var(--foreground); transition: filter .2s var(--ease), border-color .2s var(--ease); } .payment-row__item:hover { filter: brightness(1.15); border-color: var(--primary); } /* ============================================ COMPONENT: cta_banner ============================================ */ .cta-banner { position: relative; overflow: clip; text-align: center; padding: var(--space-xl) var(--space-sm); border-radius: var(--radius-lg); margin: var(--space-xl) auto; max-width: var(--content-max); background: radial-gradient(600px 300px at 20% 10%, rgba(44,212,224,0.35), transparent 60%), radial-gradient(600px 300px at 80% 90%, rgba(245,197,66,0.3), transparent 60%), linear-gradient(120deg, #103642, #0c1b21); border: 1px solid rgba(44,212,224,0.3); } .cta-banner__particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(2px 2px at 20% 30%, rgba(245,197,66,0.7), transparent), radial-gradient(2px 2px at 70% 60%, rgba(245,197,66,0.6), transparent), radial-gradient(1.5px 1.5px at 40% 80%, rgba(44,212,224,0.7), transparent), radial-gradient(1.5px 1.5px at 85% 25%, rgba(245,197,66,0.5), transparent); animation: drift 9s ease-in-out infinite alternate; } .cta-banner__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; } .cta-banner__title { margin-bottom: var(--space-sm); } .cta-banner__subtitle { font-size: 18px; color: var(--muted-foreground); margin-bottom: var(--space-lg); } .cta-banner__note { margin: var(--space-sm) 0 0; font-size: 14px; color: var(--muted-foreground); } @media (min-width: 768px) { .cta-banner { padding: var(--space-2xl) var(--space-lg); } } @keyframes drift { from { transform: translateY(0); } to { transform: translateY(-14px); } } /* ============================================ ENGAGEMENT PATTERNS ============================================ */ .tldr-box { background: var(--secondary); border-left: 4px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-md); margin: 0 0 var(--space-lg); } .tldr-box h2, .tldr-box h3 { font-size: 18px; margin: 0 0 8px; } .tldr-box p { margin: 0; } .callout { background: var(--card); border: 1px solid var(--primary); border-left: 4px solid var(--primary); border-radius: var(--radius-md); padding: var(--space-md); margin: var(--space-lg) 0; } .callout--warn { border-color: var(--coral); border-left-color: var(--coral); } .callout__title { font-family: "Sora", sans-serif; font-weight: 700; margin: 0 0 8px; } .stat-highlight { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-md); text-align: center; } .stat-highlight__num { display: block; font-family: "Sora", sans-serif; font-weight: 800; font-size: 40px; color: var(--accent); text-shadow: var(--gold-glow); } .stat-highlight__label { display: block; font-size: 15px; color: var(--muted-foreground); } .pull-quote { font-size: 22px; font-style: italic; line-height: 1.4; border-left: 4px solid var(--accent); padding: var(--space-sm) var(--space-md); margin: var(--space-lg) 0; color: var(--foreground); } .pull-quote cite { display: block; margin-top: 8px; font-size: 15px; font-style: normal; color: var(--muted-foreground); } /* Steps strip */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); counter-reset: step; } @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, minmax(0,1fr)); } } .steps__item { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-md) var(--space-md) 56px; } .steps__item::before { counter-increment: step; content: counter(step); position: absolute; left: var(--space-md); top: var(--space-md); width: 28px; height: 28px; border-radius: 50%; background: var(--grad-cta); color: #04262b; font-family: "Sora", sans-serif; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; } /* Trust badges row */ .trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); } .trust-badge { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--radius-pill); background: var(--muted); border: 1px solid var(--border); font-weight: 700; font-size: 15px; color: var(--foreground); } .trust-badge--age { background: var(--secondary); color: var(--accent); border-color: rgba(245,197,66,0.4); } /* Comparison table */ .table-wrapper { max-width: 100%; overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); } table.data-table { width: 100%; border-collapse: collapse; min-width: 480px; } .data-table th, .data-table td { padding: 14px var(--space-sm); text-align: left; border-bottom: 1px solid var(--border); } .data-table thead th { background: var(--secondary); color: var(--secondary-foreground); font-family: "Sora", sans-serif; font-size: 15px; } .data-table tbody tr:hover { background: rgba(44,212,224,0.06); } .data-table td strong { color: var(--accent); } .data-table .col-featured { background: rgba(44,212,224,0.08); } /* ============================================ FOOTER ============================================ */ .site-footer { background: #08151a; border-top: 1px solid var(--border); margin-top: var(--space-2xl); padding: var(--space-xl) 0 var(--space-md); } .site-footer__inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-sm); display: grid; gap: var(--space-lg); grid-template-columns: minmax(0,1fr); } @media (min-width: 768px) { .site-footer__inner { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1024px) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } } .site-footer__heading { font-size: 16px; margin: 0 0 var(--space-sm); color: var(--foreground); } .site-footer__note { font-size: 14px; color: var(--muted-foreground); margin: var(--space-sm) 0 0; } .site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .site-footer__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted-foreground); } .site-footer__list a:hover { color: var(--primary); } .footer-pay { display: flex; flex-wrap: wrap; gap: 8px; } .footer-pay__chip { padding: 6px 12px; border-radius: var(--radius-sm); background: var(--muted); border: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--foreground); } .site-footer__badges { list-style: none; margin: 0 0 var(--space-sm); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .site-footer__badge { padding: 6px 14px; border-radius: var(--radius-pill); background: var(--muted); border: 1px solid var(--border); font-size: 13px; font-weight: 700; } .site-footer__badge--age { background: var(--secondary); color: var(--accent); } .site-footer__bottom { max-width: var(--content-max); margin: var(--space-lg) auto 0; padding: var(--space-md) var(--space-sm) 0; border-top: 1px solid var(--border); text-align: center; } .site-footer__bottom p { margin: 0; font-size: 14px; color: var(--muted-foreground); } /* ============================================ SITEMAP PAGE ============================================ */ .sitemap-list { display: grid; gap: var(--space-sm); } .sitemap-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-md); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .sitemap-card:hover { transform: translateY(-2px); box-shadow: var(--turq-glow); } .sitemap-card h3 { margin: 0 0 8px; } .sitemap-card h3 a { color: var(--accent); } .sitemap-card p { margin: 0; color: var(--muted-foreground); } /* ============================================ SCROLL ANIMATIONS ============================================ */ .animate-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .animate-on-scroll.is-visible { opacity: 1; transform: none; } .animate-on-scroll:nth-child(2) { transition-delay: .08s; } .animate-on-scroll:nth-child(3) { transition-delay: .16s; } .animate-on-scroll:nth-child(4) { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .animate-on-scroll { opacity: 1; transform: none; } } /* a11y-autofix: link-in-text-block */ /* axe link-in-text-block: inline links inside body copy must be distinguishable without relying on color. Scope to text containers so nav/button/card links (already visually distinct) keep their styling. */ :where(p, li, blockquote, figcaption, dd, .prose, .seo-text, article) a:not([class]) { text-decoration: underline; text-underline-offset: 0.15em; }