/* ========================================================================== * members-base.css * * The Savoy rules the members area actually depends on, extracted so that * /members/ and /members/savetrainer/ can stop loading the parent theme's * stylesheets entirely. See si_members_base_styles() in functions.php, which * loads this and dequeues the ten Savoy handles it replaces. The compiled * theme options live separately in members-theme-options.css, which has to * load last — see the note at the top of that file. * * Provenance: extracted 2026-08-15 from Savoy 3.1.8 by walking * document.styleSheets on the live site, then verified by simulating the swap * on eight signed-in members URLs and diffing computed styles element by * element until the difference was zero. * * ~416 rules, replacing 4,530 across ten Savoy stylesheets (40 KB / 8.6 KB * gzipped, against 558 KB parsed and 21 KB of inline CSS per request). * * Four things in here look droppable and are not — each was caught by the * diff, not by reading: * - the Magnific Popup layer, which matches nothing until a popup opens * - #nm-shop-products-overlay, which the SaveTrainer workouts grid reuses * - the block-grid system, used by the plan and workout lists * - the display:none on Savoy's footer DOM, which Savoy's own CSS was hiding * * This is a snapshot of third-party CSS, not authored code. Prefer overriding * in members.css / savetrainer.css over editing here, so the provenance stays * honest and this file can be re-derived if Savoy is ever updated before it's * removed. Once Savoy is gone this becomes ours to own and prune freely. * ========================================================================== */ /* -------------------------------------------------------------------------- * The radius scale * * Two platforms share this sheet, and only one of them rounds. * * On SaveTrainer: buttons and pills are fully round, everything else is 10px. * On the rest of the members area -- courses, dashboard, the monthly programme * -- nothing rounds; those pages look exactly as they did before this scale * existed, which is why the defaults below are 10px and 8px rather than 999px. * * The switch is the last two lines of this block being overridden in * savetrainer.css, which is enqueued only by page-members-savetrainer.php and * the is_savetrainer_page branch in functions.php. Nothing else is scoped: the * rules all read the tokens, so the platform boundary is those two lines and * not a body class threaded through a hundred selectors. * * button things you press -- buttons, CTAs, the tour controls * pill things you read -- tags, badges, status chips * surface everything else: cards, panels, modals, nav rows, hover targets * * Button or hover target is settled by one question: does it have a background * when nobody is touching it? A persistent fill is identity, and identity is * what a round shape states -- so a filled, pressable thing is a button however * it is marked up (.upnext-empty-link and .comment-reply-link are s, and both * are buttons). A fill that appears only on :hover or :focus is feedback, not * identity: the shape lasts 150ms, and rounding it would make the transient * shape louder than the persistent one. Those take surface -- the left nav and * .si-back-link are the examples. * input text fields and selects. They are controls, but a stadium field * reads as a button you cannot press, so they stay square-ish. * inner the handful of boxes that were already 8px inside a surface * flat textareas, where a full round is always wrong * * surface, input and flat are deliberately the same 10px. They are separate * names because they answer different questions, and one of them may move * later without dragging the others with it. * * A note on what did NOT survive contact: an earlier pass made every control * round, inputs included, and put surfaces at 12px with an 8px concentric * correction. It made the filter panel unusable when expanded and made text * fields look like buttons. Round is for the two things a person acts on and * reads as a unit; it is not a general-purpose "modern" setting. * * Defined here because members-base.css is queued first (priority 5) and every * other members sheet depends on it, so the tiers reach members.css, * savetrainer.css and members-account.css without an enqueue change. * -------------------------------------------------------------------------- */ :root { --st-radius-button: 10px; --st-radius-pill: 8px; --st-radius-surface: 10px; --st-radius-input: 10px; --st-radius-inner: 8px; --st-radius-flat: 10px; } /* -------------------------------------------------------------------------- * Savoy custom properties referenced by the rules below. Resolved from the * live computed values, because their source is the ~21 KB block Savoy prints * inline via nm_custom_styles() — which we also remove. * -------------------------------------------------------------------------- */ :root { --nm--page-width: 1280px; --nm--page-column-spacing: 15px; --nm--page-overlay-background: rgba(51, 51, 51, 0.6); --nm--color-font-highlight: #4EB9AA; --nm--color-font-strong: #253540; --nm--inputs-padding-vertical: 12px; --nm--inputs-padding-horizontal: 16px; --nm--inputs-border-color: #e1e1e1; --nm--border-radius-container: 0px; --nm--border-radius-image: 0px; --nm--border-radius-inputs: 0px; --nm--border-radius-button: var(--st-radius-button); --nm--spinner-border-color: #4EB9AA #4EB9AA transparent transparent; --nm--spinner-border-color-light: #4EB9AA #4EB9AA transparent transparent; } /* -------------------------------------------------------------------------- * The workouts grid loading overlay * * #nm-shop-products-overlay is Savoy's shop AJAX overlay, but the SaveTrainer * workouts grid reuses the id — the SaveTrainer SVG animation is rendered * inside it (member/part-st_workouts.php). Easy to mistake for shop-only * markup and drop; without these rules the overlay stops being a hidden 1px * box and renders inline above the grid. * -------------------------------------------------------------------------- */ #nm-shop-products-overlay { position: absolute; top: -1px; left: 0; z-index: 1000; width: 1px; height: 1px; opacity: 0; overflow: hidden; background: #fff; transition: opacity .3s; } #nm-shop-products-overlay.show { visibility: visible; top: 0; width: 100%; height: 100%; opacity: 1; } #nm-shop-products-overlay.fade-out { opacity: 0; } #nm-shop-products-overlay.no-anim { transition: none; } /* The spinner itself, plus the keyframes it animates against. */ .nm-loader::after { display: block; position: absolute; top: 50%; right: 50%; content: " "; width: 16px; height: 16px; font-family: inherit; margin: -8px -8px 0 0; opacity: 1; border: 2px solid; border-color: var(--nm--spinner-border-color); border-radius: 2rem; transform: translateZ(0); animation: nmSpin .4s linear infinite; } .nm-loader.nm-loader-light::after { border-color: var(--nm--spinner-border-color-light); } #nm-shop-products-overlay.nm-loader::after { top: 100px; right: auto; left: 50%; width: 20px; height: 20px; margin-left: -10px; } @media (max-width: 991px) { #nm-shop-products-overlay.nm-loader::after { top: 56px; } } @media (max-width: 768px) { #nm-shop-products-overlay.nm-loader::after { top: 29px; } } @keyframes nmSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- * Reset — normalize.min.css (4 rules) + Savoy's own reset * -------------------------------------------------------------------------- */ html { line-height: 1.15; text-size-adjust: 100%; height: 100%; } body { margin: 0; } a { background-color: transparent; } img { border-style: none; } abbr[title] { border-bottom: none; text-decoration: underline dotted; } small { font-size: 75%; } textarea { overflow: auto; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } [type="button"], [type="reset"], [type="submit"], button { appearance: button; } [hidden] { display: none; } a, abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, center, cite, code, dd, del, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, label, legend, li, menu, nav, object, ol, output, p, pre, q, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; } *, ::after, ::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; } b, strong { font-weight: 900; } li { list-style: none; } img { font-size: 0; color: transparent; max-width: 100%; height: auto; vertical-align: bottom; } .clear::before, .clear::after, .clearfix::before, .clearfix::after { content: " "; display: table; } .clear::after, .clearfix::after { clear: both; } /* -------------------------------------------------------------------------- * Base typography, links, form controls and buttons * -------------------------------------------------------------------------- */ body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 2; color: #777; } h1, h2, h3, h4, h5, h6 { font-style: normal; line-height: 1.4; color: #282828; } h1, .h1-size { font-size: 30px; } h2, .h2-size { font-size: 28px; } h3, .h3-size { font-size: 24px; } h4, .h4-size { font-size: 22px; } h5, .h5-size { font-size: 18px; } h6, .h6-size { font-size: 16px; } a { color: #DC9814; outline: 0; text-decoration: none; transition: color .2s; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; overflow: hidden; position: absolute !important; } input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input.input-text, select, textarea { font-family: inherit; line-height: 1.6; outline: 0; padding: var(--nm--inputs-padding-vertical) var(--nm--inputs-padding-horizontal); border: 1px solid var(--nm--inputs-border-color); border-radius: var(--nm--border-radius-inputs); transition: border-color .4s; box-shadow: none; appearance: none; } .widget form > button, input[type="submit"], .button { display: inline-block; font-size: 16px; font-weight: normal; line-height: 16px; color: #fff; padding: 14px 18px; border: 0; border-radius: var(--nm--border-radius-button); text-align: center; opacity: 1; cursor: pointer; transition: opacity .2s; background-color: #282828; } /* The hover fade. Without this the white/outlined buttons on Plan Preview, My Plan and Assessment, and the salmon Reset Plan Progress, have no hover state at all — the transition above has nothing to transition to. */ input[type="submit"]:hover, .button:hover { color: #fff; opacity: .82; } .touch input[type="submit"]:hover, .touch input[type="submit"]:active, .touch input[type="submit"]:focus, .touch .button:hover, .touch .button:active, .touch .button:focus { opacity: 1; } #nm-blog-pagination a, #nm-blog-pagination a:hover, .button.border, .button.border:hover { color: #282828; opacity: 1; transition: border .2s; background: none; } #nm-blog-pagination a, .button.border { border: 1px solid #aaa; } #nm-blog-pagination a:not([disabled]):hover, .button.border:not([disabled]):hover { color: #282828; border-color: #282828; } /* -------------------------------------------------------------------------- * Savoy's icon font, vendored * * The Magnific Popup close control is built as * in jquery.simembers.js, * jquery.save.js and member/member.php, so the "X" on every modal — * notifications, conversations, the health disclaimer — is a glyph from * Savoy's icon font. Dequeuing nm-icons removed it and left the modals with * no visible close control. * * The font is copied into fonts/nm-font/ rather than pointed at the parent * theme, so this survives Savoy being removed. Only the glyphs the members * area actually renders are declared; the other ~160 stay behind. * -------------------------------------------------------------------------- */ @font-face { font-family: nm-font; src: url("../fonts/nm-font/nm-font.woff") format("woff"), url("../fonts/nm-font/nm-font.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: block; } [class*=" nm-font-"], [class^="nm-font-"] { font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; font-family: nm-font !important; } .nm-font-close2::before { content: "\e117"; } /* -------------------------------------------------------------------------- * Savoy's footer DOM, neutralised * * nm_footer_includes() prints a mobile menu, a cart panel and a quickview * container into every page, including ours. The members area shows none of * them — it has its own mmenu drawer and the SaveTrainer tab bar — and until * now they were kept out of sight by the Savoy stylesheets we are removing. * Without this they unhide and render as stray blocks in the footer. * * Stage 2 has since removed the markup at source — functions.php unhooks * nm_footer_includes on members pages — so these normally match nothing now. * Kept as a safety net: 80 bytes that guarantee no visual regression if that * hook removal ever stops taking (a Savoy update, a hook-timing change, a * plugin printing the same markup). Delete them once Savoy is gone for good. * -------------------------------------------------------------------------- */ /* Unscoped on purpose: this file is only enqueued on /members/. */ .nm-mobile-menu-holder, .nm-cart-panel-holder, #nm-quickview, #nm-page-includes { display: none !important; } /* -------------------------------------------------------------------------- * Page wrappers used by header-members.php / footer-members.php * -------------------------------------------------------------------------- */ .nm-page-wrap { position: relative; right: 0; min-width: 280px; min-height: 100%; overflow: hidden; background: #fff; } .nm-page-wrap-inner { position: relative; width: 100%; } .nm-page-overlay { visibility: hidden; position: fixed; inset: -1px 0 0; z-index: 1000; content: " "; width: 1px; height: 1px; opacity: 0; transition: opacity .25s; background: var(--nm--page-overlay-background); } /* -------------------------------------------------------------------------- * The members header's right-hand menu * -------------------------------------------------------------------------- */ .nm-menu li { position: relative; float: left; } .nm-menu li a { display: inline-block; font-size: 16px; line-height: 1; color: #707070; vertical-align: bottom; text-decoration: none; padding: 16px; } .nm-right-menu { float: right; margin-right: -16px; } .nm-right-menu > ul { display: inline-block; line-height: 1; vertical-align: middle; } @media (max-width: 991px) { .nm-menu li a { padding-left: 2px; } .nm-right-menu ul li { display: none; } } @media (max-width: 550px) { .nm-menu li a { padding-left: 0; } } @media (max-width: 400px) { .header-mobile-default .nm-menu li a { padding-right: 12px; } .nm-right-menu { margin-right: -12px; } } /* -------------------------------------------------------------------------- * Grid * * Savoy's grid.css is 537 rules; this is the 12-column core the members area * uses, written out rather than dumped. Same breakpoints (768/992/1200) and * the same N/12 widths. The offset/push/pull and fifths variants are dropped — * nothing under /members/ uses them. * -------------------------------------------------------------------------- */ .nm-row { max-width: var(--nm--page-width); margin: 0 auto; padding-right: 15px; padding-left: 15px; background-position: 50% 50%; background-repeat: no-repeat; } @media (max-width: 768px) { .nm-row { padding-right: 0; padding-left: 0; } } /* * Clearfix. The columns float, so without this every .nm-row collapses to zero * height and its contents overflow instead of pushing what follows down — most * visibly the discussion pager, which ended up overlapping the comments. Easy * to lose: this section was written out by hand rather than dumped, and the * verification diff had height removed from its property list to quieten * animation noise, which is the one property the fault shows in. */ .nm-row::before, .nm-row::after { display: table; content: " "; } .nm-row::after { clear: both; } /* Nested rows — the discussion page nests one inside another. */ .nm-row .nm-row { margin-right: -15px; margin-left: -15px; } .nm-row .nm-row-full-nopad, .nm-row:not(.nm-row-full):not(.nm-row-full-nopad) .nm-row { padding-right: 0; padding-left: 0; } .nm-row .nm-row.nm-row-max-width, .nm-row.nm-row-full .nm-row.nm-row-boxed, .nm-row.nm-row-full-nopad .nm-row.nm-row-boxed { margin-right: auto; margin-left: auto; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-center, .col.centered { margin-right: auto; margin-left: auto; float: none !important; } .col-right { float: right !important; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; } .col-xs-1 { width: 8.33333%; } .col-xs-2 { width: 16.6667%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.3333%; } .col-xs-5 { width: 41.6667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.3333%; } .col-xs-8 { width: 66.6667%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.3333%; } .col-xs-11 { width: 91.6667%; } .col-xs-12 { width: 100%; } @media (min-width: 768px) { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; } .col-sm-1 { width: 8.33333%; } .col-sm-2 { width: 16.6667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.3333%; } .col-sm-5 { width: 41.6667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.3333%; } .col-sm-8 { width: 66.6667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.3333%; } .col-sm-11 { width: 91.6667%; } .col-sm-12 { width: 100%; } } @media (min-width: 992px) { .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; } .col-md-1 { width: 8.33333%; } .col-md-2 { width: 16.6667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.3333%; } .col-md-5 { width: 41.6667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.3333%; } .col-md-8 { width: 66.6667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.3333%; } .col-md-11 { width: 91.6667%; } .col-md-12 { width: 100%; } } @media (min-width: 1200px) { .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; } .col-lg-1 { width: 8.33333%; } .col-lg-2 { width: 16.6667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.3333%; } .col-lg-5 { width: 41.6667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.3333%; } .col-lg-8 { width: 66.6667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.3333%; } .col-lg-11 { width: 91.6667%; } .col-lg-12 { width: 100%; } } /* -------------------------------------------------------------------------- * Block grid * * The second grid in Savoy's grid.css — Foundation-style block grids on