/* * This rebuild's own stylesheet, loaded last. * * Everything here exists because the rebuild's markup differs from WordPress's * in some specific way, or because a rule the live site emitted inline had to * move somewhere a `style-src 'self'` CSP allows. It is deliberately short: * Physique Pro is vendored verbatim, so the theme's own 80 KB does the work and * anything added here is a decision worth reading. * * The generated companions are /css/fonts.css (self-hosted Google Fonts), * /css/theme-options.css (the options block WordPress printed into ) and * /css/front-page.css (the front page's hoisted inline styles). */ /* ------------------------------------------------------- entrance animations */ /* * WOW.js + animate.css fade each front-page section up as it scrolls into view, * and that is reproduced faithfully — measured against the live site, the page * settles to the same geometry, down to a 3203px document height. * * The risk it carries is worth naming. `animation-fill-mode: both` means the * element holds the animation's *first* frame until it plays, and fadeInUp's * first frame is `translate3d(0, 100%, 0)` — the section sits one full section * height too low. That is fine for the ~1s the animation takes, and permanent * if the animation never runs. * * So: honour a reduced-motion preference by dropping the animation entirely * rather than by speeding it up. The content renders in its final position, * which is the position that matters. This is a deliberate addition — the live * site does not do it — on the principle that the layout matters more than the * transition. */ @media (prefers-reduced-motion: reduce) { .wow, .animated { animation: none !important; visibility: visible !important; transform: none !important; } } /* ------------------------------------------------------------ frozen comments */ /* * The note that replaces the live site's reply form. The theme never styled * anything in this position, so it borrows the comment list's own measurements * rather than introducing a new look. */ .comment-closed-note { margin: 25px 0 40px; padding: 18px 22px; background: #f7f7f7; border-left: 3px solid #e5007e; } .comment-closed-note p { margin: 0; font-size: 15px; line-height: 24px; } /* --------------------------------------------------------------- 404 */ .error404 .entry-content ul { margin: 0 0 20px 20px; list-style: disc; } /* ------------------------------------------------- the deferred Stripe forms */ /* * Marks where a purchase button stood on /services/ and * /december-deadlift-challenge/. The payment route is an open decision (gsrs-2) * and this build must not ship something that looks like a working checkout, so * the placeholder is visibly a placeholder rather than a styled button. */ .deferred-checkout { margin: 20px 0; padding: 20px 24px; border: 2px dashed #e5007e; background: #fff8fc; } .deferred-checkout p { margin: 0 0 10px; } .deferred-checkout p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------ embeds */ /* * The Google Form embedded on /start-with-6-3/. The live site gives its iframe * a fixed 640x750, which overflows a phone; this keeps the width fluid without * changing anything on a desktop, where 640px is already narrower than the * content column. */ .entry-content iframe { max-width: 100%; } /* ----------------------------------------------------------- DEVIATION notes */ /* * DEVIATION: the live site loads Font Awesome 4.7.0 and renders its social and * meta icons from it. That is vendored here, so the icons match. What is *not* * reproduced is the WordPress core lightbox on /coaches/ and one post: it needs * the block editor's Interactivity API runtime (ES modules plus an import map), * which is a large dependency to ship so that one image can zoom. The images * render at full size and are simply not clickable. Nothing else changes. * * DEVIATION: the live site's theme prints `` in * every blog-listing row — an empty href, so the button reloads the listing * instead of opening the post. Fixed here rather than reproduced; see * src/_includes/postlist.njk. * * DEVIATION: the post share row drops Google Plus (the service closed in 2019 * and the live button is a dead link) and the `via=Crunchify` parameter on the * Twitter intent, which credits the tutorial the theme's author copied the * markup from rather than anyone connected to this site. See * src/_includes/share.njk. */