* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
:root {
--navy: #020a17;
--navy2: #031126;
--card: rgba(3, 20, 40, .92);
--cyan: #08d9ff;
--blue: #119eff;
--purple: #9d42ff;
--pink: #ff26d7;
--text: #f4f7ff;
--muted: #bbc8da;
}
body {
margin: 0;
min-width: 320px;
overflow-x: hidden;
color: var(--text);
background:
radial-gradient(
circle at 50% 20%,
#073160 0,
#020d21 35%,
#010815 70%
);
font-family:
"Segoe UI",
Arial,
sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
.content-width {
width: min(1180px, calc(100% - 48px));
margin: auto;
}
/* =========================================================
HEADER
========================================================= */
.topbar {
position: relative;
z-index: 50;
background:
linear-gradient(
90deg,
rgba(2, 12, 28, .98),
rgba(2, 16, 38, .96)
);
border-bottom: 1px solid rgba(17, 184, 255, .22);
}
.header-inner {
width: min(1220px, calc(100% - 44px));
min-height: 78px;
margin: auto;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 28px;
}
.logo-block {
display: flex;
align-items: center;
gap: 10px;
}
.logo-block img {
width: 56px;
height: 56px;
object-fit: contain;
filter:
drop-shadow(0 0 12px rgba(17, 211, 255, .35))
drop-shadow(0 0 15px rgba(249, 37, 221, .28));
}
.logo-block strong {
display: block;
font-family: "Arial Black", "Segoe UI", sans-serif;
font-size: 26px;
line-height: 1;
letter-spacing: -.04em;
}
.logo-block strong span {
background:
linear-gradient(
90deg,
#43c8ff,
#ab50ff,
#ff35dc
);
background-clip: text;
color: transparent;
}
.logo-block small {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.8px;
line-height: 1;
color: #14d9ff;
white-space: nowrap;
}
.main-nav {
display: flex;
justify-content: center;
gap: 27px;
}
.main-nav a {
position: relative;
color: #e5efff;
padding: 27px 0 23px;
font-size: 13px;
font-weight: 600;
}
.main-nav a.active::after,
.main-nav a:hover::after {
content: "";
position: absolute;
height: 2px;
left: 0;
right: 0;
bottom: 17px;
background: var(--cyan);
box-shadow: 0 0 10px var(--cyan);
}
.header-actions {
position: relative;
}
.aussie {
position: absolute;
right: 0;
top: -14px;
white-space: nowrap;
color: #a8b8d1;
font-size: 7px;
letter-spacing: .08em;
}
.aussie b {
color: var(--cyan);
}
.header-buttons {
display: flex;
align-items: center;
gap: 10px;
}
.login-btn {
min-width: 87px;
padding: 11px 20px;
text-align: center;
border: 1px solid #17bff4;
border-radius: 6px;
background: rgba(3, 20, 40, .75);
font-size: 13px;
font-weight: 700;
}
.gradient-btn {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 9px;
min-height: 52px;
padding: 0 25px;
border-radius: 7px;
color: white;
font-weight: 900;
background:
linear-gradient(
100deg,
#06c9ff 0%,
#6870ff 47%,
#ff22d1 100%
);
border: 1px solid rgba(55, 219, 255, .8);
box-shadow:
0 0 18px rgba(9, 208, 255, .25),
0 0 22px rgba(255, 34, 209, .2);
}
.gradient-btn.small {
min-height: 39px;
padding: 0 18px;
font-size: 12px;
}
/* =========================================================
HERO
========================================================= */
.hero {
position: relative;
min-height: 505px;
overflow: hidden;
border-bottom: 1px solid rgba(18, 189, 255, .2);
}
.hero-bg {
position: absolute;
inset: 0;
background:
url("./assets/hero-background.png")
center 43% / cover no-repeat;
}
.hero-shade {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(1, 10, 24, .97) 0%,
rgba(1, 12, 29, .90) 30%,
rgba(2, 14, 35, .47) 55%,
rgba(3, 7, 27, .18) 100%
);
}
.hero-inner {
position: relative;
z-index: 2;
width: min(1180px, calc(100% - 48px));
min-height: 505px;
margin: auto;
display: grid;
grid-template-columns: .95fr 1.05fr;
align-items: center;
}
.hero-copy {
z-index: 5;
padding: 40px 0 33px;
}
.hero-kicker {
margin-bottom: 10px;
color: var(--cyan);
font-size: 14px;
font-weight: 950;
letter-spacing: .22em;
}
.hero h1 {
margin: 0;
font-family: "Arial Black", Impact, sans-serif;
font-size: clamp(49px, 5.2vw, 68px);
line-height: .91;
letter-spacing: -.045em;
}
.hero h1 > span {
display: block;
}
.gradient-text {
margin: 5px 0;
background:
linear-gradient(
90deg,
#ff34d7,
#ba4dff 45%,
#10d5ff
);
background-clip: text;
color: transparent;
}
.hero-copy > p {
width: min(510px, 100%);
margin: 15px 0 20px;
color: #edf5ff;
font-size: 15px;
line-height: 1.52;
text-shadow: 0 2px 5px rgba(0,0,0,.8);
}
.hero-buttons {
display: flex;
gap: 12px;
}
.hero-button {
min-width: 204px;
}
.windows-btn {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 10px;
min-height: 52px;
padding: 0 18px;
border: 1px solid var(--cyan);
border-radius: 7px;
background: rgba(1, 16, 37, .8);
color: white;
font-size: 13px;
font-weight: 800;
box-shadow: inset 0 0 25px rgba(11, 157, 255, .08);
}
.windows-icon {
color: #6bdcff;
font-size: 25px;
}
.trust-row {
display: flex;
align-items: center;
gap: 24px;
margin-top: 18px;
color: #f0f5ff;
font-size: 11px;
}
.trust-row div {
display: flex;
align-items: center;
gap: 7px;
}
.trust-row span {
color: var(--cyan);
font-size: 20px;
}
/* CHARACTER */
.hero-character {
position: absolute;
z-index: 3;
right: -20px;
bottom: -4px;
height: 485px;
width: 585px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.hero-character img {
position: relative;
z-index: 2;
height: 490px;
width: auto;
object-fit: contain;
filter:
drop-shadow(0 0 11px rgba(255, 30, 207, .7))
drop-shadow(0 0 17px rgba(0, 201, 255, .45));
}
.character-glow {
position: absolute;
width: 360px;
height: 360px;
right: 100px;
bottom: 40px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(255, 29, 210, .32),
rgba(30, 116, 255, .17) 45%,
transparent 72%
);
filter: blur(28px);
}
/* =========================================================
FEATURES
========================================================= */
.feature-strip {
padding: 0 0 22px;
background:
linear-gradient(
180deg,
rgba(3, 19, 39, .97),
#020d1d
);
}
.feature-grid {
position: relative;
z-index: 10;
margin-top: -5px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.feature-card {
min-height: 163px;
padding: 18px 21px;
border: 1px solid #087bb1;
border-radius: 8px;
background:
linear-gradient(
160deg,
rgba(5, 35, 62, .97),
rgba(3, 20, 39, .97)
);
box-shadow:
inset 0 0 30px rgba(6, 98, 161, .07),
0 8px 25px rgba(0,0,0,.2);
}
.feature-symbol {
height: 42px;
margin-bottom: 4px;
display: flex;
align-items: center;
color: #34c8ff;
font-size: 35px;
font-weight: 900;
text-shadow: 0 0 18px rgba(34, 201, 255, .48);
}
.feature-card h3 {
margin: 5px 0 6px;
font-family: "Arial Black", sans-serif;
font-size: 16px;
}
.feature-card p {
margin: 0;
color: #d0d9e9;
font-size: 13px;
line-height: 1.42;
}
/* =========================================================
HOW IT WORKS
========================================================= */
.how-section {
padding: 7px 0 25px;
background:
radial-gradient(
circle at 50% 40%,
rgba(7, 47, 78, .45),
transparent 53%
),
#020d1d;
}
.section-title-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.section-title-row h2,
.plans-title h2 {
margin: 0;
font-family: "Arial Black", sans-serif;
font-size: 39px;
line-height: 1;
}
.section-title-row h2 span,
.plans-title h2 span {
background:
linear-gradient(
90deg,
#2bd9ff,
#018edb
);
background-clip: text;
color: transparent;
}
.section-title-row p,
.plans-title p {
margin: 0;
color: var(--cyan);
font-size: 11px;
letter-spacing: .35em;
}
.how-grid {
margin-top: 12px;
display: grid;
grid-template-columns:
1fr auto 1fr auto 1fr auto 1fr;
align-items: center;
}
.how-step {
text-align: center;
}
.circle-icon {
width: 68px;
height: 68px;
margin: auto;
display: grid;
place-items: center;
border: 3px solid #f02ee8;
border-radius: 50%;
color: var(--cyan);
font-size: 34px;
background: rgba(2, 22, 43, .72);
box-shadow:
0 0 15px rgba(237, 36, 231, .5),
inset 0 0 17px rgba(13, 191, 255, .12);
}
.how-step h3 {
margin: 9px 0 5px;
font-family: "Arial Black", sans-serif;
font-size: 17px;
}
.how-step p {
width: 205px;
max-width: 100%;
margin: auto;
color: #e7effb;
font-size: 13px;
line-height: 1.35;
}
.step-arrow {
color: var(--cyan);
font-size: 56px;
font-weight: 200;
text-shadow: 0 0 14px rgba(16, 205, 255, .6);
}
/* =========================================================
PRICING
========================================================= */
.plans-section {
padding: 7px 0 23px;
background:
radial-gradient(
circle at 50% 0%,
rgba(5, 45, 75, .4),
transparent 45%
),
#020d1d;
}
.plans-title {
display: flex;
align-items: flex-end;
gap: 15px;
margin-bottom: 14px;
}
.plans-title h2 {
font-size: 18px;
color: var(--cyan);
letter-spacing: .14em;
}
.plans-title p {
font-size: 9px;
}
.plans-layout {
display: grid;
grid-template-columns:
.78fr .8fr 1.14fr;
gap: 18px;
}
.plan-card,
.download-card {
position: relative;
min-height: 365px;
padding: 23px 20px 18px;
border-radius: 9px;
background:
linear-gradient(
145deg,
rgba(5, 26, 49, .98),
rgba(2, 13, 30, .98)
);
}
.free-card {
border: 2px solid #00c9ff;
box-shadow:
0 0 15px rgba(0, 199, 255, .38),
inset 0 0 35px rgba(0, 172, 255, .06);
}
.pro-card {
border: 2px solid #f02adc;
box-shadow:
0 0 15px rgba(240, 42, 220, .38),
inset 0 0 35px rgba(226, 31, 221, .06);
}
.plan-card h3 {
margin: 0;
font-family: "Arial Black", sans-serif;
font-size: 28px;
}
.free-card h3 {
color: var(--cyan);
}
.pro-card h3 {
color: #ff4be7;
}
.plan-subtitle {
margin: 1px 0 5px;
font-size: 13px;
}
.plan-number {
margin-top: 3px;
text-align: center;
font-family: "Arial Black", sans-serif;
font-size: 48px;
line-height: 1;
}
.unlimited {
margin-top: 8px;
text-align: center;
color: #ff4be8;
font-family: "Arial Black", sans-serif;
font-size: 31px;
}
.bot-slots {
text-align: center;
font-family: "Arial Black", sans-serif;
font-size: 15px;
}
.bot-slots.blue {
color: var(--cyan);
}
.bot-slots.pink {
color: #ff4be8;
}
.plan-card ul {
list-style: none;
margin: 13px 0 15px;
padding: 0;
}
.plan-card li {
position: relative;
padding: 4px 0 4px 26px;
font-size: 13px;
}
.plan-card li::before {
content: "\2713";
position: absolute;
left: 2px;
color: var(--cyan);
font-size: 19px;
font-weight: 950;
}
.blue-plan-btn,
.pink-plan-btn {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
min-height: 49px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
border-radius: 6px;
color: white;
font-weight: 900;
}
.blue-plan-btn {
background:
linear-gradient(
90deg,
#08cfff,
#0a89ff
);
box-shadow: 0 0 17px rgba(0, 195, 255, .35);
}
.pink-plan-btn {
background:
linear-gradient(
90deg,
#ff27d1,
#ae36fc
);
box-shadow: 0 0 17px rgba(245, 35, 210, .35);
}
.popular {
position: absolute;
right: 13px;
top: 10px;
padding: 5px 11px;
border-radius: 5px;
background:
linear-gradient(
90deg,
#f32cd8,
#8447ff
);
font-size: 9px;
font-weight: 900;
}
/* =========================================================
APP DOWNLOAD
========================================================= */
.download-card {
border: 1px solid #0789ca;
padding: 15px 15px 12px;
}
.download-title {
display: flex;
align-items: center;
gap: 14px;
margin: 0 13px 10px;
}
.windows-large {
color: #5ed8ff;
font-size: 55px;
}
.download-title h3 {
margin: 0;
font-family: "Arial Black", sans-serif;
font-size: 23px;
}
.download-title p {
margin: 1px 0 0;
color: #30ccff;
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
}
.app-preview {
overflow: hidden;
height: 205px;
border: 1px solid #087ab4;
border-radius: 7px;
background: #020b19;
}
.app-preview-top {
height: 35px;
padding: 0 10px;
display: flex;
justify-content: space-between;
align-items: center;
color: #76849b;
font-size: 9px;
border-bottom: 1px solid #0a3556;
}
.mini-logo {
display: flex;
align-items: center;
gap: 5px;
}
.mini-logo img {
width: 24px;
}
.mini-logo strong {
color: white;
font-size: 11px;
}
.mini-logo strong span {
color: #d34cff;
}
.preview-body {
position: relative;
height: 170px;
display: grid;
grid-template-columns: 62px 1fr 82px;
}
.preview-sidebar {
padding: 8px;
background: #06142a;
border-right: 1px solid #0a3556;
}
.preview-sidebar div {
height: 32px;
display: grid;
place-items: center;
margin-bottom: 3px;
color: #6683a4;
border-radius: 4px;
}
.preview-sidebar .selected {
color: #28d5ff;
background: #096aa3;
}
.preview-main {
padding: 11px 8px;
}
.preview-main > strong {
display: block;
margin-bottom: 5px;
font-size: 10px;
}
.preview-row {
height: 24px;
margin: 3px 0;
padding: 0 7px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 4px;
border: 1px solid #153a5c;
border-radius: 4px;
color: #c9d6e7;
background: #07182e;
font-size: 8px;
}
.preview-row b {
color: #42e7b9;
}
.preview-character {
position: relative;
overflow: hidden;
}
.preview-character img {
position: absolute;
height: 170px;
left: -35px;
bottom: -10px;
}
.download-button {
width: 100%;
min-height: 48px;
margin-top: 10px;
font-size: 15px;
}
.download-button span {
font-size: 24px;
}
.download-meta {
margin-top: 7px;
text-align: center;
color: #becde0;
font-size: 11px;
}
.download-meta b {
padding: 0 7px;
color: #4889b4;
}
/* =========================================================
CTA
========================================================= */
.bottom-cta {
position: relative;
min-height: 108px;
display: flex;
align-items: center;
overflow: hidden;
border-top: 1px solid #d22ee6;
border-bottom: 1px solid #6639c9;
}
.bottom-bg {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(3, 20, 40, .8),
rgba(4, 26, 65, .45)
),
url("./assets/hero-background.png")
center 42% / cover no-repeat;
}
.bottom-inner {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
}
.bottom-inner h2 {
margin: 0;
color: #17d5ff;
font-family: "Arial Black", sans-serif;
font-size: 22px;
}
.bottom-inner h2 span {
color: #ff38d8;
}
.bottom-inner p {
margin: 4px 0 0;
font-size: 14px;
}
.cta-button {
min-width: 235px;
}
/* =========================================================
FOOTER
========================================================= */
footer {
padding: 23px 0 18px;
background:
linear-gradient(
180deg,
#031126,
#010915
);
}
.footer-main {
min-height: 83px;
display: grid;
grid-template-columns: auto 1fr 1fr;
align-items: start;
gap: 32px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 8px;
}
.footer-logo img {
width: 54px;
}
.footer-logo strong {
display: block;
font-family: "Arial Black", sans-serif;
font-size: 23px;
}
.footer-logo strong span {
background:
linear-gradient(
90deg,
#46c9ff,
#ff36d8
);
background-clip: text;
color: transparent;
}
.footer-logo small {
display: block;
color: var(--cyan);
font-size: 8px;
font-weight: 900;
}
.footer-links {
display: flex;
align-items: center;
gap: 22px;
padding-top: 24px;
}
.footer-links a {
color: #e5edf8;
font-size: 11px;
}
.footer-copy {
text-align: right;
color: #c0cada;
font-size: 9px;
}
.footer-copy p {
margin: 2px 0;
}
.footer-copy strong {
display: block;
margin-top: 10px;
font-size: 10px;
}
.copyright {
padding-top: 9px;
display: flex;
justify-content: space-between;
color: #9caac0;
font-size: 9px;
}
.copyright b {
color: var(--cyan);
letter-spacing: .15em;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1050px) {
.main-nav {
gap: 14px;
}
.aussie {
display: none;
}
.hero-character {
right: -100px;
}
.trust-row {
gap: 13px;
}
}
@media (max-width: 850px) {
.header-inner {
grid-template-columns: 1fr auto;
}
.main-nav {
display: none;
}
.hero {
min-height: 720px;
}
.hero-inner {
min-height: 720px;
grid-template-columns: 1fr;
}
.hero-copy {
text-align: center;
}
.hero-copy > p {
margin-left: auto;
margin-right: auto;
}
.hero-buttons,
.trust-row {
justify-content: center;
}
.hero-character {
height: 365px;
width: 100%;
right: auto;
left: 0;
bottom: 0;
}
.hero-character img {
height: 380px;
}
.feature-grid {
grid-template-columns: repeat(2, 1fr);
}
.section-title-row {
display: block;
text-align: center;
}
.section-title-row p {
margin-top: 8px;
}
.how-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.step-arrow {
display: none;
}
.plans-layout {
grid-template-columns: repeat(2, 1fr);
}
.download-card {
grid-column: 1 / -1;
}
.footer-main {
grid-template-columns: 1fr;
text-align: center;
}
.footer-logo,
.footer-links {
justify-content: center;
}
.footer-copy {
text-align: center;
}
}
@media (max-width: 590px) {
.content-width {
width: calc(100% - 26px);
}
.header-inner {
width: calc(100% - 24px);
}
.logo-block img {
width: 43px;
}
.logo-block strong {
font-size: 18px;
}
.logo-block small {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.8px;
line-height: 1;
color: #14d9ff;
white-space: nowrap;
}
.login-btn {
display: inline-flex !important;
}
.hero {
min-height: 760px;
}
.hero h1 {
font-size: 47px;
}
.hero-copy > p {
font-size: 13px;
}
.hero-buttons {
flex-direction: column;
}
.hero-button {
width: 100%;
}
.trust-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.hero-character img {
height: 360px;
}
.feature-grid {
grid-template-columns: 1fr;
}
.how-grid {
grid-template-columns: 1fr;
}
.plans-layout {
grid-template-columns: 1fr;
}
.download-card {
grid-column: auto;
}
.plans-title {
display: block;
text-align: center;
}
.plans-title p {
margin-top: 7px;
}
.bottom-inner {
display: block;
text-align: center;
padding: 22px 0;
}
.cta-button {
margin-top: 13px;
}
.copyright {
flex-direction: column;
gap: 8px;
text-align: center;
}
}
/* ===== HERO CHARACTER MATCH REFERENCE ===== */
@media (min-width: 851px) {
.hero {
min-height: 535px;
}
.hero-inner {
min-height: 535px;
}
.hero-character {
right: -5px;
bottom: -8px;
width: 650px;
height: 535px;
}
.hero-character img {
height: 610px;
width: auto;
max-width: none;
object-fit: contain;
object-position: bottom center;
}
.character-glow {
width: 430px;
height: 430px;
right: 85px;
bottom: 20px;
}
}
/* ===== HERO GIRL POSITION V2 ===== */
@media (min-width: 851px) {
.hero {
min-height: 560px;
}
.hero-inner {
min-height: 560px;
}
.hero-character {
right: 70px;
bottom: -10px;
width: 650px;
height: 560px;
}
.hero-character img {
height: 575px;
width: auto;
max-width: none;
object-fit: contain;
object-position: bottom center;
}
.character-glow {
width: 440px;
height: 440px;
right: 65px;
bottom: 25px;
}
}
/* ===== FLUID RESPONSIVE WIDTH V1 ===== */
.content-width,
.hero-inner {
width: min(94vw, 1600px);
}
.header-inner {
width: min(94vw, 1600px);
}
/* Large desktop */
@media (min-width: 1400px) {
.hero-inner {
grid-template-columns: .92fr 1.08fr;
}
}
/* Normal desktop / windowed browser */
@media (max-width: 1200px) {
.content-width,
.hero-inner,
.header-inner {
width: calc(100% - 40px);
}
.main-nav {
gap: 18px;
}
}
/* Smaller window */
@media (max-width: 950px) {
.content-width,
.hero-inner,
.header-inner {
width: calc(100% - 30px);
}
}
/* Mobile */
@media (max-width: 590px) {
.content-width,
.hero-inner,
.header-inner {
width: calc(100% - 22px);
}
}
/* ===== WINDOWED RESPONSIVE FIX V1 ===== */
/*
Full-size desktop stays exactly as designed.
These changes apply only when the browser is windowed
between tablet size and normal desktop size.
*/
@media (min-width: 851px) and (max-width: 1150px) {
/* HEADER */
.header-inner {
gap: 14px;
}
.logo-block img {
width: 46px;
height: 46px;
}
.logo-block strong {
font-size: 20px;
}
.logo-block small {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.8px;
line-height: 1;
color: #14d9ff;
white-space: nowrap;
}
.main-nav {
gap: 12px;
}
.main-nav a {
white-space: nowrap;
font-size: 11px;
}
.login-btn {
min-width: 72px;
padding-left: 13px;
padding-right: 13px;
}
.gradient-btn.small {
padding-left: 13px;
padding-right: 13px;
font-size: 10px;
}
/* HERO */
.hero,
.hero-inner {
min-height: 535px;
}
.hero-inner {
grid-template-columns: .93fr 1.07fr;
}
.hero-copy {
max-width: 470px;
padding-top: 35px;
padding-bottom: 30px;
}
.hero h1 {
font-size: clamp(44px, 5.2vw, 55px);
}
.hero-copy > p {
width: min(430px, 100%);
font-size: 13px;
}
.hero-button {
min-width: 0;
}
.gradient-btn.hero-button {
width: 205px;
}
.windows-btn.hero-button {
width: 195px;
}
.trust-row {
gap: 12px;
font-size: 9px;
}
/* GIRL - prevent overlap with hero text */
.hero-character {
width: 500px;
height: 525px;
right: -35px;
bottom: -8px;
}
.hero-character img {
height: 520px;
width: auto;
max-width: none;
}
.character-glow {
width: 370px;
height: 370px;
right: 45px;
bottom: 25px;
}
}
/* ===== HERO REFERENCE POLISH V1 ===== */
/* Stronger cinematic overlay like the approved reference */
.hero-shade {
background:
linear-gradient(
90deg,
rgba(1, 8, 21, .98) 0%,
rgba(1, 10, 26, .94) 22%,
rgba(2, 12, 31, .78) 40%,
rgba(2, 12, 31, .34) 58%,
rgba(2, 8, 25, .08) 76%,
rgba(2, 7, 22, .02) 100%
);
}
/* Background sits more like the reference artwork */
.hero-bg {
background-position: center 45%;
}
/* Hero text */
.hero-copy {
padding-top: 45px;
padding-bottom: 35px;
}
.hero-kicker {
margin-bottom: 13px;
color: #19ddff;
font-size: 13px;
font-weight: 950;
letter-spacing: .24em;
text-shadow: 0 0 10px rgba(25, 221, 255, .25);
}
.hero h1 {
font-family: "Arial Black", Impact, "Segoe UI", sans-serif;
font-weight: 950;
text-shadow:
0 3px 8px rgba(0,0,0,.34);
}
.gradient-text {
background:
linear-gradient(
90deg,
#ff32d6 0%,
#cc43fa 42%,
#7c65ff 70%,
#18d7ff 100%
);
background-clip: text;
color: transparent;
filter:
drop-shadow(0 0 8px rgba(255, 42, 213, .12));
}
.hero-copy > p {
margin-top: 18px;
margin-bottom: 22px;
color: #f2f6ff;
line-height: 1.5;
text-shadow:
0 2px 5px rgba(0,0,0,.92);
}
/* Hero buttons */
.hero-buttons {
gap: 13px;
}
.gradient-btn.hero-button {
background:
linear-gradient(
100deg,
#08c9ff 0%,
#6873ff 48%,
#ff28d3 100%
);
border-color: #16d7ff;
box-shadow:
0 0 20px rgba(4, 203, 255, .25),
0 0 24px rgba(255, 33, 209, .18);
}
.windows-btn {
border-color: #12cef9;
background:
linear-gradient(
180deg,
rgba(3, 25, 49, .90),
rgba(1, 13, 30, .94)
);
box-shadow:
inset 0 0 22px rgba(18, 197, 255, .06),
0 0 12px rgba(15, 197, 255, .08);
}
/* Small feature/trust row below buttons */
.trust-row {
margin-top: 17px;
color: #f2f6ff;
}
.trust-row span {
color: #15d9ff;
text-shadow:
0 0 9px rgba(21, 217, 255, .38);
}
/* Large desktop composition */
@media (min-width: 1151px) {
.hero-copy {
max-width: 590px;
}
.hero h1 {
font-size: clamp(58px, 4.35vw, 72px);
}
.hero-copy > p {
width: 520px;
max-width: 100%;
font-size: 15px;
}
.hero-character {
right: -55px;
}
}
/* Keep medium/windowed mode balanced */
@media (min-width: 851px) and (max-width: 1150px) {
.hero-copy {
padding-top: 37px;
}
.hero-kicker {
font-size: 12px;
}
.hero-copy > p {
line-height: 1.45;
}
}
/* Small-screen hero */
@media (max-width: 850px) {
.hero-shade {
background:
linear-gradient(
180deg,
rgba(1, 8, 22, .88) 0%,
rgba(1, 10, 26, .72) 48%,
rgba(1, 8, 22, .28) 100%
);
}
}
/* =========================================================
HERO BACKGROUND FIT V3
Keep hero copy clear + push scenery/bus lower & further back
========================================================= */
@media (min-width: 1001px) {
.hero {
min-height: 500px;
overflow: hidden;
}
/*
Background only.
The girl remains a completely separate foreground image.
*/
.hero-bg {
inset: 0;
/*
Slightly enlarge the overall canvas while shifting the
focal point right/down. This creates more calm space
behind the headline.
*/
background-size: auto 116%;
background-repeat: no-repeat;
background-position: 58% 58%;
}
/*
Stronger clean reading area behind the words.
It fades away before reaching the character.
*/
.hero-shade {
background:
linear-gradient(
90deg,
rgba(1, 8, 22, 0.98) 0%,
rgba(1, 9, 25, 0.95) 20%,
rgba(1, 10, 28, 0.88) 32%,
rgba(1, 10, 30, 0.67) 43%,
rgba(1, 10, 30, 0.32) 53%,
rgba(1, 10, 30, 0.08) 65%,
rgba(1, 10, 30, 0.00) 76%
);
}
/*
Keep wording comfortably inside its own area.
*/
.hero-copy {
width: 505px;
max-width: 505px;
position: relative;
z-index: 5;
}
.hero-copy > p {
max-width: 485px;
}
/*
Character stays on the right and above the scenery.
*/
.hero-character {
z-index: 4;
}
}
/* Tablet */
@media (max-width: 1000px) and (min-width: 701px) {
.hero-bg {
background-size: auto 110%;
background-position: 62% 55%;
}
}
/* Mobile */
@media (max-width: 700px) {
.hero-bg {
background-size: cover;
background-position: 68% center;
}
}
/* =========================================================
HERO FULLSCREEN FIT V4
Keep full 2048x682 artwork visible
========================================================= */
@media (min-width: 1201px) {
.hero {
overflow: hidden;
}
.hero-bg {
inset: 0;
/* Stop zooming/cropping the wide artwork */
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center top;
}
/* Keep left side readable without hiding the artwork */
.hero-shade {
background:
linear-gradient(
90deg,
rgba(1, 8, 22, 0.94) 0%,
rgba(1, 8, 22, 0.88) 20%,
rgba(1, 8, 22, 0.66) 34%,
rgba(1, 8, 22, 0.28) 47%,
rgba(1, 8, 22, 0.06) 58%,
rgba(1, 8, 22, 0.00) 67%
);
}
/* Give the heading enough width so MADE SIMPLE stays together */
.hero-copy {
width: 540px;
max-width: 540px;
z-index: 5;
}
.hero h1 {
width: 540px;
max-width: 540px;
}
/* Girl is separate  slightly smaller and shifted left
so the right-side background wording stays visible */
.hero-character {
right: 115px;
width: 430px;
max-width: 430px;
}
.hero-character img {
width: 100%;
max-width: 100%;
height: auto;
}
}
/* Normal desktop / windowed browser */
@media (min-width: 901px) and (max-width: 1200px) {
.hero-bg {
background-size: auto 100%;
background-position: 62% top;
background-repeat: no-repeat;
}
.hero-character {
right: 35px;
width: 390px;
}
}
/* Small screens */
@media (max-width: 900px) {
.hero-bg {
background-size: cover;
background-position: 66% center;
}
}
/* =========================================================
CADDYLOBBY HERO RESPONSIVE DESKTOP V5
Fullscreen + windowed desktop use same composition
========================================================= */
/* ---------- FULLSCREEN / LARGE DESKTOP ---------- */
@media (min-width: 1201px) {
.hero {
overflow: hidden;
}
.hero-bg {
background-size: cover;
background-repeat: no-repeat;
background-position: right center;
}
/* Give headline enough room for MADE SIMPLE. */
.hero-copy {
width: 620px;
max-width: 620px;
}
.hero h1 {
width: 620px;
max-width: 620px;
}
.hero h1 > span:last-child {
white-space: nowrap;
}
}
/* ---------- WINDOWED DESKTOP ---------- */
@media (min-width: 901px) and (max-width: 1200px) {
/*
The important change:
don't allow the hero to become a huge tall portrait-like area.
*/
.hero {
height: 430px;
min-height: 430px;
max-height: 430px;
overflow: hidden;
}
/*
Crop from the LEFT dark area when necessary.
Preserve the RIGHT edge containing:
SAME LOBBY MORE VIBES
crown
PLAY YOUR WAY
*/
.hero-bg {
inset: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: right center;
}
.hero-inner {
height: 100%;
min-height: 0;
align-items: center;
}
/*
Compact left content so the entire desktop hero
fits inside the shorter windowed height.
*/
.hero-copy {
width: 440px;
max-width: 440px;
z-index: 6;
}
.hero-kicker {
margin-bottom: 12px;
}
.hero h1 {
width: 440px;
max-width: 440px;
font-size: 50px;
line-height: .94;
margin-bottom: 15px;
}
.hero h1 > span:last-child {
white-space: nowrap;
}
.hero-copy > p {
width: 420px;
max-width: 420px;
font-size: 13px;
line-height: 1.45;
margin-bottom: 17px;
}
.hero-buttons {
display: flex;
flex-wrap: nowrap;
gap: 12px;
}
.hero-button {
min-height: 48px;
padding: 0 17px;
white-space: nowrap;
font-size: 13px;
}
.trust-row {
margin-top: 15px;
gap: 13px;
flex-wrap: nowrap;
}
.trust-row > div {
white-space: nowrap;
font-size: 9px;
}
/*
Girl stays separate from background.
Shrink and move her inward so the graffiti
remains visible on the far right.
*/
.hero-character {
width: 305px;
max-width: 305px;
right: 135px;
bottom: 0;
z-index: 5;
}
.hero-character img {
width: 100%;
max-width: 100%;
height: auto;
max-height: 425px;
object-fit: contain;
object-position: bottom center;
}
/*
Darken only the left reading area.
Don't cover the right-side artwork.
*/
.hero-shade {
background:
linear-gradient(
90deg,
rgba(1, 8, 22, .97) 0%,
rgba(1, 8, 22, .92) 24%,
rgba(1, 8, 22, .70) 38%,
rgba(1, 8, 22, .30) 51%,
rgba(1, 8, 22, .06) 62%,
rgba(1, 8, 22, 0) 70%
);
}
}
/* ---------- SLIGHTLY NARROWER WINDOWED DESKTOP ---------- */
@media (min-width: 760px) and (max-width: 900px) {
.hero {
height: 420px;
min-height: 420px;
overflow: hidden;
}
.hero-bg {
background-size: cover;
background-position: right center;
}
.hero-copy {
width: 405px;
max-width: 405px;
}
.hero h1 {
width: 405px;
max-width: 405px;
font-size: 45px;
line-height: .94;
}
.hero h1 > span:last-child {
white-space: nowrap;
}
.hero-copy > p {
max-width: 390px;
font-size: 12px;
}
.hero-character {
width: 275px;
right: 105px;
bottom: 0;
}
.hero-character img {
max-height: 415px;
}
}
/* Mobile remains a separate layout */
@media (max-width: 759px) {
.hero-bg {
background-position: 72% center;
}
}
/* =========================================================
CADDYLOBBY FULL-WIDTH DESKTOP
Remove centred narrow desktop container
========================================================= */
@media (min-width: 760px) {
/*
Main reusable page wrapper.
No fixed maximum width on desktop.
*/
.content-width {
width: calc(100% - 40px) !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
/*
Hero content uses the whole browser width.
*/
.hero-inner {
width: calc(100% - 40px) !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
/*
Feature cards stretch across desktop rather than
sitting inside a narrow centred box.
*/
.feature-strip {
width: calc(100% - 40px) !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
/*
How It Works and pricing areas.
*/
.how-section,
.plans-section {
width: calc(100% - 40px) !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
/*
Footer also follows the wider desktop layout.
*/
.footer-main {
width: calc(100% - 40px) !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* Large/fullscreen monitor */
@media (min-width: 1400px) {
/*
Only 20px breathing room at each edge instead of
the large centred margins you currently have.
*/
.content-width,
.hero-inner,
.feature-strip,
.how-section,
.plans-section,
.footer-main {
width: calc(100% - 40px) !important;
max-width: none !important;
}
}
/* =========================================================
CADDYLOBBY WIDE DESKTOP LAYOUT
Match reference: small outer gutters, wide page content
========================================================= */
@media (min-width: 1100px) {
/*
Reference-style outer spacing:
around 4% from each side of the screen.
*/
.content-width,
.hero-inner,
.feature-strip,
.how-section,
.plans-section,
.footer-main {
width: auto !important;
max-width: none !important;
margin-left: 4vw !important;
margin-right: 4vw !important;
}
/*
Keep the hero itself full-width.
Only its CONTENT gets the 4vw gutter.
*/
.hero {
width: 100% !important;
max-width: none !important;
}
/*
Keep the background touching both screen edges.
*/
.hero-bg,
.hero-shade {
left: 0 !important;
right: 0 !important;
}
/*
Feature cards use the wider available space.
*/
.feature-strip {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
/*
How It Works keeps four even columns across the width.
*/
.how-steps {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
/*
Pricing section remains balanced:
Free + Pro + App card.
*/
.plans-grid,
.pricing-grid {
width: 100% !important;
max-width: none !important;
}
}
/* Extra-wide / fullscreen PC */
@media (min-width: 1600px) {
.content-width,
.hero-inner,
.feature-strip,
.how-section,
.plans-section,
.footer-main {
margin-left: 3.5vw !important;
margin-right: 3.5vw !important;
}
}
/* =========================================================
HERO POSITION POLISH
- move girl slightly left
- shift right-side background wording slightly left
========================================================= */
/* ---------- LARGE DESKTOP / FULLSCREEN ---------- */
@media (min-width: 1400px) {
/*
Shift the whole background artwork a little left
so the far-right graffiti sits further in from the edge.
*/
.hero-bg {
background-position: right 38px center !important;
}
/*
Move the separate girl left a bit more.
Bigger right value = further left.
*/
.hero-character {
right: 165px !important;
}
/*
Keep the girl height as-is.
*/
.hero-character img {
max-height: 100% !important;
}
}
/* ---------- NORMAL DESKTOP / WINDOWED ---------- */
@media (min-width: 1000px) and (max-width: 1399px) {
.hero-bg {
background-position: right 28px center !important;
}
.hero-character {
right: 125px !important;
}
}
/* ---------- SMALLER DESKTOP ---------- */
@media (min-width: 760px) and (max-width: 999px) {
.hero-bg {
background-position: right 18px center !important;
}
.hero-character {
right: 95px !important;
}
}
/* =========================================================
HERO POSITION POLISH
- move girl slightly left
- shift right-side background wording slightly left
========================================================= */
/* ---------- LARGE DESKTOP / FULLSCREEN ---------- */
@media (min-width: 1400px) {
/*
Shift the whole background artwork a little left
so the far-right graffiti sits further in from the edge.
*/
.hero-bg {
background-position: right 38px center !important;
}
/*
Move the separate girl left a bit more.
Bigger right value = further left.
*/
.hero-character {
right: 165px !important;
}
/*
Keep the girl height as-is.
*/
.hero-character img {
max-height: 100% !important;
}
}
/* ---------- NORMAL DESKTOP / WINDOWED ---------- */
@media (min-width: 1000px) and (max-width: 1399px) {
.hero-bg {
background-position: right 28px center !important;
}
.hero-character {
right: 125px !important;
}
}
/* ---------- SMALLER DESKTOP ---------- */
@media (min-width: 760px) and (max-width: 999px) {
.hero-bg {
background-position: right 18px center !important;
}
.hero-character {
right: 95px !important;
}
}
/* CADDYLOBBY CURRENT HERO BACKGROUND */
.hero-bg {
background-image: url("./assets/hero-background-clean.png") !important;
}
/* =========================================================
CADDYLOBBY MAIN HERO SLOGAN
SAME LOBBY MORE VIBES + crown
========================================================= */
.hero-inner {
position: relative !important;
}
.hero-inner::after {
content: "";
position: absolute;
z-index: 9;
pointer-events: none;
top: 72px;
right: 32px;
width: 220px;
height: 330px;
background-image: url("./assets/hero-text-main.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 1200px) {
.hero-inner::after {
width: 190px;
height: 285px;
right: 22px;
top: 78px;
}
}
/* =========================================================
CADDYLOBBY PLAY YOUR WAY
Separate transparent PNG
========================================================= */
.hero-inner::before {
content: "";
position: absolute;
z-index: 9;
pointer-events: none;
right: 42px;
bottom: 42px;
width: 155px;
height: 105px;
background-image: url("./assets/hero-text-play.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 1200px) {
.hero-inner::before {
right: 30px;
bottom: 38px;
width: 135px;
height: 95px;
}
}
/* =========================================================
CADDYLOBBY COMBINED HERO TEXT
Replaces both previous separate text PNG layers
========================================================= */
/* Remove old PLAY YOUR WAY pseudo layer */
.hero-inner::before {
content: none !important;
display: none !important;
background-image: none !important;
}
/* Replace old main slogan layer with complete combined PNG */
.hero-inner::after {
content: "" !important;
display: block !important;
position: absolute !important;
z-index: 9 !important;
pointer-events: none !important;
top: 65px !important;
right: 28px !important;
width: 225px !important;
height: 405px !important;
background-image: url("./assets/hero-text-combined.png") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}
/* Windowed desktop */
@media (min-width: 760px) and (max-width: 1200px) {
.hero-inner::after {
top: 72px !important;
right: 22px !important;
width: 185px !important;
height: 330px !important;
}
}
/* =========================================================
FULLSCREEN ONLY
Bring combined slogan closer to the girl like windowed mode
========================================================= */
@media (min-width: 1201px) {
.hero-inner::after {
right: 100px !important;
}
}
/* =========================================================
FULLSCREEN ONLY
Move combined slogan down and slightly outward
========================================================= */
@media (min-width: 1201px) {
.hero-inner::after {
top: 95px !important;
right: 70px !important;
}
}
/* =========================================================
FULLSCREEN ONLY
Slightly lower + slightly inward
========================================================= */
@media (min-width: 1201px) {
.hero-inner::after {
top: 115px !important;
right: 85px !important;
}
}
/* =========================================================
FULLSCREEN ONLY
Slightly enlarge combined hero slogan
========================================================= */
@media (min-width: 1201px) {
.hero-inner::after {
top: 115px !important;
right: 85px !important;
width: 250px !important;
height: 450px !important;
}
}
/* =========================================================
FULLSCREEN ONLY
Slightly more outward and slightly larger
========================================================= */
@media (min-width: 1201px) {
.hero-inner::after {
top: 115px !important;
right: 70px !important;
width: 262px !important;
height: 472px !important;
}
}
/* =========================================================
FULLSCREEN ONLY
Larger combined hero text
Position unchanged
========================================================= */
@media (min-width: 1201px) {
.hero-inner::after {
top: 115px !important;
right: 70px !important;
width: 290px !important;
height: 522px !important;
}
}
/* =========================================================
FULLSCREEN ONLY
Slightly more outward and slightly higher
========================================================= */
@media (min-width: 1201px) {
.hero-inner::after {
top: 105px !important;
right: 55px !important;
width: 290px !important;
height: 522px !important;
}
}
/* =========================================================
FULLSCREEN ONLY
Further out and more up
========================================================= */
@media (min-width: 1201px) {
.hero-inner::after {
top: 85px !important;
right: 35px !important;
width: 290px !important;
height: 522px !important;
}
}
/* =========================================================
FULLSCREEN ONLY
Move combined hero text further up
========================================================= */
@media (min-width: 1201px) {
.hero-inner::after {
top: 65px !important;
right: 35px !important;
width: 290px !important;
height: 522px !important;
}
}
/* =========================================================
FULLSCREEN ONLY
Tiny move further up
========================================================= */
@media (min-width: 1201px) {
.hero-inner::after {
top: 55px !important;
right: 35px !important;
width: 290px !important;
height: 522px !important;
}
}
/* FULLSCREEN ONLY - tiny final move upward */
@media (min-width: 1201px) {
.hero-inner::after {
top: 50px !important;
right: 35px !important;
width: 290px !important;
height: 522px !important;
}
}
/* FULLSCREEN ONLY - move slogan higher again */
@media (min-width: 1201px) {
.hero-inner::after {
top: 35px !important;
right: 35px !important;
width: 290px !important;
height: 522px !important;
}
}
/* FULLSCREEN ONLY - move slogan slightly higher */
@media (min-width: 1201px) {
.hero-inner::after {
top: 15px !important;
right: 35px !important;
width: 290px !important;
height: 522px !important;
}
}
/* =========================================================
GIRL + COMBINED HERO TEXT
Move both left together
========================================================= */
/* FULLSCREEN */
@media (min-width: 1201px) {
.hero-character {
translate: -30px 0 !important;
}
.hero-inner::after {
right: 65px !important;
}
}
/* WINDOWED DESKTOP */
@media (min-width: 760px) and (max-width: 1200px) {
.hero-character {
translate: -30px 0 !important;
}
.hero-inner::after {
right: 52px !important;
}
}
/* =========================================================
FEATURE CARDS
Add breathing room below hero
========================================================= */
.feature-strip {
margin-top: 24px !important;
}
/* =========================================================
CADDYLOBBY REFERENCE HEADER
HEADER ONLY
========================================================= */
@media (min-width: 760px) {
.topbar {
width: 100% !important;
background: rgba(2, 10, 23, 0.98) !important;
border-bottom: 1px solid rgba(0, 210, 255, 0.35) !important;
}
.header-inner {
width: 100% !important;
max-width: none !important;
min-height: 76px !important;
margin: 0 !important;
padding: 8px 3.2vw !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: 280px minmax(0, 1fr) 300px !important;
align-items: center !important;
column-gap: 22px !important;
}
/* -------------------------
LOGO BLOCK
------------------------- */
.logo-block {
justify-self: start !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
}
.logo-block img {
width: 58px !important;
height: auto !important;
flex: 0 0 auto !important;
}
.logo-block strong {
font-size: 28px !important;
line-height: 1 !important;
letter-spacing: -0.5px !important;
white-space: nowrap !important;
}
.logo-block small {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.8px;
line-height: 1;
color: #14d9ff;
white-space: nowrap;
}
/* -------------------------
CENTRE NAV
------------------------- */
.main-nav {
justify-self: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 30px !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
.main-nav a {
position: relative !important;
margin: 0 !important;
padding: 27px 0 23px !important;
font-size: 14px !important;
line-height: 1 !important;
}
.main-nav a.active::after,
.main-nav a:hover::after {
height: 2px !important;
bottom: 16px !important;
}
/* -------------------------
RIGHT SIDE
------------------------- */
.header-actions {
justify-self: end !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 6px !important;
margin: 0 !important;
}
.aussie {
margin: 0 2px 1px 0 !important;
font-size: 8px !important;
line-height: 1 !important;
letter-spacing: 0.8px !important;
text-align: right !important;
white-space: nowrap !important;
}
.header-buttons {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
margin: 0 !important;
}
.header-buttons .login-btn {
width: 92px !important;
min-width: 92px !important;
height: 42px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 16px !important;
border: 1px solid #18c9ff !important;
border-radius: 6px !important;
font-size: 13px !important;
line-height: 1 !important;
}
.header-buttons .gradient-btn.small {
width: 142px !important;
min-width: 142px !important;
height: 42px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 18px !important;
border-radius: 6px !important;
font-size: 12px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
}
/* =========================================================
WINDOWED DESKTOP
Keep reference layout but tighten spacing slightly
========================================================= */
@media (min-width: 760px) and (max-width: 1100px) {
.header-inner {
grid-template-columns: 235px minmax(0, 1fr) 215px !important;
column-gap: 12px !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
.logo-block {
gap: 9px !important;
}
.logo-block img {
width: 50px !important;
}
.logo-block strong {
font-size: 22px !important;
}
.logo-block small {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.8px;
line-height: 1;
color: #14d9ff;
white-space: nowrap;
}
.main-nav {
gap: 16px !important;
}
.main-nav a {
font-size: 11px !important;
}
.aussie {
font-size: 6.5px !important;
}
.header-buttons {
gap: 8px !important;
}
.header-buttons .login-btn {
width: 72px !important;
min-width: 72px !important;
height: 40px !important;
font-size: 12px !important;
}
.header-buttons .gradient-btn.small {
width: 105px !important;
min-width: 105px !important;
height: 40px !important;
padding: 0 8px !important;
font-size: 9px !important;
}
}
/* =========================================================
FULLSCREEN HEADER ONLY
Match reference: logo -> nav -> flexible space -> buttons
========================================================= */
@media (min-width: 1201px) {
.header-inner {
grid-template-columns: 300px auto 1fr !important;
}
.main-nav {
justify-self: start !important;
margin-left: 18px !important;
}
.header-actions {
grid-column: 3 !important;
justify-self: end !important;
}
}
/* =========================================================
FULLSCREEN HEADER ONLY
Windowed remains unchanged
========================================================= */
@media (min-width: 1201px) {
/* Larger CADDYLOBBY */
.logo-block strong {
font-size: 32px !important;
line-height: 0.95 !important;
letter-spacing: -0.4px !important;
}
/* Larger + stretched FORTNITE LOBBY BOT */
.logo-block small {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.8px;
line-height: 1;
color: #14d9ff;
white-space: nowrap;
}
/* Slightly larger navigation */
.main-nav a {
font-size: 15px !important;
}
/* Slightly larger Aussie/global line */
.aussie {
font-size: 9px !important;
letter-spacing: 0.9px !important;
}
/* Move Login + Create Account down slightly */
.header-buttons {
transform: translateY(4px) !important;
}
}
/* =========================================================
FULLSCREEN HEADER POLISH ONLY
Windowed version remains untouched
========================================================= */
@media (min-width: 1500px) {
.header-inner {
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
column-gap: 42px !important;
}
/* CADDYLOBBY WORDMARK */
.logo-block strong {
font-size: 34px !important;
line-height: 0.95 !important;
font-weight: 700 !important;
letter-spacing: -0.5px !important;
}
/* FORTNITE LOBBY BOT */
.logo-block small {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.8px;
line-height: 1;
color: #14d9ff;
white-space: nowrap;
}
/* RECENTRE MENU */
.main-nav {
justify-self: center !important;
margin: 0 !important;
gap: 32px !important;
}
.main-nav a {
font-size: 16px !important;
}
/* RIGHT HEADER AREA */
.header-actions {
min-width: 285px !important;
align-items: stretch !important;
}
/* AUSSIE MADE / GLOBAL PLAYERS */
.aussie {
width: 100% !important;
text-align: center !important;
font-size: 10px !important;
letter-spacing: 0.9px !important;
margin: 0 !important;
}
/* MOVE BUTTONS DOWN */
.header-buttons {
justify-content: center !important;
transform: translateY(7px) !important;
}
}
/* =========================================================
FULLSCREEN HEADER BRAND POLISH
- larger/skinnier CADDYLOBBY
- larger subtitle
- move brand block down a little
- larger menu
- larger aussie text centered above buttons
========================================================= */
@media (min-width: 1400px) {
.topbar {
min-height: 82px;
}
.header-inner {
min-height: 82px;
align-items: center;
}
.logo-block {
display: flex;
align-items: center;
gap: 14px;
padding-top: 8px;
}
.logo-block strong {
font-size: 30px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
line-height: 1 !important;
}
.logo-block small {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.8px;
line-height: 1;
color: #14d9ff;
white-space: nowrap;
}
.main-nav {
gap: 34px !important;
margin-left: 36px !important;
}
.main-nav a {
font-size: 19px !important;
}
.header-actions {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 6px;
}
.aussie {
font-size: 11px !important;
letter-spacing: 1px !important;
text-align: center !important;
width: 100% !important;
}
.header-buttons {
display: flex;
align-items: center;
gap: 10px;
margin-top: 2px;
}
.login-btn,
.gradient-btn.small {
min-height: 42px !important;
}
}
/* =========================================================
WINDOWED ONLY
Restore AUSSIE MADE / GLOBAL PLAYERS above buttons
========================================================= */
@media (min-width: 760px) and (max-width: 1200px) {
.header-actions {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.aussie {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
text-align: center !important;
font-size: 7.5px !important;
line-height: 1 !important;
letter-spacing: 0.7px !important;
margin: 0 0 5px 0 !important;
}
}
/* FULLSCREEN ONLY - shorten FORTNITE LOBBY BOT width */
@media (min-width: 1201px) {
.logo-block small {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.8px;
line-height: 1;
color: #14d9ff;
white-space: nowrap;
}
}
/* FULLSCREEN ONLY - make FORTNITE LOBBY BOT a little smaller again */
@media (min-width: 1201px) {
.logo-block small {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.8px;
line-height: 1;
color: #14d9ff;
white-space: nowrap;
}
}
/* =========================================================
HERO BACKGROUND - TOUCH RIGHT SCREEN EDGE
Fullscreen + windowed desktop
========================================================= */
@media (min-width: 760px) {
.hero {
width: 100vw !important;
max-width: none !important;
margin-right: 0 !important;
overflow: hidden !important;
}
.hero-bg,
.hero-shade {
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: none !important;
}
.hero-bg {
background-position: right center !important;
background-size: cover !important;
}
}
/* =========================================================
FINAL FULLSCREEN HEADER POLISH
Windowed remains untouched
========================================================= */
@media (min-width: 1201px) {
/* Move complete logo/brand block down slightly */
.logo-block {
transform: translateY(3px) !important;
}
/* Shorten FORTNITE LOBBY BOT slightly */
.logo-block small {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.8px;
line-height: 1;
color: #14d9ff;
white-space: nowrap;
}
/* Make Aussie/Global line clearer and centre over BOTH buttons */
.header-actions {
width: 285px !important;
min-width: 285px !important;
align-items: center !important;
}
.aussie {
display: block !important;
width: 100% !important;
text-align: center !important;
font-size: 11px !important;
line-height: 1 !important;
letter-spacing: 1px !important;
margin: 0 0 5px 0 !important;
}
.header-buttons {
width: 100% !important;
justify-content: center !important;
}
}
/* =========================================================
LOWER CADDYLOBBY TEXT UNDER THE LOGO
Move brand text down so the C in CADDY lines up better
with the top of the logo icon
========================================================= */
@media (min-width: 1200px) {
.logo-block strong,
.logo-block small {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.8px;
line-height: 1;
color: #14d9ff;
white-space: nowrap;
}
}
/* =========================================================
WINDOWED HEADER ONLY
Lower CADDYLOBBY + FORTNITE LOBBY BOT text
Logo icon stays exactly where it is
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.logo-block strong,
.logo-block small {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.8px;
line-height: 1;
color: #14d9ff;
white-space: nowrap;
}
}
/* =========================================================
AUSSIE MADE / GLOBAL PLAYERS
Final size + centering polish only
========================================================= */
/* FULLSCREEN */
@media (min-width: 1200px) {
.aussie {
display: block !important;
width: 100% !important;
text-align: center !important;
font-size: 12px !important;
line-height: 1 !important;
letter-spacing: 0.9px !important;
margin: 0 0 5px 0 !important;
}
}
/* WINDOWED DESKTOP */
@media (min-width: 760px) and (max-width: 1199px) {
.aussie {
display: block !important;
width: 100% !important;
text-align: center !important;
font-size: 8.5px !important;
line-height: 1 !important;
letter-spacing: 0.7px !important;
margin: 0 0 5px 0 !important;
}
}
/* =========================================================
WINDOWED HEADER ONLY
Gentle brand size increase
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.logo-block strong {
font-size: 24px !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
}
.logo-block small {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.8px;
line-height: 1;
color: #14d9ff;
white-space: nowrap;
}
}
/* =========================================================
FULLSCREEN ONLY
Larger AUSSIE MADE / GLOBAL PLAYERS
========================================================= */
@media (min-width: 1200px) {
.aussie {
display: block !important;
width: 100% !important;
text-align: center !important;
font-size: 13px !important;
line-height: 1 !important;
letter-spacing: 0.9px !important;
margin: 0 0 5px 0 !important;
}
}
/* WINDOWED ONLY - correct FORTNITE LOBBY BOT size */
@media (min-width: 760px) and (max-width: 1199px) {
.logo-block small {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
line-height: 1 !important;
transform: scaleX(1.04) !important;
transform-origin: left center !important;
}
}
/* =========================================================
CADDYLOBBY WORDMARK COLOUR FIX
CADDY = white
LOBBY = purple/pink gradient
========================================================= */
.logo-block strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.logo-block strong span {
color: transparent !important;
background: linear-gradient(
90deg,
#7b5cff 0%,
#b64cff 48%,
#ff3fcf 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* =========================================================
CADDYLOBBY NEON NAVIGATION
Different accent colour per menu item
========================================================= */
.main-nav a {
transition:
color 0.2s ease,
text-shadow 0.2s ease !important;
}
/* HOME */
.main-nav a:nth-child(1) {
color: #22e7ff !important;
}
/* FEATURES */
.main-nav a:nth-child(2) {
color: #35a7ff !important;
}
/* PRICING */
.main-nav a:nth-child(3) {
color: #9d63ff !important;
}
/* HOW IT WORKS */
.main-nav a:nth-child(4) {
color: #ff4fd8 !important;
}
/* DOWNLOAD */
.main-nav a:nth-child(5) {
color: #20e6c5 !important;
}
/* SUPPORT */
.main-nav a:nth-child(6) {
color: #ff5cf0 !important;
}
/* Matching neon underline colours */
.main-nav a:nth-child(1)::after {
background: #22e7ff !important;
box-shadow: 0 0 10px #22e7ff !important;
}
.main-nav a:nth-child(2)::after {
background: #35a7ff !important;
box-shadow: 0 0 10px #35a7ff !important;
}
.main-nav a:nth-child(3)::after {
background: #9d63ff !important;
box-shadow: 0 0 10px #9d63ff !important;
}
.main-nav a:nth-child(4)::after {
background: #ff4fd8 !important;
box-shadow: 0 0 10px #ff4fd8 !important;
}
.main-nav a:nth-child(5)::after {
background: #20e6c5 !important;
box-shadow: 0 0 10px #20e6c5 !important;
}
.main-nav a:nth-child(6)::after {
background: #ff5cf0 !important;
box-shadow: 0 0 10px #ff5cf0 !important;
}
/* Slight glow on hover */
.main-nav a:hover {
text-shadow: 0 0 10px currentColor !important;
}
/* =========================================================
CADDYLOBBY HERO LEFT SECTION POLISH
Text/buttons only - right artwork remains untouched
========================================================= */
/* LEVEL UP YOUR LOBBY */
.hero-kicker {
color: #22e7ff !important;
font-weight: 800 !important;
text-transform: uppercase !important;
text-shadow: 0 0 12px rgba(34, 231, 255, 0.32) !important;
}
/* MAIN HERO HEADLINE */
.hero-copy h1 {
margin-top: 14px !important;
margin-bottom: 18px !important;
line-height: 0.91 !important;
letter-spacing: -1.4px !important;
}
/* FORTNITE + MADE SIMPLE */
.hero-copy h1 .white {
color: #ffffff !important;
text-shadow: 0 2px 12px rgba(255,255,255,0.05) !important;
}
/* LOBBY BOT */
.hero-copy h1 .gradient-text {
color: transparent !important;
background: linear-gradient(
90deg,
#ff42d0 0%,
#d148df 35%,
#855cff 68%,
#32b9ff 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
filter: drop-shadow(0 0 8px rgba(198, 71, 255, 0.18)) !important;
}
/* DESCRIPTION */
.hero-copy > p {
max-width: 525px !important;
line-height: 1.55 !important;
color: rgba(255,255,255,0.95) !important;
}
/* HERO CTA BUTTONS */
.hero-copy .gradient-btn,
.hero-copy .button {
min-height: 48px !important;
padding-left: 22px !important;
padding-right: 22px !important;
border-radius: 6px !important;
font-weight: 800 !important;
}
/* Common hero trust/benefit class names - only apply if present */
.hero-trust,
.hero-meta,
.hero-benefits,
.hero-badges,
.hero-points {
margin-top: 16px !important;
gap: 22px !important;
}
.hero-trust *,
.hero-meta *,
.hero-benefits *,
.hero-badges *,
.hero-points * {
line-height: 1.2 !important;
}
/* =========================================================
FULLSCREEN
========================================================= */
@media (min-width: 1200px) {
.hero-kicker {
font-size: 15px !important;
letter-spacing: 3.1px !important;
}
.hero-copy h1 {
font-size: 64px !important;
}
.hero-copy > p {
font-size: 15px !important;
}
.hero-trust,
.hero-meta,
.hero-benefits,
.hero-badges,
.hero-points {
font-size: 12px !important;
}
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.hero-kicker {
font-size: 13px !important;
letter-spacing: 2.7px !important;
}
.hero-copy h1 {
line-height: 0.92 !important;
letter-spacing: -1px !important;
}
.hero-copy > p {
max-width: 455px !important;
font-size: 13.5px !important;
line-height: 1.5 !important;
}
.hero-copy .gradient-btn,
.hero-copy .button {
min-height: 46px !important;
}
}
/* =========================================================
HERO MORE BOTS / MORE OPTIONS / MORE FUN
========================================================= */
.hero-tagline {
margin-top: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1.6px;
color: #23e7ff;
text-shadow: 0 0 10px rgba(35, 231, 255, 0.25);
}
.hero-tagline span {
color: #d94cff;
text-shadow: 0 0 10px rgba(217, 76, 255, 0.25);
}
@media (min-width: 1200px) {
.hero-tagline {
font-size: 14px;
}
}
@media (min-width: 760px) and (max-width: 1199px) {
.hero-tagline {
font-size: 11px;
letter-spacing: 1.2px;
}
}
/* =========================================================
HERO LEFT SUPPORTING CONTENT - FINAL POLISH
Main headline / girl / artwork NOT changed
========================================================= */
/* DESCRIPTION */
.hero-copy > p {
color: rgba(255,255,255,0.97) !important;
font-weight: 500 !important;
}
/* MORE BOTS / MORE OPTIONS / MORE FUN */
.hero-tagline {
margin-top: 15px !important;
margin-bottom: 13px !important;
font-weight: 900 !important;
text-transform: uppercase !important;
}
/* CTA ROW */
.hero-buttons {
display: flex !important;
align-items: center !important;
margin-top: 0 !important;
}
/* BOTH CTA BUTTONS */
.hero-buttons .hero-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 7px !important;
font-weight: 800 !important;
white-space: nowrap !important;
}
/* TRUST / BENEFIT ROW */
.trust-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.trust-row > div {
display: flex !important;
align-items: center !important;
white-space: nowrap !important;
color: rgba(255,255,255,0.96) !important;
font-weight: 600 !important;
}
.trust-row > div > span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #22e7ff !important;
text-shadow: 0 0 10px rgba(34,231,255,0.55) !important;
}
/* =========================================================
FULLSCREEN
========================================================= */
@media (min-width: 1200px) {
/* Give supporting copy a little more usable width */
.hero-copy {
width: 600px !important;
max-width: 600px !important;
}
.hero-copy > p {
max-width: 595px !important;
font-size: 16px !important;
line-height: 1.48 !important;
}
.hero-tagline {
font-size: 14px !important;
letter-spacing: 1.7px !important;
}
.hero-buttons {
gap: 15px !important;
}
.hero-buttons .hero-button {
min-height: 56px !important;
font-size: 15px !important;
padding-left: 25px !important;
padding-right: 25px !important;
}
.hero-buttons .gradient-btn {
min-width: 220px !important;
}
.hero-buttons .windows-btn {
min-width: 220px !important;
}
.trust-row {
width: 555px !important;
max-width: 555px !important;
margin-top: 18px !important;
gap: 12px !important;
}
.trust-row > div {
gap: 7px !important;
font-size: 12px !important;
}
.trust-row > div > span {
min-width: 18px !important;
font-size: 18px !important;
}
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.hero-copy {
width: 455px !important;
max-width: 455px !important;
}
.hero-copy > p {
max-width: 455px !important;
font-size: 14px !important;
line-height: 1.48 !important;
}
.hero-tagline {
margin-top: 13px !important;
margin-bottom: 11px !important;
font-size: 11px !important;
letter-spacing: 1.25px !important;
}
.hero-buttons {
gap: 12px !important;
}
.hero-buttons .hero-button {
min-height: 50px !important;
font-size: 13px !important;
padding-left: 17px !important;
padding-right: 17px !important;
}
.hero-buttons .gradient-btn {
min-width: 205px !important;
}
.hero-buttons .windows-btn {
min-width: 195px !important;
}
.trust-row {
width: 430px !important;
max-width: 430px !important;
margin-top: 17px !important;
gap: 8px !important;
}
.trust-row > div {
gap: 5px !important;
font-size: 10px !important;
}
.trust-row > div > span {
min-width: 15px !important;
font-size: 15px !important;
}
}
/* =========================================================
WINDOWED HERO ONLY
Add extra vertical room for trust/benefit row
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.hero {
height: auto !important;
min-height: 480px !important;
padding-bottom: 46px !important;
box-sizing: border-box !important;
}
.hero-inner {
min-height: 480px !important;
padding-bottom: 46px !important;
box-sizing: border-box !important;
}
}
/* =========================================================
HERO ACTIONS + BENEFITS - REFERENCE STYLE
========================================================= */
.hero-buttons {
display: flex !important;
align-items: center !important;
gap: 16px !important;
}
.hero-buttons .hero-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 11px !important;
border-radius: 8px !important;
font-weight: 800 !important;
text-decoration: none !important;
white-space: nowrap !important;
}
.hero-button-arrow {
width: 19px !important;
height: 19px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 2.2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.windows-logo {
width: 23px !important;
height: 23px !important;
fill: #28dfff !important;
flex: 0 0 auto !important;
}
.windows-btn {
border: 1px solid #20dfff !important;
color: #ffffff !important;
background: rgba(2,12,27,0.78) !important;
box-shadow:
inset 0 0 18px rgba(20,210,255,0.05),
0 0 10px rgba(20,210,255,0.05) !important;
}
/* BENEFITS */
.trust-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.trust-item {
display: flex !important;
align-items: center !important;
gap: 9px !important;
white-space: nowrap !important;
}
.trust-icon {
width: 22px !important;
height: 22px !important;
fill: #20dfff !important;
color: #20dfff !important;
filter: drop-shadow(0 0 6px rgba(32,223,255,0.35)) !important;
flex: 0 0 auto !important;
}
.trust-icon .trust-cut {
fill: none !important;
stroke: #03101f !important;
stroke-width: 2.2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.australia-icon {
width: 25px !important;
}
.trust-label {
color: rgba(255,255,255,0.96) !important;
font-weight: 600 !important;
}
/* =========================================================
FULLSCREEN
========================================================= */
@media (min-width: 1200px) {
.hero-buttons .hero-button {
min-height: 58px !important;
font-size: 16px !important;
}
.hero-buttons .gradient-btn {
min-width: 225px !important;
}
.hero-buttons .windows-btn {
min-width: 230px !important;
}
.trust-row {
width: 560px !important;
max-width: 560px !important;
margin-top: 18px !important;
}
.trust-label {
font-size: 12px !important;
}
.trust-icon {
width: 23px !important;
height: 23px !important;
}
}
/* =========================================================
WINDOWED
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.hero-buttons {
gap: 12px !important;
}
.hero-buttons .hero-button {
min-height: 51px !important;
font-size: 13px !important;
}
.hero-buttons .gradient-btn {
min-width: 205px !important;
}
.hero-buttons .windows-btn {
min-width: 195px !important;
}
.trust-row {
width: 440px !important;
max-width: 440px !important;
margin-top: 18px !important;
}
.trust-item {
gap: 6px !important;
}
.trust-label {
font-size: 10px !important;
}
.trust-icon {
width: 18px !important;
height: 18px !important;
}
.australia-icon {
width: 21px !important;
}
}
/* Australian Hosted icon - clean Australia silhouette */
.australia-icon {
width: 27px !important;
height: 21px !important;
fill: #20dfff !important;
overflow: visible !important;
}
/* Australian Hosted icon - clean Australia silhouette */
.australia-icon {
width: 27px !important;
height: 21px !important;
fill: #20dfff !important;
overflow: visible !important;
}
/* =========================================================
AUSTRALIAN HOSTED ICON
Outline so it stays recognisable at small sizes
========================================================= */
.australia-icon {
width: 30px !important;
height: 24px !important;
overflow: visible !important;
flex: 0 0 auto !important;
}
.australia-icon .au-main {
fill: none !important;
stroke: #20dfff !important;
stroke-width: 2.8 !important;
stroke-linejoin: round !important;
stroke-linecap: round !important;
}
.australia-icon .au-tasmania {
fill: #20dfff !important;
stroke: none !important;
}
.australia-icon {
filter: drop-shadow(0 0 5px rgba(32,223,255,0.5)) !important;
}
/* AUSTRALIAN HOSTED PNG ICON */
.trust-row .trust-australia {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
white-space: nowrap !important;
}
.trust-row .trust-australia img {
width: 18px !important;
height: 18px !important;
object-fit: contain !important;
display: block !important;
flex: 0 0 18px !important;
}
.trust-row .trust-australia .trust-text {
display: inline-block !important;
}
/* AUSTRALIA HOSTED PNG FINAL */
.trust-row .australia-hosted-img {
display: block !important;
width: 25px !important;
height: 20px !important;
object-fit: contain !important;
flex: 0 0 25px !important;
filter:
drop-shadow(0 0 4px rgba(32,223,255,0.45)) !important;
}
@media (min-width: 760px) and (max-width: 1199px) {
.trust-row .australia-hosted-img {
width: 21px !important;
height: 17px !important;
flex-basis: 21px !important;
}
}
/* =========================================================
AUSTRALIAN HOSTED PNG - SIZE POLISH ONLY
========================================================= */
@media (min-width: 1200px) {
.trust-row .australia-hosted-img {
width: 30px !important;
height: 24px !important;
flex-basis: 30px !important;
}
}
@media (min-width: 760px) and (max-width: 1199px) {
.trust-row .australia-hosted-img {
width: 25px !important;
height: 20px !important;
flex-basis: 25px !important;
}
}
/* =========================================================
HERO LOBBY BOT - REFERENCE STYLE
LOBBY = pink/magenta
BOT = cyan/blue
========================================================= */
.hero-copy h1 .hero-lobby-bot {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: initial !important;
filter: none !important;
}
.hero-lobby-word {
color: #F339D3 !important;
-webkit-text-fill-color: #F339D3 !important;
text-shadow:
0 0 10px rgba(243,57,211,0.18) !important;
}
.hero-bot-word {
color: #21BFFF !important;
-webkit-text-fill-color: #21BFFF !important;
text-shadow:
0 0 10px rgba(33,191,255,0.18) !important;
}
/* =========================================================
FEATURE CARDS - REFERENCE STYLE
========================================================= */
.feature-strip {
gap: 16px !important;
}
/* ALL FOUR CARDS */
.feature-strip > * {
position: relative !important;
background:
radial-gradient(
circle at 50% 0%,
rgba(25, 147, 255, 0.10),
transparent 48%
),
linear-gradient(
145deg,
rgba(5, 28, 53, 0.96),
rgba(3, 15, 31, 0.98)
) !important;
border: 1px solid #168bd0 !important;
border-radius: 9px !important;
box-shadow:
inset 0 0 30px rgba(20, 135, 220, 0.045),
0 8px 22px rgba(0,0,0,0.20) !important;
overflow: hidden !important;
}
/* REMOVE PREVIOUS COLOURED TOP GLOW */
.feature-strip > *::before {
display: none !important;
}
/* ICONS - ALL CYAN LIKE REFERENCE */
.feature-strip .feature-symbol {
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 0 11px 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
color: #32CFFF !important;
-webkit-text-fill-color: #32CFFF !important;
font-weight: 900 !important;
text-shadow:
0 0 8px rgba(50,207,255,0.55),
0 0 16px rgba(50,207,255,0.22) !important;
}
/* HEADINGS */
.feature-strip h3 {
margin: 0 0 7px 0 !important;
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
font-weight: 800 !important;
line-height: 1.15 !important;
text-shadow: none !important;
}
/* DESCRIPTION */
.feature-strip p {
margin: 0 !important;
color: rgba(239,245,255,0.90) !important;
font-weight: 400 !important;
line-height: 1.48 !important;
}
/* VERY LIGHT HOVER ONLY */
.feature-strip > *:hover {
transform: translateY(-2px) !important;
border-color: #28C8FF !important;
box-shadow:
inset 0 0 30px rgba(20,135,220,0.06),
0 10px 26px rgba(0,0,0,0.25),
0 0 15px rgba(40,200,255,0.08) !important;
}
/* =========================================================
FULLSCREEN
========================================================= */
@media (min-width: 1200px) {
.feature-strip > * {
min-height: 160px !important;
padding: 20px 26px !important;
}
.feature-strip .feature-symbol {
font-size: 38px !important;
}
.feature-strip h3 {
font-size: 17px !important;
}
.feature-strip p {
max-width: 260px !important;
font-size: 13px !important;
}
}
/* =========================================================
WINDOWED
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.feature-strip {
gap: 16px !important;
}
.feature-strip > * {
min-height: 178px !important;
padding: 22px 20px !important;
}
.feature-strip .feature-symbol {
margin-bottom: 10px !important;
font-size: 32px !important;
}
.feature-strip h3 {
font-size: 17px !important;
}
.feature-strip p {
font-size: 13px !important;
line-height: 1.48 !important;
}
}
/* =========================================================
FEATURES SECTION - remove big outer box, keep neon flow
========================================================= */
/* make the feature section the positioning parent */
.features,
.features-section,
.feature-section {
position: relative !important;
overflow: visible !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* remove the big wrapper box if one exists */
.features-wrap,
.features-shell,
.features-panel,
.features-box,
.features-grid-wrap,
.features-inner {
position: relative !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding-top: 22px !important;
padding-bottom: 8px !important;
}
/* neon splat / glow behind the cards */
.features::before,
.features-section::before,
.feature-section::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 54% !important;
transform: translate(-50%, -50%) !important;
width: min(1180px, 92%) !important;
height: 270px !important;
pointer-events: none !important;
z-index: 0 !important;
border-radius: 999px !important;
background:
radial-gradient(circle at 30% 50%, rgba(0, 225, 255, 0.18) 0%, rgba(0, 225, 255, 0.10) 22%, rgba(0, 225, 255, 0.00) 55%),
radial-gradient(circle at 50% 45%, rgba(27, 106, 255, 0.18) 0%, rgba(27, 106, 255, 0.10) 25%, rgba(27, 106, 255, 0.00) 58%),
radial-gradient(circle at 70% 52%, rgba(255, 0, 221, 0.16) 0%, rgba(255, 0, 221, 0.09) 22%, rgba(255, 0, 221, 0.00) 55%);
filter: blur(32px) !important;
opacity: 0.95 !important;
}
/* keep the actual cards above the glow */
.features-grid,
.feature-grid,
.features-cards,
.feature-cards {
position: relative !important;
z-index: 1 !important;
background: transparent !important;
}
/* individual cards stay clean and neon */
.feature-card,
.features-grid > *,
.feature-grid > * {
position: relative !important;
z-index: 1 !important;
background: linear-gradient(180deg, rgba(5, 19, 44, 0.88), rgba(2, 10, 24, 0.92)) !important;
border: 1px solid rgba(31, 201, 255, 0.55) !important;
box-shadow:
0 0 0 1px rgba(10, 132, 255, 0.10) inset,
0 0 16px rgba(0, 191, 255, 0.10) !important;
border-radius: 16px !important;
}
/* slightly tighten spacing so it feels more like the reference */
.features-grid,
.feature-grid {
gap: 18px !important;
}
/* responsive polish */
@media (max-width: 1199px) {
.features::before,
.features-section::before,
.feature-section::before {
width: 94% !important;
height: 240px !important;
top: 52% !important;
}
}
@media (max-width: 760px) {
.features::before,
.features-section::before,
.feature-section::before {
height: 380px !important;
width: 96% !important;
top: 50% !important;
border-radius: 40px !important;
}
}
/* =========================================================
FEATURES SECTION - remove big outer box, keep neon flow
========================================================= */
/* make the feature section the positioning parent */
.features,
.features-section,
.feature-section {
position: relative !important;
overflow: visible !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* remove the big wrapper box if one exists */
.features-wrap,
.features-shell,
.features-panel,
.features-box,
.features-grid-wrap,
.features-inner {
position: relative !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding-top: 22px !important;
padding-bottom: 8px !important;
}
/* neon splat / glow behind the cards */
.features::before,
.features-section::before,
.feature-section::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 54% !important;
transform: translate(-50%, -50%) !important;
width: min(1180px, 92%) !important;
height: 270px !important;
pointer-events: none !important;
z-index: 0 !important;
border-radius: 999px !important;
background:
radial-gradient(circle at 30% 50%, rgba(0, 225, 255, 0.18) 0%, rgba(0, 225, 255, 0.10) 22%, rgba(0, 225, 255, 0.00) 55%),
radial-gradient(circle at 50% 45%, rgba(27, 106, 255, 0.18) 0%, rgba(27, 106, 255, 0.10) 25%, rgba(27, 106, 255, 0.00) 58%),
radial-gradient(circle at 70% 52%, rgba(255, 0, 221, 0.16) 0%, rgba(255, 0, 221, 0.09) 22%, rgba(255, 0, 221, 0.00) 55%);
filter: blur(32px) !important;
opacity: 0.95 !important;
}
/* keep the actual cards above the glow */
.features-grid,
.feature-grid,
.features-cards,
.feature-cards {
position: relative !important;
z-index: 1 !important;
background: transparent !important;
}
/* individual cards stay clean and neon */
.feature-card,
.features-grid > *,
.feature-grid > * {
position: relative !important;
z-index: 1 !important;
background: linear-gradient(180deg, rgba(5, 19, 44, 0.88), rgba(2, 10, 24, 0.92)) !important;
border: 1px solid rgba(31, 201, 255, 0.55) !important;
box-shadow:
0 0 0 1px rgba(10, 132, 255, 0.10) inset,
0 0 16px rgba(0, 191, 255, 0.10) !important;
border-radius: 16px !important;
}
/* slightly tighten spacing so it feels more like the reference */
.features-grid,
.feature-grid {
gap: 18px !important;
}
/* responsive polish */
@media (max-width: 1199px) {
.features::before,
.features-section::before,
.feature-section::before {
width: 94% !important;
height: 240px !important;
top: 52% !important;
}
}
@media (max-width: 760px) {
.features::before,
.features-section::before,
.feature-section::before {
height: 380px !important;
width: 96% !important;
top: 50% !important;
border-radius: 40px !important;
}
}
/* =========================================================
FEATURE STRIP - FINAL OUTER FRAME REMOVAL + NEON SPLAT
========================================================= */
.feature-strip {
position: relative !important;
isolation: isolate !important;
/* REMOVE BIG OUTER BOX */
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
/* Keep some breathing room around individual cards */
padding-top: 20px !important;
padding-bottom: 20px !important;
overflow: visible !important;
}
/* =========================================================
LARGE IRREGULAR CYAN / PURPLE NEON SPLAT
========================================================= */
.feature-strip::before {
content: "" !important;
position: absolute !important;
z-index: 0 !important;
pointer-events: none !important;
left: 4% !important;
right: 4% !important;
top: 7% !important;
bottom: 7% !important;
background:
radial-gradient(
ellipse at 18% 52%,
rgba(24, 220, 255, 0.25) 0%,
rgba(24, 220, 255, 0.12) 28%,
transparent 58%
),
radial-gradient(
ellipse at 48% 42%,
rgba(113, 65, 255, 0.25) 0%,
rgba(113, 65, 255, 0.11) 30%,
transparent 60%
),
radial-gradient(
ellipse at 77% 56%,
rgba(255, 52, 215, 0.22) 0%,
rgba(255, 52, 215, 0.10) 28%,
transparent 58%
),
radial-gradient(
ellipse at 92% 40%,
rgba(28, 184, 255, 0.18) 0%,
transparent 52%
) !important;
filter: blur(20px) !important;
clip-path: polygon(
2% 32%,
9% 18%,
20% 23%,
29% 8%,
39% 20%,
49% 5%,
60% 18%,
70% 7%,
80% 23%,
91% 14%,
98% 34%,
93% 51%,
99% 68%,
87% 78%,
77% 70%,
67% 92%,
55% 76%,
44% 94%,
34% 77%,
21% 89%,
13% 72%,
2% 66%,
7% 49%
) !important;
opacity: 0.9 !important;
}
/* Extra concentrated glow through centre */
.feature-strip::after {
content: "" !important;
position: absolute !important;
z-index: 0 !important;
pointer-events: none !important;
left: 15% !important;
right: 15% !important;
top: 30% !important;
height: 50% !important;
background:
linear-gradient(
90deg,
rgba(0,220,255,0.06),
rgba(115,62,255,0.12),
rgba(255,45,210,0.11),
rgba(0,205,255,0.06)
) !important;
filter: blur(28px) !important;
border-radius: 50% !important;
}
/* CARDS MUST SIT ABOVE THE SPLAT */
.feature-strip > * {
position: relative !important;
z-index: 2 !important;
}
/* =========================================================
WINDOWED
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.feature-strip {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
.feature-strip::before {
left: 1% !important;
right: 1% !important;
top: 5% !important;
bottom: 5% !important;
filter: blur(17px) !important;
}
}
/* =========================================================
FEATURE CARDS - FINAL WRAPPER + NEON GLOW FIX
========================================================= */
/* Kill previous feature-strip splat/polygon completely */
.feature-strip::before,
.feature-strip::after {
content: none !important;
display: none !important;
}
/* Feature section itself */
.feature-strip {
position: relative !important;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
overflow: visible !important;
}
/* =========================================================
THIS IS THE REAL OUTER WRAPPER
Remove the large rounded rectangle
========================================================= */
.feature-grid {
position: relative !important;
isolation: isolate !important;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
padding: 18px 0 !important;
overflow: visible !important;
}
/* =========================================================
SOFT IRREGULAR NEON SPLAT
No hard polygon edges
========================================================= */
.feature-grid::before {
content: "" !important;
position: absolute !important;
z-index: 0 !important;
pointer-events: none !important;
left: 2% !important;
right: 2% !important;
top: 5% !important;
bottom: 5% !important;
background:
radial-gradient(
ellipse 30% 65% at 13% 52%,
rgba(20, 220, 255, 0.22) 0%,
rgba(20, 220, 255, 0.09) 45%,
transparent 72%
),
radial-gradient(
ellipse 34% 72% at 38% 44%,
rgba(66, 112, 255, 0.21) 0%,
rgba(90, 70, 255, 0.09) 47%,
transparent 73%
),
radial-gradient(
ellipse 35% 70% at 64% 56%,
rgba(174, 55, 255, 0.20) 0%,
rgba(174, 55, 255, 0.08) 48%,
transparent 73%
),
radial-gradient(
ellipse 31% 65% at 87% 43%,
rgba(255, 47, 210, 0.18) 0%,
rgba(255, 47, 210, 0.07) 46%,
transparent 72%
) !important;
filter: blur(25px) !important;
opacity: 1 !important;
}
/* Little extra glow through the middle */
.feature-grid::after {
content: "" !important;
position: absolute !important;
z-index: 0 !important;
pointer-events: none !important;
left: 15% !important;
right: 15% !important;
top: 37% !important;
height: 42% !important;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(20, 217, 255, 0.07) 15%,
rgba(111, 72, 255, 0.10) 42%,
rgba(255, 53, 207, 0.09) 68%,
rgba(33, 194, 255, 0.06) 86%,
transparent 100%
) !important;
filter: blur(32px) !important;
border-radius: 50% !important;
}
/* =========================================================
KEEP THE FOUR CARDS ABOVE THE GLOW
========================================================= */
.feature-grid .feature-card {
position: relative !important;
z-index: 2 !important;
}
/* Keep the individual card look we already approved */
.feature-card {
background:
linear-gradient(
180deg,
rgba(5, 22, 45, 0.93),
rgba(2, 11, 26, 0.96)
) !important;
border: 1px solid rgba(35, 185, 242, 0.58) !important;
border-radius: 10px !important;
box-shadow:
inset 0 0 22px rgba(20, 150, 230, 0.035),
0 0 12px rgba(17, 184, 238, 0.06) !important;
}
/* FULLSCREEN */
@media (min-width: 1200px) {
.feature-grid {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
}
/* WINDOWED */
@media (min-width: 760px) and (max-width: 1199px) {
.feature-grid {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
.feature-grid::before {
left: 0 !important;
right: 0 !important;
filter: blur(20px) !important;
}
}
/* =========================================================
FEATURE CARDS - STRONGER NEON ATMOSPHERE
========================================================= */
.feature-grid {
position: relative !important;
isolation: isolate !important;
overflow: visible !important;
}
/* Soft irregular neon glow behind all four cards */
.feature-grid::before {
content: "" !important;
display: block !important;
position: absolute !important;
z-index: 0 !important;
pointer-events: none !important;
left: -2% !important;
right: -2% !important;
top: -18% !important;
bottom: -18% !important;
background:
radial-gradient(
ellipse 28% 70% at 12% 52%,
rgba(0, 225, 255, 0.34) 0%,
rgba(0, 225, 255, 0.16) 34%,
transparent 70%
),
radial-gradient(
ellipse 32% 78% at 38% 40%,
rgba(55, 122, 255, 0.28) 0%,
rgba(99, 72, 255, 0.14) 40%,
transparent 72%
),
radial-gradient(
ellipse 34% 75% at 65% 58%,
rgba(170, 61, 255, 0.27) 0%,
rgba(170, 61, 255, 0.13) 40%,
transparent 72%
),
radial-gradient(
ellipse 30% 70% at 90% 44%,
rgba(255, 51, 210, 0.28) 0%,
rgba(255, 51, 210, 0.12) 38%,
transparent 70%
) !important;
filter: blur(28px) !important;
opacity: 1 !important;
}
/* Extra coloured patches so it feels less perfectly symmetrical */
.feature-grid::after {
content: "" !important;
display: block !important;
position: absolute !important;
z-index: 0 !important;
pointer-events: none !important;
left: 8% !important;
right: 8% !important;
top: 18% !important;
bottom: 14% !important;
background:
radial-gradient(
circle at 28% 65%,
rgba(23, 220, 255, 0.15),
transparent 24%
),
radial-gradient(
circle at 54% 25%,
rgba(126, 70, 255, 0.16),
transparent 27%
),
radial-gradient(
circle at 76% 68%,
rgba(255, 50, 205, 0.14),
transparent 25%
) !important;
filter: blur(18px) !important;
}
/* Keep cards above glow */
.feature-grid .feature-card {
position: relative !important;
z-index: 2 !important;
}
/* =========================================================
FEATURE ICONS
Replace placeholder text symbols visually using CSS masks
HTML is NOT changed
========================================================= */
.feature-card .feature-symbol {
display: block !important;
width: 46px !important;
height: 46px !important;
margin: 0 0 11px 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
text-shadow: none !important;
overflow: visible !important;
}
.feature-card .feature-symbol::before {
content: "" !important;
display: block !important;
width: 100% !important;
height: 100% !important;
background-color: #32CFFF !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
filter:
drop-shadow(0 0 5px rgba(50,207,255,0.72))
drop-shadow(0 0 11px rgba(50,207,255,0.25)) !important;
}
/* 1. REAL-LOOKING BOTS - PLAYERS */
.feature-card:nth-child(1) .feature-symbol::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='7' r='3' fill='black'/%3E%3Ccircle cx='17' cy='8.5' r='2.5' fill='black'/%3E%3Cpath d='M2.5 20v-2c0-3.2 2.7-5.3 6.5-5.3s6.5 2.1 6.5 5.3v2h-13z' fill='black'/%3E%3Cpath d='M14.5 13.5c4 .1 7 2 7 5V20H17v-2c0-1.9-.8-3.4-2.5-4.5z' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='7' r='3' fill='black'/%3E%3Ccircle cx='17' cy='8.5' r='2.5' fill='black'/%3E%3Cpath d='M2.5 20v-2c0-3.2 2.7-5.3 6.5-5.3s6.5 2.1 6.5 5.3v2h-13z' fill='black'/%3E%3Cpath d='M14.5 13.5c4 .1 7 2 7 5V20H17v-2c0-1.9-.8-3.4-2.5-4.5z' fill='black'/%3E%3C/svg%3E") !important;
}
/* 2. CUSTOMISE COSMETICS - SHIRT */
.feature-card:nth-child(2) .feature-symbol::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h3c.2 1.5 1 2.2 2 2.2s1.8-.7 2-2.2h3l4 4-3 3-2-2V21H8V8l-2 2-3-3 4-4z' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h3c.2 1.5 1 2.2 2 2.2s1.8-.7 2-2.2h3l4 4-3 3-2-2V21H8V8l-2 2-3-3 4-4z' fill='black'/%3E%3C/svg%3E") !important;
}
/* 3. LOBBY STATUS MESSAGES - CHAT BUBBLE */
.feature-card:nth-child(3) .feature-symbol::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-8l-5 4v-4H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z' fill='black'/%3E%3Ccircle cx='7' cy='10.5' r='1.25' fill='white'/%3E%3Ccircle cx='12' cy='10.5' r='1.25' fill='white'/%3E%3Ccircle cx='17' cy='10.5' r='1.25' fill='white'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-8l-5 4v-4H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z' fill='black'/%3E%3Ccircle cx='7' cy='10.5' r='1.25' fill='white'/%3E%3Ccircle cx='12' cy='10.5' r='1.25' fill='white'/%3E%3Ccircle cx='17' cy='10.5' r='1.25' fill='white'/%3E%3C/svg%3E") !important;
}
/* 4. EASY TO USE - GEAR */
.feature-card:nth-child(4) .feature-symbol::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.4 13a8 8 0 0 0 0-2l2.1-1.5-2-3.5-2.5 1a8 8 0 0 0-1.7-1L15 3h-4l-.4 3a8 8 0 0 0-1.7 1L6.4 6l-2 3.5L6.5 11a8 8 0 0 0 0 2l-2.1 1.5 2 3.5 2.5-1a8 8 0 0 0 1.7 1l.4 3h4l.4-3a8 8 0 0 0 1.7-1l2.5 1 2-3.5-2.2-1.5zM13 15.5A3.5 3.5 0 1 1 13 8a3.5 3.5 0 0 1 0 7.5z' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.4 13a8 8 0 0 0 0-2l2.1-1.5-2-3.5-2.5 1a8 8 0 0 0-1.7-1L15 3h-4l-.4 3a8 8 0 0 0-1.7 1L6.4 6l-2 3.5L6.5 11a8 8 0 0 0 0 2l-2.1 1.5 2 3.5 2.5-1a8 8 0 0 0 1.7 1l.4 3h4l.4-3a8 8 0 0 0 1.7-1l2.5 1 2-3.5-2.2-1.5zM13 15.5A3.5 3.5 0 1 1 13 8a3.5 3.5 0 0 1 0 7.5z' fill='black'/%3E%3C/svg%3E") !important;
}
/* =========================================================
FULLSCREEN
========================================================= */
@media (min-width: 1200px) {
.feature-card .feature-symbol {
width: 48px !important;
height: 48px !important;
}
}
/* =========================================================
WINDOWED
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.feature-card .feature-symbol {
width: 40px !important;
height: 40px !important;
}
.feature-grid::before {
filter: blur(22px) !important;
}
}
/* =========================================================
FEATURE ICON REDESIGN
Chunkier / sharper / game-dashboard style
========================================================= */
.feature-card .feature-symbol {
width: 50px !important;
height: 50px !important;
margin-bottom: 12px !important;
}
.feature-card .feature-symbol::before {
background-color: #29D8FF !important;
filter:
drop-shadow(0 0 5px rgba(41,216,255,0.75))
drop-shadow(0 0 12px rgba(41,216,255,0.28)) !important;
}
/* =========================================================
1. REAL-LOOKING BOTS
Stronger 3-player squad
========================================================= */
.feature-card:nth-child(1) .feature-symbol::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='18' r='9' fill='black'/%3E%3Ccircle cx='14' cy='24' r='7' fill='black'/%3E%3Ccircle cx='50' cy='24' r='7' fill='black'/%3E%3Cpath d='M17 55v-8c0-10 6-16 15-16s15 6 15 16v8H17z' fill='black'/%3E%3Cpath d='M2 53v-5c0-8 4-13 12-13 4 0 7 1 9 4-5 4-8 9-8 16H2z' fill='black'/%3E%3Cpath d='M49 55c0-7-3-12-8-16 2-3 5-4 9-4 8 0 12 5 12 13v5H49z' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='18' r='9' fill='black'/%3E%3Ccircle cx='14' cy='24' r='7' fill='black'/%3E%3Ccircle cx='50' cy='24' r='7' fill='black'/%3E%3Cpath d='M17 55v-8c0-10 6-16 15-16s15 6 15 16v8H17z' fill='black'/%3E%3Cpath d='M2 53v-5c0-8 4-13 12-13 4 0 7 1 9 4-5 4-8 9-8 16H2z' fill='black'/%3E%3Cpath d='M49 55c0-7-3-12-8-16 2-3 5-4 9-4 8 0 12 5 12 13v5H49z' fill='black'/%3E%3C/svg%3E") !important;
}
/* =========================================================
2. CUSTOMISE COSMETICS
Strong outfit / tactical shirt
========================================================= */
.feature-card:nth-child(2) .feature-symbol::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M19 8h10c1 5 3 7 7 7s6-2 7-7h10l10 10-9 10-6-5v34H16V23l-6 5-9-10L11 8h8zm10 0c1 2 3 3 7 3s6-1 7-3H29z' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M19 8h10c1 5 3 7 7 7s6-2 7-7h10l10 10-9 10-6-5v34H16V23l-6 5-9-10L11 8h8zm10 0c1 2 3 3 7 3s6-1 7-3H29z' fill='black'/%3E%3C/svg%3E") !important;
}
/* =========================================================
3. LOBBY STATUS MESSAGES
Chunkier status/chat panel
========================================================= */
.feature-card:nth-child(3) .feature-symbol::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 8h48c4 0 6 2 6 6v30c0 4-2 6-6 6H29L15 60V50H8c-4 0-6-2-6-6V14c0-4 2-6 6-6z' fill='black'/%3E%3Crect x='14' y='20' width='36' height='5' rx='2.5' fill='white'/%3E%3Crect x='14' y='31' width='28' height='5' rx='2.5' fill='white'/%3E%3Crect x='14' y='42' width='20' height='5' rx='2.5' fill='white'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 8h48c4 0 6 2 6 6v30c0 4-2 6-6 6H29L15 60V50H8c-4 0-6-2-6-6V14c0-4 2-6 6-6z' fill='black'/%3E%3Crect x='14' y='20' width='36' height='5' rx='2.5' fill='white'/%3E%3Crect x='14' y='31' width='28' height='5' rx='2.5' fill='white'/%3E%3Crect x='14' y='42' width='20' height='5' rx='2.5' fill='white'/%3E%3C/svg%3E") !important;
}
/* =========================================================
4. EASY TO USE
App controls / sliders
========================================================= */
.feature-card:nth-child(4) .feature-symbol::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='6' y='12' width='52' height='6' rx='3' fill='black'/%3E%3Ccircle cx='20' cy='15' r='8' fill='black'/%3E%3Crect x='6' y='29' width='52' height='6' rx='3' fill='black'/%3E%3Ccircle cx='44' cy='32' r='8' fill='black'/%3E%3Crect x='6' y='46' width='52' height='6' rx='3' fill='black'/%3E%3Ccircle cx='28' cy='49' r='8' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='6' y='12' width='52' height='6' rx='3' fill='black'/%3E%3Ccircle cx='20' cy='15' r='8' fill='black'/%3E%3Crect x='6' y='29' width='52' height='6' rx='3' fill='black'/%3E%3Ccircle cx='44' cy='32' r='8' fill='black'/%3E%3Crect x='6' y='46' width='52' height='6' rx='3' fill='black'/%3E%3Ccircle cx='28' cy='49' r='8' fill='black'/%3E%3C/svg%3E") !important;
}
/* WINDOWED */
@media (min-width: 760px) and (max-width: 1199px) {
.feature-card .feature-symbol {
width: 43px !important;
height: 43px !important;
}
}
/* =========================================================
FEATURE ICON FIX
2 = Cosmetics shirt
3 = Message bubble with three dots
========================================================= */
/* ---------------------------------------------------------
CUSTOMISE COSMETICS - CLEANER SHIRT
--------------------------------------------------------- */
.feature-card:nth-child(2) .feature-symbol::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M19 8h9c1.2 4 2.8 6 4 6s2.8-2 4-6h9l14 10-8 11-7-4v31H20V25l-7 4-8-11L19 8zm9 0c.8 2.7 2 4 4 4s3.2-1.3 4-4h-8z' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M19 8h9c1.2 4 2.8 6 4 6s2.8-2 4-6h9l14 10-8 11-7-4v31H20V25l-7 4-8-11L19 8zm9 0c.8 2.7 2 4 4 4s3.2-1.3 4-4h-8z' fill='black'/%3E%3C/svg%3E") !important;
}
/* ---------------------------------------------------------
LOBBY STATUS MESSAGES - CHAT BUBBLE
--------------------------------------------------------- */
.feature-card:nth-child(3) .feature-symbol {
position: relative !important;
}
.feature-card:nth-child(3) .feature-symbol::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 8h44c5 0 8 3 8 8v28c0 5-3 8-8 8H31L17 62V52h-7c-5 0-8-3-8-8V16c0-5 3-8 8-8z' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 8h44c5 0 8 3 8 8v28c0 5-3 8-8 8H31L17 62V52h-7c-5 0-8-3-8-8V16c0-5 3-8 8-8z' fill='black'/%3E%3C/svg%3E") !important;
}
/* Three dark dots inside the cyan chat bubble */
.feature-card:nth-child(3) .feature-symbol::after {
content: "" !important;
position: absolute !important;
width: 6px !important;
height: 6px !important;
left: 12px !important;
top: 20px !important;
border-radius: 50% !important;
background: #05152c !important;
box-shadow:
10px 0 0 #05152c,
20px 0 0 #05152c !important;
z-index: 4 !important;
}
/* FULLSCREEN */
@media (min-width: 1200px) {
.feature-card:nth-child(3) .feature-symbol::after {
left: 11px !important;
top: 20px !important;
}
}
/* WINDOWED */
@media (min-width: 760px) and (max-width: 1199px) {
.feature-card:nth-child(3) .feature-symbol::after {
width: 5px !important;
height: 5px !important;
left: 10px !important;
top: 17px !important;
box-shadow:
9px 0 0 #05152c,
18px 0 0 #05152c !important;
}
}
/* =========================================================
FATTER SHIRT ICON ONLY
========================================================= */
.feature-card:nth-child(2) .feature-symbol::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M16 10h12c1.5 3.5 2.8 5 4 5s2.5-1.5 4-5h12l10 9-7 10-8-4v29H21V25l-8 4-7-10 10-9z' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M16 10h12c1.5 3.5 2.8 5 4 5s2.5-1.5 4-5h12l10 9-7 10-8-4v29H21V25l-8 4-7-10 10-9z' fill='black'/%3E%3C/svg%3E") !important;
}
/* =========================================================
COSMETICS SHIRT - WIDER BODY / FATTER BOTTOM
========================================================= */
.feature-card:nth-child(2) .feature-symbol::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M15 9h12c1.2 4 2.9 6 5 6s3.8-2 5-6h12l12 10-8 11-7-4 3 30H15l3-30-7 4-8-11L15 9z' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M15 9h12c1.2 4 2.9 6 5 6s3.8-2 5-6h12l12 10-8 11-7-4 3 30H15l3-30-7 4-8-11L15 9z' fill='black'/%3E%3C/svg%3E") !important;
}
/* FEATURE BOX TEXT - neon theme */
.feature-card h3 {
color: #f4fbff !important;
text-shadow: 0 0 10px rgba(0, 224, 255, 0.18) !important;
}
.feature-card p {
color: #c8ecff !important;
line-height: 1.55 !important;
}
/* Give each feature title its own neon accent */
.feature-card:nth-child(1) h3 {
color: #7fe7ff !important;
}
.feature-card:nth-child(2) h3 {
color: #5fd6ff !important;
}
.feature-card:nth-child(3) h3 {
color: #8fdcff !important;
}
.feature-card:nth-child(4) h3 {
color: #b7e8ff !important;
}
/* Optional: make a few key words glow a little more overall */
.feature-card:hover h3 {
text-shadow:
0 0 8px rgba(0, 224, 255, 0.18),
0 0 18px rgba(255, 0, 200, 0.10) !important;
}
/* =========================================================
FEATURE CARD HEADINGS - CADDYLOBBY NEON PALETTE
========================================================= */
/* Realistic Lobby Bots */
.feature-card:nth-child(1) h3 {
color: #20DFFF !important;
-webkit-text-fill-color: #20DFFF !important;
text-shadow:
0 0 8px rgba(32,223,255,0.28),
0 0 16px rgba(32,223,255,0.10) !important;
}
/* Customise Cosmetics */
.feature-card:nth-child(2) h3 {
color: #35A7FF !important;
-webkit-text-fill-color: #35A7FF !important;
text-shadow:
0 0 8px rgba(53,167,255,0.28),
0 0 16px rgba(53,167,255,0.10) !important;
}
/* Lobby Status Messages */
.feature-card:nth-child(3) h3 {
color: #FF4FD8 !important;
-webkit-text-fill-color: #FF4FD8 !important;
text-shadow:
0 0 8px rgba(255,79,216,0.28),
0 0 16px rgba(255,79,216,0.10) !important;
}
/* Easy to Use */
.feature-card:nth-child(4) h3 {
color: #20E6C5 !important;
-webkit-text-fill-color: #20E6C5 !important;
text-shadow:
0 0 8px rgba(32,230,197,0.28),
0 0 16px rgba(32,230,197,0.10) !important;
}
/* =========================================================
TRUST ROW - BALANCED NEON COLOURS
========================================================= */
/* Safe & Secure - CYAN */
.trust-row > div:nth-child(1),
.trust-row > div:nth-child(1) .trust-label {
color: #7EEBFF !important;
}
.trust-row > div:nth-child(1) .trust-icon {
color: #20DFFF !important;
fill: #20DFFF !important;
}
/* Easy Setup - BLUE */
.trust-row > div:nth-child(2),
.trust-row > div:nth-child(2) .trust-label {
color: #74BBFF !important;
}
.trust-row > div:nth-child(2) .trust-icon {
color: #35A7FF !important;
fill: #35A7FF !important;
}
/* Trusted by Players - PINK/PURPLE */
.trust-row > div:nth-child(3),
.trust-row > div:nth-child(3) .trust-label {
color: #FF82E4 !important;
}
.trust-row > div:nth-child(3) .trust-icon {
color: #FF4FD8 !important;
fill: #FF4FD8 !important;
}
/* Australian Hosted - KEEP ORIGINAL ELECTRIC CYAN */
.trust-row > div:nth-child(4),
.trust-row > div:nth-child(4) .trust-label {
color: #20DFFF !important;
}
.trust-row > div:nth-child(4) .australia-hosted-img {
filter:
drop-shadow(0 0 5px rgba(32,223,255,0.48)) !important;
}
/* =========================================================
FEATURE CARD BODY COPY
========================================================= */
.feature-card p {
color: #D8E2F0 !important;
}
/* CARD 1 - CYAN */
.feature-card:nth-child(1) h3 {
color: #20DFFF !important;
-webkit-text-fill-color: #20DFFF !important;
}
.feature-card:nth-child(1) .feature-symbol::before {
background-color: #20DFFF !important;
}
/* CARD 2 - ELECTRIC BLUE */
.feature-card:nth-child(2) h3 {
color: #5F9FFF !important;
-webkit-text-fill-color: #5F9FFF !important;
text-shadow:
0 0 8px rgba(95,159,255,0.30),
0 0 16px rgba(95,159,255,0.10) !important;
}
.feature-card:nth-child(2) .feature-symbol::before {
background-color: #5F9FFF !important;
filter:
drop-shadow(0 0 5px rgba(95,159,255,0.65))
drop-shadow(0 0 12px rgba(95,159,255,0.20)) !important;
}
/* CARD 3 - NEON PINK */
.feature-card:nth-child(3) h3 {
color: #FF4FD8 !important;
-webkit-text-fill-color: #FF4FD8 !important;
text-shadow:
0 0 8px rgba(255,79,216,0.30),
0 0 16px rgba(255,79,216,0.10) !important;
}
.feature-card:nth-child(3) .feature-symbol::before {
background-color: #FF4FD8 !important;
filter:
drop-shadow(0 0 5px rgba(255,79,216,0.65))
drop-shadow(0 0 12px rgba(255,79,216,0.20)) !important;
}
/* Keep dots visible */
.feature-card:nth-child(3) .feature-symbol::after {
background: #071329 !important;
box-shadow:
10px 0 0 #071329,
20px 0 0 #071329 !important;
}
/* CARD 4 - PURPLE/AQUA MIX */
.feature-card:nth-child(4) h3 {
color: #B477FF !important;
-webkit-text-fill-color: #B477FF !important;
text-shadow:
0 0 8px rgba(180,119,255,0.30),
0 0 16px rgba(180,119,255,0.10) !important;
}
.feature-card:nth-child(4) .feature-symbol::before {
background-color: #B477FF !important;
filter:
drop-shadow(0 0 5px rgba(180,119,255,0.65))
drop-shadow(0 0 12px rgba(180,119,255,0.20)) !important;
}
/* WINDOWED MESSAGE DOTS */
@media (min-width: 760px) and (max-width: 1199px) {
.feature-card:nth-child(3) .feature-symbol::after {
box-shadow:
9px 0 0 #071329,
18px 0 0 #071329 !important;
}
}
/* =========================================================
CADDYLOBBY COLOUR ORDER
1 PINK / 2 BLUE / 3 PURPLE / 4 CYAN
========================================================= */
/* =========================================================
TRUST ROW
========================================================= */
/* 1. SAFE & SECURE - PINK */
.trust-row > div:nth-child(1),
.trust-row > div:nth-child(1) .trust-label {
color: #FF4FD8 !important;
}
.trust-row > div:nth-child(1) .trust-icon {
color: #FF4FD8 !important;
fill: #FF4FD8 !important;
filter: drop-shadow(0 0 6px rgba(255,79,216,0.45)) !important;
}
/* 2. EASY SETUP - BLUE */
.trust-row > div:nth-child(2),
.trust-row > div:nth-child(2) .trust-label {
color: #35A7FF !important;
}
.trust-row > div:nth-child(2) .trust-icon {
color: #35A7FF !important;
fill: #35A7FF !important;
filter: drop-shadow(0 0 6px rgba(53,167,255,0.45)) !important;
}
/* 3. TRUSTED BY PLAYERS - PURPLE */
.trust-row > div:nth-child(3),
.trust-row > div:nth-child(3) .trust-label {
color: #A86CFF !important;
}
.trust-row > div:nth-child(3) .trust-icon {
color: #A86CFF !important;
fill: #A86CFF !important;
filter: drop-shadow(0 0 6px rgba(168,108,255,0.45)) !important;
}
/* 4. AUSTRALIAN HOSTED - CYAN */
.trust-row > div:nth-child(4),
.trust-row > div:nth-child(4) .trust-label {
color: #20DFFF !important;
}
.trust-row > div:nth-child(4) .australia-hosted-img {
filter:
drop-shadow(0 0 5px rgba(32,223,255,0.48)) !important;
}
/* =========================================================
FEATURE CARD BODY COPY
Keep descriptions neutral/readable
========================================================= */
.feature-card p {
color: #D8E2F0 !important;
}
/* =========================================================
FEATURE 1 - REALISTIC LOBBY BOTS - PINK
========================================================= */
.feature-card:nth-child(1) h3 {
color: #FF4FD8 !important;
-webkit-text-fill-color: #FF4FD8 !important;
text-shadow:
0 0 8px rgba(255,79,216,0.30),
0 0 16px rgba(255,79,216,0.10) !important;
}
.feature-card:nth-child(1) .feature-symbol::before {
background-color: #FF4FD8 !important;
filter:
drop-shadow(0 0 5px rgba(255,79,216,0.68))
drop-shadow(0 0 12px rgba(255,79,216,0.22)) !important;
}
/* =========================================================
FEATURE 2 - CUSTOMISE COSMETICS - BLUE
========================================================= */
.feature-card:nth-child(2) h3 {
color: #35A7FF !important;
-webkit-text-fill-color: #35A7FF !important;
text-shadow:
0 0 8px rgba(53,167,255,0.30),
0 0 16px rgba(53,167,255,0.10) !important;
}
.feature-card:nth-child(2) .feature-symbol::before {
background-color: #35A7FF !important;
filter:
drop-shadow(0 0 5px rgba(53,167,255,0.68))
drop-shadow(0 0 12px rgba(53,167,255,0.22)) !important;
}
/* =========================================================
FEATURE 3 - LOBBY STATUS MESSAGES - PURPLE
========================================================= */
.feature-card:nth-child(3) h3 {
color: #A86CFF !important;
-webkit-text-fill-color: #A86CFF !important;
text-shadow:
0 0 8px rgba(168,108,255,0.30),
0 0 16px rgba(168,108,255,0.10) !important;
}
.feature-card:nth-child(3) .feature-symbol::before {
background-color: #A86CFF !important;
filter:
drop-shadow(0 0 5px rgba(168,108,255,0.68))
drop-shadow(0 0 12px rgba(168,108,255,0.22)) !important;
}
/* Keep the three dots visible */
.feature-card:nth-child(3) .feature-symbol::after {
background: #071329 !important;
box-shadow:
10px 0 0 #071329,
20px 0 0 #071329 !important;
}
/* =========================================================
FEATURE 4 - EASY TO USE - CYAN
========================================================= */
.feature-card:nth-child(4) h3 {
color: #20DFFF !important;
-webkit-text-fill-color: #20DFFF !important;
text-shadow:
0 0 8px rgba(32,223,255,0.30),
0 0 16px rgba(32,223,255,0.10) !important;
}
.feature-card:nth-child(4) .feature-symbol::before {
background-color: #20DFFF !important;
filter:
drop-shadow(0 0 5px rgba(32,223,255,0.68))
drop-shadow(0 0 12px rgba(32,223,255,0.22)) !important;
}
/* WINDOWED MESSAGE DOT SPACING */
@media (min-width: 760px) and (max-width: 1199px) {
.feature-card:nth-child(3) .feature-symbol::after {
box-shadow:
9px 0 0 #071329,
18px 0 0 #071329 !important;
}
}
/* =========================================================
HOW IT WORKS - FIVE STEP CADDYLOBBY FLOW
========================================================= */
.how-section .how-grid {
display: grid !important;
grid-template-columns:
minmax(0, 1fr) 34px
minmax(0, 1fr) 34px
minmax(0, 1fr) 34px
minmax(0, 1fr) 34px
minmax(0, 1fr) !important;
align-items: start !important;
gap: 8px !important;
width: 100% !important;
margin-top: 18px !important;
}
/* STEP */
.how-section .how-step {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
min-width: 0 !important;
}
/* NEON CIRCLE */
.how-section .circle-icon {
width: 68px !important;
height: 68px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
border: 2px solid #FF39D8 !important;
background:
radial-gradient(
circle at center,
rgba(32,223,255,0.07) 0%,
rgba(105,73,255,0.08) 45%,
rgba(255,57,216,0.07) 100%
) !important;
box-shadow:
0 0 10px rgba(255,57,216,0.75),
0 0 22px rgba(168,85,255,0.30),
inset 0 0 12px rgba(32,223,255,0.08) !important;
margin-bottom: 12px !important;
}
/* ICON BASE */
.how-section .circle-icon::before {
content: "" !important;
display: block !important;
width: 34px !important;
height: 34px !important;
background-color: #20DFFF !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
filter:
drop-shadow(0 0 5px rgba(32,223,255,0.75))
drop-shadow(0 0 10px rgba(32,223,255,0.28)) !important;
}
/* =========================================================
1. CREATE ACCOUNT - PERSON ICON
========================================================= */
.how-create .circle-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='20' r='11' fill='black'/%3E%3Cpath d='M13 55c1-14 8-21 19-21s18 7 19 21H13z' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='20' r='11' fill='black'/%3E%3Cpath d='M13 55c1-14 8-21 19-21s18 7 19 21H13z' fill='black'/%3E%3C/svg%3E") !important;
}
/* =========================================================
2. DOWNLOAD APP - DOWNLOAD TO TRAY
========================================================= */
.how-download .circle-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M27 7h10v24l8-8 7 7-20 20-20-20 7-7 8 8V7zM8 48h9v5h30v-5h9v13H8V48z' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M27 7h10v24l8-8 7 7-20 20-20-20 7-7 8 8V7zM8 48h9v5h30v-5h9v13H8V48z' fill='black'/%3E%3C/svg%3E") !important;
}
/* =========================================================
3. LOG IN - SIGN IN ICON
========================================================= */
.how-login .circle-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M34 7h23v50H34v-9h14V16H34V7zM7 27h27l-8-8 7-7 20 20-20 20-7-7 8-8H7V27z' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M34 7h23v50H34v-9h14V16H34V7zM7 27h27l-8-8 7-7 20 20-20 20-7-7 8-8H7V27z' fill='black'/%3E%3C/svg%3E") !important;
}
/* =========================================================
4. CONFIGURE - GEAR
========================================================= */
.how-configure .circle-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M27 5h10l2 8 6 3 7-4 7 7-4 7 3 6 8 2v10l-8 2-3 6 4 7-7 7-7-4-6 3-2 8H27l-2-8-6-3-7 4-7-7 4-7-3-6-8-2V34l8-2 3-6-4-7 7-7 7 4 6-3 2-8zm5 19a8 8 0 100 16 8 8 0 000-16z' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M27 5h10l2 8 6 3 7-4 7 7-4 7 3 6 8 2v10l-8 2-3 6 4 7-7 7-7-4-6 3-2 8H27l-2-8-6-3-7 4-7-7 4-7-3-6-8-2V34l8-2 3-6-4-7 7-7 7 4 6-3 2-8zm5 19a8 8 0 100 16 8 8 0 000-16z' fill='black'/%3E%3C/svg%3E") !important;
}
/* =========================================================
5. LAUNCH - PLAY ICON
========================================================= */
.how-launch .circle-icon::before {
width: 31px !important;
height: 31px !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M17 8l38 24-38 24V8z' fill='black'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M17 8l38 24-38 24V8z' fill='black'/%3E%3C/svg%3E") !important;
}
/* =========================================================
STEP ARROWS
========================================================= */
.how-section .step-arrow {
width: 20px !important;
height: 20px !important;
position: relative !important;
align-self: start !important;
margin: 24px auto 0 !important;
}
.how-section .step-arrow::before {
content: "" !important;
display: block !important;
width: 15px !important;
height: 15px !important;
border-top: 3px solid #20DFFF !important;
border-right: 3px solid #20DFFF !important;
transform: rotate(45deg) !important;
filter:
drop-shadow(0 0 4px rgba(32,223,255,0.75))
drop-shadow(0 0 8px rgba(32,223,255,0.28)) !important;
}
/* =========================================================
STEP TEXT
========================================================= */
.how-section .how-step h3 {
color: #F6F8FF !important;
font-weight: 800 !important;
font-size: 16px !important;
line-height: 1.2 !important;
margin: 0 0 7px !important;
}
.how-section .how-step p {
color: #D2DAE8 !important;
font-size: 13px !important;
line-height: 1.42 !important;
max-width: 205px !important;
margin: 0 auto !important;
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.how-section .how-grid {
grid-template-columns:
minmax(0, 1fr) 24px
minmax(0, 1fr) 24px
minmax(0, 1fr) 24px
minmax(0, 1fr) 24px
minmax(0, 1fr) !important;
gap: 4px !important;
}
.how-section .circle-icon {
width: 58px !important;
height: 58px !important;
margin-bottom: 10px !important;
}
.how-section .circle-icon::before {
width: 28px !important;
height: 28px !important;
}
.how-section .how-launch .circle-icon::before {
width: 26px !important;
height: 26px !important;
}
.how-section .step-arrow {
margin-top: 19px !important;
}
.how-section .step-arrow::before {
width: 12px !important;
height: 12px !important;
}
.how-section .how-step h3 {
font-size: 14px !important;
}
.how-section .how-step p {
font-size: 11.5px !important;
max-width: 155px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 759px) {
.how-section .how-grid {
grid-template-columns: 1fr !important;
gap: 22px !important;
}
.how-section .step-arrow {
display: none !important;
}
.how-section .how-step p {
max-width: 270px !important;
}
}
/* =========================================================
HOW IT WORKS - CLEAN CONFIGURE GEAR ICON
========================================================= */
.how-configure .circle-icon::before {
width: 32px !important;
height: 32px !important;
background-color: #20DFFF !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' fill-rule='evenodd' d='M27 4h10l1.7 7.2a22 22 0 0 1 5.1 2.1l6.3-3.9 7.1 7.1-3.9 6.3a22 22 0 0 1 2.1 5.1L62 29v10l-7.2 1.7a22 22 0 0 1-2.1 5.1l3.9 6.3-7.1 7.1-6.3-3.9a22 22 0 0 1-5.1 2.1L37 64H27l-1.7-7.2a22 22 0 0 1-5.1-2.1l-6.3 3.9-7.1-7.1 3.9-6.3a22 22 0 0 1-2.1-5.1L2 39V29l7.2-1.7a22 22 0 0 1 2.1-5.1l-3.9-6.3 7.1-7.1 6.3 3.9a22 22 0 0 1 5.1-2.1L27 4zm5 18a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 6a4 4 0 1 1 0 8 4 4 0 0 1 0-8z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' fill-rule='evenodd' d='M27 4h10l1.7 7.2a22 22 0 0 1 5.1 2.1l6.3-3.9 7.1 7.1-3.9 6.3a22 22 0 0 1 2.1 5.1L62 29v10l-7.2 1.7a22 22 0 0 1-2.1 5.1l3.9 6.3-7.1 7.1-6.3-3.9a22 22 0 0 1-5.1 2.1L37 64H27l-1.7-7.2a22 22 0 0 1-5.1-2.1l-6.3 3.9-7.1-7.1 3.9-6.3a22 22 0 0 1-2.1-5.1L2 39V29l7.2-1.7a22 22 0 0 1 2.1-5.1l-3.9-6.3 7.1-7.1 6.3 3.9a22 22 0 0 1 5.1-2.1L27 4zm5 18a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 6a4 4 0 1 1 0 8 4 4 0 0 1 0-8z'/%3E%3C/svg%3E") !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
filter:
drop-shadow(0 0 5px rgba(32,223,255,0.75))
drop-shadow(0 0 10px rgba(32,223,255,0.28)) !important;
}
/* =========================================================
CADDYLOBBY APP PROMOTIONAL IMAGE
========================================================= */
.app-promo-wrap {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
margin: 0 0 12px !important;
border: 1px solid rgba(32, 223, 255, 0.55) !important;
border-radius: 8px !important;
background: #050b1b !important;
box-shadow:
0 0 12px rgba(32, 223, 255, 0.10),
0 0 18px rgba(255, 79, 216, 0.07) !important;
}
.app-promo-image {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
border: 0 !important;
border-radius: 7px !important;
}
/* Windowed desktop */
@media (min-width: 760px) and (max-width: 1199px) {
.app-promo-wrap {
margin-bottom: 9px !important;
}
}
/* Mobile */
@media (max-width: 759px) {
.app-promo-wrap {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
}
}
/* =========================================================
PRICING + APP LAYOUT V2
Compact plan cards + separate full-width download section
========================================================= */
/* ---------------------------------------------------------
PRICING GRID
--------------------------------------------------------- */
.plans-layout {
display: grid !important;
grid-template-columns:
minmax(330px, 390px)
minmax(330px, 390px) !important;
justify-content: center !important;
align-items: stretch !important;
column-gap: 18px !important;
row-gap: 30px !important;
width: 100% !important;
}
/* ---------------------------------------------------------
SMALLER FREE + PRO CARDS
--------------------------------------------------------- */
.plans-layout > .plan-card {
width: 100% !important;
max-width: 390px !important;
min-height: 0 !important;
height: auto !important;
padding: 22px 18px 16px !important;
justify-self: center !important;
}
/* Reduce unnecessary empty space */
.plan-card .plan-number {
margin-top: 8px !important;
}
.plan-card .unlimited {
margin-top: 12px !important;
}
.plan-card ul {
margin-top: 16px !important;
margin-bottom: 18px !important;
}
/* Keep buttons neat */
.plan-card .gradient-btn {
margin-top: auto !important;
}
/* =========================================================
FULL-WIDTH CADDYLOBBY APP SECTION
========================================================= */
.plans-layout > .download-card {
grid-column: 1 / -1 !important;
display: grid !important;
grid-template-columns:
minmax(0, 1.25fr)
minmax(300px, 0.75fr) !important;
align-items: center !important;
gap: 28px !important;
width: min(1120px, calc(100vw - 120px)) !important;
max-width: 1120px !important;
min-height: 0 !important;
justify-self: center !important;
margin-top: 4px !important;
padding: 18px !important;
border: 1px solid rgba(32, 223, 255, 0.55) !important;
border-radius: 10px !important;
background:
radial-gradient(
circle at 18% 50%,
rgba(32,223,255,0.08),
transparent 42%
),
radial-gradient(
circle at 88% 55%,
rgba(255,79,216,0.08),
transparent 42%
),
#061126 !important;
box-shadow:
0 0 20px rgba(32,223,255,0.08),
0 0 28px rgba(168,108,255,0.06) !important;
}
/* ---------------------------------------------------------
PROMO IMAGE SIDE
--------------------------------------------------------- */
.download-card .download-promo-side {
min-width: 0 !important;
}
.download-card .app-promo-wrap {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
margin: 0 !important;
overflow: hidden !important;
border-radius: 8px !important;
border: 1px solid rgba(32,223,255,0.42) !important;
background: #030818 !important;
box-shadow:
0 0 12px rgba(32,223,255,0.08),
0 0 18px rgba(255,79,216,0.05) !important;
}
.download-card .app-promo-image {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
/* ---------------------------------------------------------
DOWNLOAD INFORMATION SIDE
--------------------------------------------------------- */
.download-info-side {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0 !important;
}
.download-kicker {
color: #20DFFF !important;
font-size: 11px !important;
font-weight: 900 !important;
letter-spacing: 0.22em !important;
margin-bottom: 7px !important;
text-shadow:
0 0 8px rgba(32,223,255,0.28) !important;
}
.download-info-side h3 {
margin: 0 0 10px !important;
color: #F6F8FF !important;
font-size: 28px !important;
font-weight: 900 !important;
line-height: 1.05 !important;
}
.download-info-side h3 span {
color: #FF4FD8 !important;
text-shadow:
0 0 10px rgba(255,79,216,0.20) !important;
}
.download-description {
max-width: 420px !important;
margin: 0 0 17px !important;
color: #D5DEED !important;
font-size: 13px !important;
line-height: 1.55 !important;
}
/* ---------------------------------------------------------
DOWNLOAD BENEFITS
--------------------------------------------------------- */
.download-benefits {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px 15px !important;
margin-bottom: 18px !important;
}
.download-benefits > div {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
color: #CFE5F3 !important;
font-size: 12px !important;
font-weight: 700 !important;
}
.download-benefit-icon {
color: #20DFFF !important;
font-weight: 900 !important;
text-shadow:
0 0 7px rgba(32,223,255,0.50) !important;
}
/* ---------------------------------------------------------
DOWNLOAD BUTTON
--------------------------------------------------------- */
.download-info-side .download-button {
width: 100% !important;
max-width: 390px !important;
min-height: 48px !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
font-size: 14px !important;
font-weight: 900 !important;
}
.windows-download-icon {
font-size: 21px !important;
line-height: 1 !important;
}
.download-small-note {
width: 100% !important;
max-width: 390px !important;
margin-top: 9px !important;
color: #8395AF !important;
text-align: center !important;
font-size: 10px !important;
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.plans-layout {
grid-template-columns:
minmax(290px, 360px)
minmax(290px, 360px) !important;
gap: 16px !important;
}
.plans-layout > .plan-card {
max-width: 360px !important;
}
.plans-layout > .download-card {
width: calc(100vw - 70px) !important;
grid-template-columns:
minmax(0, 1.15fr)
minmax(270px, 0.85fr) !important;
gap: 20px !important;
}
.download-info-side h3 {
font-size: 23px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 759px) {
.plans-layout {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.plans-layout > .plan-card {
width: min(100%, 390px) !important;
max-width: 390px !important;
}
.plans-layout > .download-card {
grid-column: 1 !important;
grid-template-columns: 1fr !important;
width: 100% !important;
gap: 18px !important;
}
.download-info-side {
align-items: center !important;
text-align: center !important;
}
.download-description {
text-align: center !important;
}
.download-benefits {
justify-content: center !important;
}
}
/* =========================================================
SMALLER FREE + PRO PRICING CARDS
========================================================= */
/* Make the two-column pricing pair more compact */
.plans-layout {
grid-template-columns:
minmax(285px, 325px)
minmax(285px, 325px) !important;
column-gap: 16px !important;
}
/* Shrink only Free + Pro */
.plans-layout > .plan-card {
width: 100% !important;
max-width: 325px !important;
min-height: 0 !important;
height: auto !important;
padding: 16px 14px 12px !important;
}
/* Tighten card headings */
.plan-card h3 {
margin-bottom: 3px !important;
}
.plan-card .plan-subtitle {
margin-bottom: 6px !important;
}
/* Tighten the main plan number */
.plan-card .plan-number {
margin-top: 4px !important;
margin-bottom: 0 !important;
}
/* Tighten Unlimited */
.plan-card .unlimited {
margin-top: 7px !important;
margin-bottom: 0 !important;
}
/* Reduce gap before feature lists */
.plan-card ul {
margin-top: 11px !important;
margin-bottom: 12px !important;
}
/* Slightly tighter individual feature rows */
.plan-card li {
margin-bottom: 4px !important;
}
/* Slightly smaller pricing buttons */
.plan-card .gradient-btn {
min-height: 40px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.plans-layout {
grid-template-columns:
minmax(270px, 305px)
minmax(270px, 305px) !important;
column-gap: 14px !important;
}
.plans-layout > .plan-card {
max-width: 305px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 759px) {
.plans-layout > .plan-card {
width: min(100%, 325px) !important;
max-width: 325px !important;
}
}
/* =========================================================
COMPACT FREE + PRO CARDS
========================================================= */
.plans-layout {
grid-template-columns: 280px 280px !important;
column-gap: 14px !important;
}
/* Only Free + Pro */
.plans-layout > .plan-card {
width: 280px !important;
max-width: 280px !important;
min-height: 0 !important;
height: auto !important;
padding: 13px 12px 11px !important;
}
/* Titles */
.plans-layout > .plan-card h3 {
font-size: 23px !important;
line-height: 1 !important;
margin: 0 0 4px !important;
}
/* Small subtitle */
.plans-layout > .plan-card .plan-subtitle {
font-size: 10px !important;
line-height: 1.2 !important;
margin: 0 0 5px !important;
}
/* FREE number */
.plans-layout > .plan-card .plan-number {
font-size: 36px !important;
line-height: 1 !important;
margin: 5px 0 1px !important;
}
/* UNLIMITED */
.plans-layout > .plan-card .unlimited {
font-size: 25px !important;
line-height: 1 !important;
margin: 8px 0 2px !important;
}
/* BOT SLOT / BOT SLOTS */
.plans-layout > .plan-card .bot-slots {
font-size: 11px !important;
line-height: 1 !important;
margin-bottom: 9px !important;
}
/* Compact feature list */
.plans-layout > .plan-card ul {
margin: 8px 0 10px !important;
padding: 0 !important;
}
.plans-layout > .plan-card li {
font-size: 10.5px !important;
line-height: 1.25 !important;
min-height: 0 !important;
margin: 0 0 4px !important;
padding-left: 19px !important;
}
/* Smaller neon ticks */
.plans-layout > .plan-card li::before {
left: 0 !important;
font-size: 13px !important;
}
/* Compact buttons */
.plans-layout > .plan-card .gradient-btn {
width: 100% !important;
min-height: 37px !important;
height: 37px !important;
padding: 6px 9px !important;
font-size: 11.5px !important;
line-height: 1 !important;
margin-top: 5px !important;
}
/* Popular label */
.plans-layout > .pro-card .popular {
top: 9px !important;
right: 9px !important;
font-size: 7px !important;
padding: 5px 8px !important;
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.plans-layout {
grid-template-columns: 255px 255px !important;
column-gap: 12px !important;
}
.plans-layout > .plan-card {
width: 255px !important;
max-width: 255px !important;
padding: 12px 11px 10px !important;
}
.plans-layout > .plan-card li {
font-size: 9.8px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 759px) {
.plans-layout {
grid-template-columns: 1fr !important;
}
.plans-layout > .plan-card {
width: min(100%, 280px) !important;
max-width: 280px !important;
justify-self: center !important;
}
}
/* =========================================================
EXTRA COMPACT FREE + PRO CARDS
========================================================= */
.plans-layout {
grid-template-columns: 230px 230px !important;
column-gap: 12px !important;
}
/* FREE + PRO only */
.plans-layout > .plan-card {
width: 230px !important;
max-width: 230px !important;
min-height: 0 !important;
height: auto !important;
padding: 11px 10px 9px !important;
}
/* Plan headings */
.plans-layout > .plan-card h3 {
font-size: 20px !important;
margin: 0 0 3px !important;
}
/* Subtitle */
.plans-layout > .plan-card .plan-subtitle {
font-size: 8.5px !important;
margin: 0 0 4px !important;
}
/* Free number */
.plans-layout > .plan-card .plan-number {
font-size: 31px !important;
margin: 4px 0 0 !important;
}
/* Unlimited */
.plans-layout > .plan-card .unlimited {
font-size: 21px !important;
margin: 6px 0 1px !important;
}
/* Bot slot wording */
.plans-layout > .plan-card .bot-slots {
font-size: 9.5px !important;
margin-bottom: 7px !important;
}
/* Feature list */
.plans-layout > .plan-card ul {
margin: 6px 0 8px !important;
}
.plans-layout > .plan-card li {
font-size: 8.8px !important;
line-height: 1.2 !important;
margin-bottom: 3px !important;
padding-left: 16px !important;
}
/* Smaller ticks */
.plans-layout > .plan-card li::before {
font-size: 11px !important;
}
/* Smaller buttons */
.plans-layout > .plan-card .gradient-btn {
height: 34px !important;
min-height: 34px !important;
padding: 5px 6px !important;
font-size: 10px !important;
margin-top: 3px !important;
}
/* Popular badge */
.plans-layout > .pro-card .popular {
top: 8px !important;
right: 8px !important;
font-size: 6px !important;
padding: 4px 6px !important;
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.plans-layout {
grid-template-columns: 215px 215px !important;
column-gap: 10px !important;
}
.plans-layout > .plan-card {
width: 215px !important;
max-width: 215px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 759px) {
.plans-layout {
grid-template-columns: 1fr !important;
}
.plans-layout > .plan-card {
width: min(100%, 230px) !important;
max-width: 230px !important;
justify-self: center !important;
}
}
/* =========================================================
COMPACT PRICING CARDS - TEXT + SPACING FIX
Keep cards at 230px wide
========================================================= */
/* Give the content enough vertical room */
.plans-layout > .plan-card {
width: 230px !important;
max-width: 230px !important;
padding: 12px 11px 11px !important;
min-height: 235px !important;
display: flex !important;
flex-direction: column !important;
}
/* FREE / PRO headings */
.plans-layout > .plan-card h3 {
font-size: 21px !important;
line-height: 1 !important;
margin: 0 0 4px !important;
}
/* Small description under FREE / PRO */
.plans-layout > .plan-card .plan-subtitle {
font-size: 9px !important;
line-height: 1.25 !important;
margin: 0 0 5px !important;
}
/* Main FREE number */
.plans-layout > .plan-card .plan-number {
font-size: 31px !important;
line-height: 1 !important;
margin: 5px 0 1px !important;
}
/* PRO Unlimited */
.plans-layout > .plan-card .unlimited {
font-size: 20px !important;
line-height: 1 !important;
margin: 7px 0 2px !important;
white-space: nowrap !important;
}
/* BOT SLOT / BOT SLOTS */
.plans-layout > .plan-card .bot-slots {
font-size: 9.5px !important;
line-height: 1 !important;
margin-bottom: 8px !important;
}
/* Feature list */
.plans-layout > .plan-card ul {
margin: 7px 0 9px !important;
padding: 0 !important;
flex: 1 1 auto !important;
}
/* Make feature wording readable again */
.plans-layout > .plan-card li {
font-size: 9.7px !important;
line-height: 1.28 !important;
margin: 0 0 4px !important;
padding-left: 17px !important;
white-space: normal !important;
}
/* Clean tick placement */
.plans-layout > .plan-card li::before {
font-size: 12px !important;
left: 0 !important;
top: 0 !important;
}
/* Keep buttons at bottom */
.plans-layout > .plan-card .gradient-btn {
width: 100% !important;
height: 34px !important;
min-height: 34px !important;
margin-top: auto !important;
padding: 5px 5px !important;
font-size: 9.5px !important;
line-height: 1 !important;
white-space: nowrap !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
/* Prevent the price/button text wrapping */
.plans-layout > .pro-card .gradient-btn {
font-size: 9px !important;
letter-spacing: -0.02em !important;
}
/* MOST POPULAR */
.plans-layout > .pro-card .popular {
top: 8px !important;
right: 8px !important;
font-size: 5.8px !important;
padding: 4px 6px !important;
white-space: nowrap !important;
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.plans-layout > .plan-card {
width: 215px !important;
max-width: 215px !important;
min-height: 230px !important;
}
.plans-layout > .plan-card li {
font-size: 9.2px !important;
}
.plans-layout > .pro-card .gradient-btn {
font-size: 8.5px !important;
}
}
/* =========================================================
FINAL COMPACT PRICING CARD CONTENT FIX
========================================================= */
.plans-layout > .plan-card {
width: 230px !important;
max-width: 230px !important;
min-height: 0 !important;
height: auto !important;
padding: 12px 11px 11px !important;
display: flex !important;
flex-direction: column !important;
overflow: visible !important;
}
/* FREE / PRO */
.plans-layout > .plan-card h3 {
font-size: 20px !important;
line-height: 1 !important;
margin: 0 0 4px !important;
}
/* Subtitle */
.plans-layout > .plan-card .plan-subtitle {
font-size: 8.8px !important;
line-height: 1.2 !important;
margin: 0 0 5px !important;
}
/* FREE number */
.plans-layout > .plan-card .plan-number {
font-size: 30px !important;
line-height: 1 !important;
margin: 5px 0 1px !important;
}
/* UNLIMITED */
.plans-layout > .plan-card .unlimited {
font-size: 20px !important;
line-height: 1 !important;
margin: 6px 0 1px !important;
white-space: nowrap !important;
}
/* BOT SLOT / BOT SLOTS */
.plans-layout > .plan-card .bot-slots {
font-size: 9px !important;
line-height: 1 !important;
margin: 0 0 4px !important;
}
/* New Pro price */
.plans-layout > .pro-card .plan-price {
color: #FF4FD8 !important;
font-size: 11px !important;
font-weight: 900 !important;
line-height: 1 !important;
text-align: center !important;
margin: 2px 0 7px !important;
text-shadow:
0 0 7px rgba(255,79,216,0.28) !important;
}
/* Feature list */
.plans-layout > .plan-card ul {
margin: 6px 0 9px !important;
padding: 0 !important;
flex: 1 1 auto !important;
}
/* Readable list text */
.plans-layout > .plan-card li {
font-size: 9px !important;
line-height: 1.15 !important;
min-height: 0 !important;
margin: 0 0 4px !important;
padding-left: 16px !important;
}
/* Check marks */
.plans-layout > .plan-card li::before {
font-size: 11px !important;
left: 0 !important;
top: 0 !important;
}
/* Buttons stay in normal flow at bottom */
.plans-layout > .plan-card .gradient-btn {
position: static !important;
width: 100% !important;
height: 35px !important;
min-height: 35px !important;
margin: auto 0 0 !important;
padding: 5px 8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
font-size: 10px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
/* Pro button can now be clean and simple */
.plans-layout > .pro-card .gradient-btn {
font-size: 10.5px !important;
}
/* Popular badge */
.plans-layout > .pro-card .popular {
top: 8px !important;
right: 8px !important;
font-size: 5.5px !important;
padding: 4px 6px !important;
white-space: nowrap !important;
}
/* =========================================================
PRICING CARDS - TALLER, NOT WIDER
========================================================= */
.plans-layout > .plan-card {
width: 230px !important;
max-width: 230px !important;
height: 275px !important;
min-height: 275px !important;
padding: 13px 11px 12px !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
}
/* Give the feature lists more breathing room */
.plans-layout > .plan-card ul {
margin-top: 10px !important;
margin-bottom: 10px !important;
flex: 1 1 auto !important;
}
/* Slightly more spacing between features */
.plans-layout > .plan-card li {
margin-bottom: 5px !important;
line-height: 1.25 !important;
}
/* Keep button at the bottom of each card */
.plans-layout > .plan-card .gradient-btn {
position: static !important;
width: 100% !important;
margin-top: auto !important;
flex-shrink: 0 !important;
}
/* Keep Pro price clear of the feature list */
.plans-layout > .pro-card .plan-price {
margin-top: 4px !important;
margin-bottom: 5px !important;
}
/* Windowed desktop */
@media (min-width: 760px) and (max-width: 1199px) {
.plans-layout > .plan-card {
width: 215px !important;
max-width: 215px !important;
height: 270px !important;
min-height: 270px !important;
}
}
/* =========================================================
PRICING CARDS - CONTENT READABILITY FIX
DIMENSIONS UNCHANGED
========================================================= */
/* Feature list */
.plans-layout > .plan-card ul {
margin: 7px 0 8px !important;
padding: 0 !important;
flex: 1 1 auto !important;
min-height: 0 !important;
}
/* Make features readable without enlarging the cards */
.plans-layout > .plan-card li {
font-size: 10px !important;
line-height: 1.18 !important;
margin: 0 0 4px !important;
padding-left: 17px !important;
white-space: normal !important;
}
/* Clean checks */
.plans-layout > .plan-card li::before {
font-size: 12px !important;
line-height: 1 !important;
left: 0 !important;
top: 1px !important;
}
/* Pro price lives ABOVE button */
.plans-layout > .pro-card .plan-price {
color: #FF4FD8 !important;
font-size: 10.5px !important;
font-weight: 900 !important;
line-height: 1 !important;
text-align: center !important;
margin: 1px 0 6px !important;
white-space: nowrap !important;
text-shadow:
0 0 7px rgba(255,79,216,0.32) !important;
}
/* Pricing buttons stay clean at bottom */
.plans-layout > .plan-card .gradient-btn {
position: static !important;
flex-shrink: 0 !important;
margin-top: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
white-space: nowrap !important;
font-size: 10px !important;
}
/* PRO button */
.plans-layout > .pro-card .gradient-btn {
font-size: 10.5px !important;
}
/* Restore app download button sizing independently */
.download-card .download-button {
width: 100% !important;
max-width: 390px !important;
min-height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
font-size: 13px !important;
font-weight: 900 !important;
white-space: nowrap !important;
}
.download-card .windows-download-icon {
font-size: 20px !important;
line-height: 1 !important;
}
/* =========================================================
PRICING CARD REPAIR
KEEP NARROW WIDTH - ADD VERTICAL ROOM
========================================================= */
.plans-layout > .plan-card {
width: 230px !important;
max-width: 230px !important;
height: 300px !important;
min-height: 300px !important;
padding: 13px 11px 11px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
/* Headings */
.plans-layout > .plan-card h3 {
font-size: 20px !important;
line-height: 1 !important;
margin: 0 0 4px !important;
}
/* Subtitle */
.plans-layout > .plan-card .plan-subtitle {
font-size: 9px !important;
line-height: 1.25 !important;
margin: 0 0 5px !important;
}
/* Main number */
.plans-layout > .plan-card .plan-number {
font-size: 30px !important;
line-height: 1 !important;
margin: 6px 0 1px !important;
}
/* Unlimited */
.plans-layout > .pro-card .unlimited {
font-size: 20px !important;
line-height: 1 !important;
margin: 7px 0 2px !important;
white-space: nowrap !important;
}
/* Bot slot labels */
.plans-layout > .plan-card .bot-slots {
font-size: 9px !important;
line-height: 1 !important;
margin: 0 0 4px !important;
}
/* Pro monthly price */
.plans-layout > .pro-card .plan-price {
color: #FF4FD8 !important;
font-size: 10px !important;
font-weight: 900 !important;
line-height: 1 !important;
text-align: center !important;
margin: 2px 0 7px !important;
white-space: nowrap !important;
text-shadow:
0 0 7px rgba(255,79,216,0.35) !important;
}
/* Feature list */
.plans-layout > .plan-card ul {
flex: 1 1 auto !important;
margin: 7px 0 8px !important;
padding: 0 !important;
min-height: 0 !important;
}
/* Readable feature text */
.plans-layout > .plan-card li {
font-size: 9.2px !important;
line-height: 1.22 !important;
margin: 0 0 4px !important;
padding-left: 17px !important;
white-space: normal !important;
}
/* Neon checks */
.plans-layout > .plan-card li::before {
font-size: 12px !important;
left: 0 !important;
top: 0 !important;
}
/* Buttons */
.plans-layout > .plan-card .gradient-btn {
position: static !important;
width: 100% !important;
min-height: 36px !important;
height: 36px !important;
flex: 0 0 36px !important;
margin: auto 0 0 !important;
padding: 5px 7px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
font-size: 10px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
/* Most Popular badge */
.plans-layout > .pro-card .popular {
top: 8px !important;
right: 8px !important;
font-size: 5.5px !important;
padding: 4px 6px !important;
white-space: nowrap !important;
}
/* Windowed desktop */
@media (min-width: 760px) and (max-width: 1199px) {
.plans-layout > .plan-card {
width: 215px !important;
max-width: 215px !important;
height: 300px !important;
min-height: 300px !important;
}
}
/* =========================================================
FINAL PRICING HEIGHT TUNE
WIDTH STAYS EXACTLY THE SAME
========================================================= */
.plans-layout > .plan-card {
width: 230px !important;
max-width: 230px !important;
height: 320px !important;
min-height: 320px !important;
}
/* Give final list items clear room above the button */
.plans-layout > .plan-card ul {
margin-bottom: 12px !important;
}
/* Windowed desktop */
@media (min-width: 760px) and (max-width: 1199px) {
.plans-layout > .plan-card {
width: 215px !important;
max-width: 215px !important;
height: 320px !important;
min-height: 320px !important;
}
}
/* =========================================================
PRO CARD - FINAL VISUAL POLISH
SIZE OF CARD STAYS UNCHANGED
========================================================= */
/* Make UNLIMITED slightly smaller */
.plans-layout > .pro-card .unlimited {
font-size: 17px !important;
line-height: 1 !important;
margin-top: 7px !important;
margin-bottom: 2px !important;
white-space: nowrap !important;
}
/* Make monthly price more noticeable */
.plans-layout > .pro-card .plan-price {
color: #FF4FD8 !important;
font-size: 12.5px !important;
font-weight: 900 !important;
line-height: 1 !important;
text-align: center !important;
margin-top: 3px !important;
margin-bottom: 8px !important;
white-space: nowrap !important;
text-shadow:
0 0 6px rgba(255,79,216,0.45),
0 0 12px rgba(255,79,216,0.15) !important;
}
/* Give the final Pro feature more room above the button */
.plans-layout > .pro-card ul {
margin-bottom: 16px !important;
}
/* Slight extra clearance under last feature */
.plans-layout > .pro-card li:last-child {
margin-bottom: 4px !important;
}
/* Make MOST POPULAR larger and clearer */
.plans-layout > .pro-card .popular {
top: 8px !important;
right: 8px !important;
font-size: 7px !important;
font-weight: 900 !important;
line-height: 1 !important;
padding: 5px 8px !important;
border-radius: 4px !important;
white-space: nowrap !important;
letter-spacing: 0.02em !important;
box-shadow:
0 0 8px rgba(255,79,216,0.32) !important;
}
/* =========================================================
PRO CARD - SPACING + BADGE TUNE
CARD SIZE UNCHANGED
========================================================= */
/* MUCH LARGER MOST POPULAR badge */
.plans-layout > .pro-card .popular {
top: 7px !important;
right: 7px !important;
font-size: 9px !important;
font-weight: 900 !important;
line-height: 1 !important;
padding: 6px 10px !important;
border-radius: 5px !important;
white-space: nowrap !important;
letter-spacing: 0.01em !important;
box-shadow:
0 0 8px rgba(255,79,216,0.45),
0 0 15px rgba(168,108,255,0.20) !important;
}
/* UNLIMITED - smaller and moved upward */
.plans-layout > .pro-card .unlimited {
font-size: 15px !important;
line-height: 1 !important;
margin-top: 2px !important;
margin-bottom: 1px !important;
transform: translateY(-3px) !important;
white-space: nowrap !important;
}
/* BOT SLOTS follows Unlimited upward */
.plans-layout > .pro-card .bot-slots {
margin-top: -2px !important;
margin-bottom: 2px !important;
transform: translateY(-3px) !important;
}
/* Price moves up with the Unlimited area */
.plans-layout > .pro-card .plan-price {
margin-top: 0 !important;
margin-bottom: 4px !important;
transform: translateY(-3px) !important;
}
/* Move the whole Pro feature list upward */
.plans-layout > .pro-card ul {
margin-top: 1px !important;
margin-bottom: 13px !important;
transform: translateY(-4px) !important;
}
/* Keep list rows compact */
.plans-layout > .pro-card li {
margin-bottom: 4px !important;
}
/* Keep button exactly where it is */
.plans-layout > .pro-card .gradient-btn {
transform: none !important;
}
/* =========================================================
PRO CARD - FINAL TOP TEXT SPACING
========================================================= */
/* Keep Unlimited where it is */
.plans-layout > .pro-card .unlimited {
margin-bottom: 3px !important;
}
/* Add breathing room below BOT SLOTS */
.plans-layout > .pro-card .bot-slots {
margin-bottom: 5px !important;
}
/* Keep price clear and readable */
.plans-layout > .pro-card .plan-price {
margin-top: 0 !important;
margin-bottom: 4px !important;
}
/* =========================================================
PRICING HEADING - ALIGN WITH FREE + PRO CARDS
========================================================= */
.plans-title {
width: 472px !important;
max-width: 472px !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 14px !important;
}
/* Keep title on one clean line */
.plans-title h2 {
margin: 0 !important;
white-space: nowrap !important;
}
/* Keep small pricing tagline beside it */
.plans-title p {
margin: 0 !important;
white-space: nowrap !important;
}
/* Windowed desktop - match 215px cards */
@media (min-width: 760px) and (max-width: 1199px) {
.plans-title {
width: 440px !important;
max-width: 440px !important;
gap: 11px !important;
}
}
/* Mobile */
@media (max-width: 759px) {
.plans-title {
width: min(100%, 300px) !important;
max-width: 300px !important;
flex-direction: column !important;
align-items: center !important;
gap: 5px !important;
text-align: center !important;
}
}
/* =========================================================
PRICING SECTION - MOVE DOWN SLIGHTLY
========================================================= */
.plans-section {
padding-top: 28px !important;
}
/* =========================================================
HOW IT WORKS TITLE ROW
Bring supporting text beside heading
========================================================= */
.how-section .section-title-row {
justify-content: flex-start !important;
align-items: center !important;
gap: 28px !important;
}
.how-section .section-title-row p {
margin: 0 !important;
transform: translateY(2px) !important;
white-space: nowrap !important;
}
/* Windowed desktop */
@media (min-width: 760px) and (max-width: 1199px) {
.how-section .section-title-row {
gap: 20px !important;
}
}
/* Mobile */
@media (max-width: 759px) {
.how-section .section-title-row {
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
text-align: center !important;
}
.how-section .section-title-row p {
white-space: normal !important;
transform: none !important;
}
}
/* =========================================================
BOTTOM CTA - CADDYLOBBY TAGLINE
========================================================= */
.bottom-inner h2 .cta-cyan {
color: #20DFFF !important;
text-shadow:
0 0 8px rgba(32,223,255,0.28) !important;
}
.bottom-inner h2 .cta-pink {
color: #FF4FD8 !important;
text-shadow:
0 0 8px rgba(255,79,216,0.28) !important;
}
/* =========================================================
BOTTOM CTA - MORE BOTS / MORE OPTIONS / MORE FUN
========================================================= */
.bottom-cta-title {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
}
.bottom-cta-title .cta-cyan {
color: #20DFFF !important;
text-shadow: 0 0 8px rgba(32,223,255,0.28) !important;
}
.bottom-cta-title .cta-pink {
color: #FF4FD8 !important;
text-shadow: 0 0 8px rgba(255,79,216,0.28) !important;
}
/* =========================================================
CADDYLOBBY COMMUNITY
========================================================= */
.community-section {
position: relative !important;
padding: 48px 0 54px !important;
overflow: hidden !important;
}
/* Soft neon ambience behind section */
.community-section::before {
content: "" !important;
position: absolute !important;
z-index: 0 !important;
left: 50% !important;
top: 58% !important;
width: 78% !important;
height: 70% !important;
transform: translate(-50%, -50%) !important;
pointer-events: none !important;
background:
radial-gradient(
circle at 18% 50%,
rgba(255,79,216,0.11),
transparent 28%
),
radial-gradient(
circle at 42% 50%,
rgba(53,167,255,0.10),
transparent 28%
),
radial-gradient(
circle at 68% 50%,
rgba(168,108,255,0.10),
transparent 28%
),
radial-gradient(
circle at 88% 50%,
rgba(32,223,255,0.10),
transparent 28%
) !important;
filter: blur(25px) !important;
}
.community-section .content-width {
position: relative !important;
z-index: 1 !important;
}
/* =========================================================
HEADING
========================================================= */
.community-heading {
display: flex !important;
justify-content: space-between !important;
align-items: flex-end !important;
gap: 28px !important;
margin-bottom: 24px !important;
}
.community-kicker {
display: flex !important;
align-items: center !important;
gap: 9px !important;
margin-bottom: 7px !important;
color: #20DFFF !important;
font-size: 9px !important;
font-weight: 900 !important;
letter-spacing: 0.18em !important;
}
.community-kicker span {
display: inline-flex !important;
padding: 4px 7px !important;
border: 1px solid rgba(255,79,216,0.60) !important;
border-radius: 4px !important;
color: #FF4FD8 !important;
background: rgba(255,79,216,0.08) !important;
font-size: 7px !important;
letter-spacing: 0.08em !important;
box-shadow:
0 0 8px rgba(255,79,216,0.15) !important;
}
.community-heading h2 {
margin: 0 !important;
color: #F5F8FF !important;
font-size: 27px !important;
font-weight: 900 !important;
line-height: 1 !important;
}
.community-heading h2 span {
color: #FF4FD8 !important;
text-shadow:
0 0 10px rgba(255,79,216,0.20) !important;
}
.community-heading > p {
max-width: 390px !important;
margin: 0 0 2px !important;
color: #9EACC1 !important;
font-size: 11px !important;
line-height: 1.45 !important;
text-align: right !important;
}
/* =========================================================
FOUR COMMUNITY CARDS
========================================================= */
.community-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 13px !important;
width: 100% !important;
}
.community-card {
position: relative !important;
min-height: 175px !important;
padding: 18px 16px 16px !important;
border: 1px solid rgba(119,156,210,0.30) !important;
border-radius: 8px !important;
background:
linear-gradient(
145deg,
rgba(10,26,54,0.92),
rgba(5,15,35,0.94)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.02),
0 8px 25px rgba(0,0,0,0.16) !important;
}
.community-card h3 {
margin: 13px 0 7px !important;
font-size: 14px !important;
font-weight: 900 !important;
line-height: 1.15 !important;
}
.community-card p {
margin: 0 !important;
color: #CBD5E5 !important;
font-size: 10px !important;
line-height: 1.48 !important;
}
/* =========================================================
ICON BASE
========================================================= */
.community-icon {
width: 34px !important;
height: 34px !important;
position: relative !important;
}
.community-icon::before {
content: "" !important;
display: block !important;
width: 100% !important;
height: 100% !important;
background-color: currentColor !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
}
/* =========================================================
1. BATTLE PASS - PINK STAR
========================================================= */
.community-battlepass {
border-color: rgba(255,79,216,0.32) !important;
}
.community-battlepass .community-icon,
.community-battlepass h3 {
color: #FF4FD8 !important;
}
.community-battlepass .community-icon {
filter:
drop-shadow(0 0 6px rgba(255,79,216,0.60)) !important;
}
.community-battlepass .community-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M32 4l8 18 20 2-15 13 5 20-18-10-18 10 5-20L4 24l20-2L32 4z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M32 4l8 18 20 2-15 13 5 20-18-10-18 10 5-20L4 24l20-2L32 4z'/%3E%3C/svg%3E") !important;
}
/* =========================================================
2. CHALLENGES - BLUE CHECKLIST
========================================================= */
.community-challenges {
border-color: rgba(53,167,255,0.32) !important;
}
.community-challenges .community-icon,
.community-challenges h3 {
color: #35A7FF !important;
}
.community-challenges .community-icon {
filter:
drop-shadow(0 0 6px rgba(53,167,255,0.60)) !important;
}
.community-challenges .community-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M10 8h44v48H10V8zm8 10v8h8v-8h-8zm14 1h16v6H32v-6zM18 32v8h8v-8h-8zm14 1h16v6H32v-6zM17 48l5 5 9-11-4-3-6 7-2-2-2 4z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M10 8h44v48H10V8zm8 10v8h8v-8h-8zm14 1h16v6H32v-6zM18 32v8h8v-8h-8zm14 1h16v6H32v-6zM17 48l5 5 9-11-4-3-6 7-2-2-2 4z'/%3E%3C/svg%3E") !important;
}
/* =========================================================
3. REAL PLAYERS - PURPLE GROUP
========================================================= */
.community-players {
border-color: rgba(168,108,255,0.32) !important;
}
.community-players .community-icon,
.community-players h3 {
color: #A86CFF !important;
}
.community-players .community-icon {
filter:
drop-shadow(0 0 6px rgba(168,108,255,0.60)) !important;
}
.community-players .community-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='18' r='9' fill='black'/%3E%3Ccircle cx='14' cy='24' r='7' fill='black'/%3E%3Ccircle cx='50' cy='24' r='7' fill='black'/%3E%3Cpath fill='black' d='M18 55c1-15 6-23 14-23s13 8 14 23H18zM2 54c1-12 5-19 12-19 4 0 7 2 9 6-3 4-5 8-5 13H2zm44 0c0-5-2-9-5-13 2-4 5-6 9-6 7 0 11 7 12 19H46z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='18' r='9' fill='black'/%3E%3Ccircle cx='14' cy='24' r='7' fill='black'/%3E%3Ccircle cx='50' cy='24' r='7' fill='black'/%3E%3Cpath fill='black' d='M18 55c1-15 6-23 14-23s13 8 14 23H18zM2 54c1-12 5-19 12-19 4 0 7 2 9 6-3 4-5 8-5 13H2zm44 0c0-5-2-9-5-13 2-4 5-6 9-6 7 0 11 7 12 19H46z'/%3E%3C/svg%3E") !important;
}
/* =========================================================
4. SPRITES - CYAN SWAP ARROWS
========================================================= */
.community-sprites {
border-color: rgba(32,223,255,0.32) !important;
}
.community-sprites .community-icon,
.community-sprites h3 {
color: #20DFFF !important;
}
.community-sprites .community-icon {
filter:
drop-shadow(0 0 6px rgba(32,223,255,0.60)) !important;
}
.community-sprites .community-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M8 18h34V8l16 15-16 15V28H8V18zm48 28H22v10L6 41l16-15v10h34v10z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M8 18h34V8l16 15-16 15V28H8V18zm48 28H22v10L6 41l16-15v10h34v10z'/%3E%3C/svg%3E") !important;
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.community-section {
padding: 38px 0 44px !important;
}
.community-grid {
gap: 9px !important;
}
.community-card {
min-height: 160px !important;
padding: 15px 12px !important;
}
.community-card h3 {
font-size: 12px !important;
}
.community-card p {
font-size: 9px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 759px) {
.community-heading {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
}
.community-heading > p {
text-align: left !important;
}
.community-grid {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
MORE THAN LOBBY BOTS / COMMUNITY SECTION
========================================================= */
.community-section {
position: relative !important;
padding: 48px 0 52px !important;
overflow: hidden !important;
}
/* Soft neon colour wash behind the cards */
.community-section::before {
content: "" !important;
position: absolute !important;
z-index: 0 !important;
left: 50% !important;
top: 60% !important;
width: 82% !important;
height: 72% !important;
transform: translate(-50%, -50%) !important;
pointer-events: none !important;
background:
radial-gradient(
circle at 12% 50%,
rgba(255,79,216,0.11),
transparent 27%
),
radial-gradient(
circle at 38% 50%,
rgba(53,167,255,0.10),
transparent 27%
),
radial-gradient(
circle at 66% 50%,
rgba(168,108,255,0.10),
transparent 27%
),
radial-gradient(
circle at 90% 50%,
rgba(32,223,255,0.10),
transparent 27%
) !important;
filter: blur(28px) !important;
}
.community-section .content-width {
position: relative !important;
z-index: 1 !important;
}
/* =========================================================
SECTION HEADING
========================================================= */
.community-heading {
display: flex !important;
justify-content: space-between !important;
align-items: flex-end !important;
gap: 30px !important;
margin-bottom: 22px !important;
}
.community-kicker {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 7px !important;
color: #20DFFF !important;
font-size: 9px !important;
font-weight: 900 !important;
letter-spacing: 0.16em !important;
}
.community-kicker span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px 7px !important;
border: 1px solid rgba(255,79,216,0.58) !important;
border-radius: 4px !important;
color: #FF4FD8 !important;
background: rgba(255,79,216,0.07) !important;
font-size: 7px !important;
font-weight: 900 !important;
letter-spacing: 0.08em !important;
box-shadow:
0 0 9px rgba(255,79,216,0.17) !important;
}
.community-heading h2 {
margin: 0 !important;
color: #F5F8FF !important;
font-size: 28px !important;
font-weight: 900 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.community-heading h2 span {
color: #FF4FD8 !important;
text-shadow:
0 0 10px rgba(255,79,216,0.22) !important;
}
.community-heading > p {
max-width: 400px !important;
margin: 0 0 2px !important;
color: #9DAAC0 !important;
font-size: 11px !important;
line-height: 1.5 !important;
text-align: right !important;
}
/* =========================================================
FOUR CARDS
========================================================= */
.community-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 13px !important;
width: 100% !important;
}
.community-card {
min-height: 168px !important;
padding: 18px 16px 16px !important;
border-radius: 8px !important;
background:
linear-gradient(
145deg,
rgba(9,25,53,0.94),
rgba(5,14,34,0.96)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
0 9px 25px rgba(0,0,0,0.18) !important;
}
.community-card h3 {
margin: 12px 0 7px !important;
font-size: 14px !important;
font-weight: 900 !important;
line-height: 1.15 !important;
}
.community-card p {
margin: 0 !important;
color: #CED7E6 !important;
font-size: 10px !important;
line-height: 1.48 !important;
}
/* =========================================================
ICON BASE
========================================================= */
.community-icon {
position: relative !important;
width: 33px !important;
height: 33px !important;
}
.community-icon::before {
content: "" !important;
display: block !important;
width: 100% !important;
height: 100% !important;
background-color: currentColor !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
}
/* =========================================================
1. BATTLE PASS - PINK
========================================================= */
.community-battlepass {
border: 1px solid rgba(255,79,216,0.34) !important;
}
.community-battlepass h3,
.community-battlepass .community-icon {
color: #FF4FD8 !important;
}
.community-battlepass .community-icon {
filter:
drop-shadow(0 0 6px rgba(255,79,216,0.55)) !important;
}
.community-battlepass .community-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M32 4l8 18 20 2-15 13 5 20-18-10-18 10 5-20L4 24l20-2L32 4z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M32 4l8 18 20 2-15 13 5 20-18-10-18 10 5-20L4 24l20-2L32 4z'/%3E%3C/svg%3E") !important;
}
/* =========================================================
2. CHALLENGES - BLUE
========================================================= */
.community-challenges {
border: 1px solid rgba(53,167,255,0.34) !important;
}
.community-challenges h3,
.community-challenges .community-icon {
color: #35A7FF !important;
}
.community-challenges .community-icon {
filter:
drop-shadow(0 0 6px rgba(53,167,255,0.55)) !important;
}
.community-challenges .community-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M13 7h38v50H13V7zm7 10v8h8v-8h-8zm14 1h11v6H34v-6zM20 31v8h8v-8h-8zm14 1h11v6H34v-6zM19 49l5 5 9-11-4-3-6 7-2-2-2 4z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M13 7h38v50H13V7zm7 10v8h8v-8h-8zm14 1h11v6H34v-6zM20 31v8h8v-8h-8zm14 1h11v6H34v-6zM19 49l5 5 9-11-4-3-6 7-2-2-2 4z'/%3E%3C/svg%3E") !important;
}
/* =========================================================
3. REAL PLAYERS - PURPLE
========================================================= */
.community-players {
border: 1px solid rgba(168,108,255,0.34) !important;
}
.community-players h3,
.community-players .community-icon {
color: #A86CFF !important;
}
.community-players .community-icon {
filter:
drop-shadow(0 0 6px rgba(168,108,255,0.55)) !important;
}
.community-players .community-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='18' r='9' fill='black'/%3E%3Ccircle cx='14' cy='24' r='7' fill='black'/%3E%3Ccircle cx='50' cy='24' r='7' fill='black'/%3E%3Cpath fill='black' d='M18 56c1-15 6-23 14-23s13 8 14 23H18zM2 55c1-12 5-19 12-19 4 0 7 2 9 6-3 4-5 8-5 13H2zm44 0c0-5-2-9-5-13 2-4 5-6 9-6 7 0 11 7 12 19H46z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='18' r='9' fill='black'/%3E%3Ccircle cx='14' cy='24' r='7' fill='black'/%3E%3Ccircle cx='50' cy='24' r='7' fill='black'/%3E%3Cpath fill='black' d='M18 56c1-15 6-23 14-23s13 8 14 23H18zM2 55c1-12 5-19 12-19 4 0 7 2 9 6-3 4-5 8-5 13H2zm44 0c0-5-2-9-5-13 2-4 5-6 9-6 7 0 11 7 12 19H46z'/%3E%3C/svg%3E") !important;
}
/* =========================================================
4. SPRITES - CYAN
========================================================= */
.community-sprites {
border: 1px solid rgba(32,223,255,0.34) !important;
}
.community-sprites h3,
.community-sprites .community-icon {
color: #20DFFF !important;
}
.community-sprites .community-icon {
filter:
drop-shadow(0 0 6px rgba(32,223,255,0.55)) !important;
}
.community-sprites .community-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M8 17h34V7l16 15-16 15V27H8V17zm48 30H22v10L6 42l16-15v10h34v10z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M8 17h34V7l16 15-16 15V27H8V17zm48 30H22v10L6 42l16-15v10h34v10z'/%3E%3C/svg%3E") !important;
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (min-width: 760px) and (max-width: 1199px) {
.community-section {
padding: 38px 0 42px !important;
}
.community-grid {
gap: 9px !important;
}
.community-card {
padding: 14px 12px !important;
min-height: 158px !important;
}
.community-card h3 {
font-size: 12px !important;
}
.community-card p {
font-size: 9px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 759px) {
.community-heading {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
}
.community-heading h2 {
white-space: normal !important;
}
.community-heading > p {
text-align: left !important;
}
.community-grid {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
BOT LOBBY FAQ - CADDYLOBBY
========================================================= */
.bot-faq-section {
position: relative !important;
padding: 48px 0 52px !important;
overflow: hidden !important;
}
.bot-faq-section::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 52% !important;
width: 78% !important;
height: 82% !important;
transform: translate(-50%, -50%) !important;
pointer-events: none !important;
background:
radial-gradient(circle at 25% 45%,
rgba(32,223,255,0.08),
transparent 34%),
radial-gradient(circle at 75% 58%,
rgba(255,79,216,0.08),
transparent 35%) !important;
filter: blur(26px) !important;
}
.bot-faq-section .content-width {
position: relative !important;
z-index: 1 !important;
}
/* FAQ HEADING */
.bot-faq-heading {
margin-bottom: 20px !important;
}
.bot-faq-kicker {
margin-bottom: 6px !important;
color: #20DFFF !important;
font-size: 9px !important;
font-weight: 900 !important;
letter-spacing: 0.18em !important;
}
.bot-faq-heading h2 {
margin: 0 !important;
color: #F6F8FF !important;
font-size: 28px !important;
font-weight: 900 !important;
line-height: 1 !important;
}
.bot-faq-heading h2 span {
color: #FF4FD8 !important;
text-shadow:
0 0 10px rgba(255,79,216,0.20) !important;
}
.bot-faq-heading > p {
max-width: 590px !important;
margin: 9px 0 0 !important;
color: #9DAAC0 !important;
font-size: 11px !important;
line-height: 1.5 !important;
}
/* FAQ LIST */
.bot-faq-list {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
width: 100% !important;
}
/* FAQ BOX */
.bot-faq-item {
overflow: hidden !important;
border: 1px solid rgba(41,113,164,0.35) !important;
border-radius: 8px !important;
background:
linear-gradient(
90deg,
rgba(8,24,50,0.96),
rgba(8,19,42,0.96)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.02),
0 8px 20px rgba(0,0,0,0.12) !important;
}
.bot-faq-item[open] {
border-color: rgba(32,223,255,0.42) !important;
box-shadow:
0 0 14px rgba(32,223,255,0.08) !important;
}
/* QUESTION */
.bot-faq-item summary {
position: relative !important;
min-height: 48px !important;
display: flex !important;
align-items: center !important;
padding: 0 48px 0 16px !important;
cursor: pointer !important;
list-style: none !important;
color: #F4F7FF !important;
font-size: 13px !important;
font-weight: 800 !important;
user-select: none !important;
}
.bot-faq-item summary::-webkit-details-marker {
display: none !important;
}
/* NEON ARROW */
.bot-faq-item summary::after {
content: "" !important;
position: absolute !important;
right: 18px !important;
top: 50% !important;
width: 8px !important;
height: 8px !important;
border-right: 2px solid #20DFFF !important;
border-bottom: 2px solid #20DFFF !important;
transform:
translateY(-65%)
rotate(45deg) !important;
transition: transform 0.2s ease !important;
filter:
drop-shadow(0 0 4px rgba(32,223,255,0.50)) !important;
}
.bot-faq-item[open] summary::after {
transform:
translateY(-30%)
rotate(225deg) !important;
}
/* ANSWER */
.bot-faq-answer {
padding: 0 16px 15px !important;
border-top:
1px solid rgba(76,111,160,0.16) !important;
}
.bot-faq-answer p {
margin: 12px 0 0 !important;
max-width: 1080px !important;
color: #C9D4E4 !important;
font-size: 11px !important;
line-height: 1.6 !important;
}
/* WINDOWED */
@media (min-width: 760px) and (max-width: 1199px) {
.bot-faq-section {
padding: 38px 0 42px !important;
}
.bot-faq-item summary {
min-height: 44px !important;
font-size: 11.5px !important;
}
.bot-faq-answer p {
font-size: 10px !important;
}
}
/* MOBILE */
@media (max-width: 759px) {
.bot-faq-heading h2 {
font-size: 24px !important;
line-height: 1.08 !important;
}
.bot-faq-item summary {
padding-left: 13px !important;
font-size: 11px !important;
}
.bot-faq-answer {
padding-left: 13px !important;
padding-right: 13px !important;
}
}
/* =========================================================
BOT LOBBY FAQ - FINAL
========================================================= */
.bot-faq-section {
position: relative !important;
padding: 46px 0 50px !important;
}
.bot-faq-heading {
margin-bottom: 20px !important;
}
.bot-faq-kicker {
color: #20DFFF !important;
font-size: 9px !important;
font-weight: 900 !important;
letter-spacing: 0.18em !important;
margin-bottom: 6px !important;
}
.bot-faq-heading h2 {
margin: 0 !important;
color: #F6F8FF !important;
font-size: 28px !important;
font-weight: 900 !important;
line-height: 1 !important;
}
.bot-faq-heading h2 span {
color: #FF4FD8 !important;
text-shadow: 0 0 10px rgba(255,79,216,0.22) !important;
}
.bot-faq-heading p {
max-width: 600px !important;
margin: 9px 0 0 !important;
color: #9DAAC0 !important;
font-size: 11px !important;
line-height: 1.5 !important;
}
.bot-faq-list {
display: flex !important;
flex-direction: column !important;
gap: 9px !important;
}
.bot-faq-item {
overflow: hidden !important;
border: 1px solid rgba(43,118,173,0.38) !important;
border-radius: 8px !important;
background:
linear-gradient(
90deg,
rgba(8,24,50,0.96),
rgba(7,18,40,0.96)
) !important;
}
.bot-faq-item[open] {
border-color: rgba(32,223,255,0.46) !important;
box-shadow:
0 0 14px rgba(32,223,255,0.08) !important;
}
.bot-faq-item summary {
position: relative !important;
min-height: 48px !important;
display: flex !important;
align-items: center !important;
padding: 0 48px 0 16px !important;
list-style: none !important;
cursor: pointer !important;
color: #F4F7FF !important;
font-size: 13px !important;
font-weight: 800 !important;
}
.bot-faq-item summary::-webkit-details-marker {
display: none !important;
}
.bot-faq-item summary::after {
content: "" !important;
position: absolute !important;
right: 18px !important;
top: 50% !important;
width: 8px !important;
height: 8px !important;
border-right: 2px solid #20DFFF !important;
border-bottom: 2px solid #20DFFF !important;
transform:
translateY(-65%)
rotate(45deg) !important;
filter:
drop-shadow(0 0 4px rgba(32,223,255,0.55)) !important;
}
.bot-faq-item[open] summary::after {
transform:
translateY(-30%)
rotate(225deg) !important;
}
.bot-faq-answer {
padding: 0 16px 15px !important;
border-top:
1px solid rgba(74,111,160,0.16) !important;
}
.bot-faq-answer p {
margin: 12px 0 0 !important;
color: #CCD6E5 !important;
font-size: 11px !important;
line-height: 1.6 !important;
}
@media (min-width: 760px) and (max-width: 1199px) {
.bot-faq-section {
padding: 38px 0 42px !important;
}
.bot-faq-item summary {
min-height: 44px !important;
font-size: 11.5px !important;
}
.bot-faq-answer p {
font-size: 10px !important;
}
}
@media (max-width: 759px) {
.bot-faq-heading h2 {
font-size: 23px !important;
}
.bot-faq-item summary {
font-size: 11px !important;
}
}
/* =========================================================
BOT LOBBY FAQ - FORCE INSTALL
========================================================= */
.bot-faq-section {
position: relative !important;
display: block !important;
width: 100% !important;
padding: 48px 0 52px !important;
background:
radial-gradient(
circle at 25% 40%,
rgba(32,223,255,0.055),
transparent 34%
),
radial-gradient(
circle at 78% 65%,
rgba(255,79,216,0.055),
transparent 36%
) !important;
}
.bot-faq-section .content-width {
display: block !important;
}
/* HEADER */
.bot-faq-heading {
margin-bottom: 20px !important;
}
.bot-faq-kicker {
color: #20DFFF !important;
font-size: 9px !important;
font-weight: 900 !important;
letter-spacing: 0.18em !important;
margin-bottom: 6px !important;
}
.bot-faq-heading h2 {
color: #F6F8FF !important;
font-size: 28px !important;
font-weight: 900 !important;
line-height: 1 !important;
margin: 0 !important;
}
.bot-faq-heading h2 span {
color: #FF4FD8 !important;
text-shadow:
0 0 10px rgba(255,79,216,0.24) !important;
}
.bot-faq-heading p {
color: #9EACC1 !important;
font-size: 11px !important;
line-height: 1.5 !important;
max-width: 610px !important;
margin: 9px 0 0 !important;
}
/* FAQ STACK */
.bot-faq-list {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 9px !important;
}
/* QUESTION BOX */
.bot-faq-item {
display: block !important;
width: 100% !important;
overflow: hidden !important;
border:
1px solid rgba(40,122,181,0.38) !important;
border-radius: 8px !important;
background:
linear-gradient(
90deg,
rgba(7,24,51,0.97),
rgba(8,19,42,0.97)
) !important;
box-shadow:
0 7px 20px rgba(0,0,0,0.13) !important;
}
.bot-faq-item[open] {
border-color:
rgba(32,223,255,0.48) !important;
box-shadow:
0 0 14px rgba(32,223,255,0.08) !important;
}
/* QUESTION TEXT */
.bot-faq-item summary {
position: relative !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 50px !important;
padding:
0 50px 0 17px !important;
box-sizing: border-box !important;
cursor: pointer !important;
list-style: none !important;
color: #F5F8FF !important;
font-size: 13px !important;
font-weight: 800 !important;
}
.bot-faq-item summary::-webkit-details-marker {
display: none !important;
}
/* NEON CHEVRON */
.bot-faq-item summary::after {
content: "" !important;
position: absolute !important;
right: 19px !important;
top: 50% !important;
width: 8px !important;
height: 8px !important;
border-right:
2px solid #20DFFF !important;
border-bottom:
2px solid #20DFFF !important;
transform:
translateY(-65%)
rotate(45deg) !important;
filter:
drop-shadow(
0 0 4px rgba(32,223,255,0.60)
) !important;
}
.bot-faq-item[open] summary::after {
transform:
translateY(-30%)
rotate(225deg) !important;
}
/* ANSWER */
.bot-faq-answer {
display: block !important;
padding:
0 17px 16px !important;
border-top:
1px solid rgba(75,111,162,0.17) !important;
}
.bot-faq-answer p {
color: #CCD7E7 !important;
font-size: 11px !important;
line-height: 1.62 !important;
margin: 12px 0 0 !important;
}
/* WINDOWED DESKTOP */
@media (min-width: 760px) and (max-width: 1199px) {
.bot-faq-section {
padding: 38px 0 42px !important;
}
.bot-faq-item summary {
min-height: 45px !important;
font-size: 11.5px !important;
}
.bot-faq-answer p {
font-size: 10px !important;
}
}
/* MOBILE */
@media (max-width: 759px) {
.bot-faq-heading h2 {
font-size: 23px !important;
line-height: 1.08 !important;
}
.bot-faq-item summary {
font-size: 11px !important;
padding-left: 13px !important;
}
}
/* =========================================================
BOT LOBBY FAQ - NEON COLOUR RHYTHM
PINK / BLUE / PURPLE / CYAN
========================================================= */
/* ---------------------------------------------------------
1. WHAT ARE BOT LOBBIES - PINK
--------------------------------------------------------- */
.bot-faq-item:nth-child(1) {
border-color: rgba(255,79,216,0.42) !important;
}
.bot-faq-item:nth-child(1) summary {
color: #FF72DE !important;
}
.bot-faq-item:nth-child(1) summary::after {
border-color: #FF4FD8 !important;
filter: drop-shadow(0 0 5px rgba(255,79,216,0.65)) !important;
}
.bot-faq-item:nth-child(1)[open] {
border-color: #FF4FD8 !important;
box-shadow: 0 0 16px rgba(255,79,216,0.13) !important;
}
/* ---------------------------------------------------------
2. WHAT CAN I USE THEM FOR - BLUE
--------------------------------------------------------- */
.bot-faq-item:nth-child(2) {
border-color: rgba(53,167,255,0.42) !important;
}
.bot-faq-item:nth-child(2) summary {
color: #72BCFF !important;
}
.bot-faq-item:nth-child(2) summary::after {
border-color: #35A7FF !important;
filter: drop-shadow(0 0 5px rgba(53,167,255,0.65)) !important;
}
.bot-faq-item:nth-child(2)[open] {
border-color: #35A7FF !important;
box-shadow: 0 0 16px rgba(53,167,255,0.13) !important;
}
/* ---------------------------------------------------------
3. HOW DO I GET INTO ONE - PURPLE
--------------------------------------------------------- */
.bot-faq-item:nth-child(3) {
border-color: rgba(168,108,255,0.42) !important;
}
.bot-faq-item:nth-child(3) summary {
color: #BB8CFF !important;
}
.bot-faq-item:nth-child(3) summary::after {
border-color: #A86CFF !important;
filter: drop-shadow(0 0 5px rgba(168,108,255,0.65)) !important;
}
.bot-faq-item:nth-child(3)[open] {
border-color: #A86CFF !important;
box-shadow: 0 0 16px rgba(168,108,255,0.13) !important;
}
/* ---------------------------------------------------------
4. CAN I GET BANNED - CYAN
--------------------------------------------------------- */
.bot-faq-item:nth-child(4) {
border-color: rgba(32,223,255,0.42) !important;
}
.bot-faq-item:nth-child(4) summary {
color: #6EEBFF !important;
}
.bot-faq-item:nth-child(4) summary::after {
border-color: #20DFFF !important;
filter: drop-shadow(0 0 5px rgba(32,223,255,0.65)) !important;
}
.bot-faq-item:nth-child(4)[open] {
border-color: #20DFFF !important;
box-shadow: 0 0 16px rgba(32,223,255,0.13) !important;
}
/* ---------------------------------------------------------
5. SPRITES - PINK
--------------------------------------------------------- */
.bot-faq-item:nth-child(5) {
border-color: rgba(255,79,216,0.42) !important;
}
.bot-faq-item:nth-child(5) summary {
color: #FF72DE !important;
}
.bot-faq-item:nth-child(5) summary::after {
border-color: #FF4FD8 !important;
filter: drop-shadow(0 0 5px rgba(255,79,216,0.65)) !important;
}
.bot-faq-item:nth-child(5)[open] {
border-color: #FF4FD8 !important;
box-shadow: 0 0 16px rgba(255,79,216,0.13) !important;
}
/* ---------------------------------------------------------
6. ARE THEY FREE - BLUE
--------------------------------------------------------- */
.bot-faq-item:nth-child(6) {
border-color: rgba(53,167,255,0.42) !important;
}
.bot-faq-item:nth-child(6) summary {
color: #72BCFF !important;
}
.bot-faq-item:nth-child(6) summary::after {
border-color: #35A7FF !important;
filter: drop-shadow(0 0 5px rgba(53,167,255,0.65)) !important;
}
.bot-faq-item:nth-child(6)[open] {
border-color: #35A7FF !important;
box-shadow: 0 0 16px rgba(53,167,255,0.13) !important;
}
/* ---------------------------------------------------------
7. KEEP APP RUNNING - PURPLE
--------------------------------------------------------- */
.bot-faq-item:nth-child(7) {
border-color: rgba(168,108,255,0.42) !important;
}
.bot-faq-item:nth-child(7) summary {
color: #BB8CFF !important;
}
.bot-faq-item:nth-child(7) summary::after {
border-color: #A86CFF !important;
filter: drop-shadow(0 0 5px rgba(168,108,255,0.65)) !important;
}
.bot-faq-item:nth-child(7)[open] {
border-color: #A86CFF !important;
box-shadow: 0 0 16px rgba(168,108,255,0.13) !important;
}
/* Keep FAQ answers soft and readable */
.bot-faq-answer p {
color: #D0DAE8 !important;
}
/* =========================================================
BOTTOM CTA - LOWER GET STARTED TODAY BUTTON
========================================================= */
.bottom-cta .bottom-inner > a:last-child {
transform: translateY(18px) !important;
}
/* =========================================================
BOTTOM CTA - CENTRED LAYOUT
========================================================= */
.bottom-cta .bottom-inner {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 10px !important;
padding-top: 26px !important;
padding-bottom: 28px !important;
}
.bottom-cta .bottom-inner > div {
text-align: center !important;
}
.bottom-cta .bottom-inner h2,
.bottom-cta .bottom-inner p {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.bottom-cta .bottom-inner > a:last-child {
transform: none !important;
margin: 8px auto 0 !important;
align-self: center !important;
}
/* =========================================================
FULLSCREEN DESKTOP - CENTRE BOTTOM CTA
Windowed layout remains untouched
========================================================= */
@media (min-width: 1200px) {
.bottom-cta .bottom-inner {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
}
.bottom-cta .bottom-inner > div {
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.bottom-cta .bottom-inner h2,
.bottom-cta .bottom-inner p {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.bottom-cta .bottom-inner a {
position: static !important;
width: auto !important;
margin: 12px auto 0 !important;
align-self: center !important;
transform: none !important;
}
}
/* =========================================================
FULLSCREEN - CENTRE ENTIRE BOTTOM CTA
========================================================= */
@media (min-width: 1200px) {
.bottom-cta .bottom-inner {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.bottom-cta .bottom-inner > * {
align-self: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.bottom-cta h2,
.bottom-cta .bottom-inner h2 {
display: block !important;
width: 100% !important;
max-width: none !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.bottom-cta p,
.bottom-cta .bottom-inner p {
width: 100% !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.bottom-cta .bottom-inner a {
position: static !important;
display: inline-flex !important;
width: auto !important;
align-self: center !important;
margin: 10px auto 0 !important;
transform: none !important;
}
}
/* =========================================================
FOOTER - TIDY RIGHT LEGAL AREA
========================================================= */
footer .footer-inner > :last-child,
.site-footer .footer-inner > :last-child {
max-width: 610px !important;
margin-left: auto !important;
text-align: right !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 0 !important;
}
/* Main legal disclaimer */
footer .footer-inner > :last-child p:first-child,
.site-footer .footer-inner > :last-child p:first-child {
max-width: 610px !important;
margin: 0 0 14px auto !important;
line-height: 1.55 !important;
font-size: 10px !important;
letter-spacing: 0.01em !important;
text-align: right !important;
opacity: 0.82 !important;
}
/* AU Proudly hosted in Australia */
footer .footer-inner > :last-child p:nth-last-child(2),
.site-footer .footer-inner > :last-child p:nth-last-child(2) {
margin: 4px 0 0 !important;
line-height: 1.4 !important;
text-align: right !important;
}
/* PLAY FAIR. HAVE FUN. */
footer .footer-inner > :last-child p:last-child,
.site-footer .footer-inner > :last-child p:last-child {
margin: 12px 0 0 !important;
line-height: 1.4 !important;
text-align: right !important;
}
/* Extra breathing room on large fullscreen displays */
@media (min-width: 1200px) {
footer .footer-inner > :last-child,
.site-footer .footer-inner > :last-child {
padding-right: 8px !important;
}
}
/* =========================================================
FULLSCREEN FOOTER - RIGHT LEGAL AREA FINAL POLISH
========================================================= */
@media (min-width: 1200px) {
/* Give the legal area its own clean column */
.footer-main {
grid-template-columns: auto 1fr minmax(520px, 650px) !important;
align-items: start !important;
}
.footer-copy {
width: 100% !important;
max-width: 650px !important;
justify-self: end !important;
text-align: right !important;
font-size: 10px !important;
line-height: 1.5 !important;
color: #c8d4e4 !important;
}
.footer-copy p {
width: 100% !important;
max-width: 650px !important;
margin: 0 !important;
line-height: 1.5 !important;
text-align: right !important;
}
.footer-copy strong {
display: block !important;
margin-top: 14px !important;
font-size: 10px !important;
line-height: 1.4 !important;
text-align: right !important;
}
/* Keep bottom copyright row aligned cleanly */
.copyright {
width: auto !important;
max-width: none !important;
margin-left: 3.5vw !important;
margin-right: 3.5vw !important;
}
.copyright b {
margin-left: auto !important;
text-align: right !important;
}
}
/* =========================================================
FAQ ANCHOR POSITION
========================================================= */
.faq-page-anchor {
scroll-margin-top: 100px;
}
html {
scroll-behavior: smooth;
}
/* =========================================================
CADDYLOBBY NEON LEGAL MODALS
========================================================= */
body.legal-modal-open {
overflow: hidden;
}
.legal-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
z-index: 99999;
}
.legal-modal.is-open {
display: flex;
}
.legal-modal-backdrop {
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 50% 40%,
rgba(90, 39, 170, 0.20),
rgba(0, 5, 15, 0.88) 62%
);
backdrop-filter: blur(8px);
}
.legal-modal-card {
position: relative;
z-index: 2;
width: min(760px, 92vw);
max-height: min(760px, 86vh);
overflow: hidden;
border-radius: 20px;
padding: 28px 30px 30px;
background:
linear-gradient(
145deg,
rgba(7, 18, 42, 0.98),
rgba(3, 8, 24, 0.99)
);
color: #dce8f7;
box-shadow:
0 26px 80px rgba(0, 0, 0, 0.65);
animation: legalModalIn 0.22s ease-out;
}
.legal-modal-terms {
border: 1px solid rgba(255, 73, 215, 0.72);
box-shadow:
0 0 22px rgba(255, 73, 215, 0.20),
0 0 48px rgba(132, 77, 255, 0.12),
0 26px 80px rgba(0, 0, 0, 0.65);
}
.legal-modal-privacy {
border: 1px solid rgba(32, 223, 255, 0.74);
box-shadow:
0 0 22px rgba(32, 223, 255, 0.18),
0 0 48px rgba(72, 122, 255, 0.12),
0 26px 80px rgba(0, 0, 0, 0.65);
}
.legal-modal-refund {
border: 1px solid rgba(167, 105, 255, 0.78);
box-shadow:
0 0 22px rgba(167, 105, 255, 0.20),
0 0 48px rgba(255, 73, 215, 0.10),
0 26px 80px rgba(0, 0, 0, 0.65);
}
.legal-modal-kicker {
margin-bottom: 5px;
color: #20dfff;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.18em;
}
.legal-modal-card h2 {
margin: 0;
font-family: "Arial Black", sans-serif;
font-size: clamp(24px, 3vw, 34px);
line-height: 1.05;
color: #ffffff;
}
.legal-modal-terms h2 {
text-shadow:
0 0 18px rgba(255, 73, 215, 0.40);
}
.legal-modal-privacy h2 {
text-shadow:
0 0 18px rgba(32, 223, 255, 0.40);
}
.legal-modal-refund h2 {
text-shadow:
0 0 18px rgba(167, 105, 255, 0.42);
}
.legal-modal-rule {
width: 100%;
height: 1px;
margin: 18px 0 18px;
background:
linear-gradient(
90deg,
#20dfff,
#9a63ff,
#ff49d7,
transparent
);
}
.legal-modal-content {
max-height: 56vh;
overflow-y: auto;
padding-right: 12px;
color: #c9d7e8;
font-size: 13px;
line-height: 1.7;
}
.legal-modal-content::-webkit-scrollbar {
width: 7px;
}
.legal-modal-content::-webkit-scrollbar-track {
background: rgba(255,255,255,0.035);
border-radius: 20px;
}
.legal-modal-content::-webkit-scrollbar-thumb {
background:
linear-gradient(
180deg,
#20dfff,
#9a63ff,
#ff49d7
);
border-radius: 20px;
}
.legal-placeholder {
margin: 0;
color: #9fb2ca;
}
.legal-modal-close {
position: absolute;
top: 14px;
right: 16px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(32, 223, 255, 0.34);
border-radius: 10px;
background: rgba(7, 19, 42, 0.86);
color: #20dfff;
font-size: 26px;
line-height: 1;
cursor: pointer;
transition:
transform 0.16s ease,
border-color 0.16s ease,
box-shadow 0.16s ease;
}
.legal-modal-close:hover {
transform: scale(1.06);
border-color: #ff49d7;
color: #ff70df;
box-shadow:
0 0 14px rgba(255, 73, 215, 0.28);
}
@keyframes legalModalIn {
from {
opacity: 0;
transform: translateY(14px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 700px) {
.legal-modal {
padding: 14px;
}
.legal-modal-card {
width: 100%;
padding: 24px 20px 24px;
border-radius: 16px;
}
.legal-modal-content {
max-height: 62vh;
}
}
/* ===== CADDYLOBBY HOMEPAGE LAYOUT 2026 ===== */
/* FREE BETA STRIP */
.cl-free-beta-section {
padding: 24px 28px;
background:
radial-gradient(circle at 10% 50%, rgba(255,49,210,.12), transparent 28%),
radial-gradient(circle at 92% 50%, rgba(32,223,255,.09), transparent 28%),
#050b1d;
}
.cl-free-beta-card {
width: min(1500px,100%);
margin: 0 auto;
padding: 24px 28px;
display: grid;
grid-template-columns:
minmax(340px,1.05fr)
minmax(420px,1fr)
minmax(260px,.65fr);
align-items: center;
gap: 30px;
background:
linear-gradient(
115deg,
rgba(25,8,55,.98),
rgba(5,24,55,.98)
);
border: 1px solid rgba(32,223,255,.62);
border-left-color: rgba(255,49,210,.85);
border-radius: 16px;
box-shadow:
0 0 30px rgba(32,223,255,.06),
inset 0 0 36px rgba(150,65,255,.08);
}
.cl-free-beta-brand {
display: flex;
align-items: center;
gap: 22px;
}
.cl-free-beta-logo {
width: 88px;
height: 88px;
object-fit: contain;
filter:
drop-shadow(0 0 12px rgba(255,49,210,.5))
drop-shadow(0 0 18px rgba(32,223,255,.2));
}
.cl-free-beta-heading {
line-height: .95;
font-size: clamp(38px,3.5vw,58px);
font-weight: 950;
letter-spacing: -2px;
}
.cl-free-beta-heading .white {
color: #fff;
}
.cl-free-beta-heading .pink {
color: #ff31d2;
}
.cl-free-beta-subtitle {
margin-top: 8px;
color: #20dfff;
font-size: 13px;
font-weight: 900;
letter-spacing: 1.5px;
}
.cl-free-beta-copy p {
max-width: 470px;
margin: 12px 0 0;
color: #becae2;
font-size: 13px;
line-height: 1.6;
}
.cl-free-beta-copy strong {
color: #20dfff;
}
.cl-free-beta-benefits {
display: grid;
grid-template-columns: repeat(2,minmax(155px,1fr));
gap: 11px 20px;
padding: 18px 20px;
background: rgba(1,13,35,.55);
border: 1px solid rgba(32,223,255,.16);
border-radius: 12px;
}
.cl-free-beta-benefits div {
display: flex;
align-items: center;
gap: 9px;
color: #e5ecff;
font-size: 13px;
}
.cl-free-beta-benefits span {
color: #20dfff;
font-size: 16px;
font-weight: 900;
}
.cl-free-beta-action {
text-align: center;
}
.cl-free-beta-button {
width: 100%;
min-height: 58px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
font-size: 17px;
font-weight: 900;
}
.cl-free-beta-action small {
display: block;
margin-top: 10px;
color: #8293b4;
font-size: 11px;
}
/* FAQ TWO COLUMN */
.bot-faq-list {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 12px 18px;
align-items: start;
}
.bot-faq-item {
margin: 0 !important;
}
/* SECTION FLOW */
.community-section {
margin-top: 0;
}
.download-card {
margin-top: 0;
}
/* RESPONSIVE */
@media (max-width: 1120px) {
.cl-free-beta-card {
grid-template-columns: 1fr 1fr;
}
.cl-free-beta-action {
grid-column: 1 / -1;
width: min(420px,100%);
margin: 0 auto;
}
}
@media (max-width: 820px) {
.cl-free-beta-section {
padding: 18px 14px;
}
.cl-free-beta-card {
grid-template-columns: 1fr;
padding: 24px 18px;
}
.cl-free-beta-brand {
justify-content: center;
text-align: center;
}
.cl-free-beta-copy p {
margin-left: auto;
margin-right: auto;
}
.cl-free-beta-action {
grid-column: auto;
}
.bot-faq-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.cl-free-beta-brand {
flex-direction: column;
}
.cl-free-beta-benefits {
grid-template-columns: 1fr;
}
}
/* ===== CADDYLOBBY HOMEPAGE TARGETED POLISH V2 ===== */
/* =========================================================
FREE BETA - TIGHTER REFERENCE SIZE
========================================================= */
.cl-free-beta-section {
padding: 15px 28px !important;
}
.cl-free-beta-card {
width: min(1500px, 100%) !important;
padding: 17px 22px !important;
gap: 22px !important;
border-radius: 12px !important;
}
.cl-free-beta-logo {
width: 76px !important;
height: 76px !important;
}
.cl-free-beta-heading {
font-size: clamp(34px, 3vw, 49px) !important;
}
.cl-free-beta-subtitle {
margin-top: 5px !important;
font-size: 12px !important;
}
.cl-free-beta-copy p {
margin-top: 8px !important;
font-size: 12px !important;
line-height: 1.48 !important;
}
.cl-free-beta-benefits {
padding: 13px 16px !important;
gap: 8px 16px !important;
}
.cl-free-beta-benefits div {
font-size: 12px !important;
}
.cl-free-beta-button {
min-height: 50px !important;
font-size: 15px !important;
}
.cl-free-beta-action small {
margin-top: 7px !important;
}
/* =========================================================
GET MORE FROM YOUR BOT LOBBIES
========================================================= */
.community-section {
padding: 30px 0 34px !important;
}
.community-heading {
margin-bottom: 16px !important;
}
.community-card {
min-height: 158px !important;
padding: 16px 15px 15px !important;
}
/* Never show the old Coming Soon badge here */
.community-players .community-card-badge {
display: none !important;
}
/* =========================================================
DOWNLOAD CADDYLOBBY APP
COMPACT HORIZONTAL SECTION
========================================================= */
article#download.download-card {
box-sizing: border-box !important;
width: min(1500px, calc(100% - 56px)) !important;
max-width: 1500px !important;
min-height: 0 !important;
height: auto !important;
margin: 0 auto !important;
padding: 14px 18px !important;
display: grid !important;
grid-template-columns:
minmax(0, 1.18fr)
minmax(340px, 0.82fr) !important;
align-items: center !important;
gap: 30px !important;
overflow: hidden !important;
border:
1px solid rgba(32,223,255,0.48) !important;
border-radius: 10px !important;
background:
linear-gradient(
110deg,
rgba(8,18,44,0.98),
rgba(3,18,40,0.98)
) !important;
box-shadow:
0 0 22px rgba(32,223,255,0.045),
inset 0 0 34px rgba(137,70,255,0.045) !important;
}
article#download .download-promo-side {
min-width: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
article#download .app-promo-wrap {
width: 100% !important;
height: 285px !important;
aspect-ratio: auto !important;
margin: 0 !important;
overflow: hidden !important;
border:
1px solid rgba(32,223,255,0.35) !important;
border-radius: 8px !important;
background: #030818 !important;
box-shadow:
0 0 13px rgba(32,223,255,0.07),
0 0 20px rgba(255,79,216,0.04) !important;
}
article#download .app-promo-image {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
article#download .download-info-side {
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
}
article#download .download-kicker {
margin-bottom: 6px !important;
color: #20DFFF !important;
font-size: 10px !important;
font-weight: 900 !important;
letter-spacing: .2em !important;
}
article#download .download-info-side h3 {
margin: 0 0 9px !important;
font-size: clamp(26px, 2.3vw, 35px) !important;
line-height: 1.02 !important;
}
article#download .download-description {
max-width: 500px !important;
margin: 0 0 14px !important;
font-size: 12px !important;
line-height: 1.5 !important;
}
article#download .download-benefits {
margin: 0 0 15px !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 8px 17px !important;
}
article#download .download-benefits > div {
font-size: 11px !important;
}
article#download .download-benefit-icon {
color: #20DFFF !important;
}
article#download .download-button {
width: min(390px, 100%) !important;
min-height: 50px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
font-size: 14px !important;
font-weight: 900 !important;
}
article#download .download-small-note {
width: min(390px, 100%) !important;
margin-top: 7px !important;
text-align: center !important;
font-size: 10px !important;
}
/* give download section breathing room without becoming huge */
.community-section + article#download.download-card {
margin-top: 10px !important;
margin-bottom: 18px !important;
}
/* =========================================================
FAQ - ACTUAL TWO COLUMN LAYOUT
Overrides the old flex !important rules
========================================================= */
.bot-faq-section {
padding: 30px 0 34px !important;
}
.bot-faq-heading {
margin-bottom: 15px !important;
}
.bot-faq-list {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
grid-auto-flow: row !important;
align-items: start !important;
gap: 9px 16px !important;
width: 100% !important;
}
.bot-faq-item {
display: block !important;
width: 100% !important;
margin: 0 !important;
align-self: start !important;
}
.bot-faq-item summary {
min-height: 44px !important;
font-size: 11.5px !important;
}
.bot-faq-answer p {
font-size: 10px !important;
line-height: 1.5 !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
article#download.download-card {
width: calc(100% - 36px) !important;
grid-template-columns:
minmax(0, 1.05fr)
minmax(300px, .95fr) !important;
gap: 20px !important;
}
article#download .app-promo-wrap {
height: 245px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 759px) {
.cl-free-beta-section {
padding: 14px !important;
}
article#download.download-card {
width: calc(100% - 24px) !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
padding: 13px !important;
}
article#download .app-promo-wrap {
height: auto !important;
aspect-ratio: 16 / 9 !important;
}
article#download .download-info-side {
align-items: center !important;
text-align: center !important;
}
article#download .download-description {
text-align: center !important;
}
article#download .download-benefits {
justify-content: center !important;
}
.bot-faq-list {
grid-template-columns: 1fr !important;
}
}
/* ===== CADDYLOBBY APP PROMO VISIBILITY FIX ===== */
/*
Keep the full CaddyLobby promo artwork visible.
Prevents the girl, logo and top text being cropped.
*/
article#download .app-promo-wrap {
height: 315px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
background:
linear-gradient(
135deg,
#04091b,
#07142d
) !important;
}
article#download .app-promo-image {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
transform: translateY(7px) !important;
}
/* Tablet */
@media (max-width: 1050px) {
article#download .app-promo-wrap {
height: 285px !important;
}
article#download .app-promo-image {
transform: translateY(6px) !important;
}
}
/* Mobile */
@media (max-width: 759px) {
article#download .app-promo-wrap {
height: auto !important;
aspect-ratio: 16 / 9 !important;
}
article#download .app-promo-image {
transform: translateY(4px) !important;
}
}
/* ===== CADDYLOBBY DOWNLOAD SHOWCASE V3 ===== */
.cl-download-showcase {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-height: 365px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border-left: 0 !important;
border-right: 0 !important;
border-top:
1px solid rgba(32,223,255,.35) !important;
border-bottom:
1px solid rgba(255,49,210,.35) !important;
border-radius: 0 !important;
background: #050b1d !important;
}
/* BACKGROUND */
.cl-download-scene {
position: absolute;
inset: 0;
z-index: 0;
background:
url("/landing/assets/caddylobby-promo-bg.png")
center center / cover no-repeat;
opacity: .92;
}
.cl-download-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
90deg,
rgba(2,7,20,.42) 0%,
rgba(2,7,20,.26) 26%,
rgba(2,7,20,.22) 45%,
rgba(2,8,23,.67) 63%,
rgba(2,8,23,.94) 100%
);
}
/* MAIN GRID */
.cl-download-showcase-inner {
position: relative;
z-index: 2;
width: min(1500px, calc(100% - 70px));
min-height: 365px;
margin: 0 auto;
display: grid;
grid-template-columns:
minmax(390px, .95fr)
minmax(230px, .45fr)
minmax(470px, 1fr);
align-items: center;
gap: 10px;
}
/* ======================================================
LEFT BRAND
====================================================== */
.cl-download-brand-panel {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 0 18px;
text-align: center;
}
.cl-download-brand {
display: flex;
flex-direction: column;
align-items: center;
}
.cl-download-logo {
width: 78px;
height: 78px;
object-fit: contain;
filter:
drop-shadow(0 0 13px rgba(255,49,210,.50))
drop-shadow(0 0 20px rgba(32,223,255,.20));
}
.cl-download-brand-name {
margin-top: 5px;
color: #ffffff;
font-size: 30px;
line-height: 1;
font-weight: 950;
letter-spacing: -.8px;
}
.cl-download-brand-name span {
color: #ff42d3;
}
.cl-download-brand-sub {
margin-top: 7px;
color: #8ddfff;
font-size: 10px;
font-weight: 900;
letter-spacing: .32em;
}
/* FEATURES */
.cl-download-mini-features {
width: 100%;
margin-top: 22px;
display: grid;
grid-template-columns:
repeat(4, minmax(0,1fr));
gap: 8px;
}
.cl-download-mini-feature {
min-width: 0;
text-align: center;
}
.cl-download-mini-icon {
width: 49px;
height: 49px;
margin: 0 auto 7px;
display: flex;
align-items: center;
justify-content: center;
color: #ff4bd8;
font-size: 23px;
line-height: 1;
border:
1px solid rgba(180,74,255,.60);
border-radius: 13px;
background:
rgba(3,10,28,.60);
box-shadow:
0 0 12px rgba(255,49,210,.12);
}
.cl-download-mini-feature:nth-child(2) .cl-download-mini-icon,
.cl-download-mini-feature:nth-child(3) .cl-download-mini-icon {
color: #20dfff;
}
.cl-download-mini-feature strong {
display: block;
color: #ffffff;
font-size: 10px;
font-weight: 900;
line-height: 1.2;
}
.cl-download-mini-feature small {
display: block;
margin-top: 5px;
color: #c6d2e8;
font-size: 8.5px;
line-height: 1.3;
}
.cl-download-tagline {
width: 100%;
margin-top: 18px;
padding-top: 13px;
border-top:
1px solid rgba(32,223,255,.28);
color: #d7e3f5;
font-size: 10px;
font-weight: 800;
letter-spacing: .28em;
}
.cl-download-tagline span {
color: #20dfff;
}
/* ======================================================
CENTRE CHARACTER
====================================================== */
.cl-download-character {
align-self: stretch;
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
pointer-events: none;
}
.cl-download-character img {
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
height: 380px;
width: auto;
max-width: none;
filter:
drop-shadow(0 0 14px rgba(255,49,210,.22))
drop-shadow(0 0 24px rgba(32,223,255,.16));
}
/* ======================================================
RIGHT CONTENT
====================================================== */
.cl-download-content {
position: relative;
z-index: 5;
padding-left: 12px;
}
.cl-download-kicker {
margin-bottom: 8px;
color: #20dfff;
font-size: 11px;
font-weight: 900;
letter-spacing: .24em;
}
.cl-download-content h3 {
margin: 0 0 13px;
color: #ffffff;
font-size: clamp(34px,3vw,48px);
line-height: .98;
font-weight: 950;
letter-spacing: -1.4px;
}
.cl-download-content h3 span {
display: block;
margin-top: 3px;
color: #ff41d3;
background:
linear-gradient(
90deg,
#ff35cf,
#8c5cff 48%,
#20dfff
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.cl-download-content > p {
max-width: 560px;
margin: 0 0 18px;
color: #dce5f5;
font-size: 13px;
line-height: 1.55;
}
/* SPECS */
.cl-download-specs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 17px;
margin-bottom: 20px;
}
.cl-download-specs > div {
display: flex;
align-items: center;
gap: 7px;
color: #ffffff;
font-size: 11px;
font-weight: 800;
}
.cl-download-specs b {
color: #20dfff;
font-size: 19px;
line-height: 1;
}
/* BUTTON */
.cl-download-main-btn {
width: min(480px,100%);
min-height: 56px;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 13px !important;
font-size: 17px !important;
font-weight: 900 !important;
}
.cl-windows-icon {
font-size: 24px;
}
.cl-download-arrow {
margin-left: auto;
}
.cl-download-small {
width: min(480px,100%);
margin-top: 8px;
text-align: center;
color: #9caac3;
font-size: 9px;
}
/* ======================================================
TABLET
====================================================== */
@media (max-width: 1150px) {
.cl-download-showcase-inner {
grid-template-columns:
minmax(330px,.95fr)
minmax(190px,.38fr)
minmax(380px,1fr);
width: calc(100% - 36px);
}
.cl-download-character img {
height: 340px;
}
.cl-download-brand-name {
font-size: 25px;
}
.cl-download-content h3 {
font-size: 35px;
}
}
/* ======================================================
MOBILE / SMALL TABLET
====================================================== */
@media (max-width: 850px) {
.cl-download-showcase-inner {
width: calc(100% - 28px);
grid-template-columns: 1fr;
gap: 10px;
padding: 26px 0;
}
.cl-download-character {
min-height: 280px;
order: 1;
}
.cl-download-character img {
height: 300px;
}
.cl-download-brand-panel {
order: 2;
padding: 0;
}
.cl-download-content {
order: 3;
padding: 20px 0 0;
text-align: center;
}
.cl-download-content > p {
margin-left: auto;
margin-right: auto;
}
.cl-download-specs {
justify-content: center;
}
.cl-download-main-btn {
margin-left: auto;
margin-right: auto;
}
.cl-download-small {
margin-left: auto;
margin-right: auto;
}
}
/* ======================================================
PHONE
====================================================== */
@media (max-width: 600px) {
.cl-download-mini-features {
grid-template-columns:
repeat(2,minmax(0,1fr));
gap: 16px 8px;
}
.cl-download-content h3 {
font-size: 31px;
}
.cl-download-content > p {
font-size: 12px;
}
.cl-download-specs {
gap: 12px;
}
}
/* ===== DOWNLOAD SHOWCASE WINDOWED RESPONSIVE FIX ===== */
/* =========================================================
WINDOWED / SMALL DESKTOP
Full desktop layout above this stays untouched.
========================================================= */
@media (max-width: 1180px) and (min-width: 761px) {
.cl-download-showcase {
min-height: 0 !important;
}
.cl-download-showcase-inner {
width: calc(100% - 34px) !important;
min-height: 0 !important;
padding: 18px 0 0 !important;
display: grid !important;
grid-template-columns:
minmax(250px, .72fr)
minmax(420px, 1.28fr) !important;
grid-template-areas:
"brand brand"
"girl content" !important;
align-items: center !important;
gap: 8px 22px !important;
}
/* ---------------------------------------------
TOP BRAND / FEATURE STRIP
--------------------------------------------- */
.cl-download-brand-panel {
grid-area: brand !important;
align-self: auto !important;
min-width: 0 !important;
padding: 0 6px 13px !important;
display: grid !important;
grid-template-columns:
auto minmax(360px, 1fr) auto !important;
align-items: center !important;
gap: 18px !important;
border-bottom:
1px solid rgba(32,223,255,.18) !important;
}
.cl-download-brand {
min-width: 150px !important;
}
.cl-download-logo {
width: 46px !important;
height: 46px !important;
}
.cl-download-brand-name {
margin-top: 3px !important;
font-size: 19px !important;
letter-spacing: -.3px !important;
}
.cl-download-brand-sub {
margin-top: 4px !important;
font-size: 7px !important;
letter-spacing: .22em !important;
}
.cl-download-mini-features {
width: 100% !important;
margin: 0 !important;
display: grid !important;
grid-template-columns:
repeat(4, minmax(72px,1fr)) !important;
gap: 8px !important;
}
.cl-download-mini-icon {
width: 34px !important;
height: 34px !important;
margin-bottom: 5px !important;
font-size: 16px !important;
border-radius: 9px !important;
}
.cl-download-mini-feature strong {
font-size: 8px !important;
}
.cl-download-mini-feature small {
margin-top: 3px !important;
font-size: 7px !important;
line-height: 1.22 !important;
}
.cl-download-tagline {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
font-size: 7px !important;
line-height: 1.5 !important;
letter-spacing: .18em !important;
white-space: nowrap !important;
}
/* ---------------------------------------------
GIRL
--------------------------------------------- */
.cl-download-character {
grid-area: girl !important;
min-height: 300px !important;
align-self: end !important;
}
.cl-download-character img {
height: 315px !important;
bottom: 0 !important;
}
/* ---------------------------------------------
RIGHT DOWNLOAD DETAILS
--------------------------------------------- */
.cl-download-content {
grid-area: content !important;
min-width: 0 !important;
padding: 22px 0 26px !important;
}
.cl-download-kicker {
margin-bottom: 5px !important;
font-size: 9px !important;
}
.cl-download-content h3 {
margin-bottom: 9px !important;
font-size: clamp(29px, 4vw, 38px) !important;
line-height: 1 !important;
}
.cl-download-content > p {
max-width: 470px !important;
margin-bottom: 12px !important;
font-size: 11px !important;
line-height: 1.45 !important;
}
.cl-download-specs {
gap: 10px 14px !important;
margin-bottom: 14px !important;
}
.cl-download-specs > div {
gap: 5px !important;
font-size: 9px !important;
}
.cl-download-specs b {
font-size: 16px !important;
}
.cl-download-main-btn {
width: min(440px,100%) !important;
min-height: 50px !important;
font-size: 14px !important;
}
.cl-windows-icon {
font-size: 20px !important;
}
.cl-download-small {
width: min(440px,100%) !important;
font-size: 8px !important;
}
}
/* =========================================================
NARROW WINDOW
Keep girl + download readable instead of clipping.
========================================================= */
@media (max-width: 900px) and (min-width: 761px) {
.cl-download-showcase-inner {
width: calc(100% - 22px) !important;
grid-template-columns:
minmax(220px,.62fr)
minmax(360px,1.38fr) !important;
gap: 5px 12px !important;
}
.cl-download-brand-panel {
grid-template-columns:
auto 1fr !important;
gap: 14px !important;
}
.cl-download-tagline {
display: none !important;
}
.cl-download-mini-feature small {
display: none !important;
}
.cl-download-character {
min-height: 270px !important;
}
.cl-download-character img {
height: 285px !important;
}
.cl-download-content {
padding-right: 8px !important;
}
.cl-download-content h3 {
font-size: 29px !important;
}
}
/* ===== DOWNLOAD SHOWCASE FINAL BACKGROUND CHARACTER FIX ===== */
/* Background artwork already contains the CaddyLobby girl.
Do not overlay a second character. */
.cl-download-character {
display: none !important;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
.cl-download-showcase {
min-height: 355px !important;
}
.cl-download-scene {
background-image:
url("/landing/assets/caddylobby-promo-bg.png") !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
opacity: 1 !important;
}
.cl-download-overlay {
background:
linear-gradient(
90deg,
rgba(2,8,22,.22) 0%,
rgba(2,8,22,.12) 28%,
rgba(2,8,22,.12) 48%,
rgba(2,8,22,.52) 65%,
rgba(2,8,22,.90) 100%
) !important;
}
.cl-download-showcase-inner {
width: min(1500px, calc(100% - 70px)) !important;
min-height: 355px !important;
display: grid !important;
grid-template-columns:
minmax(380px, .88fr)
minmax(500px, 1.12fr) !important;
grid-template-areas:
"brand content" !important;
align-items: center !important;
gap: clamp(220px, 20vw, 420px) !important;
}
.cl-download-brand-panel {
grid-area: brand !important;
padding: 20px 0 !important;
align-self: center !important;
}
.cl-download-content {
grid-area: content !important;
min-width: 0 !important;
padding: 25px 0 !important;
}
/* Keep the left feature row compact */
.cl-download-mini-features {
margin-top: 19px !important;
}
.cl-download-tagline {
margin-top: 15px !important;
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (max-width: 1180px) and (min-width: 761px) {
.cl-download-showcase {
min-height: 430px !important;
}
.cl-download-scene {
/*
Keep the girl visible in the centre instead of cropping
her away when the browser becomes narrower.
*/
background-size: cover !important;
background-position: 43% center !important;
}
.cl-download-overlay {
background:
linear-gradient(
90deg,
rgba(2,8,22,.24) 0%,
rgba(2,8,22,.10) 38%,
rgba(2,8,22,.48) 62%,
rgba(2,8,22,.88) 100%
) !important;
}
.cl-download-showcase-inner {
width: calc(100% - 32px) !important;
min-height: 430px !important;
padding: 18px 0 !important;
grid-template-columns:
minmax(250px, .78fr)
minmax(390px, 1.22fr) !important;
grid-template-areas:
"brand content" !important;
gap: clamp(120px, 15vw, 220px) !important;
}
.cl-download-brand-panel {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
border: 0 !important;
padding: 8px 0 !important;
}
.cl-download-logo {
width: 62px !important;
height: 62px !important;
}
.cl-download-brand-name {
font-size: 24px !important;
}
.cl-download-brand-sub {
font-size: 8px !important;
}
.cl-download-mini-features {
margin-top: 18px !important;
grid-template-columns:
repeat(4, minmax(55px,1fr)) !important;
}
.cl-download-mini-icon {
width: 39px !important;
height: 39px !important;
font-size: 18px !important;
}
.cl-download-mini-feature strong {
font-size: 8px !important;
}
.cl-download-mini-feature small {
display: block !important;
font-size: 7px !important;
}
.cl-download-tagline {
display: block !important;
margin-top: 15px !important;
font-size: 7px !important;
white-space: nowrap !important;
}
.cl-download-content {
padding: 20px 8px 20px 0 !important;
}
.cl-download-content h3 {
font-size: clamp(31px, 4vw, 42px) !important;
}
.cl-download-content > p {
max-width: 470px !important;
font-size: 11px !important;
}
.cl-download-main-btn {
width: min(440px,100%) !important;
}
}
/* =========================================================
NARROWER WINDOW
========================================================= */
@media (max-width: 900px) and (min-width: 761px) {
.cl-download-scene {
background-position: 38% center !important;
}
.cl-download-showcase-inner {
grid-template-columns:
minmax(210px,.68fr)
minmax(350px,1.32fr) !important;
gap: 90px !important;
}
.cl-download-mini-feature small {
display: none !important;
}
.cl-download-tagline {
font-size: 6px !important;
}
.cl-download-content h3 {
font-size: 30px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.cl-download-showcase {
min-height: auto !important;
}
.cl-download-scene {
background-position: 42% center !important;
}
.cl-download-overlay {
background:
linear-gradient(
180deg,
rgba(2,8,22,.35) 0%,
rgba(2,8,22,.45) 45%,
rgba(2,8,22,.94) 100%
) !important;
}
.cl-download-showcase-inner {
width: calc(100% - 24px) !important;
min-height: 0 !important;
padding: 28px 0 !important;
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-areas:
"brand"
"content" !important;
gap: 150px !important;
}
.cl-download-brand-panel {
grid-area: brand !important;
padding: 0 !important;
}
.cl-download-content {
grid-area: content !important;
padding: 22px 12px !important;
text-align: center !important;
background:
rgba(3,10,29,.66) !important;
border:
1px solid rgba(32,223,255,.18) !important;
border-radius: 12px !important;
}
.cl-download-content > p {
margin-left: auto !important;
margin-right: auto !important;
}
.cl-download-specs {
justify-content: center !important;
}
.cl-download-main-btn,
.cl-download-small {
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ===== CADDYLOBBY FINAL DOWNLOAD IMAGE BANNER ===== */
/*
Uses the approved finished CaddyLobby artwork as one image.
This prevents layout changes, duplicate characters and
text shifting between fullscreen/windowed browser sizes.
*/
.cl-final-download-section {
width: 100% !important;
margin: 0 !important;
padding: 24px 28px 20px !important;
box-sizing: border-box !important;
background: #040b1b !important;
}
.cl-final-download-banner {
position: relative !important;
width: min(1500px, 100%) !important;
margin: 0 auto !important;
line-height: 0 !important;
overflow: hidden !important;
border:
1px solid rgba(32,223,255,.52) !important;
border-radius: 14px !important;
background: #030818 !important;
box-shadow:
0 0 20px rgba(32,223,255,.055),
0 0 28px rgba(255,49,210,.045) !important;
}
.cl-final-download-image {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
object-fit: contain !important;
border: 0 !important;
}
/*
Invisible real link positioned over the button
already drawn into the banner artwork.
*/
.cl-final-download-button {
position: absolute !important;
z-index: 5 !important;
left: 56.2% !important;
top: 69.1% !important;
width: 31.4% !important;
height: 14.8% !important;
display: block !important;
border-radius: 12px !important;
background: transparent !important;
text-decoration: none !important;
cursor: pointer !important;
}
/* Keyboard accessibility without changing normal appearance */
.cl-final-download-button:focus-visible {
outline:
2px solid #20DFFF !important;
outline-offset:
-3px !important;
}
/* Slightly tighter spacing on windowed browser widths */
@media (max-width: 1100px) {
.cl-final-download-section {
padding:
18px 22px !important;
}
}
/* Mobile */
@media (max-width: 700px) {
.cl-final-download-section {
padding:
14px 10px !important;
}
.cl-final-download-banner {
border-radius:
9px !important;
}
}
/* ===== FINAL DOWNLOAD BANNER FULL WIDTH ===== */
/*
Make the approved banner span the entire browser width.
Image keeps its original proportions - no stretching.
*/
.cl-final-download-section {
position: relative !important;
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding: 0 !important;
overflow: hidden !important;
background: #040b1b !important;
}
.cl-final-download-banner {
position: relative !important;
width: 100vw !important;
max-width: none !important;
margin: 0 !important;
overflow: hidden !important;
border-left: 0 !important;
border-right: 0 !important;
border-radius: 0 !important;
background: #030818 !important;
}
.cl-final-download-image {
display: block !important;
width: 100vw !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
object-fit: contain !important;
object-position: center center !important;
}
/*
Keep the invisible real Download button positioned
over the button already drawn into the image.
*/
.cl-final-download-button {
left: 56.2% !important;
top: 69.1% !important;
width: 31.4% !important;
height: 14.8% !important;
}
/* Mobile still stays proportional */
@media (max-width: 700px) {
.cl-final-download-section,
.cl-final-download-banner,
.cl-final-download-image {
width: 100vw !important;
}
}
/* ===== HOW IT WORKS RIGHT NEON SIGN ===== */
/* Leave space for the right-side neon wording */
.how-section .how-grid {
padding-right: 185px !important;
box-sizing: border-box !important;
}
/* Neon wording on far right */
.how-vibes-sign {
position: absolute !important;
z-index: 5 !important;
right: 46px !important;
top: 57% !important;
transform:
translateY(-50%)
rotate(-5deg) !important;
width: 145px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
pointer-events: none !important;
text-align: center !important;
font-family:
"Segoe UI",
Arial,
sans-serif !important;
font-size: 20px !important;
font-weight: 900 !important;
line-height: 1.02 !important;
letter-spacing: -.5px !important;
font-style: italic !important;
}
.how-vibes-sign span {
display: block !important;
}
.how-vibes-blue {
color: #20DFFF !important;
text-shadow:
0 0 4px #20DFFF,
0 0 10px rgba(32,223,255,.85),
0 0 20px rgba(32,223,255,.48) !important;
}
.how-vibes-white {
color: #DDF7FF !important;
text-shadow:
0 0 5px #20DFFF,
0 0 13px rgba(32,223,255,.72) !important;
}
.how-vibes-pink {
color: #FF43D3 !important;
text-shadow:
0 0 5px #FF43D3,
0 0 12px rgba(255,67,211,.88),
0 0 22px rgba(255,67,211,.48) !important;
}
.how-vibes-crown {
margin-top: 5px !important;
color: #20DFFF !important;
font-size: 34px !important;
line-height: .9 !important;
font-style: normal !important;
transform: rotate(-5deg) !important;
text-shadow:
0 0 5px #20DFFF,
0 0 13px rgba(32,223,255,.9),
0 0 24px rgba(32,223,255,.50) !important;
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (max-width: 1150px) and (min-width: 761px) {
.how-section .how-grid {
padding-right: 135px !important;
}
.how-vibes-sign {
right: 20px !important;
width: 115px !important;
font-size: 15px !important;
}
.how-vibes-crown {
font-size: 27px !important;
}
}
/* =========================================================
NARROWER WINDOW
Keep it visible but smaller
========================================================= */
@media (max-width: 900px) and (min-width: 761px) {
.how-section .how-grid {
padding-right: 105px !important;
}
.how-vibes-sign {
right: 10px !important;
width: 90px !important;
font-size: 12px !important;
}
.how-vibes-crown {
font-size: 22px !important;
}
}
/* =========================================================
MOBILE
Put it below the five steps instead of overlapping
========================================================= */
@media (max-width: 760px) {
.how-section .how-grid {
padding-right: 0 !important;
}
.how-vibes-sign {
position: relative !important;
right: auto !important;
top: auto !important;
width: 100% !important;
margin-top: 20px !important;
transform: rotate(-3deg) !important;
font-size: 18px !important;
}
}
/* ===== HOW IT WORKS NEON SIGN GUARANTEED ===== */
/*
Hide the previous HTML attempt if it exists.
The final sign below is drawn directly with CSS.
*/
.how-vibes-sign {
display: none !important;
}
/* Leave room on the far right */
.how-section .how-grid {
padding-right: 190px !important;
box-sizing: border-box !important;
}
/* Neon wording */
.how-section::after {
content:
"MORE BOTS\A"
"MORE FUN\A"
"MORE VIBES\A"
"â™›";
position: absolute !important;
z-index: 50 !important;
right: 38px !important;
top: 54% !important;
transform:
translateY(-50%)
rotate(-5deg) !important;
width: 150px !important;
white-space: pre-line !important;
text-align: center !important;
color: #20DFFF !important;
font-family:
"Segoe UI",
Arial,
sans-serif !important;
font-size: 20px !important;
font-weight: 950 !important;
font-style: italic !important;
line-height: 1.04 !important;
letter-spacing: -.4px !important;
pointer-events: none !important;
text-shadow:
0 0 4px #20DFFF,
0 0 10px rgba(32,223,255,.92),
0 0 20px rgba(32,223,255,.45) !important;
}
/*
Add pink glow through a layered shadow so it feels
like the reference neon sign.
*/
.how-section {
position: relative !important;
}
/* Windowed desktop */
@media (max-width: 1150px) and (min-width: 761px) {
.how-section .how-grid {
padding-right: 145px !important;
}
.how-section::after {
right: 18px !important;
width: 120px !important;
font-size: 16px !important;
}
}
/* Narrower browser */
@media (max-width: 900px) and (min-width: 761px) {
.how-section .how-grid {
padding-right: 108px !important;
}
.how-section::after {
right: 8px !important;
width: 90px !important;
font-size: 12px !important;
}
}
/* Phone */
@media (max-width: 760px) {
.how-section .how-grid {
padding-right: 0 !important;
}
.how-section::after {
position: relative !important;
display: block !important;
right: auto !important;
top: auto !important;
width: 100% !important;
margin: 22px auto 0 !important;
transform: rotate(-3deg) !important;
font-size: 18px !important;
}
}
/* ===== HOW IT WORKS REFERENCE NEON SIGN FINAL ===== */
/* Disable the temporary CSS-generated cyan sign */
.how-section::after {
content: none !important;
display: none !important;
}
/* Reserve the far-right area */
.how-section .how-grid {
padding-right: 180px !important;
box-sizing: border-box !important;
}
/* Actual reference-style sign */
.how-vibes-sign {
position: absolute !important;
z-index: 20 !important;
right: 38px !important;
top: 54% !important;
transform:
translateY(-50%)
rotate(-6deg) !important;
width: 150px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
pointer-events: none !important;
}
.how-vibes-line {
display: block !important;
font-family:
"Segoe Print",
"Comic Sans MS",
cursive !important;
font-size: 21px !important;
font-weight: 900 !important;
font-style: italic !important;
line-height: .95 !important;
letter-spacing: -1px !important;
white-space: nowrap !important;
}
/* MORE BOTS */
.how-vibes-bots {
color: #20DFFF !important;
transform: rotate(-2deg) !important;
text-shadow:
0 0 3px #20DFFF,
0 0 7px #20DFFF,
0 0 14px rgba(32,223,255,.95),
0 0 24px rgba(32,223,255,.48) !important;
}
/* MORE FUN */
.how-vibes-fun {
margin-top: 2px !important;
color: #DDFBFF !important;
transform: rotate(1deg) !important;
text-shadow:
0 0 3px #FFFFFF,
0 0 7px #20DFFF,
0 0 14px rgba(32,223,255,.90),
0 0 23px rgba(32,223,255,.42) !important;
}
/* MORE VIBES */
.how-vibes-vibes {
margin-top: 2px !important;
color: #FF42D6 !important;
transform: rotate(-2deg) !important;
text-shadow:
0 0 3px #FF42D6,
0 0 8px #FF42D6,
0 0 15px rgba(255,66,214,.95),
0 0 25px rgba(255,66,214,.50) !important;
}
/* Proper neon outline crown */
.how-vibes-crown {
width: 48px !important;
height: 31px !important;
margin-top: 6px !important;
overflow: visible !important;
fill: none !important;
stroke: #20DFFF !important;
stroke-width: 3 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
filter:
drop-shadow(0 0 3px #20DFFF)
drop-shadow(0 0 7px rgba(32,223,255,.90))
drop-shadow(0 0 13px rgba(32,223,255,.55)) !important;
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (max-width: 1150px) and (min-width: 761px) {
.how-section .how-grid {
padding-right: 140px !important;
}
.how-vibes-sign {
right: 18px !important;
width: 115px !important;
}
.how-vibes-line {
font-size: 16px !important;
}
.how-vibes-crown {
width: 38px !important;
height: 25px !important;
}
}
/* =========================================================
NARROW WINDOW
========================================================= */
@media (max-width: 900px) and (min-width: 761px) {
.how-section .how-grid {
padding-right: 105px !important;
}
.how-vibes-sign {
right: 8px !important;
width: 88px !important;
}
.how-vibes-line {
font-size: 12px !important;
}
.how-vibes-crown {
width: 31px !important;
height: 21px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.how-section .how-grid {
padding-right: 0 !important;
}
.how-vibes-sign {
position: relative !important;
right: auto !important;
top: auto !important;
width: 100% !important;
margin-top: 22px !important;
transform: rotate(-4deg) !important;
}
.how-vibes-line {
font-size: 18px !important;
}
.how-vibes-crown {
width: 42px !important;
height: 27px !important;
}
}
/* ===== HOW IT WORKS EXACT REFERENCE FINAL ===== */
/* remove older generated sign */
.how-section::after {
content: none !important;
display: none !important;
}
/* full-width strip */
.how-section {
position: relative !important;
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding: 18px 56px 22px !important;
box-sizing: border-box !important;
overflow: hidden !important;
background:
radial-gradient(
circle at 22% 55%,
rgba(32,223,255,.08),
transparent 31%
),
radial-gradient(
circle at 75% 55%,
rgba(255,66,214,.07),
transparent 30%
),
linear-gradient(
90deg,
#020817 0%,
#031020 55%,
#04101c 100%
) !important;
border-top:
1px solid rgba(32,223,255,.28) !important;
border-bottom:
1px solid rgba(32,223,255,.28) !important;
}
/* heading */
.how-section .plans-title {
width: 100% !important;
max-width: none !important;
margin: 0 0 12px !important;
display: flex !important;
align-items: baseline !important;
gap: 20px !important;
}
.how-section .plans-title h2 {
margin: 0 !important;
white-space: nowrap !important;
}
.how-section .plans-title p {
margin: 0 !important;
max-width: none !important;
}
/* five steps + reserved sign area */
.how-grid {
width: 100% !important;
max-width: none !important;
display: grid !important;
grid-template-columns:
repeat(5, minmax(0, 1fr)) !important;
align-items: start !important;
gap: clamp(20px, 2.6vw, 48px) !important;
padding-right: 185px !important;
box-sizing: border-box !important;
}
.how-step {
width: 100% !important;
min-width: 0 !important;
text-align: center !important;
}
.how-step h3 {
margin: 8px 0 5px !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 900 !important;
line-height: 1.15 !important;
}
.how-step p {
max-width: 185px !important;
margin: 0 auto !important;
color: #f2f7ff !important;
font-size: 11px !important;
line-height: 1.35 !important;
}
/* arrows */
.step-arrow {
color: #20DFFF !important;
text-shadow:
0 0 5px #20DFFF,
0 0 14px rgba(32,223,255,.75) !important;
}
/* =========================================================
RIGHT-SIDE SIGN
========================================================= */
.how-vibes-sign {
position: absolute !important;
z-index: 30 !important;
right: 38px !important;
top: 54% !important;
transform:
translateY(-50%)
rotate(-7deg) !important;
width: 140px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
pointer-events: none !important;
}
.how-vibes-line {
display: block !important;
font-family:
"Segoe Print",
"Comic Sans MS",
cursive !important;
font-style: italic !important;
font-weight: 900 !important;
font-size: 22px !important;
line-height: .92 !important;
letter-spacing: -1px !important;
white-space: nowrap !important;
}
/* cyan */
.how-vibes-bots {
color: #20DFFF !important;
text-shadow:
0 0 3px #20DFFF,
0 0 8px #20DFFF,
0 0 16px rgba(32,223,255,.95),
0 0 26px rgba(32,223,255,.50) !important;
}
/* pale cyan / white */
.how-vibes-fun {
margin-top: 2px !important;
color: #EAFDFF !important;
text-shadow:
0 0 3px #ffffff,
0 0 7px #20DFFF,
0 0 14px rgba(32,223,255,.90),
0 0 24px rgba(32,223,255,.42) !important;
}
/* hot pink */
.how-vibes-vibes {
margin-top: 2px !important;
color: #FF42D6 !important;
text-shadow:
0 0 3px #FF42D6,
0 0 8px #FF42D6,
0 0 15px rgba(255,66,214,.95),
0 0 26px rgba(255,66,214,.52) !important;
}
/* neon crown */
.how-vibes-crown {
width: 46px !important;
height: 30px !important;
margin-top: 5px !important;
overflow: visible !important;
fill: none !important;
stroke: #20DFFF !important;
stroke-width: 3 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
filter:
drop-shadow(0 0 3px #20DFFF)
drop-shadow(0 0 7px rgba(32,223,255,.92))
drop-shadow(0 0 14px rgba(32,223,255,.55)) !important;
}
/* =========================================================
WIDE DESKTOP
========================================================= */
@media (min-width: 1500px) {
.how-section {
padding-left: 60px !important;
padding-right: 60px !important;
}
.how-grid {
padding-right: 195px !important;
}
.how-vibes-sign {
right: 42px !important;
}
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (max-width: 1150px) and (min-width: 761px) {
.how-section {
padding-left: 28px !important;
padding-right: 28px !important;
}
.how-grid {
padding-right: 130px !important;
gap: 14px !important;
}
.how-step h3 {
font-size: 12px !important;
}
.how-step p {
font-size: 9.5px !important;
}
.how-vibes-sign {
right: 14px !important;
width: 105px !important;
}
.how-vibes-line {
font-size: 16px !important;
}
.how-vibes-crown {
width: 34px !important;
height: 22px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.how-section {
padding:
22px 16px !important;
}
.how-grid {
grid-template-columns:
1fr !important;
padding-right:
0 !important;
gap:
22px !important;
}
.how-vibes-sign {
position: relative !important;
right: auto !important;
top: auto !important;
width: 100% !important;
margin-top: 18px !important;
transform:
rotate(-5deg) !important;
}
.how-vibes-line {
font-size:
19px !important;
}
}
/* ===== HOW SIGN FINAL POSITION ===== */
/*
Text only.
Moves the existing neon sign left and slightly enlarges it.
*/
.how-vibes-sign {
right: 72px !important;
width: 155px !important;
top: 53% !important;
}
.how-vibes-line {
font-size: 24px !important;
}
.how-vibes-crown {
width: 50px !important;
height: 33px !important;
margin-top: 6px !important;
}
/* Wide fullscreen */
@media (min-width: 1500px) {
.how-vibes-sign {
right: 82px !important;
width: 165px !important;
}
.how-vibes-line {
font-size: 25px !important;
}
}
/* Windowed */
@media (max-width: 1150px) and (min-width: 761px) {
.how-vibes-sign {
right: 38px !important;
width: 120px !important;
}
.how-vibes-line {
font-size: 17px !important;
}
.how-vibes-crown {
width: 38px !important;
height: 25px !important;
}
}
/* ===== HOW IT WORKS TRANSPARENT VIBES IMAGE ===== */
/* completely disable all previous text-based versions */
.how-vibes-sign {
display: none !important;
}
.how-section::after {
content: none !important;
display: none !important;
}
/* keep the right-side area available for the PNG */
.how-section .how-grid {
padding-right: 190px !important;
box-sizing: border-box !important;
}
/* actual transparent artwork */
.how-vibes-image {
position: absolute !important;
z-index: 40 !important;
right: 60px !important;
top: 54% !important;
transform:
translateY(-50%)
rotate(-4deg) !important;
width: 165px !important;
max-width: 165px !important;
height: auto !important;
display: block !important;
object-fit: contain !important;
pointer-events: none !important;
user-select: none !important;
filter:
drop-shadow(0 0 7px rgba(32,223,255,.18))
drop-shadow(0 0 9px rgba(255,66,214,.14)) !important;
}
/* =========================================================
LARGE FULLSCREEN
========================================================= */
@media (min-width: 1500px) {
.how-section .how-grid {
padding-right: 205px !important;
}
.how-vibes-image {
right: 68px !important;
width: 180px !important;
max-width: 180px !important;
}
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (max-width: 1150px) and (min-width: 761px) {
.how-section .how-grid {
padding-right: 135px !important;
}
.how-vibes-image {
right: 28px !important;
width: 125px !important;
max-width: 125px !important;
}
}
/* =========================================================
NARROW WINDOW
========================================================= */
@media (max-width: 900px) and (min-width: 761px) {
.how-section .how-grid {
padding-right: 105px !important;
}
.how-vibes-image {
right: 16px !important;
width: 95px !important;
max-width: 95px !important;
}
}
/* =========================================================
MOBILE
Put image underneath rather than overlapping steps
========================================================= */
@media (max-width: 760px) {
.how-section .how-grid {
padding-right: 0 !important;
}
.how-vibes-image {
position: relative !important;
right: auto !important;
top: auto !important;
width: 150px !important;
max-width: 150px !important;
margin:
20px auto 0 !important;
transform:
rotate(-4deg) !important;
}
}
/* ===== HOW IT WORKS TRANSPARENT VIBES IMAGE ===== */
/* completely disable all previous text-based versions */
.how-vibes-sign {
display: none !important;
}
.how-section::after {
content: none !important;
display: none !important;
}
/* keep the right-side area available for the PNG */
.how-section .how-grid {
padding-right: 190px !important;
box-sizing: border-box !important;
}
/* actual transparent artwork */
.how-vibes-image {
position: absolute !important;
z-index: 40 !important;
right: 60px !important;
top: 54% !important;
transform:
translateY(-50%)
rotate(-4deg) !important;
width: 165px !important;
max-width: 165px !important;
height: auto !important;
display: block !important;
object-fit: contain !important;
pointer-events: none !important;
user-select: none !important;
filter:
drop-shadow(0 0 7px rgba(32,223,255,.18))
drop-shadow(0 0 9px rgba(255,66,214,.14)) !important;
}
/* =========================================================
LARGE FULLSCREEN
========================================================= */
@media (min-width: 1500px) {
.how-section .how-grid {
padding-right: 205px !important;
}
.how-vibes-image {
right: 68px !important;
width: 180px !important;
max-width: 180px !important;
}
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (max-width: 1150px) and (min-width: 761px) {
.how-section .how-grid {
padding-right: 135px !important;
}
.how-vibes-image {
right: 28px !important;
width: 125px !important;
max-width: 125px !important;
}
}
/* =========================================================
NARROW WINDOW
========================================================= */
@media (max-width: 900px) and (min-width: 761px) {
.how-section .how-grid {
padding-right: 105px !important;
}
.how-vibes-image {
right: 16px !important;
width: 95px !important;
max-width: 95px !important;
}
}
/* =========================================================
MOBILE
Put image underneath rather than overlapping steps
========================================================= */
@media (max-width: 760px) {
.how-section .how-grid {
padding-right: 0 !important;
}
.how-vibes-image {
position: relative !important;
right: auto !important;
top: auto !important;
width: 150px !important;
max-width: 150px !important;
margin:
20px auto 0 !important;
transform:
rotate(-4deg) !important;
}
}
/* ===== HOW IT WORKS TRANSPARENT VIBES IMAGE ===== */
/* completely disable all previous text-based versions */
.how-vibes-sign {
display: none !important;
}
.how-section::after {
content: none !important;
display: none !important;
}
/* keep the right-side area available for the PNG */
.how-section .how-grid {
padding-right: 190px !important;
box-sizing: border-box !important;
}
/* actual transparent artwork */
.how-vibes-image {
position: absolute !important;
z-index: 40 !important;
right: 60px !important;
top: 54% !important;
transform:
translateY(-50%)
rotate(-4deg) !important;
width: 165px !important;
max-width: 165px !important;
height: auto !important;
display: block !important;
object-fit: contain !important;
pointer-events: none !important;
user-select: none !important;
filter:
drop-shadow(0 0 7px rgba(32,223,255,.18))
drop-shadow(0 0 9px rgba(255,66,214,.14)) !important;
}
/* =========================================================
LARGE FULLSCREEN
========================================================= */
@media (min-width: 1500px) {
.how-section .how-grid {
padding-right: 205px !important;
}
.how-vibes-image {
right: 68px !important;
width: 180px !important;
max-width: 180px !important;
}
}
/* =========================================================
WINDOWED DESKTOP
========================================================= */
@media (max-width: 1150px) and (min-width: 761px) {
.how-section .how-grid {
padding-right: 135px !important;
}
.how-vibes-image {
right: 28px !important;
width: 125px !important;
max-width: 125px !important;
}
}
/* =========================================================
NARROW WINDOW
========================================================= */
@media (max-width: 900px) and (min-width: 761px) {
.how-section .how-grid {
padding-right: 105px !important;
}
.how-vibes-image {
right: 16px !important;
width: 95px !important;
max-width: 95px !important;
}
}
/* =========================================================
MOBILE
Put image underneath rather than overlapping steps
========================================================= */
@media (max-width: 760px) {
.how-section .how-grid {
padding-right: 0 !important;
}
.how-vibes-image {
position: relative !important;
right: auto !important;
top: auto !important;
width: 150px !important;
max-width: 150px !important;
margin:
20px auto 0 !important;
transform:
rotate(-4deg) !important;
}
}
/* ===== FREE BETA NEAR FULL WIDTH ===== */
/*
Break the Free Beta section out of the normal content width
and leave only a small gap from the browser edges.
*/
.cl-free-beta-section {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 28px !important;
padding-right: 28px !important;
box-sizing: border-box !important;
}
/*
Let the actual Free Beta card fill that available width.
*/
.cl-free-beta-card {
width: 100% !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/*
Give the contents a little more breathing room
now that the card is wider.
*/
.cl-free-beta-card {
padding-left: 30px !important;
padding-right: 30px !important;
}
/* Large desktop */
@media (min-width: 1500px) {
.cl-free-beta-section {
padding-left: 36px !important;
padding-right: 36px !important;
}
.cl-free-beta-card {
padding-left: 38px !important;
padding-right: 38px !important;
}
}
/* Smaller screens */
@media (max-width: 900px) {
.cl-free-beta-section {
padding-left: 16px !important;
padding-right: 16px !important;
}
.cl-free-beta-card {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
/* Mobile */
@media (max-width: 600px) {
.cl-free-beta-section {
padding-left: 10px !important;
padding-right: 10px !important;
}
}
/* ===== GET MORE SINGLE BANNER IMAGE FINAL ===== */
/* =========================================================
FULL-WIDTH IMAGE SECTION
========================================================= */
.community-section {
position: relative !important;
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding: 24px 0 28px !important;
overflow: hidden !important;
box-sizing: border-box !important;
background-image:
url("/landing/assets/get-more-banner.png") !important;
background-size:
cover !important;
background-position:
center right !important;
background-repeat:
no-repeat !important;
border-top:
1px solid rgba(32,223,255,.35) !important;
border-bottom:
1px solid rgba(32,223,255,.35) !important;
}
/* disable older decorative background layer */
.community-section::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
pointer-events: none !important;
background:
linear-gradient(
90deg,
rgba(2,8,22,.62) 0%,
rgba(2,9,23,.48) 45%,
rgba(2,9,23,.18) 72%,
rgba(2,9,23,.03) 100%
) !important;
}
/* No separate llama - it is already inside the banner */
.community-section::after {
content: none !important;
display: none !important;
}
/* =========================================================
CONTENT POSITIONING
Leave the right of the banner visible
========================================================= */
.community-section .content-width {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-left: 56px !important;
padding-right: 400px !important;
box-sizing: border-box !important;
}
/* =========================================================
HEADING
========================================================= */
.community-heading {
position: relative !important;
z-index: 3 !important;
margin-bottom: 12px !important;
}
/* =========================================================
FOUR CARDS
========================================================= */
.community-grid {
position: relative !important;
z-index: 3 !important;
width: 100% !important;
display: grid !important;
grid-template-columns:
repeat(4, minmax(0,1fr)) !important;
gap: 12px !important;
}
.community-card {
position: relative !important;
min-height: 150px !important;
background:
linear-gradient(
145deg,
rgba(5,19,46,.90),
rgba(5,10,31,.86)
) !important;
border:
1px solid rgba(117,83,255,.62) !important;
backdrop-filter:
blur(3px) !important;
-webkit-backdrop-filter:
blur(3px) !important;
}
/* =========================================================
LARGE FULLSCREEN
========================================================= */
@media (min-width: 1500px) {
.community-section .content-width {
padding-left: 58px !important;
padding-right: 440px !important;
}
}
/* =========================================================
LAPTOP / WINDOWED
========================================================= */
@media (max-width: 1250px) and (min-width: 901px) {
.community-section .content-width {
padding-left: 28px !important;
padding-right: 300px !important;
}
.community-grid {
gap: 9px !important;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.community-section {
background-position:
72% center !important;
}
.community-section .content-width {
padding-left: 20px !important;
padding-right: 20px !important;
}
.community-grid {
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.community-section {
padding:
24px 0 28px !important;
background-position:
center center !important;
}
.community-section .content-width {
padding-left:
14px !important;
padding-right:
14px !important;
}
.community-grid {
grid-template-columns:
1fr !important;
}
}
/* ===== GET MORE SUBTITLE UNDER HEADING ===== */
.community-heading {
display: block !important;
margin-bottom: 14px !important;
}
.community-heading > div {
display: block !important;
}
.community-heading > p {
display: block !important;
width: auto !important;
max-width: 720px !important;
margin:
3px 0 0 !important;
padding: 0 !important;
text-align: left !important;
color:
rgba(235, 247, 255, .88) !important;
font-size:
13px !important;
line-height:
1.4 !important;
}
/* Mobile */
@media (max-width: 760px) {
.community-heading > p {
max-width:
100% !important;
font-size:
12px !important;
}
}
/* ===== GET MORE BANNER FULL LLAMA VIEW ===== */
/*
Zoom the banner OUT slightly so more of the original
artwork and llama are visible.
*/
.community-section {
background-size:
96% auto !important;
background-position:
right 62% !important;
background-repeat:
no-repeat !important;
background-color:
#030918 !important;
}
/*
Fullscreen / large monitors:
show even more of the llama and move artwork slightly down.
*/
@media (min-width: 1400px) {
.community-section {
background-size:
94% auto !important;
background-position:
right 68% !important;
}
}
/*
Very wide screens.
*/
@media (min-width: 1800px) {
.community-section {
background-size:
92% auto !important;
background-position:
right 70% !important;
}
}
/*
Normal laptop widths.
*/
@media (max-width: 1399px) and (min-width: 901px) {
.community-section {
background-size:
100% auto !important;
background-position:
right 62% !important;
}
}
/* ===== GET MORE BANNER TOP ANCHOR FINAL ===== */
/*
Banner source = 2048 x 658.
Anchor the artwork to the TOP so the llama's
ears/head are never cropped off.
Any unavoidable crop happens from the bottom.
*/
.community-section {
background-image:
url("/landing/assets/get-more-banner.png") !important;
background-repeat:
no-repeat !important;
background-position:
right top !important;
background-size:
100% auto !important;
background-color:
#020817 !important;
}
/* =========================================================
FULLSCREEN
Zoom out slightly so MORE of the llama is visible.
Keep the image anchored at the top-right.
========================================================= */
@media (min-width: 1400px) {
.community-section {
background-size:
94% auto !important;
background-position:
right top !important;
}
}
/* =========================================================
VERY WIDE FULLSCREEN
Zoom out a little further.
========================================================= */
@media (min-width: 1800px) {
.community-section {
background-size:
92% auto !important;
background-position:
right top !important;
}
}
/* =========================================================
NORMAL DESKTOP / LAPTOP
========================================================= */
@media (max-width: 1399px) and (min-width: 901px) {
.community-section {
background-size:
100% auto !important;
background-position:
right top !important;
}
}
/* =========================================================
TABLET / MOBILE
========================================================= */
@media (max-width: 900px) {
.community-section {
background-size:
cover !important;
background-position:
75% top !important;
}
}
/* ===== GET MORE WINDOWED COMPACT FINAL ===== */
/*
WINDOWED DESKTOP ONLY
Banner source = 2048 x 658.
At roughly 958px browser width the natural displayed
banner height is about 308px.
Compact the content so the section matches that shape.
*/
@media (min-width: 901px) and (max-width: 1199px) {
.community-section {
height: 32.13vw !important;
min-height: 300px !important;
max-height: 385px !important;
padding:
13px 0 13px !important;
background-size:
100% auto !important;
background-position:
right top !important;
box-sizing:
border-box !important;
}
/* Keep cards clear of the llama */
.community-section .content-width {
height: 100% !important;
padding-left:
24px !important;
padding-right:
285px !important;
box-sizing:
border-box !important;
}
/* -----------------------------------------
HEADING
----------------------------------------- */
.community-heading {
margin-bottom:
10px !important;
}
.community-kicker {
margin-bottom:
4px !important;
font-size:
9px !important;
line-height:
1 !important;
}
.community-heading h2 {
margin:
0 !important;
font-size:
25px !important;
line-height:
1.02 !important;
}
.community-heading > p {
margin:
4px 0 0 !important;
font-size:
10px !important;
line-height:
1.2 !important;
}
/* -----------------------------------------
FOUR CARDS
----------------------------------------- */
.community-grid {
gap:
9px !important;
align-items:
stretch !important;
}
.community-card {
min-height:
0 !important;
height:
165px !important;
padding:
10px 11px !important;
box-sizing:
border-box !important;
overflow:
hidden !important;
}
.community-card .community-icon {
margin-bottom:
6px !important;
transform:
scale(.82) !important;
transform-origin:
left center !important;
}
.community-card h3 {
margin:
5px 0 6px !important;
font-size:
10.5px !important;
line-height:
1.15 !important;
}
.community-card p {
margin:
0 !important;
font-size:
8px !important;
line-height:
1.3 !important;
}
}
/*
Slightly wider windowed desktop.
Give the cards a little more height automatically.
*/
@media (min-width: 1100px) and (max-width: 1199px) {
.community-card {
height:
175px !important;
}
.community-card p {
font-size:
8.5px !important;
}
}
/* ===== CADDYLOBBY BOTTOM CTA IMAGE BANNER FINAL ===== */
/* =========================================================
FULL WIDTH CTA
========================================================= */
.bottom-cta.cl-bottom-banner-cta {
position: relative !important;
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #020817 !important;
border-top:
1px solid rgba(32,223,255,.35) !important;
border-bottom:
1px solid rgba(32,223,255,.35) !important;
box-sizing: border-box !important;
}
/* Remove any older CTA decorative layers */
.bottom-cta.cl-bottom-banner-cta::before,
.bottom-cta.cl-bottom-banner-cta::after {
content: none !important;
display: none !important;
}
/* =========================================================
BANNER WRAPPER
========================================================= */
.cl-bottom-banner-wrap {
position: relative !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* =========================================================
ACTUAL IMAGE
Keep its original proportions.
No stretching and no cropping.
========================================================= */
.cl-bottom-banner-image {
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
}
/* =========================================================
INVISIBLE CLICK AREA
Positioned directly over the button drawn in the PNG.
========================================================= */
.cl-bottom-banner-button {
position: absolute !important;
z-index: 10 !important;
left: 39.1% !important;
top: 54.2% !important;
width: 21.9% !important;
height: 32% !important;
display: block !important;
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
text-decoration: none !important;
}
/* Helpful keyboard focus without affecting normal appearance */
.cl-bottom-banner-button:focus-visible {
outline:
2px solid #20DFFF !important;
outline-offset:
3px !important;
border-radius:
8px !important;
}
/* =========================================================
WINDOWED DESKTOP
Image remains proportional.
========================================================= */
@media (max-width: 1200px) {
.cl-bottom-banner-image {
width: 100% !important;
height: auto !important;
}
}
/* =========================================================
MOBILE
Keep full artwork visible rather than cropping it.
========================================================= */
@media (max-width: 760px) {
.bottom-cta.cl-bottom-banner-cta {
width: 100vw !important;
}
.cl-bottom-banner-wrap {
width: 100% !important;
}
.cl-bottom-banner-image {
width: 100% !important;
height: auto !important;
}
}
/* ===== CADDYLOBBY BOTTOM CTA IMAGE BANNER FINAL ===== */
/* =========================================================
FULL WIDTH CTA
========================================================= */
.bottom-cta.cl-bottom-banner-cta {
position: relative !important;
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #020817 !important;
border-top:
1px solid rgba(32,223,255,.35) !important;
border-bottom:
1px solid rgba(32,223,255,.35) !important;
box-sizing: border-box !important;
}
/* Remove any older CTA decorative layers */
.bottom-cta.cl-bottom-banner-cta::before,
.bottom-cta.cl-bottom-banner-cta::after {
content: none !important;
display: none !important;
}
/* =========================================================
BANNER WRAPPER
========================================================= */
.cl-bottom-banner-wrap {
position: relative !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* =========================================================
ACTUAL IMAGE
Keep its original proportions.
No stretching and no cropping.
========================================================= */
.cl-bottom-banner-image {
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
}
/* =========================================================
INVISIBLE CLICK AREA
Positioned directly over the button drawn in the PNG.
========================================================= */
.cl-bottom-banner-button {
position: absolute !important;
z-index: 10 !important;
left: 39.1% !important;
top: 54.2% !important;
width: 21.9% !important;
height: 32% !important;
display: block !important;
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
text-decoration: none !important;
}
/* Helpful keyboard focus without affecting normal appearance */
.cl-bottom-banner-button:focus-visible {
outline:
2px solid #20DFFF !important;
outline-offset:
3px !important;
border-radius:
8px !important;
}
/* =========================================================
WINDOWED DESKTOP
Image remains proportional.
========================================================= */
@media (max-width: 1200px) {
.cl-bottom-banner-image {
width: 100% !important;
height: auto !important;
}
}
/* =========================================================
MOBILE
Keep full artwork visible rather than cropping it.
========================================================= */
@media (max-width: 760px) {
.bottom-cta.cl-bottom-banner-cta {
width: 100vw !important;
}
.cl-bottom-banner-wrap {
width: 100% !important;
}
.cl-bottom-banner-image {
width: 100% !important;
height: auto !important;
}
}
/* ===== CADDYLOBBY BOTTOM CTA IMAGE BANNER FINAL ===== */
/* =========================================================
FULL WIDTH CTA
========================================================= */
.bottom-cta.cl-bottom-banner-cta {
position: relative !important;
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #020817 !important;
border-top:
1px solid rgba(32,223,255,.35) !important;
border-bottom:
1px solid rgba(32,223,255,.35) !important;
box-sizing: border-box !important;
}
/* Remove any older CTA decorative layers */
.bottom-cta.cl-bottom-banner-cta::before,
.bottom-cta.cl-bottom-banner-cta::after {
content: none !important;
display: none !important;
}
/* =========================================================
BANNER WRAPPER
========================================================= */
.cl-bottom-banner-wrap {
position: relative !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* =========================================================
ACTUAL IMAGE
Keep its original proportions.
No stretching and no cropping.
========================================================= */
.cl-bottom-banner-image {
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
}
/* =========================================================
INVISIBLE CLICK AREA
Positioned directly over the button drawn in the PNG.
========================================================= */
.cl-bottom-banner-button {
position: absolute !important;
z-index: 10 !important;
left: 39.1% !important;
top: 54.2% !important;
width: 21.9% !important;
height: 32% !important;
display: block !important;
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
text-decoration: none !important;
}
/* Helpful keyboard focus without affecting normal appearance */
.cl-bottom-banner-button:focus-visible {
outline:
2px solid #20DFFF !important;
outline-offset:
3px !important;
border-radius:
8px !important;
}
/* =========================================================
WINDOWED DESKTOP
Image remains proportional.
========================================================= */
@media (max-width: 1200px) {
.cl-bottom-banner-image {
width: 100% !important;
height: auto !important;
}
}
/* =========================================================
MOBILE
Keep full artwork visible rather than cropping it.
========================================================= */
@media (max-width: 760px) {
.bottom-cta.cl-bottom-banner-cta {
width: 100vw !important;
}
.cl-bottom-banner-wrap {
width: 100% !important;
}
.cl-bottom-banner-image {
width: 100% !important;
height: auto !important;
}
}
/* ===== BOTTOM CTA WINDOWED SIZE POLISH ===== */
/*
Windowed desktop only:
make the banner a little taller and easier to read,
without affecting fullscreen.
*/
@media (min-width: 761px) and (max-width: 1199px) {
.cl-bottom-banner-wrap {
height: 138px !important;
}
.cl-bottom-banner-image {
width: 100% !important;
height: 138px !important;
object-fit: cover !important;
object-position: center center !important;
}
/*
Button overlay follows the slightly taller banner.
*/
.cl-bottom-banner-button {
left: 39.1% !important;
top: 54% !important;
width: 21.9% !important;
height: 32% !important;
}
}
/*
Slightly narrower desktop windows
*/
@media (min-width: 761px) and (max-width: 1000px) {
.cl-bottom-banner-wrap {
height: 128px !important;
}
.cl-bottom-banner-image {
height: 128px !important;
}
}
/* ===== BOTTOM CTA WINDOWED FULL IMAGE FIX ===== */
/*
WINDOWED DESKTOP ONLY
Undo the earlier fixed-height / cover behaviour.
Keep the entire banner visible from left edge to right edge.
*/
@media (min-width: 761px) and (max-width: 1199px) {
.cl-bottom-banner-wrap {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
}
.cl-bottom-banner-image {
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 !important;
}
/*
Keep invisible signup link over the button
drawn into the actual banner.
*/
.cl-bottom-banner-button {
left: 39.1% !important;
top: 54.2% !important;
width: 21.9% !important;
height: 32% !important;
}
}
/*
Same rule for the narrower end of desktop windowed mode.
This overrides the old 128px fixed height.
*/
@media (min-width: 761px) and (max-width: 1000px) {
.cl-bottom-banner-wrap {
height: auto !important;
}
.cl-bottom-banner-image {
height: auto !important;
object-fit: contain !important;
}
}
/* ===== CADDYLOBBY FINAL MOBILE HOME START ===== */
@media (max-width: 759px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* HERO */
.hero {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
}
.hero-inner {
width: calc(100% - 28px) !important;
max-width: none !important;
min-height: 0 !important;
margin: 0 auto !important;
display: block !important;
}
.hero-copy {
width: 100% !important;
max-width: 100% !important;
padding:
34px 0 18px !important;
text-align: center !important;
}
.hero-kicker {
font-size: 11px !important;
line-height: 1.3 !important;
}
.hero h1 {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
font-size:
clamp(38px, 11vw, 50px) !important;
line-height:
.96 !important;
overflow-wrap:
normal !important;
word-break:
normal !important;
}
.hero h1 > span,
.hero h1 > span:last-child {
width: 100% !important;
max-width: 100% !important;
white-space:
normal !important;
}
.hero-copy > p {
width: 100% !important;
max-width: 430px !important;
margin:
16px auto 20px !important;
padding:
0 4px !important;
font-size:
14px !important;
line-height:
1.55 !important;
}
/* BUTTONS */
.hero-buttons {
width: 100% !important;
display: flex !important;
flex-direction:
column !important;
align-items:
stretch !important;
gap:
10px !important;
}
.hero-button,
.gradient-btn.hero-button,
.windows-btn.hero-button {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin:
0 !important;
justify-content:
center !important;
}
/* TRUST ICONS */
.trust-row {
width: 100% !important;
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap:
12px 8px !important;
margin:
18px auto 0 !important;
justify-items:
center !important;
}
.trust-row > * {
min-width: 0 !important;
max-width: 100% !important;
}
/* CHARACTER
Keep her below the copy rather than beside it.
*/
.hero-character {
position: relative !important;
width:
min(330px, 88vw) !important;
max-width:
88vw !important;
height:
300px !important;
right:
auto !important;
left:
auto !important;
bottom:
auto !important;
top:
auto !important;
margin:
0 auto !important;
overflow:
hidden !important;
}
.hero-character img {
position:
absolute !important;
width:
auto !important;
max-width:
none !important;
height:
330px !important;
left:
50% !important;
bottom:
-18px !important;
transform:
translateX(-50%) !important;
object-fit:
contain !important;
}
/* HERO BACKGROUND */
.hero-bg {
background-size:
cover !important;
background-position:
66% center !important;
}
.hero-shade {
background:
linear-gradient(
180deg,
rgba(1,8,22,.92) 0%,
rgba(1,8,22,.80) 48%,
rgba(1,8,22,.58) 100%
) !important;
}
/* GENERAL MOBILE WIDTH SAFETY */
img,
video,
svg {
max-width:
100%;
}
.content-width {
width:
calc(100% - 28px) !important;
max-width:
100% !important;
}
/* FOOTER SMALL PRINT */
.footer .tiny,
footer .tiny {
font-size:
11px !important;
line-height:
1.55 !important;
}
}
/* ===== CADDYLOBBY FINAL MOBILE HOME END ===== */
/* ===== CADDYLOBBY MOBILE FINAL CLEANUP START ===== */
@media (max-width: 759px) {
/* ======================================================
HERO
Remove desktop graffiti/slogan artwork from phone.
====================================================== */
.hero-inner::before,
.hero-inner::after {
content:
none !important;
display:
none !important;
background-image:
none !important;
}
/* Keep hero copy above scenery */
.hero-copy {
position:
relative !important;
z-index:
10 !important;
}
/* ======================================================
HOW IT WORKS VIBES
Hide every older generated version.
====================================================== */
.how-vibes-sign,
.how-vibes-sign::before,
.how-vibes-sign::after {
display:
none !important;
content:
none !important;
}
/*
Single clean mobile version inserted by mobile-final.js
*/
.cl-mobile-vibes-clean {
width:
100%;
margin:
0 auto;
padding:
34px 20px 28px;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
text-align:
center;
background:
#020916;
position:
relative;
overflow:
hidden;
}
.cl-mobile-vibes-clean::before {
content:
"";
position:
absolute;
inset:
0;
pointer-events:
none;
background:
radial-gradient(
circle at 50% 45%,
rgba(139, 73, 255, .10),
transparent 52%
);
}
.cl-mobile-vibes-line {
position:
relative;
z-index:
2;
display:
block;
font-family:
"Arial Black",
Impact,
sans-serif;
font-style:
italic;
font-size:
28px;
line-height:
1.03;
letter-spacing:
.5px;
transform:
rotate(-5deg);
}
.cl-mobile-vibes-line.cyan {
color:
#20DFFF;
text-shadow:
0 0 7px #20DFFF,
0 0 18px rgba(32,223,255,.65);
}
.cl-mobile-vibes-line.pink {
color:
#FF35D2;
text-shadow:
0 0 7px #FF35D2,
0 0 18px rgba(255,53,210,.65);
}
.cl-mobile-vibes-crown {
position:
relative;
z-index:
2;
margin-top:
5px;
color:
#20DFFF;
font-size:
31px;
line-height:
1;
transform:
rotate(-5deg);
text-shadow:
0 0 8px #20DFFF,
0 0 20px rgba(32,223,255,.6);
}
/* ======================================================
HOW IT WORKS
Remove huge gap left behind by old artwork.
====================================================== */
.how-section {
margin-top:
0 !important;
}
.how-section .section-title-row {
margin-top:
0 !important;
padding-top:
8px !important;
}
/* ======================================================
FAQ
JS controls opened/closed state.
====================================================== */
.bot-faq-item {
width:
100% !important;
}
/* ======================================================
DOWNLOAD BANNER
Keep contained inside phone width.
====================================================== */
.cl-final-download-section,
.cl-final-download-banner {
width:
100% !important;
max-width:
100% !important;
overflow:
hidden !important;
}
.cl-final-download-image {
display:
block !important;
width:
100% !important;
max-width:
100% !important;
height:
auto !important;
margin:
0 auto !important;
}
/* ======================================================
BOTTOM CTA
Make CTA feel intentional on phone.
====================================================== */
.bottom-cta {
width:
100% !important;
height:
auto !important;
min-height:
0 !important;
padding:
30px 16px !important;
background-size:
cover !important;
background-position:
center !important;
}
.bottom-cta .bottom-inner {
width:
100% !important;
max-width:
100% !important;
margin:
0 auto !important;
padding:
0 !important;
display:
flex !important;
flex-direction:
column !important;
align-items:
center !important;
justify-content:
center !important;
text-align:
center !important;
}
.bottom-cta-title {
width:
100% !important;
max-width:
100% !important;
justify-content:
center !important;
flex-wrap:
wrap !important;
font-size:
clamp(22px, 7vw, 31px) !important;
line-height:
1.05 !important;
}
.bottom-cta .cta-button {
width:
min(100%, 360px) !important;
min-width:
0 !important;
margin-left:
auto !important;
margin-right:
auto !important;
}
}
/* ===== CADDYLOBBY MOBILE FINAL CLEANUP END ===== */
/* ===== MOBILE HOW VIBES FINAL START ===== */
@media (max-width: 759px) {
/* show the ORIGINAL slanted image above HOW IT WORKS */
.how-vibes-image {
display: block !important;
position: relative !important;
right: auto !important;
left: auto !important;
top: auto !important;
bottom: auto !important;
width: min(180px, 58vw) !important;
max-width: 180px !important;
height: auto !important;
margin: 24px auto 16px !important;
z-index: 40 !important;
}
/* hide the alternate generated / text sign */
.how-vibes-sign,
.how-vibes-sign::before,
.how-vibes-sign::after {
display: none !important;
visibility: hidden !important;
content: none !important;
}
/* tidy spacing before HOW IT WORKS */
.how-section {
padding-top: 20px !important;
}
}
/* ===== MOBILE HOW VIBES FINAL END ===== */
/* ===== FINAL HOW SIGN CLEANUP START ===== */
@media (max-width: 760px) {
/* HIDE the extra top sign completely */
.how-vibes-sign,
.how-vibes-sign::before,
.how-vibes-sign::after {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
content: none !important;
max-height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* KEEP the correct slanted image only */
.how-vibes-image {
display: block !important;
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: min(210px, 62vw) !important;
max-width: 210px !important;
height: auto !important;
margin: 18px auto 10px !important;
z-index: 40 !important;
}
/* tidy spacing */
.how-section {
padding-top: 10px !important;
}
}
/* ===== FINAL HOW SIGN CLEANUP END ===== */
/* ===== MOBILE TRUST ROW FIX START ===== */
@media (max-width: 759px) {
.trust-row {
width: calc(100% - 28px) !important;
max-width: 100% !important;
margin: 20px auto 0 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 14px !important;
row-gap: 16px !important;
align-items: center !important;
justify-items: stretch !important;
}
.trust-row > * {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
text-align: center !important;
white-space: nowrap !important;
font-size: clamp(14px, 4vw, 18px) !important;
line-height: 1.15 !important;
}
.trust-row img,
.trust-row svg {
flex: 0 0 auto !important;
max-width: 24px !important;
max-height: 24px !important;
}
}
/* ===== MOBILE TRUST ROW FIX END ===== */
/* ===== TRUST ROW FINAL MOBILE START ===== */
@media (max-width: 759px) {
.trust-row {
width: calc(100% - 34px) !important;
max-width: 100% !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
column-gap: 18px !important;
row-gap: 15px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.trust-row .trust-item {
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
/*
Bottom row only:
Trusted by Players
Australian Hosted
*/
.trust-row .trust-item:nth-child(3) .trust-label,
.trust-row .trust-item:nth-child(4) .trust-label {
font-size: clamp(12px, 3.35vw, 15px) !important;
line-height: 1.1 !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
min-width: 0 !important;
max-width: 100% !important;
}
.trust-row .trust-item:nth-child(3) .trust-icon,
.trust-row .trust-item:nth-child(4) .trust-icon {
width: 19px !important;
height: 19px !important;
min-width: 19px !important;
flex: 0 0 19px !important;
}
.trust-row .trust-item:nth-child(4) .australia-hosted-img {
width: 19px !important;
height: auto !important;
min-width: 19px !important;
flex-basis: 19px !important;
}
}
/* ===== TRUST ROW FINAL MOBILE END ===== */
/* ===== HIDE EXTRA MOBILE VIBES START ===== */
@media (max-width: 759px) {
.cl-mobile-vibes-clean {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
}
/* ===== HIDE EXTRA MOBILE VIBES END ===== */
/* ===== MOBILE SPACING POLISH V1 ===== */
@media (max-width: 759px) {
.feature-card {
min-height: 0 !important;
height: auto !important;
padding: 22px 18px !important;
}
.feature-card .feature-symbol {
width: 44px !important;
height: 44px !important;
margin-bottom: 9px !important;
}
.feature-card h3 { margin-bottom: 6px !important; }
.feature-card p { margin-bottom: 0 !important; }
.how-section {
padding-top: 10px !important;
padding-bottom: 18px !important;
}
.how-section .how-grid {
gap: 14px !important;
}
.how-section .circle-icon {
width: 60px !important;
height: 60px !important;
margin-bottom: 7px !important;
}
.how-section .how-step h3 { margin-bottom: 4px !important; }
.how-section .how-step p { margin: 0 !important; }
}
/* ===== MOBILE LOGIN BUTTON FIX ===== */
@media (max-width: 590px) {
.login-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 12px !important;
min-width: auto !important;
font-size: 11px !important;
white-space: nowrap !important;
}
}
@media (max-width: 590px) {
.header-buttons {
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
.header-buttons .login-btn {
display: inline-flex !important;
padding: 8px 10px !important;
font-size: 11px !important;
min-width: auto !important;
white-space: nowrap !important;
}
.header-buttons .gradient-btn.small {
padding: 8px 10px !important;
font-size: 11px !important;
white-space: nowrap !important;
}
}
@media (max-width: 590px) {
.logo-block small {
display: none !important;
}
.logo-block img {
width: 38px !important;
}
.logo-block strong {
font-size: 16px !important;
}
.header-buttons {
gap: 5px !important;
}
.header-buttons .login-btn {
padding: 8px 9px !important;
font-size: 10px !important;
}
.header-buttons .gradient-btn.small {
padding: 8px 9px !important;
font-size: 10px !important;
}
}
@media (max-width: 590px) {
.hero,
.hero-inner {
min-height: 720px !important;
}
}
@media (max-width: 590px) {
.feature-strip {
margin-top: 8px !important;
gap: 14px !important;
}
.feature-card {
padding: 18px 16px !important;
}
}
/* ===== MOBILE HERO BACKGROUND ALIGNMENT ===== */
@media (max-width: 759px) {
.hero-bg {
background-position: 72% calc(50% - 45px) !important;
}
}
/* ===== PORTRAIT LLAMA POSITION ===== */
@media (max-width: 590px) and (orientation: portrait) {
.community-section {
background-position: 88% top !important;
}
}
/* ===== SMALL PHONE 360PX FIX ===== */
@media (max-width: 370px) {
html,
body {
max-width: 100% !important;
overflow-x: hidden !important;
}
.header-inner {
width: calc(100% - 12px) !important;
}
.logo-block {
min-width: 0 !important;
}
.logo-block img {
width: 34px !important;
}
.logo-block strong {
font-size: 14px !important;
}
.header-buttons {
gap: 4px !important;
flex-shrink: 1 !important;
}
.header-buttons .login-btn,
.header-buttons .gradient-btn.small {
padding: 7px 7px !important;
font-size: 9px !important;
}
.hero-inner {
width: calc(100% - 20px) !important;
}
.hero h1 {
font-size: 41px !important;
max-width: 100% !important;
}
.hero-copy,
.hero-copy > p,
.hero-buttons,
.trust-row {
max-width: 100% !important;
}
}
@media (max-width: 590px) and (orientation: portrait) {
.community-section {
background-position: 50% top !important;
}
}
/* ===== PHONE LANDSCAPE ONLY ===== */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
/* HEADER */
.main-nav {
display: none !important;
}
.header-inner {
grid-template-columns: 1fr auto !important;
width: calc(100% - 20px) !important;
padding: 6px 0 !important;
min-height: 64px !important;
}
.logo-block img {
width: 38px !important;
height: auto !important;
}
.logo-block strong {
font-size: 16px !important;
}
.logo-block small {
display: none !important;
}
/* HERO */
.hero-inner {
grid-template-columns: 1fr !important;
}
.hero-copy {
text-align: center !important;
}
.hero-bg {
background-position: 72% center !important;
}
.hero-character {
width: 100% !important;
height: 365px !important;
left: 0 !important;
right: auto !important;
bottom: 0 !important;
translate: none !important;
}
/* HOW IT WORKS */
.how-section .how-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.how-section .step-arrow {
display: none !important;
}
.how-section .how-step {
width: 100% !important;
max-width: 100% !important;
grid-column: auto !important;
grid-row: auto !important;
}
.how-section .how-step p {
max-width: 270px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ===== LANDSCAPE GIRL POSITION ===== */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
.hero-character {
left: -35px !important;
bottom: -18px !important;
right: auto !important;
}
}
/* ===== LANDSCAPE GIRL + BACKGROUND ALIGNMENT ===== */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
/* Move girl further left */
.hero-character img {
transform: translateX(-230px) !important;
}
/* Pull scenery upward behind her */
.hero-bg {
background-position: 72% calc(50% - 55px) !important;
}
}
/* ===== MOBILE BACKGROUND GIRL ALIGN START ===== */
@media (max-width: 759px) {
.hero-bg {
background-size: auto 108% !important;
background-position: 72% 25% !important;
}
}
/* ===== MOBILE BACKGROUND GIRL ALIGN END ===== */
/* ===== HOW LANDSCAPE 3X2 START ===== */
@media (min-width: 761px) and (max-width: 900px) {
.how-section {
padding-left: 26px !important;
padding-right: 26px !important;
}
.how-section .how-grid {
width: 100% !important;
max-width: 760px !important;
margin: 22px auto 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
column-gap: 18px !important;
row-gap: 34px !important;
align-items: start !important;
}
/* Hide the small connector columns between the five steps */
.how-section .how-grid > :nth-child(2),
.how-section .how-grid > :nth-child(4),
.how-section .how-grid > :nth-child(6),
.how-section .how-grid > :nth-child(8) {
display: none !important;
}
/* Row 1 */
.how-section .how-grid > :nth-child(1) {
grid-column: 1 / 3 !important;
}
.how-section .how-grid > :nth-child(3) {
grid-column: 3 / 5 !important;
}
.how-section .how-grid > :nth-child(5) {
grid-column: 5 / 7 !important;
}
/* Row 2 centred */
.how-section .how-grid > :nth-child(7) {
grid-column: 2 / 4 !important;
}
.how-section .how-grid > :nth-child(9) {
grid-column: 4 / 6 !important;
}
.how-section .how-grid > :nth-child(odd) {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
text-align: center !important;
box-sizing: border-box !important;
}
.how-section .how-grid h3,
.how-section .how-grid h4 {
white-space: normal !important;
line-height: 1.2 !important;
margin-left: auto !important;
margin-right: auto !important;
}
.how-section .how-grid p {
width: 100% !important;
max-width: 190px !important;
margin-left: auto !important;
margin-right: auto !important;
white-space: normal !important;
line-height: 1.4 !important;
}
}
/* ===== HOW LANDSCAPE 3X2 END ===== */
/* ===== HIDE LANDSCAPE HOW SIGN START ===== */
@media (min-width: 761px) and (max-width: 900px) {
.how-vibes-sign {
display: none !important;
}
}
/* ===== HIDE LANDSCAPE HOW SIGN END ===== */
/* ===== REMOVE LANDSCAPE VIBES START ===== */
@media (min-width: 761px) and (max-width: 900px) {
.how-section [class*="how-vibes"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
.how-section [class*="how-vibes"]::before,
.how-section [class*="how-vibes"]::after {
content: none !important;
display: none !important;
}
}
/* ===== REMOVE LANDSCAPE VIBES END ===== */
/* ===== LANDSCAPE GIRL POSITION START ===== */
@media (min-width: 761px) and (max-width: 900px) {
.hero-character {
bottom: -50px !important;
}
}
/* ===== LANDSCAPE GIRL POSITION END ===== */
/* ===== LANDSCAPE HEADER POLISH START ===== */
@media (min-width: 761px) and (max-width: 900px) {
.topbar {
min-height: 102px !important;
height: auto !important;
}
.header-inner {
width: calc(100% - 28px) !important;
max-width: none !important;
margin: 0 auto !important;
padding: 8px 0 7px !important;
display: grid !important;
grid-template-columns: auto 1fr auto !important;
grid-template-rows: auto auto !important;
column-gap: 14px !important;
row-gap: 7px !important;
align-items: center !important;
}
.logo-block {
grid-column: 1 !important;
grid-row: 1 !important;
width: auto !important;
min-width: 0 !important;
max-width: 230px !important;
margin: 0 !important;
transform: none !important;
}
.logo-block img {
width: 48px !important;
height: auto !important;
flex: 0 0 auto !important;
}
.logo-block strong {
font-size: 20px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.logo-block small {
font-size: 8px !important;
line-height: 1.1 !important;
letter-spacing: 1px !important;
white-space: nowrap !important;
}
.header-actions {
grid-column: 3 !important;
grid-row: 1 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
min-width: 0 !important;
width: auto !important;
}
.header-actions .aussie,
.aussie {
display: none !important;
}
.header-actions .login-btn,
.header-actions a[href="/login"] {
min-width: 70px !important;
min-height: 38px !important;
padding: 0 13px !important;
font-size: 11px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.header-actions a[href="/register"] {
min-width: 112px !important;
min-height: 38px !important;
padding: 0 14px !important;
font-size: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
}
.main-nav {
grid-column: 1 / 4 !important;
grid-row: 2 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 28px !important;
}
.main-nav a {
margin: 0 !important;
padding: 3px 0 !important;
font-size: 10px !important;
line-height: 1.15 !important;
white-space: nowrap !important;
}
}
/* ===== LANDSCAPE HEADER POLISH END ===== */
/* ===== PORTRAIT LOGIN HEADER START ===== */
@media (max-width: 759px) {
.topbar {
height: auto !important;
min-height: 76px !important;
}
.header-inner {
width: calc(100% - 20px) !important;
max-width: none !important;
margin: 0 auto !important;
padding: 9px 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
.logo-block {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: 185px !important;
margin: 0 !important;
transform: none !important;
}
.logo-block img {
width: 42px !important;
height: auto !important;
flex: 0 0 42px !important;
}
.logo-block strong {
display: block !important;
font-size: 17px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.logo-block small {
display: block !important;
margin-top: 3px !important;
font-size: 7px !important;
line-height: 1.1 !important;
letter-spacing: .8px !important;
white-space: nowrap !important;
}
.main-nav {
display: none !important;
}
.header-actions {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px !important;
}
.header-actions .aussie,
.aussie {
display: none !important;
}
.header-actions .login-btn,
.header-actions a[href="/login"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 57px !important;
min-height: 38px !important;
padding: 0 10px !important;
margin: 0 !important;
font-size: 10px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.header-actions a[href="/register"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 101px !important;
min-height: 38px !important;
padding: 0 11px !important;
margin: 0 !important;
font-size: 9px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
}
/* ===== PORTRAIT LOGIN HEADER END ===== */
/* ===== PORTRAIT MATCH HEADER BUTTONS START ===== */
@media (max-width: 759px) {
.header-actions .login-btn,
.header-actions a[href="/login"],
.header-actions a[href="/register"] {
width: 84px !important;
min-width: 84px !important;
max-width: 84px !important;
height: 38px !important;
min-height: 38px !important;
padding: 0 6px !important;
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
white-space: nowrap !important;
}
.header-actions .login-btn,
.header-actions a[href="/login"] {
font-size: 10px !important;
}
.header-actions a[href="/register"] {
font-size: 9px !important;
}
}
/* ===== PORTRAIT MATCH HEADER BUTTONS END ===== */
/* ===== COMMUNITY DISCORD LINK START ===== */
.community-discord-link {
color: #20DFFF !important;
font-weight: 800 !important;
text-decoration: none !important;
transition: color .18s ease, text-shadow .18s ease !important;
}
.community-discord-link:hover {
color: #FF3EC9 !important;
text-shadow: 0 0 10px rgba(255,62,201,.4) !important;
}
/* ===== COMMUNITY DISCORD LINK END ===== */
/* ===== PUBLIC DISCORD BUTTON START ===== */
.public-discord-button {
position: fixed !important;
right: 22px !important;
bottom: 22px !important;
z-index: 9998 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
min-height: 46px !important;
padding: 0 18px !important;
border: 1px solid rgba(124, 93, 255, .95) !important;
border-radius: 10px !important;
color: #ffffff !important;
background:
linear-gradient(
100deg,
rgba(88, 101, 242, .96),
rgba(145, 70, 255, .96)
) !important;
box-shadow:
0 0 18px rgba(88, 101, 242, .35),
0 0 32px rgba(145, 70, 255, .18) !important;
font-size: 12px !important;
font-weight: 900 !important;
letter-spacing: .7px !important;
text-decoration: none !important;
white-space: nowrap !important;
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease !important;
}
.public-discord-button svg {
width: 22px !important;
height: 22px !important;
fill: currentColor !important;
stroke: none !important;
}
.public-discord-button:hover {
transform: translateY(-2px) !important;
border-color: #20DFFF !important;
box-shadow:
0 0 22px rgba(88, 101, 242, .5),
0 0 35px rgba(32, 223, 255, .2) !important;
}
@media (max-width: 759px) {
.public-discord-button {
right: 12px !important;
bottom: 14px !important;
min-height: 42px !important;
padding: 0 13px !important;
font-size: 10px !important;
border-radius: 9px !important;
}
.public-discord-button svg {
width: 19px !important;
height: 19px !important;
}
}
/* ===== PUBLIC DISCORD BUTTON END ===== */