/**
* Reusable Components - NEW DESIGN SYSTEM
* Built with @apply for clean, maintainable, scalable CSS
* Based on Figma design specs
*/
/* === LAYOUT WRAPPERS === */
/* Section wrapper with bottom gradient */
.section-wrapper {
position: relative;
width: 100%;
}
.img-wrapper.section-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%; /* Much larger gradient from left */
background: linear-gradient(to left, transparent 0%, rgba(10, 10, 20, 0.6) 40%, #0A0A14 80%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.img-wrapper.section-wrapper::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%; /* Gradient covers right half of image */
background: linear-gradient(to right, transparent 0%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
/* === ICONS === */
/* Icon system moved to icons.css for better organization */
/* @import in style.css */
/* === BADGES === */
/* Badge - Base component for labels, tags, status indicators */
.badge {
display: inline-flex;
align-items: center;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
border-radius: 9999px;
font-size: 12px;
line-height: 20px;
font-weight: 700;
white-space: nowrap;
}
/* Badge Lavender - Premium features, discounts, lifetime offers */
.badge-lavender {
white-space: nowrap;
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 14px;
line-height: 20px;
font-weight: 500;
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Card with Glow - Premium card glow effect */
.card-with-glow {
overflow: visible;
--tw-bg-opacity: 1;
background-color: rgb(10 10 20 / var(--tw-bg-opacity, 1));
}
.card-with-glow::before {
content: '';
pointer-events: none;
position: absolute;
top: -50px;
bottom: -200px;
left: -30px;
right: -30px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.8) 0%, rgba(99, 102, 241, 0.4) 30%, transparent 70%);
filter: blur(80px);
z-index: -2;
}
.card-with-glow::after {
content: '';
pointer-events: none;
position: absolute;
top: -40px;
bottom: -180px;
left: -20px;
right: -20px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 70%);
filter: blur(60px);
z-index: -1;
}
/* Card Hover Glow - Reusable hover effect for any card */
/* Adds subtle scale and outer glow on hover - smooth 500ms transition */
.card-hover-glow {
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
transition: transforn all 2s;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0)) drop-shadow(0 0 25px rgba(79, 70, 229, 0));
}
.card-hover-glow:hover {
transition: transforn all 2s;
transform: scale(1.01);
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 25px rgba(79, 70, 229, 0.2));
}
/* === NAVIGATION === */
/* Nav Link - Main navigation items */
.nav-link {
display: inline-flex;
align-items: center;
justify-content: flex-start;
}
@media (min-width: 1024px) {
.nav-link {
justify-content: center;
}
}
.nav-link {
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 14px;
line-height: 20px;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.nav-link.active {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Tab Navigation - Account/Dashboard tabs */
/* Figma: Default state - transparent, grey text, 14px padding */
.tab-nav-item {
display: inline-flex;
align-items: center;
/* CRITICAL: Same padding/gap/border-radius for both active and inactive to prevent layout shift */
padding: 0.875rem; /* 14px all sides - MUST MATCH .is-active */
gap: 0.625rem; /* 10px - MUST MATCH .is-active */ background-color: transparent;
/* Invisible border to prevent layout shift when active */
border: 0.75px solid transparent;
border-radius: 10px; /* 10px - design system standard - MUST MATCH .is-active */ font-size: 14px; line-height: 20px; font-weight: 400; --tw-text-opacity: 1; color: rgb(129 129 140 / var(--tw-text-opacity, 1));
line-height: 1; /* leading-none */
/* NO transition - instant state change for clean UX */
transition: none !important;
/* Remove all possible browser default focus styles */
outline: none !important;
outline-width: 0 !important;
outline-style: none !important;
outline-color: transparent !important;
outline-offset: 0 !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent !important;
position: relative;
}
/* All focus/active states - force remove outline */
.tab-nav-item:focus,
.tab-nav-item:focus-within,
.tab-nav-item:focus-visible,
.tab-nav-item:active {
outline: none !important;
outline-width: 0 !important;
outline-style: none !important;
outline-color: transparent !important;
outline-offset: 0 !important;
box-shadow: none !important;
/* DO NOT remove border - causes layout shift during click */
}
/* Tab Navigation - Active state */
/* Figma: Grey-950 background, Grey-800 border, white text, 10px gap */
.tab-nav-item.is-active {
background: #14141E; /* Grey-grey-950 */
border: 0.75px solid #282832; /* Grey-grey-800 */ border-radius: 10px; /* 10px - design system standard */ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1));
padding: 0.875rem; /* 14px all sides */
gap: 0.625rem; /* 10px */
}
/* Tab Navigation - Animated sliding indicator (Alpine.js controlled) */
.tab-indicator {
position: absolute;
bottom: -16px;
left: 0;
height: 2px;
background: white;
border-radius: 8px; /* 8px - design system small radius */
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), width 300ms cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none; /* Don't interfere with clicks */
}
/* Tab Navigation - Hover state (non-active) */
.tab-nav-item:not(.is-active):hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* === NAVIGATION DROPDOWNS === */
/* Dropdown Menu - Base container */
/* Design system: bg core-900, border core-800, rounded-lg (16px) */
/* NOTE: Visibility controlled by Alpine.js x-show, not CSS hidden class */
.dropdown-menu {
/* Mobile: static positioning - stacks vertically under button */
/* Desktop (lg+): absolute positioning - floating dropdown */
}
@media (min-width: 1024px) {
.dropdown-menu {
position: absolute;
}
}
.dropdown-menu {
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(20 20 30 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(10 10 20 / var(--tw-bg-opacity, 1));
border-radius: 16px; /* 16px - standardized to design system */
/* Figma shadow specification - multi-layer depth effect */
box-shadow:
0 199px 56px 0 rgba(0, 0, 0, 0.00),
0 127px 51px 0 rgba(0, 0, 0, 0.03),
0 72px 43px 0 rgba(0, 0, 0, 0.10),
0 32px 32px 0 rgba(0, 0, 0, 0.17),
0 8px 17px 0 rgba(0, 0, 0, 0.20);
z-index: 50;
}
@media (min-width: 1024px) {
.dropdown-menu {
top: 62px; /* Fixed position from parent top to align all dropdowns */
}
}
/* Dropdown Content Wrapper - Scrollable inner container */
.dropdown-content {
overflow-y: auto; /* Enable vertical scrolling if content exceeds max-height */
/* Max-height to prevent dropdown from exceeding viewport */
/* calc(100vh - 80px) = viewport height minus navbar height and some padding */
max-height: calc(100vh - 80px);
/* Hide scrollbar - modern UX pattern for dropdown menus */
/* Firefox */
scrollbar-width: none;
/* WebKit (Chrome, Safari, Edge) */
&::-webkit-scrollbar {
display: none;
}
/* Prevent scroll chaining - stop scroll from bubbling to body */
/* When user scrolls to the end of dropdown, don't scroll the page */
overscroll-behavior: contain;
}
@media (min-width: 1024px) {
.dropdown-content {
/* On desktop, account for navbar + top position */
max-height: calc(100vh - 62px - 20px); /* 62px top + 20px bottom padding */
}
}
/* Prevent flex children from shrinking - allows content to exceed max-height and enable scrolling */
.dropdown-content > * {
flex-shrink: 0;
}
/* Dropdown Header - Section title */
/* Figma: Grey/400 (#81818C), 14px Poppins Medium */
.dropdown-header {
font-size: 14px;
line-height: 20px;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
line-height: 1; /* leading-none */
}
/* Dropdown Divider - Horizontal/Vertical separators */
/* Figma: #14141E (core-800) */
.dropdown-divider {
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
}
.dropdown-divider.horizontal {
height: 1px;
width: 100%;
}
.dropdown-divider.vertical {
width: 1px;
align-self: stretch; /* self-stretch makes it take full height in flex row */
}
/* Dropdown Item - Individual menu item with icon + text */
/* Figma: 32px gap between items, 10px gap inside item */
.dropdown-item {
display: flex;
flex-direction: column;
gap: 10px;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
/* Mobile: 2x larger left padding than nav-link (24px vs 12px) for visual hierarchy */
/* Desktop: no padding needed (items are in absolute positioned dropdown) */
padding-left: 1.5rem;
}
@media (min-width: 1024px) {
.dropdown-item {
padding-left: 0px;
}
}
.dropdown-item:hover {
opacity: 0.8;
}
/* Dropdown Item Title Row - Icon + Text */
.dropdown-item-title {
display: flex;
width: 100%;
align-items: flex-start;
gap: 0.5rem;
}
/* Dropdown Item Icon - 14x14px SVG container */
.dropdown-item-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Dropdown Item Label - White, 14px Poppins Medium */
.dropdown-item-label {
font-size: 14px;
line-height: 20px;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
line-height: 1; /* leading-none */
}
/* Dropdown Item Description - Grey/400, 14px Poppins Regular */
.dropdown-item-description {
font-size: 14px;
line-height: 20px;
font-weight: 400;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
line-height: 1; /* leading-none */
}
/* Resources Dropdown - Specific layout */
/* Figma: 545px width, 363px height, two columns */
.dropdown-resources {
height: 363px;
width: 545px;
/* Positioned from center based on navbar layout */
}
/* Resources Dropdown - Column layout */
.dropdown-resources-content {
display: flex;
gap: 32px;
padding: 30px;
}
.dropdown-resources-column {
display: flex;
flex-direction: column;
gap: 32px;
}
/* Resources Dropdown - Support card with image */
.dropdown-support-card {
border-width: 0.75px;
border-style: solid;
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(30 30 40 / var(--tw-bg-opacity, 1));
overflow: hidden;
border-radius: 10px; /* 10px - design system standard */ height: 114px; width: 212px;
}
/* How it Works Dropdown - Specific layout */
/* Figma: 344px width, 223px height, single column */
.dropdown-how-it-works {
height: 223px;
width: 344px;
}
/* === LINKS (NEW DESIGN SYSTEM) === */
/* Base link - Inherits parent text color with underline */
.link {
display: inline-block;
font-family: Poppins, sans-serif;
text-decoration-line: underline;
text-decoration-style: solid;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-underline-position: from-font;
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: 200ms;
}
/* Link variant: Small gray link (14px, gray-500, center aligned) */
/* Usage: Small text links, footer links, secondary navigation */
.link-sm {
display: inline-block;
font-family: Poppins, sans-serif;
text-decoration-line: underline;
text-decoration-style: solid;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-underline-position: from-font;
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: 200ms;
text-align: center;
font-size: 14px; /* 14px - design system (instead of 13px) */
font-weight: 500;
line-height: 28px; /* 215.385% */
letter-spacing: -0.325px;
text-underline-offset: 40%; /* 5.2px */ --tw-text-opacity: 1; color: rgb(79 79 85 / var(--tw-text-opacity, 1)); /* #6A7282 equivalent */
}
.link-sm:hover {
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1)); /* Lighter on hover */
}
/* Link variant: Primary lavender link (16px, lavender-500) */
/* Usage: Primary action links, important CTAs, form links */
.link-primary {
display: inline-block;
font-family: Poppins, sans-serif;
text-decoration-line: underline;
text-decoration-style: solid;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-underline-position: from-font;
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: 200ms;
font-size: 16px;
font-weight: 400;
line-height: 100%;
text-underline-offset: auto;
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity, 1)); /* #6366F1 */
}
.link-primary:hover {
--tw-text-opacity: 1;
color: rgb(129 140 248 / var(--tw-text-opacity, 1)); /* Lighter lavender on hover */
}
/* Link variant: Secondary gray link (16px, gray-500) */
/* Usage: Secondary links, less prominent actions */
.link-secondary {
display: inline-block;
font-family: Poppins, sans-serif;
text-decoration-line: underline;
text-decoration-style: solid;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-underline-position: from-font;
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: 200ms;
font-size: 16px;
font-weight: 400;
line-height: 100%;
text-underline-offset: auto;
--tw-text-opacity: 1;
color: rgb(79 79 85 / var(--tw-text-opacity, 1)); /* Gray */
}
.link-secondary:hover {
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1)); /* Lighter gray on hover */
}
/* Link variant: White link (for dark backgrounds) */
.link-white {
display: inline-block;
font-family: Poppins, sans-serif;
text-decoration-line: underline;
text-decoration-style: solid;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-underline-position: from-font;
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: 200ms;
font-size: 16px;
font-weight: 400;
line-height: 100%;
text-underline-offset: auto;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.link-white:hover {
--tw-text-opacity: 1;
color: rgb(235 235 239 / var(--tw-text-opacity, 1)); /* Slightly dimmed white on hover */
}
/* Link modifier: Remove underline (for special cases) */
.link-no-underline {
text-decoration-line: none;
}
/* === BUTTONS (NEW DESIGN SYSTEM) === */
/* Smooth 0.5s transition for all button types */
.btn,
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-gradient,
.btn-dark,
.btn-indigo,
.btn-text,
.btn-outline,
.btn-danger,
.btn-outline-danger {
transition: all 0.5s ease !important;
}
/* Base button styles */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.btn:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.btn:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 0.5;
}
.btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn {
white-space: nowrap; /* Never wrap button text to multiple lines */
}
/* Primary button - Default size (navigation, forms) - Figma specs */
/* 12px 16px padding, font-weight 500, font-size 14px, line-height 100% */
.btn-primary {
border-radius: 9999px;
transition: all 0.5s ease;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.btn-primary:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.btn-primary:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 0.5;
}
.btn-primary:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn-primary {
white-space: nowrap; /* Never wrap button text to multiple lines */ --tw-bg-opacity: 1; background-color: rgb(255 46 121 / var(--tw-bg-opacity, 1)); text-align: center; font-weight: 500; --tw-text-opacity: 1; color: rgb(10 10 20 / var(--tw-text-opacity, 1));
}
.btn-primary:hover {
opacity: 0.9;
--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);
}
.btn-primary:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(255 46 121 / var(--tw-ring-opacity, 1));
}
.btn-primary {
padding: 0.75rem 1rem; /* 12px 16px */
gap: 0.625rem; /* 10px */
font-size: 0.875rem; /* 14px */
line-height: 100%; /* 14px */
}
/* Large primary button - Hero sections, large CTAs */
/* 10px 16px padding, font-weight 600, font-size 16px, line-height 28px */
.btn-lg {
padding: 0.625rem 2rem; /* 10px 16px */
font-weight: 600; /* semibold */ font-size: 16px; line-height: 24px; /* 16px - design system (instead of 15px) */
line-height: 1.75rem; /* 28px */
letter-spacing: -0.03rem; /* -0.375px */
}
/* Button with arrow icon - adds right arrow SVG */
.btn-arrow::after {
content: '';
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.00003 4C6.00003 4 10 6.94593 10 8C10 9.05413 6 12 6 12' stroke='%230A0A14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
flex-shrink: 0;
}
/* Secondary button - Alternative CTA (outlined) */
.btn-secondary {
border-radius: 9999px;
transition: all 0.5s ease;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.btn-secondary:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.btn-secondary:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 0.5;
}
.btn-secondary:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn-secondary {
white-space: nowrap; /* Never wrap button text to multiple lines */ border-width: 2px; --tw-border-opacity: 1; border-color: rgb(129 129 140 / var(--tw-border-opacity, 1)); background-color: transparent; --tw-text-opacity: 1; color: rgb(188 188 200 / var(--tw-text-opacity, 1));
}
.btn-secondary:hover {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-secondary:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(129 129 140 / var(--tw-ring-opacity, 1));
}
.btn-secondary {
padding: 0.75rem 1rem; /* 12px 16px */
font-size: 0.875rem; /* 14px */
font-weight: 500;
}
/* Text button - Minimal style for links like "Log in" */
.btn-text {
transition: all 0.5s ease;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.btn-text:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.btn-text:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 0.5;
}
.btn-text:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn-text {
white-space: nowrap; /* Never wrap button text to multiple lines */ background-color: transparent; --tw-text-opacity: 1; color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
.btn-text:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-text {
padding: 0.5rem 1rem;
font-size: 0.875rem; /* 14px */
}
/* Indigo color variant - for "Go premium" buttons */
/* Figma: Lavender Blue #6366F1 */
.btn-indigo {
background-color: #6366F1 !important; /* Lavender Blue 500 */
color: #FFF !important;
}
.btn-indigo:hover {
background-color: #4F46E5 !important; /* Darker indigo on hover */
opacity: 1 !important;
}
.btn-indigo:focus {
--tw-ring-color: #6366F1;
}
/* Gradient button - Premium CTA style */
/* Figma: Gradient border (indigo→pink), gradient bg at 8% opacity, white text, glow effect */
.btn-gradient {
border-radius: 9999px;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
transition: all 0.5s ease;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.btn-gradient:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.btn-gradient:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 0.5;
}
.btn-gradient:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn-gradient {
white-space: nowrap; /* Never wrap button text to multiple lines */
position: relative;
border: none;
background: linear-gradient(105deg, rgba(79, 70, 229, 0.08) 0%, rgba(255, 46, 121, 0.08) 100%);
padding: 0.625rem 2rem; /* 10px 32px */
font-size: 1.0625rem; /* 17px */
line-height: 1.65rem; /* ~26px */
/* Glow effect - drop-shadow with indigo glow */
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 15px rgba(79, 70, 229, 0.3));
z-index: 1;
}
/* Gradient border using pseudo-element */
.btn-gradient::before {
content: '';
position: absolute;
inset: 0;
padding: 1px; /* Border width */
border-radius: 9999px;
background: linear-gradient(91deg, #4F46E5 0%, #FF2E79 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: -1;
}
.btn-gradient:hover:not(:disabled) {
/* Enhanced background on hover - gradient snaps (can't animate), glow animates smoothly */
background: linear-gradient(105deg, rgba(79, 70, 229, 0.15) 0%, rgba(255, 46, 121, 0.15) 100%);
/* Enhanced glow on hover - stronger shadow */
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 25px rgba(79, 70, 229, 0.5));
}
/* Disabled state - no hover effect */
.btn-gradient:disabled {
pointer-events: none;
}
.btn-gradient:focus-visible {
--tw-ring-color: #4F46E5;
box-shadow: 0 0 0 3px var(--tw-ring-color), 0 0 25px rgba(79, 70, 229, 0.5);
outline: none;
}
/* Icons inside gradient button should be white */
.btn-gradient i,
.btn-gradient .icon {
color: #FFFFFF !important;
}
/* Arrow icon inside gradient button should be white */
.btn-gradient.btn-arrow::after {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.00003 4C6.00003 4 10 6.94593 10 8C10 9.05413 6 12 6 12' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Dark outlined button - for "Download now" style */
/* Figma: Core Grey 800 bg, Core Grey 750 border */
.btn-dark {
background-color: #14141E !important; /* Core Grey 800 */
border: 1px solid #1A1A24 !important; /* Core Grey 750 */
color: #FFF !important;
}
.btn-dark:hover {
background-color: #1A1A24 !important; /* Core Grey 750 - lighter on hover */
border-color: rgba(255, 255, 255, 0.1) !important; /* Subtle white border on hover */
opacity: 1 !important;
}
.btn-dark:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: #1A1A24; /* Core Grey 750 */
box-shadow: 0 0 0 3px var(--tw-ring-color);
outline: none;
}
/* Square border radius variant - for buttons with icons */
/* Design system: 10px border-radius instead of pill (100px) */
.btn-square {
border-radius: 10px !important; /* 10px - design system standard */
}
/* Tertiary button - Ghost/pill style for toggles and switchers (pricing tables, tabs) */
/* Default size - Figma specs */
/* Inactive state: no border, transparent bg, grey text */
.btn-tertiary {
transition: all 0.5s ease;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.btn-tertiary:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.btn-tertiary:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 0.5;
}
.btn-tertiary:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn-tertiary {
white-space: nowrap; /* Never wrap button text to multiple lines */ border-width: 0px; background-color: transparent; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); text-align: center; border-radius: 9999px; /* Pill shape - design system */
color: #81818C; /* Core Grey 400 */
font-family: Poppins, sans-serif;
font-size: 1.125rem; /* 18px */
font-weight: 500;
line-height: 2rem; /* 32px */
letter-spacing: -0.028rem; /* -0.45px */
padding: 0.75rem 2rem; /* 12px 32px */
}
.btn-tertiary:hover {
color: #1A1A24;
background: transparent;
}
/* Active state: border, dark bg, white text */
.btn-tertiary.is-active {
border: 1px solid #1A1A24; /* Core Grey 750 border */
background: #14141E; /* Core Grey 800 bg */
color: #FFF;
}
.btn-tertiary.is-active:hover {
background: #1A1A24;
color: #FFF;
}
/* Small variant - Design system specs */
.btn-tertiary.btn-sm {
font-size: 16px !important;
line-height: 24px !important; /* 16px - design system (instead of 15px) */
line-height: 1.75rem !important; /* 28px */
letter-spacing: -0.023rem !important; /* -0.375px */
padding: 0.25rem 0.9375rem !important; /* 4px 15px - EXACT FIGMA SPECS */ border-radius: 9999px !important; /* Pill shape - design system */
width: auto !important; /* Content-based width, not fixed */
white-space: nowrap !important; /* Prevent text wrapping */
}
/* Size modifiers - DEPRECATED, use .btn-lg on .btn-primary instead */
.btn-sm {
padding: 0.5rem 1rem !important; /* 8px 16px */
font-size: 0.875rem !important; /* 14px */
}
.btn-lg {
/* Defined per-button-type above */
}
/* Device counter increment/decrement button - Figma specs */
.btn-counter {
display: flex;
padding: 0.25rem; /* 4px */
align-items: center;
gap: 0.625rem; /* 10px */ border-radius: 8px; /* 8px - design system (close to 7px, standardized) */
border: 0.75px solid #25253B;
background: #1A1A2B;
transition: all 0.2s ease;
}
.btn-counter:hover:not(:disabled) {
border-color: #8B9FFF;
background: #1F1F31;
}
.btn-counter:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* Stroke color for SVG icons inside counter buttons */
.btn-counter svg {
stroke: #BCBCC8; /* Core Grey 300 */
stroke-width: 1.5px;
}
/* Icon button - Small square button for icons (edit, close, etc.) */
/* Design system: 8.5px padding, 10px radius, Core-Grey-750 background, Core-Grey-650 border */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8.5px;
border-radius: 10px; /* 10px - design system standard */
border: 0.75px solid #282832; /* Core-Grey-650 */
background: #1A1A24; /* Core-Grey-750 */
transition: all 0.2s ease;
font-size: 0.7em !important;
color: #81818c !important;
}
.btn-icon:hover:not(:disabled) {
background: #1F1F2A; /* Slightly lighter on hover */
border-color: #8B9FFF; /* Lavender accent on hover */
}
.btn-icon:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* Icon color inside .btn-icon */
.btn-icon .icon {
color: #81818C; /* Core-Grey-400 */
}
.btn-icon:hover:not(:disabled) .icon {
color: #BCBCC8; /* Lighter grey on hover */
}
/* Icon button danger variant - Circular red button for destructive actions */
.btn-icon-danger {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8.5px;
border-radius: 9999px; /* Circular - design system */
background: rgba(220, 38, 38, 0.8); /* red-600 with 80% opacity */
border: 0.75px solid rgba(239, 68, 68, 0.3); /* red-500 with 30% opacity */
transition: all 0.2s ease;
}
.btn-icon-danger:hover:not(:disabled) {
background: rgb(220, 38, 38); /* Solid red-600 */
border-color: rgb(239, 68, 68); /* red-500 */
transform: scale(1.05);
}
.btn-icon-danger:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.btn-icon-danger .icon {
color: #FFFFFF;
}
/* Outline button - Ghost style with border */
.btn-outline {
border-radius: 9999px;
transition: all 0.5s ease;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.btn-outline:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.btn-outline:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 0.5;
}
.btn-outline:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn-outline {
white-space: nowrap; /* Never wrap button text to multiple lines */ border-width: 2px; --tw-border-opacity: 1; border-color: rgb(30 30 40 / var(--tw-border-opacity, 1)); background-color: transparent; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-outline:hover {
--tw-border-opacity: 1;
border-color: rgb(59 59 68 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
}
.btn-outline:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 59 68 / var(--tw-ring-opacity, 1));
}
.btn-outline {
padding: 0.75rem 1rem; /* 12px 16px */
font-size: 0.875rem; /* 14px */
font-weight: 500;
}
/* Danger button - Destructive actions (delete, cancel subscription) */
.btn-danger {
border-radius: 9999px;
transition: all 0.5s ease;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.btn-danger:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.btn-danger:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 0.5;
}
.btn-danger:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn-danger {
white-space: nowrap; /* Never wrap button text to multiple lines */ --tw-bg-opacity: 1; background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-danger:hover {
--tw-brightness: brightness(.9);
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);
}
.btn-danger:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(255 0 0 / var(--tw-ring-opacity, 1));
}
.btn-danger {
padding: 0.75rem 1rem; /* 12px 16px */
font-size: 0.875rem; /* 14px */
font-weight: 500;
}
/* Outline danger button - Destructive actions with less emphasis */
.btn-outline-danger {
border-radius: 9999px;
transition: all 0.5s ease;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.btn-outline-danger:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.btn-outline-danger:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 0.5;
}
.btn-outline-danger:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn-outline-danger {
white-space: nowrap; /* Never wrap button text to multiple lines */ border-width: 2px; --tw-border-opacity: 1; border-color: rgb(255 0 0 / var(--tw-border-opacity, 1)); background-color: transparent; --tw-text-opacity: 1; color: rgb(255 0 0 / var(--tw-text-opacity, 1));
}
.btn-outline-danger:hover {
background-color: rgb(255 0 0 / 0.1);
--tw-brightness: brightness(.9);
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);
}
.btn-outline-danger:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(255 0 0 / var(--tw-ring-opacity, 1));
}
.btn-outline-danger {
padding: 0.75rem 1rem; /* 12px 16px */
font-size: 0.875rem; /* 14px */
font-weight: 500;
}
/* === PAGINATION === */
/* Bootstrap pagination styling - matches design system */
.pagination {
margin: 0px;
display: flex;
list-style-type: none;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0px;
}
.pagination .page-item {
margin: 0px;
list-style-type: none;
padding: 0px;
}
.pagination .page-link {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(40 40 50 / var(--tw-border-opacity, 1));
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
text-decoration-line: none;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
min-width: 2.5rem; /* 40px */
height: 2.5rem; /* 40px */
padding: 0.5rem 0.75rem; /* 8px 12px */
font-size: 0.875rem; /* 14px */
font-weight: 500;
}
.pagination .page-link:hover:not([aria-disabled="true"]) {
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
/* Active page */
.pagination .page-item.active .page-link {
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(10 10 20 / var(--tw-text-opacity, 1));
font-weight: 600;
}
/* Disabled state (Previous when on first page) */
.pagination .page-item.disabled .page-link {
cursor: not-allowed;
opacity: 0.3;
}
/* First/Last arrow buttons */
.pagination .page-item.first .page-link,
.pagination .page-item.last .page-link {
font-weight: 400;
}
/* === CARDS === */
/* Base card - foundation for all card types */
.card {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 0.75rem;
border-width: 1px;
border-color: rgb(26 26 36 / 0.8);
padding: 2rem;
box-shadow: 0 2px 5.6px 0 rgba(0, 0, 0, 0.50);
}
.blog-card{
}
.blog-card img {
margin-bottom: 1.25rem;
}
.blog-card span.date {
margin-bottom: 0.5rem;
width: 70px;
white-space: nowrap;
text-align: left;
font-size: 12px;
line-height: 20px;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.blog-card span.date {
margin-bottom: 0px;
text-align: right;
}
}
/* Date pill - Small date badge in top-right corner of blog card images */
.date-pill {
position: absolute;
top: 0.75rem;
right: 0.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
border-radius: 9999px;
font-size: 12px;
line-height: 20px;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
white-space: nowrap;
background-color: #0D0D15;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.blog-card p {
padding-bottom: 1rem;
font-size: 14px;
line-height: 20px;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
/* Keyframe animation for subtle shadow pulsing effect */
@keyframes shadowPulse {
0%, 100% {
opacity: 1;
filter: blur(2rem);
}
50% {
opacity: 0.75;
filter: blur(2.4rem);
}
}
/* Card accent variant - Premium/highlighted card with custom border, background, and glow effect */
/* Using .card.card-accent for higher specificity to override .card border */
.card.card-accent {
position: relative;
--tw-bg-opacity: 1;
background-color: rgb(10 10 20 / var(--tw-bg-opacity, 1));
}
.img-wrapper.card.card-accent::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%; /* Much larger gradient from left */
background: linear-gradient(to left, transparent 0%, rgba(10, 10, 20, 0.6) 40%, #0A0A14 80%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.img-wrapper.card.card-accent::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%; /* Gradient covers right half of image */
background: linear-gradient(to right, transparent 0%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.card.card-accent {
border: 2px solid #6366F1;
}
.card-accent::after {
content: '';
pointer-events: none;
position: absolute;
left: 50%;
bottom: -3.5rem;
transform: translateX(-50%) scaleY(1);
transform-origin: center bottom;
width: 130%;
height: 36%;
z-index: -1;
filter: blur(2rem);
opacity: 0.35;
background: radial-gradient(ellipse at center, rgba(139, 159, 255, 0.25) 0%, rgba(139, 159, 255, 0) 70%);
will-change: transform, opacity, filter;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Enhanced glow on hover for accent cards */
.card-accent.card-hover:hover::after {
/*
transform: translateX(-50%) scaleY(1.3);
opacity: .1;
filter: blur(1.5rem);
*/
}
/* Card background variants */
.card-solid {
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
}
.card-transparent {
background-color: transparent;
}
/* Card with gradient background - decorative blue gradient */
.card-gradient-blue {
background: linear-gradient(180deg, #8B9FFF 0%, #6B7FE8 100%);
border: 1px solid rgba(107, 127, 232, 0.3);
min-height: 400px;
}
/* Card with radial gradient (existing hero cards) */
.card-gradient {
border-radius: 1rem;
border-width: 1px;
border-color: rgb(26 26 36 / 0.5);
padding: 1.5rem;
background: radial-gradient(350.94% 343.49% at 51.82% -159.87%, #404657 0%, rgba(64, 70, 87, 0) 100%);
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
/* Card with darker gradient */
.card-gradient-dark {
border-radius: 1rem;
border-width: 1px;
border-color: rgb(26 26 36 / 0.5);
padding: 1.5rem;
background: radial-gradient(350.94% 343.49% at 51.82% -159.87%, #404657 0%, rgba(64, 70, 87, 0.5) 100%);
}
/* Card padding variants */
.card-sm {
padding: 1rem;
}
.card-md {
padding: 1.5rem;
}
.card-lg {
padding: 2rem;
}
@media (min-width: 1024px) {
.card-lg {
padding: 3rem;
}
}
/* Card content elements */
.card-title {
margin-bottom: 1rem;
font-size: 24px;
line-height: 28.8px;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.card-title {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
.card-subtitle {
margin-bottom: 0.5rem;
display: block;
font-size: 18px;
line-height: 27px;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
.card-body {
line-height: 1.625;
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
}
/* === FORMS === */
/* Form group wrapper */
.form-group {
margin-bottom: 0.5rem;
display: flex;
flex-direction: column;
}
/* Form label - Figma specs: text-xs/leading-5/normal */
.form-label {
margin-bottom: 0.5rem;
display: block;
font-size: 12px;
line-height: 20px;
font-weight: 400;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
line-height: 1.25rem; /* 20px = leading-5 */
}
/* Base input styles - Figma specs */
/* Higher specificity to override Tailwind Forms base reset */
input.form-input,
textarea.form-input {
height: 3rem;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 10px;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(30 30 40 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
input.form-input::-moz-placeholder, textarea.form-input::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(79 79 85 / var(--tw-text-opacity, 1));
}
input.form-input::placeholder,
textarea.form-input::placeholder {
--tw-text-opacity: 1;
color: rgb(79 79 85 / var(--tw-text-opacity, 1));
}
input.form-input,
textarea.form-input {
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: 200ms;
}
/* Focus state */
input.form-input:focus,
textarea.form-input:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
--tw-ring-opacity: 0.2;
}
/* Input size variants */
input.form-input-sm,
textarea.form-input-sm {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 14px;
line-height: 20px;
}
input.form-input-lg,
textarea.form-input-lg {
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 18px;
line-height: 27px;
}
/* Input states */
input.form-input:disabled,
textarea.form-input:disabled {
cursor: not-allowed;
--tw-bg-opacity: 1;
background-color: rgb(30 30 40 / var(--tw-bg-opacity, 1));
opacity: 0.6;
}
input.form-input-error,
textarea.form-input-error {
--tw-border-opacity: 1;
border-color: rgb(255 0 0 / var(--tw-border-opacity, 1));
}
input.form-input-error:focus,
textarea.form-input-error:focus {
--tw-border-opacity: 1;
border-color: rgb(255 0 0 / var(--tw-border-opacity, 1));
--tw-ring-opacity: 1;
--tw-ring-color: rgb(255 0 0 / var(--tw-ring-opacity, 1));
}
input.form-input-error,
textarea.form-input-error {
/* Inherit base form-input styles */
height: 2.5rem;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 10px;
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
input.form-input-error::-moz-placeholder, textarea.form-input-error::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(79 79 85 / var(--tw-text-opacity, 1));
}
input.form-input-error::placeholder,
textarea.form-input-error::placeholder {
--tw-text-opacity: 1;
color: rgb(79 79 85 / var(--tw-text-opacity, 1));
}
input.form-input-error,
textarea.form-input-error {
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: 200ms;
}
input.form-input-error:focus,
textarea.form-input-error:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 0.2;
}
/* Textarea */
.form-textarea {
min-height: 120px;
resize: vertical;
}
input.form-textarea,
textarea.form-textarea {
height: 3rem;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 10px;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(30 30 40 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
input.form-textarea::-moz-placeholder, textarea.form-textarea::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(79 79 85 / var(--tw-text-opacity, 1));
}
input.form-textarea::placeholder,
textarea.form-textarea::placeholder {
--tw-text-opacity: 1;
color: rgb(79 79 85 / var(--tw-text-opacity, 1));
}
input.form-textarea,
textarea.form-textarea {
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: 200ms;
}
input.form-textarea:focus,
textarea.form-textarea:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
--tw-ring-opacity: 0.2;
}
input.form-textarea:disabled,
textarea.form-textarea:disabled {
cursor: not-allowed;
--tw-bg-opacity: 1;
background-color: rgb(30 30 40 / var(--tw-bg-opacity, 1));
opacity: 0.6;
}
/* Error message */
.form-error {
margin-top: 0.25rem;
text-align: left;
font-size: 14px;
line-height: 20px;
font-weight: 300;
--tw-text-opacity: 1;
color: rgb(255 0 0 / var(--tw-text-opacity, 1));
}
/* Help text */
.form-help {
margin-top: 0.25rem;
font-size: 14px;
line-height: 20px;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
/* Checkbox/Radio custom styling */
.form-checkbox {
border-radius: 0.25rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(129 129 140 / var(--tw-border-opacity, 1));
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;
}
.form-checkbox:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 1;
--tw-ring-color: rgb(255 46 121 / var(--tw-ring-opacity, 1));
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #0A0A14;
}
.form-checkbox:checked {
--tw-border-opacity: 1;
border-color: rgb(255 46 121 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(255 46 121 / var(--tw-bg-opacity, 1));
}
.form-radio {
border-radius: 9999px;
border-radius: 0.25rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(129 129 140 / var(--tw-border-opacity, 1));
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;
}
.form-radio:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 1;
--tw-ring-color: rgb(255 46 121 / var(--tw-ring-opacity, 1));
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #0A0A14;
}
.form-radio:checked {
--tw-border-opacity: 1;
border-color: rgb(255 46 121 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(255 46 121 / var(--tw-bg-opacity, 1));
}
/* Select dropdown */
.form-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 2.5rem;
}
input.form-select,
textarea.form-select {
height: 3rem;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 10px;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(30 30 40 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
input.form-select::-moz-placeholder, textarea.form-select::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(79 79 85 / var(--tw-text-opacity, 1));
}
input.form-select::placeholder,
textarea.form-select::placeholder {
--tw-text-opacity: 1;
color: rgb(79 79 85 / var(--tw-text-opacity, 1));
}
input.form-select,
textarea.form-select {
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: 200ms;
}
input.form-select:focus,
textarea.form-select:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
--tw-ring-opacity: 0.2;
}
input.form-select:disabled,
textarea.form-select:disabled {
cursor: not-allowed;
--tw-bg-opacity: 1;
background-color: rgb(30 30 40 / var(--tw-bg-opacity, 1));
opacity: 0.6;
}
.form-select {
background-size: 1.5em 1.5em;
background-position: right;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2381818C' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}
/* === BADGES === */
/* Base badge */
.badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 14px;
line-height: 20px;
font-weight: 500;
}
/* Badge color variants */
.badge-primary {
background-color: rgb(255 46 121 / var(--tw-bg-opacity, 1));
--tw-bg-opacity: 0.2;
--tw-text-opacity: 1;
color: rgb(255 46 121 / var(--tw-text-opacity, 1));
white-space: nowrap;
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 14px;
line-height: 20px;
font-weight: 500;
}
.badge-secondary {
background-color: rgb(191 50 246 / var(--tw-bg-opacity, 1));
--tw-bg-opacity: 0.2;
--tw-text-opacity: 1;
color: rgb(191 50 246 / var(--tw-text-opacity, 1));
white-space: nowrap;
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 14px;
line-height: 20px;
font-weight: 500;
}
.badge-success {
background-color: rgb(55 194 94 / var(--tw-bg-opacity, 1));
--tw-bg-opacity: 0.2;
--tw-text-opacity: 1;
color: rgb(55 194 94 / var(--tw-text-opacity, 1));
white-space: nowrap;
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 14px;
line-height: 20px;
font-weight: 500;
}
.badge-error {
background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1));
--tw-bg-opacity: 0.2;
--tw-text-opacity: 1;
color: rgb(255 0 0 / var(--tw-text-opacity, 1));
white-space: nowrap;
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 14px;
line-height: 20px;
font-weight: 500;
}
.badge-warning {
background-color: rgb(255 184 106 / var(--tw-bg-opacity, 1));
--tw-bg-opacity: 0.2;
--tw-text-opacity: 1;
color: rgb(255 184 106 / var(--tw-text-opacity, 1));
white-space: nowrap;
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 14px;
line-height: 20px;
font-weight: 500;
}
.badge-info {
background-color: rgb(0 240 255 / var(--tw-bg-opacity, 1));
--tw-bg-opacity: 0.2;
--tw-text-opacity: 1;
color: rgb(0 240 255 / var(--tw-text-opacity, 1));
white-space: nowrap;
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 14px;
line-height: 20px;
font-weight: 500;
}
/* Badge size variants */
.badge-sm {
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
font-size: 12px;
line-height: 20px;
}
.badge-lg {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 16px;
line-height: 24px;
}
/* Badge date pill - Glassmorphism lavender style for dates */
.badge-date {
display: inline-flex;
align-items: center;
font-size: 14px;
line-height: 20px;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(129 140 248 / var(--tw-text-opacity, 1));
height: 40px;
padding: 8px 20px;
border-radius: 41px;
border: 1px solid rgba(124, 135, 250, 0.33);
background: rgba(49, 56, 125, 0.13);
box-shadow: 0 0 15.9px -3px rgba(124, 135, 250, 0.25) inset;
}
/* Badge latest - Glassmorphism green style for "Latest update" */
.badge-latest {
display: inline-flex;
align-items: center;
font-size: 14px;
line-height: 20px;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(52 211 153 / var(--tw-text-opacity, 1));
height: 40px;
padding: 8px 20px;
border-radius: 41px;
border: 1px solid rgba(124, 250, 206, 0.33);
background: rgba(49, 125, 116, 0.13);
box-shadow: 0 0 15.9px -3px rgba(124, 250, 214, 0.25) inset;
}
/* === ALERTS === */
/* Base alert */
.alert {
border-radius: 10px;
border-width: 1px;
padding: 1rem;
}
/* Alert variants */
.alert-info {
--tw-border-opacity: 1;
border-color: rgb(0 240 255 / var(--tw-border-opacity, 1));
background-color: rgb(0 240 255 / var(--tw-bg-opacity, 1));
--tw-bg-opacity: 0.1;
--tw-text-opacity: 1;
color: rgb(0 240 255 / var(--tw-text-opacity, 1));
border-radius: 10px;
border-width: 1px;
padding: 1rem;
}
.alert-success {
--tw-border-opacity: 1;
border-color: rgb(55 194 94 / var(--tw-border-opacity, 1));
background-color: rgb(55 194 94 / var(--tw-bg-opacity, 1));
--tw-bg-opacity: 0.1;
--tw-text-opacity: 1;
color: rgb(55 194 94 / var(--tw-text-opacity, 1));
border-radius: 10px;
border-width: 1px;
padding: 1rem;
}
.alert-warning {
--tw-border-opacity: 1;
border-color: rgb(255 184 106 / var(--tw-border-opacity, 1));
background-color: rgb(255 184 106 / var(--tw-bg-opacity, 1));
--tw-bg-opacity: 0.1;
--tw-text-opacity: 1;
color: rgb(255 184 106 / var(--tw-text-opacity, 1));
border-radius: 10px;
border-width: 1px;
padding: 1rem;
}
.alert-error {
--tw-border-opacity: 1;
border-color: rgb(255 0 0 / var(--tw-border-opacity, 1));
background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1));
--tw-bg-opacity: 0.1;
--tw-text-opacity: 1;
color: rgb(255 0 0 / var(--tw-text-opacity, 1));
border-radius: 10px;
border-width: 1px;
padding: 1rem;
}
/* Alert with icon */
.alert-with-icon {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
/* === MODALS === */
/* Modal overlay */
.modal-overlay {
position: fixed;
inset: 0px;
z-index: 40;
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
--tw-bg-opacity: 0.5;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
/* Modal container */
.modal {
position: fixed;
inset: 0px;
z-index: 50;
overflow-y: auto;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
/* Modal content */
.modal-content {
width: 100%;
max-width: 32rem;
--tw-bg-opacity: 1;
background-color: rgb(10 10 20 / var(--tw-bg-opacity, 1));
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 0.75rem;
border-width: 1px;
border-color: rgb(26 26 36 / 0.8);
padding: 2rem;
box-shadow: 0 2px 5.6px 0 rgba(0, 0, 0, 0.50);
}
.modal-content.card-accent {
position: relative;
--tw-bg-opacity: 1;
background-color: rgb(10 10 20 / var(--tw-bg-opacity, 1));
}
.img-wrapper.modal-content.card-accent::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%; /* Much larger gradient from left */
background: linear-gradient(to left, transparent 0%, rgba(10, 10, 20, 0.6) 40%, #0A0A14 80%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.img-wrapper.modal-content.card-accent::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%; /* Gradient covers right half of image */
background: linear-gradient(to right, transparent 0%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.modal-content.card-accent {
border: 2px solid #6366F1;
}
.grid > .grid > .modal-content {
display: block; /* Override flex, use block for natural height */
height: -moz-fit-content;
height: fit-content; /* Ensure card height fits content */
align-self: start; /* Prevent stretching in grid */
margin: 0; /* Remove any default margin that could affect spacing */
}
.modal-content {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
animation: modalFadeIn 0.2s ease-out;
}
@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.modal-header {
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-size: 20px;
line-height: 28px;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.modal-close {
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
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;
}
.modal-close:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.modal-body {
margin-bottom: 1.5rem;
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
}
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
}
/* === REVIEWS === */
/* Review content area */
.review-content {
margin-bottom: 2rem;
display: flex;
flex-direction: column; /* 32px fixed spacing to footer */
}
/* Review description text - Design system specs */
.review-description {
margin: 0px;
text-align: left;
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
font-size: 16px;
line-height: 24px; /* 16px - design system (instead of 15px) */
font-weight: 400;
line-height: 1.5rem; /* 24px - 160% */
}
/* Review footer - author info and avatar placeholder */
.review-footer {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1rem;
}
/* Review author section */
.review-author {
display: flex;
flex-direction: column;
gap: 0px;
text-align: left;
}
/* Review nickname - Design system specs */
p.review-nickname {
margin: 0px;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
font-size: 14px;
line-height: 20px; /* 14px - design system (instead of 13px) */
font-weight: 400;
line-height: 1.5rem; /* 24px - 184.615% */
}
/* Review timestamp - Design system specs */
p.review-timestamp {
margin: 0px;
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
font-size: 14px;
line-height: 20px; /* 14px - design system (instead of 13px) */
font-weight: 400;
line-height: 1.5rem; /* 24px - 184.615% */
}
/* Review rating stars */
.review-rating {
display: flex;
gap: 0.25rem;
}
/* Star icon */
.star-icon {
--tw-text-opacity: 1;
color: rgb(227 160 8 / var(--tw-text-opacity, 1));
width: 20px;
height: 20px;
}
/* Avatar placeholder with fallback icon */
.review-avatar {
border-radius: 10px;
--tw-bg-opacity: 1;
background-color: rgb(30 30 40 / var(--tw-bg-opacity, 1));
width: 48px;
height: 48px;
flex-shrink: 0;
background-image: url('/themes/exmtweaks-v2/assets/images/avatar.png');
background-repeat: no-repeat;
background-position: center bottom;
background-size: 70%;
}
/* Reviews masonry - override flex behavior for natural height */
/* Parent grid - ensure columns align at start */
.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 > .grid {
align-content: start; /* Align grid items to start */
grid-auto-rows: max-content; /* Each row takes only needed height */
}
/* Review cards - natural height without stretching */
.grid > .grid > .card {
display: block; /* Override flex, use block for natural height */
height: -moz-fit-content;
height: fit-content; /* Ensure card height fits content */
align-self: start; /* Prevent stretching in grid */
margin: 0; /* Remove any default margin that could affect spacing */
}
/* === HAMBURGER MENU === */
/* Thinner lines for hamburger menu - override tailwind-hamburgers default */
.tham .tham-inner,
.tham .tham-inner::before,
.tham .tham-inner::after {
height: 1px !important; /* Default is 2px, make it thinner */
}
/* === CONTAINER-ALIGNED CAROUSEL === */
/* Carousel navigation button - Figma design */
.carousel-nav-btn {
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.carousel-nav-btn:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.carousel-nav-btn {
background-color: #14141E; /* Core Grey 800 */
border: 1px solid #1A1A24; /* Core Grey 750 */
color: #FFF;
width: 38px;
height: 38px;
}
.carousel-nav-btn:hover {
background-color: #1A1A24; /* Core Grey 750 - lighter on hover */
border-color: rgba(255, 255, 255, 0.1); /* Subtle white border on hover */
}
.carousel-nav-btn:active {
background-color: #1A1A24; /* Maintain hover background on click */
border-color: #1A1A24; /* Maintain border to prevent flash */
}
.carousel-nav-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px #1A1A24; /* Core Grey 750 ring */
}
.carousel-nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* Container-aligned carousel section */
.section-carousel {
position: relative;
width: 100%;
}
.img-wrapper.section-carousel::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%; /* Much larger gradient from left */
background: linear-gradient(to left, transparent 0%, rgba(10, 10, 20, 0.6) 40%, #0A0A14 80%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.img-wrapper.section-carousel::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%; /* Gradient covers right half of image */
background: linear-gradient(to right, transparent 0%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.section-carousel {
overflow: hidden !important; /* Clip slides at section level */
}
/* Container-aligned carousel - full width with gradient masks on both sides */
.container-aligned-carousel {
position: relative;
width: 100%;
}
.img-wrapper.container-aligned-carousel::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%; /* Much larger gradient from left */
background: linear-gradient(to left, transparent 0%, rgba(10, 10, 20, 0.6) 40%, #0A0A14 80%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.img-wrapper.container-aligned-carousel::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%; /* Gradient covers right half of image */
background: linear-gradient(to right, transparent 0%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.container-aligned-carousel {
overflow: visible !important; /* Allow swiper to work, clipping happens at parent */
}
/* Gradient mask overlay on LEFT side - fades slides into background */
.container-aligned-carousel::before {
content: '';
position: absolute;
top: 0;
height: 100%;
width: 300px; /* Gradient width */
background: linear-gradient(to right, #0A0A14 0%, transparent 100%);
pointer-events: none; /* Allow clicks through gradient */
z-index: 10;
/* Mobile: left edge of viewport */
left: 0;
}
/* Gradient mask overlay on RIGHT side - fades slides into background */
.container-aligned-carousel::after {
content: '';
position: absolute;
top: 0;
height: 100%;
width: 300px; /* Gradient width */
background: linear-gradient(to left, #0A0A14 0%, transparent 100%);
pointer-events: none; /* Allow clicks through gradient */
z-index: 10;
/* Mobile: right edge of viewport minus padding */
right: 0;
}
/* Tablet and up: account for padding */
@media (min-width: 640px) {
.container-aligned-carousel::after {
right: 0;
}
}
/* Desktop: account for container constraint */
@media (min-width: 1024px) {
.container-aligned-carousel::after {
right: 0;
}
}
/* Very wide screens: position gradient at container edge */
@media (min-width: 1632px) {
/* 1632px = 1536px (max container) + 96px (2 × 48px padding) */
.container-aligned-carousel::after {
/* Calculate offset from right edge to container boundary */
/* (viewport-width - 1536px container) / 2 */
right: calc((100vw - 1536px) / 2);
}
}
/* Swiper wrapper - prevent overflow */
.container-aligned-carousel .swiper-wrapper {
align-items: stretch;
}
/* Swiper slide in container-aligned carousel */
.container-aligned-carousel .swiper-slide {
height: auto;
/* Default mobile: 1 slide = full width minus padding */
width: calc(100vw - 48px); /* 24px padding on each side */
}
/* Tablet: 2 slides per view */
@media (min-width: 768px) {
.container-aligned-carousel .swiper-slide {
/* Container width (min of 100vw and 1536px) - 2*padding - 1*gap / 2 slides */
width: calc((min(100vw, 1536px) - 144px - 24px) / 2); /* 48px padding each side */
}
}
/* Desktop: 3 slides per view */
@media (min-width: 1024px) {
.container-aligned-carousel .swiper-slide {
/* Container width (min of 100vw and 1536px) - 2*padding - 2*gaps / 3 slides */
width: calc((min(100vw, 1536px) - 149px - 31px) / 3); /* 48px padding each side, 2×24px gaps */
}
}
/* When screen is smaller than container on mobile */
@media (max-width: 640px) {
.container-aligned-carousel .swiper-slide {
width: calc(100vw - 88px); /* 24px padding on each side */
}
}
@media (min-width: 640px) and (max-width: 767px) {
.container-aligned-carousel .swiper-slide {
width: calc(100vw - 131px); /* 48px padding on each side */
}
}
/* Navigation buttons - positioned inside carousel */
.container-aligned-carousel .swiper-button-prev,
.container-aligned-carousel .swiper-button-next {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
--swiper-navigation-size: 44px;
}
.container-aligned-carousel .swiper-button-prev {
left: 24px; /* px-6 */
}
.container-aligned-carousel .swiper-button-next {
right: 24px; /* px-6 */
}
@media (min-width: 640px) {
.container-aligned-carousel .swiper-button-prev {
left: 48px; /* sm:px-12 */
}
.container-aligned-carousel .swiper-button-next {
right: 48px; /* sm:px-12 */
}
}
/* Pagination bullets */
.container-aligned-carousel .swiper-pagination {
bottom: 0px;
}
.container-aligned-carousel .swiper-pagination-bullet {
--tw-bg-opacity: 1;
background-color: rgb(129 129 140 / var(--tw-bg-opacity, 1));
opacity: 0.5;
}
.container-aligned-carousel .swiper-pagination-bullet-active {
--tw-bg-opacity: 1;
background-color: rgb(255 46 121 / var(--tw-bg-opacity, 1));
opacity: 1;
}
/* === ACCORDION === */
/* Accordion wrapper - contains all accordion items */
.accordion-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Base accordion item - closed state */
.accordion {
display: flex;
flex-direction: column;
border-radius: 16px; /* 16px - design system (close to 18px, standardized) */
border: 1px solid #141421;
--tw-bg-opacity: 1;
background-color: rgb(13 13 22 / var(--tw-bg-opacity, 1));
overflow: hidden; /* Ensures content doesn't overflow rounded corners */
transition: background-color 300ms ease-in-out;
}
/* Accordion item - hover state (before opening) */
.accordion:hover {
background: #181826; /* Same as open state - immediate color change */
}
/* Accordion item - open state */
.accordion.open {
background: #181826; /* Lighter background when open */
}
/* Accordion button/toggle - closed state */
.accordion-btn {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
text-align: left;
font-weight: 400;
--tw-text-opacity: 1;
color: rgb(235 235 239 / var(--tw-text-opacity, 1));
border-radius: 16px; /* 16px - design system (close to 18px, standardized) */
height: 92px;
padding: 0 40px;
background: transparent; /* Inherit parent background */
border: none; /* Remove default button border */
width: 100%; /* Full width */
font-size: 1.125rem; /* 18px */
line-height: 1.5;
/* Specific transitions - NOT transition-all to avoid outline flash */
transition-property: color, background-color;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
/* Remove ALL outline properties - prevents white flash on click */
outline: none !important;
outline-width: 0 !important;
outline-style: none !important;
outline-color: transparent !important;
outline-offset: 0 !important;
box-shadow: none !important;
}
/* Remove focus-visible ring for accordion buttons */
.accordion-btn:focus,
.accordion-btn:focus-visible,
.accordion-btn:active {
outline: none !important;
outline-width: 0 !important;
outline-style: none !important;
outline-color: transparent !important;
outline-offset: 0 !important;
box-shadow: none !important;
}
/* Accordion button hover state */
.accordion-btn:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
background: #181826; /* Same as open state */
}
/* Accordion button active/toggled state */
.accordion-btn.toggled {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
border-radius: 16px; /* 16px - design system (keep all corners rounded like closed state) */
background: transparent; /* Inherit parent's #181826 */
border-bottom: none; /* No separator - unified appearance */
}
/* Plus/Minus icon container */
.accordion-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.img-wrapper.accordion-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%; /* Much larger gradient from left */
background: linear-gradient(to left, transparent 0%, rgba(10, 10, 20, 0.6) 40%, #0A0A14 80%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.img-wrapper.accordion-icon::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%; /* Gradient covers right half of image */
background: linear-gradient(to right, transparent 0%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.accordion-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
margin-left: auto; /* Push to the right */
}
/* Plus icon lines */
.accordion-icon-line {
position: absolute;
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
width: 16px;
height: 2px;
}
/* Vertical line (Y-axis) - rotates to horizontal when open */
.accordion-icon-line-y {
transform: rotate(90deg);
}
/* When accordion is toggled, rotate Y line to 0deg (becomes horizontal, creating minus icon) */
.accordion-btn.toggled .accordion-icon-line-y {
transform: rotate(0deg);
}
/* Accordion content body - hidden by default */
.accordion-body {
overflow: hidden;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
max-height: 0;
opacity: 0;
}
/* Accordion content body - visible when parent .accordion has .open class */
.accordion.open .accordion-body {
max-height: 5000px; /* Large value to accommodate long content with images */
opacity: 1;
}
/* Accordion content inner padding */
.accordion-content {
padding-top: 2rem;
padding-bottom: 2rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
font-weight: 300;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
font-size: 1rem; /* 16px */
line-height: 1.75; /* 28px */
}
/* Accordion content paragraphs */
.accordion-content p {
margin-bottom: 1rem;
}
.accordion-content p:last-child {
margin-bottom: 0px;
}
/* Accordion content lists */
.accordion-content ul,
.accordion-content ol {
margin-left: 1.5rem;
margin-bottom: 1rem;
}
.accordion-content li {
margin-bottom: 0.5rem;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.accordion-btn {
height: auto;
min-height: 72px;
padding: 20px 24px;
font-size: 1rem; /* 16px on mobile */
}
.accordion-content {
padding: 24px 24px;
}
}
/* === IMAGES === */
/* Showcase image shadow - Deep multi-layer shadow for app screenshots */
/* Figma specs: 5-layer shadow for realistic depth effect */
.img-shadow-showcase {
box-shadow:
193px 787px 227px 0 rgba(0, 0, 0, 0.00),
124px 503px 207px 0 rgba(0, 0, 0, 0.03),
70px 283px 175px 0 rgba(0, 0, 0, 0.10),
31px 126px 130px 0 rgba(0, 0, 0, 0.17),
8px 31px 71px 0 rgba(0, 0, 0, 0.20);
}
/* Showcase image wrapper with purple glow effect */
/* Figma specs: Purple outer glow with additive blending */
.img-showcase-wrapper {
position: relative;
display: inline-block;
}
.img-wrapper.img-showcase-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%; /* Much larger gradient from left */
background: linear-gradient(to left, transparent 0%, rgba(10, 10, 20, 0.6) 40%, #0A0A14 80%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.img-wrapper.img-showcase-wrapper::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%; /* Gradient covers right half of image */
background: linear-gradient(to right, transparent 0%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.img-showcase-wrapper {
overflow: visible; /* CRITICAL: Allow glow to extend beyond wrapper */
}
.img-showcase-wrapper::after {
position: absolute;
z-index: -10;
content: '';
top: 0em;
left: 0em;
right: 0em;
bottom: 0em;
background: #5745F8;
filter: blur(1em);
}
/* === PRICING COMPONENTS === */
/* Popular badge - positioned absolutely on pricing cards */
.badge-popular {
position: absolute;
top: -0.75rem;
right: 1.5rem;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: rgb(255 46 121 / var(--tw-bg-opacity, 1));
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 12px;
line-height: 20px;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(10 10 20 / var(--tw-text-opacity, 1));
}
/* Pricing card base */
.pricing-card {
position: relative;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 0.75rem;
border-width: 1px;
border-color: rgb(26 26 36 / 0.8);
padding: 2rem;
box-shadow: 0 2px 5.6px 0 rgba(0, 0, 0, 0.50);
}
.pricing-card.card-accent {
position: relative;
--tw-bg-opacity: 1;
background-color: rgb(10 10 20 / var(--tw-bg-opacity, 1));
}
.img-wrapper.pricing-card.card-accent::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%; /* Much larger gradient from left */
background: linear-gradient(to left, transparent 0%, rgba(10, 10, 20, 0.6) 40%, #0A0A14 80%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.img-wrapper.pricing-card.card-accent::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%; /* Gradient covers right half of image */
background: linear-gradient(to right, transparent 0%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.pricing-card.card-accent {
border: 2px solid #6366F1;
}
.grid > .grid > .pricing-card {
display: block; /* Override flex, use block for natural height */
height: -moz-fit-content;
height: fit-content; /* Ensure card height fits content */
align-self: start; /* Prevent stretching in grid */
margin: 0; /* Remove any default margin that could affect spacing */
}
.img-wrapper.pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%; /* Much larger gradient from left */
background: linear-gradient(to left, transparent 0%, rgba(10, 10, 20, 0.6) 40%, #0A0A14 80%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.img-wrapper.pricing-card::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%; /* Gradient covers right half of image */
background: linear-gradient(to right, transparent 0%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
/* Pricing card header with title and price */
.pricing-card-header {
margin-bottom: 2rem;
position: relative;
padding-bottom: 2rem; /* 32px spacing to border */
}
.pricing-card-rows {
display: grid;
grid-auto-rows: auto; /* Každý riadok má svoju vlastnú výšku */
}
.pricing-card-dashed-row {
position: relative;
padding-top: 2rem;
padding-bottom: 2rem;
/* Dashed border base styles */
--dashed-border: repeating-linear-gradient(
to right,
rgba(40, 40, 50, 0.8) 0,
rgba(40, 40, 50, 0.8) 4px,
transparent 4px,
transparent 8px
);
&::before,
&::after {
content: '';
position: absolute;
left: -2rem;
right: -2rem;
height: 1px;
background-image: var(--dashed-border);
}
&::before {
top: 0;
display: none; /* Hidden by default */
}
&::after {
bottom: 0;
}
/* First row - show top border */
&:first-child::before {
display: block;
}
/* Last row - hide bottom border */
&:last-child::after {
display: none;
}
}
/* Pricing card header dashed border - 4px dash, 4px gap pattern using repeating-linear-gradient */
/* Border spans full card width (ignores card padding) */
.pricing-card-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0rem;
right: 0rem;
height: 1px;
background-image: repeating-linear-gradient(
to right,
rgba(40, 40, 50, 0.8) 0,
rgba(40, 40, 50, 0.8) 4px,
transparent 4px,
transparent 8px
);
}
.pricing-card-footer {
padding-top: 2rem;
}
.pricing-card-footer::after {
content: '';
position: absolute;
top: 0;
left: 0rem;
right: 0rem;
height: 1px;
background-image: repeating-linear-gradient(
to right,
rgba(40, 40, 50, 0.8) 0,
rgba(40, 40, 50, 0.8) 4px,
transparent 4px,
transparent 8px
);
}
/* Pricing card header in accent card - uses accent border color */
.card-accent .pricing-card-header::after {
background-image: repeating-linear-gradient(
to right,
#25253B 0,
#25253B 4px,
transparent 4px,
transparent 8px
);
}
/* Pricing card section with top border - uses ::before for border above */
.pricing-card-section-top {
position: relative;
padding-top: 2rem; /* 32px spacing from border */
}
.pricing-card-section-top::before {
content: '';
position: absolute;
top: 0;
left: -2rem; /* Negative margin to reach card edge */
right: -2rem;
height: 1px;
background-image: repeating-linear-gradient(
to right,
rgba(40, 40, 50, 0.8) 0,
rgba(40, 40, 50, 0.8) 4px,
transparent 4px,
transparent 8px
);
}
/* Accent card variant */
.card-accent .pricing-card-section-top::before {
background-image: repeating-linear-gradient(
to right,
#25253B 0,
#25253B 4px,
transparent 4px,
transparent 8px
);
}
.pricing-card-title {
margin-bottom: 0px;
font-size: 24px;
line-height: 28.8px;
font-weight: 400;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.pricing-card-price {
margin-top: 0.75rem;
display: flex;
align-items: baseline;
gap: 0.25rem;
}
.pricing-card-amount {
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.pricing-card-period {
font-size: 14px;
line-height: 20px;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
/* Device counter dashed borders - 4px dash, 4px gap pattern */
/* Borders span full card width (ignores card padding) */
.device-counter-section {
position: relative;
margin-bottom: 2rem;
}
.img-wrapper.device-counter-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%; /* Much larger gradient from left */
background: linear-gradient(to left, transparent 0%, rgba(10, 10, 20, 0.6) 40%, #0A0A14 80%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.img-wrapper.device-counter-section::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%; /* Gradient covers right half of image */
background: linear-gradient(to right, transparent 0%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.device-counter-section {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.device-counter-section::before {
content: '';
position: absolute;
top: 0;
left: -2rem; /* Negative margin to reach card edge (card has p-8 = 2rem) */
right: -2rem;
height: 1px;
background-image: repeating-linear-gradient(
to right,
#25253B 0,
#25253B 4px,
transparent 4px,
transparent 8px
);
}
.device-counter-section::after {
content: '';
position: absolute;
bottom: 0;
left: -2rem; /* Negative margin to reach card edge (card has p-8 = 2rem) */
right: -2rem;
height: 1px;
background-image: repeating-linear-gradient(
to right,
#25253B 0,
#25253B 4px,
transparent 4px,
transparent 8px
);
}
/* Feature list in pricing cards */
.feature-list {
margin-bottom: 2rem;
}
.feature-list > :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));
}
.feature-list {
text-align: left;
}
.feature-list-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.feature-list-item-disabled {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.feature-list-item-disabled .icon {
--tw-text-opacity: 1;
color: rgb(59 59 68 / var(--tw-text-opacity, 1));
}
.feature-list-item-disabled .feature-list-text {
--tw-text-opacity: 1;
color: rgb(59 59 68 / var(--tw-text-opacity, 1));
}
.feature-list-text {
font-size: 14px;
line-height: 20px;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Device counter component */
.device-counter {
margin-bottom: 1.5rem;
}
.device-counter-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 16px;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(26 26 36 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(191 50 246 / var(--tw-bg-opacity, 1));
padding: 0.75rem;
}
.device-counter-label {
font-size: 14px;
line-height: 20px;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
/* Pricing toggle - Pill switcher with animated sliding background */
.pricing-toggle-container {
position: relative;
display: flex;
align-items: center;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
padding: 0.25rem;
}
.img-wrapper.pricing-toggle-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%; /* Much larger gradient from left */
background: linear-gradient(to left, transparent 0%, rgba(10, 10, 20, 0.6) 40%, #0A0A14 80%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.img-wrapper.pricing-toggle-container::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%; /* Gradient covers right half of image */
background: linear-gradient(to right, transparent 0%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.pricing-toggle-indicator {
position: absolute;
top: 0.25rem;
bottom: 0.25rem;
left: 0.25rem;
border-radius: 9999px;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(26 26 36 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(30 30 40 / var(--tw-bg-opacity, 1));
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-toggle-btn {
position: relative;
z-index: 10;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 14px;
line-height: 20px;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
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: 200ms;
}
.img-wrapper.pricing-toggle-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%; /* Much larger gradient from left */
background: linear-gradient(to left, transparent 0%, rgba(10, 10, 20, 0.6) 40%, #0A0A14 80%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.img-wrapper.pricing-toggle-btn::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%; /* Gradient covers right half of image */
background: linear-gradient(to right, transparent 0%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
.pricing-toggle-btn {
cursor: pointer;
border-width: 0px;
background-color: transparent;
min-width: 80px;
text-align: center;
}
.pricing-toggle-btn:hover {
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
background: transparent !important;
}
.pricing-toggle-btn.is-active {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.device-counter-controls {
display: flex;
align-items: center;
gap: 0.75rem;
}
.device-counter-btn {
border-radius: 0.25rem;
padding: 0.25rem;
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;
}
.device-counter-btn:hover {
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
}
.device-counter-value {
width: 1rem;
text-align: center;
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Icon for disabled features (X mark) */
.icon-x-mark {
margin-top: 0.125rem;
height: 1.25rem;
width: 1.25rem;
flex-shrink: 0;
--tw-text-opacity: 1;
color: rgb(59 59 68 / var(--tw-text-opacity, 1));
fill: currentColor;
}
/* Comparison table */
.comparison-table {
width: 100%;
}
.comparison-table thead tr {
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(26 26 36 / var(--tw-border-opacity, 1));
}
.comparison-table th {
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-weight: 600;
}
.comparison-table th:first-child {
text-align: left;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.comparison-table th:not(:first-child) {
text-align: center;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.comparison-table tbody tr {
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(26 26 36 / var(--tw-border-opacity, 1));
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;
}
.comparison-table tbody tr:hover {
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
--tw-bg-opacity: 0.5;
}
.comparison-table td {
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.comparison-table td:first-child {
font-size: 14px;
line-height: 20px;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.comparison-table td:not(:first-child) {
text-align: center;
}
.comparison-table-value {
font-size: 14px;
line-height: 20px;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
.comparison-table-value-premium {
font-size: 14px;
line-height: 20px;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.comparison-table-empty {
--tw-text-opacity: 1;
color: rgb(59 59 68 / var(--tw-text-opacity, 1));
}
/* User icon - Auth forms, sign in links, account links */
.icon-user {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOS45MTUzNiA0Ljk1ODI5QzkuOTE1MzYgMy4zNDc0NiA4LjYwOTUxIDIuMDQxNjMgNi45OTg3IDIuMDQxNjNDNS4zODc4NyAyLjA0MTYzIDQuMDgyMDMgMy4zNDc0NiA0LjA4MjAzIDQuOTU4MjlDNC4wODIwMyA2LjU2OTExIDUuMzg3ODcgNy44NzQ5NiA2Ljk5ODcgNy44NzQ5NkM4LjYwOTUxIDcuODc0OTYgOS45MTUzNiA2LjU2OTExIDkuOTE1MzYgNC45NTgyOVoiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTEuMDg0NiAxMS45NTgzQzExLjA4NDYgOS43MDMxNyA5LjI1NjQ3IDcuODc1IDcuMDAxMyA3Ljg3NUM0Ljc0NjE0IDcuODc1IDIuOTE3OTcgOS43MDMxNyAyLjkxNzk3IDExLjk1ODMiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOS45MTUzNiA0Ljk1ODI5QzkuOTE1MzYgMy4zNDc0NiA4LjYwOTUxIDIuMDQxNjMgNi45OTg3IDIuMDQxNjNDNS4zODc4NyAyLjA0MTYzIDQuMDgyMDMgMy4zNDc0NiA0LjA4MjAzIDQuOTU4MjlDNC4wODIwMyA2LjU2OTExIDUuMzg3ODcgNy44NzQ5NiA2Ljk5ODcgNy44NzQ5NkM4LjYwOTUxIDcuODc0OTYgOS45MTUzNiA2LjU2OTExIDkuOTE1MzYgNC45NTgyOVoiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTEuMDg0NiAxMS45NTgzQzExLjA4NDYgOS43MDMxNyA5LjI1NjQ3IDcuODc1IDcuMDAxMyA3Ljg3NUM0Ljc0NjE0IDcuODc1IDIuOTE3OTcgOS43MDMxNyAyLjkxNzk3IDExLjk1ODMiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Credit Card icon - Payment forms, billing pages, subscription pages */
.icon-credit-card {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMS4xNjQwNiA3LjAwMDA0QzEuMTY0MDYgNC45MzY1MSAxLjE2NDA2IDMuOTA0NzQgMS43NzgyIDMuMjE1OUMxLjg3NjQyIDMuMTA1NzIgMS45ODQ2OCAzLjAwMzgzIDIuMTAxNzUgMi45MTEzOEMyLjgzMzY0IDIuMzMzMzcgMy45Mjk4OSAyLjMzMzM3IDYuMTIyNCAyLjMzMzM3SDcuODcyNEMxMC4wNjQ5IDIuMzMzMzcgMTEuMTYxMiAyLjMzMzM3IDExLjg5MyAyLjkxMTM4QzEyLjAxMDEgMy4wMDM4MyAxMi4xMTg0IDMuMTA1NzIgMTIuMjE2NiAzLjIxNTlDMTIuODMwNyAzLjkwNDc0IDEyLjgzMDcgNC45MzY1MSAxMi44MzA3IDcuMDAwMDRDMTIuODMwNyA5LjA2MzU4IDEyLjgzMDcgMTAuMDk1MyAxMi4yMTY2IDEwLjc4NDJDMTIuMTE4NCAxMC44OTQ0IDEyLjAxMDEgMTAuOTk2MiAxMS44OTMgMTEuMDg4N0MxMS4xNjEyIDExLjY2NjcgMTAuMDY0OSAxMS42NjY3IDcuODcyNCAxMS42NjY3SDYuMTIyNEMzLjkyOTg5IDExLjY2NjcgMi44MzM2NCAxMS42NjY3IDIuMTAxNzUgMTEuMDg4N0MxLjk4NDY4IDEwLjk5NjIgMS44NzY0MiAxMC44OTQ0IDEuNzc4MiAxMC43ODQyQzEuMTY0MDYgMTAuMDk1MyAxLjE2NDA2IDkuMDYzNTggMS4xNjQwNiA3LjAwMDA0WiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNNS44MzU5NCA5LjMzMzM3SDYuNzEwOTQiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNOC40NjA5NCA5LjMzMzM3SDEwLjUwMjYiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMS4xNjQwNiA1LjI1SDEyLjgzMDciIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMS4xNjQwNiA3LjAwMDA0QzEuMTY0MDYgNC45MzY1MSAxLjE2NDA2IDMuOTA0NzQgMS43NzgyIDMuMjE1OUMxLjg3NjQyIDMuMTA1NzIgMS45ODQ2OCAzLjAwMzgzIDIuMTAxNzUgMi45MTEzOEMyLjgzMzY0IDIuMzMzMzcgMy45Mjk4OSAyLjMzMzM3IDYuMTIyNCAyLjMzMzM3SDcuODcyNEMxMC4wNjQ5IDIuMzMzMzcgMTEuMTYxMiAyLjMzMzM3IDExLjg5MyAyLjkxMTM4QzEyLjAxMDEgMy4wMDM4MyAxMi4xMTg0IDMuMTA1NzIgMTIuMjE2NiAzLjIxNTlDMTIuODMwNyAzLjkwNDc0IDEyLjgzMDcgNC45MzY1MSAxMi44MzA3IDcuMDAwMDRDMTIuODMwNyA5LjA2MzU4IDEyLjgzMDcgMTAuMDk1MyAxMi4yMTY2IDEwLjc4NDJDMTIuMTE4NCAxMC44OTQ0IDEyLjAxMDEgMTAuOTk2MiAxMS44OTMgMTEuMDg4N0MxMS4xNjEyIDExLjY2NjcgMTAuMDY0OSAxMS42NjY3IDcuODcyNCAxMS42NjY3SDYuMTIyNEMzLjkyOTg5IDExLjY2NjcgMi44MzM2NCAxMS42NjY3IDIuMTAxNzUgMTEuMDg4N0MxLjk4NDY4IDEwLjk5NjIgMS44NzY0MiAxMC44OTQ0IDEuNzc4MiAxMC43ODQyQzEuMTY0MDYgMTAuMDk1MyAxLjE2NDA2IDkuMDYzNTggMS4xNjQwNiA3LjAwMDA0WiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNNS44MzU5NCA5LjMzMzM3SDYuNzEwOTQiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNOC40NjA5NCA5LjMzMzM3SDEwLjUwMjYiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMS4xNjQwNiA1LjI1SDEyLjgzMDciIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Edit / Pencil icon - Edit buttons, update actions */
.icon-edit {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNS42MDcyMyAxMi44OTI3TDEyLjg5MjggNS42MDcyM0MxMy4yMzM1IDUuMjY2NDUgMTMuNDAzOSA1LjA5NjA2IDEzLjQ5NSA0LjkxMjI1QzEzLjY2ODQgNC41NjI1MyAxMy42Njg0IDQuMTUxOTQgMTMuNDk1IDMuODAyMjFDMTMuNDAzOSAzLjYxODQxIDEzLjIzMzUgMy40NDgwMSAxMi44OTI4IDMuMTA3MjNDMTIuNTUyIDIuNzY2NDUgMTIuMzgxNiAyLjU5NjA2IDEyLjE5NzggMi41MDQ5OEMxMS44NDggMi4zMzE2OCAxMS40Mzc1IDIuMzMxNjggMTEuMDg3NyAyLjUwNDk4QzEwLjkwMzkgMi41OTYwNiAxMC43MzM1IDIuNzY2NDUgMTAuMzkyOCAzLjEwNzIzTDMuMTA3MjMgMTAuMzkyN0MyLjc0NTk0IDEwLjc1NCAyLjU2NTMgMTAuOTM0NyAyLjQ3MDE1IDExLjE2NDRDMi4zNzUgMTEuMzk0MSAyLjM3NSAxMS42NDk2IDIuMzc1IDEyLjE2MDVWMTMuNjI0OUgzLjgzOTQ2QzQuMzUwNDEgMTMuNjI0OSA0LjYwNTg4IDEzLjYyNDkgNC44MzU1OSAxMy41Mjk4QzUuMDY1MyAxMy40MzQ3IDUuMjQ1OTQgMTMuMjU0IDUuNjA3MjMgMTIuODkyN1oiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNOCAxMy42MjVIMTEuNzUiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNOS41NjI1IDMuOTM3NUwxMi4wNjI1IDYuNDM3NSIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNS42MDcyMyAxMi44OTI3TDEyLjg5MjggNS42MDcyM0MxMy4yMzM1IDUuMjY2NDUgMTMuNDAzOSA1LjA5NjA2IDEzLjQ5NSA0LjkxMjI1QzEzLjY2ODQgNC41NjI1MyAxMy42Njg0IDQuMTUxOTQgMTMuNDk1IDMuODAyMjFDMTMuNDAzOSAzLjYxODQxIDEzLjIzMzUgMy40NDgwMSAxMi44OTI4IDMuMTA3MjNDMTIuNTUyIDIuNzY2NDUgMTIuMzgxNiAyLjU5NjA2IDEyLjE5NzggMi41MDQ5OEMxMS44NDggMi4zMzE2OCAxMS40Mzc1IDIuMzMxNjggMTEuMDg3NyAyLjUwNDk4QzEwLjkwMzkgMi41OTYwNiAxMC43MzM1IDIuNzY2NDUgMTAuMzkyOCAzLjEwNzIzTDMuMTA3MjMgMTAuMzkyN0MyLjc0NTk0IDEwLjc1NCAyLjU2NTMgMTAuOTM0NyAyLjQ3MDE1IDExLjE2NDRDMi4zNzUgMTEuMzk0MSAyLjM3NSAxMS42NDk2IDIuMzc1IDEyLjE2MDVWMTMuNjI0OUgzLjgzOTQ2QzQuMzUwNDEgMTMuNjI0OSA0LjYwNTg4IDEzLjYyNDkgNC44MzU1OSAxMy41Mjk4QzUuMDY1MyAxMy40MzQ3IDUuMjQ1OTQgMTMuMjU0IDUuNjA3MjMgMTIuODkyN1oiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNOCAxMy42MjVIMTEuNzUiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNOS41NjI1IDMuOTM3NUwxMi4wNjI1IDYuNDM3NSIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Image wrapper with gradient overlay fade effect */
/* Left gradient (larger and stronger) */
.img-wrapper.relative::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%; /* Much larger gradient from left */
background: linear-gradient(to left, transparent 0%, rgba(10, 10, 20, 0.6) 40%, #0A0A14 80%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
/* Right gradient */
.img-wrapper.relative::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%; /* Gradient covers right half of image */
background: linear-gradient(to right, transparent 0%, #0A0A14 100%);
pointer-events: none;
z-index: 1;
}
/* Text block with radial gradient blur overlay */
/* === CONTENT PLUGIN COMPONENTS === */
/* Filter buttons - Category filters in content lists */
.btn-filter {
display: inline-flex;
align-items: center;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 14px;
line-height: 20px;
font-weight: 500;
border-radius: 9999px;
border-width: 1px;
border-color: transparent;
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
.btn-filter:hover {
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
}
.btn-filter.active {
background-color: #14141E !important; /* Core Grey 800 */
border: 1px solid #1A1A24 !important; /* Core Grey 750 */
color: #FFF !important;
}
/* Search input and button */
/* Higher specificity to override Tailwind Forms base reset */
input.input-search {
height: 2.5rem;
width: 100%;
padding-left: 1rem;
padding-right: 3rem;
border-radius: 9999px;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(20 20 30 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(13 13 22 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
input.input-search::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
input.input-search::placeholder {
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
input.input-search {
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: 200ms;
}
input.input-search:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
--tw-ring-opacity: 0.2;
}
.btn-search {
position: absolute;
right: 0.5rem;
top: 50%;
--tw-translate-y: -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));
display: flex;
align-items: center;
justify-content: center;
height: 2rem;
width: 2rem;
border-width: 0px;
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
.btn-search:hover {
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.btn-search {
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: 200ms;
cursor: pointer;
}
/* Card with hover effect for content items */
.card-hover {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
}
.card-hover:hover {
border-color: rgb(99 102 241 / 0.3);
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
transform: scale(1.02);
}
/* Preserve accent card border on hover - don't override with transparent */
.card-accent.card-hover:hover {
border: 2px solid #6366F1;
transform: scale(1.02);
}
/* Prose - Typography styling for Markdown content */
.prose {
line-height: 1.625;
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
max-width: 65ch;
}
.prose p {
margin-bottom: 1rem;
}
.prose h2 {
margin-bottom: 1rem;
margin-top: 2rem;
text-align: left;
font-size: 24px;
line-height: 28.8px;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.prose h3 {
margin-bottom: 0.75rem;
margin-top: 1.5rem;
font-size: 20px;
line-height: 28px;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.prose h4 {
margin-bottom: 0.5rem;
margin-top: 1rem;
font-size: 18px;
line-height: 27px;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.prose ul,
.prose ol {
margin-bottom: 1rem;
padding-left: 1.5rem;
list-style-position: outside;
}
.prose ul,
.prose ol ul,
.prose ol li ul {
list-style-type: disc !important;
}
.prose ol,
.prose ul ol,
.prose ul li ol {
list-style-type: decimal !important;
}
.prose ul li,
.prose ol li {
margin-bottom: 0.5rem;
font-size: 16px;
line-height: 24px;
display: list-item;
}
/* Ensure list markers inherit font styling */
.prose ol li::marker {
font-family: Poppins, sans-serif;
font-size: 16px;
line-height: 24px;
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
}
.prose ul li::marker {
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
}
.prose ul li,
.prose ol ul li,
.prose ol li ul li {
list-style-type: disc !important;
}
.prose ol li,
.prose ul ol li,
.prose ul li ol li {
list-style-type: decimal !important;
}
.prose a {
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity, 1));
text-decoration-line: underline;
}
.prose a:hover {
--tw-text-opacity: 1;
color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.prose strong,
.prose b {
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.prose em,
.prose i {
font-style: italic;
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
}
.prose code {
border-radius: 0.25rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(40 40 50 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
font-size: 14px;
line-height: 20px;
}
.prose pre {
margin-bottom: 1rem;
overflow-x: auto;
border-radius: 16px;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(40 40 50 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
padding: 1rem;
}
.prose pre code {
border-width: 0px;
background-color: transparent;
padding: 0px;
}
.prose blockquote {
margin-bottom: 1rem;
border-left-width: 4px;
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
padding-left: 1rem;
font-style: italic;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
.prose-lg {
line-height: 1.625;
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
max-width: 65ch;
}
.prose-lg p {
margin-bottom: 1rem;
}
.prose-lg h2 {
margin-bottom: 1rem;
margin-top: 2rem;
text-align: left;
font-size: 24px;
line-height: 28.8px;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.prose-lg h3 {
margin-bottom: 0.75rem;
margin-top: 1.5rem;
font-size: 20px;
line-height: 28px;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.prose-lg h4 {
margin-bottom: 0.5rem;
margin-top: 1rem;
font-size: 18px;
line-height: 27px;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.prose-lg ul,.prose-lg ol {
margin-bottom: 1rem;
padding-left: 1.5rem;
list-style-position: outside;
}
.prose-lg ul,.prose-lg ol ul,.prose-lg ol li ul {
list-style-type: disc;
}
.prose-lg ol,.prose-lg ul ol,.prose-lg ul li ol {
list-style-type: decimal;
}
.prose-lg ul li,.prose-lg ol li {
margin-bottom: 0.5rem;
font-size: 16px;
line-height: 24px;
display: list-item;
}
.prose-lg ol li::marker {
font-family: Poppins, sans-serif;
font-size: 16px;
line-height: 24px;
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
}
.prose-lg ul li::marker {
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
}
.prose-lg ul li,.prose-lg ol ul li,.prose-lg ol li ul li {
list-style-type: disc;
}
.prose-lg ol li,.prose-lg ul ol li,.prose-lg ul li ol li {
list-style-type: decimal;
}
.prose-lg a {
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity, 1));
text-decoration-line: underline;
}
.prose-lg a:hover {
--tw-text-opacity: 1;
color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.prose-lg strong,.prose-lg b {
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.prose-lg em,.prose-lg i {
font-style: italic;
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
}
.prose-lg code {
border-radius: 0.25rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(40 40 50 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
font-size: 14px;
line-height: 20px;
}
.prose-lg pre {
margin-bottom: 1rem;
overflow-x: auto;
border-radius: 16px;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(40 40 50 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
padding: 1rem;
}
.prose-lg pre code {
border-width: 0px;
background-color: transparent;
padding: 0px;
}
.prose-lg blockquote {
margin-bottom: 1rem;
border-left-width: 4px;
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
padding-left: 1rem;
font-style: italic;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
.prose-lg {
font-size: 18px;
line-height: 27px;
}
.prose-lg p {
margin-bottom: 1.5rem;
}
/* Checklist - Special list styling with checkmarks for content sections */
.checklist {
list-style-type: none;
padding-left: 0px;
}
.checklist li {
margin-bottom: 0.75rem;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.checklist li::before {
content: '';
margin-top: 0.25rem;
flex-shrink: 0;
width: 20px;
height: 20px;
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI5IiBmaWxsPSIjNjM2NkYxIiBmaWxsLW9wYWNpdHk9IjAuMiIgc3Ryb2tlPSIjNjM2NkYxIiBzdHJva2Utd2lkdGg9IjEuNSIvPgogIDxwYXRoIGQ9Ik02IDEwTDguNSAxMi41TDE0IDciIHN0cm9rZT0iIzYzNjZGMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI5IiBmaWxsPSIjNjM2NkYxIiBmaWxsLW9wYWNpdHk9IjAuMiIgc3Ryb2tlPSIjNjM2NkYxIiBzdHJva2Utd2lkdGg9IjEuNSIvPgogIDxwYXRoIGQ9Ik02IDEwTDguNSAxMi41TDE0IDciIHN0cm9rZT0iIzYzNjZGMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
color: #6366F1; /* Lavender */
}
/* Content section spacing */
.content-section {
margin-bottom: 2rem;
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(26 26 36 / var(--tw-border-opacity, 1));
padding-bottom: 2rem;
}
.content-section:last-child {
margin-bottom: 0px;
border-bottom-width: 0px;
padding-bottom: 0px;
}
/* === SEARCH HIGHLIGHTING === */
/* Search result highlight */
.search-highlight {
border-radius: 0.25rem;
background-color: rgb(99 102 241 / 0.2);
padding-left: 0.25rem;
padding-right: 0.25rem;
--tw-text-opacity: 1;
color: rgb(165 180 252 / var(--tw-text-opacity, 1));
font-weight: 600;
}
/* === ICONS === */
/* Base icon class - default 17×17px */
.icon {
display: inline-block;
flex-shrink: 0;
width: 17px;
height: 17px;
}
/* --- Size Modifiers --- */
/* Small icon - 14×14px (for tabs, small buttons) */
.icon-sm {
width: 14px;
height: 14px;
}
/* Medium icon - 18×18px (for larger buttons) */
.icon-md {
width: 18px;
height: 18px;
}
/* Large icon - 24×24px (for hero sections, feature cards) */
.icon-lg {
width: 24px;
height: 24px;
}
/* --- Color Modifiers --- */
/* Brand gradient for icons - replaces solid color with gradient */
.icon-gradient-brand {
background: linear-gradient(91deg, #4F46E5 0.39%, #FF2E79 99.61%) !important;
}
/* --- Icon Variants (CSS Mask Pattern) --- */
/* All icons use currentColor, so they inherit text color */
/* Checkmark icon - Figma design */
.icon-checkmark {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMy42NjQwNiAxMC4wNjY3QzMuNjY0MDYgMTAuMDY2NyA0LjY2NDA2IDEwLjA2NjcgNS45OTc0IDEyLjRDNS45OTc0IDEyLjQgOS43MDMyNiA2LjI4ODg3IDEyLjk5NzQgNS4wNjY2NSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMy42NjQwNiAxMC4wNjY3QzMuNjY0MDYgMTAuMDY2NyA0LjY2NDA2IDEwLjA2NjcgNS45OTc0IDEyLjRDNS45OTc0IDEyLjQgOS43MDMyNiA2LjI4ODg3IDEyLjk5NzQgNS4wNjY2NSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Search icon - Search inputs, filter components */
.icon-search {
display: inline-block;
flex-shrink: 0;
width: 14px;
height: 14px;
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOS45MTY2NyA5LjkxNjY3TDEyLjI1IDEyLjI1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTEuMDgzMyA2LjQxNjY3QzExLjA4MzMgMy44MzkzNCA4Ljk5NDAxIDEuNzUgNi40MTY2NyAxLjc1QzMuODM5MzQgMS43NSAxLjc1IDMuODM5MzQgMS43NSA2LjQxNjY3QzEuNzUgOC45OTQwMSAzLjgzOTM0IDExLjA4MzMgNi40MTY2NyAxMS4wODMzQzguOTk0MDEgMTEuMDgzMyAxMS4wODMzIDguOTk0MDEgMTEuMDgzMyA2LjQxNjY3WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+Cg==');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOS45MTY2NyA5LjkxNjY3TDEyLjI1IDEyLjI1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTEuMDgzMyA2LjQxNjY3QzExLjA4MzMgMy44MzkzNCA4Ljk5NDAxIDEuNzUgNi40MTY2NyAxLjc1QzMuODM5MzQgMS43NSAxLjc1IDMuODM5MzQgMS43NSA2LjQxNjY3QzEuNzUgOC45OTQwMSAzLjgzOTM0IDExLjA4MzMgNi40MTY2NyAxMS4wODMzQzguOTk0MDEgMTEuMDgzMyAxMS4wODMzIDguOTk0MDEgMTEuMDgzMyA2LjQxNjY3WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+Cg==');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Magic Wand icon - Tab navigation (Dashboard) */
.icon-magic-wand {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOS43NDA3MyA1LjcxODI1TDEwLjc4NTkgNC42NzMwOUMxMS4xODc3IDQuMjcxMjcgMTEuMTg3NyAzLjYxOTgxIDEwLjc4NTkgMy4yMTc5OUMxMC4zODQxIDIuODE2MTcgOS43MzI1NyAyLjgxNjE3IDkuMzMwNzcgMy4yMTc5OUw4LjI4NTYxIDQuMjYzMTVNOS43NDA3MyA1LjcxODI1TDMuNTEwMzcgMTEuOTQ4NkMzLjEwODU1IDEyLjM1MDQgMi40NTcwOSAxMi4zNTA0IDIuMDU1MjcgMTEuOTQ4NkMxLjY1MzQ1IDExLjU0NjggMS42NTM0NSAxMC44OTUzIDIuMDU1MjcgMTAuNDkzNUw4LjI4NTYxIDQuMjYzMTVNOS43NDA3MyA1LjcxODI1TDguMjg1NjEgNC4yNjMxNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTEwLjQ4ODYgOC4xNzkxOEMxMC40OTIgOC4xNjI0NCAxMC41MTU5IDguMTYyNDQgMTAuNTE5MyA4LjE3OTE4QzEwLjY5NjUgOS4wNDYzNyAxMS4zNzQyIDkuNzI0MDIgMTIuMjQxNCA5LjkwMTNDMTIuMjU4MSA5LjkwNDY4IDEyLjI1ODEgOS45Mjg2IDEyLjI0MTQgOS45MzE5OEMxMS4zNzQyIDEwLjEwOTMgMTAuNjk2NSAxMC43ODY5IDEwLjUxOTMgMTEuNjU0MUMxMC41MTU5IDExLjY3MDggMTAuNDkyIDExLjY3MDggMTAuNDg4NiAxMS42NTQxQzEwLjMxMTMgMTAuNzg2OSA5LjYzMzY1IDEwLjEwOTMgOC43NjY0NiA5LjkzMTk4QzguNzQ5NzIgOS45Mjg2IDguNzQ5NzIgOS45MDQ2OCA4Ljc2NjQ2IDkuOTAxM0M5LjYzMzY1IDkuNzI0MDIgMTAuMzExMyA5LjA0NjM3IDEwLjQ4ODYgOC4xNzkxOFoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTQuNzQwOTQgMS45MzA2NEM0Ljc5MDE3IDEuNjg5NzkgNS4xMzQzIDEuNjg5NzkgNS4xODM1NCAxLjkzMDY0QzUuMjkyMjYgMi40NjI1OSA1LjcwNzk4IDIuODc4MzEgNi4yMzk5MSAyLjk4NzAzQzYuNDgwNzcgMy4wMzYyNyA2LjQ4MDc3IDMuMzgwNCA2LjIzOTkxIDMuNDI5NjNDNS43MDc5OCAzLjUzODM2IDUuMjkyMjYgMy45NTQwNyA1LjE4MzU0IDQuNDg2MDJDNS4xMzQzIDQuNzI2ODggNC43OTAxNyA0LjcyNjg4IDQuNzQwOTQgNC40ODYwMkM0LjYzMjIxIDMuOTU0MDcgNC4yMTY1IDMuNTM4MzYgMy42ODQ1NSAzLjQyOTYzQzMuNDQzNjkgMy4zODA0IDMuNDQzNjkgMy4wMzYyNyAzLjY4NDU1IDIuOTg3MDNDNC4yMTY1IDIuODc4MzEgNC42MzIyMSAyLjQ2MjU5IDQuNzQwOTQgMS45MzA2NFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPg==');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOS43NDA3MyA1LjcxODI1TDEwLjc4NTkgNC42NzMwOUMxMS4xODc3IDQuMjcxMjcgMTEuMTg3NyAzLjYxOTgxIDEwLjc4NTkgMy4yMTc5OUMxMC4zODQxIDIuODE2MTcgOS43MzI1NyAyLjgxNjE3IDkuMzMwNzcgMy4yMTc5OUw4LjI4NTYxIDQuMjYzMTVNOS43NDA3MyA1LjcxODI1TDMuNTEwMzcgMTEuOTQ4NkMzLjEwODU1IDEyLjM1MDQgMi40NTcwOSAxMi4zNTA0IDIuMDU1MjcgMTEuOTQ4NkMxLjY1MzQ1IDExLjU0NjggMS42NTM0NSAxMC44OTUzIDIuMDU1MjcgMTAuNDkzNUw4LjI4NTYxIDQuMjYzMTVNOS43NDA3MyA1LjcxODI1TDguMjg1NjEgNC4yNjMxNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTEwLjQ4ODYgOC4xNzkxOEMxMC40OTIgOC4xNjI0NCAxMC41MTU5IDguMTYyNDQgMTAuNTE5MyA4LjE3OTE4QzEwLjY5NjUgOS4wNDYzNyAxMS4zNzQyIDkuNzI0MDIgMTIuMjQxNCA5LjkwMTNDMTIuMjU4MSA5LjkwNDY4IDEyLjI1ODEgOS45Mjg2IDEyLjI0MTQgOS45MzE5OEMxMS4zNzQyIDEwLjEwOTMgMTAuNjk2NSAxMC43ODY5IDEwLjUxOTMgMTEuNjU0MUMxMC41MTU5IDExLjY3MDggMTAuNDkyIDExLjY3MDggMTAuNDg4NiAxMS42NTQxQzEwLjMxMTMgMTAuNzg2OSA5LjYzMzY1IDEwLjEwOTMgOC43NjY0NiA5LjkzMTk4QzguNzQ5NzIgOS45Mjg2IDguNzQ5NzIgOS45MDQ2OCA4Ljc2NjQ2IDkuOTAxM0M5LjYzMzY1IDkuNzI0MDIgMTAuMzExMyA5LjA0NjM3IDEwLjQ4ODYgOC4xNzkxOFoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTQuNzQwOTQgMS45MzA2NEM0Ljc5MDE3IDEuNjg5NzkgNS4xMzQzIDEuNjg5NzkgNS4xODM1NCAxLjkzMDY0QzUuMjkyMjYgMi40NjI1OSA1LjcwNzk4IDIuODc4MzEgNi4yMzk5MSAyLjk4NzAzQzYuNDgwNzcgMy4wMzYyNyA2LjQ4MDc3IDMuMzgwNCA2LjIzOTkxIDMuNDI5NjNDNS43MDc5OCAzLjUzODM2IDUuMjkyMjYgMy45NTQwNyA1LjE4MzU0IDQuNDg2MDJDNS4xMzQzIDQuNzI2ODggNC43OTAxNyA0LjcyNjg4IDQuNzQwOTQgNC40ODYwMkM0LjYzMjIxIDMuOTU0MDcgNC4yMTY1IDMuNTM4MzYgMy42ODQ1NSAzLjQyOTYzQzMuNDQzNjkgMy4zODA0IDMuNDQzNjkgMy4wMzYyNyAzLjY4NDU1IDIuOTg3MDNDNC4yMTY1IDIuODc4MzEgNC42MzIyMSAyLjQ2MjU5IDQuNzQwOTQgMS45MzA2NFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPg==');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Game Controller icon - Tab navigation (Games) */
.icon-game {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMS4xNzE4OCA4LjQ1ODM3QzEuMTcxODggNi41NDA2NyAxLjE3MTg3IDUuNTgxODMgMS43MDE1MiA0LjkzNjQ2QzEuNzk4NDggNC44MTgzMSAxLjkwNjgxIDQuNzA5OTggMi4wMjQ5NiA0LjYxMzAyQzIuNjcwMzMgNC4wODMzNyAzLjYyOTE4IDQuMDgzMzcgNS41NDY4OCA0LjA4MzM3SDguNDYzNTRDMTAuMzgxMyA0LjA4MzM3IDExLjM0MDEgNC4wODMzNyAxMS45ODU1IDQuNjEzMDJDMTIuMTAzNiA0LjcwOTk4IDEyLjIxMTkgNC44MTgzMSAxMi4zMDg5IDQuOTM2NDZDMTIuODM4NSA1LjU4MTgzIDEyLjgzODUgNi41NDA2NyAxMi44Mzg1IDguNDU4MzdDMTIuODM4NSAxMC4zNzYxIDEyLjgzODUgMTEuMzM0OSAxMi4zMDg5IDExLjk4MDNDMTIuMjExOSAxMi4wOTg0IDEyLjEwMzYgMTIuMjA2OCAxMS45ODU1IDEyLjMwMzdDMTEuMzQwMSAxMi44MzM0IDEwLjM4MTMgMTIuODMzNCA4LjQ2MzU0IDEyLjgzMzRINS41NDY4OEMzLjYyOTE4IDEyLjgzMzQgMi42NzAzMyAxMi44MzM0IDIuMDI0OTYgMTIuMzAzN0MxLjkwNjgxIDEyLjIwNjggMS43OTg0OCAxMi4wOTg0IDEuNzAxNTIgMTEuOTgwM0MxLjE3MTg3IDExLjMzNDkgMS4xNzE4OCAxMC4zNzYxIDEuMTcxODggOC40NTgzN1oiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNNy4wMDM5MSA0LjA4MzI5VjIuOTE2NjNDNy4wMDM5MSAyLjU5NDQ2IDcuMjY1MDYgMi4zMzMyOSA3LjU4NzI0IDIuMzMzMjlDNy45MDk0MSAyLjMzMzI5IDguMTcwNTcgMi4wNzIxMiA4LjE3MDU3IDEuNzQ5OTZWMS4xNjY2MyIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik01LjgzNTk0IDkuMzMzMzdMNC45NjA5NCA4LjQ1ODM3TTQuOTYwOTQgOC40NTgzN0w0LjA4NTk0IDcuNTgzMzdNNC45NjA5NCA4LjQ1ODM3TDQuMDg1OTQgOS4zMzMzN000Ljk2MDk0IDguNDU4MzdMNS44MzU5NCA3LjU4MzM3IiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTkuOTIxODggOS4wNDE2N1Y3Ljg3NSIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMS4xNzE4OCA4LjQ1ODM3QzEuMTcxODggNi41NDA2NyAxLjE3MTg3IDUuNTgxODMgMS43MDE1MiA0LjkzNjQ2QzEuNzk4NDggNC44MTgzMSAxLjkwNjgxIDQuNzA5OTggMi4wMjQ5NiA0LjYxMzAyQzIuNjcwMzMgNC4wODMzNyAzLjYyOTE4IDQuMDgzMzcgNS41NDY4OCA0LjA4MzM3SDguNDYzNTRDMTAuMzgxMyA0LjA4MzM3IDExLjM0MDEgNC4wODMzNyAxMS45ODU1IDQuNjEzMDJDMTIuMTAzNiA0LjcwOTk4IDEyLjIxMTkgNC44MTgzMSAxMi4zMDg5IDQuOTM2NDZDMTIuODM4NSA1LjU4MTgzIDEyLjgzODUgNi41NDA2NyAxMi44Mzg1IDguNDU4MzdDMTIuODM4NSAxMC4zNzYxIDEyLjgzODUgMTEuMzM0OSAxMi4zMDg5IDExLjk4MDNDMTIuMjExOSAxMi4wOTg0IDEyLjEwMzYgMTIuMjA2OCAxMS45ODU1IDEyLjMwMzdDMTEuMzQwMSAxMi44MzM0IDEwLjM4MTMgMTIuODMzNCA4LjQ2MzU0IDEyLjgzMzRINS41NDY4OEMzLjYyOTE4IDEyLjgzMzQgMi42NzAzMyAxMi44MzM0IDIuMDI0OTYgMTIuMzAzN0MxLjkwNjgxIDEyLjIwNjggMS43OTg0OCAxMi4wOTg0IDEuNzAxNTIgMTEuOTgwM0MxLjE3MTg3IDExLjMzNDkgMS4xNzE4OCAxMC4zNzYxIDEuMTcxODggOC40NTgzN1oiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNNy4wMDM5MSA0LjA4MzI5VjIuOTE2NjNDNy4wMDM5MSAyLjU5NDQ2IDcuMjY1MDYgMi4zMzMyOSA3LjU4NzI0IDIuMzMzMjlDNy45MDk0MSAyLjMzMzI5IDguMTcwNTcgMi4wNzIxMiA4LjE3MDU3IDEuNzQ5OTZWMS4xNjY2MyIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik01LjgzNTk0IDkuMzMzMzdMNC45NjA5NCA4LjQ1ODM3TTQuOTYwOTQgOC40NTgzN0w0LjA4NTk0IDcuNTgzMzdNNC45NjA5NCA4LjQ1ODM3TDQuMDg1OTQgOS4zMzMzN000Ljk2MDk0IDguNDU4MzdMNS44MzU5NCA3LjU4MzM3IiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTkuOTIxODggOS4wNDE2N1Y3Ljg3NSIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* 3D Cube/BIOS icon - Tab navigation (BIOS) */
.icon-bios {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNy4wMDI2IDYuNzA4MjlDNy4yOTE2NSA2LjcwODI5IDcuNTYwMzkgNi41OTI1IDguMDk3ODEgNi4zNjA5Mkw4LjQ4NTYxIDYuMTkzNzlDOS40NDE0IDUuNzgxOTcgOS45MTkyNyA1LjU3NjA1IDkuOTE5MjcgNS4yNDk5NkM5LjkxOTI3IDQuOTIzODYgOS40NDE0IDQuNzE3OTUgOC40ODU2MSA0LjMwNjExTDguMDk3ODEgNC4xMzlDNy41NjAzOSAzLjkwNzQyIDcuMjkxNjUgMy43OTE2MyA3LjAwMjYgMy43OTE2M0M2LjcxMzU2IDMuNzkxNjMgNi40NDQ4MiAzLjkwNzQyIDUuOTA3NCA0LjEzOUw1LjUxOTU4IDQuMzA2MTFDNC41NjM4MiA0LjcxNzk1IDQuMDg1OTQgNC45MjM4NiA0LjA4NTk0IDUuMjQ5OTZDNC4wODU5NCA1LjU3NjA1IDQuNTYzODIgNS43ODE5NyA1LjUxOTU4IDYuMTkzNzlMNS45MDc0IDYuMzYwOTJDNi40NDQ4MiA2LjU5MjUgNi43MTM1NiA2LjcwODI5IDcuMDAyNiA2LjcwODI5Wk03LjAwMjYgNi43MDgyOVYxMC4yMDgzIiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik05LjkxOTI3IDUuMjVWOC43NUM5LjkxOTI3IDkuMDc2MDggOS40NDE0IDkuMjgyIDguNDg1NjEgOS42OTM4M0w4LjA5NzgxIDkuODYwOTZDNy41NjAzOSAxMC4wOTI1IDcuMjkxNjUgMTAuMjA4MyA3LjAwMjYgMTAuMjA4M0M2LjcxMzU2IDEwLjIwODMgNi40NDQ4MiAxMC4wOTI1IDUuOTA3NCA5Ljg2MDk2TDUuNTE5NTggOS42OTM4M0M0LjU2MzgyIDkuMjgyIDQuMDg1OTQgOS4wNzYwOCA0LjA4NTk0IDguNzVWNS4yNSIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNNS4zMzY3NiAxLjQ1ODM3QzMuNzg2ODMgMS40OTM4MSAyLjg4MTUyIDEuNjQxODcgMi4yNjI5OCAyLjI2MDQyQzEuNjQ0NDMgMi44Nzg5NiAxLjQ5NjM3IDMuNzg0MjYgMS40NjA5NCA1LjMzNDE5TTguNjY4NDMgMS40NTgzN0MxMC4yMTg0IDEuNDkzODEgMTEuMTIzNyAxLjY0MTg3IDExLjc0MjIgMi4yNjA0MkMxMi4zNjA4IDIuODc4OTYgMTIuNTA4OCAzLjc4NDI2IDEyLjU0NDMgNS4zMzQxOU04LjY2ODQzIDEyLjU0MTdDMTAuMjE4NCAxMi41MDYyIDExLjEyMzcgMTIuMzU4MiAxMS43NDIyIDExLjczOTdDMTIuMzYwOCAxMS4xMjExIDEyLjUwODggMTAuMjE1OCAxMi41NDQzIDguNjY1ODdNNS4zMzY3NiAxMi41NDE3QzMuNzg2ODMgMTIuNTA2MiAyLjg4MTUyIDEyLjM1ODIgMi4yNjI5OCAxMS43Mzk3QzEuNjQ0NDMgMTEuMTIxMSAxLjQ5NjM3IDEwLjIxNTggMS40NjA5NCA4LjY2NTg3IiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNy4wMDI2IDYuNzA4MjlDNy4yOTE2NSA2LjcwODI5IDcuNTYwMzkgNi41OTI1IDguMDk3ODEgNi4zNjA5Mkw4LjQ4NTYxIDYuMTkzNzlDOS40NDE0IDUuNzgxOTcgOS45MTkyNyA1LjU3NjA1IDkuOTE5MjcgNS4yNDk5NkM5LjkxOTI3IDQuOTIzODYgOS40NDE0IDQuNzE3OTUgOC40ODU2MSA0LjMwNjExTDguMDk3ODEgNC4xMzlDNy41NjAzOSAzLjkwNzQyIDcuMjkxNjUgMy43OTE2MyA3LjAwMjYgMy43OTE2M0M2LjcxMzU2IDMuNzkxNjMgNi40NDQ4MiAzLjkwNzQyIDUuOTA3NCA0LjEzOUw1LjUxOTU4IDQuMzA2MTFDNC41NjM4MiA0LjcxNzk1IDQuMDg1OTQgNC45MjM4NiA0LjA4NTk0IDUuMjQ5OTZDNC4wODU5NCA1LjU3NjA1IDQuNTYzODIgNS43ODE5NyA1LjUxOTU4IDYuMTkzNzlMNS45MDc0IDYuMzYwOTJDNi40NDQ4MiA2LjU5MjUgNi43MTM1NiA2LjcwODI5IDcuMDAyNiA2LjcwODI5Wk03LjAwMjYgNi43MDgyOVYxMC4yMDgzIiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik05LjkxOTI3IDUuMjVWOC43NUM5LjkxOTI3IDkuMDc2MDggOS40NDE0IDkuMjgyIDguNDg1NjEgOS42OTM4M0w4LjA5NzgxIDkuODYwOTZDNy41NjAzOSAxMC4wOTI1IDcuMjkxNjUgMTAuMjA4MyA3LjAwMjYgMTAuMjA4M0M2LjcxMzU2IDEwLjIwODMgNi40NDQ4MiAxMC4wOTI1IDUuOTA3NCA5Ljg2MDk2TDUuNTE5NTggOS42OTM4M0M0LjU2MzgyIDkuMjgyIDQuMDg1OTQgOS4wNzYwOCA0LjA4NTk0IDguNzVWNS4yNSIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNNS4zMzY3NiAxLjQ1ODM3QzMuNzg2ODMgMS40OTM4MSAyLjg4MTUyIDEuNjQxODcgMi4yNjI5OCAyLjI2MDQyQzEuNjQ0NDMgMi44Nzg5NiAxLjQ5NjM3IDMuNzg0MjYgMS40NjA5NCA1LjMzNDE5TTguNjY4NDMgMS40NTgzN0MxMC4yMTg0IDEuNDkzODEgMTEuMTIzNyAxLjY0MTg3IDExLjc0MjIgMi4yNjA0MkMxMi4zNjA4IDIuODc4OTYgMTIuNTA4OCAzLjc4NDI2IDEyLjU0NDMgNS4zMzQxOU04LjY2ODQzIDEyLjU0MTdDMTAuMjE4NCAxMi41MDYyIDExLjEyMzcgMTIuMzU4MiAxMS43NDIyIDExLjczOTdDMTIuMzYwOCAxMS4xMjExIDEyLjUwODggMTAuMjE1OCAxMi41NDQzIDguNjY1ODdNNS4zMzY3NiAxMi41NDE3QzMuNzg2ODMgMTIuNTA2MiAyLjg4MTUyIDEyLjM1ODIgMi4yNjI5OCAxMS43Mzk3QzEuNjQ0NDMgMTEuMTIxMSAxLjQ5NjM3IDEwLjIxNTggMS40NjA5NCA4LjY2NTg3IiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Rocket icon - Tab navigation (Advanced) */
.icon-rocket {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNi44ODY3IDMuNzg1NThMNy43NTMyOSAyLjkxOUM4LjcyOTA0IDEuOTQzMjQgMTAuMDA2NSAxLjUzODUxIDExLjM1ODQgMS40NzIzN0MxMS44ODQzIDEuNDQ2NjUgMTIuMTQ3MiAxLjQzMzc4IDEyLjM1OCAxLjY0NDYyQzEyLjU2ODkgMS44NTU0NiAxMi41NTYgMi4xMTgzOCAxMi41MzAzIDIuNjQ0MjNDMTIuNDY0MSAzLjk5NjE3IDEyLjA1OTQgNS4yNzM2MiAxMS4wODM3IDYuMjQ5MzVMMTAuMjE3MSA3LjExNTk1QzkuNTAzNDEgNy44Mjk2IDkuMzAwNTMgOC4wMzI1NCA5LjQ1MDMzIDguODA2NjNDOS41OTgyIDkuMzk3OTUgOS43NDEzIDkuOTcwNTUgOS4zMTEzMiAxMC40MDA1QzguNzg5NzYgMTAuOTIyMSA4LjMxNCAxMC45MjIxIDcuNzkyNDQgMTAuNDAwNUwzLjYwMjExIDYuMjEwMjFDMy4wODA1NiA1LjY4ODY0IDMuMDgwNTQgNS4yMTI4OCAzLjYwMjExIDQuNjkxMzJDNC4wMzIwOCA0LjI2MTM1IDQuNjA0NjkgNC40MDQ0NyA1LjE5NiA0LjU1MjMxQzUuOTcwMSA0LjcwMjE0IDYuMTczMDUgNC40OTkyMyA2Ljg4NjcgMy43ODU1OFoiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTkuOTE3OTcgNC4wODMzN0g5LjkyMzIyIiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMS40NjA5NCAxMi41NDE3TDQuMzc3NiA5LjYyNSIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik00Ljk2MDk0IDEyLjU0MTdMNi4xMjc2IDExLjM3NSIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xLjQ2MDk0IDkuMDQxNjdMMi42Mjc2IDcuODc1IiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNi44ODY3IDMuNzg1NThMNy43NTMyOSAyLjkxOUM4LjcyOTA0IDEuOTQzMjQgMTAuMDA2NSAxLjUzODUxIDExLjM1ODQgMS40NzIzN0MxMS44ODQzIDEuNDQ2NjUgMTIuMTQ3MiAxLjQzMzc4IDEyLjM1OCAxLjY0NDYyQzEyLjU2ODkgMS44NTU0NiAxMi41NTYgMi4xMTgzOCAxMi41MzAzIDIuNjQ0MjNDMTIuNDY0MSAzLjk5NjE3IDEyLjA1OTQgNS4yNzM2MiAxMS4wODM3IDYuMjQ5MzVMMTAuMjE3MSA3LjExNTk1QzkuNTAzNDEgNy44Mjk2IDkuMzAwNTMgOC4wMzI1NCA5LjQ1MDMzIDguODA2NjNDOS41OTgyIDkuMzk3OTUgOS43NDEzIDkuOTcwNTUgOS4zMTEzMiAxMC40MDA1QzguNzg5NzYgMTAuOTIyMSA4LjMxNCAxMC45MjIxIDcuNzkyNDQgMTAuNDAwNUwzLjYwMjExIDYuMjEwMjFDMy4wODA1NiA1LjY4ODY0IDMuMDgwNTQgNS4yMTI4OCAzLjYwMjExIDQuNjkxMzJDNC4wMzIwOCA0LjI2MTM1IDQuNjA0NjkgNC40MDQ0NyA1LjE5NiA0LjU1MjMxQzUuOTcwMSA0LjcwMjE0IDYuMTczMDUgNC40OTkyMyA2Ljg4NjcgMy43ODU1OFoiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTkuOTE3OTcgNC4wODMzN0g5LjkyMzIyIiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMS40NjA5NCAxMi41NDE3TDQuMzc3NiA5LjYyNSIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik00Ljk2MDk0IDEyLjU0MTdMNi4xMjc2IDExLjM3NSIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xLjQ2MDk0IDkuMDQxNjdMMi42Mjc2IDcuODc1IiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Grid/Tweaks icon - Tab navigation (Tweaks) */
.icon-tweaks {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNy44Nzg5MSA5LjA0NjY3QzcuODc4OTEgOC40OTY3IDcuODc4OTEgOC4yMjE3MiA4LjA0OTc2IDguMDUwODZDOC4yMjA2MiA3Ljg4IDguNDk1NjEgNy44OCA5LjA0NTU3IDcuODhIMTEuNjcwNkMxMi4yMjA1IDcuODggMTIuNDk1NSA3Ljg4IDEyLjY2NjQgOC4wNTA4NkMxMi44MzcyIDguMjIxNzIgMTIuODM3MiA4LjQ5NjcgMTIuODM3MiA5LjA0NjY3VjExLjY3MTdDMTIuODM3MiAxMi4yMjE2IDEyLjgzNzIgMTIuNDk2NiAxMi42NjY0IDEyLjY2NzVDMTIuNDk1NSAxMi44MzgzIDEyLjIyMDUgMTIuODM4MyAxMS42NzA2IDEyLjgzODNIOS4wNDU1N0M4LjQ5NTYxIDEyLjgzODMgOC4yMjA2MiAxMi44MzgzIDguMDQ5NzYgMTIuNjY3NUM3Ljg3ODkxIDEyLjQ5NjYgNy44Nzg5MSAxMi4yMjE2IDcuODc4OTEgMTEuNjcxN1Y5LjA0NjY3WiIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xLjE3MTg4IDIuMzMzMjlDMS4xNzE4OCAxLjc4MzMyIDEuMTcxODggMS41MDgzNCAxLjM0MjczIDEuMzM3NDhDMS41MTM1OSAxLjE2NjYzIDEuNzg4NTcgMS4xNjY2MyAyLjMzODU0IDEuMTY2NjNINC45NjM1NEM1LjUxMzUxIDEuMTY2NjMgNS43ODg1IDEuMTY2NjMgNS45NTkzNSAxLjMzNzQ4QzYuMTMwMjEgMS41MDgzNCA2LjEzMDIxIDEuNzgzMzIgNi4xMzAyMSAyLjMzMzI5VjQuOTU4MjlDNi4xMzAyMSA1LjUwODI3IDYuMTMwMjEgNS43ODMyNSA1Ljk1OTM1IDUuOTU0MUM1Ljc4ODUgNi4xMjQ5NiA1LjUxMzUxIDYuMTI0OTYgNC45NjM1NCA2LjEyNDk2SDIuMzM4NTRDMS43ODg1NyA2LjEyNDk2IDEuNTEzNTkgNi4xMjQ5NiAxLjM0MjczIDUuOTU0MUMxLjE3MTg4IDUuNzgzMjUgMS4xNzE4OCA1LjUwODI3IDEuMTcxODggNC45NTgyOVYyLjMzMzI5WiIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xLjE3MTg4IDkuMDQxNjdDMS4xNzE4OCA4LjQ5MTcgMS4xNzE4OCA4LjIxNjcyIDEuMzQyNzMgOC4wNDU4NkMxLjUxMzU5IDcuODc1IDEuNzg4NTcgNy44NzUgMi4zMzg1NCA3Ljg3NUg0Ljk2MzU0QzUuNTEzNTEgNy44NzUgNS43ODg1IDcuODc1IDUuOTU5MzUgOC4wNDU4NkM2LjEzMDIxIDguMjE2NzIgNi4xMzAyMSA4LjQ5MTcgNi4xMzAyMSA5LjA0MTY3VjExLjY2NjdDNi4xMzAyMSAxMi4yMTY2IDYuMTMwMjEgMTIuNDkxNiA1Ljk1OTM1IDEyLjY2MjVDNS43ODg1IDEyLjgzMzMgNS41MTM1MSAxMi44MzMzIDQuOTYzNTQgMTIuODMzM0gyLjMzODU0QzEuNzg4NTcgMTIuODMzMyAxLjUxMzU5IDEyLjgzMzMgMS4zNDI3MyAxMi42NjI1QzEuMTcxODggMTIuNDkxNiAxLjE3MTg4IDEyLjIxNjYgMS4xNzE4OCAxMS42NjY3VjkuMDQxNjdaIiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTcuODc4OTEgMi4zMzY3MUM3Ljg3ODkxIDEuNzg2NzQgNy44Nzg5MSAxLjUxMTc1IDguMDQ5NzYgMS4zNDA5QzguMjIwNjIgMS4xNzAwNCA4LjQ5NTYxIDEuMTcwMDQgOS4wNDU1NyAxLjE3MDA0SDExLjY3MDZDMTIuMjIwNSAxLjE3MDA0IDEyLjQ5NTUgMS4xNzAwNCAxMi42NjY0IDEuMzQwOUMxMi44MzcyIDEuNTExNzUgMTIuODM3MiAxLjc4Njc0IDEyLjgzNzIgMi4zMzY3MVY0Ljk2MTcxQzEyLjgzNzIgNS41MTE2OCAxMi44MzcyIDUuNzg2NjcgMTIuNjY2NCA1Ljk1NzUyQzEyLjQ5NTUgNi4xMjgzOCAxMi4yMjA1IDYuMTI4MzggMTEuNjcwNiA2LjEyODM4SDkuMDQ1NTdDOC40OTU2MSA2LjEyODM4IDguMjIwNjIgNi4xMjgzOCA4LjA0OTc2IDUuOTU3NTJDNy44Nzg5MSA1Ljc4NjY3IDcuODc4OTEgNS41MTE2OCA3Ljg3ODkxIDQuOTYxNzFWMi4zMzY3MVoiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNy44Nzg5MSA5LjA0NjY3QzcuODc4OTEgOC40OTY3IDcuODc4OTEgOC4yMjE3MiA4LjA0OTc2IDguMDUwODZDOC4yMjA2MiA3Ljg4IDguNDk1NjEgNy44OCA5LjA0NTU3IDcuODhIMTEuNjcwNkMxMi4yMjA1IDcuODggMTIuNDk1NSA3Ljg4IDEyLjY2NjQgOC4wNTA4NkMxMi44MzcyIDguMjIxNzIgMTIuODM3MiA4LjQ5NjcgMTIuODM3MiA5LjA0NjY3VjExLjY3MTdDMTIuODM3MiAxMi4yMjE2IDEyLjgzNzIgMTIuNDk2NiAxMi42NjY0IDEyLjY2NzVDMTIuNDk1NSAxMi44MzgzIDEyLjIyMDUgMTIuODM4MyAxMS42NzA2IDEyLjgzODNIOS4wNDU1N0M4LjQ5NTYxIDEyLjgzODzIDguMjIwNjIgMTIuODM4MyA4LjA0OTc2IDEyLjY2NzVDNy44Nzg5MSAxMi40OTY2IDcuODc4OTEgMTIuMjIxNiA3Ljg3ODkxIDExLjY3MTdWOS4wNDY2N1oiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMS4xNzE4OCAyLjMzMzI5QzEuMTcxODggMS43ODMzMiAxLjE3MTg4IDEuNTA4MzQgMS4zNDI3MyAxLjMzNzQ4QzEuNTEzNTkgMS4xNjY2MyAxLjc4ODU3IDEuMTY2NjMgMi4zMzg1NCAxLjE2NjYzSDQuOTYzNTRDNS41MTM1MSAxLjE2NjYzIDUuNzg4NSAxLjE2NjYzIDUuOTU5MzUgMS4zMzc0OEM2LjEzMDIxIDEuNTA4MzQgNi4xMzAyMSAxLjc4MzMyIDYuMTMwMjEgMi4zMzMyOVY0Ljk1ODI5QzYuMTMwMjEgNS41MDgyNyA2LjEzMDIxIDUuNzgzMjUgNS45NTkzNSA1Ljk1NDFDNS43ODg1IDYuMTI0OTYgNS41MTM1MSA2LjEyNDk2IDQuOTYzNTQgNi4xMjQ5NkgyLjMzODU0QzEuNzg4NTcgNi4xMjQ5NiAxLjUxMzU5IDYuMTI0OTYgMS4zNDI3MyA1Ljk1NDFDMS4xNzE4OCA1Ljc4MzI1IDEuMTcxODggNS41MDgyNyAxLjE3MTg4IDQuOTU4MjlWMi4zMzMyOVoiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMS4xNzE4OCA5LjA0MTY3QzEuMTcxODggOC40OTE3IDEuMTcxODggOC4yMTY3MiAxLjM0MjczIDguMDQ1ODZDMS41MTM1OSA3Ljg3NSAxLjc4ODU3IDcuODc1IDIuMzM4NTQgNy44NzVINC45NjM1NEM1LjUxMzUxIDcuODc1IDUuNzg4NSA3Ljg3NSA1Ljk1OTM1IDguMDQ1ODZDNi4xMzAyMSA4LjIxNjcyIDYuMTMwMjEgOC40OTE3IDYuMTMwMjEgOS4wNDE2N1YxMS42NjY3QzYuMTMwMjEgMTIuMjE2NiA2LjEzMDIxIDEyLjQ5MTYgNS45NTkzNSAxMi42NjI1QzUuNzg4NSAxMi44MzMzIDUuNTEzNTEgMTIuODMzMyA0Ljk2MzU0IDEyLjgzMzNIMi4zMzg1NEMxLjc4ODU3IDEyLjgzMzMgMS41MTM1OSAxMi44MzMzIDEuMzQyNzMgMTIuNjYyNUMxLjE3MTg4IDEyLjQ5MTYgMS4xNzE4OCAxMi4yMTY2IDEuMTcxODggMTEuNjY2N1Y5LjA0MTY3WiIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik03Ljg3ODkxIDIuMzM2NzFDNy44Nzg5MSAxLjc4Njc0IDcuODc4OTEgMS41MTE3NSA4LjA0OTc2IDEuMzQwOUM4LjIyMDYyIDEuMTcwMDQgOC40OTU2MSAxLjE3MDA0IDkuMDQ1NTcgMS4xNzAwNEgxMS42NzA2QzEyLjIyMDUgMS4xNzAwNCAxMi40OTU1IDEuMTcwMDQgMTIuNjY2NCAxLjM0MDlDMTIuODM3MiAxLjUxMTc1IDEyLjgzNzIgMS43ODY3NCAxMi44MzcyIDIuMzM2NzFWNC45NjE3MUMxMi44MzcyIDUuNTExNjggMTIuODM3MiA1Ljc4NjY3IDEyLjY2NjQgNS45NTc1MkMxMi40OTU1IDYuMTI4MzggMTIuMjIwNSA2LjEyODM4IDExLjY3MDYgNi4xMjgzOEg5LjA0NTU3QzguNDk1NjEgNi4xMjgzOCA4LjIyMDYyIDYuMTI4MzggOC4wNDk3NiA1Ljk1NzUyQzcuODc4OTEgNS43ODY2NyA3Ljg3ODkxIDUuNTExNjggNy44Nzg5MSA0Ljk2MTcxVjIuMzM2NzFaIiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Rocket icon variant 2 - Alternative rocket design (used in Free Tweaks dropdown) */
.icon-rocket-secondary {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNC4wODMzMSA2LjU4ODY2QzcuMTY1NjUgMC44NDM5MDcgMTEuMDAzNyAwLjc3NzY2MyAxMi41Mzc0IDEuNDYyNjRDMTMuMjIyNCAyLjk5NjM3IDEzLjE1NjEgNi44MzQ0MSA3LjQxMTQgOS45MTY3NUM3LjM1MTc5IDkuNTc0MjcgNy4wMjA1MSA4LjY3NzExIDYuMTcxNyA3LjgyODM2QzUuMzIyOTcgNi45Nzk1NSA0LjQyNTggNi42NDgyNyA0LjA4MzMxIDYuNTg4NjZaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNOC4xNjY2OSA5LjgwMDA4QzkuMzU4MzIgMTAuMzQ0NiA5LjQ4NTU1IDExLjMyMDggOS42NTA2MyAxMi4yNTAxQzkuNjUwNjMgMTIuMjUwMSAxMi4xNDY0IDEwLjUyODEgMTAuNTUgOC4xNjY3NSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTQuMTk5OTkgNS44MzMxN0MzLjY1NTU0IDQuNjQxNTUgMi42NzkyOCA0LjUxNDMyIDEuNzUgNC4zNDkyNUMxLjc1IDQuMzQ5MjUgMy40NzE5NiAxLjg1MzQ3IDUuODMzMzMgMy40NDk5MyIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTMuNjIxNzMgOC4xNjY1QzMuMjUzMTMgOC41MzUxMSAyLjYyNjUgOS42MDQwNyAzLjA2ODgyIDEwLjkzMUM0LjM5NTggMTEuMzczNCA1LjQ2NDc1IDEwLjc0NjggNS44MzMzNCAxMC4zNzgyIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTAuNTU1NSA0LjUyMjYxQzEwLjU1NTUgMy45Mjc1IDEwLjA3MzEgMy40NDUwNyA5LjQ3Nzk4IDMuNDQ1MDdDOC44ODI4NyAzLjQ0NTA3IDguNDAwNDUgMy45Mjc1IDguNDAwNDUgNC41MjI2MUM4LjQwMDQ1IDUuMTE3NzIgOC44ODI4NyA1LjYwMDE2IDkuNDc3OTggNS42MDAxNkMxMC4wNzMxIDUuNjAwMTYgMTAuNTU1NSA1LjExNzcyIDEwLjU1NTUgNC41MjI2MVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiLz48L3N2Zz4K');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNC4wODMzMSA2LjU4ODY2QzcuMTY1NjUgMC44NDM5MDcgMTEuMDAzNyAwLjc3NzY2MyAxMi41Mzc0IDEuNDYyNjRDMTMuMjIyNCAyLjk5NjM3IDEzLjE1NjEgNi44MzQ0MSA3LjQxMTQgOS45MTY3NUM3LjM1MTc5IDkuNTc0MjcgNy4wMjA1MSA4LjY3NzExIDYuMTcxNyA3LjgyODM2QzUuMzIyOTcgNi45Nzk1NSA0LjQyNTggNi42NDgyNyA0LjA4MzMxIDYuNTg4NjZaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNOC4xNjY2OSA5LjgwMDA4QzkuMzU4MzIgMTAuMzQ0NiA5LjQ4NTU1IDExLjMyMDggOS42NTA2MyAxMi4yNTAxQzkuNjUwNjMgMTIuMjUwMSAxMi4xNDY0IDEwLjUyODEgMTAuNTUgOC4xNjY3NSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTQuMTk5OTkgNS44MzMxN0MzLjY1NTU0IDQuNjQxNTUgMi42NzkyOCA0LjUxNDMyIDEuNzUgNC4zNDkyNUMxLjc1IDQuMzQ5MjUgMy40NzE5NiAxLjg1MzQ3IDUuODMzMzMgMy40NDk5MyIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTMuNjIxNzMgOC4xNjY1QzMuMjUzMTMgOC41MzUxMSAyLjYyNjUgOS42MDQwNyAzLjA2ODgyIDEwLjkzMUM0LjM5NTggMTEuMzczNCA1LjQ2NDc1IDEwLjc0NjggNS44MzMzNCAxMC4zNzgyIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTAuNTU1NSA0LjUyMjYxQzEwLjU1NTUgMy45Mjc1IDEwLjA3MzEgMy40NDUwNyA5LjQ3Nzk4IDMuNDQ1MDdDOC44ODI4NyAzLjQ0NTA3IDguNDAwNDUgMy45Mjc1IDguNDAwNDUgNC41MjI2MUM4LjQwMDQ1IDUuMTE3NzIgOC44ODI4NyA1LjYwMDE2IDkuNDc3OTggNS42MDAxNkMxMC4wNzMxIDUuNjAwMTYgMTAuNTU1NSA1LjExNzcyIDEwLjU1NTUgNC41MjI2MVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiLz48L3N2Zz4K');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Trophy with dollar sign - Award/earnings icon (used in Affiliate dropdown) */
.icon-trophy-dollar {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTIuMjE2NiA5LjgyMDU3QzExLjgzMzcgNy41MTcxIDEwLjY0MTkgNS44MDE4MyA5LjYwNTc1IDQuNzk0MzRDOS4zMDQyMiA0LjUwMTE2IDkuMTUzNDkgNC4zNTQ1OCA4LjgyMDQ3IDQuMjE4OTJDOC40ODc0NCA0LjA4MzI1IDguMjAxMiA0LjA4MzI1IDcuNjI4NzIgNC4wODMyNUg2LjM3MTI4QzUuNzk4OCA0LjA4MzI1IDUuNTEyNTYgNC4wODMyNSA1LjE3OTU0IDQuMjE4OTJDNC44NDY1MyA0LjM1NDU4IDQuNjk1NzggNC41MDExNiA0LjM5NDI3IDQuNzk0MzRDMy4zNTgxNCA1LjgwMTgzIDIuMTY2MjcgNy41MTcxIDEuNzgzNDEgOS44MjA1N0MxLjQ5ODU0IDExLjUzNDQgMy4wNzk1NyAxMi44MzMzIDQuODQ2NTIgMTIuODMzM0g5LjE1MzQ5QzEwLjkyMDQgMTIuODMzMyAxMi41MDE1IDExLjUzNDQgMTIuMjE2NiA5LjgyMDU3WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTQuMjMzMDEgMi41OTE3NkM0LjExMjY2IDIuNDE2NTkgMy45MzgyMyAyLjE3ODgzIDQuMjk4NTYgMi4xMjQ2MUM0LjY2ODkzIDIuMDY4ODggNS4wNTM1MiAyLjMyMjQxIDUuNDI5OTcgMi4zMTcyQzUuNzcwNTMgMi4zMTI0OSA1Ljk0NDAzIDIuMTYxNDQgNi4xMzAxNyAxLjk0NTc4QzYuMzI2MTcgMS43MTg2OCA2LjYyOTY4IDEuMTY2NzUgNi45OTk5OCAxLjE2Njc1QzcuMzcwMjggMS4xNjY3NSA3LjY3Mzc5IDEuNzE4NjggNy44Njk3OSAxLjk0NTc4QzguMDU1OTMgMi4xNjE0NCA4LjIyOTQxIDIuMzEyNDkgOC41Njk5NiAyLjMxNzJDOC45NDY0NSAyLjMyMjQxIDkuMzMxMDQgMi4wNjg4OCA5LjcwMTQgMi4xMjQ2MUMxMC4wNjE3IDIuMTc4ODMgOS44ODczIDIuNDE2NTkgOS43NjY5NiAyLjU5MTc2TDkuMjIyNzcgMy4zODM3OUM4Ljk5MDAyIDMuNzIyNiA4Ljg3MzY1IDMuODkyMDEgOC42MzAwNSAzLjk4NzcxQzguMzg2NSA0LjA4MzQxIDguMDcxNzQgNC4wODM0MSA3LjQ0MjI2IDQuMDgzNDFINi41NTc3QzUuOTI4MjIgNC4wODM0MSA1LjYxMzQ1IDQuMDgzNDEgNS4zNjk4OSAzLjk4NzcxQzUuMTI2MzIgMy44OTIwMSA1LjAwOTk0IDMuNzIyNiA0Ljc3NzE2IDMuMzgzNzlMNC4yMzMwMSAyLjU5MTc2WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik03Ljk0ODkzIDcuNTM1OEM3LjgyMjgxIDcuMDcwMjQgNy4xODA5MSA2LjY1MDEyIDYuNDEwMzkgNi45NjQ0MkM1LjYzOTg2IDcuMjc4NjYgNS41MTc0NiA4LjI4OTg3IDYuNjgyOTggOC4zOTczMkM3LjIwOTczIDguNDQ1ODUgNy41NTMyIDguMzQwOTcgNy44Njc2MSA4LjYzNzcxQzguMTgyMDkgOC45MzQ0IDguMjQwNDggOS43NTk1OCA3LjQzNjY1IDkuOTgxOTVDNi42MzI4MSAxMC4yMDQzIDUuODM2ODUgOS44NTY4OCA1Ljc1MDE4IDkuMzYzNDRNNi45MDc2OCA2LjQxMjM1VjYuODU1OTJNNi45MDc2OCAxMC4wNTA0VjEwLjQ5NTciIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPgo=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTIuMjE2NiA5LjgyMDU3QzExLjgzMzcgNy41MTcxIDEwLjY0MTkgNS44MDE4MyA5LjYwNTc1IDQuNzk0MzRDOS4zMDQyMiA0LjUwMTE2IDkuMTUzNDkgNC4zNTQ1OCA4LjgyMDQ3IDQuMjE4OTJDOC40ODc0NCA0LjA4MzI1IDguMjAxMiA0LjA4MzI1IDcuNjI4NzIgNC4wODMyNUg2LjM3MTI4QzUuNzk4OCA0LjA4MzI1IDUuNTEyNTYgNC4wODMyNSA1LjE3OTU0IDQuMjE4OTJDNC44NDY1MyA0LjM1NDU4IDQuNjk1NzggNC41MDExNiA0LjM5NDI3IDQuNzk0MzRDMy4zNTgxNCA1LjgwMTgzIDIuMTY2MjcgNy41MTcxIDEuNzgzNDEgOS44MjA1N0MxLjQ5ODU0IDExLjUzNDQgMy4wNzk1NyAxMi44MzMzIDQuODQ2NTIgMTIuODMzM0g5LjE1MzQ5QzEwLjkyMDQgMTIuODMzMyAxMi41MDE1IDExLjUzNDQgMTIuMjE2NiA5LjgyMDU3WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTQuMjMzMDEgMi41OTE3NkM0LjExMjY2IDIuNDE2NTkgMy45MzgyMyAyLjE3ODgzIDQuMjk4NTYgMi4xMjQ2MUM0LjY2ODkzIDIuMDY4ODggNS4wNTM1MiAyLjMyMjQxIDUuNDI5OTcgMi4zMTcyQzUuNzcwNTMgMi4zMTI0OSA1Ljk0NDAzIDIuMTYxNDQgNi4xMzAxNyAxLjk0NTc4QzYuMzI2MTcgMS43MTg2OCA2LjYyOTY4IDEuMTY2NzUgNi45OTk5OCAxLjE2Njc1QzcuMzcwMjggMS4xNjY3NSA3LjY3Mzc5IDEuNzE4NjggNy44Njk3OSAxLjk0NTc4QzguMDU1OTMgMi4xNjE0NCA4LjIyOTQxIDIuMzEyNDkgOC41Njk5NiAyLjMxNzJDOC45NDY0NSAyLjMyMjQxIDkuMzMxMDQgMi4wNjg4OCA5LjcwMTQgMi4xMjQ2MUMxMC4wNjE3IDIuMTc4ODMgOS44ODczIDIuNDE2NTkgOS43NjY5NiAyLjU5MTc2TDkuMjIyNzcgMy4zODM3OUM4Ljk5MDAyIDMuNzIyNiA4Ljg3MzY1IDMuODkyMDEgOC42MzAwNSAzLjk4NzcxQzguMzg2NSA0LjA4MzQxIDguMDcxNzQgNC4wODM0MSA3LjQ0MjI2IDQuMDgzNDFINi41NTc3QzUuOTI4MjIgNC4wODM0MSA1LjYxMzQ1IDQuMDgzNDEgNS4zNjk4OSAzLjk4NzcxQzUuMTI2MzIgMy44OTIwMSA1LjAwOTk0IDMuNzIyNiA0Ljc3NzE2IDMuMzgzNzlMNC4yMzMwMSAyLjU5MTc2WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik03Ljk0ODkzIDcuNTM1OEM3LjgyMjgxIDcuMDcwMjQgNy4xODA5MSA2LjY1MDEyIDYuNDEwMzkgNi45NjQ0MkM1LjYzOTg2IDcuMjc4NjYgNS41MTc0NiA4LjI4OTg3IDYuNjgyOTggOC4zOTczMkM3LjIwOTczIDguNDQ1ODUgNy41NTMyIDguMzQwOTcgNy44Njc2MSA4LjYzNzcxQzguMTgyMDkgOC45MzQ0IDguMjQwNDggOS43NTk1OCA3LjQzNjY1IDkuOTgxOTVDNi42MzI4MSAxMC4yMDQzIDUuODM2ODUgOS44NTY4OCA1Ljc1MDE4IDkuMzYzNDRNNi45MDc2OCA2LjQxMjM1VjYuODU1OTJNNi45MDc2OCAxMC4wNTA0VjEwLjQ5NTciIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPgo=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Document with pencil - Edit/referral icon (used in Referral dropdown) */
.icon-document-edit {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTEuNTIxIDYuNDE2NzVWNS44MzM0MUMxMS41MjEgMy42MzM1MiAxMS41MjEgMi41MzM1OSAxMC44Mzc1IDEuODUwMTZDMTAuMTU0MSAxLjE2Njc1IDkuMDU0MTUgMS4xNjY3NSA2Ljg1NDI5IDEuMTY2NzVINi4yNzEwMUM0LjA3MTEzIDEuMTY2NzUgMi45NzExOSAxLjE2Njc1IDIuMjg3NzcgMS44NTAxNkMxLjYwNDM2IDIuNTMzNTcgMS42MDQzNCAzLjYzMzUgMS42MDQzMyA1LjgzMzM3TDEuNjA0MzEgOC4xNjY3NUMxLjYwNDI5IDEwLjM2NjYgMS42MDQyOCAxMS40NjY1IDIuMjg3NjcgMTIuMTVDMi45NzEwOSAxMi44MzM0IDQuMDcxMDcgMTIuODMzNCA2LjI3MDk1IDEyLjgzMzQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik00LjIyOTMxIDQuMDgzMjVIOC44OTU5NU00LjIyOTMxIDYuOTk5OTJIOC44OTU5NSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTcuNzI5MzEgMTIuMTQ5VjEyLjgzMzRIOC40MTM3OUM4LjY1MjYxIDEyLjgzMzQgOC43NzIwMiAxMi44MzM0IDguODc5MzUgMTIuNzg5QzguOTg2NzQgMTIuNzQ0NSA5LjA3MTE1IDEyLjY2IDkuMjQwMDMgMTIuNDkxMkwxMi4wNTM4IDkuNjc3MjNDMTIuMjEzIDkuNTE3OTggMTIuMjkyNyA5LjQzODM2IDEyLjMzNTIgOS4zNTI0OUMxMi40MTYzIDkuMTg5MDQgMTIuNDE2MyA4Ljk5NzE4IDEyLjMzNTIgOC44MzM3M0MxMi4yOTI3IDguNzQ3ODEgMTIuMjEzIDguNjY4MTggMTIuMDUzOCA4LjUwODkzQzExLjg5NDUgOC4zNDk2OCAxMS44MTQ5IDguMjcwMDYgMTEuNzI4OSA4LjIyNzQ3QzExLjU2NTUgOC4xNDY1MSAxMS4zNzM2IDguMTQ2NTEgMTEuMjEwMSA4LjIyNzQ3QzExLjEyNDMgOC4yNzAwNiAxMS4wNDQ2IDguMzQ5NjggMTAuODg1MyA4LjUwODkzTDguMDcxNTUgMTEuMzIyOUM3LjkwMjY4IDExLjQ5MTcgNy44MTgyNyAxMS41NzYyIDcuNzczODIgMTEuNjgzNUM3LjcyOTMxIDExLjc5MDkgNy43MjkzMSAxMS45MTAyIDcuNzI5MzEgMTIuMTQ5WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPgo=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTEuNTIxIDYuNDE2NzVWNS44MzM0MUMxMS41MjEgMy42MzM1MiAxMS41MjEgMi41MzM1OSAxMC44Mzc1IDEuODUwMTZDMTAuMTU0MSAxLjE2Njc1IDkuMDU0MTUgMS4xNjY3NSA2Ljg1NDI5IDEuMTY2NzVINi4yNzEwMUM0LjA3MTEzIDEuMTY2NzUgMi45NzExOSAxLjE2Njc1IDIuMjg3NzcgMS44NTAxNkMxLjYwNDM2IDIuNTMzNTcgMS42MDQzNCAzLjYzMzUgMS42MDQzMyA1LjgzMzM3TDEuNjA0MzEgOC4xNjY3NUMxLjYwNDI5IDEwLjM2NjYgMS42MDQyOCAxMS40NjY1IDIuMjg3NjcgMTIuMTVDMi45NzEwOSAxMi44MzM0IDQuMDcxMDcgMTIuODMzNCA2LjI3MDk1IDEyLjgzMzQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik00LjIyOTMxIDQuMDgzMjVIOC44OTU5NU00LjIyOTMxIDYuOTk5OTJIOC44OTU5NSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTcuNzI5MzEgMTIuMTQ5VjEyLjgzMzRIOC40MTM3OUM4LjY1MjYxIDEyLjgzMzQgOC43NzIwMiAxMi44MzM0IDguODc5MzUgMTIuNzg5QzguOTg2NzQgMTIuNzQ0NSA5LjA3MTE1IDEyLjY2IDkuMjQwMDMgMTIuNDkxMkwxMi4wNTM4IDkuNjc3MjNDMTIuMjEzIDkuNTE3OTggMTIuMjkyNyA5LjQzODM2IDEyLjMzNTIgOS4zNTI0OUMxMi40MTYzIDkuMTg5MDQgMTIuNDE2MyA4Ljk5NzE4IDEyLjMzNTIgOC44MzM3M0MxMi4yOTI3IDguNzQ3ODEgMTIuMjEzIDguNjY4MTggMTIuMDUzOCA4LjUwODkzQzExLjg5NDUgOC4zNDk2OCAxMS44MTQ5IDguMjcwMDYgMTEuNzI4OSA4LjIyNzQ3QzExLjU2NTUgOC4xNDY1MSAxMS4zNzM2IDguMTQ2NTEgMTEuMjEwMSA4LjIyNzQ3QzExLjEyNDMgOC4yNzAwNiAxMS4wNDQ2IDguMzQ5NjggMTAuODg1MyA4LjUwODkzTDguMDcxNTUgMTEuMzIyOUM3LjkwMjY4IDExLjQ5MTcgNy44MTgyNyAxMS41NzYyIDcuNzczODIgMTEuNjgzNUM3LjcyOTMxIDExLjc5MDkgNy43MjkzMSAxMS45MTAyIDcuNzI5MzEgMTIuMTQ5WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPgo=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Notepad with spiral binding - Notes/changelog icon (used in Patch Notes dropdown) */
.icon-notepad-spiral {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOS42MjUgMS4xNjY3NVYyLjkxNjc1TTQuMzc1IDEuMTY2NzVWMi45MTY3NU03IDEuMTY2NzVWMi45MTY3NSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTcuNTgzMzEgMi4wNDE3NUg2LjQxNjY1QzQuNDkxNzUgMi4wNDE3NSAzLjUyOTI5IDIuMDQxNzUgMi45MzEzMSAyLjYzOTc0QzIuMzMzMzEgMy4yMzc3MyAyLjMzMzMxIDQuMjAwMTggMi4zMzMzMSA2LjEyNTA4VjguNzUwMDhDMi4zMzMzMSAxMC42NzUgMi4zMzMzMSAxMS42Mzc0IDIuOTMxMzEgMTIuMjM1NEMzLjUyOTI5IDEyLjgzMzQgNC40OTE3NSAxMi44MzM0IDYuNDE2NjUgMTIuODMzNEg3LjU4MzMxQzkuNTA4MiAxMi44MzM0IDEwLjQ3MDYgMTIuODMzNCAxMS4wNjg3IDEyLjIzNTRDMTEuNjY2NiAxMS42Mzc0IDExLjY2NjYgMTAuNjc1IDExLjY2NjYgOC43NTAwOFY2LjEyNTA4QzExLjY2NjYgNC4yMDAxOCAxMS42NjY2IDMuMjM3NzMgMTEuMDY4NyAyLjYzOTczQzEwLjQ3MDYgMi4wNDE3NSA5LjUwODIgMi4wNDE3NSA3LjU4MzMxIDIuMDQxNzVaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNNC42NjY2OSA4Ljc1MDA4SDcuMDAwMDJNNC42NjY2OSA2LjQxNjc1SDkuMzMzMzUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOS42MjUgMS4xNjY3NVYyLjkxNjc1TTQuMzc1IDEuMTY2NzVWMi45MTY3NU03IDEuMTY2NzVWMi45MTY3NSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTcuNTgzMzEgMi4wNDE3NUg2LjQxNjY1QzQuNDkxNzUgMi4wNDE3NSAzLjUyOTI5IDIuMDQxNzUgMi45MzEzMSAyLjYzOTc0QzIuMzMzMzEgMy4yMzc3MyAyLjMzMzMxIDQuMjAwMTggMi4zMzMzMSA2LjEyNTA4VjguNzUwMDhDMi4zMzMzMSAxMC42NzUgMi4zMzMzMSAxMS42Mzc0IDIuOTMxMzEgMTIuMjM1NEMzLjUyOTI5IDEyLjgzMzQgNC40OTE3NSAxMi44MzM0IDYuNDE2NjUgMTIuODMzNEg3LjU4MzMxQzkuNTA4MiAxMi44MzM0IDEwLjQ3MDYgMTIuODMzNCAxMS4wNjg3IDEyLjIzNTRDMTEuNjY2NiAxMS42Mzc0IDExLjY2NjYgMTAuNjc1IDExLjY2NjYgOC43NTAwOFY2LjEyNTA4QzExLjY2NjYgNC4yMDAxOCAxMS42NjY2IDMuMjM3NzMgMTEuMDY4NyAyLjYzOTczQzEwLjQ3MDYgMi4wNDE3NSA5LjUwODIgMi4wNDE3NSA3LjU4MzMxIDIuMDQxNzVaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNNC42NjY2OSA4Ljc1MDA4SDcuMDAwMDJNNC42NjY2OSA2LjQxNjc1SDkuMzMzMzUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Discord icon - Social media link (outline version) */
.icon-discord {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTIuOTE4IDE0Ljc5MTdMMTMuOTk1OCAxNi4yNjcyQzE0LjA5NyAxNi40MjczIDE0LjI5MTQgMTYuNDk4OCAxNC40Njg5IDE2LjQzNTRDMTUuMTM4NyAxNi4xOTYyIDE2Ljc5OSAxNS41NDc3IDE4LjE2NiAxNC41NjA1QzE4LjI3MjYgMTQuNDgzNSAxOC4zMzQxIDE0LjM1NTIgMTguMzMzMyAxNC4yMjI4QzE4LjMzMzMgNi44NzUwOCAxNi4yNTEzIDQuNzkxNzUgMTYuMjUxMyA0Ljc5MTc1QzE2LjI1MTMgNC43OTE3NSAxNC41ODQ2IDMuODM1MTkgMTIuNzk2MiAzLjU0Njc2QzEyLjYyMDMgMy41MTgzOCAxMi40NDggMy42MTI2NiAxMi4zNjk3IDMuNzc0MTdMMTEuOTk4OSA0LjUzOTA2QzExLjk5ODkgNC41MzkwNiAxMS4wNzE3IDQuMzQ1MDYgMTAuMDAwNiA0LjM0NTA2QzguOTI5NTYgNC4zNDUwNiA4LjAwMjM5IDQuNTM5MDYgOC4wMDIzOSA0LjUzOTA2TDcuNjMxNTcgMy43NzQxN0M3LjU1MzI2IDMuNjEyNjYgNy4zODEwMSAzLjUxODM4IDcuMjA1MDUgMy41NDY3NkM1LjQxNzk3IDMuODM0OTcgMy43NTEzIDQuNzkxNzUgMy43NTEzIDQuNzkxNzVDMy43NTEzIDQuNzkxNzUgMS42Njc5OCA2Ljg3NTA4IDEuNjY3OTggMTQuMjIyOEMxLjY2NzE0IDE0LjM1NTIgMS43Mjg2OSAxNC40ODM1IDEuODM1MyAxNC41NjA1QzMuMjAyMjggMTUuNTQ3NyA0Ljg2MjU2IDE2LjE5NjIgNS41MzIzNiAxNi40MzU0QzUuNzA5ODUgMTYuNDk4OCA1LjkwNDI5IDE2LjQyNzMgNi4wMDU0OSAxNi4yNjcyTDcuMDg0NjQgMTQuNzkxNyIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xNC41ODQ2IDEzLjk1ODNDMTQuNTg0NiAxMy45NTgzIDEyLjY3MjEgMTUuMjA4MyAxMC4wMDEzIDE1LjIwODNDNy4zMzA1NCAxNS4yMDgzIDUuNDE3OTcgMTMuOTU4MyA1LjQxNzk3IDEzLjk1ODMiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQuMzczNyAxMC4yMDg0QzE0LjM3MzcgMTEuMTI4OSAxMy43MjA4IDExLjg3NTEgMTIuOTE1NCAxMS44NzUxQzEyLjEwOTkgMTEuODc1MSAxMS40NTcgMTEuMTI4OSAxMS40NTcgMTAuMjA4NEMxMS40NTcgOS4yODc5MSAxMi4xMDk5IDguNTQxNzUgMTIuOTE1NCA4LjU0MTc1QzEzLjcyMDggOC41NDE3NSAxNC4zNzM3IDkuMjg3OTEgMTQuMzczNyAxMC4yMDg0WiIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KICA8cGF0aCBkPSJNOC41NDE2OCAxMC4yMDg0QzguNTQxNjggMTEuMTI4OSA3Ljg4ODc1IDExLjg3NTEgNy4wODMzMyAxMS44NzUxQzYuMjc3OTIgMTEuODc1MSA1LjYyNSAxMS4xMjg5IDUuNjI1IDEwLjIwODRDNS42MjUgOS4yODc5MSA2LjI3NzkyIDguNTQxNzUgNy4wODMzMyA4LjU0MTc1QzcuODg4NzUgOC41NDE3NSA4LjU0MTY4IDkuMjg3OTEgOC41NDE2OCAxMC4yMDg0WiIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KPC9zdmc+Cg==');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTIuOTE4IDE0Ljc5MTdMMTMuOTk1OCAxNi4yNjcyQzE0LjA5NyAxNi40MjczIDE0LjI5MTQgMTYuNDk4OCAxNC40Njg5IDE2LjQzNTRDMTUuMTM4NyAxNi4xOTYyIDE2Ljc5OSAxNS41NDc3IDE4LjE2NiAxNC41NjA1QzE4LjI3MjYgMTQuNDgzNSAxOC4zMzQxIDE0LjM1NTIgMTguMzMzMyAxNC4yMjI4QzE4LjMzMzMgNi44NzUwOCAxNi4yNTEzIDQuNzkxNzUgMTYuMjUxMyA0Ljc5MTc1QzE2LjI1MTMgNC43OTE3NSAxNC41ODQ2IDMuODM1MTkgMTIuNzk2MiAzLjU0Njc2QzEyLjYyMDMgMy41MTgzOCAxMi40NDggMy42MTI2NiAxMi4zNjk3IDMuNzc0MTdMMTEuOTk4OSA0LjUzOTA2QzExLjk5ODkgNC41MzkwNiAxMS4wNzE3IDQuMzQ1MDYgMTAuMDAwNiA0LjM0NTA2QzguOTI5NTYgNC4zNDUwNiA4LjAwMjM5IDQuNTM5MDYgOC4wMDIzOSA0LjUzOTA2TDcuNjMxNTcgMy43NzQxN0M3LjU1MzI2IDMuNjEyNjYgNy4zODEwMSAzLjUxODM4IDcuMjA1MDUgMy41NDY3NkM1LjQxNzk3IDMuODM0OTcgMy43NTEzIDQuNzkxNzUgMy43NTEzIDQuNzkxNzVDMy43NTEzIDQuNzkxNzUgMS42Njc5OCA2Ljg3NTA4IDEuNjY3OTggMTQuMjIyOEMxLjY2NzE0IDE0LjM1NTIgMS43Mjg2OSAxNC40ODM1IDEuODM1MyAxNC41NjA1QzMuMjAyMjggMTUuNTQ3NyA0Ljg2MjU2IDE2LjE5NjIgNS41MzIzNiAxNi40MzU0QzUuNzA5ODUgMTYuNDk4OCA1LjkwNDI5IDE2LjQyNzMgNi4wMDU0OSAxNi4yNjcyTDcuMDg0NjQgMTQuNzkxNyIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xNC41ODQ2IDEzLjk1ODNDMTQuNTg0NiAxMy45NTgzIDEyLjY3MjEgMTUuMjA4MyAxMC4wMDEzIDE1LjIwODNDNy4zMzA1NCAxNS4yMDgzIDUuNDE3OTcgMTMuOTU4MyA1LjQxNzk3IDEzLjk1ODMiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQuMzczNyAxMC4yMDg0QzE0LjM3MzcgMTEuMTI4OSAxMy43MjA4IDExLjg3NTEgMTIuOTE1NCAxMS44NzUxQzEyLjEwOTkgMTEuODc1MSAxMS40NTcgMTEuMTI4OSAxMS40NTcgMTAuMjA4NEMxMS40NTcgOS4yODc5MSAxMi4xMDk5IDguNTQxNzUgMTIuOTE1NCA4LjU0MTc1QzEzLjcyMDggOC41NDE3NSAxNC4zNzM3IDkuMjg3OTEgMTQuMzczNyAxMC4yMDg0WiIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KICA8cGF0aCBkPSJNOC41NDE2OCAxMC4yMDg0QzguNTQxNjggMTEuMTI4OSA3Ljg4ODc1IDExLjg3NTEgNy4wODMzMyAxMS44NzUxQzYuMjc3OTIgMTEuODc1MSA1LjYyNSAxMS4xMjg5IDUuNjI1IDEwLjIwODRDNS42MjUgOS4yODc5MSA2LjI3NzkyIDguNTQxNzUgNy4wODMzMyA4LjU0MTc1QzcuODg4NzUgOC41NDE3NSA4LjU0MTY4IDkuMjg3OTEgOC41NDE2OCAxMC4yMDg0WiIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KPC9zdmc+Cg==');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Discord icon - Small outline version for dropdown menus (14x14) */
.icon-discord-small {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOS4wNDIxMiAxMC4zNTQyTDkuNzk2NiAxMS4zODdDOS44Njc0MiAxMS40OTkyIDEwLjAwMzUgMTEuNTQ5MiAxMC4xMjc4IDExLjUwNDhDMTAuNTk2NiAxMS4zMzczIDExLjc1ODggMTAuODgzNCAxMi43MTU3IDEwLjE5MjRDMTIuNzkwMyAxMC4xMzg1IDEyLjgzMzQgMTAuMDQ4NiAxMi44MzI5IDkuOTU2MDFDMTIuODMyOSA0LjgxMjU4IDExLjM3NTUgMy4zNTQyNSAxMS4zNzU1IDMuMzU0MjVDMTEuMzc1NSAzLjM1NDI1IDEwLjIwODggMi42ODQ2NiA4Ljk1NjkgMi40ODI3NkM4LjgzMzc1IDIuNDYyODkgOC43MTMxMiAyLjUyODg4IDguNjU4MzUgMi42NDE5NEw4LjM5ODc2IDMuMTc3MzZDOC4zOTg3NiAzLjE3NzM2IDcuNzQ5NzUgMy4wNDE1NiA2Ljk5OTk5IDMuMDQxNTZDNi4yNTAyMyAzLjA0MTU2IDUuNjAxMjEgMy4xNzczNiA1LjYwMTIxIDMuMTc3MzZMNS4zNDE2MyAyLjY0MTk0QzUuMjg2ODIgMi41Mjg4OCA1LjE2NjI0IDIuNDYyODkgNS4wNDMwNyAyLjQ4Mjc2QzMuNzkyMTEgMi42ODQ1IDIuNjI1NDUgMy4zNTQyNSAyLjYyNTQ1IDMuMzU0MjVDMi42MjU0NSAzLjM1NDI1IDEuMTY3MTIgNC44MTI1OCAxLjE2NzEyIDkuOTU2MDFDMS4xNjY1NCAxMC4wNDg2IDEuMjA5NjIgMTAuMTM4NSAxLjI4NDI1IDEwLjE5MjRDMi4yNDExMyAxMC44ODM0IDMuNDAzMzMgMTEuMzM3MyAzLjg3MjE5IDExLjUwNDhDMy45OTY0MyAxMS41NDkyIDQuMTMyNTQgMTEuNDk5MiA0LjIwMzM4IDExLjM4N0w0Ljk1ODc4IDEwLjM1NDIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xMC4yMDg4IDkuNzcwNzVDMTAuMjA4OCA5Ljc3MDc1IDguODY5OTggMTAuNjQ1OCA3LjAwMDQ1IDEwLjY0NThDNS4xMzA5MSAxMC42NDU4IDMuNzkyMTEgOS43NzA3NSAzLjc5MjExIDkuNzcwNzUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xMC4wNjI5IDcuMTQ1OTFDMTAuMDYyOSA3Ljc5MDI2IDkuNjA1ODcgOC4zMTI1OCA5LjA0MjA3IDguMzEyNThDOC40NzgyOCA4LjMxMjU4IDguMDIxMjQgNy43OTAyNiA4LjAyMTI0IDcuMTQ1OTFDOC4wMjEyNCA2LjUwMTU2IDguNDc4MjggNS45NzkyNSA5LjA0MjA3IDUuOTc5MjVDOS42MDU4NyA1Ljk3OTI1IDEwLjA2MjkgNi41MDE1NiAxMC4wNjI5IDcuMTQ1OTFaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjI1Ii8+CiAgPHBhdGggZD0iTTUuOTc5NjYgNy4xNDU5MUM1Ljk3OTY2IDcuNzkwMjYgNS41MjI2MSA4LjMxMjU4IDQuOTU4ODIgOC4zMTI1OEM0LjM5NTA0IDguMzEyNTggMy45Mzc5OSA3Ljc5MDI2IDMuOTM3OTkgNy4xNDU5MUMzLjkzNzk5IDYuNTAxNTYgNC4zOTUwNCA1Ljk3OTI1IDQuOTU4ODIgNS45NzkyNUM1LjUyMjYxIDUuOTc5MjUgNS45Nzk2NiA2LjUwMTU2IDUuOTc5NjYgNy4xNDU5MVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KPC9zdmc+Cg==');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOS4wNDIxMiAxMC4zNTQyTDkuNzk2NiAxMS4zODdDOS44Njc0MiAxMS40OTkyIDEwLjAwMzUgMTEuNTQ5MiAxMC4xMjc4IDExLjUwNDhDMTAuNTk2NiAxMS4zMzczIDExLjc1ODggMTAuODgzNCAxMi43MTU3IDEwLjE5MjRDMTIuNzkwMyAxMC4xMzg1IDEyLjgzMzQgMTAuMDQ4NiAxMi44MzI5IDkuOTU2MDFDMTIuODMyOSA0LjgxMjU4IDExLjM3NTUgMy4zNTQyNSAxMS4zNzU1IDMuMzU0MjVDMTEuMzc1NSAzLjM1NDI1IDEwLjIwODggMi42ODQ2NiA4Ljk1NjkgMi40ODI3NkM4LjgzMzc1IDIuNDYyODkgOC43MTMxMiAyLjUyODg4IDguNjU4MzUgMi42NDE5NEw4LjM5ODc2IDMuMTc3MzZDOC4zOTg3NiAzLjE3NzM2IDcuNzQ5NzUgMy4wNDE1NiA2Ljk5OTk5IDMuMDQxNTZDNi4yNTAyMyAzLjA0MTU2IDUuNjAxMjEgMy4xNzczNiA1LjYwMTIxIDMuMTc3MzZMNS4zNDE2MyAyLjY0MTk0QzUuMjg2ODIgMi41Mjg4OCA1LjE2NjI0IDIuNDYyODkgNS4wNDMwNyAyLjQ4Mjc2QzMuNzkyMTEgMi42ODQ1IDIuNjI1NDUgMy4zNTQyNSAyLjYyNTQ1IDMuMzU0MjVDMi42MjU0NSAzLjM1NDI1IDEuMTY3MTIgNC44MTI1OCAxLjE2NzEyIDkuOTU2MDFDMS4xNjY1NCAxMC4wNDg2IDEuMjA5NjIgMTAuMTM4NSAxLjI4NDI1IDEwLjE5MjRDMi4yNDExMyAxMC44ODM0IDMuNDAzMzMgMTEuMzM3MyAzLjg3MjE5IDExLjUwNDhDMy45OTY0MyAxMS41NDkyIDQuMTMyNTQgMTEuNDk5MiA0LjIwMzM4IDExLjM4N0w0Ljk1ODc4IDEwLjM1NDIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xMC4yMDg4IDkuNzcwNzVDMTAuMjA4OCA5Ljc3MDc1IDguODY5OTggMTAuNjQ1OCA3LjAwMDQ1IDEwLjY0NThDNS4xMzA5MSAxMC42NDU4IDMuNzkyMTEgOS43NzA3NSAzLjc5MjExIDkuNzcwNzUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xMC4wNjI5IDcuMTQ1OTFDMTAuMDYyOSA3Ljc5MDI2IDkuNjA1ODcgOC4zMTI1OCA5LjA0MjA3IDguMzEyNThDOC40NzgyOCA4LjMxMjU4IDguMDIxMjQgNy43OTAyNiA4LjAyMTI0IDcuMTQ1OTFDOC4wMjEyNCA2LjUwMTU2IDguNDc4MjggNS45NzkyNSA5LjA0MjA3IDUuOTc5MjVDOS42MDU4NyA1Ljk3OTI1IDEwLjA2MjkgNi41MDE1NiAxMC4wNjI5IDcuMTQ1OTFaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjI1Ii8+CiAgPHBhdGggZD0iTTUuOTc5NjYgNy4xNDU5MUM1Ljk3OTY2IDcuNzkwMjYgNS41MjI2MSA4LjMxMjU4IDQuOTU4ODIgOC4zMTI1OEM0LjM5NTA0IDguMzEyNTggMy45Mzc5OSA3Ljc5MDI2IDMuOTM3OTkgNy4xNDU5MUMzLjkzNzk5IDYuNTAxNTYgNC4zOTUwNCA1Ljk3OTI1IDQuOTU4ODIgNS45NzkyNUM1LjUyMjYxIDUuOTc5MjUgNS45Nzk2NiA2LjUwMTU2IDUuOTc5NjYgNy4xNDU5MVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KPC9zdmc+Cg==');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Windows icon - 16x16px (Boost section) */
.icon-windows {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNOS4zNDI0IDIuNjYzNTlMNS4zNDI0MSAzLjMyNjkxQzMuNzQ2MDggMy41OTE2MyAyLjk0NzkyIDMuNzIzOTggMi40NzM5NiA0LjI4MDY3QzIgNC44MzczNSAyIDUuNjQyNDUgMiA3LjI1MjY3VjguNzQ3MzNDMiAxMC4zNTc1IDIgMTEuMTYyNyAyLjQ3Mzk2IDExLjcxOTNDMi45NDc5MiAxMi4yNzYgMy43NDYwOSAxMi40MDg0IDUuMzQyNDEgMTIuNjczMUw5LjM0MjQgMTMuMzM2NEMxMS41MDQ1IDEzLjY5NDkgMTIuNTg1NSAxMy44NzQyIDEzLjI5MjcgMTMuMjc4MUMxNCAxMi42ODIgMTQgMTEuNTkxNSAxNCA5LjQxMDY3VjYuNTg5MzVDMTQgNC40MDg0NyAxNCAzLjMxODAzIDEzLjI5MjcgMi43MjE5MUMxMi41ODU1IDIuMTI1NzkgMTEuNTA0NSAyLjMwNTA1IDkuMzQyNCAyLjY2MzU5WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNNy4zMzMzMyAzVjEzTTIgOEgxNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4K');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNOS4zNDI0IDIuNjYzNTlMNS4zNDI0MSAzLjMyNjkxQzMuNzQ2MDggMy41OTE2MyAyLjk0NzkyIDMuNzIzOTggMi40NzM5NiA0LjI4MDY3QzIgNC44MzczNSAyIDUuNjQyNDUgMiA3LjI1MjY3VjguNzQ3MzNDMiAxMC4zNTc1IDIgMTEuMTYyNyAyLjQ3Mzk2IDExLjcxOTNDMi45NDc5MiAxMi4yNzYgMy43NDYwOSAxMi40MDg0IDUuMzQyNDEgMTIuNjczMUw5LjM0MjQgMTMuMzM2NEMxMS41MDQ1IDEzLjY5NDkgMTIuNTg1NSAxMy44NzQyIDEzLjI5MjcgMTMuMjc4MUMxNCAxMi42ODIgMTQgMTEuNTkxNSAxNCA5LjQxMDY3VjYuNTg5MzVDMTQgNC40MDg0NyAxNCAzLjMxODAzIDEzLjI5MjcgMi43MjE5MUMxMi41ODU1IDIuMTI1NzkgMTEuNTA0NSAyLjMwNTA1IDkuMzQyNCAyLjY2MzU5WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNNy4zMzMzMyAzVjEzTTIgOEgxNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4K');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Checkmark Badge icon - 16x16px (Boost section) */
.icon-checkmark-badge {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTIuNjYwMyAxMi42NjY3SDEyLjY2NjdNMTIuNjYwMyAxMi42NjY3QzEyLjI0NTIgMTMuMDc4MyAxMS40OTI5IDEyLjk3NTggMTAuOTY1MyAxMi45NzU4QzEwLjMxNzcgMTIuOTc1OCAxMC4wMDU4IDEzLjEwMjUgOS41NDM2IDEzLjU2NDdDOS4xNTAwNyAxMy45NTgzIDguNjIyNDcgMTQuNjY2NyA4IDE0LjY2NjdDNy4zNzc1MyAxNC42NjY3IDYuODQ5OTMgMTMuOTU4MyA2LjQ1NjM4IDEzLjU2NDdDNS45OTQxOSAxMy4xMDI1IDUuNjgyMzMgMTIuOTc1OCA1LjAzNDcxIDEyLjk3NThDNC41MDcxMiAxMi45NzU4IDMuNzU0NzkgMTMuMDc4MyAzLjMzOTY2IDEyLjY2NjdDMi45MjEyMSAxMi4yNTE3IDMuMDI0MTkgMTEuNDk2MyAzLjAyNDE5IDEwLjk2NTNDMy4wMjQxOSAxMC4yOTQzIDIuODc3NDQgOS45ODU3MyAyLjM5OTU5IDkuNTA3ODdDMS42ODg3NiA4Ljc5NzA3IDEuMzMzMzUgOC40NDE2IDEuMzMzMzMgOEMxLjMzMzM0IDcuNTU4MzMgMS42ODg3NSA3LjIwMjkzIDIuMzk5NTcgNi40OTIxMUMyLjgyNjEzIDYuMDY1NTUgMy4wMjQxOSA1LjY0Mjg1IDMuMDI0MTkgNS4wMzQ3MUMzLjAyNDE5IDQuNTA3MSAyLjkyMTY2IDMuNzU0NzYgMy4zMzMzMyAzLjMzOTYzQzMuNzQ4MjkgMi45MjExOSA0LjUwMzczIDMuMDI0MTcgNS4wMzQ3MiAzLjAyNDE3QzUuNjQyODUgMy4wMjQxNyA2LjA2NTU1IDIuODI2MTMgNi40OTIxIDIuMzk5NThDNy4yMDI5MyAxLjY4ODc1IDcuNTU4MzMgMS4zMzMzMyA4IDEuMzMzMzNDOC40NDE2NyAxLjMzMzMzIDguNzk3MDcgMS42ODg3NSA5LjUwNzg3IDIuMzk5NThDOS45MzQzMyAyLjgyNjA1IDEwLjM1NyAzLjAyNDE3IDEwLjk2NTMgMy4wMjQxN0MxMS40OTI5IDMuMDI0MTcgMTIuMjQ1MyAyLjkyMTY1IDEyLjY2MDQgMy4zMzMzM0MxMy4wNzg4IDMuNzQ4MjkgMTIuOTc1OCA0LjUwMzczIDEyLjk3NTggNS4wMzQ3MUMxMi45NzU4IDUuNzA1NzIgMTMuMTIyNiA2LjAxNDI1IDEzLjYwMDQgNi40OTIxMUMxNC4zMTEzIDcuMjAyOTMgMTQuNjY2NyA3LjU1ODMzIDE0LjY2NjcgOEMxNC42NjY3IDguNDQxNiAxNC4zMTEzIDguNzk3MDcgMTMuNjAwNCA5LjUwNzg3QzEzLjEyMjUgOS45ODU3MyAxMi45NzU4IDEwLjI5NDMgMTIuOTc1OCAxMC45NjUzQzEyLjk3NTggMTEuNDk2MyAxMy4wNzg4IDEyLjI1MTcgMTIuNjYwMyAxMi42NjY3WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZD0iTTYgOC41OTUyN0M2IDguNTk1MjcgNi44IDkuMDI5OCA3LjIgOS42NjY2N0M3LjIgOS42NjY2NyA4LjQgNy4xNjY2NyAxMCA2LjMzMzMzIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPgo=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTIuNjYwMyAxMi42NjY3SDEyLjY2NjdNMTIuNjYwMyAxMi42NjY3QzEyLjI0NTIgMTMuMDc4MyAxMS40OTI5IDEyLjk3NTggMTAuOTY1MyAxMi45NzU4QzEwLjMxNzcgMTIuOTc1OCAxMC4wMDU4IDEzLjEwMjUgOS41NDM2IDEzLjU2NDdDOS4xNTAwNyAxMy45NTgzIDguNjIyNDcgMTQuNjY2NyA4IDE0LjY2NjdDNy4zNzc1MyAxNC42NjY3IDYuODQ5OTMgMTMuOTU4MyA2LjQ1NjM4IDEzLjU2NDdDNS45OTQxOSAxMy4xMDI1IDUuNjgyMzMgMTIuOTc1OCA1LjAzNDcxIDEyLjk3NThDNC41MDcxMiAxMi45NzU4IDMuNzU0NzkgMTMuMDc4MyAzLjMzOTY2IDEyLjY2NjdDMi45MjEyMSAxMi4yNTE3IDMuMDI0MTkgMTEuNDk2MyAzLjAyNDE5IDEwLjk2NTNDMy4wMjQxOSAxMC4yOTQzIDIuODc3NDQgOS45ODU3MyAyLjM5OTU5IDkuNTA3ODdDMS42ODg3NiA4Ljc5NzA3IDEuMzMzMzUgOC40NDE2IDEuMzMzMzMgOEMxLjMzMzM0IDcuNTU4MzMgMS42ODg3NSA3LjIwMjkzIDIuMzk5NTcgNi40OTIxMUMyLjgyNjEzIDYuMDY1NTUgMy4wMjQxOSA1LjY0Mjg1IDMuMDI0MTkgNS4wMzQ3MUMzLjAyNDE5IDQuNTA3MSAyLjkyMTY2IDMuNzU0NzYgMy4zMzMzMyAzLjMzOTYzQzMuNzQ4MjkgMi45MjExOSA0LjUwMzczIDMuMDI0MTcgNS4wMzQ3MiAzLjAyNDE3QzUuNjQyODUgMy4wMjQxNyA2LjA2NTU1IDIuODI2MTMgNi40OTIxIDIuMzk5NThDNy4yMDI5MyAxLjY4ODc1IDcuNTU4MzMgMS4zMzMzMyA4IDEuMzMzMzNDOC40NDE2NyAxLjMzMzMzIDguNzk3MDcgMS42ODg3NSA5LjUwNzg3IDIuMzk5NThDOS45MzQzMyAyLjgyNjA1IDEwLjM1NyAzLjAyNDE3IDEwLjk2NTMgMy4wMjQxN0MxMS40OTI5IDMuMDI0MTcgMTIuMjQ1MyAyLjkyMTY1IDEyLjY2MDQgMy4zMzMzM0MxMy4wNzg4IDMuNzQ4MjkgMTIuOTc1OCA0LjUwMzczIDEyLjk3NTggNS4wMzQ3MUMxMi45NzU4IDUuNzA1NzIgMTMuMTIyNiA2LjAxNDI1IDEzLjYwMDQgNi40OTIxMUMxNC4zMTEzIDcuMjAyOTMgMTQuNjY2NyA3LjU1ODMzIDE0LjY2NjcgOEMxNC42NjY3IDguNDQxNiAxNC4zMTEzIDguNzk3MDcgMTMuNjAwNCA5LjUwNzg3QzEzLjEyMjUgOS45ODU3MyAxMi45NzU4IDEwLjI5NDMgMTIuOTc1OCAxMC45NjUzQzEyLjk3NTggMTEuNDk2MyAxMy4wNzg4IDEyLjI1MTcgMTIuNjYwMyAxMi42NjY3WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZD0iTTYgOC41OTUyN0M2IDguNTk1MjcgNi44IDkuMDI5OCA3LjIgOS42NjY2N0M3LjIgOS42NjY2NyA4LjQgNy4xNjY2NyAxMCA2LjMzMzMzIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPgo=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Aircraft/Game icon - 16x16px (Boost section) */
.icon-aircraft-game {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMy42MjU4NCAxMC44MjM1QzMuNjI1ODQgMTAuNjQ4NSAzLjYyMDMyIDEwLjQ4MTUgMy42MDk5NCAxMC4zMjIxTTMuNjA5OTQgMTAuMzIyMUMzLjUxNTYzIDguODczODcgMy4wMjAwNCA4LjA1NTkzIDIuNjE2MjcgNy42NDcwN0MxLjkxOTIzIDguMzUyOTMgMC4zMDkzNzggMTEuMTc2NSAyLjI3Nzc1IDEzLjI5NDFMNS40NTgyNyAxMS44ODIzQzUuNTIyMTUgMTIuMTM5NyA1LjU5ODk4IDEyLjM5NTEgNS42ODk3OCAxMi42NDc4QzUuODk3NDcgMTMuMjI1NyA2LjAwMTMxIDEzLjUxNDcgNi4zNDY0MSAxMy43NTczQzYuNjkxNTMgMTQgNy4wNzI2IDE0IDcuODM0OCAxNEg4LjE2NTJDOC45Mjc0IDE0IDkuMzA4NDcgMTQgOS42NTM2IDEzLjc1NzNDOS45OTg2NyAxMy41MTQ3IDEwLjEwMjUgMTMuMjI1NyAxMC4zMTAyIDEyLjY0NzhDMTAuNDAxIDEyLjM5NTEgMTAuNDc3OSAxMi4xMzk3IDEwLjU0MTcgMTEuODgyM0wxMy43MjIzIDEzLjI5NDFDMTUuNjkwNiAxMS4xNzY1IDE0LjA4MDggOC4zNTI5MyAxMy4zODM3IDcuNjQ3MDdDMTIuOTc5OSA4LjA1NTkzIDEyLjQ4NDMgOC44NzM4NyAxMi4zOTAxIDEwLjMyMjFNMy42MDk5NCAxMC4zMjIxTDQuMzQyMTEgMTAuMDQ1MkM0Ljc0Nzc5IDkuODkxNzMgNC45NTA2NCA5LjgxNSA1LjA2NjYxIDkuNjYxODdDNS4xODI1NyA5LjUwODczIDUuMjAzMTkgOS4yNzIyIDUuMjQ0NDEgOC43OTkyN0M1LjUwMzk5IDUuODIxMzMgNi45NTA0NyAzLjA4MDIzIDggMkM5LjA0OTUzIDMuMDgwMjMgMTAuNDk2IDUuODIxMzMgMTAuNzU1NiA4Ljc5OTI3QzEwLjc5NjggOS4yNzIyIDEwLjgxNzQgOS41MDg3MyAxMC45MzM0IDkuNjYxODdDMTEuMDQ5MyA5LjgxNSAxMS4yNTIyIDkuODkxNzMgMTEuNjU3OSAxMC4wNDUyTDEyLjM5MDEgMTAuMzIyMU0xMi4zOTAxIDEwLjMyMjFDMTIuMzc5NyAxMC40ODE1IDEyLjM3NDEgMTAuNjQ4NSAxMi4zNzQxIDEwLjgyMzUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTggNi42NjY2N1Y3LjMzMzMzIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xMy4zMzMzIDUuMzMzMzNWNC42NjY2N00xMy4zMzMzIDIuNjY2NjdWMiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMi42NjY2NyA1LjMzMzMzVjQuNjY2NjdNMi42NjY2NyAyLjY2NjY3VjIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+Cg==');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMy42MjU4NCAxMC44MjM1QzMuNjI1ODQgMTAuNjQ4NSAzLjYyMDMyIDEwLjQ4MTUgMy42MDk5NCAxMC4zMjIxTTMuNjA5OTQgMTAuMzIyMUMzLjUxNTYzIDguODczODcgMy4wMjAwNCA4LjA1NTkzIDIuNjE2MjcgNy42NDcwN0MxLjkxOTIzIDguMzUyOTMgMC4zMDkzNzggMTEuMTc2NSAyLjI3Nzc1IDEzLjI5NDFMNS40NTgyNyAxMS44ODIzQzUuNTIyMTUgMTIuMTM5NyA1LjU5ODk4IDEyLjM5NTEgNS42ODk3OCAxMi42NDc4QzUuODk3NDcgMTMuMjI1NyA2LjAwMTMxIDEzLjUxNDcgNi4zNDY0MSAxMy43NTczQzYuNjkxNTMgMTQgNy4wNzI2IDE0IDcuODM0OCAxNEg4LjE2NTJDOC45Mjc0IDE0IDkuMzA4NDcgMTQgOS42NTM2IDEzLjc1NzNDOS45OTg2NyAxMy41MTQ3IDEwLjEwMjUgMTMuMjI1NyAxMC4zMTAyIDEyLjY0NzhDMTAuNDAxIDEyLjM5NTEgMTAuNDc3OSAxMi4xMzk3IDEwLjU0MTcgMTEuODgyM0wxMy43MjIzIDEzLjI5NDFDMTUuNjkwNiAxMS4xNzY1IDE0LjA4MDggOC4zNTI5MyAxMy4zODM3IDcuNjQ3MDdDMTIuOTc5OSA4LjA1NTkzIDEyLjQ4NDMgOC44NzM4NyAxMi4zOTAxIDEwLjMyMjFNMy42MDk5NCAxMC4zMjIxTDQuMzQyMTEgMTAuMDQ1MkM0Ljc0Nzc5IDkuODkxNzMgNC45NTA2NCA5LjgxNSA1LjA2NjYxIDkuNjYxODdDNS4xODI1NyA5LjUwODczIDUuMjAzMTkgOS4yNzIyIDUuMjQ0NDEgOC43OTkyN0M1LjUwMzk5IDUuODIxMzMgNi45NTA0NyAzLjA4MDIzIDggMkM5LjA0OTUzIDMuMDgwMjMgMTAuNDk2IDUuODIxMzMgMTAuNzU1NiA4Ljc5OTI3QzEwLjc5NjggOS4yNzIyIDEwLjgxNzQgOS41MDg3MyAxMC45MzM0IDkuNjYxODdDMTEuMDQ5MyA5LjgxNSAxMS4yNTIyIDkuODkxNzMgMTEuNjU3OSAxMC4wNDUyTDEyLjM5MDEgMTAuMzIyMU0xMi4zOTAxIDEwLjMyMjFDMTIuMzc5NyAxMC40ODE1IDEyLjM3NDEgMTAuNjQ4NSAxMi4zNzQxIDEwLjgyMzUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTggNi42NjY2N1Y3LjMzMzMzIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xMy4zMzMzIDUuMzMzMzNWNC42NjY2N00xMy4zMzMzIDIuNjY2NjdWMiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMi42NjY2NyA1LjMzMzMzVjQuNjY2NjdNMi42NjY2NyAyLjY2NjY3VjIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+Cg==');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Discord icon - Filled version (for OAuth buttons, prominent CTAs) */
.icon-discord-filled {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOSIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE5IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTYuMDg0MyAxLjE2MDUyQzE0Ljg3MzMgMC42MjMzNjggMTMuNTc0NyAwLjIyNzYxNSAxMi4yMTY5IDAuMDAwOTUwODI2QzEyLjE5MjIgLTAuMDAzNDIzNzIgMTIuMTY3NSAwLjAwNzUwODUxIDEyLjE1NDggMC4wMjkzNzM1QzExLjk4NzcgMC4zMTY1MjkgMTEuODAyNyAwLjY5MTE0NiAxMS42NzMyIDAuOTg1NTkzQzEwLjIxMjggMC43NzQyMzkgOC43NTk5NCAwLjc3NDIzOSA3LjMyOTUgMC45ODU1OTNDNy4xOTk5MyAwLjY4NDYwMSA3LjAwODIyIDAuMzE2NTI5IDYuODQwNDYgMC4wMjkzNzM1QzYuODI3NzIgMC4wMDgyMzgwMyA2LjgwMzAyIC0wLjAwMjY5NDIgNi43NzgyOSAwLjAwMDk1MDgyNkM1LjQyMTI2IDAuMjI2ODkxIDQuMTIyNjUgMC42MjI2NDMgMi45MTA5MSAxLjE2MDUyQzIuOTAwNDIgMS4xNjQ5IDIuODkxNDMgMS4xNzIxOSAyLjg4NTQ2IDEuMTgxNjZDMC40MjIyNjggNC43MzkwOSAtMC4yNTI1MDIgOC4yMDkwOCAwLjA3ODUxNzYgMTEuNjM2QzAuMDgwMDE1NCAxMS42NTI4IDAuMDg5NzUxMSAxMS42Njg4IDAuMTAzMjMyIDExLjY3OUMxLjcyODM3IDEyLjgzMjggMy4zMDI2IDEzLjUzMzIgNC44NDc2IDEzLjk5NzRDNC44NzIzMiAxNC4wMDQ3IDQuODk4NTIgMTMuOTk2IDQuOTE0MjYgMTMuOTc2M0M1LjI3OTczIDEzLjQ5MzggNS42MDU1MSAxMi45ODUxIDUuODg0ODQgMTIuNDUwMUM1LjkwMTMyIDEyLjQxODggNS44ODU1OCAxMi4zODE2IDUuODUxODkgMTIuMzY5MkM1LjMzNTE1IDEyLjE3OTcgNC44NDMxIDExLjk0ODcgNC4zNjk3OSAxMS42ODYzQzQuMzMyMzUgMTEuNjY1MiA0LjMyOTM1IDExLjYxMzQgNC4zNjM3OSAxMS41ODg3QzQuNDYzMzkgMTEuNTE2NSA0LjU2MzAyIDExLjQ0MTQgNC42NTgxMyAxMS4zNjU2QzQuNjc1MzQgMTEuMzUxOCA0LjY5OTMyIDExLjM0ODkgNC43MTk1NSAxMS4zNTc2QzcuODI5MDIgMTIuNzMgMTEuMTk1NCAxMi43MyAxNC4yNjgyIDExLjM1NzZDMTQuMjg4NCAxMS4zNDgxIDE0LjMxMjQgMTEuMzUxMSAxNC4zMzAzIDExLjM2NDlDMTQuNDI1NSAxMS40NDA3IDE0LjUyNTEgMTEuNTE2NSAxNC42MjU0IDExLjU4ODdDMTQuNjU5OSAxMS42MTM0IDE0LjY1NzYgMTEuNjY1MiAxNC42MjAyIDExLjY4NjNDMTQuMTQ2OSAxMS45NTM4IDEzLjY1NDggMTIuMTc5NyAxMy4xMzczIDEyLjM2ODVDMTMuMTAzNiAxMi4zODA5IDEzLjA4ODYgMTIuNDE4OCAxMy4xMDUxIDEyLjQ1MDFDMTMuMzkwNSAxMi45ODQ0IDEzLjcxNjIgMTMuNDkzMSAxNC4wNzUgMTMuOTc1NkMxNC4wODk5IDEzLjk5NiAxNC4xMTY5IDE0LjAwNDcgMTQuMTQxNiAxMy45OTc0QzE1LjY5NDEgMTMuNTMzMiAxNy4yNjgzIDEyLjgzMjggMTguODkzNSAxMS42NzlDMTguOTA3NyAxMS42Njg4IDE4LjkxNjcgMTEuNjUzNSAxOC45MTgyIDExLjYzNjhDMTkuMzE0NCA3LjY3NDgyIDE4LjI1NDYgNC4yMzMyOSAxNi4xMDkgMS4xODIzOEMxNi4xMDM4IDEuMTcyMTkgMTYuMDk0OCAxLjE2NDkgMTYuMDg0MyAxLjE2MDUyWk02LjM0OTE4IDkuNTQ5MzhDNS40MTMwMiA5LjU0OTM4IDQuNjQxNjUgOC43MTg1MyA0LjY0MTY1IDcuNjk4MTVDNC42NDE2NSA2LjY3Nzc4IDUuMzk4MDYgNS44NDY5MyA2LjM0OTE4IDUuODQ2OTNDNy4zMDc3NyA1Ljg0NjkzIDguMDcxNjggNi42ODUwNyA4LjA1NjcgNy42OTgxNUM4LjA1NjcgOC43MTg1MyA3LjMwMDI4IDkuNTQ5MzggNi4zNDkxOCA5LjU0OTM4Wk0xMi42NjI1IDkuNTQ5MzhDMTEuNzI2NCA5LjU0OTM4IDEwLjk1NSA4LjcxODUzIDEwLjk1NSA3LjY5ODE1QzEwLjk1NSA2LjY3Nzc4IDExLjcxMTQgNS44NDY5MyAxMi42NjI1IDUuODQ2OTNDMTMuNjIxMSA1Ljg0NjkzIDE0LjM4NSA2LjY4NTA3IDE0LjM3IDcuNjk4MTVDMTQuMzcgOC43MTg1MyAxMy42MjExIDkuNTQ5MzggMTIuNjYyNSA5LjU0OTM4WiIgZmlsbD0iIzU4NjVGMiIvPgo8L3N2Zz4K');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOSIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE5IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTYuMDg0MyAxLjE2MDUyQzE0Ljg3MzMgMC42MjMzNjggMTMuNTc0NyAwLjIyNzYxNSAxMi4yMTY5IDAuMDAwOTUwODI2QzEyLjE5MjIgLTAuMDAzNDIzNzIgMTIuMTY3NSAwLjAwNzUwODUxIDEyLjE1NDggMC4wMjkzNzM1QzExLjk4NzcgMC4zMTY1MjkgMTEuODAyNyAwLjY5MTE0NiAxMS42NzMyIDAuOTg1NTkzQzEwLjIxMjggMC43NzQyMzkgOC43NTk5NCAwLjc3NDIzOSA3LjMyOTUgMC45ODU1OTNDNy4xOTk5MyAwLjY4NDYwMSA3LjAwODIyIDAuMzE2NTI5IDYuODQwNDYgMC4wMjkzNzM1QzYuODI3NzIgMC4wMDgyMzgwMyA2LjgwMzAyIC0wLjAwMjY5NDIgNi43NzgyOSAwLjAwMDk1MDgyNkM1LjQyMTI2IDAuMjI2ODkxIDQuMTIyNjUgMC42MjI2NDMgMi45MTA5MSAxLjE2MDUyQzIuOTAwNDIgMS4xNjQ5IDIuODkxNDMgMS4xNzIxOSAyLjg4NTQ2IDEuMTgxNjZDMC40MjIyNjggNC43MzkwOSAtMC4yNTI1MDIgOC4yMDkwOCAwLjA3ODUxNzYgMTEuNjM2QzAuMDgwMDE1NCAxMS42NTI4IDAuMDg5NzUxMSAxMS42Njg4IDAuMTAzMjMyIDExLjY3OUMxLjcyODM3IDEyLjgzMjggMy4zMDI2IDEzLjUzMzIgNC44NDc2IDEzLjk5NzRDNC44NzIzMiAxNC4wMDQ3IDQuODk4NTIgMTMuOTk2IDQuOTE0MjYgMTMuOTc2M0M1LjI3OTczIDEzLjQ5MzggNS42MDU1MSAxMi45ODUxIDUuODg0ODQgMTIuNDUwMUM1LjkwMTMyIDEyLjQxODggNS44ODU1OCAxMi4zODE2IDUuODUxODkgMTIuMzY5MkM1LjMzNTE1IDEyLjE3OTcgNC44NDMxIDExLjk0ODcgNC4zNjk3OSAxMS42ODYzQzQuMzMyMzUgMTEuNjY1MiA0LjMyOTM1IDExLjYxMzQgNC4zNjM3OSAxMS41ODg3QzQuNDYzMzkgMTEuNTE2NSA0LjU2MzAyIDExLjQ0MTQgNC42NTgxMyAxMS4zNjU2QzQuNjc1MzQgMTEuMzUxOCA0LjY5OTMyIDExLjM0ODkgNC43MTk1NSAxMS4zNTc2QzcuODI5MDIgMTIuNzMgMTEuMTk1NCAxMi43MyAxNC4yNjgyIDExLjM1NzZDMTQuMjg4NCAxMS4zNDgxIDE0LjMxMjQgMTEuMzUxMSAxNC4zMzAzIDExLjM2NDlDMTQuNDI1NSAxMS40NDA3IDE0LjUyNTEgMTEuNTE2NSAxNC42MjU0IDExLjU4ODdDMTQuNjU5OSAxMS42MTM0IDE0LjY1NzYgMTEuNjY1MiAxNC42MjAyIDExLjY4NjNDMTQuMTQ2OSAxMS45NTM4IDEzLjY1NDggMTIuMTc5NyAxMy4xMzczIDEyLjM2ODVDMTMuMTAzNiAxMi4zODA5IDEzLjA4ODYgMTIuNDE4OCAxMy4xMDUxIDEyLjQ1MDFDMTMuMzkwNSAxMi45ODQ0IDEzLjcxNjIgMTMuNDkzMSAxNC4wNzUgMTMuOTc1NkMxNC4wODk5IDEzLjk5NiAxNC4xMTY5IDE0LjAwNDcgMTQuMTQxNiAxMy45OTc0QzE1LjY5NDEgMTMuNTMzMiAxNy4yNjgzIDEyLjgzMjggMTguODkzNSAxMS42NzlDMTguOTA3NyAxMS42Njg4IDE4LjkxNjcgMTEuNjUzNSAxOC45MTgyIDExLjYzNjhDMTkuMzE0NCA3LjY3NDgyIDE4LjI1NDYgNC4yMzMyOSAxNi4xMDkgMS4xODIzOEMxNi4xMDM4IDEuMTcyMTkgMTYuMDk0OCAxLjE2NDkgMTYuMDg0MyAxLjE2MDUyWk02LjM0OTE4IDkuNTQ5MzhDNS40MTMwMiA5LjU0OTM4IDQuNjQxNjUgOC43MTg1MyA0LjY0MTY1IDcuNjk4MTVDNC42NDE2NSA2LjY3Nzc4IDUuMzk4MDYgNS44NDY5MyA2LjM0OTE4IDUuODQ2OTNDNy4zMDc3NyA1Ljg0NjkzIDguMDcxNjggNi42ODUwNyA4LjA1NjcgNy42OTgxNUM4LjA1NjcgOC43MTg1MyA3LjMwMDI4IDkuNTQ5MzggNi4zNDkxOCA5LjU0OTM4Wk0xMi42NjI1IDkuNTQ5MzhDMTEuNzI2NCA5LjU0OTM4IDEwLjk1NSA4LjcxODUzIDEwLjk1NSA3LjY5ODE1QzEwLjk1NSA2LjY3Nzc4IDExLjcxMTQgNS44NDY5MyAxMi42NjI1IDUuODQ2OTNDMTMuNjIxMSA1Ljg0NjkzIDE0LjM4NSA2LjY4NTA3IDE0LjM3IDcuNjk4MTVDMTQuMzcgOC43MTg1MyAxMy42MjExIDkuNTQ5MzggMTIuNjYyNSA5LjU0OTM4WiIgZmlsbD0iIzU4NjVGMiIvPgo8L3N2Zz4K');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Info circle icon - Information indicators, help icons */
.icon-info-circle {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNi45OTkzNSAxMi44MzM0QzEwLjIyMSAxMi44MzM0IDEyLjgzMjcgMTAuMjIxNyAxMi44MzI3IDcuMDAwMDJDMTIuODMyNyAzLjc3ODM2IDEwLjIyMSAxLjE2NjY5IDYuOTk5MzUgMS4xNjY2OUMzLjc3NzY5IDEuMTY2NjkgMS4xNjYwMiAzLjc3ODM2IDEuMTY2MDIgNy4wMDAwMkMxLjE2NjAyIDEwLjIyMTcgMy43Nzc2OSAxMi44MzM0IDYuOTk5MzUgMTIuODMzNFoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTcgOS4zMzMzMVY2LjcwODMxIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik03IDQuNjczNVY0LjY2NzY2IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPgo=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNi45OTkzNSAxMi44MzM0QzEwLjIyMSAxMi44MzM0IDEyLjgzMjcgMTAuMjIxNyAxMi44MzI3IDcuMDAwMDJDMTIuODMyNyAzLjc3ODM2IDEwLjIyMSAxLjE2NjY5IDYuOTk5MzUgMS4xNjY2OUMzLjc3NzY5IDEuMTY2NjkgMS4xNjYwMiAzLjc3ODM2IDEuMTY2MDIgNy4wMDAwMkMxLjE2NjAyIDEwLjIyMTcgMy43Nzc2OSAxMi44MzM0IDYuOTk5MzUgMTIuODMzNFoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTcgOS4zMzMzMVY2LjcwODMxIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik03IDQuNjczNVY0LjY2NzY2IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPgo=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Email icon - Auth forms, sign in links */
.icon-email {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE5IDE4IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMiA0LjVMNy4xODQ3NyA3LjQzNzczQzkuMDk2MiA4LjUyMDc1IDkuOTAzOCA4LjUyMDc1IDExLjgxNTIgNy40Mzc3M0wxNyA0LjUiIHN0cm9rZT0iIzBEMEQxMyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMi4wMTE4MyAxMC4xMDY3QzIuMDYwODYgMTIuNDA1OSAyLjA4NTM3IDEzLjU1NTQgMi45MzM3MiAxNC40MDcxQzMuNzgyMDYgMTUuMjU4NiA0Ljk2Mjc1IDE1LjI4ODIgNy4zMjQxMiAxNS4zNDc2QzguNzc5NDggMTUuMzg0MiAxMC4yMjA1IDE1LjM4NDIgMTEuNjc1OSAxNS4zNDc2QzE0LjAzNzMgMTUuMjg4MiAxNS4yMTc5IDE1LjI1ODYgMTYuMDY2MyAxNC40MDcxQzE2LjkxNDcgMTMuNTU1NCAxNi45MzkyIDEyLjQwNTkgMTYuOTg4MSAxMC4xMDY3QzE3LjAwNCA5LjM2NzQzIDE3LjAwNCA4LjYzMjU4IDE2Ljk4ODEgNy44OTMzQzE2LjkzOTIgNS41OTQxNSAxNi45MTQ3IDQuNDQ0NTcgMTYuMDY2MyAzLjU5M0MxNS4yMTc5IDIuNzQxNDIgMTQuMDM3MyAyLjcxMTc2IDExLjY3NTkgMi42NTI0M0MxMC4yMjA1IDIuNjE1ODYgOC43Nzk0NyAyLjYxNTg2IDcuMzI0MTEgMi42NTI0MkM0Ljk2Mjc1IDIuNzExNzUgMy43ODIwNiAyLjc0MTQxIDIuOTMzNzEgMy41OTI5OUMyLjA4NTM3IDQuNDQ0NTYgMi4wNjA4NSA1LjU5NDE0IDIuMDExODIgNy44OTMzQzEuOTk2MDUgOC42MzI1OCAxLjk5NjA2IDkuMzY3NDMgMi4wMTE4MyAxMC4xMDY3WiIgc3Ryb2tlPSIjMEQwRDEzIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE5IDE4IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMiA0LjVMNy4xODQ3NyA3LjQzNzczQzkuMDk2MiA4LjUyMDc1IDkuOTAzOCA4LjUyMDc1IDExLjgxNTIgNy40Mzc3M0wxNyA0LjUiIHN0cm9rZT0iIzBEMEQxMyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMi4wMTE4MyAxMC4xMDY3QzIuMDYwODYgMTIuNDA1OSAyLjA4NTM3IDEzLjU1NTQgMi45MzM3MiAxNC40MDcxQzMuNzgyMDYgMTUuMjU4NiA0Ljk2Mjc1IDE1LjI4ODIgNy4zMjQxMiAxNS4zNDc2QzguNzc5NDggMTUuMzg0MiAxMC4yMjA1IDE1LjM4NDIgMTEuNjc1OSAxNS4zNDc2QzE0LjAzNzMgMTUuMjg4MiAxNS4yMTc5IDE1LjI1ODYgMTYuMDY2MyAxNC40MDcxQzE2LjkxNDcgMTMuNTU1NCAxNi45MzkyIDEyLjQwNTkgMTYuOTg4MSAxMC4xMDY3QzE3LjAwNCA5LjM2NzQzIDE3LjAwNCA4LjYzMjU4IDE2Ljk4ODEgNy44OTMzQzE2LjkzOTIgNS41OTQxNSAxNi45MTQ3IDQuNDQ0NTcgMTYuMDY2MyAzLjU5M0MxNS4yMTc5IDIuNzQxNDIgMTQuMDM3MyAyLjcxMTc2IDExLjY3NTkgMi42NTI0M0MxMC4yMjA1IDIuNjE1ODYgOC43Nzk0NyAyLjYxNTg2IDcuMzI0MTEgMi42NTI0MkM0Ljk2Mjc1IDIuNzExNzUgMy43ODIwNiAyLjc0MTQxIDIuOTMzNzEgMy41OTI5OUMyLjA4NTM3IDQuNDQ0NTYgMi4wNjA4NSA1LjU5NDE0IDIuMDExODIgNy44OTMzQzEuOTk2MDUgOC42MzI1OCAxLjk5NjA2IDkuMzY3NDMgMi4wMTE4MyAxMC4xMDY3WiIgc3Ryb2tlPSIjMEQwRDEzIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* YouTube icon - Social media link */
.icon-youtube {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTAuMDAxMyAxNy4wODM0QzExLjUwOTQgMTcuMDgzNCAxMi45NTU2IDE2LjkzNDQgMTQuMjk1OCAxNi42NjEyQzE1Ljk2OTkgMTYuMzIgMTYuODA3IDE2LjE0OTMgMTcuNTcwOCAxNS4xNjcyQzE4LjMzNDYgMTQuMTg1MiAxOC4zMzQ2IDEzLjA1NzggMTguMzM0NiAxMC44MDNWOS4xOTcxNkMxOC4zMzQ2IDYuOTQyMzYgMTguMzM0NiA1LjgxNDk3IDE3LjU3MDggNC44MzI4OUMxNi44MDcgMy44NTA4MSAxNS45Njk5IDMuNjgwMTkgMTQuMjk1OCAzLjMzODkzQzEyLjk1NTYgMy4wNjU3MiAxMS41MDk0IDIuOTE2NzUgMTAuMDAxMyAyLjkxNjc1QzguNDkzMjIgMi45MTY3NSA3LjA0NzA0IDMuMDY1NzIgNS43MDY3NyAzLjMzODkzQzQuMDMyNjkgMy42ODAxOSAzLjE5NTY0IDMuODUwODEgMi40MzE4IDQuODMyODlDMS42Njc5NyA1LjgxNDk3IDEuNjY3OTcgNi45NDIzNiAxLjY2Nzk3IDkuMTk3MTZWMTAuODAzQzEuNjY3OTcgMTMuMDU3OCAxLjY2Nzk3IDE0LjE4NTIgMi40MzE4IDE1LjE2NzJDMy4xOTU2NCAxNi4xNDkzIDQuMDMyNjkgMTYuMzIgNS43MDY3NyAxNi42NjEyQzcuMDQ3MDQgMTYuOTM0NCA4LjQ5MzIyIDE3LjA4MzQgMTAuMDAxMyAxNy4wODM0WiIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KICA8cGF0aCBkPSJNMTMuMzAxNyAxMC4yNjA3QzEzLjE3ODEgMTAuNzY1NSAxMi41MjAxIDExLjEyODEgMTEuMjA0MSAxMS44NTMzQzkuNzcyNjcgMTIuNjQyIDkuMDU3IDEzLjAzNjQgOC40NzczMyAxMi44ODQ1QzguMjgxIDEyLjgzMyA4LjEwMDE3IDEyLjc0MjUgNy45NDgzMiAxMi42MTk4QzcuNSAxMi4yNTczIDcuNSAxMS41MDQ4IDcuNSA5Ljk5OTkyQzcuNSA4LjQ5NSA3LjUgNy43NDI1MiA3Ljk0ODMyIDcuMzgwMDdDOC4xMDAxNyA3LjI1NzMgOC4yODEgNy4xNjY4MyA4LjQ3NzMzIDcuMTE1MzdDOS4wNTcgNi45NjM0MyA5Ljc3MjY3IDcuMzU3NzkgMTEuMjA0MSA4LjE0NjUzQzEyLjUyMDEgOC44NzE3NSAxMy4xNzgxIDkuMjM0MzMgMTMuMzAxNyA5LjczOTE3QzEzLjM0MzggOS45MTEgMTMuMzQzOCAxMC4wODg4IDEzLjMwMTcgMTAuMjYwN1oiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTAuMDAxMyAxNy4wODM0QzExLjUwOTQgMTcuMDgzNCAxMi45NTU2IDE2LjkzNDQgMTQuMjk1OCAxNi42NjEyQzE1Ljk2OTkgMTYuMzIgMTYuODA3IDE2LjE0OTMgMTcuNTcwOCAxNS4xNjcyQzE4LjMzNDYgMTQuMTg1MiAxOC4zMzQ2IDEzLjA1NzggMTguMzM0NiAxMC44MDNWOS4xOTcxNkMxOC4zMzQ2IDYuOTQyMzYgMTguMzM0NiA1LjgxNDk3IDE3LjU3MDggNC44MzI4OUMxNi44MDcgMy44NTA4MSAxNS45Njk5IDMuNjgwMTkgMTQuMjk1OCAzLjMzODkzQzEyLjk1NTYgMy4wNjU3MiAxMS41MDk0IDIuOTE2NzUgMTAuMDAxMyAyLjkxNjc1QzguNDkzMjIgMi45MTY3NSA3LjA0NzA0IDMuMDY1NzIgNS43MDY3NyAzLjMzODkzQzQuMDMyNjkgMy42ODAxOSAzLjE5NTY0IDMuODUwODEgMi40MzE4IDQuODMyODlDMS42Njc5NyA1LjgxNDk3IDEuNjY3OTcgNi45NDIzNiAxLjY2Nzk3IDkuMTk3MTZWMTAuODAzQzEuNjY3OTcgMTMuMDU3OCAxLjY2Nzk3IDE0LjE4NTIgMi40MzE4IDE1LjE2NzJDMy4xOTU2NCAxNi4xNDkzIDQuMDMyNjkgMTYuMzIgNS43MDY3NyAxNi42NjEyQzcuMDQ3MDQgMTYuOTM0NCA4LjQ5MzIyIDE3LjA4MzQgMTAuMDAxMyAxNy4wODM0WiIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KICA8cGF0aCBkPSJNMTMuMzAxNyAxMC4yNjA3QzEzLjE3ODEgMTAuNzY1NSAxMi41MjAxIDExLjEyODEgMTEuMjA0MSAxMS44NTMzQzkuNzcyNjcgMTIuNjQyIDkuMDU3IDEzLjAzNjQgOC40NzczMyAxMi44ODQ1QzguMjgxIDEyLjgzMyA4LjEwMDE3IDEyLjc0MjUgNy45NDgzMiAxMi42MTk4QzcuNSAxMi4yNTczIDcuNSAxMS41MDQ4IDcuNSA5Ljk5OTkyQzcuNSA4LjQ5NSA3LjUgNy43NDI1MiA3Ljk0ODMyIDcuMzgwMDdDOC4xMDAxNyA3LjI1NzMgOC4yODEgNy4xNjY4MyA4LjQ3NzMzIDcuMTE1MzdDOS4wNTcgNi45NjM0MyA5Ljc3MjY3IDcuMzU3NzkgMTEuMjA0MSA4LjE0NjUzQzEyLjUyMDEgOC44NzE3NSAxMy4xNzgxIDkuMjM0MzMgMTMuMzAxNyA5LjczOTE3QzEzLjM0MzggOS45MTEgMTMuMzQzOCAxMC4wODg4IDEzLjMwMTcgMTAuMjYwN1oiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* X/Twitter icon - Social media link */
.icon-x {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMi41IDE3LjVMOC43OTAzMyAxMS4yMDk3TTguNzkwMzMgMTEuMjA5N0wyLjUgMi41SDYuNjY2NjdMMTEuMjA5NyA4Ljc5MDMzTTguNzkwMzMgMTEuMjA5N0wxMy4zMzMzIDE3LjVIMTcuNUwxMS4yMDk3IDguNzkwMzNNMTcuNSAyLjVMMTEuMjA5NyA4Ljc5MDMzIiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMi41IDE3LjVMOC43OTAzMyAxMS4yMDk3TTguNzkwMzMgMTEuMjA5N0wyLjUgMi41SDYuNjY2NjdMMTEuMjA5NyA4Ljc5MDMzTTguNzkwMzMgMTEuMjA5N0wxMy4zMzMzIDE3LjVIMTcuNUwxMS4yMDk3IDguNzkwMzNNMTcuNSAyLjVMMTEuMjA5NyA4Ljc5MDMzIiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* TikTok icon - Social media link */
.icon-tiktok {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMi4wODIwMyA5Ljk5OTkyQzIuMDgyMDMgNi4yNjc5NyAyLjA4MjAzIDQuNDAxOTkgMy4yNDE0IDMuMjQyNjJDNC40MDA3NyAyLjA4MzI1IDYuMjY2NzUgMi4wODMyNSA5Ljk5ODcgMi4wODMyNUMxMy43MzA2IDIuMDgzMjUgMTUuNTk2NiAyLjA4MzI1IDE2Ljc1NiAzLjI0MjYyQzE3LjkxNTQgNC40MDE5OSAxNy45MTU0IDYuMjY3OTcgMTcuOTE1NCA5Ljk5OTkyQzE3LjkxNTQgMTMuNzMxOCAxNy45MTU0IDE1LjU5NzggMTYuNzU2IDE2Ljc1NzNDMTUuNTk2NiAxNy45MTY2IDEzLjczMDYgMTcuOTE2NiA5Ljk5ODcgMTcuOTE2NkM2LjI2Njc1IDE3LjkxNjYgNC40MDA3NyAxNy45MTY2IDMuMjQxNCAxNi43NTczQzIuMDgyMDMgMTUuNTk3OCAyLjA4MjAzIDEzLjczMTggMi4wODIwMyA5Ljk5OTkyWiIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNOC43ODA1NyA5LjE3Mjk5QzguMDk3MTkgOS4wNzY0MSA2LjUzOTUzIDkuMjM2MjQgNS43NzU3NCAxMC42NDg2QzUuMDExOTQgMTIuMDYwOCA1Ljc4MTczIDEzLjUzMDcgNi4yNjIxIDE0LjA4OTJDNi43MzY0NyAxNC42MTE2IDguMjQ0MiAxNS42MDA5IDkuODQzNDggMTQuNjM1QzEwLjIzOTkgMTQuMzk1NiAxMC43MzM3IDE0LjIxNyAxMS4yOTQgMTIuMzQ2MkwxMS4yMjg4IDQuOTg0NjJDMTEuMTIwNyA1Ljc5NTI0IDEyLjAxNjIgNy42OTY1NCAxNC41NjU3IDcuOTIxNDkiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMi4wODIwMyA5Ljk5OTkyQzIuMDgyMDMgNi4yNjc5NyAyLjA4MjAzIDQuNDAxOTkgMy4yNDE0IDMuMjQyNjJDNC40MDA3NyAyLjA4MzI1IDYuMjY2NzUgMi4wODMyNSA5Ljk5ODcgMi4wODMyNUMxMy43MzA2IDIuMDgzMjUgMTUuNTk2NiAyLjA4MzI1IDE2Ljc1NiAzLjI0MjYyQzE3LjkxNTQgNC40MDE5OSAxNy45MTU0IDYuMjY3OTcgMTcuOTE1NCA5Ljk5OTkyQzE3LjkxNTQgMTMuNzMxOCAxNy45MTU0IDE1LjU5NzggMTYuNzU2IDE2Ljc1NzNDMTUuNTk2NiAxNy45MTY2IDEzLjczMDYgMTcuOTE2NiA5Ljk5ODcgMTcuOTE2NkM2LjI2Njc1IDE3LjkxNjYgNC40MDA3NyAxNy45MTY2IDMuMjQxNCAxNi43NTczQzIuMDgyMDMgMTUuNTk3OCAyLjA4MjAzIDEzLjczMTggMi4wODIwMyA5Ljk5OTkyWiIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNOC43ODA1NyA5LjE3Mjk5QzguMDk3MTkgOS4wNzY0MSA2LjUzOTUzIDkuMjM2MjQgNS43NzU3NCAxMC42NDg2QzUuMDExOTQgMTIuMDYwOCA1Ljc4MTczIDEzLjUzMDcgNi4yNjIxIDE0LjA4OTJDNi43MzY0NyAxNC42MTE2IDguMjQ0MiAxNS42MDA5IDkuODQzNDggMTQuNjM1QzEwLjIzOTkgMTQuMzk1NiAxMC43MzM3IDE0LjIxNyAxMS4yOTQgMTIuMzQ2MkwxMS4yMjg4IDQuOTg0NjJDMTEuMTIwNyA1Ljc5NTI0IDEyLjAxNjIgNy42OTY1NCAxNC41NjU3IDcuOTIxNDkiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Devices icon - For device counter, subscription management */
.icon-devices {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOS4zMzIwMyAxNEgxMC42NjU0TTkuMzMyMDMgMTRDOC43Nzk3NiAxNCA4LjMzMjAzIDEzLjU1MjMgOC4zMzIwMyAxM1YxMS4zMzM0SDcuOTk4N005LjMzMjAzIDE0SDYuNjY1MzZNNy45OTg3IDExLjMzMzRINy42NjUzNlYxM0M3LjY2NTM2IDEzLjU1MjMgNy4yMTc2MyAxNCA2LjY2NTM2IDE0TTcuOTk4NyAxMS4zMzM0VjE0TTYuNjY1MzYgMTRINS4zMzIwMyIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTEwLjY2NTQgMkg1LjMzMjAzQzMuNDQ2NDEgMiAyLjUwMzYgMiAxLjkxNzgyIDIuNTg1NzlDMS4zMzIwMyAzLjE3MTU3IDEuMzMyMDMgNC4xMTQzOCAxLjMzMjAzIDZWNy4zMzMzM0MxLjMzMjAzIDkuMjE4OTMgMS4zMzIwMyAxMC4xNjE3IDEuOTE3ODIgMTAuNzQ3NUMyLjUwMzYgMTEuMzMzMyAzLjQ0NjQxIDExLjMzMzMgNS4zMzIwMyAxMS4zMzMzSDEwLjY2NTRDMTIuNTUxIDExLjMzMzMgMTMuNDkzOCAxMS4zMzMzIDE0LjA3OTYgMTAuNzQ3NUMxNC42NjU0IDEwLjE2MTcgMTQuNjY1NCA5LjIxODkzIDE0LjY2NTQgNy4zMzMzM1Y2QzE0LjY2NTQgNC4xMTQzOCAxNC42NjU0IDMuMTcxNTcgMTQuMDc5NiAyLjU4NTc5QzEzLjQ5MzggMiAxMi41NTEgMiAxMC42NjU0IDJaIiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOS4zMzIwMyAxNEgxMC42NjU0TTkuMzMyMDMgMTRDOC43Nzk3NiAxNCA4LjMzMjAzIDEzLjU1MjMgOC4zMzIwMyAxM1YxMS4zMzM0SDcuOTk4N005LjMzMjAzIDE0SDYuNjY1MzZNNy45OTg3IDExLjMzMzRINy42NjUzNlYxM0M3LjY2NTM2IDEzLjU1MjMgNy4yMTc2MyAxNCA2LjY2NTM2IDE0TTcuOTk4NyAxMS4zMzM0VjE0TTYuNjY1MzYgMTRINS4zMzIwMyIgc3Ryb2tlPSIjODE4MThDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTEwLjY2NTQgMkg1LjMzMjAzQzMuNDQ2NDEgMiAyLjUwMzYgMiAxLjkxNzgyIDIuNTg1NzlDMS4zMzIwMyAzLjE3MTU3IDEuMzMyMDMgNC4xMTQzOCAxLjMzMjAzIDZWNy4zMzMzM0MxLjMzMjAzIDkuMjE4OTMgMS4zMzIwMyAxMC4xNjE3IDEuOTE3ODIgMTAuNzQ3NUMyLjUwMzYgMTEuMzMzMyAzLjQ0NjQxIDExLjMzMzMgNS4zMzIwMyAxMS4zMzMzSDEwLjY2NTRDMTIuNTUxIDExLjMzMzMgMTMuNDkzOCAxMS4zMzMzIDE0LjA3OTYgMTAuNzQ3NUMxNC42NjU0IDEwLjE2MTcgMTQuNjY1NCA5LjIxODkzIDE0LjY2NTQgNy4zMzMzM1Y2QzE0LjY2NTQgNC4xMTQzOCAxNC42NjU0IDMuMTcxNTcgMTQuMDc5NiAyLjU4NTc5QzEzLjQ5MzggMiAxMi41NTEgMiAxMC42NjU0IDJaIiBzdHJva2U9IiM4MTgxOEMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Download icon - Invoice PDF download */
.icon-download {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTQgMTBWMTIuNjY2N0MxNCAxMy4wMjAzIDEzLjg1OTUgMTMuMzU5NCAxMy42MDk1IDEzLjYwOTVDMTMuMzU5NCAxMy44NTk1IDEzLjAyMDMgMTQgMTIuNjY2NyAxNEgzLjMzMzMzQzIuOTc5NzEgMTQgMi42NDA1NyAxMy44NTk1IDIuMzkwNTIgMTMuNjA5NUMyLjE0MDQ4IDEzLjM1OTQgMiAxMy4wMjAzIDIgMTIuNjY2N1YxMCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNNC42NjY3NSA2LjY2NjY5TDguMDAwMDggMTBMMTEuMzMzNCA2LjY2NjY5IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik04IDEwVjIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+Cg==');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTQgMTBWMTIuNjY2N0MxNCAxMy4wMjAzIDEzLjg1OTUgMTMuMzU5NCAxMy42MDk1IDEzLjYwOTVDMTMuMzU5NCAxMy44NTk1IDEzLjAyMDMgMTQgMTIuNjY2NyAxNEgzLjMzMzMzQzIuOTc5NzEgMTQgMi42NDA1NyAxMy44NTk1IDIuMzkwNTIgMTMuNjA5NUMyLjE0MDQ4IDEzLjM1OTQgMiAxMy4wMjAzIDIgMTIuNjY2N1YxMCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNNC42NjY3NSA2LjY2NjY5TDguMDAwMDggMTBMMTEuMzMzNCA2LjY2NjY5IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik04IDEwVjIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+Cg==');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Star Filled icon - Rating stars (filled) - can be colored with currentColor */
.icon-star-filled {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIyIDIyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjAuNTAwMyAxMC4xMTAxTDE2LjQ3NjIgMTMuNzU1TDE3LjY4MTcgMTkuMTgxNkMxNy43NDU1IDE5LjQ2NTMgMTcuNzI3MiAxOS43NjIyIDE3LjYyOTMgMjAuMDM1MkMxNy41MzE1IDIwLjMwODIgMTcuMzU4MSAyMC41NDUyIDE3LjEzMTEgMjAuNzE2NkMxNi45MDQyIDIwLjg4NzkgMTYuNjMzNSAyMC45ODYgMTYuMzUzMSAyMC45OTg2QzE2LjA3MjcgMjEuMDExMiAxNS43OTQ5IDIwLjkzNzggMTUuNTU0NiAyMC43ODczTDEwLjk5NDIgMTcuOTE2N0w2LjQ0MzY5IDIwLjc4NzNDNi4yMDMyOSAyMC45Mzc4IDUuOTI1NTEgMjEuMDExMiA1LjY0NTA5IDIwLjk5ODZDNS4zNjQ2NyAyMC45ODYgNS4wOTQwNSAyMC44ODc5IDQuODY3MDYgMjAuNzE2NkM0LjY0MDA3IDIwLjU0NTIgNC40NjY3OSAyMC4zMDgyIDQuMzY4ODcgMjAuMDM1MkM0LjI3MDk2IDE5Ljc2MjIgNC4yNTI3NSAxOS40NjUzIDQuMzE2NTQgMTkuMTgxNkw1LjUyMDIgMTMuNzYwNkwxLjQ5NTIyIDEwLjExMDFDMS4yODIzNCA5LjkxOTY1IDEuMTI4NCA5LjY2ODA4IDEuMDUyNzEgOS4zODcwN0MwLjk3NzAyNiA5LjEwNjA3IDAuOTgyOTU5IDguODA4MTQgMS4wNjk3NyA4LjUzMDY0QzEuMTU2NTggOC4yNTMxMiAxLjMyMDQgOC4wMDgzOSAxLjU0MDY5IDcuODI3MTNDMS43NjA5OSA3LjY0NTg3IDIuMDI3OTMgNy41MzYxNCAyLjMwODA3IDcuNTExNzFMNy42MTM0NCA3LjAzNDc5TDkuNjg0MzggMS45MDgyNkM5Ljc5MjUzIDEuNjM5MjYgOS45NzQ5MiAxLjQwOTQ4IDEwLjIwODYgMS4yNDc4NkMxMC40NDI0IDEuMDg2MjQgMTAuNzE2OSAxIDEwLjk5NzggMUMxMS4yNzg2IDEgMTEuNTUzMiAxLjA4NjI0IDExLjc4NjkgMS4yNDc4NkMxMi4wMjA2IDEuNDA5NDggMTIuMjAzIDEuNjM5MjYgMTIuMzExMiAxLjkwODI2TDE0LjM4ODQgNy4wMzQ3OUwxOS42OTIgNy41MTE3MUMxOS45NzIgNy41MzYxNCAyMC4yMzkgNy42NDU4NyAyMC40NTkzIDcuODI3MTNDMjAuNjc5NiA4LjAwODM5IDIwLjg0MzQgOC4yNTMxMiAyMC45MzAyIDguNTMwNjRDMjEuMDE3MSA4LjgwODE0IDIxLjAyMjkgOS4xMDYwNyAyMC45NDczIDkuMzg3MDdDMjAuODcxNiA5LjY2ODA4IDIwLjcxNzcgOS45MTk2NSAyMC41MDQ4IDEwLjExMDFIMjAuNTAwM1oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L3N2Zz4=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIyIDIyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjAuNTAwMyAxMC4xMTAxTDE2LjQ3NjIgMTMuNzU1TDE3LjY4MTcgMTkuMTgxNkMxNy43NDU1IDE5LjQ2NTMgMTcuNzI3MiAxOS43NjIyIDE3LjYyOTMgMjAuMDM1MkMxNy41MzE1IDIwLjMwODIgMTcuMzU4MSAyMC41NDUyIDE3LjEzMTEgMjAuNzE2NkMxNi45MDQyIDIwLjg4NzkgMTYuNjMzNSAyMC45ODYgMTYuMzUzMSAyMC45OTg2QzE2LjA3MjcgMjEuMDExMiAxNS43OTQ5IDIwLjkzNzggMTUuNTU0NiAyMC43ODczTDEwLjk5NDIgMTcuOTE2N0w2LjQ0MzY5IDIwLjc4NzNDNi4yMDMyOSAyMC45Mzc4IDUuOTI1NTEgMjEuMDExMiA1LjY0NTA5IDIwLjk5ODZDNS4zNjQ2NyAyMC45ODYgNS4wOTQwNSAyMC44ODc5IDQuODY3MDYgMjAuNzE2NkM0LjY0MDA3IDIwLjU0NTIgNC40NjY3OSAyMC4zMDgyIDQuMzY4ODcgMjAuMDM1MkM0LjI3MDk2IDE5Ljc2MjIgNC4yNTI3NSAxOS40NjUzIDQuMzE2NTQgMTkuMTgxNkw1LjUyMDIgMTMuNzYwNkwxLjQ5NTIyIDEwLjExMDFDMS4yODIzNCA5LjkxOTY1IDEuMTI4NCA5LjY2ODA4IDEuMDUyNzEgOS4zODcwN0MwLjk3NzAyNiA5LjEwNjA3IDAuOTgyOTU5IDguODA4MTQgMS4wNjk3NyA4LjUzMDY0QzEuMTU2NTggOC4yNTMxMiAxLjMyMDQgOC4wMDgzOSAxLjU0MDY5IDcuODI3MTNDMS43NjA5OSA3LjY0NTg3IDIuMDI3OTMgNy41MzYxNCAyLjMwODA3IDcuNTExNzFMNy42MTM0NCA3LjAzNDc5TDkuNjg0MzggMS45MDgyNkM5Ljc5MjUzIDEuNjM5MjYgOS45NzQ5MiAxLjQwOTQ4IDEwLjIwODYgMS4yNDc4NkMxMC40NDI0IDEuMDg2MjQgMTAuNzE2OSAxIDEwLjk5NzggMUMxMS4yNzg2IDEgMTEuNTUzMiAxLjA4NjI0IDExLjc4NjkgMS4yNDc4NkMxMi4wMjA2IDEuNDA5NDggMTIuMjAzIDEuNjM5MjYgMTIuMzExMiAxLjkwODI2TDE0LjM4ODQgNy4wMzQ3OUwxOS42OTIgNy41MTE3MUMxOS45NzIgNy41MzYxNCAyMC4yMzkgNy42NDU4NyAyMC40NTkzIDcuODI3MTNDMjAuNjc5NiA4LjAwODM5IDIwLjg0MzQgOC4yNTMxMiAyMC45MzAyIDguNTMwNjRDMjEuMDE3MSA4LjgwODE0IDIxLjAyMjkgOS4xMDYwNyAyMC45NDczIDkuMzg3MDdDMjAuODcxNiA5LjY2ODA4IDIwLjcxNzcgOS45MTk2NSAyMC41MDQ4IDEwLjExMDFIMjAuNTAwM1oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L3N2Zz4=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Star Empty icon - Rating stars (outline) - can be colored with currentColor */
.icon-star-empty {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIyIDIyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTAuOTk4IDEuNzVDMTEuMTI0NCAxLjc1MDA1IDExLjI1MDUgMS43ODgzOSAxMS4zNjA0IDEuODY0MjZDMTEuNDcwNiAxLjk0MDUgMTEuNTYwNyAyLjA1MjggMTEuNjE1MiAyLjE4ODQ4TDExLjYxNjIgMi4xODk0NUwxMy42OTM0IDcuMzE2NDFMMTMuODY1MiA3Ljc0MTIxTDE0LjMyMTMgNy43ODIyM0wxOS42MjUgOC4yNTg3OUgxOS42MjdDMTkuNzIyIDguMjY3MSAxOS44MTUzIDguMjk3NjYgMTkuOTAwNCA4LjM0ODYzTDE5Ljk4MjQgOC40MDYyNUMyMC4wODc5IDguNDkzIDIwLjE3MDcgOC42MTM2OCAyMC4yMTQ4IDguNzU0ODhDMjAuMjU4OSA4Ljg5NjAzIDIwLjI2MTMgOS4wNDg4MSAyMC4yMjI3IDkuMTkyMzhDMjAuMTg3MyA5LjMyMzQ2IDIwLjExNzkgOS40MzY3MyAyMC4wMjgzIDkuNTI1MzlMMTkuOTk3MSA5LjU1NDY5TDE1Ljk3MjcgMTMuMTk5MkwxNS42NDk0IDEzLjQ5MjJMMTUuNzQ0MSAxMy45MThMMTYuOTQ5MiAxOS4zNDQ3TDE2Ljk1MDIgMTkuMzQ1N0MxNi45ODI4IDE5LjQ5MDggMTYuOTczNiAxOS42NDM2IDE2LjkyMzggMTkuNzgyMkgxNi45MjI5QzE2Ljg3MzMgMTkuOTIwNCAxNi43ODc3IDIwLjAzNjYgMTYuNjc5NyAyMC4xMTgyQzE2LjU3MiAyMC4xOTk1IDE2LjQ0NjEgMjAuMjQzMyAxNi4zMTkzIDIwLjI0OUwxNi4yMjQ2IDIwLjI0NjFDMTYuMTMgMjAuMjM1OSAxNi4wMzY3IDIwLjIwNDMgMTUuOTUyMSAyMC4xNTE0TDExLjM5MzYgMTcuMjgyMkwxMC45OTQxIDE3LjAzMDNMMTAuNTkzOCAxNy4yODIyTDYuMDQ1OSAyMC4xNTE0QzUuOTMzMTQgMjAuMjIxOSA1LjgwNTQ0IDIwLjI1NDcgNS42Nzg3MSAyMC4yNDlMNS41ODM5OCAyMC4yMzgzQzUuNDkwNDQgMjAuMjE5NiA1LjQwMDA5IDIwLjE3OSA1LjMxOTM0IDIwLjExODJDNS4yMTEzIDIwLjAzNjYgNS4xMjQ4OCAxOS45MjA2IDUuMDc1MiAxOS43ODIyQzUuMDI1NTQgMTkuNjQzOCA1LjAxNTM2IDE5LjQ5MTYgNS4wNDc4NSAxOS4zNDY3TDUuMDQ4ODMgMTkuMzQzOEw2LjI1MTk1IDEzLjkyMjlMNi4zNDY2OCAxMy40OThMNi4wMjQ0MSAxMy4yMDUxTDEuOTk5MDIgOS41NTQ2OUwxLjk5NTEyIDkuNTUwNzhDMS44OTMwOCA5LjQ1OTM3IDEuODE1OTcgOS4zMzU0NCAxLjc3NzM0IDkuMTkyMzhDMS43Mzg3MyA5LjA0OSAxLjc0MTA2IDguODk2MTIgMS43ODUxNiA4Ljc1NDg4QzEuODI5MzMgOC42MTM2OCAxLjkxMjE1IDguNDkzIDIuMDE3NTggOC40MDYyNUMyLjEyMjU5IDguMzE5OTEgMi4yNDYzNSA4LjI2OTg3IDIuMzczMDUgOC4yNTg3OUgyLjM3NUw3LjY4MDY2IDcuNzgyMjNMOC4xMzY3MiA3Ljc0MTIxTDguMzA4NTkgNy4zMTU0M0wxMC4zNzk5IDIuMTg5NDVWMi4xODg0OEMxMC40MzQ0IDIuMDUyODQgMTAuNTI0NSAxLjk0MDUgMTAuNjM0OCAxLjg2NDI2QzEwLjc0NDcgMS43ODgyMiAxMC44NzE1IDEuNzUgMTAuOTk4IDEuNzVaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPC9zdmc+');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIyIDIyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTAuOTk4IDEuNzVDMTEuMTI0NCAxLjc1MDA1IDExLjI1MDUgMS43ODgzOSAxMS4zNjA0IDEuODY0MjZDMTEuNDcwNiAxLjk0MDUgMTEuNTYwNyAyLjA1MjggMTEuNjE1MiAyLjE4ODQ4TDExLjYxNjIgMi4xODk0NUwxMy42OTM0IDcuMzE2NDFMMTMuODY1MiA3Ljc0MTIxTDE0LjMyMTMgNy43ODIyM0wxOS42MjUgOC4yNTg3OUgxOS42MjdDMTkuNzIyIDguMjY3MSAxOS44MTUzIDguMjk3NjYgMTkuOTAwNCA4LjM0ODYzTDE5Ljk4MjQgOC40MDYyNUMyMC4wODc5IDguNDkzIDIwLjE3MDcgOC42MTM2OCAyMC4yMTQ4IDguNzU0ODhDMjAuMjU4OSA4Ljg5NjAzIDIwLjI2MTMgOS4wNDg4MSAyMC4yMjI3IDkuMTkyMzhDMjAuMTg3MyA5LjMyMzQ2IDIwLjExNzkgOS40MzY3MyAyMC4wMjgzIDkuNTI1MzlMMTkuOTk3MSA5LjU1NDY5TDE1Ljk3MjcgMTMuMTk5MkwxNS42NDk0IDEzLjQ5MjJMMTUuNzQ0MSAxMy45MThMMTYuOTQ5MiAxOS4zNDQ3TDE2Ljk1MDIgMTkuMzQ1N0MxNi45ODI4IDE5LjQ5MDggMTYuOTczNiAxOS42NDM2IDE2LjkyMzggMTkuNzgyMkgxNi45MjI5QzE2Ljg3MzMgMTkuOTIwNCAxNi43ODc3IDIwLjAzNjYgMTYuNjc5NyAyMC4xMTgyQzE2LjU3MiAyMC4xOTk1IDE2LjQ0NjEgMjAuMjQzMyAxNi4zMTkzIDIwLjI0OUwxNi4yMjQ2IDIwLjI0NjFDMTYuMTMgMjAuMjM1OSAxNi4wMzY3IDIwLjIwNDMgMTUuOTUyMSAyMC4xNTE0TDExLjM5MzYgMTcuMjgyMkwxMC45OTQxIDE3LjAzMDNMMTAuNTkzOCAxNy4yODIyTDYuMDQ1OSAyMC4xNTE0QzUuOTMzMTQgMjAuMjIxOSA1LjgwNTQ0IDIwLjI1NDcgNS42Nzg3MSAyMC4yNDlMNS41ODM5OCAyMC4yMzgzQzUuNDkwNDQgMjAuMjE5NiA1LjQwMDA5IDIwLjE3OSA1LjMxOTM0IDIwLjExODJDNS4yMTEzIDIwLjAzNjYgNS4xMjQ4OCAxOS45MjA2IDUuMDc1MiAxOS43ODIyQzUuMDI1NTQgMTkuNjQzOCA1LjAxNTM2IDE5LjQ5MTYgNS4wNDc4NSAxOS4zNDY3TDUuMDQ4ODMgMTkuMzQzOEw2LjI1MTk1IDEzLjkyMjlMNi4zNDY2OCAxMy40OThMNi4wMjQ0MSAxMy4yMDUxTDEuOTk5MDIgOS41NTQ2OUwxLjk5NTEyIDkuNTUwNzhDMS44OTMwOCA5LjQ1OTM3IDEuODE1OTcgOS4zMzU0NCAxLjc3NzM0IDkuMTkyMzhDMS43Mzg3MyA5LjA0OSAxLjc0MTA2IDguODk2MTIgMS43ODUxNiA4Ljc1NDg4QzEuODI5MzMgOC42MTM2OCAxLjkxMjE1IDguNDkzIDIuMDE3NTggOC40MDYyNUMyLjEyMjU5IDguMzE5OTEgMi4yNDYzNSA4LjI2OTg3IDIuMzczMDUgOC4yNTg3OUgyLjM3NUw3LjY4MDY2IDcuNzgyMjNMOC4xMzY3MiA3Ljc0MTIxTDguMzA4NTkgNy4zMTU0M0wxMC4zNzk5IDIuMTg5NDVWMi4xODg0OEMxMC40MzQ0IDIuMDUyODQgMTAuNTI0NSAxLjk0MDUgMTAuNjM0OCAxLjg2NDI2QzEwLjc0NDcgMS43ODgyMiAxMC44NzE1IDEuNzUgMTAuOTk4IDEuNzVaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPC9zdmc+');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Arrow Right icon - Carousel navigation, pagination */
.icon-arrow-right {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNi4wMDAwMyA0QzYuMDAwMDMgNCAxMCA2Ljk0NTkzIDEwIDhDMTAgOS4wNTQxMyA2IDEyIDYgMTIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+Cg==');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNi4wMDAwMyA0QzYuMDAwMDMgNCAxMCA2Ljk0NTkzIDEwIDhDMTAgOS4wNTQxMyA2IDEyIDYgMTIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+Cg==');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Arrow Left icon - Carousel navigation (mirrored version for proper centering) */
.icon-arrow-left {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTAgNEMxMCA0IDYgNi45NDU5MyA2IDhDNiA5LjA1NDEzIDEwIDEyIDEwIDEyIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPgo=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTAgNEMxMCA0IDYgNi45NDU5MyA2IDhDNiA5LjA1NDEzIDEwIDEyIDEwIDEyIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPgo=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* AI Stars icon - Premium features, AI-powered actions, sparkles */
/* Users/Referrals icon - Affiliate, referral programs */
.icon-users-referral {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNzUgNS4yNUM5Ljc1IDYuOTA2ODYgOC40MDY4MyA4LjI1IDYuNzUgOC4yNUM1LjA5MzE0IDguMjUgMy43NSA2LjkwNjg2IDMuNzUgNS4yNUMzLjc1IDMuNTkzMTQgNS4wOTMxNCAyLjI1IDYuNzUgMi4yNUM4LjQwNjgzIDIuMjUgOS43NSAzLjU5MzE0IDkuNzUgNS4yNVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KPHBhdGggZD0iTTExLjI1IDguMjVDMTIuOTA2OCA4LjI1IDE0LjI1IDYuOTA2ODYgMTQuMjUgNS4yNUMxNC4yNSAzLjU5MzE0IDEyLjkwNjggMi4yNSAxMS4yNSAyLjI1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTguMjUgMTAuNUg1LjI1QzMuMTc4OTMgMTAuNSAxLjUgMTIuMTc5IDEuNSAxNC4yNUMxLjUgMTUuMDc4NCAyLjE3MTU3IDE1Ljc1IDMgMTUuNzVIMTAuNUMxMS4zMjg0IDE1Ljc1IDEyIDE1LjA3ODQgMTIgMTQuMjVDMTIgMTIuMTc5IDEwLjMyMSAxMC41IDguMjUgMTAuNVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEyLjc1IDEwLjVDMTQuODIxIDEwLjUgMTYuNSAxMi4xNzkgMTYuNSAxNC4yNUMxNi41IDE1LjA3ODQgMTUuODI4NCAxNS43NSAxNSAxNS43NUgxMy44NzUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNzUgNS4yNUM5Ljc1IDYuOTA2ODYgOC40MDY4MyA4LjI1IDYuNzUgOC4yNUM1LjA5MzE0IDguMjUgMy43NSA2LjkwNjg2IDMuNzUgNS4yNUMzLjc1IDMuNTkzMTQgNS4wOTMxNCAyLjI1IDYuNzUgMi4yNUM4LjQwNjgzIDIuMjUgOS43NSAzLjU5MzE0IDkuNzUgNS4yNVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KPHBhdGggZD0iTTExLjI1IDguMjVDMTIuOTA2OCA4LjI1IDE0LjI1IDYuOTA2ODYgMTQuMjUgNS4yNUMxNC4yNSAzLjU5MzE0IDEyLjkwNjggMi4yNSAxMS4yNSAyLjI1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTguMjUgMTAuNUg1LjI1QzMuMTc4OTMgMTAuNSAxLjUgMTIuMTc5IDEuNSAxNC4yNUMxLjUgMTUuMDc4NCAyLjE3MTU3IDE1Ljc1IDMgMTUuNzVIMTAuNUMxMS4zMjg0IDE1Ljc1IDEyIDE1LjA3ODQgMTIgMTQuMjVDMTIgMTIuMTc5IDEwLjMyMSAxMC41IDguMjUgMTAuNVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEyLjc1IDEwLjVDMTQuODIxIDEwLjUgMTYuNSAxMi4xNzkgMTYuNSAxNC4yNUMxNi41IDE1LjA3ODQgMTUuODI4NCAxNS43NSAxNSAxNS43NUgxMy44NzUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Ticket/Discount icon - Affiliate commissions, promotions */
.icon-ticket-discount {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuODQ4MjQgNy4wMDc4MUMxLjY2MTg0IDcuMDA3ODEgMS40OTE3NCA2Ljg1NjcyIDEuNTAwMzEgNi42NTkyMUMxLjU1MDQ5IDUuNTAyNjUgMS42OTExIDQuNzQ5NzMgMi4wODUwNiA0LjE1NDEzQzIuMzExNzEgMy44MTE0NyAyLjU5MzIzIDMuNTEzNDQgMi45MTY5MiAzLjI3MzUxQzMuNzkxODEgMi42MjUgNS4wMjYwNCAyLjYyNSA3LjQ5NDQ5IDIuNjI1SDEwLjUwNTVDMTIuOTc0IDIuNjI1IDE0LjIwODIgMi42MjUgMTUuMDgzMSAzLjI3MzUxQzE1LjQwNjggMy41MTM0NCAxNS42ODgzIDMuODExNDcgMTUuOTE1IDQuMTU0MTNDMTYuMzA4OSA0Ljc0OTY3IDE2LjQ0OTUgNS41MDI0OSAxNi40OTk3IDYuNjU4ODJDMTYuNTA4MyA2Ljg1NjU2IDE2LjMzOCA3LjAwNzgxIDE2LjE1MTQgNy4wMDc4MUMxNS4xMTIgNy4wMDc4MSAxNC4yNjk1IDcuODk5NzUgMTQuMjY5NSA5QzE0LjI2OTUgMTAuMTAwMyAxNS4xMTIgMTAuOTkyMiAxNi4xNTE0IDEwLjk5MjJDMTYuMzM4IDEwLjk5MjIgMTYuNTA4MyAxMS4xNDM0IDE2LjQ5OTcgMTEuMzQxMkMxNi40NDk1IDEyLjQ5NzYgMTYuMzA4OSAxMy4yNTAzIDE1LjkxNSAxMy44NDU5QzE1LjY4ODMgMTQuMTg4NSAxNS40MDY4IDE0LjQ4NjUgMTUuMDgzMSAxNC43MjY1QzE0LjIwODIgMTUuMzc1IDEyLjk3NCAxNS4zNzUgMTAuNTA1NSAxNS4zNzVINy40OTQ0OUM1LjAyNjA0IDE1LjM3NSAzLjc5MTgxIDE1LjM3NSAyLjkxNjkyIDE0LjcyNjVDMi41OTMyMyAxNC40ODY1IDIuMzExNzEgMTQuMTg4NSAyLjA4NTA2IDEzLjg0NTlDMS42OTExIDEzLjI1MDMgMS41NTA0OSAxMi40OTczIDEuNTAwMzEgMTEuMzQwOEMxLjQ5MTc0IDExLjE0MzMgMS42NjE4NCAxMC45OTIyIDEuODQ4MjQgMTAuOTkyMkMyLjg4NzU5IDEwLjk5MjIgMy43MzAxNCAxMC4xMDAzIDMuNzMwMTQgOUMzLjczMDE0IDcuODk5NzUgMi44ODc1OSA3LjAwNzgxIDEuODQ4MjQgNy4wMDc4MVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcuMTI1IDEwLjg3NUwxMC44NzUgNy4xMjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNNy4xMjUgNy4xMjVINy4xMzM0Mk0xMC44NjY2IDEwLjg3NUgxMC44NzUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuODQ4MjQgNy4wMDc4MUMxLjY2MTg0IDcuMDA3ODEgMS40OTE3NCA2Ljg1NjcyIDEuNTAwMzEgNi42NTkyMUMxLjU1MDQ5IDUuNTAyNjUgMS42OTExIDQuNzQ5NzMgMi4wODUwNiA0LjE1NDEzQzIuMzExNzEgMy44MTE0NyAyLjU5MzIzIDMuNTEzNDQgMi45MTY5MiAzLjI3MzUxQzMuNzkxODEgMi42MjUgNS4wMjYwNCAyLjYyNSA3LjQ5NDQ5IDIuNjI1SDEwLjUwNTVDMTIuOTc0IDIuNjI1IDE0LjIwODIgMi42MjUgMTUuMDgzMSAzLjI3MzUxQzE1LjQwNjggMy41MTM0NCAxNS42ODgzIDMuODExNDcgMTUuOTE1IDQuMTU0MTNDMTYuMzA4OSA0Ljc0OTY3IDE2LjQ0OTUgNS41MDI0OSAxNi40OTk3IDYuNjU4ODJDMTYuNTA4MyA2Ljg1NjU2IDE2LjMzOCA3LjAwNzgxIDE2LjE1MTQgNy4wMDc4MUMxNS4xMTIgNy4wMDc4MSAxNC4yNjk1IDcuODk5NzUgMTQuMjY5NSA5QzE0LjI2OTUgMTAuMTAwMyAxNS4xMTIgMTAuOTkyMiAxNi4xNTE0IDEwLjk5MjJDMTYuMzM4IDEwLjk5MjIgMTYuNTA4MyAxMS4xNDM0IDE2LjQ5OTcgMTEuMzQxMkMxNi40NDk1IDEyLjQ5NzYgMTYuMzA4OSAxMy4yNTAzIDE1LjkxNSAxMy44NDU5QzE1LjY4ODMgMTQuMTg4NSAxNS40MDY4IDE0LjQ4NjUgMTUuMDgzMSAxNC43MjY1QzE0LjIwODIgMTUuMzc1IDEyLjk3NCAxNS4zNzUgMTAuNTA1NSAxNS4zNzVINy40OTQ0OUM1LjAyNjA0IDE1LjM3NSAzLjc5MTgxIDE1LjM3NSAyLjkxNjkyIDE0LjcyNjVDMi41OTMyMyAxNC40ODY1IDIuMzExNzEgMTQuMTg4NSAyLjA4NTA2IDEzLjg0NTlDMS42OTExIDEzLjI1MDMgMS41NTA0OSAxMi40OTczIDEuNTAwMzEgMTEuMzQwOEMxLjQ5MTc0IDExLjE0MzMgMS42NjE4NCAxMC45OTIyIDEuODQ4MjQgMTAuOTkyMkMyLjg4NzU5IDEwLjk5MjIgMy43MzAxNCAxMC4xMDAzIDMuNzMwMTQgOUMzLjczMDE0IDcuODk5NzUgMi44ODc1OSA3LjAwNzgxIDEuODQ4MjQgNy4wMDc4MVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcuMTI1IDEwLjg3NUwxMC44NzUgNy4xMjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNNy4xMjUgNy4xMjVINy4xMzM0Mk0xMC44NjY2IDEwLjg3NUgxMC44NzUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Price Tag icon with dollar sign - Discount code input */
.icon-price-tag {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDE1IDE1IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMi40MjU4MyA3LjUyOTE0QzEuODc0MSA4LjE0NTM3IDEuODYyMjMgOS4wNzUwNCAyLjM2ODU5IDkuNzI5MDJDMy4zNzM0MSAxMS4wMjY4IDQuNDczMjEgMTIuMTI2NiA1Ljc3MDk4IDEzLjEzMTRDNi40MjQ5NyAxMy42Mzc4IDcuMzU0NjMgMTMuNjI1OSA3Ljk3MDg2IDEzLjA3NDJDOS42NDM4NSAxMS41NzYyIDExLjE3NiAxMC4wMTA3IDEyLjY1NDYgOC4yOTAzOUMxMi44MDA3IDguMTIwMyAxMi44OTIyIDcuOTExODIgMTIuOTEyNyA3LjY4ODQ2QzEzLjAwMzQgNi43MDA5IDEzLjE4OTggMy44NTU1NyAxMi40MTcxIDMuMDgyODVDMTEuNjQ0NSAyLjMxMDE1IDguNzk5MTEgMi40OTY1NyA3LjgxMTU0IDIuNTg3MzJDNy41ODgxOCAyLjYwNzg0IDcuMzc5NyAyLjY5OTI4IDcuMjA5NiAyLjg0NTQ2QzUuNDg5MjcgNC4zMjQwNSAzLjkyMzc5IDUuODU2MTUgMi40MjU4MyA3LjUyOTE0WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIvPgogIDxwYXRoIGQ9Ik0xMiAzLjgzMzMzTDE0LjMzMzMgMS41IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNNy41IDYuMTI1QzYuNjcxNTUgNi4xMjUgNiA2LjU0NDczIDYgNy4wNjI1QzYgNy41ODAyNyA2LjY3MTU1IDggNy41IDhDOC4zMjg0NSA4IDkgOC40MTk3MyA5IDguOTM3NUM5IDkuNDU1MjUgOC4zMjg0NSA5Ljg3NSA3LjUgOS44NzVNNy41IDYuMTI1QzguMTUzMSA2LjEyNSA4LjcwODcgNi4zODU4OCA4LjkxNDY1IDYuNzVNNy41IDYuMTI1VjUuNU03LjUgOS44NzVDNi44NDY5IDkuODc1IDYuMjkxMyA5LjYxNDEyIDYuMDg1MzUgOS4yNU03LjUgOS44NzVWMTAuNSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDE1IDE1IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMi40MjU4MyA3LjUyOTE0QzEuODc0MSA4LjE0NTM3IDEuODYyMjMgOS4wNzUwNCAyLjM2ODU5IDkuNzI5MDJDMy4zNzM0MSAxMS4wMjY4IDQuNDczMjEgMTIuMTI2NiA1Ljc3MDk4IDEzLjEzMTRDNi40MjQ5NyAxMy42Mzc4IDcuMzU0NjMgMTMuNjI1OSA3Ljk3MDg2IDEzLjA3NDJDOS42NDM4NSAxMS41NzYyIDExLjE3NiAxMC4wMTA3IDEyLjY1NDYgOC4yOTAzOUMxMi44MDA3IDguMTIwMyAxMi44OTIyIDcuOTExODIgMTIuOTEyNyA3LjY4ODQ2QzEzLjAwMzQgNi43MDA5IDEzLjE4OTggMy44NTU1NyAxMi40MTcxIDMuMDgyODVDMTEuNjQ0NSAyLjMxMDE1IDguNzk5MTEgMi40OTY1NyA3LjgxMTU0IDIuNTg3MzJDNy41ODgxOCAyLjYwNzg0IDcuMzc5NyAyLjY5OTI4IDcuMjA5NiAyLjg0NTQ2QzUuNDg5MjcgNC4zMjQwNSAzLjkyMzc5IDUuODU2MTUgMi40MjU4MyA3LjUyOTE0WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIvPgogIDxwYXRoIGQ9Ik0xMiAzLjgzMzMzTDE0LjMzMzMgMS41IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNNy41IDYuMTI1QzYuNjcxNTUgNi4xMjUgNiA2LjU0NDczIDYgNy4wNjI1QzYgNy41ODAyNyA2LjY3MTU1IDggNy41IDhDOC4zMjg0NSA4IDkgOC40MTk3MyA5IDguOTM3NUM5IDkuNDU1MjUgOC4zMjg0NSA5Ljg3NSA3LjUgOS44NzVNNy41IDYuMTI1QzguMTUzMSA2LjEyNSA4LjcwODcgNi4zODU4OCA4LjkxNDY1IDYuNzVNNy41IDYuMTI1VjUuNU03LjUgOS44NzVDNi44NDY5IDkuODc1IDYuMjkxMyA5LjYxNDEyIDYuMDg1MzUgOS4yNU03LjUgOS44NzVWMTAuNSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.icon-ai-stars {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBkPSJNMi42MjUgOC41QzUuODEyNSA4LjUgOSA1LjMxMjUgOSAyLjEyNUM5IDUuMzEyNSAxMi4xODc1IDguNSAxNS4zNzUgOC41QzEyLjE4NzUgOC41IDkgMTEuNjg3NSA5IDE0Ljg3NUM5IDExLjY4NzUgNS44MTI1IDguNSAyLjYyNSA4LjVaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMC41IDE0LjYyNUMxLjIwODMzIDE0LjYyNSAyLjYyNSAxMy4yMDgzIDIuNjI1IDEyLjVDMi42MjUgMTMuMjA4MyA0LjA0MTY3IDE0LjYyNSA0Ljc1IDE0LjYyNUM0LjA0MTY3IDE0LjYyNSAyLjYyNSAxNi4wNDE3IDIuNjI1IDE2Ljc1QzIuNjI1IDE2LjA0MTcgMS4yMDgzMyAxNC42MjUgMC41IDE0LjYyNVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0iTTEyLjUgMi42MjVDMTMuMjA4MyAyLjYyNSAxNC42MjUgMS4yMDgzMyAxNC42MjUgMC41QzE0LjYyNSAxLjIwODMzIDE2LjA0MTcgMi42MjUgMTYuNzUgMi42MjVDMTYuMDQxNyAyLjYyNSAxNC42MjUgNC4wNDE2NyAxNC42MjUgNC43NUMxNC42MjUgNC4wNDE2NyAxMy4yMDgzIDIuNjI1IDEyLjUgMi42MjVaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4K');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBkPSJNMi42MjUgOC41QzUuODEyNSA4LjUgOSA1LjMxMjUgOSAyLjEyNUM5IDUuMzEyNSAxMi4xODc1IDguNSAxNS4zNzUgOC41QzEyLjE4NzUgOC41IDkgMTEuNjg3NSA5IDE0Ljg3NUM5IDExLjY4NzUgNS44MTI1IDguNSAyLjYyNSA4LjVaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMC41IDE0LjYyNUMxLjIwODMzIDE0LjYyNSAyLjYyNSAxMy4yMDgzIDIuNjI1IDEyLjVDMi42MjUgMTMuMjA4MyA0LjA0MTY3IDE0LjYyNSA0Ljc1IDE0LjYyNUM0LjA0MTY3IDE0LjYyNSAyLjYyNSAxNi4wNDE3IDIuNjI1IDE2Ljc1QzIuNjI1IDE2LjA0MTcgMS4yMDgzMyAxNC42MjUgMC41IDE0LjYyNVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0iTTEyLjUgMi42MjVDMTMuMjA4MyAyLjYyNSAxNC42MjUgMS4yMDgzMyAxNC42MjUgMC41QzE0LjYyNSAxLjIwODMzIDE2LjA0MTcgMi42MjUgMTYuNzUgMi42MjVDMTYuMDQxNyAyLjYyNSAxNC42MjUgNC4wNDE2NyAxNC42MjUgNC43NUMxNC42MjUgNC4wNDE2NyAxMy4yMDgzIDIuNjI1IDEyLjUgMi42MjVaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4K');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Gamepad - Game optimization/gaming mode icon (30×30px) */
.icon-gamepad {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMi40NjI4OSAxNy44NjIyQzIuNDYyODkgMTMuODEyNCAyLjQ2Mjg5IDExLjc4NzUgMy41ODEzOSAxMC40MjQ2QzMuNzg2MTYgMTAuMTc1MSA0LjAxNDkzIDkuOTQ2MzEgNC4yNjQ0MyA5Ljc0MTU1QzUuNjI3MzMgOC42MjMwNSA3LjY1MjIzIDguNjIzMDUgMTEuNzAyIDguNjIzMDVIMTcuODYxNEMyMS45MTEzIDguNjIzMDUgMjMuOTM2MSA4LjYyMzA1IDI1LjI5OTEgOS43NDE1NUMyNS41NDg1IDkuOTQ2MzEgMjUuNzc3MyAxMC4xNzUxIDI1Ljk4MiAxMC40MjQ2QzI3LjEwMDYgMTEuNzg3NSAyNy4xMDA2IDEzLjgxMjQgMjcuMTAwNiAxNy44NjIyQzI3LjEwMDYgMjEuOTEyIDI3LjEwMDYgMjMuOTM2OCAyNS45ODIgMjUuMjk5OEMyNS43NzczIDI1LjU0OTMgMjUuNTQ4NSAyNS43NzggMjUuMjk5MSAyNS45ODI4QzIzLjkzNjEgMjcuMTAxMyAyMS45MTEzIDI3LjEwMTMgMTcuODYxNCAyNy4xMDEzSDExLjcwMkM3LjY1MjIzIDI3LjEwMTMgNS42MjczMyAyNy4xMDEzIDQuMjY0NDMgMjUuOTgyOEM0LjAxNDkzIDI1Ljc3OCAzLjc4NjE2IDI1LjU0OTMgMy41ODEzOSAyNS4yOTk4QzIuNDYyODkgMjMuOTM2OCAyLjQ2Mjg5IDIxLjkxMiAyLjQ2Mjg5IDE3Ljg2MjJaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQuNzgzMiA4LjYyMzI5VjYuMTU5NTJDMTQuNzgzMiA1LjQ3OTE3IDE1LjMzNDcgNC45Mjc2NCAxNi4wMTUxIDQuOTI3NjRDMTYuNjk1NSA0LjkyNzY0IDE3LjI0NyA0LjM3NjEgMTcuMjQ3IDMuNjk1NzVWMi40NjM4NyIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTEyLjMxODcgMTkuNzEwM0wxMC40NzA5IDE3Ljg2MjVNMTAuNDcwOSAxNy44NjI1TDguNjIzMDUgMTYuMDE0Nk0xMC40NzA5IDE3Ljg2MjVMOC42MjMwNSAxOS43MTAzTTEwLjQ3MDkgMTcuODYyNUwxMi4zMTg3IDE2LjAxNDYiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0yMC45NDE0IDE5LjA5MzdWMTYuNjI5OSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMi40NjI4OSAxNy44NjIyQzIuNDYyODkgMTMuODEyNCAyLjQ2Mjg5IDExLjc4NzUgMy41ODEzOSAxMC40MjQ2QzMuNzg2MTYgMTAuMTc1MSA0LjAxNDkzIDkuOTQ2MzEgNC4yNjQ0MyA5Ljc0MTU1QzUuNjI3MzMgOC42MjMwNSA3LjY1MjIzIDguNjIzMDUgMTEuNzAyIDguNjIzMDVIMTcuODYxNEMyMS45MTEzIDguNjIzMDUgMjMuOTM2MSA4LjYyMzA1IDI1LjI5OTEgOS43NDE1NUMyNS41NDg1IDkuOTQ2MzEgMjUuNzc3MyAxMC4xNzUxIDI1Ljk4MiAxMC40MjQ2QzI3LjEwMDYgMTEuNzg3NSAyNy4xMDA2IDEzLjgxMjQgMjcuMTAwNiAxNy44NjIyQzI3LjEwMDYgMjEuOTEyIDI3LjEwMDYgMjMuOTM2OCAyNS45ODIgMjUuMjk5OEMyNS43NzczIDI1LjU0OTMgMjUuNTQ4NSAyNS43NzggMjUuMjk5MSAyNS45ODI4QzIzLjkzNjEgMjcuMTAxMyAyMS45MTEzIDI3LjEwMTMgMTcuODYxNCAyNy4xMDEzSDExLjcwMkM3LjY1MjIzIDI3LjEwMTMgNS42MjczMyAyNy4xMDEzIDQuMjY0NDMgMjUuOTgyOEM0LjAxNDkzIDI1Ljc3OCAzLjc4NjE2IDI1LjU0OTMgMy41ODEzOSAyNS4yOTk4QzIuNDYyODkgMjMuOTM2OCAyLjQ2Mjg5IDIxLjkxMiAyLjQ2Mjg5IDE3Ljg2MjJaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQuNzgzMiA4LjYyMzI5VjYuMTU5NTJDMTQuNzgzMiA1LjQ3OTE3IDE1LjMzNDcgNC45Mjc2NCAxNi4wMTUxIDQuOTI3NjRDMTYuNjk1NSA0LjkyNzY0IDE3LjI0NyA0LjM3NjEgMTcuMjQ3IDMuNjk1NzVWMi40NjM4NyIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTEyLjMxODcgMTkuNzEwM0wxMC40NzA5IDE3Ljg2MjVNMTAuNDcwOSAxNy44NjI1TDguNjIzMDUgMTYuMDE0Nk0xMC40NzA5IDE3Ljg2MjVMOC42MjMwNSAxOS43MTAzTTEwLjQ3MDkgMTcuODYyNUwxMi4zMTg3IDE2LjAxNDYiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0yMC45NDE0IDE5LjA5MzdWMTYuNjI5OSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* 3D Box - Package/Product/BIOS icon (30×30px) */
.icon-3dbox {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTQuNzgyNSAxNC4xNjYzQzE1LjM5MjkgMTQuMTY2MyAxNS45NjA0IDEzLjkyMTcgMTcuMDk1MyAxMy40MzI3TDE3LjkxNDMgMTMuMDc5N0MxOS45MzI3IDEyLjIxIDIwLjk0MTkgMTEuNzc1MiAyMC45NDE5IDExLjA4NjVDMjAuOTQxOSAxMC4zOTc5IDE5LjkzMjcgOS45NjMwNCAxNy45MTQzIDkuMDkzMzJMMTcuMDk1MyA4Ljc0MDQxQzE1Ljk2MDQgOC4yNTEzNiAxNS4zOTI5IDguMDA2ODQgMTQuNzgyNSA4LjAwNjg0QzE0LjE3MjEgOC4wMDY4NCAxMy42MDQ1IDguMjUxMzYgMTIuNDY5NiA4Ljc0MDQxTDExLjY1MDYgOS4wOTMzMkM5LjYzMjI0IDkuOTYzMDQgOC42MjMwNSAxMC4zOTc5IDguNjIzMDUgMTEuMDg2NUM4LjYyMzA1IDExLjc3NTIgOS42MzIyNCAxMi4yMSAxMS42NTA2IDEzLjA3OTdMMTIuNDY5NiAxMy40MzI3QzEzLjYwNDUgMTMuOTIxNyAxNC4xNzIxIDE0LjE2NjMgMTQuNzgyNSAxNC4xNjYzWk0xNC43ODI1IDE0LjE2NjNWMjEuNTU3NiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0yMC45NDE5IDExLjA4NjlWMTguNDc4MkMyMC45NDE5IDE5LjE2NjggMTkuOTMyNyAxOS42MDE3IDE3LjkxNDMgMjAuNDcxNEwxNy4wOTUzIDIwLjgyNDNDMTUuOTYwNCAyMS4zMTM0IDE1LjM5MjkgMjEuNTU3OSAxNC43ODI1IDIxLjU1NzlDMTQuMTcyMSAyMS41NTc5IDEzLjYwNDUgMjEuMzEzNCAxMi40Njk2IDIwLjgyNDNMMTEuNjUwNiAyMC40NzE0QzkuNjMyMjQgMTkuNjAxNyA4LjYyMzA1IDE5LjE2NjggOC42MjMwNSAxOC40NzgyVjExLjA4NjkiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTEuMjY1IDMuMDc5MUM3Ljk5MTkgMy4xNTM5NCA2LjA4MDA3IDMuNDY2NiA0Ljc3MzgzIDQuNzcyODZDMy40Njc1OCA2LjA3OTEgMy4xNTQ5MiA3Ljk5MDkyIDMuMDgwMDggMTEuMjY0MU0xOC4zMDA5IDMuMDc5MUMyMS41NzQxIDMuMTUzOTQgMjMuNDg1OSAzLjQ2NjYgMjQuNzkyMiA0Ljc3Mjg2QzI2LjA5ODMgNi4wNzkxIDI2LjQxMSA3Ljk5MDkyIDI2LjQ4NTkgMTEuMjY0MU0xOC4zMDA5IDI2LjQ4NDlDMjEuNTc0MSAyNi40MSAyMy40ODU5IDI2LjA5NzMgMjQuNzkyMiAyNC43OTEyQzI2LjA5ODMgMjMuNDg0OSAyNi40MTEgMjEuNTczMSAyNi40ODU5IDE4LjI5OTlNMTEuMjY1IDI2LjQ4NDlDNy45OTE5IDI2LjQxIDYuMDgwMDcgMjYuMDk3MyA0Ljc3MzgzIDI0Ljc5MTJDMy40Njc1OCAyMy40ODQ5IDMuMTU0OTIgMjEuNTczMSAzLjA4MDA4IDE4LjI5OTkiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTQuNzgyNSAxNC4xNjYzQzE1LjM5MjkgMTQuMTY2MyAxNS45NjA0IDEzLjkyMTcgMTcuMDk1MyAxMy40MzI3TDE3LjkxNDMgMTMuMDc5N0MxOS45MzI3IDEyLjIxIDIwLjk0MTkgMTEuNzc1MiAyMC45NDE5IDExLjA4NjVDMjAuOTQxOSAxMC4zOTc5IDE5LjkzMjcgOS45NjMwNCAxNy45MTQzIDkuMDkzMzJMMTcuMDk1MyA4Ljc0MDQxQzE1Ljk2MDQgOC4yNTEzNiAxNS4zOTI5IDguMDA2ODQgMTQuNzgyNSA4LjAwNjg0QzE0LjE3MjEgOC4wMDY4NCAxMy42MDQ1IDguMjUxMzYgMTIuNDY5NiA4Ljc0MDQxTDExLjY1MDYgOS4wOTMzMkM5LjYzMjI0IDkuOTYzMDQgOC42MjMwNSAxMC4zOTc5IDguNjIzMDUgMTEuMDg2NUM4LjYyMzA1IDExLjc3NTIgOS42MzIyNCAxMi4yMSAxMS42NTA2IDEzLjA3OTdMMTIuNDY5NiAxMy40MzI3QzEzLjYwNDUgMTMuOTIxNyAxNC4xNzIxIDE0LjE2NjMgMTQuNzgyNSAxNC4xNjYzWk0xNC43ODI1IDE0LjE2NjNWMjEuNTU3NiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0yMC45NDE5IDExLjA4NjlWMTguNDc4MkMyMC45NDE5IDE5LjE2NjggMTkuOTMyNyAxOS42MDE3IDE3LjkxNDMgMjAuNDcxNEwxNy4wOTUzIDIwLjgyNDNDMTUuOTYwNCAyMS4zMTM0IDE1LjM5MjkgMjEuNTU3OSAxNC43ODI1IDIxLjU1NzlDMTQuMTcyMSAyMS41NTc5IDEzLjYwNDUgMjEuMzEzNCAxMi40Njk2IDIwLjgyNDNMMTEuNjUwNiAyMC40NzE0QzkuNjMyMjQgMTkuNjAxNyA4LjYyMzA1IDE5LjE2NjggOC42MjMwNSAxOC40NzgyVjExLjA4NjkiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTEuMjY1IDMuMDc5MUM3Ljk5MTkgMy4xNTM5NCA2LjA4MDA3IDMuNDY2NiA0Ljc3MzgzIDQuNzcyODZDMy40Njc1OCA2LjA3OTEgMy4xNTQ5MiA3Ljk5MDkyIDMuMDgwMDggMTEuMjY0MU0xOC4zMDA5IDMuMDc5MUMyMS41NzQxIDMuMTUzOTQgMjMuNDg1OSAzLjQ2NjYgMjQuNzkyMiA0Ljc3Mjg2QzI2LjA5ODMgNi4wNzkxIDI2LjQxMSA3Ljk5MDkyIDI2LjQ4NTkgMTEuMjY0MU0xOC4zMDA5IDI2LjQ4NDlDMjEuNTc0MSAyNi40MSAyMy40ODU5IDI2LjA5NzMgMjQuNzkyMiAyNC43OTEyQzI2LjA5ODMgMjMuNDg0OSAyNi40MTEgMjEuNTczMSAyNi40ODU5IDE4LjI5OTlNMTEuMjY1IDI2LjQ4NDlDNy45OTE5IDI2LjQxIDYuMDgwMDcgMjYuMDk3MyA0Ljc3MzgzIDI0Ljc5MTJDMy40Njc1OCAyMy40ODQ5IDMuMTU0OTIgMjEuNTczMSAzLjA4MDA4IDE4LjI5OTkiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Network - WiFi/Router/Internet icon (30×30px) */
.icon-network {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjIuMTczIDI1Ljg2OTdINy4zOTA0M0M1LjA2NzU2IDI1Ljg2OTcgMy45MDYxMyAyNS44Njk3IDMuMTg0NTIgMjUuMTQ4MUMyLjQ2Mjg5IDI0LjQyNjQgMi40NjI4OSAyMy4yNjUgMi40NjI4OSAyMC45NDIyQzIuNDYyODkgMTguNjE5MyAyLjQ2Mjg5IDE3LjQ1NzkgMy4xODQ1MiAxNi43MzYzQzMuOTA2MTMgMTYuMDE0NiA1LjA2NzU2IDE2LjAxNDYgNy4zOTA0MyAxNi4wMTQ2SDIyLjE3M0MyNC40OTU5IDE2LjAxNDYgMjUuNjU3MyAxNi4wMTQ2IDI2LjM3ODkgMTYuNzM2M0MyNy4xMDA2IDE3LjQ1NzkgMjcuMTAwNiAxOC42MTkzIDI3LjEwMDYgMjAuOTQyMkMyNy4xMDA2IDIzLjI2NSAyNy4xMDA2IDI0LjQyNjQgMjYuMzc4OSAyNS4xNDgxQzI1LjY1NzMgMjUuODY5NyAyNC40OTU5IDI1Ljg2OTcgMjIuMTczIDI1Ljg2OTdaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNOS44NTU0NyA0LjI4NDNDMTEuMjcwNyAzLjEzMjk1IDEyLjk2MDkgMi40NjM4NyAxNC43NzY0IDIuNDYzODdDMTYuNTk3NCAyLjQ2Mzg3IDE4LjI5MjYgMy4xMzcxOCAxOS43MTA1IDQuMjk1Mk0xNy40NjE1IDcuMzkxNEMxNi42NTMzIDYuODg3NCAxNS43NDEzIDYuNjAzODQgMTQuNzc2NCA2LjYwMzg0QzEzLjgxNjIgNi42MDM4NCAxMi45MDg2IDYuODg0NTYgMTIuMTAzNCA3LjM4MzgzIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQuNzgzMiAxMS4wODY5SDE0Ljc5MTEiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0yMi4xNzM4IDIwLjk0MjRIMjIuMTg0OSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTE3LjI0NjEgMjAuOTQyNEgxNy4yNTcyIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNNy4zOTA2MiAyMC45NDI0SDEyLjMxODIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjIuMTczIDI1Ljg2OTdINy4zOTA0M0M1LjA2NzU2IDI1Ljg2OTcgMy45MDYxMyAyNS44Njk3IDMuMTg0NTIgMjUuMTQ4MUMyLjQ2Mjg5IDI0LjQyNjQgMi40NjI4OSAyMy4yNjUgMi40NjI4OSAyMC45NDIyQzIuNDYyODkgMTguNjE5MyAyLjQ2Mjg5IDE3LjQ1NzkgMy4xODQ1MiAxNi43MzYzQzMuOTA2MTMgMTYuMDE0NiA1LjA2NzU2IDE2LjAxNDYgNy4zOTA0MyAxNi4wMTQ2SDIyLjE3M0MyNC40OTU5IDE2LjAxNDYgMjUuNjU3MyAxNi4wMTQ2IDI2LjM3ODkgMTYuNzM2M0MyNy4xMDA2IDE3LjQ1NzkgMjcuMTAwNiAxOC42MTkzIDI3LjEwMDYgMjAuOTQyMkMyNy4xMDA2IDIzLjI2NSAyNy4xMDA2IDI0LjQyNjQgMjYuMzc4OSAyNS4xNDgxQzI1LjY1NzMgMjUuODY5NyAyNC40OTU5IDI1Ljg2OTcgMjIuMTczIDI1Ljg2OTdaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNOS44NTU0NyA0LjI4NDNDMTEuMjcwNyAzLjEzMjk1IDEyLjk2MDkgMi40NjM4NyAxNC43NzY0IDIuNDYzODdDMTYuNTk3NCAyLjQ2Mzg3IDE4LjI5MjYgMy4xMzcxOCAxOS43MTA1IDQuMjk1Mk0xNy40NjE1IDcuMzkxNEMxNi42NTMzIDYuODg3NCAxNS43NDEzIDYuNjAzODQgMTQuNzc2NCA2LjYwMzg0QzEzLjgxNjIgNi42MDM4NCAxMi45MDg2IDYuODg0NTYgMTIuMTAzNCA3LjM4MzgzIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNMTQuNzgzMiAxMS4wODY5SDE0Ljc5MTEiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0yMi4xNzM4IDIwLjk0MjRIMjIuMTg0OSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTE3LjI0NjEgMjAuOTQyNEgxNy4yNTcyIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNNy4zOTA2MiAyMC45NDI0SDEyLjMxODIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Support - Chat bubble with person/Priority support icon (30×30px) */
.icon-support {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjcuMTAyIDguOTcyNjJDMjcuMTAyIDEyLjIyNjcgMjQuMzQ0IDE0Ljg2NTIgMjAuOTQyNiAxNC44NjUyQzIwLjU0MjYgMTQuODY1NyAyMC4xNDM5IDE0LjgyODcgMTkuNzUxIDE0Ljc1NDlDMTkuNDY4MiAxNC43MDE4IDE5LjMyNjggMTQuNjc1NCAxOS4yMjgxIDE0LjY5MDRDMTkuMTI5NCAxNC43MDU0IDE4Ljk4OTUgMTQuNzc5OCAxOC43MDk3IDE0LjkyODZDMTcuOTE4MyAxNS4zNDk0IDE2Ljk5NTUgMTUuNDk4MSAxNi4xMDgxIDE1LjMzMzFDMTYuNDQ1NCAxNC45MTgyIDE2LjY3NTcgMTQuNDIwNCAxNi43Nzc0IDEzLjg4NjdDMTYuODM5IDEzLjU2MDMgMTYuNjg2NSAxMy4yNDMyIDE2LjQ1NzggMTMuMDExMUMxNS40MTk2IDExLjk1NjggMTQuNzgzMiAxMC41MzYxIDE0Ljc4MzIgOC45NzI2MkMxNC43ODMyIDUuNzE4NSAxNy41NDExIDMuMDgwMDggMjAuOTQyNiAzLjA4MDA4QzI0LjM0NCAzLjA4MDA4IDI3LjEwMiA1LjcxODUgMjcuMTAyIDguOTcyNjJaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTE5LjA4NCA5LjIzOTI2SDE5LjA5NE0yMi43Nzk2IDkuMjM5MjZIMjIuNzg5NiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTkuMjQwNTggMjYuNDg2Mkg1LjgxMTM2QzUuNDEzMTEgMjYuNDg2MiA1LjAxMzE1IDI2LjQzMDEgNC42NDczNSAyNi4yNzNDMy40NTY2IDI1Ljc2MTQgMi44NTI0NiAyNS4wODU4IDIuNTcwOTEgMjQuNjYzMUMyLjQxMDcxIDI0LjQyMjggMi40MzM1MyAyNC4xMTY0IDIuNjA3MzQgMjMuODg1NkMzLjk4NjkzIDIyLjA1MzEgNy4xOTE0MyAyMC45NDY0IDkuMjQ2NDQgMjAuOTQ2M0MxMS4zMDE1IDIwLjk0NjQgMTQuNTAwMSAyMi4wNTMxIDE1Ljg3OTcgMjMuODg1NkMxNi4wNTM1IDI0LjExNjQgMTYuMDc2MyAyNC40MjI4IDE1LjkxNjIgMjQuNjYzMUMxNS42MzQ2IDI1LjA4NTggMTUuMDMwNCAyNS43NjE0IDEzLjgzOTcgMjYuMjczQzEzLjQ3MzggMjYuNDMwMSAxMy4wNzQgMjYuNDg2MiAxMi42NzU3IDI2LjQ4NjJIOS4yNDA1OFoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xMi42Njg0IDE0LjUyM0MxMi42Njg0IDE2LjQwOTQgMTEuMTM1OCAxNy45Mzg3IDkuMjQ1MzQgMTcuOTM4N0M3LjM1NDgzIDE3LjkzODcgNS44MjIyNyAxNi40MDk0IDUuODIyMjcgMTQuNTIzQzUuODIyMjcgMTIuNjM2NiA3LjM1NDgzIDExLjEwNzQgOS4yNDUzNCAxMS4xMDc0QzExLjEzNTggMTEuMTA3NCAxMi42Njg0IDEyLjYzNjYgMTIuNjY4NCAxNC41MjNaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjcuMTAyIDguOTcyNjJDMjcuMTAyIDEyLjIyNjcgMjQuMzQ0IDE0Ljg2NTIgMjAuOTQyNiAxNC44NjUyQzIwLjU0MjYgMTQuODY1NyAyMC4xNDM5IDE0LjgyODcgMTkuNzUxIDE0Ljc1NDlDMTkuNDY4MiAxNC43MDE4IDE5LjMyNjggMTQuNjc1NCAxOS4yMjgxIDE0LjY5MDRDMTkuMTI5NCAxNC43MDU0IDE4Ljk4OTUgMTQuNzc5OCAxOC43MDk3IDE0LjkyODZDMTcuOTE4MyAxNS4zNDk0IDE2Ljk5NTUgMTUuNDk4MSAxNi4xMDgxIDE1LjMzMzFDMTYuNDQ1NCAxNC45MTgyIDE2LjY3NTcgMTQuNDIwNCAxNi43Nzc0IDEzLjg4NjdDMTYuODM5IDEzLjU2MDMgMTYuNjg2NSAxMy4yNDMyIDE2LjQ1NzggMTMuMDExMUMxNS40MTk2IDExLjk1NjggMTQuNzgzMiAxMC41MzYxIDE0Ljc4MzIgOC45NzI2MkMxNC43ODMyIDUuNzE4NSAxNy41NDExIDMuMDgwMDggMjAuOTQyNiAzLjA4MDA4QzI0LjM0NCAzLjA4MDA4IDI3LjEwMiA1LjcxODUgMjcuMTAyIDguOTcyNjJaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTE5LjA4NCA5LjIzOTI2SDE5LjA5NE0yMi43Nzk2IDkuMjM5MjZIMjIuNzg5NiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTkuMjQwNTggMjYuNDg2Mkg1LjgxMTM2QzUuNDEzMTEgMjYuNDg2MiA1LjAxMzE1IDI2LjQzMDEgNC42NDczNSAyNi4yNzNDMy40NTY2IDI1Ljc2MTQgMi44NTI0NiAyNS4wODU4IDIuNTcwOTEgMjQuNjYzMUMyLjQxMDcxIDI0LjQyMjggMi40MzM1MyAyNC4xMTY0IDIuNjA3MzQgMjMuODg1NkMzLjk4NjkzIDIyLjA1MzEgNy4xOTE0MyAyMC45NDY0IDkuMjQ2NDQgMjAuOTQ2M0MxMS4zMDE1IDIwLjk0NjQgMTQuNTAwMSAyMi4wNTMxIDE1Ljg3OTcgMjMuODg1NkMxNi4wNTM1IDI0LjExNjQgMTYuMDc2MyAyNC40MjI4IDE1LjkxNjIgMjQuNjYzMUMxNS42MzQ2IDI1LjA4NTggMTUuMDMwNCAyNS43NjE0IDEzLjgzOTcgMjYuMjczQzEzLjQ3MzggMjYuNDMwMSAxMy4wNzQgMjYuNDg2MiAxMi42NzU3IDI2LjQ4NjJIOS4yNDA1OFoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xMi42Njg0IDE0LjUyM0MxMi42Njg0IDE2LjQwOTQgMTEuMTM1OCAxNy45Mzg3IDkuMjQ1MzQgMTcuOTM4N0M3LjM1NDgzIDE3LjkzODcgNS44MjIyNyAxNi40MDk0IDUuODIyMjcgMTQuNTIzQzUuODIyMjcgMTIuNjM2NiA3LjM1NDgzIDExLjEwNzQgOS4yNDUzNCAxMS4xMDc0QzExLjEzNTggMTEuMTA3NCAxMi42Njg0IDEyLjYzNjYgMTIuNjY4NCAxNC41MjNaIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Money with slash - No commission/Zero fees icon (18×18px) */
.icon-money-slash {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMi4yNSAyLjI1TDE1Ljc1IDE1Ljc1IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik03LjY3NDIxIDcuNjc0MzJDNy4zMzQ4OCA4LjAxMzYyIDcuMTI1IDguNDgyMzcgNy4xMjUgOS4wMDAxN0M3LjEyNSAxMC4wMzU3IDcuOTY0NDYgMTAuODc1MiA4Ljk5OTk4IDEwLjg3NTJDOS41MTc3OCAxMC44NzUyIDkuOTg2NTQgMTAuNjY1MyAxMC4zMjU4IDEwLjMyNTkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTE2LjI0MjUgMTMuMjQyNUMxNi40MDI0IDEzLjAzNDEgMTYuNSAxMi43ODM5IDE2LjUgMTIuNTExN1Y1LjE5NTI5QzE2LjUgNC43NjkxNyAxNi4yNTY3IDQuMzgzMzkgMTUuODQ5NyA0LjI1NzI0QzE1LjE0MjcgNC4wMzgxNiAxMy44NTk1IDMuNzUgMTIgMy43NUMxMC4wMTUxIDMuNzUgOC44NzA3IDQuMTcwMjQgNy4zNDM0MSA0LjM0MzQyTTEzLjY2NDYgMTMuNjY0NkMxMy4xNzM1IDEzLjYxMzkgMTIuNjE4NiAxMy41ODIgMTIgMTMuNTgyQzguNDM2ODMgMTMuNTgyIDcuNTgyMiAxNC45MzYzIDIuMzU4NiAxMy43ODQ0QzEuODU0NDkgMTMuNjczMiAxLjUgMTMuMjE5OSAxLjUgMTIuNzAzNlY1LjE5MDg3QzEuNSA0LjQ1ODk4IDIuMTkwNTkgMy45MjUyNSAyLjkwODQ4IDQuMDY3NzFDMy40MTE5NiA0LjE2NzYyIDMuODcyMzEgNC4yNDI3IDQuMjk3MTMgNC4yOTcxMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMS41MDAzNyAxMC44NzIxQzMuMTU3MjIgMTAuODcyMSA0LjUwMDM3IDEyLjIxNTIgNC41MDAzNyAxMy44NzIxTTE2LjUgNy4xMDE3NEMxNS4xOTkxIDcuMTAxNzQgMTMuODc1NCA1LjY1NDczIDEzLjg3NTQgNC4xMjVNMS41IDYuNzVDMi45MTkwNSA2Ljc1IDQuMTk4NiA1LjYyNTM2IDQuNDI4MjkgNC40MjgyOU0xNC43NjAzIDExLjc2MDNDMTUuMjY0MiAxMS40Mzc0IDE1Ljg3NzkgMTEuMjUgMTYuNSAxMS4yNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMi4yNSAyLjI1TDE1Ljc1IDE1Ljc1IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik03LjY3NDIxIDcuNjc0MzJDNy4zMzQ4OCA4LjAxMzYyIDcuMTI1IDguNDgyMzcgNy4xMjUgOS4wMDAxN0M3LjEyNSAxMC4wMzU3IDcuOTY0NDYgMTAuODc1MiA4Ljk5OTk4IDEwLjg3NTJDOS41MTc3OCAxMC44NzUyIDkuOTg2NTQgMTAuNjY1MyAxMC4zMjU4IDEwLjMyNTkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTE2LjI0MjUgMTMuMjQyNUMxNi40MDI0IDEzLjAzNDEgMTYuNSAxMi43ODM5IDE2LjUgMTIuNTExN1Y1LjE5NTI5QzE2LjUgNC43NjkxNyAxNi4yNTY3IDQuMzgzMzkgMTUuODQ5NyA0LjI1NzI0QzE1LjE0MjcgNC4wMzgxNiAxMy44NTk1IDMuNzUgMTIgMy43NUMxMC4wMTUxIDMuNzUgOC44NzA3IDQuMTcwMjQgNy4zNDM0MSA0LjM0MzQyTTEzLjY2NDYgMTMuNjY0NkMxMy4xNzM1IDEzLjYxMzkgMTIuNjE4NiAxMy41ODIgMTIgMTMuNTgyQzguNDM2ODMgMTMuNTgyIDcuNTgyMiAxNC45MzYzIDIuMzU4NiAxMy43ODQ0QzEuODU0NDkgMTMuNjczMiAxLjUgMTMuMjE5OSAxLjUgMTIuNzAzNlY1LjE5MDg3QzEuNSA0LjQ1ODk4IDIuMTkwNTkgMy45MjUyNSAyLjkwODQ4IDQuMDY3NzFDMy40MTE5NiA0LjE2NzYyIDMuODcyMzEgNC4yNDI3IDQuMjk3MTMgNC4yOTcxMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMS41MDAzNyAxMC44NzIxQzMuMTU3MjIgMTAuODcyMSA0LjUwMDM3IDEyLjIxNTIgNC41MDAzNyAxMy44NzIxTTE2LjUgNy4xMDE3NEMxNS4xOTkxIDcuMTAxNzQgMTMuODc1NCA1LjY1NDczIDEzLjg3NTQgNC4xMjVNMS41IDYuNzVDMi45MTkwNSA2Ljc1IDQuMTk4NiA1LjYyNTM2IDQuNDI4MjkgNC40MjgyOU0xNC43NjAzIDExLjc2MDNDMTUuMjY0MiAxMS40Mzc0IDE1Ljg3NzkgMTEuMjUgMTYuNSAxMS4yNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Headphones - Support/Customer service icon (14×14px) */
.icon-headphones {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOS45MTYwMiA2LjMwMjYzQzkuOTE2MDIgNi4xMDA5NyA5LjkxNjAyIDYuMDAwMTcgOS45NDYzNSA1LjkxMDMzQzEwLjAzNDUgNS42NDkyNiAxMC4yNjcxIDUuNTQ3OTQgMTAuNSA1LjQ0MTg1QzEwLjc2MTggNS4zMjI1OCAxMC44OTI3IDUuMjYyOTQgMTEuMDIyNSA1LjI1MjQ1QzExLjE2OTggNS4yNDA1NCAxMS4zMTczIDUuMjcyMjcgMTEuNDQzMiA1LjM0MjkyQzExLjYxMDEgNS40MzY1NyAxMS43MjY0IDUuNjE0NTQgMTEuODQ1NiA1Ljc1OTI2QzEyLjM5NTkgNi40Mjc2MyAxMi42NzEgNi43NjE4OCAxMi43NzE3IDcuMTMwNDNDMTIuODUzIDcuNDI3ODIgMTIuODUzIDcuNzM4ODUgMTIuNzcxNyA4LjAzNjIzQzEyLjYyNDkgOC41NzM3NyAxMi4xNjEgOS4wMjQ0IDExLjgxNzYgOS40NDE0OEMxMS42NDE5IDkuNjU0ODEgMTEuNTU0MSA5Ljc2MTUgMTEuNDQzMiA5LjgyMzc0QzExLjMxNzMgOS44OTQzOCAxMS4xNjk4IDkuOTI2MTIgMTEuMDIyNSA5LjkxNDIyQzEwLjg5MjcgOS45MDM3MiAxMC43NjE4IDkuODQ0MSAxMC41IDkuNzI0ODFDMTAuMjY3MSA5LjYxODcgMTAuMDM0NSA5LjUxNzQzIDkuOTQ2MzUgOS4yNTYzM0M5LjkxNjAyIDkuMTY2NSA5LjkxNjAyIDkuMDY1NyA5LjkxNjAyIDguODY0MDRWNi4zMDI2M1oiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KICA8cGF0aCBkPSJNNC4wODI2OCA2LjMwMjY5QzQuMDgyNjggNi4wNDg4MiA0LjA3NTU1IDUuODIwNjIgMy44NzAzIDUuNjQyMTJDMy43OTU2NCA1LjU3NzE5IDMuNjk2NjYgNS41MzIxMSAzLjQ5ODcxIDUuNDQxOTVDMy4yMzY4NSA1LjMyMjY3IDMuMTA1OTMgNS4yNjMwNCAyLjk3NjE5IDUuMjUyNTVDMi41ODY5NiA1LjIyMTA3IDIuMzc3NTUgNS40ODY3MyAyLjE1MzA5IDUuNzU5MzZDMS42MDI3OSA2LjQyNzc1IDEuMzI3NjMgNi43NjE5NCAxLjIyNjk1IDcuMTMwNDlDMS4xNDU3IDcuNDI3OTQgMS4xNDU3IDcuNzM4OTcgMS4yMjY5NSA4LjAzNjM1QzEuMzczOCA4LjU3Mzg5IDEuODM3NzQgOS4wMjQ0NiAyLjE4MTE0IDkuNDQxNkMyLjM5NzYgOS43MDQ1MSAyLjYwNDM4IDkuOTQ0MzggMi45NzYxOSA5LjkxNDM0QzMuMTA1OTMgOS45MDM4NCAzLjIzNjg1IDkuODQ0MTYgMy40OTg3MSA5LjcyNDkzQzMuNjk2NjYgOS42MzQ3NCAzLjc5NTY0IDkuNTg5NjUgMy44NzAzIDkuNTI0NzNDNC4wNzU1NSA5LjM0NjIzIDQuMDgyNjggOS4xMTgwOSA0LjA4MjY4IDguODY0MTZWNi4zMDI2OVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KICA8cGF0aCBkPSJNMi45MTYwMiA1LjI1QzIuOTE2MDIgMy4zMTcgNC43NDQxOSAxLjc1IDYuOTk5MzUgMS43NUM5LjI1NDUyIDEuNzUgMTEuMDgyNyAzLjMxNyAxMS4wODI3IDUuMjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTEuMDg0IDkuOTE2NjNWMTAuMzgzM0MxMS4wODQgMTEuNDE0MiAxMC4wMzkzIDEyLjI1IDguNzUwNjUgMTIuMjVINy41ODM5OCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOS45MTYwMiA2LjMwMjYzQzkuOTE2MDIgNi4xMDA5NyA5LjkxNjAyIDYuMDAwMTcgOS45NDYzNSA1LjkxMDMzQzEwLjAzNDUgNS42NDkyNiAxMC4yNjcxIDUuNTQ3OTQgMTAuNSA1LjQ0MTg1QzEwLjc2MTggNS4zMjI1OCAxMC44OTI3IDUuMjYyOTQgMTEuMDIyNSA1LjI1MjQ1QzExLjE2OTggNS4yNDA1NCAxMS4zMTczIDUuMjcyMjcgMTEuNDQzMiA1LjM0MjkyQzExLjYxMDEgNS40MzY1NyAxMS43MjY0IDUuNjE0NTQgMTEuODQ1NiA1Ljc1OTI2QzEyLjM5NTkgNi40Mjc2MyAxMi42NzEgNi43NjE4OCAxMi43NzE3IDcuMTMwNDNDMTIuODUzIDcuNDI3ODIgMTIuODUzIDcuNzM4ODUgMTIuNzcxNyA4LjAzNjIzQzEyLjYyNDkgOC41NzM3NyAxMi4xNjEgOS4wMjQ0IDExLjgxNzYgOS40NDE0OEMxMS42NDE5IDkuNjU0ODEgMTEuNTU0MSA5Ljc2MTUgMTEuNDQzMiA5LjgyMzc0QzExLjMxNzMgOS44OTQzOCAxMS4xNjk4IDkuOTI2MTIgMTEuMDIyNSA5LjkxNDIyQzEwLjg5MjcgOS45MDM3MiAxMC43NjE4IDkuODQ0MSAxMC41IDkuNzI0ODFDMTAuMjY3MSA5LjYxODcgMTAuMDM0NSA5LjUxNzQzIDkuOTQ2MzUgOS4yNTYzM0M5LjkxNjAyIDkuMTY2NSA5LjkxNjAyIDkuMDY1NyA5LjkxNjAyIDguODY0MDRWNi4zMDI2M1oiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KICA8cGF0aCBkPSJNNC4wODI2OCA2LjMwMjY5QzQuMDgyNjggNi4wNDg4MiA0LjA3NTU1IDUuODIwNjIgMy44NzAzIDUuNjQyMTJDMy43OTU2NCA1LjU3NzE5IDMuNjk2NjYgNS41MzIxMSAzLjQ5ODcxIDUuNDQxOTVDMy4yMzY4NSA1LjMyMjY3IDMuMTA1OTMgNS4yNjMwNCAyLjk3NjE5IDUuMjUyNTVDMi41ODY5NiA1LjIyMTA3IDIuMzc3NTUgNS40ODY3MyAyLjE1MzA5IDUuNzU5MzZDMS42MDI3OSA2LjQyNzc1IDEuMzI3NjMgNi43NjE5NCAxLjIyNjk1IDcuMTMwNDlDMS4xNDU3IDcuNDI3OTQgMS4xNDU3IDcuNzM4OTcgMS4yMjY5NSA4LjAzNjM1QzEuMzczOCA4LjU3Mzg5IDEuODM3NzQgOS4wMjQ0NiAyLjE4MTE0IDkuNDQxNkMyLjM5NzYgOS43MDQ1MSAyLjYwNDM4IDkuOTQ0MzggMi45NzYxOSA5LjkxNDM0QzMuMTA1OTMgOS45MDM4NCAzLjIzNjg1IDkuODQ0MTYgMy40OTg3MSA5LjcyNDkzQzMuNjk2NjYgOS42MzQ3NCAzLjc5NTY0IDkuNTg5NjUgMy44NzAzIDkuNTI0NzNDNC4wNzU1NSA5LjM0NjIzIDQuMDgyNjggOS4xMTgwOSA0LjA4MjY4IDguODY0MTZWNi4zMDI2OVoiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiLz4KICA8cGF0aCBkPSJNMi45MTYwMiA1LjI1QzIuOTE2MDIgMy4zMTcgNC43NDQxOSAxLjc1IDYuOTk5MzUgMS43NUM5LjI1NDUyIDEuNzUgMTEuMDgyNyAzLjMxNyAxMS4wODI3IDUuMjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTEuMDg0IDkuOTE2NjNWMTAuMzgzM0MxMS4wODQgMTEuNDE0MiAxMC4wMzkzIDEyLjI1IDguNzUwNjUgMTIuMjVINy41ODM5OCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Link/Chain - URL/External link icon (16×16px) */
.icon-link {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNi4wOTQyOSA3LjEyNzMyTDYuMjMyMjQgNi45ODkzOUM3LjU1MTM2IDUuNjcwMiA5LjY5MDE2IDUuNjcwMiAxMS4wMDkzIDYuOTg5MzlDMTIuMzI4NSA4LjMwODUyIDEyLjMyODUgMTAuNDQ3MyAxMS4wMDkzIDExLjc2NjVMOS4wOTg1IDEzLjY3NzNDNy43NzkzNiAxNC45OTY1IDUuNjQwNTYgMTQuOTk2NSA0LjMyMTQgMTMuNjc3M0MzLjAwMjI0IDEyLjM1ODEgMy4wMDIyNCAxMC4yMTkzIDQuMzIxNCA4LjkwMDE5TDQuNjMwOTYgOC41OTA2NiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNMTEuMzY3NyA3LjQwOTAxTDExLjY3NzMgNy4wOTk0N0MxMi45OTY1IDUuNzgwMzEgMTIuOTk2NSAzLjY0MTUzIDExLjY3NzMgMi4zMjIzN0MxMC4zNTgxIDEuMDAzMjIgOC4yMTkzMyAxLjAwMzIyIDYuOTAwMiAyLjMyMjM3TDQuOTg5MzYgNC4yMzMyMUMzLjY3MDIxIDUuNTUyMzcgMy42NzAyMSA3LjY5MTE0IDQuOTg5MzYgOS4wMTAyN0M2LjMwODUyIDEwLjMyOTUgOC40NDczMyAxMC4zMjk1IDkuNzY2NDcgOS4wMTAyN0w5LjkwNDQgOC44NzIzNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNi4wOTQyOSA3LjEyNzMyTDYuMjMyMjQgNi45ODkzOUM3LjU1MTM2IDUuNjcwMiA5LjY5MDE2IDUuNjcwMiAxMS4wMDkzIDYuOTg5MzlDMTIuMzI4NSA4LjMwODUyIDEyLjMyODUgMTAuNDQ3MyAxMS4wMDkzIDExLjc2NjVMOS4wOTg1IDEzLjY3NzNDNy43NzkzNiAxNC45OTY1IDUuNjQwNTYgMTQuOTk2NSA0LjMyMTQgMTMuNjc3M0MzLjAwMjI0IDEyLjM1ODEgMy4wMDIyNCAxMC4yMTkzIDQuMzIxNCA4LjkwMDE5TDQuNjMwOTYgOC41OTA2NiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNMTEuMzY3NyA3LjQwOTAxTDExLjY3NzMgNy4wOTk0N0MxMi45OTY1IDUuNzgwMzEgMTIuOTk2NSAzLjY0MTUzIDExLjY3NzMgMi4zMjIzN0MxMC4zNTgxIDEuMDAzMjIgOC4yMTkzMyAxLjAwMzIyIDYuOTAwMiAyLjMyMjM3TDQuOTg5MzYgNC4yMzMyMUMzLjY3MDIxIDUuNTUyMzcgMy42NzAyMSA3LjY5MTE0IDQuOTg5MzYgOS4wMTAyN0M2LjMwODUyIDEwLjMyOTUgOC40NDczMyAxMC4zMjk1IDkuNzY2NDcgOS4wMTAyN0w5LjkwNDQgOC44NzIzNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Key icon - Licence keys, authentication (17×17px) */
.icon-key {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTAuNSA2LjVMMTIuNSA0LjVNMTMuNSAzLjVMMTIuNSA0LjVNMTIuNSA0LjVMMTQuNSA2LjVNNy4wNjA2NiA5LjkzOTM0QzYuNDc0ODcgOS4zNTM1NSA1LjY3NTYyIDkuMDI1MTIgNC44NDMxNCA5LjAyNTEyQzQuMDEwNjYgOS4wMjUxMiAzLjIxMTQxIDkuMzUzNTUgMi42MjU2MiA5LjkzOTM0QzIuMDM5ODQgMTAuNTI1MSAxLjcxMTQxIDExLjMyNDQgMS43MTE0MSAxMi4xNTY5QzEuNzExNDEgMTIuOTg5MyAyLjAzOTg0IDEzLjc4ODYgMi42MjU2MiAxNC4zNzQ0QzMuMjExNDEgMTQuOTYwMiA0LjAxMDY2IDE1LjI4ODYgNC44NDMxNCAxNS4yODg2QzUuNjc1NjIgMTUuMjg4NiA2LjQ3NDg3IDE0Ljk2MDIgNy4wNjA2NiAxNC4zNzQ0QzcuNjQ2NDUgMTMuNzg4NiA3Ljk3NDg4IDEyLjk4OTMgNy45NzQ4OCAxMi4xNTY5QzcuOTc0ODggMTEuMzI0NCA3LjY0NjQ1IDEwLjUyNTEgNy4wNjA2NiA5LjkzOTM0Wk03LjA2MDY2IDkuOTM5MzRMMTAuNSA2LjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTAuNSA2LjVMMTIuNSA0LjVNMTMuNSAzLjVMMTIuNSA0LjVNMTIuNSA0LjVMMTQuNSA2LjVNNy4wNjA2NiA5LjkzOTM0QzYuNDc0ODcgOS4zNTM1NSA1LjY3NTYyIDkuMDI1MTIgNC44NDMxNCA5LjAyNTEyQzQuMDEwNjYgOS4wMjUxMiAzLjIxMTQxIDkuMzUzNTUgMi42MjU2MiA5LjkzOTM0QzIuMDM5ODQgMTAuNTI1MSAxLjcxMTQxIDExLjMyNDQgMS43MTE0MSAxMi4xNTY5QzEuNzExNDEgMTIuOTg5MyAyLjAzOTg0IDEzLjc4ODYgMi42MjU2MiAxNC4zNzQ0QzMuMjExNDEgMTQuOTYwMiA0LjAxMDY2IDE1LjI4ODYgNC44NDMxNCAxNS4yODg2QzUuNjc1NjIgMTUuMjg4NiA2LjQ3NDg3IDE0Ljk2MDIgNy4wNjA2NiAxNC4zNzQ0QzcuNjQ2NDUgMTMuNzg4NiA3Ljk3NDg4IDEyLjk4OTMgNy45NzQ4OCAxMi4xNTY5QzcuOTc0ODggMTEuMzI0NCA3LjY0NjQ1IDEwLjUyNTEgNy4wNjA2NiA5LjkzOTM0Wk03LjA2MDY2IDkuOTM5MzRMMTAuNSA2LjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Copy icon - Clipboard copy action (17×17px) */
.icon-copy {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3IiBmaWxsPSJub25lIj4KICA8cmVjdCB4PSI2IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSI5IiByeD0iMiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41Ii8+CiAgPHBhdGggZD0iTTExIDZWNEMxMSAyLjg5NTQzIDEwLjEwNDYgMiA5IDJINEMyLjg5NTQzIDIgMiAyLjg5NTQzIDIgNFY5QzIgMTAuMTA0NiAyLjg5NTQzIDExIDQgMTFINiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3IiBmaWxsPSJub25lIj4KICA8cmVjdCB4PSI2IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSI5IiByeD0iMiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41Ii8+CiAgPHBhdGggZD0iTTExIDZWNEMxMSAyLjg5NTQzIDEwLjEwNDYgMiA5IDJINEMyLjg5NTQzIDIgMiAyLjg5NTQzIDIgNFY5QzIgMTAuMTA0NiAyLjg5NTQzIDExIDQgMTFINiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Check icon - Success confirmation (17×17px) */
.icon-check {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMy41IDlMNi41IDEyTDEzLjUgNSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMy41IDlMNi41IDEyTDEzLjUgNSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Info icon - Information notices, tips (17×17px) */
.icon-info {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3IiBmaWxsPSJub25lIj4KICA8Y2lyY2xlIGN4PSI4LjUiIGN5PSI4LjUiIHI9IjciIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIvPgogIDxwYXRoIGQ9Ik04LjUgMTJWOCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8Y2lyY2xlIGN4PSI4LjUiIGN5PSI1LjUiIHI9IjEiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L3N2Zz4=');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3IiBmaWxsPSJub25lIj4KICA8Y2lyY2xlIGN4PSI4LjUiIGN5PSI4LjUiIHI9IjciIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIvPgogIDxwYXRoIGQ9Ik04LjUgMTJWOCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8Y2lyY2xlIGN4PSI4LjUiIGN5PSI1LjUiIHI9IjEiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L3N2Zz4=');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Close icon - Close buttons, dismiss actions (20×20px) */
.icon-close {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTUgNUw1LjAwMDY4IDE0Ljk5OTNNMTQuOTk5MyAxNUw1IDUuMDAwNzEiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTUgNUw1LjAwMDY4IDE0Ljk5OTNNMTQuOTk5MyAxNUw1IDUuMDAwNzEiIHN0cm9rZT0iIzgxODE4QyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Gift icon - Giveaway badges, prizes (17×17px) */
.icon-gift {
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3IiBmaWxsPSJub25lIj4KICA8cmVjdCB4PSIyIiB5PSI2IiB3aWR0aD0iMTMiIGhlaWdodD0iMyIgcng9IjEiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIvPgogIDxwYXRoIGQ9Ik0zIDlWMTRDMyAxNC41NTIzIDMuNDQ3NzIgMTUgNCAxNUgxM0MxMy41NTIzIDE1IDE0IDE0LjU1MjMgMTQgMTRWOSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41Ii8+CiAgPHBhdGggZD0iTTguNSA2VjE1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICA8cGF0aCBkPSJNOC41IDZDOC41IDYgNi41IDYgNS41IDVDNC41IDQgNS41IDIgNyAyQzguNSAyIDguNSA0IDguNSA2WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTguNSA2QzguNSA2IDEwLjUgNiAxMS41IDVDMTIuNSA0IDExLjUgMiAxMCAyQzguNSAyIDguNSA0IDguNSA2WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==');
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3IiBmaWxsPSJub25lIj4KICA8cmVjdCB4PSIyIiB5PSI2IiB3aWR0aD0iMTMiIGhlaWdodD0iMyIgcng9IjEiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIvPgogIDxwYXRoIGQ9Ik0zIDlWMTRDMyAxNC41NTIzIDMuNDQ3NzIgMTUgNCAxNUgxM0MxMy41NTIzIDE1IDE0IDE0LjU1MjMgMTQgMTRWOSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41Ii8+CiAgPHBhdGggZD0iTTguNSA2VjE1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICA8cGF0aCBkPSJNOC41IDZDOC41IDYgNi41IDYgNS41IDVDNC41IDQgNS41IDIgNyAyQzguNSAyIDguNSA0IDguNSA2WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPHBhdGggZD0iTTguNSA2QzguNSA2IDEwLjUgNiAxMS41IDVDMTIuNSA0IDExLjUgMiAxMCAyQzguNSAyIDguNSA0IDguNSA2WiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* ========================================
SECTION SYSTEM - EXMTweaks Design
======================================== */
/* === BASE SECTION === */
.section{
position: relative;
width: 100%;
}
main{
overflow: hidden;
}
/* Global paragraph styling for all sections (16px) */
.section p,
.section-carousel p,
.section-footer p {
/*@apply text-base; */ /* 16px */
}
/* === SPACING VARIANTS === */
/* Small spacing: 40px mobile, 60px tablet, 80px desktop */
.section-spacing-sm{
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
@media (min-width: 768px){
.section-spacing-sm{
padding-top: 60px;
padding-bottom: 60px;
}
}
@media (min-width: 1024px){
.section-spacing-sm{
padding-top: 5rem;
padding-bottom: 5rem;
}
}
/* Medium spacing: 60px mobile, 80px tablet, 120px desktop */
.section-spacing-md{
padding-top: 60px;
padding-bottom: 60px;
}
@media (min-width: 768px){
.section-spacing-md{
padding-top: 5rem;
padding-bottom: 5rem;
}
}
@media (min-width: 1024px){
.section-spacing-md{
padding-top: 120px;
padding-bottom: 120px;
}
}
/* Large spacing: 80px mobile, 120px tablet, 160px desktop */
.section-spacing-lg{
padding-top: 5rem;
padding-bottom: 5rem;
}
@media (min-width: 768px){
.section-spacing-lg{
padding-top: 120px;
padding-bottom: 120px;
}
}
@media (min-width: 1024px){
.section-spacing-lg{
padding-top: 160px;
padding-bottom: 160px;
}
}
/* Extra large spacing: 100px mobile, 140px tablet, 200px desktop */
.section-spacing-xl{
padding-top: 100px;
padding-bottom: 100px;
}
@media (min-width: 768px){
.section-spacing-xl{
padding-top: 140px;
padding-bottom: 140px;
}
}
@media (min-width: 1024px){
.section-spacing-xl{
padding-top: 200px;
padding-bottom: 200px;
}
}
/* === CONTAINER VARIANTS === */
/* Standard container - max-width with centered content */
.section-container{
margin-left: auto;
margin-right: auto;
max-width: 1536px;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media (min-width: 640px){
.section-container{
padding-left: 3rem;
padding-right: 3rem;
}
}
/* Extra padding when borders are visible (768px+) for sections with .hide-mobile borders */
@media (min-width: 768px) {
.section:has(.section-border-simple.hide-mobile) .section-container,
.section:has(.section-hero-border.hide-mobile) .section-container {
padding-left: 4.5rem; /* 72px */
padding-right: 4.5rem;
}
}
/* Hero container - extra padding to separate content from borders */
.section-hero .section-container{
padding-left: 4rem;
padding-right: 4rem;
}
@media (min-width: 640px){
.section-hero .section-container{
padding-left: 5rem;
padding-right: 5rem;
}
}
@media (min-width: 1024px){
.section-hero .section-container{
padding-left: 6rem;
padding-right: 6rem;
}
}
/* Full width - no max-width constraint */
.section-full{
width: 100%;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media (min-width: 640px){
.section-full{
padding-left: 3rem;
padding-right: 3rem;
}
}
/* No padding - for full bleed content */
.section-no-padding{
padding-left: 0px;
padding-right: 0px;
}
/* === BORDER SYSTEM === */
/* --- For INLINE containers (no absolute positioning) --- */
/* Use real border property - simpler, no pseudo-element conflicts */
/* Top border only */
.section-border-top {
border-top: 1px solid #1A1A24;
}
/* Bottom border only */
.section-border-bottom {
border-bottom: 1px solid #1A1A24;
}
/* Side borders only (left + right) */
.section-border-sides {
border-left: 1px solid #1A1A24;
border-right: 1px solid #1A1A24;
}
/* Full border (all sides) */
.section-border-full{
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(26 26 36 / var(--tw-border-opacity, 1));
}
/* --- Legacy Border System (keeping for existing sections) --- */
/* Simple borders on sides - no decorations */
.section-border-simple{
pointer-events: none;
position: absolute;
top: 0px;
bottom: 0px;
left: 1.5rem; /* 24px - matches px-6 */
right: 1.5rem;
}
.section-border-simple::before,
.section-border-simple::after {
content: '';
position: absolute;
top: 0px;
bottom: 0px;
width: 1px;
--tw-bg-opacity: 1;
background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
}
.section-border-simple::before{
left: 0px;
}
.section-border-simple::after{
right: 0px;
}
/* Responsive positioning to match container padding */
@media (min-width: 640px) {
.section-border-simple {
left: 3rem; /* 48px - matches sm:px-12 */
right: 3rem;
}
}
/* Max-width constraint to match section-container */
@media (min-width: 1536px) {
.section-border-simple {
left: calc(50% - 768px + 3rem);
right: calc(50% - 768px + 3rem);
}
}
/* Borders on sides with square endpoints */
.section-border{
position: relative;
}
.section-border::before,
.section-border::after {
content: '';
position: absolute;
top: 0px;
bottom: 0px;
width: 1px;
--tw-bg-opacity: 1;
background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
}
.section-border::before{
left: 0px;
}
.section-border::after{
right: 0px;
}
/* Square decorative endpoints on borders */
.section-border-squares::before,
.section-border-squares::after {
content: '';
position: absolute;
height: 0.25rem;
width: 0.25rem;
--tw-bg-opacity: 1;
background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
}
/* Top squares */
.section-border-squares .border-square-top-left{
position: absolute;
top: 0px;
left: 0px;
height: 0.25rem;
width: 0.25rem;
--tw-bg-opacity: 1;
background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
}
.section-border-squares .border-square-top-right{
position: absolute;
top: 0px;
right: 0px;
height: 0.25rem;
width: 0.25rem;
--tw-bg-opacity: 1;
background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
}
/* Bottom squares */
.section-border-squares .border-square-bottom-left{
position: absolute;
bottom: 0px;
left: 0px;
height: 0.25rem;
width: 0.25rem;
--tw-bg-opacity: 1;
background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
}
.section-border-squares .border-square-bottom-right{
position: absolute;
bottom: 0px;
right: 0px;
height: 0.25rem;
width: 0.25rem;
--tw-bg-opacity: 1;
background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
}
/* === HERO SECTION SPECIFIC === */
/* Hero with offset borders - extra top margin to clear header and position squares properly */
.section-hero{
position: relative;
margin-top: 3rem;
}
@media (min-width: 768px){
.section-hero{
margin-top: 3rem;
}
}
@media (min-width: 1024px){
.section-hero{
margin-top: 2.5rem;
}
}
.section-hero {
overflow: hidden; /* Prevent horizontal scroll from gradient */
}
/* Hero header background image */
.header-hero {
position: relative; /* For absolute positioned blur overlay */
background-image: url('../images/header-grafik.png');
background-size: 80% auto;
background-position: center center;
background-repeat: no-repeat;
}
/* Gradient blur overlay - reusable component for any section with position: relative */
.gradient-blur-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300%; /* Wide gradient effect - default */
height: 200%; /* Tall gradient effect - default */
max-width: none; /* Override any container constraints */
background-image: url('../images/blur-gradient.svg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.8;
z-index: 0;
pointer-events: none; /* Don't block interactions */
}
/* Size modifiers for gradient-blur-overlay */
.gradient-blur-overlay.size-sm {
width: 150%;
height: 150%;
}
.gradient-blur-overlay.size-md {
width: 200%;
height: 200%;
}
.gradient-blur-overlay.size-lg {
width: 300%;
height: 200%;
}
.gradient-blur-overlay.size-xl {
width: 400%;
height: 300%;
}
.gradient-blur-overlay.size-contained {
width: 100%;
height: 100%;
}
/* Position modifier for affiliate page - custom positioning for affiliate hero */
.gradient-blur-overlay.position-affiliate {
left: 36%;
width: 364%;
height: 86%;
}
/* Reset margins for hero elements - using flexbox gap for consistent spacing */
.section-hero h1 {
margin: 0;
}
/* Hero paragraph - Figma desktop: 21px (1.3125rem) */
/* Fluid: 16px (1rem) mobile → 21px (1.3125rem) desktop */
.section-hero p{
text-align: center;
font-weight: 400;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
font-size: clamp(1rem, 1vw + 0.5rem, 1.3125rem);
line-height: clamp(1.5rem, 1.5vw + 1rem, 1.5em);
letter-spacing: clamp(-0.02rem, -0.01vw, -0.033rem);
margin: 0; /* Reset margin - using flexbox gap instead */
max-width: 35em;
}
.section-hero p.txt-under-btn{
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
font-size: 15px;
}
.section-hero p.txt-under-btn-secondary{
margin-top: 1.25rem;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
font-size: 18px;
}
.section-hero p a{
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity, 1));
font-weight: normal;
text-decoration: underline;
}
/* Hero border wrapper must be absolute positioned to section, with container padding inset */
.section-hero-border{
pointer-events: none;
position: absolute;
top: 0;
bottom: 0;
left: 1.5rem; /* 24px - matches px-6 */
right: 1.5rem;
}
/* Responsive border positioning to match container padding */
@media (min-width: 640px) {
.section-hero-border {
left: 3rem; /* 48px - matches sm:px-12 */
right: 3rem;
}
}
/* Max-width constraint to match section-container */
@media (min-width: 1536px) {
.section-hero-border {
left: calc(50% - 768px + 3rem); /* Center with max-width-2xl (1536px / 2 = 768px) + padding */
right: calc(50% - 768px + 3rem);
}
}
/* Hero borders - with offset from top to show squares above navigation */
.section-hero-border::before,
.section-hero-border::after {
content: '';
position: absolute;
--tw-bg-opacity: 1;
background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
width: 1px;
top: 100px; /* 100px offset to show squares below navigation */
bottom: 0;
}
.section-hero-border::before {
left: 0;
}
.section-hero-border::after {
right: 0;
}
/* Hero border squares at TOP - 7px x 7px (nepárne pre centrovanie), hollow (border only), centered on 1px line */
.hero-square-top-left,
.hero-square-top-right{
position: absolute;
display: block;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(26 26 36 / var(--tw-border-opacity, 1));
width: 7px;
height: 7px;
background: #0A0A14; /* Match section background to hide line inside square */
top: 96.5px; /* 100px border offset - 3.5px (half of square) = centered on border start */
z-index: 2;
}
.hero-square-top-left {
left: -3.5px; /* Half of width to center on left border */
}
.hero-square-top-right {
right: -3.5px; /* Half of width to center on right border */
}
/* === OVERFLOW SYSTEM === */
/* For content that needs to break out of container (like hero image) */
.section-overflow-container{
position: relative;
}
/* Content that overflows right */
.overflow-right{
position: absolute;
right: 0px;
/* Allow content to extend beyond container on desktop */
}
@media (min-width: 1024px){
.overflow-right{
right: -10%;
}
}
@media (min-width: 1280px){
.overflow-right{
right: -15%;
}
}
@media (min-width: 1536px){
.overflow-right{
right: -20%;
}
}
/* Content that overflows left */
.overflow-left{
position: absolute;
left: 0px;
}
@media (min-width: 1024px){
.overflow-left{
left: -10%;
}
}
@media (min-width: 1280px){
.overflow-left{
left: -15%;
}
}
@media (min-width: 1536px){
.overflow-left{
left: -20%;
}
}
/* === GRID LAYOUTS === */
/* Standard 12-column grid for sections */
.section-grid{
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 1024px){
.section-grid{
gap: 2rem;
}
}
/* 2-column layout (features, benefits) */
.section-grid-2{
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 768px){
.section-grid-2{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px){
.section-grid-2{
gap: 2rem;
}
}
/* 3-column layout (features cards) */
.section-grid-3{
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 640px){
.section-grid-3{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px){
.section-grid-3{
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
}
}
/* 4-column layout (small cards, logos) */
.section-grid-4{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
@media (min-width: 768px){
.section-grid-4{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1024px){
.section-grid-4{
gap: 1.5rem;
}
}
/* === BACKGROUND VARIANTS === */
.section-bg-dark{
--tw-bg-opacity: 1;
background-color: rgb(10 10 20 / var(--tw-bg-opacity, 1));
}
.section-bg-darker{
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
}
.section-bg-darkest{
--tw-bg-opacity: 1;
background-color: rgb(10 10 20 / var(--tw-bg-opacity, 1));
}
/* === RESPONSIVE BORDER VISIBILITY === */
/* Hide borders on mobile if needed */
@media (max-width: 767px) {
/* Legacy border system */
.section-border-md-up::before,
.section-border-md-up::after {
display: none;
}
.section-hero-border.hide-mobile::before,
.section-hero-border.hide-mobile::after,
.section-hero-border.hide-mobile .hero-square-top-left,
.section-hero-border.hide-mobile .hero-square-top-right {
display: none;
}
.section-border-simple.hide-mobile::before,
.section-border-simple.hide-mobile::after {
display: none;
}
/* New individual border modifiers with .hide-mobile */
.section-border-top.hide-mobile {
border-top: none;
}
.section-border-bottom.hide-mobile {
border-bottom: none;
}
.section-border-sides.hide-mobile {
border-left: none;
border-right: none;
}
.section-border-full.hide-mobile {
border: none;
}
/* Legacy .section-border with .hide-mobile */
.section-border.hide-mobile::before,
.section-border.hide-mobile::after {
display: none;
}
/* Hide border square decorations on mobile */
.section-border-squares.hide-mobile .border-square-top-left,
.section-border-squares.hide-mobile .border-square-top-right,
.section-border-squares.hide-mobile .border-square-bottom-left,
.section-border-squares.hide-mobile .border-square-bottom-right {
display: none;
}
/* Hide carousel borders and squares on mobile */
.section-carousel-border-left.hide-mobile::before,
.section-carousel-border-left.hide-mobile::after {
display: none;
}
.section-carousel-border-left.hide-mobile .carousel-border-right-bottom {
display: none;
}
.section-carousel-border-left.hide-mobile .carousel-square-top-right,
.section-carousel-border-left.hide-mobile .carousel-square-bottom-right {
display: none;
}
}
@media (min-width: 768px) {
/* Legacy border system */
.section-border-md-up::before,
.section-border-md-up::after {
display: block;
}
.section-hero-border.hide-mobile::before,
.section-hero-border.hide-mobile::after,
.section-hero-border.hide-mobile .hero-square-top-left,
.section-hero-border.hide-mobile .hero-square-top-right {
display: block;
}
.section-border-simple.hide-mobile::before,
.section-border-simple.hide-mobile::after {
display: block;
}
/* New individual border modifiers with .hide-mobile */
.section-border-top.hide-mobile {
border-top: 1px solid #1A1A24;
}
.section-border-bottom.hide-mobile {
border-bottom: 1px solid #1A1A24;
}
.section-border-sides.hide-mobile {
border-left: 1px solid #1A1A24;
border-right: 1px solid #1A1A24;
}
.section-border-full.hide-mobile {
border: 1px solid #1A1A24;
}
/* Legacy .section-border with .hide-mobile */
.section-border.hide-mobile::before,
.section-border.hide-mobile::after {
display: block;
}
/* Show border square decorations on desktop */
.section-border-squares.hide-mobile .border-square-top-left,
.section-border-squares.hide-mobile .border-square-top-right,
.section-border-squares.hide-mobile .border-square-bottom-left,
.section-border-squares.hide-mobile .border-square-bottom-right {
display: block;
}
}
/* === FOOTER SECTION SPECIFIC === */
.section-footer{
position: relative;
}
/* Footer top border - full width dashed with custom pattern (9px dash, 9px gap) */
.border-t-dashed {
position: relative;
border-top: none;
}
.border-t-dashed::before {
content: '';
position: absolute;
top: -0.375px; /* Half of height (0.75px / 2) to center on edge */
left: 0;
right: 0;
height: 1px;
background-image: repeating-linear-gradient(
to right,
#1E1E28 0,
#1E1E28 9px,
transparent 9px,
transparent 18px
);
z-index: 1;
}
/* Footer container - extra padding like hero */
.section-footer .section-container{
padding-left: 4rem;
padding-right: 4rem;
}
@media (min-width: 640px){
.section-footer .section-container{
padding-left: 5rem;
padding-right: 5rem;
}
}
@media (min-width: 1024px){
.section-footer .section-container{
padding-left: 6rem;
padding-right: 6rem;
}
}
/* Footer column wrapper */
.footer-column{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
align-self: stretch;
padding-left: 0px;
padding-right: 0px;
}
@media (min-width: 1024px){
.footer-column{
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
/* Footer typography */
.footer-heading{
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
font-size: 0.875rem; /* 14px */
font-weight: 500;
line-height: 1.3125rem; /* 21px */
margin: 0; /* Reset margin */
}
.footer-list{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem; /* 12px - spacing between items */
}
/* Reset li default styling in footer */
.footer-list li{
margin: 0px;
list-style-type: none;
padding: 0px;
}
.footer-link{
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 400;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
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: 200ms;
}
.footer-link:hover{
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.footer-link {
font-size: 0.875rem; /* 14px */
line-height: 1.3125rem; /* 21px */
}
.footer-copyright{
margin: 0px;
--tw-text-opacity: 1;
color: rgb(79 79 85 / var(--tw-text-opacity, 1));
font-size: clamp(0.75rem, 0.5vw + 0.625rem, 0.875rem); /* 12px → 14px */
}
/* Footer social icons - 20x20px */
.footer-socials svg {
width: 20px;
height: 20px;
}
/* === CTA SECTION SPECIFIC === */
/* Higher specificity to override .section base styles */
.section.cta-section{
position: relative;
padding-top: 220px;
padding-bottom: 220px; /* 220px top/bottom */
}
/* CTA Section heading - Figma: 40px, weight 600, line-height 120% (48px) */
.cta-section h2{
text-align: center;
font-size: 3rem;
line-height: 1;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
font-weight: 600;
line-height: 120%; /* 48px */
margin: 0;
}
.cta-section h2 i {
font-style: normal !important;
background: linear-gradient(91deg, #4F46E5 0.39%, #FF2E79 99.61%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* CTA Section paragraph - Figma: 16px, weight 500, line-height 150% (24px) */
.cta-section h2 + p{
text-align: center;
font-size: 24px;
line-height: 28.8px;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
font-weight: 500;
line-height: 150%; /* 24px */
margin: 0;
max-width: 35em;
}
.cta-grid-section {
}
.cta-grid-section h4{
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* === SECTION SUBHEADING === */
/* Subheading section wrapper */
.section-subheading .wrapper{
display: flex;
justify-content: space-between;
padding-left: 1.75rem;
padding-right: 1.75rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
@media (min-width: 768px){
.section-subheading .wrapper{
padding-left: 3.5rem;
padding-right: 3.5rem;
}
}
/* Base subheading item */
.section-subheading-item{
display: flex;
align-items: center;
font-size: 14px;
line-height: 20px;
}
@media (min-width: 768px){
.section-subheading-item{
font-size: 16px;
line-height: 24px;
}
}
/* Left side (lavender) */
.section-subheading-item-left{
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.section-subheading-item-left::before,
.section-subheading-item-left::after {
content: '|';
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.section-subheading-item-left::before{
margin-right: 0.5rem;
}
.section-subheading-item-left::after{
margin-left: 0.5rem;
}
/* Right side (gray) */
.section-subheading-item-right{
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
.section-subheading-item-right::before,
.section-subheading-item-right::after {
content: '|';
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
.section-subheading-item-right::before{
margin-right: 0.5rem;
}
.section-subheading-item-right::after{
margin-left: 0.5rem;
}
/* === CAROUSEL SECTION === */
/* Carousel section with padding and decorative borders */
.section-carousel{
position: relative;
padding-top: 3rem; /* 48px */
padding-bottom: 3rem; /* 48px */
}
/* Left border - FULL HEIGHT (doesn't scroll with carousel content) */
.section-carousel-border-left::before {
content: '';
pointer-events: none;
position: absolute;
--tw-bg-opacity: 1;
background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
width: 1px;
top: 0;
bottom: 0; /* Full height */
left: 1.5rem; /* 24px - matches px-6 */
z-index: 10; /* Above carousel content */
}
/* Right border TOP segment - only padding height */
.section-carousel-border-left::after {
content: '';
pointer-events: none;
position: absolute;
--tw-bg-opacity: 1;
background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
width: 1px;
top: 0;
height: 8rem; /* Matches padding-top */
right: 1.5rem; /* 24px - matches px-6 */
z-index: 10;
}
/* Carousel border squares - ONLY on RIGHT side, at top and bottom of right border segments */
.carousel-square-top-right,
.carousel-square-bottom-right{
pointer-events: none;
position: absolute;
display: block;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(26 26 36 / var(--tw-border-opacity, 1));
width: 7px;
height: 7px;
background: #0A0A14; /* Match section background */
z-index: 11; /* Above borders */
}
/* Top right square - at END of top right border segment (at padding boundary) */
.carousel-square-top-right {
top: calc(8rem - 3.5px); /* 48px (padding) - 3.5px (half square) = centered on border end */
right: calc(1.5rem - 3.5px); /* Centered on right border */
}
/* Bottom right square - at START of bottom right border segment (at padding boundary) */
.carousel-square-bottom-right {
bottom: calc(3rem - 3.5px); /* 48px (padding) - 3.5px (half square) = centered on border start */
right: calc(1.5rem - 3.5px); /* Centered on right border */
}
/* Right border BOTTOM segment - separate element needed (can't use ::after twice) */
.carousel-border-right-bottom{
pointer-events: none;
position: absolute;
--tw-bg-opacity: 1;
background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
width: 1px;
bottom: 0;
height: 3rem; /* Matches padding-bottom */
right: 1.5rem; /* 24px - matches px-6 */
z-index: 10;
}
/* Responsive positioning to match container padding */
@media (min-width: 640px) {
.section-carousel-border-left::before {
left: 3rem; /* 48px - matches sm:px-12 */
}
.section-carousel-border-left::after {
right: 3rem;
}
.carousel-border-right-bottom {
right: 3rem;
}
.carousel-square-top-right {
right: calc(3rem - 3.5px);
}
.carousel-square-bottom-right {
right: calc(3rem - 3.5px);
}
}
/* Max-width constraint to match section-container */
@media (min-width: 1536px) {
.section-carousel-border-left::before {
left: calc(50% - 768px + 3rem);
}
.section-carousel-border-left::after {
right: calc(50% - 768px + 3rem);
}
.carousel-border-right-bottom {
right: calc(50% - 768px + 3rem);
}
.carousel-square-top-right {
right: calc(50% - 768px + 3rem - 3.5px);
}
.carousel-square-bottom-right {
right: calc(50% - 768px + 3rem - 3.5px);
}
}
/* === FEATURE SECTION WITH ICON/ILLUSTRATION === */
/* Two-column layout: text content + decorative icon/illustration
Used for: Support sections, feature highlights with visual elements
Pattern: .section-feature-with-icon > .feature-content > (.feature-text + .feature-icon) */
.section-feature-with-icon .feature-content{
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 80rem;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 3rem;
padding-top: 3rem;
padding-bottom: 3rem;
}
@media (min-width: 768px){
.section-feature-with-icon .feature-content{
flex-direction: row;
padding-top: 5rem;
padding-bottom: 5rem;
}
}
.section-feature-with-icon .feature-text{
max-width: 36rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
text-align: left;
}
@media (min-width: 768px){
.section-feature-with-icon .feature-text{
padding-left: 0px;
padding-right: 0px;
}
}
/* Adjust layout when inside section-hero to fit icon within viewport */
@media (min-width: 1024px){
.section-hero.section-feature-with-icon .feature-content{
margin-top: -10em;
}
}
@media (min-width: 1280px){
.section-hero.section-feature-with-icon .feature-content{
margin-top: -10em;
}
}
.section-hero.section-feature-with-icon .feature-content{
padding-bottom: 1.25rem;
}
@media (min-width: 1024px){
.section-hero.section-feature-with-icon .feature-content{
margin-top: -10em;
}
}
@media (min-width: 1280px){
.section-hero.section-feature-with-icon .feature-content{
padding-bottom: 10em;
}
}
.section-hero.section-feature-with-icon .feature-content {
flex-direction: column;
align-items: center;
gap: 2rem;
padding-top: 0rem;
}
/* Desktop layout - horizontal */
@media (min-width: 1024px) {
.section-hero.section-feature-with-icon .feature-content {
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
}
/* Wider text container when inside section-hero */
.section-hero.section-feature-with-icon .feature-text {
max-width: 35rem !important;
flex: 1 0 auto;
}
.section-feature-with-icon .feature-heading, .feature-heading{
text-align: left;
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 500;
}
@media (min-width: 1024px){
.section-feature-with-icon .feature-heading, .feature-heading{
font-size: 48px;
}
}
.section-feature-with-icon .feature-heading, .feature-heading{
line-height: 1.25;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px){
.section-feature-with-icon .feature-heading, .feature-heading{
line-height: 1.1;
}
}
.section-feature-with-icon .feature-heading, .feature-heading{
margin-bottom: 2rem;
max-width: 36rem;
}
.section-feature-with-icon .feature-description{
font-size: 18px;
line-height: 27px;
line-height: 1.625;
}
@media (min-width: 1024px){
.section-feature-with-icon .feature-description{
font-size: 21px;
line-height: 28px;
}
}
.section-feature-with-icon .feature-description{
margin-bottom: 1.5rem;
text-align: left;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
letter-spacing: -0.525px;
}
.section-feature-with-icon .feature-icon{
position: relative;
margin-top: -160px;
display: flex;
width: 100%;
justify-content: center;
overflow: visible;
}
@media (min-width: 768px){
.section-feature-with-icon .feature-icon{
margin-top: -3rem;
margin-bottom: -3rem;
margin-top: 0px;
justify-content: flex-end;
}
}
/* Icon visible on all devices, centered on mobile */
.section-hero.section-feature-with-icon .feature-icon{
margin-top: -4em;
}
@media (min-width: 1024px){
.section-hero.section-feature-with-icon .feature-icon{
margin-top: 4em;
}
}
.section-hero.section-feature-with-icon .feature-icon {
display: flex;
flex-shrink: 0;
max-width: 400px;
width: 100%;
margin-bottom: -2rem;
}
/* Larger icon on desktop with negative margin to bring closer to text */
@media (min-width: 1024px) {
.section-hero.section-feature-with-icon .feature-icon {
max-width: 600px;
margin-left: -8rem;
margin-top: 0;
margin-bottom: 0;
}
}
/* Larger icon with glow effect when inside section-hero */
.section-hero.section-feature-with-icon .feature-icon img {
margin-left: 0;
margin-right: 0;
max-width: 100%;
filter: drop-shadow(0 0 80px rgba(236, 72, 153, 0.3));
}
/* Icon image sizing - optimized for blur/glow effects that extend beyond image bounds */
.section-feature-with-icon .feature-icon img {
/* Mobile: -48px horizontal margins */
/* Tablet: -224px left, -64px right, 180% width */
/* Desktop: -192px left, 160% width */
margin-left: -3rem;
margin-right: -3rem;
}
@media (min-width: 768px){
.section-feature-with-icon .feature-icon img{
margin-left: -14rem;
margin-right: -4rem;
max-width: 180%;
}
}
@media (min-width: 1024px){
.section-feature-with-icon .feature-icon img{
margin-left: -12rem;
max-width: 160%;
}
}
/* Reverse layout variant - icon on left, text on right */
@media (min-width: 768px){
.section-feature-with-icon.icon-left .feature-content{
flex-direction: row-reverse;
}
.section-feature-with-icon.icon-left .feature-icon{
justify-content: flex-start;
}
.section-feature-with-icon.icon-left .feature-icon img{
margin-right: -14rem;
margin-left: -4rem;
}
}
@media (min-width: 1024px){
.section-feature-with-icon.icon-left .feature-icon img{
margin-right: -12rem;
}
}
/* === UTILITY HELPERS === */
/* Center content vertically within section */
.section-center-y{
display: flex;
align-items: center;
}
/* Center content horizontally and vertically */
.section-center{
display: flex;
align-items: center;
justify-content: center;
}
/* Text alignment helpers */
.section-text-center{
text-align: center;
}
.section-text-left{
text-align: left;
}
/* === COMMON PATTERNS === */
/* Pattern 1: Hero Section */
/*
*/
/* Pattern 2: Full-width Feature Section */
/*
*/
/* Pattern 3: Container Section with Borders */
/*
*/
/* Pattern 4: Split Content (Image + Text) */
/*
*/
/* === APP SHOWCASE / DASHBOARD ANIMATION === */
/* Container for dashboard animation */
.exm-dashboard {
position: relative;
overflow: visible;
}
/* Purple glow effect behind dashboard */
.dashboard-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 80%;
border-radius: 50%;
z-index: 1;
pointer-events: none;
opacity: 0;
background: linear-gradient(
90deg,
rgba(97, 83, 247, 0.5) 0%,
rgba(255, 64, 153, 0.5) 50%,
rgba(97, 83, 247, 0.5) 100%
);
background-size: 200% 100%;
filter: blur(clamp(40px, 8vw, 80px));
animation:
dashGlowShift 8s ease-in-out infinite,
dashGlowPulse 4s ease-in-out infinite;
}
@keyframes dashGlowShift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes dashGlowPulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -50%) scale(1.05);
}
}
/* Dashboard image layer */
.dashboard-jpg {
position: relative;
z-index: 2;
}
.dashboard-jpg img {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
}
/* SVG overlay layer for animation */
.dashboard-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 3;
pointer-events: none;
}
.dashboard-svg svg {
width: 100%;
height: auto;
}
/* === AFFILIATE TIER DIVIDERS === */
/* Divider using ::after pseudo-element - centers perfectly between grid items with gap */
.tier-divider::after {
content: '';
position: absolute;
top: 25%;
height: 50%;
width: 1px;
--tw-bg-opacity: 1;
background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
/* Position at right edge, then shift left by half the gap (gap-16 = 4rem, so -2rem) */
right: calc(-2rem - 0.5px);
}
/* Desktop-only divider (for Silver tier on 4-column layout) */
.tier-divider-desktop::after {
content: '';
position: absolute;
top: 25%;
height: 50%;
width: 1px;
--tw-bg-opacity: 1;
background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
right: calc(-2rem - 0.5px);
}
/* Hide dividers on mobile (single column) */
@media (max-width: 639px) {
.tier-divider::after,
.tier-divider-desktop::after{
display: none;
}
}
/* On tablet (2 columns), hide Silver divider to prevent odd 3rd divider */
@media (min-width: 640px) and (max-width: 1023px) {
.tier-divider::after{
display: block;
}
.tier-divider-desktop::after{
display: none;
}
}
/* On desktop (4 columns), show all dividers */
@media (min-width: 1024px) {
.tier-divider::after,
.tier-divider-desktop::after{
display: block;
}
}
/**
* Legacy Components - DEPRECATED
*
* These styles are kept for backward compatibility with old theme (exmtweaks v1)
* DO NOT use these classes in new components!
* Use components.css instead for new development.
*
* This file will be gradually phased out as pages are migrated to v2 design system.
*/
/* === LEGACY LAYOUT COMPONENTS === */
/* Grid container */
.grid-container {
display: grid;
max-width: 1536px;
grid-template-columns: repeat(12, minmax(0, 1fr));
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
@media (min-width: 640px) {
.grid-container {
padding-left: 3rem;
padding-right: 3rem;
}
}
.grid-container.base-section {
margin-left: auto;
margin-right: auto;
gap: 1.5rem;
}
@media (min-width: 1024px) {
.grid-container.base-section {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
/* === LEGACY BADGES === */
.badge {
margin-right: 0.5rem;
border-radius: 0.25rem;
padding-left: 0.625rem;
padding-right: 0.625rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: 14px;
line-height: 20px;
font-weight: 400;
}
.badge.green {
--tw-bg-opacity: 1;
background-color: rgb(55 194 94 / var(--tw-bg-opacity, 1));
}
.badge.red {
--tw-bg-opacity: 1;
background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1));
}
.badge.gray {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.badge.blue {
--tw-bg-opacity: 1;
background-color: rgb(63 131 248 / var(--tw-bg-opacity, 1));
}
.badge.yellow {
--tw-bg-opacity: 1;
background-color: rgb(227 160 8 / var(--tw-bg-opacity, 1));
}
/* === LEGACY BUTTONS === */
/*
.btn {
@apply font-medium rounded-full text-sm px-7 py-4 text-center text-textcolor border inline-block min-w-[150px];
}
.btn-sm {
@apply py-1.5 min-w-[100px];
}
.btn-primary {
@apply bg-pink border-pink opacity-100 transition-opacity;
@apply hover:opacity-80 hover:transition-opacity focus:outline-none;
@apply md:mr-0;
@apply disabled:opacity-60 disabled:cursor-not-allowed;
}
.btn-secondary {
@apply bg-transparent border-textcolor transition-colors;
@apply hover:bg-textcolor hover:text-pink hover:transition-colors;
}
.btn-tertiary {
@apply rounded-md bg-white font-semibold transition-colors text-dark;
@apply hover:bg-textcolor hover:transition-colors;
}
/* === LEGACY CARDS === */
/* DEPRECATED: Old legacy cards - replaced by new design system in components.css */
/* Use .card-gradient, .card-gradient-dark instead */
/* .card, .menu-card {
@apply rounded-3xl text-center py-6 lg:py-12 px-4 lg:px-6;
}
.card {
background: radial-gradient(350.94% 343.49% at 51.82% -159.87%, #404657 0%, rgba(64, 70, 87, 0.00) 100%);
}
.card-darker {
background: radial-gradient(350.94% 343.49% at 51.82% -159.87%, #404657 0%, rgba(64, 70, 87, 0.5) 100%);
} */
.menu-card {
background: radial-gradient(350.94% 343.49% at 51.82% -159.87%, #404657 0%, rgba(17, 17, 35, 1) 100%);
}
.card-sm {
grid-column: span 12 / span 12;
}
@media (min-width: 640px) {
.card-sm {
grid-column: span 4 / span 4;
}
}
.card-lg {
grid-column: span 12 / span 12;
}
.card-lg ul li {
margin-bottom: 1.5rem;
display: flex;
align-items: flex-start;
text-align: left;
font-size: 18px;
line-height: 27px;
--tw-text-opacity: 1;
color: rgb(227 230 240 / var(--tw-text-opacity, 1));
}
.card-lg ul li:last-child {
margin-bottom: 0px;
}
.card-lg ul li {
-moz-column-break-inside: avoid;
break-inside: avoid;
}
.base-section .card span,
.base-section .card h2 {
margin-bottom: 0.5rem;
display: block;
font-size: 20px;
line-height: 28px;
font-weight: 700;
}
@media (min-width: 640px) {
.base-section .card span,
.base-section .card h2 {
font-size: 24px;
line-height: 28.8px;
}
}
@media (min-width: 768px) {
.base-section .card span,
.base-section .card h2 {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
@media (min-width: 1024px) {
.base-section .card span,
.base-section .card h2 {
font-size: 3rem;
line-height: 1;
}
}
.card p {
margin-bottom: 0px;
}
/* === HEADER === */
.header-socials {
margin-right: 2rem;
display: flex;
gap: 1.5rem;
}
@media (min-width: 1536px) {
.header-socials {
margin-right: 0px;
}
}
.header-socials {
opacity: 0.5;
}
/* === TIMELINE === */
.timeline li {
position: relative;
}
.timeline li p {
margin-bottom: 0px;
}
.timeline-item {
position: absolute;
left: -5rem;
height: 2.5rem;
width: 2.5rem;
--tw-bg-opacity: 1;
background-color: rgb(17 17 35 / var(--tw-bg-opacity, 1));
}
.dashed-line {
position: absolute;
top: 40px;
left: -62px;
}
.timeline li h3 {
font-size: 18px;
line-height: 27px;
font-weight: 600;
}
/* === MOBILE MENU === */
.mobile-menu {
width: 100%;
align-items: center;
justify-content: space-between;
--tw-bg-opacity: 1;
background-color: rgb(17 17 35 / var(--tw-bg-opacity, 1));
}
@media (min-width: 768px) {
.mobile-menu {
order: 1;
display: flex;
width: auto;
}
}
.mobile-menu ul {
margin-top: 1rem;
display: flex;
flex-direction: column;
border-radius: 16px;
border-width: 1px;
padding-top: 1rem;
padding-bottom: 1rem;
font-weight: 500;
}
@media (min-width: 768px) {
.mobile-menu ul {
margin-top: 0px;
flex-direction: row;
}
.mobile-menu ul > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.mobile-menu ul {
border-width: 0px;
padding: 0px;
}
}
.mobile-menu ul li a {
display: block;
border-radius: 0.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {
.mobile-menu ul li a {
background-color: transparent;
padding: 0px;
}
}
.mobile-menu .menu {
position: relative;
}
.mobile-menu .menu.closed {
display: none;
}
.mobile-menu .menu.opened {
display: block;
}
.menu-link {
display: block;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
padding-right: 1rem;
text-align: center;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.menu-link.active {
opacity: 0.7;
}
/* === NAVBAR === */
.navbar-wrap {
/* Match section-container padding for alignment */
position: relative;
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 1536px;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
@media (min-width: 640px) {
.navbar-wrap {
padding-left: 3rem;
padding-right: 3rem;
}
}
.navbar-wrap {
/* Pill shape with border */
margin-top: 1rem;
border-radius: 9999px;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(26 26 43 / var(--tw-border-opacity, 1));
/* Backdrop blur with matching border-radius for glass effect */
}
.navbar-wrap::before {
position: absolute;
inset: 0px;
z-index: -10;
border-radius: 9999px;
content: var(--tw-content);
--tw-backdrop-blur: blur(8px);
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);
}
.navbar-wrap {
transform: translate3d(0, 0, 0);
}
.navbar {
/* Mobile: Full width, smooth slide down animation, dark blue background */
width: 100vw;
position: absolute;
left: 0px;
top: 100%;
--tw-bg-opacity: 1;
background-color: rgb(10 10 20 / var(--tw-bg-opacity, 1));
transition-property: all;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
/* Collapsed state */
max-height: 0px;
overflow: hidden;
opacity: 0;
--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));
/* Desktop: inline, no animation */
}
@media (min-width: 1024px) {
.navbar {
position: relative;
left: auto;
top: auto;
order: 1;
width: auto;
--tw-translate-y: 0px;
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));
background-color: transparent;
opacity: 1;
max-height: none;
overflow: visible;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
}
.navbar.toggled {
/* Expanded state - smooth slide down */
max-height: 100vh;
--tw-translate-y: 0px;
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));
opacity: 1;
--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);
/* Desktop: no change */
}
@media (min-width: 1024px) {
.navbar.toggled {
background-color: transparent;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
}
.toggle-menu {
margin-left: 1rem;
margin-right: -0.5rem;
display: inline-flex;
height: 2.5rem;
width: 2.5rem;
align-items: center;
justify-content: center;
border-radius: 16px;
padding: 0.5rem;
font-size: 14px;
line-height: 20px;
}
.toggle-menu:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
@media (min-width: 1024px) {
.toggle-menu {
display: none;
}
}
/* === STORY CONTENT === */
.story-content p {
max-width: 64rem;
text-align: center;
}
/* === CAROUSEL/SWIPER === */
.swiper {
position: relative;
}
.swiper::before {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
z-index: 3;
content: var(--tw-content);
width: 10%;
}
.swiper::after {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
z-index: 3;
content: var(--tw-content);
width: 10%;
}
.swiper {
padding: 15px 0 !important;
}
.swiper > .swiper-wrapper {
width: 100%;
transition-timing-function: linear;
}
.swiper > .swiper-slide {
display: flex;
width: 25%;
justify-content: center;
--tw-text-opacity: 1;
color: rgb(227 230 240 / var(--tw-text-opacity, 1));
}
.reviews .swiper-slide {
background: linear-gradient(#111123, #111123) padding-box,
linear-gradient(to bottom right, #FC1E64, #BC33FD) border-box;
border-radius: 30px;
border: 1px solid transparent;
}
.reviews .swiper-pagination-bullet {
height: 1rem;
width: 1rem;
border-radius: 9999px;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(167 170 181 / var(--tw-border-opacity, 1));
background-color: transparent;
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;
}
.reviews .swiper-pagination-bullet-active {
--tw-bg-opacity: 1;
background-color: rgb(167 170 181 / var(--tw-bg-opacity, 1));
opacity: 0.5;
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;
}
/* === STORE PAGE === */
.cross-icon {
position: relative;
margin-right: 1rem;
width: 20px;
}
.cross-icon .line {
position: absolute;
top: 11px;
left: 2px;
height: 3px;
width: 16px;
border-radius: 1.5rem;
--tw-bg-opacity: 1;
background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1));
}
.js-count {
position: absolute;
right: -8px;
top: -8px;
display: flex;
height: 1rem;
width: 1rem;
align-items: center;
justify-content: center;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: rgb(252 30 100 / var(--tw-bg-opacity, 1));
font-size: 12px;
line-height: 20px;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.ribbon-container {
position: absolute;
left: 0px;
top: 0px;
height: 150px;
width: 100%;
overflow: hidden;
}
.ribbon {
position: absolute;
left: -45px;
top: 32px;
width: 200px;
--tw-rotate: -45deg;
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));
--tw-bg-opacity: 1;
background-color: rgb(252 30 100 / var(--tw-bg-opacity, 1));
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: center;
font-size: 20px;
line-height: 28px;
font-weight: 600;
text-transform: uppercase;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* === FAQ/ACCORDION === */
/* DEPRECATED: Legacy accordion - replaced by new design system in components.css */
/* Use .accordion-wrapper > .accordion > .accordion-btn > .accordion-icon instead */
/* Old classes kept for backward compatibility but should not be used in new code */
/*
.accordion-btn {
@apply card flex w-full justify-between text-gray text-xl font-normal rounded-big py-5 px-8 items-center text-left;
}
.plus-sign {
@apply w-6 h-6 relative ml-4;
}
.plus-sign .plus {
@apply bg-frog_green h-[3px] w-5 absolute top-[13px];
}
.plus-sign .plus-y {
@apply rotate-90 transition-transform;
}
.accordion {
@apply border border-mid_gray rounded-big transition-all mt-4 mb-8;
}
.accordion.open {
@apply transition-all;
}
.accordion-btn.toggled .plus-sign .plus-y {
@apply rotate-180 transition-transform;
}
*/
/* === FORMS === */
.mall-two-fields {
margin-bottom: 2.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (min-width: 640px) {
.mall-two-fields {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
.mall-quick-checkout__toggle-option {
margin-top: 1rem;
margin-bottom: 1rem;
display: block;
border-radius: 10px;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
padding: 1rem;
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;
}
.mall-quick-checkout__toggle-option:hover {
--tw-border-opacity: 1;
border-color: rgb(167 170 181 / var(--tw-border-opacity, 1));
}
.custom-radio {
position: relative;
margin-right: 1.5rem;
height: 1.5rem;
width: 1.5rem;
border-radius: 9999px;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(227 230 240 / var(--tw-border-opacity, 1));
background-color: transparent;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.mall-quick-checkout__toggle-option--active .custom-radio {
--tw-bg-opacity: 1;
background-color: rgb(227 230 240 / var(--tw-bg-opacity, 1));
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.mall-quick-checkout__toggle-option--active .custom-radio::before {
position: absolute;
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(17 17 35 / var(--tw-bg-opacity, 1));
}
.mall-quick-checkout__toggle-option--active .custom-radio::after {
position: absolute;
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(17 17 35 / var(--tw-bg-opacity, 1));
}
.mall-quick-checkout__toggle-option--active .custom-radio::before {
top: 11px;
right: 2px;
height: 2px;
width: 13px;
content: var(--tw-content);
--tw-rotate: -45deg;
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));
}
.mall-quick-checkout__toggle-option--active .custom-radio::after {
top: 12px;
left: 4px;
height: 2px;
width: 6px;
content: var(--tw-content);
--tw-rotate: 45deg;
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));
}
/*
form label {
@apply text-textcolor mb-2;
}
.form-label {
@apply text-left text-white;
}
.form-group {
@apply flex flex-col mb-8;
}
*/
/* DEPRECATED: Legacy form-input - replaced by new design system in components.css */
/* Use .form-input from components.css instead */
/*.form-input {
@apply p-2 bg-dark_gray text-textcolor border border-mid_gray rounded-small resize-none font-normal;
@apply focus-visible:outline-none;
@apply focus:outline-none focus:ring-0;
@apply placeholder:opacity-0;
}*/
.help-block {
margin-top: 0.25rem;
text-align: left;
font-size: 14px;
line-height: 20px;
font-weight: 300;
--tw-text-opacity: 1;
color: rgb(255 0 0 / var(--tw-text-opacity, 1));
}
/*.has-error .form-input {
@apply border-red;
}*/
.gdpr-check {
margin-top: -0.125rem;
margin-right: 0.5rem;
border-width: 1px;
}
.gdpr-check:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
/* === RESPONSIVE OVERRIDES === */
@media (min-width: 768px) {
.menu-card {
background: none;
}
}
/**
* Custom Utilities
* Project-specific utility classes based on Figma design system
*/
/* === TYPOGRAPHY === */
/* Display headings - Hero sections */
.heading-hero {
font-size: 3rem;
line-height: 1;
font-weight: 700;
}
@media (min-width: 768px) {
.heading-hero {
font-size: 3.75rem;
line-height: 1;
}
}
@media (min-width: 1024px) {
.heading-hero {
font-size: 4.5rem;
line-height: 1;
}
}
.heading-hero {
line-height: 1.25;
letter-spacing: -0.025em;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Heading scale - Semantic headings */
/* H1 - Figma specs: 64px, 600 weight, 72px line-height, -1.6px letter-spacing */
.heading-1 {
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 600;
}
@media (min-width: 1024px) {
.heading-1 {
font-size: 64px;
}
}
.heading-1 {
text-align: center;
line-height: 1.25;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.heading-1 {
line-height: 72px;
}
}
.heading-1 {
letter-spacing: -1.6px;
}
/* H2 - Figma specs: 48px desktop, font-medium (500), line-height 1.1 */
.heading-2 {
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 500;
}
@media (min-width: 1024px) {
.heading-2 {
font-size: 48px;
}
}
.heading-2 {
line-height: 1.25;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.heading-2 {
line-height: 1.1;
}
}
.heading-3 {
font-size: 24px;
line-height: 28.8px;
font-weight: 600;
}
@media (min-width: 768px) {
.heading-3 {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
.heading-3 {
line-height: 1.5;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.heading-4 {
font-size: 20px;
line-height: 28px;
font-weight: 500;
}
@media (min-width: 768px) {
.heading-4 {
font-size: 24px;
line-height: 28.8px;
}
}
.heading-4 {
line-height: 1.5;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.heading-5 {
font-size: 18px;
line-height: 27px;
font-weight: 500;
}
@media (min-width: 768px) {
.heading-5 {
font-size: 20px;
line-height: 28px;
}
}
.heading-5 {
line-height: 1.5;
--tw-text-opacity: 1;
color: rgb(235 235 239 / var(--tw-text-opacity, 1));
}
.heading-6 {
font-size: 16px;
line-height: 24px;
font-weight: 500;
}
@media (min-width: 768px) {
.heading-6 {
font-size: 18px;
line-height: 27px;
}
}
.heading-6 {
line-height: 1.5;
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
}
/* Body text variants */
/* Lead/perex paragraph - Figma specs: 21px, #81818c, line-height 28px, letter-spacing -0.525px */
p.body-lead {
font-size: 18px;
line-height: 27px;
line-height: 1.625;
}
@media (min-width: 1024px) {
p.body-lead {
font-size: 21px;
line-height: 28px;
}
}
p.body-lead {
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
letter-spacing: -0.525px;
}
.body-large {
font-size: 18px;
line-height: 27px;
line-height: 1.625;
--tw-text-opacity: 1;
color: rgb(235 235 239 / var(--tw-text-opacity, 1));
}
.body-base {
font-size: 16px;
line-height: 24px;
line-height: 1.5;
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
}
.body-small {
font-size: 14px;
line-height: 20px;
line-height: 1.5;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
/* Caption text */
.caption {
font-size: 12px;
line-height: 20px;
line-height: 1.25;
--tw-text-opacity: 1;
color: rgb(79 79 85 / var(--tw-text-opacity, 1));
}
/* Subtitle text */
.subtitle {
margin-bottom: 0.75rem;
display: block;
font-size: 20px;
line-height: 28px;
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
.subtitle {
font-size: 24px;
line-height: 28.8px;
}
}
/* Text weights */
.text-light {
font-weight: 300;
}
.text-regular {
font-weight: 400;
}
.text-medium {
font-weight: 500;
}
.text-semibold {
font-weight: 600;
}
.text-bold {
font-weight: 700;
}
.text-extrabold {
font-weight: 800;
}
/* === TEXT GRADIENTS === */
/* Gradient text base */
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Gradient variants */
.text-gradient-pink {
background: linear-gradient(270deg, #FC1E64 0%, #BF32F6 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-blue {
background: linear-gradient(90deg, #00C6AE 0%, #1E82BD 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-orange {
background: linear-gradient(92deg, #DE3D00 0%, #FFB78F 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-green {
background: linear-gradient(90deg, #1CC600 0%, #CCFF00 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-yellow {
background: linear-gradient(270deg, #FC1E1E 0%, #F7EF2F 99.99%, #FFE500 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-red {
background: linear-gradient(90deg, #DE0028 0%, #FA00FF 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-primary {
background: linear-gradient(135deg, #FF2E79 0%, #BF32F6 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-brand {
background: linear-gradient(91deg, #4F46E5 0.39%, #FF2E79 99.61%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* === BACKGROUND GRADIENTS === */
/* Radial gradient backgrounds */
.bg-gradient-card {
background: radial-gradient(
350.94% 343.49% at 51.82% -159.87%,
#404657 0%,
rgba(64, 70, 87, 0.00) 100%
);
}
.bg-gradient-card-dark {
background: radial-gradient(
350.94% 343.49% at 51.82% -159.87%,
#404657 0%,
rgba(64, 70, 87, 0.5) 100%
);
}
.bg-gradient-menu {
background: radial-gradient(
350.94% 343.49% at 51.82% -159.87%,
#404657 0%,
rgba(17, 17, 35, 1) 100%
);
}
/* === BLUR EFFECTS === */
/* Blur container base */
.blur-container {
pointer-events: none;
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
transform: translate3d(0, 0, 0);
}
/* Radial blur variants */
.blur-radial-pink {
background: radial-gradient(
45.36% 50% at 50% 50.00%,
rgba(229, 61, 157, 0.50) 0%,
rgba(229, 61, 157, 0.00) 100%
);
filter: blur(100px);
}
.blur-radial-blue {
background: radial-gradient(
45.36% 50% at 50% 50.00%,
rgba(61, 134, 164, 0.50) 0%,
rgba(61, 134, 164, 0.00) 100%
);
filter: blur(100px);
}
.blur-radial-green {
background: linear-gradient(
180deg,
#173B80 0%,
#11573E 100%
);
filter: blur(100px);
}
.blur-radial-purple {
background: radial-gradient(
45.36% 50% at 50% 50.00%,
rgba(157, 0, 146, 0.50) 0%,
rgba(157, 0, 146, 0.00) 100%
);
filter: blur(100px);
}
/* Blur position utilities */
.blur-position-header {
right: -50%;
top: -50%;
height: 160%;
width: 160%;
}
.blur-position-footer {
right: 0px;
bottom: 0px;
height: 200px;
width: 85%;
}
.blur-position-center {
top: 50%;
left: 50%;
--tw-translate-x: -50%;
--tw-translate-y: -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));
}
/* Shadows */
.shadow-soft {
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}
.shadow-medium {
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
}
.shadow-strong {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.shadow-inset {
box-shadow: 1px 0 4px 0 #111320 inset;
}
/* Animations */
.fade-in {
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slide-up {
animation: slideUp 0.4s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Aspect ratios - Tailwind has aspect-square and aspect-video built-in */
/* Just define custom portrait ratio */
.aspect-portrait {
aspect-ratio: 3/4;
}
/* === IMAGE STYLES === */
/* Styled image - Figma design system */
.img-styled {
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.05);
background: var(--Core-Grey-700, #1E1E28);
box-shadow:
20px 91px 26px 0 rgba(0, 0, 0, 0.00),
13px 58px 24px 0 rgba(0, 0, 0, 0.01),
7px 33px 20px 0 rgba(0, 0, 0, 0.05),
3px 14px 15px 0 rgba(0, 0, 0, 0.09),
1px 4px 8px 0 rgba(0, 0, 0, 0.10);
}
/* ========================================
EXM Performance Graph Animation
Component: reduce-lag.htm
======================================== */
.exm-perf-graph {
position: relative;
width: 100%;
max-width: 500px;
overflow: hidden;
border-radius: 1rem;
/* GPU layer promotion for smooth animations */
transform: translateZ(0);
will-change: transform;
}
.exm-perf-graph svg {
display: block;
height: auto;
width: 100%;
}
/* GPU-accelerated animated elements */
.exm-animated {
will-change: transform, opacity;
}
/* Fade transition helper */
.exm-fade {
transition: opacity 0.3s ease;
}
/* ========================================
EXM Reduce Ping Animation
Component: reduce-ping.htm
======================================== */
.exm-ping {
position: relative;
width: 100%;
max-width: 416px;
overflow: hidden;
border-radius: 1rem;
/* GPU layer promotion for smooth animations */
transform: translateZ(0);
will-change: transform;
}
.exm-ping svg {
display: block;
height: auto;
width: 100%;
}
/* GPU-accelerated packets */
.exm-ping .packet {
will-change: transform;
}
/* ========================================
EXM Boost FPS Animation
Component: boost-fps.htm
======================================== */
.exm-fps {
position: relative;
width: 100%;
max-width: 1026px;
overflow: hidden;
border-radius: 1rem;
/* GPU layer promotion for smooth animations */
transform: translateZ(0);
will-change: transform;
contain: layout style paint;
}
.exm-fps svg {
display: block;
height: auto;
width: 100%;
/* Override .img-wrapper.relative svg absolute positioning */
position: relative !important;
}
/* GPU-accelerated scrolling lines */
.fps-line-scroll {
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
/* Animation Components */
/* Header SVG Bokeh Animation */
.img-wrapper.relative svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
right: 0;
bottom: 0;
overflow: visible;
}
.img-wrapper.relative svg #bookeh * {
transform-origin: center;
animation: bokehFloat 14s ease-in-out infinite alternate;
opacity: 1;
}
/* Bokeh animation variants with staggered timing */
.img-wrapper.relative svg #bookeh *:nth-of-type(1n) {
animation-delay: 0s;
animation-duration: 14s;
}
.img-wrapper.relative svg #bookeh *:nth-of-type(2n) {
animation-delay: 1.2s;
animation-duration: 16s;
}
.img-wrapper.relative svg #bookeh *:nth-of-type(3n) {
animation-delay: 0.6s;
animation-duration: 13s;
}
.img-wrapper.relative svg #bookeh *:nth-of-type(4n) {
animation-delay: 2s;
animation-duration: 15s;
}
.img-wrapper.relative svg #bookeh *:nth-of-type(5n) {
animation-delay: 1.5s;
animation-duration: 17s;
}
@keyframes bokehFloat {
0% {
transform: translate(0px, 0px) scale(1);
opacity: 0.4;
}
50% {
transform: translate(6px, -6px) scale(1.07);
opacity: 0.7;
}
100% {
transform: translate(-5px, 5px) scale(0.96);
opacity: 1;
}
}
/* Counter SVG Animation */
#counter-1 path,
#counter-2 path {
transition: opacity 0.3s ease;
opacity: 0.1; /* default faded out */
}
@keyframes glowPulse {
0% {
opacity: 0.2;
filter: drop-shadow(0 0 0px #00f0ff);
}
50% {
opacity: 1;
filter: drop-shadow(0 0 6px #00f0ff);
}
100% {
opacity: 0.2;
filter: drop-shadow(0 0 0px #00f0ff);
}
}
/**
* Self-hosted Poppins Font
*
* Performance optimization: Eliminates render-blocking Google Fonts request
* and removes third-party dependency.
*
* Font weights used in project:
* - 300 (Light)
* - 400 (Regular)
* - 500 (Medium)
* - 600 (SemiBold)
* - 700 (Bold)
* - 900 (Black)
*/
/* Poppins Light (300) */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../fonts/poppins/poppins-v24-latin-300.woff2') format('woff2');
}
/* Poppins Regular (400) */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/poppins/poppins-v24-latin-regular.woff2') format('woff2');
}
/* Poppins Medium (500) */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/poppins/poppins-v24-latin-500.woff2') format('woff2');
}
/* Poppins SemiBold (600) */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/poppins/poppins-v24-latin-600.woff2') format('woff2');
}
/* Poppins Bold (700) */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/poppins/poppins-v24-latin-700.woff2') format('woff2');
}
/* Poppins Black (900) */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('../fonts/poppins/poppins-v24-latin-900.woff2') format('woff2');
}
/**
* Swiper 10.3.1
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2023 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: September 28, 2023
*/
/* FONT_START */
@font-face {
font-family: 'swiper-icons';
src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
font-weight: 400;
font-style: normal;
}
/* FONT_END */
:root {
--swiper-theme-color: #007aff;
/*
--swiper-preloader-color: var(--swiper-theme-color);
--swiper-wrapper-transition-timing-function: initial;
*/
}
:host {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
overflow: clip;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
display: block;
}
.swiper-vertical > .swiper-wrapper {
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
touch-action: pan-y;
}
.swiper-vertical {
touch-action: pan-x;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
display: block;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
height: auto;
}
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
transform: translateZ(0);
backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
transform-style: preserve-3d;
}
.swiper-3d {
perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d;
}
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
/* For Firefox */
-ms-overflow-style: none;
/* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
content: '';
flex-shrink: 0;
order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after);
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Slide styles end */
:root {
/*
--swiper-pagination-color: var(--swiper-theme-color);
--swiper-pagination-left: auto;
--swiper-pagination-right: 8px;
--swiper-pagination-bottom: 8px;
--swiper-pagination-top: auto;
--swiper-pagination-fraction-color: inherit;
--swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
--swiper-pagination-progressbar-size: 4px;
--swiper-pagination-bullet-size: 8px;
--swiper-pagination-bullet-width: 8px;
--swiper-pagination-bullet-height: 8px;
--swiper-pagination-bullet-border-radius: 50%;
--swiper-pagination-bullet-inactive-color: #000;
--swiper-pagination-bullet-inactive-opacity: 0.2;
--swiper-pagination-bullet-opacity: 1;
--swiper-pagination-bullet-horizontal-gap: 4px;
--swiper-pagination-bullet-vertical-gap: 6px;
*/
}
.swiper-pagination {
position: absolute;
text-align: center;
transition: 300ms opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
display: none !important;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: var(--swiper-pagination-bottom, 8px);
top: var(--swiper-pagination-top, auto);
left: 0;
width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(0.33);
}
.swiper-pagination-bullet {
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
display: inline-block;
border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
background: var(--swiper-pagination-bullet-inactive-color, #000);
opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-bullet:only-child {
display: none !important;
}
.swiper-pagination-bullet-active {
opacity: var(--swiper-pagination-bullet-opacity, 1);
background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
right: var(--swiper-pagination-right, 8px);
left: var(--swiper-pagination-left, auto);
top: 50%;
transform: translate3d(0px, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: 200ms transform, 200ms top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color));
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
width: 100%;
height: var(--swiper-pagination-progressbar-size, 4px);
left: 0;
top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
width: var(--swiper-pagination-progressbar-size, 4px);
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-lock {
display: none;
}
*, ::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(0 0 0 / 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-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(0 0 0 / 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-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: ;
}/*
! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-feature-settings: normal; /* 2 */
font-variation-settings: normal; /* 3 */
font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
letter-spacing: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
.tooltip-arrow,.tooltip-arrow:before {
position: absolute;
width: 8px;
height: 8px;
background: inherit;
}
.tooltip-arrow {
visibility: hidden;
}
.tooltip-arrow:before {
content: "";
visibility: visible;
transform: rotate(45deg);
}
[data-tooltip-style^='light'] + .tooltip > .tooltip-arrow:before {
border-style: solid;
border-color: #e5e7eb;
}
[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > .tooltip-arrow:before {
border-bottom-width: 1px;
border-right-width: 1px;
}
[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='right'] > .tooltip-arrow:before {
border-bottom-width: 1px;
border-left-width: 1px;
}
[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow:before {
border-top-width: 1px;
border-left-width: 1px;
}
[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='left'] > .tooltip-arrow:before {
border-top-width: 1px;
border-right-width: 1px;
}
.tooltip[data-popper-placement^='top'] > .tooltip-arrow {
bottom: -4px;
}
.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
top: -4px;
}
.tooltip[data-popper-placement^='left'] > .tooltip-arrow {
right: -4px;
}
.tooltip[data-popper-placement^='right'] > .tooltip-arrow {
left: -4px;
}
.tooltip.invisible > .tooltip-arrow:before {
visibility: hidden;
}
[data-popper-arrow],[data-popper-arrow]:before {
position: absolute;
width: 8px;
height: 8px;
background: inherit;
}
[data-popper-arrow] {
visibility: hidden;
}
[data-popper-arrow]:before {
content: "";
visibility: visible;
transform: rotate(45deg);
}
[data-popper-arrow]:after {
content: "";
visibility: visible;
transform: rotate(45deg);
position: absolute;
width: 9px;
height: 9px;
background: inherit;
}
[role="tooltip"] > [data-popper-arrow]:before {
border-style: solid;
border-color: #e5e7eb;
}
.dark [role="tooltip"] > [data-popper-arrow]:before {
border-style: solid;
border-color: #4b5563;
}
[role="tooltip"] > [data-popper-arrow]:after {
border-style: solid;
border-color: #e5e7eb;
}
.dark [role="tooltip"] > [data-popper-arrow]:after {
border-style: solid;
border-color: #4b5563;
}
[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:before {
border-bottom-width: 1px;
border-right-width: 1px;
}
[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:after {
border-bottom-width: 1px;
border-right-width: 1px;
}
[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:before {
border-bottom-width: 1px;
border-left-width: 1px;
}
[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:after {
border-bottom-width: 1px;
border-left-width: 1px;
}
[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:before {
border-top-width: 1px;
border-left-width: 1px;
}
[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:after {
border-top-width: 1px;
border-left-width: 1px;
}
[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:before {
border-top-width: 1px;
border-right-width: 1px;
}
[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:after {
border-top-width: 1px;
border-right-width: 1px;
}
[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow] {
bottom: -5px;
}
[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow] {
top: -5px;
}
[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow] {
right: -5px;
}
[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow] {
left: -5px;
}
[role="tooltip"].invisible > [data-popper-arrow]:before {
visibility: hidden;
}
[role="tooltip"].invisible > [data-popper-arrow]:after {
visibility: hidden;
}
[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
--tw-shadow: 0 0 #0000;
}
[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #1C64F2;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
border-color: #1C64F2;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #6b7280;
opacity: 1;
}
input::placeholder,textarea::placeholder {
color: #6b7280;
opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-date-and-time-value {
min-height: 1.5em;
}
select:not([size]) {
background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 0.75em 0.75em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
[multiple] {
background-image: initial;
background-position: initial;
background-repeat: unset;
background-size: initial;
padding-right: 0.75rem;
-webkit-print-color-adjust: unset;
print-color-adjust: unset;
}
[type='checkbox'],[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: #1C64F2;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
--tw-shadow: 0 0 #0000;
}
[type='checkbox'] {
border-radius: 0px;
}
[type='radio'] {
border-radius: 100%;
}
[type='checkbox']:focus,[type='radio']:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #1C64F2;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
[type='checkbox']:checked,[type='radio']:checked,.dark [type='checkbox']:checked,.dark [type='radio']:checked {
border-color: transparent;
background-color: currentColor;
background-size: 0.55em 0.55em;
background-position: center;
background-repeat: no-repeat;
}
[type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e");
background-repeat: no-repeat;
background-size: 0.55em 0.55em;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
[type='radio']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
background-size: 1em 1em;
}
.dark [type='radio']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
background-size: 1em 1em;
}
[type='checkbox']:indeterminate {
background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e");
background-color: currentColor;
border-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: 0.55em 0.55em;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
border-color: transparent;
background-color: currentColor;
}
[type='file'] {
background: unset;
border-color: inherit;
border-width: 0;
border-radius: 0;
padding: 0;
font-size: unset;
line-height: inherit;
}
[type='file']:focus {
outline: 1px auto inherit;
}
input[type=file]::file-selector-button {
color: white;
background: #1f2937;
border: 0;
font-weight: 500;
font-size: 14px;
cursor: pointer;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
padding-left: 2rem;
padding-right: 1rem;
margin-inline-start: -1rem;
margin-inline-end: 1rem;
}
input[type=file]::file-selector-button:hover {
background: #374151;
}
.dark input[type=file]::file-selector-button {
color: white;
background: #4b5563;
}
.dark input[type=file]::file-selector-button:hover {
background: #6b7280;
}
input[type="range"]::-webkit-slider-thumb {
height: 1.25rem;
width: 1.25rem;
background: #1C64F2;
border-radius: 9999px;
border: 0;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
input[type="range"]:disabled::-webkit-slider-thumb {
background: #9ca3af;
}
.dark input[type="range"]:disabled::-webkit-slider-thumb {
background: #6b7280;
}
input[type="range"]:focus::-webkit-slider-thumb {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 1px;
--tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
}
input[type="range"]::-moz-range-thumb {
height: 1.25rem;
width: 1.25rem;
background: #1C64F2;
border-radius: 9999px;
border: 0;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
input[type="range"]:disabled::-moz-range-thumb {
background: #9ca3af;
}
.dark input[type="range"]:disabled::-moz-range-thumb {
background: #6b7280;
}
input[type="range"]::-moz-range-progress {
background: #3F83F8;
}
input[type="range"]::-ms-fill-lower {
background: #3F83F8;
}
/* Lenis Smooth Scroll */
/* Custom scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
::-webkit-scrollbar-thumb {
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
::-webkit-scrollbar-thumb:hover {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
/* Alpine.js cloaking - hide elements until Alpine initializes */
[x-cloak] {
display: none !important;
}
button,
a,
input,
select,
textarea {
outline: none !important;
box-shadow: none !important;
transition-property: background-color, color, transform, filter !important;
transition-duration: 0.5s !important;
transition-timing-function: ease !important;
/* 🔹 vypne animáciu outline a shadow, pridaný filter pre glow efekty */
}
/* Focus styles - only show on keyboard navigation, not mouse clicks */
*:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
*:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity, 1));
--tw-ring-opacity: 0.5;
}
/* Remove focus outline from links on click, but keep for keyboard navigation */
a:focus,
a:active {
outline: none !important;
box-shadow: none !important;
}
a:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity, 1));
--tw-ring-opacity: 0.5;
}
/* Remove tap highlight and prevent position shift on mobile */
a,
button {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Prevent any transform or position change on active state */
a:active,
button:active {
transform: none !important;
position: relative !important;
}
p a {
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity, 1));
text-decoration-line: underline;
}
/* Smooth scroll */
html {
scroll-behavior: smooth;
--tw-text-opacity: 1;
color: rgb(227 230 240 / var(--tw-text-opacity, 1));
/* Base font-size: 14px mobile → 16px desktop (fluid) */
font-size: clamp(14px, 1vw + 12px, 16px);
}
/* Body defaults */
body {
--tw-bg-opacity: 1;
background-color: rgb(10 10 20 / var(--tw-bg-opacity, 1));
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: Poppins, sans-serif;
font-weight: 300;
overflow-x: hidden; /* Prevent horizontal scroll */
}
/* === FLUID TYPOGRAPHY SYSTEM === */
/* Uses clamp() for smooth scaling between mobile and desktop */
/* Formula: clamp(min, preferred, max) */
strong {
font-weight: 800;
}
/* H1 - Figma desktop: 64px (4rem) */
/* Mobile: 32px (2rem) → Desktop: 64px (4rem) */
h1 {
margin-bottom: 1rem;
text-align: center;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
font-size: clamp(2rem, 4vw + 1rem, 4rem);
line-height: clamp(2.25rem, 4vw + 1.25rem, 4.5rem);
letter-spacing: clamp(-0.05rem, -0.05vw, -0.1rem);
}
h1 span {
--tw-text-opacity: 1;
color: rgb(255 46 121 / var(--tw-text-opacity, 1));
}
/* H2 - Fluid: 24px (1.5rem) → 36px (2.25rem) */
h2 {
margin-bottom: 2.5rem;
text-align: center;
font-weight: 600;
line-height: 1.5;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
}
h2 i {
font-style: normal !important;
background: linear-gradient(91deg, #4F46E5 0.39%, #FF2E79 99.61%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
section > h2 {
max-width: 18em; /* ~30 characters width for optimal line length */
margin-left: auto;
margin-right: auto;
}
h2 span {
margin-bottom: 0.75rem;
display: block;
--tw-text-opacity: 1;
color: rgb(167 170 181 / var(--tw-text-opacity, 1));
font-size: clamp(1.125rem, 1.5vw + 0.75rem, 1.5rem);
}
/* H3 - Fluid: 18px (1.125rem) → 24px (1.5rem) */
h3 {
margin-bottom: 1rem;
font-weight: 700;
text-transform: capitalize;
--tw-text-opacity: 1;
color: rgb(227 230 240 / var(--tw-text-opacity, 1));
font-size: clamp(1.125rem, 1.5vw + 0.625rem, 1.5rem);
}
h3 span {
margin-bottom: 0.5rem;
display: block;
--tw-text-opacity: 1;
color: rgb(167 170 181 / var(--tw-text-opacity, 1));
font-size: clamp(1rem, 1vw + 0.5rem, 1.125rem);
}
h4 {
padding-bottom: 1rem;
font-size: 20px;
line-height: 28px;
font-weight: 500;
line-height: 1.5rem;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Base paragraph - Fluid: 14px (0.875rem) → 18px (1.125rem) */
p {
margin-bottom: 1rem;
font-weight: 300;
line-height: 1.625;
--tw-text-opacity: 1;
color: rgb(227 230 240 / var(--tw-text-opacity, 1));
font-size: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
}
a {
--tw-text-opacity: 1;
color: rgb(227 230 240 / var(--tw-text-opacity, 1));
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;
}
a:hover {
cursor: pointer;
}
/* HR element - dashed border pattern (9px dash, 9px gap) */
hr {
position: relative;
margin-top: 0px;
margin-bottom: 0px;
height: 1px;
border-width: 0px;
background-image: repeating-linear-gradient(
to right,
#1E1E28 0,
#1E1E28 9px,
transparent 9px,
transparent 18px
);
}
.\!container {
width: 100% !important;
}
.container {
width: 100%;
}
@media (min-width: 420px) {
.\!container {
max-width: 420px !important;
}
.container {
max-width: 420px;
}
}
@media (min-width: 640px) {
.\!container {
max-width: 640px !important;
}
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.\!container {
max-width: 768px !important;
}
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.\!container {
max-width: 1024px !important;
}
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.\!container {
max-width: 1280px !important;
}
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.\!container {
max-width: 1536px !important;
}
.container {
max-width: 1536px;
}
}
.tham {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition-timing-function: linear;
transition-duration: .15s;
transition-property: opacity;
}
.tham:hover {
opacity: 0.7;
}
.tham-box {
position: relative;
display: inline-block;
}
.tham-inner {
top: 50%;
display: block;
background-color: #000;
position: absolute;
border-radius: 4px;
transition-timing-function: ease;
transition-duration: .15s;
transition-property: transform;
}
.tham-inner::before {
content: "";
background-color: inherit;
position: absolute;
display: block;
border-radius: 4px;
transition-timing-function: ease;
transition-duration: .15s;
transition-property: transform;
}
.tham-inner::after {
content: "";
background-color: inherit;
position: absolute;
display: block;
border-radius: 4px;
transition-timing-function: ease;
transition-duration: .15s;
transition-property: transform;
}
.tham.tham-w-4.tham-e-slider .tham-inner {
top: 1px;
}
.tham.tham-w-4.tham-e-slider .tham-inner::before {
top: 4px;
transition-property: transform, opacity;
transition-timing-function: ease;
transition-duration: 0.15s;
}
.tham.tham-w-4.tham-e-slider .tham-inner::after {
top: 8px;
}
.tham.tham-w-4.tham-e-slider.tham-active .tham-inner {
transform: translate3d(0, 4px, 0) rotate(45deg);
}
.tham.tham-w-4.tham-e-slider.tham-active .tham-inner::before {
transform: rotate(-45deg) translate3d(-2.2857142857142856px, -2px, 0);
opacity: 0;
}
.tham.tham-w-4.tham-e-slider.tham-active .tham-inner::after {
transform: translate3d(0, -8px, 0) rotate(-90deg);
}
.tham.tham-e-squeeze .tham-inner {
transition-timing-function: cubic-bezier(.55,.055,.675,.19);
transition-duration: 75ms;
}
.tham.tham-e-squeeze .tham-inner::before {
transition: top 75ms ease .12s,opacity 75ms ease;
}
.tham.tham-e-squeeze .tham-inner::after {
transition: bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19);
}
.tham.tham-e-squeeze.tham-active .tham-inner {
transition-delay: .12s;
transition-timing-function: cubic-bezier(.215,.61,.355,1);
transform: rotate(45deg);
}
.tham.tham-e-squeeze.tham-active .tham-inner::before {
top: 0;
transition: top 75ms ease,opacity 75ms ease .12s;
opacity: 0;
}
.tham.tham-e-squeeze.tham-active .tham-inner::after {
bottom: 0;
transition: bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;
transform: rotate(-90deg);
}
.tham.tham-w-4.tham-e-arrow.tham-active .tham-inner::before {
transform: translate3d(-3.20px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-4.tham-e-arrow.tham-active .tham-inner::after {
transform: translate3d(-3.20px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-4.tham-e-arrow-alt .tham-inner::before {
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-4.tham-e-arrow-alt .tham-inner::after {
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-4.tham-e-arrow-alt.tham-active .tham-inner::before {
top: 0;
transform: translate3d(-3.20px, -4.00px, 0) rotate(-45deg) scale(0.7, 1);
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-4.tham-e-arrow-alt.tham-active .tham-inner::after {
bottom: 0;
transform: translate3d(-3.20px, 4.00px, 0) rotate(45deg) scale(0.7, 1);
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-4.tham-e-arrow-turn.tham-active .tham-inner {
transform: rotate(-180deg);
}
.tham.tham-w-4.tham-e-arrow-turn.tham-active .tham-inner::before {
transform: translate3d(3.20px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-4.tham-e-arrow-turn.tham-active .tham-inner::after {
transform: translate3d(3.20px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-4.tham-e-spin .tham-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-4.tham-e-spin .tham-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.tham.tham-w-4.tham-e-spin .tham-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-4.tham-e-spin.tham-active .tham-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-4.tham-e-spin.tham-active .tham-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.tham.tham-w-4.tham-e-spin.tham-active .tham-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-5.tham-e-slider .tham-inner {
top: 1.25px;
}
.tham.tham-w-5.tham-e-slider .tham-inner::before {
top: 5px;
transition-property: transform, opacity;
transition-timing-function: ease;
transition-duration: 0.15s;
}
.tham.tham-w-5.tham-e-slider .tham-inner::after {
top: 10px;
}
.tham.tham-w-5.tham-e-slider.tham-active .tham-inner {
transform: translate3d(0, 5px, 0) rotate(45deg);
}
.tham.tham-w-5.tham-e-slider.tham-active .tham-inner::before {
transform: rotate(-45deg) translate3d(-2.857142857142857px, -2.5px, 0);
opacity: 0;
}
.tham.tham-w-5.tham-e-slider.tham-active .tham-inner::after {
transform: translate3d(0, -10px, 0) rotate(-90deg);
}
.tham.tham-w-5.tham-e-arrow.tham-active .tham-inner::before {
transform: translate3d(-4.00px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-5.tham-e-arrow.tham-active .tham-inner::after {
transform: translate3d(-4.00px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-5.tham-e-arrow-alt .tham-inner::before {
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-5.tham-e-arrow-alt .tham-inner::after {
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-5.tham-e-arrow-alt.tham-active .tham-inner::before {
top: 0;
transform: translate3d(-4.00px, -5.00px, 0) rotate(-45deg) scale(0.7, 1);
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-5.tham-e-arrow-alt.tham-active .tham-inner::after {
bottom: 0;
transform: translate3d(-4.00px, 5.00px, 0) rotate(45deg) scale(0.7, 1);
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-5.tham-e-arrow-turn.tham-active .tham-inner {
transform: rotate(-180deg);
}
.tham.tham-w-5.tham-e-arrow-turn.tham-active .tham-inner::before {
transform: translate3d(4.00px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-5.tham-e-arrow-turn.tham-active .tham-inner::after {
transform: translate3d(4.00px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-5.tham-e-spin .tham-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-5.tham-e-spin .tham-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.tham.tham-w-5.tham-e-spin .tham-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-5.tham-e-spin.tham-active .tham-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-5.tham-e-spin.tham-active .tham-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.tham.tham-w-5.tham-e-spin.tham-active .tham-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-6.tham-e-slider .tham-inner {
top: 1.5px;
}
.tham.tham-w-6.tham-e-slider .tham-inner::before {
top: 6px;
transition-property: transform, opacity;
transition-timing-function: ease;
transition-duration: 0.15s;
}
.tham.tham-w-6.tham-e-slider .tham-inner::after {
top: 12px;
}
.tham.tham-w-6.tham-e-slider.tham-active .tham-inner {
transform: translate3d(0, 6px, 0) rotate(45deg);
}
.tham.tham-w-6.tham-e-slider.tham-active .tham-inner::before {
transform: rotate(-45deg) translate3d(-3.4285714285714284px, -3px, 0);
opacity: 0;
}
.tham.tham-w-6.tham-e-slider.tham-active .tham-inner::after {
transform: translate3d(0, -12px, 0) rotate(-90deg);
}
.tham.tham-w-6.tham-e-arrow.tham-active .tham-inner::before {
transform: translate3d(-4.80px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-6.tham-e-arrow.tham-active .tham-inner::after {
transform: translate3d(-4.80px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-6.tham-e-arrow-alt .tham-inner::before {
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-6.tham-e-arrow-alt .tham-inner::after {
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-6.tham-e-arrow-alt.tham-active .tham-inner::before {
top: 0;
transform: translate3d(-4.80px, -6.00px, 0) rotate(-45deg) scale(0.7, 1);
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-6.tham-e-arrow-alt.tham-active .tham-inner::after {
bottom: 0;
transform: translate3d(-4.80px, 6.00px, 0) rotate(45deg) scale(0.7, 1);
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-6.tham-e-arrow-turn.tham-active .tham-inner {
transform: rotate(-180deg);
}
.tham.tham-w-6.tham-e-arrow-turn.tham-active .tham-inner::before {
transform: translate3d(4.80px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-6.tham-e-arrow-turn.tham-active .tham-inner::after {
transform: translate3d(4.80px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-6.tham-e-spin .tham-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-6.tham-e-spin .tham-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.tham.tham-w-6.tham-e-spin .tham-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-6.tham-e-spin.tham-active .tham-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-6.tham-e-spin.tham-active .tham-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.tham.tham-w-6.tham-e-spin.tham-active .tham-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-7.tham-e-slider .tham-inner {
top: 1.75px;
}
.tham.tham-w-7.tham-e-slider .tham-inner::before {
top: 7px;
transition-property: transform, opacity;
transition-timing-function: ease;
transition-duration: 0.15s;
}
.tham.tham-w-7.tham-e-slider .tham-inner::after {
top: 14px;
}
.tham.tham-w-7.tham-e-slider.tham-active .tham-inner {
transform: translate3d(0, 7px, 0) rotate(45deg);
}
.tham.tham-w-7.tham-e-slider.tham-active .tham-inner::before {
transform: rotate(-45deg) translate3d(-4px, -3.5px, 0);
opacity: 0;
}
.tham.tham-w-7.tham-e-slider.tham-active .tham-inner::after {
transform: translate3d(0, -14px, 0) rotate(-90deg);
}
.tham.tham-w-7.tham-e-arrow.tham-active .tham-inner::before {
transform: translate3d(-5.60px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-7.tham-e-arrow.tham-active .tham-inner::after {
transform: translate3d(-5.60px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-7.tham-e-arrow-alt .tham-inner::before {
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-7.tham-e-arrow-alt .tham-inner::after {
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-7.tham-e-arrow-alt.tham-active .tham-inner::before {
top: 0;
transform: translate3d(-5.60px, -7.00px, 0) rotate(-45deg) scale(0.7, 1);
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-7.tham-e-arrow-alt.tham-active .tham-inner::after {
bottom: 0;
transform: translate3d(-5.60px, 7.00px, 0) rotate(45deg) scale(0.7, 1);
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-7.tham-e-arrow-turn.tham-active .tham-inner {
transform: rotate(-180deg);
}
.tham.tham-w-7.tham-e-arrow-turn.tham-active .tham-inner::before {
transform: translate3d(5.60px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-7.tham-e-arrow-turn.tham-active .tham-inner::after {
transform: translate3d(5.60px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-7.tham-e-spin .tham-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-7.tham-e-spin .tham-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.tham.tham-w-7.tham-e-spin .tham-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-7.tham-e-spin.tham-active .tham-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-7.tham-e-spin.tham-active .tham-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.tham.tham-w-7.tham-e-spin.tham-active .tham-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-8.tham-e-slider .tham-inner {
top: 2px;
}
.tham.tham-w-8.tham-e-slider .tham-inner::before {
top: 8px;
transition-property: transform, opacity;
transition-timing-function: ease;
transition-duration: 0.15s;
}
.tham.tham-w-8.tham-e-slider .tham-inner::after {
top: 16px;
}
.tham.tham-w-8.tham-e-slider.tham-active .tham-inner {
transform: translate3d(0, 8px, 0) rotate(45deg);
}
.tham.tham-w-8.tham-e-slider.tham-active .tham-inner::before {
transform: rotate(-45deg) translate3d(-4.571428571428571px, -4px, 0);
opacity: 0;
}
.tham.tham-w-8.tham-e-slider.tham-active .tham-inner::after {
transform: translate3d(0, -16px, 0) rotate(-90deg);
}
.tham.tham-w-8.tham-e-arrow.tham-active .tham-inner::before {
transform: translate3d(-6.40px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-8.tham-e-arrow.tham-active .tham-inner::after {
transform: translate3d(-6.40px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-8.tham-e-arrow-alt .tham-inner::before {
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-8.tham-e-arrow-alt .tham-inner::after {
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-8.tham-e-arrow-alt.tham-active .tham-inner::before {
top: 0;
transform: translate3d(-6.40px, -8.00px, 0) rotate(-45deg) scale(0.7, 1);
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-8.tham-e-arrow-alt.tham-active .tham-inner::after {
bottom: 0;
transform: translate3d(-6.40px, 8.00px, 0) rotate(45deg) scale(0.7, 1);
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-8.tham-e-arrow-turn.tham-active .tham-inner {
transform: rotate(-180deg);
}
.tham.tham-w-8.tham-e-arrow-turn.tham-active .tham-inner::before {
transform: translate3d(6.40px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-8.tham-e-arrow-turn.tham-active .tham-inner::after {
transform: translate3d(6.40px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-8.tham-e-spin .tham-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-8.tham-e-spin .tham-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.tham.tham-w-8.tham-e-spin .tham-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-8.tham-e-spin.tham-active .tham-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-8.tham-e-spin.tham-active .tham-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.tham.tham-w-8.tham-e-spin.tham-active .tham-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-9.tham-e-slider .tham-inner {
top: 2.25px;
}
.tham.tham-w-9.tham-e-slider .tham-inner::before {
top: 9px;
transition-property: transform, opacity;
transition-timing-function: ease;
transition-duration: 0.15s;
}
.tham.tham-w-9.tham-e-slider .tham-inner::after {
top: 18px;
}
.tham.tham-w-9.tham-e-slider.tham-active .tham-inner {
transform: translate3d(0, 9px, 0) rotate(45deg);
}
.tham.tham-w-9.tham-e-slider.tham-active .tham-inner::before {
transform: rotate(-45deg) translate3d(-5.142857142857143px, -4.5px, 0);
opacity: 0;
}
.tham.tham-w-9.tham-e-slider.tham-active .tham-inner::after {
transform: translate3d(0, -18px, 0) rotate(-90deg);
}
.tham.tham-w-9.tham-e-arrow.tham-active .tham-inner::before {
transform: translate3d(-7.20px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-9.tham-e-arrow.tham-active .tham-inner::after {
transform: translate3d(-7.20px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-9.tham-e-arrow-alt .tham-inner::before {
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-9.tham-e-arrow-alt .tham-inner::after {
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-9.tham-e-arrow-alt.tham-active .tham-inner::before {
top: 0;
transform: translate3d(-7.20px, -9.00px, 0) rotate(-45deg) scale(0.7, 1);
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-9.tham-e-arrow-alt.tham-active .tham-inner::after {
bottom: 0;
transform: translate3d(-7.20px, 9.00px, 0) rotate(45deg) scale(0.7, 1);
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-9.tham-e-arrow-turn.tham-active .tham-inner {
transform: rotate(-180deg);
}
.tham.tham-w-9.tham-e-arrow-turn.tham-active .tham-inner::before {
transform: translate3d(7.20px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-9.tham-e-arrow-turn.tham-active .tham-inner::after {
transform: translate3d(7.20px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-9.tham-e-spin .tham-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-9.tham-e-spin .tham-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.tham.tham-w-9.tham-e-spin .tham-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-9.tham-e-spin.tham-active .tham-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-9.tham-e-spin.tham-active .tham-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.tham.tham-w-9.tham-e-spin.tham-active .tham-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-10.tham-e-slider .tham-inner {
top: 2.5px;
}
.tham.tham-w-10.tham-e-slider .tham-inner::before {
top: 10px;
transition-property: transform, opacity;
transition-timing-function: ease;
transition-duration: 0.15s;
}
.tham.tham-w-10.tham-e-slider .tham-inner::after {
top: 20px;
}
.tham.tham-w-10.tham-e-slider.tham-active .tham-inner {
transform: translate3d(0, 10px, 0) rotate(45deg);
}
.tham.tham-w-10.tham-e-slider.tham-active .tham-inner::before {
transform: rotate(-45deg) translate3d(-5.714285714285714px, -5px, 0);
opacity: 0;
}
.tham.tham-w-10.tham-e-slider.tham-active .tham-inner::after {
transform: translate3d(0, -20px, 0) rotate(-90deg);
}
.tham.tham-w-10.tham-e-arrow.tham-active .tham-inner::before {
transform: translate3d(-8.00px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-10.tham-e-arrow.tham-active .tham-inner::after {
transform: translate3d(-8.00px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-10.tham-e-arrow-alt .tham-inner::before {
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-10.tham-e-arrow-alt .tham-inner::after {
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-10.tham-e-arrow-alt.tham-active .tham-inner::before {
top: 0;
transform: translate3d(-8.00px, -10.00px, 0) rotate(-45deg) scale(0.7, 1);
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-10.tham-e-arrow-alt.tham-active .tham-inner::after {
bottom: 0;
transform: translate3d(-8.00px, 10.00px, 0) rotate(45deg) scale(0.7, 1);
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-10.tham-e-arrow-turn.tham-active .tham-inner {
transform: rotate(-180deg);
}
.tham.tham-w-10.tham-e-arrow-turn.tham-active .tham-inner::before {
transform: translate3d(8.00px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-10.tham-e-arrow-turn.tham-active .tham-inner::after {
transform: translate3d(8.00px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-10.tham-e-spin .tham-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-10.tham-e-spin .tham-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.tham.tham-w-10.tham-e-spin .tham-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-10.tham-e-spin.tham-active .tham-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-10.tham-e-spin.tham-active .tham-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.tham.tham-w-10.tham-e-spin.tham-active .tham-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-11.tham-e-slider .tham-inner {
top: 2.75px;
}
.tham.tham-w-11.tham-e-slider .tham-inner::before {
top: 11px;
transition-property: transform, opacity;
transition-timing-function: ease;
transition-duration: 0.15s;
}
.tham.tham-w-11.tham-e-slider .tham-inner::after {
top: 22px;
}
.tham.tham-w-11.tham-e-slider.tham-active .tham-inner {
transform: translate3d(0, 11px, 0) rotate(45deg);
}
.tham.tham-w-11.tham-e-slider.tham-active .tham-inner::before {
transform: rotate(-45deg) translate3d(-6.285714285714286px, -5.5px, 0);
opacity: 0;
}
.tham.tham-w-11.tham-e-slider.tham-active .tham-inner::after {
transform: translate3d(0, -22px, 0) rotate(-90deg);
}
.tham.tham-w-11.tham-e-arrow.tham-active .tham-inner::before {
transform: translate3d(-8.80px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-11.tham-e-arrow.tham-active .tham-inner::after {
transform: translate3d(-8.80px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-11.tham-e-arrow-alt .tham-inner::before {
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-11.tham-e-arrow-alt .tham-inner::after {
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-11.tham-e-arrow-alt.tham-active .tham-inner::before {
top: 0;
transform: translate3d(-8.80px, -11.00px, 0) rotate(-45deg) scale(0.7, 1);
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-11.tham-e-arrow-alt.tham-active .tham-inner::after {
bottom: 0;
transform: translate3d(-8.80px, 11.00px, 0) rotate(45deg) scale(0.7, 1);
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-11.tham-e-arrow-turn.tham-active .tham-inner {
transform: rotate(-180deg);
}
.tham.tham-w-11.tham-e-arrow-turn.tham-active .tham-inner::before {
transform: translate3d(8.80px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-11.tham-e-arrow-turn.tham-active .tham-inner::after {
transform: translate3d(8.80px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-11.tham-e-spin .tham-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-11.tham-e-spin .tham-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.tham.tham-w-11.tham-e-spin .tham-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-11.tham-e-spin.tham-active .tham-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-11.tham-e-spin.tham-active .tham-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.tham.tham-w-11.tham-e-spin.tham-active .tham-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-12.tham-e-slider .tham-inner {
top: 3px;
}
.tham.tham-w-12.tham-e-slider .tham-inner::before {
top: 12px;
transition-property: transform, opacity;
transition-timing-function: ease;
transition-duration: 0.15s;
}
.tham.tham-w-12.tham-e-slider .tham-inner::after {
top: 24px;
}
.tham.tham-w-12.tham-e-slider.tham-active .tham-inner {
transform: translate3d(0, 12px, 0) rotate(45deg);
}
.tham.tham-w-12.tham-e-slider.tham-active .tham-inner::before {
transform: rotate(-45deg) translate3d(-6.857142857142857px, -6px, 0);
opacity: 0;
}
.tham.tham-w-12.tham-e-slider.tham-active .tham-inner::after {
transform: translate3d(0, -24px, 0) rotate(-90deg);
}
.tham.tham-w-12.tham-e-arrow.tham-active .tham-inner::before {
transform: translate3d(-9.60px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-12.tham-e-arrow.tham-active .tham-inner::after {
transform: translate3d(-9.60px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-12.tham-e-arrow-alt .tham-inner::before {
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-12.tham-e-arrow-alt .tham-inner::after {
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tham.tham-w-12.tham-e-arrow-alt.tham-active .tham-inner::before {
top: 0;
transform: translate3d(-9.60px, -12.00px, 0) rotate(-45deg) scale(0.7, 1);
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-12.tham-e-arrow-alt.tham-active .tham-inner::after {
bottom: 0;
transform: translate3d(-9.60px, 12.00px, 0) rotate(45deg) scale(0.7, 1);
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.tham.tham-w-12.tham-e-arrow-turn.tham-active .tham-inner {
transform: rotate(-180deg);
}
.tham.tham-w-12.tham-e-arrow-turn.tham-active .tham-inner::before {
transform: translate3d(9.60px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.tham.tham-w-12.tham-e-arrow-turn.tham-active .tham-inner::after {
transform: translate3d(9.60px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.tham.tham-w-12.tham-e-spin .tham-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-12.tham-e-spin .tham-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.tham.tham-w-12.tham-e-spin .tham-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.tham.tham-w-12.tham-e-spin.tham-active .tham-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham.tham-w-12.tham-e-spin.tham-active .tham-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.tham.tham-w-12.tham-e-spin.tham-active .tham-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tham-w-4 .tham-box {
width: 16px;
height: 10px;
}
.tham-w-4 .tham-inner {
margin-top: -1px;
width: 16px;
height: 2px;
}
.tham-w-4 .tham-inner::before {
width: 16px;
height: 2px;
top: -4px;
}
.tham-w-4 .tham-inner::after {
width: 16px;
height: 2px;
bottom: -4px;
}
.tham-w-5 .tham-box {
width: 20px;
height: 12.5px;
}
.tham-w-5 .tham-inner {
margin-top: -1.25px;
width: 20px;
height: 2.5px;
}
.tham-w-5 .tham-inner::before {
width: 20px;
height: 2.5px;
top: -5px;
}
.tham-w-5 .tham-inner::after {
width: 20px;
height: 2.5px;
bottom: -5px;
}
.tham-w-6 .tham-box {
width: 24px;
height: 15px;
}
.tham-w-6 .tham-inner {
margin-top: -1.5px;
width: 24px;
height: 3px;
}
.tham-w-6 .tham-inner::before {
width: 24px;
height: 3px;
top: -6px;
}
.tham-w-6 .tham-inner::after {
width: 24px;
height: 3px;
bottom: -6px;
}
.tham-w-7 {
width: 28px;
height: 17.5px;
}
.tham-w-7 .tham-box {
width: 28px;
height: 17.5px;
}
.tham-w-7 .tham-inner {
margin-top: -1.75px;
width: 28px;
height: 3.5px;
}
.tham-w-7 .tham-inner::before {
width: 28px;
height: 3.5px;
top: -7px;
}
.tham-w-7 .tham-inner::after {
width: 28px;
height: 3.5px;
bottom: -7px;
}
.tham-w-8 .tham-box {
width: 32px;
height: 20px;
}
.tham-w-8 .tham-inner {
margin-top: -2px;
width: 32px;
height: 4px;
}
.tham-w-8 .tham-inner::before {
width: 32px;
height: 4px;
top: -8px;
}
.tham-w-8 .tham-inner::after {
width: 32px;
height: 4px;
bottom: -8px;
}
.tham-w-9 .tham-box {
width: 36px;
height: 22.5px;
}
.tham-w-9 .tham-inner {
margin-top: -2.25px;
width: 36px;
height: 4.5px;
}
.tham-w-9 .tham-inner::before {
width: 36px;
height: 4.5px;
top: -9px;
}
.tham-w-9 .tham-inner::after {
width: 36px;
height: 4.5px;
bottom: -9px;
}
.tham-w-10 .tham-box {
width: 40px;
height: 25px;
}
.tham-w-10 .tham-inner {
margin-top: -2.5px;
width: 40px;
height: 5px;
}
.tham-w-10 .tham-inner::before {
width: 40px;
height: 5px;
top: -10px;
}
.tham-w-10 .tham-inner::after {
width: 40px;
height: 5px;
bottom: -10px;
}
.tham-w-11 .tham-box {
width: 44px;
height: 27.5px;
}
.tham-w-11 .tham-inner {
margin-top: -2.75px;
width: 44px;
height: 5.5px;
}
.tham-w-11 .tham-inner::before {
width: 44px;
height: 5.5px;
top: -11px;
}
.tham-w-11 .tham-inner::after {
width: 44px;
height: 5.5px;
bottom: -11px;
}
.tham-w-12 .tham-box {
width: 48px;
height: 30px;
}
.tham-w-12 .tham-inner {
margin-top: -3px;
width: 48px;
height: 6px;
}
.tham-w-12 .tham-inner::before {
width: 48px;
height: 6px;
top: -12px;
}
.tham-w-12 .tham-inner::after {
width: 48px;
height: 6px;
bottom: -12px;
}
/* Must be first - defines .card, .btn, etc. */
/* Icon system - separated for better organization */
/* Backward compatibility - DEPRECATED */
/*@import './styles/mall.css'; */
/* OFFLINE.Mall plugin - depends on .card */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.pointer-events-none {
pointer-events: none;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
.collapse {
visibility: collapse;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.inset-0 {
inset: 0px;
}
.-bottom-\[3\.5rem\] {
bottom: -3.5rem;
}
.-top-\[1rem\] {
top: -1rem;
}
.bottom-0 {
bottom: 0px;
}
.left-0 {
left: 0px;
}
.right-0 {
right: 0px;
}
.right-12 {
right: 3rem;
}
.right-4 {
right: 1rem;
}
.top-0 {
top: 0px;
}
.top-1\/2 {
top: 50%;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-\[60\] {
z-index: 60;
}
.order-3 {
order: 3;
}
.col-span-1 {
grid-column: span 1 / span 1;
}
.col-span-12 {
grid-column: span 12 / span 12;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
.clear-both {
clear: both;
}
.m-0 {
margin: 0px;
}
.\!mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.-mx-2 {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.-mx-\[8\%\] {
margin-left: -8%;
margin-right: -8%;
}
.mx-0 {
margin-left: 0px;
margin-right: 0px;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-3 {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-40 {
margin-top: 160px;
margin-bottom: 160px;
}
.my-5 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.\!mb-0 {
margin-bottom: 0px !important;
}
.\!mb-8 {
margin-bottom: 2rem !important;
}
.-mb-px {
margin-bottom: -1px;
}
.-mt-10 {
margin-top: -2.5rem;
}
.-mt-3 {
margin-top: -0.75rem;
}
.-mt-8 {
margin-top: -2rem;
}
.-mt-\[6em\] {
margin-top: -6em;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-20 {
margin-bottom: 5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-40 {
margin-bottom: 160px;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-\[10em\] {
margin-bottom: 10em;
}
.mb-\[3em\] {
margin-bottom: 3em;
}
.me-2 {
margin-inline-end: 0.5rem;
}
.me-3 {
margin-inline-end: 0.75rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-3 {
margin-left: 0.75rem;
}
.ml-4 {
margin-left: 1rem;
}
.ml-6 {
margin-left: 1.5rem;
}
.ml-auto {
margin-left: auto;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.mr-4 {
margin-right: 1rem;
}
.mr-6 {
margin-right: 1.5rem;
}
.mt-0\.5 {
margin-top: 0.125rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-12 {
margin-top: 3rem;
}
.mt-14 {
margin-top: 3.5rem;
}
.mt-16 {
margin-top: 4rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-20 {
margin-top: 5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-40 {
margin-top: 160px;
}
.mt-5 {
margin-top: 1.25rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-\[3em\] {
margin-top: 3em;
}
.mt-auto {
margin-top: auto;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.grid {
display: grid;
}
.contents {
display: contents;
}
.hidden {
display: none;
}
.aspect-\[21\/9\] {
aspect-ratio: 21/9;
}
.aspect-video {
aspect-ratio: 16 / 9;
}
.size-\[14px\] {
width: 14px;
height: 14px;
}
.h-1 {
height: 0.25rem;
}
.h-10 {
height: 2.5rem;
}
.h-14 {
height: 3.5rem;
}
.h-16 {
height: 4rem;
}
.h-20 {
height: 5rem;
}
.h-24 {
height: 6rem;
}
.h-3\.5 {
height: 0.875rem;
}
.h-32 {
height: 8rem;
}
.h-4 {
height: 1rem;
}
.h-48 {
height: 12rem;
}
.h-5 {
height: 1.25rem;
}
.h-50 {
height: 200px;
}
.h-6 {
height: 1.5rem;
}
.h-64 {
height: 16rem;
}
.h-7 {
height: 1.75rem;
}
.h-8 {
height: 2rem;
}
.h-9 {
height: 2.25rem;
}
.h-\[0\.5px\] {
height: 0.5px;
}
.h-auto {
height: auto;
}
.h-full {
height: 100%;
}
.min-h-\[300px\] {
min-height: 300px;
}
.min-h-\[30px\] {
min-height: 30px;
}
.w-1 {
width: 0.25rem;
}
.w-1\/2 {
width: 50%;
}
.w-10 {
width: 2.5rem;
}
.w-10\/12 {
width: 83.333333%;
}
.w-14 {
width: 3.5rem;
}
.w-16 {
width: 4rem;
}
.w-20 {
width: 5rem;
}
.w-3\.5 {
width: 0.875rem;
}
.w-4 {
width: 1rem;
}
.w-5 {
width: 1.25rem;
}
.w-6 {
width: 1.5rem;
}
.w-64 {
width: 16rem;
}
.w-7 {
width: 1.75rem;
}
.w-8 {
width: 2rem;
}
.w-\[52px\] {
width: 52px;
}
.w-auto {
width: auto;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-full {
width: 100%;
}
.w-px {
width: 1px;
}
.min-w-0 {
min-width: 0px;
}
.min-w-\[120px\] {
min-width: 120px;
}
.min-w-\[160px\] {
min-width: 160px;
}
.min-w-\[165px\] {
min-width: 165px;
}
.min-w-\[220px\] {
min-width: 220px;
}
.min-w-\[250px\] {
min-width: 250px;
}
.min-w-\[80px\] {
min-width: 80px;
}
.max-w-2xl {
max-width: 42rem;
}
.max-w-3xl {
max-width: 48rem;
}
.max-w-4xl {
max-width: 56rem;
}
.max-w-5xl {
max-width: 64rem;
}
.max-w-6xl {
max-width: 72rem;
}
.max-w-7xl {
max-width: 80rem;
}
.max-w-\[12em\] {
max-width: 12em;
}
.max-w-\[180px\] {
max-width: 180px;
}
.max-w-\[20px\] {
max-width: 20px;
}
.max-w-\[25em\] {
max-width: 25em;
}
.max-w-\[350px\] {
max-width: 350px;
}
.max-w-\[75\%\] {
max-width: 75%;
}
.max-w-full {
max-width: 100%;
}
.max-w-lg {
max-width: 32rem;
}
.max-w-md {
max-width: 28rem;
}
.max-w-none {
max-width: none;
}
.max-w-screen-2xl {
max-width: 1536px;
}
.max-w-screen-xl {
max-width: 1280px;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-none {
flex: none;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.border-collapse {
border-collapse: collapse;
}
.-translate-y-1\/2 {
--tw-translate-y: -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));
}
.-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));
}
.translate-y-0 {
--tw-translate-y: 0px;
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));
}
.-rotate-45 {
--tw-rotate: -45deg;
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));
}
.rotate-180 {
--tw-rotate: 180deg;
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));
}
.rotate-45 {
--tw-rotate: 45deg;
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));
}
.scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 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));
}
.scale-95 {
--tw-scale-x: .95;
--tw-scale-y: .95;
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));
}
.transform {
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));
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
.cursor-default {
cursor: default;
}
.cursor-not-allowed {
cursor: not-allowed;
}
.cursor-pointer {
cursor: pointer;
}
.select-all {
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}
.resize {
resize: both;
}
.list-inside {
list-style-position: inside;
}
.list-disc {
list-style-type: disc;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-1 {
gap: 0.25rem;
}
.gap-1\.5 {
gap: 0.375rem;
}
.gap-10 {
gap: 2.5rem;
}
.gap-12 {
gap: 3rem;
}
.gap-16 {
gap: 4rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-2\.5 {
gap: 0.625rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.gap-\[8px\] {
gap: 8px;
}
.gap-y-0 {
row-gap: 0px;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1.5rem * var(--tw-space-x-reverse));
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-12 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.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));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-core-700 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(30 30 40 / var(--tw-divide-opacity, 1));
}
.self-start {
align-self: flex-start;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-visible {
overflow: visible;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.whitespace-nowrap {
white-space: nowrap;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-3xl {
border-radius: 1.5rem;
}
.rounded-\[10px\] {
border-radius: 10px;
}
.rounded-\[2em\] {
border-radius: 2em;
}
.rounded-\[inherit\] {
border-radius: inherit;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 16px;
}
.rounded-md {
border-radius: 10px;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-l-lg {
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
.rounded-r-\[10px\] {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.rounded-r-lg {
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
.rounded-t-lg {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.rounded-t-xl {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
.border {
border-width: 1px;
}
.border-2 {
border-width: 2px;
}
.border-y {
border-top-width: 1px;
border-bottom-width: 1px;
}
.border-b {
border-bottom-width: 1px;
}
.border-r {
border-right-width: 1px;
}
.border-t {
border-top-width: 1px;
}
.border-solid {
border-style: solid;
}
.border-none {
border-style: none;
}
.border-blue-200 {
--tw-border-opacity: 1;
border-color: rgb(195 221 253 / var(--tw-border-opacity, 1));
}
.border-core-300 {
--tw-border-opacity: 1;
border-color: rgb(188 188 200 / var(--tw-border-opacity, 1));
}
.border-core-400 {
--tw-border-opacity: 1;
border-color: rgb(129 129 140 / var(--tw-border-opacity, 1));
}
.border-core-600 {
--tw-border-opacity: 1;
border-color: rgb(59 59 68 / var(--tw-border-opacity, 1));
}
.border-core-650 {
--tw-border-opacity: 1;
border-color: rgb(40 40 50 / var(--tw-border-opacity, 1));
}
.border-core-700 {
--tw-border-opacity: 1;
border-color: rgb(30 30 40 / var(--tw-border-opacity, 1));
}
.border-core-750 {
--tw-border-opacity: 1;
border-color: rgb(26 26 36 / var(--tw-border-opacity, 1));
}
.border-core-800 {
--tw-border-opacity: 1;
border-color: rgb(20 20 30 / var(--tw-border-opacity, 1));
}
.border-error\/20 {
border-color: rgb(255 0 0 / 0.2);
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-700 {
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-gray-800 {
--tw-border-opacity: 1;
border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}
.border-mid_gray {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.border-success\/30 {
border-color: rgb(55 194 94 / 0.3);
}
.border-tborder_dark {
--tw-border-opacity: 1;
border-color: rgb(64 70 87 / var(--tw-border-opacity, 1));
}
.border-textcolor {
--tw-border-opacity: 1;
border-color: rgb(227 230 240 / var(--tw-border-opacity, 1));
}
.border-trow_dark {
border-color: rgba(50, 56, 71, 0.4);
}
.border-warning\/30 {
border-color: rgb(255 184 106 / 0.3);
}
.bg-\[\#10101a\] {
--tw-bg-opacity: 1;
background-color: rgb(16 16 26 / var(--tw-bg-opacity, 1));
}
.bg-black\/80 {
background-color: rgb(0 0 0 / 0.8);
}
.bg-blue-50 {
--tw-bg-opacity: 1;
background-color: rgb(235 245 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(28 100 242 / var(--tw-bg-opacity, 1));
}
.bg-core-650 {
--tw-bg-opacity: 1;
background-color: rgb(40 40 50 / var(--tw-bg-opacity, 1));
}
.bg-core-700 {
--tw-bg-opacity: 1;
background-color: rgb(30 30 40 / var(--tw-bg-opacity, 1));
}
.bg-core-800 {
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
}
.bg-core-850 {
--tw-bg-opacity: 1;
background-color: rgb(17 17 35 / var(--tw-bg-opacity, 1));
}
.bg-core-900 {
--tw-bg-opacity: 1;
background-color: rgb(10 10 20 / var(--tw-bg-opacity, 1));
}
.bg-core-950 {
--tw-bg-opacity: 1;
background-color: rgb(13 13 22 / var(--tw-bg-opacity, 1));
}
.bg-dark_gray {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-discord {
--tw-bg-opacity: 1;
background-color: rgb(88 101 242 / var(--tw-bg-opacity, 1));
}
.bg-error\/10 {
background-color: rgb(255 0 0 / 0.1);
}
.bg-error\/5 {
background-color: rgb(255 0 0 / 0.05);
}
.bg-frog_green {
--tw-bg-opacity: 1;
background-color: rgb(55 194 94 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-green {
--tw-bg-opacity: 1;
background-color: rgb(22 241 219 / var(--tw-bg-opacity, 1));
}
.bg-indigo-600 {
--tw-bg-opacity: 1;
background-color: rgb(88 80 236 / var(--tw-bg-opacity, 1));
}
.bg-lavender-500 {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.bg-pink {
--tw-bg-opacity: 1;
background-color: rgb(252 30 100 / var(--tw-bg-opacity, 1));
}
.bg-primary\/20 {
background-color: rgb(255 46 121 / 0.2);
}
.bg-purple-500 {
--tw-bg-opacity: 1;
background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-purple-500\/\[0\.03\] {
background-color: rgb(168 85 247 / 0.03);
}
.bg-red {
--tw-bg-opacity: 1;
background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1));
}
.bg-success\/15 {
background-color: rgb(55 194 94 / 0.15);
}
.bg-textcolor {
--tw-bg-opacity: 1;
background-color: rgb(227 230 240 / var(--tw-bg-opacity, 1));
}
.bg-thead_dark {
background-color: rgba(50, 56, 71, 0.8);
}
.bg-transparent {
background-color: transparent;
}
.bg-trow_dark {
background-color: rgba(50, 56, 71, 0.4);
}
.bg-warning\/10 {
background-color: rgb(255 184 106 / 0.1);
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
background-color: rgb(255 255 255 / 0.1);
}
.bg-yellow-500 {
--tw-bg-opacity: 1;
background-color: rgb(194 120 3 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.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);
}
.from-gray-800 {
--tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.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);
}
.to-gray-900 {
--tw-gradient-to: #111827 var(--tw-gradient-to-position);
}
.to-transparent {
--tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.bg-left-top {
background-position: left top;
}
.bg-no-repeat {
background-repeat: no-repeat;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.\!p-0 {
padding: 0px !important;
}
.p-0 {
padding: 0px;
}
.p-16 {
padding: 4rem;
}
.p-2 {
padding: 0.5rem;
}
.p-2\.5 {
padding: 0.625rem;
}
.p-3 {
padding: 0.75rem;
}
.p-4 {
padding: 1rem;
}
.p-6 {
padding: 1.5rem;
}
.p-8 {
padding: 2rem;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.px-\[10em\] {
padding-left: 10em;
padding-right: 10em;
}
.px-\[7px\] {
padding-left: 7px;
padding-right: 7px;
}
.py-0 {
padding-top: 0px;
padding-bottom: 0px;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.py-28 {
padding-top: 7rem;
padding-bottom: 7rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.py-\[14px\] {
padding-top: 14px;
padding-bottom: 14px;
}
.\!pt-0 {
padding-top: 0px !important;
}
.pb-0 {
padding-bottom: 0px;
}
.pb-1 {
padding-bottom: 0.25rem;
}
.pb-10 {
padding-bottom: 2.5rem;
}
.pb-20 {
padding-bottom: 5rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pb-40 {
padding-bottom: 160px;
}
.pb-7 {
padding-bottom: 1.75rem;
}
.pb-8 {
padding-bottom: 2rem;
}
.pb-9 {
padding-bottom: 2.25rem;
}
.pb-\[0\.30em\] {
padding-bottom: 0.30em;
}
.pb-\[10em\] {
padding-bottom: 10em;
}
.pb-\[20em\] {
padding-bottom: 20em;
}
.pb-\[2em\] {
padding-bottom: 2em;
}
.pb-\[8em\] {
padding-bottom: 8em;
}
.pl-2 {
padding-left: 0.5rem;
}
.pl-4 {
padding-left: 1rem;
}
.pl-5 {
padding-left: 1.25rem;
}
.pr-4 {
padding-right: 1rem;
}
.pr-5 {
padding-right: 1.25rem;
}
.pr-6 {
padding-right: 1.5rem;
}
.pt-0 {
padding-top: 0px;
}
.pt-12 {
padding-top: 3rem;
}
.pt-15 {
padding-top: 60px;
}
.pt-36 {
padding-top: 9rem;
}
.pt-4 {
padding-top: 1rem;
}
.pt-5 {
padding-top: 1.25rem;
}
.pt-7 {
padding-top: 1.75rem;
}
.pt-8 {
padding-top: 2rem;
}
.\!text-left {
text-align: left !important;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.\!text-right {
text-align: right !important;
}
.text-right {
text-align: right;
}
.align-baseline {
vertical-align: baseline;
}
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.\!text-sm {
font-size: 14px !important;
line-height: 20px !important;
}
.text-2xl {
font-size: 24px;
line-height: 28.8px;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.text-\[\.8em\] {
font-size: .8em;
}
.text-\[1\.25em\] {
font-size: 1.25em;
}
.text-\[13px\] {
font-size: 13px;
}
.text-base {
font-size: 16px;
line-height: 24px;
}
.text-lg {
font-size: 18px;
line-height: 27px;
}
.text-sm {
font-size: 14px;
line-height: 20px;
}
.text-xl {
font-size: 20px;
line-height: 28px;
}
.text-xs {
font-size: 12px;
line-height: 20px;
}
.font-bold {
font-weight: 700;
}
.font-light {
font-weight: 300;
}
.font-medium {
font-weight: 500;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
.italic {
font-style: italic;
}
.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);
}
.leading-4 {
line-height: 1rem;
}
.leading-6 {
line-height: 1.5rem;
}
.leading-8 {
line-height: 2rem;
}
.leading-9 {
line-height: 2.25rem;
}
.leading-\[150\%\] {
line-height: 150%;
}
.leading-\[3\.5rem\] {
line-height: 3.5rem;
}
.leading-\[3rem\] {
line-height: 3rem;
}
.leading-none {
line-height: 1;
}
.leading-relaxed {
line-height: 1.625;
}
.tracking-widest {
letter-spacing: 0.1em;
}
.text-\[\#5865F2\] {
--tw-text-opacity: 1;
color: rgb(88 101 242 / var(--tw-text-opacity, 1));
}
.text-\[\#FFD230\] {
--tw-text-opacity: 1;
color: rgb(255 210 48 / var(--tw-text-opacity, 1));
}
.text-blue-400 {
--tw-text-opacity: 1;
color: rgb(118 169 250 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgb(63 131 248 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(28 100 242 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
--tw-text-opacity: 1;
color: rgb(26 86 219 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
--tw-text-opacity: 1;
color: rgb(30 66 159 / var(--tw-text-opacity, 1));
}
.text-blue-900 {
--tw-text-opacity: 1;
color: rgb(35 56 118 / var(--tw-text-opacity, 1));
}
.text-core-300 {
--tw-text-opacity: 1;
color: rgb(188 188 200 / var(--tw-text-opacity, 1));
}
.text-core-400 {
--tw-text-opacity: 1;
color: rgb(129 129 140 / var(--tw-text-opacity, 1));
}
.text-core-500 {
--tw-text-opacity: 1;
color: rgb(79 79 85 / var(--tw-text-opacity, 1));
}
.text-core-600 {
--tw-text-opacity: 1;
color: rgb(59 59 68 / var(--tw-text-opacity, 1));
}
.text-dark_gray {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-discord {
--tw-text-opacity: 1;
color: rgb(88 101 242 / var(--tw-text-opacity, 1));
}
.text-error {
--tw-text-opacity: 1;
color: rgb(255 0 0 / var(--tw-text-opacity, 1));
}
.text-frog_green {
--tw-text-opacity: 1;
color: rgb(55 194 94 / var(--tw-text-opacity, 1));
}
.text-gray {
--tw-text-opacity: 1;
color: rgb(167 170 181 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green {
--tw-text-opacity: 1;
color: rgb(22 241 219 / var(--tw-text-opacity, 1));
}
.text-greener {
--tw-text-opacity: 1;
color: rgb(0 255 10 / var(--tw-text-opacity, 1));
}
.text-lavender-400 {
--tw-text-opacity: 1;
color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.text-lavender-500 {
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-myblue {
--tw-text-opacity: 1;
color: rgb(0 240 255 / var(--tw-text-opacity, 1));
}
.text-orange-400 {
--tw-text-opacity: 1;
color: rgb(255 138 76 / var(--tw-text-opacity, 1));
}
.text-pink {
--tw-text-opacity: 1;
color: rgb(252 30 100 / var(--tw-text-opacity, 1));
}
.text-primary {
--tw-text-opacity: 1;
color: rgb(255 46 121 / var(--tw-text-opacity, 1));
}
.text-purple-400 {
--tw-text-opacity: 1;
color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-red {
--tw-text-opacity: 1;
color: rgb(255 0 0 / var(--tw-text-opacity, 1));
}
.text-rose-400 {
--tw-text-opacity: 1;
color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
--tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-success {
--tw-text-opacity: 1;
color: rgb(55 194 94 / var(--tw-text-opacity, 1));
}
.text-textcolor {
--tw-text-opacity: 1;
color: rgb(227 230 240 / var(--tw-text-opacity, 1));
}
.text-trow_dark {
color: rgba(50, 56, 71, 0.4);
}
.text-warning {
--tw-text-opacity: 1;
color: rgb(255 184 106 / var(--tw-text-opacity, 1));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
--tw-text-opacity: 1;
color: rgb(227 160 8 / var(--tw-text-opacity, 1));
}
.underline {
text-decoration-line: underline;
}
.line-through {
text-decoration-line: line-through;
}
.no-underline {
text-decoration-line: none;
}
.decoration-\[\#3A2767\] {
text-decoration-color: #3A2767;
}
.decoration-dotted {
text-decoration-style: dotted;
}
.underline-offset-8 {
text-underline-offset: 8px;
}
.placeholder-core-400::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(129 129 140 / var(--tw-placeholder-opacity, 1));
}
.placeholder-core-400::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(129 129 140 / var(--tw-placeholder-opacity, 1));
}
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.opacity-25 {
opacity: 0.25;
}
.opacity-30 {
opacity: 0.3;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-60 {
opacity: 0.6;
}
.opacity-75 {
opacity: 0.75;
}
.mix-blend-plus-lighter {
mix-blend-mode: plus-lighter;
}
.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);
}
.shadow-lg {
--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);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
.outline {
outline-style: solid;
}
.ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-\[\#141421\] {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(20 20 33 / var(--tw-ring-opacity, 1));
}
.ring-white\/10 {
--tw-ring-color: rgb(255 255 255 / 0.1);
}
.blur {
--tw-blur: blur(8px);
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);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.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;
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.delay-75 {
transition-delay: 75ms;
}
.duration-150 {
transition-duration: 150ms;
}
.duration-200 {
transition-duration: 200ms;
}
.duration-300 {
transition-duration: 300ms;
}
.duration-700 {
transition-duration: 700ms;
}
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* Self-hosted fonts (performance optimization) */
/* External dependencies */
/* Design System v2 - Base Layer */
/* Global overrides */
input::-moz-placeholder {
opacity: 1 !important;
}
input::placeholder {
opacity: 1 !important;
}
@media (min-width: 1536px) {
.\32xl\:container {
width: 100%;
}
@media (min-width: 420px) {
.\32xl\:container {
max-width: 420px;
}
}
@media (min-width: 640px) {
.\32xl\:container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.\32xl\:container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.\32xl\:container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.\32xl\:container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.\32xl\:container {
max-width: 1536px;
}
}
}
.focus-within\:border-lavender-500:focus-within {
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}
.focus-within\:ring-2:focus-within {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-within\:ring-lavender-500\/20:focus-within {
--tw-ring-color: rgb(99 102 241 / 0.2);
}
.hover\:scale-110:hover {
--tw-scale-x: 1.1;
--tw-scale-y: 1.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));
}
.hover\:bg-blue-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(26 86 219 / var(--tw-bg-opacity, 1));
}
.hover\:bg-core-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(30 30 40 / var(--tw-bg-opacity, 1));
}
.hover\:bg-core-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
}
.hover\:bg-core-800\/50:hover {
background-color: rgb(20 20 30 / 0.5);
}
.hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.hover\:bg-lavender-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(129 140 248 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/20:hover {
background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-opacity-50:hover {
--tw-bg-opacity: 0.5;
}
.hover\:text-blue-700:hover {
--tw-text-opacity: 1;
color: rgb(26 86 219 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover {
--tw-text-opacity: 1;
color: rgb(30 66 159 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-300:hover {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-lavender-300:hover {
--tw-text-opacity: 1;
color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.hover\:text-lavender-400:hover {
--tw-text-opacity: 1;
color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:opacity-100:hover {
opacity: 1;
}
.hover\: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);
}
.hover\:ring-white\/10:hover {
--tw-ring-color: rgb(255 255 255 / 0.1);
}
.hover\:transition-opacity:hover {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.focus\:border-blue-500:focus {
--tw-border-opacity: 1;
border-color: rgb(63 131 248 / var(--tw-border-opacity, 1));
}
.focus\:border-pink:focus {
--tw-border-opacity: 1;
border-color: rgb(252 30 100 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-0:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-blue-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity, 1));
}
.focus\:ring-error:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(255 0 0 / var(--tw-ring-opacity, 1));
}
.focus\:ring-gray-300:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}
.focus\:ring-pink:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(252 30 100 / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
}
.focus\:ring-offset-core-900:focus {
--tw-ring-offset-color: #0A0A14;
}
.disabled\:cursor-not-allowed:disabled {
cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
opacity: 0.5;
}
.group:hover .group-hover\: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));
}
.group:hover .group-hover\:text-core-200 {
--tw-text-opacity: 1;
color: rgb(235 235 239 / var(--tw-text-opacity, 1));
}
.dark\:border-gray-600:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.dark\:bg-gray-700:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-800:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dark\:text-gray-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dark\:text-white:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}
.dark\:placeholder-gray-400:is(.dark *)::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}
.dark\:focus\:border-pink:focus:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(252 30 100 / var(--tw-border-opacity, 1));
}
.dark\:focus\:ring-pink:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(252 30 100 / var(--tw-ring-opacity, 1));
}
@media not all and (min-width: 1024px) {
.max-lg\:col-span-2 {
grid-column: span 2 / span 2;
}
.max-lg\:grid {
display: grid;
}
.max-lg\:hidden {
display: none;
}
.max-lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.max-lg\:border-b {
border-bottom-width: 1px;
}
.max-lg\:border-core-750 {
--tw-border-opacity: 1;
border-color: rgb(26 26 36 / var(--tw-border-opacity, 1));
}
.max-lg\:bg-core-800 {
--tw-bg-opacity: 1;
background-color: rgb(20 20 30 / var(--tw-bg-opacity, 1));
}
.max-lg\:bg-core-850 {
--tw-bg-opacity: 1;
background-color: rgb(17 17 35 / var(--tw-bg-opacity, 1));
}
.max-lg\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.max-lg\:py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.max-lg\:font-medium {
font-weight: 500;
}
.max-lg\:hover\:bg-transparent:hover {
background-color: transparent;
}
}
@media (max-width: 420px) {
.max-\[420px\]\:w-full {
width: 100%;
}
}
@media (max-width: 48px) {
.max-\[48px\]\:ml-auto {
margin-left: auto;
}
}
@media (min-width: 420px) {
.xs\:inline-flex {
display: inline-flex;
}
.xs\:hidden {
display: none;
}
}
@media (min-width: 640px) {
.sm\:-bottom-\[4\.5rem\] {
bottom: -4.5rem;
}
.sm\:col-span-6 {
grid-column: span 6 / span 6;
}
.sm\:mx-6 {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.sm\:ml-3 {
margin-left: 0.75rem;
}
.sm\:mr-6 {
margin-right: 1.5rem;
}
.sm\:mt-0 {
margin-top: 0px;
}
.sm\:mt-6 {
margin-top: 1.5rem;
}
.sm\:inline-block {
display: inline-block;
}
.sm\:flex {
display: flex;
}
.sm\:h-10 {
height: 2.5rem;
}
.sm\:w-1\/2 {
width: 50%;
}
.sm\:w-1\/3 {
width: 33.333333%;
}
.sm\:w-64 {
width: 16rem;
}
.sm\:w-auto {
width: auto;
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:flex-row {
flex-direction: row;
}
.sm\:flex-nowrap {
flex-wrap: nowrap;
}
.sm\:items-center {
align-items: center;
}
.sm\:justify-between {
justify-content: space-between;
}
.sm\:gap-8 {
gap: 2rem;
}
.sm\:overflow-x-auto {
overflow-x: auto;
}
.sm\:p-8 {
padding: 2rem;
}
.sm\:px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.sm\:px-16 {
padding-left: 4rem;
padding-right: 4rem;
}
.sm\:pl-12 {
padding-left: 3rem;
}
.sm\:pr-12 {
padding-right: 3rem;
}
.sm\:text-lg {
font-size: 18px;
line-height: 27px;
}
.sm\:text-sm {
font-size: 14px;
line-height: 20px;
}
.sm\:text-xl {
font-size: 20px;
line-height: 28px;
}
}
@media (min-width: 768px) {
.md\:col-span-2 {
grid-column: span 2 / span 2;
}
.md\:mx-12 {
margin-left: 3rem;
margin-right: 3rem;
}
.md\:-mt-6 {
margin-top: -1.5rem;
}
.md\:-mt-\[10em\] {
margin-top: -10em;
}
.md\:mb-\[5em\] {
margin-bottom: 5em;
}
.md\:h-12 {
height: 3rem;
}
.md\:h-auto {
height: auto;
}
.md\:w-1\/2 {
width: 50%;
}
.md\:w-1\/3 {
width: 33.333333%;
}
.md\:w-11\/12 {
width: 91.666667%;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:flex-row {
flex-direction: row;
}
.md\:items-end {
align-items: flex-end;
}
.md\:justify-between {
justify-content: space-between;
}
.md\:gap-0 {
gap: 0px;
}
.md\:gap-20 {
gap: 5rem;
}
.md\:border-b-0 {
border-bottom-width: 0px;
}
.md\:border-r {
border-right-width: 1px;
}
.md\:p-12 {
padding: 3rem;
}
.md\:px-0 {
padding-left: 0px;
padding-right: 0px;
}
.md\:px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.md\:px-14 {
padding-left: 3.5rem;
padding-right: 3.5rem;
}
.md\:py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.md\:py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.md\:pb-\[16em\] {
padding-bottom: 16em;
}
.md\:pl-24 {
padding-left: 6rem;
}
.md\:pr-24 {
padding-right: 6rem;
}
.md\:text-left {
text-align: left;
}
.md\:text-2xl {
font-size: 24px;
line-height: 28.8px;
}
.md\:text-5xl {
font-size: 3rem;
line-height: 1;
}
}
@media (min-width: 1024px) {
.lg\:left-1\/2 {
left: 50%;
}
.lg\:order-2 {
order: 2;
}
.lg\:col-span-1 {
grid-column: span 1 / span 1;
}
.lg\:col-span-10 {
grid-column: span 10 / span 10;
}
.lg\:col-span-2 {
grid-column: span 2 / span 2;
}
.lg\:col-span-3 {
grid-column: span 3 / span 3;
}
.lg\:col-start-2 {
grid-column-start: 2;
}
.lg\:ml-0 {
margin-left: 0px;
}
.lg\:ml-auto {
margin-left: auto;
}
.lg\:mt-auto {
margin-top: auto;
}
.lg\:block {
display: block;
}
.lg\:flex {
display: flex;
}
.lg\:min-h-\[100vh\] {
min-height: 100vh;
}
.lg\:w-10\/12 {
width: 83.333333%;
}
.lg\:w-\[344px\] {
width: 344px;
}
.lg\:w-\[60\%\] {
width: 60%;
}
.lg\:w-auto {
width: auto;
}
.lg\:w-full {
width: 100%;
}
.lg\:min-w-\[545px\] {
min-width: 545px;
}
.lg\:max-w-\[25em\] {
max-width: 25em;
}
.lg\:max-w-\[min\(545px\2c calc\(100vw-2rem\)\)\] {
max-width: min(545px,calc(100vw - 2rem));
}
.lg\:max-w-none {
max-width: none;
}
.lg\:-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));
}
.lg\:-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));
}
.lg\:translate-y-0 {
--tw-translate-y: 0px;
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));
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:flex-col {
flex-direction: column;
}
.lg\:flex-nowrap {
flex-wrap: nowrap;
}
.lg\:items-start {
align-items: flex-start;
}
.lg\:items-end {
align-items: flex-end;
}
.lg\:items-center {
align-items: center;
}
.lg\:items-stretch {
align-items: stretch;
}
.lg\:justify-start {
justify-content: flex-start;
}
.lg\:justify-between {
justify-content: space-between;
}
.lg\:gap-16 {
gap: 4rem;
}
.lg\:gap-3 {
gap: 0.75rem;
}
.lg\:gap-6 {
gap: 1.5rem;
}
.lg\:gap-8 {
gap: 2rem;
}
.lg\:overflow-auto {
overflow: auto;
}
.lg\:rounded-3xl {
border-radius: 1.5rem;
}
.lg\:rounded-\[inherit\] {
border-radius: inherit;
}
.lg\:border {
border-width: 1px;
}
.lg\:border-r {
border-right-width: 1px;
}
.lg\:border-r-0 {
border-right-width: 0px;
}
.lg\:border-core-800 {
--tw-border-opacity: 1;
border-color: rgb(20 20 30 / var(--tw-border-opacity, 1));
}
.lg\:bg-core-900 {
--tw-bg-opacity: 1;
background-color: rgb(10 10 20 / var(--tw-bg-opacity, 1));
}
.lg\:p-0 {
padding: 0px;
}
.lg\:px-24 {
padding-left: 6rem;
padding-right: 6rem;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.lg\:px-\[6rem\] {
padding-left: 6rem;
padding-right: 6rem;
}
.lg\:py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.lg\:pb-16 {
padding-bottom: 4rem;
}
.lg\:pb-9 {
padding-bottom: 2.25rem;
}
.lg\:pr-\[97px\] {
padding-right: 97px;
}
.lg\:pt-7 {
padding-top: 1.75rem;
}
.lg\:pt-8 {
padding-top: 2rem;
}
.lg\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.lg\:text-xl {
font-size: 20px;
line-height: 28px;
}
.lg\:shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
}
@media (min-width: 1280px) {
.xl\:-mx-\[8\%\] {
margin-left: -8%;
margin-right: -8%;
}
.xl\:px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
}
@media (min-width: 1536px) {
.\32xl\:-mx-\[12\%\] {
margin-left: -12%;
margin-right: -12%;
}
.\32xl\:w-8\/12 {
width: 66.666667%;
}
.\32xl\:max-w-\[95\%\] {
max-width: 95%;
}
}
.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
text-align: right;
}
@media not all and (min-width: 1024px) {
.max-lg\:\[\&_tbody\]\:contents tbody {
display: contents;
}
.max-lg\:\[\&_thead\]\:contents thead {
display: contents;
}
.max-lg\:\[\&_tr\]\:contents tr {
display: contents;
}
}