/* ============================================================================ * sefer.css — the shared "leather-bound book" styling for every /login/ page * (index, signup, forgot, reset, profile). Extracted 2026-08-09 (Sprint 5) * from the identical inline blocks of index.html and signup.html. * Page-specific extras (e.g. the profile page's info rows) stay inline. * * Theme system: canonical key `bri-theme`; root = Eclipse. Sitewide tokens * (bg/ink/gold/…) match the other apps; the sefer adds its own * leather/page/plate tokens per theme. * ============================================================================ */ /* The whole sefer is sized in rem off this one value, so scaling the root scales the card, its type, its padding and its inputs together and keeps every proportion the designer set. Two axes, because either can be the binding one: `min()` takes whichever of width and height is more constrained. A 1280x720 laptop is short before it is narrow, and a phone held sideways is short before anything else — sizing off width alone makes the card taller than the window and pushes the Enter button under the fold, which is the one thing a sign-in page must never do. */ html { font-size: clamp(15px, min(.6vw + 11px, 2.1vh + 4px), 19px); } /* …and the big treatment, opted into per page by `class="sefer-lg"` on . Today that is index.html alone. It is NOT the shared default, and the reason is measured rather than cautious: this one stylesheet also dresses signup (five fields), reset (two plus a note) and profile (a long form). At this scale signup runs 158px off the bottom of a 1080p window and reset 44px off a 720p one. Sign-in carries two fields and nothing else, which is what lets it fill the window. Before adding this class to another page, measure that page at 1280x720 — that is the shortest common desktop and the first size to break. */ html.sefer-lg { font-size: clamp(14px, min(1.25vw + 6px, 2.3vh + 3px), 26px); } * { box-sizing: border-box; margin: 0; } /* author display rules (e.g. .forgot { display:block }) must not defeat the hidden attribute (reset.html toggles its "request a new link" line) */ [hidden] { display: none !important; } :root { --bg: #060707; --bg-deep: #030404; --ink: #f2ece0; --ink-dim: rgba(242,236,224,.82); --ink-faint: rgba(242,236,224,.58); --gold: #d4a017; --amber: #f2a93c; --border-strong: rgba(242,236,224,.22); --cover: #241b12; --cover-deep: #140e08; --tool: #d4a017; --page-a: #d9d1bd; --page-b: #a89e85; --page-c: #877e66; --plate: #ece4d0; --plate-ink: #241a0c; --btn-ink: #0d0a05; } [data-theme="light"] { --bg: #f1e8d4; --bg-deep: #e3d9c0; --ink: #15100a; --ink-dim: rgba(21,16,10,.94); --ink-faint: rgba(21,16,10,.72); --gold: #8a6510; --amber: #b67815; --border-strong: rgba(21,16,10,.42); --cover: #4a3417; --cover-deep: #33230d; --tool: #e6c56a; --page-a: #f0e7d0; --page-b: #cdbf9e; --page-c: #b7a683; --plate: #f4ecda; --plate-ink: #241a0c; --btn-ink: #fdf8ec; } [data-theme="parchment"] { --bg: #c8a77b; --bg-deep: #b08e63; --ink: #1f1709; --ink-dim: rgba(46,36,23,.94); --ink-faint: rgba(46,36,23,.72); --gold: #7c5a0e; --amber: #a86e14; --border-strong: rgba(46,36,23,.44); --cover: #4a3417; --cover-deep: #33230d; --tool: #e6c56a; --page-a: #f0e7d0; --page-b: #cdbf9e; --page-c: #b7a683; --plate: #f4ecda; --plate-ink: #241a0c; --btn-ink: #fdf8ec; } [data-theme="violet"] { --bg: #312755; --bg-deep: #271d46; --ink: #ddd3ee; --ink-dim: rgba(221,211,238,.84); --ink-faint: rgba(221,211,238,.56); --gold: #d4a017; --amber: #f2a93c; --border-strong: rgba(221,211,238,.26); --cover: #241a44; --cover-deep: #170f30; --tool: #d4a017; --page-a: #e8e0cc; --page-b: #b6ab90; --page-c: #948a70; --plate: #ece4d0; --plate-ink: #241a0c; --btn-ink: #170f30; } [data-theme="blue"] { --bg: #15202e; --bg-deep: #0d161f; --ink: #e6edf5; --ink-dim: rgba(230,237,245,.84); --ink-faint: rgba(230,237,245,.56); --gold: #d4a017; --amber: #f2a93c; --border-strong: rgba(230,237,245,.26); --cover: #1c2f47; --cover-deep: #101d2c; --tool: #d4a017; --page-a: #e8e0cc; --page-b: #b6ab90; --page-c: #948a70; --plate: #ece4d0; --plate-ink: #241a0c; --btn-ink: #0d161f; } [data-theme="dark"] { --bg: #060707; --bg-deep: #030404; --ink: #f2ece0; --ink-dim: rgba(242,236,224,.82); --ink-faint: rgba(242,236,224,.58); --gold: #d4a017; --amber: #f2a93c; --border-strong: rgba(242,236,224,.22); --cover: #241b12; --cover-deep: #140e08; --tool: #d4a017; --page-a: #d9d1bd; --page-b: #a89e85; --page-c: #877e66; --plate: #ece4d0; --plate-ink: #241a0c; --btn-ink: #0d0a05; } body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Open Sans', sans-serif; color: var(--ink); background: radial-gradient(ellipse 100% 80% at 50% 20%, var(--bg), var(--bg-deep)); /* Vertical breathing room is measured against the WINDOW, not the type scale. In rem it grew with the font — so the bigger the card got, the more padding was stacked above and below it, and a 720p laptop ended up scrolling a page that visually fits. */ padding: clamp(.75rem, 3vh, 2.5rem) 1rem clamp(.6rem, 2.5vh, 2rem); gap: clamp(.6rem, 2vh, 1.6rem); } /* ── the leather book ── */ .book { position: relative; width: min(600px, 95vw); background: linear-gradient(105deg, var(--cover), var(--cover-deep)); border-radius: 14px; padding: 2.6rem; box-shadow: 0 24px 60px -16px rgba(0,0,0,.5), 0 10px 24px rgba(0,0,0,.35); } /* About half the window on a desktop, capped so an ultrawide does not stretch it into a letterbox, and near full-bleed on a phone. */ html.sefer-lg .book { width: min(94vw, clamp(340px, 50vw, 900px)); } .book.shake { animation: shake .4s ease; } @keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } } @media (prefers-reduced-motion: reduce) { .book.shake { animation: none; } } .frame { border: 2px solid var(--tool); border-radius: 4px; padding: 1.7rem 1.5rem; position: relative; } .frame::before { content: ''; position: absolute; inset: 5px; border: 1px solid var(--tool); opacity: .55; border-radius: 2px; pointer-events: none; } .tooling { text-align: center; color: var(--tool); } .tooling img { height: 3rem; filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); } .tooling h1 { font-family: 'PT Serif', serif; font-size: 1.35rem; font-weight: 700; letter-spacing: .04em; margin-top: .6rem; } .tooling .he { font-family: 'Frank Ruhl Libre', serif; font-size: .95rem; direction: rtl; opacity: .85; margin-top: .25rem; } .tooling .sub { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; opacity: .8; margin-top: .5rem; } .plate { background: var(--plate); color: var(--plate-ink); border-radius: 3px; padding: 1.4rem 1.2rem 1.1rem; margin-top: 1.4rem; box-shadow: inset 0 0 0 1px rgba(36,26,12,.25), 0 2px 8px rgba(0,0,0,.35); } .plate-note { font-size: .78rem; color: rgba(36,26,12,.65); text-align: center; margin-bottom: 1rem; } .plate input { width: 100%; font: 1rem 'PT Serif', serif; color: var(--plate-ink); /* iOS Safari ZOOMS the whole page when it focuses an input whose font-size is under 16px, then leaves the reader panned somewhere they did not ask to be. The root scale is allowed to drop to 14px on a small phone; the input's own text is not allowed to follow it past that line. Overrides the font-size inside the shorthand above, so it must stay after it. */ font-size: max(16px, 1rem); background: transparent; border: none; border-bottom: 1.5px solid rgba(36,26,12,.5); padding: .5em .2em; margin-bottom: .9rem; outline: none; border-radius: 0; } .plate input:focus { border-bottom-color: var(--amber); } .plate input::placeholder { color: rgba(36,26,12,.45); font-style: italic; } .error { display: none; font-size: .82rem; color: #8a1f1f; text-align: center; margin: -.2rem 0 .7rem; } .error.show { display: block; } /* success note (forgot/profile pages) — same slot, calm green */ .ok { display: none; font-size: .82rem; color: #2e6b2e; text-align: center; margin: -.2rem 0 .7rem; } .ok.show { display: block; } button.enter { width: 100%; font: 700 .95rem 'Open Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--btn-ink); background: var(--gold); border: none; border-radius: 4px; padding: .85em; cursor: pointer; margin-top: .2rem; } button.enter:hover { background: var(--amber); } button.enter:disabled { opacity: .7; cursor: wait; } button.enter:focus-visible, .plate input:focus-visible, .swatches button:focus-visible, a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } .forgot { display: block; text-align: center; margin-top: .8rem; font-size: .78rem; color: rgba(36,26,12,.6); } .forgot:hover { color: var(--amber); } .swatches { display: flex; gap: .8rem; justify-content: center; margin-top: .4rem; } .swatches button { width: clamp(20px, 1.35rem, 30px); height: clamp(20px, 1.35rem, 30px); border-radius: 50%; cursor: pointer; border: 2px solid var(--border-strong); padding: 0; } .swatches button[aria-checked="true"] { outline: 2px solid var(--gold); outline-offset: 2px; } .sw-light{background:#f1e8d4} .sw-parchment{background:#c8a77b} .sw-violet{background:#312755} .sw-blue{background:#15202e} .sw-dark{background:#060707} noscript { color: var(--ink-faint); font-size: .85rem; text-align: center; } /* Phones. The root clamp has already brought the type down; the remaining overflow risk on a small screen is PADDING, which does not shrink on its own in proportion to a shrinking window. */ @media (max-width: 560px) { body { padding: 1.2rem .6rem; gap: 1rem; } .book { padding: 1.5rem 1.1rem; border-radius: 10px; } html.sefer-lg .book { width: 96vw; } .frame { padding: 1.1rem .8rem; } .plate { padding: 1.1rem 1rem .9rem; } .tooling h1 { font-size: 1.2rem; } } /* Short windows of any width — a laptop at 720p, a phone turned sideways. Height is the scarce axis here, so the vertical rhythm collapses further while the horizontal stays as it was. */ @media (max-height: 620px) { body { padding: .8rem 1rem; gap: .7rem; } .book { padding: 1.2rem 1.4rem; } .frame { padding: .9rem 1.1rem; } .plate { margin-top: .9rem; padding: 1rem 1rem .8rem; } .tooling img { height: 2.2rem; } /* The subtitle goes, the Hebrew stays. "RESEARCH PORTAL" only restates the line above it; ספרי רבינו ז״ל is the identity of the place and is the last thing that should be sacrificed to a short window. */ .tooling .sub { display: none; } .tooling .he { font-size: .9rem; margin-top: .15rem; } }