/********************************************************** webfonts **********************************************************/ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap'); @font-face { font-family: 'fontello'; src: url('./fonts/fontello.eot?51426597'); src: url('./fonts/fontello.eot?51426597#iefix') format('embedded-opentype'), url('./fonts/fontello.woff2?51426597') format('woff2'), url('./fonts/fontello.woff?51426597') format('woff'), url('./fonts/fontello.ttf?51426597') format('truetype'), url('./fonts/fontello.svg?51426597#fontello') format('svg'); font-weight: normal; font-style: normal } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'fontello'; src: url('./fonts/fontello.svg?51426597#fontello') format('svg'); } } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-align: center; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } #up { display:none; animation: 3s ease 0s normal none infinite running bounce; bottom: 10px; cursor: pointer; opacity: 0.6; position: fixed; right: 10px; z-index: 60; } #up i { cursor: pointer; font-size: 48px; color: #3c4042; } a:active, a:focus {outline: 0;} input:active, input:focus {outline: 0;} input { border-radius:0;} button::-moz-focus-inner {border: 0;} textarea {resize:none; border-radius:0;} img { max-width:100%; } .important{display:block!important;} .row-centered { text-align:center;} .col-centered { display:inline-block; float:none; text-align:left; margin-right:-4px; } #test {position:fixed;top:0;left:0;width:100px;height:30px;background:#000;color:#fff;z-index:9999999;} #loader-icon {display: none;height: 100%;position: fixed;text-align: center;top: 50%;width: 100%;z-index: 9;} #mask {background: #000000 none repeat scroll 0 0;display: none;height: 100%;left: 0;opacity: 0.3;position: fixed;top: 0;width: 100%;z-index: 100;} .center { text-align:center; } #sidebarleft { position:fixed; width:90px; height:100%; background: #3a5065; z-index:99999;} #sidebartop { position:fixed; right:0; left:90px;height:90px; background: #3a5065; z-index:200; } #content { margin-left:90px; width:auto; position:relative; background:#fff; overflow:auto; } @media(max-width:767px) { #content { margin-left:0;} #content .wrapper { border-top:1px solid #cccccc; padding-top:2px } #sidebartop { left:0px; background:#fff; box-shadow:0px 2px 2px #3a5065;} #sidebartop .logo { position:absolute;left:5px; top:15px; background:#fff; height:60px; width:60px; display:inline-block; } #sidebartop .logo img{ width:60px;margin-top:2px; } } /********************************************************** bal menu **********************************************************/ #sidebarleft .logo { display:block; text-align:center; color:#2d99bc; background:#fff; height:90px;} #sidebarleft .logo img {height:75px;top:8px;position:relative;} #sidebarleft .mainmenu {text-align:center; font-size:32px; color:#fff; margin:auto; display:block;border-bottom:1px solid #2c3c4b;padding:15px 3px;cursor:default;} #sidebarleft .home {text-align:center; font-size:32px; color:#fff; margin:auto; display:block;border-bottom:1px solid #2c3c4b;padding:20px 3px;cursor:pointer;} #sidebarleft .mainmenu.active {background:#44607c;} #sidebarleft .mainmenu.actived {background:#44607c;} #sidebarleft .home.active {background:#44607c;} #sidebarleft .home.actived {background:#44607c;} #sidebarleft .title {text-align:center; display:block; color:#fff; font-size:11px; margin-top:3px;} @media(max-height:1000px) { #sidebarleft .mainmenu { padding:10px 3px; } #sidebarleft .home { padding:10px 3px; } } @media(max-height:880px) { #sidebarleft .mainmenu { padding:5px 3px; } #sidebarleft .home { padding:5px 3px; } #sidebarleft .mainmenu i { font-size:24px;} #sidebarleft .home i { font-size:24px;} } @media(max-height:800px) { #sidebarleft .mainmenu { padding:3px 3px; } #sidebarleft .home { padding:3px 3px; } #sidebarleft .mainmenu { font-size:unset;} #sidebarleft .mainmenu i { font-size:24px;} #sidebarleft .home i { font-size:24px;} } @media(max-height:680px) { #sidebarleft .mainmenu { padding:3px 3px; } #sidebarleft .home { padding:3px 3px; } #sidebarleft .mainmenu { font-size:unset;} #sidebarleft .mainmenu i { font-size:20px;} #sidebarleft .home i { font-size:20px;} } @media(max-height:620px) { #sidebarleft .mainmenu { padding:5px 3px; } #sidebarleft .home { padding:5px 3px; } #sidebarleft .mainmenu { font-size:unset;} #sidebarleft .mainmenu i { display:none;} #sidebarleft .home i { display:none;} } /********************************************************** beuszo menu **********************************************************/ .page-sidebar { position:fixed; top:90px; bottom:0; left:-220px; z-index:10; height:100%; background:#44607c; border-top:2px solid #000; border-right:15px solid #273d52; height:100%; width:310px; -webkit-transition: left 0.5s; transition: left 0.5s; overflow:hidden; } .page-sidebar.active {left:90px;} .page-sidebar .outer { position: relative; width:320px; height:99%; overflow: hidden;} .page-sidebar .inner { width:100%; overflow-y: scroll; height: -moz-calc(100% - (100px)); height: -webkit-calc(100% - (100px)); height: calc(100% - (100px)); } .page-sidebar .inner .top {padding:20px 20px 15px 15px;} .page-sidebar .inner .top .gomb {margin-left:20px;} .page-sidebar .inner .bottom {padding:0px 20px 15px 15px;} .page-sidebar .inner .menu { display:none; } .page-sidebar .inner .menu .back {border-bottom:1px solid #737678; padding-bottom:20px;margin-bottom:10px;} .page-sidebar .inner .menu a.go {border-bottom:1px solid #737678; padding-bottom:10px;margin-bottom:10px; color:#ffffff; font-size:14px;display:table;} .page-sidebar .inner .menu a.highlight {color:#bff2a0; } .page-sidebar .inner .menu a.go:hover * {color:#62d2f6;} .page-sidebar .inner .menu a.go span { width:100px;width:220px;margin-left:80px;display:table-cell;vertical-align:middle;} .page-sidebar .inner .menu a.go h2 { width:100px;width:220px;margin-left:80px;display:table-cell;vertical-align:middle;font-size:14px;} .page-sidebar .inner .menu a.go i { font-size:22px; padding:3px 10px; background:#3a5065; color:#ebebeb; text-align:center; margin-right:15px; } .page-sidebar .inner .menu a.main { color:#fff; font-size:24px;display:block;font-weight:bold;margin-bottom:30px; } .page-sidebar .inner .menu a.main i { font-size:22px; background:#fff; color:#ebebeb; text-align:center; margin-right:15px;width:30px; height:30px; display:inline-block; } .page-sidebar .inner .menu .active i{background:#2d99bc;} .page-sidebar .inner .menu hr {margin:0 auto 20px; border:none; border-top:2px double #707375;width:90%;} .page-sidebar .inner .menu .gomb { margin:10px 0; display:block;} .page-sidebar .inner .menu .box {margin-bottom:10px;} .page-sidebar .inner .menu .box h1 {color:#fff; font-size:24px; font-weight:bold;margin-bottom:10px;} .page-sidebar .inner .menu .box .title1 {color:#fff; font-size:22px;margin-bottom:20px; } .page-sidebar .inner .menu .box .title2 {color:#fff; font-size:14px;margin-bottom:20px; } .page-sidebar .inner .menu .box .info { background:#3a5065; height:30px; line-height:30px; padding:0 10px; margin:5px auto;} .page-sidebar .inner .menu .box .info label {color:#fff; font-size:14px; width:100px;display:inline-block;} .page-sidebar .inner .menu .box .info span {color:#fff; font-size:14px;} .page-sidebar .inner .menu .box .info .online { color:#39b54a} .page-sidebar .inner .menu .box a { color:#62d2f6; } .page-sidebar .inner .menu .down { animation: 3s ease 0s normal none infinite running bounce; background: rgba(0, 0, 0, 0) url("/pics/scroll-cue-arrow.png") repeat scroll 0 0; top: 10px; cursor: pointer; height: 19px; width: 39px; margin: 0 auto; position: absolute; right: 30px; z-index: 10000; } @-webkit-keyframes bounce{20%,50%,80%,from,to{-webkit-animation-timing-function:'cubic-bezier(0.215, 0.610, 0.355, 1.000)';animation-timing-function:'cubic-bezier(0.215, 0.610, 0.355, 1.000)';-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}40%{-webkit-animation-timing-function:'cubic-bezier(0.755, 0.050, 0.855, 0.060)';animation-timing-function:'cubic-bezier(0.755, 0.050, 0.855, 0.060)';-webkit-transform:translate(0,-7px);-ms-transform:translate(0,-7px);-o-transform:translate(0,-7px);transform:translate(0,-7px)}60%{-webkit-animation-timing-function:'cubic-bezier(0.755, 0.050, 0.855, 0.060)';animation-timing-function:'cubic-bezier(0.755, 0.050, 0.855, 0.060)';-webkit-transform:translate(0,-3px);-ms-transform:translate(0,-3px);-o-transform:translate(0,-3px);transform:translate(0,-3px)}} @keyframes bounce{20%,50%,80%,from,to{-webkit-animation-timing-function:'cubic-bezier(0.215, 0.610, 0.355, 1.000)';animation-timing-function:'cubic-bezier(0.215, 0.610, 0.355, 1.000)';-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}40%{-webkit-animation-timing-function:'cubic-bezier(0.755, 0.050, 0.855, 0.060)';animation-timing-function:'cubic-bezier(0.755, 0.050, 0.855, 0.060)';-webkit-transform:translate(0,-7px);-ms-transform:translate(0,-7px);-o-transform:translate(0,-7px);transform:translate(0,-7px)}60%{-webkit-animation-timing-function:'cubic-bezier(0.755, 0.050, 0.855, 0.060)';animation-timing-function:'cubic-bezier(0.755, 0.050, 0.855, 0.060)';-webkit-transform:translate(0,-3px);-ms-transform:translate(0,-3px);-o-transform:translate(0,-3px);transform:translate(0,-3px)}} @keyframes wobble{0%,100%{transform:translate(0,0) rotate(0)}15%{transform:translate(-25px,0) rotate(-5deg)}30%{transform:translate(20px,0) rotate(3deg)}45%{transform:translate(-15px,0) rotate(-3deg)}60%{transform:translate(10px,0) rotate(2deg)}75%{transform:translate(-5px,0) rotate(-1deg)}}@-moz-keyframes wobble{0%,100%{-moz-transform:translate(0,0) rotate(0)}15%{-moz-transform:translate(-25px,0) rotate(-5deg)}30%{-moz-transform:translate(20px,0) rotate(3deg)}45%{-moz-transform:translate(-15px,0) rotate(-3deg)}60%{-moz-transform:translate(10px,0) rotate(2deg)}75%{-moz-transform:translate(-5px,0) rotate(-1deg)}}@-webkit-keyframes wobble{0%,100%{-webkit-transform:translate(0,0) rotate(0)}15%{-webkit-transform:translate(-25px,0) rotate(-5deg)}30%{-webkit-transform:translate(20px,0) rotate(3deg)}45%{-webkit-transform:translate(-15px,0) rotate(-3deg)}60%{-webkit-transform:translate(10px,0) rotate(2deg)}75%{-webkit-transform:translate(-5px,0) rotate(-1deg)}}@-o-keyframes wobble{0%,100%{-o-transform:translate(0,0) rotate(0)}15%{-o-transform:translate(-25px,0) rotate(-5deg)}30%{-o-transform:translate(20px,0) rotate(3deg)}45%{-o-transform:translate(-15px,0) rotate(-3deg)}60%{-o-transform:translate(10px,0) rotate(2deg)}75%{-o-transform:translate(-5px,0) rotate(-1deg)}}@-ms-keyframes wobble{0%,100%{-ms-transform:translate(0,0) rotate(0)}15%{-ms-transform:translate(-25px,0) rotate(-5deg)}30%{-ms-transform:translate(20px,0) rotate(3deg)}45%{-ms-transform:translate(-15px,0) rotate(-3deg)}60%{-ms-transform:translate(10px,0) rotate(2deg)}75%{-ms-transform:translate(-5px,0) rotate(-1deg)}} @keyframes shake{0%,100%{transform:translate(0,0)}10%,30%,50%,70%,90%{transform:translate(-10px,0)}20%,40%,60%,80%{transform:translate(10px,0)}}@-moz-keyframes shake{0%,100%{-moz-transform:translate(0,0)}10%,30%,50%,70%,90%{-moz-transform:translate(-10px,0)}20%,40%,60%,80%{-moz-transform:translate(10px,0)}}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate(0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate(-10px,0)}20%,40%,60%,80%{-webkit-transform:translate(10px,0)}}@-o-keyframes shake{0%,100%{-o-transform:translate(0,0)}10%,30%,50%,70%,90%{-o-transform:translate(-10px,0)}20%,40%,60%,80%{-o-transform:translate(10px,0)}}@-ms-keyframes shake{0%,100%{-ms-transform:translate(0,0)}10%,30%,50%,70%,90%{-ms-transform:translate(-10px,0)}20%,40%,60%,80%{-ms-transform:translate(10px,0)}} @keyframes tada{0%{transform:rotate(0) scaleX(1) scaleY(1)}10%,20%{transform:rotate(-3deg) scaleX(.8) scaleY(.8)}30%,50%,70%,90%{transform:rotate(3deg) scaleX(1.2) scaleY(1.2)}40%,60%,80%{transform:rotate(-3deg) scaleX(1.2) scaleY(1.2)}100%{transform:rotate(0) scaleX(1.2) scaleY(1.2)}}@-moz-keyframes tada{0%{-moz-transform:rotate(0) scaleX(1) scaleY(1)}10%,20%{-moz-transform:rotate(-3deg) scaleX(.8) scaleY(.8)}30%,50%,70%,90%{-moz-transform:rotate(3deg) scaleX(1.2) scaleY(1.2)}40%,60%,80%{-moz-transform:rotate(-3deg) scaleX(1.2) scaleY(1.2)}100%{-moz-transform:rotate(0) scaleX(1.2) scaleY(1.2)}}@-webkit-keyframes tada{0%{-webkit-transform:rotate(0) scaleX(1) scaleY(1)}10%,20%{-webkit-transform:rotate(-3deg) scaleX(.8) scaleY(.8)}30%,50%,70%,90%{-webkit-transform:rotate(3deg) scaleX(1.2) scaleY(1.2)}40%,60%,80%{-webkit-transform:rotate(-3deg) scaleX(1.2) scaleY(1.2)}100%{-webkit-transform:rotate(0) scaleX(1.2) scaleY(1.2)}}@-o-keyframes tada{0%{-o-transform:rotate(0) scaleX(1) scaleY(1)}10%,20%{-o-transform:rotate(-3deg) scaleX(.8) scaleY(.8)}30%,50%,70%,90%{-o-transform:rotate(3deg) scaleX(1.2) scaleY(1.2)}40%,60%,80%{-o-transform:rotate(-3deg) scaleX(1.2) scaleY(1.2)}100%{-o-transform:rotate(0) scaleX(1.2) scaleY(1.2)}}@-ms-keyframes tada{0%{-ms-transform:rotate(0) scaleX(1) scaleY(1)}10%,20%{-ms-transform:rotate(-3deg) scaleX(.8) scaleY(.8)}30%,50%,70%,90%{-ms-transform:rotate(3deg) scaleX(1.2) scaleY(1.2)}40%,60%,80%{-ms-transform:rotate(-3deg) scaleX(1.2) scaleY(1.2)}100%{-ms-transform:rotate(0) scaleX(1.2) scaleY(1.2)}} /********************************************************** top menu **********************************************************/ #sidebartop .search-box { position:relative; display:inline-block; vertical-align:middle; height:90px;line-height:90px;} #sidebartop .search-box input[type="text"] { margin:0;font-size:13px; width:100%;;position:relative; text-align:left; top:24px; background-color: #88a4c0; border-color: #1b2937; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.15); color: #ffffff; transition: none 0s ease 0s ; padding:0 14px; } #sidebartop .search-box input[type="text"]:focus { background:#fff; border: 0 none; box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); color:#333333; text-shadow:0 1px 0 #ffffff; padding: 5px 15px; outline: 0 none; } #sidebartop .search-box ul { border:1px solid #6d92bb;display:block; width:100%; z-index:999999; text-align:left; position:absolute; top:30px; left:-1px; list-style:none; background:#efefef; border-left:1px solid #c2c2c2;border-right:1px solid #c2c2c2;border-bottom:1px solid #c2c2c2;} .results {position:absolute;width:300px;background-color:#ffffff;z-index:100000;display:none;right:0px; top:40px;} .results ul{max-height:200px;overflow:auto;list-style-type:none;margin:0;padding:0;width:100%;} .results ul li{overflow:hidden;display:block;text-align:left;border-bottom:1px solid #c9d8e8;cursor:pointer; height:30px;line-height:30px;} .results ul li a{display:block;color:#422d0a;padding:2px 5px; font-size:11px;} .results ul li a:hover{color:#ffffff;background-color:#6d92bb;text-decoration:none;} .menu-mobile { display:none; vertical-align:middle; background:#fff;padding:10px 5px 5px 5px;box-shadow:5px 5px 5px #000;margin-top:90px;} .menu-mobile a {display:block;} .menu-mobile a.main {cursor:default;text-align:center;margin:10px 0;font-size:24px;color:#3c4042;} .menu-mobile a.main h1 {font-size:24px;margin:0;} .menu-mobile a.gomb {width:200px;padding:0;margin:auto;border:none;height:40px;line-height:40px;;} .menu-mobile a.go { padding:7px;margin:2px 0;} .menu-mobile a.go h2 {display:inline;margin:0 0 0 5px;} .menu-mobile a.go span {margin-left:10px; font-size:14px;} .menu-mobile .bezar {text-align:left;margin-left:10px;} .menu-mobile .bezar i { font-size:24px; cursor:pointer;} #sidebartop .headerlogin {text-align:center; font-size:14px; color:#fff; margin-left:10px; cursor:pointer; position:relative; top:6px; } #sidebartop .headerlogin span {position:relative;top:-4px;} #sidebartop .headerlogin:hover *{color:#fff;} #sidebartop .headerlogin i{font-size:32px; margin-right:10px; } #sidebartop .right {float:right; height:90px; } #sidebartop .icon-menu { line-height:90px;color:#fff; font-size:32px; border:1px solid #fff;padding:0 10px; cursor:pointer; } #sidebartop .icon-search {line-height:90px;color:#fff; font-size:32px; border:1px solid #fff;padding:0 10px; cursor:pointer; margin-left:5px;} #sidebartop .submit {text-align:center;} #sidebartop input[type=text], #sidebartop input[type=email],#sidebartop input[type=password] { display:block; border:none; width:100%; height:40px; color:#5e7a95; font-size:18px; padding-left:20px; padding-right:20px; background:#cad9e7; border:1px solid #97a7b8; text-align:left; margin:5px auto; font-size:14px;} #sidebartop input[type=text]:focus, #sidebartop input[type=email]:focus,#sidebartop input[type=password]:focus {background:#fff; color:#333333; } #frmsignin, #frmsignin2 { display:none; background:#88a4c0; box-shadow:5px 5px 5px #000000; position:absolute; top:90px; border-top:2px solid #000; right:10px; width:270px; padding:0 20px 20px 20px; font-size:13px; z-index:100; color:#fff; text-align:left;} #frmsignin2 #msg2 {text-align:center;color:#ac1010; } #frmsignin2 .ej { text-align:center; text-decoration:underline;margin-bottom:20px; cursor:pointer;} .rcmloginuser { margin:20px 0; text-align:left; } .rcmloginpwd { margin:20px 0 0 0; text-align:left; } #frmsignin i,#frmsignin2 i {background:#2d99bc; padding:0px 8px; margin-right:20px; cursor:pointer;} #frmsignin i:hover,#frmsignin2 i:hover { background:#1f7b99; } #frmsignin .title,#frmsignin2 .title { color:#fff; font-size:20px; text-align:center; font-weight:bold; text-transform:none;margin:10px 0;} @media(max-width:767px) { #sidebartop .headerlogin span { top:-10px;} #sidebartop .search-box { display:none; height:200px; } #sidebartop .search-box input[type="text"] { top:0;background:#b8b8b8; color:#000;font-size:16px;line-height:normal;} #sidebartop .search-box input[type="text"]:focus { background:#cfcfcf; color:#000;} #sidebartop .headerlogin { top:0px; display:inline-block;margin-left:5px; color:#3a5065;} #sidebartop .icon-menu {font-size:28px;padding:0 8px;color:#3a5065; border:1px solid #bdc9d4; } #sidebartop .icon-search {font-size:28px;padding:0 8px;color:#3a5065; border:1px solid #bdc9d4;} #sidebartop .headerlogin i { font-size:28px;border: 1px solid #fff; padding:0 8px; margin-right:0; border:1px solid #bdc9d4;} #sidebartop .headerlogin:hover * { color:#3c4042; } .results {top:10px; width:100%;} } .error404 {margin:20px;} .error404 h1{text-align:center; color:#da474c; } .error404 h2{text-align:center; color:#da474c; } 31#ajax-lapozo {text-align:center;} #ajax-lapozo .termek{border:1px solid #e8deb5;width:230px;height:400px;display:inline-flex;margin:10px 6px;transition: all 0.2s ease 0s;} #ajax-lapozo .termek:hover{border:1px solid #d95450;transition: all 0.5s ease 0s;} #ajax-lapozo .termek a{display:block;height:400px;} #ajax-lapozo .termek .nev{color:#7a614c;font-size:18px;font-weight:normal;padding:10px;height:140px;width:230px;text-align:left;overflow:hidden;} #ajax-lapozo .termek .akciosnev{color:#d95450;font-size:18px;font-weight:bold;padding:10px;height:140px;width:230px;text-transform:lowercase;text-align:left;overflow:hidden;} #ajax-lapozo .termek .szazalek{position:absolute;margin:210px 0 0 10px;background-color:#d95450;border-radius:50%;width:40px;height:40px;text-align:center;} #ajax-lapozo .termek .szazalek span{color:#fff;font-size:14px;font-weight:bold;top:9px;position:relative;} #ajax-lapozo .termek .ar{position:absolute;margin:220px 0 0 0;text-align:right;color:#7a614c;font-size:24px;font-weight:bold;line-height:20px;width:230px;padding-right:10px;} #ajax-lapozo .termek .akciosar{position:absolute;margin:210px 0 0 0;text-align:right;color:#d95450;font-size:24px;font-weight:bold;line-height:20px;width:230px;padding-right:10px;} #ajax-lapozo .termek .akciosar span{display:block;color:#7a614c;font-size:20px;font-weight:normal;text-decoration:line-through;} #ajax-lapozo .termek .kep{position:absolute;width:230px;text-align:center;margin-top:150px;} #ajax-lapozo .termek .kep img{max-width:180px;max-height:200px;} #ajax-lapozo .tovabb {color:#d95450;font-size:16px;text-transform:uppercase;margin:20px auto;} #ajax-lapozo.mask {opacity:0.2;} .added {background-color: #4caf50;border: medium none;border-radius: 0;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);box-sizing: border-box;color: #fff;height: 50px;left: 0;line-height: 50px;position: fixed;top: -100px;transition: all 1s ease 0s;width: 100%; z-index:9999; } .added a {display: block;} .added i {background: #388e3c none repeat scroll 0 0;color: #fff;display: inline-block;float: left;font-size: 32px;height: 50px;left: -100px;line-height: 50px;margin-right: 20px;padding: 0 15px 0 10px;position: relative;transition: all 0.5s ease 0s;} .added p {color: #fff;display: inline;font-size: 16px;} @media(max-width:767px) { .added { height:auto; padding:5px; line-height:normal; } } /********************************************************** icons **********************************************************/ .icon-envelope:before { content: '\e800'; } /* '?' */ .icon-cart:before { content: '\e801'; } /* '?' */ .icon-refresh:before { content: '\e802'; } /* '?' */ .icon-facebook:before { content: '\e803'; } /* '?' */ .icon-home:before { content: '\e804'; } /* '?' */ .icon-cancel:before { content: '\e805'; } /* '?' */ .icon-search:before { content: '\e806'; } /* '?' */ .icon-down:before { content: '\e807'; } /* '?' */ .icon-check:before { content: '\e808'; } /* '?' */ .icon-twitter:before { content: '\e809'; } /* '?' */ .icon-home2:before { content: '\e80a'; } /* '?' */ .icon-phone:before { content: '\e80b'; } /* '?' */ .icon-plus:before { content: '\e80c'; } /* '?' */ .icon-cikkek:before { content: '\e80d'; } /* '?' */ .icon-foldgomb:before { content: '\e80e'; } /* '?' */ .icon-laptop:before { content: '\e80f'; } /* '?' */ .icon-newspaper:before { content: '\e810'; } /* '?' */ .icon-website:before { content: '\e811'; } /* '?' */ .icon-gift:before { content: '\e812'; } /* '?' */ .icon-help-1:before { content: '\e813'; } /* '?' */ .icon-checkout:before { content: '\e815'; } /* '?' */ .icon-skype:before { content: '\e816'; } /* '?' */ .icon-viber:before { content: '\e817'; } /* '?' */ .icon-up:before { content: '\e818'; } /* '?' */ .icon-down-1:before { content: '\e819'; } /* '?' */ .icon-back:before { content: '\e81a'; } /* '?' */ .icon-next:before { content: '\e81b'; } /* '?' */ .icon-logo:before { content: '\e81c'; } /* '?' */ .icon-itszolgaltatas:before { content: '\e81d'; } /* '?' */ .icon-kereses:before { content: '\e81e'; } /* '?' */ .icon-webmail:before { content: '\e81f'; } /* '?' */ .icon-ugyfelkapu:before { content: '\e820'; } /* '?' */ .icon-menu-1:before { content: '\e821'; } /* '?' */ .icon-weboldal:before { content: '\e822'; } /* '?' */ .icon-tarhely:before { content: '\e823'; } /* '?' */ .icon-domain:before { content: '\e824'; } /* '?' */ .icon-contact:before { content: '\e837'; } /* '?' */ .icon-menu:before { content: '\f0c9'; } /* '?' */ .icon-angle-double-left:before { content: '\f100'; } /* '?' */ .icon-angle-double-right:before { content: '\f101'; } /* '?' */ .icon-angle-double-up:before { content: '\f102'; } /* '?' */ .icon-angle-double-down:before { content: '\f103'; } /* '?' */ .icon-help:before { content: '\f128'; } /* '?' */ .icon-angle-circled-up:before { content: '\f139'; } /* '?' */ .icon-ok-squared:before { content: '\f14a'; } /* '?' */ .icon-at:before { content: '\f1fa'; } /* '?' */ .icon-vps:before { content: '\f233'; } /********************************************************** general **********************************************************/ * { margin:0; padding:0; border:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size: 100%; font: inherit; vertical-align: baseline; } *:before, *:after { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box } body { color:#2a3b45; font-family:var(--spc-font-ui); font-size:16px; position:relative; line-height:normal;} a { text-decoration:none } a:hover { text-decoration:none } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; } ol, ul { list-style: none; } p { margin:0;} /********************************************************** layout **********************************************************/ .align-center { text-align:center } .align-left { float:left; margin:0 30px 30px 0 } .align-right { float:right; margin:0 0 30px 30px } .wrapper { width:100%; margin:90px auto 0;border:20px solid #fff; border-bottom:none;} @media(max-width:767px) { .wrapper { border:2px solid #fff; } } .page-wrapper { background:#fff } /********************************************************** home **********************************************************/ .lightblue {background:#e1ebf5; text-align:center; padding:10px; margin:15px 0 0 0; border-top:1px dashed #000;} .lightblue h1{ color:#2a3b45; font-size:36px; font-weight:800; margin:20px 0 10px 0; } .lightblue .title2{ color:#2a3b45; font-size:16px; margin:0 0 30px 0; } #home .lightblue form {margin:10px} #home .lightblue input[type="text"] { border:1px solid #b5c8da; height:54px; line-height:54px; min-width:20%;text-align:center; background:#f0f0f0;} .gomb{ background:#53a5aa; border-bottom:10px solid #358a8f; position:relative;color:#fff; font-size:16px; padding:10px 30px; text-align:center; text-transform:uppercase; display:inline-block; cursor:pointer;border-radius:0; vertical-align:top;text-decoration:none!important;} .gomb:hover {background:#358a8f; color:#fff;} .yellow {background:#fff2cb; text-align:center; padding:10px; margin:15px 0 0 0; border-top:1px dashed #f05728;} .yellow a { color:#0383c3; text-decoration:underline; } .yellow .title1{ color:#f05728; font-size:36px; font-weight:800; margin:20px 0 10px 0; } .yellow .title2{ color:#3c4042; font-size:16px; margin:0 0 30px 0; } #home .storages { background:#fff2cb; text-align:center;} #home .storages div {border-top:4px solid #fff;border-left:2px solid #fff; border-right:2px solid #fff;padding:20px 10px; } #home .storages div a { display:block; } #home .storages div a:hover { text-decoration:none;} #home .storages div a:hover .logo { animation: wobble linear 1s;animation-iteration-count: 1;transform-origin: 50% 50%;-webkit-animation: wobble linear 1s;-webkit-animation-iteration-count: 1;-webkit-transform-origin: 50% 50%;-moz-animation: wobble linear 1s;-moz-animation-iteration-count: 1;-moz-transform-origin: 50% 50%;-o-animation: wobble linear 1s;-o-animation-iteration-count: 1;-o-transform-origin: 50% 50%;-ms-animation: wobble linear 1s;-ms-animation-iteration-count: 1;-ms-transform-origin: 50% 50%; } #home .storages .title1 { color:#f05728; font-size:30px; font-weight:700; height:50px;} #home .storages .title2 { color:#3c4042; font-size:18px; font-weight:400; margin:10px 0 20px 0; height:50px;} #home .storages .ar1 { color:#f05728; font-size:30px; font-weight:800;margin-top:20px;} #home .storages .ar1 span { color:#f05728; font-size:18px; font-weight:800;margin-top:20px;} #home .storages .ar2 { color:#3c4042; font-size:18px; font-weight:400;} .gray {background:#ebebeb; text-align:center; padding:10px; margin:15px 0 0 0; border-top:1px dashed #3c4042;} .gray a { color:#0383c3; text-decoration:underline; } .gray .title1{ color:#3c4042; font-size:36px; font-weight:800; margin:20px 0 10px 0; } .gray .title2{ color:#2a3b45; font-size:16px; margin:0 0 30px 0; line-height:26px;} #home .custompages { background:#ebebeb; text-align:center;} #home .custompages div {border-top:4px solid #fff;border-left:2px solid #fff; border-right:2px solid #fff;padding:50px 10px; } #home .custompages div a .logo { width:80%; margin:auto; overflow:hidden; } #home .custompages div a img { transition: all 0.1s ease 0s; } #home .custompages div a { display:block; overflow:hidden;} #home .custompages div .img:hover { transition: all 0.1s ease 0s; -webkit-transform:scale(2.0); /* Safari and Chrome */ -moz-transform:scale(2.0); /* Firefox */ -ms-transform:scale(2.0); /* IE 9 */ -o-transform:scale(2.0); /* Opera */ transform:scale(2.0); } #home .custompages .title1 { color:#474545; font-size:24px; font-weight:700;margin-bottom:20px;} .green {background:#def3bd; text-align:center; padding:10px; margin:15px 0 0 0; border-top:1px dashed #3c4042;} .green a { color:#0383c3; text-decoration:underline; } .green .title1{ color:#7da43f; font-size:36px; font-weight:800; margin:20px 0 10px 0; } .green .title2{ color:#2a3b45; font-size:16px; margin:0 0 30px 0; } #home .hirek { background:#def3bd;} #home .hirek>div {border-top:4px solid #fff;border-bottom:4px solid #fff;border-left:2px solid #fff; border-right:2px solid #fff;padding:50px 10px; } #home .hirek .box { background:#fff;padding:20px; width:100%;margin:auto;} #home .hirek img {float:left;padding-right:10px;} #home .hirek a { display:block; } #home .hirek a:hover { text-decoration:none;} #home .hirek a:hover .title2{ color:#7da43f;} #home .hirek a:hover .title2{ border-bottom:1px solid #7da43f;} #home .hirek a:hover span { color:#3c4042;} #home .hirek .logo { display:inline-block;} #home .hirek .title { height:120px; } #home .hirek .title1 { color:#7da43f; font-size:20px; font-weight:700;text-align:left;} #home .hirek .title2 { color:#c8c8c8; font-size:16px; font-weight:700;margin-bottom:20px;text-align:left; padding-bottom:10px; border-bottom:1px solid #ecebeb;} #home .hirek span { display:block; overflow:hidden; height:200px;color:#2a3b45;} @media(max-width:480px) { .lightblue .gomb { margin-top:20px; } } @media(max-width:767px) { .yellow .title1 { font-size:24px; } .gray .title1 { font-size:24px; } .green .title1 { font-size:24px; } .lightblue .title1 { font-size:24px; } .lightblue h1 { font-size:24px;} #home .storages .title1 { font-size:22px; } #home .hirek span { height:auto;text-align:left;margin-top:20px;} } @media(max-width:1600px) { #home .storages .title1 { font-size:22px; } #home .storages .ar { font-size: 22px; } #home .hirek span { text-align:left;margin-top:20px;} #home .hirek .logo { text-align:center; display:block;} #home .hirek img { float:none; text-align:center;} } /********************************************************** aloldal **********************************************************/ #aloldal { background:#fff;} #aloldal .fokep {position:fixed; top:110px;left:110px; right:20px; overflow:hidden;} #aloldal .fokep a { display:block; } #aloldal .fokep img {max-width:none;width:100%;} #aloldal .content-top { margin:auto;padding:10px;position:relative; background: rgba(230, 240, 250, 0.9);} #aloldal .content-bottom { margin:10px auto;padding:10px;position:relative; background: rgba(230, 240, 250, 0.9)} #aloldal .content { max-width:890px; margin:auto; } #aloldal .content .cim { max-width:1420px; margin:10px auto;padding:10px;} #aloldal .content .cim h1{ color:#2a3b45; font-size:48px; font-weight:bold; text-align:center; margin:0; text-transform:uppercase; } #aloldal .content h2 { color:#2d99bc; font-size:28px; line-height:36px; font-weight:bold; margin:20px 0;} #aloldal .content p { color:#2a3b45; font-size:16px; line-height:30px;} #aloldal .content a { text-decoration:underline; } .leiras h3 { font-size:20px;font-weight:bold;line-height:30px;} .leiras em {font-style:italic;} .leiras span{padding:5px 10px; display:inline-block;} .leiras ul { margin:10px 0 10px 20px;} .leiras ul li { margin:25px 0; line-height:26px;} .leiras .webtarhely-arak td { font-size:14px; padding:10px; max-width:400px;} .leiras .webtarhely-arak td span { padding:5px; color:#000000;} #aloldal .arlista {margin:auto;} #aloldal .arlista tr:first-child td { font-weight:bold;text-align:center;} #aloldal .arlista td { padding:3px 10px;} #aloldal .arlista tr td:nth-child(2) { text-align:center;} #aloldal .ar2 span {font-size:14px;padding:0;} #aloldal table td h3 { padding:5px; } @media(max-width:1200px) { #aloldal .content .cim h1 { font-size:36px; } .leiras h3 { font-size:16px;} } @media(max-width:992px) { #aloldal .content .cim h1 { font-size:30px; } #aloldal .fokep {position:unset;margin-top:30px;} #aloldal .fokep img { margin-left:0!important; width:100%;} #aloldal .content-top { margin-top:10px!important;position:relative;} #aloldal .content p { line-height:36px;} .leiras h3 { font-size:16px;} } @media(min-width:0px) and (max-width:767px) { #aloldal .fokep {margin-top:10px; left:20px;} #aloldal .content .cim h1 { font-size:22px; } #aloldal .content h2 { font-size: 18px; margin:0px 0px 5px 0px; line-height:28px;} #aloldal .content p { line-height:28px;} .leiras h3 { font-size:16px;} .leiras ul li { margin:18px 0;} .leiras .webtarhely-arak td { font-size:10px; padding:5px 0; max-width:200px;} .leiras .webtarhely-arak td span { padding:5px 2px; font-size:10px; } } @media(max-width:600px) { #aloldal img { float:none!important; margin:20px auto!important; display:block;} } /********************************************************** igenyfelmero **********************************************************/ #igenyfelmero {margin:50px auto; max-width:800px;border:1px solid #474545; background:#e1ebf5; color:#474545; } #igenyfelmero h1 {font-size:30px;text-transform:uppercase;color:#474545; font-weight:800; text-align:center; } #igenyfelmero .fejlec h2 {font-size:14px;color:#474545;width: calc(100% - 50px);} #igenyfelmero .center{padding:0px 30px;} #igenyfelmero .fejlec{padding:0px 30px; background:url('/images/igenyfelmerologo.png') no-repeat center right 20px;} #igenyfelmero .kapcsolat{padding:0px 30px; margin-top:30px;} #igenyfelmero .kapcsolatbal p{font-size:14px;color:#474545;margin-top:20px; line-height:normal;} #igenyfelmero .kapcsolatbal img{position:absolute;margin:90px 0px 0px 30px;} #igenyfelmero .kapcsolatjobb h1{text-transform:uppercase;font-size:24px;} #igenyfelmero img{position:absolute;margin-left:630px;} #igenyfelmero .kapcsolatjobb label{display:block;color:#474545;font-size:12px;margin:8px 0px 2px 0px;} #igenyfelmero .kapcsolatjobb input{width:97%;height:34px;padding:4px 10px;border:1px solid #d7d5d5;font-size:16px;line-height:24px;color:#3c4042;margin:5px 0 10px 0;background:#ffffff;} #igenyfelmero .segithetunk { text-align:center;} #igenyfelmero .segithetunk1,.segithetunk2,.segithetunk3,.segithetunk4{display:none;} #igenyfelmero .segithetunk h1,.segithetunk1 h1,.segithetunk2 h1,.segithetunk3 h1,.segithetunk4 h1{color:#2a3b45;font-size:24px;} #igenyfelmero .segithetunk h2,.segithetunk1 h2,.segithetunk2 h2,.segithetunk3 h2,.segithetunk4 h2{;color:#2a3b45;font-size:14px;line-height:normal;} #igenyfelmero .gombok { margin:10px 0;} #igenyfelmero .gombok .box { cursor:pointer;padding:5px;} #igenyfelmero .gombok .box:hover h2{ color:#666868;} #igenyfelmero .gombok h1{font-size:18px;background:#53a5aa;color:#fff;padding:10px 0;text-transform:uppercase;text-align:center; max-width:200px; margin:10px auto 10px;} #igenyfelmero .gombok h1:hover {background:#358a8f; } #igenyfelmero .gombok h2{color:#474545;font-size:14px;text-align:center;margin-bottom:30px;} #igenyfelmero .igeny1,.igeny2,.igeny3,.igeny4,.mehet{margin-left:7px;display:none;} #igenyfelmero .igeny1 input,.igeny2 input ,.igeny3 input,.igeny4 input{width:97%;height:34px;padding:4px 10px;border:1px solid #d7d5d5;font-size:16px;line-height:24px;color:#3c4042;font-family:var(--spc-font-ui);margin:5px 0 10px 0;background:#ffffff;} #igenyfelmero .igeny1 label,.igeny2 label ,.igeny3 label,.igeny4 label,.mehet label{display:block;color:#474545;font-size:12px;margin:8px 0px 2px 0px;} #igenyfelmero .igeny1 textarea,.igeny2 textarea ,.igeny3 textarea,.igeny4 textarea {width:97%;height:300px;padding:4px 10px;border:1px solid #d7d5d5;font-size:16px;line-height:24px;color:#3c4042;font-family:var(--spc-font-ui);margin:5px 0 20px 0;resize:none;background:#ffffff;} #igenyfelmero .mehet { text-align:center;margin:20px auto;} /********************************************************** domain regisztracio **********************************************************/ #domain-regisztracio .check {background:#e1ebf5; border-top:1px dashed #2a3b45; border-bottom:1px dashed #2a3b45;padding:30px 10px;} #domain-regisztracio .check h1 { color:#2a3b45; font-size:36px; font-weight:900; text-align:center;} #domain-regisztracio .check h2 { color:#2a3b45; font-size:16px; font-weight:normal; text-align:center;} #domain-regisztracio .check p { text-align:center;margin:20px auto;} #domain-regisztracio .check p input[type="text"] { border:1px solid #b5c8da; height:54px; line-height:54px; min-width:20%;text-align:center; background:#f0f0f0; margin-bottom:20px;} #domain-regisztracio .grayline { width:100%; height:10px;background:#e1e1e1;} #domain-regisztracio .content-bottom { margin:0 auto;padding:10px;position:relative; background: rgba(226, 226, 226, 0.9);} #domain-regisztracio .content { max-width:890px; margin:auto; } #domain-regisztracio .content .cim { max-width:1420px; margin:10px auto;padding:10px;} #domain-regisztracio .content .cim h1{ color:#3c4042; font-size:48px; text-align:center; margin:0;} #domain-regisztracio .content h2 { color:#2d99bc; font-size:28px;font-weight:bold; margin:20px 0;} #domain-regisztracio .error {color: red;} #domain-regisztracio .ajax { background:#e1e1e1;} #domain-regisztracio .free .title {color:#b8be53;font-size:18px; font-weight:900; text-align:left;padding:20px 5px; max-width:1420px; margin:auto;} #domain-regisztracio .free .line {background:#b8be53;margin-bottom:2px;} #domain-regisztracio .free .line .inline { max-width:1420px; margin:auto;} #domain-regisztracio .free .line span {color:#767a2b; font-size:20px; font-weight:bold; padding:10px; display:inline-block;} #domain-regisztracio .transfer { margin-top:20px;} #domain-regisztracio .transfer .title {color:#787878;font-size:18px; font-weight:900; text-align:left;padding:20px 5px; max-width:1420px; margin:auto;} #domain-regisztracio .transfer .line {background:#c2c2c2;margin-bottom:2px;} #domain-regisztracio .transfer .line .inline { max-width:1420px; margin:auto;} #domain-regisztracio .transfer .line span {color:#787878; font-size:20px; font-weight:bold; padding:10px; display:inline-block;} #domain-regisztracio .free .line span.ures { color:#ebebeb; font-size:20px; margin-left:30px; } #domain-regisztracio .free .line span.teli { color:#757a25; font-size:20px; margin-left:30px; display:none; } #domain-regisztracio .transfer .line span.ures { color:#ebebeb; font-size:20px; margin-left:30px; } #domain-regisztracio .transfer .line span.teli { color:#787878; font-size:20px; margin-left:30px; display:none; } #domain-regisztracio .jelolo { position: relative; top:8px; } #domain-regisztracio .jelolo input { display:none; } #domain-regisztracio .jelolo label { cursor: pointer; position: absolute; width: 30px; height: 30px; top: 0; left: 0; background:#eaebda; border:1px solid #757a25; } #domain-regisztracio .jelolo label:after { opacity: 0; font-family: 'fontello'; content: '\e808'; font-size:22px; position: absolute; width: 9px; height: 5px; background: transparent; top:3px; left:7px; border: none; } #domain-regisztracio .free .jelolo label:after { color:#757a25; } #domain-regisztracio .transfer .jelolo label:after { color:#787878; } #domain-regisztracio .jelolo input[type=checkbox]:checked + label:after { opacity: 1; } @media(max-width:767px) { #domain-regisztracio .line span { font-size:18px!important; } #domain-regisztracio .jelolo { top:0; } #rendeles .content .adatok span { top:0; } #domain-regisztracio .check h1 { font-size:24px; } } /********************************************************** domain regisztracio **********************************************************/ #rendeles { background:#e1ebf5; border-bottom:1px dashed #e0eaf1; padding:10px;} #rendeles .fejlec .cim { font-size:32px;color:#2a3b45;font-weight:800;margin:20px 0 10px 10px; } #rendeles .fejlec .elkuldve { font-size:16px;color:#9b9d70;font-weight:normal;margin:20px;} #rendeles .fejlec .alcim { font-size:16px;color:#6189b8;text-decoration:underline;margin:20px 0 10px 10px; cursor:pointer; } #rendeles .fejlec .toggle {display:none;margin:20px;} #rendeles .fejlec .kalkulator .row { margin-bottom:50px; } #rendeles .fejlec .kalkulator .row span { font-weight:bold; color:#3335B7; padding:0;} #rendeles .fejlec .kalkulator .vpsar {font-weight:bold; font-size:26px;} #rendeles .fejlec .kalkulator .vpsar font { font-size:13px; font-weight:normal;} #rendeles .content { background:#eff3f5; padding:50px 0px; margin:30px 0;} #rendeles .content .cim { font-size:24px; font-weight:800; color:#2a3b45; padding:30px 0 30px 10px; background:#eff3f5;} #rendeles .content .tablazat {margin:20px 0 0 0;} #rendeles .content .tablazat .fejlec { font-size:14px; color:#808080; margin:30px 0 10px 0;} #rendeles .content .tablazat span.domain { color:#2a3b45; font-weight:bold; } #rendeles .content .tablazat .line { background:#e1ebf5; padding:10px; font-size:16px; color:#6189b8; line-height:25px; margin:4px 0; border:1px solid #d1dbe5;} #rendeles .content .tablazat .line select { font-size:16px; margin:0; width:100%; text-align:left; padding:0 5px; background:#fff; } #rendeles .content .tablazat .line option { font-size:16px;padding:0 5px; background:#f7f5f5; } #rendeles .content .tablazat .line .delete-item { color:#e94b35;margin-left:5px; font-size:18px; cursor:pointer;} #rendeles .content .tablazat .line div.ar { font-size:18px; font-weight:800; color:#3a5065; text-align:right; } #rendeles .content .tablazat .line select:disabled { background: #dddddd; } #rendeles .content .tablazat .line .title { color:#2a3b45;} #rendeles .content .tablazat .line .icon-help-1 {color:red; margin-left:5px; cursor:pointer;} #rendeles .content .tablazat .line .help {position:absolute; background:#fff; border:1px solid red; padding:10px; display: none; color: red; z-index:100; font-weight:100; font-size:14px; min-width:300px; } #rendeles .content .tablazat .line .help hr { padding:0; margin:0;} #rendeles .content .tablazat .line .icon-help-1:hover + .help { display: block; } #rendeles .content .tablazat .line .valaszto {cursor:pointer;padding-left:10px; font-size:16px; color:#6189b8; background:url('/pics/down-arrow.png') no-repeat center right 2px #ffffff;} #rendeles .content .tablazat .line .egyedivpsbg {background:#fff; padding-left:10px;} #rendeles .content .tablazat .line .lenyilo {position:absolute; border:1px solid #929090;background:#f7f5f5; z-index:100;display:none;width: calc(100% - 30px);max-height:500px;overflow-y: scroll; min-width:220px;} #rendeles .content .tablazat .line .lenyilo .box { cursor:pointer; border-bottom:1px solid #acacac; padding:3px 0;} #rendeles .content .tablazat .line .lenyilo .box:last-child { border:none;} #rendeles .content .tablazat .line .lenyilo .box h1 { font-size:20px; color:#808080; padding:5px 10px 0 10px;margin:0;cursor:pointer; font-weight:bold; } #rendeles .content .tablazat .line .lenyilo .box:hover{ background:#6189b8; color:#ffffff} #rendeles .content .tablazat .line .lenyilo .box:hover * { color:#fff!important;} #rendeles .content .tablazat .line .lenyilo .ar { color:#6189b8;font-size:12px; text-align:left;margin-left:10px;} #rendeles .content .tablazat .line .lenyilo .leiras {margin:0 10px;} #rendeles .content .tablazat .line .lenyilo .leiras p { font-size:12px; color:#808080; line-height:normal;} #rendeles .content .tablazat .line .lenyilo .leiras li { margin:0;} #rendeles .content .tablazat .rejtett { margin-top:10px;} #rendeles .content .tablazat .rejtett .error {color: red; font-size:13px;line-height:normal;} #rendeles .content .tablazat .rejtett input { height:26px;line-height:26px;} #rendeles .content .tablazat .rejtett select { width:70px;} #rendeles .content .tablazat .rejtett i { font-size:24px; color:green; margin-left:5px; top:3px; position:relative; cursor:pointer;} #rendeles .content .tablazat .ujdom { text-decoration:underline; color:#e94b35;cursor:pointer;} #rendeles .content .tablazat .rejtett p input[type="text"] { border:1px solid #b5c8da; height:32px; line-height:32px; min-width:20%;text-align:center; background:#f0f0f0; margin-bottom:5px;} #rendeles .content .tablazat .rejtett .gomb{ background:#358a8f; border-bottom:3px solid #2b7175; position:relative;color:#e1ebf5; font-size:14px; margin:0 5px; padding:0px 30px; height:32px;line-height:34px;text-align:center; text-transform:uppercase; display:inline-block; cursor:pointer;border-radius:0;margin-bottom:5px;} #rendeles .content .tablazat .rejtett .gomb:hover {background:#2b7175; color:#fff;} #rendeles .content .tablazat .rejtett .domline { margin-bottom:5px; } #rendeles .content .tablazat .rejtett .domline .product { padding:2px 5px; margin-left:10px;} #rendeles .content .tablazat .rejtett .active { background:#358a8f; color:#fff;} #rendeles .content .tablazat .rejtett .ar{color:gray; margin-right:5px;font-size:12px;} #rendeles .content .tablazat .rejtett .check { color:#358a8f; text-decoration:underline; cursor:pointer;} #rendeles .content .tablazat .rejtett .line div { margin-bottom:0;} #rendeles .content .tablazat .rejtett .free .title { color:#358a8f;padding:5px; font-weight:bold;margin-top:10px;} #rendeles .content .tablazat .rejtett .transfer .title { color:#e94b35;padding:5px; font-weight:bold;margin-top:10px;} #rendeles .content .add { background:#b4c5d7; padding:10px;} #rendeles .content .add p { color:#6189b8; cursor:pointer; display:inline-block; padding:5px 10px; border:1px solid #6189b8; background:#fff;} #rendeles .content .add p a { color:#6189b8;} #rendeles .content .add p:hover { background:#358a8f;color:#fff; } #rendeles .content .osszesen { background:#b4c5d7; padding:10px; line-height:25px; margin:4px 0 0 0; } #rendeles .content .osszesen p {text-align:right; color:#2a3b45; font-size:24px; font-weight:800; } #rendeles .content .adatok { background:#e1ebf5;padding-bottom:40px;} #rendeles .content .adatok .keret {padding:10px;margin:20px 0 0 0;} #rendeles .content .adatok .keret p { font-size:12px; color:#9c9c9c;} #rendeles .content .adatok .keret span { top:-12px;} #rendeles .content .adatok h1 { color:#3c4042; font-size:18px; font-weight:bold; margin-bottom:50px;} #rendeles .content .adatok input {width:97%;height:34px;padding:4px 10px;border:1px solid #d1dbe5;font-size:16px;line-height:24px;color:#2a3b45;font-family:var(--spc-font-ui);margin:5px 0 20px 0;background:#ffffff;} #rendeles .content .adatok input[type="checkbox"] { width:30px; margin:0; } #rendeles .content .adatok span { font-size:16px; position:relative; top:10px;} #rendeles .content .adatok select {width:100%;height:34px;padding:4px 10px;border:1px solid #d7d5d5;font-size:16px;line-height:24px;color:#3c4042;font-family:var(--spc-font-ui);margin:5px 0 20px 0;background:#ffffff;} #rendeles .content .adatok textarea {width:97%;height:300px;padding:4px 10px;border:1px solid #d7d5d5;font-size:16px;line-height:24px;color:#3c4042;font-family:var(--spc-font-ui);margin:5px 0 20px 0;resize:none;background:#ffffff;} #rendeles .payment { margin:auto; text-align:center;} #rendeles .payment div.main { margin:auto; max-width:900px; width:100%; border:1px solid gray; margin-bottom:20px;padding:20px 0;} #rendeles .payment div.leiras { font-size:12px; font-family:'Verdana'; margin-top:20px;} #rendeles .content .adatok .payment p { width:100%; text-align:center; color:#000; font-weight:bold; font-family:'Verdana';} #rendeles .payment img { max-height:80px;} #rendeles .payment .radio + label .outer3 { display:inline-block; width:20px; height:20px; border:1px solid #2a3b45; background:#fff; box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); vertical-align:middle; } #rendeles .payment .radio + label .outer3 { border-radius:50% } #rendeles .payment .radio + label { margin-right:10px;} #rendeles .payment .radio:checked + label .outer3 span { width:12px; height:12px; display:block; border-radius:6px; background:#2a3b45; margin:3px 0 0 3px;} #rendeles .content .adatok .payment span { top:0;} #rendeles .aszf { margin:30px auto; text-align:center;} #rendeles .aszf a { color:#6189b8; text-decoration:underline;} #rendeles .aszf input { position:relative;top:12px; } #rendeles .feltetel {display:none;} #rendeles .simplepay { display:none; margin:30px auto; max-width:900px; width:95%; font-size:13px;} input.error {border: 1px solid #ff0000!important;} label.error { display:none!important; } .feltetel{color:#f16521;font-size:18px;display:none;text-align:center;} .sp-eredmeny td { padding:5px 10px; font-size:12px; font-family:'Verdana';} .sp-eredmeny .piros { color:#dc3545 !important; font-weight:bold;} .sp-eredmeny .zold { color:green !important; font-weight:bold;} elem { } .btn-secondary:hover { color: #fff; background-color: #5a6268; border-color: #545b62; } .btn:hover { color: #212529; text-decoration: none; } a:hover { color: #0056b3; text-decoration: underline; } .btn-sm, .btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; } .btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; } @media(max-width:992px) { #rendeles .content .tablazat .line div { margin-bottom:15px; padding:0;} #rendeles .content .adatok h1 { margin-bottom:10px; } #rendeles .content .adatok .keret { margin:0;} #rendeles .content .adatok textarea { height:100px; } #rendeles .content .cim { text-align:center; } } @media(max-width:767px) { #rendeles .content .adatok h1 { text-align:center; } #rendeles .content { padding:0 ;} } /********************************************************** page header **********************************************************/ .page-header { border-top:20px solid #aa8e4b; margin-top:40px; padding-bottom:30px } .page-header .logo { text-align:center } .page-header .logo img { margin-top:-50px } .page-header .welcome { color:#da474c; margin-left:90px } .page-header .welcome a { color:#da474c; } .page-header .welcome .icon { font-size:60px; float:left; color: #cd181e; -webkit-animation: color_change 2s infinite alternate; -moz-animation: color_change 2s infinite alternate; -ms-animation: color_change 2s infinite alternate; -o-animation: color_change 2s infinite alternate; animation: color_change 2s infinite alternate } .page-header .welcome .text { padding:20px 0 0 10px; float:left; display:block } .page-header .welcome .text b { font-weight:800 } .page-header .welcome .text div { font-size:12px } .page-header .login-reg { color:#b19a66; margin:85px 0 0 50px } .page-header .login-reg a { color:#b19a66 } .page-header .login-reg a:hover { text-decoration:underline } .page-header .login-reg .icon { font-size:30px;} .page-header .login-reg .icon-search { margin-right:40px; } .page-header .login-reg .icons { margin-top:30px } .page-header .login-reg .kosar {display:inline-block; cursor:pointer;} .page-header .login-reg .kosar .dbszam {display:inline-block; color:#fff; font-size:12px;} .page-header .login-reg .kosar .dbszam span { font-size:18px; font-weight:bold;} .page-header .login-reg .kosar .red .icon-cart { color: #fff;} .page-header .login-reg .kosar .red { background:#da474c; padding:5px; border-radius:10px;} .page-header .login-reg .kosarmenu {background: #efefef none repeat scroll 0 0;border: 1px solid #c2c2c2;color: #000;display: none;font-size: 13px;margin-top: 1px;padding: 10px;position: absolute;right: 5px;} .page-header .login-reg .kosarmenu li { border:none; width:100%; list-style-type:none } .page-header .login-reg .kosarmenu li table { width:100% } .page-header .login-reg .kosarmenu li table td {padding:5px 10px;border-bottom:1px solid #fff} .page-header .login-reg .kosarmenu li a{padding:0; height:auto;background:none!important; color:#000!important } .page-header .login-reg .kosarmenu li table tr:first-child td{background:#fff } .page-header .login-reg .kosarmenu li table tr:last-child td{ border:0;} .page-header .login-reg .kosarmenu li img { max-width:30px; max-height:30px } .page-header .login-reg .kosarmenu li .gokosar { text-align:left; color:#fff!important; padding:5px 10px;background-color:#0073b9!important; display:inline-block } .page-header .login-reg .kosarmenu li .gokosar:hover { background-color:#0569a8!important } .page-header .flags { margin-top:80px; margin-left:242px } .page-header .flags a { display:inline-block; width:30px; height:20px; background:url('../pics/flags.png') no-repeat } .page-header .flags a.nl { background-position:0 -20px } .page-header .search-box { display:none } .page-header .search-box input[type="text"] { border:1px solid #dbcdb7; width:100% } .page-header .search-box { position:relative; background:#fff; width:100%; max-width:530px; height:30px; margin-top:3px; } .page-header .search-box button { position:absolute; right:0; background:#0073b9; color:#fff; font-size:30px; width:48px; height:30px; cursor:pointer } .page-header .search-box input[type="text"] { text-indent:10px; position:absolute; background:#fff; left:0; width:100%; height:30px; font-size:16px; color:#858181 } .page-header .search-box ul { display:none; width:100%; text-align:left; position:absolute; top:30px; left:-1px; list-style:none; background:#efefef; border-left:1px solid #c2c2c2;border-right:1px solid #c2c2c2;border-bottom:1px solid #c2c2c2;} .page-header .search-box li a { color:#0073b9; display:block; padding:3px 10px } .page-header .search-box li a:hover { background:#0073b9; color:#fff; text-decoration:none } .page-header .toggle-search { cursor:pointer } @media(max-width:1040px) { .page-header .welcome { margin-left:0 } .page-header .flags { margin-left:152px } } @-webkit-keyframes color_change { from { color: #991317; } to { color: #da262c; } } @-moz-keyframes color_change { from { color: #991317; } to { color: #da262c; } } @-ms-keyframes color_change { from { color: #991317; } to { color: #da262c; } } @-o-keyframes color_change { from { color: #991317; } to { color: #da262c; } } @keyframes color_change { from { color: #991317; } to { color: #ff272e; } } .page-header .welcome .icon,.page-header .welcome .text { color: #991317; -webkit-animation: color_change 2s infinite alternate; -moz-animation: color_change 2s infinite alternate; -ms-animation: color_change 2s infinite alternate; -o-animation: color_change 2s infinite alternate; animation: color_change 2s infinite alternate; } .mobile-header { font-size:30px } .mobile-header .right { text-align:right; } .mobile-header .search-box { display:none; width:100%;text-align:center; } .mobile-header .search-box input[type="text"] { border:1px solid #dbcdb7; width:100%; margin-top:10px; width:95% } .mobile-header .search-box ul { display:none; width:95%; text-align:left; position:relative; margin:auto; list-style:none; background:#efefef; border-left:1px solid #c2c2c2;border-right:1px solid #c2c2c2;border-bottom:1px solid #c2c2c2;} .mobile-header .search-box li a { color:#0073b9; display:block; padding:3px 10px } .mobile-header .search-box li a:hover { background:#0073b9; color:#fff; text-decoration:none } .mobile-header .line1 {background:#64532b;margin:0;padding:10px 0;position:fixed;top:0;width:100%;height:65px;} .mobile-header .line1 span { color:#fff;border:1px solid #fff; padding:5px 10px;} .mobile-header .line2 {margin-top:65px;padding:10px;} /********************************************************** page footer **********************************************************/ .page-footer { background:#f2f6f9; border-top:1px solid #e1e1e1;position:relative; padding:20px 0; color:#404041;margin-top:10px;} .page-footer .title { color:#2a3b45; font-size:36px; font-weight:800; text-align:center;padding:20px;} @media(max-width:410px) { .page-footer .title { font-size:22px; } } .page-footer .contact { background:#e4ecf3;padding:20px; } .page-footer .contact .title1 { color:#2a3b45;text-transform:uppercase; font-size:18px; font-weight:700;text-align:left; margin-bottom:10px;} .page-footer .contact input[type=text] { border:1px solid #d1dbe5; color:#2a3b45; height:50px; line-height:50px; min-width:20%;text-align:left; background:#fff; margin:2px 0; width:100%; margin-bottom:20px;padding-left:10px;} .page-footer .contact textarea { border:1px solid #d1dbe5; color:#2a3b45; height:50px; line-height:50px; min-width:20%;text-align:left; background:#fff; margin:2px 0 20px 0; width:100%; resize:none;height:195px;padding-left:10px;} .page-footer .contact .right {text-align:right;} .page-footer .contact label.error {display:none!important;} .page-footer .contact .elkuldve { color:red; } .page-footer .address { background:#e4ecf3;padding:20px;line-height:18px;font-size:14px;} .page-footer .address .icon-at:before { text-decoration:underline; } .page-footer .address a { text-decoration:underline; } .page-footer .address span {width:70px; display:inline-block;} .page-footer .title2 { color:#2a3b45; text-transform:uppercase; font-size:18px; font-weight:700;} .page-footer .title3 { color:#2a3b45; font-size:14px; margin:20px 0 15px 0;font-weight:700;} .page-footer .ugyfelchat { background:#e4ecf3;padding:20px 10px;line-height:18px;min-height:360px;} .page-footer .ugyfelchat span.mobile { display:none;} .page-footer .ugyfelchat .buborek { position:absolute; margin:-20px 0 0 160px;} .page-footer .ugyfelchat .chat {margin:20px 0 20px 0; padding:5px 5px; text-align:center; border:1px solid red;background:red;font-size:14px;font-weight:bold;} .page-footer .ugyfelchat .chat span {font-weight:bold;text-transform:uppercase;color:#fff;} .page-footer .ugyfelchat .chat.online {border:1px solid #39b54a;background:#c4df9b;color:#1a8337; text-transform:uppercase;} .page-footer .ugyfelchat .chat.online span {color:#39b54a;} .page-footer .ugyfelchat .messenger{margin-bottom:10px;display:block;color:#404041;font-size:16px;line-height:30px;text-align:center;} .page-footer .ugyfelchat .skype{display:block;color:#404041;font-size:16px;line-height:30px;text-align:center;} .page-footer .ugyfelchat .facebook{display:block;margin-top:15px;text-align:center;} .page-footer .smallmenu { background:#e4ecf3; padding:10px; margin:10px; text-align:center;} .page-footer .smallmenu a { color:#414142; font-size:14px; } .page-footer .smallmenu a:hover { text-decoration:underline;} .page-footer .red { color:#de4a4a; font-size:14px; font-weight:800; text-align:center; padding:0 10px;} .page-footer .copyright { color:#414142; font-size:12px; font-weight:400; text-align:center; margin-top:10px;} .page-footer ul { margin:0 0 30px 20px;} .page-footer li { color:#aa8e4b; margin-bottom:3px;} .page-footer li a { color:#aa8e4b } .page-footer li a:hover { text-decoration:underline } .page-footer .contact { color:#234889; text-align:center } .page-footer .contact .icon { font-size:30px } .page-footer .social { text-align:center; padding-top:20px; padding-bottom:10px } .page-footer .social a { font-size:35px } .page-footer .social a.icon-facebook { color:#3c5a96; margin-right:20px } .page-footer .social a.icon-twitter { color:#30a7cf } @media(max-width:767px) { .page-footer .title { text-align:center; font-size:24px; } .page-footer .title2 { text-align:center; } .page-footer .contact {margin-bottom:40px;} .page-footer .ugyfelchat { min-height:auto; } } @media(min-width:900px) and (max-width:1200px) { .page-footer .ugyfelchat span.desktop { display:none;} .page-footer .ugyfelchat span.mobile { display:block;} } /********************************************************** form elements **********************************************************/ input[type="text"], input[type="password"], input[type="email"], textarea, select { padding:5px; background:#fff; font-family:inherit; font-size:inherit } .button-1 { background:#e8d8b2; color:#b19a66; font-size:12px; border-radius:10px; text-align:center; padding:10px 20px; text-transform:uppercase; cursor:pointer } .button-1:hover { background:#d5c59e; color:#fff } input[type="text"].error, input[type="password"].error, input[type="email"].error, textarea.error, select.error { border:1px solid #f00 !important } /********************************************************** clearfix **********************************************************/ .breadcrumb:before,.breadcrumb:after, .menu:before,.menu:after, .welcome:before,.welcome:after { content: " "; display: table; } .breadcrumb:after, .menu:after, .welcome:after { clear: both; } /********************************************************** section 1 **********************************************************/ .section-1 { background:#e8efd0; color:#38401d; padding:40px 0 } .section-1 a { color:#38401d } .section-1 .box { margin-bottom:30px; display:block; transition:all .2s; padding:10px; height:500px; } .section-1 .box:hover { padding:10px; background:rgba(255,255,255,0.4); border-radius:10px; transition:all .2s; box-shadow:0 0 10px rgba(0,0,0,0.1) } .section-1 .box img { width:100%; border-radius:10px; margin:20px 0 } .section-1 h2 { font-weight:300 } .section-1 .title { font-family:'Clicker Script'; font-size:60px; color:#6d8e55; margin-bottom:40px } .section-1 .more { margin-top:30px } .section-1 .more a { display:inline-block; border-radius:50%; background:#9aaf8b; transform:scale(1); border:3px solid transparent; transition: all 200ms; color:#43622d; font-size:12px; width:54px; height:54px; text-align:center; line-height:4 } .section-1 .more a:hover { background:#ff6001; color:#fff; transform:scale(1.3); transition: all 200ms; border:3px solid #fff; box-shadow:2px 2px 2px rgba(0,0,0,0.3) } @media(max-width:767px) { .section-1 .title { font-size:40px } .section-1 .box { height:auto } } /********************************************************** section 2 **********************************************************/ .section-2 { background:#eee2c5; padding-bottom:30px; position:relative; } .section-2 .title { color:#da474c; font-family:'Clicker Script'; font-size:60px; padding:20px 0 } .section-2 .box { background:#fdf3e3; border:1px solid #e8d8b2; border-radius:10px } .section-2 .box2 { padding:20px } .section-2 .box2 p { margin:0 0 20px 0 } .section-2 .box2 h1 { font-weight:700; color:#da474c; font-size:18px } .section-2 .box2 .label { display:block; text-transform:uppercase; font-size:12px; margin:10px 0 5px 0 } .section-2 .box2 .label sup { color:#f00 } .section-2 .box2 label { display:block; margin:15px 0 } .section-2 .box2 input[type="text"], .section-2 .box2 input[type="email"] { width:100%; border:1px solid #e8d8b2 } .section-2 .image { margin-top:20px; position:relative } .section-2 .image .text { position:absolute; top:30%; left:43%; font-family:'Clicker Script'; text-align:center } .section-2 .image .text .t1 { color:#ffe3a3; font-size:48px; line-height:1; margin:0 0 20px 0 } .section-2 .image .text .t2 { color:#fff; font-size:60px; line-height:1 } .section-2 .image img { width:100% } .section-2 .title-2 { font-size:36px; color:#da474c; font-weight:300; padding:20px 0 } .section-2 .icon { font-size:50px; color:#da474c; padding:20px 0 0 0; -webkit-animation: color_change 2s infinite alternate; -moz-animation: color_change 2s infinite alternate; -ms-animation: color_change 2s infinite alternate; -o-animation: color_change 2s infinite alternate; animation: color_change 2s infinite alternate } .section-2 .box-inner { border:1px solid #e8d8b2; padding:20px; border-radius:10px } @media(max-width:1100px) { .section-2 .image .text { top:25%; left:40% } .section-2 .image .text .t1 { font-size:40px } .section-2 .image .text .t2 { font-size:55px } } @media(max-width:850px) { .section-2 .image .text .t1 { font-size:30px } .section-2 .image .text .t2 { font-size:40px } } @media(max-width:700px) { .section-2 .image .text { position:static; background:url('../pics/10.jpg'); padding:10px } .section-2 .image img { display:none } } @media(max-width:767px) { .section-2 .title { font-size:40px } } /********************************************************** section 3 **********************************************************/ .section-3 { color:#6a382d; padding:40px 0 } .section-3 a { color:#6a382d } .section-3 .box img { width:100%; border-radius:10px; margin:20px 0 } .section-3 .box { display:block; margin-bottom:30px; padding:10px } .section-3 .box:hover { padding:10px; background:rgba(255,255,255,0.4); border-radius:10px; transition:all .2s; box-shadow:0 0 10px rgba(0,0,0,0.1) } .section-3 h2 { font-weight:300 } .section-3 .title { font-family:'Clicker Script'; font-size:60px; color:#8a2c16; margin-bottom:40px } .section-3 .more { margin-top:30px } .section-3 .more a { display:inline-block; border-radius:50%; background:#8a2c16; transform:scale(1); border:3px solid transparent; transition: all 200ms; color:#fff; font-size:12px; width:54px; height:54px; text-align:center; line-height:4 } .section-3 .more a:hover { background:#ff6001; color:#fff; transform:scale(1.3); transition: all 200ms; border:3px solid #fff; box-shadow:2px 2px 2px rgba(0,0,0,0.3) } .section-wysiwyg { padding-top:40px; padding-bottom:40px } .section-wysiwyg .title { color:#da474c; font-family:'Clicker Script'; font-size:60px } @media(max-width:767px) { .section-wysiwyg .title { font-size:40px } } /********************************************************** slick slider **********************************************************/ .slider-1 {margin-top:10px;} .slick-next, .slick-prev { text-indent:9999px; width:63px; height:63px; } .slick-next { right:0; background:-63px 0 no-repeat url('../pics/arrows.png'); } .slick-prev { left:0; background:0 0 no-repeat url('../pics/arrows.png');z-index:1; } .slick-prev:before, .slick-next:before { content:''; color:transparent } @media(max-width:767px) { .slick-prev {width:32px;} .slick-next {width:32px;background:-95px 0 no-repeat url('../pics/arrows.png'); } } /********************************************************** product box **********************************************************/ .product-box { background:#fff; border:1px solid #f7eaca; border-radius:10px; padding:10px 20px 20px 20px; margin-bottom:30px;height:530px; } .product-box.sale { border-color:#f5dadb } .product-box.sale h1 { color:#d14449 } .product-box h1 { color:#b19a66; font-size:18px; text-align:center; height:50px } .product-box .price { display:block; position:relative; text-align:center; font-size:22px; font-weight:700; color:#64532b; height:50px; margin-top:5px;} .product-box .old-price { text-decoration:line-through; font-size:13px; font-weight:400; color:#64532b } .product-box.sale .price { color:#d14449 } .product-box .price .bio { position:absolute; top:-5px; left:0 } .product-box .image { display:block; text-align:center;height:230px; } .product-box .image img { max-width:100%; max-height:100%;display:block; margin:0 auto; transform:scale(1); transition:all .3s; border:1px solid #fff } .product-box .description { font-size:14px; color:#64532b;height:50px; display:block } .product-box .stock { color:#b19a66; font-size:12px; margin:0 0 10px 0; display:block; text-align:center; height:40px;} .product-box .stock span { font-weight:700 } .product-box .amount { border:1px solid #e8d8b2; width:40px; vertical-align:middle; margin:0 5px 0 0 } .product-box .cart { padding:0; text-align:center;} .product-box:hover { box-shadow:0 0 10px #dfccae } .product-box:hover .image img { transform:scale(1.1); transition:all .3s } @media(max-width:400px) { .product-box .image { height:160px;} .cart button.add-to-cart {padding:5px;} } @media(min-width:481px) { .product-box .image { height:190px;} .cart button.add-to-cart {padding:5px;} } @media(min-width:901px) { .product-box .image { height:170px;} .product-box .description { height:90px;} .cart button.add-to-cart {padding:5px;} } @media(min-width:1201px) { .product-box .image { height:190px;} } .product-page-left { background:#f6e7cf; padding:20px } .product-page-left h1 { font-size:24px; color:#b19a66; font-weight:300; text-transform:uppercase } .product-page-left h2 { font-size:14px; color:#64532b; font-weight:400; margin:0 0 20px 0 } .product-page-left .big-image { position:relative; background:#fff; border:1px solid #e8d8b2; border-radius:10px; text-align:center; padding:10px; display:block } .product-page-left .big-image img { max-width:100% } .product-page-left .zoom { color:#b19a66; position:absolute; top:15px; right:15px; font-size:30px; line-height:1 } .product-page-left .tabs-wrapper { background:#f7f0e4; border-radius:10px; border:1px solid #e8d8b2; margin-top:30px } .product-page-left .tabs { width:100%; float:left } .product-page-left .tabs li { float:left; list-style:none; color:#b8a26f; text-transform:uppercase; font-size:14px; text-align:center; border-bottom:1px solid #e8d8b2; border-right:1px solid #e8d8b2; padding:20px; width:33.3%; cursor:pointer } .product-page-left .tabs li:last-child { border-right:0 } .product-page-left .tabs li.active { border-bottom:0; color:#64532b } .product-page-left .tab { padding:20px } .product-page-left .tab2, .product-page-left .tab3 { display:none } .product-page-left .tab1 p { margin:0 0 20px 0 } .product-page-left .properties { width:100% } .product-page-left .properties th, .product-page-left .properties td {text-align:left; border-bottom:1px solid #e8d8b2 } .product-page-left .properties th { color:#b19a66; font-weight:400 } .product-page-left .properties td { padding:10px } .product-page-left .reviews li { margin:0 0 20px 0; padding:0 0 20px 0; border-bottom:1px solid #e8d8b2; list-style:none } .product-page-left .reviews li:last-child { border:0; margin:0; padding:0 } .product-page-left .reviews .user { font-weight:700; margin-bottom:5px } .product-page-left .reviews .answer { color:#b19a66; margin:20px 0 0 50px } .product-page-left .thumbnails li { background:#fff; border:1px solid #e8d8b2; list-style:none; border-radius:10px; text-align:center; margin-bottom:20px; overflow:hidden; } .product-page-left .thumbnails li:last-child { margin:0 } .product-page-left .thumbnails img { height:90px; padding:10px } .sale .product-page-left h1 { color:#d14449; } @media(max-width:767px) { .add-to-cart-box .price {padding:0;} .product-page-left .tabs li { float:none; width:100%} .product-page-left .tabs li.active { border-bottom:1px solid #e8d8b2; background:#64532b;color:#fff } .product-page-left .thumbnails img { max-height:90px; padding:10px; } } .add-to-cart-box { background:#f6e7cf; padding:20px } .add-to-cart-box .product-name { color:#64532b; font-size:24px; font-weight:300; text-transform:uppercase } .add-to-cart-box .product-name.sale { color:#d14449; } .add-to-cart-box .stock-info { color:#b19a66; font-size:24px; font-size:12px; margin:10px 0 20px 0 } .add-to-cart-box input[type="text"] { border:1px solid #e8d8b2; width:100% } .add-to-cart-box .price { font-size:22px; font-weight:700; padding-right:0; text-align:center; } .add-to-cart-box .price .old-price { text-decoration:line-through; font-weight:400; color:#64532b } .add-to-cart-box .price.sale { color:#d14449 } .add-to-cart-box .gomb {text-align:center; } .fixed {position:fixed;top:70px;background:#f7f1e4;} @media(max-width:767px) { .add-to-cart-box .amount {max-width:100px;margin:0 auto 10px;} .add-to-cart-box .amount input {text-align:center;} } .cart-summary-box { margin-top:30px } .cart-summary-box i { font-size:32px; } .cart-summary-box .top { padding:20px } .cart-summary-box hr { border-top:1px solid #e8d8b2; margin:5px 0 } .cart-summary-box .title { font-size:18px; font-weight:300; text-transform:uppercase } .cart-summary-box .details { font-size:12px; font-weight:300; color:#084ca0 } .cart-summary-box .checkout { text-align:right } .cart-summary-box .checkout a { font-size:30px } .cart-summary-box .total { background:#f6e7cf; padding:20px } .cart-summary-box .sum a { font-size:20px; font-weight:700; text-align:right; color:#64532b; } .cart-summary-box .sum a:hover { color:#3f3412; } .cart-summary-box .gift { font-size:14px; font-weight:300; text-align:right } /********************************************************** featured products **********************************************************/ .featured-products { padding:20px 0 } .featured-products .title { color:#f36207; font-size:60px; font-family:'Clicker Script', cursive; margin:30px 0 } .featured-products .filter { text-align:center; margin:0 0 30px 0 } .featured-products .filter .button { display:inline-block; background:#fde7c2; color:#f36207; font-size:22px; padding:10px 20px; border-radius:10px; margin:10px 10px 20px 10px; cursor:pointer } .featured-products .filter .button:hover, .featured-products .filter .button.active { background:#f46f27; color:#fff } @media(max-width:767px) { .featured-products .title { font-size:40px } } /********************************************************** categories **********************************************************/ .categories li { list-style:none; margin:0 0 3px 0 } .categories .title { font-size:24px; color:#b19a66; font-weight:300; text-transform:uppercase; margin:0 0 10px 0 } .categories>li>a { text-transform:uppercase; display:block; background:#e8d9b6; font-size:18px; font-weight:700; padding:15px 10px; border-bottom:1px solid #b19a66 } .categories a { color:#b19a66 } .categories .children a:hover, .categories a:hover { background:#da474c; color:#fff } .categories .children { margin:3px 0 0 30px } .categories .children a { background:#f6e7cf; display:block; padding:5px } .categories.special-offer>li>a { background:#da474c; color:#f7f1e4; border-bottom:1px solid #953336 } .categories a.active { background:#b19a66; color:#e8d9b6 } .categories a.red { background:#da474c; color:#fff } /********************************************************** category filters **********************************************************/ .category-filters .title { font-size:24px; color:#b19a66; font-weight:300; text-transform:uppercase; margin:0 0 10px 0; background:transparent; padding:0 } .category-filters .subtitle { font-size:18px; font-weight:700 } .category-filters li { list-style:none; margin:0 0 3px 0; background:#f6e7cf; margin:0; padding:5px 10px; color:#b19a66 } .category-filters label { display:block } /********************************************************** breadcrumb **********************************************************/ .breadcrumb { margin:20px 0 } .breadcrumb li { border:1px solid #e4ddcd; border-left:0; float:left; list-style:none } .breadcrumb li:first-child { border-left:1px solid #e4ddcd } .breadcrumb li a { display:block; padding:5px 10px; height:32px; } .breadcrumb li a:hover { background:#e8d9b6; color:#b19a66 } /********************************************************** category thumbnails **********************************************************/ .category-thumbnails { background:#f6e7cf; padding:20px } .category-thumbnails .title { font-family:'Clicker Script'; font-size:60px; color:#b19a66; margin:20px 0 } .category-thumbnail-box { display:block; background:#fff; border-radius:10px; text-align:center; color:#b19a66; text-transform:uppercase; font-weight:700; padding:10px; margin-bottom:30px } .category-thumbnail-box .image { margin-top:10px } .category-thumbnail-box .image img { max-width:100%; display:block; margin:0 auto } .category-thumbnails .special-offer .title { color:#da474c } .category-thumbnails .special-offer .description { margin:0 50px 30px 50px } @media(max-width:767px) { .category-thumbnails .title { font-size:40px } } /********************************************************** login **********************************************************/ .login { background:#f6e7cf; padding:20px } .login .box { background:#f7f1e4; border:1px solid #e8d8b2; padding:20px } .login .title { color:#b19a66; font-size:24px; font-weight:300; margin:0 0 30px 0; border-bottom:1px solid #e8d8b2; padding:0 0 5px 0 } .login .box-title { font-size:16px; margin:0 0 20px 0 } .login .box-title.reg { color:#c0ab7f } .login label { color:#b19a66; font-size:12px; display:block; margin:10px 0 5px 0 } .login sup { color:#ff0018 } .login input[type="email"], .login input[type="password"] { border:1px solid #e8d8b2; width:100% } .login .p1 { margin:20px 0 } .login .reg-box { color:#b19a66 } .login .reg-box .bold { color:#64532b; font-weight:700; margin:0 0 20px 0 } .login .error { text-align:center; color:red; font-size:14px } .login .forgotten { cursor:pointer; text-decoration:underline; } /********************************************************** news page **********************************************************/ .news-left { background:#e8efd0; padding:30px; color:#38401d } .news-left ul,.news-left ol { margin:20px 0 20px 30px } .news-left li { line-height:1.8 } .news-left h1 { font-family:'Clicker Script'; color:#6d8e55; font-size:60px; font-weight:normal; } .news-left h2 { font-size:18px; margin:40px 0 10px 0 } .news-left a { text-decoration:underline;} /********************************************************** recipe page **********************************************************/ .recipe-left { padding:0 30px; color:#6a382d } .recipe-left ul, .recipe-left ol{ margin:20px 0 20px 30px } .recipe-left li { line-height:1.8 } .recipe-left h1 { font-family:'Clicker Script'; color:#8a2c16; font-size:60px; font-weight:normal; margin:0 0 20px 0 } .recipe-left h2 { font-size:18px; margin:40px 0 10px 0 } .recipe-left p { line-height:1.7 } /********************************************************** static page **********************************************************/ .static-page { background:#f6e7cf; padding:20px } .static-page .cim { text-align:center; margin-bottom:30px; color: #6d8e55; font-family: "Clicker Script"; font-size: 60px; font-weight: normal; } .static-page h1 { font-size:24px; font-weight:300; margin:0 0 20px 0; border-bottom:1px solid #e8d8b2; text-transform:uppercase } .static-page h2 { font-size:18px; margin:40px 0 20px 0 } .static-page p { margin:0 0 20px 0; line-height:1.6 } .static-page ol, .static-page ul { margin:20px 0 0 30px } .static-page li { line-height:1.6; margin:0 0 10px 0 } /********************************************************** form messages **********************************************************/ .message { padding:5px; color:#fff; font-size:14px; margin:10px 0 } .message.error { background:#ff0000; opacity:0;display:none; } .message.error2 { background:#ff0000; opacity:0;display:none; } .message.success { background:#3f7a0f; opacity:0;display:none; } /********************************************************** contact form **********************************************************/ .contact-form { background:#f7f1e4; padding:20px; border:1px solid #e8d8b2} .contact-form #kapcsolat {border-bottom:none} .contact-form label { font-size:12px; text-transform:uppercase; display:block; color:#b19a66; margin:15px 0 5px 0 } .contact-form label sup { color:#f00 } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { border:1px solid #e8d8b2; width:100% } .contact-form textarea { height:175px } .contact-form button { margin-top:20px } .product-list { background:#f6e7cf; padding:20px } .product-list .title { font-size:60px; font-family:'Clicker Script'; color:#da474c } .product-list .product-list-filter { border-top:1px solid #ddcaac; border-bottom:1px solid #ddcaac; padding:10px 0; color:#b19a66; vertical-align:middle; margin:0 0 30px 0 } .product-list .product-list-filter .tag { border:1px solid #ddcaac; color:#b19a66; font-size:12px; display:inline-block; padding:5px 8px; margin-left:10px } .product-list .product-list-filter .tag span { color:#f00; margin-left:5px; cursor:pointer } .product-list .product-list-filter .order { text-align:right } .product-list .product-list-filter .order select { background:#f7f1e4; border:1px solid #ddcaac } /********************************************************** cart page **********************************************************/ .cart-page { padding:20px } .cart-page h1 { color:#64532b; text-transform:uppercase; font-size:24px; font-weight:700; margin:0 } .cart-page ul {list-style-type:none;} .cart-page .continue-shopping { text-align:right; margin-top:5px } .cart-page .products { width:100% } .cart-page .products th { color:#b19a66; font-weight:400; text-transform:uppercase } .cart-page .products th, .cart-page .products td { padding:5px; border:1px solid #e8d8b2; background:#f7f1e4 } .cart-page .products .icon-cancel { color:#ff0000; font-size:25px } .cart-page .products .image { text-align:center } .cart-page .products .image img { border:1px solid #e8d8b2;height:50px; } .cart-page .products .price { text-align:right } .cart-page .products .price.sum { font-weight:700 } .cart-page .products .remove { text-align:center; cursor:pointer; } .cart-page .products .name { text-align:left } .cart-page .products .name span {font-size:13px; color:red;} .cart-page .products .amount { text-align:left } .cart-page .products .amount input[type="text"] { border:1px solid #e8d8b2; width:40px; text-align:center } .cart-page .products .amount span { color:#b19a66; font-size:20px } .cart-page .products .icon-refresh { cursor:pointer; } .cart-page .delivery-options { background:#f7f1e4; border:1px solid #e8d8b2; padding:20px; margin:0 0 30px 0 } .cart-page .delivery-options .title { color:#64532b; font-size:18px; font-weight:700 } .cart-page .delivery-options .title .kg {font-size:13px;} .cart-page .delivery-options .more-information { font-size:12px; font-weight:300; margin-bottom:20px } .cart-page .delivery-options li { list-style:none; margin:0 0 10px 0 } .cart-page .delivery-options .icon-gift { float:right; color:#da474c; font-size:35px; line-height:1 } .cart-page .delivery-options .sum { font-size:18px; font-weight:700 } .cart-page .delivery-options .sum span { float:right } .cart-page .delivery-options .text { font-size:14px; width:95% } .cart-page .delivery-options .text .info { color:#b19a66; display:block } .cart-page .delivery-options .text .price { float:right } .cart-page .delivery-options ul { width:100% } .cart-page .delivery-options label { width:100%; display:block } .cart-page .masol { font-size:12px;cursor:pointer } .cart-page .emailhiba { color: red; display: none; font-size: 14px; padding: 3px 10px; } .cart-page .feltetel { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none !important; color: #ff0000; display: none; margin: 0 0 20px 30px; } .cart-page .payment-error { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none !important; color: #ff0000; display: none; text-align:center; } .cart-page label.error { display: none !important } .cart-page .error { border: 1px solid #ff0000!important; } #popupaszf {padding:20px;} #popupaszf h2 {margin:10px 0;} #popupaszf ol, #popupaszf ul {padding:20px;} @media(max-width:500px) { .cart-page .products { font-size:13px } .cart-page .products th, .cart-page .products td { padding:2px } .cart-page .products .icon-cancel { font-size:20px } } .cart-page .customer-data { background:#f7f1e4; border:1px solid #e8d8b2; padding:20px } .cart-page .customer-data label { display:block; font-size:12px; color:#b19a66; margin:20px 0 5px 0 } .cart-page .customer-data textarea, .cart-page .customer-data input { width:100%; border:1px solid #e8d8b2 } .cart-page .customer-data textarea { height:106px } .cart-page .customer-data .title-wrapper { height:50px } .cart-page .customer-data .title { font-size:18px; font-weight:700 } .cart-page .payment-method { border:1px solid #e8d8b2; padding:20px; margin-top:30px } .cart-page .payment-method .title { font-size:18px; font-weight:700; text-align:center } .cart-page .payment-method .subtitle { font-size:16px; text-align:center; margin:0 0 20px 0 } .cart-page .payment-method .methods { text-align:center } .cart-page .payment-method .methods div { display:inline-block; border:1px solid #e8d8b2; padding:20px; margin:20px;} .cart-page .payment-method .methods div.active { background:#e8d8b2; border:1px solid #b19a66 } @media(max-width:767px) { .cart-page .payment-method .methods div { display:block; margin:20px 0 } } .cart-page .regulation { text-align:center; margin:40px 0 } .cart-page .regulation label { display:block; margin:5px 0 } .cart-page .regulation .checkboxes { display:inline-block; text-align:left } .cart-page .submit { text-align:center; color:#50693f; margin:40px 0; font-size:13px } .cart-page .submit a{ background:#9aaf8b; color:#50693f; text-transform:uppercase; font-weight:700; text-align:center; font-size:30px; padding:10px 30px; border-radius:10px; border:1px solid #556e43; box-shadow:2px 2px 2px rgba(0,0,0,0.2); margin:0 0 10px 0; display:inline-block;cursor:pointer; } .cart-page .submit a:hover { background:#50693f; color:#fff } /********************************************************** velemeny **********************************************************/ #content .velemeny {padding:10px;} #content .velemeny a {text-align:center;display:block;} #content .velemeny a img{height:100px;margin:10px 0;} #content .velemeny p {text-align:center;margin:10px 0;} #content .velemeny input[type=text] {border:1px solid #e8d8b2;width:100%;} #content .velemeny input[type=submit] {background: #9aaf8b none repeat scroll 0 0;border: 1px solid #556e43;border-radius: 10px;box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);color: #50693f;font-size: 16px;font-weight: 700;margin: 0 0 10px;padding: 5px 10px;text-align: center;text-transform: uppercase;} #content .velemeny input[type=submit]:hover {color:#fff;background:#50693f} /********************************************************** pay fizetes **********************************************************/ .pay form { border-bottom:none!important; text-align:center; margin:20px auto 0;} .pay .submit { background:#9aaf8b; color:#50693f; text-transform:uppercase; font-weight:700; text-align:center; font-size:30px; padding:10px 30px; border-radius:10px; border:1px solid #556e43; box-shadow:2px 2px 2px rgba(0,0,0,0.2); margin:0 0 10px 0; display:inline-block;cursor:pointer; } .pay .submit:hover { background:#50693f; color:#fff } .pay .figyelem {text-align:center; color:#50693f; margin:10px 0; font-size:13px } /********************************************************** radio **********************************************************/ .radio { display:none } .radio + label { margin-right:30px; cursor:pointer } .radio + label .outer { display:inline-block; width:20px; height:20px; border:1px solid #b9a475; background:#fff; box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); vertical-align:middle; } .radio + label .outer { border-radius:50% } .radio:checked + label .outer span { width:12px; height:12px; display:block; border-radius:6px; background:#b9a475; margin:3px 0 0 3px;} .radio:checked + label { background:none; } .payment-method .radio:checked + label { background:none; } .radio + label .text { display:inline-block; padding-left:10px; } .radio + label .outer2 { display:inline-block; width:18px; height:18px; border:1px solid #b9a475; background:#fff; box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); vertical-align:middle; margin-left:3px;} .radio + label .outer2 { border-radius:5% } .radio:checked + label .outer2 span { width:12px; height:12px; display:block; border-radius:0px; background:#b9a475; margin:2px 0 0 2px; } /********************************************************** add to cart button **********************************************************/ button.add-to-cart { background:#e8d8b2; color:#b19a66; padding:5px 15px; font-size:12px; text-transform:uppercase; border-radius:10px; cursor:pointer } button.add-to-cart .icon-cart { font-size:26px; line-height:1; vertical-align:middle; margin:0 5px 0 0 } button.add-to-cart:hover { background:#b19a66; color:#e8d8b2 } button.add-to-cart:hover .icon-cart { color:#e8d8b2 } /********************************************************** adatok **********************************************************/ #adatok {padding:20px } #adatok .adatok div.cim{padding:0 0 5px 10px;border-bottom: 1px dashed #e8d8b2;} #adatok .adatok .cim h1{font-size:24px;color:#64532b;font-weight:bold;} #adatok .adatok .cim span{font-size:20px;padding:0px 20px;cursor:pointer;} @media(max-width:600px) { #adatok .adatok .cim span{display:block;} } #adatok .adatok .cim span:hover{text-decoration:underline;} #adatok .adatok .cim .aktiv{font-weight:bold;text-decoration:underline;} #adatok .adatok .szemelyes .fejlec {font-size:18px;color:#64532b;font-weight:bold;padding-left:10px;margin:10px 0 0 0;} #adatok .adatok .szemelyes .post {text-align:center;color:#ff0000;height:20px;} #adatok .adatok .szemelyes .keret {border:1px solid #e8d8b2;padding:0 10px 10px 10px;} #adatok .adatok .szemelyes .keret h1{font-size:18px;font-weight:bold;color:#64532b;margin:15px 0 10px 0;} #adatok .adatok .szemelyes .keret .bal{float:left;width:320px;} #adatok .adatok .szemelyes .keret .bal .bal1{height:170px;} #adatok .adatok .szemelyes .keret .jobb .jobb1{height:170px;} #adatok .adatok .szemelyes .keret .jobb{float:left;width:320px;margin-left:55px;} #adatok .adatok .szemelyes .keret input {border: 1px solid #e8d8b2;border-radius: 3px;color: #64532b;height: 31px;margin: 5px 0;padding: 0 5px;width: 80%;} #adatok .adatok .szemelyes .keret input[type="checkbox"] {display:inline;width:20px;height:20px;position:relative;top:6px;} #adatok .adatok .szemelyes .keret .mentes{display:inline-block;text-align:center;padding:20px 0;width:100%;} #adatok .adatok .szemelyes .keret input[type="submit"]{ background:#9aaf8b; color:#50693f; text-transform:uppercase; font-weight:700; height:auto; width:auto; text-align:center; font-size:30px; padding:10px 30px; border-radius:10px; border:1px solid #556e43; box-shadow:2px 2px 2px rgba(0,0,0,0.2); margin:0 0 10px 0; display:inline-block;cursor:pointer; } #adatok .adatok .szemelyes .keret input[type="submit"]:hover { background:#50693f; color:#fff } #adatok .adatok .szemelyes .keret .jobb #postairszam {width:80px;} #adatok .adatok .szemelyes .keret .bal #szamlairszam {width:80px;} #adatok .adatok .szemelyes .keret .mentes img{cursor:pointer;} #adatok .adatok .szemelyes .keret .torles{display:block;text-align:center;padding:20px 0 10px 0;} #adatok .adatok .rendelesek .fejlec {font-size:18px;color:#64532b;font-weight:bold;padding-left:10px;margin:10px 0 10px 0;} #adatok .adatok .rendelesek .box {border:1px solid #e8d8b2;margin:20px 0;} #adatok .adatok .rendelesek .box i { font-size:32px;position:relative; margin-left:10px;} #adatok .adatok .rendelesek .box .azonosito {background-color: #9cba7b;} #adatok .adatok .rendelesek .box .azonosito:hover {background-color: #596e47;} #adatok .adatok .rendelesek .box .azonosito .row { cursor:pointer;} #adatok .adatok .rendelesek .box .azonosito .row .right {text-align:right;} #adatok .adatok .rendelesek .box .azonosito p{color:#fff ;font-size: 18px;font-weight: bold;padding:0 10px;height:50px;line-height:50px;} #adatok .adatok .rendelesek .box .tabla1 {padding:10px;display:table;width:100%;} #adatok .adatok .rendelesek .box .tabla1 .row {display:table-row;height:25px;} #adatok .adatok .rendelesek .box .tabla1 .row p{display:table-cell;text-align:center;font-size:16px;} #adatok .adatok .rendelesek .box .tabla1 .row p:first-child{text-align:left;} #adatok .adatok .rendelesek .box .tabla1 .row p a{text-decoration:underline;} #adatok .adatok .rendelesek .osszesito {padding:10px;} #adatok .adatok .rendelesek .osszesito h1{font-size:18px;font-weight:bold;color:#64532b;} #adatok .adatok .rendelesek .osszesito h2{font-size:16px;color:#64532b;margin-top:30px;} #adatok .adatok .rendelesek .osszesito p{color:#64532b;font-size:16px;} #adatok .adatok .rendelesek .osszesito table td {padding:2px 0px 2px 5px;} #adatok .adatok .rendelesek .osszesito table td:last-child { text-align:right; } #adatok .adatok .rendelesek .osszesito .bal{float:left;width:320px;padding-right:20px;} #adatok .adatok .rendelesek .osszesito .jobb{float:left;width:330px;margin-left:20px;} #adatok .adatok .rendelesek .osszesito .osszesen p{font-weight:bold;} #adatok .adatok .rendelesek .osszesito .bal div {clear:both;} #adatok .adatok .rendelesek .osszesito .jobb div {clear:both;} #adatok .adatok .rendelesek .osszesito div p:nth-child(1) {float:left;} #adatok .adatok .rendelesek .osszesito .bal div p:nth-child(2) {float:right;} #adatok .adatok .rendelesek .osszesito .jobb div p:nth-child(2) {float:left;margin-left:30px;} #adatok .adatok .rendelesek .status {text-align:center;margin:20px 0;} #adatok .adatok .rendelesek .status p{font-size:16px;font-weight:bold;color:#64532b;} #adatok .adatok .rendelesek .status h3{font-size:18px;font-weight:bold;color:#64532b;} /********************************************************** mobile menu **********************************************************/ @media(min-width:768px){ .toggle-menu { display:none } } .toggle-menu { text-align:right } .toggle-menu div { cursor:pointer; display:inline-block; padding:10px; background:#c5b075; border-radius:2px } .icon-bar { background:#fff; display:block; width:26px; height:3px } .icon-bar + .icon-bar { margin-top: 6px } .mobile-menu {padding-bottom:90px;} .mobile-menu ul li { color:#fff; text-decoration:none; display:block; padding:5px 10px; font-weight:400; border-bottom:1px solid rgba(255,255,255,0.2) } .mobile-menu .main { font-size:18px; cursor:pointer;padding:10px 0; color:#fff; displaY:block; text-transform:uppercase; } .mobile-menu .al {display:none;} .mobile-menu .al * { color:#fff!important;} .mobile-menu .al .go { color:#fff; display:block; padding:8px 5px; display:block;} .mobile-menu .al .go i { display:inline;margin-right:10px;top:6px;} .mobile-menu .al .go h2 { margin-left:15px; } .mobile-menu .al .go span { margin-left:15px; display:block;} .mobile-menu .al h1 { font-size:16px; text-align:left; } .mobile-menu .al h2 { font-size:16px; text-align:left; margin:0 0 0 10px; padding:0;} .mobile-menu .al h3 { text-align:center;margin:20px auto;} .mobile-menu .al .title1 { font-size:18px;margin:20px 0 10px 0;} .mobile-menu .al .title2 { font-size:14px;} .mobile-menu .al .gomb { line-height:normal; padding:5px 10px 0 10px; height:46px;} .mobile-menu .al .info label { margin:0;} .mobile-menu .al .box { text-align:left; } .mobile-menu .active {display:block!important;} .mobile-menu .icon-angle-double-right { position:absolute;} /********************************************************** Slidebars 0.10.3 (http://plugins.adchsm.me/slidebars/) **********************************************************/ #sb-site,.sb-site-container,.sb-slidebar,body,html{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} body,html{width:100%;overflow-x:hidden} html{height:100%} body{min-height:100%;height:auto;position:relative} html.sb-scroll-lock.sb-active:not(.sb-static){overflow:hidden} #sb-site,.sb-site-container{width:100%;min-height:100vh;position:relative;z-index:1;background-color:#fff} #sb-site:after,#sb-site:before,.sb-site-container:after,.sb-site-container:before{content:' ';display:table;clear:both} .sb-slidebar{height:100%;overflow-y:auto;position:fixed;top:0;z-index:0;display:none;background-color:#3a5065} .sb-slidebar,.sb-slidebar *{-webkit-transform:translateZ(0px)} .sb-left{left:0} .sb-right{right:0}.sb-slidebar.sb-static,html.sb-static .sb-slidebar{position:absolute} .sb-slidebar.sb-active{display:block}.sb-style-overlay{z-index:9999} .sb-momentum-scrolling{-webkit-overflow-scrolling:touch} .sb-slidebar{width:30%;top:90px;} .sb-width-thin{width:15%}.sb-width-wide{width:45%} @media (max-width:480px){.sb-slidebar{width:80%}.sb-width-thin{width:55%}.sb-width-wide{width:85%}} @media (min-width:481px){.sb-slidebar{width:55%}.sb-width-thin{width:40%}.sb-width-wide{width:70%}} @media (min-width:768px){.sb-slidebar{width:40%}.sb-width-thin{width:25%}.sb-width-wide{width:55%}#sb-site {transform: translate(0%)!important;}} @media (min-width:992px){.sb-slidebar{width:30%}.sb-width-thin{width:15%}.sb-width-wide{width:45%}} @media (min-width:1200px){.sb-slidebar{width:20%}.sb-width-thin{width:5%}.sb-width-wide{width:35%}} #sb-site,.sb-site-container,.sb-slide,.sb-slidebar{-webkit-transform:translate(0px);-moz-transform:translate(0px);-o-transform:translate(0px);transform:translate(0px);-webkit-transition:-webkit-transform 400ms ease;-moz-transition:-moz-transform 400ms ease;-o-transition:-o-transform 400ms ease;transition:transform 400ms ease;-webkit-transition-property:-webkit-transform,left,right;-webkit-backface-visibility:hidden} .sb-hide{display:none} /********************************************************** fancyBox v2.1.5 **********************************************************/ .fancybox-image,.fancybox-inner,.fancybox-nav,.fancybox-nav span,.fancybox-outer,.fancybox-skin,.fancybox-tmp,.fancybox-wrap,.fancybox-wrap iframe,.fancybox-wrap object{padding:0;margin:0;border:0;outline:0;vertical-align:top}.fancybox-wrap{position:absolute;top:0;left:0;z-index:8020}.fancybox-skin{position:relative;background:#f9f9f9;color:#444;text-shadow:none;}.fancybox-opened{z-index:8030}.fancybox-opened .fancybox-skin{-webkit-box-shadow:0 10px 25px rgba(0,0,0,.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,.5);box-shadow:0 10px 25px rgba(0,0,0,.5)}.fancybox-inner,.fancybox-outer{position:relative}.fancybox-inner{overflow:hidden}.fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch}.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:15px;white-space:nowrap}.fancybox-iframe,.fancybox-image{display:block;width:100%;height:100%}.fancybox-image{max-width:100%;max-height:100%}#fancybox-loading,.fancybox-close,.fancybox-next span,.fancybox-prev span{background-image:url(../pics/fancybox_sprite.png)}#fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-22px;margin-left:-22px;background-position:0 -108px;opacity:.8;cursor:pointer;z-index:8060}#fancybox-loading div{width:44px;height:44px;background:url(../pics/fancybox_loading.gif) center center no-repeat}.fancybox-close{position:absolute;top:-18px;right:-18px;width:36px;height:36px;cursor:pointer;z-index:8040}.fancybox-nav{position:absolute;top:0;width:40%;height:100%;cursor:pointer;text-decoration:none;background:url(../pics/blank.gif);-webkit-tap-highlight-color:transparent;z-index:8040}.fancybox-prev{left:0}.fancybox-next{right:0}.fancybox-nav span{position:absolute;top:50%;width:36px;height:34px;margin-top:-18px;cursor:pointer;z-index:8040;visibility:hidden}.fancybox-prev span{left:10px;background-position:0 -36px}.fancybox-next span{right:10px;background-position:0 -72px}.fancybox-nav:hover span{visibility:visible}.fancybox-tmp{position:absolute;top:-99999px;left:-99999px;visibility:hidden;max-width:99999px;max-height:99999px;overflow:visible!important}.fancybox-lock{overflow:hidden!important;width:auto}.fancybox-lock body{overflow:hidden!important}.fancybox-lock-test{overflow-y:hidden!important}.fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index:8010;background:url(../pics/fancybox_overlay.png)}.fancybox-overlay-fixed{position:fixed;bottom:0;right:0}.fancybox-lock .fancybox-overlay{overflow:auto;overflow-y:scroll}.fancybox-title{visibility:hidden;font:400 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:8050}.fancybox-opened .fancybox-title{visibility:visible}.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index:8050;text-align:center}.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;padding:2px 20px;background:0 0;background:rgba(0,0,0,.8);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 2px #222;color:#FFF;font-weight:700;line-height:24px;white-space:nowrap}.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}.fancybox-title-inside-wrap{padding-top:10px}.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;padding:10px;background:#000;background:rgba(0,0,0,.8)}@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5){#fancybox-loading,.fancybox-close,.fancybox-next span,.fancybox-prev span{background-image:url(../pics/fancybox_sprite@2x.png);background-size:44px 152px}#fancybox-loading div{background-image:url(../pics/fancybox_loading@2x.gif);background-size:24px 24px}}#fancybox-buttons{position:fixed;left:0;width:100%;z-index:8050}#fancybox-buttons.top{top:10px}#fancybox-buttons.bottom{bottom:10px}#fancybox-buttons ul{display:block;width:166px;height:30px;margin:0 auto;padding:0;list-style:none;border:1px solid #111;border-radius:3px;-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);background:#323232;background:-moz-linear-gradient(top,#444 0,#343434 50%,#292929 50%,#333 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#444),color-stop(50%,#343434),color-stop(50%,#292929),color-stop(100%,#333));background:-webkit-linear-gradient(top,#444 0,#343434 50%,#292929 50%,#333 100%);background:-o-linear-gradient(top,#444 0,#343434 50%,#292929 50%,#333 100%);background:-ms-linear-gradient(top,#444 0,#343434 50%,#292929 50%,#333 100%);background:linear-gradient(top,#444 0,#343434 50%,#292929 50%,#333 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0)}#fancybox-buttons ul li{float:left;margin:0;padding:0}#fancybox-buttons a{display:block;width:30px;height:30px;text-indent:-9999px;background-color:transparent;background-image:url(../pics/fancybox_buttons.png);background-repeat:no-repeat;outline:0;opacity:.8}#fancybox-buttons a:hover{opacity:1}#fancybox-buttons a.btnPrev{background-position:5px 0}#fancybox-buttons a.btnNext{background-position:-33px 0;border-right:1px solid #3e3e3e}#fancybox-buttons a.btnPlay{background-position:0 -30px}#fancybox-buttons a.btnPlayOn{background-position:-30px -30px}#fancybox-buttons a.btnToggle{background-position:3px -60px;border-left:1px solid #111;border-right:1px solid #3e3e3e;width:35px}#fancybox-buttons a.btnToggleOn{background-position:-27px -60px}#fancybox-buttons a.btnClose{border-left:1px solid #111;width:35px;background-position:-56px 0}#fancybox-buttons a.btnDisabled{opacity:.4;cursor:default}#fancybox-thumbs{position:fixed;left:0;width:100%;overflow:hidden;z-index:8050}#fancybox-thumbs.bottom{bottom:2px}#fancybox-thumbs.top{top:2px}#fancybox-thumbs ul{position:relative;list-style:none;margin:0;padding:0}#fancybox-thumbs ul li{float:left;padding:1px;opacity:.5}#fancybox-thumbs ul li.active{opacity:.75;padding:0;border:1px solid #fff}#fancybox-thumbs ul li:hover{opacity:1}#fancybox-thumbs ul li a{display:block;position:relative;overflow:hidden;border:1px solid #222;background:#111;outline:0}#fancybox-thumbs ul li img{display:block;position:relative;border:0;padding:0;max-width:none} livezilla_tracking { display:none; } #adminpage .segedlet { margin:auto; text-align:center;max-width:800px;} #adminpage .segedlet .le { cursor:pointer; display:inline; color:#337ab7; } #adminpage .segedlet .le:hover {color:#23527c; text-decoration:underline;} #adminpage .segedlet .tartalom {display:none; border:1px solid red; padding:20px; margin:10px;} #adminpage .segedlet .tartalom p { font-size:13 px; text-align:left;} #adminpage .segedlet .tartalom .bezar { text-align:right; font-size:11px; text-decoration:underline; margin:20px 0; cursor:pointer;} .animated { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /********************************************************** SPEEDPC 2026 FOOLDAL REDESIGN A szabalyok a .spc-modern fooldalra vannak korlatozva. **********************************************************/ :root{--spc-navy:#0b2b4c;--spc-navy2:#123a5b;--spc-blue:#1778f2;--spc-green:#13a85b;--spc-pink:#ed2d70;--spc-orange:#ff7a1a;--spc-text:#0d2b4a;--spc-muted:#617487;--spc-line:#dce5ed;} #sidebarleft{top:0;background:#0c2d4d;} #sidebartop{top:0;background:#123a5b;} #sidebarleft .mainmenu.active,#sidebarleft .mainmenu.actived,#sidebarleft .home.active,#sidebarleft .home.actived{background:#1677ea;} #sidebarleft .mainmenu:hover,#sidebarleft .home:hover{background:#15496f;text-decoration:none;} #sidebartop .bombaar{background:#fff;} #sidebartop .search-box input[type="text"]{background:#7695b2;border-color:#09243e;} #home.spc-modern{font-family:var(--spc-font-ui);color:var(--spc-text);background:#fff;overflow:hidden;} #home.spc-modern *{box-sizing:border-box;} #home.spc-modern a{text-decoration:none;} #home.spc-modern .spc-home-shell{width:min(1320px,calc(100% - 64px));margin:0 auto;} #home.spc-modern .spc-kicker{font-size:12px;line-height:1.2;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--spc-blue);margin:0 0 16px;} #home.spc-modern h1,#home.spc-modern h2,#home.spc-modern h3,#home.spc-modern p{margin-top:0;} #home.spc-modern .spc-hero{position:relative;min-height:560px;background:#f7fafc;border-bottom:1px solid var(--spc-line);overflow:hidden;} #home.spc-modern .spc-hero-image{position:absolute;inset:0 0 0 47%;background-image:url('/images/domainregisztracio-hero.jpg');background-size:cover;background-position:center;} #home.spc-modern .spc-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#fff 42%,rgba(255,255,255,.93) 51%,rgba(255,255,255,.25) 66%,rgba(255,255,255,0) 100%);pointer-events:none;} #home.spc-modern .spc-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(420px,.92fr) minmax(330px,.68fr) minmax(150px,.4fr);align-items:center;gap:38px;min-height:560px;padding:64px 0;} #home.spc-modern .spc-hero-copy{grid-column:1;} #home.spc-modern .spc-hero h1{font-size:clamp(46px,4.5vw,72px);line-height:.98;letter-spacing:-.045em;font-weight:800;color:#092742;margin:0 0 24px;max-width:650px;} #home.spc-modern .spc-hero h1 span{color:var(--spc-blue);} #home.spc-modern .spc-lead{font-size:18px;line-height:1.6;color:#40566c;max-width:620px;margin-bottom:28px;} #home.spc-modern .spc-proof{display:flex;gap:28px;flex-wrap:wrap;} #home.spc-modern .spc-proof>div{display:grid;grid-template-columns:28px auto;grid-template-rows:auto auto;column-gap:9px;min-width:135px;} #home.spc-modern .spc-proof i{grid-row:1/3;color:var(--spc-blue);font-size:24px;align-self:start;} #home.spc-modern .spc-proof strong{font-size:13px;color:#0c2c4a;} #home.spc-modern .spc-proof span{font-size:11px;color:#6c7f91;} #home.spc-modern .spc-domain-card{grid-column:2;background:rgba(255,255,255,.96);border:1px solid #dbe5ee;padding:28px 30px;box-shadow:0 18px 50px rgba(13,43,74,.12);} #home.spc-modern .spc-domain-card h2{font-size:24px;line-height:1.2;font-weight:800;color:#0d2b4a;margin:0 0 12px;} #home.spc-modern .spc-domain-price{font-size:38px;line-height:1;font-weight:800;color:#0d2b4a;margin:0 0 18px;} #home.spc-modern .spc-domain-price small{font-size:13px;font-weight:700;color:#67798a;} #home.spc-modern #domainellform{margin:0 0 14px;} #home.spc-modern #domainellform p{display:flex;margin:0;} #home.spc-modern #domainellform #domain{height:48px;flex:1;min-width:0;border:1px solid #cedae5;background:#fff;padding:0 14px;font-size:14px;text-align:left;} #home.spc-modern #domainellform .gomb{height:48px;border:0;background:var(--spc-blue);color:#fff;font-weight:800;padding:0 18px;border-radius:0 6px 6px 0;} #home.spc-modern .spc-domain-note{font-size:12px;line-height:1.5;color:#687b8d;margin:0;} #home.spc-modern .spc-intent{background:#fff;border-bottom:1px solid var(--spc-line);} #home.spc-modern .spc-intent-grid{display:grid;grid-template-columns:1.2fr repeat(4,1fr);align-items:stretch;} #home.spc-modern .spc-intent-grid>*{min-height:72px;display:flex;align-items:center;gap:10px;padding:0 18px;border-right:1px solid #edf1f5;color:#102f4e;font-size:13px;font-weight:700;} #home.spc-modern .spc-intent-grid>*:last-child{border-right:0;} #home.spc-modern .spc-intent-grid a:hover{background:#f4f8fb;color:var(--spc-blue);} #home.spc-modern .spc-intent-grid i{font-size:23px;color:var(--spc-blue);} #home.spc-modern .spc-solutions{padding:58px 0 44px;background:#fff;} #home.spc-modern .spc-section-heading{max-width:760px;margin-bottom:34px;} #home.spc-modern .spc-section-heading h2,#home.spc-modern .spc-knowledge h2{font-size:34px;line-height:1.12;font-weight:800;color:#0d2b4a;margin:0 0 12px;letter-spacing:-.025em;} #home.spc-modern .spc-section-heading>p:last-child{font-size:16px;color:#687b8d;margin:0;} #home.spc-modern .spc-solution-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;} #home.spc-modern .spc-solution{min-height:365px;display:grid;grid-template-columns:56% 44%;position:relative;overflow:hidden;border:1px solid var(--spc-line);background:#fff;} #home.spc-modern .spc-solution-copy{padding:30px 26px 26px;position:relative;z-index:2;} #home.spc-modern .spc-solution h3{font-size:28px;line-height:1.08;letter-spacing:-.025em;font-weight:800;color:#0b2948;margin:0 0 15px;} #home.spc-modern .spc-copy{font-size:14px;line-height:1.55;color:#52687d;margin-bottom:17px;} #home.spc-modern .spc-email{background:linear-gradient(105deg,#f3fbf5 0%,#fff 60%);} #home.spc-modern .spc-hosting{background:linear-gradient(105deg,#f3f8ff 0%,#fff 60%);} #home.spc-modern .spc-speedpage{background:linear-gradient(105deg,#fff5f9 0%,#fff 60%);} #home.spc-modern .spc-it{background:linear-gradient(105deg,#fff8f1 0%,#fff 60%);} #home.spc-modern .spc-email .spc-kicker{color:var(--spc-green);} #home.spc-modern .spc-speedpage .spc-kicker{color:var(--spc-pink);} #home.spc-modern .spc-it .spc-kicker{color:var(--spc-orange);} #home.spc-modern .spc-solution-image{background-size:cover;background-position:center;min-height:100%;} #home.spc-modern .spc-solution-image.email{background-image:linear-gradient(90deg,rgba(255,255,255,.88),rgba(255,255,255,0) 32%),url('/images/emailtarhely-hero.jpg');} #home.spc-modern .spc-solution-image.hosting{background-image:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,0) 35%),url('/images/webtarhely-hero.jpg');} #home.spc-modern .spc-solution-image.speedpage{background-image:linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,0) 35%),url('/images/weboldalkeszito-hero.jpg');} #home.spc-modern .spc-solution-image.it{background-image:linear-gradient(90deg,rgba(255,255,255,.70),rgba(255,255,255,0) 35%),url('/images/it-hero.jpg');} #home.spc-modern .spc-mail-compare{display:grid;gap:8px;margin:12px 0 13px;max-width:250px;} #home.spc-modern .spc-mail-compare span{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #d9e2ea;padding:9px 11px;font-size:12px;font-weight:700;} #home.spc-modern .spc-mail-compare .good{color:#087a3d;border-color:#b9e8cc;} #home.spc-modern .spc-mail-compare .bad{color:#dc3150;border-color:#f0c2cc;} #home.spc-modern .spc-mail-compare b{font-size:18px;} #home.spc-modern .spc-checks{list-style:none;padding:0;margin:12px 0 15px;display:grid;gap:6px;} #home.spc-modern .spc-checks li{font-size:12px;color:#405a71;padding-left:18px;position:relative;} #home.spc-modern .spc-checks li:before{content:'✓';position:absolute;left:0;color:var(--spc-green);font-weight:900;} #home.spc-modern .spc-it .spc-checks li:before{color:var(--spc-orange);} #home.spc-modern .spc-feature-row{display:flex;gap:20px;margin:22px 0 14px;} #home.spc-modern .spc-feature-row span{font-size:10px;color:#667d91;display:flex;flex-direction:column;} #home.spc-modern .spc-feature-row b{font-size:13px;color:#0b2c4b;margin-bottom:2px;} #home.spc-modern .spc-price{font-size:25px;font-weight:800;color:#0d2b4a;margin:13px 0 13px;} #home.spc-modern .spc-price small{font-size:11px;color:#667b8e;font-weight:700;} #home.spc-modern .spc-cta{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 17px;color:#fff!important;font-size:12px;font-weight:800;border-radius:6px;} #home.spc-modern .spc-cta.green{background:var(--spc-green);} #home.spc-modern .spc-cta.blue{background:var(--spc-blue);} #home.spc-modern .spc-cta.pink{background:var(--spc-pink);} #home.spc-modern .spc-cta.orange{background:var(--spc-orange);} #home.spc-modern .spc-cta:hover{filter:brightness(.93);transform:translateY(-1px);} #home.spc-modern .spc-inline-links{display:flex;gap:16px;margin:12px 0 14px;} #home.spc-modern .spc-inline-links a{font-size:11px;font-weight:800;color:#d65d0a;} #home.spc-modern .spc-trust{border-top:1px solid var(--spc-line);border-bottom:1px solid var(--spc-line);background:#fff;} #home.spc-modern .spc-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);} #home.spc-modern .spc-trust-grid>div{min-height:78px;display:grid;grid-template-columns:42px auto;grid-template-rows:auto auto;align-content:center;padding:0 22px;border-right:1px solid #e7edf2;} #home.spc-modern .spc-trust-grid>div:last-child{border-right:0;} #home.spc-modern .spc-trust i{grid-row:1/3;font-size:28px;color:#0d365c;align-self:center;} #home.spc-modern .spc-trust strong{font-size:11px;text-transform:uppercase;color:#0c2c4b;} #home.spc-modern .spc-trust span{font-size:11px;color:#687c8f;} #home.spc-modern .spc-knowledge{padding:48px 0 58px;background:#f8fafc;} #home.spc-modern .spc-knowledge-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px;} #home.spc-modern .spc-knowledge-head h2{margin-bottom:0;} #home.spc-modern .spc-knowledge-head>a{font-size:12px;font-weight:800;color:var(--spc-blue);} #home.spc-modern .hirek{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;background:transparent!important;margin:0!important;} #home.spc-modern .hirek>div{width:auto!important;float:none!important;padding:0!important;border:0!important;} #home.spc-modern .hirek .box{height:100%;background:#fff;border:1px solid var(--spc-line);padding:0!important;margin:0!important;overflow:hidden;} #home.spc-modern .hirek .box>a{height:100%;display:flex!important;flex-direction:column;} #home.spc-modern .hirek .logo{display:block!important;margin:0!important;height:150px;overflow:hidden;} #home.spc-modern .hirek .logo img{width:100%;height:100%;object-fit:cover;float:none!important;padding:0!important;} #home.spc-modern .hirek .title{height:auto!important;padding:15px 16px 3px;order:2;} #home.spc-modern .hirek .title2{font-size:10px!important;line-height:1.2;color:var(--spc-blue)!important;text-transform:uppercase;font-weight:800!important;margin:0 0 7px!important;border:0!important;padding:0!important;} #home.spc-modern .hirek .title1{font-size:16px!important;line-height:1.25;color:#0d2b4a!important;font-weight:800!important;margin:0!important;} #home.spc-modern .hirek .excerpt{order:3;font-size:12px;line-height:1.45;color:#66798b;padding:5px 16px 0;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} #home.spc-modern .hirek .readmore{order:4;margin-top:auto;padding:12px 16px 16px;font-size:11px;font-weight:800;color:var(--spc-blue);} #home.spc-modern .hirek a:hover .title2{border:0!important;color:var(--spc-blue)!important;} @media(max-width:1200px){ #home.spc-modern .spc-home-shell{width:min(1120px,calc(100% - 42px));} #home.spc-modern .spc-hero-inner{grid-template-columns:1fr .8fr;gap:24px;} #home.spc-modern .spc-domain-card{grid-column:2;} #home.spc-modern .spc-solution{grid-template-columns:60% 40%;} #home.spc-modern .spc-solution h3{font-size:24px;} } @media(max-width:991px){ #home.spc-modern .spc-hero{min-height:auto;} #home.spc-modern .spc-hero-image{inset:0 0 0 54%;opacity:.65;} #home.spc-modern .spc-hero-inner{grid-template-columns:1fr 1fr;min-height:auto;padding:52px 0;} #home.spc-modern .spc-hero h1{font-size:48px;} #home.spc-modern .spc-intent-grid{grid-template-columns:1fr 1fr 1fr;} #home.spc-modern .spc-intent-grid strong{grid-column:1/-1;min-height:48px;} #home.spc-modern .spc-solution-grid{grid-template-columns:1fr;} #home.spc-modern .spc-trust-grid{grid-template-columns:1fr 1fr;} #home.spc-modern .spc-trust-grid>div:nth-child(2){border-right:0;} #home.spc-modern .hirek{grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:767px){ #home.spc-modern .spc-home-shell{width:calc(100% - 28px);} #home.spc-modern .spc-hero-image{position:relative;inset:auto;height:230px;background-position:center top;} #home.spc-modern .spc-hero:after{display:none;} #home.spc-modern .spc-hero-inner{display:block;padding:34px 0;} #home.spc-modern .spc-hero h1{font-size:42px;} #home.spc-modern .spc-domain-card{margin-top:28px;} #home.spc-modern .spc-intent-grid{grid-template-columns:1fr;} #home.spc-modern .spc-intent-grid>*{border-right:0;border-bottom:1px solid #edf1f5;min-height:54px;} #home.spc-modern .spc-solutions{padding-top:38px;} #home.spc-modern .spc-solution{display:flex;flex-direction:column;} #home.spc-modern .spc-solution-image{height:230px;min-height:230px;order:-1;background-position:center;} #home.spc-modern .spc-solution-copy{padding:24px 20px 26px;} #home.spc-modern .spc-trust-grid{grid-template-columns:1fr;} #home.spc-modern .spc-trust-grid>div{border-right:0;border-bottom:1px solid #e7edf2;} #home.spc-modern .hirek{grid-template-columns:1fr;} #home.spc-modern .spc-knowledge-head{align-items:flex-start;flex-direction:column;gap:10px;} } /********************************************************** SPEEDPC 2026 NAVIGATION REFINEMENT V2 **********************************************************/ :root{--spc-sidebar:96px;--spc-topbar:72px;} /* Global shell alignment for the new fixed navigation */ #sidebarleft{width:var(--spc-sidebar)!important;background:#0a2d4d!important;border-right:1px solid rgba(255,255,255,.08);box-shadow:none;} #sidebartop{left:var(--spc-sidebar)!important;height:var(--spc-topbar)!important;background:#0d3558!important;border:0!important;box-shadow:0 1px 0 rgba(7,28,47,.12);z-index:500;} #content{margin-left:var(--spc-sidebar)!important;} .wrapper{margin-top:var(--spc-topbar)!important;border-top:18px solid #fff;} .page-sidebar{top:var(--spc-topbar)!important;left:calc(-310px + var(--spc-sidebar))!important;} .page-sidebar.active{left:var(--spc-sidebar)!important;} /* Cleaner, calmer sidebar */ #sidebarleft .logo{height:76px!important;background:#fff!important;border-bottom:1px solid #dce6ee;display:flex!important;align-items:center;justify-content:center;} #sidebarleft .logo img{height:58px!important;top:auto!important;position:static!important;} #sidebarleft .mainmenu,#sidebarleft .home{height:70px!important;padding:9px 4px!important;margin:0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#dce9f4!important;position:relative;transition:background .18s ease,color .18s ease;} #sidebarleft .mainmenu i,#sidebarleft .home i{font-size:25px!important;line-height:1;color:#fff;} #sidebarleft .title{font-size:10px!important;line-height:1.15!important;margin:0!important;font-weight:600;color:#dce9f4!important;letter-spacing:.01em;} #sidebarleft .mainmenu:hover,#sidebarleft .home:hover{background:#123e63!important;} #sidebarleft .mainmenu.active,#sidebarleft .mainmenu.actived,#sidebarleft .home.active,#sidebarleft .home.actived{background:#1479ef!important;} #sidebarleft .mainmenu.active:before,#sidebarleft .mainmenu.actived:before,#sidebarleft .home.active:before,#sidebarleft .home.actived:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;background:#79c9ff;} /* Single-line top header — promo banner removed */ #sidebartop .spc-topbar-inner{height:var(--spc-topbar);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:relative;} #sidebartop .spc-topbar-context{font-size:12px;font-weight:700;letter-spacing:.035em;color:#b9ccdd;text-transform:uppercase;white-space:nowrap;} #sidebartop .spc-topbar-context span{color:#3f89c7;margin:0 5px;} #sidebartop .right{float:none!important;height:var(--spc-topbar)!important;display:flex;align-items:center;gap:12px;margin-left:auto;} #sidebartop .search-box{height:auto!important;line-height:normal!important;vertical-align:middle;} #sidebartop .search-box input[type="text"]{position:static!important;top:auto!important;width:190px!important;height:38px!important;margin:0!important;padding:0 14px!important;border:1px solid #315573!important;background:#173f61!important;color:#fff!important;border-radius:5px!important;font-size:12px!important;box-shadow:none!important;} #sidebartop .search-box input[type="text"]::placeholder{color:#9cb5ca;} #sidebartop .search-box input[type="text"]:focus{background:#fff!important;color:#16334d!important;border-color:#6aa9dc!important;box-shadow:0 0 0 3px rgba(64,154,227,.14)!important;} #sidebartop .headerlogin{top:auto!important;margin:0!important;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 7px;color:#eef6fc!important;font-size:11px!important;font-weight:700;} #sidebartop .headerlogin i{font-size:24px!important;margin:0!important;color:#fff!important;} #sidebartop .headerlogin span{top:auto!important;position:static!important;} #sidebartop .headerlogin:hover{background:rgba(255,255,255,.08);border-radius:5px;} #frmsignin,#frmsignin2{top:var(--spc-topbar)!important;} .results{top:42px!important;} /* Make the home-page illustration icons visible with the existing Fontello set */ #home.spc-modern .spc-proof i,#home.spc-modern .spc-intent-grid i,#home.spc-modern .spc-trust i{display:inline-flex!important;align-items:center;justify-content:center;} #home.spc-modern .spc-proof i{width:30px;height:30px;border:1px solid #b8d6f3;border-radius:50%;font-size:16px!important;background:#f5faff;} #home.spc-modern .spc-intent-grid i{width:30px;height:30px;font-size:20px!important;color:#1677ea!important;flex:0 0 30px;} #home.spc-modern .spc-trust i{width:36px;height:36px;border:1px solid #d7e4ee;font-size:20px!important;border-radius:50%;background:#f7fafc;} /* Slightly more polished quick-choice strip */ #home.spc-modern .spc-intent-grid>*{transition:background .16s ease,color .16s ease;} #home.spc-modern .spc-intent-grid a:hover{background:#f4f9fd!important;} @media(max-width:1100px){ #sidebartop .spc-topbar-context{display:none;} } @media(max-width:767px){ :root{--spc-sidebar:0px;--spc-topbar:70px;} #content{margin-left:0!important;} #sidebartop{left:0!important;background:#fff!important;box-shadow:0 2px 8px rgba(20,48,72,.12)!important;} .wrapper{margin-top:var(--spc-topbar)!important;border-top:2px solid #fff;} #sidebartop .spc-topbar-inner{padding:0 8px;} #sidebartop .logo{position:static!important;width:54px!important;height:54px!important;margin-right:auto;background:#fff!important;display:flex!important;align-items:center;} #sidebartop .logo img{width:52px!important;height:auto!important;margin:0!important;} #sidebartop .right{gap:4px;} #sidebartop .icon-menu,#sidebartop .icon-search{line-height:38px!important;height:40px!important;font-size:24px!important;padding:0 8px!important;color:#0d3558!important;border:1px solid #d5e0e9!important;} #sidebartop .headerlogin{color:#0d3558!important;padding:0 4px;} #sidebartop .headerlogin i{color:#0d3558!important;font-size:24px!important;} #sidebartop>.spc-topbar-inner>.search-box{position:absolute;left:0;right:0;top:70px;background:#fff;padding:8px;box-shadow:0 5px 12px rgba(20,48,72,.12);} #sidebartop>.spc-topbar-inner>.search-box input[type="text"]{width:100%!important;} } /********************************************************** SPEEDPC 2026 TOP NAVIGATION V3 The legacy left sidebar is removed from index.php. Desktop navigation is now a real horizontal menu with CSS dropdowns. **********************************************************/ :root{--spc-topbar:76px;} #sidebartop.spc-main-header{ left:0!important; right:0!important; top:0!important; height:var(--spc-topbar)!important; background:#0d3558!important; box-shadow:0 1px 0 rgba(6,27,46,.2)!important; z-index:9999!important; overflow:visible!important; } #content{margin-left:0!important;} .wrapper{margin-top:var(--spc-topbar)!important;border-top:0!important;} #sidebartop .spc-topbar-inner{ height:var(--spc-topbar)!important; display:flex!important; align-items:center!important; width:100%!important; max-width:1600px; margin:0 auto; padding:0 22px!important; gap:18px; overflow:visible; } #sidebartop .spc-desktop-logo{ width:62px; height:62px; flex:0 0 62px; background:#fff; display:flex!important; align-items:center; justify-content:center; margin-right:8px; } #sidebartop .spc-desktop-logo img{width:52px;height:auto;display:block;} .spc-desktop-nav{height:100%;display:flex!important;align-items:stretch;min-width:0;} .spc-nav-list{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;align-items:stretch!important;height:100%;gap:0;} .spc-nav-item{position:relative;display:flex;align-items:stretch;} .spc-nav-item>a{ display:flex!important; align-items:center!important; padding:0 13px!important; color:#eaf3fa!important; font-size:12px!important; line-height:1!important; font-weight:700!important; white-space:nowrap; text-decoration:none!important; border:0!important; transition:background .16s ease,color .16s ease; } .spc-nav-item>a:hover,.spc-nav-item:focus-within>a{background:#16476e!important;color:#fff!important;} .spc-nav-arrow{font-size:12px;opacity:.65;margin-left:5px;transform:translateY(-1px);} .spc-nav-dropdown{ position:absolute; left:0; top:100%; width:260px; padding:16px; background:#fff; border:1px solid #dbe5ee; box-shadow:0 18px 48px rgba(7,38,65,.18); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .14s ease,transform .14s ease,visibility .14s ease; z-index:10050; } .spc-nav-item:hover>.spc-nav-dropdown,.spc-nav-item:focus-within>.spc-nav-dropdown{opacity:1;visibility:visible;transform:translateY(0);} .spc-nav-dropdown>a{ display:block!important; color:#24415c!important; font-size:13px!important; line-height:1.25!important; padding:9px 10px!important; border-radius:4px; text-decoration:none!important; } .spc-nav-dropdown>a:hover{background:#f1f7fc!important;color:#1376dc!important;} .spc-nav-heading{padding:4px 10px 10px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1376dc;border-bottom:1px solid #e8eef3;margin-bottom:5px;} .spc-nav-dropdown .spc-nav-cta{margin-top:8px;background:#eef6ff!important;color:#0c69c8!important;font-weight:800!important;} .spc-nav-mega{width:540px;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px;} .spc-nav-column{min-width:0;} .spc-nav-column>a{display:block;color:#24415c!important;font-size:13px!important;line-height:1.25!important;padding:9px 10px!important;text-decoration:none!important;border-radius:4px;} .spc-nav-column>a:hover{background:#f1f7fc!important;color:#1376dc!important;} #sidebartop .right{margin-left:auto!important;flex:0 0 auto!important;} #sidebartop .search-box input[type="text"]{width:170px!important;} #frmsignin,#frmsignin2{top:var(--spc-topbar)!important;} /* Do not allow old desktop sidebar rules to reserve space. */ #sidebarleft,.page-sidebar{display:none!important;} @media(max-width:1320px){ .spc-nav-item>a{padding:0 9px!important;font-size:11px!important;} #sidebartop .search-box input[type="text"]{width:145px!important;} #sidebartop .spc-topbar-inner{padding:0 12px!important;gap:8px;} } @media(max-width:1100px){ .spc-nav-item:nth-last-child(2){display:none;} .spc-nav-item>a{padding:0 8px!important;} #sidebartop .search-box{display:none!important;} } @media(max-width:767px){ #sidebartop.spc-main-header{height:70px!important;background:#fff!important;box-shadow:0 2px 8px rgba(20,48,72,.12)!important;} .wrapper{margin-top:70px!important;} #sidebartop .spc-topbar-inner{height:70px!important;padding:0 8px!important;} #sidebartop .logo{position:static!important;width:54px!important;height:54px!important;margin-right:auto!important;background:#fff!important;display:flex!important;align-items:center!important;} #sidebartop .logo img{width:52px!important;height:auto!important;margin:0!important;} #sidebartop .right{gap:4px!important;} #sidebartop .icon-menu,#sidebartop .icon-search{line-height:38px!important;height:40px!important;font-size:24px!important;padding:0 8px!important;color:#0d3558!important;border:1px solid #d5e0e9!important;} #sidebartop .headerlogin{color:#0d3558!important;padding:0 4px!important;} #sidebartop .headerlogin i{color:#0d3558!important;font-size:24px!important;} #sidebartop .spc-mobile-search{position:absolute!important;left:0!important;right:0!important;top:70px!important;background:#fff!important;padding:8px!important;box-shadow:0 5px 12px rgba(20,48,72,.12)!important;} #sidebartop .spc-mobile-search input[type="text"]{width:100%!important;} } /********************************************************** SPEEDPC 2026 TOP NAVIGATION V4 — premium mega menu Approved visual direction: dark compact header, large light-blue mega menus clearly separated from the white page background. **********************************************************/ :root{ --spc-header-bg:#171d25; --spc-header-hover:#242d38; --spc-mega-bg:#eaf2f7; --spc-mega-border:#cfdee9; --spc-mega-card:#ffffff; --spc-mega-ink:#10233e; --spc-mega-muted:#65778a; --spc-accent:#1677ea; } #sidebartop.spc-main-header{ background:var(--spc-header-bg)!important; box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 28px rgba(8,20,32,.10)!important; } #sidebartop .spc-topbar-inner{max-width:1780px!important;padding:0 30px!important;gap:10px!important;} #sidebartop .spc-desktop-logo{ width:auto!important;height:100%!important;flex:0 0 auto!important;background:transparent!important; padding:0 18px 0 0!important;margin-right:2px!important;gap:9px!important;text-decoration:none!important; } #sidebartop .spc-desktop-logo img{width:38px!important;max-height:48px!important;filter:none!important;} #sidebartop .spc-desktop-logo span{font-size:25px;font-weight:800;letter-spacing:-.035em;color:#fff;line-height:1;} .spc-nav-list{gap:2px!important;} .spc-nav-item>a{ gap:7px!important;padding:0 12px!important;color:#edf3f7!important;font-size:13px!important; font-weight:700!important;border-radius:8px!important;margin:11px 0!important;height:54px!important; } .spc-nav-item>a>i{font-size:17px!important;opacity:.92;} .spc-nav-item>a:hover,.spc-nav-item:focus-within>a{background:var(--spc-header-hover)!important;color:#fff!important;} .spc-nav-item.has-dropdown:focus-within>a,.spc-nav-item.has-dropdown:hover>a{background:#fff!important;color:#151b22!important;} .spc-nav-item.has-dropdown:focus-within>a i,.spc-nav-item.has-dropdown:hover>a i{color:#151b22!important;} .spc-nav-arrow{font-size:13px!important;opacity:.72!important;margin-left:1px!important;} /* Full-width mega-menu. The cool blue background intentionally differs from both the dark header and the white page so the open state is obvious. */ .spc-nav-dropdown.spc-mega-menu{ position:fixed!important; left:50%!important; top:var(--spc-topbar)!important; width:min(1320px,calc(100vw - 56px))!important; min-height:240px; padding:30px 32px!important; background:var(--spc-mega-bg)!important; border:1px solid var(--spc-mega-border)!important; border-top:0!important; box-shadow:0 26px 70px rgba(15,36,54,.20)!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)) 250px; gap:28px!important; opacity:0; visibility:hidden; transform:translate(-50%,10px)!important; transition:opacity .15s ease,transform .15s ease,visibility .15s ease!important; z-index:10050!important; border-radius:0 0 12px 12px!important; } .spc-nav-item:hover>.spc-nav-dropdown.spc-mega-menu, .spc-nav-item:focus-within>.spc-nav-dropdown.spc-mega-menu{ opacity:1!important;visibility:visible!important;transform:translate(-50%,0)!important; } .spc-nav-dropdown.spc-mega-compact{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:1080px!important;} .spc-nav-dropdown.spc-mega-web{grid-template-columns:1.05fr 1fr 1fr!important;max-width:1120px!important;} .spc-nav-dropdown.spc-mega-small{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:760px!important;min-height:auto!important;} .spc-nav-item:nth-last-child(2) .spc-mega-small{grid-template-columns:1fr!important;max-width:520px!important;} .spc-mega-column{min-width:0!important;} .spc-mega-title{ margin:0 0 13px!important;padding:0 4px 10px!important;border-bottom:1px solid #c8d8e4!important; font-size:11px!important;line-height:1.2!important;font-weight:800!important;letter-spacing:.08em!important; text-transform:uppercase!important;color:#176fcf!important; } .spc-mega-link{ display:flex!important;align-items:flex-start!important;gap:12px!important;padding:10px 8px!important;margin:0 0 3px!important; color:var(--spc-mega-ink)!important;text-decoration:none!important;border-radius:7px!important;background:transparent!important; transition:background .14s ease,transform .14s ease!important; } .spc-mega-link:hover{background:rgba(255,255,255,.78)!important;transform:translateX(2px)!important;} .spc-mega-link>i{ width:38px!important;height:38px!important;flex:0 0 38px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important; border-radius:9px!important;background:#d7e8f3!important;color:#183b59!important;font-size:18px!important; } .spc-mega-link span{min-width:0!important;display:block!important;} .spc-mega-link strong{display:block!important;font-size:14px!important;line-height:1.2!important;color:var(--spc-mega-ink)!important;margin:1px 0 4px!important;} .spc-mega-link small{display:block!important;font-size:11px!important;line-height:1.4!important;color:var(--spc-mega-muted)!important;font-weight:400!important;} .spc-mega-cta{ display:flex!important;align-items:center!important;justify-content:space-between!important;margin:12px 4px 0!important;padding:13px 15px!important; background:#fff!important;border:1px solid #cfdeea!important;border-radius:7px!important;color:#126aca!important;font-size:13px!important;font-weight:800!important; text-decoration:none!important;box-shadow:0 4px 12px rgba(35,73,104,.04)!important; } .spc-mega-cta:hover{border-color:#8dbce2!important;background:#fafdff!important;} .spc-mega-promo{ background:#dceaf3!important;border:1px solid #c5d9e7!important;padding:20px!important;border-radius:9px!important; display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;min-height:210px!important; } .spc-mega-promo-icon{width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:15px;} .spc-mega-promo-icon i{font-size:27px;color:#176fcf;} .spc-mega-promo p{font-size:12px!important;color:#176fcf!important;font-weight:800!important;margin:0 0 8px!important;} .spc-mega-promo>strong{font-size:25px!important;color:#10233e!important;line-height:1.1!important;margin-bottom:7px!important;} .spc-mega-promo>strong small{font-size:11px!important;color:#63778a!important;} .spc-mega-promo>span{font-size:11px!important;line-height:1.45!important;color:#63778a!important;margin-bottom:16px!important;} .spc-mega-promo>a{display:block!important;width:100%!important;padding:11px 13px!important;text-align:center!important;border-radius:7px!important;background:#1677ea!important;color:#fff!important;font-size:12px!important;font-weight:800!important;text-decoration:none!important;} .spc-mega-featured{background:#dceaf3!important;border:1px solid #c6dae8!important;padding:20px!important;border-radius:9px!important;} .spc-mega-featured .spc-mega-title{padding-left:0!important;} .spc-mega-featured h3{font-size:22px!important;line-height:1.15!important;color:#10233e!important;margin:14px 0 8px!important;} .spc-mega-featured>p:not(.spc-mega-title){font-size:12px!important;line-height:1.55!important;color:#5f7486!important;margin:0 0 16px!important;} .spc-mega-featured .spc-mega-cta{margin-left:0!important;margin-right:0!important;} #sidebartop .search-box input[type="text"]{background:#202a35!important;border-color:#364555!important;color:#fff!important;} #sidebartop .search-box input[type="text"]::placeholder{color:#9aa9b8!important;} #sidebartop .headerlogin:hover{background:var(--spc-header-hover)!important;} @media(max-width:1480px){ .spc-nav-item>a{padding:0 9px!important;font-size:12px!important;gap:5px!important;} .spc-nav-item>a>i{display:none!important;} #sidebartop .spc-desktop-logo span{font-size:22px!important;} #sidebartop .spc-desktop-logo img{width:34px!important;} } @media(max-width:1220px){ .spc-nav-item:nth-last-child(2),.spc-nav-item:nth-last-child(1){display:none!important;} .spc-nav-dropdown.spc-mega-menu{width:calc(100vw - 32px)!important;padding:24px!important;} } @media(max-width:1100px){ .spc-nav-item>a{padding:0 7px!important;font-size:11px!important;} .spc-nav-item:nth-last-child(3){display:none!important;} } @media(max-width:767px){ #sidebartop .spc-desktop-logo{display:none!important;} } /********************************************************** SPEEDPC 2026 TOP NAVIGATION V5 — two-level header Primary: Domain, E-mail, Weboldal, Tárhely, VPS Utility: IT, Tudástár, Kapcsolat, Keresés, Webmail, Ügyfélkapu **********************************************************/ :root{ --spc-utility-h:38px; --spc-primary-h:72px; --spc-header-total:110px; --spc-utility-bg:#0d1f30; --spc-primary-bg:#17202a; --spc-primary-hover:#252f3a; } #sidebartop.spc-header-v5{ height:var(--spc-header-total)!important; background:transparent!important; overflow:visible!important; box-shadow:0 1px 0 rgba(10,25,40,.12),0 8px 28px rgba(10,25,40,.08)!important; } .wrapper{margin-top:var(--spc-header-total)!important;} .spc-utility-row{height:var(--spc-utility-h);background:var(--spc-utility-bg);border-bottom:1px solid rgba(255,255,255,.06);} .spc-utility-inner,.spc-primary-inner{width:100%;height:100%;display:flex;align-items:center;padding:0 28px;} .spc-utility-inner{gap:18px;} .spc-utility-spacer{flex:1 1 auto;} .spc-utility-nav{display:flex;align-items:center;gap:4px;height:100%;} .spc-utility-nav>a{display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 10px;color:#c9d5df!important;font-size:11px;font-weight:700;text-decoration:none!important;white-space:nowrap;} .spc-utility-nav>a:hover{color:#fff!important;background:rgba(255,255,255,.06);} .spc-utility-nav>a i{font-size:14px;} .spc-utility-actions{display:flex;align-items:center;gap:8px;height:100%;position:relative;} .spc-utility-actions .search-box{height:auto!important;line-height:normal!important;} .spc-utility-actions .search-box input[type="text"]{position:static!important;width:170px!important;height:30px!important;padding:0 11px!important;margin:0!important;border:1px solid #35495b!important;background:#182d40!important;color:#fff!important;border-radius:5px!important;font-size:11px!important;box-shadow:none!important;} .spc-utility-actions .search-box input[type="text"]::placeholder{color:#91a6b7!important;} .spc-utility-actions .headerlogin{position:relative!important;top:auto!important;margin:0!important;height:30px!important;padding:0 11px!important;border-radius:5px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;font-size:10px!important;font-weight:800!important;color:#fff!important;line-height:1!important;text-decoration:none!important;} .spc-utility-actions .headerlogin i{font-size:18px!important;margin:0!important;color:#fff!important;} .spc-utility-actions .headerlogin span{position:static!important;top:auto!important;} .spc-utility-actions .spc-highlight-mail{background:#0e8f73!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);} .spc-utility-actions .spc-highlight-mail:hover{background:#0a7b63!important;} .spc-utility-actions .spc-highlight-account{background:#1677ea!important;box-shadow:0 4px 12px rgba(22,119,234,.22);} .spc-utility-actions .spc-highlight-account:hover{background:#0f68d3!important;} #frmsignin,#frmsignin2{top:var(--spc-header-total)!important;} .spc-primary-row{height:var(--spc-primary-h);background:var(--spc-primary-bg);} .spc-primary-inner{gap:22px;padding-left:28px;padding-right:28px;} #sidebartop .spc-desktop-logo{height:100%!important;padding:0 18px 0 0!important;margin:0!important;display:flex!important;align-items:center!important;gap:9px!important;text-decoration:none!important;flex:0 0 auto!important;background:transparent!important;} #sidebartop .spc-desktop-logo img{width:38px!important;max-height:46px!important;} #sidebartop .spc-desktop-logo span{font-size:25px!important;font-weight:800!important;letter-spacing:-.035em!important;color:#fff!important;} .spc-desktop-nav{height:100%!important;display:flex!important;align-items:stretch!important;flex:1 1 auto!important;} .spc-nav-list{height:100%!important;display:flex!important;align-items:stretch!important;gap:4px!important;margin:0!important;padding:0!important;} .spc-nav-item{position:static!important;display:flex!important;align-items:stretch!important;} .spc-nav-item>a{height:100%!important;margin:0!important;padding:0 18px!important;border-radius:0!important;display:flex!important;align-items:center!important;gap:7px!important;color:#f3f6f8!important;font-size:14px!important;font-weight:800!important;text-decoration:none!important;} .spc-nav-item>a:hover,.spc-nav-item:focus-within>a{background:var(--spc-primary-hover)!important;color:#fff!important;} .spc-nav-item.has-dropdown:hover>a,.spc-nav-item.has-dropdown:focus-within>a{background:var(--spc-mega-bg)!important;color:#152536!important;} .spc-nav-arrow{font-size:13px!important;opacity:.7!important;} /* Every desktop dropdown spans the entire viewport width. */ .spc-nav-dropdown.spc-mega-menu{ position:fixed!important; left:0!important; right:0!important; top:var(--spc-header-total)!important; width:100vw!important; max-width:none!important; min-height:245px!important; padding:30px max(34px,calc((100vw - 1420px)/2))!important; background:var(--spc-mega-bg)!important; border:0!important; border-top:1px solid var(--spc-mega-border)!important; border-bottom:1px solid var(--spc-mega-border)!important; border-radius:0!important; box-shadow:0 28px 60px rgba(17,38,56,.18)!important; opacity:0!important; visibility:hidden!important; transform:translateY(8px)!important; transition:opacity .14s ease,transform .14s ease,visibility .14s ease!important; z-index:10050!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)) 260px!important; gap:30px!important; } .spc-nav-item:hover>.spc-nav-dropdown.spc-mega-menu,.spc-nav-item:focus-within>.spc-nav-dropdown.spc-mega-menu{opacity:1!important;visibility:visible!important;transform:translateY(0)!important;} .spc-nav-dropdown.spc-mega-email,.spc-nav-dropdown.spc-mega-web,.spc-nav-dropdown.spc-mega-hosting,.spc-nav-dropdown.spc-mega-vps{grid-template-columns:repeat(3,minmax(0,1fr))!important;} .spc-mega-column{max-width:430px;} .spc-mega-featured{max-width:none!important;} @media(max-width:1180px) and (min-width:768px){ .spc-primary-inner{gap:10px;padding-left:18px;padding-right:18px;} .spc-nav-item>a{padding:0 12px!important;font-size:13px!important;} .spc-utility-nav>a{padding:0 7px;font-size:10px;} .spc-utility-actions .search-box input[type="text"]{width:130px!important;} } @media(max-width:767px){ :root{--spc-header-total:70px;} #sidebartop.spc-header-v5{height:70px!important;background:#fff!important;} .spc-primary-row{height:70px!important;background:#fff!important;} .spc-primary-inner{height:70px!important;padding:0 8px!important;gap:4px!important;} .wrapper{margin-top:70px!important;} #frmsignin,#frmsignin2{top:70px!important;} } /********************************************************** SPEEDPC 2026 LAYOUT SYSTEM V6 — unified horizontal rhythm One shared content axis for utility header, primary nav, mega menus, homepage, legacy content and footer. **********************************************************/ :root{ --spc-layout-max:1640px; --spc-layout-gutter:32px; } /* Remove the old framed-page effect. Background sections may span edge-to-edge; their actual content uses the common horizontal axis below. */ .wrapper{ width:100%!important; border:0!important; margin-top:var(--spc-header-total)!important; } .page-wrapper{background:#fff!important;} #content{width:100%!important;margin-left:0!important;overflow:visible!important;} /* Both header rows use exactly the same left/right edges. */ .spc-utility-inner, .spc-primary-inner{ width:min(var(--spc-layout-max),calc(100% - (var(--spc-layout-gutter) * 2)))!important; max-width:none!important; margin:0 auto!important; padding-left:0!important; padding-right:0!important; } .spc-utility-inner{justify-content:flex-end!important;} .spc-utility-spacer{display:none!important;} /* Primary menu starts on the same axis; utility links finish on the same axis. */ .spc-primary-inner{gap:28px!important;} .spc-desktop-nav{min-width:0!important;} .spc-nav-list{flex-wrap:nowrap!important;} /* Mega menu background remains viewport-wide, while its columns align to the site grid. */ .spc-nav-dropdown.spc-mega-menu{ padding-left:max(var(--spc-layout-gutter),calc((100vw - var(--spc-layout-max))/2))!important; padding-right:max(var(--spc-layout-gutter),calc((100vw - var(--spc-layout-max))/2))!important; } /* Homepage: same global width as the header, instead of a much narrower island. */ #home.spc-modern .spc-home-shell{ width:min(var(--spc-layout-max),calc(100% - (var(--spc-layout-gutter) * 2)))!important; max-width:none!important; } #home.spc-modern .spc-hero-inner{ grid-template-columns:minmax(460px,.95fr) minmax(360px,.72fr) minmax(260px,.55fr)!important; gap:48px!important; } #home.spc-modern .spc-hero-image{inset:0 0 0 55%!important;} #home.spc-modern .spc-hero:after{background:linear-gradient(90deg,#fff 0%,#fff 38%,rgba(255,255,255,.94) 48%,rgba(255,255,255,.20) 64%,rgba(255,255,255,0) 100%)!important;} /* Legacy pages should no longer sit inside the old 20px frame. Their own readable text widths remain intact where those pages explicitly define one. */ .page-wrapper>.content{width:100%!important;margin:0!important;} .page-wrapper>.content>div:not(#home){ max-width:var(--spc-layout-max); margin-left:auto; margin-right:auto; } /* Order flow benefits from the wider desktop canvas but remains centred. */ #rendeles{width:min(var(--spc-layout-max),calc(100% - (var(--spc-layout-gutter) * 2)))!important;margin-left:auto!important;margin-right:auto!important;} #rendeles .content{margin-left:0!important;margin-right:0!important;} /* Footer follows the exact same site axis as header/content. */ .page-footer{margin-top:0!important;padding-left:0!important;padding-right:0!important;} .page-footer>div>.container-fluid{ width:min(var(--spc-layout-max),calc(100% - (var(--spc-layout-gutter) * 2)))!important; max-width:none!important; margin-left:auto!important; margin-right:auto!important; padding-left:0!important; padding-right:0!important; } @media(max-width:1200px){ :root{--spc-layout-gutter:22px;} #home.spc-modern .spc-hero-inner{grid-template-columns:minmax(420px,1fr) minmax(330px,.82fr)!important;gap:28px!important;} #home.spc-modern .spc-hero-image{inset:0 0 0 58%!important;} } @media(max-width:767px){ :root{--spc-layout-gutter:14px;} .spc-primary-inner{width:100%!important;padding:0 8px!important;} #home.spc-modern .spc-home-shell{width:calc(100% - 28px)!important;} #rendeles{width:calc(100% - 20px)!important;} .page-footer>div>.container-fluid{width:calc(100% - 20px)!important;} } /********************************************************** SPEEDPC 2026 TYPOGRAPHY V8 Modern Google Fonts: DM Sans + Plus Jakarta Sans Mobile-first, Hungarian-friendly, no local font upload required. **********************************************************/ :root { --spc-font-body: "DM Sans", Arial, sans-serif; --spc-font-display: "Plus Jakarta Sans", "DM Sans", Arial, sans-serif; --spc-font-size-body: 17px; --spc-line-body: 1.62; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body, input, select, textarea { font-family: var(--spc-font-body) !important; } button, .gomb, .spc-btn, .spc-link, .spc-nav-item > a, .spc-utility-nav a, .spc-utility-actions a, .spc-utility-actions button { font-family: var(--spc-font-display) !important; } body { font-size: var(--spc-font-size-body); line-height: var(--spc-line-body); font-weight: 400; letter-spacing: -0.012em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Never let mobile form text drop below 16px (also prevents iOS auto-zoom). */ input, select, textarea, button { font-size: 16px; line-height: 1.4; } /* Global heading personality: modern, compact and less generic than a system font. */ h1, h2, h3, h4, h5, h6, .title1, .title2, .page-footer .title, .page-footer .title1, .page-footer .title2, .page-footer .title3 { font-family: var(--spc-font-display) !important; } #content .content > h1, #content .content > h2, #content .content > h3, #content .content .content-block > h1, #content .content .content-block > h2, #content .content .content-block > h3 { letter-spacing: -0.035em; line-height: 1.08; font-weight: 700; } /* Homepage */ #home.spc-modern h1 { font-family: var(--spc-font-display) !important; font-size: clamp(2.7rem, 9vw, 5.2rem); line-height: .96; letter-spacing: -0.058em; font-weight: 800; } #home.spc-modern h2 { font-family: var(--spc-font-display) !important; font-size: clamp(2.05rem, 6vw, 3.45rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 800; } #home.spc-modern h3 { font-family: var(--spc-font-display) !important; font-size: clamp(1.4rem, 4vw, 1.95rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; } #home.spc-modern .spc-lead { font-family: var(--spc-font-body) !important; font-size: clamp(1.07rem, 2.7vw, 1.24rem); line-height: 1.6; letter-spacing: -0.014em; } #home.spc-modern .spc-copy, #home.spc-modern .spc-list li { font-family: var(--spc-font-body) !important; font-size: 1rem; line-height: 1.62; } #home.spc-modern .spc-eyebrow { font-family: var(--spc-font-display) !important; font-size: .76rem; line-height: 1.35; letter-spacing: .095em; font-weight: 800; } #home.spc-modern .spc-price, #home.spc-modern .spc-price-line { font-family: var(--spc-font-display) !important; letter-spacing: -0.045em; } /* Header/nav: compact but not tiny. */ .spc-brand-text, .spc-nav-item > a, .spc-utility-nav > a, .spc-utility-actions > a, .spc-utility-actions > button, .spc-mega-title, .spc-mega-menu strong, .spc-nav-dropdown a { font-family: var(--spc-font-display) !important; } .spc-nav-item > a { font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.02em; } .spc-utility-nav > a, .spc-utility-actions > a, .spc-utility-actions > button { font-size: 13px; font-weight: 600; letter-spacing: -0.012em; } .spc-nav-dropdown a { font-size: 15px; line-height: 1.35; } .spc-nav-dropdown .spc-mega-desc, .spc-nav-dropdown small, .spc-nav-dropdown p { font-family: var(--spc-font-body) !important; letter-spacing: -0.01em; } /* Mobile navigation: explicitly designed for thumbs and readability. */ .mobile-menu, .mobile-menu a, .mobile-menu span, .mobile-menu p { font-family: var(--spc-font-body) !important; } .mobile-menu .main { font-family: var(--spc-font-display) !important; font-size: 1.18rem !important; line-height: 1.3; font-weight: 700; min-height: 54px; display: flex; align-items: center; } .mobile-menu .go { font-size: 1.03rem !important; line-height: 1.48; min-height: 50px; } .mobile-menu .go span, .mobile-menu .go h2 { font-size: inherit !important; } .mobile-menu .gomb { font-family: var(--spc-font-display) !important; font-size: 1rem !important; font-weight: 700; min-height: 48px; } /* Legacy pages: stop old 11–13px typography from dominating phones. */ @media (max-width: 767px) { :root { --spc-font-size-body: 17px; } #content p, #content li, #content td, #content th, #content label, #content .content a:not(.gomb), .page-footer p, .page-footer a, .page-footer span { font-family: var(--spc-font-body); font-size: max(15.5px, .96rem); line-height: 1.58; } #content h1 { font-size: clamp(2rem, 9vw, 2.8rem); } #content h2 { font-size: clamp(1.65rem, 7vw, 2.25rem); } #content h3 { font-size: clamp(1.3rem, 5.5vw, 1.75rem); } #home.spc-modern .spc-proof strong { font-size: .98rem; } #home.spc-modern .spc-proof span, #home.spc-modern .spc-domain-panel .spc-copy, #home.spc-modern .spc-trust span { font-size: .9rem; line-height: 1.46; } } @media (min-width: 768px) { :root { --spc-font-size-body: 16px; } } /********************************************************** SPEEDPC V9 — readable typography + mobile-first header/menu **********************************************************/ /* Desktop and shared readability: stop the micro-copy look. */ #home.spc-modern .spc-kicker, #home.spc-modern .spc-eyebrow { font-size:14px!important; line-height:1.35!important; } #home.spc-modern .spc-lead { font-size:19px!important; line-height:1.58!important; } #home.spc-modern .spc-copy { font-size:16.5px!important; line-height:1.62!important; } #home.spc-modern .spc-proof strong { font-size:15px!important; } #home.spc-modern .spc-proof span { font-size:13.5px!important; line-height:1.4!important; } #home.spc-modern .spc-domain-note { font-size:14px!important; line-height:1.55!important; } #home.spc-modern .spc-intent-grid>* { font-size:15px!important; } #home.spc-modern .spc-mail-compare span { font-size:14.5px!important; } #home.spc-modern .spc-checks li { font-size:15px!important; line-height:1.5!important; } #home.spc-modern .spc-feature-row span { font-size:13px!important; line-height:1.35!important; } #home.spc-modern .spc-feature-row b { font-size:15px!important; } #home.spc-modern .spc-price small { font-size:13.5px!important; } #home.spc-modern .spc-cta { min-height:46px!important; padding:0 20px!important; font-size:14px!important; } #home.spc-modern .spc-inline-links a { font-size:14px!important; } #home.spc-modern .spc-trust strong { font-size:13px!important; } #home.spc-modern .spc-trust span { font-size:13px!important; line-height:1.4!important; } #home.spc-modern .spc-knowledge-head>a { font-size:14px!important; } #home.spc-modern .hirek .title2 { font-size:12.5px!important; } #home.spc-modern .hirek .excerpt { font-size:14.5px!important; line-height:1.55!important; } #home.spc-modern .hirek .readmore { font-size:13.5px!important; } /* Mobile: use the dark brand header, not a white bar with an invisible wordmark. */ @media (max-width:767px) { html { font-size:18px!important; } body { font-size:18px!important; line-height:1.58!important; } #sidebartop { left:0!important; right:0!important; height:64px!important; min-height:64px!important; background:#0d2236!important; box-shadow:0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(7,27,45,.16)!important; border:0!important; z-index:10000!important; } #sidebartop .spc-utility-row { display:none!important; } #sidebartop .spc-primary-row, #sidebartop .spc-primary-inner { height:64px!important; min-height:64px!important; background:#0d2236!important; } #sidebartop .spc-primary-inner { padding:0 10px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; } /* Existing SVG icon + a guaranteed visible SPEEDPC wordmark. */ #sidebartop .logo { position:static!important; left:auto!important; top:auto!important; width:auto!important; height:64px!important; background:transparent!important; display:inline-flex!important; align-items:center!important; gap:8px!important; padding:0!important; margin:0!important; color:#fff!important; text-decoration:none!important; } #sidebartop .logo img { width:38px!important; height:44px!important; margin:0!important; object-fit:contain!important; } #sidebartop .logo:after { content:"SPEEDPC"; font-family:var(--spc-font-display)!important; font-size:18px!important; line-height:1!important; font-weight:800!important; letter-spacing:-.035em!important; color:#fff!important; } #sidebartop .right { position:static!important; top:auto!important; right:auto!important; display:flex!important; align-items:center!important; gap:5px!important; height:64px!important; } #sidebartop .right > .icon-menu, #sidebartop .right > .icon-search, #sidebartop .right > .headerlogin { width:42px!important; height:42px!important; min-width:42px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; margin:0!important; padding:0!important; top:auto!important; border:1px solid rgba(255,255,255,.16)!important; border-radius:8px!important; background:#142f48!important; color:#fff!important; font-size:20px!important; } #sidebartop .right > .headerlogin.webmail { background:#089d87!important; border-color:#089d87!important; } #sidebartop .right > .headerlogin.ugyfelkapu { background:#1678ef!important; border-color:#1678ef!important; } #sidebartop .right > .headerlogin i { font-size:21px!important; } #sidebartop .spc-mobile-search { top:64px!important; left:0!important; right:0!important; padding:12px!important; background:#0d2236!important; box-shadow:0 12px 22px rgba(7,27,45,.18)!important; } #sidebartop .spc-mobile-search input[type="text"] { width:100%!important; height:48px!important; font-size:16px!important; background:#fff!important; color:#17324c!important; border:0!important; border-radius:8px!important; } /* Content starts after the compact mobile header. */ #content .wrapper { padding-top:64px!important; border-top:0!important; } /* Home: deliberate phone typography, not scaled-down desktop typography. */ #home.spc-modern .spc-home-shell { width:calc(100% - 32px)!important; } #home.spc-modern .spc-hero { padding-top:38px!important; padding-bottom:38px!important; } #home.spc-modern h1 { font-size:clamp(2.35rem,11.5vw,3.15rem)!important; line-height:.98!important; } #home.spc-modern h2 { font-size:clamp(1.8rem,8.5vw,2.35rem)!important; line-height:1.06!important; } #home.spc-modern h3 { font-size:clamp(1.45rem,6.8vw,1.85rem)!important; line-height:1.12!important; } #home.spc-modern .spc-kicker, #home.spc-modern .spc-eyebrow { font-size:13px!important; letter-spacing:.085em!important; } #home.spc-modern .spc-lead { font-size:18px!important; line-height:1.55!important; } #home.spc-modern .spc-copy { font-size:17px!important; line-height:1.62!important; } #home.spc-modern .spc-proof strong { font-size:16px!important; } #home.spc-modern .spc-proof span { font-size:14.5px!important; } #home.spc-modern .spc-domain-panel h3 { font-size:25px!important; } #home.spc-modern .spc-domain-price { font-size:36px!important; } #home.spc-modern .spc-domain-price small { font-size:14px!important; } #home.spc-modern .spc-domain-note { font-size:15px!important; } #home.spc-modern #domainellform #domain { font-size:16px!important; height:52px!important; } #home.spc-modern #domainellform .gomb { min-height:52px!important; font-size:14px!important; } #home.spc-modern .spc-intent-grid>* { min-height:62px!important; font-size:15px!important; padding:12px 14px!important; } #home.spc-modern .spc-mail-compare span { font-size:15px!important; min-height:48px!important; } #home.spc-modern .spc-checks li { font-size:16px!important; line-height:1.52!important; } #home.spc-modern .spc-feature-row span { font-size:14px!important; } #home.spc-modern .spc-feature-row b { font-size:16px!important; } #home.spc-modern .spc-price { font-size:30px!important; } #home.spc-modern .spc-price small { font-size:14px!important; } #home.spc-modern .spc-cta { min-height:48px!important; font-size:15px!important; padding:0 18px!important; } #home.spc-modern .spc-inline-links a { font-size:15px!important; } #home.spc-modern .spc-trust-grid>div { min-height:86px!important; padding:14px 12px!important; } #home.spc-modern .spc-trust strong { font-size:14px!important; } #home.spc-modern .spc-trust span { font-size:14px!important; } #home.spc-modern .hirek .title1 { font-size:19px!important; line-height:1.2!important; } #home.spc-modern .hirek .title2 { font-size:13px!important; } #home.spc-modern .hirek .excerpt { font-size:16px!important; line-height:1.55!important; } #home.spc-modern .hirek .readmore { font-size:15px!important; } /* Native mobile slide-out: nearly full width, readable, thumb-sized. */ .sb-slidebar.sb-left { width:min(92vw,390px)!important; top:64px!important; background:#0d2236!important; z-index:9999!important; box-shadow:18px 0 45px rgba(0,0,0,.24)!important; } .mobile-menu { padding:0 0 32px!important; background:#0d2236!important; color:#fff!important; } .mobile-menu * { box-sizing:border-box!important; } .mobile-menu .mobile-menu-actions { display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; padding:16px!important; border-bottom:1px solid rgba(255,255,255,.12)!important; } .mobile-menu .mobile-action { min-height:50px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; border-radius:8px!important; color:#fff!important; font-family:var(--spc-font-display)!important; font-size:15px!important; font-weight:800!important; text-decoration:none!important; } .mobile-menu .mobile-action.webmail { background:#089d87!important; } .mobile-menu .mobile-action.account { background:#1678ef!important; } .mobile-menu .mobile-menu-home { display:flex!important; align-items:center!important; min-height:58px!important; padding:0 18px!important; color:#fff!important; font-family:var(--spc-font-display)!important; font-size:18px!important; font-weight:700!important; border-bottom:1px solid rgba(255,255,255,.11)!important; text-decoration:none!important; } .mobile-menu details { margin:0!important; padding:0!important; border-bottom:1px solid rgba(255,255,255,.11)!important; } .mobile-menu summary { list-style:none!important; min-height:60px!important; padding:0 18px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:15px!important; cursor:pointer!important; color:#fff!important; font-family:var(--spc-font-display)!important; font-size:19px!important; line-height:1.2!important; font-weight:700!important; user-select:none!important; } .mobile-menu summary::-webkit-details-marker { display:none!important; } .mobile-menu summary:after { content:"+"; font-size:26px!important; line-height:1!important; color:#7ebcff!important; font-weight:500!important; } .mobile-menu details[open] summary:after { content:"−"; } .mobile-menu details[open] summary { background:#102a43!important; } .mobile-menu .mobile-submenu { padding:4px 12px 14px!important; background:#0a1d2f!important; } .mobile-menu .mobile-submenu a { min-height:52px!important; display:flex!important; align-items:center!important; padding:10px 12px!important; color:#e9f2f9!important; text-decoration:none!important; border-bottom:1px solid rgba(255,255,255,.075)!important; font-size:16px!important; line-height:1.35!important; font-weight:500!important; } .mobile-menu .mobile-submenu a:last-child { border-bottom:0!important; } .mobile-menu .mobile-submenu a:before { content:"→"; margin-right:10px!important; color:#5ba5ff!important; font-weight:800!important; } .mobile-menu .mobile-submenu .mobile-cta { margin:10px 4px 0!important; min-height:50px!important; justify-content:center!important; border:0!important; border-radius:8px!important; background:#1678ef!important; color:#fff!important; font-family:var(--spc-font-display)!important; font-weight:800!important; } .mobile-menu .mobile-submenu .mobile-cta:before { display:none!important; } .mobile-menu .mobile-menu-utility { padding:18px 16px!important; display:grid!important; gap:8px!important; } .mobile-menu .mobile-menu-utility a { display:flex!important; align-items:center!important; min-height:48px!important; padding:0 12px!important; border:1px solid rgba(255,255,255,.12)!important; border-radius:7px!important; color:#dce9f3!important; font-size:15px!important; font-weight:600!important; text-decoration:none!important; } } /********************************************************** SPEEDPC 2026 DESKTOP NAVIGATION V10 — intent-led mega menus Primary navigation stays short. Mega menus speak the customer's language and contain their own knowledge/support pathways. **********************************************************/ @media (min-width:768px){ :root{ --spc-utility-h:40px; --spc-primary-h:76px; --spc-header-total:116px; --spc-mega-bg:#e8f1f6; --spc-mega-border:#c9d9e4; } #sidebartop.spc-header-v10{height:var(--spc-header-total)!important;background:transparent!important;} .wrapper{margin-top:var(--spc-header-total)!important;} .spc-utility-row{height:var(--spc-utility-h)!important;background:#0c1e2f!important;} .spc-primary-row{height:var(--spc-primary-h)!important;background:#17202a!important;} .spc-utility-inner,.spc-primary-inner{ width:min(var(--spc-layout-max),calc(100% - (var(--spc-layout-gutter) * 2)))!important; margin:0 auto!important;padding:0!important; } .spc-utility-inner{justify-content:flex-end!important;gap:18px!important;} .spc-contact-links{display:flex;align-items:center;gap:18px;height:100%;} .spc-contact-links a{display:inline-flex;align-items:center;gap:7px;color:#c8d6e1!important;text-decoration:none!important;font-size:13px!important;font-weight:600!important;line-height:1;} .spc-contact-links a:hover{color:#fff!important;} .spc-contact-links i{font-size:14px;color:#7fb4da;} .spc-utility-actions{gap:8px!important;} .spc-utility-actions .headerlogin{height:31px!important;font-size:11px!important;padding:0 12px!important;} #frmsignin,#frmsignin2{top:var(--spc-header-total)!important;} .spc-primary-inner{gap:30px!important;position:relative!important;} #sidebartop .spc-desktop-logo{padding-right:14px!important;} .spc-desktop-nav{flex:0 1 auto!important;} .spc-nav-list{gap:3px!important;} .spc-nav-item{position:static!important;} .spc-nav-item>a{height:var(--spc-primary-h)!important;padding:0 21px!important;font-size:16px!important;font-weight:700!important;letter-spacing:-.02em!important;} .spc-nav-arrow{font-size:14px!important;margin-left:2px!important;} .spc-primary-search{margin-left:auto;height:100%;display:flex;align-items:center;} .spc-primary-search .icon-search{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;color:#fff;font-size:20px;cursor:pointer;transition:.15s ease;} .spc-primary-search .icon-search:hover{background:#263543;border-color:#3a4d5e;} #sidebartop .spc-header-search{display:none;position:absolute!important;right:0!important;top:var(--spc-primary-h)!important;width:420px!important;height:auto!important;line-height:normal!important;padding:14px!important;background:#fff!important;border:1px solid #d7e2ea!important;box-shadow:0 18px 45px rgba(17,38,56,.18)!important;z-index:10080!important;} #sidebartop .spc-header-search input[type="text"]{position:static!important;top:auto!important;width:100%!important;height:50px!important;margin:0!important;padding:0 16px!important;background:#f4f7f9!important;color:#17324b!important;border:1px solid #d4e0e8!important;border-radius:8px!important;font-size:16px!important;} /* The dropdown background spans the full viewport. Its content stays on the shared site grid. */ .spc-nav-dropdown.spc-mega-menu{ position:fixed!important;left:0!important;right:0!important;top:var(--spc-header-total)!important;width:100vw!important;max-width:none!important; min-height:0!important;padding:0!important;background:var(--spc-mega-bg)!important;border:0!important;border-top:1px solid var(--spc-mega-border)!important;border-bottom:1px solid var(--spc-mega-border)!important; border-radius:0!important;box-shadow:0 30px 70px rgba(14,35,53,.18)!important;display:block!important; opacity:0!important;visibility:hidden!important;transform:translateY(8px)!important;transition:opacity .14s ease,transform .14s ease,visibility .14s ease!important;z-index:10050!important; } .spc-nav-item:hover>.spc-nav-dropdown.spc-mega-menu,.spc-nav-item:focus-within>.spc-nav-dropdown.spc-mega-menu{opacity:1!important;visibility:visible!important;transform:translateY(0)!important;} .spc-mega-inner{width:min(var(--spc-layout-max),calc(100% - (var(--spc-layout-gutter) * 2)));margin:0 auto;padding:34px 0 30px;display:grid;gap:34px;align-items:start;} .spc-mega-4col{grid-template-columns:1.15fr 1fr .9fr .95fr;} .spc-mega-web-grid{grid-template-columns:1.15fr 1fr .9fr .9fr;} .spc-mega-column{max-width:none!important;min-width:0;} .spc-mega-title{font-size:13px!important;line-height:1.25!important;letter-spacing:.055em!important;margin:0 0 13px!important;padding:0 0 11px!important;color:#1568b8!important;border-bottom:1px solid #c4d5e0!important;} .spc-mega-link{gap:13px!important;padding:11px 8px!important;margin:0 0 3px!important;border-radius:8px!important;} .spc-mega-link>i{width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:9px!important;font-size:18px!important;background:#d6e6f0!important;} .spc-mega-link strong{font-size:16px!important;line-height:1.28!important;margin:0 0 4px!important;font-weight:700!important;letter-spacing:-.018em!important;} .spc-mega-link small{font-size:13px!important;line-height:1.45!important;color:#64778a!important;} .spc-mega-knowledge{padding:0 2px;} .spc-mega-knowledge>a{display:block;padding:10px 2px 11px;border-bottom:1px solid rgba(103,130,150,.18);color:#17324b!important;text-decoration:none!important;} .spc-mega-knowledge>a:last-child{border-bottom:0;} .spc-mega-knowledge>a:hover strong{color:#126fc9!important;} .spc-mega-knowledge strong{display:block;font-size:15px;line-height:1.35;font-weight:700;} .spc-mega-knowledge small{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:#6c7d8c;} .spc-mega-help{background:#fff;border:1px solid #cbdbe6;padding:24px;border-radius:10px;box-shadow:0 8px 26px rgba(23,58,84,.05);} .spc-mega-help .spc-mega-title{padding-left:0!important;} .spc-mega-help h3{font-size:24px!important;line-height:1.12!important;margin:14px 0 9px!important;color:#102b43!important;letter-spacing:-.035em!important;} .spc-mega-help>p:not(.spc-mega-title),.spc-mega-wide-help p{font-size:14px!important;line-height:1.55!important;color:#63778a!important;} .spc-mega-help-link{display:inline-flex!important;margin-top:10px!important;color:#126fc9!important;font-size:15px!important;font-weight:800!important;text-decoration:none!important;} .spc-mega-help-note{margin:10px 0 0!important;font-size:12.5px!important;} .spc-menu-domain-form{display:flex;gap:7px;margin-top:15px;} .spc-menu-domain-form input{width:100%;min-width:0;height:46px;padding:0 12px;border:1px solid #cbd9e3;border-radius:7px;background:#f7fafc;color:#17324b;font-size:14px;} .spc-menu-domain-form button{height:46px;padding:0 14px;border:0;border-radius:7px;background:#1677ea;color:#fff;font-size:13px;font-weight:800;cursor:pointer;} .spc-menu-domain-form button:hover{background:#0e69d5;} .spc-mega-wide-help{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:21px 24px;} .spc-mega-wide-help>div{max-width:920px;} .spc-mega-wide-help h3{font-size:21px!important;margin:5px 0 4px!important;} .spc-mega-wide-help .spc-mega-help-link{flex:0 0 auto;margin:0!important;padding:13px 17px;background:#1677ea;color:#fff!important;border-radius:8px;} @media(max-width:1320px){ .spc-nav-item>a{padding:0 15px!important;font-size:15px!important;} .spc-mega-inner{gap:22px;} .spc-mega-link strong{font-size:15px!important;} } @media(max-width:1080px){ .spc-contact-links a span{display:none;} .spc-contact-links{gap:8px;} .spc-nav-item>a{padding:0 11px!important;font-size:14px!important;} } } /* ========================================================== SPEEDPC DESKTOP NAVIGATION V12 Problem-led information architecture ========================================================== */ @media (min-width:768px){ :root{ --spc-utility-h:38px; --spc-primary-h:72px; --spc-header-total:110px; --spc-mega-bg:#edf4f8; --spc-mega-border:#cfdee7; } #sidebartop.spc-header-v10{ height:var(--spc-header-total)!important; } .spc-utility-row{ height:var(--spc-utility-h)!important; background:#091b2b!important; border-bottom:1px solid rgba(255,255,255,.08)!important; } .spc-utility-inner.spc-utility-contact-only{ height:100%!important; width:min(var(--spc-layout-max),calc(100% - (var(--spc-layout-gutter) * 2)))!important; margin:0 auto!important; padding:0!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; } .spc-utility-contact-only .spc-contact-links{ display:flex!important; align-items:center!important; gap:24px!important; } .spc-utility-contact-only .spc-contact-links a{ display:inline-flex!important; align-items:center!important; gap:8px!important; color:#dfe9f0!important; font-size:13px!important; line-height:1!important; font-weight:600!important; text-decoration:none!important; opacity:.96!important; } .spc-utility-contact-only .spc-contact-links a:hover{color:#fff!important;} .spc-utility-contact-only .spc-contact-links i{font-size:14px!important;color:#7cc7ff!important;} .spc-primary-row, .spc-primary-inner{ height:var(--spc-primary-h)!important; min-height:var(--spc-primary-h)!important; } .spc-primary-row{background:#10283d!important;} .spc-primary-inner{ width:min(var(--spc-layout-max),calc(100% - (var(--spc-layout-gutter) * 2)))!important; margin:0 auto!important; padding:0!important; display:flex!important; align-items:stretch!important; gap:14px!important; } #sidebartop .spc-desktop-logo{ height:var(--spc-primary-h)!important; flex:0 0 auto!important; padding-right:22px!important; } .spc-desktop-nav{ position:static!important; display:flex!important; align-items:stretch!important; flex:1 1 auto!important; min-width:0!important; } .spc-nav-list.spc-nav-v12{ height:100%!important; width:auto!important; display:flex!important; align-items:stretch!important; gap:2px!important; margin:0!important; padding:0!important; } .spc-nav-v12 .spc-nav-item>a{ height:var(--spc-primary-h)!important; padding:0 17px!important; display:flex!important; align-items:center!important; gap:6px!important; color:#f4f8fb!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; font-size:15px!important; line-height:1!important; font-weight:700!important; letter-spacing:-.018em!important; border-radius:0!important; } .spc-nav-v12 .spc-nav-item>a:hover, .spc-nav-v12 .spc-nav-item:focus-within>a{ background:var(--spc-mega-bg)!important; color:#17334a!important; } .spc-nav-v12 .spc-nav-arrow{font-size:13px!important;opacity:.7!important;} .spc-nav-v12 .spc-nav-knowledge>a{color:#bfe7ff!important;} .spc-nav-v12 .spc-nav-knowledge:hover>a, .spc-nav-v12 .spc-nav-knowledge:focus-within>a{color:#17334a!important;} .spc-primary-client-actions{ flex:0 0 auto!important; display:flex!important; align-items:center!important; gap:8px!important; margin-left:auto!important; position:relative!important; } .spc-primary-client-actions>.headerlogin{ height:38px!important; min-height:38px!important; padding:0 13px!important; margin:0!important; border-radius:8px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; color:#fff!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; font-size:11px!important; line-height:1!important; font-weight:800!important; letter-spacing:.025em!important; text-decoration:none!important; cursor:pointer!important; } .spc-primary-client-actions>.webmail{background:#078c78!important;} .spc-primary-client-actions>.webmail:hover{background:#067765!important;} .spc-primary-client-actions>.ugyfelkapu{background:#1677ea!important;} .spc-primary-client-actions>.ugyfelkapu:hover{background:#0d67cd!important;} .spc-primary-client-actions>.headerlogin i{font-size:16px!important;} .spc-primary-client-actions #frmsignin, .spc-primary-client-actions #frmsignin2{ top:58px!important; right:0!important; left:auto!important; z-index:10150!important; } /* Full-width mega menus, content aligned to site grid */ .spc-nav-v12 .spc-nav-dropdown.spc-mega-menu{ position:fixed!important; left:0!important; right:0!important; top:var(--spc-header-total)!important; width:100vw!important; max-width:none!important; margin:0!important; padding:0!important; background:var(--spc-mega-bg)!important; border-top:1px solid var(--spc-mega-border)!important; border-bottom:1px solid var(--spc-mega-border)!important; box-shadow:0 22px 46px rgba(17,43,64,.14)!important; } .spc-nav-v12 .spc-mega-inner{ width:min(var(--spc-layout-max),calc(100% - (var(--spc-layout-gutter) * 2)))!important; margin:0 auto!important; padding:34px 0 32px!important; display:grid!important; gap:34px!important; align-items:start!important; } .spc-mega-domain-v12, .spc-mega-4col-v12, .spc-mega-web-v12{ grid-template-columns:1.18fr 1fr 1fr .95fr!important; } .spc-mega-knowledge-v12{ grid-template-columns:1.15fr 1.05fr 1fr .9fr!important; } .spc-nav-v12 .spc-mega-column{min-width:0!important;max-width:none!important;} .spc-nav-v12 .spc-mega-title{ margin:0 0 13px!important; padding:0 0 10px!important; border-bottom:1px solid #c8d8e2!important; color:#1269b3!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; font-size:12px!important; line-height:1.25!important; font-weight:800!important; letter-spacing:.075em!important; text-transform:uppercase!important; } .spc-nav-v12 .spc-mega-subtitle{margin-top:24px!important;} .spc-nav-v12 .spc-mega-link{ display:block!important; margin:0!important; padding:10px 8px 11px!important; border-radius:7px!important; text-decoration:none!important; transition:background .15s ease,transform .15s ease!important; } .spc-nav-v12 .spc-mega-link:hover{ background:rgba(255,255,255,.72)!important; transform:translateX(2px)!important; } .spc-nav-v12 .spc-mega-link span{display:block!important;} .spc-nav-v12 .spc-mega-link strong{ display:block!important; color:#17324a!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; font-size:15px!important; line-height:1.34!important; font-weight:700!important; letter-spacing:-.018em!important; } .spc-nav-v12 .spc-mega-link small{ display:block!important; margin-top:4px!important; color:#667b8e!important; font-family:'DM Sans',sans-serif!important; font-size:13px!important; line-height:1.48!important; font-weight:400!important; } .spc-nav-v12 .spc-mega-help{ min-width:0!important; padding:22px!important; background:#fff!important; border:1px solid #cadbe5!important; border-radius:10px!important; box-shadow:0 10px 30px rgba(22,57,82,.06)!important; } .spc-nav-v12 .spc-mega-help h3{ margin:11px 0 9px!important; color:#102b43!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; font-size:22px!important; line-height:1.15!important; font-weight:800!important; letter-spacing:-.035em!important; } .spc-nav-v12 .spc-mega-help>p:not(.spc-mega-title){ color:#61778a!important; font-size:13px!important; line-height:1.55!important; } .spc-nav-v12 .spc-mega-help-link{ display:inline-flex!important; margin-top:9px!important; color:#0e6fc7!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; font-size:14px!important; font-weight:800!important; text-decoration:none!important; } .spc-menu-domain-form{display:flex!important;gap:8px!important;margin-top:15px!important;} .spc-menu-domain-form input{ min-width:0!important; flex:1!important; height:46px!important; padding:0 13px!important; border:1px solid #c7d8e3!important; border-radius:7px!important; background:#f8fbfd!important; color:#17324a!important; font-size:15px!important; } .spc-menu-domain-form button{ height:46px!important; padding:0 15px!important; border:0!important; border-radius:7px!important; background:#1677ea!important; color:#fff!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; font-size:13px!important; font-weight:800!important; cursor:pointer!important; } @media (max-width:1320px){ .spc-nav-v12 .spc-nav-item>a{padding:0 11px!important;font-size:14px!important;} .spc-primary-client-actions>.headerlogin{padding:0 10px!important;font-size:10px!important;} .spc-nav-v12 .spc-mega-inner{gap:22px!important;} .spc-nav-v12 .spc-mega-link strong{font-size:14px!important;} .spc-nav-v12 .spc-mega-link small{font-size:12.5px!important;} } } /* ========================================================== SPEEDPC DESKTOP HEADER V13 — final hierarchy refinements ========================================================== */ @media (min-width:768px){ /* Knowledge base is a normal primary-navigation item. */ .spc-nav-v12 .spc-nav-item>a{position:relative!important;} .spc-nav-v12 .spc-nav-item.is-active>a{ color:#7dd3fc!important; background:rgba(255,255,255,.035)!important; } .spc-nav-v12 .spc-nav-item.is-active>a:after{ content:""; position:absolute; left:17px; right:17px; bottom:0; height:3px; background:#38bdf8; } .spc-nav-v12 .spc-nav-item.is-active:hover>a, .spc-nav-v12 .spc-nav-item.is-active:focus-within>a{ color:#17334a!important; background:var(--spc-mega-bg)!important; } .spc-nav-v12 .spc-nav-item.is-active:hover>a:after, .spc-nav-v12 .spc-nav-item.is-active:focus-within>a:after{background:#1677ea!important;} /* Utility row: contact only, intentionally calm and human. */ .spc-utility-contact-only .spc-contact-links{gap:28px!important;} .spc-utility-contact-only .spc-contact-links a{font-size:13px!important;font-weight:600!important;} /* Clearly separate customer tools from acquisition navigation. */ .spc-primary-client-actions{ min-width:244px!important; padding:17px 0 6px 20px!important; margin-left:14px!important; border-left:1px solid rgba(255,255,255,.16)!important; align-items:flex-end!important; } .spc-primary-client-actions .spc-client-label{ position:absolute!important; top:8px!important; left:20px!important; color:#a8bac8!important; font-family:'DM Sans',sans-serif!important; font-size:10px!important; line-height:1!important; font-weight:700!important; letter-spacing:.08em!important; text-transform:uppercase!important; white-space:nowrap!important; } .spc-primary-client-actions>.headerlogin{ height:34px!important; min-height:34px!important; padding:0 12px!important; font-size:11px!important; } /* Icons are navigation aids, not decoration. */ .spc-nav-v12 .spc-mega-link>i{ display:flex!important; width:40px!important; height:40px!important; flex:0 0 40px!important; align-items:center!important; justify-content:center!important; border-radius:9px!important; background:#d9e8f1!important; color:#1c587c!important; font-size:17px!important; } .spc-nav-v12 .spc-mega-link:hover>i{ background:#cce2ef!important; color:#0e6fae!important; } } /* ========================================================== WEBKOMFORT BRAND + MOBILE MEGA MENU V14 ========================================================== */ /* Text-based transitional brand. No external logo asset required. */ #sidebartop .spc-brand{ text-decoration:none!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; } #sidebartop .spc-desktop-logo.spc-brand{ min-width:196px!important; padding-right:24px!important; display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:flex-start!important; gap:2px!important; } #sidebartop .spc-brand-name{ display:block!important; color:#fff!important; font-size:27px!important; line-height:1!important; font-weight:800!important; letter-spacing:-.045em!important; } #sidebartop .spc-brand-legacy{ display:block!important; color:#8fb5d0!important; font-family:'DM Sans',sans-serif!important; font-size:9.5px!important; line-height:1!important; font-weight:700!important; letter-spacing:.13em!important; text-transform:uppercase!important; } /* Mobile header */ @media (max-width:767px){ #sidebartop.spc-main-header{ height:66px!important; min-height:66px!important; background:#10283d!important; box-shadow:0 2px 9px rgba(8,28,43,.2)!important; } #sidebartop .spc-primary-row, #sidebartop .spc-primary-inner{ height:66px!important; min-height:66px!important; } #sidebartop .spc-primary-inner{ padding:0 10px!important; display:flex!important; align-items:center!important; gap:7px!important; } #sidebartop .spc-mobile-brand{ position:static!important; width:auto!important; height:auto!important; margin:0 auto 0 0!important; padding:0!important; background:transparent!important; display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:flex-start!important; gap:1px!important; } #sidebartop .spc-mobile-brand .spc-brand-name{ font-size:20px!important; letter-spacing:-.04em!important; color:#fff!important; } #sidebartop .spc-mobile-brand .spc-brand-legacy{ font-size:7.5px!important; color:#85abc5!important; letter-spacing:.10em!important; } #sidebartop .right{ display:flex!important; align-items:center!important; gap:5px!important; height:66px!important; } #sidebartop .icon-menu{ width:42px!important; height:42px!important; line-height:40px!important; padding:0!important; text-align:center!important; color:#fff!important; background:#173a57!important; border:1px solid #31516b!important; border-radius:8px!important; font-size:24px!important; } #sidebartop .right .headerlogin{ width:42px!important; height:42px!important; min-height:42px!important; padding:0!important; margin:0!important; border-radius:8px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; top:auto!important; } #sidebartop .right .headerlogin.webmail{background:#078c78!important;} #sidebartop .right .headerlogin.ugyfelkapu{background:#1677ea!important;} #sidebartop .right .headerlogin i{ border:0!important; padding:0!important; margin:0!important; color:#fff!important; font-size:23px!important; } /* Fully reset old mobile-menu rules. */ .mobile-menu.spc-mobile-mega{ padding:0 0 34px!important; margin:0!important; background:#f5f8fb!important; color:#142d43!important; font-family:'DM Sans',sans-serif!important; } .spc-mobile-customer-block{ padding:18px 16px 16px!important; background:#10283d!important; border-top:1px solid rgba(255,255,255,.08)!important; } .spc-mobile-customer-label{ display:block!important; margin:0 0 9px!important; color:#abc0d0!important; font-size:11px!important; line-height:1!important; font-weight:700!important; letter-spacing:.08em!important; text-transform:uppercase!important; } .spc-mobile-customer-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; } .spc-mobile-customer-actions .mobile-action{ min-height:48px!important; padding:0 13px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; color:#fff!important; text-decoration:none!important; border-radius:8px!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; font-size:14px!important; line-height:1!important; font-weight:800!important; } .spc-mobile-customer-actions .webmail{background:#078c78!important;} .spc-mobile-customer-actions .account{background:#1677ea!important;} .spc-mobile-customer-actions i{font-size:20px!important;} .spc-mobile-contact-strip{ padding:11px 16px!important; display:grid!important; gap:7px!important; background:#e9f0f5!important; border-bottom:1px solid #d6e1e9!important; } .spc-mobile-contact-strip a{ min-height:31px!important; display:flex!important; align-items:center!important; gap:9px!important; color:#27435b!important; text-decoration:none!important; font-size:14px!important; line-height:1.25!important; font-weight:600!important; } .spc-mobile-contact-strip i{width:20px!important;color:#1778d4!important;font-size:15px!important;} .spc-mobile-mega .mobile-menu-home{ min-height:58px!important; margin:0!important; padding:0 17px!important; display:flex!important; align-items:center!important; gap:10px!important; background:#fff!important; color:#102b43!important; border-bottom:1px solid #d9e4eb!important; text-decoration:none!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; font-size:17px!important; line-height:1!important; font-weight:700!important; } .spc-mobile-mega .mobile-menu-home i{color:#1778d4!important;font-size:18px!important;} .spc-mobile-main-group{ margin:0!important; padding:0!important; background:#fff!important; border:0!important; border-bottom:1px solid #d9e4eb!important; } .spc-mobile-main-group>summary{ min-height:60px!important; padding:0 17px!important; margin:0!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:15px!important; cursor:pointer!important; list-style:none!important; color:#102b43!important; background:#fff!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; font-size:18px!important; line-height:1.15!important; font-weight:800!important; letter-spacing:-.025em!important; } .spc-mobile-main-group>summary::-webkit-details-marker{display:none!important;} .spc-mobile-chevron{ flex:0 0 auto!important; color:#1778d4!important; font-size:24px!important; line-height:1!important; font-weight:600!important; transform:rotate(0deg)!important; transition:transform .18s ease!important; } .spc-mobile-main-group[open]>summary{ background:#edf4f8!important; color:#0d65b3!important; } .spc-mobile-main-group[open]>summary .spc-mobile-chevron{transform:rotate(180deg)!important;} .spc-mobile-mega-body{ padding:4px 14px 16px!important; background:#edf4f8!important; } .spc-mobile-mega-body section{ margin:10px 0 0!important; padding:14px 0 2px!important; border-top:1px solid #ccdae4!important; } .spc-mobile-mega-body section:first-child{margin-top:0!important;border-top:0!important;} .spc-mobile-mega-body h3{ margin:0 4px 9px!important; color:#1269b3!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; font-size:12px!important; line-height:1.3!important; font-weight:800!important; letter-spacing:.07em!important; text-transform:uppercase!important; } .spc-mobile-mega-body section>a{ min-height:54px!important; margin:0 0 5px!important; padding:10px 10px!important; display:block!important; background:#fff!important; color:#17324a!important; border:1px solid #d4e0e8!important; border-radius:7px!important; text-decoration:none!important; } .spc-mobile-mega-body section>a strong{ display:block!important; color:#17324a!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; font-size:15px!important; line-height:1.34!important; font-weight:700!important; letter-spacing:-.015em!important; } .spc-mobile-mega-body section>a small{ display:block!important; margin-top:4px!important; color:#65798a!important; font-size:13.5px!important; line-height:1.45!important; font-weight:400!important; } .spc-mobile-domain-check form{ display:grid!important; grid-template-columns:1fr auto!important; gap:7px!important; padding:0 4px 8px!important; } .spc-mobile-domain-check input{ min-width:0!important; height:46px!important; padding:0 12px!important; border:1px solid #c4d5e0!important; border-radius:7px!important; background:#fff!important; color:#17324a!important; font-size:16px!important; } .spc-mobile-domain-check button{ height:46px!important; padding:0 13px!important; border:0!important; border-radius:7px!important; background:#1677ea!important; color:#fff!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; font-size:13px!important; font-weight:800!important; } } /* ========================================================== WEBKOMFORT HEADER / MOBILE NAV V15 — minimal final pass ========================================================== */ /* Brand: one strong wordmark, tiny transitional signature. */ #sidebartop .spc-brand-name{ text-transform:uppercase!important; font-size:29px!important; font-weight:800!important; line-height:.96!important; letter-spacing:-.055em!important; } #sidebartop .spc-brand-legacy{ margin-top:5px!important; color:#39c6c8!important; font-family:'DM Sans',sans-serif!important; font-size:9px!important; font-style:italic!important; font-weight:500!important; line-height:1!important; letter-spacing:.025em!important; text-transform:none!important; } /* Active state: exactly one section, visually restrained. */ @media (min-width:768px){ .spc-nav-v12 .spc-nav-item>a{ background:transparent!important; color:#fff!important; } .spc-nav-v12 .spc-nav-item.is-active>a{ color:#59d4d6!important; background:rgba(89,212,214,.055)!important; } .spc-nav-v12 .spc-nav-item.is-active>a:after{ background:#59d4d6!important; } .spc-nav-v12 .spc-nav-item:not(.is-active):hover>a, .spc-nav-v12 .spc-nav-item:not(.is-active):focus-within>a{ color:#fff!important; background:rgba(255,255,255,.045)!important; } } /* Remove every legacy pseudo-logo on mobile. */ @media (max-width:767px){ #sidebartop .logo, #sidebartop .logo:before, #sidebartop .logo:after{ content:none!important; display:none!important; } #sidebartop .spc-mobile-brand{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; margin-right:auto!important; } #sidebartop .spc-mobile-brand .spc-brand-name{ text-transform:uppercase!important; font-size:19px!important; line-height:.95!important; letter-spacing:-.055em!important; } #sidebartop .spc-mobile-brand .spc-brand-legacy{ margin-top:4px!important; color:#39c6c8!important; font-size:7.5px!important; font-style:italic!important; font-weight:500!important; letter-spacing:.02em!important; text-transform:none!important; } /* Header contains only brand + menu trigger. */ #sidebartop .right>.headerlogin{display:none!important;} #sidebartop .right{gap:0!important;} /* Compact utility area INSIDE the drawer. */ .mobile-menu.spc-mobile-mega .spc-mobile-utility{ padding:11px 12px 10px!important; background:#0b2134!important; border-bottom:1px solid rgba(255,255,255,.1)!important; } .mobile-menu.spc-mobile-mega .spc-mobile-login-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; } .mobile-menu.spc-mobile-mega .spc-mobile-login-actions .mobile-action{ min-height:42px!important; border-radius:6px!important; font-size:13.5px!important; font-weight:700!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-icons{ display:flex!important; align-items:center!important; justify-content:center!important; gap:18px!important; padding-top:10px!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-icons a{ width:36px!important; height:36px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; padding:0!important; border:1px solid #c8d8e2!important; border-radius:50%!important; background:#fff!important; color:#166fae!important; text-decoration:none!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-icons i{ margin:0!important; font-size:16px!important; } /* There is ONE disclosure affordance: the blue down chevron in markup. */ .mobile-menu.spc-mobile-mega summary:after, .mobile-menu.spc-mobile-mega summary:before{ content:none!important; display:none!important; } .mobile-menu.spc-mobile-mega .spc-mobile-chevron{ display:inline-block!important; color:#1682d4!important; font-size:22px!important; line-height:1!important; transform:rotate(0deg)!important; transition:transform .18s ease!important; } .mobile-menu.spc-mobile-mega details[open]>summary .spc-mobile-chevron{ transform:rotate(180deg)!important; } /* Less decoration, more hierarchy. */ .mobile-menu.spc-mobile-mega .mobile-menu-home{ background:#fff!important; color:#153047!important; border-bottom:1px solid #dbe5eb!important; } .mobile-menu.spc-mobile-mega .spc-mobile-main-group>summary{ background:#fff!important; color:#153047!important; border:0!important; } .mobile-menu.spc-mobile-mega .spc-mobile-main-group[open]>summary{ background:#eaf3f6!important; color:#0e6e9f!important; } .mobile-menu.spc-mobile-mega .spc-mobile-mega-body{ background:#eef5f7!important; } } /* ========================================================== WEBKOMFORT HEADER V16 — one brand, compact desktop utility, labelled mobile actions ========================================================== */ /* Keep the single compact wordmark on every viewport. */ #sidebartop .spc-brand{ width:150px!important; min-width:150px!important; } #sidebartop .spc-brand-name{ font-size:22px!important; line-height:1!important; letter-spacing:-.045em!important; } #sidebartop .spc-brand-legacy{ align-self:flex-end!important; margin-top:3px!important; color:#39c6c8!important; font-size:7px!important; line-height:1!important; font-style:italic!important; font-weight:600!important; letter-spacing:.015em!important; } @media (min-width:768px){ /* Contacts + customer tools live in the slim top utility bar. */ #sidebartop .spc-utility-inner.spc-utility-contact-only{ display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:22px!important; } #sidebartop .spc-contact-links{ margin-left:auto!important; } #sidebartop .spc-utility-client-actions{ display:flex!important; align-items:center!important; gap:7px!important; padding-left:16px!important; border-left:1px solid rgba(255,255,255,.14)!important; } #sidebartop .spc-utility-client-actions .spc-client-label{ margin-right:2px!important; color:#91a9bc!important; font-size:9px!important; line-height:1!important; font-weight:700!important; text-transform:uppercase!important; letter-spacing:.08em!important; } #sidebartop .spc-utility-client-actions .headerlogin{ position:relative!important; top:auto!important; right:auto!important; float:none!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; height:27px!important; min-height:27px!important; padding:0 9px!important; margin:0!important; border-radius:6px!important; font-size:10px!important; font-weight:800!important; line-height:1!important; } #sidebartop .spc-utility-client-actions .headerlogin i{ margin-right:5px!important; font-size:14px!important; } /* The primary row is now only brand + navigation, so it fits earlier. */ #sidebartop .spc-primary-inner{ justify-content:flex-start!important; gap:22px!important; } #sidebartop .spc-desktop-nav{ flex:1 1 auto!important; min-width:0!important; } #sidebartop .spc-nav-v12{ justify-content:flex-start!important; } } @media (max-width:767px){ #sidebartop .spc-mobile-brand{ width:112px!important; min-width:112px!important; } #sidebartop .spc-mobile-brand .spc-brand-name{ font-size:16px!important; line-height:1!important; } #sidebartop .spc-mobile-brand .spc-brand-legacy{ align-self:flex-end!important; margin-top:2px!important; font-size:6px!important; } /* Clear order: contact actions, customer logins, navigation. */ .mobile-menu.spc-mobile-mega .spc-mobile-utility{ padding:0!important; background:#0b2134!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-actions{ display:grid!important; grid-template-columns:repeat(3,1fr)!important; border-bottom:1px solid rgba(255,255,255,.1)!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-actions a{ min-height:42px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; padding:0 5px!important; color:#fff!important; background:transparent!important; border-right:1px solid rgba(255,255,255,.1)!important; font-size:12.5px!important; font-weight:650!important; text-decoration:none!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-actions a:last-child{ border-right:0!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-actions i{ margin:0!important; color:#5ed9da!important; font-size:14px!important; } .mobile-menu.spc-mobile-mega .spc-mobile-login-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:1px!important; padding:0!important; background:rgba(255,255,255,.1)!important; border-bottom:1px solid rgba(255,255,255,.1)!important; } .mobile-menu.spc-mobile-mega .spc-mobile-login-actions .mobile-action{ min-height:43px!important; border-radius:0!important; margin:0!important; font-size:12.5px!important; font-weight:750!important; } } /* ========================================================== WEBKOMFORT HEADER V17 Final simplification: one wordmark, utility tools upstairs, navigation gets the entire primary row, mobile has one brand. ========================================================== */ /* One and only one brand element. */ #sidebartop .spc-brand-single{ display:flex!important; flex:0 0 132px!important; width:132px!important; min-width:132px!important; height:100%!important; padding:0!important; margin:0!important; flex-direction:column!important; justify-content:center!important; align-items:stretch!important; text-decoration:none!important; background:transparent!important; } #sidebartop .spc-brand-single .spc-brand-name{ display:block!important; width:100%!important; margin:0!important; padding:0!important; color:#fff!important; font-family:'Plus Jakarta Sans','DM Sans',sans-serif!important; font-size:18px!important; line-height:1!important; font-weight:800!important; letter-spacing:-.045em!important; text-transform:uppercase!important; white-space:nowrap!important; } #sidebartop .spc-brand-single .spc-brand-legacy{ display:block!important; width:100%!important; margin:3px 0 0!important; padding:0!important; align-self:auto!important; text-align:right!important; color:#48ced0!important; font-family:'DM Sans',sans-serif!important; font-size:7px!important; line-height:1!important; font-style:italic!important; font-weight:600!important; letter-spacing:.015em!important; text-transform:none!important; white-space:nowrap!important; } /* Desktop: contacts AND customer tools share the slim upper bar. */ @media (min-width:768px){ :root{ --spc-utility-h:40px!important; --spc-primary-h:64px!important; --spc-header-total:104px!important; } #sidebartop.spc-main-header{ height:var(--spc-header-total)!important; min-height:var(--spc-header-total)!important; } #sidebartop .spc-desktop-utility{ display:block!important; height:var(--spc-utility-h)!important; min-height:var(--spc-utility-h)!important; background:#081c2d!important; } #sidebartop .spc-utility-inner.spc-utility-contact-only{ width:min(var(--spc-layout-max),calc(100% - (var(--spc-layout-gutter) * 2)))!important; height:100%!important; margin:0 auto!important; padding:0!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:20px!important; } #sidebartop .spc-contact-links{ display:flex!important; align-items:center!important; gap:20px!important; margin:0!important; min-width:0!important; } #sidebartop .spc-contact-links a{ display:inline-flex!important; align-items:center!important; gap:6px!important; color:#e8f1f6!important; font-size:12px!important; font-weight:600!important; white-space:nowrap!important; } #sidebartop .spc-contact-links i{ color:#55cdd0!important; font-size:13px!important; } #sidebartop .spc-utility-client-actions{ position:static!important; display:flex!important; align-items:center!important; gap:6px!important; margin:0!important; padding:0 0 0 16px!important; border-left:1px solid rgba(255,255,255,.15)!important; min-width:0!important; } #sidebartop .spc-utility-client-actions .spc-client-label{ position:static!important; display:inline-block!important; margin:0 3px 0 0!important; padding:0!important; color:#9bb0bf!important; font-size:9px!important; line-height:1!important; font-weight:700!important; letter-spacing:.07em!important; text-transform:uppercase!important; white-space:nowrap!important; } #sidebartop .spc-utility-client-actions .headerlogin{ position:relative!important; top:auto!important; right:auto!important; float:none!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:5px!important; height:28px!important; min-height:28px!important; margin:0!important; padding:0 9px!important; border-radius:6px!important; color:#fff!important; font-size:10px!important; line-height:1!important; font-weight:800!important; text-decoration:none!important; } #sidebartop .spc-utility-client-actions .webmail{background:#078c78!important;} #sidebartop .spc-utility-client-actions .ugyfelkapu{background:#1677ea!important;} #sidebartop .spc-utility-client-actions .headerlogin i{ margin:0!important; font-size:13px!important; } /* Primary row contains only compact logo + the six main sections. */ #sidebartop .spc-primary-row, #sidebartop .spc-primary-inner{ height:var(--spc-primary-h)!important; min-height:var(--spc-primary-h)!important; } #sidebartop .spc-primary-inner{ width:min(var(--spc-layout-max),calc(100% - (var(--spc-layout-gutter) * 2)))!important; margin:0 auto!important; padding:0!important; display:flex!important; align-items:stretch!important; justify-content:flex-start!important; gap:22px!important; } #sidebartop .spc-desktop-nav{ display:flex!important; flex:1 1 auto!important; min-width:0!important; align-items:stretch!important; } #sidebartop .spc-nav-list.spc-nav-v12{ display:flex!important; width:auto!important; max-width:100%!important; height:100%!important; margin:0!important; padding:0!important; gap:0!important; align-items:stretch!important; flex-wrap:nowrap!important; } #sidebartop .spc-nav-v12 .spc-nav-item>a{ height:var(--spc-primary-h)!important; padding:0 16px!important; font-size:14px!important; white-space:nowrap!important; } /* Remove any historical customer block that may still be styled for primary row. */ #sidebartop .spc-primary-client-actions{display:none!important;} /* At narrower desktop/tablet widths keep all six items visible. */ @media (max-width:1180px){ #sidebartop .spc-primary-inner{gap:12px!important;} #sidebartop .spc-brand-single{ flex-basis:118px!important; width:118px!important; min-width:118px!important; } #sidebartop .spc-brand-single .spc-brand-name{font-size:16px!important;} #sidebartop .spc-brand-single .spc-brand-legacy{font-size:6.5px!important;} #sidebartop .spc-nav-v12 .spc-nav-item>a{ padding:0 11px!important; font-size:13px!important; } #sidebartop .spc-contact-links{gap:12px!important;} #sidebartop .spc-contact-links a{font-size:11px!important;} #sidebartop .spc-utility-inner.spc-utility-contact-only{gap:12px!important;} } @media (max-width:900px){ #sidebartop .spc-primary-inner{gap:8px!important;} #sidebartop .spc-brand-single{ flex-basis:108px!important; width:108px!important; min-width:108px!important; } #sidebartop .spc-brand-single .spc-brand-name{font-size:15px!important;} #sidebartop .spc-nav-v12 .spc-nav-item>a{ padding:0 8px!important; font-size:12.5px!important; } #sidebartop .spc-contact-links a span{font-size:10.5px!important;} #sidebartop .spc-utility-client-actions .spc-client-label{display:none!important;} } } /* Mobile: exactly one logo in header. Utility and customer tools live inside menu. */ @media (max-width:767px){ #sidebartop{ height:56px!important; min-height:56px!important; } #sidebartop .spc-utility-row{display:none!important;} #sidebartop .spc-primary-row, #sidebartop .spc-primary-inner{ height:56px!important; min-height:56px!important; } #sidebartop .spc-primary-inner{ padding:0 10px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; } /* Kill every legacy/header logo candidate except the single new brand. */ #sidebartop .logo, #sidebartop .spc-desktop-logo, #sidebartop .spc-mobile-brand, #sidebartop .spc-brand:not(.spc-brand-single){ display:none!important; } #sidebartop .spc-brand-single{ display:flex!important; flex:0 0 108px!important; width:108px!important; min-width:108px!important; height:56px!important; } #sidebartop .spc-brand-single .spc-brand-name{ font-size:15px!important; } #sidebartop .spc-brand-single .spc-brand-legacy{ margin-top:2px!important; font-size:6px!important; text-align:right!important; } #sidebartop .right{ display:flex!important; position:static!important; height:56px!important; align-items:center!important; margin-left:auto!important; } #sidebartop .right .sb-toggle-left{ width:38px!important; height:38px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; border:1px solid rgba(255,255,255,.16)!important; border-radius:7px!important; background:transparent!important; color:#fff!important; font-size:20px!important; } /* Menu utility: labels are mandatory; no anonymous circle icons. */ .mobile-menu.spc-mobile-mega .spc-mobile-utility{ padding:0!important; background:#0b2134!important; border-bottom:1px solid rgba(255,255,255,.1)!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-actions{ display:grid!important; grid-template-columns:repeat(3,1fr)!important; width:100%!important; background:#0b2134!important; border-bottom:1px solid rgba(255,255,255,.1)!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-actions a{ min-height:42px!important; margin:0!important; padding:0 4px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:5px!important; border-radius:0!important; border:0!important; border-right:1px solid rgba(255,255,255,.1)!important; background:transparent!important; color:#fff!important; font-size:11.5px!important; font-weight:650!important; text-decoration:none!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-actions a:last-child{ border-right:0!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-actions i{ margin:0!important; color:#5ed9da!important; font-size:13px!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-actions span{ display:inline!important; } .mobile-menu.spc-mobile-mega .spc-mobile-login-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; width:100%!important; gap:1px!important; margin:0!important; padding:0!important; background:rgba(255,255,255,.10)!important; border-bottom:1px solid rgba(255,255,255,.1)!important; } .mobile-menu.spc-mobile-mega .spc-mobile-login-actions .mobile-action{ min-height:42px!important; margin:0!important; padding:0 8px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; border:0!important; border-radius:0!important; color:#fff!important; font-size:11.5px!important; font-weight:750!important; text-decoration:none!important; } .mobile-menu.spc-mobile-mega .spc-mobile-login-actions .webmail{background:#078c78!important;} .mobile-menu.spc-mobile-mega .spc-mobile-login-actions .account{background:#1677ea!important;} /* Only our explicit chevron is visible. */ .mobile-menu.spc-mobile-mega summary:before, .mobile-menu.spc-mobile-mega summary:after{ content:none!important; display:none!important; } .mobile-menu.spc-mobile-mega .spc-mobile-chevron{ display:inline-block!important; } } /********************************************************** WEBKOMFORT V18 — final header/login/mobile corrections **********************************************************/ /* Brand: the wordmark is the colour accent; navigation stays calm/white. */ #sidebartop .spc-brand-single .spc-brand-name{ color:#2f8cff!important; } #sidebartop .spc-brand-single .spc-brand-legacy{ color:#55cdd0!important; text-align:right!important; } @media (min-width:768px){ /* Menu must stay clearly separate from the logo. */ #sidebartop .spc-nav-v12 .spc-nav-item>a{ color:#f7fbff!important; } #sidebartop .spc-nav-v12 .spc-nav-item>a:hover, #sidebartop .spc-nav-v12 .spc-nav-item.is-active>a{ color:#62d2f6!important; } /* Login dropdown: modern, light and readable, but anchored to the utility row. */ #frmsignin, #frmsignin2{ display:none; position:fixed!important; top:40px!important; right:20px!important; width:360px!important; max-width:calc(100vw - 40px)!important; padding:24px!important; margin:0!important; background:#fff!important; color:#173149!important; border:1px solid #d6e2eb!important; border-top:3px solid #2f8cff!important; border-radius:0 0 10px 10px!important; box-shadow:0 22px 55px rgba(7,31,51,.24)!important; z-index:100500!important; font-family:'DM Sans',Arial,sans-serif!important; text-align:left!important; } #frmsignin{border-top-color:#079b84!important;} #frmsignin2{border-top-color:#2f8cff!important;} } /* Shared login form design. */ #frmsignin form, #frmsignin2 form{margin:0!important;padding:0!important;} #frmsignin .spc-login-kicker, #frmsignin2 .spc-login-kicker{ margin:0 0 6px!important; color:#6b8396!important; font-size:11px!important; line-height:1.2!important; font-weight:800!important; letter-spacing:.11em!important; text-transform:uppercase!important; } #frmsignin .title, #frmsignin2 .title{ margin:0 0 6px!important; color:#0d2940!important; font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif!important; font-size:24px!important; line-height:1.15!important; font-weight:800!important; text-align:left!important; } #frmsignin .spc-login-intro, #frmsignin2 .spc-login-intro{ margin:0 0 20px!important; color:#60778a!important; font-size:14px!important; line-height:1.45!important; } #frmsignin label, #frmsignin2 label{ display:block!important; margin:0 0 14px!important; color:#314c62!important; font-size:13px!important; line-height:1.35!important; font-weight:700!important; } #frmsignin input[type="email"], #frmsignin input[type="password"], #frmsignin2 input[type="text"], #frmsignin2 input[type="password"]{ display:block!important; width:100%!important; height:48px!important; margin:6px 0 0!important; padding:0 14px!important; border:1px solid #cbd9e4!important; border-radius:7px!important; background:#f8fbfd!important; color:#10283d!important; font-family:'DM Sans',Arial,sans-serif!important; font-size:16px!important; font-weight:500!important; box-shadow:none!important; } #frmsignin input:focus, #frmsignin2 input:focus{ background:#fff!important; border-color:#2f8cff!important; box-shadow:0 0 0 3px rgba(47,140,255,.12)!important; } #frmsignin .submit, #frmsignin2 .submit{margin:18px 0 0!important;text-align:left!important;} #frmsignin .submit .gomb, #frmsignin2 .submit .gomb{ width:100%!important; min-height:48px!important; margin:0!important; padding:0 16px!important; border:0!important; border-radius:7px!important; color:#fff!important; font-family:'DM Sans',Arial,sans-serif!important; font-size:13px!important; font-weight:800!important; letter-spacing:.02em!important; text-transform:none!important; cursor:pointer!important; box-shadow:none!important; } #frmsignin .submit .gomb{background:#079b84!important;} #frmsignin2 .submit .gomb{background:#2f8cff!important;} #frmsignin .submit .gomb:hover{background:#078573!important;} #frmsignin2 .submit .gomb:hover{background:#1976df!important;} #frmsignin2 .ej{ margin:3px 0 0!important; color:#2f8cff!important; font-size:13px!important; font-weight:650!important; text-align:right!important; text-decoration:none!important; cursor:pointer!important; } #frmsignin #msg, #frmsignin2 #msg2{margin:0!important;color:#c63f4f!important;font-size:13px!important;text-align:left!important;} @media (max-width:767px){ /* The desktop mega menu must NEVER appear in the mobile header. */ #sidebartop .spc-desktop-nav, #sidebartop .spc-desktop-nav .spc-nav-list, #sidebartop .spc-desktop-nav .spc-nav-item{ display:none!important; visibility:hidden!important; } /* Mobile brand uses the same blue/turquoise hierarchy. */ #sidebartop .spc-brand-single .spc-brand-name{color:#2f8cff!important;} #sidebartop .spc-brand-single .spc-brand-legacy{color:#55cdd0!important;text-align:right!important;} /* Contact: only two obvious actions, no landline and no technical labels. */ .mobile-menu.spc-mobile-mega .spc-mobile-contact-actions{ grid-template-columns:1fr 1fr!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-actions a{ min-height:46px!important; font-size:13px!important; gap:7px!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-actions i{ font-size:15px!important; } /* Login buttons remain distinct but simple. */ .mobile-menu.spc-mobile-mega .spc-mobile-login-actions .mobile-action{ min-height:46px!important; font-size:13px!important; cursor:pointer!important; } /* Login sheet on phones. Same forms are opened from desktop and mobile. */ #frmsignin, #frmsignin2{ display:none; position:fixed!important; top:66px!important; left:12px!important; right:12px!important; width:auto!important; max-width:none!important; max-height:calc(100vh - 82px)!important; overflow:auto!important; margin:0!important; padding:22px!important; background:#fff!important; color:#173149!important; border:1px solid #d6e2eb!important; border-top:4px solid #2f8cff!important; border-radius:10px!important; box-shadow:0 18px 55px rgba(5,25,42,.34)!important; z-index:200500!important; text-align:left!important; } #frmsignin{border-top-color:#079b84!important;} #frmsignin .title, #frmsignin2 .title{font-size:22px!important;} #frmsignin .spc-login-intro, #frmsignin2 .spc-login-intro{font-size:14px!important;} } /********************************************************** WEBKOMFORT V19 — final brand restraint + reliable login toggles **********************************************************/ #sidebartop .spc-brand-single .spc-brand-name{ color:#fff!important; } #sidebartop .spc-brand-single .spc-brand-legacy{ color:#68b8bd!important; font-size:9px!important; font-weight:600!important; font-style:italic!important; letter-spacing:-.01em!important; line-height:1!important; text-transform:none!important; align-self:flex-end!important; width:auto!important; max-width:100%!important; padding-right:3px!important; margin-right:0!important; white-space:nowrap!important; } @media (max-width:767px){ #sidebartop .spc-brand-single .spc-brand-name{ color:#fff!important; } #sidebartop .spc-brand-single .spc-brand-legacy{ color:#68b8bd!important; font-size:6.5px!important; padding-right:2px!important; } /* Mobile login triggers are real buttons visually and remain clickable above the slidebar. */ .mobile-menu.spc-mobile-mega .spc-mobile-login-actions .headerlogin{ pointer-events:auto!important; position:relative!important; z-index:2!important; } #frmsignin.is-open, #frmsignin2.is-open{display:block!important;} } /* ========================================================== V20 — mobile login panels live INSIDE the mobile slidebar. This deliberately does not reuse the desktop #frmsignin panels, which sit outside the slidebar and can be hidden behind it. ========================================================== */ @media (max-width:767px){ .mobile-menu.spc-mobile-mega .spc-mobile-login-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:0!important; padding:0!important; } .mobile-menu.spc-mobile-mega .spc-mobile-login-actions .mobile-action{ appearance:none!important; -webkit-appearance:none!important; border:0!important; border-radius:0!important; min-height:54px!important; width:100%!important; margin:0!important; padding:0 10px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; color:#fff!important; font:700 14px/1 'DM Sans',sans-serif!important; cursor:pointer!important; text-decoration:none!important; } .mobile-menu.spc-mobile-mega .spc-mobile-login-actions .mobile-action.webmail{background:#079b84!important;} .mobile-menu.spc-mobile-mega .spc-mobile-login-actions .mobile-action.account{background:#1677ea!important;} .mobile-menu.spc-mobile-mega .spc-mobile-login-actions .mobile-action i{font-size:18px!important;color:#fff!important;margin:0!important;} .mobile-menu.spc-mobile-mega .spc-mobile-login-panel[hidden]{display:none!important;} .mobile-menu.spc-mobile-mega .spc-mobile-login-panel{ display:block!important; background:#f7fafc!important; border-bottom:1px solid #d8e3eb!important; padding:18px 16px 20px!important; color:#102f49!important; } .mobile-menu.spc-mobile-mega .spc-mobile-login-panel form{margin:0!important;padding:0!important;} .mobile-menu.spc-mobile-mega .spc-mobile-login-title{ margin:0 0 14px!important; color:#0d2d47!important; font:800 20px/1.15 'Plus Jakarta Sans',sans-serif!important; } .mobile-menu.spc-mobile-mega .spc-mobile-login-panel label{ display:block!important; margin:0 0 12px!important; color:#496276!important; font:700 12px/1.3 'DM Sans',sans-serif!important; } .mobile-menu.spc-mobile-mega .spc-mobile-login-panel input[type="email"], .mobile-menu.spc-mobile-mega .spc-mobile-login-panel input[type="text"], .mobile-menu.spc-mobile-mega .spc-mobile-login-panel input[type="password"]{ display:block!important; width:100%!important; height:48px!important; margin:6px 0 0!important; padding:0 13px!important; border:1px solid #cbd9e4!important; border-radius:6px!important; background:#fff!important; color:#102f49!important; box-shadow:none!important; font:500 16px/1 'DM Sans',sans-serif!important; box-sizing:border-box!important; } .mobile-menu.spc-mobile-mega .spc-mobile-login-submit{ width:100%!important; min-height:48px!important; border:0!important; border-radius:6px!important; color:#fff!important; font:800 13px/1 'DM Sans',sans-serif!important; cursor:pointer!important; margin-top:4px!important; } .mobile-menu.spc-mobile-mega .spc-mobile-login-submit.webmail{background:#079b84!important;} .mobile-menu.spc-mobile-mega .spc-mobile-login-submit.account{background:#1677ea!important;} } /* ======================================================================== WEBKOMFORT CONTENT SYSTEM v1.0 Egységes aloldal / almenüpont / cikk / tudástár / blog megjelenés ------------------------------------------------------------------------ Az adminban feltöltött régi főképet az új tartalmaknál nem használjuk. A cím továbbra is az adatbázisból érkező H1, minden más az inline HTML-ben építhető fel a wk-* komponensekkel. ======================================================================== */ :root{ --wk-navy:#0d2d47; --wk-navy-2:#102f49; --wk-blue:#1677ea; --wk-cyan:#4fc3d7; --wk-teal:#079b84; --wk-text:#17344b; --wk-muted:#61798c; --wk-line:#d9e5ee; --wk-soft:#f5f9fc; --wk-soft-blue:#edf6fb; --wk-white:#ffffff; --wk-max:1180px; --wk-reading:820px; --wk-pad:clamp(20px,4vw,56px); } /* ---------- Az aloldal régi, keskeny sablonjának felülírása ---------- */ #aloldal{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:#fff!important; color:var(--wk-text)!important; overflow:hidden; } /* Az új rendszerben a képet az inline tartalom adja meg. */ #aloldal > .fokep{ display:none!important; } #aloldal .content-top, #aloldal .content-bottom{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; position:relative!important; background:#fff!important; } #aloldal .content-top{ border-bottom:1px solid var(--wk-line)!important; background:linear-gradient(180deg,#f8fbfd 0%,#f2f7fb 100%)!important; } #aloldal .content-top > .content, #aloldal .content-bottom > .content{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; } /* Az adminban megadott cím marad az egyetlen H1. */ #aloldal .content .cim{ width:min(calc(100% - 40px),var(--wk-max))!important; max-width:var(--wk-max)!important; margin:0 auto!important; padding:clamp(42px,6vw,82px) 0 clamp(34px,5vw,66px)!important; text-align:left!important; } #aloldal .content .cim h1{ max-width:980px!important; margin:0!important; padding:0!important; color:var(--wk-navy)!important; font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif!important; font-size:clamp(34px,4.2vw,62px)!important; line-height:1.04!important; letter-spacing:-.045em!important; font-weight:800!important; text-transform:none!important; text-align:left!important; } #aloldal .leiras{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:#fff!important; color:var(--wk-text)!important; font-family:'DM Sans','Plus Jakarta Sans',Arial,sans-serif!important; font-size:18px!important; line-height:1.75!important; } /* A régi, még át nem írt sima HTML is kulturáltan jelenjen meg. */ #aloldal .leiras > :not(.wk-section):not(.wk-hero):not(.wk-full):not(.wk-page){ width:min(calc(100% - 40px),var(--wk-reading)); max-width:var(--wk-reading); margin-left:auto!important; margin-right:auto!important; box-sizing:border-box; } #aloldal .leiras > h2{ margin-top:54px!important; margin-bottom:18px!important; } #aloldal .leiras > h3{ margin-top:34px!important; margin-bottom:12px!important; } #aloldal .leiras > p{ margin-top:0!important; margin-bottom:20px!important; } #aloldal .leiras h2, #aloldal .leiras h3, #aloldal .leiras h4{ color:var(--wk-navy)!important; font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif!important; letter-spacing:-.025em!important; text-transform:none!important; } #aloldal .leiras h2{ font-size:clamp(28px,3vw,42px)!important; line-height:1.15!important; font-weight:800!important; } #aloldal .leiras h3{ font-size:clamp(21px,2vw,27px)!important; line-height:1.28!important; font-weight:750!important; } #aloldal .leiras h4{ font-size:19px!important; line-height:1.35!important; font-weight:750!important; } #aloldal .leiras p, #aloldal .leiras li{ color:var(--wk-text)!important; font-size:18px!important; line-height:1.75!important; } #aloldal .leiras strong{font-weight:750!important;color:inherit!important;} #aloldal .leiras em{font-style:italic!important;} #aloldal .leiras a:not(.gomb):not(.wk-btn){ color:#086dbd!important; text-decoration:underline!important; text-decoration-thickness:1px!important; text-underline-offset:3px!important; } #aloldal .leiras a:not(.gomb):not(.wk-btn):hover{color:var(--wk-blue)!important;} #aloldal .leiras ul, #aloldal .leiras ol{ padding-left:1.35em!important; margin-top:18px!important; margin-bottom:28px!important; } #aloldal .leiras li{margin:8px 0!important;padding-left:4px!important;} #aloldal .leiras li::marker{color:var(--wk-blue);} #aloldal .leiras img{ max-width:100%!important; height:auto!important; } #aloldal .leiras > p > img, #aloldal .leiras > img{ display:block!important; margin:34px auto!important; } #aloldal .leiras iframe, #aloldal .leiras video{ max-width:100%!important; } #aloldal .leiras iframe[src*="youtube"], #aloldal .leiras iframe[src*="youtu.be"]{ display:block!important; width:100%!important; max-width:900px!important; aspect-ratio:16/9!important; height:auto!important; margin:36px auto!important; border:0!important; } #aloldal .leiras table{ width:100%!important; border-collapse:collapse!important; margin:30px auto!important; background:#fff!important; } #aloldal .leiras th, #aloldal .leiras td{ padding:14px 16px!important; border:1px solid var(--wk-line)!important; font-size:16px!important; line-height:1.45!important; vertical-align:top!important; } #aloldal .leiras th{background:var(--wk-soft)!important;color:var(--wk-navy)!important;font-weight:750!important;} /* A régi .gomb linkek már most illeszkedjenek az új rendszerhez. */ #aloldal .leiras a.gomb, #aloldal .leiras .gomb{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:50px!important; padding:0 24px!important; border:0!important; border-radius:7px!important; background:var(--wk-blue)!important; color:#fff!important; text-decoration:none!important; text-transform:none!important; font-family:'DM Sans',Arial,sans-serif!important; font-size:15px!important; line-height:1!important; font-weight:800!important; box-shadow:none!important; transition:transform .16s ease,background .16s ease!important; } #aloldal .leiras a.gomb:hover, #aloldal .leiras .gomb:hover{ background:#0f67d0!important; color:#fff!important; transform:translateY(-1px); } /* ======================================================================== ÚJ INLINE KOMPONENSEK Ezekből építjük fel az összes új almenüpontot és tudástár/blog cikket. ======================================================================== */ .wk-page{width:100%;margin:0;padding:0;background:#fff;color:var(--wk-text);} .wk-full{width:100%;max-width:none!important;} .wk-shell{ width:min(calc(100% - 40px),var(--wk-max)); max-width:var(--wk-max); margin:0 auto; } .wk-reading{ width:min(100%,var(--wk-reading)); max-width:var(--wk-reading); } .wk-section{ width:100%; margin:0; padding:clamp(54px,7vw,96px) 0; background:#fff; } .wk-section--soft{background:var(--wk-soft);} .wk-section--blue{background:var(--wk-soft-blue);} .wk-section--dark{background:var(--wk-navy);color:#fff;} .wk-section--teal{background:#e9f8f5;} .wk-section--compact{padding:clamp(36px,5vw,64px) 0;} .wk-kicker{ margin:0 0 12px!important; color:var(--wk-blue)!important; font:800 13px/1.3 'DM Sans',Arial,sans-serif!important; letter-spacing:.11em!important; text-transform:uppercase!important; } .wk-lead{ max-width:760px; margin:18px 0 0!important; color:#425e73!important; font-size:clamp(19px,2vw,23px)!important; line-height:1.6!important; } .wk-section--dark h2, .wk-section--dark h3, .wk-section--dark h4, .wk-section--dark p, .wk-section--dark li{color:#fff!important;} .wk-section--dark .wk-kicker{color:#70d9e7!important;} .wk-section--dark .wk-lead{color:#d3e1ea!important;} .wk-hero{ width:100%; padding:clamp(54px,7vw,92px) 0; background:linear-gradient(135deg,#f5f9fc 0%,#edf6fb 100%); border-bottom:1px solid var(--wk-line); } .wk-hero-grid, .wk-grid-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,6vw,86px); align-items:center; } .wk-grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } .wk-hero-copy h2{ margin:0 0 18px!important; font-size:clamp(34px,4vw,56px)!important; line-height:1.06!important; } .wk-hero-media img, .wk-media img{ display:block!important; width:100%!important; height:auto!important; margin:0!important; border-radius:0!important; object-fit:cover; } .wk-image-wide{ display:block!important; width:100%!important; max-width:100%!important; margin:0!important; height:auto!important; } .wk-card-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:30px; } .wk-card{ padding:28px; background:#fff; border:1px solid var(--wk-line); border-radius:0; box-shadow:0 10px 30px rgba(13,45,71,.05); } .wk-card h3{margin:0 0 10px!important;font-size:22px!important;} .wk-card p:last-child{margin-bottom:0!important;} .wk-checks{ list-style:none!important; padding:0!important; margin:24px 0!important; } .wk-checks li{ position:relative; margin:12px 0!important; padding-left:32px!important; } .wk-checks li::before{ content:'✓'; position:absolute; left:0; top:0; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#e7f4ff; color:var(--wk-blue); font-size:13px; font-weight:900; } .wk-checks li::marker{content:'';} .wk-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; } .wk-btn{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:52px; padding:0 24px; border:1px solid transparent; border-radius:7px; background:var(--wk-blue); color:#fff!important; text-decoration:none!important; font:800 15px/1 'DM Sans',Arial,sans-serif!important; transition:background .16s ease,transform .16s ease,border-color .16s ease; } .wk-btn:hover{background:#0f67d0;color:#fff!important;transform:translateY(-1px);} .wk-btn--secondary{background:#fff;color:var(--wk-navy)!important;border-color:#b9ccda;} .wk-btn--secondary:hover{background:#f5f9fc;color:var(--wk-navy)!important;border-color:#91afc4;} .wk-btn--teal{background:var(--wk-teal);} .wk-btn--teal:hover{background:#078671;} .wk-callout{ margin:34px 0; padding:26px 28px; border-left:4px solid var(--wk-blue); background:#f2f8fd; } .wk-callout > :first-child{margin-top:0!important;} .wk-callout > :last-child{margin-bottom:0!important;} .wk-callout--teal{border-left-color:var(--wk-teal);background:#edf9f6;} .wk-callout--dark{border-left-color:var(--wk-cyan);background:var(--wk-navy);color:#fff;} .wk-callout--dark h3,.wk-callout--dark p{color:#fff!important;} .wk-price-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:32px; } .wk-price{ position:relative; padding:30px; border:1px solid var(--wk-line); background:#fff; } .wk-price--featured{border:2px solid var(--wk-blue);} .wk-price-name{margin:0 0 8px!important;font-weight:800!important;color:var(--wk-navy)!important;} .wk-price-value{margin:0 0 18px!important;font:800 clamp(30px,3vw,42px)/1 'Plus Jakarta Sans',sans-serif!important;color:var(--wk-navy)!important;letter-spacing:-.04em;} .wk-price-value small{font-size:14px!important;font-weight:700!important;color:var(--wk-muted)!important;} .wk-steps{ counter-reset:wkstep; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:30px; } .wk-step{ counter-increment:wkstep; padding:26px 22px; border-top:3px solid var(--wk-blue); background:#fff; } .wk-step::before{ content:'0' counter(wkstep); display:block; margin-bottom:18px; color:var(--wk-blue); font:800 13px/1 'DM Sans',sans-serif; letter-spacing:.08em; } .wk-step h3{font-size:20px!important;margin:0 0 8px!important;} .wk-step p{font-size:16px!important;line-height:1.6!important;margin:0!important;} .wk-faq{margin-top:28px;border-top:1px solid var(--wk-line);} .wk-faq details{border-bottom:1px solid var(--wk-line);background:#fff;} .wk-faq summary{ list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; color:var(--wk-navy); font:750 18px/1.45 'Plus Jakarta Sans','DM Sans',sans-serif; } .wk-faq summary::-webkit-details-marker{display:none;} .wk-faq summary::after{ content:'⌄'; position:absolute; right:4px; top:18px; color:var(--wk-blue); font-size:22px; transition:transform .16s ease; } .wk-faq details[open] summary::after{transform:rotate(180deg);} .wk-faq details > div{padding:0 0 20px;} .wk-faq details > div > :last-child{margin-bottom:0!important;} .wk-quote{ margin:36px 0; padding:8px 0 8px 28px; border-left:4px solid var(--wk-cyan); color:#31536a; font-size:21px; line-height:1.6; } .wk-related{ padding:28px; border:1px solid var(--wk-line); background:var(--wk-soft); } .wk-related h3{margin-top:0!important;} /* Blog / tudástár képes tartalom */ .wk-article-intro{padding:clamp(44px,6vw,76px) 0 26px;} .wk-article-intro .wk-lead{max-width:820px;} .wk-article-image{margin:32px auto 46px;} .wk-article-image img{display:block!important;width:100%!important;height:auto!important;margin:0!important;} .wk-caption{margin:8px 0 0!important;color:var(--wk-muted)!important;font-size:13px!important;line-height:1.5!important;} /* Inline kódban maradt üres TinyMCE bekezdések ne gyártsanak óriási lyukakat. */ #aloldal .leiras p:empty{display:none!important;} /* ---------- Mobil: valódi mobile-first olvashatóság ---------- */ @media(max-width:767px){ #aloldal .content .cim{ width:calc(100% - 32px)!important; padding:34px 0 30px!important; } #aloldal .content .cim h1{ font-size:clamp(30px,9vw,40px)!important; line-height:1.08!important; letter-spacing:-.035em!important; } #aloldal .leiras{ font-size:17px!important; line-height:1.7!important; } #aloldal .leiras > :not(.wk-section):not(.wk-hero):not(.wk-full):not(.wk-page){ width:calc(100% - 32px); } #aloldal .leiras h2{font-size:29px!important;line-height:1.16!important;} #aloldal .leiras h3{font-size:22px!important;line-height:1.3!important;} #aloldal .leiras p, #aloldal .leiras li{font-size:17px!important;line-height:1.7!important;} .wk-shell{width:calc(100% - 32px);} .wk-section{padding:48px 0;} .wk-section--compact{padding:34px 0;} .wk-hero{padding:46px 0;} .wk-hero-grid, .wk-grid-2, .wk-grid-3, .wk-card-grid, .wk-price-grid, .wk-steps{ grid-template-columns:1fr; gap:18px; } .wk-hero-media{order:-1;} .wk-hero-copy h2{font-size:32px!important;} .wk-lead{font-size:19px!important;line-height:1.55!important;} .wk-card,.wk-price{padding:22px;} .wk-actions{flex-direction:column;align-items:stretch;} .wk-btn{width:100%;box-sizing:border-box;} .wk-callout{padding:22px 20px;} .wk-faq summary{font-size:17px;padding-top:18px;padding-bottom:18px;} .wk-quote{font-size:19px;padding-left:20px;} #aloldal .leiras table{ display:block!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch; white-space:nowrap; } } @media(min-width:768px) and (max-width:1100px){ .wk-grid-3,.wk-card-grid,.wk-price-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .wk-steps{grid-template-columns:repeat(2,minmax(0,1fr));} } /* ======================================================================== WEBKOMFORT CONTENT SYSTEM v1.2 — service layout refinements Mobile-first sidebar, robust checklists, steps and CTA cards ======================================================================== */ :root{ --wk-reading:900px; --wk-sidebar:320px; --wk-service-gap:clamp(32px,5vw,64px); } /* Default is deliberately single-column. The sidebar moves next to content only on wide screens, so mobile/tablet never gets squeezed columns. */ .wk-layout-sidebar{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; align-items:start; } .wk-main{ width:100%; min-width:0; max-width:none; } .wk-sidebar{ width:100%; min-width:0; } /* CTA / supporting block used in service-page sidebars. */ .wk-sidebar-card{ width:100%; padding:26px 24px; background:#fff; border:1px solid #cbdce8; box-shadow:0 14px 38px rgba(13,45,71,.07); } .wk-sidebar-card .wk-eyebrow, .wk-sidebar-card .wk-kicker{ display:block; margin:0 0 14px!important; padding:0 0 12px!important; border-bottom:1px solid var(--wk-line); } .wk-sidebar-card h3{ margin:0 0 12px!important; color:var(--wk-navy)!important; font-size:clamp(22px,2vw,27px)!important; line-height:1.2!important; } .wk-sidebar-card p{ margin:0 0 16px!important; font-size:16px!important; line-height:1.6!important; color:var(--wk-muted)!important; } .wk-sidebar-card label{ display:block; margin:0 0 7px; color:var(--wk-navy); font-size:14px; font-weight:750; } .wk-sidebar-card input[type="text"], .wk-sidebar-card input[type="email"], .wk-sidebar-card input[type="tel"], .wk-sidebar-card select, .wk-sidebar-card textarea{ width:100%!important; min-height:50px; margin:0 0 12px!important; padding:11px 14px!important; border:1px solid #c8d8e5!important; border-radius:7px!important; background:#fff!important; color:var(--wk-text)!important; font:500 16px/1.4 'DM Sans',Arial,sans-serif!important; box-shadow:none!important; outline:none; } .wk-sidebar-card input:focus, .wk-sidebar-card select:focus, .wk-sidebar-card textarea:focus{ border-color:var(--wk-blue)!important; box-shadow:0 0 0 3px rgba(22,119,234,.11)!important; } .wk-sidebar-card form .wk-btn, .wk-sidebar-card form button.wk-btn{ width:100%; margin-top:2px; } .wk-sidebar-card small{ color:#71889a; font-size:13px; line-height:1.5; } /* Make service-page content use the full available column instead of looking like a narrow article inside an already wide service layout. */ .wk-layout-sidebar .wk-main > p, .wk-layout-sidebar .wk-main > ul, .wk-layout-sidebar .wk-main > ol, .wk-layout-sidebar .wk-main > h2, .wk-layout-sidebar .wk-main > h3, .wk-layout-sidebar .wk-main > .wk-callout, .wk-layout-sidebar .wk-main > .wk-steps{ max-width:none!important; } /* Legacy global ul/li rules are aggressive. Reset the new checklist fully. */ #aloldal .leiras ul.wk-checks, .wk-checks{ list-style:none!important; margin:24px 0 32px!important; padding:0!important; } #aloldal .leiras ul.wk-checks > li, .wk-checks > li{ list-style:none!important; position:relative!important; margin:0 0 14px!important; padding:0 0 0 34px!important; } #aloldal .leiras ul.wk-checks > li::marker, .wk-checks > li::marker{ content:''!important; font-size:0!important; } #aloldal .leiras ul.wk-checks > li::before, .wk-checks > li::before{ content:'✓'!important; position:absolute!important; left:0!important; top:.12em!important; display:flex!important; align-items:center!important; justify-content:center!important; width:22px!important; height:22px!important; border-radius:50%!important; background:#e7f4ff!important; color:var(--wk-blue)!important; font-family:Arial,sans-serif!important; font-size:13px!important; font-weight:900!important; line-height:1!important; } /* The first generated page used plain div children inside .wk-steps. Support both that concise markup and the explicit .wk-step class. */ .wk-steps{ counter-reset:wkstep; display:grid; grid-template-columns:1fr; gap:14px; margin:28px 0 34px; } .wk-steps > div, .wk-step{ counter-increment:wkstep; min-width:0; padding:22px 20px; border:1px solid var(--wk-line); border-top:3px solid var(--wk-blue); background:#fff; } .wk-steps > div > strong:first-child{ display:block; margin-bottom:15px; color:var(--wk-blue)!important; font:800 13px/1 'DM Sans',Arial,sans-serif!important; letter-spacing:.08em; } .wk-steps > div h3, .wk-step h3{ margin:0 0 8px!important; font-size:20px!important; } .wk-steps > div p, .wk-step p{ margin:0!important; font-size:16px!important; line-height:1.62!important; color:var(--wk-muted)!important; } /* Related-action cards should read as a coherent navigation group, with buttons clearly looking like buttons rather than disabled inputs. */ .wk-grid-3 > .wk-card, .wk-card-grid > .wk-card{ display:flex; flex-direction:column; min-width:0; height:100%; } .wk-card > .wk-btn:last-child{ align-self:flex-start; margin-top:auto; } .wk-btn--secondary{ background:#f4f8fb!important; color:#0d5fa8!important; border:1px solid #a9c4d7!important; } .wk-btn--secondary:hover{ background:#e9f3fa!important; color:#084f8e!important; border-color:#7fa8c3!important; } /* Slightly tighter vertical rhythm for long service pages. */ .wk-page .wk-section{ padding:clamp(46px,5.6vw,78px) 0; } .wk-page .wk-section--compact{ padding:clamp(32px,4vw,52px) 0; } .wk-page .wk-callout{ margin:28px 0; } /* Tablet: keep everything one column, but allow steps/cards to use space. */ @media(min-width:700px){ .wk-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } } /* Desktop service layout. The CTA becomes a genuine right-hand column only when there is enough room to keep both columns comfortable. */ @media(min-width:1040px){ .wk-layout-sidebar{ grid-template-columns:minmax(0,1fr) var(--wk-sidebar); gap:var(--wk-service-gap); } .wk-layout-sidebar .wk-main{ max-width:820px; } .wk-sidebar--sticky{ position:sticky; top:calc(var(--spc-header-total,110px) + 24px); } } /* Wide desktop: make the reading column a little more generous while preserving comfortable line length. */ @media(min-width:1280px){ .wk-layout-sidebar{ grid-template-columns:minmax(0,1fr) 330px; } .wk-layout-sidebar .wk-main{ max-width:850px; } } /* Mobile polish: large tap targets, no sticky behaviour, compact spacing. */ @media(max-width:699px){ .wk-layout-sidebar{gap:28px;} .wk-sidebar--sticky{position:static!important;top:auto!important;} .wk-sidebar-card{padding:22px 18px;} .wk-sidebar-card input[type="text"], .wk-sidebar-card input[type="email"], .wk-sidebar-card input[type="tel"], .wk-sidebar-card select, .wk-sidebar-card textarea{ min-height:52px; font-size:16px!important; /* prevents iOS input zoom */ } .wk-steps{grid-template-columns:1fr;gap:12px;} .wk-steps > div,.wk-step{padding:20px 18px;} } /********************************************************** WEBKOMFORT CONTENT SYSTEM V1.3 Creative visual language + clearer vertical rhythm Mobile-first. This block intentionally overrides older wk-* rules without touching backend functionality. **********************************************************/ :root{ --wk-navy:#082846; --wk-blue:#1677ea; --wk-turquoise:#19b8b0; --wk-coral:#ff6b57; --wk-yellow:#f4bf42; --wk-blue-soft:#edf6ff; --wk-turquoise-soft:#edfbf9; --wk-coral-soft:#fff2ee; --wk-violet-soft:#f5f2ff; --wk-section-gap-mobile:56px; --wk-section-gap-desktop:84px; } /* ---------- TYPOGRAPHIC RHYTHM ---------- */ /* Normal paragraphs should breathe, especially on mobile. */ .wk-page p{ margin:0 0 20px!important; } .wk-page p:last-child{ margin-bottom:0!important; } /* New thoughts must visually start as new thoughts. */ .wk-page h2{ margin-top:48px!important; margin-bottom:20px!important; } .wk-page h3{ margin-top:30px!important; margin-bottom:12px!important; } .wk-page .wk-section > .wk-shell > h2:first-child, .wk-page .wk-main > h2:first-child, .wk-page .wk-reading > h2:first-child, .wk-page .wk-card > h3:first-child, .wk-page .wk-sidebar-card > h3:first-child{ margin-top:0!important; } /* The small section label becomes a real visual signpost. */ .wk-page .wk-eyebrow, .wk-page .wk-kicker{ display:inline-flex; align-items:center; gap:8px; width:auto; margin:0 0 18px!important; padding:7px 11px!important; border:0!important; border-left:3px solid var(--wk-turquoise)!important; background:var(--wk-turquoise-soft); color:#0c6f72!important; font-weight:800!important; letter-spacing:.07em!important; line-height:1.2!important; } /* Give long text/list runs a visible pause. */ .wk-page .wk-checks, .wk-page .wk-steps, .wk-page .wk-callout{ margin-top:30px!important; margin-bottom:38px!important; } /* ---------- SECTION RHYTHM + BACKGROUND LANGUAGE ---------- */ .wk-page .wk-section{ position:relative; isolation:isolate; overflow:hidden; padding:var(--wk-section-gap-mobile) 0; } /* Slightly more separation between consecutive white sections. */ .wk-page .wk-section + .wk-section:not(.wk-section--soft):not(.wk-section--accent):not(.wk-section--creative){ border-top:1px solid rgba(18,69,105,.08); } /* Existing soft block: now visibly intentional, but still very light. */ .wk-page .wk-section--soft{ background: radial-gradient(circle at 92% 18%, rgba(25,184,176,.10) 0 75px, transparent 76px), radial-gradient(circle at 7% 82%, rgba(22,119,234,.07) 0 95px, transparent 96px), linear-gradient(135deg,#f5f9ff 0%,#f3fbfa 58%,#fff8f5 100%)!important; } /* Optional creative section for future inline content. */ .wk-page .wk-section--creative{ background: linear-gradient(135deg,rgba(22,119,234,.07),rgba(25,184,176,.07) 55%,rgba(255,107,87,.07))!important; } /* Optional stronger accent section. */ .wk-page .wk-section--accent{ background:var(--wk-navy)!important; color:#fff!important; } .wk-page .wk-section--accent h2, .wk-page .wk-section--accent h3{ color:#fff!important; } .wk-page .wk-section--accent p{ color:rgba(255,255,255,.78)!important; } /* Pure-CSS decorative dot matrix; no extra image request. */ .wk-page .wk-section--soft::after, .wk-page .wk-section--creative::after{ content:""; position:absolute; right:24px; top:28px; width:78px; height:54px; z-index:-1; opacity:.24; background-image:radial-gradient(circle,var(--wk-blue) 1.5px,transparent 1.7px); background-size:13px 13px; } /* ---------- CHECKLIST: GUIDE THE EYE ---------- */ #aloldal .leiras ul.wk-checks, .wk-checks{ padding:20px 18px!important; border-left:4px solid var(--wk-turquoise)!important; background:linear-gradient(90deg,var(--wk-turquoise-soft),rgba(255,255,255,.45))!important; } #aloldal .leiras ul.wk-checks > li, .wk-checks > li{ margin-bottom:18px!important; padding-left:38px!important; } #aloldal .leiras ul.wk-checks > li:last-child, .wk-checks > li:last-child{ margin-bottom:0!important; } #aloldal .leiras ul.wk-checks > li::before, .wk-checks > li::before{ width:23px!important; height:23px!important; background:#fff!important; color:var(--wk-turquoise)!important; border:1px solid rgba(25,184,176,.28)!important; box-shadow:0 4px 12px rgba(25,184,176,.10); } /* ---------- STEPS: COLOUR AS INFORMATION ---------- */ .wk-steps{ gap:18px!important; } .wk-steps > div, .wk-step{ position:relative; border:1px solid rgba(20,70,105,.12)!important; border-top:4px solid var(--wk-blue)!important; box-shadow:0 10px 26px rgba(13,45,71,.05); } .wk-steps > div:nth-child(2), .wk-step:nth-child(2){ border-top-color:var(--wk-turquoise)!important; } .wk-steps > div:nth-child(3), .wk-step:nth-child(3){ border-top-color:var(--wk-coral)!important; } .wk-steps > div > strong:first-child{ font-size:28px!important; line-height:1!important; letter-spacing:-.04em!important; color:var(--wk-blue)!important; opacity:.9; } .wk-steps > div:nth-child(2) > strong:first-child{ color:var(--wk-turquoise)!important; } .wk-steps > div:nth-child(3) > strong:first-child{ color:var(--wk-coral)!important; } /* ---------- CALLOUTS ---------- */ .wk-page .wk-callout{ padding:22px 22px 22px 24px!important; border:0!important; border-left:4px solid var(--wk-blue)!important; background:var(--wk-blue-soft)!important; } .wk-page .wk-callout strong{ color:var(--wk-navy)!important; } /* ---------- SIDEBAR CTA: THE CONVERSION ANCHOR ---------- */ .wk-sidebar-card{ position:relative; border:1px solid rgba(22,119,234,.20)!important; box-shadow:0 20px 50px rgba(22,119,234,.10)!important; } .wk-sidebar-card::before{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:5px; background:linear-gradient(90deg,var(--wk-blue),var(--wk-turquoise),var(--wk-coral)); } .wk-sidebar-card .wk-eyebrow, .wk-sidebar-card .wk-kicker{ border-left:0!important; background:transparent!important; padding-left:0!important; padding-right:0!important; color:#0b70a9!important; } /* ---------- CARDS + ACTIONS ---------- */ .wk-card{ position:relative; border:1px solid rgba(18,69,105,.13)!important; box-shadow:0 10px 28px rgba(13,45,71,.045); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .wk-card:nth-child(3n+1){ border-top:3px solid var(--wk-blue)!important; } .wk-card:nth-child(3n+2){ border-top:3px solid var(--wk-turquoise)!important; } .wk-card:nth-child(3n+3){ border-top:3px solid var(--wk-coral)!important; } .wk-btn{ box-shadow:0 8px 20px rgba(22,119,234,.13); } .wk-btn--secondary{ background:#fff!important; border:1px solid rgba(22,119,234,.30)!important; color:var(--wk-blue)!important; } /* ---------- DESKTOP ENHANCEMENTS ---------- */ @media(min-width:700px){ .wk-page h2{ margin-top:56px!important; margin-bottom:22px!important; } .wk-page .wk-section{ padding:72px 0; } .wk-page .wk-section--compact{ padding:48px 0; } .wk-page .wk-checks{ padding:24px 26px!important; } .wk-card:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(13,45,71,.08); border-color:rgba(22,119,234,.24)!important; } } @media(min-width:1040px){ .wk-page .wk-section{ padding:var(--wk-section-gap-desktop) 0; } } /* ---------- MOBILE POLISH ---------- */ @media(max-width:699px){ .wk-page p{ margin-bottom:20px!important; } .wk-page h2{ margin-top:42px!important; margin-bottom:18px!important; } .wk-page h3{ margin-top:26px!important; margin-bottom:10px!important; } .wk-page .wk-eyebrow, .wk-page .wk-kicker{ margin-bottom:16px!important; padding:6px 9px!important; font-size:12px!important; } .wk-page .wk-section{ padding:52px 0; } .wk-page .wk-section--compact{ padding:36px 0; } #aloldal .leiras ul.wk-checks, .wk-checks{ margin-top:24px!important; margin-bottom:34px!important; padding:18px 14px!important; } #aloldal .leiras ul.wk-checks > li, .wk-checks > li{ margin-bottom:16px!important; padding-left:36px!important; } .wk-page .wk-callout{ margin:26px 0 34px!important; padding:20px 17px 20px 20px!important; } .wk-steps{ gap:16px!important; margin-top:26px!important; margin-bottom:36px!important; } .wk-steps > div, .wk-step{ padding:22px 18px!important; } /* Decorative dots are intentionally subtle on phones. */ .wk-page .wk-section--soft::after, .wk-page .wk-section--creative::after{ width:52px; height:39px; right:8px; top:14px; background-size:11px 11px; opacity:.13; } /* No hover-dependent communication on touch screens. */ .wk-card{ transform:none!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V1.4 Mobile CTA polish — domain checker / sidebar actions **********************************************************/ /* On phones the sidebar CTA should feel like a deliberate action area, not like a plain form that happened to fall below the article. */ @media(max-width:699px){ .wk-sidebar{ margin-top:8px; } .wk-sidebar-card{ overflow:hidden; margin-top:6px; padding:0!important; border:1px solid rgba(22,119,234,.18)!important; background: radial-gradient(circle at 92% 8%, rgba(25,184,176,.15) 0 56px, transparent 57px), linear-gradient(145deg,#ffffff 0%,#f4f9ff 62%,#eefbf9 100%)!important; box-shadow:0 18px 42px rgba(15,61,96,.11)!important; } .wk-sidebar-card::before{ height:6px!important; } /* Inner breathing room after removing the generic card padding. */ .wk-sidebar-card > *{ margin-left:20px!important; margin-right:20px!important; } .wk-sidebar-card > *:first-child{ margin-top:24px!important; } .wk-sidebar-card > *:last-child{ margin-bottom:24px!important; } .wk-sidebar-card .wk-eyebrow, .wk-sidebar-card .wk-kicker{ display:inline-flex!important; margin-bottom:12px!important; padding:5px 9px!important; border-radius:999px; background:rgba(25,184,176,.10)!important; color:#087d7a!important; letter-spacing:.06em!important; } .wk-sidebar-card h3{ margin-top:0!important; margin-bottom:10px!important; font-size:clamp(25px,7.2vw,31px)!important; line-height:1.08!important; } .wk-sidebar-card p{ color:#49657a!important; } .wk-sidebar-card form{ display:grid; gap:12px; margin-top:22px!important; margin-bottom:14px!important; } .wk-sidebar-card form label{ margin:0!important; color:var(--wk-navy)!important; font-size:14px!important; font-weight:800!important; } .wk-sidebar-card input[type="text"], .wk-sidebar-card input[type="email"], .wk-sidebar-card input[type="tel"]{ width:100%!important; min-height:56px!important; margin:0!important; padding:0 16px!important; border:1px solid rgba(15,76,117,.20)!important; border-radius:12px!important; background:#fff!important; color:var(--wk-navy)!important; font-size:17px!important; line-height:1.2!important; box-shadow:0 4px 14px rgba(11,48,75,.04)!important; appearance:none; -webkit-appearance:none; } .wk-sidebar-card input[type="text"]:focus, .wk-sidebar-card input[type="email"]:focus, .wk-sidebar-card input[type="tel"]:focus{ outline:3px solid rgba(22,119,234,.13)!important; outline-offset:1px!important; border-color:var(--wk-blue)!important; box-shadow:0 7px 20px rgba(22,119,234,.09)!important; } .wk-sidebar-card .wk-btn, .wk-sidebar-card button.wk-btn{ width:100%!important; min-height:56px!important; margin:0!important; padding:14px 18px!important; border:0!important; border-radius:12px!important; background:linear-gradient(90deg,var(--wk-blue),#2c8cff)!important; color:#fff!important; font-size:16px!important; font-weight:800!important; line-height:1.2!important; box-shadow:0 12px 26px rgba(22,119,234,.22)!important; } .wk-sidebar-card .wk-btn:active, .wk-sidebar-card button.wk-btn:active{ transform:translateY(1px); box-shadow:0 7px 16px rgba(22,119,234,.18)!important; } /* Small visual cue below the form: calm, trustworthy, not "techy". */ .wk-sidebar-card form + p{ position:relative; margin-top:12px!important; padding:14px 16px 14px 42px!important; border-top:1px solid rgba(18,69,105,.09); background:rgba(255,255,255,.52); color:#5c7384!important; font-size:13px!important; line-height:1.45!important; } .wk-sidebar-card form + p::before{ content:"✓"; position:absolute; left:16px; top:13px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:rgba(25,184,176,.13); color:var(--wk-turquoise); font-size:13px; font-weight:900; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V1.5 Mobile interactive CTA — clear "start here" action module **********************************************************/ @media(max-width:699px){ /* Reset the previous informational-card feeling. */ .wk-sidebar-card{ overflow:hidden; margin-top:8px!important; padding:22px 18px 18px!important; border:1px solid rgba(22,119,234,.22)!important; border-top:5px solid var(--wk-blue)!important; border-radius:0!important; background:#fff!important; box-shadow:0 16px 34px rgba(12,48,76,.10)!important; } .wk-sidebar-card::before{ display:none!important; } /* Undo the margin hack from V1.4 so every element aligns to one axis. */ .wk-sidebar-card > *{ margin-left:0!important; margin-right:0!important; } .wk-sidebar-card > *:first-child{ margin-top:0!important; } .wk-sidebar-card > *:last-child{ margin-bottom:0!important; } .wk-sidebar-card .wk-eyebrow, .wk-sidebar-card .wk-kicker{ display:block!important; width:auto!important; margin:0 0 10px!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; color:#0b6fb4!important; font-size:12px!important; font-weight:900!important; letter-spacing:.085em!important; line-height:1.25!important; } .wk-sidebar-card h3{ margin:0 0 10px!important; font-size:clamp(27px,7.4vw,32px)!important; line-height:1.08!important; color:var(--wk-navy)!important; } .wk-sidebar-card > p{ margin:0 0 18px!important; color:#4b6578!important; font-size:16px!important; line-height:1.55!important; } /* The form itself becomes the visually obvious interactive zone. */ .wk-sidebar-card form{ position:relative; display:grid!important; gap:12px!important; margin:18px 0 0!important; padding:16px!important; border:1px solid rgba(22,119,234,.14)!important; border-radius:14px!important; background:#f4f8fc!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); } .wk-sidebar-card form::before{ content:"KEZDJE ITT"; display:inline-flex; align-items:center; justify-self:start; margin:0 0 2px; padding:5px 8px; border-radius:999px; background:rgba(22,119,234,.10); color:var(--wk-blue); font-size:11px; font-weight:900; letter-spacing:.08em; line-height:1; } .wk-sidebar-card form label{ margin:0!important; color:var(--wk-navy)!important; font-size:14px!important; font-weight:800!important; line-height:1.3!important; } .wk-sidebar-card input[type="text"], .wk-sidebar-card input[type="email"], .wk-sidebar-card input[type="tel"]{ width:100%!important; min-height:58px!important; margin:0!important; padding:0 16px!important; border:1px solid #c8d7e3!important; border-radius:10px!important; background:#fff!important; color:var(--wk-navy)!important; font-size:17px!important; line-height:1.2!important; box-shadow:0 3px 10px rgba(12,48,76,.035)!important; appearance:none; -webkit-appearance:none; } .wk-sidebar-card input[type="text"]:focus, .wk-sidebar-card input[type="email"]:focus, .wk-sidebar-card input[type="tel"]:focus{ outline:3px solid rgba(22,119,234,.13)!important; outline-offset:1px!important; border-color:var(--wk-blue)!important; box-shadow:0 6px 16px rgba(22,119,234,.08)!important; } .wk-sidebar-card .wk-btn, .wk-sidebar-card button.wk-btn{ position:relative; width:100%!important; min-height:58px!important; margin:0!important; padding:14px 48px 14px 18px!important; border:0!important; border-radius:10px!important; background:var(--wk-blue)!important; color:#fff!important; font-size:16px!important; font-weight:900!important; line-height:1.2!important; text-align:center!important; box-shadow:0 10px 22px rgba(22,119,234,.22)!important; } .wk-sidebar-card .wk-btn::after, .wk-sidebar-card button.wk-btn::after{ content:"→"; position:absolute; right:18px; top:50%; transform:translateY(-52%); font-size:22px; font-weight:700; line-height:1; } .wk-sidebar-card .wk-btn:active, .wk-sidebar-card button.wk-btn:active{ transform:translateY(1px); box-shadow:0 6px 14px rgba(22,119,234,.18)!important; } /* Trust note is secondary; keep it visually quiet. */ .wk-sidebar-card form + p{ position:relative; margin:14px 0 0!important; padding:12px 0 0 28px!important; border-top:1px solid rgba(18,69,105,.09)!important; background:transparent!important; color:#6b7f8f!important; font-size:13px!important; line-height:1.45!important; } .wk-sidebar-card form + p::before{ content:"✓"; position:absolute; left:0; top:11px; display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:rgba(25,184,176,.12); color:var(--wk-turquoise); font-size:12px; font-weight:900; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V1.6 Mobile CTA accent polish **********************************************************/ @media(max-width:699px){ /* Use the same blue–turquoise–coral accent strip as desktop. */ .wk-sidebar-card{ border-top:1px solid rgba(22,119,234,.18)!important; } .wk-sidebar-card::before{ content:""!important; display:block!important; position:absolute!important; left:-1px!important; right:-1px!important; top:-1px!important; width:auto!important; height:6px!important; background:linear-gradient( 90deg, var(--wk-blue) 0%, var(--wk-turquoise) 52%, var(--wk-coral) 100% )!important; z-index:2!important; } /* Strong visual entry point inside the interactive form. */ .wk-sidebar-card form::before{ content:"KEZDJE ITT"!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; justify-self:start!important; min-height:30px!important; margin:0 0 4px!important; padding:7px 12px!important; border-radius:6px!important; background:var(--wk-coral)!important; color:#fff!important; box-shadow:0 7px 16px rgba(255,107,87,.24)!important; font-size:11px!important; font-weight:900!important; letter-spacing:.09em!important; line-height:1!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V1.7 Mobile CTA accent placement fix + label copy **********************************************************/ @media(max-width:699px){ /* Keep the accent strip physically attached to the CTA card. */ .wk-sidebar-card{ position:relative!important; overflow:hidden!important; isolation:isolate!important; } .wk-sidebar-card::before{ content:""!important; display:block!important; position:absolute!important; left:0!important; right:0!important; top:0!important; width:100%!important; height:6px!important; margin:0!important; padding:0!important; background:linear-gradient( 90deg, var(--wk-blue) 0%, var(--wk-turquoise) 52%, var(--wk-coral) 100% )!important; border:0!important; z-index:3!important; pointer-events:none!important; } /* Give the card content enough room below the attached accent strip. */ .wk-sidebar-card{ padding-top:28px!important; } /* More action-oriented wording. */ .wk-sidebar-card form::before{ content:"ELLENŐRIZZE MOST"!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V1.8 Dedicated PHP service pages + domain registration promo **********************************************************/ /* A dedicated PHP page is inserted inside the legacy .page-wrapper/.content structure, so explicitly let wk-pages break out of the old legacy max-width. */ .page-wrapper > .content > .wk-page{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; } /* Domain registration: compact, high-contrast offer that belongs to the conversion flow instead of looking like an old advertising banner. */ .wk-domain-promo{ position:relative; overflow:hidden; margin:24px 0 0; padding:18px; border:1px solid rgba(22,119,234,.16); border-radius:14px; background:#fff; box-shadow:0 14px 34px rgba(13,58,91,.09); } .wk-domain-promo::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--wk-blue) 0%,var(--wk-turquoise) 52%,var(--wk-coral) 100%); } .wk-domain-promo-label{ display:inline-flex; align-items:center; margin:2px 0 8px!important; padding:6px 9px; border-radius:6px; background:var(--wk-coral); color:#fff!important; font-size:11px!important; font-weight:900!important; line-height:1!important; letter-spacing:.09em!important; text-transform:uppercase; } .wk-domain-promo-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; margin:0!important; color:var(--wk-navy)!important; font-size:17px!important; line-height:1.25!important; font-weight:800!important; } .wk-domain-promo-price strong{ color:var(--wk-blue); font-size:clamp(29px,8vw,40px); line-height:1; letter-spacing:-.035em; } .wk-domain-promo-valid{ margin:9px 0 0!important; color:#607889!important; font-size:13px!important; line-height:1.4!important; } .wk-domain-action{ display:grid; gap:22px; padding:22px 0; } .wk-domain-action-copy h2{ margin-bottom:10px!important; } .wk-domain-action-form{ min-width:0; } .wk-domain-action-form label{ display:block; margin:0 0 8px; color:var(--wk-navy); font-size:14px; font-weight:800; } .wk-domain-action-row{ display:grid; gap:10px; } .wk-domain-action-row input[type="text"]{ width:100%; min-width:0; min-height:54px; padding:0 15px; border:1px solid #c9d7e2; border-radius:10px; background:#fff; color:var(--wk-navy); font-size:16px; } .wk-domain-action-row input[type="text"]:focus{ outline:3px solid rgba(22,119,234,.12); outline-offset:1px; border-color:var(--wk-blue); } .wk-domain-action-row .wk-btn{ display:flex!important; align-items:center; justify-content:center; min-height:54px; cursor:pointer; } .wk-domain-action-note{ margin:10px 0 0!important; color:#6b7f8f!important; font-size:13px!important; } .wk-domain-register > .ajax:empty{ display:none; } /* AJAX results are legacy-generated; give their containing zone breathing room without changing the generated functionality. */ .wk-domain-register > .ajax:not(:empty){ width:min(calc(100% - 40px),var(--wk-max)); max-width:var(--wk-max); margin:0 auto 44px; background:transparent!important; } @media(min-width:700px){ .wk-domain-promo{ max-width:560px; padding:22px 24px; } .wk-domain-action{ grid-template-columns:minmax(0,.8fr) minmax(380px,1.2fr); align-items:center; gap:44px; padding:8px 0; } .wk-domain-action-row{ grid-template-columns:minmax(0,1fr) auto; gap:10px; } .wk-domain-action-row .wk-btn{ white-space:nowrap; padding-left:22px!important; padding-right:22px!important; } } @media(max-width:699px){ .page-wrapper > .content > .wk-page{ max-width:none!important; } .wk-domain-promo{ margin-top:20px; } .wk-domain-action{ padding:0; } .wk-domain-action-form{ padding:16px; border:1px solid rgba(22,119,234,.14); border-radius:14px; background:#f4f8fc; } .wk-domain-action-form::before{ content:"ELLENŐRIZZE MOST"; display:inline-flex; margin:0 0 12px; padding:7px 10px; border-radius:6px; background:var(--wk-coral); color:#fff; font-size:11px; font-weight:900; line-height:1; letter-spacing:.09em; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V1.9 Domain registration page – final dedicated layout pass **********************************************************/ /* Dedicated PHP page: remove all remaining legacy width constraints. */ .page-wrapper, .page-wrapper > .content, .page-wrapper > .content > .wk-domain-register{ width:100%!important; max-width:none!important; } .page-wrapper > .content{ padding-left:0!important; padding-right:0!important; } .wk-domain-register{ overflow:hidden; } /* HERO */ .wk-domain-register .wk-domain-hero{ padding-top:54px!important; padding-bottom:58px!important; } .wk-domain-hero-grid{ gap:34px!important; align-items:center!important; } .wk-domain-hero-copy{ min-width:0; } .wk-domain-hero-copy h1{ max-width:690px; } .wk-domain-hero-media{ min-width:0; } .wk-domain-hero-media img{ display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:16px; box-shadow:0 22px 55px rgba(13,58,91,.11); } /* PROMO */ .wk-domain-promo{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px 18px; max-width:620px; margin:26px 0 24px!important; padding:20px 22px!important; } .wk-domain-promo-label{ margin:0 0 8px!important; } .wk-domain-promo-title{ margin:0!important; color:var(--wk-navy)!important; font-size:17px!important; font-weight:800!important; } .wk-domain-promo-pricebox{ display:flex; align-items:baseline; gap:7px; white-space:nowrap; } .wk-domain-promo-pricebox strong{ color:var(--wk-blue); font-size:36px; line-height:1; letter-spacing:-.045em; } .wk-domain-promo-pricebox span{ color:var(--wk-navy); font-size:14px; font-weight:800; } .wk-domain-promo-valid{ grid-column:1 / -1; margin:2px 0 0!important; } /* DOMAIN CHECK: make this the obvious interactive gateway. */ .wk-domain-register .wk-domain-check-section{ padding:48px 0!important; border-top:0!important; background:#fff; } .wk-domain-action{ position:relative; display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); align-items:center; gap:54px; padding:34px 38px!important; border:1px solid rgba(22,119,234,.14); border-radius:18px; background:#fff; box-shadow:0 20px 54px rgba(11,53,83,.08); } .wk-domain-action::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; border-radius:18px 18px 0 0; background:linear-gradient(90deg,var(--wk-blue),var(--wk-turquoise),var(--wk-coral)); } .wk-domain-action-copy .wk-eyebrow{ margin-bottom:14px!important; } .wk-domain-action-copy h2{ margin-top:0!important; } .wk-domain-action-copy p:last-child{ margin-bottom:0!important; } .wk-domain-action-form{ min-width:0; padding:22px; border-radius:14px; background:#f4f8fc; border:1px solid rgba(22,119,234,.12); } .wk-domain-action-start{ display:inline-flex!important; margin:0 0 14px!important; padding:7px 10px!important; border-radius:6px; background:var(--wk-coral); color:#fff!important; font-size:11px!important; font-weight:900!important; letter-spacing:.09em!important; line-height:1!important; } .wk-domain-action-row{ grid-template-columns:minmax(0,1fr) auto!important; } .wk-domain-action-row .wk-btn{ min-width:178px; } .wk-domain-action-note{ display:flex; align-items:flex-start; gap:8px; margin-top:12px!important; } .wk-domain-action-note span{ display:grid; flex:0 0 20px; width:20px; height:20px; place-items:center; border-radius:50%; background:rgba(25,184,176,.12); color:var(--wk-turquoise); font-weight:900; } /* RESULT AREA */ .wk-domain-register > .ajax:not(:empty){ width:min(calc(100% - 40px),1180px)!important; margin:0 auto 50px!important; } /* MAIN GUIDE – no sidebar fighting the content. */ .wk-domain-guide{ padding-top:66px!important; padding-bottom:76px!important; } .wk-domain-reading{ max-width:850px!important; margin-left:0!important; } .wk-domain-steps{ margin-top:30px!important; margin-bottom:62px!important; } .wk-domain-content-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:54px; align-items:start; margin-top:12px; } .wk-domain-content-grid > div > h2:first-child{ margin-top:0!important; } .wk-domain-mini-panel{ position:relative; padding:28px; border:1px solid rgba(18,69,105,.12); border-radius:16px; background:linear-gradient(145deg,#f5f9ff 0%,#eefbf9 100%); box-shadow:0 14px 34px rgba(13,58,91,.06); } .wk-domain-mini-panel::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--wk-blue),var(--wk-turquoise),var(--wk-coral)); border-radius:16px 0 0 16px; } .wk-domain-mini-kicker{ margin:0 0 10px!important; color:#087d7a!important; font-size:11px!important; font-weight:900!important; letter-spacing:.08em!important; } .wk-domain-mini-panel h3{ margin:0 0 22px!important; font-size:25px!important; } .wk-domain-benefit{ display:grid; grid-template-columns:36px 1fr; gap:12px; padding:17px 0; border-top:1px solid rgba(18,69,105,.10); } .wk-domain-benefit > span{ color:var(--wk-blue); font-weight:900; } .wk-domain-benefit:nth-of-type(3) > span{ color:var(--wk-turquoise); } .wk-domain-benefit:nth-of-type(4) > span{ color:var(--wk-coral); } .wk-domain-benefit strong{ color:var(--wk-navy); } .wk-domain-benefit p{ margin:4px 0 0!important; color:#587084!important; font-size:14px!important; } .wk-domain-taken{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.8fr); gap:54px; align-items:center; margin-top:70px; padding-top:54px; border-top:1px solid rgba(18,69,105,.10); } .wk-domain-taken h2{ margin-top:0!important; } .wk-domain-taken .wk-callout{ margin:0!important; } /* NEXT ACTION */ .wk-domain-next{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:56px; align-items:center; } .wk-domain-next h2{ margin-top:0!important; } .wk-domain-next-actions{ display:grid; gap:12px; } .wk-domain-next-actions .wk-btn{ width:100%; } /* RELATED */ .wk-domain-related{ padding-top:66px!important; padding-bottom:76px!important; } /* TABLET */ @media(max-width:1039px){ .wk-domain-content-grid, .wk-domain-taken, .wk-domain-next{ grid-template-columns:1fr; gap:30px; } .wk-domain-mini-panel{ max-width:none; } } /* MOBILE */ @media(max-width:699px){ .wk-domain-register .wk-domain-hero{ padding-top:34px!important; padding-bottom:44px!important; } .wk-domain-hero-grid{ display:flex!important; flex-direction:column; gap:28px!important; } .wk-domain-hero-copy{ order:1; } .wk-domain-hero-media{ order:2; width:100%; } .wk-domain-hero-media img{ border-radius:12px; aspect-ratio:16 / 11; } .wk-domain-promo{ grid-template-columns:1fr; gap:10px; margin:22px 0!important; padding:18px!important; } .wk-domain-promo-pricebox strong{ font-size:34px; } .wk-domain-promo-valid{ grid-column:auto; } .wk-domain-register .wk-domain-check-section{ padding:38px 0!important; } .wk-domain-action{ grid-template-columns:1fr; gap:22px; padding:24px 18px 18px!important; border-radius:14px; } .wk-domain-action::before{ border-radius:14px 14px 0 0; } .wk-domain-action-form{ padding:16px!important; } .wk-domain-action-row{ grid-template-columns:1fr!important; } .wk-domain-action-row .wk-btn{ width:100%; min-width:0; } .wk-domain-guide{ padding-top:48px!important; padding-bottom:56px!important; } .wk-domain-steps{ margin-bottom:44px!important; } .wk-domain-content-grid{ display:grid; grid-template-columns:1fr; gap:34px; } .wk-domain-mini-panel{ padding:24px 20px; } .wk-domain-taken{ grid-template-columns:1fr; gap:24px; margin-top:48px; padding-top:40px; } .wk-domain-next{ grid-template-columns:1fr; gap:28px; } .wk-domain-related{ padding-top:48px!important; padding-bottom:56px!important; } /* Avoid a legacy floating/sticky CTA feeling on phones. */ .wk-domain-register .wk-sidebar, .wk-domain-register .wk-sidebar-card{ position:static!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V2.0 Domain registration: tighter conversion page + AJAX result redesign **********************************************************/ /* --- HERO TYPOGRAPHY: prevent cramped lines and keep the opening concise --- */ .wk-domain-register .wk-domain-hero-copy h1{ max-width:660px!important; margin-top:18px!important; margin-bottom:18px!important; font-size:clamp(36px,4vw,58px)!important; line-height:1.04!important; letter-spacing:-.045em!important; } .wk-domain-register .wk-domain-hero-copy .wk-lead{ max-width:650px; margin-bottom:22px!important; } /* --- AJAX RESULTS: modernize legacy generated .free/.transfer rows without touching JS --- */ .wk-domain-register > .ajax:not(:empty){ width:min(calc(100% - 40px),1180px)!important; margin:0 auto!important; padding:10px 0 36px!important; } .wk-domain-register > .ajax p{ color:var(--wk-navy)!important; } .wk-domain-register > .ajax > p:first-child, .wk-domain-register > .ajax .title, .wk-domain-register > .ajax .subtitle{ margin:0 0 18px!important; font-size:18px!important; font-weight:800!important; } .wk-domain-register > .ajax .free, .wk-domain-register > .ajax .transfer{ display:grid!important; grid-template-columns:minmax(0,1.4fr) minmax(170px,.7fr) minmax(150px,.55fr)!important; align-items:center!important; gap:18px!important; min-height:76px!important; margin:0 0 10px!important; padding:16px 20px!important; border:1px solid rgba(18,69,105,.12)!important; border-radius:12px!important; background:#fff!important; box-shadow:0 8px 22px rgba(13,58,91,.05)!important; color:var(--wk-navy)!important; } .wk-domain-register > .ajax .free{ border-left:5px solid var(--wk-turquoise)!important; } .wk-domain-register > .ajax .transfer{ border-left:5px solid #b9c3cc!important; } .wk-domain-register > .ajax .free:hover, .wk-domain-register > .ajax .transfer:hover{ border-color:rgba(22,119,234,.24)!important; box-shadow:0 12px 26px rgba(13,58,91,.08)!important; } .wk-domain-register > .ajax .free *, .wk-domain-register > .ajax .transfer *{ color:inherit!important; } .wk-domain-register > .ajax .free strong, .wk-domain-register > .ajax .transfer strong, .wk-domain-register > .ajax .free .name, .wk-domain-register > .ajax .transfer .name{ color:var(--wk-navy)!important; font-weight:800!important; } .wk-domain-register > .ajax .free input[type="checkbox"], .wk-domain-register > .ajax .transfer input[type="checkbox"]{ width:28px!important; height:28px!important; accent-color:var(--wk-blue); cursor:pointer; } .wk-domain-register > .ajax label{ cursor:pointer; font-weight:800!important; } .wk-domain-register > .ajax .line{ border:0!important; background:transparent!important; } /* Legacy AJAX often carries fixed colors; neutralize them. */ .wk-domain-register > .ajax [style*="background"]{ background:transparent!important; } /* --- SHORT POST-CHECK INFO --- */ .wk-domain-aftercheck{ padding-top:34px!important; padding-bottom:52px!important; border-top:1px solid rgba(18,69,105,.07); } .wk-domain-aftercheck-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); align-items:center; gap:42px; } .wk-domain-aftercheck-grid h2{ margin-top:0!important; } .wk-domain-aftercheck-note{ padding:22px 24px; border-left:4px solid var(--wk-turquoise); background:var(--wk-turquoise-soft); } .wk-domain-aftercheck-note p{ margin-top:6px!important; margin-bottom:0!important; } /* --- BUNDLE SECTION: visually emphasize the smarter path --- */ .wk-domain-bundle{ padding-top:62px!important; padding-bottom:62px!important; } .wk-domain-bundle .wk-domain-next{ padding:10px 0; } .wk-domain-bundle .wk-domain-next-actions .wk-btn:first-child{ background:linear-gradient(90deg,var(--wk-blue),#2c8cff)!important; } .wk-domain-bundle .wk-domain-next-actions .wk-btn{ min-height:56px; } /* --- MOBILE --- */ @media(max-width:699px){ .wk-domain-register .wk-domain-hero-copy h1{ font-size:clamp(34px,10vw,44px)!important; line-height:1.02!important; margin-top:14px!important; } .wk-domain-register > .ajax:not(:empty){ width:calc(100% - 28px)!important; padding-top:4px!important; } .wk-domain-register > .ajax .free, .wk-domain-register > .ajax .transfer{ grid-template-columns:1fr auto!important; gap:8px 14px!important; min-height:0!important; padding:16px!important; } .wk-domain-register > .ajax .free > *:nth-child(2), .wk-domain-register > .ajax .transfer > *:nth-child(2){ grid-column:1; } .wk-domain-register > .ajax .free > *:last-child, .wk-domain-register > .ajax .transfer > *:last-child{ grid-column:2; grid-row:1 / span 2; align-self:center; } .wk-domain-register > .ajax input[type="checkbox"]{ width:30px!important; height:30px!important; } .wk-domain-aftercheck{ padding-top:26px!important; padding-bottom:42px!important; } .wk-domain-aftercheck-grid{ grid-template-columns:1fr; gap:24px; } .wk-domain-bundle{ padding-top:48px!important; padding-bottom:48px!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V2.1 Domain registration typography + AJAX result repair **********************************************************/ /* ======================================================== DOMAIN PAGE TYPOGRAPHY Use exactly the same visual hierarchy as modern subpages. ======================================================== */ .wk-domain-register h1, .wk-domain-register h2, .wk-domain-register h3{ font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif!important; color:var(--wk-navy)!important; } .wk-domain-register .wk-domain-hero-copy h1{ max-width:720px!important; margin:18px 0 20px!important; padding:0!important; font-size:clamp(34px,4.2vw,62px)!important; line-height:1.04!important; letter-spacing:-.045em!important; font-weight:800!important; text-transform:none!important; } .wk-domain-register h2{ font-size:clamp(28px,3vw,42px)!important; line-height:1.15!important; letter-spacing:-.03em!important; font-weight:800!important; } .wk-domain-register h3{ font-size:clamp(20px,2vw,26px)!important; line-height:1.22!important; letter-spacing:-.025em!important; font-weight:800!important; } /* ======================================================== DOMAIN AJAX RESULTS The legacy AJAX output is: .free/.transfer -> .title + multiple .line -> .inline. Do NOT turn .free/.transfer themselves into grids. ======================================================== */ #domain-regisztracio > .ajax{ background:transparent!important; } #domain-regisztracio > .ajax:not(:empty){ width:min(calc(100% - 40px),1180px)!important; max-width:1180px!important; margin:0 auto!important; padding:8px 0 44px!important; font-family:'DM Sans','Plus Jakarta Sans',Arial,sans-serif!important; } /* undo the incorrect v2.0 container-grid treatment */ #domain-regisztracio > .ajax .free, #domain-regisztracio > .ajax .transfer{ display:block!important; width:100%!important; min-height:0!important; margin:0 0 30px!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } #domain-regisztracio > .ajax .free:hover, #domain-regisztracio > .ajax .transfer:hover{ border:0!important; box-shadow:none!important; } /* section headings */ #domain-regisztracio > .ajax .free > .title, #domain-regisztracio > .ajax .transfer > .title{ max-width:none!important; margin:0 0 14px!important; padding:0!important; background:transparent!important; color:var(--wk-navy)!important; font-size:17px!important; line-height:1.4!important; font-weight:800!important; text-align:left!important; } #domain-regisztracio > .ajax .free > .title::before{ content:"✓"; display:inline-grid; place-items:center; width:24px; height:24px; margin-right:10px; border-radius:50%; background:rgba(25,184,176,.12); color:var(--wk-turquoise); font-size:14px; font-weight:900; vertical-align:-2px; } #domain-regisztracio > .ajax .transfer > .title{ margin-top:28px!important; } #domain-regisztracio > .ajax .transfer > .title::before{ content:"↔"; display:inline-grid; place-items:center; width:24px; height:24px; margin-right:10px; border-radius:50%; background:rgba(18,69,105,.08); color:#62798b; font-size:13px; font-weight:900; vertical-align:-2px; } /* each domain is one real card/row */ #domain-regisztracio > .ajax .free .line, #domain-regisztracio > .ajax .transfer .line{ display:block!important; width:100%!important; min-height:0!important; margin:0 0 10px!important; padding:0!important; border:1px solid rgba(18,69,105,.12)!important; border-radius:12px!important; background:#fff!important; box-shadow:0 7px 20px rgba(13,58,91,.045)!important; } #domain-regisztracio > .ajax .free .line{ border-left:5px solid var(--wk-turquoise)!important; } #domain-regisztracio > .ajax .transfer .line{ border-left:5px solid #b8c4ce!important; } #domain-regisztracio > .ajax .line .inline{ display:flex!important; align-items:center!important; width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; padding:15px 18px!important; gap:14px!important; box-sizing:border-box!important; } /* Neutralize legacy span sizing/colours */ #domain-regisztracio > .ajax .line .inline > span{ display:block!important; min-width:0!important; margin:0!important; padding:0!important; background:transparent!important; color:var(--wk-navy)!important; font-size:16px!important; line-height:1.35!important; font-weight:700!important; box-sizing:border-box!important; white-space:normal!important; } /* domain name */ #domain-regisztracio > .ajax .line .inline > span:first-child{ flex:1 1 auto!important; font-size:17px!important; font-weight:800!important; overflow-wrap:anywhere; } /* price column */ #domain-regisztracio > .ajax .line .inline > span:nth-child(2){ flex:0 1 230px!important; color:#405b70!important; font-weight:800!important; } /* checkbox holder */ #domain-regisztracio > .ajax .line .inline > .jelolo{ position:relative!important; top:auto!important; flex:0 0 34px!important; width:34px!important; height:34px!important; overflow:visible!important; } #domain-regisztracio > .ajax .jelolo input{ position:absolute!important; opacity:0!important; pointer-events:none!important; } #domain-regisztracio > .ajax .jelolo label{ position:relative!important; display:block!important; top:auto!important; left:auto!important; width:32px!important; height:32px!important; margin:0!important; border:2px solid #b5c8d8!important; border-radius:7px!important; background:#fff!important; cursor:pointer!important; box-shadow:none!important; } #domain-regisztracio > .ajax .free .jelolo label:hover{ border-color:var(--wk-turquoise)!important; } #domain-regisztracio > .ajax .transfer .jelolo label:hover{ border-color:#7c91a2!important; } #domain-regisztracio > .ajax .jelolo label::after{ content:"✓"!important; position:absolute!important; display:grid!important; place-items:center!important; inset:2px!important; width:auto!important; height:auto!important; opacity:0!important; border-radius:4px!important; background:var(--wk-blue)!important; color:#fff!important; font-family:Arial,sans-serif!important; font-size:18px!important; font-weight:900!important; line-height:1!important; } #domain-regisztracio > .ajax .jelolo input[type=checkbox]:checked + label{ border-color:var(--wk-blue)!important; } #domain-regisztracio > .ajax .jelolo input[type=checkbox]:checked + label::after{ opacity:1!important; } /* Text after the checkbox, normally "Kosárba" */ #domain-regisztracio > .ajax .line .inline > .jelolo ~ span{ flex:0 0 auto!important; color:var(--wk-blue)!important; font-weight:800!important; white-space:nowrap!important; } /* remove old pseudo/icon helper spans from layout if present */ #domain-regisztracio > .ajax .line span.ures, #domain-regisztracio > .ajax .line span.teli{ display:none!important; } /* ======================================================== MOBILE RESULT CARDS ======================================================== */ @media(max-width:699px){ .wk-domain-register .wk-domain-hero-copy h1{ font-size:clamp(34px,10vw,46px)!important; line-height:1.04!important; letter-spacing:-.04em!important; font-weight:800!important; } #domain-regisztracio > .ajax:not(:empty){ width:calc(100% - 28px)!important; padding-bottom:34px!important; } #domain-regisztracio > .ajax .free, #domain-regisztracio > .ajax .transfer{ margin-bottom:26px!important; } #domain-regisztracio > .ajax .free > .title, #domain-regisztracio > .ajax .transfer > .title{ font-size:16px!important; line-height:1.45!important; } #domain-regisztracio > .ajax .line .inline{ display:grid!important; grid-template-columns:minmax(0,1fr) 38px auto!important; grid-template-rows:auto auto!important; align-items:center!important; gap:5px 10px!important; padding:15px!important; } #domain-regisztracio > .ajax .line .inline > span:first-child{ grid-column:1!important; grid-row:1!important; font-size:16px!important; } #domain-regisztracio > .ajax .line .inline > span:nth-child(2){ grid-column:1!important; grid-row:2!important; font-size:14px!important; color:#607789!important; } #domain-regisztracio > .ajax .line .inline > .jelolo{ grid-column:2!important; grid-row:1 / span 2!important; align-self:center!important; } #domain-regisztracio > .ajax .line .inline > .jelolo ~ span{ grid-column:3!important; grid-row:1 / span 2!important; align-self:center!important; font-size:14px!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V2.2 Domain mobile result + checkbox interaction repair **********************************************************/ /* ======================================================== CHECK FORM Keep only the real HTML badge. Earlier mobile layers also generated the same text with ::before. ======================================================== */ .wk-domain-action-form::before{ content:none!important; display:none!important; } .wk-domain-action-start{ display:inline-flex!important; } /* ======================================================== AJAX RESULT GROUP HEADINGS ======================================================== */ #domain-regisztracio > .ajax .free > .title, #domain-regisztracio > .ajax .transfer > .title{ display:flex!important; align-items:flex-start!important; gap:10px!important; margin:0 0 16px!important; padding:0!important; color:var(--wk-navy)!important; background:transparent!important; font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif!important; font-size:18px!important; line-height:1.4!important; font-weight:800!important; text-align:left!important; } #domain-regisztracio > .ajax .free > .title::before, #domain-regisztracio > .ajax .transfer > .title::before{ flex:0 0 26px!important; width:26px!important; height:26px!important; margin:0!important; } #domain-regisztracio > .ajax .transfer > .title{ margin-top:34px!important; color:#435c70!important; } /* ======================================================== RESULT ROWS IMPORTANT: Restore the original .ures/.teli state elements. They are part of the existing basket interaction and must not be hidden unconditionally. ======================================================== */ #domain-regisztracio > .ajax .line span.ures{ display:inline-flex!important; align-items:center!important; color:var(--wk-blue)!important; font-size:15px!important; font-weight:800!important; margin:0!important; padding:0!important; white-space:nowrap!important; } #domain-regisztracio > .ajax .line span.teli{ /* legacy behaviour starts this hidden; existing JS may toggle it */ color:var(--wk-turquoise)!important; font-size:15px!important; font-weight:800!important; margin:0!important; padding:0!important; white-space:nowrap!important; } /* The modern browser can mirror checkbox state even if the old JS only changes the checkbox. This does not replace the old functionality. */ #domain-regisztracio > .ajax .line .inline:has(.jelolo input[type=checkbox]:checked) span.ures{ display:none!important; } #domain-regisztracio > .ajax .line .inline:has(.jelolo input[type=checkbox]:checked) span.teli{ display:inline-flex!important; } /* ======================================================== CHECKBOX / "KOSÁRBA" CONTROL ======================================================== */ #domain-regisztracio > .ajax .jelolo{ position:relative!important; top:auto!important; display:block!important; flex:0 0 36px!important; width:36px!important; height:36px!important; margin:0!important; padding:0!important; overflow:visible!important; } #domain-regisztracio > .ajax .jelolo input[type=checkbox]{ /* Preserve the legacy hidden-input + clickable-label mechanism. */ display:none!important; } #domain-regisztracio > .ajax .jelolo label{ position:relative!important; display:block!important; top:auto!important; left:auto!important; width:36px!important; height:36px!important; margin:0!important; padding:0!important; border:2px solid #b6cadb!important; border-radius:8px!important; background:#fff!important; cursor:pointer!important; touch-action:manipulation; box-shadow:none!important; } #domain-regisztracio > .ajax .jelolo label::after{ content:"✓"!important; position:absolute!important; inset:3px!important; display:grid!important; width:auto!important; height:auto!important; place-items:center!important; border:0!important; border-radius:5px!important; background:var(--wk-blue)!important; color:#fff!important; font-family:Arial,sans-serif!important; font-size:18px!important; font-weight:900!important; line-height:1!important; opacity:0!important; } #domain-regisztracio > .ajax .jelolo input[type=checkbox]:checked + label{ border-color:var(--wk-blue)!important; } #domain-regisztracio > .ajax .jelolo input[type=checkbox]:checked + label::after{ opacity:1!important; } /* ======================================================== DESKTOP RESULT ROW ======================================================== */ @media(min-width:700px){ #domain-regisztracio > .ajax .line .inline{ display:grid!important; grid-template-columns:minmax(220px,1.2fr) minmax(190px,.75fr) 40px minmax(90px,.35fr)!important; align-items:center!important; gap:18px!important; width:100%!important; max-width:none!important; padding:16px 20px!important; } #domain-regisztracio > .ajax .line .inline > span{ width:auto!important; max-width:none!important; } #domain-regisztracio > .ajax .line .inline > span:first-child{ grid-column:1!important; } #domain-regisztracio > .ajax .line .inline > span:nth-child(2){ grid-column:2!important; } #domain-regisztracio > .ajax .line .inline > .jelolo{ grid-column:3!important; } #domain-regisztracio > .ajax .line .inline > span.ures, #domain-regisztracio > .ajax .line .inline > span.teli{ grid-column:4!important; } } /* ======================================================== MOBILE RESULT CARD Domain + price first, then a large touch-friendly selector. No nth-child placement is applied to .ures/.teli anymore. ======================================================== */ @media(max-width:699px){ #domain-regisztracio > .ajax:not(:empty){ width:calc(100% - 28px)!important; margin-left:auto!important; margin-right:auto!important; padding-top:10px!important; padding-bottom:32px!important; } #domain-regisztracio > .ajax .free > .title, #domain-regisztracio > .ajax .transfer > .title{ font-size:17px!important; line-height:1.4!important; margin-bottom:14px!important; } #domain-regisztracio > .ajax .free .line, #domain-regisztracio > .ajax .transfer .line{ margin:0 0 12px!important; border-radius:14px!important; } #domain-regisztracio > .ajax .line .inline{ display:grid!important; grid-template-columns:46px minmax(0,1fr)!important; grid-template-rows:auto auto auto!important; gap:7px 12px!important; width:100%!important; max-width:none!important; min-width:0!important; padding:17px 16px!important; text-align:left!important; } /* Domain */ #domain-regisztracio > .ajax .line .inline > span:first-child{ grid-column:1 / -1!important; grid-row:1!important; width:auto!important; max-width:none!important; margin:0!important; padding:0!important; font-size:18px!important; line-height:1.25!important; font-weight:800!important; text-align:left!important; overflow-wrap:anywhere!important; } /* Price */ #domain-regisztracio > .ajax .line .inline > span:nth-child(2){ grid-column:1 / -1!important; grid-row:2!important; width:auto!important; max-width:none!important; margin:0 0 7px!important; padding:0!important; color:#566f82!important; font-size:15px!important; line-height:1.4!important; font-weight:700!important; text-align:left!important; } /* Checkbox */ #domain-regisztracio > .ajax .line .inline > .jelolo{ grid-column:1!important; grid-row:3!important; align-self:center!important; width:42px!important; height:42px!important; } #domain-regisztracio > .ajax .jelolo label{ width:42px!important; height:42px!important; border-radius:10px!important; } /* State text next to checkbox */ #domain-regisztracio > .ajax .line .inline > span.ures, #domain-regisztracio > .ajax .line .inline > span.teli{ grid-column:2!important; grid-row:3!important; align-self:center!important; justify-self:start!important; width:auto!important; max-width:none!important; margin:0!important; padding:0!important; font-size:16px!important; line-height:1.3!important; text-align:left!important; } #domain-regisztracio > .ajax .line .inline > span.ures::after{ content:" →"; } /* remove stale placement rules from V2.1 */ #domain-regisztracio > .ajax .line .inline > .jelolo ~ span{ grid-row:3!important; align-self:center!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V2.3 Domain AJAX result layout — based on real DOM Real structure: .line > .row.inline > .col-sm-6 (domain) .col-sm-3 (price) .col-sm-3 (.jelolo + .ures + .teli) **********************************************************/ /* Remove earlier assumptions that targeted direct span children */ #domain-regisztracio > .ajax .line .row.inline{ display:grid!important; grid-template-columns:minmax(0,1.35fr) minmax(190px,.75fr) minmax(150px,.55fr)!important; align-items:center!important; gap:18px!important; width:100%!important; max-width:none!important; margin:0!important; padding:18px 20px!important; box-sizing:border-box!important; } #domain-regisztracio > .ajax .line .row.inline::before, #domain-regisztracio > .ajax .line .row.inline::after{ display:none!important; content:none!important; } #domain-regisztracio > .ajax .line .row.inline > .col-sm-6, #domain-regisztracio > .ajax .line .row.inline > .col-sm-3{ float:none!important; width:auto!important; min-width:0!important; margin:0!important; padding:0!important; } /* domain */ #domain-regisztracio > .ajax .line .row.inline > .col-sm-6{ grid-column:1!important; } #domain-regisztracio > .ajax .line .row.inline .product{ display:block!important; margin:0!important; padding:0!important; color:var(--wk-navy)!important; font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif!important; font-size:18px!important; line-height:1.3!important; font-weight:800!important; overflow-wrap:anywhere!important; } /* price */ #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(2){ grid-column:2!important; } #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(2) > span{ display:block!important; margin:0!important; padding:0!important; color:#4e6679!important; font-family:'DM Sans','Plus Jakarta Sans',Arial,sans-serif!important; font-size:16px!important; line-height:1.45!important; font-weight:800!important; } /* action area */ #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(3){ grid-column:3!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:10px!important; min-width:0!important; } #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(3) > .jelolo{ flex:0 0 36px!important; } #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(3) > .ures, #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(3) > .teli{ flex:0 1 auto!important; width:auto!important; min-width:0!important; margin:0!important; padding:0!important; font-family:'DM Sans','Plus Jakarta Sans',Arial,sans-serif!important; font-size:15px!important; line-height:1.3!important; font-weight:800!important; white-space:nowrap!important; } /* if legacy text is empty, provide a clear label visually */ #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(3) > .ures:empty::before{ content:"Kosárba"; } #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(3) > .teli:empty::before{ content:"Kosárban"; } /* selected state */ #domain-regisztracio > .ajax .line .row.inline:has(.jelolo input[type=checkbox]:checked){ border-color:rgba(22,119,234,.28)!important; box-shadow:0 10px 28px rgba(22,119,234,.09)!important; } #domain-regisztracio > .ajax .line .row.inline:has(.jelolo input[type=checkbox]:checked) > .col-sm-3:nth-child(3) > .ures{ display:none!important; } #domain-regisztracio > .ajax .line .row.inline:has(.jelolo input[type=checkbox]:checked) > .col-sm-3:nth-child(3) > .teli{ display:inline-flex!important; color:var(--wk-turquoise)!important; } /* ---------- mobile ---------- */ @media(max-width:699px){ #domain-regisztracio > .ajax .line .row.inline{ display:grid!important; grid-template-columns:46px minmax(0,1fr)!important; grid-template-rows:auto auto auto!important; gap:7px 12px!important; padding:17px 16px!important; text-align:left!important; } #domain-regisztracio > .ajax .line .row.inline > .col-sm-6{ grid-column:1 / -1!important; grid-row:1!important; } #domain-regisztracio > .ajax .line .row.inline .product{ font-size:18px!important; line-height:1.25!important; text-align:left!important; } #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(2){ grid-column:1 / -1!important; grid-row:2!important; } #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(2) > span{ font-size:15px!important; line-height:1.4!important; text-align:left!important; } #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(3){ grid-column:1 / -1!important; grid-row:3!important; display:flex!important; align-items:center!important; gap:10px!important; margin-top:8px!important; } #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(3) > .jelolo{ flex:0 0 42px!important; width:42px!important; height:42px!important; } #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(3) > .jelolo label{ width:42px!important; height:42px!important; border-radius:10px!important; } #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(3) > .ures, #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(3) > .teli{ font-size:16px!important; white-space:normal!important; } #domain-regisztracio > .ajax .line .row.inline > .col-sm-3:nth-child(3) > .ures::after{ content:" →"; } } /********************************************************** CART BAR — visual redesign only, no JS/function changes **********************************************************/ .cd-cart-container{ z-index:9999!important; font-family:'DM Sans','Plus Jakarta Sans',Arial,sans-serif!important; } .cd-cart-container > p.text{ margin:0!important; font-weight:800!important; } @media(min-width:700px){ .cd-cart-container{ position:fixed!important; right:24px!important; bottom:24px!important; left:auto!important; width:auto!important; max-width:420px!important; display:flex!important; align-items:center!important; gap:0!important; border-radius:14px!important; overflow:hidden!important; background:var(--wk-navy)!important; box-shadow:0 18px 45px rgba(6,38,64,.22)!important; } .cd-cart-container > p.text{ padding:14px 18px!important; color:#fff!important; font-size:14px!important; letter-spacing:.01em!important; } .cd-cart-trigger{ position:relative!important; width:56px!important; height:52px!important; border-left:1px solid rgba(255,255,255,.15)!important; background:var(--wk-blue)!important; } } @media(max-width:699px){ .cd-cart-container{ position:fixed!important; left:10px!important; right:10px!important; bottom:10px!important; width:auto!important; min-height:58px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; overflow:hidden!important; border-radius:13px!important; background:var(--wk-navy)!important; box-shadow:0 16px 36px rgba(6,38,64,.28)!important; } .cd-cart-container > p.text{ flex:1 1 auto!important; padding:15px 16px!important; color:#fff!important; font-size:14px!important; line-height:1.2!important; text-align:left!important; } .cd-cart-trigger{ position:relative!important; flex:0 0 58px!important; width:58px!important; height:58px!important; background:var(--wk-blue)!important; border-left:1px solid rgba(255,255,255,.15)!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V2.5 Cart widget final repair — based on original cart.css + real DOM **********************************************************/ /* ======================================================== DOMAIN RESULT GROUP TITLES Supports the new strong + span wording in domaincheck.php. ======================================================== */ #domain-regisztracio > .ajax .free > .title, #domain-regisztracio > .ajax .transfer > .title{ display:grid!important; grid-template-columns:28px minmax(0,1fr)!important; column-gap:10px!important; align-items:start!important; margin:0 0 16px!important; padding:0!important; background:transparent!important; color:var(--wk-navy)!important; font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif!important; text-align:left!important; } #domain-regisztracio > .ajax .free > .title::before, #domain-regisztracio > .ajax .transfer > .title::before{ grid-column:1!important; grid-row:1 / span 2!important; margin:0!important; } #domain-regisztracio > .ajax .free > .title > strong, #domain-regisztracio > .ajax .transfer > .title > strong{ grid-column:2!important; margin:0!important; color:var(--wk-navy)!important; font-size:18px!important; line-height:1.3!important; font-weight:800!important; } #domain-regisztracio > .ajax .free > .title > span, #domain-regisztracio > .ajax .transfer > .title > span{ grid-column:2!important; margin:3px 0 0!important; color:#657c8e!important; font-family:'DM Sans','Plus Jakarta Sans',Arial,sans-serif!important; font-size:14px!important; line-height:1.4!important; font-weight:500!important; } @media(max-width:699px){ #domain-regisztracio > .ajax .free > .title > strong, #domain-regisztracio > .ajax .transfer > .title > strong{ font-size:17px!important; } #domain-regisztracio > .ajax .free > .title > span, #domain-regisztracio > .ajax .transfer > .title > span{ font-size:13px!important; } } /* ======================================================== CART LAUNCHER Real DOM: #cart > .cd-cart-container > p.text a.cd-cart-trigger > ul.count div.cd-cart ======================================================== */ #cart .cd-cart-container{ z-index:9999!important; font-family:'DM Sans','Plus Jakarta Sans',Arial,sans-serif!important; border:0!important; margin:0!important; height:auto!important; box-sizing:border-box!important; transition:opacity .2s ease, transform .2s ease!important; } /* hide the complete launcher when the old script marks the cart empty */ #cart.empty .cd-cart-container, #cart .cd-cart-container.empty{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; transform:translateY(90px)!important; } #cart .cd-cart-container > p.text{ position:relative!important; z-index:4!important; display:flex!important; align-items:center!important; margin:0!important; color:#fff!important; background:var(--wk-navy)!important; font-family:'DM Sans','Plus Jakarta Sans',Arial,sans-serif!important; font-weight:800!important; text-align:left!important; cursor:pointer!important; box-sizing:border-box!important; } /* Trigger: reset original fixed/icon-sprite rules completely */ #cart .cd-cart-trigger{ position:relative!important; right:auto!important; bottom:auto!important; z-index:5!important; display:block!important; flex:0 0 auto!important; margin:0!important; padding:0!important; text-indent:-9999px!important; color:transparent!important; white-space:nowrap!important; border:0!important; background:var(--wk-blue)!important; transform:none!important; transition:background .18s ease!important; cursor:pointer!important; overflow:visible!important; box-sizing:border-box!important; } /* Basket icon, pure CSS */ #cart .cd-cart-trigger::before, #cart .cd-cart-trigger::after{ content:""!important; position:absolute!important; opacity:1!important; background:none!important; transition:all .18s ease!important; box-sizing:border-box!important; } /* basket body */ #cart .cd-cart-trigger::before{ left:50%!important; top:50%!important; width:23px!important; height:16px!important; border:2px solid #fff!important; border-top:0!important; border-radius:0 0 4px 4px!important; transform:translate(-50%,-34%)!important; } /* basket handle */ #cart .cd-cart-trigger::after{ left:50%!important; top:50%!important; width:13px!important; height:8px!important; border:2px solid #fff!important; border-bottom:0!important; border-radius:5px 5px 0 0!important; transform:translate(-50%,-145%)!important; } /* Open state: basket becomes a clean X */ #cart .cd-cart-container.cart-open .cd-cart-trigger::before{ width:22px!important; height:2px!important; border:0!important; border-radius:2px!important; background:#fff!important; transform:translate(-50%,-50%) rotate(45deg)!important; } #cart .cd-cart-container.cart-open .cd-cart-trigger::after{ width:22px!important; height:2px!important; border:0!important; border-radius:2px!important; background:#fff!important; transform:translate(-50%,-50%) rotate(-45deg)!important; } /* Count badge: preserve both LI elements because original JS animates them */ #cart .cd-cart-trigger .count{ position:absolute!important; top:-9px!important; right:-8px!important; z-index:8!important; width:24px!important; height:24px!important; margin:0!important; padding:0!important; border:2px solid #fff!important; border-radius:50%!important; background:var(--wk-coral)!important; color:#fff!important; text-indent:0!important; list-style:none!important; font-family:'DM Sans',Arial,sans-serif!important; font-size:12px!important; line-height:1!important; font-weight:900!important; box-shadow:0 4px 10px rgba(0,0,0,.12)!important; transform:none!important; } #cart .cd-cart-trigger .count li{ position:absolute!important; left:50%!important; top:50%!important; margin:0!important; padding:0!important; list-style:none!important; transform:translate(-50%,-50%)!important; } #cart .cd-cart-trigger .count li:last-of-type{ visibility:hidden; } #cart .cd-cart-trigger .count.update-count li:last-of-type{ visibility:visible; } #cart .cd-cart-container.cart-open .cd-cart-trigger .count{ opacity:0!important; transform:scale(.7)!important; } /* ======================================================== CART PANEL Critical fix: CLOSED panel is invisible. The original cart.css kept a 72x72 white cartWrapper visible behind the trigger — this caused the white/turquoise overlap. ======================================================== */ #cart .cd-cart{ position:absolute!important; z-index:3!important; right:0!important; bottom:calc(100% + 12px)!important; width:390px!important; max-width:calc(100vw - 24px)!important; height:auto!important; max-height:none!important; margin:0!important; pointer-events:none!important; opacity:0!important; visibility:hidden!important; transform:translateY(10px)!important; transition:opacity .18s ease, transform .18s ease, visibility .18s ease!important; } #cart .cd-cart-container.cart-open .cd-cart{ pointer-events:auto!important; opacity:1!important; visibility:visible!important; transform:translateY(0)!important; } #cart .cd-cart .cartWrapper, #cart .cd-cart .cartwrapper{ position:relative!important; right:auto!important; bottom:auto!important; z-index:2!important; width:100%!important; height:auto!important; max-height:min(70vh,560px)!important; overflow:hidden!important; border-radius:16px!important; background:#fff!important; box-shadow:0 24px 65px rgba(6,38,64,.24)!important; pointer-events:auto!important; transition:none!important; } /* overlay only when panel is open */ #cart .cd-cart-container::before{ z-index:-1!important; } #cart .cd-cart-container.cart-open::before{ z-index:1!important; opacity:.38!important; visibility:visible!important; } /* Panel header */ #cart .cd-cart header{ position:relative!important; top:auto!important; left:auto!important; z-index:2!important; width:100%!important; height:auto!important; min-height:0!important; padding:20px 22px 16px!important; border:0!important; border-bottom:1px solid rgba(18,69,105,.10)!important; border-radius:0!important; background:linear-gradient(135deg,#f4f9ff,#eefbf9)!important; opacity:1!important; line-height:normal!important; } #cart .cd-cart header::before{ content:""!important; position:absolute!important; left:0!important; right:0!important; top:0!important; height:5px!important; background:linear-gradient(90deg,var(--wk-blue),var(--wk-turquoise),var(--wk-coral))!important; } #cart .cd-cart header h2{ display:block!important; margin:0!important; color:var(--wk-navy)!important; font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif!important; font-size:21px!important; line-height:1.2!important; font-weight:800!important; letter-spacing:-.025em!important; text-transform:none!important; } /* Panel body */ #cart .cd-cart .body{ position:relative!important; z-index:1!important; height:auto!important; max-height:380px!important; margin:0!important; padding:8px 20px 12px!important; overflow:auto!important; background:#fff!important; opacity:1!important; } #cart .cd-cart .body ul{ position:relative!important; margin:0!important; padding:0!important; padding-bottom:0!important; overflow:visible!important; list-style:none!important; } #cart .cd-cart .body li{ position:relative!important; margin:0!important; padding:14px 0!important; border-bottom:1px solid rgba(18,69,105,.09)!important; opacity:1!important; transform:none!important; list-style:none!important; } /* Footer / checkout */ #cart .cd-cart footer{ position:relative!important; left:auto!important; bottom:auto!important; z-index:2!important; width:100%!important; padding:14px 18px 18px!important; border-radius:0!important; box-shadow:none!important; background:#fff!important; } #cart .cd-cart .checkout, #cart .cd-cart footer .checkout.btn{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; height:auto!important; min-height:52px!important; margin:0!important; padding:13px 18px!important; border:0!important; border-radius:10px!important; background:var(--wk-blue)!important; color:#fff!important; font-family:'DM Sans','Plus Jakarta Sans',Arial,sans-serif!important; font-size:15px!important; line-height:1.2!important; font-weight:900!important; text-align:center!important; text-decoration:none!important; box-shadow:0 9px 22px rgba(22,119,234,.19)!important; transition:background .18s ease, transform .18s ease!important; } #cart .cd-cart .checkout:hover{ background:#086cdf!important; } #cart .cd-cart .checkout em{ position:static!important; display:inline-flex!important; align-items:center!important; gap:5px!important; margin:0!important; padding:0!important; color:#fff!important; font-style:normal!important; transform:none!important; transition:none!important; } #cart .cd-cart .checkout em::after{ display:none!important; content:none!important; } #cart .cd-cart .checkout em span{ color:#fff!important; font-weight:900!important; } /* ======================================================== DESKTOP LAUNCHER ======================================================== */ @media(min-width:700px){ #cart .cd-cart-container{ position:fixed!important; right:26px!important; bottom:26px!important; left:auto!important; display:flex!important; align-items:stretch!important; width:auto!important; max-width:none!important; min-height:56px!important; border-radius:13px!important; overflow:visible!important; background:transparent!important; box-shadow:0 18px 46px rgba(6,38,64,.20)!important; } #cart .cd-cart-container > p.text{ min-height:56px!important; padding:0 20px!important; border-radius:13px 0 0 13px!important; font-size:13px!important; line-height:1.2!important; white-space:nowrap!important; } #cart .cd-cart-trigger{ width:58px!important; height:56px!important; border-radius:0 13px 13px 0!important; } } /* ======================================================== MOBILE LAUNCHER + PANEL ======================================================== */ @media(max-width:699px){ #cart .cd-cart-container{ position:fixed!important; left:8px!important; right:8px!important; bottom:calc(8px + env(safe-area-inset-bottom,0px))!important; display:flex!important; align-items:stretch!important; width:auto!important; max-width:none!important; min-height:56px!important; border-radius:12px!important; overflow:visible!important; background:transparent!important; box-shadow:0 14px 34px rgba(6,38,64,.26)!important; } #cart .cd-cart-container > p.text{ flex:1 1 auto!important; min-width:0!important; min-height:56px!important; padding:0 13px!important; border-radius:12px 0 0 12px!important; font-size:11px!important; line-height:1.15!important; white-space:nowrap!important; } #cart .cd-cart-trigger{ width:56px!important; height:56px!important; border-radius:0 12px 12px 0!important; } #cart .cd-cart{ left:0!important; right:0!important; bottom:calc(100% + 10px)!important; width:auto!important; max-width:none!important; } #cart .cd-cart .cartWrapper, #cart .cd-cart .cartwrapper{ max-height:68vh!important; border-radius:14px!important; } #cart .cd-cart header{ padding:18px 17px 14px!important; } #cart .cd-cart header h2{ font-size:19px!important; } #cart .cd-cart .body{ max-height:calc(68vh - 130px)!important; padding:6px 16px 10px!important; } #cart .cd-cart footer{ padding:12px 16px 16px!important; } body:has(#cart .cd-cart-container){ padding-bottom:76px!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V2.6 Domain hero simplification **********************************************************/ /* The hero should use one visual language only: eyebrow + H1 + lead + one compact offer line + image. */ .wk-domain-register .wk-domain-hero{ background:#f5fafc!important; } .wk-domain-register .wk-domain-hero-grid{ align-items:center!important; gap:56px!important; } .wk-domain-register .wk-domain-hero-copy h1{ max-width:620px!important; margin:18px 0 22px!important; font-size:clamp(42px,4.6vw,66px)!important; line-height:1.01!important; letter-spacing:-.05em!important; font-weight:800!important; } .wk-domain-register .wk-domain-hero-copy .wk-lead{ max-width:610px!important; margin:0 0 28px!important; color:#37566c!important; font-size:clamp(18px,1.5vw,22px)!important; line-height:1.6!important; font-weight:400!important; } .wk-domain-register .wk-domain-offer{ display:flex!important; flex-wrap:wrap!important; align-items:baseline!important; gap:8px 12px!important; max-width:610px!important; margin:0!important; padding:18px 0 0!important; border:0!important; border-top:1px solid rgba(18,69,105,.13)!important; background:transparent!important; box-shadow:none!important; } .wk-domain-register .wk-domain-offer-badge{ display:inline-flex!important; align-items:center!important; min-height:26px!important; padding:5px 8px!important; border-radius:5px!important; background:var(--wk-coral)!important; color:#fff!important; font-size:10px!important; line-height:1!important; font-weight:900!important; letter-spacing:.08em!important; } .wk-domain-register .wk-domain-offer strong{ color:var(--wk-blue)!important; font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif!important; font-size:clamp(28px,3vw,38px)!important; line-height:1!important; letter-spacing:-.04em!important; font-weight:800!important; } .wk-domain-register .wk-domain-offer > span:not(.wk-domain-offer-badge){ color:var(--wk-navy)!important; font-size:15px!important; font-weight:700!important; } .wk-domain-register .wk-domain-offer small{ flex-basis:100%!important; display:block!important; margin:2px 0 0!important; color:#698091!important; font-size:12px!important; line-height:1.4!important; } .wk-domain-register .wk-domain-hero-media img{ border-radius:12px!important; box-shadow:0 16px 40px rgba(13,58,91,.09)!important; } /* Remove visual remnants of the old promo/callout if an older PHP copy accidentally remains during testing. */ .wk-domain-register .wk-domain-hero .wk-domain-promo, .wk-domain-register .wk-domain-hero .wk-callout{ box-shadow:none!important; } @media(max-width:699px){ .wk-domain-register .wk-domain-hero-grid{ gap:28px!important; } .wk-domain-register .wk-domain-hero-copy h1{ font-size:clamp(38px,11vw,48px)!important; line-height:1.01!important; margin-bottom:18px!important; } .wk-domain-register .wk-domain-hero-copy .wk-lead{ font-size:17px!important; line-height:1.58!important; margin-bottom:22px!important; } .wk-domain-register .wk-domain-offer{ gap:7px 9px!important; padding-top:15px!important; } .wk-domain-register .wk-domain-offer strong{ font-size:30px!important; } .wk-domain-register .wk-domain-offer > span:not(.wk-domain-offer-badge){ font-size:14px!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V2.7 Domain result auto-scroll + simple human contact CTA **********************************************************/ /* AJAX találatokhoz történő ugráskor ne takarja ki a fejléc. */ #domain-regisztracio > .ajax{ scroll-margin-top:105px; } /* ======================================================== SIMPLE HELP CTA „Nem tudja, melyik domain lenne jó?” blokk ======================================================== */ .wk-help-actions{ margin-top:26px; } .wk-help-actions-copy{ max-width:760px; margin-bottom:20px; } .wk-help-actions-copy strong{ display:block; margin-bottom:6px; color:var(--wk-navy); font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif; font-size:18px; line-height:1.35; font-weight:800; } .wk-help-actions-copy p{ margin:0!important; } .wk-help-actions-buttons{ display:flex; flex-wrap:wrap; gap:12px; } .wk-help-action{ display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:13px 18px; border:1px solid rgba(22,119,234,.22); border-radius:10px; background:#fff; color:var(--wk-navy)!important; font-family:'DM Sans','Plus Jakarta Sans',Arial,sans-serif; font-size:15px; line-height:1.2; font-weight:800; text-decoration:none!important; box-shadow:0 8px 20px rgba(13,58,91,.055); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .wk-help-action:hover{ transform:translateY(-1px); border-color:rgba(22,119,234,.42); box-shadow:0 11px 25px rgba(13,58,91,.09); } .wk-help-action--primary{ border-color:var(--wk-blue); background:var(--wk-blue); color:#fff!important; } .wk-help-action--primary:hover{ border-color:#086cdf; background:#086cdf; } .wk-help-action-icon{ display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:rgba(22,119,234,.09); color:var(--wk-blue); font-size:16px; line-height:1; } .wk-help-action--primary .wk-help-action-icon{ background:rgba(255,255,255,.17); color:#fff; } .wk-help-action-text{ display:flex; flex-direction:column; gap:2px; } .wk-help-action-text small{ color:#667f91; font-size:12px; line-height:1.2; font-weight:500; } .wk-help-action--primary .wk-help-action-text small{ color:rgba(255,255,255,.78); } @media(max-width:699px){ #domain-regisztracio > .ajax{ scroll-margin-top:82px; } .wk-help-actions{ margin-top:22px; } .wk-help-actions-buttons{ display:grid; grid-template-columns:1fr; gap:10px; } .wk-help-action{ width:100%; min-height:58px; padding:13px 15px; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V2.8 Simplified domain-help CTA **********************************************************/ .wk-help-actions{ margin-top:24px; } .wk-help-actions-copy{ display:none!important; } .wk-help-actions-buttons{ display:flex; flex-wrap:wrap; gap:12px; } .wk-help-action{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:13px 18px; border:1px solid rgba(22,119,234,.22); border-radius:10px; background:#fff; color:var(--wk-navy)!important; font-family:'DM Sans','Plus Jakarta Sans',Arial,sans-serif; font-size:15px; line-height:1.2; font-weight:800; text-decoration:none!important; box-shadow:0 8px 20px rgba(13,58,91,.055); } .wk-help-action:hover{ border-color:rgba(22,119,234,.42); box-shadow:0 11px 25px rgba(13,58,91,.09); } .wk-help-action--primary{ border-color:var(--wk-blue); background:var(--wk-blue); color:#fff!important; } .wk-help-action--primary:hover{ border-color:#086cdf; background:#086cdf; } .wk-help-action-icon{ display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:rgba(22,119,234,.09); color:var(--wk-blue); font-size:15px; line-height:1; } .wk-help-action--primary .wk-help-action-icon{ background:rgba(255,255,255,.16); color:#fff; } .wk-help-action-label{ display:block; } @media(max-width:699px){ .wk-help-actions-buttons{ display:grid; grid-template-columns:1fr; gap:10px; } .wk-help-action{ width:100%; min-height:56px; justify-content:flex-start; padding:13px 15px; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V2.9 Help CTA contrast fix **********************************************************/ /* A régi globális link-színezés felülírta a kék CTA szövegét. Minden linkállapotban kényszerítjük a fehér feliratot. */ .wk-help-action--primary, .wk-help-action--primary:link, .wk-help-action--primary:visited, .wk-help-action--primary:hover, .wk-help-action--primary:focus, .wk-help-action--primary:active, .wk-help-action--primary .wk-help-action-label, .wk-help-action--primary:hover .wk-help-action-label, .wk-help-action--primary:focus .wk-help-action-label, .wk-help-action--primary:active .wk-help-action-label{ color:#fff!important; text-decoration:none!important; } .wk-help-action--primary .wk-help-action-icon{ color:#fff!important; background:rgba(255,255,255,.17)!important; } .wk-help-action--primary:hover, .wk-help-action--primary:focus{ background:#086cdf!important; border-color:#086cdf!important; color:#fff!important; } /********************************************************** WEBKOMFORT CONTENT SYSTEM V3.0 Help CTA underline hard override **********************************************************/ /* A legacy/global link rule later or with higher specificity is still applying underline. Override the actual anchor itself with a much more specific selector, all states included. */ body .wk-page .wk-help-actions .wk-help-actions-buttons a.wk-help-action, body .wk-page .wk-help-actions .wk-help-actions-buttons a.wk-help-action:link, body .wk-page .wk-help-actions .wk-help-actions-buttons a.wk-help-action:visited, body .wk-page .wk-help-actions .wk-help-actions-buttons a.wk-help-action:hover, body .wk-page .wk-help-actions .wk-help-actions-buttons a.wk-help-action:focus, body .wk-page .wk-help-actions .wk-help-actions-buttons a.wk-help-action:active{ text-decoration:none!important; text-decoration-line:none!important; border-bottom:none!important; } body .wk-page .wk-help-actions .wk-help-actions-buttons a.wk-help-action *, body .wk-page .wk-help-actions .wk-help-actions-buttons a.wk-help-action:hover *, body .wk-page .wk-help-actions .wk-help-actions-buttons a.wk-help-action:focus *, body .wk-page .wk-help-actions .wk-help-actions-buttons a.wk-help-action:active *{ text-decoration:none!important; text-decoration-line:none!important; border-bottom:none!important; } /* Explicit final colours, so legacy anchor rules cannot leak through. */ body .wk-page .wk-help-actions .wk-help-actions-buttons a.wk-help-action--primary, body .wk-page .wk-help-actions .wk-help-actions-buttons a.wk-help-action--primary *{ color:#fff!important; } body .wk-page .wk-help-actions .wk-help-actions-buttons a.wk-help-action:not(.wk-help-action--primary), body .wk-page .wk-help-actions .wk-help-actions-buttons a.wk-help-action:not(.wk-help-action--primary) *{ color:var(--wk-blue)!important; } /********************************************************** WEBKOMFORT CONTENT SYSTEM V3.1 Help CTA converted from links to buttons **********************************************************/ .wk-help-action-btn{ appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:13px 18px; border:1px solid rgba(22,119,234,.22); border-radius:10px; background:#fff; color:var(--wk-blue); font-family:'DM Sans','Plus Jakarta Sans',Arial,sans-serif; font-size:15px; line-height:1.2; font-weight:800; text-decoration:none; cursor:pointer; box-shadow:0 8px 20px rgba(13,58,91,.055); } .wk-help-action-btn:hover, .wk-help-action-btn:focus{ border-color:rgba(22,119,234,.42); box-shadow:0 11px 25px rgba(13,58,91,.09); outline:none; } .wk-help-action-btn--primary{ border-color:var(--wk-blue); background:var(--wk-blue); color:#fff; } .wk-help-action-btn--primary:hover, .wk-help-action-btn--primary:focus{ border-color:#086cdf; background:#086cdf; color:#fff; } .wk-help-action-btn .wk-help-action-icon{ display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:rgba(22,119,234,.09); color:var(--wk-blue); } .wk-help-action-btn--primary .wk-help-action-icon{ background:rgba(255,255,255,.17); color:#fff; } @media(max-width:699px){ .wk-help-action-btn{ width:100%; min-height:56px; justify-content:flex-start; padding:13px 15px; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V3.2 Domain check page: typography + working checker card **********************************************************/ /* ======================================================== TYPOGRAPHY HARD OVERRIDE A legacy Bootstrap/global h1-h6 rule was winning on some admin-generated pages. Keep the WK visual system stable. ======================================================== */ .wk-page, .wk-page p, .wk-page li, .wk-page label, .wk-page input, .wk-page button, .wk-page a{ font-family:'DM Sans',Arial,sans-serif!important; } .wk-page h1, .wk-page h2, .wk-page h3, .wk-page h4, .wk-page h5, .wk-page h6, .wk-page .wk-eyebrow{ font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif!important; color:var(--wk-navy)!important; } .wk-page h1{ font-weight:800!important; letter-spacing:-.038em!important; } .wk-page h2{ font-weight:800!important; letter-spacing:-.032em!important; } .wk-page h3{ font-weight:800!important; letter-spacing:-.025em!important; } .wk-page .wk-hero-copy h1{ max-width:760px!important; margin:18px 0 22px!important; font-size:clamp(46px,4.3vw,66px)!important; line-height:1.02!important; font-weight:800!important; letter-spacing:-.04em!important; } .wk-page .wk-hero-copy .wk-lead{ font-size:19px!important; line-height:1.62!important; } /* ======================================================== WORKING DOMAIN CHECKER Used on /domain-ellenorzes. Native GET form -> /domain-regisztracio?domain=... ======================================================== */ .wk-domain-check-card{ position:relative; display:grid; grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr); gap:42px; align-items:center; margin-top:34px; padding:34px 36px; border:1px solid rgba(22,119,234,.16); border-radius:18px; background:#fff; box-shadow:0 18px 48px rgba(11,53,83,.07); overflow:hidden; } .wk-domain-check-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,var(--wk-blue),var(--wk-turquoise),var(--wk-coral)); } .wk-domain-check-copy .wk-eyebrow{ margin:0 0 14px!important; } .wk-domain-check-copy h2{ margin:0 0 10px!important; font-size:clamp(30px,3vw,42px)!important; line-height:1.08!important; } .wk-domain-check-copy p:last-child{ margin-bottom:0!important; } .wk-domain-check-form{ min-width:0; padding:22px; border:1px solid rgba(22,119,234,.13); border-radius:14px; background:#f4f8fc; } .wk-domain-check-form .wk-domain-action-start{ display:inline-flex!important; margin:0 0 14px!important; } .wk-domain-check-form label{ display:block; margin:0 0 8px!important; color:var(--wk-navy)!important; font-size:14px!important; line-height:1.3!important; font-weight:800!important; } .wk-domain-check-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:stretch; } .wk-domain-check-row input[type="text"]{ width:100%; min-width:0; min-height:54px; margin:0!important; padding:0 15px!important; border:1px solid #c9d7e2!important; border-radius:10px!important; background:#fff!important; color:var(--wk-navy)!important; font-size:16px!important; line-height:1!important; box-shadow:none!important; } .wk-domain-check-row input[type="text"]:focus{ outline:3px solid rgba(22,119,234,.12)!important; outline-offset:1px; border-color:var(--wk-blue)!important; } .wk-domain-check-submit{ appearance:none; -webkit-appearance:none; display:flex; align-items:center; justify-content:center; min-width:180px; min-height:54px; margin:0!important; padding:0 20px!important; border:0!important; border-radius:9px!important; background:var(--wk-blue)!important; color:#fff!important; font-size:15px!important; line-height:1.2!important; font-weight:800!important; text-decoration:none!important; cursor:pointer; box-shadow:0 8px 20px rgba(22,119,234,.16); } .wk-domain-check-submit:hover, .wk-domain-check-submit:focus{ background:#086cdf!important; color:#fff!important; } .wk-domain-check-note{ display:flex; align-items:flex-start; gap:8px; margin:12px 0 0!important; color:#657c8e!important; font-size:13px!important; line-height:1.45!important; } .wk-domain-check-note span{ display:grid; flex:0 0 20px; width:20px; height:20px; place-items:center; border-radius:50%; background:rgba(25,184,176,.12); color:var(--wk-turquoise); font-size:13px; font-weight:900; } /* ======================================================== MOBILE ======================================================== */ @media(max-width:699px){ .wk-page .wk-hero-copy h1{ font-size:clamp(36px,10.5vw,48px)!important; line-height:1.03!important; letter-spacing:-.045em!important; } .wk-page .wk-hero-copy .wk-lead{ font-size:17px!important; line-height:1.58!important; } .wk-domain-check-card{ grid-template-columns:1fr; gap:22px; margin-top:26px; padding:26px 18px 20px; border-radius:15px; } .wk-domain-check-copy h2{ font-size:30px!important; line-height:1.08!important; } .wk-domain-check-form{ padding:17px; } .wk-domain-check-row{ grid-template-columns:1fr; gap:10px; } .wk-domain-check-row input[type="text"], .wk-domain-check-submit{ width:100%!important; min-width:0!important; min-height:56px!important; } .wk-domain-check-submit{ font-size:16px!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V3.3 Admin article shell normalization + domain-check page cleanup **********************************************************/ /* Hide the legacy admin-generated page title only when the new WK page supplies its own hero/H1. This removes the duplicated title strip. */ #aloldal:has(.wk-domain-check-page) > .content-top{ display:none!important; } #aloldal:has(.wk-domain-check-page) > .content-bottom{ margin-top:0!important; padding-top:0!important; } #aloldal:has(.wk-domain-check-page) .leiras{ margin-top:0!important; padding-top:0!important; } /* Domain-check page should start directly under the site navigation. */ .wk-domain-check-page .wk-hero{ padding-top:64px!important; padding-bottom:64px!important; } .wk-domain-check-page .wk-hero-grid{ align-items:center!important; gap:64px!important; } .wk-domain-check-page .wk-hero-copy h1{ max-width:720px!important; margin:16px 0 20px!important; font-size:clamp(44px,4vw,62px)!important; line-height:1.03!important; letter-spacing:-.052em!important; } .wk-domain-check-page .wk-hero-media img{ width:100%!important; max-width:640px!important; aspect-ratio:4 / 3!important; object-fit:cover!important; border-radius:14px!important; box-shadow:0 18px 44px rgba(13,58,91,.10)!important; } /* Keep content sections visually even; avoid stretched empty bands. */ .wk-domain-check-page .wk-section{ padding-top:68px!important; padding-bottom:68px!important; } .wk-domain-check-page .wk-section--soft, .wk-domain-check-page .wk-section--creative{ background-position:center!important; } /* The checker is used once only and gets a stronger interactive emphasis. */ .wk-domain-check-page .wk-domain-check-card{ margin-top:0!important; } /* Reading blocks should not become too wide. */ .wk-domain-check-page .wk-reading{ max-width:900px!important; } /* Next-step cards: consistent height and CTA position. */ .wk-domain-check-page .wk-next-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .wk-domain-check-page .wk-next-card{ display:flex; flex-direction:column; min-height:210px; padding:24px; border:1px solid rgba(18,69,105,.12); border-top:3px solid var(--wk-blue); border-radius:10px; background:#fff; box-shadow:0 10px 26px rgba(13,58,91,.055); } .wk-domain-check-page .wk-next-card:nth-child(2){ border-top-color:var(--wk-turquoise); } .wk-domain-check-page .wk-next-card:nth-child(3){ border-top-color:var(--wk-coral); } .wk-domain-check-page .wk-next-card h3{ margin:0 0 9px!important; } .wk-domain-check-page .wk-next-card p{ margin:0 0 16px!important; } .wk-domain-check-page .wk-next-card a{ margin-top:auto!important; font-weight:800!important; } @media(max-width:699px){ .wk-domain-check-page .wk-hero{ padding-top:34px!important; padding-bottom:38px!important; } .wk-domain-check-page .wk-hero-grid{ gap:28px!important; } .wk-domain-check-page .wk-hero-copy h1{ font-size:clamp(34px,10vw,46px)!important; } .wk-domain-check-page .wk-section{ padding-top:46px!important; padding-bottom:46px!important; } .wk-domain-check-page .wk-next-grid{ grid-template-columns:1fr; } .wk-domain-check-page .wk-next-card{ min-height:0; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V3.4 TARGETED PATCH ONLY - restore comfortable heading line-height - reuse already working multi-column domain components **********************************************************/ /* Do not redesign existing components. Only relax heading leading. */ .wk-page h1{ line-height:1.14!important; } .wk-page h2{ line-height:1.18!important; } .wk-page h3{ line-height:1.24!important; } /* Hero can stay a little tighter, but not cramped. */ .wk-page .wk-hero-copy h1, .wk-domain-check-page .wk-hero-copy h1{ line-height:1.12!important; } /* Existing multi-column post-check style reused on /domain-ellenorzes. */ .wk-domain-check-page .wk-domain-aftercheck{ padding-top:58px!important; padding-bottom:58px!important; } .wk-domain-check-page .wk-domain-aftercheck-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); align-items:center; gap:48px; } .wk-domain-check-page .wk-domain-aftercheck-note{ padding:24px 26px; border-left:4px solid var(--wk-turquoise); background:var(--wk-turquoise-soft); } /* Reuse the already-working two-column "next action" component. */ .wk-domain-check-page .wk-domain-next{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:52px; align-items:center; } .wk-domain-check-page .wk-domain-next-actions{ display:grid; gap:12px; } .wk-domain-check-page .wk-domain-next-actions .wk-btn{ width:100%; min-height:54px; } @media(max-width:1039px){ .wk-domain-check-page .wk-domain-aftercheck-grid, .wk-domain-check-page .wk-domain-next{ grid-template-columns:1fr; gap:28px; } } @media(max-width:699px){ .wk-page h1{ line-height:1.12!important; } .wk-page h2{ line-height:1.20!important; } .wk-page h3{ line-height:1.28!important; } .wk-page .wk-hero-copy h1, .wk-domain-check-page .wk-hero-copy h1{ line-height:1.10!important; } .wk-domain-check-page .wk-domain-aftercheck{ padding-top:44px!important; padding-bottom:44px!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V3.9 FINAL /domain-ellenorzes Purpose-driven final layout IMPORTANT: existing working checker/cart components untouched **********************************************************/ /* ======================================================== ADMIN TITLE + INLINE INTRO The admin/system prints the only H1. The inline page starts with an H2 intro section. ======================================================== */ .wk-domain-final .wk-domain-intro{ padding-top:58px!important; padding-bottom:62px!important; } .wk-domain-final .wk-domain-intro-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.9fr); gap:56px; align-items:center; } .wk-domain-final .wk-domain-intro-copy h2{ max-width:700px; margin:16px 0 18px!important; font-size:clamp(38px,3.6vw,54px)!important; line-height:1.12!important; letter-spacing:-.04em!important; } .wk-domain-final .wk-domain-intro-copy .wk-lead{ max-width:720px; margin-bottom:0!important; } .wk-domain-final .wk-domain-intro-media img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; box-shadow:0 18px 44px rgba(13,58,91,.10); } /* ======================================================== DOMAIN USE-CASE GRID Keep the older 2x3 card look the user preferred. ======================================================== */ .wk-domain-final .wk-domain-use-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:28px; } .wk-domain-final .wk-domain-use-card{ position:relative; min-height:185px; padding:22px 22px 20px; border:1px solid rgba(18,69,105,.11); border-radius:0; background:#fff; box-shadow:0 8px 22px rgba(13,58,91,.045); } .wk-domain-final .wk-domain-use-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--wk-blue); } .wk-domain-final .wk-domain-use-card:nth-child(3n+2)::before{ background:var(--wk-turquoise); } .wk-domain-final .wk-domain-use-card:nth-child(3n)::before{ background:var(--wk-coral); } .wk-domain-final .wk-domain-use-card h3{ margin:4px 0 9px!important; font-size:18px!important; line-height:1.3!important; } .wk-domain-final .wk-domain-use-card p{ margin:0!important; color:#506b7e; font-size:14px!important; line-height:1.56!important; } /* ======================================================== READING SECTION Intentional centered reading width — no fake empty column. ======================================================== */ .wk-domain-final .wk-domain-reading{ max-width:900px; margin-left:auto; margin-right:auto; } .wk-domain-final .wk-domain-reading h2{ margin:0 0 20px!important; } .wk-domain-final .wk-domain-reading p{ margin:0 0 20px!important; } .wk-domain-final .wk-domain-tip{ display:grid; grid-template-columns:38px minmax(0,1fr); gap:14px; align-items:flex-start; margin-top:28px; padding:20px 22px; border:1px solid rgba(18,69,105,.11); border-radius:11px; background:#fff; box-shadow:0 8px 22px rgba(13,58,91,.04); } .wk-domain-final .wk-domain-tip-icon{ display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#e9f7f6; color:#0b9d96; font-weight:900; } .wk-domain-final .wk-domain-tip strong{ display:block; margin:1px 0 5px; color:var(--wk-navy); font-size:16px; line-height:1.35; } .wk-domain-final .wk-domain-tip p{ margin:0!important; color:#405d70; } /* ======================================================== TRUE TWO-COLUMN INFORMATION BLOCK Use only because the right side contains a distinct decision. ======================================================== */ .wk-domain-final .wk-domain-split{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr); gap:52px; align-items:center; } .wk-domain-final .wk-domain-split-panel{ padding:26px 28px; border-left:4px solid var(--wk-turquoise); background:#eefafa; } .wk-domain-final .wk-domain-split-panel strong{ display:block; margin-bottom:7px; color:var(--wk-navy); font-size:17px; line-height:1.35; } .wk-domain-final .wk-domain-split-panel p{ margin:0!important; } /* ======================================================== HELP BLOCK Reuses current contact button classes. ======================================================== */ .wk-domain-final .wk-domain-help{ position:relative; overflow:hidden; padding:38px 40px; background: radial-gradient(circle at 95% 12%, rgba(25,184,176,.12) 0 68px, transparent 69px), radial-gradient(circle at 4% 95%, rgba(22,119,234,.09) 0 78px, transparent 79px), linear-gradient(120deg,#f2faff 0%,#f8fbfb 58%,#fff8f6 100%); border:1px solid rgba(18,69,105,.07); border-radius:14px; } .wk-domain-final .wk-domain-help-inner{ max-width:900px; } .wk-domain-final .wk-domain-help h2{ margin:0 0 14px!important; } /* ======================================================== DOMAIN CHECKER NOTE Typography only. Functional/layout rules untouched. ======================================================== */ .wk-domain-final .wk-domain-check-note{ margin-top:10px!important; color:#72899a!important; font-size:11.5px!important; line-height:1.4!important; font-weight:400!important; } .wk-domain-final .wk-domain-check-note span{ font-size:10.5px!important; } /* Comfortable heading leading on this page */ .wk-domain-final h2{ line-height:1.16!important; } .wk-domain-final h3{ line-height:1.28!important; } /* ======================================================== RESPONSIVE ======================================================== */ @media(max-width:1039px){ .wk-domain-final .wk-domain-intro-grid{ grid-template-columns:1fr 1fr; gap:34px; } .wk-domain-final .wk-domain-use-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .wk-domain-final .wk-domain-split{ grid-template-columns:1fr; gap:28px; } } @media(max-width:699px){ .wk-domain-final .wk-domain-intro{ padding-top:34px!important; padding-bottom:42px!important; } .wk-domain-final .wk-domain-intro-grid{ grid-template-columns:1fr; gap:26px; } .wk-domain-final .wk-domain-intro-copy h2{ font-size:34px!important; line-height:1.16!important; } .wk-domain-final .wk-domain-intro-media{ order:-1; } .wk-domain-final .wk-domain-use-grid{ grid-template-columns:1fr; gap:12px; } .wk-domain-final .wk-domain-use-card{ min-height:0; padding:19px; } .wk-domain-final .wk-domain-reading{ max-width:none; } .wk-domain-final .wk-domain-tip{ grid-template-columns:34px minmax(0,1fr); gap:12px; padding:17px; } .wk-domain-final .wk-domain-tip-icon{ width:34px; height:34px; } .wk-domain-final .wk-domain-split-panel{ padding:20px; } .wk-domain-final .wk-domain-help{ padding:28px 20px; } .wk-domain-final .wk-domain-check-note{ font-size:11px!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V4.0 /domain-ellenorzes FINAL POLISH ONLY THREE TARGETED FIXES: 1) checker note smaller 2) centered reading section 3) boxed related-article cards restored **********************************************************/ /* ======================================================== 1. DOMAIN CHECKER SECONDARY NOTE Stronger selector so legacy/global p rules cannot enlarge it. ======================================================== */ .wk-domain-final .wk-domain-check-form .wk-domain-check-note{ display:flex!important; align-items:flex-start!important; gap:7px!important; margin:9px 0 0!important; padding:0!important; color:#748a99!important; font-family:'DM Sans',Arial,sans-serif!important; font-size:11px!important; line-height:1.35!important; font-weight:400!important; letter-spacing:0!important; } .wk-domain-final .wk-domain-check-form .wk-domain-check-note span{ display:inline-grid!important; place-items:center!important; flex:0 0 16px!important; width:16px!important; height:16px!important; margin-top:0!important; border-radius:50%!important; background:rgba(25,184,176,.11)!important; color:var(--wk-turquoise)!important; font-size:10px!important; line-height:16px!important; font-weight:900!important; } /* ======================================================== 2. CENTER THE LONG-FORM WHITE READING BLOCK No fake second column; proper centered reading measure. ======================================================== */ .wk-domain-final .wk-domain-reading{ display:block!important; width:min(900px,100%)!important; max-width:900px!important; margin-left:auto!important; margin-right:auto!important; padding-left:0!important; padding-right:0!important; float:none!important; clear:both!important; } .wk-domain-final .wk-domain-reading .wk-eyebrow, .wk-domain-final .wk-domain-reading h2, .wk-domain-final .wk-domain-reading p, .wk-domain-final .wk-domain-reading .wk-domain-tip{ width:100%!important; max-width:none!important; } /* ======================================================== 3. RELATED ARTICLES / NEXT STEPS Restore the boxed 3-column pattern. ======================================================== */ .wk-domain-final .wk-next-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:18px!important; width:100%!important; margin-top:28px!important; } .wk-domain-final .wk-next-card{ position:relative!important; display:flex!important; flex-direction:column!important; min-width:0!important; min-height:215px!important; margin:0!important; padding:24px!important; border:1px solid rgba(18,69,105,.12)!important; border-top:3px solid var(--wk-blue)!important; border-radius:8px!important; background:#fff!important; box-shadow:0 8px 24px rgba(13,58,91,.045)!important; } .wk-domain-final .wk-next-card:nth-child(2){ border-top-color:var(--wk-turquoise)!important; } .wk-domain-final .wk-next-card:nth-child(3){ border-top-color:var(--wk-coral)!important; } .wk-domain-final .wk-next-card h3{ margin:0 0 9px!important; font-size:19px!important; line-height:1.28!important; } .wk-domain-final .wk-next-card p{ margin:0 0 18px!important; color:#506b7e!important; font-size:14px!important; line-height:1.55!important; } .wk-domain-final .wk-next-card a{ display:inline-flex!important; align-items:center!important; align-self:flex-start!important; margin-top:auto!important; padding:10px 14px!important; border:1px solid rgba(22,119,234,.22)!important; border-radius:7px!important; background:#fff!important; color:var(--wk-blue)!important; font-weight:800!important; text-decoration:none!important; box-shadow:0 5px 14px rgba(22,119,234,.06)!important; } .wk-domain-final .wk-next-card a:hover, .wk-domain-final .wk-next-card a:focus{ background:#eef6ff!important; color:#086cdf!important; text-decoration:none!important; } /* ======================================================== RESPONSIVE ======================================================== */ @media(max-width:1039px){ .wk-domain-final .wk-next-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } @media(max-width:699px){ .wk-domain-final .wk-domain-reading{ width:100%!important; max-width:none!important; } .wk-domain-final .wk-domain-check-form .wk-domain-check-note{ font-size:10.5px!important; line-height:1.35!important; } .wk-domain-final .wk-next-grid{ grid-template-columns:1fr!important; gap:12px!important; } .wk-domain-final .wk-next-card{ min-height:0!important; padding:19px!important; } .wk-domain-final .wk-next-card a{ width:100%!important; justify-content:center!important; } } /********************************************************** DOMAIN �RAK � K�LTS�GT�PUS V�LASZT� K�RTY�K **********************************************************/ .wk-domain-arak-page .wk-domain-cost-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:18px!important; margin-top:28px!important; width:100%!important; } .wk-domain-arak-page .wk-domain-cost-card{ position:relative!important; display:block!important; min-width:0!important; min-height:205px!important; padding:0!important; background:#fff!important; border:1px solid rgba(18,69,105,.12)!important; border-top:3px solid var(--wk-blue)!important; border-radius:8px!important; box-shadow:0 8px 24px rgba(13,58,91,.045)!important; color:inherit!important; text-decoration:none!important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease!important; } .wk-domain-arak-page .wk-domain-cost-card:nth-child(2){ border-top-color:var(--wk-turquoise)!important; } .wk-domain-arak-page .wk-domain-cost-card:nth-child(3){ border-top-color:var(--wk-coral)!important; } .wk-domain-arak-page .wk-domain-cost-card-inner{ display:flex!important; flex-direction:column!important; height:100%!important; min-height:202px!important; padding:24px!important; } .wk-domain-arak-page .wk-domain-cost-card h3{ margin:0 0 10px!important; color:var(--wk-ink)!important; font-size:20px!important; line-height:1.28!important; font-weight:800!important; } .wk-domain-arak-page .wk-domain-cost-card p{ margin:0 0 22px!important; color:#506b7e!important; font-size:14px!important; line-height:1.55!important; } .wk-domain-arak-page .wk-domain-cost-link{ display:inline-flex!important; align-items:center!important; margin-top:auto!important; color:var(--wk-blue)!important; font-size:14px!important; line-height:1.3!important; font-weight:800!important; text-decoration:none!important; } .wk-domain-arak-page .wk-domain-cost-card:hover, .wk-domain-arak-page .wk-domain-cost-card:focus{ transform:translateY(-2px)!important; box-shadow:0 13px 30px rgba(13,58,91,.085)!important; border-color:rgba(22,119,234,.24)!important; text-decoration:none!important; } .wk-domain-arak-page .wk-domain-cost-card:hover .wk-domain-cost-link, .wk-domain-arak-page .wk-domain-cost-card:focus .wk-domain-cost-link{ color:#086cdf!important; } /* TABLET */ @media(max-width:1039px){ .wk-domain-arak-page .wk-domain-cost-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* MOBILE */ @media(max-width:699px){ .wk-domain-arak-page .wk-domain-cost-grid{ grid-template-columns:1fr!important; gap:12px!important; margin-top:22px!important; } .wk-domain-arak-page .wk-domain-cost-card{ min-height:0!important; } .wk-domain-arak-page .wk-domain-cost-card-inner{ min-height:0!important; padding:19px!important; } .wk-domain-arak-page .wk-domain-cost-card h3{ font-size:18px!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V5.0 — CANONICAL SUBPAGE RHYTHM 2026-08-28 Additive governance layer. Legacy business/function CSS is untouched. Goal: one consistent visual route on normal subpages: Erkeztem -> Megertettem -> Atlatom -> El tudom donteni -> Megnyugodtam -> Tovabblepek **********************************************************/ :root{ --wk-wide:1180px; --wk-reading:880px; --wk-narrow:700px; --wk-section-y:clamp(72px,7vw,104px); --wk-section-y-mobile:54px; --wk-block-gap:clamp(32px,4vw,48px); --wk-item-gap:18px; --wk-email-accent:#19b8b0; } /* ---------- Canonical section rhythm ---------- */ .wk-page .wk-section{ padding:var(--wk-section-y) 0!important; } .wk-page .wk-section--compact{ padding:clamp(46px,5vw,66px) 0!important; } .wk-page .wk-shell{ width:min(var(--wk-wide),calc(100% - 64px)); margin-left:auto; margin-right:auto; } .wk-page .wk-reading, .wk-page .wk-flow-reading{ width:min(var(--wk-reading),100%); margin-left:auto; margin-right:auto; } .wk-page .wk-narrow, .wk-page .wk-flow-narrow{ width:min(var(--wk-narrow),100%); margin-left:auto; margin-right:auto; } /* Heading/body relationship is a system rule, not a page-specific patch. */ .wk-page .wk-section h2{ margin-top:0!important; margin-bottom:20px!important; } .wk-page .wk-section h3{ margin-top:0!important; } .wk-page .wk-section p:last-child{ margin-bottom:0!important; } /* A structural block must never visually collide with its intro copy. */ .wk-page :is(p,.wk-lead,.wk-section-head,.wk-reading,.wk-flow-reading) + :is(.wk-grid-2,.wk-grid-3,.wk-card-grid,.wk-feature-grid,.wk-steps,.wk-checks,.webtarhely-arak){ margin-top:var(--wk-block-gap)!important; } .wk-page .wk-section-head + :is(.wk-grid-2,.wk-grid-3,.wk-card-grid,.wk-feature-grid,.wk-steps){ margin-top:var(--wk-block-gap)!important; } /* ---------- Canonical non-card feature blocks ---------- Used for equal-level benefits / simple facts. No radius, no hover, no fake click affordance. */ .wk-feature-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:var(--wk-block-gap); border-top:1px solid var(--wk-line); border-bottom:1px solid var(--wk-line); } .wk-feature{ position:relative; min-width:0; padding:30px 28px 32px; border-right:1px solid var(--wk-line); background:#fff; } .wk-feature:last-child{border-right:0;} .wk-feature::before{ content:""; position:absolute; left:0;right:0;top:-1px; height:3px; background:var(--wk-blue); } .wk-feature:nth-child(3n+2)::before{background:var(--wk-turquoise);} .wk-feature:nth-child(3n)::before{background:var(--wk-coral);} .wk-feature h3{ margin:0 0 12px!important; font-size:clamp(20px,2vw,27px)!important; line-height:1.16!important; letter-spacing:-.03em!important; } .wk-feature p{ margin:0!important; color:#506b7e!important; } /* Generic old wk-card should not animate unless it is an actual link/CTA component. */ .wk-page .wk-card:not(a):not(.wk-next-card):hover{ transform:none!important; box-shadow:0 10px 30px rgba(13,45,71,.05)!important; border-color:var(--wk-line)!important; } /* ---------- Two-column governance ---------- Narrative text + narrative text is intentionally NOT a generic desktop pattern. wk-grid-2 remains available for hero, comparison, form, image or explicit split-panel use. */ .wk-flow-stack{ display:grid; grid-template-columns:1fr; gap:var(--wk-section-y); } .wk-flow-stack > *{ width:min(var(--wk-reading),100%); margin-left:auto; margin-right:auto; } /* ---------- Canonical final CTA ---------- */ .wk-cta-panel{ position:relative; overflow:hidden; width:min(920px,100%); margin:0 auto; padding:34px 36px; border:1px solid rgba(18,69,105,.13); border-radius:12px; background:#fff; box-shadow:0 14px 34px rgba(13,58,91,.065); } .wk-cta-panel::before{ content:""; position:absolute; left:0;right:0;top:0; height:5px; background:linear-gradient(90deg,var(--wk-blue),var(--wk-turquoise)); } .wk-cta-panel h2{margin-top:0!important;} /* ======================================================== EMAIL PRICE MATRIX — presentation only START-005-STOP / cikkek-php/005.php markup and pricing logic stay untouched. ======================================================== */ .wk-email-page #email-arak .webtarhely-arak{ display:table!important; width:100%!important; min-width:860px; margin:42px 0 30px!important; border-collapse:separate!important; border-spacing:0!important; overflow:hidden; border:1px solid #dbe6ee!important; border-radius:10px; background:#fff; box-shadow:0 12px 34px rgba(13,58,91,.06); } .wk-email-page #email-arak .webtarhely-arak tr{ background:#fff; } .wk-email-page #email-arak .webtarhely-arak tr:nth-child(even){ background:#f8fbfd; } .wk-email-page #email-arak .webtarhely-arak td{ max-width:none!important; padding:16px 14px!important; border:0!important; border-right:1px solid #e3ebf1!important; border-bottom:1px solid #e3ebf1!important; color:#29465d!important; font-size:14px!important; line-height:1.45!important; vertical-align:middle!important; background:transparent!important; } .wk-email-page #email-arak .webtarhely-arak td:first-child{ width:38%; color:#17354e!important; font-weight:500; text-align:left!important; } .wk-email-page #email-arak .webtarhely-arak td:not(:first-child){ width:15.5%; text-align:center!important; } .wk-email-page #email-arak .webtarhely-arak td:last-child{border-right:0!important;} .wk-email-page #email-arak .webtarhely-arak tr:last-child td{border-bottom:0!important;} /* Neutralize historic inline orange/pink/yellow/blue backgrounds. */ .wk-email-page #email-arak .webtarhely-arak span, .wk-email-page #email-arak .webtarhely-arak a span{ padding:0!important; background:transparent!important; color:inherit!important; } .wk-email-page #email-arak .webtarhely-arak a{ color:inherit!important; text-decoration:none!important; } .wk-email-page #email-arak .webtarhely-arak tr:first-child td{ padding-top:19px!important; padding-bottom:19px!important; background:#eef7f8!important; color:#113550!important; font-family:var(--spc-font-display)!important; font-weight:800!important; text-align:center!important; } .wk-email-page #email-arak .webtarhely-arak tr:first-child td:first-child{ background:#f4f8fb!important; color:#5c7182!important; font-size:12px!important; letter-spacing:.055em; text-transform:uppercase; text-align:left!important; } .wk-email-page #email-arak .webtarhely-arak tr:first-child td:not(:first-child) strong{ font-size:20px!important; color:#0b5f67!important; } .wk-email-page #email-arak .webtarhely-arak img{ display:inline-block!important; width:22px!important; height:22px!important; object-fit:contain; margin:0!important; } .wk-email-page #email-arak .webtarhely-arak tr:nth-last-child(-n+2) td{ background:#f2faf9!important; } .wk-email-page #email-arak .webtarhely-arak tr:nth-last-child(-n+2) td:first-child{ color:#103c54!important; font-weight:800!important; } .wk-email-page #email-arak .webtarhely-arak tr:nth-last-child(-n+2) td:not(:first-child) strong{ display:block; color:#0b5f67!important; font-size:18px!important; line-height:1.2!important; } /* The PHP also emits a paragraph + UL for 50/100/200 GB after the table. */ .wk-email-page #email-arak .webtarhely-arak + h3{display:none!important;} .wk-email-page #email-arak .webtarhely-arak ~ ul{ width:min(760px,100%); margin:22px 0 28px!important; padding:20px 24px!important; border-left:4px solid var(--wk-email-accent); background:#f1faf9; list-style:none!important; } .wk-email-page #email-arak .webtarhely-arak ~ ul li{ margin:8px 0!important; line-height:1.5!important; } /* ---------- Email accent is deliberately subtle ---------- */ .wk-email-page .wk-eyebrow, .wk-email-page .wk-kicker{border-left-color:var(--wk-email-accent)!important;} /* ---------- Responsive ---------- */ @media(max-width:900px){ .wk-feature-grid{grid-template-columns:1fr;} .wk-feature{border-right:0;border-bottom:1px solid var(--wk-line);} .wk-feature:last-child{border-bottom:0;} } @media(max-width:767px){ .wk-page .wk-section{padding:var(--wk-section-y-mobile) 0!important;} .wk-page .wk-shell{width:calc(100% - 32px)!important;} .wk-page :is(p,.wk-lead,.wk-section-head,.wk-reading,.wk-flow-reading) + :is(.wk-grid-2,.wk-grid-3,.wk-card-grid,.wk-feature-grid,.wk-steps,.wk-checks,.webtarhely-arak){ margin-top:30px!important; } .wk-feature{padding:26px 20px 28px;} .wk-cta-panel{padding:28px 22px;} /* Price matrix remains a true comparison table on phones. Horizontal scroll is safer than destroying row/column meaning. */ .wk-email-page #email-arak .wk-shell{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .wk-email-page #email-arak .webtarhely-arak{ display:table!important; min-width:760px!important; margin-top:30px!important; } .wk-email-page #email-arak .webtarhely-arak td{ white-space:normal!important; font-size:13px!important; padding:13px 11px!important; } } /********************************************************** WEBKOMFORT CONTENT SYSTEM V5.1 — EMAIL PRICING SIMPLIFICATION The old feature matrix is intentionally replaced by a price-only comparison. All plans contain the same service; only storage differs. **********************************************************/ .wk-email-page #email-arak .wk-email-pricing{ margin-top:44px; } .wk-email-page #email-arak .wk-email-price-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .wk-email-page #email-arak .wk-email-price-table{ width:100%; min-width:760px; border-collapse:separate; border-spacing:0; border:1px solid #d8e5ed; background:#fff; } .wk-email-page #email-arak .wk-email-price-table th, .wk-email-page #email-arak .wk-email-price-table td{ padding:20px 18px; border-right:1px solid #e2eaf0; border-bottom:1px solid #e2eaf0; vertical-align:middle; } .wk-email-page #email-arak .wk-email-price-table tr > *:last-child{border-right:0;} .wk-email-page #email-arak .wk-email-price-table tbody tr:last-child > *{border-bottom:0;} .wk-email-page #email-arak .wk-email-price-table thead th{ background:#eef8f8; color:#0c5c65; text-align:center; font-family:var(--spc-font-display); font-size:20px; font-weight:800; } .wk-email-page #email-arak .wk-email-price-table thead th:first-child{ width:220px; background:#f5f8fa; color:#667b8c; text-align:left; font-size:13px; letter-spacing:.055em; text-transform:uppercase; } .wk-email-page #email-arak .wk-email-price-table tbody th{ width:220px; background:#fbfcfd; color:#173852; text-align:left; font-family:var(--spc-font-display); font-weight:700; line-height:1.35; } .wk-email-page #email-arak .wk-email-price-table tbody th small{ display:block; margin-top:5px; color:#0c7b77; font-family:var(--spc-font-body); font-size:12px; font-weight:700; } .wk-email-page #email-arak .wk-email-price-table tbody td{ background:#fff; text-align:center; } .wk-email-page #email-arak .wk-email-price-table .wk-email-price-saving td, .wk-email-page #email-arak .wk-email-price-table .wk-email-price-saving th{ background:#f3faf9; } .wk-email-page #email-arak .wk-email-price-table a{ display:block; color:inherit!important; text-decoration:none!important; } .wk-email-page #email-arak .wk-email-price-table thead a{ color:#0c5c65!important; } .wk-email-page #email-arak .wk-email-price-table tbody td a{ padding:4px 0; } .wk-email-page #email-arak .wk-email-price-table tbody td strong{ display:block; color:#0b4963; font-family:var(--spc-font-display); font-size:20px; line-height:1.2; font-weight:800; white-space:nowrap; } .wk-email-page #email-arak .wk-email-price-table tbody td small{ display:block; margin-top:7px; color:#688091; font-size:12px; line-height:1.3; } .wk-email-page #email-arak .wk-email-price-table a:hover strong, .wk-email-page #email-arak .wk-email-price-table thead a:hover{ color:#087c78!important; } .wk-email-page #email-arak .wk-email-price-note{ margin:16px 0 0!important; color:#647b8c!important; font-size:14px!important; line-height:1.5!important; } .wk-email-page #email-arak .wk-email-large-plans{ margin-top:34px; padding:26px 28px; border-left:4px solid var(--wk-email-accent); background:#f3faf9; } .wk-email-page #email-arak .wk-email-large-plans-copy strong{ display:block; margin-bottom:5px; color:#123a52; font-family:var(--spc-font-display); font-size:20px; font-weight:800; } .wk-email-page #email-arak .wk-email-large-plans-copy span{ color:#5f7688; font-size:15px; } .wk-email-page #email-arak .wk-email-large-plan-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:20px; border-top:1px solid #d7e7e5; border-bottom:1px solid #d7e7e5; } .wk-email-page #email-arak .wk-email-large-plan-list a{ display:flex; flex-direction:column; gap:4px; padding:17px 18px; border-right:1px solid #d7e7e5; color:#173852!important; text-decoration:none!important; } .wk-email-page #email-arak .wk-email-large-plan-list a:last-child{border-right:0;} .wk-email-page #email-arak .wk-email-large-plan-list strong{ color:#0c696c; font-family:var(--spc-font-display); font-size:17px; font-weight:800; } .wk-email-page #email-arak .wk-email-large-plan-list span{ font-weight:700; } .wk-email-page #email-arak .wk-email-large-plan-list small{ color:#718696; font-size:12px; } .wk-email-page #email-arak .wk-email-large-plan-list a:hover{ background:#fff; } .wk-email-page #email-arak .wk-email-large-plan-note{ margin:14px 0 0!important; color:#647b8c!important; font-size:13px!important; } @media(max-width:767px){ .wk-email-page #email-arak .wk-email-pricing{margin-top:30px;} .wk-email-page #email-arak .wk-email-price-table{min-width:700px;} .wk-email-page #email-arak .wk-email-price-table th, .wk-email-page #email-arak .wk-email-price-table td{padding:16px 13px;} .wk-email-page #email-arak .wk-email-large-plans{padding:22px 18px;} .wk-email-page #email-arak .wk-email-large-plan-list{grid-template-columns:1fr;} .wk-email-page #email-arak .wk-email-large-plan-list a{ border-right:0; border-bottom:1px solid #d7e7e5; } .wk-email-page #email-arak .wk-email-large-plan-list a:last-child{border-bottom:0;} } /********************************************************** WEBKOMFORT CONTENT SYSTEM V5.4 — SIMPLE PRICE LIST E-mail pricing aligned with the /domain-arak visual logic: promo + simple rows + one CTA. **********************************************************/ .wk-email-page #email-arak .wk-email-price-simple{ width:min(900px,100%); margin-top:40px; } /* Shared visual language with the existing domain promo block, without reusing a domain-specific class name in the markup. */ .wk-email-page #email-arak .wk-price-promo{ position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px 18px; width:min(620px,100%); margin:0 0 30px; padding:20px 22px; border:1px solid rgba(22,119,234,.16); border-radius:14px; background:#fff; box-shadow:0 14px 34px rgba(13,58,91,.09); } .wk-email-page #email-arak .wk-price-promo::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--wk-blue) 0%,var(--wk-turquoise) 52%,var(--wk-coral) 100%); } .wk-email-page #email-arak .wk-price-promo-label{ display:inline-flex; align-items:center; margin:0 0 8px; padding:6px 9px; border-radius:6px; background:var(--wk-coral); color:#fff; font-size:11px; font-weight:900; line-height:1; letter-spacing:.09em; text-transform:uppercase; } .wk-email-page #email-arak .wk-price-promo-title{ margin:0!important; color:var(--wk-navy)!important; font-family:var(--spc-font-display); font-size:17px!important; line-height:1.35!important; font-weight:800!important; } .wk-email-page #email-arak .wk-price-promo-value{ display:flex; align-items:baseline; gap:7px; white-space:nowrap; } .wk-email-page #email-arak .wk-price-promo-value strong{ color:var(--wk-blue); font-family:var(--spc-font-display); font-size:36px; line-height:1; font-weight:800; letter-spacing:-.045em; } .wk-email-page #email-arak .wk-price-promo-value span{ color:var(--wk-navy); font-size:14px; font-weight:800; } .wk-email-page #email-arak .wk-price-promo-note{ grid-column:1 / -1; margin:2px 0 0!important; color:#607889!important; font-size:13px!important; line-height:1.45!important; } /* Price rows: same quiet two-column reading pattern as domain pricing. */ .wk-email-page #email-arak .wk-simple-price-list{ width:100%; border:1px solid #d6e2e9; background:#fff; } .wk-email-page #email-arak .wk-simple-price-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,340px); align-items:center; min-height:76px; border-bottom:1px solid #d6e2e9; } .wk-email-page #email-arak .wk-simple-price-row:last-child{ border-bottom:0; } .wk-email-page #email-arak .wk-simple-price-name{ padding:18px 20px; color:#173852; font-size:15px; line-height:1.45; } .wk-email-page #email-arak .wk-simple-price-name strong{ font-weight:800; } .wk-email-page #email-arak .wk-simple-price-value{ padding:16px 20px; border-left:1px solid #d6e2e9; text-align:right; } .wk-email-page #email-arak .wk-simple-price-value strong{ display:block; color:#173852; font-family:var(--spc-font-display); font-size:16px; line-height:1.35; font-weight:800; } .wk-email-page #email-arak .wk-simple-price-value small{ display:block; margin-top:3px; color:#607889; font-size:12px; line-height:1.35; } .wk-email-page #email-arak .wk-simple-price-footer{ display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:24px; } .wk-email-page #email-arak .wk-simple-price-footer p{ max-width:650px; margin:0!important; color:#607889!important; font-size:13px!important; line-height:1.55!important; } .wk-email-page #email-arak .wk-simple-price-cta, .wk-email-page #email-arak a.wk-simple-price-cta, .wk-email-page #email-arak a.wk-simple-price-cta:visited, .wk-email-page #email-arak a.wk-simple-price-cta:hover, .wk-email-page #email-arak a.wk-simple-price-cta:focus{ flex:0 0 auto; color:#fff!important; text-decoration:none!important; } @media(max-width:767px){ .wk-email-page #email-arak .wk-email-price-simple{ margin-top:30px; } .wk-email-page #email-arak .wk-price-promo{ grid-template-columns:1fr auto; margin-bottom:22px; padding:18px; } .wk-email-page #email-arak .wk-price-promo-value strong{ font-size:30px; } .wk-email-page #email-arak .wk-price-promo-value span{ font-size:12px; } .wk-email-page #email-arak .wk-simple-price-row{ grid-template-columns:minmax(0,1fr) minmax(135px,45%); min-height:68px; } .wk-email-page #email-arak .wk-simple-price-name{ padding:14px 12px; font-size:13px; } .wk-email-page #email-arak .wk-simple-price-value{ padding:13px 12px; } .wk-email-page #email-arak .wk-simple-price-value strong{ font-size:14px; } .wk-email-page #email-arak .wk-simple-price-value small{ font-size:10.5px; } .wk-email-page #email-arak .wk-simple-price-footer{ display:block; margin-top:20px; } .wk-email-page #email-arak .wk-simple-price-cta{ display:flex; width:100%; margin-top:18px; justify-content:center; } } @media(max-width:380px){ .wk-email-page #email-arak .wk-price-promo{ grid-template-columns:1fr; } .wk-email-page #email-arak .wk-price-promo-value{ justify-content:flex-start; } .wk-email-page #email-arak .wk-simple-price-row{ grid-template-columns:minmax(0,1fr) minmax(125px,46%); } .wk-email-page #email-arak .wk-simple-price-name, .wk-email-page #email-arak .wk-simple-price-value{ padding-left:9px; padding-right:9px; } } /********************************************************** WEBKOMFORT E-MAIL FINAL ALIGNMENT + UNLIMITED ADDRESSES V5.5 **********************************************************/ /* Pricing block: centered as one visual unit */ .wk-email-page #email-arak .wk-email-price-simple{ width:min(900px,100%); margin:40px auto 0; } /* The promo belongs to the same centered pricing axis */ .wk-email-page #email-arak .wk-price-promo{ margin-left:auto; margin-right:auto; } /* Clear commercial fact inside the pricing block */ .wk-email-page #email-arak .wk-email-price-unlimited{ width:100%; margin:0 0 18px; padding:18px 20px; border-left:3px solid var(--wk-turquoise); background:#f1faf9; } .wk-email-page #email-arak .wk-email-price-unlimited strong{ display:block; margin-bottom:5px; color:#123a52; font-family:var(--spc-font-display); font-size:18px; line-height:1.3; font-weight:800; } .wk-email-page #email-arak .wk-email-price-unlimited span{ display:block; color:#526f81; font-size:14px; line-height:1.55; } /* Every package row says explicitly that address count is unlimited */ .wk-email-page #email-arak .wk-simple-price-unlimited-inline{ color:#0b8581; font-size:13px; font-weight:700; } /* Footer belongs to the list, not to a separate left-aligned column */ .wk-email-page #email-arak .wk-simple-price-footer{ display:block; margin-top:18px; } .wk-email-page #email-arak .wk-simple-price-footer p{ max-width:760px; margin:0 auto!important; text-align:center; } /* The page CTA must sit on exactly the same axis as the pricing block */ .wk-email-page #email-arak > .wk-shell > .wk-actions{ width:min(900px,100%); margin:26px auto 0; justify-content:center; text-align:center; } /* The earlier scalability strip is part of the current page HTML; define it here because the latest uploaded CSS did not contain it. */ .wk-email-page .wk-email-scale-strip{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); width:100%; margin-top:38px; border-top:1px solid #d7e4ea; border-bottom:1px solid #d7e4ea; background:#f6fbfb; } .wk-email-page .wk-email-scale-main, .wk-email-page .wk-email-scale-extra{ padding:26px 28px; } .wk-email-page .wk-email-scale-extra{ border-left:1px solid #d7e4ea; } .wk-email-page .wk-email-scale-eyebrow{ display:block; margin-bottom:7px; color:#0b8581; font-size:12px; line-height:1.2; font-weight:900; letter-spacing:.075em; text-transform:uppercase; } .wk-email-page .wk-email-scale-main strong, .wk-email-page .wk-email-scale-extra strong{ display:block; color:#123a52; font-family:var(--spc-font-display); font-weight:800; } .wk-email-page .wk-email-scale-main strong{ font-size:26px; line-height:1.18; letter-spacing:-.025em; } .wk-email-page .wk-email-scale-extra strong{ font-size:21px; line-height:1.22; } .wk-email-page .wk-email-scale-main p, .wk-email-page .wk-email-scale-extra p{ margin:9px 0 0!important; color:#607889!important; font-size:14px!important; line-height:1.6!important; } @media(max-width:767px){ .wk-email-page #email-arak .wk-email-price-simple{ margin:30px auto 0; } .wk-email-page #email-arak .wk-email-price-unlimited{ padding:16px 14px; } .wk-email-page #email-arak .wk-email-price-unlimited strong{ font-size:16px; } .wk-email-page #email-arak .wk-email-price-unlimited span{ font-size:13px; } .wk-email-page #email-arak .wk-simple-price-unlimited-inline{ display:block; margin-top:3px; font-size:11px; line-height:1.35; } .wk-email-page #email-arak .wk-simple-price-footer p{ text-align:left; } .wk-email-page #email-arak > .wk-shell > .wk-actions{ width:100%; margin-top:22px; } .wk-email-page #email-arak > .wk-shell > .wk-actions .wk-btn{ width:100%; justify-content:center; } .wk-email-page .wk-email-scale-strip{ grid-template-columns:1fr; margin-top:30px; } .wk-email-page .wk-email-scale-main, .wk-email-page .wk-email-scale-extra{ padding:20px 18px; } .wk-email-page .wk-email-scale-extra{ border-left:0; border-top:1px solid #d7e4ea; } .wk-email-page .wk-email-scale-main strong{ font-size:22px; } .wk-email-page .wk-email-scale-extra strong{ font-size:18px; } } /********************************************************** WEBKOMFORT FORM SYSTEM V1 2026-09-02 Shared form presentation for canonical WK landing pages. Presentation only: no backend hooks or business logic. **********************************************************/ .wk-form-intro{ text-align:center; margin-bottom:38px; } .wk-form-contact-option{ width:min(920px,calc(100% - 64px)); margin:0 auto 18px; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:24px; background:#fff; border:1px solid var(--wk-line); border-radius:12px; } .wk-form-contact-option strong{ display:block; margin-bottom:4px; color:var(--wk-navy); font-family:var(--spc-font-display); font-weight:800; } .wk-form-contact-option p{ margin:0!important; color:#5b7283!important; font-size:14px!important; line-height:1.55!important; } .wk-form-contact-option .wk-btn{ flex:0 0 auto; } .wk-form-wrap{ width:min(920px,calc(100% - 64px)); margin:0 auto; } .wk-form{ padding:34px 36px 36px; background:#fff; border:1px solid var(--wk-line); border-radius:14px; box-shadow:0 16px 40px rgba(13,58,91,.07); } .wk-form-section{ margin:0; padding:0 0 30px; border:0; border-bottom:1px solid var(--wk-line); } .wk-form-section + .wk-form-section{ padding-top:30px; } .wk-form-section:last-of-type{ padding-bottom:30px; } .wk-form-section legend{ width:100%; display:flex; align-items:center; gap:10px; margin:0 0 22px; padding:0; color:var(--wk-navy); font-family:var(--spc-font-display); font-size:22px; line-height:1.25; font-weight:800; letter-spacing:-.025em; } .wk-form-number{ width:28px; height:28px; flex:0 0 28px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--wk-blue); color:#fff; font-size:13px; line-height:1; font-weight:800; } .wk-field-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; } .wk-field{ min-width:0; } .wk-field + .wk-field{ margin-top:18px; } .wk-field-grid .wk-field + .wk-field{ margin-top:0; } .wk-field label{ display:block; margin:0 0 7px; color:#1d3e57; font-family:var(--spc-font-ui); font-size:14px; line-height:1.4; font-weight:700; } .wk-field-help{ margin:-1px 0 10px!important; color:#687f90!important; font-size:13px!important; line-height:1.55!important; } .wk-field input[type="text"], .wk-field input[type="email"], .wk-field input[type="tel"], .wk-field input[type="url"], .wk-field textarea, .wk-field select{ width:100%; min-width:0; margin:0; padding:13px 14px; border:1px solid #cfdce5; border-radius:7px; background:#fbfdfe; color:#223f54; font-family:var(--spc-font-ui); font-size:16px; line-height:1.45; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; } .wk-field input[type="text"], .wk-field input[type="email"], .wk-field input[type="tel"], .wk-field input[type="url"], .wk-field select{ min-height:48px; } .wk-field textarea{ display:block; min-height:140px; resize:vertical; } .wk-field input::placeholder, .wk-field textarea::placeholder{ color:#91a3b0; opacity:1; } .wk-field input:focus, .wk-field textarea:focus, .wk-field select:focus{ outline:0; border-color:var(--wk-blue); background:#fff; box-shadow:0 0 0 3px rgba(19,116,218,.10); } .wk-form-consent{ padding:24px 0 0; } .wk-form-consent label{ display:flex; align-items:flex-start; gap:11px; margin:0; cursor:pointer; } .wk-form-consent input[type="checkbox"]{ width:18px; height:18px; flex:0 0 18px; margin:2px 0 0; accent-color:var(--wk-blue); } .wk-form-consent span{ color:#405d72; font-size:14px; line-height:1.55; } .wk-form-actions{ margin-top:24px; } .wk-form-actions .wk-btn{ width:100%; border:0; font-family:var(--spc-font-ui); } .wk-form-status{ display:none; margin:0 0 18px; padding:18px 20px; border:1px solid var(--wk-line); border-radius:10px; background:#fff; } .wk-form-status:target{ display:block; } .wk-form-status strong{ display:block; margin-bottom:4px; color:var(--wk-navy); font-family:var(--spc-font-display); font-weight:800; } .wk-form-status p{ margin:0!important; font-size:14px!important; line-height:1.55!important; } .wk-form-status--success{ border-left:4px solid var(--wk-teal); } .wk-form-status--error{ border-left:4px solid #c75050; } #onepage-koszonjuk:target ~ .wk-form{ display:none; } @media(max-width:767px){ .wk-form-intro{ text-align:left; margin-bottom:28px; } .wk-form-contact-option, .wk-form-wrap{ width:calc(100% - 32px); } .wk-form-contact-option{ padding:18px; flex-direction:column; align-items:stretch; } .wk-form-contact-option .wk-btn{ width:100%; } .wk-form{ padding:26px 20px 28px; border-radius:12px; } .wk-field-grid{ grid-template-columns:1fr; gap:18px; } .wk-field-grid .wk-field + .wk-field{ margin-top:0; } .wk-form-section legend{ font-size:20px; } .wk-form-section{ padding-bottom:26px; } .wk-form-section + .wk-form-section{ padding-top:26px; } } /********************************************************** SPEEDPAGE FULL EXECUTION HERO SHOWCASE + REFERENCES **********************************************************/ /* ------------------------------------------------------- HERO SHOWCASE ------------------------------------------------------- */ .wk-speedpage-showcase{ position:relative; width:100%; overflow:hidden; border:1px solid var(--wk-line); border-radius:16px; background:#fff; box-shadow:0 18px 48px rgba(13,58,91,.10); } .wk-speedpage-showcase-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition: opacity .7s ease, visibility .7s ease; } .wk-speedpage-showcase-slide:first-child{ position:relative; } .wk-speedpage-showcase-slide.is-active{ opacity:1; visibility:visible; } .wk-speedpage-showcase-slide img{ display:block; width:100%; height:auto; margin:0; border:0; border-radius:0; } .wk-speedpage-showcase-caption{ position:absolute; left:18px; right:18px; bottom:18px; z-index:2; padding:10px 14px; border-radius:999px; background:rgba(8,43,70,.90); color:#fff; font-family:var(--spc-font-ui); font-size:13px; line-height:1.3; font-weight:700; text-align:center; backdrop-filter:blur(5px); } .wk-speedpage-showcase-dots{ position:absolute; left:0; right:0; bottom:64px; z-index:3; display:flex; justify-content:center; gap:7px; pointer-events:none; } .wk-speedpage-showcase-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 0 0 1px rgba(8,43,70,.18); transition: width .2s ease, background .2s ease; } .wk-speedpage-showcase-dots span.is-active{ width:18px; border-radius:99px; background:#fff; } /* ------------------------------------------------------- SPEEDPAGE REFERENCES CMS-SAFE CARD STRUCTURE ------------------------------------------------------- */ .wk-speedpage-full-page .wk-reference-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:24px!important; margin-top:36px!important; } .wk-speedpage-full-page .wk-reference-card{ display:flex!important; min-width:0!important; height:100%!important; flex-direction:column!important; overflow:hidden!important; border:1px solid rgba(18,69,105,.13)!important; border-radius:12px!important; background:#fff!important; box-shadow:0 10px 28px rgba(13,58,91,.055)!important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease!important; } .wk-speedpage-full-page .wk-reference-card:hover{ transform:translateY(-3px)!important; border-color:rgba(19,116,218,.24)!important; box-shadow:0 16px 38px rgba(13,58,91,.09)!important; } .wk-speedpage-full-page .wk-reference-image-link{ display:block!important; margin:0!important; padding:0!important; border:0!important; color:inherit!important; text-decoration:none!important; } .wk-speedpage-full-page .wk-reference-media{ position:relative!important; width:100%!important; aspect-ratio:16 / 10!important; overflow:hidden!important; margin:0!important; padding:0!important; background:#edf3f7!important; border-bottom:1px solid rgba(18,69,105,.10)!important; } .wk-speedpage-full-page .wk-reference-media img{ display:block!important; width:100%!important; height:100%!important; max-width:none!important; margin:0!important; padding:0!important; object-fit:cover!important; object-position:top center!important; border:0!important; border-radius:0!important; transition:transform .35s ease!important; } .wk-speedpage-full-page .wk-reference-card:hover .wk-reference-media img{ transform:scale(1.025)!important; } .wk-speedpage-full-page .wk-reference-body{ display:flex!important; flex:1 1 auto!important; flex-direction:column!important; min-width:0!important; padding:22px 22px 20px!important; } .wk-speedpage-full-page .wk-reference-tag{ display:block!important; margin:0 0 8px!important; padding:0!important; color:var(--wk-blue)!important; font-family:'DM Sans',Arial,sans-serif!important; font-size:11px!important; line-height:1.3!important; font-weight:800!important; letter-spacing:.075em!important; text-transform:uppercase!important; } .wk-speedpage-full-page .wk-reference-card h3{ margin:0 0 10px!important; padding:0!important; color:var(--wk-navy)!important; font-size:21px!important; line-height:1.22!important; } .wk-speedpage-full-page .wk-reference-card p{ margin:0 0 18px!important; padding:0!important; color:#5a7183!important; font-size:14px!important; line-height:1.65!important; } .wk-speedpage-full-page .wk-reference-link{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; width:100%!important; margin:auto 0 0!important; padding:14px 0 0!important; border-top:1px solid rgba(18,69,105,.10)!important; color:#1c5f96!important; font-family:'DM Sans',Arial,sans-serif!important; font-size:13px!important; line-height:1.35!important; font-weight:800!important; text-decoration:none!important; } .wk-speedpage-full-page .wk-reference-link > span:first-child{ min-width:0!important; overflow-wrap:anywhere!important; } .wk-speedpage-full-page .wk-reference-link > span:last-child{ flex:0 0 auto!important; font-size:16px!important; } .wk-speedpage-full-page .wk-reference-link:hover{ color:var(--wk-blue)!important; text-decoration:none!important; } .wk-speedpage-full-page .wk-reference-image-link:focus-visible, .wk-speedpage-full-page .wk-reference-link:focus-visible{ outline:3px solid rgba(19,116,218,.20)!important; outline-offset:3px!important; } .wk-speedpage-full-page .wk-reference-note{ width:min(880px,100%)!important; margin:36px auto 0!important; padding:24px 26px!important; border-left:3px solid var(--wk-turquoise)!important; background:#fff!important; } .wk-speedpage-full-page .wk-reference-note strong{ display:block!important; margin:0 0 6px!important; color:var(--wk-navy)!important; font-size:18px!important; line-height:1.35!important; font-weight:800!important; } .wk-speedpage-full-page .wk-reference-note p{ margin:0!important; color:#516a7c!important; } /* tablet */ @media(max-width:980px){ .wk-speedpage-full-page .wk-reference-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* mobile */ @media(max-width:699px){ .wk-speedpage-full-page .wk-reference-grid{ grid-template-columns:1fr!important; gap:18px!important; margin-top:28px!important; } .wk-speedpage-full-page .wk-reference-body{ padding:20px!important; } .wk-speedpage-full-page .wk-reference-card h3{ font-size:20px!important; } .wk-speedpage-full-page .wk-reference-note{ margin-top:28px!important; padding:20px!important; } } @media(prefers-reduced-motion:reduce){ .wk-speedpage-full-page .wk-reference-card, .wk-speedpage-full-page .wk-reference-media img{ transition:none!important; } .wk-speedpage-full-page .wk-reference-card:hover{ transform:none!important; } .wk-speedpage-full-page .wk-reference-card:hover .wk-reference-media img{ transform:none!important; } } /* ------------------------------------------------------- FORM SUCCESS STATE ------------------------------------------------------- */ #speedpage-koszonjuk:target ~ .wk-form{ display:none; } /* ------------------------------------------------------- RESPONSIVE ------------------------------------------------------- */ @media(max-width:980px){ .wk-reference-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:767px){ .wk-speedpage-showcase-caption{ left:12px; right:12px; bottom:12px; padding:8px 11px; font-size:12px; } .wk-speedpage-showcase-dots{ bottom:54px; } .wk-reference-grid{ grid-template-columns:1fr; gap:18px; } .wk-reference-body{ padding:21px 20px 20px; } .wk-reference-card h3{ font-size:20px!important; } .wk-reference-note{ margin-top:28px; padding:20px; } } @media(prefers-reduced-motion:reduce){ .wk-speedpage-showcase-slide, .wk-reference-card, .wk-reference-media img{ transition:none; } .wk-reference-card:hover{ transform:none; } .wk-reference-card:hover .wk-reference-media img{ transform:none; } } /********************************************************** WEBOLDAL + ARCULAT REFERENCE SHOWCASE **********************************************************/ .wk-brand-start-page .wk-brand-reference-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:36px; } .wk-brand-start-page .wk-brand-reference{ min-width:0; margin:0; } .wk-brand-start-page .wk-brand-reference-media{ display:flex; align-items:center; justify-content:center; width:100%; overflow:hidden; background:#fff; border:1px solid rgba(18,69,105,.12); } .wk-brand-start-page .wk-brand-reference-media--logo{ aspect-ratio:4 / 3; padding:34px; } .wk-brand-start-page .wk-brand-reference-media--site{ aspect-ratio:16 / 10; } .wk-brand-start-page .wk-brand-reference-media img{ display:block; width:100%; height:100%; margin:0!important; border:0!important; } .wk-brand-start-page .wk-brand-reference-media--logo img{ object-fit:contain; } .wk-brand-start-page .wk-brand-reference-media--site img{ object-fit:cover; object-position:top center; } .wk-brand-start-page .wk-brand-reference figcaption{ padding:12px 2px 0; color:#526b7d; font-family:'DM Sans',Arial,sans-serif; font-size:13px; line-height:1.45; font-weight:700; } #arculat-koszonjuk:target ~ .wk-form{ display:none; } @media(max-width:699px){ .wk-brand-start-page .wk-brand-reference-grid{ grid-template-columns:1fr; gap:24px; margin-top:28px; } .wk-brand-start-page .wk-brand-reference-media--logo{ padding:28px; } } /* ========================================================= WEBOLDAL + ARCULAT � REFERENCI�K ========================================================= */ .wk-brand-start-page .wk-brand-reference-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 26px; margin-top:34px; } .wk-brand-start-page .wk-brand-reference{ min-width:0; margin:0; } .wk-brand-start-page .wk-brand-reference-media{ width:100%; aspect-ratio:16 / 10; overflow:hidden; background:#eef3f6; } .wk-brand-start-page .wk-brand-reference-media img{ display:block; width:100%; height:100%; object-fit:cover; } .wk-brand-start-page .wk-brand-reference-image-link{ display:block; color:inherit; text-decoration:none !important; } .wk-brand-start-page .wk-brand-reference-caption{ display:block; margin:12px 0 0; padding:0; color:#31546c; font-family:'DM Sans',Arial,sans-serif; font-size:14px; line-height:1.5; font-weight:700; } .wk-brand-start-page .wk-brand-reference-caption a{ color:inherit; text-decoration:none; } .wk-brand-start-page .wk-brand-reference-caption a:hover{ color:var(--wk-blue); text-decoration:underline; } .wk-brand-start-page .wk-brand-reference-url{ display:inline-block; margin-top:6px; color:var(--wk-blue); font-family:'DM Sans',Arial,sans-serif; font-size:13px; line-height:1.4; font-weight:700; text-decoration:underline; text-underline-offset:3px; } .wk-brand-start-page .wk-brand-reference-image-link:hover img{ opacity:.94; } @media (max-width:700px){ .wk-brand-start-page .wk-brand-reference-grid{ grid-template-columns:1fr; gap:28px; } } /********************************************************** WEBKOMFORT � GENERIC SIMPLE PRICE LIST E-mail oldalon elfogadott soros �rlista �ltal�nos v�ltozata **********************************************************/ .wk-page .wk-simple-price-list{ width:min(900px,100%); margin:40px auto 0; border:1px solid var(--wk-line); background:#fff; } .wk-page .wk-simple-price-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,340px); align-items:center; min-height:76px; border-bottom:1px solid var(--wk-line); } .wk-page .wk-simple-price-row:last-child{ border-bottom:0; } .wk-page .wk-simple-price-name{ padding:18px 20px; color:var(--wk-navy); font-size:15px; line-height:1.45; } .wk-page .wk-simple-price-name strong{ font-weight:800; } .wk-page .wk-simple-price-value{ padding:16px 20px; border-left:1px solid var(--wk-line); text-align:right; } .wk-page .wk-simple-price-value strong{ display:block; color:var(--wk-navy); font-family:var(--spc-font-display); font-size:16px; line-height:1.35; font-weight:800; } .wk-page .wk-simple-price-value small{ display:block; margin-top:3px; color:var(--wk-muted); font-size:12px; line-height:1.35; } .wk-page .wk-simple-price-footer{ width:min(900px,100%); margin:18px auto 0; } .wk-page .wk-simple-price-footer p{ margin:0!important; color:var(--wk-muted)!important; font-size:13px!important; line-height:1.55!important; text-align:center; } .wk-page .wk-price-main-action{ width:min(900px,100%); margin:26px auto 0; justify-content:center; text-align:center; } /* A MASTER szerint mobilon a hero copy �s CTA el�zi meg a k�pet. A r�gebbi �ltal�nos wk CSS ezt ford�tva rendezi, ez�rt ezen az oldalon korrig�ljuk. */ @media(max-width:767px){ .wk-hosting-page .wk-hero-media{ order:0!important; } .wk-page .wk-simple-price-row{ grid-template-columns:minmax(0,1fr) minmax(135px,43%); min-height:68px; } .wk-page .wk-simple-price-name{ padding:14px 12px; font-size:13px; } .wk-page .wk-simple-price-value{ padding:13px 12px; } .wk-page .wk-simple-price-value strong{ font-size:14px; } .wk-page .wk-simple-price-value small{ font-size:10.5px; } .wk-page .wk-simple-price-footer{ margin-top:16px; } .wk-page .wk-price-main-action{ margin-top:22px; } } @media(max-width:380px){ .wk-page .wk-simple-price-row{ grid-template-columns:minmax(0,1fr) minmax(125px,46%); } .wk-page .wk-simple-price-name, .wk-page .wk-simple-price-value{ padding-left:9px; padding-right:9px; } } /* Webt�rhely � z�r� CTA m�sodlagos �t */ .wk-hosting-page .wk-hosting-cta-secondary{ margin-top:20px!important; color:var(--wk-muted)!important; font-size:14px!important; line-height:1.55!important; } .wk-hosting-page .wk-hosting-cta-secondary a{ font-weight:700; } @media(max-width:767px){ .wk-hosting-page .wk-hosting-cta-secondary{ margin-top:18px!important; } } /********************************************************** WEBKOMFORT WEBOLDALVALASZTO /igenyfelmero **********************************************************/ .wk-website-picker .wk-picker{ max-width:900px; margin:0 auto; } .wk-website-picker .wk-picker-progress{ position:relative; width:100%; height:4px; margin:0 0 36px; overflow:hidden; background:#dce7f0; } .wk-website-picker .wk-picker-progress-bar{ display:block; width:0; height:100%; background:var(--wk-blue); transition:width .3s ease; } .wk-website-picker .wk-picker-step, .wk-website-picker .wk-picker-result{ animation:wkPickerIn .25s ease; } .wk-website-picker .wk-picker-step h2, .wk-website-picker .wk-picker-result h2{ max-width:760px; margin-bottom:14px; } .wk-website-picker .wk-picker-intro, .wk-website-picker .wk-picker-result-lead{ max-width:720px; margin-bottom:28px; color:var(--wk-text-muted); font-size:18px; line-height:1.65; } .wk-website-picker .wk-picker-options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .wk-website-picker .wk-picker-option{ display:flex; flex-direction:column; align-items:flex-start; width:100%; min-height:128px; padding:22px 24px; border:1px solid #cfdce7; border-radius:12px; background:#fff; color:var(--wk-text); text-align:left; cursor:pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .wk-website-picker .wk-picker-option:hover{ border-color:var(--wk-blue); box-shadow:0 10px 28px rgba(32,71,99,.08); transform:translateY(-2px); } .wk-website-picker .wk-picker-option:focus-visible{ outline:3px solid rgba(22,119,234,.2); outline-offset:2px; } .wk-website-picker .wk-picker-option strong{ display:block; margin-bottom:8px; font-family:var(--spc-font-heading); font-size:17px; font-weight:700; line-height:1.35; } .wk-website-picker .wk-picker-option span{ display:block; color:var(--wk-text-muted); font-size:15px; line-height:1.55; } .wk-website-picker .wk-picker-nav{ margin-top:26px; } .wk-website-picker .wk-picker-back{ padding:8px 0; background:transparent; color:var(--wk-blue); font-weight:700; cursor:pointer; } .wk-website-picker .wk-picker-back:hover{ text-decoration:underline; } .wk-website-picker .wk-picker-result{ max-width:820px; } .wk-website-picker .wk-picker-result-reason{ max-width:740px; margin:0 0 28px; } .wk-website-picker .wk-picker-result-reason p{ margin:0; line-height:1.75; } @keyframes wkPickerIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } } @media(max-width:699px){ .wk-website-picker .wk-picker-progress{ margin-bottom:26px; } .wk-website-picker .wk-picker-options{ grid-template-columns:1fr; gap:10px; } .wk-website-picker .wk-picker-option{ min-height:0; padding:18px; border-radius:10px; } .wk-website-picker .wk-picker-intro, .wk-website-picker .wk-picker-result-lead{ margin-bottom:22px; font-size:16px; } } /* T�rhelyv�laszt�si seg�ts�g � sikeres k�ld�s ut�n az �rlap elrejt�se */ .wk-hosting-page #tarhely-koszonjuk:target ~ .wk-form{ display:none; } /********************************************************** T�RHELYV�LASZT�SI �RLAP � FINOMHANGOL�S **********************************************************/ .wk-hosting-page #tarhely-segitseg .wk-form{ padding:38px 40px 40px; } /* sz�mozott form-szekci�k */ .wk-hosting-page #tarhely-segitseg .wk-form-number{ display:inline-flex!important; padding:0!important; } /* nagyobb leveg� a mez�k k�z�tt */ .wk-hosting-page #tarhely-segitseg .wk-field + .wk-field{ margin-top:24px; } .wk-hosting-page #tarhely-segitseg .wk-field-grid .wk-field + .wk-field{ margin-top:0; } /* seg�dsz�veg val�ban m�sodlagos legyen */ .wk-hosting-page #tarhely-segitseg .wk-field-help{ margin:0 0 10px!important; padding:0!important; color:#687f90!important; font-size:13px!important; line-height:1.55!important; } /* adatkezel�si r�sz � legacy span szab�ly fel�l�r�sa */ .wk-hosting-page #tarhely-segitseg .wk-form-consent{ padding-top:26px; } .wk-hosting-page #tarhely-segitseg .wk-form-consent label{ display:flex; align-items:flex-start; gap:12px; } .wk-hosting-page #tarhely-segitseg .wk-form-consent input[type="checkbox"]{ width:19px; height:19px; flex:0 0 19px; margin:2px 0 0; } .wk-hosting-page #tarhely-segitseg .wk-form-consent span{ display:block!important; flex:1 1 auto; min-width:0; margin:0!important; padding:0!important; color:#405d72!important; font-size:14px!important; line-height:1.65!important; } .wk-hosting-page #tarhely-segitseg .wk-form-consent a{ display:inline!important; font-weight:700; } /* desktopon ne legyen indokolatlanul teljes sz�less�g� a CTA */ .wk-hosting-page #tarhely-segitseg .wk-form-actions{ display:flex; justify-content:flex-start; margin-top:28px; } .wk-hosting-page #tarhely-segitseg .wk-form-actions .wk-btn{ width:auto; min-width:300px; } /* mobil */ @media(max-width:767px){ .wk-hosting-page #tarhely-segitseg .wk-form{ padding:26px 20px 28px; } .wk-hosting-page #tarhely-segitseg .wk-field + .wk-field{ margin-top:20px; } .wk-hosting-page #tarhely-segitseg .wk-field-grid .wk-field + .wk-field{ margin-top:0; } .wk-hosting-page #tarhely-segitseg .wk-form-actions{ display:block; } .wk-hosting-page #tarhely-segitseg .wk-form-actions .wk-btn{ width:100%; min-width:0; } } /********************************************************** WK FORM � LEGACY .leiras span �TK�Z�S JAV�T�SA **********************************************************/ .leiras .wk-form-consent label{ display:flex; align-items:flex-start; gap:12px; margin:0; } .leiras .wk-form-consent input[type="checkbox"]{ width:19px; height:19px; flex:0 0 19px; margin:2px 0 0; } .leiras .wk-form-consent label > span{ display:block!important; flex:1 1 auto; min-width:0; margin:0!important; padding:0!important; color:#405d72; font-size:14px; line-height:1.6; } .leiras .wk-form-consent label > span a{ display:inline!important; padding:0!important; margin:0!important; } /********************************************************** WK FORM CONSENT - CMS SAFE FINAL OVERRIDE Works even if TinyMCE removes the inner span wrapper. **********************************************************/ #aloldal .leiras .wk-form-consent label, .leiras .wk-form-consent label, .wk-form-consent label{ display:block!important; position:relative!important; margin:0!important; padding:0 0 0 32px!important; color:#405d72!important; font-size:15px!important; line-height:1.6!important; font-weight:400!important; cursor:pointer!important; white-space:normal!important; } #aloldal .leiras .wk-form-consent input[type="checkbox"], .leiras .wk-form-consent input[type="checkbox"], .wk-form-consent input[type="checkbox"]{ position:absolute!important; left:0!important; top:2px!important; width:19px!important; height:19px!important; margin:0!important; padding:0!important; accent-color:var(--wk-blue)!important; } #aloldal .leiras .wk-form-consent label > span, .leiras .wk-form-consent label > span, .wk-form-consent label > span{ display:inline!important; margin:0!important; padding:0!important; color:inherit!important; font:inherit!important; line-height:inherit!important; white-space:normal!important; } #aloldal .leiras .wk-form-consent label a, .leiras .wk-form-consent label a, .wk-form-consent label a{ display:inline!important; margin:0!important; padding:0!important; white-space:normal!important; font-weight:700!important; } @media(max-width:767px){ #aloldal .leiras .wk-form-consent label, .leiras .wk-form-consent label, .wk-form-consent label{ padding-left:34px!important; font-size:16px!important; line-height:1.55!important; } } /********************************************************** /IGENYFELMERO � TYPOGRAPHY / RHYTHM FIX Standalone include page, outside normal CMS #aloldal context **********************************************************/ .wk-website-picker{ font-family:'DM Sans',Arial,sans-serif!important; color:var(--wk-text)!important; font-size:16px!important; line-height:1.65!important; } /* ---------- F� sz�vegek ---------- */ .wk-website-picker p, .wk-website-picker li{ font-family:'DM Sans',Arial,sans-serif!important; font-size:16px!important; line-height:1.68!important; letter-spacing:0!important; color:#425e73!important; } .wk-website-picker .wk-reading > p:not(.wk-kicker):not(.wk-lead){ max-width:780px; } /* ---------- C�msorok ---------- */ .wk-website-picker h2{ font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif!important; font-size:clamp(30px,3.2vw,44px)!important; line-height:1.17!important; font-weight:800!important; letter-spacing:-.03em!important; color:var(--wk-navy)!important; } .wk-website-picker .wk-hero h2{ max-width:820px; margin:0 0 22px!important; font-size:clamp(36px,4vw,54px)!important; line-height:1.13!important; letter-spacing:-.035em!important; } .wk-website-picker .wk-picker-step h2, .wk-website-picker .wk-picker-result h2{ max-width:780px; margin:0 0 14px!important; font-size:clamp(29px,3vw,40px)!important; line-height:1.18!important; } /* ---------- Hero ---------- */ .wk-website-picker .wk-hero .wk-reading{ width:min(880px,100%); } .wk-website-picker .wk-hero .wk-lead{ max-width:780px; margin:0!important; font-size:20px!important; line-height:1.62!important; color:#425e73!important; } .wk-website-picker .wk-hero .wk-actions{ margin-top:28px!important; } /* ---------- Kicker ---------- */ .wk-website-picker .wk-kicker{ display:inline-flex!important; width:auto!important; margin:0 0 18px!important; padding:7px 11px!important; border:0!important; border-left:3px solid var(--wk-turquoise)!important; background:var(--wk-turquoise-soft)!important; color:#0c6f72!important; font-family:'DM Sans',Arial,sans-serif!important; font-size:12px!important; line-height:1.2!important; font-weight:800!important; letter-spacing:.08em!important; text-transform:uppercase!important; } /* ---------- V�laszt� ---------- */ .wk-website-picker .wk-picker{ width:min(900px,100%); margin:0 auto; } .wk-website-picker .wk-picker-intro, .wk-website-picker .wk-picker-result-lead{ max-width:740px; margin:0 0 30px!important; font-family:'DM Sans',Arial,sans-serif!important; font-size:18px!important; line-height:1.65!important; color:#506b7e!important; } .wk-website-picker .wk-picker-options{ margin-top:0!important; } /* ---------- V�laszk�rty�k ---------- */ .wk-website-picker .wk-picker-option{ min-height:138px; padding:24px 26px!important; font-family:'DM Sans',Arial,sans-serif!important; line-height:1.5!important; } .wk-website-picker .wk-picker-option strong{ margin:0 0 9px!important; font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif!important; font-size:18px!important; line-height:1.32!important; font-weight:750!important; letter-spacing:-.02em!important; color:var(--wk-navy)!important; } .wk-website-picker .wk-picker-option span{ font-family:'DM Sans',Arial,sans-serif!important; font-size:15.5px!important; line-height:1.58!important; font-weight:400!important; letter-spacing:0!important; color:#587184!important; } /* ---------- Eredm�ny ---------- */ .wk-website-picker .wk-picker-result-reason{ max-width:760px; margin:0 0 30px!important; } .wk-website-picker .wk-picker-result-reason p{ font-size:16px!important; line-height:1.7!important; } /* ---------- Als� magyar�z� blokk ---------- */ .wk-website-picker .wk-section:last-child .wk-reading{ width:min(820px,100%); } .wk-website-picker .wk-section:last-child .wk-reading p{ max-width:800px; } /* ---------- Mobil ---------- */ @media(max-width:767px){ .wk-website-picker{ font-size:16px!important; } .wk-website-picker .wk-hero{ padding:48px 0!important; } .wk-website-picker .wk-section{ padding:54px 0!important; } .wk-website-picker h2{ font-size:30px!important; line-height:1.14!important; } .wk-website-picker .wk-hero h2{ font-size:34px!important; line-height:1.09!important; } .wk-website-picker .wk-picker-step h2, .wk-website-picker .wk-picker-result h2{ font-size:29px!important; line-height:1.15!important; } .wk-website-picker .wk-hero .wk-lead{ font-size:18px!important; line-height:1.6!important; } .wk-website-picker .wk-picker-intro, .wk-website-picker .wk-picker-result-lead{ font-size:16px!important; line-height:1.62!important; margin-bottom:24px!important; } .wk-website-picker p, .wk-website-picker li{ font-size:16px!important; line-height:1.64!important; } .wk-website-picker .wk-picker-option{ min-height:0; padding:19px 20px!important; } .wk-website-picker .wk-picker-option strong{ font-size:17px!important; line-height:1.34!important; } .wk-website-picker .wk-picker-option span{ font-size:15px!important; line-height:1.55!important; } } .wk-website-picker .wk-hero h1{ max-width:820px; margin:0 0 22px!important; font-family:'Plus Jakarta Sans','DM Sans',Arial,sans-serif!important; font-size:clamp(36px,4vw,54px)!important; line-height:1.13!important; font-weight:800!important; letter-spacing:-.035em!important; color:var(--wk-navy)!important; } #weboldal-erdeklodes-koszonjuk:target ~ .wk-form{ display:none; } /********************************************************** WEBKOMFORT � VPS NORMAL SUBPAGE Canonical hero photo + mobile order **********************************************************/ .wk-vps-page .wk-hero-grid{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); } .wk-vps-page .wk-hero-media{ display:flex; justify-content:flex-end; } .wk-vps-page .wk-hero-media img{ width:100%!important; max-width:560px!important; aspect-ratio:10 / 7!important; object-fit:cover!important; margin:0!important; border-radius:14px!important; box-shadow:0 18px 44px rgba(13,58,91,.10)!important; } @media(max-width:767px){ .wk-vps-page .wk-hero-grid{ grid-template-columns:1fr; } .wk-vps-page .wk-hero-media{ order:0!important; display:block; } .wk-vps-page .wk-hero-media img{ max-width:none!important; } } /********************************************************** WEBKOMFORT � VPS CSOMAGOK �S EGYEDI VPS KALKUL�TOR **********************************************************/ .wk-vps-price-page{ --wk-vps-accent:#48bfe8; } .wk-vps-price-page .wk-kicker{ border-left-color:var(--wk-vps-accent)!important; } .wk-vps-price-page .wk-hero-media img{ aspect-ratio:10 / 7; object-fit:cover; border-radius:12px!important; } /* ======================================================== VPS CSOMAGOK ======================================================== */ .wk-vps-package-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:clamp(34px,5vw,52px); } .wk-vps-package{ display:flex; flex-direction:column; min-width:0; padding:28px 24px 24px; border:1px solid var(--wk-line); border-top:3px solid var(--wk-vps-accent); background:#fff; } .wk-vps-package-head{ padding-bottom:22px; border-bottom:1px solid var(--wk-line); } .wk-vps-package-name{ margin:0 0 15px!important; color:var(--wk-navy)!important; font-family:var(--spc-font-display); font-size:24px!important; line-height:1.15!important; font-weight:800!important; } .wk-vps-package-price{ margin:0!important; } .wk-vps-package-price strong{ display:block; color:var(--wk-navy); font-family:var(--spc-font-display); font-size:clamp(20px,1.65vw,26px); line-height:1.2; font-weight:800; letter-spacing:-.025em; } .wk-vps-package-price small{ display:block; margin-top:5px; color:var(--wk-muted); font-size:12px; line-height:1.4; } .wk-vps-specs{ margin:0; padding:10px 0 0; } .wk-vps-specs > div{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--wk-line); } .wk-vps-specs > div:last-child{ border-bottom:0; } .wk-vps-specs dt{ color:var(--wk-muted); font-size:13px; line-height:1.4; font-weight:500; } .wk-vps-specs dd{ margin:0; color:var(--wk-navy); font-size:13px; line-height:1.4; font-weight:700; text-align:right; } .wk-vps-specs dd strong{ font-weight:800; } .wk-vps-package .wk-actions{ margin-top:auto; padding-top:24px; } .wk-vps-package .wk-btn{ width:100%; padding-left:14px; padding-right:14px; } /* ======================================================== VPS KONFIGUR�TOR ======================================================== */ .wk-vps-price-page #rendeles.wk-vps-configurator{ width:min(1040px,100%)!important; margin:clamp(34px,5vw,52px) auto 0!important; padding:0!important; border:1px solid var(--wk-line)!important; border-bottom:1px solid var(--wk-line)!important; background:#fff!important; } .wk-vps-price-page #rendeles.wk-vps-configurator .fejlec{ margin:0!important; padding:0!important; } .wk-vps-price-page #rendeles.wk-vps-configurator .toggle.kalkulator{ display:block!important; margin:0!important; padding:0!important; } .wk-vps-config-head{ display:flex; justify-content:space-between; gap:32px; align-items:center; padding:28px 30px; border-bottom:1px solid var(--wk-line); } .wk-vps-config-head h3{ margin:4px 0 0!important; color:var(--wk-navy)!important; font-size:clamp(24px,2.4vw,32px)!important; line-height:1.15!important; } .wk-vps-config-overline{ margin:0!important; color:var(--wk-muted)!important; font-size:11px!important; line-height:1.4!important; font-weight:800!important; letter-spacing:.08em!important; text-transform:uppercase!important; } .wk-vps-live-price{ flex:0 0 auto; min-width:260px; padding:16px 18px; background:var(--wk-soft); text-align:right; } .wk-vps-live-price-label{ display:block; margin-bottom:5px; color:var(--wk-muted); font-size:11px; line-height:1.4; font-weight:700; } .wk-vps-price-page #rendeles .fejlec .kalkulator .wk-vps-live-price .vpsar{ display:block; padding:0!important; color:var(--wk-navy)!important; font-family:var(--spc-font-display); font-size:22px!important; line-height:1.2!important; font-weight:800!important; } .wk-vps-price-page #rendeles .fejlec .kalkulator .wk-vps-live-price .vpsar font{ display:block; margin-top:4px; color:var(--wk-muted)!important; font-family:var(--spc-font-ui); font-size:11px!important; line-height:1.4!important; font-weight:500!important; } /* CPU platform */ .wk-vps-config-group{ padding:26px 30px; border-bottom:1px solid var(--wk-line); } .wk-vps-config-label{ display:block; margin-bottom:14px; color:var(--wk-navy); font-size:14px; line-height:1.4; font-weight:800; } .wk-vps-cpu-options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .wk-vps-cpu-option{ display:flex; align-items:center; gap:10px; min-height:48px; padding:11px 14px; border:1px solid var(--wk-line); background:#fff; cursor:pointer; } .wk-vps-cpu-option:hover{ border-color:#a8c9dc; } .wk-vps-cpu-option input{ width:18px; height:18px; margin:0; accent-color:var(--wk-blue); cursor:pointer; } .wk-vps-cpu-option span{ color:var(--wk-navy); font-size:14px; line-height:1.4; font-weight:700; } /* Slider sorok */ .wk-vps-slider-row{ display:grid; grid-template-columns:190px minmax(0,1fr); gap:28px; align-items:start; padding:28px 30px 36px; border-bottom:1px solid var(--wk-line); } .wk-vps-slider-value{ min-width:0; } .wk-vps-slider-value > span{ display:block; margin-bottom:5px; color:var(--wk-muted)!important; font-size:12px!important; line-height:1.4!important; font-weight:600!important; } .wk-vps-slider-value strong{ display:block; color:var(--wk-navy); font-family:var(--spc-font-display); font-size:20px; line-height:1.3; font-weight:800; } .wk-vps-price-page #rendeles .fejlec .kalkulator .wk-vps-slider-value strong span{ padding:0!important; color:inherit!important; font:inherit!important; } .wk-vps-slider-track{ min-width:0; padding:11px 12px 42px; } /* noUiSlider � csak ezen az oldalon */ .wk-vps-price-page .noUi-target{ height:7px; border:0; border-radius:20px; background:#d9e5ed; box-shadow:none; } .wk-vps-price-page .noUi-connect{ background:var(--wk-vps-accent); } .wk-vps-price-page .noUi-horizontal .noUi-handle{ width:22px; height:22px; right:-11px; top:-8px; border:3px solid #fff; border-radius:50%; background:var(--wk-blue); box-shadow:0 1px 6px rgba(12,49,76,.22); cursor:pointer; } .wk-vps-price-page .noUi-handle::before, .wk-vps-price-page .noUi-handle::after{ display:none; } .wk-vps-price-page .noUi-pips-horizontal{ height:36px; padding-top:11px; } .wk-vps-price-page .noUi-marker-horizontal.noUi-marker{ background:#b9cbd8; } .wk-vps-price-page .noUi-value{ color:var(--wk-muted); font-size:10px; white-space:nowrap; } /* Als� konfigur�tor r�sz */ .wk-vps-config-footer{ display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:28px; align-items:end; padding:28px 30px; } .wk-vps-os label{ display:block; margin-bottom:8px; color:var(--wk-navy); font-size:13px; line-height:1.4; font-weight:800; } .wk-vps-os select{ display:block; width:100%; min-height:48px; padding:0 42px 0 14px; border:1px solid #b9ccda; border-radius:6px; background:#fff; color:var(--wk-navy); font-family:var(--spc-font-ui); font-size:14px; } /* ======================================================== RESPONSIVE ======================================================== */ @media(max-width:1100px){ .wk-vps-package-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:767px){ .wk-vps-price-page .wk-hero-media{ order:0!important; } .wk-vps-package-grid{ grid-template-columns:1fr; gap:14px; } .wk-vps-package{ padding:24px 20px 20px; } .wk-vps-config-head{ display:block; padding:24px 20px; } .wk-vps-live-price{ min-width:0; margin-top:20px; text-align:left; } .wk-vps-config-group{ padding:22px 20px; } .wk-vps-cpu-options{ grid-template-columns:1fr; } .wk-vps-slider-row{ grid-template-columns:1fr; gap:20px; padding:24px 20px 34px; } .wk-vps-slider-track{ padding-left:10px; padding-right:10px; } .wk-vps-config-footer{ grid-template-columns:1fr; gap:20px; padding:24px 20px; } .wk-vps-config-footer .wk-btn{ width:100%; } } @media(max-width:420px){ .wk-vps-price-page .noUi-value{ font-size:8.5px; } .wk-vps-slider-track{ padding-left:6px; padding-right:6px; } } /********************************************************** WEBKOMFORT TUDÁSTÁR V2 Central knowledge hub + non-navigating service menu triggers **********************************************************/ /* Desktop service labels open the mega menu but do not navigate away. */ @media (min-width:768px){ #sidebartop .spc-nav-v12 .spc-nav-item>.spc-nav-trigger{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; height:var(--spc-primary-h)!important; margin:0!important; padding:0 16px!important; border:0!important; border-radius:0!important; background:transparent!important; color:#f7fbff!important; font-family:var(--spc-font-display)!important; font-size:15px!important; line-height:1!important; font-weight:700!important; letter-spacing:-.02em!important; white-space:nowrap!important; text-decoration:none!important; cursor:pointer!important; appearance:none!important; -webkit-appearance:none!important; } #sidebartop .spc-nav-v12 .spc-nav-item>.spc-nav-trigger:hover, #sidebartop .spc-nav-v12 .spc-nav-item>.spc-nav-trigger:focus, #sidebartop .spc-nav-v12 .spc-nav-item:focus-within>.spc-nav-trigger{ outline:0!important; color:#62d2f6!important; background:rgba(255,255,255,.045)!important; } #sidebartop .spc-nav-v12 .spc-nav-item.is-active>.spc-nav-trigger{ color:#59d4d6!important; background:rgba(89,212,214,.055)!important; } #sidebartop .spc-nav-v12 .spc-nav-item.is-active>.spc-nav-trigger:after{ content:""; position:absolute; left:17px; right:17px; bottom:0; height:3px; background:#59d4d6!important; } @media (max-width:1180px){ #sidebartop .spc-nav-v12 .spc-nav-item>.spc-nav-trigger{padding:0 11px!important;font-size:13px!important;} } @media (max-width:900px){ #sidebartop .spc-nav-v12 .spc-nav-item>.spc-nav-trigger{padding:0 8px!important;font-size:12.5px!important;} } } /* Mobile: the Tudástár group also has a direct entry to the hub. */ .spc-mobile-knowledge-home{ display:block!important; margin:0 0 18px!important; padding:16px 18px!important; border:1px solid rgba(255,255,255,.18)!important; border-radius:12px!important; background:rgba(255,255,255,.07)!important; color:#fff!important; } .spc-mobile-knowledge-home strong{display:block!important;margin:0 0 4px!important;color:#fff!important;} .spc-mobile-knowledge-home small{display:block!important;color:rgba(255,255,255,.78)!important;line-height:1.45!important;} /* ---------- Tudástár hero ---------- */ .wk-knowledge-page{background:#fff!important;} .wk-knowledge-hero{ padding:78px 0 72px; background:linear-gradient(180deg,#f2f8fc 0%,#fff 100%); border-bottom:1px solid #e3edf4; } .wk-knowledge-hero-inner{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:72px; align-items:center; } .wk-knowledge-hero-copy{max-width:760px;} .wk-knowledge-page .wk-knowledge-hero h1{ margin:14px 0 20px!important; color:var(--wk-navy)!important; font-family:var(--spc-font-display)!important; font-size:clamp(38px,5vw,64px)!important; line-height:1.04!important; letter-spacing:-.045em!important; font-weight:800!important; } .wk-knowledge-page .wk-knowledge-hero .wk-lead{ max-width:720px; margin:0!important; color:#496579!important; font-size:clamp(18px,2vw,21px)!important; line-height:1.62!important; } .wk-knowledge-back{ display:inline-flex; margin-top:24px; color:var(--wk-blue)!important; font-weight:750!important; text-decoration:none!important; } .wk-knowledge-back:hover{text-decoration:underline!important;} .wk-knowledge-search-panel{ position:relative; padding:28px; border:1px solid #d8e6ef; border-radius:18px; background:#fff; box-shadow:0 18px 48px rgba(13,45,71,.08); } .wk-knowledge-search-panel:before{ content:""; position:absolute; left:18px; right:18px; top:0; height:4px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,var(--wk-blue),var(--wk-teal)); } .wk-knowledge-search-panel label{ display:block; margin:0 0 12px; color:var(--wk-navy)!important; font-family:var(--spc-font-display)!important; font-size:20px!important; font-weight:800!important; } .wk-knowledge-search-panel>p{ margin:10px 0 0!important; color:#718696!important; font-size:13px!important; line-height:1.45!important; } .wk-knowledge-search-box{position:relative;} .wk-knowledge-search-box>i{ position:absolute; left:17px; top:50%; transform:translateY(-50%); color:#6e879a; font-size:20px; pointer-events:none; } .wk-knowledge-search-box input{ width:100%; height:58px; padding:0 52px 0 50px!important; border:1px solid #bfd1df!important; border-radius:10px!important; background:#f9fbfd!important; color:var(--wk-text)!important; font-size:16px!important; line-height:58px!important; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; } .wk-knowledge-search-box input:focus{ border-color:var(--wk-blue)!important; background:#fff!important; box-shadow:0 0 0 4px rgba(22,119,234,.10)!important; outline:0!important; } .wk-knowledge-search-box button{ position:absolute; right:8px; top:8px; width:42px; height:42px; border:0; border-radius:8px; background:transparent; color:#718696; font-size:26px; line-height:42px; cursor:pointer; opacity:0; pointer-events:none; } .wk-knowledge-search-box button.is-visible{opacity:1;pointer-events:auto;} .wk-knowledge-search-box button:hover{background:#eef4f8;color:var(--wk-navy);} /* ---------- Topic navigation ---------- */ .wk-knowledge-section-head{max-width:880px;margin:0 0 38px;} .wk-knowledge-page .wk-knowledge-section-head h2, .wk-knowledge-page .wk-knowledge-library-head h2{ margin:10px 0 12px!important; color:var(--wk-navy)!important; } .wk-knowledge-section-head>p:last-child{max-width:760px;margin:0!important;color:#587185!important;line-height:1.65!important;} .wk-knowledge-topic-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .wk-knowledge-topic{ position:relative; display:grid; grid-template-columns:46px minmax(0,1fr) 22px; gap:14px; align-items:start; min-height:150px; padding:24px 22px; border:1px solid #dbe7ef; border-radius:14px; background:#fff; color:var(--wk-text)!important; text-decoration:none!important; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; } .wk-knowledge-topic:hover, .wk-knowledge-topic:focus{ transform:translateY(-2px); border-color:rgba(22,119,234,.34); box-shadow:0 14px 34px rgba(13,45,71,.08); outline:0; } .wk-knowledge-topic.is-active{border-color:rgba(22,119,234,.45);background:#f6fbff;} .wk-knowledge-topic-icon{ display:flex; width:46px; height:46px; align-items:center; justify-content:center; border-radius:12px; background:#eef6fb; color:var(--wk-blue); font-size:21px; } .wk-knowledge-topic-copy strong{ display:block; margin:1px 0 7px; color:var(--wk-navy)!important; font-family:var(--spc-font-display)!important; font-size:17px!important; line-height:1.35!important; font-weight:800!important; } .wk-knowledge-topic-copy small{display:block;color:#61798b!important;font-size:14px!important;line-height:1.5!important;} .wk-knowledge-topic-arrow{padding-top:12px;color:#8aa2b4;font-size:20px;transition:transform .16s ease,color .16s ease;} .wk-knowledge-topic:hover .wk-knowledge-topic-arrow{transform:translateX(3px);color:var(--wk-blue);} /* ---------- Article library ---------- */ .wk-knowledge-library-head{ display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:28px; } .wk-knowledge-library-head>div{max-width:780px;} .wk-knowledge-result-count{ flex:0 0 auto; margin:0 0 10px!important; color:#698093!important; font-size:14px!important; } .wk-knowledge-result-count strong{color:var(--wk-navy)!important;font-size:17px!important;} .wk-knowledge-filters{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 34px; } .wk-knowledge-filter{ min-height:42px; padding:9px 15px; border:1px solid #cbdbe6; border-radius:999px; background:#fff; color:#4a6578; font-family:var(--spc-font-display)!important; font-size:13px; font-weight:700; cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease; } .wk-knowledge-filter:hover{border-color:#9db8cb;color:var(--wk-navy);} .wk-knowledge-filter.is-active{border-color:var(--wk-blue);background:var(--wk-blue);color:#fff;} .wk-knowledge-article-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } .wk-knowledge-article{min-width:0;} .wk-knowledge-article-link{ display:flex; height:100%; flex-direction:column; overflow:hidden; border:1px solid #dce7ee; border-radius:15px; background:#fff; color:var(--wk-text)!important; text-decoration:none!important; box-shadow:0 6px 18px rgba(13,45,71,.035); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; } .wk-knowledge-article-link:hover, .wk-knowledge-article-link:focus{ transform:translateY(-3px); border-color:rgba(22,119,234,.30); box-shadow:0 16px 34px rgba(13,45,71,.09); outline:0; } .wk-knowledge-article-media{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,#edf6fb,#f7fbfd); } .wk-knowledge-article-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .24s ease;} .wk-knowledge-article-link:hover .wk-knowledge-article-media img{transform:scale(1.025);} .wk-knowledge-article-fallback{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; color:#8dafc4; font-size:42px; } .wk-knowledge-article-media.is-missing .wk-knowledge-article-fallback{display:flex;} .wk-knowledge-article-body{display:flex;flex:1;flex-direction:column;padding:22px;} .wk-knowledge-article-category{ display:block; margin:0 0 9px; color:var(--wk-blue)!important; font-family:var(--spc-font-display)!important; font-size:11px!important; line-height:1.35!important; font-weight:800!important; letter-spacing:.07em; text-transform:uppercase; } .wk-knowledge-article-title{ display:block; margin:0 0 11px; color:var(--wk-navy)!important; font-family:var(--spc-font-display)!important; font-size:20px!important; line-height:1.34!important; font-weight:800!important; letter-spacing:-.02em; } .wk-knowledge-article-desc{ display:-webkit-box; overflow:hidden; margin:0 0 20px; color:#597184!important; font-size:15px!important; line-height:1.58!important; -webkit-line-clamp:3; -webkit-box-orient:vertical; } .wk-knowledge-article-more{ display:block; margin-top:auto; color:var(--wk-blue)!important; font-family:var(--spc-font-display)!important; font-size:14px!important; font-weight:800!important; } .wk-knowledge-article-more span{display:inline-block;transition:transform .16s ease;} .wk-knowledge-article-link:hover .wk-knowledge-article-more span{transform:translateX(3px);} .wk-knowledge-empty{ max-width:700px; margin:38px auto 0; padding:38px 26px; text-align:center; border:1px solid #d9e5ed; border-radius:14px; background:#fff; } .wk-knowledge-empty[hidden]{display:none!important;} .wk-knowledge-empty>i{display:block;margin-bottom:14px;color:#89a7ba;font-size:34px;} .wk-knowledge-page .wk-knowledge-empty h3{margin:0 0 9px!important;color:var(--wk-navy)!important;} .wk-knowledge-empty p{max-width:560px;margin:0 auto 20px!important;color:#637a8b!important;line-height:1.6!important;} .wk-knowledge-empty.is-static{margin-top:0;} /* ---------- Help CTA ---------- */ .wk-knowledge-help-section{padding-top:72px!important;padding-bottom:88px!important;} .wk-knowledge-help{ display:grid!important; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:center; padding:34px 38px!important; } .wk-knowledge-help h2{margin:8px 0 10px!important;} .wk-knowledge-help p:last-child{max-width:740px;margin:0!important;color:#567083!important;line-height:1.6!important;} .wk-knowledge-help .wk-actions{margin:0!important;} @media (max-width:1080px){ .wk-knowledge-hero-inner{grid-template-columns:1fr;gap:34px;} .wk-knowledge-search-panel{max-width:760px;} .wk-knowledge-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .wk-knowledge-article-grid{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:699px){ .wk-knowledge-hero{padding:52px 0 46px;} .wk-knowledge-hero-inner{gap:28px;} .wk-knowledge-page .wk-knowledge-hero h1{font-size:38px!important;line-height:1.08!important;} .wk-knowledge-page .wk-knowledge-hero .wk-lead{font-size:17px!important;line-height:1.58!important;} .wk-knowledge-search-panel{padding:23px 18px 20px;border-radius:15px;} .wk-knowledge-search-panel label{font-size:18px!important;} .wk-knowledge-search-box input{height:56px;padding-left:45px!important;padding-right:46px!important;font-size:16px!important;line-height:normal!important;} .wk-knowledge-search-box>i{left:15px;} .wk-knowledge-topic-grid{grid-template-columns:1fr;gap:12px;} .wk-knowledge-topic{min-height:0;padding:19px 17px;grid-template-columns:42px minmax(0,1fr) 18px;gap:12px;border-radius:12px;} .wk-knowledge-topic-icon{width:42px;height:42px;border-radius:10px;} .wk-knowledge-section-head{margin-bottom:28px;} .wk-knowledge-library-head{display:block;margin-bottom:20px;} .wk-knowledge-result-count{margin-top:12px!important;} .wk-knowledge-filters{gap:7px;margin-bottom:28px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;} .wk-knowledge-filter{flex:0 0 auto;min-height:44px;} .wk-knowledge-article-grid{grid-template-columns:1fr;gap:16px;} .wk-knowledge-article-body{padding:20px 18px;} .wk-knowledge-article-title{font-size:19px!important;} .wk-knowledge-help-section{padding-top:52px!important;padding-bottom:62px!important;} .wk-knowledge-help{grid-template-columns:1fr;gap:22px;padding:26px 20px!important;} .wk-knowledge-help .wk-actions,.wk-knowledge-help .wk-btn{width:100%;} } @media (prefers-reduced-motion:reduce){ .wk-knowledge-topic, .wk-knowledge-topic-arrow, .wk-knowledge-article-link, .wk-knowledge-article-media img, .wk-knowledge-article-more span{transition:none!important;} .wk-knowledge-topic:hover, .wk-knowledge-article-link:hover{transform:none!important;} } /* Tudastar category pages: relevant articles come before the topic directory. */ .wk-knowledge-topics-section--after-results{padding-top:72px!important;border-top:1px solid #e5edf3;} .wk-knowledge-topics-section--after-results .wk-knowledge-topic.is-active{opacity:.72;} @media (max-width:699px){.wk-knowledge-topics-section--after-results{padding-top:48px!important;}} /* Tudastar V2.2 - azonnali keresesi talalatok */ .wk-knowledge-search-panel{position:relative;z-index:8;} .wk-knowledge-live-results{ margin-top:12px; background:#fff; border:1px solid #dbe6ee; border-radius:14px; box-shadow:0 14px 30px rgba(16,48,70,.10); overflow:hidden; text-align:left; } .wk-knowledge-live-results[hidden]{display:none!important;} .wk-knowledge-live-item{ display:block; padding:13px 16px; border-bottom:1px solid #e8eff4; color:var(--wk-navy); text-decoration:none!important; } .wk-knowledge-live-item:last-of-type{border-bottom:0;} .wk-knowledge-live-item:hover,.wk-knowledge-live-item:focus{background:#f2f8fa;color:var(--wk-navy);} .wk-knowledge-live-item strong{display:block;font-size:15px;line-height:1.35;font-weight:700;} .wk-knowledge-live-item span{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:#64788a;} .wk-knowledge-live-more{display:block;padding:12px 16px;background:#f6fafc;color:#0877d1;font-size:13px;font-weight:700;text-decoration:none!important;} .wk-knowledge-live-empty{padding:14px 16px;color:#64788a;font-size:14px;line-height:1.45;} @media(max-width:767px){ .wk-knowledge-live-results{border-radius:12px;} .wk-knowledge-live-item{padding:12px 13px;} } /* ======================================================== WEBKOMFORT PUBLIC SEARCH - Tudastar + mega-menu ======================================================== */ .wk-public-search-results[hidden], .spc-public-search-panel[hidden]{display:none!important;} .wk-public-search-results{ margin-top:10px; border:1px solid #d7e3ec; border-radius:14px; background:#fff; box-shadow:0 18px 46px rgba(13,43,74,.14); overflow:hidden; max-height:460px; overflow-y:auto; } .wk-public-search-list{display:block;} .wk-public-search-result{ position:relative; display:block; padding:14px 46px 14px 16px; border-bottom:1px solid #edf2f6; color:#12314b!important; text-decoration:none!important; background:#fff; } .wk-public-search-result:last-child{border-bottom:0;} .wk-public-search-result:hover, .wk-public-search-result:focus{background:#f5fafc;color:#0d2b4a!important;} .wk-public-search-result-type{ display:block; margin-bottom:4px; color:#0c8f96; font-size:11px; line-height:1.2; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .wk-public-search-result strong{ display:block; color:#12314b; font-size:15px; line-height:1.35; font-weight:800; } .wk-public-search-result small{ display:block; margin-top:4px; color:#63798a; font-size:12.5px; line-height:1.45; } .wk-public-search-result-arrow{ position:absolute; right:16px; top:50%; transform:translateY(-50%); color:#1677ea; font-size:18px; font-weight:700; } .wk-public-search-empty, .wk-public-search-loading{ padding:16px; color:#657b8b; font-size:14px; line-height:1.45; } /* Desktop header search */ .spc-nav-v12 .spc-public-search-nav{ position:relative!important; display:flex!important; align-items:center!important; margin-left:auto!important; } .spc-nav-v12 .spc-public-search-toggle{ height:42px!important; min-width:42px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; padding:0 12px!important; border:1px solid rgba(255,255,255,.18)!important; border-radius:8px!important; background:rgba(255,255,255,.04)!important; color:#fff!important; cursor:pointer!important; font-family:var(--spc-font-ui)!important; font-size:13px!important; font-weight:700!important; } .spc-nav-v12 .spc-public-search-toggle:hover, .spc-nav-v12 .spc-public-search-toggle[aria-expanded="true"]{ background:#20384c!important; border-color:rgba(255,255,255,.3)!important; } .spc-nav-v12 .spc-public-search-toggle i{font-size:16px!important;} .spc-public-search-panel{ position:absolute!important; right:0!important; top:calc(100% + 10px)!important; width:min(520px,calc(100vw - 40px))!important; padding:18px!important; border:1px solid #d7e3ec!important; border-radius:14px!important; background:#fff!important; box-shadow:0 20px 60px rgba(9,32,51,.22)!important; z-index:10150!important; } .spc-public-search-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;} .spc-public-search-head strong{color:#0d2b4a;font-size:18px;font-weight:800;} .spc-public-search-head small{color:#6d8190;font-size:12px;} .spc-public-search-field{position:relative;display:flex;align-items:center;} .spc-public-search-field>i{position:absolute;left:14px;color:#688091;font-size:17px;z-index:1;} .spc-public-search-field input{ width:100%!important; height:48px!important; margin:0!important; padding:0 42px 0 42px!important; border:1px solid #c8d8e4!important; border-radius:9px!important; background:#fff!important; color:#17334a!important; font-size:14px!important; line-height:48px!important; text-align:left!important; } .spc-public-search-field input:focus{border-color:#1677ea!important;box-shadow:0 0 0 3px rgba(22,119,234,.10)!important;outline:0!important;} .spc-public-search-field button, .wk-knowledge-search-box [data-public-search-clear]{ position:absolute; right:10px; width:28px; height:28px; border:0; background:transparent; color:#748897; font-size:20px; line-height:28px; cursor:pointer; opacity:0; pointer-events:none; } .spc-public-search-field button.is-visible, .wk-knowledge-search-box [data-public-search-clear].is-visible{opacity:1;pointer-events:auto;} /* Tudastar search uses the same result renderer */ .wk-knowledge-search-panel .wk-public-search-results{ position:absolute; left:0; right:0; top:100%; z-index:20; margin-top:8px; } /* Mobile search */ .spc-mobile-public-search{ margin:12px 14px 16px; padding:14px; border:1px solid #d5e2eb; border-radius:12px; background:#f7fbfd; } .spc-mobile-public-search-title{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:#12314b;font-size:15px;font-weight:800;} .spc-mobile-public-search-title i{color:#1677ea;} .spc-mobile-public-search-field{position:relative;} .spc-mobile-public-search-field input{ display:block; width:100%; height:46px; padding:0 40px 0 13px; border:1px solid #c8d8e4; border-radius:8px; background:#fff; color:#17334a; font-size:15px; } .spc-mobile-public-search-field button{ position:absolute; right:8px; top:9px; width:28px; height:28px; border:0; background:transparent; color:#728695; font-size:20px; opacity:0; pointer-events:none; } .spc-mobile-public-search-field button.is-visible{opacity:1;pointer-events:auto;} .spc-mobile-public-search .wk-public-search-results{max-height:380px;box-shadow:none;border-radius:9px;} /* Tudastar direct link in the mobile mega-menu: readable on light body */ .spc-mobile-mega .spc-mobile-knowledge-home{ display:block!important; margin:0 0 14px!important; padding:15px 14px!important; border:1px solid #cfdee8!important; border-radius:10px!important; background:#fff!important; color:#12314b!important; text-decoration:none!important; } .spc-mobile-mega .spc-mobile-knowledge-home strong{ display:block!important; color:#12314b!important; font-size:16px!important; line-height:1.35!important; font-weight:800!important; } .spc-mobile-mega .spc-mobile-knowledge-home small{ display:block!important; margin-top:5px!important; color:#63798a!important; font-size:13px!important; line-height:1.45!important; } @media (max-width:1199px){ .spc-nav-v12 .spc-public-search-toggle span{display:none!important;} .spc-nav-v12 .spc-public-search-toggle{padding:0!important;width:40px!important;min-width:40px!important;} } @media (max-width:767px){ .wk-knowledge-search-panel .wk-public-search-results{position:static;margin-top:10px;max-height:420px;} .wk-public-search-result{padding:13px 40px 13px 13px;} .wk-public-search-result strong{font-size:14px;} .wk-public-search-result small{font-size:12px;} } /********************************************************** WEBKOMFORT PUBLIC SEARCH V3.1 — header compatibility fix **********************************************************/ @media (min-width:768px){ #sidebartop .spc-nav-v12 .spc-public-search-nav{ position:relative!important; display:flex!important; align-items:center!important; align-self:stretch!important; margin-left:0!important; padding:0 0 0 8px!important; } #sidebartop .spc-nav-v12 .spc-public-search-toggle{ position:relative!important; top:auto!important; width:42px!important; min-width:42px!important; max-width:42px!important; height:42px!important; min-height:42px!important; max-height:42px!important; margin:auto 0!important; padding:0!important; border:1px solid rgba(255,255,255,.20)!important; border-radius:8px!important; background:rgba(255,255,255,.04)!important; color:#fff!important; display:flex!important; align-items:center!important; justify-content:center!important; line-height:1!important; box-shadow:none!important; outline:0!important; } #sidebartop .spc-nav-v12 .spc-public-search-toggle .icon-search{ display:block!important; position:static!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; color:inherit!important; font-size:17px!important; line-height:1!important; } #sidebartop .spc-nav-v12 .spc-public-search-toggle .spc-search-label{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } #sidebartop .spc-public-search-panel{ top:calc(100% + 8px)!important; right:0!important; } } /********************************************************** WEBKOMFORT PUBLIC SEARCH V3.2 - layer isolation **********************************************************/ @media (min-width:768px){ #sidebartop .spc-nav-v12 .spc-public-search-nav{ z-index:2147483000!important; isolation:isolate!important; } #sidebartop .spc-public-search-panel{ z-index:2147483001!important; background:#fff!important; opacity:1!important; overflow:visible!important; } #sidebartop .spc-public-search-panel:before{ content:none!important; display:none!important; } #sidebartop .spc-public-search-panel .spc-public-search-head, #sidebartop .spc-public-search-panel .spc-public-search-field, #sidebartop .spc-public-search-panel .wk-public-search-results{ position:relative!important; z-index:2!important; } body.wk-public-search-open #sidebartop .spc-nav-v12 .spc-nav-item.has-dropdown>.spc-nav-dropdown.spc-mega-menu{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; transform:translateY(-8px)!important; } } /********************************************************** WEBKOMFORT PUBLIC SEARCH V3.3 - legacy icon-search reset The legacy #sidebartop .icon-search rule adds a 90px line-height, white border and padding to every icon-search in the header. Reset it only inside the new public-search UI. **********************************************************/ @media (min-width:768px){ #sidebartop .spc-public-search-panel .spc-public-search-field > .icon-search{ position:absolute!important; left:14px!important; top:50%!important; transform:translateY(-50%)!important; display:block!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; color:#688091!important; font-size:17px!important; line-height:1!important; box-shadow:none!important; z-index:3!important; } #sidebartop .spc-public-search-panel .spc-public-search-field{ overflow:visible!important; } } /* Webkomfort public search - full results page */ .wk-public-search-submit{display:block;width:100%;margin:10px 0 0;padding:11px 16px;border:0;border-radius:10px;background:#0b7892;color:#fff;font-weight:700;cursor:pointer;text-align:center} .wk-public-search-submit:hover,.wk-public-search-submit:focus{background:#09677d;color:#fff} .wk-search-page{background:#fff}.wk-search-page-hero{padding:72px 0 52px;background:#f5fafc;border-bottom:1px solid #dce9ef}.wk-search-page-hero h1{margin:12px 0 28px;font-size:clamp(38px,5vw,64px);line-height:1.02;color:#052e59}.wk-search-page-form{max-width:760px}.wk-search-page-form label{display:block;margin-bottom:9px;font-weight:700;color:#0c2942}.wk-search-page-field{display:flex;gap:10px}.wk-search-page-field input{min-width:0;flex:1;height:54px;padding:0 17px;border:1px solid #b9ced9;border-radius:12px;font-size:17px;background:#fff}.wk-search-page-field input:focus{outline:2px solid #1683f3;outline-offset:1px}.wk-search-page-field button{height:54px;padding:0 24px;border:0;border-radius:12px;background:#087c91;color:#fff;font-weight:700}.wk-search-page-count{margin:20px 0 0;color:#597286}.wk-search-page-results{padding:58px 0 80px}.wk-search-page-results h2{margin:38px 0 18px;color:#062f59;font-size:28px}.wk-search-page-results h2:first-child{margin-top:0}.wk-search-page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.wk-search-page-card{display:flex;flex-direction:column;min-height:190px;padding:24px;border:1px solid #d5e2e8;border-radius:16px;background:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(8,48,78,.05)}.wk-search-page-card span{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#07859a}.wk-search-page-card strong{margin-top:7px;font-size:20px;line-height:1.25;color:#0c2942}.wk-search-page-card p{margin:9px 0 18px;color:#60788a;line-height:1.55}.wk-search-page-card b{margin-top:auto;color:#087c91}.wk-search-page-card:hover{border-color:#8cc6d0;transform:translateY(-1px)}.wk-search-page-empty{padding:30px;border:1px solid #d5e2e8;border-radius:16px;background:#f8fbfc}.wk-search-page-empty h2{margin:0 0 8px} @media(max-width:767px){.wk-search-page-hero{padding:42px 0 34px}.wk-search-page-field{display:block}.wk-search-page-field button{width:100%;margin-top:10px}.wk-search-page-grid{grid-template-columns:1fr}.wk-search-page-results{padding:38px 0 56px}.wk-search-page-card{min-height:0}} /********************************************************** WEBKOMFORT HEADER V4.1 — keep every primary item visible **********************************************************/ @media (min-width:768px) and (max-width:1180px){ #sidebartop .spc-primary-inner{ width:calc(100% - 20px)!important; max-width:none!important; padding:0!important; gap:6px!important; } #sidebartop .spc-brand-single{ flex:0 0 108px!important; width:108px!important; min-width:108px!important; max-width:108px!important; padding-right:8px!important; } #sidebartop .spc-brand-single .spc-brand-name{ font-size:15px!important; } #sidebartop .spc-brand-single .spc-brand-legacy{ font-size:6px!important; } #sidebartop .spc-desktop-nav{ flex:1 1 auto!important; width:auto!important; min-width:0!important; overflow:visible!important; } #sidebartop .spc-nav-list.spc-nav-v12{ display:flex!important; flex:1 1 auto!important; width:100%!important; max-width:none!important; min-width:0!important; flex-wrap:nowrap!important; align-items:stretch!important; justify-content:flex-start!important; gap:0!important; overflow:visible!important; } #sidebartop .spc-nav-list.spc-nav-v12 > .spc-nav-item{ display:flex!important; visibility:visible!important; flex:0 0 auto!important; width:auto!important; min-width:max-content!important; max-width:none!important; overflow:visible!important; } #sidebartop .spc-nav-v12 > .spc-nav-item > a, #sidebartop .spc-nav-v12 > .spc-nav-item > .spc-nav-trigger{ flex:0 0 auto!important; width:auto!important; min-width:max-content!important; padding-left:8px!important; padding-right:8px!important; font-size:12.5px!important; white-space:nowrap!important; } #sidebartop .spc-nav-v12 > .spc-public-search-nav{ flex:0 0 40px!important; width:40px!important; min-width:40px!important; max-width:40px!important; margin-left:3px!important; padding-left:0!important; } #sidebartop .spc-nav-v12 > .spc-public-search-nav .spc-public-search-toggle{ width:38px!important; min-width:38px!important; max-width:38px!important; height:38px!important; min-height:38px!important; max-height:38px!important; } } @media (min-width:768px) and (max-width:980px){ #sidebartop .spc-primary-inner{ width:calc(100% - 12px)!important; gap:3px!important; } #sidebartop .spc-brand-single{ flex-basis:96px!important; width:96px!important; min-width:96px!important; max-width:96px!important; padding-right:4px!important; } #sidebartop .spc-brand-single .spc-brand-name{font-size:14px!important;} #sidebartop .spc-nav-v12 > .spc-nav-item > a, #sidebartop .spc-nav-v12 > .spc-nav-item > .spc-nav-trigger{ padding-left:6px!important; padding-right:6px!important; font-size:12px!important; } } /********************************************************** WEBKOMFORT — V4.2 compact mobile search **********************************************************/ @media (max-width:767px){ .mobile-menu.spc-mobile-mega .spc-mobile-public-search{ display:block!important; margin:0!important; padding:0!important; border:0!important; border-bottom:1px solid #d8e3eb!important; border-radius:0!important; background:#fff!important; } .mobile-menu.spc-mobile-mega .spc-mobile-public-search > summary.spc-mobile-public-search-toggle{ list-style:none!important; -webkit-appearance:none!important; appearance:none!important; min-height:46px!important; margin:0!important; padding:0 14px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; cursor:pointer!important; background:#fff!important; color:#12314b!important; border:0!important; font:700 13px/1.2 'DM Sans',sans-serif!important; } .mobile-menu.spc-mobile-mega .spc-mobile-public-search > summary::-webkit-details-marker{display:none!important;} .mobile-menu.spc-mobile-mega .spc-mobile-public-search > summary::marker{display:none!important;content:''!important;} .mobile-menu.spc-mobile-mega .spc-mobile-public-search-toggle-label{ display:flex!important; align-items:center!important; gap:8px!important; } .mobile-menu.spc-mobile-mega .spc-mobile-public-search-toggle-label i{ color:#1677ea!important; font-size:14px!important; margin:0!important; } .mobile-menu.spc-mobile-mega .spc-mobile-public-search-chevron{ display:inline-block!important; color:#1677ea!important; font-size:16px!important; line-height:1!important; transition:transform .2s ease!important; } .mobile-menu.spc-mobile-mega .spc-mobile-public-search[open] .spc-mobile-public-search-chevron{ transform:rotate(180deg)!important; } .mobile-menu.spc-mobile-mega .spc-mobile-public-search-body{ padding:0 12px 12px!important; background:#f7fbfd!important; border-top:1px solid #e5eef4!important; } .mobile-menu.spc-mobile-mega .spc-mobile-public-search-field{ padding-top:10px!important; } .mobile-menu.spc-mobile-mega .spc-mobile-public-search-field input{ height:40px!important; font-size:13px!important; } .mobile-menu.spc-mobile-mega .spc-mobile-public-search .wk-public-search-submit{ min-height:38px!important; margin-top:8px!important; padding:8px 12px!important; border-radius:7px!important; font-size:12px!important; } .mobile-menu.spc-mobile-mega .spc-mobile-public-search .wk-public-search-results{ max-height:300px!important; margin-top:8px!important; } } /* ========================================================= TUD�ST�R � CIKK TARTALOMJEGYZ�K ========================================================= */ .wk-article-toc{ margin:28px 0 0; padding:24px 0 4px; border-top:1px solid var(--wk-line); } .wk-article-toc-title{ margin:0 0 14px!important; color:var(--wk-navy)!important; font:800 15px/1.4 'DM Sans',Arial,sans-serif!important; } .wk-article-toc-links{ display:flex; flex-wrap:wrap; gap:9px; } .wk-article-toc-links a{ display:inline-flex; align-items:center; min-height:40px; padding:8px 13px; border:1px solid #cbd9e3; border-radius:6px; background:#fff; color:var(--wk-navy)!important; font-size:14px; font-weight:700; line-height:1.35; text-decoration:none!important; } .wk-article-toc-links a:hover{ border-color:var(--wk-blue); background:#f7fafc; } .wk-article-page .wk-section[id]{ scroll-margin-top:110px; } .wk-article-page .wk-reading h3{ margin:32px 0 8px!important; font-size:20px!important; line-height:1.35!important; } .wk-article-page .wk-reading h3 + p{ margin-top:0!important; } .wk-article-next{ border-top:1px solid var(--wk-line); } .wk-article-next-link{ font-weight:800; text-decoration:none!important; } @media(max-width:767px){ .wk-article-toc{ padding-top:20px; } .wk-article-toc-links{ display:grid; grid-template-columns:1fr; gap:7px; } .wk-article-toc-links a{ width:100%; } .wk-article-page .wk-section[id]{ scroll-margin-top:80px; } } /********************************************************** WEBKOMFORT SEO / AI V1.1 - breadcrumb presentation patch A jelenlegi mukodo style.css vegere illesztve. **********************************************************/ .wk-breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:var(--wk-muted); font-family:'DM Sans','Plus Jakarta Sans',Arial,sans-serif; font-size:13px; line-height:1.4; font-weight:600; } .wk-breadcrumb a{ color:#557188!important; text-decoration:none!important; transition:color .15s ease; } .wk-breadcrumb a:hover{ color:var(--wk-blue)!important; text-decoration:none!important; } .wk-breadcrumb-separator{ padding:0!important; color:#9bafbf!important; display:inline!important; } #aloldal .content-top .wk-breadcrumb{ width:min(calc(100% - 40px),var(--wk-max)); max-width:var(--wk-max); margin:0 auto!important; padding:24px 0 0!important; } #aloldal .content-top .wk-breadcrumb + .cim{ padding-top:clamp(24px,4vw,46px)!important; } .wk-knowledge-hero .wk-breadcrumb{ margin:0 0 12px!important; padding:0!important; } @media(max-width:767px){ .wk-breadcrumb{gap:5px;font-size:12px;} #aloldal .content-top .wk-breadcrumb{width:calc(100% - 28px);padding-top:16px!important;} #aloldal .content-top .wk-breadcrumb + .cim{padding-top:22px!important;} .wk-knowledge-hero .wk-breadcrumb{margin-bottom:10px!important;} } /* ========================================================= WEBKOMFORT � TUD�ST�R CIKK INFORM�CI�S BLOKKOK Mennyibe ker�l egy weboldal? � append-only patch A jelenlegi style.css LEGALJ�RA illesztend�. ========================================================= */ /* �ltal�nos: a cikk struktur�lt blokkjai ne v�ljanak "k�rtyafall�". */ .wk-article-page .wk-article-factors, .wk-article-page .wk-article-compare, .wk-article-page .wk-article-cost-list, .wk-article-page .wk-article-checklist, .wk-article-page .wk-article-paths{ margin-top:30px; } /* --------------------------------------------------------- 1. �rmeghat�roz� t�nyez�k Inform�ci�s lista: nincs lekerek�t�s, nincs �rny�k. --------------------------------------------------------- */ .wk-article-page .wk-article-factors{ display:grid; grid-template-columns:1fr; border-top:1px solid var(--wk-line); } .wk-article-page .wk-article-factor{ position:relative; padding:22px 0 22px 22px; border-bottom:1px solid var(--wk-line); } .wk-article-page .wk-article-factor::before{ content:""; position:absolute; left:0; top:24px; width:4px; height:34px; background:var(--wk-blue); } .wk-article-page .wk-article-factor:nth-child(2)::before{ background:var(--wk-turquoise); } .wk-article-page .wk-article-factor:nth-child(3)::before{ background:var(--wk-coral); } .wk-article-page .wk-article-factor:nth-child(4)::before{ background:#7867c9; } .wk-article-page .wk-article-factor h3{ margin:0 0 8px!important; font-size:19px!important; } .wk-article-page .wk-article-factor p{ margin:0!important; } /* --------------------------------------------------------- 2. K�t kivitelez�si modell �sszehasonl�t�sa A vizu�lis k�l�nbs�g a k�t oldal k�z�tti d�nt�st seg�ti. --------------------------------------------------------- */ .wk-article-page .wk-article-compare{ display:grid; grid-template-columns:1fr; border-top:1px solid var(--wk-line); border-bottom:1px solid var(--wk-line); background:#fff; } .wk-article-page .wk-article-compare-item{ padding:24px 0; } .wk-article-page .wk-article-compare-item + .wk-article-compare-item{ border-top:1px solid var(--wk-line); } .wk-article-page .wk-article-compare-label, .wk-article-page .wk-article-path-label{ display:block!important; width:auto!important; margin:0 0 8px!important; padding:0!important; border:0!important; background:transparent!important; color:#0c6f72!important; font:800 12px/1.35 'DM Sans',Arial,sans-serif!important; letter-spacing:.08em!important; text-transform:uppercase!important; } .wk-article-page .wk-article-compare-item h3{ margin:0 0 10px!important; font-size:21px!important; } .wk-article-page .wk-article-compare-item p:last-child{ margin-bottom:0!important; } /* --------------------------------------------------------- 3. Kiemelt gondolat / megjegyz�s Nem CTA, ez�rt sz�gletes, egyszer� inform�ci�s kiemel�s. --------------------------------------------------------- */ .wk-article-page .wk-article-highlight, .wk-article-page .wk-article-note{ margin:30px 0 0; padding:20px 22px; border:0; border-left:4px solid var(--wk-turquoise); background:#f3faf9; } .wk-article-page .wk-article-note{ border-left-color:var(--wk-blue); background:#f4f8fc; } .wk-article-page .wk-article-highlight p, .wk-article-page .wk-article-note p{ margin:0!important; } .wk-article-page .wk-article-highlight strong, .wk-article-page .wk-article-note strong{ color:var(--wk-navy)!important; } /* --------------------------------------------------------- 4. J�rul�kos k�lts�gek H�rom oszlop desktopon, egyszer� fels� jel�l�ssel. --------------------------------------------------------- */ .wk-article-page .wk-article-cost-list{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--wk-line); } .wk-article-page .wk-article-cost{ padding:22px 0; border-bottom:1px solid var(--wk-line); } .wk-article-page .wk-article-cost h3{ position:relative; margin:0 0 9px!important; padding-top:13px; font-size:19px!important; } .wk-article-page .wk-article-cost h3::before{ content:""; position:absolute; left:0; top:0; width:42px; height:3px; background:var(--wk-blue); } .wk-article-page .wk-article-cost:nth-child(2) h3::before{ background:var(--wk-turquoise); } .wk-article-page .wk-article-cost:nth-child(3) h3::before{ background:var(--wk-coral); } .wk-article-page .wk-article-cost p{ margin:0!important; } /* --------------------------------------------------------- 5. Aj�nlat-�sszehasonl�t� ellen�rz�lista Sorsz�m + tartalom, nem k�rty�k. --------------------------------------------------------- */ .wk-article-page .wk-article-checklist{ counter-reset:wkarticlecheck; display:grid; grid-template-columns:1fr; border-top:1px solid var(--wk-line); } .wk-article-page .wk-article-check{ counter-increment:wkarticlecheck; position:relative; padding:22px 0 22px 54px; border-bottom:1px solid var(--wk-line); } .wk-article-page .wk-article-check::before{ content:counter(wkarticlecheck, decimal-leading-zero); position:absolute; left:0; top:23px; color:var(--wk-blue); font:800 18px/1 'Plus Jakarta Sans','DM Sans',sans-serif; letter-spacing:-.03em; } .wk-article-page .wk-article-check h3{ margin:0 0 8px!important; font-size:19px!important; } .wk-article-page .wk-article-check p{ margin:0!important; } /* --------------------------------------------------------- 6. D�nt�si utak Ezek val�di navig�ci�s/tov�bbl�p�si elemek, ez�rt kaphatnak enyhe lekerek�t�st �s hover-visszajelz�st. --------------------------------------------------------- */ .wk-article-page .wk-article-paths{ display:grid; grid-template-columns:1fr; gap:14px; } .wk-article-page .wk-article-path{ position:relative; padding:22px 22px 20px; border:1px solid rgba(18,69,105,.14); border-radius:10px; background:#fff; box-shadow:0 8px 24px rgba(13,45,71,.04); transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; } .wk-article-page .wk-article-path:hover{ transform:translateY(-1px); border-color:rgba(22,119,234,.30); box-shadow:0 12px 30px rgba(13,45,71,.07); } .wk-article-page .wk-article-path h3{ margin:0 0 8px!important; font-size:21px!important; } .wk-article-page .wk-article-path p:not(.wk-article-path-label){ margin:0 0 16px!important; } .wk-article-page .wk-article-path a{ display:inline-flex; align-items:center; color:var(--wk-blue)!important; font-weight:800!important; text-decoration:none!important; } .wk-article-page .wk-article-path a:hover{ text-decoration:underline!important; } /* --------------------------------------------------------- 7. Cikkz�r� tov�bbl�p�s Marad visszafogott, nem k�sz�t�nk �j CTA-komponenst. --------------------------------------------------------- */ .wk-article-page .wk-article-next .wk-kicker{ margin-bottom:16px!important; } .wk-article-page .wk-article-next-link{ display:inline-flex; align-items:center; min-height:44px; } /* --------------------------------------------------------- TABLET + DESKTOP --------------------------------------------------------- */ @media (min-width:768px){ .wk-article-page .wk-article-factors{ grid-template-columns:repeat(2,minmax(0,1fr)); } .wk-article-page .wk-article-factor{ padding:24px 26px 24px 24px; } .wk-article-page .wk-article-factor:nth-child(odd){ border-right:1px solid var(--wk-line); } .wk-article-page .wk-article-compare{ grid-template-columns:repeat(2,minmax(0,1fr)); } .wk-article-page .wk-article-compare-item{ padding:28px 28px 28px 0; } .wk-article-page .wk-article-compare-item + .wk-article-compare-item{ border-top:0; border-left:1px solid var(--wk-line); padding-left:28px; padding-right:0; } .wk-article-page .wk-article-cost-list{ grid-template-columns:repeat(3,minmax(0,1fr)); } .wk-article-page .wk-article-cost{ padding:24px 24px 20px; border-bottom:0; } .wk-article-page .wk-article-cost:first-child{ padding-left:0; } .wk-article-page .wk-article-cost:last-child{ padding-right:0; } .wk-article-page .wk-article-cost + .wk-article-cost{ border-left:1px solid var(--wk-line); } .wk-article-page .wk-article-checklist{ grid-template-columns:repeat(2,minmax(0,1fr)); } .wk-article-page .wk-article-check{ padding:24px 28px 24px 58px; } .wk-article-page .wk-article-check:nth-child(odd){ border-right:1px solid var(--wk-line); } .wk-article-page .wk-article-paths{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } } /* --------------------------------------------------------- MOBIL FINOMHANGOL�S --------------------------------------------------------- */ @media (max-width:767px){ .wk-article-page .wk-article-factors, .wk-article-page .wk-article-compare, .wk-article-page .wk-article-cost-list, .wk-article-page .wk-article-checklist, .wk-article-page .wk-article-paths{ margin-top:24px; } .wk-article-page .wk-article-highlight, .wk-article-page .wk-article-note{ margin-top:24px; padding:18px 18px; } .wk-article-page .wk-article-path{ padding:20px 18px 18px; border-radius:8px; } .wk-article-page .wk-article-check{ padding-left:48px; } } .page-footer.wk-site-footer{ margin-top:0; padding:0; border-top:0; background:#0b2d49; color:#dce8ef; position:relative; } .wk-site-footer .wk-footer-shell{ width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:72px 0 28px; } .wk-site-footer .wk-footer-contact{ position:relative; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; padding:44px; margin-bottom:64px; border-radius:22px; background:#f4f8fb; color:#17324a; overflow:hidden; } .wk-site-footer .wk-footer-contact:before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg,#2180ee 0%,#25c2c7 100%); } .wk-site-footer .wk-footer-contact-copy{ align-self:start; padding-top:2px; } .wk-site-footer .wk-footer-contact-copy .wk-kicker{ display:inline-block; margin:0 0 20px; padding:7px 11px 7px 12px; border-left:3px solid #25bfc4; background:#e9f5f6; color:#08757d; font-size:12px; line-height:1.2; font-weight:800; letter-spacing:.08em; } .wk-site-footer .wk-footer-contact-copy h2{ margin:0; max-width:500px; color:#082f53; font-size:clamp(34px,3.2vw,50px); line-height:1.15; letter-spacing:-.025em; font-weight:800; } .wk-site-footer .wk-footer-contact-copy>p:not(.wk-kicker){ margin:24px 0 0; max-width:520px; color:#4e6679; font-size:18px; line-height:1.7; } .wk-site-footer .wk-footer-form{ min-width:0; } .wk-site-footer .wk-footer-fields{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .wk-site-footer .wk-footer-field, .wk-site-footer .wk-footer-message{ min-width:0; } .wk-site-footer .wk-footer-field label, .wk-site-footer .wk-footer-message label{ display:block; margin:0 0 8px; color:#25455f; font-size:13px; line-height:1.35; font-weight:700; } .wk-site-footer #irjon input[type="text"], .wk-site-footer #irjon textarea{ width:100%; min-width:0; margin:0; border:1px solid #bfd0dc; border-radius:8px; background:#fff; color:#17324a; box-shadow:none; font-size:16px; line-height:1.5; text-align:left; transition:border-color .18s ease,box-shadow .18s ease; } .wk-site-footer #irjon input[type="text"]{ height:52px; padding:0 15px; } .wk-site-footer #irjon textarea{ display:block; height:132px; margin-top:0; padding:14px 15px; resize:vertical; } .wk-site-footer .wk-footer-message{ margin-top:16px; } .wk-site-footer #irjon input[type="text"]:focus, .wk-site-footer #irjon textarea:focus{ outline:none; border-color:#2180ee; box-shadow:0 0 0 3px rgba(33,128,238,.11); } .wk-site-footer #irjon input::placeholder, .wk-site-footer #irjon textarea::placeholder{ color:#8193a0; opacity:1; } .wk-site-footer .wk-footer-form-actions{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:18px; } .wk-site-footer .wk-footer-form-actions>p{ margin:0; color:#6a7e8d; font-size:13px; line-height:1.55; } .wk-site-footer .wk-footer-submit{ flex:0 0 auto; min-height:50px; padding:14px 22px!important; cursor:pointer; text-decoration:none!important; } .wk-site-footer #irjon label.error{ display:none!important; } .wk-site-footer #irjon .error{ border-color:#c94a4a!important; } .wk-site-footer #irjon .elkuldve{ margin:0; padding:24px; border-radius:10px; background:#edf8f2; color:#236444; font-size:17px; line-height:1.6; } .wk-site-footer .wk-footer-main{ display:grid; grid-template-columns:1.5fr .9fr 1fr 1.05fr; gap:48px; padding-bottom:44px; } .wk-site-footer .wk-footer-brand-name{ margin:0 0 15px; color:#fff; font-size:29px; line-height:1.15; font-weight:800; letter-spacing:-.025em; } .wk-site-footer .wk-footer-brand>p:last-child, .wk-site-footer .wk-footer-column>p:not(.wk-footer-heading){ margin:0; color:#bfd0dc; font-size:15px; line-height:1.7; } .wk-site-footer .wk-footer-brand>p:last-child{ max-width:360px; } .wk-site-footer .wk-footer-heading{ margin:2px 0 15px; color:#fff; font-size:14px; line-height:1.35; font-weight:800; letter-spacing:.035em; } .wk-site-footer .wk-footer-contact-lines{ margin-top:14px!important; } .wk-site-footer .wk-footer-column a, .wk-site-footer .wk-footer-bottom a{ color:#dce8ef; text-decoration:none; } .wk-site-footer .wk-footer-column a:hover, .wk-site-footer .wk-footer-bottom a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; } .wk-site-footer .wk-footer-payment img{ display:block; max-width:210px; width:100%; height:auto; margin-top:4px; filter:none; opacity:1; } .wk-site-footer .wk-footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:32px; padding:24px 0 0; border-top:1px solid rgba(255,255,255,.14); } .wk-site-footer .wk-footer-legal{ display:flex; flex-wrap:wrap; gap:10px 22px; } .wk-site-footer .wk-footer-legal a, .wk-site-footer .wk-footer-copyright{ margin:0; color:#aebfcb; font-size:13px; line-height:1.5; } @media(max-width:980px){ .wk-site-footer .wk-footer-contact{ grid-template-columns:1fr; gap:34px; } .wk-site-footer .wk-footer-main{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 44px; } } @media(max-width:767px){ .wk-site-footer .wk-footer-shell{ width:min(100% - 28px,1180px); padding:46px 0 22px; } .wk-site-footer .wk-footer-contact{ gap:28px; padding:30px 20px 24px; margin-bottom:44px; border-radius:14px; } .wk-site-footer .wk-footer-contact-copy h2{ font-size:clamp(30px,10vw,40px); line-height:1.17; } .wk-site-footer .wk-footer-contact-copy>p:not(.wk-kicker){ margin-top:18px; font-size:16px; line-height:1.65; } .wk-site-footer .wk-footer-fields{ grid-template-columns:1fr; gap:12px; } .wk-site-footer .wk-footer-message{ margin-top:12px; } .wk-site-footer #irjon textarea{ height:150px; } .wk-site-footer .wk-footer-form-actions{ display:block; } .wk-site-footer .wk-footer-form-actions>p{ margin-bottom:14px; } .wk-site-footer .wk-footer-submit{ display:block!important; width:100%; text-align:center; } .wk-site-footer .wk-footer-main{ grid-template-columns:1fr; gap:28px; padding-bottom:34px; } .wk-site-footer .wk-footer-brand{ padding-bottom:4px; } .wk-site-footer .wk-footer-bottom{ display:block; padding-top:20px; } .wk-site-footer .wk-footer-copyright{ margin-top:18px; } } /* ======================================================================== WEBKOMFORT FŐOLDAL — intent-led, consolidated 2026-09-16 ======================================================================== */ .wk-home{--wk-navy:#082f4f;--wk-blue:#1677ea;--wk-cyan:#18bfc0;--wk-green:#20a984;--wk-violet:#7457e8;--wk-orange:#e99a38;--wk-soft:#f2f8fa;overflow:hidden;color:#244c65} .wk-home *{box-sizing:border-box}.wk-home h1,.wk-home h2,.wk-home h3,.wk-home p{max-width:none}.wk-home h1,.wk-home h2,.wk-home h3{font-family:"Plus Jakarta Sans",Arial,sans-serif;color:var(--wk-navy)} .wk-home .wk-kicker{display:inline-block;margin:0 0 16px;padding:7px 10px 7px 12px;border-left:3px solid var(--wk-cyan);background:#edf9f8;color:#087b7d;font-size:11px;font-weight:800;line-height:1;letter-spacing:.08em} .wk-home .wk-section{position:relative;padding:clamp(76px,7vw,108px) 0}.wk-home .wk-home-intro{margin:18px 0 0;color:#567589;font-size:17px;line-height:1.7} /* hero */ .wk-home .wk-home-hero{position:relative;padding:clamp(68px,7vw,104px) 0;background:linear-gradient(135deg,#f1f8fb 0%,#eef7fa 58%,#f8fbfc 100%)} .wk-home .wk-home-hero:before,.wk-home .wk-home-hero:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.wk-home .wk-home-hero:before{width:210px;height:210px;right:-38px;top:-44px;background:rgba(22,119,234,.055)}.wk-home .wk-home-hero:after{width:116px;height:116px;right:10%;bottom:12%;background:rgba(24,191,192,.08)} .wk-home .wk-home-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:clamp(52px,6vw,86px);align-items:center}.wk-home .wk-home-hero-copy{max-width:720px}.wk-home .wk-home-hero h1{margin:0;font-size:clamp(46px,5.15vw,68px);line-height:1.10;letter-spacing:-.035em}.wk-home .wk-home-lead{max-width:680px;margin:26px 0 0;color:#42677d;font-size:18px;line-height:1.72}.wk-home .wk-home-hero-services{margin:18px 0 0;color:#315d78;font-size:14px;font-weight:700}.wk-home .wk-home-hero-services span{margin:0 7px;color:var(--wk-cyan)}.wk-home .wk-home-hero .wk-actions{margin-top:26px}.wk-home .wk-home-hero-media{position:relative}.wk-home .wk-home-hero-media:before{content:"";position:absolute;inset:18px -18px -18px 18px;border-radius:22px;background:linear-gradient(145deg,rgba(22,119,234,.10),rgba(24,191,192,.14))}.wk-home .wk-home-hero-media img{position:relative;z-index:1;display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 24px 54px rgba(8,47,79,.12)} /* problem recognition */ .wk-home .wk-home-situations{background:#fff}.wk-home .wk-home-heading--center{max-width:940px;margin:0 auto 52px;text-align:center}.wk-home .wk-home-heading--center .wk-kicker{margin-left:auto;margin-right:auto}.wk-home .wk-home-heading--center h2{max-width:920px;margin:0 auto;font-size:clamp(34px,3.7vw,52px);line-height:1.16;letter-spacing:-.035em}.wk-home .wk-home-heading--center .wk-home-intro{max-width:760px;margin:20px auto 0} .wk-home .wk-home-situation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:1080px;margin:0 auto}.wk-home .wk-home-situation{--accent:var(--wk-blue);position:relative;display:flex;flex-direction:column;min-height:320px;padding:34px;border:1px solid #dce8ee;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(8,47,79,.045)}.wk-home .wk-home-situation--email{--accent:var(--wk-green)}.wk-home .wk-home-situation--move{--accent:var(--wk-orange)}.wk-home .wk-home-situation--idea{--accent:var(--wk-violet)}.wk-home .wk-home-situation:before{content:"";position:absolute;left:34px;top:-1px;width:64px;height:3px;background:var(--accent)}.wk-home .wk-home-situation-icon{display:grid;place-items:center;width:58px;height:58px;margin-bottom:24px;border-radius:14px;background:color-mix(in srgb,var(--accent) 10%,white);color:var(--accent)}.wk-home .wk-home-situation-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.wk-home .wk-home-situation h3{margin:0;font-size:clamp(21px,1.75vw,27px);line-height:1.25;letter-spacing:-.025em}.wk-home .wk-home-situation p{margin:16px 0 20px;color:#587487;font-size:15px;line-height:1.68}.wk-home .wk-home-situation a{margin-top:auto;color:#0873df;font-weight:800;text-decoration:none}.wk-home .wk-home-situation a:hover{text-decoration:underline} /* core Webkomfort principle */ .wk-home .wk-home-comfort{position:relative;padding:clamp(84px,8vw,118px) 0;background:#082f4f;color:#fff}.wk-home .wk-home-comfort:after{content:"";position:absolute;right:5%;top:48px;width:132px;height:132px;opacity:.11;background-image:radial-gradient(circle,#75e4df 1.5px,transparent 1.6px);background-size:12px 12px}.wk-home .wk-home-comfort-head{max-width:900px;margin:0 auto 58px;text-align:center}.wk-home .wk-home-comfort .wk-kicker{border-left-color:#2bd0ca;background:rgba(255,255,255,.07);color:#7ce7e2}.wk-home .wk-home-comfort-head h2{margin:0;color:#fff;font-size:clamp(38px,4.5vw,60px);line-height:1.13;letter-spacing:-.04em}.wk-home .wk-home-comfort-head>p:last-child{max-width:780px;margin:22px auto 0;color:#cbdbe4;font-size:18px;line-height:1.72} .wk-home .wk-home-comfort-flow{display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr) 70px minmax(0,1fr);align-items:center;gap:12px}.wk-home .wk-home-comfort-step{text-align:center}.wk-home .wk-home-comfort-visual{display:grid;place-items:center;width:180px;height:138px;margin:0 auto 18px}.wk-home .wk-home-comfort-visual svg{width:100%;height:100%;overflow:visible}.wk-home .wk-svg-soft{fill:rgba(255,255,255,.07);stroke:rgba(121,230,225,.30);stroke-width:2}.wk-home .wk-svg-main{fill:none;stroke:#d9e8ef;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.wk-home .wk-svg-accent{fill:rgba(35,202,196,.18);stroke:#6de1dc;stroke-width:2}.wk-home .wk-svg-accent-line{fill:none;stroke:#6de1dc;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.wk-home .wk-home-comfort-number{display:block;margin-bottom:10px;color:#66dcd7;font-size:11px;font-weight:800;letter-spacing:.12em}.wk-home .wk-home-comfort-step h3{margin:0;color:#fff;font-size:21px;line-height:1.3}.wk-home .wk-home-comfort-step p{max-width:310px;margin:12px auto 0;color:#c6d7e1;font-size:15px;line-height:1.67}.wk-home .wk-home-comfort-arrow svg{width:100%;fill:none;stroke:rgba(116,226,221,.42);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* knowledge */ .wk-home .wk-home-knowledge{background:#f6fafb!important}.wk-home .wk-home-knowledge-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;margin-bottom:36px}.wk-home .wk-home-knowledge-head h2{margin:0;font-size:clamp(34px,3.6vw,50px);line-height:1.16;letter-spacing:-.035em}.wk-home .wk-home-knowledge-head .wk-home-intro{max-width:760px}.wk-home .wk-home-knowledge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.wk-home .wk-home-article{overflow:hidden;border:1px solid #dce8ee;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(8,47,79,.045)}.wk-home .wk-home-article>a{display:flex;height:100%;flex-direction:column;color:inherit;text-decoration:none}.wk-home .wk-home-article-image{display:block;aspect-ratio:16/9;overflow:hidden}.wk-home .wk-home-article-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.wk-home .wk-home-article:hover .wk-home-article-image img{transform:scale(1.025)}.wk-home .wk-home-article-body{display:flex;flex:1;flex-direction:column;padding:22px}.wk-home .wk-home-article-category{margin-bottom:9px;color:#0a9697;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.wk-home .wk-home-article-body>strong{color:var(--wk-navy);font-family:"Plus Jakarta Sans",Arial,sans-serif;font-size:18px;line-height:1.35}.wk-home .wk-home-article-excerpt{margin:12px 0 18px;color:#607b8c;font-size:13px;line-height:1.62}.wk-home .wk-home-article-more{margin-top:auto;color:#0873df;font-size:13px;font-weight:800} @media(max-width:1000px){.wk-home .wk-home-hero-grid{grid-template-columns:minmax(0,1fr) minmax(320px,.82fr);gap:42px}.wk-home .wk-home-comfort-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.wk-home .wk-home-comfort-arrow{display:none}.wk-home .wk-home-domain-panel{grid-template-columns:1fr}.wk-home .wk-home-knowledge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:767px){.wk-home .wk-section{padding:58px 0}.wk-home .wk-home-hero{padding:46px 0 54px}.wk-home .wk-home-hero-grid{display:flex;flex-direction:column;gap:34px}.wk-home .wk-home-hero h1{font-size:clamp(38px,11vw,48px);line-height:1.11}.wk-home .wk-home-lead{font-size:16px}.wk-home .wk-home-heading--center{margin-bottom:34px;text-align:left}.wk-home .wk-home-heading--center .wk-kicker{margin-left:0}.wk-home .wk-home-heading--center h2{font-size:32px}.wk-home .wk-home-heading--center .wk-home-intro{margin-left:0}.wk-home .wk-home-situation-grid{grid-template-columns:1fr}.wk-home .wk-home-situation{min-height:0;padding:26px 22px}.wk-home .wk-home-comfort{padding:64px 0}.wk-home .wk-home-comfort-head{text-align:left;margin-bottom:38px}.wk-home .wk-home-comfort-head h2{font-size:34px}.wk-home .wk-home-comfort-head>p:last-child{font-size:16px}.wk-home .wk-home-comfort-flow{grid-template-columns:1fr;gap:0}.wk-home .wk-home-comfort-step{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto auto;text-align:left;padding:24px 0;border-top:1px solid rgba(255,255,255,.13)}.wk-home .wk-home-comfort-visual{grid-row:1/4;width:90px;height:76px;margin:0}.wk-home .wk-home-comfort-number{margin:0 0 6px}.wk-home .wk-home-comfort-step h3{font-size:19px}.wk-home .wk-home-comfort-step p{max-width:none;margin:7px 0 0}.wk-home .wk-home-domain-form-wrap{padding:20px}.wk-home .wk-home-domain-form-row{grid-template-columns:1fr}.wk-home .wk-home-domain-form-row input[type=text]{border-right:1px solid #cfdde5;border-radius:8px}.wk-home .wk-home-domain-submit{margin-top:10px;border-radius:8px!important}.wk-home .wk-home-knowledge-head{grid-template-columns:1fr;gap:18px}.wk-home .wk-home-knowledge-grid{grid-template-columns:1fr}} /* ========================================================= WEBKOMFORT HOME — FINAL VISUAL QA PATCH 2026-09-16 Purpose: pixel-level homepage typography/rhythm fixes. Scoped to #home only; does not alter shared components. ========================================================= */ #home.wk-home{ overflow:hidden; } /* Global wk-page rules use !important; homepage needs explicit local control. */ #home.wk-home h1, #home.wk-home h2, #home.wk-home h3{ text-wrap:balance; } #home.wk-home .wk-home-hero h1{ margin:0!important; color:var(--wk-navy)!important; font-size:clamp(48px,5.15vw,68px)!important; line-height:1.13!important; letter-spacing:-.034em!important; } #home.wk-home .wk-home-lead{ margin:28px 0 0!important; line-height:1.78!important; } #home.wk-home .wk-home-hero-services{ margin:20px 0 0!important; line-height:1.65!important; } #home.wk-home .wk-home-hero .wk-actions{ margin-top:28px!important; } /* Problem recognition: equal cards, consistent vertical rhythm. */ #home.wk-home .wk-home-heading--center{ margin-bottom:54px; } #home.wk-home .wk-home-heading--center h2{ margin:0 auto!important; line-height:1.19!important; } #home.wk-home .wk-home-heading--center .wk-home-intro{ margin:22px auto 0!important; line-height:1.75!important; } #home.wk-home .wk-home-situation{ min-height:336px; padding:36px; } #home.wk-home .wk-home-situation h3{ margin:0!important; font-size:clamp(22px,1.75vw,27px)!important; line-height:1.31!important; letter-spacing:-.022em!important; } #home.wk-home .wk-home-situation p{ margin:17px 0 22px!important; line-height:1.75!important; } #home.wk-home .wk-home-situation a{ margin-top:auto; line-height:1.45; } /* Core promise: this is the key brand statement. Force readable light typography over the global .wk-page heading color !important rule. */ #home.wk-home .wk-home-comfort{ padding:clamp(92px,8vw,124px) 0; } #home.wk-home .wk-home-comfort-head{ max-width:960px; margin:0 auto 66px; } #home.wk-home .wk-home-comfort-head h2{ max-width:900px; margin:0 auto!important; color:#fff!important; font-size:clamp(40px,4.45vw,60px)!important; line-height:1.18!important; letter-spacing:-.032em!important; } #home.wk-home .wk-home-comfort-head > p:last-child{ max-width:790px; margin:24px auto 0!important; color:#d3e0e8!important; font-size:18px; line-height:1.78!important; } #home.wk-home .wk-home-comfort-flow{ align-items:start; gap:18px; } #home.wk-home .wk-home-comfort-step{ min-width:0; } #home.wk-home .wk-home-comfort-visual{ margin-bottom:22px; } #home.wk-home .wk-home-comfort-number{ margin:0 0 11px!important; line-height:1.3; } #home.wk-home .wk-home-comfort-step h3{ margin:0!important; color:#fff!important; font-size:22px!important; line-height:1.36!important; letter-spacing:-.018em!important; } #home.wk-home .wk-home-comfort-step p{ max-width:320px; margin:14px auto 0!important; color:#cbdbe4!important; line-height:1.76!important; } #home.wk-home .wk-home-comfort-arrow{ align-self:center; margin-top:52px; } /* Knowledge base now follows the brand statement directly: give the transition enough air after removing the domain utility block. */ #home.wk-home .wk-home-knowledge{ padding-top:clamp(88px,7vw,112px); padding-bottom:clamp(88px,7vw,112px); } #home.wk-home .wk-home-knowledge-head{ margin-bottom:42px; } #home.wk-home .wk-home-knowledge-head h2{ margin:0!important; line-height:1.20!important; } #home.wk-home .wk-home-knowledge-head .wk-home-intro{ margin:20px 0 0!important; line-height:1.72!important; } #home.wk-home .wk-home-article-body > strong{ line-height:1.42!important; } #home.wk-home .wk-home-article-excerpt{ margin:13px 0 20px!important; line-height:1.68!important; } /* Tablet */ @media(max-width:1000px){ #home.wk-home .wk-home-hero-grid{ grid-template-columns:minmax(0,1fr) minmax(300px,.78fr); gap:46px; } #home.wk-home .wk-home-comfort-head h2{ font-size:clamp(38px,5.2vw,52px)!important; } #home.wk-home .wk-home-comfort-flow{ gap:28px; } #home.wk-home .wk-home-comfort-step p{ font-size:14px; } } /* Mobile */ @media(max-width:767px){ #home.wk-home .wk-home-hero{ padding:50px 0 58px; } #home.wk-home .wk-home-hero h1{ font-size:clamp(38px,10.8vw,48px)!important; line-height:1.16!important; } #home.wk-home .wk-home-lead{ margin-top:22px!important; font-size:16px; line-height:1.72!important; } #home.wk-home .wk-home-hero-services{ line-height:1.9!important; } #home.wk-home .wk-home-heading--center{ margin-bottom:36px; } #home.wk-home .wk-home-heading--center h2{ font-size:32px!important; line-height:1.22!important; } #home.wk-home .wk-home-heading--center .wk-home-intro{ margin-top:17px!important; } #home.wk-home .wk-home-situation{ min-height:0; padding:28px 24px; } #home.wk-home .wk-home-situation h3{ font-size:22px!important; line-height:1.34!important; } #home.wk-home .wk-home-comfort{ padding:70px 0; } #home.wk-home .wk-home-comfort-head{ margin-bottom:36px; text-align:left; } #home.wk-home .wk-home-comfort-head h2{ margin:0!important; font-size:34px!important; line-height:1.22!important; } #home.wk-home .wk-home-comfort-head > p:last-child{ margin:20px 0 0!important; font-size:16px; line-height:1.72!important; } #home.wk-home .wk-home-comfort-step{ grid-template-columns:94px minmax(0,1fr); padding:28px 0; } #home.wk-home .wk-home-comfort-step h3{ font-size:20px!important; line-height:1.38!important; } #home.wk-home .wk-home-comfort-step p{ margin:9px 0 0!important; line-height:1.7!important; } #home.wk-home .wk-home-knowledge{ padding-top:66px; padding-bottom:70px; } #home.wk-home .wk-home-knowledge-head h2{ line-height:1.22!important; } } /* ========================================================= WEBKOMFORT HOME — MOBILE HERO FIX 2026-09-16 Removes obsolete wrapper spacer below the compact header and gives the homepage hero image a controlled 4:3 mobile crop. ========================================================= */ @media (max-width:767px){ #content .wrapper{ padding-top:0!important; } #home.wk-home .wk-home-hero-media{ width:100%; aspect-ratio:4 / 3; overflow:hidden; border-radius:18px; } #home.wk-home .wk-home-hero-media img{ width:100%!important; height:100%!important; aspect-ratio:auto!important; object-fit:cover!important; object-position:center center; } } /* ========================================================= WEBKOMFORT � NAVIGATION FINAL PATCH 2026-09-17 Desktop Contact + mobile navigation hierarchy ========================================================= */ /* Desktop: Contact is a normal global navigation item, not a mega-menu. */ #sidebartop .spc-nav-v12 > .spc-nav-contact > a{ white-space:nowrap; } @media (max-width:767px){ .mobile-menu.spc-mobile-mega{ background:#f5f8fa!important; } /* 1. Top control bar: Home / Search / Close */ .mobile-menu.spc-mobile-mega .spc-mobile-topbar{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; min-height:58px!important; background:#0b2134!important; border-bottom:1px solid rgba(255,255,255,.12)!important; } .mobile-menu.spc-mobile-mega .spc-mobile-top-action{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:5px!important; min-width:0!important; min-height:58px!important; margin:0!important; padding:7px 5px!important; border:0!important; border-right:1px solid rgba(255,255,255,.1)!important; border-radius:0!important; background:transparent!important; color:#fff!important; box-shadow:none!important; text-decoration:none!important; cursor:pointer!important; font:700 11px/1.15 'DM Sans',sans-serif!important; } .mobile-menu.spc-mobile-mega .spc-mobile-top-action:last-child{border-right:0!important;} .mobile-menu.spc-mobile-mega .spc-mobile-top-action i{ margin:0!important; color:#fff!important; font-size:17px!important; line-height:1!important; } .mobile-menu.spc-mobile-mega .spc-mobile-close-icon{ display:block!important; height:18px!important; color:#fff!important; font:300 27px/16px Arial,sans-serif!important; } /* Search belongs to the top control unit and opens directly below it. */ .mobile-menu.spc-mobile-mega .spc-mobile-top-search{ margin:0!important; padding:0!important; border:0!important; border-bottom:1px solid #cddce6!important; border-radius:0!important; background:#fff!important; } .mobile-menu.spc-mobile-mega .spc-mobile-top-search[hidden]{display:none!important;} .mobile-menu.spc-mobile-mega .spc-mobile-top-search .spc-mobile-public-search-body{ padding:13px 14px 14px!important; background:#fff!important; border:0!important; } .mobile-menu.spc-mobile-mega .spc-mobile-top-search .spc-mobile-public-search-field{ padding-top:0!important; } /* 2. Customer zone: Webmail / Account */ .mobile-menu.spc-mobile-mega .spc-mobile-customer-zone{ margin:0!important; padding:0!important; background:#eaf2f6!important; border-bottom:6px solid #dce7ed!important; } .mobile-menu.spc-mobile-mega .spc-mobile-customer-zone .spc-mobile-login-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:0!important; margin:0!important; padding:0!important; border:0!important; } .mobile-menu.spc-mobile-mega .spc-mobile-customer-zone .mobile-action{ min-height:54px!important; margin:0!important; padding:8px 10px!important; border:0!important; border-radius:0!important; color:#fff!important; box-shadow:none!important; font:800 12px/1.2 'DM Sans',sans-serif!important; } .mobile-menu.spc-mobile-mega .spc-mobile-customer-zone .mobile-action.webmail{background:#078c78!important;} .mobile-menu.spc-mobile-mega .spc-mobile-customer-zone .mobile-action.account{background:#1677ea!important;} .mobile-menu.spc-mobile-mega .spc-mobile-customer-zone .mobile-action i{ margin-right:7px!important; color:#fff!important; } .mobile-menu.spc-mobile-mega .spc-mobile-customer-zone .spc-mobile-login-panel{ background:#fff!important; } /* 3. Main navigation remains the familiar six intent groups. */ .mobile-menu.spc-mobile-mega .spc-mobile-main-nav{ margin:0!important; padding:8px 0!important; background:#fff!important; border-bottom:6px solid #dce7ed!important; } .mobile-menu.spc-mobile-mega .spc-mobile-main-nav > .spc-mobile-main-group{ margin:0!important; } .mobile-menu.spc-mobile-mega .spc-mobile-main-nav > .spc-mobile-main-group:last-child{ border-bottom:0!important; } /* 4. Contact zone: direct actions + dedicated Contact page. */ .mobile-menu.spc-mobile-mega .spc-mobile-contact-zone{ padding:12px!important; background:#edf7f5!important; border-top:1px solid #d6e8e4!important; } .mobile-menu.spc-mobile-mega .spc-mobile-direct-contact{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; } .mobile-menu.spc-mobile-mega .spc-mobile-direct-contact > a{ display:flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; min-height:46px!important; padding:9px 8px!important; border:1px solid #c8dfda!important; border-radius:8px!important; background:#fff!important; color:#123b42!important; text-decoration:none!important; font:800 12px/1.2 'DM Sans',sans-serif!important; } .mobile-menu.spc-mobile-mega .spc-mobile-direct-contact > a i{ margin:0!important; color:#078c78!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-page{ display:grid!important; grid-template-columns:auto minmax(0,1fr) auto!important; align-items:center!important; gap:11px!important; min-height:58px!important; margin-top:8px!important; padding:10px 12px!important; border:1px solid #c8dfda!important; border-radius:8px!important; background:#fff!important; color:#102f49!important; text-decoration:none!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-page > i{ margin:0!important; color:#078c78!important; font-size:17px!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-page strong{ display:block!important; color:#102f49!important; font:800 13px/1.25 'DM Sans',sans-serif!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-page small{ display:block!important; margin-top:2px!important; color:#637b8d!important; font:600 11px/1.3 'DM Sans',sans-serif!important; } .mobile-menu.spc-mobile-mega .spc-mobile-contact-arrow{ color:#078c78!important; font-size:18px!important; } /* Obsolete old utility/home/search rows are no longer rendered. */ .mobile-menu.spc-mobile-mega > .spc-mobile-utility, .mobile-menu.spc-mobile-mega > .mobile-menu-home, .mobile-menu.spc-mobile-mega > details.spc-mobile-public-search{ display:none!important; } } /* ========================================================= WEBKOMFORT — NAVIGATION VIEWPORT OWNERSHIP 2026-09-17 One navigation per viewport. Keep this block last. ========================================================= */ @media (min-width:768px){ body > .sb-slidebar.spc-mobile-drawer{ display:none!important; visibility:hidden!important; pointer-events:none!important; } #sidebartop .spc-desktop-nav{ display:flex!important; visibility:visible!important; } } @media (max-width:767px){ #sidebartop .spc-desktop-nav{ display:none!important; visibility:hidden!important; pointer-events:none!important; } body > .sb-slidebar.spc-mobile-drawer.sb-active{ display:block!important; visibility:visible!important; pointer-events:auto!important; } } /* ========================================================= WEBKOMFORT – JOGI / ADATVÉDELMI OLDAL OLVASHATÓSÁG Kizárólag .wk-legal-page alatt hat. ========================================================= */ .wk-legal-page .wk-reading > h2:not(:first-of-type){ margin-top:52px!important; } .wk-legal-page .wk-reading > h3{ margin-top:30px!important; margin-bottom:12px!important; } .wk-legal-page .wk-legal-effective{ margin-top:22px!important; color:#607789!important; font-size:14px!important; } .wk-legal-page .wk-legal-toc{ margin:34px 0 46px; padding:22px 0 22px 22px; border-left:3px solid var(--wk-blue); } .wk-legal-page .wk-legal-toc p{ margin:0 0 10px!important; } .wk-legal-page .wk-legal-toc ul, .wk-legal-page .wk-reading > ul{ margin:0 0 22px 22px; padding:0; list-style:disc; } .wk-legal-page .wk-legal-toc li, .wk-legal-page .wk-reading > ul > li{ margin:7px 0; line-height:1.65; } .wk-legal-page .wk-legal-toc a, .wk-legal-page .wk-reading a{ overflow-wrap:anywhere; } @media(max-width:767px){ .wk-legal-page .wk-reading > h2:not(:first-of-type){ margin-top:42px!important; } .wk-legal-page .wk-reading > h3{ margin-top:26px!important; } .wk-legal-page .wk-legal-toc{ margin:28px 0 38px; padding:18px 0 18px 16px; } } /********************************************************** WEBKOMFORT / LEVELEZES � CUSTOMER SETUP GUIDE **********************************************************/ .wk-mail-help-page{ --wk-mail-border:#d7e4ea; --wk-mail-soft:#f5f9fb; --wk-mail-green:#0b8581; --wk-mail-green-soft:#eef9f8; --wk-mail-blue-soft:#f1f7fc; --wk-mail-text:#526f81; } .wk-mail-help-page .wk-mail-start{ padding-top:clamp(38px,4vw,58px)!important; } .wk-mail-help-page [id]{ scroll-margin-top:110px; } /* INTRO */ .wk-mail-intro{ width:min(900px,100%); margin:0 auto 38px; } .wk-mail-intro .wk-lead{ max-width:850px; } /* IMAP / POP */ .wk-mail-choice{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:start; } .wk-mail-choice-item{ min-width:0; padding:28px; background:#fff; border:1px solid var(--wk-mail-border); } .wk-mail-choice-item--recommended{ padding-top:25px; border-top:4px solid var(--wk-turquoise); } .wk-mail-choice-heading{ margin-bottom:16px; } .wk-mail-choice-heading h3{ margin:9px 0 0!important; color:var(--wk-navy); font-family:var(--spc-font-display); font-size:22px!important; line-height:1.3; } .wk-mail-choice-label{ display:inline-block; color:var(--wk-mail-green); font-size:12px; line-height:1; font-weight:800; letter-spacing:.07em; } .wk-mail-choice-label--neutral{ color:#647c8d; } .wk-mail-choice-item > p{ margin-bottom:0; color:var(--wk-mail-text); line-height:1.65; } /* SERVER SETTINGS */ .wk-mail-settings{ margin-top:26px; border-top:1px solid var(--wk-mail-border); } .wk-mail-settings-group{ padding:22px 0; } .wk-mail-settings-group + .wk-mail-settings-group{ border-top:1px solid var(--wk-mail-border); } .wk-mail-settings-group h4{ margin:0 0 14px!important; color:#173852; font-family:var(--spc-font-display); font-size:17px!important; font-weight:800; } .wk-mail-settings-group--smtp h4{ color:#0b6f7b; } .wk-mail-settings dl{ margin:0; } .wk-mail-settings dl > div{ display:grid; grid-template-columns:minmax(130px,.8fr) minmax(0,1.35fr); gap:20px; align-items:start; padding:10px 0; border-bottom:1px solid #edf2f5; } .wk-mail-settings dl > div:last-child{ border-bottom:0; } .wk-mail-settings dt{ margin:0; color:#718695; font-size:14px; line-height:1.45; font-weight:500; } .wk-mail-settings dd{ min-width:0; margin:0; color:#173852; font-size:14px; line-height:1.45; overflow-wrap:anywhere; } .wk-mail-settings dd strong{ font-weight:800; } /* SMTP WARNING INSIDE SMTP */ .wk-mail-smtp-alert{ margin-top:17px; padding:15px 17px; background:#eef8f8; border-left:3px solid var(--wk-turquoise); color:#456873; font-size:13px; line-height:1.55; } .wk-mail-smtp-alert strong{ display:block; margin-bottom:4px; color:#173852; } .wk-mail-smtp-alert span{ display:block; } /* NOTES */ .wk-mail-note, .wk-mail-warning{ margin-top:4px; padding:16px 18px; font-size:14px; line-height:1.55; } .wk-mail-note{ background:var(--wk-mail-green-soft); border-left:3px solid var(--wk-turquoise); color:#315c63; } .wk-mail-warning{ background:#fff8e8; border-left:3px solid var(--wk-yellow); color:#675528; } .wk-mail-note strong, .wk-mail-warning strong{ margin-right:4px; color:#173852; } /* GUIDE INDEX */ .wk-mail-guide-index{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; width:min(1120px,100%); margin:34px auto 0; } .wk-mail-guide-index-group{ min-width:0; padding:22px 20px; background:#fff; border:1px solid var(--wk-mail-border); } .wk-mail-guide-index-group h3{ margin:0 0 7px!important; color:var(--wk-navy); font-family:var(--spc-font-display); font-size:18px!important; line-height:1.3; } .wk-mail-guide-index-group > p{ min-height:44px; margin:0 0 17px; color:#6a8190; font-size:13px; line-height:1.5; } .wk-mail-guide-links{ display:flex; flex-direction:column; gap:7px; } .wk-mail-guide-links a{ display:block; padding:9px 12px; background:#f5f9fb; color:#175c83; font-size:13px; line-height:1.4; font-weight:800; text-decoration:none!important; transition:background .18s ease,color .18s ease; } .wk-mail-guide-links a:hover{ background:#eaf4f8; color:var(--wk-blue); } /* GUIDE */ .wk-mail-guide{ width:min(1050px,100%); margin:44px auto 0; padding-top:38px; border-top:1px solid var(--wk-mail-border); } .wk-mail-guide:first-of-type{ margin-top:38px; } .wk-mail-guide-title{ width:min(790px,100%); margin-bottom:28px; } .wk-mail-guide-title > span{ display:block; margin-bottom:7px; color:var(--wk-mail-green); font-size:12px; font-weight:800; letter-spacing:.065em; } .wk-mail-guide-title h3{ margin:0 0 10px!important; color:var(--wk-navy); font-family:var(--spc-font-display); font-size:25px!important; line-height:1.25; } .wk-mail-guide-title p{ margin-bottom:0; color:#587384; line-height:1.65; } /* OUTLOOK / PHONE STEPS */ .wk-mail-steps{ margin:0; padding:0; list-style:none; } .wk-mail-steps > li{ display:grid; grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr); gap:36px; align-items:start; padding:32px 0; border-top:1px solid #e2eaf0; } .wk-mail-steps > li:first-child{ padding-top:0; border-top:0; } .wk-mail-step-copy{ min-width:0; padding-top:4px; } .wk-mail-step-copy > strong{ display:block; margin-bottom:8px; color:#173852; font-family:var(--spc-font-display); font-size:17px; line-height:1.4; } .wk-mail-step-copy p{ margin:0 0 10px; color:#607989; font-size:14px; line-height:1.65; } .wk-mail-steps img{ display:block; width:auto; max-width:100%; height:auto; max-height:650px; margin:0 auto; background:#fff; border:1px solid #d8e2e8; } .wk-mail-inline-warning{ margin-top:15px; padding:13px 15px; background:#fff8e8; border-left:3px solid var(--wk-yellow); color:#675528; font-size:13px; line-height:1.55; } .wk-mail-steps--phone > li{ grid-template-columns:minmax(230px,.9fr) minmax(220px,1.1fr); } .wk-mail-steps--phone img{ max-height:640px; } /* IMAGE GRIDS */ .wk-mail-image-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } .wk-mail-image-grid figure{ display:flex; align-items:center; justify-content:center; min-width:0; margin:0; padding:14px; background:#fff; border:1px solid var(--wk-mail-border); } .wk-mail-image-grid img{ display:block; width:auto; max-width:100%; height:auto; margin:auto; } .wk-mail-compare-images{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .wk-mail-compare-images figure{ min-width:0; margin:0; } .wk-mail-compare-images figcaption{ margin-bottom:10px; color:#173852; font-family:var(--spc-font-display); font-size:16px; font-weight:800; } .wk-mail-compare-images img{ display:block; width:auto; max-width:100%; height:auto; margin:0 auto; background:#fff; border:1px solid var(--wk-mail-border); } .wk-mail-single-image{ margin-top:24px; } .wk-mail-single-image img{ display:block; width:auto; max-width:100%; height:auto; margin:0 auto; background:#fff; border:1px solid var(--wk-mail-border); } /* CALLOUT */ .wk-mail-callout{ width:min(790px,100%); margin-top:26px; padding:18px 20px; background:#f3faf9; border-left:3px solid var(--wk-turquoise); } .wk-mail-callout > strong{ display:block; margin-bottom:5px; color:#173852; } .wk-mail-callout p{ margin:0; color:#587384; font-size:14px; line-height:1.6; } /* WEBMAIL */ .wk-mail-webmail{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) auto; gap:28px; align-items:center; width:min(900px,100%); margin:34px auto 0; padding:25px 0; border-top:1px solid var(--wk-mail-border); border-bottom:1px solid var(--wk-mail-border); } .wk-mail-webmail-data{ min-width:0; } .wk-mail-webmail-data span, .wk-mail-webmail-data strong{ display:block; } .wk-mail-webmail-data span{ margin-bottom:5px; color:#728695; font-size:13px; } .wk-mail-webmail-data strong{ color:#173852; font-size:16px; overflow-wrap:anywhere; } .wk-mail-webmail .wk-actions{ margin:0; } /* SMTP SUMMARY */ .wk-mail-smtp-summary{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:min(900px,100%); margin:34px auto 0; border-top:1px solid var(--wk-mail-border); border-left:1px solid var(--wk-mail-border); } .wk-mail-smtp-summary > div{ min-width:0; padding:20px; background:#fff; border-right:1px solid var(--wk-mail-border); border-bottom:1px solid var(--wk-mail-border); } .wk-mail-smtp-summary span, .wk-mail-smtp-summary strong{ display:block; } .wk-mail-smtp-summary span{ margin-bottom:5px; color:#718695; font-size:12px; line-height:1.4; font-weight:700; text-transform:uppercase; letter-spacing:.035em; } .wk-mail-smtp-summary strong{ color:#173852; font-size:16px; line-height:1.45; overflow-wrap:anywhere; } .wk-mail-guide--compact{ width:min(900px,100%); } /* ACCOUNT MANAGEMENT */ .wk-mail-account-action{ justify-content:center; margin-top:30px; } /* TABLET */ @media(max-width:1000px){ .wk-mail-guide-index{ grid-template-columns:repeat(2,minmax(0,1fr)); } .wk-mail-guide-index-group > p{ min-height:0; } } @media(max-width:900px){ .wk-mail-choice{ grid-template-columns:1fr; } .wk-mail-steps > li, .wk-mail-steps--phone > li{ grid-template-columns:1fr; gap:20px; } .wk-mail-step-copy{ padding-top:0; } .wk-mail-webmail{ grid-template-columns:repeat(2,minmax(0,1fr)); } .wk-mail-webmail .wk-actions{ grid-column:1 / -1; } } /* MOBILE */ @media(max-width:699px){ .wk-mail-help-page .wk-mail-start{ padding-top:30px!important; } .wk-mail-help-page [id]{ scroll-margin-top:80px; } .wk-mail-intro{ margin-bottom:28px; } .wk-mail-choice{ gap:14px; } .wk-mail-choice-item{ padding:21px 18px; } .wk-mail-choice-item--recommended{ padding-top:18px; } .wk-mail-choice-heading h3{ font-size:20px!important; } .wk-mail-settings dl > div{ grid-template-columns:1fr; gap:3px; padding:11px 0; } .wk-mail-settings dt{ font-size:12px; font-weight:700; } .wk-mail-settings dd{ font-size:15px; } .wk-mail-smtp-alert{ padding:14px 15px; } .wk-mail-note strong, .wk-mail-warning strong{ display:block; margin:0 0 4px; } .wk-mail-guide-index{ grid-template-columns:1fr; gap:12px; } .wk-mail-guide-index-group{ padding:20px 18px; } .wk-mail-guide{ margin-top:32px; padding-top:28px; } .wk-mail-guide-title h3{ font-size:22px!important; } .wk-mail-steps > li{ padding:25px 0; } .wk-mail-image-grid, .wk-mail-compare-images{ grid-template-columns:1fr; } .wk-mail-image-grid{ gap:12px; } .wk-mail-webmail{ grid-template-columns:1fr; gap:18px; } .wk-mail-webmail .wk-actions{ grid-column:auto; } .wk-mail-smtp-summary{ grid-template-columns:1fr; } } /* ========================================================= WEBKOMFORT / RENDELES V7 – EGYSÉGES ÉRTÉKESÍTÉSI FOLYAMAT presentation only; legacy DOM/JS hooks unchanged ========================================================= */ #rendeles{ --wk-order-bg:#f5f8fa; --wk-order-card:#fff; --wk-order-soft:#f0f5f7; --wk-order-border:#cfe0ea; --wk-order-text:#082d4d; --wk-order-muted:#627c91; --wk-order-accent:#0b9292; width:min(1180px,calc(100% - 32px))!important; margin:28px auto 54px!important; background:var(--wk-order-bg)!important; border:1px solid var(--wk-order-border); border-radius:24px; overflow:visible; color:var(--wk-order-text); } #rendeles .fejlec, #rendeles .content, #rendeles .content .container-fluid, #rendeles .content .adatok{background:transparent!important;} #rendeles .fejlec{width:auto!important;margin:0!important;padding:34px 40px 24px!important;border:0!important;box-shadow:none!important;} #rendeles .fejlec .cim{font-size:32px!important;line-height:1.15!important;margin:0 0 10px!important;padding:0!important;color:var(--wk-order-text)!important;font-weight:800!important;} #rendeles .wk-order-intro{max-width:820px;margin:0;color:#385b73;font-size:16px;line-height:1.65;} #rendeles .wk-order-note{display:inline-block;margin:16px 0 0;padding:9px 12px;border-radius:10px;background:#e7f5f4;color:#226b70;font-size:13px;font-weight:700;} #rendeles .content{padding:0 40px 40px!important;margin:0!important;} #rendeles .content>.container-fluid{padding:0!important;} #rendeles .content .cim{background:transparent!important;padding:26px 0 14px!important;margin:0!important;text-align:left!important;font-size:25px!important;line-height:1.25!important;color:var(--wk-order-text)!important;font-weight:800!important;} /* szolgáltatás blokk: egy egység, visszafogott kosár-kezelés */ #rendeles .content .add{background:transparent!important;padding:0 0 14px!important;margin:0!important;} #rendeles .content .add p{margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:#177ca0!important;font-size:14px!important;font-weight:700!important;} #rendeles .content .add p:hover{background:transparent!important;color:#075c7b!important;} #rendeles .content .add .icon-plus{font-style:normal!important;} #rendeles .content .tablazat{margin:0!important;display:grid;gap:12px;} #rendeles .content .tablazat .line{ position:relative!important;display:grid!important; grid-template-columns:minmax(230px,1.65fr) minmax(120px,.65fr) minmax(150px,.85fr) minmax(130px,.72fr) minmax(145px,.8fr) minmax(145px,.72fr)!important; gap:14px!important;align-items:end!important; margin:0!important;padding:22px 24px!important;background:var(--wk-order-card)!important; border:1px solid var(--wk-order-border)!important;border-radius:16px!important; color:var(--wk-order-text)!important;line-height:1.35!important;box-shadow:0 6px 20px rgba(8,45,77,.035); } #rendeles .content .tablazat .line>div{float:none!important;width:auto!important;max-width:none!important;padding:0!important;margin:0!important;position:relative;} #rendeles .content .tablazat .line>div[data-num="1"]{grid-column:1 / -2!important;display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;min-height:0;} #rendeles .content .tablazat .line>div[data-num="2"]{grid-column:1 / 3!important;} #rendeles .content .tablazat .line>div[data-num="3"]{grid-column:auto!important;} #rendeles .content .tablazat .line>div[data-num="7"]{grid-column:auto!important;} #rendeles .content .tablazat .line>div[data-num="4"]{grid-column:auto!important;} #rendeles .content .tablazat .line>div[data-num="5"]{grid-column:auto!important;} #rendeles .content .tablazat .line>div.ar{position:absolute!important;right:24px!important;top:20px!important;width:auto!important;min-width:130px!important;text-align:right!important;color:var(--wk-order-text)!important;font-size:19px!important;line-height:1.2!important;} #rendeles .content .tablazat .line>div.ar font{display:block;margin-top:5px;color:var(--wk-order-muted)!important;font-size:12px!important;font-weight:600!important;} #rendeles .content .tablazat .line .delete-item{display:inline-block!important;margin:6px 0 0 8px!important;vertical-align:middle;} #rendeles .content .tablazat span.domain{display:inline-block;padding:10px 0;color:var(--wk-order-text)!important;font-size:16px;} #rendeles .content .tablazat .ujdom{display:block;margin:0 0 8px!important;color:#d94b3b!important;font-weight:700;text-decoration:none!important;} #rendeles .content .tablazat .line .title{display:flex!important;align-items:center;min-height:30px;margin:0 0 6px!important;color:var(--wk-order-muted)!important;font-size:11px!important;line-height:1.2!important;text-transform:uppercase;letter-spacing:.025em;font-weight:800;} #rendeles .content .tablazat .line select, #rendeles .content .tablazat .line .valaszto{height:46px!important;min-height:46px!important;margin:0!important;padding:0 42px 0 13px!important;border:1px solid #bdd4e2!important;border-radius:10px!important;background-color:#fff!important;color:var(--wk-order-text)!important;font-size:15px!important;line-height:44px!important;box-sizing:border-box!important;} #rendeles .content .tablazat .line .valaszto{background:url('/pics/down-arrow.png') no-repeat center right 13px #fff!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #rendeles .content .tablazat .line .icon-help-1{position:absolute!important;right:5px!important;top:4px!important;margin:0!important;color:#0785a2!important;font-size:16px!important;z-index:2;} #rendeles .content .tablazat .line .help{top:30px;right:0;min-width:280px;max-width:340px;border:1px solid var(--wk-order-border)!important;border-radius:10px;background:#fff!important;color:#385b73!important;box-shadow:0 10px 28px rgba(8,45,77,.14);} /* domain keresés: teljes szélességű alpanel, nem keskeny oszlop */ #rendeles .content .tablazat .rejtett{flex:1 1 100%!important;width:100%!important;margin:0!important;padding:16px!important;background:var(--wk-order-soft)!important;border-radius:12px!important;box-sizing:border-box;} #rendeles .content .tablazat .rejtett .form{display:flex!important;gap:10px!important;align-items:center!important;margin:0 0 12px!important;} #rendeles .content .tablazat .rejtett p input[type="text"]{flex:1!important;width:auto!important;min-width:0!important;height:44px!important;margin:0!important;padding:0 14px!important;text-align:left!important;background:#fff!important;border:1px solid #bdd4e2!important;border-radius:9px!important;} #rendeles .content .tablazat .rejtett .gomb{height:44px!important;line-height:44px!important;margin:0!important;padding:0 20px!important;border:0!important;border-radius:9px!important;background:var(--wk-order-accent)!important;color:#fff!important;text-transform:none!important;font-weight:800;} #rendeles .content .tablazat .rejtett .ajax{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;} #rendeles .content .tablazat .rejtett .ajax>.title, #rendeles .content .tablazat .rejtett .ajax>.free, #rendeles .content .tablazat .rejtett .ajax>.transfer{grid-column:1/-1;} #rendeles .content .tablazat .rejtett .domline{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;margin:0!important;padding:8px 4px!important;border-bottom:1px solid #d8e4eb;min-width:0;} #rendeles .content .tablazat .rejtett .domline .product{margin:0!important;padding:0!important;overflow-wrap:anywhere;color:#315b75;} #rendeles .content .tablazat .rejtett .domline .ar{margin:0!important;white-space:nowrap;} #rendeles .content .tablazat .rejtett .check{white-space:nowrap;font-weight:700;} /* szolgáltatás-választó overlay */ #rendeles .content .tablazat .line .lenyilo{left:0!important;top:calc(100% + 6px)!important;width:min(620px,calc(100vw - 60px))!important;max-height:420px!important;min-width:0!important;border:1px solid var(--wk-order-border)!important;border-radius:12px!important;background:#fff!important;box-shadow:0 16px 35px rgba(8,45,77,.18)!important;overflow-y:auto!important;z-index:300!important;} #rendeles .content .tablazat .line .lenyilo .box{padding:15px 18px!important;border-bottom:1px solid #e2ebf0!important;background:#fff!important;color:var(--wk-order-text)!important;} #rendeles .content .tablazat .line .lenyilo .box h1{padding:0!important;margin:0 0 5px!important;color:var(--wk-order-text)!important;font-size:16px!important;line-height:1.35!important;} #rendeles .content .tablazat .line .lenyilo .leiras{margin:0!important;color:#587187!important;} #rendeles .content .tablazat .line .lenyilo .leiras *{color:#587187!important;} #rendeles .content .tablazat .line .lenyilo .box:hover{background:#edf7f7!important;color:var(--wk-order-text)!important;} #rendeles .content .tablazat .line .lenyilo .box:hover h1{color:#086e78!important;} #rendeles .content .tablazat .line .lenyilo .box:hover .leiras, #rendeles .content .tablazat .line .lenyilo .box:hover .leiras *{color:#385b73!important;} /* összesítő: a szolgáltatásblokk része, nem vizuális fal */ #rendeles .content .osszesen{margin:10px 0 0!important;padding:11px 18px!important;background:#e8f1f5!important;border:1px solid var(--wk-order-border)!important;border-radius:12px!important;line-height:1.25!important;} #rendeles .content .osszesen p{margin:0!important;text-align:right!important;color:var(--wk-order-text)!important;font-size:18px!important;font-weight:800!important;} #rendeles .content .osszesen p span{font-size:22px!important;} #rendeles .content .osszesen font{font-size:12px!important;color:var(--wk-order-muted)!important;font-weight:600!important;} /* megrendelő adatai: egyetlen összefüggő blokk, rendezett belső grid */ #rendeles .content .adatok{padding:0!important;margin:0!important;} #rendeles .content .adatok form{padding:24px!important;background:#fff!important;border:1px solid var(--wk-order-border)!important;border-radius:16px!important;box-shadow:0 6px 20px rgba(8,45,77,.035);} #rendeles .content .adatok form>.row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;margin:0!important;} #rendeles .content .adatok form>.row>[class*="col-"]{float:none!important;width:auto!important;max-width:none!important;flex:none!important;padding:0!important;margin:0!important;} #rendeles .content .adatok .keret{height:100%;box-sizing:border-box;margin:0!important;padding:20px!important;background:var(--wk-order-soft)!important;border:1px solid #d8e5ec!important;border-radius:12px!important;} #rendeles .content .adatok .keret h1{margin:0 0 16px!important;color:var(--wk-order-text)!important;font-size:18px!important;line-height:1.25!important;} #rendeles .content .adatok .keret p{margin:0 0 12px!important;color:#5c7487!important;font-size:12px!important;line-height:1.45!important;} #rendeles .content .adatok input:not([type="checkbox"]),#rendeles .content .adatok select,#rendeles .content .adatok textarea{width:100%!important;box-sizing:border-box!important;margin:5px 0 0!important;border:1px solid #bfd5e2!important;border-radius:8px!important;background:#fff!important;color:var(--wk-order-text)!important;font-size:14px!important;} #rendeles .content .adatok input:not([type="checkbox"]),#rendeles .content .adatok select{height:43px!important;padding:0 12px!important;} #rendeles .content .adatok textarea{height:130px!important;padding:12px!important;resize:vertical!important;} #rendeles .content .adatok input[type="checkbox"]{width:18px!important;height:18px!important;margin:0 7px 0 0!important;vertical-align:middle;} #rendeles .content .adatok .keret span{position:static!important;top:auto!important;font-size:13px!important;vertical-align:middle;} #rendeles .content .adatok form>p.cim{padding:28px 0 12px!important;font-size:20px!important;} #rendeles .content .adatok form>.keret{height:auto!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;} #rendeles .payment{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px!important;text-align:left!important;} #rendeles .payment div.main{width:auto!important;max-width:none!important;margin:0!important;padding:18px!important;border:1px solid #d5e3ea!important;border-radius:11px!important;background:#fff!important;text-align:left!important;} #rendeles .content .adatok .payment p{text-align:left!important;margin:0!important;color:var(--wk-order-text)!important;font-family:var(--spc-font-ui)!important;} #rendeles .payment div.leiras{margin-top:14px!important;color:#526c80!important;font-family:var(--spc-font-ui)!important;line-height:1.55;} #rendeles .payment img{margin:12px 0 0;max-width:180px;max-height:55px;} #rendeles .content .adatok .center{margin:22px 0 0!important;text-align:center!important;} #rendeles .content .adatok .megrendelem{display:inline-flex!important;align-items:center;justify-content:center;min-width:220px;min-height:48px;padding:0 24px!important;border-radius:10px!important;background:var(--wk-order-accent)!important;color:#fff!important;font-weight:800!important;text-transform:none!important;} #rendeles label.error{display:block!important;margin:5px 0 0!important;color:#c83f32!important;font-size:12px!important;} @media(max-width:1050px){ #rendeles .content .tablazat .line{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start!important;} #rendeles .content .tablazat .line>div[data-num="1"],#rendeles .content .tablazat .line>div[data-num="2"]{grid-column:1/-1!important;} #rendeles .content .tablazat .line>div.ar{position:static!important;grid-column:1/-1!important;text-align:right!important;} } @media(max-width:760px){ #rendeles{width:calc(100% - 20px)!important;margin:12px auto 30px!important;border-radius:16px;} #rendeles .fejlec{padding:24px 18px 18px!important;} #rendeles .fejlec .cim{font-size:27px!important;} #rendeles .content{padding:0 18px 24px!important;} #rendeles .content .cim{font-size:22px!important;padding-top:20px!important;} #rendeles .content .tablazat .line{display:block!important;padding:18px!important;} #rendeles .content .tablazat .line>div{margin:0 0 14px!important;} #rendeles .content .tablazat .line>div.ar{text-align:left!important;margin-bottom:0!important;} #rendeles .content .tablazat .rejtett .form{display:grid!important;grid-template-columns:1fr!important;} #rendeles .content .tablazat .rejtett .ajax{grid-template-columns:1fr!important;} #rendeles .content .tablazat .line .lenyilo{width:100%!important;max-width:100%!important;} #rendeles .content .adatok form{padding:16px!important;} #rendeles .content .adatok form>.row,#rendeles .payment{grid-template-columns:1fr!important;} #rendeles .content .adatok .keret{padding:16px!important;} } /* ========================================================= WEBKOMFORT / RENDELES V8 – célzott elrendezési korrekciók ========================================================= */ /* A rendelési felület ne tapadjon a globális navigációhoz. */ #rendeles{ margin-top:48px!important; } /* Megrendelői adatok: determinisztikus 2x2 rács. A dinamikusan elrejtett Domain tulajdonosa blokk nem tolhatja el a többit. */ #rendeles .content .adatok form>.row>div:nth-child(1){ grid-column:1!important; grid-row:1!important; } #rendeles .content .adatok form>.row>div:nth-child(2){ grid-column:2!important; grid-row:1!important; } #rendeles .content .adatok form>.row>div:nth-child(3){ grid-column:1!important; grid-row:2!important; } #rendeles .content .adatok form>.row>div:nth-child(4){ grid-column:2!important; grid-row:2!important; } /* Domain találatok: domain balra, ár + választás jobbra, valódi térközzel. */ #rendeles .content .tablazat .rejtett .domline{ display:block!important; padding:0!important; } #rendeles .content .tablazat .rejtett .domline>.row.inline{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; gap:18px!important; align-items:center!important; width:100%!important; margin:0!important; padding:9px 0!important; } #rendeles .content .tablazat .rejtett .domline>.row.inline>[class*="col-"]{ float:none!important; width:auto!important; max-width:none!important; padding:0!important; margin:0!important; } #rendeles .content .tablazat .rejtett .domline>.row.inline>[class*="col-"]:last-child{ display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:12px!important; white-space:nowrap!important; } #rendeles .content .tablazat .rejtett .domline .ar{ position:static!important; display:inline-block!important; width:auto!important; min-width:0!important; margin:0!important; padding:0!important; color:var(--wk-order-muted)!important; font-size:13px!important; line-height:1.3!important; text-align:right!important; white-space:nowrap!important; } #rendeles .content .tablazat .rejtett .domline .check{ display:inline-block!important; margin:0!important; padding:0!important; color:#087d8a!important; font-weight:800!important; text-decoration:underline!important; white-space:nowrap!important; } @media(max-width:760px){ #rendeles{margin-top:28px!important;} #rendeles .content .adatok form>.row>div:nth-child(n){ grid-column:1!important; grid-row:auto!important; } #rendeles .content .tablazat .rejtett .domline>.row.inline{ grid-template-columns:minmax(0,1fr) auto!important; gap:10px!important; } #rendeles .content .tablazat .rejtett .domline>.row.inline>[class*="col-"]:last-child{ gap:8px!important; } } /* ========================================================= WEBKOMFORT / RENDELES V9 – domainlista + oldalháttér + felső ritmus ========================================================= */ /* A rendelési oldal egyetlen, nagyon világos kék felületet kap. */ body:has(#rendeles){ background:#f7fafc!important; } /* A globális fejléc után garantált vizuális légrés. */ #rendeles{ position:relative!important; top:28px!important; margin-top:0!important; margin-bottom:82px!important; } /* Domain találatok: minden találat egy egyértelmű, egy soros egység. */ #rendeles .content .tablazat .rejtett .domline>.row.inline{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:20px!important; width:100%!important; min-height:54px!important; margin:0!important; padding:8px 0!important; } #rendeles .content .tablazat .rejtett .domline>.row.inline>[class*="col-"]{ display:block!important; float:none!important; width:auto!important; max-width:none!important; min-width:0!important; margin:0!important; padding:0!important; text-align:left!important; } #rendeles .content .tablazat .rejtett .domline>.row.inline>[class*="col-"]:first-child{ grid-column:1!important; } #rendeles .content .tablazat .rejtett .domline>.row.inline>[class*="col-"]:last-child{ grid-column:2!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:12px!important; } #rendeles .content .tablazat .rejtett .domline .product{ display:block!important; float:none!important; width:auto!important; margin:0!important; padding:0!important; text-align:left!important; color:#315b75!important; font-size:15px!important; line-height:1.35!important; overflow-wrap:anywhere!important; } #rendeles .content .tablazat .rejtett .domline .ar{ position:static!important; display:inline-block!important; float:none!important; width:auto!important; min-width:76px!important; margin:0!important; padding:0!important; text-align:right!important; color:#627c91!important; font-size:13px!important; line-height:1.3!important; white-space:nowrap!important; } /* A „kérem” tényleges választógombként jelenik meg; a JS hook változatlan. */ #rendeles .content .tablazat .rejtett .domline .check{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:72px!important; min-height:34px!important; box-sizing:border-box!important; margin:0!important; padding:7px 13px!important; border:1px solid #0b9292!important; border-radius:8px!important; background:#fff!important; color:#087b82!important; font-size:13px!important; line-height:1!important; font-weight:800!important; text-decoration:none!important; cursor:pointer!important; white-space:nowrap!important; transition:background .15s ease,color .15s ease,border-color .15s ease!important; } #rendeles .content .tablazat .rejtett .domline .check:hover{ background:#0b9292!important; border-color:#0b9292!important; color:#fff!important; } @media(max-width:760px){ #rendeles{ top:18px!important; margin-bottom:58px!important; } #rendeles .content .tablazat .rejtett .domline>.row.inline{ grid-template-columns:minmax(0,1fr) auto!important; gap:10px!important; } #rendeles .content .tablazat .rejtett .domline>.row.inline>[class*="col-"]:last-child{ gap:7px!important; } #rendeles .content .tablazat .rejtett .domline .ar{ min-width:0!important; font-size:12px!important; } #rendeles .content .tablazat .rejtett .domline .check{ min-width:62px!important; padding:7px 10px!important; } } /* ========================================================= WEBKOMFORT / RENDELES V10 – domain állapot + validáció + ÁSZF ========================================================= */ /* A kiválasztott/hoverelt domain neve maradjon jól olvasható. A legacy .active háttér ne húzódjon végig a teljes soron. */ #rendeles .content .tablazat .rejtett .domline .product, #rendeles .content .tablazat .rejtett .domline .product:hover, #rendeles .content .tablazat .rejtett .domline .product.active, #rendeles .content .tablazat .rejtett .domline .active.product{ display:inline-block!important; width:auto!important; max-width:100%!important; padding:4px 7px!important; margin:0!important; border-radius:6px!important; background:transparent!important; color:#315b75!important; font-weight:500!important; text-decoration:none!important; } #rendeles .content .tablazat .rejtett .domline .product.active, #rendeles .content .tablazat .rejtett .domline .active.product{ background:#dff2f2!important; color:#174e61!important; font-weight:700!important; } /* Kötelező mezők validációja: a hiba mindig az adott mezőhöz tartozzon. */ #rendeles .content .adatok label.error{ display:block!important; margin:6px 0 0!important; color:#c83f32!important; font-size:12px!important; line-height:1.35!important; font-weight:700!important; } #rendeles .content .adatok input.error:not([type="checkbox"]), #rendeles .content .adatok select.error, #rendeles .content .adatok textarea.error{ border-color:#d95a4a!important; box-shadow:0 0 0 2px rgba(217,90,74,.08)!important; } /* ÁSZF elfogadás a fizetési mód és a végleges rendelés között. */ #rendeles .wk-order-terms{ margin:20px 0 0!important; padding:15px 17px!important; border:1px solid #d5e3ea!important; border-radius:10px!important; background:#f8fbfc!important; } #rendeles .wk-order-terms-label{ display:flex!important; align-items:flex-start!important; gap:10px!important; margin:0!important; color:#31556c!important; font-size:13px!important; line-height:1.5!important; cursor:pointer!important; } #rendeles .wk-order-terms-label input[type="checkbox"]{ flex:0 0 18px!important; width:18px!important; height:18px!important; margin:1px 0 0!important; } #rendeles .wk-order-terms-label span{ display:block!important; position:static!important; font-size:13px!important; } #rendeles .wk-order-terms-label a{ color:#087d8a!important; font-weight:800!important; text-decoration:underline!important; } #rendeles .wk-order-terms label.error{ margin:7px 0 0 28px!important; } /* ========================================================= WEBKOMFORT / RENDELES V11 – egységes oldalháttér ========================================================= */ /* A teljes rendelési oldal környezete ugyanazt a halvány kék hátteret kapja. A rendelési űrlap/panelek saját 1px-es keretei megmaradnak. */ html:has(#rendeles), body:has(#rendeles), body:has(#rendeles) #wrapper, body:has(#rendeles) main{ background:#f7fbfc!important; } /* ========================================================= WEBKOMFORT / RENDELES V12 – teljes oldal egységes háttér ========================================================= */ html:has(#rendeles), body:has(#rendeles), body:has(#rendeles) #sb-site, body:has(#rendeles) #content, body:has(#rendeles) #content > .wrapper.page-wrapper, body:has(#rendeles) #content > .wrapper.page-wrapper > .content { background-color:#cfe2e7!important; } /* A régi wrapper fehér kerete különben fehér sávként megmarad. */ body:has(#rendeles) #content > .wrapper.page-wrapper { border-color:#f7fbfc!important; } /* A rendelési folyamat saját felülete is ugyanabba a háttérbe simul. */ body:has(#rendeles) #rendeles, body:has(#rendeles) #rendeles > .content { background-color:#f7fbfc!important; } /* WEBKOMFORT / RENDELES V13 - mobile focus + registrar transfer */ #rendeles .content .tablazat .rejtett .transfer .wk-transfer-heading{margin:14px 0 8px!important;padding:14px 16px!important;border:1px solid #efc9c3!important;border-left:4px solid #e44b3c!important;border-radius:10px!important;background:#fff7f5!important;color:#243f55!important;line-height:1.45!important;} #rendeles .content .tablazat .rejtett .transfer .wk-transfer-heading>strong{display:block!important;margin:0 0 4px!important;color:#c93e31!important;font-size:13px!important;font-weight:800!important;letter-spacing:.035em!important;} #rendeles .content .tablazat .rejtett .transfer .wk-transfer-heading>span{display:block!important;color:#405d72!important;font-size:13px!important;} #rendeles .content .tablazat .rejtett .transfer .wk-transfer-heading>span strong{color:#243f55!important;font-weight:800!important;} @media(max-width:760px){ #rendeles input:not([type="checkbox"]):not([type="radio"]),#rendeles select,#rendeles textarea{font-size:16px!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;} #rendeles .content .tablazat .rejtett input[type="text"]{font-size:16px!important;width:100%!important;min-width:0!important;max-width:100%!important;} #rendeles .content .tablazat .rejtett .form,#rendeles .content .tablazat .rejtett .ajax,#rendeles .content .tablazat .rejtett .transfer,#rendeles .content .tablazat .rejtett .free{min-width:0!important;max-width:100%!important;} #rendeles .content .tablazat .rejtett .transfer .wk-transfer-heading{padding:13px 14px!important;} } /* ========================================================= WEBKOMFORT / RENDELES – domain státusz + végleges mobil UX presentation only; legacy JS/PHP hooks unchanged ========================================================= */ /* Szabad domainek: a regisztrátorváltással azonos súlyú, zöld státuszblokk. */ #rendeles .content .tablazat .rejtett .free .wk-free-heading{ margin:14px 0 8px!important; padding:14px 16px!important; border:1px solid #bfe3d1!important; border-left:4px solid #2fa36b!important; border-radius:10px!important; background:#f2fbf6!important; color:#243f55!important; line-height:1.45!important; } #rendeles .content .tablazat .rejtett .free .wk-free-heading>strong{ display:block!important; margin:0 0 4px!important; color:#218356!important; font-size:13px!important; font-weight:800!important; letter-spacing:.035em!important; } #rendeles .content .tablazat .rejtett .free .wk-free-heading>span{ display:block!important; color:#405d72!important; font-size:13px!important; } /* A domain neve önmagában mutassa az állapotot. */ #rendeles .content .tablazat .rejtett .free .domline .product, #rendeles .content .tablazat .rejtett .free .domline .product:hover, #rendeles .content .tablazat .rejtett .free .domline .product.active{ background:#e8f7ee!important; color:#176b45!important; border:1px solid #c9ead7!important; } #rendeles .content .tablazat .rejtett .transfer .domline .product, #rendeles .content .tablazat .rejtett .transfer .domline .product:hover, #rendeles .content .tablazat .rejtett .transfer .domline .product.active{ background:#fff0ed!important; color:#a83c31!important; border:1px solid #f1d0ca!important; } /* A rendelés oldalon semmilyen tartalom ne tudja szélesebbre húzni a viewportot. */ html:has(#rendeles), body:has(#rendeles){ max-width:100%!important; overflow-x:hidden!important; } #rendeles, #rendeles *, #rendeles *::before, #rendeles *::after{ box-sizing:border-box; } #rendeles .row, #rendeles [class*="col-"], #rendeles .tablazat, #rendeles .line, #rendeles .rejtett, #rendeles .ajax, #rendeles .free, #rendeles .transfer, #rendeles .adatok, #rendeles form, #rendeles .keret, #rendeles .payment, #rendeles .payment .main{ min-width:0!important; max-width:100%!important; } @media(max-width:760px){ /* Kis, következetes oldalsó térköz: sem kifutás, sem kijelzőszélre tapadó szöveg. */ #rendeles{ width:calc(100% - 16px)!important; max-width:calc(100% - 16px)!important; margin-left:8px!important; margin-right:8px!important; overflow:hidden!important; } #rendeles .fejlec{ padding-left:14px!important; padding-right:14px!important; } #rendeles .content{ padding-left:12px!important; padding-right:12px!important; } #rendeles .content>.container-fluid{ width:100%!important; max-width:100%!important; margin:0!important; padding:0!important; } #rendeles .content .tablazat .line{ width:100%!important; max-width:100%!important; padding:14px!important; overflow:visible!important; } #rendeles .content .tablazat .line>div, #rendeles .content .tablazat .line>div[data-num="1"], #rendeles .content .tablazat .line>div[data-num="2"]{ width:100%!important; max-width:100%!important; min-width:0!important; } #rendeles .content .tablazat .rejtett{ width:100%!important; max-width:100%!important; padding:12px!important; overflow:hidden!important; } #rendeles .content .tablazat .rejtett .form{ width:100%!important; max-width:100%!important; gap:8px!important; } #rendeles .content .tablazat .rejtett .ajax, #rendeles .content .tablazat .rejtett .free, #rendeles .content .tablazat .rejtett .transfer{ width:100%!important; max-width:100%!important; overflow:hidden!important; } #rendeles .content .tablazat .rejtett .free .wk-free-heading, #rendeles .content .tablazat .rejtett .transfer .wk-transfer-heading{ width:100%!important; margin:12px 0 8px!important; padding:12px!important; } #rendeles .content .tablazat .rejtett .domline{ width:100%!important; max-width:100%!important; padding:10px 0!important; } #rendeles .content .tablazat .rejtett .domline>.row.inline{ width:100%!important; max-width:100%!important; margin:0!important; } #rendeles .content .tablazat .rejtett .domline .product{ max-width:100%!important; overflow-wrap:anywhere!important; } #rendeles .content .tablazat .line .lenyilo{ left:0!important; right:auto!important; width:100%!important; max-width:100%!important; } /* Adatlap: csak minimális, de mindenhol azonos belső margó. */ #rendeles .content .adatok form{ width:100%!important; max-width:100%!important; padding:12px!important; overflow:hidden!important; } #rendeles .content .adatok form>.row{ width:100%!important; max-width:100%!important; margin:0!important; gap:12px!important; } #rendeles .content .adatok form>.row>[class*="col-"]{ width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; padding:0!important; } #rendeles .content .adatok .keret{ width:100%!important; max-width:100%!important; padding:13px!important; } #rendeles .content .adatok .keret h1, #rendeles .content .adatok .keret p, #rendeles .content .adatok form>p.cim, #rendeles .payment div.leiras{ max-width:100%!important; overflow-wrap:break-word!important; } #rendeles .content .adatok input:not([type="checkbox"]):not([type="radio"]), #rendeles .content .adatok select, #rendeles .content .adatok textarea{ display:block!important; width:100%!important; max-width:100%!important; min-width:0!important; margin-left:0!important; margin-right:0!important; } #rendeles .payment{ width:100%!important; max-width:100%!important; gap:10px!important; } #rendeles .payment div.main{ width:100%!important; max-width:100%!important; padding:14px!important; overflow:hidden!important; } #rendeles .payment img{ width:auto!important; max-width:100%!important; height:auto!important; } #rendeles .wk-order-terms{ width:100%!important; max-width:100%!important; padding:13px!important; } } /* WEBKOMFORT /rendeles – mobil adatlap véglegesítés A külső form-kártya mobilon megszűnik: egyetlen oldalsó margó marad, a mezők 16px-es betűmérete pedig megakadályozza az iOS fókusz-zoomot. */ @media(max-width:760px){ #rendeles .content .adatok{ width:100%!important; max-width:100%!important; margin:0!important; padding:0!important; overflow:visible!important; } #rendeles .content .adatok form{ width:100%!important; max-width:100%!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; overflow:visible!important; } #rendeles .content .adatok form>.row{ width:100%!important; max-width:100%!important; margin:0!important; padding:0!important; } #rendeles .content .adatok .keret{ width:100%!important; max-width:100%!important; margin:0!important; padding:16px!important; } #rendeles .content .adatok input:not([type="checkbox"]):not([type="radio"]), #rendeles .content .adatok select, #rendeles .content .adatok textarea{ width:100%!important; max-width:100%!important; min-width:0!important; margin-left:0!important; margin-right:0!important; font-size:16px!important; } } /* ========================================================= WEBKOMFORT / RENDELES – várakozás + mobil vissza a tetejére presentation only ========================================================= */ @media(max-width:760px){ body:has(#rendeles) #up{ right:14px!important; left:auto!important; bottom:18px!important; width:44px!important; height:44px!important; margin:0!important; padding:0!important; border:1px solid rgba(255,255,255,.22)!important; border-radius:50%!important; background:#123650!important; box-shadow:0 7px 20px rgba(7,35,55,.22)!important; opacity:.92!important; animation:none!important; line-height:44px!important; text-align:center!important; overflow:hidden!important; z-index:90!important; } body:has(#rendeles) #up i{ display:block!important; width:44px!important; height:44px!important; margin:0!important; padding:0!important; color:#fff!important; font-size:28px!important; line-height:44px!important; text-align:center!important; } } /* WEBKOMFORT - GLOBALIS MODERN AJAX LOADER Stabil megoldas: nem fugg a waitMe belso markupjatol. */ #mask{ position:fixed!important; inset:0!important; width:100%!important; height:100%!important; background:rgba(9,37,61,.24)!important; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); z-index:99998!important; } #loader-icon{ position:fixed!important; inset:0!important; width:100%!important; height:100%!important; z-index:99999!important; background:transparent!important; pointer-events:none!important; } /* A regi waitMe rajzolatot elrejtjuk, de maga a loader-icon marad mukodo. */ #loader-icon > p, #loader-icon .waitMe, #loader-icon .waitMe_container, #loader-icon .waitMe_content, #loader-icon .waitMe_progress{ visibility:hidden!important; } /* Feher, kompakt varakozasi kartya + forgo szines gyuru */ #loader-icon::before{ content:""!important; position:absolute!important; top:50%!important; left:50%!important; width:42px!important; height:42px!important; box-sizing:border-box!important; border:5px solid #d9f1ef!important; border-top-color:#0f9f9c!important; border-right-color:#72cfc1!important; border-bottom-color:#087f91!important; border-radius:50%!important; z-index:2!important; transform-origin:50% 50%!important; animation:wk-modern-loader-spin .8s linear infinite!important; } /* A szoveg egyben a feher kartya is. */ #loader-icon::after{ content:"Egy pillanat…"!important; position:absolute!important; top:50%!important; left:50%!important; width:170px!important; height:126px!important; box-sizing:border-box!important; padding:82px 16px 16px!important; transform:translate(-50%,-50%)!important; background:#fff!important; border:1px solid rgba(12,62,91,.10)!important; border-radius:20px!important; box-shadow:0 18px 50px rgba(7,38,61,.20),0 3px 10px rgba(7,38,61,.08)!important; color:#0c3e5b!important; font-family:'DM Sans',Arial,sans-serif!important; font-size:14px!important; font-weight:700!important; line-height:1.25!important; text-align:center!important; white-space:nowrap!important; z-index:1!important; } @keyframes wk-modern-loader-spin{ from{ transform:translate(-50%,-68%) rotate(0deg); } to{ transform:translate(-50%,-68%) rotate(360deg); } } @media(max-width:767px){ #loader-icon::after{ width:156px!important; height:118px!important; padding-top:77px!important; border-radius:18px!important; font-size:13px!important; } #loader-icon::before{ width:40px!important; height:40px!important; } } /* ========================================================== WEBKOMFORT HOME – SHOWCASE 2026-09 Main-page-only presentation layer. Functional hooks unchanged. ========================================================== */ #home.wk-home--showcase{--h-navy:#082f4f;--h-blue:#1677ea;--h-cyan:#18bfc0;--h-soft:#f2f8fa;--h-border:#dce8ee;overflow:hidden;color:#294f67} #home.wk-home--showcase h1,#home.wk-home--showcase h2,#home.wk-home--showcase h3{font-family:"Plus Jakarta Sans",Arial,sans-serif;color:var(--h-navy);letter-spacing:-.035em} #home.wk-home--showcase .wk-home-hero{padding:clamp(64px,7vw,108px) 0;background:linear-gradient(135deg,#eef7fa 0%,#f7fbfc 62%,#edf8f6 100%)} #home.wk-home--showcase .wk-home-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);gap:clamp(48px,6vw,90px);align-items:center} #home.wk-home--showcase .wk-home-hero h1{font-size:clamp(46px,5.2vw,72px);line-height:1.06;margin:0;max-width:780px} #home.wk-home--showcase .wk-home-lead{font-size:19px;line-height:1.72;margin:26px 0 0;max-width:720px;color:#41677d} #home.wk-home--showcase .wk-home-hero .wk-actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap} #home.wk-home--showcase .wk-home-trustline{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px} #home.wk-home--showcase .wk-home-trustline span{padding:7px 11px;border:1px solid #d3e4e9;border-radius:999px;background:rgba(255,255,255,.72);font-size:12px;font-weight:800;color:#41677d} #home.wk-home--showcase .wk-home-hero-media{position:relative} #home.wk-home--showcase .wk-home-hero-media:before{content:"";position:absolute;inset:22px -22px -22px 22px;border-radius:28px;background:linear-gradient(145deg,rgba(22,119,234,.12),rgba(24,191,192,.17))} #home.wk-home--showcase .wk-home-hero-media>img{position:relative;z-index:1;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px;box-shadow:0 28px 65px rgba(8,47,79,.14)} #home.wk-home--showcase .wk-home-hero-note{position:absolute;z-index:2;left:-34px;bottom:28px;width:min(340px,72%);padding:18px 20px;border-radius:14px;background:#fff;box-shadow:0 18px 42px rgba(8,47,79,.16)} #home.wk-home--showcase .wk-home-hero-note strong,#home.wk-home--showcase .wk-home-hero-note span{display:block}#home.wk-home--showcase .wk-home-hero-note strong{color:var(--h-navy);font-size:15px}#home.wk-home--showcase .wk-home-hero-note span{margin-top:4px;color:#607b8c;font-size:13px} #home.wk-home--showcase .wk-home-offers{background:#fff} #home.wk-home--showcase .wk-home-feature{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:0;max-width:1240px;margin:0 auto;border:1px solid var(--h-border);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 18px 55px rgba(8,47,79,.07)} #home.wk-home--showcase .wk-home-feature-media{min-height:560px}#home.wk-home--showcase .wk-home-feature-media img{display:block;width:100%;height:100%;min-height:560px;object-fit:cover} #home.wk-home--showcase .wk-home-feature-copy{padding:clamp(42px,5vw,72px);align-self:center}#home.wk-home--showcase .wk-home-feature-copy h2{font-size:clamp(34px,3.7vw,52px);line-height:1.12;margin:0}#home.wk-home--showcase .wk-home-feature-lead{font-size:17px;line-height:1.72;color:#527287;margin:22px 0} #home.wk-home--showcase .wk-home-ticks{list-style:none;padding:0;margin:24px 0 30px;display:grid;gap:11px}#home.wk-home--showcase .wk-home-ticks li{position:relative;padding-left:28px;color:#315a73;font-weight:700}#home.wk-home--showcase .wk-home-ticks li:before{content:"✓";position:absolute;left:0;top:0;color:#0e9d83;font-weight:900} #home.wk-home--showcase .wk-home-inline-link{display:inline-flex;align-items:center;color:#0873df;font-weight:800;text-decoration:none}#home.wk-home--showcase .wk-home-inline-link:hover{text-decoration:underline} #home.wk-home--showcase .wk-home-domain{background:#082f4f;color:#fff} #home.wk-home--showcase .wk-home-domain-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(42px,6vw,82px);align-items:center} #home.wk-home--showcase .wk-home-domain h2{margin:0;color:#fff;font-size:clamp(36px,4vw,56px);line-height:1.12}#home.wk-home--showcase .wk-home-domain-copy>p:not(.wk-kicker){font-size:17px;line-height:1.7;color:#cbdbe4} #home.wk-home--showcase .wk-home-domain-offer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:3px 12px;margin:28px 0;padding:20px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.07)} #home.wk-home--showcase .wk-home-domain-offer span{grid-row:1/3;padding:7px 9px;border-radius:7px;background:#18bfc0;color:#062f4d;font-size:11px;font-weight:900;letter-spacing:.08em}#home.wk-home--showcase .wk-home-domain-offer strong{font-size:27px;color:#fff}#home.wk-home--showcase .wk-home-domain-offer b{font-size:14px;color:#d8e8ef}#home.wk-home--showcase .wk-home-domain-offer small{grid-column:2;color:#9fb9c7} #home.wk-home--showcase .wk-home-registrar{display:flex;gap:16px;align-items:center;margin-top:24px}#home.wk-home--showcase .wk-home-registrar img{width:74px;height:74px;object-fit:contain;background:#fff;border-radius:12px;padding:7px}#home.wk-home--showcase .wk-home-registrar p{margin:0!important;font-size:14px!important;line-height:1.5!important}#home.wk-home--showcase .wk-home-registrar strong{color:#fff} #home.wk-home--showcase .wk-home-domain-check{padding:clamp(30px,4vw,46px);border-radius:20px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.18);color:#294f67}#home.wk-home--showcase .wk-home-domain-label{margin:0 0 8px;color:#0b8f8d;font-size:11px;font-weight:900;letter-spacing:.1em}#home.wk-home--showcase .wk-home-domain-check label{display:block;margin-bottom:12px;color:var(--h-navy);font-size:22px;font-weight:800}#home.wk-home--showcase .wk-home-domain-row{display:grid;grid-template-columns:1fr auto;gap:10px}#home.wk-home--showcase .wk-home-domain-row input{width:100%;min-width:0;height:54px;padding:0 16px;border:1px solid #cbdde5;border-radius:9px;font-size:17px;color:#173f59;background:#fff}#home.wk-home--showcase .wk-home-domain-row .wk-btn{display:flex;align-items:center;white-space:nowrap;cursor:pointer}#home.wk-home--showcase .wk-home-domain-note{margin:12px 0 0;font-size:12px;color:#6d8797}#home.wk-home--showcase .wk-home-domain .error{color:#bd2d2d;font-weight:700}#home.wk-home--showcase .wk-home-domain .ajax{margin-top:30px;background:#fff;color:#294f67;border-radius:16px} #home.wk-home--showcase .wk-home-duo{background:#f4f9fa}#home.wk-home--showcase .wk-home-duo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}#home.wk-home--showcase .wk-home-card{overflow:hidden;border:1px solid var(--h-border);border-radius:22px;background:#fff;box-shadow:0 12px 34px rgba(8,47,79,.055)}#home.wk-home--showcase .wk-home-card-media{height:330px;overflow:hidden}#home.wk-home--showcase .wk-home-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}#home.wk-home--showcase .wk-home-card:hover .wk-home-card-media img{transform:scale(1.025)}#home.wk-home--showcase .wk-home-card-body{padding:34px 36px 38px}#home.wk-home--showcase .wk-home-card-body h2{font-size:clamp(29px,2.7vw,39px);line-height:1.16;margin:0}#home.wk-home--showcase .wk-home-card-body>p:not(.wk-kicker){font-size:16px;line-height:1.7;color:#587487} #home.wk-home--showcase .wk-home-comfort{padding:clamp(82px,8vw,118px) 0;background:#fff;color:#294f67}#home.wk-home--showcase .wk-home-comfort-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:clamp(54px,7vw,96px);align-items:center}#home.wk-home--showcase .wk-home-comfort-copy h2{margin:0;font-size:clamp(38px,4.4vw,58px);line-height:1.12}#home.wk-home--showcase .wk-home-comfort-copy>p:not(.wk-kicker){font-size:17px;line-height:1.75;color:#537287}#home.wk-home--showcase .wk-home-comfort-points{display:grid;gap:14px}#home.wk-home--showcase .wk-home-comfort-points>div{padding:23px 24px;border-left:4px solid #18bfc0;background:#f2f8fa}#home.wk-home--showcase .wk-home-comfort-points strong,#home.wk-home--showcase .wk-home-comfort-points span{display:block}#home.wk-home--showcase .wk-home-comfort-points strong{font-size:18px;color:var(--h-navy)}#home.wk-home--showcase .wk-home-comfort-points span{margin-top:5px;color:#627e8e;line-height:1.55} #home.wk-home--showcase .wk-home-vps{background:#0b3555}#home.wk-home--showcase .wk-home-vps-panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:60px;align-items:center}#home.wk-home--showcase .wk-home-vps h2{color:#fff;font-size:clamp(36px,4vw,54px);line-height:1.13;margin:0}#home.wk-home--showcase .wk-home-vps-copy>p:not(.wk-kicker){color:#c9dae3;font-size:17px;line-height:1.7}#home.wk-home--showcase .wk-home-vps-spec{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}#home.wk-home--showcase .wk-home-vps-spec span{padding:13px 15px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.06);color:#e9f4f7;font-weight:800;font-size:13px} #home.wk-home--showcase .wk-home-final{background:#fff}#home.wk-home--showcase .wk-home-final-panel{max-width:1050px;margin:auto;padding:clamp(38px,5vw,64px);border-radius:22px;background:linear-gradient(135deg,#edf8f7,#eef6fb);text-align:center}#home.wk-home--showcase .wk-home-final-panel h2{margin:0 auto;max-width:800px;font-size:clamp(34px,4vw,52px);line-height:1.14}#home.wk-home--showcase .wk-home-final-panel>p:not(.wk-kicker){max-width:720px;margin:18px auto;color:#567589;font-size:17px;line-height:1.7}#home.wk-home--showcase .wk-home-final-panel .wk-actions{justify-content:center} @media(max-width:900px){#home.wk-home--showcase .wk-home-hero-grid,#home.wk-home--showcase .wk-home-feature,#home.wk-home--showcase .wk-home-domain-panel,#home.wk-home--showcase .wk-home-duo-grid,#home.wk-home--showcase .wk-home-comfort-grid,#home.wk-home--showcase .wk-home-vps-panel{grid-template-columns:1fr}#home.wk-home--showcase .wk-home-feature-media{min-height:360px}#home.wk-home--showcase .wk-home-feature-media img{min-height:360px}#home.wk-home--showcase .wk-home-hero-note{left:16px;bottom:16px}#home.wk-home--showcase .wk-home-vps-spec{justify-content:flex-start}} @media(max-width:640px){#home.wk-home--showcase .wk-home-hero{padding:42px 0 56px}#home.wk-home--showcase .wk-home-hero h1{font-size:38px;line-height:1.08}#home.wk-home--showcase .wk-home-lead{font-size:16px}#home.wk-home--showcase .wk-home-hero .wk-actions,#home.wk-home--showcase .wk-home-feature-copy .wk-actions{display:grid}#home.wk-home--showcase .wk-home-hero .wk-btn,#home.wk-home--showcase .wk-home-feature-copy .wk-btn{width:100%;justify-content:center;text-align:center}#home.wk-home--showcase .wk-home-hero-media:before{display:none}#home.wk-home--showcase .wk-home-hero-media>img{border-radius:16px}#home.wk-home--showcase .wk-home-hero-note{position:relative;left:auto;bottom:auto;width:auto;margin:-22px 14px 0}#home.wk-home--showcase .wk-home-feature{border-radius:16px}#home.wk-home--showcase .wk-home-feature-media,#home.wk-home--showcase .wk-home-feature-media img{min-height:260px;height:260px}#home.wk-home--showcase .wk-home-feature-copy{padding:30px 24px 34px}#home.wk-home--showcase .wk-home-domain-row{grid-template-columns:1fr}#home.wk-home--showcase .wk-home-domain-row .wk-btn{justify-content:center}#home.wk-home--showcase .wk-home-domain-offer{grid-template-columns:1fr}#home.wk-home--showcase .wk-home-domain-offer span{grid-row:auto;width:max-content}#home.wk-home--showcase .wk-home-domain-offer small{grid-column:auto}#home.wk-home--showcase .wk-home-registrar{align-items:flex-start}#home.wk-home--showcase .wk-home-card-media{height:230px}#home.wk-home--showcase .wk-home-card-body{padding:28px 24px 32px}} /* ============================================================ WEBKOMFORT FŐOLDAL – finomhangolás 2026-09-22 ============================================================ */ #home.wk-home--showcase .wk-home-trustline a{ display:inline-flex; align-items:center; padding:8px 13px; border:1px solid #c8dfe7; border-radius:999px; background:rgba(255,255,255,.82); color:#315a73; font-size:12px; font-weight:800; text-decoration:none; transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease; } #home.wk-home--showcase .wk-home-trustline a:hover{ transform:translateY(-1px); border-color:#8fcbd4; background:#fff; color:#0873df; } #home.wk-home--showcase .wk-home-domain h2{ color:#fff !important; text-shadow:0 1px 0 rgba(0,0,0,.06); } #home.wk-home--showcase .wk-home-domain-subtitle{ margin:12px 0 20px; color:#5fe0da !important; font-size:clamp(22px,2.2vw,30px); line-height:1.2; letter-spacing:-.02em; } #home.wk-home--showcase .wk-home-smallbusiness{ background:#f4f9fa; } #home.wk-home--showcase .wk-home-smallbusiness-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(42px,6vw,88px); align-items:start; } #home.wk-home--showcase .wk-home-smallbusiness h2{ margin:0; font-size:clamp(34px,3.8vw,50px); line-height:1.13; } #home.wk-home--showcase .wk-home-smallbusiness-copy{ padding:28px 30px; border-left:4px solid #18bfc0; background:#fff; } #home.wk-home--showcase .wk-home-smallbusiness-copy p{ margin:0; color:#537287; font-size:17px; line-height:1.72; } #home.wk-home--showcase .wk-home-smallbusiness-copy p+p{ margin-top:16px; } #home.wk-home--showcase .wk-home-vps h2{ color:#fff !important; text-shadow:0 1px 0 rgba(0,0,0,.08); } #home.wk-home--showcase .wk-home-vps-panel{ grid-template-columns:minmax(0,1fr) minmax(360px,.82fr); } #home.wk-home--showcase .wk-home-vps-media{ overflow:hidden; border-radius:20px; box-shadow:0 24px 54px rgba(0,0,0,.22); } #home.wk-home--showcase .wk-home-vps-media img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; } #home.wk-home--showcase .wk-home-vps-spec{ justify-content:flex-start; margin:24px 0 26px; } #home.wk-home--showcase .wk-home-vps-spec span{ color:#fff; } #home.wk-home--showcase .wk-home-final{ background:#0b3555; padding-top:0; } #home.wk-home--showcase .wk-home-final-panel{ background:#fff; } @media(max-width:900px){ #home.wk-home--showcase .wk-home-smallbusiness-grid{ grid-template-columns:1fr; } } @media(max-width:640px){ #home.wk-home--showcase .wk-home-trustline{ gap:8px; } #home.wk-home--showcase .wk-home-trustline a{ padding:8px 11px; } #home.wk-home--showcase .wk-home-smallbusiness-copy{ padding:24px 22px; } #home.wk-home--showcase .wk-home-vps-media{ border-radius:16px; } } /* ============================================================ WEBKOMFORT FŐOLDAL – végleges QA finomhangolás 2026-09-22 ============================================================ */ /* Hero: service shortcuts + restored contact CTA */ #home.wk-home--showcase .wk-home-hero-copy > .wk-actions{ margin:26px 0 20px; } #home.wk-home--showcase .wk-home-hero-copy > .wk-actions .wk-btn{ width:max-content; } /* Unified Webkomfort / trust section */ #home.wk-home--showcase .wk-home-comfort{ padding:clamp(82px,8vw,118px) 0; background:#fff; } #home.wk-home--showcase .wk-home-comfort .wk-shell{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr); gap:clamp(54px,7vw,96px); align-items:center; } #home.wk-home--showcase .wk-home-comfort-head h2{ margin:0; font-size:clamp(38px,4.4vw,58px); line-height:1.12; } #home.wk-home--showcase .wk-home-comfort-head > p:not(.wk-kicker){ margin:20px 0 0; color:#537287; font-size:17px; line-height:1.75; } #home.wk-home--showcase .wk-home-comfort-points{ display:grid; gap:14px; } #home.wk-home--showcase .wk-home-comfort-action{ grid-column:1 / -1; margin-top:-22px; } /* Standalone contact CTA before VPS */ #home.wk-home--showcase .wk-home-final{ background:#f4f9fa; padding:clamp(68px,7vw,96px) 0; } #home.wk-home--showcase .wk-home-final-panel{ max-width:1050px; margin:auto; padding:clamp(38px,5vw,64px); border-radius:22px; background:linear-gradient(135deg,#edf8f7,#eef6fb); text-align:center; } #home.wk-home--showcase .wk-home-final-panel > p:not(.wk-kicker){ max-width:720px; margin:18px auto 0 !important; text-align:center !important; } #home.wk-home--showcase .wk-home-final-panel .wk-actions{ justify-content:center; margin-top:26px; } /* VPS follows the general contact path as the technical route */ #home.wk-home--showcase .wk-home-vps{ padding-top:clamp(76px,7vw,104px); padding-bottom:clamp(76px,7vw,104px); } @media(max-width:900px){ #home.wk-home--showcase .wk-home-comfort .wk-shell{ grid-template-columns:1fr; } #home.wk-home--showcase .wk-home-comfort-action{ grid-column:auto; margin-top:0; } } @media(max-width:640px){ #home.wk-home--showcase .wk-home-hero-copy > .wk-actions{ display:block; } #home.wk-home--showcase .wk-home-hero-copy > .wk-actions .wk-btn{ width:100%; } #home.wk-home--showcase .wk-home-final-panel{ padding:34px 22px; } } /* ============================================================ FŐOLDAL – 2026-09-22 felhasználói finomhangolás ============================================================ */ /* Hero: előbb a konkrét irányok, alattuk a kiemelt általános segítség */ #home.wk-home--showcase .wk-home-hero-copy > .wk-home-trustline{ margin:26px 0 0; } #home.wk-home--showcase .wk-home-hero-copy > .wk-actions{ margin:18px 0 0; } #home.wk-home--showcase .wk-home-hero-copy > .wk-actions .wk-btn{ width:max-content; } /* Webkomfort bizalmi blokk – egységes, olvasható kéthasábos elrendezés */ #home.wk-home--showcase .wk-home-comfort{ padding:clamp(78px,7vw,108px) 0; background:#f4f9fa; } #home.wk-home--showcase .wk-home-comfort .wk-shell{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:clamp(48px,6vw,84px); align-items:center; } #home.wk-home--showcase .wk-home-comfort-intro{ max-width:720px; } #home.wk-home--showcase .wk-home-comfort-intro h2{ margin:0; max-width:680px; font-size:clamp(38px,4.4vw,58px); line-height:1.1; } #home.wk-home--showcase .wk-home-comfort-intro > p:not(.wk-kicker){ margin:22px 0 0; color:#537287; font-size:17px; line-height:1.75; } #home.wk-home--showcase .wk-home-comfort-intro .wk-home-comfort-highlight{ margin-top:24px; padding:22px 24px; border-left:4px solid #18bfc0; background:#fff; color:#123d5d; } #home.wk-home--showcase .wk-home-comfort-intro .wk-actions{ margin-top:26px; } #home.wk-home--showcase .wk-home-comfort-points{ display:grid; gap:14px; } #home.wk-home--showcase .wk-home-comfort-points > div{ padding:24px 26px; border-left:4px solid #18bfc0; background:#fff; } #home.wk-home--showcase .wk-home-comfort-points strong{ display:block; margin-bottom:7px; } #home.wk-home--showcase .wk-home-comfort-points span{ display:block; color:#537287; line-height:1.55; } @media(max-width:900px){ #home.wk-home--showcase .wk-home-comfort .wk-shell{ grid-template-columns:1fr; } #home.wk-home--showcase .wk-home-comfort-intro{ max-width:none; } } @media(max-width:640px){ #home.wk-home--showcase .wk-home-hero-copy > .wk-actions .wk-btn{ width:100%; } #home.wk-home--showcase .wk-home-comfort-intro .wk-home-comfort-highlight, #home.wk-home--showcase .wk-home-comfort-points > div{ padding:20px; } } /* ============================================================ FŐOLDAL – egymást követő blokkok vizuális elválasztása ============================================================ */ /* Céges e-mail / SpeedPage kártyák */ #home.wk-home--showcase .wk-home-duo{ background:#ffffff; } /* Webkomfort bizalmi blokk */ #home.wk-home--showcase .wk-home-comfort{ background:#f2f8fa; } /* „Írja le saját szavaival...” blokk környezete */ #home.wk-home--showcase .wk-home-final{ background:#ffffff; } /* A szekcióhatárok legyenek egyértelműek, ne csak a belső kártyák váljanak el */ #home.wk-home--showcase .wk-home-duo, #home.wk-home--showcase .wk-home-comfort, #home.wk-home--showcase .wk-home-final{ position:relative; } /* ============================================================ WEBKOMFORT FŐOLDAL – domain ajánlat visszafogott kiemelése ============================================================ */ #home.wk-home--showcase .wk-home-domain{ position:relative; background:linear-gradient(180deg,#eef8fa 0%,#e9f4f7 100%); color:#294f67; } #home.wk-home--showcase .wk-home-domain::before{ content:""; position:absolute; inset:0 0 auto; height:1px; background:#d6e8ed; } #home.wk-home--showcase .wk-home-domain h2{ color:var(--h-navy)!important; text-shadow:none; } #home.wk-home--showcase .wk-home-domain-subtitle{ color:#0b9694!important; } #home.wk-home--showcase .wk-home-domain-copy>p:not(.wk-kicker){ color:#537287; } #home.wk-home--showcase .wk-home-domain-offer{ position:relative; grid-template-columns:auto 1fr; gap:3px 12px; margin:28px 0; padding:20px 22px; border:1px solid #d7e5ea; border-left:4px solid #ff6b57; border-radius:14px; background:#fff; box-shadow:0 10px 28px rgba(8,47,79,.055); } #home.wk-home--showcase .wk-home-domain-offer span{ grid-row:1/3; padding:7px 9px; border-radius:6px; background:#ff6b57; color:#fff; font-size:11px; font-weight:900; letter-spacing:.08em; } #home.wk-home--showcase .wk-home-domain-offer strong{ color:#0873df; font-size:30px; line-height:1.05; } #home.wk-home--showcase .wk-home-domain-offer b{ color:var(--h-navy); font-size:14px; } #home.wk-home--showcase .wk-home-domain-offer small{ grid-column:2; color:#718a99; } #home.wk-home--showcase .wk-home-registrar p{ color:#537287!important; } #home.wk-home--showcase .wk-home-registrar strong{ color:var(--h-navy); } #home.wk-home--showcase .wk-home-domain-check{ border:1px solid #d4e3e9; box-shadow:0 18px 45px rgba(8,47,79,.10); } @media(max-width:640px){ #home.wk-home--showcase .wk-home-domain-offer{ grid-template-columns:1fr; padding:18px; } #home.wk-home--showcase .wk-home-domain-offer span{ grid-row:auto; width:max-content; } #home.wk-home--showcase .wk-home-domain-offer small{ grid-column:auto; } #home.wk-home--showcase .wk-home-domain-offer strong{ font-size:27px; } } /* ======================================================================== /pay – rendelés utáni státuszoldal Csak presentation layer; a fizetési/rendelési logikát nem érinti. ======================================================================== */ #wk-pay.wk-pay-page{ min-height:calc(100vh - 120px); background:#f4f9fc; } #wk-pay .wk-pay-hero{ display:flex; align-items:center; min-height:620px; padding:clamp(48px,7vw,88px) 0; background: radial-gradient(circle at 0 100%,rgba(22,119,234,.08) 0 92px,transparent 93px), linear-gradient(135deg,#f5fafc 0%,#eef8f7 100%); } #wk-pay .wk-pay-panel{ width:min(100%,900px); margin:0 auto; padding:clamp(30px,5vw,54px); border:1px solid #d8e6ed; border-radius:20px; background:#fff; box-shadow:0 22px 60px rgba(8,47,79,.09); } #wk-pay .wk-pay-status{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin:0 0 18px; border-radius:50%; background:#e8f8f4; color:#087d73; font-size:24px; font-weight:900; line-height:1; } #wk-pay .wk-pay-status--error{ background:#fff0ed; color:#bd3b2e; } #wk-pay .wk-eyebrow{ margin-bottom:20px!important; } #wk-pay .wk-pay-panel h1{ max-width:760px; margin:0 0 16px!important; color:var(--wk-navy)!important; font-size:clamp(34px,4.2vw,52px)!important; line-height:1.08!important; letter-spacing:-.035em; } #wk-pay .wk-pay-panel > .wk-lead{ max-width:760px; margin:0!important; color:#42677d!important; font-size:clamp(18px,2vw,21px)!important; line-height:1.65!important; } #wk-pay .wk-pay-note{ margin:30px 0 0; padding:20px 22px; border-left:4px solid var(--wk-turquoise); border-radius:0 12px 12px 0; background:#f0faf8; } #wk-pay .wk-pay-note strong{ display:block; margin-bottom:5px; color:var(--wk-navy); font-size:15px; } #wk-pay .wk-pay-note p{ margin:0!important; color:#496b7f; font-size:14px; line-height:1.6; } #wk-pay .wk-pay-next{ margin-top:34px; padding-top:30px; border-top:1px solid #dbe7ed; } #wk-pay .wk-pay-next h2{ margin:0 0 12px!important; color:var(--wk-navy)!important; font-size:clamp(25px,3vw,32px)!important; line-height:1.15!important; } #wk-pay .wk-pay-next > p{ max-width:760px; margin:0!important; color:#42677d; font-size:16px; line-height:1.7; } #wk-pay .wk-actions{ margin-top:26px; } #wk-pay .wk-pay-amount{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin:30px 0 0; padding:20px 22px; border:1px solid #d8e6ed; border-radius:12px; background:#f7fafc; } #wk-pay .wk-pay-amount span{color:#557488;font-weight:700;} #wk-pay .wk-pay-amount strong{color:var(--wk-navy);font-size:24px;} #wk-pay .wk-pay-form{margin-top:22px;} @media(max-width:640px){ #wk-pay .wk-pay-hero{ min-height:0; padding:28px 0 42px; align-items:flex-start; } #wk-pay .wk-shell{ width:min(calc(100% - 28px),var(--wk-max)); } #wk-pay .wk-pay-panel{ padding:26px 20px 24px; border-radius:16px; } #wk-pay .wk-pay-status{ width:42px; height:42px; margin-bottom:15px; font-size:21px; } #wk-pay .wk-pay-panel h1{ font-size:34px!important; } #wk-pay .wk-pay-note{ margin-top:24px; padding:18px; } #wk-pay .wk-pay-next{ margin-top:26px; padding-top:24px; } #wk-pay .wk-actions{ display:grid; grid-template-columns:1fr; gap:10px; } #wk-pay .wk-actions .wk-btn, #wk-pay .wk-pay-form .wk-btn{ width:100%; } #wk-pay .wk-pay-amount{ align-items:flex-start; flex-direction:column; gap:6px; } } /* ======================================================================== SimplePay visszatrsi oldal SUCCESS / CANCEL / FAIL / TIMEOUT Csak presentation layer. ======================================================================== */ .wk-simplepay-page{ min-height:calc(100vh - 120px); background:#f4f9fc; } .wk-simplepay-page .wk-simplepay-hero{ display:flex; align-items:center; min-height:620px; padding:clamp(48px,7vw,88px) 0; background: radial-gradient(circle at 0 100%,rgba(22,119,234,.08) 0 92px,transparent 93px), linear-gradient(135deg,#f5fafc 0%,#eef8f7 100%); } .wk-simplepay-page .wk-simplepay-panel{ width:min(100%,900px); margin:0 auto; padding:clamp(30px,5vw,54px); border:1px solid #d8e6ed; border-radius:20px; background:#fff; box-shadow:0 22px 60px rgba(8,47,79,.09); } .wk-simplepay-page .wk-simplepay-status{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin:0 0 18px; border-radius:50%; background:#e8f8f4; color:#087d73; font-size:24px; font-weight:900; line-height:1; } .wk-simplepay-page .wk-simplepay-status--neutral{ background:#eef5f8; color:#42677d; } .wk-simplepay-page .wk-simplepay-status--error{ background:#fff0ed; color:#bd3b2e; } .wk-simplepay-page .wk-kicker{ margin-bottom:20px!important; } .wk-simplepay-page .wk-simplepay-panel h1{ max-width:760px; margin:0 0 16px!important; color:var(--wk-navy)!important; font-size:clamp(34px,4.2vw,52px)!important; line-height:1.08!important; letter-spacing:-.035em; } .wk-simplepay-page .wk-simplepay-panel > .wk-lead{ max-width:760px; margin:0!important; color:#42677d!important; font-size:clamp(18px,2vw,21px)!important; line-height:1.65!important; } .wk-simplepay-page .wk-simplepay-details{ display:grid; gap:0; margin-top:30px; border:1px solid #d8e6ed; border-radius:12px; overflow:hidden; background:#f7fafc; } .wk-simplepay-page .wk-simplepay-details > div{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:15px 20px; } .wk-simplepay-page .wk-simplepay-details > div + div{ border-top:1px solid #d8e6ed; } .wk-simplepay-page .wk-simplepay-details span{ color:#557488; font-size:14px; font-weight:600; } .wk-simplepay-page .wk-simplepay-details strong{ color:var(--wk-navy); font-size:15px; text-align:right; overflow-wrap:anywhere; } .wk-simplepay-page .wk-simplepay-note{ margin:24px 0 0; padding:20px 22px; border-left:4px solid var(--wk-turquoise); border-radius:0 12px 12px 0; background:#f0faf8; } .wk-simplepay-page .wk-simplepay-note strong{ display:block; margin-bottom:5px; color:var(--wk-navy); font-size:15px; } .wk-simplepay-page .wk-simplepay-note p{ margin:0!important; color:#496b7f; font-size:14px; line-height:1.6; } .wk-simplepay-page .wk-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; } @media(max-width:640px){ .wk-simplepay-page .wk-simplepay-hero{ min-height:0; padding:28px 0 42px; align-items:flex-start; } .wk-simplepay-page .wk-shell{ width:min(calc(100% - 28px),var(--wk-max)); } .wk-simplepay-page .wk-simplepay-panel{ padding:26px 20px 24px; border-radius:16px; } .wk-simplepay-page .wk-simplepay-status{ width:42px; height:42px; margin-bottom:15px; font-size:21px; } .wk-simplepay-page .wk-simplepay-panel h1{ font-size:34px!important; } .wk-simplepay-page .wk-simplepay-details{ margin-top:24px; } .wk-simplepay-page .wk-simplepay-details > div{ display:block; padding:14px 16px; } .wk-simplepay-page .wk-simplepay-details span, .wk-simplepay-page .wk-simplepay-details strong{ display:block; text-align:left; } .wk-simplepay-page .wk-simplepay-details strong{ margin-top:4px; } .wk-simplepay-page .wk-simplepay-note{ margin-top:20px; padding:18px; } .wk-simplepay-page .wk-actions{ display:grid; grid-template-columns:1fr; gap:10px; } .wk-simplepay-page .wk-actions .wk-btn{ width:100%; justify-content:center; text-align:center; } } /* ============================================================ WEBKOMFORT foldal mobil VPS + globlis mobil UP gomb 2026-09-24 ============================================================ */ @media(max-width:640px){ /* ---------- FOLDAL / VPS ---------- */ #home.wk-home--showcase .wk-home-vps{ overflow:hidden; } #home.wk-home--showcase .wk-home-vps .wk-shell{ width:min(calc(100% - 32px),var(--wk-max)); max-width:100%; margin-left:auto; margin-right:auto; } #home.wk-home--showcase .wk-home-vps-panel{ display:flex; flex-direction:column; width:100%; min-width:0; gap:30px; } #home.wk-home--showcase .wk-home-vps-copy, #home.wk-home--showcase .wk-home-vps-media{ width:100%; min-width:0; max-width:100%; } #home.wk-home--showcase .wk-home-vps h2{ width:100%; max-width:100%; margin:0; font-size:34px; line-height:1.12; overflow-wrap:normal; word-break:normal; } #home.wk-home--showcase .wk-home-vps-copy > p:not(.wk-kicker){ width:100%; max-width:100%; font-size:16px; line-height:1.65; overflow-wrap:normal; word-break:normal; } #home.wk-home--showcase .wk-home-vps-spec{ display:flex; flex-wrap:wrap; width:100%; max-width:100%; gap:8px; margin:22px 0 24px; } #home.wk-home--showcase .wk-home-vps-spec span{ width:auto; max-width:100%; padding:11px 13px; white-space:normal; } #home.wk-home--showcase .wk-home-vps .wk-actions{ display:grid; grid-template-columns:1fr; width:100%; gap:10px; } #home.wk-home--showcase .wk-home-vps .wk-actions .wk-btn{ display:flex; width:100%; max-width:100%; justify-content:center; text-align:center; white-space:normal; } #home.wk-home--showcase .wk-home-vps-media{ overflow:hidden; border-radius:16px; } #home.wk-home--showcase .wk-home-vps-media img{ display:block; width:100%; max-width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; } /* ---------- GLOBLIS VISSZA A TETEJRE GOMB ---------- */ #up{ right:14px !important; left:auto !important; bottom:18px !important; width:44px !important; height:44px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:50% !important; background:#1677ea !important; box-shadow:0 7px 20px rgba(7,35,55,.22) !important; opacity:.96 !important; animation:none !important; line-height:44px !important; text-align:center !important; overflow:hidden !important; z-index:90 !important; } #up i{ display:block !important; width:44px !important; height:44px !important; margin:0 !important; padding:0 !important; color:#fff !important; font-size:28px !important; line-height:44px !important; text-align:center !important; } }