/* ============================================================ The shelf — books built in CSS, shared by the home page and /books. A book is an with three faces: the cover, the spine on the right (where an Arabic book has it) and the fore-edge on the left. The two colours are the same pair /books gives that book's spine, so the pages agree and there is no artwork to keep. Two ways to stand the row: .shelf--stage one row turned in perspective, receding — the home page; on phones it falls back to the scroll below .shelf--scroll a flat row that scrolls sideways — /books Colour and easing come from whichever page hosts it: --ink on the home page, --bg in the reader; the covers themselves are fixed, being objects. ============================================================ */ .shelf{position:relative;--dir:1; --ground:var(--ink,var(--bg,#14120F)); --shelf-ease:var(--ease,cubic-bezier(.2,.7,.2,1)); --bw:clamp(120px,12vw,182px);--bh:calc(var(--bw) * 1.46);--bd:calc(var(--bw) * .17)} [dir="rtl"] .shelf{--dir:-1} /* ── the book ── */ .book{position:relative;flex:none;width:var(--bw);height:var(--bh);transform-style:preserve-3d; text-decoration:none;color:#EFE6D2;outline-offset:6px;transition:transform .55s var(--shelf-ease)} .book .face{position:absolute;inset:0;backface-visibility:hidden} .book .cover{background:linear-gradient(160deg,var(--c1),var(--c2) 78%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 4px 0 10px -6px rgba(0,0,0,.6), 0 26px 44px -18px rgba(0,0,0,.75); display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; padding:calc(var(--bw) * .12) calc(var(--bw) * .1);direction:rtl;transform:translateZ(0)} .book .cover::before{content:"";position:absolute;inset:calc(var(--bw) * .055); border:1px solid rgba(233,180,92,.42);pointer-events:none} .book .cover::after{content:"";position:absolute;inset:calc(var(--bw) * .075); border:1px solid rgba(233,180,92,.18);pointer-events:none} .book .ck{font-family:"Noto Naskh Arabic","Amiri",serif;font-size:calc(var(--bw) * .055); color:#E9B45C;letter-spacing:0;margin-bottom:auto;opacity:.9} .book .ct{font-family:"Amiri","Noto Naskh Arabic",serif;font-weight:700; font-size:calc(var(--bw) * .115);line-height:1.5;text-wrap:balance} .book .ca{font-family:"Noto Naskh Arabic","Amiri",serif;font-size:calc(var(--bw) * .062); color:rgba(239,230,210,.78);margin-top:calc(var(--bw) * .05)} .book .ce{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:300;direction:ltr; font-size:calc(var(--bw) * .056);color:rgba(239,230,210,.62);margin-top:auto;line-height:1.3} /* a cover with no English line still keeps its bottom margin */ .book .ca:last-child{margin-bottom:auto} .book .spine{inset:0 auto 0 100%;width:var(--bd);transform-origin:left center;transform:rotateY(90deg); background:linear-gradient(to right,var(--c2),var(--c1) 55%,var(--c2)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); display:flex;align-items:center;justify-content:center;overflow:hidden} .book .spine span{writing-mode:vertical-rl;white-space:nowrap;font-family:"Amiri","Noto Naskh Arabic",serif; font-size:calc(var(--bw) * .07);color:#E9B45C;padding:.6em 0;max-height:100%;overflow:hidden} .book .edge{inset:0 100% 0 auto;width:var(--bd);transform-origin:right center;transform:rotateY(-90deg); background:repeating-linear-gradient(to bottom,#E8DFCB 0 2px,#CDC2A9 2px 3px); box-shadow:inset -6px 0 10px -6px rgba(0,0,0,.35)} :root[data-theme="bw"] .book .cover,:root[data-theme="bw"] .book .spine{filter:grayscale(1) contrast(1.1)} /* ── stage: the perspective row ── */ .shelf--stage{flex:1;min-height:clamp(260px,40vh,460px);margin-top:clamp(1rem,3vh,2rem); perspective:1500px;perspective-origin:42% 40%; --mask:linear-gradient(to right,transparent 0,#000 6%,#000 86%,transparent 100%); -webkit-mask-image:var(--mask);mask-image:var(--mask)} [dir="rtl"] .shelf--stage{perspective-origin:58% 40%; --mask:linear-gradient(to left,transparent 0,#000 6%,#000 86%,transparent 100%)} .shelf--stage .shelf-float{position:absolute;inset:0;transform-style:preserve-3d; animation:shelf-drift 9s ease-in-out infinite} @keyframes shelf-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} /* --px, --py and --sy are written by the host page's pointer/scroll script; with none of them set the row simply stands at its resting angle */ .shelf--stage .shelf-row{position:absolute;top:2%;inset-inline-start:5%;display:flex;gap:clamp(12px,1.6vw,24px); transform-style:preserve-3d;transform-origin:0 50%; transform:translateY(calc(var(--sy,0) * -.12px)) rotateX(calc(var(--py,0) * -3deg)) rotateY(calc(var(--dir) * (30deg + var(--px,0) * -5deg))); transition:transform .7s var(--shelf-ease)} [dir="rtl"] .shelf--stage .shelf-row{transform-origin:100% 50%} @media(hover:hover){ .shelf--stage .book:hover{transform:translateY(-14px) translateZ(26px) rotateY(calc(var(--dir) * -16deg))} } .shelf--stage .book:focus-visible{transform:translateY(-14px) translateZ(26px) rotateY(calc(var(--dir) * -16deg))} .shelf--stage .shelf-floor{position:absolute;inset:auto 0 0;height:44%;pointer-events:none; background:linear-gradient(to top,var(--ground) 26%,transparent)} /* ── scroll: the flat row ── */ .shelf--scroll, .shelf--stage.is-flat{min-height:0;height:auto;perspective:none;-webkit-mask-image:none;mask-image:none; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none} .shelf--scroll::-webkit-scrollbar,.shelf--stage.is-flat::-webkit-scrollbar{display:none} .shelf--scroll .shelf-float,.shelf--stage.is-flat .shelf-float{position:static;animation:none;display:block} .shelf--scroll .shelf-row,.shelf--stage.is-flat .shelf-row{position:static;transform:none;display:flex; gap:1rem;padding:.8rem max(1.2rem,6vw) 2.2rem;width:max-content;transition:none} .shelf--scroll .book,.shelf--stage.is-flat .book{scroll-snap-align:center; transform:perspective(900px) rotateY(calc(var(--dir) * 10deg))} @media(hover:hover){ .shelf--scroll .book:hover{transform:perspective(900px) translateY(-10px) rotateY(0deg)} } .shelf--scroll .book:focus-visible{transform:perspective(900px) translateY(-10px) rotateY(0deg)} .shelf--scroll .shelf-floor,.shelf--stage.is-flat .shelf-floor{display:none} /* on phones and portrait tablets the stage becomes the flat row: no script needed, the same rules as .is-flat under a media query */ @media(max-width:900px){ .shelf{--bw:clamp(140px,40vw,180px)} .shelf--stage{min-height:0;height:auto;margin-top:1.6rem;perspective:none;-webkit-mask-image:none;mask-image:none; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none} .shelf--stage::-webkit-scrollbar{display:none} .shelf--stage .shelf-float{position:static;animation:none;display:block} .shelf--stage .shelf-row{position:static;transform:none;padding:.8rem max(1.2rem,6vw) 2.2rem;gap:1rem;transition:none} .shelf--stage .book{scroll-snap-align:center;transform:perspective(900px) rotateY(calc(var(--dir) * 10deg))} .shelf--stage .book:focus-visible{transform:perspective(900px) rotateY(calc(var(--dir) * 10deg))} .shelf--stage .shelf-floor{display:none} } @media(prefers-reduced-motion:reduce){ .shelf--stage .shelf-float{animation:none} .shelf-row,.book{transition:none} }