/* Chakra Serenity — base element styling. Type, links, article prose. Layout and components live in their own files. */ body { background: var(--cs-bg); color: var(--cs-ink); font-family: var(--cs-font-body); font-size: var(--cs-fs-body); line-height: var(--cs-lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--cs-font-display); color: var(--cs-ink); line-height: var(--cs-lh-heading); font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: var(--cs-fs-h1); line-height: var(--cs-lh-tight); } h2 { font-size: var(--cs-fs-h2); } h3 { font-size: var(--cs-fs-h3); } h4 { font-size: var(--cs-fs-h4); } a { color: var(--cs-link); } a:hover { color: var(--cs-link-hover); } /* ---------- Article prose ---------- Scoped to .cs-prose so the editor's output is styled without those rules leaking into cards, nav or the player. */ .cs-prose { font-size: var(--cs-fs-body); color: var(--cs-ink-soft); } .cs-prose > * + * { margin-top: var(--cs-s5); } .cs-prose p { color: var(--cs-ink-soft); } .cs-prose h2 { margin-top: var(--cs-s8); padding-top: var(--cs-s2); color: var(--cs-ink); position: relative; } /* The short rule above every H2 is where chakra colour enters the article. The colour is set per-category on (see site-chrome.css), so a crystal article is quietly tinted differently from a breathwork one without any of the text changing colour. */ .cs-prose h2::before { content: ""; position: absolute; top: -0.65rem; left: 0; width: 2.25rem; height: 3px; border-radius: 2px; background: var(--cs-chakra, var(--cs-accent)); } .cs-prose h3 { margin-top: var(--cs-s6); color: var(--cs-ink); } .cs-prose a { color: var(--cs-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--cs-link) 35%, transparent); transition: text-decoration-color var(--cs-transition); } .cs-prose a:hover { text-decoration-color: var(--cs-link); } .cs-prose ul, .cs-prose ol { padding-left: 1.35rem; } .cs-prose ul { list-style: disc; } .cs-prose ol { list-style: decimal; } .cs-prose li + li { margin-top: var(--cs-s2); } .cs-prose li::marker { color: var(--cs-chakra, var(--cs-accent)); } .cs-prose blockquote { border-left: 3px solid var(--cs-chakra, var(--cs-accent)); padding: var(--cs-s2) 0 var(--cs-s2) var(--cs-s5); font-family: var(--cs-font-display); font-size: var(--cs-fs-lead); font-style: italic; color: var(--cs-ink); } .cs-prose img, .cs-prose figure { border-radius: var(--cs-radius); } .cs-prose figure figcaption { margin-top: var(--cs-s2); font-size: var(--cs-fs-small); color: var(--cs-ink-muted); text-align: center; } .cs-prose code { font-family: var(--cs-font-mono); font-size: 0.9em; background: var(--cs-surface-alt); padding: 0.15em 0.4em; border-radius: var(--cs-radius-sm); } .cs-prose hr { border: 0; height: 1px; background: var(--cs-border); margin: var(--cs-s7) 0; } /* Tables in prose — the comparison tables on buyer guides depend on these. Wrapped in .cs-table-wrap by JS so a wide table scrolls itself rather than forcing the whole page sideways on a phone. */ .cs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cs-prose table { font-size: var(--cs-fs-small); background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); overflow: hidden; min-width: 34rem; } .cs-prose th { background: var(--cs-surface-alt); font-family: var(--cs-font-body); font-weight: 600; font-size: var(--cs-fs-kicker); letter-spacing: var(--cs-ls-kicker); text-transform: uppercase; color: var(--cs-ink-soft); text-align: left; } .cs-prose th, .cs-prose td { padding: var(--cs-s3) var(--cs-s4); border-bottom: 1px solid var(--cs-border); vertical-align: top; } .cs-prose tr:last-child td { border-bottom: 0; } @media (min-width: 48rem) { :root { --cs-fs-h1: 2.75rem; --cs-fs-display: 3.5rem; } }