/** Shopify CDN: Minification failed Line 1192:9 Expected "*/" to terminate multi-line comment **/ /* Last updated: 1779273622 */ /* ============================================================= Cardio Online Superstore — Universal Blog Article Stylesheet v2.3.0 ------------------------------------------------------------- Source of truth for every visual component the cardio-blog-writer plugin emits. Drop into the Shopify theme as a snippet or asset: 1. Save this file to: theme/assets/article-styles.css 2. In layout/theme.liquid , add: {{ 'article-styles.css' | asset_url | stylesheet_tag }} OR scope it to article templates only by adding the link inside templates/article.json sections. Every class below is the *contract* the plugin emits HTML against. Do not rename a class without also updating the cardio-blog-writer plugin's blog-write/blog-image/blog-rewrite skills. ============================================================= */ /* ------------------------------------------------------------- Design tokens — override in a theme settings file if the brand palette ever changes; defaults match Cardio Online 2026 brand. ------------------------------------------------------------- */ :root { --co-ink: #0F1A24; /* primary text */ --co-ink-soft: #3A4754; /* secondary text */ --co-mute: #6B7785; /* tertiary / captions */ --co-line: #E4E8EC; /* hairlines, borders */ --co-surface: #FFFFFF; --co-surface-soft: #F6F8FA; /* cards, callouts */ --co-surface-tint: #EFF3F6; /* alt rows, accordions */ --co-accent: #C8102E; /* Cardio Online red — CTAs, accents */ --co-accent-ink: #FFFFFF; --co-success: #2F7A4D; --co-warning: #B5731A; --co-info: #2867B2; --co-radius-sm: 6px; --co-radius: 10px; --co-radius-lg: 14px; --co-shadow-sm: 0 1px 2px rgba(15,26,36,.06), 0 1px 1px rgba(15,26,36,.04); --co-shadow: 0 4px 12px rgba(15,26,36,.08), 0 1px 3px rgba(15,26,36,.05); --co-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --co-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* ============================================================= 1. ARTICLE CONTAINER & TYPOGRAPHY BASELINE ============================================================= */ .blog-post { font-family: var(--co-font-body); color: var(--co-ink); line-height: 1.65; font-size: 1.0625rem; /* ~17px */ max-width: 760px; margin: 0 auto; padding: 0 1.25rem; } .blog-post p { margin: 0 0 1.25em; } .blog-post h1, .blog-post h2, .blog-post h3, .blog-post h4 { color: var(--co-ink); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin: 2em 0 .6em; } /* 2026-05-18: full-width H2 underline applied truly globally per Tris. Selector group covers every blog article wrapper in use across the store: .blog-post — cardio-blog-writer / cardio-buyers-guide v2.3.0 contract .cos-article-fix — cardio-best-roundup v1.4 styled body_html .article-content — Flex theme article wrapper (legacy / unwrapped bodies) #021526 matches Cardio Online ink used in the roundup template. margin-top intentionally omitted -- inherits 2em from heading group above. */ .blog-post h2, .cos-article-fix h2, .article-content h2 { font-size: 1.625rem; color: #021526; border-bottom: 2px solid #021526; padding-bottom: 8px; margin-bottom: 18px; line-height: 1.25; display: block; width: 100%; } /* 2026-05-18: H3 hierarchy fix. With the new full-width H2 underline, H3s at 1.25rem / 700 / #021526 read as "small H2"s instead of subsections. Softer ink + lighter weight + smaller size + tighter top margin makes them clearly nested under the H2 without extra chrome. */ .blog-post h3, .cos-article-fix h3, .article-content h3 { font-size: 1.125rem; font-weight: 600; color: var(--co-ink-soft); margin-top: 1.5em; margin-bottom: .5em; } .blog-post h4 { font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .04em; color: var(--co-ink-soft); } .blog-post a { color: var(--co-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .blog-post a:hover { text-decoration-thickness: 2px; } /* Inline citation / journal name rendering. Rule: blog-write emits for every journal, publication, report, or study title. The ... pattern is BANNED in the writer. Why over : 1. Accessibility — is the semantic element for cited works; screen readers announce it correctly. shrinks AND italicises, which screen readers treat as incidental emphasis on de-emphasised text. That's the wrong signal for a journal name. 2. Visual contract — globally reduces font-size relative to body, so a journal name in a body paragraph rendered at ~80% of body size, which looks broken next to surrounding citation prose at 100%. 3. AI citation extraction — Perplexity, ChatGPT, and Google AI Overview parse as a recognised citation marker. is invisible to citation extractors. Both rules below enforce: italic body-text-size, never shrunk. The first styles the canonical ; the second is a defensive override for any stale published article still emitting the old pattern. */ .blog-post cite { font-style: italic; font-size: inherit; /* never shrink relative to body text */ font-weight: inherit; color: inherit; } .blog-post p small em, .blog-post p em small, .blog-post li small em, .blog-post li em small { font-size: inherit; font-style: italic; } /* ============================================================= 2. HERO IMAGE — first body element, never lazy-loaded ============================================================= */ .blog-post .article-hero { display: block; width: 100%; height: auto; margin: 0 0 1.75rem; border-radius: var(--co-radius-lg); aspect-ratio: 1200 / 630; object-fit: cover; background: var(--co-surface-soft); box-shadow: var(--co-shadow-sm); } /* Inline images sit clean inside body flow, full-width to readable column */ .blog-post .article-image { display: block; width: 100%; height: auto; margin: 1.75rem 0; border-radius: var(--co-radius); aspect-ratio: 3 / 2; object-fit: cover; background: var(--co-surface-soft); } /* v0.5.5 (Tris 2026-05-19): infographic variant — broadens selector to cover .blog-post, .cos-article-fix and .article-content wrappers so cardio-buyers-guide inline infographics render full portrait (override the default 3:2 landscape crop). */ .blog-post .article-image--infographic, .cos-article-fix .article-image--infographic, .article-content .article-image--infographic { aspect-ratio: auto !important; object-fit: contain !important; max-width: 100%; height: auto; background: transparent; } .blog-post .article-image + figcaption, .blog-post figure figcaption { font-size: .875rem; color: var(--co-mute); text-align: center; margin-top: .5rem; } /* ============================================================= 3. JUMP-LINK / TABLE OF CONTENTS ============================================================= */ .blog-post .toc { background: var(--co-surface-soft); border: 1px solid var(--co-line); border-radius: var(--co-radius); padding: 1.25rem 1.5rem; margin: 1.75rem 0; } .blog-post .toc__title { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--co-ink-soft); margin: 0 0 .75rem; font-weight: 700; } .blog-post .toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: .35rem; } .blog-post .toc li { counter-increment: toc; padding-left: 1.75rem; position: relative; } .blog-post .toc li::before { content: counter(toc, decimal-leading-zero) "."; position: absolute; left: 0; top: 0; font-size: .8125rem; font-weight: 600; color: var(--co-mute); font-variant-numeric: tabular-nums; } .blog-post .toc a { color: var(--co-ink); text-decoration: none; border-bottom: 1px solid transparent; } .blog-post .toc a:hover { border-bottom-color: var(--co-accent); color: var(--co-accent); } /* ============================================================= 4. KEY TAKEAWAYS BOX ============================================================= */ .blog-post .key-takeaways { background: var(--co-surface-soft); border-left: 4px solid var(--co-accent); border-radius: var(--co-radius); padding: 1.25rem 1.5rem; margin: 1.75rem 0; } .blog-post .key-takeaways__label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--co-accent); font-weight: 700; margin-bottom: .5rem; } .blog-post .key-takeaways ul { margin: 0; padding-left: 1.25rem; } .blog-post .key-takeaways li { margin-bottom: .35rem; } .blog-post .key-takeaways li:last-child { margin-bottom: 0; } /* ============================================================= 5. BLOCKQUOTES & PULL QUOTES (consistent across articles) ============================================================= */ .blog-post blockquote { margin: 1.75rem 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--co-accent); background: var(--co-surface-soft); border-radius: 0 var(--co-radius) var(--co-radius) 0; font-style: normal; color: var(--co-ink); } .blog-post blockquote p:last-child { margin-bottom: 0; } .blog-post blockquote cite { display: block; margin-top: .75rem; font-style: normal; font-size: .875rem; color: var(--co-mute); } /* ============================================================= 6. CALLOUT BOXES — info / tip / warning / disclaimer ============================================================= */ .blog-post .callout { display: grid; grid-template-columns: auto 1fr; gap: .75rem 1rem; align-items: start; padding: 1rem 1.25rem; border-radius: var(--co-radius); border: 1px solid var(--co-line); background: var(--co-surface-soft); margin: 1.5rem 0; } .blog-post .callout__icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; border-radius: 50%; background: var(--co-info); color: #fff; } .blog-post .callout__title { font-weight: 700; margin: 0 0 .25rem; } .blog-post .callout p:last-child { margin-bottom: 0; } .blog-post .callout--info { border-color: #B6CFE6; background: #EAF2FA; } .blog-post .callout--info .callout__icon { background: var(--co-info); } .blog-post .callout--tip { border-color: #BCE0CC; background: #ECF6F0; } .blog-post .callout--tip .callout__icon { background: var(--co-success); } .blog-post .callout--warning { border-color: #E8C996; background: #FCF4E5; } .blog-post .callout--warning .callout__icon { background: var(--co-warning); } .blog-post .callout--medical { border-color: #E6B6BC; background: #FAEAEC; } .blog-post .callout--medical .callout__icon { background: var(--co-accent); } /* ============================================================= 7. PRODUCT HIGHLIGHT CARD — the universal CRO unit ------------------------------------------------------------- Used for every product mentioned in roundups and tier guides. The plugin emits this exact HTML structure via blog-write. ============================================================= */ .blog-post .product-card { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 1.5rem; align-items: stretch; padding: 1.25rem; margin: 1.75rem 0; border: 1px solid var(--co-line); border-radius: var(--co-radius-lg); background: var(--co-surface); box-shadow: var(--co-shadow-sm); transition: box-shadow .2s ease, transform .2s ease; } .blog-post .product-card:hover { box-shadow: var(--co-shadow); transform: translateY(-1px); } .blog-post .product-card__media { display: block; position: relative; aspect-ratio: 4 / 5; border-radius: var(--co-radius); overflow: hidden; background: var(--co-surface-soft); } .blog-post .product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-post .product-card__badge { position: absolute; top: .5rem; left: .5rem; background: var(--co-accent); color: var(--co-accent-ink); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: .25rem .5rem; border-radius: var(--co-radius-sm); } .blog-post .product-card__body { display: flex; flex-direction: column; gap: .5rem; } .blog-post .product-card__name { font-size: 1.125rem; font-weight: 700; margin: 0; line-height: 1.3; color: var(--co-ink); } .blog-post .product-card__name a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .blog-post .product-card__name a:hover { border-bottom-color: var(--co-accent); } .blog-post .product-card__price { font-size: 1.0625rem; font-weight: 700; color: var(--co-accent); margin: 0; } .blog-post .product-card__price del { color: var(--co-mute); font-weight: 400; margin-right: .35rem; } .blog-post .product-card__bestfor { font-size: .9375rem; color: var(--co-ink-soft); margin: 0; line-height: 1.45; } .blog-post .product-card__bestfor strong { color: var(--co-ink); } .blog-post .product-card__procons { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: .5rem 0; } .blog-post .product-card__procons ul { margin: 0; padding: 0; list-style: none; font-size: .9rem; display: grid; gap: .25rem; } .blog-post .product-card__procons li { padding-left: 1.25rem; position: relative; line-height: 1.4; color: var(--co-ink-soft); } .blog-post .product-card__procons .pros li::before { content: "✓"; color: var(--co-success); position: absolute; left: 0; font-weight: 700; } .blog-post .product-card__procons .cons li::before { content: "−"; color: var(--co-warning); position: absolute; left: 0; font-weight: 700; } .blog-post .product-card__procons-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--co-mute); margin-bottom: .25rem; display: block; } .blog-post .product-card__cta { margin-top: auto; padding-top: .5rem; } /* Product CTA button — replaces every "URL: [link]" anchor */ .blog-post .product-link-button { display: inline-flex; align-items: center; gap: .5rem; background: var(--co-accent); color: var(--co-accent-ink) !important; /* override .blog-post a colour */ text-decoration: none !important; font-weight: 700; padding: .65rem 1.1rem; border-radius: var(--co-radius-sm); font-size: .9375rem; border: 2px solid var(--co-accent); transition: background .15s ease, transform .15s ease; } .blog-post .product-link-button:hover { background: #A60D26; border-color: #A60D26; transform: translateY(-1px); text-decoration: none !important; } .blog-post .product-link-button::after { content: "→"; display: inline-block; transition: transform .15s ease; } .blog-post .product-link-button:hover::after { transform: translateX(2px); } /* Secondary (outlined) variant — for "view collection" type CTAs */ .blog-post .product-link-button--secondary { background: transparent; color: var(--co-accent) !important; border-color: var(--co-accent); } .blog-post .product-link-button--secondary:hover { background: var(--co-accent); color: var(--co-accent-ink) !important; } /* ============================================================= 8. PRICE-TIER CARDS — for home gym setup tiers, multi-product builds ============================================================= */ .blog-post .tier-card { display: block; padding: 1.25rem 1.5rem; margin: 1.5rem 0; border: 1px solid var(--co-line); border-radius: var(--co-radius-lg); background: var(--co-surface); box-shadow: var(--co-shadow-sm); } .blog-post .tier-card__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; border-bottom: 1px solid var(--co-line); padding-bottom: .75rem; margin-bottom: 1rem; } .blog-post .tier-card__name { margin: 0; font-size: 1.25rem; font-weight: 700; } .blog-post .tier-card__range { font-size: 1.0625rem; font-weight: 700; color: var(--co-accent); font-variant-numeric: tabular-nums; } .blog-post .tier-card__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; } .blog-post .tier-card__item { display: grid; grid-template-rows: auto auto auto; gap: .35rem; text-align: center; padding: .75rem; border: 1px solid var(--co-line); border-radius: var(--co-radius); background: var(--co-surface-soft); } .blog-post .tier-card__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: var(--co-radius-sm); } .blog-post .tier-card__item-name { font-size: .875rem; font-weight: 600; line-height: 1.3; margin: .25rem 0 0; } .blog-post .tier-card__item-price { font-size: .875rem; font-weight: 700; color: var(--co-accent); font-variant-numeric: tabular-nums; } .blog-post .tier-card__total { display: block; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--co-line); font-size: .9375rem; text-align: right; color: var(--co-ink-soft); } .blog-post .tier-card__total strong { color: var(--co-ink); font-size: 1.0625rem; } /* ============================================================= 9. FAQ ACCORDION — uses native
/
for a11y ============================================================= */ /* 2026-05-18: rewritten as a UNIVERSAL rule so every article gets the same rounded-card accordion the cardio-buyers-guide used to emit inline. Previous version only matched .blog-post + used brand red plus icon -- that's why the upright-bike BG rendered raw
triangles while the recumbent BG (with its inline