/* ============================================================ RESOURCES PAGE (resources.html) Dark theme that matches the waitlist visual language. Shared tokens, fonts and the .theme-dark shell come from dtii.css. SECTIONS 1. Top nav 2. Flip-book hero 3. Pill buttons 4. References list 5. Footer 6. Responsive ============================================================ */ /* ---------- 1) TOP NAV ---------- The header now uses the SHARED .site-header / .site-logo / .site-pill components in dtii.css — identical markup and styling to index.html. Nothing page-specific is needed here. */ /* ---------- 2) FLIP-BOOK HERO ---------- */ /* Transparent — the branded blue rays + glow come from the SHARED fixed backdrop (.theme-dark::before in dtii.css), exactly like index, so the book sits in the same visual world. No page-specific gradient/scrim. */ .flip-hero{position:relative;overflow:hidden;padding:clamp(1.5rem,4vh,3rem) 24px 56px; background:transparent;} .flip-hero .wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;} .flip-hero .sec-head{text-align:center;max-width:760px;margin:0 auto 24px;} .flip-hero .sec-head h1{color:var(--white);font-size:clamp(30px,4.4vw,52px);margin:6px 0 14px;} .flip-hero .sec-head .eyebrow{color:var(--sky);} .flip-hero .sec-head p{color:var(--on-dark-60);font-size:17px;} .flip-wrap{position:relative;z-index:0;display:flex;flex-direction:column;align-items:center;gap:24px;} /* The stage stays in normal flow (position:relative, NOT absolute/fixed). Its height is set by resources.js to the fitted (~70vh) book height, and overflow:hidden is a hard cap so the book can never exceed the container and spill over the References section below it. */ .flip-stage{position:relative;z-index:0;width:100%;max-width:1180px;height:70vh; overflow:hidden;display:grid;place-items:center;} .flip-book{margin:0 auto;} .flip-book .stf__item,.flip-book .page{background:var(--white);box-shadow:0 18px 50px -24px rgba(0,0,0,.7);} .flip-book img{width:100%;height:100%;display:block;} /* ---- CLOSED-BOOK COVER (intro state) ---- Overlays the flip book on load: a centered single cover (PDF page 1) styled to read as a CLOSED book — spine shadow on the left, stacked page edges on the right, drop shadow, pointer cursor, hover lift and a "Click to open" hint. Clicking it flips the real book open (resources.js). */ .flip-cover{position:absolute;inset:0;z-index:5;display:grid;place-items:center; cursor:pointer;transition:opacity .35s ease;} .flip-cover.is-opening{opacity:0;pointer-events:none;} /* width/height are set inline by resources.js to one StPageFlip leaf size */ .flip-cover-book{position:relative;background:var(--white); border-radius:2px 6px 6px 2px; /* stacked page edges (right) + soft drop shadow */ box-shadow:2px 0 0 #ececec, 4px 0 0 #e0e0e0, 6px 0 0 #d4d4d4, 0 26px 60px -22px rgba(0,0,0,.75); transition:transform .25s ease, box-shadow .25s ease;} .flip-cover-book img{width:100%;height:100%;display:block;object-fit:cover;border-radius:2px 6px 6px 2px;} /* spine shadow down the left (binding) edge */ .flip-cover-book::before{content:"";position:absolute;top:0;bottom:0;left:0;width:16px;z-index:2; pointer-events:none;border-radius:2px 0 0 2px; background:linear-gradient(to right, rgba(0,0,0,.42), rgba(0,0,0,.14) 55%, rgba(0,0,0,0));} .flip-cover:hover .flip-cover-book, .flip-cover:focus-visible .flip-cover-book{transform:translateY(-5px); box-shadow:2px 0 0 #ececec, 4px 0 0 #e0e0e0, 6px 0 0 #d4d4d4, 0 36px 72px -22px rgba(0,0,0,.82);} .flip-cover:focus-visible{outline:none;} /* dark pill so it stays legible over the WHITE cover page */ .flip-cover-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%); display:inline-flex;align-items:center;gap:7px;white-space:nowrap; font-family:'DM Sans';font-weight:500;font-size:13px;letter-spacing:.04em;color:#fff; background:rgba(3,13,42,.82);border:1px solid rgba(150,190,255,.32);border-radius:999px; padding:7px 15px;box-shadow:0 8px 22px -8px rgba(0,0,0,.7); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); animation:coverPulse 2.4s ease-in-out infinite;} .flip-cover-hint::before{content:"";width:9px;height:11px;border:1.5px solid var(--sky); border-radius:1px 2px 2px 1px;border-left-width:2.5px;display:inline-block;} .flip-cover:hover .flip-cover-hint, .flip-cover:focus-visible .flip-cover-hint{border-color:rgba(150,190,255,.7); box-shadow:0 10px 26px -8px rgba(0,0,0,.8);} @keyframes coverPulse{0%,100%{opacity:.72;}50%{opacity:1;}} @media(prefers-reduced-motion:reduce){ .flip-cover-hint{animation:none;} .flip-cover-book{transition:none;} } .flip-loading{color:var(--on-dark-60);font-size:14px;display:flex;align-items:center;gap:10px;} .flip-spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25); border-top-color:var(--sky);animation:flipspin .8s linear infinite;} @keyframes flipspin{to{transform:rotate(360deg);}} .flip-controls{display:flex;align-items:center;gap:16px;} .flip-controls button{display:grid;place-items:center;width:46px;height:46px;border-radius:50%; background:rgba(255,255,255,.07);border:1px solid var(--dark-line);color:var(--white); cursor:pointer;font-size:20px;line-height:1;transition:.2s;} .flip-controls button:hover:not(:disabled){background:var(--blue);border-color:var(--blue);transform:translateY(-1px);} .flip-controls button:disabled{opacity:.38;cursor:default;} .flip-controls .pageno{font-family:'DM Sans';font-size:14px;color:var(--on-dark-60); min-width:84px;text-align:center;font-variant-numeric:tabular-nums;} .flip-hint{font-size:12.5px;color:var(--on-dark-40);letter-spacing:.02em;} .flip-fallback{font-size:14px;color:var(--on-dark-60);text-align:center;} /* The offline-download trigger is a