/* ============================================================ layout/pages.css — Page (tab) switching + placeholder pages. ============================================================ */ .page{display:none;} .page.active{display:block;animation:pagein var(--dur-fast) ease both;} /* Leaving page: fixed overlay that fades out, keeping new page layout clean */ .page.leaving{ display:block; position:fixed; top:var(--nav);left:0;right:0;bottom:0; overflow:hidden; background:var(--paper); pointer-events:none; z-index:6; animation:pageout var(--dur-fast) ease both; } @keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes pageout{to{opacity:0;}} /* Hide all font-dependent content from first paint until fonts are confirmed loaded. JS adds .fonts-loaded to via document.fonts.load() promises. */ body:not(.fonts-loaded) .gate, body:not(.fonts-loaded) .holder{ opacity:0; transform:translateY(-6px); } /* "coming soon" placeholder pages (Home / More to Follow) */ .holder{ min-height:min(620px,calc(100svh - var(--nav))); display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:clamp(44px,9vh,86px) var(--space-5); transition:opacity 0.5s ease, transform 0.5s ease; } .holder .sprig{margin-bottom:var(--space-6);} .holder .mono{font-family:'Alex Brush',cursive;font-size:clamp(3.2rem,12vw,5rem);line-height:1;margin-bottom:.2em;} .holder .dt{font-family:var(--ui);letter-spacing:.38em;text-transform:uppercase;font-size:clamp(1rem,2.8vw,1.3rem);color:var(--ink-soft);margin-bottom:2.4rem;} .holder .soon{font-family:'Reenie Beanie',cursive;font-style:normal;font-size:24px;line-height:.9;color:#111;margin-bottom:0;} .holder-cta{ display:inline-flex;align-items:center;justify-content:center; margin-top:2.6rem; min-height:34px; padding:.46rem 1.25rem; border-radius:var(--radius-pill); background:rgba(51,48,42,.44); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); border:1px solid rgba(244,239,230,.7); cursor:pointer; font-family:var(--ui); font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:#f4efe6; transition:background .2s ease; } .holder-cta:hover{background:rgba(51,48,42,.58);} @media(prefers-reduced-motion:reduce){ .page.active{animation:none;} } @media(max-width:600px){ .holder{ min-height:calc(100svh - var(--nav)); padding:clamp(32px,7vh,56px) clamp(16px,5vw,24px); } .holder .sprig{margin-bottom:var(--space-5);} .holder .mono{font-size:clamp(2.8rem,15vw,4rem);} .holder .dt{font-size:clamp(.72rem,3.5vw,.92rem);letter-spacing:.24em;margin-bottom:1.8rem;} .holder .soon{font-size:24px;} .holder-cta{margin-top:2rem;min-height:44px;} }