/* ═══════════════════════════════════════════════════════════════ MAKTAB — design system Neutral whites, one warm coral accent, generous rounding. Light is the default; dark is opt-in via data-theme on , remembered across visits and honouring the OS setting first time. ═══════════════════════════════════════════════════════════════ */ :root{ --ink:#222222; --gray-mid:#717171; --gray-light:#B0B0B0; --line:#EBEBEB; --bg:#FFFFFF; --bg-soft:#F7F7F7; --coral:#FF5A5F; --coral-deep:#E0484D; --coral-wash:rgba(255,90,95,.10); --mint:#00A699; --mint-soft:#E3F5F3; --invert-bg:#222222; --invert-text:#FFFFFF; --ok:#00A699; --bad:#E0484D; --warn:#B8801F; --shadow-1:0 2px 12px -6px rgba(0,0,0,.14); --shadow-2:0 8px 24px -12px rgba(0,0,0,.18); --shadow-3:0 24px 48px -20px rgba(0,0,0,.28); --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:28px; --r-pill:100px; --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --ease:cubic-bezier(.4,0,.2,1); --header-h:76px; } [data-theme="dark"]{ --ink:#F2F2F2; --gray-mid:#A8A8A8; --gray-light:#6E6E6E; --line:#2C2C2C; --bg:#141414; --bg-soft:#1E1E1E; --coral:#FF6A6E; --coral-deep:#E0484D; --coral-wash:rgba(255,106,110,.14); --mint:#3DBBAE; --mint-soft:rgba(61,187,174,.14); --invert-bg:#F2F2F2; --invert-text:#141414; --ok:#3DBBAE; --bad:#FF6A6E; --warn:#D9A441; --shadow-1:0 2px 12px -6px rgba(0,0,0,.5); --shadow-2:0 8px 24px -12px rgba(0,0,0,.6); --shadow-3:0 24px 48px -20px rgba(0,0,0,.7); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; transition:background .2s var(--ease),color .2s var(--ease); } h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.015em;line-height:1.2} h1{font-size:clamp(24px,3.2vw,34px)} h2{font-size:22px} h3{font-size:18px;font-weight:700} h4{font-size:15px;font-weight:700} p{margin:0 0 1em} p:last-child{margin-bottom:0} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font-family:inherit} .wrap{max-width:1240px;margin:0 auto;padding:0 40px} .wrap-narrow{max-width:760px;margin:0 auto;padding:0 40px} /* ── Typographic helpers ──────────────────────────────────────── */ .eyebrow{ font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--coral);margin:0 0 10px; } .eyebrow--foil{color:var(--mint)} .shelf-code{ font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--gray-light); } .hint{font-size:12.5px;color:var(--gray-mid);margin-top:6px} .link-more{font-size:13px;font-weight:700;color:var(--coral)} .link-back{font-size:13.5px;font-weight:600;color:var(--gray-mid)} .link-back:hover{color:var(--ink)} .tag{ display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill); background:var(--bg-soft);color:var(--gray-mid);border:1px solid var(--line); } .tag--foil{background:var(--coral-wash);color:var(--coral);border-color:transparent} .tag--out{background:var(--bg-soft);color:var(--gray-light)} .stars{color:var(--coral);letter-spacing:.06em} /* ── Buttons ──────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 24px;border-radius:var(--r-md);border:1.5px solid transparent; font-size:14px;font-weight:700;cursor:pointer;background:none;color:var(--ink); transition:transform .12s var(--ease),background .15s var(--ease), border-color .15s var(--ease),opacity .15s var(--ease); white-space:nowrap; } .btn:active{transform:scale(.97)} .btn:disabled{opacity:.45;cursor:not-allowed} .btn:disabled:active{transform:none} .btn-primary{background:var(--coral);color:#fff} .btn-primary:hover{background:var(--coral-deep)} /* The dark pill — used for the main commerce action on a page */ .btn-foil{background:var(--invert-bg);color:var(--invert-text)} .btn-foil:hover{opacity:.86} .btn-ghost{border-color:var(--line);background:var(--bg);color:var(--ink)} .btn-ghost:hover{background:var(--bg-soft)} .btn-quiet{padding:8px 12px;font-weight:600;color:var(--gray-mid)} .btn-quiet:hover{color:var(--ink);background:var(--bg-soft)} .btn-sm{padding:10px 18px;font-size:13px;border-radius:var(--r-sm)} .btn-block{display:flex;width:100%} /* ── Header ───────────────────────────────────────────────────── */ .site-header{ position:sticky;top:0;z-index:60;background:var(--bg); border-bottom:1px solid var(--line); } .header-inner{ max-width:1240px;margin:0 auto;padding:0 40px;height:var(--header-h); display:flex;align-items:center;gap:32px; } .brand{display:flex;align-items:center;gap:8px;flex-shrink:0} .brand-mark{font-size:21px;font-weight:800;letter-spacing:-.02em} .brand-dot{width:6px;height:6px;border-radius:50%;background:var(--coral)} .brand-sub{ font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--gray-light); } .nav{display:flex;gap:26px;flex:1;min-width:0} .nav a{font-size:14px;font-weight:600;color:var(--gray-mid);white-space:nowrap} .nav a:hover{color:var(--ink)} .nav a[aria-current]{color:var(--ink)} .header-search{position:relative;width:300px;flex-shrink:0} .header-search input{ width:100%;background:var(--bg-soft);border:1px solid var(--line); border-radius:var(--r-pill);padding:11px 18px 11px 42px; font-size:13.5px;font-family:inherit;color:var(--ink); } .header-search input::placeholder{color:var(--gray-mid)} .header-search input:focus{outline:none;border-color:var(--gray-light);background:var(--bg)} .header-search svg{ position:absolute;left:16px;top:50%;transform:translateY(-50%); width:16px;height:16px;color:var(--gray-mid);pointer-events:none; } .header-actions{display:flex;align-items:center;gap:9px;flex-shrink:0} .icon-btn{ width:40px;height:40px;border-radius:50%;background:var(--bg-soft); border:1px solid var(--line);display:flex;align-items:center;justify-content:center; position:relative;cursor:pointer;color:var(--ink);flex-shrink:0; transition:background .15s var(--ease); } .icon-btn:hover{background:var(--line)} .icon-btn svg{width:18px;height:18px} .bag-count{ position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px; background:var(--coral);color:#fff;border:2px solid var(--bg);border-radius:50%; font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center; } /* Live search suggestions */ .search-suggest{ position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg); border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2); overflow:hidden;display:none;z-index:70; } .search-suggest.open{display:block} .search-suggest a{display:block;padding:12px 16px;font-size:13.5px} .search-suggest a:hover{background:var(--bg-soft)} .search-suggest .a{font-size:12px;color:var(--gray-mid)} /* ── Hero ─────────────────────────────────────────────────────── */ .hero{padding:44px 0 8px} .hero-inner{display:grid;grid-template-columns:1.5fr 1fr;gap:20px} /* On desktop the first banner is the big panel; the rest become the stacked tiles beside it. On mobile every banner joins one carousel. */ .hero-track{min-width:0} .hero-track .hero-slide:not(:first-child){display:none} .hero-slide{ border-radius:var(--r-2xl);padding:48px;min-height:330px; display:flex;flex-direction:column;justify-content:center; color:#fff;position:relative;overflow:hidden; } .hero-slide::after{ content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px; border-radius:50%;background:rgba(255,255,255,.10); } .hero-slide::before{ content:"";position:absolute;right:60px;bottom:-80px;width:180px;height:180px; border-radius:50%;background:rgba(255,255,255,.08); } .hero-copy{position:relative;z-index:1;max-width:460px} .hero-copy .eyebrow{color:rgba(255,255,255,.85)} .hero-copy h2{font-size:clamp(26px,3.4vw,38px);margin:0 0 10px;line-height:1.15} .hero-copy p{font-size:15px;opacity:.92;margin:0 0 22px} .hero-cta{ display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--coral-deep); padding:13px 24px;border-radius:var(--r-pill);font-size:13.5px;font-weight:700; width:fit-content;position:relative;z-index:1; } .hero-cta:hover{transform:translateY(-1px)} .hero-price{ position:absolute;bottom:26px;right:26px;background:#fff;color:#222; border-radius:var(--r-md);padding:10px 16px;z-index:2;box-shadow:var(--shadow-2); } .hero-price .k{ font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#717171; } .hero-price .v{font-size:16px;font-weight:800} /* The stacked tiles beside the main hero panel */ .hero-side{display:flex;flex-direction:column;gap:20px} .hero-tile{ flex:1;border-radius:var(--r-xl);padding:26px;color:#fff; display:flex;flex-direction:column;justify-content:center; position:relative;overflow:hidden; } .hero-tile::after{ content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px; border-radius:50%;background:rgba(255,255,255,.10); } .hero-tile .t{font-size:16px;font-weight:800;margin:0 0 4px;position:relative} .hero-tile .s{font-size:12.5px;opacity:.88;margin:0;position:relative} .hero-book{display:none} .hero-nav{display:none} .hero-arrow{display:none} .hero-dot{ width:6px;height:6px;border-radius:50%;background:var(--line); border:none;padding:0;cursor:pointer;transition:all .25s var(--ease); } .hero-dot.active{width:18px;background:var(--coral)} /* ── Category pills ───────────────────────────────────────────── */ .cat-strip{display:flex;gap:14px;padding:36px 0 8px;overflow-x:auto;scrollbar-width:none} .cat-strip::-webkit-scrollbar{display:none} .cat-card{ display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:var(--r-pill); background:var(--bg-soft);border:1px solid var(--line);flex-shrink:0; font-size:13.5px;font-weight:600;color:var(--gray-mid); transition:background .15s var(--ease),color .15s var(--ease); } .cat-card:hover{color:var(--ink)} .cat-card[aria-current],.cat-card.on{ background:var(--invert-bg);border-color:var(--invert-bg);color:var(--invert-text); } .cat-card .ic{font-size:16px} /* ── Sections ─────────────────────────────────────────────────── */ .section{padding:44px 0 0} .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 20px} .section-head h2{font-size:22px} .section-head p{font-size:13.5px;color:var(--gray-mid);margin:4px 0 0} /* ── Book cards ───────────────────────────────────────────────── */ .book-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px} .rail{ display:flex;gap:22px;overflow-x:auto;scrollbar-width:none; padding-bottom:6px;scroll-snap-type:x proximity; } .rail::-webkit-scrollbar{display:none} .rail .book-card{flex:0 0 190px;scroll-snap-align:start} .book-card{position:relative;display:block} .book-card > a:first-child{position:relative;display:block} .book-card:hover .cover{transform:translateY(-4px);box-shadow:var(--shadow-3)} .book-card:hover .save-pill{opacity:1;transform:scale(1)} .cover{ width:100%;aspect-ratio:3/4;border-radius:var(--r-lg);position:relative; overflow:hidden;box-shadow:var(--shadow-2);border:1px solid rgba(0,0,0,.05); background:var(--bg-soft); transition:transform .18s var(--ease),box-shadow .18s var(--ease); } .cover img{width:100%;height:100%;object-fit:cover} /* Fallback when no cover image exists: a typographic jacket drawn from the book's own metadata, so we never borrow anyone's artwork. */ .cover-fallback{ position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between; padding:16px;color:#fff; } .cover-title{font-size:15px;font-weight:800;line-height:1.22;letter-spacing:-.01em} .cover-author{font-size:11px;font-weight:600;opacity:.78;letter-spacing:.02em} .cover-rule{width:26px;height:2px;background:rgba(255,255,255,.5);border-radius:2px;margin:8px 0} .cover .rating{ position:absolute;top:10px;right:10px;background:rgba(255,255,255,.94); border-radius:var(--r-pill);padding:4px 9px;font-size:11px;font-weight:700; color:#222;display:flex;align-items:center;gap:3px;z-index:2; box-shadow:0 2px 8px -4px rgba(0,0,0,.3); } .save-pill{ position:absolute;bottom:10px;right:10px;width:36px;height:36px;border-radius:50%; background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center; border:2px solid var(--bg);cursor:pointer;z-index:3;box-shadow:var(--shadow-2); opacity:0;transform:scale(.85);transition:all .15s var(--ease); } .save-pill svg{width:16px;height:16px} .save-pill.saved{background:var(--coral);color:#fff;opacity:1;transform:scale(1)} .book-meta{margin-top:12px} .book-title{font-size:14.5px;font-weight:700;line-height:1.3;margin:0 0 3px} .book-byline{font-size:12.5px;color:var(--gray-mid);margin:0 0 5px} .price{font-size:13.5px;font-weight:700;color:var(--ink)} .price-was{font-size:12px;color:var(--gray-light);text-decoration:line-through;margin-left:6px;font-weight:500} .price-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap} /* Discount now rides on the cover, clear of the price and the + button. */ .cover-off{ position:absolute;top:10px;left:10px;z-index:2;background:var(--coral);color:#fff; font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:4px 8px;border-radius:var(--r-pill); box-shadow:0 2px 8px -4px rgba(0,0,0,.3); } .price-row .tag--foil{display:none} .stock-line{font-size:12px;color:var(--mint);font-weight:600;margin-top:4px} .stock-line.low{color:var(--warn)} .stock-line.out{color:var(--gray-light)} /* Touch devices have no hover, so the affordances stay visible */ @media(hover:none){ .save-pill{opacity:1;transform:scale(1)} } /* ── Promo / alert strip ──────────────────────────────────────── */ .alert-info,.alert{ border-radius:var(--r-lg);padding:14px 18px;font-size:13.5px; border:1px solid var(--line);background:var(--bg-soft);margin-bottom:18px; } .alert-ok{background:var(--mint-soft);border-color:transparent;color:var(--mint)} .alert-bad{background:var(--coral-wash);border-color:transparent;color:var(--coral-deep)} /* ── Book detail ──────────────────────────────────────────────── */ .book-hero{ display:grid;grid-template-columns:340px 1fr;gap:48px;padding:40px 0 0;align-items:start; } .book-hero .cover{border-radius:var(--r-xl);box-shadow:var(--shadow-3)} .buy-box{ background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-xl); padding:24px;margin-top:24px; } .buy-price{display:flex;align-items:baseline;gap:10px;margin-bottom:18px} .buy-price .now{font-size:28px;font-weight:800} .buy-actions{display:flex;flex-direction:column;gap:10px} .spec-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px} .spec-table td{padding:11px 0;border-bottom:1px solid var(--line)} .spec-table td:first-child{color:var(--gray-mid);width:40%} .spec-table tr:last-child td{border-bottom:none} .qty{display:flex;align-items:center;gap:12px} .qty button{ width:32px;height:32px;border-radius:50%;background:var(--bg); border:1px solid var(--line);font-size:16px;font-weight:600;cursor:pointer; display:flex;align-items:center;justify-content:center;color:var(--ink); } .qty button:hover{background:var(--bg-soft)} .qty span{font-size:14px;font-weight:700;min-width:20px;text-align:center} /* ── Reader ───────────────────────────────────────────────────── */ .reader-shell{max-width:680px;margin:0 auto;padding:0 24px} .reader-bar{ position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0; } .reader-progress{height:3px;background:var(--coral);transition:width .3s var(--ease)} .reader-page{font-size:17px;line-height:1.85;padding:40px 0} .reader-page p{margin:0 0 1.3em} .reader-foot{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:24px 0 60px;border-top:1px solid var(--line); } .reader-theme-sepia{--bg:#FBF6EC;--bg-soft:#F3EADA;--ink:#3A3226;--line:#E5D9C3} .reader-theme-night{--bg:#141414;--bg-soft:#1E1E1E;--ink:#D8D8D8;--line:#2C2C2C} .sample-end{ background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-xl); padding:32px;text-align:center;margin:20px 0 60px; } .preview-embed{width:100%;height:640px;border:none;border-radius:var(--r-lg);background:var(--bg-soft)} .preview-note{font-size:12.5px;color:var(--gray-mid);margin-top:12px} /* ── Cart ─────────────────────────────────────────────────────── */ .cart-line{ display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line); } .cart-line .cover{width:64px;height:88px;aspect-ratio:auto;flex-shrink:0;border-radius:var(--r-sm)} .cart-line .info{flex:1;min-width:0} .summary{ background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-xl);padding:24px; } .summary-line{ display:flex;justify-content:space-between;gap:16px;font-size:13.5px; color:var(--gray-mid);padding:7px 0; } .summary-line.total{ font-size:17px;font-weight:800;color:var(--ink); border-top:1px solid var(--line);margin-top:10px;padding-top:16px; } /* ── Forms ────────────────────────────────────────────────────── */ .field{margin-bottom:18px} .field label{ display:block;font-size:12.5px;font-weight:700;letter-spacing:.02em; margin-bottom:7px;color:var(--ink); } .field input,.field select,.field textarea{ width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r-md); font-size:14.5px;font-family:inherit;background:var(--bg);color:var(--ink); transition:border-color .15s var(--ease); } .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--ink); } .field textarea{resize:vertical;line-height:1.6} .field.err input,.field.err select,.field.err textarea{border-color:var(--bad)} .err-msg{font-size:12.5px;color:var(--bad);margin-top:6px;font-weight:600} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .pay-option{ display:flex;align-items:center;gap:14px;padding:16px;border:1.5px solid var(--line); border-radius:var(--r-md);margin-bottom:10px;cursor:pointer; transition:border-color .15s var(--ease),background .15s var(--ease); } .pay-option:hover{background:var(--bg-soft)} .pay-option input{width:20px;height:20px;accent-color:var(--coral);flex-shrink:0} .pay-logo{ width:44px;height:30px;border-radius:6px;display:grid;place-items:center; font-size:9px;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:.02em; } .pay-cod{background:var(--invert-bg);color:var(--invert-text)} .pay-jc{background:#C8102E} .checkout-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start} /* ── Auth ─────────────────────────────────────────────────────── */ .auth-page{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - var(--header-h))} .auth-form{padding:60px 40px;max-width:460px;margin:0 auto;width:100%} .auth-aside{ background:var(--bg-soft);padding:60px 48px;display:flex;flex-direction:column; justify-content:center;border-left:1px solid var(--line); } .google-btn{ display:flex;align-items:center;justify-content:center;gap:10px;width:100%; padding:13px;border:1.5px solid var(--line);border-radius:var(--r-md); background:var(--bg);font-size:14px;font-weight:700;cursor:pointer;color:var(--ink); } .google-btn:hover{background:var(--bg-soft)} .divider-or{ display:flex;align-items:center;gap:16px;margin:24px 0; font-size:12px;color:var(--gray-light);font-weight:600; } .divider-or::before,.divider-or::after{content:"";flex:1;height:1px;background:var(--line)} /* ── Order tracking ───────────────────────────────────────────── */ .track-card{ background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-xl);padding:28px; } .track-head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px} .track-code{font-size:20px;font-weight:800;letter-spacing:-.01em} .status-pill{ display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill); background:var(--coral-wash);color:var(--coral); } .status-pill.done{background:var(--mint-soft);color:var(--mint)} .status-pill.dead{background:var(--bg-soft);color:var(--gray-mid)} .timeline{position:relative;padding-left:34px} .timeline::before{ content:"";position:absolute;left:10px;top:12px;bottom:12px;width:2px;background:var(--line); } .timeline-fill{ position:absolute;left:10px;top:12px;width:2px;background:var(--mint); transition:height .6s var(--ease); } .tl-step{position:relative;padding:0 0 26px} .tl-step:last-child{padding-bottom:0} .tl-dot{ position:absolute;left:-34px;top:2px;width:22px;height:22px;border-radius:50%; background:var(--bg);border:2px solid var(--line);display:grid;place-items:center; font-size:11px;color:var(--gray-light); } .tl-step.done .tl-dot{background:var(--mint);border-color:var(--mint);color:#fff} .tl-step.current .tl-dot{background:var(--coral);border-color:var(--coral);color:#fff} .tl-step .t{font-size:14.5px;font-weight:700} .tl-step .d{font-size:12.5px;color:var(--gray-mid)} .tl-step.pending .t{color:var(--gray-light);font-weight:600} /* ── Bottom sheets (mobile filters, sort) ─────────────────────── */ .sheet-backdrop{ position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:90; opacity:0;pointer-events:none;transition:opacity .25s var(--ease); } .sheet-backdrop.open{opacity:1;pointer-events:auto} .sheet{ position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--bg); border-radius:var(--r-2xl) var(--r-2xl) 0 0;padding:10px 20px calc(24px + env(safe-area-inset-bottom)); transform:translateY(100%);transition:transform .3s var(--ease); max-height:82vh;overflow-y:auto; } .sheet.open{transform:none} .sheet-grip{width:38px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 18px} /* ── Mobile tab bar ───────────────────────────────────────────── */ .tabbar{ display:none;position:fixed;left:0;right:0;bottom:0;z-index:80; background:var(--bg);border-top:1px solid var(--line); padding:10px 8px calc(10px + env(safe-area-inset-bottom)); /* Paint the safe-area strip too, so the phone's gesture bar never shows through as a dark notch behind the tab bar. */ box-shadow:0 1px 0 var(--bg), 0 40px 0 var(--bg); } .tabbar a{ flex:1;display:flex;flex-direction:column;align-items:center;gap:4px; font-size:9.5px;font-weight:600;color:var(--gray-light);padding:4px 0; } .tabbar a svg{width:21px;height:21px} .tabbar a[aria-current]{color:var(--coral)} /* ── Footer ───────────────────────────────────────────────────── */ .site-footer{margin-top:80px;border-top:1px solid var(--line);padding:44px 0 40px} .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px;margin-bottom:36px} .footer-grid h4{ font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em; color:var(--gray-mid);margin:0 0 14px; } .footer-grid a{display:block;font-size:13.5px;margin-bottom:10px;color:var(--ink)} .footer-grid a:hover{color:var(--coral)} .footer-grid p{font-size:13px;color:var(--gray-mid);line-height:1.6;max-width:240px} .footer-bottom{ display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; padding-top:24px;border-top:1px solid var(--line);font-size:12.5px;color:var(--gray-light); } /* ── Misc ─────────────────────────────────────────────────────── */ .empty{ text-align:center;padding:70px 24px;background:var(--bg-soft); border:1px solid var(--line);border-radius:var(--r-xl); } .empty p{color:var(--gray-mid)} .empty p:first-child{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px} .page-mark{ font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--gray-light); } .divider{height:1px;background:var(--line);margin:32px 0} .toast{ position:fixed;left:50%;bottom:28px;transform:translate(-50%,120%); background:var(--invert-bg);color:var(--invert-text);padding:14px 22px; border-radius:var(--r-pill);font-size:13.5px;font-weight:600;z-index:200; box-shadow:var(--shadow-3);transition:transform .3s var(--ease); max-width:calc(100vw - 40px); } .toast.show{transform:translate(-50%,0)} .skeleton{ background:linear-gradient(90deg,var(--bg-soft) 25%,var(--line) 50%,var(--bg-soft) 75%); background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-md); } @keyframes shimmer{to{background-position:-200% 0}} .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .revealed{opacity:1;transform:none} .mobile-only{display:none} .desktop-only{display:block} /* Icon buttons that are desktop-only must stay flex (for the circular centering) when visible — a bare display:block would break the circle. */ .icon-btn.desktop-only{display:flex} /* ═══════════════════════════════════════════════════════════════ MOBILE — rebuilt, not shrunk. Bottom tab bar, edge-bleed rails, sticky buy bar, full-width cards. ═══════════════════════════════════════════════════════════════ */ @media(max-width:1080px){ .book-grid{grid-template-columns:repeat(4,1fr)} .hero-inner{grid-template-columns:1fr} .hero-side{flex-direction:row} } @media(max-width:860px){ .wrap,.wrap-narrow,.header-inner{padding:0 20px} .book-grid{grid-template-columns:repeat(3,1fr);gap:18px} .book-hero{grid-template-columns:1fr;gap:28px} .checkout-grid{grid-template-columns:1fr;gap:28px} .auth-page{grid-template-columns:1fr} .auth-aside{display:none} .footer-grid{grid-template-columns:1fr 1fr;gap:24px} } @media(max-width:720px){ :root{--header-h:60px} body{padding-bottom:76px} .mobile-only{display:block} .desktop-only{display:none} .icon-btn.desktop-only{display:none} .tabbar{display:flex} /* Header collapses to brand + search + bag */ .nav{display:none} .header-search{width:auto;flex:1} .header-inner{gap:14px} .brand-sub{display:none} /* Hero becomes a swipeable single-panel carousel */ .hero{padding:16px 0 0} .hero-inner{display:block;position:relative} .hero-track{ display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;padding:0 20px;margin:0 -20px;scroll-padding-left:20px; } .hero-track::-webkit-scrollbar{display:none} .hero-track .hero-slide:not(:first-child){display:flex} .hero-slide{ flex:0 0 calc(100% - 40px);scroll-snap-align:start;min-height:0;height:172px; padding:22px;border-radius:var(--r-xl); } .hero-copy h2{font-size:20px;margin-bottom:5px} .hero-copy p{font-size:12.5px;margin-bottom:14px} .hero-cta{padding:8px 15px;font-size:11.5px} .hero-price{bottom:16px;right:16px;padding:7px 11px} .hero-price .v{font-size:13px} .hero-side{display:none} .hero-nav{display:flex;justify-content:center;gap:6px;margin-top:12px} /* Rails bleed off the edge so the next card peeks — the native cue that there is more to swipe. */ .rail{ margin:0 -20px;padding:0 20px 6px;gap:14px;scroll-snap-type:x mandatory; scroll-padding-left:20px; } .rail .book-card{flex:0 0 132px} .book-grid{grid-template-columns:repeat(2,1fr);gap:16px} .cat-strip{margin:0 -20px;padding:20px 20px 4px} .section{padding:28px 0 0} .section-head{margin-bottom:14px} .section-head h2{font-size:17px} h1{font-size:22px} .field-row{grid-template-columns:1fr;gap:0} /* Sticky buy bar on the book page */ .sticky-buy{ position:fixed;left:0;right:0;bottom:0;z-index:85;background:var(--bg); border-top:1px solid var(--line);display:flex;align-items:center;gap:12px; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); transform:translateY(110%);transition:transform .28s var(--ease); } .sticky-buy.show{transform:none} .sticky-buy .btn{flex:1} body.has-sticky-buy .tabbar{display:none} .summary{border-radius:var(--r-lg);padding:18px} .buy-box{padding:18px;border-radius:var(--r-lg)} .track-card{padding:20px;border-radius:var(--r-lg)} .site-footer{margin-top:48px;padding:32px 0 24px} .footer-grid{grid-template-columns:1fr;gap:20px} .reader-page{font-size:16px;padding:28px 0} } @media(max-width:400px){ .book-grid{gap:12px} .rail .book-card{flex:0 0 122px} } /* Tap targets stay at least 44px on touch devices */ @media(pointer:coarse){ .btn{min-height:46px} .btn-sm{min-height:40px} .icon-btn{width:42px;height:42px} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important;transition-duration:.01ms !important; } .reveal{opacity:1;transform:none} } @media print{ .site-header,.site-footer,.tabbar,.sticky-buy,.btn{display:none !important} body{background:#fff;color:#000} }