/** * PackPlus V2 — Base * * Minimal, restrained reset. No utility framework, no generic * component styles — just sane rendering defaults for the V2 page. */ .packplus-v2-page, .packplus-v2-page *, .packplus-v2-page *::before, .packplus-v2-page *::after { box-sizing: border-box; } .packplus-v2-page { margin: 0; background: var(--pp-bg); color: var(--pp-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .packplus-v2-page img, .packplus-v2-page video, .packplus-v2-page svg { display: block; max-width: 100%; height: auto; } .packplus-v2-page :focus-visible { outline: 2px solid var(--pp-green-dark); outline-offset: 3px; } /* Skip link: visually hidden until keyboard-focused. */ .pp-skip-link { position: absolute; top: -999px; left: 0; z-index: var(--pp-z-loader); padding: 0.75rem 1.25rem; background: var(--pp-ink); color: var(--pp-white); text-decoration: none; } .pp-skip-link:focus { top: 0; } /* Screen-reader-only accessible status text (e.g. preloader status). */ .pp-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* * Preloader — hidden by default. app.js adds "js-preloading" to * only after confirming its dependencies initialised, so a JS or GSAP * failure never leaves a visitor behind a stuck overlay: the default, * no-JS state is simply "not present". */ .pp-preloader { display: none; position: fixed; inset: 0; z-index: var(--pp-z-loader); flex-direction: column; align-items: center; justify-content: center; background: var(--pp-ink); color: var(--pp-white); opacity: 1; transition: opacity var(--pp-duration-slow) var(--pp-ease-standard); } html.js-preloading .pp-preloader { display: flex; } html.js-preloading, html.js-preloading body { overflow: hidden; } .pp-preloader.is-exiting { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .pp-preloader { transition-duration: 0.15s; } } /* * Shared homepage section shell (Sections 02–09). Centralizes padding * and content max-width so each section stylesheet only has to define * what's actually unique about that section, not repeat this rhythm. */ .pp-section { padding: var(--pp-section-pad) var(--pp-gutter); overflow: hidden; } .pp-section__inner { max-width: var(--pp-max-content); margin: 0 auto; } /* Wide variant for editorial breakout imagery (Universe, Gallery). */ .pp-section__inner--wide { max-width: var(--pp-max-wide); } /* * [data-pp-reveal] carries no CSS of its own — elements are fully * visible by default (the no-JS / GSAP-failure state). reveal.js and * the bespoke section modules are the only things that ever hide * these elements, and only after confirming GSAP is present. */ /* * Shared image-fill primitive: any real placed inside carries * explicit aspect-ratio (set per usage) and fills its container via * object-fit so real photography never stretches or distorts. */ .pp-media { position: relative; overflow: hidden; background: var(--pp-grey); } .pp-media img { width: 100%; height: 100%; object-fit: cover; } /* * Shared button primitive — used by the nav CTA, hero, and final CTA. * Lives here rather than in hero.css since it is not hero-specific. * Prefer ink text on the bright green fill: white-on-green fails * comfortable contrast at this hue (see CLAUDE.md section 19). */ .pp-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 1.75rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color var(--pp-duration-fast) var(--pp-ease-standard), color var(--pp-duration-fast) var(--pp-ease-standard), border-color var(--pp-duration-fast) var(--pp-ease-standard); } .pp-btn--primary { background: var(--pp-green); color: var(--pp-text-on-green); } .pp-btn--primary:hover { background: var(--pp-green-dark); color: var(--pp-white); } .pp-btn--secondary { border-color: var(--pp-line); color: var(--pp-text); } .pp-btn--secondary:hover { border-color: var(--pp-text); }