/* ========================================================================== RAGNAROK CLASSIC IDLE — TOKENS DE DESIGN Toda cor, fonte, espaço e sombra do site nasce aqui. Mudar a identidade visual do projeto é mexer neste arquivo, em mais nenhum. ========================================================================== */ /* ---------------------------------------------------------------- fontes -- */ /* 03/09/2026: as DUAS faces do design system oficial (Marcellus no titulo, Figtree na interface), hospedadas aqui — zero requisicao a terceiro. Baixadas do Google Fonts em dois subconjuntos (latin e latin-ext) com o `unicode-range` original: o navegador so pede o arquivo que o texto usa. Cinzel, Inter e Press Start 2P sairam do repositorio. Marcellus so existe em 400. `font-synthesis: style` no body impede o navegador de inventar um negrito falso para ela (o italico continua permitido, para a Figtree). */ @font-face { font-family: 'Figtree'; src: url('../assets/fonts/figtree-latin-ext.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; 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; /* latin-ext, 10 KB */ } @font-face { font-family: 'Figtree'; src: url('../assets/fonts/figtree-latin.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; 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; /* latin, 20 KB */ } @font-face { font-family: 'Marcellus'; src: url('../assets/fonts/marcellus-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; 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; /* latin-ext, 9 KB */ } @font-face { font-family: 'Marcellus'; src: url('../assets/fonts/marcellus-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; 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; /* latin, 14 KB */ } /* ---------------------------------------------------------------- tokens -- */ :root { /* ====================================================================== PROVENIENCIA ---------------------------------------------------------------------- Os valores marcados (DS) vem do design system OFICIAL do jogo ("Ragnarok Idle Design System", claude.ai/design, projeto 06d4890d-b958-471d-93bd-a45b804fffbb), que por sua vez leu boa parte deles do proprio cliente. Sao a LEI: nao invente ouro novo aqui. Os valores sem marca sao a camada de SUPERFICIE do portal, exclusiva do site. O DS sanciona vidro escuro para o que fica sobre o mundo, e uma landing de tela cheia sobre key art e exatamente esse caso. Ver DESIGN-SYSTEM.md. ====================================================================== */ /* --- Superficies: a tela de titulo classica --- O azul e SATURADO, nao quase-preto. A tela de entrada do Ragnarok original e noite azul-royal sobre Prontera, e a diferenca entre um #070a14 (que le como preto) e um #0a1234 (que le como azul) e o que separa "MMO sombrio generico" de "Ragnarok". Continua escuro o bastante para o texto claro ficar confortavel por cima. A familia desce do --blue-900 do DS (#12294a) ate o noturno. */ --bg-void: #060b22; --bg-900: #0a1234; --bg-800: #13204c; --bg-700: #1c2e66; --bg-600: #273d80; --panel: rgba(10, 18, 52, .90); --panel-hi: rgba(28, 46, 102, .94); --sunken: rgba(3, 6, 20, .72); /* Vidro escuro do DS: o que fica POR CIMA da arte (assinatura, chip, capsula de leitura). Nao e o mesmo que --panel — este deixa ver. */ --glass-dark: rgba(18, 41, 74, .58); /* (DS) surface-dark-glass */ --blur-glass: blur(10px); /* (DS) */ --blur-glass-strong: blur(18px); /* (DS) */ /* --- Azul de acao --- O accent do proprio cliente. E a cor de "isto e clicavel e do jogo", ao lado do ouro, que e a cor de "isto e moldura / premium". */ --accent: #3a6ea5; /* (DS) blue-500 */ --accent-strong: #245c9e; /* (DS) blue-600 */ --accent-soft: #6d9bcb; /* (DS) blue-400 */ --accent-deep: #12294a; /* (DS) blue-900 */ /* --- Ouro: molduras, titulos, acao primaria --- Alinhado ao DS. O ouro anterior (#e8c14f) era mais limao e nao batia com a moldura de MVP que o proprio cliente desenha. */ --gold: #e0b04d; /* (DS) gold-400 */ --gold-hi: #f0d89b; /* (DS) gold-300 */ --gold-pale: #f6e9c4; /* (DS) gold-200 — texto sobre arte */ --gold-deep: #c9a227; /* (DS) gold-500 — aro, borda de MVP */ --gold-dk: #8a6a18; /* (DS) gold-700 */ --gold-ink: #2a1e05; /* texto sobre ouro solido */ --gold-a35: rgba(201, 162, 39, .35); --gold-a15: rgba(201, 162, 39, .15); /* --- Jade: gemas, status online, ganhos --- */ --emerald: #3fc890; --emerald-dk: #14805e; --emerald-a30: rgba(63, 200, 144, .30); /* --- Semanticos de jogo --- HP/SP/EXP vem do DS. ATENCAO: EXP e VERDE — nao roxa, nao dourada. E o degrade que a barra do cliente realmente usa. */ --hp: #d8443c; /* (DS) meio do hp-fill */ --sp: #2e6fd1; /* (DS) meio do sp-fill */ --exp: #7fc24a; /* (DS) meio do exp-fill */ --zeny: #d8a72a; /* (DS) */ --danger: #b13b3b; /* (DS) red-600 */ --success: #2e7d32; /* (DS) green-600 */ --warn: #b3611c; /* (DS) amber-600 */ /* Os tres acima sao de PREENCHIMENTO e BORDA — vieram do DS na faixa 600, que e escura de proposito. Como TEXTO sobre a superficie noturna do portal eles ficam abaixo do contraste legivel, entao a versao clara vive aqui e e da camada do site. Use `--danger` para a borda do recado e `--danger-text` para a letra dele. */ --danger-text: #f0a08e; --success-text: #a9d494; --warn-text: #e8bd7a; /* Texto corrido SOBRE a arte — um degrau mais frio e mais suave que o `--text` de interface. Estava escrito à mão em dois lugares (a linha do hero e a da seção dividida) antes de virar token. */ --text-soft: #cfd6e6; /* Degrades de barra, verbatim do DS. */ --hp-fill: linear-gradient(180deg, #ef7c72 0%, #d8443c 48%, #a92b26 100%); --sp-fill: linear-gradient(180deg, #7fb2f0 0%, #2e6fd1 48%, #1c4b98 100%); --exp-fill: linear-gradient(180deg, #d6ee8f 0%, #7fc24a 50%, #4f8f2a 100%); --bar-track: #22304a; /* (DS) */ /* --- Cor de identidade de classe (camada do site) --- Nao vem do DS: o design system oficial nao tem paleta de classe. Ficam aqui para nao sobrar hex solto no config.js. Entram no palco como --class-accent, sobrescrito por classe. */ --cls-espadachim: #d8443c; --cls-arqueiro: #3fc890; --cls-mago: #4aa3ff; --cls-acolito: #f0d89b; --cls-mercador: #d8a72a; --cls-ladrao: #c77dff; /* --- Raridade de drop --- */ --r-comum: #9aa6c4; --r-raro: #4aa3ff; --r-epico: #c77dff; --r-lendario: #f2a33c; /* --- Texto --- O secundario puxa para o azul junto com o fundo: cinza neutro sobre azul saturado le como sujeira. */ --text: #eae7dd; --muted: #97a6cc; --dim: #63719c; /* --- Tipografia --- 03/09/2026, pedido do dono: as faces do design system oficial. Marcellus no display, Figtree na interface. */ --f-epic: 'Marcellus', 'Palatino Linotype', Georgia, serif; /* (DS) display */ --f-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* (DS) UI */ /* Apelido legado: o que ainda pedir a fonte de pixel recebe a de interface. O DS nao tem essa face, e os rotulos que a usavam ja subiram para 11-12px (abaixo disso so uma fonte de pixel e legivel). */ --f-pixel: var(--f-ui); /* Escala tipografica fluida — encolhe sozinha no celular, sem media query. */ /* piso de 12px: abaixo disso o celular pede zoom. Era .72rem (11,5px). */ --t-xs: clamp(.75rem, .73rem + .1vw, .80rem); --t-sm: clamp(.84rem, .80rem + .2vw, .92rem); --t-md: clamp(.95rem, .90rem + .25vw, 1.05rem); --t-lg: clamp(1.10rem, 1.02rem + .4vw, 1.30rem); --t-xl: clamp(1.40rem, 1.20rem + 1vw, 2.00rem); --t-2xl: clamp(1.90rem, 1.50rem + 2vw, 3.00rem); --t-3xl: clamp(2.60rem, 1.80rem + 4vw, 5.20rem); /* Pesos nomeados do DS — use estes, nao numero solto. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --ls-title: .02em; /* (DS) */ --ls-caps: .08em; /* (DS) */ /* --- Ritmo: escala de 4pt --- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px; --s32: 128px; /* --- Forma --- (DS) "Nada quadrado, nada mais arredondado que 8px, exceto pilula." Os nomes antigos continuam valendo; o que mudou foi o valor. */ --r-card: 4px; /* (DS) radius-card */ --r-panel: 6px; /* (DS) radius-panel */ --r-window: 8px; /* (DS) radius-window */ --r-bar: 3px; /* (DS) radius-bar */ --r-sm: var(--r-card); --r-md: var(--r-panel); --r-lg: var(--r-window); --r-pill: 999px; /* --- Luz e profundidade --- (DS) "Sombra AZUL, nunca preta." Preto sobre azul saturado suja; o azul-escuro afunda sem lavar a cor da superficie. */ --shadow-sm: 0 1px 2px rgba(12, 34, 64, .45); --shadow-md: 0 6px 18px rgba(12, 34, 64, .55); --shadow-panel: 0 10px 28px rgba(12, 34, 64, .62); --shadow-inset: inset 0 1px 2px rgba(12, 34, 64, .45); --rim-gold: inset 0 0 0 1px rgba(240, 216, 155, .75); /* (DS) */ --glow-gold: 0 0 0 1px rgba(201, 162, 39, .60), 0 0 16px rgba(224, 176, 77, .45); /* (DS) */ --glow-accent: 0 0 0 2px rgba(58, 110, 165, .28), 0 0 14px rgba(110, 170, 240, .55); /* (DS) */ --glow-emerald: 0 0 16px rgba(63, 200, 144, .45); /* --- Estrutura --- */ --container: 1200px; --header-h: 72px; --gutter: clamp(16px, 4vw, 40px); --hit-touch: 44px; /* (DS) alvo de toque minimo */ /* --- Tempo --- (DS) "Curto, sem quique." O --ease-out-back fica so para o revelar da carta ampliada; nao use em estado de controle. */ --instant: .09s; /* (DS) dur-instant */ --fast: .15s; /* (DS) dur-fast */ --base: .22s; /* (DS) dur-base */ --slow: .38s; /* (DS) dur-slow */ --ease: cubic-bezier(.22, .61, .36, 1); /* (DS) ease-out */ --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* (DS) */ --ease-out-back: cubic-bezier(.34, 1.4, .64, 1); --press-shift: translateY(1px); /* (DS) */ } /* (DS) Desabilitado NAO e cinza chapado: e dessaturacao do proprio elemento. E o padrao do cliente (filter: grayscale(1)). */ [disabled], [aria-disabled="true"], .is-disabled { filter: grayscale(1); opacity: .55; } /* --------------------------------------------------------------- cursor -- */ /* A mão entra em tudo que responde ao clique. O pointer fica de reserva: se o PNG não carregar, o cursor ainda muda — o que não pode é a mão sumir e o visitante não saber que aquilo é clicável. */ a[href], button, label, summary, [role="tab"], [role="button"] { cursor: url('../assets/img/cursor-mao.png') 0 2, pointer; } /* Campo de texto continua com o cursor de texto do sistema: a barra vertical diz onde a letra vai entrar, e o RO não tem esse desenho. */ input:not([type="radio"]):not([type="checkbox"]), textarea { cursor: text; } /* Desabilitado não recebe a mão — ele não responde ao clique. */ [disabled], [aria-disabled="true"], .is-disabled { cursor: url('../assets/img/cursor-seta.png') 0 0, not-allowed; } /* ------------------------------------------------------------------ base -- */ body { font-family: var(--f-ui); font-synthesis: style; /* sem negrito falso na Marcellus (so tem 400) */ font-size: var(--t-md); color: var(--text); background: var(--bg-void); cursor: url('../assets/img/cursor-seta.png') 0 0, default; /* Céu noturno: clareia de leve no topo e volta ao breu no rodapé. */ background-image: radial-gradient(ellipse 120% 70% at 50% -10%, #1e3070 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 80% 100%, #14235a 0%, transparent 65%); background-attachment: fixed; } /* ========================================================================== FUNDO DO SITE -------------------------------------------------------------------------- Três camadas fixas atrás de tudo, montadas em
: 1. cena — a vista de Rune-Midgard: serras em profundidade, Prontera num pico, mata fechando a frente e Yggdrasil na lateral. Desenho original em SVG (assets/img/midgard.svg), gerado por deslocamento de ponto médio e ramificação recursiva. 2. aurora — faixas verde e violeta que respiram devagar. Ragnarök é mito nórdico; aurora boreal é o céu daquele mundo. 3. véu — escurecimento por cima da cena. É ele que mantém o texto legível, e é o mesmo truque que os sites oficiais usam sobre a arte principal. Para trocar a cena por uma arte pintada de verdade, aponte `CONFIG.siteBackground` para a imagem: ela entra no lugar do SVG, em tela cheia, com o véu por cima. Nada mais precisa mudar. ========================================================================== */ .site-bg { position: fixed; inset: 0; z-index: -10; pointer-events: none; overflow: hidden; } .site-bg__scene, .site-bg__aurora, .site-bg__veil { position: absolute; inset: 0; } /* Fora do hero a cena vira só textura de profundidade: presente o bastante para o fundo não ser liso, discreta o bastante para não roubar leitura. */ .site-bg__scene { background: var(--site-scene, url('../assets/img/midgard.svg')) center bottom / cover no-repeat; opacity: .30; } /* Era aurora boreal em verde e violeta. A justificativa mitológica existia, mas a tela de título original não tem aurora nenhuma: tem um céu azul com brilho quente no horizonte, de entardecer sobre Prontera. Trocado por esse par — azul frio em cima, ouro morno embaixo. A animação fica: é o que impede o fundo de parecer imagem parada. */ .site-bg__aurora { background: radial-gradient(ellipse 75% 45% at 22% 2%, rgba(88, 138, 240, .13), transparent 64%), radial-gradient(ellipse 70% 40% at 78% 10%, rgba(120, 165, 255, .09), transparent 62%), radial-gradient(ellipse 90% 30% at 50% 42%, rgba(232, 193, 79, .06), transparent 70%); animation: aurora 26s ease-in-out infinite alternate; } /* O véu é o que separa "fundo bonito" de "texto ilegível". Leve no topo, onde a cena precisa aparecer; pesado embaixo, onde mora o conteúdo denso. É o mesmo degradê que os sites oficiais usam sobre a arte. */ .site-bg__veil { background: linear-gradient(180deg, rgba(6, 11, 34, .30) 0%, rgba(6, 11, 34, .62) 45%, rgba(6, 11, 34, .88) 80%, rgba(6, 11, 34, .96) 100%); } @keyframes aurora { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.06); opacity: .78; } 100% { transform: translate3d(-2%, -1%, 0) scale(1.02); opacity: .92; } } @media (prefers-reduced-motion: reduce) { .site-bg__aurora { animation: none; } } /* ------------------------------------------------------- utilitários base -- */ .epic { font-family: var(--f-epic); font-weight: 700; letter-spacing: .02em; } .pixel { font-family: var(--f-pixel); font-weight: 400; letter-spacing: 0; line-height: 1.5; } /* Texto em ouro escovado — para títulos, nunca para corpo pequeno. */ .gold-text { background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-dk) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Fallback: se o clipping de texto falhar, o texto ainda aparece em ouro. */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .gold-text { background: none; color: var(--gold); } } .muted { color: var(--muted); } .dim { color: var(--dim); } /* ----------------------------------------------------------- animações -- */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes pulse-gem { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px var(--emerald)); } 50% { opacity: .55; filter: drop-shadow(0 0 14px var(--emerald)); } } @keyframes fade-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes blink { 50% { opacity: .25; } } /* ENTRADA POR ROLAGEM — o JS poe .is-visible quando o elemento entra na tela. A duracao e maior que a das transicoes de controle (--slow serve a botao, nao a bloco de conteudo): 560ms com saida desacelerada da a leitura de "assentar", e nao de "piscar". */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 560ms var(--ease), transform 560ms var(--ease), filter 560ms var(--ease); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; filter: none; } /* De onde o bloco entra. O sentido carrega significado: as duas colunas de "quem faz o que" entram uma de cada lado, porque sao um par em oposicao. */ .reveal--esq { transform: translate3d(-34px, 0, 0); } .reveal--dir { transform: translate3d(34px, 0, 0); } .reveal--zoom { transform: scale(.9); } .reveal--foco { transform: translateY(14px); filter: blur(8px); } /* Escalonamento em cascata. Vai ate 8 porque a maior grade da pagina tem nove cards. */ .reveal[data-delay="1"] { transition-delay: .07s; } .reveal[data-delay="2"] { transition-delay: .14s; } .reveal[data-delay="3"] { transition-delay: .21s; } .reveal[data-delay="4"] { transition-delay: .28s; } .reveal[data-delay="5"] { transition-delay: .35s; } .reveal[data-delay="6"] { transition-delay: .42s; } .reveal[data-delay="7"] { transition-delay: .49s; } .reveal[data-delay="8"] { transition-delay: .56s; } /* ENTRADA DO HERO, no carregamento. Nao depende de rolagem: e a primeira coisa que a pessoa ve, e chegar montado de uma vez e mais pobre do que assentar em ordem (marca, texto, botao). */ @keyframes entra-de-baixo { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .hero__title { animation: entra-de-baixo .85s var(--ease) .05s backwards; } .hero__rule { animation: entra-de-baixo .85s var(--ease) .20s backwards; } .hero__lead { animation: entra-de-baixo .85s var(--ease) .30s backwards; } .hero__cta { animation: entra-de-baixo .85s var(--ease) .42s backwards; } .hero__platforms{ animation: entra-de-baixo .85s var(--ease) .54s backwards; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; filter: none; } .hero__title, .hero__rule, .hero__lead, .hero__cta, .hero__platforms { animation: none; } }