/* * Kutri page CSS — consolidated migration of Spectra Pro page-bound CSS to the child theme. * Phase 0, Task 9.5a + 9.6b + 9.5c (simplify #1: ONE file, ONE safelist concept, ONE verify). * * Sources (exported read-only from live 2026-06-09, raw copies in * research/oma-teema-2026-06/page-css-export/): * 1. _uag_custom_page_level_css postmeta — 11 published ids: * 34723, 35396, 35864, 36081, 36167, 36259, 37421, 39230, 45105, 45219, 45221. * (Drafts 33938 + 41170 intentionally NOT migrated — see impl note.) * Multiply-escaped quote soup (\\\"radio\\\", "..1" artifacts) normalized to * valid input[type="radio"] / input[type="checkbox"] — matches what live renders. * 2. spectra_global_block_styles option — "Testityyli" (posts 33260, 38877) and * "Pyöreä painike" (post 35239) frontendStyles, original selectors preserved. * 3. Responsive-hide classes (Task 9.5c) replacing Spectra UAGHideDesktop/Tab/Mob. * * Scoping rule (L1): every block is either scoped to its page via * body.postid- (single posts/CPTs) / body.page-id- (pages — WordPress * body_class() emits page-id-N for pages, NOT postid-N), or sits in an explicitly * commented SHARED section keyed to .kysely / .gf-container / GF classes. * * RUCSS: handle "kutri-page-css" + .kysely/.gf-container/GF selectors must be in the * WP Rocket remove_unused_css_safelist BEFORE this file ships (plan Task 1). */ /* ========================================================================== * SHARED — .kysely survey container (Gravity Forms inside reusable block 36321) * Used by: page 35864 (opi-tekoalya), page 36167, quiz 36081, quiz 37421. * Selectors only match inside an element with class "kysely" — the converter * keeps className:"kysely" on the core/group (plan Task 9.5a Step 3). * ========================================================================== */ /* Gravity Forms -tekstien muokkaus vain tässä containerissa */ .kysely .gfield_label.gform-field-label { font-size: 1.4rem !important; font-weight: 600; padding-top: 15px; padding-bottom: 10px; } .kysely .gchoice label { position: relative !important; top: -5px !important; } .kysely .gfield_description { font-size: 1.1rem !important; font-weight: 400 !important; line-height: 1.6rem; padding-bottom: 10px; } /* Isommat radiobuttonit Gravity Formsiin vain tässä containerissa */ .kysely .gchoice input[type="radio"] { transform: scale(1) !important; margin-right: 8px !important; } .kysely .gchoice input[type="checkbox"] { width: 1.1rem !important; height: 1.1rem !important; border-radius: 5px !important; margin-right: 8px !important; cursor: pointer !important; } /* Isompi fontti labelille */ .kysely .gchoice label { font-size: 1.1rem !important; line-height: 1.5rem !important; cursor: pointer !important; padding-bottom: 5px; } .kysely .oikein { background-color: #cffaff; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; } .kysely .pinkki { background-color: #F9EFF7; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; } /* ========================================================================== * SHARED — .gf-container Gravity Forms wrapper * Used by: pages 34723, 35396, 45219, 45221 + post 45105 (identical CSS on all five). * Selectors only match inside an element with class "gf-container". * ========================================================================== */ /* Gravity Forms -tekstien muokkaus vain tässä containerissa */ .gf-container .gfield_label.gform-field-label { font-size: 1.2rem !important; font-weight: 600; padding-top: 10px; } .gf-container .gfield_description { font-size: 1rem !important; font-weight: 400 !important; line-height: 1.2rem; } /* Isommat radiobuttonit Gravity Formsiin vain tässä containerissa */ .gf-container .gchoice input[type="radio"] { transform: scale(1.5) !important; margin-right: 8px !important; } /* Isompi fontti labelille */ .gf-container .gchoice label { font-size: 1.2rem !important; line-height: 2rem !important; cursor: pointer !important; } .gf-container .oikein { background-color: #cffaff; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; } .gf-container .pinkki { background-color: #F9EFF7; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; } /* ========================================================================== * SCOPED — LearnDash quiz styling (quizzes 36081 + 37421, identical source CSS) * sfwd-quiz singles get body.postid-. * NOTE (pre-existing on live, preserved as-is): appearance:none removes the * native checked-indicator; no :checked rule existed in the source either. * ========================================================================== */ /* Isommat radio-buttonit */ body.postid-36081 .wpProQuiz_questionInput[type="radio"], body.postid-37421 .wpProQuiz_questionInput[type="radio"] { width: 18px !important; height: 18px !important; min-width: 16px !important; min-height: 16px !important; margin-right: 10px !important; cursor: pointer; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; border: 2px solid #00a2e8 !important; border-radius: 50% !important; } /* Isommat checkboxit */ body.postid-36081 .wpProQuiz_questionInput[type="checkbox"], body.postid-37421 .wpProQuiz_questionInput[type="checkbox"] { width: 18px !important; height: 18px !important; min-width: 16px !important; min-height: 16px !important; margin-right: 10px !important; cursor: pointer; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; border: 2px solid #00a2e8 !important; border-radius: 4px !important; } /* Pidä kysymysotsikot (legend) boldattuina */ body.postid-36081 .wpProQuiz_question_text, body.postid-36081 legend.wpProQuiz_question_text, body.postid-36081 .learndash-wrapper .wpProQuiz_content .wpProQuiz_question_text, body.postid-36081 .learndash-wrapper .wpProQuiz_content legend.wpProQuiz_question_text, body.postid-37421 .wpProQuiz_question_text, body.postid-37421 legend.wpProQuiz_question_text, body.postid-37421 .learndash-wrapper .wpProQuiz_content .wpProQuiz_question_text, body.postid-37421 .learndash-wrapper .wpProQuiz_content legend.wpProQuiz_question_text { font-weight: 700 !important; } /* Poista boldaus VAIN vastausvaihtoehdoista (label) */ body.postid-36081 .wpProQuiz_questionListItem, body.postid-36081 .wpProQuiz_questionListItem label, body.postid-36081 .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem, body.postid-36081 .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem label, body.postid-36081 .wpProQuiz_questionList label, body.postid-37421 .wpProQuiz_questionListItem, body.postid-37421 .wpProQuiz_questionListItem label, body.postid-37421 .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem, body.postid-37421 .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem label, body.postid-37421 .wpProQuiz_questionList label { font-weight: 400 !important; } /* Poista yleinen boldaus mutta anna legend-elementtien periä oma tyylinsä */ body.postid-36081 .wpProQuiz_content label, body.postid-37421 .wpProQuiz_content label { font-weight: normal !important; } /* ========================================================================== * SCOPED — single-page rules * ========================================================================== */ /* Page 45221 (kysely-mina-onnistun-jasenille): hide newsletter-form description */ body.page-id-45221 .kn-form .kn-form-description { display: none; } /* Page 39230: WooCommerce number input width */ body.page-id-39230 .woocommerce-js input[type="number"] { contain-intrinsic-block-size: auto 300px; max-width: 250px; } /* Product 36259: Smart Coupons credit input width */ body.postid-36259 .wc-sc-input input#credit_called { width: 100% !important; max-width: 150px; } /* ========================================================================== * SHARED — Spectra Global Block Styles (Task 9.6b), original selectors preserved. * "Testityyli" (uagb/container; posts 33260, 38877) and "Pyöreä painike" * (uagb/buttons; post 35239). The spectra-gbs-* class lives in the block's * className and survives uagb→core conversion (className whitelist, simplify #5). * KNOWN LIMIT: compound parts .wp-block-uagb-container / .uagb-* match Spectra * markup; after uagb→core conversion those compounds no longer match — Phase 0 * accepts degraded styling, Phase 1 redesigns (see impl note). * Source: spectra_global_block_styles option frontendStyles, verbatim * (incl. Spectra-generated empty "margin-top: !important" declarations, which * browsers ignore — identical to live behaviour). * ========================================================================== */ /* --- Testityyli --- */ .wp-block-uagb-container.spectra-gbs-testityyli1739439964862 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.spectra-gbs-testityyli1739439964862 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.spectra-gbs-testityyli1739439964862 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.spectra-gbs-testityyli1739439964862 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.spectra-gbs-testityyli1739439964862 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-ed016bd2{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.spectra-gbs-testityyli1739439964862 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 20px;column-gap: 20px;}.wp-block-uagb-container.spectra-gbs-testityyli1739439964862{box-shadow: 0px 0px #00000070 ;padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;margin-top: !important;margin-bottom: !important;overflow: visible;order: initial;border-color: inherit;row-gap: 20px;column-gap: 20px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .spectra-gbs-testityyli1739439964862{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.spectra-gbs-testityyli1739439964862 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.spectra-gbs-testityyli1739439964862{padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;margin-top: !important;margin-bottom: !important;order: initial;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .spectra-gbs-testityyli1739439964862{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.spectra-gbs-testityyli1739439964862 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.spectra-gbs-testityyli1739439964862{padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;margin-top: !important;margin-bottom: !important;order: initial;}} /* --- Pyöreä painike --- */ .spectra-gbs-pyöreä-painike1747744258905.wp-block-uagb-buttons.uagb-buttons__outer-wrap .uagb-buttons__wrap {gap: 10px;}.spectra-gbs-pyöreä-painike1747744258905.uagb-buttons__outer-wrap .uagb-buttons__wrap {justify-content: center;align-items: center;}.spectra-gbs-pyöreä-painike1747744258905 .uagb-buttons-repeater:not(.wp-block-button__link){font-style: normal;font-size: 2em;}.spectra-gbs-pyöreä-painike1747744258905 .uagb-button__wrapper .uagb-buttons-repeater.wp-block-button__link{font-style: normal;font-size: 2em;}.spectra-gbs-pyöreä-painike1747744258905 .uagb-button__wrapper .uagb-buttons-repeater.ast-outline-button{font-style: normal;font-size: 2em;}@media only screen and (max-width: 976px) {.spectra-gbs-pyöreä-painike1747744258905.uagb-buttons__outer-wrap .uagb-buttons__wrap {justify-content: center;align-items: center;}.spectra-gbs-pyöreä-painike1747744258905.uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button{width: auto;}}@media only screen and (max-width: 767px) {.spectra-gbs-pyöreä-painike1747744258905.uagb-buttons__outer-wrap .uagb-buttons__wrap {justify-content: center;align-items: center;}.spectra-gbs-pyöreä-painike1747744258905.uagb-buttons__outer-wrap .uagb-buttons__wrap .wp-block-button{width: auto;}} /* ========================================================================== * SHARED — Responsive hide (Task 9.5c) — replaces Spectra UAGHideDesktop/Tab/Mob. * Breakpoints are Spectra's ACTUAL hide-class breakpoints, live-verified from * UAGB_Block_Helper::get_condition_block_css() (plugin source, 2026-06-09): * desktop hide: (min-width: 1025px) | tablet hide: (min-width: 768px) and * (max-width: 1024px) | mobile hide: (max-width: 767px). * NOTE: these are HARDCODED in Spectra and differ from the styling constants * UAGB_TABLET_BREAKPOINT=976 / UAGB_MOBILE_BREAKPOINT=767 (live-verified). * display:none keeps visual + assistive-technology hiding aligned (a11y #3); * never replace with .sr-only/off-screen. !important matches Spectra's strength. * The converter maps UAGHideDesktop/Tab/Mob -> these classes (page 33260). * ========================================================================== */ @media (min-width: 1025px) { body .kutri-hide-desktop { display: none !important; } } @media (min-width: 768px) and (max-width: 1024px) { body .kutri-hide-tab { display: none !important; } } @media (max-width: 767px) { body .kutri-hide-mob { display: none !important; } } /* ========================================================================== * TT25 PORT NOTE (Phase 7, 2026-06-10): the astra-child "Phase 0: Astra Pro * ports" section was DROPPED from this theme copy: * - Task 12 §2 blog-grid rules (.ast-blog-layout-4-grid / .ast-article-post) * — Astra-only selectors; the TT25 blog grid is rebuilt as a Query Loop * pattern (plan Phase 2.2). * - Task 12 §4 Lexend @font-face fallback (fonts/lexend-v26-latin-400.woff2) * — superseded by the theme.json fontFace loading the variable Lexend * (assets/fonts/lexend-variable.woff2), plan Phase 6. * Everything above is carried verbatim from astra-child/kutri-page-css.css. * Known inert leftover: the Spectra GBS section's compound selector * .uagb-buttons-repeater.ast-outline-button never matches under TT25 — * preserved because the GBS lines are kept verbatim by design (see its header). * ========================================================================== */ /* === TT25 header: Phosphor some-ikonit (2026-06-10, Katrin pyyntö) === Valkoiset ikonit tummalla palkilla, hover/focus vaaleaturkoosi. Fontti self-hosted: assets/fonts/Phosphor.woff2 (vain 4 glyyfiä käytössä). */ @font-face { font-family: "Phosphor"; src: url("../fonts/Phosphor.woff2") format("woff2"); font-display: block; } .kutri-some-linkit { display: flex; gap: 1rem; align-items: center; margin: 0; } .kutri-some-linkit a { color: var(--color-valkoinen, #fff); text-decoration: none; line-height: 1; } .kutri-some-linkit a:hover, .kutri-some-linkit a:focus-visible { color: var(--color-vaaleaturkoosi, #b0f4ff); } .kutri-some-linkit .ph { font-family: "Phosphor"; font-style: normal; font-weight: normal; font-size: 1.5rem; display: inline-block; } .ph.ph-tiktok-logo:before { content: "\eaf2"; } .ph.ph-facebook-logo:before { content: "\e226"; } .ph.ph-instagram-logo:before { content: "\e2d0"; } .ph.ph-youtube-logo:before { content: "\e4fc"; } /* Outline-varianttinapit seuraavat perusnapin kokoa (emoteeman variaatio yliajetaan) */ .wp-block-button[class*="is-style-outline"] .wp-block-button__link { padding: 12px 28px; }