/* Theme Name: WritingNepal Theme URI: https://writingnepal.com Author: WritingNepal Author URI: https://writingnepal.com Description: Custom theme for WritingNepal — Nepal's literary platform for books, writers, and Catch. Built from the ground up with a bold ink-and-gold identity and a Substack-style Pay-Per-Post model for writers. Version: 3.9 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: writingnepal */ /* ============================================ WritingNepal — design tokens (v2: warmer & livelier) Color: --ink: #120A08 (sampled from real logo circle) --paper: #FBF8F2 (warm cream — book paper) --gold: #F7C600 (brand accent, sampled from real logo) --clay: #E86A33 (CTA / signup accent) --sky: #4E9FE0 (secondary accent — playful variety) --rose: #EF6C8E (secondary accent — playful variety) --leaf: #5FA675 (secondary accent — playful variety) --line: #E7E0D2 (hairline rule on cream) Type: Display (Latin headlines): 'Fraunces' — literary serif, leaned into more here via italic swashes for a warmer, hand-set feel. Devanagari: 'Noto Serif Devanagari' (headings) / 'Noto Sans Devanagari' (body). Latin body / UI: 'Work Sans' Signature element: A hand-inked underline stroke + small scattered "doodle" marks (stars, dots, squiggles) — the pen-and-paper motif, now let loose a bit more instead of staying prim. Shape language: Much rounder throughout — pill buttons, big soft card radii, playful tilt-on-hover — instead of tight corporate corners. ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500;1,9..144,700&family=Poppins:wght@700;800;900&family=Work+Sans:wght@400;500;600;700;800&family=Noto+Serif+Devanagari:wght@500;700;900&family=Noto+Sans+Devanagari:wght@400;500;600&display=swap'); :root{ --ink:#120A08; --ink-soft:#3A362F; --paper:#FBF8F2; --paper-deep:#F4EEE0; --gold:#F7C600; --gold-deep:#C99A00; --clay:#E86A33; --clay-deep:#C64F1E; --sky:#4E9FE0; --sky-deep:#2E7DBE; --rose:#EF6C8E; --rose-deep:#D3486C; --bronze:#A07F03; --bronze-deep:#725905; --leaf:#5FA675; --leaf-deep:#3F8459; --moss:#4B6B53; --line:#E7E0D2; --white:#FFFFFF; --radius:20px; --radius-lg:28px; --shadow: 0 10px 26px rgba(18,10,8,0.10); --shadow-pop: 0 14px 30px rgba(18,10,8,0.16); --bounce: cubic-bezier(.34,1.56,.64,1); --maxw: 1180px; --header-h: 84px; /* actual rendered height of .site-header, used so sticky elements (editor toolbar, side rails, etc.) stick just below it instead of being hidden underneath */ } /* ============================================ DARK THEME Every component on the site reads its colors through the CSS variables above (--ink, --paper, --paper-deep, --line, --white) rather than hardcoded hex values, so redefining just those handful of variables here flips the whole site's color scheme without needing to touch each component's own CSS. This won't be pixel-perfect everywhere a color was hardcoded instead of using a variable (worth spot-checking key pages after this ships), but covers the large majority of the site correctly out of the box. Toggled via [data-theme="dark"] on — see the inline script in header.php (logged-out visitors, localStorage) and the Display tab in Settings (logged-in preference, saved to usermeta). ============================================ */ [data-theme="dark"]{ --ink:#F4EEE0; --ink-soft:#C9C2B0; --paper:#17120F; --paper-deep:#221C17; --line:#3A322A; --white:#221C17; } /* ============================================ FONT SIZE PREFERENCE A blanket percentage scale on the body font-size — since most type throughout the site is set in rem units off the body's base size, this scales nearly everything proportionally. Toggled via [data-font-size] on . ============================================ */ [data-font-size="small"] body{ font-size:14px; } [data-font-size="large"] body{ font-size:18px; } [data-font-size="larger"] body{ font-size:20px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Work Sans', 'Noto Sans Devanagari', sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } .dev{ font-family:'Noto Sans Devanagari','Work Sans',sans-serif; } h1,h2,h3,h4{ font-family:'Fraunces','Noto Serif Devanagari',serif; margin:0 0 .4em; letter-spacing:-0.01em; color:var(--ink); } h1 .dev, h2 .dev, h3 .dev{ font-family:'Noto Serif Devanagari',serif; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } /* Every .avatar-* class across the theme sets its own width/height/ border-radius per context (feed card, sidebar, comment row, profile header, etc.) — none of them set object-fit, so an uploaded photo whose aspect ratio doesn't match the box gets stretched/squished instead of cropped to fit, which reads as the photo being "cut off". This one rule covers every context at once instead of patching each .avatar-sm variant (or relying on inline styles some templates forgot). */ img.avatar, img.avatar-sm, img.avatar-xl, img.avatar-lg{ object-fit:cover; object-position:center; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; } /* every page's
was flush against the footer with zero bottom spacing — short pages (few table rows, empty states, etc.) had their content run straight into the footer's top border. */ main{ display:block; padding-bottom:32px; } button{ font-family:inherit; cursor:pointer; } /* focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible{ outline:3px solid var(--clay); outline-offset:2px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } } /* ---------- signature underline stroke ---------- */ .ink-underline{ display:block; width:64px; height:10px; margin-top:6px; } .ink-underline path{ stroke:var(--gold); stroke-width:5; fill:none; stroke-linecap:round; } .ink-underline.clay path{ stroke:var(--clay); } .ink-underline.wide{ width:120px; } /* ---------- eyebrow ---------- */ .eyebrow{ font-family:'Work Sans',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--clay-deep); display:inline-flex; flex-direction:column; align-items:flex-start; margin-bottom:18px; } /* ================= PROTOTYPE NAV (review aid — remove before real launch) ================= */ .proto-nav{ background:#FDECC8; border-bottom:2px dashed var(--gold-deep); padding:8px 0; font-size:.8rem; } .proto-nav .wrap{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .proto-nav .label{ font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:.68rem; color:var(--ink-soft); } .proto-nav a{ background:var(--white); border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-weight:700; color:var(--ink); } .proto-nav a:hover{ border-color:var(--clay); color:var(--clay-deep); } .proto-nav a.current{ background:var(--ink); color:var(--gold); border-color:var(--ink); } .site-header{ background:var(--paper); color:var(--ink); position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); } .header-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:var(--maxw); margin:0 auto; gap:24px; } .brand{ display:flex; align-items:center; gap:12px; color:var(--ink); } .brand-mark{ width:52px;height:52px; flex:none; } .brand-mark img{ width:100%; height:100%; display:block; } .brand-text{ line-height:1.2; } .brand-name-row{ display:flex; align-items:baseline; gap:10px; } .brand-name{ font-family:'Fraunces',serif; font-weight:700; font-size:1.5rem; letter-spacing:.04em; color:var(--ink); white-space:nowrap; } .brand-tag{ font-size:.74rem; color:var(--ink-soft); letter-spacing:.01em; } .brand-since{ font-size:.64rem; color:var(--gold-deep); letter-spacing:.1em; text-transform:uppercase; font-weight:700; background:var(--paper-deep); padding:2px 8px; border-radius:999px; white-space:nowrap; } /* Same treatment as .brand-since above, reused on profile pages for the "Since [Month Year]" join-date badge — kept as its own class (rather than sharing .brand-since directly) so the header's max-width:680px rule that hides .brand-since on mobile doesn't also hide this; the join date should stay visible on mobile profiles. */ .profile-since{ display:inline-block; font-size:.64rem; color:var(--gold-deep); letter-spacing:.1em; text-transform:uppercase; font-weight:700; background:var(--paper-deep); padding:2px 8px; border-radius:999px; white-space:nowrap; } .main-nav{ display:flex; gap:6px; align-items:center; flex:1; justify-content:center; } .main-nav a{ padding:9px 16px; border-radius:999px; font-weight:600; font-size:.92rem; color:var(--ink-soft); transition:background .15s ease, color .15s ease; } .main-nav a:hover{ background:var(--paper-deep); color:var(--ink); } .header-actions{ display:flex; align-items:center; gap:14px; flex:none; } .header-greeting{ font-size:.82rem; color:var(--ink-soft); white-space:nowrap; } .header-greeting strong{ color:var(--ink); } .header-actions .icon-badge{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; color:var(--ink-soft); transition:background .15s ease, color .15s ease; } .header-actions .icon-badge:hover{ background:var(--paper-deep); color:var(--ink); } .header-actions .icon-badge-card{ color:var(--gold-deep); } .header-actions .icon-badge-card:hover{ background:rgba(247,198,0,0.16); color:var(--gold-deep); } .header-actions .icon-badge sup{ position:absolute; top:0; right:0; background:var(--bronze); color:var(--white); font-size:.6rem; font-weight:800; border-radius:999px; padding:1px 5px; line-height:1.3; } .notif-wrap{ position:relative; display:inline-flex; } .header-actions .pill-link{ background:var(--white); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:.78rem; font-weight:700; white-space:nowrap; } .btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:999px; font-weight:700; font-size:.88rem; border:2px solid transparent; transition:transform .25s var(--bounce), box-shadow .2s ease, background .15s ease; white-space:nowrap; } .btn:hover{ transform:translateY(-2px) scale(1.035); } .btn:active{ transform:translateY(0) scale(.98); } .btn-ghost{ color:var(--ink); border-color:var(--ink); } .btn-ghost:hover{ background:var(--ink); color:var(--paper); } .btn-gold{ background:var(--gold); color:var(--ink); } .btn-gold:hover{ background:var(--gold-deep); box-shadow:var(--shadow-pop); } .btn-clay{ background:var(--bronze); color:var(--white); } .btn-clay:hover{ background:var(--bronze-deep); box-shadow:var(--shadow-pop); } .btn-outline-ink{ border-color:var(--ink); color:var(--ink); background:transparent; } .btn-outline-ink:hover{ background:var(--ink); color:var(--paper); } .btn-rose{ background:var(--bronze); color:var(--white); } .btn-rose:hover{ background:var(--bronze-deep); box-shadow:var(--shadow-pop); } .btn-block{ width:100%; justify-content:center; } .nav-toggle{ display:none; background:none;border:none;color:var(--ink); font-size:1.6rem; } /* ================= HERO ================= */ .hero{ padding:64px 0 40px; position:relative; overflow:visible; } .hero-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; position:relative; } .hero h1{ font-family:'Poppins','Noto Serif Devanagari',sans-serif; font-size:clamp(2rem, 3.6vw, 3rem); line-height:1.15; font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; } .hero h1 .accent{ color:var(--clay); font-style:normal; font-weight:800; } .hero-underline{ width:min(360px, 70%); height:6px; background:var(--ink); border-radius:3px; margin-top:18px; } .hero p.lede{ font-size:1.1rem; color:var(--ink-soft); max-width:46ch; margin-top:22px; } .hero-art{ position:relative; aspect-ratio:1/0.82; display:flex; align-items:center; justify-content:center; overflow:visible; } .hero-art svg.character{ width:100%; height:auto; max-width:480px; } .doodle{ position:absolute; pointer-events:none; } .doodle-star{ color:var(--gold-deep); } .doodle-star.rose{ color:var(--rose); } .doodle-star.sky{ color:var(--sky); } .hero-doodle-1{ top:2%; left:2%; width:30px; animation:float-a 5s ease-in-out infinite; } .hero-doodle-2{ bottom:10%; right:0; width:24px; animation:float-b 4.2s ease-in-out infinite; } .hero-doodle-3{ top:44%; left:-6%; width:18px; animation:float-a 6s ease-in-out infinite; } .hero-chip{ position:absolute; background:var(--white); border-radius:999px; padding:9px 16px; font-weight:700; font-size:.82rem; box-shadow:var(--shadow-pop); display:flex; align-items:center; gap:6px; border:1px solid var(--line); } .hero-chip.stars{ top:6%; left:0; color:var(--gold-deep); transform:rotate(-4deg); } .hero-chip.readers{ bottom:2%; right:6%; color:var(--leaf-deep); transform:rotate(3deg); } @keyframes float-a{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-10px) rotate(8deg); } } @keyframes float-b{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(8px) rotate(-10deg); } } @media (prefers-reduced-motion: reduce){ .doodle{ animation:none !important; } } /* ================= SIGNUP SPLIT PANEL ================= */ .split-panel{ background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-lg); overflow:hidden; display:grid; grid-template-columns:1.05fr 1fr; box-shadow:6px 6px 0 var(--gold); margin:56px 0; } .split-books{ background:var(--paper-deep); padding:36px; display:flex; gap:16px; align-items:center; justify-content:center; position:relative; } .book-cover{ width:120px; border-radius:8px; box-shadow:0 14px 30px rgba(20,18,15,.28); transform:rotate(-6deg); overflow:hidden; aspect-ratio:2/3; background:linear-gradient(160deg,#2B3A2E,#12180F); color:#EADFC0; font-family:'Noto Serif Devanagari',serif; font-weight:700; display:flex;align-items:center;justify-content:center; text-align:center; padding:10px; font-size:1.05rem; transition:transform .3s var(--bounce); } .book-cover:hover{ transform:rotate(-2deg) translateY(-6px) scale(1.03); } .book-cover.two{ transform:rotate(6deg) translateY(20px); background:linear-gradient(160deg,#7C9FB0,#3E5A69); margin-left:-40px; } .book-cover.two:hover{ transform:rotate(2deg) translateY(12px) scale(1.03); } .split-form{ padding:40px; } .split-form h2{ font-size:1.5rem; text-align:left; } .split-form .login-hint{ font-size:.88rem; color:var(--ink-soft); margin-bottom:22px; } .split-form .login-hint a{ color:var(--clay-deep); font-weight:700; } .field{ margin-bottom:16px; } .field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; color:var(--ink-soft); } .field input{ width:100%; padding:12px 16px; border-radius:12px; border:1.5px solid var(--line); font-family:inherit; font-size:.95rem; background:var(--paper); transition:border-color .15s ease, box-shadow .15s ease; } .field input:focus{ border-color:var(--clay); outline:none; box-shadow:0 0 0 4px rgba(232,106,51,0.12); } .role-picker{ display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; } .role-btn{ flex:1; min-width:100px; padding:11px 10px; border-radius:999px; border:1.5px solid var(--ink); background:var(--ink); color:var(--paper); font-weight:700; font-size:.85rem; text-align:center; transition:background .2s ease, transform .25s var(--bounce); } .role-btn:hover{ transform:translateY(-2px) scale(1.04); } .role-btn.active{ background:var(--bronze); border-color:var(--bronze); } /* ================= BANNER STRIPS ================= */ .banner{ border-radius:var(--radius); padding:38px 40px; display:flex; align-items:center; gap:28px; margin:40px 0; } .banner-clay{ background:linear-gradient(120deg, #FBE0C6, #F6C98B); } .banner-ink{ background:var(--ink); color:var(--paper); } .banner h3{ font-size:1.6rem; margin-bottom:6px; } .banner p{ color:var(--ink-soft); margin:0 0 16px; max-width:44ch; } .banner-ink p{ color:#C9C2AE; } .banner-figure{ flex:none; width:150px;height:150px; border-radius:50%; background:rgba(255,255,255,.55); display:flex;align-items:center;justify-content:center; font-size:3rem; transform:rotate(-6deg); transition:transform .3s var(--bounce); } .banner:hover .banner-figure{ transform:rotate(4deg) scale(1.05); } .banner-ink .banner-figure{ background:rgba(247,198,0,.20); } .banner-content{ flex:1; } /* ---- paid-catch info box (Substack-style pitch) ---- */ .pitch-box{ background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-lg); padding:0; display:grid; grid-template-columns:.85fr 1.15fr; overflow:hidden; margin:40px 0; box-shadow:6px 6px 0 var(--gold); } .pitch-sketch{ background:var(--paper-deep); display:flex; align-items:center; justify-content:center; padding:32px; border-right:2px dashed var(--line); } .pitch-sketch svg{ width:100%; max-width:230px; } .pitch-content{ padding:36px 40px; } .pitch-kicker{ display:inline-block; background:var(--ink); color:var(--gold); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:5px 12px; border-radius:999px; margin-bottom:14px; } .pitch-content h3{ font-size:1.7rem; margin-bottom:10px; } .pitch-content p{ color:var(--ink-soft); max-width:48ch; margin:0 0 20px; } .pitch-content ul{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:8px; } .pitch-content li{ font-size:.92rem; color:var(--ink); display:flex; align-items:baseline; gap:8px; } .pitch-content li::before{ content:'✓'; color:var(--leaf-deep); font-weight:800; } .pitch-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .pitch-actions .fine{ font-size:.8rem; color:var(--ink-soft); } /* ================= STATS STRIP ================= */ .stats-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:56px 0; } .stat{ border-radius:var(--radius-lg); border:2px solid var(--ink); padding:26px; transition:transform .3s var(--bounce); display:flex; align-items:center; gap:16px; } .stat:hover{ transform:rotate(-1deg) translateY(-4px); } .stat .icon{ width:52px; height:52px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:1.4rem; background:var(--white); } .stat:nth-child(1){ background:#E4EFF9; box-shadow:5px 5px 0 var(--sky); } .stat:nth-child(2){ background:#FDECC8; box-shadow:5px 5px 0 var(--gold); } .stat:nth-child(3){ background:#E6F2E9; box-shadow:5px 5px 0 var(--leaf); } .stat .num{ font-family:'Fraunces',serif; font-weight:900; font-size:2rem; line-height:1; } .stat:nth-child(1) .num{ color:var(--sky-deep); } .stat:nth-child(2) .num{ color:var(--gold-deep); } .stat:nth-child(3) .num{ color:var(--leaf-deep); } .stat .lbl{ font-size:.82rem; letter-spacing:.02em; color:var(--ink-soft); margin-top:4px; line-height:1.35; } /* ================= RECOMMENDATIONS ================= */ .section{ margin:64px 0; } .section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; } .tabs{ display:flex; gap:6px; flex-wrap:wrap; } .tab{ padding:8px 18px; border-radius:999px; font-size:.85rem; font-weight:600; color:var(--ink-soft); border:1.5px solid var(--line); background:var(--white); transition:transform .2s var(--bounce); cursor:pointer; } .tab:hover{ transform:translateY(-2px); } .tab.active{ background:var(--ink); color:var(--gold); border-color:var(--ink); } .book-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; } .book-card{ position:relative; background:var(--white); border:1px solid var(--line); border-radius:16px; overflow:visible; transition:transform .3s var(--bounce), box-shadow .25s ease; } .book-card > a{ display:block; } .book-card-edit-link{ position:absolute; top:8px; right:8px; z-index:2; display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; background:var(--ink,#120A08); color:var(--gold,#F7C600); font-size:.72rem; font-weight:700; text-decoration:none; box-shadow:var(--shadow-pop, 0 4px 12px rgba(0,0,0,.2)); } .book-card-edit-link:hover{ background:var(--clay-deep,#A07F03); color:var(--white,#fff); } .book-card:nth-child(odd):hover{ transform:translateY(-6px) rotate(-1.5deg); box-shadow:var(--shadow-pop); } .book-card:nth-child(even):hover{ transform:translateY(-6px) rotate(1.5deg); box-shadow:var(--shadow-pop); } .book-card .cover{ position:relative; aspect-ratio:2/3; border-radius:16px 16px 0 0; background:linear-gradient(155deg,#3E5A69,#12181F); overflow:hidden; } .book-card .cover.c2{ background:linear-gradient(155deg,#8A3B2C,#2B140C); } .book-card .cover.c3{ background:linear-gradient(155deg,#5FA675,#141C15); } .book-card .cover.c4{ background:linear-gradient(155deg,#7C6A9F,#211A2E); } .book-card .cover.c5{ background:linear-gradient(155deg,#C98F12,#3E2A05); } .book-card .body{ padding:12px 14px 16px; } .book-card .title{ font-family:'Noto Serif Devanagari',serif; font-weight:700; font-size:.95rem; margin-bottom:4px; color:var(--ink); } .book-card .author{ font-size:.78rem; color:var(--ink-soft); margin-bottom:8px; } .badge-rating{ display:inline-flex; align-items:center; gap:4px; background:var(--gold); color:var(--ink); font-size:.74rem; font-weight:800; padding:4px 10px; border-radius:999px; } /* ================= FEATURED CATCH ================= */ .catch-feature{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:2px solid var(--ink); box-shadow:6px 6px 0 var(--gold); min-height:420px; display:flex; align-items:flex-end; } .catch-bg{ position:absolute; inset:0; } .catch-bg svg{ width:100%; height:100%; display:block; } /* When a real cover photo exists, this same element becomes: .catch-bg.has-image{ background-image:url(...); background-size:cover; background-position:center; } — swap the inline above for nothing, and the scrim + text below need no changes at all. */ .catch-bg.has-image{ background-size:cover; background-position:center; } .catch-bg.has-image svg{ display:none; } .catch-scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(18,10,8,0.92) 0%, rgba(18,10,8,0.62) 42%, rgba(18,10,8,0.05) 75%); } .catch-content{ position:relative; z-index:2; padding:36px 40px; width:100%; color:var(--paper); } .catch-badge{ display:inline-block; background:rgba(251,248,242,0.14); border:1px solid rgba(251,248,242,0.3); color:var(--paper); font-size:.74rem; font-weight:700; padding:5px 12px; border-radius:999px; margin-bottom:14px; } .catch-content h3{ color:var(--paper); font-size:1.7rem; max-width:26ch; } .catch-content .byline{ color:#E9E2D0; font-size:.85rem; margin-top:6px; margin-bottom:6px; } .catch-meta{ display:flex; gap:18px; font-size:.82rem; color:#E9E2D0; margin-top:22px; flex-wrap:wrap; } /* ================= BLOG + TAGS ================= */ .blog-layout{ display:grid; grid-template-columns:1fr; /* was 1.6fr 1fr — the second column held the category-tag sidebar widget, removed when category archive pages were disabled (their only purpose was linking to that now-gone page) */ gap:28px; } .blog-tabs{ display:flex; gap:22px; border-bottom:1.5px solid var(--line); margin-bottom:22px; } .blog-tabs a{ padding:0 0 12px; font-weight:700; font-size:.88rem; color:var(--ink-soft); border-bottom:3px solid transparent; } .blog-tabs a.active{ color:var(--clay-deep); border-color:var(--clay); } .entry-feature h3{ font-size:1.7rem; margin-bottom:14px; } .entry-feature .meta{ font-size:.8rem; color:var(--ink-soft); margin-bottom:10px; } .entry-excerpt{ color:var(--ink-soft); font-size:.98rem; } .entry-excerpt .dev{ font-size:1.02rem; line-height:1.9; } .entry-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; font-size:.85rem; color:var(--ink-soft); } .entry-foot a.readmore{ color:var(--clay-deep); font-weight:700; } .tag-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px; } .tag-card h4{ font-size:.95rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; } .tag-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px; } .tag-list li{ display:block; } .tag-list a{ display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-weight:600; font-size:.86rem; padding:8px 14px; border-radius:999px; background:var(--paper-deep); border:1.5px solid transparent; transition:transform .2s var(--bounce), background .15s ease, border-color .15s ease; } .tag-list a:hover{ transform:translateY(-2px); border-color:var(--clay); background:var(--white); } .tag-list li:nth-child(6n+1) a{ background:#FDECC8; } .tag-list li:nth-child(6n+2) a{ background:#E4EFF9; } .tag-list li:nth-child(6n+3) a{ background:#FCE4E9; } .tag-list li:nth-child(6n+4) a{ background:#E6F2E9; } .tag-list li:nth-child(6n+5) a{ background:#F1E7F5; } .tag-list li:nth-child(6n+6) a{ background:#FDE7DA; } .tag-count{ background:rgba(18,10,8,0.08); color:var(--ink-soft); font-size:.72rem; font-weight:800; padding:2px 8px; border-radius:12px; } /* ================= 4-STEP PROCESS ================= */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; } .step{ padding:20px; } .step .icon{ width:68px;height:68px; border-radius:50%; background:var(--paper-deep); display:flex;align-items:center;justify-content:center; margin:0 auto 14px; font-size:1.7rem; transition:transform .25s var(--bounce); } .step:hover .icon{ transform:rotate(-8deg) scale(1.08); } .step:nth-child(1) .icon{ background:#E4EFF9; } .step:nth-child(2) .icon{ background:#FCE4E9; } .step:nth-child(3) .icon{ background:#E6F2E9; } .step:nth-child(4) .icon{ background:#FDECC8; } .step h4{ font-family:'Work Sans',sans-serif; font-weight:700; font-size:.92rem; text-transform:uppercase; letter-spacing:.04em; } /* ---- submission CTA — its own row below the 4-step process, not part of that grid ---- */ .submit-ebook-row{ text-align:center; margin:36px 0 0; padding-top:28px; border-top:1px solid var(--line); } .submit-ebook-row a{ display:inline-flex; align-items:center; gap:8px; font-family:'Work Sans',sans-serif; font-weight:700; font-size:.95rem; color:var(--clay-deep); text-decoration:none; } .submit-ebook-row a:hover{ text-decoration:underline; } /* ================= AUTHORS ================= */ .authors-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:24px; } .author-feature{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; } .author-feature .meta{ font-size:.82rem; color:var(--ink-soft); margin-bottom:12px; } .author-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; text-align:center; } .avatar{ width:76px;height:76px;border-radius:50%; background:linear-gradient(155deg,#F7C600,#C64F1E); margin:0 auto 14px; } .author-card h4{ font-family:'Fraunces',serif; font-size:1.15rem; margin-bottom:2px; } .author-card .followers{ font-size:.82rem; color:var(--ink-soft); margin-bottom:16px; } .writers-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px; } .writer-mini{ display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--line); border-radius:16px; padding:16px; transition:transform .25s var(--bounce), box-shadow .2s ease; } .writer-mini:hover{ transform:translateY(-3px); box-shadow:var(--shadow); } .writer-mini .avatar{ width:52px;height:52px;margin:0; flex:none; } .writer-mini:nth-child(3n+1) .avatar{ background:linear-gradient(155deg,var(--sky),var(--sky-deep)); } .writer-mini:nth-child(3n+2) .avatar{ background:linear-gradient(155deg,var(--rose),var(--rose-deep)); } .writer-mini:nth-child(3n+3) .avatar{ background:linear-gradient(155deg,var(--gold),var(--clay-deep)); } .writer-mini .info{ flex:1; } .writer-mini h5{ font-size:.95rem; margin:0; font-family:'Work Sans'; font-weight:700; } .writer-mini p{ margin:0; font-size:.78rem; color:var(--ink-soft); } .writer-mini .btn{ padding:7px 14px; font-size:.78rem; } /* ================= CREATOR TRIO (writer / publisher / catcher — vibrant role cards) ================= */ .creator-trio{ margin:64px 0; } .creator-trio-head{ text-align:center; margin-bottom:32px; } .creator-trio-head h3{ font-family:'Poppins','Noto Serif Devanagari',sans-serif; font-weight:800; font-size:1.9rem; line-height:1.2; margin-bottom:10px; } .creator-trio-head p{ color:var(--ink-soft); max-width:52ch; margin:0 auto; } .creator-trio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .creator-card{ border-radius:var(--radius-lg); border:2px solid var(--ink); overflow:hidden; display:flex; flex-direction:column; background:var(--white); transition:transform .3s var(--bounce), box-shadow .2s ease; } .creator-card:hover{ transform:translateY(-6px) rotate(-0.6deg); } .creator-card.writer{ box-shadow:6px 6px 0 var(--sky); } .creator-card.publisher{ box-shadow:6px 6px 0 var(--gold); } .creator-card.catcher{ box-shadow:6px 6px 0 var(--leaf); } .creator-card .card-art{ padding:26px 20px 10px; display:flex; align-items:center; justify-content:center; } .creator-card.writer .card-art{ background:linear-gradient(160deg,#E4EFF9,#F7FBFE); } .creator-card.publisher .card-art{ background:linear-gradient(160deg,#FDECC8,#FFF9EC); } .creator-card.catcher .card-art{ background:linear-gradient(160deg,#E6F2E9,#F5FAF6); } .creator-card .card-art svg{ width:100%; max-width:190px; } .creator-card .card-body{ padding:22px 22px 26px; display:flex; flex-direction:column; flex:1; } .creator-role-kicker{ display:inline-block; align-self:flex-start; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:4px 11px; border-radius:999px; margin-bottom:10px; } .creator-card.writer .creator-role-kicker{ background:#E4EFF9; color:var(--sky-deep); } .creator-card.publisher .creator-role-kicker{ background:#FDECC8; color:var(--gold-deep); } .creator-card.catcher .creator-role-kicker{ background:#E6F2E9; color:var(--leaf-deep); } .creator-card h4{ font-family:'Fraunces',serif; font-size:1.35rem; margin-bottom:6px; } .creator-card .tagline{ font-size:.88rem; color:var(--ink-soft); font-style:italic; margin-bottom:16px; } .creator-card ul{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; } .creator-card li{ font-size:.86rem; display:flex; gap:8px; align-items:flex-start; line-height:1.4; } .creator-card li::before{ content:'✓'; font-weight:800; flex:none; } .creator-card.writer li::before{ color:var(--sky-deep); } .creator-card.publisher li::before{ color:var(--gold-deep); } .creator-card.catcher li::before{ color:var(--leaf-deep); } .creator-card .btn{ align-self:flex-start; } @media (max-width: 900px){ .creator-trio-grid{ grid-template-columns:1fr; } } .btn-ink{ background:var(--ink); color:var(--gold); } .btn-ink:hover{ background:#2A1B12; box-shadow:var(--shadow-pop); } /* ================= GLOBAL SEARCH BAR ================= */ .global-search{ margin:56px 0 0; } .global-search form{ display:flex; align-items:center; gap:14px; background:var(--white); border:2px solid var(--ink); border-radius:999px; padding:8px 8px 8px 28px; box-shadow:5px 5px 0 var(--gold); } .global-search input{ flex:1; border:none; background:transparent; font-family:inherit; font-size:1.05rem; padding:14px 0; color:var(--ink); } .global-search input::placeholder{ color:var(--ink-soft); opacity:0.75; } .global-search input:focus{ outline:none; } .global-search button{ flex:none; width:52px; height:52px; border-radius:50%; background:var(--ink); color:var(--gold); border:none; display:flex; align-items:center; justify-content:center; font-size:1.15rem; transition:transform .2s var(--bounce), background .15s ease; } .global-search button:hover{ background:var(--bronze); transform:scale(1.06); } @media (max-width:640px){ .global-search form{ padding:6px 6px 6px 20px; } .global-search input{ font-size:.92rem; } } .cta-band{ background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-lg); overflow:hidden; display:grid; grid-template-columns:.85fr 1.15fr; box-shadow:6px 6px 0 var(--gold); margin:56px 0; align-items:stretch; } .cta-books{ background:var(--paper-deep); padding:36px; display:flex; gap:16px; align-items:center; justify-content:center; border-right:2px dashed var(--line); } /* ---- ad slot (repurposes the left panel of the Free-to-join band) ---- */ .ad-slot{ width:100%; text-align:center; background:var(--white); border:1.5px dashed var(--line); border-radius:14px; padding:22px 18px; } .ad-slot .ad-tag{ display:inline-block; font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; background:var(--paper-deep); color:var(--ink-soft); padding:2px 9px; border-radius:999px; margin-bottom:12px; } /* Optional creative image — only present when the ad has a Featured Image set. Fixed height + object-fit keeps odd advertiser image sizes from stretching the card or shoving the CTA link around. */ .ad-slot .ad-slot-image-link{ display:block; margin:0 0 12px; border-radius:10px; overflow:hidden; } .ad-slot .ad-slot-image{ display:block; width:100%; height:120px; object-fit:cover; } .ad-slot .ad-creative{ margin-bottom:12px; } .ad-slot .ad-creative-title-link{ display:block; text-decoration:none; color:inherit; } .ad-slot .ad-creative strong{ display:block; font-family:'Fraunces',serif; font-size:1.05rem; margin-bottom:3px; } .ad-slot .ad-creative-title-link:hover strong{ text-decoration:underline; } .ad-slot .ad-creative span{ font-size:.82rem; color:var(--ink-soft); } .ad-slot a.ad-cta{ font-size:.78rem; font-weight:700; color:var(--clay-deep); } .cta-band-content{ padding:40px 44px; display:flex; flex-direction:column; justify-content:center; } .cta-band-content h2{ font-size:1.7rem; line-height:1.2; margin-bottom:10px; } .cta-band-sub{ color:var(--ink-soft); margin:0 0 22px; } .cta-band-actions{ display:flex; gap:12px; flex-wrap:wrap; } /* ================= AUTH MODAL (popup sign-in / sign-up) ================= */ .modal-overlay{ position:fixed; inset:0; background:rgba(18,10,8,0.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:200; opacity:0; pointer-events:none; transition:opacity .25s ease; } .modal-overlay.open{ opacity:1; pointer-events:auto; } .auth-modal{ background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-lg); box-shadow:8px 8px 0 var(--gold); width:100%; max-width:760px; display:grid; grid-template-columns:.85fr 1.15fr; overflow:hidden; transform:scale(.94) translateY(10px); transition:transform .3s var(--bounce); max-height:90vh; } .modal-overlay.open .auth-modal{ transform:scale(1) translateY(0); } .modal-art{ background:var(--paper-deep); border-right:2px dashed var(--line); display:flex; align-items:center; justify-content:center; padding:32px; } .modal-art .book-cover{ width:150px; } .modal-body{ padding:32px 36px; position:relative; } .modal-close{ position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line); background:var(--white); font-size:1rem; line-height:1; color:var(--ink-soft); display:flex;align-items:center;justify-content:center; transition:transform .2s var(--bounce), border-color .2s ease; } .modal-close:hover{ transform:rotate(90deg); border-color:var(--clay); color:var(--clay); } .modal-toggle-row{ display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--ink-soft); margin-bottom:22px; padding-right:36px; } .modal-toggle-row a{ color:var(--clay-deep); font-weight:700; } .modal-lang{ color:var(--ink-soft); font-weight:600; } .modal-body h2{ font-size:1.5rem; margin-bottom:20px; } .social-btn{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 16px; border-radius:12px; border:1.5px solid var(--line); background:var(--white); font-weight:700; font-size:.92rem; margin-bottom:10px; transition:border-color .15s ease, background .15s ease, transform .2s var(--bounce); } .social-btn:hover{ border-color:var(--ink); background:var(--paper-deep); transform:translateY(-1px); } .social-btn svg{ width:20px; height:20px; flex:none; } /* ---- login popup ad slot — kept compact and low-key on purpose; this is a high-friction moment (someone trying to log in), not a place for a full-size ad unit ---- */ .modal-ad-slot{ display:flex; align-items:center; gap:8px; margin-top:14px; padding:10px 12px; background:var(--paper-deep); border-radius:10px; text-decoration:none; color:var(--ink); } .modal-ad-slot:hover{ background:var(--paper); } .modal-ad-tag{ flex:none; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); background:var(--white); padding:2px 6px; border-radius:5px; } .modal-ad-body{ font-size:.78rem; color:var(--ink-soft); } .modal-ad-body strong{ color:var(--ink); } .modal-divider{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--ink-soft); font-size:.82rem; font-weight:600; } .modal-divider::before, .modal-divider::after{ content:''; flex:1; height:1px; background:var(--line); } .auth-panel{ display:none; } .auth-panel.active{ display:block; } @media (max-width: 640px){ .cta-band, .auth-modal{ grid-template-columns:1fr; } .cta-books{ border-right:none; border-bottom:2px dashed var(--line); padding:24px; } .modal-art{ display:none; } .modal-body{ padding:26px 22px; } } /* ================= LAST-CALL CTA (before footer) — small, modest, matches the original ================= */ .last-call{ display:inline-flex; align-items:center; gap:18px; background:var(--paper-deep); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin:40px 0; } .last-call p{ font-family:'Work Sans',sans-serif; font-size:.92rem; font-weight:500; color:var(--ink-soft); margin:0; } .last-call .accent{ color:var(--ink); font-weight:700; } .last-call .btn{ padding:9px 18px; font-size:.83rem; } /* ================= FOOTER (light, so the sketch doodles read like ink-on-paper) ================= */ .site-footer{ position:relative; background:var(--paper-deep); color:var(--ink-soft); margin-top:0; padding:56px 0 28px; overflow:hidden; border-top:1px solid var(--line); } .footer-doodles{ position:absolute; inset:0; pointer-events:none; } .footer-doodles svg{ position:absolute; } .footer-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr .9fr .8fr 1fr; gap:28px; padding-bottom:36px; border-bottom:1px solid var(--line); } .footer-grid h5{ color:var(--ink); font-family:'Work Sans'; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; } .footer-grid p, .footer-grid a{ font-size:.88rem; line-height:2; color:var(--ink-soft); } .footer-grid a:hover{ color:var(--clay-deep); } .app-badges{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; } .app-badge{ display:inline-flex; align-items:center; gap:9px; background:var(--white); border:1.5px solid var(--line); border-radius:10px; padding:8px 14px; width:fit-content; transition:transform .2s var(--bounce), border-color .15s ease; } .app-badge:hover{ border-color:var(--ink); transform:translateY(-2px); } .app-badge svg{ width:20px; height:20px; flex:none; } .app-badge .txt{ line-height:1.15; } .app-badge .txt small{ display:block; font-size:.62rem; color:var(--ink-soft); } .app-badge .txt strong{ display:block; font-size:.86rem; color:var(--ink); font-weight:700; } /* #wnAddToHomeBtn reuses .app-badge but is a real element. ---- */ .search-suggest-item img.ss-thumb-round{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; } .ss-noimg-round{ width:40px; height:40px; border-radius:50%; flex:none; background:linear-gradient(155deg,var(--clay,#E86A33),var(--clay-deep,#B84E1F)); } .ss-text{ display:flex; flex-direction:column; gap:2px; min-width:0; } .ss-title{ font-weight:700; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ss-author{ font-size:.76rem; color:var(--ink-soft); } .search-suggest-item-author .ss-author{ color:var(--clay-deep,#B84E1F); font-weight:600; } .search-suggest-empty{ padding:14px 16px; font-size:.85rem; color:var(--ink-soft); text-align:center; } /* ================= PWA install prompt banner ================= Built by assets/js/install-prompt.js — a small slide-up card, not a modal, so it never blocks reading. .is-visible is added a frame after insertion (so the transition actually runs) and removed on dismiss. */ .wn-install-banner{ position:fixed; left:12px; right:12px; bottom:12px; z-index:9998; max-width:420px; margin:0 auto; display:flex; align-items:center; gap:12px; background:var(--ink,#120A08); color:var(--paper,#FBF8F2); border-radius:14px; padding:14px 16px; box-shadow:0 12px 32px rgba(18,10,8,.28); opacity:0; transform:translateY(24px); transition:opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1); pointer-events:none; } .wn-install-banner.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; } .wn-install-icon{ width:42px; height:42px; border-radius:11px; flex:none; object-fit:cover; } .wn-install-copy{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; } .wn-install-copy strong{ font-size:.92rem; line-height:1.25; } .wn-install-copy span{ font-size:.78rem; opacity:.78; line-height:1.35; } .wn-install-cta{ background:var(--clay,#E86A33); color:#fff; border:none; border-radius:999px; padding:9px 16px; font-weight:700; font-size:.82rem; white-space:nowrap; cursor:pointer; flex:none; font-family:inherit; transition:background .15s ease, transform .15s ease; } .wn-install-cta:hover{ background:var(--clay-deep,#C64F1E); transform:translateY(-1px); } .wn-install-dismiss{ background:none; border:none; color:var(--paper,#FBF8F2); opacity:.55; font-size:1.35rem; line-height:1; cursor:pointer; padding:2px 4px; flex:none; transition:opacity .15s ease; } .wn-install-dismiss:hover{ opacity:1; } @media (max-width:480px){ .wn-install-banner{ flex-wrap:wrap; } .wn-install-copy{ order:1; flex-basis:100%; } .wn-install-icon{ order:0; } .wn-install-cta, .wn-install-dismiss{ order:2; } } /* Notification click flash — a brief highlight on whichever notification was just clicked (header dropdown or the full Notifications page), so it's obvious which one triggered the navigation before the new page loads. Global (not scoped to notifications.css) since the header dropdown appears on every page, not just /notifications/. */ @keyframes wnNotifFlash{ 0% { background-color:var(--gold); } 100% { background-color:transparent; } } .wn-notif-link.wn-notif-flashing{ animation:wnNotifFlash .5s ease-out; }