/* =========================================================================
ARCA DE NOÉ — tema CSS skeumórfico (madeira + água)
v2.0 — sincronizado com arcadenoe-1.0.json (template_set_version 2.0)
-------------------------------------------------------------------------
Como usar:
1. Importe este arquivo no seu HTML:
2. Envolva o topo da página com
3. Envolva o rodapé com
4. Dê ao (ou a um container) a classe "sea-bg" para o fundo de água
5. Use ".plate" para placas de madeira menores (títulos, botões, cards)
6. (Opcional) escolha uma paleta com data-theme="sunrise|deep-sea|rainforest"
no ou — sem o atributo, usa a paleta "ocean" (padrão)
Tudo aqui é gerado só com gradientes/CSS — não depende de nenhuma imagem.
========================================================================= */
:root {
/* --- madeira --- */
--wood-shadow: #3d2210;
--wood-dark: #6b3f1d;
--wood-mid: #8b5a2b;
--wood-light: #c68642;
--wood-glow: #e8b27d;
--wood-line: rgba(0, 0, 0, 0.25);
/* --- água --- */
--water-deep: #075a80;
--water-mid: #1596c9;
--water-light: #4fc3e8;
--water-foam: #bdeeff;
/* --- acentos (placas / letreiros) --- */
--gold: #f4b942;
--gold-dark: #c9861a;
--cream: #fbf3e2;
--bolt: #2b2320;
/* --- título (pode ser sobrescrito por página, ex.: título de marca) --- */
--title-color: var(--gold);
/* --- tipografia --- */
--font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
--font-size: 16px;
/* --- geometria reutilizável --- */
--plank-height: clamp(76px, 12vw, 140px);
--grain-size: 6px;
--radius-panel: 14px;
}
/* ---------------------------------------------------------------------
PALETAS DE COR — troque com data-theme="sunrise|deep-sea|rainforest"
no ou . Sem o atributo (ou data-theme="ocean"), usa os
valores padrão definidos acima em :root.
--------------------------------------------------------------------- */
[data-theme="sunrise"] {
--water-deep: #0b4f71;
--water-mid: #1596c9;
--water-light: #72d9f2;
--wood-mid: #9a5d2a;
--wood-dark: #633717;
--wood-light: #d18a42;
--gold: #ffd166;
--gold-dark: #c98212;
}
[data-theme="deep-sea"] {
--water-deep: #06324c;
--water-mid: #0b6f9d;
--water-light: #38bdf8;
--wood-mid: #825126;
--wood-dark: #4b2b14;
--wood-light: #b87838;
--gold: #f8c24e;
--gold-dark: #9f6814;
}
[data-theme="rainforest"] {
--water-deep: #064e3b;
--water-mid: #0f8f82;
--water-light: #67e8d4;
--wood-mid: #7a4e24;
--wood-dark: #422713;
--wood-light: #bc7a3a;
--gold: #f7d36a;
--gold-dark: #9d6f18;
}
/* ---------------------------------------------------------------------
RESET LEVE
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font-family);
font-size: var(--font-size);
color: var(--cream);
}
input, select, textarea, button,
td, th, p, ul, li, div, span {
font-family: var(--font-family);
}
/* ---------------------------------------------------------------------
TEXTURA DE MADEIRA (mixin visual reaproveitável)
Combina:
- um degradê horizontal para dar volume à tábua (efeito cilíndrico)
- repeating-linear-gradient fininho para veio da madeira
- box-shadow inset para o brilho/sombra que "levanta" a peça da tela
--------------------------------------------------------------------- */
.wood-texture {
background-color: var(--wood-mid);
background-image:
/* veio da madeira, linhas finas horizontais */
repeating-linear-gradient(
90deg,
rgba(0,0,0,0.06) 0px,
rgba(0,0,0,0.06) 1px,
transparent 1px,
transparent var(--grain-size)
),
/* nós/variação de tom ao longo da tábua */
repeating-linear-gradient(
100deg,
rgba(255,255,255,0.03) 0%,
rgba(0,0,0,0.05) 3%,
rgba(255,255,255,0.02) 6%
),
/* volume: mais claro no centro, mais escuro nas bordas (tábua "redonda") */
linear-gradient(
180deg,
var(--wood-light) 0%,
var(--wood-mid) 35%,
var(--wood-dark) 100%
);
box-shadow:
inset 0 3px 0 rgba(255,255,255,0.15),
inset 0 -6px 10px rgba(0,0,0,0.35);
}
/* ---------------------------------------------------------------------
TÁBUAS (header / footer) — a "moldura de madeira" da página
--------------------------------------------------------------------- */
.plank {
position: relative;
min-height: var(--plank-height);
padding: 1.25rem 2rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.plank::before { /* linha entre as tábuas empilhadas */
content: "";
position: absolute;
left: 0; right: 0;
height: 10px;
background: linear-gradient(180deg, rgba(0,0,0,0.35), transparent);
}
.plank--top {
border-bottom: 4px solid var(--wood-shadow);
border-radius: 18px 18px 0 0;
}
.plank--top::before { bottom: -10px; }
.plank--bottom {
border-top: 4px solid var(--wood-shadow);
border-radius: 0 0 18px 18px;
}
.plank--bottom::before { top: -10px; transform: rotate(180deg); }
/* parafusos/rebites decorativos nos cantos da tábua */
.plank .bolt {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, #6b6862 0%, var(--bolt) 55%, #000 100%);
box-shadow:
0 1px 2px rgba(0,0,0,0.6),
inset 0 1px 1px rgba(255,255,255,0.25);
}
.plank .bolt--tl { top: 14px; left: 18px; }
.plank .bolt--tr { top: 14px; right: 18px; }
.plank .bolt--bl { bottom: 14px; left: 18px; }
.plank .bolt--br { bottom: 14px; right: 18px; }
/* ---------------------------------------------------------------------
FUNDO DE ÁGUA — camadas de radial-gradient estáticas simulando
reflexos/caustics do mar, sobre um degradê azul de profundidade,
com uma fina camada de "ondas" por cima (::after).
--------------------------------------------------------------------- */
.sea-bg {
position: relative;
background-color: var(--water-mid);
background-image:
radial-gradient(ellipse 60% 40% at 20% 30%, rgba(255,255,255,0.18), transparent 60%),
radial-gradient(ellipse 50% 35% at 80% 60%, rgba(255,255,255,0.12), transparent 60%),
radial-gradient(ellipse 70% 50% at 50% 90%, rgba(255,255,255,0.10), transparent 60%),
linear-gradient(180deg, var(--water-light) 0%, var(--water-mid) 45%, var(--water-deep) 100%);
background-size: 200% 200%, 220% 220%, 250% 250%, 100% 100%;
}
/* "ondas" finas por cima, feitas só de gradiente repetido */
.sea-bg::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
115deg,
rgba(255,255,255,0.05) 0px,
rgba(255,255,255,0.05) 2px,
transparent 2px,
transparent 14px
);
mix-blend-mode: overlay;
}
/* espuma/onda ondulada na junção entre madeira e água (efeito "splash") */
.wave-divider {
display: block;
width: 100%;
height: clamp(24px, 4vw, 48px);
margin-top: -1px;
fill: var(--water-mid);
filter: drop-shadow(0 -2px 3px rgba(0,0,0,0.15));
}
/* ---------------------------------------------------------------------
MOLDURA DE PÁGINA (opcional) — cabeçalho com marca/logo centralizado,
pensado para envolver .plank--top + conteúdo + .plank--bottom.
--------------------------------------------------------------------- */
.ark-page {
position: relative;
z-index: 1;
width: min(100% - 28px, 980px);
margin: 22px auto 34px;
}
.ark-brand {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
text-align: center;
}
.ark-brand.has-logo:not(.title-hidden) {
flex-direction: column;
gap: 10px;
}
.ark-brand.title-hidden,
.ark-brand.no-logo {
justify-content: center;
}
.custom-logo {
display: block;
max-width: 96px;
height: auto;
filter: drop-shadow(0 4px 5px rgba(0,0,0,0.28));
}
/* ---------------------------------------------------------------------
PLACAS MENORES (.plate) — reaproveita a mesma madeira para
títulos, botões e cartões dentro do conteúdo
--------------------------------------------------------------------- */
.plate {
display: inline-block;
padding: 0.6em 1.4em;
border-radius: var(--radius-panel);
border: 3px solid var(--wood-shadow);
color: var(--cream);
font-weight: 800;
letter-spacing: 0.03em;
text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.plate.wood-texture { }
/* variante para títulos de seção em largura total (ex.: ) */
.plate--block {
display: block;
width: 100%;
text-align: center;
}
/* botão de madeira interativo, com "afundar" no clique */
.plate--button {
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.plate--button:hover { transform: translateY(-2px); }
.plate--button:active {
transform: translateY(1px);
box-shadow: inset 0 4px 8px rgba(0,0,0,0.45);
}
/* título estilo "esculpido" (letras com relevo dourado, contorno grosso) */
.title-carved {
margin: 0;
font-family: "Baloo 2", "Fredoka", var(--font-family);
font-weight: 800;
color: var(--title-color);
-webkit-text-stroke: 2px var(--gold-dark);
paint-order: stroke fill;
text-shadow:
0 4px 0 var(--gold-dark),
0 6px 8px rgba(0,0,0,0.45);
line-height: 0.98;
font-size: clamp(2rem, 6vw, 4.2rem);
overflow-wrap: anywhere;
}
/* cartão flutuante sobre a água (ex.: para conteúdo/animais/textos) */
.card-float {
background: rgba(255,255,255,0.94);
color: #22343a;
border-radius: var(--radius-panel);
padding: clamp(18px, 4vw, 34px);
box-shadow: 0 14px 28px rgba(0,0,0,0.25);
border: 2px solid rgba(255,255,255,0.55);
}
/* variante "rente" ao encaixar direto sob/sobre uma .plank (sem cantos arredondados) */
.card-float--flush {
border-radius: 0;
}
/* ---------------------------------------------------------------------
RESPONSIVO
--------------------------------------------------------------------- */
@media (max-width: 640px) {
.ark-page { width: min(100% - 18px, 980px); margin-top: 10px; }
.plank { padding: 1rem; }
.ark-brand,
.ark-brand.has-logo:not(.title-hidden) { flex-direction: column; }
.custom-logo { max-width: 78px; }
}