/* ─── Google Fonts ──────────────────────────────────────────────────────────
Descomente e ajuste se usar fonte do Google Fonts.
Ex: @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');
─────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Google Fonts — cole no :
*/
/* Google Fonts — cole no :
*/
:root {
--bg: #0c0c14;
--text: #ededf0;
--bg-card: #0c0c14;
--text-card: #ededf0;
--accent: #8b76e8;
--font-title: 'Bebas Neue', sans-serif;
--font-size-title: 2.2rem;
--title-letter-spacing: 0.03em;
--title-line-height: 1.1;
--font-body: 'Inter', sans-serif;
--font-size-body: 15px;
--body-letter-spacing: 0em;
--body-line-height: 1.65;
--font-label: monospace;
--font-size-label: 0.65rem;
--card-title-size: 1rem;
--card-title-ls: -0.01em;
--card-intro-size: 0.72rem;
--card-w: 260px;
--card-h: 180px;
--landing-img-opacity: 0.3;
--backdrop-blur: 6px;
--backdrop-opacity: 0.55;
--backdrop-opacity-landing: 0.25;
--hl-color: rgba(139, 118, 232, 0.38);
--hl-duration: 1s;
--hl-ease: cubic-bezier(0.25, 1, 0.5, 1);
--btn-bg: rgba(255,255,255,0.06);
--btn-border: rgba(255,255,255,0.13);
--btn-bg-hover: rgba(255,255,255,0.12);
--btn-border-hover: rgba(255,255,255,0.28);
--divider: rgba(255,255,255,0.07);
}
/* ─── Light theme ────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
--bg: #f0ede8;
--text: #1c1826;
--accent: #6b56c8;
--hl-color: rgba(255, 200, 30, 0.55);
--btn-bg: rgba(0,0,0,0.05);
--btn-border: rgba(0,0,0,0.12);
--btn-bg-hover: rgba(0,0,0,0.1);
--btn-border-hover: rgba(0,0,0,0.22);
--divider: rgba(0,0,0,0.09);
}
html, body {
height: 100%;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
overflow-x: hidden;
transition: background 0.4s, color 0.4s;
}
/* ─── Loading screen ─────────────────────────────────────────────────────── */
@property --l-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
@keyframes l-spin { to { --l-angle: 360deg; } }
@keyframes l-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
@keyframes l-border-pulse {
0%, 100% {
border-color: color-mix(in srgb, var(--accent) 25%, transparent);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
}
50% {
border-color: color-mix(in srgb, var(--accent) 75%, transparent);
box-shadow: 0 0 14px 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
}
@keyframes l-fadein {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.l-screen {
position: fixed;
inset: 0;
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
transition: opacity 0.7s ease, visibility 0.7s ease;
}
.l-screen.is-done {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.l-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: var(--landing-img-opacity);
pointer-events: none;
}
.l-border-trace {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.l-border-trace::before {
content: '';
position: absolute;
inset: -2px;
background: conic-gradient(
from var(--l-angle),
transparent 0%,
transparent 55%,
color-mix(in srgb, var(--accent) 40%, transparent) 70%,
var(--accent) 85%,
color-mix(in srgb, var(--accent) 40%, transparent) 95%,
transparent 100%
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
padding: 3px;
animation: l-spin 3s linear infinite;
}
.l-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
text-align: center;
padding: 2rem;
}
@media (max-width: 768px) {
.l-content { margin-bottom: 23vh; }
}
.l-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin-top: 2rem;
width: min(300px, 80vw);
opacity: 0;
animation: l-fadein 0.9s ease 0.9s forwards;
}
.l-email-input {
width: 100%;
background: color-mix(in srgb, var(--text) 6%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: 8px;
padding: 0.65rem 1rem;
color: var(--text);
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.02em;
outline: none;
text-align: center;
animation: l-border-pulse 2.2s ease-in-out infinite;
}
.l-email-input::placeholder {
opacity: 0.3;
font-style: italic;
}
.l-submit {
background: color-mix(in srgb, var(--accent) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
border-radius: 8px;
color: var(--text);
font-family: var(--font-label);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 0.6rem 2rem;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.l-submit:hover:not(:disabled) {
background: color-mix(in srgb, var(--accent) 28%, transparent);
border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.l-submit:disabled {
opacity: 0.45;
cursor: default;
animation: l-pulse 1s ease-in-out infinite;
}
.l-feedback {
font-family: var(--font-label);
font-size: 0.62rem;
letter-spacing: 0.08em;
text-align: center;
color: color-mix(in srgb, #ff7070 80%, var(--accent));
min-height: 1.2em;
line-height: 1.6;
}
.l-feedback a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ─── Landing background ─────────────────────────────────────────────────── */
.landing-bg {
position: fixed;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: var(--landing-img-opacity);
pointer-events: none;
}
/* ─── Carousel overlay ──────────────────────────────────────────────────── */
.c-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
pointer-events: all;
}
.c-backdrop {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--bg) calc(var(--backdrop-opacity) * 100%), transparent);
backdrop-filter: blur(var(--backdrop-blur));
-webkit-backdrop-filter: blur(var(--backdrop-blur));
z-index: -1;
}
.c-overlay.is-landing .c-backdrop {
background: color-mix(in srgb, var(--bg) calc(var(--backdrop-opacity-landing) * 100%), transparent);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.c-label {
position: absolute;
top: 2.5rem;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-family: var(--font-label);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
opacity: 0.3;
}
.c-nav-wrap {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
}
/* ─── 3D scene ──────────────────────────────────────────────────────────── */
.c-scene {
width: var(--card-w);
height: var(--card-h);
perspective: 1200px;
}
.c-track {
width: 100%;
height: 100%;
transform-style: preserve-3d;
cursor: grab;
}
.c-track:active { cursor: grabbing; }
/* ─── Cards ─────────────────────────────────────────────────────────────── */
.c-card {
position: absolute;
inset: 0;
width: var(--card-w);
height: var(--card-h);
background: color-mix(in srgb, var(--bg-card) 25%, transparent);
border: 1px solid color-mix(in srgb, var(--bg-card) 40%, transparent);
border-radius: 14px;
cursor: pointer;
user-select: none;
color: var(--text-card);
backface-visibility: hidden;
transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.c-card-inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.4rem 1.5rem;
}
.c-card::before {
content: '';
position: absolute;
top: 0; left: 1.5rem; right: 1.5rem;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0.6;
}
.c-card:hover {
background: color-mix(in srgb, var(--bg-card) 45%, transparent);
border-color: color-mix(in srgb, var(--bg-card) 65%, transparent);
}
@keyframes pulse-border {
0%, 100% {
box-shadow: 0 0 0 0px color-mix(in srgb, var(--accent) 0%, transparent),
0 0 12px 0px color-mix(in srgb, var(--accent) 0%, transparent);
border-color: var(--accent);
}
50% {
box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 15%, transparent),
0 0 20px 2px color-mix(in srgb, var(--accent) 25%, transparent);
border-color: color-mix(in srgb, var(--accent) 90%, transparent);
}
}
.c-card.is-current {
border-color: var(--accent);
animation: pulse-border 2.2s ease-in-out infinite;
}
.c-card__num {
font-family: var(--font-label);
font-size: var(--font-size-label);
letter-spacing: 0.12em;
opacity: 0.3;
}
.c-card__title {
font-family: var(--font-title);
font-size: var(--card-title-size);
font-weight: 700;
line-height: 1.3;
letter-spacing: var(--card-title-ls);
}
.c-card__intro {
font-size: var(--card-intro-size);
line-height: 1.5;
opacity: 0.45;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* ─── Nav row ───────────────────────────────────────────────────────────── */
.c-nav {
display: flex;
align-items: center;
gap: 1rem;
}
.c-btn {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--btn-border);
background: transparent;
color: var(--text);
font-size: 1.1rem;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.c-btn:hover {
background: var(--btn-bg-hover);
border-color: var(--btn-border-hover);
}
.c-dots { display: flex; gap: 6px; }
.c-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--btn-border-hover);
cursor: pointer;
transition: background 0.25s, transform 0.25s;
}
.c-dot.is-active {
background: var(--accent);
transform: scale(1.5);
}
.c-hint {
font-family: var(--font-label);
font-size: 0.65rem;
letter-spacing: 0.08em;
opacity: 0.18;
}
/* ─── Page content ──────────────────────────────────────────────────────── */
.p-content {
position: relative;
z-index: 1;
min-height: 100vh;
padding: 6rem 2rem 5rem;
opacity: 0;
}
.p-inner {
max-width: 660px;
margin: 0 auto;
}
.p-eyebrow {
display: block;
font-family: var(--font-label);
font-size: var(--font-size-label);
letter-spacing: 0.25em;
text-transform: uppercase;
opacity: 0.35;
margin-bottom: 1.25rem;
}
.p-title {
font-family: var(--font-title);
font-size: var(--font-size-title);
line-height: var(--title-line-height);
letter-spacing: var(--title-letter-spacing);
margin-bottom: 1rem;
}
.p-intro {
font-size: calc(var(--font-size-body) * 1.08);
line-height: var(--body-line-height);
letter-spacing: var(--body-letter-spacing);
opacity: 0.6;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--divider);
transition: font-size 0.2s;
}
.p-body ul {
padding-left: 1.4rem;
margin-bottom: 1rem;
}
.p-body ul li {
font-size: var(--font-size-body);
line-height: var(--body-line-height);
margin-bottom: 0.35rem;
list-style: disc;
}
.p-body p {
font-size: var(--font-size-body);
line-height: var(--body-line-height);
letter-spacing: var(--body-letter-spacing);
opacity: 0.75;
margin-bottom: 1.25rem;
transition: font-size 0.2s;
}
/* ─── Inline media (imagens, vídeos, áudio) ──────────────────────────────── */
.p-body figure {
margin: 2rem 0;
}
.p-body figure img,
.p-body figure video {
width: 100%;
border-radius: 10px;
display: block;
}
.p-body figure audio {
width: 100%;
margin-top: 0.5rem;
}
.p-body figcaption {
margin-top: 0.6rem;
font-family: var(--font-label);
font-size: 0.65rem;
letter-spacing: 0.12em;
opacity: 0.35;
text-align: center;
}
/* Imagem/vídeo flutuando à direita (opcional: class p-float) */
.p-body .p-float {
float: right;
width: 45%;
margin: 0 0 1.5rem 2rem;
}
.p-body .p-float img,
.p-body .p-float video { border-radius: 8px; }
@media (max-width: 600px) {
.p-body .p-float { float: none; width: 100%; margin: 1.5rem 0; }
}
/* ─── Quote block ────────────────────────────────────────────────────────── */
.p-quote {
position: relative;
margin: 2rem 0;
padding: 1.6rem 1.75rem 1.6rem 2rem;
background: color-mix(in srgb, var(--accent) 7%, transparent);
border-left: 3px solid var(--accent);
border-radius: 0 10px 10px 0;
}
.p-quote::before {
content: '\201C';
position: absolute;
top: -0.5rem;
left: 1.3rem;
font-family: var(--font-title);
font-size: 3.5rem;
color: var(--accent);
opacity: 0.25;
line-height: 1;
pointer-events: none;
}
.p-quote blockquote {
font-family: var(--font-title);
font-style: italic;
font-size: calc(var(--font-size-body) * 1.1);
line-height: 1.75;
opacity: 0.88;
margin-bottom: 0.75rem;
transition: font-size 0.2s;
}
.p-quote cite {
display: block;
font-family: var(--font-label);
font-style: normal;
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.35;
}
/* ─── Text Highlight 03 ──────────────────────────────────────────────────── */
.text-highlight {
all: unset;
background-repeat: no-repeat;
background-size: 0% 100%;
background-image: linear-gradient(var(--hl-color), var(--hl-color));
border-radius: 3px;
padding: 0 0.15em;
transition:
color calc(var(--hl-duration) / 4) var(--hl-ease),
background-size var(--hl-duration) var(--hl-ease);
}
.text-highlight.active {
background-size: 100% 100%;
}
/* ─── Paragraph separator ────────────────────────────────────────────────── */
.p-sep {
width: 44px;
height: 2px;
background: linear-gradient(90deg, var(--accent), transparent);
margin: 2rem 0;
opacity: 0.35;
}
/* ─── Button group (floating) ───────────────────────────────────────────── */
.btn-group {
position: fixed;
bottom: 1.75rem;
right: 1.75rem;
z-index: 200;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Base compartilhado entre todos os icon-buttons flutuantes */
.home-btn,
.chapter-btn,
.theme-btn {
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid var(--btn-border);
background: var(--btn-bg);
color: var(--text);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(16px);
transition: background 0.2s, border-color 0.2s, color 0.3s, opacity 0.3s;
}
/* Controles que só aparecem durante leitura */
.read-ctrl {
opacity: 0;
pointer-events: none;
}
.read-ctrl.is-visible {
opacity: 1;
pointer-events: all;
}
/* Tema sempre visível */
.theme-btn {
opacity: 1;
pointer-events: all;
}
.home-btn:hover,
.chapter-btn:hover,
.theme-btn:hover {
background: var(--btn-bg-hover);
border-color: var(--btn-border-hover);
}
/* ─── Size slider ────────────────────────────────────────────────────────── */
.size-slider {
-webkit-appearance: none;
width: 64px;
height: 3px;
border-radius: 2px;
background: var(--btn-border-hover);
cursor: pointer;
accent-color: var(--accent);
outline: none;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.size-slider.is-visible { opacity: 1; pointer-events: all; }
.size-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--text);
cursor: pointer;
margin-top: -4.5px;
transition: background 0.3s;
}
.size-slider::-moz-range-thumb {
width: 12px; height: 12px;
border: none;
border-radius: 50%;
background: var(--text);
cursor: pointer;
}
.f-trigger {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.1rem;
border-radius: 100px;
border: 1px solid var(--btn-border);
background: var(--btn-bg);
color: var(--text);
font-size: 0.75rem;
letter-spacing: 0.08em;
cursor: pointer;
backdrop-filter: blur(16px);
transition: background 0.2s, border-color 0.2s, color 0.3s;
}
.f-trigger:hover {
background: var(--btn-bg-hover);
border-color: var(--btn-border-hover);
}
.f-trigger svg { flex-shrink: 0; width: 14px; height: 14px; }
/* ─── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
:root {
--card-w: 200px;
--card-h: 160px;
}
.c-scene {
perspective: 700px;
width: min(200px, calc(100vw - 3rem));
}
.c-card {
width: min(200px, calc(100vw - 3rem));
}
.c-hint { display: none; }
/* f-trigger: só ícone, um pouco maior */
#fLabel { display: none; }
.f-trigger { padding: 0.6rem; }
.f-trigger svg { width: 18px; height: 18px; }
}