@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Caveat:wght@500;600;700&family=Quicksand:wght@400;500;600;700&display=swap'); /* ═══════════════════════════════════════════ VARIABLES — Shadow Mode (default) ══════════════════════════════════════════ */ :root { --bg: #0F0D0A; --bg2: #1A1612; --surface: #231C13; --surface2: #2D2418; --card: #332A1C; --card2: #3D3222; --gold: #C4964A; --gold2: #DDB668; --gold-dim: rgba(196,150,74,.15); --text: #E7DED2; --text2: #9C8E7E; --text3: #5E5248; --wine: #6B2A38; --wine2: #4A1F2A; --border: #3A2E20; --border2: #4E3E2A; --shelf: #3D2A14; --shelf-top:#5A3E1E; --rad: 16px; --rad-sm: 10px; --rad-xs: 6px; --f-display:'Cormorant Garamond',serif; --f-hand: 'Caveat',cursive; --f-body: 'Quicksand',sans-serif; --sh: 0 8px 32px rgba(0,0,0,.65); --sh-sm: 0 2px 12px rgba(0,0,0,.45); --sh-book: -4px 6px 24px rgba(0,0,0,.75); --sidebar-w:260px; --nav-h: 64px; } /* ═══════════════════════════════════════════ COZY (Light) MODE ══════════════════════════════════════════ */ [data-theme="cozy"] { --bg: #F4F0E8; --bg2: #EDE8DC; --surface: #FFFDF9; --surface2: #F7F3EA; --card: #F0EAE0; --card2: #EAE3D5; --gold: #8B6B14; --gold2: #6B5010; --gold-dim: rgba(139,107,20,.12); --text: #2C1F0E; --text2: #6B5B4D; --text3: #9C8C7C; --wine: #8B3A4E; --wine2: #6B2A3A; --border: #DDD5C5; --border2: #CCC0AC; --shelf: #8B6B44; --shelf-top:#A07850; --sh: 0 8px 32px rgba(70,50,30,.18); --sh-sm: 0 2px 12px rgba(70,50,30,.12); --sh-book: -4px 6px 24px rgba(70,50,30,.35); } /* ═══════════════════════════════════════════ MOOD TINTS — applied to via data-mood ══════════════════════════════════════════ */ [data-mood="cozy"] { --mood-tint:rgba(196,150,74,.04); filter:brightness(1.03); } [data-mood="curious"] { --mood-tint:rgba(100,160,220,.04); } [data-mood="uneasy"] { --mood-tint:rgba(0,0,0,.06); filter:brightness(.97) saturate(.92); } [data-mood="shocked"] { --mood-tint:rgba(220,60,60,.04); filter:contrast(1.06); } [data-mood="heartbroken"] { --mood-tint:rgba(107,42,56,.08); filter:saturate(.78) brightness(.95); } /* ═══════════════════════════════════════════ RESET + BASE ══════════════════════════════════════════ */ *,*::before,*::after { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:var(--f-body); background:var(--bg); color:var(--text); line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased; transition:background .5s ease, color .4s ease, filter .5s ease; } img { max-width:100%; display:block; } a { color:inherit; text-decoration:none; } ul { list-style:none; margin:0; padding:0; } h1,h2,h3,h4 { font-family:var(--f-display); margin:0; color:var(--text); font-weight:600; } p { margin:0; } button { font-family:inherit; cursor:pointer; } input,textarea,select { font-family:var(--f-body); } :focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; } ::selection { background:var(--gold-dim); color:var(--text); } /* ═══════════════════════════════════════════ APP SHELL — fixed sidebar + offset content ══════════════════════════════════════════ */ html, body { max-width:100%; overflow-x:hidden; } .app-shell { min-height:100vh; } /* ═══════════════════════════════════════════ SIDEBAR NAV (desktop) ══════════════════════════════════════════ */ .sidebar { position:fixed; top:0; left:0; width:var(--sidebar-w); height:100vh; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; gap:0; z-index:40; overflow-y:auto; overflow-x:hidden; transition:background .5s ease, border-color .5s ease; } .sidebar-brand { padding:28px 22px 20px; border-bottom:1px solid var(--border); } .sidebar-brand .brand-icon { font-size:1.6rem; margin-bottom:8px; } .sidebar-brand h1 { font-size:1.3rem; color:var(--gold); letter-spacing:-.01em; line-height:1.1; margin-bottom:4px; } .sidebar-brand .tagline { font-family:var(--f-hand); font-size:1rem; color:var(--text2); } .sidebar-nav { padding:12px 12px; flex:1; } .sidebar-nav a, .sidebar-nav button { display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px; border-radius:var(--rad-sm); font-size:.9rem; font-weight:600; color:var(--text2); border:none; background:none; text-align:left; transition:all .2s ease; cursor:pointer; } .sidebar-nav a:hover, .sidebar-nav button:hover { background:var(--surface2); color:var(--text); } .sidebar-nav a.active { background:var(--gold-dim); color:var(--gold); } .sidebar-nav .nav-icon { font-size:1.1rem; width:22px; text-align:center; } .sidebar-genres { padding:0 12px 12px; } .sidebar-genres-heading { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text3); font-weight:700; padding:8px 14px 8px; } .sidebar-genres a { display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:var(--rad-xs); font-size:.85rem; font-weight:600; color:var(--text2); transition:all .2s ease; } .sidebar-genres a:hover { background:var(--surface2); color:var(--text); } .sidebar-genres a.active { color:var(--gold); } .genre-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .genre-count { margin-left:auto; font-size:.75rem; color:var(--text3); } .sidebar-footer { padding:16px 22px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; } .theme-toggle { display:flex; align-items:center; justify-content:space-between; background:var(--surface2); border:1px solid var(--border2); border-radius:999px; padding:6px 8px; cursor:pointer; transition:all .3s ease; } .theme-toggle-label { font-size:.8rem; font-weight:600; color:var(--text2); padding:0 6px; } .theme-toggle-pill { width:36px; height:20px; background:var(--gold); border-radius:999px; position:relative; transition:background .4s ease; } .theme-toggle-pill::after { content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; background:#fff; border-radius:50%; transition:transform .4s ease; } [data-theme="cozy"] .theme-toggle-pill::after { transform:translateX(16px); } [data-theme="cozy"] .theme-toggle-pill { background:var(--gold2); } .sidebar-logout a { font-size:.8rem; color:var(--text3); } .sidebar-logout a:hover { color:var(--text2); } /* ═══════════════════════════════════════════ MAIN CONTENT AREA ══════════════════════════════════════════ */ .main-content { margin-left:var(--sidebar-w); padding:0 0 100px; min-height:100vh; min-width:0; /* prevents flex/grid blowout */ overflow-x:hidden; } /* ═══════════════════════════════════════════ GREETING HEADER ══════════════════════════════════════════ */ .greeting-header { padding:32px 40px 24px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; } .greeting-header h2 { font-size:clamp(1.8rem,3vw,2.6rem); color:var(--text); font-weight:600; line-height:1.1; } .greeting-header .subtitle { font-family:var(--f-display); font-style:italic; color:var(--text2); font-size:1rem; margin-top:4px; } .header-actions { display:flex; align-items:center; gap:12px; } .icon-btn { width:40px; height:40px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition:all .2s ease; } .icon-btn:hover { background:var(--card); border-color:var(--border2); } .avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--wine)); display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:700; font-size:1.1rem; color:#fff; flex-shrink:0; } /* ═══════════════════════════════════════════ SEARCH BAR ══════════════════════════════════════════ */ .search-bar { padding:0 40px 0; position:relative; max-width:380px; } .search-bar input { width:100%; padding:10px 16px 10px 40px; background:var(--surface2); border:1px solid var(--border); border-radius:999px; color:var(--text); font-size:.88rem; transition:all .2s ease; } .search-bar input::placeholder { color:var(--text3); } .search-bar input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim); outline:none; } .search-bar .search-icon { position:absolute; left:54px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:.9rem; pointer-events:none; } /* ═══════════════════════════════════════════ STATUS TABS ══════════════════════════════════════════ */ .status-tabs { display:flex; gap:0; padding:20px 40px 0; border-bottom:1px solid var(--border); } .status-tab { padding:10px 20px; font-size:.88rem; font-weight:600; color:var(--text3); border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .2s ease; cursor:pointer; white-space:nowrap; background:none; border-top:none; border-left:none; border-right:none; } .status-tab:hover { color:var(--text2); } .status-tab.active { color:var(--gold); border-bottom-color:var(--gold); } /* ═══════════════════════════════════════════ MOOD FILTER BAR ══════════════════════════════════════════ */ .mood-filter-bar { display:flex; align-items:center; gap:8px; padding:16px 40px; overflow-x:auto; scrollbar-width:none; } .mood-filter-bar::-webkit-scrollbar { display:none; } .mood-filter-bar .label { font-size:.78rem; font-weight:700; color:var(--text3); white-space:nowrap; margin-right:4px; } .mood-pill { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:999px; border:1px solid var(--border); background:var(--surface2); font-size:.82rem; font-weight:600; color:var(--text2); white-space:nowrap; transition:all .2s ease; cursor:pointer; } .mood-pill:hover { border-color:var(--border2); color:var(--text); } .mood-pill.active { background:var(--gold-dim); border-color:var(--gold); color:var(--gold); } /* ═══════════════════════════════════════════ BOOKSHELF GRID ══════════════════════════════════════════ */ .bookshelf-wrap { padding:8px 40px 40px; } .shelf-section { margin-bottom:0; } .books-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; padding:24px 0 0; position:relative; } /* wooden shelf divider */ .shelf-divider { height:28px; margin:0 -8px; background:linear-gradient(to bottom,var(--shelf-top) 0%,var(--shelf) 100%); border-top:2px solid color-mix(in srgb, var(--shelf-top) 60%, #fff); box-shadow:0 10px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); border-radius:0 0 3px 3px; } /* ═══════════════════════════════════════════ BOOK CARD (cover tile) ══════════════════════════════════════════ */ .book-card { position:relative; cursor:pointer; transform-origin:bottom center; transition:transform .35s ease, box-shadow .35s ease; animation:riseIn .5s ease both; } .book-card:hover { transform:translateY(-10px) scale(1.03); z-index:10; } @keyframes riseIn { from { opacity:.4; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } .book-card .cover-wrap { aspect-ratio:2/3; border-radius:3px 8px 8px 3px; overflow:hidden; box-shadow:var(--sh-book); position:relative; } /* spine shadow */ .book-card .cover-wrap::before { content:''; position:absolute; left:0; top:0; bottom:0; width:14px; background:linear-gradient(to right,rgba(0,0,0,.5),transparent); z-index:1; pointer-events:none; } .book-card .cover-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; } .book-card:hover .cover-img { transform:scale(1.03); } /* private lock badge */ .book-card .private-badge { position:absolute; top:8px; right:8px; z-index:2; width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; font-size:.8rem; backdrop-filter:blur(4px); } /* status badge */ .book-card .status-badge { position:absolute; bottom:8px; left:8px; z-index:2; padding:3px 8px; border-radius:4px; font-size:.66rem; font-weight:700; background:rgba(0,0,0,.75); color:#fff; backdrop-filter:blur(4px); } .book-card .card-info { padding:8px 2px 0; } .book-card .card-title { font-family:var(--f-display); font-size:1rem; font-weight:700; color:var(--text); line-height:1.2; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .book-card .card-author { font-size:.76rem; color:var(--text2); margin-top:2px; } .book-card .card-stars { margin-top:4px; } .book-card .card-stars .star { font-size:.75rem; color:var(--gold); } .book-card .card-stars .star.empty { color:var(--border2); } /* + Add Book card */ .add-book-card { aspect-ratio:2/3; border-radius:3px 8px 8px 3px; border:2px dashed var(--border2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--text3); font-size:.85rem; font-weight:600; cursor:pointer; transition:all .2s ease; } .add-book-card:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); } .add-book-card .add-icon { font-size:1.6rem; } /* ═══════════════════════════════════════════ BOOK DETAIL PAGE ══════════════════════════════════════════ */ .detail-nav { display:flex; align-items:center; justify-content:space-between; padding:20px 40px; border-bottom:1px solid var(--border); } .back-btn { display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:600; color:var(--text2); transition:color .2s ease; } .back-btn:hover { color:var(--gold); } .detail-hero { padding:32px 40px; display:flex; gap:32px; align-items:flex-start; background:linear-gradient(to bottom,var(--surface) 0%,transparent 100%); } .detail-cover { width:160px; flex-shrink:0; border-radius:3px 12px 12px 3px; overflow:hidden; box-shadow:var(--sh-book); position:relative; } .detail-cover::before { content:''; position:absolute; left:0; top:0; bottom:0; width:16px; background:linear-gradient(to right,rgba(0,0,0,.5),transparent); z-index:1; } .detail-cover img { width:100%; aspect-ratio:2/3; object-fit:cover; } .detail-info { flex:1; min-width:0; } .detail-info h1 { font-size:clamp(1.8rem,3.5vw,2.8rem); color:var(--text); margin-bottom:6px; } .detail-info .detail-author { font-size:1.05rem; color:var(--text2); margin-bottom:16px; } .detail-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; } .detail-rating { display:flex; align-items:center; gap:8px; } .detail-rating .stars .star { font-size:1.1rem; color:var(--gold); } .detail-rating .stars .star.empty { color:var(--border2); } .detail-rating .num { font-family:var(--f-display); font-size:1.2rem; font-weight:700; color:var(--gold); } .detail-tags { display:flex; gap:8px; flex-wrap:wrap; } .detail-tag { padding:4px 12px; border-radius:4px; background:var(--surface2); border:1px solid var(--border); font-size:.75rem; font-weight:700; color:var(--text2); } .detail-dates { display:flex; gap:20px; margin-bottom:16px; } .detail-date-item { display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text2); } .detail-date-item .di { font-size:.9rem; } .detail-mood-tag { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; background:var(--surface2); border:1px solid var(--border); font-size:.82rem; font-weight:600; color:var(--text2); } .detail-actions { display:flex; gap:10px; margin-top:16px; } /* ═══════════════════════════════════════════ TABS (book detail) ══════════════════════════════════════════ */ .detail-tabs { display:flex; gap:0; padding:0 40px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; background:var(--bg); backdrop-filter:blur(12px); } .detail-tab { padding:14px 22px; font-size:.88rem; font-weight:600; color:var(--text3); border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .2s ease; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none; display:flex; align-items:center; gap:6px; } .detail-tab:hover { color:var(--text2); } .detail-tab.active { color:var(--gold); border-bottom-color:var(--gold); } .tab-panel { display:none; padding:32px 40px; } .tab-panel.active { display:block; } /* ═══════════════════════════════════════════ JOURNAL SECTION (thoughts + quotes) ══════════════════════════════════════════ */ .journal-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--rad); padding:28px 32px; margin-bottom:24px; } .section-label { font-family:var(--f-display); font-style:italic; font-size:1.05rem; font-weight:700; color:var(--gold); margin-bottom:14px; display:block; } .thoughts-body { font-family:var(--f-hand); font-size:1.4rem; line-height:1.65; color:var(--text); white-space:pre-wrap; } /* ═══════════════════════════════════════════ QUOTES LIST ══════════════════════════════════════════ */ .quotes-list { display:flex; flex-direction:column; gap:16px; } .quote-item { background:var(--surface); border-left:3px solid var(--gold); border-radius:0 var(--rad-sm) var(--rad-sm) 0; padding:18px 22px; position:relative; transition:transform .2s ease; } .quote-item:hover { transform:translateX(4px); } .quote-item::before { content:'\201C'; font-family:var(--f-display); font-size:2.5rem; color:var(--gold); position:absolute; top:-6px; left:10px; opacity:.4; } .quote-text { font-family:var(--f-display); font-style:italic; font-size:1.15rem; line-height:1.55; color:var(--text); } .quote-meta { font-size:.75rem; color:var(--text3); margin-top:6px; } /* ═══════════════════════════════════════════ CHARACTERS ══════════════════════════════════════════ */ .characters-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; } .character-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--rad-sm); padding:18px 20px; } .character-name { font-family:var(--f-display); font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:4px; } .character-feeling { font-size:.9rem; margin-bottom:8px; } .character-notes { font-size:.85rem; color:var(--text2); line-height:1.5; } /* ═══════════════════════════════════════════ SPOILER VAULT ══════════════════════════════════════════ */ .spoiler-vault { position:relative; border-radius:var(--rad); overflow:hidden; } .spoiler-content { background:var(--surface); border:1px solid var(--border); border-radius:var(--rad); padding:28px 32px; font-family:var(--f-hand); font-size:1.35rem; line-height:1.65; color:var(--text); white-space:pre-wrap; } .spoiler-overlay { position:absolute; inset:0; border-radius:var(--rad); background:rgba(74,31,42,.92); backdrop-filter:blur(12px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; cursor:pointer; transition:opacity .6s ease; } .spoiler-overlay.revealed { opacity:0; pointer-events:none; } .spoiler-icon { font-size:2.5rem; } .spoiler-overlay h3 { font-size:1.4rem; color:#fff; } .spoiler-overlay p { font-size:.9rem; color:rgba(255,255,255,.7); } .spoiler-btn { margin-top:8px; padding:10px 24px; border-radius:999px; background:var(--wine); color:#fff; border:none; font-weight:700; font-size:.88rem; cursor:pointer; transition:all .2s ease; } .spoiler-btn:hover { background:color-mix(in srgb,var(--wine) 80%,#fff); } /* ink-spread reveal animation */ @keyframes inkSpread { from { clip-path:circle(0% at 50% 50%); opacity:0; } to { clip-path:circle(150% at 50% 50%); opacity:1; } } .spoiler-content.revealing { animation:inkSpread .8s ease forwards; } /* ═══════════════════════════════════════════ STARS ══════════════════════════════════════════ */ .stars .star { font-size:1rem; } .stars .star.full { color:var(--gold); } .stars .star.half { color:var(--gold); opacity:.7; } .stars .star.empty { color:var(--border2); } /* Star input (interactive rating) */ .star-input { display:flex; flex-direction:row-reverse; gap:4px; } .star-input input { display:none; } .star-input label { font-size:1.8rem; cursor:pointer; color:var(--border2); transition:color .15s ease; line-height:1; } .star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color:var(--gold); } /* ═══════════════════════════════════════════ PRIVATE / PUBLIC BADGE ══════════════════════════════════════════ */ .privacy-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:.72rem; font-weight:700; } .privacy-badge.private { background:rgba(107,42,56,.25); color:var(--wine); border:1px solid var(--wine); } .privacy-badge.public { background:rgba(196,150,74,.15); color:var(--gold); border:1px solid var(--gold-dim); } /* ═══════════════════════════════════════════ BUTTONS ══════════════════════════════════════════ */ .btn { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:999px; font-weight:700; font-size:.88rem; border:none; cursor:pointer; transition:all .22s ease; font-family:var(--f-body); } .btn-gold { background:var(--gold); color:#0F0D0A; } .btn-gold:hover { background:var(--gold2); transform:translateY(-1px); } .btn-ghost { background:transparent; color:var(--text2); border:1.5px solid var(--border); } .btn-ghost:hover { border-color:var(--gold); color:var(--gold); } .btn-danger { background:transparent; color:var(--wine); border:1.5px solid var(--wine); } .btn-danger:hover { background:var(--wine2); color:#fff; } .btn-sm { padding:7px 16px; font-size:.8rem; } .btn-wine { background:var(--wine); color:#fff; } .btn-wine:hover { background:color-mix(in srgb,var(--wine) 80%,#fff); } /* ═══════════════════════════════════════════ FORMS ══════════════════════════════════════════ */ .field { margin-bottom:20px; } .field label { display:block; font-size:.8rem; font-weight:700; color:var(--text2); margin-bottom:8px; letter-spacing:.03em; text-transform:uppercase; } .field .hint { font-size:.75rem; color:var(--text3); margin-top:6px; } .input { width:100%; padding:13px 16px; background:var(--surface2); border:1.5px solid var(--border); border-radius:var(--rad-sm); color:var(--text); font-size:.95rem; transition:border-color .2s ease, box-shadow .2s ease; } .input::placeholder { color:var(--text3); } .input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim); outline:none; } textarea.input { resize:vertical; min-height:120px; line-height:1.7; } textarea.journal-input { font-family:var(--f-hand); font-size:1.35rem; min-height:180px; background-image:repeating-linear-gradient(var(--surface2),var(--surface2) 34px,var(--border) 35px); background-attachment:local; border-left:3px solid var(--gold); } select.input { cursor:pointer; } .field-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .mood-picker { display:flex; flex-wrap:wrap; gap:10px; } .mood-picker input { display:none; } .mood-picker label { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface2); font-size:.85rem; font-weight:600; color:var(--text2); cursor:pointer; transition:all .2s ease; } .mood-picker input:checked + label { background:var(--gold-dim); border-color:var(--gold); color:var(--gold); } .status-picker { display:flex; gap:10px; flex-wrap:wrap; } .status-picker input { display:none; } .status-picker label { padding:9px 18px; border-radius:var(--rad-sm); border:1.5px solid var(--border); background:var(--surface2); font-size:.85rem; font-weight:600; color:var(--text2); cursor:pointer; transition:all .2s ease; } .status-picker input:checked + label { background:var(--gold-dim); border-color:var(--gold); color:var(--gold); } .privacy-toggle-wrap { display:flex; align-items:center; gap:14px; padding:16px 20px; background:var(--surface2); border:1.5px solid var(--border); border-radius:var(--rad-sm); } .privacy-toggle-wrap .pt-icon { font-size:1.4rem; } .privacy-toggle-wrap .pt-text { flex:1; } .privacy-toggle-wrap .pt-title { font-weight:700; font-size:.9rem; } .privacy-toggle-wrap .pt-sub { font-size:.78rem; color:var(--text2); margin-top:2px; } .toggle-switch { position:relative; width:48px; height:26px; cursor:pointer; } .toggle-switch input { display:none; } .toggle-track { display:block; width:48px; height:26px; background:var(--border2); border-radius:999px; transition:background .3s ease; } .toggle-thumb { position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform .3s ease; } .toggle-switch input:checked ~ .toggle-track { background:var(--wine); } .toggle-switch input:checked ~ .toggle-thumb { transform:translateX(22px); } .quote-row { display:flex; gap:10px; margin-bottom:10px; align-items:flex-start; } .quote-row textarea { flex:1; min-height:70px; } .remove-btn { flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface2); color:var(--text3); font-size:1.1rem; display:flex; align-items:center; justify-content:center; transition:all .2s ease; cursor:pointer; } .remove-btn:hover { background:var(--wine2); color:#fff; border-color:var(--wine); } .char-row { display:flex; gap:10px; margin-bottom:10px; align-items:flex-start; } .char-row .char-fields { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; } .cover-upload { display:flex; align-items:center; gap:16px; padding:16px; border:2px dashed var(--border2); border-radius:var(--rad-sm); } .cover-preview { width:80px; height:112px; border-radius:6px; overflow:hidden; flex-shrink:0; background:var(--surface2); } .cover-preview img { width:100%; height:100%; object-fit:cover; } .upload-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px; border:1px solid var(--border); background:var(--surface2); font-size:.84rem; font-weight:600; color:var(--text2); cursor:pointer; transition:all .2s ease; } .upload-btn:hover { border-color:var(--gold); color:var(--gold); } input[type="file"] { display:none; } .tags-input-wrap { position:relative; } .tag-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .tag-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:var(--gold-dim); border:1px solid var(--border2); border-radius:4px; font-size:.75rem; font-weight:600; color:var(--text); } .tag-chip button { background:none; border:none; color:var(--text3); cursor:pointer; font-size:.9rem; line-height:1; } .tag-chip button:hover { color:var(--wine); } /* ═══════════════════════════════════════════ FLASH MESSAGES ══════════════════════════════════════════ */ .flash { padding:14px 20px; margin:0 40px 24px; border-radius:var(--rad-sm); font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:10px; animation:dropIn .4s ease; } .flash.success { background:rgba(100,150,80,.2); border:1px solid rgba(100,150,80,.4); color:#8FB868; } .flash.error { background:rgba(180,60,60,.2); border:1px solid rgba(180,60,60,.4); color:#E07070; } @keyframes dropIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } } /* ═══════════════════════════════════════════ LANDING / LOGIN / REGISTER ══════════════════════════════════════════ */ .fullscreen-center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg); } .auth-card { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:var(--rad); padding:40px 36px; box-shadow:var(--sh); } .auth-card .brand-icon { font-size:2rem; margin-bottom:12px; } .auth-card h1 { font-size:1.8rem; margin-bottom:6px; } .auth-card p.sub { font-size:.88rem; color:var(--text2); margin-bottom:28px; } .auth-card .btn { width:100%; justify-content:center; margin-top:6px; } .auth-switch { margin-top:20px; font-size:.85rem; color:var(--text2); text-align:center; } .auth-switch a { color:var(--gold); font-weight:700; } .auth-card.wide { max-width:520px; } .slug-row { display:flex; border:1.5px solid var(--border); border-radius:var(--rad-sm); overflow:hidden; } .slug-row:focus-within { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim); } .slug-prefix { padding:13px 12px; background:var(--surface2); border-right:1px solid var(--border); font-size:.8rem; font-weight:600; color:var(--text3); white-space:nowrap; } .slug-row input { flex:1; border:none; background:transparent; padding:13px 14px; color:var(--text); font-size:.95rem; } .slug-row input:focus { outline:none; } /* Landing hero */ .landing-shell { min-height:100vh; display:flex; flex-direction:column; } .landing-hero { flex:1; display:grid; grid-template-columns:1fr 1fr; min-height:100vh; } .landing-left { background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:60px 64px; } .landing-left .eyebrow { font-size:.75rem; text-transform:uppercase; letter-spacing:.15em; color:var(--gold); font-weight:700; margin-bottom:16px; } .landing-left h1 { font-size:clamp(2.2rem,4vw,3.6rem); line-height:1.05; margin-bottom:16px; } .landing-left h1 span { color:var(--gold); } .landing-left p { font-size:1.05rem; color:var(--text2); line-height:1.65; max-width:440px; margin-bottom:32px; } .landing-left .cta-row { display:flex; gap:12px; flex-wrap:wrap; } .landing-right { background:var(--bg2); display:flex; align-items:center; justify-content:center; padding:40px; } .landing-preview { width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:var(--rad); overflow:hidden; box-shadow:var(--sh); } .preview-header { background:var(--surface2); padding:16px 20px; border-bottom:1px solid var(--border); } .preview-books { padding:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .preview-book { aspect-ratio:2/3; border-radius:3px 6px 6px 3px; overflow:hidden; box-shadow:var(--sh-sm); } .preview-book img { width:100%; height:100%; object-fit:cover; } .preview-shelf { height:20px; margin:0 -4px 16px; background:linear-gradient(to bottom,var(--shelf-top),var(--shelf)); box-shadow:0 6px 16px rgba(0,0,0,.5); } /* ═══════════════════════════════════════════ ADMIN STYLES ══════════════════════════════════════════ */ .admin-page { padding:32px 40px 80px; max-width:1100px; } .admin-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:14px; } .admin-topbar h1 { font-size:1.9rem; } .admin-topbar p { font-size:.9rem; color:var(--text2); margin-top:4px; } .stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; margin-bottom:28px; } .stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--rad-sm); padding:20px 22px; } .stat-card .num { font-family:var(--f-display); font-size:2.2rem; font-weight:700; color:var(--gold); } .stat-card .label { font-size:.8rem; color:var(--text2); margin-top:2px; } .panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--rad); padding:24px 28px; margin-bottom:24px; } .panel h2 { font-size:1.2rem; margin-bottom:18px; } .admin-table { width:100%; border-collapse:collapse; font-size:.88rem; } .admin-table th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text3); padding:0 12px 12px; border-bottom:1px solid var(--border); font-weight:700; } .admin-table td { padding:14px 12px; border-bottom:1px solid var(--border); vertical-align:middle; } .admin-table tr:last-child td { border-bottom:none; } .admin-table .row-cover { width:40px; height:56px; border-radius:3px 6px 6px 3px; overflow:hidden; } .admin-table .row-cover img { width:100%; height:100%; object-fit:cover; } .admin-table .row-title { font-family:var(--f-display); font-weight:700; font-size:1rem; } .admin-table .row-actions { display:flex; gap:8px; justify-content:flex-end; } /* ═══════════════════════════════════════════ BOTTOM NAV (mobile only, hidden desktop) ══════════════════════════════════════════ */ .bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; z-index:50; background:var(--surface); border-top:1px solid var(--border); padding:8px 0 env(safe-area-inset-bottom,8px); } .bottom-nav-inner { display:flex; width:100%; justify-content:space-around; align-items:flex-end; } .bottom-nav a, .bottom-nav button { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px; font-size:.65rem; font-weight:600; color:var(--text3); border:none; background:none; cursor:pointer; transition:color .2s ease; } .bottom-nav a.active, .bottom-nav button:hover { color:var(--gold); } .bottom-nav .bn-icon { font-size:1.3rem; } .bottom-nav .add-fab { width:52px; height:52px; border-radius:50%; background:var(--gold); color:#0F0D0A; display:flex; align-items:center; justify-content:center; font-size:1.6rem; box-shadow:0 4px 16px rgba(196,150,74,.4); margin-top:-14px; align-self:flex-start; transition:all .2s ease; } .bottom-nav .add-fab:hover { transform:scale(1.08); } /* ═══════════════════════════════════════════ UTILITY ══════════════════════════════════════════ */ .container { max-width:1240px; margin:0 auto; padding:0 40px; } .empty-state { text-align:center; padding:60px 20px; background:var(--surface); border:2px dashed var(--border); border-radius:var(--rad); margin:24px; } .empty-state .big { font-family:var(--f-hand); font-size:1.5rem; display:block; margin-bottom:8px; } .empty-state p { color:var(--text2); font-size:.9rem; } .book-form { max-width:780px; } .form-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--rad); padding:26px 28px; margin-bottom:22px; } .form-section h3 { font-size:1.1rem; margin-bottom:18px; } .check-row { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:.9rem; font-weight:600; } .check-row input { width:18px; height:18px; accent-color:var(--gold); cursor:pointer; } /* ═══════════════════════════════════════════ ANIMATIONS ══════════════════════════════════════════ */ @keyframes inkDrop { 0% { transform:scale(0); opacity:1; } 100% { transform:scale(20); opacity:0; } } .ink-drop { position:fixed; width:20px; height:20px; border-radius:50%; background:var(--gold); pointer-events:none; z-index:9999; animation:inkDrop .8s ease forwards; } @keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } .fade-up { animation:fadeUp .4s ease forwards; } @keyframes themeFlip { from { opacity:0; } to { opacity:1; } } html.theme-transitioning body { animation:themeFlip .5s ease; } /* ═══════════════════════════════════════════ JOURNAL HERO BANNER ══════════════════════════════════════════ */ .journal-hero { display:grid; grid-template-columns:1fr 220px; align-items:center; gap:24px; padding:28px 40px 24px; background:linear-gradient(135deg,var(--bg2) 0%,var(--surface) 60%,var(--bg2) 100%); border-bottom:1px solid var(--border); position:relative; overflow:hidden; } .journal-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 70% 50%,var(--gold-dim) 0%,transparent 65%); pointer-events:none; } .hero-left { position:relative; z-index:1; } .hero-greeting { margin-bottom:20px; } .hero-greeting h2 { font-size:clamp(1.9rem,3.5vw,2.8rem); line-height:1.1; margin-bottom:6px; } .hero-greeting h2 .spark { color:var(--gold); } .hero-greeting .tagline { font-family:var(--f-hand); font-size:1.15rem; color:var(--text2); } .hero-stats { display:flex; gap:28px; flex-wrap:wrap; } .hero-stat .num { font-family:var(--f-display); font-size:1.9rem; font-weight:700; color:var(--gold); line-height:1; } .hero-stat .lbl { font-size:.7rem; color:var(--text3); text-transform:uppercase; letter-spacing:.1em; margin-top:2px; } .hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; } .hero-art { position:relative; z-index:1; } .hero-art svg { width:100%; height:auto; display:block; } /* ═══════════════════════════════════════════ COVER PLACEHOLDER (coloured, per-book) ══════════════════════════════════════════ */ .cover-ph { position:absolute; inset:0; /* fills cover-wrap reliably */ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 8px; gap:6px; } .cover-ph-initial { font-family:var(--f-display); font-size:2.8rem; font-weight:700; color:rgba(255,255,255,.75); line-height:1; } .cover-ph-title { font-family:var(--f-hand); font-size:.75rem; color:rgba(255,255,255,.5); text-align:center; line-height:1.25; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } .cover-ph-bar { width:40%; height:1.5px; background:rgba(255,255,255,.2); border-radius:1px; margin-top:4px; } .cover-ph-author { font-size:.62rem; color:rgba(255,255,255,.35); text-align:center; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; } /* ═══════════════════════════════════════════ MOBILE SEARCH — stacks below greeting ══════════════════════════════════════════ */ .mobile-search { display:none; padding:0 16px 12px; } .mobile-search .search-inner { position:relative; } .mobile-search input { width:100%; padding:11px 16px 11px 38px; background:var(--surface2); border:1.5px solid var(--border); border-radius:999px; color:var(--text); font-size:.9rem; } .mobile-search input:focus { border-color:var(--gold); outline:none; } .mobile-search .si { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text3); } /* ═══════════════════════════════════════════ RESPONSIVE — tablet ≤1024px ══════════════════════════════════════════ */ @media (max-width:1024px) { /* sidebar: completely gone, no space reserved */ .sidebar { display:none !important; } /* main: full viewport width */ .main-content { margin-left:0 !important; padding-bottom:80px; } /* show bottom nav */ .bottom-nav { display:flex; } /* hero layout: single column, no illustration */ .journal-hero { grid-template-columns:1fr; padding:22px 18px 18px; } .hero-art { display:none; } /* admin greeting header */ .greeting-header { padding:20px 18px 16px; flex-direction:column; gap:12px; } .header-actions .search-bar { display:none; } .mobile-search { display:block; } /* bookshelf */ .bookshelf-wrap { padding:8px 18px 40px; } .books-row { grid-template-columns:repeat(3,1fr); gap:14px; } .shelf-divider { margin:0 -2px; } /* tabs + mood: horizontal scroll */ .status-tabs { padding:0 18px; overflow-x:auto; scrollbar-width:none; white-space:nowrap; flex-wrap:nowrap; } .status-tabs::-webkit-scrollbar { display:none; } .mood-filter-bar { padding:12px 18px; overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; } .mood-filter-bar::-webkit-scrollbar { display:none; } /* book detail */ .detail-nav,.detail-hero,.detail-tabs,.tab-panel { padding-left:18px; padding-right:18px; } .detail-hero { flex-direction:column; } .detail-cover { width:110px; } /* admin */ .admin-page { padding:20px 18px 80px; } .flash { margin-left:18px; margin-right:18px; } /* landing */ .landing-hero { grid-template-columns:1fr; } .landing-right { display:none; } .landing-left { padding:40px 24px; } } /* ═══════════════════════════════════════════ RESPONSIVE — phone ≤640px ══════════════════════════════════════════ */ @media (max-width:640px) { /* ultra-compact hero so books appear above fold */ .journal-hero { padding:14px 16px 12px; gap:0; background:linear-gradient(to bottom,var(--bg2),var(--surface)); } .hero-greeting { margin-bottom:10px; } .hero-greeting h2 { font-size:1.45rem; margin-bottom:3px; } .hero-greeting .tagline { font-size:.92rem; } .hero-stats { gap:16px; margin-bottom:0; } .hero-stat .num { font-size:1.35rem; } .hero-stat .lbl { font-size:.6rem; letter-spacing:.06em; } /* bottom nav handles navigation; hide redundant CTAs */ .hero-actions { display:none !important; } /* search wastes vertical space on mobile */ .mobile-search { display:none !important; } /* compact tabs + mood */ .status-tabs { padding:0 14px; } .status-tab { padding:9px 11px; font-size:.78rem; } .mood-filter-bar { padding:8px 14px; } .mood-pill { padding:5px 11px; font-size:.76rem; gap:4px; } .mood-filter-bar .label { display:none; } /* 2-col book grid */ .books-row { grid-template-columns:repeat(2,1fr); gap:10px; } .bookshelf-wrap { padding:6px 14px 40px; } /* forms */ .field-row { grid-template-columns:1fr; } .char-row .char-fields { grid-template-columns:1fr; } /* book detail */ .detail-tabs { overflow-x:auto; scrollbar-width:none; } .detail-tabs::-webkit-scrollbar { display:none; } .tab-panel { padding:18px 14px; } .journal-section { padding:18px 16px; } .cover-ph-initial { font-size:2rem; } /* admin stat cards: 2 cols */ .stat-cards { grid-template-columns:repeat(2,1fr); } } /* ═══════════════════════════════════════════ RESPONSIVE — tiny ≤380px ══════════════════════════════════════════ */ @media (max-width:380px) { .hero-greeting h2 { font-size:1.25rem; } .hero-stats { gap:12px; } .hero-stat .num { font-size:1.2rem; } .books-row { gap:8px; } .bookshelf-wrap { padding:4px 10px 40px; } } @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }