@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Literata:opsz,wght@7..72,500;7..72,600;7..72,700;7..72,800&display=swap"); /* ========================================================= FICSVERSE — DIVISÃO DE FANFIC / CSS ESTELAR CINZA Este CSS é único. Não precisa puxar main.css, darkmode.css ou JS da fanfic. ========================================================= */ /* ========================================================= 01. CORES / TEMAS Para usar, troque a classe do body: theme-roxo ou theme-estelar. ========================================================= */ /* TEMA ESTELAR / CINZA Este arquivo já é cinza por padrão. Pode usar com: ou até deixar que continuará cinza. */ :root, body.theme-roxo, body.theme-estelar { --accent: #686868; --accent-2: #a4a4a4; --accent-rgb: 104, 104, 104; --bg: #eeeeee; --card: #ffffff; --card-soft: #eeeeee; --text: #252525; --soft-text: #555555; --muted: #777777; --border: rgba(var(--accent-rgb), .22); --sidebar-bg: #505050; --sidebar-text: #f7f7f7; --sidebar-muted: rgba(255, 255, 255, .72); --sidebar-shadow: rgba(0, 0, 0, .32); } /* ========================================================= 02. BASE ========================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 82% -10%, rgba(var(--accent-rgb), .12), transparent 34%), var(--bg); color: var(--text); font-family: Inter, Arial, sans-serif; font-size: 16px; line-height: 1.7; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } /* ========================================================= 03. LATERAL / SINOPSE ========================================================= */ .division-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; width: min(42vw, 550px); min-width: 360px; min-height: 100vh; max-height: 100vh; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; overflow-x: hidden; background-color: var(--sidebar-bg); background-image: linear-gradient(180deg, rgba(30, 10, 42, .46), rgba(16, 7, 25, .72)), url("https://www.transparenttextures.com/patterns/asfalt-light.png"); background-repeat: repeat; background-size: auto; background-position: center; box-shadow: 18px 0 55px var(--sidebar-shadow); } /* textura mais escura para o tema estelar */ body.theme-estelar .division-sidebar { background-image: linear-gradient(180deg, rgba(40, 40, 40, .48), rgba(12, 12, 12, .70)), url("https://www.transparenttextures.com/patterns/asfalt-light.png"); } /* barra de rolagem da lateral, se a sinopse for grande */ .division-sidebar::-webkit-scrollbar { width: 6px; } .division-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 999px; } .sidebar-inner { position: relative; z-index: 1; width: min(86%, 455px); padding: 42px 0; color: var(--sidebar-text); text-align: center; } /* NOME DA FIC */ .division-sidebar h1 { margin: 0; color: #ffffff; font-family: Literata, Georgia, serif; font-size: clamp(1.55rem, 2.5vw, 2.45rem); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; text-shadow: 0 8px 20px rgba(0, 0, 0, .28); } /* AUTORA */ .byline { margin: 12px 0 24px; color: var(--sidebar-muted); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .byline strong { color: #ffffff; } /* SINOPSE */ .synopsis { max-height: none; overflow: visible; padding-right: 0; color: var(--sidebar-text); font-family: Literata, Georgia, serif; font-size: .92rem; line-height: 1.58; text-align: justify; text-shadow: 0 2px 10px rgba(0, 0, 0, .20); } /* ========================================================= 04. REDES SOCIAIS / RODAPÉ ========================================================= */ .division-socials { display: flex; align-items: center; justify-content: center; gap: 13px; list-style: none; margin: 34px 0 20px; padding: 0; } .division-socials a { display: grid; place-items: center; width: 38px; height: 38px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .20); border-radius: 50%; color: #ffffff; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); transition: .22s ease; } .division-socials a:hover { background: #ffffff; color: var(--accent); transform: translateY(-2px); } .division-footer { margin: 0; color: rgba(255, 255, 255, .50); font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* ========================================================= 05. CONTEÚDO PRINCIPAL ========================================================= */ .division-main { width: calc(100% - min(42vw, 550px)); min-height: 100vh; margin-left: min(42vw, 550px); padding: clamp(36px, 5vw, 70px); } /* TÍTULO "ESCOLHA UMA PARTE" */ .division-heading { max-width: 880px; margin: 0 auto 28px; padding: 0 18px 6px; background: transparent; border: 0; box-shadow: none; text-align: center; } .division-heading h2 { width: max-content; max-width: 100%; margin: 0 auto; color: var(--accent); font-family: Literata, Georgia, serif; font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; } .division-heading h2::before, .division-heading h2::after { content: "✦"; display: inline-block; margin: 0 .55em; color: rgba(var(--accent-rgb), .70); font-size: .55em; vertical-align: .18em; } /* ========================================================= 06. CONTADOR ========================================================= */ .counter-box { margin-top: 18px; color: var(--muted); text-align: center; } .counter-box img { display: block; width: auto; max-height: 28px; margin: 0 auto 6px; } .counter-box strong { display: block; color: var(--accent); font-family: Literata, Georgia, serif; font-size: .78rem; font-weight: 900; letter-spacing: .14em; line-height: 1; text-transform: uppercase; } /* ========================================================= 07. CARDS DAS DIVISÕES ========================================================= */ .division-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px); max-width: 880px; margin: 0 auto; } .division-card { overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 18px 44px rgba(var(--accent-rgb), .08); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .division-card:hover { transform: translateY(-5px); border-color: rgba(var(--accent-rgb), .34); box-shadow: 0 24px 60px rgba(var(--accent-rgb), .15); } .division-card a { display: block; height: 100%; } /* IMAGEM DO CARD */ .division-card img { display: block; width: 100%; aspect-ratio: 400 / 215; object-fit: cover; background: linear-gradient(90deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .06)), var(--card-soft); transition: transform .35s ease, filter .35s ease; } .division-card:hover img { transform: scale(1.035); filter: saturate(1.05); } .division-info { padding: 20px clamp(18px, 2.4vw, 24px) 23px; } /* INTERVALO DE CAPÍTULOS */ .division-info span { display: inline-flex; align-items: center; width: max-content; max-width: 100%; margin-bottom: 10px; padding: 5px 10px; background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .16); border-radius: 999px; color: var(--accent); font-size: .62rem; font-weight: 900; letter-spacing: .12em; line-height: 1; text-transform: uppercase; } /* TÍTULO DA PARTE */ .division-info h3 { margin: 0 0 9px; color: var(--accent); font-family: Literata, Georgia, serif; font-size: clamp(1.35rem, 2.3vw, 1.9rem); font-weight: 800; line-height: 1.1; } /* QUOTE */ .division-info p { margin: 0; color: var(--soft-text); font-size: .9rem; line-height: 1.62; text-align: justify; } /* ========================================================= 08. RESPONSIVO ========================================================= */ @media (max-width: 980px) { .division-sidebar { position: relative; width: 100%; min-width: 0; max-height: none; min-height: auto; padding: 54px 20px; box-shadow: none; } .sidebar-inner { width: min(92%, 680px); padding: 0; } .division-main { width: 100%; margin-left: 0; padding: 34px 18px 60px; } } @media (max-width: 760px) { .division-grid { grid-template-columns: 1fr; gap: 24px; } .division-sidebar h1 { font-size: 2.05rem; } .division-heading h2::before, .division-heading h2::after { margin: 0 .35em; } }