/* fonts.css */
@font-face {
font-family: 'Cinzel Variable';
font-style: normal;
font-display: swap;
font-weight: 400 900;
src: url(/assets/fonts/cinzel-latin-ext-wght-normal.woff2) format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Cinzel Variable';
font-style: normal;
font-display: swap;
font-weight: 400 900;
src: url(/assets/fonts/cinzel-latin-wght-normal.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Lilita One';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/fonts/lilita-one-latin-ext-400-normal.woff2) format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Lilita One';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/fonts/lilita-one-latin-400-normal.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Baloo 2 Variable';
font-style: normal;
font-display: swap;
font-weight: 400 800;
src: url(/assets/fonts/baloo-2-latin-ext-wght-normal.woff2) format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Baloo 2 Variable';
font-style: normal;
font-display: swap;
font-weight: 400 800;
src: url(/assets/fonts/baloo-2-latin-wght-normal.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Manrope Variable';
font-style: normal;
font-display: swap;
font-weight: 200 800;
src: url(/assets/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Manrope Variable';
font-style: normal;
font-display: swap;
font-weight: 200 800;
src: url(/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* tokens.css */
:root {
--gold-50: #fffbe0;
--gold-100: #fff3b0;
--gold-200: #ffe372;
--gold-300: #ffd23f;
--gold-400: #f7b51c;
--gold-500: #f29e0c;
--gold-600: #d97a06;
--gold-700: #b85a00;
--gold-800: #8a3d00;
--ink-900: #160828;
--ink-800: #24103d;
--ink-700: #3a1d57;
--ink-600: #563077;
--red-300: #f04a5a;
--red-500: #c4182e;
--red-600: #9e172b;
--red-700: #7a0f20;
--red-900: #560a17;
--green-300: #b6e02a;
--green-500: #6fb40f;
--green-700: #3a7a02;
--green-900: #1e3d00;
--navy-300: #4a6fe0;
--navy-500: #262f94;
--navy-700: #1b1352;
--navy-900: #0d0716;
--ice-300: #9ff7f4;
--ice-500: #38d6d8;
--fire-400: #ff9a3c;
--fire-500: #e26e26;
--wing-400: #8f63d6;
--wing-600: #4b2a86;
--parch-100: #f6e2bd;
--parch-200: #ecd09e;
--parch-300: #ddb878;
--parch-500: #b89a68;
--parch-700: #7a5a2c;
--page-bg: #02102d;
--page-bg-alt: #041a4a;
--text: #dfe6ff;
--text-soft: #9fb0dc;
--text-on-dark: #fffae0;
--font-display: 'Cinzel Variable', Georgia, 'Times New Roman', serif;
--font-ribbon: 'Lilita One', 'Baloo 2 Variable', system-ui, sans-serif;
--font-ui: 'Baloo 2 Variable', 'Manrope Variable', system-ui, sans-serif;
--font-body: 'Manrope Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--shadow-soft: 0 10px 30px -12px rgb(36 16 61 / 0.32);
--shadow-hard: 0 4px 0 var(--ink-800);
--container: 1200px;
--gutter: clamp(16px, 4vw, 32px);
--header-h: 76px;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
--glass: 52 66 140;
--glass-alpha: 0.18;
--glass-line: 140 170 255;
--deep: 7 17 43;
--shade: 2 8 30;
--popover: #101b45;
--raised-top: rgb(58 76 160);
--raised-bottom: rgb(28 38 100);
--bg-fallback-top: #020d2a;
--bg-fallback-bottom: #03174a;
--accent: 242 158 12;
--focus: var(--gold-300);
}
html[data-theme='santuario-dragao'] {
--page-bg: #0a1734;
--page-bg-alt: #151442;
--navy-300: #7789f4;
--navy-500: #332877;
--navy-700: #201649;
--navy-900: #0c0922;
--ice-300: #9bf7ff;
--ice-500: #16cfe9;
--wing-400: #bb85f2;
--wing-600: #622ca4;
--glass: 78 62 158;
--glass-alpha: 0.3;
--glass-line: 176 156 255;
--deep: 14 10 42;
--shade: 8 6 30;
--popover: #1a1446;
--raised-top: rgb(86 68 170);
--raised-bottom: rgb(42 30 104);
--bg-fallback-top: #120d38;
--bg-fallback-bottom: #0a1734;
}
html[data-theme='vila-encantada'] {
--page-bg: #051a26;
--page-bg-alt: #0a2433;
--glass: 34 62 96;
--glass-alpha: 0.42;
--glass-line: 120 214 210;
--deep: 3 20 28;
--shade: 2 14 22;
--popover: #0c2a38;
--raised-top: rgb(52 120 140);
--raised-bottom: rgb(22 66 86);
--bg-fallback-top: #1d0f3a;
--bg-fallback-bottom: #072232;
}
@media (max-width: 960px) {
:root {
--header-h: 64px;
}
}
/* base.css */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 16px;
}
html.has-smooth-scroll {
scroll-behavior: auto;
}
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100dvh;
overflow-x: hidden;
background-color: var(--page-bg);
background-image:
radial-gradient(90% 60% at 50% 0%, rgb(20 60 160 / 0.25), rgb(20 60 160 / 0) 70%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .7 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
color: var(--text);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
body > main {
flex: 1 0 auto;
}
body > .site-foot {
flex: none;
}
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(130% 95% at 50% 50%, rgb(0 0 0 / 0) 58%, rgb(0 2 12 / 0.5) 100%);
}
body.is-locked {
overflow: hidden;
}
img,
svg,
picture {
display: block;
max-width: 100%;
height: auto;
}
img,
picture,
svg,
video {
-webkit-user-drag: none;
user-select: none;
-webkit-user-select: none;
}
a {
color: inherit;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: 0;
padding: 0;
}
a,
button,
input,
[role='button'] {
-webkit-tap-highlight-color: transparent;
}
h1,
h2,
h3,
h4,
p {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
:focus-visible {
outline: 3px solid var(--gold-400);
outline-offset: 3px;
border-radius: 6px;
}
::selection {
background: var(--gold-300);
color: var(--ink-900);
}
[hidden] {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
top: 8px;
left: 8px;
z-index: 200;
padding: 10px 16px;
border-radius: var(--radius-sm);
background: var(--ink-800);
color: var(--text-on-dark);
font-family: var(--font-ui);
font-weight: 700;
text-decoration: none;
transform: translateY(-150%);
transition: transform 0.2s var(--ease-out);
}
.skip-link:focus {
transform: translateY(0);
}
.container {
width: 100%;
max-width: calc(var(--container) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.page-hero__bg,
.member__bg {
position: absolute;
inset: 0 0 auto;
height: clamp(360px, 32vw, 460px);
z-index: -1;
background:
linear-gradient(90deg, rgb(2 8 30 / 0.55) 0%, rgb(2 8 30 / 0.15) 60%),
url('/assets/themes/padrao/background/padrao.webp?v=1792820513') center 70% / cover no-repeat,
linear-gradient(180deg, #020d2a, #03174a);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
pointer-events: none;
}
/* components.css */
.btn {
--btn-h: 54px;
--btn-fs: 1.15rem;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55em;
min-height: var(--btn-h);
padding: 0 1.1em;
font-family: var(--font-ui);
font-size: var(--btn-fs);
font-weight: 800;
line-height: 1;
letter-spacing: 0.01em;
text-decoration: none;
text-align: center;
white-space: nowrap;
user-select: none;
transition:
transform 0.18s var(--ease-out),
filter 0.18s var(--ease-out);
}
.btn:hover {
filter: brightness(1.08) saturate(1.05);
transform: translateY(-2px);
}
.btn:active {
filter: brightness(0.96);
transform: translateY(1px) scale(0.985);
}
.btn:disabled,
.btn[aria-disabled='true'] {
filter: grayscale(1) brightness(0.9);
cursor: not-allowed;
transform: none;
}
.btn svg {
width: 1.15em;
height: 1.15em;
flex: none;
}
.btn--sm {
--btn-h: 42px;
--btn-fs: 0.98rem;
}
.btn--lg {
--btn-h: 66px;
--btn-fs: 1.4rem;
}
.btn--block {
display: flex;
width: 100%;
}
.btn-forge {
--f-top: #93c41c;
--f-mid: #4f9006;
--f-deep: #1f5c00;
--f-reflect: #8bb53e;
--f-rim: #dbe754;
--f-ink: #1e3d00;
--f-frame: calc(var(--btn-h) * 0.068);
position: relative;
isolation: isolate;
overflow: hidden;
padding-inline: 1.5em;
border: var(--f-frame) solid transparent;
border-radius: calc(var(--btn-h) * 0.3);
color: #fffbe0;
background:
radial-gradient(70% 22% at 50% 0%, color-mix(in srgb, var(--f-rim) 70%, transparent), transparent) padding-box,
radial-gradient(58% 26% at 50% 100%, var(--f-reflect), transparent) padding-box,
linear-gradient(
180deg,
var(--f-top) 0%,
var(--f-mid) 52%,
var(--f-deep) 80%,
color-mix(in srgb, var(--f-deep) 70%, var(--f-reflect)) 92%,
color-mix(in srgb, var(--f-deep) 40%, var(--f-reflect)) 100%
)
padding-box,
linear-gradient(180deg, #ffe27a 0%, #fbc63a 18%, #fbc032 50%, #eaa924 80%, #a8701f 100%) border-box;
box-shadow:
inset 0 0 0 1.5px #050600,
inset 0 -1.5px 0 1.5px #050600,
inset 0 0 0 3px color-mix(in srgb, var(--f-rim) 85%, transparent),
inset 0 -1.5px 0 3px color-mix(in srgb, var(--f-reflect) 90%, transparent),
inset 7px 0 5px -5px var(--f-rim),
inset -7px 0 5px -5px color-mix(in srgb, var(--f-rim) 80%, transparent),
0 0 0 1px #592400,
0 4px 8px -4px rgb(0 0 0 / 0.35);
text-shadow:
-1px -1px 0 var(--f-ink),
1px -1px 0 var(--f-ink),
-1px 1px 0 var(--f-ink),
1px 1px 0 var(--f-ink),
0 3px 0 var(--f-ink),
0 0 8px color-mix(in srgb, var(--f-ink) 60%, transparent);
}
.btn-forge::before {
content: '';
position: absolute;
z-index: -1;
top: 3px;
left: 5px;
right: 5px;
height: 48%;
border-radius: calc(var(--btn-h) * 0.3) calc(var(--btn-h) * 0.3) 40% 40% / calc(var(--btn-h) * 0.3) calc(var(--btn-h) * 0.3) 20% 20%;
background: linear-gradient(180deg, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0.04) 70%, rgb(255 255 255 / 0) 100%);
pointer-events: none;
}
.btn-forge::after {
content: '';
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: -60%;
width: 40%;
background: linear-gradient(100deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.35) 50%, rgb(255 255 255 / 0) 100%);
transform: skewX(-20deg);
pointer-events: none;
}
.btn-forge:hover::after {
animation: forge-shine 0.8s var(--ease-out);
}
.btn-forge:hover {
filter: brightness(1.08) saturate(1.08);
}
.btn-forge:active,
.social-card:active .social-card__cta {
transform: none;
filter: none;
padding-top: 3px;
box-shadow:
inset 0 0 0 1.5px #050600,
inset 0 -1.5px 0 1.5px #050600,
inset 0 0 0 3px color-mix(in srgb, var(--f-rim) 55%, transparent),
inset 0 -1.5px 0 3px color-mix(in srgb, var(--f-reflect) 60%, transparent),
inset 0 7px 12px -2px rgb(0 0 0 / 0.42),
inset 0 -4px 8px -4px rgb(0 0 0 / 0.25),
0 0 0 1px #592400,
0 4px 8px -4px rgb(0 0 0 / 0.35);
}
.btn-forge:hover:active {
transform: translateY(-2px);
filter: brightness(1.04) saturate(1.05);
}
.btn-forge:active::before,
.social-card:active .social-card__cta::before {
opacity: 0.35;
}
.btn-forge:active::after,
.social-card:active .social-card__cta::after {
animation: none;
}
@keyframes forge-shine {
to {
left: 130%;
}
}
.btn-forge--blue {
--f-top: #5aa2ff;
--f-mid: #1656c9;
--f-deep: #072c86;
--f-reflect: #6aa6ff;
--f-rim: #a9d6ff;
--f-ink: #021b5c;
}
.btn-forge--red {
--f-top: #f0442e;
--f-mid: #b8140a;
--f-deep: #6e0803;
--f-reflect: #f0705a;
--f-rim: #ffb39a;
--f-ink: #4a0500;
}
.btn-forge--purple {
--f-top: #a46cf0;
--f-mid: #6a2fc0;
--f-deep: #3a1180;
--f-reflect: #b28cff;
--f-rim: #dcc6ff;
--f-ink: #22074f;
}
.btn-forge--gold {
--f-top: #ffe066;
--f-mid: #f0a816;
--f-deep: #a95d06;
--f-reflect: #ffd36a;
--f-rim: #fff3b0;
--f-ink: #4f2400;
}
.btn-forge--steel {
--f-top: #8ea2c4;
--f-mid: #50628a;
--f-deep: #28344f;
--f-reflect: #a3b6d8;
--f-rim: #dbe5f8;
--f-ink: #10172a;
}
@media (prefers-reduced-motion: reduce) {
.btn-forge:hover::after {
animation: none;
}
}
.btn--icon {
width: var(--btn-h);
height: var(--btn-h);
padding: 0;
}
.btn--icon svg {
width: 1.25em;
height: 1.25em;
}
.orb {
--orb: 52px;
--orb-light: #ffe0a0;
--orb-mid: #f6a32e;
--orb-dark: #a8520a;
position: relative;
display: inline-grid;
place-items: center;
width: var(--orb);
height: var(--orb);
flex: none;
border-radius: 50%;
color: var(--ink-900);
background:
radial-gradient(ellipse 55% 35% at 50% 22%, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 70%),
radial-gradient(circle at 50% 65%, var(--orb-light) 0%, var(--orb-mid) 45%, var(--orb-dark) 100%);
box-shadow:
inset 0 -4px 6px rgb(0 0 0 / 0.25),
0 0 0 3px #f2c45a,
0 0 0 6px var(--ink-800),
0 8px 14px -4px rgb(0 0 0 / 0.45);
transition:
transform 0.2s var(--ease-back),
filter 0.2s;
}
.orb:hover {
transform: scale(1.08);
filter: brightness(1.08);
}
.orb:active {
transform: scale(0.95);
}
.orb svg {
width: 46%;
height: 46%;
}
.orb--red {
--orb-light: #ff8d6a;
--orb-mid: #e3241a;
--orb-dark: #8d0c05;
color: #fff6d5;
}
.orb--green {
--orb-light: #d8f56a;
--orb-mid: #6fb40f;
--orb-dark: #2a5c00;
color: #fff;
}
.orb--blue {
--orb-light: #8cb8ff;
--orb-mid: #2c63d6;
--orb-dark: #021b5c;
color: #fff;
}
.orb--sm {
--orb: 40px;
}
.orb--lg {
--orb: 68px;
}
.title-gold {
--fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Crect width='240' height='100' fill='%23ffffff'/%3E%3Cpath d='M0 53 L22 50 L48 54 L80 47 L112 52 L140 48 L176 54 L208 49 L240 53 V100 H0Z' fill='%23d6cffa'/%3E%3Cpath d='M0 61 C40 58 72 64 112 59 S182 63 240 61 V64 C190 66 130 62 90 66 S30 63 0 64Z' fill='%23f6f3ff'/%3E%3Cpath d='M0 68 L36 64 L74 69 L118 63 L160 68 L204 64 L240 68 V100 H0Z' fill='%23c2b6f4'/%3E%3Cpath d='M0 77 C46 74 94 80 140 75 S206 79 240 77 V100 H0Z' fill='%23d8cdfa'/%3E%3Cpath d='M0 87 C60 84 128 89 240 87 V100 H0Z' fill='%23efe9fe'/%3E%3C/svg%3E");
--bevel-1: #b3122e;
--bevel-2: #8d0c22;
--bevel-3: #6e0818;
display: inline-block;
margin: 0;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(2rem, 4.6vw, 3.4rem);
line-height: 1.06;
letter-spacing: 0.01em;
text-transform: uppercase;
white-space: pre-line;
color: transparent;
background-image: var(--fill);
background-size: 5.5em 1.06em;
background-repeat: repeat;
background-position: 0 0.04em;
-webkit-background-clip: text;
background-clip: text;
filter: drop-shadow(0 1px 0 var(--bevel-1)) drop-shadow(0 1px 0 var(--bevel-2)) drop-shadow(0 1px 0 var(--bevel-3))
drop-shadow(0 8px 16px rgb(0 0 0 / 0.5));
}
.title-gold em,
.title-gold--gold {
font-style: normal;
--fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Crect width='240' height='100' fill='%23fff8d6'/%3E%3Cpath d='M0 53 L22 50 L48 54 L80 47 L112 52 L140 48 L176 54 L208 49 L240 53 V100 H0Z' fill='%23f6c24a'/%3E%3Cpath d='M0 61 C40 58 72 64 112 59 S182 63 240 61 V64 C190 66 130 62 90 66 S30 63 0 64Z' fill='%23fff0b8'/%3E%3Cpath d='M0 68 L36 64 L74 69 L118 63 L160 68 L204 64 L240 68 V100 H0Z' fill='%23eba52a'/%3E%3Cpath d='M0 77 C46 74 94 80 140 75 S206 79 240 77 V100 H0Z' fill='%23f6c64e'/%3E%3Cpath d='M0 87 C60 84 128 89 240 87 V100 H0Z' fill='%23ffe39a'/%3E%3C/svg%3E");
}
.title-gold em {
background-image: var(--fill);
background-size: 5.5em 1.06em;
background-repeat: repeat;
background-position: 0 0.04em;
-webkit-background-clip: text;
background-clip: text;
}
.title-gold--fire {
background-size: 100% 1.06em;
--fill: linear-gradient(180deg, #fff3c4 0%, #ffc24a 45%, #f07a1a 80%, #ffb057 100%);
--bevel-1: #8a2a06;
--bevel-2: #6a1d03;
--bevel-3: #4a1200;
}
.title-gold--silver {
background-size: 100% 1.06em;
--fill: linear-gradient(180deg, #ffffff 0%, #e2f6ff 45%, #9fd8f2 62%, #effaff 100%);
--bevel-1: #1b3b8a;
--bevel-2: #132b68;
--bevel-3: #0b1c48;
}
.title-gold--sm {
font-size: clamp(1.3rem, 2.3vw, 1.65rem);
filter: drop-shadow(0 1px 0 var(--bevel-1)) drop-shadow(0 1px 0 var(--bevel-2)) drop-shadow(0 4px 8px rgb(0 0 0 / 0.45));
}
.title-gold--xl {
font-size: clamp(2.4rem, 6.6vw, 4.6rem);
}
.title-glow {
filter: drop-shadow(0 1px 0 var(--bevel-1)) drop-shadow(0 1px 0 var(--bevel-2)) drop-shadow(0 1px 0 var(--bevel-3))
drop-shadow(0 0 22px rgb(180 170 255 / 0.45));
}
.panel--parchment .title-gold,
.panel--parchment-dark .title-gold {
background-size: 100% 1.06em;
--fill: linear-gradient(180deg, #4a2a72 0%, #2b1247 100%);
--bevel-1: rgb(255 226 140 / 0.9);
--bevel-2: rgb(184 120 30 / 0.55);
--bevel-3: transparent;
filter: drop-shadow(0 1px 0 var(--bevel-1)) drop-shadow(0 1px 0 var(--bevel-2));
}
.title-stack {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.05em;
}
.title-stack .title-gold:first-child {
font-size: 0.5em;
}
.ribbon {
--ribbon-a: #e8301d;
--ribbon-b: #a40f06;
--ribbon-ink: #5c0700;
--notch: 0.7em;
position: relative;
display: inline-block;
padding: 0.42em calc(var(--notch) + 1em) 0.36em;
font-family: var(--font-ribbon);
font-size: clamp(1rem, 2.1vw, 1.35rem);
line-height: 1.1;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--gold-100);
background:
linear-gradient(180deg, rgb(255 255 255 / 0.28) 0, rgb(255 255 255 / 0) 45%),
linear-gradient(180deg, var(--ribbon-a), var(--ribbon-b));
clip-path: polygon(0 0, 100% 0, calc(100% - var(--notch)) 50%, 100% 100%, 0 100%, var(--notch) 50%);
box-shadow:
inset 0 3px 0 rgb(255 214 120 / 0.55),
inset 0 -3px 0 rgb(255 214 120 / 0.45),
inset 0 -7px 0 rgb(0 0 0 / 0.18);
text-shadow:
-1px -1px 0 var(--ribbon-ink),
1px -1px 0 var(--ribbon-ink),
-1px 1px 0 var(--ribbon-ink),
1px 1px 0 var(--ribbon-ink),
0 3px 0 var(--ribbon-ink);
}
.ribbon--navy {
--ribbon-a: #2c63d6;
--ribbon-b: #021b5c;
--ribbon-ink: #010a24;
}
.ribbon--green {
--ribbon-a: #8cc915;
--ribbon-b: #2f6a00;
--ribbon-ink: #143000;
}
.ribbon--gold {
--ribbon-a: #ffd23f;
--ribbon-b: #c86a00;
--ribbon-ink: #4f2004;
color: #fffbe0;
}
.kicker {
display: inline-flex;
align-items: center;
gap: 0.75em;
font-family: var(--font-ui);
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-700);
}
.kicker::before,
.kicker::after {
content: '';
width: 42px;
height: 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 10'%3E%3Cpath d='M0 5h30' stroke='%23b85a00' stroke-width='2'/%3E%3Cpath d='M36 0l5 5-5 5-5-5z' fill='%23f29e0c' stroke='%238a3d00'/%3E%3C/svg%3E")
center / contain no-repeat;
}
.kicker::before {
transform: scaleX(-1);
}
.kicker--light {
color: var(--gold-200);
}
.section-head {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
margin-bottom: clamp(32px, 5vw, 56px);
}
.section-head__lead {
max-width: 62ch;
color: var(--text-soft);
font-size: 1.05rem;
}
.section-head--left {
align-items: flex-start;
text-align: left;
}
.panel {
position: relative;
}
.panel--parchment {
--frame: clamp(52px, 8vw, 84px);
border: 18px solid transparent;
border-image: url('/assets/themes/padrao/btn-default/bg-with-character-2.webp?v=1792810266') 150 fill / var(--frame) / 0 stretch;
padding: clamp(12px, 2.5vw, 26px);
color: var(--ink-800);
--text: var(--ink-800);
--text-soft: var(--ink-700);
}
.panel--parchment-dark {
--frame: clamp(44px, 6vw, 64px);
border: 16px solid transparent;
border-image: url('/assets/themes/padrao/btn-default/bg-with-character.webp?v=1792810273') 120 fill / var(--frame) / 0 stretch;
padding: clamp(12px, 2.5vw, 26px);
color: var(--ink-800);
--text: var(--ink-800);
--text-soft: var(--ink-700);
}
.panel--navy {
border-radius: var(--radius-lg);
color: var(--text-on-dark);
background:
radial-gradient(120% 80% at 50% 0%, rgb(60 110 230 / 0.35), rgb(0 0 0 / 0) 60%),
linear-gradient(180deg, var(--navy-500), var(--navy-900));
box-shadow:
inset 0 0 0 2px rgb(120 160 255 / 0.25),
0 0 0 3px var(--navy-700),
0 0 0 5px #0b3cb3,
0 18px 30px -14px rgb(1 10 36 / 0.7);
padding: clamp(18px, 3vw, 30px);
}
.bar-navy {
border-style: solid;
border-color: transparent;
border-width: 0 34px;
border-image: url('/assets/themes/padrao/btn-default/nav-bg.webp?v=1792810254') 0 60 fill / 0 34px / 0 stretch;
}
.glass-bar {
border-radius: 10px;
background: rgb(52 66 140 / 0.28);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass-bar {
background: rgb(10 15 38 / 0.9);
}
}
.ornament {
display: block;
width: min(360px, 80%);
height: 18px;
margin-inline: auto;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 18'%3E%3Cpath d='M0 9h150M210 9h150' stroke='%23b85a00' stroke-width='2'/%3E%3Cpath d='M180 1l9 8-9 8-9-8z' fill='%23ffd23f' stroke='%238a3d00' stroke-width='1.5'/%3E%3Ccircle cx='158' cy='9' r='3' fill='%23f29e0c'/%3E%3Ccircle cx='202' cy='9' r='3' fill='%23f29e0c'/%3E%3C/svg%3E")
center / contain no-repeat;
}
.tag {
display: inline-flex;
align-items: center;
padding: 0.24em 0.65em;
border: 1px solid rgb(173 193 255 / 0.2);
border-left: 2px solid var(--tag-accent, #9fb0dc);
border-radius: 4px;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.35;
text-transform: uppercase;
white-space: nowrap;
color: #dce6ff;
background: rgb(7 17 43 / 0.76);
}
.tag--evento {
--tag-accent: #ee8060;
}
.tag--atualizacao {
--tag-accent: #8eb8ff;
}
.tag--manutencao {
--tag-accent: #a9b8d8;
}
.tag--promocao {
--tag-accent: #e9c36b;
}
.image-placeholder {
position: absolute;
inset: 0;
z-index: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
overflow: hidden;
padding: 22px;
color: #e1eaff;
border: 1px solid rgb(220 227 237 / 0.24);
background-color: #59636f;
background-image:
linear-gradient(135deg, rgb(255 255 255 / 0.06) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / 0.06) 50%, rgb(255 255 255 / 0.06) 75%, transparent 75%);
background-size: 28px 28px;
pointer-events: none;
}
.image-placeholder::before {
position: absolute;
inset: 14px;
border: 1px solid rgb(175 198 255 / 0.22);
content: '';
}
.image-placeholder::after {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgb(20 25 33 / 0.34), transparent 68%);
content: '';
}
.image-placeholder__mark {
position: absolute;
top: 50%;
left: 50%;
width: 48px;
height: 36px;
border: 2px solid rgb(241 245 250 / 0.58);
border-radius: 4px;
opacity: 0.72;
transform: translate(-50%, -50%);
}
.image-placeholder__mark::before {
position: absolute;
top: 5px;
right: 6px;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgb(241 245 250 / 0.72);
content: '';
}
.image-placeholder__mark::after {
position: absolute;
right: 4px;
bottom: 4px;
left: 4px;
height: 17px;
background: rgb(241 245 250 / 0.58);
clip-path: polygon(0 100%, 34% 38%, 54% 70%, 72% 43%, 100% 100%);
content: '';
}
.image-placeholder__label,
.image-placeholder__size {
position: relative;
z-index: 1;
display: block;
text-align: right;
}
.image-placeholder__label {
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #aebfe4;
}
.image-placeholder__size {
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.03em;
color: #f4f7ff;
}
.image-placeholder--thumb {
align-items: center;
justify-content: center;
padding: 4px;
}
.image-placeholder--thumb::before {
inset: 5px;
}
.image-placeholder--thumb .image-placeholder__mark {
width: 34px;
height: 26px;
}
.image-placeholder--thumb .image-placeholder__mark::after {
height: 12px;
}
.image-placeholder--thumb .image-placeholder__label,
.image-placeholder--thumb .image-placeholder__size {
text-align: center;
}
.image-placeholder--thumb .image-placeholder__label {
font-size: 0.5rem;
letter-spacing: 0.08em;
}
.image-placeholder--thumb .image-placeholder__size {
font-size: 0.61rem;
}
.medal {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
font-family: var(--font-ui);
font-weight: 800;
font-size: 0.95rem;
color: var(--ink-800);
background: radial-gradient(circle at 50% 30%, #fff 0, var(--parch-200) 40%, var(--parch-500) 100%);
box-shadow:
inset 0 -2px 0 rgb(0 0 0 / 0.2),
0 0 0 2px var(--parch-700);
}
.medal--1 {
background: radial-gradient(circle at 50% 30%, #fffbe0 0, var(--gold-300) 40%, var(--gold-700) 100%);
box-shadow:
inset 0 -2px 0 rgb(0 0 0 / 0.2),
0 0 0 2px var(--ink-800),
0 0 12px rgb(255 200 40 / 0.7);
}
.medal--2 {
background: radial-gradient(circle at 50% 30%, #fff 0, #d8e1ee 40%, #7b8aa3 100%);
box-shadow:
inset 0 -2px 0 rgb(0 0 0 / 0.2),
0 0 0 2px #2e3a52;
}
.medal--3 {
color: #fff6e8;
background: radial-gradient(circle at 50% 30%, #ffd2a6 0, #cd7f32 45%, #7a3f0c 100%);
box-shadow:
inset 0 -2px 0 rgb(0 0 0 / 0.2),
0 0 0 2px #4a2205;
}
.tabs {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
padding: 6px;
border-radius: 999px;
background: rgb(59 22 0 / 0.12);
box-shadow: inset 0 2px 4px rgb(59 22 0 / 0.2);
}
.tabs__btn {
padding: 0.5em 1.2em;
border-radius: 999px;
font-family: var(--font-ui);
font-weight: 800;
font-size: 0.95rem;
line-height: 1.2;
color: var(--ink-700);
transition:
background 0.2s,
color 0.2s,
box-shadow 0.2s;
}
.tabs__btn:hover {
background: rgb(255 255 255 / 0.4);
}
.tabs__btn[aria-selected='true'] {
color: var(--ink-800);
background: linear-gradient(180deg, var(--gold-100), var(--gold-400));
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.8),
0 0 0 2px var(--ink-800),
0 3px 0 var(--ink-800);
}
.field {
display: flex;
flex-direction: column;
gap: 5px;
}
.field__label {
font-family: var(--font-ui);
font-weight: 700;
font-size: 0.92rem;
color: var(--ink-700);
}
.field__control {
position: relative;
}
.field__input {
width: 100%;
min-height: 50px;
padding: 0 16px;
border: 2px solid var(--parch-500);
border-radius: 12px;
background: #fffaf0;
color: var(--ink-800);
font-family: var(--font-body);
font-weight: 600;
box-shadow: inset 0 3px 5px rgb(122 90 44 / 0.18);
transition:
border-color 0.2s,
box-shadow 0.2s;
}
.field__input::placeholder {
color: #a88b63;
font-weight: 500;
}
.field__input:focus {
outline: none;
border-color: var(--gold-600);
box-shadow:
inset 0 3px 5px rgb(122 90 44 / 0.18),
0 0 0 4px rgb(255 210 63 / 0.45);
}
.field__input[aria-invalid='true'] {
border-color: var(--red-600);
}
.field__error {
min-height: 1.1em;
font-size: 0.82rem;
font-weight: 700;
color: var(--red-700);
}
.field__toggle {
position: absolute;
top: 50%;
right: 10px;
translate: 0 -50%;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 8px;
color: var(--parch-700);
}
.field__toggle svg {
width: 20px;
height: 20px;
}
.check {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.86rem;
color: var(--ink-700);
cursor: pointer;
}
.check input {
appearance: none;
flex: none;
width: 22px;
height: 22px;
margin-top: 1px;
border: 2px solid var(--parch-700);
border-radius: 6px;
background: #fffaf0;
display: grid;
place-items: center;
cursor: pointer;
}
.check input:checked {
background: linear-gradient(180deg, #8cc915, var(--green-700));
border-color: var(--green-900);
}
.check input:checked::after {
content: '';
width: 6px;
height: 11px;
margin-top: -2px;
border: solid #fff;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.modal {
position: fixed;
inset: 0;
z-index: 120;
display: grid;
place-items: center;
padding: 24px 16px;
overflow-y: auto;
background: rgb(26 10 0 / 0.72);
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition:
opacity 0.25s,
visibility 0.25s;
}
.modal.is-open {
opacity: 1;
visibility: visible;
}
.modal__dialog {
position: relative;
width: min(460px, 100%);
margin: auto;
transform: translateY(24px) scale(0.96);
transition: transform 0.35s var(--ease-back);
}
.modal.is-open .modal__dialog {
transform: none;
}
.modal__body {
display: flex;
flex-direction: column;
gap: 8px;
}
.modal__head {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-bottom: 4px;
text-align: center;
}
.modal__close {
position: absolute;
top: -14px;
right: -10px;
z-index: 2;
width: 48px;
height: 48px;
transition: transform 0.2s var(--ease-back);
}
.modal__close:hover {
transform: rotate(90deg) scale(1.06);
}
.modal__char {
position: absolute;
pointer-events: none;
z-index: 2;
}
.modal__char--left {
left: -34px;
bottom: -18px;
width: 92px;
}
.modal__char--right {
right: -26px;
bottom: -14px;
width: 72px;
}
.modal__switch {
font-size: 0.9rem;
text-align: center;
color: var(--ink-700);
}
.modal__switch button {
font-weight: 800;
color: var(--red-600);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 520px) {
.modal__char {
display: none;
}
.modal__close {
top: -10px;
right: -4px;
width: 42px;
height: 42px;
}
}
.toaster {
position: fixed;
left: 50%;
bottom: 24px;
z-index: 150;
display: flex;
flex-direction: column;
gap: 10px;
width: min(420px, calc(100% - 32px));
translate: -50% 0;
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-radius: 14px;
color: var(--text-on-dark);
font-family: var(--font-ui);
font-weight: 700;
line-height: 1.3;
background: linear-gradient(180deg, var(--navy-500), var(--navy-900));
box-shadow:
0 0 0 2px var(--gold-400),
0 0 0 4px var(--ink-800),
0 14px 28px -10px rgb(0 0 0 / 0.6);
animation: toast-in 0.35s var(--ease-back) both;
pointer-events: auto;
}
.toast svg {
width: 26px;
height: 26px;
flex: none;
}
.toast--success svg {
color: #9be33a;
}
.toast--error svg {
color: #ff7a5c;
}
.toast.is-leaving {
animation: toast-out 0.25s ease-in both;
}
@keyframes toast-in {
from {
opacity: 0;
transform: translateY(16px) scale(0.95);
}
}
@keyframes toast-out {
to {
opacity: 0;
transform: translateY(10px);
}
}
.server-inquiry {
gap: 12px;
}
.server-inquiry__intro,
.server-inquiry__note,
.server-inquiry__status {
margin: 0;
overflow-wrap: anywhere;
}
.server-inquiry__intro { font-size: 0.95rem; }
.server-inquiry__note { color: var(--ink-700); font-size: 0.8rem; }
.server-inquiry__status { color: var(--ink-800); font-size: 0.9rem; font-weight: 700; }
.server-inquiry__status:empty { display: none; }
.card-loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 120px;
padding: 20px;
color: var(--text-soft);
font: 600 0.9rem/1.4 var(--font-ui);
text-align: center;
}
.card-loader__bar {
width: min(180px, 70%);
height: 4px;
overflow: hidden;
border-radius: 4px;
background: rgb(var(--glass-line) / 0.12);
}
.card-loader__bar::after {
content: '';
display: block;
width: 40%;
height: 100%;
border-radius: inherit;
background: var(--gold-300);
animation: card-loading 1.2s ease-in-out infinite alternate;
}
@keyframes card-loading {
to { transform: translateX(150%); }
}
.recharge-product.progressive-card,
.social-card.progressive-card,
.feature.progressive-card,
.news-row.progressive-card,
.char-card.progressive-card {
content-visibility: auto;
contain-intrinsic-size: auto 220px;
}
@media (prefers-reduced-motion: reduce) {
.card-loader__bar::after { animation: none; }
}
.reveal {
opacity: 0;
transform: translateY(26px);
transition:
opacity 0.7s var(--ease-out),
transform 0.7s var(--ease-out);
transition-delay: var(--delay, 0s);
}
.reveal--d1 {
--delay: 90ms;
}
.reveal--d2 {
--delay: 180ms;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
.no-js .reveal {
opacity: 1;
transform: none;
}
.field__hint {
font-size: 0.8rem;
line-height: 1.35;
color: var(--parch-700);
}
.form-notice {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border: 2px solid var(--green-500);
border-radius: var(--radius-sm);
background: rgb(182 224 42 / 0.22);
color: var(--green-900);
font-size: 0.88rem;
font-weight: 700;
line-height: 1.4;
animation: form-notice-in 0.3s var(--ease-out);
}
.form-notice[hidden],
[data-login-password][hidden],
[data-login-extra][hidden] {
display: none;
}
.form-notice svg {
flex: none;
width: 22px;
height: 22px;
margin-top: 1px;
color: var(--green-700);
}
@keyframes form-notice-in {
from {
opacity: 0;
transform: translateY(-6px);
}
}
@media (prefers-reduced-motion: reduce) {
.form-notice {
animation: none;
}
}
.turnstile {
display: flex;
justify-content: center;
min-height: 65px;
}
.turnstile:empty {
display: none;
}
.field-trap {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.pager {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 14px;
margin-top: 32px;
}
.pager:empty {
display: none;
}
.pager__pages {
display: flex;
align-items: center;
gap: 8px;
}
.pager__num {
font-size: 1rem;
}
.pager__num[aria-current='page'] {
cursor: default;
}
.pager__gap {
padding: 0 4px;
font-weight: 800;
color: #8f9cc8;
}
.pager__info {
flex-basis: 100%;
font-family: var(--font-ui);
font-size: 0.85rem;
font-weight: 700;
text-align: center;
color: #8f9cc8;
}
@media (max-width: 760px) {
.pager__arrow-label {
display: none;
}
.pager__arrow {
width: var(--btn-h);
padding: 0;
}
}
/* layout.css */
.site-header {
position: absolute;
inset: 0 0 auto;
z-index: 100;
padding: 14px var(--gutter) 0;
}
.site-header__inner {
display: flex;
align-items: center;
gap: clamp(10px, 1.6vw, 20px);
max-width: 1280px;
margin-inline: auto;
}
.nav__brand {
flex: none;
width: clamp(170px, 15vw, 214px);
filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.5));
}
.nav__brand img {
width: 100%;
}
.nav {
display: flex;
flex: 1;
align-items: center;
gap: 4px;
min-width: 0;
padding: 6px 6px 6px 10px;
transition: background 0.3s;
}
.nav__links {
display: flex;
align-items: center;
gap: 2px;
}
.nav__link {
position: relative;
display: inline-flex;
align-items: center;
padding: 13px clamp(12px, 1.3vw, 20px);
border-radius: 6px;
font-family: var(--font-ui);
font-size: 0.92rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: #dce4f5;
transition:
background 0.2s,
color 0.2s;
}
.nav__link:hover {
color: #fff;
background: linear-gradient(0deg, rgb(110 120 220 / 0.18) 0%, rgb(50 56 120 / 0.18) 100%);
}
.nav__link.is-active {
color: #fff;
}
.nav__link.is-active::after {
content: '';
position: absolute;
left: 50%;
top: 100%;
width: 16px;
height: 16px;
margin-top: -9px;
translate: -50% 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop stop-color='%23f29e0c'/%3E%3Cstop offset='1' stop-color='%23ffe372'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 4L0 12h5.3L8 9.3l2.7 2.7H16z' fill='url(%23g)'/%3E%3C/svg%3E")
center / contain no-repeat;
filter: drop-shadow(0 0 4px rgb(255 200 60 / 0.6));
}
.nav__actions {
display: flex;
align-items: center;
gap: clamp(12px, 1.6vw, 22px);
margin-left: auto;
padding-left: 8px;
}
.account-menu {
position: relative;
}
.account-menu__toggle {
gap: 10px;
}
.account-menu__arrow {
width: 8px;
height: 8px;
margin-top: -4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s var(--ease-out), margin 0.2s var(--ease-out);
}
.account-menu.is-open .account-menu__arrow {
margin-top: 4px;
transform: rotate(-135deg);
}
.account-menu__panel {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 60;
display: flex;
flex-direction: column;
min-width: 230px;
padding: 8px;
border-radius: var(--radius-md);
background: rgb(10 15 38 / 0.92);
box-shadow:
inset 0 0 0 1px rgb(140 170 255 / 0.18),
0 18px 34px -12px rgb(0 0 0 / 0.7);
-webkit-backdrop-filter: blur(14px) saturate(120%);
backdrop-filter: blur(14px) saturate(120%);
animation: menu-in 0.18s var(--ease-out);
}
.account-menu__panel[hidden] {
display: none;
}
.account-menu__coins {
margin: 0;
padding: 8px 12px 6px;
font-family: var(--font-ui);
font-weight: 700;
color: var(--text-soft);
}
.account-menu__coins strong {
font-size: 1.15rem;
color: var(--gold-200);
}
.account-menu__divider {
width: 100%;
height: 1px;
margin: 6px 0;
border: 0;
background: rgb(140 170 255 / 0.2);
}
.account-menu__item {
display: block;
width: 100%;
padding: 10px 12px;
border: 0;
border-radius: var(--radius-sm);
background: none;
color: var(--text);
font: 600 0.95rem/1.3 var(--font-body);
text-align: left;
text-decoration: none;
cursor: pointer;
}
.account-menu__item:hover,
.account-menu__item:focus-visible {
outline: none;
background: rgb(52 66 140 / 0.45);
color: var(--gold-100);
}
.account-menu__item--danger {
color: var(--red-300);
}
.account-menu__item--danger:hover,
.account-menu__item--danger:focus-visible {
background: rgb(196 24 46 / 0.22);
color: #ffd7dc;
}
.account-list {
display: grid;
gap: 10px;
}
.account-list .account-menu__coins {
padding: 0;
text-align: center;
color: var(--ink-700);
}
.account-list .account-menu__coins strong {
color: var(--gold-800);
}
.account-list .account-menu__divider {
margin: 0;
background: rgb(122 90 44 / 0.35);
}
.nav__mobile {
display: none;
}
.mobile-menu {
position: absolute;
top: calc(100% + 10px);
left: 12px;
right: 12px;
z-index: 99;
animation: menu-in 0.3s var(--ease-back);
}
.mobile-menu__list {
display: grid;
gap: 2px;
}
.mobile-menu__list a {
display: block;
padding: 12px 8px;
border-bottom: 1px dashed rgb(122 90 44 / 0.45);
font-family: var(--font-ribbon);
font-size: 1.15rem;
text-transform: uppercase;
text-decoration: none;
color: var(--ink-800);
}
.mobile-menu__actions {
display: grid;
gap: 10px;
margin-top: 16px;
}
@keyframes menu-in {
from {
opacity: 0;
transform: translateY(-12px) scale(0.98);
}
}
@media (max-width: 1180px) {
.nav__link {
padding-inline: 11px;
font-size: 0.86rem;
}
}
@media (max-width: 1060px) {
.nav {
flex: 0 0 auto;
margin-left: auto;
padding: 0;
border-radius: 0;
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.nav__links,
.nav__actions {
display: none;
}
.nav__mobile {
display: flex;
align-items: center;
gap: 14px;
margin-left: auto;
}
}
@media (max-width: 560px) {
.site-header {
padding-inline: 10px;
}
.nav__brand {
width: 132px;
}
.nav__mobile {
gap: 10px;
}
}
.section {
position: relative;
padding-block: clamp(56px, 8vw, 104px);
}
.section--paper {
position: relative;
background:
radial-gradient(70% 50% at 50% 0%, rgb(56 120 255 / 0.12), rgb(56 120 255 / 0) 70%),
rgb(4 26 74 / 0.6);
}
.section--paper::before,
.section--paper::after {
content: '';
position: absolute;
left: 50%;
width: min(760px, 86%);
height: 30px;
translate: -50% -50%;
opacity: 0.45;
pointer-events: none;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cg fill='rgb(150,172,255)'%3E%3Cpath d='M37 14 C28 8 16 5 4 9 C10 11 12 14 12 17 C16 15 19 16 21 19 C24 17 28 18 30 21 C32 20 35 21 36 24 Z'/%3E%3Cpath d='M43 14 C52 8 64 5 76 9 C70 11 68 14 68 17 C64 15 61 16 59 19 C56 17 52 18 50 21 C48 20 45 21 44 24 Z'/%3E%3Cpath d='M40 2 L43.5 6.5 L42.3 9.5 C43.6 14 43.4 24 41.4 30 C40.8 33 41.4 36 44.5 38 C40.2 38.4 38.4 35.2 38.9 31 C36.8 24 36.6 14 37.7 9.5 L36.5 6.5 Z'/%3E%3C/g%3E%3Cpath d='M38.2 4.2 L35.6 1.2 M41.8 4.2 L44.4 1.2' stroke='rgb(150,172,255)' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / auto 30px no-repeat,
linear-gradient(
90deg,
transparent 0%,
rgb(150 172 255 / 0.55) 38%,
transparent 45.5%,
transparent 54.5%,
rgb(150 172 255 / 0.55) 62%,
transparent 100%
)
center / 100% 1px no-repeat;
}
.section--paper::before {
top: 0;
}
.section--paper::after {
top: 100%;
}
.head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 12px 32px;
margin-bottom: clamp(24px, 3.5vw, 40px);
}
.head > div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.head__lead {
max-width: 46ch;
color: var(--text-soft);
}
.head__link {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-ui);
font-weight: 800;
text-decoration: none;
color: var(--gold-200);
}
.head__link svg {
width: 18px;
height: 18px;
transition: transform 0.2s;
}
.head__link:hover svg {
transform: translateX(3px);
}
.head__meta {
font-family: var(--font-ui);
font-weight: 700;
font-size: 0.9rem;
color: var(--parch-700);
}
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: calc(var(--header-h) + clamp(40px, 6vw, 72px)) 0 clamp(72px, 9vw, 120px);
}
.hero__bg {
position: absolute;
inset: 0;
z-index: -2;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgb(0 0 0 / 0.55) 80%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgb(0 0 0 / 0.55) 80%, transparent 100%);
pointer-events: none;
}
.hero__bg::before,
.hero__bg::after {
content: '';
position: absolute;
inset: 0;
}
.hero__bg::before {
background:
url('/assets/themes/padrao/background/padrao.webp?v=1792820513') center bottom / cover no-repeat,
linear-gradient(180deg, #020d2a, #03174a);
}
.hero__bg::after {
background:
linear-gradient(180deg, transparent 60%, var(--page-bg) 100%),
linear-gradient(90deg, rgb(2 8 30 / 0.6) 0%, rgb(2 8 30 / 0.25) 38%, rgb(2 8 30 / 0) 60%);
}
.hero__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(16px, 3vw, 48px);
}
.hero__copy {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.hero__copy .title-gold {
font-size: clamp(1.7rem, 3.4vw, 3.2rem);
}
.hero__lead {
max-width: 50ch;
font-size: 1.08rem;
color: #d9e2ff;
text-shadow: 0 2px 10px rgb(2 8 30 / 0.7);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 6px;
}
.countdown[hidden] {
display: none;
}
.countdown {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
.countdown__label {
font-family: var(--font-ui);
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold-200);
text-shadow: 0 2px 8px rgb(2 8 30 / 0.7);
}
.countdown__units {
display: flex;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.countdown__unit {
display: flex;
flex-direction: column;
align-items: center;
min-width: 64px;
padding: 8px 10px 6px;
border: 1px solid rgb(255 227 114 / 0.35);
border-radius: var(--radius-md);
background: linear-gradient(180deg, rgb(38 47 148 / 0.55), rgb(13 7 22 / 0.7));
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), var(--shadow-soft);
}
.countdown__value {
font-family: var(--font-ribbon);
font-size: 1.8rem;
line-height: 1;
color: var(--text-on-dark);
font-variant-numeric: tabular-nums;
}
.countdown__name {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-soft);
}
.hero__art {
position: relative;
isolation: isolate;
margin-right: calc(var(--gutter) * -1);
}
.hero__figure {
position: relative;
}
.hero__render {
width: 100%;
filter: drop-shadow(0 26px 30px rgb(0 4 20 / 0.55));
}
html[data-assets='santuario-dragao'] .hero__render {
width: 123%;
max-width: none;
margin-left: -11.5%;
}
.hero__shine {
position: absolute;
height: auto;
mix-blend-mode: screen;
opacity: 0;
pointer-events: none;
will-change: opacity, filter;
}
.hero__shine--ice {
left: 0.071%;
top: 3.553%;
width: 35.429%;
animation: pulse-ice 3.4s ease-in-out infinite;
}
.hero__shine--fire {
left: 3.857%;
top: 50.888%;
width: 33.143%;
transform-origin: 85% 30%;
animation: pulse-fire 2.6s ease-in-out infinite;
}
@keyframes pulse-ice {
0%,
100% {
opacity: 0;
filter: brightness(1) drop-shadow(0 0 0 rgb(56 214 216 / 0));
}
50% {
opacity: 0.75;
filter: brightness(1.35) drop-shadow(0 0 14px rgb(120 240 255 / 0.85));
}
}
@keyframes pulse-fire {
0%,
100% {
opacity: 0;
transform: scale(1);
filter: brightness(1) drop-shadow(0 0 0 rgb(255 140 40 / 0));
}
45% {
opacity: 0.8;
transform: scale(1.015);
filter: brightness(1.3) drop-shadow(0 0 16px rgb(255 150 50 / 0.9));
}
60% {
opacity: 0.6;
}
}
.hero__glow {
position: absolute;
z-index: -1;
border-radius: 50%;
filter: blur(46px);
pointer-events: none;
}
.hero__glow--ice {
top: -2%;
left: 0;
width: 42%;
aspect-ratio: 1.3;
background: radial-gradient(circle, var(--ice-500), transparent 70%);
opacity: 0.35;
animation: halo 3.4s ease-in-out infinite;
}
.hero__glow--fire {
bottom: 2%;
left: 2%;
width: 38%;
aspect-ratio: 1.2;
background: radial-gradient(circle, var(--fire-500), transparent 70%);
opacity: 0.35;
animation: halo 2.6s ease-in-out infinite;
}
@keyframes halo {
50% {
opacity: 0.6;
}
}
@media (prefers-reduced-motion: reduce) {
.asset-animation {
animation: none;
}
}
html[data-asset-animations='off'] .asset-animation {
animation: none !important;
}
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.hero__bg::before {
animation: hero-parallax-bg linear both;
animation-timeline: scroll(root);
animation-range: 0 100vh;
}
.hero__art {
animation: hero-parallax-art linear both;
animation-timeline: scroll(root);
animation-range: 0 100vh;
}
}
}
@keyframes hero-parallax-bg {
to {
transform: translate3d(0, 30vh, 0);
}
}
@keyframes hero-parallax-art {
to {
transform: translate3d(0, -10vh, 0);
}
}
@media (max-width: 960px) {
.hero__bg::after {
background:
linear-gradient(180deg, transparent 58%, var(--page-bg) 100%),
linear-gradient(180deg, rgb(2 8 30 / 0) 30%, rgb(2 8 30 / 0.45) 60%, rgb(2 8 30 / 0) 85%);
}
.hero__inner {
grid-template-columns: minmax(0, 1fr);
}
.hero__art {
animation: none !important;
order: -1;
width: min(100%, 620px);
margin: 0 auto -8px;
}
.hero__copy {
align-items: center;
text-align: center;
}
.hero__actions,
.countdown__units {
justify-content: center;
}
.countdown {
align-items: center;
}
.hero__bg {
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgb(0 0 0 / 0.55) 86%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgb(0 0 0 / 0.55) 86%, transparent 100%);
}
}
@media (max-width: 480px) {
.hero__actions .btn {
flex: 1 1 100%;
}
}
.banner-slider {
--banner-w: min(700px, 56vw);
overflow: hidden;
padding-block: 8px 4px;
}
.banner-slider__stage {
position: relative;
height: calc(var(--banner-w) * 0.5);
min-height: 320px;
touch-action: pan-y;
user-select: none;
}
.banner-slider__stage:focus-visible {
outline: none;
}
.banner-slider__stage:focus-visible .banner[data-pos='center'] {
outline: 3px solid var(--gold-300);
outline-offset: 4px;
}
.banner-slider__list {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
list-style: none;
}
.banner {
position: absolute;
top: 0;
left: 50%;
width: var(--banner-w);
height: 100%;
display: flex;
align-items: flex-end;
overflow: hidden;
border-radius: var(--radius-lg);
background: #0b1939;
box-shadow:
inset 0 0 0 1px rgb(255 255 255 / 0.25),
0 0 0 2px var(--gold-500),
0 0 0 4px #2a1705,
0 30px 50px -24px rgb(0 0 0 / 0.85);
translate: -50% 0;
transition:
transform 0.6s var(--ease-out),
opacity 0.6s var(--ease-out),
filter 0.6s var(--ease-out);
will-change: transform;
}
.banner::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, rgb(6 6 24 / 0.82) 0%, rgb(6 6 24 / 0.55) 45%, rgb(6 6 24 / 0) 75%),
linear-gradient(0deg, rgb(6 6 24 / 0.5) 0%, rgb(6 6 24 / 0) 50%);
pointer-events: none;
}
.banner[data-pos='center'] {
z-index: 3;
transform: translateX(0) scale(1);
}
.banner[data-pos='prev'],
.banner[data-pos='next'] {
z-index: 2;
opacity: 0.55;
filter: brightness(0.6) saturate(0.8);
cursor: pointer;
}
.banner[data-pos='prev'] {
transform: translateX(-61%) scale(0.72);
}
.banner[data-pos='next'] {
transform: translateX(61%) scale(0.72);
}
.banner[data-pos='prev']:hover,
.banner[data-pos='next']:hover {
opacity: 0.75;
filter: brightness(0.75);
}
.banner[data-pos='hidden-prev'],
.banner[data-pos='hidden-next'] {
z-index: 1;
opacity: 0;
pointer-events: none;
}
.banner[data-pos='hidden-prev'] {
transform: translateX(-120%) scale(0.65);
}
.banner[data-pos='hidden-next'] {
transform: translateX(120%) scale(0.65);
}
.banner__body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
max-width: 64%;
padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) clamp(44px, 5vw, 56px);
color: #fff;
transition: opacity 0.4s;
}
.banner:not([data-pos='center']) .banner__body {
opacity: 0;
}
.banner__meta {
display: flex;
align-items: center;
gap: 10px;
}
.banner__date {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: 0.88rem;
font-weight: 700;
color: #e4e8ff;
}
.banner__date svg {
width: 16px;
height: 16px;
}
.banner__title {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.7vw, 1.55rem);
font-weight: 800;
line-height: 1.15;
text-transform: uppercase;
text-shadow: 0 3px 12px rgb(0 0 0 / 0.6);
}
.banner__excerpt {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
max-width: 46ch;
font-size: 0.98rem;
color: #e9ecff;
text-shadow: 0 2px 8px rgb(0 0 0 / 0.6);
}
.banner__cta {
margin-top: 6px;
}
.banner-slider__arrow {
position: absolute;
top: 50%;
z-index: 4;
translate: 0 -50%;
}
.banner-slider__arrow:hover {
transform: translateY(-2px);
}
.banner-slider__arrow--prev {
left: calc(50% - var(--banner-w) / 2 - 26px);
}
.banner-slider__arrow--next {
right: calc(50% - var(--banner-w) / 2 - 26px);
}
.banner-slider__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 22px;
}
.banner-slider__dot {
width: 10px;
height: 10px;
border-radius: 99px;
background: rgb(140 170 255 / 0.25);
transition:
width 0.3s var(--ease-out),
background 0.3s;
}
.banner-slider__dot:hover {
background: rgb(140 170 255 / 0.5);
}
.banner-slider__dot.is-active {
width: 28px;
background: linear-gradient(90deg, var(--gold-500), var(--gold-200));
box-shadow: 0 0 10px rgb(255 200 60 / 0.5);
}
@media (max-width: 900px) {
.banner-slider {
--banner-w: 80vw;
}
.banner__body {
max-width: 70%;
}
}
html[data-assets='santuario-dragao'] .hero__shine {
display: none;
}
@media (max-width: 600px) {
.banner-slider {
--banner-w: 82vw;
}
.banner-slider__stage {
height: 400px;
}
.banner {
align-items: flex-end;
}
.banner::before {
background: linear-gradient(0deg, rgb(6 6 24 / 0.9) 0%, rgb(6 6 24 / 0.55) 55%, rgb(6 6 24 / 0.1) 100%);
}
.banner__body {
max-width: 100%;
padding: 20px;
}
.banner__excerpt {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.banner[data-pos='prev'] {
transform: translateX(-88%) scale(0.86);
}
.banner[data-pos='next'] {
transform: translateX(88%) scale(0.86);
}
.banner-slider__arrow {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.banner {
transition: none;
}
}
.features {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.feature {
--feature-accent: 109 155 255;
--glow: rgb(var(--feature-accent) / 0.35);
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
align-items: center;
gap: 16px;
padding: 22px;
}
.feature--arena { --feature-accent: 108 151 255; }
.feature--pets { --feature-accent: 171 140 234; }
.feature--duel { --feature-accent: 234 186 96; }
.feature--style { --feature-accent: 218 141 167; }
.feature--rewards { --feature-accent: 116 189 192; }
.feature--spa { --feature-accent: 112 193 205; }
.feature__media {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
overflow: hidden;
border-radius: 50%;
background: rgb(var(--deep) / 0.4);
box-shadow: 0 0 0 1px rgb(var(--feature-accent) / 0.3);
}
.feature__image {
display: block;
flex: none;
width: auto;
height: auto;
max-width: none;
object-fit: none;
object-position: center;
transform: scale(0.5);
}
.feature > div {
min-width: 0;
overflow-wrap: anywhere;
}
.feature__title {
margin: 0 0 8px;
font-family: var(--font-ui);
font-size: 1rem;
line-height: 1.35;
font-weight: 800;
color: var(--text-on-dark);
}
.feature__text {
margin: 0;
font-size: 0.875rem;
line-height: 1.65;
color: var(--text-soft);
}
@media (max-width: 1000px) {
.features {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.features {
grid-template-columns: minmax(0, 1fr);
}
}
.socials-section {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
align-items: center;
gap: clamp(24px, 4vw, 56px);
}
.socials-section__art {
position: relative;
isolation: isolate;
}
.socials-section__art::before {
content: '';
position: absolute;
inset: 8% 6%;
z-index: -1;
border-radius: 50%;
background:
radial-gradient(circle at 40% 45%, rgb(56 214 216 / 0.28), transparent 60%),
radial-gradient(circle at 60% 60%, rgb(143 99 214 / 0.32), transparent 65%);
filter: blur(30px);
}
.socials-section__art img {
width: 100%;
max-width: 520px;
margin-inline: auto;
filter: drop-shadow(0 24px 28px rgb(0 0 0 / 0.55));
}
.head--stack {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.social-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.feature,
.social-card {
border-radius: var(--radius-lg);
background: rgb(52 66 140 / 0.18);
box-shadow: inset 0 0 0 1px rgb(140 170 255 / 0.14);
}
.social-card {
--glow: rgb(255 255 255 / 0.2);
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
height: 100%;
padding: 22px 16px 20px;
text-align: center;
text-decoration: none;
}
.feature::before,
.social-card::before {
content: '';
position: absolute;
top: 10px;
left: 50%;
z-index: -1;
width: 130px;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, var(--glow), transparent 68%);
translate: -50% 0;
opacity: 0.6;
}
.feature::before {
top: 50%;
left: 62px;
width: 120px;
translate: -50% -50%;
}
.social-card--facebook {
--glow: rgb(40 110 255 / 0.55);
}
.social-card--instagram {
--glow: rgb(220 60 180 / 0.55);
}
.social-card--whatsapp {
--glow: rgb(40 200 90 / 0.5);
}
.social-card__icon {
width: clamp(92px, 9vw, 124px);
height: auto;
margin-bottom: 6px;
filter: drop-shadow(0 12px 14px rgb(0 0 0 / 0.5));
}
.social-card__name {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}
.social-card__text {
flex: 1;
font-size: 0.9rem;
color: var(--text-soft);
}
.social-card__cta {
margin-top: 10px;
pointer-events: none;
}
@property --border-angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.feature::after,
.social-card::after,
.spin-border::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
padding: 2px;
border-radius: inherit;
background: conic-gradient(
from var(--border-angle),
rgb(255 210 63 / 0.32) 0deg,
rgb(255 210 63 / 0.32) 190deg,
var(--gold-300) 255deg,
#fff6cf 295deg,
var(--gold-300) 335deg,
rgb(255 210 63 / 0.32) 360deg
);
filter: drop-shadow(0 0 6px rgb(255 200 60 / 0.55));
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box exclude,
linear-gradient(#000 0 0);
opacity: 0;
pointer-events: none;
transition: opacity 0.35s var(--ease-out);
}
.feature:hover::after,
.feature:focus-visible::after,
.social-card:hover::after,
.social-card:focus-visible::after,
.spin-border:hover::after,
.spin-border:focus-visible::after {
opacity: 1;
animation: border-spin 4s linear infinite;
}
@keyframes border-spin {
to {
--border-angle: 360deg;
}
}
@media (prefers-reduced-motion: reduce) {
.feature:hover::after,
.feature:focus-visible::after,
.social-card:hover::after,
.social-card:focus-visible::after,
.spin-border:hover::after,
.spin-border:focus-visible::after {
animation: none;
background: rgb(255 210 63 / 0.6);
}
}
@media (max-width: 960px) {
.socials-section {
grid-template-columns: minmax(0, 1fr);
}
.socials-section__art img {
max-width: 360px;
}
.head--stack {
align-items: center;
text-align: center;
}
}
@media (max-width: 600px) {
.social-cards {
grid-template-columns: minmax(0, 1fr);
}
.social-card {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
'icon name'
'icon text'
'icon cta';
justify-items: start;
column-gap: 16px;
padding: 16px;
text-align: left;
}
.social-card::before {
top: 50%;
left: 62px;
width: 110px;
translate: -50% -50%;
}
.social-card__icon {
grid-area: icon;
width: 92px;
margin: 0;
align-self: center;
}
.social-card__name {
grid-area: name;
}
.social-card__text {
grid-area: text;
}
.social-card__cta {
grid-area: cta;
margin-top: 6px;
}
}
.support-section {
padding-top: clamp(80px, 10vw, 140px);
}
.support {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
align-items: end;
gap: clamp(16px, 3vw, 40px);
padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px);
border-radius: 28px;
background:
radial-gradient(60% 90% at 85% 100%, rgb(143 99 214 / 0.55), transparent 70%),
radial-gradient(50% 70% at 0% 0%, rgb(56 214 216 / 0.16), transparent 70%),
linear-gradient(135deg, #2b2a8f 0%, #1d1863 45%, #120d3d 100%);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.14),
inset 0 0 0 1px rgb(160 150 255 / 0.22),
0 30px 60px -30px rgb(0 0 0 / 0.9);
}
.support::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
opacity: 0.07;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M14 18h34a6 6 0 0 1 6 6v16a6 6 0 0 1-6 6H28l-10 8v-8h-4a6 6 0 0 1-6-6V24a6 6 0 0 1 6-6z'/%3E%3Cpath d='M70 70h34a6 6 0 0 1 6 6v14a6 6 0 0 1-6 6h-4v8l-10-8H70a6 6 0 0 1-6-6V76a6 6 0 0 1 6-6z'/%3E%3C/g%3E%3C/svg%3E")
0 0 / 120px 120px;
-webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
pointer-events: none;
}
.support__body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.support .title-gold {
font-size: clamp(1.7rem, 3.3vw, 2.7rem);
}
.support__lead {
max-width: 54ch;
color: #d5dafb;
}
.support__actions {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 12px;
width: 100%;
max-width: 560px;
margin-top: 6px;
}
.support__cta {
--btn-h: 60px;
--btn-fs: 1.12rem;
width: 100%;
padding-inline: 0.8em;
}
.support__cta svg {
width: 1.4em;
height: 1.4em;
}
.support__art {
position: relative;
align-self: stretch;
min-height: 320px;
}
.support__art img {
position: absolute;
z-index: 1;
right: 50%;
bottom: calc(clamp(28px, 4vw, 52px) * -1);
translate: 50% 0;
width: auto;
max-width: none;
height: min(calc(100% + clamp(28px, 4vw, 52px) + clamp(40px, 5vw, 80px)), 500px);
pointer-events: none;
filter: drop-shadow(0 22px 26px rgb(0 0 0 / 0.55));
}
@media (max-width: 860px) {
.support {
grid-template-columns: minmax(0, 1fr);
padding-top: 0;
}
.support__art {
order: -1;
min-height: 0;
margin: -110px auto 0;
width: min(300px, 76%);
}
.support__art img {
position: relative;
right: auto;
bottom: auto;
translate: none;
width: 100%;
height: auto;
}
.support__body {
align-items: center;
text-align: center;
}
.support__actions {
max-width: 560px;
margin-inline: auto;
}
}
@media (max-width: 480px) {
.support__actions {
grid-template-columns: minmax(0, 1fr);
}
}
.site-foot {
margin-top: clamp(32px, 5vw, 56px);
}
.foot-card {
background: linear-gradient(180deg, #010a1f 0%, #000716 100%);
box-shadow: inset 0 1px 0 rgb(140 170 255 / 0.1);
}
.foot-card__inner {
display: flex;
flex-direction: column;
gap: 22px;
padding-block: clamp(28px, 4vw, 40px) 24px;
}
.foot-card__top {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 28px 48px;
}
.foot-card__about {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 300px;
}
.foot-card__brand {
width: 160px;
}
.foot-card__desc {
margin: 0;
font-size: 0.88rem;
line-height: 1.6;
color: #7f8db5;
}
.foot-card__cols {
display: grid;
grid-template-columns: repeat(3, minmax(0, max-content));
justify-content: end;
gap: 28px clamp(32px, 5vw, 72px);
}
.foot-col__title {
margin: 0 0 14px;
font-family: var(--font-ui);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7f8db5;
}
.foot-col__list {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.foot-col__link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-ui);
font-weight: 800;
font-size: 0.95rem;
text-decoration: none;
color: #c6d0ee;
transition: color 0.2s;
}
.foot-col__link:hover,
.foot-col__link:focus-visible {
color: var(--gold-200);
}
.foot-col__partner {
display: block;
width: 140px;
opacity: 0.85;
transition:
opacity 0.2s,
transform 0.2s var(--ease-out);
}
.foot-col__partner:hover,
.foot-col__partner:focus-visible {
opacity: 1;
transform: translateY(-2px);
}
.foot-col__partner img {
display: block;
width: 100%;
height: auto;
}
.foot-card__legal {
padding-top: 18px;
border-top: 1px solid rgb(140 170 255 / 0.1);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 24px;
font-size: 0.82rem;
color: #7f8db5;
}
.foot-card__credit {
display: inline-flex;
align-items: center;
gap: 0.45em;
}
.foot-card__credit-link {
display: inline-flex;
color: inherit;
transition: color 0.2s ease;
}
.foot-card__credit-link:hover,
.foot-card__credit-link:focus-visible {
color: #a9b5d8;
}
.foot-card__credit-logo {
display: block;
width: auto;
height: 1.35em;
flex-shrink: 0;
}
@media (max-width: 860px) {
.foot-card__top {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.foot-card__about {
align-items: center;
}
.foot-card__cols {
grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
justify-content: center;
justify-items: center;
width: 100%;
}
.foot-card__legal {
flex-direction: column;
text-align: center;
}
}
.modal__close.orb {
position: absolute;
top: -14px;
right: -12px;
width: var(--orb);
height: var(--orb);
}
.modal__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.modal__link {
font-size: 0.88rem;
font-weight: 800;
color: var(--red-600);
}
.field__optional {
font-weight: 500;
color: var(--parch-700);
}
/* legal.css */
.legal-page {
padding-bottom: clamp(48px, 8vw, 96px);
background: radial-gradient(ellipse at 75% 8%, rgb(52 66 140 / 0.18), transparent 48%);
}
.legal-hero {
padding-top: calc(var(--header-h) + clamp(32px, 6vw, 72px));
padding-bottom: 36px;
}
.legal-crumbs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
font-size: 0.85rem;
color: var(--text-soft);
}
.legal-crumbs a,
.legal-document a,
.legal-related,
.legal-index a {
color: inherit;
text-underline-offset: 4px;
}
.legal-eyebrow {
margin-bottom: 12px;
font-family: var(--font-ui);
font-weight: 700;
color: var(--gold-200);
}
.legal-hero h1 {
font-size: clamp(1.8rem, 4.5vw, 3.6rem);
}
.legal-lead {
max-width: 62ch;
margin-top: 16px;
color: var(--text);
}
.legal-date {
margin-top: 16px;
font-size: 0.85rem;
color: var(--text-soft);
}
.legal-layout {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
align-items: start;
gap: 28px;
}
.legal-sidebar {
position: sticky;
top: calc(var(--header-h) + 24px);
max-height: calc(100dvh - var(--header-h) - 48px);
overflow-y: auto;
}
.legal-index,
.legal-document {
padding: 24px;
border-radius: var(--radius-lg);
background: rgb(52 66 140 / 0.18);
box-shadow: inset 0 0 0 1px rgb(140 170 255 / 0.14);
}
.legal-index h2 {
margin-bottom: 14px;
font-family: var(--font-display);
font-size: 1rem;
color: #fff;
}
.legal-index ol {
display: grid;
gap: 4px;
list-style: none;
padding: 0;
margin: 0;
font-size: 0.85rem;
line-height: 1.5;
color: var(--text-soft);
}
.legal-index a {
display: block;
padding: 8px 10px;
border-left: 2px solid transparent;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
text-decoration: none;
}
.legal-index a[aria-current='location'] {
border-left-color: var(--gold-200);
background: rgb(140 170 255 / 0.1);
color: var(--gold-100);
font-weight: 700;
}
.legal-related {
display: block;
padding: 20px 12px;
font-size: 0.9rem;
color: var(--gold-100);
}
.legal-document {
min-width: 0;
padding: clamp(24px, 4vw, 44px);
overflow-wrap: anywhere;
line-height: 1.85;
}
.legal-operator {
padding-bottom: 24px;
border-bottom: 1px solid rgb(140 170 255 / 0.14);
color: var(--text-soft);
}
.legal-document section {
margin-top: 32px;
scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal-document h2 {
margin-bottom: 14px;
font-family: var(--font-display);
font-size: clamp(1.05rem, 2vw, 1.3rem);
line-height: 1.5;
color: var(--gold-100);
}
.legal-document p + p,
.legal-document ul + p {
margin-top: 14px;
}
.legal-document ul {
display: grid;
gap: 10px;
list-style: disc;
padding-left: 22px;
margin-block: 16px;
}
.legal-document a {
color: var(--gold-100);
}
.legal-back {
display: inline-block;
margin-top: 32px;
font-size: 0.9rem;
}
.legal-page a:focus-visible {
outline: 2px solid var(--gold-200);
outline-offset: 4px;
border-radius: 3px;
}
@media (max-width: 900px) {
.legal-layout {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.legal-sidebar {
position: static;
max-height: none;
overflow-y: visible;
}
.legal-index ol {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 24px;
}
}
@media (max-width: 480px) {
.legal-index ol {
grid-template-columns: minmax(0, 1fr);
}
}