@charset "UTF-8"; :root { /* ─── GP Standard Variables — set via Customizer, NOT written here ─── Source: GeneratePress → Customizer → Global Colors. Confirmed live via the `generate-style-inline-css` block GP injects into (checked against http://localhost/wpxfacets.com/, 2026-07-13). Mirrored in .docs/design-system.md — keep both in sync if these change. --contrast: #1e1e1e primary text; primary button background --contrast-2: #5e5e6b secondary text --contrast-3: #8e8e98 tertiary/muted text --base: #eeeef0 light section background --base-2: #f6f6f8 alternate light section background --base-3: #ffffff white surface / cards --accent: #ff6363 primary accent (coral) — CTAs, gradient start --accent-blue: #56c2ff highlight accent ("most popular", eyebrow) --accent-green: #59d499 positive/success accent --accent-yellow: #ffc531 warning/attention accent --accent-purple: #881dec gradient end --bg-dark: #0a0f1e dark sections only — hero, central CTA, footer Font families (Customizer → Typography, Google Fonts): --gp-font--inter: "Inter" body/UI font, whole site --gp-font--dm-mono: "DM Mono" code/API keys only (see .xkit-code) These were previously *also* hardcoded in _variables.scss (a duplicate source of truth with the Customizer) — removed from there on 2026-07-13 so Customizer stays the only place that sets them. */ /* ─── WP admin bar offset ─── 0 when logged out. When logged in, `body.admin-bar` sets it to the admin bar's real height (WP's own --wp-admin--admin-bar--height var, 32px desktop / 46px mobile — falls back to 32px if that var isn't defined yet at parse time). Used anywhere fixed/sticky/100vh math needs to not be thrown off by the admin bar while logged in — see .xkit-hero height, .gb-site-header.gb-is-sticky top, and the mobile menu overlay in _navigation.scss. */ --site-admin-offset: 0px; --site-header-height: 72px; } body.admin-bar { --site-admin-offset: var(--wp-admin--admin-bar--height, 32px); } .fa-solid, .fa-regular { display: inline-block; width: 1em; height: 1em; background-color: currentColor; mask-repeat: no-repeat; mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .fa-arrow-right { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z'/%3E%3C/svg%3E"); } .fa-magnifying-glass { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'/%3E%3C/svg%3E"); } .fa-filter-circle-xmark { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M382.8 199.1l121.9-146.1C521.1 31.28 506.8 0 479.3 0H32.7C5.213 0-9.965 31.28 7.375 52.19L192 274.8V368c0 7.828 3.812 15.17 10.25 19.66l66.88 46.8C260.7 413.9 256 391.5 256 368C256 288.1 309.6 220.5 382.8 199.1zM432 224C352.5 224 288 288.5 288 368s64.47 144 144 144s144-64.47 144-144S511.5 224 432 224zM488.5 401.9c6.242 6.242 6.252 16.37 .0098 22.62c-6.24 6.242-16.37 6.231-22.62-.0113l-33.91-33.91l-33.91 33.91c-6.242 6.242-16.37 6.253-22.62 .0106s-6.232-16.37 .0098-22.62l33.91-33.91l-33.91-33.91c-6.242-6.242-6.251-16.37-.009-22.62s16.37-6.232 22.62 .0106l33.91 33.91l33.91-33.91c6.242-6.242 16.37-6.254 22.61-.0113s6.233 16.37-.009 22.62l-33.91 33.91L488.5 401.9z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M382.8 199.1l121.9-146.1C521.1 31.28 506.8 0 479.3 0H32.7C5.213 0-9.965 31.28 7.375 52.19L192 274.8V368c0 7.828 3.812 15.17 10.25 19.66l66.88 46.8C260.7 413.9 256 391.5 256 368C256 288.1 309.6 220.5 382.8 199.1zM432 224C352.5 224 288 288.5 288 368s64.47 144 144 144s144-64.47 144-144S511.5 224 432 224zM488.5 401.9c6.242 6.242 6.252 16.37 .0098 22.62c-6.24 6.242-16.37 6.231-22.62-.0113l-33.91-33.91l-33.91 33.91c-6.242 6.242-16.37 6.253-22.62 .0106s-6.232-16.37 .0098-22.62l33.91-33.91l-33.91-33.91c-6.242-6.242-6.251-16.37-.009-22.62s16.37-6.232 22.62 .0106l33.91 33.91l33.91-33.91c6.242-6.242 16.37-6.254 22.61-.0113s6.233 16.37-.009 22.62l-33.91 33.91L488.5 401.9z'/%3E%3C/svg%3E"); } .fa-ban { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM64 256c0-41.4 13.3-79.68 35.68-111.1l267.4 267.4C335.7 434.7 297.4 448 256 448C150.1 448 64 361.9 64 256zM412.3 367.1L144.9 99.68C176.3 77.3 214.6 64 256 64c105.9 0 192 86.13 192 192C448 297.4 434.7 335.7 412.3 367.1z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM64 256c0-41.4 13.3-79.68 35.68-111.1l267.4 267.4C335.7 434.7 297.4 448 256 448C150.1 448 64 361.9 64 256zM412.3 367.1L144.9 99.68C176.3 77.3 214.6 64 256 64c105.9 0 192 86.13 192 192C448 297.4 434.7 335.7 412.3 367.1z'/%3E%3C/svg%3E"); } .fa-code { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M416 31.94C416 21.75 408.1 0 384.1 0c-13.98 0-26.87 9.072-30.89 23.18l-128 448c-.8404 2.935-1.241 5.892-1.241 8.801C223.1 490.3 232 512 256 512c13.92 0 26.73-9.157 30.75-23.22l128-448C415.6 37.81 416 34.85 416 31.94zM176 143.1c0-18.28-14.95-32-32-32c-8.188 0-16.38 3.125-22.62 9.376l-112 112C3.125 239.6 0 247.8 0 255.1S3.125 272.4 9.375 278.6l112 112C127.6 396.9 135.8 399.1 144 399.1c17.05 0 32-13.73 32-32c0-8.188-3.125-16.38-9.375-22.63L77.25 255.1l89.38-89.38C172.9 160.3 176 152.2 176 143.1zM640 255.1c0-8.188-3.125-16.38-9.375-22.63l-112-112C512.4 115.1 504.2 111.1 496 111.1c-17.05 0-32 13.73-32 32c0 8.188 3.125 16.38 9.375 22.63l89.38 89.38l-89.38 89.38C467.1 351.6 464 359.8 464 367.1c0 18.28 14.95 32 32 32c8.188 0 16.38-3.125 22.62-9.376l112-112C636.9 272.4 640 264.2 640 255.1z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M416 31.94C416 21.75 408.1 0 384.1 0c-13.98 0-26.87 9.072-30.89 23.18l-128 448c-.8404 2.935-1.241 5.892-1.241 8.801C223.1 490.3 232 512 256 512c13.92 0 26.73-9.157 30.75-23.22l128-448C415.6 37.81 416 34.85 416 31.94zM176 143.1c0-18.28-14.95-32-32-32c-8.188 0-16.38 3.125-22.62 9.376l-112 112C3.125 239.6 0 247.8 0 255.1S3.125 272.4 9.375 278.6l112 112C127.6 396.9 135.8 399.1 144 399.1c17.05 0 32-13.73 32-32c0-8.188-3.125-16.38-9.375-22.63L77.25 255.1l89.38-89.38C172.9 160.3 176 152.2 176 143.1zM640 255.1c0-8.188-3.125-16.38-9.375-22.63l-112-112C512.4 115.1 504.2 111.1 496 111.1c-17.05 0-32 13.73-32 32c0 8.188 3.125 16.38 9.375 22.63l89.38 89.38l-89.38 89.38C467.1 351.6 464 359.8 464 367.1c0 18.28 14.95 32 32 32c8.188 0 16.38-3.125 22.62-9.376l112-112C636.9 272.4 640 264.2 640 255.1z'/%3E%3C/svg%3E"); } .fa-arrow-down { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z'/%3E%3C/svg%3E"); } .fa-cart-shopping { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M96 0C107.5 0 117.4 8.19 119.6 19.51L121.1 32H541.8C562.1 32 578.3 52.25 572.6 72.66L518.6 264.7C514.7 278.5 502.1 288 487.8 288H170.7L179.9 336H488C501.3 336 512 346.7 512 360C512 373.3 501.3 384 488 384H159.1C148.5 384 138.6 375.8 136.4 364.5L76.14 48H24C10.75 48 0 37.25 0 24C0 10.75 10.75 0 24 0H96zM128 464C128 437.5 149.5 416 176 416C202.5 416 224 437.5 224 464C224 490.5 202.5 512 176 512C149.5 512 128 490.5 128 464zM512 464C512 490.5 490.5 512 464 512C437.5 512 416 490.5 416 464C416 437.5 437.5 416 464 416C490.5 416 512 437.5 512 464z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M96 0C107.5 0 117.4 8.19 119.6 19.51L121.1 32H541.8C562.1 32 578.3 52.25 572.6 72.66L518.6 264.7C514.7 278.5 502.1 288 487.8 288H170.7L179.9 336H488C501.3 336 512 346.7 512 360C512 373.3 501.3 384 488 384H159.1C148.5 384 138.6 375.8 136.4 364.5L76.14 48H24C10.75 48 0 37.25 0 24C0 10.75 10.75 0 24 0H96zM128 464C128 437.5 149.5 416 176 416C202.5 416 224 437.5 224 464C224 490.5 202.5 512 176 512C149.5 512 128 490.5 128 464zM512 464C512 490.5 490.5 512 464 512C437.5 512 416 490.5 416 464C416 437.5 437.5 416 464 416C490.5 416 512 437.5 512 464z'/%3E%3C/svg%3E"); } .fa-store { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M495.5 223.2C491.6 223.7 487.6 224 483.4 224C457.4 224 434.2 212.6 418.3 195C402.4 212.6 379.2 224 353.1 224C327 224 303.8 212.6 287.9 195C272 212.6 248.9 224 222.7 224C196.7 224 173.5 212.6 157.6 195C141.7 212.6 118.5 224 92.36 224C88.3 224 84.21 223.7 80.24 223.2C24.92 215.8-1.255 150.6 28.33 103.8L85.66 13.13C90.76 4.979 99.87 0 109.6 0H466.4C476.1 0 485.2 4.978 490.3 13.13L547.6 103.8C577.3 150.7 551 215.8 495.5 223.2H495.5zM499.7 254.9C503.1 254.4 508 253.6 512 252.6V448C512 483.3 483.3 512 448 512H128C92.66 512 64 483.3 64 448V252.6C67.87 253.6 71.86 254.4 75.97 254.9L76.09 254.9C81.35 255.6 86.83 256 92.36 256C104.8 256 116.8 254.1 128 250.6V384H448V250.7C459.2 254.1 471.1 256 483.4 256C489 256 494.4 255.6 499.7 254.9L499.7 254.9z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M495.5 223.2C491.6 223.7 487.6 224 483.4 224C457.4 224 434.2 212.6 418.3 195C402.4 212.6 379.2 224 353.1 224C327 224 303.8 212.6 287.9 195C272 212.6 248.9 224 222.7 224C196.7 224 173.5 212.6 157.6 195C141.7 212.6 118.5 224 92.36 224C88.3 224 84.21 223.7 80.24 223.2C24.92 215.8-1.255 150.6 28.33 103.8L85.66 13.13C90.76 4.979 99.87 0 109.6 0H466.4C476.1 0 485.2 4.978 490.3 13.13L547.6 103.8C577.3 150.7 551 215.8 495.5 223.2H495.5zM499.7 254.9C503.1 254.4 508 253.6 512 252.6V448C512 483.3 483.3 512 448 512H128C92.66 512 64 483.3 64 448V252.6C67.87 253.6 71.86 254.4 75.97 254.9L76.09 254.9C81.35 255.6 86.83 256 92.36 256C104.8 256 116.8 254.1 128 250.6V384H448V250.7C459.2 254.1 471.1 256 483.4 256C489 256 494.4 255.6 499.7 254.9L499.7 254.9z'/%3E%3C/svg%3E"); } .fa-list { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M88 48C101.3 48 112 58.75 112 72V120C112 133.3 101.3 144 88 144H40C26.75 144 16 133.3 16 120V72C16 58.75 26.75 48 40 48H88zM480 64C497.7 64 512 78.33 512 96C512 113.7 497.7 128 480 128H192C174.3 128 160 113.7 160 96C160 78.33 174.3 64 192 64H480zM480 224C497.7 224 512 238.3 512 256C512 273.7 497.7 288 480 288H192C174.3 288 160 273.7 160 256C160 238.3 174.3 224 192 224H480zM480 384C497.7 384 512 398.3 512 416C512 433.7 497.7 448 480 448H192C174.3 448 160 433.7 160 416C160 398.3 174.3 384 192 384H480zM16 232C16 218.7 26.75 208 40 208H88C101.3 208 112 218.7 112 232V280C112 293.3 101.3 304 88 304H40C26.75 304 16 293.3 16 280V232zM88 368C101.3 368 112 378.7 112 392V440C112 453.3 101.3 464 88 464H40C26.75 464 16 453.3 16 440V392C16 378.7 26.75 368 40 368H88z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M88 48C101.3 48 112 58.75 112 72V120C112 133.3 101.3 144 88 144H40C26.75 144 16 133.3 16 120V72C16 58.75 26.75 48 40 48H88zM480 64C497.7 64 512 78.33 512 96C512 113.7 497.7 128 480 128H192C174.3 128 160 113.7 160 96C160 78.33 174.3 64 192 64H480zM480 224C497.7 224 512 238.3 512 256C512 273.7 497.7 288 480 288H192C174.3 288 160 273.7 160 256C160 238.3 174.3 224 192 224H480zM480 384C497.7 384 512 398.3 512 416C512 433.7 497.7 448 480 448H192C174.3 448 160 433.7 160 416C160 398.3 174.3 384 192 384H480zM16 232C16 218.7 26.75 208 40 208H88C101.3 208 112 218.7 112 232V280C112 293.3 101.3 304 88 304H40C26.75 304 16 293.3 16 280V232zM88 368C101.3 368 112 378.7 112 392V440C112 453.3 101.3 464 88 464H40C26.75 464 16 453.3 16 440V392C16 378.7 26.75 368 40 368H88z'/%3E%3C/svg%3E"); } .fa-newspaper { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M480 32H128C110.3 32 96 46.33 96 64v336C96 408.8 88.84 416 80 416S64 408.8 64 400V96H32C14.33 96 0 110.3 0 128v288c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V64C512 46.33 497.7 32 480 32zM272 416h-96C167.2 416 160 408.8 160 400C160 391.2 167.2 384 176 384h96c8.836 0 16 7.162 16 16C288 408.8 280.8 416 272 416zM272 320h-96C167.2 320 160 312.8 160 304C160 295.2 167.2 288 176 288h96C280.8 288 288 295.2 288 304C288 312.8 280.8 320 272 320zM432 416h-96c-8.836 0-16-7.164-16-16c0-8.838 7.164-16 16-16h96c8.836 0 16 7.162 16 16C448 408.8 440.8 416 432 416zM432 320h-96C327.2 320 320 312.8 320 304C320 295.2 327.2 288 336 288h96C440.8 288 448 295.2 448 304C448 312.8 440.8 320 432 320zM448 208C448 216.8 440.8 224 432 224h-256C167.2 224 160 216.8 160 208v-96C160 103.2 167.2 96 176 96h256C440.8 96 448 103.2 448 112V208z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M480 32H128C110.3 32 96 46.33 96 64v336C96 408.8 88.84 416 80 416S64 408.8 64 400V96H32C14.33 96 0 110.3 0 128v288c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V64C512 46.33 497.7 32 480 32zM272 416h-96C167.2 416 160 408.8 160 400C160 391.2 167.2 384 176 384h96c8.836 0 16 7.162 16 16C288 408.8 280.8 416 272 416zM272 320h-96C167.2 320 160 312.8 160 304C160 295.2 167.2 288 176 288h96C280.8 288 288 295.2 288 304C288 312.8 280.8 320 272 320zM432 416h-96c-8.836 0-16-7.164-16-16c0-8.838 7.164-16 16-16h96c8.836 0 16 7.162 16 16C448 408.8 440.8 416 432 416zM432 320h-96C327.2 320 320 312.8 320 304C320 295.2 327.2 288 336 288h96C440.8 288 448 295.2 448 304C448 312.8 440.8 320 432 320zM448 208C448 216.8 440.8 224 432 224h-256C167.2 224 160 216.8 160 208v-96C160 103.2 167.2 96 176 96h256C440.8 96 448 103.2 448 112V208z'/%3E%3C/svg%3E"); } .fa-brush { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M0 320c0 35.38 28.62 64 64 64h64v64c0 35.38 28.62 64 64 64s64-28.62 64-64v-64h64c35.38 0 64-28.62 64-64V288H0V320zM192 424c13.25 0 24 10.75 24 24s-10.75 24-24 24S168 461.3 168 448S178.8 424 192 424zM352 0h-128l-32 64L160 0H128L96 64L64 0H32C14.38 0 0 14.38 0 32v224h384V32C384 14.38 369.6 0 352 0z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M0 320c0 35.38 28.62 64 64 64h64v64c0 35.38 28.62 64 64 64s64-28.62 64-64v-64h64c35.38 0 64-28.62 64-64V288H0V320zM192 424c13.25 0 24 10.75 24 24s-10.75 24-24 24S168 461.3 168 448S178.8 424 192 424zM352 0h-128l-32 64L160 0H128L96 64L64 0H32C14.38 0 0 14.38 0 32v224h384V32C384 14.38 369.6 0 352 0z'/%3E%3C/svg%3E"); } .fa-xmark { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'/%3E%3C/svg%3E"); } .fa-check { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M480 128c0 8.188-3.125 16.38-9.375 22.62l-256 256C208.4 412.9 200.2 416 192 416s-16.38-3.125-22.62-9.375l-128-128C35.13 272.4 32 264.2 32 256c0-18.28 14.95-32 32-32c8.188 0 16.38 3.125 22.62 9.375L192 338.8l233.4-233.4C431.6 99.13 439.8 96 448 96C465.1 96 480 109.7 480 128z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M480 128c0 8.188-3.125 16.38-9.375 22.62l-256 256C208.4 412.9 200.2 416 192 416s-16.38-3.125-22.62-9.375l-128-128C35.13 272.4 32 264.2 32 256c0-18.28 14.95-32 32-32c8.188 0 16.38 3.125 22.62 9.375L192 338.8l233.4-233.4C431.6 99.13 439.8 96 448 96C465.1 96 480 109.7 480 128z'/%3E%3C/svg%3E"); } .fa-chevron-left { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z'/%3E%3C/svg%3E"); } .fa-chevron-right { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z'/%3E%3C/svg%3E"); } .fa-circle-xmark { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M336.1 175c-9.375-9.375-24.56-9.375-33.94 0L256 222.1L208.1 175c-9.375-9.375-24.56-9.375-33.94 0s-9.375 24.56 0 33.94l47.03 47.03L175 303c-9.375 9.375-9.375 24.56 0 33.94c9.373 9.373 24.56 9.381 33.94 0L256 289.9l47.03 47.03c9.373 9.373 24.56 9.381 33.94 0c9.375-9.375 9.375-24.56 0-33.94l-47.03-47.03l47.03-47.03C346.3 199.6 346.3 184.4 336.1 175zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256S512 397.4 512 256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M336.1 175c-9.375-9.375-24.56-9.375-33.94 0L256 222.1L208.1 175c-9.375-9.375-24.56-9.375-33.94 0s-9.375 24.56 0 33.94l47.03 47.03L175 303c-9.375 9.375-9.375 24.56 0 33.94c9.373 9.373 24.56 9.381 33.94 0L256 289.9l47.03 47.03c9.373 9.373 24.56 9.381 33.94 0c9.375-9.375 9.375-24.56 0-33.94l-47.03-47.03l47.03-47.03C346.3 199.6 346.3 184.4 336.1 175zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256S512 397.4 512 256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464z'/%3E%3C/svg%3E"); } .fa-circle-check { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M335 175L224 286.1L176.1 239c-9.375-9.375-24.56-9.375-33.94 0s-9.375 24.56 0 33.94l64 64C211.7 341.7 217.8 344 224 344s12.28-2.344 16.97-7.031l128-128c9.375-9.375 9.375-24.56 0-33.94S344.4 165.7 335 175zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M335 175L224 286.1L176.1 239c-9.375-9.375-24.56-9.375-33.94 0s-9.375 24.56 0 33.94l64 64C211.7 341.7 217.8 344 224 344s12.28-2.344 16.97-7.031l128-128c9.375-9.375 9.375-24.56 0-33.94S344.4 165.7 335 175zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464z'/%3E%3C/svg%3E"); } .fa-clock { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M232 120C232 106.7 242.7 96 256 96C269.3 96 280 106.7 280 120V243.2L365.3 300C376.3 307.4 379.3 322.3 371.1 333.3C364.6 344.3 349.7 347.3 338.7 339.1L242.7 275.1C236 271.5 232 264 232 255.1L232 120zM256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0zM48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48C141.1 48 48 141.1 48 256z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M232 120C232 106.7 242.7 96 256 96C269.3 96 280 106.7 280 120V243.2L365.3 300C376.3 307.4 379.3 322.3 371.1 333.3C364.6 344.3 349.7 347.3 338.7 339.1L242.7 275.1C236 271.5 232 264 232 255.1L232 120zM256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0zM48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48C141.1 48 48 141.1 48 256z'/%3E%3C/svg%3E"); } .fa-chart-bar { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M24 32C37.25 32 48 42.75 48 56V408C48 421.3 58.75 432 72 432H488C501.3 432 512 442.7 512 456C512 469.3 501.3 480 488 480H72C32.24 480 0 447.8 0 408V56C0 42.75 10.75 32 24 32zM128 136C128 122.7 138.7 112 152 112H360C373.3 112 384 122.7 384 136C384 149.3 373.3 160 360 160H152C138.7 160 128 149.3 128 136zM296 208C309.3 208 320 218.7 320 232C320 245.3 309.3 256 296 256H152C138.7 256 128 245.3 128 232C128 218.7 138.7 208 152 208H296zM424 304C437.3 304 448 314.7 448 328C448 341.3 437.3 352 424 352H152C138.7 352 128 341.3 128 328C128 314.7 138.7 304 152 304H424z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M24 32C37.25 32 48 42.75 48 56V408C48 421.3 58.75 432 72 432H488C501.3 432 512 442.7 512 456C512 469.3 501.3 480 488 480H72C32.24 480 0 447.8 0 408V56C0 42.75 10.75 32 24 32zM128 136C128 122.7 138.7 112 152 112H360C373.3 112 384 122.7 384 136C384 149.3 373.3 160 360 160H152C138.7 160 128 149.3 128 136zM296 208C309.3 208 320 218.7 320 232C320 245.3 309.3 256 296 256H152C138.7 256 128 245.3 128 232C128 218.7 138.7 208 152 208H296zM424 304C437.3 304 448 314.7 448 328C448 341.3 437.3 352 424 352H152C138.7 352 128 341.3 128 328C128 314.7 138.7 304 152 304H424z'/%3E%3C/svg%3E"); } .fas { display: inline-block; width: 1em; height: 1em; background-color: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .fa-moon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z'/%3E%3C/svg%3E"); } .fa-sun { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 159.1c-53.02 0-95.1 42.98-95.1 95.1S202.1 351.1 256 351.1s95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347L446.1 255.1l63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7l-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89L164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6L12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256l-63.15 91.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7l19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109l109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69 0-127.1-57.31-127.1-127.1c0-70.69 57.31-127.1 127.1-127.1s127.1 57.3 127.1 127.1C383.1 326.7 326.7 383.1 256 383.1z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 159.1c-53.02 0-95.1 42.98-95.1 95.1S202.1 351.1 256 351.1s95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347L446.1 255.1l63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7l-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89L164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6L12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256l-63.15 91.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7l19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109l109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69 0-127.1-57.31-127.1-127.1c0-70.69 57.31-127.1 127.1-127.1s127.1 57.3 127.1 127.1C383.1 326.7 326.7 383.1 256 383.1z'/%3E%3C/svg%3E"); } .fa-bars { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z'/%3E%3C/svg%3E"); } .fa-xmark, .fa-times { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'/%3E%3C/svg%3E"); } .fa-brands { display: inline-block; width: 1em; height: 1em; background-color: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .fa-envelope { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 64H64C28.65 64 0 92.65 0 128v256c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V128C512 92.65 483.3 64 448 64zM64 112h384c8.822 0 16 7.178 16 16v22.16l-166.8 138.1c-23.19 19.28-59.34 19.27-82.47 .0156L48 150.2V128C48 119.2 55.18 112 64 112zM448 400H64c-8.822 0-16-7.178-16-16V212.7l136.1 113.4C204.3 342.8 229.8 352 256 352s51.75-9.188 71.97-25.98L464 212.7V384C464 392.8 456.8 400 448 400z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 64H64C28.65 64 0 92.65 0 128v256c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V128C512 92.65 483.3 64 448 64zM64 112h384c8.822 0 16 7.178 16 16v22.16l-166.8 138.1c-23.19 19.28-59.34 19.27-82.47 .0156L48 150.2V128C48 119.2 55.18 112 64 112zM448 400H64c-8.822 0-16-7.178-16-16V212.7l136.1 113.4C204.3 342.8 229.8 352 256 352s51.75-9.188 71.97-25.98L464 212.7V384C464 392.8 456.8 400 448 400z'/%3E%3C/svg%3E"); } .fa-location-dot { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M168.3 499.2C116.1 435 0 279.4 0 192C0 85.96 85.96 0 192 0C298 0 384 85.96 384 192C384 279.4 267 435 215.7 499.2C203.4 514.5 180.6 514.5 168.3 499.2H168.3zM192 256C227.3 256 256 227.3 256 192C256 156.7 227.3 128 192 128C156.7 128 128 156.7 128 192C128 227.3 156.7 256 192 256z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M168.3 499.2C116.1 435 0 279.4 0 192C0 85.96 85.96 0 192 0C298 0 384 85.96 384 192C384 279.4 267 435 215.7 499.2C203.4 514.5 180.6 514.5 168.3 499.2H168.3zM192 256C227.3 256 256 227.3 256 192C256 156.7 227.3 128 192 128C156.7 128 128 156.7 128 192C128 227.3 156.7 256 192 256z'/%3E%3C/svg%3E"); } .fa-github { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath d='M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath d='M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z'/%3E%3C/svg%3E"); } .fa-x-twitter { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3E%3C/svg%3E"); } .fa-twitter, .fa-x-twitter { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3E%3C/svg%3E"); } :root { --border-light: #ececf0; --border-medium: #dbdbe2; --border-strong: #c0c0cc; --card-bg: var(--base-3); --card-bg-alt: #fafafc; --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08); --card-shadow-hover: 0 20px 40px -15px rgba(0, 0, 0, 0.15); --overlay-light: rgba(255, 255, 255, 0.8); --overlay-dark: rgba(0, 0, 0, 0.05); --bg-primary: var(--base-3); --bg-secondary: var(--base-2); --bg-tertiary: var(--base); --text-primary: var(--contrast); --text-secondary: var(--contrast-2); --text-tertiary: var(--contrast-3); --text-on-dark: var(--base-3); --accent-red: var(--accent); } .gbp-section { padding: 120px 0; } .gbp-section__inner { width: min(100% - 64px, 1280px); margin-inline: auto; } .gbp-section--dark { color: var(--base-3); background: var(--bg-dark); } .gbp-section--dark .xkit-button--primary { color: var(--contrast); background: var(--base-3); border-color: var(--base-3); } .gbp-section--dark .xkit-button--primary:hover { color: var(--contrast); background: var(--base-2); border-color: var(--base-2); } .gbp-section--dark .xkit-button--secondary { color: var(--base-3); background: transparent; border-color: var(--base-3); } .gbp-section--dark .xkit-button--secondary:hover { color: var(--contrast); background: var(--base-3); border-color: var(--base-3); } @media (max-width: 768px) { .gbp-section { padding: 72px 0; } .gbp-section__inner { width: min(100% - 40px, 1280px); } } .section-header { margin-bottom: 60px; text-align: center; } .single-post .section-header { margin-top: 100px; } .section-header--ta-left { text-align: left; } .section-header > :is(h1, h2, h3) { margin: 0; } .section-header > p { margin: 20px auto 0; color: var(--contrast-2); } @media (max-width: 768px) { .section-header { margin-bottom: 44px; } } header.gb-site-header:not(.gb-is-sticky) { position: absolute; top: var(--site-admin-offset); right: 0; left: 0; background-color: transparent; box-shadow: none; } header.gb-site-header.gb-is-sticky { top: var(--site-admin-offset); } body.home main, body.page-id-96 main { padding-top: 0; } @supports selector(body:has(.xkit-blog-hero)) { body:has(.xkit-blog-hero) main { padding-top: 0; } } body.page-id-96 header.gb-site-header:not(.gb-is-sticky), body:has(.xkit-blog-hero) header.gb-site-header:not(.gb-is-sticky) { border-bottom-color: transparent; } body.page-id-96 header.gb-site-header:not(.gb-is-sticky) .gb-menu-link, body.page-id-96 header.gb-site-header:not(.gb-is-sticky) .gb-text a, body.page-id-96 header.gb-site-header:not(.gb-is-sticky) .wc-block-customer-account__link, body:has(.xkit-blog-hero) header.gb-site-header:not(.gb-is-sticky) .gb-menu-link, body:has(.xkit-blog-hero) header.gb-site-header:not(.gb-is-sticky) .gb-text a, body:has(.xkit-blog-hero) header.gb-site-header:not(.gb-is-sticky) .wc-block-customer-account__link { color: var(--base-3); } body.page-id-96 header.gb-site-header:not(.gb-is-sticky) .gb-menu-link:is(:hover, :focus-visible, :active), body.page-id-96 header.gb-site-header:not(.gb-is-sticky) .gb-text a:is(:hover, :focus-visible, :active), body.page-id-96 header.gb-site-header:not(.gb-is-sticky) .wc-block-customer-account__link:is(:hover, :focus-visible, :active), body:has(.xkit-blog-hero) header.gb-site-header:not(.gb-is-sticky) .gb-menu-link:is(:hover, :focus-visible, :active), body:has(.xkit-blog-hero) header.gb-site-header:not(.gb-is-sticky) .gb-text a:is(:hover, :focus-visible, :active), body:has(.xkit-blog-hero) header.gb-site-header:not(.gb-is-sticky) .wc-block-customer-account__link:is(:hover, :focus-visible, :active) { color: var(--accent-blue); } body.page-id-96 header.gb-site-header:not(.gb-is-sticky) .nav-docs .gb-menu-link, body:has(.xkit-blog-hero) header.gb-site-header:not(.gb-is-sticky) .nav-docs .gb-menu-link { border-color: color-mix(in srgb, var(--base-3) 65%, transparent); } body[data-gb-menu-open=full-overlay] .gb-site-header { -webkit-backdrop-filter: none; backdrop-filter: none; } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .gb-menu-container--mobile { inset: var(--site-admin-offset) 0 0; min-height: calc(100dvh - var(--site-admin-offset)); box-sizing: border-box; row-gap: 0; padding: 0 20px 24px; } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .gb-menu-toggle--clone { border-radius: 10px; background-color: transparent; transition: color 0.15s ease, background-color 0.15s ease; } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .gb-menu-toggle--clone:is(:hover, :focus-visible) { color: var(--accent-blue); background-color: color-mix(in srgb, var(--base-3) 10%, transparent); } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .gb-menu-container--mobile > .gb-menu-show-on-toggled:first-of-type { padding: 18px 0 0; } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .gb-menu-container--mobile > .gb-menu-show-on-toggled:first-of-type a { color: var(--base-3); text-decoration: none; } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .gb-menu { align-items: stretch; row-gap: 0; margin-top: 28px; padding-inline: 0; } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .gb-menu-item { width: 100%; border-bottom: 1px solid color-mix(in srgb, var(--base-3) 14%, transparent); } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .gb-menu-link { justify-content: flex-start; width: 100%; padding: 1rem 0; color: var(--base-3); font-size: 1.125rem; font-weight: 500; line-height: 1.3; transition: color 0.15s ease, padding-left 0.15s ease; } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .gb-menu-link:is(:hover, :focus-visible, :active) { padding-left: 6px; color: var(--accent-blue); } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .nav-docs .gb-menu-link { border: 0; border-radius: 0; padding-inline: 0; } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .nav-docs .gb-menu-link:is(:hover, :focus-visible, :active) { padding-left: 6px; } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .gb-menu-container--mobile > .gb-menu-show-on-toggled:has(.wp-block-woocommerce-customer-account) { display: grid; width: 100%; margin-top: auto; padding: 22px 0 0; border-top: 1px solid color-mix(in srgb, var(--base-3) 14%, transparent); row-gap: 12px; } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .wp-block-woocommerce-customer-account { width: 100%; } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .wp-block-woocommerce-customer-account .wc-block-customer-account__link { display: inline-flex; align-items: center; width: fit-content; column-gap: 9px; color: var(--base-3); font-size: 0.95rem; font-weight: 500; line-height: 1.3; text-decoration: none; } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .wp-block-woocommerce-customer-account .wc-block-customer-account__account-icon { width: 20px; height: 20px; color: var(--accent-blue); } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .gb-menu-container--mobile > .gb-menu-show-on-toggled:has(.wp-block-woocommerce-customer-account) > .gbp-button { justify-content: center; align-content: center; width: 100%; min-height: 48px; border: 1px solid var(--base-3); border-radius: 12px; background-color: var(--base-3); color: var(--contrast); font-weight: 600; text-align: center; transition: color 0.15s ease, background-color 0.15s ease; } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .gb-menu-container--mobile > .gb-menu-show-on-toggled:has(.wp-block-woocommerce-customer-account) > .gbp-button:is(:hover, :focus-visible) { background-color: transparent; color: var(--base-3); } body[data-gb-menu-open=full-overlay] .gb-navigation[data-gb-mobile-menu-type=full-overlay] .gb-menu-show-on-toggled > a:not([href]) { display: none; } input[type=text].xkit-input, input[type=email].xkit-input, input[type=url].xkit-input, input[type=tel].xkit-input, input[type=number].xkit-input, input[type=search].xkit-input, input[type=password].xkit-input, select.xkit-input, textarea.xkit-input { width: 100%; padding: 12px 14px; font-family: inherit; font-size: 0.95rem; line-height: 1.4; color: var(--contrast); background: var(--base-3); border: 1px solid var(--border-medium); border-radius: 10px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input[type=text].xkit-input::placeholder, input[type=email].xkit-input::placeholder, input[type=url].xkit-input::placeholder, input[type=tel].xkit-input::placeholder, input[type=number].xkit-input::placeholder, input[type=search].xkit-input::placeholder, input[type=password].xkit-input::placeholder, select.xkit-input::placeholder, textarea.xkit-input::placeholder { color: var(--contrast-3); } input[type=text].xkit-input:focus, input[type=email].xkit-input:focus, input[type=url].xkit-input:focus, input[type=tel].xkit-input:focus, input[type=number].xkit-input:focus, input[type=search].xkit-input:focus, input[type=password].xkit-input:focus, select.xkit-input:focus, textarea.xkit-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 99, 99, 0.15); } .xkit-button, .wp-element-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border-radius: 10px; font-weight: 500; font-size: 0.95rem; line-height: 1; border: 1px solid transparent; cursor: pointer; transition: all 0.15s ease; background: transparent; color: var(--contrast); text-decoration: none; white-space: nowrap; } .xkit-button:hover, .wp-element-button:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } .xkit-button:active, .wp-element-button:active { transform: translateY(-1px); } .xkit-button--primary, .wp-element-button--primary { background: var(--contrast); color: var(--base-3); border-color: var(--contrast); } .xkit-button--primary:hover, .wp-element-button--primary:hover { background: #2a2a2a; border-color: #2a2a2a; color: var(--base-3); } .xkit-button--secondary, .wp-element-button--secondary { background: var(--base-2); border-color: var(--border-medium); color: var(--contrast); } .xkit-button--secondary:hover, .wp-element-button--secondary:hover { background: #eaeaef; border-color: var(--border-strong); color: var(--contrast); } .xkit-button--link, .wp-element-button--link { border-color: transparent; background: transparent; color: var(--contrast-2); } .xkit-button--link:hover, .wp-element-button--link:hover { color: var(--contrast); background: var(--base-2); } .xkit-button--large, .wp-element-button--large { padding: 12px 24px; font-size: 1rem; } .xkit-button--block, .wp-element-button--block { width: 100%; } .xkit-button--small, .wp-element-button--small { padding: 6px 12px; font-size: 0.85rem; } .xkit-input--textarea { resize: vertical; min-height: 140px; } select.xkit-input--select { appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8e98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .xkit-contact-form { display: flex; flex-direction: column; gap: 20px; width: min(100%, 640px); } .xkit-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .xkit-contact-form__field { display: flex; flex-direction: column; gap: 8px; } .xkit-contact-form__label { font-size: 0.9rem; font-weight: 600; color: var(--contrast); } .xkit-contact-form__required { color: var(--accent); } .xkit-contact-form__notice { padding: 12px 16px; border-radius: 10px; font-size: 0.95rem; border: 1px solid transparent; } .xkit-contact-form__notice--success { color: #1f7a4d; background: rgba(89, 212, 153, 0.12); border-color: var(--accent-green); } .xkit-contact-form__notice--error { color: #b42318; background: rgba(255, 99, 99, 0.1); border-color: var(--accent); } .xkit-contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .xkit-contact-form__actions { margin-top: 4px; } .xkit-contact-form__hint { margin: 8px 0 0; font-size: 0.82rem; color: var(--contrast-3); text-align: center; } @media (max-width: 600px) { .xkit-contact-form__row { grid-template-columns: 1fr; } } .xkit-label { display: inline-flex; align-items: center; gap: 6px; width: fit-content; border: 1px solid transparent; border-radius: 30px; padding: 6px 12px; font-size: 0.8rem; font-weight: 600; line-height: 1; color: var(--contrast-2); background: var(--base-2); } .xkit-label--badge { background: var(--contrast); color: var(--base-3); } .xkit-label--accent { background: rgba(255, 99, 99, 0.12); color: var(--accent); } .xkit-label--accent-blue { background: var(--accent-blue); color: var(--base-3); } .xkit-label--good { background: rgba(89, 212, 153, 0.14); color: #1f7a4d; } .xkit-label--warn { background: rgba(255, 197, 49, 0.18); color: #8a6300; } .xkit-label--trial { background: rgba(86, 194, 255, 0.14); color: #1670a3; } .xkit-label--muted { background: var(--base-2); color: var(--contrast-3); } .xkit-label--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .xkit-author-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; padding: 32px; border: 1px solid var(--border-light); border-radius: 18px; background: var(--base-3); box-shadow: var(--card-shadow); } .xkit-author-card__avatar { display: block; width: 64px; height: 64px; border-radius: 16px; background: var(--base-2); object-fit: cover; } .xkit-author-card__content { min-width: 0; } .xkit-author-card__title { margin: 0 0 6px; color: var(--contrast); font-size: 1.15rem; line-height: 1.35; } .xkit-author-card__bio { margin: 0 0 12px; color: var(--contrast-2); font-size: 0.92rem; } @media (max-width: 520px) { .xkit-author-card { grid-template-columns: 1fr; padding: 24px; } } .wp-block-generateblocks-media.xkit-author-card__avatar img, .wp-block-generateblocks-media.xkit-author-card__avatar + div img { display: block; width: 64px; height: 64px; border-radius: 16px; background: var(--base-2); object-fit: cover; } .wp-block-generateblocks-media.xkit-editorial-hero__avatar img, .wp-block-generateblocks-media.xkit-editorial-hero__avatar + div img { display: block; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } .wp-block-generateblocks-media.xkit-blog-hero__feature-image, .wp-block-generateblocks-media.xkit-blog-hero__feature-image + div { width: 100%; height: 100%; } .wp-block-generateblocks-media.xkit-blog-hero__feature-image img, .wp-block-generateblocks-media.xkit-blog-hero__feature-image + div img { display: block; width: 100%; height: 100%; object-fit: cover; } .wp-block-generateblocks-media.editorial-figure__image, .wp-block-generateblocks-media.editorial-figure__image + div { width: 100%; } .wp-block-generateblocks-media.editorial-figure__image img, .wp-block-generateblocks-media.editorial-figure__image + div img { display: block; width: 100%; height: auto; border-radius: 12px; } .xkit-editorial-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; } .xkit-editorial-cta__copy { max-width: 720px; } .xkit-editorial-cta__title { margin: 0 0 14px; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.035em; line-height: 1.12; } .xkit-editorial-cta__description { margin: 0; color: color-mix(in srgb, var(--base-3) 68%, transparent); font-size: 1.04rem; } @media (max-width: 768px) { .xkit-editorial-cta__inner { align-items: flex-start; flex-direction: column; } } .editorial-disclosure { margin: 0 0 64px; padding: 18px 20px; border: 1px solid var(--border-light); border-radius: 12px; color: var(--contrast-2); background: var(--card-bg-alt); font-size: 0.9rem; } .editorial-disclosure > :last-child { margin-bottom: 0; } .editorial-section { margin-top: 84px; scroll-margin-top: calc(var(--site-header-height) + 24px); } .editorial-section .section-header { margin: 0 0 32px; text-align: left; } .editorial-section .section-header > :is(h1, h2, h3) { margin: 0 0 16px; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; } .editorial-section .section-header > p { max-width: 900px; margin: 0; color: var(--contrast-2); font-size: 1.12rem; line-height: 1.65; } .editorial-section > p { margin: 0 0 26px; color: var(--contrast-2); font-size: 1.04rem; } .editorial-section > h3 { margin: 48px 0 14px; font-size: 1.45rem; letter-spacing: -0.018em; line-height: 1.3; } .editorial-section pre.wp-block-code { overflow-x: auto; margin: 32px 0; padding: 24px; border: 1px solid color-mix(in srgb, var(--base-3) 12%, transparent); border-radius: 16px; color: #e9eaf0; background: var(--bg-dark); box-shadow: var(--card-shadow); font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.9rem; line-height: 1.65; white-space: pre; } .editorial-section pre.wp-block-code code { padding: 0; border: 0; border-radius: 0; color: inherit; background: transparent; font: inherit; white-space: inherit; } :where(.editorial-section, .editorial-article__intro, .editorial-disclosure, .editorial-callout, .editorial-inline-cta) code { padding: 2px 7px; border: 1px solid var(--border-light); border-radius: 6px; color: var(--contrast); background: var(--base-2); font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.88em; } .editorial-list { margin: 0 0 30px; padding-left: 1.35rem; color: var(--contrast-2); } .editorial-list li { margin-bottom: 10px; padding-left: 6px; } .editorial-list li:last-child { margin-bottom: 0; } .editorial-list li::marker { color: var(--accent); font-weight: 700; } .editorial-list--numbered { display: grid; gap: 16px; padding-left: 0; list-style: none; counter-reset: editorial-list; } .editorial-list--numbered li { position: relative; min-height: 38px; margin: 0; padding: 6px 0 0 52px; counter-increment: editorial-list; } .editorial-list--numbered li::before { position: absolute; top: 0; left: 0; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent-blue) 38%, var(--border-light)); border-radius: 10px; color: var(--contrast); background: color-mix(in srgb, var(--accent-blue) 13%, var(--base-3)); font-size: 0.82rem; font-weight: 700; line-height: 1; content: counter(editorial-list, decimal-leading-zero); } .editorial-list--numbered li::marker { content: none; } .editorial-inline-link { color: var(--accent); font-weight: 600; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; } .editorial-inline-link:hover { color: var(--accent); text-decoration-color: var(--accent); } .editorial-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; margin: 48px 0; padding: 28px 30px; border: 1px solid var(--border-light); border-radius: 16px; background: var(--card-bg-alt); box-shadow: var(--card-shadow); } .editorial-callout__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; color: var(--contrast); background: color-mix(in srgb, var(--accent-yellow) 28%, var(--base-3)); } .editorial-callout__icon svg { width: 20px; height: 20px; } .editorial-callout__title { margin: 0 0 6px; font-size: 1rem; } .editorial-callout__content > :last-child { margin-bottom: 0; } .editorial-callout__content > p { margin-top: 0; font-size: 0.95rem; } .editorial-callout__content > ul, .editorial-callout__content > ol { margin: 12px 0 0; padding-left: 1.35rem; color: var(--contrast-2); font-size: 0.95rem; } .editorial-callout__content li { margin-bottom: 8px; } .editorial-callout__content li:last-child { margin-bottom: 0; } .editorial-callout__content li::marker { color: var(--accent); font-weight: 700; } .editorial-blockquote { position: relative; margin: 64px 0; padding: 48px 56px 44px; border: 1px solid var(--border-light); border-left: 5px solid var(--accent); border-radius: 0 20px 20px 0; background: var(--base-2); } .editorial-blockquote::before { position: absolute; top: 20px; right: 30px; color: color-mix(in srgb, var(--accent-purple) 16%, transparent); font-size: 7rem; font-weight: 700; line-height: 1; content: "“"; } .editorial-blockquote p { position: relative; z-index: 1; margin: 0 0 20px; color: var(--contrast); font-size: clamp(1.35rem, 2.8vw, 1.9rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.45; } .editorial-blockquote cite { display: block; color: var(--contrast-3); font-size: 0.9rem; font-style: normal; font-weight: 500; } .editorial-figure { margin-top: 12px; margin-bottom: 34px; } .editorial-figure--left, .editorial-figure--right { width: min(48%, 520px); } .editorial-figure--left { float: left; margin-right: 36px; margin-left: 0; } .editorial-figure--right { float: right; margin-right: 0; margin-left: 36px; } .editorial-figure--full { width: 100%; margin: 64px 0; } .editorial-figure--compact { width: min(100%, 760px); margin: 64px auto; float: none; } .editorial-figure__frame { overflow: hidden; padding: 12px; border: 1px solid var(--border-light); border-radius: 18px; background: var(--base-2); box-shadow: var(--card-shadow); } .editorial-figure__image { display: block; width: 100%; height: auto; border-radius: 12px; } .editorial-figure figcaption { margin-top: 12px; color: var(--contrast-3); font-size: 0.82rem; line-height: 1.5; } .editorial-figure--left .editorial-figure__frame, .editorial-figure--right .editorial-figure__frame { display: grid; min-height: 280px; place-items: center; } figure.editorial-table { overflow-x: auto; margin: 42px 0; border: 1px solid var(--border-light); border-radius: 16px; background: var(--base-3); box-shadow: var(--card-shadow); } figure.editorial-table table { width: 100%; min-width: 900px; margin: 0; border: 0; border-collapse: collapse; font-size: 0.91rem; line-height: 1.5; } figure.editorial-table th, figure.editorial-table td { padding: 18px 20px; border: 0; border-bottom: 1px solid var(--border-light); text-align: left; vertical-align: top; } figure.editorial-table th { color: var(--contrast); background: var(--base-2); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } figure.editorial-table td { color: var(--contrast-2); } figure.editorial-table tbody:last-child tr:last-child td, figure.editorial-table tfoot tr:last-child td { border-bottom: 0; } .editorial-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 30px 0 0; padding: 0; list-style: none; } .editorial-sources li { margin: 0; padding: 0; } .editorial-sources a { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: 12px; color: var(--contrast-2); background: var(--base-3); font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .editorial-sources a:hover, .editorial-sources a:focus-visible { transform: translateY(-3px); border-color: var(--accent-blue); box-shadow: var(--card-shadow-hover); } @media (max-width: 768px) { .editorial-disclosure { margin-bottom: 48px; } .editorial-blockquote { margin: 48px 0; padding: 36px 28px 32px; border-radius: 0 16px 16px 0; } .editorial-section { margin-top: 68px; } .editorial-figure--left, .editorial-figure--right { float: none; width: 100%; margin: 40px 0; } figure.editorial-table { margin-right: -20px; margin-left: -20px; border-right: 0; border-left: 0; border-radius: 0; } .editorial-sources { grid-template-columns: 1fr; } } @media (max-width: 520px) { .editorial-callout { grid-template-columns: 1fr; padding: 24px; } } .editorial-inline-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; margin: 64px 0; padding: 38px 40px; border: 1px solid color-mix(in srgb, var(--base-3) 12%, transparent); border-radius: 20px; color: var(--base-3); background: radial-gradient(420px 220px at 100% 0%, color-mix(in srgb, var(--accent-purple) 24%, transparent), transparent 68%), var(--bg-dark); box-shadow: 0 28px 60px -36px color-mix(in srgb, var(--bg-dark) 72%, transparent); } .editorial-inline-cta__content, .editorial-inline-cta > .xkit-button { position: relative; z-index: 1; } .editorial-inline-cta__content { max-width: 700px; } .editorial-inline-cta__eyebrow { margin-bottom: 10px; } .editorial-inline-cta__title { margin: 0 0 10px; color: var(--base-3); font-size: clamp(1.45rem, 2.5vw, 2rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; } .editorial-inline-cta__description { margin: 0; color: color-mix(in srgb, var(--base-3) 70%, transparent); font-size: 0.98rem; line-height: 1.65; } .editorial-inline-cta .xkit-button--primary { flex: 0 0 auto; color: var(--contrast); background: var(--base-3); border-color: var(--base-3); } .editorial-inline-cta .xkit-button--primary:hover, .editorial-inline-cta .xkit-button--primary:focus-visible { color: var(--contrast); background: var(--base-2); border-color: var(--base-2); } @media (max-width: 768px) { .editorial-inline-cta { grid-template-columns: 1fr; gap: 24px; margin: 48px 0; padding: 30px 28px; } .editorial-inline-cta > .xkit-button { width: 100%; justify-content: center; } } .xkit-editorial-hero { position: relative; overflow: hidden; padding-bottom: 72px; } .xkit-editorial-hero__inner { position: relative; z-index: 1; } .xkit-editorial-hero__copy { max-width: 980px; margin-inline: auto; text-align: center; } .xkit-editorial-hero__category { margin-bottom: 24px; } .xkit-editorial-hero__title { max-width: 18ch; margin: 0 auto 24px; font-size: clamp(2.75rem, 6vw, 5.25rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; } .xkit-editorial-hero__subtitle { max-width: 790px; margin: 0 auto 30px; color: var(--contrast-2); font-size: clamp(1.08rem, 2vw, 1.3rem); line-height: 1.65; } .xkit-editorial-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 30px; } .xkit-editorial-hero__byline { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--contrast-3); font-size: 0.88rem; } .xkit-editorial-hero__avatar { display: block; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--border-light); border-radius: 50%; background: var(--base-2); object-fit: cover; } .xkit-editorial-hero__meta { margin: 0; text-align: left; } .xkit-editorial-hero__author, .xkit-editorial-hero__details { display: block; } .xkit-editorial-hero__author { color: var(--contrast); font-weight: 600; } .xkit-editorial-hero__media { min-width: 0; max-width: 1050px; margin: 56px auto 0; padding: 14px; border: 1px solid var(--border-light); border-radius: 28px; background: color-mix(in srgb, var(--base-3) 86%, transparent); box-shadow: 0 32px 80px -38px color-mix(in srgb, var(--contrast) 34%, transparent); } .xkit-editorial-hero__media-image, .xkit-editorial-hero__media-image img { display: block; width: 100%; height: auto; border-radius: 18px; } @media (min-width: 1025px) { .xkit-editorial-hero--with-media .xkit-editorial-hero__inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr); align-items: center; gap: clamp(52px, 6vw, 96px); } .xkit-editorial-hero--with-media .xkit-editorial-hero__copy { max-width: none; margin: 0; text-align: left; } .xkit-editorial-hero--with-media .xkit-editorial-hero__title { max-width: 12ch; margin-right: 0; margin-left: 0; } .xkit-editorial-hero--with-media .xkit-editorial-hero__subtitle { margin-right: 0; margin-left: 0; } .xkit-editorial-hero--with-media .xkit-editorial-hero__actions, .xkit-editorial-hero--with-media .xkit-editorial-hero__byline { justify-content: flex-start; } .xkit-editorial-hero--with-media .xkit-editorial-hero__media { max-width: none; margin: 0; } } @media (max-width: 768px) { .xkit-editorial-hero { padding-bottom: 48px; } .xkit-editorial-hero__title { font-size: clamp(2.45rem, 12vw, 4rem); } } @media (max-width: 520px) { .xkit-editorial-hero__actions { align-items: stretch; flex-direction: column; } .xkit-editorial-hero__actions > * { width: 100%; justify-content: center; } .xkit-editorial-hero__byline { align-items: flex-start; } .xkit-editorial-hero__media { margin-inline: -8px; margin-top: 40px; padding: 10px; border-radius: 18px; } } .xkit-blog-hero { position: relative; overflow: hidden; padding-top: calc(78px + var(--site-header-height)); padding-bottom: 108px; background: radial-gradient(720px 480px at 92% 15%, color-mix(in srgb, var(--accent-purple) 34%, transparent), transparent 68%), radial-gradient(680px 460px at 5% 90%, color-mix(in srgb, var(--accent-blue) 20%, transparent), transparent 65%), var(--bg-dark); } .xkit-blog-hero::before { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--base-3) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--base-3) 8%, transparent) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, var(--contrast), transparent 80%); opacity: 0.2; pointer-events: none; content: ""; } .xkit-blog-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(460px, 1.05fr); gap: 80px; align-items: center; } .xkit-blog-hero__title { max-width: 12ch; margin: 0 0 26px; font-size: clamp(3.35rem, 6.5vw, 6.25rem); font-weight: 700; letter-spacing: -0.055em; line-height: 0.98; } .xkit-blog-hero__description { max-width: 610px; margin: 0 0 34px; color: color-mix(in srgb, var(--base-3) 65%, transparent); font-size: 1.1rem; } .xkit-blog-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .xkit-blog-hero__feature { min-width: 0; margin: 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--base-3) 13%, transparent); border-radius: 28px; background: color-mix(in srgb, var(--base-3) 7%, transparent); box-shadow: 0 42px 90px color-mix(in srgb, var(--bg-dark) 58%, transparent); transform: rotate(1.4deg); backdrop-filter: blur(12px); } .xkit-blog-hero__feature-media { position: relative; overflow: hidden; aspect-ratio: 1.32; border-radius: 18px; background: var(--base-2); } .xkit-blog-hero__feature-image, .xkit-blog-hero__feature-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .xkit-blog-hero__feature-category { position: absolute; z-index: 1; top: 14px; left: 14px; box-shadow: var(--card-shadow); } .xkit-blog-hero__feature-content { padding: 24px 20px 18px; } .xkit-blog-hero__feature-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: color-mix(in srgb, var(--base-3) 50%, transparent); font-size: 0.83rem; } .xkit-blog-hero__feature-meta-separator { width: 3px; height: 3px; border-radius: 50%; background: currentColor; } .xkit-blog-hero__feature-title { max-width: 20ch; margin: 12px 0 14px; font-size: clamp(1.55rem, 3vw, 2.15rem); letter-spacing: -0.03em; line-height: 1.18; } .xkit-blog-hero__feature-title a { color: var(--base-3); } .xkit-blog-hero__feature-title a:hover { color: var(--accent-blue); } .xkit-blog-hero .xkit-text-link { color: color-mix(in srgb, var(--base-3) 80%, transparent); } .xkit-blog-hero .xkit-text-link:hover { color: var(--base-3); } @media (max-width: 1024px) { .xkit-blog-hero__inner { grid-template-columns: 1fr; gap: 50px; } .xkit-blog-hero__title { max-width: 14ch; } .xkit-blog-hero__feature { max-width: 760px; transform: none; } } @media (max-width: 768px) { .xkit-blog-hero { padding-top: calc(72px + var(--site-header-height)); padding-bottom: 72px; } .xkit-blog-hero__title { font-size: clamp(2.9rem, 14vw, 4.7rem); } } @media (max-width: 480px) { .xkit-blog-hero__actions { align-items: stretch; flex-direction: column; } .xkit-blog-hero__actions > * { width: 100%; justify-content: center; } .xkit-blog-hero__feature-content { padding: 20px 14px 14px; } } .xkit-blog-filters { margin-bottom: 48px; border-bottom: 1px solid var(--border-light); background: var(--base-3); } .xkit-blog-filters__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; padding-bottom: 28px; } .xkit-blog-filters__topics { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; } .xkit-blog-filters__topic { flex: 0 0 auto; padding: 8px 13px; border: 1px solid var(--border-light); border-radius: 999px; color: var(--contrast-2); background: var(--base-3); font-size: 0.82rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .xkit-blog-filters__topic:is(:hover, :focus-visible), .xkit-blog-filters__topic[aria-current=page] { border-color: var(--contrast); color: var(--base-3); background: var(--contrast); text-decoration: none; } .xkit-blog-filters__topic:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-blue) 45%, transparent); outline-offset: 2px; } .xkit-blog-filters__actions { display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: 14px; } .xkit-blog-filters__count { flex: 0 0 auto; color: var(--contrast-3); font-size: 0.84rem; white-space: nowrap; } .xkit-blog-filters__search { display: flex; flex: 0 1 320px; width: min(320px, 100%); gap: 8px; margin: 0; padding: 6px; border: 1px solid var(--border-medium); border-radius: 14px; background: var(--base-2); } .xkit-blog-filters__label { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; } .xkit-blog-filters__submit { flex: 0 0 auto; } .xkit-blog-filters__clear { flex: 0 0 auto; color: var(--contrast-2); font-size: 0.84rem; font-weight: 600; text-decoration: none; } .xkit-blog-filters__clear:is(:hover, :focus-visible) { color: var(--contrast); text-decoration: underline; text-underline-offset: 3px; } input[type=search].xkit-blog-filters__input { min-width: 0; flex: 1 1 auto; width: auto; margin: 0; padding: 4px 8px; border: 0; border-radius: 8px; outline: 0; color: var(--contrast); background: transparent; box-shadow: none; } input[type=search].xkit-blog-filters__input::placeholder { color: var(--contrast-3); } input[type=search].xkit-blog-filters__input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } @media (max-width: 1024px) { .xkit-blog-filters__inner { align-items: flex-start; flex-direction: column; } .xkit-blog-filters__actions { width: 100%; justify-content: space-between; } .xkit-blog-filters__search { flex: 1 1 320px; width: auto; max-width: 420px; } } @media (max-width: 600px) { .xkit-blog-filters { margin-bottom: 36px; } .xkit-blog-filters__inner { padding-top: 22px; padding-bottom: 22px; } .xkit-blog-filters__topics { flex-wrap: nowrap; width: 100%; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .xkit-blog-filters__actions { align-items: stretch; flex-direction: column-reverse; gap: 10px; } .xkit-blog-filters__search { flex-basis: auto; width: 100%; max-width: none; } .xkit-blog-filters__count, .xkit-blog-filters__clear { align-self: flex-start; } } @media (max-width: 420px) { .xkit-blog-filters__search { flex-direction: column; } .xkit-blog-filters__submit { min-height: 42px; } } .xkit-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 28px; align-items: stretch; } .xkit-blog-card { display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 14px 14px 22px; border: 1px solid var(--border-light); border-radius: 22px; background: var(--card-bg); box-shadow: var(--card-shadow); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .xkit-blog-card:is(:hover, :focus-within) { border-color: color-mix(in srgb, var(--accent-blue) 55%, var(--border-light)); box-shadow: var(--card-shadow-hover); transform: translateY(-4px); } .xkit-blog-card__media { position: relative; overflow: hidden; aspect-ratio: 1.58; border-radius: 14px; background: var(--base-2); } .xkit-blog-card__media::after { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--base-3) 35%, transparent); pointer-events: none; content: ""; } .xkit-blog-card__image-link, .xkit-blog-card__image, .xkit-blog-card__image img { display: block; width: 100%; height: 100%; } .xkit-blog-card__image-link { color: inherit; } .xkit-blog-card__image-link:focus-visible { border-radius: inherit; outline: 3px solid color-mix(in srgb, var(--accent-blue) 55%, transparent); outline-offset: -3px; } .xkit-blog-card__image, .xkit-blog-card__image img { object-fit: cover; transition: transform 0.35s ease; } .xkit-blog-card:is(:hover, :focus-within) .xkit-blog-card__image, .xkit-blog-card:is(:hover, :focus-within) .xkit-blog-card__image img { transform: scale(1.025); } .xkit-blog-card__category { position: absolute; z-index: 1; top: 14px; left: 14px; box-shadow: 0 6px 18px rgba(10, 15, 30, 0.12); text-decoration: none; transition: box-shadow 0.15s ease, transform 0.15s ease; } .xkit-blog-card__category:is(:hover, :focus-visible) { box-shadow: 0 8px 22px rgba(10, 15, 30, 0.18); transform: translateY(-1px); } .xkit-blog-card__body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 20px 8px 0; } .xkit-blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--contrast-3); font-size: 0.83rem; line-height: 1.4; } .xkit-blog-card__meta-separator { flex: 0 0 auto; width: 3px; height: 3px; border-radius: 50%; background: currentColor; } .xkit-blog-card__title { margin: 14px 0 10px; font-size: clamp(1.2rem, 2vw, 1.55rem); letter-spacing: -0.025em; line-height: 1.28; } .xkit-blog-card__title a { color: var(--contrast); text-decoration: none; } .xkit-blog-card__title a:is(:hover, :focus-visible) { color: var(--accent); } .xkit-blog-card__excerpt { margin: 0 0 18px; color: var(--contrast-2); font-size: 0.94rem; line-height: 1.65; } .xkit-blog-card .xkit-text-link { width: fit-content; margin-top: auto; } @media (max-width: 1024px) { .xkit-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .xkit-blog-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .xkit-blog-card__body { padding-top: 18px; } } @media (prefers-reduced-motion: reduce) { .xkit-blog-card, .xkit-blog-card__image, .xkit-blog-card__image img, .xkit-blog-card__category { transition: none; } } .xkit-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 64px; } .xkit-pagination .nav-links, .xkit-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .xkit-pagination ul.page-numbers { margin: 0; padding: 0; list-style: none; } .xkit-pagination :where(a, button, span.page-numbers) { display: inline-grid; min-width: 42px; height: 42px; place-items: center; border: 1px solid var(--border-light); border-radius: 10px; padding: 0 12px; color: var(--contrast-2); background: var(--base-3); font: inherit; line-height: 1; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .xkit-pagination :where(a, button):is(:hover, :focus-visible), .xkit-pagination :where([aria-current=page], .current) { border-color: var(--contrast); color: var(--base-3); background: var(--contrast); } .xkit-pagination :where(a, button):focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-blue) 45%, transparent); outline-offset: 2px; } .xkit-pagination :where(.prev, .next) { width: auto; } .xkit-pagination span.dots { border-color: transparent; color: var(--contrast-3); background: transparent; } .xkit-pagination :where([aria-disabled=true], .disabled) { opacity: 0.45; pointer-events: none; } @media (max-width: 768px) { .xkit-pagination { margin-top: 48px; } } @media (prefers-reduced-motion: reduce) { .xkit-pagination :where(a, button, span.page-numbers) { transition: none; } } /* ============================================================ Contact page Components scoped under their parent (.contact__points / .contact__channels) so they out-specify GenerateBlocks' generated .gb-shape-* / .gb-text-* classes, which load after this stylesheet. ============================================================ */ .contact__intro h1 { font-size: clamp(2.4rem, 4.5vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 20px; } .contact__intro .contact__lead { font-size: 1.1rem; color: var(--contrast-2); max-width: 46ch; margin: 0 0 36px; } .contact__points { display: flex; flex-direction: column; gap: 18px; margin: 0 0 36px; } .contact__points .contact__point { display: flex; gap: 14px; align-items: flex-start; } .contact__points .contact__point-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--base-2); border: 1px solid var(--border-light); color: var(--accent); } .contact__points .contact__point-icon svg { width: 20px; height: 20px; } .contact__points .contact__point-text h3 { margin: 2px 0; font-size: 1rem; font-weight: 600; } .contact__points .contact__point-text p { margin: 0; font-size: 0.95rem; color: var(--contrast-2); } .contact__channels { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 28px; border-top: 1px solid var(--border-light); } .contact__channels .contact__channel { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; text-decoration: none; background: var(--card-bg); border: 1px solid var(--border-light); font-size: 0.92rem; font-weight: 500; color: var(--contrast); box-shadow: var(--card-shadow); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .contact__channels .contact__channel:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); border-color: var(--border-medium); } .contact__channels .contact__channel svg { width: 18px; height: 18px; color: var(--contrast-3); } .contact__card { background: var(--card-bg); border: 1px solid var(--border-light); border-radius: 20px; box-shadow: var(--card-shadow); padding: 36px; } .contact__card-head { margin-bottom: 24px; } .contact__card-head h2 { margin: 12px 0 6px; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; } .contact__card-head p { margin: 0; font-size: 0.95rem; color: var(--contrast-2); } @media (max-width: 768px) { .contact__card { padding: 26px; } } /* ============================================================ My Account sidebar — restyles WooCommerce's own nav markup (woocommerce-MyAccount-navigation / -content), plus the avatar header the plugin renders above it via `woocommerce_before_account_navigation`. ============================================================ */ /** * The theme ships its own float:left/30% two-column CSS for * `.woocommerce-account .woocommerce-MyAccount-navigation/-content`, which * out-specifies a bare `.woocommerce-MyAccount-navigation` selector. * WooCommerce core CSS also sets a `border-bottom` on nav link hover. Every * rule below is scoped under `body.woocommerce-account` and layout-critical * properties are `!important` so this design wins regardless. */ body.woocommerce-account.logged-in .woocommerce { display: grid !important; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; } @media (max-width: 780px) { body.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; } } /** * Wraps the avatar/user block (rendered by the plugin via * woocommerce_before/after_account_navigation) and WooCommerce's own