/**
* RSK theme — source stylesheet (compiled to assets/css/rsk.css).
*
* EVERYTHING here is scoped under `.rsk-site` (the class on for RSK
* frontend pages). Nothing in this file may style bare element selectors
* globally — that is the guarantee against the previous migration's CSS
* collapse. Tailwind utilities are `rsk-`-prefixed (see tailwind.config.js).
*/
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
/* --- Scoped mini-reset (replaces the disabled global preflight) --- *
* Only the essentials Tailwind utilities depend on, scoped so it can *
* NEVER touch wp-admin / Gutenberg / plugin markup. */
.rsk-site,
.rsk-site *,
.rsk-site *::before,
.rsk-site *::after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: currentColor;
}
.rsk-site {
/* Design tokens */
--font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--border-hairline: rgba(104, 109, 121, 0.22);
--border-hairline-strong: rgba(104, 109, 121, 0.4);
--border-hairline-on-dark: rgba(255, 255, 255, 0.14);
/* Base canvas (matches the Next.js ) */
background-color: #000000;
color: #ffffff;
font-family: var(--font-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
}
/* Element normalizations Tailwind normally provides via preflight.
REAL BUG FOUND + FIXED: same specificity trap as the h1-h6 font-size/
weight reset and the `a` underline reset just below — this bare
`.rsk-site h3` etc. selector is (0,1,1), which beats single-class
margin utilities like `.rsk-mt-12`/`.rsk-mt-6` (0,1,0), silently
zeroing every heading/paragraph/list's real top-margin sitewide.
Barely visible on service pages (few, spread-out headings) but very
visible on blog articles (many consecutive h2/h3 blocks rendered via
rsk_render_blocks() in template-tags.php) — confirmed live via
getComputedStyle showing marginTop:0px on an h3 carrying `rsk-mt-12`.
:where() drops this reset to zero specificity so the utilities win. */
.rsk-site :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) {
margin: 0;
}
.rsk-site :where(ul, ol) {
padding: 0;
list-style: none;
}
/* REAL BUG FOUND + FIXED (same class as the earlier img/video/button/p
specificity traps documented elsewhere in this file): bare `.rsk-site h1`
etc. selectors are (0,1,1) specificity, which beats any single-class text-
size utility like `.rsk-text-h1`/`.rsk-text-display` (0,1,0) — every
heading on every page was silently rendering at inherited body text size
(16px/400 weight) instead of its real clamp()'d size/weight, confirmed
live via getComputedStyle on the homepage's own "RSK Auto Detailing & Car
Wash" h2. :where() drops this reset rule's specificity to zero so heading
utility classes always win, matching the fix already used for `a` and
`button/input/...` two lines below. */
.rsk-site :where(h1, h2, h3, h4, h5, h6) {
font-size: inherit;
font-weight: inherit;
}
/* REAL BUG FOUND + FIXED — root cause fully isolated via live experiment,
not guessed: setting the SHORTHAND `text-decoration: none` (even with
!important, even as a plain non-:where() `a{...}` rule with real
specificity, even as a forced `` reload with a brand-new never-
cached URL, even fully logged out of wp-admin) never suppressed a real,
visible underline on every plain `` sitewide (navbar links, service
cards) — confirmed via getComputedStyle, not just screenshots. Switching
to the LONGHAND `text-decoration-line: none` fixed it immediately, same
session, same page, no other change. Something in this stack applies an
underline via the `text-decoration-line` longhand specifically, and a
shorthand `text-decoration` declaration does not reliably out-cascade a
longhand declaration of one of its own sub-properties in this browser —
so this reset now sets the longhand directly rather than relying on
shorthand-expansion parity. Explicit `.rsk-underline` (language switcher
active state, inline process/about links) still overrides this
correctly since that utility targets the same longhand with real
specificity against this rule's zero. */
.rsk-site :where(a) {
color: inherit;
text-decoration-line: none !important;
}
.rsk-site :where(button, input, optgroup, select, textarea) {
font-family: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
.rsk-site :where(button, [type="button"], [type="reset"], [type="submit"]) {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
cursor: pointer;
}
.rsk-site img, .rsk-site svg, .rsk-site video,
.rsk-site canvas, .rsk-site audio, .rsk-site iframe,
.rsk-site embed, .rsk-site object {
display: block;
vertical-align: middle;
}
/* :where() keeps this at zero added specificity (matches Tailwind's own
preflight technique) so a utility like `rsk-h-9`/`rsk-w-auto` on a
specific ![]()
always wins over this sitewide default — without
:where(), `.rsk-site img` (0,1,1) would beat `.rsk-h-9` (0,1,0)
regardless of source order, which is exactly the bug this replaced
(a logo `![]()
` rendered at full native
pixel size because `height:auto` silently outranked `height:2.25rem`). */
.rsk-site :where(img, video) {
max-width: 100%;
height: auto;
}
/* Headings use the display face (matches globals.css) */
.rsk-site h1, .rsk-site h2, .rsk-site h3, .rsk-site h4 {
font-family: var(--font-display);
}
/* Every-word capitalization for headings (visual only; underlying copy
stays sentence-case for SEO/accessibility). No visual effect on CJK. */
.rsk-site h1, .rsk-site h2, .rsk-site h3,
.rsk-site h4, .rsk-site h5, .rsk-site h6 {
text-transform: capitalize;
}
.rsk-site ::-moz-selection {
background: #ffffff;
color: #000000;
}
.rsk-site ::selection {
background: #ffffff;
color: #000000;
}
/* --- Chinese optical tuning (scoped port of globals.css :lang(zh)) --- */
.rsk-site:lang(zh) h1, .rsk-site:lang(zh) h2, .rsk-site:lang(zh) h3,
.rsk-site:lang(zh) h4, .rsk-site:lang(zh) .rsk-font-display {
letter-spacing: 0;
}
.rsk-site:lang(zh) .rsk-text-display {
line-height: 1.25;
}
.rsk-site:lang(zh) .rsk-text-h1 {
line-height: 1.3;
}
.rsk-site:lang(zh) .rsk-text-h2, .rsk-site:lang(zh) .rsk-text-h3 {
line-height: 1.35;
}
.rsk-site:lang(zh) .rsk-text-body, .rsk-site:lang(zh) .rsk-text-body-lg,
.rsk-site:lang(zh) .rsk-text-body-sm {
line-height: 1.75;
}
.rsk-site:lang(zh) .rsk-text-label, .rsk-site:lang(zh) .rsk-text-nav,
.rsk-site:lang(zh) .rsk-text-button, .rsk-site:lang(zh) .rsk-text-meta {
letter-spacing: 0;
}
/* ------------------------------------------------------------------ *
* Self-hosted fonts (exact parity with next/font: Archivo + Inter, *
* Latin subset). woff2 files live in assets/fonts/ (../fonts from *
* the compiled CSS). No CJK webfont — Chinese falls through to the *
* system CJK UI font, tuned via the :lang(zh) block below. *
* ------------------------------------------------------------------ */
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/archivo-500.woff2") format("woff2");
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/archivo-600.woff2") format("woff2");
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/archivo-700.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/inter-700.woff2") format("woff2");
}
.rsk-pointer-events-none {
pointer-events: none;
}
.rsk-fixed {
position: fixed;
}
.rsk-absolute {
position: absolute;
}
.rsk-relative {
position: relative;
}
.rsk-sticky {
position: sticky;
}
.rsk-inset-0 {
inset: 0px;
}
.rsk-inset-x-0 {
left: 0px;
right: 0px;
}
.-rsk-bottom-0\.5 {
bottom: -0.125rem;
}
.-rsk-right-4 {
right: -1rem;
}
.-rsk-top-10 {
top: -2.5rem;
}
.-rsk-top-5 {
top: -1.25rem;
}
.rsk-bottom-0 {
bottom: 0px;
}
.rsk-bottom-1\.5 {
bottom: 0.375rem;
}
.rsk-bottom-3 {
bottom: 0.75rem;
}
.rsk-bottom-5 {
bottom: 1.25rem;
}
.rsk-left-0 {
left: 0px;
}
.rsk-left-1\/2 {
left: 50%;
}
.rsk-left-2 {
left: 0.5rem;
}
.rsk-right-0 {
right: 0px;
}
.rsk-right-3 {
right: 0.75rem;
}
.rsk-right-5 {
right: 1.25rem;
}
.rsk-top-0 {
top: 0px;
}
.rsk-top-6 {
top: 1.5rem;
}
.rsk-top-\[4\.75rem\] {
top: 4.75rem;
}
.rsk-top-\[calc\(100\%\+0\.5rem\)\] {
top: calc(100% + 0.5rem);
}
.rsk-z-10 {
z-index: 10;
}
.rsk-z-\[35\] {
z-index: 35;
}
.rsk-z-base {
z-index: 0;
}
.rsk-z-content {
z-index: 10;
}
.rsk-z-nav {
z-index: 50;
}
.rsk-z-overlay {
z-index: 40;
}
.rsk-order-1 {
order: 1;
}
.rsk-order-2 {
order: 2;
}
.rsk-col-span-2 {
grid-column: span 2 / span 2;
}
.rsk-col-span-5 {
grid-column: span 5 / span 5;
}
.rsk-col-span-7 {
grid-column: span 7 / span 7;
}
.rsk-mx-6 {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.rsk-mx-auto {
margin-left: auto;
margin-right: auto;
}
.rsk-my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.-rsk-mt-10 {
margin-top: -2.5rem;
}
.-rsk-mt-16 {
margin-top: -4rem;
}
.rsk-mb-10 {
margin-bottom: 2.5rem;
}
.rsk-mb-12 {
margin-bottom: 3rem;
}
.rsk-mb-16 {
margin-bottom: 4rem;
}
.rsk-mb-2 {
margin-bottom: 0.5rem;
}
.rsk-mb-3 {
margin-bottom: 0.75rem;
}
.rsk-mb-4 {
margin-bottom: 1rem;
}
.rsk-mb-6 {
margin-bottom: 1.5rem;
}
.rsk-mb-8 {
margin-bottom: 2rem;
}
.rsk-ml-6 {
margin-left: 1.5rem;
}
.rsk-ml-auto {
margin-left: auto;
}
.rsk-mt-0\.5 {
margin-top: 0.125rem;
}
.rsk-mt-1 {
margin-top: 0.25rem;
}
.rsk-mt-1\.5 {
margin-top: 0.375rem;
}
.rsk-mt-10 {
margin-top: 2.5rem;
}
.rsk-mt-12 {
margin-top: 3rem;
}
.rsk-mt-14 {
margin-top: 3.5rem;
}
.rsk-mt-16 {
margin-top: 4rem;
}
.rsk-mt-2 {
margin-top: 0.5rem;
}
.rsk-mt-2\.5 {
margin-top: 0.625rem;
}
.rsk-mt-20 {
margin-top: 5rem;
}
.rsk-mt-3 {
margin-top: 0.75rem;
}
.rsk-mt-4 {
margin-top: 1rem;
}
.rsk-mt-5 {
margin-top: 1.25rem;
}
.rsk-mt-6 {
margin-top: 1.5rem;
}
.rsk-mt-8 {
margin-top: 2rem;
}
.rsk-mt-9 {
margin-top: 2.25rem;
}
.rsk-mt-\[-2\.5rem\] {
margin-top: -2.5rem;
}
.rsk-mt-auto {
margin-top: auto;
}
.rsk-line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.rsk-line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.rsk-block {
display: block;
}
.rsk-inline-block {
display: inline-block;
}
.rsk-flex {
display: flex;
}
.rsk-inline-flex {
display: inline-flex;
}
.rsk-grid {
display: grid;
}
.rsk-hidden {
display: none;
}
.rsk-aspect-\[16\/10\] {
aspect-ratio: 16/10;
}
.rsk-aspect-\[16\/11\] {
aspect-ratio: 16/11;
}
.rsk-aspect-\[3\/2\] {
aspect-ratio: 3/2;
}
.rsk-aspect-\[4\/3\] {
aspect-ratio: 4/3;
}
.rsk-aspect-\[4\/5\] {
aspect-ratio: 4/5;
}
.rsk-aspect-square {
aspect-ratio: 1 / 1;
}
.rsk-h-1\.5 {
height: 0.375rem;
}
.rsk-h-1\/3 {
height: 33.333333%;
}
.rsk-h-10 {
height: 2.5rem;
}
.rsk-h-11 {
height: 2.75rem;
}
.rsk-h-12 {
height: 3rem;
}
.rsk-h-14 {
height: 3.5rem;
}
.rsk-h-16 {
height: 4rem;
}
.rsk-h-2\.5 {
height: 0.625rem;
}
.rsk-h-3 {
height: 0.75rem;
}
.rsk-h-3\.5 {
height: 0.875rem;
}
.rsk-h-4 {
height: 1rem;
}
.rsk-h-5 {
height: 1.25rem;
}
.rsk-h-6 {
height: 1.5rem;
}
.rsk-h-7 {
height: 1.75rem;
}
.rsk-h-8 {
height: 2rem;
}
.rsk-h-\[1\.15rem\] {
height: 1.15rem;
}
.rsk-h-\[18px\] {
height: 18px;
}
.rsk-h-\[19rem\] {
height: 19rem;
}
.rsk-h-\[380px\] {
height: 380px;
}
.rsk-h-\[3px\] {
height: 3px;
}
.rsk-h-\[4\.75rem\] {
height: 4.75rem;
}
.rsk-h-\[58vh\] {
height: 58vh;
}
.rsk-h-\[70vh\] {
height: 70vh;
}
.rsk-h-full {
height: 100%;
}
.rsk-h-px {
height: 1px;
}
.rsk-h-screen {
height: 100vh;
}
.rsk-max-h-\[80vh\] {
max-height: 80vh;
}
.rsk-min-h-\[420px\] {
min-height: 420px;
}
.rsk-min-h-\[440px\] {
min-height: 440px;
}
.rsk-min-h-\[520px\] {
min-height: 520px;
}
.rsk-min-h-\[60vh\] {
min-height: 60vh;
}
.rsk-min-h-\[62vh\] {
min-height: 62vh;
}
.rsk-min-h-\[70vh\] {
min-height: 70vh;
}
.rsk-min-h-\[72vh\] {
min-height: 72vh;
}
.rsk-min-h-screen {
min-height: 100vh;
}
.rsk-w-1\.5 {
width: 0.375rem;
}
.rsk-w-10 {
width: 2.5rem;
}
.rsk-w-11 {
width: 2.75rem;
}
.rsk-w-12 {
width: 3rem;
}
.rsk-w-14 {
width: 3.5rem;
}
.rsk-w-2\.5 {
width: 0.625rem;
}
.rsk-w-3 {
width: 0.75rem;
}
.rsk-w-3\.5 {
width: 0.875rem;
}
.rsk-w-4 {
width: 1rem;
}
.rsk-w-48 {
width: 12rem;
}
.rsk-w-5 {
width: 1.25rem;
}
.rsk-w-6 {
width: 1.5rem;
}
.rsk-w-7 {
width: 1.75rem;
}
.rsk-w-8 {
width: 2rem;
}
.rsk-w-80 {
width: 20rem;
}
.rsk-w-\[1\.15rem\] {
width: 1.15rem;
}
.rsk-w-\[18px\] {
width: 18px;
}
.rsk-w-\[3px\] {
width: 3px;
}
.rsk-w-\[46rem\] {
width: 46rem;
}
.rsk-w-\[92\%\] {
width: 92%;
}
.rsk-w-auto {
width: auto;
}
.rsk-w-fit {
width: -moz-fit-content;
width: fit-content;
}
.rsk-w-full {
width: 100%;
}
.rsk-w-max {
width: -moz-max-content;
width: max-content;
}
.rsk-w-px {
width: 1px;
}
.rsk-min-w-0 {
min-width: 0px;
}
.rsk-min-w-\[2rem\] {
min-width: 2rem;
}
.rsk-max-w-2xl {
max-width: 42rem;
}
.rsk-max-w-3xl {
max-width: 48rem;
}
.rsk-max-w-5xl {
max-width: 64rem;
}
.rsk-max-w-6xl {
max-width: 72rem;
}
.rsk-max-w-\[12rem\] {
max-width: 12rem;
}
.rsk-max-w-\[22rem\] {
max-width: 22rem;
}
.rsk-max-w-\[26rem\] {
max-width: 26rem;
}
.rsk-max-w-\[calc\(100vw-3rem\)\] {
max-width: calc(100vw - 3rem);
}
.rsk-max-w-container {
max-width: 1440px;
}
.rsk-max-w-content {
max-width: 46rem;
}
.rsk-max-w-lg {
max-width: 32rem;
}
.rsk-max-w-md {
max-width: 28rem;
}
.rsk-max-w-sm {
max-width: 24rem;
}
.rsk-max-w-xl {
max-width: 36rem;
}
.rsk-max-w-xs {
max-width: 20rem;
}
.rsk-flex-1 {
flex: 1 1 0%;
}
.rsk-shrink-0 {
flex-shrink: 0;
}
.rsk-origin-center {
transform-origin: center;
}
.-rsk-translate-x-1\/2 {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rsk-translate-y-1 {
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rsk-translate-y-2 {
--tw-translate-y: -0.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rsk-rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rsk-scale-\[1\.02\] {
--tw-scale-x: 1.02;
--tw-scale-y: 1.02;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rsk-scale-x-0 {
--tw-scale-x: 0;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rsk-scale-x-100 {
--tw-scale-x: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rsk-select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.rsk-resize-none {
resize: none;
}
.rsk-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.rsk-grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.rsk-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rsk-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rsk-flex-col {
flex-direction: column;
}
.rsk-flex-wrap {
flex-wrap: wrap;
}
.rsk-items-start {
align-items: flex-start;
}
.rsk-items-end {
align-items: flex-end;
}
.rsk-items-center {
align-items: center;
}
.rsk-items-baseline {
align-items: baseline;
}
.rsk-justify-start {
justify-content: flex-start;
}
.rsk-justify-end {
justify-content: flex-end;
}
.rsk-justify-center {
justify-content: center;
}
.rsk-justify-between {
justify-content: space-between;
}
.rsk-gap-0\.5 {
gap: 0.125rem;
}
.rsk-gap-1 {
gap: 0.25rem;
}
.rsk-gap-1\.5 {
gap: 0.375rem;
}
.rsk-gap-10 {
gap: 2.5rem;
}
.rsk-gap-14 {
gap: 3.5rem;
}
.rsk-gap-2 {
gap: 0.5rem;
}
.rsk-gap-2\.5 {
gap: 0.625rem;
}
.rsk-gap-24 {
gap: 6rem;
}
.rsk-gap-3 {
gap: 0.75rem;
}
.rsk-gap-3\.5 {
gap: 0.875rem;
}
.rsk-gap-4 {
gap: 1rem;
}
.rsk-gap-5 {
gap: 1.25rem;
}
.rsk-gap-6 {
gap: 1.5rem;
}
.rsk-gap-7 {
gap: 1.75rem;
}
.rsk-gap-8 {
gap: 2rem;
}
.rsk-gap-x-1 {
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
}
.rsk-gap-x-3 {
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.rsk-gap-x-6 {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
.rsk-gap-x-8 {
-moz-column-gap: 2rem;
column-gap: 2rem;
}
.rsk-gap-y-12 {
row-gap: 3rem;
}
.rsk-gap-y-14 {
row-gap: 3.5rem;
}
.rsk-gap-y-2 {
row-gap: 0.5rem;
}
.rsk-gap-y-3 {
row-gap: 0.75rem;
}
.rsk-gap-y-8 {
row-gap: 2rem;
}
.rsk-space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.rsk-overflow-hidden {
overflow: hidden;
}
.rsk-overflow-y-auto {
overflow-y: auto;
}
.rsk-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rsk-rounded {
border-radius: 2px;
}
.rsk-rounded-2xl {
border-radius: 1rem;
}
.rsk-rounded-\[22px\] {
border-radius: 22px;
}
.rsk-rounded-full {
border-radius: 9999px;
}
.rsk-rounded-lg {
border-radius: 8px;
}
.rsk-rounded-md {
border-radius: 4px;
}
.rsk-rounded-sm {
border-radius: 2px;
}
.rsk-rounded-b-3xl {
border-bottom-right-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
}
.rsk-rounded-br-md {
border-bottom-right-radius: 4px;
}
.rsk-border {
border-width: 1px;
}
.rsk-border-0 {
border-width: 0px;
}
.rsk-border-y {
border-top-width: 1px;
border-bottom-width: 1px;
}
.rsk-border-b {
border-bottom-width: 1px;
}
.rsk-border-l-2 {
border-left-width: 2px;
}
.rsk-border-l-4 {
border-left-width: 4px;
}
.rsk-border-r {
border-right-width: 1px;
}
.rsk-border-t {
border-top-width: 1px;
}
.rsk-border-t-0 {
border-top-width: 0px;
}
.rsk-border-black\/10 {
border-color: rgb(0 0 0 / 0.1);
}
.rsk-border-black\/15 {
border-color: rgb(0 0 0 / 0.15);
}
.rsk-border-black\/30 {
border-color: rgb(0 0 0 / 0.3);
}
.rsk-border-transparent {
border-color: transparent;
}
.rsk-border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.rsk-border-white\/10 {
border-color: rgb(255 255 255 / 0.1);
}
.rsk-border-white\/15 {
border-color: rgb(255 255 255 / 0.15);
}
.rsk-border-white\/20 {
border-color: rgb(255 255 255 / 0.2);
}
.rsk-border-white\/25 {
border-color: rgb(255 255 255 / 0.25);
}
.rsk-border-white\/30 {
border-color: rgb(255 255 255 / 0.3);
}
.rsk-border-white\/40 {
border-color: rgb(255 255 255 / 0.4);
}
.rsk-border-white\/5 {
border-color: rgb(255 255 255 / 0.05);
}
.rsk-border-l-gold {
--tw-border-opacity: 1;
border-left-color: rgb(214 168 79 / var(--tw-border-opacity));
}
.rsk-bg-\[\#F5F4F1\] {
--tw-bg-opacity: 1;
background-color: rgb(245 244 241 / var(--tw-bg-opacity));
}
.rsk-bg-\[rgba\(0\,0\,0\,0\.55\)\] {
background-color: rgba(0,0,0,0.55);
}
.rsk-bg-\[rgba\(0\,0\,0\,0\.6\)\] {
background-color: rgba(0,0,0,0.6);
}
.rsk-bg-\[rgba\(255\,255\,255\,0\.035\)\] {
background-color: rgba(255,255,255,0.035);
}
.rsk-bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.rsk-bg-black\/15 {
background-color: rgb(0 0 0 / 0.15);
}
.rsk-bg-black\/30 {
background-color: rgb(0 0 0 / 0.3);
}
.rsk-bg-black\/40 {
background-color: rgb(0 0 0 / 0.4);
}
.rsk-bg-black\/45 {
background-color: rgb(0 0 0 / 0.45);
}
.rsk-bg-black\/70 {
background-color: rgb(0 0 0 / 0.7);
}
.rsk-bg-black\/95 {
background-color: rgb(0 0 0 / 0.95);
}
.rsk-bg-current {
background-color: currentColor;
}
.rsk-bg-slate-100 {
--tw-bg-opacity: 1;
background-color: rgb(227 228 231 / var(--tw-bg-opacity));
}
.rsk-bg-slate-200 {
--tw-bg-opacity: 1;
background-color: rgb(199 200 206 / var(--tw-bg-opacity));
}
.rsk-bg-slate-700 {
--tw-bg-opacity: 1;
background-color: rgb(65 68 76 / var(--tw-bg-opacity));
}
.rsk-bg-slate-800 {
--tw-bg-opacity: 1;
background-color: rgb(44 46 51 / var(--tw-bg-opacity));
}
.rsk-bg-slate-900 {
--tw-bg-opacity: 1;
background-color: rgb(26 27 30 / var(--tw-bg-opacity));
}
.rsk-bg-transparent {
background-color: transparent;
}
.rsk-bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.rsk-bg-white\/10 {
background-color: rgb(255 255 255 / 0.1);
}
.rsk-bg-white\/15 {
background-color: rgb(255 255 255 / 0.15);
}
.rsk-bg-white\/5 {
background-color: rgb(255 255 255 / 0.05);
}
.rsk-bg-white\/50 {
background-color: rgb(255 255 255 / 0.5);
}
.rsk-bg-gradient-to-l {
background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.rsk-bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.rsk-bg-gradient-to-t {
background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.rsk-from-\[rgba\(0\,0\,0\,0\.88\)\] {
--tw-gradient-from: rgba(0,0,0,0.88) var(--tw-gradient-from-position);
--tw-gradient-to: rgba(0, 0, 0, 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.rsk-from-black\/35 {
--tw-gradient-from: rgb(0 0 0 / 0.35) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.rsk-from-black\/40 {
--tw-gradient-from: rgb(0 0 0 / 0.4) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.rsk-from-black\/50 {
--tw-gradient-from: rgb(0 0 0 / 0.5) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.rsk-from-black\/55 {
--tw-gradient-from: rgb(0 0 0 / 0.55) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.rsk-from-black\/60 {
--tw-gradient-from: rgb(0 0 0 / 0.6) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.rsk-from-black\/70 {
--tw-gradient-from: rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.rsk-from-black\/75 {
--tw-gradient-from: rgb(0 0 0 / 0.75) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.rsk-from-black\/80 {
--tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.rsk-from-black\/85 {
--tw-gradient-from: rgb(0 0 0 / 0.85) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.rsk-from-black\/90 {
--tw-gradient-from: rgb(0 0 0 / 0.9) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.rsk-via-black\/10 {
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.rsk-via-black\/15 {
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.15) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.rsk-via-black\/20 {
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.rsk-via-black\/25 {
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.25) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.rsk-via-black\/35 {
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.35) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.rsk-via-black\/50 {
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.rsk-via-black\/60 {
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.rsk-via-transparent {
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.rsk-to-black\/10 {
--tw-gradient-to: rgb(0 0 0 / 0.1) var(--tw-gradient-to-position);
}
.rsk-to-black\/20 {
--tw-gradient-to: rgb(0 0 0 / 0.2) var(--tw-gradient-to-position);
}
.rsk-to-black\/25 {
--tw-gradient-to: rgb(0 0 0 / 0.25) var(--tw-gradient-to-position);
}
.rsk-to-black\/35 {
--tw-gradient-to: rgb(0 0 0 / 0.35) var(--tw-gradient-to-position);
}
.rsk-to-black\/40 {
--tw-gradient-to: rgb(0 0 0 / 0.4) var(--tw-gradient-to-position);
}
.rsk-to-black\/50 {
--tw-gradient-to: rgb(0 0 0 / 0.5) var(--tw-gradient-to-position);
}
.rsk-to-transparent {
--tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.rsk-bg-cover {
background-size: cover;
}
.rsk-bg-center {
background-position: center;
}
.rsk-object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.rsk-object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.rsk-p-3 {
padding: 0.75rem;
}
.rsk-p-4 {
padding: 1rem;
}
.rsk-p-6 {
padding: 1.5rem;
}
.rsk-p-8 {
padding: 2rem;
}
.rsk-px-1\.5 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.rsk-px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.rsk-px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.rsk-px-3\.5 {
padding-left: 0.875rem;
padding-right: 0.875rem;
}
.rsk-px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.rsk-px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.rsk-px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.rsk-px-7 {
padding-left: 1.75rem;
padding-right: 1.75rem;
}
.rsk-px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.rsk-py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.rsk-py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.rsk-py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.rsk-py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.rsk-py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.rsk-py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.rsk-py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.rsk-py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.rsk-py-28 {
padding-top: 7rem;
padding-bottom: 7rem;
}
.rsk-py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.rsk-py-3\.5 {
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
.rsk-py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.rsk-py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.rsk-py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.rsk-py-7 {
padding-top: 1.75rem;
padding-bottom: 1.75rem;
}
.rsk-pb-10 {
padding-bottom: 2.5rem;
}
.rsk-pb-12 {
padding-bottom: 3rem;
}
.rsk-pb-14 {
padding-bottom: 3.5rem;
}
.rsk-pb-16 {
padding-bottom: 4rem;
}
.rsk-pb-2\.5 {
padding-bottom: 0.625rem;
}
.rsk-pb-20 {
padding-bottom: 5rem;
}
.rsk-pb-24 {
padding-bottom: 6rem;
}
.rsk-pb-28 {
padding-bottom: 7rem;
}
.rsk-pb-3 {
padding-bottom: 0.75rem;
}
.rsk-pb-5 {
padding-bottom: 1.25rem;
}
.rsk-pb-6 {
padding-bottom: 1.5rem;
}
.rsk-pb-8 {
padding-bottom: 2rem;
}
.rsk-pl-8 {
padding-left: 2rem;
}
.rsk-pt-1 {
padding-top: 0.25rem;
}
.rsk-pt-10 {
padding-top: 2.5rem;
}
.rsk-pt-12 {
padding-top: 3rem;
}
.rsk-pt-2 {
padding-top: 0.5rem;
}
.rsk-pt-24 {
padding-top: 6rem;
}
.rsk-pt-4 {
padding-top: 1rem;
}
.rsk-pt-5 {
padding-top: 1.25rem;
}
.rsk-pt-6 {
padding-top: 1.5rem;
}
.rsk-pt-8 {
padding-top: 2rem;
}
.rsk-text-left {
text-align: left;
}
.rsk-text-center {
text-align: center;
}
.rsk-text-right {
text-align: right;
}
.rsk-font-body {
font-family: var(--font-body);
}
.rsk-font-display {
font-family: var(--font-display);
}
.rsk-text-\[10px\] {
font-size: 10px;
}
.rsk-text-\[11px\] {
font-size: 11px;
}
.rsk-text-\[7rem\] {
font-size: 7rem;
}
.rsk-text-\[8rem\] {
font-size: 8rem;
}
.rsk-text-\[9px\] {
font-size: 9px;
}
.rsk-text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.rsk-text-body {
font-size: 1rem;
line-height: 1.6;
}
.rsk-text-body-lg {
font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
line-height: 1.55;
}
.rsk-text-body-sm {
font-size: 0.875rem;
line-height: 1.5;
}
.rsk-text-button {
font-size: 0.8125rem;
line-height: 1;
letter-spacing: 0.02em;
}
.rsk-text-display {
font-size: clamp(1.875rem, 1.55rem + 1.8vw, 3.5rem);
line-height: 1.12;
letter-spacing: -0.01em;
}
.rsk-text-h1 {
font-size: clamp(1.75rem, 1.45rem + 1.6vw, 3.25rem);
line-height: 1.12;
letter-spacing: -0.012em;
}
.rsk-text-h2 {
font-size: clamp(1.375rem, 1.2rem + 1vw, 2.25rem);
line-height: 1.18;
letter-spacing: -0.008em;
}
.rsk-text-h3 {
font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.5rem);
line-height: 1.28;
}
.rsk-text-label {
font-size: 0.75rem;
line-height: 1.4;
letter-spacing: 0.09em;
}
.rsk-text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.rsk-text-meta {
font-size: 0.75rem;
line-height: 1.4;
}
.rsk-text-nav {
font-size: 0.8125rem;
line-height: 1;
letter-spacing: 0.04em;
}
.rsk-text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.rsk-text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.rsk-font-black {
font-weight: 900;
}
.rsk-font-bold {
font-weight: 700;
}
.rsk-font-medium {
font-weight: 500;
}
.rsk-font-normal {
font-weight: 400;
}
.rsk-font-semibold {
font-weight: 600;
}
.rsk-uppercase {
text-transform: uppercase;
}
.rsk-capitalize {
text-transform: capitalize;
}
.rsk-italic {
font-style: italic;
}
.rsk-not-italic {
font-style: normal;
}
.rsk-tabular-nums {
--tw-numeric-spacing: tabular-nums;
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.rsk-leading-\[0\.95\] {
line-height: 0.95;
}
.rsk-leading-none {
line-height: 1;
}
.rsk-leading-relaxed {
line-height: 1.625;
}
.rsk-leading-snug {
line-height: 1.375;
}
.rsk-leading-tight {
line-height: 1.25;
}
.rsk-tracking-\[0\.045em\] {
letter-spacing: 0.045em;
}
.rsk-tracking-\[0\.04em\] {
letter-spacing: 0.04em;
}
.rsk-tracking-\[0\.06em\] {
letter-spacing: 0.06em;
}
.rsk-tracking-\[0\.08em\] {
letter-spacing: 0.08em;
}
.rsk-tracking-\[0\.09em\] {
letter-spacing: 0.09em;
}
.rsk-tracking-\[0\.14em\] {
letter-spacing: 0.14em;
}
.rsk-tracking-\[0\.16em\] {
letter-spacing: 0.16em;
}
.rsk-tracking-\[0\.1em\] {
letter-spacing: 0.1em;
}
.rsk-tracking-wide {
letter-spacing: 0.025em;
}
.rsk-text-\[rgba\(0\,0\,0\,0\.06\)\] {
color: rgba(0,0,0,0.06);
}
.rsk-text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.rsk-text-black\/90 {
color: rgb(0 0 0 / 0.9);
}
.rsk-text-gold\/80 {
color: rgb(214 168 79 / 0.8);
}
.rsk-text-slate-100 {
--tw-text-opacity: 1;
color: rgb(227 228 231 / var(--tw-text-opacity));
}
.rsk-text-slate-200 {
--tw-text-opacity: 1;
color: rgb(199 200 206 / var(--tw-text-opacity));
}
.rsk-text-slate-300 {
--tw-text-opacity: 1;
color: rgb(166 168 178 / var(--tw-text-opacity));
}
.rsk-text-slate-400 {
--tw-text-opacity: 1;
color: rgb(136 139 151 / var(--tw-text-opacity));
}
.rsk-text-slate-500 {
--tw-text-opacity: 1;
color: rgb(104 109 121 / var(--tw-text-opacity));
}
.rsk-text-slate-600 {
--tw-text-opacity: 1;
color: rgb(84 88 99 / var(--tw-text-opacity));
}
.rsk-text-slate-800 {
--tw-text-opacity: 1;
color: rgb(44 46 51 / var(--tw-text-opacity));
}
.rsk-text-slate-900 {
--tw-text-opacity: 1;
color: rgb(26 27 30 / var(--tw-text-opacity));
}
.rsk-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.rsk-text-white\/10 {
color: rgb(255 255 255 / 0.1);
}
.rsk-text-white\/60 {
color: rgb(255 255 255 / 0.6);
}
.rsk-text-white\/65 {
color: rgb(255 255 255 / 0.65);
}
.rsk-text-white\/70 {
color: rgb(255 255 255 / 0.7);
}
.rsk-text-white\/80 {
color: rgb(255 255 255 / 0.8);
}
.rsk-text-white\/90 {
color: rgb(255 255 255 / 0.9);
}
.rsk-text-white\/95 {
color: rgb(255 255 255 / 0.95);
}
.rsk-underline {
text-decoration-line: underline;
}
.rsk-decoration-black\/25 {
text-decoration-color: rgb(0 0 0 / 0.25);
}
.rsk-decoration-black\/30 {
text-decoration-color: rgb(0 0 0 / 0.3);
}
.rsk-decoration-white\/30 {
text-decoration-color: rgb(255 255 255 / 0.3);
}
.rsk-underline-offset-4 {
text-underline-offset: 4px;
}
.rsk-underline-offset-8 {
text-underline-offset: 8px;
}
.rsk-opacity-0 {
opacity: 0;
}
.rsk-opacity-\[0\.08\] {
opacity: 0.08;
}
.rsk-shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.rsk-shadow-soft {
--tw-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.55);
--tw-shadow-colored: 0 20px 60px -20px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.rsk-outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
.rsk-grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.rsk-backdrop-blur-2xl {
--tw-backdrop-blur: blur(40px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.rsk-backdrop-blur-md {
--tw-backdrop-blur: blur(12px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.rsk-backdrop-blur-xl {
--tw-backdrop-blur: blur(24px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.rsk-transition-\[background-color\,border-color\,backdrop-filter\,transform\] {
transition-property: background-color,border-color,backdrop-filter,transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.rsk-transition-\[color\,transform\,letter-spacing\] {
transition-property: color,transform,letter-spacing;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.rsk-transition-\[opacity\,transform\] {
transition-property: opacity,transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.rsk-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.rsk-transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.rsk-transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.rsk-transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.rsk-duration-base {
transition-duration: 300ms;
}
.rsk-duration-slow {
transition-duration: 600ms;
}
.rsk-ease-premium {
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
/*
Navbar scroll states — JS-toggled (rsk-motion.js), not Tailwind utilities,
since they're conditional on scroll position rather than a static class
set at render time. `!important`-free: placed after `@tailwind utilities`
so normal cascade order (not specificity tricks) makes these win once JS
adds the class, while the header still renders correctly with NEITHER
class present (Phase D's no-JS baseline — see navbar.php's default
transparent-gradient classes).
*/
.rsk-site header.rsk-scrolled {
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.rsk-site header.rsk-nav-hidden {
transform: translateY(-100%);
}
/* OfferPulse — the campaign page's giant offer figure "breathes" (soft
scale+opacity cycle), matching the Next.js OfferPulse component. Pure CSS
(no GSAP needed for a simple infinite loop) — automatically disabled by
the sitewide reduced-motion backstop below, since that rule targets
animation-duration on every element, this one included. */
@keyframes rsk-offer-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.03);
opacity: 0.96;
}
}
.rsk-site [data-rsk-pulse] {
animation: rsk-offer-pulse 2.8s ease-in-out infinite;
}
/* Client-requested "More From RSK" rail (blog article footer) — continuous
right-to-left scroll, pure CSS, same reasoning as OfferPulse above. The
track's real content is the same card set rendered twice back-to-back
(see rsk-route-blog_detail.php), so animating exactly -50% of its own
width loops with no visible seam. Paused on hover so a visitor can
actually read/click a card, and covered by the sitewide reduced-motion
backstop below like every other animation here. */
@keyframes rsk-marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.rsk-site [data-rsk-marquee-track] {
animation: rsk-marquee 32s linear infinite;
}
.rsk-site [data-rsk-marquee-rail]:hover [data-rsk-marquee-track] {
animation-play-state: paused;
}
/* ------------------------------------------------------------------ *
* Navbar/mobile-menu interaction states — JS-toggled classes driven by
* rsk-motion.js (initHoverMegaMenus/initMobileMenu), mirroring the exact
* open/closed visual states ServicesNavItem.tsx/PromoNavItem.tsx/
* MobileMenu.tsx express via React state + Tailwind conditional classes.
* ------------------------------------------------------------------ */
.rsk-site [data-rsk-mega-panel].rsk-open {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.rsk-site [data-rsk-mega-image].rsk-mega-image-active {
opacity: 1;
transform: scale(1);
}
.rsk-site #rsk-mobile-menu.rsk-open {
clip-path: inset(0% 0% 0% 0%) !important;
}
.rsk-site .rsk-mobile-subview.rsk-open {
opacity: 1;
pointer-events: auto;
z-index: 1;
}
.rsk-site [data-rsk-mobile-lang-panel].rsk-open {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.rsk-site #rsk-mobile-menu-toggle[aria-expanded="true"] [data-rsk-menu-icon] {
display: none;
}
.rsk-site #rsk-mobile-menu-toggle[aria-expanded="false"] [data-rsk-close-icon] {
display: none;
}
/* Reduced-motion backstop (scoped) — mirrors globals.css but confined to
the RSK frontend so it never alters the WP admin experience. */
@media (prefers-reduced-motion: reduce) {
.rsk-site *, .rsk-site *::before, .rsk-site *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (min-width: 420px) {
.rsk-site:lang(zh) .xs\:rsk-text-body-sm {
line-height: 1.75;
}
.rsk-site:lang(zh) .xs\:rsk-text-nav {
letter-spacing: 0;
}
.rsk-site:lang(zh) .xs\:rsk-text-meta {
letter-spacing: 0;
}
}
.last\:rsk-border-b-0:last-child {
border-bottom-width: 0px;
}
.hover\:-rsk-translate-y-0\.5:hover {
--tw-translate-y: -0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:-rsk-translate-y-1:hover {
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:-rsk-translate-y-px:hover {
--tw-translate-y: -1px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:rsk-border-white:hover {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.hover\:rsk-border-white\/25:hover {
border-color: rgb(255 255 255 / 0.25);
}
.hover\:rsk-border-white\/30:hover {
border-color: rgb(255 255 255 / 0.3);
}
.hover\:rsk-border-white\/50:hover {
border-color: rgb(255 255 255 / 0.5);
}
.hover\:rsk-border-white\/60:hover {
border-color: rgb(255 255 255 / 0.6);
}
.hover\:rsk-bg-\[rgba\(255\2c 255\2c 255\2c 0\.03\)\]:hover {
background-color: rgba(255,255,255,0.03);
}
.hover\:rsk-bg-black\/90:hover {
background-color: rgb(0 0 0 / 0.9);
}
.hover\:rsk-bg-slate-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(227 228 231 / var(--tw-bg-opacity));
}
.hover\:rsk-bg-slate-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(44 46 51 / var(--tw-bg-opacity));
}
.hover\:rsk-bg-white:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.hover\:rsk-bg-white\/5:hover {
background-color: rgb(255 255 255 / 0.05);
}
.hover\:rsk-tracking-\[0\.08em\]:hover {
letter-spacing: 0.08em;
}
.hover\:rsk-text-slate-300:hover {
--tw-text-opacity: 1;
color: rgb(166 168 178 / var(--tw-text-opacity));
}
.hover\:rsk-text-slate-600:hover {
--tw-text-opacity: 1;
color: rgb(84 88 99 / var(--tw-text-opacity));
}
.hover\:rsk-text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:rsk-decoration-black:hover {
text-decoration-color: #000000;
}
.hover\:rsk-decoration-gold:hover {
text-decoration-color: #D6A84F;
}
.hover\:rsk-decoration-white:hover {
text-decoration-color: #FFFFFF;
}
.hover\:rsk-shadow-lg:hover {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:rsk-border-white:focus {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.focus-visible\:-rsk-translate-y-px:focus-visible {
--tw-translate-y: -1px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.focus-visible\:rsk-tracking-\[0\.08em\]:focus-visible {
letter-spacing: 0.08em;
}
.focus-visible\:rsk-outline:focus-visible {
outline-style: solid;
}
.focus-visible\:rsk-outline-2:focus-visible {
outline-width: 2px;
}
.focus-visible\:rsk-outline-offset-2:focus-visible {
outline-offset: 2px;
}
.focus-visible\:rsk-outline-white:focus-visible {
outline-color: #FFFFFF;
}
.disabled\:rsk-cursor-not-allowed:disabled {
cursor: not-allowed;
}
.disabled\:rsk-opacity-40:disabled {
opacity: 0.4;
}
.rsk-group:hover .group-hover\:-rsk-translate-y-0\.5 {
--tw-translate-y: -0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rsk-group:hover .group-hover\:rsk-translate-x-0\.5 {
--tw-translate-x: 0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rsk-group:hover .group-hover\:rsk-translate-x-1 {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rsk-group:hover .group-hover\:rsk-scale-105 {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rsk-group:hover .group-hover\:rsk-scale-\[1\.04\] {
--tw-scale-x: 1.04;
--tw-scale-y: 1.04;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rsk-group:hover .group-hover\:rsk-scale-x-100 {
--tw-scale-x: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rsk-group:hover .group-hover\:rsk-border-black\/30 {
border-color: rgb(0 0 0 / 0.3);
}
.rsk-group:hover .group-hover\:rsk-text-slate-600 {
--tw-text-opacity: 1;
color: rgb(84 88 99 / var(--tw-text-opacity));
}
.rsk-group:hover .group-hover\:rsk-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.rsk-group:active .group-active\:rsk-scale-105 {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@media (prefers-reduced-motion: no-preference) {
@keyframes rsk-pulse {
50% {
opacity: .5;
}
}
.motion-safe\:rsk-animate-pulse {
animation: rsk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
}
@media (min-width: 420px) {
.xs\:rsk-mb-4 {
margin-bottom: 1rem;
}
.xs\:rsk-mt-10 {
margin-top: 2.5rem;
}
.xs\:rsk-mt-2 {
margin-top: 0.5rem;
}
.xs\:rsk-mt-4 {
margin-top: 1rem;
}
.xs\:rsk-h-20 {
height: 5rem;
}
.xs\:rsk-h-3 {
height: 0.75rem;
}
.xs\:rsk-h-9 {
height: 2.25rem;
}
.xs\:rsk-w-3 {
width: 0.75rem;
}
.xs\:rsk-flex-row {
flex-direction: row;
}
.xs\:rsk-gap-1 {
gap: 0.25rem;
}
.xs\:rsk-gap-2 {
gap: 0.5rem;
}
.xs\:rsk-gap-2\.5 {
gap: 0.625rem;
}
.xs\:rsk-gap-3 {
gap: 0.75rem;
}
.xs\:rsk-gap-4 {
gap: 1rem;
}
.xs\:rsk-gap-6 {
gap: 1.5rem;
}
.xs\:rsk-gap-x-5 {
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
}
.xs\:rsk-gap-y-10 {
row-gap: 2.5rem;
}
.xs\:rsk-px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.xs\:rsk-px-3\.5 {
padding-left: 0.875rem;
padding-right: 0.875rem;
}
.xs\:rsk-px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.xs\:rsk-px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.xs\:rsk-py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.xs\:rsk-pt-9 {
padding-top: 2.25rem;
}
.xs\:rsk-text-body-sm {
font-size: 0.875rem;
line-height: 1.5;
}
.xs\:rsk-text-meta {
font-size: 0.75rem;
line-height: 1.4;
}
.xs\:rsk-text-nav {
font-size: 0.8125rem;
line-height: 1;
letter-spacing: 0.04em;
}
.xs\:rsk-tracking-\[0\.08em\] {
letter-spacing: 0.08em;
}
}
@media (min-width: 640px) {
.sm\:rsk-col-span-1 {
grid-column: span 1 / span 1;
}
.sm\:rsk-col-span-2 {
grid-column: span 2 / span 2;
}
.sm\:rsk-mt-12 {
margin-top: 3rem;
}
.sm\:rsk-mt-5 {
margin-top: 1.25rem;
}
.sm\:rsk-block {
display: block;
}
.sm\:rsk-aspect-\[16\/10\] {
aspect-ratio: 16/10;
}
.sm\:rsk-aspect-\[16\/9\] {
aspect-ratio: 16/9;
}
.sm\:rsk-h-10 {
height: 2.5rem;
}
.sm\:rsk-h-24 {
height: 6rem;
}
.sm\:rsk-h-\[460px\] {
height: 460px;
}
.sm\:rsk-w-96 {
width: 24rem;
}
.sm\:rsk-max-w-none {
max-width: none;
}
.sm\:rsk-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:rsk-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sm\:rsk-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.sm\:rsk-flex-row {
flex-direction: row;
}
.sm\:rsk-items-center {
align-items: center;
}
.sm\:rsk-justify-between {
justify-content: space-between;
}
.sm\:rsk-gap-3\.5 {
gap: 0.875rem;
}
.sm\:rsk-gap-5 {
gap: 1.25rem;
}
.sm\:rsk-gap-x-6 {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
.sm\:rsk-gap-y-12 {
row-gap: 3rem;
}
.sm\:rsk-px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.sm\:rsk-px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.sm\:rsk-py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.sm\:rsk-pt-10 {
padding-top: 2.5rem;
}
.sm\:rsk-text-left {
text-align: left;
}
}
@media (min-width: 768px) {
.md\:rsk-bottom-8 {
bottom: 2rem;
}
.md\:rsk-right-8 {
right: 2rem;
}
.md\:rsk-mx-0 {
margin-left: 0px;
margin-right: 0px;
}
.md\:-rsk-mt-20 {
margin-top: -5rem;
}
.md\:rsk-ml-0 {
margin-left: 0px;
}
.md\:rsk-mt-14 {
margin-top: 3.5rem;
}
.md\:rsk-hidden {
display: none;
}
.md\:rsk-h-28 {
height: 7rem;
}
.md\:rsk-w-56 {
width: 14rem;
}
.md\:rsk-w-\[85\%\] {
width: 85%;
}
.md\:rsk-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.md\:rsk-gap-32 {
gap: 8rem;
}
.md\:rsk-gap-x-8 {
-moz-column-gap: 2rem;
column-gap: 2rem;
}
.md\:rsk-p-10 {
padding: 2.5rem;
}
.md\:rsk-p-8 {
padding: 2rem;
}
.md\:rsk-px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.md\:rsk-px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.md\:rsk-px-14 {
padding-left: 3.5rem;
padding-right: 3.5rem;
}
.md\:rsk-px-9 {
padding-left: 2.25rem;
padding-right: 2.25rem;
}
.md\:rsk-py-14 {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.md\:rsk-py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.md\:rsk-py-28 {
padding-top: 7rem;
padding-bottom: 7rem;
}
.md\:rsk-py-32 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.md\:rsk-py-36 {
padding-top: 9rem;
padding-bottom: 9rem;
}
.md\:rsk-py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.md\:rsk-pb-10 {
padding-bottom: 2.5rem;
}
.md\:rsk-pb-14 {
padding-bottom: 3.5rem;
}
.md\:rsk-pb-32 {
padding-bottom: 8rem;
}
.md\:rsk-pb-36 {
padding-bottom: 9rem;
}
.md\:rsk-pt-12 {
padding-top: 3rem;
}
.md\:rsk-pt-32 {
padding-top: 8rem;
}
}
@media (min-width: 1024px) {
.lg\:rsk-absolute {
position: absolute;
}
.lg\:rsk-bottom-10 {
bottom: 2.5rem;
}
.lg\:rsk-left-0 {
left: 0px;
}
.lg\:rsk-order-1 {
order: 1;
}
.lg\:rsk-order-2 {
order: 2;
}
.lg\:rsk-col-span-1 {
grid-column: span 1 / span 1;
}
.lg\:rsk-col-span-4 {
grid-column: span 4 / span 4;
}
.lg\:rsk-col-span-5 {
grid-column: span 5 / span 5;
}
.lg\:rsk-col-span-6 {
grid-column: span 6 / span 6;
}
.lg\:rsk-col-span-7 {
grid-column: span 7 / span 7;
}
.lg\:rsk-col-span-8 {
grid-column: span 8 / span 8;
}
.lg\:rsk-col-start-1 {
grid-column-start: 1;
}
.lg\:rsk-col-start-6 {
grid-column-start: 6;
}
.lg\:rsk-col-start-7 {
grid-column-start: 7;
}
.lg\:rsk-col-start-9 {
grid-column-start: 9;
}
.lg\:rsk-row-start-1 {
grid-row-start: 1;
}
.lg\:rsk-ml-10 {
margin-left: 2.5rem;
}
.lg\:rsk-ml-16 {
margin-left: 4rem;
}
.lg\:rsk-ml-32 {
margin-left: 8rem;
}
.lg\:rsk-ml-auto {
margin-left: auto;
}
.lg\:rsk-mt-0 {
margin-top: 0px;
}
.lg\:rsk-mt-16 {
margin-top: 4rem;
}
.lg\:rsk-mt-20 {
margin-top: 5rem;
}
.lg\:rsk-mt-24 {
margin-top: 6rem;
}
.lg\:rsk-mt-\[-3\.5rem\] {
margin-top: -3.5rem;
}
.lg\:rsk-block {
display: block;
}
.lg\:rsk-flex {
display: flex;
}
.lg\:rsk-hidden {
display: none;
}
.lg\:rsk-aspect-\[21\/11\] {
aspect-ratio: 21/11;
}
.lg\:rsk-aspect-\[21\/9\] {
aspect-ratio: 21/9;
}
.lg\:rsk-aspect-\[3\/4\] {
aspect-ratio: 3/4;
}
.lg\:rsk-aspect-\[4\/5\] {
aspect-ratio: 4/5;
}
.lg\:rsk-h-\[13rem\] {
height: 13rem;
}
.lg\:rsk-h-\[3\.125rem\] {
height: 3.125rem;
}
.lg\:rsk-h-\[600px\] {
height: 600px;
}
.lg\:rsk-w-\[78\%\] {
width: 78%;
}
.lg\:rsk-w-\[88\%\] {
width: 88%;
}
.lg\:rsk-w-fit {
width: -moz-fit-content;
width: fit-content;
}
.lg\:rsk-w-max {
width: -moz-max-content;
width: max-content;
}
.lg\:rsk-max-w-\[15rem\] {
max-width: 15rem;
}
.lg\:rsk-max-w-sm {
max-width: 24rem;
}
.lg\:rsk-flex-1 {
flex: 1 1 0%;
}
.lg\:rsk-shrink-0 {
flex-shrink: 0;
}
.lg\:rsk-grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.lg\:rsk-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:rsk-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:rsk-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.lg\:rsk-grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.lg\:rsk-flex-row {
flex-direction: row;
}
.lg\:rsk-flex-row-reverse {
flex-direction: row-reverse;
}
.lg\:rsk-items-start {
align-items: flex-start;
}
.lg\:rsk-items-end {
align-items: flex-end;
}
.lg\:rsk-justify-end {
justify-content: flex-end;
}
.lg\:rsk-justify-between {
justify-content: space-between;
}
.lg\:rsk-gap-10 {
gap: 2.5rem;
}
.lg\:rsk-gap-40 {
gap: 10rem;
}
.lg\:rsk-gap-7 {
gap: 1.75rem;
}
.lg\:rsk-gap-8 {
gap: 2rem;
}
.lg\:rsk-gap-x-12 {
-moz-column-gap: 3rem;
column-gap: 3rem;
}
.lg\:rsk-gap-x-8 {
-moz-column-gap: 2rem;
column-gap: 2rem;
}
.lg\:rsk-gap-y-0 {
row-gap: 0px;
}
.lg\:rsk-border {
border-width: 1px;
}
.lg\:rsk-border-white\/10 {
border-color: rgb(255 255 255 / 0.1);
}
.lg\:rsk-px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.lg\:rsk-px-16 {
padding-left: 4rem;
padding-right: 4rem;
}
.lg\:rsk-px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.lg\:rsk-py-40 {
padding-top: 10rem;
padding-bottom: 10rem;
}
.lg\:rsk-py-44 {
padding-top: 11rem;
padding-bottom: 11rem;
}
.lg\:rsk-pb-12 {
padding-bottom: 3rem;
}
.lg\:rsk-pb-20 {
padding-bottom: 5rem;
}
.lg\:rsk-pb-24 {
padding-bottom: 6rem;
}
.lg\:rsk-pb-28 {
padding-bottom: 7rem;
}
.lg\:rsk-pb-44 {
padding-bottom: 11rem;
}
.lg\:rsk-pl-4 {
padding-left: 1rem;
}
.lg\:rsk-pt-14 {
padding-top: 3.5rem;
}
.lg\:rsk-pt-40 {
padding-top: 10rem;
}
.lg\:rsk-text-right {
text-align: right;
}
.lg\:rsk-text-\[11rem\] {
font-size: 11rem;
}
.lg\:rsk-text-\[13rem\] {
font-size: 13rem;
}
}
@media (min-width: 1280px) {
.xl\:rsk-gap-x-20 {
-moz-column-gap: 5rem;
column-gap: 5rem;
}
.xl\:rsk-px-16 {
padding-left: 4rem;
padding-right: 4rem;
}
.xl\:rsk-pt-20 {
padding-top: 5rem;
}
}