/** * Coffeeness new category pages (the 9 main product categories). * * Ported from the approved kategorie-*.html mockups in * "HTML Templates/Category templates/". All component styles are scoped under * `.cn-cat` so the generic class names (.section, .wrap, .stars, .pc, .vz-hero, * .kva-*, .faq-*, ...) never leak into the rest of the site or collide with * Astra / WooCommerce. The :root design tokens (--dark, --text, ...) are already * defined globally by css/header.css; only --font-head is added here. * * Markup: taxonomy-product_cat-*.php -> template-parts/category/content-*.php * Behaviour: js/category.js | Enqueued in functions.php (child_enqueue_styles). */ .cn-cat{ --font-head:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:#f9f9f9; color:var(--text); font-family:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased; /* Astra sets a large base line-height (~1.65) on that inherits into every element without its own. The mockups relied on the browser default (normal ~1.2), so without this reset badges/pills/buttons render taller than the design. */ line-height:normal; } .cn-cat *{box-sizing:border-box;} .cn-cat a{color:inherit;text-decoration:none;} .cn-cat img{max-width:100%;} /* ===== Browser-default typography restoration ===== The mockups style bare editorial elements (h3, p, ul, ...) only via inline styles and rely on BROWSER default margins/sizes/weights for the rest. In WordPress, the force-prepended Bootstrap reboot (enqueue_my_styles) and Astra reset those to much tighter values (headings: margin-top 0, margin-bottom .5rem, font-weight 500, line-height 1.2; p: margin-top 0), collapsing the editorial spacing below headings. Restore the UA defaults inside the scope; the component rules below are more specific and keep winning wherever they define their own margins/sizes. */ .cn-cat h1{font-size:2em;margin:.67em 0;font-weight:bold;line-height:normal;} .cn-cat h2{font-size:1.5em;margin:.83em 0;font-weight:bold;line-height:normal;} .cn-cat h3{font-size:1.17em;margin:1em 0;font-weight:bold;line-height:normal;} .cn-cat h4{font-size:1em;margin:1.33em 0;font-weight:bold;line-height:normal;} .cn-cat h5{font-size:.83em;margin:1.67em 0;font-weight:bold;line-height:normal;} .cn-cat h6{font-size:.67em;margin:2.33em 0;font-weight:bold;line-height:normal;} .cn-cat p{margin:1em 0;} .cn-cat ul,.cn-cat ol{margin:1em 0;padding-left:40px;} /* Astra styles input[type="text"]/button globally (line-height, min-height, letter-spacing, text-transform). The mockup form/button sizing relied on browser defaults for exactly those properties, so neutralize them in the scope; this stylesheet loads after Astra's, so the equal-specificity tie goes to these rules. Component rules below stay more specific. */ .cn-cat input,.cn-cat textarea{line-height:normal;min-height:0;box-shadow:none;} .cn-cat button{line-height:normal;min-height:0;text-transform:none;letter-spacing:normal;} /* ===== Hero (creme variant - every mockup overrides the image hero) ===== The mockups' page style blocks come in two variants; the FAQ pages (kaffeevollautomaten, filterkaffee, siebtraeger) use a narrower inner + larger h1 clamp - expressed as .cn-cat--* modifiers below. */ .cn-cat .vz-hero{background:#efecea;padding:64px 0 56px;text-align:center;} .cn-cat .vz-hero-inner{max-width:780px;margin:0 auto;text-align:center;} .cn-cat .vz-hero h1{font-family:var(--font-head);font-weight:700;font-size:clamp(2rem,3.2vw,2.7rem);line-height:1.12;letter-spacing:-.015em;color:#032936;margin:0 0 14px;} .cn-cat .vz-hero p{font-size:1.1rem;line-height:1.6;color:#032936;max-width:56ch;margin:0 auto;} .cn-cat .vz-hero-facts{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:22px 0 0;padding:0;} .cn-cat .vz-hero-facts li{display:flex;align-items:center;gap:8px;font-size:1.04rem;font-weight:600;color:#032936;} .cn-cat .vz-hero-facts svg{width:16px;height:16px;stroke:#21a54d;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;} .cn-cat--kaffeevollautomaten .vz-hero-inner, .cn-cat--filter .vz-hero-inner, .cn-cat--siebtraeger .vz-hero-inner{max-width:640px;} .cn-cat--kaffeevollautomaten .vz-hero h1, .cn-cat--filter .vz-hero h1, .cn-cat--siebtraeger .vz-hero h1{font-size:clamp(2rem,3.4vw,3rem);} /* ===== Components (extracted from the mockup style blocks) ===== */ .cn-cat .wrap{max-width:1480px;margin:0 auto;padding:0 24px;} .cn-cat .section{padding:62px 0 70px;} .cn-cat .section-head{text-align:center;max-width:680px;margin:0 auto 36px;padding:0 20px;} .cn-cat .section-title{font-family:var(--font-head);font-weight:700;font-size:2.25rem;line-height:1.1;color:var(--dark);margin:0 0 10px;} .cn-cat .section-sub{font-size:1.04rem;color:#9E9E9E;margin:0;} .cn-cat .pc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .cn-cat .pc{background:#fff;border:1px solid #efecea;border-radius:14px;overflow:hidden;display:flex;flex-direction:column; text-decoration:none;color:var(--text);transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;} .cn-cat .pc:hover{box-shadow:0 14px 30px rgba(3,41,54,.10);border-color:#e3ddd6;} .cn-cat .pc-imgwrap{position:relative;aspect-ratio:1/1;background:#efecea;} .cn-cat .pc-imgwrap img{width:100%;height:100%;object-fit:cover;display:block;} .cn-cat .pc-badge{position:absolute;top:11px;left:11px;background:#285bb8;color:#fff;font-size:.7rem;font-weight:700; letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:30px;} .cn-cat .pc-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1;} .cn-cat .pc-rating{display:flex;align-items:center;gap:6px;} .cn-cat .stars{position:relative;display:inline-block;font-size:15px;line-height:1;letter-spacing:1px;font-family:Arial,sans-serif;} .cn-cat .stars::before{content:"\2605\2605\2605\2605\2605";color:#9E9E9E;} .cn-cat .stars .fill{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:#FFBB1E;} .cn-cat .stars .fill::before{content:"\2605\2605\2605\2605\2605";} .cn-cat .pc-rnum{font-weight:700;font-size:.92rem;color:var(--dark);} .cn-cat .pc-rcount{font-size:.85rem;color:#9E9E9E;} .cn-cat .pc-title{font-size:1.3rem;font-weight:700;line-height:1.28;margin:0;color:var(--dark);} .cn-cat .pc-foot{margin-top:auto;display:flex;flex-direction:column;gap:1px;padding-top:4px;} .cn-cat .pc-price{font-size:1.4rem;font-weight:700;color:var(--dark);} .cn-cat .pc-unit{font-size:.8rem;font-weight:600;color:#9E9E9E;} .cn-cat .pc-btn{display:block;text-align:center;background:#285bb8;color:#fff;font-weight:700;font-size:1rem; padding:13px;border-radius:10px;margin-top:13px;transition:background .15s ease;} .cn-cat .pc:hover .pc-btn{background:#284985;} .cn-cat .pc-benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;} .cn-cat .pc-benefits li{display:flex;gap:8px;align-items:flex-start;font-size:1.04rem;line-height:1.45;color:#032936;} .cn-cat .pc-benefits li svg{flex:0 0 auto;width:15px;height:15px;margin-top:2px;stroke:#21a54d;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;} .cn-cat .faq{max-width:820px;margin:0 auto;} .cn-cat .faq-item{border-bottom:1px solid #efecea;} .cn-cat .faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:20px 2px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:1.08rem;font-weight:600;color:#032936;font-family:inherit;} .cn-cat .faq-q .faq-ic{flex:0 0 auto;width:22px;height:22px;stroke:#285bb8;fill:none;stroke-width:2.4;stroke-linecap:round;transition:transform .25s ease;} .cn-cat .faq-item.open .faq-q .faq-ic{transform:rotate(45deg);} .cn-cat .faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;} .cn-cat .faq-a-inner{padding:0 2px 20px;color:#032936;line-height:1.6;font-size:1.04rem;} .cn-cat .abo-final{background:#efecea;padding:60px 0;text-align:center;} .cn-cat .abo-final h2{font-family:var(--font-head);font-weight:700;font-size:clamp(1.7rem,2.8vw,2.5rem);margin:0 0 12px;color:#032936;} .cn-cat .abo-final p{color:#032936;margin:0 auto 26px;font-size:1.06rem;max-width:54ch;} .cn-cat .abo-final .f-cta{display:inline-block;background:#285bb8;color:#fff;font-weight:600;font-size:1.06rem;padding:16px 38px;border-radius:10px;text-decoration:none;transition:background .15s ease;} .cn-cat .abo-final .f-cta:hover{background:#284985;} .cn-cat .pc-badge--limit{background:#e05858;color:#fff;} .cn-cat .pc-badge--sale{background:#e05858;font-size:.92rem;padding:7px 15px;top:12px;left:12px;letter-spacing:.02em;} .cn-cat .pc-priceline{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;} .cn-cat .pc-old{color:#9E9E9E;text-decoration:line-through;font-size:1rem;font-weight:600;} .cn-cat .pc-save{display:inline-block;margin-top:3px;font-size:.85rem;color:#21a54d;font-weight:700;} .cn-cat .pc-soldout img{filter:grayscale(.5);opacity:.65;} .cn-cat .pc-soldout .pc-badge{filter:grayscale(.45);opacity:.7;z-index:2;} .cn-cat .pc-soldout-tag{position:absolute;z-index:3;left:50%;bottom:12px;transform:translateX(-50%);background:#032936;color:#fff;font-size:.8rem;font-weight:700;padding:7px 16px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px rgba(3,41,54,.25);} .cn-cat .pc-btn--notify{background:#fff;color:#285bb8;border:1.6px solid #285bb8;} .cn-cat .pc:hover .pc-btn--notify{background:#eef3fb;color:#285bb8;} .cn-cat .com-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} .cn-cat .com-card{background:#fff;border:1px solid #e4dfd9;border-radius:14px;padding:24px 20px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:#032936;transition:box-shadow .2s,transform .2s;} .cn-cat .com-card:hover{box-shadow:0 10px 26px rgba(3,41,54,.09);transform:translateY(-2px);} .cn-cat .com-ic{width:44px;height:44px;border-radius:50%;background:#eef3fb;display:flex;align-items:center;justify-content:center;} .cn-cat .com-ic svg{width:22px;height:22px;stroke:#285bb8;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} .cn-cat .com-quote{margin:0;font-size:1.04rem;line-height:1.55;color:#3a4650;flex:1;} .cn-cat .com-link{font-weight:700;font-size:.9rem;color:#285bb8;} .cn-cat .kva-minilist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;} .cn-cat .kva-minilist li{display:flex;gap:9px;font-size:1.04rem;line-height:1.55;color:#032936;} .cn-cat .kva-minilist a{color:#285bb8;font-weight:600;} .cn-cat .kva-statchips{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 16px;} .cn-cat .kva-statchip{background:#fff;border:1px solid #e4dfd9;border-radius:12px;padding:12px 18px;text-align:center;} .cn-cat .kva-statchip b{display:block;font-family:var(--font-head);font-weight:700;font-size:1.3rem;color:#032936;line-height:1.1;} .cn-cat .kva-statchip span{font-size:.8rem;color:#57606a;} .cn-cat .kva-split{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:44px;align-items:center;max-width:1100px;margin:0 auto;} .cn-cat .kva-split.rev{grid-template-columns:1fr minmax(280px,420px);} .cn-cat .kva-split.rev .kva-split-img{order:2;} .cn-cat .kva-split-img img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;box-shadow:0 14px 30px rgba(3,41,54,.12);} .cn-cat .kva-split-img.wide img{aspect-ratio:3/2;} .cn-cat .kva-split-text h2{font-family:var(--font-head);font-weight:700;font-size:1.7rem;color:#032936;margin:0 0 14px;line-height:1.25;} .cn-cat .kva-split-text h3{font-size:1.15rem;font-weight:700;color:#032936;margin:22px 0 10px;} .cn-cat .kva-split-text p{font-size:1.04rem;line-height:1.7;color:#032936;margin:0 0 12px;} .cn-cat .kva-split-text a{color:#285bb8;font-weight:600;text-decoration:underline;text-underline-offset:2px;} .cn-cat .kva-checklist{list-style:none;margin:26px auto 0;padding:0;max-width:820px;display:flex;flex-direction:column;gap:14px;} .cn-cat .kva-checklist li{display:flex;gap:14px;background:#fff;border:1px solid #efecea;border-radius:12px;padding:16px 18px;} .cn-cat .kva-checklist svg{width:22px;height:22px;stroke:#21a54d;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;margin-top:2px;} .cn-cat .kva-checklist strong{color:#032936;} .cn-cat .kva-checklist span{font-size:1.04rem;line-height:1.6;color:#032936;} .cn-cat .kva-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:820px;margin:26px auto 0;} .cn-cat .kva-feature-card{background:#fff;border:1px solid #efecea;border-radius:12px;padding:18px 20px;} .cn-cat .kva-feature-card h4{margin:0 0 6px;font-size:1rem;font-weight:700;color:#032936;} .cn-cat .kva-feature-card p{margin:0;font-size:1.04rem;line-height:1.55;color:#9E9E9E;} .cn-cat .kva-quote{max-width:720px;margin:26px auto;padding:24px 28px;background:#efecea;border-radius:14px;border-left:4px solid #285bb8;} .cn-cat .kva-quote p{margin:0;font-size:1.1rem;line-height:1.6;color:#032936;font-style:italic;} .cn-cat .kva-quote cite{display:block;margin-top:10px;font-size:.85rem;font-style:normal;font-weight:600;color:#9E9E9E;} .cn-cat .kva-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:26px auto 0;} .cn-cat .kva-pillar{text-align:center;padding:8px;} .cn-cat .kva-pillar-num{width:40px;height:40px;border-radius:50%;background:#285bb8;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 12px;} .cn-cat .kva-pillar h4{margin:0 0 8px;font-size:1.02rem;font-weight:700;color:#032936;} .cn-cat .kva-pillar p{margin:0;font-size:1.04rem;line-height:1.6;color:#9E9E9E;} .cn-cat .kva-compare{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:900px;margin:26px auto 0;} .cn-cat .kva-compare-card{background:#fff;border:1px solid #efecea;border-radius:12px;padding:18px 20px;} .cn-cat .kva-compare-card h4{margin:0 0 6px;font-size:.98rem;font-weight:700;color:#285bb8;} .cn-cat .kva-compare-card p{margin:0;font-size:1.04rem;line-height:1.55;color:#032936;} .cn-cat .kva-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1100px;margin:26px auto 0;} .cn-cat .kva-step{background:#fff;border-radius:14px;padding:22px 18px;text-align:center;} .cn-cat .kva-step-num{width:34px;height:34px;border-radius:50%;background:#efecea;color:#032936;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;} .cn-cat .kva-step h4{margin:0 0 8px;font-size:.98rem;font-weight:700;color:#032936;} .cn-cat .kva-step p{margin:0;font-size:1.04rem;line-height:1.55;color:#9E9E9E;} .cn-cat .kva-fix-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:900px;margin:26px auto 0;} .cn-cat .kva-fix-card{background:#fff;border:1px solid #efecea;border-radius:12px;padding:18px 20px;} .cn-cat .kva-fix-card .problem{display:flex;align-items:center;gap:8px;font-weight:700;color:#e05858;font-size:.95rem;margin-bottom:6px;} .cn-cat .kva-fix-card .problem svg{width:16px;height:16px;stroke:#e05858;fill:none;stroke-width:2.4;flex:0 0 auto;} .cn-cat .kva-fix-card p{margin:0;font-size:1.04rem;line-height:1.55;color:#032936;} .cn-cat .kva-origin-intro{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:18px 0 30px;padding:0;} .cn-cat .kva-origin-intro li{display:flex;align-items:center;gap:8px;font-size:1.04rem;font-weight:600;color:#032936;} .cn-cat .kva-origin-intro svg{width:16px;height:16px;stroke:#21a54d;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;} .cn-cat .kva-origin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto;} .cn-cat .kva-origin-card{background:#fff;border:1px solid #efecea;border-radius:14px;padding:22px 20px;} .cn-cat .kva-origin-card h4{margin:0 0 10px;font-size:1.02rem;font-weight:700;color:#032936;} .cn-cat .kva-origin-card p{margin:0;font-size:1.04rem;line-height:1.6;color:#032936;} .cn-cat .kva-esf{background:#fff;border:1px solid #e4dfd9;border-left:4px solid #c08f6e;border-radius:12px;padding:20px 22px;margin:20px 0;} .cn-cat .pc-imgwrap.pc-noimg{display:flex;align-items:center;justify-content:center;} .cn-cat .pc-imgwrap.pc-noimg::after{content:attr(data-label);font-family:var(--font-head);font-weight:700;color:#c08f6e;font-size:1.1rem;text-align:center;line-height:1.3;padding:22px;} .cn-cat .st-notify{background:#032936;border-radius:18px;padding:44px 40px;color:#fff;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;} .cn-cat .st-notify h2{font-size:1.7rem;font-weight:800;margin:0 0 14px;line-height:1.2;color:#fff;} .cn-cat .st-notify p{line-height:1.7;font-size:1.04rem;color:#e5ebee;margin:0 0 10px;} .cn-cat .st-notify .st-soon{display:inline-flex;align-items:center;gap:7px;background:#285bb8;color:#fff;font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:6px;letter-spacing:.02em;margin-bottom:18px;} .cn-cat .st-notify .st-soon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;} .cn-cat .st-notify .st-bonus{font-size:.94rem;color:#c08f6e;font-weight:600;} .cn-cat .st-form{background:#fff;border-radius:14px;padding:26px 24px;} .cn-cat .st-form label{display:block;font-size:.82rem;font-weight:600;color:#032936;margin:0 0 5px;} .cn-cat .st-form input{width:100%;height:auto;border:1px solid #e0ddd9;background:#efecea;border-radius:20px;padding:.7rem 1.1em;font-size:.95rem;font-family:inherit;color:#032936;outline:none;margin-bottom:16px;} .cn-cat .st-form input:focus{border-color:#285bb8;} .cn-cat .st-form button{width:100%;border:none;background:#285bb8;color:#fff;font-family:inherit;font-size:1rem;font-weight:700;padding:.85rem 1rem;border-radius:22px;cursor:pointer;transition:background .15s ease;} .cn-cat .st-form button:hover{background:#284985;} .cn-cat .st-form .st-hint{font-size:.76rem;color:#8a8a8a;text-align:center;margin:12px 0 0;line-height:1.5;} /* ===== WPForms notify form inside .st-form (siebtraeger, [wpforms id=350386]) ===== The mockup's static fields were replaced by the live WPForms form (FunnelKit- connected). WPForms drives field/button sizing and colors via CSS custom properties it defines on #wpforms-350386 (ID specificity), so redefine them ID-qualified to the mockup's .st-form design; the structural rules below undo the WPForms container chrome and the child style.css .wpforms-* globals (which use !important), and stack the 50/50 name/email layout to match the mockup's single-column card. */ .cn-cat .st-form #wpforms-350386{ --wpforms-background-color:transparent; --wpforms-container-padding:0px; --wpforms-container-border-style:none; --wpforms-container-shadow-size-box-shadow:none; --wpforms-field-background-color:#efecea; --wpforms-field-border-color:#e0ddd9; --wpforms-field-border-size:1px; --wpforms-field-border-radius:20px; --wpforms-field-text-color:#032936; --wpforms-field-size-input-height:42px; --wpforms-field-size-padding-h:17px; --wpforms-field-size-font-size:15px; --wpforms-field-size-input-spacing:5px; --wpforms-label-color:#032936; --wpforms-label-size-font-size:13px; --wpforms-button-background-color:#285bb8; --wpforms-button-background-color-alt:#285bb8; --wpforms-button-text-color:#fff; --wpforms-button-border-radius:22px; --wpforms-button-border-style:none; --wpforms-button-size-height:44px; --wpforms-button-size-font-size:16px; --wpforms-button-size-padding-h:15px; --wpforms-button-size-margin-top:0px; } .cn-cat .st-form div.wpforms-container-full:not(:empty){margin:0 !important;padding:0 !important;border:0 !important;box-shadow:none !important;background:transparent !important;} .cn-cat .st-form .wpforms-form{border:0 !important;padding:0 !important;border-radius:0 !important;} /* Stack the 50/50 layout and align field width with the submit button. The selectors mirror the child style.css / WPForms layout rules (which carry !important negative margins and column paddings) at higher specificity. */ .cn-cat .st-form div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-field-layout-columns{flex-direction:column;margin:0 !important;max-width:none;} .cn-cat .st-form div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-layout-column{width:100% !important;padding:0 !important;} .cn-cat .st-form .wpforms-form input.wpforms-field-medium{width:100% !important;max-width:100% !important;} .cn-cat .st-form .wpforms-form input[type="text"], .cn-cat .st-form .wpforms-form input[type="email"]{margin-bottom:16px;height:42px;line-height:normal;} /* Validation errors: hug the field (no top margin), clear 20px before the next field; the erroring input hands its bottom spacing over to the message. */ .cn-cat .st-form .wpforms-form input.wpforms-error{margin-bottom:0;} .cn-cat .st-form .wpforms-form em.wpforms-error{display:block;margin:6px 0 20px !important;font-style:normal;} /* Placeholders: the mockup sets no ::placeholder rule, so it renders the browser default - the field text color (#032936) at 54% alpha. Reproduce that exactly (WPForms' own rule uses 50% opacity, a slightly lighter tone). */ .cn-cat .st-form .wpforms-form input::placeholder{color:rgba(3,41,54,.54);opacity:1;} .cn-cat .st-form .wpforms-field-label{font-weight:600;line-height:normal;} .cn-cat .st-form .wpforms-submit-container{margin-top:0;} .cn-cat .st-form .wpforms-submit-container button[type="submit"]{width:100%;margin-top:0 !important;font-weight:700;transition:background .15s ease;} .cn-cat .st-form .wpforms-submit-container button[type="submit"]:hover, .cn-cat .st-form .wpforms-submit-container button[type="submit"]:active{background:#284985;} .cn-cat .st-form .wpforms-submit-spinner{margin:0 !important;} .cn-cat .brew{max-width:720px;margin:0 auto;background:#efecea;border-radius:16px;padding:30px 34px;} .cn-cat .brew h3{font-size:1.2rem;font-weight:700;color:#032936;margin:0 0 6px;} .cn-cat .brew p.brew-intro{margin:0 0 18px;color:#032936;line-height:1.6;font-size:1.02rem;} .cn-cat .brew ol{margin:0;padding:0;counter-reset:brew;list-style:none;display:flex;flex-direction:column;gap:12px;} .cn-cat .brew li{position:relative;padding-left:44px;color:#032936;line-height:1.6;font-size:1.02rem;counter-increment:brew;} .cn-cat .brew li::before{content:counter(brew);position:absolute;left:0;top:0;width:28px;height:28px;background:#285bb8;color:#fff;border-radius:50%;font-size:.9rem;font-weight:700;display:flex;align-items:center;justify-content:center;} .cn-cat .brew .brew-tip{margin:18px 0 0;font-size:.94rem;color:#5a3b2e;font-weight:600;} /* ===== Responsive ===== */ @media (max-width:1100px){ .cn-cat .pc-grid{grid-template-columns:repeat(3,1fr);} } @media (max-width:720px){ .cn-cat .pc-grid{grid-template-columns:1fr;gap:14px;} .cn-cat .section-title{font-size:1.7rem;} .cn-cat .pc-title{font-size:1.02rem;} } @media (max-width:900px){ .cn-cat .com-grid{grid-template-columns:1fr 1fr;} .cn-cat .kva-steps{grid-template-columns:1fr 1fr;} .cn-cat .kva-origin-grid{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .cn-cat .com-grid{grid-template-columns:1fr;} .cn-cat .kva-steps{grid-template-columns:1fr;} } @media (max-width:820px){ .cn-cat .kva-split, .cn-cat .kva-split.rev{grid-template-columns:1fr;} .cn-cat .kva-split.rev .kva-split-img{order:0;} .cn-cat .kva-pillars{grid-template-columns:1fr;} } @media (max-width:600px){ .cn-cat .kva-feature-grid{grid-template-columns:1fr;} .cn-cat .kva-origin-grid{grid-template-columns:1fr;} } @media (max-width:700px){ .cn-cat .kva-compare{grid-template-columns:1fr;} .cn-cat .kva-fix-grid{grid-template-columns:1fr;} } @media(max-width:820px){ .cn-cat .st-notify{grid-template-columns:1fr;padding:32px 22px;gap:26px;} }