/* * SLP landing page CSS. * * Source of truth: this file in the slp-content repo. * npm run push-css sends it to WordPress (no plugin upload needed) * The plugin also bundles it as a fallback until the first push. * * Loaded only on pages using the "SLP Landing Page" template, and in the block editor * when such a page is edited. Selector conventions (the plugin derives the editor CSS from them): * :is(.slp-landing-page, .editor-styles-wrapper) .x shared: page and editor * .slp-landing-page .x page only (one-line rule or own line in a list) * .editor-styles-wrapper ... editor only * Base rules are minimal; everything else is an opt-in block style (is-style-slp-*), * picked in the block editor's Styles panel or set as className in the repo markup. */ /* ===== Base (template) ===== */ /* The theme's top hero is hidden: the page's own H1 and CTA come first. */ .slp-landing-page .top-hero { display: none; } /* Content is full width; top-level blocks get the site's content width via side padding. */ .slp-landing-page .slp-lp-content > *, .editor-styles-wrapper .is-root-container > * { box-sizing: border-box; margin-top: 0; margin-bottom: 0; padding-left: max(24px, calc((100% - 1120px) / 2)); padding-right: max(24px, calc((100% - 1120px) / 2)); } :is(.slp-landing-page, .editor-styles-wrapper) #lomake { scroll-margin-top: 110px; } /* Columns fallback in case the theme doesn't load the core block CSS. */ :is(.slp-landing-page, .editor-styles-wrapper) .wp-block-columns { display: flex; gap: 40px; } :is(.slp-landing-page, .editor-styles-wrapper) .wp-block-column { flex: 1 1 0; min-width: 0; } @media (max-width: 781px) { :is(.slp-landing-page, .editor-styles-wrapper) .wp-block-columns { flex-direction: column; gap: 24px; } } /* ===== Group: bands (full-width colour areas) ===== */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-beige, :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-grey, :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-white { padding-top: 64px; padding-bottom: 64px; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-beige { background: #f5f4f1; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-grey { background: #ededed; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-white { background: #fff; } @media (max-width: 767px) { :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-beige, :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-grey, :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-white { padding: 40px 20px; } } /* ===== Group / column: card ===== */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-card { box-sizing: border-box; background: #fff; border: 1px solid #dedede; border-radius: 10px; padding: 28px; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-card > :last-child { margin-bottom: 0; } @media (max-width: 767px) { :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-card { padding: 20px; } } /* ===== Paragraph ===== */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-eyebrow { color: #b31f29; font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-small { font-size: 14px; color: #555; } /* ===== Buttons ===== */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-primary .wp-block-button__link, :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-secondary .wp-block-button__link { display: inline-block; border: 1px solid #b31f29; border-radius: 4px; font-weight: 700; padding: 1em 2em; text-decoration: none; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-primary .wp-block-button__link { background: #b31f29; color: #fff; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-secondary .wp-block-button__link { background: transparent; color: #b31f29; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-primary .wp-block-button__link:hover, :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-primary .wp-block-button__link:focus { background: #9d1b24; border-color: #9d1b24; color: #fff; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-secondary .wp-block-button__link:hover, :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-secondary .wp-block-button__link:focus { background: #b31f29; color: #fff; } /* ===== Image ===== */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-rounded img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; } @media (max-width: 767px) { :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-rounded img { aspect-ratio: 3 / 2; } } /* Full-width banner: edge to edge (no side padding), height capped on wide screens */ .slp-landing-page .slp-lp-content > .is-style-slp-banner, .editor-styles-wrapper .is-root-container > .is-style-slp-banner { padding-left: 0; padding-right: 0; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-banner { margin: 0; background: #1d1d1b; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-banner img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: cover; object-position: center; } /* ===== Lists ===== */ /* Ticks */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-ticks { list-style: none; padding-left: 0; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-ticks > li { position: relative; padding-left: 28px; margin-bottom: 8px; font-weight: 700; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-ticks > li::before { content: '✓'; position: absolute; left: 0; color: #b31f29; } /* Checklist box */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-checklist { box-sizing: border-box; background: #f5f4f1; border-left: 4px solid #b31f29; padding: 18px 22px 18px 44px; } /* Numbered steps (ordered list): items side by side with red number circles */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-steps { list-style: none; counter-reset: slp-step; display: flex; gap: 40px; padding-left: 0; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-steps > li { counter-increment: slp-step; flex: 1 1 0; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-steps > li::before { content: counter(slp-step); display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; background: #b31f29; color: #fff; border-radius: 50%; font-weight: 700; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-steps > li > strong:first-child { display: block; font-size: 1.25em; margin-bottom: 10px; } @media (max-width: 767px) { :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-steps { flex-direction: column; gap: 24px; } } /* ===== Details: accordion (+/−) ===== */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-accordion { margin: 0; padding: 0; border: 0; border-bottom: 1px solid #dedede; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-accordion > summary { position: relative; display: block; list-style: none; cursor: pointer; font-size: 19px; font-weight: 700; line-height: 1.4; padding: 22px 36px 22px 0; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-accordion > summary::-webkit-details-marker { display: none; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-accordion > summary::after { content: '+'; position: absolute; right: 5px; top: 17px; font-size: 28px; font-weight: 400; color: #b31f29; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-accordion[open] > summary::after { content: '−'; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-accordion > p { margin: 0; padding: 0 28px 22px 0; color: #555; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-accordion > summary:focus-visible { outline: 3px solid #b31f29; outline-offset: 4px; } /* ===== Dark bands (Black Friday look, based on the live BF page colour #1d1d1b) ===== */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-black, :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-dark, :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-dark-alt { padding-top: 64px; padding-bottom: 64px; color: #ededed; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-black { background: #1d1d1b; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-dark { background: #232321; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-band-dark-alt { background: #2a2a28; } @media (max-width: 767px) { :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) { padding: 40px 20px; } } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) :is(h1, h2, h3, h4, summary) { color: #fff; } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) a:not(.wp-block-button__link) { color: #fff; text-underline-offset: 4px; } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-eyebrow { color: #fff; } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-small { color: #bdbdbd; } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-checklist { background: #343432; } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-secondary .wp-block-button__link { border-color: #fff; color: #fff; } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-secondary .wp-block-button__link:hover, :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-secondary .wp-block-button__link:focus { background: #fff; color: #1d1d1b; } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-accordion { border-bottom-color: #484846; } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-accordion > summary::after { color: #ff8089; } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-accordion > p { color: #ccc; } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-accordion > summary:focus-visible { outline-color: #ff8089; } /* Light card on a dark band keeps text dark (e.g. the form card) */ :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-card { color: #202020; color-scheme: light; } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-card :is(h1, h2, h3, h4) { color: #202020; } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-card a:not(.wp-block-button__link) { color: #b31f29; } /* Dark card */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-card-dark { box-sizing: border-box; background: #343432; border: 1px solid #484846; border-radius: 10px; padding: 28px; color: #ededed; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-card-dark :is(h1, h2, h3, h4) { color: #fff; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-card-dark > :last-child { margin-bottom: 0; } @media (max-width: 767px) { :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-card-dark { padding: 20px; } } /* ===== Paragraph: price and saving badge ===== */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-price { font-size: 76px; font-weight: 800; line-height: 1; letter-spacing: -.04em; margin-top: 12px; margin-bottom: 12px; } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-price { color: #fff; } @media (max-width: 767px) { :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-price { font-size: 60px; } } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-badge { display: inline-block; padding: 6px 14px; border-radius: 4px; background: #b31f29; color: #fff; font-weight: 700; } /* ===== Article pages (templates/article_page.html) ===== */ /* Reading column: a top-level group with is-style-slp-article (layout constrained, contentSize 720px). */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-article { padding-top: 56px; padding-bottom: 64px; background: #fff; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-article > * { max-width: 720px; margin-left: auto; margin-right: auto; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-article h2 { font-size: 32px; line-height: 1.25; margin-top: 56px; margin-bottom: 18px; scroll-margin-top: 110px; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-article h3 { font-size: 23px; line-height: 1.3; margin-top: 32px; margin-bottom: 12px; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-article :is(p, ul, ol) { margin-top: 0; margin-bottom: 22px; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-article li { margin-bottom: 6px; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-article .wp-block-image { margin-top: 36px; margin-bottom: 36px; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-article figcaption { margin-top: 8px; font-size: 14px; color: #555; } @media (max-width: 767px) { :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-article { padding: 40px 20px; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-article h2 { font-size: 26px; margin-top: 44px; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-article h3 { font-size: 20px; } } /* Lead paragraph (article intro) */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-lead { font-size: 21px; line-height: 1.55; } @media (max-width: 767px) { :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-lead { font-size: 19px; } } /* Callout box inside the text: summary, inline CTA, campaign note */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-callout { box-sizing: border-box; background: #f5f4f1; border-left: 4px solid #b31f29; border-radius: 0 8px 8px 0; padding: 26px 28px; margin-top: 36px; margin-bottom: 36px; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-callout :is(h2, h3) { font-size: 22px; margin-top: 0; margin-bottom: 10px; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-callout > :last-child { margin-bottom: 0; } :is(.slp-landing-page, .editor-styles-wrapper) :is(.is-style-slp-band-black, .is-style-slp-band-dark, .is-style-slp-band-dark-alt) .is-style-slp-callout { background: #343432; } @media (max-width: 767px) { :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-callout { padding: 20px; } } /* Table of contents (ordered list of #anchor links) */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-toc { box-sizing: border-box; border: 1px solid #dedede; border-radius: 8px; padding: 20px 24px 20px 48px; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-toc > li { margin-bottom: 4px; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-toc a { color: #202020; text-decoration: none; font-weight: 700; } :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-toc a:hover { color: #b31f29; text-decoration: underline; } /* ===== Group: compact Trustmary rating under buttons ===== */ /* Wrap [trustmary_widget id="GBiDJPB1B"] in a group with is-style-slp-rating: adds space above and left-aligns the widget (its own CSS centres the cards and the "Powered by" line; class names are hashed, so the rules target structure). */ :is(.slp-landing-page, .editor-styles-wrapper) .is-style-slp-rating { margin-top: 28px; } .slp-landing-page .is-style-slp-rating [data-trustmary-widget] div:has(> div .tm-source-logo) { justify-content: flex-start !important; } .slp-landing-page .is-style-slp-rating [data-trustmary-widget] div:has(> .tm-powered-by) { padding: 14px 0 0 !important; text-align: left !important; } .slp-landing-page .is-style-slp-rating [data-trustmary-widget] .tm-powered-by { justify-content: flex-start !important; } /* ===== Ninja Forms on landing pages (page only; forms don't render in the editor) ===== */ /* Overrides Ninja Forms' "opinionated" field styles only on landing pages. One rule per line (editor CSS convention). */ .slp-landing-page .nf-form-cont { font-family: allotrope, sans-serif; color: #202020; } .slp-landing-page .nf-form-cont .nf-form-fields-required { font-size: 13px; color: #666; margin-bottom: 12px; } .slp-landing-page .nf-form-cont .nf-field-container { margin-bottom: 18px; } .slp-landing-page .nf-form-cont .nf-field-label label, .slp-landing-page .nf-form-cont .nf-field-label .nf-label-span { font-size: 15px; font-weight: 700; color: #202020; margin-bottom: 6px; } .slp-landing-page .nf-form-cont .nf-form-content input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .slp-landing-page .nf-form-cont .nf-form-content textarea, .slp-landing-page .nf-form-cont .nf-form-content select { box-sizing: border-box; width: 100%; height: auto; min-height: 50px; padding: 12px 15px; background: #fff; border: 1px solid #c8c8c8; border-radius: 4px; box-shadow: none; color: #202020; font-family: inherit; font-size: 16px; line-height: 1.4; } .slp-landing-page .nf-form-cont .nf-form-content textarea { min-height: 120px; } .slp-landing-page .nf-form-cont .nf-form-content input:focus, .slp-landing-page .nf-form-cont .nf-form-content textarea:focus { border-color: #b31f29; outline: 2px solid rgba(179, 31, 41, .25); outline-offset: 0; } .slp-landing-page .nf-form-cont .nf-form-content input::placeholder, .slp-landing-page .nf-form-cont .nf-form-content textarea::placeholder { color: #767676; opacity: 1; } .slp-landing-page .nf-form-cont .list-checkbox-wrap ul, .slp-landing-page .nf-form-cont .list-radio-wrap ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; margin: 0; padding: 0; list-style: none; } .slp-landing-page .nf-form-cont .list-checkbox-wrap li, .slp-landing-page .nf-form-cont .list-radio-wrap li, .slp-landing-page .nf-form-cont .checkbox-wrap .nf-field-element { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 15px; } .slp-landing-page .nf-form-cont input[type="checkbox"], .slp-landing-page .nf-form-cont input[type="radio"] { width: 18px; height: 18px; margin: 3px 0 0; accent-color: #b31f29; flex: 0 0 auto; } .slp-landing-page .nf-form-cont .list-checkbox-wrap li label, .slp-landing-page .nf-form-cont .list-radio-wrap li label, .slp-landing-page .nf-form-cont .checkbox-wrap label { font-size: 15px; font-weight: 400; margin: 0; } .slp-landing-page .nf-form-cont .html-container .nf-field-element, .slp-landing-page .nf-form-cont .html-container .nf-field-element * { font-size: 14px !important; color: #555 !important; font-family: inherit !important; } .slp-landing-page .nf-form-cont .submit-container input[type="button"], .slp-landing-page .nf-form-cont .submit-container input[type="submit"] { width: auto; min-width: 200px; height: auto; padding: 1em 2em; background: #b31f29; border: 1px solid #b31f29; border-radius: 4px; color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; } .slp-landing-page .nf-form-cont .submit-container input[type="button"]:hover, .slp-landing-page .nf-form-cont .submit-container input[type="button"]:focus { background: #9d1b24; border-color: #9d1b24; } .slp-landing-page .nf-form-cont .nf-error-msg, .slp-landing-page .nf-form-cont .nf-error .nf-error-msg { color: #b31f29; font-size: 14px; } .slp-landing-page .nf-form-cont .nf-error .ninja-forms-field { border-color: #b31f29 !important; } .slp-landing-page .nf-form-cont .nf-response-msg { padding: 18px 22px; background: #f5f4f1; border-left: 4px solid #b31f29; font-size: 17px; } @media (max-width: 767px) { .slp-landing-page .nf-form-cont .list-checkbox-wrap ul, .slp-landing-page .nf-form-cont .list-radio-wrap ul { grid-template-columns: 1fr; } } /* ===== Editor only: theme look (the real page gets this from the Digitaali theme) ===== */ .editor-styles-wrapper { font-family: allotrope, sans-serif; font-size: 17px; line-height: 1.7; color: #000; background: #fff; } .editor-styles-wrapper .wp-block { max-width: none; } .editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4 { font-family: allotrope, sans-serif; font-weight: 700; line-height: 1.2; margin-top: 0; margin-bottom: 34px; color: #000; } .editor-styles-wrapper h1 { font-size: 51px; } .editor-styles-wrapper h2 { font-size: 40.8px; } .editor-styles-wrapper h3 { font-size: 35.7px; } .editor-styles-wrapper p { margin-top: 0; margin-bottom: 34px; } .editor-styles-wrapper a { color: #b31f29; }