/* ==========================================================================
RANKRIX WIDGETS — PLUGIN CSS v2.0.0
Single source of truth. No external WPCode utility snippet needed.
ARCHITECTURE:
§1 Tokens (CSS variables)
§2 Body background system (body::before, body::after, html::after, glow)
§3 Z-index hierarchy for theme containers
§4 Utility classes — .rkx-u-* (usable globally in raw HTML)
§5 Form primitives — .rkx-f-* (usable globally in raw HTML)
§6 Base widget shell .rkx-w
§7+ Individual widget styles
RESERVED NAMESPACES — do not reuse these prefixes for other purposes:
.rkx-u-* utility classes
.rkx-f-* form primitives
.rkx-w-* widget internals
.rkx-foot-* footer
.rkx-drawer-* mobile menu drawer
.rkx-acc-* accordion
.rkx-book-* booking popup plugin (separate plugin)
========================================================================== */
/* ============================================================
§1 — TOKENS
============================================================ */
:root {
/* Backgrounds (widget-internal) */
--rkx-bg: rgba(0,0,0,0.58);
--rkx-bg-menu: rgba(0,0,0,0.52);
--rkx-surface: rgba(255,255,255,0.04);
--rkx-surface-2: rgba(255,255,255,0.06);
--rkx-border: rgba(255,255,255,0.10);
--rkx-border-2: rgba(255,255,255,0.18);
/* Text */
--rkx-text: #ffffff;
--rkx-muted: rgba(255,255,255,0.78);
--rkx-dim: rgba(255,255,255,0.45);
--rkx-faint: rgba(255,255,255,0.18);
/* Brand */
--rkx-accent: #1D24CA;
--rkx-accent-h: #2d35e0;
--rkx-accent-bright: #a5acff;
--rkx-accent-glow: rgba(29,36,202,0.45);
--rkx-accent-b: rgba(29,36,202,0.55);
--rkx-accent-soft: rgba(29,36,202,0.18);
--rkx-accent-text: #818cf8;
/* Semantic */
--rkx-green: #22c55e;
--rkx-green-glow: rgba(34,197,94,0.5);
--rkx-amber: #fbbf24;
--rkx-amber-glow: rgba(251,191,36,0.4);
--rkx-red: #ef4444;
--rkx-red-glow: rgba(239,68,68,0.4);
/* Geometry + type */
--rkx-radius: 1px;
--rkx-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--rkx-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
--rkx-ease: cubic-bezier(0.4,0,0.2,1);
--rkx-fast: 160ms;
--rkx-med: 280ms;
--rkx-slow: 500ms;
}
/* ============================================================
§2 — BODY BACKGROUND SYSTEM
Fixed-position layered backgrounds that fill the viewport.
============================================================ */
body {
background: transparent !important;
color: #ffffff !important;
font-family: var(--rkx-font) !important;
position: relative;
overflow-x: hidden;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background: #030308;
pointer-events: none;
}
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(15px) saturate(1.5);
-webkit-backdrop-filter: blur(15px) saturate(1.5);
}
.rkx-body-glow {
position: fixed;
top: -200px;
right: -200px;
width: 700px;
height: 700px;
z-index: 1;
pointer-events: none;
background: radial-gradient(circle,
rgba(29, 36, 202, 0.45) 0%,
rgba(29, 36, 202, 0.18) 35%,
transparent 70%);
filter: blur(60px);
-webkit-filter: blur(60px);
}
html::after {
content: "";
position: fixed;
inset: 0;
z-index: 10;
pointer-events: none;
border: 1px solid rgba(29, 36, 202, 0.55);
border-radius: 1px;
box-shadow:
inset 0 0 0 1px rgba(29, 36, 202, 0.18),
inset 0 24px 60px -10px rgba(29, 36, 202, 0.25);
}
/* ============================================================
§3 — Z-INDEX HIERARCHY (theme containers above background)
============================================================ */
.site, .site-container, .ct-container, .ct-main-content,
.ct-site-header, .ct-site-footer, #page,
.elementor, main, article,
.elementor-section, .elementor-container,
.elementor-element, .elementor-widget-wrap {
position: relative;
z-index: 2;
}
/* ============================================================
§4 — UTILITY CLASSES (.rkx-u-*)
Usable globally in raw HTML / Custom HTML blocks.
============================================================ */
/* ---- Headings ---- */
body .rkx-u-h1, body .rkx-u-h2, body .rkx-u-h3,
body .rkx-u-h4, body .rkx-u-h5, body .rkx-u-h6,
body h1.rkx-u-h1, body h2.rkx-u-h2, body h3.rkx-u-h3,
body h4.rkx-u-h4, body h5.rkx-u-h5, body h6.rkx-u-h6 {
font-family: var(--rkx-font) !important;
font-weight: 800 !important;
color: var(--rkx-text) !important;
margin: 0 0 16px !important;
letter-spacing: -0.03em !important;
line-height: 1.12 !important;
text-transform: none !important;
font-style: normal !important;
font-feature-settings: "ss01" 1, "cv11" 1 !important;
}
body .rkx-u-h1 {
font-size: clamp(28px, 5vw, 72px) !important;
letter-spacing: -0.04em !important;
line-height: 1.04 !important;
margin-bottom: clamp(14px, 1.5vw, 22px) !important;
}
body .rkx-u-h2 {
font-size: clamp(22px, 3.2vw, 46px) !important;
letter-spacing: -0.035em !important;
line-height: 1.12 !important;
margin-bottom: clamp(10px, 1.2vw, 16px) !important;
}
body .rkx-u-h3 {
font-size: clamp(16px, 1.7vw, 24px) !important;
font-weight: 700 !important;
letter-spacing: -0.022em !important;
line-height: 1.28 !important;
}
body .rkx-u-h4 {
font-size: clamp(15px, 1.3vw, 18px) !important;
font-weight: 700 !important;
line-height: 1.32 !important;
}
body .rkx-u-h5 {
font-size: clamp(13px, 1.1vw, 15px) !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
body .rkx-u-h6 {
font-size: clamp(11px, 0.9vw, 13px) !important;
font-weight: 600 !important;
line-height: 1.4 !important;
}
body .rkx-u-h1 .rkx-u-accent-text,
body .rkx-u-h2 .rkx-u-accent-text,
body .rkx-u-h3 .rkx-u-accent-text {
background: linear-gradient(135deg, var(--rkx-accent-bright) 0%, #fff 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
color: transparent !important;
}
/* ---- Body text ---- */
body .rkx-u-lead, body p.rkx-u-lead {
font-family: var(--rkx-font) !important;
font-size: clamp(14px, 1.2vw, 18px) !important;
line-height: 1.65 !important;
color: var(--rkx-muted) !important;
margin: 0 0 clamp(16px, 1.6vw, 24px) !important;
max-width: 600px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
}
body .rkx-u-body {
font-family: var(--rkx-font) !important;
font-size: clamp(14px, 1vw, 16px) !important;
line-height: 1.7 !important;
color: var(--rkx-muted) !important;
margin: 0 0 14px !important;
font-weight: 500 !important;
}
body .rkx-u-small {
font-family: var(--rkx-font) !important;
font-size: clamp(11.5px, 0.9vw, 13px) !important;
line-height: 1.5 !important;
color: var(--rkx-dim) !important;
font-weight: 500 !important;
}
body .rkx-u-mono {
font-family: var(--rkx-mono) !important;
}
/* ---- Eyebrow ---- */
body .rkx-u-eyebrow {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
font-family: var(--rkx-mono) !important;
font-size: clamp(10px, 0.85vw, 12px) !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--rkx-accent-bright) !important;
margin-bottom: clamp(14px, 1.4vw, 20px) !important;
}
body .rkx-u-eyebrow::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--rkx-accent-bright);
box-shadow: 0 0 8px var(--rkx-accent-glow);
animation: rkxUtilPulse 2.4s var(--rkx-ease) infinite;
}
body .rkx-u-eyebrow--plain::before { animation: none !important; }
body .rkx-u-eyebrow--no-dot::before { display: none !important; }
body .rkx-u-eyebrow--muted { color: var(--rkx-muted) !important; }
body .rkx-u-eyebrow--muted::before { background: var(--rkx-muted); box-shadow: none; }
@keyframes rkxUtilPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
/* ---- Badge ---- */
body .rkx-u-badge {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 3px 8px !important;
background: var(--rkx-accent-soft) !important;
border: 1px solid var(--rkx-accent-b) !important;
border-radius: var(--rkx-radius) !important;
font-family: var(--rkx-mono) !important;
font-size: clamp(9px, 0.75vw, 11px) !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--rkx-accent-bright) !important;
line-height: 1 !important;
}
body .rkx-u-badge--green { background: rgba(34, 197, 94, 0.15) !important; border-color: rgba(34, 197, 94, 0.45) !important; color: var(--rkx-green) !important; }
body .rkx-u-badge--amber { background: rgba(251, 191, 36, 0.15) !important; border-color: rgba(251, 191, 36, 0.45) !important; color: var(--rkx-amber) !important; }
body .rkx-u-badge--red { background: rgba(239, 68, 68, 0.15) !important; border-color: rgba(239, 68, 68, 0.45) !important; color: var(--rkx-red) !important; }
body .rkx-u-badge--ghost { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: var(--rkx-muted) !important; }
body .rkx-u-badge--lg { padding: 5px 12px !important; font-size: clamp(10.5px, 0.9vw, 12.5px) !important; letter-spacing: 0.12em !important; }
body .rkx-u-badge--live::before {
content: ''; width: 5px; height: 5px; border-radius: 50%;
background: var(--rkx-green); box-shadow: 0 0 6px var(--rkx-green-glow);
animation: rkxUtilPulse 2s var(--rkx-ease) infinite;
}
/* ---- Buttons ---- */
body .rkx-u-btn, body a.rkx-u-btn, body button.rkx-u-btn,
body input[type="submit"].rkx-u-btn {
position: relative !important;
overflow: hidden !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
height: 30px !important;
padding: 0 14px !important;
font-family: var(--rkx-font) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: -0.003em !important;
text-decoration: none !important;
text-transform: none !important;
border-radius: var(--rkx-radius) !important;
cursor: pointer !important;
white-space: nowrap !important;
color: #fff !important;
line-height: 1 !important;
background: rgba(29, 36, 202, 0.22) !important;
border: 1px solid rgba(29, 36, 202, 0.55) !important;
backdrop-filter: blur(8px) saturate(1.4);
-webkit-backdrop-filter: blur(8px) saturate(1.4);
transition: background 320ms var(--rkx-ease),
border-color 320ms var(--rkx-ease),
box-shadow 320ms var(--rkx-ease),
gap var(--rkx-fast) var(--rkx-ease),
transform var(--rkx-fast) var(--rkx-ease) !important;
}
body .rkx-u-btn::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: -120% !important;
width: 60% !important; height: 100% !important;
background: linear-gradient(115deg, transparent 0%, transparent 30%,
rgba(255, 255, 255, 0.35) 50%, transparent 70%, transparent 100%) !important;
transform: skewX(-18deg) !important;
pointer-events: none !important;
z-index: 1 !important;
transition: left 900ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body .rkx-u-btn:hover {
background: var(--rkx-accent) !important;
border-color: var(--rkx-accent) !important;
box-shadow: 0 0 22px var(--rkx-accent-glow),
0 3px 14px rgba(29, 36, 202, 0.32) !important;
gap: 9px !important;
transform: translateY(-1px) !important;
}
body .rkx-u-btn:hover::before { left: 120% !important; }
body .rkx-u-btn > * { position: relative !important; z-index: 2 !important; }
body .rkx-u-btn--ghost { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.18) !important; }
body .rkx-u-btn--solid { background: var(--rkx-accent) !important; border-color: var(--rkx-accent) !important; }
body .rkx-u-btn--sm { height: 26px !important; padding: 0 11px !important; font-size: 11px !important; gap: 4px !important; }
body .rkx-u-btn--lg { height: 38px !important; padding: 0 18px !important; font-size: 13px !important; gap: 7px !important; }
/* ---- Inline CTA link ---- */
body .rkx-u-cta-link {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-family: var(--rkx-font) !important;
font-size: clamp(12px, 1vw, 14px) !important;
font-weight: 700 !important;
color: var(--rkx-accent-bright) !important;
text-decoration: none !important;
transition: gap var(--rkx-fast) var(--rkx-ease),
color var(--rkx-fast) var(--rkx-ease) !important;
}
body .rkx-u-cta-link:hover { gap: 10px !important; color: #fff !important; }
/* ---- Tag ---- */
body .rkx-u-tag {
display: inline-block !important;
padding: 4px 8px !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: var(--rkx-radius) !important;
font-family: var(--rkx-mono) !important;
font-size: clamp(10px, 0.85vw, 12px) !important;
letter-spacing: 0.04em !important;
color: var(--rkx-dim) !important;
line-height: 1.2 !important;
font-weight: 500 !important;
}
body .rkx-u-tag--accent {
background: var(--rkx-accent-soft) !important;
border-color: var(--rkx-accent-b) !important;
color: var(--rkx-accent-bright) !important;
}
/* ---- Divider ---- */
body .rkx-u-divider {
height: 1px !important;
background: rgba(255, 255, 255, 0.10) !important;
margin: clamp(24px, 3vw, 32px) 0 !important;
border: 0 !important;
width: 100% !important;
}
body .rkx-u-divider--accent {
background: linear-gradient(90deg,
transparent 0%, var(--rkx-accent-b) 20%,
var(--rkx-accent-b) 80%, transparent 100%) !important;
}
/* ---- Color utilities ---- */
body .rkx-u-text-accent { color: var(--rkx-accent-bright) !important; }
body .rkx-u-text-muted { color: var(--rkx-muted) !important; }
body .rkx-u-text-dim { color: var(--rkx-dim) !important; }
body .rkx-u-text-white { color: #fff !important; }
body .rkx-u-text-green { color: var(--rkx-green) !important; }
body .rkx-u-text-amber { color: var(--rkx-amber) !important; }
body .rkx-u-text-red { color: var(--rkx-red) !important; }
/* ---- Spacing utilities ---- */
body .rkx-u-mt-0 { margin-top: 0 !important; }
body .rkx-u-mt-2 { margin-top: 8px !important; }
body .rkx-u-mt-4 { margin-top: 16px !important; }
body .rkx-u-mt-6 { margin-top: 24px !important; }
body .rkx-u-mt-8 { margin-top: 32px !important; }
body .rkx-u-mt-12 { margin-top: 48px !important; }
body .rkx-u-mb-0 { margin-bottom: 0 !important; }
body .rkx-u-mb-2 { margin-bottom: 8px !important; }
body .rkx-u-mb-4 { margin-bottom: 16px !important; }
body .rkx-u-mb-6 { margin-bottom: 24px !important; }
body .rkx-u-mb-8 { margin-bottom: 32px !important; }
body .rkx-u-mb-12 { margin-bottom: 48px !important; }
/* ============================================================
§5 — FORM PRIMITIVES (.rkx-f-*)
============================================================ */
/* Field wrapper */
body .rkx-f-field {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
margin-bottom: 18px !important;
width: 100% !important;
}
/* Label — Geist Mono uppercase in accent color */
body .rkx-f-label {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-family: var(--rkx-mono) !important;
font-size: 11.5px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
color: var(--rkx-accent-bright) !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
margin: 0 !important;
}
body .rkx-f-label[data-required="true"]::after {
content: ' *' !important;
color: var(--rkx-red) !important;
font-weight: 700 !important;
}
body .rkx-f-optional {
font-family: var(--rkx-mono) !important;
font-size: 9.5px !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--rkx-dim) !important;
margin-left: auto !important;
}
/* Input + Textarea base */
body .rkx-f-input,
body input.rkx-f-input,
body .rkx-f-textarea,
body textarea.rkx-f-textarea {
appearance: none !important;
-webkit-appearance: none !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
font-family: var(--rkx-font) !important;
font-size: 13.5px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
color: var(--rkx-text) !important;
background: rgba(0, 0, 0, 0.35) !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: var(--rkx-radius) !important;
outline: none !important;
box-shadow: none !important;
transition: border-color 240ms var(--rkx-ease),
background-color 240ms var(--rkx-ease),
box-shadow 240ms var(--rkx-ease) !important;
}
body .rkx-f-input { height: 38px !important; padding: 0 12px !important; line-height: 1.2 !important; }
body .rkx-f-textarea { min-height: 96px !important; padding: 11px 12px !important; line-height: 1.55 !important; resize: vertical !important; }
body .rkx-f-input::placeholder,
body .rkx-f-textarea::placeholder {
color: var(--rkx-dim) !important;
opacity: 1 !important;
font-weight: 500 !important;
}
body .rkx-f-input:hover:not(:disabled):not(.rkx-f-invalid):not(:focus),
body .rkx-f-textarea:hover:not(:disabled):not(.rkx-f-invalid):not(:focus) {
border-color: rgba(255, 255, 255, 0.22) !important;
background-color: rgba(0, 0, 0, 0.45) !important;
}
/* Focus — deep blue, prominent triple-shadow glow */
body .rkx-f-input:focus,
body .rkx-f-input:focus-visible,
body .rkx-f-textarea:focus,
body .rkx-f-textarea:focus-visible {
border-color: var(--rkx-accent) !important;
background-color: rgba(0, 0, 0, 0.5) !important;
box-shadow: 0 0 0 4px rgba(29, 36, 202, 0.35),
0 0 24px rgba(29, 36, 202, 0.55),
0 0 48px rgba(29, 36, 202, 0.25) !important;
}
/* Disabled */
body .rkx-f-input:disabled,
body .rkx-f-textarea:disabled {
opacity: 0.45 !important;
cursor: not-allowed !important;
background-color: rgba(0, 0, 0, 0.2) !important;
border-color: rgba(255, 255, 255, 0.06) !important;
}
/* Size variants */
body .rkx-f-input--sm { height: 32px !important; font-size: 12.5px !important; padding: 0 10px !important; }
body .rkx-f-input--lg { height: 46px !important; font-size: 14.5px !important; padding: 0 14px !important; }
/* Invalid */
body .rkx-f-input.rkx-f-invalid,
body .rkx-f-textarea.rkx-f-invalid {
border-color: var(--rkx-red) !important;
background-color: rgba(239, 68, 68, 0.06) !important;
}
body .rkx-f-input.rkx-f-invalid:focus,
body .rkx-f-textarea.rkx-f-invalid:focus {
border-color: var(--rkx-red) !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18),
0 0 16px rgba(239, 68, 68, 0.25) !important;
}
/* Inline error message */
body .rkx-f-error {
display: flex !important;
align-items: flex-start !important;
gap: 6px !important;
font-family: var(--rkx-font) !important;
font-size: 12px !important;
line-height: 1.4 !important;
font-weight: 500 !important;
color: var(--rkx-red) !important;
margin: 4px 0 0 !important;
letter-spacing: -0.003em !important;
}
body .rkx-f-error::before {
content: '' !important;
flex-shrink: 0 !important;
width: 14px !important;
height: 14px !important;
margin-top: 1px !important;
background: var(--rkx-red) !important;
-webkit-mask-image: url("data:image/svg+xml;utf8,") !important;
mask-image: url("data:image/svg+xml;utf8,") !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
}
/* Helper text */
body .rkx-f-helper {
font-family: var(--rkx-font) !important;
font-size: 12px !important;
line-height: 1.4 !important;
font-weight: 500 !important;
color: var(--rkx-dim) !important;
margin: 4px 0 0 !important;
letter-spacing: -0.003em !important;
}
/* iOS zoom prevention + mobile tap targets */
@media (max-width: 768px) {
body .rkx-f-input,
body .rkx-f-textarea {
font-size: 16px !important;
}
body .rkx-f-input { height: 42px !important; padding: 0 13px !important; }
body .rkx-f-input--sm { height: 36px !important; font-size: 14px !important; }
body .rkx-f-input--lg { height: 50px !important; }
body .rkx-f-textarea { min-height: 110px !important; padding: 12px 13px !important; }
}
@media (prefers-reduced-motion: reduce) {
body .rkx-f-input,
body .rkx-f-textarea,
body .rkx-u-btn,
body .rkx-u-cta-link,
body .rkx-u-eyebrow::before,
body .rkx-u-badge--live::before { animation: none !important; transition: none !important; }
}
/* ============================================================
§6+ — WIDGET STYLES (preserved from v1.x — DO NOT MODIFY)
The widget styles below were imported from v1.x rkx-widgets.css
and remain functional. Widget 27 (Form Builder) at the end uses
the new .rkx-f-* form primitives.
============================================================ */
/* ============================================================================
BASE WIDGET CARD — all 20 inherit this shell
============================================================================ */
.rkx-w {
/* Match homepage service-card aesthetic */
position: relative;
overflow: hidden;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(22px) saturate(1.5);
-webkit-backdrop-filter: blur(22px) saturate(1.5);
border: 1px solid var(--rkx-border);
border-radius: 1px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 340px;
transition: border-color 450ms var(--rkx-ease),
background-color 450ms var(--rkx-ease),
box-shadow 500ms var(--rkx-ease);
}
.rkx-w::before {
content: '';
position: absolute;
top: -50px; right: -50px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(29, 36, 202, 0.18) 0%, transparent 70%);
pointer-events: none;
opacity: 0;
transform: scale(0.8);
transform-origin: top right;
transition: opacity 600ms var(--rkx-ease),
transform 700ms var(--rkx-ease);
z-index: 0;
}
.rkx-w > * { position: relative; z-index: 1; }
.rkx-w:hover {
border-color: var(--rkx-accent-b);
background: rgba(0, 0, 0, 0.55);
box-shadow: 0 0 0 1px rgba(29, 36, 202, 0.18),
0 24px 60px -18px rgba(29, 36, 202, 0.55);
}
.rkx-w:hover::before {
opacity: 1;
transform: scale(1.4);
}
.rkx-w-eyebrow {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rkx-dim);
}
.rkx-w-title {
font-size: 19px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.25;
color: var(--rkx-text);
}
.rkx-w-sub {
font-size: 13px;
line-height: 1.45;
color: var(--rkx-muted);
}
.rkx-w-cta {
display: inline-flex;
align-items: center;
background: var(--rkx-accent);
color: #fff;
font-family: var(--rkx-font);
font-size: 13px;
font-weight: 600;
padding: 10px 18px;
border-radius: 1px;
text-decoration: none;
margin-top: auto;
width: fit-content;
border: 1px solid var(--rkx-accent-b);
cursor: pointer;
position: relative;
overflow: hidden;
transition: background var(--rkx-fast) var(--rkx-ease),
box-shadow var(--rkx-fast) var(--rkx-ease),
transform var(--rkx-fast) var(--rkx-ease);
}
.rkx-w-cta::before {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(115deg,
transparent 30%,
rgba(255, 255, 255, 0.32) 50%,
transparent 70%);
transform: skewX(-18deg);
pointer-events: none;
transition: left 900ms var(--rkx-ease);
}
.rkx-w-cta:hover {
background: var(--rkx-accent-h);
box-shadow: 0 0 22px var(--rkx-accent-glow);
transform: translateY(-1px);
}
.rkx-w-cta:hover::before { left: 120%; }
.rkx-w-cta > * { position: relative; z-index: 1; }
.rkx-w-badge {
display: inline-flex;
align-items: center;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 6px;
border-radius: 1px;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
border: 1px solid var(--rkx-border);
line-height: 1;
}
.rkx-w-badge--blue {
background: var(--rkx-accent-soft);
color: var(--rkx-accent-text);
border-color: var(--rkx-accent-b);
}
.rkx-w-badge--green {
background: rgba(34,197,94,0.15);
color: #4ade80;
border-color: rgba(34,197,94,0.35);
}
/* ============================================================================
WIDGET 01 — RESULTS THAT COMPOUND (updated featured card)
============================================================================ */
.w01-chart {
display: flex;
align-items: flex-end;
gap: 5px;
height: 60px;
margin-top: 4px;
}
.w01-bar {
flex: 1;
background: rgba(255,255,255,0.1);
border-radius: 1px 1px 0 0;
height: 0;
transition: height 900ms cubic-bezier(0.22,1,0.36,1);
transition-delay: var(--d, 0ms);
}
.w01-bar.is-active {
background: var(--rkx-accent);
box-shadow: 0 0 12px var(--rkx-accent-glow);
}
.w01-axis {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 5px;
margin-top: -4px;
}
.w01-axis-label {
text-align: center;
font-family: var(--rkx-mono);
font-size: 9px;
font-weight: 500;
color: var(--rkx-dim);
letter-spacing: 0.04em;
}
.w01-metrics {
display: grid;
grid-template-columns: 1fr 1px 1fr;
align-items: center;
gap: 14px;
padding: 12px 4px 4px;
border-top: 1px solid var(--rkx-border);
}
.w01-metric-divider {
width: 1px;
height: 28px;
background: var(--rkx-border);
}
.w01-metric-num {
font-size: 18px;
font-weight: 700;
color: var(--rkx-text);
letter-spacing: -0.02em;
font-feature-settings: 'tnum';
}
.w01-metric-num--accent { color: var(--rkx-accent-text); }
.w01-metric-lbl {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rkx-dim);
margin-top: 2px;
}
/* ============================================================================
WIDGET 02 — LIVE PROJECT COUNTER
============================================================================ */
.w02-num {
font-size: 72px;
font-weight: 700;
letter-spacing: -0.05em;
line-height: 1;
font-feature-settings: 'tnum';
background: linear-gradient(180deg, #fff 0%, #818cf8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.w02-plus {
font-size: 32px;
vertical-align: top;
margin-left: 2px;
color: var(--rkx-accent-text);
}
.w02-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding-top: 10px;
border-top: 1px solid var(--rkx-border);
}
.w02-split-cell span:first-child {
display: block;
font-family: var(--rkx-mono);
font-size: 13px;
font-weight: 600;
color: var(--rkx-text);
}
.w02-split-cell span:last-child {
display: block;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rkx-dim);
margin-top: 2px;
}
/* ============================================================================
WIDGET 03 — SERVICE SELECTOR TABS
============================================================================ */
.w03-tabs {
display: grid;
grid-template-columns: repeat(var(--tab-count, 3), 1fr);
gap: 2px;
background: rgba(0,0,0,0.25);
border: 1px solid var(--rkx-border);
padding: 3px;
border-radius: 1px;
position: relative;
}
.w03-tab-track {
position: absolute;
top: 3px; bottom: 3px;
left: 3px;
width: calc((100% - 6px) / var(--tab-count, 3));
background: var(--rkx-accent);
border-radius: 1px;
transition: transform 320ms cubic-bezier(0.4,0,0.2,1);
box-shadow: 0 0 14px var(--rkx-accent-glow);
z-index: 0;
}
.w03-tab {
/* Explicit button reset — avoid `all: unset` which nukes
sibling declarations and causes cascade confusion */
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
margin: 0;
outline: none;
box-shadow: none;
text-decoration: none;
/* Layered styling */
position: relative;
z-index: 1;
display: block;
width: 100%;
text-align: center;
padding: 7px 0;
font-family: var(--rkx-font);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1.2;
color: var(--rkx-muted);
cursor: pointer;
transition: color var(--rkx-fast) var(--rkx-ease);
}
.w03-tab:focus,
.w03-tab:focus-visible {
outline: none;
color: #ffffff;
}
.w03-tab:hover {
color: rgba(255, 255, 255, 0.85);
}
/* Active state — defended against theme overrides with multiple specificity levels */
.rkx-w .w03-tab.is-active,
.elementor .w03-tab.is-active,
.elementor-widget-rkx_service_selector .w03-tab.is-active,
.w03-tab.is-active {
color: #ffffff !important;
}
.w03-panels {
position: relative;
min-height: 100px;
flex: 1;
}
.w03-panel {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(6px);
transition: opacity var(--rkx-med) var(--rkx-ease),
transform var(--rkx-med) var(--rkx-ease);
pointer-events: none;
}
.w03-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
/* ============================================================================
WIDGET 04 — PROCESS STEPPER
============================================================================ */
.w04-steps {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 10px 0 6px;
}
.w04-line {
position: absolute;
top: 13px; left: 12.5%; right: 12.5%;
height: 1px;
background: var(--rkx-border);
}
.w04-line-fill {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 0;
background: var(--rkx-accent);
box-shadow: 0 0 8px var(--rkx-accent-glow);
transition: width 600ms var(--rkx-ease);
}
.w04-step { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.w04-dot {
position: relative; z-index: 1;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--rkx-border);
border: 1px solid rgba(255,255,255,0.2);
transition: background var(--rkx-med) var(--rkx-ease),
box-shadow var(--rkx-med) var(--rkx-ease),
transform var(--rkx-med) var(--rkx-ease);
}
.w04-step.is-active .w04-dot {
background: var(--rkx-accent);
border-color: var(--rkx-accent);
box-shadow: 0 0 0 4px var(--rkx-accent-soft), 0 0 10px var(--rkx-accent-glow);
transform: scale(1.2);
}
.w04-step.is-done .w04-dot {
background: var(--rkx-accent);
border-color: var(--rkx-accent);
}
.w04-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--rkx-dim);
text-align: center;
transition: color var(--rkx-fast) var(--rkx-ease);
}
.w04-step.is-active .w04-label { color: #fff; }
.w04-step.is-done .w04-label { color: var(--rkx-muted); }
.w04-desc {
font-family: var(--rkx-mono);
font-size: 11px;
color: var(--rkx-muted);
padding: 8px 10px;
background: rgba(0,0,0,0.25);
border-left: 2px solid var(--rkx-accent);
border-radius: 0 1px 1px 0;
min-height: 42px;
display: flex;
align-items: center;
}
/* ============================================================================
WIDGET 05 — TECH STACK GRID
============================================================================ */
.w05-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
.w05-chip {
padding: 10px 6px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--rkx-border);
border-radius: 1px;
text-align: center;
font-family: var(--rkx-mono);
font-size: 11px;
font-weight: 600;
color: var(--rkx-muted);
cursor: pointer;
transition: all var(--rkx-fast) var(--rkx-ease);
user-select: none;
}
.w05-chip:hover {
background: var(--rkx-accent-soft);
color: var(--rkx-accent-text);
border-color: var(--rkx-accent-b);
transform: translateY(-2px);
}
/* ============================================================================
WIDGET 06 — RESPONSE PULSE
============================================================================ */
.w06-wrap {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 0;
position: relative;
}
.w06-orb {
position: relative;
width: 110px; height: 110px;
display: flex;
align-items: center;
justify-content: center;
}
.w06-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid var(--rkx-accent-b);
animation: w06pulse 2.6s ease-out infinite;
opacity: 0;
}
.w06-ring:nth-child(2) { animation-delay: 0.9s; }
.w06-ring:nth-child(3) { animation-delay: 1.8s; }
@keyframes w06pulse {
0% { transform: scale(0.6); opacity: 0.9; border-color: rgba(129,140,248,0.8); }
100% { transform: scale(1.6); opacity: 0; border-color: rgba(29,36,202,0); }
}
.w06-core {
position: relative;
z-index: 2;
width: 70px; height: 70px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #2d35e0, #1D24CA 55%, #0f14a3 100%);
box-shadow: 0 0 24px var(--rkx-accent-glow), inset 0 1px 2px rgba(255,255,255,0.25);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.02em;
color: #fff;
font-feature-settings: 'tnum';
}
.w06-label-row {
text-align: center;
}
.w06-bignum {
font-size: 14px;
font-weight: 600;
color: var(--rkx-text);
letter-spacing: 0.04em;
}
.w06-sub {
font-size: 11px;
color: var(--rkx-dim);
margin-top: 2px;
letter-spacing: 0.04em;
}
/* ============================================================================
WIDGET 07 — TYPEWRITER
============================================================================ */
.w07-type-line {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.2;
min-height: 1.2em;
}
.w07-type-static { color: var(--rkx-muted); display: block; margin-bottom: 2px; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.w07-type-dynamic {
color: var(--rkx-accent-text);
display: inline-block;
min-height: 1.2em;
}
.w07-cursor {
display: inline-block;
width: 2px;
background: var(--rkx-accent);
margin-left: 2px;
animation: w07blink 1s steps(2) infinite;
vertical-align: middle;
}
@keyframes w07blink { 50% { opacity: 0; } }
.w07-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 6px;
}
.w07-tag {
font-family: var(--rkx-mono);
font-size: 10px;
padding: 3px 7px;
border: 1px solid var(--rkx-border);
border-radius: 1px;
color: var(--rkx-muted);
letter-spacing: 0.04em;
}
/* ============================================================================
WIDGET 08 — AVAILABILITY BADGE
============================================================================ */
.w08-live {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--rkx-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: #4ade80;
text-transform: uppercase;
padding: 5px 9px;
background: rgba(34,197,94,0.1);
border: 1px solid rgba(34,197,94,0.3);
border-radius: 1px;
width: fit-content;
margin-bottom: 2px;
}
.w08-live-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 0 rgba(34,197,94,0.7);
animation: w08dot 1.8s ease-out infinite;
}
@keyframes w08dot {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.w08-slots {
font-size: 54px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: var(--rkx-text);
}
.w08-slots small {
font-size: 14px;
color: var(--rkx-muted);
font-weight: 500;
margin-left: 4px;
letter-spacing: 0;
}
.w08-months {
display: flex;
gap: 4px;
}
.w08-month {
flex: 1;
padding: 6px 0;
text-align: center;
border: 1px solid var(--rkx-border);
border-radius: 1px;
font-family: var(--rkx-mono);
font-size: 10px;
font-weight: 600;
color: var(--rkx-dim);
letter-spacing: 0.06em;
text-transform: uppercase;
transition: all var(--rkx-fast) var(--rkx-ease);
}
.w08-month.is-free {
background: var(--rkx-accent-soft);
color: var(--rkx-accent-text);
border-color: var(--rkx-accent-b);
}
.w08-month.is-full {
opacity: 0.35;
text-decoration: line-through;
}
/* ============================================================================
WIDGET 09 — TESTIMONIAL ROTATOR
============================================================================ */
.w09-quote-wrap {
flex: 1;
position: relative;
min-height: 110px;
}
.w09-quote {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(6px);
transition: opacity var(--rkx-med) var(--rkx-ease),
transform var(--rkx-med) var(--rkx-ease);
pointer-events: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.w09-quote.is-active { opacity: 1; transform: none; pointer-events: auto; }
.w09-quote-text {
font-size: 14px;
font-style: italic;
line-height: 1.5;
color: var(--rkx-text);
letter-spacing: -0.01em;
position: relative;
padding-left: 10px;
}
.w09-quote-text::before {
content: '';
position: absolute;
left: 0; top: 2px; bottom: 2px;
width: 2px;
background: var(--rkx-accent);
}
.w09-attr {
display: flex;
align-items: center;
gap: 8px;
}
.w09-avatar {
width: 26px; height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rkx-accent), var(--rkx-accent-text));
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: #fff;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.w09-attr-meta { display: flex; flex-direction: column; gap: 1px; }
.w09-attr-name { font-size: 12px; font-weight: 600; }
.w09-attr-role { font-size: 10px; color: var(--rkx-dim); letter-spacing: 0.04em; }
.w09-dots { display: flex; gap: 5px; }
.w09-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--rkx-faint);
cursor: pointer;
transition: all var(--rkx-fast) var(--rkx-ease);
}
.w09-dot.is-active {
background: var(--rkx-accent);
width: 18px; border-radius: 1px;
}
/* ============================================================================
WIDGET 10 — BUDGET SLIDER
============================================================================ */
.w10-readout {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.w10-amount {
font-size: 30px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--rkx-text);
font-feature-settings: 'tnum';
line-height: 1;
}
.w10-amount-sub {
font-size: 11px;
color: var(--rkx-dim);
letter-spacing: 0.04em;
margin-top: 4px;
text-transform: uppercase;
}
.w10-tier {
text-align: right;
}
.w10-tier-name {
font-size: 13px;
font-weight: 700;
color: var(--rkx-accent-text);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.w10-tier-time {
font-size: 10px;
color: var(--rkx-dim);
margin-top: 2px;
letter-spacing: 0.04em;
}
.w10-slider {
appearance: none;
-webkit-appearance: none;
width: 100%;
height: 4px;
background: var(--rkx-border);
border-radius: 1px;
outline: none;
margin: 2px 0;
}
.w10-slider::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--rkx-accent);
box-shadow: 0 0 0 4px rgba(29,36,202,0.2), 0 0 12px var(--rkx-accent-glow);
cursor: grab;
transition: transform var(--rkx-fast) var(--rkx-ease);
}
.w10-slider::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.w10-slider::-moz-range-thumb {
width: 16px; height: 16px; border: none;
border-radius: 50%;
background: var(--rkx-accent);
box-shadow: 0 0 0 4px rgba(29,36,202,0.2), 0 0 12px var(--rkx-accent-glow);
cursor: grab;
}
.w10-scale {
display: flex;
justify-content: space-between;
font-family: var(--rkx-mono);
font-size: 9px;
color: var(--rkx-dim);
letter-spacing: 0.04em;
}
/* ============================================================================
WIDGET 11 — GROWTH LINE CHART
============================================================================ */
.w11-chart {
position: relative;
height: 90px;
}
.w11-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.w11-grid { stroke: var(--rkx-border); stroke-width: 1; stroke-dasharray: 2 4; }
.w11-line {
fill: none;
stroke: var(--rkx-accent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 6px var(--rkx-accent-glow));
stroke-dasharray: 300;
stroke-dashoffset: 300;
transition: stroke-dashoffset 1600ms cubic-bezier(0.22,1,0.36,1);
}
.w11-line.is-drawn { stroke-dashoffset: 0; }
.w11-area {
fill: url(#w11grad);
opacity: 0;
transition: opacity 800ms ease 800ms;
}
.w11-area.is-shown { opacity: 1; }
.w11-end-dot {
fill: var(--rkx-accent);
filter: drop-shadow(0 0 8px var(--rkx-accent-glow));
opacity: 0;
transition: opacity 300ms ease 1400ms;
}
.w11-end-dot.is-shown { opacity: 1; }
.w11-stat {
display: grid;
grid-template-columns: auto 1fr;
align-items: end;
gap: 10px;
}
.w11-big {
font-size: 36px;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
color: var(--rkx-accent-text);
font-feature-settings: 'tnum';
}
.w11-big-pct { font-size: 20px; }
.w11-caption {
font-size: 11px;
color: var(--rkx-dim);
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.3;
text-align: right;
}
/* ============================================================================
WIDGET 12 — PACKAGE TOGGLE
============================================================================ */
.w12-toggle {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2px;
padding: 3px;
background: rgba(0,0,0,0.25);
border: 1px solid var(--rkx-border);
border-radius: 1px;
position: relative;
}
.w12-toggle-track {
position: absolute;
top: 3px; bottom: 3px;
width: calc(33.333% - 2px);
background: var(--rkx-accent);
border-radius: 1px;
transition: transform 320ms cubic-bezier(0.4,0,0.2,1);
box-shadow: 0 0 14px var(--rkx-accent-glow);
}
.w12-opt {
all: unset;
position: relative; z-index: 1;
text-align: center;
padding: 7px 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--rkx-muted);
cursor: pointer;
transition: color var(--rkx-fast) var(--rkx-ease);
text-transform: uppercase;
}
.w12-opt.is-active { color: #fff; }
.w12-price {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--rkx-text);
font-feature-settings: 'tnum';
}
.w12-price small {
font-size: 11px;
font-weight: 500;
color: var(--rkx-dim);
margin-left: 4px;
letter-spacing: 0;
text-transform: uppercase;
}
.w12-incl { display: flex; flex-direction: column; gap: 5px; }
.w12-incl-item {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
color: var(--rkx-muted);
padding: 3px 0;
}
.w12-incl-tick {
width: 10px; height: 10px;
border: 1.5px solid var(--rkx-accent);
border-top: none;
border-right: none;
transform: rotate(-45deg) translateY(-2px);
flex-shrink: 0;
}
/* ============================================================================
WIDGET 13 — FLIP CASE STUDY
============================================================================ */
.w13-flip {
perspective: 1200px;
flex: 1;
min-height: 170px;
cursor: pointer;
}
.w13-inner {
position: relative;
width: 100%; height: 100%;
transition: transform 700ms cubic-bezier(0.4,0,0.2,1);
transform-style: preserve-3d;
}
.w13-flip.is-flipped .w13-inner { transform: rotateY(180deg); }
.w13-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px;
border: 1px solid var(--rkx-border);
border-radius: 1px;
background: rgba(0,0,0,0.3);
}
.w13-face--back {
transform: rotateY(180deg);
background: linear-gradient(135deg, rgba(29,36,202,0.35), rgba(0,0,0,0.4));
border-color: var(--rkx-accent-b);
}
.w13-industry {
font-family: var(--rkx-mono);
font-size: 10px;
color: var(--rkx-accent-text);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.w13-client {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 6px 0 8px;
}
.w13-challenge { font-size: 12px; color: var(--rkx-muted); line-height: 1.5; }
.w13-flip-hint {
margin-top: auto;
font-family: var(--rkx-mono);
font-size: 10px;
color: var(--rkx-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
padding-top: 10px;
}
.w13-big-stat {
font-size: 48px;
font-weight: 700;
letter-spacing: -0.045em;
color: #fff;
line-height: 1;
font-feature-settings: 'tnum';
}
.w13-stat-desc { font-size: 12px; color: rgba(255,255,255,0.75); margin-top: 8px; line-height: 1.4; }
/* ============================================================================
WIDGET 14 — INDUSTRY SELECTOR
============================================================================ */
.w14-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.w14-pill {
all: unset;
padding: 6px 11px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--rkx-border);
border-radius: 1px;
font-size: 11px;
font-weight: 600;
color: var(--rkx-muted);
cursor: pointer;
transition: all var(--rkx-fast) var(--rkx-ease);
letter-spacing: 0.02em;
}
.w14-pill:hover { color: #fff; border-color: var(--rkx-border-2); }
.w14-pill.is-active {
background: var(--rkx-accent);
color: #fff;
border-color: var(--rkx-accent-b);
box-shadow: 0 0 14px var(--rkx-accent-glow);
}
.w14-stat {
padding: 14px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--rkx-border);
border-left: 2px solid var(--rkx-accent);
border-radius: 0 1px 1px 0;
display: flex;
flex-direction: column;
gap: 2px;
transition: transform var(--rkx-fast) var(--rkx-ease);
}
.w14-stat.is-shake { animation: w14pop 300ms var(--rkx-ease); }
@keyframes w14pop {
0% { transform: scale(1); }
50% { transform: scale(1.03); }
100% { transform: scale(1); }
}
.w14-stat-num {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--rkx-accent-text);
font-feature-settings: 'tnum';
}
.w14-stat-desc { font-size: 11px; color: var(--rkx-muted); line-height: 1.4; }
/* ============================================================================
WIDGET 15 — CLIENT MARQUEE
============================================================================ */
.w15-viewport {
position: relative;
overflow: hidden;
height: 44px;
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.w15-track {
display: flex;
gap: 28px;
align-items: center;
height: 100%;
width: max-content;
animation: w15scroll 22s linear infinite;
}
.w15-viewport:hover .w15-track { animation-play-state: paused; }
@keyframes w15scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.w15-client {
font-family: var(--rkx-mono);
font-size: 15px;
font-weight: 600;
color: var(--rkx-muted);
letter-spacing: -0.01em;
white-space: nowrap;
transition: color var(--rkx-fast) var(--rkx-ease);
}
.w15-client:hover { color: var(--rkx-accent-text); }
.w15-stats {
display: flex;
align-items: center;
gap: 16px;
padding-top: 4px;
border-top: 1px solid var(--rkx-border);
}
.w15-stat-num {
font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
font-feature-settings: 'tnum';
}
.w15-stat-lbl {
font-size: 10px; color: var(--rkx-dim);
letter-spacing: 0.06em; text-transform: uppercase;
margin-top: 1px;
}
/* ============================================================================
WIDGET 16 — CALL BOOKER
============================================================================ */
.w16-slots { display: flex; flex-direction: column; gap: 6px; }
.w16-slot {
all: unset;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
background: rgba(0,0,0,0.25);
border: 1px solid var(--rkx-border);
border-radius: 1px;
cursor: pointer;
transition: all var(--rkx-fast) var(--rkx-ease);
}
.w16-slot:hover {
border-color: var(--rkx-accent-b);
background: rgba(29,36,202,0.08);
}
.w16-slot.is-selected {
background: var(--rkx-accent-soft);
border-color: var(--rkx-accent);
box-shadow: 0 0 14px var(--rkx-accent-glow);
}
.w16-slot-day {
font-size: 12px;
font-weight: 600;
color: var(--rkx-text);
}
.w16-slot-day small {
display: block;
font-size: 10px;
font-weight: 500;
color: var(--rkx-dim);
letter-spacing: 0.04em;
margin-top: 2px;
}
.w16-slot-time {
font-family: var(--rkx-mono);
font-size: 12px;
font-weight: 600;
color: var(--rkx-muted);
letter-spacing: 0.02em;
}
.w16-slot.is-selected .w16-slot-time { color: var(--rkx-accent-text); }
/* ============================================================================
WIDGET 17 — BEFORE / AFTER TOGGLE
============================================================================ */
.w17-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: rgba(0,0,0,0.25);
padding: 3px;
border: 1px solid var(--rkx-border);
border-radius: 1px;
position: relative;
}
.w17-toggle-track {
position: absolute;
top: 3px; bottom: 3px;
width: calc(50% - 2px);
background: var(--rkx-accent);
border-radius: 1px;
transition: transform 320ms cubic-bezier(0.4,0,0.2,1);
box-shadow: 0 0 14px var(--rkx-accent-glow);
}
.w17-opt {
all: unset;
position: relative; z-index: 1;
text-align: center;
padding: 7px 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--rkx-muted);
cursor: pointer;
text-transform: uppercase;
transition: color var(--rkx-fast) var(--rkx-ease);
}
.w17-opt.is-active { color: #fff; }
.w17-metric {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
transition: all var(--rkx-med) var(--rkx-ease);
}
.w17-metric-num {
font-size: 38px;
font-weight: 700;
letter-spacing: -0.04em;
color: var(--rkx-text);
font-feature-settings: 'tnum';
line-height: 1;
}
.w17-metric-label {
font-size: 11px;
color: var(--rkx-dim);
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: right;
line-height: 1.3;
}
.w17-bars { display: flex; flex-direction: column; gap: 6px; }
.w17-bar-row { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 8px; }
.w17-bar-lbl { font-size: 10px; color: var(--rkx-dim); letter-spacing: 0.04em; text-transform: uppercase; }
.w17-bar-track {
height: 6px;
background: var(--rkx-border);
border-radius: 1px;
position: relative;
overflow: hidden;
}
.w17-bar-fill {
position: absolute;
top: 0; left: 0; bottom: 0;
width: var(--w, 0);
background: var(--rkx-accent);
box-shadow: 0 0 8px var(--rkx-accent-glow);
transition: width 600ms cubic-bezier(0.4,0,0.2,1);
}
.w17-bar-val { font-family: var(--rkx-mono); font-size: 11px; font-weight: 600; color: var(--rkx-muted); }
/* ============================================================================
WIDGET 18 — CHECKLIST ANIMATE
============================================================================ */
.w18-list { display: flex; flex-direction: column; gap: 4px; }
.w18-item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
border-bottom: 1px solid var(--rkx-border);
opacity: 0.4;
transform: translateX(-4px);
transition: opacity 400ms var(--rkx-ease),
transform 400ms var(--rkx-ease);
}
.w18-item:last-child { border-bottom: none; }
.w18-item.is-checked {
opacity: 1;
transform: none;
}
.w18-box {
position: relative;
flex-shrink: 0;
width: 16px; height: 16px;
border: 1.5px solid var(--rkx-faint);
border-radius: 1px;
transition: all var(--rkx-med) var(--rkx-ease);
}
.w18-box::after {
content: '';
position: absolute;
left: 3px; top: 0px;
width: 6px; height: 10px;
border: 1.5px solid #fff;
border-top: none;
border-left: none;
transform: rotate(42deg) scale(0);
transition: transform 250ms cubic-bezier(0.5,1.6,0.4,0.8);
}
.w18-item.is-checked .w18-box {
background: var(--rkx-accent);
border-color: var(--rkx-accent);
box-shadow: 0 0 10px var(--rkx-accent-glow);
}
.w18-item.is-checked .w18-box::after {
transform: rotate(42deg) scale(1);
transition-delay: 200ms;
}
.w18-item-text {
font-size: 13px;
color: var(--rkx-muted);
letter-spacing: -0.005em;
}
.w18-item.is-checked .w18-item-text { color: var(--rkx-text); }
/* ============================================================================
WIDGET 19 — DUAL KPI TICKER
============================================================================ */
.w19-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.w19-cell {
padding: 14px 12px;
background: rgba(0,0,0,0.25);
border: 1px solid var(--rkx-border);
border-radius: 1px;
position: relative;
overflow: hidden;
}
.w19-cell::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: var(--fill, 0%);
height: 2px;
background: var(--rkx-accent);
box-shadow: 0 0 8px var(--rkx-accent-glow);
transition: width 1200ms cubic-bezier(0.22,1,0.36,1);
}
.w19-cell-num {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1;
font-feature-settings: 'tnum';
color: var(--rkx-text);
}
.w19-cell-unit {
font-size: 14px;
color: var(--rkx-accent-text);
font-weight: 600;
margin-left: 1px;
}
.w19-cell-lbl {
font-size: 10px;
color: var(--rkx-dim);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 6px;
}
.w19-spark {
height: 28px;
width: 100%;
display: block;
margin-top: 6px;
}
.w19-spark path {
fill: none;
stroke: var(--rkx-accent);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 4px var(--rkx-accent-glow));
stroke-dasharray: 200;
stroke-dashoffset: 200;
transition: stroke-dashoffset 1400ms cubic-bezier(0.22,1,0.36,1);
}
.w19-spark.is-drawn path { stroke-dashoffset: 0; }
/* ============================================================================
WIDGET 20 — NEXT SLOT COUNTDOWN
============================================================================ */
.w20-countdown {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.w20-box {
background: rgba(0,0,0,0.3);
border: 1px solid var(--rkx-border);
border-radius: 1px;
padding: 10px 6px;
text-align: center;
position: relative;
overflow: hidden;
}
.w20-box::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--rkx-accent), transparent);
opacity: 0.4;
}
.w20-num {
font-family: var(--rkx-mono);
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--rkx-text);
line-height: 1;
font-feature-settings: 'tnum';
display: inline-block;
}
.w20-num.is-tick { animation: w20tick 240ms var(--rkx-ease); }
@keyframes w20tick {
0% { opacity: 0.3; transform: translateY(-4px); }
100% { opacity: 1; transform: none; }
}
.w20-unit {
font-size: 9px;
color: var(--rkx-dim);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 4px;
}
.w20-note {
font-size: 12px;
color: var(--rkx-muted);
line-height: 1.4;
padding: 8px 10px;
background: rgba(29,36,202,0.08);
border-left: 2px solid var(--rkx-accent);
border-radius: 0 1px 1px 0;
}
/* ---------- FOOTER ---------- */
.showcase-foot {
max-width: 1400px;
margin: 64px auto 0;
text-align: center;
color: var(--rkx-dim);
font-size: 12px;
letter-spacing: 0.04em;
padding-top: 32px;
border-top: 1px solid var(--rkx-border);
}
/* ============================================================
WIDGET 21 — SERVICES SHOWCASE (mega-widget)
============================================================ */
.w21 {
min-height: auto !important;
padding: 36px !important;
gap: 24px;
}
.w21-head { text-align: left; }
.w21-title {
font-size: clamp(26px, 3vw, 38px);
font-weight: 700;
letter-spacing: -0.028em;
line-height: 1.12;
margin: 8px 0 12px;
color: var(--rkx-text);
}
.w21-lead {
font-size: 14.5px;
line-height: 1.6;
color: var(--rkx-muted);
max-width: 620px;
margin: 0;
}
.w21-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.w21-filters {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.w21-filter {
appearance: none;
-webkit-appearance: none;
background: rgba(255,255,255,0.04);
border: 1px solid var(--rkx-border);
color: var(--rkx-muted);
font-family: var(--rkx-font);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 7px 12px;
border-radius: 1px;
cursor: pointer;
transition: all var(--rkx-fast) var(--rkx-ease);
display: inline-flex;
align-items: center;
gap: 6px;
}
.w21-filter:hover { color: #fff; border-color: var(--rkx-border-2); }
.w21-filter.is-active {
background: var(--rkx-accent-soft);
border-color: var(--rkx-accent-b);
color: var(--rkx-accent-bright);
}
.w21-count {
font-family: var(--rkx-mono);
font-size: 10px;
opacity: 0.7;
}
.w21-view-toggle {
display: inline-flex;
background: rgba(0,0,0,0.3);
border: 1px solid var(--rkx-border);
border-radius: 1px;
padding: 2px;
}
.w21-view {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
color: var(--rkx-muted);
font-family: var(--rkx-font);
font-size: 11.5px;
font-weight: 600;
padding: 6px 10px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all var(--rkx-fast) var(--rkx-ease);
}
.w21-view svg { width: 14px; height: 14px; }
.w21-view:hover { color: #fff; }
.w21-view.is-active {
background: var(--rkx-accent);
color: #fff;
}
/* Panes */
.w21-view-pane {
display: none;
animation: w21FadeIn 320ms var(--rkx-ease);
}
.w21-view-pane.is-active { display: grid; }
.w21-constellation.is-active { display: block; }
@keyframes w21FadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* GRID */
.w21-grid {
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.w21-card {
appearance: none;
-webkit-appearance: none;
text-align: left;
background: rgba(0, 0, 0, 0.45);
border: 1px solid var(--rkx-border);
border-radius: 1px;
padding: 18px;
color: var(--rkx-text);
cursor: pointer;
display: flex;
flex-direction: column;
gap: 10px;
transition: all 320ms var(--rkx-ease);
position: relative;
overflow: hidden;
min-height: 160px;
}
.w21-card::before {
content: '';
position: absolute;
top: -40px; right: -40px;
width: 140px; height: 140px;
background: radial-gradient(circle, rgba(29,36,202,0.22) 0%, transparent 70%);
pointer-events: none;
opacity: 0;
transform: scale(0.8);
transition: opacity 400ms var(--rkx-ease), transform 500ms var(--rkx-ease);
}
.w21-card:hover {
border-color: var(--rkx-accent-b);
background: rgba(0,0,0,0.55);
box-shadow: 0 0 0 1px rgba(29,36,202,0.18),
0 18px 48px -18px rgba(29,36,202,0.55);
transform: translateY(-3px);
}
.w21-card:hover::before { opacity: 1; transform: scale(1.4); }
.w21-card.is-hidden {
display: none;
}
.w21-card-cat {
font-family: var(--rkx-mono);
font-size: 9.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rkx-accent-bright);
}
.w21-card-name {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
color: var(--rkx-text);
line-height: 1.25;
}
.w21-card-short {
font-size: 12.5px;
line-height: 1.5;
color: var(--rkx-muted);
margin: 0;
flex: 1;
}
.w21-card-cue {
font-family: var(--rkx-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rkx-accent-bright);
opacity: 0;
transform: translateY(4px);
transition: opacity 280ms var(--rkx-ease), transform 280ms var(--rkx-ease);
margin-top: 4px;
}
.w21-card:hover .w21-card-cue { opacity: 1; transform: translateY(0); }
/* CONSTELLATION */
.w21-constellation {
display: none;
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
background: rgba(0,0,0,0.25);
border: 1px solid var(--rkx-border);
border-radius: 1px;
padding: 16px;
}
.w21-constellation-svg {
width: 100%;
height: 100%;
}
.w21-c-line {
stroke: rgba(255,255,255,0.08);
stroke-width: 1;
fill: none;
transition: stroke 280ms var(--rkx-ease), stroke-width 280ms var(--rkx-ease);
}
.w21-c-line.is-near {
stroke: var(--rkx-accent-b);
stroke-width: 1.5;
}
.w21-c-node {
cursor: pointer;
transition: transform 280ms var(--rkx-ease);
transform-box: fill-box;
transform-origin: center;
}
.w21-c-node circle {
fill: rgba(0,0,0,0.6);
stroke: var(--rkx-border-2);
stroke-width: 1.4;
transition: fill 280ms var(--rkx-ease),
stroke 280ms var(--rkx-ease),
filter 280ms var(--rkx-ease),
r 280ms var(--rkx-ease);
}
.w21-c-node:hover circle {
fill: var(--rkx-accent);
stroke: var(--rkx-accent-bright);
filter: drop-shadow(0 0 10px var(--rkx-accent-glow));
}
.w21-c-node.is-hidden { display: none; }
.w21-c-label {
fill: var(--rkx-muted);
font-family: var(--rkx-font);
font-size: 11px;
font-weight: 600;
text-anchor: middle;
pointer-events: none;
transition: fill 280ms var(--rkx-ease);
}
.w21-c-node:hover + .w21-c-label,
.w21-c-label.is-hover { fill: #fff; }
.w21-c-label.is-hidden { display: none; }
.w21-constellation-hint {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
font-family: var(--rkx-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rkx-dim);
pointer-events: none;
}
/* DETAIL PANEL */
.w21-detail {
display: none;
position: relative;
padding: 32px;
background: linear-gradient(135deg,
rgba(29,36,202,0.18) 0%,
rgba(0,0,0,0.55) 50%,
rgba(29,36,202,0.14) 100%);
border: 1px solid var(--rkx-accent-b);
border-radius: 1px;
box-shadow: 0 0 0 1px rgba(29,36,202,0.18) inset;
animation: w21FadeIn 360ms var(--rkx-ease);
}
.w21-detail.is-open { display: block; }
.w21-detail-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
background: rgba(0,0,0,0.45);
border: 1px solid var(--rkx-border-2);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 1px;
transition: all var(--rkx-fast) var(--rkx-ease);
}
.w21-detail-close:hover {
background: var(--rkx-accent-soft);
border-color: var(--rkx-accent-b);
}
.w21-detail-close svg { width: 14px; height: 14px; }
.w21-detail-cat {
display: inline-block;
font-family: var(--rkx-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rkx-accent-bright);
margin-bottom: 12px;
}
.w21-detail-name {
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 700;
letter-spacing: -0.025em;
margin: 0 0 14px;
color: #fff;
}
.w21-detail-text {
font-size: 14.5px;
line-height: 1.65;
color: var(--rkx-muted);
margin: 0 0 18px;
max-width: 720px;
}
.w21-detail-features {
list-style: none;
padding: 0;
margin: 0 0 22px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.w21-detail-features li {
font-size: 13px;
color: var(--rkx-text);
padding-left: 22px;
position: relative;
line-height: 1.5;
}
.w21-detail-features li::before {
content: '';
position: absolute;
left: 0;
top: 4px;
width: 14px;
height: 14px;
border: 1.4px solid var(--rkx-accent-bright);
border-radius: 50%;
background: rgba(29,36,202,0.18);
}
.w21-detail-features li::after {
content: '';
position: absolute;
left: 4px;
top: 8px;
width: 6px;
height: 3px;
border-left: 1.4px solid var(--rkx-accent-bright);
border-bottom: 1.4px solid var(--rkx-accent-bright);
transform: rotate(-45deg);
}
.w21-detail-cta {
background: var(--rkx-accent);
}
/* RESPONSIVE */
@media (max-width: 900px) {
.w21 { padding: 24px !important; }
.w21-grid { grid-template-columns: repeat(2, 1fr); }
.w21-detail-features { grid-template-columns: 1fr; }
.w21-controls { flex-direction: column; align-items: stretch; }
.w21-view-toggle { align-self: flex-start; }
}
@media (max-width: 540px) {
.w21-grid { grid-template-columns: 1fr; }
.w21-detail { padding: 22px; }
.w21-constellation { aspect-ratio: 4 / 5; }
.w21-c-label { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
.w21-view-pane { animation: none; }
.w21-card, .w21-c-node circle { transition: none; }
}
/* ============================================================
WIDGETS 22 / 23 / 24 — PRICING (shared styles)
============================================================ */
.rkx-pricing {
min-height: auto !important;
padding: 40px !important;
gap: 28px;
}
.rkx-pricing-head {
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.rkx-pricing-head .rkx-w-eyebrow {
margin-left: auto;
margin-right: auto;
}
.rkx-pricing-title {
font-size: clamp(26px, 3vw, 38px);
font-weight: 700;
letter-spacing: -0.028em;
line-height: 1.12;
margin: 8px 0 12px;
color: var(--rkx-text);
}
.rkx-pricing-lead {
font-size: 14.5px;
line-height: 1.6;
color: var(--rkx-muted);
margin: 0 auto 24px;
max-width: 600px;
}
/* Billing toggle */
.rkx-pricing-toggle {
display: inline-flex;
position: relative;
background: rgba(0,0,0,0.3);
border: 1px solid var(--rkx-border);
border-radius: 1px;
padding: 3px;
margin: 8px auto 0;
}
.rkx-pricing-toggle-track {
position: absolute;
top: 3px; bottom: 3px;
left: 3px;
width: calc(50% - 3px);
background: var(--rkx-accent);
border-radius: 1px;
transition: transform 320ms var(--rkx-ease);
z-index: 0;
box-shadow: 0 0 14px var(--rkx-accent-glow);
}
.rkx-pricing-toggle[data-cycle="annual"] .rkx-pricing-toggle-track {
transform: translateX(100%);
}
.rkx-pricing-toggle-btn {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
position: relative;
z-index: 1;
color: var(--rkx-muted);
font-family: var(--rkx-font);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 8px 18px;
cursor: pointer;
transition: color var(--rkx-fast) var(--rkx-ease);
display: inline-flex;
align-items: center;
gap: 8px;
}
.rkx-pricing-toggle-btn.is-active { color: #fff; }
.rkx-pricing-save {
background: rgba(34, 197, 94, 0.18);
color: var(--rkx-green);
font-family: var(--rkx-mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 1px;
}
/* Grid */
.rkx-pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
/* Plan card */
.rkx-pricing-plan {
position: relative;
background: rgba(0, 0, 0, 0.45);
border: 1px solid var(--rkx-border);
border-radius: 1px;
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 18px;
transition: all 320ms var(--rkx-ease);
}
.rkx-pricing-plan:hover {
border-color: var(--rkx-accent-b);
background: rgba(0, 0, 0, 0.55);
box-shadow: 0 0 0 1px rgba(29,36,202,0.18),
0 24px 60px -20px rgba(29,36,202,0.55);
transform: translateY(-3px);
}
.rkx-pricing-plan.is-featured {
background: linear-gradient(135deg,
rgba(29, 36, 202, 0.16) 0%,
rgba(0, 0, 0, 0.55) 50%,
rgba(29, 36, 202, 0.12) 100%);
border-color: var(--rkx-accent-b);
box-shadow: 0 0 0 1px rgba(29, 36, 202, 0.18) inset;
}
.rkx-pricing-plan.is-featured:hover {
box-shadow: 0 0 0 1px rgba(29, 36, 202, 0.18) inset,
0 28px 70px -18px rgba(29, 36, 202, 0.6);
}
.rkx-pricing-badge {
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: var(--rkx-accent);
color: #fff;
font-family: var(--rkx-mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 1px;
box-shadow: 0 0 16px var(--rkx-accent-glow);
}
/* Plan head */
.rkx-pricing-plan-head {
display: flex;
flex-direction: column;
gap: 4px;
}
.rkx-pricing-plan-name {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
color: var(--rkx-text);
}
.rkx-pricing-plan-tag {
font-size: 13px;
line-height: 1.4;
color: var(--rkx-muted);
margin: 0;
}
.rkx-pricing-platform {
display: inline-block;
margin-top: 6px;
font-family: var(--rkx-mono);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--rkx-accent-bright);
background: var(--rkx-accent-soft);
border: 1px solid var(--rkx-accent-b);
padding: 3px 8px;
border-radius: 1px;
width: fit-content;
}
/* Price */
.rkx-pricing-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
padding-bottom: 18px;
border-bottom: 1px solid var(--rkx-border);
position: relative;
}
.rkx-pricing-prefix {
font-family: var(--rkx-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rkx-dim);
width: 100%;
margin-bottom: 2px;
}
.rkx-pricing-currency {
font-size: 22px;
font-weight: 600;
color: var(--rkx-muted);
}
.rkx-pricing-amount {
font-size: clamp(32px, 3.4vw, 42px);
font-weight: 700;
color: var(--rkx-text);
letter-spacing: -0.02em;
line-height: 1;
transition: opacity 240ms var(--rkx-ease);
}
.rkx-pricing-amount--custom {
font-size: clamp(24px, 2.6vw, 30px);
background: linear-gradient(135deg, var(--rkx-accent-bright) 0%, #fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.rkx-pricing-period {
font-size: 12px;
color: var(--rkx-muted);
width: 100%;
margin-top: 2px;
}
/* Maintenance row (project pricing) */
.rkx-pricing-maint {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
background: rgba(29,36,202,0.08);
border: 1px solid rgba(29,36,202,0.22);
border-radius: 1px;
}
.rkx-pricing-maint-label {
font-family: var(--rkx-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rkx-accent-bright);
}
.rkx-pricing-maint-price {
font-family: var(--rkx-font);
font-size: 16px;
font-weight: 700;
color: var(--rkx-text);
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.rkx-pricing-maint-price small {
font-size: 10px;
font-weight: 500;
color: var(--rkx-muted);
letter-spacing: 0.04em;
}
/* Timeline row */
.rkx-pricing-timeline {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
}
.rkx-pricing-timeline-label {
font-family: var(--rkx-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rkx-dim);
}
.rkx-pricing-timeline-value {
color: var(--rkx-text);
font-weight: 600;
}
/* Features list */
.rkx-pricing-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.rkx-pricing-features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.45;
color: var(--rkx-text);
}
.rkx-pricing-features li.is-excluded {
color: var(--rkx-dim);
text-decoration: line-through;
text-decoration-color: rgba(255,255,255,0.18);
}
.rkx-pricing-feat-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
margin-top: 2px;
position: relative;
}
.rkx-pricing-features li.is-included .rkx-pricing-feat-icon {
background: var(--rkx-accent-soft);
border: 1.2px solid var(--rkx-accent-bright);
}
.rkx-pricing-features li.is-included .rkx-pricing-feat-icon::after {
content: '';
position: absolute;
left: 4px;
top: 6px;
width: 6px;
height: 3px;
border-left: 1.4px solid var(--rkx-accent-bright);
border-bottom: 1.4px solid var(--rkx-accent-bright);
transform: rotate(-45deg);
}
.rkx-pricing-features li.is-excluded .rkx-pricing-feat-icon {
background: rgba(255,255,255,0.04);
border: 1.2px solid rgba(255,255,255,0.14);
}
.rkx-pricing-features li.is-excluded .rkx-pricing-feat-icon::before,
.rkx-pricing-features li.is-excluded .rkx-pricing-feat-icon::after {
content: '';
position: absolute;
left: 3px;
top: 7px;
width: 8px;
height: 1.4px;
background: rgba(255,255,255,0.32);
}
.rkx-pricing-features li.is-excluded .rkx-pricing-feat-icon::before { transform: rotate(45deg); }
.rkx-pricing-features li.is-excluded .rkx-pricing-feat-icon::after { transform: rotate(-45deg); }
/* Plan CTA — make it full-width inside the card */
.rkx-pricing-cta {
width: 100%;
justify-content: center;
padding: 12px 18px !important;
margin-top: auto;
}
/* Footer note */
.rkx-pricing-foot {
text-align: center;
font-size: 12px;
line-height: 1.5;
color: var(--rkx-dim);
max-width: 700px;
margin: 8px auto 0;
padding-top: 20px;
border-top: 1px solid var(--rkx-border);
}
/* Responsive */
@media (max-width: 900px) {
.rkx-pricing { padding: 28px !important; }
.rkx-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
.rkx-pricing-grid { grid-template-columns: 1fr; }
.rkx-pricing-plan { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
.rkx-pricing-plan,
.rkx-pricing-toggle-track,
.rkx-pricing-amount { transition: none; }
}
/* ============================================================
WIDGETS 25 / 26 — ADDITIONAL PRICING STYLES
============================================================ */
/* Stack of duration + minimum rows (Widget 25) */
.rkx-pricing-timeline-stack {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Description paragraph (Widget 26) */
.rkx-pricing-desc {
font-size: 13px;
line-height: 1.55;
color: var(--rkx-muted);
margin: 0;
padding-bottom: 16px;
border-bottom: 1px solid var(--rkx-border);
}
/* "Typically includes" label above features list (Widget 26) */
.rkx-pricing-includes-block {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.rkx-pricing-includes-label {
font-family: var(--rkx-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rkx-dim);
}
/* Trust signals row (Widget 26) */
.rkx-pricing-trust {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
padding: 20px 24px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--rkx-border);
border-radius: 1px;
margin-top: 4px;
}
.rkx-pricing-trust-item {
display: flex;
align-items: center;
gap: 10px;
}
.rkx-pricing-trust-check {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--rkx-accent-soft);
border: 1.2px solid var(--rkx-accent-bright);
position: relative;
}
.rkx-pricing-trust-check::after {
content: '';
position: absolute;
left: 4px;
top: 6px;
width: 6px;
height: 3px;
border-left: 1.4px solid var(--rkx-accent-bright);
border-bottom: 1.4px solid var(--rkx-accent-bright);
transform: rotate(-45deg);
}
.rkx-pricing-trust-text {
font-size: 12.5px;
color: var(--rkx-text);
line-height: 1.35;
}
/* Enterprise plan price is shown as accent-bright text, larger */
.rkx-pricing--enterprise .rkx-pricing-amount--custom {
font-size: clamp(22px, 2.4vw, 28px);
}
@media (max-width: 900px) {
.rkx-pricing-trust { grid-template-columns: 1fr 1fr; padding: 16px 18px; }
}
@media (max-width: 540px) {
.rkx-pricing-trust { grid-template-columns: 1fr; }
}
/* ============================================================
WIDGET 21 — SERVICE ICONS
Static by default. Continuous subtle animation on hover only.
Active filter card icon gets a slow pulse.
============================================================ */
.w21-card {
/* Make room for icon above the category tag */
padding-top: 22px;
}
.w21-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--rkx-accent-soft);
border: 1px solid var(--rkx-accent-b);
border-radius: 1px;
color: var(--rkx-accent-bright);
transition: all 320ms var(--rkx-ease);
margin-bottom: 4px;
}
.w21-card-icon svg {
width: 22px;
height: 22px;
display: block;
overflow: visible;
}
.w21-card:hover .w21-card-icon {
background: var(--rkx-accent);
border-color: var(--rkx-accent);
color: #fff;
transform: scale(1.05);
box-shadow: 0 0 18px var(--rkx-accent-glow);
}
/* Detail panel icon — bigger, more presence */
.w21-detail-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: var(--rkx-accent);
border: 1px solid var(--rkx-accent);
border-radius: 1px;
color: #fff;
margin-bottom: 18px;
box-shadow: 0 0 24px var(--rkx-accent-glow);
}
.w21-detail-icon svg {
width: 28px;
height: 28px;
display: block;
overflow: visible;
}
/* ============================================================
ICON ANIMATIONS — hover-triggered, distinct per icon type.
Each animation is GPU-friendly (transform + opacity only).
============================================================ */
/* WEB-DESIGN — bars draw left-to-right */
.w21-card:hover .w21-card-icon svg .svg-bar-1 { animation: rkxBarGrow 1.4s var(--rkx-ease) infinite; }
.w21-card:hover .w21-card-icon svg .svg-bar-2 { animation: rkxBarGrow 1.4s var(--rkx-ease) infinite 0.18s; }
.w21-card:hover .w21-card-icon svg .svg-bar-3 { animation: rkxBarGrow 1.4s var(--rkx-ease) infinite 0.36s; }
@keyframes rkxBarGrow {
0%, 100% { transform: scaleX(0.4); transform-origin: left center; opacity: 0.55; }
50% { transform: scaleX(1); transform-origin: left center; opacity: 1; }
}
/* WEB-DEV — brackets pulse inward/outward */
.w21-card:hover .w21-card-icon svg .svg-bracket-l { animation: rkxBracketLeft 1.6s var(--rkx-ease) infinite; transform-origin: center; }
.w21-card:hover .w21-card-icon svg .svg-bracket-r { animation: rkxBracketRight 1.6s var(--rkx-ease) infinite; transform-origin: center; }
.w21-card:hover .w21-card-icon svg .svg-slash { animation: rkxFadePulse 1.6s var(--rkx-ease) infinite; }
@keyframes rkxBracketLeft { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2px); } }
@keyframes rkxBracketRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes rkxFadePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* ECOMMERCE — wheels rotate, cart drifts forward */
.w21-card:hover .w21-card-icon svg .svg-cart { animation: rkxCartRoll 1.8s var(--rkx-ease) infinite; }
.w21-card:hover .w21-card-icon svg .svg-wheel-1 { animation: rkxWheelSpin 1.2s linear infinite; transform-origin: 9px 19px; transform-box: fill-box; }
.w21-card:hover .w21-card-icon svg .svg-wheel-2 { animation: rkxWheelSpin 1.2s linear infinite; transform-origin: 17px 19px; transform-box: fill-box; }
@keyframes rkxCartRoll { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1px); } }
@keyframes rkxWheelSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* MOBILE-APPS — screen flickers like an app loading */
.w21-card:hover .w21-card-icon svg .svg-screen { animation: rkxScreenPulse 2.2s var(--rkx-ease) infinite; }
@keyframes rkxScreenPulse {
0%, 100% { opacity: 0.08; }
25% { opacity: 0.30; }
55% { opacity: 0.18; }
80% { opacity: 0.45; }
}
/* SEO — magnifier shakes side to side searching */
.w21-card:hover .w21-card-icon svg .svg-mag-circle,
.w21-card:hover .w21-card-icon svg .svg-mag-handle {
animation: rkxSearch 2.4s var(--rkx-ease) infinite;
transform-origin: 10px 10px;
transform-box: fill-box;
}
@keyframes rkxSearch {
0%, 100% { transform: translate(0, 0); }
20% { transform: translate(1.5px, 0); }
40% { transform: translate(-1.5px, 1px); }
60% { transform: translate(1.5px, -1px); }
80% { transform: translate(-1px, 0.5px); }
}
.w21-card:hover .w21-card-icon svg .svg-mag-line-1 { animation: rkxFadePulse 2.4s var(--rkx-ease) infinite; }
.w21-card:hover .w21-card-icon svg .svg-mag-line-2 { animation: rkxFadePulse 2.4s var(--rkx-ease) infinite 0.3s; }
/* PPC — target rings pulse outward */
.w21-card:hover .w21-card-icon svg .svg-target-1 {
animation: rkxTargetExpand 1.8s var(--rkx-ease) infinite;
transform-origin: 12px 12px;
transform-box: fill-box;
}
.w21-card:hover .w21-card-icon svg .svg-target-2 {
animation: rkxTargetExpand 1.8s var(--rkx-ease) infinite 0.45s;
transform-origin: 12px 12px;
transform-box: fill-box;
}
.w21-card:hover .w21-card-icon svg .svg-target-bull {
animation: rkxBullseyePulse 1.8s var(--rkx-ease) infinite;
transform-origin: 12px 12px;
transform-box: fill-box;
}
@keyframes rkxTargetExpand {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.08); opacity: 0.6; }
}
@keyframes rkxBullseyePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
/* SOCIAL — speech bubbles alternate */
.w21-card:hover .w21-card-icon svg .svg-bubble-1 { animation: rkxBubble1 2s var(--rkx-ease) infinite; transform-origin: center; transform-box: fill-box; }
.w21-card:hover .w21-card-icon svg .svg-bubble-2 { animation: rkxBubble2 2s var(--rkx-ease) infinite; transform-origin: center; transform-box: fill-box; }
@keyframes rkxBubble1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-1px, -1px); } }
@keyframes rkxBubble2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1px, 1px); } }
/* CONTENT — doc lines cycle in like text being written */
.w21-card:hover .w21-card-icon svg .svg-doc-line-1 { animation: rkxDocLine 2.8s var(--rkx-ease) infinite 0s; transform-origin: left center; transform-box: fill-box; }
.w21-card:hover .w21-card-icon svg .svg-doc-line-2 { animation: rkxDocLine 2.8s var(--rkx-ease) infinite 0.3s; transform-origin: left center; transform-box: fill-box; }
.w21-card:hover .w21-card-icon svg .svg-doc-line-3 { animation: rkxDocLine 2.8s var(--rkx-ease) infinite 0.6s; transform-origin: left center; transform-box: fill-box; }
.w21-card:hover .w21-card-icon svg .svg-doc-line-4 { animation: rkxDocLine 2.8s var(--rkx-ease) infinite 0.9s; transform-origin: left center; transform-box: fill-box; }
@keyframes rkxDocLine {
0%, 80%, 100% { transform: scaleX(1); opacity: 1; }
40% { transform: scaleX(0.5); opacity: 0.5; }
}
/* BRAND — diamond rotates slowly */
.w21-card:hover .w21-card-icon svg .svg-diamond,
.w21-card:hover .w21-card-icon svg .svg-diamond-inner {
animation: rkxRotate360 4s linear infinite;
transform-origin: 12px 12px;
transform-box: fill-box;
}
@keyframes rkxRotate360 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* GRAPHIC — grid squares fade-cycle */
.w21-card:hover .w21-card-icon svg .svg-grid-1 { animation: rkxGridCycle 2s var(--rkx-ease) infinite 0s; }
.w21-card:hover .w21-card-icon svg .svg-grid-2 { animation: rkxGridCycle 2s var(--rkx-ease) infinite 0.5s; }
.w21-card:hover .w21-card-icon svg .svg-grid-3 { animation: rkxGridCycle 2s var(--rkx-ease) infinite 1.5s; }
.w21-card:hover .w21-card-icon svg .svg-grid-4 { animation: rkxGridCycle 2s var(--rkx-ease) infinite 1s; }
@keyframes rkxGridCycle {
0%, 80%, 100% { opacity: 1; }
40% { opacity: 0.35; }
}
/* UI-UX — cursor drifts */
.w21-card:hover .w21-card-icon svg .svg-cursor {
animation: rkxCursorDrift 2.4s var(--rkx-ease) infinite;
transform-origin: center;
transform-box: fill-box;
}
@keyframes rkxCursorDrift {
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(1.5px, -0.5px); }
50% { transform: translate(0.5px, 1.5px); }
75% { transform: translate(-1px, 0.5px); }
}
/* VIDEO — play triangle pulses + ring spins slowly */
.w21-card:hover .w21-card-icon svg .svg-play-ring {
animation: rkxRotate360 6s linear infinite;
transform-origin: 12px 12px;
transform-box: fill-box;
}
.w21-card:hover .w21-card-icon svg .svg-play-tri {
animation: rkxPlayPulse 1.6s var(--rkx-ease) infinite;
transform-origin: 13px 12px;
transform-box: fill-box;
}
@keyframes rkxPlayPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0.85; }
}
/* ANALYTICS — bars rise sequentially, trend line dashes flow */
.w21-card:hover .w21-card-icon svg .svg-bar-1 { animation: rkxBarRise 1.8s var(--rkx-ease) infinite 0s; transform-origin: bottom center; transform-box: fill-box; }
.w21-card:hover .w21-card-icon svg .svg-bar-2 { animation: rkxBarRise 1.8s var(--rkx-ease) infinite 0.2s; transform-origin: bottom center; transform-box: fill-box; }
.w21-card:hover .w21-card-icon svg .svg-bar-3 { animation: rkxBarRise 1.8s var(--rkx-ease) infinite 0.4s; transform-origin: bottom center; transform-box: fill-box; }
.w21-card:hover .w21-card-icon svg .svg-trend { animation: rkxDashFlow 2s linear infinite; }
@keyframes rkxBarRise {
0%, 100% { transform: scaleY(0.6); }
50% { transform: scaleY(1); }
}
@keyframes rkxDashFlow {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -8; }
}
/* CRO — funnel drips */
.w21-card:hover .w21-card-icon svg .svg-funnel { animation: rkxFadePulse 2.2s var(--rkx-ease) infinite; }
.w21-card:hover .w21-card-icon svg .svg-funnel-drop { animation: rkxFunnelDrop 1.8s var(--rkx-ease) infinite; transform-box: fill-box; }
@keyframes rkxFunnelDrop {
0% { opacity: 0; transform: translateY(-4px); }
40% { opacity: 1; transform: translateY(0); }
80% { opacity: 0.4; transform: translateY(2px); }
100% { opacity: 0; transform: translateY(3px); }
}
/* RESEARCH — graph line redraws, magnifier shakes */
.w21-card:hover .w21-card-icon svg .svg-graph {
animation: rkxGraphRedraw 2.4s var(--rkx-ease) infinite;
stroke-dasharray: 14;
}
.w21-card:hover .w21-card-icon svg .svg-mag-circle,
.w21-card:hover .w21-card-icon svg .svg-mag-handle {
animation: rkxSearch 2.4s var(--rkx-ease) infinite;
}
@keyframes rkxGraphRedraw {
0% { stroke-dashoffset: 14; opacity: 0.3; }
60% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 1; }
}
/* CONSULTING — bulb filaments glow, bulb pulses */
.w21-card:hover .w21-card-icon svg .svg-bulb { animation: rkxBulbPulse 2s var(--rkx-ease) infinite; }
.w21-card:hover .w21-card-icon svg .svg-bulb-filament-1 { animation: rkxFadePulse 1.4s var(--rkx-ease) infinite; }
.w21-card:hover .w21-card-icon svg .svg-bulb-filament-2 { animation: rkxFadePulse 1.4s var(--rkx-ease) infinite 0.2s; }
@keyframes rkxBulbPulse {
0%, 100% { filter: drop-shadow(0 0 0 currentColor); }
50% { filter: drop-shadow(0 0 4px currentColor); }
}
/* ============================================================
TYPOGRAPHY HIERARCHY UPGRADE — widgets 21-26
Headings 800, sub-headings 600, body 500, mono labels unchanged.
============================================================ */
/* Widget 21 — Services Showcase */
body .w21-title {
font-weight: 800 !important;
font-size: clamp(28px, 3.2vw, 42px) !important;
line-height: 1.08 !important;
letter-spacing: -0.03em !important;
}
body .w21-lead {
font-size: 15.5px !important;
line-height: 1.65 !important;
color: rgba(255,255,255,0.75) !important;
font-weight: 500 !important;
max-width: 680px !important;
}
body .w21-card-name {
font-size: 17px !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
line-height: 1.25 !important;
}
body .w21-card-short {
font-size: 13.5px !important;
line-height: 1.5 !important;
color: rgba(255,255,255,0.72) !important;
font-weight: 500 !important;
}
body .w21-detail-name {
font-weight: 800 !important;
font-size: clamp(24px, 2.6vw, 34px) !important;
line-height: 1.1 !important;
letter-spacing: -0.025em !important;
}
body .w21-detail-text {
font-size: 15px !important;
line-height: 1.7 !important;
color: rgba(255,255,255,0.78) !important;
font-weight: 500 !important;
}
body .w21-detail-features li {
font-size: 14px !important;
line-height: 1.5 !important;
color: rgba(255,255,255,0.88) !important;
font-weight: 500 !important;
}
/* Widgets 22-26 — Pricing widgets, shared selectors */
body .rkx-pricing-title {
font-weight: 800 !important;
font-size: clamp(28px, 3.2vw, 42px) !important;
line-height: 1.08 !important;
letter-spacing: -0.03em !important;
}
body .rkx-pricing-lead {
font-size: 15.5px !important;
line-height: 1.65 !important;
color: rgba(255,255,255,0.75) !important;
font-weight: 500 !important;
max-width: 640px !important;
}
body .rkx-pricing-plan-name {
font-weight: 800 !important;
font-size: 22px !important;
line-height: 1.15 !important;
letter-spacing: -0.022em !important;
}
body .rkx-pricing-plan-tag {
font-size: 13.5px !important;
line-height: 1.5 !important;
color: rgba(255,255,255,0.7) !important;
font-weight: 500 !important;
}
body .rkx-pricing-amount {
font-weight: 800 !important;
font-size: clamp(36px, 3.8vw, 48px) !important;
letter-spacing: -0.025em !important;
}
body .rkx-pricing-amount--custom {
font-size: clamp(26px, 2.8vw, 32px) !important;
font-weight: 700 !important;
}
body .rkx-pricing-period {
font-size: 13px !important;
color: rgba(255,255,255,0.7) !important;
font-weight: 500 !important;
}
body .rkx-pricing-features li {
font-size: 14px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
color: rgba(255,255,255,0.88) !important;
}
body .rkx-pricing-features li.is-excluded {
color: rgba(255,255,255,0.4) !important;
font-weight: 400 !important;
}
body .rkx-pricing-desc {
font-size: 14px !important;
line-height: 1.6 !important;
color: rgba(255,255,255,0.75) !important;
font-weight: 500 !important;
}
body .rkx-pricing-maint-price {
font-size: 17px !important;
font-weight: 700 !important;
}
body .rkx-pricing-trust-text {
font-size: 13.5px !important;
color: rgba(255,255,255,0.85) !important;
font-weight: 500 !important;
}
body .rkx-pricing-foot {
font-size: 13px !important;
line-height: 1.6 !important;
color: rgba(255,255,255,0.55) !important;
font-weight: 500 !important;
}
/* Reduced motion — kill all continuous animations */
@media (prefers-reduced-motion: reduce) {
.w21-card-icon svg *,
.w21-detail-icon svg * {
animation: none !important;
}
}
/* ============================================================
FONT TUNING — Plus Jakarta Sans calibration
PJS runs slightly heavier and wider than Inter at the same
weight. These rules normalise tracking + size so headings
keep the same visual rhythm we tuned for Inter.
============================================================ */
body .rkx-w *,
body .rkx-pricing *,
body .w21 *,
body .w21-card-name,
body .rkx-pricing-plan-name,
body .rkx-pricing-title,
body .w21-title,
body .w21-detail-name {
font-feature-settings: "ss01" 1, "cv11" 1; /* PJS stylistic alternates for cleaner numerals + a */
}
/* Tighten heading letter-spacing — PJS is wider than Inter */
body .rkx-pricing-title,
body .w21-title {
letter-spacing: -0.035em !important;
}
body .w21-detail-name,
body .rkx-pricing-plan-name {
letter-spacing: -0.028em !important;
}
body .w21-card-name {
letter-spacing: -0.022em !important;
}
/* PJS body text — slightly bigger letter-spacing for readability */
body .w21-lead,
body .rkx-pricing-lead,
body .w21-detail-text,
body .rkx-pricing-plan-tag {
letter-spacing: -0.005em !important;
}
/* Numerals — tabular figures for prices (consistent alignment) */
body .rkx-pricing-amount,
body .rkx-pricing-currency,
body .rkx-pricing-maint-price {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ============================================================
WIDGET 27 — FORM BUILDER
Layout, honeypot, button loading state, success state.
Uses form primitives from global utilities (input/textarea/label/error).
============================================================ */
.rkx-form-w {
padding: clamp(24px, 3vw, 40px) !important;
gap: clamp(20px, 2.4vw, 28px);
}
.rkx-form-head {
text-align: left;
margin-bottom: 8px;
}
.rkx-form-title { margin-bottom: 12px; }
.rkx-form-lead { margin-bottom: 0; }
.rkx-form {
display: flex;
flex-direction: column;
gap: 18px;
}
/* Honeypot — visually hidden but accessible to bots */
.rkx-form-honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Field grid — half-width fields sit 2 per row on desktop */
.rkx-form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 14px;
}
.rkx-f-field--full { grid-column: 1 / -1; }
.rkx-f-field--half { grid-column: span 1; }
@media (max-width: 640px) {
.rkx-form-grid { grid-template-columns: 1fr; }
.rkx-f-field--half { grid-column: 1 / -1; }
}
/* Consent text */
.rkx-form-consent {
font-family: var(--rkx-font);
font-size: 11.5px;
line-height: 1.5;
font-weight: 500;
color: var(--rkx-dim);
margin: 4px 0 0;
letter-spacing: -0.003em;
}
.rkx-form-consent a {
color: var(--rkx-accent-bright);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
/* Submit row */
.rkx-form-actions {
display: flex;
margin-top: 4px;
}
.rkx-form-actions.is-full .rkx-form-submit { width: 100%; }
/* Submit button — uses .rkx-w-cta base, adds spinner support */
.rkx-form-submit { position: relative; }
.rkx-form-submit-spinner {
display: none;
width: 14px;
height: 14px;
border: 1.6px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: rkxFormSpin 0.7s linear infinite;
margin-left: 6px;
}
@keyframes rkxFormSpin { to { transform: rotate(360deg); } }
.rkx-form-submit.is-loading {
cursor: progress;
opacity: 0.85;
pointer-events: none;
}
.rkx-form-submit.is-loading .rkx-form-submit-spinner { display: inline-block; }
/* Success state — replaces form */
.rkx-form-success {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: clamp(24px, 3vw, 32px);
background: rgba(34, 197, 94, 0.08);
border: 1px solid rgba(34, 197, 94, 0.32);
border-radius: 1px;
animation: rkxFormFadeIn 0.4s var(--rkx-ease);
}
.rkx-form-success-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: var(--rkx-green);
}
.rkx-form-success-icon svg { width: 48px; height: 48px; }
.rkx-form-success-heading {
font-family: var(--rkx-font);
font-size: clamp(18px, 1.6vw, 22px);
font-weight: 800;
letter-spacing: -0.025em;
color: var(--rkx-text);
margin: 0;
line-height: 1.2;
}
.rkx-form-success-body {
font-family: var(--rkx-font);
font-size: 14px;
line-height: 1.6;
color: var(--rkx-muted);
font-weight: 500;
margin: 0;
}
@keyframes rkxFormFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.rkx-form-submit-spinner,
.rkx-form-success { animation: none !important; }
}