/* ══════════════════════════════════════════════════════════════════════ NOVIRA COMIC SYSTEM ---------------------------------------------------------------------- The reader-facing identity: comic ink. Halftone ground, ruled cels with gutters between them, heavy grotesk lettering, one loud accent. Opt a page in by putting `nvc` on . Nothing here applies without that class, so adding the stylesheet to a page cannot change it. Namespaced --nvc-* on purpose. creator-dashboard.css already owns a --nv-* set that dashboard/, chitra/settings and katha/edit depend on; these two must not collide until that system is deliberately retired. Accent #e8d5b7 is picked, not inherited from a framework: Tailwind's nearest values are lime-400 #a3e635 and yellow-300 #fde047. It is also unclaimed in this category, where Wattpad owns orange, Webtoon green, Royal Road and Scribble Hub blue. ══════════════════════════════════════════════════════════════════════ */ .nvc { --nvc-ground: #0c0d0a; --nvc-cel: #14160f; --nvc-cel-2: #16180f; --nvc-paper: #f2f1e8; --nvc-ink-2: #b9bbac; --nvc-ink-3: #8e9082; --nvc-hair: rgba(242,241,232,0.14); --nvc-hair-2: rgba(242,241,232,0.08); --nvc-acid: #e8d5b7; --nvc-acid-lo: rgba(232, 213, 183,0.16); --nvc-black: #0c0d0a; --nvc-rule: 0.1875rem; --nvc-ease: cubic-bezier(0.16, 1, 0.3, 1); --nvc-z-bg: 0; --nvc-z-body: 2; } body.nvc { background: var(--nvc-ground); color: var(--nvc-paper); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ── Ground ────────────────────────────────────────────────────────── */ .nvc-dots { position: fixed; inset: 0; z-index: var(--nvc-z-bg); pointer-events: none; opacity: 0.5; background-image: radial-gradient(rgba(242,241,232,0.10) 1px, transparent 1px); background-size: 0.5rem 0.5rem; mask-image: radial-gradient(120% 80% at 50% 0%, #000 18%, transparent 76%); -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 18%, transparent 76%); } .nvc-wash { position: fixed; inset: 0; z-index: var(--nvc-z-bg); pointer-events: none; background: radial-gradient(78% 44% at 50% -6%, rgba(232, 213, 183,0.10), transparent 70%); } /* ── Page shell and cels ───────────────────────────────────────────── */ .nvc-page { position: relative; z-index: var(--nvc-z-body); width: 100%; max-width: 60rem; margin: 0 auto; padding: clamp(2rem, 6vw, 3.5rem) clamp(1rem, 4vw, 2.25rem) clamp(3.5rem, 8vw, 5rem); } .nvc-strip { display: grid; grid-template-columns: 1fr; gap: 0.875rem; } .nvc-cel { position: relative; background: var(--nvc-cel); border: var(--nvc-rule) solid var(--nvc-paper); overflow: hidden; } /* A quieter cel for dense reading sections, where a full white rule on every block would fight the copy for attention. */ .nvc-cel-soft { border-color: var(--nvc-hair); border-width: 1px; } /* ── Lettering ─────────────────────────────────────────────────────── */ .nvc-greet { display: flex; align-items: center; gap: 0.5625rem; font-size: clamp(0.875rem, 1.9vw, 0.9375rem); font-weight: 500; color: var(--nvc-ink-2); margin: 0 0 clamp(0.875rem, 2.5vw, 1.125rem); } .nvc-greet i { display: block; width: 1.75rem; height: 0.1875rem; background: var(--nvc-acid); flex-shrink: 0; } .nvc-greet b { color: var(--nvc-paper); font-weight: 700; } .nvc-title { font-family: 'Outfit', 'Inter', sans-serif; font-optical-sizing: auto; font-size: clamp(2.125rem, 6.4vw, 3.75rem); font-weight: 800; letter-spacing: -0.038em; line-height: 1.0; color: var(--nvc-paper); margin: 0 0 1rem; max-width: 17ch; text-wrap: balance; } .nvc-h2 { font-family: 'Outfit', 'Inter', sans-serif; font-size: clamp(1.5rem, 3.6vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: var(--nvc-paper); margin: 0 0 0.875rem; text-wrap: balance; } /* Marker ring. The SVG inside is drawn on load by measuring its own path length, so it must stay a single . */ .nvc-ring { position: relative; display: inline-block; white-space: nowrap; } .nvc-ring > svg { position: absolute; left: -7%; top: 50%; width: 114%; height: 168%; transform: translateY(-50%) rotate(-1.4deg); overflow: visible; pointer-events: none; } .nvc-ring > svg path { fill: none; stroke: var(--nvc-acid); stroke-width: 6; stroke-linecap: round; } .nvc-lede { font-size: clamp(0.9375rem, 1.9vw, 1.0625rem); line-height: 1.6; color: var(--nvc-ink-2); max-width: 46ch; margin: 0 0 clamp(1.5rem, 3.5vw, 2rem); text-wrap: pretty; } /* ── Buttons ───────────────────────────────────────────────────────── */ .nvc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .nvc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.25rem; padding: 0 1.75rem; border-radius: 2rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform 0.35s var(--nvc-ease), background 0.3s var(--nvc-ease), color 0.3s var(--nvc-ease), box-shadow 0.35s var(--nvc-ease); } .nvc-btn-primary { background: var(--nvc-acid); color: var(--nvc-black); } .nvc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0.75rem 1.75rem -0.75rem rgba(232, 213, 183,0.7); } .nvc-btn-primary svg { transition: transform 0.35s var(--nvc-ease); } .nvc-btn-primary:hover svg { transform: translateX(0.25rem); } .nvc-btn-ghost { color: var(--nvc-paper); border-color: rgba(242,241,232,0.34); } .nvc-btn-ghost:hover { border-color: var(--nvc-paper); background: var(--nvc-paper); color: var(--nvc-black); transform: translateY(-2px); } .nvc-note { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.8125rem; font-weight: 600; color: var(--nvc-ink-3); margin: 0; } .nvc-note > span { white-space: nowrap; } .nvc-note a { color: var(--nvc-acid); text-decoration: none; border-bottom: 2px solid var(--nvc-acid-lo); transition: border-color 0.25s var(--nvc-ease); } .nvc-note a:hover { border-bottom-color: var(--nvc-acid); } .nvc-note-sep { color: rgba(242,241,232,0.26); } /* ── Step cels: a numbered panel that floods on hover ──────────────── */ .nvc-step { display: flex; flex-direction: column; gap: 0.375rem; min-height: 10rem; padding: 2.5rem 1.125rem 1rem; text-decoration: none; color: inherit; transition: transform 0.4s var(--nvc-ease); } .nvc-step-fill { position: absolute; inset: 0; background: var(--nvc-acid); transform: translateY(101%); transition: transform 0.45s var(--nvc-ease); } /* Lift content above the fill. The number badge is excluded: it is absolutely positioned and this rule would outrank it. */ .nvc-step > *:not(.nvc-step-fill):not(.nvc-step-n) { position: relative; } .nvc-step:hover { transform: translateY(-3px); } .nvc-step:hover .nvc-step-fill { transform: translateY(0); } .nvc-step:hover .nvc-step-t, .nvc-step:hover .nvc-step-d, .nvc-step:hover .nvc-step-go { color: var(--nvc-black); } .nvc-step:hover .nvc-step-n { background: var(--nvc-black); color: var(--nvc-acid); } .nvc-step-n { position: absolute; top: calc(-1 * var(--nvc-rule)); left: calc(-1 * var(--nvc-rule)); z-index: 1; min-width: 2.25rem; padding: 0.25rem 0.5rem 0.3125rem; background: var(--nvc-paper); border: var(--nvc-rule) solid var(--nvc-black); font-family: 'Outfit', 'Inter', sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-align: center; color: var(--nvc-black); transition: background 0.3s var(--nvc-ease), color 0.3s var(--nvc-ease); } .nvc-step-t { font-family: 'Outfit', 'Inter', sans-serif; font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--nvc-paper); transition: color 0.3s var(--nvc-ease); } .nvc-step-d { font-size: 0.8125rem; line-height: 1.5; color: var(--nvc-ink-2); transition: color 0.3s var(--nvc-ease); } .nvc-step-go { margin-top: auto; align-self: flex-end; color: var(--nvc-ink-3); transition: color 0.3s var(--nvc-ease), transform 0.4s var(--nvc-ease); } .nvc-step:hover .nvc-step-go { transform: translate(0.25rem, -0.25rem); } /* ── Feature list ──────────────────────────────────────────────────── */ .nvc-list { list-style: none; margin: 0; padding: 0; } .nvc-list li { position: relative; padding: 0.8125rem 0 0.8125rem 1.5rem; border-bottom: 1px solid var(--nvc-hair-2); font-size: 0.9375rem; line-height: 1.5; color: var(--nvc-ink-2); } .nvc-list li:last-child { border-bottom: 0; } .nvc-list li::before { content: ''; position: absolute; left: 0; top: 1.3125rem; width: 0.5rem; height: 0.5rem; background: var(--nvc-acid); } /* ── Tag ───────────────────────────────────────────────────────────── */ .nvc-tag { display: inline-block; padding: 0.3125rem 0.625rem; background: var(--nvc-acid); color: var(--nvc-black); font-family: 'Outfit', 'Inter', sans-serif; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } /* ── Skip / quiet link ─────────────────────────────────────────────── */ .nvc-quiet { display: inline-block; font-size: 0.875rem; font-weight: 600; color: var(--nvc-ink-3); text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.25s var(--nvc-ease), border-color 0.25s var(--nvc-ease); } .nvc-quiet:hover { color: var(--nvc-paper); border-bottom-color: var(--nvc-acid); } .nvc-page a:focus-visible { outline: 3px solid var(--nvc-acid); outline-offset: 3px; } /* ── The panel fan ───────────────────────────────────────────────────── Real 3D from transformed elements and CSS perspective, so there is no WebGL payload and it still renders with depth on a cheap phone. */ .nvc-art { position: relative; display: flex; align-items: center; justify-content: center; /* Tall enough to hold the fan once perspective projects it, or the back leaves spill out of the box and land on whatever sits below. */ height: clamp(13rem, 46vw, 15rem); perspective: 60rem; perspective-origin: 50% 45%; } .nvc-stack { position: relative; width: 9.5rem; height: 12.5rem; transform-style: preserve-3d; transform: rotateX(9deg) rotateY(-26deg) rotateZ(-3deg) scale(0.78); will-change: transform; } .nvc-pane { position: absolute; inset: 0; background: var(--nvc-cel-2); border: 0.125rem solid var(--nvc-paper); box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.55); overflow: hidden; will-change: transform; } .nvc-pane:nth-child(1) { transform: translateZ(-4.5rem) translate(-1.6rem, 1.3rem) rotate(-7deg); opacity: 0.45; } .nvc-pane:nth-child(2) { transform: translateZ(-3rem) translate(-1rem, 0.85rem) rotate(-4.5deg); opacity: 0.62; } .nvc-pane:nth-child(3) { transform: translateZ(-1.5rem) translate(-0.5rem, 0.4rem) rotate(-2deg); opacity: 0.8; } .nvc-pane:nth-child(4) { transform: translateZ(0); } .nvc-pane:nth-child(5) { transform: translateZ(1.5rem) translate(0.55rem, -0.45rem) rotate(2.5deg); } .nvc-pane i { position: absolute; left: 0.75rem; right: 1.75rem; height: 0.375rem; background: rgba(242,241,232,0.28); border-radius: 0.1875rem; } .nvc-pane i:nth-of-type(1) { top: 1rem; } .nvc-pane i:nth-of-type(2) { top: 2rem; right: 3rem; } .nvc-pane i:nth-of-type(3) { top: 3rem; right: 2.25rem; } .nvc-pane-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(242,241,232,0.3) 1px, transparent 1px); background-size: 0.4375rem 0.4375rem; opacity: 0.5; } .nvc-pane-acid { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: var(--nvc-acid); } .nvc-pane-acid::after { content: ''; position: absolute; left: 0.75rem; bottom: 0.75rem; width: 45%; height: 0.375rem; background: var(--nvc-black); } .nvc-pane-ring { position: absolute; left: 14%; top: 30%; width: 72%; height: 40%; border: 0.1875rem solid var(--nvc-acid); border-radius: 50%; transform: rotate(-8deg); } /* ── Motion pre-state ────────────────────────────────────────────────── Applied only when the page has confirmed GSAP is present and motion is not reduced, so a failed CDN or a reduced-motion setting still paints everything normally. */ .nvc-js .nvc-fade { opacity: 0; } .nvc-js .nvc-greet { opacity: 0; } .nvc-js .nvc-rise { opacity: 0; } .nvc-js .nvc-ring > svg path { stroke-dasharray: 1; stroke-dashoffset: 1; } @media (prefers-reduced-motion: reduce) { .nvc-btn, .nvc-step, .nvc-step-fill, .nvc-step-go, .nvc-step-n, .nvc-quiet { transition: none; } .nvc-step:hover { transform: none; } } @media (max-width: 30rem) { .nvc-actions { flex-direction: column; align-items: stretch; } .nvc-btn { width: 100%; } } @media (min-width: 52rem) { .nvc-stack { width: 11.5rem; height: 15rem; transform: rotateX(9deg) rotateY(-26deg) rotateZ(-3deg); } .nvc-art { height: clamp(15rem, 26vw, 19rem); } } /* ══════════════════════════════════════════════════════════════════════ NAV partials/header.ejs ships a light pill built for light pages. Every page that opts into this system is dark, so recolour it here rather than repeating the override in each view. ══════════════════════════════════════════════════════════════════════ */ body.nvc .premium-nav-glass { background: rgba(14, 15, 12, 0.84); border: 1px solid rgba(242,241,232,0.12); border-radius: 1rem !important; box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.6); } body.nvc .logo-img { content: url('/Novira.png'); } body.nvc #logoText { color: var(--nvc-paper) !important; } body.nvc .nav-link-premium, body.nvc .secondary-nav-btn { color: var(--nvc-ink-2); } body.nvc .nav-link-premium:hover, body.nvc .secondary-nav-btn:hover { background: rgba(242,241,232,0.08); color: var(--nvc-paper); } body.nvc .nav-link-premium.active { background: rgba(242,241,232,0.11); color: var(--nvc-paper); } body.nvc .join-btn { background: var(--nvc-acid) !important; color: var(--nvc-black) !important; border-radius: 1.25rem !important; } body.nvc .join-btn:hover { background: #f2e4d0 !important; } body.nvc .search-bar-premium { background: rgba(242,241,232,0.06); border: 1px solid rgba(242,241,232,0.12); border-radius: 0.625rem; color: var(--nvc-paper); } body.nvc .search-bar-premium::placeholder { color: var(--nvc-ink-3); } body.nvc .search-bar-premium:focus { border-color: var(--nvc-acid); box-shadow: 0 0 0 3px rgba(232, 213, 183,0.18); } body.nvc .nav-icon-btn, body.nvc .hamburger-btn { color: var(--nvc-ink-2); } body.nvc .nav-icon-btn:hover { background: rgba(242,241,232,0.09); color: var(--nvc-paper); } /* styles.css hard-codes the account glyph to the dark ink colour instead of currentColor, so on a dark pill it disappears. Hand it back. */ body.nvc .account-icon svg, body.nvc .account-icon:hover svg { stroke: currentColor; } body.nvc .notif-badge-premium { border-color: #0e0f0c; } /* Drawer is now the same light sheet as the public nav. Do not restyle it with acid — that would make Katha/comic pages a different product. */