/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
html { overflow-x: clip; }
body {
background: var(--bg);
color: var(--ink);
font-family: "Inter", system-ui, sans-serif;
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
position: relative;
width: 100%;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
/* ---------- Theme: FORJA (default) ---------- */
:root,
[data-palette="forja"] {
--bg: oklch(0.11 0.012 40);
--bg-deep: oklch(0.07 0.01 40);
--surface: oklch(0.15 0.015 35);
--surface-2: oklch(0.19 0.018 35);
--line: oklch(0.28 0.02 40 / 0.6);
--line-soft: oklch(0.28 0.02 40 / 0.25);
--ink: oklch(0.94 0.015 80);
--ink-2: oklch(0.78 0.02 70);
--ink-3: oklch(0.58 0.02 60);
--ember: oklch(0.7 0.18 45);
--ember-deep: oklch(0.55 0.18 35);
--gold: oklch(0.82 0.13 85);
--gold-deep: oklch(0.65 0.12 75);
--accent: var(--ember);
--accent-glow: oklch(0.7 0.18 45 / 0.45);
--grain-opacity: 0.06;
}
/* ---------- Theme: SELO (variation B) ---------- */
[data-palette="selo"] {
--bg: oklch(0.13 0.04 25);
--bg-deep: oklch(0.08 0.035 22);
--surface: oklch(0.18 0.05 22);
--surface-2: oklch(0.22 0.06 22);
--line: oklch(0.4 0.04 30 / 0.6);
--line-soft: oklch(0.4 0.04 30 / 0.25);
--ink: oklch(0.95 0.02 85);
--ink-2: oklch(0.8 0.03 75);
--ink-3: oklch(0.6 0.03 60);
--ember: oklch(0.66 0.15 35);
--ember-deep: oklch(0.5 0.16 30);
--gold: oklch(0.85 0.14 88);
--gold-deep: oklch(0.7 0.13 80);
--accent: var(--gold);
--accent-glow: oklch(0.85 0.14 88 / 0.35);
--grain-opacity: 0.08;
}
/* ---------- Type system ---------- */
.font-display { font-family: "Cinzel", "Cormorant Garamond", serif; letter-spacing: 0.04em; font-weight: 600; }
.font-serif { font-family: "Cormorant Garamond", "EB Garamond", serif; }
.font-sans { font-family: "Inter", system-ui, sans-serif; }
.font-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.font-fraktur { font-family: "UnifrakturMaguntia", "Cinzel", serif; }
[data-typography="editorial"] .font-display { font-family: "Cormorant Garamond", serif; letter-spacing: 0.02em; font-weight: 500; }
[data-typography="editorial"] h1, [data-typography="editorial"] h2 { font-style: italic; }
.eyebrow {
font-family: "Cinzel", serif;
text-transform: uppercase;
letter-spacing: 0.32em;
font-size: 11px;
color: var(--gold);
font-weight: 500;
}
.smallcaps {
font-family: "Cinzel", serif;
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 500;
}
/* ---------- Atmosphere: grain & vignette ---------- */
.grain {
position: fixed; inset: 0;
pointer-events: none;
z-index: 60;
opacity: var(--grain-opacity);
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* ---------- Nav ---------- */
.nav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 36px;
transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
border-bottom: 1px solid transparent;
}
.nav.scrolled {
background: oklch(from var(--bg-deep) l c h / 0.78);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
border-bottom: 1px solid var(--line-soft);
}
.nav-logo {
display: flex; align-items: center; gap: 12px;
font-family: "Cinzel", serif;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 12px;
color: var(--ink);
}
.nav-logo .crest {
width: 36px; height: 36px;
display: grid; place-items: center;
border: 1px solid var(--line);
border-radius: 50%;
background: radial-gradient(circle at 50% 60%, var(--ember-deep), transparent 65%);
position: relative;
}
.nav-logo .crest::after {
content: "";
position: absolute; inset: 4px;
border-radius: 50%;
border: 1px solid var(--gold-deep);
opacity: 0.5;
}
.nav-logo .crest svg { width: 16px; height: 16px; color: var(--gold); }
.nav-links {
display: flex; gap: 36px; align-items: center;
}
.nav-link {
font-family: "Cinzel", serif;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-2);
position: relative;
padding: 6px 0;
cursor: pointer;
transition: color 0.2s;
}
.nav-link:hover { color: var(--ink); }
.nav-link.has-menu::after {
content: "";
display: inline-block;
width: 6px; height: 6px;
margin-left: 8px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: translateY(-2px) rotate(45deg);
vertical-align: middle;
}
.nav-cta {
font-family: "Cinzel", serif;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
padding: 11px 22px;
border: 1px solid var(--gold-deep);
color: var(--gold);
background: transparent;
border-radius: 999px;
transition: all 0.25s ease;
}
.nav-cta:hover {
background: var(--gold);
color: var(--bg-deep);
box-shadow: 0 0 30px var(--accent-glow);
}
.has-dropdown {
/* Extend hover region using pseudo-element so layout is not affected */
position: relative;
}
.has-dropdown::before {
content: "";
position: absolute;
inset: -18px 0;
z-index: 0;
}
.dropdown {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: 240px;
padding: 12px;
background: oklch(from var(--bg-deep) l c h / 0.95);
backdrop-filter: blur(18px);
border: 1px solid var(--line-soft);
border-radius: 14px;
box-shadow: 0 30px 80px rgba(0,0,0,0.5);
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
/* Invisible bridge that fills the visual gap between the trigger and
the dropdown panel — keeps :hover alive while the cursor crosses. */
.dropdown::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -18px;
height: 18px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.dropdown a {
display: block;
padding: 10px 14px;
font-family: "Cormorant Garamond", serif;
font-size: 16px;
color: var(--ink-2);
border-radius: 8px;
transition: all 0.15s;
}
.dropdown a:hover { background: var(--surface); color: var(--ink); }
.dropdown a .num {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
color: var(--gold);
margin-right: 12px;
letter-spacing: 0.1em;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 30px;
font-family: "Cinzel", serif;
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
border-radius: 2px;
border: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
overflow: hidden;
}
.btn-primary {
background: linear-gradient(180deg, var(--ember) 0%, var(--ember-deep) 100%);
color: oklch(0.12 0.01 40);
box-shadow: 0 0 0 1px oklch(from var(--ember) l c h / 0.6),
0 20px 50px oklch(from var(--ember) l c h / 0.35),
inset 0 1px 0 oklch(from var(--ember) calc(l + 0.15) c h / 0.7);
font-weight: 700;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 0 1px oklch(from var(--ember) l c h / 0.8),
0 28px 70px oklch(from var(--ember) l c h / 0.5),
inset 0 1px 0 oklch(from var(--ember) calc(l + 0.15) c h / 0.7);
}
.btn-ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--line);
}
.btn-ghost:hover {
border-color: var(--gold);
color: var(--gold);
background: oklch(from var(--gold) l c h / 0.04);
}
.btn .arrow {
display: inline-block;
transition: transform 0.3s;
}
.btn:hover .arrow { transform: translateX(4px); }
/* ---------- Hero ---------- */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
padding: 120px 8vw 80px;
}
.hero-bg {
position: absolute; inset: 0;
z-index: 0;
background:
radial-gradient(ellipse 80% 60% at 70% 75%, oklch(from var(--ember) l c h / 0.28), transparent 70%),
radial-gradient(ellipse 60% 50% at 20% 30%, oklch(from var(--gold) l c h / 0.06), transparent 60%),
linear-gradient(180deg, var(--bg-deep), var(--bg));
}
.hero-image-layer {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0.35;
background:
radial-gradient(ellipse 60% 80% at 80% 50%,
oklch(from var(--ember) l c h / 0.5),
oklch(from var(--ember-deep) l c h / 0.2) 40%,
transparent 70%);
mix-blend-mode: screen;
}
.hero-canvas {
position: absolute; inset: 0;
z-index: 2;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 3;
max-width: 760px;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 36px;
}
.hero-eyebrow .line {
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.hero h1 {
font-family: "Cinzel", serif;
font-weight: 800;
font-size: clamp(56px, 9vw, 144px);
line-height: 0.95;
letter-spacing: 0.01em;
margin: 0 0 8px;
color: var(--ink);
text-shadow: 0 0 80px oklch(from var(--ember) l c h / 0.3);
}
.hero h1 .em {
background: linear-gradient(180deg, var(--gold) 0%, var(--ember) 80%, var(--ember-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-style: italic;
font-family: "Cormorant Garamond", serif;
font-weight: 500;
letter-spacing: -0.01em;
}
[data-typography="editorial"] .hero h1 {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-weight: 500;
letter-spacing: -0.01em;
}
.hero-tagline {
font-family: "Cormorant Garamond", serif;
font-size: clamp(18px, 1.6vw, 24px);
font-style: italic;
color: var(--ink-2);
max-width: 520px;
margin: 36px 0 16px;
line-height: 1.5;
}
.hero-sub {
font-size: 15px;
color: var(--ink-3);
max-width: 480px;
margin: 0 0 44px;
}
.hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
}
.hero-actions .meta {
display: flex;
flex-direction: column;
gap: 4px;
margin-left: 12px;
padding-left: 24px;
border-left: 1px solid var(--line-soft);
}
.hero-actions .meta .label {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
}
.hero-actions .meta .value {
font-family: "Cinzel", serif;
font-size: 13px;
letter-spacing: 0.2em;
color: var(--ink);
text-transform: uppercase;
}
.hero-side {
position: absolute;
right: 8vw;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 360px;
display: none;
}
@media (min-width: 1200px) { .hero-side { display: block; } }
.crest-large {
width: 100%;
aspect-ratio: 1;
position: relative;
display: grid;
place-items: center;
animation: slowPulse 6s ease-in-out infinite;
}
.crest-large::before,
.crest-large::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid var(--gold-deep);
opacity: 0.3;
}
.crest-large::after {
inset: 30px;
border-color: var(--ember);
opacity: 0.4;
}
.crest-large .runes {
position: absolute;
inset: -10px;
border-radius: 50%;
font-family: "Cinzel", serif;
font-size: 13px;
letter-spacing: 0.6em;
color: var(--gold);
opacity: 0.55;
animation: rotate 60s linear infinite;
}
.crest-large .core {
width: 60%;
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(circle at 50% 60%, oklch(from var(--ember) l c h / 0.5), transparent 60%),
radial-gradient(circle at 50% 50%, oklch(from var(--gold) l c h / 0.15), transparent 70%);
display: grid;
place-items: center;
position: relative;
}
.crest-large .core img {
width: 75%;
filter: drop-shadow(0 0 30px oklch(from var(--ember) l c h / 0.5));
}
@keyframes slowPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
@keyframes rotate {
to { transform: rotate(360deg); }
}
.scroll-hint {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
font-family: "Cinzel", serif;
font-size: 10px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--ink-3);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.scroll-hint .line {
width: 1px; height: 40px;
background: linear-gradient(180deg, var(--gold-deep), transparent);
animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
0% { opacity: 0; transform: scaleY(0); transform-origin: top; }
50% { opacity: 1; transform: scaleY(1); }
100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}
/* ---------- Section common ---------- */
.section {
position: relative;
padding: 140px 8vw;
z-index: 2;
}
.section-deep { background: var(--bg-deep); }
.section-surface { background: var(--surface); }
.section-tag {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 28px;
}
.section-tag .num {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--gold);
}
.section-tag .label {
font-family: "Cinzel", serif;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-2);
}
.section-tag .rule {
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--line), transparent);
max-width: 200px;
}
h2.section-title {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: clamp(40px, 5vw, 76px);
line-height: 1;
letter-spacing: 0.01em;
margin: 0 0 24px;
color: var(--ink);
max-width: 18ch;
}
h2.section-title .em {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--gold);
}
[data-typography="editorial"] h2.section-title {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-weight: 500;
}
.section-lede {
font-family: "Cormorant Garamond", serif;
font-size: clamp(20px, 1.7vw, 26px);
line-height: 1.55;
color: var(--ink-2);
max-width: 56ch;
}
/* ---------- Sinopse ---------- */
.synopsis {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: start;
}
@media (max-width: 900px) { .synopsis { grid-template-columns: 1fr; gap: 40px; } }
.synopsis-quote {
position: relative;
padding: 40px 0 0 60px;
border-top: 1px solid var(--line-soft);
}
.synopsis-quote::before {
content: "“";
position: absolute;
top: 0;
left: 0;
font-family: "Cormorant Garamond", serif;
font-size: 140px;
line-height: 0.8;
color: var(--gold);
opacity: 0.5;
}
.synopsis-quote p {
font-family: "Cormorant Garamond", serif;
font-size: 26px;
font-style: italic;
line-height: 1.5;
color: var(--ink);
margin: 0 0 24px;
}
.synopsis-quote .attribution {
font-family: "Cinzel", serif;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-3);
}
.synopsis-body p {
font-size: 16px;
line-height: 1.85;
color: var(--ink-2);
margin: 0 0 18px;
}
.synopsis-body p strong {
color: var(--ink);
font-weight: 500;
}
/* ---------- Books ---------- */
.books-grid {
display: grid;
grid-template-columns: 1.15fr 1fr 1fr;
gap: 32px;
margin-top: 80px;
}
@media (max-width: 1100px) { .books-grid { grid-template-columns: 1fr 1fr; } .book-card.featured { grid-column: 1 / -1; } }
@media (max-width: 700px) { .books-grid { grid-template-columns: 1fr; } }
.book-card {
position: relative;
background: linear-gradient(180deg, var(--surface), var(--bg-deep));
border: 1px solid var(--line-soft);
padding: 36px;
display: flex;
flex-direction: column;
gap: 24px;
transition: all 0.4s ease;
overflow: hidden;
}
.book-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 50% at 50% 110%, oklch(from var(--ember) l c h / 0.18), transparent 70%);
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
}
.book-card:hover { border-color: oklch(from var(--gold) l c h / 0.5); transform: translateY(-4px); }
.book-card:hover::before { opacity: 1; }
.book-card.featured {
grid-row: span 2;
background: linear-gradient(180deg, var(--surface-2), var(--surface), var(--bg-deep));
}
.book-cover {
position: relative;
aspect-ratio: 2/3;
background:
linear-gradient(135deg, oklch(from var(--ember-deep) l c h / 0.25) 0%, transparent 60%),
linear-gradient(180deg, var(--surface-2), var(--bg-deep));
border: 1px solid var(--line);
display: grid;
place-items: center;
overflow: hidden;
box-shadow:
0 30px 60px rgba(0,0,0,0.55),
0 0 0 1px oklch(from var(--gold) l c h / 0.08) inset;
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
}
.book-card:hover .book-cover {
transform: translateY(-6px);
box-shadow:
0 40px 80px rgba(0,0,0,0.7),
0 0 50px oklch(from var(--ember) l c h / 0.25),
0 0 0 1px oklch(from var(--gold) l c h / 0.25) inset;
}
.book-cover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.book-cover-shine {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(105deg,
transparent 35%,
oklch(from var(--gold) l c h / 0.18) 50%,
transparent 65%);
opacity: 0;
transition: opacity 0.6s ease;
mix-blend-mode: overlay;
}
.book-card:hover .book-cover-shine { opacity: 1; }
.book-cover-art {
position: absolute;
inset: 16px;
border: 1px solid var(--gold-deep);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 22px 18px;
background: radial-gradient(ellipse 80% 60% at 50% 70%, oklch(from var(--ember) l c h / 0.18), transparent 70%);
}
.book-cover-art .crest-mini {
width: 70px; height: 70px;
border: 1px solid var(--gold-deep);
border-radius: 50%;
display: grid; place-items: center;
background: radial-gradient(circle, oklch(from var(--ember) l c h / 0.25), transparent 70%);
}
.book-cover-art .vol {
font-family: "Cinzel", serif;
font-size: 9px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--gold);
}
.book-cover-art .title {
font-family: "Cinzel", serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
color: var(--ink);
line-height: 1.3;
}
.book-cover-art .author {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.04em;
}
.book-cover-art .ornament {
width: 24px; height: 1px;
background: var(--gold-deep);
position: relative;
}
.book-cover-art .ornament::before,
.book-cover-art .ornament::after {
content: "";
position: absolute;
width: 4px; height: 4px;
border: 1px solid var(--gold-deep);
transform: rotate(45deg);
top: -2px;
}
.book-cover-art .ornament::before { left: -8px; }
.book-cover-art .ornament::after { right: -8px; }
.book-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
}
.book-title {
font-family: "Cinzel", serif;
font-weight: 600;
font-size: 22px;
letter-spacing: 0.04em;
color: var(--ink);
line-height: 1.2;
margin: 0;
}
.book-card.featured .book-title { font-size: 28px; }
.book-desc {
font-family: "Cormorant Garamond", serif;
font-size: 16px;
line-height: 1.55;
color: var(--ink-2);
font-style: italic;
flex: 1;
}
.book-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: "Cinzel", serif;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
border-top: 1px solid var(--line-soft);
padding-top: 20px;
transition: gap 0.3s;
}
.book-link:hover { gap: 16px; }
.book-link svg { width: 14px; height: 14px; }
/* ---- eBook price badge ---- */
.book-price {
display: inline-flex;
align-items: baseline;
gap: 10px;
margin-top: -4px;
padding: 10px 14px;
align-self: flex-start;
background:
linear-gradient(180deg,
oklch(from var(--ember) l c h / 0.10),
oklch(from var(--ember) l c h / 0.04));
border: 1px solid oklch(from var(--gold) l c h / 0.45);
border-radius: 2px;
position: relative;
/* notched price-tag look on the left edge */
clip-path: polygon(
10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%
);
padding-left: 22px;
}
.book-price-label {
font-family: "Cinzel", serif;
font-size: 9px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-3);
}
.book-price-value {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: 20px;
letter-spacing: 0.04em;
color: var(--gold);
line-height: 1;
text-shadow: 0 1px 0 oklch(from var(--bg-deep) l c h / 0.6);
}
.book-card.featured .book-price-value { font-size: 24px; }
.book-card:hover .book-price {
border-color: var(--gold);
background:
linear-gradient(180deg,
oklch(from var(--ember) l c h / 0.18),
oklch(from var(--ember) l c h / 0.06));
}
/* ---------- Characters ---------- */
.characters {
margin-top: 80px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1000px) { .characters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .characters { grid-template-columns: 1fr; } }
.character {
position: relative;
cursor: pointer;
background: var(--surface);
border: 1px solid var(--line-soft);
overflow: hidden;
transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.character:hover { border-color: oklch(from var(--gold) l c h / 0.5); }
.character-img {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
background: linear-gradient(180deg, var(--surface-2), var(--bg-deep));
}
.character-portrait {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
filter: saturate(0.92) contrast(1.05);
}
.character:hover .character-portrait {
transform: scale(1.06);
filter: saturate(1.1) contrast(1.08);
}
.character-placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background:
repeating-linear-gradient(135deg, transparent 0 14px, oklch(from var(--ember) l c h / 0.04) 14px 15px),
radial-gradient(ellipse 60% 70% at 50% 40%, oklch(from var(--ember) l c h / 0.18), transparent 70%);
transition: transform 1.2s ease;
}
.character:hover .character-placeholder { transform: scale(1.05); }
.character-placeholder .silhouette {
width: 60%;
height: 70%;
background:
radial-gradient(ellipse 30% 18% at 50% 18%, oklch(from var(--bg-deep) l c h) 50%, transparent 70%),
radial-gradient(ellipse 40% 60% at 50% 65%, oklch(from var(--bg-deep) l c h) 50%, transparent 70%);
filter: blur(2px);
opacity: 0.85;
margin-top: auto;
}
.character-placeholder .label {
position: absolute;
bottom: 16px;
font-family: "JetBrains Mono", monospace;
font-size: 9px;
letter-spacing: 0.2em;
color: var(--ink-3);
text-transform: uppercase;
}
.character-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 30%, oklch(from var(--bg-deep) l c h / 0.85) 75%, var(--bg-deep) 100%);
}
.character-info {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 24px;
}
.character-num {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.2em;
color: var(--gold);
margin-bottom: 6px;
}
.character-name {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: 22px;
letter-spacing: 0.06em;
color: var(--ink);
margin: 0 0 6px;
text-transform: uppercase;
}
.character-title {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 15px;
color: var(--gold);
margin: 0 0 14px;
}
.character-desc {
font-size: 13px;
color: var(--ink-2);
line-height: 1.5;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.5s ease;
}
.character:hover .character-desc {
max-height: 200px;
opacity: 1;
margin-top: 8px;
}
/* ---------- World map teaser ---------- */
.world-section {
position: relative;
overflow: hidden;
}
.world-grid {
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: 80px;
align-items: center;
}
@media (max-width: 1000px) { .world-grid { grid-template-columns: 1fr; } }
.world-map {
position: relative;
margin: 0;
aspect-ratio: 4/3;
background: var(--bg-deep);
border: 1px solid var(--line);
overflow: hidden;
box-shadow:
0 40px 80px rgba(0,0,0,0.6),
0 0 0 1px oklch(from var(--gold) l c h / 0.1) inset;
}
.world-map-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.95) contrast(1.05);
transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.world-map:hover .world-map-img { transform: scale(1.03); }
.world-map-frame {
position: absolute;
inset: 14px;
border: 1px solid oklch(from var(--gold) l c h / 0.35);
pointer-events: none;
box-shadow: 0 0 0 1px oklch(from var(--bg-deep) l c h / 0.6);
}
.world-map-frame::before,
.world-map-frame::after {
content: "";
position: absolute;
width: 14px; height: 14px;
border: 1px solid var(--gold);
}
.world-map-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.world-map-frame::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.world-map-caption {
position: absolute;
bottom: 22px;
left: 22px;
right: 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-family: "Cinzel", serif;
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: oklch(from var(--gold) l c h / 0.95);
text-shadow: 0 2px 12px rgba(0,0,0,0.8);
pointer-events: none;
}
.world-map-caption .cardinal {
width: 28px; height: 28px;
border: 1px solid oklch(from var(--gold) l c h / 0.7);
border-radius: 50%;
display: grid; place-items: center;
background: oklch(from var(--bg-deep) l c h / 0.5);
backdrop-filter: blur(4px);
font-size: 11px;
letter-spacing: 0;
}
.world-pin {
position: absolute;
font-family: "Cinzel", serif;
font-size: 10px;
letter-spacing: 0.2em;
color: var(--gold);
text-transform: uppercase;
display: flex;
align-items: center;
gap: 8px;
pointer-events: none;
}
.world-pin::before {
content: "";
width: 8px; height: 8px;
border: 1px solid var(--gold);
border-radius: 50%;
background: oklch(from var(--ember) l c h / 0.6);
box-shadow: 0 0 12px oklch(from var(--ember) l c h / 0.8);
}
.world-pin.right { flex-direction: row-reverse; text-align: right; }
.realms {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 40px;
}
.realm {
border: 1px solid var(--line-soft);
padding: 20px;
background: oklch(from var(--surface) l c h / 0.4);
transition: all 0.3s;
}
.realm:hover { border-color: oklch(from var(--gold) l c h / 0.5); background: var(--surface); }
.realm .symbol {
width: 36px; height: 36px;
border: 1px solid var(--gold-deep);
border-radius: 50%;
display: grid; place-items: center;
margin-bottom: 14px;
font-family: "Cinzel", serif;
font-size: 14px;
color: var(--gold);
}
.realm h4 {
font-family: "Cinzel", serif;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
margin: 0 0 6px;
color: var(--ink);
}
.realm p {
font-size: 13px;
color: var(--ink-3);
margin: 0;
line-height: 1.5;
}
/* ---------- Bestiary ---------- */
.bestiary {
margin-top: 64px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 900px) { .bestiary { grid-template-columns: repeat(2, 1fr); } }
.beast {
position: relative;
aspect-ratio: 1;
border-right: 1px solid var(--line-soft);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 28px;
overflow: hidden;
background: linear-gradient(180deg, var(--surface), var(--bg-deep));
transition: all 0.5s ease;
}
.beast:last-child { border-right: none; }
@media (max-width: 900px) {
.beast:nth-child(2n) { border-right: none; }
.beast:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}
.beast::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 30%, oklch(from var(--ember) l c h / 0.25), transparent 60%);
opacity: 0;
transition: opacity 0.5s;
}
.beast:hover::before { opacity: 1; }
.beast-shape {
position: absolute;
top: 30%; left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
display: grid; place-items: center;
opacity: 0.5;
transition: all 0.5s;
}
.beast:hover .beast-shape { opacity: 0.85; transform: translate(-50%, -50%) scale(1.05); }
.beast-shape svg { width: 100%; height: 100%; color: var(--gold); }
.beast-rank {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.2em;
color: var(--gold);
margin-bottom: 4px;
position: relative;
}
.beast-name {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 4px;
position: relative;
}
.beast-class {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 13px;
color: var(--ink-3);
position: relative;
}
/* ---------- Newsletter ---------- */
.newsletter {
position: relative;
padding: 140px 8vw;
background: var(--bg-deep);
overflow: hidden;
text-align: center;
}
.newsletter::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 80% at 50% 100%, oklch(from var(--ember) l c h / 0.25), transparent 70%),
radial-gradient(ellipse 80% 60% at 50% 0%, oklch(from var(--gold) l c h / 0.05), transparent 70%);
pointer-events: none;
}
.newsletter-inner {
position: relative;
max-width: 720px;
margin: 0 auto;
}
.newsletter h2 {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: clamp(36px, 4.5vw, 64px);
line-height: 1;
margin: 24px 0;
color: var(--ink);
}
.newsletter h2 .em {
font-family: "Cormorant Garamond", serif;
font-style: italic;
color: var(--gold);
font-weight: 500;
}
.newsletter p {
font-family: "Cormorant Garamond", serif;
font-size: 22px;
font-style: italic;
color: var(--ink-2);
margin: 0 0 48px;
}
.newsletter-form {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.newsletter-input {
flex: 1;
max-width: 380px;
background: oklch(from var(--bg-deep) l c h / 0.6);
border: 1px solid var(--line);
padding: 16px 20px;
font-family: "Inter", sans-serif;
color: var(--ink);
font-size: 14px;
border-radius: 2px;
outline: none;
transition: all 0.2s;
}
.newsletter-input::placeholder { color: var(--ink-3); }
.newsletter-input:focus {
border-color: var(--gold);
background: oklch(from var(--bg) l c h / 0.8);
box-shadow: 0 0 0 3px oklch(from var(--gold) l c h / 0.15);
}
.newsletter-disclaimer {
margin-top: 32px;
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-3);
}
.newsletter-success {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 22px;
color: var(--gold);
margin-top: 8px;
animation: fadeUp 0.6s ease;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Footer ---------- */
.footer {
position: relative;
background: oklch(from var(--bg-deep) calc(l - 0.02) c h);
padding: 80px 8vw 40px;
border-top: 1px solid var(--line-soft);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
margin-bottom: 60px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.footer-brand h3 {
font-family: "Cinzel", serif;
font-size: 18px;
letter-spacing: 0.2em;
text-transform: uppercase;
margin: 16px 0 12px;
color: var(--ink);
}
.footer-brand p {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 16px;
color: var(--ink-3);
max-width: 36ch;
margin: 0 0 20px;
}
.footer-social {
display: flex;
gap: 12px;
}
.footer-social a {
width: 38px; height: 38px;
border: 1px solid var(--line);
border-radius: 50%;
display: grid; place-items: center;
color: var(--ink-2);
transition: all 0.2s;
}
.footer-social a:hover {
border-color: var(--gold);
color: var(--gold);
background: oklch(from var(--gold) l c h / 0.06);
}
.footer-col h5 {
font-family: "Cinzel", serif;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 18px;
}
.footer-col ul {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.footer-col a {
font-family: "Cormorant Garamond", serif;
font-size: 16px;
color: var(--ink-2);
transition: color 0.2s;
}
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
padding-top: 32px;
border-top: 1px solid var(--line-soft);
display: flex;
justify-content: space-between;
align-items: center;
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
flex-wrap: wrap;
gap: 20px;
}
/* ---------- Reveal animation ---------- */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
/* ---------- Quote section ---------- */
.epigraph {
padding: 80px 8vw;
text-align: center;
background: var(--bg);
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
}
.epigraph p {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: clamp(24px, 3vw, 38px);
line-height: 1.4;
color: var(--ink);
max-width: 24ch;
margin: 0 auto;
}
.epigraph .em {
background: linear-gradient(180deg, var(--gold), var(--ember));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.epigraph .seal {
margin: 32px auto 0;
width: 36px;
height: 1px;
background: var(--gold-deep);
position: relative;
}
.epigraph .seal::before,
.epigraph .seal::after {
content: "";
position: absolute;
width: 6px; height: 6px;
border: 1px solid var(--gold-deep);
transform: rotate(45deg);
top: -3px;
}
.epigraph .seal::before { left: -10px; }
.epigraph .seal::after { right: -10px; }
/* ---------- Mobile nav simplification ---------- */
@media (max-width: 900px) {
.nav { padding: 14px 20px; }
.nav-links { display: none; }
.section { padding: 90px 6vw; }
.hero { padding: 110px 6vw 80px; }
.newsletter { padding: 90px 6vw; }
}
/* ========================================================== */
/* ============== PAGE: O Grande Continente ================= */
/* ========================================================== */
/* ---------- Chapter Hero ---------- */
.chapter-hero {
position: relative;
min-height: 92vh;
padding: 200px 8% 120px;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
isolation: isolate;
}
.chapter-hero-bg {
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(ellipse 60% 80% at 80% 30%, oklch(from var(--ember) l c h / 0.18), transparent 60%),
radial-gradient(ellipse 50% 70% at 10% 80%, oklch(from var(--gold) l c h / 0.06), transparent 60%),
linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 60%, var(--bg) 100%);
}
.chapter-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
repeating-linear-gradient(0deg, transparent 0 38px, oklch(from var(--gold) l c h / 0.025) 38px 39px),
repeating-linear-gradient(90deg, transparent 0 38px, oklch(from var(--gold) l c h / 0.025) 38px 39px);
pointer-events: none;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent 80%);
}
.chapter-hero-inner {
max-width: 920px;
position: relative;
z-index: 2;
}
.chapter-eyebrow {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 28px;
}
.chapter-eyebrow .line {
flex: 0 0 56px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.chapter-eyebrow .line:last-child {
background: linear-gradient(90deg, var(--gold-deep), transparent);
flex: 1;
}
.chapter-title {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: clamp(56px, 9vw, 128px);
line-height: 0.95;
letter-spacing: 0.02em;
margin: 0 0 36px;
color: var(--ink);
text-shadow: 0 4px 60px oklch(from var(--ember) l c h / 0.35);
}
.chapter-title .em {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-weight: 400;
background: linear-gradient(180deg, var(--gold), var(--ember-deep) 80%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 0;
}
.chapter-lede {
font-family: "Cormorant Garamond", serif;
font-size: clamp(20px, 1.7vw, 26px);
line-height: 1.55;
color: var(--ink-2);
max-width: 760px;
margin: 0 0 22px;
}
.chapter-lede em {
color: var(--gold);
font-style: italic;
}
.chapter-sub {
font-family: "Inter", sans-serif;
font-size: 16px;
line-height: 1.75;
color: var(--ink-3);
max-width: 680px;
margin: 0 0 48px;
}
.chapter-breadcrumbs {
display: flex;
align-items: center;
gap: 12px;
font-family: "Cinzel", serif;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-3);
}
.chapter-breadcrumbs a {
color: var(--ink-3);
transition: color 0.2s;
}
.chapter-breadcrumbs a:hover { color: var(--gold); }
.chapter-breadcrumbs .sep { color: var(--line); }
.chapter-breadcrumbs .current { color: var(--gold); }
/* ---------- Realms Atlas Index ---------- */
.atlas {
padding: 60px 8%;
position: relative;
}
.atlas-rule {
height: 1px;
background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.atlas-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
padding: 28px 0;
}
@media (max-width: 1100px) { .atlas-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .atlas-grid { grid-template-columns: repeat(2, 1fr); } }
.atlas-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 28px 20px;
border-right: 1px solid var(--line-soft);
border-bottom: 1px solid transparent;
color: var(--ink-2);
transition: all 0.4s ease;
position: relative;
}
.atlas-card:last-child { border-right: none; }
@media (max-width: 1100px) {
.atlas-card { border-bottom: 1px solid var(--line-soft); }
.atlas-card:nth-child(3n) { border-right: none; }
.atlas-card:nth-last-child(-n+2):nth-child(n+4) { border-bottom: none; }
}
@media (max-width: 700px) {
.atlas-card:nth-child(3n) { border-right: 1px solid var(--line-soft); }
.atlas-card:nth-child(2n) { border-right: none; }
.atlas-card:nth-last-child(-n+2):nth-child(n+4) { border-bottom: 1px solid var(--line-soft); }
.atlas-card:last-child { border-bottom: none; }
}
.atlas-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 40%, oklch(from var(--ember) l c h / 0.08), transparent 70%);
opacity: 0;
transition: opacity 0.4s;
}
.atlas-card:hover::before { opacity: 1; }
.atlas-card:hover { color: var(--ink); }
.atlas-numeral {
font-family: "Cinzel", serif;
font-size: 14px;
letter-spacing: 0.32em;
color: var(--gold);
}
.atlas-sigil {
color: var(--gold-deep);
transition: all 0.5s ease;
}
.atlas-card:hover .atlas-sigil {
color: var(--ember);
transform: rotate(-6deg) scale(1.05);
filter: drop-shadow(0 0 16px var(--accent-glow));
}
.atlas-name {
font-family: "Cinzel", serif;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
}
/* ---------- Map Stage ---------- */
.map-stage {
padding: 120px 8% 100px;
position: relative;
}
.map-frame {
position: relative;
margin: 60px auto 0;
max-width: 1280px;
aspect-ratio: 16 / 10;
border: 1px solid var(--line);
background: var(--surface);
overflow: hidden;
box-shadow:
0 60px 120px rgba(0,0,0,0.5),
inset 0 0 80px oklch(from var(--bg-deep) l c h / 0.6);
}
.map-frame img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.85) contrast(1.05);
}
.map-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 90% 90% at 50% 50%, transparent 50%, oklch(from var(--bg-deep) l c h / 0.7) 100%),
linear-gradient(180deg, transparent 70%, oklch(from var(--bg-deep) l c h / 0.6));
}
.map-corners {
position: absolute;
inset: 0;
pointer-events: none;
}
.map-corners .c {
position: absolute;
font-family: "Cinzel", serif;
font-size: 14px;
letter-spacing: 0.3em;
color: var(--gold);
opacity: 0.7;
}
.map-corners .c.tl { top: 18px; left: 22px; }
.map-corners .c.tr { top: 18px; right: 22px; }
.map-corners .c.bl { bottom: 18px; left: 22px; }
.map-corners .c.br { bottom: 18px; right: 22px; }
.map-frame figcaption {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 10px;
font-family: "Cinzel", serif;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-2);
background: oklch(from var(--bg-deep) l c h / 0.7);
padding: 8px 18px;
border: 1px solid var(--line-soft);
backdrop-filter: blur(10px);
}
.map-frame figcaption .dot { color: var(--gold); }
/* ---------- Realm Section ---------- */
.realm-section {
padding: 140px 8%;
position: relative;
overflow: hidden;
}
.realm-section::before {
content: "";
position: absolute;
top: 0; left: 8%; right: 8%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.realm-section[data-realm="demonios"] {
background: linear-gradient(180deg, var(--bg) 0%, oklch(from var(--bg-deep) l c h) 50%, var(--bg) 100%);
}
.realm-section[data-realm="demonios"] .realm-numeral-art {
color: oklch(from var(--ember) l 0.16 25 / 0.18);
}
.realm-section[data-realm="dragoes"] .realm-numeral-art {
color: oklch(from var(--gold) l c h / 0.12);
}
.realm-section[data-realm="devastadas"] .realm-numeral-art {
color: oklch(from var(--ink-3) l c h / 0.15);
}
.realm-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 80px;
align-items: center;
max-width: 1280px;
margin: 0 auto;
}
.realm-section.flipped .realm-grid {
grid-template-columns: 1fr 1.05fr;
}
.realm-section.flipped .realm-text { order: 2; }
.realm-section.flipped .realm-art { order: 1; }
@media (max-width: 980px) {
.realm-grid,
.realm-section.flipped .realm-grid { grid-template-columns: 1fr; gap: 48px; }
.realm-section.flipped .realm-text,
.realm-section.flipped .realm-art { order: initial; }
}
.realm-tag {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 28px;
}
.realm-num {
font-family: "Cinzel", serif;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
}
.realm-tag .rule {
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--line), transparent);
}
.realm-of {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.2em;
color: var(--ink-3);
}
.realm-headline {
display: flex;
align-items: flex-start;
gap: 24px;
margin-bottom: 32px;
}
.realm-sigil-wrap {
flex-shrink: 0;
width: 76px;
height: 76px;
display: grid;
place-items: center;
border: 1px solid var(--line);
background: radial-gradient(circle, oklch(from var(--ember) l c h / 0.08), transparent 70%);
color: var(--gold);
position: relative;
}
.realm-sigil-wrap::before,
.realm-sigil-wrap::after {
content: "";
position: absolute;
width: 8px; height: 8px;
border: 1px solid var(--gold-deep);
transform: rotate(45deg);
}
.realm-sigil-wrap::before { top: -5px; left: -5px; }
.realm-sigil-wrap::after { bottom: -5px; right: -5px; }
.realm-name {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: clamp(36px, 4.2vw, 56px);
line-height: 1.05;
letter-spacing: 0.03em;
margin: 0 0 8px;
color: var(--ink);
}
.realm-epithet {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 18px;
color: var(--gold);
margin: 0;
letter-spacing: 0.02em;
}
.realm-body {
margin-bottom: 40px;
}
.realm-body p {
font-family: "Cormorant Garamond", serif;
font-size: 19px;
line-height: 1.6;
color: var(--ink-2);
margin: 0 0 18px;
text-wrap: pretty;
}
.realm-body p:first-child::first-letter {
font-family: "Cinzel", serif;
font-size: 3.4em;
float: left;
line-height: 0.9;
padding: 6px 12px 0 0;
color: var(--gold);
font-weight: 700;
}
.realm-traits {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin: 0;
border-top: 1px solid var(--line-soft);
padding-top: 24px;
}
.realm-traits .trait {
padding: 0 18px;
border-right: 1px solid var(--line-soft);
}
.realm-traits .trait:first-child { padding-left: 0; }
.realm-traits .trait:last-child { border-right: none; padding-right: 0; }
.realm-traits dt {
font-family: "Cinzel", serif;
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 8px;
}
.realm-traits dd {
font-family: "Cormorant Garamond", serif;
font-size: 16px;
color: var(--ink);
margin: 0;
font-style: italic;
}
@media (max-width: 600px) {
.realm-traits { grid-template-columns: 1fr; gap: 14px; }
.realm-traits .trait { padding: 0; border-right: none; border-bottom: 1px solid var(--line-soft); padding-bottom: 14px; }
.realm-traits .trait:last-child { border-bottom: none; padding-bottom: 0; }
}
/* ---------- Realm Art ---------- */
.realm-art {
position: relative;
}
.realm-image {
position: relative;
aspect-ratio: 4 / 5;
background: var(--surface);
border: 1px solid var(--line);
overflow: hidden;
box-shadow:
0 50px 100px rgba(0,0,0,0.5),
inset 0 0 60px oklch(from var(--bg-deep) l c h / 0.4);
}
.realm-image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.92) contrast(1.05);
}
.realm-image-frame {
position: absolute;
inset: 14px;
border: 1px solid oklch(from var(--gold) l c h / 0.18);
pointer-events: none;
}
.realm-image-frame::before,
.realm-image-frame::after {
content: "";
position: absolute;
width: 14px; height: 14px;
border: 1px solid var(--gold-deep);
transform: rotate(45deg);
}
.realm-image-frame::before { top: -8px; left: -8px; }
.realm-image-frame::after { bottom: -8px; right: -8px; }
.realm-image-placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.realm-image-placeholder .ph-pattern {
position: absolute;
inset: 0;
background:
repeating-linear-gradient(45deg, transparent 0 22px, oklch(from var(--ember) l c h / 0.05) 22px 23px),
radial-gradient(ellipse 60% 70% at 50% 50%, oklch(from var(--ember) l c h / 0.18), transparent 70%),
linear-gradient(180deg, var(--surface-2), var(--bg-deep));
}
.realm-image-placeholder .ph-frame {
position: absolute;
inset: 36px;
border: 1px dashed oklch(from var(--gold) l c h / 0.3);
}
.realm-image-placeholder .ph-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
padding: 32px;
}
.realm-image-placeholder .ph-mark {
font-size: 36px;
color: var(--gold);
opacity: 0.7;
}
.realm-image-placeholder .ph-label {
font-family: "Cinzel", serif;
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-2);
}
.realm-image-placeholder .ph-note {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.2em;
color: var(--ink-3);
text-transform: uppercase;
}
.realm-numeral-art {
position: absolute;
font-family: "Cinzel", serif;
font-weight: 900;
font-size: clamp(180px, 22vw, 320px);
line-height: 0.85;
color: oklch(from var(--gold) l c h / 0.1);
top: -40px;
right: -20px;
pointer-events: none;
user-select: none;
letter-spacing: 0;
z-index: -1;
}
.realm-section.flipped .realm-numeral-art {
right: auto;
left: -20px;
}
/* ---------- Chapter Outro ---------- */
.chapter-outro {
padding: 120px 8%;
text-align: center;
position: relative;
background: linear-gradient(180deg, var(--bg), var(--bg-deep));
}
.outro-rule {
width: 1px;
height: 80px;
margin: 0 auto 40px;
background: linear-gradient(180deg, transparent, var(--gold-deep), transparent);
}
.outro-quote {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.5;
color: var(--ink);
max-width: 820px;
margin: 0 auto 32px;
text-wrap: balance;
}
.outro-attr {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-family: "Cinzel", serif;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 56px;
}
.outro-attr .line {
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.outro-attr .line:last-child {
background: linear-gradient(90deg, var(--gold-deep), transparent);
}
.outro-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
/* Smaller adjustments for narrow screens */
@media (max-width: 700px) {
.chapter-hero { padding: 160px 6% 80px; }
.realm-section { padding: 80px 6%; }
.map-stage { padding: 80px 6% 60px; }
.realm-headline { flex-direction: column; gap: 16px; }
}
/* ========================================================== */
/* ============== PAGE: Chamado dos Aventureiros ============ */
/* ========================================================== */
.chamado-hero { padding-bottom: 80px; }
.chamado-body {
position: relative;
padding: 60px 8% 140px;
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}
.chamado-body::before {
content: "";
position: absolute;
top: 0; left: 8%; right: 8%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.chamado-form {
max-width: 960px;
margin: 0 auto;
}
/* ---------- Form Step ---------- */
.form-step {
padding: 60px 0;
border-bottom: 1px solid var(--line-soft);
}
.form-step:last-of-type { border-bottom: none; }
.step-head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
margin-bottom: 48px;
}
.step-roman {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: 64px;
line-height: 1;
color: oklch(from var(--gold) l c h / 0.85);
width: 88px;
height: 88px;
display: grid;
place-items: center;
border: 1px solid var(--line);
background: radial-gradient(circle, oklch(from var(--ember) l c h / 0.1), transparent 70%);
position: relative;
}
.step-roman::before,
.step-roman::after {
content: "";
position: absolute;
width: 10px; height: 10px;
border: 1px solid var(--gold-deep);
transform: rotate(45deg);
}
.step-roman::before { top: -6px; left: -6px; }
.step-roman::after { bottom: -6px; right: -6px; }
.step-kicker {
font-family: "Cinzel", serif;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 8px;
}
.step-title {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: clamp(28px, 3vw, 38px);
letter-spacing: 0.03em;
line-height: 1.1;
color: var(--ink);
margin: 0;
}
.step-rule {
width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-deep));
}
@media (max-width: 700px) {
.step-head { grid-template-columns: auto 1fr; gap: 18px; }
.step-roman { width: 64px; height: 64px; font-size: 44px; }
.step-rule { display: none; }
}
/* ---------- Field ---------- */
.step-fields {
display: flex;
flex-direction: column;
gap: 56px;
}
.field {
scroll-margin-top: 120px;
}
.field-header {
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
margin-bottom: 24px;
align-items: baseline;
}
.field-num {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
letter-spacing: 0.2em;
color: var(--gold);
font-weight: 500;
}
.field-num .of {
color: var(--ink-3);
margin-left: 6px;
}
.field-title {
font-family: "Cormorant Garamond", serif;
font-weight: 500;
font-style: italic;
font-size: clamp(22px, 2vw, 28px);
color: var(--ink);
margin: 0;
letter-spacing: 0.01em;
}
.field-hint {
font-family: "Inter", sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--ink-3);
margin: 8px 0 0;
max-width: 640px;
}
/* ---------- Text input ---------- */
.text-field {
position: relative;
margin-top: 8px;
}
.text-field input {
width: 100%;
background: transparent;
border: none;
outline: none;
font-family: "Cormorant Garamond", serif;
font-size: 28px;
font-style: italic;
color: var(--ink);
padding: 14px 0 18px;
letter-spacing: 0.01em;
}
.text-field input::placeholder { color: var(--ink-3); opacity: 0.7; }
.text-field-rule {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--line);
}
.text-field-rule::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 0%;
height: 1px;
background: var(--gold);
transition: width 0.4s ease;
}
.text-field input:focus ~ .text-field-rule::after { width: 100%; }
/* ---------- Option Grid ---------- */
.opt-grid {
display: grid;
grid-template-columns: repeat(var(--opt-cols, 2), 1fr);
gap: 10px;
}
@media (max-width: 900px) { .opt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .opt-grid { grid-template-columns: 1fr; } }
.opt {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border: 1px solid var(--line-soft);
background: oklch(from var(--surface) l c h / 0.4);
cursor: pointer;
transition: all 0.25s ease;
position: relative;
user-select: none;
}
.opt:hover {
border-color: oklch(from var(--gold) l c h / 0.4);
background: oklch(from var(--surface) l c h / 0.7);
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt.checked {
border-color: var(--gold);
background: oklch(from var(--ember) l c h / 0.1);
box-shadow: inset 0 0 30px oklch(from var(--ember) l c h / 0.08);
}
.opt.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.opt.disabled:hover {
border-color: var(--line-soft);
background: oklch(from var(--surface) l c h / 0.4);
}
.opt-mark {
flex-shrink: 0;
width: 18px;
height: 18px;
display: grid;
place-items: center;
border: 1px solid var(--line);
background: var(--bg-deep);
position: relative;
transition: all 0.25s;
}
.opt-radio .opt-mark { border-radius: 50%; }
.opt-mark .diamond,
.opt-mark .cross {
opacity: 0;
transition: opacity 0.25s, transform 0.25s;
}
.opt-mark .diamond {
width: 8px;
height: 8px;
background: var(--gold);
transform: rotate(45deg) scale(0.4);
border-radius: 50%;
}
.opt-mark .cross {
width: 10px;
height: 10px;
position: relative;
transform: scale(0.5);
}
.opt-mark .cross::before,
.opt-mark .cross::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 12px;
height: 1.5px;
background: var(--gold);
border-radius: 1px;
}
.opt-mark .cross::before { transform: rotate(45deg); }
.opt-mark .cross::after { transform: rotate(-45deg); }
.opt.checked .opt-mark {
border-color: var(--gold);
background: oklch(from var(--ember) l c h / 0.15);
box-shadow: 0 0 12px oklch(from var(--gold) l c h / 0.4);
}
.opt.checked .opt-mark .diamond {
opacity: 1;
transform: rotate(45deg) scale(1);
}
.opt.checked .opt-mark .cross {
opacity: 1;
transform: scale(1);
}
.opt-label {
font-family: "Cormorant Garamond", serif;
font-size: 17px;
color: var(--ink-2);
letter-spacing: 0.01em;
line-height: 1.3;
}
.opt.checked .opt-label { color: var(--ink); }
.elem-opt {
display: flex;
align-items: center;
gap: 10px;
}
.elem-glyph {
font-family: "Cinzel", serif;
font-size: 18px;
color: var(--gold);
width: 18px;
text-align: center;
}
/* ---------- Counter pill ---------- */
.opt-counter {
display: flex;
justify-content: flex-end;
margin-bottom: 14px;
}
.counter-pill {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 6px 14px;
border: 1px solid var(--line);
font-family: "Cinzel", serif;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-3);
}
.counter-pill strong {
font-family: "JetBrains Mono", monospace;
font-size: 14px;
letter-spacing: 0;
color: var(--gold);
font-weight: 500;
}
/* ---------- Consent ---------- */
.consent-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 28px;
padding: 36px;
border: 1px solid var(--line);
background:
radial-gradient(ellipse 50% 80% at 0% 50%, oklch(from var(--ember) l c h / 0.07), transparent 70%),
oklch(from var(--surface) l c h / 0.5);
position: relative;
}
.consent-card::before,
.consent-card::after {
content: "";
position: absolute;
width: 14px; height: 14px;
border: 1px solid var(--gold-deep);
transform: rotate(45deg);
}
.consent-card::before { top: -8px; left: -8px; }
.consent-card::after { bottom: -8px; right: -8px; }
.consent-mark {
font-family: "Cinzel", serif;
font-size: 56px;
color: var(--gold);
line-height: 1;
}
.consent-body h4 {
font-family: "Cinzel", serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 16px;
font-weight: 600;
}
.consent-body ul {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.consent-body li {
font-family: "Cormorant Garamond", serif;
font-size: 17px;
color: var(--ink-2);
padding-left: 22px;
position: relative;
line-height: 1.5;
}
.consent-body li::before {
content: "◆";
position: absolute;
left: 0;
color: var(--gold-deep);
font-size: 10px;
top: 6px;
}
.consent-body em { color: var(--gold); font-style: italic; }
.consent-toggle {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border: 1px solid var(--line);
cursor: pointer;
transition: all 0.25s;
font-family: "Cormorant Garamond", serif;
font-size: 18px;
color: var(--ink-2);
background: var(--bg-deep);
}
.consent-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.consent-toggle:hover { border-color: var(--gold-deep); }
.consent-toggle.checked {
border-color: var(--gold);
color: var(--ink);
background: oklch(from var(--ember) l c h / 0.12);
}
.consent-toggle .opt-mark { width: 20px; height: 20px; }
.consent-toggle.checked .opt-mark {
border-color: var(--gold);
background: oklch(from var(--ember) l c h / 0.2);
box-shadow: 0 0 14px oklch(from var(--gold) l c h / 0.5);
}
.consent-toggle.checked .opt-mark .cross { opacity: 1; transform: scale(1); }
@media (max-width: 700px) {
.consent-card { grid-template-columns: 1fr; padding: 24px; gap: 16px; }
.consent-mark { font-size: 40px; }
}
/* ---------- Form error ---------- */
.form-error {
margin: 48px 0 0;
padding: 16px 22px;
border: 1px solid oklch(from var(--ember) l 0.18 30);
background: oklch(from var(--ember) l 0.12 35 / 0.18);
font-family: "Cormorant Garamond", serif;
font-size: 17px;
color: var(--ink);
font-style: italic;
display: flex;
align-items: center;
gap: 12px;
}
.form-error .dot {
color: var(--ember);
font-style: normal;
font-size: 18px;
}
/* ---------- Submit ---------- */
.form-actions {
margin-top: 60px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap-reverse;
padding-top: 40px;
border-top: 1px solid var(--line-soft);
}
.btn-large {
padding: 20px 36px !important;
font-size: 13px !important;
letter-spacing: 0.28em !important;
}
.form-foot {
margin-top: 28px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.06em;
color: var(--ink-3);
text-align: center;
}
/* ---------- Confirmation ---------- */
.chamado-confirm {
text-align: center;
max-width: 760px;
margin: 0 auto;
padding: 80px 0;
animation: confirmIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes confirmIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.confirm-rule {
width: 1px;
height: 80px;
margin: 0 auto 40px;
background: linear-gradient(180deg, transparent, var(--gold-deep), transparent);
}
.confirm-seal {
color: var(--gold);
display: grid;
place-items: center;
margin: 0 auto 32px;
filter: drop-shadow(0 0 30px var(--accent-glow));
animation: sealSpin 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes sealSpin {
from { opacity: 0; transform: rotate(-90deg) scale(0.5); }
to { opacity: 1; transform: rotate(0) scale(1); }
}
.confirm-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 24px;
}
.confirm-eyebrow .line {
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.confirm-eyebrow .line:last-child {
background: linear-gradient(90deg, var(--gold-deep), transparent);
}
.confirm-title {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: clamp(40px, 5vw, 64px);
letter-spacing: 0.03em;
color: var(--ink);
margin: 0 0 28px;
text-shadow: 0 0 60px oklch(from var(--ember) l c h / 0.4);
}
.confirm-body {
font-family: "Cormorant Garamond", serif;
font-size: 22px;
line-height: 1.55;
color: var(--ink-2);
margin: 0 auto 16px;
max-width: 600px;
}
.confirm-body em { color: var(--gold); font-style: italic; }
.confirm-blessing {
font-family: "UnifrakturMaguntia", "Cinzel", serif;
font-size: 28px;
color: var(--gold);
margin: 24px 0 60px;
letter-spacing: 0.04em;
}
.confirm-card {
text-align: left;
border: 1px solid var(--line);
padding: 32px;
background: oklch(from var(--surface) l c h / 0.4);
margin: 0 0 60px;
position: relative;
}
.confirm-card::before,
.confirm-card::after {
content: "";
position: absolute;
width: 14px; height: 14px;
border: 1px solid var(--gold-deep);
transform: rotate(45deg);
}
.confirm-card::before { top: -8px; left: -8px; }
.confirm-card::after { bottom: -8px; right: -8px; }
.confirm-card-head {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
font-family: "Cinzel", serif;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line-soft);
}
.confirm-card-head .dot { color: var(--ink-3); }
.confirm-summary {
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.summary-row {
display: grid;
grid-template-columns: 130px 1fr;
gap: 24px;
padding: 12px 0;
border-bottom: 1px dashed var(--line-soft);
}
.summary-row:last-child { border-bottom: none; }
.summary-row dt {
font-family: "Cinzel", serif;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0;
padding-top: 3px;
}
.summary-row dd {
font-family: "Cormorant Garamond", serif;
font-size: 18px;
color: var(--ink);
margin: 0;
font-style: italic;
}
.confirm-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
/* ---------- Submit loading dots ---------- */
.btn[disabled] { opacity: 0.6; cursor: wait; }
.sending-dots {
display: inline-flex;
gap: 4px;
margin-left: 6px;
align-items: center;
}
.sending-dots i {
width: 4px;
height: 4px;
background: currentColor;
border-radius: 50%;
animation: sendingDot 1.1s infinite ease-in-out;
}
.sending-dots i:nth-child(2) { animation-delay: 0.18s; }
.sending-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes sendingDot {
0%, 80%, 100% { transform: scale(0.5); opacity: 0.5; }
40% { transform: scale(1); opacity: 1; }
}
/* ========================================================== */
/* ============== PAGE: VI · Bestiário ===================== */
/* ========================================================== */
/* ---- Parchment tones ---- */
:root[data-parchment="sepia"] {
--parch-1: oklch(0.92 0.05 78);
--parch-2: oklch(0.86 0.06 72);
--parch-3: oklch(0.78 0.07 65);
--parch-edge: oklch(0.42 0.07 45);
--ink-quill: oklch(0.30 0.08 40);
--ink-quill-2: oklch(0.40 0.07 40);
--ink-quill-3: oklch(0.52 0.06 45);
--ink-flourish: oklch(0.40 0.13 35);
--ink-rune: oklch(0.35 0.09 38);
--binding-shadow: oklch(0.20 0.06 35 / 0.45);
}
:root[data-parchment="marfim"] {
--parch-1: oklch(0.96 0.03 88);
--parch-2: oklch(0.92 0.04 82);
--parch-3: oklch(0.85 0.05 75);
--parch-edge: oklch(0.55 0.06 60);
--ink-quill: oklch(0.28 0.07 35);
--ink-quill-2: oklch(0.38 0.06 35);
--ink-quill-3: oklch(0.50 0.05 40);
--ink-flourish: oklch(0.35 0.12 30);
--ink-rune: oklch(0.30 0.08 35);
--binding-shadow: oklch(0.30 0.05 40 / 0.35);
}
:root[data-parchment="couro"] {
--parch-1: oklch(0.82 0.07 62);
--parch-2: oklch(0.74 0.08 55);
--parch-3: oklch(0.64 0.09 48);
--parch-edge: oklch(0.32 0.08 40);
--ink-quill: oklch(0.22 0.08 38);
--ink-quill-2: oklch(0.30 0.07 38);
--ink-quill-3: oklch(0.42 0.06 42);
--ink-flourish: oklch(0.32 0.14 32);
--ink-rune: oklch(0.26 0.09 35);
--binding-shadow: oklch(0.12 0.05 30 / 0.55);
}
/* ---- Hero spacing on bestiary page ---- */
.bestiary-hero { padding-bottom: 60px; }
/* ---- Bestiary Index ---- */
.bestiary-index {
padding: 40px 8% 60px;
position: relative;
}
.bestiary-index-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 22px 0 14px;
}
.bestiary-index-head .index-count {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-3);
}
.bestiary-index-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
border-top: 1px solid var(--line-soft);
}
@media (max-width: 1100px) { .bestiary-index-grid { grid-template-columns: repeat(2, 1fr); } }
.bestiary-index-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 22px 22px 22px 22px;
border-right: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
color: var(--ink-2);
transition: all 0.4s ease;
position: relative;
}
.bestiary-index-card:nth-child(5n) { border-right: none; }
@media (max-width: 1100px) {
.bestiary-index-card { border-right: 1px solid var(--line-soft); }
.bestiary-index-card:nth-child(5n) { border-right: 1px solid var(--line-soft); }
.bestiary-index-card:nth-child(2n) { border-right: none; }
}
.bestiary-index-card:hover { color: var(--ink); background: oklch(from var(--ember) l c h / 0.05); }
.bestiary-index-card .idx-num {
font-family: "Cinzel", serif;
font-size: 11px;
letter-spacing: 0.32em;
color: var(--gold);
}
.bestiary-index-card .idx-name {
font-family: "Cinzel", serif;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--ink);
}
.bestiary-index-card .idx-epithet {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 14px;
color: var(--ink-3);
}
/* ---- Book container ---- */
.bestiary-book {
position: relative;
padding: 80px 4% 120px;
background:
radial-gradient(ellipse 60% 80% at 50% 0%, oklch(from var(--ember) l c h / 0.06), transparent 60%),
linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}
.book-margin-tag {
position: sticky;
top: 90px;
margin: 0 0 20px;
font-family: "Cinzel", serif;
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-3);
text-align: center;
z-index: 1;
}
/* ---- Spread ---- */
.bestiary-spread {
max-width: 1480px;
margin: 0 auto 80px;
position: relative;
}
.bestiary-spread:last-child { margin-bottom: 0; }
.spread-folio {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
font-family: "Cinzel", serif;
font-size: 11px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--gold);
padding: 18px 0;
}
.spread-folio .of {
color: var(--ink-3);
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.24em;
}
/* ---- Pages container (two pages side by side) ---- */
.spread-pages {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
background:
linear-gradient(90deg,
var(--parch-2) 0%,
var(--parch-1) 8%,
var(--parch-1) 48%,
var(--parch-3) 50%,
var(--parch-1) 52%,
var(--parch-1) 92%,
var(--parch-2) 100%);
border-radius: 4px;
box-shadow:
0 50px 100px rgba(0,0,0,0.55),
0 0 0 1px oklch(from var(--parch-edge) l c h / 0.4),
0 0 0 8px oklch(from var(--bg-deep) l c h / 0.6),
0 0 0 9px oklch(from var(--gold-deep) l c h / 0.25),
inset 0 0 120px oklch(from var(--parch-edge) l c h / 0.25);
overflow: hidden;
min-height: 920px;
}
/* Subtle paper texture overlay over the whole spread */
.spread-pages::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.18;
mix-blend-mode: multiply;
}
/* Folds toggle */
:root[data-folds="on"] .spread-pages::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
/* horizontal old fold */
linear-gradient(180deg,
transparent calc(50% - 1px),
oklch(from var(--parch-edge) l c h / 0.18) 50%,
transparent calc(50% + 1px)),
/* faint diagonal grain */
repeating-linear-gradient(135deg,
transparent 0 14px,
oklch(from var(--parch-edge) l c h / 0.03) 14px 15px);
}
/* Binding shadow in the middle */
.spread-binding {
position: absolute;
top: 0; bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
background:
linear-gradient(90deg,
transparent 0%,
var(--binding-shadow) 35%,
var(--binding-shadow) 50%,
var(--binding-shadow) 65%,
transparent 100%);
pointer-events: none;
z-index: 2;
}
/* ---- Page (one side) ---- */
.page {
position: relative;
padding: 56px 60px 64px;
color: var(--ink-quill);
font-family: "IM Fell English SC", "Cormorant Garamond", serif;
font-size: 15px;
line-height: 1.55;
z-index: 1;
}
.page-left { padding-right: 80px; }
.page-right { padding-left: 80px; }
/* Aging — dark corners on each page */
.page-aging {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 30% 30% at 0% 0%, oklch(from var(--parch-edge) l c h / 0.35), transparent 60%),
radial-gradient(ellipse 30% 30% at 100% 100%, oklch(from var(--parch-edge) l c h / 0.30), transparent 60%),
radial-gradient(ellipse 25% 25% at 100% 0%, oklch(from var(--parch-edge) l c h / 0.22), transparent 60%),
radial-gradient(ellipse 25% 25% at 0% 100%, oklch(from var(--parch-edge) l c h / 0.25), transparent 60%);
}
.page-left .page-aging {
background:
radial-gradient(ellipse 30% 30% at 0% 0%, oklch(from var(--parch-edge) l c h / 0.45), transparent 60%),
radial-gradient(ellipse 24% 30% at 0% 100%, oklch(from var(--parch-edge) l c h / 0.35), transparent 60%),
radial-gradient(ellipse 18% 60% at 0% 50%, oklch(from var(--parch-edge) l c h / 0.2), transparent 70%);
}
.page-right .page-aging {
background:
radial-gradient(ellipse 30% 30% at 100% 0%, oklch(from var(--parch-edge) l c h / 0.45), transparent 60%),
radial-gradient(ellipse 24% 30% at 100% 100%, oklch(from var(--parch-edge) l c h / 0.35), transparent 60%),
radial-gradient(ellipse 18% 60% at 100% 50%, oklch(from var(--parch-edge) l c h / 0.2), transparent 70%);
}
/* Corner ornaments */
.page-corners .corner {
position: absolute;
width: 28px; height: 28px;
border: 1px solid oklch(from var(--ink-quill) l c h / 0.4);
pointer-events: none;
}
.page-corners .tl { top: 22px; left: 22px; border-right: none; border-bottom: none; }
.page-corners .tr { top: 22px; right: 22px; border-left: none; border-bottom: none; }
.page-corners .bl { bottom: 22px; left: 22px; border-right: none; border-top: none; }
.page-corners .br { bottom: 22px; right: 22px; border-left: none; border-top: none; }
/* ---- Creature head (left page) ---- */
.creature-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: start;
margin-bottom: 16px;
}
.creature-name {
font-family: "Tangerine", "Pinyon Script", cursive;
font-weight: 700;
font-size: clamp(60px, 6vw, 96px);
line-height: 0.85;
letter-spacing: 0;
margin: 0;
color: var(--ink-flourish);
text-shadow: 0 1px 0 oklch(from var(--parch-1) l c h / 0.4);
}
.creature-meta {
text-align: right;
font-size: 11px;
letter-spacing: 0.12em;
color: var(--ink-quill-2);
padding-top: 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.meta-row { display: flex; flex-direction: column; align-items: flex-end; }
.meta-runes {
font-family: "UnifrakturMaguntia", "Cinzel", serif;
font-size: 22px;
letter-spacing: 0.14em;
color: var(--ink-rune);
line-height: 1;
}
:root[data-runes="off"] .meta-runes { display: none; }
.runes-dwarvish {
font-family: "JetBrains Mono", monospace;
font-size: 18px;
letter-spacing: 0.18em;
}
.meta-lat {
font-family: "IM Fell English SC", serif;
font-size: 12px;
letter-spacing: 0.22em;
color: var(--ink-quill-3);
text-transform: uppercase;
margin-top: 2px;
}
.creature-class {
font-family: "IM Fell English SC", serif;
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-quill-3);
margin: 0 0 18px;
padding-bottom: 14px;
border-bottom: 1px solid oklch(from var(--ink-quill) l c h / 0.25);
position: relative;
}
.creature-class::after {
content: "";
position: absolute;
left: 50%; bottom: -3px;
width: 5px; height: 5px;
border: 1px solid oklch(from var(--ink-quill) l c h / 0.5);
background: var(--parch-1);
transform: translateX(-50%) rotate(45deg);
}
.creature-intro {
font-family: "IM Fell English SC", serif;
font-size: 16px;
letter-spacing: 0.04em;
line-height: 1.5;
color: var(--ink-quill);
margin: 0 0 32px;
display: flex;
flex-direction: column;
gap: 2px;
}
.creature-intro span:first-of-type::first-letter {
font-family: "Tangerine", "Pinyon Script", cursive;
font-size: 3.6em;
float: left;
line-height: 0.85;
padding: 0 8px 0 0;
color: var(--ink-flourish);
font-weight: 700;
}
/* ---- Figure slots (left page bottom) ---- */
.creature-figures {
display: grid;
gap: 28px;
align-items: end;
}
.creature-figures.fig-count-1 { grid-template-columns: 1fr; }
.creature-figures.fig-count-2 { grid-template-columns: 1fr 1fr; }
.figure-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.figure-caption {
font-family: "Tangerine", cursive;
font-weight: 700;
font-size: 36px;
color: var(--ink-flourish);
line-height: 1;
}
/* ---- Scene plate (replaces figure slots when an illustration is provided) ---- */
.creature-scene {
margin: 8px 0 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.creature-scene-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 1px solid oklch(from var(--ink-quill) l c h / 0.55);
box-shadow:
0 18px 40px rgba(0,0,0,0.45),
inset 0 0 0 6px oklch(from var(--parch-1) l c h / 0.95),
inset 0 0 0 7px oklch(from var(--ink-quill) l c h / 0.35);
background: var(--parch-2);
}
.creature-scene-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Tint slightly toward parchment so the modern AI art feels "of" the book */
filter: saturate(0.88) contrast(1.02) sepia(0.08);
}
.creature-scene-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background:
/* darken corners like aged paper */
radial-gradient(ellipse 80% 80% at 50% 50%, transparent 55%, oklch(from var(--parch-edge) l c h / 0.45) 100%),
/* faint paper grain over the image */
repeating-linear-gradient(135deg,
transparent 0 14px,
oklch(from var(--parch-edge) l c h / 0.05) 14px 15px);
mix-blend-mode: multiply;
}
.creature-scene-caption {
font-family: "Cormorant Garamond", "IM Fell English", serif;
font-style: italic;
font-size: 15px;
color: var(--ink-quill-2);
letter-spacing: 0.02em;
margin: 0;
text-align: center;
padding: 0 12px;
}
/* ---- Right page: anatomy layout ---- */
.anatomy-layout {
display: grid;
grid-template-columns: 1.4fr 1fr;
grid-template-rows: auto auto auto auto;
gap: 22px 28px;
height: 100%;
}
.anatomy-main {
grid-column: 1 / 2;
grid-row: 1 / 3;
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
}
.anatomy-main .top-note {
align-self: flex-start;
text-align: left;
max-width: 240px;
}
.anatomy-main .art-slot { width: 100%; aspect-ratio: 1 / 1; }
.anatomy-detail {
grid-column: 2 / 3;
grid-row: 1 / 2;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.anatomy-detail .art-slot { width: 70%; aspect-ratio: 1.4 / 1; }
.anatomy-detail .hand-note { text-align: right; max-width: 200px; }
.anatomy-sample {
grid-column: 2 / 3;
grid-row: 2 / 3;
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
align-items: center;
}
.anatomy-sample .art-slot { width: 64px; height: 110px; }
.anatomy-sample .hand-note { font-size: 14px; }
.anatomy-main-note {
grid-column: 1 / 2;
grid-row: 3 / 4;
max-width: 320px;
}
.anatomy-sub {
grid-column: 2 / 3;
grid-row: 3 / 4;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.anatomy-sub .art-slot { width: 90px; height: 130px; }
.anatomy-sub .hand-note { text-align: right; }
.anatomy-sub .dim { color: var(--ink-quill-3); }
.anatomy-variants {
grid-column: 1 / 3;
grid-row: 4 / 5;
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 14px;
border-top: 1px dashed oklch(from var(--ink-quill) l c h / 0.3);
}
.variants-intro { font-size: 14px; }
.variants-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.variant { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.variant .art-slot { width: 100%; aspect-ratio: 3 / 4; }
/* ---- Hand-written notes ---- */
.hand-note {
font-family: "Cormorant Garamond", "IM Fell English", serif;
font-style: italic;
font-size: 16px;
line-height: 1.35;
color: var(--ink-quill-2);
letter-spacing: 0.01em;
display: inline-block;
}
.hand-note.small { font-size: 13px; }
.hand-note.tiny { font-size: 12px; text-align: center; }
/* ---- Art slot (image placeholder) ---- */
.art-slot {
position: relative;
background:
radial-gradient(ellipse 80% 60% at 50% 40%, oklch(from var(--parch-3) l c h / 0.5), transparent 70%),
var(--parch-2);
border: 1px dashed oklch(from var(--ink-quill) l c h / 0.45);
overflow: hidden;
display: grid;
place-items: center;
}
.art-slot-pattern {
position: absolute;
inset: 0;
background:
repeating-linear-gradient(45deg,
transparent 0 10px,
oklch(from var(--ink-quill) l c h / 0.04) 10px 11px);
pointer-events: none;
}
.art-slot-frame {
position: absolute;
inset: 6px;
border: 1px solid oklch(from var(--ink-quill) l c h / 0.18);
pointer-events: none;
}
.art-slot-inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px;
text-align: center;
}
.art-slot-mark {
font-size: 22px;
color: oklch(from var(--ink-quill) l c h / 0.45);
}
.art-slot-drop {
font-family: "JetBrains Mono", monospace;
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: oklch(from var(--ink-quill) l c h / 0.5);
}
.art-slot-label {
position: absolute;
bottom: 6px; right: 8px;
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 11px;
color: oklch(from var(--ink-quill) l c h / 0.55);
}
.art-slot-tall { aspect-ratio: 3 / 5; width: 100%; }
.art-slot-wide { aspect-ratio: 5 / 3; width: 100%; }
.art-slot-square { aspect-ratio: 1 / 1; width: 100%; }
.art-slot-mini { aspect-ratio: 1.6 / 1; width: 100%; }
.art-slot-thumb { aspect-ratio: 3 / 4; width: 100%; }
.art-slot-bottle { aspect-ratio: 0.55 / 1; }
.art-slot-tag { aspect-ratio: 0.7 / 1; }
/* ---- Art slot with real image ---- */
.art-slot.has-image {
background:
radial-gradient(120% 90% at 30% 25%, oklch(from var(--parch-3) l c h / 0.5), transparent 60%),
var(--parch-2);
}
.art-slot.has-image .art-slot-img {
position: absolute;
inset: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
object-fit: cover;
filter: saturate(0.86) contrast(1.04) sepia(0.06);
display: block;
}
.art-slot.has-image .art-slot-frame {
inset: 6px;
border: 1px solid oklch(from var(--ink-quill) l c h / 0.28);
box-shadow:
inset 0 0 0 1px oklch(from var(--parch-1) l c h / 0.55),
inset 0 0 26px oklch(from var(--ink-quill) l c h / 0.18);
pointer-events: none;
}
.art-slot.has-image .art-slot-label {
background: oklch(from var(--parch-1) l c h / 0.85);
padding: 1px 6px;
border: 1px solid oklch(from var(--ink-quill) l c h / 0.25);
}
/* ---- "Em Construção" diagonal banner across each spread ---- */
.spread-construction {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 30;
overflow: hidden;
}
.spread-construction-text {
/* Stripe geometry — calc'd to clear corner-to-corner on the 1480×920 spread */
display: block;
width: 180%;
text-align: center;
transform: rotate(-32deg);
padding: 22px 0;
background:
repeating-linear-gradient(
90deg,
oklch(from var(--gold) l c h / 0.92) 0 22px,
oklch(from var(--gold-deep) l c h / 0.92) 22px 44px
);
color: oklch(0.14 0.03 35);
font-family: var(--font-display, "Cinzel"), serif;
font-weight: 800;
letter-spacing: 0.38em;
text-transform: uppercase;
font-size: clamp(34px, 4.6vw, 64px);
text-shadow: 0 1px 0 oklch(from var(--gold) calc(l + 0.12) c h / 0.6);
box-shadow:
0 2px 0 oklch(0 0 0 / 0.18),
0 -2px 0 oklch(0 0 0 / 0.18),
0 24px 60px oklch(0 0 0 / 0.45);
border-top: 1px solid oklch(from var(--gold-deep) l c h / 0.7);
border-bottom: 1px solid oklch(from var(--gold-deep) l c h / 0.7);
}
@media (max-width: 1000px) {
.spread-construction-text {
transform: rotate(-58deg);
font-size: clamp(26px, 7vw, 40px);
letter-spacing: 0.3em;
padding: 16px 0;
}
}
/* ---- Mobile: stack pages ---- */
@media (max-width: 1000px) {
.spread-pages {
grid-template-columns: 1fr;
min-height: 0;
background: var(--parch-1);
}
.spread-binding { display: none; }
.page { padding: 40px 28px; }
.page-left, .page-right { padding-left: 28px; padding-right: 28px; }
.creature-name { font-size: 64px; }
.creature-head { grid-template-columns: 1fr; }
.creature-meta { text-align: left; padding-top: 8px; }
.meta-row { align-items: flex-start; }
.anatomy-layout { grid-template-columns: 1fr; }
.anatomy-main, .anatomy-detail, .anatomy-sample, .anatomy-main-note, .anatomy-sub, .anatomy-variants {
grid-column: auto; grid-row: auto;
}
.anatomy-detail, .anatomy-sub { align-items: flex-start; }
.anatomy-detail .hand-note, .anatomy-sub .hand-note { text-align: left; }
.variants-row { grid-template-columns: repeat(2, 1fr); }
.bestiary-book { padding: 50px 4% 80px; }
}
/* ---- Outro tweak ---- */
.bestiary-outro {
background: linear-gradient(180deg, var(--bg-deep), var(--bg));
}
/* ========================================================== */
/* ============== Bestiário · Stacked spreads ================ */
/* ========================================================== */
/* Carousel viewport — one spread visible at a time, slides L/R */
.book-viewport {
position: relative;
max-width: 1480px;
margin: 0 auto;
overflow: hidden;
}
.book-track {
display: flex;
width: 100%;
/* Smooth ease-out so the page glides into place */
transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.book-slide {
flex: 0 0 100%;
min-width: 0;
/* Tiny inner padding so the spread's box-shadow isn't clipped */
padding: 4px 8px;
}
.bestiary-book .bestiary-spread {
margin: 0 auto;
max-width: 100%;
}
.bestiary-book .book-slide .bestiary-spread { margin-bottom: 0; }
/* Folio header — keep name on the right side aligned */
.spread-folio { gap: 22px; }
.spread-folio > span:last-child {
font-family: "Cinzel", serif;
font-size: 11px;
letter-spacing: 0.32em;
color: var(--ink-2);
text-transform: uppercase;
}
/* sticky margin tag adjustment */
.bestiary-book .book-margin-tag {
position: static;
margin: 0 0 28px;
}
/* ---- Floating side arrow rails (do not overlap the pages) ----
The book max-width is 1480px. Center one rail in the gap between
the page edge and the viewport edge on each side. */
.folio-rail {
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 30;
pointer-events: none;
/* gap between book edge and viewport edge */
width: max(48px, calc((100vw - 1480px) / 2));
display: flex;
align-items: center;
justify-content: center;
}
.folio-rail-left { left: 0; }
.folio-rail-right { right: 0; }
.folio-arrow {
pointer-events: auto;
appearance: none;
width: 44px;
height: 44px;
display: grid;
place-items: center;
background: oklch(from var(--bg-deep) l c h / 0.78);
border: 1px solid oklch(from var(--gold) l c h / 0.35);
border-radius: 50%;
color: var(--gold);
cursor: pointer;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow:
0 6px 24px rgba(0,0,0,0.45),
inset 0 0 0 1px oklch(from var(--gold) l c h / 0.08);
transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.folio-arrow:hover:not(:disabled) {
border-color: var(--gold);
color: var(--gold);
box-shadow:
0 8px 30px oklch(from var(--ember) l c h / 0.45),
inset 0 0 0 1px oklch(from var(--gold) l c h / 0.2);
transform: scale(1.08);
}
.folio-arrow:active:not(:disabled) { transform: scale(0.96); }
.folio-arrow:disabled { opacity: 0.25; cursor: default; }
.folio-arrow-glyph {
font-family: "Cormorant Garamond", serif;
font-size: 28px;
line-height: 1;
font-weight: 500;
margin-top: -3px;
}
/* Tight viewports: tuck arrows close to viewport edge but don't overlap pages
(the .bestiary-book itself has 4% horizontal padding, so there's room) */
@media (max-width: 1560px) {
.folio-rail { width: 60px; }
}
@media (max-width: 1000px) {
.folio-rail { width: 44px; }
.folio-arrow { width: 38px; height: 38px; }
.folio-arrow-glyph { font-size: 22px; }
}
/* ========================================================== */
/* ============== Livros / Biblioteca ======================= */
/* ========================================================== */
.biblioteca-hero {
min-height: 80vh;
padding-top: 180px;
padding-bottom: 120px;
}
/* ---------- Reading order ---------- */
.biblioteca-order {
padding: 100px 6%;
max-width: 1480px;
margin: 0 auto;
}
.biblioteca-order-head {
display: grid;
grid-template-columns: 1.4fr auto;
gap: 40px;
align-items: end;
margin: 32px 0 48px;
}
.biblioteca-section-title {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: clamp(34px, 3.4vw, 52px);
line-height: 1.05;
letter-spacing: 0.02em;
margin: 14px 0 0;
color: var(--ink);
}
.biblioteca-section-title .em {
font-family: "Cormorant Garamond", serif;
font-style: italic;
color: var(--gold);
font-weight: 500;
}
.biblioteca-order-lede {
font-family: "Cormorant Garamond", serif;
font-size: 18px;
line-height: 1.6;
color: var(--ink-2);
margin: 16px 0 0;
max-width: 640px;
}
.order-toggle {
display: inline-flex;
border: 1px solid var(--line);
background: oklch(from var(--bg-deep) l c h / 0.6);
border-radius: 2px;
padding: 4px;
align-self: end;
}
.order-toggle-btn {
appearance: none;
background: transparent;
border: 0;
color: var(--ink-2);
font-family: "Cinzel", serif;
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
padding: 10px 18px;
cursor: pointer;
transition: all 0.25s ease;
}
.order-toggle-btn:hover { color: var(--ink); }
.order-toggle-btn.active {
background: oklch(from var(--ember) l c h / 0.12);
border: 1px solid oklch(from var(--gold) l c h / 0.45);
color: var(--gold);
margin: -1px;
}
.order-timeline {
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr) ;
gap: 12px;
align-items: stretch;
}
.order-step {
position: relative;
display: flex;
align-items: stretch;
}
.order-step-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
color: inherit;
padding: 24px 20px;
background: linear-gradient(180deg, var(--surface), var(--bg-deep));
border: 1px solid var(--line);
border-radius: 2px;
width: 100%;
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.order-step-card:hover {
border-color: oklch(from var(--gold) l c h / 0.5);
transform: translateY(-4px);
box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
.order-step-cover {
width: 110px;
aspect-ratio: 2 / 3;
overflow: hidden;
border: 1px solid oklch(from var(--gold) l c h / 0.25);
box-shadow: 0 10px 26px rgba(0,0,0,0.45);
margin-bottom: 18px;
background: var(--bg-deep);
}
.order-step-cover img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.order-step-body {
display: flex; flex-direction: column; gap: 4px;
}
.order-step-num {
font-family: "Cinzel", serif;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--gold);
}
.order-step-vol {
font-family: "Cinzel", serif;
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 2px;
}
.order-step-title {
font-family: "Cinzel", serif;
font-weight: 600;
font-size: 17px;
color: var(--ink);
margin-top: 4px;
line-height: 1.2;
}
.order-step-when {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 13px;
color: var(--ink-3);
margin-top: 6px;
}
.order-step-arrow {
position: absolute;
right: -14px;
top: 50%;
transform: translateY(-50%);
font-family: "Cormorant Garamond", serif;
font-size: 24px;
color: var(--gold);
pointer-events: none;
z-index: 2;
text-shadow: 0 0 12px oklch(from var(--ember) l c h / 0.55);
}
@media (max-width: 1100px) {
.biblioteca-order-head { grid-template-columns: 1fr; align-items: start; }
.order-timeline { grid-template-columns: repeat(2, 1fr); }
.order-step-arrow:nth-of-type(2n) { display: none; }
}
@media (max-width: 600px) {
.order-timeline { grid-template-columns: 1fr; }
.order-step-arrow {
right: 50%; top: auto; bottom: -20px; transform: translateX(50%) rotate(90deg);
}
}
/* ---------- Spreads ---------- */
.biblioteca-spreads {
padding: 60px 6% 100px;
display: flex;
flex-direction: column;
gap: 120px;
max-width: 1480px;
margin: 0 auto;
}
.book-spread {
position: relative;
scroll-margin-top: 90px;
}
.book-spread-folio {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 28px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line-soft);
}
.folio-num {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.32em;
color: var(--gold);
}
.folio-rule {
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--line), transparent);
}
.folio-vol {
font-family: "Cinzel", serif;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-3);
}
.book-spread-grid {
display: grid;
grid-template-columns: 380px 1fr;
gap: 60px;
align-items: start;
}
.book-spread.flipped .book-spread-grid {
grid-template-columns: 1fr 380px;
}
.book-spread.flipped .book-spread-cover-col { order: 2; }
.book-spread.flipped .book-spread-body { order: 1; }
/* Cover column */
.book-spread-cover-col {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 28px;
}
.book-spread-cover {
position: relative;
width: 100%;
aspect-ratio: 2 / 3;
overflow: hidden;
border: 1px solid oklch(from var(--gold) l c h / 0.35);
box-shadow:
0 40px 80px rgba(0,0,0,0.6),
0 0 0 1px oklch(from var(--gold) l c h / 0.18),
inset 0 0 0 1px oklch(from var(--gold) l c h / 0.15);
background: var(--bg-deep);
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
}
.book-spread-cover:hover {
transform: translateY(-6px) scale(1.01);
box-shadow:
0 60px 110px rgba(0,0,0,0.7),
0 0 70px oklch(from var(--ember) l c h / 0.35),
inset 0 0 0 1px oklch(from var(--gold) l c h / 0.25);
}
.book-spread-cover img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.book-spread-cover-shine {
position: absolute;
inset: 0;
background: linear-gradient(135deg, oklch(from var(--gold) l c h / 0.2), transparent 40%, transparent 60%, oklch(from var(--ember) l c h / 0.15));
opacity: 0; transition: opacity 0.6s ease;
pointer-events: none;
mix-blend-mode: overlay;
}
.book-spread-cover:hover .book-spread-cover-shine { opacity: 1; }
/* Library catalogue card (ficha) */
.ficha {
background:
linear-gradient(180deg,
oklch(from var(--surface) l c h / 0.95),
oklch(from var(--bg-deep) l c h / 0.85));
border: 1px solid var(--line);
padding: 22px 22px 24px;
position: relative;
}
.ficha::before {
/* punched hole top-left, like a real library card */
content: "";
position: absolute;
top: -7px; left: 16px;
width: 14px; height: 14px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 50%;
}
.ficha-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px dashed oklch(from var(--gold) l c h / 0.3);
}
.ficha-stamp {
font-family: "Cinzel", serif;
font-size: 9px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold);
}
.ficha-cota {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.ficha-list {
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ficha-list > div {
display: grid;
grid-template-columns: 96px 1fr;
gap: 12px;
align-items: baseline;
border-bottom: 1px dotted oklch(from var(--ink-3) l c h / 0.25);
padding-bottom: 6px;
}
.ficha-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ficha-list dt {
font-family: "Cinzel", serif;
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-3);
}
.ficha-list dd {
margin: 0;
font-family: "Cormorant Garamond", serif;
font-size: 14px;
line-height: 1.35;
color: var(--ink);
}
.ficha-price {
margin: 18px 0 18px;
padding: 14px 18px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
background:
linear-gradient(180deg,
oklch(from var(--ember) l c h / 0.12),
oklch(from var(--ember) l c h / 0.04));
border: 1px solid oklch(from var(--gold) l c h / 0.45);
border-radius: 2px;
}
.ficha-price-label {
font-family: "Cinzel", serif;
font-size: 9px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-3);
}
.ficha-price-value {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: 22px;
letter-spacing: 0.04em;
color: var(--gold);
text-shadow: 0 1px 0 oklch(from var(--bg-deep) l c h / 0.6);
}
.ficha-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
padding: 14px 18px;
background: linear-gradient(180deg, oklch(from var(--ember) l c h / 0.35), oklch(from var(--ember) l c h / 0.18));
border: 1px solid oklch(from var(--gold) l c h / 0.55);
color: var(--ink);
font-family: "Cinzel", serif;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
transition: all 0.3s ease;
}
.ficha-cta:hover {
background: linear-gradient(180deg, oklch(from var(--ember) l c h / 0.5), oklch(from var(--ember) l c h / 0.28));
border-color: var(--gold);
color: var(--gold);
box-shadow: 0 10px 30px oklch(from var(--ember) l c h / 0.35);
}
.ficha-cta svg { width: 14px; height: 14px; }
/* Body */
.book-spread-body {
padding-top: 4px;
}
.book-spread-head {
margin-bottom: 22px;
padding-bottom: 20px;
border-bottom: 1px solid var(--line-soft);
}
.book-spread-eyebrow {
font-family: "Cinzel", serif;
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold);
}
.book-spread-title {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: clamp(38px, 3.6vw, 58px);
line-height: 1.02;
letter-spacing: 0.01em;
color: var(--ink);
margin: 14px 0 8px;
text-shadow: 0 2px 30px oklch(from var(--ember) l c h / 0.2);
}
.book-spread-epithet {
font-family: "Cormorant Garamond", serif;
font-size: 22px;
font-style: italic;
color: var(--gold);
margin: 0;
}
.book-spread-themes {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 28px;
}
.book-theme {
font-family: "Cinzel", serif;
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-2);
padding: 7px 12px;
border: 1px solid var(--line);
background: oklch(from var(--bg-deep) l c h / 0.6);
}
.book-spread-prose {
font-family: "Cormorant Garamond", serif;
font-size: 18px;
line-height: 1.7;
color: var(--ink);
text-wrap: pretty;
}
.book-para { margin: 0 0 18px; }
:root[data-dropcap="on"] .book-para.has-dropcap::first-letter {
font-family: "Tangerine", "Cormorant Garamond", serif;
font-weight: 700;
font-size: 5em;
float: left;
line-height: 0.85;
padding: 4px 14px 0 0;
color: var(--gold);
text-shadow: 0 2px 20px oklch(from var(--ember) l c h / 0.4);
}
.book-spread-pull {
margin: 32px 0 0;
padding: 28px 36px;
position: relative;
background:
linear-gradient(180deg,
oklch(from var(--ember) l c h / 0.06),
oklch(from var(--ember) l c h / 0.02));
border-left: 2px solid oklch(from var(--gold) l c h / 0.5);
border-right: 1px solid var(--line-soft);
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
}
.book-spread-pull p {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 22px;
line-height: 1.45;
color: var(--ink);
margin: 0 0 12px;
text-wrap: balance;
}
.book-pull-mark {
position: absolute;
top: -22px; left: 16px;
font-family: "Cormorant Garamond", serif;
font-size: 110px;
line-height: 1;
color: oklch(from var(--gold) l c h / 0.45);
}
.book-pull-source {
font-family: "Cinzel", serif;
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-3);
}
@media (max-width: 1100px) {
.book-spread-grid {
grid-template-columns: 280px 1fr;
gap: 40px;
}
.book-spread.flipped .book-spread-grid { grid-template-columns: 1fr 280px; }
}
@media (max-width: 800px) {
.book-spread-grid,
.book-spread.flipped .book-spread-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.book-spread.flipped .book-spread-cover-col { order: 0; }
.book-spread.flipped .book-spread-body { order: 0; }
.book-spread-cover-col { position: static; max-width: 320px; margin: 0 auto; }
}
/* ---------- Coda ---------- */
.biblioteca-coda {
padding: 100px 6% 140px;
background: linear-gradient(180deg, var(--bg), var(--bg-deep));
border-top: 1px solid var(--line-soft);
}
.biblioteca-coda-inner {
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.biblioteca-coda-covers {
position: relative;
height: 360px;
display: flex;
justify-content: center;
align-items: center;
perspective: 1200px;
}
.biblioteca-coda-covers img {
position: absolute;
width: 200px;
aspect-ratio: 2 / 3;
object-fit: cover;
border: 1px solid oklch(from var(--gold) l c h / 0.4);
box-shadow: 0 30px 60px rgba(0,0,0,0.55);
transition: transform 0.6s ease;
}
.biblioteca-coda-covers img:nth-child(1) { left: calc(50% - 230px); }
.biblioteca-coda-covers img:nth-child(2) { left: calc(50% - 100px); }
.biblioteca-coda-covers img:nth-child(3) { left: calc(50% + 30px); }
.biblioteca-coda-covers img:nth-child(4) { left: calc(50% + 160px); }
.biblioteca-coda-title {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: clamp(32px, 3vw, 48px);
line-height: 1.1;
margin: 14px 0 20px;
color: var(--ink);
}
.biblioteca-coda-title .em {
font-family: "Cormorant Garamond", serif;
font-style: italic;
color: var(--gold);
font-weight: 500;
}
.biblioteca-coda-lede {
font-family: "Cormorant Garamond", serif;
font-size: 19px;
line-height: 1.6;
color: var(--ink-2);
margin: 0 0 28px;
}
.biblioteca-coda-actions {
display: flex; gap: 14px; flex-wrap: wrap;
}
@media (max-width: 900px) {
.biblioteca-coda-inner { grid-template-columns: 1fr; }
.biblioteca-coda-covers { height: 280px; }
.biblioteca-coda-covers img {
width: 140px;
}
.biblioteca-coda-covers img:nth-child(1) { left: calc(50% - 160px); }
.biblioteca-coda-covers img:nth-child(2) { left: calc(50% - 70px); }
.biblioteca-coda-covers img:nth-child(3) { left: calc(50% + 20px); }
.biblioteca-coda-covers img:nth-child(4) { left: calc(50% + 110px); }
}
/* ============================================================
PÁGINA II — HERÓIS E LENDAS
============================================================ */
/* ---- Rank color system ---- */
[data-rank="bronze"] { --rk: oklch(0.68 0.11 55); --rk-2: oklch(0.55 0.10 45); }
[data-rank="prata"] { --rk: oklch(0.84 0.012 250); --rk-2: oklch(0.68 0.01 250); }
[data-rank="ouro"] { --rk: oklch(0.84 0.13 88); --rk-2: oklch(0.7 0.12 80); }
[data-rank="platina"] { --rk: oklch(0.9 0.045 210); --rk-2: oklch(0.74 0.06 215); }
[data-rank="diamante"] { --rk: oklch(0.87 0.1 200); --rk-2: oklch(0.72 0.11 205); }
/* ---- Chapter hero (heroes) ---- */
.hsec-hero {
position: relative;
min-height: 96vh;
padding: 200px 8% 120px;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
isolation: isolate;
}
.hsec-hero-bg {
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(ellipse 55% 75% at 78% 35%, oklch(from var(--ember) l c h / 0.22), transparent 62%),
radial-gradient(ellipse 50% 70% at 8% 75%, oklch(from var(--gold) l c h / 0.07), transparent 60%),
linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 58%, var(--bg) 100%);
}
.hsec-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
repeating-linear-gradient(0deg, transparent 0 38px, oklch(from var(--gold) l c h / 0.025) 38px 39px),
repeating-linear-gradient(90deg, transparent 0 38px, oklch(from var(--gold) l c h / 0.025) 38px 39px);
pointer-events: none;
mask-image: radial-gradient(ellipse 70% 60% at 40% 50%, black, transparent 80%);
}
.hsec-hero-inner {
max-width: 760px;
position: relative;
z-index: 2;
}
.hsec-hero-figure {
position: absolute;
right: 2%;
bottom: -2%;
height: 104%;
z-index: 1;
pointer-events: none;
opacity: 0.92;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, black 16%, black 82%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, black 16%, black 82%, transparent 100%);
}
.hsec-hero-figure img {
height: 100%;
width: auto;
filter:
drop-shadow(0 0 70px oklch(from var(--ember) l c h / 0.4))
drop-shadow(0 30px 60px oklch(0 0 0 / 0.55));
}
@media (max-width: 1100px) {
.hsec-hero-figure { opacity: 0.16; right: -6%; }
.hsec-hero-inner { max-width: 100%; }
}
/* ---- Roster ---- */
.roster {
padding: 0 6% 30px;
max-width: 1480px;
margin: 0 auto;
}
.roster-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
@media (max-width: 900px) { .roster-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .roster-grid { grid-template-columns: 1fr; } }
.roster-card {
display: flex;
flex-direction: column;
border-right: 1px solid var(--line-soft);
transition: transform 0.4s ease;
}
.roster-card:last-child { border-right: none; }
@media (max-width: 900px) {
.roster-card:nth-child(2n) { border-right: none; }
}
.roster-card:hover { transform: translateY(-4px); }
.roster-thumb {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background:
radial-gradient(ellipse at 50% 30%, oklch(from var(--surface-2) l c h), var(--bg-deep));
border: 1px solid var(--line-soft);
border-bottom: none;
}
.roster-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 22%;
transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
filter: saturate(0.92) contrast(1.02);
}
.roster-card:hover .roster-thumb img { transform: scale(1.05); filter: saturate(1.05); }
.roster-thumb-veil {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, oklch(from var(--bg-deep) l c h / 0.85) 100%);
}
.roster-numeral {
position: absolute;
top: 12px; left: 14px;
font-family: "Cinzel", serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--gold);
text-shadow: 0 2px 12px oklch(0 0 0 / 0.7);
}
.roster-meta {
padding: 18px 18px 26px;
text-align: center;
border: 1px solid var(--line-soft);
border-top: none;
background: oklch(from var(--surface) l c h / 0.4);
flex: 1;
}
.roster-name {
font-family: "Cinzel", serif;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.06em;
margin: 0 0 4px;
color: var(--ink);
}
.roster-epithet {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 15px;
color: var(--ink-2);
margin: 0 0 14px;
min-height: 2.2em;
}
.roster-rank {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: "Cinzel", serif;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 10px;
font-weight: 600;
color: var(--rk);
padding: 5px 12px;
border: 1px solid oklch(from var(--rk) l c h / 0.4);
border-radius: 999px;
background: oklch(from var(--rk) l c h / 0.08);
}
/* ---- Rank gem ---- */
.rank-gem { display: inline-block; line-height: 0; color: var(--rk); }
.rank-gem-shape {
fill: oklch(from var(--rk) l c h / 0.18);
stroke: var(--rk);
stroke-width: 2;
}
.rank-gem-facet { stroke: oklch(from var(--rk) l c h / 0.5); stroke-width: 0.8; fill: none; }
.rank-gem-core { fill: var(--rk); }
/* ---- Hero dossier ---- */
.hero-dossier {
position: relative;
padding: 120px 8%;
overflow: hidden;
isolation: isolate;
border-top: 1px solid var(--line-soft);
}
.hero-backdrop {
position: absolute;
inset: 0;
z-index: -3;
background-size: cover;
background-position: center 28%;
opacity: 0.14;
filter: blur(3px) saturate(0.8);
transform: scale(1.08);
}
.hero-backdrop-veil {
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(ellipse 70% 60% at 50% 40%, transparent, oklch(from var(--bg) l c h / 0.7) 75%),
linear-gradient(180deg, var(--bg) 0%, oklch(from var(--bg) l c h / 0.6) 30%, oklch(from var(--bg) l c h / 0.6) 70%, var(--bg) 100%);
}
.hero-dossier::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(ellipse 50% 50% at var(--rk-x, 22%) 35%, oklch(from var(--rk) l c h / 0.07), transparent 60%);
}
.hero-dossier.flipped { --rk-x: 78%; }
.hero-dossier-grid {
display: grid;
grid-template-columns: 0.92fr 1.08fr;
gap: 72px;
align-items: center;
max-width: 1360px;
margin: 0 auto;
}
.hero-dossier.flipped .hero-art-col { order: 2; }
@media (max-width: 980px) {
.hero-dossier-grid { grid-template-columns: 1fr; gap: 40px; }
.hero-dossier.flipped .hero-art-col { order: 0; }
}
/* ---- Hero art: cutout figure ---- */
.hero-figure {
position: relative;
min-height: 620px;
display: flex;
align-items: flex-end;
justify-content: center;
}
.hero-figure-numeral {
position: absolute;
top: -3%;
left: 50%;
transform: translateX(-50%);
font-family: "Cinzel", serif;
font-weight: 900;
font-size: clamp(220px, 26vw, 360px);
line-height: 0.8;
color: oklch(from var(--rk) l c h / 0.1);
z-index: -1;
pointer-events: none;
}
.hero-figure-glow {
position: absolute;
bottom: 8%;
left: 50%;
width: 78%;
height: 78%;
transform: translateX(-50%);
background: radial-gradient(ellipse 50% 60% at 50% 45%, oklch(from var(--rk) l c h / 0.3), transparent 70%);
filter: blur(8px);
z-index: -1;
}
.hero-figure-img {
position: relative;
max-height: 760px;
width: auto;
max-width: 100%;
filter:
drop-shadow(0 0 50px oklch(from var(--ember) l c h / 0.35))
drop-shadow(0 28px 50px oklch(0 0 0 / 0.6));
}
.hero-figure-plinth {
position: absolute;
bottom: 2%;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 40px;
background: radial-gradient(ellipse at 50% 50%, oklch(from var(--rk) l c h / 0.35), transparent 70%);
filter: blur(10px);
}
/* ---- Hero art: cinematic plate ---- */
.hero-plate {
position: relative;
margin: 0;
aspect-ratio: 4 / 5;
overflow: hidden;
border: 1px solid oklch(from var(--rk) l c h / 0.3);
box-shadow:
0 40px 90px oklch(0 0 0 / 0.55),
inset 0 0 0 1px oklch(from var(--gold) l c h / 0.06);
}
.hero-plate img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 18%;
transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-plate:hover img { transform: scale(1.04); }
.hero-plate-grad {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 55%, oklch(from var(--bg-deep) l c h / 0.7) 100%);
}
.hero-plate-frame {
position: absolute; inset: 12px;
border: 1px solid oklch(from var(--gold) l c h / 0.25);
pointer-events: none;
}
.hero-plate-numeral {
position: absolute;
right: 18px; bottom: 10px;
font-family: "Cinzel", serif;
font-weight: 900;
font-size: 92px;
line-height: 1;
color: oklch(from var(--gold) l c h / 0.85);
text-shadow: 0 4px 24px oklch(0 0 0 / 0.7);
}
/* ---- Hero text column ---- */
.hero-tag {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 22px;
}
.hero-tag-num {
font-family: "Cinzel", serif;
text-transform: uppercase;
letter-spacing: 0.24em;
font-size: 11px;
color: var(--rk);
font-weight: 600;
white-space: nowrap;
}
.hero-tag .rule { flex: 1; height: 1px; background: linear-gradient(90deg, oklch(from var(--rk) l c h / 0.5), transparent); }
.hero-tag-of {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.1em;
}
.hero-nameplate {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: 26px;
}
.hero-name {
font-family: "Cinzel", serif;
font-weight: 800;
font-size: clamp(44px, 5vw, 72px);
line-height: 0.98;
margin: 0 0 8px;
color: var(--ink);
letter-spacing: 0.01em;
text-shadow: 0 4px 50px oklch(from var(--rk) l c h / 0.3);
}
.hero-epithet {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: clamp(20px, 2vw, 27px);
color: var(--rk);
margin: 0 0 8px;
}
.hero-lineage {
font-family: "Cinzel", serif;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 10.5px;
color: var(--ink-3);
margin: 0;
}
.hero-seal {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex-shrink: 0;
padding-top: 6px;
}
.hero-seal-tier {
font-family: "Cinzel", serif;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 10px;
font-weight: 700;
color: var(--rk);
}
@media (max-width: 540px) {
.hero-nameplate { flex-direction: column; }
.hero-seal { flex-direction: row; }
}
.hero-quote {
position: relative;
margin: 0 0 28px;
padding: 4px 0 4px 26px;
border-left: 2px solid oklch(from var(--rk) l c h / 0.6);
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: clamp(19px, 1.8vw, 24px);
line-height: 1.5;
color: var(--ink);
}
.hero-quote-mark {
position: absolute;
left: 14px; top: -10px;
font-family: "Cormorant Garamond", serif;
font-size: 60px;
color: oklch(from var(--rk) l c h / 0.25);
line-height: 1;
}
.hero-body {
margin-bottom: 34px;
}
.hero-body p {
font-family: "Cormorant Garamond", serif;
font-size: clamp(16px, 1.25vw, 19px);
line-height: 1.72;
color: var(--ink-2);
margin: 0 0 16px;
text-wrap: pretty;
}
.hero-body p:last-child { margin-bottom: 0; }
/* ---- Ficha (RPG stat block) ---- */
.ficha {
border: 1px solid var(--line);
background:
linear-gradient(180deg, oklch(from var(--surface) l c h / 0.7), oklch(from var(--surface-2) l c h / 0.4));
box-shadow: inset 0 0 0 1px oklch(from var(--gold) l c h / 0.05), 0 20px 50px oklch(0 0 0 / 0.3);
}
.ficha-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
border-bottom: 1px solid var(--line-soft);
font-family: "Cinzel", serif;
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 11px;
font-weight: 600;
color: var(--gold);
}
.ficha-mark { color: var(--rk); font-size: 13px; }
.ficha-list {
margin: 0;
padding: 8px 22px 14px;
}
.ficha-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 10px 0;
border-bottom: 1px dashed var(--line-soft);
}
.ficha-row:last-child { border-bottom: none; }
.ficha-row dt {
font-family: "Cinzel", serif;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 10.5px;
color: var(--ink-3);
white-space: nowrap;
}
.ficha-row dd {
margin: 0;
font-family: "Cormorant Garamond", serif;
font-size: 18px;
font-weight: 600;
color: var(--ink);
text-align: right;
}
/* ---- Rank ladder ---- */
.rank-ladder {
padding: 16px 22px 20px;
border-top: 1px solid var(--line-soft);
background: oklch(from var(--bg-deep) l c h / 0.4);
}
.rank-ladder-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.rank-ladder-label {
font-family: "Cinzel", serif;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 9.5px;
color: var(--ink-3);
}
.rank-ladder-tier {
font-family: "Cinzel", serif;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 11px;
font-weight: 700;
color: var(--rk);
}
.rank-track {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.rank-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
}
.rank-step-bar {
width: 100%;
height: 5px;
border-radius: 3px;
background: oklch(from var(--ink-3) l c h / 0.18);
transition: background 0.3s ease;
}
.rank-step.filled .rank-step-bar {
background: oklch(from var(--rk-2) l c h / 0.55);
}
.rank-step.current .rank-step-bar {
background: var(--rk);
box-shadow: 0 0 14px oklch(from var(--rk) l c h / 0.7);
}
.rank-step-name {
font-family: "Cinzel", serif;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 8.5px;
color: var(--ink-3);
transition: color 0.3s ease;
}
.rank-step.current .rank-step-name { color: var(--rk); font-weight: 700; }
/* ---- Lancelot triptych: As Três Eras ---- */
.ages {
max-width: 1180px;
margin: 90px auto 0;
}
.ages-head {
display: flex;
align-items: center;
gap: 22px;
margin-bottom: 40px;
}
.ages-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.ages-title {
font-family: "Cinzel", serif;
text-transform: uppercase;
letter-spacing: 0.24em;
font-size: 13px;
font-weight: 600;
color: var(--gold);
white-space: nowrap;
}
.ages-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 760px) { .ages-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } }
.age-card {
display: flex;
flex-direction: column;
}
.age-figure {
position: relative;
aspect-ratio: 3 / 4;
display: flex;
align-items: flex-end;
justify-content: center;
background:
linear-gradient(180deg, oklch(from var(--surface) l c h / 0.5), oklch(from var(--bg-deep) l c h / 0.6));
border: 1px solid var(--line-soft);
overflow: hidden;
}
.age-glow {
position: absolute;
bottom: 0; left: 50%;
width: 80%; height: 60%;
transform: translateX(-50%);
background: radial-gradient(ellipse at 50% 80%, oklch(from var(--rk) l c h / 0.28), transparent 70%);
filter: blur(6px);
}
.age-figure img {
position: relative;
height: 96%;
width: auto;
max-width: 92%;
object-fit: contain;
filter: drop-shadow(0 14px 30px oklch(0 0 0 / 0.5));
}
.age-card:nth-child(1) .age-figure img { height: 78%; }
.age-card:nth-child(2) .age-figure img { height: 92%; }
.age-card figcaption {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 8px 0;
border-top: 1px solid oklch(from var(--rk) l c h / 0.3);
margin-top: -1px;
}
.age-step {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--rk);
letter-spacing: 0.1em;
}
.age-era {
font-family: "Cinzel", serif;
font-weight: 700;
font-size: 17px;
letter-spacing: 0.08em;
color: var(--ink);
}
.age-note {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 15px;
color: var(--ink-2);
line-height: 1.45;
}
/* ---- Hero gallery (scene heroes) ---- */
.hero-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 1180px;
margin: 80px auto 0;
}
@media (max-width: 700px) { .hero-gallery { grid-template-columns: 1fr; } }
.hero-gallery-item {
position: relative;
margin: 0;
aspect-ratio: 16 / 11;
overflow: hidden;
border: 1px solid var(--line-soft);
}
.hero-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 28%;
transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-gallery-item:hover img { transform: scale(1.05); }
.hero-gallery-item figcaption {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 28px 18px 14px;
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 15px;
color: var(--ink);
background: linear-gradient(180deg, transparent, oklch(from var(--bg-deep) l c h / 0.9));
}
@media (max-width: 700px) {
.hsec-hero { padding: 160px 6% 80px; }
.hero-dossier { padding: 80px 6%; }
.hero-figure { min-height: 460px; }
.hero-figure-img { max-height: 520px; }
}
.characters-cta {
display: flex;
justify-content: center;
margin-top: 56px;
}