{"id":8,"date":"2026-07-29T14:46:33","date_gmt":"2026-07-29T06:46:33","guid":{"rendered":"https:\/\/www.test31.pw\/?page_id=8"},"modified":"2026-08-03T13:21:39","modified_gmt":"2026-08-03T05:21:39","slug":"home","status":"publish","type":"page","link":"https:\/\/www.test31.pw\/","title":{"rendered":"HOME"},"content":{"rendered":"\n\n\n\n \n \n \n Creade<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/cdnjs.cloudflare.com\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.7.2\/css\/all.min.css\">\n <style>\n #creade-page,\n #creade-page * {\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n scrollbar-width: none;\n }\n\n html::-webkit-scrollbar {\n display: none;\n }\n\n body {\n margin: 0;\n background: #fff;\n color: #222;\n font-family: Arial, \"Microsoft YaHei\", sans-serif;\n }\n\n button,\n input,\n textarea {\n font: inherit;\n }\n\n button,\n a {\n -webkit-tap-highlight-color: transparent;\n }\n\n button:focus-visible,\n a:focus-visible,\n input:focus-visible,\n textarea:focus-visible {\n outline: 2px solid #a68960;\n outline-offset: 3px;\n }\n\n #creade-page {\n --gold: #a68960;\n --gold-dark: #876b47;\n --ink: #222;\n --muted: #777;\n --line: #e8e8e8;\n --surface: #f6f6f6;\n width: 100%;\n max-width: 1920px;\n margin: 0 auto;\n overflow: hidden;\n background: #fff;\n container-type: inline-size;\n }\n\n .creade-section {\n position: relative;\n width: 100%;\n }\n\n .section-title {\n margin: 0;\n color: #111;\n font-size: clamp(25px, 2.38cqw, 46px);\n font-weight: 400;\n line-height: 1.15;\n text-align: center;\n }\n\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: .8em;\n min-width: clamp(86px, 9.8cqw, 174px);\n height: clamp(30px, 3.1cqw, 56px);\n padding: 0 clamp(20px, 1.7cqw, 32px);\n border: 1px solid transparent;\n border-radius: 999px;\n background: var(--gold);\n color: #fff;\n font-size: clamp(10px, .78cqw, 15px);\n font-weight: 400;\n line-height: 1;\n text-decoration: none;\n cursor: pointer;\n transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;\n }\n\n .btn:hover {\n background: var(--gold-dark);\n transform: translateY(-1px);\n }\n\n .btn:active {\n transform: translateY(0) scale(.985);\n }\n\n .btn--outline {\n border-color: #bbb;\n background: #fff;\n color: #555;\n }\n\n .btn--outline:hover {\n border-color: var(--gold);\n background: var(--gold);\n color: #fff;\n }\n\n .icon-button {\n display: inline-grid;\n place-items: center;\n width: 44px;\n height: 44px;\n padding: 0;\n border: 0;\n border-radius: 50%;\n background: transparent;\n color: var(--gold);\n cursor: pointer;\n transition: color .2s ease, background-color .2s ease, transform .2s ease;\n }\n\n .icon-button:hover {\n color: var(--gold-dark);\n background: rgba(166, 137, 96, .08);\n }\n\n .icon-button:active {\n transform: scale(.92);\n }\n\n \/* Hero *\/\n .hero {\n min-height: min(896px, 51.05cqw);\n display: grid;\n place-items: center;\n isolation: isolate;\n background: url(\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/hero-clean.webp\") center \/ cover no-repeat;\n }\n\n .hero::before {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: -1;\n background: rgba(42, 27, 12, .06);\n }\n\n .hero__copy {\n width: min(72%, 1120px);\n margin-top: 2.2%;\n color: #fff;\n text-align: center;\n text-shadow: 0 1px 2px rgba(50, 30, 12, .08);\n }\n\n .hero__copy h1 {\n margin: 0;\n font-size: clamp(26px, 3.25cqw, 59px);\n font-weight: 700;\n line-height: 1.18;\n letter-spacing: .012em;\n }\n\n .hero__copy p {\n margin: 1.25em 0 2em;\n font-size: clamp(11px, 1.26cqw, 23px);\n font-weight: 400;\n line-height: 1.45;\n letter-spacing: .004em;\n }\n\n .hero .btn {\n min-width: 9.86cqw;\n height: 3.14cqw;\n min-height: 32px;\n font-size: clamp(11px, .8cqw, 15px);\n }\n\n \/* Classify *\/\n .classify {\n min-height: min(1233px, 64.12cqw);\n padding: 4.1cqw 6.5cqw 8.7cqw;\n background: #fff;\n }\n\n .category-shell {\n position: relative;\n margin-top: 3.4cqw;\n padding: 0 3.1cqw;\n }\n\n .category-list {\n display: grid;\n grid-template-columns: repeat(9, minmax(0, 1fr));\n align-items: stretch;\n gap: 1.1cqw;\n }\n\n .category {\n min-width: 0;\n padding: .75cqw .25cqw .7cqw;\n border: 0;\n border-radius: 12px;\n background: transparent;\n color: #c3ae8e;\n cursor: pointer;\n transition: color .22s ease, opacity .22s ease, background-color .22s ease;\n }\n\n .category img {\n display: block;\n width: clamp(25px, 2.9cqw, 56px);\n height: auto;\n margin: 0 auto .85cqw;\n opacity: .62;\n transition: opacity .22s ease, filter .22s ease;\n }\n\n .category span {\n display: block;\n font-size: clamp(7px, .74cqw, 14px);\n line-height: 1.42;\n }\n\n .category:hover,\n .category.is-active {\n color: #7e5e32;\n }\n\n .category:hover img,\n .category.is-active img {\n opacity: 1;\n filter: saturate(1.25) contrast(1.08);\n }\n\n .category.is-active {\n background: rgba(255, 252, 248, .7);\n }\n\n .category-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n color: #d2d2d2;\n }\n\n .category-arrow:hover {\n transform: translateY(-50%);\n }\n\n .category-arrow--prev {\n left: -1.2cqw;\n }\n\n .category-arrow--next {\n right: -1.2cqw;\n }\n\n .product-showcase {\n display: grid;\n grid-template-columns: 1.72fr 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n gap: 1.15cqw;\n margin-top: 2cqw;\n }\n\n .product-card {\n position: relative;\n min-height: 18cqw;\n overflow: hidden;\n border: 0;\n background: #f6f6f6;\n color: #222;\n cursor: pointer;\n }\n\n .product-card--featured {\n grid-row: 1 \/ 3;\n }\n\n .product-card img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform .55s cubic-bezier(.2, .7, .2, 1);\n }\n\n .product-card:not(.product-card--featured) img {\n height: 77%;\n object-fit: cover;\n }\n\n .product-card span {\n position: absolute;\n right: 0;\n bottom: 7%;\n left: 0;\n font-size: clamp(9px, .78cqw, 15px);\n text-align: center;\n }\n\n .product-card:hover img {\n transform: scale(1.025);\n }\n\n \/* About *\/\n .about {\n min-height: min(1040px, 54.08cqw);\n padding: 4.6cqw 6.4cqw 0;\n isolation: isolate;\n background: #f7f7f7;\n text-align: center;\n }\n\n .about::before {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: -1;\n background:\n linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)),\n url(\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/about-factory-clean.webp\") center \/ cover no-repeat;\n clip-path: inset(0 0 10.2% 0);\n }\n\n .about__copy {\n max-width: 1070px;\n margin: 1.5cqw auto 0;\n color: #444;\n font-size: clamp(8px, .8cqw, 15px);\n line-height: 1.5;\n }\n\n .about .btn {\n margin-top: 2.8cqw;\n }\n\n .play-button {\n position: absolute;\n top: 47.7%;\n left: 50%;\n display: grid;\n place-items: center;\n width: clamp(46px, 4cqw, 72px);\n aspect-ratio: 1;\n padding: 0;\n border: 6px solid rgba(255, 255, 255, .32);\n border-radius: 50%;\n background: rgba(255, 255, 255, .9);\n color: #977546;\n cursor: pointer;\n transform: translate(-50%, -50%);\n transition: background-color .25s ease, color .25s ease, border-color .25s ease;\n }\n\n .play-button:hover {\n border-color: rgba(255, 255, 255, .55);\n background: var(--gold);\n color: #fff;\n }\n\n .play-button i {\n margin-left: 4%;\n font-size: clamp(14px, 1.15cqw, 22px);\n }\n\n .stats {\n position: absolute;\n right: 6.3%;\n bottom: 0;\n left: 6.3%;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n min-height: 31.1%;\n padding: 3.4cqw 2.6cqw 2.4cqw;\n background: rgba(255, 255, 255, .82);\n }\n\n .stat {\n color: #333;\n text-align: center;\n }\n\n .stat i {\n display: block;\n margin-bottom: 1.75cqw;\n color: var(--gold);\n font-size: clamp(18px, 2.1cqw, 40px);\n }\n\n .stat__value {\n display: inline-block;\n font-size: clamp(28px, 3.25cqw, 62px);\n font-weight: 400;\n line-height: 1;\n }\n\n .stat__unit {\n margin-left: .65em;\n font-size: clamp(8px, .75cqw, 14px);\n }\n\n .stat p {\n margin: 1.55cqw 0 0;\n font-size: clamp(8px, .8cqw, 15px);\n }\n\n \/* Advantages *\/\n .advantages {\n min-height: min(840px, 43.68cqw);\n padding: 5.7cqw 6.15cqw 4.2cqw;\n background: #f7f7f7;\n }\n\n .advantages-stage {\n position: relative;\n margin-top: 4cqw;\n }\n\n .advantages-viewport {\n overflow: hidden;\n }\n\n .advantages-track {\n display: flex;\n transition: transform .65s cubic-bezier(.22, .7, .2, 1);\n }\n\n .advantage-slide {\n flex: 0 0 100%;\n display: grid;\n grid-template-columns: 38.7% 36.8% 24.5%;\n min-width: 0;\n background: #fff;\n }\n\n .advantage-slide > img {\n width: 100%;\n height: 23.6cqw;\n max-height: 471px;\n object-fit: cover;\n }\n\n .advantage-copy {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 4cqw 5.2cqw;\n text-align: left;\n }\n\n .advantage-copy h3 {\n margin: 0 0 2.3cqw;\n font-size: clamp(13px, 1.05cqw, 20px);\n line-height: 1.3;\n }\n\n .advantage-copy p {\n margin: 0 0 2.5cqw;\n color: #666;\n font-size: clamp(8px, .78cqw, 15px);\n line-height: 1.55;\n }\n\n .advantage-slide--reverse {\n grid-template-columns: 24.5% 36.8% 38.7%;\n }\n\n .advantage-slide--reverse .advantage-copy {\n grid-column: 2;\n grid-row: 1;\n }\n\n .advantage-slide--reverse .advantage-photo {\n grid-column: 3;\n grid-row: 1;\n }\n\n .advantage-arrow {\n position: absolute;\n top: 50%;\n z-index: 3;\n transform: translateY(-50%);\n }\n\n .advantage-arrow:hover {\n transform: translateY(-50%);\n }\n\n .advantage-arrow--prev {\n left: -3.7cqw;\n }\n\n .advantage-arrow--next {\n right: -3.7cqw;\n }\n\n .dots {\n display: flex;\n justify-content: center;\n gap: 12px;\n margin-top: 2.7cqw;\n }\n\n .dot {\n width: 9px;\n height: 9px;\n padding: 0;\n border: 1px solid var(--gold);\n border-radius: 50%;\n background: #fff;\n cursor: pointer;\n }\n\n .dot.is-active {\n background: var(--gold);\n }\n\n \/* Applications *\/\n .applications {\n min-height: min(945px, 49.14cqw);\n padding: 4.6cqw 6.1cqw 2.4cqw;\n background: #fff;\n }\n\n .applications-hero {\n width: 100%;\n height: 33.1cqw;\n max-height: 637px;\n margin-top: 3.4cqw;\n object-fit: cover;\n }\n\n .applications-stage {\n position: relative;\n margin-top: 1.25cqw;\n }\n\n .applications-viewport {\n overflow: hidden;\n }\n\n .applications-track {\n display: flex;\n gap: 1.2%;\n transition: transform .62s cubic-bezier(.22, .7, .2, 1);\n will-change: transform;\n }\n\n .application-card {\n position: relative;\n flex: 0 0 24.1%;\n min-width: 0;\n height: 9.15cqw;\n max-height: 177px;\n padding: 1.65cqw 2.2cqw;\n overflow: hidden;\n border: 0;\n background: #f4f4f4;\n color: #333;\n text-align: left;\n cursor: pointer;\n transition: background-color .25s ease, color .25s ease, transform .25s ease;\n }\n\n .application-card--image {\n isolation: isolate;\n background: #f4f4f4;\n color: #333;\n }\n\n .application-card--image::before {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: -2;\n background: url(\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/application-building-clean.webp\") center \/ cover no-repeat;\n opacity: 0;\n transform: scale(1.035);\n transition: opacity .35s ease, transform .65s cubic-bezier(.2, .7, .2, 1);\n }\n\n .application-card--image::after {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: -1;\n background: rgba(90, 72, 45, .4);\n opacity: 0;\n transition: opacity .35s ease;\n }\n\n .application-card:hover {\n background-color: #eeeae4;\n }\n\n .application-card--image:hover,\n .application-card--image:focus-visible {\n background-color: #8f7a5d;\n color: #fff;\n transform: translateY(-2px);\n }\n\n .application-card--image:hover::before,\n .application-card--image:focus-visible::before {\n opacity: 1;\n transform: scale(1);\n }\n\n .application-card--image:hover::after,\n .application-card--image:focus-visible::after {\n opacity: 1;\n }\n\n .application-card strong,\n .application-card span {\n display: block;\n max-width: 88%;\n }\n\n .application-card strong {\n margin-bottom: 1cqw;\n font-size: clamp(10px, .9cqw, 17px);\n line-height: 1.25;\n }\n\n .application-card span {\n color: #777;\n font-size: clamp(7px, .7cqw, 13px);\n line-height: 1.5;\n }\n\n .application-card--image:hover span,\n .application-card--image:focus-visible span {\n color: rgba(255, 255, 255, .9);\n }\n\n .application-card i {\n position: absolute;\n top: 50%;\n right: 5%;\n transform: translateY(-50%);\n }\n\n .applications-arrow {\n position: absolute;\n top: 50%;\n z-index: 3;\n transform: translateY(-50%);\n }\n\n .applications-arrow:hover {\n transform: translateY(-50%);\n }\n\n .applications-arrow--prev {\n left: -4cqw;\n }\n\n .applications-arrow--next {\n right: -4cqw;\n }\n\n .carousel-status {\n position: absolute;\n right: 0;\n top: -2cqw;\n color: #aaa;\n font-size: clamp(8px, .68cqw, 13px);\n }\n\n \/* News *\/\n .news {\n min-height: min(970px, 50.44cqw);\n padding: 4.5cqw 5.65cqw 4cqw;\n background: #fff;\n }\n\n .news-grid {\n display: grid;\n grid-template-columns: 1.08fr 1fr;\n gap: 3.25cqw;\n margin-top: 3.35cqw;\n }\n\n .featured-news,\n .news-row {\n border: 0;\n background: transparent;\n color: #222;\n text-align: left;\n cursor: pointer;\n }\n\n .featured-news {\n padding: 0;\n }\n\n .featured-news img {\n display: block;\n width: 100%;\n height: 25.65cqw;\n max-height: 493px;\n object-fit: cover;\n }\n\n .featured-news h3 {\n margin: 2cqw 1cqw 1.25cqw;\n font-size: clamp(14px, 1.25cqw, 24px);\n font-weight: 400;\n line-height: 1.35;\n }\n\n .featured-news p {\n margin: 0 0 0;\n color: #9999aa;\n font-size: clamp(8px, .72cqw, 14px);\n line-height: 1.55;\n }\n\n .news-list {\n display: grid;\n grid-template-rows: repeat(3, 1fr);\n }\n\n .news-row {\n display: grid;\n grid-template-columns: 14% 34% 1fr 28px;\n align-items: center;\n gap: 1.5cqw;\n padding: 0;\n border-bottom: 1px solid #ddd;\n }\n\n .news-date strong {\n display: block;\n color: #bbb;\n font-size: clamp(26px, 2.55cqw, 49px);\n font-weight: 400;\n line-height: 1;\n }\n\n .news-date span {\n display: block;\n margin-top: .65cqw;\n color: #bbb;\n font-size: clamp(8px, .75cqw, 14px);\n }\n\n .news-row img {\n width: 100%;\n height: 7.45cqw;\n max-height: 143px;\n object-fit: cover;\n }\n\n .news-row h3 {\n margin: 0;\n font-size: clamp(13px, 1.18cqw, 23px);\n font-weight: 400;\n line-height: 1.4;\n }\n\n .news-row > i {\n color: #aaa;\n transition: color .2s ease, transform .2s ease;\n }\n\n .featured-news img,\n .news-row img {\n transition: filter .3s ease;\n }\n\n .featured-news:hover img,\n .news-row:hover img {\n filter: brightness(.96);\n }\n\n .news-row:hover > i {\n color: var(--gold);\n transform: translateX(4px);\n }\n\n .news-more-wrap {\n margin-top: 3.2cqw;\n text-align: center;\n }\n\n \/* Dialogs *\/\n .creade-dialog {\n width: min(92cqw, 720px);\n padding: 0;\n overflow: hidden;\n border: 0;\n border-radius: 18px;\n background: #fff;\n color: #222;\n box-shadow: 0 28px 80px rgba(0, 0, 0, .25);\n }\n\n .creade-dialog::backdrop {\n background: rgba(22, 18, 14, .58);\n backdrop-filter: blur(5px);\n }\n\n .dialog-copy {\n padding: clamp(28px, 4cqw, 58px);\n }\n\n .dialog-copy small {\n color: var(--gold);\n font-size: 12px;\n letter-spacing: .14em;\n text-transform: uppercase;\n }\n\n .dialog-copy h2 {\n margin: 13px 0 18px;\n font-size: clamp(26px, 3cqw, 42px);\n line-height: 1.16;\n }\n\n .dialog-copy p {\n margin: 0 0 28px;\n color: #666;\n line-height: 1.7;\n }\n\n .dialog-actions {\n display: flex;\n gap: 12px;\n }\n\n .dialog-actions .btn {\n min-width: 120px;\n height: 42px;\n }\n\n .video-dialog {\n width: min(94cqw, 1100px);\n background: #111;\n }\n\n .video-dialog video {\n display: block;\n width: 100%;\n background: #000;\n }\n\n .video-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n padding: 15px 20px;\n color: #fff;\n }\n\n .video-bar button {\n border: 0;\n background: transparent;\n color: #fff;\n cursor: pointer;\n }\n\n .toast {\n position: fixed;\n right: 24px;\n bottom: 24px;\n z-index: 20;\n max-width: min(360px, calc(100cqw - 48px));\n padding: 13px 18px;\n border-radius: 999px;\n background: #211b15;\n color: #fff;\n font-size: 13px;\n opacity: 0;\n pointer-events: none;\n transform: translateY(10px);\n transition: opacity .25s ease, transform .25s ease;\n }\n\n .toast.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .scroll-progress {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 30;\n width: 0;\n height: 3px;\n background: var(--gold);\n }\n\n .reveal {\n opacity: 0;\n transform: translateY(24px);\n transition: opacity .7s ease, transform .7s ease;\n }\n\n .reveal.is-visible {\n opacity: 1;\n transform: none;\n }\n\n @media (max-width: 900px) {\n .hero {\n min-height: 64cqw;\n }\n\n .hero__copy {\n width: 84%;\n }\n\n .classify {\n padding-inline: 4cqw;\n }\n\n .category-list {\n grid-template-columns: repeat(5, 1fr);\n }\n\n .product-showcase {\n grid-template-columns: 1.25fr 1fr;\n }\n\n .stats {\n right: 3.5%;\n left: 3.5%;\n }\n\n .advantage-slide,\n .advantage-slide--reverse {\n grid-template-columns: 1fr;\n }\n\n .advantage-slide > img,\n .advantage-slide > img:last-child,\n .advantage-slide--reverse > img:first-child,\n .advantage-slide--reverse .advantage-photo {\n display: block;\n grid-column: 1;\n grid-row: auto;\n height: 46cqw;\n max-height: none;\n }\n\n .advantage-copy,\n .advantage-slide--reverse .advantage-copy {\n grid-column: 1;\n grid-row: auto;\n }\n\n .application-card {\n flex-basis: 49.4%;\n height: 14cqw;\n }\n }\n\n @media (max-width: 640px) {\n .hero {\n min-height: 72cqw;\n background-position: 55% center;\n }\n\n .hero__copy {\n margin-top: 0;\n }\n\n .hero__copy h1 {\n font-size: 6cqw;\n }\n\n .hero__copy p {\n margin: 1em 0 1.4em;\n font-size: 2.5cqw;\n }\n\n .hero .btn {\n min-width: 25cqw;\n height: 8cqw;\n }\n\n .classify {\n min-height: auto;\n padding: 10cqw 5cqw;\n }\n\n .category-shell {\n margin-top: 7cqw;\n }\n\n .category-list {\n grid-template-columns: repeat(3, 1fr);\n }\n\n .category img {\n margin-bottom: 2cqw;\n }\n\n .category span {\n font-size: 2.4cqw;\n }\n\n .product-showcase {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: auto;\n gap: 2.5cqw;\n margin-top: 6cqw;\n }\n\n .product-card,\n .product-card--featured {\n grid-row: auto;\n min-height: 38cqw;\n }\n\n .product-card--featured {\n grid-column: 1 \/ -1;\n min-height: 70cqw;\n }\n\n .product-card span {\n font-size: 2.5cqw;\n }\n\n .about {\n min-height: 136cqw;\n padding: 10cqw 6cqw 0;\n background-position: 58% center;\n }\n\n .about__copy {\n font-size: 2.5cqw;\n }\n\n .about .btn {\n margin-top: 5cqw;\n }\n\n .play-button {\n top: 48%;\n }\n\n .stats {\n grid-template-columns: repeat(2, 1fr);\n gap: 5cqw 2cqw;\n min-height: 45%;\n padding: 6cqw 3cqw;\n }\n\n .stat i {\n margin-bottom: 2cqw;\n }\n\n .stat p {\n margin-top: 2cqw;\n }\n\n .advantages {\n min-height: auto;\n padding: 10cqw 5cqw 8cqw;\n }\n\n .advantages-stage {\n margin-top: 7cqw;\n }\n\n .advantage-slide,\n .advantage-slide--reverse {\n grid-template-columns: 1fr;\n }\n\n .advantage-slide > img,\n .advantage-slide--reverse .advantage-photo {\n display: block;\n grid-column: 1;\n grid-row: auto;\n height: 64cqw;\n }\n\n .advantage-copy,\n .advantage-slide--reverse .advantage-copy {\n grid-column: 1;\n grid-row: auto;\n padding: 8cqw;\n }\n\n .advantage-copy h3 {\n margin-bottom: 4cqw;\n }\n\n .advantage-copy p {\n margin-bottom: 5cqw;\n }\n\n .applications {\n min-height: auto;\n padding: 10cqw 5cqw 8cqw;\n }\n\n .applications-hero {\n height: 54cqw;\n margin-top: 7cqw;\n }\n\n .applications-stage {\n margin-top: 3cqw;\n }\n\n .application-card {\n flex-basis: 100%;\n height: 30cqw;\n max-height: none;\n padding: 5cqw;\n }\n\n .application-card strong {\n margin-bottom: 2cqw;\n font-size: 3.2cqw;\n }\n\n .application-card span {\n font-size: 2.4cqw;\n }\n\n .news {\n min-height: auto;\n padding: 10cqw 5cqw 12cqw;\n }\n\n .news-grid {\n grid-template-columns: 1fr;\n gap: 8cqw;\n margin-top: 7cqw;\n }\n\n .featured-news img {\n height: 57cqw;\n }\n\n .featured-news h3 {\n margin: 4cqw 0 2cqw;\n }\n\n .news-list {\n gap: 4cqw;\n }\n\n .news-row {\n grid-template-columns: 15% 30% 1fr 18px;\n gap: 3cqw;\n padding-bottom: 4cqw;\n }\n\n .news-row img {\n height: 18cqw;\n }\n\n .news-more-wrap {\n margin-top: 8cqw;\n }\n }\n\n \/*\n * WordPress theme isolation\n * Many themes apply !important typography rules to h1\/h2\/h3\/p.\n * These scoped declarations preserve the original Creade sizing\n * without changing any typography outside #creade-page.\n *\/\n #creade-page h1,\n #creade-page h2,\n #creade-page h3,\n #creade-page p,\n #creade-page span,\n #creade-page strong,\n #creade-page button,\n #creade-page a {\n font-family: Arial, \"Microsoft YaHei\", sans-serif !important;\n font-style: normal !important;\n text-transform: none !important;\n text-decoration: none !important;\n }\n\n #creade-page .section-title {\n margin: 0 !important;\n padding: 0 !important;\n color: #111 !important;\n font-size: clamp(25px, 2.38cqw, 46px) !important;\n font-weight: 400 !important;\n line-height: 1.15 !important;\n letter-spacing: 0 !important;\n text-align: center !important;\n }\n\n #creade-page .hero__copy h1 {\n margin: 0 !important;\n padding: 0 !important;\n color: #fff !important;\n font-size: clamp(26px, 3.25cqw, 59px) !important;\n font-weight: 700 !important;\n line-height: 1.18 !important;\n letter-spacing: .012em !important;\n text-align: center !important;\n }\n\n #creade-page .hero__copy p {\n margin: 1.25em 0 2em !important;\n padding: 0 !important;\n color: #fff !important;\n font-size: clamp(11px, 1.26cqw, 23px) !important;\n font-weight: 400 !important;\n line-height: 1.45 !important;\n letter-spacing: .004em !important;\n text-align: center !important;\n }\n\n #creade-page .about__copy {\n display: block !important;\n width: min(100%, 1070px) !important;\n max-width: 1070px !important;\n margin: 1.5cqw auto 0 !important;\n padding: 0 !important;\n color: #444 !important;\n font-size: clamp(8px, .8cqw, 15px) !important;\n font-weight: 400 !important;\n line-height: 1.5 !important;\n letter-spacing: 0 !important;\n text-align: center !important;\n white-space: normal !important;\n }\n\n #creade-page .stat__value {\n font-size: clamp(28px, 3.25cqw, 62px) !important;\n font-weight: 400 !important;\n line-height: 1 !important;\n letter-spacing: 0 !important;\n }\n\n #creade-page .stat__unit {\n font-size: clamp(8px, .75cqw, 14px) !important;\n font-weight: 400 !important;\n line-height: 1 !important;\n }\n\n #creade-page .stat p {\n margin: 1.55cqw 0 0 !important;\n padding: 0 !important;\n font-size: clamp(8px, .8cqw, 15px) !important;\n font-weight: 400 !important;\n line-height: 1.4 !important;\n letter-spacing: 0 !important;\n text-align: center !important;\n }\n\n #creade-page .advantage-copy h3 {\n margin: 0 0 2.3cqw !important;\n padding: 0 !important;\n color: #222 !important;\n font-size: clamp(13px, 1.05cqw, 20px) !important;\n font-weight: 700 !important;\n line-height: 1.3 !important;\n letter-spacing: 0 !important;\n }\n\n #creade-page .advantage-copy p {\n margin: 0 0 2.5cqw !important;\n padding: 0 !important;\n color: #666 !important;\n font-size: clamp(8px, .78cqw, 15px) !important;\n font-weight: 400 !important;\n line-height: 1.55 !important;\n letter-spacing: 0 !important;\n }\n\n #creade-page .application-card strong {\n margin: 0 0 1cqw !important;\n padding: 0 !important;\n font-size: clamp(10px, .9cqw, 17px) !important;\n font-weight: 700 !important;\n line-height: 1.25 !important;\n letter-spacing: 0 !important;\n }\n\n #creade-page .application-card span {\n margin: 0 !important;\n padding: 0 !important;\n font-size: clamp(7px, .7cqw, 13px) !important;\n font-weight: 400 !important;\n line-height: 1.5 !important;\n letter-spacing: 0 !important;\n }\n\n #creade-page .featured-news h3 {\n margin: 2cqw 1cqw 1.25cqw !important;\n padding: 0 !important;\n color: #222 !important;\n font-size: clamp(14px, 1.25cqw, 24px) !important;\n font-weight: 400 !important;\n line-height: 1.35 !important;\n letter-spacing: 0 !important;\n }\n\n #creade-page .featured-news p {\n margin: 0 !important;\n padding: 0 !important;\n color: #9999aa !important;\n font-size: clamp(8px, .72cqw, 14px) !important;\n font-weight: 400 !important;\n line-height: 1.55 !important;\n letter-spacing: 0 !important;\n }\n\n #creade-page .news-row h3 {\n margin: 0 !important;\n padding: 0 !important;\n color: #222 !important;\n font-size: clamp(13px, 1.18cqw, 23px) !important;\n font-weight: 400 !important;\n line-height: 1.4 !important;\n letter-spacing: 0 !important;\n }\n\n #creade-page .dialog-copy h2 {\n margin: 13px 0 18px !important;\n padding: 0 !important;\n font-size: clamp(26px, 3cqw, 42px) !important;\n font-weight: 700 !important;\n line-height: 1.16 !important;\n letter-spacing: 0 !important;\n }\n\n #creade-page .dialog-copy p {\n margin: 0 0 28px !important;\n padding: 0 !important;\n color: #666 !important;\n font-size: 16px !important;\n font-weight: 400 !important;\n line-height: 1.7 !important;\n letter-spacing: 0 !important;\n }\n\n #creade-page .btn {\n font-size: clamp(10px, .78cqw, 15px) !important;\n font-weight: 400 !important;\n line-height: 1 !important;\n letter-spacing: 0 !important;\n }\n\n @media (max-width: 640px) {\n #creade-page .hero__copy h1 {\n font-size: 6cqw !important;\n }\n\n #creade-page .hero__copy p {\n margin: 1em 0 1.4em !important;\n font-size: 2.5cqw !important;\n }\n\n #creade-page .about__copy {\n font-size: 2.5cqw !important;\n }\n\n #creade-page .advantage-copy h3 {\n margin-bottom: 4cqw !important;\n }\n\n #creade-page .advantage-copy p {\n margin-bottom: 5cqw !important;\n }\n\n #creade-page .application-card strong {\n margin-bottom: 2cqw !important;\n font-size: 3.2cqw !important;\n }\n\n #creade-page .application-card span {\n font-size: 2.4cqw !important;\n }\n\n #creade-page .featured-news h3 {\n margin: 4cqw 0 2cqw !important;\n }\n }\n\n \/* Mobile layout: desktop styling is retained; only spacing, flow and tap areas adapt. *\/\n @media (max-width: 640px) {\n #creade-page {\n --mobile-gutter: clamp(16px, 5cqw, 24px);\n width: 100% !important;\n max-width: 100% !important;\n margin: 0 auto !important;\n overflow-x: hidden;\n }\n\n #creade-page img,\n #creade-page video {\n max-width: 100%;\n }\n\n #creade-page .section-title {\n font-size: clamp(25px, 7cqw, 32px) !important;\n line-height: 1.15 !important;\n }\n\n #creade-page .hero {\n min-height: clamp(500px, 118cqw, 580px);\n padding: 14cqw var(--mobile-gutter) 12cqw;\n background-position: 58% center;\n }\n\n #creade-page .hero__copy {\n width: 94%;\n max-width: 520px;\n }\n\n #creade-page .hero__copy h1 {\n font-size: clamp(27px, 7.4cqw, 36px) !important;\n line-height: 1.16 !important;\n overflow-wrap: anywhere;\n }\n\n #creade-page .hero__copy p {\n margin: 1em 0 1.5em !important;\n font-size: clamp(12px, 3.2cqw, 15px) !important;\n line-height: 1.55 !important;\n }\n\n #creade-page .btn,\n #creade-page .hero .btn {\n min-height: 44px;\n height: 44px;\n padding: 0 22px;\n }\n\n #creade-page .classify {\n padding: 14cqw var(--mobile-gutter) 12cqw;\n }\n\n #creade-page .category-shell {\n margin-top: 8cqw;\n padding: 0;\n }\n\n #creade-page .category-list {\n display: flex;\n gap: 12px;\n overflow-x: auto;\n padding: 4px 13cqw 12px;\n scroll-behavior: smooth;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n -webkit-overflow-scrolling: touch;\n }\n\n #creade-page .category-list::-webkit-scrollbar {\n display: none;\n }\n\n #creade-page .category,\n #creade-page .category:nth-child(n) {\n display: block;\n flex: 0 0 94px;\n min-height: 116px;\n scroll-snap-align: center;\n }\n\n #creade-page .category-arrow {\n z-index: 5;\n width: 40px;\n height: 40px;\n background: rgba(255, 255, 255, .9);\n }\n\n #creade-page .category-arrow--prev {\n left: -2px;\n }\n\n #creade-page .category-arrow--next {\n right: -2px;\n }\n\n #creade-page .product-showcase {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 2px;\n margin-top: 7cqw;\n }\n\n #creade-page .product-card:nth-child(n) {\n display: block;\n }\n\n #creade-page .product-card--featured {\n grid-column: 1 \/ -1;\n min-height: 72cqw;\n }\n\n #creade-page .product-card:not(.product-card--featured) {\n min-height: 43cqw;\n }\n\n #creade-page .product-card:not(.product-card--featured) img {\n height: 75%;\n }\n\n #creade-page .about {\n min-height: clamp(690px, 170cqw, 850px);\n max-height: none;\n padding: 14cqw var(--mobile-gutter) 0;\n }\n\n #creade-page .about::before {\n background-position: 58% center;\n clip-path: inset(0 0 12% 0);\n }\n\n #creade-page .about__copy {\n width: 94% !important;\n max-width: 94% !important;\n margin-top: 4cqw !important;\n font-size: clamp(10px, 2.8cqw, 12px) !important;\n line-height: 1.5 !important;\n }\n\n #creade-page .about__copy br {\n display: none;\n }\n\n #creade-page .about .btn {\n margin-top: 5cqw;\n }\n\n #creade-page .play-button {\n top: 43%;\n width: 56px;\n height: 56px;\n border-width: 5px;\n }\n\n #creade-page .stats {\n right: 4%;\n bottom: 0;\n left: 4%;\n min-height: 46%;\n padding: 7cqw 3cqw;\n gap: 5cqw 2cqw;\n }\n\n #creade-page .stat__value {\n font-size: clamp(30px, 9cqw, 42px) !important;\n }\n\n #creade-page .stat__unit {\n font-size: 10px !important;\n }\n\n #creade-page .stat p {\n font-size: clamp(9px, 2.5cqw, 11px) !important;\n }\n\n #creade-page .advantages {\n padding: 14cqw var(--mobile-gutter) 11cqw;\n }\n\n #creade-page .advantage-arrow,\n #creade-page .applications-arrow {\n z-index: 6;\n width: 44px;\n height: 44px;\n background: rgba(255, 255, 255, .9);\n }\n\n #creade-page .advantage-arrow {\n top: 31%;\n }\n\n #creade-page .advantage-arrow--prev {\n left: -2px;\n }\n\n #creade-page .advantage-arrow--next {\n right: -2px;\n }\n\n #creade-page .advantage-slide > img {\n height: 72cqw;\n }\n\n #creade-page .advantage-copy {\n padding: 8cqw 7cqw 9cqw;\n }\n\n #creade-page .advantage-copy h3 {\n margin-bottom: 4cqw !important;\n font-size: 18px !important;\n }\n\n #creade-page .advantage-copy p {\n margin-bottom: 5cqw !important;\n font-size: 12px !important;\n }\n\n #creade-page .dots {\n margin-top: 5cqw;\n }\n\n #creade-page .applications {\n padding: 14cqw var(--mobile-gutter) 11cqw;\n }\n\n #creade-page .applications-hero {\n height: 58cqw;\n }\n\n #creade-page .applications-stage {\n margin-top: 5cqw;\n }\n\n #creade-page .application-card {\n height: 36cqw;\n min-height: 138px;\n padding: 6cqw;\n }\n\n #creade-page .application-card strong {\n margin-bottom: 2cqw !important;\n font-size: 15px !important;\n }\n\n #creade-page .application-card span {\n font-size: 11px !important;\n line-height: 1.45 !important;\n }\n\n #creade-page .applications-arrow--prev {\n left: -2px;\n }\n\n #creade-page .applications-arrow--next {\n right: -2px;\n }\n\n #creade-page .carousel-status {\n top: -5cqw;\n font-size: 10px;\n }\n\n #creade-page .news {\n padding: 14cqw var(--mobile-gutter);\n }\n\n #creade-page .news-grid {\n gap: 9cqw;\n }\n\n #creade-page .featured-news img {\n height: 58cqw;\n }\n\n #creade-page .featured-news h3 {\n margin: 4cqw 0 2cqw !important;\n font-size: 18px !important;\n }\n\n #creade-page .featured-news p {\n font-size: 11px !important;\n }\n\n #creade-page .news-list {\n gap: 0;\n }\n\n #creade-page .news-row {\n grid-template-columns: 58px 100px minmax(0, 1fr) 16px;\n gap: 12px;\n min-height: 0;\n padding: 16px 0;\n }\n\n #creade-page .news-row img {\n width: 100%;\n height: 64px;\n }\n\n #creade-page .news-row h3 {\n font-size: 14px !important;\n line-height: 1.35 !important;\n overflow-wrap: anywhere;\n }\n\n #creade-page .news-date strong {\n font-size: 28px !important;\n }\n\n #creade-page .news-date span {\n font-size: 9px !important;\n }\n\n #creade-page .creade-dialog {\n width: calc(100cqw - 28px);\n max-height: calc(100vh - 28px);\n }\n\n #creade-page .dialog-copy {\n padding: 28px 22px;\n overflow-wrap: anywhere;\n }\n\n #creade-page .dialog-actions {\n flex-direction: column;\n }\n\n #creade-page .dialog-actions .btn {\n width: 100%;\n }\n\n #creade-page .video-bar {\n padding: 12px 14px;\n }\n\n #creade-page .toast {\n right: 14px;\n bottom: 14px;\n left: 14px;\n max-width: none;\n border-radius: 12px;\n text-align: center;\n }\n }\n\n @media (max-width: 430px) {\n #creade-page {\n --mobile-gutter: clamp(14px, 4.5cqw, 19px);\n }\n\n #creade-page .hero {\n min-height: clamp(480px, 132cqw, 560px);\n background-position: 60% center;\n }\n\n #creade-page .hero__copy {\n width: 100%;\n }\n\n #creade-page .hero__copy h1 {\n font-size: clamp(25px, 7.6cqw, 32px) !important;\n }\n\n #creade-page .hero__copy p {\n font-size: clamp(11px, 3.25cqw, 14px) !important;\n }\n\n #creade-page .category-list {\n padding-right: 15cqw;\n padding-left: 15cqw;\n }\n\n #creade-page .category,\n #creade-page .category:nth-child(n) {\n flex-basis: 88px;\n }\n\n #creade-page .product-card:not(.product-card--featured) {\n min-height: 47cqw;\n }\n\n #creade-page .about {\n min-height: clamp(680px, 184cqw, 790px);\n }\n\n #creade-page .about__copy {\n width: 100% !important;\n max-width: 100% !important;\n }\n\n #creade-page .stats {\n right: var(--mobile-gutter);\n left: var(--mobile-gutter);\n }\n\n #creade-page .advantage-copy {\n padding: 28px 24px 32px;\n }\n\n #creade-page .application-card {\n height: auto;\n min-height: 142px;\n padding: 24px 22px;\n }\n\n #creade-page .news-row {\n grid-template-columns: 52px 88px minmax(0, 1fr) 14px;\n gap: 10px;\n }\n\n #creade-page .news-row img {\n height: 60px;\n }\n }\n\n @media (max-width: 380px) {\n #creade-page {\n --mobile-gutter: 14px;\n }\n\n #creade-page .section-title {\n font-size: 24px !important;\n }\n\n #creade-page .product-showcase {\n grid-template-columns: 1fr;\n gap: 8px;\n }\n\n #creade-page .product-card--featured,\n #creade-page .product-card:not(.product-card--featured) {\n grid-column: 1;\n min-height: 62cqw;\n }\n\n #creade-page .product-card--featured {\n min-height: 78cqw;\n }\n\n #creade-page .product-card:not(.product-card--featured) img {\n height: 78%;\n }\n\n #creade-page .about {\n min-height: 700px;\n }\n\n #creade-page .play-button {\n width: 52px;\n height: 52px;\n }\n\n #creade-page .stats {\n gap: 24px 8px;\n padding: 28px 8px;\n }\n\n #creade-page .applications-hero {\n height: 62cqw;\n }\n\n #creade-page .news-row {\n grid-template-columns: 46px 76px minmax(0, 1fr) 10px;\n gap: 8px;\n }\n\n #creade-page .news-row h3 {\n font-size: 12px !important;\n }\n\n #creade-page .news-row img {\n height: 56px;\n }\n\n #creade-page .dialog-copy {\n padding: 24px 18px;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n scroll-behavior: auto !important;\n animation-duration: .01ms !important;\n transition-duration: .01ms !important;\n }\n\n .reveal {\n opacity: 1;\n transform: none;\n }\n }\n <\/style>\n<\/head>\n<body>\n <main id=\"creade-page\">\n <section class=\"creade-section hero\" id=\"home\" aria-labelledby=\"hero-title\">\n <div class=\"hero__copy\">\n <h1 id=\"hero-title\">Lorem ipsum dolor<br>sit amet, consectetur adipiscing elit<\/h1>\n <p>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit<\/p>\n <button class=\"btn\" type=\"button\" data-open-content\n data-label=\"Creade\"\n data-title=\"Hospitality appliances, thoughtfully designed.\"\n data-copy=\"Explore Creade electric kettles and high-speed hair dryers created for premium guest-room experiences.\">\n Learn More <i class=\"fa-solid fa-chevron-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <\/div>\n <\/section>\n\n <section class=\"creade-section classify reveal\" id=\"classify\" aria-labelledby=\"classify-title\">\n <h2 class=\"section-title\" id=\"classify-title\">Classify<\/h2>\n <div class=\"category-shell\" aria-label=\"Product categories\">\n <button class=\"icon-button category-arrow category-arrow--prev\" type=\"button\" data-category-step=\"-1\" aria-label=\"Previous category\">\n <i class=\"fa-solid fa-caret-left\" aria-hidden=\"true\"><\/i>\n <\/button>\n <div class=\"category-list\">\n <button class=\"category is-active\" type=\"button\" data-category=\"Electric Kettles\" aria-pressed=\"true\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/category-icon.webp\" alt=\"\">\n <span>Lorem<br>IpsumLorem<\/span>\n <\/button>\n <button class=\"category\" type=\"button\" data-category=\"High-Speed Hair Dryers\" aria-pressed=\"false\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/category-icon.webp\" alt=\"\">\n <span>Lorem<br>IpsumLorem<\/span>\n <\/button>\n <button class=\"category\" type=\"button\" data-category=\"Hotel Accessories\" aria-pressed=\"false\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/category-icon.webp\" alt=\"\">\n <span>Lorem<br>IpsumLorem<\/span>\n <\/button>\n <button class=\"category\" type=\"button\" data-category=\"Guest Room Care\" aria-pressed=\"false\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/category-icon.webp\" alt=\"\">\n <span>Lorem<br>IpsumLorem<\/span>\n <\/button>\n <button class=\"category\" type=\"button\" data-category=\"Bathroom Appliances\" aria-pressed=\"false\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/category-icon.webp\" alt=\"\">\n <span>Lorem<br>IpsumLorem<\/span>\n <\/button>\n <button class=\"category\" type=\"button\" data-category=\"Hotel Essentials\" aria-pressed=\"false\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/category-icon.webp\" alt=\"\">\n <span>Lorem<br>IpsumLorem<\/span>\n <\/button>\n <button class=\"category\" type=\"button\" data-category=\"Premium Collection\" aria-pressed=\"false\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/category-icon.webp\" alt=\"\">\n <span>Lorem<br>IpsumLorem<\/span>\n <\/button>\n <button class=\"category\" type=\"button\" data-category=\"Compact Series\" aria-pressed=\"false\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/category-icon.webp\" alt=\"\">\n <span>Lorem<br>IpsumLorem<\/span>\n <\/button>\n <button class=\"category\" type=\"button\" data-category=\"New Arrivals\" aria-pressed=\"false\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/category-icon.webp\" alt=\"\">\n <span>Lorem<br>IpsumLorem<\/span>\n <\/button>\n <\/div>\n <button class=\"icon-button category-arrow category-arrow--next\" type=\"button\" data-category-step=\"1\" aria-label=\"Next category\">\n <i class=\"fa-solid fa-caret-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <\/div>\n\n <div class=\"product-showcase\">\n <button class=\"product-card product-card--featured\" type=\"button\" data-product=\"Classic Electric Kettle\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/classify-featured.webp\" alt=\"Classic black electric kettle\">\n <\/button>\n <button class=\"product-card\" type=\"button\" data-product=\"Electric Kettles\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/classify-kettle.webp\" alt=\"Black electric kettle\">\n <span>Electric Kettles<\/span>\n <\/button>\n <button class=\"product-card\" type=\"button\" data-product=\"High Speed Hair Dryers\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/classify-blue-dryer.webp\" alt=\"Blue high-speed hair dryer\">\n <span>High Speed Hair Dryers<\/span>\n <\/button>\n <button class=\"product-card\" type=\"button\" data-product=\"Professional Hair Dryer\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/classify-black-dryer.webp\" alt=\"Black professional hair dryer\">\n <span>Lorem Ipsum<\/span>\n <\/button>\n <button class=\"product-card\" type=\"button\" data-product=\"Hair Dryer Attachments\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/classify-attachments.webp\" alt=\"High-speed hair dryer and attachments\">\n <span>High Speed Hair Dryers<\/span>\n <\/button>\n <\/div>\n <\/section>\n\n <section class=\"creade-section about reveal\" id=\"about\" aria-labelledby=\"about-title\">\n <h2 class=\"section-title\" id=\"about-title\">About<\/h2>\n <p class=\"about__copy\">\n For Years, Creade Has Been A Trusted Partner To The Hospitality Industry, Supplying Premium High-Speed Hair Dryers And Electric Kettles To Hotels<br>\n Around The World. Our Products Are Trusted By Hotels Within Internationally Recognized Hospitality Brands, Including JW Marriott, IHG Hotels & Resorts,<br>\n Hilton, Hyatt, And Accor, Helping Deliver Comfort, Convenience, And Memorable Guest Experiences.\n <\/p>\n <button class=\"btn\" type=\"button\" id=\"open-about\">\n Lorem Ipsum <i class=\"fa-solid fa-chevron-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <button class=\"play-button\" type=\"button\" id=\"open-video\" aria-label=\"Play the Creade brand film\">\n <i class=\"fa-solid fa-play\" aria-hidden=\"true\"><\/i>\n <\/button>\n\n <div class=\"stats\" aria-label=\"Company statistics\">\n <article class=\"stat\">\n <i class=\"fa-solid fa-globe\" aria-hidden=\"true\"><\/i>\n <span class=\"stat__value\">2012<\/span><span class=\"stat__unit\">Year<\/span>\n <p>Lorem Ipsum Dolor Sit Amet<\/p>\n <\/article>\n <article class=\"stat\">\n <i class=\"fa-solid fa-globe\" aria-hidden=\"true\"><\/i>\n <span class=\"stat__value\">4000<\/span><span class=\"stat__unit\">Year<\/span>\n <p>Lorem Ipsum Dolor Sit Amet<\/p>\n <\/article>\n <article class=\"stat\">\n <i class=\"fa-solid fa-globe\" aria-hidden=\"true\"><\/i>\n <span class=\"stat__value\">400<\/span><span class=\"stat__unit\">Year<\/span>\n <p>Lorem Ipsum Dolor Sit Amet<\/p>\n <\/article>\n <article class=\"stat\">\n <i class=\"fa-solid fa-globe\" aria-hidden=\"true\"><\/i>\n <span class=\"stat__value\">66<\/span><span class=\"stat__unit\">Year<\/span>\n <p>Lorem Ipsum Dolor Sit Amet<\/p>\n <\/article>\n <\/div>\n <\/section>\n\n <section class=\"creade-section advantages reveal\" id=\"advantages\" aria-labelledby=\"advantages-title\">\n <h2 class=\"section-title\" id=\"advantages-title\">Product Advantages<\/h2>\n <div class=\"advantages-stage\">\n <button class=\"icon-button advantage-arrow advantage-arrow--prev\" id=\"advantage-prev\" type=\"button\" aria-label=\"Previous product advantage\">\n <i class=\"fa-solid fa-chevron-left\" aria-hidden=\"true\"><\/i>\n <\/button>\n <div class=\"advantages-viewport\" id=\"advantages-viewport\">\n <div class=\"advantages-track\" id=\"advantages-track\">\n <article class=\"advantage-slide\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/advantage-kettle.webp\" alt=\"Green Creade electric kettle\">\n <div class=\"advantage-copy\">\n <h3>Lorem Ipsum Dolor Sit<\/h3>\n <p>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit, Sed Do Eiusmod Tempor Incididunt Ut Labore Et Dolore Magna Aliqua. Ut Enim Ad Minim Veniam, Quis Nostrud Exercitation Ullamco Laboris Nisi Ut Aliquip Ex Ea Commodo Consequat.<\/p>\n <button class=\"btn btn--outline\" type=\"button\" data-open-content\n data-label=\"Product Advantage\"\n data-title=\"Lorem Ipsum Dolor Sit\"\n data-copy=\"Balanced proportions, quiet boiling and hospitality-ready durability for refined guest rooms.\">\n Learn <i class=\"fa-solid fa-chevron-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <\/div>\n <img decoding=\"async\" class=\"advantage-photo\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/advantage-hairdryer.webp\" alt=\"Creade high-speed hair dryer in use\">\n <\/article>\n <article class=\"advantage-slide advantage-slide--reverse\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/advantage-hairdryer.webp\" alt=\"Creade high-speed hair dryer in use\">\n <div class=\"advantage-copy\">\n <h3>High-Speed Hair Care<\/h3>\n <p>Powerful airflow, low-noise performance and intuitive controls are designed for premium hospitality environments and memorable guest-room experiences.<\/p>\n <button class=\"btn btn--outline\" type=\"button\" data-open-content\n data-label=\"Product Advantage\"\n data-title=\"High-Speed Hair Care\"\n data-copy=\"Explore the engineering, airflow and hospitality-focused details behind this product advantage.\">\n Learn <i class=\"fa-solid fa-chevron-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <\/div>\n <img decoding=\"async\" class=\"advantage-photo\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/advantage-kettle.webp\" alt=\"Green Creade electric kettle\">\n <\/article>\n <\/div>\n <\/div>\n <button class=\"icon-button advantage-arrow advantage-arrow--next\" id=\"advantage-next\" type=\"button\" aria-label=\"Next product advantage\">\n <i class=\"fa-solid fa-chevron-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <\/div>\n <div class=\"dots\" aria-label=\"Product advantage carousel pagination\">\n <button class=\"dot is-active\" type=\"button\" data-advantage-index=\"0\" aria-label=\"View the first item\" aria-pressed=\"true\"><\/button>\n <button class=\"dot\" type=\"button\" data-advantage-index=\"1\" aria-label=\"View the second item\" aria-pressed=\"false\"><\/button>\n <\/div>\n <\/section>\n\n <section class=\"creade-section applications reveal\" id=\"applications\" aria-labelledby=\"applications-title\">\n <h2 class=\"section-title\" id=\"applications-title\">Applications<\/h2>\n <img decoding=\"async\" class=\"applications-hero\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/applications-kettles.webp\" alt=\"Black, white and green Creade electric kettles\">\n <div class=\"applications-stage\">\n <span class=\"carousel-status\" id=\"applications-status\" aria-live=\"polite\">01 \/ 08<\/span>\n <button class=\"icon-button applications-arrow applications-arrow--prev\" id=\"applications-prev\" type=\"button\" aria-label=\"Previous application case\">\n <i class=\"fa-solid fa-caret-left\" aria-hidden=\"true\"><\/i>\n <\/button>\n <div class=\"applications-viewport\" id=\"applications-viewport\">\n <div class=\"applications-track\" id=\"applications-track\">\n <button class=\"application-card application-card--image\" type=\"button\" data-case=\"Boutique Hotel\">\n <strong>Lorem Ipsum Dolor Sit<\/strong>\n <span>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit, Sed Do Eiusmod Tempor Incididunt.<\/span>\n <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <button class=\"application-card\" type=\"button\" data-case=\"Luxury Resort\">\n <strong>Lorem Ipsum Dolor Sit<\/strong>\n <span>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit, Sed Do Eiusmod Tempor Incididunt.<\/span>\n <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <button class=\"application-card\" type=\"button\" data-case=\"Business Hotel\">\n <strong>Lorem Ipsum Dolor Sit<\/strong>\n <span>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit, Sed Do Eiusmod Tempor Incididunt.<\/span>\n <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <button class=\"application-card\" type=\"button\" data-case=\"Serviced Apartment\">\n <strong>Lorem Ipsum Dolor Sit<\/strong>\n <span>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit, Sed Do Eiusmod Tempor Incididunt.<\/span>\n <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <button class=\"application-card application-card--image\" type=\"button\" data-case=\"Urban Lifestyle Hotel\">\n <strong>Urban Lifestyle<\/strong>\n <span>Design-led appliances for memorable city stays.<\/span>\n <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <button class=\"application-card\" type=\"button\" data-case=\"Wellness Retreat\">\n <strong>Wellness Retreat<\/strong>\n <span>Calm, considered details for restorative guest experiences.<\/span>\n <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <button class=\"application-card\" type=\"button\" data-case=\"International Chain\">\n <strong>International Chain<\/strong>\n <span>Consistent quality at scale across global properties.<\/span>\n <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <button class=\"application-card\" type=\"button\" data-case=\"Signature Suite\">\n <strong>Signature Suite<\/strong>\n <span>Premium finishes and intuitive everyday performance.<\/span>\n <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <button class=\"icon-button applications-arrow applications-arrow--next\" id=\"applications-next\" type=\"button\" aria-label=\"Next application case\">\n <i class=\"fa-solid fa-caret-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <\/div>\n <\/section>\n\n <section class=\"creade-section news reveal\" id=\"news\" aria-labelledby=\"news-title\">\n <h2 class=\"section-title\" id=\"news-title\">Latest news<\/h2>\n <div class=\"news-grid\">\n <button class=\"featured-news\" type=\"button\" data-news=\"Creade introduces a new hospitality kettle collection\">\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/news-featured.webp\" alt=\"Creade black electric kettle and tea set\">\n <h3>Lorem Ipsum Dolor Sit Amet Consectetur<\/h3>\n <p>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit, Sed Do Eiusmod Tempor Incididunt Ut Labore Et Dolore Magna Aliqua. Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.<\/p>\n <\/button>\n <div class=\"news-list\">\n <button class=\"news-row\" type=\"button\" data-news=\"High-speed hair dryer designed for modern guest rooms\">\n <span class=\"news-date\"><strong>29<\/strong><span>Sep 2024<\/span><\/span>\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/news-hairdryer.webp\" alt=\"Blue Creade high-speed hair dryer\">\n <h3>Lorem Ipsum Dolor Sit Amet, Consectetur<\/h3>\n <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <button class=\"news-row\" type=\"button\" data-news=\"New modular hotel appliance series\">\n <span class=\"news-date\"><strong>29<\/strong><span>Sep 2024<\/span><\/span>\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/news-travel-kit.webp\" alt=\"Hotel appliance travel kit\">\n <h3>Lorem Ipsum Dolor Sit Amet, Consectetur<\/h3>\n <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <button class=\"news-row\" type=\"button\" data-news=\"Smart bedside accessories arrive this season\">\n <span class=\"news-date\"><strong>29<\/strong><span>Sep 2024<\/span><\/span>\n <img decoding=\"async\" src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/news-scale.webp\" alt=\"Smart home digital scale\">\n <h3>Lorem Ipsum Dolor Sit Amet, Consectetur<\/h3>\n <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <div class=\"news-more-wrap\">\n <button class=\"btn btn--outline\" type=\"button\" data-news=\"Explore more Creade news\">\n Learn More <i class=\"fa-solid fa-chevron-right\" aria-hidden=\"true\"><\/i>\n <\/button>\n <\/div>\n <\/section>\n\n <dialog class=\"creade-dialog\" id=\"content-dialog\" aria-labelledby=\"dialog-title\">\n <div class=\"dialog-copy\">\n <small id=\"dialog-label\">Creade<\/small>\n <h2 id=\"dialog-title\">Explore Creade<\/h2>\n <p id=\"dialog-text\">Discover products created for thoughtful hospitality experiences.<\/p>\n <div class=\"dialog-actions\">\n <button class=\"btn\" type=\"button\" id=\"dialog-close\">Close<\/button>\n <a class=\"btn btn--outline\" href=\"#news\" id=\"dialog-news-link\">Latest news<\/a>\n <\/div>\n <\/div>\n <\/dialog>\n\n <dialog class=\"creade-dialog video-dialog\" id=\"video-dialog\" aria-labelledby=\"video-title\">\n <video id=\"video-player\" controls playsinline preload=\"metadata\" poster=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/about-video-poster.webp\">\n <source src=\"https:\/\/www.test31.pw\/wp-content\/uploads\/2026\/07\/about-video.mp4\" type=\"video\/mp4\">\n Your browser does not support HTML5 video.\n <\/video>\n <div class=\"video-bar\">\n <strong id=\"video-title\">About Creade \u00b7 Brand Film<\/strong>\n <button type=\"button\" id=\"video-close\">Close Video<\/button>\n <\/div>\n <\/dialog>\n\n <div class=\"scroll-progress\" id=\"scroll-progress\" aria-hidden=\"true\"><\/div>\n <div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\"><\/div>\n <\/main>\n\n <script>\n (() => {\n const root = document.getElementById('creade-page');\n if (!root) return;\n\n const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n const toast = root.querySelector('#toast');\n let toastTimer;\n\n function showToast(message) {\n clearTimeout(toastTimer);\n toast.textContent = message;\n toast.classList.add('is-visible');\n toastTimer = setTimeout(() => toast.classList.remove('is-visible'), 2200);\n }\n\n const contentDialog = root.querySelector('#content-dialog');\n const dialogLabel = root.querySelector('#dialog-label');\n const dialogTitle = root.querySelector('#dialog-title');\n const dialogText = root.querySelector('#dialog-text');\n\n function openContent(label, title, copy) {\n dialogLabel.textContent = label;\n dialogTitle.textContent = title;\n dialogText.textContent = copy;\n contentDialog.showModal();\n }\n\n root.querySelectorAll('[data-open-content]').forEach((button) => {\n button.addEventListener('click', () => {\n openContent(button.dataset.label, button.dataset.title, button.dataset.copy);\n });\n });\n\n root.querySelector('#open-about').addEventListener('click', () => {\n openContent(\n 'About Creade',\n 'Designed for better hospitality experiences.',\n 'Creade supplies premium high-speed hair dryers and electric kettles to hotels worldwide, combining refined design, dependable performance and thoughtful guest-room details.'\n );\n });\n\n root.querySelectorAll('[data-product]').forEach((button) => {\n button.addEventListener('click', () => {\n openContent(\n 'Product',\n button.dataset.product,\n 'Explore refined materials, dependable performance and hospitality-focused details behind this Creade product.'\n );\n });\n });\n\n root.querySelectorAll('[data-news]').forEach((button) => {\n button.addEventListener('click', () => {\n openContent(\n 'Latest news \u00b7 Sep 2024',\n button.dataset.news,\n 'Discover the thinking, product details and hospitality applications behind this Creade update.'\n );\n });\n });\n\n root.querySelectorAll('[data-case]').forEach((button) => {\n button.addEventListener('click', () => {\n openContent(\n 'Application case',\n button.dataset.case,\n 'A tailored combination of refined finishes, quiet performance and dependable daily use for this hospitality setting.'\n );\n });\n });\n\n root.querySelector('#dialog-close').addEventListener('click', () => contentDialog.close());\n root.querySelector('#dialog-news-link').addEventListener('click', () => contentDialog.close());\n\n const videoDialog = root.querySelector('#video-dialog');\n const videoPlayer = root.querySelector('#video-player');\n root.querySelector('#open-video').addEventListener('click', async () => {\n videoDialog.showModal();\n videoPlayer.currentTime = 0;\n try {\n await videoPlayer.play();\n } catch (error) {\n showToast('Click the play button to start the video.');\n }\n });\n root.querySelector('#video-close').addEventListener('click', () => videoDialog.close());\n videoDialog.addEventListener('close', () => videoPlayer.pause());\n\n [contentDialog, videoDialog].forEach((dialog) => {\n dialog.addEventListener('click', (event) => {\n if (event.target === dialog) dialog.close();\n });\n });\n\n const categoryButtons = [...root.querySelectorAll('[data-category]')];\n let categoryIndex = 0;\n\n function selectCategory(next, announce = true) {\n categoryIndex = (next + categoryButtons.length) % categoryButtons.length;\n categoryButtons.forEach((button, index) => {\n const active = index === categoryIndex;\n button.classList.toggle('is-active', active);\n button.setAttribute('aria-pressed', String(active));\n });\n if (window.innerWidth <= 640) {\n const categoryList = root.querySelector('.category-list');\n const activeButton = categoryButtons[categoryIndex];\n categoryList.scrollTo({\n left: activeButton.offsetLeft - (categoryList.clientWidth - activeButton.offsetWidth) \/ 2,\n behavior: reduceMotion ? 'auto' : 'smooth'\n });\n }\n if (announce) {\n showToast(`${categoryButtons[categoryIndex].dataset.category} \u00b7 ${categoryIndex + 1} \/ ${categoryButtons.length}`);\n }\n }\n\n categoryButtons.forEach((button, index) => {\n button.addEventListener('click', () => selectCategory(index));\n });\n root.querySelectorAll('[data-category-step]').forEach((button) => {\n button.addEventListener('click', () => selectCategory(categoryIndex + Number(button.dataset.categoryStep)));\n });\n\n const advantageTrack = root.querySelector('#advantages-track');\n const advantageDots = [...root.querySelectorAll('[data-advantage-index]')];\n const advantageSlides = [...advantageTrack.children];\n let advantageIndex = 0;\n let advantageTimer;\n\n function renderAdvantages(announce = false) {\n advantageTrack.style.transform = `translate3d(${-advantageIndex * 100}%, 0, 0)`;\n advantageDots.forEach((dot, index) => {\n const active = index === advantageIndex;\n dot.classList.toggle('is-active', active);\n dot.setAttribute('aria-pressed', String(active));\n });\n if (announce) showToast(`Product advantage ${advantageIndex + 1} \/ ${advantageSlides.length}`);\n }\n\n function moveAdvantages(direction, announce = true) {\n advantageIndex = (advantageIndex + direction + advantageSlides.length) % advantageSlides.length;\n renderAdvantages(announce);\n }\n\n function stopAdvantages() {\n clearInterval(advantageTimer);\n }\n\n function startAdvantages() {\n stopAdvantages();\n if (!reduceMotion) advantageTimer = setInterval(() => moveAdvantages(1, false), 6000);\n }\n\n root.querySelector('#advantage-prev').addEventListener('click', () => {\n moveAdvantages(-1);\n startAdvantages();\n });\n root.querySelector('#advantage-next').addEventListener('click', () => {\n moveAdvantages(1);\n startAdvantages();\n });\n advantageDots.forEach((dot) => {\n dot.addEventListener('click', () => {\n advantageIndex = Number(dot.dataset.advantageIndex);\n renderAdvantages(true);\n startAdvantages();\n });\n });\n\n const advantageViewport = root.querySelector('#advantages-viewport');\n advantageViewport.addEventListener('mouseenter', stopAdvantages);\n advantageViewport.addEventListener('mouseleave', startAdvantages);\n advantageViewport.addEventListener('focusin', stopAdvantages);\n advantageViewport.addEventListener('focusout', startAdvantages);\n\n const applicationsTrack = root.querySelector('#applications-track');\n const applicationCards = [...applicationsTrack.children];\n const applicationsStatus = root.querySelector('#applications-status');\n let applicationsIndex = 0;\n let applicationsTimer;\n\n function cardsPerView() {\n if (window.innerWidth <= 640) return 1;\n if (window.innerWidth <= 900) return 2;\n return 4;\n }\n\n function applicationLimit() {\n return Math.max(0, applicationCards.length - cardsPerView());\n }\n\n function renderApplications(announce = false) {\n applicationsIndex = Math.max(0, Math.min(applicationsIndex, applicationLimit()));\n const firstCard = applicationCards[0];\n const gap = parseFloat(getComputedStyle(applicationsTrack).gap) || 0;\n const step = firstCard.getBoundingClientRect().width + gap;\n applicationsTrack.style.transform = `translate3d(${-applicationsIndex * step}px, 0, 0)`;\n applicationsStatus.textContent = `${String(applicationsIndex + 1).padStart(2, '0')} \/ ${String(applicationCards.length).padStart(2, '0')}`;\n if (announce) showToast(`Application case ${applicationsIndex + 1} \/ ${applicationCards.length}`);\n }\n\n function moveApplications(direction, announce = true) {\n const limit = applicationLimit();\n applicationsIndex = direction > 0\n ? (applicationsIndex >= limit ? 0 : applicationsIndex + 1)\n : (applicationsIndex <= 0 ? limit : applicationsIndex - 1);\n renderApplications(announce);\n }\n\n function stopApplications() {\n clearInterval(applicationsTimer);\n }\n\n function startApplications() {\n stopApplications();\n if (!reduceMotion) applicationsTimer = setInterval(() => moveApplications(1, false), 4500);\n }\n\n root.querySelector('#applications-prev').addEventListener('click', () => {\n moveApplications(-1);\n startApplications();\n });\n root.querySelector('#applications-next').addEventListener('click', () => {\n moveApplications(1);\n startApplications();\n });\n\n const applicationsViewport = root.querySelector('#applications-viewport');\n applicationsViewport.addEventListener('mouseenter', stopApplications);\n applicationsViewport.addEventListener('mouseleave', startApplications);\n applicationsViewport.addEventListener('focusin', stopApplications);\n applicationsViewport.addEventListener('focusout', startApplications);\n\n const revealElements = root.querySelectorAll('.reveal');\n if ('IntersectionObserver' in window && !reduceMotion) {\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: .06, rootMargin: '0px 0px -6% 0px' });\n revealElements.forEach((element) => observer.observe(element));\n } else {\n revealElements.forEach((element) => element.classList.add('is-visible'));\n }\n\n const scrollProgress = root.querySelector('#scroll-progress');\n function updateScrollProgress() {\n const total = document.documentElement.scrollHeight - window.innerHeight;\n scrollProgress.style.width = `${total > 0 ? (window.scrollY \/ total) * 100 : 0}%`;\n }\n\n window.addEventListener('scroll', updateScrollProgress, { passive: true });\n window.addEventListener('resize', renderApplications);\n document.addEventListener('visibilitychange', () => {\n if (document.hidden) {\n stopAdvantages();\n stopApplications();\n } else {\n startAdvantages();\n startApplications();\n }\n });\n\n renderAdvantages();\n renderApplications();\n startAdvantages();\n startApplications();\n updateScrollProgress();\n })();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Creade Lorem ipsum dolorsit amet, consectetur adipiscin […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"themepark_post_bcolor":"#f5f5f5","themepark_post_width":"100%","themepark_post_img":"","themepark_post_img_po":"left","themepark_post_img_re":false,"themepark_post_img_cover":false,"themepark_post_img_fixed":false,"themepark_post_hide_title":true,"themepark_post_main_b":"","themepark_post_main_p":100,"themepark_paddingblock":true,"_geo_short_summary":"","_geo_structured_desc":"","_geo_faqs":"","_geo_key_points":"","_geo_target_audience":"","_geo_content_type":"","_geo_last_modified":"","_geo_version":0,"themepark_seo_title":"","themepark_seo_description":"","footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.test31.pw\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.test31.pw\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.test31.pw\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.test31.pw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.test31.pw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":44,"href":"https:\/\/www.test31.pw\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":388,"href":"https:\/\/www.test31.pw\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/388"}],"wp:attachment":[{"href":"https:\/\/www.test31.pw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}