.elementor-817 .elementor-element.elementor-element-1f4e40c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-1f4e40c > .elementor-shape-top .elementor-shape-fill, .elementor-817 .elementor-element.elementor-element-1f4e40c > .e-con-inner > .elementor-shape-top .elementor-shape-fill{fill:#00337A21;}.elementor-817 .elementor-element.elementor-element-1f4e40c > .elementor-shape-top, .elementor-817 .elementor-element.elementor-element-1f4e40c > .e-con-inner > .elementor-shape-top{z-index:2;pointer-events:none;}.elementor-817 .elementor-element.elementor-element-1f4e40c > .elementor-shape-bottom .elementor-shape-fill, .elementor-817 .elementor-element.elementor-element-1f4e40c > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:#00337A21;}.elementor-817 .elementor-element.elementor-element-1f4e40c > .elementor-shape-bottom, .elementor-817 .elementor-element.elementor-element-1f4e40c > .e-con-inner > .elementor-shape-bottom{z-index:2;pointer-events:none;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-817 .elementor-element.elementor-element-cc21889{--display:flex;--justify-content:center;}.elementor-817 .elementor-element.elementor-element-cc21889 > .elementor-shape-top .elementor-shape-fill, .elementor-817 .elementor-element.elementor-element-cc21889 > .e-con-inner > .elementor-shape-top .elementor-shape-fill{fill:#00337A21;}.elementor-817 .elementor-element.elementor-element-cc21889 > .elementor-shape-top, .elementor-817 .elementor-element.elementor-element-cc21889 > .e-con-inner > .elementor-shape-top{z-index:2;pointer-events:none;}.elementor-817 .elementor-element.elementor-element-cc21889 > .elementor-shape-bottom .elementor-shape-fill, .elementor-817 .elementor-element.elementor-element-cc21889 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:#00337A21;}.elementor-817 .elementor-element.elementor-element-cc21889 > .elementor-shape-bottom, .elementor-817 .elementor-element.elementor-element-cc21889 > .e-con-inner > .elementor-shape-bottom{z-index:2;pointer-events:none;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-817 .elementor-element.elementor-element-86fd9d6{background-image:url("https://ihk-lightlife.ru/wp-content/uploads/2026/04/background-to-the-art-school-page_hover.jpg");font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-86fd9d6:hover{background-image:url("https://ihk-lightlife.ru/wp-content/uploads/2026/04/background-to-the-art-school-page.jpg");}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-817 .elementor-element.elementor-element-bb483e3{text-align:center;}.elementor-817 .elementor-element.elementor-element-bb483e3 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:22px;font-weight:600;color:#000000;}.elementor-817 .elementor-element.elementor-element-580466e{--display:flex;}.elementor-817 .elementor-element.elementor-element-580466e.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-6d91af0.elementor-element{--align-self:center;}.elementor-817 .elementor-element.elementor-element-6d91af0{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:3px 2px 1px #FFFFFF;color:#414141;}.elementor-widget-image-gallery .gallery-item .gallery-caption{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-817 .elementor-element.elementor-element-dd8a728.elementor-element{--align-self:center;}.elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item .gallery-caption{display:none;}.elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item{padding:0 47px 47px 0;}.elementor-817 .elementor-element.elementor-element-dd8a728 .gallery{margin:0 -47px -47px 0;}.elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img{border-radius:4px 4px 4px 4px;}.elementor-817 .elementor-element.elementor-element-549889e{--display:flex;}.elementor-817 .elementor-element.elementor-element-e2cdaa5.elementor-element{--align-self:center;}.elementor-817 .elementor-element.elementor-element-e2cdaa5{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:3px 2px 1px #FFFFFF;color:#414141;}.elementor-817 .elementor-element.elementor-element-a99573e .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-icon i{color:#0000FF;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-icon svg{fill:#0000FF;transition:fill 0.3s;}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#42669C;}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#42669C;}.elementor-817 .elementor-element.elementor-element-c33ba10{--e-icon-list-icon-size:17px;--icon-vertical-offset:0px;}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-icon{padding-inline-end:2px;}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-item > a{font-family:"Ubuntu Condensed", Sans-serif;font-size:23px;font-weight:400;}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-text{text-shadow:5px -2px 2px rgba(255, 255, 255, 0);color:#000000;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#42669C;}.elementor-817 .elementor-element.elementor-element-cf815eb.elementor-element{--align-self:center;}.elementor-817 .elementor-element.elementor-element-cf815eb{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:3px 2px 1px #FFFFFF;color:#414141;}.elementor-817 .elementor-element.elementor-element-53bb8c3 .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#000080;}.elementor-817 .elementor-element.elementor-element-667a540.elementor-element{--align-self:center;}.elementor-817 .elementor-element.elementor-element-667a540{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:3px 2px 1px #FFFFFF;color:#414141;}.elementor-817 .elementor-element.elementor-element-d0c6e7e .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-icon i{color:#0000FF;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-icon svg{fill:#0000FF;transition:fill 0.3s;}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#42669C;}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#42669C;}.elementor-817 .elementor-element.elementor-element-cade8b1{--e-icon-list-icon-size:17px;--icon-vertical-offset:0px;}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-icon{padding-inline-end:2px;}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-item > a{font-family:"Ubuntu Condensed", Sans-serif;font-size:23px;font-weight:400;}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-text{text-shadow:5px -2px 2px rgba(255, 255, 255, 0);color:#000000;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#42669C;}.elementor-817 .elementor-element.elementor-element-6736268 .gallery-item{padding:0 25px 25px 0;}.elementor-817 .elementor-element.elementor-element-6736268 .gallery{margin:0 -25px -25px 0;}.elementor-817 .elementor-element.elementor-element-6736268 .gallery-item .gallery-caption{text-align:center;}.elementor-817 .elementor-element.elementor-element-d1ce496{--display:flex;}.elementor-817 .elementor-element.elementor-element-d1ce496.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-ccec9eb.elementor-element{--align-self:center;}.elementor-817 .elementor-element.elementor-element-ccec9eb{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:3px 2px 1px #FFFFFF;color:#414141;}.elementor-817 .elementor-element.elementor-element-5a65323 .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-icon i{color:#0000FF;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-icon svg{fill:#0000FF;transition:fill 0.3s;}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#42669C;}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#42669C;}.elementor-817 .elementor-element.elementor-element-afc877d{--e-icon-list-icon-size:17px;--icon-vertical-offset:0px;}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-icon{padding-inline-end:2px;}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-item > .elementor-icon-list-text, .elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-item > a{font-family:"Ubuntu Condensed", Sans-serif;font-size:23px;font-weight:400;}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-text{text-shadow:5px -2px 2px rgba(255, 255, 255, 0);color:#000000;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-item:hover .elementor-icon-list-text{color:#42669C;}.elementor-817 .elementor-element.elementor-element-82d0111 .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-icon i{color:#0000FF;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-icon svg{fill:#0000FF;transition:fill 0.3s;}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#42669C;}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#42669C;}.elementor-817 .elementor-element.elementor-element-c189176{--e-icon-list-icon-size:17px;--icon-vertical-offset:0px;}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-icon{padding-inline-end:2px;}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-item > a{font-family:"Ubuntu Condensed", Sans-serif;font-size:23px;font-weight:400;}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-text{text-shadow:5px -2px 2px rgba(255, 255, 255, 0);color:#000000;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#42669C;}.elementor-817 .elementor-element.elementor-element-a43fd43 .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-icon i{color:#0000FF;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-icon svg{fill:#0000FF;transition:fill 0.3s;}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#42669C;}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#42669C;}.elementor-817 .elementor-element.elementor-element-46abbde{--e-icon-list-icon-size:17px;--icon-vertical-offset:0px;}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-icon{padding-inline-end:2px;}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-item > .elementor-icon-list-text, .elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-item > a{font-family:"Ubuntu Condensed", Sans-serif;font-size:23px;font-weight:400;}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-text{text-shadow:5px -2px 2px rgba(255, 255, 255, 0);color:#000000;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-item:hover .elementor-icon-list-text{color:#42669C;}.elementor-817 .elementor-element.elementor-element-c38242d .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-icon i{color:#0000FF;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-icon svg{fill:#0000FF;transition:fill 0.3s;}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#42669C;}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#42669C;}.elementor-817 .elementor-element.elementor-element-7d31845{--e-icon-list-icon-size:17px;--icon-vertical-offset:0px;}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-icon{padding-inline-end:2px;}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-item > a{font-family:"Ubuntu Condensed", Sans-serif;font-size:23px;font-weight:400;}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-text{text-shadow:5px -2px 2px rgba(255, 255, 255, 0);color:#000000;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#42669C;}.elementor-817 .elementor-element.elementor-element-f4ad17e{width:var( --container-widget-width, 90% );max-width:90%;padding:6px 6px 6px 6px;--container-widget-width:90%;--container-widget-flex-grow:0;border-style:double;border-color:#013277;--e-icon-list-icon-size:17px;--icon-vertical-offset:0px;}.elementor-817 .elementor-element.elementor-element-f4ad17e.elementor-element{--align-self:flex-end;}.elementor-817 .elementor-element.elementor-element-f4ad17e:hover{border-style:dashed;}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(32px/2);}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(32px/2);}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(32px/2);}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-32px/2);}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-32px/2);}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-item:not(:last-child):after{content:"";width:100%;border-color:#013277;}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child):after{border-block-start-style:solid;border-block-start-width:0.1em;}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:not(:last-child):after{border-inline-start-style:solid;}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-inline-items .elementor-icon-list-item:not(:last-child):after{border-inline-start-width:0.1em;}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-icon i{color:#0000FF;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-icon svg{fill:#0000FF;transition:fill 0.3s;}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#42669C;}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#42669C;}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-icon{padding-inline-end:2px;}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-item > a{font-family:"Ubuntu Condensed", Sans-serif;font-size:23px;font-weight:400;}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-text{text-shadow:5px -2px 2px rgba(255, 255, 255, 0);color:#000000;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-item:hover .elementor-icon-list-text{color:#42669C;}.elementor-817 .elementor-element.elementor-element-5a96fe4 .gallery-item{padding:0 47px 47px 0;}.elementor-817 .elementor-element.elementor-element-5a96fe4 .gallery{margin:0 -47px -47px 0;}.elementor-817 .elementor-element.elementor-element-5a96fe4 .gallery-item .gallery-caption{text-align:center;}.elementor-817 .elementor-element.elementor-element-a5dba57{--display:flex;}.elementor-817 .elementor-element.elementor-element-a1535aa{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-4b6ace4 .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-icon i{color:#0000FF;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-icon svg{fill:#0000FF;transition:fill 0.3s;}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#42669C;}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#42669C;}.elementor-817 .elementor-element.elementor-element-e950733{--e-icon-list-icon-size:17px;--icon-vertical-offset:0px;}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-icon{padding-inline-end:2px;}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-item > a{font-family:"Ubuntu Condensed", Sans-serif;font-size:23px;font-weight:400;}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-text{text-shadow:5px -2px 2px rgba(255, 255, 255, 0);color:#000000;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#42669C;}.elementor-817 .elementor-element.elementor-element-3c9648f .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-icon i{color:#0000FF;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-icon svg{fill:#0000FF;transition:fill 0.3s;}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#42669C;}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#42669C;}.elementor-817 .elementor-element.elementor-element-f03e93d{--e-icon-list-icon-size:17px;--icon-vertical-offset:0px;}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-icon{padding-inline-end:2px;}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-item > .elementor-icon-list-text, .elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-item > a{font-family:"Ubuntu Condensed", Sans-serif;font-size:23px;font-weight:400;}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-text{text-shadow:5px -2px 2px rgba(255, 255, 255, 0);color:#000000;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-item:hover .elementor-icon-list-text{color:#42669C;}.elementor-817 .elementor-element.elementor-element-0330533 .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-icon i{color:#0000FF;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-icon svg{fill:#0000FF;transition:fill 0.3s;}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#42669C;}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#42669C;}.elementor-817 .elementor-element.elementor-element-89819aa{--e-icon-list-icon-size:17px;--icon-vertical-offset:0px;}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-icon{padding-inline-end:2px;}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-item > .elementor-icon-list-text, .elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-item > a{font-family:"Ubuntu Condensed", Sans-serif;font-size:23px;font-weight:400;}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-text{text-shadow:5px -2px 2px rgba(255, 255, 255, 0);color:#000000;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-item:hover .elementor-icon-list-text{color:#42669C;}.elementor-817 .elementor-element.elementor-element-bc64721 .gallery-item .gallery-caption{text-align:center;}.elementor-817 .elementor-element.elementor-element-b072460{--display:flex;}.elementor-817 .elementor-element.elementor-element-198d5c6{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-36685f3 .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-cc1140c{padding:27px 27px 27px 27px;font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#000000;}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-icon i{color:#0000FF;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-icon svg{fill:#0000FF;transition:fill 0.3s;}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#42669C;}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#42669C;}.elementor-817 .elementor-element.elementor-element-8a28477{--e-icon-list-icon-size:17px;--icon-vertical-offset:0px;}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-icon{padding-inline-end:2px;}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-item > a{font-family:"Ubuntu Condensed", Sans-serif;font-size:23px;font-weight:400;}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-text{text-shadow:5px -2px 2px rgba(255, 255, 255, 0);color:#000000;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#42669C;}.elementor-817 .elementor-element.elementor-element-57b4e53 .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-icon i{color:#0000FF;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-icon svg{fill:#0000FF;transition:fill 0.3s;}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#42669C;}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#42669C;}.elementor-817 .elementor-element.elementor-element-f32f13a{--e-icon-list-icon-size:17px;--icon-vertical-offset:0px;}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-icon{padding-inline-end:2px;}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-item > .elementor-icon-list-text, .elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-item > a{font-family:"Ubuntu Condensed", Sans-serif;font-size:23px;font-weight:400;}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-text{text-shadow:5px -2px 2px rgba(255, 255, 255, 0);color:#000000;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-item:hover .elementor-icon-list-text{color:#42669C;}.elementor-817 .elementor-element.elementor-element-e6f6bf9 .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-cf3b286{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-1ae15ed .gallery-item{padding:0 57px 57px 0;}.elementor-817 .elementor-element.elementor-element-1ae15ed .gallery{margin:0 -57px -57px 0;}.elementor-817 .elementor-element.elementor-element-1ae15ed .gallery-item .gallery-caption{text-align:center;}.elementor-817 .elementor-element.elementor-element-65b2b05{--display:flex;}.elementor-817 .elementor-element.elementor-element-5156f7b{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-a7b0fff .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-5ac8ab6{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-icon i{color:#0000FF;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-icon svg{fill:#0000FF;transition:fill 0.3s;}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#42669C;}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#42669C;}.elementor-817 .elementor-element.elementor-element-16535dd{--e-icon-list-icon-size:17px;--icon-vertical-offset:0px;}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-icon{padding-inline-end:2px;}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-item > .elementor-icon-list-text, .elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-item > a{font-family:"Ubuntu Condensed", Sans-serif;font-size:23px;font-weight:400;}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-text{text-shadow:5px -2px 2px rgba(255, 255, 255, 0);color:#000000;transition:color 0.3s;}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-item:hover .elementor-icon-list-text{color:#42669C;}.elementor-817 .elementor-element.elementor-element-b6c27e0 .gallery-item{padding:0 40px 40px 0;}.elementor-817 .elementor-element.elementor-element-b6c27e0 .gallery{margin:0 -40px -40px 0;}.elementor-817 .elementor-element.elementor-element-b6c27e0 .gallery-item .gallery-caption{text-align:center;}.elementor-817 .elementor-element.elementor-element-9b1554b{--display:flex;}.elementor-817 .elementor-element.elementor-element-19f2840 .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-221e6d9{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-aa69214 .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-d364f09{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-416895a .gallery-item{padding:0 47px 47px 0;}.elementor-817 .elementor-element.elementor-element-416895a .gallery{margin:0 -47px -47px 0;}.elementor-817 .elementor-element.elementor-element-416895a .gallery-item .gallery-caption{text-align:center;}.elementor-817 .elementor-element.elementor-element-8d1961d .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-b77671b{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-0d8649d .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-fcc2e4b{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-e3bbe66 .gallery-item .gallery-caption{text-align:center;}.elementor-817 .elementor-element.elementor-element-15c4d61 .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-89df13a{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-ac54524 .elementor-heading-title{font-family:"Ubuntu Condensed", Sans-serif;font-weight:600;text-shadow:3px 6px 11px #FFFFFF;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-8cd95ef{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-6fb7499 .gallery-item{padding:0 90px 90px 0;}.elementor-817 .elementor-element.elementor-element-6fb7499 .gallery{margin:0 -90px -90px 0;}.elementor-817 .elementor-element.elementor-element-6fb7499 .gallery-item .gallery-caption{text-align:center;}.elementor-817 .elementor-element.elementor-element-a9a0f7c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-817 .elementor-element.elementor-element-3ab8c03{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-1acb27a{text-align:center;}.elementor-817 .elementor-element.elementor-element-1acb27a .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:29px;font-weight:600;color:#000080;}.elementor-817 .elementor-element.elementor-element-d235090{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-817 .elementor-element.elementor-element-c614d1f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-c614d1f.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-8f7faf3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-8f7faf3.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-f483ae8{text-align:center;}.elementor-817 .elementor-element.elementor-element-f483ae8 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:600;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-5d19449{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-20f7b8e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-817 .elementor-element.elementor-element-ee3bfa7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-ee3bfa7.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-52155af{text-align:center;}.elementor-817 .elementor-element.elementor-element-52155af .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:600;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-7dc71c8{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-124ab51{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-124ab51.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-beaba77{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-817 .elementor-element.elementor-element-15a2167{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-15a2167.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-f2f1471{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-f2f1471.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-94b6641{text-align:center;}.elementor-817 .elementor-element.elementor-element-94b6641 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:600;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-6aa77a7{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-3525450{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-817 .elementor-element.elementor-element-7907205{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-7907205.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-fe98fe7{text-align:center;}.elementor-817 .elementor-element.elementor-element-fe98fe7 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:600;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-448afc8{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-2c13a14{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-2c13a14.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-6811e2d{text-align:center;}.elementor-817 .elementor-element.elementor-element-6811e2d .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:29px;font-weight:600;color:#000080;}.elementor-817 .elementor-element.elementor-element-9d66461{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-817 .elementor-element.elementor-element-139c9cf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-139c9cf.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-2159230{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-2159230.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-8aad08b{text-align:center;}.elementor-817 .elementor-element.elementor-element-8aad08b .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:600;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-d41f44d{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-ca6b350{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-817 .elementor-element.elementor-element-e3e71f9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-e3e71f9.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-6930e46{text-align:center;}.elementor-817 .elementor-element.elementor-element-6930e46 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:600;color:#0000FF;}.elementor-817 .elementor-element.elementor-element-f577829{font-family:"Ubuntu Condensed", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#414141;}.elementor-817 .elementor-element.elementor-element-2df3eb3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-817 .elementor-element.elementor-element-2df3eb3.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-f321ccf{--display:flex;}.elementor-817 .elementor-element.elementor-element-8e4e56d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--background-transition:0.3s;}.elementor-817 .elementor-element.elementor-element-8e4e56d:not(.elementor-motion-effects-element-type-background), .elementor-817 .elementor-element.elementor-element-8e4e56d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://ihk-lightlife.ru/wp-content/uploads/2026/04/background-to-the-art-school-page_hover.jpg");}.elementor-817 .elementor-element.elementor-element-8e4e56d:hover{background-image:url("https://ihk-lightlife.ru/wp-content/uploads/2026/04/background-to-the-art-school-page.jpg");}.elementor-817 .elementor-element.elementor-element-8e4e56d > .elementor-shape-top .elementor-shape-fill, .elementor-817 .elementor-element.elementor-element-8e4e56d > .e-con-inner > .elementor-shape-top .elementor-shape-fill{fill:#00337A21;}.elementor-817 .elementor-element.elementor-element-8e4e56d > .elementor-shape-top, .elementor-817 .elementor-element.elementor-element-8e4e56d > .e-con-inner > .elementor-shape-top{z-index:2;pointer-events:none;}.elementor-817 .elementor-element.elementor-element-8e4e56d > .elementor-shape-bottom .elementor-shape-fill, .elementor-817 .elementor-element.elementor-element-8e4e56d > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:#00337A21;}.elementor-817 .elementor-element.elementor-element-8e4e56d > .elementor-shape-bottom, .elementor-817 .elementor-element.elementor-element-8e4e56d > .e-con-inner > .elementor-shape-bottom{z-index:2;pointer-events:none;}.elementor-817 .elementor-element.elementor-element-788e483{width:var( --container-widget-width, 35.757% );max-width:35.757%;--container-widget-width:35.757%;--container-widget-flex-grow:0;}.elementor-817 .elementor-element.elementor-element-788e483.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-817 .elementor-element.elementor-element-b533831{--n-accordion-title-font-size:1.5rem;background-color:#F7F7F7;background-image:url("https://ihk-lightlife.ru/wp-content/uploads/2026/04/background-to-the-art-school-page_hover.jpg");--n-accordion-title-justify-content:center;--n-accordion-title-flex-grow:initial;--n-accordion-title-icon-order:-1;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-title-normal-color:#FFFFFF;--n-accordion-title-hover-color:#CFCFCF;--n-accordion-title-active-color:#FFFC1E;--n-accordion-icon-size:89%;--n-accordion-icon-gap:1%;--n-accordion-icon-normal-color:#E6E6E6;--n-accordion-icon-hover-color:#CFCFCF;--n-accordion-icon-active-color:#FFFC1E;}.elementor-817 .elementor-element.elementor-element-b533831:hover{background-image:url("https://ihk-lightlife.ru/wp-content/uploads/2026/04/background-to-the-art-school-page.jpg");}.elementor-817 .elementor-element.elementor-element-b533831.elementor-element{--align-self:center;}@media(min-width:768px){.elementor-817 .elementor-element.elementor-element-1f4e40c{--content-width:50%;}.elementor-817 .elementor-element.elementor-element-cc21889{--content-width:90%;}.elementor-817 .elementor-element.elementor-element-580466e{--content-width:85%;}.elementor-817 .elementor-element.elementor-element-d1ce496{--width:93.123%;}.elementor-817 .elementor-element.elementor-element-d235090{--width:100%;}.elementor-817 .elementor-element.elementor-element-c614d1f{--width:20%;}.elementor-817 .elementor-element.elementor-element-8f7faf3{--width:80%;}.elementor-817 .elementor-element.elementor-element-20f7b8e{--width:100%;}.elementor-817 .elementor-element.elementor-element-ee3bfa7{--width:80%;}.elementor-817 .elementor-element.elementor-element-124ab51{--width:20%;}.elementor-817 .elementor-element.elementor-element-beaba77{--width:100%;}.elementor-817 .elementor-element.elementor-element-15a2167{--width:20%;}.elementor-817 .elementor-element.elementor-element-f2f1471{--width:80%;}.elementor-817 .elementor-element.elementor-element-3525450{--width:100%;}.elementor-817 .elementor-element.elementor-element-7907205{--width:80%;}.elementor-817 .elementor-element.elementor-element-2c13a14{--width:20%;}.elementor-817 .elementor-element.elementor-element-9d66461{--width:100%;}.elementor-817 .elementor-element.elementor-element-139c9cf{--width:20%;}.elementor-817 .elementor-element.elementor-element-2159230{--width:80%;}.elementor-817 .elementor-element.elementor-element-ca6b350{--width:100%;}.elementor-817 .elementor-element.elementor-element-e3e71f9{--width:80%;}.elementor-817 .elementor-element.elementor-element-2df3eb3{--width:20%;}}@media(min-width:1025px){.elementor-817 .elementor-element.elementor-element-b533831{background-attachment:fixed;}}@media(max-width:767px){.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-c33ba10 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-c33ba10{--e-icon-list-icon-size:22px;--icon-vertical-align:flex-start;}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-cade8b1 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-cade8b1{--e-icon-list-icon-size:22px;--icon-vertical-align:flex-start;}.elementor-817 .elementor-element.elementor-element-6736268.elementor-element{--align-self:center;}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-afc877d .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-afc877d{--e-icon-list-icon-size:22px;--icon-vertical-align:flex-start;}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-c189176 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-c189176{--e-icon-list-icon-size:22px;--icon-vertical-align:flex-start;}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-46abbde .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-46abbde{--e-icon-list-icon-size:22px;--icon-vertical-align:flex-start;}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-7d31845 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-7d31845{--e-icon-list-icon-size:22px;--icon-vertical-align:flex-start;}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-f4ad17e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-f4ad17e{--e-icon-list-icon-size:22px;--icon-vertical-align:flex-start;}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-e950733 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-e950733{--e-icon-list-icon-size:22px;--icon-vertical-align:flex-start;}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-f03e93d .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-f03e93d{--e-icon-list-icon-size:22px;--icon-vertical-align:flex-start;}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-89819aa .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-89819aa{--e-icon-list-icon-size:22px;--icon-vertical-align:flex-start;}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-8a28477 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-8a28477{--e-icon-list-icon-size:22px;--icon-vertical-align:flex-start;}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-f32f13a .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-f32f13a{--e-icon-list-icon-size:22px;--icon-vertical-align:flex-start;}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(38px/2);}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-16535dd .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-38px/2);}.elementor-817 .elementor-element.elementor-element-16535dd{--e-icon-list-icon-size:22px;--icon-vertical-align:flex-start;}.elementor-817 .elementor-element.elementor-element-8e4e56d{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-817 .elementor-element.elementor-element-788e483{width:100%;max-width:100%;}}/* Start custom CSS for image-gallery, class: .elementor-element-dd8a728 */.elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item { display: flex; justify-content: center; align-items: center; } .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { margin: 0 auto; display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6736268 */#gallery-2.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-2.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-2.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-2.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-5a96fe4 */#gallery-3.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-3.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-3.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-3.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-bc64721 */#gallery-4.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-4.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-4.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-4.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-1ae15ed */#gallery-5.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-5.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-5.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-5.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-b6c27e0 */#gallery-6.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-6.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-6.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-6.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-416895a */#gallery-7.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-7.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-7.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-7.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-e3bbe66 */#gallery-8.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-8.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-8.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-8.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6fb7499 */#gallery-9.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-9.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-9.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-9.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-788e483 *//* Общие стили */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; color: #333; } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1 { color: #2c3e50; margin-bottom: 10px; } /* Стили для сетки 10×10 */ .grid-container { margin: 20px 0; } .grid-label { font-weight: bold; margin-bottom: 10px; color: #333; } .grid { display: grid; grid-template-columns: repeat(10, 25px); grid-template-rows: repeat(10, 25px); gap: 1px; background-color: transparent; /* Убрали серый фон */ padding: 15px; border-radius: 8px; border: none; /* Убрали серую рамку */ justify-content: center; } .grid-cell { width: 25px; height: 25px; background-color: white; border: 1px solid #ccc; cursor: pointer; transition: all 0.2s ease; } .grid-cell:hover { background-color: #e6f7ff; transform: scale(1.05); } .sample-cell { cursor: default; pointer-events: none; } .sample-shape { background-color: #ffeb3b; border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 235, 59, 0.5); } .filled { background-color: #4caf50; border-color: #388e3c; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3); } /* Подсветка ошибок — ключевые стили для JS */ .extra-mistake { background-color: #ffcccc !important; /* Красный для лишних ячеек */ border: 2px solid #ff0000 !important; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important; } .missing-mistake { background-color: #ffffcc !important; /* Жёлтый для недостающих ячеек */ border: 2px dashed #ffff00 !important; animation: pulse 1s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } /* Стили для сообщений */ .message { padding: 12px 15px; margin: 10px 0; border-radius: 6px; text-align: center; font-weight: bold; font-size: 16px; } .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .message.info { background-color: #d1ecf1; color: #0c5460; } /* Стили для кнопок */ button { padding: 12px 24px; margin: 8px 5px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 500; transition: background-color 0.2s; } #reset-btn { background-color: #6c757d; color: white; } #check-btn { background-color: #007bff; color: white; } #contact-btn { background-color: #28a745; color: white; } #next-level-btn { background-color: #28a745; color: white; } button:hover { opacity: 0.9; transform: translateY(-1px); } /* Стиль для кнопки «Следующий уровень» при успешном прохождении */ #next-level-btn { background-color: #4CAF50; /* Зелёный цвет */ color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; /* Явный курсор — кнопка кликабельна */ border-radius: 6px; transition: all 0.3s ease; opacity: 1; /* Изначально полупрозрачная (неактивная) */ } #next-level-btn:hover { background-color: #45a049; /* Темнее при наведении */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Активное состояние — кнопка становится полной непрозрачности */ #next-level-btn.passed { opacity: 1; background-color: #2E7D32; /* Более насыщенный зелёный */ } /* При наведении на активную кнопку */ #next-level-btn.passed:hover { background-color: #1B5E20; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } /* Стили для модального окна */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); /* Опечатка исправлена: backdrop-filter */ } .modal-content { background-color: white; margin: 5% auto; padding: 25px; border-radius: 12px; width: 90%; max-width: 450px; position: relative; animation: fadeIn 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .close { color: #aaa; float: right; font-size: 30px; font-weight: bold; cursor: pointer; } .close:hover { color: black; } .contact-info { margin-top: 15px; } .contact-details { margin-top: 10px; } .contact-details p { margin: 10px 0; } .contact-details a { color: #007bff; text-decoration: none; } .contact-details a:hover { text-decoration: underline; } /* Дополнительные стили для адаптивности */ @media (max-width: 768px) { .message { font-size: 14px; /* Уменьшаем размер шрифта */ padding: 10px 12px; /* Компактные отступы */ margin: 8px 0; /* Меньше вертикального отступа */ } /* Дополнительно уменьшаем сетку для лучшей читаемости */ .grid { grid-template-columns: repeat(10, 22px); /* Ячейки чуть меньше */ grid-template-rows: repeat(10, 22px); gap: 0.8px; /* Чуть меньше зазор */ padding: 10px; /* Меньше padding */ } .grid-cell { width: 22px; height: 22px; } /* Уменьшаем кнопки */ button { padding: 10px 20px; font-size: 14px; } /* Уменьшаем заголовок */ h1 { font-size: 1.8rem; margin-bottom: 8px; } } /* Дополнительные стили для уровня и счётчика попыток */ #level-display { font-size: 1.2rem; font-weight: bold; color: #2c3e50; margin: 15px 0; padding: 10px; background-color: white; border-radius: 6px; display: inline-block; min-width: 120px; } /* Стили для счётчика попыток (если добавите в HTML) */ .attempts-counter { font-size: 0.9rem; color: #666; margin-top: 5px; } /* Улучшенные стили для ячеек при разных состояниях */ .grid-cell.filled:hover { background-color: #45a049; /* Темнее при наведении */ transform: scale(1.03); } .sample-shape:hover { box-shadow: 0 0 8px rgba(255, 235, 59, 0.7); } /* Плавные переходы для всех изменяемых свойств */ .grid-cell, .message, button, .modal-content { transition: all 0.3s ease; } /* Стили для состояния загрузки */ .loading { opacity: 0.6; pointer-events: none; } /* Стили для фокуса (доступность) */ .grid-cell:focus { outline: 2px solid #007bff; outline-offset: 2px; } button:focus { outline: 2px solid #0056b3; outline-offset: 2px; } /* Специальные стили для разных типов фигур (опционально) */ /* Можно использовать data-атрибуты для разных цветов фигур */ [data-shape-type="square"] .sample-shape { background-color: #ff9800; border-color: #f57c00; } [data-shape-type="triangle"] .sample-shape { background-color: #e91e63; border-color: #ad1457; } [data-shape-type="circle"] .sample-shape { background-color: #9c27b0; border-color: #7b1fa2; border-radius: 50%; } /* Анимация появления сетки */ @keyframes gridFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .grid { animation: gridFadeIn 0.5s ease-out; } /* Стили для кнопки «Скрыть/Показать подсказку» (если добавите) */ #hint-btn { background-color: #ffc107; color: #333; } #hint-btn:hover { background-color: #ffb300; } /* Адаптация для тёмного режима (опционально) */ @media (prefers-color-scheme: dark) { body { background-color: #1a1a1a; color: #e0e0e0; } .grid-cell { background-color: #2d2d2d; border-color: #555; } .filled { background-color: #2e7d32; border-color: #1b5e20; } .sample-shape { background-color: #b28f00; border-color: #8d6e00; } .extra-mistake { background-color: #401a1a !important; border-color: #803333 !important; } .missing-mistake { background-color: #333326 !important; border-color: #66664d !important; } .modal-content { background-color: #2d2d2d; } } /* Финальные исправления */ /* Исправление опечатки в backdrop-filter */ .modal { backdrop-filter: blur(5px); /* Было: backdrop-filter → backdrop-filter */ } /* Корректное написание свойства */ .modal { backdrop-filter: blur(5px); }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-dd8a728 */.elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item { display: flex; justify-content: center; align-items: center; } .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { margin: 0 auto; display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6736268 */#gallery-2.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-2.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-2.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-2.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-5a96fe4 */#gallery-3.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-3.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-3.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-3.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-bc64721 */#gallery-4.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-4.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-4.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-4.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-1ae15ed */#gallery-5.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-5.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-5.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-5.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-b6c27e0 */#gallery-6.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-6.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-6.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-6.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-416895a */#gallery-7.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-7.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-7.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-7.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-e3bbe66 */#gallery-8.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-8.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-8.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-8.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6fb7499 */#gallery-9.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-9.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-9.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-9.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-788e483 *//* Общие стили */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; color: #333; } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1 { color: #2c3e50; margin-bottom: 10px; } /* Стили для сетки 10×10 */ .grid-container { margin: 20px 0; } .grid-label { font-weight: bold; margin-bottom: 10px; color: #333; } .grid { display: grid; grid-template-columns: repeat(10, 25px); grid-template-rows: repeat(10, 25px); gap: 1px; background-color: transparent; /* Убрали серый фон */ padding: 15px; border-radius: 8px; border: none; /* Убрали серую рамку */ justify-content: center; } .grid-cell { width: 25px; height: 25px; background-color: white; border: 1px solid #ccc; cursor: pointer; transition: all 0.2s ease; } .grid-cell:hover { background-color: #e6f7ff; transform: scale(1.05); } .sample-cell { cursor: default; pointer-events: none; } .sample-shape { background-color: #ffeb3b; border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 235, 59, 0.5); } .filled { background-color: #4caf50; border-color: #388e3c; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3); } /* Подсветка ошибок — ключевые стили для JS */ .extra-mistake { background-color: #ffcccc !important; /* Красный для лишних ячеек */ border: 2px solid #ff0000 !important; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important; } .missing-mistake { background-color: #ffffcc !important; /* Жёлтый для недостающих ячеек */ border: 2px dashed #ffff00 !important; animation: pulse 1s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } /* Стили для сообщений */ .message { padding: 12px 15px; margin: 10px 0; border-radius: 6px; text-align: center; font-weight: bold; font-size: 16px; } .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .message.info { background-color: #d1ecf1; color: #0c5460; } /* Стили для кнопок */ button { padding: 12px 24px; margin: 8px 5px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 500; transition: background-color 0.2s; } #reset-btn { background-color: #6c757d; color: white; } #check-btn { background-color: #007bff; color: white; } #contact-btn { background-color: #28a745; color: white; } #next-level-btn { background-color: #28a745; color: white; } button:hover { opacity: 0.9; transform: translateY(-1px); } /* Стиль для кнопки «Следующий уровень» при успешном прохождении */ #next-level-btn { background-color: #4CAF50; /* Зелёный цвет */ color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; /* Явный курсор — кнопка кликабельна */ border-radius: 6px; transition: all 0.3s ease; opacity: 1; /* Изначально полупрозрачная (неактивная) */ } #next-level-btn:hover { background-color: #45a049; /* Темнее при наведении */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Активное состояние — кнопка становится полной непрозрачности */ #next-level-btn.passed { opacity: 1; background-color: #2E7D32; /* Более насыщенный зелёный */ } /* При наведении на активную кнопку */ #next-level-btn.passed:hover { background-color: #1B5E20; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } /* Стили для модального окна */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); /* Опечатка исправлена: backdrop-filter */ } .modal-content { background-color: white; margin: 5% auto; padding: 25px; border-radius: 12px; width: 90%; max-width: 450px; position: relative; animation: fadeIn 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .close { color: #aaa; float: right; font-size: 30px; font-weight: bold; cursor: pointer; } .close:hover { color: black; } .contact-info { margin-top: 15px; } .contact-details { margin-top: 10px; } .contact-details p { margin: 10px 0; } .contact-details a { color: #007bff; text-decoration: none; } .contact-details a:hover { text-decoration: underline; } /* Дополнительные стили для адаптивности */ @media (max-width: 768px) { .message { font-size: 14px; /* Уменьшаем размер шрифта */ padding: 10px 12px; /* Компактные отступы */ margin: 8px 0; /* Меньше вертикального отступа */ } /* Дополнительно уменьшаем сетку для лучшей читаемости */ .grid { grid-template-columns: repeat(10, 22px); /* Ячейки чуть меньше */ grid-template-rows: repeat(10, 22px); gap: 0.8px; /* Чуть меньше зазор */ padding: 10px; /* Меньше padding */ } .grid-cell { width: 22px; height: 22px; } /* Уменьшаем кнопки */ button { padding: 10px 20px; font-size: 14px; } /* Уменьшаем заголовок */ h1 { font-size: 1.8rem; margin-bottom: 8px; } } /* Дополнительные стили для уровня и счётчика попыток */ #level-display { font-size: 1.2rem; font-weight: bold; color: #2c3e50; margin: 15px 0; padding: 10px; background-color: white; border-radius: 6px; display: inline-block; min-width: 120px; } /* Стили для счётчика попыток (если добавите в HTML) */ .attempts-counter { font-size: 0.9rem; color: #666; margin-top: 5px; } /* Улучшенные стили для ячеек при разных состояниях */ .grid-cell.filled:hover { background-color: #45a049; /* Темнее при наведении */ transform: scale(1.03); } .sample-shape:hover { box-shadow: 0 0 8px rgba(255, 235, 59, 0.7); } /* Плавные переходы для всех изменяемых свойств */ .grid-cell, .message, button, .modal-content { transition: all 0.3s ease; } /* Стили для состояния загрузки */ .loading { opacity: 0.6; pointer-events: none; } /* Стили для фокуса (доступность) */ .grid-cell:focus { outline: 2px solid #007bff; outline-offset: 2px; } button:focus { outline: 2px solid #0056b3; outline-offset: 2px; } /* Специальные стили для разных типов фигур (опционально) */ /* Можно использовать data-атрибуты для разных цветов фигур */ [data-shape-type="square"] .sample-shape { background-color: #ff9800; border-color: #f57c00; } [data-shape-type="triangle"] .sample-shape { background-color: #e91e63; border-color: #ad1457; } [data-shape-type="circle"] .sample-shape { background-color: #9c27b0; border-color: #7b1fa2; border-radius: 50%; } /* Анимация появления сетки */ @keyframes gridFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .grid { animation: gridFadeIn 0.5s ease-out; } /* Стили для кнопки «Скрыть/Показать подсказку» (если добавите) */ #hint-btn { background-color: #ffc107; color: #333; } #hint-btn:hover { background-color: #ffb300; } /* Адаптация для тёмного режима (опционально) */ @media (prefers-color-scheme: dark) { body { background-color: #1a1a1a; color: #e0e0e0; } .grid-cell { background-color: #2d2d2d; border-color: #555; } .filled { background-color: #2e7d32; border-color: #1b5e20; } .sample-shape { background-color: #b28f00; border-color: #8d6e00; } .extra-mistake { background-color: #401a1a !important; border-color: #803333 !important; } .missing-mistake { background-color: #333326 !important; border-color: #66664d !important; } .modal-content { background-color: #2d2d2d; } } /* Финальные исправления */ /* Исправление опечатки в backdrop-filter */ .modal { backdrop-filter: blur(5px); /* Было: backdrop-filter → backdrop-filter */ } /* Корректное написание свойства */ .modal { backdrop-filter: blur(5px); }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-dd8a728 */.elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item { display: flex; justify-content: center; align-items: center; } .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { margin: 0 auto; display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6736268 */#gallery-2.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-2.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-2.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-2.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-5a96fe4 */#gallery-3.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-3.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-3.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-3.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-bc64721 */#gallery-4.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-4.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-4.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-4.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-1ae15ed */#gallery-5.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-5.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-5.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-5.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-b6c27e0 */#gallery-6.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-6.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-6.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-6.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-416895a */#gallery-7.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-7.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-7.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-7.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-e3bbe66 */#gallery-8.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-8.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-8.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-8.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6fb7499 */#gallery-9.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-9.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-9.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-9.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-788e483 *//* Общие стили */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; color: #333; } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1 { color: #2c3e50; margin-bottom: 10px; } /* Стили для сетки 10×10 */ .grid-container { margin: 20px 0; } .grid-label { font-weight: bold; margin-bottom: 10px; color: #333; } .grid { display: grid; grid-template-columns: repeat(10, 25px); grid-template-rows: repeat(10, 25px); gap: 1px; background-color: transparent; /* Убрали серый фон */ padding: 15px; border-radius: 8px; border: none; /* Убрали серую рамку */ justify-content: center; } .grid-cell { width: 25px; height: 25px; background-color: white; border: 1px solid #ccc; cursor: pointer; transition: all 0.2s ease; } .grid-cell:hover { background-color: #e6f7ff; transform: scale(1.05); } .sample-cell { cursor: default; pointer-events: none; } .sample-shape { background-color: #ffeb3b; border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 235, 59, 0.5); } .filled { background-color: #4caf50; border-color: #388e3c; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3); } /* Подсветка ошибок — ключевые стили для JS */ .extra-mistake { background-color: #ffcccc !important; /* Красный для лишних ячеек */ border: 2px solid #ff0000 !important; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important; } .missing-mistake { background-color: #ffffcc !important; /* Жёлтый для недостающих ячеек */ border: 2px dashed #ffff00 !important; animation: pulse 1s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } /* Стили для сообщений */ .message { padding: 12px 15px; margin: 10px 0; border-radius: 6px; text-align: center; font-weight: bold; font-size: 16px; } .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .message.info { background-color: #d1ecf1; color: #0c5460; } /* Стили для кнопок */ button { padding: 12px 24px; margin: 8px 5px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 500; transition: background-color 0.2s; } #reset-btn { background-color: #6c757d; color: white; } #check-btn { background-color: #007bff; color: white; } #contact-btn { background-color: #28a745; color: white; } #next-level-btn { background-color: #28a745; color: white; } button:hover { opacity: 0.9; transform: translateY(-1px); } /* Стиль для кнопки «Следующий уровень» при успешном прохождении */ #next-level-btn { background-color: #4CAF50; /* Зелёный цвет */ color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; /* Явный курсор — кнопка кликабельна */ border-radius: 6px; transition: all 0.3s ease; opacity: 1; /* Изначально полупрозрачная (неактивная) */ } #next-level-btn:hover { background-color: #45a049; /* Темнее при наведении */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Активное состояние — кнопка становится полной непрозрачности */ #next-level-btn.passed { opacity: 1; background-color: #2E7D32; /* Более насыщенный зелёный */ } /* При наведении на активную кнопку */ #next-level-btn.passed:hover { background-color: #1B5E20; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } /* Стили для модального окна */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); /* Опечатка исправлена: backdrop-filter */ } .modal-content { background-color: white; margin: 5% auto; padding: 25px; border-radius: 12px; width: 90%; max-width: 450px; position: relative; animation: fadeIn 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .close { color: #aaa; float: right; font-size: 30px; font-weight: bold; cursor: pointer; } .close:hover { color: black; } .contact-info { margin-top: 15px; } .contact-details { margin-top: 10px; } .contact-details p { margin: 10px 0; } .contact-details a { color: #007bff; text-decoration: none; } .contact-details a:hover { text-decoration: underline; } /* Дополнительные стили для адаптивности */ @media (max-width: 768px) { .message { font-size: 14px; /* Уменьшаем размер шрифта */ padding: 10px 12px; /* Компактные отступы */ margin: 8px 0; /* Меньше вертикального отступа */ } /* Дополнительно уменьшаем сетку для лучшей читаемости */ .grid { grid-template-columns: repeat(10, 22px); /* Ячейки чуть меньше */ grid-template-rows: repeat(10, 22px); gap: 0.8px; /* Чуть меньше зазор */ padding: 10px; /* Меньше padding */ } .grid-cell { width: 22px; height: 22px; } /* Уменьшаем кнопки */ button { padding: 10px 20px; font-size: 14px; } /* Уменьшаем заголовок */ h1 { font-size: 1.8rem; margin-bottom: 8px; } } /* Дополнительные стили для уровня и счётчика попыток */ #level-display { font-size: 1.2rem; font-weight: bold; color: #2c3e50; margin: 15px 0; padding: 10px; background-color: white; border-radius: 6px; display: inline-block; min-width: 120px; } /* Стили для счётчика попыток (если добавите в HTML) */ .attempts-counter { font-size: 0.9rem; color: #666; margin-top: 5px; } /* Улучшенные стили для ячеек при разных состояниях */ .grid-cell.filled:hover { background-color: #45a049; /* Темнее при наведении */ transform: scale(1.03); } .sample-shape:hover { box-shadow: 0 0 8px rgba(255, 235, 59, 0.7); } /* Плавные переходы для всех изменяемых свойств */ .grid-cell, .message, button, .modal-content { transition: all 0.3s ease; } /* Стили для состояния загрузки */ .loading { opacity: 0.6; pointer-events: none; } /* Стили для фокуса (доступность) */ .grid-cell:focus { outline: 2px solid #007bff; outline-offset: 2px; } button:focus { outline: 2px solid #0056b3; outline-offset: 2px; } /* Специальные стили для разных типов фигур (опционально) */ /* Можно использовать data-атрибуты для разных цветов фигур */ [data-shape-type="square"] .sample-shape { background-color: #ff9800; border-color: #f57c00; } [data-shape-type="triangle"] .sample-shape { background-color: #e91e63; border-color: #ad1457; } [data-shape-type="circle"] .sample-shape { background-color: #9c27b0; border-color: #7b1fa2; border-radius: 50%; } /* Анимация появления сетки */ @keyframes gridFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .grid { animation: gridFadeIn 0.5s ease-out; } /* Стили для кнопки «Скрыть/Показать подсказку» (если добавите) */ #hint-btn { background-color: #ffc107; color: #333; } #hint-btn:hover { background-color: #ffb300; } /* Адаптация для тёмного режима (опционально) */ @media (prefers-color-scheme: dark) { body { background-color: #1a1a1a; color: #e0e0e0; } .grid-cell { background-color: #2d2d2d; border-color: #555; } .filled { background-color: #2e7d32; border-color: #1b5e20; } .sample-shape { background-color: #b28f00; border-color: #8d6e00; } .extra-mistake { background-color: #401a1a !important; border-color: #803333 !important; } .missing-mistake { background-color: #333326 !important; border-color: #66664d !important; } .modal-content { background-color: #2d2d2d; } } /* Финальные исправления */ /* Исправление опечатки в backdrop-filter */ .modal { backdrop-filter: blur(5px); /* Было: backdrop-filter → backdrop-filter */ } /* Корректное написание свойства */ .modal { backdrop-filter: blur(5px); }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-dd8a728 */.elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item { display: flex; justify-content: center; align-items: center; } .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { margin: 0 auto; display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6736268 */#gallery-2.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-2.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-2.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-2.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-5a96fe4 */#gallery-3.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-3.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-3.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-3.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-bc64721 */#gallery-4.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-4.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-4.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-4.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-1ae15ed */#gallery-5.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-5.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-5.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-5.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-b6c27e0 */#gallery-6.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-6.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-6.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-6.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-416895a */#gallery-7.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-7.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-7.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-7.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-e3bbe66 */#gallery-8.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-8.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-8.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-8.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6fb7499 */#gallery-9.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-9.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-9.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-9.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-788e483 *//* Общие стили */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; color: #333; } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1 { color: #2c3e50; margin-bottom: 10px; } /* Стили для сетки 10×10 */ .grid-container { margin: 20px 0; } .grid-label { font-weight: bold; margin-bottom: 10px; color: #333; } .grid { display: grid; grid-template-columns: repeat(10, 25px); grid-template-rows: repeat(10, 25px); gap: 1px; background-color: transparent; /* Убрали серый фон */ padding: 15px; border-radius: 8px; border: none; /* Убрали серую рамку */ justify-content: center; } .grid-cell { width: 25px; height: 25px; background-color: white; border: 1px solid #ccc; cursor: pointer; transition: all 0.2s ease; } .grid-cell:hover { background-color: #e6f7ff; transform: scale(1.05); } .sample-cell { cursor: default; pointer-events: none; } .sample-shape { background-color: #ffeb3b; border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 235, 59, 0.5); } .filled { background-color: #4caf50; border-color: #388e3c; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3); } /* Подсветка ошибок — ключевые стили для JS */ .extra-mistake { background-color: #ffcccc !important; /* Красный для лишних ячеек */ border: 2px solid #ff0000 !important; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important; } .missing-mistake { background-color: #ffffcc !important; /* Жёлтый для недостающих ячеек */ border: 2px dashed #ffff00 !important; animation: pulse 1s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } /* Стили для сообщений */ .message { padding: 12px 15px; margin: 10px 0; border-radius: 6px; text-align: center; font-weight: bold; font-size: 16px; } .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .message.info { background-color: #d1ecf1; color: #0c5460; } /* Стили для кнопок */ button { padding: 12px 24px; margin: 8px 5px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 500; transition: background-color 0.2s; } #reset-btn { background-color: #6c757d; color: white; } #check-btn { background-color: #007bff; color: white; } #contact-btn { background-color: #28a745; color: white; } #next-level-btn { background-color: #28a745; color: white; } button:hover { opacity: 0.9; transform: translateY(-1px); } /* Стиль для кнопки «Следующий уровень» при успешном прохождении */ #next-level-btn { background-color: #4CAF50; /* Зелёный цвет */ color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; /* Явный курсор — кнопка кликабельна */ border-radius: 6px; transition: all 0.3s ease; opacity: 1; /* Изначально полупрозрачная (неактивная) */ } #next-level-btn:hover { background-color: #45a049; /* Темнее при наведении */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Активное состояние — кнопка становится полной непрозрачности */ #next-level-btn.passed { opacity: 1; background-color: #2E7D32; /* Более насыщенный зелёный */ } /* При наведении на активную кнопку */ #next-level-btn.passed:hover { background-color: #1B5E20; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } /* Стили для модального окна */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); /* Опечатка исправлена: backdrop-filter */ } .modal-content { background-color: white; margin: 5% auto; padding: 25px; border-radius: 12px; width: 90%; max-width: 450px; position: relative; animation: fadeIn 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .close { color: #aaa; float: right; font-size: 30px; font-weight: bold; cursor: pointer; } .close:hover { color: black; } .contact-info { margin-top: 15px; } .contact-details { margin-top: 10px; } .contact-details p { margin: 10px 0; } .contact-details a { color: #007bff; text-decoration: none; } .contact-details a:hover { text-decoration: underline; } /* Дополнительные стили для адаптивности */ @media (max-width: 768px) { .message { font-size: 14px; /* Уменьшаем размер шрифта */ padding: 10px 12px; /* Компактные отступы */ margin: 8px 0; /* Меньше вертикального отступа */ } /* Дополнительно уменьшаем сетку для лучшей читаемости */ .grid { grid-template-columns: repeat(10, 22px); /* Ячейки чуть меньше */ grid-template-rows: repeat(10, 22px); gap: 0.8px; /* Чуть меньше зазор */ padding: 10px; /* Меньше padding */ } .grid-cell { width: 22px; height: 22px; } /* Уменьшаем кнопки */ button { padding: 10px 20px; font-size: 14px; } /* Уменьшаем заголовок */ h1 { font-size: 1.8rem; margin-bottom: 8px; } } /* Дополнительные стили для уровня и счётчика попыток */ #level-display { font-size: 1.2rem; font-weight: bold; color: #2c3e50; margin: 15px 0; padding: 10px; background-color: white; border-radius: 6px; display: inline-block; min-width: 120px; } /* Стили для счётчика попыток (если добавите в HTML) */ .attempts-counter { font-size: 0.9rem; color: #666; margin-top: 5px; } /* Улучшенные стили для ячеек при разных состояниях */ .grid-cell.filled:hover { background-color: #45a049; /* Темнее при наведении */ transform: scale(1.03); } .sample-shape:hover { box-shadow: 0 0 8px rgba(255, 235, 59, 0.7); } /* Плавные переходы для всех изменяемых свойств */ .grid-cell, .message, button, .modal-content { transition: all 0.3s ease; } /* Стили для состояния загрузки */ .loading { opacity: 0.6; pointer-events: none; } /* Стили для фокуса (доступность) */ .grid-cell:focus { outline: 2px solid #007bff; outline-offset: 2px; } button:focus { outline: 2px solid #0056b3; outline-offset: 2px; } /* Специальные стили для разных типов фигур (опционально) */ /* Можно использовать data-атрибуты для разных цветов фигур */ [data-shape-type="square"] .sample-shape { background-color: #ff9800; border-color: #f57c00; } [data-shape-type="triangle"] .sample-shape { background-color: #e91e63; border-color: #ad1457; } [data-shape-type="circle"] .sample-shape { background-color: #9c27b0; border-color: #7b1fa2; border-radius: 50%; } /* Анимация появления сетки */ @keyframes gridFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .grid { animation: gridFadeIn 0.5s ease-out; } /* Стили для кнопки «Скрыть/Показать подсказку» (если добавите) */ #hint-btn { background-color: #ffc107; color: #333; } #hint-btn:hover { background-color: #ffb300; } /* Адаптация для тёмного режима (опционально) */ @media (prefers-color-scheme: dark) { body { background-color: #1a1a1a; color: #e0e0e0; } .grid-cell { background-color: #2d2d2d; border-color: #555; } .filled { background-color: #2e7d32; border-color: #1b5e20; } .sample-shape { background-color: #b28f00; border-color: #8d6e00; } .extra-mistake { background-color: #401a1a !important; border-color: #803333 !important; } .missing-mistake { background-color: #333326 !important; border-color: #66664d !important; } .modal-content { background-color: #2d2d2d; } } /* Финальные исправления */ /* Исправление опечатки в backdrop-filter */ .modal { backdrop-filter: blur(5px); /* Было: backdrop-filter → backdrop-filter */ } /* Корректное написание свойства */ .modal { backdrop-filter: blur(5px); }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-dd8a728 */.elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item { display: flex; justify-content: center; align-items: center; } .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { margin: 0 auto; display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6736268 */#gallery-2.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-2.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-2.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-2.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-5a96fe4 */#gallery-3.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-3.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-3.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-3.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-bc64721 */#gallery-4.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-4.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-4.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-4.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-1ae15ed */#gallery-5.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-5.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-5.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-5.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-b6c27e0 */#gallery-6.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-6.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-6.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-6.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-416895a */#gallery-7.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-7.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-7.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-7.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-e3bbe66 */#gallery-8.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-8.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-8.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-8.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6fb7499 */#gallery-9.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-9.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-9.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-9.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-788e483 *//* Общие стили */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; color: #333; } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1 { color: #2c3e50; margin-bottom: 10px; } /* Стили для сетки 10×10 */ .grid-container { margin: 20px 0; } .grid-label { font-weight: bold; margin-bottom: 10px; color: #333; } .grid { display: grid; grid-template-columns: repeat(10, 25px); grid-template-rows: repeat(10, 25px); gap: 1px; background-color: transparent; /* Убрали серый фон */ padding: 15px; border-radius: 8px; border: none; /* Убрали серую рамку */ justify-content: center; } .grid-cell { width: 25px; height: 25px; background-color: white; border: 1px solid #ccc; cursor: pointer; transition: all 0.2s ease; } .grid-cell:hover { background-color: #e6f7ff; transform: scale(1.05); } .sample-cell { cursor: default; pointer-events: none; } .sample-shape { background-color: #ffeb3b; border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 235, 59, 0.5); } .filled { background-color: #4caf50; border-color: #388e3c; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3); } /* Подсветка ошибок — ключевые стили для JS */ .extra-mistake { background-color: #ffcccc !important; /* Красный для лишних ячеек */ border: 2px solid #ff0000 !important; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important; } .missing-mistake { background-color: #ffffcc !important; /* Жёлтый для недостающих ячеек */ border: 2px dashed #ffff00 !important; animation: pulse 1s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } /* Стили для сообщений */ .message { padding: 12px 15px; margin: 10px 0; border-radius: 6px; text-align: center; font-weight: bold; font-size: 16px; } .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .message.info { background-color: #d1ecf1; color: #0c5460; } /* Стили для кнопок */ button { padding: 12px 24px; margin: 8px 5px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 500; transition: background-color 0.2s; } #reset-btn { background-color: #6c757d; color: white; } #check-btn { background-color: #007bff; color: white; } #contact-btn { background-color: #28a745; color: white; } #next-level-btn { background-color: #28a745; color: white; } button:hover { opacity: 0.9; transform: translateY(-1px); } /* Стиль для кнопки «Следующий уровень» при успешном прохождении */ #next-level-btn { background-color: #4CAF50; /* Зелёный цвет */ color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; /* Явный курсор — кнопка кликабельна */ border-radius: 6px; transition: all 0.3s ease; opacity: 1; /* Изначально полупрозрачная (неактивная) */ } #next-level-btn:hover { background-color: #45a049; /* Темнее при наведении */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Активное состояние — кнопка становится полной непрозрачности */ #next-level-btn.passed { opacity: 1; background-color: #2E7D32; /* Более насыщенный зелёный */ } /* При наведении на активную кнопку */ #next-level-btn.passed:hover { background-color: #1B5E20; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } /* Стили для модального окна */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); /* Опечатка исправлена: backdrop-filter */ } .modal-content { background-color: white; margin: 5% auto; padding: 25px; border-radius: 12px; width: 90%; max-width: 450px; position: relative; animation: fadeIn 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .close { color: #aaa; float: right; font-size: 30px; font-weight: bold; cursor: pointer; } .close:hover { color: black; } .contact-info { margin-top: 15px; } .contact-details { margin-top: 10px; } .contact-details p { margin: 10px 0; } .contact-details a { color: #007bff; text-decoration: none; } .contact-details a:hover { text-decoration: underline; } /* Дополнительные стили для адаптивности */ @media (max-width: 768px) { .message { font-size: 14px; /* Уменьшаем размер шрифта */ padding: 10px 12px; /* Компактные отступы */ margin: 8px 0; /* Меньше вертикального отступа */ } /* Дополнительно уменьшаем сетку для лучшей читаемости */ .grid { grid-template-columns: repeat(10, 22px); /* Ячейки чуть меньше */ grid-template-rows: repeat(10, 22px); gap: 0.8px; /* Чуть меньше зазор */ padding: 10px; /* Меньше padding */ } .grid-cell { width: 22px; height: 22px; } /* Уменьшаем кнопки */ button { padding: 10px 20px; font-size: 14px; } /* Уменьшаем заголовок */ h1 { font-size: 1.8rem; margin-bottom: 8px; } } /* Дополнительные стили для уровня и счётчика попыток */ #level-display { font-size: 1.2rem; font-weight: bold; color: #2c3e50; margin: 15px 0; padding: 10px; background-color: white; border-radius: 6px; display: inline-block; min-width: 120px; } /* Стили для счётчика попыток (если добавите в HTML) */ .attempts-counter { font-size: 0.9rem; color: #666; margin-top: 5px; } /* Улучшенные стили для ячеек при разных состояниях */ .grid-cell.filled:hover { background-color: #45a049; /* Темнее при наведении */ transform: scale(1.03); } .sample-shape:hover { box-shadow: 0 0 8px rgba(255, 235, 59, 0.7); } /* Плавные переходы для всех изменяемых свойств */ .grid-cell, .message, button, .modal-content { transition: all 0.3s ease; } /* Стили для состояния загрузки */ .loading { opacity: 0.6; pointer-events: none; } /* Стили для фокуса (доступность) */ .grid-cell:focus { outline: 2px solid #007bff; outline-offset: 2px; } button:focus { outline: 2px solid #0056b3; outline-offset: 2px; } /* Специальные стили для разных типов фигур (опционально) */ /* Можно использовать data-атрибуты для разных цветов фигур */ [data-shape-type="square"] .sample-shape { background-color: #ff9800; border-color: #f57c00; } [data-shape-type="triangle"] .sample-shape { background-color: #e91e63; border-color: #ad1457; } [data-shape-type="circle"] .sample-shape { background-color: #9c27b0; border-color: #7b1fa2; border-radius: 50%; } /* Анимация появления сетки */ @keyframes gridFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .grid { animation: gridFadeIn 0.5s ease-out; } /* Стили для кнопки «Скрыть/Показать подсказку» (если добавите) */ #hint-btn { background-color: #ffc107; color: #333; } #hint-btn:hover { background-color: #ffb300; } /* Адаптация для тёмного режима (опционально) */ @media (prefers-color-scheme: dark) { body { background-color: #1a1a1a; color: #e0e0e0; } .grid-cell { background-color: #2d2d2d; border-color: #555; } .filled { background-color: #2e7d32; border-color: #1b5e20; } .sample-shape { background-color: #b28f00; border-color: #8d6e00; } .extra-mistake { background-color: #401a1a !important; border-color: #803333 !important; } .missing-mistake { background-color: #333326 !important; border-color: #66664d !important; } .modal-content { background-color: #2d2d2d; } } /* Финальные исправления */ /* Исправление опечатки в backdrop-filter */ .modal { backdrop-filter: blur(5px); /* Было: backdrop-filter → backdrop-filter */ } /* Корректное написание свойства */ .modal { backdrop-filter: blur(5px); }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-dd8a728 */.elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item { display: flex; justify-content: center; align-items: center; } .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { margin: 0 auto; display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6736268 */#gallery-2.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-2.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-2.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-2.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-5a96fe4 */#gallery-3.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-3.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-3.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-3.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-bc64721 */#gallery-4.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-4.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-4.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-4.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-1ae15ed */#gallery-5.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-5.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-5.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-5.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-b6c27e0 */#gallery-6.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-6.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-6.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-6.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-416895a */#gallery-7.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-7.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-7.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-7.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-e3bbe66 */#gallery-8.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-8.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-8.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-8.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6fb7499 */#gallery-9.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-9.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-9.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-9.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-788e483 *//* Общие стили */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; color: #333; } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1 { color: #2c3e50; margin-bottom: 10px; } /* Стили для сетки 10×10 */ .grid-container { margin: 20px 0; } .grid-label { font-weight: bold; margin-bottom: 10px; color: #333; } .grid { display: grid; grid-template-columns: repeat(10, 25px); grid-template-rows: repeat(10, 25px); gap: 1px; background-color: transparent; /* Убрали серый фон */ padding: 15px; border-radius: 8px; border: none; /* Убрали серую рамку */ justify-content: center; } .grid-cell { width: 25px; height: 25px; background-color: white; border: 1px solid #ccc; cursor: pointer; transition: all 0.2s ease; } .grid-cell:hover { background-color: #e6f7ff; transform: scale(1.05); } .sample-cell { cursor: default; pointer-events: none; } .sample-shape { background-color: #ffeb3b; border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 235, 59, 0.5); } .filled { background-color: #4caf50; border-color: #388e3c; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3); } /* Подсветка ошибок — ключевые стили для JS */ .extra-mistake { background-color: #ffcccc !important; /* Красный для лишних ячеек */ border: 2px solid #ff0000 !important; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important; } .missing-mistake { background-color: #ffffcc !important; /* Жёлтый для недостающих ячеек */ border: 2px dashed #ffff00 !important; animation: pulse 1s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } /* Стили для сообщений */ .message { padding: 12px 15px; margin: 10px 0; border-radius: 6px; text-align: center; font-weight: bold; font-size: 16px; } .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .message.info { background-color: #d1ecf1; color: #0c5460; } /* Стили для кнопок */ button { padding: 12px 24px; margin: 8px 5px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 500; transition: background-color 0.2s; } #reset-btn { background-color: #6c757d; color: white; } #check-btn { background-color: #007bff; color: white; } #contact-btn { background-color: #28a745; color: white; } #next-level-btn { background-color: #28a745; color: white; } button:hover { opacity: 0.9; transform: translateY(-1px); } /* Стиль для кнопки «Следующий уровень» при успешном прохождении */ #next-level-btn { background-color: #4CAF50; /* Зелёный цвет */ color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; /* Явный курсор — кнопка кликабельна */ border-radius: 6px; transition: all 0.3s ease; opacity: 1; /* Изначально полупрозрачная (неактивная) */ } #next-level-btn:hover { background-color: #45a049; /* Темнее при наведении */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Активное состояние — кнопка становится полной непрозрачности */ #next-level-btn.passed { opacity: 1; background-color: #2E7D32; /* Более насыщенный зелёный */ } /* При наведении на активную кнопку */ #next-level-btn.passed:hover { background-color: #1B5E20; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } /* Стили для модального окна */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); /* Опечатка исправлена: backdrop-filter */ } .modal-content { background-color: white; margin: 5% auto; padding: 25px; border-radius: 12px; width: 90%; max-width: 450px; position: relative; animation: fadeIn 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .close { color: #aaa; float: right; font-size: 30px; font-weight: bold; cursor: pointer; } .close:hover { color: black; } .contact-info { margin-top: 15px; } .contact-details { margin-top: 10px; } .contact-details p { margin: 10px 0; } .contact-details a { color: #007bff; text-decoration: none; } .contact-details a:hover { text-decoration: underline; } /* Дополнительные стили для адаптивности */ @media (max-width: 768px) { .message { font-size: 14px; /* Уменьшаем размер шрифта */ padding: 10px 12px; /* Компактные отступы */ margin: 8px 0; /* Меньше вертикального отступа */ } /* Дополнительно уменьшаем сетку для лучшей читаемости */ .grid { grid-template-columns: repeat(10, 22px); /* Ячейки чуть меньше */ grid-template-rows: repeat(10, 22px); gap: 0.8px; /* Чуть меньше зазор */ padding: 10px; /* Меньше padding */ } .grid-cell { width: 22px; height: 22px; } /* Уменьшаем кнопки */ button { padding: 10px 20px; font-size: 14px; } /* Уменьшаем заголовок */ h1 { font-size: 1.8rem; margin-bottom: 8px; } } /* Дополнительные стили для уровня и счётчика попыток */ #level-display { font-size: 1.2rem; font-weight: bold; color: #2c3e50; margin: 15px 0; padding: 10px; background-color: white; border-radius: 6px; display: inline-block; min-width: 120px; } /* Стили для счётчика попыток (если добавите в HTML) */ .attempts-counter { font-size: 0.9rem; color: #666; margin-top: 5px; } /* Улучшенные стили для ячеек при разных состояниях */ .grid-cell.filled:hover { background-color: #45a049; /* Темнее при наведении */ transform: scale(1.03); } .sample-shape:hover { box-shadow: 0 0 8px rgba(255, 235, 59, 0.7); } /* Плавные переходы для всех изменяемых свойств */ .grid-cell, .message, button, .modal-content { transition: all 0.3s ease; } /* Стили для состояния загрузки */ .loading { opacity: 0.6; pointer-events: none; } /* Стили для фокуса (доступность) */ .grid-cell:focus { outline: 2px solid #007bff; outline-offset: 2px; } button:focus { outline: 2px solid #0056b3; outline-offset: 2px; } /* Специальные стили для разных типов фигур (опционально) */ /* Можно использовать data-атрибуты для разных цветов фигур */ [data-shape-type="square"] .sample-shape { background-color: #ff9800; border-color: #f57c00; } [data-shape-type="triangle"] .sample-shape { background-color: #e91e63; border-color: #ad1457; } [data-shape-type="circle"] .sample-shape { background-color: #9c27b0; border-color: #7b1fa2; border-radius: 50%; } /* Анимация появления сетки */ @keyframes gridFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .grid { animation: gridFadeIn 0.5s ease-out; } /* Стили для кнопки «Скрыть/Показать подсказку» (если добавите) */ #hint-btn { background-color: #ffc107; color: #333; } #hint-btn:hover { background-color: #ffb300; } /* Адаптация для тёмного режима (опционально) */ @media (prefers-color-scheme: dark) { body { background-color: #1a1a1a; color: #e0e0e0; } .grid-cell { background-color: #2d2d2d; border-color: #555; } .filled { background-color: #2e7d32; border-color: #1b5e20; } .sample-shape { background-color: #b28f00; border-color: #8d6e00; } .extra-mistake { background-color: #401a1a !important; border-color: #803333 !important; } .missing-mistake { background-color: #333326 !important; border-color: #66664d !important; } .modal-content { background-color: #2d2d2d; } } /* Финальные исправления */ /* Исправление опечатки в backdrop-filter */ .modal { backdrop-filter: blur(5px); /* Было: backdrop-filter → backdrop-filter */ } /* Корректное написание свойства */ .modal { backdrop-filter: blur(5px); }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-dd8a728 */.elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item { display: flex; justify-content: center; align-items: center; } .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { margin: 0 auto; display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6736268 */#gallery-2.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-2.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-2.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-2.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-5a96fe4 */#gallery-3.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-3.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-3.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-3.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-bc64721 */#gallery-4.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-4.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-4.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-4.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-1ae15ed */#gallery-5.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-5.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-5.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-5.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-b6c27e0 */#gallery-6.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-6.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-6.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-6.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-416895a */#gallery-7.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-7.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-7.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-7.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-e3bbe66 */#gallery-8.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-8.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-8.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-8.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6fb7499 */#gallery-9.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-9.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-9.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-9.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-788e483 *//* Общие стили */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; color: #333; } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1 { color: #2c3e50; margin-bottom: 10px; } /* Стили для сетки 10×10 */ .grid-container { margin: 20px 0; } .grid-label { font-weight: bold; margin-bottom: 10px; color: #333; } .grid { display: grid; grid-template-columns: repeat(10, 25px); grid-template-rows: repeat(10, 25px); gap: 1px; background-color: transparent; /* Убрали серый фон */ padding: 15px; border-radius: 8px; border: none; /* Убрали серую рамку */ justify-content: center; } .grid-cell { width: 25px; height: 25px; background-color: white; border: 1px solid #ccc; cursor: pointer; transition: all 0.2s ease; } .grid-cell:hover { background-color: #e6f7ff; transform: scale(1.05); } .sample-cell { cursor: default; pointer-events: none; } .sample-shape { background-color: #ffeb3b; border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 235, 59, 0.5); } .filled { background-color: #4caf50; border-color: #388e3c; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3); } /* Подсветка ошибок — ключевые стили для JS */ .extra-mistake { background-color: #ffcccc !important; /* Красный для лишних ячеек */ border: 2px solid #ff0000 !important; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important; } .missing-mistake { background-color: #ffffcc !important; /* Жёлтый для недостающих ячеек */ border: 2px dashed #ffff00 !important; animation: pulse 1s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } /* Стили для сообщений */ .message { padding: 12px 15px; margin: 10px 0; border-radius: 6px; text-align: center; font-weight: bold; font-size: 16px; } .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .message.info { background-color: #d1ecf1; color: #0c5460; } /* Стили для кнопок */ button { padding: 12px 24px; margin: 8px 5px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 500; transition: background-color 0.2s; } #reset-btn { background-color: #6c757d; color: white; } #check-btn { background-color: #007bff; color: white; } #contact-btn { background-color: #28a745; color: white; } #next-level-btn { background-color: #28a745; color: white; } button:hover { opacity: 0.9; transform: translateY(-1px); } /* Стиль для кнопки «Следующий уровень» при успешном прохождении */ #next-level-btn { background-color: #4CAF50; /* Зелёный цвет */ color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; /* Явный курсор — кнопка кликабельна */ border-radius: 6px; transition: all 0.3s ease; opacity: 1; /* Изначально полупрозрачная (неактивная) */ } #next-level-btn:hover { background-color: #45a049; /* Темнее при наведении */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Активное состояние — кнопка становится полной непрозрачности */ #next-level-btn.passed { opacity: 1; background-color: #2E7D32; /* Более насыщенный зелёный */ } /* При наведении на активную кнопку */ #next-level-btn.passed:hover { background-color: #1B5E20; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } /* Стили для модального окна */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); /* Опечатка исправлена: backdrop-filter */ } .modal-content { background-color: white; margin: 5% auto; padding: 25px; border-radius: 12px; width: 90%; max-width: 450px; position: relative; animation: fadeIn 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .close { color: #aaa; float: right; font-size: 30px; font-weight: bold; cursor: pointer; } .close:hover { color: black; } .contact-info { margin-top: 15px; } .contact-details { margin-top: 10px; } .contact-details p { margin: 10px 0; } .contact-details a { color: #007bff; text-decoration: none; } .contact-details a:hover { text-decoration: underline; } /* Дополнительные стили для адаптивности */ @media (max-width: 768px) { .message { font-size: 14px; /* Уменьшаем размер шрифта */ padding: 10px 12px; /* Компактные отступы */ margin: 8px 0; /* Меньше вертикального отступа */ } /* Дополнительно уменьшаем сетку для лучшей читаемости */ .grid { grid-template-columns: repeat(10, 22px); /* Ячейки чуть меньше */ grid-template-rows: repeat(10, 22px); gap: 0.8px; /* Чуть меньше зазор */ padding: 10px; /* Меньше padding */ } .grid-cell { width: 22px; height: 22px; } /* Уменьшаем кнопки */ button { padding: 10px 20px; font-size: 14px; } /* Уменьшаем заголовок */ h1 { font-size: 1.8rem; margin-bottom: 8px; } } /* Дополнительные стили для уровня и счётчика попыток */ #level-display { font-size: 1.2rem; font-weight: bold; color: #2c3e50; margin: 15px 0; padding: 10px; background-color: white; border-radius: 6px; display: inline-block; min-width: 120px; } /* Стили для счётчика попыток (если добавите в HTML) */ .attempts-counter { font-size: 0.9rem; color: #666; margin-top: 5px; } /* Улучшенные стили для ячеек при разных состояниях */ .grid-cell.filled:hover { background-color: #45a049; /* Темнее при наведении */ transform: scale(1.03); } .sample-shape:hover { box-shadow: 0 0 8px rgba(255, 235, 59, 0.7); } /* Плавные переходы для всех изменяемых свойств */ .grid-cell, .message, button, .modal-content { transition: all 0.3s ease; } /* Стили для состояния загрузки */ .loading { opacity: 0.6; pointer-events: none; } /* Стили для фокуса (доступность) */ .grid-cell:focus { outline: 2px solid #007bff; outline-offset: 2px; } button:focus { outline: 2px solid #0056b3; outline-offset: 2px; } /* Специальные стили для разных типов фигур (опционально) */ /* Можно использовать data-атрибуты для разных цветов фигур */ [data-shape-type="square"] .sample-shape { background-color: #ff9800; border-color: #f57c00; } [data-shape-type="triangle"] .sample-shape { background-color: #e91e63; border-color: #ad1457; } [data-shape-type="circle"] .sample-shape { background-color: #9c27b0; border-color: #7b1fa2; border-radius: 50%; } /* Анимация появления сетки */ @keyframes gridFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .grid { animation: gridFadeIn 0.5s ease-out; } /* Стили для кнопки «Скрыть/Показать подсказку» (если добавите) */ #hint-btn { background-color: #ffc107; color: #333; } #hint-btn:hover { background-color: #ffb300; } /* Адаптация для тёмного режима (опционально) */ @media (prefers-color-scheme: dark) { body { background-color: #1a1a1a; color: #e0e0e0; } .grid-cell { background-color: #2d2d2d; border-color: #555; } .filled { background-color: #2e7d32; border-color: #1b5e20; } .sample-shape { background-color: #b28f00; border-color: #8d6e00; } .extra-mistake { background-color: #401a1a !important; border-color: #803333 !important; } .missing-mistake { background-color: #333326 !important; border-color: #66664d !important; } .modal-content { background-color: #2d2d2d; } } /* Финальные исправления */ /* Исправление опечатки в backdrop-filter */ .modal { backdrop-filter: blur(5px); /* Было: backdrop-filter → backdrop-filter */ } /* Корректное написание свойства */ .modal { backdrop-filter: blur(5px); }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-dd8a728 */.elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item { display: flex; justify-content: center; align-items: center; } .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { margin: 0 auto; display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6736268 */#gallery-2.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-2.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-2.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-2.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-5a96fe4 */#gallery-3.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-3.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-3.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-3.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-bc64721 */#gallery-4.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-4.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-4.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-4.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-1ae15ed */#gallery-5.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-5.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-5.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-5.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-b6c27e0 */#gallery-6.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-6.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-6.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-6.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-416895a */#gallery-7.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-7.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-7.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-7.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-e3bbe66 */#gallery-8.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-8.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-8.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-8.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6fb7499 */#gallery-9.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-9.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-9.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-9.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-788e483 *//* Общие стили */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; color: #333; } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1 { color: #2c3e50; margin-bottom: 10px; } /* Стили для сетки 10×10 */ .grid-container { margin: 20px 0; } .grid-label { font-weight: bold; margin-bottom: 10px; color: #333; } .grid { display: grid; grid-template-columns: repeat(10, 25px); grid-template-rows: repeat(10, 25px); gap: 1px; background-color: transparent; /* Убрали серый фон */ padding: 15px; border-radius: 8px; border: none; /* Убрали серую рамку */ justify-content: center; } .grid-cell { width: 25px; height: 25px; background-color: white; border: 1px solid #ccc; cursor: pointer; transition: all 0.2s ease; } .grid-cell:hover { background-color: #e6f7ff; transform: scale(1.05); } .sample-cell { cursor: default; pointer-events: none; } .sample-shape { background-color: #ffeb3b; border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 235, 59, 0.5); } .filled { background-color: #4caf50; border-color: #388e3c; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3); } /* Подсветка ошибок — ключевые стили для JS */ .extra-mistake { background-color: #ffcccc !important; /* Красный для лишних ячеек */ border: 2px solid #ff0000 !important; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important; } .missing-mistake { background-color: #ffffcc !important; /* Жёлтый для недостающих ячеек */ border: 2px dashed #ffff00 !important; animation: pulse 1s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } /* Стили для сообщений */ .message { padding: 12px 15px; margin: 10px 0; border-radius: 6px; text-align: center; font-weight: bold; font-size: 16px; } .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .message.info { background-color: #d1ecf1; color: #0c5460; } /* Стили для кнопок */ button { padding: 12px 24px; margin: 8px 5px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 500; transition: background-color 0.2s; } #reset-btn { background-color: #6c757d; color: white; } #check-btn { background-color: #007bff; color: white; } #contact-btn { background-color: #28a745; color: white; } #next-level-btn { background-color: #28a745; color: white; } button:hover { opacity: 0.9; transform: translateY(-1px); } /* Стиль для кнопки «Следующий уровень» при успешном прохождении */ #next-level-btn { background-color: #4CAF50; /* Зелёный цвет */ color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; /* Явный курсор — кнопка кликабельна */ border-radius: 6px; transition: all 0.3s ease; opacity: 1; /* Изначально полупрозрачная (неактивная) */ } #next-level-btn:hover { background-color: #45a049; /* Темнее при наведении */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Активное состояние — кнопка становится полной непрозрачности */ #next-level-btn.passed { opacity: 1; background-color: #2E7D32; /* Более насыщенный зелёный */ } /* При наведении на активную кнопку */ #next-level-btn.passed:hover { background-color: #1B5E20; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } /* Стили для модального окна */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); /* Опечатка исправлена: backdrop-filter */ } .modal-content { background-color: white; margin: 5% auto; padding: 25px; border-radius: 12px; width: 90%; max-width: 450px; position: relative; animation: fadeIn 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .close { color: #aaa; float: right; font-size: 30px; font-weight: bold; cursor: pointer; } .close:hover { color: black; } .contact-info { margin-top: 15px; } .contact-details { margin-top: 10px; } .contact-details p { margin: 10px 0; } .contact-details a { color: #007bff; text-decoration: none; } .contact-details a:hover { text-decoration: underline; } /* Дополнительные стили для адаптивности */ @media (max-width: 768px) { .message { font-size: 14px; /* Уменьшаем размер шрифта */ padding: 10px 12px; /* Компактные отступы */ margin: 8px 0; /* Меньше вертикального отступа */ } /* Дополнительно уменьшаем сетку для лучшей читаемости */ .grid { grid-template-columns: repeat(10, 22px); /* Ячейки чуть меньше */ grid-template-rows: repeat(10, 22px); gap: 0.8px; /* Чуть меньше зазор */ padding: 10px; /* Меньше padding */ } .grid-cell { width: 22px; height: 22px; } /* Уменьшаем кнопки */ button { padding: 10px 20px; font-size: 14px; } /* Уменьшаем заголовок */ h1 { font-size: 1.8rem; margin-bottom: 8px; } } /* Дополнительные стили для уровня и счётчика попыток */ #level-display { font-size: 1.2rem; font-weight: bold; color: #2c3e50; margin: 15px 0; padding: 10px; background-color: white; border-radius: 6px; display: inline-block; min-width: 120px; } /* Стили для счётчика попыток (если добавите в HTML) */ .attempts-counter { font-size: 0.9rem; color: #666; margin-top: 5px; } /* Улучшенные стили для ячеек при разных состояниях */ .grid-cell.filled:hover { background-color: #45a049; /* Темнее при наведении */ transform: scale(1.03); } .sample-shape:hover { box-shadow: 0 0 8px rgba(255, 235, 59, 0.7); } /* Плавные переходы для всех изменяемых свойств */ .grid-cell, .message, button, .modal-content { transition: all 0.3s ease; } /* Стили для состояния загрузки */ .loading { opacity: 0.6; pointer-events: none; } /* Стили для фокуса (доступность) */ .grid-cell:focus { outline: 2px solid #007bff; outline-offset: 2px; } button:focus { outline: 2px solid #0056b3; outline-offset: 2px; } /* Специальные стили для разных типов фигур (опционально) */ /* Можно использовать data-атрибуты для разных цветов фигур */ [data-shape-type="square"] .sample-shape { background-color: #ff9800; border-color: #f57c00; } [data-shape-type="triangle"] .sample-shape { background-color: #e91e63; border-color: #ad1457; } [data-shape-type="circle"] .sample-shape { background-color: #9c27b0; border-color: #7b1fa2; border-radius: 50%; } /* Анимация появления сетки */ @keyframes gridFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .grid { animation: gridFadeIn 0.5s ease-out; } /* Стили для кнопки «Скрыть/Показать подсказку» (если добавите) */ #hint-btn { background-color: #ffc107; color: #333; } #hint-btn:hover { background-color: #ffb300; } /* Адаптация для тёмного режима (опционально) */ @media (prefers-color-scheme: dark) { body { background-color: #1a1a1a; color: #e0e0e0; } .grid-cell { background-color: #2d2d2d; border-color: #555; } .filled { background-color: #2e7d32; border-color: #1b5e20; } .sample-shape { background-color: #b28f00; border-color: #8d6e00; } .extra-mistake { background-color: #401a1a !important; border-color: #803333 !important; } .missing-mistake { background-color: #333326 !important; border-color: #66664d !important; } .modal-content { background-color: #2d2d2d; } } /* Финальные исправления */ /* Исправление опечатки в backdrop-filter */ .modal { backdrop-filter: blur(5px); /* Было: backdrop-filter → backdrop-filter */ } /* Корректное написание свойства */ .modal { backdrop-filter: blur(5px); }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-dd8a728 */.elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item { display: flex; justify-content: center; align-items: center; } .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { margin: 0 auto; display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6736268 */#gallery-2.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-2.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-2.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-2.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-5a96fe4 */#gallery-3.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-3.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-3.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-3.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-bc64721 */#gallery-4.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-4.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-4.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-4.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-1ae15ed */#gallery-5.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-5.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-5.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-5.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-b6c27e0 */#gallery-6.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-6.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-6.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-6.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-416895a */#gallery-7.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-7.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-7.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-7.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-e3bbe66 */#gallery-8.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-8.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-8.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-8.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6fb7499 */#gallery-9.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-9.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-9.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-9.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-788e483 *//* Общие стили */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; color: #333; } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1 { color: #2c3e50; margin-bottom: 10px; } /* Стили для сетки 10×10 */ .grid-container { margin: 20px 0; } .grid-label { font-weight: bold; margin-bottom: 10px; color: #333; } .grid { display: grid; grid-template-columns: repeat(10, 25px); grid-template-rows: repeat(10, 25px); gap: 1px; background-color: transparent; /* Убрали серый фон */ padding: 15px; border-radius: 8px; border: none; /* Убрали серую рамку */ justify-content: center; } .grid-cell { width: 25px; height: 25px; background-color: white; border: 1px solid #ccc; cursor: pointer; transition: all 0.2s ease; } .grid-cell:hover { background-color: #e6f7ff; transform: scale(1.05); } .sample-cell { cursor: default; pointer-events: none; } .sample-shape { background-color: #ffeb3b; border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 235, 59, 0.5); } .filled { background-color: #4caf50; border-color: #388e3c; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3); } /* Подсветка ошибок — ключевые стили для JS */ .extra-mistake { background-color: #ffcccc !important; /* Красный для лишних ячеек */ border: 2px solid #ff0000 !important; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important; } .missing-mistake { background-color: #ffffcc !important; /* Жёлтый для недостающих ячеек */ border: 2px dashed #ffff00 !important; animation: pulse 1s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } /* Стили для сообщений */ .message { padding: 12px 15px; margin: 10px 0; border-radius: 6px; text-align: center; font-weight: bold; font-size: 16px; } .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .message.info { background-color: #d1ecf1; color: #0c5460; } /* Стили для кнопок */ button { padding: 12px 24px; margin: 8px 5px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 500; transition: background-color 0.2s; } #reset-btn { background-color: #6c757d; color: white; } #check-btn { background-color: #007bff; color: white; } #contact-btn { background-color: #28a745; color: white; } #next-level-btn { background-color: #28a745; color: white; } button:hover { opacity: 0.9; transform: translateY(-1px); } /* Стиль для кнопки «Следующий уровень» при успешном прохождении */ #next-level-btn { background-color: #4CAF50; /* Зелёный цвет */ color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; /* Явный курсор — кнопка кликабельна */ border-radius: 6px; transition: all 0.3s ease; opacity: 1; /* Изначально полупрозрачная (неактивная) */ } #next-level-btn:hover { background-color: #45a049; /* Темнее при наведении */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Активное состояние — кнопка становится полной непрозрачности */ #next-level-btn.passed { opacity: 1; background-color: #2E7D32; /* Более насыщенный зелёный */ } /* При наведении на активную кнопку */ #next-level-btn.passed:hover { background-color: #1B5E20; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } /* Стили для модального окна */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); /* Опечатка исправлена: backdrop-filter */ } .modal-content { background-color: white; margin: 5% auto; padding: 25px; border-radius: 12px; width: 90%; max-width: 450px; position: relative; animation: fadeIn 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .close { color: #aaa; float: right; font-size: 30px; font-weight: bold; cursor: pointer; } .close:hover { color: black; } .contact-info { margin-top: 15px; } .contact-details { margin-top: 10px; } .contact-details p { margin: 10px 0; } .contact-details a { color: #007bff; text-decoration: none; } .contact-details a:hover { text-decoration: underline; } /* Дополнительные стили для адаптивности */ @media (max-width: 768px) { .message { font-size: 14px; /* Уменьшаем размер шрифта */ padding: 10px 12px; /* Компактные отступы */ margin: 8px 0; /* Меньше вертикального отступа */ } /* Дополнительно уменьшаем сетку для лучшей читаемости */ .grid { grid-template-columns: repeat(10, 22px); /* Ячейки чуть меньше */ grid-template-rows: repeat(10, 22px); gap: 0.8px; /* Чуть меньше зазор */ padding: 10px; /* Меньше padding */ } .grid-cell { width: 22px; height: 22px; } /* Уменьшаем кнопки */ button { padding: 10px 20px; font-size: 14px; } /* Уменьшаем заголовок */ h1 { font-size: 1.8rem; margin-bottom: 8px; } } /* Дополнительные стили для уровня и счётчика попыток */ #level-display { font-size: 1.2rem; font-weight: bold; color: #2c3e50; margin: 15px 0; padding: 10px; background-color: white; border-radius: 6px; display: inline-block; min-width: 120px; } /* Стили для счётчика попыток (если добавите в HTML) */ .attempts-counter { font-size: 0.9rem; color: #666; margin-top: 5px; } /* Улучшенные стили для ячеек при разных состояниях */ .grid-cell.filled:hover { background-color: #45a049; /* Темнее при наведении */ transform: scale(1.03); } .sample-shape:hover { box-shadow: 0 0 8px rgba(255, 235, 59, 0.7); } /* Плавные переходы для всех изменяемых свойств */ .grid-cell, .message, button, .modal-content { transition: all 0.3s ease; } /* Стили для состояния загрузки */ .loading { opacity: 0.6; pointer-events: none; } /* Стили для фокуса (доступность) */ .grid-cell:focus { outline: 2px solid #007bff; outline-offset: 2px; } button:focus { outline: 2px solid #0056b3; outline-offset: 2px; } /* Специальные стили для разных типов фигур (опционально) */ /* Можно использовать data-атрибуты для разных цветов фигур */ [data-shape-type="square"] .sample-shape { background-color: #ff9800; border-color: #f57c00; } [data-shape-type="triangle"] .sample-shape { background-color: #e91e63; border-color: #ad1457; } [data-shape-type="circle"] .sample-shape { background-color: #9c27b0; border-color: #7b1fa2; border-radius: 50%; } /* Анимация появления сетки */ @keyframes gridFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .grid { animation: gridFadeIn 0.5s ease-out; } /* Стили для кнопки «Скрыть/Показать подсказку» (если добавите) */ #hint-btn { background-color: #ffc107; color: #333; } #hint-btn:hover { background-color: #ffb300; } /* Адаптация для тёмного режима (опционально) */ @media (prefers-color-scheme: dark) { body { background-color: #1a1a1a; color: #e0e0e0; } .grid-cell { background-color: #2d2d2d; border-color: #555; } .filled { background-color: #2e7d32; border-color: #1b5e20; } .sample-shape { background-color: #b28f00; border-color: #8d6e00; } .extra-mistake { background-color: #401a1a !important; border-color: #803333 !important; } .missing-mistake { background-color: #333326 !important; border-color: #66664d !important; } .modal-content { background-color: #2d2d2d; } } /* Финальные исправления */ /* Исправление опечатки в backdrop-filter */ .modal { backdrop-filter: blur(5px); /* Было: backdrop-filter → backdrop-filter */ } /* Корректное написание свойства */ .modal { backdrop-filter: blur(5px); }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-dd8a728 */.elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item { display: flex; justify-content: center; align-items: center; } .elementor-817 .elementor-element.elementor-element-dd8a728 .gallery-item img { margin: 0 auto; display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6736268 */#gallery-2.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-2.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-2.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-2.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-5a96fe4 */#gallery-3.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-3.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-3.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-3.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-bc64721 */#gallery-4.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-4.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-4.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-4.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-1ae15ed */#gallery-5.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-5.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-5.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-5.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-b6c27e0 */#gallery-6.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-6.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-6.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-6.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-416895a */#gallery-7.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-7.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-7.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-7.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-e3bbe66 */#gallery-8.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-8.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-8.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-8.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for image-gallery, class: .elementor-element-6fb7499 */#gallery-9.gallery.galleryid-817 .gallery-item img { border-top-width: 0px; border-width: 9px; border-color: #707070; margin: 0px; background-image: url("/wp-content/uploads/2026/04/picture_frame_school.jpg"); background-color: #ffffff; padding: 0px; border-style: double; /* Начальная контрастность 80 %, насыщенность 70 % */ filter: contrast(80%) saturate(70%); /* Плавная анимация для всех изменяемых свойств */ transition: all 0.3s ease; /* Сохраняем исходное состояние без вращения */ transform: rotate(0deg); /* Точка вращения — центр верхней границы элемента (эффект подвешенности) */ transform-origin: center top; } /* Эффект ховера: лёгкое покачивание, повышение контрастности и насыщенности */ #gallery-9.gallery.galleryid-817 .gallery-item img:hover { border-color: #778794; transform: scale(1.05) rotate(0deg); /* увеличение на 5 % без начального вращения */ /* Контрастность 110 %, насыщенность 105 % */ filter: contrast(110%) saturate(105%); animation: gentle-swing 1.2s ease-in-out infinite; /* запускаем плавную анимацию покачивания */ } /* Анимация лёгкого покачивания (амплитуда ±1°) */ @keyframes gentle-swing { 0% { transform: scale(1.05) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1.05) rotate(-1deg); } } /* Выравнивание по центру для мобильной версии */ @media (max-width: 768px) { /* Применяем стили только на экранах шириной до 768 px */ #gallery-9.gallery.galleryid-817 .gallery-item { /* Превращаем контейнер в flex‑блок для удобного выравнивания */ display: flex; /* Выравниваем содержимое по горизонтали (по центру) */ justify-content: center; /* Выравниваем по вертикали (по центру) */ align-items: center; } #gallery-9.gallery.galleryid-817 .gallery-item img { /* Центрируем изображение по горизонтали через margin */ margin: 0 auto; /* Гарантируем, что изображение ведёт себя как блочный элемент */ display: block; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-788e483 *//* Общие стили */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; color: #333; } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1 { color: #2c3e50; margin-bottom: 10px; } /* Стили для сетки 10×10 */ .grid-container { margin: 20px 0; } .grid-label { font-weight: bold; margin-bottom: 10px; color: #333; } .grid { display: grid; grid-template-columns: repeat(10, 25px); grid-template-rows: repeat(10, 25px); gap: 1px; background-color: transparent; /* Убрали серый фон */ padding: 15px; border-radius: 8px; border: none; /* Убрали серую рамку */ justify-content: center; } .grid-cell { width: 25px; height: 25px; background-color: white; border: 1px solid #ccc; cursor: pointer; transition: all 0.2s ease; } .grid-cell:hover { background-color: #e6f7ff; transform: scale(1.05); } .sample-cell { cursor: default; pointer-events: none; } .sample-shape { background-color: #ffeb3b; border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 235, 59, 0.5); } .filled { background-color: #4caf50; border-color: #388e3c; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3); } /* Подсветка ошибок — ключевые стили для JS */ .extra-mistake { background-color: #ffcccc !important; /* Красный для лишних ячеек */ border: 2px solid #ff0000 !important; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important; } .missing-mistake { background-color: #ffffcc !important; /* Жёлтый для недостающих ячеек */ border: 2px dashed #ffff00 !important; animation: pulse 1s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } /* Стили для сообщений */ .message { padding: 12px 15px; margin: 10px 0; border-radius: 6px; text-align: center; font-weight: bold; font-size: 16px; } .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .message.info { background-color: #d1ecf1; color: #0c5460; } /* Стили для кнопок */ button { padding: 12px 24px; margin: 8px 5px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 500; transition: background-color 0.2s; } #reset-btn { background-color: #6c757d; color: white; } #check-btn { background-color: #007bff; color: white; } #contact-btn { background-color: #28a745; color: white; } #next-level-btn { background-color: #28a745; color: white; } button:hover { opacity: 0.9; transform: translateY(-1px); } /* Стиль для кнопки «Следующий уровень» при успешном прохождении */ #next-level-btn { background-color: #4CAF50; /* Зелёный цвет */ color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; /* Явный курсор — кнопка кликабельна */ border-radius: 6px; transition: all 0.3s ease; opacity: 1; /* Изначально полупрозрачная (неактивная) */ } #next-level-btn:hover { background-color: #45a049; /* Темнее при наведении */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Активное состояние — кнопка становится полной непрозрачности */ #next-level-btn.passed { opacity: 1; background-color: #2E7D32; /* Более насыщенный зелёный */ } /* При наведении на активную кнопку */ #next-level-btn.passed:hover { background-color: #1B5E20; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } /* Стили для модального окна */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); /* Опечатка исправлена: backdrop-filter */ } .modal-content { background-color: white; margin: 5% auto; padding: 25px; border-radius: 12px; width: 90%; max-width: 450px; position: relative; animation: fadeIn 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .close { color: #aaa; float: right; font-size: 30px; font-weight: bold; cursor: pointer; } .close:hover { color: black; } .contact-info { margin-top: 15px; } .contact-details { margin-top: 10px; } .contact-details p { margin: 10px 0; } .contact-details a { color: #007bff; text-decoration: none; } .contact-details a:hover { text-decoration: underline; } /* Дополнительные стили для адаптивности */ @media (max-width: 768px) { .message { font-size: 14px; /* Уменьшаем размер шрифта */ padding: 10px 12px; /* Компактные отступы */ margin: 8px 0; /* Меньше вертикального отступа */ } /* Дополнительно уменьшаем сетку для лучшей читаемости */ .grid { grid-template-columns: repeat(10, 22px); /* Ячейки чуть меньше */ grid-template-rows: repeat(10, 22px); gap: 0.8px; /* Чуть меньше зазор */ padding: 10px; /* Меньше padding */ } .grid-cell { width: 22px; height: 22px; } /* Уменьшаем кнопки */ button { padding: 10px 20px; font-size: 14px; } /* Уменьшаем заголовок */ h1 { font-size: 1.8rem; margin-bottom: 8px; } } /* Дополнительные стили для уровня и счётчика попыток */ #level-display { font-size: 1.2rem; font-weight: bold; color: #2c3e50; margin: 15px 0; padding: 10px; background-color: white; border-radius: 6px; display: inline-block; min-width: 120px; } /* Стили для счётчика попыток (если добавите в HTML) */ .attempts-counter { font-size: 0.9rem; color: #666; margin-top: 5px; } /* Улучшенные стили для ячеек при разных состояниях */ .grid-cell.filled:hover { background-color: #45a049; /* Темнее при наведении */ transform: scale(1.03); } .sample-shape:hover { box-shadow: 0 0 8px rgba(255, 235, 59, 0.7); } /* Плавные переходы для всех изменяемых свойств */ .grid-cell, .message, button, .modal-content { transition: all 0.3s ease; } /* Стили для состояния загрузки */ .loading { opacity: 0.6; pointer-events: none; } /* Стили для фокуса (доступность) */ .grid-cell:focus { outline: 2px solid #007bff; outline-offset: 2px; } button:focus { outline: 2px solid #0056b3; outline-offset: 2px; } /* Специальные стили для разных типов фигур (опционально) */ /* Можно использовать data-атрибуты для разных цветов фигур */ [data-shape-type="square"] .sample-shape { background-color: #ff9800; border-color: #f57c00; } [data-shape-type="triangle"] .sample-shape { background-color: #e91e63; border-color: #ad1457; } [data-shape-type="circle"] .sample-shape { background-color: #9c27b0; border-color: #7b1fa2; border-radius: 50%; } /* Анимация появления сетки */ @keyframes gridFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .grid { animation: gridFadeIn 0.5s ease-out; } /* Стили для кнопки «Скрыть/Показать подсказку» (если добавите) */ #hint-btn { background-color: #ffc107; color: #333; } #hint-btn:hover { background-color: #ffb300; } /* Адаптация для тёмного режима (опционально) */ @media (prefers-color-scheme: dark) { body { background-color: #1a1a1a; color: #e0e0e0; } .grid-cell { background-color: #2d2d2d; border-color: #555; } .filled { background-color: #2e7d32; border-color: #1b5e20; } .sample-shape { background-color: #b28f00; border-color: #8d6e00; } .extra-mistake { background-color: #401a1a !important; border-color: #803333 !important; } .missing-mistake { background-color: #333326 !important; border-color: #66664d !important; } .modal-content { background-color: #2d2d2d; } } /* Финальные исправления */ /* Исправление опечатки в backdrop-filter */ .modal { backdrop-filter: blur(5px); /* Было: backdrop-filter → backdrop-filter */ } /* Корректное написание свойства */ .modal { backdrop-filter: blur(5px); }/* End custom CSS */ /* Start custom CSS for nested-accordion, class: .elementor-element-b533831 *//* Базовый стиль заголовка */ .elementor-817 .elementor-element.elementor-element-b533831 .e-n-accordion-item-title { background-color: #005597; color: white; padding: 15px; transition: color 0.3s ease; } /* Ховер: при наведении курсора цвет текста становится жёлтым */ .elementor-817 .elementor-element.elementor-element-b533831 .e-n-accordion-item-title:hover { color: yellow; } /* Активное состояние: когда раздел открыт (атрибут [open]) */ .elementor-817 .elementor-element.elementor-element-b533831 .e-n-accordion-item[open] > .e-n-accordion-item-title { color: yellow !important; }/* End custom CSS */