/* normalize.css */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability of focused elements when they are also in an * active/hover state. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce * specificity and defer to the .w-button selector */ button, html input[type="button"], input[type="reset"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type='checkbox'], input[type='radio'] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { height: auto; } /** * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed * (similar to normalize.css >=4.0.0) */ input[type='search'] { -webkit-appearance: none; /* 1 */ } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } body{margin:0} /* cl-article-rail.css */ /* ========================================================================== Related articles row. Port of section-related-articles (detail_wissenswertes.html, identical CSS on detail_blog.html): a .product1_heading bar with the heading and an underlined "Alle Ansehen" link, then a .blog_list grid of .blog2_item cards. blog.html's .section-blog2 uses the same .blog2_item with the same rules plus an author row (.blog-author_link under a .margin-top.margin-small) and an h2 title; that row is the only delta and it is not part of this rail. From the export: .section-related-articles no rules (transparent) .padding-vertical.padding-xhuge the base-class combo, i.e. cl-base's .is-tablet-tall (7rem; 991: 8rem; 767: 8/4rem; 479: 3rem) .margin-bottom.margin-large 20px at desktop: `.margin-bottom { margin: 0 0 20px }` is declared after the scale classes, so the scale only wins inside the breakpoints: 991: 2.5rem 767: 2rem. cl-base gives 3rem, so the head block has its own class here. .product1_heading flex, space-between, align centre, margin-bottom 1rem 991: column, flex-start, row-gap 1rem 767: margin-right 0 .max-width-medium 35rem 479: font-size 1rem (cl-base has the width; the 479 font-size is inert here) .heading-medium 2.25rem; 991: 1.75rem; 767: 1.5rem / 1.4; 479: line-height 1.2 (cl-base lacks the 1.4) .link-small border-bottom 2px cocoa, flex none, margin-top 1rem, padding-bottom .15rem, .9rem / 600 / 1.4, inline-block, overflow hidden, z-index 1000 (inert, static) .large-link_underline.is--brown 2px bar, width 100%, margin-top .2rem, cocoa .blog_list grid 1fr x3, column-gap 2rem, row-gap 4rem 991: 1fr x2 767: 1fr, row-gap 3rem .blog-item flex, align flex-start .blog2_item flex column, space-between, width and height 100% .blog-item-content margin-bottom 1.5rem .blog2_image-link inline-block, width 100%, margin-bottom 1.5rem .blog2_image-wrapper padding-top 66%, relative, overflow hidden .blog2_image absolute cover .blog2_meta-wrapper flex, column-gap 1rem, align centre, margin-bottom 1rem .pill-medium bg pumice, letter-spacing .5px, uppercase, padding .2rem .4rem, .75rem / 400, inline-block .read-time flex, column-gap .2rem, flex none, weight 600 .text-size-small.text-weight-semibold.text-inline display inline .blog2_title-link margin-bottom .5rem, block, no underline h3.text-size-large.text-weight-semibold 1.25rem / 600 / 1.2 767: 1.125rem / 1.35 .blog2_button-wrapper margin-top auto, flex .button-wrapper inline-block .button-link.with-icon colour var(--black), flex, align centre, padding .25rem 0, line-height .8, column-gap .5rem, no underline .button-icon .8rem square, flex centre The export's cards are CMS-bound and empty (.w-dyn-bind-empty is display:none): no image, empty pill, no title, no excerpt. The fixture carries real articles, so the card, list and section are taller than the export's by the title and excerpt; see the probe file. Added round twelve, and not in the export, which never rendered a card with content in it: - a pumice ground behind the ratio box, and a lucidity ground with the tag and the reading time in Sanomat when the article has no image, so a missing, dead or slow image is a deliberate card and not a white hole; - the title clamps at three lines and the excerpt at two; - the author row joins the read-now link in one bottom cluster, pinned by the footer, so both align across a row (the rail passes no author, so its footer keeps the export's single-row shape); - a hover and :focus-within state on the whole card, and a focus ring on every link inside it. ========================================================================== */ .cl-article-rail { background-color: transparent; } .cl-article-rail.is-lucidity { background-color: var(--cl-lucidity); } .cl-article-rail.is-pumice { background-color: var(--cl-pumice); } /* .margin-bottom.margin-large as the export's cascade resolves it */ .cl-article-rail__head { margin: 0 0 20px; } /* EU round: on the article page the rail follows the body with no top padding of its own; the article's 1.5rem bottom margin is the whole gap to the "Related articles" title. Six classes so it outranks cl-base's .is-tablet-tall combo at every breakpoint. */ .cl.cl-article-rail .is-tablet-tall.padding-vertical.is-tight-top { padding-top: 0; } /* .product1_heading */ .cl-article-rail__bar { flex: 1; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .cl-article-rail__bar .pre-heading { margin-bottom: 1rem; } /* .link-small with .large-link_underline.is--brown inside */ .cl-article-rail__all { border-bottom: 2px solid var(--cl-cocoa); flex: none; margin-top: 1rem; padding-bottom: .15rem; font-size: .9rem; font-weight: 600; line-height: 1.4; display: inline-block; overflow: hidden; max-width: 100%; color: inherit; text-decoration: none; } .cl-article-rail__all > span { display: block; } .cl-article-rail__underline { background-color: var(--cl-cocoa); width: 100%; height: 2px; margin-top: .2rem; } .cl-article-rail__all:hover { opacity: .7; } /* .blog_list */ .cl-article-rail__list { display: grid; grid-template-columns: repeat(var(--cl-rail-cols, 3), 1fr); grid-auto-columns: 1fr; column-gap: 2rem; row-gap: 4rem; } /* .blog-item */ .cl-article-rail__item { display: flex; align-items: flex-start; } /* -------------------------------------------------------------------------- Card (.blog2_item), rendered by snippets/cl-article-card.liquid -------------------------------------------------------------------------- */ .cl-article-card { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; } .cl-article-card__content { margin-bottom: 1.5rem; } /* .blog2_image-link.w-inline-block: inline-block with nothing inline inside, so its baseline is its margin edge and there is no line gap; vertical-align top keeps that true whatever the font metrics */ .cl-article-card__image-link { display: inline-block; vertical-align: top; width: 100%; max-width: 100%; margin-bottom: 1.5rem; color: inherit; } /* Not from the export: the pumice ground. The ratio box is the export's, but the export never had to render an article whose image is slow, gone or absent; without a ground those read as a white hole in the row. */ .cl-article-card__image { width: 100%; padding-top: 66%; position: relative; overflow: hidden; background-color: var(--cl-pumice); } .cl-article-card__image img { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0; transition: transform .4s ease; } .cl-article-card:hover .cl-article-card__image img { transform: scale(1.03); } /* No image: the same ratio box on a lucidity ground, with the tag and the reading time set in the heading face. Decorative, and a repeat of the meta row below it, so nothing is lost when it is not read out. */ .cl-article-card__image.is-empty { background-color: var(--cl-lucidity); } .cl-article-card__ground { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 1.25rem; color: var(--cl-cocoa); border-bottom: 2px solid var(--cl-lucid); } .cl-article-card__ground-tag { font-size: .75rem; font-weight: 400; letter-spacing: .5px; text-transform: uppercase; background-color: #fff9; padding: .2rem .4rem; } .cl-article-card__ground-read { font-family: var(--cl-font-heading); font-size: 2.5rem; line-height: 1; display: flex; flex-direction: column; } .cl-article-card__ground-unit { font-family: var(--cl-font-body); font-size: .8125rem; font-weight: 600; line-height: 1.2; letter-spacing: .3px; margin-top: .35rem; } .cl-article-card__meta { display: flex; column-gap: 1rem; align-items: center; margin-bottom: 1rem; min-height: 1.4rem; } .cl-article-card__pill { background-color: var(--cl-pumice); letter-spacing: .5px; text-transform: uppercase; padding: .2rem .4rem; font-size: .75rem; font-weight: 400; display: inline-block; color: inherit; text-decoration: none; } .cl-article-card__read { display: flex; column-gap: .2rem; flex: none; font-weight: 600; } .cl-article-card__title-link { margin-bottom: .5rem; text-decoration: none; color: inherit; display: block; max-width: 100%; } .cl-article-card .cl-article-card__title { line-height: 1.2; } /* Not from the export. One contract for every card: the title clamps at three lines and the excerpt at two, so a long headline or a long summary cannot set the height of its row. -webkit-line-clamp is the only clamp Safari has; every engine the theme targets supports the -webkit- prefixed form. */ .cl-article-card__title, .cl-article-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .cl-article-card__title { -webkit-line-clamp: 3; } .cl-article-card__excerpt { -webkit-line-clamp: 2; } /* The bottom cluster: the author row and the read link, pinned together, so both align across a row whatever the title and excerpt above them do. */ .cl-article-card__footer { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; row-gap: .75rem; } .cl-article-card__button-wrap { display: inline-block; } .cl-article-card__link { color: var(--cl-black); background-color: transparent; display: flex; align-items: center; column-gap: .5rem; padding: .25rem 0; line-height: .8; text-decoration: none; max-width: 100%; } .cl-article-card__link:hover { text-decoration: underline; } .cl-article-card__icon { display: flex; flex-direction: column; justify-content: center; align-items: center; width: .8rem; height: .8rem; transition: transform .18s ease; } .cl-article-card__icon svg { width: 100%; height: 100%; display: block; } /* Not from the export: a hover state on the whole card, not only the image. The title underlines, the chevron slides, the ground darkens a shade. The card is not a link, so this is driven from :hover on the card and from :focus-within, which keeps the same feedback on the keyboard path. */ .cl-article-card:hover .cl-article-card__title-link, .cl-article-card:focus-within .cl-article-card__title-link { text-decoration: underline; text-underline-offset: .12em; } .cl-article-card:hover .cl-article-card__icon, .cl-article-card:focus-within .cl-article-card__icon { transform: translateX(.2rem); } .cl-article-card:hover .cl-article-card__image.is-empty { background-color: var(--cl-lucid); } .cl-article-card__image.is-empty { transition: background-color .25s ease; } .cl-article-card__pill { transition: background-color .18s ease, color .18s ease; } a.cl-article-card__pill:hover { background-color: var(--cl-cocoa); color: var(--cl-white); } /* the ring sits inside the box so a clipped image link cannot cut it */ .cl-article-card a:focus-visible { outline: 2px solid var(--cl-cocoa); outline-offset: -2px; } @media screen and (max-width: 991px) { .cl-article-rail__head { margin-bottom: 2.5rem; text-align: left; } .cl-article-rail__bar { flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1rem; } .cl-article-rail__list { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 767px) { .cl-article-rail__head { margin-bottom: 2rem; } .cl-article-rail__bar { margin-right: 0; } .cl-article-rail__list { row-gap: 3rem; grid-template-columns: 1fr; } .cl-article-rail .heading-medium { line-height: 1.4; } .cl-article-card .cl-article-card__title { line-height: 1.35; } } @media screen and (max-width: 479px) { .cl-article-rail .heading-medium { line-height: 1.2; } } @media (prefers-reduced-motion: reduce) { .cl-article-card__image img, .cl-article-card__icon, .cl-article-card__pill, .cl-article-card__image.is-empty { transition: none; } .cl-article-card:hover .cl-article-card__icon, .cl-article-card:focus-within .cl-article-card__icon { transform: none; } } /* Author row (live blog grid), now the first line of the bottom cluster: .margin-top.margin-small > .blog-author_link flex, align center, gap .5rem .blog-author_image1 2rem round .text-style-link underlined name */ .cl-article-card__author-row { display: flex; } .cl-article-card__author { display: flex; align-items: center; column-gap: .5rem; justify-content: flex-start; color: inherit; text-decoration: none; } .cl-article-card__avatar { width: 2rem; height: 2rem; border-radius: 5rem; object-fit: cover; flex: none; } .cl-article-card__author .text-style-link { text-decoration: underline; text-underline-offset: .15em; } /* cl-base.css */ /* ========================================================================== Clearlight base: tokens, spacing, type, layout, buttons. Ported from the Webflow build. Every value here was read out of reference/webflow/css/clearlight-saunas-germany.css, not eyeballed. Scoping ------- Everything except the token block is scoped under .cl, so it cannot collide with the Concept theme's 344KB theme.css. Wrap any ported section in .cl. Why this file is short --------------------- The Webflow stylesheet carries 287 numeric-suffixed duplicate classes across 98 families (31 byte-identical to their base, 211 differing, 45 with no base at all), plus 14 more on a "-copy" suffix. On top of that it writes one rule per spacing combo, so .margin-bottom alone has 25 rules that all say the same three declarations. Both problems collapse here. Spacing sizes set a custom property and their own all-round value; direction classes come after and restrict it. Because custom properties resolve at use time, a responsive size only needs redeclaring once. That turns roughly 180 Webflow spacing rules into 27. Every collapsed class and the exact delta is recorded in docs/DEDUPE-MAP.md. ========================================================================== */ :root { /* Brand, from the Clearlight palette (round eighteen, 2026-08-27): Oxygen, Lucid, Volition, Nimbus, Zeal, Stratos, Terra. The Webflow build's cocoa and black both collapse to Volition, its greys become Nimbus tints. The old values and every literal they replaced are in tools/palette.mjs, which is what rewrote the section stylesheets. */ --cl-white: #fff; /* Oxygen */ --cl-lucid: #ead8cb; /* Lucid */ --cl-cocoa: #251f20; /* Volition: the ink and the dark fill */ --cl-night: #050402; /* the Black Friday artwork's own black (banner edges); campaign hero panel and sticky bar only */ --cl-black: #251f20; /* Volition again; the alias stays for the rules that read it */ --cl-nimbus: #dedcdb; /* Nimbus: hairlines and neutral fills */ --cl-dark-red: #801c00; /* Zeal: accents, error states, the accent fill */ --cl-zeal: var(--cl-dark-red); --cl-stratos: #014560; /* Stratos: available, used only where the export already had it */ --cl-terra: #00433f; /* Terra */ --cl-golden: #db9729; /* not in the palette: star-rating glyphs only */ /* tints, mixed over white */ --cl-lucidity: #f9f3ef; /* Lucid 30% — the light warm band */ --cl-pumice: #eeedec; /* Nimbus 50% */ --cl-light-grey: #f5f4f4; /* Nimbus 30% */ /* Round eighteen: the one colour the brand sheet has no word for, a field that validates. Terra (#00433f) is the site's green but reads as teal at 18px on white; this is the same hue family a step lighter, 4.6:1 on lucidity. Used only by .cl-field.is-valid. */ --cl-valid: #1f7a4b; /* Round twenty: the same two states on a photo ground (the e-book and catalogue heroes, cl-contact-form.is-hero). Zeal and --cl-valid are 1.5:1 on a dark photo; these are the hue families lifted until they read there (7:1 on #333), used with a 2px ring and a tinted fill so the state still carries where a photo runs light. */ --cl-valid-on-dark: #8ad8ab; --cl-invalid-on-dark: #ffb4a3; --cl-font-heading: "Sanomat", Georgia, serif; --cl-font-body: "Adelle Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Volition at an opacity, named by the percentage so #251f2040 reads as ink-25 wherever it lands: hairlines, veils, scrims, muted type, the scrollbar. One token per opacity the stylesheets already used more than once; a one-off stays a literal #251f20xx. */ --cl-ink-4: #251f200a; --cl-ink-8: #251f2014; --cl-ink-10: #251f201a; --cl-ink-12: #251f201f; --cl-ink-13: #251f2021; --cl-ink-14: #251f2024; --cl-ink-15: #251f2026; --cl-ink-16: #251f2029; --cl-ink-20: #251f2033; --cl-ink-22: #251f2038; --cl-ink-25: #251f2040; --cl-ink-28: #251f2047; --cl-ink-35: #251f2059; --cl-ink-40: #251f2066; --cl-ink-50: #251f2080; --cl-ink-60: #251f2099; --cl-ink-61: #251f209c; --cl-ink-65: #251f20a6; --cl-ink-70: #251f20b3; --cl-ink-75: #251f20bf; --cl-line: var(--cl-ink-25); /* checkbox, radio and input hairlines (was the warm #b9a495) */ /* Interaction steps for every button (see "Button interaction" below). Two opaque tones for a filled pill, two veils for a pill with no fill of its own. Nothing here is a new colour: the tones are Volition (or Zeal, for the accent pill) mixed with the brand's own lucid and black, the veils are Volition and white at low alpha. */ --cl-cocoa-lift: #413938; /* Volition + 14% lucid — hover on a Volition fill */ --cl-cocoa-press: #1c1718; /* Volition x .75 — the press, and text-link hover ink */ --cl-red-lift: #8f361c; /* Zeal + 14% lucid — hover on a Zeal fill (.is-gold) */ --cl-red-press: #601500; /* Zeal x .75 — its press */ --cl-veil: var(--cl-ink-10); /* Volition 10% — hover on a light/unfilled pill */ --cl-veil-press: #251f202e; /* Volition 18% — its press */ --cl-veil-light: #ffffff26; /* white 15% — the same two steps on a dark ground */ --cl-veil-light-press: #ffffff40; --cl-focus: var(--cl-cocoa); /* focus ring, swapped to white on dark variants */ --cl-focus-halo: var(--cl-white); /* the 2px gap between pill and ring */ /* the .is-done check, masked so it takes currentColor and no webfont */ --cl-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.1 6.3l2.6 2.6 5.2-5.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- Document scrollbar and scroll lock. Top level on purpose: the viewport is not inside .cl. scrollbar-gutter keeps the scrollbar's space reserved while an overlay sets overflow: hidden on , so the page does not shift sideways by a scrollbar width every time a drawer or the mobile menu opens (classic scrollbars: Windows, headless Chrome; macOS overlay scrollbars never took space). The gutter is drawn thin, in cocoa at 40%, so the reserved strip reads as part of the page. The -webkit- rules are the same for Safari. html.cl-lock is the one lock every overlay toggles: cl-topbar.liquid's two drawers and cl-nav.liquid's mobile menu. A class, not an inline style, so nothing has to save and restore whatever overflow was there before. -------------------------------------------------------------------------- */ html { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--cl-ink-40) transparent; } html::-webkit-scrollbar { width: 8px; } html::-webkit-scrollbar-thumb { background: var(--cl-ink-40); border-radius: 8px; } html.cl-lock { overflow: hidden; } /* The UA sheet's 8px body margin. The preview harness resets it in its own shell, which is how it went unnoticed until the store showed a gap down the left of the nav and the hero. */ body { margin: 0; } /* Blur-up images: .cl-lqip is the tiny blurred copy under the real one, .cl-fade the real one, transparent until it has loaded (the script in theme.liquid marks it is-loaded; a browser without the script just shows it, since the class only lowers opacity when the script is present). */ html.cl-js .cl-fade { opacity: 0; transition: opacity .35s ease; } html.cl-js .cl-fade.is-loaded { opacity: 1; } .cl-lqip { pointer-events: none; user-select: none; transition: opacity .35s ease; } .cl-lqip:has(+ .cl-fade.is-loaded) { opacity: 0; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ .cl { color: var(--cl-cocoa); font-family: var(--cl-font-body); font-size: 1rem; font-weight: 300; line-height: 1.5; } .cl *, .cl *::before, .cl *::after { box-sizing: border-box; } /* Every export page carries an inline `* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }` in its head ("please keep this css code to improve the font quality"). Without it every glyph renders about a fifth heavier on macOS; no probe can see it. -webkit-appearance: none from the same rule is left to the form controls that need it. */ .cl, .cl * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cl h1, .cl h2, .cl h3 { margin: 0; line-height: 1.2; } .cl h4 { margin: 0; line-height: 1.3; } .cl h5 { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.4; } .cl h6 { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.4; } .cl p { margin: 0; } /* UA sheet gives p margin-block: 1em; the export only zeroes the bottom, which leaked 28px into any heading slot that used a

*/ .cl .text-rich-text p, .cl .cl-richtext p { margin: 0 0 .5rem; } .cl img { max-width: 100%; display: inline-block; vertical-align: middle; } /* components.css: img {vertical-align: middle} */ .cl ul { margin: 1rem 0; padding-left: 1.25rem; } .cl ol { margin: 1rem 0; padding-left: 2.5rem; } .cl li { margin-bottom: .5rem; } .cl blockquote { border-left: .1875rem solid var(--cl-black); margin-bottom: 0; padding: .75rem 1.25rem; font-size: 1.45rem; line-height: 1.5; } /* Webflow's stylesheet sets `a { text-decoration: line-through }` globally and then fights it everywhere. Not ported. */ .cl .hide { display: none; } .cl .overflow-hidden { overflow: hidden; } .cl .z-index-1 { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- Spacing scale margin-* and padding-* share one set of values in the export, so they share one scale here. A size class sets --cl-space and applies it on all sides, matching Webflow. A direction class then restricts it, and must come after. -------------------------------------------------------------------------- */ .cl .margin-0 { --cl-space: 0; margin: var(--cl-space); } .cl .margin-tiny { --cl-space: .25rem; margin: var(--cl-space); } .cl .margin-xxsmall { --cl-space: .5rem; margin: var(--cl-space); } .cl .margin-xsmall { --cl-space: 1rem; margin: var(--cl-space); } .cl .margin-small { --cl-space: 1.5rem; margin: var(--cl-space); } .cl .margin-medium { --cl-space: 2rem; margin: var(--cl-space); } .cl .margin-large { --cl-space: 3rem; margin: var(--cl-space); } .cl .margin-xlarge { --cl-space: 4rem; margin: var(--cl-space); } .cl .margin-xxlarge { --cl-space: 5rem; margin: var(--cl-space); } .cl .margin-huge { --cl-space: 6rem; margin: var(--cl-space); } .cl .margin-xhuge { --cl-space: 7rem; margin: var(--cl-space); } .cl .margin-xxhuge { --cl-space: 10rem; margin: var(--cl-space); } .cl .padding-0 { --cl-space: 0; padding: var(--cl-space); } .cl .padding-tiny { --cl-space: .25rem; padding: var(--cl-space); } .cl .padding-xxsmall { --cl-space: .5rem; padding: var(--cl-space); } .cl .padding-xsmall { --cl-space: 1rem; padding: var(--cl-space); } .cl .padding-small { --cl-space: 1.5rem; padding: var(--cl-space); } .cl .padding-medium { --cl-space: 2rem; padding: var(--cl-space); } .cl .padding-large { --cl-space: 3rem; padding: var(--cl-space); } .cl .padding-xlarge { --cl-space: 4rem; padding: var(--cl-space); } .cl .padding-xxlarge { --cl-space: 5rem; padding: var(--cl-space); } .cl .padding-huge { --cl-space: 6rem; padding: var(--cl-space); } .cl .padding-xhuge { --cl-space: 7rem; padding: var(--cl-space); } .cl .padding-xxhuge { --cl-space: 10rem; padding: var(--cl-space); } /* Opt-in for the export's .padding-vertical + .padding-xhuge combo, which overrides the scale on the sections built with the base .padding-vertical (the reviews bar and the FAQ). Sections built on Webflow's numbered copies (.padding-vertical-4 on the hero, -13 on the CTA banner) never triggered it, which is the one case where a numbered duplicate changed behaviour rather than just repeating itself. Because the breakpoints are max-width, each step inherits the last: 991 pushes both sides to 8rem, 767 only pulls the bottom back to 4rem, 479 resets both to 3rem. */ .cl .is-tablet-tall.padding-vertical.padding-xhuge { padding-top: 7rem; padding-bottom: 7rem; } /* direction restrictors, after the sizes so they win on equal specificity */ .cl .margin-top { margin: var(--cl-space, 0) 0 0; } .cl .margin-bottom { margin: 0 0 var(--cl-space, 0); } .cl .margin-vertical { margin: var(--cl-space, 0) 0; } .cl .margin-horizontal { margin: 0 var(--cl-space, 0); } .cl .padding-top { padding: var(--cl-space, 0) 0 0; } .cl .padding-bottom { padding: 0 0 var(--cl-space, 0); } .cl .padding-vertical { padding: var(--cl-space, 0) 0; } .cl .padding-horizontal { padding: 0 var(--cl-space, 0); } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ /* The page shell. layout/theme.liquid must carry these two. The export's .main-wrapper had padding-top: 2rem to sit under a fixed nav; the nav is a normal-flow sticky block now, so the shell needs no clearance and the hero carries its own top spacing. */ .cl.page-wrapper { background-color: transparent; flex-direction: column; min-height: 100vh; display: flex; } .cl .main-wrapper { padding-top: 0; position: relative; } /* Round nineteen: on the store the shell is Concept's .page-container and the footer group sits inside it after

. Concept's theme.css makes that group `position: absolute; z-index: -1` (its own footer reveals from behind the page). An absolutely positioned child of a flex container takes the container's top edge as its static position, so on every German page the footer landed at the top, behind the hero and over the cart, the blog and the search results. Back in normal flow inside our shell; the Concept markets never carry .cl.page-wrapper, so their footer keeps its trick. */ .cl.page-wrapper > .footer-group { position: static; z-index: auto; } .cl .page-padding { padding-left: 5%; padding-right: 5%; } .cl .container-small { width: 100%; max-width: 52rem; margin-inline: auto; display: block; } .cl .container-medium { width: 100%; max-width: 64rem; margin-inline: auto; } .cl .container-large { width: 100%; max-width: 80rem; margin-inline: auto; } .cl .container-xlarge { width: 100%; max-width: 100rem; margin-inline: auto; } .cl .max-width-small { width: 100%; max-width: 30rem; } .cl .max-width-medium { width: 100%; max-width: 35rem; } .cl .max-width-large { width: 100%; max-width: 48rem; } .cl .max-width-xlarge { width: 100%; max-width: 64rem; } .cl .max-width-full { width: 100%; max-width: none; } .cl .align-center { margin-inline: auto; } /* -------------------------------------------------------------------------- Type -------------------------------------------------------------------------- */ .cl .heading-xlarge, .cl .heading-large, .cl .heading-medium, .cl .heading-small, .cl .heading-xsmall { font-family: var(--cl-font-heading); font-weight: 400; } .cl .heading-xlarge { font-size: 5rem; letter-spacing: -1.5px; line-height: 1.1; } .cl .heading-xlarge.is-compact { letter-spacing: -1px; } /* The export's .heading-large carries no letter-spacing; the -1px that used to sit here belongs to the .heading-xlarge twins. .heading-small's .5rem bottom margin and 1.4 leading are the export's own. line-height is restated on the class so it also applies on a
, which the .cl h1-h3 reset does not reach. */ .cl .heading-large { font-size: 3rem; line-height: 1.2; } .cl .heading-medium { font-size: 2.25rem; line-height: 1.2; } .cl .heading-small { font-size: 1.5rem; line-height: 1.4; margin-bottom: .5rem; } .cl .heading-xsmall { font-size: 1.25rem; } .cl .text-size-tiny { font-size: .75rem; } .cl .text-size-small { font-size: .875rem; } .cl .text-size-regular { font-size: 1rem; } .cl .text-size-medium { font-size: 1.125rem; } .cl .text-size-large { font-size: 1.25rem; font-weight: 400; text-transform: none; } /* Section lead paragraph. 1.75rem / 400 / 1.4 is where two of the export's three lead classes agreed (.text-large-3 and .subheading-large), so it is the canonical size. The third, .subheading-large-8 on the live promo slide, ran 1.875rem with line-height 1.24 inherited from .text-weight-bold; .is-large reproduces it exactly for anyone who needs that slide pixel-identical. */ .cl .text-lead { font-size: 1.75rem; font-weight: 400; line-height: 1.4; } .cl .text-lead.is-large { font-size: 1.875rem; line-height: 1.24; } .cl .text-weight-light { font-weight: 300; } .cl .text-weight-normal { font-weight: 400; } .cl .text-weight-medium { font-weight: 500; } .cl .text-weight-semibold { font-weight: 600; } .cl .text-weight-bold { font-weight: 700; line-height: 1.24; } .cl .text-weight-xbold { font-weight: 800; } .cl .text-align-left { text-align: left; } .cl .text-align-center { text-align: center; } .cl .text-align-right { text-align: right; } .cl .text-color-white { color: var(--cl-white); } .cl .text-color-black { color: var(--cl-black); } .cl .text-color-cocoa { color: var(--cl-cocoa); } .cl .text-color-gold { color: var(--cl-dark-red); } /* the accent; gold is for stars only (round eighteen) */ .cl .text-color-lucid { color: var(--cl-lucid); } .cl .text-style-allcaps { text-transform: uppercase; } .cl .text-style-italic { font-style: italic; } .cl .text-style-underline { text-decoration: underline; } .cl .text-style-nowrap { white-space: nowrap; } .cl .text-style-muted { opacity: .6; } .cl .text-inline { display: inline; } .cl .is-capitalized { letter-spacing: .5px; text-transform: uppercase; } /* -------------------------------------------------------------------------- Buttons .button and .button-secondary are copied declaration for declaration. The export's hover is not: it only shifted the label to lucid and left the ground alone, so a filled pill went muddy while an outline pill did nothing at all. Every interaction state now lives in one place, "Button interaction" below. -------------------------------------------------------------------------- */ .cl .button, .cl .button-secondary { min-width: 12rem; text-align: center; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 100px; justify-content: center; align-items: center; padding: .75rem 1.5rem; font-size: .813rem; font-weight: 500; text-decoration: none; display: flex; } .cl .button { column-gap: .4rem; border: 1px solid var(--cl-cocoa); background-color: var(--cl-cocoa); color: var(--cl-white); } .cl .button-secondary { border: 1px solid var(--cl-cocoa); background-color: transparent; color: var(--cl-black); } /* modifiers */ /* A white pill only ever sits on a photo or a dark band, so its focus ring flips: white ring, cocoa halo, which is legible on both. */ .cl .button.is-white { color: var(--cl-cocoa); background-color: var(--cl-white); border-color: var(--cl-white); --cl-focus: var(--cl-white); --cl-focus-halo: var(--cl-cocoa); } /* Was the export's #131313 fill. The client wants every call to action in the accent, never black, so the "dark" fill is cocoa; the class stays for the templates that already carry it. */ .cl .button.is-dark { color: var(--cl-white); background-color: var(--cl-cocoa); border-color: var(--cl-cocoa); } /* The accent pill. Was golden with cocoa ink (5.0:1); round eighteen takes gold out of everything but the stars, so it is Zeal with white ink, which measures 10.1:1. (Nothing ships .is-gold today; the class is kept for the templates and passes if one uses it.) */ .cl .button.is-gold { border-color: var(--cl-dark-red); background-color: var(--cl-dark-red); color: var(--cl-white); } .cl .button.invert-colors, .cl .button-secondary.invert-colors { border-color: var(--cl-white); color: var(--cl-white); background-color: transparent; flex-wrap: nowrap; --cl-focus: var(--cl-white); --cl-focus-halo: var(--cl-ink-75); } .cl .button.button-small { letter-spacing: 1px; min-width: auto; padding: .6rem 1.25rem .5rem; } .cl .button-secondary.button-small { min-width: auto; padding: .5rem 1.25rem; } /* The bar's three weights: filled cocoa, outline, plain. */ .cl .button.is-navbar { background-color: var(--cl-cocoa); border-color: var(--cl-cocoa); letter-spacing: 1px; min-width: auto; padding: .6rem 2rem .5rem; } .cl .button.is-navbar.is-secondary { border-color: var(--cl-cocoa); color: var(--cl-cocoa); background-color: transparent; } .cl .button.is-navbar.is-plain { border-color: transparent; color: var(--cl-cocoa); background-color: transparent; } /* .button-secondary-4 in the export is .button-secondary with #131313 in place of var(--cocoa) for border and text. Collapsed; the 4px of colour difference between cocoa and near-black is not a design decision. */ /* Section eyebrow. .pre-heading in the export, which has ten numbered twins. The base carries weight 600 and a 4rem top margin; the twins used on the full-image and video sections drop to 400 with no top margin, which is .is-plain here. */ .cl .pre-heading { letter-spacing: 1px; text-transform: uppercase; margin-top: 4rem; margin-bottom: 2rem; font-size: .875rem; font-weight: 600; } .cl .pre-heading.is-plain { margin-top: 0; font-weight: 400; } .cl .pre-heading.is-light { margin-bottom: 1rem; font-weight: 300; } /* Hero eyebrow (round nineteen, client 2026-08-28): the letter-spaced line over the hero's heading ("Infrarot + Rotlichttherapie"), lifted out of cl-hero.css so the Stories band's head can carry the same one. Mixed case, .25rem tracking at 1.3rem, weight 400, 1rem under it; 1rem on a phone. */ .cl .cl-eyebrow { letter-spacing: .25rem; margin-bottom: 1rem; font-size: 1.3rem; font-weight: 400; } @media screen and (max-width: 479px) { .cl .cl-eyebrow { font-size: 1rem; line-height: 1.3; } } .cl .shadow { box-shadow: 0 4px 30px #0000001f; } /* Underlined text link, .link-large in the export. */ .cl .link-large { border-bottom: 2px solid var(--cl-cocoa); flex: none; margin-top: 1rem; padding-bottom: .15rem; font-weight: 400; display: inline-block; position: relative; overflow: hidden; color: inherit; text-decoration: none; } .cl .link-large.is-white { border-bottom-color: var(--cl-white); color: var(--cl-white); --cl-focus: var(--cl-white); --cl-focus-halo: var(--cl-ink-75); } .cl .button-row { column-gap: 1rem; row-gap: 1rem; flex-wrap: wrap; align-items: center; display: flex; } .cl .button-row.is-button-row-center { justify-content: center; } .cl .button-row.is-button-row-right { justify-content: flex-end; } /* -------------------------------------------------------------------------- Button interaction: one language, every variant (client, 2026-08-25: "button hover is odd and off brand", round 13 item 17) What it was: four different answers to the same gesture. A filled pill kept its ground and turned its label lucid, which reads as the label fading. An outline pill did nothing. The navbar's outline pill inverted to a cocoa fill and the plain one went #f4f4f4 grey, the only neutral grey in the palette. A text link dropped to opacity .7, which reads as disabled and takes the contrast down with it. None of it was timed, so all of it snapped. What it is: the pill steps one notch, never flips. filled the ground moves to the next brand tone (Volition -> Volition+lucid on hover, Volition x .75 pressed; white -> lucidity -> lucid) and the ink never moves unfilled the ground gains a veil of its own ink (cocoa 10%, 18% pressed) and the label goes cocoa with it. The veil is an alpha and not a hex because the same rule has to read on white, on lucid (the CTA banner's ground) and on pumice. On a dark ground the veil is white instead. text link .button-tertiary and the drawer's "Weiter einkaufen" have a box, so they take the veil too. .link-large has none, so it takes the ink half of the step: it and its underline deepen to Volition x .75. Contrast goes up, not down; nothing dims. Plus, on all three: 140ms ease on colour only (nothing moves, no shadow), an unmistakable two-tone :focus-visible ring, and a press that is one step past hover in the same direction. Section files may still override a variant they own; the two that do are cl-hero's frosted CTA (already a white veil, one step deeper than its resting scrim) and cl-footer's newsletter pill. -------------------------------------------------------------------------- */ .cl .button, .cl .button-secondary, .cl .button-tertiary, .cl .link-large, .cl .cl-cart__continue { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; } /* Webflow's a:hover underlines; the pills never do. */ .cl .button:hover, .cl .button-secondary:hover, .cl .button-tertiary:hover { text-decoration: none; } /* --- filled: the ground steps, the ink holds ----------------------------- */ .cl .button:hover { background-color: var(--cl-cocoa-lift); border-color: var(--cl-cocoa-lift); } .cl .button:active { background-color: var(--cl-cocoa-press); border-color: var(--cl-cocoa-press); } .cl .button.is-white:hover { background-color: var(--cl-lucidity); border-color: var(--cl-lucidity); } .cl .button.is-white:active { background-color: var(--cl-lucid); border-color: var(--cl-lucid); } /* The accent pill steps like the Volition one, on its own two tones. */ .cl .button.is-gold:hover { background-color: var(--cl-red-lift); border-color: var(--cl-red-lift); } .cl .button.is-gold:active { background-color: var(--cl-red-press); border-color: var(--cl-red-press); } /* --- unfilled: a veil of the button's own ink ---------------------------- */ /* The label goes cocoa with it: warm ink over a warm veil is the difference between this and the #f4f4f4 grey it replaces. */ .cl .button-secondary:hover, .cl .button.is-navbar.is-secondary:hover, .cl .button.is-navbar.is-plain:hover, .cl .button-tertiary:hover, .cl .cl-cart__continue:hover { background-color: var(--cl-veil); color: var(--cl-cocoa); } .cl .button-secondary:active, .cl .button.is-navbar.is-secondary:active, .cl .button.is-navbar.is-plain:active, .cl .button-tertiary:active, .cl .cl-cart__continue:active { background-color: var(--cl-veil-press); } /* on a photo or a dark band the veil is white. Kept at .invert-colors specificity so a section that owns the variant (cl-hero) still wins. */ .cl .button.invert-colors:hover, .cl .button-secondary.invert-colors:hover { background-color: var(--cl-veil-light); } .cl .button.invert-colors:active, .cl .button-secondary.invert-colors:active { background-color: var(--cl-veil-light-press); } /* --- text links: the ink deepens ---------------------------------------- .link-large is the one control with no box to fill: inline-block, 2px of underline and .15rem of padding, so a veil would clamp to the glyphs. It takes the ink half of the same step instead, and the underline follows. ---------------------------------------------------------------------- */ .cl .link-large:hover { color: var(--cl-cocoa-press); border-bottom-color: var(--cl-cocoa-press); } .cl .link-large:active { color: var(--cl-black); border-bottom-color: var(--cl-black); } /* the two that do have a box keep their underline in step with the veil */ .cl .button-tertiary:hover, .cl .cl-cart__continue:hover { border-bottom-color: var(--cl-cocoa); } .cl .button-tertiary:active, .cl .cl-cart__continue:active { color: var(--cl-cocoa-press); border-bottom-color: var(--cl-cocoa-press); } /* on a dark ground the step is towards lucid instead */ .cl .link-large.is-white:hover { color: var(--cl-lucid); border-bottom-color: var(--cl-lucid); } .cl .link-large.is-white:active { color: var(--cl-white); border-bottom-color: var(--cl-white); } /* --- focus: one ring, two tones, so it reads on paper and on a photo ----- */ .cl .button:focus-visible, .cl .button-secondary:focus-visible, .cl .button-tertiary:focus-visible, .cl .link-large:focus-visible, .cl .cl-cart__continue:focus-visible { outline: 2px solid var(--cl-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--cl-focus-halo); } @media (prefers-reduced-motion: reduce) { .cl .button, .cl .button-secondary, .cl .button-tertiary, .cl .link-large, .cl .cl-cart__continue { transition: none; } } /* -------------------------------------------------------------------------- Waiting and done, shared (round 13 items 18 and 19) Two classes any control can carry, and the only contract between the delegated CTA script in layout/theme.liquid and a section that runs its own request (the product page's add-to-cart). Both marks are ::after on the control itself, so a section only has to toggle the class: .is-loading spinner after the label, pointer events off. The script swaps the label for its data-wait text and sets aria-busy; a section that only toggles the class keeps its own label. .is-done check mark, and terra, the palette's green, under it. The spinner keeps turning under prefers-reduced-motion, slower: it is the only thing saying the click was heard, and WCAG 2.2.2 exempts motion that carries the status. Nothing else about the state moves. -------------------------------------------------------------------------- */ .cl .is-loading, .cl .is-done { pointer-events: none; column-gap: .4rem; } .cl .is-loading { cursor: default; } .cl .is-loading::after, .cl .is-done::after { content: ""; flex: none; display: inline-block; width: .875em; height: .875em; box-sizing: border-box; } .cl .is-loading::after { border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cl-spin 640ms linear infinite; } .cl .is-done::after { background-color: currentColor; -webkit-mask: var(--cl-check) center / contain no-repeat; mask: var(--cl-check) center / contain no-repeat; } .cl .button.is-done, .cl .button-secondary.is-done, .cl .button.is-navbar.is-done { background-color: var(--cl-terra); border-color: var(--cl-terra); color: var(--cl-white); } @keyframes cl-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .cl .is-loading::after { animation-duration: 1400ms; } } /* -------------------------------------------------------------------------- Media -------------------------------------------------------------------------- */ .cl .image-overlay { z-index: 1; background-color: #00000040; position: absolute; inset: 0; } .cl .image-overlay.is-dark { background-color: #2b1d1061; } .cl .image-overlay.is-gradient { background-image: linear-gradient(84deg, var(--cl-ink-50), #08080800); } .cl .image_cover-absolute { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0; } .cl .icon-1x1-xsmall { width: 1rem; height: 1rem; } .cl .icon-1x1-small { width: 2rem; height: 2rem; } .cl .social-icon { width: 1.3rem; height: 1.3rem; flex: none; flex-direction: column; justify-content: center; align-items: center; display: flex; } /* -------------------------------------------------------------------------- Breakpoints. Webflow uses three: 991, 767, 479. Spacing only needs the changed value redeclared, because the all-round and direction rules both read --cl-space at use time. -------------------------------------------------------------------------- */ @media screen and (max-width: 991px) { .cl .margin-large { --cl-space: 2.5rem; } .cl .margin-xlarge { --cl-space: 3.5rem; } .cl .margin-xxlarge { --cl-space: 4.5rem; } .cl .margin-huge { --cl-space: 5rem; } .cl .margin-xhuge { --cl-space: 6rem; } .cl .margin-xxhuge { --cl-space: 7.5rem; } .cl .padding-large { --cl-space: 2.5rem; } .cl .padding-xlarge { --cl-space: 3.5rem; } .cl .padding-xxlarge { --cl-space: 4.5rem; } .cl .padding-huge { --cl-space: 5rem; } .cl .padding-xhuge { --cl-space: 6rem; } .cl .padding-xxhuge { --cl-space: 7.5rem; } .cl .is-tablet-tall.padding-vertical.padding-xhuge { text-align: center; padding-top: 8rem; padding-bottom: 8rem; } .cl .heading-xlarge { font-size: 5rem; } .cl .heading-large { font-size: 2.25rem; } .cl .heading-medium { font-size: 1.75rem; } } @media screen and (max-width: 767px) { .cl .pre-heading { font-size: .8rem; } .cl .margin-xsmall { --cl-space: .75rem; } .cl .margin-small { --cl-space: 1.25rem; } .cl .margin-medium { --cl-space: 1.5rem; } .cl .margin-large { --cl-space: 2rem; } .cl .margin-xlarge { --cl-space: 2.5rem; } .cl .margin-xxlarge { --cl-space: 3rem; } .cl .margin-huge { --cl-space: 3.5rem; } .cl .margin-xhuge { --cl-space: 4rem; } .cl .margin-xxhuge { --cl-space: 5rem; } .cl .padding-xsmall { --cl-space: .75rem; } .cl .padding-small { --cl-space: 1.25rem; } .cl .padding-medium { --cl-space: 1.5rem; } .cl .padding-large { --cl-space: 2rem; } .cl .padding-xlarge { --cl-space: 2.5rem; } .cl .padding-xxlarge { --cl-space: 3rem; } .cl .padding-huge { --cl-space: 3.5rem; } .cl .padding-xhuge { --cl-space: 4rem; } .cl .padding-xxhuge { --cl-space: 5rem; } .cl .is-tablet-tall.padding-vertical.padding-xhuge { text-align: left; padding-bottom: 4rem; } .cl .heading-xlarge { font-size: 3.5rem; } .cl .heading-large { font-size: 2rem; } .cl .heading-medium { font-size: 1.5rem; line-height: 1.4; } .cl .heading-small { font-size: 1.25rem; } .cl .heading-xsmall { font-size: 1.125rem; } .cl .text-size-large { font-size: 1.125rem; line-height: 1.35; } .cl .text-size-medium { font-size: 1rem; } .cl .text-lead, .cl .text-lead.is-large { font-size: 1.6rem; } } @media screen and (max-width: 479px) { .cl .is-tablet-tall.padding-vertical.padding-xhuge { padding-top: 3rem; padding-bottom: 3rem; } /* the export's 2.7 / 2.5 read too big on a phone (client, 2026-08-25) */ .cl .heading-xlarge { font-size: 2.4rem; } .cl .heading-xlarge.is-compact { font-size: 2.2rem; } .cl .heading-large { font-size: 1.8rem; line-height: 1.3; } .cl .heading-medium { line-height: 1.2; } .cl .text-lead { font-size: 1.3rem; line-height: 1.3; } .cl .text-lead.is-large { font-size: 1.125rem; } .cl .button, .cl .button-secondary { min-width: 14.5rem; } .cl .button-row { flex-direction: column; align-items: stretch; } .cl .button-row.is-button-row-center { align-items: center; } } /* -------------------------------------------------------------------------- Product card and grid, shared by the carousel, collection pages and any product rail. Card geometry matches .product_image-wrapper in the export: a pumice aspect box at 67%. -------------------------------------------------------------------------- */ .cl .cl-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; } .cl .cl-card__image { background-color: var(--cl-pumice); width: 100%; padding-top: 67%; position: relative; overflow: hidden; margin-bottom: 1rem; display: block; } .cl .cl-card__image img { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0; transition: transform .4s ease; } .cl .cl-card:hover .cl-card__image img { transform: scale(1.03); } .cl .cl-card__badge { position: absolute; top: .75rem; left: .75rem; z-index: 1; background: var(--cl-cocoa); color: var(--cl-white); font-size: .75rem; letter-spacing: .5px; text-transform: uppercase; padding: .25rem .6rem; border-radius: 100px; } .cl .cl-card__badge.is-muted { background: #00000066; } .cl .cl-card__body { display: flex; flex-direction: column; row-gap: .25rem; } .cl .cl-card__price s { margin-left: .4rem; } .cl .cl-grid { display: grid; grid-template-columns: repeat(var(--cl-grid-cols, 3), 1fr); column-gap: 1.5rem; row-gap: 4rem; } .cl .cl-skip-link { position: absolute; left: -9999px; top: 0; background: var(--cl-white); color: var(--cl-cocoa); padding: .75rem 1.25rem; z-index: 2000; } .cl .cl-skip-link:focus { left: 0; } @media screen and (max-width: 991px) { .cl .cl-grid { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; } } @media screen and (max-width: 767px) { .cl .cl-grid { grid-template-columns: 1fr; column-gap: 1.25rem; row-gap: 3rem; } } @media (prefers-reduced-motion: reduce) { .cl .cl-card__image img { transition: none; } } /* -------------------------------------------------------------------------- Rich text. Renders page bodies, article bodies, product descriptions and FAQ answers, i.e. everything coming across from the Webflow CMS. -------------------------------------------------------------------------- */ .cl .cl-richtext > *:first-child { margin-top: 0; } .cl .cl-richtext > *:last-child { margin-bottom: 0; } .cl .cl-richtext p { margin: 0 0 1rem; } .cl .cl-richtext h2 { font-family: var(--cl-font-heading); font-size: 2.25rem; font-weight: 400; line-height: 1.2; margin: 2.5rem 0 1rem; } .cl .cl-richtext h3 { font-family: var(--cl-font-heading); font-size: 1.5rem; font-weight: 400; line-height: 1.3; margin: 2rem 0 .75rem; } .cl .cl-richtext h4 { font-size: 1.125rem; font-weight: 600; margin: 1.5rem 0 .5rem; } .cl .cl-richtext h5, .cl .cl-richtext h6 { margin: 1.25rem 0 1rem; } /* .text-rich-text h5, h6 */ .cl .cl-richtext ul, .cl .cl-richtext ol { margin: 0 0 1rem; padding-left: 1.5rem; } .cl .cl-richtext li { margin-bottom: .4rem; } .cl .cl-richtext a { color: inherit; text-decoration: underline; text-underline-offset: .15em; } .cl .cl-richtext img { height: auto; margin: 1.5rem 0; } .cl .cl-richtext blockquote { margin: 1.5rem 0; } .cl .cl-richtext table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; } .cl .cl-richtext th, .cl .cl-richtext td { border-bottom: 1px solid #00000026; padding: .6rem .5rem; text-align: left; } .cl .cl-richtext figure { margin: 1.5rem 0; } .cl .cl-richtext figcaption { font-size: .875rem; opacity: .8; border-left: 2px solid var(--cl-cocoa); padding-left: .5rem; margin-top: .5rem; } /* wide content must scroll inside itself, never the page */ .cl .cl-richtext table, .cl .cl-richtext pre { display: block; overflow-x: auto; max-width: 100%; } /* A heading that carries .text-align-center is centred, whatever the section's own heading rule says (the Webflow export lost this to source order in three sections; client, 2026-08-25). */ .cl .heading-large.text-align-center, .cl .heading-medium.text-align-center, .cl .heading-xlarge.text-align-center { text-align: center; } /* ========================================================================== Round eighteen: fields (2026-08-27, Sauna-Finder item 7) The validation pattern every form in the theme can adopt; the quiz's lead form is the first. Behaviour and markup are documented in snippets/cl-validate.liquid, which carries the script. In short: a field is neutral until it has been focused, filled and blurred; then a green check for a valid value, a red X plus an error line for an invalid one; and from that first register on it re-validates on every keystroke. Ported from neverover's Form/Input register (ValidatedInput.tsx): the 1.5px state ring is an inset shadow because Chromium floors fractional border widths, the glyph sits in an 18px trailing slot inside the field, the message row sits under it. Colours are the theme's: cocoa for focus, dark red for the error, --cl-valid for the check. .cl-field the wrapper; takes .is-valid / .is-invalid .cl-field__label the label above .cl-field__control position: relative, holds input + state glyph .cl-field__input the input (or select / textarea) .cl-field__state the glyph slot, one check and one X inside .cl-field__error the message row, hidden until there is a message .cl-field.is-phone a country control before the input (see .cl-phone in cl-quiz.css for the first implementation) ========================================================================== */ .cl .cl-field { display: flex; flex-direction: column; gap: .375rem; min-width: 0; text-align: left; } .cl .cl-field__label { font-size: .8125rem; letter-spacing: .04em; opacity: .8; } .cl .cl-field__control { position: relative; display: flex; align-items: stretch; min-width: 0; } .cl .cl-field__input { appearance: none; width: 100%; min-width: 0; min-height: 3.25rem; padding: .75rem 2.75rem .75rem 1rem; border: 1px solid var(--cl-ink-22); border-radius: .625rem; background: var(--cl-white); color: var(--cl-cocoa); font: inherit; font-size: 1rem; line-height: 1.4; transition: border-color .15s ease, box-shadow .15s ease; } .cl .cl-field__input::placeholder { color: #251f2073; } .cl .cl-field__input:focus { outline: 0; border-color: var(--cl-cocoa); box-shadow: inset 0 0 0 1px var(--cl-cocoa); } .cl .cl-field.is-valid .cl-field__input { border-color: var(--cl-valid); box-shadow: inset 0 0 0 1px var(--cl-valid); } .cl .cl-field.is-invalid .cl-field__input { border-color: var(--cl-dark-red); box-shadow: inset 0 0 0 1px var(--cl-dark-red); } /* the glyph slot: 18px, centred on the field's height, never in the way */ .cl .cl-field__state { position: absolute; right: .875rem; top: 50%; width: 1.125rem; height: 1.125rem; transform: translateY(-50%); pointer-events: none; } .cl .cl-field__state svg { display: none; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cl .cl-field.is-valid .cl-field__state { color: var(--cl-valid); } .cl .cl-field.is-valid .cl-field__state .cl-field__ok { display: block; } .cl .cl-field.is-invalid .cl-field__state { color: var(--cl-dark-red); } .cl .cl-field.is-invalid .cl-field__state .cl-field__bad { display: block; } .cl .cl-field__error { margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--cl-dark-red); } .cl .cl-field__error[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .cl .cl-field__input { transition: none; } } /* cl-campaign-bar.css */ /* ========================================================================== CL Campaign bar. The fixed countdown strip of a sale campaign. No Webflow original. cl-base.css provides .button/.button-small and the page gutter (.page-padding); only the strip, the compact clock and the slide-in are below. Fixed against the viewport, under the nav bar on desktop (--cl-nav-h is the bar's bottom edge, written by cl-nav.js) and at the bottom edge on phones. It never takes layout space, so nothing shifts when it appears; it slides in from behind the nav (or up from the bottom) once the hero is scrolled past. z-index 900 sits under the nav's 1000 so open menus paint over it. ========================================================================== */ .cl-campaign-bar { position: fixed; top: var(--cl-nav-h, 0px); left: 0; right: 0; z-index: 900; transform: translateY(-100%); visibility: hidden; transition: transform .32s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .32s; background-color: var(--cl-night); color: var(--cl-white); box-shadow: 0 1px 0 #ffffff14; } .cl-campaign-bar.is-visible { transform: none; visibility: visible; transition-delay: 0s; } .cl-campaign-bar.is-cocoa { background-color: var(--cl-cocoa); } .cl-campaign-bar.is-zeal { background-color: var(--cl-zeal); } .cl-campaign-bar__inner { display: flex; align-items: center; justify-content: center; column-gap: 1.5rem; row-gap: .5rem; min-height: 3rem; padding-top: .375rem; padding-bottom: .375rem; } /* The line: label · clock · detail, one row, tabular digits so the row does not jitter as the seconds change. The

is reset by `.cl p`, so the margin is restated here at (0,2,0). */ .cl-campaign-bar .cl-campaign-bar__text { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .75rem; row-gap: .125rem; margin: 0; font-size: .875rem; line-height: 1.4; min-width: 0; } .cl-campaign-bar__lead { letter-spacing: .06em; text-transform: uppercase; font-size: .75rem; opacity: .85; } .cl-campaign-bar__clock { font-family: var(--cl-font-heading); font-size: 1.25rem; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; } .cl-campaign-bar__u { font-family: var(--cl-font-body); font-size: .75rem; margin: 0 .5rem 0 .3rem; opacity: .7; } .cl-campaign-bar__sep { opacity: .6; } .cl-campaign-bar__expired { font-family: var(--cl-font-body); font-size: .875rem; } .cl-campaign-bar__clock [hidden] { display: none; } .cl-campaign-bar__detail { opacity: .85; } .cl-campaign-bar__detail::before { content: "·"; margin-right: .75rem; opacity: .6; } /* The button: the base pill at its small size, no 12rem minimum in a 3rem bar. */ .cl-campaign-bar .cl-campaign-bar__cta { min-width: 0; padding: .5rem 1.125rem; font-size: .75rem; letter-spacing: 1px; flex: 0 0 auto; } /* -------------------------------------------------------------------------- Breakpoints, in the build's order: 991, 767, 479. -------------------------------------------------------------------------- */ @media screen and (max-width: 991px) { .cl-campaign-bar__detail { display: none; } } @media screen and (max-width: 767px) { /* Bottom edge on phones: the button lands under the thumb. */ .cl-campaign-bar { top: auto; bottom: 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -1px 0 #ffffff14; } .cl-campaign-bar__inner { justify-content: space-between; column-gap: 1rem; min-height: 3.5rem; } .cl-campaign-bar .cl-campaign-bar__text { flex-direction: column; row-gap: 0; align-items: flex-start; } /* Labels run to 23 characters ("Gratis Rückenlehne noch"). Tighter tracking and a smaller button keep them to two lines at most beside the button at 375px, inside the 3.5rem bar. */ .cl-campaign-bar__lead { font-size: .625rem; letter-spacing: .04em; } .cl-campaign-bar__clock { font-size: 1.125rem; } .cl-campaign-bar .cl-campaign-bar__cta { padding: .5rem .875rem; font-size: .6875rem; letter-spacing: .5px; } } @media (prefers-reduced-motion: reduce) { .cl-campaign-bar { transition: none; } } /* cl-campaign-hero.css */ /* ========================================================================== CL Campaign hero. The phase-switchable campaign hero and its countdown. No Webflow original: the Black Friday pages in reference/webflow/campaigns were 404 on the live site and never ported. Built from cl-base.css primitives; the geometry follows cl-page-hero and cl-hero. cl-base.css already provides: .page-padding, .container-*, .padding-vertical, .padding-*, .button, .image-overlay(.is-dark/.is-gradient), .text-align-*. Only the two layouts, the trust pill, the clock and the on-dark colour flips are below. Round two (2026-09-22): `is-split` puts the artwork beside the copy on a panel in the artwork's own black (--cl-night), the trust widget sits above the kicker, the clock carries a label, and the separate offer line is gone. ========================================================================== */ .cl-campaign-hero { position: relative; background-color: var(--cl-lucid); color: var(--cl-cocoa); overflow: hidden; } .cl-campaign-hero.is-night { background-color: var(--cl-night); color: var(--cl-white); } .cl-campaign-hero.is-cocoa { background-color: var(--cl-cocoa); color: var(--cl-white); } .cl-campaign-hero.is-pumice { background-color: var(--cl-pumice); } .cl-campaign-hero.is-lucidity { background-color: var(--cl-lucidity); } /* -------------------------------------------------------------------------- Split: copy left, artwork right, one row. 46/54: the banners are 16:9 with the cabin dead-centre; at 54% of 1440 the right column is ~780px and cover-cropping the 16:9 into it keeps the towel and its type whole while the empty black to either side is what gets cut. The min-height matches the reference hero (889px at 1440) so the page starts where the other landing pages start. -------------------------------------------------------------------------- */ .cl-campaign-hero.is-split .cl-campaign-hero__grid { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: 54rem; } /* Client, 2026-09-22: the copy panel read as stuffed against the nav. The padding-vertical chain gives the copy its own air (the template sets `huge`, 6rem); this keeps a floor under it so a shorter phase's copy still starts a comfortable way below the bar. */ .cl-campaign-hero.is-split .cl-campaign-hero__copy .padding-vertical { padding-top: max(var(--cl-space, 0px), 5rem); padding-bottom: max(var(--cl-space, 0px), 5rem); } .cl-campaign-hero.is-split .cl-campaign-hero__copy { grid-column: 1; grid-row: 1; display: flex; align-items: center; } .cl-campaign-hero.is-split .cl-campaign-hero__media { grid-column: 2; grid-row: 1; position: relative; min-height: 100%; } .cl-campaign-hero.is-split .cl-campaign-hero__inner { width: 100%; } /* The grid sits in the page's own gutter + container chain (the frame), so its edges line up with every section below. The copy keeps a 3rem gap to the artwork on its inner edge. */ .cl-campaign-hero__frame { position: relative; z-index: 1; } .cl-campaign-hero.is-split .cl-campaign-hero__copy { padding-right: 3rem; } .cl-campaign-hero.is-split .cl-campaign-hero__column { width: 100%; } .cl-campaign-hero.is-split .cl-campaign-hero__content { max-width: 36rem; } .cl-campaign-hero__pic { display: block; width: 100%; height: 100%; } .cl-campaign-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .cl-campaign-hero.is-split .cl-campaign-hero__pic, .cl-campaign-hero.is-split .cl-campaign-hero__media img { position: absolute; inset: 0; } /* -------------------------------------------------------------------------- Cover: the artwork is the background, the copy sits on it (round one's layout, kept for photography that has room for type). -------------------------------------------------------------------------- */ .cl-campaign-hero.is-cover { display: flex; align-items: center; min-height: 52rem; color: var(--cl-white); } .cl-campaign-hero.is-cover .cl-campaign-hero__grid { position: relative; width: 100%; display: flex; align-items: center; min-height: 52rem; } .cl-campaign-hero.is-cover .cl-campaign-hero__media { position: absolute; inset: 0; overflow: hidden; } .cl-campaign-hero.is-cover .cl-campaign-hero__copy { position: relative; z-index: 2; width: 100%; } .cl-campaign-hero.is-cover:not(.has-media) { min-height: 0; display: block; } .cl-campaign-hero.is-cover:not(.has-media) .cl-campaign-hero__grid { min-height: 0; } .cl-campaign-hero.is-cover .cl-campaign-hero__content { max-width: 48rem; } .cl-campaign-hero.is-cover .cl-campaign-hero__content.text-align-center { margin-inline: auto; } /* -------------------------------------------------------------------------- The copy. These are

and

elements, and cl-base.css resets them with `.cl p` (0,1,1). A bare `.cl-campaign-hero__note` is (0,1,0) and loses, so every rule is scoped under the section root, (0,2,0). -------------------------------------------------------------------------- */ /* Trust pill: the homepage hero's treatment (cl-hero.css), so the two heroes read as one system. Three classes deep because cl-trust.css's .cl-trust.is-large loads later. */ .cl-campaign-hero .cl-campaign-hero__trust { display: flex; margin-bottom: 1.5rem; } .cl-campaign-hero .text-align-center .cl-campaign-hero__trust { justify-content: center; } .cl-campaign-hero .cl-campaign-hero__trust .cl-trust.is-large { padding: 0; border: 0; background: none; color: inherit; flex-wrap: nowrap; justify-content: flex-start; column-gap: .625rem; font-size: .875rem; } .cl-campaign-hero .cl-campaign-hero__trust .cl-trust.is-large .cl-trust__avatar { width: 1.75rem; height: 1.75rem; border-width: 1.5px; border-color: #ffffffcc; font-size: .5625rem; } .cl-campaign-hero .cl-campaign-hero__trust .cl-trust.is-large .cl-trust__avatar + .cl-trust__avatar { margin-left: -.55rem; } .cl-campaign-hero .cl-campaign-hero__trust .cl-trust.is-large .cl-trust__stars { column-gap: .1875rem; } .cl-campaign-hero .cl-campaign-hero__trust .cl-trust.is-large .cl-trust__star { width: 1rem; height: 1rem; } .cl-campaign-hero .cl-campaign-hero__trust .cl-trust.is-large .cl-trust__text { white-space: nowrap; } .cl-campaign-hero .cl-campaign-hero__trust a.cl-trust:hover .cl-trust__text { text-decoration: underline; text-underline-offset: .15em; } /* Kicker + chip. Lucid on the dark grounds so it reads as the accent line. */ .cl-campaign-hero .cl-campaign-hero__kicker { display: flex; align-items: center; flex-wrap: wrap; gap: .625rem; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1.25rem; } .cl-campaign-hero.is-night .cl-campaign-hero__kicker, .cl-campaign-hero.is-cocoa .cl-campaign-hero__kicker, .cl-campaign-hero.is-cover .cl-campaign-hero__kicker { color: var(--cl-lucid); } .cl-campaign-hero .text-align-center .cl-campaign-hero__kicker { justify-content: center; } /* The one saturated accent on the page: Zeal, for the VIP tag only. */ .cl-campaign-hero .cl-campaign-hero__chip { display: inline-block; padding: .3rem .6rem .25rem; border-radius: 100px; background-color: var(--cl-zeal); color: var(--cl-white); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; line-height: 1; } /* The headline: the offer itself, the page's one xlarge step. Fluid so a 46% column at 1200 does not wrap a five-word offer onto four lines. */ .cl-campaign-hero .cl-campaign-hero__heading { font-family: var(--cl-font-heading); font-weight: 400; font-size: clamp(2.75rem, 4.4vw, 4.5rem); line-height: 1.06; letter-spacing: -1px; margin: 0 0 1.25rem; } .cl-campaign-hero .cl-campaign-hero__lead { font-size: 1.25rem; line-height: 1.5; margin: 0; max-width: 34rem; } .cl-campaign-hero .text-align-center .cl-campaign-hero__lead { margin-inline: auto; } /* Small print: a step down from body, quiet. */ .cl-campaign-hero .cl-campaign-hero__note { font-size: .875rem; line-height: 1.5; margin: 1.25rem 0 0; opacity: .72; max-width: 34rem; } /* -------------------------------------------------------------------------- The clock. A label saying what it counts, then four fixed-width cells so the row does not jitter as the digits change; tabular digits for the same reason. -------------------------------------------------------------------------- */ .cl-campaign-hero .cl-campaign-hero__timer { margin-top: 2rem; } .cl-campaign-hero .cl-campaign-hero__timer-label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .75rem; opacity: .8; } .cl-campaign-hero .cl-campaign-hero__timer-units { display: flex; column-gap: 2rem; row-gap: 1rem; flex-wrap: wrap; } .cl-campaign-hero .text-align-center .cl-campaign-hero__timer-units { justify-content: center; } .cl-campaign-hero .cl-campaign-hero__unit { display: flex; flex-direction: column; align-items: flex-start; min-width: 4rem; } .cl-campaign-hero .text-align-center .cl-campaign-hero__unit { align-items: center; } .cl-campaign-hero .cl-campaign-hero__num { font-family: var(--cl-font-heading); font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .cl-campaign-hero .cl-campaign-hero__unit-label { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .5rem; opacity: .65; } /* The