/* ============================================================ WRITERS HUB — PUBLIC FRONTEND HR Developers glassmorphism design system (purple / blue) Class vocabulary matches the front views: site-header / hero / book-card / category-card / blog-card / reader-* etc. Theme colors (--color-primary/secondary/accent, --font-body, --header-bg, --footer-bg) are injected from admin Appearance settings in the layout ; the fallbacks below keep the design working even if that block is absent. ============================================================ */ :root{ color-scheme: light; /* Theme hooks — overridden by settings block in the layout */ --color-primary:#6366f1; --color-secondary:#ec4899; --color-accent:#f59e0b; --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --header-bg:#ffffff; --footer-bg:#1e1b4b; /* Display / serif */ --font-display:'Space Grotesk','Inter',system-ui,sans-serif; --font-serif:'Merriweather',Georgia,serif; /* Ink */ --ink:#1e1b4b; --ink-soft:#3f3d63; --muted:#6b7091; --faint:#9aa0bf; /* Gradients (follow the theme colors) */ --grad-brand:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%); --grad-brand-3:linear-gradient(135deg,var(--color-primary) 0%,#8b5cf6 55%,var(--color-secondary) 100%); --grad-deep:linear-gradient(160deg,#1e1b4b 0%,#312e81 55%,#4338ca 100%); /* Glass surfaces */ --glass:rgba(255,255,255,.72); --glass-strong:rgba(255,255,255,.88); --glass-brd:rgba(255,255,255,.65); --hairline:rgba(99,102,241,.14); --line:rgba(99,102,241,.16); /* Effects */ --radius:18px; --radius-md:14px; --radius-sm:11px; --shadow:0 22px 48px -26px rgba(49,46,129,.5); --shadow-sm:0 12px 28px -18px rgba(49,46,129,.45); --shadow-lg:0 34px 70px -30px rgba(49,46,129,.6); --ring:0 0 0 4px rgba(99,102,241,.22); } /* ---- Reset & Base ---- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); font-size:16px;line-height:1.65; color:var(--ink); -webkit-font-smoothing:antialiased; background:#eef0fb; background-image: radial-gradient(1100px 620px at 10% -6%, rgba(139,92,246,.20), transparent 60%), radial-gradient(1000px 560px at 104% 4%, rgba(236,72,153,.14), transparent 55%), radial-gradient(1000px 760px at 55% 118%, rgba(99,102,241,.18), transparent 60%), linear-gradient(180deg,#f5f4fe 0%,#edecfb 100%); background-attachment:fixed; } img{max-width:100%;height:auto;display:block} a{color:var(--color-primary);text-decoration:none;transition:color .2s} a:hover{color:var(--color-secondary)} button{cursor:pointer;font-family:inherit} ul,ol{list-style:none} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px} /* ---- Utilities ---- */ .container{max-width:1200px;margin:0 auto;padding:0 20px} .container-narrow{max-width:780px} .gradient-text{ background:var(--grad-brand); -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text;color:transparent; } /* ============================================================ HEADER ============================================================ */ .site-header{ position:sticky;top:0;z-index:100; border-bottom:1px solid var(--glass-brd); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); background:var(--header-bg); box-shadow:0 10px 30px -24px rgba(49,46,129,.6); } .header-inner{ display:flex;align-items:center;justify-content:space-between; height:66px;gap:20px; } .site-logo img{height:38px} .logo-text{ font-family:var(--font-display); font-size:1.42rem;font-weight:700;letter-spacing:-.02em; background:var(--grad-brand); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; } .main-nav{display:flex;gap:4px} .nav-link{ padding:8px 15px;border-radius:10px;font-weight:500;font-size:.92rem; color:var(--ink-soft);transition:background .18s,color .18s; } .nav-link:hover{background:rgba(99,102,241,.1);color:var(--color-primary)} .header-actions{display:flex;align-items:center;gap:12px} .search-wrap{position:relative} .search-wrap input{ width:230px;padding:9px 15px;border:1px solid var(--line);border-radius:11px; font-size:.9rem;background:rgba(255,255,255,.85);transition:border-color .18s,box-shadow .18s; } .search-wrap input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--ring)} .search-dropdown{ position:absolute;top:calc(100% + 6px);left:0;right:0; background:var(--glass-strong); backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--glass-brd);border-radius:14px; box-shadow:var(--shadow);display:none;z-index:200; max-height:360px;overflow-y:auto; } .search-dropdown.show{display:block} .search-result-item{ display:flex;align-items:center;gap:12px;padding:11px 15px; border-bottom:1px solid var(--hairline);transition:background .15s; } .search-result-item:last-child{border-bottom:none} .search-result-item:hover{background:rgba(99,102,241,.08)} .search-result-item img{width:38px;height:54px;object-fit:cover;border-radius:6px;box-shadow:var(--shadow-sm)} .search-result-title{font-weight:600;font-size:.9rem;color:var(--ink)} .search-result-author{font-size:.8rem;color:var(--muted)} .nav-toggle{ display:none;background:rgba(99,102,241,.1);border:none;font-size:1.3rem; color:var(--ink);padding:6px 10px;border-radius:10px; } .user-menu{display:flex;align-items:center;gap:10px} .nav-signin{font-weight:600} .nav-signout{font-weight:500;color:var(--muted)} .nav-cta{ padding:8px 18px;border-radius:11px;font-weight:600;font-size:.92rem; color:#fff;background:var(--grad-brand);box-shadow:var(--shadow-sm); transition:transform .18s,box-shadow .18s;white-space:nowrap; } .nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(99,102,241,.4)} /* ============================================================ HERO ============================================================ */ .hero{ position:relative;overflow:hidden; padding:96px 0 76px;text-align:center; background: radial-gradient(680px 340px at 22% 8%, rgba(139,92,246,.28), transparent 60%), radial-gradient(620px 320px at 82% 18%, rgba(236,72,153,.22), transparent 60%), linear-gradient(135deg,#eef2ff 0%,#f6f0ff 45%,#fdf2f8 100%); } .hero::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:80px; background:linear-gradient(180deg,transparent,rgba(238,240,251,.9)); pointer-events:none; } .hero-title{ font-family:var(--font-display); font-size:3.1rem;font-weight:700;line-height:1.12;letter-spacing:-.02em; color:var(--ink);position:relative;z-index:1; } .hero-subtitle{ font-size:1.18rem;color:var(--muted);margin:18px auto 34px;max-width:540px; position:relative;z-index:1; } .btn-hero{ display:inline-block;padding:15px 40px;border-radius:14px;font-weight:600;font-size:1.02rem; color:#fff;background:var(--grad-brand);position:relative;z-index:1; box-shadow:0 18px 38px -16px rgba(99,102,241,.85);transition:transform .2s,box-shadow .2s; } .btn-hero:hover{transform:translateY(-2px);box-shadow:0 24px 46px -16px rgba(139,92,246,1);color:#fff} /* ---- Page Hero ---- */ .page-hero{ padding:56px 0 46px;text-align:center; background: radial-gradient(560px 280px at 30% 0%, rgba(139,92,246,.20), transparent 60%), linear-gradient(135deg,#eef2ff,#fdf2f8); } .page-title{font-family:var(--font-display);font-size:2.1rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .page-subtitle{font-size:1.02rem;color:var(--muted);margin-top:10px} /* ============================================================ SECTIONS ============================================================ */ .section{padding:52px 0} .section-alt{ background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0)); border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline); } .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;gap:16px;flex-wrap:wrap} .section-title{font-family:var(--font-display);font-size:1.55rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)} .section-link{font-weight:600;font-size:.9rem;color:var(--color-primary)} .section-link:hover{color:var(--color-secondary)} /* ---- Layout with sidebar ---- */ .layout-sidebar{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start} .main-col{min-width:0} .sidebar-col{position:sticky;top:88px} /* ============================================================ BOOKS GRID + CARD ============================================================ */ .books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:24px} .books-grid-featured{grid-template-columns:repeat(auto-fill,minmax(204px,1fr))} .book-card{ display:block;border-radius:var(--radius-md);overflow:hidden; background:var(--glass); backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%); border:1px solid var(--glass-brd); box-shadow:var(--shadow-sm); transition:transform .25s,box-shadow .25s; } .book-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .book-cover-wrap{position:relative;aspect-ratio:2/3;overflow:hidden;background:#e5e7eb} .book-cover{width:100%;height:100%;object-fit:cover;transition:transform .35s} .book-card:hover .book-cover{transform:scale(1.06)} .book-cover-placeholder{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; background:var(--grad-brand-3);font-size:2.5rem;color:#fff;font-weight:700; } .book-badge{ position:absolute;top:9px;left:9px;padding:4px 11px;border-radius:8px; font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em; backdrop-filter:blur(6px);box-shadow:var(--shadow-sm); } .badge-featured{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#4a2c00} .badge-trending{background:linear-gradient(135deg,#f43f5e,#ec4899);color:#fff} .book-overlay{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,rgba(30,27,75,.15),rgba(30,27,75,.62)); opacity:0;transition:opacity .3s; } .book-card:hover .book-overlay{opacity:1} .btn-read{ padding:11px 26px;border-radius:11px;font-weight:600;font-size:.86rem; color:#fff;background:var(--grad-brand);box-shadow:0 12px 26px -12px rgba(99,102,241,.9); transform:translateY(6px);transition:transform .25s; } .book-card:hover .btn-read{transform:translateY(0)} .book-info{padding:14px} .book-title{font-size:.92rem;font-weight:600;color:var(--ink);margin-bottom:4px; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .book-author{font-size:.8rem;color:var(--muted)} .book-reads{font-size:.75rem;color:var(--faint);margin-top:5px;display:inline-block} /* ============================================================ CATEGORIES ============================================================ */ .categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(162px,1fr));gap:16px} .categories-grid-lg{grid-template-columns:repeat(auto-fill,minmax(204px,1fr));gap:20px} .category-card{ display:flex;flex-direction:column;align-items:center;justify-content:center; padding:26px 16px;border-radius:var(--radius-md);text-align:center; background:var(--glass); backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%); border:1px solid var(--glass-brd);box-shadow:var(--shadow-sm); transition:transform .25s,box-shadow .25s,border-color .25s; } .category-card:hover{ border-color:var(--cat-color,var(--color-primary)); transform:translateY(-4px);box-shadow:var(--shadow)} .cat-icon{font-size:2.1rem;margin-bottom:8px} .cat-icon-lg{font-size:3rem;margin-bottom:12px} .cat-name{font-weight:600;font-size:.96rem;color:var(--ink)} .cat-count{font-size:.8rem;color:var(--faint);margin-top:3px} .cat-desc{font-size:.78rem;color:var(--muted);margin-top:7px; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} /* ============================================================ BOOK DETAIL ============================================================ */ .book-detail{display:grid;grid-template-columns:288px 1fr;gap:36px;margin-bottom:36px} .book-detail-info{min-width:0} .book-cover-lg{width:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-lg)} .book-cover-placeholder-lg{ width:100%;aspect-ratio:2/3;display:flex;align-items:center;justify-content:center; border-radius:var(--radius-md);background:var(--grad-brand-3); font-size:4rem;color:#fff;font-weight:700;box-shadow:var(--shadow-lg); } .book-detail-title{font-family:var(--font-display);font-size:2.1rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.18} .book-detail-author{font-size:1.1rem;color:var(--muted);margin:10px 0 18px} .book-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .tag{ display:inline-block;padding:5px 14px;border-radius:999px;font-size:.8rem;font-weight:600; background:rgba(99,102,241,.12);color:var(--color-primary); border:1px solid rgba(99,102,241,.2);transition:background .2s,color .2s; } .tag:hover{background:var(--color-primary);color:#fff} .tag-sm{font-size:.75rem;padding:3px 11px} .book-meta-row{display:flex;gap:18px;margin-bottom:18px;flex-wrap:wrap} .meta-item{font-size:.86rem;color:var(--muted)} .book-description{color:var(--ink-soft);line-height:1.75;margin-bottom:26px} .btn-read-now{ display:inline-block;padding:15px 34px;border-radius:14px; font-weight:700;font-size:1rem;color:#fff;background:var(--grad-brand); box-shadow:0 18px 38px -16px rgba(99,102,241,.85);transition:transform .2s,box-shadow .2s; } .btn-read-now:hover{transform:translateY(-2px);box-shadow:0 24px 46px -16px rgba(139,92,246,1);color:#fff} .book-tags-section{margin-top:26px;padding-top:22px;border-top:1px solid var(--hairline)} .book-tags-section strong{font-size:.9rem;color:var(--ink-soft);margin-right:8px} /* ---- Reader Reviews (book detail page) ---- */ .book-reviews{margin-top:34px;padding-top:26px;border-top:1px solid var(--hairline)} .book-reviews-title{font-family:var(--font-display);font-size:1.4rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0 0 18px} .review-summary{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px;padding:14px 18px;background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius-md)} .review-summary-avg b{font-size:1.5rem;color:var(--ink)} .review-summary-avg{font-size:.9rem;color:var(--muted)} .review-summary-stars{display:inline-flex;gap:2px;font-size:1.1rem} .review-summary-stars span,.review-stars span{color:rgba(0,0,0,.14)} .review-summary-stars span.on,.review-stars span.on{color:#f59e0b} .review-summary-count{font-size:.82rem;font-weight:600;color:var(--faint)} .review-item{padding:16px 0;border-bottom:1px solid var(--hairline)} .review-item:last-child{border-bottom:none} .review-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px} .review-stars{display:inline-flex;gap:2px;font-size:.95rem} .review-name{font-weight:700;font-size:.92rem;color:var(--ink)} .review-date{font-size:.78rem;color:var(--faint);margin-left:auto} .review-body{font-size:.92rem;color:var(--ink-soft);line-height:1.7;margin:6px 0 0;word-break:break-word} .reviews-empty{font-size:.92rem;color:var(--muted);font-style:italic;padding:8px 0} @media(max-width:480px){.review-date{margin-left:0;width:100%}} /* ============================================================ BLOG ============================================================ */ .blog-list{display:flex;flex-direction:column;gap:24px} .blog-card{display:grid;grid-template-columns:250px 1fr;gap:26px; background:var(--glass); backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%); border:1px solid var(--glass-brd);border-radius:var(--radius-md);overflow:hidden; box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s} .blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .blog-card-img{overflow:hidden} .blog-card-img img{width:100%;height:100%;object-fit:cover;min-height:186px;transition:transform .35s} .blog-card:hover .blog-card-img img{transform:scale(1.06)} .blog-card-body{padding:22px 22px 22px 0;display:flex;flex-direction:column;justify-content:center} .blog-meta{display:flex;gap:16px;font-size:.8rem;color:var(--faint);margin-bottom:9px} .blog-card-title{font-family:var(--font-display);font-size:1.24rem;font-weight:600;color:var(--ink);line-height:1.32} .blog-card-title a{color:inherit} .blog-card-title a:hover{color:var(--color-primary)} .blog-card-excerpt{font-size:.92rem;color:var(--muted);margin-top:9px;line-height:1.65; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical} .blog-read-more{font-size:.85rem;font-weight:600;color:var(--color-primary);margin-top:13px} /* ---- Blog Post ---- */ .post-header{margin-bottom:26px;text-align:center} .post-title{font-family:var(--font-display);font-size:2.3rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.22} .post-meta{display:flex;gap:16px;justify-content:center;font-size:.85rem;color:var(--faint);margin-top:14px} .post-cover{width:100%;border-radius:var(--radius-md);margin-bottom:30px;box-shadow:var(--shadow)} .post-body{ font-size:1.06rem;line-height:1.85;color:var(--ink-soft); font-family:var(--font-serif); } .post-body p{margin-bottom:1.2em} .post-body h2{font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin:2em 0 .8em;color:var(--ink)} .post-body h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin:1.5em 0 .6em;color:var(--ink)} .post-body img{border-radius:12px;margin:1.5em 0;box-shadow:var(--shadow-sm)} .post-body blockquote{ border-left:4px solid var(--color-primary);padding:16px 22px;margin:1.5em 0; background:rgba(99,102,241,.06);border-radius:0 12px 12px 0;font-style:italic;color:var(--ink-soft); } .post-body pre{ background:#1e1b4b;color:#e0e7ff;padding:22px;border-radius:12px; overflow-x:auto;font-size:.9rem;margin:1.5em 0; } .post-body code{background:rgba(99,102,241,.12);padding:2px 7px;border-radius:5px;font-size:.9em} .post-body pre code{background:none;padding:0} .post-body ul,.post-body ol{padding-left:1.5em;margin-bottom:1.2em;list-style:revert} .post-body li{margin-bottom:.5em} .post-footer{margin-top:44px;padding-top:26px;border-top:1px solid var(--hairline)} /* ============================================================ SEARCH ============================================================ */ .search-form-lg{ max-width:620px;margin:22px auto 0;display:flex;gap:0; background:var(--glass-strong); backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%); border:1px solid var(--glass-brd);border-radius:16px;overflow:hidden;box-shadow:var(--shadow); } .search-form-lg input{flex:1;padding:15px 22px;border:none;font-size:1rem;background:transparent;color:var(--ink)} .search-form-lg input:focus{outline:none} .search-form-lg button{ padding:15px 30px;border:none;font-weight:600;font-size:.95rem; color:#fff;background:var(--grad-brand);cursor:pointer;transition:filter .2s; } .search-form-lg button:hover{filter:brightness(1.08)} .search-summary{font-size:1rem;color:var(--muted);margin-bottom:26px} /* ---- Breadcrumb ---- */ .breadcrumb{font-size:.85rem;color:var(--faint);margin-bottom:18px} .breadcrumb a{color:var(--color-primary);font-weight:500} .breadcrumb a:hover{color:var(--color-secondary)} /* ============================================================ PAGINATION ============================================================ */ .pagination{display:flex;justify-content:center;gap:6px;margin-top:36px;flex-wrap:wrap} .page-btn{ display:inline-flex;align-items:center;justify-content:center; min-width:42px;height:42px;padding:0 13px;border-radius:11px; font-size:.9rem;font-weight:600;color:var(--ink-soft); background:var(--glass);border:1px solid var(--glass-brd); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.2s; } .page-btn:hover{border-color:var(--color-primary);color:var(--color-primary)} .page-btn.active{color:#fff;background:var(--grad-brand);border-color:transparent;box-shadow:0 12px 26px -12px rgba(99,102,241,.9)} /* ============================================================ SIDEBAR WIDGETS ============================================================ */ .sidebar-widget{ background:var(--glass); backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%); border:1px solid var(--glass-brd);border-radius:var(--radius-md); box-shadow:var(--shadow-sm);padding:22px;margin-bottom:20px; } .widget-title{font-family:var(--font-display);font-size:1.02rem;font-weight:600;color:var(--ink);margin-bottom:14px} .btn-outline{ display:inline-block;padding:11px 22px;border-radius:11px;font-weight:600;font-size:.85rem; border:1.5px solid var(--color-primary);color:var(--color-primary); background:rgba(255,255,255,.5);transition:background .2s,color .2s; } .btn-outline:hover{background:var(--color-primary);color:#fff} /* ---- Ads ---- */ .ad-wrap{margin:22px auto;text-align:center;overflow:hidden} .ad-wrap img{max-width:100%;height:auto} /* ============================================================ FLASH ============================================================ */ .flash{ padding:13px 20px;border-radius:12px;margin:14px auto;font-size:.9rem;font-weight:600; display:flex;align-items:center;gap:9px;border:1px solid transparent; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .flash::before{font-size:1rem} .flash-success{background:rgba(16,185,129,.14);color:#059669;border-color:rgba(16,185,129,.3)} .flash-success::before{content:"✓"} .flash-error{background:rgba(239,68,68,.13);color:#dc2626;border-color:rgba(239,68,68,.3)} .flash-error::before{content:"⚠"} .flash-warning{background:rgba(245,158,11,.16);color:#b45309;border-color:rgba(245,158,11,.32)} .flash-warning::before{content:"!"} .flash-info{background:rgba(99,102,241,.13);color:#4338ca;border-color:rgba(99,102,241,.3)} .flash-info::before{content:"i"} /* ---- Empty State ---- */ .empty-state{text-align:center;padding:64px 20px;color:var(--muted);font-size:1.08rem} .empty-state::before{content:"◒";display:block;font-size:2.6rem;color:var(--faint);margin-bottom:12px;opacity:.6} /* ============================================================ 404 ============================================================ */ .error-page{padding:104px 0;text-align:center} .error-code{font-family:var(--font-display);font-size:7rem;font-weight:700; background:var(--grad-brand); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;line-height:1} .error-title{font-size:1.65rem;font-weight:700;color:var(--ink);margin:14px 0} .error-msg{color:var(--muted);margin-bottom:34px} .error-actions{display:flex;gap:12px;justify-content:center} /* ============================================================ FOOTER ============================================================ */ .site-footer{position:relative;overflow:hidden;color:#c7d2fe;padding:52px 0 0} .site-footer::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(500px 240px at 8% 0%, rgba(139,92,246,.35), transparent 60%), radial-gradient(460px 240px at 100% 100%, rgba(236,72,153,.24), transparent 60%); opacity:.8; } .footer-grid{position:relative;z-index:1;display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;padding-bottom:34px} .footer-brand .footer-logo{font-family:var(--font-display);font-size:1.34rem;font-weight:700;color:#fff;margin-bottom:9px} .footer-brand p{font-size:.9rem;color:#a5b4fc} .footer-links h4{font-size:.82rem;font-weight:700;color:#fff;margin-bottom:13px;text-transform:uppercase;letter-spacing:.06em} .footer-links a{display:block;color:#c7d2fe;font-size:.9rem;padding:5px 0;transition:color .2s} .footer-links a:hover{color:#fff} .footer-social{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px} .footer-social .social-link{color:#c7d2fe;font-size:.85rem;font-weight:600;transition:color .2s} .footer-social .social-link:hover{color:#fff} .footer-grid .footer-links{grid-column:auto} .footer-bottom{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.12);padding:20px 0;text-align:center;font-size:.82rem;color:#818cf8} /* ============================================================ READER (dark / sepia theming preserved) ============================================================ */ .reader-wrap{ display:flex;flex-direction:column;height:100vh; background:#fff;color:var(--ink);overflow:hidden;position:relative; } .reader-wrap[data-theme="dark"]{background:#14132b;color:#e0e0e0} .reader-wrap[data-theme="sepia"]{background:#f4ecd8;color:#5b4636} .reader-toolbar{ display:flex;align-items:center;justify-content:space-between; padding:9px 18px;background:var(--grad-deep);color:#fff; min-height:50px;z-index:50;flex-shrink:0; box-shadow:0 6px 20px -12px rgba(30,27,75,.9); } .reader-wrap[data-theme="sepia"] .reader-toolbar{background:#5b4636} .toolbar-left,.toolbar-right{display:flex;gap:6px;align-items:center} .toolbar-center{flex:1;text-align:center} .reader-book-title{font-family:var(--font-display);font-size:.92rem;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px;display:inline-block} .toolbar-btn{ background:rgba(255,255,255,.14);border:none;color:#fff; padding:7px 13px;border-radius:9px;font-size:.85rem;cursor:pointer;transition:background .2s; } .toolbar-btn:hover{background:rgba(255,255,255,.28)} .toolbar-label{display:inline} .reader-body{display:flex;flex:1;overflow:hidden} /* ---- Chapter Sidebar ---- */ .reader-sidebar{ width:288px;background:#f7f7fc;border-right:1px solid var(--hairline); display:flex;flex-direction:column;flex-shrink:0; transform:translateX(-100%);position:absolute;top:50px;bottom:0;left:0; z-index:40;transition:transform .3s; } .reader-sidebar.open{transform:translateX(0)} .reader-wrap[data-theme="dark"] .reader-sidebar{background:#100f24;border-color:#2d2d4a} .reader-wrap[data-theme="sepia"] .reader-sidebar{background:#ede4cf;border-color:#d4c5a9} .reader-sidebar .sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--hairline)} .reader-sidebar .sidebar-header h3{font-family:var(--font-display);font-size:1rem;font-weight:600} .sidebar-close{background:none;border:none;font-size:1.2rem;cursor:pointer;color:inherit;padding:4px} .chapter-list{overflow-y:auto;flex:1;padding:10px} .chapter-item{ display:flex;align-items:center;gap:10px;padding:11px 13px; border-radius:10px;color:inherit;transition:background .15s;font-size:.9rem; } .chapter-item:hover{background:rgba(99,102,241,.1)} .reader-wrap[data-theme="dark"] .chapter-item:hover{background:#2d2d4a} .reader-wrap[data-theme="sepia"] .chapter-item:hover{background:#e0d4b8} .chapter-item.active{background:var(--grad-brand);color:#fff;box-shadow:0 10px 22px -12px rgba(99,102,241,.9)} .chapter-num{font-family:var(--font-display);font-weight:700;font-size:.8rem;min-width:24px;text-align:center} .chapter-title{flex:1} .no-chapters{padding:16px;color:var(--faint);font-size:.9rem} /* ---- Reader Main ---- */ .reader-main{flex:1;display:flex;flex-direction:column;overflow:hidden} .reader-page{flex:1;overflow-y:auto;padding:44px;display:flex;flex-direction:column;align-items:center} .page-content{ max-width:720px;width:100%; font-family:var(--font-serif); font-size:18px;line-height:1.9;transition:font-size .2s; } .page-content.page-loading{opacity:.4;pointer-events:none} .page-content p{margin-bottom:1.4em;text-align:justify} .page-content h1,.page-content h2,.page-content h3{font-family:var(--font-body);margin:1.5em 0 .6em;color:inherit} .page-content img{border-radius:10px;margin:1.5em auto} .page-content blockquote{border-left:4px solid var(--color-primary);padding:12px 22px;margin:1.5em 0;font-style:italic;opacity:.85} .no-content{text-align:center;color:var(--faint);padding:64px 0} .reader-ad{max-width:720px;width:100%;margin:26px auto;text-align:center} .reader-nav{ display:flex;align-items:center;justify-content:space-between; padding:13px 26px;border-top:1px solid var(--hairline);flex-shrink:0;background:inherit; } .reader-wrap[data-theme="dark"] .reader-nav{border-color:#2d2d4a} .reader-wrap[data-theme="sepia"] .reader-nav{border-color:#d4c5a9} .nav-page-btn{ padding:9px 22px;border-radius:11px;border:1px solid var(--line); background:rgba(255,255,255,.85);font-size:.9rem;font-weight:600;color:var(--ink-soft); cursor:pointer;transition:.2s; } .reader-wrap[data-theme="dark"] .nav-page-btn{background:#14132b;border-color:#2d2d4a;color:#e0e0e0} .reader-wrap[data-theme="sepia"] .nav-page-btn{background:#f4ecd8;border-color:#d4c5a9;color:#5b4636} .nav-page-btn:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)} .nav-page-btn:disabled{opacity:.4;cursor:not-allowed} .page-indicator{font-size:.9rem;color:var(--muted);font-weight:600} .page-sep{margin:0 4px} /* ============================================================ AUTHORS SHOWCASE (home "Featured Authors") ============================================================ */ .authors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px} .author-card{ display:flex;flex-direction:column;align-items:center;text-align:center; gap:12px;padding:26px 20px;border-radius:var(--radius-md); background:var(--glass);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%); border:1px solid var(--glass-brd);box-shadow:var(--shadow-sm); text-decoration:none;transition:transform .25s,box-shadow .25s; } .author-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .author-avatar{width:82px;height:82px;border-radius:50%;overflow:hidden;flex-shrink:0; background:var(--grad-brand);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(99,102,241,.35)} .author-avatar img{width:100%;height:100%;object-fit:cover} .author-avatar-fallback{display:flex;align-items:center;justify-content:center;color:#fff; font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:700} .author-name{font-size:1.05rem;font-weight:700;color:var(--ink);margin:0} .author-role{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em; color:var(--color-primary);background:rgba(99,102,241,.1);padding:3px 10px;border-radius:999px} .author-bio{font-size:.85rem;color:var(--muted);line-height:1.55;margin:0;min-height:1.6em} .author-visit{font-size:.85rem;font-weight:600;color:var(--color-primary)} .author-card:hover .author-visit{text-decoration:underline} @media(max-width:768px){ .authors-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px} } /* ============================================================ ANIMATION ============================================================ */ @keyframes fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .book-card,.category-card,.blog-card,.panel{animation:fade-in .3s ease both} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1024px){ .layout-sidebar{grid-template-columns:1fr} .sidebar-col{position:static} .footer-grid{grid-template-columns:1fr 1fr} .blog-card{grid-template-columns:186px 1fr} .book-detail{grid-template-columns:208px 1fr;gap:26px} } @media(max-width:768px){ .main-nav{ display:none;flex-direction:column;position:absolute; top:66px;left:0;right:0; background:var(--glass-strong); backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%); border-bottom:1px solid var(--glass-brd);padding:14px;z-index:99; box-shadow:var(--shadow); } .main-nav.show{display:flex} .nav-toggle{display:block} .hero{padding:64px 0 52px} .hero-title{font-size:2.1rem} .hero-subtitle{font-size:1rem} .search-wrap input{width:160px} .books-grid{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:16px} .categories-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))} .blog-card{grid-template-columns:1fr} .blog-card-img img{max-height:210px} .blog-card-body{padding:18px} .book-detail{grid-template-columns:1fr;text-align:center} .book-detail-cover{max-width:224px;margin:0 auto} .book-tags,.book-meta-row{justify-content:center} .footer-grid{grid-template-columns:1fr} .error-code{font-size:4.5rem} .error-actions{flex-direction:column;align-items:center} .post-title{font-size:1.7rem} .reader-page{padding:26px 16px} .page-content{font-size:16px} .toolbar-label{display:none} .reader-book-title{max-width:140px;font-size:.8rem} .reader-sidebar{width:100%} } @media(max-width:480px){ .container{padding:0 14px} .hero{padding:52px 0 40px} .hero-title{font-size:1.7rem} .section{padding:36px 0} .books-grid{grid-template-columns:repeat(2,1fr);gap:13px} .search-wrap{display:none} .page-hero{padding:32px 0} .page-title{font-size:1.55rem} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }